/* ==========================================================================
   TASVEERKARR - Complete Luxury Editorial Design System
   Permanent Crimson & Sage Theme: #FFF5F5 | #FBEBEB | #3D1C24 | #4A2027 | #991a1d
   ========================================================================== */

:root {
  /* Hex Color Tokens */
  --theme-bg: #FFF5F5;
  --theme-card: #FBEBEB;
  --theme-text: #3D1C24;
  --theme-primary: #4A2027;
  --theme-gold: #991a1d;
  --theme-accent: #991a1d;

  /* RGB Channels for Flexible Opacities */
  --theme-bg-rgb: 255, 245, 245;
  --theme-card-rgb: 251, 235, 235;
  --theme-text-rgb: 61, 28, 36;
  --theme-primary-rgb: 74, 32, 39;
  --theme-gold-rgb: 153, 26, 29;
  --theme-accent-rgb: 153, 26, 29;

  /* Typography Fonts */
  --theme-heading-font: 'Playfair Display', Georgia, serif;
  --theme-cormorant-font: 'Cormorant Garamond', Garamond, serif;
  --theme-body-font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="blush"] {
  --theme-bg: #FFF5F5;
  --theme-card: #FBEBEB;
  --theme-text: #3D1C24;
  --theme-primary: #4A2027;
  --theme-gold: #991a1d;
  --theme-accent: #991a1d;
}

/* ================= BASE HTML & RESET ================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--theme-body-font);
  background-color: var(--theme-bg);
  color: var(--theme-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Selection Highlight Color Default (Royal Rose-Gold) */
::selection {
  background-color: var(--theme-gold) !important;
  color: #FFFFFF !important;
}

.selection\:bg-theme-gold::selection {
  background-color: var(--theme-gold) !important;
  color: #FFFFFF !important;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6, .font-serif-editorial {
  font-family: var(--theme-heading-font);
}

.font-cormorant {
  font-family: var(--theme-cormorant-font);
}

.font-sans {
  font-family: var(--theme-body-font);
}

/* Pass inner element clicks to parent button */
button * {
  pointer-events: none;
}

/* ================= PURE CSS THEME HELPER CLASSES (100% RELIABLE FALLBACKS) ================= */
.bg-theme-bg { background-color: var(--theme-bg); }
.bg-theme-bg\/95 { background-color: rgba(var(--theme-bg-rgb), 0.95); }
.bg-theme-bg\/90 { background-color: rgba(var(--theme-bg-rgb), 0.9); }
.bg-theme-bg\/80 { background-color: rgba(var(--theme-bg-rgb), 0.8); }
.bg-theme-bg\/50 { background-color: rgba(var(--theme-bg-rgb), 0.5); }

.bg-theme-card { background-color: var(--theme-card); }
.bg-theme-card\/60 { background-color: rgba(var(--theme-card-rgb), 0.6); }
.bg-theme-card\/80 { background-color: rgba(var(--theme-card-rgb), 0.8); }
.bg-theme-card\/90 { background-color: rgba(var(--theme-card-rgb), 0.9); }

.bg-theme-primary { background-color: var(--theme-primary); }
.bg-theme-primary\/95 { background-color: rgba(var(--theme-primary-rgb), 0.95); }
.bg-theme-primary\/90 { background-color: rgba(var(--theme-primary-rgb), 0.9); }
.bg-theme-primary\/80 { background-color: rgba(var(--theme-primary-rgb), 0.8); }
.bg-theme-primary\/10 { background-color: rgba(var(--theme-primary-rgb), 0.1); }
.bg-theme-primary\/20 { background-color: rgba(var(--theme-primary-rgb), 0.2); }

.bg-theme-gold { background-color: var(--theme-gold); }
.bg-theme-gold\/10 { background-color: rgba(var(--theme-gold-rgb), 0.1); }
.bg-theme-gold\/15 { background-color: rgba(var(--theme-gold-rgb), 0.15); }
.bg-theme-gold\/20 { background-color: rgba(var(--theme-gold-rgb), 0.2); }
.bg-theme-gold\/30 { background-color: rgba(var(--theme-gold-rgb), 0.3); }

/* Text Color Classes */
.text-theme-bg { color: var(--theme-bg) !important; }
.text-theme-text { color: var(--theme-text); }
.text-theme-text\/80 { color: rgba(var(--theme-text-rgb), 0.8); }
.text-theme-primary { color: var(--theme-primary); }
.text-theme-primary\/70 { color: rgba(var(--theme-primary-rgb), 0.7); }
.text-theme-primary\/80 { color: rgba(var(--theme-primary-rgb), 0.8); }
.text-theme-primary\/90 { color: rgba(var(--theme-primary-rgb), 0.9); }
.text-theme-gold { color: var(--theme-gold); }
.text-theme-gold\/80 { color: rgba(var(--theme-gold-rgb), 0.8); }
.text-theme-gold\/90 { color: rgba(var(--theme-gold-rgb), 0.9); }

/* Border Classes */
.border-theme-primary { border-color: var(--theme-primary); }
.border-theme-primary\/10 { border-color: rgba(var(--theme-primary-rgb), 0.1); }
.border-theme-primary\/15 { border-color: rgba(var(--theme-primary-rgb), 0.15); }
.border-theme-primary\/20 { border-color: rgba(var(--theme-primary-rgb), 0.2); }
.border-theme-primary\/30 { border-color: rgba(var(--theme-primary-rgb), 0.3); }
.border-theme-primary\/40 { border-color: rgba(var(--theme-primary-rgb), 0.4); }

.border-theme-gold { border-color: var(--theme-gold); }
.border-theme-gold\/20 { border-color: rgba(var(--theme-gold-rgb), 0.2); }
.border-theme-gold\/30 { border-color: rgba(var(--theme-gold-rgb), 0.3); }
.border-theme-gold\/40 { border-color: rgba(var(--theme-gold-rgb), 0.4); }
.border-theme-gold\/50 { border-color: rgba(var(--theme-gold-rgb), 0.5); }

/* Accents and Fills */
.accent-theme-gold { accent-color: var(--theme-gold); }
.fill-theme-gold { fill: var(--theme-gold); }

/* Hover & Focus State Classes */
.hover\:bg-theme-gold:hover { background-color: var(--theme-gold) !important; }
.hover\:bg-theme-primary:hover { background-color: var(--theme-primary) !important; }
.hover\:border-theme-gold:hover { border-color: var(--theme-gold) !important; }
.hover\:text-theme-gold:hover { color: var(--theme-gold) !important; }
.focus\:border-theme-gold:focus {
  border-color: var(--theme-gold) !important;
  outline: none !important;
}
.group:hover .group-hover\:bg-theme-gold { background-color: var(--theme-gold) !important; }

/* Buttons with primary backgrounds */
button.bg-theme-primary,
a.bg-theme-primary {
  color: #FFFFFF !important;
}

/* Highlighted Active State Utility Classes */
.active-highlight,
.active-filter-btn {
  background-color: var(--theme-gold) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-color: var(--theme-gold) !important;
  box-shadow: 0 4px 16px rgba(var(--theme-gold-rgb), 0.4) !important;
}

/* Glassmorphism / Backdrop Blur Fallbacks */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.backdrop-blur-xl {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ================= FAQ ACCORDION DETAILS/SUMMARY ================= */
details summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details summary::-webkit-details-marker,
details summary::marker {
  display: none !important;
}
details[open] summary svg,
details[open] summary i {
  transform: rotate(180deg);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
details summary svg,
details summary i {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================= LUXURY FORM CONTROLS ================= */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
textarea,
select {
  font-family: var(--theme-body-font);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: var(--theme-gold) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-gold-rgb), 0.15) !important;
  outline: none !important;
}

/* ================= CUSTOM LUXURY SCROLLBAR ================= */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--theme-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--theme-gold);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #781518;
}

/* ================= MASONRY GRIDS ================= */
/* Home Page Preview Masonry Grid */
.masonry-grid {
  column-count: 1;
  column-gap: 1.5rem;
  width: 100%;
}
@media (min-width: 640px) {
  .masonry-grid { column-count: 2; column-gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .masonry-grid { column-count: 3; column-gap: 1.5rem; }
}

/* Portfolio Page Virtual Masonry Grid */
.portfolio-masonry-grid {
  column-count: 2;
  column-gap: 0.75rem;
  width: 100%;
}
@media (min-width: 640px) {
  .portfolio-masonry-grid { column-count: 3; column-gap: 1.25rem; }
}
@media (min-width: 1024px) {
  .portfolio-masonry-grid { column-count: 4; column-gap: 1.25rem; }
}
@media (min-width: 1400px) {
  .portfolio-masonry-grid { column-count: 5; column-gap: 1.25rem; }
}
@media (min-width: 1800px) {
  .portfolio-masonry-grid { column-count: 6; column-gap: 1.25rem; }
}

.masonry-item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  break-inside: avoid-column;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 0.75rem;
  backface-visibility: hidden;
  transform: translateZ(0);
  min-height: 0 !important;
  height: auto !important;
  background-color: transparent !important;
}
@media (min-width: 640px) {
  .masonry-item {
    margin-bottom: 1.25rem;
  }
}
.masonry-item img {
  display: block;
  width: 100%;
  height: auto !important;
}

/* ================= KEYFRAME ANIMATIONS ================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(-0.5deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.5deg);
  }
}

@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--theme-gold-rgb), 0.4);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(var(--theme-gold-rgb), 0.25);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-pulse-gold {
  animation: pulseGold 3s infinite;
}

/* ================= HOVER STABILIZATION (NO JITTER, ZERO SPATIAL JUMPS) ================= */
.hover-lift {
  transition: none !important;
}
.hover-lift:hover {
  transform: none !important;
  box-shadow: none !important;
}

.masonry-item,
.masonry-item:hover,
.group:hover img,
img:hover,
.card-hover:hover {
  transform: none !important;
}