/* ===========================================
   responsive.css
   Mobile & Tablet Responsive Styles
   Last loaded — overrides main & components
   للتكيف والتبريد (Cooling & Refrigeration)
   =========================================== */

/* Large Desktop: 1400px+ */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* Small Desktop / Large Tablet: 992px - 1199px */
@media (max-width: 1199px) {
  .container { max-width: 960px; }
}

/* Tablet: 768px - 991px */
@media (max-width: 991px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 2.2rem; }
  .hero p { font-size: 1rem; }
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .step::after { display: none; }
  .timeline::before { display: none; }
  .timeline-item { padding: 20px 0; }
  .timeline-dot { position: relative; top: auto; right: auto; left: auto; margin-bottom: 10px; }
  .hamburger { display: flex; }
  .nav-menu { display: none; }
  .mobile-menu { display: none; }
  .mobile-menu.active { display: flex; }
  .blog-article { max-width: 100%; padding: 0 15px; }
}

/* Mobile: 480px - 767px */
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4, .footer-grid, .values-grid, .problems-grid, .process-steps { grid-template-columns: 1fr; }
  .container { padding-left: 15px; padding-right: 15px; }
  .section { padding: 40px 0; }
  .section-header { margin-bottom: 30px; }
  .hero { min-height: 80vh; text-align: center; }
  .hero h1 { font-size: 1.8rem; }
  .hero h2 { font-size: 1.3rem; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 15px; }
  .hero-stats .stat-number { font-size: 1.8rem; }
  .btn { width: 100%; justify-content: center; }
  .whatsapp-float, .call-float { width: 50px; height: 50px; font-size: 1.2rem; }
  .whatsapp-float { bottom: 20px; }
  .call-float { bottom: 80px; }
  html[lang="ar"] .whatsapp-float, html[lang="ar"] .call-float { right: 20px; }
  html[lang="en"] .whatsapp-float, html[lang="en"] .call-float { left: 20px; }
  .map-container { height: 250px; }
  .contact-form { padding: 20px; }
  .blog-card { margin-bottom: 20px; }
  .pricing-table-wrapper { overflow-x: auto; }
  .pricing-table { min-width: 500px; }
  .faq-categories { gap: 8px; }
  .faq-cat-btn { padding: 8px 16px; font-size: 0.9rem; }
  .emergency-phone { font-size: 1.8rem; }
}

/* Small Mobile: 320px - 479px */
@media (max-width: 479px) {
  .hero h1 { font-size: 1.5rem; }
  .hero h2 { font-size: 1.2rem; }
  .section h2 { font-size: 1.3rem; }
  .section h3 { font-size: 1.1rem; }
  .stats-counter { font-size: 2rem; }
  .emergency-phone { font-size: 1.5rem; }
  .section-header { margin-bottom: 30px; }
  .whatsapp-float, .call-float { width: 45px; height: 45px; font-size: 1rem; }
  .call-float { bottom: 75px; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { font-size: 0.95rem; padding: 12px 20px; }
  .card, .contact-form { padding: 20px; }
}

/* RTL / LTR Mobile positioning */
html[lang="ar"] { text-align: right; }
html[lang="en"] { text-align: left; }
html[lang="ar"] .mobile-menu { text-align: right; }
html[lang="en"] .mobile-menu { text-align: left; }
html[lang="ar"] .whatsapp-float, html[lang="ar"] .call-float { left: auto; right: 20px; }
html[lang="en"] .whatsapp-float, html[lang="en"] .call-float { right: auto; left: 20px; }

@media (max-width: 767px) {
  html[lang="ar"] .whatsapp-float, html[lang="ar"] .call-float { right: 15px; }
  html[lang="en"] .whatsapp-float, html[lang="en"] .call-float { left: 15px; }
}

/* Print Styles */
@media print {
  .navbar, .hamburger, .mobile-menu, .whatsapp-float, .call-float,
  .announcement-bar, .lang-toggle, .hero-btns, .btn, .footer,
  .emergency-banner, .whatsapp-btn-float, .back-to-top { display: none !important; }
  body { font-size: 14px; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
  .hero, .service-hero { background: none !important; color: #000; padding: 20px 0; min-height: auto; }
  .hero h1, .service-hero h1 { font-size: 1.8rem; }
  .print-visible { display: block !important; }
}
.print-visible { display: none; }