/* Portal v2 — travel-app design system (.pa-*) */

/* Inter — self-hosted variable font (no CDN; /fonts/inter-var.woff2, weights
   100–900). The whole guest portal standardizes on Inter to match the admin
   (#16); system-ui is the fallback until the woff2 loads. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2?v=1') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --pa-teal:#1E5C6B; --pa-teal-d:#102F3A; --pa-gold:#D4B07A; --pa-cream:#F5F1EB;
  --pa-ink:#1a1a1a; --pa-muted:#6b7280; --pa-line:#e5e0d6; --pa-card:#fff;
}
.pa-app{background:var(--pa-cream);min-height:100vh;padding-bottom:76px;font-family:'Inter',system-ui,-apple-system,sans-serif;}
/* Form controls don't inherit font-family by default — pull them onto Inter too. */
.pa-app input,.pa-app select,.pa-app textarea,.pa-app button{font-family:inherit;}

/* ── In-page section tabs inside Home (#16) — breaks the long Home scroll into
   instant, client-swapped sections. Bottom tab bar (Home/Activities/Messages)
   is unchanged; these tabs live inside Home. ── */
.pa-sectabs{display:flex;gap:7px;overflow-x:auto;padding:4px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pa-sectabs::-webkit-scrollbar{display:none;}
.pa-sectab{white-space:nowrap;font:inherit;font-size:14px;font-weight:600;padding:8px 15px;border-radius:999px;border:1px solid var(--pa-line);background:#fff;color:var(--pa-muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.pa-sectab:hover{border-color:var(--pa-teal);}
.pa-sectab.is-active{background:var(--pa-teal-d);color:#fff;border-color:var(--pa-teal-d);}
.pa-sectab:focus-visible{outline:3px solid var(--pa-gold);outline-offset:2px;}
.pa-sec{display:none;}
.pa-sec.is-active{display:block;animation:pa-secfade .2s ease;}
@keyframes pa-secfade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.pa-sec.is-active{animation:none;}}
.pa-wrap{max-width:640px;margin:0 auto;padding:0 16px;}
.pa-topbar{background:var(--pa-teal-d);color:#fff;padding:16px 16px 14px;position:sticky;top:0;z-index:20;}
.pa-topbar__eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pa-gold);}
.pa-topbar__title{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:24px;margin:2px 0 0;line-height:1.1;}
.pa-topbar__row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pa-section{padding:16px 0 8px;}
.pa-h2{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:22px;margin:0 0 4px;color:var(--pa-ink);}
.pa-sub{font-size:13px;color:var(--pa-muted);margin:0 0 14px;}
.pa-back{display:inline-block;font-size:13px;color:var(--pa-teal);text-decoration:none;margin:0 0 14px;}

.pa-card{background:var(--pa-card);border:1px solid var(--pa-line);border-radius:14px;overflow:hidden;margin-bottom:12px;}
.pa-card__body{padding:14px 16px;}
.pa-card__title{font-size:15px;font-weight:500;color:var(--pa-ink);margin:0;}
.pa-card__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0 0;font-size:12px;color:var(--pa-muted);}

.pa-media{height:120px;position:relative;background:var(--pa-teal);background-size:cover;background-position:center;}
.pa-media--classic{background:linear-gradient(135deg,#4a6b3a,#1d2b16);}
.pa-media--custom{background:linear-gradient(135deg,#8a6d3b,#3a2c14);}
.pa-media--excursion{background:linear-gradient(135deg,#1E5C6B,#0d2b33);}
.pa-media__tag{position:absolute;top:10px;left:10px;font-size:11px;font-weight:500;background:rgba(255,255,255,.92);color:var(--pa-teal-d);padding:3px 10px;border-radius:999px;}

.pa-chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0;-webkit-overflow-scrolling:touch;}
.pa-chip{white-space:nowrap;font-size:13px;padding:6px 14px;border-radius:999px;border:1px solid var(--pa-line);background:#fff;color:var(--pa-muted);cursor:pointer;}
.pa-chip.is-active{background:var(--pa-teal-d);color:#fff;border-color:var(--pa-teal-d);font-weight:500;}

.pa-btn{display:inline-block;width:100%;text-align:center;background:#fff;border:1px solid var(--pa-line);color:var(--pa-ink);border-radius:8px;padding:11px 14px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;}
.pa-btn--primary{background:var(--pa-teal-d);color:#fff;border-color:var(--pa-teal-d);}
.pa-btn--danger{background:#dc2626;color:#fff;border-color:#dc2626;}

.pa-tile{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--pa-line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--pa-ink);margin-bottom:12px;}
.pa-tile--hero{background:var(--pa-teal-d);color:#fff;border-color:var(--pa-teal-d);}
.pa-tile__t{font-weight:600;font-size:16px;display:block;}
.pa-tile__s{font-size:13px;color:var(--pa-muted);display:block;}
.pa-tile--hero .pa-tile__s{color:rgba(255,255,255,.85);}

.pa-field{display:block;font-size:13px;margin:0 0 12px;color:var(--pa-ink);}
/* font-size:16px is required — iOS Safari auto-zooms on focus for anything smaller. */
.pa-field input,.pa-field select,.pa-field textarea{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid #d1d5db;border-radius:8px;font-family:inherit;font-size:16px;}

.pa-pill{font-size:12px;padding:2px 9px;border-radius:999px;text-transform:capitalize;white-space:nowrap;}
.pa-pill--requested{background:#fff7e6;color:#8a5a00;}
.pa-pill--confirmed{background:#e6eefb;color:#1a4a9c;}
.pa-pill--completed,.pa-pill--handled{background:#e6f6ec;color:#146c37;}
.pa-pill--declined,.pa-pill--cancelled{background:#fbe6e6;color:#a12;}

.pa-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;border-top:1px solid var(--pa-line);max-width:640px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom);}
.pa-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 0 10px;color:var(--pa-muted);text-decoration:none;font-size:11px;line-height:1;letter-spacing:.01em;transition:color .15s;}
.pa-nav__item:active{background:var(--pa-cream);}
.pa-nav__item.is-active{color:var(--pa-teal-d);font-weight:500;}
.pa-nav__ico{display:flex;align-items:center;justify-content:center;line-height:0;}
.pa-nav__ico svg{width:23px;height:23px;display:block;}
.pa-status{background:#fff;border:1px solid var(--pa-line);border-radius:14px;padding:16px;margin-bottom:8px;}
.pa-status__row{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0;}
.pa-status__row dt{color:var(--pa-muted);} .pa-status__row dd{margin:0;font-weight:500;}
.pa-badge{font-size:12px;font-weight:500;padding:3px 12px;border-radius:999px;}

/* ── Guest-board category tags ── */
.pa-tag{display:inline-block;font-size:11px;font-weight:500;padding:3px 10px;border-radius:999px;text-transform:capitalize;}
.pa-tag--update{background:#E6F1FB;color:#0C447C;}
.pa-tag--excursion{background:#E1F5EE;color:#0F6E56;}
.pa-tag--promotion{background:#FAEEDA;color:#854F0B;}

/* ── Responsive card grid (browse-style lists) ── */
/* Two-up on a phone: these are browse lists (Activities, What's on), so a guest
   is scanning options rather than reading one. The 720px rule below widens it
   further on desktop. */
.pa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.pa-grid .pa-card{margin-bottom:0;}
/* A card whose request form is open spans the row — the form (guests, date,
   notes, total) cannot work in a ~165px column. Same trick as .cx-tile. */
.pa-grid .pa-card.is-open{grid-column:1 / -1;}
@media (max-width:719px){
  .pa-grid .pa-media{height:92px;}
  .pa-grid .pa-card__body{padding:11px 12px;}
  .pa-grid .pa-card__title{font-size:14px;}
  .pa-grid .pa-card__meta{font-size:11.5px;}
  .pa-grid .pa-card .pa-btn{padding:10px 8px;font-size:13px;}
  /* An open card is full width again, so its controls get their room back. */
  .pa-grid .pa-card.is-open .pa-media{height:120px;}
  .pa-grid .pa-card.is-open .pa-btn{padding:11px 14px;font-size:14px;}
}

/* ── Desktop: widen the shell + flow cards into columns ── */
@media (min-width:720px){
  .pa-wrap{max-width:880px;}
  .pa-nav{max-width:880px;}
  .pa-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
}

.pa-nav__badge{position:absolute;top:-6px;right:-10px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:600;}

/* ── Activities pager (6 per page, chevron arrows) ── */
.pa-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 4px;}
.pa-pager[hidden]{display:none;}
.pa-pager__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--pa-line);background:#fff;color:var(--pa-teal-d);cursor:pointer;transition:border-color .15s,opacity .15s;}
.pa-pager__btn:hover:not(:disabled){border-color:var(--pa-teal);}
.pa-pager__btn:disabled{opacity:.4;cursor:default;}
.pa-pager__btn:focus-visible{outline:2px solid var(--pa-gold);outline-offset:2px;}
.pa-pager__info{font-size:13px;font-weight:500;color:var(--pa-muted);min-width:52px;text-align:center;}

/* Activity request form, hoisted below the category tabs. */
.act-host{background:var(--pa-card);border:1px solid var(--pa-teal-d);border-radius:14px;padding:14px 16px;margin:0 0 16px;}
.act-host[hidden]{display:none;}
.act-host__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.act-host__title{font-size:15px;font-weight:600;color:var(--pa-ink);}
.act-host__x{background:none;border:0;font-size:22px;line-height:1;color:var(--pa-muted);cursor:pointer;padding:0 2px;}
.act-host__x:hover{color:var(--pa-ink);}

/* ── Daily planner ── */
.pa-planday{margin:0 0 14px}
.pa-planday__h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pa-muted);margin:0 0 8px}
.pa-planday--today .pa-planday__h{color:var(--pa-teal-d)}
.pa-planday__today{background:#e6eefb;color:#1a4a9c;font-size:10px;padding:1px 8px;border-radius:999px;text-transform:none;letter-spacing:0}
.pa-plantl{border-left:2px solid var(--pa-line);padding-left:14px;margin-left:6px;display:flex;flex-direction:column;gap:11px}
.pa-planit{display:flex;gap:9px;align-items:flex-start}
.pa-planit__ico{flex:0 0 auto;color:var(--pa-teal);margin-top:1px}
.pa-planit__t{font-size:14px;font-weight:500;color:var(--pa-ink);line-height:1.3}
.pa-planit__d{font-size:12px;color:var(--pa-muted);margin-top:2px}
.pa-planit__tag{display:inline-block;font-size:10px;background:#e6eefb;color:#1a4a9c;padding:0 7px;border-radius:999px;margin-left:6px;vertical-align:1px}
.pa-planempty{font-size:12px;color:var(--pa-muted);font-style:italic}
.pa-details{background:var(--pa-card);border:1px solid var(--pa-line);border-radius:14px;margin-bottom:12px;}
.pa-details__s{list-style:none;cursor:pointer;padding:14px 16px;font-size:15px;font-weight:500;color:var(--pa-ink);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pa-details__s::-webkit-details-marker{display:none;}
/* Lucide chevron (SVG, not a native glyph) so the disclosure arrow matches the icon set. */
.pa-details__s::after{content:'';flex:0 0 auto;width:16px;height:16px;background:no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");transition:transform .18s;}
.pa-details[open] .pa-details__s::after{transform:rotate(180deg);}
.pa-details > div{padding:0 16px 14px;}

/* ── Booking-box address → Google Maps ── */
.pa-maps{display:flex;align-items:center;gap:12px;margin:12px -6px 0;padding:12px;border-radius:12px;background:#f3f8f9;text-decoration:none;color:var(--pa-teal);border-top:1px solid var(--pa-line);}
.pa-maps__pin{width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:#e0eef0;display:flex;align-items:center;justify-content:center;color:var(--pa-teal);}
.pa-maps__text{font-size:14px;line-height:1.4;color:var(--pa-ink);}
.pa-maps__text b{color:var(--pa-teal-d);}
.pa-maps__go{display:block;margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pa-teal);}

/* ── Concierge nav tiles (Activities / Messages) ── */
.cx-tile{position:relative;}
/* compound selectors so the dark nav treatment beats the base .cx-tile
   rule defined in _services.php's inline <style> (which loads later) */
.cx-tile.cx-tile--nav{background:var(--pa-teal-d);border-color:var(--pa-teal-d);color:#fff;}
.cx-tile.cx-tile--nav svg{color:var(--pa-gold);}
.cx-tile__go{position:absolute;top:14px;right:15px;color:var(--pa-gold);font-size:17px;}
.cx-tile__badge{position:absolute;top:10px;right:10px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e05b49;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* ── Keyboard focus — a clear ring on service tiles and buttons (was invisible). ── */
.cx-tile:focus-visible,.pa-btn:focus-visible,.cx-tile[data-cx]:focus-visible{outline:3px solid var(--pa-gold);outline-offset:2px;}

/* ── Toast notifications (request result slides up from the bottom) ── */
#ts-toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:center;width:calc(100% - 32px);max-width:400px;pointer-events:none;}
.ts-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:100%;background:var(--pa-card);border-radius:12px;box-shadow:0 8px 30px rgba(16,47,58,.2);padding:12px 14px;font-size:14px;line-height:1.4;border-left:4px solid #999;transform:translateY(14px);opacity:0;transition:transform .25s ease,opacity .25s ease;}
.ts-toast.is-in{transform:translateY(0);opacity:1;}
.ts-toast.is-out{opacity:0;transform:translateY(14px);}
.ts-toast--ok{border-left-color:#2e7d32;}
.ts-toast--err{border-left-color:#c0392b;}
.ts-toast__icon{flex:0 0 auto;font-weight:700;}
.ts-toast--ok .ts-toast__icon{color:#2e7d32;}
.ts-toast--err .ts-toast__icon{color:#c0392b;}
.ts-toast__msg{flex:1 1 auto;color:var(--pa-ink);}
.ts-toast__x{flex:0 0 auto;background:none;border:0;cursor:pointer;font-size:16px;line-height:1;color:var(--pa-muted);padding:0 2px;}

/* ── Request-sent popup ── */
.pa-modal-backdrop{position:fixed;inset:0;background:rgba(16,47,58,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000;}
.pa-modal{background:#fff;border-radius:18px;max-width:360px;width:100%;padding:26px 22px;text-align:center;box-shadow:0 20px 60px rgba(16,47,58,.35);}
.pa-modal__icon{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:#dcfce7;color:#166534;display:flex;align-items:center;justify-content:center;}
.pa-modal__icon svg{width:28px;height:28px;}
.pa-modal__title{font-family:'Inter',system-ui,sans-serif;font-size:24px;font-weight:500;margin:0 0 6px;color:var(--pa-ink);}
.pa-modal__body{font-size:14px;color:var(--pa-muted);line-height:1.6;margin:0 0 20px;}
.pa-modal__actions{display:flex;flex-direction:column;gap:8px;}

.pa-tag--event{background:#ede9fe;color:#5b21b6;}

/* ── Check-in — landing ──────────────────────────────────────── */
.ci-wizard{max-width:520px;margin:0 auto}
.ci-welcome{color:var(--pa-muted);line-height:1.6;margin:0 0 16px}
.ci-intro{max-width:520px;margin:0 auto}
.ci-hero{text-align:center;padding:18px 6px 22px}
.ci-hero__eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pa-gold);font-weight:600}
.ci-hero__title{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:34px;line-height:1.05;margin:10px 0 12px;color:var(--pa-ink)}
.ci-hero__sub{font-size:15px;line-height:1.65;color:var(--pa-muted);margin:0 auto;max-width:400px}
.ci-trip{padding:2px 0}
.ci-trip__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 16px;border-bottom:1px solid var(--pa-line)}
.ci-trip__row:last-child{border-bottom:0}
.ci-trip__row>span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--pa-muted);white-space:nowrap}
.ci-trip__row>strong{font-weight:600;color:var(--pa-ink);text-align:right}
.ci-trip__muted{color:var(--pa-muted);font-weight:400}
.ci-trip code{font-family:ui-monospace,SFMono-Regular,monospace;background:var(--pa-cream);padding:2px 8px;border-radius:6px;letter-spacing:.06em;font-size:13px}
.ci-need{margin:20px 4px 4px}
.ci-need__title{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--pa-muted);margin:0 0 8px;font-weight:600}
.ci-need__item{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--pa-ink);padding:8px 2px}
.ci-need__ic{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--pa-line);border-radius:10px;font-size:17px}
.ci-start{margin-top:24px;font-size:15px;padding:15px}
.ci-intro__note{text-align:center;font-size:12px;color:var(--pa-muted);margin:14px 0 0;line-height:1.5}

/* ── Check-in — steps ────────────────────────────────────────── */
.ci-progress{height:5px;background:#e7ded7;border-radius:999px;margin:2px 0 22px;overflow:hidden}
.ci-progress__bar{height:100%;width:0;background:var(--pa-teal);transition:width .3s ease}
.ci-step__num{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pa-gold)}
.ci-step__h h3{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:26px;margin:5px 0 20px;color:var(--pa-ink)}
.ci-req{color:#c0392b}
.ci-l{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pa-muted);margin:15px 0 6px}
.ci-in{width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:9px;font-size:16px;font-family:inherit;box-sizing:border-box;background:#fff}
.ci-in:focus{outline:none;border-color:var(--pa-teal);box-shadow:0 0 0 3px rgba(30,92,107,.12)}
.ci-radio{display:flex;align-items:center;gap:9px;margin:9px 0;font-size:15px}
.ci-waiver{max-height:210px;overflow:auto;background:#fff;border:1px solid var(--pa-line);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.65;margin-bottom:14px;color:var(--pa-ink)}
.ci-upload{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.ci-upload__state{font-size:13px;color:var(--pa-muted)}

/* ── Check-in — security deposit step ─────────────────────────── */
.ci-deposit__amt{display:flex;justify-content:space-between;align-items:baseline;gap:14px;background:#fff;border:1px solid var(--pa-line);border-radius:12px;padding:16px 18px}
.ci-deposit__amt-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pa-muted);font-weight:700}
.ci-deposit__amt-v{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:26px;color:var(--pa-ink);line-height:1}
.ci-deposit__amt-v--tbc{font-size:15px;font-weight:500;color:var(--pa-muted)}
.ci-deposit__note{background:#fff7e6;border:1px solid #f0dcb4;border-radius:10px;padding:13px 15px;margin:14px 0 2px;font-size:14px;line-height:1.6;color:#8a5a00}
.ci-nav{display:flex;gap:12px;margin-top:26px}
.ci-nav .pa-btn{width:auto}
.ci-nav .ci-back{flex:0 0 auto;padding-left:18px;padding-right:18px}
.ci-nav .ci-next,.ci-nav .ci-submit{flex:1}
.ci-help{text-align:center;margin-top:28px;font-size:13px;color:#9ca3af}
.ci-help a{color:var(--pa-teal);font-weight:500}

/* ── Check-in — done + alert ─────────────────────────────────── */
.ci-done-card{text-align:center;padding:30px 20px 24px;max-width:520px;margin:0 auto}
.ci-done-card__check{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:#e6f6ec;color:#146c37;display:flex;align-items:center;justify-content:center;font-size:28px}
.ci-done-card h2{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:27px;margin:0 0 8px;color:var(--pa-ink)}
.ci-done-card p{color:var(--pa-muted);font-size:14px;line-height:1.6;margin:0 auto 20px;max-width:360px}
.ci-done-card .pa-btn{margin-bottom:9px}
.ci-alert{max-width:520px;margin:0 auto 16px;background:#fbe6e6;border:1px solid #f0c2c2;color:#a12;border-radius:10px;padding:12px 16px;font-size:14px;line-height:1.5}
.ci-err{background:#fbe6e6;border:1px solid #f0c2c2;color:#a12;border-radius:9px;padding:11px 14px;font-size:13.5px;line-height:1.55;margin:16px 0 0}
/* Check-in window notice + the early/late arrival warning */
/* .ci-l sets display:block, which beats the [hidden] UA rule — restore it so the
   mode-specific arrival labels can actually hide. */
.ci-l[hidden]{display:none}
.ci-times{font-size:13px;color:var(--pa-muted);line-height:1.6;margin:14px 0 0}
.ci-times strong{color:var(--pa-ink);font-weight:600}
.ci-arrwarn{background:#fff7e6;border:1px solid #f0dcb4;border-radius:9px;padding:12px 14px;margin:12px 0 0}
.ci-arrwarn__t{margin:0;font-size:13.5px;line-height:1.55;color:#8a5a00;font-weight:600}
.ci-arrwarn__n{margin:6px 0 0;font-size:13px;line-height:1.55;color:#8a5a00}
.ci-arrwarn__a{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--pa-teal)}

.pa-btn--ghost{background:transparent;color:var(--pa-teal);border:1px solid var(--pa-line)}

/* ── Check-in — two-column field grid (co-guest form) ──
   Pairs the identity fields side by side; wide controls span both columns.
   Collapses to one column on very narrow phones so nothing gets cramped. */
.ci-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:end}
.ci-grid2 .ci-fld{min-width:0}
.ci-grid2 .ci-span2{grid-column:1 / -1}
@media (max-width:400px){.ci-grid2{grid-template-columns:1fr}}

/* ── Check-in — two side-by-side widgets (co-guest: details | waiver+sign) ── */
.ci-wizard--split{max-width:920px}
.ci-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.ci-cols > .ci-wg{margin-bottom:0}
.ci-wg__title{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:16px;margin:0 0 6px;color:var(--pa-ink)}
.ci-wg__intro{font-size:13px;color:var(--pa-muted);line-height:1.6;margin:0 0 14px}
@media (max-width:760px){.ci-cols{grid-template-columns:1fr}}

/* Styled (non-native) file button for the passport scan */
.ci-filebtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:var(--pa-teal);background:#fff;border:1px solid var(--pa-line);border-radius:8px;padding:9px 14px}
.ci-filebtn:hover{border-color:var(--pa-teal)}
.ci-filebtn input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* Inline add-child field (replaces the native prompt dialog) */
.ci-addkid-inline{display:inline-flex;align-items:center;gap:6px}
.ci-addkid-inline[hidden]{display:none}
.ci-addkid-name{width:auto;min-width:150px;padding:6px 10px;font-size:14px}
.ci-addkid-save{font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--pa-teal);border:0;border-radius:999px;padding:6px 14px;cursor:pointer}
.ci-addkid-cancel{background:none;border:0;font-size:18px;line-height:1;color:var(--pa-muted);cursor:pointer;padding:0 4px}

/* ── Check-in — party roster (multi-guest) ── */
.ci-party__head{font-size:14px;color:var(--pa-muted);line-height:1.6;margin:0 0 16px}
.ci-guest{background:#fff;border:1px solid var(--pa-line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.ci-guest--lead{border-color:var(--pa-teal);box-shadow:0 0 0 1px rgba(30,92,107,.08)}
.ci-guest__title{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ci-guest__who{font-weight:600;flex:1}
.ci-guest__name{flex:1;margin:0}
.ci-chip{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#f3f0ea;color:var(--pa-muted);white-space:nowrap}
.ci-chip--ok{background:#e6f6ec;color:#146c37}
.ci-guest__remove{flex:0 0 auto;background:none;border:0;font-size:20px;line-height:1;color:#c0392b;cursor:pointer;padding:0 4px}
.ci-guest__modes{display:flex;gap:8px;margin:8px 0}
.ci-mode{flex:1;font:inherit;font-size:13px;font-weight:500;padding:9px;border:1px solid var(--pa-line);border-radius:8px;background:#fff;color:var(--pa-teal);cursor:pointer}
.ci-guest__save{margin-top:12px}
.ci-hint{font-size:12px;color:var(--pa-muted);margin:8px 0 0;font-style:italic}
.ci-linkrow{display:flex;gap:8px}
.ci-linkrow input{flex:1}
.ci-linkrow .pa-btn{width:auto;padding-left:16px;padding-right:16px}
.ci-kids{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed var(--pa-line)}
.ci-kid{display:inline-flex;align-items:center;gap:4px;font-size:13px;background:var(--pa-cream);border-radius:999px;padding:4px 6px 4px 12px}
.ci-kid__x{background:none;border:0;font-size:15px;line-height:1;color:var(--pa-muted);cursor:pointer;padding:0 2px}
.ci-addkid{font:inherit;font-size:13px;color:var(--pa-teal);background:none;border:1px dashed var(--pa-line);border-radius:999px;padding:5px 12px;cursor:pointer}
.ci-addguest{margin-top:4px}
.ci-others{margin-top:22px;padding-top:14px;border-top:1px solid var(--pa-line)}
.ci-other__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 2px;font-size:14px}
/* ── Party roster ──────────────────────────────────────────────────────────── */
/* The divider belongs to the guest block, not the name row — a guest with kids
   or a share link has extra rows beneath their name. */
.pty-guest{border-bottom:1px solid var(--pa-line)}
.pty-guest:last-child{border-bottom:0}
.pty-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px}
.pty-row__main{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.pty-name{font-weight:600;color:var(--pa-ink)}
.pty-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--pa-cream);color:var(--pa-muted)}
.pty-tag--me{background:var(--pa-teal);color:#fff}
.pty-kids{padding:0 16px 10px;display:flex;flex-wrap:wrap;gap:6px}
.pty-link{padding:0 16px 14px}

/* ── Arrival modes ─────────────────────────────────────────────────────────── */
.ci-modes{margin:4px 0 6px}
.ci-opt{font-weight:400;text-transform:none;letter-spacing:0}
.ci-l .ci-opt{font-size:9px;color:var(--pa-muted)}

/* ── Signature pad ─────────────────────────────────────────────────────────── */
.ci-sign { position: relative; margin: 6px 0 4px; }
.ci-sign-pad {
  width: 100%; height: 150px; display: block;
  background: #fff; border: 1.5px dashed #c3c8bf; border-radius: 9px;
  touch-action: none;               /* critical: draw instead of scroll on touch */
}
.ci-sign-clear {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; color: #123c30; font-weight: 600; font-size: 12px; cursor: pointer;
}
.ci-sign-hint { font-size: 11px; color: #9aa39a; margin-top: 4px; }

/* Stored signature, shown in place of a blank pad so a reload never looks like data loss */
.ci-signed{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--pa-line);border-radius:10px;padding:12px 14px;margin:6px 0 4px}
/* display:flex beats the [hidden] UA rule — restore it so Re-sign can hide this */
.ci-signed[hidden]{display:none}
.ci-signed__img{height:52px;max-width:170px;object-fit:contain}
.ci-signed__meta{flex:1;font-size:12.5px;color:var(--pa-muted);line-height:1.45}
.ci-signed__redo{flex:0 0 auto;font:inherit;font-size:13px;font-weight:600;color:var(--pa-teal);background:none;border:0;cursor:pointer;padding:0}

/* Co-guest review-and-sign: collapsed details summary */
.ci-review { margin: 4px 0 10px; }
.ci-review > summary { cursor: pointer; font-size: 13px; color: #123c30; font-weight: 600; padding: 8px 0; }
.ci-review[open] > summary { margin-bottom: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Portal redesign — top nav, non-native selects, underline tabs, chat, footer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header + nav are one sticky dark bar: title on the left, the icon+label
   nav on the right, both aligned to the centered content column. ── */
.pa-topbar{position:sticky;top:0;z-index:20;padding:12px 0;}
.pa-topbar__inner{max-width:640px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;}
.pa-topbar__brand{min-width:0;text-decoration:none;color:inherit;display:block;}
a.pa-topbar__brand{cursor:pointer;}
a.pa-topbar__brand:hover .pa-topbar__title{opacity:.92;}
@media (min-width:720px){.pa-topbar__inner{max-width:880px;}}

/* Nav lives inside the header now — plain text+icon links, not the old bar. */
.pa-nav{position:static;background:transparent;border:0;box-shadow:none;max-width:none;margin:0;padding:0;display:flex;align-items:center;gap:12px;width:auto;}
.pa-nav__item{flex:0 0 auto;flex-direction:row;gap:6px;padding:7px 9px;border-radius:8px;color:rgba(255,255,255,.72);font-size:13px;font-weight:500;letter-spacing:0;transition:color .15s;}
.pa-nav__item:hover{color:#fff;}
.pa-nav__item:active{background:rgba(255,255,255,.08);}
.pa-nav__item.is-active{color:var(--pa-gold);font-weight:600;box-shadow:inset 0 -2px 0 var(--pa-gold);border-radius:0;}
.pa-nav__item:focus-visible{outline:2px solid var(--pa-gold);outline-offset:2px;}
.pa-nav__ico svg{width:18px;height:18px;}

/* Narrow phones: the nav wraps to its own full-width row beneath the title,
   items spread so tap targets stay large. */
@media (max-width:640px){
  .pa-topbar__brand{flex:1 1 100%;}
  .pa-nav{flex:1 1 100%;justify-content:space-around;gap:4px;}
  .pa-nav__item{padding:9px 8px;}
  .pa-nav__label{display:none;}         /* icons only on phones */
  .pa-nav__ico svg{width:23px;height:23px;}
  .pa-nav__item.is-active{box-shadow:none;}  /* underline reads oddly under a lone icon */
}

/* Help footer now flows at the end of the content — no reserved space needed. */
.pa-app{padding-bottom:0;}

/* ── Fixed help footer (Questions about your booking?) ── */
.pa-help-footer{max-width:640px;margin:0 auto;background:transparent;text-align:center;padding:22px 16px 28px;font-size:12px;color:var(--pa-muted);line-height:1.5;}
.pa-help-footer strong{display:block;font-weight:600;color:var(--pa-ink);margin-bottom:1px;}
.pa-help-footer a{color:var(--pa-teal);font-weight:500;text-decoration:none;}
.pa-help-footer .sep{color:var(--pa-line);margin:0 7px;}
@media (min-width:720px){.pa-help-footer{max-width:880px;}}

/* ── Non-native <select> — shared enhancer (admin/assets/admin-select.js).
   Native <select> stays in the DOM for no-JS submit; JS drives this styled UI. ── */
.eselect{position:relative;display:inline-flex;max-width:100%;vertical-align:middle;}
.eselect--block{display:flex;width:100%;}
.pa-field .eselect,.pa-field .eselect--block{display:flex;width:100%;margin-top:4px;}
.eselect__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}
.eselect__btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:var(--pa-ink);font-family:inherit;font-size:15px;font-weight:500;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.eselect__btn:hover{border-color:var(--pa-teal);}
.eselect.is-open .eselect__btn,.eselect__btn:focus-visible{outline:none;border-color:var(--pa-teal);box-shadow:0 0 0 3px rgba(30,92,107,.12);}
.eselect__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eselect__chevron{flex:0 0 auto;color:var(--pa-muted);transition:transform .18s;}
.eselect.is-open .eselect__chevron{transform:rotate(180deg);}
.eselect__menu{position:fixed;z-index:900;top:-9999px;left:0;min-width:100%;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--pa-line);border-radius:10px;box-shadow:0 10px 30px rgba(16,47,58,.16);max-height:288px;overflow-y:auto;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .14s,transform .14s;}
.eselect.is-open .eselect__menu{opacity:1;transform:translateY(0);pointer-events:auto;}
.eselect__opt{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:6px;font-size:15px;color:var(--pa-ink);cursor:pointer;white-space:nowrap;}
.eselect__opt.is-active{background:var(--pa-cream);}
.eselect__opt.is-selected{color:var(--pa-teal);font-weight:600;}
.eselect__opt[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}

/* ── Underline tab bar (Activities category filter, admin-workspace style) ── */
.pa-tabs{display:flex;gap:20px;overflow-x:auto;border-bottom:1px solid var(--pa-line);margin:0 0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pa-tabs::-webkit-scrollbar{display:none;}
.pa-tab{white-space:nowrap;font:inherit;font-size:14px;font-weight:500;color:var(--pa-muted);background:none;border:0;border-bottom:2px solid transparent;padding:9px 1px;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s;}
.pa-tab:hover{color:var(--pa-ink);}
.pa-tab.is-active{color:var(--pa-teal-d);border-bottom-color:var(--pa-teal-d);}
.pa-tab:focus-visible{outline:2px solid var(--pa-gold);outline-offset:2px;}

/* Category tabs + pager on one row (pager right, compact). */
.pa-tabsrow{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--pa-line);margin:0 0 16px;}
.pa-tabsrow .pa-tabs{border-bottom:0;margin:0;flex:1 1 auto;min-width:0;}
.pa-pager--inline{margin:0 0 0 auto;flex:0 0 auto;gap:8px;}
.pa-pager--inline .pa-pager__btn{width:30px;height:30px;}
.pa-pager--inline .pa-pager__btn svg{width:16px;height:16px;}
.pa-pager--inline .pa-pager__info{font-size:12px;min-width:38px;}

/* ── Two-column form grid (Calendar "Add to plan" + Request forms) ── */
.pa-formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;}
.pa-formgrid .pa-field{margin-bottom:12px;}
.pa-formgrid .pa-field--full{grid-column:1 / -1;}

/* ── Messages — chat area ── */
.pa-chat__thread{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--pa-line);border-radius:14px;padding:14px;margin-bottom:14px;min-height:200px;}
.pa-chat__composer{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--pa-line);border-radius:16px;padding:7px 7px 7px 14px;}
.pa-chat__composer:focus-within{border-color:var(--pa-teal);box-shadow:0 0 0 3px rgba(30,92,107,.12);}
.pa-chat__composer textarea{flex:1;min-width:0;border:0;resize:none;font-family:inherit;font-size:15px;line-height:1.5;padding:8px 0;max-height:120px;background:transparent;color:var(--pa-ink);}
.pa-chat__composer textarea:focus{outline:none;}
.pa-chat__send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--pa-teal-d);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;}
.pa-chat__send:hover{background:var(--pa-teal);}
.pa-chat__send:disabled{opacity:.5;cursor:default;}
.pa-chat__send svg{width:19px;height:19px;}
.pa-chat__composer .bm-status{flex-basis:100%;margin:3px 0 0;font-size:13px;color:var(--pa-muted);}
