/* Omnia_PartFinder — advanced-home.css
 * Stile del selettore home (selector/advanced-home.phtml).
 * Layout desktop qui; le regole tablet/mobile (breakpoint configurabili da admin)
 * sono generate nel template. Variabili impostate inline sulla root:
 * --pfh-accent, --pfh-hl, --pfh-overlay. */

.pfh {
    --pfh-line: #e6e9ee;
    --pfh-ink: #1c2733;
    --pfh-muted: #6b7684;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    background: #1f2a3a;
    color: #fff;
    z-index: 2;
}
.pfh *, .pfh *::before, .pfh *::after { box-sizing: border-box; }

/* 100vw comprende la barra di scorrimento verticale: senza questo la pagina
 * andrebbe oltre il bordo e comparirebbe la barra orizzontale. "clip" non crea
 * un contenitore di scroll, quindi non rompe sticky/position. */
html:has(.pfh), body:has(.pfh) { overflow-x: clip; }

.pfh-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.pfh-bg::after { content: ''; position: absolute; inset: 0; background: var(--pfh-overlay); }

.pfh-inner {
    position: relative;
    max-width: 1240px; margin: 0 auto; padding: 36px 20px;
    display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 2.1fr);
    gap: 40px; align-items: center;
}

/* ── Testi hero ─────────────────────────────────────────────────────────── */
.pfh-title { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700; color: #fff; }
.pfh-hl { display: block; color: var(--pfh-hl); }
.pfh-sub { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.85); }
.pfh-t-mobile { display: none; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.pfh-card {
    display: grid; grid-template-columns: minmax(0, 1fr);
    background: #fff; color: var(--pfh-ink);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.28);
}
.pfh-main { padding: 22px 24px; }

/* Swap a tutte le larghezze: con veicolo attivo la scheda SOSTITUISCE il selettore
   nello stesso box; "Cambia veicolo" riapre il selettore, "Torna al veicolo" la scheda. */
.pfh--has .pfh-main { display: none; }
.pfh--has.pfh--changing .pfh-main { display: block; }
.pfh--has.pfh--changing .pfh-veh { display: none; }
.pfh--has.pfh--changing .pfh-back { display: inline-flex; }

.pfh-h { margin: 0; font-size: 18px; font-weight: 700; }
.pfh-hint { margin: 2px 0 14px; font-size: 13px; color: var(--pfh-muted); }

.pfh-back {
    display: none; align-items: center; gap: 5px; margin: 0 0 12px; padding: 0;
    background: transparent; border: 0; box-shadow: none;
    color: var(--pfh-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.pfh-back:hover { color: var(--pfh-accent); }

/* Tab Targa / Manuale (solo mobile, abilitate dal template) */
.pfh-tabs { display: none; gap: 4px; padding: 3px; margin: 0 0 14px; background: #f1f3f6; border-radius: 10px; }
.pfh .pfh-tab {
    flex: 1; margin: 0; padding: 9px; background: transparent; border: 0; border-radius: 8px;
    box-shadow: none; color: var(--pfh-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.pfh .pfh-tab--on { background: #fff; color: var(--pfh-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── Targa ──────────────────────────────────────────────────────────────── */
/* Desktop: targa corta (circa un terzo) con nota a fianco; su mobile torna a tutta larghezza (regole nel template) */
.pfh-plate-block { display: flex; align-items: center; gap: 16px; }
.pfh .pf-targa-form { flex: 0 0 auto; width: 340px; max-width: 100%; margin: 0; }
.pfh-plate-note { font-size: 12px; color: var(--pfh-muted); }
.pfh-plate {
    display: flex; align-items: center; gap: 8px; height: 54px; padding: 4px;
    border: 1px solid #cdd3db; border-radius: 10px; background: #fff;
}
.pfh-plate:focus-within { border-color: var(--pfh-accent); }
.pfh-flag {
    width: 34px; height: 100%; flex-shrink: 0; border-radius: 7px;
    background: #2b59b5; color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.pfh .pf-plate-input {
    flex: 1; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 4px !important;
    border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important;
    font-size: 20px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pfh-ink);
}
.pfh .pf-plate-input::placeholder { color: #aab2bd; }
.pfh .pfh-plate-submit {
    height: 100%; flex-shrink: 0; margin: 0; padding: 0 20px; border: 0; border-radius: 7px;
    background: var(--pfh-accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: none; text-shadow: none;
    transition: filter .15s;
}
.pfh .pfh-plate-submit:hover { filter: brightness(.92); }

.pfh-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 12px; color: var(--pfh-muted); }
.pfh-divider::before, .pfh-divider::after { content: ''; flex: 1; height: 1px; background: var(--pfh-line); }

/* ── Campi manuali ──────────────────────────────────────────────────────── */
.pfh .pf-manual-spinner { position: relative; min-height: 55px; }
.pfh-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; }
.pfh-field { min-width: 0; }
.pfh-sel { position: relative; }
/* Numero di passo dentro il campo (setActive() in advanced-selector.js attiva/disattiva .numero_active) */
.pfh .pfh-sel > span[class^="numero"] {
    position: absolute !important; left: 9px !important; top: 50% !important; right: auto !important; transform: translateY(-50%) !important; z-index: 5 !important;
    width: 20px !important; height: 20px !important; margin: 0; padding: 0; border-radius: 50% !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; text-indent: 0 !important;
    background: #eef0f3; color: #8a94a2; font-size: 11px; font-weight: 600; text-align: center;
    display: flex !important; align-items: center; justify-content: center; pointer-events: none;
}
.pfh .pfh-sel > span.numero_active { background: var(--pfh-accent); color: #fff; }

.pfh .ts-wrapper { margin: 0 !important; width: 100% !important; }
.pfh .ts-wrapper .ts-control {
    min-height: 40px; height: 40px; padding: 0 30px 0 38px !important;
    border: 1px solid #cdd3db !important; border-radius: 8px !important; background: #fff !important;
    box-shadow: none !important; display: flex; align-items: center; font-size: 13px; color: var(--pfh-ink);
    flex-wrap: nowrap !important;
}
.pfh .ts-wrapper .ts-control::before { display: none !important; }
/* freccia nativa di TomSelect: la sostituisce il chevron .pfh-sel::after (altrimenti compaiono due frecce) */
.pfh .ts-wrapper.single .ts-control::after, .pfh .ts-wrapper.single .ts-control:after { display: none !important; content: none !important; }
.pfh .ts-wrapper .ts-control input { font-size: 13px; min-width: 0; height: auto !important; }
.pfh .ts-wrapper .ts-control > .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfh .ts-wrapper:not(.disabled):not(.has-items) .ts-control { border-color: var(--pfh-accent) !important; }
.pfh .ts-wrapper.disabled .ts-control { background: #f6f7f9 !important; border-color: #e6e9ee !important; }
.pfh .ts-wrapper .ts-control .clear-button { right: 26px !important; }
.pfh .pfh-sel::after {
    content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; pointer-events: none; z-index: 2;
    border-right: 2px solid #8a94a2; border-bottom: 2px solid #8a94a2; transform: translateY(-70%) rotate(45deg);
}
.pfh-dd.ts-dropdown {
    z-index: 1000000;
    border: 1px solid #dfe3e8 !important; border-radius: 10px !important; margin-top: 4px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.14) !important; color: var(--pfh-ink);
}
.pfh-dd .option { padding: 9px 12px !important; font-size: 13px; }
.pfh-dd .option.active { background: #f1f4f9 !important; color: inherit !important; }


/* ── Scheda veicolo attivo (sostituisce il selettore, stesso box) ───────── */
.pfh-veh {
    display: none; padding: 22px 24px; background: #fff;
    grid-template-columns: 96px minmax(0, 1fr) minmax(220px, auto); gap: 4px 20px; align-items: center;
}
.pfh--has .pfh-veh { display: grid; }
.pfh-veh-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.pfh-veh-top { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--pfh-muted); }
.pfh .pfh-change {
    display: inline-flex; align-items: center; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none;
    color: var(--pfh-accent); font-size: 13px; font-weight: 600; cursor: pointer;
}
.pfh .pfh-change:hover { text-decoration: underline; }
.pfh-v-ico {
    height: 64px; border-radius: 10px; background: #f6f8fb; border: 1px solid var(--pfh-line);
    display: flex; align-items: center; justify-content: center;
}
.pfh-v-ico > img, .pfh-v-ico > svg { height: 40px; width: auto; display: block; }
.pfh-v-name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--pfh-ink); }
.pfh-v-engine { margin: 2px 0 0; font-size: 13px; color: var(--pfh-muted); }
.pfh-v-specs {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 28px; margin: 14px 0 0;
    padding-top: 12px; border-top: 1px solid var(--pfh-line);
}
.pfh-spec { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; font-size: 13px; min-width: 0; }
.pfh-spec span { color: var(--pfh-muted); font-size: 12px; }
.pfh-spec b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfh .pfh-v-cta {
    padding: 13px 16px; border-radius: 9px; background: var(--pfh-accent);
    color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s;
}
.pfh .pfh-v-cta:hover { filter: brightness(.92); }

/* ── Loader del selettore manuale ───────────────────────────────────────────
   advanced-selector.js aggiunge/toglie .loaderselect1 su #uid-loader mentre carica
   (avvio, carburanti, modelli, motori). Tre barrette animate nel colore accento. */
.pfh .loaderselect1,
.pfh .loaderselect1::before,
.pfh .loaderselect1::after {
    background: var(--pfh-accent);
    animation: pfh-load 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}
.pfh .loaderselect1 {
    color: var(--pfh-accent);
    text-indent: -9999em;
    position: absolute;
    top: 25%;
    left: 50%;
    font-size: 8px;
    transform: translateZ(0);
    animation-delay: -0.16s;
}
.pfh .loaderselect1::before,
.pfh .loaderselect1::after { position: absolute; top: 0; content: ''; }
.pfh .loaderselect1::before { left: -1.5em; animation-delay: -0.32s; }
.pfh .loaderselect1::after { left: 1.5em; }
@keyframes pfh-load {
    0%, 80%, 100% { box-shadow: 0 0; height: 4em; }
    40% { box-shadow: 0 -2em; height: 5em; }
}

/* Posizionamento esplicito della scheda veicolo: riga 1 intestazione, riga 2 icona | nome | CTA, riga 3 specifiche */
.pfh-veh-head { grid-column: 1 / -1; grid-row: 1; }
.pfh-v-ico    { grid-column: 1; grid-row: 2; }
.pfh-v-id     { grid-column: 2; grid-row: 2; min-width: 0; }
.pfh .pfh-v-cta { grid-column: 3; grid-row: 2; white-space: nowrap; }
.pfh-v-specs  { grid-column: 1 / -1; grid-row: 3; }

/* ── Foto del veicolo (pub/media/model/{pf_modid}.png) al posto dell'icona ──
   La classe .pfh--photo la imposta pf-home-selector.js solo a immagine caricata. */
.pfh-v-photo { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pfh--photo .pfh-veh { grid-template-columns: 170px minmax(0, 1fr) minmax(220px, auto); }
.pfh--photo .pfh-v-ico { height: 100px; padding: 4px; background: transparent; border: 0; }

/* ── Skeleton della scheda veicolo ──────────────────────────────────────────
   .pfh--loading: presente da subito se c'è il cookie del veicolo, tolto da
   pf-home-selector.js a dati (ed eventuale foto) caricati. */
@keyframes pfh-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pfh--loading .pfh-v-ico,
.pfh--loading .pfh-v-name:empty,
.pfh--loading .pfh-v-engine:empty,
.pfh--loading .pfh-spec b,
.pfh--loading .pfh-v-cta {
    background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 50%, #eceff3 75%) 0 0 / 200% 100%;
    animation: pfh-shimmer 1.2s linear infinite;
    border-radius: 6px; border-color: transparent;
}
.pfh--loading .pfh-v-ico > * { visibility: hidden; }
.pfh--loading .pfh-v-name:empty { height: 20px; width: 60%; }
.pfh--loading .pfh-v-engine:empty { height: 14px; width: 40%; margin-top: 8px; }
.pfh--loading .pfh-spec b { color: transparent; min-width: 80px; }
.pfh--loading .pfh-v-cta { color: transparent !important; pointer-events: none; }
.pfh--loading .pfh-v-cta > * { visibility: hidden; }