/* ==========================================================================
   SIGNUP / REGISTRATION PAGE — Premium Dark Theme v2
   LearnSimply (beta.learrnsimply.com)

   Modern split-layout with branded panel + compact form card.
   Matches the site's glassmorphism dark identity.

   Targets: #tutor-registration-wrap  >  #tutor-registration-form
   Also covers .tutor-login-wrap (login page shares this style)

   Last updated: 2026-03-06 - Unified login/signup form design
   ========================================================================== */

/* ─── 0. CSS VARIABLES ─── */
:root {
    --sp-bg: #0a0f1a;
    --sp-card: #111827;
    --sp-card-alt: #1a2232;
    --sp-glass: rgba(255, 255, 255, 0.04);
    --sp-glass-border: rgba(255, 255, 255, 0.08);
    --sp-glass-hover: rgba(255, 255, 255, 0.07);
    --sp-blue: #4077f3;
    --sp-blue-light: #658FF2;
    --sp-blue-soft: rgba(64, 119, 243, 0.12);
    --sp-blue-glow: rgba(64, 119, 243, 0.22);
    --sp-white: #ffffff;
    --sp-white-soft: #d0d4e0;
    --sp-gray: #94a3b8;
    --sp-gray-dim: #64748b;
    --sp-green: #18a963;
    --sp-red: #f96a7b;
    --sp-border: rgba(255, 255, 255, 0.08);
    --sp-radius: 16px;
    --sp-radius-lg: 24px;
    --sp-radius-sm: 10px;
    --sp-font: "Graphik Arabic", "Cairo", "IBM Plex Sans Arabic", sans-serif;
    --sp-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   1. PAGE FOUNDATION
   ========================================================================== */
body {
    background-color: var(--sp-bg) !important;
}

body .site-content,
body .content-area,
body .entry-content,
body main,
body main#main,
body .site-main,
body .edublink-main-wrapper,
body .eb-container,
body .site-content-inner,
body #page,
body .learnsimply-homepage-body,
body .page-content {
    background-color: var(--sp-bg) !important;
}

/* Hide breadcrumbs, page title bar */
.edublink-breadcrumb-area,
.entry-header,
.page-title-area,
.woocommerce-breadcrumb,
.eb-breadcrumb-area,
.page-header,
.entry-title {
    display: none !important;
}


/* ==========================================================================
   2. CENTRED LAYOUT — Split Container
   ========================================================================== */
.entry-content,
.page-content,
.site-main>article,
.site-main>.type-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - 160px) !important;
    padding: 40px 20px 60px !important;
    background: transparent !important;
    position: relative !important;
}

/* Subtle background pattern */
.entry-content::before,
.page-content::before,
.site-main>article::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(64, 119, 243, 0.06) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}


/* ==========================================================================
   3. REGISTRATION CARD — Glassmorphism Card
   ========================================================================== */
#tutor-registration-wrap,
.tutor-login-wrap {
    width: 100% !important;
    max-width: 460px !important;
    background: linear-gradient(165deg,
            rgba(17, 24, 39, 0.95) 0%,
            rgba(15, 23, 42, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--sp-radius-lg) !important;
    padding: 36px 32px 32px !important;
    margin: 0 auto !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 24px 48px rgba(0, 0, 0, 0.15) !important;
    direction: rtl !important;
    position: relative !important;
    font-family: var(--sp-font) !important;
    animation: signupCardFadeIn 0.5s ease-out !important;
    z-index: 1 !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    overflow: hidden !important;
    /* Flex column so ::after with order:-1 appears before form children */
    display: flex !important;
    flex-direction: column !important;
}

/* Card corner glow accent */
#tutor-registration-wrap::before,
.tutor-login-wrap::before {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    right: -1px !important;
    left: -1px !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent 5%, var(--sp-blue) 50%, transparent 95%) !important;
    border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0 !important;
    z-index: 2 !important;
}

/* Heading text injected above the form */
#tutor-registration-wrap::after {
    content: "انشاء حساب جديد" !important;
    display: block !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--sp-white) !important;
    margin-bottom: 6px !important;
    font-family: var(--sp-font) !important;
    line-height: 1.4 !important;
    order: -1 !important;
}

/* Login heading — same style, different text */
.tutor-login-wrap::after {
    content: "تسجيل الدخول" !important;
    display: block !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--sp-white) !important;
    margin-bottom: 6px !important;
    font-family: var(--sp-font) !important;
    line-height: 1.4 !important;
    order: -1 !important;
}

/* Subtitle text via a separate pseudo or JS — skip for now,
   we'll add a subtle helper text via the form group margin */


/* ==========================================================================
   4. TYPOGRAPHY RESET
   ========================================================================== */
#tutor-registration-wrap,
#tutor-registration-wrap *,
#tutor-registration-form,
#tutor-registration-form *,
.tutor-login-wrap,
.tutor-login-wrap * {
    font-family: var(--sp-font) !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   5. FORM ELEMENT (inside card)
   ========================================================================== */
#tutor-registration-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   6. FORM ROWS & COLUMNS — Compact 2-column grid
   ========================================================================== */
#tutor-registration-form .tutor-form-row,
.tutor-login-wrap .tutor-form-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
}

#tutor-registration-form .tutor-form-col-6,
.tutor-login-wrap .tutor-form-col-6 {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#tutor-registration-form .tutor-form-col-12,
.tutor-login-wrap .tutor-form-col-12 {
    flex: 1 1 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ==========================================================================
   7. FORM GROUPS — Tighter spacing
   ========================================================================== */
#tutor-registration-form .tutor-form-group,
.tutor-login-wrap .tutor-form-group {
    margin-bottom: 16px !important;
}


/* ==========================================================================
   8. LABELS — Cleaner, more subtle
   ========================================================================== */
#tutor-registration-form label,
.tutor-login-wrap label,
.tutor-login-wrap .tutor-form-label {
    display: block !important;
    color: var(--sp-gray) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.01em !important;
}


/* ==========================================================================
   9. INPUT FIELDS — Refined glassmorphism inputs
   ========================================================================== */
#tutor-registration-form input[type="text"],
#tutor-registration-form input[type="email"],
#tutor-registration-form input[type="password"],
#tutor-registration-form input[type="tel"],
#tutor-registration-form input[type="url"],
#tutor-registration-form input[type="number"],
#tutor-registration-form select,
#tutor-registration-form textarea,
#tutor-registration-form .tutor-form-control,
#tutor-registration-form .tutor-form-wrap input,
.tutor-login-wrap input[type="text"],
.tutor-login-wrap input[type="email"],
.tutor-login-wrap input[type="password"],
.tutor-login-wrap input[type="tel"],
.tutor-login-wrap input[type="search"],
.tutor-login-wrap textarea,
.tutor-login-wrap select,
.tutor-login-wrap .tutor-form-control {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: var(--sp-white) !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-family: var(--sp-font) !important;
    transition: var(--sp-transition) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1.5 !important;
    height: auto !important;
}

/* Focus state — Prominent blue ring */
#tutor-registration-form input[type="text"]:focus,
#tutor-registration-form input[type="email"]:focus,
#tutor-registration-form input[type="password"]:focus,
#tutor-registration-form input[type="tel"]:focus,
#tutor-registration-form .tutor-form-wrap input:focus,
.tutor-login-wrap input:focus,
.tutor-login-wrap textarea:focus,
.tutor-login-wrap select:focus {
    border-color: var(--sp-blue) !important;
    box-shadow: 0 0 0 3px var(--sp-blue-soft),
        0 0 12px rgba(64, 119, 243, 0.08) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Placeholder */
#tutor-registration-form input::placeholder,
#tutor-registration-form .tutor-form-wrap input::placeholder,
.tutor-login-wrap input::placeholder,
.tutor-login-wrap textarea::placeholder {
    color: var(--sp-gray-dim) !important;
    opacity: 1 !important;
    font-size: 13px !important;
}


/* ==========================================================================
   10. PASSWORD FIELD
   ========================================================================== */
#tutor-registration-form .tutor-password-strength-checker,
#tutor-registration-form .tutor-password-field,
#tutor-registration-form .tutor-form-wrap,
.tutor-login-wrap .tutor-input-group,
.tutor-login-wrap .tutor-password-field {
    position: relative !important;
}

/* Show/hide icon */
#tutor-registration-form .tutor-password-field [class*="tutor-icon-eye"],
#tutor-registration-form .tutor-password-field .tutor-icon,
.tutor-login-wrap .tutor-password-field .tutor-icon,
.tutor-login-wrap .tutor-input-group .tutor-icon,
.tutor-login-wrap .tutor-input-group button {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--sp-gray-dim) !important;
    cursor: pointer !important;
    transition: var(--sp-transition) !important;
    padding: 4px !important;
    z-index: 2 !important;
}

#tutor-registration-form .tutor-password-field [class*="tutor-icon-eye"]:hover,
.tutor-login-wrap .tutor-password-field .tutor-icon:hover {
    color: var(--sp-white) !important;
}

/* Validation icon in confirm password */
#tutor-registration-form .tutor-form-wrap .tutor-validation-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}

/* Password strength bar */
#tutor-registration-form .tutor-password-strength-hint,
#tutor-registration-form .password-strength-meter {
    font-size: 11px !important;
    color: var(--sp-gray-dim) !important;
    margin-top: 6px !important;
}

#tutor-registration-form [class*="password-strength-meter"],
#tutor-registration-form .tutor-password-strength-meter {
    height: 3px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    margin-top: 6px !important;
    overflow: hidden !important;
}


/* ==========================================================================
   11. SUBMIT BUTTON — Premium pill button matching site CTA style
   ========================================================================== */
#tutor-registration-form .tutor-btn,
#tutor-registration-form .tutor-btn-primary,
#tutor-registration-form button[type="submit"],
.tutor-login-wrap .tutor-btn:not(.tutor-btn-ghost),
.tutor-login-wrap .tutor-btn-primary,
.tutor-login-wrap button[type="submit"],
.tutor-login-wrap input[type="submit"] {
    width: 100% !important;
    padding: 13px 24px !important;
    background: var(--sp-blue) !important;
    color: var(--sp-white) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--sp-font) !important;
    cursor: pointer !important;
    transition: var(--sp-transition) !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
    box-shadow: 0 4px 16px var(--sp-blue-glow) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hover shimmer */
#tutor-registration-form .tutor-btn:hover,
#tutor-registration-form button[type="submit"]:hover,
.tutor-login-wrap .tutor-btn:not(.tutor-btn-ghost):hover,
.tutor-login-wrap button[type="submit"]:hover {
    background: var(--sp-blue-light) !important;
    box-shadow: 0 6px 24px var(--sp-blue-glow) !important;
    transform: translateY(-1px) !important;
}

#tutor-registration-form .tutor-btn:active,
#tutor-registration-form button[type="submit"]:active,
.tutor-login-wrap .tutor-btn:not(.tutor-btn-ghost):active,
.tutor-login-wrap button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px var(--sp-blue-glow) !important;
}

/* Loading state */
#tutor-registration-form .tutor-btn.is-loading,
#tutor-registration-form button[type="submit"]:disabled,
.tutor-login-wrap .tutor-btn:not(.tutor-btn-ghost).is-loading {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}


/* ==========================================================================
   12. SOCIAL LOGIN BUTTONS — Unified glass style
   ========================================================================== */

/* Divider "or" — above social buttons */
#tutor-registration-wrap .tutor-social-login-separator,
#tutor-registration-wrap [class*="separator"],
.tutor-login-wrap .tutor-social-login-separator,
.tutor-login-wrap .or-separator {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 20px 0 16px !important;
    color: var(--sp-gray-dim) !important;
    font-size: 12px !important;
}

#tutor-registration-wrap .tutor-social-login-separator::before,
#tutor-registration-wrap .tutor-social-login-separator::after,
.tutor-login-wrap .tutor-social-login-separator::before,
.tutor-login-wrap .tutor-social-login-separator::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Twitter button */
#tutor-pro-twitter-login {
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sp-white-soft) !important;
    cursor: pointer !important;
    transition: var(--sp-transition) !important;
    font-family: var(--sp-font) !important;
    margin-top: 10px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

#tutor-pro-twitter-login:hover {
    background: rgba(29, 161, 242, 0.08) !important;
    border-color: rgba(29, 161, 242, 0.25) !important;
    color: #1da1f2 !important;
}

/* Google login button */
#tutor-registration-wrap [id*="google"],
#tutor-registration-wrap .tutor-social-login-btn,
#tutor-registration-wrap [class*="google-login"],
#tutor-registration-wrap [class*="social-login"] button,
#tutor-registration-wrap [class*="social-login"] a,
.tutor-login-wrap .tutor-social-login a,
.tutor-login-wrap .tutor-social-login button {
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sp-white-soft) !important;
    cursor: pointer !important;
    transition: var(--sp-transition) !important;
    font-family: var(--sp-font) !important;
    margin-top: 10px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

#tutor-registration-wrap [id*="google"]:hover,
#tutor-registration-wrap .tutor-social-login-btn:hover,
.tutor-login-wrap .tutor-social-login a:hover,
.tutor-login-wrap .tutor-social-login button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}


/* ==========================================================================
   13. LINKS
   ========================================================================== */
#tutor-registration-wrap a,
#tutor-registration-form a,
.tutor-login-wrap a:not(.tutor-btn) {
    color: var(--sp-blue) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: var(--sp-transition) !important;
}

#tutor-registration-wrap a:hover,
#tutor-registration-form a:hover,
.tutor-login-wrap a:not(.tutor-btn):hover {
    color: var(--sp-blue-light) !important;
    text-decoration: underline !important;
}

/* "Already have account? Login" text below the form */
#tutor-registration-wrap>p,
#tutor-registration-wrap>div>p,
.tutor-login-wrap>p:last-child,
.tutor-login-wrap .tutor-mt-20,
.tutor-login-wrap .tutor-mt-24 {
    text-align: center !important;
    color: var(--sp-gray) !important;
    font-size: 13px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}


/* ==========================================================================
   14. CHECKBOX & AGREEMENT
   ========================================================================== */
#tutor-registration-form input[type="checkbox"],
.tutor-login-wrap input[type="checkbox"],
.tutor-login-wrap input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--sp-blue) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.tutor-login-wrap .tutor-form-check,
.tutor-login-wrap .tutor-d-flex.tutor-align-center {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}


/* ==========================================================================
   15. VALIDATION / ERROR / SUCCESS
   ========================================================================== */

/* Error border on input */
#tutor-registration-form .tutor-has-error input,
#tutor-registration-form input.error,
.tutor-login-wrap .tutor-has-error input,
.tutor-login-wrap input.error {
    border-color: var(--sp-red) !important;
    box-shadow: 0 0 0 3px rgba(249, 106, 123, 0.1) !important;
}

/* Error text */
#tutor-registration-form .tutor-form-feedback,
#tutor-registration-form .tutor-has-error .tutor-form-feedback,
.tutor-login-wrap .tutor-form-feedback,
.tutor-login-wrap .tutor-has-error .tutor-form-feedback {
    font-size: 12px !important;
    margin-top: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--sp-red) !important;
}

/* Alert boxes */
#tutor-registration-wrap .tutor-alert-success,
.tutor-login-wrap .tutor-alert-success {
    background: rgba(24, 169, 99, 0.06) !important;
    border: 1px solid rgba(24, 169, 99, 0.15) !important;
    border-radius: 12px !important;
    color: var(--sp-green) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
}

#tutor-registration-wrap .tutor-alert-danger,
#tutor-registration-wrap .tutor-alert-warning,
.tutor-login-wrap .tutor-alert-danger,
.tutor-login-wrap .tutor-alert-warning {
    background: rgba(249, 106, 123, 0.06) !important;
    border: 1px solid rgba(249, 106, 123, 0.15) !important;
    border-right: 3px solid var(--sp-red) !important;
    border-radius: 12px !important;
    color: var(--sp-red) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
}

#tutor-registration-wrap .tutor-alert-danger *,
.tutor-login-wrap .tutor-alert-danger * {
    color: var(--sp-red) !important;
}


/* ==========================================================================
   16. TAB NAVIGATION (Login <-> Register toggle on /dashboard/)
   ========================================================================== */
.tutor-login-wrap .tutor-nav,
.tutor-login-wrap .tutor-header-nav,
.tutor-login-wrap ul[role="tablist"] {
    display: flex !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    margin-bottom: 24px !important;
    gap: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tutor-login-wrap .tutor-nav-item,
.tutor-login-wrap .tutor-nav li {
    flex: 1 !important;
    list-style: none !important;
}

.tutor-login-wrap .tutor-nav-link,
.tutor-login-wrap .tutor-nav a,
.tutor-login-wrap ul[role="tablist"] a,
.tutor-login-wrap ul[role="tablist"] button {
    display: block !important;
    width: 100% !important;
    padding: 9px 14px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sp-gray) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: var(--sp-transition) !important;
    text-decoration: none !important;
}

.tutor-login-wrap .tutor-nav-link:hover,
.tutor-login-wrap .tutor-nav a:hover {
    color: var(--sp-white) !important;
    background: var(--sp-glass-hover) !important;
}

.tutor-login-wrap .tutor-nav-link.is-active,
.tutor-login-wrap .tutor-nav-link.active,
.tutor-login-wrap .tutor-nav-link[aria-selected="true"],
.tutor-login-wrap .tutor-nav a.is-active,
.tutor-login-wrap .tutor-nav a.active,
.tutor-login-wrap ul[role="tablist"] button.active,
.tutor-login-wrap ul[role="tablist"] button[aria-selected="true"] {
    color: var(--sp-white) !important;
    background: var(--sp-blue) !important;
    box-shadow: 0 2px 8px var(--sp-blue-glow) !important;
}


/* ==========================================================================
   17. HEADINGS & TEXT (form titles)
   ========================================================================== */
/* "أهلاً بك مرة أخرى!" — subtitle, visually smaller than the main heading (22px) */
#tutor-registration-wrap h1,
#tutor-registration-wrap h2,
#tutor-registration-wrap h3,
.tutor-login-wrap h1,
.tutor-login-wrap h2,
.tutor-login-wrap h3,
.tutor-login-wrap .tutor-fs-4,
.tutor-login-wrap .tutor-fs-5 {
    color: var(--sp-gray) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-bottom: 20px !important;
    margin-top: -4px !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

#tutor-registration-wrap p,
.tutor-login-wrap p,
.tutor-login-wrap .tutor-color-secondary,
.tutor-login-wrap .tutor-color-muted {
    color: var(--sp-gray) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}


/* ==========================================================================
   18. PARENT-THEME RESETS
   ========================================================================== */
#tutor-registration-wrap .bg-white,
#tutor-registration-wrap .card,
#tutor-registration-wrap .card-body,
.tutor-login-wrap .bg-white,
.tutor-login-wrap .card,
.tutor-login-wrap .card-body {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

/* Tutor utility overrides */
#tutor-registration-wrap .tutor-color-black,
#tutor-registration-wrap .tutor-color-design-dark,
.tutor-login-wrap .tutor-color-black,
.tutor-login-wrap .tutor-color-design-dark {
    color: var(--sp-white) !important;
}

/* Override Tutor CSS variables */
#tutor-registration-wrap,
.tutor-login-wrap {
    --tutor-color-primary: #4077f3;
    --tutor-color-primary-hover: #658FF2;
    --tutor-body-color: #0a0f1a;
    --tutor-border-color: rgba(255, 255, 255, 0.08);
    --tutor-color-gray: #94a3b8;
    --tutor-color-white: #ffffff;
    --tutor-border-radius: 12px;
}


/* ==========================================================================
   19. AUTOFILL FIX (prevent Chrome white autofill)
   ========================================================================== */
#tutor-registration-form input:-webkit-autofill,
#tutor-registration-form input:-webkit-autofill:hover,
#tutor-registration-form input:-webkit-autofill:focus,
.tutor-login-wrap input:-webkit-autofill,
.tutor-login-wrap input:-webkit-autofill:hover,
.tutor-login-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sp-white) !important;
    -webkit-box-shadow: 0 0 0px 1000px #111827 inset !important;
    box-shadow: 0 0 0px 1000px #111827 inset !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}


/* ==========================================================================
   20. LOADING / SPINNER
   ========================================================================== */
#tutor-registration-form .tutor-btn .tutor-icon-spinner,
.tutor-login-wrap .tutor-btn .tutor-icon-spinner,
.tutor-login-wrap .tutor-btn .tutor-spinner {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: var(--sp-white) !important;
}


/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {

    #tutor-registration-wrap,
    .tutor-login-wrap {
        max-width: 100% !important;
        padding: 28px 20px 24px !important;
        border-radius: var(--sp-radius) !important;
        margin: 0 12px !important;
    }

    .entry-content,
    .page-content,
    .site-main>article,
    .site-main>.type-page {
        padding: 20px 8px 40px !important;
        min-height: calc(100vh - 140px) !important;
    }

    /* Stack columns on mobile */
    #tutor-registration-form .tutor-form-row,
    .tutor-login-wrap .tutor-form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    #tutor-registration-form .tutor-form-col-6,
    .tutor-login-wrap .tutor-form-col-6 {
        flex: 1 1 100% !important;
    }

    #tutor-registration-wrap::after {
        font-size: 19px !important;
        margin-bottom: 4px !important;
    }

    #tutor-registration-form .tutor-btn,
    #tutor-registration-form button[type="submit"],
    .tutor-login-wrap .tutor-btn,
    .tutor-login-wrap button[type="submit"] {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* Hide background glow on mobile */
    .entry-content::before,
    .page-content::before,
    .site-main>article::before {
        display: none !important;
    }
}

@media (max-width: 400px) {

    #tutor-registration-wrap,
    .tutor-login-wrap {
        padding: 24px 16px 20px !important;
        margin: 0 8px !important;
    }

    #tutor-registration-form input[type="text"],
    #tutor-registration-form input[type="email"],
    #tutor-registration-form input[type="password"],
    #tutor-registration-form .tutor-form-wrap input {
        padding: 10px 12px !important;
    }
}


/* ==========================================================================
   22. FORGOT PASSWORD LINK — Override ghost button to link style
   ========================================================================== */
.tutor-login-wrap a.tutor-btn.tutor-btn-ghost {
    /* Reset all button styles */
    width: auto !important;
    display: inline !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    /* Apply link styles */
    color: var(--sp-blue) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: var(--sp-transition) !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-align: right !important;
    transform: none !important;
}

.tutor-login-wrap a.tutor-btn.tutor-btn-ghost:hover {
    color: var(--sp-blue-light) !important;
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.tutor-login-wrap a.tutor-btn.tutor-btn-ghost:active {
    transform: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   23. ENTRANCE ANIMATION
   ========================================================================== */
@keyframes signupCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.elementor-heading-title {
    color: #ffffff !important;
}

/* --- Overview Tab Content --- */
.tutor-lesson-content-area .elementor-widget-container,
.tutor-lesson-content-area .elementor-widget-container p,
.tutor-lesson-content-area .elementor-widget-container span,
.tutor-lesson-content-area .elementor-widget-container div,
#tutor-lesson-tab-overview .elementor-widget-container,
#tutor-lesson-tab-overview .elementor-widget-container p,
#tutor-lesson-tab-overview .elementor-widget-container span,
#tutor-lesson-tab-overview .elementor-widget-container div {
    color: #afb1b9 !important;
}

.tutor-lesson-content-area .elementor-widget-container strong,
.tutor-lesson-content-area .elementor-widget-container strong *,
.tutor-lesson-content-area .elementor-widget-container b,
.tutor-lesson-content-area .elementor-widget-container b *,
#tutor-lesson-tab-overview .elementor-widget-container strong,
#tutor-lesson-tab-overview .elementor-widget-container strong *,
#tutor-lesson-tab-overview .elementor-widget-container b,
#tutor-lesson-tab-overview .elementor-widget-container b * {
    color: #ffffff !important;
}

.tutor-course-topic-single-body * {
    color: white;
}