/* ====================================================
   GameTrader.SG — Modern Blue Theme
   Brand palette derived from logo (#1E88E5 + #FF6B35)
   Applies on top of existing Bootstrap to gradually
   modernize all pages site-wide.
   ==================================================== */

:root {
  --gt-primary: #1E88E5;
  --gt-primary-dark: #1565C0;
  --gt-primary-light: #64B5F6;
  --gt-accent: #FF6B35;
  --gt-accent-dark: #E55A2B;
  --gt-bg: #FFFFFF;
  --gt-bg-soft: #F0F7FF;
  --gt-fg: #0A1929;
  --gt-fg-soft: #475569;
  --gt-muted: #E3F2FD;
  --gt-border: #D6E5F5;
  --gt-success: #10B981;
  --gt-danger: #EF4444;
  --gt-radius: 10px;
  --gt-radius-lg: 16px;
  --gt-shadow-sm: 0 1px 3px rgba(10, 25, 41, 0.06);
  --gt-shadow: 0 4px 12px rgba(10, 25, 41, 0.08);
  --gt-shadow-lg: 0 10px 30px rgba(30, 136, 229, 0.15);
}

html[data-theme="dark"] {
  --gt-bg: #0A1929;
  --gt-bg-soft: #132F4C;
  --gt-fg: #E3F2FD;
  --gt-fg-soft: #B0BEC5;
  --gt-muted: #132F4C;
  --gt-border: #1E4976;
}

/* ===== Base typography (matches mockup) ===== */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { overflow-x: hidden; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--gt-bg);
  color: var(--gt-fg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Override Bootstrap fixed-top navbar so new header takes over */
.navbar.navbar-default.navbar-fixed-top { display: none !important; }

/* Add top padding so content doesn't hide behind new sticky header */
body { padding-top: 0 !important; }
#wrapper { padding-top: 0; }

/* ============================================================
   Bootstrap vs Tailwind responsive utility fixes
   Bootstrap 3 ships .hidden { display:none !important }
   which prevents Tailwind sm:/md:/lg: responsive utilities
   from re-showing content. Re-establish Tailwind precedence.
   ============================================================ */
@media (min-width: 640px) {
  .sm\:flex        { display: flex        !important; }
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:block       { display: block       !important; }
  .sm\:inline      { display: inline      !important; }
  .sm\:inline-block{ display: inline-block!important; }
  .sm\:grid        { display: grid        !important; }
  .sm\:hidden      { display: none        !important; }
}
@media (min-width: 768px) {
  .md\:flex        { display: flex        !important; }
  .md\:inline-flex { display: inline-flex !important; }
  .md\:block       { display: block       !important; }
  .md\:inline      { display: inline      !important; }
  .md\:inline-block{ display: inline-block!important; }
  .md\:grid        { display: grid        !important; }
  .md\:hidden      { display: none        !important; }
}
@media (min-width: 1024px) {
  .lg\:flex        { display: flex        !important; }
  .lg\:inline-flex { display: inline-flex !important; }
  .lg\:block       { display: block       !important; }
  .lg\:inline      { display: inline      !important; }
  .lg\:inline-block{ display: inline-block!important; }
  .lg\:grid        { display: grid        !important; }
  .lg\:hidden      { display: none        !important; }
  .lg\:col-span-1  { grid-column: span 1 / span 1 !important; }
  .lg\:col-span-2  { grid-column: span 2 / span 2 !important; }
  .lg\:col-span-3  { grid-column: span 3 / span 3 !important; }
  .lg\:col-span-5  { grid-column: span 5 / span 5 !important; }
  .lg\:col-span-7  { grid-column: span 7 / span 7 !important; }
}
@media (min-width: 1280px) {
  .xl\:flex        { display: flex        !important; }
  .xl\:block       { display: block       !important; }
  .xl\:grid        { display: grid        !important; }
  .xl\:hidden      { display: none        !important; }
}

/* Bootstrap legacy: when these classes appear together with Tailwind
   utilities, the Tailwind responsive variants above win. */

/* ===== Buttons (Bootstrap override for brand) ===== */
.btn-primary,
.btn-default.btn-primary {
  background-color: var(--gt-primary);
  border-color: var(--gt-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--gt-primary-dark);
  border-color: var(--gt-primary-dark);
}

/* ===== Brand link colors ===== */
a { color: var(--gt-primary); }
a:hover, a:focus { color: var(--gt-primary-dark); }

/* ===== Headers / panels brand color ===== */
.header-bg {
  background-color: var(--gt-muted) !important;
  border-left: 3px solid var(--gt-primary);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.header-bg h4 { color: var(--gt-fg); margin: 0; font-weight: 700; }

/* ===== Min touch target safety (UI/UX Pro Max) ===== */
.gt-btn, .gt-touch { min-height: 44px; min-width: 44px; }

/* ===== Focus rings (a11y) ===== */
.gt-focus:focus-visible,
button.gt-touch:focus-visible,
a.gt-touch:focus-visible {
  outline: 2px solid var(--gt-primary);
  outline-offset: 2px;
}

/* ===== Card hover (consistent across new components) ===== */
.gt-card {
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
}
.gt-card:hover { transform: translateY(-4px); box-shadow: var(--gt-shadow-lg); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== Hide scrollbars on chip rails ===== */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; -ms-overflow-style: none; }

/* ===== Old header navbar replacement spacing ===== */
.gt-nav-spacer { height: 64px; }

/* ===== Brand utility classes ===== */
.gt-text-primary { color: var(--gt-primary) !important; }
.gt-text-accent  { color: var(--gt-accent)  !important; }
.gt-bg-primary   { background-color: var(--gt-primary) !important; color: #fff; }
.gt-bg-accent    { background-color: var(--gt-accent)  !important; color: #fff; }
.gt-bg-soft      { background-color: var(--gt-bg-soft) !important; }
.gt-border       { border-color: var(--gt-border)      !important; }

/* ===== Style upgrades for Bootstrap-based old pages ===== */
.panel { border-radius: var(--gt-radius); border-color: var(--gt-border); }
.panel-heading { background-color: var(--gt-bg-soft); border-color: var(--gt-border); }
.well { border-radius: var(--gt-radius); background-color: var(--gt-bg-soft); border-color: var(--gt-border); }
.alert { border-radius: var(--gt-radius); }
.form-control { border-radius: 8px; border-color: var(--gt-border); }
.form-control:focus { border-color: var(--gt-primary); box-shadow: 0 0 0 3px rgba(30,136,229,0.15); }
.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.input-group .form-control:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.dropdown-menu { border-radius: var(--gt-radius); box-shadow: var(--gt-shadow); border-color: var(--gt-border); }

/* ===== Footer brand styling ===== */
footer { background-color: var(--gt-bg-soft); border-top: 1px solid var(--gt-border); }


/* ============================================================
   UX POLISH PASS (per UI/UX Pro Max checklist)
   ============================================================ */

/* A1: Visible focus ring globally (Bootstrap removes default outlines).
   Apply to every interactive element so keyboard users always see focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gt-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A2: Disabled state — clearly non-interactive (Bootstrap default is too subtle). */
button[disabled], a[disabled], input[disabled], select[disabled], textarea[disabled],
button.disabled, a.disabled, .btn.disabled, .btn[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* A3: Smooth scroll for in-page anchors (Q&A View More, nav anchors). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* A4: Image polish — broken-image fallback, lazy fade-in. */
img { max-width: 100%; height: auto; }
img.box-art-rect,
img.box-art,
img.box-art-big,
img.box-art-medium,
img.refresh-gallery-img,
img.news-image {
  background-color: var(--gt-muted);
  background-image: linear-gradient(135deg, #E3F2FD 25%, #F0F7FF 25%, #F0F7FF 50%, #E3F2FD 50%, #E3F2FD 75%, #F0F7FF 75%);
  background-size: 20px 20px;
  object-fit: cover;
}
/* (img pseudo-elements don't apply to replaced elements - removed.
   Broken-image polish handled by the muted background-color above) */

/* A5: Avatar fallback — show subtle bg when avatar img fails */
.avatar_img_mini, .avatar_img_normal, .avatar_img_nav {
  background-color: var(--gt-muted);
  background-image: linear-gradient(135deg, var(--gt-primary-light), var(--gt-primary));
  object-fit: cover;
}

/* A6: Link hover transition (better feel) */
a { transition: color 150ms ease; }

/* A7: Button base feel — gentle press feedback */
button, .btn, [role="button"] { transition: background-color 150ms ease, transform 100ms ease, box-shadow 150ms ease; }
button:active:not([disabled]), .btn:active:not([disabled]) { transform: scale(0.97); }

/* A8: Selection color = brand */
::selection { background: var(--gt-primary); color: #fff; }

/* A9: Tap highlight on iOS = brand */
* { -webkit-tap-highlight-color: rgba(30,136,229,0.15); }

/* A10: (Removed — was clobbering Tailwind nav padding inside header) */

/* A11: Form input — increase mobile font to 16px to prevent iOS auto-zoom on focus. */
@media (max-width: 767px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* A12: Card hover — uniform feel across all .gt-card and grid cards */
.gt-card, .card-tilt {
  will-change: transform;
}

/* A13: Loading skeleton helper class */
.gt-skeleton {
  background: linear-gradient(90deg, var(--gt-muted) 25%, var(--gt-bg-soft) 50%, var(--gt-muted) 75%);
  background-size: 200% 100%;
  animation: gt-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--gt-radius);
}
@keyframes gt-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* A14: Improved alert visibility — make alerts feel intentional */
.alert {
  border-width: 1px;
  font-weight: 500;
  padding: 12px 16px;
}
.alert-info    { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.alert-success { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
.alert-warning { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.alert-danger  { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }

/* A15: Sticky header drop shadow on scroll (subtle elevation cue) */
header.sticky { box-shadow: var(--gt-shadow-sm); }

/* A16: Spacing rhythm — section vertical rhythm tokens */
.gt-section-y { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 768px) { .gt-section-y { padding-top: 3rem; padding-bottom: 3rem; } }

/* A17: Inline icons — vertical alignment fix (Bootstrap icons sometimes mis-align) */
.fa, .fa-solid, .fa-regular, .fa-brands { vertical-align: -0.05em; }

/* A18: Mobile chip rail momentum scroll */
.scroll-hide, .scroll-fade { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.scroll-hide > *, .scroll-fade > * { scroll-snap-align: start; }


/* ============================================================
   Typeahead (jquery typeahead.js / Bloodhound) styling
   Used by the homepage and listings page search inputs.
   Bootstrap form-control is muted, so we re-style the popup.
   ============================================================ */
/* Typeahead wrapper: forced to fill the parent flex cell with flex layout
   so the input can be vertically centered. */
.twitter-typeahead {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
}
/* Both the real input (.tt-input) and the ghost hint input (.tt-hint)
   need to be stripped of every Bootstrap form-control assumption and
   sized to fill the parent so their browser-default text vertical
   centering works. */
.twitter-typeahead .tt-input,
.twitter-typeahead .tt-hint {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;  /* override typeahead's inline vertical-align: top */
  box-sizing: border-box !important;
}
/* The hint input is positioned absolutely by typeahead — force it to
   span the full parent so its text aligns with the real input. */
.twitter-typeahead .tt-hint {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
@media (min-width: 640px) {
  .twitter-typeahead .tt-input,
  .twitter-typeahead .tt-hint {
    padding: 0 1.25rem !important;
  }
}
.tt-menu {
  width: 100%;
  margin-top: 6px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
}
.tt-suggestion {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--gt-fg);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
  background-color: var(--gt-muted);
  color: var(--gt-primary);
}
.tt-suggestion strong, .tt-suggestion .tt-highlight {
  color: var(--gt-primary);
  font-weight: 700;
}
.tt-hint { color: var(--gt-fg-soft); }
.tt-dataset { font-size: 14px; }

/* Search input field — kill Bootstrap form-control borders inside our flex bar */
#search_form .form-control,
#search-input-div .form-control,
#search_form input.tt-input,
#search_form input.tt-hint {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  height: 100% !important;
  padding: 0 1rem !important;
  line-height: 1.4 !important;
  font-size: 1rem !important;
}
@media (min-width: 640px) {
  #search_form .form-control,
  #search-input-div .form-control,
  #search_form input.tt-input,
  #search_form input.tt-hint {
    padding: 0 1.25rem !important;
  }
}
/* The typeahead-wrapped span needs to fill the flex cell so the input
   doesn't collapse vertically. */
#search-input-div .twitter-typeahead { height: 100%; }


/* ============================================================
   UX POLISH ROUND 2 (from audit)
   ============================================================ */

/* B1: Sticky header scroll shadow (JS toggles .gt-scrolled on header) */
header.sticky.gt-scrolled {
  box-shadow: 0 4px 16px rgba(10, 25, 41, 0.08);
}

/* B2: Profile tab focus ring (Bootstrap nav-tabs stripped focus styles) */
.border-b-2:focus-visible {
  outline: 2px solid var(--gt-primary);
  outline-offset: -2px;
  border-radius: 4px;
}

/* B3: Touch target enforcement — gt-touch must be at least 44x44 */
.gt-touch {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* B4: Icon-only round buttons (game_pg like/report etc) — bump to 44px */
button.w-10.h-10:not(.dot),
a.w-10.h-10:not(.dot) {
  min-width: 44px;
  min-height: 44px;
}

/* B5: Filter sidebar select consistency — match button height */
#refine select.form-control,
#refine .form-control {
  height: 42px;
  font-size: 14px;
}

/* B6: Card title height consistency — clamp + min-height for visual rhythm */
.line-clamp-2 { min-height: 2.6em; }

/* B7: Footer mobile gap shrink so columns don't feel cramped */
footer .grid { row-gap: 1.5rem; }
@media (min-width: 640px) {
  footer .grid { row-gap: 2rem; column-gap: 1.5rem; }
}

/* B8: Form group vertical rhythm normalization */
form .space-y-4 > * + *,
form .space-y-5 > * + * { margin-top: 1.25rem; }
form label + input,
form label + select,
form label + textarea,
form label + .relative,
form label + .flex {
  margin-top: 0.375rem;
}

/* B9: Placeholder color (slate-400 was too light against white inputs) */
::placeholder { color: var(--gt-fg-soft); opacity: 0.7; }
::-webkit-input-placeholder { color: var(--gt-fg-soft); opacity: 0.7; }

/* B10: Heading inside flex containers — prevent descender-induced misalign */
h1, h2, h3, h4 { line-height: 1.25; }
h1 i, h2 i, h3 i, h4 i { vertical-align: baseline; line-height: inherit; }

/* B11: Icon inside button — align baselines (uses flex when possible) */
button i, a i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* B12: Inputs of all kinds — consistent 42px standard height for cohesion
   (unless overridden by explicit h-N utility) */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.tt-input):not(.tt-hint),
select,
textarea {
  min-height: 42px;
}

/* B13: Sticky top header z-index above any below content */
header.sticky { z-index: 50; }


/* ============================================================
   UX POLISH ROUND 3 (page-deep audit)
   ============================================================ */

/* C1: Button row inside cards — equal heights when wrapped in flex/grid.
   Forces every button + anchor styled as a button to be 44px tall (min)
   inside common card containers so heights match in a row. */
.gt-card-actions button, .gt-card-actions a,
.action-row button, .action-row a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* C2: Pagination — prevent layout-shift on active page (font-weight bump
   reflows width). Use fixed weight with letter-spacing trick. */
.pagination a, .pagination span,
nav[aria-label="pagination"] a, nav[aria-label="pagination"] span,
ul.pagination > li > a {
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* C3: Status badge stability — fixed min-width so longer/shorter
   status text doesn't shift adjacent elements. */
.badge.available, .badge.Available,
.badge.sold,      .badge.Sold,
.badge.pending,   .badge.Pending,
.badge.reserved,  .badge.Reserved {
  min-width: 76px;
  text-align: center;
  padding: 4px 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* C4: Avatar / circular images — always object-cover, never stretch. */
img.avatar_img_mini,
img.avatar_img_normal,
img.avatar_img_nav,
img[class*="rounded-full"] {
  object-fit: cover;
  object-position: center;
}

/* C5: Chat & inbox row hover — fluid, no shift */
.tr-chat-inbox { cursor: pointer; transition: background-color 120ms ease; }

/* C6: Message bubble — consistent vertical rhythm; max-w should never
   collapse below a sensible minimum so timestamp doesn't wrap weirdly. */
.chat-source > div, .chat-target > div { min-width: 110px; }

/* C7: Disabled-looking input (e.g. email/username locked on edit_profile) */
input[disabled], select[disabled], textarea[disabled] {
  background-color: var(--gt-bg-soft) !important;
  color: var(--gt-fg-soft) !important;
  opacity: 1 !important; /* preserve readable contrast */
  cursor: not-allowed !important;
}

/* C8: Error state for inputs — red border + red focus ring (not brand)  */
input.field_with_errors,
select.field_with_errors,
textarea.field_with_errors,
.field_with_errors > input,
.field_with_errors > select,
.field_with_errors > textarea,
.has-error .form-control,
.has-error input,
.has-error select,
.has-error textarea {
  border-color: #EF4444 !important;
}
input.field_with_errors:focus,
.field_with_errors > input:focus,
.has-error input:focus,
.has-error select:focus,
.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
  border-color: #EF4444 !important;
}

/* C9: Checkbox alignment in forms — make the checkbox center-aligned
   with its label text on common form patterns. */
label.flex.items-center > input[type="checkbox"],
label.flex.items-center > input[type="radio"] {
  flex-shrink: 0;
  margin: 0;
}

/* C10: Action button column on profile page — uniform pill heights even
   when content varies. */
.profile-actions a, .profile-actions button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
}

/* C11: Empty state styling — minimum vertical breathing room. */
.gt-empty,
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--gt-fg-soft);
}
.gt-empty i, .empty-state i {
  font-size: 2.5rem;
  color: var(--gt-border);
  margin-bottom: 0.75rem;
  display: block;
}

/* C12: Stat badge — uniform sizing across breakpoints */
.gt-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--gt-radius);
  min-height: 40px;
}
@media (min-width: 640px) {
  .gt-stat-badge { padding: 0.625rem 1rem; min-height: 44px; }
}

/* C13: Mobile horizontal scroll guard — prevent oversized fixed-width
   children from overflowing the viewport. */
@media (max-width: 480px) {
  .w-32 { width: 7rem; }
  .w-36 { width: 8rem; }
  .w-48 { width: 10rem; }
}

/* C14: Card grid uniform height pattern — when grid items are <article>
   or .gt-card, normalize internal flex so footer (price/CTA) sits at bottom. */
.gt-card { display: flex; flex-direction: column; }
.gt-card > .p-3, .gt-card > .p-4 { flex: 1 1 auto; display: flex; flex-direction: column; }

/* C15: Sticky-header offset for in-page anchors (Q&A jump etc) so the
   target isn't hidden behind the sticky header. */
[id]:not(html) { scroll-margin-top: 80px; }


/* ============================================================
   PAGE-SPECIFIC OVERRIDES — game_pg.php (single game detail)
   ============================================================ */
.main-content { padding-top: 24px; padding-bottom: 48px; }
.main-content .container { max-width: 1200px; }

#col-left .well, #col-right .well {
  background: #fff;
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-lg);
  box-shadow: var(--gt-shadow-sm);
  padding: 24px;
}

.platform-banner {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--gt-primary);
  margin-bottom: 12px;
}
.platform-banner.bg-color-ps5,
.platform-banner.bg-color-ps4,
.platform-banner.bg-color-ps3,
.platform-banner.bg-color-ps_vita { background: #003791; }
.platform-banner.bg-color-xbox_series,
.platform-banner.bg-color-xbox_one,
.platform-banner.bg-color-xbox_360 { background: #107C10; }
.platform-banner.bg-color-nintendo_switch,
.platform-banner.bg-color-switch_2,
.platform-banner.bg-color-3ds,
.platform-banner.bg-color-ds,
.platform-banner.bg-color-wii,
.platform-banner.bg-color-wii_u { background: #E60012; }

#post-img-and-details-row h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gt-fg);
  letter-spacing: -0.02em;
  margin: 4px 0 12px;
  line-height: 1.2;
}

.price {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--gt-primary);
  letter-spacing: -0.02em;
  margin: 12px 0 4px;
}

.box-art-big-wrapper {
  background: var(--gt-bg-soft);
  border-radius: var(--gt-radius-lg);
  overflow: hidden;
  padding: 12px;
}
.box-art-medium, .box-art-big {
  width: 100%;
  height: auto;
  border-radius: var(--gt-radius);
}

.gt-table-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--gt-border);
}
.gt-table-row:last-child { border-bottom: none; }
.gt-table-row > .col-md-12 > span:first-child {
  display: inline-block;
  width: 90px;
  font-size: 13px;
  color: var(--gt-fg-soft);
  font-weight: 500;
}

.badge {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.badge-inverse {
  background: var(--gt-muted);
  color: var(--gt-fg);
}
.badge-inverse a { color: var(--gt-primary); }
.badge a { color: inherit; }

/* Status badges */
.badge.available, .badge.Available { background: #10B981; color: #fff; }
.badge.sold, .badge.Sold { background: #6B7280; color: #fff; }
.badge.pending, .badge.Pending { background: #F59E0B; color: #fff; }
.badge.reserved, .badge.Reserved { background: #8B5CF6; color: #fff; }

/* Like / share / report buttons */
.btn-sm {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  margin: 2px 4px 2px 0;
}
.btn-danger { background: #EF4444; border-color: #EF4444; color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #DC2626; border-color: #DC2626; }
.btn-default {
  background: #fff;
  border: 1px solid var(--gt-border);
  color: var(--gt-fg);
}
.btn-default:hover, .btn-default:focus {
  background: var(--gt-bg-soft);
  border-color: var(--gt-primary);
  color: var(--gt-primary);
}


/* ============================================================
   PAGE-SPECIFIC OVERRIDES — post_list.php (game.php listings)
   ============================================================ */
.box-art-wrapper {
  background: var(--gt-bg-soft);
  border-radius: var(--gt-radius);
  overflow: hidden;
  position: relative;
}
.box-art-wrapper img,
.box-art-medium-wrapper img {
  border-radius: var(--gt-radius);
  transition: transform 200ms ease;
}
.box-art-wrapper:hover img,
.box-art-medium-wrapper:hover img {
  transform: scale(1.03);
}

/* Listing card */
#post-list .col-md-3,
#post-list .col-md-4,
#post-list .col-md-6 {
  margin-bottom: 16px;
}
.post-grid-item, .post-list-item {
  background: #fff;
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-lg);
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 200ms;
  position: relative;
}
.post-grid-item:hover, .post-list-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--gt-shadow-lg);
  border-color: var(--gt-primary);
}

.title-grid {
  font-size: 14px;
  font-weight: 600;
  color: var(--gt-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.price-grid {
  font-size: 16px;
  font-weight: 700;
  color: var(--gt-primary);
}

/* Filter sidebar */
#filter-bar, .filter-bar, .filter-side {
  background: #fff;
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-lg);
  padding: 16px;
  box-shadow: var(--gt-shadow-sm);
}

/* Pagination */
.pagination > li > a, .pagination > li > span {
  color: var(--gt-primary);
  border-color: var(--gt-border);
  border-radius: 6px !important;
  margin: 0 2px;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--gt-primary);
  border-color: var(--gt-primary);
}
.pagination > li > a:hover {
  background: var(--gt-bg-soft);
  border-color: var(--gt-primary);
  color: var(--gt-primary);
}


/* ============================================================
   Reset legacy Bootstrap Q&A / chat layout (was 90%/10% float)
   These classes are still used as JS hooks but the new Tailwind
   layout uses flex, so the float/width/height rules must die.
   ============================================================ */
.chat_post_button_div {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
}
.ask_button,
.qa_post_button,
.chat_post_button {
  width: auto !important;
  height: auto !important;
}
.question_textarea,
.qa_textarea,
.chat_textarea {
  float: none !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}
.qa_padding_left, .qa_right { float: none !important; width: auto !important; }
@media (max-width: 767px) {
  .chat_post_button_div { width: auto !important; }
  .question_textarea, .qa_textarea, .chat_textarea { width: 100% !important; }
}

/* ============================================================
   Q&A section, status dropdown, share buttons
   ============================================================ */
#qa-section, .qa-section {
  background: var(--gt-bg-soft);
  border-radius: var(--gt-radius-lg);
  padding: 20px;
}
.qa-row, .qa-item {
  background: #fff;
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius);
  padding: 12px 16px;
  margin-bottom: 12px;
}

.bootstrap-social .btn-social {
  border-radius: 8px;
}


/* ============================================================
   Forms (sell, edit profile, change password, etc.)
   ============================================================ */
.form-group label {
  font-weight: 600;
  color: var(--gt-fg);
  margin-bottom: 6px;
}
.form-group .help-block { font-size: 12px; color: var(--gt-fg-soft); }
.well-white, .well-lg.well-white {
  background: #fff;
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-lg);
}


/* ============================================================
   Header-bg replacement (used on many pages)
   ============================================================ */
.header-bg h4 a { color: var(--gt-primary); }


/* ============================================================
   Tablet/mobile spacing safety
   ============================================================ */
@media (max-width: 991px) {
  .main-content { padding-top: 16px; }
  .well, .well-lg { padding: 16px !important; }
  #post-img-and-details-row h1 { font-size: 1.5rem; }
  .price { font-size: 1.75rem; }
}