/* Auth pages — FeesTracker light SaaS, match the user app */

html.qx-auth {
    color-scheme: light;
}

html.qx-auth,
body.qx-auth {
    background:
        radial-gradient(90% 55% at 100% -10%, rgba(52, 211, 153, 0.16) 0%, transparent 52%),
        radial-gradient(70% 45% at -8% 110%, rgba(22, 163, 74, 0.1) 0%, transparent 48%),
        #f6f7f9 !important;
    color: #363636 !important;
    font-family: Inter, "Plus Jakarta Sans", sans-serif !important;
    min-height: 100vh;
    min-height: 100dvh;
}

body.qx-auth {
    display: flex !important;
    align-items: center !important;
    position: relative;
    overflow-x: hidden;
    padding: 24px 16px !important;
    margin: 0;
}

body.qx-auth::before,
body.qx-auth::after {
    display: none !important;
    content: none !important;
}

body.qx-auth a {
    color: var(--green, #16a34a);
}

body.qx-auth .container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 480px;
    padding-left: 0;
    padding-right: 0;
}

body.qx-auth .login-box-premium,
body.qx-auth .register-box-premium,
body.qx-auth .verify-box-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 28px 22px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background:
        linear-gradient(118deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%),
        radial-gradient(120% 90% at 100% -18%, rgba(255, 255, 255, 0.3) 0%, transparent 44%),
        radial-gradient(70% 60% at -6% 112%, rgba(6, 78, 59, 0.5) 0%, transparent 54%),
        linear-gradient(152deg, #34d399 0%, var(--green, #16a34a) 42%, #047857 100%) !important;
    box-shadow: 0 12px 32px rgba(22, 163, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.qx-auth .register-box-premium {
    max-width: 480px !important;
}

body.qx-auth .login-box-premium:hover,
body.qx-auth .register-box-premium:hover,
body.qx-auth .verify-box-premium:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 12px 32px rgba(22, 163, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body.qx-auth .login-box-premium::before,
body.qx-auth .register-box-premium::before,
body.qx-auth .verify-box-premium::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    width: 170px;
    height: 170px;
    right: -40px;
    top: -54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
    z-index: 0;
}

body.qx-auth .login-box-premium::after,
body.qx-auth .register-box-premium::after,
body.qx-auth .verify-box-premium::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    width: 116px;
    height: 116px;
    right: -6px;
    top: -22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.24);
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

body.qx-auth .login-box-premium > *,
body.qx-auth .register-box-premium > *,
body.qx-auth .verify-box-premium > * {
    position: relative;
    z-index: 1;
}

body.qx-auth .login-box-premium a:has(.logo-img),
body.qx-auth .register-box-premium a:has(.logo-img),
body.qx-auth .verify-box-premium a:has(.logo-img) {
    display: inline-block;
    background: #ffffff;
    padding: 8px 14px;
    border-radius: 14px;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(6, 78, 59, 0.18);
}

body.qx-auth .logo-img {
    max-height: 32px !important;
    width: auto !important;
    filter: none !important;
}

body.qx-auth .auth-kicker,
body.qx-auth .text-muted-custom,
body.qx-auth .text-muted,
body.qx-auth .small {
    font-family: Inter, "Plus Jakarta Sans", sans-serif !important;
    font-size: .70rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

body.qx-auth h4,
body.qx-auth h5,
body.qx-auth .auth-title {
    font-family: Inter, "Plus Jakarta Sans", sans-serif !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0 !important;
}

body.qx-auth .auth-emphasis,
body.qx-auth .text-muted-custom strong,
body.qx-auth .text-muted strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

body.qx-auth .form-label-custom {
    display: block;
    font-family: Inter, "Plus Jakarta Sans", sans-serif !important;
    font-size: .70rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 7px !important;
}

body.qx-auth .input-group-custom {
    position: relative;
    margin-bottom: 1rem;
}

body.qx-auth .input-group-custom i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--green, #16a34a) !important;
    font-size: 1rem !important;
    z-index: 5;
    pointer-events: none;
}

body.qx-auth .form-control-premium,
body.qx-auth input.form-control-premium:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #363636 !important;
    -webkit-text-fill-color: #363636 !important;
    caret-color: #363636;
    border-radius: 12px !important;
    padding: 12px 14px 12px 44px !important;
    font-family: Inter, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.qx-auth .form-control-premium:focus,
body.qx-auth input.form-control-premium:not([type="checkbox"]):not([type="radio"]):focus {
    background: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28) !important;
    color: #363636 !important;
    -webkit-text-fill-color: #363636 !important;
    outline: none;
}

body.qx-auth .form-control-premium::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    font-weight: 500 !important;
}

body.qx-auth .form-control-premium:-webkit-autofill,
body.qx-auth .form-control-premium:-webkit-autofill:hover,
body.qx-auth .form-control-premium:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #363636 !important;
    caret-color: #363636;
    transition: background-color 9999s ease-out;
}

body.qx-auth .auth-otp-input,
body.qx-auth .form-control-premium.text-center {
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 1.45rem !important;
    letter-spacing: 0.35em;
    font-weight: 800 !important;
}

body.qx-auth .btn-purple-gradient {
    background: #ffffff !important;
    border: none !important;
    color: var(--green, #16a34a) !important;
    -webkit-text-fill-color: var(--green, #16a34a) !important;
    font-family: Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: .70rem !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 6px 14px rgba(6, 78, 59, 0.18) !important;
}

body.qx-auth .btn-purple-gradient:hover,
body.qx-auth .btn-purple-gradient:focus {
    transform: none !important;
    filter: brightness(0.98);
    background: #ffffff !important;
    color: var(--green, #16a34a) !important;
    -webkit-text-fill-color: var(--green, #16a34a) !important;
    box-shadow: 0 6px 14px rgba(6, 78, 59, 0.18) !important;
}

body.qx-auth .login-box-premium a,
body.qx-auth .register-box-premium a,
body.qx-auth .verify-box-premium a,
body.qx-auth .link-gold,
body.qx-auth .btn-link {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600 !important;
    font-size: .70rem !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

body.qx-auth .link-gold:hover,
body.qx-auth .btn-link:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none !important;
}

body.qx-auth .auth-alert,
body.qx-auth .alert {
    border-radius: 12px !important;
    font-size: .70rem !important;
    font-weight: 500 !important;
}

body.qx-auth .auth-alert-error,
body.qx-auth .alert-danger {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
}

body.qx-auth .auth-alert-ok,
body.qx-auth .alert-success {
    background: #ecfdf5 !important;
    border: 1px solid rgba(22, 163, 74, 0.2) !important;
    color: #047857 !important;
}

body.qx-auth .step-pills {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

body.qx-auth .step-pills span {
    font-family: Inter, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

body.qx-auth .step-pills span.active {
    color: var(--green, #16a34a) !important;
    background: #ffffff !important;
    border-color: transparent !important;
}

body.qx-auth .register-box-premium .row {
    --bs-gutter-x: 12px;
}

/* Independence Day — same deep-green wallet treatment */
body.qx-auth.qx-iday .login-box-premium,
body.qx-auth.qx-iday .register-box-premium,
body.qx-auth.qx-iday .verify-box-premium {
    background:
        radial-gradient(115% 85% at 0% 0%, rgba(255, 153, 51, 0.4) 0%, rgba(255, 153, 51, 0) 58%),
        linear-gradient(115deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 64%),
        linear-gradient(135deg, #0d4413 0%, #115c19 48%, #0a3a10 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body.qx-auth.qx-iday .login-box-premium::before,
body.qx-auth.qx-iday .register-box-premium::before,
body.qx-auth.qx-iday .verify-box-premium::before {
    width: 200px;
    height: 200px;
    right: -30%;
    top: -50%;
    background: radial-gradient(circle, rgba(255, 153, 51, 0.2) 0%, transparent 70%) !important;
}

body.qx-auth.qx-iday .login-box-premium::after,
body.qx-auth.qx-iday .register-box-premium::after,
body.qx-auth.qx-iday .verify-box-premium::after {
    top: 50%;
    right: 10px;
    bottom: auto;
    left: auto;
    width: 130px;
    height: 130px;
    transform: translateY(-50%);
    border: 2px solid rgba(255, 255, 255, 0.16);
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.16) 0deg,
        rgba(255, 255, 255, 0.16) 1.2deg,
        transparent 1.2deg,
        transparent 15deg
    ) !important;
    opacity: 0.5;
}