/*
 * tamkeen-mobile.css — v5
 * Add LAST in header.php after enhanced.css:
 * <link rel="stylesheet" href="<?= APP_URL ?>/css/mobile.css">
 * ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   1. HERO — Hide visual card completely on mobile/tablet
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .hero-v2-visual,
  .hero-v2-floater,
  .hero-v2-floater-1,
  .hero-v2-floater-2 {
    display:         none !important;
    visibility:      hidden !important;
    min-height:      0 !important;
    height:          0 !important;
    overflow:        hidden !important;
    opacity:         0 !important;
    pointer-events:  none !important;
  }
  .hero-v2-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   2. HERO TEXT — Tight spacing for small screens
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hero-v2 { padding: 2.5rem 0 3rem !important; }

  .hero-v2-eyebrow { font-size: .78rem; padding: .35rem .85rem; }

  .hero-v2-title {
    font-size: 1.8rem !important;
    line-height: 1.3;
  }
  .hero-v2-lead {
    font-size: .96rem !important;
    line-height: 1.75;
    margin-bottom: 1.5rem;
  }
  .hero-v2-actions {
    flex-direction: column !important;
    gap: .7rem !important;
  }
  .hero-v2-actions .btn-v2 {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px !important;
  }
  .trust-v2 {
    gap: .65rem 1rem !important;
  }
  .trust-v2 li { font-size: .82rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   3. NAVBAR — Compact on small screens
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .nav-v2-inner {
    padding: 0 .85rem !important;
    height: 60px !important;
    gap: .4rem !important;
  }
  /* Keep brand text — don't hide it */
  /* Logo — prevent flex from squishing it */
  .nav-v2-brand {
    flex-shrink: 0 !important;
    min-width: 0;
  }
  .nav-v2-logo {
    height: 34px !important;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
    aspect-ratio: auto !important;
  }
  /* Keep brand text visible on mid-mobile */
  .nav-v2-brand-text {
    font-size: .95rem !important;
    white-space: nowrap;
  }
  .nav-lang { gap: 1px !important; }
  .nav-lang-btn {
    min-width: 30px !important;
    height: 27px !important;
    font-size: .72rem !important;
    padding: 0 5px !important;
  }
  .icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .nav-v2-cta { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   4. TRUST BAR
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .trustbar-v2 { padding: 1.25rem 0 !important; }
  .trustbar-v2-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .85rem !important;
  }
  .trustbar-v2-icon {
    width: 38px !important;
    height: 38px !important;
  }
  .trustbar-v2-item h4 { font-size: .88rem !important; }
  .trustbar-v2-item p  { font-size: .78rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   5. SECTIONS — Reduce padding
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .section-v2 { padding: 2.5rem 0 !important; }
  .section-v2-head { margin-bottom: 1.75rem !important; }
  .section-v2-title { font-size: 1.4rem !important; }
  .section-v2-lead  { font-size: .93rem !important; }
  .container-v2 { padding: 0 1rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   6. SERVICES GRID — 1 col on phones
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .services-v2-grid {
    grid-template-columns: 1fr !important;
  }
  .service-v2-card { padding: 1.25rem !important; }
  .service-v2-card h3 { font-size: 1.05rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   7. STEPS (How it works) — 1 col
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .steps-v2 {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .step-v2 { padding: 1.5rem 1.25rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   8. COMPANIES — Hide decorative stat cards on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .companies-v2-visual { display: none !important; }
  .companies-v2-grid   {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   9. VIDEOS GRID
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .videos-v2-grid,
  .vid-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   10. FINAL CTA
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .finalcta-v2 { padding: 2rem 0 3rem !important; }
  .finalcta-v2-card {
    padding: 2rem 1.25rem !important;
    border-radius: 16px !important;
  }
  .finalcta-v2-title { font-size: 1.3rem !important; }
  .finalcta-v2-text  { font-size: .93rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .footer-v2 { padding: 2.5rem 0 1rem !important; }
  .footer-v2-inner {
    padding: 0 1rem !important;
    gap: 1.75rem !important;
  }
  .footer-v2-bottom { padding: 1.25rem 1rem 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   12. ADMIN — Stat cards & layout
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .admin-content { padding: 1rem !important; }
  .card-body     { padding: 1rem !important; }
}
@media (max-width: 640px) {
  .admin-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .65rem !important;
  }
  .admin-mid-grid {
    grid-template-columns: 1fr !important;
  }
  .admin-stat-num  { font-size: 1.35rem !important; }
  .admin-stat-lbl  { font-size: .73rem !important; }
  .admin-stat-icon {
    width: 38px !important;
    height: 38px !important;
  }
  .admin-stat-icon svg { width: 18px !important; height: 18px !important; }
}
@media (max-width: 380px) {
  .admin-stat-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   13. TABLES — Horizontal scroll on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .booking-table-wrap { overflow-x: auto !important; }
  table { min-width: 520px; }
}

/* ═══════════════════════════════════════════════════════════
   14. DASHBOARD
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .dash-wrap    { grid-template-columns: 1fr !important; }
  .dash-sidebar { display: none !important; }
  .dash-content { padding: 1.25rem 1rem !important; max-width: 100% !important; }
}
@media (max-width: 640px) {
  .dash-stats   { grid-template-columns: 1fr 1fr !important; }
  .dash-two-col { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   15. FORMS — Full-width inputs on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .form-row   { grid-template-columns: 1fr !important; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px !important; /* prevent iOS zoom */ }
}

/* ═══════════════════════════════════════════════════════════
   16. PROFILE TABS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .profile-tabs { flex-direction: column !important; }
  .profile-tab  { text-align: center !important; }
  .profile-avatar-row { flex-direction: column !important; text-align: center !important; }
}

/* ═══════════════════════════════════════════════════════════
   17. NOTIFICATION DROPDOWN — Full width on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .notif-dropdown {
    width: calc(100vw - 2rem) !important;
    inset-inline-end: -1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   18. VIDEO MODAL — Full screen on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #home-vid-modal > div:nth-child(2),
  .vid-modal-box {
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
  }
  #home-vid-player,
  #vid-modal-player {
    max-height: 55vw !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   19. GLOBAL TOUCH TARGETS — Minimum 44px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .btn-v2,
  .btn,
  .nav-lang-btn,
  .dash-nav-link,
  .page-link {
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   20. DRAWER — RTL/LTR fix (nuclear)
   ═══════════════════════════════════════════════════════════ */
.nav-v2-drawer {
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;
}
[dir="ltr"] .nav-v2-drawer {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
}
.nav-v2-drawer.is-open {
  transform: translateX(0) !important;
}