/* ===========================
   GLOBAL DARK THEME (no light)
   =========================== */
:root{
  --bg: #0b0f15;
  --card: #0e1117;
  --card-border: rgba(255,255,255,0.06);
  --text: #ffffff;
  --muted: rgba(255,255,255,0.65);
  --desc: rgba(255,255,255,0.88);
  --shadow: 0 8px 28px rgba(0,0,0,.25);
  --shadow-hover: 0 18px 44px rgba(0,0,0,.35);
  --radius: 16px;

  /* Bootstrap-ish overrides */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--card-border);
  --bs-card-bg: var(--card);
  --bs-card-color: var(--text);
}

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  accent-color: #0ea5e9; /* focus color */
}

/* Prevent white flash on load in some browsers */
@media (prefers-reduced-motion:no-preference){
  html{ color-scheme: dark; }
}

/* Basic layout text */
#wallet{
  font-weight: 600;
  letter-spacing: .2px;
}

/* Alerts (used for status toasts) */
.alert{
  background: #0f1320;
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

/* ===========================
   PRODUCT GRID + CARDS (DARK)
   =========================== */
#products.row{ row-gap: 1.25rem; }

.product-card-long,
.card.product-card-long{
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--card-border);
  min-height: 520px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card-long:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* Bigger image area, safe crop */
.product-img-tall{
  height: 260px;
  width: 100%;
  object-fit: cover;
  transition: transform .35s ease;
  border-bottom: 1px solid var(--card-border);
}
.product-card-long:hover .product-img-tall{ transform: scale(1.04); }

/* Card internals */
.product-card-long .card-title{ color: var(--text); margin-bottom: .35rem; }
.product-card-long .card-body{
  min-height: 170px;
  background: rgba(255,255,255,0.02);
}
.product-desc{
  color: var(--desc);
  line-height: 1.4;
  font-size: .95rem;
  margin-bottom: .25rem;
}
.text-muted, .card-text.text-muted{ color: var(--muted) !important; }

/* Buttons */
.product-card-long .btn{
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .1px;
}
.product-card-long .btn.btn-primary{
  box-shadow: 0 6px 18px rgba(13,110,253,.35);
}
.product-card-long .btn.btn-primary:hover{
  transform: translateY(-1px);
}
.product-card-long .btn.btn-success{
  box-shadow: 0 6px 18px rgba(25,135,84,.35);
}
.product-card-long .btn.btn-success:hover{
  transform: translateY(-1px);
}
.product-card-long .btn-pay,
.product-card-long .download-btn{
  padding-top: .95rem !important;
  padding-bottom: .95rem !important;
  font-size: 1rem;
}
.product-card-long .card-footer{
  background: transparent;
  border: 0;
}

/* Links in cards */
.card a{
  color: #cfe6ff;
  text-decoration: none;
}
.card a:hover{ text-decoration: underline; }

/* ===========================
   PURCHASE DROPDOWN (DARK)
   =========================== */
#purchaseDropdown{ display: none; }
#purchase-history .list-group-item{
  background: var(--card);
  color: var(--text);
  border-color: var(--card-border);
}

/* ===========================
   MOBILE METAMASK TIP (DARK)
   =========================== */
#mm-mobile-wrap{ display: none; margin-top: .5rem; }
#mm-mobile-tip{
  background: #0f1320;
  color: var(--text);
  border: 1px solid var(--card-border);
  margin-bottom: .5rem;
}

/* ===========================
   BOOTSTRAP DARK OVERRIDES
   =========================== */
.card{ background: var(--card); color: var(--text); border-color: var(--card-border); }
.list-group-item{ background: var(--card); color: var(--text); border-color: var(--card-border); }
.dropdown-menu{ background: #0f1320; color: var(--text); border-color: var(--card-border); }
.dropdown-item{ color: var(--text); }
.dropdown-item:hover{ background: #141a28; color: var(--text); }
.modal-content{ background: var(--card); color: var(--text); border-color: var(--card-border); }
.form-control, .form-select{
  background: #0f1320; color: var(--text); border-color: var(--card-border);
}
.form-control::placeholder{ color: rgba(255,255,255,.55); }
.input-group-text{ background:#0f1320; color:var(--text); border-color:var(--card-border); }
.navbar, .offcanvas, .navbar-nav .nav-link{
  background: var(--bg); color: var(--text);
}
hr{ border-color: var(--card-border); }

/* Utility */
.shadow-sm{ box-shadow: var(--shadow) !important; }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 991px){
  .product-card-long{ min-height: 500px; }
  .product-img-tall{ height: 240px; }
}
@media (max-width: 575px){
  .product-card-long{ min-height: 480px; }
  .product-img-tall{ height: 220px; }
  .product-card-long .btn-pay,
  .product-card-long .download-btn{ font-size: .95rem; }
}