/* ============================================================
   shared.css — CSS bersama untuk semua halaman Box Studio
   Dipakai oleh: index.html, transaksi.html, akun.html,
                 cart.html, notif.html, product.html,
                 PPOB/ppob_product.html
   ============================================================ */

/* ===================== TEMA / CSS VARIABLES ===================== */
:root {
  --font-fallback:  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --background:     #f4f7ff;
  --text-color:     #111111;
  --text-muted:     #555555;
  --card-bg:        #ffffff;
  --input-bg:       #ffffff;
  --input-text:     #111111;
  --border-color:   #eef3ff;
  --hover-bg:       #f0f4ff;
  --primary-color:  #0d43b8;
  --primary:        #0d43b8;           /* alias */
  --primary-light:  #dce8ff;
  --primary-mid:    #4a7be0;
  --green:          #16a34a;
  --red:            #dc2626;
  --orange:         #ea580c;
  --danger:         #e53e3e;
}
[data-theme="dark"] {
  --background:     #0b0f19;
  --text-color:     #f1f5f9;
  --text-muted:     #94a3b8;
  --card-bg:        #111827;
  --input-bg:       #1f2937;
  --input-text:     #ffffff;
  --border-color:   #1f2937;
  --hover-bg:       #1f2937;
  --primary-color:  #0d43b8;
  --primary:        #4a7be0;
  --primary-light:  #1a2744;
  --primary-mid:    #6496f0;
}

/* ===================== BASE RESET ===================== */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}
/* font-family TIDAK diapply ke ::before/::after
   supaya Font Awesome bisa render icon lewat pseudo-element */
* {
  font-family: 'Poppins', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden; /* cegah scroll horizontal tipis akibat trik 100vw pada .header */
}
html, body {
  min-height: 100%;
  background: var(--background);
  color: var(--text-color);
  transition: background .3s, color .3s;
}
body { padding-bottom: 70px; }
a    { text-decoration: none; color: inherit; }
img  { max-width: 100%; height: auto; }
input, button, select, textarea {
  font-family: 'Poppins', sans-serif;
  -webkit-appearance: none;
}

/* ===================== RESPONSIVE CONTAINER ===================== */
.main-container, .page, .app-shell {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--background);
  transition: background .3s;
}
@media (min-width: 600px) {
  .main-container, .page, .app-shell {
    box-shadow: 0 0 40px rgba(0,0,0,.08);
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  .main-container, .page { max-width: 100%; }
}
@media (min-width: 768px) {
  body { font-size: 15px; }
  .main-container, .page { max-width: 860px; }
  .header .topbar,
  .header #topbarHeaderSlot > * {
    max-width: 860px;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .main-container, .page { max-width: 1280px; }
  .header .topbar,
  .header #topbarHeaderSlot > * {
    max-width: 1280px;
  }
}
@media (min-width: 1440px) {
  .main-container, .page { max-width: 1440px; }
  .header .topbar,
  .header #topbarHeaderSlot > * {
    max-width: 1440px;
  }
}
@media (max-width: 360px) {
  body { font-size: 13px; }
  .header { padding: 10px 12px; }
}

/* ===================== HEADER / TOPBAR ===================== */
.header {
  background: var(--primary-color);
  position: sticky; top: 0; left: 0;
  padding: 15px; z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  /* Full-bleed: header selalu selebar layar meskipun parent (.main-container)
     dibatasi max-width. Trik ini "membebaskan" header dari lebar parent-nya. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.topbar     { display: flex; align-items: center; justify-content: space-between; }
.left-top   { display: flex; align-items: center; gap: 15px; }
.right-top  { display: flex; align-items: center; gap: 2px; }

/* Hamburger / back button */
.menu-btn, .back-top {
  font-size: 24px; color: white; cursor: pointer;
  width: 45px; height: 45px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; transition: .2s;
}
.menu-btn:hover,
.back-top:hover { background: rgba(255,255,255,.12); }
.back-top { font-size: 22px; }

/* Logo */
.logo { display: flex; align-items: center; }
.logo img { height: 50px; max-width: 150px; object-fit: contain; display: block; }
.logo-text { font-family: 'Montserrat', sans-serif; color: white; display: flex; flex-direction: column; line-height: .9; }
.logo-text .main-text { font-weight: 900; font-size: 25px; letter-spacing: -.5px; }
.logo-text .sub-text  { font-weight: 700; font-size: 15px; letter-spacing: 4.5px; text-transform: uppercase; margin-top: 1px; }

/* Header title (halaman tanpa logo) */
.header-title { color: white; font-size: 18px; font-weight: 700; }

/* Icon tombol kanan topbar */
.top-icon {
  width: 45px; height: 45px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 20px; position: relative; cursor: pointer; transition: .2s;
}
.top-icon:hover { background: rgba(255,255,255,.12); }

/* Badge notifikasi merah */
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: red; color: white; font-size: 10px;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}

/* Avatar user */
.user-avatar-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  object-fit: cover; cursor: pointer; display: none;
}

@media (max-width: 400px) {
  .logo-text .main-text { font-size: 20px; }
  .logo-text .sub-text  { font-size: 12px; letter-spacing: 3px; }
  .logo img { height: 40px; }
}

/* ===================== SIDEBAR ===================== */
.sidebar {
  position: fixed; top: 0; left: -320px; width: 290px; height: 100vh;
  background: var(--card-bg); color: var(--text-color);
  z-index: 9999; transition: .3s; box-shadow: 0 0 25px rgba(0,0,0,.2); overflow: auto;
}
.sidebar.active { left: 0; transform: none; }

.sidebar-header  { background: var(--primary-color); padding: 25px 20px; color: white; }
.profile         { display: flex; align-items: center; gap: 15px; margin-top: 20px; }
.profile img     { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.profile-name    { font-weight: 700; }
.profile-email   { font-size: 12px; opacity: .75; margin-top: 2px; }
.profile-badge   { display: inline-block; font-size: 11px; background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 20px; margin-top: 4px; }

/* Email + eye toggle */
.profile-email-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.btn-eye-sidebar {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  color: rgba(255,255,255,.65); font-size: 12px; line-height: 1;
  transition: color .2s; flex-shrink: 0;
}
.btn-eye-sidebar:hover { color: white; }

/* Admin badge */
.profile-badge.admin-badge {
  background: rgba(255,200,0,.25); color: #ffe066;
  border: 1px solid rgba(255,200,0,.4);
}

.menu-list { padding: 15px; }
.menu-item {
  display: flex; align-items: center; gap: 15px; padding: 15px;
  border-radius: 14px; margin-bottom: 10px; transition: .2s; cursor: pointer; color: var(--text-color);
}
.menu-item:hover { background: var(--hover-bg); }
.menu-item i { width: 22px; font-size: 20px; color: var(--primary-color); }

/* ===================== OVERLAY ===================== */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: .3s; z-index: 9998; }
.overlay.active { opacity: 1; visibility: visible; }

/* ===================== MODAL LOGIN (center) ===================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: .3s;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--card-bg); border-radius: 20px; padding: 35px 25px;
  width: 90%; max-width: 360px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  transform: translateY(20px); transition: .3s;
}
.modal-overlay.active .modal-box { transform: translateY(0); }
.modal-logo {
  width: 70px; height: 70px; border-radius: 18px;
  background: #0d43b8; color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 900; margin: 0 auto 18px;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 8px 20px rgba(13,67,184,.3);
}
.modal-box h3 { font-size: 20px; margin-bottom: 6px; color: var(--text-color); }
.modal-box p  { font-size: 14px; color: var(--text-muted); margin-bottom: 25px; line-height: 1.5; }
.google-btn-wrapper { display: flex; justify-content: center; margin-bottom: 12px; }
.modal-close-btn {
  width: 100%; padding: 12px;
  border: 2px solid var(--border-color); border-radius: 50px;
  background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: .2s;
}
.modal-close-btn:hover { background: var(--hover-bg); }
.login-loading { display: none; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--text-muted); margin: 10px 0; }

/* ===================== LOGIN BOTTOM SHEET (sheet style) ===================== */
.login-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; transition: .3s;
}
.login-modal-overlay.active { opacity: 1; visibility: visible; }
.login-modal-sheet {
  background: var(--card-bg); width: 100%; max-width: 600px;
  border-radius: 24px 24px 0 0; padding: 10px 20px 30px;
  transform: translateY(100%); transition: .35s cubic-bezier(.4,0,.2,1);
}
.login-modal-overlay.active .login-modal-sheet { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; background: var(--border-color); border-radius: 2px; margin: 10px auto 18px; }
.btn-cancel-modal {
  width: 100%; padding: 13px; background: transparent; color: var(--text-muted);
  border: 2px solid var(--border-color); border-radius: 50px; font-size: 15px;
  font-weight: 600; cursor: pointer; transition: .2s; margin-top: 10px;
}
.btn-cancel-modal:hover { background: var(--hover-bg); }

/* ===================== SPINNER ===================== */
.spinner { width: 18px; height: 18px; border: 3px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== TOAST ===================== */
#toast, .toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1f2937; color: white;
  padding: 10px 22px; border-radius: 50px;
  font-size: 13px; font-weight: 600;
  z-index: 99999; opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none; white-space: nowrap;
}
#toast.show, .toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================== LOAD MORE ===================== */
.load-more-wrap { padding: 16px 12px 4px; display: flex; justify-content: center; }
.btn-load-more {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 28px; background: var(--card-bg);
  border: 1.5px solid var(--border-color); border-radius: 50px;
  font-size: 14px; font-weight: 600; color: var(--primary-color);
  cursor: pointer; transition: .2s;
}
.btn-load-more:hover  { background: var(--hover-bg); }
.btn-load-more:active { opacity: .8; }
.load-more-info { font-size: 12px; color: var(--text-muted); padding: 4px 12px 12px; text-align: center; }

/* ===================== SHIMMER SKELETON ===================== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skel-line {
  background: linear-gradient(90deg, var(--hover-bg) 25%, var(--border-color) 50%, var(--hover-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}

/* ===================== EMPTY / GUEST STATE ===================== */
.empty-wrap, .guest-wrap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 20px; text-align: center;
}
.empty-icon, .guest-icon { font-size: 48px; opacity: .3; margin-bottom: 16px; }
.empty-icon { color: var(--text-muted); }
.guest-icon { color: var(--primary-color); }
.empty-text  { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.guest-title { font-size: 17px; font-weight: 700; color: var(--text-color); }
.guest-sub   { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* ===================== PROD TOPBAR (product & ppob_product) ===================== */
.prod-topbar {
  position: sticky; top: 0; z-index: 999;
  background: var(--primary-color);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  /* Full-bleed: sama seperti .header, biar tidak terkurung lebar parent */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.prod-topbar-btn {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.15); border: none;
  color: white; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.prod-topbar-btn:hover { background: rgba(255,255,255,.28); }
.prod-topbar-title {
  flex: 1; color: white; font-size: 15px; font-weight: 700;
  text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding: 0 10px;
}