/* =============================================
   TCGEx.io Custom Styles
   ============================================= */

/* Promo Bar */
.tcgex-promo-bar {
  background: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  font-size: 13px;
}

/* Logo */
.tcgex-logo-text {
  letter-spacing: -0.5px;
  font-size: 1.5rem;
}

/* Hero slider height */
.swiper-hero {
  min-height: 580px;
}
.swiper-hero .swiper-slide {
  min-height: 580px;
  background-size: cover;
  background-position: center;
}

/* Card items */
.tcgex-card-item .tcgex-card-img-wrap {
  transition: transform .2s ease;
}
.tcgex-card-item:hover .tcgex-card-img-wrap {
  transform: translateY(-4px);
}

/* Shop card */
.tcgex-shop-card {
  transition: box-shadow .2s ease, transform .2s ease;
}
.tcgex-shop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12) !important;
}

/* Rounded XL */
.rounded-xl {
  border-radius: 16px !important;
}

/* Active lang link */
.dropdown-item.active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* Footer */
footer a {
  color: rgba(255,255,255,.6);
  transition: color .2s;
}
footer a:hover {
  color: #fff;
}

/* Swiper overlay */
.bg-overlay-400::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.40);
}
.swiper-slide {
  position: relative;
}

/* Responsive hero text */
@media (max-width: 767px) {
  .fs-56 { font-size: 2rem !important; }
  .swiper-hero, .swiper-hero .swiper-slide { min-height: 420px; }
}

/* =============================================
   Toast notifications
   ============================================= */
.tcgex-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #333;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  z-index: 9999;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s;
  max-width: 320px;
}
.tcgex-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.tcgex-toast-success { background: #198754; }
.tcgex-toast-error   { background: #dc3545; }
.tcgex-toast-info    { background: #0dcaf0; color: #000; }
.tcgex-toast-warning { background: #fd7e14; }

/* =============================================
   List picker modal
   ============================================= */
.tcgex-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tcgex-modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
}
.tcgex-list-options .btn { text-align: left; }

/* =============================================
   Cards Page (Exchange / Trading)
   ============================================= */

/* Utility */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fs-11  { font-size: 11px; }
.fs-12  { font-size: 12px; }
.fs-13  { font-size: 13px; }
.fs-14  { font-size: 14px; }
.fs-16  { font-size: 16px; }
.fs-18  { font-size: 18px; }
.fs-22  { font-size: 22px; }
.ls-1   { letter-spacing: 0.5px; }

/* Filter sidebar */
.filter-sidebar .card { border-radius: 12px; border: 1px solid #ebebeb; }
.filter-chip {
  font-size: 12px !important;
  padding: 3px 10px 1px 10px !important;
  border-radius: 20px !important;
  transition: background-color .15s, color .15s, border-color .15s;
}
.filter-chip.active {
  background: var(--tcgex-accent, #0f3460) !important;
  color: #fff !important;
  border-color: var(--tcgex-accent, #0f3460) !important;
}

/* Card page tabs */
.tcgex-card-tabs .nav {
  gap: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tcgex-card-tabs .nav::-webkit-scrollbar { display: none; }
.tcgex-tab-link {
  color: #a0a8b4 !important;   /* all tabs grey by default */
  white-space: nowrap;
  font-size: 15px;
  padding: 10px 18px;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tcgex-tab-link i { font-size: 17px; line-height: 1; }
.tcgex-tab-link:hover:not(.active) { color: #6b7180 !important; }
.tcgex-tab-link.active {
  color: var(--tcgex-accent, #0f3460) !important;
  border-bottom-color: var(--tcgex-accent, #0f3460);
  font-weight: 600;
}

/* Listing cards */
.listing-card {
  border-radius: 10px;
  border: 1.5px solid #b8bcc4;
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
  color: #3a3f47;
}
.listing-card .text-muted { color: #6b7180 !important; }
.listing-card:hover {
  border-color: var(--tcgex-accent, #0f3460);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
}
.listing-card-wrap { transition: opacity .15s; }

/* Pro badge */
.badge-pro {
  background: linear-gradient(135deg, #f6c90e, #f09b00);
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Rarity tag */
.rarity-tag {
  background: #2a1f5e;
  color: #e8c44a;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: .5px;
}

/* Active filter pills */
.active-filter-pill {
  background: var(--tcgex-accent-soft, #f4effc);
  border: 1px solid var(--tcgex-accent, #0f3460);
  color: #333;
  font-weight: 500;
  font-size: 12px;
}
.active-filter-pill .btn-remove {
  color: var(--tcgex-accent, #0f3460);
  line-height: 1;
  font-size: 14px;
}

/* Stars */
.tcgex-stars { color: #f6c90e; }

/* Add Listing button */
.btn-add-listing {
  background-color: var(--tcgex-accent, #0f3460);
  border-color: var(--tcgex-accent, #0f3460);
  color: #fff;
  font-weight: 600;
  transition: filter .15s;
}
.btn-add-listing:hover, .btn-add-listing:focus {
  background: var(--tcgex-accent, #0f3460);
  border-color: var(--tcgex-accent, #0f3460);
  color: #fff !important;
  opacity: 0.82;
}

/* Add listing form nav pills accent */
#listing-form-tabs .nav-link.active {
  background-color: var(--tcgex-accent, #0f3460);
  color: #fff;
}
#listing-form-tabs .nav-link:not(.active):not(.disabled) {
  color: var(--tcgex-accent, #0f3460);
}

/* Price range slider */
input[type=range].form-range::-webkit-slider-thumb {
  background: var(--tcgex-accent, #0f3460);
}
input[type=range].form-range::-moz-range-thumb {
  background: var(--tcgex-accent, #0f3460);
  border: none;
}

/* ── Horizontal card scroll (mobile only) ──────────────────────────────── */
@media (max-width: 767.98px) {
  .tcgex-hscroll-outer {
    overflow-x: scroll; /* scroll (not auto) so iOS recognises it as scrollable before touch starts */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* stops scroll chaining to the page */
    touch-action: pan-x;            /* tells iOS this element owns horizontal swipe */
    scrollbar-width: none;
    /* bleed to screen edges */
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 6px;
  }
  .tcgex-hscroll-outer::-webkit-scrollbar { display: none; }

  /* !important needed — Bootstrap .row { flex-wrap: wrap } and .row > * { width:100%; max-width:100% }
     have equal or higher specificity and would otherwise override these rules */
  .tcgex-hscroll-outer .row { flex-wrap: nowrap !important; }

  /* 2.5 cards visible — featured (taller cards) */
  .tcgex-hscroll-item {
    flex: 0 0 40% !important;
    width: 40% !important;
    min-width: 40% !important;
    max-width: 40% !important;
  }

  /* 2.5 cards visible — popular (compact cards) */
  .tcgex-hscroll-item-sm {
    flex: 0 0 38% !important;
    width: 38% !important;
    min-width: 38% !important;
    max-width: 38% !important;
  }
}