/* =============================================
   DONAOCOP — App CSS (custom styles for Tailwind)
   Only for things Tailwind can't handle
   ============================================= */

/* Scrollbar hide */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Bottom tab bar safe area */
.pb-tabs { padding-bottom: 72px; }
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pb-tabs { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Banner slider */
.banner-slides { display: flex; transition: transform 0.5s ease; }
.banner-slide { min-width: 100%; }

/* Countdown blocks */
.cd-block {
  background: #1a1a2e; color: white; font-weight: 700;
  min-width: 28px; text-align: center; padding: 2px 4px;
  border-radius: 4px; font-size: 14px;
}

/* Toast */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: #1f2937; color: white; padding: 12px 24px; border-radius: 24px;
  font-size: 13px; font-weight: 500; z-index: 9999; opacity: 0;
  transition: all 0.3s ease; white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: #059669; }

/* Product card image with real photo */
.product-img-real {
  width: 100%; height: 100%; object-fit: cover;
}
.product-img-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 48px;
}

/* Search dropdown */
.search-dropdown { display: none; }
.search-dropdown.show { display: block; }

/* Flash sale progress bar */
.sale-progress { background: rgba(255,255,255,0.3); height: 4px; border-radius: 2px; overflow: hidden; }
.sale-progress-fill { background: white; height: 100%; border-radius: 2px; }

/* Mobile bottom tabs */
.bottom-tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: white; border-top: 1px solid #e5e7eb;
  display: flex; justify-content: space-around; align-items: center;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
.bottom-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 8px; font-size: 10px; color: #6b7280;
  text-decoration: none; position: relative; transition: color 0.2s;
}
.bottom-tab.active { color: #14376b; }
.bottom-tab.active svg { stroke: #14376b; }
.bottom-tab-badge {
  position: absolute; top: -2px; right: 2px;
  background: #ef4444; color: white; font-size: 9px;
  font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 999px; display: flex; align-items: center;
  justify-content: center; padding: 0 3px;
}

/* Hide bottom tabs on desktop */
@media (min-width: 768px) {
  .bottom-tabs { display: none; }
  .pb-tabs { padding-bottom: 0; }
}

/* QR tab special style */
.bottom-tab-qr {
  background: linear-gradient(135deg, #2c63b3, #14376b);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: -20px; box-shadow: 0 4px 12px rgba(20,55,107,0.3);
}
.bottom-tab-qr svg { stroke: white; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeIn 0.3s ease forwards; }