/**
 * Responsive Design — توحيد التجاوب على جميع الشاشات
 * Breakpoints: 576px (mobile), 768px (tablet), 992px (desktop), 1200px (large)
 */

/* ========== Auth Pages — خلفية متجاوبة ========== */
.auth-bg-circle {
    animation: float 6s ease-in-out infinite;
}
.auth-bg-circle-2 { animation: float 8s ease-in-out infinite reverse; }
.auth-bg-circle-3 { animation: pulse-glow 4s ease-in-out infinite; }

/* Login */
body.auth-login-page .auth-bg-circle-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
    top: -200px; left: -200px;
}
body.auth-login-page .auth-bg-circle-2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(118, 75, 162, 0.3) 0%, transparent 70%);
    bottom: -300px; right: -300px;
}
body.auth-login-page .auth-bg-circle-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.2) 0%, transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* Register */
body.auth-register-page .auth-bg-circle-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(240, 147, 251, 0.3) 0%, transparent 70%);
    top: -200px; right: -200px;
}
body.auth-register-page .auth-bg-circle-2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(245, 87, 108, 0.3) 0%, transparent 70%);
    bottom: -300px; left: -300px;
}
body.auth-register-page .auth-bg-circle-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.2) 0%, transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    body.auth-login-page .auth-bg-circle-1,
    body.auth-register-page .auth-bg-circle-1 {
        width: 280px; height: 280px;
        top: -120px;
    }
    body.auth-login-page .auth-bg-circle-1 { left: -120px; }
    body.auth-register-page .auth-bg-circle-1 { right: -120px; }
    body.auth-login-page .auth-bg-circle-2,
    body.auth-register-page .auth-bg-circle-2 {
        width: 320px; height: 320px;
        bottom: -150px;
    }
    body.auth-login-page .auth-bg-circle-2 { right: -150px; }
    body.auth-register-page .auth-bg-circle-2 { left: -150px; }
    body.auth-login-page .auth-bg-circle-3,
    body.auth-register-page .auth-bg-circle-3 {
        width: 220px; height: 220px;
    }
}

@media (max-width: 576px) {
    .auth-section { padding-top: 1rem !important; padding-bottom: 1.5rem !important; min-height: calc(100vh - 100px) !important; }
    .auth-card .card-body { padding: 1rem 1.25rem !important; }
    .auth-card .gradient-bg, .auth-card .gradient-bg-2 { padding: 1rem !important; }
    .auth-card .gradient-bg .display-4, .auth-card .gradient-bg-2 .display-4 { font-size: 2rem !important; }
    body.auth-login-page .auth-bg-circle-1,
    body.auth-register-page .auth-bg-circle-1 {
        width: 180px; height: 180px;
        top: -80px;
    }
    body.auth-login-page .auth-bg-circle-1 { left: -80px; }
    body.auth-register-page .auth-bg-circle-1 { right: -80px; }
    body.auth-login-page .auth-bg-circle-2,
    body.auth-register-page .auth-bg-circle-2 {
        width: 200px; height: 200px;
        bottom: -80px;
    }
    body.auth-login-page .auth-bg-circle-2 { right: -80px; }
    body.auth-register-page .auth-bg-circle-2 { left: -80px; }
    body.auth-login-page .auth-bg-circle-3,
    body.auth-register-page .auth-bg-circle-3 {
        width: 140px; height: 140px;
    }
}

/* ========== Mobile First — Base ========== */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ========== 576px — هواتف صغيرة ========== */
@media (max-width: 576px) {
    .container, .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* كروت تسجيل الدخول والتسجيل */
    .glass-effect-card {
        max-width: 100% !important;
        margin: 0 0.5rem !important;
    }
    
    /* النماذج */
    .form-control, .input-group {
        font-size: 16px; /* منع zoom على iOS */
    }
    
    /* أزرار بعرض كامل */
    .btn-lg, .btn-gradient {
        width: 100%;
    }
    
    /* كروت الفئات */
    .category-card-body,
    .site-card-body {
        padding: 0.9rem 1rem !important;
    }
    
    .subcategory-item .card {
        min-height: 200px !important;
    }
    
    /* كروت الميزات */
    .feature-cards-section .category-card {
        min-height: 220px !important;
        padding: 1rem !important;
    }
    
    .feature-cards-section .category-card-icon-wrap {
        width: 70px;
        height: 70px;
    }
    
    .feature-cards-section .category-card-icon-wrap .bi {
        font-size: 2rem;
    }
    
    /* Hero */
    .hero-character img {
        max-width: 100% !important;
    }
    
    /* Toast */
    .site-toast-container {
        width: calc(100% - 1.5rem) !important;
        max-width: 100% !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem) !important;
    }
}

/* ========== 768px — تابلت ========== */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
    }
    
    /* ترويسة الصفحات */
    .page-header h1, .section-title {
        font-size: 1.5rem !important;
    }
    
    /* Footer — تكديس عمودي على الموبايل */
    .footer-new .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .footer-new .row {
        gap: 2rem;
    }
    
    .footer-new h5 {
        font-size: 1.1rem;
    }
    
    .footer-new .footer-payment-methods {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Bottom nav */
    body.has-bottom-nav {
        padding-bottom: 70px !important;
    }
}

/* Footer على الهواتف الصغيرة */
@media (max-width: 576px) {
    .footer-new {
        padding-top: 2rem !important;
        padding-bottom: 5rem !important; /* مساحة للـ bottom nav */
    }
    
    .footer-new .footer-bottom-link,
    .footer-new .d-flex.gap-3 {
        font-size: 0.85rem;
    }
}

/* ========== 768px — تابلت (شاشات صغيرة) ========== */
@media (max-width: 767.98px) {
    body.has-announcement-bar {
        padding-top: 115px !important;
    }
}

/* ========== 992px — ديسكتوب صغير ========== */
@media (max-width: 991.98px) {
    .navbar-links-center {
        display: none !important;
    }
    
    /* البحث في النافبار */
    .navbar-search-wrap {
        min-width: 0 !important;
        flex: 1;
        max-width: 100%;
    }
    
    /* منسدلات النافبار على الشاشات الصغيرة */
    .navbar .navbar-currency-dropdown {
        min-width: min(200px, 90vw);
    }
    .navbar .dropdown-menu {
        min-width: min(220px, 90vw);
    }
}

/* ========== 1200px — ديسكتوب كبير ========== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* ========== منع التمرير الأفقي ========== */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ========== جداول متجاوبة ========== */
@media (max-width: 576px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }
    
    .table {
        min-width: 400px;
    }
}

/* ========== لوحة التحكم (Dashboard) ========== */
body.dashboard-page .theme-shadaty-content,
body.frontend-page .theme-shadaty-content {
    overflow-x: hidden;
}

@media (max-width: 991px) {
    body.dashboard-page .user-dashboard-main,
    .user-dashboard-main {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* مساحة للـ bottom nav على صفحات لوحة التحكم والمحفظة */
    .user-dashboard-wrap {
        padding-bottom: 5rem !important;
    }
}

@media (max-width: 576px) {
    body.dashboard-page .container,
    body.dashboard-page .container-fluid,
    .user-dashboard-wrap.container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ========== صفحة المحفظة (Balance) ========== */
.balance-page .container {
    max-width: 100%;
}

@media (max-width: 576px) {
    .balance-page .beautiful-card .card-body {
        overflow-x: hidden;
    }
    .balance-page .input-group,
    .balance-page .form-control,
    .balance-page .form-select {
        max-width: 100%;
    }
}

/* ========== صور المنتجات والخدمات ========== */
@media (max-width: 768px) {
    .product-image-wrapper,
    .service-image-wrapper {
        max-height: 280px;
        overflow: hidden;
    }
    
    .product-image-wrapper img,
    .service-image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* ========== صفحة شحن الرصيد (Balance) ========== */
.balance-page .balance-page-header { padding: 1.5rem 1rem !important; }
@media (max-width: 768px) {
  .balance-page .balance-page-header { padding: 1.25rem 0.75rem !important; }
  .balance-page .balance-card, .balance-page .debt-card, .balance-page .credit-card { min-width: 0; flex: 1 1 100%; }
  .balance-page .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .balance-page .table { min-width: 450px; }
}
@media (max-width: 576px) {
  .balance-page .balance-page-header { padding: 1rem 0.5rem !important; }
  .balance-page .section-header::after { width: 60px !important; }
  .balance-page .form-select-lg, .balance-page .form-control, .balance-page .input-group-lg .form-control { font-size: 16px !important; }
  .balance-page .table thead th, .balance-page .table tbody td { padding: 0.5rem 0.75rem !important; font-size: 0.85rem; }
  .balance-page .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem) !important; }
  .balance-page .qr-code-container img { max-width: min(130px, 80vw) !important; max-height: min(130px, 80vw) !important; }
}