/*
   Vezetett rogzites (#36, docs/features/onboarding-wizard.md): lepes-indikator,
   lepes-fejlec, gombsor, attekintes-kartyak, chip-lista, folytatas-kartya a
   dashboardon. Csak szemantikus tokenek (DS-BRAND-002), uj primitiv nelkul.
*/

@layer components {
.wizard-page {
    max-inline-size: 60rem;
}

/* ---------- Indikator (nav + ol, aria-current="step") ---------- */

.wizard-steps-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
}

.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.wizard-step-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    font-size: 0.875rem;
    font-weight: 700;
}

.wizard-step.is-done .wizard-step-mark {
    background: var(--action-primary-background);
    color: var(--action-primary-text);
    border-color: transparent;
}

.wizard-step.is-current {
    color: var(--text-primary);
    font-weight: 600;
}

.wizard-step.is-current .wizard-step-mark {
    border-color: var(--action-primary-background);
    color: var(--text-primary);
}

.wizard-step a {
    color: inherit;
}

/* Mobilon roviditve: "3/5 · Dijak" (Acceptance 12). */
.wizard-steps-compact {
    display: none;
    margin: 0 0 var(--space-3);
    font-weight: 600;
}

/* Mobil 5. kor (Ruben, 2026-09-21): vekony haladas-csik a szamlalo alatt - csak kis kepernyon. */
.wizard-progress {
    display: none;
    margin: 0 0 var(--space-4);
}

.wizard-back {
    margin: var(--space-4) 0 0;
}

@media (max-width: 40rem) {
    .wizard-steps-list {
        display: none;
    }

    .wizard-steps-compact {
        display: block;
        margin-block-end: var(--space-2);
    }

    .wizard-progress {
        display: block;
    }

    .wizard-back .button {
        inline-size: 100%;
    }
}

/* ---------- Fejlec, gombsor ---------- */

.wizard-head h1 {
    margin-block-end: var(--space-2);
}

.wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
    align-items: center;
}

.wizard-actions > :first-child {
    margin-inline-end: auto;
}

/* Mobil 5. kor: Vissza | Tovabb egy sorban, a Tovabb kiemelve; a "Mentes, kesobb folytatom" alattuk. */
@media (max-width: 40rem) {
    .wizard-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .wizard-actions > :first-child {
        margin-inline-end: 0;
        order: -2;
        grid-column: 1;
    }

    .wizard-actions > .button-primary {
        order: -1;
        grid-column: 2;
    }

    .wizard-actions > :not(:first-child):not(.button-primary) {
        grid-column: 1 / -1;
    }

    .wizard-next-label {
        display: none;
    }
}

/* ---------- Chip-lista (egyseg-tipusok) ---------- */

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chip-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.chip-check:has(input:checked) {
    background: var(--action-primary-background);
    color: var(--action-primary-text);
    border-color: transparent;
}

.chip-check input {
    inline-size: 1rem;
    block-size: 1rem;
}

/* ---------- Attekintes ---------- */

.wizard-review {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.wizard-review-card {
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
}

.wizard-review-card.is-missing {
    border-color: var(--status-danger);
}

.wizard-review-card h2 {
    font-size: 1rem;
    margin-block-end: var(--space-2);
}

.wizard-review-card p {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
}

/* ---------- Publikalasi hianylista, sikerkartya ---------- */

.publish-blockers {
    margin: var(--space-2) 0 0;
    padding-inline-start: var(--space-5);
}

.publish-success {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    border: 1px solid var(--action-primary-background);
}

.publish-success ul {
    margin: var(--space-3) 0 0;
    padding-inline-start: var(--space-5);
}

/* ---------- Folytatas-kartya a dashboardon ---------- */

.continue-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    border: 1px solid var(--border-strong);
}

.continue-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
}

.continue-card dt {
    color: var(--text-secondary);
}

.continue-card dd {
    margin: 0;
}

.progress-dots {
    letter-spacing: 0.1em;
}

/* ---------- Szerepvalaszto ---------- */

.role-chooser {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.role-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    color: inherit;
    text-decoration: none;
}

.role-card:hover,
.role-card:focus-visible {
    border-color: var(--action-primary-background);
}

.role-card img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* ---------- #40 foglalasi wizard ---------- */

.seat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.seat-tab {
    display: grid;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    font-size: 0.9375rem;
}

.seat-tab.is-selected {
    border-color: var(--action-primary-background);
    box-shadow: inset 0 0 0 1px var(--action-primary-background);
}

/* Mobil 5. kor (Ruben, 2026-09-21): az egyseg-fulek kis kepernyon egy gorgetheto sorban, nem egymas alatt. */
@media (max-width: 40rem) {
    .seat-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(-1 * var(--space-4));
        padding: 2px var(--space-4) var(--space-2);
        scrollbar-width: thin;
    }

    .seat-tab {
        flex: 0 0 auto;
        max-inline-size: 70vw;
    }

    .seat-tab > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.wizard-section h2 {
    margin-block: var(--space-4) var(--space-2);
}

.tier-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tier-button {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tier-button:hover,
.tier-button:focus-visible,
.slot-chip.is-selected {
    border-color: var(--action-primary-background);
}

.tier-button.is-selected {
    background: var(--action-primary-background);
    color: var(--action-primary-text);
    border-color: transparent;
}

.tier-button.is-muted,
.day-arrow.is-muted {
    opacity: 0.45;
    pointer-events: none;
}

.day-window {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.booking-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
}

.booking-summary dt {
    color: var(--text-secondary);
}

.booking-summary dd {
    margin: 0;
}

.house-rules summary {
    cursor: pointer;
}
}

/* ---------- #24 profil-teljesseg (docs/features/profil-teljesseg.md) ---------- */

@layer components {
    .completeness-card p {
        margin: 0;
    }

    .completeness-missing a {
        font-weight: 600;
    }

    .completeness-done {
        color: var(--status-success);
        font-size: var(--font-size-body-small);
    }

    .completeness-line {
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }
}

/* ---------- #40 foglalasi wizard - tomoritve (2026-09-14) ---------- */

@layer components {
    /* A lezart lepes halkabb: kisebb cim, a nem valasztott opciok kisebbek - a valasztott latszik. */
    .booking-wizard .wizard-section.is-done h2 {
        font-size: var(--font-size-body);
        color: var(--text-secondary);
        margin-block: var(--space-3) var(--space-1);
    }

    .booking-wizard .wizard-section.is-done .tier-button:not(.is-selected),
    .booking-wizard .wizard-section.is-done .slot-chip:not(.is-selected) {
        padding-block: var(--space-1);
        font-size: var(--font-size-body-small);
        font-weight: 500;
    }

    .booking-wizard .wizard-section + .wizard-section {
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--border-default);
    }

    .booking-wizard .wizard-section h2:focus {
        outline: none;
    }
}

/* ---------- +Seat hozzaadasa: szalonvalaszto (2026-09-14) es a +Seat lista kepei ---------- */

@layer components {
    .choice-list {
        display: grid;
        gap: var(--space-2);
    }

    .choice-card {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        cursor: pointer;
    }

    .choice-card:hover {
        border-color: var(--border-strong);
    }

    .choice-card:has(input:checked) {
        border-color: var(--action-primary-background);
        box-shadow: inset 0 0 0 1px var(--action-primary-background);
    }

    .choice-card input {
        flex: none;
        inline-size: 1.125rem;
        block-size: 1.125rem;
        accent-color: var(--action-primary-background);
    }

    .choice-card-body {
        display: grid;
        gap: 2px;
    }

    .seat-table-thumb {
        inline-size: 4rem;
        padding-inline-end: 0;
    }

    .seat-table-thumb img,
    .seat-table-placeholder {
        display: block;
        inline-size: 3.5rem;
        block-size: 3.5rem;
        border-radius: var(--radius-sm);
        object-fit: cover;
        background: var(--surface-subtle);
    }

    .seat-table-placeholder {
        display: grid;
        place-items: center;
        color: var(--text-muted);
        font-size: 0.6875rem;
        font-weight: 600;
    }

    /* A fejlec kek +Seat CTA (Dani 2026-09-14): feltuno, a menu tobbi pontjatol elvalik. */
    .site-nav .nav-cta {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-pill);
        background: var(--action-cta-background);
        color: var(--action-cta-text);
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 6px 20px color-mix(in srgb, var(--action-cta-background) 30%, transparent);
        transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
    }

    .site-nav .nav-cta:hover,
    .site-nav .nav-cta:focus-visible {
        color: var(--action-cta-text);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .site-nav .nav-cta[aria-current="page"] {
        outline: 2px solid var(--action-cta-background);
        outline-offset: 2px;
    }
}

/* ---------- Kizart napok listaja (bejaras 2026-09-15: a puszta <ul> csunya volt) ---------- */

@layer components {
    .closed-date-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: var(--space-2);
    }

    .closed-date-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
    }

    .closed-date-list li > span:first-child {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
    }

    .closed-weekdays .chip-check.is-muted {
        opacity: 0.55;
    }
}

/*
   Mobil 8. kor (Ruben, 2026-09-22, "welcome"): a szerepvalaszto nyitokepernyo-kerete -
   a jel, alatta a cim es a ket szerep-kartya, legalul a halk "Csak nezelodom" (+ Belepes,
   ha ki van jelentkezve). Csak szemantikus tokenek.
*/
@layer components {
    .welcome-page {
        max-inline-size: 44rem;
        margin-inline: auto;
        text-align: center;
    }

    .welcome-mark {
        margin-block-end: var(--space-2);
    }

    .welcome-mark svg {
        block-size: 3rem;
        inline-size: auto;
        color: var(--text-primary);
    }

    .welcome-page .role-card {
        text-align: start;
    }

    .welcome-footer {
        display: flex;
        justify-content: center;
        gap: var(--space-2);
    }
}

/* ---------- Foglalasi naptar (mozgas-modell, 5. fazis) ----------
   A 7 napos napsav helyett havi naptar: hetfovel kezdodo racs, a napok
   kezdobetuivel; a foglalhato nap alatt kicsiben a belefero kezdesek szama
   (BR-BKW-002). Valasztas utan a naptar egy sorra csukodik (.day-pick).
   Csak szemantikus tokenek (DS-BRAND-002). */
@layer components {
    .booking-calendar {
        display: grid;
        gap: var(--space-2);
        max-inline-size: 26rem;
        padding: var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-elevated);
    }

    .booking-calendar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
    }

    .booking-calendar-month {
        font-family: var(--font-family-display);
        font-size: 1.0625rem;
    }

    .calendar-nav {
        display: inline-grid;
        place-items: center;
        min-inline-size: var(--touch-target-min);
        min-block-size: var(--touch-target-min);
        border-radius: var(--radius-md);
        color: var(--text-primary);
    }

    .calendar-nav:hover {
        background: var(--surface-subtle);
    }

    .calendar-nav.is-muted {
        color: var(--text-secondary);
        opacity: 0.35;
    }

    .booking-calendar-weekdays,
    .booking-calendar-days {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
    }

    .booking-calendar-weekdays span {
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 700;
        text-align: center;
    }

    .booking-calendar-weekdays .is-weekend {
        opacity: 0.7;
    }

    .booking-calendar-days {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cal-day {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        aspect-ratio: 1;
        min-block-size: 40px;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        text-decoration: none;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        transition:
            background-color var(--duration-fast),
            border-color var(--duration-fast);
    }

    a.cal-day {
        background: var(--brand-dim);
    }

    a.cal-day:hover {
        border-color: var(--brand-primary);
    }

    .cal-day-num {
        font-weight: 700;
    }

    .cal-day-count {
        color: var(--text-secondary);
        font-size: 0.625rem;
        font-weight: 600;
    }

    /* A mai nap kerettel - a kivalasztas kitoltessel: ket kulon jel (WCAG 1.4.1). */
    .cal-day.is-today {
        border-color: var(--brand-primary);
    }

    .cal-day.is-selected {
        background: var(--action-primary-background);
        border-color: transparent;
        color: var(--action-primary-text);
    }

    .cal-day.is-selected .cal-day-count {
        color: inherit;
    }

    .cal-day.is-muted {
        color: var(--text-secondary);
        opacity: 0.5;
    }

    .cal-day.is-muted.is-out {
        opacity: 0.3;
    }

    .booking-calendar-legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-4);
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

    .booking-calendar-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .booking-calendar-legend i {
        inline-size: 10px;
        block-size: 10px;
        border-radius: 3px;
    }

    .booking-calendar-legend .legend-open {
        background: var(--brand-dim);
        border: 1px solid var(--brand-primary);
    }

    .booking-calendar-legend .legend-muted {
        border: 1px solid var(--border-strong);
        opacity: 0.6;
    }

    /* ---- a valasztott nap sora (osszecsukott naptar) ---- */
    .day-picker {
        display: grid;
        gap: var(--space-3);
        max-inline-size: 26rem;
    }

    .day-pick {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-elevated);
        cursor: pointer;
        list-style: none;
    }

    .day-pick::-webkit-details-marker {
        display: none;
    }

    .day-pick:hover {
        border-color: var(--border-strong);
    }

    .day-pick-initial {
        display: inline-grid;
        place-items: center;
        inline-size: 2.75rem;
        block-size: 2.75rem;
        border-radius: var(--radius-sm);
        background: var(--action-primary-background);
        color: var(--action-primary-text);
        font-family: var(--font-family-display);
        font-weight: 800;
    }

    .day-pick-date {
        display: grid;
        min-inline-size: 0;
    }

    .day-pick-date span {
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }

    .day-pick-change {
        color: var(--brand-primary);
        font-size: var(--font-size-body-small);
        font-weight: 700;
    }

    .day-picker[open] .day-pick-change {
        visibility: hidden;
    }
}

/* ---------- Elkuldott keres es a haromlepcsos allapot (mozgas-modell, 5. fazis) ---------- */
@layer components {
    .request-sent {
        display: grid;
        justify-items: center;
        gap: var(--space-2);
        padding: var(--space-6) var(--space-4);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        background: var(--surface-elevated);
        text-align: center;
    }

    .request-sent-check {
        color: var(--status-success);
    }

    .request-sent-check circle,
    .request-sent-check path {
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .request-sent-title {
        margin: 0;
        font-family: var(--font-family-display);
        font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
        font-weight: 800;
    }

    .request-sent-lead {
        margin: 0;
        max-inline-size: 30ch;
        color: var(--text-secondary);
    }

    /*
      Harom lepes egy sorban, osszekoto vonallal. A kesz lepes kitoltott korben
      pipat kap, a folyamatban levo markaszinu keretet (es lelegzik, motion.css),
      a kovetkezo halvany - az allapot nem csak szin (WCAG 1.4.1).
    */
    .booking-progress {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .booking-progress-step {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: start;
        gap: 4px;
        text-align: center;
    }

    /* Az osszekoto vonal az elozo lepes pottyetol ehhez. */
    .booking-progress-step + .booking-progress-step::before {
        content: "";
        position: absolute;
        inset-block-start: 11px;
        inset-inline: calc(-50% + 14px) calc(50% + 14px);
        block-size: 2px;
        background: var(--border-strong);
    }

    .booking-progress-step.is-done + .booking-progress-step::before {
        background: var(--brand-primary);
    }

    .booking-progress-mark {
        display: inline-grid;
        place-items: center;
        inline-size: 24px;
        block-size: 24px;
        border: 2px solid var(--border-strong);
        border-radius: 50%;
        background: var(--surface-default);
    }

    .booking-progress-step.is-done .booking-progress-mark {
        border-color: transparent;
        background: var(--action-primary-background);
        color: var(--action-primary-text);
    }

    .booking-progress-step.is-current .booking-progress-mark {
        border-color: var(--brand-primary);
        background: var(--brand-dim);
    }

    .booking-progress-label {
        font-size: var(--font-size-body-small);
        font-weight: 700;
    }

    .booking-progress-step.is-upcoming .booking-progress-label {
        color: var(--text-secondary);
        font-weight: 600;
    }

    .booking-progress-when {
        color: var(--text-secondary);
        font-size: 0.75rem;
    }
}