/* AB Coastal pickers: look of the custom dropdown, calendar and time menus (see assets/js/pickers.js).
   Colours come from the page's own tokens (portal / admin: --surface, --text, --action … ; website: --ink, --leaf …),
   so one stylesheet fits all three and follows light / dark automatically. */
:root{
  --pk-bg:var(--surface,#fff);
  --pk-bg2:var(--surface-2,var(--mist,#EAF3DF));
  --pk-fg:var(--text,var(--ink,#1E2B24));
  --pk-muted:var(--muted,#6B7A70);
  --pk-line:var(--line-strong,var(--line,#C9D8BC));
  --pk-soft:var(--line,#DCE6D2);
  --pk-accent:var(--action,var(--leaf,#7CC313));
  --pk-on:var(--on-action,var(--ink,#1E2B24));
  --pk-ink:var(--action-text,var(--forest,#2C6A03));
  --pk-focus:var(--wave,#2A9AD8);
  --pk-font:var(--font,var(--font-body,'Plus Jakarta Sans',system-ui,sans-serif));
}

/* the real control stays in the page, invisible, so forms and scripts keep working */
.pk-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important}

.pk-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 14px;border:1.5px solid var(--pk-line);border-radius:12px;background:var(--pk-bg);color:var(--pk-fg);font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-tap-highlight-color:transparent}
.pk-trigger[hidden]{display:none}
.pk-trigger:hover:not(:disabled){border-color:var(--pk-ink)}
.pk-trigger:focus-visible,.pk-trigger[aria-expanded=true]{outline:0;border-color:var(--pk-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--pk-focus) 24%,transparent)}
.pk-trigger:disabled{opacity:.55;cursor:not-allowed}
.pk-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-ph .pk-val{color:var(--pk-muted)}
.pk-ic,.pk-chev{display:grid;place-items:center;flex:none;color:var(--pk-muted)}
.pk-ic svg,.pk-chev{width:18px;height:18px}
.pk-trigger[aria-expanded=true] .pk-chev{transform:rotate(180deg);color:var(--pk-fg)}
.pk-chev{transition:transform .2s}
.pk-trigger[aria-expanded=true] .pk-ic{color:var(--pk-ink)}

/* the menu */
.pk-pop{position:fixed;z-index:2000;box-sizing:border-box;background:var(--pk-bg);color:var(--pk-fg);border:1px solid var(--pk-line);border-radius:16px;box-shadow:0 28px 64px -20px rgba(8,18,12,.5),0 3px 8px rgba(8,18,12,.12);font-family:var(--pk-font);font-size:15px;line-height:1.35;animation:pk-in .14s ease-out;overflow:hidden;max-width:calc(100vw - 16px)}
.pk-pop *{box-sizing:border-box}
.pk-list{max-height:min(320px,52vh);overflow-y:auto;overflow-x:hidden;padding:6px;scrollbar-width:thin;scrollbar-color:var(--pk-line) transparent;overscroll-behavior:contain}
.pk-list::-webkit-scrollbar{width:8px;height:8px}.pk-list::-webkit-scrollbar-track{background:transparent}.pk-list::-webkit-scrollbar-thumb{background:var(--pk-line);border-radius:8px;border:2px solid var(--pk-bg);min-height:32px}
.pk-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:9px 12px;border-radius:10px;cursor:pointer;color:var(--pk-fg)}
.pk-opt+.pk-opt{margin-top:2px}
.pk-opt:hover,.pk-opt:focus{background:var(--pk-bg2);outline:0}
.pk-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--pk-focus)}
.pk-opt[aria-selected=true]{font-weight:700;background:var(--pk-bg2)}
.pk-opt.pk-empty{color:var(--pk-muted)}
.pk-opt[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.pk-tick{width:18px;height:18px;flex:none;color:var(--pk-ink);opacity:0}
.pk-opt[aria-selected=true] .pk-tick{opacity:1}
.pk-grp{padding:10px 12px 4px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--pk-muted)}

/* calendar */
.pk-cal{width:312px;padding:14px 14px 12px}
.pk-cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pk-cal-h strong{font-size:16px;font-weight:800;letter-spacing:-.01em}
.pk-nav{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--pk-soft);background:var(--pk-bg);color:var(--pk-fg);cursor:pointer;padding:0}
.pk-nav svg{width:18px;height:18px}
.pk-nav:hover:not(:disabled){background:var(--pk-bg2)}
.pk-nav:disabled{opacity:.3;cursor:not-allowed}
.pk-nav:focus-visible,.pk-day:focus-visible,.pk-link:focus-visible,.pk-x:focus-visible{outline:2px solid var(--pk-focus);outline-offset:1px}
.pk-cal-w,.pk-cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.pk-cal-w span{text-align:center;font-size:12px;font-weight:700;color:var(--pk-muted);padding:6px 0}
.pk-day{aspect-ratio:1;min-height:38px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:var(--pk-fg);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;padding:0;position:relative}
.pk-day.out{visibility:hidden}
.pk-day:hover:not(:disabled):not([aria-pressed=true]){background:var(--pk-bg2)}
.pk-day.today{box-shadow:inset 0 0 0 1.5px var(--pk-ink);color:var(--pk-ink);font-weight:800}
.pk-day[aria-pressed=true]{background:var(--pk-accent);color:var(--pk-on);font-weight:800;box-shadow:none}
.pk-day:disabled{color:var(--pk-muted);opacity:.38;cursor:not-allowed;text-decoration:none}
.pk-cal-f{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:8px;border-top:1px solid var(--pk-soft)}
.pk-link{border:0;background:none;color:var(--pk-ink);font:inherit;font-size:14px;font-weight:700;padding:8px 10px;border-radius:8px;cursor:pointer}
.pk-link:hover:not(:disabled){background:var(--pk-bg2)}
.pk-link:disabled{opacity:.4;cursor:not-allowed}
.pk-link[hidden]{display:none}
/* the same calendar placed straight on the page (used for rescheduling) */
.pk-cal.pk-inline{width:100%;padding:0}
.pk-inline .pk-day{min-height:42px;font-size:15px}

/* phones: menus become a bottom sheet */
.pk-scrim{position:fixed;inset:0;z-index:1999;background:rgba(8,16,11,.55);animation:pk-fade .16s ease-out}
.pk-sheet{left:0;right:0;bottom:0;top:auto;width:auto!important;min-width:0!important;max-width:none;border-radius:22px 22px 0 0;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:pk-up .22s ease-out}
.pk-sh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 16px 8px 20px;position:relative}
.pk-sh b{font-size:16px;font-weight:800}
.pk-grab{position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--pk-line)}
.pk-x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--pk-bg2);color:var(--pk-fg);cursor:pointer;padding:0}
.pk-x svg{width:18px;height:18px}
.pk-sheet .pk-list{max-height:min(60vh,420px);padding:6px 10px 12px}
.pk-sheet .pk-opt{min-height:52px;font-size:16px}
.pk-sheet .pk-cal{width:auto;padding:6px 16px 14px}
.pk-sheet .pk-day{min-height:44px;font-size:16px}
@keyframes pk-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pk-up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@keyframes pk-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pk-pop,.pk-scrim{animation:none!important}.pk-trigger,.pk-chev{transition:none!important}}