/* ============================================================================
   Future Cards — Wedding Edition Theme
   ----------------------------------------------------------------------------
   A luxury royal wedding overlay scoped under [data-theme="wedding"].
   This file ONLY runs when the theme attribute is "wedding"; it does not
   touch the Main Brand visuals.

   Design language: Dior · Cartier · Vogue Weddings · Apple minimalism.
   Palette inherits champagne / ivory / dusty rose-gold from brand.jsx.

   The structure mirrors the existing styles.css pattern: scoped, additive,
   never destructive. To hide the wedding theme entirely, simply remove
   <link> to this file and switch default in app.js prefs.
   ============================================================================ */

/* ---------- 1. CSS custom properties (palette tokens) ---------------------- */
:root[data-theme="wedding"] {
  --w-champagne: #C9A56A;
  --w-champagne-deep: #A58647;
  --w-champagne-light: #F7EDDB;
  --w-champagne-soft: #EFE3CE;

  --w-rose-gold: #C99A8A;
  --w-rose-gold-deep: #A87968;
  --w-rose-gold-light: #F4E2D8;

  --w-ivory: #FAF4EA;
  --w-ivory-deep: #F3EADA;
  --w-pearl: #FBF8F2;
  --w-blush-beige: #EFE5D5;

  --w-ink: #2A2520;
  --w-ink-60: rgba(42, 37, 32, 0.62);
  --w-ink-40: rgba(42, 37, 32, 0.40);
  --w-ink-15: rgba(201, 165, 106, 0.22);
  --w-ink-08: rgba(201, 165, 106, 0.13);

  --w-shadow-soft: 0 10px 40px rgba(201, 165, 106, 0.10),
                   0 2px 8px rgba(168, 121, 104, 0.06);
  --w-shadow-glow: 0 18px 60px rgba(201, 165, 106, 0.18),
                   0 4px 14px rgba(201, 165, 106, 0.10);

  --w-font-serif-en: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --w-font-serif-ar: "El Messiri", "Cairo", "Lato", serif;
}

/* ---------- 2. Body atmosphere ---------------------------------------------- */
/* Soft, dreamy ivory wash with two luminous radial blooms in the corners.
   Fixed attachment so the glow doesn't visibly scroll with content. */
[data-theme="wedding"] body {
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(201, 165, 106, 0.14), transparent 62%),
    radial-gradient(900px 700px at -10% 102%, rgba(201, 154, 138, 0.10), transparent 60%),
    linear-gradient(180deg, var(--w-pearl) 0%, var(--w-ivory) 100%);
  background-attachment: fixed;
  color: var(--w-ink);
}

/* Subtle floating particle layer — three pearl-bloom orbs that drift very
   slowly. Pure CSS, GPU-accelerated, no JS. */
[data-theme="wedding"] body::before,
[data-theme="wedding"] body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
[data-theme="wedding"] body::before {
  top: 18vh;
  left: -6vw;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(201, 165, 106, 0.30) 0%, transparent 70%);
  animation: w-drift-a 22s ease-in-out infinite alternate;
}
[data-theme="wedding"] body::after {
  bottom: 12vh;
  right: -4vw;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(201, 154, 138, 0.22) 0%, transparent 70%);
  animation: w-drift-b 28s ease-in-out infinite alternate;
}
@keyframes w-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(40px, -30px, 0) scale(1.08); }
}
@keyframes w-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-50px, 20px, 0) scale(1.05); }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  [data-theme="wedding"] body::before,
  [data-theme="wedding"] body::after { animation: none; }
}

/* ---------- 3. Section surfaces -------------------------------------------- */
/* The site uses inline `background: #fff` / `BRAND.white` for the page
   container. Make it a soft translucent pearl so the body bloom shows
   through. The match is via attribute selectors because the styles are
   inline-JSX. */
[data-theme="wedding"] [style*="background: rgb(254, 254, 254)"],
[data-theme="wedding"] [style*="background:#FEFEFE"],
[data-theme="wedding"] [style*="background: #FEFEFE"] {
  background: transparent !important;
}

/* The "How it works" section uses BRAND.paper (#FAFAF7) as a soft block.
   We want it slightly warmer in wedding mode. */
[data-theme="wedding"] [style*="background: rgb(250, 250, 247)"],
[data-theme="wedding"] [style*="background:#FAFAF7"] {
  background: linear-gradient(180deg, rgba(247, 237, 219, 0.55) 0%, rgba(243, 234, 218, 0.35) 100%) !important;
}

/* Top sticky nav: stronger backdrop blur + soft gold underline */
[data-theme="wedding"] [style*="rgba(254,254,254,0.82)"],
[data-theme="wedding"] [style*="rgba(254, 254, 254, 0.82)"] {
  background: rgba(251, 248, 242, 0.78) !important;
  backdrop-filter: saturate(1.15) blur(18px) !important;
  -webkit-backdrop-filter: saturate(1.15) blur(18px) !important;
}

/* ---------- 4. Typography — editorial luxury -------------------------------- */
/* Apply Cormorant Garamond / El Messiri to large headlines. We target the
   inline font-size declarations the JSX uses for hero / section titles. */
[data-theme="wedding"] [style*="font-size: 76px"],
[data-theme="wedding"] [style*="font-size: 72px"],
[data-theme="wedding"] [style*="font-size: 64px"],
[data-theme="wedding"] [style*="font-size: 56px"],
[data-theme="wedding"] [style*="font-size: 52px"],
[data-theme="wedding"] [style*="font-size: 44px"] {
  font-family: var(--w-font-serif-en) !important;
  font-weight: 500 !important;
  letter-spacing: -0.5px !important;
}

/* Arabic headlines: use El Messiri (loaded alongside Cairo) */
[data-theme="wedding"][dir="rtl"] [style*="font-size: 76px"],
[data-theme="wedding"][dir="rtl"] [style*="font-size: 72px"],
[data-theme="wedding"][dir="rtl"] [style*="font-size: 64px"],
[data-theme="wedding"][dir="rtl"] [style*="font-size: 56px"],
[data-theme="wedding"][dir="rtl"] [style*="font-size: 52px"],
[data-theme="wedding"][dir="rtl"] [style*="font-size: 44px"],
[data-theme="wedding"] [dir="rtl"] [style*="font-size: 76px"],
[data-theme="wedding"] [dir="rtl"] [style*="font-size: 72px"],
[data-theme="wedding"] [dir="rtl"] [style*="font-size: 64px"],
[data-theme="wedding"] [dir="rtl"] [style*="font-size: 56px"],
[data-theme="wedding"] [dir="rtl"] [style*="font-size: 52px"],
[data-theme="wedding"] [dir="rtl"] [style*="font-size: 44px"] {
  font-family: var(--w-font-serif-ar) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Mid-size headers (section eyebrows, step titles) — slightly lighter weight
   and a touch more letter-spacing for elegance. */
[data-theme="wedding"] [style*="font-size: 26px"] {
  font-family: var(--w-font-serif-en) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
[data-theme="wedding"][dir="rtl"] [style*="font-size: 26px"],
[data-theme="wedding"] [dir="rtl"] [style*="font-size: 26px"] {
  font-family: var(--w-font-serif-ar) !important;
  font-weight: 600 !important;
}

/* ---------- 5. Cards & wallet passes ---------------------------------------- */
/* Cards already have inline gradients that pick up BRAND.teal / BRAND.indigo
   (now swapped to champagne / rose-gold by brand.jsx). We add a soft luminous
   border + warmer shadow to make them feel collectible. */
[data-theme="wedding"] [style*="border-radius: 28px"][style*="background"] {
  box-shadow:
    0 30px 70px rgba(168, 121, 104, 0.22),
    0 8px 24px rgba(201, 165, 106, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* Tap-to-share & checked-in badges — keep white card but warm the shadow */
[data-theme="wedding"] [style*="background: rgb(255, 255, 255)"][style*="border-radius: 14px"],
[data-theme="wedding"] [style*="background:#fff"][style*="border-radius: 14px"] {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
  box-shadow:
    0 12px 36px rgba(168, 121, 104, 0.15),
    0 3px 10px rgba(201, 165, 106, 0.08) !important;
  border: 1px solid rgba(201, 165, 106, 0.18) !important;
}

/* The hero soft "Plight" radial behind the stacked cards — warmer */
[data-theme="wedding"] [style*="border-radius: 50%"][style*="rgba(255,255,255,0.08)"] {
  background: rgba(247, 237, 219, 0.30) !important;
}
[data-theme="wedding"] [style*="border-radius: 50%"][style*="rgba(255,255,255,0.05)"] {
  background: rgba(244, 226, 216, 0.25) !important;
}

/* Process step cards (How it works) — add soft champagne border + warm shadow */
[data-theme="wedding"] [style*="border-radius: 20px"][style*="padding: 36px 32px"] {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(201, 165, 106, 0.20) !important;
  box-shadow: var(--w-shadow-soft);
  backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s cubic-bezier(.2,.7,.3,1), border-color .25s ease !important;
}
[data-theme="wedding"] [style*="border-radius: 20px"][style*="padding: 36px 32px"]:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 165, 106, 0.40) !important;
  box-shadow: var(--w-shadow-glow);
}

/* ---------- 6. Buttons — soft luxury pills --------------------------------- */
/* Dark primary CTAs (BRAND.ink) become deep champagne in wedding mode.
   We target buttons whose inline background matches BRAND.ink (#272727). */
[data-theme="wedding"] button[style*="background: rgb(39, 39, 39)"] {
  background: linear-gradient(135deg, var(--w-champagne) 0%, var(--w-champagne-deep) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(201, 165, 106, 0.32),
              0 2px 6px rgba(168, 121, 104, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  transition: transform .18s cubic-bezier(.2,.7,.3,1),
              box-shadow .25s cubic-bezier(.2,.7,.3,1),
              filter .18s ease !important;
}
[data-theme="wedding"] button[style*="background: rgb(39, 39, 39)"]:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 36px rgba(201, 165, 106, 0.42),
              0 4px 10px rgba(168, 121, 104, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px);
}

/* Ghost / outlined buttons get a champagne border */
[data-theme="wedding"] button[style*="border: 1.5px solid rgba(39, 39, 39, 0.15)"] {
  border-color: rgba(201, 165, 106, 0.45) !important;
  color: var(--w-champagne-deep) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px);
  transition: all .22s cubic-bezier(.2,.7,.3,1) !important;
}
[data-theme="wedding"] button[style*="border: 1.5px solid rgba(39, 39, 39, 0.15)"]:hover {
  background: rgba(247, 237, 219, 0.85) !important;
  border-color: var(--w-champagne) !important;
  box-shadow: 0 6px 20px rgba(201, 165, 106, 0.18) !important;
}

/* ---------- 7. Big CTA hero block ------------------------------------------- */
/* The big rounded gradient CTA at the bottom of the landing page inherits its
   gradient from BRAND.teal -> BRAND.indigo. With the swapped wedding palette
   it becomes champagne -> rose-gold automatically. We add a subtle inner
   pearl glow + softer corner radius. */
[data-theme="wedding"] [style*="border-radius: 32px"][style*="padding: 80px 60px"] {
  border-radius: 36px !important;
  box-shadow:
    0 40px 90px rgba(168, 121, 104, 0.32),
    0 10px 30px rgba(201, 165, 106, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  position: relative;
}
[data-theme="wedding"] [style*="border-radius: 32px"][style*="padding: 80px 60px"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(600px 400px at 10% 100%, rgba(255, 255, 255, 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 8. Footer ------------------------------------------------------- */
/* Footer gradient flows from BRAND.teal->BRAND.indigo (now champagne->rose).
   Add a faint sparkle-tone overlay. */
[data-theme="wedding"] footer {
  position: relative;
}
[data-theme="wedding"] footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
  pointer-events: none;
}
[data-theme="wedding"] footer > * { position: relative; z-index: 1; }

/* ---------- 9. Page loader — soft gold instead of teal --------------------- */
[data-theme="wedding"] .page-loader__bar {
  background: var(--w-champagne);
  box-shadow: 0 0 10px rgba(201, 165, 106, 0.55);
}

/* Scrollbar */
[data-theme="wedding"] ::-webkit-scrollbar-thumb {
  background: rgba(201, 165, 106, 0.30);
}
[data-theme="wedding"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 165, 106, 0.50);
}

/* Focus ring — gold */
[data-theme="wedding"] :focus-visible {
  outline-color: var(--w-champagne);
}

/* ---------- 10. Hover lift refinement -------------------------------------- */
/* Existing .fc-lift gets a smoother, longer ease — feels more luxurious */
[data-theme="wedding"] .fc-lift {
  transition: transform .35s cubic-bezier(.2,.7,.3,1),
              box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
[data-theme="wedding"] .fc-lift:hover {
  transform: translateY(-3px);
}

/* Press feedback */
[data-theme="wedding"] .fc-press {
  transition: transform .18s cubic-bezier(.2,.7,.3,1),
              opacity .18s ease,
              box-shadow .25s cubic-bezier(.2,.7,.3,1),
              filter .18s ease;
}

/* ---------- 11. Toast — wedding palette ------------------------------------ */
[data-theme="wedding"] .fc-toast {
  background: linear-gradient(135deg, var(--w-champagne) 0%, var(--w-champagne-deep) 100%);
  color: #FFFFFF;
  box-shadow: 0 12px 32px rgba(168, 121, 104, 0.28);
}

/* ---------- 12. Wedding edition eyebrow ribbon ----------------------------- */
/* A small, optional decorative ribbon shown above the hero — purely visual.
   The element is injected from JS only when theme === wedding (see app.js).
   It must not exist in main brand. */
[data-theme="wedding"] .fc-wedding-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 14px;
  font-family: var(--w-font-serif-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--w-champagne-deep);
  background: linear-gradient(135deg, rgba(247, 237, 219, 0.95) 0%, rgba(244, 226, 216, 0.90) 100%);
  border: 1px solid rgba(201, 165, 106, 0.35);
  border-radius: 100px;
  box-shadow: 0 8px 22px rgba(201, 165, 106, 0.18);
  backdrop-filter: blur(8px);
}
[data-theme="wedding"][dir="rtl"] .fc-wedding-ribbon,
[data-theme="wedding"] [dir="rtl"] .fc-wedding-ribbon {
  font-family: var(--w-font-serif-ar);
  letter-spacing: 0;
}
.fc-wedding-ribbon__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--w-champagne);
  box-shadow: 0 0 0 3px rgba(201, 165, 106, 0.22);
  animation: w-pulse 2.4s ease-in-out infinite;
}
@keyframes w-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 165, 106, 0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(201, 165, 106, 0.10); }
}

/* ---------- 13. Logo wordmark color in wedding mode ------------------------ */
/* The Future Cards wordmark in the navbar uses BRAND.ink (dark). In wedding
   mode this stays dark but we soften it. */
/* ---------- 13. Logo wordmark color in wedding mode ------------------------ */
/* Dark warm ink in the navbar, but keep white in the footer where the
   background is the champagne→rose-gold gradient. */
   [data-theme="wedding"] .fc-logo-name {
    color: var(--w-ink) !important;
    letter-spacing: 0 !important;
  }
  [data-theme="wedding"] footer .fc-logo-name {
    color: #FFFFFF !important;
  }

/* ---------- 14. Eyebrow pill (hero) ---------------------------------------- */
/* The small eyebrow chip above the hero title gets a wedding tint */
[data-theme="wedding"] [style*="background: rgb(232, 243, 242)"],
[data-theme="wedding"] [style*="background:#E8F3F2"] {
  background: linear-gradient(135deg, rgba(247, 237, 219, 0.95) 0%, rgba(244, 226, 216, 0.85) 100%) !important;
  border: 1px solid rgba(201, 165, 106, 0.25);
}

/* ---------- 15. Reveal-on-scroll: smoother, slower ------------------------- */
[data-theme="wedding"] .fc-reveal {
  transition: opacity .9s cubic-bezier(.2,.7,.3,1),
              transform .9s cubic-bezier(.2,.7,.3,1);
  transform: translateY(20px);
}

/* ---------- 16. Mobile responsive ------------------------------------------ */
@media (max-width: 720px) {
  [data-theme="wedding"] body::before,
  [data-theme="wedding"] body::after {
    width: 240px;
    height: 240px;
    filter: blur(50px);
    opacity: 0.45;
  }
  [data-theme="wedding"] [style*="border-radius: 32px"][style*="padding: 80px 60px"] {
    border-radius: 24px !important;
  }
}

/* ---------- 17. Preferences toggle — theme row styling -------------------- */
/* In the prefs panel the theme row gets a small label dot matching the
   wedding mode swatch. The toggle itself is already styled by app.js. */
.fc-prefs-themehint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(42, 37, 32, 0.55);
}
[data-theme="wedding"] .fc-prefs-themehint {
  color: var(--w-champagne-deep);
}

/* ============================================================================
   End of Wedding Edition theme.
   ============================================================================ */