/* ============================================================
   Galamania — Global Mobile Responsive Fixes
   ============================================================ */

/* ── Universal icon alignment ─────────────────────────────── */
.ph, [class^="ph-"], [class*=" ph-"] {
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.section-title, .page-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Prevent horizontal overflow */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe { max-width: 100%; }

/* ── Touch targets ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn, button, a[class*="btn"] { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

/* ============================================================
   INDEX
   ============================================================ */
@media (max-width: 768px) {
  .left-sidebar, .right-sidebar { display: none !important; }
  .kolam-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .gh-ad-card { min-width: 260px !important; }
  .event-card-mini { min-width: 220px !important; }
}
@media (max-width: 480px) {
  .kolam-grid { grid-template-columns: 1fr !important; }
  .kolam-card-img { height: 160px !important; }
  .sec-head-title { font-size: 0.9rem !important; }
  .quick-cat-icon { font-size: 1.4rem !important; }
  .quick-cat-label { font-size: 0.62rem !important; }
}

/* ============================================================
   MARKETPLACE
   ============================================================ */
@media (max-width: 768px) {
  .kolam-list-item { padding: 12px !important; gap: 12px !important; }
  .kolam-list-thumb { width: 80px !important; height: 80px !important; flex-shrink: 0; }
  .kolam-list-info { min-width: 0; }
  .slot-pills { flex-wrap: wrap !important; }
}

/* ============================================================
   DETAIL
   ============================================================ */
@media (max-width: 640px) {
  .booking-summary { grid-template-columns: 1fr !important; }
  .addon-item { flex-direction: column !important; align-items: flex-start !important; }
  .detail-tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .detail-tabs::-webkit-scrollbar { display: none; }
  .detail-tab { flex-shrink: 0 !important; }
  .detail-map { height: 200px !important; }
}

/* ============================================================
   DASHBOARD — Extra polish
   ============================================================ */
@media (max-width: 480px) {
  .wallet-actions { flex-direction: column !important; gap: 8px !important; }
  .wallet-actions .btn { width: 100% !important; }
  .order-chips { flex-wrap: wrap !important; gap: 4px !important; }
  .notif-card { grid-template-columns: 36px 1fr !important; gap: 8px !important; }
  .notif-time { display: none; }
  .fav-card { flex-direction: column !important; }
  .rek-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .kyc-steps { flex-direction: column !important; }
  .dompet-balance { font-size: 1.8rem !important; }
}

/* ============================================================
   LAPAK
   ============================================================ */
@media (max-width: 640px) {
  .rev-cards { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .sesi-item { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .sesi-item-right { width: 100% !important; display: flex !important; justify-content: space-between !important; }
  .peserta-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .peserta-table { min-width: 500px; }
  .addon-editor-row { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 400px) {
  .rev-cards { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CHAT
   ============================================================ */
@media (max-width: 700px) {
  .chat-list-item { padding: 12px 16px !important; }
  .chat-avatar { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
  .chat-item-name { font-size: 0.82rem !important; }
  .chat-item-last { font-size: 0.7rem !important; }
  .chat-bubble { max-width: 85% !important; }
  .chat-input-bar { padding: 12px !important; }
}

/* ============================================================
   GLOBAL CARDS & MODALS
   ============================================================ */
@media (max-width: 480px) {
  .card, .panel-card { border-radius: 16px !important; }
  .page-title { font-size: 1.05rem !important; }
  .modal-sheet, .wd-sheet { border-radius: 24px 24px 0 0 !important; max-height: 92vh !important; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 480px; }
  h1 { font-size: clamp(1.3rem, 5vw, 2rem) !important; }
  h2 { font-size: clamp(1.1rem, 4vw, 1.6rem) !important; }
  h3 { font-size: clamp(1rem, 3.5vw, 1.3rem) !important; }
}

/* Safe area (iPhone notch) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bn-bar, .gh-mobile-bottom, .chat-input-bar {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}