/* ============================================================
   DLF Catalogo Vetrina — Frontend v1.3.0
   Mobile-first · SPA · Scheda prodotto + Form contatto
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

#dlfc-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4px 0 56px;
    color: #1a1a1a;
}

/* ── VISTE SPA ───────────────────────────────────────────── */
.dlfc-view { display: none; }
.dlfc-view.active { display: block; }
.dlfc-fade-in { animation: dlfc-fadein .22s ease both; }
@keyframes dlfc-fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ── LOADER ──────────────────────────────────────────────── */
#dlfc-loader {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 9999;
    align-items: center; justify-content: center;
}
#dlfc-loader.visible { display: flex; }
.dlfc-loader-spinner {
    width: 44px; height: 44px;
    border: 4px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dlfc-spin .7s linear infinite;
}
@keyframes dlfc-spin { to { transform: rotate(360deg); } }

/* ── TOOLBAR ─────────────────────────────────────────────── */
.dlfc-toolbar {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dlfc-search-wrap { position: relative; display: flex; align-items: center; }
.dlfc-search-icon { position: absolute; left: 16px; color: #bbb; font-size: .95rem; pointer-events: none; transition: color .15s; }
.dlfc-search-wrap:focus-within .dlfc-search-icon { color: #CC1B1B; }
.dlfc-search {
    width: 100%; padding: 13px 44px;
    border: 1.5px solid #e2e2e2; border-radius: 10px;
    font-size: .95rem; color: #111; background: #fafafa; outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
    appearance: none; -webkit-appearance: none;
}
.dlfc-search:focus { border-color: #CC1B1B; box-shadow: 0 0 0 3px rgba(204,27,27,.1); background: #fff; }
.dlfc-search::placeholder { color: #bbb; }
.dlfc-search-clear {
    position: absolute; right: 14px; background: none; border: none;
    color: #bbb; cursor: pointer; padding: 4px; font-size: .85rem; transition: color .13s;
}
.dlfc-search-clear:hover { color: #555; }
.dlfc-filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.dlfc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border: 1.5px solid #e2e2e2; border-radius: 999px;
    background: #fff; color: #555; font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: all .16s; white-space: nowrap; line-height: 1;
}
.dlfc-pill:hover { border-color: #CC1B1B; color: #CC1B1B; background: #fff5f5; }
.dlfc-pill.active { background: #CC1B1B; border-color: #CC1B1B; color: #fff; box-shadow: 0 2px 8px rgba(204,27,27,.3); }
.dlfc-pill i { font-size: .78em; }
.dlfc-risultati { font-size: .82rem; color: #aaa; margin-bottom: 18px; padding-left: 4px; font-weight: 500; }
.dlfc-risultati #dlfc-count { font-weight: 700; color: #333; }

/* ── GRIGLIA ─────────────────────────────────────────────── */
.dlfc-griglia { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }

/* ── CARD ────────────────────────────────────────────────── */
.dlfc-card {
    background: #fff; border: 1px solid #e8e8e8; border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .22s, transform .18s, border-color .18s;
    animation: dlfc-fadeup .35s ease both; cursor: pointer;
}
@keyframes dlfc-fadeup { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.dlfc-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1); transform: translateY(-3px); border-color: #CC1B1B; }
.dlfc-card.dlfc-hidden { display: none; }
.dlfc-card-foto { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #f5f5f5; flex-shrink: 0; }
.dlfc-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.dlfc-card:hover .dlfc-card-foto img { transform: scale(1.04); }
.dlfc-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; font-weight: 800; color: rgba(0,0,0,.22); user-select: none; }
.dlfc-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.dlfc-badge { display: inline-block; padding: 3px 10px; background: #CC1B1B; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; width: fit-content; flex-shrink: 0; }
.dlfc-card-title { font-size: .97rem; font-weight: 700; color: #111; margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dlfc-card-desc { font-size: .82rem; color: #666; line-height: 1.55; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dlfc-card-cta { margin-top: auto; padding-top: 12px; font-size: .78rem; font-weight: 700; color: #CC1B1B; display: flex; align-items: center; gap: 6px; transition: gap .15s; }
.dlfc-card:hover .dlfc-card-cta { gap: 10px; }
.dlfc-empty { text-align: center; padding: 60px 20px; }
.dlfc-empty i { font-size: 2.5rem; color: #ddd; display: block; margin-bottom: 14px; }
.dlfc-empty p { font-size: 1.1rem; font-weight: 700; color: #999; margin: 0 0 6px; }
.dlfc-empty small { color: #bbb; font-size: .85rem; }

/* ══ DETTAGLIO PRODOTTO ══════════════════════════════════ */

/* Breadcrumb */
.dlfc-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 24px; font-size: .85rem; color: #aaa;
    flex-wrap: wrap;
}
.dlfc-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: .85rem; font-weight: 600;
    color: #333; transition: all .15s;
}
.dlfc-back-btn:hover { background: #CC1B1B; border-color: #CC1B1B; color: #fff; }
.dlfc-bc-sep { color: #ddd; }
.dlfc-bc-cat, .dlfc-bc-current { font-weight: 600; color: #555; }
.dlfc-bc-current { color: #111; }

/* Scheda: foto + info */
.dlfc-scheda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 36px;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    align-items: start;
}
.dlfc-scheda-foto {
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 4/3;
}
.dlfc-scheda-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlfc-scheda-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 5rem; font-weight: 800; color: rgba(0,0,0,.18); user-select: none;
}
.dlfc-scheda-info { display: flex; flex-direction: column; gap: 16px; }
.dlfc-scheda-titolo { font-size: 1.8rem; font-weight: 800; color: #111; margin: 0; line-height: 1.2; }
.dlfc-scheda-desc { font-size: .97rem; color: #555; line-height: 1.7; margin: 0; }
.dlfc-btn-ancora {
    display: inline-flex; align-items: center; gap: 9px;
    background: #CC1B1B; color: #fff;
    padding: 13px 26px; border-radius: 10px;
    font-size: .9rem; font-weight: 700; text-decoration: none;
    transition: background .15s, transform .12s, box-shadow .15s;
    box-shadow: 0 3px 12px rgba(204,27,27,.3);
    width: fit-content; margin-top: 8px;
}
.dlfc-btn-ancora:hover { background: #a81515; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(204,27,27,.35); color: #fff; text-decoration: none; }

/* ══ FORM CONTATTO ═══════════════════════════════════════ */
.dlfc-form-wrap {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    margin-bottom: 16px;
}
.dlfc-form-header {
    display: flex; align-items: flex-start; gap: 18px;
    margin-bottom: 30px; padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}
.dlfc-form-header-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    background: #fff5f5; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #CC1B1B;
}
.dlfc-form-header h3 { font-size: 1.3rem; font-weight: 800; color: #111; margin: 0 0 5px; }
.dlfc-form-header p { font-size: .88rem; color: #666; margin: 0; line-height: 1.5; }

.dlfc-form { display: flex; flex-direction: column; gap: 18px; }
.dlfc-form-row { display: flex; flex-direction: column; gap: 18px; }
.dlfc-row-2 { flex-direction: row; gap: 18px; }
.dlfc-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dlfc-field label { font-size: .82rem; font-weight: 600; color: #444; }
.dlfc-field input,
.dlfc-field textarea {
    padding: 11px 14px;
    border: 1.5px solid #e2e2e2;
    border-radius: 9px;
    font-size: .92rem;
    color: #111;
    background: #fafafa;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
    font-family: inherit;
    width: 100%;
}
.dlfc-field input:focus,
.dlfc-field textarea:focus {
    border-color: #CC1B1B;
    box-shadow: 0 0 0 3px rgba(204,27,27,.1);
    background: #fff;
}
.dlfc-field input::placeholder,
.dlfc-field textarea::placeholder { color: #c0c0c0; }
.dlfc-field textarea { resize: vertical; min-height: 120px; }

/* Privacy */
.dlfc-privacy-label {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .83rem; color: #555; cursor: pointer; line-height: 1.5;
}
.dlfc-privacy-label input[type="checkbox"] {
    width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
    accent-color: #CC1B1B; cursor: pointer;
}

/* Submit */
.dlfc-form-submit { flex-direction: row; }
.dlfc-btn-invia {
    display: inline-flex; align-items: center; gap: 9px;
    background: #CC1B1B; color: #fff;
    padding: 14px 32px; border: none; border-radius: 10px;
    font-size: .95rem; font-weight: 700; cursor: pointer;
    transition: background .15s, transform .12s, box-shadow .15s;
    box-shadow: 0 3px 12px rgba(204,27,27,.3);
}
.dlfc-btn-invia:hover:not(:disabled) { background: #a81515; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(204,27,27,.35); }
.dlfc-btn-invia:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Feedback */
#dlfc-form-feedback {
    padding: 14px 18px; border-radius: 9px;
    font-size: .88rem; font-weight: 600; line-height: 1.5;
    display: flex; align-items: center; gap: 9px;
}
.dlfc-fb-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.dlfc-fb-error   { background: #fff5f5; border: 1px solid #fecaca; color: #991b1b; }
#dlfc-form-feedback i { font-size: 1.1em; flex-shrink: 0; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .dlfc-griglia { grid-template-columns: repeat(3,1fr); gap: 15px; }
}
@media (max-width: 860px) {
    .dlfc-scheda { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
    .dlfc-scheda-foto { max-width: 480px; }
    .dlfc-scheda-titolo { font-size: 1.4rem; }
    .dlfc-form-wrap { padding: 24px; }
    .dlfc-row-2 { flex-direction: column; gap: 14px; }
}
@media (max-width: 720px) {
    .dlfc-griglia { grid-template-columns: repeat(2,1fr); gap: 12px; }
    .dlfc-toolbar { padding: 16px; gap: 12px; }
    .dlfc-card-body { padding: 13px 14px 15px; gap: 6px; }
    .dlfc-card-title { font-size: .92rem; }
    .dlfc-card-desc { -webkit-line-clamp: 2; }
    .dlfc-pill { padding: 6px 12px; font-size: .78rem; }
}
@media (max-width: 420px) {
    .dlfc-griglia { grid-template-columns: 1fr; gap: 10px; }
    .dlfc-card { flex-direction: row; }
    .dlfc-card-foto { width: 90px; min-width: 90px; aspect-ratio: 1; flex-shrink: 0; }
    .dlfc-placeholder { font-size: 1.8rem; }
    .dlfc-card-body { padding: 12px; gap: 5px; }
    .dlfc-card-desc { -webkit-line-clamp: 2; font-size: .8rem; }
    .dlfc-card-cta { display: none; }
    .dlfc-scheda { padding: 16px; }
    .dlfc-form-wrap { padding: 16px; }
    .dlfc-form-header { gap: 12px; }
    .dlfc-form-header-icon { width: 40px; height: 40px; font-size: 1.1rem; }
}
@media (hover: none) {
    .dlfc-card:hover { transform: none; box-shadow: 0 1px 4px rgba(0,0,0,.05); border-color: #e8e8e8; }
    .dlfc-card:active { background: #fff5f5; border-color: #CC1B1B; }
}