/* ── Info Bar ────────────────────────────────────────────────────────────── */
.info-bar{background:#0f172a;color:rgba(255,255,255,.8);font-size:12px;padding:7px 20px;position:relative;z-index:200}
.info-bar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.info-email{color:#93c5fd;text-decoration:none;font-weight:600;white-space:nowrap;flex-shrink:0}
.info-email:hover{color:#bfdbfe;text-decoration:underline}
.info-divider{opacity:.3;flex-shrink:0}
.info-help{color:#fde68a;font-style:italic;flex-shrink:0}
.info-disclaimer{flex:1;opacity:.7;min-width:200px}
.info-close{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:14px;padding:2px 6px;line-height:1;flex-shrink:0;transition:color .15s}
.info-close:hover{color:#fff}

/* ── Before-You-Buy Banner ───────────────────────────────────────────────── */
.before-buy-banner{background:linear-gradient(90deg,#fbbf24 0%,#f59e0b 100%);color:#1e293b;padding:14px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.bbb-icon{font-size:22px;flex-shrink:0}
.bbb-text{font-size:15px;text-align:center}
.bbb-text strong{font-size:16px}
.bbb-arrow{font-size:13px;font-weight:700;background:rgba(0,0,0,.12);padding:4px 12px;border-radius:100px;white-space:nowrap;flex-shrink:0}

/* ── Reset & Variables ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1e3a8a;--primary-dark:#132763;--accent:#e63946;
  --success:#16a34a;--win-bg:#dcfce7;--win-border:#86efac;
  --bg:#f1f5f9;--card:#fff;--text:#1e293b;--muted:#64748b;
  --border:#e2e8f0;--shadow:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);--radius:12px;--radius-sm:8px;
}
body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5}

/* ── Header ─────────────────────────────────────────────────────────────── */
header{background:var(--primary);color:#fff;padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo-icon{font-size:28px}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text span:first-child{font-size:20px;font-weight:800;letter-spacing:-.5px}
.logo-text span:first-child em{color:var(--accent);font-style:normal}
.logo-text span:last-child{font-size:11px;opacity:.7}
.header-right{display:flex;align-items:center;gap:14px}
.header-count{font-size:12px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:3px 10px;display:none}
@media(min-width:520px){.header-count{display:block}}
.lang-switch{display:flex;gap:4px}
.lang-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);padding:5px 10px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s;white-space:nowrap}
.lang-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.lang-btn.active{background:rgba(255,255,255,.25);color:#fff;border-color:rgba(255,255,255,.5);font-weight:700}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,#2563eb 100%);color:#fff;padding:44px 24px 36px;text-align:center}
.hero h1{font-size:clamp(22px,5vw,40px);font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.hero h1 em{color:#fbbf24;font-style:normal}
.hero p{font-size:clamp(14px,2vw,17px);opacity:.85;max-width:520px;margin:0 auto 18px}
.brand-flags{display:flex;justify-content:center;gap:10px;font-size:26px;margin-top:14px}
.brand-flags span{transition:transform .2s;cursor:default}
.brand-flags span:hover{transform:scale(1.3)}

/* ── Main ───────────────────────────────────────────────────────────────── */
main{max-width:1100px;margin:0 auto;padding:32px 20px 60px}

/* ── Section Title ──────────────────────────────────────────────────────── */
.section-title{font-size:18px;font-weight:700;color:var(--primary);margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--border)}

/* ── Selector Section ───────────────────────────────────────────────────── */
.selector-section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:28px;margin-bottom:28px}
.selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.drop-group{display:flex;flex-direction:column;gap:6px}
.drop-group label{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.drop-group select{padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:15px;background:#fff;cursor:pointer;outline:none;color:var(--text);transition:border-color .2s;appearance:auto}
.drop-group select:focus{border-color:var(--primary)}
.drop-group select:disabled{background:#f8fafc;color:var(--muted);cursor:not-allowed}

/* ── Preview Card ───────────────────────────────────────────────────────── */
.preview-card{display:flex;gap:0;background:var(--bg);border-radius:var(--radius);overflow:hidden;border:2px solid var(--primary);margin-bottom:20px;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.preview-badge{width:100px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.preview-origin{position:absolute;top:6px;left:8px;font-size:16px}
.preview-fuel{position:absolute;bottom:6px;right:8px;font-size:18px}
.preview-initials{font-size:36px;font-weight:900;color:rgba(255,255,255,.9);letter-spacing:-2px;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.preview-info{padding:16px;flex:1}
.preview-title{font-size:16px;color:var(--text)}
.preview-sub{font-size:13px;color:var(--muted);margin:2px 0 4px}
.preview-price{font-size:18px;font-weight:700;color:var(--primary);margin-bottom:10px}
.preview-specs{display:flex;gap:8px;flex-wrap:wrap}
.ps-item{background:#fff;border-radius:6px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;min-width:52px;border:1px solid var(--border)}
.ps-item span{font-weight:700;font-size:14px}
.ps-item small{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap}
.no-specs-note{margin-top:8px;font-size:12px;color:#d97706;background:#fef3c7;padding:4px 10px;border-radius:6px;display:inline-block}

/* ── Add Button ─────────────────────────────────────────────────────────── */
.btn-add{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.3px}
.btn-add:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}
.btn-add:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ── Slots Section ──────────────────────────────────────────────────────── */
.slots-section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:28px}
.slots-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
@media(max-width:640px){.slots-row{grid-template-columns:1fr}}

/* ── Slot Card ──────────────────────────────────────────────────────────── */
.slot-card{border-radius:var(--radius);overflow:hidden;border:2px solid var(--border);transition:border-color .2s}
.slot-card.filled{border-color:var(--primary)}
.slot-card.empty{border-style:dashed;background:var(--bg)}
.slot-header{height:90px;display:flex;align-items:center;justify-content:center;position:relative}
.slot-origin{position:absolute;top:6px;left:8px;font-size:14px}
.slot-fuel{position:absolute;bottom:6px;right:8px;font-size:16px}
.slot-initials{font-size:32px;font-weight:900;color:rgba(255,255,255,.9);letter-spacing:-2px;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.slot-remove{position:absolute;top:6px;right:8px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1}
.slot-remove:hover{background:var(--accent)}
.slot-body{padding:14px}
.slot-name{font-size:12px;color:var(--muted)}
.slot-model{font-size:15px;margin:2px 0}
.slot-price{font-size:14px;font-weight:700;color:var(--primary);margin:4px 0}
.slot-no-specs{font-size:11px;color:#d97706;background:#fef3c7;padding:2px 8px;border-radius:4px;margin:4px 0;display:inline-block}
.slot-quick{display:flex;gap:12px;font-size:13px;color:var(--muted);margin-top:6px}
.slot-quick span::before{color:var(--primary);font-weight:600}
.slot-empty-inner{padding:30px 16px;text-align:center}
.slot-num{width:40px;height:40px;border-radius:50%;background:var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin:0 auto 10px}
.slot-empty-lbl{font-size:13px;color:var(--muted)}

/* ── Compare Big Button ──────────────────────────────────────────────────── */
.compare-action{text-align:center}
.btn-compare-big{background:var(--accent);color:#fff;border:none;padding:14px 40px;border-radius:var(--radius-sm);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.3px}
.btn-compare-big:hover:not(:disabled){background:#c1121f;transform:translateY(-2px);box-shadow:0 6px 20px rgba(230,57,70,.4)}
.btn-compare-big:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ── Comparison View ─────────────────────────────────────────────────────── */
.compare-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.compare-header h2{font-size:22px;font-weight:800;color:var(--primary)}
.compare-header-actions{display:flex;gap:10px}
.btn-back{background:var(--primary);color:#fff;border:none;padding:10px 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-back:hover{background:var(--primary-dark)}
.btn-print{background:#fff;color:var(--text);border:1.5px solid var(--border);padding:10px 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-print:hover{border-color:var(--primary);color:var(--primary)}
.win-legend{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:10px 16px;background:var(--win-bg);border-radius:var(--radius-sm);border:1px solid var(--win-border)}
.win-badge{background:var(--win-bg);border:1px solid var(--win-border);color:var(--success);padding:2px 8px;border-radius:4px;font-weight:700;font-size:12px;white-space:nowrap}

/* ── Comparison Table ────────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow-lg);background:var(--card)}
#comparisonTable table{width:100%;border-collapse:collapse;font-size:14px}
#comparisonTable thead th{background:var(--primary);color:#fff;padding:18px 14px;text-align:center;vertical-align:middle}
#comparisonTable thead th.spec-col{text-align:left;background:var(--primary-dark);min-width:150px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.7)}
.th-origin{font-size:16px;margin-bottom:2px}
.th-badge{width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff;margin:0 auto 6px}
.th-name{font-size:11px;opacity:.75}
.th-model{font-size:15px;font-weight:700}
.th-price{font-size:14px;color:#fbbf24;font-weight:700;margin-top:2px}
#comparisonTable tbody tr{border-bottom:1px solid var(--border)}
#comparisonTable tbody tr:last-child{border-bottom:none}
#comparisonTable tbody tr:hover td:not(.row-label){background:#f8faff}
#comparisonTable tbody td{padding:12px 14px;text-align:center;vertical-align:top}
#comparisonTable tbody td.row-label{text-align:left;font-weight:600;color:var(--muted);font-size:13px;background:#fafafa;min-width:150px;white-space:nowrap}
#comparisonTable tbody tr.section-header td{background:linear-gradient(90deg,var(--primary) 0%,#2563eb 100%);color:#fff;font-weight:700;font-size:13px;text-align:left;padding:9px 14px}
#comparisonTable tbody td.win{background:var(--win-bg);color:var(--success);font-weight:700;position:relative}
#comparisonTable tbody td.win::after{content:"✓";position:absolute;top:5px;right:7px;font-size:10px;opacity:.7}
.feat-list,.pros-list,.cons-list{list-style:none;text-align:left;display:flex;flex-direction:column;gap:3px}
.feat-list li::before{content:"• ";color:var(--primary)}
.pros-list li::before{content:"✓ ";color:var(--success)}
.cons-list li::before{content:"✗ ";color:var(--accent)}
.feat-list li,.pros-list li,.cons-list li{font-size:13px;line-height:1.4}
.stars{color:#f59e0b;letter-spacing:1px}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer{background:var(--primary-dark);color:rgba(255,255,255,.6);text-align:center;padding:22px;font-size:13px;margin-top:40px}
footer strong{color:#fff}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print{
  header,footer,.selector-section,.slots-section{display:none!important}
  .table-scroll{box-shadow:none}
  #compareView{display:block!important}
  body{background:#fff}
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:600px){
  main{padding:16px 14px 40px}
  .selector-section,.slots-section{padding:18px 14px}
  .selector-grid{grid-template-columns:1fr 1fr}
  #comparisonTable thead th{padding:12px 8px}
  #comparisonTable tbody td{padding:10px 8px;font-size:13px}
  .preview-badge{width:80px}
}