/* ═══════════════════════════════════════════════════════════════════════
   CABANA · CHILD POLICY
   cabana-child-policy.css  ·  behaviour: cabana-child-policy.js

   One component, three homes. It borrows the colours of whatever page it
   sits on: the partner studio (--cs-*), the old listing form (--ink,
   --mint-dark), the checkout (--cx-*). Pass theme:'dark' for the tour
   sheet, which is cream on night. Every control is at least 44px tall.
   ═══════════════════════════════════════════════════════════════════════ */
.cpol {
  --cpol-ink: var(--cs-ink, var(--cx-ink, var(--ink, #14161f)));
  --cpol-muted: var(--cs-muted, var(--cx-ink-2, var(--ink-soft, #5d6072)));
  --cpol-faint: var(--cs-faint, var(--cx-ink-3, var(--ink-faint, #8b8ea0)));
  --cpol-line: var(--cs-line-2, var(--cx-line-2, var(--line-2, rgba(20, 22, 31, .16))));
  --cpol-line-soft: var(--cs-line, var(--cx-line, var(--line, rgba(20, 22, 31, .09))));
  --cpol-surface: var(--cs-surface, var(--cx-paper, var(--surface, #fff)));
  --cpol-sunk: var(--cs-surface-2, var(--cx-paper-2, var(--surface-2, #f3f2ee)));
  --cpol-acc: var(--cs-acc, var(--cx-accent, var(--mint-dark, #0f766e)));
  --cpol-acc-soft: var(--cs-acc-soft, rgba(15, 118, 110, .13));
  --cpol-acc-ink: var(--cs-acc-ink, var(--cx-accent-ink, #fff));
  --cpol-ok: var(--cs-ok, var(--cx-good, #0e8a5f));
  --cpol-warn: var(--cs-warn, var(--cx-warn, #b45309));
  --cpol-err: var(--cs-err, var(--cx-bad, #d92d44));
  --cpol-r: 12px;
  font: 400 14px/1.45 var(--cs-font, var(--cx-text, var(--font-body, system-ui, -apple-system, 'Segoe UI', sans-serif)));
  color: var(--cpol-ink);
  text-align: left;
}
.cpol[data-cpol-theme="dark"] {
  --cpol-ink: #fff8ef; --cpol-muted: rgba(255, 248, 239, .74); --cpol-faint: rgba(255, 248, 239, .5);
  --cpol-line: rgba(255, 248, 239, .22); --cpol-line-soft: rgba(255, 248, 239, .12);
  --cpol-surface: rgba(255, 248, 239, .06); --cpol-sunk: rgba(255, 248, 239, .09);
  --cpol-acc: var(--ct-turq, #12e0d0); --cpol-acc-soft: rgba(18, 224, 208, .16); --cpol-acc-ink: #04130f;
  --cpol-ok: #3ee08f; --cpol-warn: #ffb020; --cpol-err: #ff8a7a;
}
/* the admin console keeps its own tokens, dark or light */
.cpol[data-cpol-theme="admin"] {
  --cpol-ink: var(--ink-1); --cpol-muted: var(--ink-3); --cpol-faint: var(--ink-4);
  --cpol-line: var(--line-3); --cpol-line-soft: var(--line-2);
  --cpol-surface: var(--panel-2); --cpol-sunk: var(--panel-3);
  --cpol-acc: var(--brand); --cpol-acc-soft: var(--brand-soft); --cpol-acc-ink: #fff;
  --cpol-ok: var(--ok); --cpol-warn: var(--warn); --cpol-err: var(--bad);
  font-family: var(--f-b);
}
.cpol *, .cpol *::before, .cpol *::after { box-sizing: border-box; }
.cpol [hidden] { display: none !important; }
.cpol button, .cpol select, .cpol input { font: inherit; color: inherit; }

/* the switch row */
.cpol-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cpol-head { padding: 4px 0 14px; }
.cpol-row b, .cpol-pk-row b { display: block; font-weight: 650; font-size: 15px; }
.cpol-row small, .cpol-pk-row small { display: block; color: var(--cpol-muted); font-size: 12.5px; margin-top: 2px; }
.cpol-switch {
  position: relative; flex: none; width: 52px; height: 32px; padding: 0; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--cpol-line); background: var(--cpol-sunk); transition: background .2s, border-color .2s;
}
.cpol-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--cpol-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.cpol-switch[aria-checked="true"] { background: var(--cpol-acc); border-color: var(--cpol-acc); }
.cpol-switch[aria-checked="true"] i { transform: translateX(20px); background: var(--cpol-acc-ink); }
.cpol-switch:focus-visible, .cpol button:focus-visible, .cpol select:focus-visible, .cpol input:focus-visible { outline: 2px solid var(--cpol-acc); outline-offset: 2px; }

/* sections */
.cpol-sec { padding: 16px 0 4px; border-top: 1px solid var(--cpol-line-soft); }
.cpol-sec h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 650; letter-spacing: -.005em; }
.cpol-hint { margin: 0 0 10px; color: var(--cpol-muted); font-size: 13px; }
.cpol-note { margin: 10px 0 0; color: var(--cpol-muted); font-size: 12.5px; }
.cpol-host { display: block; }
.cpol-sub { margin-top: 10px; }

/* stepper */
.cpol-step { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--cpol-line); border-radius: 99px; padding: 3px; background: var(--cpol-surface); }
.cpol-step-b { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--cpol-sunk); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cpol-step-b:disabled { opacity: .35; cursor: not-allowed; }
.cpol-step-b:not(:disabled):active { transform: scale(.94); }
.cpol-step-v { min-width: 74px; padding: 0 10px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpol-pk .cpol-step-v { min-width: 34px; padding: 0 6px; }

/* quick starts */
.cpol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.cpol-chip { min-height: 40px; padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--cpol-line); background: var(--cpol-surface); cursor: pointer; font-size: 13px; font-weight: 550; text-align: left; transition: border-color .15s, background .15s; }
.cpol-chip:hover { border-color: var(--cpol-acc); background: var(--cpol-acc-soft); }

/* bands */
.cpol-price { display: block; }
.cpol-bands { display: grid; gap: 10px; }
.cpol-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--cpol-line-soft); border-radius: var(--cpol-r); background: var(--cpol-sunk); }
.cpol-ages { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.cpol-select, .cpol-val input {
  min-height: 44px; border: 1.5px solid var(--cpol-line); border-radius: 10px; background: var(--cpol-surface); color: var(--cpol-ink); padding: 8px 12px; font-size: 15px;
}
.cpol-select { min-width: 74px; }
.cpol-seg { display: inline-flex; border: 1.5px solid var(--cpol-line); border-radius: 99px; padding: 3px; background: var(--cpol-surface); }
.cpol-seg-b { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 99px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cpol-muted); }
.cpol-seg-b.on { background: var(--cpol-acc); color: var(--cpol-acc-ink); }
.cpol-val { display: inline-flex; align-items: center; gap: 6px; }
.cpol-val input { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.cpol-unit { color: var(--cpol-muted); font-size: 13px; white-space: nowrap; }
.cpol-x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--cpol-faint); font-size: 22px; cursor: pointer; }
.cpol-x:hover { color: var(--cpol-err); background: var(--cpol-surface); }
.cpol-tail { margin: 10px 2px 0; color: var(--cpol-muted); font-size: 13px; }
.cpol-add { margin-top: 10px; min-height: 44px; padding: 8px 16px; border-radius: 99px; border: 1.5px dashed var(--cpol-line); background: transparent; cursor: pointer; font-weight: 600; color: var(--cpol-acc); }
.cpol-add:hover { background: var(--cpol-acc-soft); border-color: var(--cpol-acc); }

/* the occupancy question */
.cpol-radios { display: grid; gap: 8px; }
.cpol-radio { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 14px; min-height: 56px; border: 1.5px solid var(--cpol-line); border-radius: var(--cpol-r); background: var(--cpol-surface); cursor: pointer; transition: border-color .15s, background .15s; }
.cpol-radio i { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--cpol-line); position: relative; }
.cpol-radio b { display: block; font-weight: 650; font-size: 14.5px; }
.cpol-radio small { display: block; color: var(--cpol-muted); font-size: 12.5px; margin-top: 1px; }
.cpol-radio.on { border-color: var(--cpol-acc); background: var(--cpol-acc-soft); }
.cpol-radio.on i { border-color: var(--cpol-acc); }
.cpol-radio.on i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--cpol-acc); }

/* what the guest will see */
.cpol-preview { margin-top: 16px; padding: 14px 16px; border-radius: var(--cpol-r); background: var(--cpol-sunk); border: 1px solid var(--cpol-line-soft); }
.cpol-pv-t { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cpol-muted); margin-bottom: 6px; }
.cpol-preview ul { margin: 0; padding-left: 18px; }
.cpol-preview li { margin: 2px 0; font-size: 13.5px; }
.cpol-pv-bad { margin: 0; color: var(--cpol-err); font-size: 13.5px; }
.cpol-err { margin: 10px 0 0; color: var(--cpol-err); font-size: 13.5px; font-weight: 550; }

/* guest picker */
.cpol-pk { display: grid; gap: 4px; }
.cpol-pk-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; }
.cpol-pk-row + .cpol-pk-row { border-top: 1px solid var(--cpol-line-soft); }
.cpol-kids { display: grid; gap: 8px; margin: 2px 0 4px; }
.cpol-kid { display: grid; grid-template-columns: auto minmax(120px, 160px) 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--cpol-r); background: var(--cpol-sunk); border: 1.5px solid transparent; }
.cpol-kid.bad { border-color: var(--cpol-err); }
.cpol-kid label { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.cpol-tag { justify-self: end; font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 99px; background: transparent; color: var(--cpol-muted); text-align: right; }
.cpol-tag:empty { display: none; }
.cpol-tag.free { background: color-mix(in srgb, var(--cpol-ok) 16%, transparent); color: var(--cpol-ok); }
.cpol-tag.deal { background: color-mix(in srgb, var(--cpol-warn) 16%, transparent); color: var(--cpol-warn); }
.cpol-tag.full { background: var(--cpol-surface); color: var(--cpol-muted); border: 1px solid var(--cpol-line-soft); }
.cpol-occ { margin: 6px 2px 0; font-size: 13px; color: var(--cpol-muted); }
.cpol-occ.bad { color: var(--cpol-err); font-weight: 600; }
.cpol-pk .cpol-hint { margin: 6px 2px 0; }

/* the tags the listing pages show */
.cpol-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--cpol-ok, #0e8a5f) 14%, transparent); color: var(--cpol-ok, #0e8a5f); }
.cpol-policy { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.cpol-policy li { padding-left: 18px; position: relative; }
.cpol-policy li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cpol-acc, #0f766e); }

@media (max-width: 520px) {
  .cpol-kid { grid-template-columns: auto 1fr; }
  .cpol-tag { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .cpol-band { gap: 8px; }
  .cpol-x { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cpol *, .cpol *::before, .cpol *::after { transition: none !important; } }