/* ============================================================
   BOOKING JASA — booking-05-responsive.css
   Semua @media breakpoint + utility classes
   WAJIB DI-LOAD PALING TERAKHIR — supaya override-nya menang
   ============================================================ */

/* ============================================================
   32-33. RESPONSIVE — TABLET + HP (≤1024px)
   Satu breakpoint tunggal buat toggle sidebar. Di atas 1024px =
   desktop murni, sidebar selalu full, TIDAK ADA toggle sama sekali.
   Di 1024px ke bawah (tablet & hp) = sidebar disembunyikan,
   hamburger muncul, toggle aktif.
   ============================================================ */
@media (max-width: 1024px) {
  .bk-sidebar {
    position: fixed !important;
    transform: translateX(-100%) !important;
    z-index: 100 !important;
  }

  .bk-sidebar.open {
    transform: translateX(0) !important;
  }

  .bk-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bk-hamburger {
    display: flex;
  }

  .bk-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .bk-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   33. RESPONSIVE — 768px (penyesuaian tampilan tambahan di HP)
   Sidebar/toggle-nya sendiri sudah diatur di breakpoint 1024px
   di atas — blok ini cuma nge-tweak spacing/ukuran lebih rapat.
   ============================================================ */
@media (max-width: 768px) {
  .bk-topbar {
    padding: 0 16px;
  }

  .bk-page-body {
    padding: 16px;
  }

  .bk-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .bk-stat-card { padding: 14px; }
  .bk-stat-val { font-size: 18px; }

  .bk-filter-bar {
    padding: 12px 14px;
    gap: 8px;
  }

  .bk-search-box { min-width: 100%; }

  .bk-table th, .bk-table td { padding: 10px 12px; }

  .bk-modal-box { margin: 0; border-radius: var(--bk-r-xl) var(--bk-r-xl) 0 0; max-height: 92vh; }
  .bk-modal-backdrop { align-items: flex-end; padding: 0; }

  .bk-cal-grid { gap: 1px; padding: 12px; }
  .bk-cal-day { min-height: 48px; font-size: 12px; padding: 4px 2px 22px; }

  .bk-form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   34. RESPONSIVE — 480px (Mobile)
   ============================================================ */
@media (max-width: 480px) {
  .bk-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }

  .bk-stat-card { padding: 12px; gap: 10px; }
  .bk-stat-icon { width: 36px; height: 36px; font-size: 16px; }
  .bk-stat-val { font-size: 16px; }
  .bk-stat-lbl { font-size: 11px; }

  .bk-topbar-title { font-size: 14px; }

  .bk-page-body { padding: 12px; }

  .bk-card-header { padding: 13px 14px; }
  .bk-modal-body { padding: 14px; }
  .bk-modal-footer { padding: 12px 14px; }

  .bk-customer-page { max-width: 100%; }

  .bk-stepper { padding: 12px 16px; gap: 0; }
  .bk-step { font-size: 10.5px; gap: 4px; }
  .bk-step-line { min-width: 12px; margin: 0 4px; }

  .bk-cust-body { padding: 14px; }
  .bk-step-title { font-size: 15px; }

  .bk-layanan-card { padding: 12px; }
  .bk-layanan-emoji { width: 38px; height: 38px; font-size: 18px; }

  .bk-slot-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }

  .bk-btn-group { flex-wrap: wrap; }

  .bk-qr-section img { width: 160px !important; height: 160px !important; }

  .bk-toast-wrap { bottom: 14px; right: 10px; left: 10px; }
  .bk-toast { min-width: unset; max-width: 100%; }

  .bk-cal-grid { padding: 8px; }
  .bk-cal-day { min-height: 40px; font-size: 11px; padding: 3px 0 18px; }
  .bk-cal-head { font-size: 9px; padding: 6px 2px; }

  .bk-success-box { padding: 24px 12px; }
  .bk-success-icon { font-size: 48px; }
  .bk-success-box h2 { font-size: 18px; }
}

/* ============================================================
   35. UTILITY
   ============================================================ */
.bk-text-blue   { color: var(--bk-blue); }
.bk-text-green  { color: var(--bk-green); }
.bk-text-orange { color: var(--bk-orange); }
.bk-text-red    { color: var(--bk-red); }
.bk-text-muted  { color: var(--bk-text-3); }

.bk-fw-bold { font-weight: 700; }
.bk-mt-8    { margin-top: 8px; }
.bk-mt-16   { margin-top: 16px; }
.bk-mb-16   { margin-bottom: 16px; }