/* ============================================================
   BOOKING JASA — booking-04-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;
    top: var(--bk-topbar-h) !important;      /* mulai di bawah topbar admin panel */
    height: calc(100vh - var(--bk-topbar-h)) !important;
    min-height: 0 !important;
    transform: translateX(-100%) !important;
    z-index: 200 !important;                  /* di atas overlay, di bawah modal */
    box-shadow: var(--bk-shadow-xl);
  }

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

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

  .bk-hamburger {
    display: flex;
  }

  /* overlay gelap di belakang sidebar pas dibuka, biar jelas ini drawer */
  .bk-sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--bk-topbar-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 150;
  }
  .bk-sidebar.open ~ .bk-sidebar-overlay,
  .bk-sidebar-overlay.show {
    display: block;
  }

  .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; }

  /* Tombol navigasi step (Lanjut/Kembali) nempel di bawah layar, biar
     customer gak perlu scroll balik ke bawah tiap habis milih jam/tanggal. */
  .bk-cust-step .bk-btn-group {
    position: sticky;
    bottom: 0;
    background: var(--bk-white);
    margin: 20px -20px -20px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 16px rgba(0,0,0,.08);
    z-index: 20;
  }

  /* Geser naik biar gak ketiban sticky bar di atas */
  .bk-cek-status-fab { bottom: 92px; }

  /* Cue tipis buat nunjukin tabel masih bisa di-scroll ke kanan */
  .bk-table-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,.06));
    pointer-events: none;
  }
}

/* ============================================================
   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; }
  .bk-cek-status-fab { bottom: 80px; left: 16px; }
  .bk-cek-status-fab .bk-btn { padding: 8px 14px; font-size: 12px; }

  .bk-qty-btn { width: 32px; height: 32px; font-size: 16px; }
  #bk-kelipatan-val { font-size: 16px; }

  .bk-cust-step .bk-btn-group {
    margin: 20px -14px -14px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  /* Item summary numpuk kalau horizontal di layar sekecil ini — paksa vertikal */
  .bk-summary-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ============================================================
   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; }