/* Mobile Loan Header Text Fixes - Unified header format for all loan products */

@media (max-width: 768px) {
    /* MAIN NAVBAR CONTAINER FOR ALL LOAN PAGES */
    .navbar,
    nav.navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        z-index: 10000 !important;
        background: white !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
        height: auto !important;
        min-height: 90px !important;
        padding: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        margin: 0 !important;
    }

    /* NAVIGATION CONTAINER LAYOUT */
    .nav-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0.5rem !important;
        width: 100% !important;
        height: auto !important;
        min-height: 90px !important;
        gap: 0.75rem !important;
    }

    /* LOGO AND TEXT COMBINED CONTAINER */
    .nav-logo {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* LOGO IMAGE STYLING */
    .loan-logo,
    .nav-logo img,
    .brand-link img,
    .logo {
        height: 50px !important;
        width: auto !important;
        max-width: 60px !important;
        display: block !important;
        object-fit: contain !important;
        border-radius: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    /* LOGO CONTENT CONTAINER - unified structure */
    .logo-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
        order: 2 !important;
        flex: 1 !important;
        margin-left: 0.75rem !important;
        max-width: calc(100% - 80px) !important;
        overflow: hidden !important;
    }

    /* BUSINESS LOAN STYLE HEADER TEXT */
    .mobile-header-text {
        display: block !important;
    }

    .mobile-header-text h2 {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        margin: 0 0 0.1rem 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        /* Allow text to wrap across two lines if needed */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .mobile-header-text p {
        font-size: 0.7rem !important;
        color: #666 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        text-align: left !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        /* Allow subtitle to wrap across two lines if needed */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* HIDE OLD JOURNEY TITLE FORMAT */
    .journey-title {
        display: none !important;
    }

    /* HIDE OLD NAV HEADER TEXT FORMAT */
    .nav-header-text {
        display: none !important;
    }

    /* HIDE OLD LOGO CONTENT SPAN */
    .nav-logo-content span {
        display: none !important;
    }

    /* ENSURE MOBILE NUMBER INPUT SECTION IS VISIBLE */
    .step-content h2,
    .form-header h2,
    .phone-input-title,
    .mobile-number-title {
        display: block !important;
        visibility: visible !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
        line-height: 1.3 !important;
    }

    /* HIDE ALL STEP-RELATED ELEMENTS */
    .step-indicator,
    .step-number,
    .step-text,
    .step,
    .step-circle,
    .step-icon,
    .nav-steps,
    .mobile-step-bar,
    .step-progress,
    .progress-step,
    .journey-steps,
    .step-counter,
    .step-label {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* BODY PADDING FOR FIXED HEADER */
    body {
        padding-top: 90px !important;
    }

    /* HIDE ORIGINAL FORM HEADERS ON MOBILE */
    .form-header h1,
    .product-header h1,
    .home-loan-header h1,
    .loan-header h1 {
        display: none !important;
    }

    /* REDUCE FORM CARD PADDING TO MINIMIZE WHITESPACE */
    .form-card,
    .form-section {
        padding: 1rem !important;
        margin: 0 !important;
    }

    /* CONTAINER SPACING FIXES */
    .container {
        padding: 1rem !important;
        margin: 0 !important;
    }

    .loan-application-layout,
    .two-column-layout {
        gap: 1rem !important;
        padding: 0 !important;
    }

    /* MINIMIZE STEP CONTENT PADDING */
    .step-content {
        padding: 1rem 0 !important;
        margin: 0 !important;
    }

    /* LEFT SECTION SPACING */
    .left-section {
        padding: 1rem !important;
        margin: 0 !important;
    }

    /* RIGHT PANEL SPACING FOR HOME LOAN */
    .right-panel {
        padding: 1rem !important;
        margin: 0 !important;
    }

    /* MAIN CONTENT PADDING */
    .main-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .form-header p,
    .product-header .product-description,
    .home-loan-header p,
    .loan-header p {
        display: none !important;
    }

    .loan-header {
        display: none !important;
    }

    /* OTP Input Field Fixes for Mobile Visibility */
    .otp-input-container {
        display: flex !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        margin: 1.5rem 0 !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }

    .otp-digit {
        width: 45px !important;
        height: 50px !important;
        border: 2px solid #d1d5db !important;
        border-radius: 8px !important;
        text-align: center !important;
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        background: white !important;
        color: #1f2937 !important;
        outline: none !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }

    .otp-digit:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        background: #f8fafc !important;
    }

    .otp-digit:valid {
        border-color: #10b981 !important;
        background: #f0fdf4 !important;
    }

    /* Remove spinner arrows from number inputs */
    .otp-digit::-webkit-outer-spin-button,
    .otp-digit::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    /* Credit Card specific OTP fixes */
    #step2 .otp-input-container,
    .credit-card-form .otp-input-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        margin: 1.5rem 0 !important;
        flex-wrap: nowrap !important;
    }

    /* Improve OTP container layout on very small screens */
    @media (max-width: 360px) {
        .otp-digit {
            width: 40px !important;
            height: 45px !important;
            font-size: 1.1rem !important;
        }
        
        .otp-input-container {
            gap: 0.25rem !important;
        }
    }

    /* OTP verification section improvements */
    .verification-section h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        color: #1f2937 !important;
    }

    .verification-section p {
        font-size: 0.95rem !important;
        color: #6b7280 !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }

    /* Ensure OTP section has proper spacing */
    .verification-section {
        padding: 1.5rem !important;
        margin: 0 auto !important;
        max-width: 400px !important;
    }

    /* Timer and resend button styling */
    .timer-large,
    .resend-section {
        text-align: center !important;
        margin: 1rem 0 !important;
        font-size: 0.9rem !important;
    }

    .resend-btn-large {
        background: transparent !important;
        border: none !important;
        color: #3b82f6 !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
        cursor: pointer !important;
        font-size: 0.9rem !important;
    }
}

/* Ensure desktop layout remains unchanged */
@media (min-width: 769px) {
    .nav-header-text {
        display: none !important;
    }
    
    .nav-logo-content {
        display: flex !important;
    }
}