/* ============================================================
   DLF Noleggio — Frontend v3.2.0
   ============================================================ */
*, *::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;
}

.dlf-view { display: none; }
.dlf-view.active { display: block; }
.dlf-view.dlf-fade-in { animation: dlfFadeIn .22s ease; }
@keyframes dlfFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   LOADER — spinner grande, overlay fisso
   ============================================================ */
#dlf-loader {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#dlf-loader.visible { display: flex; }

.dlf-loader-label {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    background: #fff;
    padding: 16px 36px;
    border-radius: 10px;
    letter-spacing: .02em;
}
@keyframes dlfSpin { to { transform: rotate(360deg); } }

/* ============================================================
   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-logo { max-height: 48px; max-width: 140px; object-fit: contain; }
.dlf-hc-brand { font-size: .95rem; font-weight: 700; color: #444; }
.dlf-hc-right { flex-shrink: 0; }
.dlf-hc-foto { max-height: 180px; max-width: 280px; object-fit: contain; display: block; }

/* ============================================================
   TABELLA TECNICA — pulita, senza ripetizioni
   ============================================================ */
.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;
}

/* Header tabella */
.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;
}

/* Righe alternate */
.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; }

/* Celle */
.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; }

/* ============================================================
   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-tech-table th, .dlf-tech-table td { padding: 10px 14px; }
}