/* =========================================================
   Al-Resala Forms
   Global Design System
   ========================================================= */

:root {
    /* Brand */
    --rf-green-900: #075b3a;
    --rf-green-800: #08734a;
    --rf-green-700: #0b8755;
    --rf-green-600: #159766;
    --rf-green-100: #e8f6ef;
    --rf-green-50: #f3fbf7;

    --rf-gold-700: #b98200;
    --rf-gold-600: #d39b08;
    --rf-gold-500: #e3ae25;
    --rf-gold-100: #fff5d8;

    /* Neutral */
    --rf-white: #ffffff;
    --rf-bg: #f4f7f9;
    --rf-bg-soft: #eef3f5;
    --rf-surface: #ffffff;

    --rf-text: #17252b;
    --rf-text-soft: #5f6d73;
    --rf-text-muted: #879399;

    --rf-border: #dfe7e9;
    --rf-border-soft: #edf1f2;

    /* Status */
    --rf-success: #138a59;
    --rf-success-bg: #e8f7ef;

    --rf-danger: #c0392b;
    --rf-danger-bg: #fff0ee;

    --rf-warning: #a96e00;
    --rf-warning-bg: #fff6df;

    --rf-info: #2474a8;
    --rf-info-bg: #edf6fc;

    /* Shadows */
    --rf-shadow-sm:
        0 3px 12px rgba(26, 45, 54, 0.06);

    --rf-shadow:
        0 12px 35px rgba(26, 45, 54, 0.09);

    --rf-shadow-lg:
        0 22px 60px rgba(26, 45, 54, 0.13);

    /* Radius */
    --rf-radius-sm: 8px;
    --rf-radius: 14px;
    --rf-radius-lg: 22px;
    --rf-radius-xl: 30px;

    /* Layout */
    --rf-content-width: 1180px;

    /* Typography */
    --rf-font:
        "Cairo",
        "Tahoma",
        "Arial",
        sans-serif;

    /* Motion */
    --rf-transition:
        180ms ease;
}


/* =========================================================
   Reset
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: var(--rf-font);
    font-size: 15px;
    line-height: 1.7;

    color: var(--rf-text);
    background: var(--rf-bg);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   Authentication
   ========================================================= */

.rf-auth-page {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding:
        clamp(20px, 4vw, 50px);

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(21, 151, 102, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(227, 174, 37, 0.10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #f7fafb 0%,
            #eef4f2 50%,
            #f7f8f6 100%
        );
}


/*
 * Decorative Islamic-inspired geometry.
 * Subtle enough not to compete with the interface.
 */

.rf-auth-page::before,
.rf-auth-page::after {
    content: "";
    position: fixed;

    width: clamp(180px, 25vw, 360px);
    aspect-ratio: 1;

    border: 1px solid rgba(11, 135, 85, 0.08);

    pointer-events: none;
}

.rf-auth-page::before {
    top: -12%;
    right: -8%;

    transform: rotate(45deg);

    border-radius: 32px;
}

.rf-auth-page::after {
    bottom: -14%;
    left: -9%;

    transform: rotate(45deg);

    border-radius: 32px;

    border-color:
        rgba(211, 155, 8, 0.08);
}


/* =========================================================
   Login Wrapper
   ========================================================= */

.rf-auth-wrapper {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 480px;

    margin: auto;
}


/* =========================================================
   Login Card
   ========================================================= */

.rf-login-card {
    width: 100%;

    padding:
        clamp(28px, 5vw, 48px);

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid rgba(255, 255, 255, 0.8);

    border-radius: var(--rf-radius-xl);

    box-shadow: var(--rf-shadow-lg);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   Brand
   ========================================================= */

.rf-brand {
    text-align: center;

    margin-bottom: 32px;
}

.rf-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(100px, 22vw, 135px);
    height: clamp(100px, 22vw, 135px);

    margin:
        0 auto 18px;

    padding: 10px;

    background:
        linear-gradient(
            145deg,
            var(--rf-green-50),
            #ffffff
        );

    border:
        1px solid var(--rf-border);

    border-radius: 50%;

    box-shadow:
        0 10px 30px rgba(7, 91, 58, 0.08);
}

.rf-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.rf-brand h1 {
    margin: 0;

    color: var(--rf-green-900);

    font-size:
        clamp(22px, 4vw, 29px);

    font-weight: 800;

    line-height: 1.35;
}

.rf-brand-subtitle {
    margin:
        8px 0 0;

    color: var(--rf-text-soft);

    font-size:
        clamp(12px, 2vw, 14px);

    font-weight: 500;
}


/* =========================================================
   Form
   ========================================================= */

.rf-login-form {
    display: flex;
    flex-direction: column;

    gap: 21px;
}

.rf-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.rf-field label {
    color: var(--rf-text);

    font-size: 14px;
    font-weight: 700;
}

.rf-input-wrap {
    position: relative;

    display: flex;
    align-items: center;
}

.rf-input-wrap input {
    width: 100%;
    min-height: 54px;

    padding:
        0 48px 0 16px;

    color: var(--rf-text);

    background:
        #fbfcfc;

    border:
        1px solid var(--rf-border);

    border-radius:
        var(--rf-radius);

    outline: none;

    transition:
        border-color var(--rf-transition),
        box-shadow var(--rf-transition),
        background var(--rf-transition);
}

.rf-input-wrap input::placeholder {
    color: var(--rf-text-muted);
}

.rf-input-wrap input:hover {
    border-color:
        #cbd8db;
}

.rf-input-wrap input:focus {
    background:
        var(--rf-white);

    border-color:
        var(--rf-green-600);

    box-shadow:
        0 0 0 4px rgba(21, 151, 102, 0.11);
}

.rf-input-icon {
    position: absolute;

    right: 17px;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    color:
        var(--rf-green-700);

    font-size: 13px;

    pointer-events: none;
}

.rf-password-toggle {
    position: absolute;

    left: 9px;

    z-index: 2;

    padding:
        5px 8px;

    color:
        var(--rf-green-700);

    background:
        transparent;

    border: 0;

    border-radius: 6px;

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--rf-transition),
        color var(--rf-transition);
}

.rf-password-toggle:hover {
    background:
        var(--rf-green-100);

    color:
        var(--rf-green-900);
}


/* =========================================================
   Login Button
   ========================================================= */

.rf-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    min-height: 55px;

    margin-top: 5px;

    padding:
        10px 20px;

    color: var(--rf-white);

    background:
        linear-gradient(
            135deg,
            var(--rf-green-800),
            var(--rf-green-600)
        );

    border: 0;
    border-radius: var(--rf-radius);

    box-shadow:
        0 9px 22px rgba(7, 115, 74, 0.20);

    font-weight: 700;
    font-size: 15px;

    transition:
        transform var(--rf-transition),
        box-shadow var(--rf-transition),
        filter var(--rf-transition);
}

.rf-login-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 28px rgba(7, 115, 74, 0.26);

    filter: brightness(1.03);
}

.rf-login-button:active {
    transform: translateY(0);
}

.rf-login-button:focus-visible {
    outline:
        3px solid rgba(21, 151, 102, 0.25);

    outline-offset: 3px;
}


/* =========================================================
   Alerts
   ========================================================= */

.rf-alert {
    margin-bottom: 20px;

    padding:
        12px 15px;

    border-radius:
        var(--rf-radius-sm);

    font-size: 13px;
    font-weight: 600;
}

.rf-alert-error {
    color: var(--rf-danger);

    background:
        var(--rf-danger-bg);

    border:
        1px solid rgba(192, 57, 43, 0.14);
}

.rf-alert-success {
    color: var(--rf-success);

    background:
        var(--rf-success-bg);

    border:
        1px solid rgba(19, 138, 89, 0.14);
}

.rf-alert-warning {
    color: var(--rf-warning);

    background:
        var(--rf-warning-bg);

    border:
        1px solid rgba(169, 110, 0, 0.14);
}

.rf-alert-info {
    color: var(--rf-info);

    background:
        var(--rf-info-bg);

    border:
        1px solid rgba(36, 116, 168, 0.14);
}


/* =========================================================
   Login Footer
   ========================================================= */

.rf-login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 30px;

    color:
        var(--rf-text-muted);

    font-size: 12px;
    font-weight: 600;
}

.rf-decoration {
    flex: 1;

    max-width: 65px;

    height: 1px;

    background:
        linear-gradient(
            to left,
            transparent,
            var(--rf-border)
        );
}

.rf-decoration:last-child {
    background:
        linear-gradient(
            to right,
            transparent,
            var(--rf-border)
        );
}


/* =========================================================
   General Cards
   ========================================================= */

.rf-card {
    background:
        var(--rf-surface);

    border:
        1px solid var(--rf-border);

    border-radius:
        var(--rf-radius-lg);

    box-shadow:
        var(--rf-shadow-sm);
}


/* =========================================================
   General Buttons
   ========================================================= */

.rf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;

    padding:
        9px 18px;

    border: 1px solid transparent;
    border-radius:
        var(--rf-radius-sm);

    font-weight: 700;

    transition:
        transform var(--rf-transition),
        box-shadow var(--rf-transition),
        background var(--rf-transition);
}

.rf-button:hover {
    transform: translateY(-1px);
}

.rf-button-primary {
    color: var(--rf-white);

    background:
        var(--rf-green-700);

    box-shadow:
        0 6px 15px rgba(11, 135, 85, 0.16);
}

.rf-button-secondary {
    color:
        var(--rf-green-800);

    background:
        var(--rf-green-100);

    border-color:
        rgba(11, 135, 85, 0.12);
}

.rf-button-gold {
    color:
        #5d4200;

    background:
        var(--rf-gold-100);

    border-color:
        rgba(211, 155, 8, 0.15);
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 640px) {

    .rf-auth-page {
        align-items: flex-start;

        padding:
            20px 14px;
    }

    .rf-auth-wrapper {
        margin:
            5vh auto 20px;
    }

    .rf-login-card {
        padding:
            27px 20px;

        border-radius:
            22px;
    }

    .rf-brand {
        margin-bottom: 27px;
    }

    .rf-login-form {
        gap: 18px;
    }

    .rf-input-wrap input {
        min-height: 52px;
    }

    .rf-login-button {
        min-height: 53px;
    }
}


@media (max-width: 380px) {

    body {
        font-size: 14px;
    }

    .rf-auth-page {
        padding:
            14px 10px;
    }

    .rf-login-card {
        padding:
            24px 16px;
    }

    .rf-logo-wrap {
        width: 92px;
        height: 92px;
    }

    .rf-brand h1 {
        font-size: 21px;
    }

    .rf-brand-subtitle {
        font-size: 12px;
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }
}