/* ==========================================================
   keeplee - Book a call: the Custom Code layout, a language
   choice and a day-and-time picker (book-call.js).
   ========================================================== */
@import url("custom-code.css");

.call-langs { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.call-langs li { display: grid; padding: 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; line-height: 1.25; }
.call-langs strong { color: var(--navy); font-size: 1.1rem; }
.call-langs small { color: var(--muted); font-size: .8rem; }
.call-zone { margin: 16px 0 0; color: var(--muted); font-size: .92rem; }

.call-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.call-form legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .92rem; color: var(--navy); }
.call-form legend span { color: var(--accent-600); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg-soft); font-weight: 600; color: var(--navy); transition: border-color .2s, background .2s; }
.pill small { font-weight: 400; color: var(--muted); }
.pill input:checked + span { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(198,97,63,.14); }
.pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.call-lang.invalid .pill span { border-color: #dc2626; }

/* The picker. The <select> stays for anyone without JavaScript, and is hidden once the picker is up. */
.call-slot.is-picker select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cp-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cp-day { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 10px 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg-soft); color: var(--navy); cursor: pointer; scroll-snap-align: start; font: inherit; transition: border-color .2s, background .2s; }
.cp-day b { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cp-day span { font-weight: 600; white-space: nowrap; }
.cp-day small { font-size: .72rem; color: var(--muted); }
.cp-day[aria-pressed="true"] { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(198,97,63,.14); }
.cp-day[aria-pressed="true"] b { color: var(--accent-600); }
.cp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
.cp-time { padding: 9px 6px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.cp-time:hover, .cp-day:hover { border-color: var(--brand); }
.cp-time[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.cp-day:focus-visible, .cp-time:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cp-chosen { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
.cp-chosen strong { color: var(--navy); }
.call-slot.invalid .cp-times { outline: 1.5px solid #dc2626; outline-offset: 4px; border-radius: 10px; }
.page-call .sf-next { margin-top: 0; }
.page-call .cc-grid { align-items: start; }
.page-call .cc-copy { padding-top: 24px; }
.field .pill span { color: var(--navy); font-size: .95rem; }
.field .pill input:checked + span { color: var(--accent-600); }
/* The day row scrolls inside the form, instead of widening it. */
.call-form > * { min-width: 0; }