/* ===== تحسينات النوافذ المنبثقة للهواتف المحمولة ===== */

/* تحسينات عامة للنوافذ المنبثقة على الهواتف */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 10px;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    .modal-content {
        max-width: 85%;
        width: 85%;
        height: auto !important;
        max-height: 85vh !important;
        min-height: 200px;
        margin: auto;
        padding: 15px;
        /* Reduced padding */
        border-radius: 20px;
        /* Slightly less rounded */
        overflow-y: auto;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* تحسين أزرار الإغلاق */
    .modal-content button[onclick*="close"],
    .modal-content .btn-secondary {
        min-height: 38px;
        /* Reduced height */
        font-size: 0.85rem;
        /* Reduced font */
        padding: 8px 15px;
        /* Reduced padding */
    }

    /* تحسين العناوين */
    .modal-content h2,
    .modal-content h3 {
        font-size: 1.1rem;
        /* Reduced from 1.3rem */
        margin-bottom: 10px;
        /* Reduced margin */
        line-height: 1.3;
    }

    /* تحسين النصوص */
    .modal-content p {
        font-size: 0.85rem;
        /* Reduced from 0.9rem */
        line-height: 1.4;
    }

    /* تحسين الحقول */
    .modal-content .form-input,
    .modal-content input,
    .modal-content textarea,
    .modal-content select {
        font-size: 14px;
        /* Reduced font */
        min-height: 38px;
        /* Reduced height */
        padding: 8px;
        /* Reduced padding */
    }

    /* تحسين الأزرار */
    .modal-content .btn {
        min-height: 38px;
        /* Reduced height */
        font-size: 0.9rem;
        /* Reduced font */
        padding: 8px 15px;
        width: 100%;
    }

    /* تحسين المسافات بين الأزرار */
    .modal-content .flex-center,
    .modal-content .flex-between {
        gap: 25px;
        /* Significantly increased gap */
        flex-wrap: wrap;
    }

    /* QR Scanner Modal - تحسينات خاصة */
    #qrScannerModal .modal-content {
        max-width: 98%;
        width: 98%;
        padding: 15px;
    }

    #qrReader {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto !important;
        border-radius: 15px;
        overflow: hidden;
    }

    #scannerStatus {
        font-size: 0.9rem;
        padding: 10px;
        margin: 10px 0;
    }

    /* تحسين أزرار QR Scanner */
    #qrScannerModal .btn {
        min-height: 48px;
        font-size: 1rem;
        padding: 14px 20px;
    }

    /* تحسين نافذة تفاصيل الطلب */
    .qr-container {
        margin: 15px auto;
        padding: 10px;
    }

    /* تحسين الجداول في النوافذ */
    .modal-content .mgmt-table-container {
        overflow-x: auto;
    }

    .modal-content table {
        font-size: 0.85rem;
    }

    .modal-content table th,
    .modal-content table td {
        padding: 8px;
    }
}

/* تحسينات للهواتف الصغيرة جداً */
@media (max-width: 480px) {
    .modal-overlay {
        padding: 5px;
    }

    .modal-content {
        max-width: 85%;
        width: 85%;
        height: auto !important;
        max-height: 90vh !important;
        min-height: 180px;
        margin: auto;
        padding: 12px;
        /* Even smaller padding */
        border-radius: 18px;
        aspect-ratio: auto;
        overflow-y: auto;
    }

    .modal-content h2,
    .modal-content h3 {
        font-size: 1rem;
        /* Even smaller font */
        margin-bottom: 8px;
    }

    .modal-content p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* تحسين الأزرار للشاشات الصغيرة */
    .modal-content .flex-center,
    .modal-content .flex-between {
        flex-direction: column;
        gap: 10px;
    }

    .modal-content .btn {
        width: 100%;
        min-height: 48px;
        font-size: 0.9rem;
    }

    /* QR Scanner للشاشات الصغيرة */
    #qrScannerModal .modal-content {
        padding: 12px;
    }

    #qrReader {
        margin: 10px auto !important;
        min-height: 200px;
    }

    #scannerStatus {
        font-size: 0.85rem;
        padding: 8px;
    }

    /* تحسين الجداول */
    .modal-content table {
        font-size: 0.75rem;
    }

    .modal-content table th,
    .modal-content table td {
        padding: 6px 4px;
    }

    /* تحسين صور المنتجات في النوافذ */
    .modal-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }

    /* Ensure QR codes remain square regardless of parent img styles */
    #guestOrderQRCode img,
    #guestOrderQRCode canvas,
    #guestOrderQRCodeViewer img,
    #guestOrderQRCodeViewer canvas,
    #buyerOrderQRCode img,
    #buyerOrderQRCode canvas,
    .receipt-qr-container img,
    .receipt-qr-container canvas,
    .qr-container img,
    .qr-container canvas,
    .qr-code-container img,
    .qr-code-container canvas {
        border-radius: 0 !important;
    }
}

/* تحسينات للأجهزة ذات الشاشات العريضة (Landscape) */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-content {
        max-height: 95vh;
        overflow-y: auto;
    }

    #qrReader {
        max-width: 400px !important;
        margin: 10px auto !important;
    }
}

/* تحسين التمرير السلس */
.modal-content {
    scroll-behavior: smooth;
}

/* تحسين التفاعل باللمس */
@media (hover: none) and (pointer: coarse) {
    .modal-content .btn {
        min-height: 48px;
        padding: 14px 20px;
    }

    .modal-content .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* تحسين حجم الأهداف القابلة للنقر */
    .modal-content button,
    .modal-content a,
    .modal-content input[type="checkbox"],
    .modal-content input[type="radio"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* تحسين الوضع الليلي للنوافذ على الهواتف */
@media (max-width: 768px) {
    .dark-mode .modal-overlay {
        background: rgba(0, 0, 0, 0.7);
    }

    .dark-mode .modal-content {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    }
}