:root{
  --accent:#FFD60A;        /* زرد فلت */
  --accent-2:#FFC300;      /* هاور */
  --bg:#f8f8f8;
  --card:#ffffff;
  --ink:#222;
  --muted:#666;
  --ring: rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IranSansX',sans-serif;
  line-height:1.9;
}

/* Header */
.site-header{
  background:var(--accent);
  box-shadow:0 6px 24px var(--ring);
}
.header-inner{
  padding:2rem 1rem;
  text-align:center;
}
.site-header h1{ margin:0 0 .5rem; }
.site-header p{ margin:0; color:#111; }

/* Layout */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 1rem;
}
.grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap:1.25rem;
  margin:1.5rem auto 2.5rem;
}
.grid-left, .grid-right{ display:flex; flex-direction:column; gap:1.25rem; }

.card{
  background:var(--card);
  border-radius:16px;
  padding:1.25rem;
  box-shadow:0 4px 14px var(--ring);
  border:1px solid #eee;
}
.card h2{
  margin:.25rem 0 1rem;
  font-size:1.1rem;
}
.hint{ color:var(--muted); font-size:.9rem; }

/* Inputs */
select, input[type="number"]{
  width:100%;
  margin-top:.35rem;
  padding:.65rem .75rem;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  font-size:1rem;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
select:focus, input[type="number"]:focus{
  border-color:#bbb;
  box-shadow:0 0 0 4px rgba(255,214,10,.2);
}

label{ display:block; cursor:pointer; }
.inline{ display:flex; gap:1rem; margin-top:.75rem; flex-wrap:wrap; }
.inline-item{ display:flex; gap:.5rem; align-items:center; }

.options-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.5rem .75rem;
  margin-top:.5rem;
}
.two-col{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
}
.block{ display:block; margin-bottom:.35rem; }

.support-group{ display:flex; flex-direction:column; gap:.75rem; }
.radio{ display:flex; align-items:center; gap:.5rem; }

.monthly{
  margin:.25rem 0 .25rem 0;
  padding:.75rem;
  background:#fffdf2;
  border:1px dashed var(--accent);
  border-radius:12px;
}
.hidden{ display:none; }

/* CTA */
.cta{
  width:100%;
  padding:1rem;
  font-size:1.1rem;
  border:none;
  border-radius:14px;
  background:var(--accent);
  cursor:pointer;
  transition: transform .08s ease, background .2s ease;
  font-weight:700;
}
.cta:hover{ background:var(--accent-2); }
.cta:active{ transform: translateY(1px); }

/* Result box */
.result-box h2{ margin:.25rem 0 .75rem; }
.total{
  font-size:1.8rem;
  font-weight:800;
  margin:.25rem 0 .75rem;
}
.divider{
  height:1px; background:#eee; margin:1rem 0;
}
.breakdown{
  list-style:none;
  padding:0; margin:0;
}
.breakdown li{
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem .5rem;
  border-bottom:1px dashed #eee;
}
.breakdown li:last-child{ border-bottom:none; }

.site-footer{
  background:#fafafa;
  border-top:1px solid #eee;
  text-align:center;
  padding:1rem;
  color:var(--muted);
}

/* Responsive */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .grid-right{ order:-1; }
  .two-col, .options-grid{ grid-template-columns:1fr; }
}