/* ui-align.css — make Game Detail match Products page styling */

/* 1) Card/Sidebar containers: match .filters look */
.bg-dark_A-20,
.filters {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 1.25rem; /* same as .p-4 */
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}

/* Avoid double spacing if both classes exist */
.bg-dark_A-20.p-4,
.filters.p-4 { padding: 1.25rem !important; }

/* 2) Section headers: align with Products header */
.header h2,
.product_name {
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
  margin-bottom: .75rem;
}

/* 3) Tabs: make Game Detail tabs look like spotlight tabs */
.nav-tabs-minimal .nav-link,
.spotlight-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: #9aa7b2;            /* muted */
  padding: .5rem 1rem;
}
.nav-tabs-minimal .nav-link.active,
.nav-tabs-minimal .nav-link:hover,
.spotlight-tabs .nav-link.active,
.spotlight-tabs .nav-link:hover {
  color: #e9eef3;
  border-color: #f7b500;     /* warning accent */
  background: transparent;
}

/* Optional: add ">" between tab items like on Products */
.nav-tabs-minimal .nav-item + .nav-item,
.spotlight-tabs .nav-item + .nav-item { position: relative; }
.nav-tabs-minimal .nav-item + .nav-item::before,
.spotlight-tabs .nav-item + .nav-item::before {
  content: ">";
  position: absolute; left: -.5rem; top: 50%; transform: translateY(-50%);
  color: #9aa7b2; font-weight: 600; opacity: .8;
}

/* 4) Breadcrumbs: unify to literal ">" */
.breadcrumb,
.breadcrumb-product { background: transparent; padding: 0; margin-bottom: .5rem; }
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: #9aa7b2;
  padding: 0 .55rem;
  font-weight: 600;
  opacity: .9;
}

/* 5) Price / discount / status blocks: spacing & weight */
.price-wrapper { margin-bottom: 1rem; }
.price { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.price-prev { color: #9aa7b2; text-decoration: line-through; font-weight: 500; }
.price-current { font-size: 1.4rem; font-weight: 700; }
.discount { color: #f7b500; font-weight: 600; margin-top: .25rem; }

/* Buttons to match overall polish */
.btn { border-radius: 10px; }
.btn-warning { box-shadow: 0 6px 14px rgba(247,181,0,.25); }
.btn-primary { box-shadow: 0 6px 14px rgba(74,163,255,.25); }
.btn-danger  { box-shadow: 0 6px 14px rgba(231,76,60,.25); }

/* 6) Sidebar lists & “Game Information” pills */
.bg-dark_A-20 .list-unstyled,
.filters .list-unstyled { margin: 0 0 1rem; }
.bg-dark_A-20 .list-unstyled li,
.filters .list-unstyled li { margin-bottom: .5rem; }

.platform, .developer { color: #9aa7b2; font-weight: 600; min-width: 96px; display: inline-block; }
.platform-item, .developer-item { margin-left: .5rem; white-space: nowrap; }
.platform-item i { margin-right: .35rem; }

/* 7) Read-more toggle (no JS change) */
.readmore-btn {
  display: inline-block;
  margin-top: .5rem;
  font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em;
  color: #f7b500;
}
.readmore-btn.collapsed::after { content: " Read more"; }
.readmore-btn[aria-expanded="true"]::after { content: " Show less"; }

/* 8) Pagination look (Products page parity) */
.pagination .page-link {
  background: transparent; border: 1px solid rgba(255,255,255,.15);
  color: #e9eef3;
}
.pagination .page-item.active .page-link {
  border-color: #f7b500; color: #f7b500;
}

/* 9) Small robustness tweaks */
img { max-width: 100%; height: auto; border-radius: 12px; }
.quantity-group .form-control { min-width: 110px; text-align: center; }
.overlay img { width: 120%; opacity: .15; pointer-events: none; }