/* ============================================================
   Persian Healthcare Auth Templates — style.css
   RTL, mobile-first, medical aesthetic (Vazirmatn)
   ============================================================ */

:root {
    --brand-blue: #1877f2;
    --brand-blue-dark: #1d72fe;
    --brand-deep: #0b4ec9;
    --gradient-primary: linear-gradient(135deg, #2f8bff 0%, #1877f2 45%, #0b5fe0 100%);
    --gradient-header: linear-gradient(150deg, #4a9bff 0%, #1877f2 55%, #0d4fc4 100%);
    --text-dark: #1f2d3d;
    --text-muted: #8a94a6;
    --input-bg: #f5f8fd;
    --radius-card: 28px;
    --shadow-card: 0 24px 60px rgba(16, 66, 158, .18);
}

* {
    -webkit-tap-highlight-color: transparent;
}
/*.bottom-nav{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid #eef2f7;display:flex;justify-content:space-around;padding:9px 4px;z-index:10}
.bottom-nav a{flex:1;max-width:72px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#94a3b8;font-size:10px;font-weight:700;padding:5px 0;border-radius:12px}
.bottom-nav a.active{color:var(--hd-green)}
.bottom-nav .dot{width:5px;height:5px;border-radius:50%;background:currentColor;margin-top:1px}
*/
html {
    scroll-behavior: smooth;
}

body.auth-body {
    font-family: Vazirmatn, Tahoma, sans-serif;
    background: radial-gradient(900px 500px at 100% -10%, rgba(24, 119, 242, .12), transparent 60%), radial-gradient(800px 500px at 0% 110%, rgba(24, 119, 242, .10), transparent 60%), #eef4fd;
    color: var(--text-dark);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- Mobile frame / card ---------- */
.mobile-frame {
    max-width: 460px;
    padding: 0 .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline: auto;
}

.auth-card {
    background: #fff;
    border-radius: var(--radius-card);
    overflow: hidden;
    width: 100%;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255, 255, 255, .6);
}

@media (min-width: 576px) {
    .mobile-frame {
        padding: 2.5rem 1rem;
    }

    .auth-card {
        border-radius: 32px;
    }
}

/* ---------- Curved medical header ---------- */
.auth-header {
    position: relative;
    background: var(--gradient-header);
    color: #fff;
    text-align: center;
    padding: 2.4rem 1.5rem 2.8rem;
    overflow: hidden;
}

    .auth-header::before,
    .auth-header::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, .08);
    }

    .auth-header::before {
        width: 220px;
        height: 220px;
        top: -110px;
        inset-inline-start: -70px;
    }

    .auth-header::after {
        width: 160px;
        height: 160px;
        bottom: 10px;
        inset-inline-end: -60px;
        background: rgba(255, 255, 255, .10);
    }

.header-deco {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

    .header-deco.deco-1 {
        width: 90px;
        height: 90px;
        top: 18%;
        inset-inline-end: 12%;
    }

    .header-deco.deco-2 {
        width: 50px;
        height: 50px;
        bottom: 30%;
        inset-inline-start: 8%;
    }

.wave-bottom {
    position: absolute;
    bottom: -1px;
    inset-inline: 0;
    width: 100%;
    height: 46px;
}

.badge-shield {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 30px 30px 30px 8px;
    background: rgba(255, 255, 255, .16);
    border: 1.5px solid rgba(255, 255, 255, .45);
    box-shadow: 0 10px 26px rgba(6, 45, 110, .30);
    backdrop-filter: blur(4px);
    font-size: 2.1rem;
    color: #fff;
}

    .badge-shield .stetho-mini {
        position: absolute;
        bottom: -8px;
        inset-inline-end: -10px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        color: var(--brand-blue);
        font-size: .95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(6, 45, 110, .25);
    }

.auth-title {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 .35rem;
}

.auth-subtitle {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: .9rem;
    opacity: .92;
}

/* ---------- Form body ---------- */
.auth-body-form {
    padding: 1.6rem 1.4rem .6rem;
}

.form-label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: .45rem;
}

.input-group-icon {
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid #e4ecf8;
    background: var(--input-bg);
    transition: border-color .2s, box-shadow .2s;
}

    .input-group-icon:focus-within {
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 4px rgba(24, 119, 242, .12);
    }

    .input-group-icon .form-control {
        background: transparent;
        border: none;
        box-shadow: none !important;
        padding: .8rem .9rem;
        font-size: .92rem;
    }

        .input-group-icon .form-control::placeholder {
            color: #a8b3c5;
            font-size: .85rem;
        }

.icon-badge {
    background: transparent;
    border: none;
    color: var(--brand-blue);
    padding-inline-start: 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.toggle-password {
    background: transparent;
    border: none;
    color: #9aa7bb;
    padding-inline: 1rem;
}

    .toggle-password:hover, .toggle-password:focus {
        color: var(--brand-blue);
        box-shadow: none;
    }

/* Checkbox rows */
.options-row {
    gap: .5rem;
}

.form-check-input {
    border-color: #c6d4ea;
    width: 1.15em;
    height: 1.15em;
}

    .form-check-input:checked {
        background-color: var(--brand-blue);
        border-color: var(--brand-blue);
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 .2rem rgba(24, 119, 242, .18);
    }

.form-check-label {
    font-size: .85rem;
    color: #4a5568;
}

.forgot-link {
    color: var(--brand-blue) !important;
}

.terms-check .form-check-input {
    margin-top: .35em;
}

.terms-check .form-check-label {
    font-size: .88rem;
}

/* ---------- Buttons ---------- */
.btn-primary-gradient {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    padding: .85rem 1rem;
    box-shadow: 0 12px 26px rgba(24, 119, 242, .35);
    transition: transform .15s, box-shadow .2s, filter .2s;
}

    .btn-primary-gradient:hover, .btn-primary-gradient:focus {
        color: #fff;
        filter: brightness(1.06);
        transform: translateY(-1px);
        box-shadow: 0 16px 32px rgba(24, 119, 242, .42);
    }

    .btn-primary-gradient:active {
        transform: translateY(0);
    }

.btn-google {
    background: #fff;
    border: 1.5px solid #e2e9f5;
    color: #3c4a5f;
    font-weight: 700;
    font-size: .95rem;
    padding: .8rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

    .btn-google:hover, .btn-google:focus {
        background: #f6f9ff;
        border-color: var(--brand-blue);
        color: #3c4a5f;
        box-shadow: 0 8px 18px rgba(24, 119, 242, .12);
    }

    .btn-google .google-logo {
        flex: 0 0 auto;
    }

/* ---------- Divider ---------- */
.divider {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: .82rem;
}

    .divider::before,
    .divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e2e9f5;
    }

    .divider::before {
        margin-inline-end: .75rem;
    }

    .divider::after {
        margin-inline-start: .75rem;
    }

/* ---------- Footer links / heartbeat footer ---------- */
.footer-link {
    font-size: .88rem;
    color: #5b6779;
    margin-bottom: 0;
}

.auth-footer {
    text-align: center;
    padding: 1.1rem 1.5rem 1.4rem;
    color: var(--brand-blue);
    background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%);
}

    .auth-footer .pulse-line {
        width: 210px;
        max-width: 70%;
        height: 34px;
        color: var(--brand-blue);
        opacity: .85;
    }

    .auth-footer .tagline {
        margin: .3rem 0 0;
        font-size: .85rem;
        font-weight: 700;
        color: var(--brand-deep);
    }

/* ---------- Validation states ---------- */
.was-validated .form-control:invalid {
    border-inline-start: 3px solid #e0245e;
}

.was-validated .form-control:valid {
    border-inline-start: 3px solid #2fbf71;
}

/* ---------- Small screens tweak ---------- */
@media (max-width: 360px) {
    .auth-title {
        font-size: 1.3rem;
    }

    .badge-shield {
        width: 72px;
        height: 72px;
        font-size: 1.8rem;
    }

    .auth-body-form {
        padding: 1.3rem 1rem .5rem;
    }
}