/**
 * wh_viesvalidator – inline feedback styles
 * Attaches below the existing vat_number field — no separate widget.
 * Compatible with PrestaShop Classic and Hummingbird themes.
 *
 * @author    Woohoo.pl
 * @copyright 2025 Woohoo.pl
 */

/* ======================================================
   TOKENY MODULU
   ------------------------------------------------------
   Stany walidacji biora z SEMANTYCZNYCH tokenow branzy — to wlasnie ich roli
   odpowiadaja (sukces / blad / ostrzezenie / informacja). Tla i kolory tekstu
   sa odcieniami pochodnymi, ktorych paleta nie ma, wiec zostaja lokalne
   z fallbackiem = dotychczasowa wartosc. Standard: CLAUDE.md 5a.
   ====================================================== */

:root {
    /* Sukces i blad: wartosci IDENTYCZNE z paleta, wiec podpiecie nic nie zmienia. */
    --wh-vies-ok-border: var(--wh-color-semantic-success, #16a34a);
    --wh-vies-ok-bg: color-mix(in srgb, var(--wh-color-semantic-success, #16a34a) 10%, var(--wh-color-bg-base, #fff));
    --wh-vies-ok-text: color-mix(in srgb, var(--wh-color-semantic-success, #16a34a) 55%, #000);

    --wh-vies-err-border: var(--wh-color-semantic-danger, #dc2626);
    --wh-vies-err-bg: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 10%, var(--wh-color-bg-base, #fff));
    --wh-vies-err-text: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 70%, #000);

    /* ⚠️ Ostrzezenie i spinner: paleta ma INNY odcien niz modul mial
       (warning #f59e0b vs #d97706, info #0ea5e9 vs #3b82f6). Podpinamy mimo to,
       bo to role semantyczne i branza ma nimi sterowac — kolor zmieni sie
       nieznacznie, swiadomie. */
    --wh-vies-warn-border: var(--wh-color-semantic-warning, #d97706);
    --wh-vies-warn-bg: color-mix(in srgb, var(--wh-color-semantic-warning, #f59e0b) 12%, var(--wh-color-bg-base, #fff));
    --wh-vies-warn-text: color-mix(in srgb, var(--wh-color-semantic-warning, #f59e0b) 45%, #000);

    --wh-vies-spinner-head: var(--wh-color-semantic-info, #3b82f6);
    --wh-vies-spinner-track: color-mix(in srgb, var(--wh-color-border-strong, #9ca3af) 60%, var(--wh-color-bg-base, #fff));

    /* Stan ladowania — neutralny, paleta nie ma odpowiednika. */
    --wh-vies-loading-bg: color-mix(in srgb, var(--wh-color-text-primary, #1a1a1a) 3%, var(--wh-color-bg-base, #fff));
    --wh-vies-loading-border: var(--wh-color-border-strong, #94a3b8);
    --wh-vies-loading-text: color-mix(in srgb, var(--wh-color-text-primary, #1a1a1a) 75%, var(--wh-color-bg-base, #fff));

    /* Kolory linii szczegolow. */
    --wh-vies-detail-err: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 75%, #000);
    --wh-vies-detail-warn: color-mix(in srgb, var(--wh-color-semantic-warning, #f59e0b) 45%, #000);
    --wh-vies-detail-info: color-mix(in srgb, var(--wh-color-text-primary, #1a1a1a) 65%, var(--wh-color-bg-base, #fff));

    /* ⚠️ TYPOGRAFIA — NAPRAWA, nie kosmetyka. Modul mial `font-size: 0.84rem`
       itd., czyli byl pisany dla motywu z 1rem = 16px. Nasz child theme ma
       `html { font-size: 62.5% }` (1rem = 10px), wiec komunikaty renderowaly sie
       w 8,4 px, szczegoly w 8,1 px, a punktory w 7,5 px — zmierzone w Chrome,
       praktycznie nieczytelne. Przechodzimy na tokeny palety (12/14 px). */
    --wh-vies-font-size: var(--wh-font-size-small, 12px);
    --wh-vies-font-size-icon: var(--wh-font-size-body, 14px);

    --wh-vies-radius: var(--wh-radius-sm, 5px);
}

/* ── Feedback container ─────────────────────────────────────────────────── */
.wh-vies-feedback {
    margin: 5px 0 12px;
    padding: 10px 14px;
    border-radius: var(--wh-vies-radius, 5px);
    font-size: var(--wh-vies-font-size, 12px);
    line-height: 1.45;
    border-left: 4px solid transparent;
    animation: wh-fadein var(--wh-duration-fast, 0.18s) ease;
}

@keyframes wh-fadein {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── State variants ─────────────────────────────────────────────────────── */
.wh-vies-ok {
    background: var(--wh-vies-ok-bg, #f0fdf4);
    border-color: var(--wh-vies-ok-border, #16a34a);
    color: var(--wh-vies-ok-text, #14532d);
}
.wh-vies-err {
    background: var(--wh-vies-err-bg, #fef2f2);
    border-color: var(--wh-vies-err-border, #dc2626);
    color: var(--wh-vies-err-text, #7f1d1d);
}
.wh-vies-warn {
    background: var(--wh-vies-warn-bg, #fffbeb);
    border-color: var(--wh-vies-warn-border, #d97706);
    color: var(--wh-vies-warn-text, #78350f);
}

/* ── Loading ────────────────────────────────────────────────────────────── */
.wh-vies-loading {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: var(--wh-vies-loading-bg, #f8fafc);
    border-color: var(--wh-vies-loading-border, #94a3b8);
    color: var(--wh-vies-loading-text, #475569);
}

.wh-vies-spinner {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    border: 2px solid var(--wh-vies-spinner-track, #cbd5e1);
    border-top-color: var(--wh-vies-spinner-head, #3b82f6);
    border-radius: 50%;
    animation: wh-spin 0.65s linear infinite;
}

@keyframes wh-spin {
    to { transform: rotate(360deg); }
}

/* ── Header row (icon + title) ──────────────────────────────────────────── */
.wh-vies-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--wh-font-weight-semibold, 600);
}

.wh-vies-icon {
    font-size: var(--wh-vies-font-size-icon, 14px);
    flex-shrink: 0;
    line-height: 1;
}

/* ── Detail list ────────────────────────────────────────────────────────── */
.wh-vies-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 0 0 22px;
}

.wh-vies-list li {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 3px;
    font-size: var(--wh-vies-font-size, 12px);
}

.wh-bullet {
    flex-shrink: 0;
    width: 14px;
    font-size: var(--wh-vies-font-size, 12px);
    opacity: 0.75;
}

/* Detail line type colours */
.wh-d-ok   { color: inherit;   }
.wh-d-err  { color: var(--wh-vies-detail-err, #b91c1c);   }
.wh-d-warn { color: var(--wh-vies-detail-warn, #92400e);   }
.wh-d-info { color: var(--wh-vies-detail-info, #64748b); font-style: italic; }

/* ── Classic theme: feedback spans full row below the form-group ────────── */
.form-group + .wh-vies-feedback {
    /* Classic wraps inputs in .col-md-* inside .form-group.
       We inject after .form-group so we stay in the natural flow. */
    margin-top: -2px;
}

/* ── Hummingbird theme ──────────────────────────────────────────────────── */
.js-address-form-field + .wh-vies-feedback,
.form-field + .wh-vies-feedback {
    margin-top: -4px;
}

/* ── Bootstrap 5 utility aliases (for sites still on BS4) ──────────────── */
.wh-vies-feedback strong { font-weight: var(--wh-font-weight-semibold, 600); }
.wh-vies-feedback small  { font-size: var(--wh-vies-font-size, 12px); opacity: 0.85; }