/* ===========================================================
   نورا | استایل‌یابی هوشمند
   پالت رنگی برگرفته از لگو:
   کِرم پس‌زمینه #F7F1E7 | صورتی‌شرابی #D63A6B | آبی #4E8FC4
   زرد آفتابی #F0B429 | صورتی کم‌رنگ #F4C6D2 | آبی روشن #AEDDEA
   =========================================================== */

:root{
  --cream:#F7F1E7;
  --cream-2:#FDFAF4;
  --pink:#D63A6B;
  --pink-deep:#B72A57;
  --blue:#4E8FC4;
  --blue-deep:#356fa0;
  --gold:#F0B429;
  --soft-pink:#F4C6D2;
  --soft-blue:#AEDDEA;
  --ink:#3A2E30;
  --ink-soft:#7c6f70;
  --danger:#d24545;
  --radius-lg:28px;
  --radius-md:18px;
  --shadow:0 12px 30px rgba(80,60,50,0.10);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Vazirmatn', Tahoma, sans-serif;
  min-height:100%;
}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* ---------- تزئینات پس‌زمینه (الهام از لگو) ---------- */
.bg-deco{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.deco{
  position:absolute;
  opacity:.5;
}
.deco-heart{ top:8%; left:6%; color:var(--soft-pink); font-size:34px; transform:rotate(-12deg); }
.deco-star{ top:6%; right:14%; color:var(--gold); font-size:24px; }
.deco-flower{ bottom:10%; right:8%; color:var(--pink); font-size:30px; opacity:.35; }
.deco-plus{ top:20%; left:3%; color:var(--blue); font-size:22px; opacity:.4; }
.deco-dot{ border-radius:50%; }
.deco-dot1{ width:10px; height:10px; background:var(--pink); top:14%; right:8%; }
.deco-dot2{ width:8px; height:8px; background:var(--blue); bottom:22%; left:10%; }
.deco-dot3{ width:12px; height:12px; background:var(--gold); top:40%; right:4%; opacity:.35; }

/* ---------- هدر ---------- */
.site-header{
  position:relative;
  z-index:2;
  padding:18px 20px;
  display:flex;
  justify-content:center;
  border-bottom:1px solid rgba(78,143,196,0.15);
  background:rgba(253,250,244,0.85);
  backdrop-filter:blur(6px);
  position:sticky;
  top:0;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:720px;
  width:100%;
}
.logo{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--blue);
  box-shadow:0 2px 8px rgba(78,143,196,0.25);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-title{ font-weight:800; font-size:20px; color:var(--pink); }
.brand-sub{ font-size:12px; color:var(--ink-soft); }

/* ---------- محتوای اصلی ---------- */
.app-wrap{
  flex:1;
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:36px 16px 60px;
}

.screen{
  width:100%;
  max-width:560px;
  background:var(--cream-2);
  border:1.5px solid rgba(78,143,196,0.35);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:34px 30px;
  animation:fadeUp .35s ease;
  position:relative;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.screen::before{
  content:"";
  position:absolute;
  top:-10px; right:26px;
  width:16px; height:16px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:-26px 6px 0 -4px var(--soft-pink), -50px -2px 0 -6px var(--soft-blue);
  opacity:.85;
}

/* ---------- تایپوگرافی مشترک ---------- */
.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  color:var(--blue-deep);
  background:rgba(78,143,196,0.10);
  padding:4px 12px;
  border-radius:20px;
  margin-bottom:14px;
}
h1.title{
  font-size:26px;
  font-weight:800;
  color:var(--pink-deep);
  margin:0 0 10px;
  line-height:1.5;
}
h2.step-title{
  font-size:21px;
  font-weight:700;
  color:var(--pink-deep);
  margin:0 0 6px;
}
p.desc{
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:2;
  margin:0 0 22px;
}

/* ---------- دکمه‌ها ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  padding:14px 26px;
  border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform:scale(.97); }

.btn-primary{
  background:linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#fff;
  box-shadow:0 8px 18px rgba(214,58,107,0.28);
}
.btn-primary:hover{ box-shadow:0 10px 22px rgba(214,58,107,0.38); }

.btn-outline{
  background:transparent;
  color:var(--blue-deep);
  border:1.6px solid var(--blue);
}
.btn-outline:hover{ background:rgba(78,143,196,0.08); }

.btn-block{ width:100%; }

.btn-row{
  display:flex;
  gap:12px;
  margin-top:26px;
}

/* ---------- گزینه‌های دسته‌بندی (رادیو کارتی) ---------- */
.option-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:8px;
}
.option-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1.6px solid rgba(78,143,196,0.3);
  border-radius:var(--radius-md);
  cursor:pointer;
  background:#fff;
  transition:border-color .15s, background .15s, transform .1s;
  font-size:15px;
  font-weight:500;
}
.option-card:hover{ border-color:var(--blue); }
.option-card input{ display:none; }
.option-card .dot{
  width:20px; height:20px;
  border-radius:50%;
  border:2px solid var(--blue);
  flex-shrink:0;
  position:relative;
}
.option-card input:checked ~ .dot::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--pink);
}
.option-card.selected{
  border-color:var(--pink);
  background:rgba(214,58,107,0.06);
}

/* ---------- گزینه دو حالته (بله/خیر) ---------- */
.choice-row{
  display:flex;
  gap:14px;
  margin-bottom:6px;
}
.choice-btn{
  flex:1;
  padding:18px 12px;
  border-radius:var(--radius-md);
  border:1.6px solid rgba(78,143,196,0.3);
  background:#fff;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  transition:all .15s;
}
.choice-btn:hover{ border-color:var(--blue); }
.choice-btn.selected{
  border-color:var(--pink);
  background:linear-gradient(135deg, rgba(214,58,107,0.10), rgba(214,58,107,0.03));
  color:var(--pink-deep);
}

/* ---------- فیلدهای ورودی ---------- */
.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  color:var(--ink);
}
.field .hint{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:6px;
}
.input-cm{
  position:relative;
}
.input-cm input, select.select-field{
  width:100%;
  padding:13px 44px 13px 14px;
  border-radius:14px;
  border:1.6px solid rgba(78,143,196,0.35);
  font-family:inherit;
  font-size:15px;
  background:#fff;
  color:var(--ink);
  outline:none;
  transition:border-color .15s;
}
select.select-field{ padding:13px 14px; }
.input-cm input:focus, select.select-field:focus{ border-color:var(--pink); }
.input-cm .unit{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color:var(--blue-deep);
  font-weight:600;
  background:rgba(78,143,196,0.1);
  padding:3px 8px;
  border-radius:8px;
}
.input-cm input.error{ border-color:var(--danger); }
.error-msg{
  color:var(--danger);
  font-size:13px;
  margin-top:8px;
  display:none;
  font-weight:600;
}
.error-msg.show{ display:block; }

.success-msg{
  display:none;
  align-items:center;
  gap:8px;
  color:#2f8f5b;
  background:rgba(47,143,91,0.08);
  border:1px solid rgba(47,143,91,0.25);
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  margin-top:6px;
}
.success-msg.show{ display:flex; animation:fadeUp .25s ease; }

/* ---------- نوار پیشرفت ---------- */
.progress-wrap{
  margin-bottom:24px;
}
.progress-bar{
  height:6px;
  border-radius:10px;
  background:rgba(78,143,196,0.15);
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--gold), var(--pink));
  border-radius:10px;
  transition:width .3s ease;
}
.progress-label{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:8px;
  text-align:left;
}

/* ---------- نتیجه ---------- */
.result-size-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg, var(--gold), #e0a51f);
  color:#fff;
  font-weight:800;
  padding:8px 18px;
  border-radius:999px;
  font-size:15px;
  margin-bottom:20px;
}
.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:6px;
}
@media (max-width:420px){
  .product-grid{ grid-template-columns:1fr; }
}
.product-card{
  background:#fff;
  border:1.4px solid rgba(78,143,196,0.25);
  border-radius:18px;
  padding:16px 14px;
  text-align:center;
  transition:transform .15s;
}
.product-card:hover{ transform:translateY(-3px); }
.product-icon{
  width:56px; height:56px;
  margin:0 auto 10px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  background:radial-gradient(circle at 30% 30%, var(--soft-blue), var(--blue));
  color:#fff;
}
.product-name{ font-size:14px; font-weight:700; margin-bottom:4px; }
.product-size{ font-size:12.5px; color:var(--ink-soft); }
.product-size b{ color:var(--pink-deep); }

.empty-note{
  background:rgba(78,143,196,0.08);
  border:1px dashed var(--blue);
  border-radius:14px;
  padding:16px;
  font-size:14px;
  color:var(--ink-soft);
  text-align:center;
}

/* ---------- فوتر ---------- */
.site-footer{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:22px 16px 30px;
  color:var(--ink-soft);
  font-size:12.5px;
  text-align:center;
}
.footer-logo{ width:22px; height:22px; border-radius:50%; object-fit:cover; opacity:.8; }

/* ---------- ریسپانسیو ---------- */
@media (max-width:480px){
  .screen{ padding:26px 20px; border-radius:22px; }
  h1.title{ font-size:22px; }
  .btn-row{ flex-direction:column; }
}

/* دسترسی‌پذیری فوکوس */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .option-card:focus-within{
  outline:2px solid var(--blue-deep);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}