/* See You in Maldives – public site styles. Brand palette (official). */
:root{
  --navy:#063B4C;        /* Deep Ocean Navy – main brand: headings, header/footer, dark sections */
  --teal:#00A9A5;        /* Maldives Teal – secondary, decorative, large text */
  --teal-ink:#007F7C;    /* darker teal for text/buttons with white text (WCAG AA 4.85:1 on white) */
  --aqua:#63D8D2;        /* Lagoon Aqua – highlights, hover, accents (on navy 7.07:1) */
  --sand:#F4E6C8;        /* Warm Sand – section backgrounds */
  --pearl:#FAFAF7;       /* Pearl White – page background */
  --coral:#FF7562;       /* Sunset Coral – running-total badge only (v2); navy text on coral 4.59:1 */
  --ink:#1D3640; --muted:#4F6670; --line:#E2DDD2; --white:#fff;
  --serif:"Cormorant Garamond","Noto Serif Thai",Georgia,serif;
  --sans:"Manrope","Noto Sans Thai",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --radius:18px; --shadow:0 18px 50px -24px rgba(6,59,76,.35);
  --ease:cubic-bezier(.22,.8,.2,1);
  --header-h:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pearl);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal-ink)}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)} h2{font-size:clamp(1.9rem,4vw,3rem)} h3{font-size:1.5rem}
p{margin:0 0 1em}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.eyebrow{font:600 .75rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:14px}
.lead{font-size:1.15rem;color:var(--muted);max-width:640px}
.section{padding:clamp(64px,10vw,120px) 0}
.section.sand{background:var(--sand)}
.section.dark{background:var(--navy);color:#E6F2F2}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark .eyebrow{color:var(--aqua)}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 14px;z-index:999}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:6px}

/* i18n: content blocks per language; only the active language is visible */
[data-l]{display:none}
html[data-lang="en"] [data-l="en"],html[data-lang="th"] [data-l="th"],html[data-lang="ru"] [data-l="ru"]{display:revert}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;border:0;
  font:700 .95rem/1 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),background .3s,box-shadow .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn-cta{background:var(--navy);color:var(--pearl,#FAFAF7);box-shadow:none}   /* v2: same calm CTA as the rest of the site */
.btn-cta:hover{background:#006B68;color:var(--pearl,#FAFAF7)}
.btn-teal{background:var(--teal-ink);color:#fff}
.btn-teal:hover{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-ghost.light{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.btn-ghost.light:hover{background:#fff;color:var(--navy)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link-line{color:inherit;font-weight:600;text-underline-offset:4px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,250,247,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:18px;height:var(--header-h)}
.logo img{height:40px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{color:var(--navy);text-decoration:none;font-weight:600;font-size:.9rem;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);transform:scaleX(0);transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a.btn-cta,.nav a.btn-cta:hover{color:var(--pearl)}   /* v2: header CTA text on navy */
.nav .btn{min-height:40px;padding:0 18px}
.lang{display:flex;border:1.5px solid var(--navy);border-radius:999px;overflow:hidden}
.lang[hidden]{display:none}
.lang button{background:none;border:0;padding:6px 10px;font:700 .75rem var(--sans);color:var(--navy);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff}
.menu-btn{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;background:var(--navy);margin:5px auto;transition:.3s}
@media (max-width:1020px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 24px 28px;background:var(--pearl);
    border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .45s var(--ease);margin:0;visibility:hidden}
  .nav.open{transform:none;visibility:visible}
  .nav a{padding:10px 0;font-size:1.05rem}
  .nav .btn{margin-top:10px}
}

/* hero */
.hero{position:relative;min-height:min(92vh,860px);display:grid;align-items:end;color:#fff;overflow:hidden;background:var(--navy)}
.hero-media{position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 80% 10%,rgba(99,216,210,.55),transparent 60%),
  radial-gradient(900px 500px at 10% 90%,rgba(244,230,200,.35),transparent 60%),
  linear-gradient(160deg,#0a5468 0%,#063B4C 55%,#042a37 100%);background-size:cover;background-position:center;transform-origin:center}
.hero-media.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,59,76,.15),rgba(6,59,76,.75))}
.hero-waves{position:absolute;inset:auto 0 0 0;height:38%;opacity:.35}
.hero .wrap{position:relative;padding:140px 0 clamp(60px,10vw,110px)}
.hero h1{color:#fff;max-width:820px}
.hero p{font-size:clamp(1.05rem,2vw,1.3rem);max-width:640px;color:#E8F4F3}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}
.hero-actions .link-line{color:#fff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:-50px;position:relative;z-index:2}
.step{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.step b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sand);color:var(--navy);font-family:var(--serif);font-size:1.1rem;margin-bottom:12px}
.step h3{font-size:1.3rem;margin:0 0 4px}
.step p{margin:0;color:var(--muted);font-size:.95rem}
@media (max-width:720px){.steps{grid-template-columns:1fr;margin-top:-30px}}

/* resort slider */
.resorts-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
.slider-ctrls{display:flex;gap:10px}
.slider-ctrls button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;font-size:1.2rem;transition:.3s}
.slider-ctrls button:hover{background:var(--navy);color:#fff}
.resort-swiper{overflow:hidden;border-radius:calc(var(--radius) + 6px)}
.rslide{position:relative;display:grid;grid-template-columns:1.25fr 1fr;min-height:620px;background:var(--navy);color:#fff;overflow:hidden;border-radius:calc(var(--radius) + 6px)}
.rslide-media{position:relative;overflow:hidden}
.rslide-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12);transition:transform 6s var(--ease)}
.swiper-slide-active .rslide-img{transform:scale(1)}
.rslide-media .ph-label{position:absolute;left:16px;bottom:14px;font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;background:rgba(6,59,76,.6);padding:6px 10px;border-radius:6px}
.rslide-body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.rslide-body .eyebrow{color:var(--aqua)}
.rslide-body h3{color:#fff;font-size:clamp(1.9rem,3.2vw,2.8rem);margin-bottom:6px}
.rslide-body .tagline{font-family:var(--serif);font-size:1.35rem;font-style:italic;color:var(--sand);margin-bottom:16px}
.rslide-body .meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.88rem;color:#CFE6E6;margin-bottom:16px}
.rslide-body .meta span::before{content:"◦ ";color:var(--aqua)}
.rslide-body p{color:#E6F2F2}
.why{list-style:none;padding:0;margin:4px 0 26px;display:grid;gap:10px}
.why li{position:relative;padding-left:26px;font-size:.95rem;color:#E6F2F2}
.why li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:2px;background:var(--coral)}
.rslide-actions{display:flex;gap:14px;flex-wrap:wrap}
.swiper-pagination.resort-dots{position:static;margin-top:22px;display:flex;justify-content:center;gap:4px}
.resort-dots .swiper-pagination-bullet{width:9px;height:9px;background:var(--navy);opacity:.25;transition:.35s var(--ease)}
.resort-dots .swiper-pagination-bullet-active{opacity:1;width:30px;border-radius:6px;background:var(--teal-ink)}
.rs-anim{opacity:0;transform:translateY(24px)}
.no-js .rs-anim,.reduce-motion .rs-anim{opacity:1;transform:none}
@media (max-width:900px){
  .rslide{grid-template-columns:1fr;min-height:0}
  .rslide-media{height:300px}
  .slider-ctrls{display:none}
}

/* placeholders for photos */
.ph{background:linear-gradient(135deg,#0E5B70,#63D8D2 70%,#F4E6C8);position:relative}
.ph::after{content:attr(data-ph);position:absolute;inset:auto auto 12px 12px;font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(6,59,76,.55);padding:5px 8px;border-radius:6px}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.contact-card{background:rgba(255,255,255,.06);border:1px solid rgba(99,216,210,.35);border-radius:var(--radius);padding:28px;transition:.35s var(--ease)}
.contact-card:hover{background:rgba(99,216,210,.12);transform:translateY(-4px)}
.contact-card h3{font-size:1.35rem;margin-bottom:6px}
.contact-card a{color:var(--aqua);font-weight:700;word-break:break-word}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr}}

/* footer */
.site-footer{background:#042E3C;color:#BFD9DA;padding:48px 0 30px;font-size:.9rem}
.site-footer .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.site-footer a{color:#E6F2F2;text-decoration:none}
.site-footer a:hover{color:var(--aqua)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-footer small{display:block;margin-top:26px;color:#8FB3B6}

/* inner pages */
.page-hero{background:var(--sand);padding:clamp(70px,10vw,120px) 0 clamp(40px,6vw,70px)}
.page-hero p{max-width:720px;color:var(--muted);font-size:1.12rem}
.prose{max-width:760px}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:1.6em}
.prose ul{padding-left:1.2em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.35s var(--ease)}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card h3{font-size:1.35rem}
.note{background:#fff;border-left:4px solid var(--teal);padding:16px 20px;border-radius:10px;color:var(--muted);font-size:.95rem}
.months{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.months th,.months td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:.95rem}
.months th{background:var(--navy);color:#fff;font-weight:600}
.months td:first-child{font-family:var(--serif);font-size:1.15rem;color:var(--navy);white-space:nowrap}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700}
.pill.dry{background:var(--sand);color:#6B4E1F}.pill.wet{background:#DDF4F3;color:#005F5C}.pill.mix{background:#EEF0F0;color:#3F555D}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:320px 1fr;margin-bottom:26px}
.post .ph{min-height:220px}
.post-body{padding:28px}
.post time{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink);font-weight:700}
@media (max-width:760px){.post{grid-template-columns:1fr}.months td,.months th{padding:10px}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- resort view (Explore) ---------- */
.fly-clone{position:fixed;z-index:200;background-size:cover;background-position:center;border-radius:24px;pointer-events:none;will-change:transform,left,top,width,height}
.resort-view{position:fixed;inset:0;z-index:150;background:var(--pearl);overflow-y:auto;visibility:hidden}
.resort-view.open{visibility:visible}
.rv-hero{position:relative;height:min(78vh,720px);background-size:cover;background-position:center;display:flex;align-items:flex-end;color:#fff}
.rv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,59,76,.15) 30%,rgba(6,59,76,.85))}
.rv-hero .wrap{position:relative;z-index:1;padding-bottom:48px}
.rv-hero h1{color:#fff;font-size:clamp(2.2rem,5.5vw,4.2rem);margin-bottom:6px}
.rv-hero .tagline{font-family:var(--serif);font-size:1.5rem;font-style:italic;color:var(--sand)}
.rv-top{position:fixed;top:16px;left:16px;right:16px;z-index:5;display:flex;justify-content:space-between;pointer-events:none}
.rv-top .btn{pointer-events:auto;backdrop-filter:blur(8px)}
.rv-back{background:rgba(250,250,247,.92);color:var(--navy)}
.rv-back:hover{background:#fff;color:var(--navy)}
.rv-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding:56px 0}
.rv-facts{background:var(--sand);border-radius:var(--radius);padding:26px}
.rv-facts dt{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:#6B5A3A;font-weight:700}
.rv-facts dd{margin:2px 0 16px;color:var(--navy);font-weight:600}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-bottom:30px}
.cat-tile{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--navy);text-align:left}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cat-tile:hover img,.cat-tile:focus-visible img{transform:scale(1.07)}
.cat-tile span{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;font:600 1.15rem var(--serif);background:linear-gradient(transparent,rgba(6,59,76,.85))}
.cat-tile small{display:block;font:500 .75rem var(--sans);letter-spacing:.08em;color:var(--sand)}
.rv-villas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:10px 0 40px}
.rv-villa{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.rv-villa h4{font-size:1.15rem;margin-bottom:4px}
.rv-villa p{margin:0;font-size:.9rem;color:var(--muted)}
.rv-cta{position:sticky;bottom:0;background:rgba(250,250,247,.95);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:14px 0;z-index:3}
.rv-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
@media (max-width:900px){.rv-intro{grid-template-columns:1fr;gap:24px}.cat-grid{grid-template-columns:repeat(2,1fr)}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(3,30,39,.96);display:none;flex-direction:column;color:#fff}
.lightbox.open{display:flex}
.lb-bar{display:flex;align-items:center;gap:12px;padding:14px 18px}
.lb-bar h3{color:#fff;margin:0;font-size:1.3rem;flex:1}
.lb-bar button{background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:999px;min-height:42px;padding:0 16px;font:600 .85rem var(--sans);cursor:pointer}
.lb-bar button:hover{background:rgba(99,216,210,.3)}
.lb-main{flex:1;min-height:0;position:relative}
.lb-swiper{height:100%}
.lb-swiper .swiper-slide{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 60px 10px}
.lb-swiper img{max-height:calc(100% - 40px);max-width:100%;object-fit:contain;border-radius:10px}
.lb-swiper figcaption{margin-top:10px;font-size:.9rem;color:#CFE6E6}
.lb-swiper .swiper-button-next,.lb-swiper .swiper-button-prev{color:var(--aqua)}
.lb-count{font-size:.85rem;color:#9FC4C6}
.lb-grid{display:none;overflow-y:auto;padding:10px 18px 30px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.lightbox.grid .lb-grid{display:grid}
.lightbox.grid .lb-main{display:none}
.lb-grid button{border:0;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:3/2;background:#0a3a48}
.lb-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.lb-grid button:hover img{transform:scale(1.06)}
@media (max-width:700px){.lb-swiper .swiper-slide{padding:0 10px 10px}.lb-swiper .swiper-button-next,.lb-swiper .swiper-button-prev{display:none}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.rs-anim{opacity:1;transform:none}
  .rslide-img{transform:none}
}

/* hero photo (swappable in Admin → Settings) */
.hero-pic{position:absolute;inset:0;overflow:hidden}
.hero-pic img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos-d,60% 62%);transform-origin:68% 70%;animation:kenburns 26s ease-in-out infinite alternate}
@media (max-width:760px){.hero-pic img{object-position:var(--hero-pos-m,66% 74%)}}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
.hero-overlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,59,76,.55) 0%,rgba(6,59,76,.15) 30%,rgba(6,59,76,.35) 60%,rgba(6,59,76,.88) 100%),
  linear-gradient(90deg,rgba(6,59,76,.55) 0%,rgba(6,59,76,0) 65%)}
.hero h1{text-shadow:0 2px 30px rgba(6,59,76,.45)}
@media (prefers-reduced-motion:reduce){.hero-pic img{animation:none}}
/* small source images (e.g. 612px sample): no extra zoom, so it isn't upscaled further */
.rslide-img.small,.swiper-slide-active .rslide-img.small{transform:none;transition:none}

/* ---------- trip builder ---------- */
.builder{padding:28px 0 140px}
.b-progress{position:sticky;top:var(--header-h);z-index:20;background:var(--pearl);padding:14px 0 12px;border-bottom:1px solid var(--line)}
.b-progress .wrap{display:flex;align-items:center;gap:18px}
.b-track{flex:1;height:6px;background:#E7E2D6;border-radius:6px;overflow:hidden}
.b-fill{height:100%;width:0;background:linear-gradient(90deg,var(--teal-ink),var(--aqua));border-radius:6px;transition:width .6s var(--ease)}
.b-steplabel{font-size:.85rem;font-weight:700;color:var(--navy);white-space:nowrap}
.total-badge{display:inline-flex;align-items:baseline;gap:8px;background:var(--coral);color:var(--navy);border-radius:999px;padding:8px 16px;font-weight:800;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(255,117,98,.9)}
.total-badge small{font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.total-badge .amt{font-variant-numeric:tabular-nums;font-size:1.05rem}
.total-badge.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.07)}}
.b-layout{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;margin-top:26px}
.b-aside{position:sticky;top:calc(var(--header-h) + 80px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.b-aside h3{font-size:1.3rem}
.b-aside dl{margin:0;font-size:.9rem}
.b-aside dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:10px}
.b-aside dd{margin:2px 0 0;color:var(--navy);font-weight:600}
.b-aside .total-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.step-panel h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.step-panel .sub{color:var(--muted);margin-top:-6px}
.step-enter{animation:stepIn .55s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}}
.b-nav{display:flex;gap:12px;margin-top:30px;align-items:center}
.b-mobilebar{display:none}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:22px}
.choice{position:relative;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:0;cursor:pointer;overflow:hidden;font:inherit;color:inherit;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.choice:hover{border-color:var(--aqua);transform:translateY(-3px);box-shadow:var(--shadow)}
.choice[aria-pressed="true"]{border-color:var(--teal-ink);box-shadow:0 0 0 3px rgba(0,169,165,.25)}
.choice .ch-img{aspect-ratio:16/10;background-size:cover;background-position:center}
.choice .ch-body{padding:16px 18px 18px}
.choice h3{font-size:1.25rem;margin-bottom:4px}
.choice p{font-size:.9rem;color:var(--muted);margin:0 0 10px}
.choice .price{font-weight:800;color:var(--navy)}
.choice .price small{font-weight:600;color:var(--muted)}
.choice .tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#DDF4F3;color:#005F5C;margin-bottom:8px}
.choice .tag.beach{background:var(--sand);color:#6B4E1F}
.choice .tick{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:var(--teal-ink);color:#fff;display:grid;place-items:center;font-weight:800;transform:scale(0);transition:transform .35s var(--ease)}
.choice[aria-pressed="true"] .tick{transform:scale(1)}
.choice.plain{padding:18px}
.choice.req{border-style:dashed}
.group-label{margin:26px 0 0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px;max-width:640px}
.field label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.06em;color:var(--navy);margin-bottom:6px}
.field input,.field select{width:100%;min-height:50px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--teal-ink);outline:none;box-shadow:0 0 0 3px rgba(0,169,165,.2)}
.counter{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:6px 8px 6px 14px;min-height:50px}
.counter button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--navy);background:none;font-size:1.2rem;color:var(--navy);cursor:pointer}
.counter button:hover{background:var(--navy);color:#fff}
.counter output{font-weight:800;min-width:24px;text-align:center}
.toggle{display:inline-flex;border:1.5px solid var(--navy);border-radius:999px;overflow:hidden}
.toggle button{border:0;background:none;padding:10px 22px;font:700 .9rem var(--sans);color:var(--navy);cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--navy);color:#fff}
.err{color:#B3261E;font-weight:700;margin-top:14px;min-height:1.2em}
.honey{background:var(--sand);border-radius:14px;padding:16px 18px;margin-top:20px}
.honey strong{color:var(--navy)}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:20px}
.summary .row{display:grid;grid-template-columns:140px 1fr auto auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.summary .row .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.summary .row .v{color:var(--navy);font-weight:600}
.summary .row .v small{display:block;color:var(--muted);font-weight:500}
.summary .row .p{font-weight:800;color:var(--navy);white-space:nowrap}
.summary .row a{font-size:.85rem;font-weight:700}
.summary .grand{display:flex;justify-content:space-between;align-items:center;padding:18px;background:var(--sand)}
.summary .grand .total-badge{font-size:1.15rem}
.check{display:flex;gap:10px;align-items:center;margin-top:18px;font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--teal-ink)}
.send-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px}
.ph-banner{background:#FFF3F0;border:1px solid #FFD2CA;color:#7A2E22;border-radius:12px;padding:10px 14px;font-size:.85rem;margin-top:16px}
.thanks{text-align:center;max-width:720px;margin:20px auto}
.thanks .summary{text-align:left}
@media (max-width:980px){
  .b-layout{grid-template-columns:1fr}
  .b-aside{display:none}
  .b-mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);color:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:12px;align-items:center;justify-content:space-between;box-shadow:0 -12px 30px -18px rgba(6,59,76,.6)}
  .b-mobilebar .btn{min-height:44px;padding:0 18px}
  .b-mobilebar .lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);font-weight:800}
  .b-progress .total-badge{display:none}
  .fields{grid-template-columns:1fr}
  .summary .row{grid-template-columns:1fr auto;gap:4px 12px}
  .summary .row .k{grid-column:1/-1}
}

/* Thai (v2.4) – builder: only affects html[lang="th"], so the English builder looks exactly as before */
html[lang="th"] body{line-height:1.75}
html[lang="th"] :is(h1,h2,h3){line-height:1.35;letter-spacing:0}
/* Thai has no capitals and tracking breaks up its clusters: no letter-spacing on the small labels, slightly larger size */
html[lang="th"] :is(.eyebrow,.choice .tag,.total-badge small,.b-aside dt,.group-label,.field label,.summary .row .k,.b-mobilebar .lbl,.post time,.cat-tile small){letter-spacing:0;text-transform:none}
html[lang="th"] :is(.b-aside dt,.summary .row .k,.total-badge small,.b-mobilebar .lbl){font-size:.8rem;font-weight:600}
html[lang="th"] .btn{letter-spacing:0}
html[lang="th"] .step-panel h2,html[lang="th"] .thanks h2{text-wrap:balance}
/* fix (v2.4): the mobile bar's display:flex overrode [hidden], so it stayed visible on the thank-you screen */
.b-mobilebar[hidden]{display:none!important}