/* =========================================================
   OrderPage — 銷售頁 / 下單行程
   Light editorial palette (white + cream + gold + sun-yellow),
   deep-navy reserve band. Reuses the frosted-glass / bubble /
   scroll-reveal vocabulary established in styles.css, plus a
   depth-reveal treatment for background photography.
   ========================================================= */
:root{
  --op-ink:        #14202B;
  --op-black:      #0B0B0C;
  --op-cream:      #F8F6F3;
  --op-white:      #FFFFFF;
  --op-yellow:     #FBE715;
  --op-yellow-deep:#E2CE00;
  --op-gold:       #DDA928;
  --op-navy:       #0B2A45;
  --op-navy-deep:  #012A4A;
  --op-navy-abyss: #01121D;

  --op-glass-bg:      rgba(255, 255, 255, 0.60);
  --op-glass-bg-strong: rgba(255, 255, 255, 0.92);
  --op-glass-border:  rgba(11, 42, 69, 0.12);
  --op-glass-shadow:  0 24px 50px -24px rgba(11, 42, 69, 0.28);

  --op-glass-dark-bg:     rgba(1, 18, 29, 0.42);
  --op-glass-dark-border: rgba(248, 246, 243, 0.28);

  --op-serif:  "Playfair Display", "Noto Serif TC", "Microsoft JhengHei", serif;
  --op-sans-en:"Oswald", "Microsoft JhengHei", sans-serif;
  --op-font:   "Microsoft JhengHei", "微軟正黑體", "PMingLiU", "Noto Sans TC", "Segoe UI", sans-serif;

  --op-container: 1220px;
  --op-radius: 18px;

  --page-depth: 0; /* 0 = surface .. 1 = deepest, driven by js/order-page.js */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.op-body{
  margin:0;
  font-family:var(--op-font);
  background:var(--op-cream);
  color:var(--op-ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.op-body img{ max-width:100%; display:block; }
.op-body a{ color:inherit; text-decoration:none; }
.op-container{ max-width:var(--op-container); margin:0 auto; padding:0 32px; }
:focus-visible{ outline:2px solid var(--op-gold); outline-offset:3px; border-radius:4px; }

/* =========================================================
   Ambient depth backdrop — fixed, sits behind every section.
   Colour + blur shift with --page-depth (0..1) as the whole
   page is scrolled, so the "water" reads brighter near the
   top and darker/deeper toward the reserve band at the foot.
   ========================================================= */
.op-depth-backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg,
      rgba(246,251,255,0.0) 0%,
      rgba(198,231,247, calc(0.10 + var(--page-depth) * 0.10)) 40%,
      rgba(9,64,97,   calc(0.10 + var(--page-depth) * 0.30)) 72%,
      rgba(1,18,29,   calc(0.15 + var(--page-depth) * 0.55)) 100%);
  transition:background .25s linear;
}

/* rising bubbles */
.op-bubble-field{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.op-bubble{
  position:absolute; bottom:-40px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(196,228,248,0.5) 55%, rgba(196,228,248,0.14) 80%);
  box-shadow:0 0 0 1px rgba(120,175,215,0.35) inset, 0 2px 6px rgba(11,42,69,0.10);
  opacity:0; animation-name:op-bubble-rise; animation-timing-function:ease-in; animation-fill-mode:forwards;
}
@keyframes op-bubble-rise{
  0%{ transform:translate(0,0) scale(0.6); opacity:0; }
  8%{ opacity:.8; }
  92%{ opacity:.55; }
  100%{ transform:translate(var(--drift,18px), -108vh) scale(1); opacity:0; }
}

/* =========================================================
   Foreground reveal (frosted cards) — translucent -> clear
   ========================================================= */
.op-reveal{
  opacity:.16; transform:translateY(28px); filter:blur(3px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1), filter .75s ease;
}
.op-reveal.is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }

/* background photography: blurred/dim -> sharp as it enters view */
.op-depth-reveal{
  filter:blur(9px) saturate(0.85) brightness(0.92);
  opacity:.55; transform:scale(1.04);
  transition:filter 1s ease, opacity 1s ease, transform 1.1s ease;
}
.op-depth-reveal.is-visible{ filter:blur(0) saturate(1) brightness(1); opacity:1; transform:scale(1); }

@media (prefers-reduced-motion:reduce){
  .op-reveal, .op-depth-reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

.op-glass{
  background:var(--op-glass-bg);
  border:1px solid var(--op-glass-border);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--op-glass-shadow);
  border-radius:var(--op-radius);
}

/* =========================================================
   Header
   ========================================================= */
.op-header{
  position:relative; z-index:5;
  padding:20px 0 0;
}
.op-header__inner{
  max-width:var(--op-container); margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.op-brand__logo{ height:87px; width:auto; }
.op-header__actions{ display:flex; align-items:center; gap:18px; }
.op-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-family:var(--op-sans-en);
  font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s;
}
.op-btn:hover{ transform:translateY(-2px); }
.op-btn--sun{ background:var(--op-yellow); color:#241D00; box-shadow:0 14px 28px -14px rgba(251,231,21,0.7); }
.op-btn--sun:hover{ background:var(--op-yellow-deep); }

/* =========================================================
   Hero — split white / photo stage with layered parallax
   ========================================================= */
.op-hero{
  position:relative; overflow:hidden;
  background:var(--op-white);
  min-height:680px;
}
.op-hero__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.op-hero__bg-layer{
  position:absolute; left:0; top:-8%; width:100%; height:116%;
  background-image:url(../images/order-hero/photo-divers-duo.png);
  background-size:cover; background-position:62% 38%;
  will-change:transform;
}
.op-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.86) 26%,
    rgba(255,255,255,0.35) 42%,
    rgba(255,255,255,0) 56%);
}
.op-hero__grid{
  position:relative; z-index:2;
  max-width:var(--op-container); margin:0 auto; padding:56px 32px 74px;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:24px;
  min-height:560px;
}
.op-hero__captions{
  justify-self:end; align-self:center; text-align:right;
  color:var(--op-white); text-shadow:0 2px 16px rgba(0,20,35,0.4);
}
.op-hero__script{
  font-family:var(--op-serif); font-style:italic; font-weight:500;
  font-size:1.7rem; line-height:1.25; margin:0 0 18px;
}
.op-hero__stack{
  font-family:var(--op-sans-en); font-size:.78rem; font-weight:600; letter-spacing:.14em;
  line-height:1.9; margin:0; opacity:.95;
}
.op-hero__content{ max-width:460px; will-change:transform; }
.op-hero__caption{
  font-family:var(--op-sans-en); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--op-ink); opacity:.55; margin:0 0 22px;
}
.op-hero__title{
  font-family:var(--op-serif); font-weight:900; font-style:normal;
  font-size:clamp(2.6rem, 4.6vw, 3.6rem); line-height:1.04; letter-spacing:-.01em;
  color:var(--op-black); margin:0 0 18px;
}
.op-hero__subtitle{
  font-family:var(--op-serif); font-weight:500; font-style:italic;
  font-size:1.1rem; color:var(--op-ink); margin:0 0 22px;
}
.op-hero__body{
  font-size:.92rem; line-height:1.9; color:var(--op-ink); opacity:.82;
  margin:0 0 30px; max-width:38ch;
}
.op-hero__cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 26px; border-radius:999px; background:var(--op-yellow);
  color:#241D00; font-weight:700; font-size:.95rem;
  box-shadow:0 16px 32px -16px rgba(251,231,21,0.75);
  transition:transform .2s, background .2s;
}
.op-hero__cta:hover{ transform:translateY(-2px); background:var(--op-yellow-deep); }
.op-hero__cta svg{ transition:transform .2s; }
.op-hero__cta:hover svg{ transform:translateX(3px); }

.op-hero__footnote{
  position:relative; z-index:2;
  max-width:var(--op-container); margin:0 auto; padding:0 32px 42px;
  font-family:var(--op-sans-en); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.8; color:var(--op-ink); opacity:.5;
}

@media (max-width:860px){
  .op-hero{ min-height:0; }
  .op-hero__grid{ grid-template-columns:1fr; min-height:auto; padding-top:24px; gap:36px; }
  .op-hero__scrim{
    background:linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.9) 34%, rgba(255,255,255,0.25) 52%, rgba(255,255,255,0) 64%);
  }
  .op-hero__content{ max-width:none; }
  .op-hero__captions{ justify-self:start; text-align:left; }
  .op-header__inner{ padding:0 18px; gap:10px; flex-wrap:nowrap; }
  .op-brand__logo{ height:54px; }
}

/* =========================================================
   Marine treasures filmstrip
   ========================================================= */
.op-marine{ position:relative; z-index:2; padding:56px 0 40px; background:var(--op-cream); }
.op-marine__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; }
.op-marine__heading{ max-width:210px; }
.op-marine__heading h2{
  font-family:var(--op-serif); font-weight:900; font-size:1.32rem; line-height:1.24;
  margin:0 0 14px; color:var(--op-black); letter-spacing:-.01em; white-space:nowrap;
}
.op-marine__heading p{ font-size:.86rem; line-height:1.8; opacity:.72; margin:0; }
.op-marine__strip{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.op-marine__frame{
  margin:0; aspect-ratio:3/2; border-radius:10px; overflow:hidden; position:relative;
}
.op-marine__frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.op-marine__frame:hover img{ transform:scale(1.07); }
.op-marine__caption{
  max-width:96px; text-align:left;
  font-family:var(--op-sans-en); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.9; opacity:.6;
}
.op-marine__caption .op-rule{ width:26px; height:2px; background:var(--op-gold); margin-top:8px; }

@media (max-width:900px){
  .op-marine__row{ grid-template-columns:1fr; text-align:left; }
  .op-marine__strip{ grid-template-columns:repeat(2, 1fr); }
  .op-marine__caption{ display:none; }
}

/* =========================================================
   精選行程 — trips
   ========================================================= */
.op-trips{ position:relative; z-index:2; padding:48px 0 108px; background:var(--op-cream); }
.op-trips__head{ text-align:center; margin:0 0 52px; }
.op-trips__eyebrow{
  font-family:var(--op-sans-en); font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--op-gold); margin:0 0 14px;
}
.op-trips__title-row{ display:flex; align-items:center; justify-content:center; gap:26px; }
.op-trips__title-row .op-rule{ flex:1; max-width:180px; height:1px; background:linear-gradient(90deg, transparent, var(--op-gold)); }
.op-trips__title-row .op-rule.op-rule--r{ background:linear-gradient(90deg, var(--op-gold), transparent); }
.op-trips__title{ font-size:1.9rem; font-weight:700; margin:0; letter-spacing:.04em; }
.op-trips__sub{
  font-family:var(--op-sans-en); font-size:.7rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; opacity:.5; margin:12px 0 0;
}
.op-trips__notice{
  display:inline-flex; align-items:center; gap:8px;
  margin:20px auto 0; padding:10px 20px; border-radius:999px;
  background:rgba(224,64,64,0.1); border:1px solid rgba(224,64,64,0.35);
  color:#B23A3A; font-size:.85rem; font-weight:700;
  animation:op-notice-pop .35s ease;
}
.op-trips__notice[hidden]{ display:none; }
@keyframes op-notice-pop{
  0%{ opacity:0; transform:translateY(-6px); }
  100%{ opacity:1; transform:translateY(0); }
}
@keyframes op-trip-grid-flash{
  0%, 100%{ box-shadow:0 0 0 0 rgba(251,231,21,0); }
  30%{ box-shadow:0 0 0 8px rgba(251,231,21,0.55); }
}
.op-trip-grid.is-flagged, .op-trip-grid--row2.is-flagged{
  animation:op-trip-grid-flash 1.1s ease;
  border-radius:var(--op-radius);
}

.op-trips__body{ position:relative; }
.op-trips__caption{
  position:absolute; width:150px;
  font-family:var(--op-sans-en); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.9; opacity:.6;
}
.op-trips__caption .op-rule-v{ width:22px; height:2px; background:var(--op-gold); margin-bottom:10px; }
.op-trips__caption{ width:128px; }
.op-trips__caption--left{ left:-116px; top:410px; }
.op-trips__caption--right{ right:-116px; text-align:right; top:20px; }
.op-trips__caption--right .op-rule-v{ margin-left:auto; }
.op-trips__caption--right-zh{
  right:-126px; top:396px; text-align:right;
  font-family:var(--op-font); font-size:.86rem; font-weight:500; letter-spacing:.02em; line-height:1.6;
  opacity:.85; width:128px;
}
@media (max-width:1620px){ .op-trips__caption{ display:none; } }

.op-trip-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.op-trip-grid--row2{ grid-template-columns:repeat(2, 1fr); max-width:calc(66% + 22px); margin:22px auto 0; }

.op-trip-card{
  overflow:hidden; cursor:pointer; transition:transform .3s ease, box-shadow .3s ease;
  background:var(--op-glass-bg-strong);
  box-shadow:0 0 0 0 rgba(251,231,21,0), 0 0 0 0 rgba(11,42,69,0);
}
.op-trip-card:hover{ transform:translateY(-5px); box-shadow:0 0 0 0 rgba(251,231,21,0), 0 30px 54px -26px rgba(11,42,69,0.32); }
.op-trip-card.is-selected{
  box-shadow:0 0 0 10px var(--op-yellow), 0 30px 54px -26px rgba(11,42,69,0.4);
}
.op-trip-card__media{ position:relative; aspect-ratio:280/138; overflow:hidden; }
.op-trip-card__media img{ width:100%; height:100%; object-fit:cover; }
.op-trip-card__select-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  display:flex; align-items:center; gap:6px;
  background:var(--op-yellow); border-radius:8px; padding:6px 10px 6px 8px;
  cursor:pointer; box-shadow:0 6px 14px -6px rgba(0,0,0,0.45);
  transition:background .2s, transform .15s;
}
.op-trip-card__select-badge:hover{ background:var(--op-yellow-deep); }
.op-trip-card__select-badge span{
  font-family:var(--op-font); font-size:.72rem; font-weight:700; color:#241D00; white-space:nowrap;
}
.op-trip-card__select{
  width:16px; height:16px; border-radius:50%; flex:none;
  background:#fff; border:1.5px solid rgba(36,29,0,0.5);
  appearance:none; -webkit-appearance:none; cursor:pointer; margin:0;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.op-trip-card__select:checked{
  border-color:#241D00; background:#241D00;
  box-shadow:inset 0 0 0 3px #fff;
}
.op-trip-card__body{ padding:16px 20px 22px; }
.op-trip-card__body h3{ margin:0 0 10px; font-size:.92rem; font-weight:700; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-trip-card__meta{ font-size:.72rem; opacity:.68; margin:0 0 4px; white-space:nowrap; }
.op-trip-card__nights{ font-size:.72rem; opacity:.68; margin:0 0 14px; }
.op-trip-card__original{ font-size:.78rem; opacity:.5; text-decoration:line-through; margin:0 0 2px; }
.op-trip-card__price{ font-size:.95rem; font-weight:700; color:var(--op-navy); margin:0; }
.op-trip-card__price strong{ font-size:1.12rem; }

@media (max-width:1080px){
  .op-trip-grid{ grid-template-columns:repeat(2, 1fr); }
  .op-trip-grid--row2{ max-width:none; }
}
@media (max-width:640px){
  .op-trip-grid, .op-trip-grid--row2{ grid-template-columns:1fr; max-width:none; }
}

/* =========================================================
   Reserve — dark full-bleed band with functional form
   ========================================================= */
.op-reserve{
  position:relative; z-index:2; overflow:hidden;
  background:var(--op-navy-deep);
  padding:0;
}
.op-reserve__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.op-reserve__bg-layer{
  position:absolute; left:0; top:-8%; width:100%; height:116%;
  background-image:url(../images/reserve/photo-whaleshark-reef.png);
  background-size:cover; background-position:center 42%;
  will-change:transform;
}
.op-reserve__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(1,14,23,0.62) 0%, rgba(1,14,23,0.5) 32%, rgba(1,14,23,0.12) 56%, rgba(1,14,23,0) 72%),
    linear-gradient(180deg, rgba(1,18,29,0.08) 0%, rgba(1,18,29,0.02) 40%, rgba(1,18,29,0.42) 100%);
}
.op-reserve__grid{
  position:relative; z-index:2; max-width:var(--op-container); margin:0 auto; padding:88px 32px 96px;
  display:grid; grid-template-columns:1.05fr 1fr auto; gap:36px; align-items:start;
}
.op-reserve__intro{ padding-top:26px; color:var(--op-white); text-shadow:0 2px 18px rgba(0,0,0,0.45); }
.op-reserve__eyebrow{
  font-family:var(--op-sans-en); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; opacity:.9; margin:0 0 14px;
}
.op-reserve__title{
  font-family:var(--op-sans-en); font-weight:700; font-size:clamp(2.4rem, 4vw, 3.1rem);
  letter-spacing:.02em; color:var(--op-yellow); margin:0 0 8px; line-height:1;
}
.op-reserve__subtitle{
  font-family:var(--op-sans-en); font-weight:500; font-size:1rem; letter-spacing:.1em;
  line-height:1.6; margin:0 0 26px;
}
.op-reserve__rule{ width:34px; height:2px; background:var(--op-gold); margin-bottom:16px; }
.op-reserve__tagline{
  font-size:1.05rem; font-weight:700; line-height:1.6; margin:0 0 190px;
}
.op-reserve__footnote{
  font-family:var(--op-sans-en); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.8; opacity:.95;
}

.op-reserve__side{
  align-self:stretch; padding-top:26px;
  font-family:var(--op-sans-en); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.9; color:var(--op-white); opacity:.85;
  display:flex; flex-direction:column; justify-content:space-between; min-height:360px;
}
.op-reserve__side .op-rule-v{ width:22px; height:2px; background:var(--op-gold); margin-bottom:10px; }

.op-form{
  padding:30px 32px 32px; border-top:3px solid var(--op-gold);
  background:var(--op-glass-bg-strong);
}
.op-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-bottom:16px; }
.op-form__field{ display:flex; flex-direction:column; gap:8px; }
.op-form__field--full{ grid-column:1 / -1; }
.op-form__field label{ font-size:.8rem; font-weight:700; color:var(--op-ink); }
.op-form__field input{
  padding:11px 14px; border-radius:8px; border:1px solid var(--op-glass-border);
  background:#fff; color:var(--op-ink); font-family:var(--op-font); font-size:.86rem;
}
.op-form__field input::placeholder{ color:rgba(20,32,43,0.4); }
.op-form__field input:focus{ outline:2px solid var(--op-gold); outline-offset:1px; }
.op-form__dob{ display:flex; align-items:center; gap:8px; }
.op-form__dob input{ flex:1; min-width:0; }
.op-form__dob svg{ flex:none; opacity:.55; }
.op-form__note{ font-size:.76rem; opacity:.65; line-height:1.7; margin:2px 0 18px; }
.op-form__submit{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px; border:0; border-radius:8px; background:var(--op-yellow);
  color:#241D00; font-family:var(--op-font); font-weight:700; font-size:.98rem;
  cursor:pointer; transition:transform .2s, background .2s;
}
.op-form__submit:hover{ transform:translateY(-2px); background:var(--op-yellow-deep); }
.op-form__submit svg{ transition:transform .2s; }
.op-form__submit:hover svg{ transform:translateX(3px); }

@media (max-width:980px){
  .op-reserve__grid{ grid-template-columns:1fr; }
  .op-reserve__side{ flex-direction:row; justify-content:space-between; min-height:auto; }
  .op-reserve__tagline{ margin-bottom:26px; }
}
@media (max-width:560px){
  .op-form__grid{ grid-template-columns:1fr; }
  .op-reserve__side{ display:none; }
}