/**
 * Auth Mobile Fix
 * This CSS hides promotional text on login, registration, 2FA, and forgot password pages on mobile devices
 */

/* Direct approach to hide promotional text on mobile */
@media (max-width: 767px) {
    /*
     * IMPORTANT: Hide ALL promotional content on auth pages
     * This is a very aggressive approach that targets all possible elements
     */

    /* Target the exact structure in login.blade.php, register.blade.php, etc. */
    .min-h-screen .container .flex-col.md\:flex-row > div:first-child {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
    }

    /* Make the form container take full width */
    .min-h-screen .container .flex-col.md\:flex-row > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Center the form card */
    .min-h-screen .container .flex-col.md\:flex-row > div:last-child .max-w-md {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Target by content - hide any element containing promotional text */
    h1:contains("Climate Risk Management"),
    h1:contains("Future of Climate"),
    p:contains("sustainable farming"),
    p:contains("climate risk"),
    h4:contains("Advanced Risk Assessment"),
    h4:contains("Flexible Credits"),
    h4:contains("Tailored Insurance"),
    .space-y-8.mt-12 {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Target specific elements in the auth pages */
    .min-h-screen .container .w-full.md\:w-1\/2:first-child {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Livewire specific selectors */
    .min-h-screen .w-full.max-w-7xl .flex.flex-col.lg\:flex-row > div:first-child {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Make sure the form container takes full width on mobile */
    .min-h-screen .w-full.max-w-7xl .flex.flex-col.lg\:flex-row > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure any promotional text in two-factor auth pages is hidden */
    .min-h-screen .flex.flex-col.sm\:justify-center .w-full.sm\:max-w-md ~ div,
    .min-h-screen .flex.flex-col.sm\:justify-center .w-full.sm\:max-w-md ~ p {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /*
     * IMPORTANT: Force !important on all properties to override any other styles
     * This ensures our mobile styles take precedence
     */

    /* Target the exact div that contains the promotional text */
    div.w-full.md\:w-1\/2.p-6.md\:p-12:first-child {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
    }
}

/*
 * Add a specific class to the body for auth pages
 * This will be added via JavaScript to ensure our CSS works
 * ONLY apply this on mobile devices
 */
@media (max-width: 767px) {
    body.auth-page .min-h-screen .container .flex-col.md\:flex-row > div:first-child {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Add JavaScript to ensure our CSS works */
@media (max-width: 767px) {
    /* This will be applied immediately without JavaScript */
    .flex-col.md\:flex-row > div:first-child {
        display: none !important;
    }
}