/*
 * قطع تصميم الموقع الموحّدة (مرحلة «الواجهة»، 14 أكتوبر 2026، السؤال 117)
 *
 * الشكل هو شكل صفحة الدورة وصفحة الاشتراك (update 18): كارت أبيض بإطار كحلي باهت وحواف 18 وظل ناعم، وعنوان الكارت كحلي جنب
 * أيقونة في دايرة، والزرار الأصفر بظل أصفر خفيف. أي صفحة في الموقع بتاخد من هنا بدل ما يبقى ليها تنسيقها لوحدها.
 * (اتجرّب شكل الرئيسية والكروت 14 أكتوبر 2026، والمالك رجّع الشكل ده؛ النسخة في backup\cleanup-phase-2026-10-03\step207-front-kit.)
 *
 * الملف مكتوب بخصائص البداية والنهاية (inline-start/end)، فبيشتغل عربي وإنجليزي من غير نسخة RTL.
 */

:root {
  --tf-ink: #111827;
  --tf-text: #374151;
  --tf-muted: #6b7280;
  --tf-line: #eef0f4;
  --tf-soft: #f6f8fc;
  --tf-navy: var(--brand-primary, #183d6c);
  --tf-yellow: var(--brand-highlight, #ffc72b);
  --tf-on-yellow: var(--text-on-highlight, #231f1e);
  --tf-radius: 18px;
  --tf-inner-radius: 14px;
  --tf-card-border: 1px solid rgba(24, 61, 108, .2);
  --tf-card-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

/* ===== خلفية الأقسام والجزء اللي فوق ===== */
.tf-band { background: #fff; }
.tf-hero { background: #f3f6fb; border-bottom: 1px solid rgba(24, 61, 108, .1); }

/* ===== الكارت ===== */
.tf-card { background: #fff; border: var(--tf-card-border); border-radius: var(--tf-radius); box-shadow: var(--tf-card-shadow); padding: 22px; margin-bottom: 20px; }
.tf-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--tf-line); }
.tf-card-title { font-size: 20px; font-weight: 700; color: var(--tf-navy); margin: 0; line-height: 1.4; }
.tf-card-sub { font-size: 13.5px; color: var(--tf-muted); margin: 2px 0 0; line-height: 1.6; }
.tf-card-optional { font-size: 13px; font-weight: 500; color: var(--tf-muted); }
.tf-step-num, .tf-step-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.tf-step-num { background: var(--tf-navy); color: #fff; font-size: 16px; }
.tf-step-icon { background: #eef2fb; color: var(--tf-navy); font-size: 15px; }
.tf-card-friend { border-color: rgba(21, 128, 61, .35); }
.tf-card-friend .tf-step-icon { background: #e7f6ec; color: #15803d; }
.tf-tile { background: var(--tf-soft); border-radius: var(--tf-inner-radius); }

/* ===== عنوان الصفحة: التصنيف أو العلامة الصفرا، والعنوان الكبير، والسطر اللي تحته ===== */
.tf-sec-tag { display: inline-block; padding: 4px 14px; margin-bottom: 10px; border-radius: 6px; background: var(--tf-yellow); color: var(--tf-on-yellow); font-size: 14px; font-weight: 700; line-height: 1.6; }
.tf-sec-title { font-size: 34px; font-weight: 800; color: var(--tf-ink); line-height: 1.35; margin: 0 0 10px; }
.tf-sec-lead { font-size: 17px; color: #4b5563; line-height: 1.8; margin: 0; }

/* ===== الأزرار ===== */
.tf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--tf-yellow); color: var(--tf-on-yellow); font-weight: 800; font-size: 17px; line-height: 1.2; text-decoration: none; box-shadow: 0 6px 16px rgba(255, 199, 43, .35); transition: transform .15s ease, box-shadow .15s ease; cursor: pointer; }
.tf-btn:hover, .tf-btn:focus-visible { color: var(--tf-on-yellow); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 199, 43, .45); }
.tf-btn:disabled, .tf-btn.disabled { opacity: .6; cursor: not-allowed; transform: none; }
.tf-btn-block { display: flex; width: 100%; }
.tf-back-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border: 1.5px solid var(--tf-navy); border-radius: 999px; background: #fff; color: var(--tf-navy); font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.tf-back-btn:hover, .tf-back-btn:focus-visible { background: var(--tf-navy); color: #fff; box-shadow: 0 6px 16px rgba(24, 61, 108, .18); }
@media (max-width: 575.98px) { .tf-back-btn { height: 40px; padding: 0 16px; font-size: 14px; } }
/* قاعدة المالك (14 أكتوبر 2026) لكل الصفحات: زرار الرجوع في الناحية التانية من الصفحة (الشمال في العربي واليمين في الإنجليزي).
   ده لزرار «رجوع» القديم فوق صفحات من نحن وتواصل معنا والأسئلة الشائعة والسياسات (كان على اليمين في العربي). */
.ed-breadcrumb-text2:is(.ver_2) .ed-back-btn, .ed-breadcrumb-text2 .ed-back-btn { text-align: end; }

/* ===== التصنيف والخصم والسعر ===== */
.tf-cat { display: inline-block; padding: 3px 12px; border-radius: 6px; background: var(--tf-yellow); color: var(--tf-on-yellow); font-size: 13px; font-weight: 700; }
.tf-off { display: inline-block; padding: 3px 10px; border-radius: 4px; background: #d92d20; color: #fff; font-size: 13px; font-weight: 700; }
.tf-code { display: inline-block; font-size: 12.5px; font-weight: 700; color: #15803d; background: #e7f6ec; border-radius: 999px; padding: 2px 10px; }
.tf-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tf-price strong { font-size: 30px; font-weight: 800; color: var(--tf-navy); line-height: 1.2; }
.tf-price strong small { font-size: 16px; font-weight: 700; }
.tf-price del { color: #8a8f98; font-size: 17px; }

/* ===== علامات الأيام والأوقات ===== */
.tf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--tf-navy); color: #fff; font-size: 13px; font-weight: 700; }
.tf-chip-outline { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid #dfe4ec; background: #fff; color: var(--tf-text); font-size: 13px; font-weight: 600; }
.tf-chip-outline i { color: var(--tf-navy); font-size: 12px; }

/* ===== شريط السعر أو الدفع الثابت تحت على الموبايل والتابلت ===== */
.tf-paybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 980; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid rgba(24, 61, 108, .18); box-shadow: 0 -8px 24px rgba(15, 23, 42, .08); transition: transform .2s ease; }
.tf-paybar.is-hidden { transform: translateY(110%); }
.tf-paybar-total small { display: block; font-size: 12px; color: var(--tf-muted); }
.tf-paybar-total strong { font-size: 18px; font-weight: 800; color: var(--tf-navy); }
.tf-paybar-total del { font-size: 13px; color: #8a8f98; margin-inline-start: 6px; }
.tf-paybar-btn { min-height: 46px; padding: 0 22px; font-size: 15px; white-space: nowrap; box-shadow: none; }
@media (max-width: 991.98px) {
  body.tf-paybar-on { padding-bottom: 76px; }
  body.tf-paybar-on .tf-whatsapp-fab { bottom: 88px; }
}

@media (max-width: 767.98px) {
  .tf-card { padding: 16px; border-radius: 16px; }
  .tf-sec-title { font-size: 25px; }
  .tf-sec-lead { font-size: 15.5px; }
}

/*
 * صفحات الهبوط: الدورات الخاصة وعروض الشركات (14 أكتوبر 2026، السؤال 141). كانت جوه صفحة الدورات الخاصة، واتنقلت هنا
 * زي ما هي عشان الصفحتين بنفس الشكل. tf-pc-offer = شريط خصومات الشركات.
 */
.tf-pc-head { padding: 34px 0 32px; text-align: center; }
.tf-pc-head .tf-sec-lead { max-width: 640px; margin: 0 auto; }
.tf-pc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.tf-pc-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid #25d366; background: #fff; color: #128c4b; font-weight: 800; font-size: 16px; text-decoration: none; transition: background-color .15s ease; }
.tf-pc-wa:hover, .tf-pc-wa:focus-visible { background: #effaf3; color: #128c4b; }
.tf-pc-sec { padding: 40px 0 60px; }
.tf-pc-sec .tf-card { margin-bottom: 0; }
.tf-pc-title { font-size: 26px; font-weight: 800; color: var(--tf-ink); text-align: center; margin: 0 0 20px; }
.tf-pc-benefit { height: 100%; text-align: center; }
.tf-pc-benefit-ic { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef2fb; color: var(--tf-navy); font-size: 23px; }
.tf-pc-benefit h3 { font-size: 18px; font-weight: 700; color: var(--tf-ink); margin: 0 0 8px; }
.tf-pc-benefit p { color: var(--tf-muted); margin: 0; line-height: 1.7; font-size: 15px; }
.tf-pc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.tf-pc-steps li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 12px; }
.tf-pc-steps p { margin: 0; color: var(--tf-text); font-weight: 600; line-height: 1.7; }
.tf-pc-block { margin-top: 40px; }
.tf-pc-form-wrap { max-width: 860px; margin-inline: auto; scroll-margin-top: 110px; } /* margin-inline بس عشان مسافة tf-pc-block اللي فوقه ماتتلغيش */
.tf-pc-form .form-label { font-weight: 600; color: var(--tf-text); margin-bottom: 8px; }
.tf-pc-form .tf-req { color: #d92d20; margin-inline-start: 3px; }
.tf-pc-form .form-control:not(textarea), .tf-pc-form .form-select { min-height: 48px; }
.tf-pc-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-pc-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tf-pc-pick span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid #dfe4ec; border-radius: 999px; background: #fff; color: var(--tf-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.tf-pc-pick span:hover { border-color: rgba(24, 61, 108, .45); }
.tf-pc-pick input:checked + span { background: var(--tf-navy); border-color: var(--tf-navy); color: #fff; }
.tf-pc-pick input:focus-visible + span { outline: 2px solid var(--tf-yellow); outline-offset: 2px; }
.tf-pc-err { display: block; margin-top: 6px; color: #d92d20; font-size: 13.5px; font-weight: 600; }
.tf-pc-err:empty { display: none; }
.tf-pc-done { text-align: center; padding: 40px 24px; }
.tf-pc-done-ic { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e7f6ec; color: #15803d; font-size: 34px; }
.tf-pc-done h2 { font-size: 26px; font-weight: 800; color: var(--tf-ink); margin: 0 0 10px; }
.tf-pc-done p { color: var(--tf-muted); margin: 0 auto 22px; max-width: 480px; line-height: 1.8; }
.tf-pc-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tf-pc-faq .accordion-item { border: 1px solid var(--tf-line); border-radius: var(--tf-inner-radius) !important; overflow: hidden; margin-bottom: 10px; }
.tf-pc-faq .accordion-button { font-weight: 700; font-size: 15.5px; color: var(--tf-ink); background: #fff; box-shadow: none; gap: 10px; }
.tf-pc-faq .accordion-button:not(.collapsed) { color: var(--tf-navy); background: var(--tf-soft); }
[dir="rtl"] .tf-pc-faq .accordion-button { text-align: right; }
[dir="rtl"] .tf-pc-faq .accordion-button::after { margin-left: 0; margin-right: auto; }
.tf-pc-faq .accordion-body { color: #4b5563; line-height: 1.8; }
@media (max-width: 991.98px) { .tf-pc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .tf-pc-head { padding: 22px 0 20px; }
    .tf-pc-sec { padding: 24px 0 40px; }
    .tf-pc-title { font-size: 22px; }
    .tf-pc-block { margin-top: 28px; }
    .tf-pc-actions .tf-btn, .tf-pc-actions .tf-pc-wa { width: 100%; justify-content: center; }
}
.tf-pc-offer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; background: #fff8e1; border-color: #f2d27a; }
.tf-pc-offer-main { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; }
.tf-pc-offer-ic { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tf-yellow); color: var(--tf-on-yellow); font-size: 22px; }
.tf-pc-offer h2 { font-size: 21px; font-weight: 800; color: var(--tf-ink); margin: 0 0 4px; }
.tf-pc-offer p { margin: 0; color: #4b5563; line-height: 1.7; }
@media (max-width: 767.98px) { .tf-pc-offer .tf-btn { width: 100%; justify-content: center; } }
/* 14 أكتوبر 2026 (الأسئلة 144-146): الفورم على شريط فاتح بعرض الصفحة عشان الكارت الأبيض يبان، وحدود الخانات أوضح، والخانة اللي
   بتكتب فيها كحلي من ألوان المنصة بدل الأزرق الفاتح بتاع القالب. الصفحتين بس (الدورات الخاصة وعروض الشركات). */
.tf-pc-formband { background: #f3f6fb; border-top: 1px solid rgba(24, 61, 108, .08); border-bottom: 1px solid rgba(24, 61, 108, .08); padding: 48px 0; }
.tf-pc-formband .tf-pc-block, .tf-pc-sec .container > .tf-pc-block:first-child { margin-top: 0; }
.tf-pc-form .form-control, .tf-pc-form .form-select { background-color: #fff; border-color: #c5cfdc; }
.tf-pc-form .form-control:hover, .tf-pc-form .form-select:hover { border-color: #a9b6c8; }
.tf-pc-form .form-control:focus, .tf-pc-form .form-select:focus { border-color: var(--tf-navy); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 24, 61, 108), .14); }
.tf-pc-form .form-control.is-invalid, .tf-pc-form .form-select.is-invalid { border-color: #d92d20; }
.tf-pc-form .form-control.is-invalid:focus, .tf-pc-form .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .14); }
.tf-pc-pick span { border-color: #c5cfdc; }
@media (max-width: 767.98px) { .tf-pc-formband { padding: 28px 0; } }
/* صفحة «الأسئلة الشائعة» (15 أكتوبر 2026، الأسئلة 160 و162): عرض مريح للقراية، والإجابة بفقرات ونقط، وكارت «لم تجد إجابة سؤالك؟». */
.tf-faq-wrap { max-width: 900px; margin-inline: auto; }
.tf-pc-faq .accordion-body p { margin: 0 0 8px; }
.tf-pc-faq .accordion-body p:last-child { margin-bottom: 0; }
.tf-pc-faq .accordion-body ul { margin: 0; padding-inline-start: 20px; }
.tf-pc-faq .accordion-body li { margin-bottom: 6px; }
.tf-faq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; background: var(--tf-soft); }
.tf-faq-more h2 { font-size: 20px; font-weight: 800; color: var(--tf-ink); margin: 0 0 4px; }
.tf-faq-more p { margin: 0; color: var(--tf-muted); }
.tf-faq-more .tf-pc-actions { margin-top: 0; }
@media (max-width: 767.98px) { .tf-faq-more .tf-pc-actions { width: 100%; } .tf-faq-more .tf-btn { width: 100%; } }
/* صفحة «تواصل معنا» (15 أكتوبر 2026، الأسئلة 148-150): كروت طرق التواصل (واتساب أولها) وزرار الاتصال. */
.tf-ct-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tf-ct-card { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; margin-bottom: 0; padding: 22px 16px; text-align: center; }
.tf-ct-ic { width: 54px; height: 54px; margin-bottom: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef2fb; color: var(--tf-navy); font-size: 22px; }
.tf-ct-card.is-wa { border-color: rgba(37, 211, 102, .45); }
.tf-ct-card.is-wa .tf-ct-ic { background: #e7f9ee; color: #128c4b; }
.tf-ct-card h3 { font-size: 17px; font-weight: 700; color: var(--tf-ink); margin: 0; }
.tf-ct-card p { margin: 0; color: var(--tf-muted); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.tf-ct-link { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--tf-navy); text-decoration: none; }
.tf-ct-link:hover, .tf-ct-link:focus-visible { text-decoration: underline; color: var(--tf-navy); }
.tf-ct-card.is-wa .tf-ct-link { color: #128c4b; }
.tf-ct-hours { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; color: var(--tf-muted); font-size: 14.5px; }
.tf-pc-call { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--tf-navy); background: #fff; color: var(--tf-navy); font-weight: 800; font-size: 16px; text-decoration: none; transition: background-color .15s ease; }
.tf-pc-call:hover, .tf-pc-call:focus-visible { background: #eef2fb; color: var(--tf-navy); }
@media (max-width: 991.98px) { .tf-ct-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .tf-ct-channels { gap: 12px; }
  .tf-ct-card { padding: 16px 10px; }
  .tf-ct-ic { width: 46px; height: 46px; font-size: 19px; }
  .tf-ct-card h3 { font-size: 15.5px; }
  .tf-ct-card p { font-size: 13px; }
  .tf-pc-actions .tf-pc-call { width: 100%; justify-content: center; }
}

/*
 * عرض الصفحة على الموبايل والتابلت (14 أكتوبر 2026، السؤال 139):
 * 1) القالب بيخلي مسافة الأعمدة 32 (body .row في style.css) والإطار اللي حواليها 12 بس، فكل صف كان بيطلع برّه الإطار 4 بكسل
 *    والصفحة بتتحرك يمين وشمال حركة صغيرة بالصباع. الإطار بقى بنفس المسافة (16 من كل ناحية).
 * 2) أي عنصر يطلع برّه عرض الصفحة بيتقص بدل ما يوسّعها. كروم أندرويد كان بيوسّع الصفحة ويزق المحتوى برّه الشاشة (زي خانات
 *    صفحة الدخول، update 25). clip مش بيعمل منطقة تمرير جديدة، فالأجزاء الثابتة أثناء التمرير (كارت الدفع في صفحة الدورة
 *    وملخص الطلب) والهيدر والتمرير الناعم شغالين زي ما هم. المتصفح القديم اللي مايعرفش clip بيفضل على hidden اللي في القالب.
 */
body .container,
body .container-sm,
body .container-md,
body .container-lg,
body .container-xl,
body .container-xxl {
  --bs-gutter-x: 32px;
}
html,
body {
  overflow-x: clip;
}

/*
 * كارت الدخول والتسجيل (15 أكتوبر 2026، الأسئلة 164-169): كارت واحد في نص الصفحة على شريط فاتح بدل المربع الكحلي والفورم جنب
 * بعض، وبيتقلب بين «تسجيل الدخول» و«إنشاء حساب جديد» (الحركة في website/auth/partials/card_flip، للصفحتين دول بس). الخانات بنفس
 * إطار فورم الدورات الخاصة، والزرار الأصفر زي باقي فورمات الموقع، وتحت الكارت مميزات «لماذا تفاصيل» من صفحة «من نحن».
 */
.tf-auth { background: #f3f6fb; padding: 48px 0 56px; }
.tf-auth-card { max-width: 500px; margin: 0 auto; padding: 32px 32px 24px; view-transition-name: tf-auth-card; }
.tf-auth-head { text-align: center; margin-bottom: 24px; }
.tf-auth-ic { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef2fb; color: var(--tf-navy); font-size: 24px; }
.tf-auth-title { font-size: 26px; font-weight: 800; color: var(--tf-ink); line-height: 1.4; margin: 0 0 6px; }
.tf-auth-lead { font-size: 15px; color: var(--tf-muted); line-height: 1.7; margin: 0; }
.tf-auth-field { margin-bottom: 18px; }
.tf-auth .form-label { display: block; font-weight: 600; color: var(--tf-text); margin-bottom: 8px; }
.tf-auth .tf-req { color: #d92d20; margin-inline-start: 3px; }
.tf-auth .form-control { min-height: 52px; height: auto; margin: 0; padding: 0 16px; border: 1px solid #c5cfdc; border-radius: 12px; background-color: #fff; color: var(--tf-ink); font-size: 16px; }
.tf-auth .form-control:hover { border-color: #a9b6c8; }
.tf-auth .form-control:focus { border-color: var(--tf-navy); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 24, 61, 108), .14); }
.tf-auth .form-control[readonly] { background-color: #f6f8fc; }
.tf-auth .input-group > .form-control:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
.tf-auth .input-group > .form-control:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.tf-auth .input-group-text { min-height: 52px; padding: 0 16px; border: 1px solid #c5cfdc; border-radius: 12px; background: #fff; color: var(--tf-muted); }
.tf-auth .input-group > .input-group-text:last-child { border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start: 0; }
.tf-auth-error { display: block; margin-top: 6px; color: #d92d20; font-size: 14px; font-weight: 600; line-height: 1.6; }
.tf-auth-error:empty { display: none; }
.tf-auth-hint { display: block; margin-top: 6px; color: var(--tf-muted); font-size: 13px; }
.tf-auth .tf-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.tf-auth-carry { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 16px; border: 1.5px solid var(--tf-navy); border-radius: 999px; background: #fff; color: var(--tf-navy); font-size: 14px; font-weight: 700; text-decoration: none; }
.tf-auth-carry:hover, .tf-auth-carry:focus-visible { background: var(--tf-navy); color: #fff; }
.tf-auth-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: var(--tf-muted); font-size: 13.5px; }
.tf-auth-secure i { color: var(--tf-navy); }
.tf-auth-switch { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--tf-line); text-align: center; color: var(--tf-text); font-size: 15px; }
.tf-auth-switch a { margin-inline-start: 4px; font-weight: 800; color: var(--tf-navy); text-decoration: none; }
.tf-auth-switch a:hover, .tf-auth-switch a:focus-visible { color: var(--tf-navy); text-decoration: underline; }
.tf-auth-link { padding: 0; border: 0; background: none; color: var(--tf-navy); font-weight: 700; font-size: 14.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tf-auth-link:hover, .tf-auth-link:focus-visible { color: var(--tf-navy); text-decoration: underline; }
.tf-auth-link:disabled, .tf-auth-link.disabled { opacity: .55; text-decoration: none; pointer-events: none; }
.tf-auth-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: #eef2fb; color: var(--tf-navy); font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.tf-auth-note { padding: 12px 14px; border: 1px solid rgba(24, 61, 108, .15); border-radius: 12px; background: #f6f8fc; color: var(--tf-text); font-size: 14px; line-height: 1.7; }
.tf-auth-note i { color: var(--tf-navy); }
.tf-auth-otp { display: flex; justify-content: center; gap: 8px; direction: ltr; }
.tf-auth-otp input { flex: 1 1 0; min-width: 0; max-width: 52px; height: 56px; padding: 0; border: 1px solid #c5cfdc; border-radius: 12px; background: #fff; text-align: center; font-size: 22px; font-weight: 700; color: var(--tf-ink); }
.tf-auth-otp input:focus { border-color: var(--tf-navy); outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 24, 61, 108), .14); }
.tf-auth-timer { color: var(--tf-muted); font-size: 14px; font-weight: 700; direction: ltr; }
.tf-auth-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tf-auth-method { padding: 20px 14px; border: 1px solid rgba(24, 61, 108, .2); border-radius: var(--tf-inner-radius); background: #fff; text-align: center; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tf-auth-method:hover, .tf-auth-method:focus-visible { border-color: var(--tf-navy); box-shadow: 0 8px 20px rgba(24, 61, 108, .1); transform: translateY(-2px); outline: none; }
.tf-auth-method .tf-auth-ic { width: 50px; height: 50px; margin-bottom: 10px; font-size: 20px; }
.tf-auth-method h2 { margin: 0 0 4px; color: var(--tf-navy); font-size: 16px; font-weight: 800; }
.tf-auth-method p { margin: 0; color: var(--tf-muted); font-size: 13px; line-height: 1.6; }
.tf-auth-why { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; max-width: 660px; margin: 22px auto 0; padding: 0; list-style: none; }
.tf-auth-why li { display: flex; align-items: center; gap: 8px; color: var(--tf-text); font-size: 14px; font-weight: 600; }
.tf-auth-why i { width: 32px; height: 32px; border: 1px solid rgba(24, 61, 108, .15); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--tf-navy); font-size: 13px; }
@media (max-width: 575.98px) {
  .tf-auth { padding: 20px 0 32px; }
  .tf-auth-card { padding: 24px 18px 18px; }
  .tf-auth-ic { width: 52px; height: 52px; font-size: 21px; margin-bottom: 10px; }
  .tf-auth-title { font-size: 22px; }
  .tf-auth-head { margin-bottom: 18px; }
  .tf-auth-methods { grid-template-columns: 1fr; }
  .tf-auth-otp { gap: 6px; }
  .tf-auth-otp input { height: 52px; font-size: 20px; }
  .tf-auth-why { flex-direction: column; align-items: center; gap: 8px; }
}