/* ─────────────────────────────────────────
   LockShop – custom styles
   ───────────────────────────────────────── */

/* Product card thumbnail */
.product-thumb {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #f8f9fa;
  padding: 8px;
}
.product-thumb-placeholder {
  height: 220px;
}
.product-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}

/* ─── Belt difficulty badges ─────────────── */
.belt-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.belt-white    { background: #f8f9fa; color: #212529; border: 1px solid #dee2e6; }
.belt-yellow   { background: #ffc107; color: #212529; }
.belt-orange   { background: #fd7e14; color: #fff; }
.belt-green    { background: #198754; color: #fff; }
.belt-blue     { background: #0d6efd; color: #fff; }
.belt-purple   { background: #6f42c1; color: #fff; }
.belt-brown    { background: #795548; color: #fff; }
.belt-red      { background: #dc3545; color: #fff; }
.belt-black    { background: #212529; color: #fff; }

/* ─── Order status badges ────────────────── */
/* Pale red: wants attention, but isn't an error -- cancelled keeps the
   strong red so the two don't read as the same severity. */
.status-pending    { background: #f8d7da; color: #842029; }
.status-confirmed  { background: #0d6efd; color: #fff; }
.status-processing { background: #0dcaf0; color: #212529; }
.status-delayed    { background: #b8860b; color: #fff; }
.status-shipped    { background: #fd7e14; color: #fff; }
.status-delivered  { background: #198754; color: #fff; }
.status-cancelled  { background: #dc3545; color: #fff; }

/* Apply badge styling to status spans */
[class^="status-"] {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600;
}

/* ─── Misc ───────────────────────────────── */
.font-monospace { font-family: var(--bs-font-monospace); }

/* Tighten admin tables */
.table td, .table th { vertical-align: middle; }

/* Footer clearance */
body { padding-bottom: 40px; }

/* ─── Dashboard country-chart carousel dots ────────────── */
.country-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ced4da;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.country-dot:hover   { background: #adb5bd; }
.country-dot.active  { background: #2e4057; transform: scale(1.25); }

/* ── Storefront showcase board ───────────────────────────────────────────── */
/* Sits under the filters, so everything here is tuned for a narrow column. */
.showcase .card-header { font-size: .9rem; }
.showcase-slide { min-height: 176px; }

.rank-row { margin-bottom: .5rem; }
.rank-row:last-child { margin-bottom: 0; }
.rank-name {
  font-size: .78rem;
  font-weight: 600;
  color: #343a40;
  margin-bottom: .15rem;
}
.rank-num {
  display: inline-block;
  width: 1.1rem;
  color: #adb5bd;
  font-weight: 700;
}
.rank-track {
  background: #f1f3f5;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.rank-bar {
  height: 100%;
  border-radius: 999px;
  min-width: 6px;
  transition: width .4s ease;
}
/* One family, keyed to the shop's amber accent. Intensity falls down the
   ranking so the top seller still reads loudest without five clashing hues. */
.rank-c1 { background: linear-gradient(90deg, #d9480f, #f59f00); }
.rank-c2 { background: linear-gradient(90deg, #e8590c, #fab005); }
.rank-c3 { background: linear-gradient(90deg, #f76707, #fcc419); }
.rank-c4 { background: linear-gradient(90deg, #ff922b, #ffd43b); }
.rank-c5 { background: linear-gradient(90deg, #ffa94d, #ffe066); }

.new-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .3rem;
  border-radius: 6px;
  color: inherit;
}
.new-row:hover { background: #f8f9fa; }
/* Text only -- thumbnails this small read as noise rather than product shots. */
.new-meta { min-width: 0; }
.new-name { font-size: .82rem; font-weight: 600; color: #343a40; }
.new-sub  { font-size: .72rem; color: #6c757d; }

.belt-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: .2rem;
  vertical-align: baseline;
  border: 1px solid rgba(0,0,0,.15);
}
.belt-white  { background: #f8f9fa; }
.belt-yellow { background: #ffd43b; }
.belt-orange { background: #fd7e14; }
.belt-green  { background: #37b24d; }
.belt-blue   { background: #1c7ed6; }
.belt-purple { background: #9c36b5; }
.belt-brown  { background: #a1690a; }
.belt-red    { background: #e03131; }
.belt-black  { background: #212529; }

/* ─── Yagias branding (approved 2026-08-25) ────────────────────── */
/* Bar: warm black, gold hairline, brand image, caps links.        */
.navbar.bg-dark, .navbar[class*="bg-"] { border-bottom: 2px solid #E8A317; }
.navbar-brand img { display: block; }
.navbar .nav-link {
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; font-weight: 600;
}
/* Joined EUR/USD segmented control (markup unchanged, just style). */
.seg-cur .btn { border-radius: 0; }
.seg-cur .btn:first-child { border-radius: 6px 0 0 6px; }
.seg-cur .btn:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }

/* Warm paper background site-wide (was cool grey). */
body { background: #f6f4ef; }

/* Product cards: hairline border, soft depth, badges on the photo. */
.product-card { border: 1px solid #e7e2d9;
  box-shadow: 0 1px 2px rgba(30,25,15,.05), 0 10px 28px rgba(30,25,15,.05) !important; }
.im-chip {
  position: absolute; left: 10px; top: 10px;
  background: rgba(23,19,14,.82); color: #f2ede4;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 99px; text-transform: uppercase;
}
.im-chip-g { left: auto; right: 10px; background: rgba(22,110,60,.9); }
.im-belt { position: absolute; right: 10px; bottom: 10px; }
/* Navbar person icon reads too small next to the new brand — scale it up. */
.navbar .bi-person-circle { font-size: 1.35rem; vertical-align: -0.22em; }
/* Sidebar aligns with the product cards' top edge, not the view-toggle row
   above them (measured 47px). Only when the columns sit side by side. */
@media (min-width: 992px) {
  .shop-side { margin-top: 63px; }
}