/* ============================================================================
   shop.css — stylesheet del FRONTEND / negozio (storefront).
   Completamente separato dal backoffice: l'admin usa assets/local/admin.css.
   Contiene solo i refinement Tabler / form / tom-select usati dallo shop;
   le regole admin-only (BSGrid2, jqGrid, topbar, sidebar, page-header,
   lang-switcher) vivono in admin.css e NON sono incluse qui.
   ⚠ I refinement generici qui sono duplicati in admin.css: tienili allineati.
   ============================================================================ */

/* Neutralizza l'hack scrollbar di Tabler (:root margin-left: calc(100vw-100%))
   e riserva sempre il gutter della scrollbar verticale, così l'apertura di un
   dialog (che mette overflow:hidden sul body) non provoca salti orizzontali. */
:root {
    margin-left: 0;
    margin-right: 0;
}

html {
    scrollbar-gutter: stable;
}

.fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline) label ~ .fv-plugins-icon {
    top: 27px;
    right: 0;
}

/* --- UI refinements ---------------------------------------------------- */

.form-help-text {
    color: rgba(0, 0, 0, 0.62);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-top: 4px;
}

.nav-link,
.dropdown-item,
.btn,
.form-control,
.form-select {
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.btn {
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.985);
}

/* --- Focus visibile da tastiera (accessibilità) --------------------- */

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--tblr-primary, #dba928);
    outline-offset: 2px;
}

/* --- Skip-to-content (WCAG 2.4.1) ------------------------------------- */
/* Fuori schermo finché non riceve il focus da tastiera, poi scende in vista. */

.lc-skip-link {
    position: absolute;
    left: .5rem;
    top: -3.5rem;
    z-index: 2000;
    padding: .5rem .9rem;
    background: var(--tblr-primary, #dba928);
    color: var(--lc-btn-text, #1a1a1a);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--tblr-border-radius, .375rem);
    transition: top .15s ease;
}

.lc-skip-link:focus {
    top: .5rem;
    /* Outline scuro: visibile sullo sfondo primario (oro), a differenza del ring globale. */
    outline: 2px solid var(--tblr-body-color, #0f172a);
    outline-offset: 2px;
}

/* --- Reduced motion (WCAG 2.3.3) ------------------------------------- */
/* Rispetta la preferenza di sistema: neutralizza animazioni/transizioni custom
   (es. fade-in login, micro-interazioni .btn, slide dello skip-link). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Tom Select ------------------------------------------------------- */

.ts-wrapper.form-select,
.ts-wrapper.form-control {
    padding: 0;
}

.ts-wrapper.multi .ts-control {
    min-height: 38px;
    max-height: 86px;
    overflow-y: auto;
    align-content: flex-start;
}

.ts-wrapper.plugin-checkbox_options .option input {
    margin: 0 0.5rem 0 0;
    flex: 0 0 auto;
}

.ts-dropdown {
    z-index: 1060;
    background: #fff;
    max-width: 100%;
    overflow: hidden;
}

.ts-dropdown-content {
    background: #fff;
}

.ts-dropdown.plugin-checkbox_options .option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 30px;
    line-height: 1.35;
    padding: 5px 0.75rem;
    white-space: normal;
    background: #fff;
}

.ts-dropdown.plugin-checkbox_options .option.active,
.ts-dropdown.plugin-checkbox_options .option:hover {
    background: rgba(var(--tblr-primary-rgb, 219, 169, 40), 0.10);
}

.ts-dropdown.plugin-checkbox_options .option .tomselect-checkbox {
    position: static;
}

.ts-wrapper.ts-dropdown-inline .ts-dropdown {
    position: static;
    width: 100%;
    margin-top: 4px;
    border-top: 1px solid var(--tblr-border-color, #d9dee3);
    border-radius: 6px;
    box-shadow: none;
}

.ts-wrapper.ts-dropdown-inline {
    display: block !important;
    width: 100%;
}

.ts-wrapper.ts-dropdown-inline .ts-control {
    width: 100%;
}

/* ── Contrast refinements ────────────────────────────────────────────
   Tabler defaults use muted colors that read light on screen.
   Push key text values to WCAG AA–compliant contrast.
   ─────────────────────────────────────────────────────────────────── */

:root {
    --tblr-body-color:               #0f172a;
    --tblr-body-color-rgb:           15, 23, 42;

    --tblr-secondary-color:          rgba(15, 23, 42, 0.72);
    --tblr-secondary-color-rgb:      15, 23, 42;

    --tblr-muted:                    #4b5563;
    --tblr-muted-rgb:                75, 85, 99;

    --tblr-border-color:             #c8d0da;
    --tblr-border-color-translucent: rgba(0, 0, 0, 0.13);
}

/* Form labels — weight 500 eliminates the "too-thin" feel at 14px */
.form-label,
label.form-label,
.col-form-label {
    font-weight: 500;
    color: #111827;
}

/* Card section headers */
.card-header {
    color: #0f172a;
}
.card-header:not([class*="bg-"]) {
    background-color: #f3f4f6;
}
.card-header strong,
.card-header b {
    font-weight: 700;
}

/* Table headers */
.table > thead > tr > th {
    color: #374151;
    font-weight: 600;
}

/* Dropdown items */
.dropdown-item {
    color: #111827;
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: #0f172a;
}

/* Modal / dialog — title bar e command bar meno alti */
.modal-header {
    min-height: 3rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.modal-footer {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.modal-title {
    color: #0f172a;
    font-weight: 700;
}

/* Placeholder text — slightly more visible than browser default */
.form-control::placeholder,
.form-select::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* ── Contrasto testo auto-calcolato su sfondi bg-* ───────────────────
   Ogni classe bg-* "pubblica" il proprio colore in --tc-bg; la regola
   lo legge via relative-color syntax e produce nero o bianco a contrasto.
   .text-contrast applica lo stesso calcolo on-demand.
   Richiede relative-color syntax (Chrome 119+, Safari 16.4+, FF 128+).
   ─────────────────────────────────────────────────────────────────── */

.bg-primary   { --tc-bg: var(--tblr-primary); }
.bg-secondary { --tc-bg: var(--tblr-secondary); }
.bg-success   { --tc-bg: var(--tblr-success); }
.bg-danger    { --tc-bg: var(--tblr-danger); }
.bg-warning   { --tc-bg: var(--tblr-warning); }
.bg-info      { --tc-bg: var(--tblr-info); }
.bg-light     { --tc-bg: var(--tblr-light); }
.bg-dark      { --tc-bg: var(--tblr-dark); }

.bg-primary,
.bg-secondary,
.bg-success,
.bg-danger,
.bg-warning,
.bg-info,
.bg-light,
.bg-dark,
.text-contrast {
    color: oklch(from var(--tc-bg) clamp(0, (0.7 / l - 1) * infinity, 1) 0 0) !important;
}

/* Tabler 1.x rende .alert un flex row: ripristina il flusso a blocco
   come da Bootstrap originale. */
.alert {
    display: block;
}

/* === Contrasto AA (Fase 4) — componenti che usano il colore brand come testo ===
   Il primario/link del tema è un accento: come testo o pill su sfondo chiaro può
   scendere sotto 4,5:1. Questi override riportano i componenti shop a WCAG AA. */

/* Pill di navigazione attiva (area cliente): la variante soft (verde su tint 4%)
   dava ~1,9:1. Pill piena = coppia primario/btn-text già validata dal guardrail
   editor tema (~8:1 sul tema dev). !important per battere lo stile soft di base. */
.lc-account-nav .nav-link.active {
    background-color: var(--tblr-primary) !important;
    color: var(--lc-btn-text) !important;
}

/* Utility .text-primary come testo su sfondo chiaro (es. "1 Carrello"): il primario
   è troppo chiaro → usa il colore link del tema (validato AA su sfondo pagina). */
.text-primary {
    color: var(--lc-link-color) !important;
}

/* Badge di stato (ordini/resi/indirizzi): i contestuali Bootstrap pieni davano
   testo bianco su verde/azzurro ~2,7:1. Variante soft AA (tinta chiara + testo
   scuro, tutti ≥5,7:1). I contatori carrello usano .lc-minicart-count/.lc-bn-badge
   (classi proprie) → non toccati. .bg-dark resta pieno (bianco su scuro = AA). */
.badge.bg-success   { background-color: #d6f0df !important; color: #10672e !important; }
.badge.bg-primary   { background-color: #dce9fb !important; color: #0b4f97 !important; }
.badge.bg-info      { background-color: #dce9fb !important; color: #0b4f97 !important; }
.badge.bg-warning   { background-color: #fbedcb !important; color: #7a5200 !important; }
.badge.bg-secondary { background-color: #e7eaee !important; color: #3e4654 !important; }

/* Bottoni outline-primario: testo/bordo = primario su bianco (~2,16:1). A riposo usano
   il colore link del tema (AA su chiaro); su hover riempiono di primario con testo scuro. */
.btn-outline-primary {
    --tblr-btn-color: var(--lc-link-color);
    --tblr-btn-border-color: var(--lc-link-color);
    --bs-btn-color: var(--lc-link-color);
    --bs-btn-border-color: var(--lc-link-color);
    color: var(--lc-link-color);
    border-color: var(--lc-link-color);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active {
    --tblr-btn-hover-color: var(--lc-btn-text);
    --bs-btn-hover-color: var(--lc-btn-text);
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
    color: var(--lc-btn-text);
}

/* Icone Tabler scelte dal cliente (trust badge, footer, menu…): inline-SVG da
   assets/tabler-icons/svg/, drop-in di <i class="ti">. Dimensione = 1em (segue
   font-size), colore = currentColor (segue color). Vedi tablerIconSvg(). */
.ti-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}