/*
 * Healthion Registration Module - Mobile Responsive Styles
 * =========================================================
 * This file provides comprehensive mobile responsive styles
 * for all registration pages (Patient and Doctor flows)
 *
 * Breakpoints:
 * - Desktop: > 1024px
 * - Tablet: 768px - 1024px
 * - Mobile: 480px - 768px
 * - Small Mobile: < 480px
 */

/* ===== BASE MOBILE OVERRIDES ===== */
@media screen and (max-width: 1024px) {
    body {
        padding: 20px 15px !important;
    }

    .main-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .form-card {
        padding: 35px 30px !important;
        border-radius: 16px !important;
        margin: 0 5px !important;
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .form-group.full-width,
    .form-group.two-col {
        grid-column: span 2 !important;
    }

    /* Progress Steps */
    .progress-container {
        padding: 0 10px !important;
        overflow-x: auto !important;
    }

    .step-connector {
        width: 60px !important;
        margin: 0 10px !important;
    }

    .step-label {
        font-size: 13px !important;
    }
}

/* ===== TABLET STYLES ===== */
@media screen and (max-width: 768px) {
    body {
        padding: 15px 10px !important;
        background-size: 100% !important;
    }

    /* Logo Section */
    .logo-section {
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .logo-img {
        width: 140px !important;
        max-width: 90% !important;
        height: auto !important;
        margin: 0 auto 15px !important;
        display: block !important;
    }

    .page-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        padding: 0 10px !important;
        word-wrap: break-word !important;
    }

    .page-subtitle {
        font-size: 14px !important;
        padding: 0 10px !important;
        line-height: 1.4 !important;
    }

    /* Progress Steps - Improved Mobile View */
    .progress-container {
        margin-bottom: 25px !important;
        padding: 0 5px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        /* Firefox */
    }

    .progress-container::-webkit-scrollbar {
        display: none !important;
        /* Chrome, Safari, Edge */
    }

    .progress-steps {
        min-width: max-content !important;
        padding: 10px 5px !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    .step {
        flex-shrink: 0 !important;
    }

    .step-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    .step-connector {
        width: 40px !important;
        min-width: 40px !important;
        margin: 0 8px !important;
        flex-shrink: 0 !important;
    }

    .step-label {
        font-size: 12px !important;
        white-space: nowrap !important;
        display: none !important;
    }

    .step.active .step-label {
        display: block !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Form Card */
    .form-card {
        padding: 25px 20px !important;
        border-radius: 14px !important;
        margin: 0 !important;
    }

    .form-header {
        margin-bottom: 25px !important;
        padding-bottom: 20px !important;
    }

    .form-title {
        font-size: 22px !important;
    }

    .form-subtitle {
        font-size: 13px !important;
    }

    /* Form Grid - Single Column */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .form-group.full-width,
    .form-group.two-col {
        grid-column: span 1 !important;
    }

    /* Form Inputs */
    .form-input {
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    /* Mobile Input Group */
    .mobile-input-group {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .mobile-input-wrapper {
        width: 100% !important;
    }

    .btn-send-otp {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
        justify-content: center !important;
    }

    /* OTP Section */
    .otp-container {
        margin-top: 15px !important;
    }

    .otp-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .otp-inputs {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .otp-input {
        width: 45px !important;
        height: 50px !important;
        font-size: 18px !important;
        border-radius: 8px !important;
    }

    .btn-verify {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    .otp-timer {
        width: 100% !important;
        text-align: center !important;
        font-size: 13px !important;
    }

    .verification-status {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Date of Birth */
    .dob-input-wrapper {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .dob-animation {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Buttons */
    .btn-primary {
        padding: 16px 24px !important;
        font-size: 15px !important;
        margin-top: 25px !important;
    }

    .btn-back {
        padding: 14px 20px !important;
        font-size: 14px !important;
        width: 100% !important;
    }

    /* Button Row */
    .button-row,
    .btn-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .button-row .btn-back,
    .btn-row .btn-back {
        order: 2 !important;
    }

    .button-row .btn-primary,
    .btn-row .btn-primary {
        order: 1 !important;
    }

    /* Login Section */
    .login-section {
        margin-top: 20px !important;
        padding-top: 20px !important;
    }

    .login-text {
        font-size: 13px !important;
    }

    /* Document Upload */
    .document-upload-area,
    .upload-box {
        padding: 25px 15px !important;
    }

    .upload-icon {
        width: 50px !important;
        height: 50px !important;
    }

    /* Section Headers */
    .section-header,
    .section-title {
        font-size: 18px !important;
    }

    /* Info Cards */
    .info-card,
    .alert-box {
        padding: 15px !important;
        font-size: 13px !important;
    }

    /* Password Fields */
    .password-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Insurance Section */
    .insurance-toggle {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .insurance-option {
        width: 100% !important;
    }
}

/* ===== MOBILE STYLES ===== */
@media screen and (max-width: 480px) {
    body {
        padding: 10px 8px !important;
    }

    /* Header Section */
    .logo-section {
        margin-bottom: 15px !important;
    }

    .logo-img {
        width: 120px !important;
        max-width: 85% !important;
        margin: 0 auto 12px !important;
    }

    .page-title {
        font-size: 22px !important;
    }

    .page-subtitle {
        font-size: 13px !important;
    }

    /* Progress Steps */
    .step-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .step-connector {
        width: 30px !important;
        margin: 0 5px !important;
    }

    /* Form Card */
    .form-card {
        padding: 20px 15px !important;
        border-radius: 12px !important;
    }

    .form-header {
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
    }

    .form-title {
        font-size: 20px !important;
    }

    .form-subtitle {
        font-size: 12px !important;
    }

    /* Form Grid */
    .form-grid {
        gap: 14px !important;
    }

    /* Form Inputs */
    .form-input {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .form-label {
        font-size: 12px !important;
    }

    /* OTP Inputs */
    .otp-input {
        width: 42px !important;
        height: 46px !important;
        font-size: 16px !important;
    }

    .otp-inputs {
        gap: 6px !important;
    }

    /* Buttons */
    .btn-primary {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    .btn-send-otp,
    .btn-verify {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    /* Document Upload */
    .document-upload-area,
    .upload-box {
        padding: 20px 12px !important;
    }

    .upload-text {
        font-size: 13px !important;
    }

    /* Textarea */
    textarea.form-input {
        min-height: 100px !important;
    }

    /* Select2 Dropdowns */
    .select2-container {
        width: 100% !important;
    }

    .select2-selection--multiple {
        min-height: 44px !important;
    }
}

/* ===== VERY SMALL MOBILE STYLES ===== */
@media screen and (max-width: 360px) {
    body {
        padding: 8px 5px !important;
    }

    .logo-img {
        width: 100px !important;
    }

    .page-title {
        font-size: 20px !important;
    }

    /* Form Card */
    .form-card {
        padding: 18px 12px !important;
    }

    .form-title {
        font-size: 18px !important;
    }

    /* OTP Inputs - Smaller for tiny screens */
    .otp-input {
        width: 38px !important;
        height: 42px !important;
        font-size: 15px !important;
    }

    .otp-inputs {
        gap: 5px !important;
    }

    /* Step Numbers */
    .step-number {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    .step-connector {
        width: 25px !important;
    }

    /* Buttons */
    .btn-primary,
    .btn-verify,
    .btn-send-otp {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }
}

/* ===== LANDSCAPE MOBILE ORIENTATION ===== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    body {
        padding: 15px 20px !important;
    }

    .logo-section {
        margin-bottom: 15px !important;
    }

    .logo-img {
        width: 100px !important;
    }

    .page-title {
        font-size: 22px !important;
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .form-group.full-width {
        grid-column: span 2 !important;
    }

    .btn-primary {
        max-width: 400px !important;
        margin: 20px auto 0 !important;
        display: block !important;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .form-input {
        min-height: 48px !important;
    }

    .btn-primary,
    .btn-verify,
    .btn-send-otp,
    .btn-back {
        min-height: 48px !important;
    }

    .otp-input {
        min-width: 40px !important;
        min-height: 44px !important;
    }

    /* Remove hover effects on touch devices */
    .form-input:hover,
    .btn-primary:hover,
    .btn-verify:hover,
    .form-card:hover {
        transform: none !important;
    }

    /* Tap highlight */
    .btn-primary:active,
    .btn-verify:active,
    .btn-send-otp:active {
        transform: scale(0.98) !important;
    }
}

/* ===== INTERNATIONAL TELEPHONE INPUT MOBILE FIX ===== */
@media screen and (max-width: 768px) {
    .iti {
        width: 100% !important;
    }

    .iti__tel-input,
    input#mobile.iti__tel-input,
    .iti input[type="tel"] {
        padding-left: 90px !important;
    }

    .iti__selected-country {
        min-width: 70px !important;
        padding: 0 6px 0 10px !important;
    }

    .iti__selected-dial-code {
        font-size: 13px !important;
    }

    .iti__country-list {
        max-width: calc(100vw - 40px) !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ===== SAFE AREA INSETS (for notched phones) ===== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {

    .progress-container,
    .btn-primary,
    .btn-back,
    .btn-send-otp,
    .btn-verify,
    .otp-container,
    .login-section {
        display: none !important;
    }

    .form-card {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* ===== ACCESSIBILITY - REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .logo-img {
        animation: none !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (forced-colors: active) {
    .form-input {
        border: 2px solid CanvasText !important;
    }

    .btn-primary {
        border: 2px solid ButtonText !important;
    }
}