/* ===================================================
   BINPOOK.ID — Neobrutalism Design System
   https://www.neobrutalism.dev
   Font: DM Sans (Google Fonts)
=================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

:root {
  --nb-black: #0f0f0f;
  --nb-white: #ffffff;
  --nb-yellow: #FACC15;
  --nb-yellow-light: #FEF08A;
  --nb-yellow-pale: #FEF9C3;
  --nb-blue: #3B82F6;
  --nb-blue-light: #DBEAFE;
  --nb-green: #22C55E;
  --nb-green-light: #DCFCE7;
  --nb-red: #EF4444;
  --nb-red-light: #FEE2E2;
  --nb-pink: #F472B6;
  --nb-pink-light: #FCE7F3;
  --nb-purple: #A855F7;
  --nb-purple-light: #EDE9FE;
  --nb-orange: #F97316;
  --nb-orange-light: #FED7AA;
  --nb-gray: #F3F4F6;
  --nb-gray-mid: #9CA3AF;
  --nb-border: 2.5px solid #0f0f0f;
  --nb-border-sm: 2px solid #0f0f0f;
  --nb-shadow: 4px 4px 0 #0f0f0f;
  --nb-shadow-sm: 3px 3px 0 #0f0f0f;
  --nb-shadow-lg: 6px 6px 0 #0f0f0f;
  --nb-radius: 10px;
  --nb-radius-sm: 8px;
  --nb-radius-lg: 14px;
  --nb-radius-pill: 999px;
}

* { box-sizing: border-box; }

body.nb-body {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--nb-yellow-light) !important;
  color: var(--nb-black) !important;
  margin: 0;
  padding: 0;
}

/* ---- TOPBAR ---- */
.nb-topbar {
  background: var(--nb-yellow);
  border-bottom: var(--nb-border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nb-topbar .nb-brand {
  font-size: 20px;
  font-weight: 800;
  color: var(--nb-black);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.nb-topbar .nb-brand span { color: var(--nb-blue); }

/* ---- TICKER ---- */
.nb-ticker {
  background: var(--nb-black);
  color: var(--nb-yellow);
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
}
.nb-ticker-inner {
  display: inline-block;
  animation: nb-ticker-scroll 30s linear infinite;
}
.nb-ticker-inner:hover { animation-play-state: paused; }
@keyframes nb-ticker-scroll {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}
.nb-ticker-item {
  display: inline-block;
  margin-right: 40px;
  font-size: 12px;
  font-weight: 700;
}

/* ---- BUTTONS ---- */
.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.1s ease;
  border-radius: var(--nb-radius-sm);
  text-decoration: none !important;
  padding: 10px 18px;
  line-height: 1;
}
.nb-btn:hover, .nb-btn:active {
  box-shadow: 1px 1px 0 var(--nb-black) !important;
  transform: translate(2px, 2px);
  text-decoration: none !important;
}
.nb-btn-yellow { background: var(--nb-yellow); color: var(--nb-black); }
.nb-btn-black  { background: var(--nb-black);  color: var(--nb-white); }
.nb-btn-white  { background: var(--nb-white);  color: var(--nb-black); }
.nb-btn-blue   { background: var(--nb-blue);   color: var(--nb-white); }
.nb-btn-green  { background: var(--nb-green);  color: var(--nb-white); }
.nb-btn-red    { background: var(--nb-red);    color: var(--nb-white); }
.nb-btn-sm { padding: 7px 14px; font-size: 12px; }
.nb-btn-lg { padding: 14px 28px; font-size: 16px; }
.nb-btn-block { width: 100%; display: flex; }

/* ---- CARDS ---- */
.nb-card {
  background: var(--nb-white);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow);
  border-radius: var(--nb-radius);
  transition: all 0.15s ease;
}
.nb-card-hover:hover {
  box-shadow: 2px 2px 0 var(--nb-black);
  transform: translate(2px, 2px);
  cursor: pointer;
}
.nb-card-yellow { background: var(--nb-yellow-pale); }
.nb-card-blue   { background: var(--nb-blue-light); }
.nb-card-green  { background: var(--nb-green-light); }
.nb-card-pink   { background: var(--nb-pink-light); }

/* ---- INPUTS ---- */
.nb-input, .nb-select {
  border: var(--nb-border);
  border-radius: var(--nb-radius-sm);
  padding: 11px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  background: var(--nb-white);
  width: 100%;
  transition: box-shadow 0.1s;
  color: var(--nb-black);
}
.nb-input:focus, .nb-select:focus {
  box-shadow: 3px 3px 0 var(--nb-black);
}
.nb-label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
  color: var(--nb-black);
}

/* ---- BADGES / TAGS ---- */
.nb-badge {
  display: inline-block;
  border: var(--nb-border-sm);
  border-radius: var(--nb-radius-pill);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  line-height: 1.4;
}
.nb-badge-yellow { background: var(--nb-yellow-pale); border-color: #CA8A04; color: #854D0E; }
.nb-badge-green  { background: var(--nb-green-light); border-color: #16A34A; color: #166534; }
.nb-badge-red    { background: var(--nb-red-light);   border-color: #DC2626; color: #991B1B; }
.nb-badge-blue   { background: var(--nb-blue-light);  border-color: #2563EB; color: #1E40AF; }
.nb-badge-black  { background: var(--nb-black);       border-color: var(--nb-black); color: var(--nb-white); }

/* ---- SECTION TITLE ---- */
.nb-section-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nb-black);
}
.nb-section-title::after {
  content: '';
  flex: 1;
  height: 2.5px;
  background: var(--nb-black);
  border-radius: 2px;
}

/* ---- MENU GRID ---- */
.nb-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nb-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--nb-black) !important;
}
.nb-menu-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--nb-radius-sm);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.nb-menu-item:hover .nb-menu-icon {
  box-shadow: 1px 1px 0 var(--nb-black);
  transform: translate(2px, 2px);
}
.nb-menu-label {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

/* ---- SALDO CARD ---- */
.nb-saldo-card {
  background: var(--nb-white);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-lg);
  border-radius: var(--nb-radius-lg);
  padding: 18px 20px;
}
.nb-saldo-amount {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

/* ---- PROMO BANNER ---- */
.nb-promo-banner {
  border: var(--nb-border);
  box-shadow: var(--nb-shadow);
  border-radius: var(--nb-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---- TRANSACTION ITEM ---- */
.nb-trx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 2px dashed #E5E7EB;
}
.nb-trx-item:last-child { border-bottom: none; }
.nb-trx-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--nb-radius-sm);
  border: var(--nb-border-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* ---- BOTTOM NAV ---- */
.nb-bottom-nav {
  background: var(--nb-white);
  border-top: var(--nb-border);
  display: flex;
  justify-content: space-around;
  padding: 10px 0 max(6px, env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
.nb-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--nb-black);
  text-decoration: none !important;
  cursor: pointer;
  flex: 1;
}
.nb-nav-item .nb-nav-icon { font-size: 22px; line-height: 1; }
.nb-nav-item.active { color: var(--nb-blue); }
.nb-nav-item.active .nb-nav-icon { filter: none; }

/* ---- NOTIF BADGE ---- */
.nb-notif-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  background: var(--nb-red);
  color: var(--nb-white);
  border-radius: var(--nb-radius-pill);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border: 2px solid var(--nb-black);
}

/* ---- PAGE WRAPPER ---- */
.nb-page {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 80px;
}
.nb-section { padding: 14px 16px; }

/* ---- DIVIDER ---- */
.nb-divider { height: 2px; background: var(--nb-black); margin: 0; }
.nb-divider-dashed { height: 2px; border-top: 2px dashed #D1D5DB; margin: 10px 0; }

/* ---- AVATAR ---- */
.nb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--nb-black);
  border: 2.5px solid var(--nb-black);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nb-yellow);
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

/* ---- ALERTS ---- */
.nb-alert {
  border: var(--nb-border);
  border-radius: var(--nb-radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.nb-alert-success { background: var(--nb-green-light); border-color: #16A34A; }
.nb-alert-error   { background: var(--nb-red-light);   border-color: #DC2626; }
.nb-alert-info    { background: var(--nb-blue-light);   border-color: #2563EB; }
.nb-alert-warning { background: var(--nb-yellow-pale);  border-color: #CA8A04; }

/* ---- PRODUCT NOMINAL GRID ---- */
.nb-nominal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.nb-nominal-item {
  border: var(--nb-border);
  border-radius: var(--nb-radius-sm);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  background: var(--nb-white);
  transition: all 0.12s;
  box-shadow: var(--nb-shadow-sm);
}
.nb-nominal-item:hover, .nb-nominal-item.selected {
  background: var(--nb-yellow);
  box-shadow: 1px 1px 0 var(--nb-black);
  transform: translate(2px, 2px);
}
.nb-nominal-item .nb-nom-title { font-size: 13px; font-weight: 800; }
.nb-nominal-item .nb-nom-price { font-size: 11px; font-weight: 500; color: #6B7280; margin-top: 2px; }
.nb-nominal-item.selected .nb-nom-price { color: var(--nb-black); }

/* ---- PROVIDER TABS ---- */
.nb-provider-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.nb-provider-tabs::-webkit-scrollbar { display: none; }
.nb-provider-tab {
  flex-shrink: 0;
  border: var(--nb-border);
  border-radius: var(--nb-radius-sm);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--nb-white);
  box-shadow: var(--nb-shadow-sm);
  transition: all 0.12s;
  white-space: nowrap;
}
.nb-provider-tab:hover, .nb-provider-tab.active {
  background: var(--nb-black);
  color: var(--nb-yellow);
  box-shadow: 1px 1px 0 var(--nb-black);
  transform: translate(2px, 2px);
}

/* ---- LOGIN CARD ---- */
.nb-login-wrap {
  min-height: 100vh;
  background: var(--nb-yellow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.nb-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--nb-white);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-lg);
  border-radius: var(--nb-radius-lg);
  padding: 32px 28px;
}

/* ---- UTILITY ---- */
.nb-text-muted { color: #6B7280; font-size: 12px; }
.nb-fw-800 { font-weight: 800; }
.nb-fw-700 { font-weight: 700; }
.nb-text-sm { font-size: 12px; }
.nb-text-xs { font-size: 11px; }
.nb-gap-8  { display: flex; gap: 8px; }
.nb-gap-10 { display: flex; gap: 10px; }
.nb-mt-14 { margin-top: 14px; }
.nb-mt-20 { margin-top: 20px; }

/* ---- RESPONSIVE ---- */
@media (min-width: 480px) {
  .nb-page { border-left: var(--nb-border); border-right: var(--nb-border); }
}