/* WH Zapytaj o produkt — front.
 *
 * ⚠️ Zero hardkodow: kolor, odstep, promien i typografia ida z tokenow --wh-*
 * (CLAUDE.md sekcja 6). Fallback przy kazdym `var()` = wartosc dotychczasowa,
 * wiec brak tokenow niczego nie psuje, a branza przejmuje wyglad bez dotykania
 * tego pliku.
 */

.wh-pinq {
    margin: var(--wh-space-md, 16px) 0;
}

.wh-pinq__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--wh-space-xs, 6px);
    padding: var(--wh-space-sm, 10px) var(--wh-space-md, 20px);
    font-family: inherit;
    font-size: var(--wh-font-size-body, 14px);
    font-weight: var(--wh-font-weight-medium, 500);
    color: var(--wh-color-text-inverse, #fff);
    background-color: var(--wh-color-primary, #333);
    border: 0;
    border-radius: var(--wh-radius-sm, 4px);
    cursor: pointer;
}

.wh-pinq__toggle:hover {
    /* Przyciemnienie liczone Z koloru marki — dziala na kazdej palecie,
       inaczej niz wpisany na sztywno drugi odcien. */
    background-color: color-mix(in srgb, var(--wh-color-primary, #333) 85%, #000);
}

/* ── Okno modalne ──
   Natywny <dialog>: pozycjonowanie, warstwe i blokade tla daje przegladarka.
   Stylujemy tylko wyglad, zeby nie odtwarzac zachowan, ktore juz sa. */
.wh-pinq-dialog {
    width: min(480px, calc(100vw - 2 * var(--wh-space-md, 16px)));
    padding: 0;
    color: var(--wh-color-text-primary, #232323);
    background-color: var(--wh-color-bg-base, #fff);
    border: 0;
    border-radius: var(--wh-radius-md, 6px);
    box-shadow: var(--wh-shadow-md, 0 8px 24px rgba(0, 0, 0, .18));
}

.wh-pinq-dialog::backdrop {
    /* color-mix zamiast rgba() — przy zmianie marki tlo idzie za paleta,
       a przy domyslnej daje ten sam piksel co dotad. */
    background-color: color-mix(in srgb, var(--wh-color-text-primary, #232323) 55%, transparent);
}

/* Przegladarka bez <dialog>: element nie jest wtedy wyjety z ukladu strony,
   wiec musimy sami ustawic go na wierzchu i wysrodkowac. */
.wh-pinq-dialog--fallback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--wh-z-index-modal, 400);
}

.wh-pinq-dialog__inner {
    padding: var(--wh-space-md, 16px);
}

.wh-pinq-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wh-space-sm, 12px);
    margin-bottom: var(--wh-space-md, 16px);
}

.wh-pinq-dialog__title {
    margin: 0;
    font-size: var(--wh-font-size-h4, 18px);
    font-weight: var(--wh-font-weight-semibold, 600);
}

.wh-pinq-dialog__close {
    flex: 0 0 auto;
    padding: 0 var(--wh-space-xs, 6px);
    font-size: 24px;
    line-height: 1;
    color: var(--wh-color-text-muted, #6b7280);
    background: none;
    border: 0;
    cursor: pointer;
}

.wh-pinq-dialog__actions {
    display: flex;
    gap: var(--wh-space-sm, 12px);
    align-items: center;
    margin-top: var(--wh-space-md, 16px);
}

.wh-pinq__cancel {
    padding: var(--wh-space-sm, 10px) var(--wh-space-md, 20px);
    font: inherit;
    color: var(--wh-color-text-primary, #232323);
    background: none;
    border: 1px solid var(--wh-color-border-subtle, #d6d9de);
    border-radius: var(--wh-radius-sm, 4px);
    cursor: pointer;
}

.wh-pinq__form {
    max-width: 480px;
    margin-top: var(--wh-space-md, 16px);
    padding: var(--wh-space-md, 16px);
    background-color: var(--wh-color-bg-subtle, #f7f7f7);
    border: 1px solid var(--wh-color-border-subtle, #e5e5e5);
    border-radius: var(--wh-radius-md, 6px);
}

.wh-pinq__field {
    margin-bottom: var(--wh-space-sm, 12px);
}

.wh-pinq__field label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--wh-font-size-small, 13px);
    font-weight: var(--wh-font-weight-medium, 500);
    color: var(--wh-color-text-primary, #232323);
}

.wh-pinq__field input[type="email"],
.wh-pinq__field input[type="text"],
.wh-pinq__field textarea {
    width: 100%;
    padding: var(--wh-space-xs, 8px) var(--wh-space-sm, 10px);
    font: inherit;
    color: var(--wh-color-text-primary, #232323);
    background-color: var(--wh-color-bg-base, #fff);
    border: 1px solid var(--wh-color-border-subtle, #d6d9de);
    border-radius: var(--wh-radius-sm, 4px);
}

.wh-pinq__field input:focus-visible,
.wh-pinq__field textarea:focus-visible {
    outline: 2px solid var(--wh-color-primary, #333);
    outline-offset: 1px;
}

/* Zgoda: pole wyboru OBOK tresci, nie nad nia — inaczej dluga tresc odrywa sie
   od checkboxa i nie widac, czego dotyczy. */
.wh-pinq__field--consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--wh-space-xs, 8px);
    font-weight: var(--wh-font-weight-regular, 400);
    line-height: 1.45;
}

.wh-pinq__field--consent input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.wh-pinq__submit {
    padding: var(--wh-space-sm, 10px) var(--wh-space-md, 20px);
    font: inherit;
    font-weight: var(--wh-font-weight-medium, 500);
    color: var(--wh-color-text-inverse, #fff);
    background-color: var(--wh-color-primary, #333);
    border: 0;
    border-radius: var(--wh-radius-sm, 4px);
    cursor: pointer;
}

.wh-pinq__submit:disabled {
    opacity: .6;
    cursor: default;
}

.wh-pinq__status {
    margin: var(--wh-space-sm, 10px) 0 0;
    font-size: var(--wh-font-size-small, 13px);
}

/* Proporcje domieszki wyliczone pod kontrast, nie dobrane na oko —
   tabela z CLAUDE.md (success 55 %, danger 70 % dla tekstu). */
.wh-pinq__status--ok {
    color: color-mix(in srgb, var(--wh-color-semantic-success, #1f8a4c) 55%, #000);
}

.wh-pinq__status--err {
    color: color-mix(in srgb, var(--wh-color-semantic-danger, #c2362f) 70%, #000);
}

/* ── Ukrycie ceny na karcie produktu niedostepnego ──
   Klase na <body> nadaje front.js, gdy modul wyrenderowal formularz — czyli
   gdy PHP policzyl, ze wariantu nie ma na stanie.

   ⚠️ DWA ZESTAWY SELEKTOROW, bo motywy nazywaja cene inaczej:
   Hummingbird i motywy z niego pochodne uzywaja `product__prices-*`
   (podwojny podkreslnik), Classic — `product-prices`. Pierwsza wersja miala
   tylko wariant Classic i cena zostawala widoczna na Hummingbirdzie,
   mimo ze reguła „dzialala" (zmierzone na 8140: `.product-prices` nie
   istnialo w DOM w ogole).

   ⚠️ Cena NADAL JEST w zrodle strony, tylko jej nie pokazujemy. Jesli klient
   wymaga, zeby jej tam w ogole nie bylo, potrzebny jest override szablonu
   produktu — osobna decyzja, bo dotyka motywu. */
body.wh-pinq-price-hidden .product__prices-block,
body.wh-pinq-price-hidden .product__prices-inline,
body.wh-pinq-price-hidden .product-prices,
body.wh-pinq-price-hidden .product-price,
body.wh-pinq-price-hidden .product-discounts {
    display: none;
}