/* =====================================================================
   auth-skin.css — flat Speedo skin for the standalone account pages
   (become-a-captain, become-a-provider, login, reset-password…).
   Include AFTER the page's own <style>, and render the page with the LIGHT theme
   (remove data-theme="dark" from <html>). Replaces the dark/purple-orb look.
   ===================================================================== */
html body { background: #f3f3f0 !important; color: #14161c; font-family: "Cairo", "Segoe UI", Tahoma, sans-serif; }
html body * { font-family: inherit; }
.pr-orb { display: none !important; }

.pr-card { background: #fff !important; border: 2px solid #14161c !important; border-radius: 28px !important; box-shadow: 6px 6px 0 #14161c !important; color: #14161c; max-width: 480px !important; }
.pr-mark { background: var(--sp-yellow, #38bdf8) !important; color: #14161c !important; border: 2px solid #14161c; border-radius: 18px !important; }
.pr-card h1 { color: #14161c !important; font-weight: 800 !important; }
.pr-card .pr-step-counter { display: table !important; margin: 0 auto 8px !important; color: var(--sp-yellow, #38bdf8) !important; background: #14161c; border-radius: 10px; padding: 3px 12px; font-size: 12.5px !important; }
.pr-card .pr-step-label { color: #4a4d5a !important; font-weight: 700; }

.pr-benefits { background: var(--sp-yellow-soft, #cfeffd) !important; border: 2px dashed var(--sp-yellow-line, #2888b3) !important; border-radius: 16px !important; }
.pr-benefits span { color: #14161c !important; font-weight: 800; font-size: 13.5px !important; }
.pr-benefits svg { color: #14161c !important; }

.pr-card .form-group label { color: #14161c !important; font-weight: 800; font-size: 14px; }
.pr-card .form-control { background: #fff !important; border: 2px solid #14161c !important; color: #14161c !important; border-radius: 14px !important; min-height: 52px; font-size: 16px; font-weight: 700; }
.pr-card .form-control:focus { box-shadow: 4px 4px 0 var(--sp-yellow, #38bdf8), 4px 4px 0 2px #14161c !important; outline: 0; }
.pr-card .form-control::placeholder { color: #8b8d97 !important; }
.pr-card .fg-icon { color: #14161c !important; }
.pr-card .fg-hint { color: #5d6272 !important; font-weight: 700; }
.pr-card .fg-hint.invalid { color: #b42323 !important; }
.pr-card .fg-check { color: #1f9d55 !important; }

.pr-error { color: #7f1d1d !important; background: #fde4e4 !important; border: 2px solid #7f1d1d !important; border-radius: 12px !important; font-weight: 800; }
.pr-card label[style*="cursor:pointer"] { color: #14161c !important; font-weight: 700; }
.pr-card label[style*="cursor:pointer"] a { color: #14161c !important; text-decoration: underline; text-decoration-color: var(--sp-yellow, #38bdf8); text-decoration-thickness: 3px; text-underline-offset: 4px; font-weight: 800; }
.pr-card input[type="checkbox"] { accent-color: #14161c; width: 20px !important; height: 20px !important; }

.pr-card .btn { border-radius: 14px !important; font-weight: 800; min-height: 54px; font-size: 16px; transition: transform .2s, box-shadow .2s; }
.pr-card .btn-primary { background: #14161c !important; color: var(--sp-yellow, #38bdf8) !important; border: 2px solid #14161c !important; box-shadow: none !important; }
.pr-card .btn-primary:hover:not(:disabled) { transform: translate(2px, -2px); box-shadow: -4px 4px 0 var(--sp-yellow, #38bdf8), -4px 4px 0 2px #14161c !important; }
.pr-card .btn-ghost { background: #fff !important; color: #14161c !important; border: 2px solid #14161c !important; }
.pr-card .btn:disabled { opacity: .5; }

.pr-footer-link { color: #4a4d5a !important; font-weight: 700; }
.pr-footer-link a { color: #14161c !important; font-weight: 800; text-decoration: underline; text-decoration-color: var(--sp-yellow, #38bdf8); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* provider: id-card upload tiles */
.pr-card .pr-upload, .pr-card [class*="upload"] { border: 2px dashed #14161c !important; background: #fff !important; border-radius: 16px !important; color: #14161c !important; }

@media (max-width: 520px) {
  html body { padding: 14px !important; align-items: flex-start !important; }
  .pr-card { border-radius: 22px !important; box-shadow: 4px 4px 0 #14161c !important; padding: 20px 16px !important; }
  .pr-card .form-control { font-size: 16px; }
}

/* ===================== login.php / reset-password.php (نفس الهوية المسطّحة) ===================== */
.login-page { background: #f3f3f0 !important; }
.login-showcase { background: var(--sp-yellow, #38bdf8) !important; color: #14161c !important; border-inline-start: 2px solid #14161c; }
.login-orb, .login-grid-overlay { display: none !important; }
.login-showcase *, .login-showcase h1, .login-showcase h2, .login-showcase p { color: #14161c !important; text-shadow: none !important; }
.login-showcase .brand { font-weight: 800; }
.login-showcase .lead { font-weight: 800; }
.login-feature-icon { background: #fff !important; border: 2px solid #14161c !important; border-radius: 14px !important; color: #14161c !important; }
.login-feature-icon svg { stroke: #14161c !important; }
.login-card, .login-panel .card { background: #fff; }
.login-card-mark { background: var(--sp-yellow, #38bdf8) !important; color: #14161c !important; border: 2px solid #14161c; border-radius: 18px !important; box-shadow: 3px 3px 0 #14161c; }
.login-card h1, .login-panel h1, .login-card h2 { color: #14161c !important; font-weight: 800 !important; }
.login-card .sub, .login-panel .sub { color: #4a4d5a !important; font-weight: 700; }
.login-method-tabs, .login-tab-pill { background: var(--sp-yellow-soft, #cfeffd) !important; border: 2px solid #14161c !important; border-radius: 14px !important; box-shadow: none !important; }
.login-method-tab { color: #14161c !important; font-weight: 800; }
.login-method-tab.active { color: #14161c !important; }
.login-tab-pill { background: var(--sp-yellow, #38bdf8) !important; }
.login-page .form-group label { color: #14161c !important; font-weight: 800; }
.login-page .form-control { background: #fff !important; border: 2px solid #14161c !important; color: #14161c !important; border-radius: 14px !important; min-height: 52px; box-shadow: none !important; }
.login-page .form-control:focus { box-shadow: 4px 4px 0 var(--sp-yellow, #38bdf8), 4px 4px 0 2px #14161c !important; outline: 0; }
.login-page .fg-icon, .login-page .pw-toggle-btn { color: #14161c !important; }
.login-page a { color: #14161c !important; font-weight: 800; text-decoration: underline; text-decoration-color: var(--sp-yellow, #38bdf8); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.login-page .btn { border-radius: 14px !important; font-weight: 800; min-height: 54px; box-shadow: none !important; }
.login-page .btn-primary { background: #14161c !important; color: var(--sp-yellow, #38bdf8) !important; border: 2px solid #14161c !important; }
.login-page .btn-primary:hover:not(:disabled) { transform: translate(2px, -2px); box-shadow: -4px 4px 0 var(--sp-yellow, #38bdf8), -4px 4px 0 2px #14161c !important; }
.login-page .btn-outline, .login-page .btn-ghost, .login-page .btn-secondary { background: #fff !important; color: #14161c !important; border: 2px solid #14161c !important; text-decoration: none; }
.login-page .theme-toggle { display: none !important; }
.login-remember-check { accent-color: #14161c; }
#gdprCookieBar { border-top: 2px solid #14161c !important; background: #fff !important; color: #14161c !important; font-weight: 700; }
#gdprCookieBar span { color: #14161c !important; }
#gdprAcceptBtn { background: #14161c !important; color: var(--sp-yellow, #38bdf8) !important; border: 2px solid #14161c !important; border-radius: 12px !important; font-weight: 800 !important; }
:root, [data-theme] { --primary: #14161c; --primary-hover: #000; --brand-gradient: var(--sp-yellow, #38bdf8); }
.theme-toggle, #themeToggle { display: none !important; }
.login-card p { color: #4a4d5a; font-weight: 700; }

/* reset-password.php */
.reset-page { background: #f3f3f0 !important; }
.reset-card { background: #fff !important; border: 2px solid #14161c !important; border-radius: 26px !important; box-shadow: 6px 6px 0 #14161c !important; }
.reset-card .mark { background: var(--sp-yellow, #38bdf8) !important; color: #14161c !important; border: 2px solid #14161c; border-radius: 16px !important; }
.reset-card h1 { color: #14161c !important; font-weight: 800 !important; }
.reset-card .sub { color: #4a4d5a !important; font-weight: 700; }
.reset-card .error, .reset-card [class*="msg"] { border-radius: 12px !important; font-weight: 800; }
.reset-card .form-group label { color: #14161c !important; font-weight: 800; }
.reset-card .form-control { background: #fff !important; border: 2px solid #14161c !important; border-radius: 14px !important; min-height: 52px; color: #14161c !important; box-shadow: none !important; }
.reset-card .form-control:focus { box-shadow: 4px 4px 0 var(--sp-yellow, #38bdf8), 4px 4px 0 2px #14161c !important; outline: 0; }
.reset-card .btn-primary { background: #14161c !important; color: var(--sp-yellow, #38bdf8) !important; border: 2px solid #14161c !important; border-radius: 14px !important; font-weight: 800; min-height: 54px; box-shadow: none !important; }
.reset-back, .reset-card a { color: #14161c !important; font-weight: 800; }
.reset-back { text-decoration: underline; text-decoration-color: var(--sp-yellow, #38bdf8); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* الموبايل: بطاقة الدخول كانت بعرض ثابت 380px فتخرج عن شاشات أصغر منه */
.login-card { width: 100% !important; max-width: 380px; box-sizing: border-box; }
.login-panel { min-width: 0; box-sizing: border-box; }
@media (max-width: 420px) { .login-card { padding-inline: 20px !important; } }