/* ============================================================
   CINEMATIC HEADER — transparent by default, liquid glass on scroll.
   The hero film reaches the top edge of the viewport; navigation
   should feel almost invisible until it earns presence. Centred
   logo, balanced nav on either side, glass CTA + login on the right.
   ============================================================ */

.cine-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* minmax(0,1fr) keeps both sides exactly equal, so the logo is truly centred */
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:32px;
  padding:22px 44px;
  /* Glass background is always on so the nav text is legible over any
     backdrop (light imagery, cream sections). Scroll only tightens it. */
  background:linear-gradient(180deg,rgba(18,26,22,.42),rgba(14,20,17,.34));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,250,241,.07);
  transition:
    background .45s cubic-bezier(.22,1,.36,1),
    backdrop-filter .45s cubic-bezier(.22,1,.36,1),
    border-color .45s ease,
    padding .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease;
  will-change:background,backdrop-filter,padding;
}
.cine-header > .cine-nav-left{justify-self:end}
.cine-header > .cine-logo{justify-self:center}
.cine-header > .cine-right-cluster{
  justify-self:start;display:flex;align-items:center;gap:32px;
}


/* Liquid-glass state — Apple-style: subtle blur, thin highlight, very soft shadow. */
.cine-header.is-glass{
  padding:14px 44px;
  background:linear-gradient(180deg,rgba(18,26,22,.42),rgba(14,20,17,.34));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,250,241,.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 20px 40px -28px rgba(0,0,0,.5);
}

/* Nav ---------------------------------------------------------------- */
.cine-nav ul{
  display:flex;list-style:none;margin:0;padding:0;align-items:center;
  gap:32px;
}
.cine-nav-left ul{justify-content:flex-end}
.cine-nav-right ul{justify-content:flex-start}

.cine-nav a{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-meta);letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:rgba(255,250,241,.82);
  text-decoration:none;position:relative;padding:8px 2px;white-space:nowrap;
  transition:color .3s ease;
}
.cine-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:rgba(212,175,55,.9);transition:right .35s cubic-bezier(.22,1,.36,1);
}
.cine-nav a:hover,
.cine-nav a.active{color:#F0D9A0}
.cine-nav a:hover::after,
.cine-nav a.active::after{right:0}

/* Centred logo ------------------------------------------------------- */
.cine-logo{display:inline-flex;align-items:center;justify-self:center}
.cine-logo img{
  height:62px;width:auto;
  flex-shrink:0;-o-object-fit:contain;object-fit:contain;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.45));
  transition:height .45s cubic-bezier(.22,1,.36,1);
}
.cine-header.is-glass .cine-logo img{height:48px}

/* Right cluster ------------------------------------------------------ */
.cine-right{
  display:flex;align-items:center;gap:24px;justify-self:end;
}
.cine-actions{display:flex;align-items:center;gap:10px}

/* Glass buttons — no solid gold. Subtle, luminous, restrained. */
.cine-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;border-radius:100px;
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  background:rgba(255,250,241,.08);
  border:1px solid rgba(255,250,241,.22);
  color:#FFFAF1;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 10px 24px -14px rgba(0,0,0,.55);
  transition:background .35s ease,border-color .35s ease,color .35s ease,transform .35s ease;
}
.cine-btn:hover{
  background:rgba(255,250,241,.14);
  border-color:rgba(212,175,55,.55);
  color:#F0D9A0;
  transform:translateY(-1px);
}
.cine-btn-primary{
  background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.14));
  border-color:rgba(233,200,126,.5);
  color:#FBE9BE;
}
.cine-btn-primary:hover{
  background:linear-gradient(180deg,rgba(233,200,126,.32),rgba(208,165,74,.22));
  border-color:rgba(233,200,126,.75);
  color:#FFF5D6;
}
.cine-btn-secondary{
  background:rgba(255,250,241,.05);
  color:rgba(255,250,241,.8);
}

/* Burger ------------------------------------------------------------- */
.cine-burger{
  display:none;background:none;border:0;padding:6px;cursor:pointer;color:#FFFAF1;
}
.cine-burger svg{width:26px;height:26px}

/* Mobile drawer ------------------------------------------------------ */
.cine-mobile{
  position:fixed;inset:0;z-index:99;
  background:linear-gradient(180deg,rgba(12,18,15,.94),rgba(8,12,10,.98));
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:100px 24px 40px;
  animation:cineFade .35s ease both;
}
.cine-mobile a{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-body);letter-spacing:.18em;text-transform:uppercase;
  color:#FFFAF1;text-decoration:none;
}
.cine-mobile .cine-btn{margin-top:10px}

@keyframes cineFade{from{opacity:0}to{opacity:1}}

/* Responsive --------------------------------------------------------- */
/* Five links on the left: a touch less air so they stay inside the edge padding. */
@media(max-width:1520px){
  .cine-nav ul{gap:26px}
}
@media(max-width:1400px){
  .cine-header{gap:20px;padding:20px 28px}
  .cine-nav ul{gap:22px}
  .cine-nav a{font-size:var(--fs-label);letter-spacing:.18em}
  .cine-btn{padding:9px 16px;font-size:var(--fs-label);letter-spacing:.16em}
}
/* with seven links the row needs a little less air on smaller laptops */
@media(max-width:1280px){
  .cine-header{gap:14px;padding:18px 20px}
  .cine-nav ul{gap:16px}
  .cine-nav a{letter-spacing:.12em}
  .cine-btn{padding:9px 13px;letter-spacing:.12em}
}
@media(max-width:1120px){
  .cine-header,
  .cine-header.is-glass{
    grid-template-columns:1fr auto 1fr;padding:14px 20px;
  }
  .cine-nav-left,
  .cine-nav-right,
  .cine-actions{display:none}
  .cine-header > .cine-right-cluster{justify-self:end;gap:0}
  .cine-logo{grid-column:2;justify-self:center}
  .cine-right{gap:0}
  .cine-burger{display:inline-flex}
  .cine-logo img,
  .cine-header.is-glass .cine-logo img{height:42px}
  /* 44px tap targets on phones (logo link and menu button) */
  .cine-logo{min-height:44px;min-width:44px;justify-content:center}
  .cine-burger{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:9px}
}


/* ============================================================
   "Your Wedding" dropdown — outlined → liquid glass on hover,
   Apple-inspired floating panel with layered highlights.
   ============================================================ */
.cine-wedding{position:relative;display:inline-block}

.cine-btn-wedding{
  gap:8px;
  background:transparent;
  border:1px solid rgba(255,250,241,.32);
  color:rgba(255,250,241,.9);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.cine-btn-wedding .cine-btn-chev{
  width:14px;height:14px;opacity:.75;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.cine-btn-wedding:hover,
.cine-wedding.is-open .cine-btn-wedding{
  background:rgba(255,250,241,.12);
  border-color:rgba(233,200,126,.55);
  color:#F0D9A0;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 10px 28px -14px rgba(0,0,0,.6);
  transform:translateY(-1px);
}
.cine-wedding.is-open .cine-btn-wedding .cine-btn-chev{transform:rotate(180deg)}

.cine-wedding-panel{
  position:fixed;inset:0;z-index:120;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 24px 80px;
  background:linear-gradient(180deg,rgba(14,22,18,.86),rgba(8,14,11,.9));
  border:0;
  border-radius:0;
  backdrop-filter:blur(34px) saturate(170%);
  -webkit-backdrop-filter:blur(34px) saturate(170%);
  box-shadow:none;
  overflow:auto;
  transform-origin:center center;
  animation:cineWeddingIn .42s cubic-bezier(.22,1,.36,1) both;
}
.cine-wedding-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.1), transparent 60%),
    radial-gradient(80% 50% at 100% 0%, rgba(233,200,126,.1), transparent 55%);
  mix-blend-mode:screen;
}
.cine-wedding-shine{display:none}
.cine-wedding-inner{
  position:relative;z-index:2;
  width:min(720px,100%);
  text-align:center;
}
.cine-wedding-eyebrow{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(233,200,126,.9);margin-bottom:14px;
}
.cine-wedding-lede{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.5;font-style:italic;
  color:rgba(255,250,241,.85);
  margin:0 auto 46px;max-width:48ch;
}
.cine-wedding-options{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  width:100%;
}
.cine-wedding-option{
  display:flex;align-items:flex-start;text-align:left;
  padding:28px 30px;border-radius:18px;
  text-decoration:none;color:#FFFAF1;
  background:rgba(255,250,241,.06);
  border:1px solid rgba(255,250,241,.12);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.cine-wedding-option:hover{
  background:rgba(255,250,241,.12);
  border-color:rgba(233,200,126,.45);
  transform:translateY(-2px);
}
.cine-wedding-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.cine-wedding-title{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-meta);letter-spacing:.18em;text-transform:uppercase;
  color:#FFFAF1;
}
.cine-wedding-desc{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:var(--fs-body);line-height:1.45;color:rgba(255,250,241,.72);
}

@keyframes cineWeddingIn{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:scale(1)}
}

@media(max-width:680px){
  .cine-wedding-panel{padding:110px 22px 60px}
  .cine-wedding-options{grid-template-columns:1fr}
  .cine-wedding-option{padding:24px 22px}
}

@media(max-width:1120px){
  .cine-wedding{display:none}
}

/* Close (X) for the full-screen Your Wedding panel */
.cine-wedding-close{
  position:absolute;top:clamp(20px,4vh,40px);right:clamp(20px,4vw,44px);
  z-index:4;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,250,241,.82);
  background:rgba(255,250,241,.06);
  border:1px solid rgba(255,250,241,.22);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.cine-wedding-close:hover{
  background:rgba(255,250,241,.14);
  border-color:rgba(233,200,126,.6);
  color:#F0D9A0;
  transform:rotate(90deg);
}
/* ============================================================
   COOKIE BANNER. A small dark-green glass card in the site's own
   type (ZCOOL XiaoWei + Lato) and gold, bottom left on desktop so it
   never covers the chat button, full width above it on phones.
   ============================================================ */
.rmg-cookie{
  position:fixed;z-index:60;left:24px;bottom:24px;width:min(420px,calc(100vw - 48px));
  padding:22px 22px 20px;border-radius:18px;
  background:linear-gradient(160deg,rgba(14,35,26,.94),rgba(11,15,12,.96));
  border:1px solid rgba(208,165,74,.32);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(246,241,230,.06);backdrop-filter:blur(14px) saturate(1.1);
  color:#F6F1E6;font-family:'Lato',-apple-system,system-ui,sans-serif;
  animation:rmg-cookie-in .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rmg-cookie-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rmg-cookie{animation:none}}
.rmg-cookie-eyebrow{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#E9C87E}
.rmg-cookie-title{margin:0 0 8px;font-family:'ZCOOL XiaoWei',Georgia,serif;font-weight:400;font-size:24px;line-height:1.15;color:#F6F1E6}
.rmg-cookie-text{margin:0 0 16px;font-size:14px;font-weight:300;line-height:1.6;color:rgba(246,241,230,.8)}
.rmg-cookie-text a{color:#E9C87E;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* 44px tap area on the policy link, text position unchanged */
.rmg-cookie-text a{display:inline-block;padding:12px 2px;margin:-12px -2px}
.rmg-cookie-text a:hover{color:#F6F1E6}
.rmg-cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rmg-cookie-btn{
  min-height:46px;padding:0 14px;border-radius:999px;cursor:pointer;
  font-family:'Lato',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#F6F1E6;background:rgba(246,241,230,.06);border:1px solid rgba(246,241,230,.22);
  transition:background .2s ease,border-color .2s ease,transform .12s ease;
}
.rmg-cookie-btn:hover{background:rgba(246,241,230,.12);border-color:rgba(246,241,230,.4)}
.rmg-cookie-btn:active{transform:scale(.97)}
.rmg-cookie-btn:focus-visible{outline:2px solid #E9C87E;outline-offset:2px}
.rmg-cookie-btn.is-accept{color:#F6F1E6;background:rgba(208,165,74,.22);border-color:rgba(208,165,74,.6)}
.rmg-cookie-btn.is-accept:hover{background:rgba(208,165,74,.34);border-color:#D0A54A}
@media (max-width:640px){
  .rmg-cookie{left:12px;right:12px;bottom:12px;width:auto;padding:18px 16px 16px;border-radius:16px}
  .rmg-cookie-title{font-size:21px}
  .rmg-cookie-text{font-size:13.5px}
  .rmg-cookie-btn{font-size:11px;letter-spacing:.1em;padding:0 10px;white-space:nowrap}
  /* the chat button waits above the banner until a choice is made */
  body.cookie-open .fixed.bottom-6.right-6{bottom:calc(var(--rmg-cookie-h,260px) + 24px)}
}