/* =========================================================
   MOBILE VERSION — LEFT SIDE ONLY / PREMIUM APP STYLE
   Desktop untouched = NO REGRESSION
========================================================= */

@media (max-width: 767.98px) {

    /* ========================================
       1. GLOBAL MOBILE RESET
    ======================================== */

    html,
    body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        display: block !important;
        position: relative;
        font-family: 'Roboto', sans-serif;
        /* Premium mobile background */
        background: radial-gradient(circle at top right, rgba(108,99,255,0.22), transparent 30%), radial-gradient(circle at bottom left, rgba(58,155,220,0.18), transparent 35%), linear-gradient(160deg, #081120 0%, #132238 45%, #1c3150 100%);
        overflow-y: auto !important;
    }

        /* Kill desktop wave effects */
        body::before,
        .wave {
            display: none !important;
            animation: none !important;
            content: none !important;
        }

    /* ========================================
       2. REMOVE RIGHT SIDE COMPLETELY
    ======================================== */

    .col-md-6.d-none.d-md-flex {
        display: none !important;
    }

    /* Full width left side */
    .col-md-6.d-flex.align-items-center.justify-content-center.registration-bg {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* ========================================
       3. MOBILE CONTAINER
    ======================================== */

    .container-fluid,
    .row {
        height: auto !important;
        min-height: 100vh !important;
    }

    .registration-bg {
        position: relative;
        min-height: 100vh;
        padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        overflow: hidden;
    }

        /* ========================================
       4. PREMIUM BACKGROUND EFFECTS
    ======================================== */

        /* Soft top glow */
        .registration-bg::before {
            content: "";
            position: absolute;
            top: -140px;
            right: -100px;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(108,99,255,0.28) 0%, rgba(58,155,220,0.12) 40%, transparent 75%);
            filter: blur(20px);
            z-index: 0;
        }

        /* Enterprise grid */
        .registration-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 28px 28px;
            z-index: 0;
            pointer-events: none;
        }

    /* ========================================
       5. PREMIUM LOGIN CARD
    ======================================== */

    .card_2 {
        position: relative;
        z-index: 2;
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        padding: 2.2rem 1.5rem !important;
        border-radius: 32px !important;
        background: linear-gradient( 180deg, rgba(255,255,255,0.98) 0%, rgba(247,249,252,0.96) 100% ) !important;
        border: 1px solid rgba(255,255,255,0.4);
        box-shadow: 0 20px 60px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.6) !important;
        backdrop-filter: blur(12px);
        overflow: hidden;
    }

        /* Top gradient accent */
        .card_2::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient( 90deg, #6c63ff 0%, #3A9BDC 50%, #7ed7ff 100% );
        }

        /* ========================================
       6. MOBILE BRAND ICON
    ======================================== */

        .card_2::after {
            content: "C";
            position: absolute;
            top: 22px;
            right: 22px;
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: linear-gradient( 135deg, #6c63ff 0%, #3A9BDC 100% );
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1rem;
            font-weight: 900;
            box-shadow: 0 8px 20px rgba(58,155,220,0.25);
        }

    /* ========================================
       7. TITLES
    ======================================== */

    .title-main {
        font-size: 2rem !important;
        line-height: 1.15;
        color: #0f172a !important;
        font-weight: 800;
        letter-spacing: -0.04em;
        padding-bottom: 0 !important;
        margin-bottom: 0.4rem !important;
    }

        .title-main::after {
            display: none !important;
        }

    .title-subtitle {
        font-size: 0.96rem !important;
        color: #64748b !important;
        font-weight: 500;
        margin-bottom: 2rem !important;
    }

    /* ========================================
       8. INPUTS
    ======================================== */

    .form-outline {
        width: 100% !important;
        margin-bottom: 1.4rem !important;
    }

    .form-control {
        height: 58px !important;
        border-radius: 18px !important;
        border: 1.5px solid #dbe4ee !important;
        background: #f8fafc !important;
        color: #0f172a !important;
        font-size: 0.96rem;
        font-weight: 500;
        padding-left: 16px !important;
        padding-right: 46px !important;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

        .form-control:focus {
            border-color: #6c63ff !important;
            background: #ffffff !important;
            box-shadow: 0 0 0 4px rgba(108,99,255,0.12) !important;
        }

    .form-outline .form-label {
        color: #64748b !important;
        font-weight: 500;
    }

    .form-outline .form-control:focus ~ .form-label,
    .form-outline .form-control.active ~ .form-label,
    .form-outline .form-control:not(:placeholder-shown) ~ .form-label {
        color: #6c63ff !important;
    }

    /* ========================================
       9. PASSWORD BUTTON
    ======================================== */

    #toggle-password {
        right: 10px !important;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(108,99,255,0.08) !important;
        transition: background .2s ease;
    }

        #toggle-password:hover {
            background: rgba(108,99,255,0.14) !important;
        }

    #eye-icon {
        color: #6c63ff !important;
    }

    /* ========================================
       10. BUTTONS
    ======================================== */

    .btn-primary {
        height: 56px;
        border: none !important;
        border-radius: 18px !important;
        background: linear-gradient( 135deg, #6c63ff 0%, #3A9BDC 100% ) !important;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: none;
        box-shadow: 0 14px 28px rgba(58,155,220,0.30);
        transition: transform .15s ease, box-shadow .2s ease;
    }

        .btn-primary:hover,
        .btn-primary:focus {
            box-shadow: 0 18px 34px rgba(58,155,220,0.38);
        }

        .btn-primary:active {
            transform: scale(0.985);
        }

    .btn-outline-secondary {
        height: 54px;
        border-radius: 16px !important;
        border: 1.5px solid #dbe4ee !important;
        background: #ffffff !important;
        color: #334155 !important;
        font-weight: 600;
    }

    /* ========================================
       11. LINKS / CHECKBOX
    ======================================== */

    .form-check-label,
    .text-primary.small,
    .small {
        font-size: 0.9rem !important;
    }

    .text-primary.small {
        color: #6c63ff !important;
    }

    /* ========================================
       12. ALERTS
    ======================================== */

    .alert-danger {
        border: none !important;
        border-radius: 16px !important;
        background: linear-gradient( 135deg, rgba(255,82,82,0.12), rgba(255,82,82,0.08) ) !important;
        color: #b42318 !important;
    }

    /* ========================================
       13. MOBILE FLEX FIX
    ======================================== */

    .d-flex.justify-content-between.align-items-center.mb-4 {
        gap: 12px;
        flex-wrap: wrap;
    }

    /* ========================================
       14. FOOTER
    ======================================== */

    .text-center.mt-4.text-muted.small {
        color: #94a3b8 !important;
        margin-top: 1.8rem !important;
    }
}

/* =========================================================
   ULTRA SMALL DEVICES
========================================================= */

@media (max-width: 350px) {

    .registration-bg {
        padding-left: 14px;
        padding-right: 14px;
    }

    .card_2 {
        padding: 1.6rem 1rem !important;
        border-radius: 26px !important;
    }

    .title-main {
        font-size: 1.6rem !important;
    }

    .title-subtitle {
        font-size: 0.88rem !important;
    }

    .form-control,
    .btn-primary {
        height: 52px !important;
    }
}