/* LCS :: project-specific components shared by public/account/admin surfaces.
   Everything else comes from tokens.css + public.css/admin.css (ReadyVan kit). */

/* ---- logo sizing: the owner-supplied wordmark is wide (340:41, ~8.3:1),
       so heights are tuned per spot to keep the header/nav from crowding ---- */
.logo .rv-logo { height: 1.24rem; }
.site-footer .logo .rv-logo { height: 1.75rem; }
.sidebar .brand .rv-logo { height: 1.5rem; }
.auth-card .brand .rv-logo { height: 1.9rem; }
@media (max-width: 560px) { .logo .rv-logo { height: 1.15rem; } }

/* ---- status pills ---- */
.pill { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .6rem; border-radius:999px;
  font-size:.76rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; border:1px solid transparent; }
.pill.grey    { background: var(--surface-2); color: var(--muted, #6b7280); border-color: var(--line); }
.pill.green   { background: rgba(34,197,94,.13); color: #15803d; }
.pill.blue    { background: rgba(37,99,235,.12); color: #1d4ed8; }
.pill.amber   { background: rgba(245,158,11,.15); color: #b45309; }
.pill.red     { background: rgba(220,38,38,.12); color: #dc2626; }
.pill.accent  { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .pill.green { color:#4ade80; }
:root[data-theme="dark"] .pill.blue  { color:#93c5fd; }
:root[data-theme="dark"] .pill.amber { color:#fcd34d; }
:root[data-theme="dark"] .pill.red   { color:#f87171; }

/* ---- portal (client account) ---- */
.portal-wrap { max-width: 1040px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
.portal-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin: .4rem 0 1.1rem; }
.portal-head h1 { margin: 0; font-size: 1.6rem; }
.portal-nav { display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom: 1.4rem; }
.portal-nav a { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .95rem; border-radius:999px;
  border:1px solid var(--line); background: var(--surface); color: var(--text); font-weight:600; font-size:.9rem; text-decoration:none; }
.portal-nav a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.portal-nav a:hover:not(.on) { border-color: var(--accent-line); }
.pcard { background: var(--surface); border:1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.4rem; margin-bottom: 1.1rem; }
.pcard h2 { margin: 0 0 .8rem; font-size: 1.12rem; }
.pcard h3 { margin: 0 0 .5rem; font-size: 1rem; }

/* Pre-payment agreement: scrollable, readable contract + acknowledgement boxes */
.agreement-scroll { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; background: var(--surface-2, #f6f8fb); font-size: .92rem; line-height: 1.5; }
.agreement-scroll:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lcs-agreement h4 { margin: 1rem 0 .35rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.lcs-agreement h4:first-child { margin-top: 0; }
.lcs-agreement p { margin: 0 0 .55rem; }
.lcs-agreement-table { width: 100%; border-collapse: collapse; margin: .3rem 0 .2rem; }
.lcs-agreement-table th, .lcs-agreement-table td { padding: .4rem .6rem; border: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.lcs-agreement-table th { background: var(--surface); width: 42%; font-weight: 600; color: var(--muted); }
.agreement-acks { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 .3rem; }
.agreement-acks .ack { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-weight: 500; }
.agreement-acks .ack input { width: 18px; height: 18px; margin: .1rem 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.agreement-lock { margin-top: .4rem; }
.pay-btn[disabled], .pay-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
@media (max-width: 620px) { .lcs-agreement-table th { width: 44%; } }
.kv { width:100%; border-collapse: collapse; font-size:.93rem; }
.kv td { padding:.42rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.kv td:first-child { color: var(--muted); width: 42%; padding-right: 1rem; }
.kv tr:last-child td { border-bottom: 0; }

/* onboarding checklist */
.check-list { list-style:none; margin:0; padding:0; }
.check-list li { display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--line-soft); }
.check-list li:last-child { border-bottom:0; }
.check-list .st { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:none;
  background: var(--surface-2); color: var(--muted); border:1px solid var(--line); }
.check-list li.done .st { background: rgba(34,197,94,.15); color:#15803d; border-color: transparent; }
.check-list li a { margin-left:auto; }

/* ---- booking wizard (account/book) ---- */
.bw-steps { display:flex; gap:.4rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.bw-steps span { padding:.34rem .8rem; border-radius:999px; font-size:.8rem; font-weight:700; background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
.bw-steps span.on { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.bw-steps span.done { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.bw-steps span.clickable { cursor:pointer; transition:border-color .12s, background .12s; }
.bw-steps span.clickable:hover { border-color: var(--accent); color: var(--accent); }

/* wizard action row: the primary action is prominent; on phones it goes full
   width and sits on top, with Back beneath it (nothing floats over it now). */
.bw-actions { display:flex; gap:.6rem; margin-top:1.1rem; align-items:center; }
.bw-actions .btn { min-height:46px; }
@media (max-width:560px){
  /* even 2x2 grid so the step labels line up instead of wrapping ragged */
  .bw-steps { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .bw-steps span { text-align:center; }
  .bw-actions { flex-direction:column-reverse; gap:.55rem; }
  .bw-actions .btn { width:100%; justify-content:center; }
}

/* live booking summary (also the "edit a previous step" control) */
.bw-summary { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; margin-bottom:1.15rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.bw-sum-row { display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; border-bottom:1px solid var(--line-soft); }
.bw-sum-row:last-child { border-bottom:0; }
.bw-sum-ic { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:9px;
  background:var(--accent-soft); color:var(--accent); flex:none; }
.bw-sum-body { display:flex; flex-direction:column; min-width:0; flex:1; }
.bw-sum-lbl { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.bw-sum-val { font-weight:600; font-size:.92rem; color:var(--text); word-break:break-word; }
.bw-sum-edit { border:0; background:none; color:var(--accent); font-weight:600; font-size:.82rem; cursor:pointer;
  padding:.25rem .5rem; border-radius:8px; flex:none; }
.bw-sum-edit:hover { background:var(--accent-soft); }

/* selectable choice cards (collection step). NB: these are <label>s inside
   .pform, and `.pform label { display:block }` is more specific than a bare
   `.bw-choice`, so we must qualify the selector or the radio stacks above the
   text instead of sitting inline beside it. */
.pform label.bw-choice, .bw-choice { display:flex; align-items:flex-start; gap:.7rem; border:1.5px solid var(--line);
  border-radius:13px; margin-bottom:0;
  padding:.85rem 1rem; margin-top:.55rem; cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s; }
.bw-choice:hover { border-color: var(--accent-line); }
.bw-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--accent-soft); }
.bw-choice input { margin-top:.2rem; flex:none; accent-color: var(--accent); width:1.05rem; height:1.05rem; }
.bw-choice-body { display:flex; flex-direction:column; gap:.15rem; }
.bw-choice-title { font-weight:700; font-size:.96rem; }
.bw-choice-sub { color:var(--muted); font-size:.85rem; line-height:1.4; }

/* WhatsApp collection callout */
.wa-callout { border:1.5px solid #25d366; background:rgba(37,211,102,.08); border-radius:14px; padding:1rem 1.1rem; }
.wa-callout h4 { margin:0 0 .35rem; font-size:1rem; display:flex; align-items:center; gap:.4rem; }
.wa-callout p { margin:.2rem 0 .85rem; color:var(--muted); font-size:.9rem; line-height:1.55; }
.btn-wa { display:inline-flex; align-items:center; gap:.5rem; background:#25d366; color:#04310f; font-weight:700;
  border:0; border-radius:10px; padding:.62rem 1.05rem; text-decoration:none; transition:background .15s, transform .05s; }
.btn-wa:hover { background:#1fbe5b; }
.btn-wa:active { transform: translateY(1px); }
:root[data-theme="dark"] .wa-callout { background:rgba(37,211,102,.1); }
.unit-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .9rem; }
.unit-card { position:relative; border:1.5px solid var(--line); border-radius:14px; padding:1rem 1.05rem; background:var(--surface); cursor:pointer; transition: border-color .15s, box-shadow .15s; }
.unit-card:hover { border-color: var(--accent-line); }
.unit-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.unit-card.off { opacity:.55; cursor:not-allowed; }
.unit-card .sz { font-weight:800; font-size:1.06rem; }
.unit-card .pr { font-weight:800; color:var(--accent); font-size:1.15rem; margin-top:.35rem; }
.unit-card .pr small { color: var(--muted); font-weight:600; font-size:.72em; }
.unit-card .meta { color:var(--muted); font-size:.82rem; margin-top:.2rem; line-height:1.45; }
.unit-card .avail { margin-top:.5rem; }

/* availability banner: unmistakable red when full (spec requirement) */
.avail-none { background: rgba(220,38,38,.1); border: 1.5px solid #dc2626; color: #b91c1c; border-radius: 12px;
  padding: .9rem 1.1rem; font-weight: 700; display:flex; gap:.6rem; align-items:flex-start; margin: .9rem 0; }
:root[data-theme="dark"] .avail-none { color: #fca5a5; }
.avail-ok { background: rgba(34,197,94,.1); border: 1.5px solid rgba(34,197,94,.5); color: #15803d; border-radius: 12px;
  padding: .9rem 1.1rem; font-weight: 700; display:flex; gap:.6rem; align-items:center; margin: .9rem 0; }
:root[data-theme="dark"] .avail-ok { color: #86efac; }

.price-lines { width:100%; border-collapse:collapse; font-size:.94rem; }
.price-lines td { padding:.45rem 0; border-bottom:1px solid var(--line-soft); }
.price-lines td:last-child { text-align:right; font-weight:700; white-space:nowrap; }
/* a note spanning the whole row (not an amount): wraps, reads left to right */
.price-lines td[colspan] { text-align:left; white-space:normal; line-height:1.5; }
.price-lines tr.total td { border-bottom:0; border-top:2px solid var(--line); font-weight:800; font-size:1.05rem; padding-top:.7rem; }

/* documents */
.doc-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:.9rem; }
.doc-tile { border:1px solid var(--line); border-radius:12px; padding: .85rem .95rem; background:var(--surface); }
.doc-tile .nm { font-weight:700; font-size:.9rem; word-break:break-word; }
.doc-tile .mt { color:var(--muted); font-size:.78rem; margin:.25rem 0 .5rem; }
.drop { border:2px dashed var(--accent-line); border-radius:14px; padding:1.4rem; text-align:center; color:var(--muted);
  background: var(--accent-soft); cursor:pointer; }
.drop:hover { border-color: var(--accent); }
.drop input { display:none; }

/* ID uploader (public booking, step 4) */
.id-drop { position:relative; display:flex; flex-direction:column; align-items:center; gap:.55rem;
  border:1.5px solid var(--accent-line); border-radius:var(--r-lg); padding:1.6rem 1.2rem; text-align:center;
  background:var(--accent-soft); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; }
.id-drop:hover, .id-drop:focus-within { border-color:var(--accent); box-shadow:0 6px 20px rgba(15,23,42,.07); }
.id-drop.drag { border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft); }
.id-drop input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.id-drop-empty { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.id-drop-ic { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:50%; background:var(--surface); color:var(--accent); border:1px solid var(--accent-line); }
.id-drop-ic.ok { color:#16a34a; border-color:#bbf7d0; background:#f0fdf4; }
.id-drop-title { font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--text); }
.id-drop-sub { color:var(--muted); font-size:.85rem; }
.id-drop-formats { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-top:.1rem; }
.id-drop-formats .fmt { font-size:.68rem; font-weight:700; letter-spacing:.03em; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:.14rem .42rem; }
.id-drop-formats .id-drop-max { font-size:.78rem; font-weight:500; color:var(--muted); letter-spacing:0;
  background:none; border:0; padding:0 0 0 .15rem; }
.id-drop-picked { display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.id-drop-file { font-weight:700; font-size:.92rem; color:var(--text); word-break:break-word; max-width:100%; }
.id-drop-change { font-size:.8rem; color:var(--accent); font-weight:600; }

/* container occupancy board (admin) */
.cont-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(248px,1fr)); gap:.85rem; }
.cont-card { border:1px solid var(--line); border-left-width:5px; border-radius:12px; padding:.8rem .95rem; background:var(--surface); display:flex; flex-direction:column; min-width:0; }
.cont-card.available { border-left-color:#22c55e; }
.cont-card.occupied  { border-left-color: var(--accent); }
.cont-card.reserved  { border-left-color:#f59e0b; }
.cont-card.inactive  { border-left-color:#9ca3af; opacity:.62; }
.cont-card .cc { font-weight:800; font-size:1.02rem; display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; min-width:0; }
.cont-card .cc-id { min-width:0; display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.cont-card .cc-unit { font-weight:600; font-size:.72em; white-space:nowrap; }
.cont-card .cc-right { display:flex; align-items:center; gap:.35rem; flex:0 0 auto; }
.cont-card .cc-edit-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--muted); cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.cont-card .cc-edit-btn:hover { background:var(--surface-2); color:var(--text); border-color:var(--accent); }
.cont-card .who { margin-top:.35rem; font-size:.86rem; }
.cont-card .dates { color:var(--muted); font-size:.8rem; margin-top:.15rem; }
.cont-card .cc-actions { display:flex; gap:.4rem; margin-top:auto; padding-top:.7rem; }
.cont-card .cc-actions .btn { flex:1 1 0; justify-content:center; white-space:nowrap; padding-left:.5rem; padding-right:.5rem; }
.cont-card .cc-toggle.cc-on { color:var(--green); }

/* container PICKER (manual placement + sharing) */
.lcs-picker { display:block; }
.lp-bar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.6rem; }
.lp-auto { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .7rem; border-radius:10px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--text); font-weight:700; font-size:.85rem; cursor:pointer; }
.lp-auto .lp-dot { width:.6rem; height:.6rem; border-radius:50%; background:#22c55e; flex:none; }
.lp-auto.is-sel { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--accent-soft); color:var(--accent); }
.lp-showall { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--muted); font-weight:600; }
.lp-showall input { accent-color:var(--accent); }
.lp-win { margin-left:auto; font-size:.78rem; color:var(--muted); font-weight:600; }
.lp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:.55rem; max-height:340px; overflow:auto; padding:.15rem; }
.lp-card { text-align:left; border:1.5px solid var(--line); border-left-width:5px; border-radius:11px; padding:.55rem .65rem;
  background:var(--surface); cursor:pointer; transition:border-color .12s, box-shadow .12s; color:var(--text); font:inherit; }
.lp-card.is-free { border-left-color:#22c55e; }
.lp-card.is-occ  { border-left-color:#f59e0b; }
.lp-card:hover { border-color:var(--accent-line); }
.lp-card.is-sel { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.lp-card.is-other { opacity:.6; }
.lp-code { font-weight:800; font-size:.98rem; display:flex; align-items:center; gap:.4rem; }
.lp-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; height:1.15rem; padding:0 .3rem;
  border-radius:999px; background:rgba(245,158,11,.18); color:#b45309; font-size:.72rem; font-weight:800; }
:root[data-theme="dark"] .lp-badge { color:#fcd34d; }
.lp-size { color:var(--muted); font-size:.76rem; font-weight:600; margin-top:.1rem; }
.lp-free-lbl { color:#15803d; font-size:.8rem; font-weight:700; margin-top:.3rem; }
:root[data-theme="dark"] .lp-free-lbl { color:#4ade80; }
.lp-occ { margin-top:.3rem; display:flex; flex-direction:column; gap:.15rem; }
.lp-who { font-size:.8rem; font-weight:600; line-height:1.25; }
.lp-por { color:var(--accent); font-weight:600; font-size:.9em; }
.lp-empty, .lp-loading { grid-column:1/-1; color:var(--muted); font-size:.85rem; padding:.9rem; text-align:center; }
.lp-portion { margin-top:.7rem; }
.lp-portion .lp-plabel { display:block; font-size:.82rem; font-weight:600; margin-bottom:.25rem; color:var(--muted); }
.lp-pinput { width:100%; }

/* simple timeline (customer history) */
.tl { list-style:none; margin:0; padding:0; }
.tl li { position:relative; padding: 0 0 .95rem 1.35rem; border-left:2px solid var(--line); margin-left:.4rem; }
.tl li:last-child { padding-bottom:.1rem; }
.tl li::before { content:""; position:absolute; left:-6px; top:.28rem; width:10px; height:10px; border-radius:50%;
  background: var(--accent); }
.tl .when { color:var(--muted); font-size:.78rem; }
.tl .what { font-size:.9rem; }

/* auth pages reuse .auth-card from admin.css but on the public surface */
.public .auth-page { min-height: 62vh; display:flex; align-items:center; justify-content:center; padding: 2.5rem 1rem; }
.public .auth-card { width:min(430px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.8rem 1.7rem; }
.public .auth-card .field { margin-bottom: 1rem; }
.public .auth-card label { display:block; font-weight:700; font-size:.86rem; margin-bottom:.3rem; }
.public .auth-card input[type=email], .public .auth-card input[type=password], .public .auth-card input[type=text], .public .auth-card input[type=tel] {
  width:100%; padding:.68rem .8rem; border:1.5px solid var(--line); border-radius:10px; background:var(--base); color:var(--text); font:inherit; font-size:16px; }
.public .auth-card input:focus { outline:none; border-color: var(--accent); }
.public .field-err { color:#dc2626; font-size:.82rem; margin-top:.25rem; }
.public .form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap: 0 .8rem; }
@media (max-width:560px){ .public .form-grid-2 { grid-template-columns:1fr; } }

/* generic wide-form on portal pages */
.pform .field { margin-bottom: .95rem; }
.pform label { display:block; font-weight:700; font-size:.86rem; margin-bottom:.3rem; }
.pform input[type=text], .pform input[type=email], .pform input[type=tel], .pform input[type=date], .pform input[type=password], .pform select, .pform textarea {
  width:100%; padding:.65rem .8rem; border:1.5px solid var(--line); border-radius:10px; background:var(--base); color:var(--text); font:inherit; font-size:16px; }
.pform input:focus, .pform select:focus, .pform textarea:focus { outline:none; border-color: var(--accent); }

/* MOBILE ONLY: on a real iPhone, <input type=date> uses the native iOS control
   which floats the value out of the box (inherited line-height 1.6 + the value
   sitting in a centred ::-webkit-date-and-time-value shadow node). Normalise it
   so the date reads neatly left-aligned and vertically centred inside the box,
   exactly like the other fields. Desktop is deliberately left as-is. */
@media (max-width:560px){
  .pform input[type=date]{
    -webkit-appearance:none; appearance:none;   /* drop the native iOS box that floats the value */
    line-height:normal; min-height:2.95rem;     /* stable height; the control centres the value */
  }
  .pform input[type=date]::-webkit-date-and-time-value{
    text-align:left; margin:0; padding:0;        /* iOS otherwise centres/misaligns the date text */
  }
}

.pform .chk { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; }
.pform .chk input { width:auto; margin-top:.2rem; }

/* admin: activity table meta */
.meta-json { color: var(--muted); font-size:.78rem; word-break: break-word; }

/* ---------------------------------------------------------------- storage-units: size cards */
/* equal-height cards with the CTA pinned to a shared baseline */
.size-cards .size-card { display: flex; flex-direction: column; }
.size-card .size-card-meta { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .5rem; }
.size-card .size-card-fit { margin-bottom: .7rem; }
.size-card .size-card-price {
  font-size: 1.5rem; font-weight: 800; color: var(--accent);
  line-height: 1; margin: .1rem 0 1rem;
}
.size-card .size-card-price span { font-size: .8rem; color: var(--muted); font-weight: 600; margin-left: .15rem; }
.size-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------- storage-units: sizing guide */
.size-guide { display: grid; gap: .7rem; max-width: 920px; margin: 0 auto; }
.size-row {
  display: grid; grid-template-columns: 170px 1fr auto; align-items: center;
  gap: .4rem 1.4rem;
  padding: 1.05rem 1.3rem; text-decoration: none; color: inherit;
  background: var(--base); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.size-row:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.size-row-name { display: flex; flex-direction: column; gap: .18rem; }
.size-row-label { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--text); line-height: 1.05; }
.size-row-meta { font-size: var(--fs-sm); color: var(--accent); font-weight: 700; }
.size-row-body { min-width: 0; }
.size-bar { height: 9px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; margin-bottom: .55rem; }
.size-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-press));
}
.size-row-fits { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.size-row-go {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  color: var(--accent); background: var(--accent-soft); flex: none;
  transition: transform .16s ease;
}
.size-row:hover .size-row-go { transform: translateX(3px); }
@media (max-width: 640px) {
  .size-row { grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: 1rem 1.1rem; }
  .size-row-body { grid-column: 1 / -1; }
}

/* --------------------------------------------------- locations page ------ */
.loc-panel {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: center;
}
.loc-panel + .loc-panel {
  margin-top: clamp(2.4rem, 6vw, 4rem);
  padding-top: clamp(2.4rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
}
.loc-map {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 3; background: var(--surface-2); line-height: 0;
}
.loc-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.loc-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.night .loc-map iframe { filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9); }
.loc-name { display: flex; align-items: center; gap: .55rem; margin-bottom: .1rem; }
.loc-name svg { color: var(--accent); flex: none; }
.loc-addr { color: var(--muted); font-size: 1.05rem; margin: .35rem 0 1.2rem; }
.loc-points { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .65rem; }
.loc-points li { display: flex; gap: .6rem; align-items: flex-start; color: var(--text); font-size: var(--fs-sm); }
.loc-points li svg { color: var(--accent); flex: none; margin-top: .12rem; }
.loc-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 820px) {
  .loc-panel { grid-template-columns: 1fr; gap: 1.4rem; }
  .loc-map { order: -1; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------- contact page */
/* two-column shell: contact methods on the left, message form on the right */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-methods { display: grid; gap: .9rem; }
/* tappable contact row: solid accent icon tile + label/value, hover lift like svc-card */
.contact-method {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem; color: var(--text); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.contact-method:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.contact-method .ic {
  width: 48px; height: 48px; border-radius: 13px; flex: none;
  background: var(--accent); color: var(--accent-ink, #fff);
  display: grid; place-items: center; box-shadow: 0 6px 16px -6px var(--accent-line);
}
.contact-method .ic svg { width: 22px; height: 22px; stroke-width: 2; }
.contact-method .cm-txt { min-width: 0; }
.contact-method .cm-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.contact-method .cm-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.3; word-break: break-word; }
a.contact-method:hover .cm-value { color: var(--accent); }
.contact-method .cm-value small { display: block; font-weight: 600; font-size: .82rem; color: var(--muted); letter-spacing: 0; }

/* the message form card matches the pcard look but gets a touch more presence */
.contact-form.pcard { padding: clamp(1.4rem, 3vw, 1.9rem); box-shadow: var(--shadow-1); }
.contact-form h2 { font-size: 1.25rem; letter-spacing: -.01em; }
.contact-form .form-intro { color: var(--muted); font-size: var(--fs-sm); margin: -.3rem 0 1.2rem; }
.contact-form button[type=submit] { margin-top: .3rem; }

/* ---------------------------------------------------------- admin: locations */
.loc-list { display: flex; flex-direction: column; gap: 1rem; }
.loc-row { display: flex; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; }
.loc-row.off { opacity: .68; }
.loc-photo { position: relative; flex: 0 0 190px; height: 132px; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.loc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-photo .ph { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--muted); font-size: .74rem; text-align: center; }
.loc-photo .cam { position: absolute; right: .4rem; bottom: .4rem; background: rgba(0,0,0,.58); color: #fff; border-radius: 8px; padding: .22rem .5rem; font-size: .7rem; display: inline-flex; gap: .28rem; align-items: center; }
.loc-photo input { display: none; }
.loc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.loc-top { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.loc-title { display: flex; align-items: center; gap: .45rem; font-size: 1.1rem; font-weight: 700; margin: 0; }
.loc-metaline { color: var(--muted); font-size: .85rem; margin: 0; }
.loc-inv { display: flex; flex-wrap: wrap; gap: .4rem; }
.inv-chip { display: inline-flex; align-items: baseline; gap: .38rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .26rem .62rem; font-size: .8rem; white-space: nowrap; }
.inv-chip b { font-weight: 700; }
.inv-chip .free { color: var(--green); font-weight: 600; }
.inv-chip .full { color: var(--muted); }
.loc-actions2 { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .1rem; }
@media (max-width: 640px) {
  .loc-row { flex-direction: column; }
  .loc-photo { flex-basis: auto; width: 100%; height: 150px; }
}

/* ---- admin: containers board, location header ---- */
.cont-locbar { display: flex; align-items: center; gap: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .7rem .9rem; margin: 1.4rem 0 .8rem; }
.cont-locbar.first { margin-top: 0; }
.cont-locbar .thumb { flex: 0 0 84px; height: 58px; border-radius: 9px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cont-locbar .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cont-locbar .lb-name { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.cont-locbar .lb-sub { color: var(--muted); font-size: .82rem; }
.cont-locbar .lb-counts { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .cont-locbar { flex-wrap: wrap; } .cont-locbar .lb-counts { margin-left: 0; width: 100%; } }

/* ---- topbar omnisearch dropdown ---- */
.omni-results {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); overflow: hidden; max-height: min(70vh, 460px); overflow-y: auto;
}
.omni-results .omni-group {
  padding: .5rem .85rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.omni-results .omni-item {
  display: block; padding: .5rem .85rem; text-decoration: none; color: var(--text); cursor: pointer;
  border-left: 3px solid transparent;
}
.omni-results .omni-item.on, .omni-results .omni-item:hover { background: var(--accent-soft); border-left-color: var(--accent); }
.omni-results .omni-label { display: block; font-weight: 600; font-size: .92rem; }
.omni-results .omni-sub { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }
.omni-results .omni-tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .05rem .4rem; margin-left: .3rem;
}
.omni-results .omni-empty { padding: .8rem .85rem; color: var(--muted); font-size: .88rem; }

/* Add-payment client picker (lightweight autocomplete inside the rvmodal) */
.rv-ac {
  margin-top: .35rem; border: 1px solid var(--line); border-radius: var(--r-md, 10px);
  background: var(--surface); box-shadow: var(--shadow-2, 0 8px 24px rgba(0, 0, 0, .12));
  max-height: 240px; overflow-y: auto; overflow-x: hidden;
}
.rv-ac-item {
  display: flex; flex-direction: column; gap: .1rem; width: 100%; text-align: left;
  padding: .5rem .7rem; background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; color: var(--text); font: inherit;
}
.rv-ac-item:last-child { border-bottom: 0; }
.rv-ac-item:hover { background: var(--surface-2); }
.rv-ac-item span { font-size: .8rem; color: var(--muted); }
.rv-ac-empty { padding: .6rem .7rem; color: var(--muted); font-size: .88rem; }

/* Payments page polish */
.tile-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.tile-link:hover { border-color: var(--accent-line, var(--accent)); transform: translateY(-2px); box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.10)); }
.tile-link .sub { display: inline-flex; align-items: center; gap: .3rem; }
.tile-link .sub svg { opacity: .8; }
/* count badge inside the segmented payment tabs */
.pay-tabs .pay-n {
  font-size: var(--fs-xs, .72rem); font-weight: 800; line-height: 1; padding: .12rem .4rem;
  border-radius: 999px; background: var(--surface); color: var(--muted); border: 1px solid var(--line);
}
.pay-tabs a.on .pay-n { background: rgba(255,255,255,.22); color: var(--accent-ink, #fff); border-color: transparent; }
.pay-tabs svg { flex: none; }
/* search field with a leading icon (payments filter) */
#paySearch { min-height: 40px; }
.toolbar .grow > svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

/* ===== Legal + cookie consent (8 Oct 2026; includes/legal.php, public-footer.php) ===== */
.footer-legal { margin: 0 0 1.4rem; max-width: 70rem; }
.footer-linkbtn {
  display: block; padding: 0; margin: 0 0 .55rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--night-muted); text-align: left;
}
.footer-linkbtn:hover { color: #fff; }

/* banner: floating card bottom-left on desktop, full-width sheet on phones */
.ck-banner {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 70;
  width: min(460px, calc(100vw - 2.5rem)); max-height: calc(100vh - 2.5rem); overflow-y: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: 1.25rem 1.3rem 1.15rem;
}
.ck-banner[hidden] { display: none; }
.ck-title { font-size: 1.08rem; margin: 0 0 .45rem; outline: none; }
.ck-text { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin: 0; }
.ck-text a { color: var(--accent); font-weight: 600; }
.ck-prefs { margin-top: .9rem; border-top: 1px solid var(--line); }
.ck-prefs[hidden] { display: none; }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.ck-row b { display: block; font-size: .92rem; }
.ck-row span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.45; margin-top: .1rem; }
.ck-always { flex: none; font-size: .74rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green) !important; }
.ck-switch {
  flex: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 46px; height: 26px; border-radius: 999px; position: relative; margin: 0;
  background: var(--line); border: 1px solid var(--line); transition: background .15s, border-color .15s;
}
.ck-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-1); transition: transform .15s;
}
.ck-switch:checked { background: var(--accent); border-color: var(--accent); }
.ck-switch:checked::after { transform: translateX(20px); }
.ck-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1rem; }
.ck-actions .btn { flex: 1 1 auto; justify-content: center; }
.ck-actions .btn[hidden] { display: none; }
.ck-manage {
  flex: 1 1 100%; border: 0; background: none; padding: .35rem 0 0; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.ck-manage[hidden] { display: none; }
@media (max-width: 740px) {
  .ck-banner {
    left: 0; right: 0; bottom: 0; width: auto; max-height: 85vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
    padding: 1.15rem var(--gap) calc(1rem + env(safe-area-inset-bottom));
  }
  /* while the banner is up, it replaces the sticky Book bar */
  body.ck-showing .mobile-cta { display: none !important; }
}

/* a third-party embed waiting for consent (Google Maps on /locations) */
.ck-embed {
  width: 100%; height: 100%; min-height: 260px; display: grid; place-items: center; text-align: center;
  padding: 1.4rem; background: var(--surface-2, var(--surface)); color: var(--muted);
}
.ck-embed > div { max-width: 320px; }
.ck-embed svg { color: var(--accent); }
.ck-embed p { font-size: var(--fs-sm); line-height: 1.5; margin: .5rem 0 .9rem; }
.ck-embed a { color: var(--accent); font-weight: 600; }

/* the Direct Debit Guarantee box (lcs_dd_guarantee_html) */
.dd-guarantee { margin-top: 1.1rem; padding: .95rem 1rem; border: 1px solid var(--line); border-radius: var(--r, 14px); background: var(--surface-2, var(--surface)); }
.dd-guarantee summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; }
.dd-guarantee summary::-webkit-details-marker { display: none; }
.dd-guarantee-ic { color: var(--green); flex: none; display: inline-flex; }
.dd-guarantee b { font-size: .95rem; }
.dd-guarantee p { margin: .6rem 0 0; font-size: .86rem; color: var(--muted); line-height: 1.55; }
.dd-guarantee ul { margin: .35rem 0 0; padding-left: 1.15rem; font-size: .86rem; color: var(--muted); line-height: 1.55; }
.dd-guarantee li { margin: .3rem 0; }
.price-final { display: flex; gap: .45rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.price-final svg { color: var(--green); flex: none; margin-top: .15rem; }