/* ═══════════════════════════════════════════════════════════════
   BOOKING — only what the form itself needs.

   Everything else comes from the main site's main.css (copied over by
   tools/sync.py), and this file uses its variables: the same blue line,
   the same surface, the same switch in dark mode. The main site has no
   form, so this is the one place where fields and choices get a style.

   Floor: Safari 15 (iPhone 6s). No :has(), no @container, and every
   :focus-visible has a plain :focus fallback before it.

   Flicker: a chosen time does NOT turn solid blue. A change that
   recolours a whole surface reads as a flash to the site's owner; here
   only the frame thickens and the text changes colour, with a
   slow-starting transition.
   ═══════════════════════════════════════════════════════════════ */

.foglalo {
    margin-top: var(--space-4);
}

.foglalo fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.foglalo legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* ── Days and times ─────────────────────────────────────────── */

.foglalo-nap {
    padding: var(--space-2) 0;
    border-top: var(--divider);
}

.foglalo-nap:last-child {
    border-bottom: var(--divider);
}

.foglalo-nap-cim {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    color: var(--fg-sub);
}

.foglalo-savok {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* The radio stays in the tree — a keyboard and a screen reader can
   still choose it —, it is only not drawn; its label is the visible time. */
.foglalo-savok input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.foglalo-savok label {
    display: inline-block;
    min-width: 4.6em;
    /* 44 pixels tall: the size of a fingertip. */
    padding: 0.625rem 0.8rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    background: var(--felulet);
    box-shadow: inset 0 0 0 1px var(--border);
    cursor: pointer;
    transition: box-shadow var(--t-valasz) var(--ease-oda-vissza),
                color var(--t-valasz) var(--ease-oda-vissza);
}

.foglalo-savok label:hover {
    box-shadow: inset 0 0 0 1px var(--szin-szerkezet);
}

.foglalo-savok input:checked + label {
    color: var(--szin-szerkezet-szoveg);
    font-weight: 600;
    box-shadow: inset 0 0 0 var(--vonal-1) var(--szin-szerkezet);
}

.foglalo-savok input:focus + label {
    outline: 2px solid var(--szin-szerkezet);
    outline-offset: 2px;
}

.foglalo-savok input:focus:not(:focus-visible) + label {
    outline: none;
}

/* ── Fields ─────────────────────────────────────────────────── */

.foglalo-mezo {
    max-width: 34rem;
    margin: var(--space-3) 0 0;
}

.foglalo-mezo label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-sm);
    color: var(--fg-sub);
}

/* Below 16 pixels, iOS zooms in on a field when it is tapped. */
.foglalo-mezo input,
.foglalo-mezo select,
.foglalo-mezo textarea,
.foglalo-sor input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.6rem 0.75rem;
    font-family: var(--font);
    font-size: max(16px, 1rem);
    line-height: 1.4;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--fg-muted);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.foglalo-mezo textarea {
    resize: vertical;
}

/* The arrow is two diagonal gradients: it follows the text colour, in dark mode too. */
.foglalo-mezo select {
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
}

.foglalo-mezo input:focus,
.foglalo-mezo select:focus,
.foglalo-mezo textarea:focus,
.foglalo-sor input:focus {
    border-color: var(--szin-szerkezet);
    outline: 2px solid var(--szin-szerkezet);
    outline-offset: 0;
}

/* A trap for bots. Not display:none — bots skip that too. */
.foglalo-csapda {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Buttons ────────────────────────────────────────────────── */

/* On the main site .shift-cta is a link; here it is a button, so the
   browser's own button style has to come off. */
button.shift-cta {
    border: 0;
    border-radius: 0;
    background: transparent;
    font-weight: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.foglalo-kis {
    margin-top: var(--space-2);
    padding: 0.45rem 0.8rem;
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--szin-szerkezet);
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow var(--t-valasz) var(--ease-oda-vissza);
}

.foglalo-kis:hover {
    box-shadow: inset 0 0 0 1px var(--szin-szerkezet);
}

.foglalo-kis:focus {
    outline: 2px solid var(--szin-szerkezet);
    outline-offset: 2px;
}

.foglalo-kis:focus:not(:focus-visible) {
    outline: none;
}

/* ── Messages ───────────────────────────────────────────────── */

.foglalo-hiba,
.foglalo-ures {
    max-width: 40rem;
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + var(--vonal-1));
    background: var(--felulet);
    box-shadow: inset var(--vonal-1) 0 0 var(--szin-kiemeles);
}

.foglalo-ures {
    box-shadow: inset var(--vonal-1) 0 0 var(--szin-szerkezet);
}

.foglalo-adat {
    max-width: 40rem;
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--fg-sub);
}

.foglalo-vissza {
    margin-top: var(--space-3);
}

/* ── Admin ──────────────────────────────────────────────────── */

.foglalo-lista {
    max-width: 44rem;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.foglalo-lista li {
    padding: var(--space-2) 0;
    border-top: var(--divider);
    line-height: 1.6;
}

.foglalo-lista li:last-child {
    border-bottom: var(--divider);
}

.foglalo-lista form {
    margin: 0;
}

.foglalo-het {
    max-width: 34rem;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: var(--divider);
}

.foglalo-sor {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 34rem;
    margin: 0.4rem 0;
}

.foglalo-sor label {
    flex: 0 0 9.5rem;
    font-size: var(--text-sm);
    color: var(--fg-sub);
}

.foglalo-sor input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.6rem;
}

@media (max-width: 30rem) {
    .foglalo-sor {
        display: block;
    }
    .foglalo-sor label {
        display: block;
        margin-bottom: 0.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foglalo-savok label,
    .foglalo-kis {
        transition: none;
    }
}