/* =========================================================
   صفحهٔ عضویت در اطلاع‌رسانی

   نسخهٔ قبلی سه جعبهٔ یک‌شکل بود با ورودی‌های خام: کلاس .field
   سایت را اصلاً استفاده نمی‌کرد، پس فیلدهایش با بقیهٔ فرم‌های
   سایت جور درنمی‌آمد. اینجا همان توکن‌های style.css به کار
   می‌روند تا صفحه عضوی از سایت باشد، نه وصله.
   ========================================================= */

.notify-layout{max-width:1060px}

/* ---------- سرفصل بخش ---------- */
.notify-h{
  font-size:clamp(20px,2.4vw,25px);
  color:var(--ink);
  margin:54px 0 22px;
  padding-bottom:11px;
  position:relative;
}
.notify-h:first-of-type{margin-top:8px}
.notify-h::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;
  width:58px;height:3px;border-radius:3px;
  background:linear-gradient(to right,var(--gold-500),var(--bronze));
}
[dir="rtl"] .notify-h::after{background:linear-gradient(to left,var(--gold-500),var(--bronze))}

/* ---------- «چه چیزی دریافت می‌کنید» ---------- */
.notify-topics{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;
}
.notify-topic{
  display:flex;gap:15px;align-items:flex-start;
  padding:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
}
.notify-topic-icon{
  flex:0 0 42px;width:42px;height:42px;
  display:grid;place-items:center;border-radius:12px;
  background:var(--paper-2);color:var(--bronze);
}
.notify-topic-icon svg{width:23px;height:23px}
.notify-topic h3{font-size:17px;margin:0 0 5px}
.notify-topic p{margin:0;color:var(--slate);font-size:14.5px;line-height:1.75}

/* ---------- سه مرحله ---------- */
.notify-steps{
  list-style:none;margin:26px 0 0;padding:20px 22px;
  background:var(--paper-2);border-radius:var(--r);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 26px;
}
.notify-steps li{
  display:flex;align-items:center;gap:12px;
  font-size:14.8px;color:var(--ink);
}
.notify-step-n{
  flex:0 0 30px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--gold-500);color:var(--navy-900);
  font-weight:800;font-size:14px;
}

/* ---------- کارت‌ها ---------- */
.notify-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;
  align-items:start;
}
.notify-card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;
  display:flex;flex-direction:column;
}
.notify-card-wide{margin-bottom:26px}
.notify-channel::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:3px;
  background:linear-gradient(to right,var(--gold-500),var(--bronze));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t);
}
/* transform-origin کلیدواژهٔ منطقی نمی‌پذیرد، پس مثل .card جدا نوشته می‌شود. */
[dir="rtl"] .notify-channel::before{transform-origin:right}
.notify-channel:focus-within::before{transform:scaleX(1)}
.notify-channel:focus-within{border-color:transparent;box-shadow:var(--shadow)}

/* روشی که هنوز روی سرور راه نیفتاده: خاموش دیده می‌شود، نه شکسته. */
.notify-card.is-off{background:var(--paper-2);border-style:dashed}
.notify-card.is-off .notify-head-icon{color:var(--slate);background:#fff}
.notify-off{margin:4px 0 0;color:var(--slate);font-size:14.5px;line-height:1.8}
.notify-off strong{color:var(--ink)}

/* ---------- سرِ کارت ---------- */
.notify-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.notify-head-icon{
  flex:0 0 44px;width:44px;height:44px;
  display:grid;place-items:center;border-radius:13px;
  background:var(--paper-2);color:var(--bronze);
}
.notify-head-icon svg{width:24px;height:24px}
.notify-head h2{font-size:19px;margin:0 0 5px;line-height:1.5}
.notify-head h3{font-size:18px;margin:0 0 5px;line-height:1.5}
.notify-desc{margin:0;color:var(--slate);font-size:14px;line-height:1.7}

/* ---------- موضوع‌ها و رضایت ---------- */
.notify-picks{border:0;padding:0;margin:0 0 6px;min-width:0}
.notify-picks legend{
  font-size:13.5px;font-weight:700;color:var(--slate);
  padding:0;margin-bottom:6px;
}
.notify-choice{
  display:flex;align-items:flex-start;gap:11px;
  min-height:44px;padding:7px 0;cursor:pointer;
  font-size:15px;line-height:1.65;
}
.notify-choice input{
  width:19px;height:19px;flex:0 0 19px;margin-top:4px;
  accent-color:var(--gold-500);cursor:pointer;
}
.notify-choice:hover span{color:var(--bronze)}
.notify-consent{
  margin-top:12px;padding:12px 14px;
  background:var(--paper-2);border-radius:var(--r-sm);
  font-size:14px;
}
.notify-hint{margin:2px 0 0;color:var(--slate);font-size:13px;line-height:1.7}

/* ---------- دکمه‌ها ---------- */
.notify-submit{margin-top:18px;width:100%;min-height:46px;justify-content:center}
.notify-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.notify-actions .btn{min-height:46px}
/*  پایهٔ روشن از btn-outline می‌آید؛ اینجا فقط حالتِ hover قرمز می‌شود
 *  تا «حذف عضویت» با «ذخیره» اشتباه گرفته نشود. */
.notify-danger:hover{
  border-color:#C1503F;
  color:#C1503F;
  background:#FDF6F5;
}

/* ---------- تأیید کد ---------- */
.notify-verify-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.notify-verify-row .field{margin:0;flex:1 1 190px}
.notify-verify-row .btn{min-height:46px}
.notify-code{
  font-size:21px;letter-spacing:.34em;text-align:center;font-variant-numeric:tabular-nums;
}

/* ---------- تضمین‌ها ---------- */
.notify-trust{
  list-style:none;margin:28px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
.notify-trust li{
  display:flex;align-items:center;gap:8px;
  color:var(--slate);font-size:14px;
}
.notify-trust-icon{flex:0 0 18px;width:18px;height:18px;color:var(--gold-500)}
.notify-trust-icon svg{width:100%;height:100%}

/* ---------- یادداشت‌ها ---------- */
.notify-note,.notify-privacy{
  display:flex;gap:11px;align-items:flex-start;
  color:var(--slate);font-size:13.5px;line-height:1.85;
}
.notify-note{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.notify-privacy{
  margin:34px 0 0;padding:20px 22px;
  background:var(--paper-2);border-radius:var(--r);
}
.notify-note-icon{flex:0 0 18px;width:18px;height:18px;color:var(--bronze);margin-top:3px}
.notify-note-icon svg{width:100%;height:100%}
.notify-privacy a{color:var(--gold-700);font-weight:600}
.notify-device{
  margin-bottom:20px;padding:12px 16px;
  background:var(--paper-2);border-inline-start:3px solid var(--gold-500);
  border-radius:var(--r-sm);font-size:14px;
}
.notify-device a{color:var(--gold-700);font-weight:600;overflow-wrap:anywhere}

/* ---------- موبایل ---------- */
@media (max-width:640px){
  .notify-card{padding:22px 18px}
  .notify-topic{padding:18px}
  .notify-steps{padding:18px}
  .notify-actions .btn{flex:1 1 100%}
  .notify-code{letter-spacing:.22em}
}

@media (prefers-reduced-motion:reduce){
  .notify-channel::before{transition:none}
}