@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-arabic-400-subset.woff2?v=1') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-arabic-700-subset.woff2?v=1') format('woff2');
}

:root {
    --primary: #1f6f78 !important;
    --primary-dark: #123f46 !important;
    --primary-light: #e6f5f5 !important;
    --dark-bg: #f4f8f8 !important;
    --glass: #ffffff !important;
    --glass-border: rgba(31, 111, 120, 0.12) !important;
    --gold-border: rgba(31, 111, 120, 0.18) !important;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
}

body,
button,
input,
select,
textarea {
    font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

body {
    background-color: #f4f8f8 !important;
    color: #16333a !important;
}

body::before {
    background:
        radial-gradient(circle at 14% 8%, rgba(47, 143, 131, 0.12), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(31, 111, 120, 0.12), transparent 30%),
        linear-gradient(180deg, #fbfdfd 0%, #eef7f6 100%) !important;
}

body::after {
    display: none !important;
}

.auth-wrapper,
.verify-card,
.form-container,
.auth-card,
.login-card,
.glass-card,
.form-card,
.card {
    max-width: min(420px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
}

.auth-wrapper {
    width: min(100%, 380px) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.auth-card,
.form-container,
.verify-card,
.login-card,
.glass-card,
.card {
    background: #ffffff !important;
    border-color: rgba(31, 111, 120, 0.14) !important;
    box-shadow: 0 18px 48px rgba(18, 78, 89, 0.12) !important;
}

.login-card,
.auth-card,
.form-container,
.verify-card {
    width: 100% !important;
    padding: clamp(24px, 6vw, 34px) clamp(18px, 5vw, 28px) !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.brand-icon,
.form-icon,
.verify-icon,
.input-icon {
    background: rgba(31, 111, 120, 0.08) !important;
    border-color: rgba(31, 111, 120, 0.16) !important;
    color: #1f6f78 !important;
    box-shadow: none !important;
}

.brand-name,
.auth-title,
.form-title,
.verify-title,
.card-title,
h1,
h2,
h3 {
    color: #12343b !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #12343b !important;
}

.auth-subtitle,
.form-subtitle,
.verify-subtitle,
.card-subtitle,
.form-label,
.remember-row label,
.divider,
p,
small,
label {
    color: rgba(22, 51, 58, 0.64) !important;
}

.form-input,
.otp-box,
input,
textarea,
select {
    background: #fff !important;
    color: #12343b !important;
    border-color: rgba(31, 111, 120, 0.14) !important;
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: rgba(22, 51, 58, 0.38) !important;
}

.form-input:focus,
.otp-box:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(31, 111, 120, 0.42) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(31, 111, 120, 0.08) !important;
}

.login-btn,
.register-btn,
.verify-btn,
.submit-btn,
button[type="submit"],
.btn-primary,
.btn-primary-gold {
    background: #1f6f78 !important;
    border-color: #1f6f78 !important;
    color: #fff !important;
    box-shadow: 0 14px 26px rgba(31, 111, 120, 0.2) !important;
}

.login-btn:hover,
.register-btn:hover,
.verify-btn:hover,
.submit-btn:hover,
button[type="submit"]:hover,
.btn-primary:hover,
.btn-primary-gold:hover {
    background: #123f46 !important;
    border-color: #123f46 !important;
}

a,
.resend-link,
.resend-btn,
.forgot-link,
.auth-link {
    color: #1f6f78 !important;
}

.login-card::before,
.brand-header::before,
.brand-header::after {
    background: linear-gradient(to bottom, rgba(31, 111, 120, 0.36), transparent) !important;
}

.divider div {
    background: rgba(31, 111, 120, 0.12) !important;
}

.google-btn,
.biometric-btn,
.whatsapp-btn,
.social-btn,
.quick-login-btn {
    background: #fff !important;
    border: 1px solid rgba(31, 111, 120, 0.14) !important;
    color: #12343b !important;
    box-shadow: 0 10px 24px rgba(18, 78, 89, 0.08) !important;
}

.modal,
.modal-content,
.secure-device-card,
.device-card {
    background: #fff !important;
    color: #12343b !important;
    border-color: rgba(31, 111, 120, 0.14) !important;
}

[style*="rgba(234,179,8"],
[style*="rgba(234, 179, 8"],
[style*="#eab308"],
[style*="#d4af37"],
[style*="#ca8a04"] {
    border-color: rgba(31, 111, 120, 0.18) !important;
    box-shadow: 0 12px 30px rgba(18, 78, 89, 0.08) !important;
}

[style*="background:rgba(234,179,8"],
[style*="background: rgba(234,179,8"],
[style*="background:rgba(234, 179, 8"],
[style*="background: rgba(234, 179, 8"],
[style*="background: linear-gradient(135deg, #eab308"],
[style*="background: linear-gradient(90deg, var(--primary)"] {
    background: rgba(31, 111, 120, 0.08) !important;
}

[style*="color:var(--primary)"],
[style*="color: var(--primary)"],
[style*="color:#eab308"],
[style*="color: #eab308"] {
    color: #1f6f78 !important;
}

@media (max-width: 640px) {
    body {
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-y: auto !important;
    }

    .auth-wrapper {
        width: calc(100vw - 72px) !important;
        max-width: 330px !important;
    }

    .login-card,
    .auth-card,
    .form-container,
    .verify-card {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}