/* =========================================================================
   on-enroll — «ثبت‌نام و تعیین سطح آنلاین» · طرح 05-enroll.html
   ستون متن + چک‌لیست + تلفن ‖ کارت شیشه‌ای فرم.
   وابسته به: de-base.css   ·   ارسال فرم: assets/js/inc.js (هندلر عمومی ‎.cfb-form‎)
   ========================================================================= */

.onen {
  position: relative; overflow: hidden;
  background: radial-gradient(900px 520px at 50% 22%, var(--onen-glow, rgba(225, 29, 72, .12)), transparent 62%), var(--onen-bg, var(--zn-bg0));
  border-bottom: 2px solid rgba(var(--zn-line), .14);
}
.onen-ghost { top: 16px; right: 6px; font-size: var(--onen-ghost-fs, 140px); --ghost-stroke: 2px; }
.onen-wrap {
  position: relative; z-index: 1; max-width: var(--onen-mw, 1180px); margin: 0 auto;
  display: grid; grid-template-columns: var(--onen-cols, 1.06fr 1fr);
  gap: var(--onen-gap, 52px); align-items: center;
}
.onen-txt { min-width: 0; }

/* ---------- ستون متن ---------- */
.onen-h2 { margin: 18px 0 8px; font-size: var(--onen-h-fs, 42px); font-weight: 900; color: var(--onen-h-c, var(--zn-t1)); line-height: 1.45; }
.onen-h2 .grad {
  background: linear-gradient(120deg, var(--onen-g1, var(--zn-crim)), var(--onen-g2, var(--zn-rose2)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.onen-lead { font-size: var(--onen-l-fs, 15px); color: var(--zn-t4); line-height: 2.2; font-weight: 500; max-width: var(--onen-lead-w, 480px); }
.onen-lead p { margin: 0 0 12px; color: inherit; font: inherit; }
.onen-lead p:last-child { margin-bottom: 0; }

/* چک‌لیست مزیت‌ها */
.onen-checks { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; }
.onen-check { display: flex; align-items: center; gap: 10px; font-size: var(--onen-ck-fs, 13.5px); color: var(--onen-ck-c, var(--zn-t3)); font-weight: 600; line-height: 1.9; }
.onen-tick {
  width: 19px; height: 19px; flex-shrink: 0; border-radius: 50%;
  background: var(--onen-tick-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--onen-tick-fg, #FFF);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 900;
}
.onen-tick i, .onen-tick svg { font-size: 10px; width: 10px; height: 10px; fill: currentColor; }

.onen-acts { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.de-scope .onen-btn {
  white-space: nowrap; cursor: pointer;
  background: var(--onen-btn-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--onen-btn-fg, #FFF);
  font-size: 15px; font-weight: 900;
  padding: var(--onen-btn-p, 16px 30px); border-radius: var(--onen-btn-r, 14px);
  box-shadow: 0 0 40px rgba(255, 59, 92, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.de-scope .onen-btn:hover { color: var(--onen-btn-fg, #FFF); transform: translateY(-2px); box-shadow: 0 6px 46px rgba(255, 59, 92, .42); }
.de-scope .onen-phone, .onen-phone { direction: ltr; font-size: var(--onen-ph-fs, 18px); font-weight: 900; color: var(--onen-ph-c, var(--zn-t1)); letter-spacing: 1px; }

/* ---------- کارت فرم ---------- */
.onen-card {
  background: var(--onen-card-bg, rgba(255, 252, 246, .82));
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 2px solid var(--onen-card-bd, rgba(var(--zn-line), .22));
  border-radius: var(--onen-card-r, 24px);
  padding: var(--onen-card-p, 28px);
  box-shadow: var(--onen-card-sh, 0 30px 66px rgba(120, 60, 40, .18));
}
.onen-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.onen-ct { font-size: var(--onen-ct-fs, 18px); font-weight: 900; color: var(--zn-t1); }
.onen-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--zn-rose); box-shadow: 0 0 17px var(--zn-rose);
  animation: on-pulse 1.9s ease-in-out infinite;
}
.onen-cd { font-size: 12px; color: var(--zn-t5); margin: 6px 0 16px; line-height: 1.9; font-weight: 500; }

/* ---------- فرم: ساختار استاندارد CFB با ظاهر این طرح ----------
   نشانه‌گذاری همان فرم‌های پیش‌فرض قالب است (‎.cfb-form‎، ‎.type-*‎، ‎.field-*‎،
   ‎.submit-btn‎، ‎.cfb-error‎، ‎.form-message‎). این‌جا فقط ظاهرشان به طرحِ
   «دورهٔ آنلاین» نزدیک می‌شود؛ کلاس‌ها و رفتار دست‌نخورده می‌مانند. */

.onen-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* هر فیلد به‌طور پیش‌فرض تمام‌عرض است؛ فقط دو سلکت کنار هم می‌نشینند. */
.onen-form > * { grid-column: 1 / -1; }
.onen-form > .field-level,
.onen-form > .field-class_type { grid-column: span 1; }

/* طرح این کارت برچسبِ دیده‌نشدنی دارد و راهنما را داخل خود فیلد نشان می‌دهد؛
   برچسب برای صفحه‌خوان می‌ماند و فقط از دید پنهان می‌شود. */
.onen-form > div > label {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.de-scope .onen-form input[type="text"],
.de-scope .onen-form input[type="tel"],
.de-scope .onen-form select {
  width: 100%; display: block;
  background: var(--onen-field-bg, rgba(255, 255, 255, .6));
  border: 1px solid var(--onen-field-bd, rgba(var(--zn-line), .24));
  border-radius: var(--onen-field-r, 12px);
  padding: var(--onen-field-p, 13px 14px);
  font-size: 13px; color: var(--zn-t1);
  transition: border-color .18s ease, background .18s ease;
}
.de-scope .onen-form select { padding: 13px 10px; font-size: 12.5px; color: var(--zn-t2); }
.de-scope .onen-form input:hover,
.de-scope .onen-form select:hover { border-color: rgba(225, 29, 72, .34); }
/* کلاس ‎.has-error‎ را خودِ inc.js روی فیلد می‌گذارد */
.de-scope .onen-form input.has-error,
.de-scope .onen-form select.has-error { border-color: var(--onen-err-c, var(--zn-crim)); background: rgba(225, 29, 72, .06); }

.de-scope .onen-form .submit-btn {
  border: none; width: 100%; text-align: center; cursor: pointer;
  background: var(--onen-sub-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--onen-sub-fg, #FFF);
  font-size: 15px; font-weight: 900;
  padding: var(--onen-sub-p, 16px); border-radius: var(--onen-sub-r, 13px);
  box-shadow: 0 10px 28px rgba(120, 60, 40, .14), 0 0 44px rgba(255, 59, 92, .3);
  transition: transform .18s ease, opacity .18s ease;
}
.de-scope .onen-form .submit-btn:hover:not(:disabled) { transform: translateY(-2px); }
.de-scope .onen-form .submit-btn:disabled { opacity: .6; cursor: default; }
.de-scope .onen-form .submit-btn.is-loading { opacity: .75; cursor: progress; }

.onen-fine { font-size: 11px; color: var(--zn-t6); font-weight: 600; text-align: center; line-height: 1.9; }

/* هانی‌پات: برای کاربر و صفحه‌خوان نامرئی، برای ربات قابل پرکردن */
.onen-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* خطای هر فیلد — inc.js آن را با استایل اینلاین می‌سازد، اینجا هماهنگش می‌کنیم */
.de-scope .onen-form .cfb-error {
  color: var(--onen-err-c, var(--zn-crim)) !important;
  font-size: 12px !important; font-weight: 700;
  margin-top: 5px !important; line-height: 1.8;
}

/* پیام موفقیت/خطای سراسری که inc.js پس از فرم درج می‌کند */
.onen-card .form-message {
  margin-top: 14px; border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 10px;
}
.onen-card .form-message h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 900; line-height: 1.7; }
.onen-card .form-message p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.95; }
.onen-card .form-message .message-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.onen-card .form-message .message-icon svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.onen-card .success-message { color: var(--onen-ok-c, #12794F); background: rgba(18, 121, 79, .08); border: 1px solid rgba(18, 121, 79, .28); }
.onen-card .error-message { color: var(--onen-err-c, var(--zn-crim)); background: rgba(225, 29, 72, .07); border: 1px solid rgba(225, 29, 72, .28); }
/* آیکن تیک برای پیام خطا معنا ندارد */
.onen-card .error-message .message-icon { display: none; }

@media (prefers-reduced-motion: reduce) { .onen-dot { animation: none; } }

@media (max-width: 980px) { .onen-wrap { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 600px) {
  /* در موبایل دو سلکت هم زیر هم می‌روند */
  .onen-form > .field-level,
  .onen-form > .field-class_type { grid-column: 1 / -1; }
  .onen-card { padding: 20px; }
  .de-scope .onen-btn { width: 100%; text-align: center; }
}