/* assets/css/style.css - Premium Mobile App Styling for Mitra Sembada */

:root {
  --primary-green: #006734;
  --primary-green-dark: #004f27;
  --primary-green-light: #e6f0ea;
  --accent-gold: #ffb700;
  --accent-gold-dark: #cc9200;
  --accent-gold-light: #fff8e6;
  --bg-gray: #f4f6f8;
  --card-bg: #ffffff;
  --text-dark: #1e293b;
  --text-gray: #64748b;
  --text-light: #94a3b8;
  --border-color: #f1f5f9;
  --danger-color: #ef4444;
  --success-color: #22c55e;
  --warning-color: #f59e0b;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Outfit', sans-serif;
}

a, a:link, a:visited, a:hover, a:active, a:focus {
  text-decoration: none !important;
  color: inherit;
}

body {
  background-color: #1e1e1e;
  color: var(--text-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* Mobile Frame Mockup */
.mobile-frame {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg-gray);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 451px) {
  .mobile-frame {
    height: 94vh;
    border-radius: 46px;
    border: 12px solid #1c1c1e;
    box-shadow: var(--shadow-lg), 0 0 0 4px #48484a;
  }
}

/* Scrollable Main Content Container */
.app-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 90px; /* Space for Bottom Nav */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.app-content::-webkit-scrollbar,
.horizontal-scroll::-webkit-scrollbar,
.product-category-scroll::-webkit-scrollbar,
.order-status-tabs::-webkit-scrollbar,
.notif-tab-bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Hide scrollbar for IE, Edge and Firefox */
.app-content,
.horizontal-scroll,
.product-category-scroll,
.order-status-tabs,
.notif-tab-bar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* AUTHENTICATION LAYOUT */
.auth-body {
  background-color: #121212;
}

.auth-container {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(circle at top right, rgba(0, 103, 52, 0.15) 0%, rgba(0, 0, 0, 0) 60%);
  background-color: var(--bg-gray);
  overflow-y: auto;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.brand-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.logo-svg {
  width: 150px;
  height: auto;
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-gray);
}

.auth-card {
  background-color: var(--card-bg);
  padding: 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: slideUp 0.4s ease-out;
}

.auth-card h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.card-desc {
  font-size: 14px;
  color: var(--text-gray);
  margin-bottom: 24px;
}

.input-group {
  margin-bottom: 18px;
}

.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-light);
  pointer-events: none;
}

.input-wrapper input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--border-color);
  background-color: #fafbfb;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  transition: var(--transition);
}

.input-wrapper input:focus {
  border-color: var(--primary-green);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 103, 52, 0.08);
}

.btn-toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
  z-index: 3;
}

.btn-toggle-password:hover,
.btn-toggle-password:focus {
  color: var(--primary-green);
  background-color: rgba(0, 103, 52, 0.06);
}

.btn-toggle-password:active {
  transform: translateY(-50%) scale(0.92);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  gap: 8px;
}

.btn-primary {
  background-color: var(--primary-green);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: var(--primary-green-dark);
}

.btn-secondary {
  background-color: var(--primary-green-light);
  color: var(--primary-green);
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-gray);
}

.auth-footer a {
  color: var(--primary-green);
  font-weight: 600;
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Spinner Loader */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

/* Alerts Banner */
.alert-box {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 20px;
  font-weight: 500;
  animation: fadeIn 0.3s ease-out;
}

.alert-error {
  background-color: #fee2e2;
  color: var(--danger-color);
  border: 1px solid #fecaca;
}

.alert-success {
  background-color: #dcfce7;
  color: var(--success-color);
  border: 1px solid #bbf7d0;
}

.hide {
  display: none !important;
}

/* DASHBOARD SHELL & NAVIGATION */
.dashboard-header {
  padding: 12px 16px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-brand {
  display: flex;
  align-items: center;
}

.logo-brand-img {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Store Selector Dropdown style */
.store-selector {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 4px 10px 4px 5px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: var(--transition);
}

.store-selector:active {
  background-color: #f8fafc;
}

.store-info-mini {
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-icon {
  width: 28px;
  height: 28px;
  background-color: #004d26;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-text-col {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.store-name-text {
  font-weight: 700;
  color: #1e293b;
  font-size: 11.5px;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.store-status-text {
  color: #16a34a;
  font-weight: 600;
  font-size: 9.5px;
  line-height: 1.2;
}

.store-selector-arrow {
  width: 14px;
  height: 14px;
  color: #64748b;
  margin-left: 2px;
}

/* Notification Bell Button */
.bell-btn {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  position: relative;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.bell-btn:active {
  transform: scale(0.92);
  background-color: #f8fafc;
}

.bell-icon {
  width: 20px;
  height: 20px;
  color: #1e293b;
}

.bell-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background-color: #e11d48;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}

/* WALLET CARD - SALDO MITRA */
.wallet-card-container {
  padding: 12px 16px;
}

.wallet-card {
  background: #005c2b;
  border-radius: 16px;
  padding: 18px 20px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 14px rgba(0, 92, 43, 0.15);
  position: relative;
  overflow: hidden;
}

.wallet-info h3 {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
  letter-spacing: 0;
  text-transform: none;
}

.wallet-info .balance {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.btn-topup {
  background-color: #ffffff;
  color: #005c2b;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: var(--transition);
  position: relative;
  z-index: 2;
}

.btn-topup:active {
  transform: scale(0.95);
  background-color: #f8fafc;
}

.btn-topup svg {
  width: 16px;
  height: 16px;
  stroke: #005c2b;
}

/* PROMO BANNER CAROUSEL */
.promo-container {
  padding: 4px 16px 16px 16px;
  position: relative;
}

.promo-wrapper {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 103, 52, 0.15);
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.promo-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

.promo-slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 18px 16px 26px 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 145px;
  box-sizing: border-box;
}

.promo-info {
  width: 55%;
  z-index: 2;
}

.promo-badge,
.promo-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #fef08a;
  color: #713f12;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.promo-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 4px;
  color: #ffffff;
}

.promo-subtitle {
  font-size: 11px;
  color: #fef08a;
  margin-bottom: 10px;
  font-weight: 500;
}

.btn-promo {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-promo:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.promo-image {
  position: absolute;
  right: -5px;
  bottom: 0;
  width: 48%;
  height: 95%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

.carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  align-items: center;
  z-index: 4;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot.active {
  background-color: #ffffff;
  width: 18px;
  height: 6px;
  border-radius: 3px;
}

/* SECTION HEADERS */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px 10px 16px;
}

.section-header h2 {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #111827;
}

.section-header .btn-see-all {
  color: #006734;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.section-header .btn-see-all svg {
  width: 14px;
  height: 14px;
}

/* LELANG AKTIF SECTION */
.lelang-container {
  padding: 0 16px 16px 16px;
}

.lelang-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  border: 1px solid #e5e7eb;
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
}

.lelang-img-container {
  width: 85px;
  height: 95px;
  background-color: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lelang-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lelang-info {
  flex: 1;
  min-width: 0;
}

.lelang-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.countdown-timer {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #dc2626;
  background-color: #fee2e2;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  width: fit-content;
}

.lelang-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  color: #111827;
}

.lelang-packaging {
  font-size: 10.5px;
  color: #6b7280;
  margin-bottom: 4px;
}

.lelang-price-info {
  margin-bottom: 6px;
}

.price-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #dc2626;
  display: block;
  margin-bottom: 1px;
}

.price-main-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.auction-price {
  font-size: 13.5px;
  font-weight: 800;
  color: #dc2626;
}

.price-unit {
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
}

.original-price {
  font-size: 10.5px;
  text-decoration: line-through;
  color: #9ca3af;
  display: block;
}

.lelang-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.stock-tag {
  background-color: #e8f5e9;
  color: #166534;
  font-size: 9.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.btn-ikut-lelang {
  background-color: #005c2b;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-ikut-lelang:hover, .btn-ikut-lelang:active {
  background-color: #004d24;
}

/* HORIZONTAL PRODUCT SCROLL - PRODUK PILIHAN */
.horizontal-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 16px 16px 16px;
  scroll-snap-type: x mandatory;
}

.product-scroll-card {
  flex: 0 0 108px;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid #e5e7eb;
  text-align: center;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 145px;
  cursor: pointer;
  transition: var(--transition);
}

.product-scroll-card:active {
  transform: scale(0.96);
}

.product-scroll-img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  margin: 0 auto 6px auto;
}

.product-scroll-name {
  font-size: 10.5px;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
  height: 26px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}

.product-scroll-price {
  font-size: 10px;
  font-weight: 700;
  color: #006734;
}

.unit-text {
  font-size: 9.5px;
  font-weight: 600;
  color: #006734;
}

/* PESANAN TERBARU SECTION */
.orders-container {
  padding: 0 16px 16px 16px;
}

.order-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: var(--transition);
}

.order-card:active {
  background-color: #fafafa;
}

.order-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-icon-wrapper {
  width: 38px;
  height: 38px;
  background-color: #004d26;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-details h4 {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.order-details .order-date {
  font-size: 10px;
  color: #6b7280;
  margin: 2px 0 3px 0;
}

.order-details .order-price {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.order-status {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
}

.status-badge.diproses {
  background-color: #fff7ed;
  color: #ea580c;
}

.status-badge.selesai {
  background-color: #dcfce7;
  color: var(--success-color);
}

.status-badge.batal {
  background-color: #fee2e2;
  color: var(--danger-color);
}

.chevron-arrow {
  width: 14px;
  height: 14px;
  color: #9ca3af;
}

/* KEUNTUNGAN MITRA SECTION */
.benefits-container {
  padding: 0 16px 20px 16px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.benefit-card {
  border-radius: 12px;
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: var(--transition);
}

.benefit-card.c1 { background-color: #edf8f0; color: #006734; }
.benefit-card.c2 { background-color: #fef9e6; color: #b45309; }
.benefit-card.c3 { background-color: #ebf5ff; color: #1d4ed8; }
.benefit-card.c4 { background-color: #f8efff; color: #7e22ce; }

.benefit-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: currentColor;
  color: #ffffff;
}

.benefit-icon svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}

.benefit-title {
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 2px;
  color: #111827;
}

.benefit-desc {
  font-size: 8.5px;
  color: #4b5563;
  line-height: 1.25;
}

/* BOTTOM NAVIGATION BAR */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 6px;
  z-index: 20;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}

.bottom-nav a,
.nav-item,
.nav-item:link,
.nav-item:visited,
.nav-item:hover,
.nav-item:active,
.nav-item:focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  gap: 3px;
  width: 20%;
  height: 100%;
  text-decoration: none !important;
  outline: none;
  transition: var(--transition);
}

.nav-item svg {
  width: 22px;
  height: 22px;
  transition: var(--transition);
}

.nav-item span,
.nav-label {
  font-size: 10px;
  font-weight: 500;
  text-decoration: none !important;
  line-height: 1.2;
}

.nav-item.active {
  color: #006734;
  text-decoration: none !important;
}

.nav-item.active span,
.nav-item.active .nav-label {
  font-weight: 700;
  text-decoration: none !important;
}

.nav-item.active svg {
  transform: translateY(-1px);
}

/* PAGE WRAPPERS (TAB CONTENTS) */
.page-section {
  animation: fadeIn 0.3s ease-out;
}

/* DYNAMIC MODALS AND DRAWERS */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end; /* Align bottom for sheets */
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  width: 100%;
  background-color: #ffffff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px;
  max-height: 80%;
  overflow-y: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -10px 25px rgba(0,0,0,0.1);
  position: relative;
}

.bottom-sheet::-webkit-scrollbar,
.sheet-content::-webkit-scrollbar,
.sheet-body::-webkit-scrollbar,
.detail-content-body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.modal-overlay.active .bottom-sheet {
  transform: translateY(0);
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background-color: #cbd5e1;
  border-radius: 2px;
  margin: -12px auto 16px auto;
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sheet-header h3 {
  font-size: 16px;
  font-weight: 700;
}

.btn-close-sheet {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 4px;
}

.btn-close-sheet svg {
  width: 20px;
  height: 20px;
}

/* Modal Body Forms styles */
.sheet-body {
  padding-bottom: 12px;
}

.option-select {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.option-select:active {
  background-color: var(--bg-gray);
}

.option-select.selected {
  border-color: var(--primary-green);
  background-color: var(--primary-green-light);
}

.option-label {
  font-size: 14px;
  font-weight: 600;
}

.option-desc {
  font-size: 11px;
  color: var(--text-gray);
  margin-top: 2px;
}

/* Notification List style inside drawer */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notif-item {
  padding: 14px;
  border-radius: var(--radius-md);
  background-color: #fafbfc;
  border: 1px solid var(--border-color);
  position: relative;
  transition: var(--transition);
}

.notif-item.unread {
  background-color: var(--primary-green-light);
  border-color: rgba(0, 103, 52, 0.1);
}

.notif-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.notif-item-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}

.notif-item-time {
  font-size: 9px;
  color: var(--text-light);
}

.notif-item-body {
  font-size: 11px;
  color: var(--text-gray);
  line-height: 1.4;
}

.notif-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--text-light);
}

.notif-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}

/* PRODUCT TAB VIEW STYLES */
.header-center-title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.cart-header-btn {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  position: relative;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.cart-header-btn:active {
  transform: scale(0.92);
  background-color: #f8fafc;
}

.product-search-row {
  display: flex;
  gap: 10px;
  padding: 14px 16px 10px 16px;
  align-items: center;
}

.search-input-box {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 12px;
  height: 42px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.search-input-box input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font-size: 12.5px;
  color: #111827;
  padding-left: 8px;
}

.search-input-box input::placeholder {
  color: #9ca3af;
}

.search-icon-svg {
  width: 18px;
  height: 18px;
  color: #9ca3af;
  flex-shrink: 0;
}

.btn-filter-action {
  background-color: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  height: 42px;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 92, 43, 0.15);
}

.btn-filter-action:active {
  background-color: #004d24;
  transform: scale(0.96);
}

.product-category-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 16px 12px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.prod-cat-pill {
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
  cursor: pointer;
  transition: var(--transition);
  scroll-snap-align: start;
}

.prod-cat-pill.active {
  background-color: #005c2b;
  color: #ffffff;
  border-color: #005c2b;
  font-weight: 700;
}

/* Product Promo Carousel */
.product-promo-container {
  padding: 0 16px 14px 16px;
  position: relative;
}

.product-promo-wrapper {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.product-promo-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

.product-promo-slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 16px 18px 26px 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 135px;
  box-sizing: border-box;
}

.product-promo-info {
  width: 56%;
  z-index: 2;
}

.product-promo-badge {
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.product-promo-title {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 4px;
}

.product-promo-subtitle {
  font-size: 11px;
  margin-bottom: 10px;
  font-weight: 500;
}

.btn-product-promo {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-product-promo:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.product-promo-img {
  position: absolute;
  right: -5px;
  bottom: 0;
  width: 48%;
  height: 95%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

.prod-dot {
  background-color: #cbd5e1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.prod-dot.active {
  background-color: #005c2b;
  width: 18px;
  height: 6px;
  border-radius: 3px;
}

.product-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 10px 16px;
}

.product-section-header h2 {
  font-size: 13.5px;
  font-weight: 800;
  color: #111827;
}

.btn-sort {
  background: none;
  border: none;
  color: #005c2b;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* LELANG TAB LIST VIEW */
.lelang-tab-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* PESANAN TAB LAYOUT */
.order-tabs-header {
  padding: 16px 20px 10px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 60px;
  z-index: 9;
}

.order-status-tabs {
  display: flex;
  justify-content: space-between;
}

.order-status-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-gray);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}

.order-status-tab.active {
  color: var(--primary-green);
  border-bottom-color: var(--primary-green);
}

.order-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* AKUN TAB LAYOUT */
.akun-header {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
  padding: 30px 20px;
  color: #ffffff;
  text-align: center;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.avatar-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 auto 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.avatar-wrapper svg {
  width: 36px;
  height: 36px;
}

.akun-name {
  font-size: 16px;
  font-weight: 700;
}

.akun-store-name {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

.akun-badge-status {
  background-color: var(--accent-gold);
  color: #000000;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  display: inline-block;
  margin-top: 6px;
}

.akun-list {
  padding: 20px;
}

.akun-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-left: 4px;
}

.akun-menu-card {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.akun-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 1px solid var(--border-color);
}

.akun-menu-item:last-child {
  border-bottom: none;
}

.akun-menu-item:active {
  background-color: #fafafa;
}

.akun-menu-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

.akun-menu-icon {
  width: 20px;
  height: 20px;
  color: var(--text-gray);
}

.akun-menu-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-light);
  font-size: 11px;
}

.akun-menu-item.logout-item .akun-menu-left {
  color: var(--danger-color);
}

.akun-menu-item.logout-item .akun-menu-icon {
  color: var(--danger-color);
}

/* ANIMATIONS */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================================
   WIREFRAME EXTENSION STYLES
   ======================================================== */

/* Shipping Tracker Stepper */
.stepper-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 16px 0;
  padding: 0 10px;
}

.stepper-container::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 30px;
  right: 30px;
  height: 2px;
  background-color: #e2e8f0;
  z-index: 1;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 25%;
}

.stepper-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2.5px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 14px;
  transition: var(--transition);
}

.stepper-step.active .stepper-icon-circle {
  border-color: var(--primary-green);
  background-color: var(--primary-green-light);
  color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(0, 103, 52, 0.15);
}

.stepper-step.completed .stepper-icon-circle {
  border-color: var(--primary-green);
  background-color: var(--primary-green);
  color: #ffffff;
}

.stepper-label {
  font-size: 9px;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
  color: var(--text-gray);
  line-height: 1.2;
}

.stepper-step.active .stepper-label {
  color: var(--primary-green);
  font-weight: 700;
}

/* Detailed Order Layout Elements */
.detail-card-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-color);
  font-size: 12px;
}

.detail-card-row:last-child {
  border-bottom: none;
}

.detail-label-gray {
  color: var(--text-gray);
}

.detail-val-dark {
  font-weight: 600;
  color: var(--text-dark);
}

.order-detail-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color);
}

.order-detail-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-back-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-dark);
  display: flex;
  align-items: center;
}

.order-detail-title-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

/* Callout Warning Banner */
.card-banner-warning {
  background-color: #fffbeb;
  border: 1px solid #fef3c7;
  color: #b45309;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 11px;
  margin-top: 14px;
  margin-bottom: 14px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.card-banner-warning svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Ranking Reward Card */
.ranking-reward-card {
  background-color: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  box-shadow: var(--shadow-sm);
}

.ranking-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ranking-trophy-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fef08a;
  border-radius: 50%;
  color: #ca8a04;
}

.ranking-card-text h4 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.ranking-card-text p {
  font-size: 9.5px;
  color: var(--text-gray);
  margin-top: 2px;
}

.btn-see-ranking {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
}

/* Timeline logs inside order detail */
.timeline-logs-container {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--shadow-sm);
}

.timeline-logs-container h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.timeline-log-list {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 20px;
}

.timeline-log-list::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-color: #e2e8f0;
}

.timeline-log-item {
  position: relative;
  padding-bottom: 16px;
}

.timeline-log-item:last-child {
  padding-bottom: 0;
}

.timeline-log-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #cbd5e1;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1.5px #cbd5e1;
}

.timeline-log-item.active .timeline-log-dot {
  background-color: var(--success-color);
  box-shadow: 0 0 0 1.5px var(--success-color);
}

.timeline-log-item.warning .timeline-log-dot {
  background-color: var(--warning-color);
  box-shadow: 0 0 0 1.5px var(--warning-color);
}

.timeline-log-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.timeline-log-desc {
  font-size: 9.5px;
  color: var(--text-gray);
  margin-top: 2px;
  line-height: 1.35;
}

.timeline-log-time {
  font-size: 9.5px;
  color: var(--text-light);
  margin-top: 2px;
}

.timeline-log-badge-qty {
  float: right;
  font-weight: 700;
  color: var(--primary-green);
  font-size: 11.5px;
}

.timeline-log-badge-price {
  float: right;
  font-weight: 700;
  color: var(--warning-color);
  font-size: 11.5px;
}

/* Floating Cart Bar */
.floating-cart-bar {
  position: absolute;
  bottom: 76px;
  left: 16px;
  right: 16px;
  height: 48px;
  background-color: #ffffff;
  border: 1.5px solid #22c55e;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  color: #005c2b;
  z-index: 15;
  box-shadow: 0 4px 16px rgba(0, 103, 52, 0.08);
  cursor: pointer;
  transition: var(--transition);
}

.floating-cart-bar:active {
  transform: scale(0.98);
  background-color: #f0fdf4;
}

.cart-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #005c2b;
}

.cart-bar-left svg {
  width: 18px;
  height: 18px;
  stroke: #005c2b;
}

.cart-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: #005c2b;
}

.cart-bar-right svg {
  width: 14px;
  height: 14px;
}

/* Row-style Product list */
.product-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 140px 16px; /* Space for float cart bar and bottom nav */
}

.product-row-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
  transition: var(--transition);
}

.product-row-img-wrapper {
  width: 65px;
  height: 75px;
  background-color: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  flex-shrink: 0;
}

.product-row-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-row-info {
  flex: 1;
  min-width: 0;
}

.product-row-name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}

.product-row-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.product-row-stock-tag {
  background-color: #e8f8ee;
  color: #16a34a;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.product-row-desc {
  font-size: 10.5px;
  color: #6b7280;
  margin-bottom: 6px;
}

.product-row-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.product-row-price {
  font-size: 13.5px;
  font-weight: 800;
  color: #005c2b;
}

.product-row-price-unit {
  font-size: 11px;
  font-weight: 700;
  color: #005c2b;
}

.product-row-avg-price {
  font-size: 10px;
  color: #6b7280;
  margin-top: 1px;
  font-weight: 500;
}

/* Quantity controls row */
.product-row-action {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: #ffffff;
  height: 32px;
  overflow: hidden;
}

.qty-btn {
  border: none;
  background: none;
  width: 26px;
  height: 100%;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: var(--transition);
}

.qty-btn:active {
  background-color: #f1f5f9;
  color: #111827;
}

.qty-val {
  width: 28px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  background: none;
  outline: none;
  color: #111827;
}

.btn-add-cart {
  background-color: #005c2b;
  color: #ffffff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.btn-add-cart:active {
  background-color: #004d24;
  transform: scale(0.92);
}

.btn-add-cart svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
}

/* Categorized Notifications Page elements (Image 4) */
.notif-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.notif-tab-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 60px;
  z-index: 9;
}

/* Hide scrollbar in category pills */
.notif-tab-bar::-webkit-scrollbar {
  display: none;
}
.notif-tab-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.notif-tab {
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.notif-tab.active {
  background-color: var(--primary-green);
  color: #ffffff;
  border-color: var(--primary-green);
}

.notif-pill-badge {
  background-color: var(--danger-color);
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  padding: 1.5px 5.5px;
  border-radius: 10px;
  margin-left: 4px;
  line-height: 1;
}

.notif-list-container {
  padding: 12px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-card-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background-color: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.notif-card-item:active {
  background-color: #fafbfc;
}

.notif-card-item.unread {
  border-left: 3px solid var(--danger-color);
}

.notif-card-item.unread::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 6px;
  width: 5px;
  height: 5px;
  background-color: var(--danger-color);
  border-radius: 50%;
}

.notif-card-item.highlight-bg {
  background-color: #fffdf5;
  border: 1px solid #fef3c7;
}

.notif-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Colors matching mockup icons */
.notif-icon-circle.basket { background-color: #d1fae5; color: #059669; }
.notif-icon-circle.wallet { background-color: #ffedd5; color: #ea580c; }
.notif-icon-circle.truck { background-color: #dbeafe; color: #2563eb; }
.notif-icon-circle.box { background-color: #f3e8ff; color: #9333ea; }
.notif-icon-circle.trophy { background-color: #fef9c3; color: #ca8a04; }
.notif-icon-circle.gavel { background-color: #d1fae5; color: #059669; }
.notif-icon-circle.calendar { background-color: #ffedd5; color: #ea580c; }
.notif-icon-circle.megaphone { background-color: #f0fdf4; color: #166534; }
.notif-icon-circle.shield { background-color: #d1fae5; color: #059669; }

.notif-icon-circle svg {
  width: 18px;
  height: 18px;
}

.notif-card-content {
  flex: 1;
}

.notif-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}

.notif-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.notif-card-time {
  font-size: 9.5px;
  color: var(--text-light);
}

.notif-card-body {
  font-size: 10.5px;
  color: var(--text-gray);
  line-height: 1.4;
}

.notif-card-body.highlight-text {
  color: #b45309;
  font-weight: 600;
}

/* Enable Notification CTA Callout Banner */
.notif-cta-banner {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  box-shadow: var(--shadow-sm);
}

.notif-cta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.notif-cta-bell-circle {
  width: 32px;
  height: 32px;
  background-color: var(--primary-green-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-green);
  flex-shrink: 0;
}

.notif-cta-bell-circle svg {
  width: 16px;
  height: 16px;
}

.notif-cta-text h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
}

.notif-cta-text p {
  font-size: 9px;
  color: var(--text-gray);
  margin-top: 2px;
  line-height: 1.3;
  max-width: 180px;
}

.btn-cta-enable {
  background-color: var(--primary-green);
  color: #ffffff;
  border: none;
  font-size: 9.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.btn-cta-enable:active {
  background-color: var(--primary-green-dark);
}

/* ========================================== */
/* AKUN TAB - PREMIUM REDESIGN (MATCH MOCKUP) */
/* ========================================== */
.header-actions-akun {
  display: flex;
  align-items: center;
  gap: 8px;
}

.akun-page-container {
  padding: 12px 14px 28px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 1. Dark Green Profile Card */
.akun-profile-card {
  background: #005c2b;
  border-radius: 16px;
  padding: 16px 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  box-shadow: 0 4px 14px rgba(0, 92, 43, 0.16);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.akun-profile-card:active {
  transform: scale(0.99);
}

.store-avatar-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 4px;
}

.akun-profile-right {
  flex: 1;
  min-width: 0;
}

.akun-store-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  position: relative;
}

.akun-store-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.akun-status-pill {
  background: #14532d;
  border: 1px solid #22c55e;
  color: #4ade80;
  font-size: 9px;
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

.akun-chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.akun-meta-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.akun-meta-row {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  line-height: 1.35;
}

.meta-label {
  width: 82px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.meta-colon {
  width: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.meta-val {
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2. Saldo Mitra Floating White Card */
.akun-saldo-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
  overflow: hidden;
}

.akun-saldo-main {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.saldo-info .saldo-label {
  font-size: 10.5px;
  color: #6b7280;
  font-weight: 500;
  display: block;
}

.saldo-info .saldo-amount {
  font-size: 19px;
  font-weight: 800;
  color: #005c2b;
  letter-spacing: -0.4px;
  margin-top: 1px;
}

.btn-topup-saldo {
  background: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-topup-saldo:active {
  transform: scale(0.96);
  background: #004520;
}

.akun-saldo-history {
  padding: 10px 14px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.akun-saldo-history:active {
  background-color: #f8fafc;
}

.history-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: #4b5563;
}

.history-left svg {
  color: #6b7280;
}

/* 3. Mitra Benefit Banner */
.akun-benefit-banner {
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.akun-benefit-banner:active {
  transform: scale(0.99);
}

.benefit-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.benefit-badge-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #005c2b;
}

.benefit-text .benefit-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  margin-bottom: 2px;
}

.benefit-text .benefit-desc {
  font-size: 9.5px;
  color: #4b5563;
  line-height: 1.25;
}

.btn-benefit-action {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #111827;
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

/* 4. Menu List Section */
.akun-menu-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.akun-section-heading {
  font-size: 12.5px;
  font-weight: 700;
  color: #111827;
  margin-left: 2px;
  margin-top: 2px;
}

.akun-menu-container {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.akun-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.akun-nav-item:last-child {
  border-bottom: none;
}

.akun-nav-item:active {
  background-color: #f8fafc;
}

.nav-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-item-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #005c2b;
}

.nav-item-icon svg {
  stroke: #005c2b;
}

.nav-item-text {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

.nav-item-arrow {
  width: 14px;
  height: 14px;
  color: #9ca3af;
}

/* 5. Logout Button */
.btn-akun-logout {
  background: #ffffff;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.04);
}

.btn-akun-logout:active {
  background: #fef2f2;
  transform: scale(0.99);
}

/* ========================================== */
/* PESANAN TAB - PREMIUM REDESIGN (MATCH MOCKUP) */
/* ========================================== */
.header-actions-pesanan {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pesanan-page-container {
  padding: 12px 14px 28px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Horizontal Status Filter Tabs */
.pesanan-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  margin: 0 -2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.pesanan-filter-bar::-webkit-scrollbar {
  display: none;
}

.pesanan-tab-pill {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.pesanan-tab-pill.active {
  background: #005c2b;
  color: #ffffff;
  border-color: #005c2b;
  box-shadow: 0 2px 6px rgba(0, 92, 43, 0.2);
}

/* Order List Container */
.pesanan-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Order Card */
.order-card-v2 {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 14px 14px 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.025);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.order-card-v2:active {
  transform: scale(0.995);
}

/* Card Header (Invoice & Date + Status Badge) */
.order-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #f1f5f9;
  padding-bottom: 8px;
}

.order-inv-col h4 {
  font-size: 12.5px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 2px;
  letter-spacing: -0.2px;
}

.order-date-text {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}

/* Status Badges */
.order-status-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}

.status-tag-diproses {
  background: #fef3c7;
  color: #d97706;
}

.status-tag-dikirim {
  background: #dbeafe;
  color: #1d4ed8;
}

.status-tag-selesai {
  background: #dcfce7;
  color: #15803d;
}

.status-tag-menunggu {
  background: #ffedd5;
  color: #ea580c;
}

.status-tag-dibatalkan {
  background: #f1f5f9;
  color: #64748b;
}

/* Card Middle (Product Info + Pricing & Action) */
.order-card-mid {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-prod-thumb-wrapper {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.order-prod-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.order-prod-info {
  flex: 1;
  min-width: 0;
}

.order-prod-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.order-prod-pack {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 2px;
}

.order-prod-unit-price {
  font-size: 11px;
  font-weight: 700;
  color: #006734;
  margin-bottom: 2px;
}

.order-prod-qty {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}

/* Right Summary & Action */
.order-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 60px;
}

.order-total-block {
  text-align: right;
  margin-bottom: 8px;
}

.order-total-label {
  font-size: 9.5px;
  color: #64748b;
  display: block;
}

.order-total-val {
  font-size: 13.5px;
  font-weight: 800;
  color: #005c2b;
  letter-spacing: -0.3px;
}

.order-item-count-text {
  font-size: 9.5px;
  color: #64748b;
}

/* Action Buttons */
.btn-order-action-outline {
  background: #ffffff;
  border: 1px solid #005c2b;
  color: #005c2b;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-order-action-outline:active {
  background: #f0fdf4;
  transform: scale(0.96);
}

.btn-order-pay-now {
  background: #005c2b;
  border: none;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 92, 43, 0.25);
  white-space: nowrap;
}

.btn-order-pay-now:active {
  background: #004520;
  transform: scale(0.96);
}

.order-pay-limit-box {
  text-align: right;
  margin-bottom: 6px;
}

.order-pay-limit-label {
  font-size: 9px;
  color: #dc2626;
  font-weight: 600;
  display: block;
}

.order-countdown-text {
  font-size: 11.5px;
  font-weight: 800;
  color: #dc2626;
}

/* Bottom Support Banner */
.order-support-banner {
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.support-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.support-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #dcfce7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #006734;
  flex-shrink: 0;
}

.support-banner-text h4 {
  font-size: 11.5px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 2px;
}

.support-banner-text p {
  font-size: 9.5px;
  color: #15803d;
  line-height: 1.3;
}

.btn-support-cs {
  background: #ffffff;
  border: 1px solid #86efac;
  color: #166534;
  font-size: 10.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}

.btn-support-cs:active {
  background: #dcfce7;
}

/* ========================================== */
/* LELANG TAB - PREMIUM REDESIGN (MATCH MOCKUP) */
/* ========================================== */
.header-actions-lelang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lelang-page-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

/* 1. Lelang Sub-Nav Tabs */
.lelang-nav-tabs {
  display: flex;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.lelang-nav-tab {
  flex: 1;
  text-align: center;
  padding: 12px 6px 10px 6px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
}

.lelang-nav-tab.active {
  color: #005c2b;
  font-weight: 800;
  border-bottom-color: #005c2b;
}

.lelang-tab-content-wrapper {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 2. Top Hero Promo Banner */
.lelang-hero-banner {
  background: linear-gradient(135deg, #eaf6ed 0%, #f3f9f3 100%);
  border: 1px solid #d1ead7;
  border-radius: 16px;
  padding: 14px 14px 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 92, 43, 0.04);
}

.hero-banner-left {
  flex: 1;
  max-width: 60%;
  z-index: 2;
}

.hero-banner-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #005c2b;
  line-height: 1.35;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

.hero-banner-subtitle {
  font-size: 10.5px;
  color: #475569;
  line-height: 1.35;
}

.hero-banner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.hero-gavel-img {
  width: 96px;
  height: 72px;
  object-fit: contain;
  margin-bottom: -4px;
}

.btn-cara-lelang {
  background: #003819;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 56, 25, 0.2);
  transition: all 0.15s ease;
}

.btn-cara-lelang:active {
  transform: scale(0.96);
  background: #002611;
}

/* 3. Auction Product Cards */
.lelang-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lelang-card-v2 {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 12px 14px 14px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.025);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Card Header (Stock Status) */
.lelang-card-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.lelang-timer-badge {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 14px;
  letter-spacing: 0.5px;
}

.lelang-stock-badge {
  background: #eef8f1;
  color: #15803d;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 14px;
}

/* Card Body (Two Columns) */
.lelang-card-body-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
}

/* Left Column: Image & Progress Bar */
.lelang-left-col {
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.lelang-prod-thumb-box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.lelang-prod-thumb-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.lelang-progress-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lelang-progress-track {
  width: 100%;
  height: 5px;
  background: #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
}

.lelang-progress-fill {
  height: 100%;
  background: #eab308;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.lelang-progress-label {
  font-size: 9.5px;
  color: #64748b;
  font-weight: 600;
  text-align: center;
}

/* Right Column: Title, Packaging, Prices, Actions */
.lelang-right-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lelang-prod-name {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lelang-prod-pack {
  font-size: 10.5px;
  color: #64748b;
  margin-bottom: 6px;
}

.lelang-price-block {
  margin-bottom: 8px;
}

.lelang-price-normal-row {
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 2px;
}

.lelang-price-normal-val {
  text-decoration: line-through;
  margin-left: 2px;
}

.lelang-price-auction-label {
  font-size: 10px;
  font-weight: 700;
  color: #dc2626;
  display: block;
}

.lelang-price-auction-val {
  font-size: 14.5px;
  font-weight: 900;
  color: #dc2626;
  letter-spacing: -0.3px;
}

/* Action Buttons (Simpan & Ikut Lelang) */
.lelang-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.btn-lelang-wishlist {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 10.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-lelang-wishlist.saved {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

.btn-lelang-wishlist:active {
  transform: scale(0.96);
}

.btn-lelang-bid {
  background: #005c2b;
  border: none;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 92, 43, 0.2);
}

.btn-lelang-bid:active {
  background: #004520;
  transform: scale(0.96);
}

.btn-lelang-remind {
  background: #ffffff;
  color: #005c2b;
  border: 1.5px solid #005c2b;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-lelang-remind:active {
  background: #e8f8ee;
  transform: scale(0.96);
}

.btn-lelang-detail-history {
  background: #ffffff;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-lelang-detail-history:active {
  background: #f1f5f9;
  transform: scale(0.96);
}

.btn-lelang-detail-prod {
  background: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 92, 43, 0.2);
  transition: all 0.15s ease;
}

.btn-lelang-detail-prod:active {
  background: #004520;
  transform: scale(0.96);
}

/* 4. Bottom Security / Trust Footer */
.lelang-trust-footer {
  background: #fdfcf7;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trust-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.trust-icon {
  width: 22px;
  height: 22px;
  color: #006734;
  flex-shrink: 0;
}

.trust-text h5 {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1px;
}

.trust-text p {
  font-size: 9px;
  color: #64748b;
}

.trust-link-btn {
  font-size: 10px;
  font-weight: 700;
  color: #005c2b;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
}

/* ========================================== */
/* BERANDA (HOME) - PIXEL-PERFECT REDESIGN    */
/* ========================================== */
#secBeranda {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 24px 14px;
}

/* 1. Saldo Mitra Card */
.beranda-wallet-card {
  background: #005c2b;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 92, 43, 0.2);
  margin-bottom: 2px;
}

.wallet-text-group {
  display: flex;
  flex-direction: column;
}

.wallet-label-title {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.wallet-amount-val {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2px;
  letter-spacing: -0.3px;
}

.btn-wallet-topup {
  background: #ffffff;
  color: #005c2b;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  padding: 7px 14px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-wallet-topup:active {
  transform: scale(0.96);
  background: #f1f5f9;
}

/* 2. Promo Banner Carousel */
.beranda-promo-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(105deg, #005c2b 0%, #006e33 50%, #005224 100%);
  min-height: 142px;
  box-shadow: 0 4px 14px rgba(0, 92, 43, 0.15);
}

.beranda-promo-wrapper {
  width: 100%;
  overflow: hidden;
}

.beranda-promo-track {
  display: flex;
  transition: transform 0.4s ease;
  width: 100%;
}

.beranda-promo-slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 16px 14px 22px 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 142px;
}

.slide-content-left {
  width: 54%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.promo-badge-yellow {
  background: #facc15;
  color: #451a03;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 6px;
  letter-spacing: 0.4px;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.promo-title-bold {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

.promo-sub-yellow {
  font-size: 10px;
  color: #fef08a;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.3;
}

.btn-lihat-promo {
  background: #facc15;
  color: #713f12;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-lihat-promo:active {
  transform: scale(0.96);
}

.slide-img-right {
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 50%;
  height: 96%;
  pointer-events: none;
  z-index: 1;
}

.slide-img-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

.beranda-carousel-dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}

.beranda-carousel-dots .carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}

.beranda-carousel-dots .carousel-dot.active {
  background: #ffffff;
}

/* 3. Section Headers */
.beranda-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  margin-bottom: 2px;
}

.beranda-section-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.beranda-see-all-btn {
  font-size: 11.5px;
  font-weight: 700;
  color: #005c2b;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
}

.beranda-see-all-btn:hover {
  text-decoration: underline;
}

/* 4. Lelang Aktif Card on Beranda */
.beranda-lelang-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 12px;
  display: flex;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.b-lelang-thumb-box {
  width: 72px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.b-lelang-thumb-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.b-lelang-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.b-lelang-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.b-lelang-timer-badge {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.b-lelang-arrow {
  color: #94a3b8;
}

.b-lelang-prod-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b-lelang-pack {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 3px;
}

.b-lelang-price-box {
  margin-bottom: 4px;
}

.b-lelang-price-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: #dc2626;
  display: block;
}

.b-lelang-price-main {
  font-size: 13.5px;
  font-weight: 900;
  color: #dc2626;
  letter-spacing: -0.2px;
}

.b-lelang-price-orig {
  font-size: 9.5px;
  color: #94a3b8;
  text-decoration: line-through;
  display: block;
}

.b-lelang-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.b-lelang-stock-pill {
  background: #eef8f1;
  color: #15803d;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.btn-b-ikut-lelang {
  background: #005c2b;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 92, 43, 0.2);
  transition: all 0.15s ease;
}

.btn-b-ikut-lelang:active {
  transform: scale(0.96);
  background: #004520;
}

/* 5. Produk Pilihan Horizontal Scroll */
.beranda-products-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.beranda-products-scroll::-webkit-scrollbar {
  display: none;
}

.b-product-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 8px;
  width: 96px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.b-product-card:active {
  transform: scale(0.96);
}

.b-prod-img-box {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.b-prod-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.b-prod-name {
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
  height: 25px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}

.b-prod-price {
  font-size: 10px;
  font-weight: 800;
  color: #006734;
  white-space: nowrap;
}

/* 6. Pesanan Terbaru Card */
.beranda-latest-order-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  cursor: pointer;
  transition: background 0.15s ease;
}

.beranda-latest-order-card:active {
  background: #f8fafc;
}

.b-order-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.b-order-store-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.b-order-details-col {
  display: flex;
  flex-direction: column;
}

.b-order-inv {
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
}

.b-order-date {
  font-size: 10px;
  color: #64748b;
  margin-top: 1px;
  margin-bottom: 2px;
}

.b-order-total {
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
}

.b-order-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.b-order-status-badge {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #ffedd5;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 14px;
}

/* 7. Keuntungan Mitra (4 Columns / Cards) */
.beranda-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.benefit-item-card {
  border-radius: 12px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid transparent;
}

.benefit-card-green {
  background: #eef8f1;
  border-color: #d1ead7;
}

.benefit-card-yellow {
  background: #fefce8;
  border-color: #fef08a;
}

.benefit-card-blue {
  background: #eff6ff;
  border-color: #dbeafe;
}

.benefit-card-purple {
  background: #faf5ff;
  border-color: #f3e8ff;
}

.benefit-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.icon-box-green {
  background: #dcfce7;
  color: #15803d;
}

.icon-box-yellow {
  background: #fef9c3;
  color: #a16207;
}

.icon-box-blue {
  background: #dbeafe;
  color: #2563eb;
}

.icon-box-purple {
  background: #f3e8ff;
  color: #9333ea;
}

.benefit-title {
  font-size: 10px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 2px;
  line-height: 1.2;
}

.benefit-desc {
  font-size: 8px;
  color: #64748b;
  line-height: 1.2;
}

/* ========================================== */
/* BOTTOM SHEET & MODAL SYSTEM                */
/* ========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.bottom-sheet {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  padding: 12px 18px 24px 18px;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  box-sizing: border-box;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal-overlay.active .bottom-sheet {
  transform: translateY(0);
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
  margin: 0 auto 12px auto;
  flex-shrink: 0;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.sheet-header h3 {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.sheet-close {
  background: #f1f5f9;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.sheet-close:active {
  background: #e2e8f0;
  transform: scale(0.92);
}

.sheet-content {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========================================== */
/* PRODUCT DETAIL (DETAIL PRODUK) STYLES      */
/* ========================================== */
.product-detail-view {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  min-height: 100%;
}

.detail-top-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-detail-back {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1e293b;
  transition: all 0.15s ease;
}

.btn-detail-back:active {
  background: #f1f5f9;
  transform: scale(0.92);
}

.detail-nav-brand {
  height: 28px;
}

.detail-nav-brand img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.detail-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-nav-btn {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1e293b;
  position: relative;
  transition: all 0.15s ease;
}

.detail-nav-btn:active {
  background: #f1f5f9;
  transform: scale(0.92);
}

.detail-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #dc2626;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
}

.detail-content-body {
  padding: 14px 16px 140px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Image Card & Gallery */
.detail-main-img-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 240px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.detail-main-img-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.detail-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.detail-thumbs-row {
  display: flex;
  gap: 10px;
  margin-top: -6px;
}

.detail-thumb-box {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  padding: 4px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.detail-thumb-box.active {
  border-color: #005c2b;
  box-shadow: 0 0 0 1px #005c2b;
}

.detail-thumb-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Product Info Block */
.detail-meta-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-cat-tag {
  background: #eef8f1;
  color: #15803d;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 14px;
  width: fit-content;
}

.detail-prod-name {
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.25;
  margin-top: 2px;
}

.detail-prod-pack {
  font-size: 11.5px;
  color: #64748b;
}

.detail-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

.detail-rating-val {
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.detail-rating-val svg {
  fill: #facc15;
  color: #facc15;
}

.detail-price-box {
  margin-top: 6px;
}

.detail-price-main {
  font-size: 20px;
  font-weight: 900;
  color: #006734;
  letter-spacing: -0.3px;
}

.detail-price-unit-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.detail-stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-top: 6px;
}

.detail-stock-badge {
  background: #eef8f1;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

.detail-stock-val {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

/* Specs Key-Value Table */
.detail-specs-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  padding: 4px 0;
}

.detail-spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.spec-left-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}

.spec-left-label svg {
  width: 15px;
  height: 15px;
  color: #64748b;
}

.spec-right-val {
  font-weight: 600;
  color: #1e293b;
  text-align: right;
}

/* Trust / Value Props 4-Card Row */
.detail-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px 8px;
  border: 1px solid #e2e8f0;
}

.detail-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.detail-trust-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef8f1;
  color: #006734;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.detail-trust-title {
  font-size: 9.5px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 2px;
  line-height: 1.2;
}

.detail-trust-desc {
  font-size: 8px;
  color: #64748b;
  line-height: 1.2;
}

/* Description & Specs Cards */
.detail-section-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-sec-heading {
  font-size: 13.5px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.detail-desc-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: #475569;
}

.detail-toggle-link {
  font-size: 11px;
  font-weight: 700;
  color: #005c2b;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  width: fit-content;
}

.detail-info-list-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Fixed Bottom Action Bar */
.detail-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 430px;
  margin: 0 auto;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 10px 14px 14px 14px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-qty-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-qty-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-qty-label {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
}

.detail-qty-stepper-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  height: 30px;
  background: #ffffff;
}

.detail-stepper-btn {
  width: 28px;
  height: 100%;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-stepper-btn:active {
  background: #f1f5f9;
}

.detail-stepper-input {
  width: 32px;
  border: none;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
  outline: none;
  background: transparent;
}

.detail-stepper-unit {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.detail-stock-small {
  font-size: 9.5px;
  color: #64748b;
}

.detail-total-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.detail-total-label {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}

.detail-total-val {
  font-size: 16px;
  font-weight: 900;
  color: #006734;
  letter-spacing: -0.2px;
}

.detail-total-unit {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.detail-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-detail-add-cart {
  background: #ffffff;
  color: #005c2b;
  border: 1.5px solid #005c2b;
  border-radius: 12px;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-detail-add-cart:active {
  background: #eef8f1;
  transform: scale(0.97);
}

.btn-detail-buy-now {
  background: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(0, 92, 43, 0.25);
  transition: all 0.15s ease;
}

.btn-detail-buy-now:active {
  background: #004721;
  transform: scale(0.97);
}

/* ========================================================
   KERANJANG (CART PAGE) STYLES
   ======================================================== */
.header-actions-cart {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-trash-header-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}

.cart-trash-header-btn:active {
  transform: scale(0.92);
  background-color: #f1f5f9;
}

.cart-page-container {
  padding: 14px 16px 140px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-security-banner {
  background-color: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-security-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-security-left svg {
  width: 26px;
  height: 26px;
  color: #005c2b;
  flex-shrink: 0;
}

.cart-security-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #005c2b;
  line-height: 1.2;
}

.cart-security-sub {
  font-size: 10px;
  color: #4b5563;
  margin-top: 1px;
}

.cart-security-link {
  font-size: 11px;
  font-weight: 600;
  color: #005c2b;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  text-decoration: none;
}

.cart-select-all-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px;
}

.cart-select-all-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #111827;
  cursor: pointer;
  user-select: none;
}

.cart-btn-clear {
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 4px;
}

.cart-btn-clear:hover {
  color: #ef4444;
}

.cart-custom-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.cart-custom-checkbox.checked {
  background-color: #005c2b;
  border-color: #005c2b;
}

.cart-custom-checkbox svg {
  width: 12px;
  height: 12px;
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 3;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cart-custom-checkbox.checked svg {
  opacity: 1;
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-item-card {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
}

.cart-item-img-wrapper {
  width: 65px;
  height: 75px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cart-item-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.cart-item-price-trash {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-item-unit-price {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.cart-item-trash-btn {
  background: none;
  border: none;
  padding: 2px;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.cart-item-trash-btn:hover {
  color: #ef4444;
}

.cart-item-trash-btn svg {
  width: 15px;
  height: 15px;
}

.cart-item-packaging {
  font-size: 10px;
  color: #6b7280;
  margin-top: 2px;
}

.cart-item-price-tag {
  font-size: 12px;
  font-weight: 800;
  color: #005c2b;
  margin-top: 3px;
}

.cart-item-stock-tag {
  background-color: #e8f8ee;
  color: #16a34a;
  font-size: 8.5px;
  font-weight: 600;
  padding: 1.5px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 3px;
}

.cart-item-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 4px;
}

.cart-item-note {
  font-size: 9.5px;
  color: #6b7280;
}

.cart-item-action-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.cart-item-action-col .qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  height: 28px;
  background: #ffffff;
  overflow: hidden;
}

.cart-item-action-col .qty-btn {
  width: 26px;
  height: 100%;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.cart-item-action-col .qty-btn:active {
  background: #f1f5f9;
}

.cart-item-action-col .qty-val {
  width: 26px;
  border: none;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  outline: none;
  background: transparent;
  padding: 0;
}

.cart-item-subtotal {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
}

/* Shipping Card */
.cart-shipping-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-shipping-left {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cart-shipping-icon {
  width: 22px;
  height: 22px;
  color: #005c2b;
  flex-shrink: 0;
  margin-top: 2px;
}

.cart-shipping-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
}

.cart-shipping-store-name {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin-top: 1px;
}

.cart-shipping-addr {
  font-size: 10.5px;
  color: #4b5563;
  margin-top: 2px;
  line-height: 1.3;
}

.cart-shipping-change-btn {
  font-size: 11px;
  font-weight: 600;
  color: #005c2b;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
}

/* Order Summary */
.cart-summary-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-summary-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.cart-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #4b5563;
}

.cart-summary-val {
  font-weight: 600;
  color: #111827;
}

.cart-summary-divider {
  height: 1px;
  background-color: #f1f5f9;
  margin: 4px 0;
}

.cart-summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.cart-summary-total-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #005c2b;
}

.cart-summary-total-val {
  font-size: 15px;
  font-weight: 800;
  color: #005c2b;
}

/* Saldo Mitra Row */
.cart-saldo-row {
  background-color: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.cart-saldo-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #111827;
}

.cart-saldo-left svg {
  width: 18px;
  height: 18px;
  color: #005c2b;
}

.cart-saldo-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #111827;
}

/* iOS Toggle Switch */
.ios-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.ios-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ios-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: .3s;
  border-radius: 20px;
}

.ios-switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ios-switch input:checked + .ios-switch-slider {
  background-color: #005c2b;
}

.ios-switch input:checked + .ios-switch-slider:before {
  transform: translateX(16px);
}

/* Checkout Button */
.cart-checkout-sticky-btn {
  position: absolute;
  bottom: 76px;
  left: 16px;
  right: 16px;
  height: 48px;
  background-color: #005c2b;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  color: #ffffff;
  z-index: 15;
  box-shadow: 0 4px 16px rgba(0, 92, 43, 0.25);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  width: calc(100% - 32px);
}

.cart-checkout-sticky-btn:active {
  background-color: #004d24;
  transform: scale(0.98);
}

/* ========================================== */
/* CHECKOUT, DETAIL PESANAN & LACAK PENGIRIMAN STYLES */
/* ========================================== */

/* ========================================== */
/* CHECKOUT, DETAIL PESANAN & LACAK PENGIRIMAN STYLES */
/* ========================================== */

/* --- 1. Top Steps Progress Bar (Checkout & Detail Pesanan) --- */
.checkout-steps-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.checkout-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
  text-align: center;
}

.checkout-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid #e2e8f0;
  transition: all 0.2s ease;
  z-index: 2;
}

.checkout-step-item.active .checkout-step-circle {
  background: #005c2b;
  color: #ffffff;
  border-color: #005c2b;
  box-shadow: 0 2px 6px rgba(0, 92, 43, 0.25);
}

.checkout-step-item.completed .checkout-step-circle {
  background: #f0fdf4;
  color: #005c2b;
  border-color: #005c2b;
}

.checkout-step-label {
  font-size: 10px;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
}

.checkout-step-item.active .checkout-step-label {
  color: #005c2b;
  font-weight: 700;
}

.checkout-step-line {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 1px;
  border-top: 1.5px dashed #cbd5e1;
  z-index: 1;
}

.checkout-step-item:last-child .checkout-step-line {
  display: none;
}

/* --- 2. Checkout Section Cards --- */
.checkout-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.checkout-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.checkout-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkout-link-action {
  font-size: 12px;
  font-weight: 600;
  color: #005c2b;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Address Detail Box in Checkout */
.checkout-address-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.checkout-store-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #bbf7d0;
}

.checkout-store-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.checkout-store-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.badge-utama {
  font-size: 9.5px;
  font-weight: 700;
  background: #dcfce7;
  color: #15803d;
  padding: 2px 6px;
  border-radius: 4px;
}

.checkout-address-text {
  font-size: 11px;
  color: #4b5563;
  line-height: 1.4;
  margin-bottom: 4px;
}

.checkout-address-phone {
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 4px;
}

.checkout-notice-box {
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 12px;
  font-size: 10.5px;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Order Item Row inside Checkout / Detail */
.checkout-prod-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.checkout-prod-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.checkout-prod-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-prod-img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 2px;
}

.checkout-prod-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

.checkout-prod-pack {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 3px;
}

.checkout-prod-price {
  font-size: 11.5px;
  font-weight: 700;
  color: #005c2b;
}

.checkout-prod-right {
  text-align: right;
}

.checkout-prod-total {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.checkout-prod-qty {
  font-size: 10.5px;
  color: #6b7280;
  margin-top: 2px;
}

/* Note for Seller Input */
.checkout-note-container {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}

.checkout-note-label {
  font-size: 11px;
  color: #4b5563;
  margin-bottom: 6px;
}

.checkout-note-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  outline: none;
  background: #ffffff;
  color: #111827;
}

.checkout-note-input::placeholder {
  color: #9ca3af;
}

.checkout-note-input:focus {
  border-color: #005c2b;
}

.checkout-note-counter {
  text-align: right;
  font-size: 9.5px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Option Row in Checkout (Shipping & Payment) */
.checkout-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.checkout-option-label {
  font-size: 11px;
  color: #6b7280;
}

.checkout-option-value {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Checkout Summary Box (Grey container as in image) */
.checkout-summary-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #f1f5f9;
}

.checkout-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #374151;
  margin-bottom: 8px;
}

.checkout-summary-line-val {
  font-weight: 700;
  color: #111827;
}

.checkout-summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
}

.checkout-summary-total-label {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.checkout-summary-total-val {
  font-size: 18px;
  font-weight: 800;
  color: #005c2b;
}

/* Terms notice at bottom */
.checkout-terms-notice {
  font-size: 10.5px;
  color: #6b7280;
  text-align: center;
  margin: 12px 4px 90px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* --- 3. Sticky Checkout / Buat Pesanan Bottom Bar --- */
.checkout-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 25;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

.checkout-bar-total-col {
  display: flex;
  flex-direction: column;
}

.checkout-bar-label {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 2px;
}

.checkout-bar-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkout-bar-price {
  font-size: 17px;
  font-weight: 800;
  color: #005c2b;
}

.checkout-bar-expand-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-buat-pesanan {
  background: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 92, 43, 0.25);
  transition: all 0.2s ease;
}

.btn-buat-pesanan:active {
  background: #004d24;
  transform: scale(0.98);
}

/* --- 4. Detail Pesanan Page Specific Styles --- */
.order-invoice-header {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 14px;
  margin-bottom: 12px;
}

.order-invoice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.order-invoice-num {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-salin-inv {
  font-size: 10px;
  font-weight: 600;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 2px 6px;
  border-radius: 4px;
  color: #374151;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.order-status-pill-orange {
  background: #fff7ed;
  color: #ea580c;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #ffedd5;
}

.order-invoice-dates {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #6b7280;
}

.order-dates-val {
  font-weight: 600;
  color: #111827;
}

.order-alert-box {
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-alert-box img, .order-alert-box svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.order-alert-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 2px;
}

.order-alert-desc {
  font-size: 10.5px;
  color: #15803d;
}

.order-detail-bottom-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 30px;
}

.btn-beli-lagi {
  background: #ffffff;
  border: 1.5px solid #005c2b;
  color: #005c2b;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-lacak-pengiriman {
  background: #005c2b;
  border: none;
  color: #ffffff;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(0,92,43,0.2);
}

/* --- 5. Lacak Pengiriman Page Specific Styles --- */
.tracking-timeline-container {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 16px 14px;
  margin-bottom: 12px;
}

.tracking-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.tracking-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.tracking-updated-time {
  font-size: 10px;
  color: #005c2b;
  font-weight: 600;
}

.tracking-timeline-list {
  position: relative;
  padding-left: 28px;
}

.tracking-timeline-list::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 20px;
  left: 11px;
  width: 2px;
  background: #005c2b;
}

.tracking-timeline-item {
  position: relative;
  padding-bottom: 18px;
}

.tracking-timeline-item:last-child {
  padding-bottom: 0;
}

.tracking-dot {
  position: absolute;
  left: -28px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #005c2b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  z-index: 2;
}

.tracking-timeline-item.pending .tracking-dot {
  background: #f3f4f6;
  color: #9ca3af;
  border: 1.5px solid #e5e7eb;
}

.tracking-step-name {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

.tracking-step-time {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 3px;
}

.tracking-step-desc {
  font-size: 10.5px;
  color: #4b5563;
  line-height: 1.35;
}

/* Map Card in Tracking */
.tracking-map-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 14px;
  margin-bottom: 12px;
}

.tracking-map-wrapper {
  width: 100%;
  height: 140px;
  background: #e0f2fe;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  border: 1px solid #bae6fd;
}

.tracking-map-alert {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #166534;
}

/* Info Shipping 2 Col Grid */
.shipping-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.shipping-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shipping-info-label {
  font-size: 10px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.shipping-info-val {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
}

/* Help CS Banner */
.tracking-cs-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.tracking-cs-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tracking-cs-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 2px;
}

.tracking-cs-desc {
  font-size: 10px;
  color: #15803d;
  line-height: 1.3;
}

.btn-hubungi-cs {
  background: #ffffff;
  border: 1px solid #005c2b;
  color: #005c2b;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* --- 5. Global Toast Notifications --- */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 32px);
  max-width: 420px;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  pointer-events: auto;
  animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-item.toast-success {
  background-color: #005c2b;
  color: #ffffff;
  border: 1px solid #16a34a;
}

.toast-item.toast-error {
  background-color: #dc2626;
  color: #ffffff;
  border: 1px solid #ef4444;
}

.toast-item.toast-info {
  background-color: #1e293b;
  color: #ffffff;
  border: 1px solid #334155;
}

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
  line-height: 1.35;
}

.toast-fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes toastSlideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================
   6. PESANAN LELANG (AUCTION ORDER DETAILS) SCREEN
   =================================================== */
.pesanan-lelang-page {
  background-color: #f8fafc;
  min-height: 100vh;
  padding-bottom: 90px;
}

.pesanan-lelang-header {
  background: #ffffff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 30;
}

.pesanan-lelang-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pesanan-lelang-logo {
  height: 28px;
  object-fit: contain;
}

.pesanan-lelang-title {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  text-align: center;
  flex: 1;
}

.btn-lelang-help-cs {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: #005c2b;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
}

/* Horizontal Subtabs */
.pesanan-lelang-tabs {
  background: #ffffff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 12px;
}

.pesanan-lelang-tabs::-webkit-scrollbar {
  display: none;
}

.pl-tab {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: all 0.2s ease;
}

.pl-tab.active {
  color: #005c2b;
  font-weight: 800;
}

.pl-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2.5px;
  background-color: #005c2b;
  border-radius: 2px 2px 0 0;
}

/* Cards */
.pl-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 14px 16px;
  margin: 12px 14px 0 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.pl-sec-title {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 12px;
}

.pl-label-sm {
  font-size: 10.5px;
  color: #6b7280;
}

/* Card 1: Transaction & Status */
.pl-trans-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.pl-trans-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pl-inv-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pl-inv-text {
  font-size: 13.5px;
  font-weight: 800;
  color: #111827;
}

.btn-copy-inv {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.pl-badge-lelang {
  background: #e8f8ee;
  color: #005c2b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.pl-date-text {
  font-size: 10.5px;
  color: #6b7280;
}

.pl-trans-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pl-status-val {
  font-size: 12.5px;
  font-weight: 800;
}

.pl-status-val.status-pending {
  color: #d97706;
}

.pl-status-val.status-diproses {
  color: #005c2b;
}

.pl-timer-row {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #d97706;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

.pl-timer-digits {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.pl-deadline-text {
  font-size: 9.5px;
  color: #6b7280;
  line-height: 1.3;
  margin-top: 2px;
}

.pl-deadline-text span {
  font-weight: 600;
  color: #374151;
}

/* Card 2: Product & Quantities */
.pl-prod-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pl-prod-top {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.pl-prod-thumb {
  width: 76px;
  height: 76px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
}

.pl-prod-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pl-prod-info {
  flex: 1;
  min-width: 0;
}

.pl-badge-aktif {
  background: #e8f8ee;
  color: #005c2b;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
}

.pl-prod-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 2px;
}

.pl-prod-pack {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 6px;
}

.pl-prod-price-block {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.pl-label-price {
  color: #6b7280;
}

.pl-val-price {
  font-weight: 800;
  color: #005c2b;
  font-size: 12px;
}

.pl-quantities-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  gap: 8px;
}

.pl-qty-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pl-qty-item:last-child {
  text-align: right;
}

.pl-qty-val {
  font-size: 13px;
  font-weight: 800;
  color: #005c2b;
}

/* Card 3: Ongkir & Payment */
.pl-pay-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
}

.pl-pay-col-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pl-pay-label {
  font-size: 11px;
  color: #6b7280;
}

.pl-pay-val-dark {
  font-size: 11.5px;
  font-weight: 700;
  color: #111827;
}

.pl-pay-val-green {
  font-size: 13.5px;
  font-weight: 800;
  color: #005c2b;
}

.pl-pay-col-right {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #f1f5f9;
}

.pl-pay-subrow {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pl-pay-val-bold {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
}

.pl-warning-banner {
  background: #fefce8;
  border: 1px solid #fef08a;
  color: #854d0e;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  line-height: 1.35;
}

.pl-action-btns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.btn-pl-bayar {
  background: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 92, 43, 0.2);
}

.btn-pl-bayar:active {
  background: #004d24;
  transform: scale(0.98);
}

.btn-pl-batal {
  background: #ffffff;
  color: #005c2b;
  border: 1.5px solid #005c2b;
  border-radius: 8px;
  padding: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-pl-batal:active {
  background: #f0fdf4;
}

/* Card 4: Stepper & Delivery */
.pl-stepper-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin: 6px 0 16px 0;
}

.pl-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  text-align: center;
}

.pl-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin-bottom: 6px;
}

.pl-step-item.completed .pl-step-circle,
.pl-step-item.active .pl-step-circle {
  background: #ffffff;
  border-color: #005c2b;
  color: #005c2b;
}

.pl-step-label {
  font-size: 9.5px;
  color: #6b7280;
  font-weight: 600;
  line-height: 1.2;
}

.pl-step-item.active .pl-step-label {
  color: #005c2b;
  font-weight: 800;
}

.pl-step-line {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #cbd5e1;
  z-index: 1;
}

.pl-step-item.completed .pl-step-line {
  background: #005c2b;
}

.pl-delivery-inner-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pl-delivery-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.pl-addr-store {
  font-size: 11.5px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 2px;
}

.pl-addr-person {
  font-size: 10.5px;
  color: #4b5563;
  margin-bottom: 4px;
}

.pl-addr-street {
  font-size: 10px;
  color: #6b7280;
  line-height: 1.35;
}

.pl-ship-method {
  font-size: 11.5px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 2px;
}

.pl-ship-est {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 10px;
}

.btn-pl-lacak {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #111827;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.btn-pl-lacak:active {
  background: #f8fafc;
}

/* Card 5: Summary 4-Columns */
.pl-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pl-metric-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}

.pl-metric-col:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #f1f5f9;
}

.pl-metric-val {
  font-size: 11.5px;
  font-weight: 800;
  color: #111827;
}

.pl-metric-period {
  font-size: 9.5px;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
}

/* Card 6: Ranking Banner */
.pl-ranking-card {
  background: #fffbeb;
  border: 1px solid #fef08a;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 14px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pl-ranking-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pl-trophy-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fef08a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pl-ranking-text h4 {
  font-size: 11.5px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 2px;
}

.pl-ranking-text p {
  font-size: 10px;
  color: #92400e;
}

.btn-pl-see-ranking {
  background: #ffffff;
  border: 1px solid #fde047;
  color: #78350f;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Card 7: Riwayat Logs Timeline */
.pl-history-list {
  position: relative;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pl-history-list::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 8px;
  width: 1.5px;
  background: #e2e8f0;
}

.pl-history-item {
  position: relative;
}

.pl-history-dot {
  position: absolute;
  left: -24px;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #005c2b;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.pl-history-dot.dot-orange {
  background: #ea580c;
}

.pl-history-dot.dot-green {
  background: #005c2b;
}

.pl-history-dot.dot-grey {
  background: #cbd5e1;
  color: #64748b;
}

.pl-history-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.pl-history-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #111827;
}

.pl-history-qty {
  font-size: 11.5px;
  font-weight: 800;
  color: #005c2b;
}

.pl-history-price {
  font-size: 12px;
  font-weight: 800;
  color: #d97706;
}

.pl-history-time, .pl-history-desc {
  font-size: 10px;
  color: #6b7280;
  line-height: 1.3;
}

/* ===================================================
   7. DETAIL LELANG (AUCTION PRODUCT DETAIL) SCREEN (IMAGE 2)
   =================================================== */
.detail-lelang-page {
  background-color: #f8fafc;
  min-height: 100%;
  padding-bottom: 95px;
  box-sizing: border-box;
  position: relative;
}

.detail-lelang-header {
  background: #ffffff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 30;
  gap: 8px;
}

.detail-lelang-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.detail-lelang-header-title {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  text-align: center;
  flex: 1;
  white-space: nowrap;
}

.detail-lelang-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-dl-head-icon {
  background: none;
  border: none;
  color: #1f2937;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.btn-dl-head-icon:active {
  background: #f1f5f9;
}

.dl-banner-resmi {
  background: #f0fdf4;
  border-bottom: 1px solid #dcfce7;
  padding: 8px 14px;
  font-size: 11px;
  color: #166534;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dl-main-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 14px 14px;
  margin: 12px 14px 0 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.dl-product-showcase {
  display: flex;
  gap: 12px;
  position: relative;
}

.dl-product-gallery {
  width: 120px;
  height: 120px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  position: relative;
  flex-shrink: 0;
}

.dl-product-gallery img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.btn-dl-heart {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.dl-product-details {
  flex: 1;
  min-width: 0;
}

.dl-badge-lelang-aktif {
  background: #e8f8ee;
  color: #005c2b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
}

.dl-product-title {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 2px;
}

.dl-product-subtitle {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

.dl-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 6px 4px;
  border: 1px solid #f1f5f9;
}

.dl-spec-item {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1px;
}

.dl-spec-label {
  font-size: 9px;
  color: #6b7280;
}

.dl-spec-val {
  font-size: 10px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price & Stock section */
.dl-price-stock-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.dl-price-val {
  font-size: 15px;
  font-weight: 800;
  color: #005c2b;
  margin: 2px 0 2px 0;
}

.dl-normal-price-text {
  font-size: 10px;
  color: #6b7280;
}

.dl-badge-hemat {
  background: #e8f8ee;
  color: #005c2b;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 3px;
}

.dl-stock-val {
  font-size: 13px;
  font-weight: 800;
  color: #005c2b;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 2px 0;
}

.dl-stock-sub {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 5px;
}

.dl-stock-progress-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.dl-stock-progress-fill {
  height: 100%;
  background: #005c2b;
  border-radius: 4px;
}

/* Yellow Countdown & Period Card */
.dl-timer-period-card {
  background: #fffbeb;
  border: 1px solid #fef08a;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 14px 0 14px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
  align-items: center;
}

.dl-timer-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dl-timer-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
  flex-shrink: 0;
}

.dl-timer-digits-block {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  letter-spacing: 0.5px;
}

.dl-timer-sublabels {
  display: flex;
  gap: 12px;
  font-size: 9px;
  color: #6b7280;
}

.dl-period-col {
  border-left: 1px solid #fde047;
  padding-left: 10px;
}

.dl-period-label {
  font-size: 10px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.dl-period-val {
  font-size: 10.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
}

/* User Progress Stats Card (3 Columns) */
.dl-user-stats-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  margin: 12px 14px 0 14px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.dl-stats-col-1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-cart-circle-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8f8ee;
  color: #005c2b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dl-stats-label {
  font-size: 9.5px;
  color: #6b7280;
}

.dl-stats-val-green {
  font-size: 13px;
  font-weight: 800;
  color: #005c2b;
}

.dl-stats-val-dark {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
}

.dl-badge-rank-ribbon {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Leaderboard Ranking Table Card */
.dl-ranking-list-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 14px 14px;
  margin: 12px 14px 0 14px;
}

.dl-ranking-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.dl-ranking-header-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #111827;
}

.dl-ranking-sub-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: normal;
}

.dl-btn-see-all-ranks {
  background: none;
  border: none;
  color: #005c2b;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
}

.dl-ranking-rows-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  border-radius: 8px;
  background: #ffffff;
  font-size: 11.5px;
}

.dl-rank-row.is-user {
  background: #e8f8ee;
  border: 1px solid #bbf7d0;
  font-weight: 800;
  color: #005c2b;
}

.dl-rank-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-rank-num-icon {
  width: 18px;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
}

.dl-rank-store-name {
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}

.dl-rank-row.is-user .dl-rank-store-name {
  color: #005c2b;
}

.dl-rank-qty {
  font-weight: 800;
  color: #111827;
  font-size: 11.5px;
}

.dl-rank-row.is-user .dl-rank-qty {
  color: #005c2b;
}

.dl-ranking-last-update {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #6b7280;
}

.btn-refresh-ranks {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-refresh-ranks:hover {
  color: #005c2b;
}

.btn-refresh-ranks.rotating svg {
  animation: spin 0.6s linear infinite;
}

/* Syarat & Ketentuan Card */
.dl-tnc-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 14px 14px;
  margin: 12px 14px 0 14px;
}

.dl-tnc-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #4b5563;
  line-height: 1.4;
  margin-bottom: 8px;
}

.dl-tnc-item svg {
  flex-shrink: 0;
  color: #005c2b;
  margin-top: 2px;
}

.dl-btn-tnc-all {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  color: #005c2b;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  gap: 2px;
}

/* Bottom Floating Bar - Contained within frame */
.dl-bottom-action-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  z-index: 45;
  box-shadow: 0 -3px 14px rgba(0,0,0,0.07);
  box-sizing: border-box;
}

.dl-bar-saldo-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.dl-bar-saldo-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dl-bar-saldo-amount {
  font-size: 12px;
  font-weight: 800;
  color: #005c2b;
}

.btn-dl-ambil-action {
  background: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 92, 43, 0.25);
  transition: background 0.15s ease;
}

.btn-dl-ambil-action:active {
  background: #004d24;
  transform: scale(0.98);
}

.btn-dl-ambil-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
}

.btn-dl-ambil-sub {
  font-size: 9.5px;
  font-weight: 400;
  opacity: 0.85;
}

/* ===================================================
   8. KONFIRMASI PENGAMBILAN LELANG SCREEN
   =================================================== */
.konfirmasi-lelang-page {
  background-color: #f8fafc;
  min-height: 100%;
  padding-bottom: 110px;
  box-sizing: border-box;
  position: relative;
}

.kp-header {
  background: #ffffff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 30;
}

.kp-header-center {
  text-align: center;
  flex: 1;
}

.kp-header-title {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  line-height: 1.2;
}

.kp-header-sub {
  font-size: 10.5px;
  color: #6b7280;
  margin: 2px 0 0 0;
}

.kp-trust-banner {
  background: #f0fdf4;
  border-bottom: 1px solid #dcfce7;
  padding: 8px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.kp-trust-text h5 {
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  margin: 0 0 1px 0;
}

.kp-trust-text p {
  font-size: 10px;
  color: #15803d;
  margin: 0;
}

.kp-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 14px 14px;
  margin: 10px 14px 0 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.kp-prod-row {
  display: flex;
  gap: 12px;
}

.kp-prod-thumb {
  width: 100px;
  height: 100px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
}

.kp-prod-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kp-prod-info {
  flex: 1;
  min-width: 0;
}

.kp-stats-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #f1f5f9;
}

.kp-stat-item {
  display: flex;
  flex-direction: column;
}

.kp-stat-label {
  font-size: 9px;
  color: #6b7280;
}

.kp-stat-val {
  font-size: 11px;
  font-weight: 800;
  color: #111827;
}

.kp-stat-val.green {
  color: #005c2b;
}

.kp-stepper-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2px 4px;
  width: fit-content;
}

.btn-kp-step {
  width: 26px;
  height: 26px;
  border: none;
  background: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn-kp-step:active {
  background: #e2e8f0;
}

.kp-step-val {
  min-width: 44px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}

.kp-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #4b5563;
  margin-bottom: 8px;
}

.kp-calc-row.total-row {
  border-top: 1px dashed #cbd5e1;
  padding-top: 10px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.kp-calc-row.total-row .total-amount {
  font-size: 16px;
  font-weight: 800;
  color: #005c2b;
}

.kp-saldo-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  margin: 10px 14px 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-kp-topup {
  background: #ffffff;
  border: 1.5px solid #005c2b;
  color: #005c2b;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kp-bottom-fixed-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 10px 14px 6px 14px;
  z-index: 45;
  box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.kp-bottom-main-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  align-items: center;
}

.btn-kp-confirm-action {
  background: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 92, 43, 0.25);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-kp-confirm-action:active {
  background: #004d24;
  transform: scale(0.98);
}

.kp-bottom-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9.5px;
  color: #6b7280;
  margin-top: 6px;
}

/* ===================================================
   9. PENGAMBILAN BERHASIL (AUCTION SUCCESS RESULT) SCREEN
   =================================================== */
.sukses-lelang-page {
  background-color: #f8fafc;
  min-height: 100%;
  padding-bottom: 95px;
  box-sizing: border-box;
  position: relative;
}

.sl-header {
  background: #ffffff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 30;
}

.sl-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sl-btn-help {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #1f2937;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.sl-hero-banner {
  text-align: center;
  padding: 16px 14px 10px 14px;
  position: relative;
}

.sl-check-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #005c2b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
  box-shadow: 0 4px 12px rgba(0, 92, 43, 0.25);
}

.sl-hero-title {
  font-size: 18px;
  font-weight: 800;
  color: #005c2b;
  margin: 0 0 4px 0;
}

.sl-hero-subtitle {
  font-size: 11px;
  color: #4b5563;
  margin: 0;
  line-height: 1.35;
}

.sl-meta-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
  margin: 8px 14px 0 14px;
}

.sl-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

.sl-trust-pill {
  background: #f0fdf4;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #166534;
  font-weight: 600;
}

.sl-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  margin: 10px 14px 0 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.sl-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 14px 0 14px;
}

.sl-sub-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.sl-rank-highlight-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
}

.sl-timeline-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  position: relative;
}

.sl-timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

.sl-timeline-step::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: -10px;
  width: 2px;
  background: #e2e8f0;
}

.sl-timeline-step:last-child::before {
  display: none;
}

.sl-timeline-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 2;
}

.sl-timeline-icon.completed {
  background: #005c2b;
  color: #ffffff;
}

.sl-timeline-icon.active {
  background: #e8f8ee;
  color: #005c2b;
  border: 2px solid #005c2b;
}

.sl-timeline-content h6 {
  font-size: 11px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 1px 0;
}

.sl-timeline-content p {
  font-size: 9.5px;
  color: #6b7280;
  margin: 0;
  line-height: 1.25;
}

.sl-bottom-action-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  z-index: 45;
  box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.btn-sl-outline {
  background: #ffffff;
  color: #005c2b;
  border: 1.5px solid #005c2b;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btn-sl-outline:active {
  background: #f0fdf4;
}

.btn-sl-solid {
  background: #005c2b;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0, 92, 43, 0.25);
}

.btn-sl-solid:active {
  background: #004d24;
}

/* ============================================================
   ADDRESS MANAGEMENT (PILIH, EDIT, TAMBAH, DEFAULT STATUS)
============================================================ */
.address-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.address-card-item {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.address-card-item:hover {
  border-color: #94a3b8;
}

.address-card-item.selected {
  border-color: #005c2b;
  background: #f0fdf4;
}

.address-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.address-card-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.address-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

.address-card-radio {
  width: 18px;
  height: 18px;
  accent-color: #005c2b;
  cursor: pointer;
}

.address-card-text {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
  margin-bottom: 6px;
}

.address-card-phone {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.address-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.btn-addr-action {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-addr-edit {
  background: #f1f5f9;
  color: #334155;
}

.btn-addr-edit:hover {
  background: #e2e8f0;
}

.btn-addr-set-default {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.btn-addr-set-default:hover {
  background: #dcfce7;
}

.btn-addr-delete {
  background: #fef2f2;
  color: #dc2626;
}

.btn-add-new-address {
  width: 100%;
  background: #ffffff;
  border: 1.5px dashed #005c2b;
  color: #005c2b;
  padding: 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  transition: all 0.15s ease;
}

.btn-add-new-address:hover {
  background: #f0fdf4;
}

/* Address Form Styles */
.address-form-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 65vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.address-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.address-form-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
}

.address-form-input, .address-form-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #1e293b;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.address-form-input:focus, .address-form-textarea:focus {
  outline: none;
  border-color: #005c2b;
}

.address-form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.address-form-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #005c2b;
  cursor: pointer;
}

.address-form-checkbox-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.address-form-btns {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  margin-top: 10px;
}

/* OrTuLink CS Live Chat Styling */
.btn-chat-chip {
  white-space: nowrap;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-chat-chip:hover, .btn-chat-chip:active {
  background: #f0fdf4;
  border-color: #86efac;
  color: #005c2b;
}

.cs-chat-container #csChatMessagesStream::-webkit-scrollbar {
  width: 4px;
}
.cs-chat-container #csChatMessagesStream::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}