/**
 * Mito MediRaty - style
 *
 * Badge na produkcie, sekcja wniosku na stronie podziekowania, checkbox RODO,
 * box mieszanego koszyka.
 *
 * Kolory/radiusy/typografia z tokenow design systemu mitoterapii (tokens.css,
 * `var(--mito-*)`). Brand MediRaty (granat #1a3a7e) zostal zastapiony firmowym
 * turkusem mitoterapii - spojnie z reszta sklepu.
 *
 * Dialog rozdzielenia koszyka uzywa WSPOLNEGO komponentu `.mito-cart-modal*`
 * (cart-type-guard.css) - jeden wyglad dla obu dialogow. Markup buduje mediraty.js,
 * a arkusz cart-type-guard.css jest doladowany na checkout (functions.php).
 *
 * @author lukuro
 */

/* ---------- Badge na karcie produktu ---------- */
.mito-mediraty-badge {
    position: relative;
    display: inline-block;
    margin: 0 0 6px;
    padding: 2px 10px;
    font-size: var(--mito-font-size-sm);
    font-weight: var(--mito-font-weight-medium);
    line-height: 1.6;
    color: var(--mito-color-on-primary);
    background: var(--mito-color-primary);
    border-radius: var(--mito-radius-pill);
    letter-spacing: .02em;
}

/* Subtelne lsnienie - OPT-IN (klasa --shine sterowana kontrolka elementu Bricks,
 * domyslnie wylaczona). Cienki diagonalny odblysk przejezdza raz na cykl, potem pauza.
 * Czestotliwosc (pelny cykl) z CSS var `--mito-mediraty-shine-interval` (inline z elementu,
 * fallback 6s). Bardzo delikatny (niska krycie), wylaczany przy prefers-reduced-motion. */
.mito-mediraty-badge--shine {
    /* przycina przesuwajacy sie odblysk do ksztaltu pigulki */
    overflow: hidden;
    isolation: isolate;
}

.mito-mediraty-badge--shine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 70%
    );
    transform: translateX(-120%);
    animation: mito-mediraty-shine var(--mito-mediraty-shine-interval, 6s) ease-in-out infinite;
    pointer-events: none;
}

/* Sweep w pierwszych ~12% cyklu (snappy niezaleznie od dlugosci cyklu), reszta = pauza. */
@keyframes mito-mediraty-shine {
    0%   { transform: translateX(-120%); }
    12%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .mito-mediraty-badge--shine::after {
        animation: none;
        display: none;
    }
}

/* Wariant klikalny (element Bricks z wlaczonym dialogiem) - reset <button> + interakcja. */
.mito-mediraty-badge--interactive {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.mito-mediraty-badge--interactive:hover {
    background: var(--mito-color-primary-hover);
}

.mito-mediraty-badge--interactive:active {
    transform: translateY(1px);
}

.mito-mediraty-badge--interactive:focus-visible {
    outline: 2px solid var(--mito-color-primary);
    outline-offset: 2px;
}

/* ---------- Opis bramki + checkbox RODO pod bramka ----------
 * „Drobny druk" spojny z opisami innych bramek (np. tpay): mniejszy font,
 * wyciszony kolor, ten sam line-height co reszta opisow metod platnosci. */
.mito-mediraty-desc {
    margin: 0 0 10px;
    font-size: var(--mito-font-size-sm);
    line-height: var(--mito-line-height-base);
    color: var(--mito-color-text-muted);
}

.mito-mediraty-rodo {
    margin-top: 10px;
}

/* Dopasowanie do „ladnej" zgody WooCommerce (.woocommerce-terms-and-conditions-checkbox-text):
 * maly font 13px, waga 400, kolor tekstu bazowy, lekki letter-spacing. Theme nadaje
 * .woocommerce-form__label wiekszy font/wage w payment_box, wiec celujemy bezposrednio
 * w label/span (wyzsza specyficznosc niz pojedyncza klasa theme'u). */
.mito-mediraty-rodo label,
.mito-mediraty-rodo span {
    font-size: var(--mito-font-size-sm);
    line-height: var(--mito-line-height-base);
    font-weight: var(--mito-font-weight-body);
    color: var(--mito-color-text);
    letter-spacing: 0.2px;
}

/* Checkbox + wieloliniowy tekst: flex z wyrownaniem do gory, by checkbox trzymal sie
 * pierwszej linii (inline-baseline rozjezdza sie przy zawijaniu tekstu). Selektory
 * z klasami theme'u (.woocommerce-form__label*) - wyzsza specyficznosc, by przebic
 * uklad narzucony przez motyw w payment_box. */
.mito-mediraty-rodo label.woocommerce-form__label,
.mito-mediraty-rodo label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mito-mediraty-rodo label > span {
    flex: 1 1 auto;
    min-width: 0;
}

.mito-mediraty-rodo input.input-checkbox,
.mito-mediraty-rodo input[type="checkbox"] {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
    /* optyczne wyrownanie srodka checkboxa do pierwszej linii tekstu */
    margin-top: 0.25em;
}

/* ---------- Wniosek na stronie podziekowania: dialog + maly blok ----------
 * Dwa stany (render przez wp_footer, mediraty-thankyou.php):
 *   - open  (DOMYSLNY) - wycentrowany dialog zajmujacy wiekszosc ekranu (NIE full
 *     width), z overlayem blur. Efekt „wyskoczenia" (scale+fade).
 *   - minimized - maly blok w prawym dolnym rogu „Dokoncz wniosek MediRaty" (NIE
 *     full width), bez overlaya. Klient moze go tylko zwinac/rozwinac - NIE zamknac.
 * Tokeny mitoterapii. Warstwa-kontener jest fixed na cala ramke, ale przepuszcza
 * klikniecia (pointer-events:none) - lapia je tylko overlay/dialog/blok. */
:root {
    --mito-panel-bar-h: 58px;
}

/* Kontener-warstwa: pelna ramka, ale nieblokujaca (dzieci wlaczaja pointer-events). */
.mito-mediraty-panel {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    font-family: var(--mito-font-family);
}

/* Overlay z delikatnym blurem - wycisza tlo, by klient skupil sie na wniosku.
 * Widoczny tylko w stanie open; w minimized znika (klient wrocil do przegladania).
 * Klik w overlay = minimalizacja (NIE zamkniecie). */
.mito-mediraty-overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 19, 23, 0.30);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mito-mediraty-panel.is-open .mito-mediraty-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ---------- Dialog (stan open) ---------- */
.mito-mediraty-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: min(920px, calc(100vw - 3rem));
    height: min(90vh, 920px);
    max-height: 90vh;
    background: var(--mito-color-surface);
    border-radius: var(--mito-radius-md);
    box-shadow: var(--mito-shadow-modal);
    overflow: hidden;
    pointer-events: auto;
    /* Stan startowy/ukryty: wyskok ze skali. is-ready/is-open odslania. */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.mito-mediraty-panel.is-open.is-ready .mito-mediraty-dialog {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* W stanie minimized dialog jest schowany i nieklikalny. */
.mito-mediraty-panel.is-minimized .mito-mediraty-dialog {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    pointer-events: none;
    visibility: hidden;
}

/* Pasek naglowka dialogu (brand + minimalizuj). */
.mito-mediraty-dialog__bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--mito-panel-bar-h);
    padding: 0 12px 0 22px;
    background: var(--mito-color-primary);
    color: var(--mito-color-on-primary);
}

.mito-mediraty-dialog__brand {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.mito-mediraty-dialog__brand-name {
    font-size: 1.05rem;
    font-weight: var(--mito-font-weight-medium);
    letter-spacing: 0.01em;
}

.mito-mediraty-dialog__brand-tag {
    font-size: var(--mito-font-size-sm);
    opacity: 0.85;
}

.mito-mediraty-dialog__min {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--mito-color-on-primary);
    background: transparent;
    border: 0;
    border-radius: var(--mito-radius-pill);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mito-mediraty-dialog__min:hover {
    background: rgba(255, 255, 255, 0.16);
}

.mito-mediraty-dialog__min:focus-visible {
    outline: 2px solid var(--mito-color-on-primary);
    outline-offset: 2px;
}

.mito-mediraty-dialog__min svg {
    width: 22px;
    height: 22px;
}

/* Tresc dialogu - przewijalna (iframe jest wysoki). */
.mito-mediraty-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 24px 28px;
}

/* ---------- Maly blok (stan minimized) ---------- */
.mito-mediraty-pill {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 3rem);
    padding: 14px 18px;
    color: var(--mito-color-on-primary);
    background: var(--mito-color-primary);
    border: 0;
    border-radius: var(--mito-radius-pill);
    box-shadow: var(--mito-shadow-modal);
    font-family: var(--mito-font-family);
    font-size: var(--mito-font-size-base);
    font-weight: var(--mito-font-weight-medium);
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    /* Stan startowy/ukryty: schowany pod krawedzia + zgaszony. */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease;
}

.mito-mediraty-panel.is-minimized .mito-mediraty-pill {
    opacity: 1;
    transform: translateY(0);
}

.mito-mediraty-panel.is-open .mito-mediraty-pill {
    pointer-events: none;
    visibility: hidden;
}

.mito-mediraty-pill:hover {
    background: var(--mito-color-primary-hover);
}

.mito-mediraty-pill:focus-visible {
    outline: 2px solid var(--mito-color-on-primary);
    outline-offset: 3px;
}

.mito-mediraty-pill__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mito-mediraty-pill svg {
    flex: none;
    width: 20px;
    height: 20px;
}

/* ---------- Tresc wniosku (wspolne klasy, niezalezne od kontenera) ---------- */
.mito-mediraty-thankyou__heading {
    margin: 0 0 8px;
    color: var(--mito-color-primary);
}

.mito-mediraty-thankyou__text {
    margin: 0 0 16px;
}

.mito-mediraty-thankyou__phone {
    margin: 0 0 16px;
    font-weight: var(--mito-font-weight-medium);
}

.mito-mediraty-thankyou__phone a {
    color: var(--mito-color-primary);
}

.mito-mediraty-thankyou__frame {
    display: block;
    width: 100%;
    background: var(--mito-color-surface);
    border-radius: var(--mito-radius-xs);
    overflow: hidden;
}

.mito-mediraty-iframe {
    display: block;
    /* Domyslnie (szerokosc kontenera >= bazowej) iframe wypelnia kontener; wysokosc
     * dopasowana do tresci embeda. scrolling="no" -> scrolluje tylko dialog (popup).
     * Na WASKICH ekranach JS (initIframeFit) renderuje iframe przy bazowej szerokosci
     * i skaluje transform:scale, bo embed MediRaty ma min. szerokosc tresci (~385px)
     * i bez tego przycinalby sie po bokach. transform-origin gotowy pod to skalowanie. */
    width: 100% !important;
    height: 1050px;
    transform-origin: top left;
    border: 0;
}

/* ---------- Dialog/blok: mobile ---------- */
@media (max-width: 600px) {
    .mito-mediraty-dialog {
        width: calc(100vw - 1.5rem);
        height: min(92vh, 100% - 1.5rem);
        max-height: calc(100vh - 1.5rem);
    }

    .mito-mediraty-dialog__bar {
        padding: 0 8px 0 18px;
    }

    .mito-mediraty-dialog__body {
        padding: 18px 16px 24px;
    }

    .mito-mediraty-pill {
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: calc(100vw - 1.5rem);
    }
}

/* ---------- Dialog/blok: ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
    .mito-mediraty-dialog,
    .mito-mediraty-pill {
        transition: opacity 0.2s ease;
    }

    .mito-mediraty-dialog,
    .mito-mediraty-panel.is-open.is-ready .mito-mediraty-dialog,
    .mito-mediraty-panel.is-minimized .mito-mediraty-dialog {
        transform: translate(-50%, -50%);
    }

    .mito-mediraty-pill {
        transform: none;
    }
}

/* ---------- Wlasny popup wniosku (domyslny widok podziekowania) ----------
 * Tresc renderowana przez build_popup_body() wewnatrz .mito-mediraty-dialog__body.
 * Zastepuje iframe MediRaty wlasnym contentem na tokenach mitoterapii: logo MediRaty
 * (atrybucja marki), naglowek, opis, minikarty produktow z zamowienia, dwa benefity
 * i przycisk prowadzacy do realnego wniosku MediRaty (nowa karta, numer POK). W trybie
 * popup dialog jest kompaktowy (is-popup) - dopasowany do tresci, nie do wysokiego iframe. */
.mito-mediraty-panel.is-popup .mito-mediraty-dialog {
    width: min(460px, calc(100vw - 3rem));
    height: auto;
    max-height: min(90vh, 760px);
}

.mito-mediraty-panel.is-popup .mito-mediraty-dialog__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mito-mediraty-pop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    text-align: left;
    color: var(--mito-color-text);
}

/* Pasek naglowka w trybie popup: bialy z logo MediRaty (jedyna marka w popupie).
 * Nadpisuje turkusowy pasek wspoldzielonej powloki - logo partnera (granat+turkus)
 * jest czytelne na bialym, a nie ginie na turkusie. */
.mito-mediraty-panel.is-popup .mito-mediraty-dialog__bar {
    background: var(--mito-color-surface);
    border-bottom: 1px solid var(--mito-color-hairline);
    color: var(--mito-color-text);
}

.mito-mediraty-dialog__logo {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mito-mediraty-dialog__logo-img {
    display: block;
    width: auto;
    max-width: 170px;
    height: 30px;
    max-height: 30px;
}

.mito-mediraty-dialog__logo-svg {
    display: block;
    width: auto;
    /* znak marki w pasku - celowo nieduzy, by nie konkurowal z naglowkiem.
     * wordmark "MediRaty" to wektor (stala grubosc), wiec rozmiar to jedyna dzwignia. */
    height: 24px;
}

.mito-mediraty-dialog__logo-text {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--mito-color-text);
}

/* W trybie popup ikona minimalizacji jest na bialym pasku - ciemna zamiast bialej. */
.mito-mediraty-panel.is-popup .mito-mediraty-dialog__min {
    color: var(--mito-color-text);
}

.mito-mediraty-panel.is-popup .mito-mediraty-dialog__min:hover {
    background: rgba(20, 24, 28, 0.06);
}

.mito-mediraty-panel.is-popup .mito-mediraty-dialog__min:focus-visible {
    outline-color: var(--mito-color-primary);
}

.mito-mediraty-pop__heading {
    margin: 0;
    font-size: 1.15rem;
    font-weight: var(--mito-font-weight-medium);
    line-height: var(--mito-line-height-tight);
    color: var(--text-dark, #032930);
}

.mito-mediraty-pop__desc {
    margin: 0;
    /* ten sam drobny rozmiar co nazwa produktu - mniej rozmiarow fontu w popupie */
    font-size: var(--mito-font-size-sm);
    line-height: var(--mito-line-height-base);
    color: var(--text-dark-muted, #5b626a);
}

/* Minikarty produktow z zamowienia (border = odcien primary, spojnie z dialogiem). */
.mito-mediraty-pop__items {
    list-style: none;
    width: 100%;
    margin: 4px 0 2px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mito-mediraty-pop__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    text-align: left;
    border: 1px solid var(--primary-trans-20, rgba(11, 161, 191, 0.2));
    border-radius: var(--mito-radius-sm);
    background: var(--mito-color-surface);
}

.mito-mediraty-pop__media {
    flex: none;
    width: 60px;
    height: 60px;
    border-radius: var(--mito-radius-xs);
    overflow: hidden;
    /* Bialy kafelek miniatury (produkty maja biale tlo) - bez bordera. */
    background: var(--mito-color-surface);
}

.mito-mediraty-pop__thumb {
    width: 100%;
    height: 100%;
    /* contain - caly produkt widoczny na bialym, bez przycinania krawedzi. */
    object-fit: contain;
    display: block;
}

.mito-mediraty-pop__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--mito-font-size-sm);
    font-weight: var(--mito-font-weight-medium);
    line-height: var(--mito-line-height-tight);
    color: var(--text-dark, #032930);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mito-mediraty-pop__price {
    flex: none;
    font-size: var(--mito-font-size-sm);
    font-weight: var(--mito-font-weight-medium);
    color: var(--mito-color-primary);
    white-space: nowrap;
}

/* Dwa benefity z ikonami: domyslnie dwie kolumny (ikona + opis obok siebie).
 * auto-fit + minmax sprawia, ze gdy totalnie brak miejsca, spadaja do jednej kolumny
 * (jedna pod druga) - bez sztywnego breakpointu. */
.mito-mediraty-pop__benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 16px;
    width: 100%;
    margin: 2px 0;
}

.mito-mediraty-pop__benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--mito-font-size-sm);
    line-height: var(--mito-line-height-tight);
    text-align: left;
    color: var(--text-dark-muted, #5b626a);
}

.mito-mediraty-pop__benefit-icon {
    flex: none;
    display: inline-flex;
    color: var(--mito-color-primary);
}

/* Ikony: turkusowy kontur + delikatne wypelnienie odcieniem primary (primary-trans-10),
 * cienki stroke. fill z CSS nadpisuje inline fill="none" (CSS > atrybut prezentacji). */
.mito-mediraty-pop__benefit-icon svg {
    width: 1.6rem;
    height: 1.6rem;
    font-size: var(--text-l);
    color: var(--mito-color-primary);
    fill: var(--primary-trans-10, rgba(11, 161, 191, 0.1));
    stroke-width: 1px;
}

/* Przycisk prowadzacy do wniosku MediRaty (nosnik atrybucji POK). */
.mito-mediraty-pop__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    padding: 14px 28px;
    font-family: var(--mito-font-family);
    font-size: var(--mito-font-size-base);
    font-weight: var(--mito-font-weight-medium);
    line-height: 1.2;
    color: var(--mito-color-on-primary);
    background: var(--mito-color-primary);
    border: 0;
    border-radius: var(--mito-radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mito-mediraty-pop__cta:hover,
.mito-mediraty-pop__cta:focus {
    color: var(--mito-color-on-primary);
    background: var(--mito-color-primary-hover);
}

.mito-mediraty-pop__cta:focus-visible {
    outline: 2px solid var(--mito-color-primary);
    outline-offset: 3px;
}

/* ---------- Popup: male ekrany ----------
 * Minikarta produktu zawija sie do kolumny: miniatura, nazwa i cena jedna pod druga. */
@media (max-width: 480px) {
    .mito-mediraty-pop__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* W ukladzie kolumnowym miniatura jest nad nazwa - moze byc wieksza i lepiej
     * wypelnic przestrzen. */
    .mito-mediraty-pop__media {
        width: 88px;
        height: 88px;
    }

    .mito-mediraty-pop__name {
        /* w ukladzie pionowym nazwa moze zajac wiecej linii */
        -webkit-line-clamp: 3;
    }
}

/* ---------- Box promo mieszanego koszyka (checkout) - akordeon ----------
 * Delikatny turkusowy box (primary-light-trans-10). Forma akordeonu (<details>):
 * w naglowku (summary) badge + tekst zachety, a minikarty produktow i text-link
 * „Czym sa MediRaty?" pokazuja sie dopiero po rozwinieciu. Dialog rozdzielenia NIE
 * jest stad otwierany (pojawia sie przy probie zlozenia zamowienia). Text-link
 * otwiera wspolny dialog edukacyjny (.mito-mediraty-edu-modal). */
.mito-mediraty-hint {
    margin: 0 0 16px;
    border: 1px solid var(--primary-trans-20);
    border-radius: var(--radius-m);
    background: var(--primary-light-trans-10);
    padding: var(--space-m);
    font-family: var(--mito-font-family);
}

/* Naglowek akordeonu: badge + tekst + chevron. Bez natywnego markera <summary>. */
.mito-mediraty-hint__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.mito-mediraty-hint__summary::-webkit-details-marker {
    display: none;
}

.mito-mediraty-hint__badge {
    flex: none;
    padding: 2px 10px;
    font-size: var(--mito-font-size-sm);
    font-weight: var(--mito-font-weight-medium);
    color: var(--mito-color-on-primary);
    background: var(--mito-color-primary);
    border-radius: var(--mito-radius-pill);
}

.mito-mediraty-hint__text {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-s, 14px);
    line-height: var(--mito-line-height-base);
    color: var(--mito-color-text);
}

/* Chevron - obrot o 180deg gdy akordeon rozwiniety */
.mito-mediraty-hint__chevron {
    flex: none;
    display: inline-flex;
    color: var(--mito-color-primary);
    transition: transform 0.2s ease;
}

.mito-mediraty-hint__chevron svg {
    width: 1.125rem;
    height: 1.125rem;
}

.mito-mediraty-hint[open] .mito-mediraty-hint__chevron {
    transform: rotate(180deg);
}

/* Panel rozwijany: minikarty + text-link, jeden pod drugim, wyrownane do lewej. */
.mito-mediraty-hint__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
}

/* Minikarty produktow dostepnych w MediRaty: grid auto-fit - 2 rowne kolumny gdy jest
 * miejsce, kolaps do 1 kolumny (fullwidth) gdy kontener za waski. */
.mito-mediraty-hint__products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-self: stretch;
}

.mito-mediraty-hint__product {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 12px;
    background: var(--mito-color-surface, #ffffff);
    border: 1px solid var(--primary-trans-10, rgba(11, 161, 191, 0.1));
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
}

.mito-mediraty-hint__thumb {
    flex: none;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--mito-radius-sm);
    background: var(--mito-color-surface);
}

.mito-mediraty-hint__name {
    min-width: 0;
    font-size: var(--text-s, 14px);
    line-height: 1.3;
    font-weight: 500 !important;
    color: var(--text-dark, #032930);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.15s ease;
}

/* hover na zlinkowanej karcie - nazwa w kolorze primary */
a.mito-mediraty-hint__product:hover .mito-mediraty-hint__name {
    color: var(--primary, var(--mito-color-primary));
}

/* text-link zamiast przycisku-pigulki: bez tla i ramki, podkreslony link */
.mito-mediraty-hint__more {
    padding: 0;
    font-size: var(--mito-font-size-sm);
    font-weight: var(--mito-font-weight-medium);
    color: var(--mito-color-primary);
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.mito-mediraty-hint__more:hover {
    color: var(--mito-color-primary-hover, var(--text-dark, #032930));
}

/* ---------- Dialog: dwie listy produktow (dostepne / niedostepne) ----------
 * Wewnatrz wspolnego dialogu (.mito-cart-modal), w miejscu `.mito-cart-modal__choices`.
 * Grupa „niedostepne w MediRaty" jest przygaszona (opacity), by bylo widac, ze te
 * pozycje zostana usuniete z koszyka po zlozeniu wniosku. */
.mito-cart-modal .mito-mediraty-grouplist {
    text-align: left;
}

.mito-cart-modal .mito-mediraty-grouplist--muted {
    opacity: 0.5;
}

.mito-cart-modal .mito-mediraty-grouplist__label {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: var(--mito-font-weight-medium);
    letter-spacing: 0.01em;
    color: var(--mito-cart-ink-soft, var(--mito-color-text-muted));
}

.mito-cart-modal .mito-mediraty-grouplist__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mito-cart-modal .mito-mediraty-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    /* border = lekki odcien primary (turkus trans-10), spojnie z firmowymi ramkami ACSS */
    border: 1px solid var(--primary-trans-10, rgba(11, 161, 191, 0.1));
    border-radius: 10px;
    background: var(--mito-color-surface, #ffffff);
}

.mito-cart-modal .mito-mediraty-item__media {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f1;
}

.mito-cart-modal .mito-mediraty-item__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* bez wlasnego radius - zaokraglenie daje wrapper (__media) z overflow:hidden,
     * inaczej powstaje podwojny radius (rant tla wrappera w narozach) */
    border-radius: 0;
}

.mito-cart-modal .mito-mediraty-item__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--text-dark, #032930);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- Dialog mieszanego koszyka - bez ikony nad naglowkiem ----------
 * Medalion ikony usuniety; rownowazymy swiatlo nad tytulem (z dala od przycisku X)
 * i dajemy wyrazny odstep tytul -> komunikat, by naglowek mial powietrze. */
.mito-mediraty-mixed-modal .mito-cart-modal__box {
    padding-top: 2.5rem;
}

.mito-mediraty-mixed-modal .mito-cart-modal__title {
    margin: 0 0 0.75rem;
}

/* ---------- Dialog edukacyjny „Czym jest MediRaty" ----------
 * Wspolny komponent dialogu (.mito-cart-modal), w miejscu tresci - blok informacyjny.
 * Jedno okno, dwa wyzwalacze: klikalny badge (element Bricks) + przycisk w boksie promo.
 * Tresc konfigurowalna w ustawieniach; warunki podane jako „przyklad reprezentatywny". */
/* Naglowek edu - bez ikony nad nim, wiec rownowazymy swiatlo: troche wiecej gory
 * (miejsce nad tytulem, z dala od przycisku X) i wyrazny odstep do tresci ponizej. */
.mito-mediraty-edu-modal .mito-cart-modal__box {
    padding-top: 2.5rem;
}

.mito-mediraty-edu-modal .mito-cart-modal__title {
    margin: 0 0 1.25rem;
}

/* Dialog edu nieco szerszy niz domyslny .mito-cart-modal (416px), ale wezszy niz
 * wariant 520px - posredni 468px. Tylko edu; mobile bottom-sheet i tak wygrywa. */
.mito-mediraty-edu-modal {
    max-width: 468px;
}

.mito-mediraty-edu-modal .mito-mediraty-edu {
    margin: 0 0 1.375rem;
    text-align: left;
}

.mito-mediraty-edu__intro {
    margin: 0 0 1rem;
    font-size: var(--text-s, 14px);
    line-height: 1.55;
    color: var(--text-dark-muted, #5b626a);
}

.mito-mediraty-edu__section {
    margin: 0 0 0.9rem;
}

/* Etykiety sekcji - NIE eyebrow (mitoterapia nie stosuje wersalikowych eyebrow):
 * normalna wielkosc liter, token --text-m, ciemny tekst, waga 500. */
.mito-mediraty-edu__label {
    margin: 0 0 0.35rem;
    font-size: var(--text-m, 1rem);
    font-weight: 500;
    color: var(--text-dark, #032930);
}

.mito-mediraty-edu__text {
    margin: 0;
    font-size: var(--text-s, 14px);
    line-height: 1.5;
    color: var(--text-dark-muted, #5b626a);
}

/* Lista warunkow - znacznik = turkusowa kropka (token primary). */
.mito-mediraty-edu__terms {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mito-mediraty-edu__terms li {
    position: relative;
    padding-left: 1.25rem;
    font-size: var(--text-s, 14px);
    line-height: 1.45;
    color: var(--text-dark-muted, #5b626a);
}

.mito-mediraty-edu__terms li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--mito-color-primary);
}

.mito-mediraty-edu__phone {
    margin: 0 0 0.9rem;
    font-size: var(--text-m, 1rem);
    font-weight: var(--mito-font-weight-medium);
    color: var(--mito-cart-ink, var(--mito-color-text));
}

.mito-mediraty-edu__phone a {
    color: var(--mito-color-primary);
    text-decoration: none;
}

.mito-mediraty-edu__phone a:hover {
    text-decoration: underline;
}

/* Drobny druk z RRSO jako przykladem reprezentatywnym - wyciszony, oddzielony hairline. */
.mito-mediraty-edu__disclaimer {
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--mito-cart-hairline, var(--mito-color-hairline));
    font-size: var(--mito-font-size-sm);
    line-height: 1.5;
    color: var(--mito-cart-ink-soft, var(--mito-color-text-muted));
}