/**
 * Auth Mobile Forms CSS
 * Comprehensive mobile styling for login and registration forms
 * Ensures consistent padding, margins, and layout on mobile devices
 */

/* Mobile-specific styling for auth forms */
@media (max-width: 767px) {
    /* Main container adjustments */
    .min-h-screen {
        padding: 1rem !important;
    }

    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Hide promotional content on mobile */
    .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;
    }

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

    /* Form card mobile styling */
    .bg-white.rounded-xl.shadow-lg,
    .bg-white.rounded-2xl.shadow-xl {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 1rem !important;
    }

    /* Form content padding - consistent across all auth forms */
    .bg-white.rounded-xl.shadow-lg .p-6,
    .bg-white.rounded-2xl.shadow-xl .p-8,
    .bg-white .p-6,
    .bg-white .p-8 {
        padding: 1.5rem !important;
    }

    /* Input field mobile styling - consistent sizing and spacing */
    .space-y-1\.5 input,
    .space-y-1\.5 select,
    .space-y-1\.5 textarea,
    .space-y-4 input,
    .space-y-4 select,
    .space-y-4 textarea,
    input[type="email"],
    input[type="password"],
    input[type="text"],
    input[type="tel"],
    select,
    textarea {
        padding-left: 3rem !important;
        padding-right: 1rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        border-radius: 0.5rem !important;
    }

    /* Special handling for inputs without icons */
    input:not([style*="padding-left: 3rem"]) {
        padding-left: 1rem !important;
    }

    /* Button mobile styling - touch-friendly sizing */
    .w-full.bg-gradient-to-r,
    button[type="submit"],
    .btn {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        min-height: 3rem !important;
        border-radius: 0.5rem !important;
    }

    /* Form spacing - prevent layout shifts */
    .space-y-1\.5 {
        margin-bottom: 1.5rem !important;
    }

    .space-y-3 {
        margin-bottom: 1.5rem !important;
    }

    .space-y-4 {
        margin-bottom: 1.5rem !important;
    }

    .space-y-6 {
        margin-bottom: 1.5rem !important;
    }

    /* Phone input component mobile styling */
    .phone-input-container,
    .phone-input-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .phone-input-container input,
    .phone-input-wrapper input {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Prevent layout shift when focusing inputs */
    input:focus,
    select:focus,
    textarea:focus {
        transform: none !important;
        margin: 0 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
    }

    /* Ensure proper spacing for form elements */
    .relative {
        margin-bottom: 0 !important;
        position: relative !important;
    }

    /* Label spacing - consistent across all forms */
    label,
    .block.text-sm.font-medium {
        margin-bottom: 0.375rem !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
    }

    /* Error message spacing */
    .text-xs.text-red-600,
    .mt-1.text-xs.text-red-600 {
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
        font-size: 0.75rem !important;
    }

    /* Success message spacing */
    .text-xs.text-green-600,
    .mt-1.text-xs.text-green-600 {
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
        font-size: 0.75rem !important;
    }

    /* Registration form specific styling */
    .grid.grid-cols-1.md\:grid-cols-2.gap-4,
    .grid.grid-cols-2.gap-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Verification code input special styling */
    input[name="verification_code"],
    input[placeholder="000000"] {
        text-align: center !important;
        letter-spacing: 0.5rem !important;
        font-size: 1.5rem !important;
        padding-left: 1rem !important;
        font-weight: 600 !important;
    }

    /* Tab navigation mobile styling */
    .flex.bg-gray-100.rounded-lg.p-1 {
        padding: 0.25rem !important;
        margin-bottom: 1.5rem !important;
    }

    .flex.bg-gray-100.rounded-lg.p-1 button {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Checkbox and radio button styling */
    input[type="checkbox"],
    input[type="radio"] {
        width: 1.25rem !important;
        height: 1.25rem !important;
        padding: 0 !important;
    }

    /* Remember me and similar options */
    .inline-flex.items-center {
        margin-bottom: 1rem !important;
    }

    .inline-flex.items-center span {
        font-size: 0.875rem !important;
        margin-left: 0.5rem !important;
    }

    /* Link styling */
    a.text-sm,
    .text-sm a {
        font-size: 0.875rem !important;
        padding: 0.5rem 0 !important;
        display: inline-block !important;
    }

    /* Form header styling */
    .text-center.mb-6 h2,
    .text-center.mb-8 h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .text-center.mb-6 p,
    .text-center.mb-8 p {
        font-size: 0.875rem !important;
        margin-top: 0.25rem !important;
    }

    /* Logo styling */
    .inline-block.p-3 img {
        height: 2.5rem !important;
    }

    /* Divider styling */
    .text-center.mb-6 .text-sm,
    .text-center.mb-4 .text-sm {
        margin: 1rem 0 !important;
        font-size: 0.875rem !important;
    }

    /* Loading states and disabled buttons */
    button:disabled,
    .btn:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
    }

    /* Ensure consistent viewport behavior */
    body {
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
    }

    /* Prevent zoom on input focus */
    input,
    select,
    textarea {
        font-size: 1rem !important;
    }

    /* SweetAlert mobile optimizations */
    .swal2-popup {
        width: calc(100vw - 2rem) !important;
        max-width: 350px !important;
        margin: 1rem !important;
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }

    .swal2-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        padding: 0 !important;
    }

    .swal2-html-container {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0.5rem 0 !important;
    }

    .swal2-input {
        font-size: 1rem !important;
        padding: 0.5rem !important;
        margin: 0.5rem 0 !important;
        border-radius: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .swal2-actions {
        margin: 0.75rem 0 0 0 !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

    .swal2-confirm,
    .swal2-cancel {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
        border-radius: 0.5rem !important;
        min-height: 2.5rem !important;
    }

    /* Email display in alerts */
    .swal2-html-container .bg-gray-50 {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Backdrop adjustments for mobile */
    .swal2-container {
        padding: 1rem !important;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    .min-h-screen {
        padding: 0.5rem !important;
    }

    .bg-white.rounded-xl.shadow-lg .p-6,
    .bg-white.rounded-2xl.shadow-xl .p-8 {
        padding: 1rem !important;
    }

    .space-y-1\.5,
    .space-y-3,
    .space-y-4,
    .space-y-6 {
        margin-bottom: 1rem !important;
    }
}

/* Small mobile devices (iPhone SE, etc.) */
@media (max-width: 375px) {
    .min-h-screen {
        padding: 0.75rem !important;
    }

    .bg-white.rounded-xl.shadow-lg .p-6,
    .bg-white.rounded-2xl.shadow-xl .p-8 {
        padding: 1.25rem !important;
    }

    input,
    select,
    textarea,
    button {
        font-size: 1rem !important;
    }
}