/* Mobile OTP Input Fixes - Business Loan Style for All Loan Products */

@media (max-width: 768px) {
    /* HIDE ALL STEP INDICATORS AND NUMBERS ON MOBILE */
    .step-indicator,
    .step-number,
    .step-text,
    .step,
    .step-circle,
    .step-icon,
    .nav-steps,
    .mobile-step-bar,
    .step-progress,
    .progress-step,
    .journey-steps {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* MOBILE NUMBER INPUT SECTION STYLING */
    .phone-input-section,
    .mobile-input-section,
    .step-content h2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ENSURE "ENTER YOUR MOBILE NUMBER" TEXT IS VISIBLE */
    .form-header h2,
    .step-content h2,
    .mobile-number-title,
    .phone-title,
    .otp-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;
        padding: 0 1rem !important;
    }

    /* MOBILE NUMBER INPUT LABEL */
    .form-group label[for*="phone"],
    .form-group label[for*="mobile"],
    .phone-label,
    .mobile-label {
        display: block !important;
        visibility: visible !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        margin-bottom: 0.5rem !important;
        text-align: left !important;
    }

    /* VERIFICATION SECTION STYLING - CONSISTENT ACROSS ALL LOAN PRODUCTS */
    .verification-section {
        padding: 2rem 1rem !important;
        background: white !important;
        border-radius: 12px !important;
        margin: 1rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }

    .verification-section h2 {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        text-align: center !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }

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

    /* PHONE NUMBER DISPLAY IN OTP TEXT */
    #displayNumber,
    .phone-display {
        font-weight: 600 !important;
        color: #3b82f6 !important;
    }

    /* OTP INPUT CONTAINER SIZING */
    .otp-input-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin: 1.5rem 0 !important;
        padding: 0 1rem !important;
    }

    /* OTP DIGIT INPUT FIELDS - INCREASED SIZE AND VISIBILITY */
    .otp-digit,
    .otp-input-container input,
    .otp-input-container input[type="text"] {
        width: 45px !important;
        height: 50px !important;
        min-width: 45px !important;
        min-height: 50px !important;
        max-width: 45px !important;
        max-height: 50px !important;
        border: 2px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        background: white !important;
        color: #1f2937 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
        appearance: none !important;
    }

    /* OTP DIGIT FOCUS STATE */
    .otp-digit:focus,
    .otp-input-container input:focus {
        border-color: #3b82f6 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        background: white !important;
        color: #1f2937 !important;
    }

    /* OTP DIGIT FILLED STATE */
    .otp-digit:not(:placeholder-shown),
    .otp-input-container input:not(:placeholder-shown) {
        border-color: #10b981 !important;
        background: #f0fdf4 !important;
        color: #1f2937 !important;
    }

    /* OTP DIGIT ERROR STATE */
    .otp-digit.error,
    .otp-input-container input.error {
        border-color: #ef4444 !important;
        background: #fef2f2 !important;
        color: #1f2937 !important;
    }

    /* REMOVE SPINNER ARROWS FROM NUMBER INPUTS */
    .otp-digit::-webkit-outer-spin-button,
    .otp-digit::-webkit-inner-spin-button,
    .otp-input-container input::-webkit-outer-spin-button,
    .otp-input-container input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    /* OTP FORM SECTION SPACING */
    .otp-form-section,
    .verification-section {
        padding: 1rem !important;
        margin-top: 50px !important;
    }

    /* OTP TITLE STYLING */
    .otp-form-section h2,
    .verification-section h2 {
        font-size: 1.25rem !important;
        color: #1f2937 !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }

    /* OTP SUBTITLE/DESCRIPTION */
    .otp-form-section p,
    .verification-section p {
        font-size: 0.9rem !important;
        color: #6b7280 !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }

    /* RESEND OTP SECTION - CONSISTENT STYLING */
    .resend-section {
        text-align: center !important;
        margin: 2rem 0 1.5rem 0 !important;
    }

    .resend-section p,
    .resend-text {
        font-size: 0.9rem !important;
        color: #6b7280 !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.4 !important;
    }

    .resend-btn,
    .resend-btn-large {
        color: #3b82f6 !important;
        background: none !important;
        border: none !important;
        text-decoration: underline !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        padding: 0.25rem 0.5rem !important;
        margin-left: 0.25rem !important;
        transition: color 0.2s ease !important;
    }

    .resend-btn:hover,
    .resend-btn-large:hover {
        color: #2563eb !important;
        text-decoration: none !important;
    }

    .resend-btn:disabled,
    .resend-btn-large:disabled {
        color: #9ca3af !important;
        cursor: not-allowed !important;
        text-decoration: none !important;
    }

    /* TIMER DISPLAY - CONSISTENT STYLING */
    .timer,
    .timer-large {
        font-size: 0.85rem !important;
        color: #ef4444 !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
        font-weight: 500 !important;
    }

    /* OTP VERIFICATION BUTTON */
    .verify-button,
    .otp-continue-button,
    button[onclick*="verify"] {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin-top: 1.5rem !important;
        border-radius: 8px !important;
        background: #3b82f6 !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
    }

    .verify-button:hover,
    .otp-continue-button:hover {
        background: #2563eb !important;
    }

    .verify-button:disabled,
    .otp-continue-button:disabled {
        background: #9ca3af !important;
        cursor: not-allowed !important;
    }

    /* PHONE NUMBER DISPLAY */
    #displayNumber,
    .display-number {
        font-weight: 600 !important;
        color: #3b82f6 !important;
    }

    /* ERROR MESSAGE FOR OTP */
    .otp-error,
    .verification-error {
        color: #ef4444 !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
    }

    /* SUCCESS MESSAGE FOR OTP */
    .otp-success,
    .verification-success {
        color: #10b981 !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
    }
}