/* BD Tech Comparator — Frontend CSS */

.bdtc-wrap {
    --bg:#fff;--bg-card:#f7f8fa;--bg-input:#f0f1f4;--border:#e2e4ea;
    --accent:#003483;--accent-dim:rgba(0,52,131,0.07);--accent2:#ff4500;
    --text:#111318;--text-label:#444854;--muted:#6b7280;
    --radius:14px;--shadow:0 2px 16px rgba(0,0,0,0.07);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--bg);border-radius:20px;padding:16px 8px 32px;
    color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow);
}
.custom-dark .bdtc-wrap {
    --bg:var(--theme-palette-color-8);--bg-card:var(--theme-palette-color-8);
    --bg-input:var(--theme-palette-color-6);--border:#373839;
    --accent:var(--theme-palette-color-1);--accent-dim:rgba(0,242,246,0.08);
    --accent2:#00afbb;--text:#fff;--text-label:#bfb8b8;--muted:#bfb8b8;
    --shadow:0 0 24px rgba(0,242,246,0.10);
}
.bdtc-wrap * { box-sizing:border-box;margin:0;padding:0; }

.bdtc-title { font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:800;text-align:center;margin-bottom:6px;color:var(--text); }
.bdtc-title span { color:var(--accent); }
.bdtc-subtitle { text-align:center;color:var(--muted);font-size:13px;margin-bottom:28px; }

.bdtc-selectors { display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;margin-bottom:10px; }
.bdtc-selector-group label { display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:6px; }
.bdtc-search-wrap { position:relative; }
.bdtc-search-input { width:100%;background:var(--bg-input);border:1px solid gray;border-radius:var(--radius);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;padding:11px 15px;outline:none;transition:border-color .2s,box-shadow .2s; }
.bdtc-search-input:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim); }
.bdtc-hint { font-size:11px;color:var(--muted);margin-top:5px;font-style:italic; }

.bdtc-dropdown { position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);z-index:9999;max-height:240px;overflow-y:auto;display:none;box-shadow:0 8px 32px rgba(0,0,0,.12); }
.bdtc-dropdown.open { display:block; }
.bdtc-drop-item { padding:8px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--text);border-bottom:1px solid var(--border);transition:background .12s;min-height:60px; }
.bdtc-drop-item:hover { background:var(--accent-dim); }
.bdtc-drop-img { width:38px;height:50px;object-fit:contain;border-radius:5px;background:var(--bg);flex-shrink:0; }
.bdtc-drop-placeholder { width:38px;height:50px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.bdtc-drop-info { display:flex;flex-direction:column;flex:1;min-width:0; }
.bdtc-drop-name { font-size:13px;color:var(--text);line-height:1.4; }
.bdtc-drop-year { font-size:11px;color:var(--muted); }
.bdtc-drop-label { padding:6px 12px 4px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border); }

.bdtc-vs { display:flex;align-items:center;justify-content:center;padding-bottom:4px; }
.bdtc-vs span { font-family:Georgia,'Times New Roman',serif;font-size:18px;font-weight:800;color:var(--accent2);border:2px solid var(--accent2);border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center; }

.bdtc-btn { display:block;width:100%;padding:13px;margin-top:8px;background:#57b54d;color:#fff;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:15px;border:none;border-radius:var(--radius);cursor:pointer;transition:opacity .15s,transform .15s; }
.bdtc-btn:hover { opacity:.88;transform:translateY(-1px); }
.bdtc-btn:disabled { opacity:.4;cursor:not-allowed;transform:none; }

.bdtc-loading { text-align:center;padding:36px;color:var(--muted);display:none; }
.bdtc-spinner { width:34px;height:34px;margin:0 auto 10px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:bdtcspin .7s linear infinite; }
@keyframes bdtcspin { to { transform:rotate(360deg); } }

.bdtc-error { background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.2);border-radius:var(--radius);padding:14px 18px;color:#dc2626;font-size:13px;margin-top:12px;display:none;text-align:center; }
.bdtc-risultati { display:none;margin-top:28px; }
.bdtc-cards { display:none !important; }
.bdtc-nota { text-align:center;font-size:11px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--border); }

/* TABLE */
.bdtc-table-scroll { display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:18px;margin-bottom:20px; }
.bdtc-table { width:100%;border-collapse:collapse;min-width:480px; }
.bdtc-th-label { width:120px;min-width:120px;position:sticky;left:0;background:var(--bg);z-index:3;border-bottom:2px solid var(--border);padding:12px 10px;vertical-align:top; }
.bdtc-th-phone { text-align:left;padding:14px 12px;border-bottom:2px solid var(--border);border-left:1px solid var(--border);background:linear-gradient(160deg,var(--accent-dim) 0%,transparent 100%);vertical-align:top;width:56%; }
.bdtc-th-phone:last-child { background:linear-gradient(160deg,rgba(0,175,187,0.08) 0%,transparent 100%); }
.bdtc-th-inner { align-items:flex-start;gap:12px; }
.bdtc-th-img { width:80px;height:110px;object-fit:contain;flex-shrink:0; }
.bdtc-th-info { flex:1;min-width:0; }
.bdtc-th-brand { font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px; }
.bdtc-th-name { font-family:Georgia,'Times New Roman',serif;font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3; }
.bdtc-shop-btns { display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px; }
.bdtc-shop-btns a { display:block; }

.bdtc-section { background:#57b54d;color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:12px;font-weight:700;text-transform:uppercase;padding:6px 10px;position:sticky;left:0;z-index:2;white-space:nowrap; }
.bdtc-label-cell { position:sticky;left:0;background:var(--bg);z-index:1;padding:8px 10px;font-size:11px;font-weight:700;color:var(--text-label);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);min-width:120px;max-width:120px;width:120px;line-height:1.3;word-break:break-word; }
.bdtc-val-cell { padding:8px 12px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);border-left:1px solid var(--border);vertical-align:middle;line-height:1.45; }
.bdtc-miss { color:var(--muted); }

/* SINGLE */
.bdtc-single-wrap { border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:20px; }
.bdtc-single-header { display:flex;align-items:flex-start;gap:16px;padding:20px 16px;border-bottom:1px solid var(--border);background:linear-gradient(160deg,var(--accent-dim) 0%,transparent 100%); }
.bdtc-single-img { width:100px;height:136px;object-fit:contain;flex-shrink:0; }
.bdtc-single-info { flex:1; }
.bdtc-single-brand { font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px; }
.bdtc-single-name { font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:700;color:var(--text);margin-bottom:10px; }

/* SCORES */
.bdtc-scores { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px; }
.bdtc-scores h4 { font-family:Georgia,'Times New Roman',serif;font-size:15px;font-weight:800;margin-bottom:16px;color:var(--text); }
.bdtc-score-row { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.bdtc-score-label { font-size:12px;font-weight:600;color:var(--text);width:140px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bdtc-score-track { flex:1;height:10px;background:var(--bg-input);border-radius:99px;overflow:hidden; }
.bdtc-score-fill { height:100%;border-radius:99px;width:0;transition:width 1s cubic-bezier(.4,0,.2,1); }
.bdtc-p1 { background:var(--accent); }
.bdtc-p2 { background:#00afbb;transition-delay:.15s; }
.bdtc-score-val { font-size:11px;color:var(--muted);width:80px;text-align:right; }

/* AI BOX */
.bdtc-ai-box { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-top:16px; }
.bdtc-ai-box h4 { font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:800;margin-bottom:12px;color:var(--text);display:flex;align-items:center;gap:8px; }
.bdtc-ai-text { font-size:16px;line-height:1.8;color:var(--text); }
.bdtc-ai-text p { margin-bottom:10px; }
.bdtc-ai-text strong { color:var(--accent); }

/* BRAND CAROUSEL */
.bdtc-brand-carousel { margin-top:16px;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius); }
.bdtc-brand-carousel h5 { font-family:Georgia,'Times New Roman',serif;font-size:12px;font-weight:700;color:var(--text);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px; }
.bdtc-brand-scroll { display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px; }
.bdtc-brand-scroll::-webkit-scrollbar { height: 4px; }
.bdtc-brand-scroll::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
.bdtc-brand-scroll::-webkit-scrollbar-thumb { background: var(--accent, #003483); border-radius: 4px; }
.bdtc-brand-card { flex:0 0 110px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:transform .15s,border-color .15s;text-align:center; }
.bdtc-brand-card:hover { transform:translateY(-2px);border-color:var(--accent); }
.bdtc-brand-card img { width:80px;height:110px;object-fit:contain;border-radius:5px; }
.bdtc-bc-name { font-size:17px;font-weight:600;color:var(--text);line-height:1.3;word-break:break-word; }
.bdtc-bc-year { font-size:17px;color:var(--muted); }

/* LIGHTBOX */
.bdtc-lightbox { display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.85);align-items:center;justify-content:center;cursor:zoom-out; }
.bdtc-lightbox.open { display:flex; }
.bdtc-lightbox img { max-width:90vw;max-height:90vh;object-fit:contain;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.5); }
.bdtc-lb-close { position:fixed;top:16px;right:20px;color:#fff;font-size:32px;cursor:pointer;z-index:100000; }

/* QUICK SPECS (rete + RAM + storage) */
.bdtc-quick-specs { display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 0 10px; }
.bdtc-net-logo { height:26px;width:auto;object-fit:contain;flex-shrink:0; }
.bdtc-net-badge { display:inline-block;font-size:11px;font-weight:800;padding:3px 8px;border-radius:5px;letter-spacing:.5px;line-height:1.4; }
.bdtc-net-5g { background:#1a3c8f;color:#fff; }
.bdtc-net-4g { background:#0077c8;color:#fff; }
.bdtc-qs-chip { display:inline-block;font-size:12px;font-weight:700;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:3px 9px;line-height:1.4;white-space:nowrap; }
.bdtc-qs-ram { background:rgba(0,52,131,0.07);border-color:rgba(0,52,131,0.2);color:var(--accent); }
.bdtc-qs-storage { background:rgba(87,181,77,0.08);border-color:rgba(87,181,77,0.3);color:#3a7a32; }
.custom-dark .bdtc-qs-ram { background:rgba(0,242,246,0.1);border-color:rgba(0,242,246,0.25);color:var(--accent); }
.custom-dark .bdtc-qs-storage { background:rgba(87,181,77,0.12);border-color:rgba(87,181,77,0.3);color:#7ecf78; }

/* RESPONSIVE */
@media(min-width:621px){
    .bdtc-th-label { width:180px;min-width:180px; }
    .bdtc-label-cell { width:180px;min-width:180px;max-width:180px;font-size:12px; }
    .bdtc-val-cell { font-size:14px;padding:10px 16px; }
    .bdtc-th-img { width:90px;height:120px;cursor:zoom-in;transition:transform .15s; }
    .bdtc-th-img:hover { transform:scale(1.04); }
    .bdtc-th-name { font-size:15px; }
    .bdtc-net-logo { height:28px; }
    .bdtc-qs-chip { font-size:13px; }
}
@media(max-width:620px){
    .bdtc-wrap { padding:14px 6px 26px; }
    .bdtc-selectors { grid-template-columns:1fr;gap:10px; }
    .bdtc-vs { display:none; }
    .bdtc-title { font-size:20px; }
    .bdtc-th-label { width:90px;min-width:90px; }
    .bdtc-label-cell { width:90px;min-width:90px;max-width:90px; }
    .bdtc-th-img { width:100px;height:120px; }
    .bdtc-single-header { flex-direction:column;align-items:center;text-align:center; }
    .bdtc-shop-btns { justify-content:center; }
    .bdtc-quick-specs { justify-content:center; }
    .bdtc-net-logo { height:22px; }
    .bdtc-qs-chip { font-size:11px;padding:3px 7px; }
    .bdtc-net-badge { font-size:10px; }
}

/* ─── PRODOTTI RECENTI ────────────────────────────────────────────────────── */
.bdtc-recenti-wrap {
    width: 100%;
    margin: 16px 0;
}
.bdtc-recenti-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: stretch; /* equal height */
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.bdtc-recenti-scroll::-webkit-scrollbar { height: 4px; }
.bdtc-recenti-scroll::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
.bdtc-recenti-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

.bdtc-recenti-card {
    flex: 0 0 150px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: box-shadow .2s;
}
.bdtc-recenti-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

.bdtc-recenti-img {
    width: 90px;
    height: 110px;
    object-fit: contain;
    flex-shrink: 0;
}
.bdtc-recenti-noimg {
    width: 90px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

.bdtc-recenti-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    text-align: center;
    flex: 1; /* spinge i bottoni in fondo — equal height */
}
.bdtc-recenti-year {
    font-size: 12px;
    color: #888;
}
.bdtc-recenti-btns {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-top: auto; /* sempre in fondo alla card */
}
.bdtc-btn-amazon, .bdtc-btn-ebay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    gap: 4px;
}
.bdtc-btn-amazon { background: transparent; border: 1px solid #ddd; color: #000; }
.bdtc-btn-amazon:hover { background: #f9f9f9; }
.bdtc-btn-ebay   { background: transparent; border: 1px solid #ddd; color: #000; }
.bdtc-btn-ebay:hover { background: #f9f9f9; }

@media (max-width: 620px) {
    .bdtc-recenti-card { flex: 0 0 150px; }
    .bdtc-recenti-img  { width: 90px; height: 110px; }
    .bdtc-recenti-name { font-size: 17px; }
}

/* ─── CONFRONTI CORRELATI ────────────────────────────────────────────────── */
.bdtc-correlati-wrap {
    margin: 24px 0;
}
.bdtc-correlati-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text, #111318);
    margin-bottom: 14px;
}

/* ── Layout: scroll orizzontale ── */
.bdtc-correlati-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: stretch;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.bdtc-correlati-scroll::-webkit-scrollbar { height: 4px; }
.bdtc-correlati-scroll::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
.bdtc-correlati-scroll::-webkit-scrollbar-thumb { background: var(--accent, #003483); border-radius: 4px; }

/* ── Layout: griglia ── */
.bdtc-correlati-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

/* ── Layout: lista verticale ── */
.bdtc-correlati-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bdtc-correlati-lista .bdtc-correlati-card {
    flex-direction: row;
    align-items: center;
}
.bdtc-correlati-lista .bdtc-correlati-img {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
}
.bdtc-correlati-lista .bdtc-correlati-info {
    flex: 1;
    padding: 0 0 0 10px;
}

/* ── Card ── */
.bdtc-correlati-card {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e4ea);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s, transform .15s;
    color: inherit;
}
.bdtc-correlati-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transform: translateY(-2px);
    text-decoration: none;
}

.bdtc-correlati-img {
    width: 100%;
    height: 110px;
    background-size: cover;
    background-position: center;
    background-color: #f0f1f4;
}
.bdtc-correlati-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.bdtc-correlati-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.bdtc-correlati-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #111318);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bdtc-correlati-views {
    font-size: 11px;
    color: #888;
    margin-top: auto;
}

@media (max-width: 620px) {
    .bdtc-correlati-scroll .bdtc-correlati-card { flex: 0 0 140px; }
    .bdtc-correlati-griglia { grid-template-columns: repeat(2, 1fr); }
    .bdtc-correlati-title { font-size: 18px; }
}