/* --- Ogólne style karty specjalisty --- */
.specialist-card.improved {
  background: var(--mc-white, #fff);
  border-radius: var(--radius-md, var(--mc-radius, 20px));
  box-shadow: 0 2px 20px rgba(70, 80, 130, 0.1);
  display: flex;
  flex-direction: column;
  padding: 28px 32px 24px;
  position: relative;
  margin-bottom: 1.5em;
  font-family: var(--mc-font, inherit);
}

.specialist-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
}

.specialist-photo-side {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--radius-sm, var(--mc-radius, 12px));
  border: 3px solid var(--mc-primary, var(--specjalisci-main, #3d6b4f));
  box-shadow: 0 2px 12px rgba(90, 120, 160, 0.12);
}

.specialist-header-info {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.specialist-name {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--mc-primary, var(--specjalisci-main, #3d6b4f));
  margin-bottom: 1px;
  letter-spacing: -0.3px;
}

.specialist-title {
  font-size: 0.95rem;
  color: var(--mc-text-light, #7a8d7f);
  margin-bottom: 1px;
  font-weight: 600;
}

.specialist-specializations {
  font-size: 0.88rem;
  color: var(--mc-text-light, #4a5d50);
}

.specialist-description {
  font-size: 0.95rem;
  color: var(--mc-text, #2c3e34);
  margin-bottom: 4px;
  line-height: 1.6;
}

.specialist-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.cta-btn {
  background: var(--mc-bg, #faf7f2);
  color: var(--mc-primary, var(--specjalisci-main, #3d6b4f));
  padding: 9px 18px;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  font-weight: 600;
  border: none;
  font-size: 0.9rem;
  box-shadow: 0 1px 4px rgba(70,110,170,0.08);
  transition: background 0.16s, color 0.16s;
  cursor: pointer;
  font-family: var(--mc-font, inherit);
}

.cta-btn:hover {
  background: var(--mc-primary, var(--specjalisci-main, #3d6b4f));
  color: var(--mc-white, #fff);
}

.cta-free {
  background: var(--mc-accent, var(--specjalisci-cta, #b7ebc4));
  color: #2d5340;
  border: 2px solid #8fd09d;
}

.cta-free:hover {
  background: #2d5340;
  color: #fff;
  border-color: #2d5340;
}

.podcast-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    transition: transform 0.14s;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
    border: none;
    outline: none;
    text-decoration: none;
    cursor: pointer;
}
.podcast-btn svg { display: block; }
.podcast-btn:hover { transform: scale(1.09); box-shadow: 0 2px 12px rgba(0,0,0,0.13); }


/* --- Style modala rezerwacji --- */

.booking-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.booking-modal-content {
    background-color: #faf7f2;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease-in-out;
}

.booking-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #7a8d7f;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.booking-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
}

.booking-summary {
    background-color: #fff;
    padding: 25px;
    border-right: 1px solid rgba(61,107,79,.10);
    border-radius: 12px 0 0 12px;
}

.booking-summary .booking-header {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

.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;
}

.summary-service-meta, .summary-date-time {
    color: #555;
}

.booking-selection {
    padding: 25px;
}

.booking-selection h4 {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.booking-step {
    margin-bottom: 25px;
}

.booking-service-select, .booking-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #fff;
}

.date-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.date-nav .date-display {
    font-weight: 600;
    color: #333;
}

/* (FIX) Poprawione centrowanie ikon w przyciskach */
.date-nav button {
    background: #fff;
    border: 1px solid rgba(61,107,79,.18);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #555;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.date-nav button:hover {
    background-color: #f0f0f0;
}


.date-buttons {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.date-buttons button {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 5px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.date-buttons button .day-name {
    font-size: 0.8rem;
    color: #555;
}
.date-buttons button .day-number {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
}

.date-buttons button.day-available {
    background-color: #e8f5e9;
    border-color: #a5d6a7;
}
.date-buttons button.day-unavailable {
    background-color: #f5f5f5;
    border-color: rgba(61,107,79,.10);
    cursor: not-allowed;
    pointer-events: none;
}
.date-buttons button.day-unavailable .day-name,
.date-buttons button.day-unavailable .day-number {
    color: #bdbdbd;
}

.date-buttons button:hover:not([disabled]):not(.day-unavailable) {
    border-color: #3d6b4f;
    color: #3d6b4f;
}
.date-buttons button.selected {
    background-color: #3d6b4f;
    color: #fff;
    border-color: #3d6b4f;
}
.date-buttons button.selected .day-name,
.date-buttons button.selected .day-number {
    color: #fff;
}

.booking-time-slots {
    display: grid;
    /* To zapewnia, że przycisk ma minimum 80px. Jeśli ekran jest mały, 
       automatycznie zrobi mniej kolumn (np. 3 zamiast 4), ale przyciski będą czytelne */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 20px;
    max-height: 250px;
    overflow-y: auto;
    padding: 2px; /* Lekki padding, żeby cień active nie ucinał się */
}

.booking-time-slots .time-slot,
.booking-time-slots .time-slot-unavailable {
    /* To jest kluczowe: */
    white-space: nowrap !important; /* ZABRANIA łamania linii */
    
    padding: 12px 5px !important;   /* Większy obszar dla palca */
    text-align: center;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    width: 100%; /* Rozciągnij na całą szerokość komórki siatki */
    box-sizing: border-box;
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.booking-form button {
    width: 100%;
    padding: 14px;
    background-color: #2d5340;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

/* === NOWE, POPRAWIONE STYLE DLA POLITYKI ODWOŁANIA === */
.booking-tos {
    margin-top: 12px;
    padding: 10px 14px;
    background-color: var(--mc-bg, #eef2f7);
    border: 1px solid #d1dce8;
    border-radius: var(--radius-sm, var(--mc-radius, 12px));
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--mc-text, #4a5d50);
    text-align: center;
}

/* --- Legenda --- */
.booking-legend {
    margin-top: 15px;
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #555;
}
.legend-item {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(61,107,79,.18);
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 5px;
}
.legend-item.available {
    background-color: #e8f5e9;
    border-color: #a5d6a7;
}
.legend-item.unavailable {
    background-color: #f5f5f5;
    border-color: rgba(61,107,79,.10);
}


@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@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;
    }
    .date-buttons {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 600px) {
    .date-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
    .booking-modal-content {
       margin: 5% auto;
    }
}



.specialist-availability-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 4px 0;
  color: var(--mc-text-light, #5a678c);
}
.availability-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 500;
}
.availability-icon .dashicons {
  font-size: 16px;
  line-height: 1;
  height: auto;
  width: auto;
}

.specialist-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-top: 8px;
}

.specialist-tag {
  background-color: var(--mc-bg, #f0f4f9);
  color: var(--mc-text-light, #3e5f8a);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid #d9e2ef;
}

/* === STYLE DLA ROZWIJANEGO OPISU === */

.specialist-description.collapsible {
  position: relative;
  max-height: 85px; /* ok. 3-4 linie tekstu */
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
  margin-bottom: 0;
}

.specialist-description.collapsible.is-expanded {
  max-height: 1000px; 
}

/* Nakładka z gradientem, która sugeruje, że jest więcej tekstu */
.specialist-description.collapsible:not(.is-expanded)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #fff 90%);
  pointer-events: none; /* Pozwala klikać przez gradient */
}

.read-more-toggle {
  background: none;
  border: none;
  color: var(--mc-primary, var(--specjalisci-main, #3d6b4f));
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  margin-top: 4px;
  font-size: 0.88rem;
}

.read-more-toggle:hover {
  text-decoration: underline;
}


/* === STYLE DLA HIERARCHII PRZYCISKÓW === */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cta-btn .dashicons {
  font-size: 17px;
  line-height: 1;
  height: auto;
  width: auto;
}
/* Przycisk główny */
.cta-btn.cta-primary {
  background: var(--mc-primary, var(--specjalisci-main, #3d6b4f));
  color: var(--mc-btn-text, #fff);
  border: 2px solid var(--mc-primary, var(--specjalisci-main, #3d6b4f));
}
.cta-btn.cta-primary:hover {
  background: var(--mc-primary-hover, var(--sage-dark, #2d5340));
  border-color: var(--mc-primary-hover, var(--sage-dark, #2d5340));
  color: var(--mc-btn-text, #fff);
}
/* Przycisk bezpłatnej konsultacji */
.cta-btn.cta-free {
  background: transparent;
  color: #2d5340;
  border: 2px solid var(--mc-accent, #b7ebc4);
}
.cta-btn.cta-free:hover {
  background: #e8f5e9;
  border-color: #a5d6a7;
  color: #2d5340;
}


/* === EFEKT HOVER DLA KARTY === */
.specialist-card.improved {
  /* ...istniejące style... */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.specialist-card.improved:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 40px rgba(70, 80, 130, 0.18);
}



/* === ZMODYFIKOWANE STYLE PRZYCISKÓW CTA === */
.cta-btn.cta-phone {
    font-size: 0.95rem;
    padding: 9px 18px;
}

/* === STYL DLA NAJBLIŻSZEGO TERMINU === */
.next-available-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--mc-text-light, #5a678c);
}
.next-available-slot .dashicons {
  font-size: 15px;
  line-height: 1;
  height: auto;
  width: auto;
  color: var(--mc-primary, var(--specjalisci-main, #3d6b4f));
}
.next-available-slot strong {
  color: var(--mc-text, #333);
}

/* === NOWE STYLE DLA SEKCJI "BRAK TERMINÓW" === */
.no-slots-info {
    margin-top: 12px;
    padding: 12px;
    border: 2px dashed #d9e2ef;
    border-radius: var(--radius-sm, var(--mc-radius, 12px));
    text-align: center;
    background-color: var(--mc-bg, #f8faff);
}
.no-slots-info p {
    margin: 0;
    line-height: 1.5;
    color: var(--mc-text-light, #4a5d50);
    font-size: 0.9rem;
}
.no-slots-info p strong {
    color: var(--mc-primary, var(--specjalisci-main, #3d6b4f));
    display: block;
    font-size: 0.95em;
    margin-bottom: 3px;
}


/* === NOWE STYLE DLA SEKCJI PODCASTÓW (ABY BYŁY ZAWSZE RAZEM) === */
.specialist-podcast-row {
    /* Ten kontener zbiera przyciski podcastów w jednym miejscu */
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 15px;
}
/* Zmieniamy .specialist-cta-row, aby nie miał tak dużego marginesu, gdy nie ma pod nim terminu */
.specialist-cta-row {
    margin-top: 7px;
    margin-bottom: 0; /* Usunięty margines dolny */
    /* ... reszta stylów bez zmian ... */
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}








/* === ZAKTUALIZOWANE STYLE DLA ELEGANCKIEJ WSKAZÓWKI === */

.specialist-name-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}
.specialist-name {
  flex-grow: 1;
}

.specialist-podcast-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.specialist-podcast-icons {
  display: flex;
  gap: 10px;
}

.podcast-tooltip {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background-color: #3e5f8a; /* Lżejszy kolor */
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  z-index: 10;
  font-family: 'Poppins', sans-serif; /* Proponuję czcionkę, która nie jest Comic Sans, ale jest bardziej 'miękka' i przyjazna :) */
}
.podcast-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #3e5f8a;
}

/* NOWA LOGIKA: Pokaż dymek po najechaniu na CAŁĄ KARTĘ */
.specialist-card.improved:hover .podcast-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


/* === NOWE STYLE DLA ZAJĘTYCH TERMINÓW === */
.booking-time-slots .time-slot-unavailable {
    padding: 10px;
    border: 1px solid rgba(61,107,79,.10);
    color: #bdbdbd;
    background-color: #f5f5f5;
    border-radius: 8px;
    text-align: center;
    text-decoration: line-through;
    cursor: not-allowed;
    transition: all 0.2s;
}

/* === POPRAWKI DLA NIEDOSTĘPNYCH DAT W PRZESZŁOŚCI === */

/* Styl dla przycisków, które są zablokowane (przeszłość) */
.date-buttons button[disabled] {
    background-color: #f5f5f5 !important; /* Ważne, aby nadpisać inne style */
    border-color: rgba(61,107,79,.10) !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Upewnij się, że tekst wewnątrz zablokowanego przycisku też jest szary */
.date-buttons button[disabled] .day-name,
.date-buttons button[disabled] .day-number {
    color: #bdbdbd !important;
}

/* Zablokuj efekt :hover dla wszystkich niedostępnych i zablokowanych przycisków */
.date-buttons button.day-unavailable:hover,
.date-buttons button[disabled]:hover {
    border-color: rgba(61,107,79,.10) !important; /* Pozostaw szarą ramkę */
}
/* 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;
}

body.mc-booking-lock { overflow: hidden; }

/* overlay/modał */
.mc-booking-modal,
.booking-modal {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* pudełko modala */
.mc-booking-modal .booking-modal-content,
.booking-modal .booking-modal-content{
  max-height: calc(100dvh - 16px);
  overflow: hidden;

  /* kluczowe: flex + min-height:0 daje działający scroll w środku */
  display: flex;
  flex-direction: column;
}

/* jeśli masz układ grid w środku, musi mieć min-height:0 */
.mc-booking-modal .booking-grid,
.booking-modal .booking-grid{
  flex: 1;
  min-height: 0; /* <<<<<< KLUCZ */
}

/* scrollowalny panel z krokami */
.mc-booking-modal .booking-selection,
.booking-modal .booking-selection{
  min-height: 0; /* <<<<<< KLUCZ */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
    .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;
    }
    .date-buttons { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 460px) {
    .date-buttons { grid-template-columns: repeat(7, 1fr); }
}

/* Przyciski “Stacjonarnie / Online” – odstęp + wygoda kliku */
.location-selection-buttons{
    display:flex;
    gap:12px;
    margin-top:10px;
}
.location-selection-buttons .location-btn{
    flex:1;
    min-height:48px;
    border-radius:12px;
    border:1px solid #ddd;
    background:#fff;
    font-weight:700;
}
.location-selection-buttons .location-btn.selected{
    background:#3d6b4f;
    border-color:#3d6b4f;
    color:#fff;
}

/* Pokazujemy tylko dni, które mają terminy */
.date-buttons button.day-unavailable{
    display:none !important;
}

/* Komunikat “brak terminów w tym tygodniu” */
.mc-week-empty{
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.35;
}

/* Podsumowanie przed CTA */
.booking-final-summary{
    margin-top: 14px;
    padding: 12px 12px;
    background: #fff;
    border: 1px solid rgba(61,107,79,.10);
    border-radius: 10px;
    display:grid;
    gap: 6px;
    font-size: 0.95rem;
}
.booking-final-summary .final-row{
    display:flex;
    justify-content:space-between;
    gap: 10px;
}
.booking-final-summary .final-row span{ color: #555; }

/* Checkbox zgód – czytelnie na mobile */
.booking-consent-wrapper label{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size: 0.95rem;
    line-height: 1.35;
}
.booking-consent-wrapper input{
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color: #2d5340;
}

/* === POPRAWKI RWD DLA KARTY SPECJALISTY === */
@media (max-width: 768px) {

    /* ▼▼▼ DODAJ TEN FRAGMENT KODU ▼▼▼ */

    /* Zmniejszamy margines dolny karty, aby były bliżej siebie */
    .specialist-card.improved {
        margin-bottom: 1.5em; 
    }

    /* Jeśli karty są w kontenerze, który ma własne paddingi, 
       możemy je zredukować, aby karty były bliżej krawędzi.
       Użyjemy selektora, który prawdopodobnie pasuje do Twojej struktury. */
    .specialists-list {
        /* Zakładając, że Twoje karty są w kontenerze o klasie .specialists-list,
           ten kod zredukuje jego wewnętrzne odstępy */
        padding-left: 5px;
        padding-right: 5px;
    }

    /* ▲▲▲ KONIEC FRAGMENTU DO DODANIA ▲▲▲ */


    /* 1. Zmniejszamy odstępy wewnątrz całej karty */
    .specialist-card.improved {
        padding: 15px 10px;
    }
    
    /* ... reszta istniejących poprawek RWD ... */

}
@media (max-width: 768px) {

    /* 1. Zmniejszamy odstępy wewnątrz całej karty */
    .specialist-card.improved {
        padding: 25px 20px;
    }

    /* 2. Nagłówek przechodzi w układ kolumnowy */
    .specialist-header-row {
        flex-direction: column; /* Zdjęcie i dane jedno pod drugim */
        gap: 20px; /* Zmniejszamy odstęp */
        text-align: center; /* Centrujemy tekst pod zdjęciem */
    }

    /* 3. Zmniejszamy rozmiar zdjęcia */
    .specialist-photo-side {
        width: 120px;
        height: 120px;
    }

    /* 4. Zmniejszamy czcionki i marginesy w nagłówku */
    .specialist-name {
        font-size: 1.8rem; /* Mniejsza czcionka dla nazwiska */
        line-height: 1.2;
    }
    .specialist-title {
        font-size: 1.1rem;
    }
    .specialist-specializations {
        font-size: 1rem;
    }

    /* 5. Ikony dostępności układają się w jednej linii i są wyśrodkowane */
    .specialist-availability-icons {
        justify-content: center;
        gap: 12px;
    }

    /* 6. Opis specjalisty - mniejsza czcionka dla lepszej czytelności */
    .specialist-description {
        font-size: 1.1rem;
        text-align: left; /* Przywracamy wyrównanie do lewej dla dłuższych tekstów */
    }

    /* 7. Tagi ze specjalizacjami */
    .specialist-tags-container {
        justify-content: center; /* Centrujemy tagi */
    }

    /* 8. Przyciski akcji (CTA) */
    .specialist-cta-row {
        flex-direction: column; /* Przyciski jeden pod drugim */
        align-items: stretch; /* Rozciągamy je na całą szerokość */
        gap: 12px;
    }
    .cta-btn {
        width: 100%; /* Przyciski zajmują pełną szerokość */
        justify-content: center; /* Centrujemy tekst wewnątrz przycisku */
        font-size: 1.1rem;
    }

    /* 9. Wiersz z podcastami */
    .specialist-podcast-row {
        justify-content: center;
    }
    .specialist-name-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .podcast-tooltip {
        /* Poprawka pozycji dymka na mobilnych */
        right: 50%;
        transform: translateX(50%);
        top: -40px;
    }
    .podcast-tooltip::after {
        /* Strzałka dymka skierowana w dół */
        left: 50%;
        top: 100%;
        margin-left: -5px;
        border-color: #3e5f8a transparent transparent transparent;
    }
    
    /* 10. Informacja o braku terminów */
    .no-slots-info p {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
  
  /* Celujemy w główny kontener strony, w którym znajduje się lista specjalistów.
     To jest najbardziej prawdopodobny selektor, który nadaje boczne marginesy. */
  .elementor-section-wrap .elementor-container,
  .entry-content,
  main .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* Zerujemy marginesy dla samej listy, aby wypełniła nową przestrzeń */
  .specialists-list {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

}

/* === KOD DO DODANIA: Powiększenie checkboxa zgody na mobile === */
@media (max-width: 768px) {
    .booking-consent-wrapper label {
        /* Zmieniamy wyrównanie, aby większy checkbox dobrze wyglądał z tekstem */
        align-items: flex-start; 
        gap: 12px; /* Zwiększamy lekko odstęp */
    }

    .booking-consent-wrapper input[type="checkbox"] {
        /* 1. Ukrywamy domyślny, brzydki checkbox */
        -webkit-appearance: none;
        appearance: none;
        background-color: #fff;
        margin: 0;

        /* 2. Tworzymy nowy, większy element */
        font: inherit;
        color: currentColor;
        width: 28px;  /* <<< WIĘKSZY ROZMIAR */
        height: 28px; /* <<< WIĘKSZY ROZMIAR */
        border: 2px solid #a0aec0;
        border-radius: 6px;
        transform: translateY(2px); /* Delikatne wyrównanie w pionie */
        
        /* 3. Ustawiamy płynne przejście dla zaznaczenia */
        transition: all 0.2s ease-in-out;
        
        /* 4. Przygotowujemy miejsce na "ptaszka" */
        display: grid;
        place-content: center;
        cursor: pointer;
    }

    .booking-consent-wrapper input[type="checkbox"]::before {
        content: "";
        width: 16px;
        height: 16px;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--mc-primary, var(--sage, #3d6b4f)); /* Kolor ptaszka z motywu */
        
        /* Magia tworząca "ptaszek" */
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    /* 5. Styl dla zaznaczonego checkboxa */
    .booking-consent-wrapper input[type="checkbox"]:checked {
        background-color: var(--mc-primary, var(--sage, #3d6b4f));
        border-color: var(--mc-primary, var(--sage, #3d6b4f));
    }
    
    .booking-consent-wrapper input[type="checkbox"]:checked::before {
        transform: scale(1);
    }
}

/* === UWAGA: Ten kod działa również dla modala w [umow-wizyte] === */
/* Ponieważ oba modale używają tej samej klasy .booking-consent-wrapper */

/* === Shortcode: [specjalisci-do-promocji] === */
.mc-low-occupancy-shortcode {
  font-family: var(--mc-font, inherit);
  color: var(--mc-text, #2c3e34);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
}

.mc-low-occupancy-shortcode *,
.mc-low-occupancy-shortcode *::before,
.mc-low-occupancy-shortcode *::after {
  box-sizing: border-box;
}

.mc-low-occupancy-header {
  margin-bottom: 22px;
}

.mc-low-occupancy-header h2 {
  margin: 0 0 8px;
  color: var(--mc-primary, var(--sage, #3d6b4f));
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0;
}

.mc-low-occupancy-header p {
  margin: 0;
  max-width: 720px;
  color: var(--mc-text-light, #7a8d7f);
  line-height: 1.6;
}

.mc-low-occupancy-grid.specialists-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.mc-low-occupancy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  background: var(--mc-white, #fff);
  border: 1px solid rgba(61, 107, 79, .10);
  border-radius: var(--radius-md, var(--mc-radius, 20px));
  padding: 24px 20px 20px;
  box-shadow: 0 8px 30px rgba(61, 107, 79, .08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mc-low-occupancy-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--mc-primary, var(--sage, #3d6b4f)), #d9b56d);
}

.mc-low-occupancy-card:hover {
  transform: translateY(-3px);
  border-color: rgba(61, 107, 79, .18);
  box-shadow: 0 14px 42px rgba(61, 107, 79, .13);
}

.mc-low-occupancy-top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mc-low-occupancy-photo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: var(--radius-sm, 12px);
  object-fit: cover;
  border: 2px solid var(--mc-primary, var(--sage, #3d6b4f));
  background: var(--mc-bg, #faf7f2);
}

.mc-low-occupancy-photo-fallback {
  display: grid;
  place-items: center;
  color: var(--mc-primary, var(--sage, #3d6b4f));
  font-size: 1.4rem;
  font-weight: 700;
}

.mc-low-occupancy-person {
  min-width: 0;
}

.mc-low-occupancy-person h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 4px;
  color: var(--mc-primary, var(--sage, #3d6b4f));
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.mc-low-occupancy-name {
  min-width: 0;
}

.mc-low-occupancy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 20px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(217, 181, 109, .42);
  border-radius: var(--radius-pill, 999px);
  background: #f7ead0;
  color: #3d6b4f;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mc-low-occupancy-person p {
  margin: 0;
  color: var(--mc-text-light, #7a8d7f);
  font-size: .88rem;
  line-height: 1.35;
}

.mc-low-occupancy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mc-low-occupancy-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: var(--radius-pill, 999px);
  background: var(--mc-bg, #faf7f2);
  color: var(--mc-text-light, #4a5d50);
  border: 1px solid rgba(61, 107, 79, .10);
  font-size: .76rem;
  font-weight: 600;
}

.mc-low-occupancy-slot {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--mc-text-light, #4a5d50);
  font-size: .88rem;
  line-height: 1.45;
}

.mc-low-occupancy-slot .dashicons {
  width: auto;
  height: auto;
  margin-top: 1px;
  color: var(--mc-primary, var(--sage, #3d6b4f));
  font-size: 16px;
  line-height: 1;
}

.mc-low-occupancy-slot strong {
  color: var(--mc-text, #2c3e34);
  font-weight: 700;
}

.mc-low-occupancy-forms {
  color: var(--mc-text-light, #7a8d7f);
  font-size: .8rem;
  line-height: 1.35;
}

.mc-low-occupancy-actions {
  margin-top: auto;
}

.mc-low-occupancy-actions .cta-btn {
  width: 100%;
  justify-content: center;
}

.mc-low-occupancy-empty {
  color: var(--mc-text-light, #7a8d7f);
  margin: 0;
}

@media (max-width: 768px) {
  .mc-low-occupancy-grid.specialists-list {
    grid-template-columns: 1fr;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mc-low-occupancy-card {
    padding: 22px 18px 18px;
  }
}

@container (max-width: 620px) {
  .mc-low-occupancy-grid.specialists-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@container (max-width: 360px) {
  .mc-low-occupancy-card {
    padding: 20px 16px 16px;
  }

  .mc-low-occupancy-top {
    align-items: flex-start;
  }

  .mc-low-occupancy-photo {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }
}