/* Sito pubblico — stili specifici (i token colore e i componenti sono in app.css) */

/* ---------- App a schermo intero (index.php) ---------- */
:root {
    --hdr-top: calc(env(safe-area-inset-top, 0px) + 14px); /* spazio sopra l'header */
    --hdr-h: calc(var(--hdr-top) + 57px);                  /* 40px bottoni + 16px padding + 1px bordo */
    --bar-h: calc(96px + env(safe-area-inset-bottom, 0px)); /* altezza barra totale mobile */
}
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
html.app-mode, html.app-mode body { height: 100%; margin: 0; background-color: rgb(var(--c-page)); overflow: hidden; overscroll-behavior: none; }

.app-container { position: fixed; inset: 0; width: 100%; background-color: rgb(var(--c-page)); overflow: hidden; overflow: clip; } /* clip: nessuno scroll orizzontale nemmeno da scrollIntoView */
.app-header { padding-top: var(--hdr-top); }
.screen-pad { padding-top: calc(var(--hdr-h) + 16px); }
.menu-pos { top: calc(var(--hdr-h) - 4px); }
.sticky-side { top: 0; }
.side-card { display: flex; flex-direction: column; max-height: calc(100vh - var(--hdr-h) - 72px); max-height: calc(100dvh - var(--hdr-h) - 72px); }
.side-scroll { min-height: 0; overflow-y: auto; }
.side-scroll.is-scroll { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); padding-bottom: 12px; }
#modalBox:focus { outline: none; }

.glass-panel { background: rgb(var(--c-card) / 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Larghezza contenuto: mobile piena, tablet 640px, desktop max-w-6xl */
.wrap { width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .wrap { max-width: 640px; } }
@media (min-width: 1024px) { .wrap { max-width: 72rem; } .wrap-narrow { max-width: 48rem; } }

/* Schermate (block + scroll) */
.screen {
    position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0s linear 0.4s;
    background-color: rgb(var(--c-page)); scrollbar-width: none;
}
.screen::-webkit-scrollbar { width: 0; background: transparent; }
.screen-hidden-left  { transform: translateX(-100%); opacity: 0; pointer-events: none; visibility: hidden; }
.screen-hidden-right { transform: translateX(100%);  opacity: 0; pointer-events: none; visibility: hidden; }
.screen-active       { transform: translateX(0); opacity: 1; pointer-events: auto; z-index: 10; visibility: visible; transition-delay: 0s; }

/* Step: solo lo step attivo è nel flusso */
@keyframes stepInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes stepInLeft  { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
.step-in-right { animation: stepInRight 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }
.step-in-left  { animation: stepInLeft 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Barra totale fluttuante (solo < 1024px) */
.booking-action-bar {
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 50;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)) 16px;
    background: linear-gradient(to top, rgb(var(--c-page) / 1) 65%, rgb(var(--c-page) / 0) 100%);
    transition: transform 0.3s ease;
}
.booking-action-bar.hidden-bar { transform: translateY(110%); pointer-events: none; }
.addr-typing .booking-action-bar { transform: translateY(110%); pointer-events: none; }
.addr-typing .wa-float { opacity: 0; pointer-events: none; }
.booking-action-bar > div { max-width: 640px; margin: 0 auto; }
.bar-price { transition: opacity 0.2s ease; }
.is-quoting .bar-price, .is-quoting [data-total] { opacity: 0.45; }

/* Header: elementi del flusso (step 2-3) solo su mobile/tablet */
.flow-only { display: none !important; }
@media (max-width: 1023px) {
    .in-flow .flow-only { display: flex !important; }
    .in-flow .noflow-only { display: none !important; }
}

/* Desktop */
@media (min-width: 1024px) {
    .screen-hidden-left, .screen-hidden-right { transform: none; }
    .screen { transition: opacity 0.25s ease, visibility 0s linear 0.25s; scrollbar-width: thin; scrollbar-color: rgb(var(--c-line)) transparent; }
    .screen-active { transition: opacity 0.25s ease; }
    .screen::-webkit-scrollbar { width: 10px; }
    .screen::-webkit-scrollbar-thumb { background: rgb(var(--c-line)); border-radius: 10px; border: 2px solid rgb(var(--c-page)); }
    .screen-pad { padding-top: calc(var(--hdr-h) + 32px); }
    .booking-action-bar { display: none; }
}

.btn-hero { background-color: #fff; color: #000; }
.btn-hero:hover { background-color: rgb(255 255 255 / 0.9); }
.car-bg { background-color: rgb(var(--c-soft) / 0.7); border-radius: 20px; }
.car-bg img { mix-blend-mode: multiply; }
.dark .car-bg img { mix-blend-mode: normal; border-radius: 12px; filter: brightness(0.92); }

/* Card veicolo selezionabile */
.veh-opt { border: 2px solid transparent; }
.veh-opt[aria-checked="true"] { border-color: rgb(var(--c-primary)); }

/* Campo con errore */
.field-error, .field-error:focus { box-shadow: 0 0 0 2px rgb(239 68 68) !important; border-color: rgb(239 68 68) !important; }

button:focus-visible, a:focus-visible, [tabindex]:focus-visible, [role="radio"]:focus-visible { outline: 2px solid rgb(var(--c-primary)); outline-offset: 2px; }
.bg-hero button:focus-visible, .bg-hero a:focus-visible { outline-color: #fff; }

/* Honeypot anti-spam */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 16px; height: 16px; border-radius: 9999px; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; display: inline-block; }

.counter-val { transition: transform 0.15s ease; }
.faq-chev { transition: transform 0.25s ease; }
[aria-expanded="true"] .faq-chev { transform: rotate(180deg); }

/* Pulsante WhatsApp fisso: sopra la barra del totale su mobile */
.wa-float {
    position: absolute; right: 16px; z-index: 55; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    background: #16a34a; color: #fff; font-size: 26px; box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.3);
    transition: bottom 0.3s ease, transform 0.2s ease;
}
.wa-float:active { transform: scale(0.94); }
.tab-booking .wa-float { bottom: calc(var(--bar-h) + 8px); }
.no-bar .wa-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .wa-float, .tab-booking .wa-float { bottom: 24px; right: 24px; } }
@media (max-width: 1023px) {
    /* spazio in fondo perché il pulsante non copra l'ultimo contenuto */
    .has-wa-float .screen { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
    .has-wa-float:not(.no-bar) #screen-booking { padding-bottom: calc(var(--bar-h) + 76px) !important; }
}

/* Banner cookie */
.cookie-banner {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.cookie-banner[hidden] { display: none; }
@media (min-width: 768px) { .cookie-banner { left: auto; right: 16px; bottom: 16px; max-width: 420px; padding: 0; } }

/* Contenuti markdown (page.php) */
.doc h2 { font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 0.5rem; color: rgb(var(--c-ink)); }
.doc h3, .doc h4 { font-size: 0.95rem; font-weight: 700; margin: 1.25rem 0 0.4rem; color: rgb(var(--c-ink)); }
.doc p, .doc li { font-size: 0.9rem; line-height: 1.7; color: rgb(var(--c-muted)); overflow-wrap: anywhere; }
.doc p + p { margin-top: 0.6rem; }
.doc ul { list-style: disc; padding-left: 1.25rem; margin-top: 0.5rem; }
.doc ol { list-style: decimal; padding-left: 1.25rem; margin-top: 0.5rem; }
.doc li + li { margin-top: 0.25rem; }
.doc strong { color: rgb(var(--c-ink)); font-weight: 600; }
.doc a { color: rgb(var(--c-ink)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.doc hr { border: 0; border-top: 1px solid rgb(var(--c-line)); margin: 1.5rem 0; }
.doc > :first-child { margin-top: 0; }
.page-header { padding-top: var(--hdr-top); }
.maint-pad { padding-top: calc(env(safe-area-inset-top, 0px) + 40px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }

@media (prefers-reduced-motion: reduce) {
    .screen, .step-in-right, .step-in-left, .booking-action-bar, .wa-float, .cookie-banner { transition: none !important; animation: none !important; }
}

/* ---------- Indirizzi: posizione attuale e suggerimenti ---------- */
.has-geo .addr-input { padding-right: 3.25rem; }
.geo-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    color: rgb(var(--c-ink)); transition: background-color 0.15s ease;
}
.geo-btn:hover, .geo-btn:active { background-color: rgb(var(--c-soft)); }
.geo-btn[hidden] { display: none; }
.geo-btn[aria-busy="true"] { color: rgb(var(--c-muted)); }
.sugg-opt[aria-selected="true"] { background-color: rgb(var(--c-soft)); }

/* ---------- Mappa del percorso (componente assets/maps.js + Leaflet, caricati su richiesta) ---------- */
.route-map { position: relative; z-index: 0; isolation: isolate; height: 180px; width: 100%; background-color: rgb(var(--c-soft)); font: inherit; }
.route-map.ncc-map { border-radius: 0; }
@media (min-width: 768px) { .route-map { height: 210px; } }
@media (min-width: 1024px) { .route-map { height: 240px; } }
.route-map[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 9999px; border: 2px solid rgb(var(--c-subtle)); border-right-color: transparent; animation: spin 0.7s linear infinite; }
.route-map.ncc-map .leaflet-control-attribution { font-size: 10px; line-height: 1.5; padding: 1px 6px; background: rgb(var(--c-card) / 0.9); color: rgb(var(--c-muted)); border-top-left-radius: 8px; }
.route-map.ncc-map .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 18px; }
.route-map.ncc-map .leaflet-bar a.leaflet-disabled { background-color: rgb(var(--c-soft)); color: rgb(var(--c-subtle)); }
.route-map.ncc-map .leaflet-marker-draggable { touch-action: none; }
.route-map.is-straight .ncc-route { stroke: rgb(var(--c-muted)); stroke-dasharray: 6 8; }
.route-map.is-straight .ncc-route-casing { display: none; }