/* ====================================================================
   Members area of "نظام الـ90 يوم" (/system-access-ar, /system-booking-ar).
   Uses the webinar design tokens (templates are named page-webinar-*).
   ==================================================================== */
body[class*="page-template-page-webinar-members"] .lang-toggle,
body[class*="page-template-page-webinar-booking"] .lang-toggle { display: none !important; }

.mb-muted { color: var(--wb-muted); font-size: 14px; }
.mb-center { text-align: center; margin: 0; }
.mb-h1 { font-size: clamp(28px, 3.6vw, 42px); }

.mb-notice { border-radius: 14px; padding: 14px 18px; font-size: 15px; border: 1px solid; }
.mb-notice--ok   { background: var(--wb-green-soft); border-color: #BFE9D2; color: #074B1A; }
.mb-notice--warn { background: #FEF3C7; border-color: #F5D98A; color: #92400E; }
.mb-notice--bad  { background: #FDECE4; border-color: #F3C7B1; color: #B8432F; }

/* gate */
.mb-gate .wb-wrap { padding: 120px 20px 72px; display: flex; justify-content: center; }
.mb-gate-card { width: 100%; max-width: 460px; background: var(--wb-card); border: 1px solid var(--wb-line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 40px -20px rgba(21, 23, 27, 0.25); }
.mb-gate-card p { margin: 0; }
.mb-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mb-form label { font-size: 14px; font-weight: 600; }
.mb-form input[type="email"], .mb-form input[type="text"] {
  min-height: 52px; padding: 0 14px; border: 1px solid var(--wb-line-2); border-radius: 12px; background: var(--wb-card-2);
  font: inherit; font-size: 16px; color: var(--wb-ink); margin-bottom: 8px; width: 100%; box-sizing: border-box; text-align: left;
}
.mb-form input:focus { outline: 3px solid rgba(23, 178, 106, 0.3); border-color: var(--wb-green); }
.mb-form .wb-btn { width: 100%; margin-top: 4px; }
.mb-gate-help { border-top: 1px solid var(--wb-line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--wb-muted); }
.mb-gate-help a, .mb-center a { color: var(--wb-green-deep); font-weight: 600; }

/* top */
.mb-top .wb-wrap { padding: 108px 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.mb-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--wb-card); border: 1px solid var(--wb-line); color: var(--wb-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.mb-nav a:hover { border-color: var(--wb-green); color: var(--wb-green-deep); }
.mb-save { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; background: var(--wb-card); border: 1px dashed var(--wb-line-2); border-radius: 16px; padding: 16px 20px; }
.mb-save > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }
.mb-save b { font-size: 15px; }
.mb-save > div > span { font-size: 13.5px; color: var(--wb-muted); }
.mb-community { border-style: solid; border-color: #BFE9D2; background: var(--wb-green-soft); }
.mb-community > div > span { color: #074B1A; }
.mb-copy { min-height: 46px; font-size: 15px; padding: 0 20px; }
.mb-copy [hidden] { display: none; }

/* sections */
.mb-sec .wb-wrap { padding-block: 48px; display: flex; flex-direction: column; gap: 22px; }
.mb-sec--white { background: var(--wb-card); border-top: 1px solid var(--wb-line); border-bottom: 1px solid var(--wb-line); }
.mb-sec, .mb-top { scroll-margin-top: 84px; }
.mb-player { max-width: 920px; }

.mb-tool { background: var(--wb-ink); color: #fff; border-radius: 22px; padding: 30px; }
.mb-tool-copy { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.mb-tool .wb-kicker { color: var(--wb-green-bright); }
.mb-tool .wb-h2 { color: #fff; }
.mb-tool p { margin: 0; color: #C9CDD3; font-size: 15.5px; }
.mb-tool .ws-tag { background: #20242B; border-color: #2A2F37; color: #C9CDD3; }
.mb-tool .ws-tag--hot { background: var(--wb-green); border-color: var(--wb-green); color: #fff; }
.mb-tool .wb-btn { align-self: flex-start; }
.mb-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: #C9CDD3; }
.mb-list li { position: relative; padding-inline-start: 22px; }
.mb-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--wb-green-bright); font-weight: 700; }

.mb-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.mb-file { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-card-2); color: var(--wb-ink); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.mb-file:hover { border-color: var(--wb-green); transform: translateY(-1px); }
.mb-file--first { border-color: var(--wb-green); background: var(--wb-green-soft); }
.mb-file-ic { flex: none; width: 46px; height: 56px; border-radius: 8px; background: var(--wb-ink); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; letter-spacing: 0.04em; direction: ltr; }
.mb-file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-file-body b { font-size: 16px; line-height: 1.4; }
.mb-file-body span { font-size: 13px; color: var(--wb-muted); line-height: 1.6; }
.mb-file-body em { font-style: normal; font-size: 12px; color: var(--wb-faint); }
.mb-file-go { flex: none; padding: 8px 14px; border-radius: 10px; background: var(--wb-ink); color: #fff; font-size: 13px; font-weight: 600; }

.mb-sheet, .mb-session, .mb-help, .mb-next { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; border: 1px solid var(--wb-line); border-radius: 18px; padding: 20px 22px; background: var(--wb-card-2); }
.mb-sheet > div, .mb-session > div:first-child, .mb-help > div:first-child, .mb-next > div { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mb-sheet b, .mb-help b, .mb-next b { font-size: 16px; }
.mb-sheet span, .mb-help span, .mb-next span { font-size: 13.5px; color: var(--wb-muted); }
.mb-session p { margin: 0; font-size: 15px; color: var(--wb-text); }
.mb-session--on { border-color: var(--wb-green); background: var(--wb-green-soft); }
.mb-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mb-price b { font-size: 24px; color: var(--wb-green-deep); }
.mb-price s { color: var(--wb-faint); }
.mb-help-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mb-help-act .wb-btn { min-height: 46px; font-size: 15px; }
.mb-mail { color: var(--wb-ink); font-weight: 500; text-decoration: none; }

.mb-funnels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: start; border: 1px solid var(--wb-line); border-radius: 22px; padding: 26px; background: var(--wb-card-2, #fff); }
.mb-funnels-shot { border: 1px solid var(--wb-line); border-radius: 14px; overflow: hidden; background: #FBFAF7; }
.mb-funnels-shot img { display: block; width: 100%; height: auto; }
.mb-funnels-copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mb-funnels-copy p { margin: 0; font-size: 15.5px; }
.mb-funnels-act { display: flex; flex-wrap: wrap; gap: 10px; }
.mb-funnels--buy { border-style: dashed; border-color: var(--wb-green); }
.mb-funnels .mb-price { margin: 0; font-size: 15px; } .mb-funnels .mb-price b { font-size: 26px; color: var(--wb-green-dark, #0F8A50); } .mb-funnels .mb-price s { color: var(--wb-muted); margin-inline-start: 6px; }
@media (max-width: 760px) { .mb-funnels { grid-template-columns: 1fr; padding: 18px; } .mb-funnels-act .wb-btn { width: 100%; } }
.mb-soon { border: 1px dashed var(--wb-line-2); border-radius: 18px; padding: 24px; background: var(--wb-well); display: flex; flex-direction: column; gap: 8px; }
.mb-soon p { margin: 0; color: var(--wb-muted); font-size: 15px; max-width: 70ch; }

/* booking */
.mb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mb-steps li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--wb-line); border-radius: 14px; background: var(--wb-card); }
.mb-steps li > span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--wb-well); color: var(--wb-muted); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mb-steps li.is-now { border-color: var(--wb-green); box-shadow: 0 0 0 4px rgba(23, 178, 106, 0.12); }
.mb-steps li.is-now > span { background: var(--wb-green); color: #fff; }
.mb-steps b { display: block; font-size: 15.5px; }
.mb-steps em { font-style: normal; font-size: 13px; color: var(--wb-muted); }
.mb-cal { background: var(--wb-card); border: 1px solid var(--wb-line); border-radius: 18px; padding: 8px; overflow: hidden; }
.mb-next { border-color: var(--wb-green); background: var(--wb-green-soft); }
.mb-book .wb-wrap { padding-bottom: 56px; }

@media (max-width: 720px) {
  .mb-top .wb-wrap { padding: 96px 20px 32px; }
  .mb-gate .wb-wrap { padding: 104px 20px 56px; }
  .mb-sec .wb-wrap { padding-block: 40px; }
  .mb-nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .mb-nav::-webkit-scrollbar { display: none; }
  .mb-nav a { flex: none; }
  .mb-tool { padding: 22px; }
  .mb-tool .wb-btn, .mb-sheet .wb-btn, .mb-session .wb-btn, .mb-next .wb-btn, .mb-copy { width: 100%; }
  .mb-file { flex-wrap: wrap; }
  .mb-file-go { width: 100%; text-align: center; }
  .mb-help-act { width: 100%; }
  .mb-help-act .wb-btn { flex: 1; }
}

/* ---- questions after sign-up (mag-profile.php) ---- */
.mb-profile-card { background: #fff; border: 1px solid var(--wb-line); border-radius: 22px; padding: 26px; max-width: 780px; display: flex; flex-direction: column; gap: 24px; }
.mb-q { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mb-q legend, .mb-q-label { padding: 0; margin: 0 0 10px; font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--wb-ink); display: flex; align-items: center; gap: 10px; }
.mb-q-n { flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--wb-green-soft); color: var(--wb-green-dark, #0F8A50); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mb-q-hint { margin: 0; font-size: 14px; color: var(--wb-muted); }
.mb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-opts[hidden] { display: none; }
.mb-opt { position: relative; display: inline-flex; cursor: pointer; }
.mb-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mb-opt span { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 16px; border: 1.5px solid var(--wb-line); border-radius: 12px; background: var(--wb-card-2, #FBFAF7); font-size: 15px; line-height: 1.45; transition: border-color .15s, background .15s; }
.mb-opt:hover span { border-color: var(--wb-green); }
.mb-opt input:checked + span { border-color: var(--wb-green); background: var(--wb-green-soft); color: #074B1A; font-weight: 600; }
.mb-opt input:focus-visible + span { outline: 3px solid rgba(23, 178, 106, 0.35); outline-offset: 2px; }
.mb-q--text input { width: 100%; max-width: 380px; min-height: 46px; padding: 8px 14px; border: 1.5px solid var(--wb-line); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; text-align: left; }
.mb-q--text .mb-q-label { font-size: 15px; }
.mb-profile-btn { align-self: flex-start; }
.mb-profile-note { margin: -10px 0 0; font-size: 13px; }
@media (max-width: 640px) {
  .mb-profile-card { padding: 18px; gap: 20px; }
  .mb-opts { flex-direction: column; }
  .mb-opt, .mb-opt span { width: 100%; }
  .mb-profile-btn { width: 100%; }
}

/* the tool card when it is the optional add-on (dark card) */
.mb-tool .mb-price { margin: 4px 0 0; }
.mb-tool .mb-price b { color: var(--wb-green-bright, #3DD68C); font-size: 26px; }
.mb-tool .mb-price s, .mb-tool .mb-price .mb-muted { color: #9AA0A8; }

/* Locked items of the paid add-on, and the offer that appears under the video on play */
.mb-file--locked { border-style: dashed; }
.mb-file--locked .mb-file-ic { background: #F1F0EB; color: #6B7078; }
.mb-file--locked .mb-file-go { background: var(--wb-green); color: #fff; font-weight: 700; }
.mb-sheet--locked .wb-btn span, .mb-sheet--locked .wb-btn bdi { color: inherit; font-size: inherit; }
.mb-sheet--locked { border-style: dashed; }
.mb-vo { margin-top: 18px; border: 2px solid var(--wb-green); border-radius: 18px; background: #F4FBF7; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; align-items: center; }
.mb-vo[hidden] { display: none; }
.mb-vo.is-in { animation: mb-vo-in .35s ease-out; }
@keyframes mb-vo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mb-vo h3 { margin: 4px 0 10px; font-size: 20px; line-height: 1.45; color: var(--wb-ink); }
.mb-vo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.6; color: #3A3F47; }
.mb-vo li::before { content: "\2713"; color: var(--wb-green-dark, #0F8A50); font-weight: 700; margin-inline-end: 8px; }
.mb-vo-buy { display: flex; flex-direction: column; gap: 8px; min-width: 230px; text-align: center; }
.mb-vo-buy .mb-price { justify-content: center; margin: 0; }
.mb-vo-buy small { font-size: 12.5px; color: var(--wb-muted); }
@media (max-width: 760px) { .mb-vo { grid-template-columns: 1fr; padding: 16px; } .mb-vo h3 { font-size: 18px; } .mb-vo-buy { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .mb-vo.is-in { animation: none; } }