/* ===== FRONTEND RESPONSIVE CSS ===== */
/* تحسين التجاوب للموقع الأمامي */

/* ===== MOBILE (320px - 767px) ===== */
@media (max-width: 767px) {
    html { font-size: 14px; }
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    
    .navbar-brand { font-size: 1.2rem !important; }
    .navbar-nav .nav-link { padding: 0.5rem 1rem !important; font-size: 0.9rem; }
    
    .hero-section { min-height: 60vh; padding: 2rem 1rem; }
    .hero-section h1 { font-size: 2rem; margin-bottom: 1rem; }
    .hero-section p { font-size: 1rem; margin-bottom: 1.5rem; }
    
    .card { margin-bottom: 1rem; border-radius: 10px; }
    .card-body { padding: 1rem; }
    .card-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
    
    .product-card .card-img-top, .service-card .card-img-top { height: 200px; }
    
    .btn { padding: 0.5rem 1rem; font-size: 0.9rem; border-radius: 8px; }
    .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
    
    .form-control, .form-select { font-size: 0.9rem; padding: 0.5rem 0.75rem; }
    .form-label { font-size: 0.9rem; margin-bottom: 0.25rem; font-weight: 600; }
    
    .table-responsive { font-size: 0.8rem; }
    .table th, .table td { padding: 0.5rem 0.25rem; }
    
    .container { padding-left: 1rem; padding-right: 1rem; }
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    
    .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); }
    .modal-footer { flex-direction: column; gap: 0.5rem; }
    .modal-footer .btn { width: 100%; }
    
    .whatsapp-btn { width: 60px; height: 60px; font-size: 1.5rem; }
    .back-to-top { width: 50px; height: 50px; font-size: 1.2rem; }
}

/* ===== TABLET (768px - 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    html { font-size: 15px; }
    h1, .h1 { font-size: 2.25rem; }
    h2, .h2 { font-size: 1.875rem; }
    
    .hero-section { min-height: 70vh; padding: 3rem 2rem; }
    .hero-section h1 { font-size: 2.5rem; }
    .hero-section p { font-size: 1.1rem; }
    
    .product-card .card-img-top, .service-card .card-img-top { height: 250px; }
    .modal-dialog { max-width: 600px; }
    .modal-footer { flex-direction: row; gap: 0.5rem; }
    .modal-footer .btn { width: auto; }
    
    .whatsapp-btn { width: 70px; height: 70px; font-size: 1.75rem; }
    .back-to-top { width: 55px; height: 55px; font-size: 1.3rem; }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    html { font-size: 16px; }
    h1, .h1 { font-size: 2.5rem; }
    h2, .h2 { font-size: 2rem; }
    
    .hero-section { min-height: 80vh; padding: 4rem 2rem; }
    .hero-section h1 { font-size: 3rem; }
    .hero-section p { font-size: 1.25rem; }
    
    .product-card .card-img-top, .service-card .card-img-top { height: 300px; }
    .modal-dialog { max-width: 700px; }
    
    .whatsapp-btn { width: 80px; height: 80px; font-size: 2rem; }
    .back-to-top { width: 60px; height: 60px; font-size: 1.4rem; }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    .btn { min-height: 44px; min-width: 44px; }
    .nav-link { min-height: 44px; display: flex; align-items: center; }
    .form-control, .form-select { min-height: 44px; }
    .btn:hover, .card:hover, .nav-link:hover { transform: none !important; }
}

/* ===== UTILITY CLASSES ===== */
.d-none-mobile { display: none; }
@media (min-width: 768px) {
    .d-none-mobile { display: block; }
    .d-none-desktop { display: none; }
}

.text-center-mobile { text-align: center; }
@media (min-width: 768px) {
    .text-center-mobile { text-align: left; }
}