/* login-forgot-password.css
   Login-page "نسيت كلمة المرور" affordances:
   - the two forgot links (SANAD tab + residents tab)
   - the SANAD instructions modal
   - login-specific tweaks over the shared .fpr-modal styling
     (foreigner-password-reset.css carries the modal chrome itself).

   Palette is taken from the login layout banner (.modern-banner uses
   --primary-gradient = #2c3e50 -> #3498db in bundle-login.css) so these dialogs
   read as part of the same page rather than a bolted-on widget. The variables are
   declared locally instead of consumed from :root because foreigner-password-reset.css
   is also used on pages that do not define them. */
:root {
    --lfp-navy: #2c3e50;
    --lfp-blue: #3498db;
    --lfp-blue-dark: #2874a6;
    --lfp-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    --lfp-tint-bg: #eef5fb;
    --lfp-tint-border: #bcdcf2;
    --lfp-tint-text: #23516d;
}

/* ===== FORGOT LINKS ===== */
.lfp-link {
    display: block;
    text-align: center;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lfp-navy);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    /* Comfortable touch target on phones without pushing the tabs around. */
    padding: 0.45rem 0.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lfp-link:hover,
.lfp-link:focus {
    color: var(--lfp-blue-dark);
    text-decoration: underline;
}

.lfp-link i {
    margin-inline-end: 0.35rem;
    font-size: 0.8rem;
    color: var(--lfp-blue);
}

/* ===== MODAL CHROME (login copies only) =====
   .lfp-modal sits alongside .fpr-modal so the in-portal password-change screen,
   which shares foreigner-password-reset.css, keeps its own look untouched. */
.lfp-modal .modal-header {
    background: var(--lfp-gradient);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.6rem;
}

.lfp-modal .modal-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Bootstrap ships LTR here while the page is dir="rtl", so .btn-close's
   `margin-left: auto` pushes the button TOWARD the title instead of away from it —
   that is the cramped corner. Re-express the offset with logical properties and
   give the button a real circular hit target.
   The white glyph is inlined rather than produced with `filter: invert(1)` (the
   .fpr-modal default) because that filter would also invert the translucent
   background and turn it into a dark smudge. */
.lfp-modal .modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0;
    margin-inline-start: auto;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 50%;
    filter: none;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.18);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.78rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.lfp-modal .modal-header .btn-close:hover,
.lfp-modal .modal-header .btn-close:focus {
    background-color: rgba(255, 255, 255, 0.34);
    transform: rotate(90deg);
    box-shadow: none;
}

/* Primary actions follow the banner too, so the dialogs stop showing Bootstrap blue. */
.lfp-modal .btn-primary {
    background: var(--lfp-gradient);
    border: none;
    font-weight: 600;
    padding: 0.55rem 1.4rem;
}

.lfp-modal .btn-primary:hover,
.lfp-modal .btn-primary:focus,
.lfp-modal .btn-primary:active {
    background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
    border: none;
}

.lfp-modal .form-control:focus {
    border-color: var(--lfp-blue);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.2);
}

/* Long dialogs (OTP + two password boxes) must never push their footer off a short
   viewport — phones in landscape especially. Scrolling the body keeps the header
   and the confirm button reachable. flatpickr renders its calendar on <body>, so
   this scroll container never clips it. */
.lfp-modal .modal-body {
    max-height: min(64vh, 620px);
    overflow-y: auto;
}

/* ===== SANAD INSTRUCTIONS MODAL ===== */
.lfp-sanad-note {
    background: var(--lfp-tint-bg);
    border: 1px solid var(--lfp-tint-border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    font-size: 0.88rem;
    color: var(--lfp-tint-text);
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.lfp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: lfp-step;
}

.lfp-steps li {
    counter-increment: lfp-step;
    position: relative;
    padding-inline-start: 2.6rem;
    padding-block: 0.55rem;
    font-size: 0.92rem;
    color: #1e293b;
    line-height: 1.7;
}

.lfp-steps li::before {
    content: counter(lfp-step);
    position: absolute;
    inset-inline-start: 0;
    top: 0.45rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--lfp-gradient);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Static attribution line (no link — the source is credited, not opened). */
.lfp-source {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #64748b;
}

.lfp-source i {
    color: var(--lfp-blue);
}

/* ===== RESIDENT RESET MODALS ===== */

/* flatpickr appends its calendar to <body> with z-index 999, which lands BEHIND a
   Bootstrap modal (1055). Without this the birth-date calendar opens invisibly. */
.flatpickr-calendar {
    z-index: 1060 !important;
}

.lfp-hint {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.3rem;
}

/* Password block stays visibly inert until an OTP of full length is typed. */
.lfp-password-block {
    opacity: 0.5;
    transition: opacity 0.2s ease;
    border-top: 1px dashed #e2e8f0;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.lfp-password-block.lfp-enabled {
    opacity: 1;
}

/* ===== MOBILE ===== */
@media (max-width: 575.98px) {
    /* Use the width the phone actually has instead of the desktop 500px dialog. */
    .lfp-modal .modal-dialog {
        margin: 0.5rem;
    }

    .lfp-modal .modal-header {
        padding: 1rem 1.1rem;
        gap: 0.6rem;
    }

    .lfp-modal .modal-title {
        font-size: 1.02rem;
    }

    .lfp-modal .modal-title small {
        font-size: 0.72rem;
    }

    .lfp-modal .modal-body {
        padding: 1.25rem 1.1rem;
        max-height: 58vh;
    }

    .lfp-modal .modal-footer {
        padding: 0.85rem 1.1rem;
    }

    /* One full-width action per dialog — easier to hit than a right-aligned pill. */
    .lfp-modal .modal-footer .btn,
    .lfp-modal .fpr-success-body .btn {
        width: 100%;
    }

    .lfp-modal .fpr-success-body {
        padding: 1.75rem 1.1rem;
    }

    .lfp-modal .fpr-success-body .fpr-success-icon {
        font-size: 2.75rem;
    }

    .lfp-steps li {
        font-size: 0.86rem;
        padding-inline-start: 2.3rem;
        padding-block: 0.45rem;
    }

    .lfp-steps li::before {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 0.8rem;
    }

    .lfp-sanad-note {
        font-size: 0.84rem;
        padding: 0.8rem 0.85rem;
    }
}

/* Landscape phones: almost no vertical room, so trade padding for content. */
@media (max-height: 520px) {
    .lfp-modal .modal-body {
        max-height: 52vh;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .lfp-modal .modal-header {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .lfp-modal .fpr-success-body {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}