/* ============================================================
   forgotpassword-responsive.css
   SAFE RESPONSIVE OVERRIDES — Only activates below breakpoints.
   Does NOT affect your desktop design at all.
   Place this AFTER custom.css in your blade file.
   ============================================================ */


/* ─────────────────────────────────────────────
   LG — 1024px and below (small laptops)
   Only minor spacing tweaks, design stays intact
───────────────────────────────────────────── */
@media (max-width: 1024px) {

    .left-panel .brand-area {
        padding: 0 10px;
    }

    .hero-heading {
        font-size: 2.4rem !important;
    }

    .hero-desc {
        font-size: 0.9rem;
    }

    .steps-list {
        gap: 12px;
    }
}


/* ─────────────────────────────────────────────
   MD — 900px and below (tablets landscape)
   Shrink both panels proportionally
───────────────────────────────────────────── */
@media (max-width: 900px) {

    .hero-heading {
        font-size: 2rem !important;
    }

    .left-panel {
        padding: 40px 24px !important;
    }

    .right-panel {
        padding: 40px 28px !important;
    }

    .logo-img {
        width: 52px !important;
        height: 52px !important;
    }

    .brand-name {
        font-size: 1.1rem !important;
    }

    .step-item {
        gap: 10px;
    }
}


/* ─────────────────────────────────────────────
   MD — 768px and below (tablets portrait / iPad)
   Stack panels vertically, hide left panel
───────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Stack panels on top of each other */
    .login-container {
        flex-direction: column !important;
        min-height: 100vh;
        overflow-y: auto;
    }

    /* Hide the decorative left panel on mobile/tablet */
    .left-panel {
        display: none !important;
    }

    /* Right panel takes full screen */
    .right-panel {
        width: 100% !important;
        min-height: 100vh !important;
        padding: 48px 32px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    /* Lock circle sizing */
    .lock-icon-wrap {
        margin-bottom: 24px !important;
    }

    .lock-circle {
        width: 72px !important;
        height: 72px !important;
        font-size: 1.6rem !important;
    }

    /* Header */
    .forgot-header h2 {
        font-size: 1.8rem !important;
    }

    .forgot-header p {
        font-size: 0.9rem !important;
    }

    /* Button full width */
    .btn-reset {
        width: 100% !important;
    }
}


/* ─────────────────────────────────────────────
   SM — 640px and below (large phones)
───────────────────────────────────────────── */
@media (max-width: 640px) {

    .right-panel {
        padding: 36px 24px !important;
    }

    .forgot-header h2 {
        font-size: 1.5rem !important;
    }

    .forgot-header p {
        font-size: 0.85rem !important;
    }

    .form-label {
        font-size: 0.85rem !important;
    }

    .input-wrap input {
        font-size: 0.9rem !important;
        padding: 12px 12px 12px 42px !important;
    }

    .info-note p {
        font-size: 0.8rem !important;
    }

    .btn-reset {
        font-size: 0.9rem !important;
        padding: 13px 20px !important;
    }

    .footer-wrap a {
        font-size: 0.85rem !important;
    }
}


/* ─────────────────────────────────────────────
   XS — 480px and below (small phones)
───────────────────────────────────────────── */
@media (max-width: 480px) {

    .right-panel {
        padding: 28px 18px !important;
    }

    .lock-circle {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.3rem !important;
    }

    .forgot-header h2 {
        font-size: 1.3rem !important;
    }

    .btn-reset {
        font-size: 0.85rem !important;
        padding: 11px 16px !important;
    }

    .field-group {
        margin-bottom: 14px !important;
    }
}


/* ─────────────────────────────────────────────
   2XL — 1536px and above (large desktops / TVs)
   Just center and cap the max-width
───────────────────────────────────────────── */
@media (min-width: 1536px) {

    .main-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .login-container {
        max-width: 1400px !important;
        margin: 0 auto !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }
}