:root{
  --ink:#15171a;
  --ink-soft:#2b2e33;
  --red:#FF0000;
  --red-deep:#c40000;
  --red-dark:#7a0000;
  --bg:#f2f3f5;
  --card:#ffffff;
  --line:#e6e8eb;
  --text:#1c1d20;
  --muted:#767b83;
  --amber-bg:#fff6e5;
  --amber-border:#f0a83d;
}
.soa-page, .soa-page *{box-sizing:border-box; margin:0; padding:0;}
.soa-page, .soa-page *{font-family:'Vazirmatn',Tahoma,sans-serif;}
.soa-page{
  background:
    linear-gradient(180deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.4) 45%, rgba(50,4,4,.64) 100%),
    url('../images/background-banner.jpg') center 32%/cover no-repeat;
  background-color:#0d0d0f;
  color:var(--text);
  min-height:100vh;
  padding:28px 16px 50px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ===== container ===== */
.soa-wrap{width:100%; max-width:740px;}

.soa-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 25px 60px rgba(0,0,0,.45), 0 2px 12px rgba(0,0,0,.2);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}

.soa-card-head{
  background:linear-gradient(120deg, rgba(21,23,26,.86) 0%, rgba(122,0,0,.82) 60%, rgba(255,0,0,.78) 140%);
  padding:26px 22px 22px;
  color:#fff;
}
.soa-head-brand{display:flex; flex-direction:column; align-items:center; gap:14px;}
.soa-head-logo-wrap{
  width:210px; max-width:68%; aspect-ratio:731/164; height:auto; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.soa-head-logo-wrap img{width:100%; height:100%; display:block; object-fit:contain;}
.soa-head-text{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; text-align:center;
}
.soa-head-text h1{font-size:15px; font-weight:800; line-height:1.4; white-space:nowrap; color:#fff !important;}
.soa-head-text .soa-sep{opacity:.55; font-weight:400; color:#fff !important;}
.soa-head-text p{font-size:12px; color:rgba(255,255,255,.85) !important; font-weight:500; line-height:1.4;}

.soa-card-body{
  padding:22px 26px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.58));
}

/* ===== combobox ===== */
.soa-field{margin-bottom:18px; position:relative;}
.soa-field label{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:9px;
}
.soa-field label .num{
  width:20px; height:20px; border-radius:50%; background:var(--ink);
  color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:800;
}
.soa-combo{position:relative;}
.soa-combo-input-box{
  display:flex; align-items:center; gap:8px;
  border:1.6px solid var(--line) !important; border-radius:12px; background:#fbfcfe;
  padding:0 14px; transition:.2s; box-shadow:none !important;
}
.soa-combo-input-box.disabled{opacity:.55; pointer-events:none; background:#f1f3f6;}
.soa-combo-input-box:focus-within{border-color:var(--red) !important; box-shadow:0 0 0 4px rgba(255,0,0,.10) !important; background:#fff;}
.soa-combo-input-box svg.soa-search-ic{width:16px; height:16px; color:var(--muted); flex-shrink:0;}
.soa-combo-input-box input{
  border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; flex:1; padding:13px 2px;
  font-family:inherit; font-size:14.5px; color:var(--text) !important;
}
.soa-combo-input-box input::placeholder{color:#a7b3c0;}
.soa-combo-clear{
  width:20px; height:20px; border-radius:50%; background:#e9edf2; color:#8494a4;
  display:none; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:13px;
}
.soa-combo-clear.show{display:flex;}
.soa-combo-chevron{width:14px; height:14px; color:var(--muted); flex-shrink:0; transition:transform .2s;}
.soa-combo.open .soa-combo-chevron{transform:rotate(180deg);}

.soa-combo-list{
  position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:30;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 32px rgba(16,17,20,.14);
  max-height:230px; overflow-y:auto; padding:6px;
  display:none;
}
.soa-combo.open .soa-combo-list{display:block;}
.soa-combo-opt{
  padding:10px 12px; border-radius:8px; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.soa-combo-opt:hover, .soa-combo-opt.active{background:#fdeceb; color:var(--red-deep);}
.soa-combo-opt .soa-tag{font-size:11px; color:var(--muted);}
.soa-combo-empty{padding:14px 10px; text-align:center; color:var(--muted); font-size:13px;}

.soa-field-hint{font-size:11.5px; color:var(--muted); margin-top:6px; padding-right:2px;}

/* ===== confirm btn ===== */
.soa-confirm-btn{
  width:100%; border:0 !important; border-radius:13px; padding:15px;
  background:linear-gradient(135deg,#c7cfd8,#b7c0cb);
  color:#fff !important; font-family:inherit; font-size:15.5px; font-weight:800;
  cursor:not-allowed; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:.25s;
}
.soa-confirm-btn.ready{
  background:linear-gradient(135deg,var(--red),var(--red-deep));
  cursor:pointer; box-shadow:0 12px 24px rgba(255,0,0,.28);
}
.soa-confirm-btn.ready:hover{transform:translateY(-1px); box-shadow:0 16px 28px rgba(255,0,0,.36);}
.soa-confirm-btn .soa-btn-txt{color:inherit !important;}
.soa-confirm-btn svg{width:18px; height:18px; color:#fff !important; stroke:#fff !important;}

.soa-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.5); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.soa-confirm-btn.loading .soa-spinner{display:inline-block;}
.soa-confirm-btn.loading .soa-btn-txt{display:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== result ===== */
.soa-result{
  margin-top:8px; border-top:1px dashed var(--line); padding-top:22px;
  display:none;
  animation:fadeUp .45s ease;
}
.soa-result.show{display:block;}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

.soa-car-summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#f6f7f9; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-bottom:16px; flex-wrap:wrap;
}
.soa-car-summary .soa-who{display:flex; align-items:center; gap:10px;}
.soa-car-summary .soa-car-ic{
  width:38px; height:38px; border-radius:10px; background:var(--ink); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.soa-car-summary .soa-car-ic svg{width:20px; height:20px; color:#fff;}
.soa-car-summary .soa-who b{font-size:15px; color:var(--ink);}
.soa-car-summary .soa-who span{display:block; font-size:12px; color:var(--muted); margin-top:2px;}
.soa-reset-link{
  font-size:12.5px; color:var(--red); font-weight:700; cursor:pointer; background:none; border:0; font-family:inherit;
  display:flex; align-items:center; gap:4px;
}

.soa-engine-line{
  font-size:13px; color:var(--muted); background:#f7f2f1; border-radius:10px;
  padding:10px 14px; margin-bottom:16px; display:flex; gap:8px; align-items:center;
}
.soa-engine-line b{color:var(--ink);}

.soa-note-box{
  background:var(--amber-bg); border-right:4px solid var(--amber-border);
  border-radius:10px; padding:14px 16px; margin-bottom:20px;
  display:flex; gap:10px; align-items:flex-start;
}
.soa-note-box svg{width:18px; height:18px; color:var(--amber-border); flex-shrink:0; margin-top:2px;}
.soa-note-box .soa-note-title{font-size:12px; font-weight:800; color:#8a5a10; margin-bottom:3px;}
.soa-note-box .soa-note-desc{font-size:13px; color:#6b4c1e; line-height:1.9;}

.soa-prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){.soa-prod-grid{grid-template-columns:1fr;}}

.soa-prod-card{
  border:1.5px solid var(--line); border-radius:16px; padding:18px 16px;
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px;
  background:#fff; min-height:236px;
}
.soa-prod-card.primary{
  border-color:rgba(255,0,0,.32);
  animation:glowPulse 2.6s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 10px 24px -6px rgba(255,0,0,.28), 0 2px 8px rgba(255,0,0,.12);}
  50%{box-shadow:0 16px 34px -4px rgba(255,0,0,.42), 0 4px 14px rgba(255,0,0,.22);}
}

.soa-rank{
  position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:800;
  padding:4px 10px; border-radius:20px;
}
.soa-rank.primary-rank{background:linear-gradient(120deg,var(--red),var(--red-deep)); color:#fff; box-shadow:0 4px 10px rgba(255,0,0,.35);}
.soa-rank.alt-rank{background:#eef0f2; color:var(--muted);}

.soa-prod-ic{
  width:72px; height:116px; border-radius:12px; overflow:hidden; align-self:flex-start; flex-shrink:0;
  background:linear-gradient(140deg,#2a0e0c,#150605);
  box-shadow:0 8px 16px rgba(0,0,0,.24);
}
.soa-prod-ic img{width:100%; height:100%; object-fit:cover; display:block;}

.soa-prod-name{font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.6;}
.soa-prod-grade{font-weight:600; color:var(--muted); font-size:12px;}

.soa-buy-btn{
  margin-top:auto; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:7px;
  border-radius:10px; padding:11px; font-size:13px; font-weight:800; color:#fff;
  background:var(--ink); transition:.2s;
}
.soa-buy-btn:hover{background:var(--red-deep);}
.soa-buy-btn svg{width:15px; height:15px;}

.soa-prod-card.soa-no-need{align-items:center; justify-content:center; text-align:center; gap:12px;}
.soa-no-need-icon{
  width:46px; height:46px; border-radius:50%; background:#eefaf3;
  display:flex; align-items:center; justify-content:center; color:#1fab6b; flex-shrink:0;
}
.soa-no-need-icon svg{width:24px; height:24px;}
.soa-prod-card.soa-no-need p{font-size:12.5px; color:var(--muted); line-height:1.9; max-width:210px;}

.soa-footer-note{
  text-align:center; margin-top:20px; font-size:11.5px;
  color:rgba(255,255,255,.85); text-shadow:0 1px 4px rgba(0,0,0,.6); line-height:2;
}

/* ===== responsive (mobile) ===== */
@media (max-width:480px){
  .soa-page{padding:14px 10px 34px;}
  .soa-card{border-radius:16px;}
  .soa-card-head{padding:20px 14px 16px;}
  .soa-head-logo-wrap{width:158px; max-width:74%;}
  .soa-head-text{gap:6px;}
  .soa-head-text h1{font-size:13.5px; white-space:normal;}
  .soa-head-text p{font-size:11px;}
  .soa-card-body{padding:16px 14px 18px;}
  .soa-field{margin-bottom:14px;}
  .soa-field label{font-size:13px; margin-bottom:7px;}
  .soa-combo-input-box input{padding:12px 2px; font-size:14px;}
  .soa-confirm-btn{padding:13px; font-size:14px; border-radius:12px;}
  .soa-car-summary{padding:12px 13px; margin-bottom:13px;}
  .soa-car-summary .soa-who b{font-size:14px;}
  .soa-engine-line{font-size:12px; padding:9px 12px; margin-bottom:13px;}
  .soa-note-box{padding:12px 13px; margin-bottom:16px;}
  .soa-prod-grid{gap:11px;}
  .soa-prod-card{padding:15px 13px; min-height:auto; gap:8px; border-radius:14px;}
  .soa-prod-ic{width:58px; height:94px; border-radius:10px;}
  .soa-prod-name{font-size:13.5px;}
  .soa-rank{font-size:9.5px; padding:3px 8px; top:10px; left:10px;}
  .soa-buy-btn{padding:10px; font-size:12.5px;}
  .soa-footer-note{font-size:10.5px; margin-top:16px;}
}
@media (max-width:360px){
  .soa-head-logo-wrap{width:128px;}
  .soa-head-text h1{font-size:12.5px;}
  .soa-head-text p{font-size:10.5px;}
}