/* === GENERALNY LIFTING UX/UI WIDOKU [umow-wizyte] === */

/* --- Główna struktura i globalna czcionka --- */
#mc-umow-wizyte-app {
    --mc-tool-sage: var(--sage, #3d6b4f);
    --mc-tool-sage-dark: var(--sage-dark, #2d5340);
    --mc-tool-sage-light: var(--sage-light, #5a8a6c);
    --mc-tool-cream: var(--cream, #faf7f2);
    --mc-tool-white: var(--warm-white, #fffdf9);
    --mc-tool-gold: var(--gold, #c4956a);
    --mc-tool-gold-pale: var(--gold-pale, #f0dcc8);
    --mc-tool-ink: var(--text-dark, #2c3e34);
    --mc-tool-body: var(--text-body, #4a5d50);
    --mc-tool-muted: var(--text-light, #7a8d7f);
    --mc-tool-line: rgba(61, 107, 79, .10);
    --mc-tool-soft: rgba(61, 107, 79, .06);
    --mc-tool-shadow: var(--shadow-soft, 0 4px 30px rgba(61, 107, 79, .08));
    --mc-tool-shadow-hover: var(--shadow-hover, 0 12px 50px rgba(61, 107, 79, .14));
    --mc-primary: var(--mc-tool-sage);
    --mc-primary-hover: var(--mc-tool-sage-dark);
    --mc-btn-text: var(--warm-white, #fff);
    --mc-radius: var(--radius-md, 20px);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    font-family: var(--mc-font, inherit);
    color: var(--mc-tool-body);
}

#booking-modal-container.mc-modal-umow-wizyte {
    --mc-tool-sage: var(--sage, #3d6b4f);
    --mc-tool-sage-dark: var(--sage-dark, #2d5340);
    --mc-tool-cream: var(--cream, #faf7f2);
    --mc-tool-white: var(--warm-white, #fffdf9);
    --mc-tool-ink: var(--text-dark, #2c3e34);
    --mc-tool-body: var(--text-body, #4a5d50);
    --mc-tool-muted: var(--text-light, #7a8d7f);
    --mc-tool-line: rgba(61, 107, 79, .10);
    --mc-primary: var(--mc-tool-sage);
    --mc-primary-hover: var(--mc-tool-sage-dark);
    --mc-btn-text: var(--warm-white, #fff);
    --mc-radius: var(--radius-md, 20px);
}
/* Tryb Solo — bez sidebara, content na pełną szerokość */
#mc-umow-wizyte-app.mc-solo-mode { display: block; }
#mc-umow-wizyte-app.mc-solo-mode .mc-umow-wizyte__sidebar { display: none !important; }
#mc-umow-wizyte-app.mc-solo-mode .mc-umow-wizyte__mobile-toggle { display: none !important; }
#mc-umow-wizyte-app.mc-solo-mode #mc-specialists-list-container { max-width: 700px; margin: 0 auto; }

/* --- Panel boczny (Sidebar) --- */
.mc-umow-wizyte__sidebar {
    flex: 1 1 300px;
    max-width: 320px;
    /* (UI) Delikatne tło i cień dla lepszego oddzielenia */
    background: var(--mc-tool-white);
    border: 1px solid var(--mc-tool-line);
    border-radius: var(--radius-md, 20px);
    height: fit-content;
    position: sticky;
    top: 30px;
    box-shadow: var(--mc-tool-shadow);
    overflow: hidden;
}

.mc-umow-wizyte__sidebar .sidebar-header {
    display: none;
    padding: 16px 18px;
    border-bottom: 1px solid var(--mc-tool-line);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.mc-umow-wizyte__sidebar .sidebar-header h3 {
    margin: 0;
    color: var(--mc-tool-ink);
    font-size: 1rem;
    font-weight: 700;
}

.sidebar-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--mc-tool-line);
    background: var(--mc-tool-cream);
    color: var(--mc-tool-muted);
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.sidebar-close-btn:hover {
    background: var(--mc-tool-white);
    color: var(--mc-tool-ink);
    border-color: rgba(61, 107, 79, .18);
}

.mc-umow-wizyte__sidebar .sidebar-content {
    padding: 24px;
}

.mc-umow-wizyte__sidebar .filter-group {
    margin-bottom: 24px; /* (UI) Zwiększony odstęp dla czytelności */
}

.mc-umow-wizyte__sidebar label {
    font-weight: 600;
    font-size: .92rem; /* (UI) Nieco większa etykieta */
    color: var(--mc-tool-ink); /* (UI) Ciemniejszy, bardziej kontrastowy tekst */
    display: block;
    margin-bottom: 9px;
}

.mc-umow-wizyte__sidebar input[type="search"],
.mc-umow-wizyte__sidebar select {
    width: 100%;
    padding: 12px; /* (UI) Większy padding dla wygody */
    border: 1px solid rgba(61,107,79,.15);
    border-radius: var(--radius-sm, 12px);
    background: var(--mc-tool-white);
    color: var(--mc-tool-ink);
    font-size: .95rem;
    min-height: 46px;
    transition: border-color .35s ease, box-shadow .35s ease;
}

.mc-umow-wizyte__sidebar input[type="search"]:focus,
.mc-umow-wizyte__sidebar select:focus {
    border-color: var(--mc-primary, #3d6b4f);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-primary, #3d6b4f) 16%, transparent);
    outline: none;
}

/* --- Grupa radio --- */
.mc-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px; /* (UI) Zwiększony odstęp */
}
.mc-radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500; /* (UI) Zmieniona grubość dla spójności */
    font-size: .9rem;
    color: var(--mc-tool-body);
    margin-bottom: 0;
}

/* --- Switch (Przełącznik) --- */
.filter-group--switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-group--switch label { margin-bottom: 0; }
.mc-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.mc-switch input { opacity: 0; width: 0; height: 0; }
.mc-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(61,107,79,.18); transition: .35s ease; border-radius: 24px; }
.mc-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
input:checked + .mc-slider { background-color: var(--mc-primary, #3d6b4f); }
input:checked + .mc-slider:before { transform: translateX(20px); }

/* --- Siatka dni i pór dnia --- */
.mc-days-grid, .mc-time-ranges {
  display: grid;
  gap: 8px;
}
.mc-days-grid {
    grid-template-columns: repeat(4, 1fr);
}
.mc-time-ranges {
    grid-template-columns: 1fr;
    margin-top: 10px;
}
.mc-days-grid label, .mc-time-ranges label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px; /* (UI) Zwiększony padding */
    border: 1px solid rgba(61,107,79,.15);
    border-radius: var(--radius-sm, 12px);
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    font-size: .86rem;
    min-height: 42px;
    transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.mc-days-grid input, .mc-time-ranges input {
    display: none;
}
.mc-days-grid label:hover, .mc-time-ranges label:hover {
    border-color: rgba(61,107,79,.24);
    background: rgba(61,107,79,.03);
}
.mc-days-grid input:checked + span,
.mc-days-grid label:has(input:checked),
.mc-time-ranges label:has(input:checked) {
    background-color: color-mix(in srgb, var(--mc-primary, #3d6b4f) 12%, white);
    border-color: var(--mc-primary, #3d6b4f);
    color: var(--mc-primary, #2d5340);
    font-weight: 600;
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--mc-tool-line);
    display: flex;
    gap: 10px;
    justify-content: center;
}
.sidebar-footer #show-results-btn-mobile { display: none; }

.mc-button-primary,
.mc-button-secondary {
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: var(--radius-pill, 999px);
    font-family: inherit;
    font-size: .9rem;
    min-height: 42px;
    transition: background .35s ease, color .35s ease, transform .35s ease, border-color .35s ease;
}

.mc-button-primary {
    background: var(--mc-primary, #3d6b4f);
    color: var(--mc-btn-text, #fff);
}

.mc-button-primary:hover {
    background: var(--mc-primary-hover, #2d5340);
    transform: translateY(-1px);
}

.mc-button-secondary {
    background: transparent;
    color: var(--mc-tool-muted);
}
.mc-button-secondary:hover {
    background: rgba(61,107,79,.06);
    color: var(--mc-tool-ink);
}

/* --- Główna treść (Content) --- */
.mc-umow-wizyte__content {
    flex: 1 1 600px;
    min-width: 0;
}

/* --- Loader i komunikaty --- */
.mc-content-loader, #mc-no-results {
    text-align: center;
    padding: 50px;
    color: var(--mc-tool-muted);
}
.mc-spinner {
    border: 4px solid rgba(61,107,79,.06);
    border-top: 4px solid var(--mc-primary, #3d6b4f);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Karta Specjalisty (Wersja 2) --- */
.specialist-card-v2 {
    background: var(--mc-tool-white);
    border-radius: var(--radius-md, 20px);
    border: 1px solid var(--mc-tool-line);
    margin-bottom: 20px;
    display: grid;
    grid-template-areas: "main details" "main calendar";
    grid-template-columns: 260px 1fr;
    gap: 16px;
    padding: 20px;
    overflow: hidden;
    box-shadow: var(--mc-tool-shadow);
    transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
    font-family: inherit;
}
.specialist-card-v2:hover {
    transform: translateY(-3px);
    box-shadow: var(--mc-tool-shadow-hover);
    border-color: rgba(61,107,79,.16);
}


.sc-main { grid-area: main; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sc-avatar img { width: 100%; max-width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-sm, 12px); }
.sc-info { min-width: 0; }
.sc-info h3.sc-name { margin: 0 0 6px; line-height: 1.25; }
.sc-info h3.sc-name a { font-size: 1.16rem; color: var(--mc-tool-ink); text-decoration: none; font-weight: 700; }
.sc-info p { margin: 3px 0; color: var(--mc-tool-muted); font-size: .9rem; line-height: 1.45; }
.sc-info h3.sc-name a:hover { color: var(--mc-primary, #3d6b4f); text-decoration: none; }

.sc-details { grid-area: details; }
.sc-calendar { grid-area: calendar; position: relative; min-height: 220px; /* rezerwuj miejsce na kalendarz zanim się załaduje */ }
/* Zablokuj auto-korektę scrolla przy zmianie wysokości kart */
.specialist-card-v2 { overflow-anchor: none; }
#mc-specialists-list-container { overflow-anchor: none; }

/* Zakładki Gabinet/Online */
.sc-location-switcher { display: flex; border-bottom: 2px solid var(--mc-tool-line); margin-bottom: 14px; }
.sc-location-switcher .location-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 600;
    color: var(--mc-tool-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .35s ease, border-color .35s ease, background .35s ease;
}
.sc-location-switcher .location-tab:hover {
    color: var(--mc-tool-ink);
}
.sc-location-switcher .location-tab.active {
    color: var(--mc-primary, #2d5340);
    border-bottom-color: var(--mc-primary, #2d5340);
}

/* Pole wyboru usługi */
.sc-service-selector .service-select {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(61,107,79,.15);
    border-radius: var(--radius-sm, 12px);
    background: var(--mc-tool-white);
    color: var(--mc-tool-ink);
    font-size: .94rem;
    min-height: 46px;
}

.sc-location-info p {
    margin: 0 0 12px;
    color: var(--mc-tool-body);
    font-size: .9rem;
    line-height: 1.55;
}

/* Mini-kalendarz */
.calendar-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.calendar-nav .week-display { font-weight: 600; color: var(--mc-tool-ink); text-align: center; min-width: 0; line-height: 1.35; }
.calendar-nav button {
    background: var(--mc-tool-white);
    border: 1px solid rgba(61,107,79,.15);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--mc-tool-muted);
    font-weight: 600;
    transition: background .35s ease, color .35s ease, border-color .35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.calendar-nav button:hover {
    background: rgba(61,107,79,.06);
    color: var(--mc-primary, #3d6b4f);
    border-color: rgba(61,107,79,.22);
}

.calendar-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; text-align: center; font-size: 0.8em; color: var(--mc-tool-muted); font-weight: 500; margin-bottom: 5px; }
.calendar-days div.is-today { font-weight: bold; color: var(--mc-primary, #2d5340); }

.calendar-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; min-height: 120px; }
.calendar-slots-column { display: flex; flex-direction: column; gap: 5px; }
.calendar-slot {
    padding: 8px 4px;
    border: 1px solid color-mix(in srgb, var(--mc-primary, #3d6b4f) 25%, white);
    color: var(--mc-primary, #3d6b4f) !important;
    background-color: color-mix(in srgb, var(--mc-primary, #3d6b4f) 6%, white);
    border-radius: var(--radius-sm, 12px);
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
    white-space: nowrap;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}
#mc-umow-wizyte-app .calendar-slot:hover,
#mc-umow-wizyte-app .calendar-slot:focus,
#mc-umow-wizyte-app .calendar-slot:focus-visible {
    background-color: var(--mc-primary, #3d6b4f) !important;
    border-color: var(--mc-primary, #3d6b4f) !important;
    color: var(--warm-white, #fffdf9) !important;
    transform: translateY(-1px);
}
/* Podświetlenie pierwszego dostępnego dnia */
.calendar-slots-column.day-highlighted { background: color-mix(in srgb, var(--mc-primary, #3d6b4f) 6%, transparent); border-radius: 8px; padding: 4px 2px; }
.calendar-days > div.day-header-highlighted { color: var(--mc-primary, #3d6b4f); font-weight: 700; }
.calendar-loader-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 253, 249, 0.82);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm, 12px);
    backdrop-filter: blur(2px);
}

.calendar-no-slots-msg {
    color: var(--mc-tool-body);
    font-size: 1rem;
    line-height: 1.5;
    padding-top: 0;
}

.sc-calendar.has-no-slots {
    min-height: 0;
}

.sc-calendar.has-no-slots .calendar-slots {
    min-height: 0 !important;
}

.sc-calendar.has-no-slots .calendar-no-slots-msg {
    padding-top: 0;
}

.calendar-no-slots-msg p,
.calendar-no-slots-msg button {
    margin: 0;
}

.mc-next-slot-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    background: var(--mc-tool-white);
    border: 1px solid color-mix(in srgb, var(--mc-tool-gold, #c4956a) 34%, var(--mc-tool-line));
    border-radius: var(--radius-md, 20px);
    box-shadow: 0 8px 26px rgba(61, 107, 79, .08);
}

.mc-next-slot-card--empty {
    border-style: dashed;
    background: var(--mc-tool-cream);
}

.mc-next-slot-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mc-primary, #3d6b4f) 14%, white);
    color: var(--mc-primary, #3d6b4f);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}

.mc-next-slot-content {
    flex: 1 1 auto;
    min-width: 0;
}

.mc-next-slot-title {
    color: var(--mc-tool-ink);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
}

.mc-next-slot-title strong {
    font-weight: 700;
}

.mc-next-slot-text,
.mc-next-slot-form {
    display: block;
    margin-top: 3px;
    color: var(--mc-tool-muted);
    font-size: .92rem;
}

.mc-next-slot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px !important;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mc-primary, #3d6b4f) 14%, white);
    color: var(--mc-primary, #3d6b4f);
    font-size: .96rem;
    font-weight: 700;
    transition: background .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.mc-next-slot-btn:hover,
.mc-next-slot-btn:focus-visible {
    background: var(--mc-primary, #3d6b4f);
    color: var(--mc-btn-text, #fff);
    box-shadow: var(--mc-tool-shadow);
    transform: translateY(-1px);
}

.mc-next-slot-btn span {
    font-size: 1.25em;
    line-height: 1;
}

@media (max-width: 520px) {
    .mc-next-slot-card {
        align-items: flex-start;
        padding: 16px;
    }

    .mc-next-slot-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 1.55rem;
    }

    .mc-next-slot-btn {
        width: 100%;
    }
}
/* (FIX) Polityka odwołania na karcie specjalisty */
.sc-cancellation-policy {
    margin-top: 15px;
    padding: 12px 15px;
    background-color: var(--mc-tool-cream);
    border: 1px solid var(--mc-tool-line);
    border-radius: var(--radius-sm, 12px);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--mc-tool-body);
    text-align: center;
}

/* === Mobile === */
.mc-umow-wizyte__mobile-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10010;
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: 600;
    background: var(--mc-primary, #2d5340);
    color: var(--mc-btn-text, #fff);
    border: none;
    border-radius: 50px;
    box-shadow: var(--mc-tool-shadow-hover);
    cursor: pointer;
}

@media (max-width: 960px) {
    .mc-umow-wizyte__sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        max-width: 400px;
        height: 100dvh;
        z-index: 10020;
        transition: left 0.3s ease-in-out;
        background: var(--mc-tool-white);
        display: flex;
        flex-direction: column;
        box-shadow: 0 12px 50px rgba(44,62,52,.22);
        border-radius: 0 var(--radius-md, 20px) var(--radius-md, 20px) 0;
    }
    .mc-umow-wizyte__sidebar.is-open { left: 0; }
    .mc-umow-wizyte__sidebar .sidebar-header { display: flex; }
    .mc-umow-wizyte__sidebar .sidebar-content { flex-grow: 1; overflow-y: auto; }
    .mc-umow-wizyte__sidebar .sidebar-footer #clear-filters-btn { flex-grow: 1; text-align: left; }
    .mc-umow-wizyte__sidebar .sidebar-footer #show-results-btn-mobile { display: inline-flex; align-items: center; justify-content: center; }
    .mc-umow-wizyte__mobile-toggle { display: block; }
    .mc-umow-wizyte__content { flex: 1 1 100%; }
}

@media (max-width: 768px) {
    #mc-umow-wizyte-app {
        gap: 16px;
        padding: 0 4px;
    }

    /* Karta specjalisty — stack pionowy, oddychający */
    .specialist-card-v2 {
        grid-template-areas: "main" "details" "calendar";
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
        margin-bottom: 16px;
        border-radius: var(--radius-md, 20px);
    }

    /* Nagłówek: avatar + info obok siebie */
    .sc-main {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .sc-avatar img {
        flex-shrink: 0;
        width: 64px !important;
        max-width: 64px !important;
        height: 64px !important;
        border-radius: 10px;
    }
    .sc-info h3.sc-name a {
        font-size: 1.02rem;
        line-height: 1.3;
    }
    .sc-info p {
        font-size: 0.82rem;
        margin: 2px 0;
    }

    /* Usługa / zakładki location */
    .sc-location-switcher {
        margin-bottom: 10px;
    }
    .sc-location-switcher .location-tab {
        flex: 1 1 0;
        padding: 9px 10px;
        font-size: 0.88em;
        text-align: center;
    }
    .sc-service-selector .service-select {
        padding: 10px;
        font-size: 0.9em;
    }

    /* Mini-kalendarz: 3 kolumny, zero scroll, wszystko mieści się na ekranie */
    .sc-calendar {
        overflow: hidden !important;
    }
    .calendar-days {
        grid-template-columns: repeat(3, 1fr) !important;
        font-size: 0.75em;
        gap: 3px;
        min-width: 0 !important;
    }
    /* Ukryj nadmiarowe dni gdyby JS wyrenderował więcej niż 3 */
    .calendar-days > div:nth-child(n+4) { display: none !important; }
    .calendar-slots > .calendar-slots-column:nth-child(n+4) { display: none !important; }

    .calendar-slots {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px;
        min-height: 60px;
        min-width: 0 !important;
    }
    .calendar-slot {
        padding: 7px 2px;
        font-size: 0.78em;
        border-radius: 8px;
        word-break: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        white-space: nowrap;
    }
    .calendar-slots-column {
        gap: 3px;
        min-width: 0;
        overflow: hidden;
    }
    .calendar-nav {
        margin-bottom: 8px;
        gap: 4px;
    }
    .calendar-nav .week-display {
        font-size: 0.78em;
    }
    .calendar-nav button {
        width: 26px;
        height: 26px;
        font-size: 0.85em;
        flex-shrink: 0;
    }

    /* Polityka odwołania */
    .sc-cancellation-policy {
        font-size: 0.8rem;
        padding: 10px 12px;
        margin-top: 10px;
    }

    /* Przycisk filtrów (floating) — nie zasłania contentu */
    .mc-umow-wizyte__mobile-toggle {
        bottom: 12px;
        padding: 10px 20px;
        font-size: 0.95em;
        box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    }

    /* Modal rezerwacji */
    .booking-grid { grid-template-columns: 1fr; }
    .booking-summary {
        border-right: 0;
        border-bottom: 1px solid rgba(61,107,79,.10);
        border-radius: 12px 12px 0 0;
        padding: 16px;
    }
    .booking-selection {
        border-radius: 0 0 12px 12px;
        padding: 16px;
    }
    .booking-summary .booking-header {
        font-size: 1.05rem;
        margin-bottom: 14px;
    }
    .booking-tos {
        font-size: 0.82rem;
        padding: 10px 12px;
    }
    .booking-form button.mc-button-primary {
        font-size: 1rem;
        padding: 12px;
    }

    /* Dolny padding żeby floating button nie zasłaniał ostatniej karty */
    #mc-specialists-list-container {
        padding-bottom: 70px;
    }
}

/* Bardzo małe ekrany (iPhone SE, itp.) */
@media (max-width: 380px) {
    .specialist-card-v2 {
        padding: 10px;
        gap: 8px;
    }
    .sc-avatar img {
        width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
    }
    .sc-info h3.sc-name a {
        font-size: 1em;
    }
    .calendar-days {
        font-size: 0.68em !important;
        gap: 2px !important;
    }
    .calendar-slot {
        font-size: 0.72em !important;
        padding: 5px 1px !important;
        border-radius: 7px !important;
    }
    .calendar-slots {
        gap: 2px !important;
    }
    .calendar-nav .week-display {
        font-size: 0.7em !important;
    }
    .calendar-nav button {
        width: 24px !important;
        height: 24px !important;
    }
}

@media (max-width: 420px) {
    .mc-umow-wizyte__sidebar {
        max-width: 100%;
        border-radius: 0;
    }

    .mc-umow-wizyte__sidebar .sidebar-content {
        padding: 20px 18px;
    }

    .sidebar-footer {
        padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
    }
}

/* === Modal rezerwacji z podsumowaniem === */
.booking-modal {
    position:fixed; z-index:999999; left:0; top:0; width:100%; height:100%;
    overflow:auto; background-color:rgba(0,0,0,.6); display:flex;
    align-items:center; justify-content:center;
    font-family:var(--mc-font, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
}
.booking-modal-content {
    background-color:var(--mc-tool-cream); border-radius:var(--radius-md, 20px); width:90%;
    max-width:900px;
    position:relative; box-shadow:0 4px 20px rgba(0,0,0,.2);
    animation:fadeIn .3s ease-in-out;
}
.booking-modal-close {
    position:absolute; top:15px; right:20px; color:#7a8d7f;
    font-size:28px; font-weight:700; cursor:pointer; line-height:1;
}
.booking-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0;
}
.booking-summary {
    background-color:var(--mc-tool-white); padding:30px; border-right:1px solid var(--mc-tool-line);
    border-radius:var(--radius-md, 20px) 0 0 var(--radius-md, 20px);
}
.booking-summary .booking-header {
    font-size:1.1rem; font-weight:700; margin-top:0;
    margin-bottom:18px; color:#2c3e34;
}
.summary-specialist {
    display:flex; align-items:center; gap:15px; margin-bottom:20px;
}
.summary-thumb {
    width:60px; height:60px; border-radius:50%; object-fit:cover;
}
.summary-name {
    font-weight:600; font-size:1.1rem; color:#333;
}
.booking-hr {
    border:0; height:1px; background-color:#eee; margin:20px 0;
}
.summary-service-name, .summary-date {
    font-weight:600; margin-bottom:5px; color:#333; font-size:1.05em;
}
.summary-service-meta, .summary-date-time {
    color:#555;
}
.summary-price {
    margin-left: 10px;
    font-weight: bold;
}
.summary-location-name {
    font-weight: 600;
}

.booking-selection {
    padding:24px;
}
.booking-selection h4 {
    font-size:1.05rem; margin-top:0; margin-bottom:16px;
    color:#2c3e34;
}
.booking-form {
    display:flex; flex-direction:column; gap:15px;
}
.booking-form input {
    width:100%; padding:12px; border:1px solid rgba(61,107,79,.15); border-radius:8px;
    font-size:1rem; background-color:#fff;
}
.booking-form button.mc-button-primary {
    width: 100%; padding: 14px; background-color:var(--mc-primary-hover, #2d5340); color:#fff;
    border: none; border-radius: var(--radius-pill, 999px); font-size: 1rem;
    font-weight: 700; cursor: pointer; transition: background .35s ease, transform .35s ease;
}
.booking-form button.mc-button-primary:hover {
    background-color: var(--mc-primary, #3d6b4f);
    transform: translateY(-1px);
}

/* (FIX) Wyróżniona polityka odwołania w modalu */
.booking-tos {
    margin-top: 16px;
    padding: 10px 14px;
    background-color: #fefce8;
    border: 1px solid #fde047;
    border-radius: var(--radius-sm, 12px);
    font-size: 0.85rem;
    line-height: 1.5;
    color: #7a8d7f;
    text-align: center;
}

@media(max-width: 800px) {
    .booking-grid { grid-template-columns: 1fr; }
    .booking-summary { border-right: 0; border-bottom: 1px solid rgba(61,107,79,.10); border-radius: 12px 12px 0 0; }
    .booking-selection { border-radius: 0 0 12px 12px; }
}

/* --- Style dla limitu slotów --- */
.hidden-slot {
    display: none;
}
.show-more-slots-btn {
    background: none; border: none; color: var(--mc-primary, #2d5340); cursor: pointer;
    font-weight: 600; font-size: 0.9em; text-align: center;
    padding: 8px 0; width: 100%;
}
.show-more-slots-btn:hover {
    text-decoration: underline;
}

/* === NOWE STYLE DLA ZAJĘTYCH TERMINÓW W MINI-KALENDARZU === */
.calendar-slot.unavailable {
    background-color: #fee2e2 !important; /* Czerwone tło */
    border-color: #fca5a5 !important;
    color: #991b1b !important; /* Ciemnoczerwony tekst */
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none; /* Ignoruj kliknięcia */
}

.calendar-slot.unavailable:hover {
    background-color: #fee2e2 !important; /* Upewnij się, że hover nie zmienia wyglądu */
    color: #991b1b !important;
    transform: none;
}
/* Przykładowy styl do dodania */
/* === NOWE STYLE: Poprawiony wygląd zgody (v3 - ostateczna) === */
.booking-consent-wrapper {
    margin-top: 15px;
    font-size: 0.9em;
    line-height: 1.5;
}

.booking-consent-wrapper label {
    display: grid; /* Używamy siatki do precyzyjnego ułożenia */
    grid-template-columns: auto 1fr; /* Pierwsza kolumna (checkbox) dopasuje się, druga (tekst) zajmie resztę miejsca */
    gap: 10px; /* Odstęp między checkboxem a tekstem */
    align-items: center; /* Wyrównanie w pionie */
    cursor: pointer;
}

.booking-consent-wrapper input[type="checkbox"] {
    margin: 0;
    /* Resetujemy domyślne style przeglądarki, które mogą psuć układ */
}
/* === NOWE STYLE: Walidacja zgody (ramka i dymek) === */
.booking-consent-wrapper.invalid-consent {
    position: relative;
    border: 1px solid #dc3545; /* Czerwona ramka */
    background-color: #fbe9e7;
    border-radius: 8px; /* Dopasuj do stylu .booking-tos */
    padding: 12px 15px; /* Dopasuj do stylu .booking-tos */
}

.booking-consent-wrapper.invalid-consent::after {
    content: 'Wymagane';
    position: absolute;
    top: -22px;
    right: 15px;
    background-color: #dc3545;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}
/* === NOWE STYLE: Obsługa "nieaktywnego" przycisku rezerwacji === */
.booking-form button[type="submit"].is-inactive {
    background-color: #adb5bd; /* Szary kolor tła */
    cursor: not-allowed; /* Kursor "zakazu" */
    opacity: 0.7;
}

/* === POPRAWKA v2: Niestandardowy, duży checkbox dla urządzeń mobilnych === */
@media (max-width: 768px) {
    .booking-consent-wrapper label {
        /* Ustawiamy elastyczny kontener dla lepszego wyrównania */
        display: flex;
        align-items: flex-start; /* Wyrównuje do góry, idealne dla wieloliniowego tekstu */
        gap: 15px; /* Większy odstęp między polem a tekstem */
        padding: 10px 0; /* Zwiększa klikalny obszar całej etykiety */
    }

    .booking-consent-wrapper input[type="checkbox"] {
        /* 1. Resetujemy i ukrywamy domyślny wygląd checkboxa */
        -webkit-appearance: none;
        appearance: none;
        background-color: #fff;
        margin: 0;

        /* 2. Definiujemy wygląd naszego nowego, dużego kwadratu */
        font: inherit;
        color: currentColor;
        width: 28px;  /* <<< ZNACZNIE WIĘKSZY ROZMIAR */
        height: 28px; /* <<< ZNACZNIE WIĘKSZY ROZMIAR */
        border: 2px solid #a0aec0; /* Subtelna szara ramka */
        border-radius: 6px; /* Zaokrąglone rogi */
        transform: translateY(3px); /* Delikatne wyrównanie w pionie */
        flex-shrink: 0; /* Zapobiega kurczeniu się elementu */
        
        /* 3. Przygotowujemy płynne przejście dla animacji zaznaczenia */
        transition: all 0.2s ease-in-out;
        
        /* 4. Magia do wycentrowania przyszłego "ptaszka" */
        display: grid;
        place-content: center;
        cursor: pointer;
    }

    /* 5. Tworzymy "ptaszek" za pomocą pseudo-elementu ::before */
    .booking-consent-wrapper input[type="checkbox"]::before {
        content: "";
        width: 16px;  /* Rozmiar ptaszka */
        height: 16px;
        transform: scale(0); /* Domyślnie ukryty (skala 0) */
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--mc-primary, #3d6b4f); /* Kolor ptaszka z motywu */
        
        /* Kształt "ptaszka" wycięty za pomocą clip-path */
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    /* 6. Styl dla ZAZNACZONEGO checkboxa */
    .booking-consent-wrapper input[type="checkbox"]:checked {
        background-color: var(--mc-primary, #3d6b4f); /* Tło zmienia kolor na główny */
        border-color: var(--mc-primary, #3d6b4f);
    }
    
    /* 7. Pokazujemy "ptaszek" w zaznaczonym checkboxie */
    .booking-consent-wrapper input[type="checkbox"]:checked::before {
        transform: scale(1); /* Skalujemy ptaszek do pełnego rozmiaru */
    }
}

/* === FIX MOBILNY DLA KALENDARZA === */
@media (max-width: 768px) {
    /* Poprawka dla modala rezerwacji */
    .booking-time-slots {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
    }
    .booking-time-slots .time-slot {
        white-space: nowrap !important;
        padding: 10px 2px !important;
    }
}

/* === ZMIANA USŁUGI W KROKU 1 MODALA === */
/* mc-v2-final-summary ma zielone gradient tło — nadpisujemy kolory żeby przycisk był widoczny */
.mc-v2-final-summary .mc-v2-sum-row-service {
    align-items: center !important;
}
.mc-v2-final-summary .mc-v2-sum-service-cell {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: #fff !important;
    font-size: inherit !important;
}
.mc-v2-final-summary .mc-v2-sum-service-cell strong {
    color: #fff !important;
}
.mc-v2-final-summary .mc-v2-change-service-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.mc-v2-final-summary .mc-v2-change-service-btn:hover {
    background: #fff !important;
    color: var(--mcv2-green, #3d6b4f) !important;
    transform: translateY(-1px);
}
.mc-v2-final-summary .mc-v2-change-service-panel {
    grid-column: 1 / -1;
    margin-top: 8px !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px;
    color: #334155 !important;
}
.mc-v2-final-summary .mc-v2-change-service-label {
    display: block !important;
    font-size: 11px !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.mc-v2-final-summary .mc-v2-change-service-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #1e293b !important;
    cursor: pointer;
    font-family: inherit;
}
.mc-v2-change-service-feedback {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
}
.mc-v2-change-service-feedback.mc-v2-change-success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.mc-v2-change-service-feedback.mc-v2-change-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Flash karty po powrocie z modala (gdy slot się nie mieści) */
.mc-card-flash {
    animation: mc-card-flash-anim 1.2s ease;
}
@keyframes mc-card-flash-anim {
    0%   { box-shadow: 0 0 0 0 rgba(61, 107, 79, 0.4); }
    50%  { box-shadow: 0 0 0 8px rgba(61, 107, 79, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(61, 107, 79, 0); }
}

/* === TRYB WIDGET (partner embed) ===
   Widget renderuje się 1:1 jak [umow-wizyte] na produkcji, z dwiema różnicami:
   1. Ograniczona szerokość (max-width) + wycentrowany — żeby nie rozjeżdżał się na full screen
      na stronach partnerów które nie mają własnego wrappera
   2. Bez filtrów (data-widget-filters NIEustawione) → sidebar ukryty, węższy kontener

   Mobile zachowanie dziedziczy z głównych reguł (sidebar slide-in z lewej max 400px,
   bez żadnych override'ów). */

/* Wycentrowany kontener z rozsądnym max-width */
#mc-umow-wizyte-app[data-widget="1"] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Widget BEZ filtrów — kompakt, ukryty sidebar + toggle */
#mc-umow-wizyte-app[data-widget="1"]:not([data-widget-filters="1"]) {
    max-width: 720px;
}
#mc-umow-wizyte-app[data-widget="1"]:not([data-widget-filters="1"]) .mc-umow-wizyte__sidebar,
#mc-umow-wizyte-app[data-widget="1"]:not([data-widget-filters="1"]) .mc-umow-wizyte__mobile-toggle {
    display: none !important;
}