/* Portrait mobile (default) - balanced responsive layout */
        @media (max-width: 600px) and (orientation: portrait) {
            html, body {
                overflow: hidden !important;
            }

            #paymentPage {
                padding-top: 65px !important;
                padding-bottom: 4px !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
                justify-content: flex-start !important;
                align-content: flex-start !important;
                display: flex !important;
                flex-direction: column !important;
            }

            #paymentPage > .w-full {
                flex: 1 !important;
                display: flex !important;
                flex-direction: column !important;
            }

            /* Header z-index to sit above language switcher */
            #orderHeaderCompact {
                z-index: 60 !important;
                position: relative !important;
                margin-top: 0 !important;
                margin-bottom: 4px !important;
            }

            /* Compact header - big and prominent */
            #orderHeaderCompact .card {
                padding: 10px 12px !important;
                margin-bottom: 6px !important;
                shrink: 0 !important;
            }

            /* Merchant branding bar */
            #orderHeaderCompact .merchant-branding-bar {
                margin-bottom: 10px !important;
                padding-bottom: 10px !important;
            }

            #orderHeaderCompact #merchantLogoContainer,
            #orderHeaderCompact .merchant-initials {
                width: 36px !important;
                height: 36px !important;
                font-size: 14px !important;
            }

            #orderHeaderCompact #merchantNameDisplay {
                font-size: 14px !important;
            }

            #orderHeaderCompact .merchant-powered-by {
                font-size: 10px !important;
            }

            #orderHeaderCompact .text-2xl {
                font-size: 22px !important;
            }

            #orderHeaderCompact .text-xl {
                font-size: 16px !important;
            }

            #orderHeaderCompact button svg {
                width: 18px !important;
                height: 18px !important;
            }

            /* ========== BANK SELECTION VIEW ========== */
            #bankSelectionView {
                justify-content: flex-start !important;
                padding-top: 4px !important;
            }

            #bankSelectionView .text-center.mb-4:first-of-type {
                margin-bottom: 8px !important;
            }

            #bankSelectionView .w-12 {
                width: 40px !important;
                height: 40px !important;
                margin-bottom: 6px !important;
            }

            #bankSelectionView .text-xl {
                font-size: 18px !important;
                margin-bottom: 2px !important;
            }

            #bankSelectionView .security-badge {
                padding: 4px 10px !important;
                font-size: 11px !important;
            }

            #bankSelectionView .card {
                padding: 10px !important;
                margin-bottom: 10px !important;
            }

            #bankSelectionView .text-center.mb-3:first-of-type {
                margin-bottom: 8px !important;
            }

            #bankSelectionView .text-xs {
                font-size: 11px !important;
            }

            #bankSelectionView .text-lg {
                font-size: 16px !important;
            }

            #bankSelectionView .order-info-card {
                padding: 12px !important;
            }

            #bankSelectionView .text-3xl {
                font-size: 24px !important;
            }

            #bankSelectionView .grid.grid-cols-2 {
                gap: 10px;
            }

            #bankSelectionView .grid.grid-cols-2 .card {
                padding: 12px 8px !important;
            }

            #bankSelectionView .bank-logo-container {
                width: 36px !important;
                height: 36px !important;
                margin-bottom: 6px !important;
            }

            #bankSelectionView .bank-logo-container .w-8 {
                width: 24px !important;
                height: 24px !important;
            }

            #bankSelectionView .text-sm {
                font-size: 12px !important;
            }

            /* ========== PAYMENT INSTRUCTIONS VIEW ========== */
            #paymentInstructionsView {
                justify-content: space-between !important;
                padding-top: 4px !important;
                padding-bottom: 4px !important;
            }

            #paymentInstructionsView > div:first-child {
                flex-shrink: 0 !important;
            }

            #paymentInstructionsView .flex.items-center.justify-between.mb-2 {
                margin-bottom: 8px !important;
            }

            #paymentInstructionsView button:first-of-type {
                padding: 5px 8px !important;
                font-size: 11px !important;
            }

            #paymentInstructionsView button:first-of-type svg {
                width: 14px !important;
                height: 14px !important;
            }

            #paymentInstructionsView .flex.items-center.gap-3.mb-3 {
                margin-bottom: 10px !important;
            }

            #selectedBankLogo {
                width: 40px !important;
                height: 40px !important;
            }

            #selectedBankLogo .w-8 {
                width: 28px !important;
                height: 28px !important;
            }

            #selectedBankLogo .text-sm {
                font-size: 14px !important;
            }

            #paymentInstructionsView .text-xs {
                font-size: 11px !important;
            }

            #paymentInstructionsView .text-base {
                font-size: 14px !important;
            }

            /* Payment Details Card */
            #paymentInstructionsView .card {
                padding: 12px !important;
                margin-bottom: 8px !important;
            }

            #paymentInstructionsView .text-xl {
                font-size: 20px !important;
            }

            #paymentInstructionsView .w-4 {
                width: 16px !important;
                height: 16px !important;
            }

            #paymentInstructionsView .grid.grid-cols-2 {
                gap: 10px !important;
            }

            #paymentInstructionsView .grid.grid-cols-2 .text-sm {
                font-size: 12px !important;
            }

            #paymentInstructionsView .font-mono {
                font-size: 13px !important;
            }

            #paymentInstructionsView .text-lg {
                font-size: 17px !important;
            }

            /* I've Paid Button - Always visible at bottom */
            #paymentInstructionsView .btn-primary {
                width: 100% !important;
                padding: 14px 20px !important;
                font-size: 28px !important;
                font-weight: 700 !important;
                margin-top: auto !important;
                flex-shrink: 0 !important;
            }

            /* Progress indicators */
            #cameraView > div:first-child,
            #uploadView > div:first-child {
                display: flex !important;
            }

            /* Camera/upload views */
            #cameraView,
            #uploadView {
                gap: 0 !important;
                overflow: hidden !important;
            }

            /* Back button - bigger and touchable */
            #cameraView button:first-of-type,
            #uploadView button:first-of-type {
                padding: 7px 10px !important;
                font-size: 12px !important;
                margin-bottom: 6px !important;
                shrink: 0 !important;
                height: auto !important;
            }

            #cameraView button:first-of-type svg,
            #uploadView button:first-of-type svg {
                width: 14px !important;
                height: 14px !important;
            }

            /* Camera viewfinder - flex with max height cap (20% bigger) */
            .camera-viewfinder {
                flex: 1 !important;
                min-height: 0 !important;
                max-height: 420px !important;
            }

            .camera-viewfinder button {
                width: 44px !important;
                height: 44px !important;
            }

            /* Drop zone - flex with max height cap (20% bigger) */
            #dropZone {
                padding: 10px !important;
                flex: 1 !important;
                min-height: 0 !important;
                max-height: 420px !important;
            }

            #dropZone svg {
                width: 28px !important;
                height: 28px !important;
                margin-bottom: 3px !important;
            }

            #dropZone .text-sm {
                font-size: 13px !important;
                margin-bottom: 1px !important;
            }

            #dropZone .text-xs {
                font-size: 11px !important;
                margin-bottom: 1px !important;
            }

            #dropZone .btn-secondary {
                padding: 6px 12px !important;
                font-size: 11px !important;
                margin-top: 3px !important;
            }

            /* Success view - keep text large, reduce spacing */
            #successView {
                padding-top: 0 !important;
                padding-bottom: 4px !important;
                overflow: hidden !important;
            }

            /* Hide verified seal on mobile to save vertical space */
            #successView .verified-seal {
                display: none !important;
            }

            /* Hide payment method badge on success to save space */
            #successView .payment-method-badge {
                display: none !important;
            }

            /* Reduce card margins */
            #successView .card {
                margin-bottom: 8px !important;
            }

            /* Quick actions - keep functional but compact */
            #successView .grid.grid-cols-4 {
                gap: 6px !important;
                margin-bottom: 8px !important;
            }

            #successView .grid.grid-cols-4 button {
                padding: 8px 4px !important;
            }

            /* Return button - prominent */
            #successView .btn-primary {
                padding: 14px 20px !important;
                font-size: 16px !important;
            }

            /* Hide notification on mobile to save space */
            #successView .mt-1.text-center.py-1\.5 {
                display: none !important;
            }
        }

        /* Landscape mobile mode */
        @media (orientation: landscape) and (max-height: 600px) {
            html, body {
                height: auto !important;
                overflow-y: auto !important;
            }

            #paymentPage {
                padding-top: 8px !important;
                padding-bottom: 8px !important;
                overflow: hidden !important;
                min-height: auto !important;
            }

            /* Reduce padding for compact header in landscape */
            #orderHeaderCompact .card {
                padding: 8px 10px;
                margin-bottom: 6px;
            }

            #orderHeaderCompact .merchant-branding-bar {
                margin-bottom: 6px !important;
                padding-bottom: 6px !important;
            }

            #orderHeaderCompact #merchantLogoContainer,
            #orderHeaderCompact .merchant-initials {
                width: 32px !important;
                height: 32px !important;
                font-size: 12px !important;
            }

            #orderHeaderCompact #merchantNameDisplay {
                font-size: 13px !important;
            }

            #orderHeaderCompact .merchant-powered-by {
                font-size: 10px !important;
            }

            #orderHeaderCompact .text-base {
                font-size: 14px;
            }

            #orderHeaderCompact .text-lg {
                font-size: 14px;
            }

            /* Method selection view adjustments */
            #methodSelectionView {
                padding-top: 4px;
                padding-bottom: 4px;
                flex: 0 0 auto !important;
                min-height: auto !important;
            }

            #methodSelectionView .text-center.mb-4 {
                margin-bottom: 6px !important;
            }

            #methodSelectionView .text-xl {
                font-size: 16px;
            }

            #methodSelectionView .text-2xl {
                font-size: 20px;
            }

            #methodSelectionView .w-12 {
                width: 28px;
                height: 28px;
                margin-bottom: 2px !important;
            }

            #methodSelectionView .w-12.h-12 {
                width: 28px !important;
                height: 28px !important;
            }

            /* Full order card in landscape */
            #methodSelectionView .card {
                padding: 10px 12px;
                margin-bottom: 8px !important;
            }

            /* Method buttons grid */
            .grid.grid-cols-2 {
                gap: 8px;
            }

            .grid.grid-cols-2 button {
                padding: 12px;
            }

            .grid.grid-cols-2 .text-sm {
                font-size: 12px;
            }

            /* Camera/upload views */
            #cameraView,
            #uploadView {
                padding-top: 2px;
            }

            /* Upload zone compression */
            #dropZone {
                padding: 12px !important;
            }

            #dropZone .w-10 {
                width: 28px !important;
                height: 28px !important;
                margin-bottom: 6px !important;
            }

            #dropZone .text-sm {
                font-size: 11px !important;
                margin-bottom: 2px !important;
            }

            #dropZone .text-xs {
                font-size: 10px !important;
                margin-bottom: 4px !important;
            }

            #dropZone .btn-secondary {
                padding: 6px 12px !important;
                font-size: 11px !important;
            }

            /* Camera view compression */
            #cameraView .camera-viewfinder {
                border-radius: 6px;
            }

            .camera-viewfinder button {
                width: 44px !important;
                height: 44px !important;
            }

            .camera-viewfinder button .w-8 {
                width: 24px !important;
                height: 24px !important;
            }

            .camera-viewfinder .text-xs {
                font-size: 10px !important;
            }

            /* Processing view text sizes */
            #processingView .text-base {
                font-size: 14px;
            }

            #processingView .text-xs {
                font-size: 11px;
            }

            /* Success view adjustments */
            #successView {
                padding-top: 4px;
                padding-bottom: 4px;
            }

            #successView .pt-6 {
                padding-top: 8px !important;
            }

            #successView .pb-4 {
                padding-bottom: 4px !important;
            }

            #successView .w-16 {
                width: 40px;
                height: 40px;
                margin-bottom: 6px !important;
            }

            #successView .text-3xl {
                font-size: 20px;
                margin-bottom: 4px !important;
            }

            #successView .text-sm {
                font-size: 12px;
                margin-bottom: 4px !important;
            }

            #successView .card {
                padding: 12px !important;
                margin-bottom: 6px !important;
            }

            #successView .space-y-3 {
                gap: 8px !important;
            }

            /* Share section grid */
            #successView .grid.grid-cols-4 {
                gap: 4px;
            }

            #successView .grid.grid-cols-4 button {
                padding: 6px 4px;
                border-radius: 4px;
            }

            #successView .grid.grid-cols-4 .w-4 {
                width: 14px !important;
                height: 14px !important;
            }

            #successView .grid.grid-cols-4 .text-xs {
                font-size: 9px;
                margin-top: 0;
            }

            #successView .grid.grid-cols-4 button {
                padding: 6px;
                border-radius: 4px;
            }

            #successView .grid.grid-cols-4 .w-5 {
                width: 16px;
                height: 16px;
            }

            #successView .grid.grid-cols-4 .text-xs {
                font-size: 9px;
                margin-top: 2px;
            }

            /* Return button */
            #successView .btn-primary {
                padding: 10px 12px;
                font-size: 13px;
            }

            /* Error view */
            #errorView .text-xl {
                font-size: 18px;
            }

            #errorView .w-12 {
                width: 32px;
                height: 32px;
            }

            #errorView button {
                padding: 10px 16px;
                font-size: 14px;
            }
        }

        /* Desktop mode */
        @media (min-width: 768px) {
            #paymentPage {
                padding-top: 32px !important;
                padding-bottom: 64px !important;
                padding-left: 16px !important;
                padding-right: 16px !important;
            }

            #paymentPage > .w-full {
                max-width: 500px !important;
            }

            /* Method selection view */
            #methodSelectionView .text-center.mb-4 {
                margin-bottom: 16px !important;
            }

            #methodSelectionView .text-xl {
                font-size: 24px;
            }

            #methodSelectionView .w-12 {
                width: 56px;
                height: 56px;
                margin-bottom: 8px !important;
            }

            /* Full order card */
            #methodSelectionView .card {
                padding: 32px;
                margin-bottom: 24px !important;
            }

            /* Merchant branding in compact header - desktop */
            #orderHeaderCompact .card {
                padding: 16px 20px !important;
            }

            #orderHeaderCompact .merchant-branding-bar {
                margin-bottom: 16px !important;
                padding-bottom: 16px !important;
            }

            #orderHeaderCompact #merchantLogoContainer,
            #orderHeaderCompact .merchant-initials {
                width: 48px !important;
                height: 48px !important;
                font-size: 18px !important;
            }

            #orderHeaderCompact #merchantNameDisplay {
                font-size: 16px !important;
            }

            #orderHeaderCompact .merchant-powered-by {
                font-size: 12px !important;
            }

            #methodSelectionView .text-xs {
                font-size: 13px;
            }

            #methodSelectionView .w-12.h-12 {
                width: 48px;
                height: 48px;
                margin-bottom: 8px !important;
            }

            /* Method buttons */
            .grid.grid-cols-2 {
                gap: 16px;
            }

            .grid.grid-cols-2 button {
                padding: 20px;
            }

            /* Camera/upload views */
            #cameraView,
            #uploadView {
                padding-top: 12px;
            }

            #cameraView .mb-2 {
                margin-bottom: 8px !important;
            }

            /* Upload zone */
            .upload-zone {
                padding: 24px;
            }

            .upload-zone .w-12 {
                width: 48px;
                height: 48px;
                margin-bottom: 12px !important;
            }

            /* Processing view */
            #processingView .card {
                padding: 32px;
            }

            #processingView .w-10 {
                width: 48px;
                height: 48px;
                margin-bottom: 16px !important;
            }

            #processingView .text-base {
                font-size: 18px;
            }

            #processingView .text-xs {
                font-size: 13px;
            }

            #processingView .max-w-xs {
                max-width: 100% !important;
            }

            /* Success view - desktop with larger accessibility */
            #successView {
                padding-top: 12px;
                padding-bottom: 12px;
            }

            #successView .pt-6 {
                padding-top: 12px !important;
            }

            #successView .text-2xl {
                font-size: 24px;
                margin-bottom: 4px !important;
            }

            #successView .text-sm {
                font-size: 15px;
            }

            #successView .card {
                padding: 16px !important;
                margin-bottom: 8px !important;
                border-radius: 12px;
            }

            #successView .w-18 {
                width: 72px !important;
                height: 90px !important;
                font-size: 12px !important;
            }

            #successView .text-sm {
                font-size: 14px !important;
            }

            #successView .text-base {
                font-size: 16px !important;
            }

            #successView .space-y-2 {
                gap: 8px !important;
            }

            #successView .space-y-2 > div {
                margin-bottom: 0 !important;
            }

            #successView .font-mono {
                font-size: 14px !important;
            }

            /* Share section */
            #successView .grid.grid-cols-4 {
                gap: 8px;
            }

            #successView .grid.grid-cols-4 button {
                padding: 10px 8px;
                border-radius: 10px;
                min-height: 64px;
            }

            #successView .grid.grid-cols-4 .w-4 {
                width: 20px !important;
                height: 20px !important;
            }

            #successView .grid.grid-cols-4 .text-xs {
                font-size: 12px;
                margin-top: 2px;
            }

            /* Return button */
            #successView .btn-primary {
                padding: 14px 24px;
                font-size: 16px;
                border-radius: 10px;
                min-height: 52px;
            }

            /* Error view */
            #errorView .w-12 {
                width: 48px;
                height: 48px;
                margin-bottom: 16px !important;
            }

            #errorView .text-xl {
                font-size: 22px;
            }

            #errorView button {
                padding: 16px 32px;
                font-size: 15px;
            }
        }

        /* Tablet/Desktop hybrid (landscape tablets) */
        @media (min-width: 768px) and (max-height: 600px) {
            #paymentPage {
                padding-top: 16px !important;
                padding-bottom: 20px !important;
            }

            #paymentPage > .w-full {
                max-width: 450px !important;
            }

            #methodSelectionView .text-3xl {
                font-size: 24px;
            }

            #successView .text-3xl {
                font-size: 24px;
            }

            /* Share section grid - reduce size for compact screens */
            #successView .grid.grid-cols-4 button {
                padding: 12px;
            }

            #successView .grid.grid-cols-4 .w-5 {
                width: 20px;
                height: 20px;
            }
        }