/* ============================================================
   DLF Noleggio — Frontend v5.0.0
   Loader: Apple-style 3 puntini animati
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

#dlf-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 0 48px;
    color: #1a1a1a;
    position: relative;
}

/* ── VIEWS ────────────────────────────────────────────────── */
.dlf-view { display: none; }
.dlf-view.active { display: block; }

/* Slide-in: la vista entra da leggermente sotto con fade */
.dlf-view.dlf-slide-in {
    animation: dlfSlideIn .28s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes dlfSlideIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fade-out quando si lascia la lista */
.dlf-view.dlf-fade-out {
    animation: dlfFadeOut .18s ease forwards;
}
@keyframes dlfFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* ── LOADER — Apple style 3 puntini ──────────────────────── */
#dlf-loader {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 64px 0 80px;
    min-height: 180px;
}
#dlf-loader.visible {
    display: flex;
}

/* Contenitore 3 dots */
.dlf-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dlf-dots span {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #1a1a1a;
    opacity: 0;
    animation: dlfDotPulse 1.2s ease-in-out infinite;
}

/* Delay sfalsato stile Apple */
.dlf-dots span:nth-child(1) { animation-delay: 0s; }
.dlf-dots span:nth-child(2) { animation-delay: 0.2s; }
.dlf-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dlfDotPulse {
    0%   { opacity: 0;    transform: scale(.6); }
    40%  { opacity: 1;    transform: scale(1); }
    80%  { opacity: 0.15; transform: scale(.7); }
    100% { opacity: 0;    transform: scale(.6); }
}

/* ── LISTA MARCHE ─────────────────────────────────────────── */
.dlf-marche-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dlf-marca-card {
    display: flex;
    align-items: center;
    gap: 32px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 20px 28px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: box-shadow .2s, transform .15s, border-color .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.dlf-marca-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.09);
    transform: translateY(-2px);
    border-color: #F5C518;
}
.dlf-mc-logo {
    flex-shrink: 0;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dlf-mc-logo img { max-height: 60px; max-width: 130px; object-fit: contain; }
.dlf-mc-nome-fallback { font-size: 1.4rem; font-weight: 800; color: #111; }
.dlf-mc-info { flex: 1; }
.dlf-mc-info strong { display: block; font-size: 1.2rem; font-weight: 700; color: #111; margin-bottom: 4px; }
.dlf-mc-info p { color: #666; font-size: .92rem; margin: 0 0 10px; line-height: 1.5; }
.dlf-mc-cta {
    font-size: .8rem; font-weight: 700; color: #111;
    background: #F5C518; padding: 5px 14px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
}
.dlf-mc-arrow {
    color: #ccc; font-size: 1.1rem; flex-shrink: 0;
    transition: color .18s, transform .18s;
}
.dlf-marca-card:hover .dlf-mc-arrow { color: #F5C518; transform: translateX(5px); }

/* ── PAGINA MARCA ─────────────────────────────────────────── */
.dlf-breadcrumb {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 22px; font-size: .88rem; color: #999;
}
.dlf-back-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 1px solid #ddd; border-radius: 8px;
    padding: 7px 14px; cursor: pointer; font-size: .86rem; font-weight: 600;
    color: #333; transition: all .15s;
}
.dlf-back-btn:hover { background: #F5C518; border-color: #F5C518; color: #111; }
.dlf-bc-sep { color: #ddd; }
.dlf-bc-current { font-weight: 600; color: #111; }

/* Hero */
.dlf-marca-hero {
    display: flex; align-items: center; gap: 28px;
    background: #fff; border: 1px solid #e8e8e8; border-radius: 14px;
    padding: 24px 32px; margin-bottom: 26px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.dlf-hero-logo { max-height: 70px; max-width: 180px; object-fit: contain; flex-shrink: 0; }
.dlf-hero-info h2 { font-size: 1.7rem; font-weight: 800; margin: 0 0 5px; }
.dlf-hero-info p  { color: #555; margin: 0; font-size: .94rem; line-height: 1.5; }

/* Tab nav */
.dlf-tab-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 2px solid #e8e8e8;
}
.dlf-tab-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: 11px 20px; font-size: .88rem; font-weight: 600; color: #888;
    cursor: pointer; transition: color .13s, border-color .13s; outline: none;
}
.dlf-tab-btn:hover { color: #111; }
.dlf-tab-btn.active { color: #111; border-bottom-color: #F5C518; }
.dlf-tab-btn i { color: #F5C518; font-size: .85em; }

.dlf-tab-panel { display: none; }
.dlf-tab-panel.active { display: block; }

/* Card intestazione */
.dlf-header-card {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid #e8e8e8;
    border-radius: 14px 14px 0 0;
    padding: 24px 32px; gap: 24px;
    border-bottom: none; margin-top: 20px;
}
.dlf-hc-left { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dlf-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: #F5C518; color: #111;
    font-weight: 700; font-size: .74rem; letter-spacing: .07em;
    padding: 5px 14px; border-radius: 999px; width: fit-content; text-transform: uppercase;
}
.dlf-hc-title  { font-size: 1.6rem; font-weight: 800; color: #111; margin: 0; line-height: 1.2; }
.dlf-hc-sub    { color: #666; font-size: .92rem; margin: 0; line-height: 1.5; }
.dlf-hc-right  { flex-shrink: 0; }
.dlf-hc-foto   { max-height: 180px; max-width: 280px; object-fit: contain; display: block; }

/* ── TABELLA TECNICA ──────────────────────────────────────── */
.dlf-table-wrap {
    background: #fff; border: 1px solid #e8e8e8;
    border-radius: 0 0 14px 14px; overflow: hidden;
    margin-bottom: 28px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.dlf-table-scroll { overflow-x: auto; }
.dlf-tech-table   { width: 100%; border-collapse: collapse; font-size: .9rem; }

.dlf-tech-table thead tr { background: #f5f5f5; border-bottom: 2px solid #e2e2e2; }
.dlf-tech-table th {
    padding: 11px 20px; text-align: left;
    font-weight: 700; font-size: .75rem;
    letter-spacing: .06em; color: #555;
    text-transform: uppercase; white-space: nowrap;
}
.dlf-th-modello { min-width: 180px; }
.dlf-th-unit {
    display: inline-block; margin-left: 4px;
    font-size: .7rem; font-weight: 500; color: #bbb;
    text-transform: none; letter-spacing: 0;
}
.dlf-th-pdf { width: 120px; text-align: center; }

.dlf-tech-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background .1s; }
.dlf-tech-table tbody tr:last-child { border-bottom: none; }
.dlf-row-even { background: #fff; }
.dlf-row-odd  { background: #fcfcfc; }
.dlf-tech-table tbody tr:hover { background: #fffbea !important; }

.dlf-tech-table td  { padding: 13px 20px; color: #444; vertical-align: middle; }
.dlf-mod-cell       { min-width: 180px; }
.dlf-mod-cell strong { display: block; font-size: .93rem; font-weight: 700; color: #111; line-height: 1.3; }
.dlf-tipo {
    display: inline-block; margin-top: 4px;
    font-size: .69rem; color: #888; background: #f0f0f0;
    border-radius: 4px; padding: 2px 7px; font-weight: 500;
}
.dlf-val-cell { font-size: .88rem; color: #555; font-variant-numeric: tabular-nums; }
.dlf-no-specs { padding: 20px 24px; color: #aaa; font-style: italic; margin: 0; }

/* ── TASTO SCHEDA PDF ─────────────────────────────────────── */
.dlf-pdf-cell { text-align: center; white-space: nowrap; }

.dlf-btn-pdf {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px;
    background: #fff; border: 1.5px solid #e53e3e; border-radius: 7px;
    color: #e53e3e; font-size: .78rem; font-weight: 700;
    text-decoration: none; letter-spacing: .02em;
    transition: background .15s, color .15s, box-shadow .15s, transform .12s;
    cursor: pointer; white-space: nowrap;
}
.dlf-btn-pdf i { font-size: 1em; }
.dlf-btn-pdf:hover {
    background: #e53e3e; color: #fff;
    box-shadow: 0 3px 10px rgba(229,62,62,.25);
    transform: translateY(-1px); text-decoration: none;
}
.dlf-btn-pdf:active { transform: translateY(0); }
.dlf-pdf-na { color: #d0d0d0; font-size: 1rem; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 700px) {
    .dlf-marca-card  { flex-direction: column; text-align: center; padding: 18px; gap: 14px; }
    .dlf-mc-logo     { width: auto; }
    .dlf-mc-arrow    { display: none; }
    .dlf-header-card { flex-direction: column; padding: 18px; }
    .dlf-hc-foto     { max-height: 110px; }
    .dlf-tab-btn     { padding: 9px 12px; font-size: .8rem; }
    .dlf-marca-hero  { flex-direction: column; text-align: center; padding: 18px; }
    .dlf-dots span   { width: 9px; height: 9px; }

    /* Tabella mobile: scroll orizzontale disabilitato,
       mostro solo la colonna Modello + freccia accordion */
    .dlf-table-scroll { overflow-x: visible; }

    .dlf-tech-table thead { display: none; }   /* nasconde intestazioni */

    /* Righe dati: mostra solo la cella modello */
    .dlf-tech-table tbody tr { display: flex; flex-direction: column; }
    .dlf-tech-table td       { display: none; }

    /* Solo la cella modello resta visibile, diventa il "trigger" */
    .dlf-mod-cell {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .dlf-mod-cell::after {
        content: '\f078';           /* fa-chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: .75rem;
        color: #bbb;
        transition: transform .22s ease, color .18s;
        margin-left: 10px;
        flex-shrink: 0;
    }
    tr.dlf-mod-open .dlf-mod-cell::after {
        transform: rotate(-180deg);
        color: #F5C518;
    }
    tr.dlf-mod-open .dlf-mod-cell {
        background: #fffbea;
        border-bottom: 1px solid #F5C518;
    }

    /* Nasconde colonne dati e PDF (gestite dall'accordion) */
    .dlf-val-cell,
    .dlf-pdf-cell { display: none !important; }

    /* ── Riga dettaglio accordion ─────────────────────────────── */
    tr.dlf-mobile-detail { display: none; }
    tr.dlf-mobile-detail.open { display: table-row; }
    tr.dlf-mobile-detail td { display: block !important; padding: 0; }

    .dlf-mobile-specs {
        background: #fafafa;
        border-bottom: 1px solid #eee;
        padding: 12px 16px 4px;
        animation: dlfSpecIn .2s ease;
    }
    @keyframes dlfSpecIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .dlf-ms-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: .85rem;
    }
    .dlf-ms-row:last-child { border-bottom: none; }
    .dlf-ms-label {
        color: #888;
        font-weight: 500;
        flex: 1;
        white-space: nowrap;
    }
    .dlf-ms-label em {
        font-style: normal;
        font-size: .75rem;
        color: #bbb;
        margin-left: 3px;
    }
    .dlf-ms-val {
        font-weight: 700;
        color: #111;
        font-size: .9rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .dlf-ms-pdf {
        padding: 10px 0 8px;
        text-align: center;
    }
    .dlf-ms-pdf .dlf-btn-pdf { font-size: .82rem; padding: 8px 18px; }
}