/* ==========================================================================
   Stasacucine — booking.css
   Modal rezerwacji konsultacji. Ten sam układ i przepływ co widget na ofertach
   (offers/offer-script.js): panel z informacjami + kroki dzień → doradca →
   godzina, tutaj z dodatkowym krokiem z numerem telefonu.
   ========================================================================== */
@layer components {
    .booking { --modal-w: 58rem; }
    .bkm-dialog {
        position: relative;
        display: flex;
        width: min(100vw - 2rem, 58rem);
        max-height: min(100dvh - 2rem, 50rem);
        overflow: hidden;
        border: 1px solid var(--accent-line);
        border-radius: var(--r-xl);
        background: var(--surface);
        box-shadow: var(--shadow-2);
    }

    .bkm-aside {
        display: flex;
        flex: 0 0 18.5rem;
        flex-direction: column;
        padding: 2.5rem 2rem;
        border-right: 1px solid var(--line);
        background: linear-gradient(160deg, var(--accent-soft), transparent 70%);
    }
    .bkm-brand { margin-bottom: 1.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em; color: var(--accent); }
    .bkm-aside-title { margin-bottom: 0.6rem; font-size: 1.45rem; line-height: 1.25; }
    .bkm-aside-sub { margin-bottom: 1.75rem; font-size: 0.87rem; color: var(--text-2); line-height: 1.55; }
    .bkm-info { display: grid; gap: 0.9rem; margin: 0 0 auto; padding: 0; list-style: none; }
    .bkm-info li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.84rem; color: var(--text-2); line-height: 1.5; }
    .bkm-info i { flex: none; width: 1.1rem; margin-top: 0.2rem; color: var(--accent); text-align: center; }
    .bkm-info-free { color: var(--text) !important; }
    .bkm-info-free strong { color: var(--accent-hi); }
    .bkm-cancel-note { margin-top: 1.5rem; font-size: 0.72rem; color: var(--text-3); line-height: 1.5; }

    .bkm-main { flex: 1; min-width: 0; padding: 2.5rem 2.25rem; overflow-y: auto; overscroll-behavior: contain; }
    .bkm-step { margin-bottom: 2rem; }
    .bkm-step[hidden], .bkm-summary[hidden] { display: none; }
    .bkm-reveal { animation: bkm-in 0.4s var(--ease) both; }
    @keyframes bkm-in { from { opacity: 0; transform: translateY(14px); } }
    .bkm-step-label { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
    .bkm-step-num {
        display: grid;
        place-items: center;
        flex: none;
        width: 1.65rem;
        height: 1.65rem;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-hi), var(--accent));
        color: var(--on-accent);
        font-size: 0.8rem;
        font-weight: 700;
    }

    /* Kalendarz */
    .bkm-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
    .bkm-cal-month { font-size: 0.95rem; font-weight: 600; }
    .bkm-cal-nav {
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-sm);
        background: rgb(255 255 255 / 0.04);
        color: var(--text-2);
        transition: color var(--dur), border-color var(--dur);
    }
    .bkm-cal-nav:hover:not(:disabled) { color: var(--text); border-color: var(--accent-line); }
    .bkm-cal-nav:disabled { opacity: 0.25; cursor: default; }
    .bkm-cal-weekdays, .bkm-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
    .bkm-cal-weekdays { margin-bottom: 0.4rem; }
    .bkm-cal-weekdays span { text-align: center; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
    .bkm-day {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        min-height: 2.5rem;
        border: 1px solid transparent;
        border-radius: var(--r-sm);
        background: rgb(255 255 255 / 0.03);
        font-size: 0.88rem;
        font-weight: 500;
        transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
    }
    .bkm-day:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-line); transform: scale(1.06); }
    .bkm-day:disabled { opacity: 0.22; cursor: default; background: transparent; }
    .bkm-day-today { border-color: var(--accent-line); }
    .bkm-day[aria-pressed="true"], .bkm-day[aria-pressed="true"]:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--accent-hi), var(--accent));
        border-color: transparent;
        color: var(--on-accent);
        font-weight: 700;
        box-shadow: 0 4px 16px rgb(200 184 138 / 0.4);
        transform: none;
    }

    /* Doradca */
    .bkm-team { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
    .bkm-person {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.8rem 1rem;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: rgb(255 255 255 / 0.03);
        text-align: left;
        transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
    }
    .bkm-person:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
    .bkm-person[aria-pressed="true"], .bkm-person[aria-pressed="true"]:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 4px 18px rgb(200 184 138 / 0.25); transform: none; }
    .bkm-avatar { position: relative; flex: none; width: 2.9rem; height: 2.9rem; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--accent-hi), var(--accent)); }
    .bkm-avatar-initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.95rem; font-weight: 700; color: var(--on-accent); }
    .bkm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .bkm-person-meta { display: flex; flex-direction: column; min-width: 0; }
    .bkm-person-name { font-size: 0.93rem; font-weight: 600; }
    .bkm-person-role { font-size: 0.76rem; color: var(--text-2); }

    /* Godziny */
    .bkm-times { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }
    .bkm-time {
        min-height: 2.75rem;
        padding: 0.65rem 0;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: rgb(255 255 255 / 0.03);
        font-size: 0.88rem;
        font-weight: 600;
        transition: border-color 0.2s, background-color 0.2s;
    }
    .bkm-time:hover { border-color: var(--accent-line); background: var(--accent-soft); }
    .bkm-time[aria-pressed="true"], .bkm-time[aria-pressed="true"]:hover {
        background: linear-gradient(135deg, var(--accent-hi), var(--accent));
        border-color: transparent;
        color: var(--on-accent);
        box-shadow: 0 4px 16px rgb(200 184 138 / 0.4);
    }
    .bkm-loading { grid-column: 1 / -1; padding: 0.5rem 0; font-size: 0.85rem; color: var(--text-2); }
    .bkm-no-slots { padding: 0.75rem 1rem; border-radius: var(--r-sm); background: rgb(255 255 255 / 0.03); font-size: 0.85rem; color: var(--text-2); }
    .bkm-no-slots[hidden] { display: none; }

    .bkm-consent { margin-top: 1rem; }

    /* Podsumowanie */
    .bkm-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.15rem 1.35rem;
        border: 1px solid var(--accent-line);
        border-radius: var(--r-md);
        background: var(--accent-soft);
    }
    .bkm-summary-label { display: block; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
    .bkm-summary-text strong { font-size: 0.95rem; }
    .bkm-submit {
        padding: 0.85rem 1.9rem;
        border-radius: var(--r-pill);
        background: linear-gradient(135deg, var(--accent-hi), var(--accent) 60%, var(--accent-lo));
        color: var(--on-accent);
        font-size: 0.95rem;
        font-weight: 700;
        box-shadow: 0 6px 22px rgb(200 184 138 / 0.35);
        transition: transform var(--dur) var(--ease), box-shadow var(--dur), opacity var(--dur);
    }
    .bkm-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgb(200 184 138 / 0.5); }
    .bkm-submit:disabled { opacity: 0.45; cursor: default; }
    .bkm-error { flex-basis: 100%; margin: 0; font-size: 0.83rem; color: var(--err); }
    .bkm-error[hidden] { display: none; }

    /* Sukces */
    .bkm-success { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20rem; padding: 2rem 1rem; text-align: center; }
    .bkm-success[hidden] { display: none; }
    .bkm-success h3 { margin: 1.5rem 0 0.75rem; font-size: 1.5rem; }
    .bkm-success p { max-width: 24rem; color: var(--text-2); font-size: 0.92rem; line-height: 1.6; }
    .bkm-success-slot { margin-bottom: 0.5rem; }
    .bkm-success-slot strong { color: var(--accent-hi); }
    .bkm-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }
    .bkm-success-check { width: 5.25rem; height: 5.25rem; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .bkm-success-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: bkm-draw 0.7s ease-out forwards; }
    .bkm-success-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: bkm-draw 0.45s ease-out 0.6s forwards; }
    @keyframes bkm-draw { to { stroke-dashoffset: 0; } }

    @media (max-width: 899.98px) {
        .booking { margin: 0; max-width: 100vw; }
        .bkm-dialog { flex-direction: column; width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
        .bkm-aside { flex: 0 0 auto; padding: 1.5rem 1.5rem 1.1rem; border-right: 0; border-bottom: 1px solid var(--line); }
        .bkm-aside-title { padding-right: 3rem; font-size: 1.2rem; }
        .bkm-aside-sub { margin-bottom: 0.9rem; }
        .bkm-info { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
        .bkm-info li { align-items: center; font-size: 0.76rem; }
        .bkm-cancel-note { display: none; }
        .bkm-main { padding: 1.5rem 1.25rem 2.25rem; }
        .bkm-summary { flex-direction: column; align-items: stretch; text-align: center; }
        .bkm-submit { width: 100%; padding: 1rem; }
    }
    @media (max-width: 479.98px) {
        .bkm-times { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
        .bkm-team { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
        .bkm-reveal { animation: none; }
        .bkm-success-check circle, .bkm-success-check path { animation: none; stroke-dashoffset: 0; }
    }
}