/* ============================================================ AlQaisi Medical Group — Mobile-Only Styles (RTL) ------------------------------------------------------------ IMPORTANT: Every rule in this file is scoped inside `@media (max-width: 575.98px)` so it ONLY affects phones (320px → 576px). Desktop, tablet and large screens are completely untouched. Loaded AFTER the page `@stack('styles')` in the . ============================================================ */ /* Visibility helpers moved to web.css (global) so tablet (576-991px) hides the mobile button/offcanvas correctly. */ /* ============================================================ BASE — typography, spacing, containers ============================================================ */ @media (max-width: 575.98px) { html { font-size: 15.5px; } body { font-size: 0.95rem; line-height: 1.65; overflow-x: hidden; } /* Tighter horizontal padding on phones */ .container-fluid.px-4 { padding-right: 1rem !important; padding-left: 1rem !important; } .container { --bs-gutter-x: 1rem; } /* Heading scale for phones */ h1, .h1 { font-size: 1.55rem !important; line-height: 1.35 !important; } h2, .h2 { font-size: 1.3rem !important; line-height: 1.35 !important; } h3, .h3 { font-size: 1.15rem !important; } h4, .h4 { font-size: 1.05rem !important; } h5, .h5 { font-size: 0.98rem !important; } h6, .h6 { font-size: 0.9rem !important; } .display-4 { font-size: 1.7rem !important; } /* Tighter section rhythm */ section.py-5 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; } section.py-4 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } section.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 > .container.py-4, .py-5 > .container.py-4, section > .container.py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } /* Page headers (breadcrumb hero) */ .page-header { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; } .page-header .container { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .page-header nav { font-size: 0.8rem; } /* Prevent images from overflowing the screen */ img { max-width: 100%; height: auto; } .img-fluid { width: 100%; } } /* ============================================================ PRELOADER ============================================================ */ @media (max-width: 575.98px) { .web-preloader img { width: 62px !important; height: 62px !important; } .web-preloader .spinner-border { --bs-spinner-width: 2rem; --bs-spinner-height: 2rem; } } /* ============================================================ NAVBAR (phone) + Mobile Offcanvas menu ============================================================ */ @media (max-width: 575.98px) { .web-navbar { padding-top: 0.35rem; padding-bottom: 0.35rem; } .web-navbar .navbar-brand img { width: 40px !important; height: 40px !important; } .web-navbar .navbar-brand div > div { font-size: 1rem !important; } /* Modern menu button (opens offcanvas) */ .navbar-toggler.mobile-only { padding: 0; border: 0; box-shadow: none !important; background: transparent; } .mobile-menu-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(var(--primary-rgb), 0.07); color: var(--primary); font-size: 1.1rem; transition: transform 0.2s ease, background 0.2s ease; } .mobile-menu-btn:active { transform: scale(0.92); } /* Offcanvas panel */ .web-mobile-offcanvas { width: 84% !important; max-width: 330px !important; background: #fff; border-inline-start: 1px solid rgba(0, 0, 0, 0.05); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12); } .web-mobile-offcanvas .offcanvas-header { padding: 1rem 1.15rem; border-bottom: 1px solid #eef2f7; background: #fbfdff; } .web-mobile-offcanvas .offcanvas-header .btn-close { box-shadow: none; font-size: 0.8rem; padding: 0.6rem; border-radius: 10px; } .web-mobile-offcanvas .offcanvas-body { padding: 0.75rem 0.9rem 1.25rem; } .mobile-nav-section-title { font-size: 0.72rem; font-weight: 800; color: #94a3b8; letter-spacing: 0.02em; margin: 0.9rem 0.4rem 0.3rem; display: flex; align-items: center; gap: 0.4rem; } .mobile-nav-section-title::after { content: ''; flex: 1; height: 1px; background: #eef2f7; } .mobile-nav-list { list-style: none; padding: 0; margin: 0; } .mobile-nav-list > li > a { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.7rem; margin-bottom: 0.15rem; color: #1e293b; font-weight: 600; font-size: 0.95rem; border-radius: 12px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .mobile-nav-list > li > a i { width: 20px; text-align: center; color: var(--primary); font-size: 0.95rem; } .mobile-nav-list > li > a.active, .mobile-nav-list > li > a:active { color: var(--primary); background: rgba(var(--primary-rgb), 0.07); } .mobile-nav-list .mobile-nav-sub { padding-inline-start: 0.4rem; } .mobile-nav-list .mobile-nav-sub a { padding: 0.6rem 1.4rem; font-weight: 500; font-size: 0.88rem; color: #475569; border-radius: 10px; } .mobile-nav-list .mobile-nav-sub a i { font-size: 0.75rem; width: 18px; } /* Action buttons inside offcanvas */ .mobile-menu-actions { margin-top: 1.1rem; border-top: 1px solid #eef2f7; padding-top: 1rem; } .mobile-menu-actions .btn { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; border-radius: 12px; font-size: 0.92rem; } .mobile-menu-actions .row { --bs-gutter-x: 0.5rem; } } /* ============================================================ HERO ============================================================ */ @media (max-width: 575.98px) { .hero-section { min-height: 54vh !important; } .hero-section .swiper-slide, .hero-section .swiper-slide > .position-absolute, .hero-section .swiper-slide .container, .hero-section .swiper-slide .container .row { min-height: 54vh !important; } .hero-section .swiper-slide .container .row { padding-top: 0.75rem !important; padding-bottom: 3rem !important; } .hero-section h1 { font-size: 1.6rem !important; } .hero-section .badge { font-size: 0.7rem !important; padding: 0.3rem 0.8rem !important; } .hero-section p { font-size: 0.85rem !important; margin-bottom: 1rem !important; } /* Full-width, touch-friendly hero buttons */ .hero-section .d-flex.gap-2.flex-wrap .btn { flex: 1 1 100%; min-height: 48px; font-size: 0.95rem; font-weight: 700; border-radius: 50rem; } .hero-section .swiper-pagination { bottom: 10px !important; } } /* ============================================================ BUTTONS — larger, thumb-friendly, uniform ============================================================ */ @media (max-width: 575.98px) { .btn:not(.btn-sm) { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 12px; font-weight: 600; font-size: 0.95rem; } .btn-sm { min-height: 38px; display: inline-flex; align-items: center; gap: 0.3rem; } .btn-lg { min-height: 52px; } /* Section header rows: stack the "view all" button full width */ .section-head-row .btn-outline-primary, .d-flex.justify-content-between .btn-outline-primary { width: 100%; margin-top: 0.75rem; } } /* ============================================================ HOME — cards grids (2/2/2/3/1) + card polish ============================================================ */ @media (max-width: 575.98px) { /* Departments — 2 per row */ #departments .col-6 .dept-card .card-body { padding: 0.9rem 0.6rem; } .dept-card .dept-icon-wrap { width: 54px !important; height: 54px !important; } .dept-card h5 { font-size: 0.92rem !important; } .dept-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.78rem !important; } .dept-card-footer small { font-size: 0.72rem !important; } /* Doctors — 2 per row */ .doctor-card .position-relative { height: 140px !important; } .doctor-card h6 { font-size: 0.86rem !important; } .doctor-card p { font-size: 0.72rem !important; } .doctor-card-footer { padding: 0.45rem 0.6rem !important; } .doctor-card-footer small { font-size: 0.7rem !important; } .doctor-card-footer .badge { font-size: 0.62rem !important; padding: 0.25rem 0.45rem !important; } /* News — 2 per row (was horizontal scroll on desktop) */ .news-track { flex-wrap: wrap !important; overflow-x: visible !important; } .news-item { width: calc(50% - 0.5rem) !important; } .news-scroll::before, .news-scroll::after { display: none !important; } .news-card .card-body { padding: 0.7rem 0.6rem !important; } .news-card h6 { font-size: 0.82rem !important; } .news-card p { font-size: 0.72rem !important; } .news-card .btn { min-height: 36px; font-size: 0.75rem !important; } /* Insurance — 3 per row */ .insurance-card { min-height: 86px !important; padding: 0.5rem 0.35rem !important; } .insurance-card img { max-height: 38px !important; } .insurance-card h6 { font-size: 0.68rem !important; } /* Testimonials — 1 per row (readable quotes) */ .testimonial-card { padding: 1rem 0.9rem !important; } .testimonial-card .rounded-circle { width: 42px !important; height: 42px !important; } .testimonial-card p { font-size: 0.88rem !important; line-height: 1.7 !important; } /* About image + stats badge positioning */ .about-image-wrapper { height: 280px !important; } .about-image-wrapper .rounded-4 { height: 100% !important; } .about-stats-card { bottom: 10px !important; left: 10px !important; padding: 0.6rem 0.75rem !important; } .about-stats-card .fs-5 { font-size: 1.05rem !important; } /* Stat cards row */ .stat-card { padding: 0.75rem 0.25rem !important; } .stat-card .stat-value { font-size: 1.35rem !important; } .stat-card .stat-label { font-size: 0.68rem !important; } } /* ============================================================ FORMS — 48px touch targets, 16px text (no iOS zoom) ============================================================ */ @media (max-width: 575.98px) { .form-control, .form-select { min-height: 48px !important; font-size: 16px !important; padding: 0.65rem 0.85rem !important; border-radius: 12px !important; -webkit-appearance: none; appearance: none; } textarea.form-control { min-height: 110px !important; } .form-label { font-size: 0.88rem; margin-bottom: 0.35rem; } .form-check-input { width: 1.2em; height: 1.2em; margin-top: 0.15em; } input[type="date"].form-control { min-height: 48px; } /* Booking form wrapper on home */ .booking-wrapper .col-lg-7 { padding: 1.1rem 1rem !important; } .booking-wrapper h2 { font-size: 1.25rem !important; } /* Booking wizard — compact step indicator + full-width nav buttons */ .step-indicator { width: 34px !important; height: 34px !important; font-size: 0.85rem; } #stepIndicator small { font-size: 0.62rem; } #stepIndicator .text-center { flex: 1; } .booking-card { padding: 0.85rem 0.75rem !important; } .booking-step .d-flex.gap-2 .btn { flex: 1; min-height: 48px; } .booking-step .d-flex.gap-2 .btn:last-child { flex: 1.4; } /* Contact info cards */ .contact-info-card .rounded-3[style*="width:48px"] { width: 42px !important; height: 42px !important; } } /* ============================================================ TABLES → stacked card rows on phones ============================================================ */ @media (max-width: 575.98px) { /* Generic: any .table becomes a clean stacked list */ .table-responsive { overflow-x: hidden !important; } .table-responsive thead { display: none !important; } .table-responsive tbody, .table-responsive tr, .table-responsive td { display: block !important; width: 100% !important; } .table-responsive tr { border: 1px solid #eef2f7; border-radius: 12px; margin-bottom: 0.6rem; padding: 0.4rem 0.6rem; background: #fbfdff; } .table-responsive td { display: flex !important; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.3rem !important; border: none !important; border-bottom: 1px dashed #eef2f7 !important; font-size: 0.9rem; } .table-responsive td:last-child { border-bottom: none !important; } .table-responsive td::before { content: attr(data-label); font-weight: 700; color: #475569; flex-shrink: 0; } /* Label/value tables (confirmation, results) */ .table-borderless tbody { display: block; } .table-borderless tr { display: flex; flex-direction: column; padding: 0.55rem 0; border-bottom: 1px solid #eef2f7; } .table-borderless tr:last-child { border-bottom: none; } .table-borderless td { border: none; padding: 0.1rem 0; font-size: 0.92rem; } .table-borderless td:first-child { font-weight: 700; color: #64748b; font-size: 0.82rem; } .table-borderless td[style*="width:"] { width: auto !important; } } /* ============================================================ FOOTER (mobile) ============================================================ */ @media (max-width: 575.98px) { .web-footer { padding-top: 0 !important; } .web-footer .footer-brand { margin-bottom: 1rem !important; } .web-footer .footer-brand-desc { font-size: 0.85rem; } .web-footer .footer-heading { font-size: 1.05rem !important; } .web-footer .footer-heading i { font-size: 0.95rem !important; } .footer-contact-item { margin-bottom: 0.7rem; } .footer-contact-item i { font-size: 0.85rem; } .footer-contact-item span, .footer-contact-item a { font-size: 0.8rem !important; } .footer-social-btn { width: 40px !important; height: 40px !important; font-size: 0.9rem !important; } .footer-store-icon img { height: 36px !important; } .footer-bottom { margin-top: 0 !important; margin-right: -1rem !important; margin-left: -1rem !important; padding-right: 1rem !important; padding-left: 1rem !important; padding-top: 1rem !important; padding-bottom: 1.1rem !important; gap: 0.75rem !important; justify-content: center !important; } .footer-bottom small { font-size: 0.76rem !important; line-height: 1.7 !important; } .footer-bottom .footer-version { padding: 0.25rem 0.7rem; font-size: 0.7rem !important; } /* App store column & terms links */ .web-footer .d-flex.gap-3 .footer-link { font-size: 0.78rem !important; } } /* ============================================================ MISC — gallery, discount card, back-to-top, focus ============================================================ */ @media (max-width: 575.98px) { /* Discount / app banners */ .rounded-4 > img, a > img.img-fluid { width: 100%; height: auto; } /* Back-to-top button */ .btn.rounded-circle.position-fixed.bottom-0.end-0 { width: 42px !important; height: 42px !important; margin: 0.9rem !important; } /* Google maps iframe */ iframe[src*="google.com/maps"] { height: 240px !important; } /* Accessibility: visible focus ring */ a:focus-visible, button:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .accordion-button:focus-visible { outline: 3px solid rgba(var(--primary-rgb), 0.4); outline-offset: 2px; } /* Smooth, cheap transitions */ .card, .btn, .nav-link, .footer-link { -webkit-tap-highlight-color: transparent; } }