/* ════════════════════════════════════════════════════════════════════
   mobile.css — Global responsive overrides for dr.ps / حجزك الطبي
   Loaded after style-rtl.css (highest precedence).
   Targets:
     - Tablet  ≤ 991.98px
     - Phone   ≤ 768px
     - Small   ≤ 576px
   ════════════════════════════════════════════════════════════════════ */

/* ─── Universal safety: never let any element force horizontal scroll ─── */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table { max-width: 100%; }

/* ════════════════════════════════════════════════════════════════════
   TABLET & PHONE ( ≤ 991.98px )
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* ── Containers ── */
    .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

    /* ── Bootstrap grid spacing ── */
    .row { margin-left: -8px !important; margin-right: -8px !important; }
    .row > [class^="col-"], .row > [class*=" col-"] { padding-left: 8px !important; padding-right: 8px !important; }

    /* ── Section/card padding compression ── */
    section { padding-top: 14px !important; padding-bottom: 14px !important; }
    .card-body, .ftr-body, .sb-clinic-card-body { padding: 14px !important; }

    /* ── Dashboard sidebar (left-center) ── */
    .sb-col {
        position: static !important;
        padding: 10px 8px !important;
        margin-bottom: 12px !important;
    }
    .sb-sticky {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    /* Make sidebar items more tappable */
    .sb-item { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; }

    /* ── Tables: horizontal scroll wrapper ── */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    table.table-stack { white-space: normal; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Forms: prevent iOS zoom-in on focus ── */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    select,
    textarea,
    .form-control,
    .form-select { font-size: 16px !important; }
    .form-control, .form-select { min-height: 44px; }
    .btn { min-height: 40px; }

    /* ── Modals: occupy more screen ── */
    .modal-dialog { margin: 8px !important; max-width: calc(100% - 16px) !important; }
    .modal-content { border-radius: 12px !important; }

    /* ── Hero / banner images ── */
    .hero .item img,
    .daily-offer img,
    .login_img { max-height: 38vh !important; }

    /* ── Footer ── */
    #ft2-root .ft2-container { grid-template-columns: 1fr 1fr !important; gap: 20px !important; padding: 0 16px !important; }

    /* ── Floating WhatsApp button ── */
    .whatsapp {
        width: 46px !important;
        height: 46px !important;
        bottom: 18px !important;
        left: 14px !important;
        font-size: 22px !important;
    }

    /* ── Update-info banner ── */
    .insert-data-update { padding: 12px !important; }
    .insert-data-update .form-control { width: 100% !important; }
    .insert-data-update .save_info { width: 100% !important; margin-top: 8px !important; }

    /* ── Headings ── */
    h1 { font-size: 22px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }

    /* ── Hide truly desktop-only helpers ── */
    .hide-mobile, .desktop-only { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PHONE ( ≤ 768px )
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Tighter container padding ── */
    .container, .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }

    /* ── Cards: reduce inner padding ── */
    .card { border-radius: 10px !important; }
    .card-body { padding: 12px !important; }

    /* ── Buttons full-width for primary CTAs by convention ── */
    .btn-block-mobile, .btn-mobile-full { width: 100% !important; display: block !important; }

    /* ── Stat-card grids commonly built with display:grid 4-col ── */
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── Flex rows that should wrap on phone ── */
    .d-flex.flex-wrap-mobile { flex-wrap: wrap !important; }

    /* ── Footer: single column ── */
    #ft2-root .ft2-container { grid-template-columns: 1fr !important; text-align: center; }

    /* ── Hero/banner ── */
    .hero .item img,
    .daily-offer img { max-height: 28vh !important; }

    /* ── Make doctor/booking cards stack ── */
    .doctor-card, .booking-card, .clinic-card { width: 100% !important; }

    /* ── Headings ── */
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }

    /* ── Reduce vertical padding on inner sections, but keep main padding-top
         (header is fixed-top — main padding-top is set by style-rtl.css to
         clear the header height) ── */
    main { padding-bottom: 12px !important; }
    main > section, main > div > section { padding: 10px 6px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   SMALL PHONE ( ≤ 576px )
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {

    /* ── Even tighter spacing ── */
    .container, .container-fluid { padding-left: 6px !important; padding-right: 6px !important; }
    .row { margin-left: -4px !important; margin-right: -4px !important; }
    .row > [class^="col-"], .row > [class*=" col-"] { padding-left: 4px !important; padding-right: 4px !important; }

    /* ── Card stacking ── */
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; }

    /* ── Modal padding ── */
    .modal-body { padding: 14px !important; }
    .modal-header { padding: 12px 14px !important; font-size: 1.1rem !important; }

    /* ── Smaller logos ── */
    .navbar-brand img, .hdr-logo img { max-height: 34px !important; }

    /* ── Hide print/secondary actions on small screens ── */
    .hide-small { display: none !important; }

    /* ── Sidebar clinic card title compress ── */
    .sb-clinic-title { font-size: 12.5px !important; }
    .sb-clinic-icon { width: 42px !important; height: 42px !important; font-size: 18px !important; }

    /* ── Reduce hero height ── */
    .hero .item img, .daily-offer img { max-height: 22vh !important; }

    /* ── Floating buttons further down ── */
    .whatsapp { bottom: 14px !important; left: 10px !important; width: 44px !important; height: 44px !important; }

    /* ── Headings final ── */
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }

    /* ── Force common pixel widths off ── */
    [style*="min-width: 400px"], [style*="min-width:400px"],
    [style*="min-width: 500px"], [style*="min-width:500px"],
    [style*="min-width: 600px"], [style*="min-width:600px"] { min-width: 0 !important; }

    /* ── Sticky elements: avoid covering screen ── */
    .sticky-top, [class*="sticky"] { position: static !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PRINT — leave alone (handled by .hide-print already)
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: larger tap area for links/icons globally on touch
   ════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    a, button { -webkit-tap-highlight-color: rgba(29, 78, 216, .15); }
}