/* =====================================================================
   POSARA — components shared by every public page, index.html included
   (which carries its own copy of the base styles inline and so cannot take
   styles.css). Waitlist, card chips, price placeholders, the floating
   WhatsApp button, real-photo heroes, and contrast fixes.
   ===================================================================== */
:root{
  /* Text green that passes 4.5:1 on white and on the cream panels (#2E8B57 was 4.2). */
  --green:#1E7B47;
  /* WhatsApp green for buttons with white text. Brand #25D366 under white text is 2:1,
     which a lot of phones in sunlight simply cannot read. */
  --wa:#118043;
  --wa-dark:#0B6E3A;
}

/* ---------- keyboard focus that can be seen ---------- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px}

/* ---------- contrast: small grey text that sat under 4.5:1 ---------- */
.btn.btn-wa{background:var(--wa);color:#fff}
.btn.btn-wa:hover{background:var(--wa-dark)}
.ft-bottom a.ft-by{color:rgba(255,255,255,0.66)}
.ft-col a em{color:rgba(255,255,255,0.62)}
.sb-tab span{opacity:1}
.av-dow{color:#5C6B80;font-size:12px !important}

/* ---------- real-photo heroes (phones get a 900px copy) ---------- */
.hero-rooms{background-image:linear-gradient(100deg,rgba(8,16,30,0.8) 0%,rgba(8,16,30,0.55) 48%,rgba(8,16,30,0.2) 100%),url('/assets/img/hero-rooms.webp');background-position:center 55%}
.hero-apartments{background-image:linear-gradient(100deg,rgba(8,16,30,0.8) 0%,rgba(8,16,30,0.52) 48%,rgba(8,16,30,0.18) 100%),url('/assets/img/hero-apartments.webp');background-position:center 50%}
@media(max-width:680px){
  .hero-rooms{background-image:linear-gradient(180deg,rgba(8,16,30,0.74) 0%,rgba(8,16,30,0.62) 100%),url('/assets/img/hero-rooms-m.webp')}
  .hero-apartments{background-image:linear-gradient(180deg,rgba(8,16,30,0.74) 0%,rgba(8,16,30,0.62) 100%),url('/assets/img/hero-apartments-m.webp')}
}

/* ---------- price placeholder until the live rate arrives ---------- */
.pskel{display:inline-block;width:4.2em;height:.95em;vertical-align:-.1em;border-radius:6px;
  background:linear-gradient(90deg,#e9e6dd 0%,#f5f3ee 50%,#e9e6dd 100%);background-size:200% 100%;
  animation:pskel 1.2s ease-in-out infinite}
.mbar .pskel,.bookcard .pskel{width:3em}
@keyframes pskel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.pskel{animation:none}}

/* ---------- card chips: private / shared, free now, minimum stay ---------- */
.cchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cchip{font-size:12px;font-weight:600;line-height:1;color:var(--navy);background:var(--cream);border:1px solid var(--line);
  padding:6px 9px;border-radius:999px;white-space:nowrap}
.cchip.ok{color:var(--green);background:#EDF6F0;border-color:#CFE6D7}
.cchip.soon{color:#7A4A12;background:#FBF1E3;border-color:#F0DDBF}
@media(max-width:640px){
  .rf-wrap .card.apt .cchips{gap:4px;margin-top:6px}
  .rf-wrap .card.apt .cchip{font-size:11px;padding:4px 7px}
}

/* ---------- waitlist ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl{grid-column:1 / -1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,4vw,36px);box-shadow:0 24px 50px -36px rgba(11,30,63,.45)}
.wl-full{background:linear-gradient(180deg,var(--cream) 0%,#fff 62%)}
.wl-host:not(:empty){margin-top:40px}
.wl-head{max-width:620px;margin-bottom:22px}
.wl-head h3{font-family:var(--serif);font-size:clamp(22px,3vw,30px);color:var(--navy);margin:8px 0 8px;line-height:1.2}
.wl-head p{color:var(--ink-soft);font-size:15.5px;margin:0}
.wl-next{display:inline-flex;align-items:center;gap:8px;margin-top:12px !important;font-size:14px !important;font-weight:600;
  color:var(--navy) !important;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.wl-next span{width:8px;height:8px;border-radius:50%;background:#D98A2B;flex:none}
.wl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px}
.wl-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.wl-f label{font-size:13px;font-weight:600;color:var(--ink)}
.wl-f input,.wl-f select{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #CFC8BA;border-radius:10px;padding:12px 12px;min-height:48px}
.wl-f input:focus,.wl-f select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,90,168,.14);outline:none}
.wl-f small{font-size:12px;color:var(--ink-soft)}
.wl-form .btn{margin-top:20px;min-height:50px;padding:0 30px}
.wl-msg{font-size:14px;margin-top:10px;min-height:1px}
.wl-msg.err{color:#A12F2F;font-weight:600}
.wl-or{font-size:14px;color:var(--ink-soft);margin-top:14px}
.wl-or a{color:var(--wa);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wl-done{text-align:center;padding:18px 6px}
.wl-done b{display:block;font-family:var(--serif);font-size:24px;color:var(--green);margin-bottom:6px}
.wl-done p{color:var(--ink-soft);font-size:15px;margin:0 0 16px}
.wl-done .btn{display:inline-flex;align-items:center;gap:8px}
.is-empty .sec-head p{display:none}
/* Home page, nothing free: a pointer to the waitlist (index.html has no styles.css, so the
   whole look is here). */
.wl-teaser{grid-column:1 / -1;border:1px dashed var(--line);border-radius:var(--radius-lg);background:var(--cream);
  padding:clamp(32px,5vw,56px) 24px;text-align:center}
.wl-teaser svg{display:block;width:40px;height:40px;stroke:var(--blue);fill:none;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;margin:0 auto 16px;opacity:.75}
.wl-teaser h3{font-family:var(--serif);font-size:22px;color:var(--navy);margin-bottom:8px}
.wl-teaser p{color:var(--ink-soft);font-size:16px;max-width:46ch;margin:0 auto 18px}
.wl-teaser .wl-next{margin:0 0 22px !important}
.wl-teaser .cbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* The language switch must never wrap "中文" onto two lines on a narrow phone. */
.lang button{white-space:nowrap}
@media(max-width:400px){.lang button{padding:5px 8px}.nav-right{gap:10px}}
@media(max-width:860px){.wl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .wl-grid{grid-template-columns:1fr}
  .wl-form .btn{width:100%}
  #roomsNowGrid .wl-teaser{flex:1 0 100%}
}

/* ---------- floating WhatsApp button (rooms + stay pages) ---------- */
.wa-fab{position:fixed;z-index:45;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:9px;height:56px;min-width:56px;padding:0 16px;border-radius:999px;
  background:var(--wa);color:#fff;font:600 15px/1 var(--sans);box-shadow:0 10px 28px -8px rgba(11,30,63,.45),0 2px 6px rgba(11,30,63,.18);
  transition:transform .2s,background .2s,bottom .25s}
.wa-fab:hover{background:var(--wa-dark);transform:translateY(-2px)}
.wa-fab svg{flex:none}
@media(max-width:860px){
  .wa-fab{width:56px;padding:0}
  .wa-fab-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Above the sticky price/Apply bar while it is showing, never on top of it. */
  body.mbar-on .wa-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* The demo pill sits bottom-left; the lightbox covers everything. */
body:has(.lb.on) .wa-fab{display:none}
@media print{.wa-fab{display:none}}
.faq-go{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- landmarks: skip link, screen-reader-only text ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--navy);color:#fff;font:600 15px/1 var(--sans);
  padding:14px 18px;border-radius:10px;transition:top .15s}
.skip:focus{top:12px}
main:focus{outline:none}
.nw{white-space:nowrap}

/* ---------- footer headings are h2 in the outline, small caps on screen ---------- */
.ft-col .ft-h{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.66);margin:6px 0 16px;line-height:1.6}

/* ---------- tap targets of at least 44px ---------- */
#lang.lang button{min-height:44px;min-width:44px}   /* id: index.html's inline styles set 32px */
/* The demo-mode pill sits above the sticky bar too. */
body.mbar-on #posaraDemoPill{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
.nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.av-arrow{width:44px !important;height:44px !important}
.av-d{min-height:44px}
.addr-note a{display:inline-block;padding:12px 0}
.rf select{min-height:44px}
@media(max-width:400px){
  .logo .logo-img{height:30px}
  .nav{gap:10px}
}

/* ---------- forms: 16px text and 48px fields, or iOS zooms in on focus ---------- */
.bk-form input,.bk-form select,.fld input,.fld select,.sb-field select{font-size:16px !important;min-height:48px}
.bk-form textarea,.fld textarea{font-size:16px !important}
.fld-hint{font-size:13px;color:var(--ink-soft);margin:-4px 0 14px}
.or-note{font-size:13.5px;color:var(--ink-soft);margin:0 4px 10px}
.or-note:empty{display:none}

/* ---------- detail gallery: real <img>s, 1 + 4 grid on a computer, one swipe row on a phone ---------- */
.gwrap{position:relative;margin-top:14px}
.gwrap .gallery{margin-top:0}
.gwrap .gallery .g{position:relative;overflow:hidden}
.gwrap .gallery .g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gwrap .gallery.gn1{grid-template-columns:1fr}
.gwrap .gallery.gn1 .g.main{grid-row:1 / -1}
.gwrap .gallery.gn2,.gwrap .gallery.gn3{grid-template-columns:2fr 1fr}
.gwrap .gallery.gn2 .g:nth-child(2){grid-row:1 / -1}
.gwrap .gallery.gn4 .g:nth-child(4){grid-column:2 / -1}
@media(max-width:860px){
  .gwrap .gallery{display:flex !important;height:auto !important;gap:0;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
  .gwrap .gallery::-webkit-scrollbar{display:none}
  .gwrap .gallery .g,.gwrap .gallery .g.main{flex:0 0 100%;width:100%;height:auto !important;aspect-ratio:4/3;scroll-snap-align:start}
  /* bottom-left, clear of the WhatsApp button on the right */
  .gwrap .gall-all{left:12px;right:auto;bottom:12px}
}

/* ---------- loading skeleton (same shapes as the page, so nothing jumps) ---------- */
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,#ece9e1 0%,#f6f4ef 50%,#ece9e1 100%);background-size:200% 100%;animation:pskel 1.2s ease-in-out infinite}
.gwrap .gallery .g.sk{border-radius:0}
.dskel .sk-s{width:150px;height:14px;margin:10px 0}
.dskel .sk-h{width:min(520px,80%);height:36px;margin:12px 0}
.dskel .sk-m{width:min(360px,60%);height:16px}
.dskel .sk-body{height:60vh}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ---------- a place with no photos yet: a calm tile that names it ---------- */
.nophoto{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(135deg,#1b3366 0%,#0B1E3F 100%) !important;color:#fff;font:600 15px/1.3 var(--sans);letter-spacing:.03em;padding:12px}
.nophoto svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}

/* ---------- "this room has just been taken" ---------- */
.taken-note{display:flex;gap:12px;align-items:flex-start;background:#FBF1E3;border:1px solid #F0DDBF;color:#5A3A0E;
  border-radius:12px;padding:14px 16px;margin:0 0 22px;font-size:15px;line-height:1.5}
.taken-note svg{flex:none;width:22px;height:22px;stroke:#B4541F;fill:none;stroke-width:1.8;stroke-linecap:round;margin-top:1px}

/* ---------- home: hold the calendars' place until they draw ----------
   The two availability calendars arrive after a fetch and are tall; the stats bar and the
   "search by dates" box used to jump down by up to 1,700px (CLS 0.13–0.38). Heights
   measured on the live page at each layout. */
#availability:empty{min-height:795px}
@media(max-width:900px){#availability:empty{min-height:1630px}}
@media(max-width:560px){#availability:empty{min-height:1690px}}
#availability.av-off{min-height:0 !important}