@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap");
:root, [data-theme="light"] {
  --sdce-brand-font: "Cairo", "Segoe UI", Arial, sans-serif;
  --sdce-brand-primary: #0066FF;
  --sdce-brand-on-primary: #FFFFFF;
  --sdce-brand-secondary: #00D1C1;
  --sdce-brand-navy: #031635;
  --sdce-brand-background: #F8FAFC;
  --sdce-brand-surface: #FFFFFF;
  --sdce-brand-text: #181C1E;
  --sdce-brand-muted: #44474E;
  --sdce-brand-error: #BA1A1A;
  --sdce-brand-gradient: linear-gradient(135deg, #0066FF, #00D1C1);
  --primary: #0066FF;
  --primary-color: #0066FF;
  --blue-500: #0066FF;
  --blue-600: #031635;
  --text-color: #181C1E;
  --text-muted: #44474E;
  --bg-color: #F8FAFC;
  --fg-color: #FFFFFF;
  --control-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --subtle-fg: #F8FAFC;
  --alert-text-danger: #BA1A1A;
}
html, body, button, input, select, textarea, .sdce-site, .desk-container, .layout-main-section { font-family: var(--sdce-brand-font) !important; }
.sdce-site {
  --sdce-blue: var(--sdce-brand-primary);
  --sdce-blue-dark: var(--sdce-brand-navy);
  --sdce-gold: var(--sdce-brand-secondary);
  --sdce-ink: var(--sdce-brand-text);
  --sdce-ink-soft: var(--sdce-brand-muted);
  --sdce-text-muted: var(--sdce-brand-muted);
  --sdce-bg: var(--sdce-brand-background);
  --sdce-surface: var(--sdce-brand-surface);
  --sdce-danger: var(--sdce-brand-error);
}
.admin-guide {
  --admin-bg: var(--sdce-brand-background);
  --admin-card: var(--sdce-brand-surface);
  --admin-ink: var(--sdce-brand-text);
  --admin-soft: var(--sdce-brand-muted);
  --admin-muted: var(--sdce-brand-muted);
  --admin-blue: var(--sdce-brand-primary);
  --admin-blue-soft: color-mix(in srgb, var(--sdce-brand-primary) 10%, var(--sdce-brand-surface));
  --admin-gold: var(--sdce-brand-secondary);
}
.admin-guide .admin-hero { background: var(--sdce-brand-navy); }
.sdce-site .brand-mark { background: var(--sdce-brand-gradient); color: var(--sdce-brand-on-primary); }
.sdce-site .button-primary { background-color: var(--sdce-brand-primary); color: var(--sdce-brand-on-primary) !important; }
.sdce-site .button-primary:hover:not(:disabled) { background-color: var(--sdce-brand-navy); }
.btn-primary, .primary-action, .standard-actions .btn-primary { background-color: var(--sdce-brand-primary) !important; border-color: var(--sdce-brand-primary) !important; color: var(--sdce-brand-on-primary) !important; }
.btn-primary:hover, .btn-primary:focus, .primary-action:hover, .primary-action:focus { background-color: var(--sdce-brand-navy) !important; border-color: var(--sdce-brand-navy) !important; }
.form-control:focus, .input-with-feedback:focus { border-color: var(--sdce-brand-primary) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sdce-brand-primary) 20%, transparent) !important; }
.text-primary, .indicator-pill.blue, .indicator-pill.light-blue { color: var(--sdce-brand-primary) !important; }
.navbar, .page-head { border-color: color-mix(in srgb, var(--sdce-brand-muted) 24%, transparent); }
body.sdce-login-page {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--sdce-brand-secondary) 15%, transparent), transparent 31rem),
    linear-gradient(145deg, var(--sdce-brand-background), color-mix(in srgb, var(--sdce-brand-primary) 6%, var(--sdce-brand-background)));
  color: var(--sdce-brand-text);
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
body.sdce-login-page .navbar {
  background: transparent !important;
  border: 0;
  min-height: 76px;
  padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
}
body.sdce-login-page .navbar > .container { max-width: 1120px; }
body.sdce-login-page .navbar-brand img { height: 38px; max-width: 160px; object-fit: contain; width: auto; }
body.sdce-login-page .navbar-toggler, body.sdce-login-page .navbar-collapse { display: none !important; }
.sdce-login-language {
  align-items: center;
  background: color-mix(in srgb, var(--sdce-brand-surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--sdce-brand-muted) 28%, transparent);
  border-radius: 999px;
  color: var(--sdce-brand-text);
  cursor: pointer;
  display: inline-flex;
  font: 700 13px/1 var(--sdce-brand-font);
  justify-content: center;
  margin-inline-start: auto;
  min-height: 44px;
  min-width: 84px;
  padding: 0 16px;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.sdce-login-language:hover { background: var(--sdce-brand-surface); border-color: var(--sdce-brand-primary); }
.sdce-login-language:active { transform: scale(.98); }
.sdce-login-language:focus-visible, body.sdce-login-page a:focus-visible, body.sdce-login-page button:focus-visible, body.sdce-login-page input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sdce-brand-primary) 28%, transparent) !important;
  outline-offset: 3px;
}
body.sdce-login-page #page-login > .page-content-wrapper > main.container {
  align-items: stretch;
  direction: ltr;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .8fr);
  margin-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  margin-top: 8px !important;
  max-width: 1120px;
  min-height: min(690px, calc(100dvh - 112px));
  padding-inline: max(20px, env(safe-area-inset-left));
}
body.sdce-login-page #page-login .page-header-wrapper, body.sdce-login-page #page-login .page-footer { display: none !important; }
.sdce-login-intro, body.sdce-login-page #page-login .page_content { border-radius: 28px; min-width: 0; }
.sdce-login-intro {
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--sdce-brand-secondary) 26%, transparent), transparent 18rem),
    linear-gradient(150deg, var(--sdce-brand-navy), color-mix(in srgb, var(--sdce-brand-primary) 62%, var(--sdce-brand-navy)));
  color: #fff;
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(34px, 5vw, 64px);
  position: relative;
}
html[dir="ltr"] .sdce-login-intro { direction: ltr; }
.sdce-login-intro::after {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  content: "";
  height: 310px;
  inset-block-end: -185px;
  inset-inline-end: -95px;
  pointer-events: none;
  position: absolute;
  width: 310px;
}
.sdce-login-intro > * { position: relative; z-index: 1; }
.sdce-login-kicker { color: color-mix(in srgb, var(--sdce-brand-secondary) 82%, #fff); font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.sdce-login-intro h1 { color: #fff; font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.18; margin: 18px 0; max-width: 620px; }
.sdce-login-intro > div > p { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.85; margin: 0; max-width: 560px; }
.sdce-login-benefits { display: grid; gap: 14px; list-style: none; margin: 34px 0 0; padding: 0; }
.sdce-login-benefits li { align-items: center; color: rgba(255,255,255,.92); display: flex; font-size: 14px; font-weight: 600; gap: 12px; }
.sdce-login-benefits svg { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; flex: 0 0 40px; height: 40px; padding: 9px; stroke: currentColor; stroke-width: 1.8; width: 40px; }
.sdce-login-trust { align-items: center; color: rgba(255,255,255,.7); display: flex; font-size: 12px; gap: 8px; margin-top: 42px; }
.sdce-login-trust svg { height: 18px; stroke: var(--sdce-brand-secondary); stroke-width: 2; width: 18px; }
body.sdce-login-page #page-login .page_content {
  align-items: center;
  background: var(--sdce-brand-surface);
  border: 1px solid color-mix(in srgb, var(--sdce-brand-muted) 24%, transparent);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .1);
  direction: rtl;
  display: flex;
  justify-content: center;
  padding: clamp(32px, 4vw, 56px);
}
html[dir="ltr"] body.sdce-login-page #page-login .page_content { direction: ltr; }
body.sdce-login-page #page-login .page_content > div, body.sdce-login-page #page-login section { margin: 0 auto; max-width: 410px; width: 100%; }
body.sdce-login-page #page-login .page-card-head { margin-bottom: 24px; }
body.sdce-login-page #page-login .page-card-head > img { height: 58px; margin-bottom: 14px; max-width: 180px; object-fit: contain; width: auto; }
body.sdce-login-page #page-login .page-card-head h4 { color: var(--sdce-brand-text); font-size: 24px; font-weight: 800; line-height: 1.4; }
body.sdce-login-page #page-login .login-content.page-card { background: transparent; border: 0; box-shadow: none; max-width: none; padding: 0; }
body.sdce-login-page #page-login .page-card-body { padding: 0; }
body.sdce-login-page #page-login .form-label { color: var(--sdce-brand-text); display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; position: static; width: auto; height: auto; clip: auto; }
body.sdce-login-page #page-login .form-group { margin-bottom: 18px; }
body.sdce-login-page #page-login .form-control { background: var(--sdce-brand-background); border: 1px solid color-mix(in srgb, var(--sdce-brand-muted) 28%, transparent); border-radius: 12px; color: var(--sdce-brand-text); font-size: 16px; min-height: 50px; padding-inline: 42px 14px; }
body.sdce-login-page #page-login .password-field .form-control { padding-inline-end: 64px; }
html[dir="rtl"] body.sdce-login-page #page-login .field-icon { left: auto !important; right: 14px !important; }
html[dir="ltr"] body.sdce-login-page #page-login .field-icon { left: 14px !important; right: auto !important; }
body.sdce-login-page #page-login .toggle-password { cursor: pointer; min-height: 44px; padding-top: 14px; }
html[dir="rtl"] body.sdce-login-page #page-login .toggle-password { left: 14px !important; right: auto !important; }
html[dir="ltr"] body.sdce-login-page #page-login .toggle-password { left: auto !important; right: 14px !important; }
body.sdce-login-page #page-login .forgot-password-message a, body.sdce-login-page #page-login .sign-up-message a { color: var(--sdce-brand-primary); font-weight: 700; }
body.sdce-login-page #page-login .page-card-actions { padding: 8px 0 0; }
body.sdce-login-page #page-login .btn { border-radius: 12px; font-family: var(--sdce-brand-font); font-size: 15px; font-weight: 800; min-height: 50px; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
body.sdce-login-page #page-login .btn:active { transform: scale(.985); }
body.sdce-login-page #page-login .social-logins { margin-top: 18px; }
body.sdce-login-page #page-login .login-divider { align-items: center; display: flex; gap: 12px; margin: 20px 0; }
body.sdce-login-page #page-login .login-divider::before, body.sdce-login-page #page-login .login-divider::after { background: color-mix(in srgb, var(--sdce-brand-muted) 25%, transparent); content: ""; height: 1px; width: 100%; }
body.sdce-login-page #page-login .btn-google { background: #fff !important; border: 1px solid #cbd5e1 !important; color: #172b4d !important; gap: 10px; min-height: 54px; }
body.sdce-login-page #page-login .btn-google:hover { background: #f8fafc !important; border-color: var(--sdce-brand-primary) !important; box-shadow: 0 7px 22px rgba(15, 23, 42, .09); }
body.sdce-login-page #page-login .btn-google img { height: 20px; width: 20px; }
body.sdce-login-page #page-login .btn-google svg { flex: 0 0 20px; height: 20px; width: 20px; }
body.sdce-login-page #page-login .btn.is-loading { opacity: .78; pointer-events: none; }
body.sdce-login-page.sdce-firebase-ready #page-login .page-card-body > form,
body.sdce-login-page.sdce-firebase-ready #page-login .forgot-password-message,
body.sdce-login-page.sdce-firebase-ready #page-login .sign-up-message,
body.sdce-login-page.sdce-firebase-ready #page-login .login-divider { display: none !important; }
body.sdce-login-page.sdce-firebase-ready #page-login .social-logins { margin-top: 0; }
.sdce-firebase-host { display: block !important; width: 100%; }
.sdce-google-note { color: var(--sdce-brand-muted); font-size: 13px; line-height: 1.7; margin: 18px 0 0; text-align: center; }
.sdce-google-error { color: #b42318; font-size: 13px; line-height: 1.7; margin: 12px 0 0; text-align: center; }
@media (max-width: 767px) {
  body.sdce-login-page .navbar { min-height: 68px; padding-inline: max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left)); }
  body.sdce-login-page .navbar-brand img { height: 32px; max-width: 135px; }
  body.sdce-login-page #page-login > .page-content-wrapper > main.container { display: block; margin-top: 0 !important; min-height: 0; padding-inline: max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-left)); }
  .sdce-login-intro { border-radius: 22px; margin-bottom: 14px; padding: 28px 24px; }
  .sdce-login-intro h1 { font-size: 30px; margin: 12px 0; }
  .sdce-login-intro > div > p { font-size: 16px; line-height: 1.75; }
  .sdce-login-benefits { gap: 10px; margin-top: 22px; }
  .sdce-login-benefits li { font-size: 14px; }
  .sdce-login-benefits svg { border-radius: 9px; flex-basis: 36px; height: 36px; padding: 8px; width: 36px; }
  .sdce-login-trust { margin-top: 24px; }
  body.sdce-login-page #page-login .page_content { border-radius: 22px; padding: 30px 22px max(30px, env(safe-area-inset-bottom)); }
  body.sdce-login-page #page-login .page-card-head h4 { font-size: 21px; }
}
@media (max-width: 374px) {
  .sdce-login-intro { padding: 24px 20px; }
  .sdce-login-intro h1 { font-size: 27px; }
  body.sdce-login-page #page-login .page_content { padding-inline: 18px; }
  .sdce-login-language { min-width: 76px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sdce-login-language, body.sdce-login-page #page-login .btn { transition: none; }
}