/**
 * Wygląd formularza.
 *
 * Wszystkie klasy mają przedrostek `zb-`, bo formularz wchodzi w cudzy
 * motyw — `.field` albo `.summary` prędzej czy później zderzyłyby się
 * z czymś, co motyw już ma.
 *
 * Kroju pisma nie ustawiamy: formularz ma wyglądać na część strony,
 * a nie na wklejony obcy element. Ustawiamy za to ROZMIARY, bo dziedziczone
 * po motywie potrafią dać etykietę większą od wpisywanego tekstu.
 *
 * Kolory, promienie i skala tekstu siedzą w zmiennych na `.zb`. Motyw
 * nadpisuje je jednym blokiem, bez walki na `!important`:
 *
 *   .zb { --zb-akcent: #b8860b; --zb-promien: 4px; }
 */

.zb {
    /* Kolory */
    --zb-tlo: #fff;
    --zb-tlo-2: #f7f8f9;
    --zb-tekst: #16181d;
    --zb-przygaszony: #62676f;
    --zb-obwodka: #dfe2e6;
    --zb-obwodka-mocna: #b9bec5;
    --zb-akcent: #16181d;
    --zb-akcent-tekst: #fff;
    --zb-blad: #b3261e;
    --zb-ok: #12784a;

    /* Skala tekstu — sześć stopni wystarcza na cały formularz.
       Mniej niż 1rem w polach nie schodzimy: iOS przy mniejszym tekście
       sam przybliża stronę na kliknięcie w pole i już z niej nie wraca. */
    --zb-t-xs: 0.75rem;
    --zb-t-sm: 0.875rem;
    --zb-t-base: 1rem;
    --zb-t-lg: 1.125rem;
    --zb-t-tytul: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
    --zb-t-kwota: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);

    /* Odstępy */
    --zb-luz: 1rem;
    --zb-luz-2: 1.5rem;

    /* Kształt.
       Grubość ramki i cień są zmiennymi, nie stałymi, bo od nich zależy
       charakter całości. Motyw z twardymi obrysami i przesuniętym cieniem
       składa się z nich jedną deklaracją na stronie:

         .zb { --zb-promien: 0; --zb-ramka: 4px;
               --zb-obwodka: #000; --zb-cien: -8px 8px 0 #000; }

       Bez tego każda taka strona wymagałaby własnego arkusza dopisywanego
       obok naszego — i pilnowania obu przy każdej zmianie. */
    --zb-promien: 12px;
    --zb-promien-male: 8px;
    --zb-ramka: 1px;
    --zb-cien: 0 0 0 0 transparent;

    box-sizing: border-box;
    color: var(--zb-tekst);
    display: block;
    font-size: var(--zb-t-base);
    line-height: 1.6;
    margin-inline: auto;
    max-width: 46rem;
    text-align: left;
}

.zb *,
.zb *::before,
.zb *::after {
    box-sizing: inherit;
}

/**
 * `hidden` musi wygrać z każdym naszym `display`.
 *
 * Wbudowana reguła przeglądarki `[hidden] { display: none }` ma tę samą
 * wagę co `.zb-field { display: flex }`, ale pochodzi z arkusza przeglądarki
 * — czyli przegrywa. Efekt: schowane pole dodatkowe zostaje na ekranie jako
 * pusta ramka bez etykiety.
 */
.zb [hidden] {
    display: none !important;
}

/* Liczby w kwotach i licznikach nie mogą skakać przy przeliczaniu —
   proporcjonalne cyfry zmieniają szerokość i całe podsumowanie drga. */
.zb-kwota-wartosc,
.zb-kwota-rozbicie,
.zb-miejsca-ile,
.zb-qty input {
    font-variant-numeric: tabular-nums;
}

/* ——— panel ——— */

.zb-panel {
    background: var(--zb-tlo);
    border: var(--zb-ramka) solid var(--zb-obwodka);
    border-radius: var(--zb-promien);
    box-shadow: var(--zb-cien);
    margin-bottom: var(--zb-luz);
    padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
}

.zb-panel--ok {
    border-color: var(--zb-ok);
}

.zb-panel--blad {
    border-color: var(--zb-blad);
}

.zb-panel--info p,
.zb-panel--ok p {
    margin: 0;
}

/* ——— nagłówek z licznikiem ——— */

.zb-naglowek {
    align-items: center;
    border-bottom: 1px solid var(--zb-obwodka);
    display: flex;
    flex-wrap: wrap;
    gap: var(--zb-luz-2);
    justify-content: space-between;
    margin-bottom: var(--zb-luz-2);
    padding-bottom: var(--zb-luz-2);
}

.zb-naglowek-tekst {
    flex: 1 1 18rem;
    min-width: 0;
}

/**
 * Nagłówek panelu.
 *
 * Selektor jest podwójny (`.zb .zb-tytul`) z jednego powodu: motywy lubią
 * regułę na goły znacznik — `h2 { color: #333; font-family: Bangers }` —
 * a taka wygrywa z pojedynczą klasą przy tej samej wadze. Efekt jest
 * spektakularny: nagłówek formularza w kroju z komiksu i w kolorze,
 * którego na ciemnym panelu w ogóle nie widać.
 *
 * `font-family: inherit` celowo: krój ma być z motywu, kolor i rozmiar nasze.
 */
.zb .zb-tytul {
    color: var(--zb-tekst);
    font-family: inherit;
    font-size: var(--zb-t-tytul);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    text-shadow: none;
    text-transform: none;
}

/* Podtytuł w rozmiarze tekstu, nie drobnego druku. Przy tytule po 32 px
   czternastka robi się przypisem i całość rozjeżdża się na dwa światy. */
.zb-sub {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-base);
    margin: 0.4rem 0 0;
    max-width: 34ch;
}

/**
 * Licznik miejsc.
 *
 * To on decyduje, czy ktoś wypełni formularz teraz, czy „później”, więc
 * dostaje formę kafla ze statystyką, a nie doklejonej etykietki: podpis
 * u góry, liczba pod nim, pasek zapełnienia na dole. Wszystko wyrównane
 * do lewej — poprzednia wersja stawiała dużą liczbę obok dwuwierszowego
 * tekstu i linie bazowe nie miały jak się zejść.
 */
.zb-miejsca {
    background: var(--zb-tlo-2);
    border-radius: var(--zb-promien-male);
    display: grid;
    flex: none;
    gap: 0.35rem;
    padding: 0.85rem 1.1rem;
    /* Stała szerokość: bez niej kafel zwęża się z „100” do „9” i przy
       każdym odświeżeniu przeskakuje cały nagłówek. */
    min-width: 9.5rem;
}

.zb-miejsca-etykieta {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.zb-miejsca-liczby {
    align-items: baseline;
    display: flex;
    gap: 0.35rem;
}

.zb-miejsca-ile {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.zb-miejsca-z {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-sm);
}

.zb-pasek {
    background: color-mix(in srgb, var(--zb-tekst) 12%, transparent);
    border-radius: 999px;
    display: block;
    height: 4px;
    margin-top: 0.15rem;
    overflow: hidden;
}

.zb-pasek i {
    background: var(--zb-akcent);
    border-radius: inherit;
    display: block;
    height: 100%;
    /* Minimalna szerokość, żeby przy jednym sprzedanym miejscu pasek nie
       wyglądał na pusty, czyli zepsuty. */
    min-width: 3px;
    transition: width .3s ease;
}

@media (max-width: 36rem) {
    .zb-miejsca {
        width: 100%;
    }
}

/* ——— siatka pól ——— */

.zb-grid {
    display: grid;
    gap: var(--zb-luz-2) var(--zb-luz);
    grid-template-columns: 1fr 1fr;
}

.zb-full,
.zb-consent,
.zb-pulapka {
    grid-column: 1 / -1;
}

/* Jedna kolumna nie dlatego, że „to telefon”, tylko dlatego, że dwa pola
   obok siebie robią się węższe niż wpisywany w nie tekst. */
@media (max-width: 36rem) {
    .zb-grid {
        grid-template-columns: 1fr;
    }
}

.zb-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.zb-field label,
.zb-label {
    font-size: var(--zb-t-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.zb-pod-polem {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-xs);
    min-height: 1em;
}

.zb-field input,
.zb-field select {
    background: var(--zb-tlo);
    border: var(--zb-ramka) solid var(--zb-obwodka);
    border-radius: var(--zb-promien-male);
    color: inherit;
    font-family: inherit;
    font-size: var(--zb-t-base);
    line-height: 1.4;
    padding: 0.75rem 0.9rem;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

.zb-field input::placeholder {
    color: var(--zb-przygaszony);
    opacity: .75;
}

.zb-field input:hover,
.zb-field select:hover {
    border-color: var(--zb-obwodka-mocna);
}

/* Obwódka zamiast systemowego zarysu: cieńsza, w kolorze akcentu i nie
   przycinana przez sąsiadów w siatce. */
.zb-field input:focus-visible,
.zb-field select:focus-visible,
.zb-tura:focus-visible,
.zb-qty-btn:focus-visible,
.zb-btn:focus-visible,
.zb-consent input:focus-visible {
    border-color: var(--zb-akcent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zb-akcent) 18%, transparent);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* ——— lista wyboru ——— */

.zb-select {
    position: relative;
}

.zb-select select {
    appearance: none;
    padding-right: 2.5rem;
}

.zb-strzalka {
    color: var(--zb-przygaszony);
    height: 1.25rem;
    pointer-events: none;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
}

/* ——— liczba osób ——— */

.zb-qty {
    display: flex;
    gap: 0.4rem;
}

.zb-qty input {
    font-weight: 600;
    text-align: center;
    /* Strzałki przeglądarki obok własnych przycisków +/– to dwa różne
       sposoby na to samo, w dodatku sklejone ze sobą. */
    appearance: textfield;
    -moz-appearance: textfield;
}

.zb-qty input::-webkit-outer-spin-button,
.zb-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.zb-qty-btn {
    align-items: center;
    background: var(--zb-tlo);
    border: var(--zb-ramka) solid var(--zb-obwodka);
    border-radius: var(--zb-promien-male);
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: none;
    justify-content: center;
    /* 2.75rem to 44 px — dolna granica, poniżej której trafienie palcem
       w przycisk przestaje być pewne. */
    min-height: 2.75rem;
    transition: border-color .15s, background .15s;
    width: 2.75rem;
}

.zb-qty-btn svg {
    height: 1rem;
    width: 1rem;
}

.zb-qty-btn:hover:not(:disabled) {
    background: var(--zb-tlo-2);
    border-color: var(--zb-obwodka-mocna);
}

.zb-qty-btn:disabled {
    cursor: not-allowed;
    opacity: .4;
}

/* ——— tury ——— */

.zb-tury {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.zb-tura {
    background: var(--zb-tlo);
    border: var(--zb-ramka) solid var(--zb-obwodka);
    border-radius: var(--zb-promien-male);
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    gap: 0.1rem;
    padding: 0.85rem 1rem;
    text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.zb-tura:hover:not(:disabled) {
    border-color: var(--zb-obwodka-mocna);
}

.zb-tura-godzina {
    font-size: var(--zb-t-lg);
    font-weight: 700;
    line-height: 1.2;
}

.zb-tura-opis {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-sm);
}

.zb-tura-miejsca {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-xs);
    margin-top: 0.25rem;
}

/* Wybrana tura: pełne wypełnienie, nie sama obwódka. Przy dwóch kaflach
   obok siebie różnica jednego piksela obwódki jest nie do zauważenia. */
.zb-tura.zb-on {
    background: var(--zb-akcent);
    border-color: var(--zb-akcent);
    color: var(--zb-akcent-tekst);
}

.zb-tura.zb-on .zb-tura-opis,
.zb-tura.zb-on .zb-tura-miejsca {
    color: inherit;
    opacity: .8;
}

.zb-tura:disabled {
    background: var(--zb-tlo-2);
    cursor: not-allowed;
    opacity: .55;
}

/* ——— zgoda ——— */

.zb-consent {
    background: var(--zb-tlo-2);
    border-radius: var(--zb-promien-male);
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
}

.zb-consent input {
    flex: none;
    height: 1.15rem;
    margin: 0.2rem 0 0;
    width: 1.15rem;
}

.zb-consent label {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-sm);
    font-weight: 400;
    line-height: 1.5;
}

.zb-consent a {
    color: inherit;
}

/* ——— podsumowanie ——— */

.zb-podsumowanie {
    align-items: center;
    border-top: 1px solid var(--zb-obwodka);
    display: flex;
    flex-wrap: wrap;
    gap: var(--zb-luz);
    justify-content: space-between;
    margin-top: var(--zb-luz-2);
    padding-top: var(--zb-luz-2);
}

.zb-kwota {
    display: grid;
    margin: 0;
}

.zb-kwota-etykieta {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.zb-kwota-wartosc {
    font-size: var(--zb-t-kwota);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.zb-kwota-rozbicie {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-sm);
}

.zb-btn {
    align-items: center;
    background: var(--zb-akcent);
    border: var(--zb-ramka) solid var(--zb-akcent);
    border-radius: var(--zb-promien-male);
    color: var(--zb-akcent-tekst);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--zb-t-base);
    font-weight: 600;
    gap: 0.6rem;
    justify-content: center;
    line-height: 1.2;
    min-height: 3rem;
    padding: 0.85rem 1.75rem;
    text-decoration: none;
    transition: opacity .15s, transform .05s;
}

.zb-btn:hover:not(:disabled) {
    opacity: .88;
}

.zb-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.zb-btn:disabled {
    cursor: progress;
    opacity: .6;
}

/* Kręciołek pokazuje się dopiero w trakcie wysyłki — miejsce na niego
   rezerwuje `gap`, więc przycisk nie zmienia szerokości w locie. */
.zb-krecioch {
    display: none;
    height: 1rem;
    width: 1rem;
}

.zb-btn--czeka .zb-krecioch {
    animation: zb-obrot .7s linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    display: block;
}

@keyframes zb-obrot {
    to {
        transform: rotate(360deg);
    }
}

.zb-hint {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-xs);
    margin: var(--zb-luz) 0 0;
}

/* ——— błąd ——— */

.zb-blad {
    background: color-mix(in srgb, var(--zb-blad) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--zb-blad) 45%, transparent);
    border-radius: var(--zb-promien-male);
    color: var(--zb-blad);
    font-size: var(--zb-t-sm);
    margin-bottom: var(--zb-luz-2);
    padding: 0.8rem 1rem;
}

.zb-info {
    color: var(--zb-przygaszony);
}

/* ——— po zapisie i po płatności ——— */

.zb-done,
.zb-potwierdzenie {
    text-align: center;
}

.zb-done .zb-sub,
.zb-potwierdzenie .zb-sub {
    margin: 0.5rem auto var(--zb-luz-2);
    max-width: 34rem;
}

.zb-mark {
    color: var(--zb-ok);
    margin: 0 auto var(--zb-luz);
    width: 3rem;
}

.zb-mark svg {
    display: block;
    width: 100%;
}

/* Siatka dwukolumnowa zamiast tabeli: etykieta i wartość trzymają się
   razem, a na wąskim ekranie schodzą pod siebie bez poziomego przewijania. */
.zb-szczegoly {
    display: grid;
    gap: 0.6rem 2rem;
    grid-template-columns: auto auto;
    justify-content: center;
    margin: 0 0 var(--zb-luz-2);
    text-align: left;
}

.zb-szczegoly dt {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-sm);
}

.zb-szczegoly dd {
    font-weight: 600;
    margin: 0;
}

@media (max-width: 30rem) {
    .zb-szczegoly {
        gap: 0;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .zb-szczegoly dd {
        margin-bottom: 0.75rem;
    }
}

/* ——— karty pakietów ——— */

.zb-karty {
    display: grid;
    gap: var(--zb-luz);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    max-width: 62rem;
}

.zb-karta {
    background: var(--zb-tlo);
    border: var(--zb-ramka) solid var(--zb-obwodka);
    border-radius: var(--zb-promien);
    box-shadow: var(--zb-cien);
    color: inherit;
    cursor: pointer;
    display: grid;
    font-family: inherit;
    /* Opis rozpycha się do reszty wysokości, dzięki czemu „Wybierz ten
       pakiet” stoi na dole każdej karty na tej samej linii. */
    grid-template-rows: auto auto auto 1fr auto;
    padding: 1.5rem;
    text-align: left;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.zb-karta:hover {
    border-color: var(--zb-obwodka-mocna);
    transform: translateY(-2px);
}

.zb-karta:focus-visible {
    border-color: var(--zb-akcent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zb-akcent) 25%, transparent);
    outline: 2px solid transparent;
}

.zb-karta.zb-on {
    border-color: var(--zb-akcent);
    box-shadow: var(--zb-cien), inset 0 0 0 var(--zb-ramka) var(--zb-akcent);
}

.zb-karta-plakietka {
    align-self: start;
    background: var(--zb-akcent);
    border-radius: 999px;
    color: var(--zb-akcent-tekst);
    font-size: var(--zb-t-xs);
    font-weight: 700;
    justify-self: start;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.7rem;
    text-transform: uppercase;
}

/* Pusta plakietka trzyma wysokość wiersza i nic nie pokazuje — dzięki temu
   nazwy i ceny na sąsiednich kartach stoją równo. */
.zb-karta-plakietka.zb-pusta {
    background: none;
    visibility: hidden;
}

.zb-karta-nazwa {
    font-size: var(--zb-t-lg);
    font-weight: 700;
    margin-top: 0.75rem;
}

.zb-karta-cena {
    align-items: baseline;
    display: flex;
    gap: 0.4rem;
    margin: 0.35rem 0 0.75rem;
}

.zb-karta-cena b {
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.zb-karta-jednostka {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-sm);
}

.zb-karta-opis {
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-sm);
    line-height: 1.55;
}

.zb-karta-akcja {
    border-top: 1px solid var(--zb-obwodka);
    color: var(--zb-przygaszony);
    font-size: var(--zb-t-sm);
    font-weight: 600;
    margin-top: 1.25rem;
    padding-top: 0.9rem;
}

.zb-karta.zb-on .zb-karta-akcja {
    color: var(--zb-akcent);
}

.zb-karta.zb-on .zb-karta-akcja::before {
    content: '✓ ';
}

/**
 * ——— wariant na ciemnym tle ———
 *
 * Klasa idzie na blok albo na dowolną sekcję wyżej („Dodatkowa klasa CSS”
 * w edytorze). Przestawia same zmienne, więc reguły wyglądu zostają jedne
 * — nie ma drugiego arkusza, który trzeba pamiętać, żeby zmieniać razem
 * z pierwszym.
 *
 * Akcent zostaje biały, bo to bezpieczne wszędzie. Kolor marki podmienia
 * się jedną deklaracją: `.zb-ciemny .zb { --zb-akcent: #FFC863 }`.
 */
.zb-ciemny .zb,
.zb.zb-ciemny {
    /* Półprzezroczyste, nie czarne. Ciemne tła bywają na stronach ruchome
       — gradient, zdjęcie, wideo w tle — i wstawienie na nie czarnego
       prostokąta wycina z projektu dziurę. Panel ma przygasić to, co pod
       nim, a nie zasłonić. */
    --zb-tlo: rgba(18, 18, 22, 0.72);
    --zb-tlo-2: rgba(255, 255, 255, 0.07);
    --zb-tekst: #fff;
    --zb-przygaszony: #b7b7c0;
    --zb-obwodka: rgba(255, 255, 255, 0.16);
    --zb-obwodka-mocna: rgba(255, 255, 255, 0.34);
    --zb-akcent: #fff;
    --zb-akcent-tekst: #17171a;
    --zb-blad: #ff9b95;
    --zb-ok: #5ddba4;
}

/* Rozmycie tego, co pod spodem. Bez niego tekst na ruchomym tle skacze
   między czytelnym a nieczytelnym w rytm animacji. */
.zb-ciemny .zb-panel,
.zb-ciemny .zb-karta {
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* Pola muszą się odcinać od panelu, a panel jest już półprzezroczysty —
   przezroczyste pole na przezroczystym panelu przestaje być polem. */
.zb-ciemny .zb-field input,
.zb-ciemny .zb-field select {
    background: rgba(255, 255, 255, 0.07);
}

.zb-ciemny .zb-field input::placeholder {
    color: #9d9da8;
}

/* Lista rozwijana rysuje opcje systemowo — na ciemnym tle bez tego
   biały tekst ląduje na białym tle systemowego menu. */
.zb-ciemny .zb-field select option {
    background: #17171a;
    color: #fff;
}

.zb-ciemny .zb-qty-btn,
.zb-ciemny .zb-tura {
    background: rgba(255, 255, 255, 0.05);
}

/* ——— pole-pułapka ———
   Poza ekranem, a nie `display:none` — część botów pomija pola, których
   nie da się w ogóle wyrenderować, i wtedy pułapka nic nie łapie. */

.zb-pulapka {
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

/* Animacje są tu ozdobą, nigdy nośnikiem informacji — można je wyłączyć
   bez straty. */
@media (prefers-reduced-motion: reduce) {
    .zb *,
    .zb *::before,
    .zb *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}