/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   TACTICAL ESPORTS — custom.css                             ║
 * ║   Gunmetal · Radiant Red · Bone White · Cut Corners         ║
 * ╚══════════════════════════════════════════════════════════════╝
*/

/* ─────────────────────────────────────────────────────────────
   §0  GOOGLE FONTS — Teko + Barlow Condensed + Inter
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────
   §1  DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  --te-bg:          #1A1D21;
  --te-surface:     #1F2326;
  --te-surface-2:   #252A2E;
  --te-border:      #2A2F35;
  --te-border-hot:  #3A3F47;

  --te-red:         #FF4655;
  --te-red-dim:     rgba(255, 70, 85, 0.15);
  --te-red-mid:     rgba(255, 70, 85, 0.4);
  --te-yellow:      #F5C518;
  --te-yellow-dim:  rgba(245, 197, 24, 0.15);

  --te-text:        #ECE8E1;
  --te-text-sec:    rgba(236, 232, 225, 0.5);
  --te-text-dim:    rgba(236, 232, 225, 0.28);

  --te-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --te-t:           0.15s;
  --te-t-mid:       0.22s;

  /* Cut corner size */
  --te-cut:         14px;
}

/* ─────────────────────────────────────────────────────────────
   §2  BODY — Gunmetal + Subtle Tactical Grid
   ───────────────────────────────────────────────────────────── */
body {
  background-color: var(--te-bg) !important;
  background-image:
    linear-gradient(rgba(255, 70, 85, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 70, 85, 0.03) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* ─────────────────────────────────────────────────────────────
   §3  GLOBAL TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
body,
input, select, textarea, button {
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  color: var(--te-text);
}

/* Teko for headings, stat numbers, and UI labels */
h1, h2, h3,
.text-3xl, .text-4xl, .text-5xl,
.text-3xl.font-bold, .text-4xl.font-bold, .text-5xl.font-bold {
  font-family: 'Teko', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  line-height: 1.05 !important;
}

/* Stat numbers */
.text-3xl.text-accent-500.font-bold,
.text-4xl.text-accent-500.font-bold,
.text-5xl.text-accent-500.font-bold {
  font-family: 'Teko', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--te-red) !important;
  text-shadow: 0 0 20px rgba(255, 70, 85, 0.35);
}

/* ─────────────────────────────────────────────────────────────
   §4  SECTION TITLE UNDERLINES — Red strike line
   ───────────────────────────────────────────────────────────── */
hr.border-accent-500,
.border-accent-500.mt-1 {
  border: none !important;
  height: 2px !important;
  background: var(--te-red) !important;
  width: 100% !important;
  margin-top: 6px !important;
  border-radius: 0 !important;
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────
   §5  NAVBAR — Dark Gunmetal Bar
   ───────────────────────────────────────────────────────────── */
nav.component > div {
  background: rgba(26, 29, 33, 0.98) !important;
  border: none !important;
  border-bottom: 2px solid var(--te-red) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 20px rgba(255, 70, 85, 0.15) !important;
}

nav.component h1 {
  font-family: 'Teko', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--te-text) !important;
  transition: color var(--te-t) var(--te-ease);
}
nav.component a:hover h1 {
  color: var(--te-red) !important;
}

nav.component a.px-4.py-2,
nav.component button.px-4.py-2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--te-text-sec) !important;
  position: relative;
  transition: color var(--te-t) var(--te-ease) !important;
}
nav.component a.px-4.py-2:hover,
nav.component button.px-4.py-2:hover {
  color: var(--te-red) !important;
}

/* Active nav — red left tick */
nav.component a.px-4.py-2.text-t-primary {
  color: var(--te-text) !important;
}
nav.component a.px-4.py-2.text-t-primary::before {
  content: '//';
  position: absolute;
  left: -2px;
  color: var(--te-red);
  font-size: 0.7rem;
  font-weight: 700;
  top: 50%;
  transform: translateY(-50%);
}

/* Cart icon */
nav.component a[href*="cart"] {
  border-radius: 0 !important;
  border-color: var(--te-border) !important;
  transition: border-color var(--te-t) var(--te-ease),
              color var(--te-t) var(--te-ease) !important;
}
nav.component a[href*="cart"]:hover {
  border-color: var(--te-red) !important;
  color: var(--te-red) !important;
  background: var(--te-red-dim) !important;
}

/* Cart badge — Red */
nav.component span.bg-accent-500 {
  background-color: var(--te-red) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
}

nav.component button.size-10 {
  border-radius: 0 !important;
  border-color: var(--te-border) !important;
}
nav.component button.size-10:hover {
  border-color: var(--te-red) !important;
  background: var(--te-red-dim) !important;
}

/* ─────────────────────────────────────────────────────────────
   §6  HERO SECTION
   ───────────────────────────────────────────────────────────── */
.component h1.text-3xl,
.component h1.text-4xl,
.component h1.text-5xl {
  font-family: 'Teko', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--te-text) !important;
  line-height: 1.0 !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.component p.text-t-primary\/75,
.component p.text-base.text-t-primary\/75 {
  color: var(--te-text-sec) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────
   §7  PRODUCT CARDS — Cut Corner + Left Red Border
   ───────────────────────────────────────────────────────────── */
a.block.h-full.bg-card\/75 {
  background: var(--te-surface) !important;
  border: 1px solid var(--te-border) !important;
  border-left: 3px solid var(--te-red) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  /* Cut top-right corner */
  clip-path: polygon(
    0 0,
    calc(100% - var(--te-cut)) 0,
    100% var(--te-cut),
    100% 100%,
    0 100%
  ) !important;
  position: relative;
  transition:
    background-color var(--te-t) var(--te-ease),
    border-color var(--te-t) var(--te-ease),
    box-shadow var(--te-t) var(--te-ease) !important;
}

a.block.h-full.bg-card\/75:hover {
  background: var(--te-surface-2) !important;
  border-left-color: var(--te-red) !important;
  border-color: var(--te-border-hot) !important;
  border-left: 3px solid var(--te-red) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    -4px 0 16px rgba(255, 70, 85, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Inner container */
a.block.h-full.bg-card\/75 .transform.transition-colors {
  background: transparent !important;
  border-radius: 0 !important;
}
a.block.h-full.bg-card\/75:hover .transform.transition-colors {
  background: transparent !important;
}

/* Card dividers */
a.block.h-full.bg-card\/75 .border-b {
  border-color: var(--te-border) !important;
}

/* Card header */
a.block.h-full.bg-card\/75 .text-center.px-4.py-2 {
  padding: 0.875rem 1.25rem !important;
}

/* Product name — Teko uppercase */
a.block.h-full.bg-card\/75 h3 {
  font-family: 'Teko', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--te-text) !important;
  transition: color var(--te-t) var(--te-ease);
}
a.block.h-full.bg-card\/75:hover h3 {
  color: var(--te-red) !important;
}

/* Image area */
a.block.h-full.bg-card\/75 .relative.overflow-hidden.p-2 {
  background: var(--te-bg) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 1rem !important;
  position: relative;
}

/* Crosshair corner marks on image area */
a.block.h-full.bg-card\/75 .relative.overflow-hidden.p-2::before,
a.block.h-full.bg-card\/75 .relative.overflow-hidden.p-2::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--te-red);
  border-style: solid;
  opacity: 0.5;
}
a.block.h-full.bg-card\/75 .relative.overflow-hidden.p-2::before {
  top: 6px;
  left: 6px;
  border-width: 2px 0 0 2px;
}
a.block.h-full.bg-card\/75 .relative.overflow-hidden.p-2::after {
  bottom: 6px;
  right: 6px;
  border-width: 0 2px 2px 0;
}

/* Image zoom on hover */
a.block.h-full.bg-card\/75 .relative.overflow-hidden.p-2 img {
  transition: transform 0.3s var(--te-ease);
}
a.block.h-full.bg-card\/75:hover .relative.overflow-hidden.p-2 img {
  transform: scale(1.05);
}

/* Card body */
a.block.h-full.bg-card\/75 .text-left.px-4.pb-4 {
  padding: 1rem 1.25rem 1.5rem !important;
}

/* Price — Red, Teko bold */
a.block.h-full.bg-card\/75 .text-accent-500 {
  color: var(--te-red) !important;
  font-family: 'Teko', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.04em !important;
}

/* Secondary text */
a.block.h-full.bg-card\/75 .text-t-primary\/50 {
  color: var(--te-text-sec) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
}

/* Infinite stock — Yellow warning */
a.block.h-full.bg-card\/75 .inline-flex.items-center.gap-1 {
  color: var(--te-yellow) !important;
  font-weight: 600;
}
a.block.h-full.bg-card\/75 .inline-flex.items-center.gap-1 svg {
  color: var(--te-yellow) !important;
}

/* "View Details" Button — Red fill, bracketed label */
a.block.h-full.bg-card\/75 .border.border-accent-500 {
  border-radius: 0 !important;
  border: 1px solid var(--te-red) !important;
  background: var(--te-red-dim) !important;
  color: var(--te-red) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1rem !important;
  transition:
    background-color var(--te-t) var(--te-ease),
    color var(--te-t) var(--te-ease) !important;
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    0 100%
  ) !important;
}
a.block.h-full.bg-card\/75:hover .border.border-accent-500 {
  background: var(--te-red) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(255, 70, 85, 0.4) !important;
}

/* Badges */
a.block.h-full.bg-card\/75 .badges .flex.items-center.gap-2 {
  border-radius: 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────
   §8  FEEDBACK CARDS
   ───────────────────────────────────────────────────────────── */
.h-full.bg-card\/75.border.border-white\/5.text-t-primary {
  background: var(--te-surface) !important;
  border: 1px solid var(--te-border) !important;
  border-left: 3px solid var(--te-red) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition:
    background-color var(--te-t) var(--te-ease),
    box-shadow var(--te-t) var(--te-ease) !important;
}
.cursor-pointer:hover .h-full.bg-card\/75.border.border-white\/5.text-t-primary {
  background: var(--te-surface-2) !important;
  box-shadow: -4px 0 14px rgba(255, 70, 85, 0.2) !important;
  transform: translateY(-2px);
}

.h-full.bg-card\/75 .text-sm.text-t-primary\/90 {
  color: var(--te-text-sec) !important;
  font-size: 0.8125rem !important;
  line-height: 1.6;
}
.h-full.bg-card\/75 .text-xs.text-t-primary\/80 {
  color: var(--te-text-dim) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em;
}
.h-full.bg-card\/75 .px-4.py-2.text-xs.text-t-primary\/70 {
  color: var(--te-text-dim) !important;
  border-color: var(--te-border) !important;
  letter-spacing: 0.06em;
  font-size: 0.7rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   §9  VOUCHES CARDS
   ───────────────────────────────────────────────────────────── */
#vouchesContainer .vouches-card {
  background: var(--te-surface) !important;
  border: 1px solid var(--te-border) !important;
  border-left: 3px solid var(--te-red) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 1.25rem 1.5rem !important;
  transition:
    background-color var(--te-t) var(--te-ease),
    box-shadow var(--te-t) var(--te-ease) !important;
}
#vouchesContainer .vouches-card:hover {
  background: var(--te-surface-2) !important;
  box-shadow: -4px 0 14px rgba(255, 70, 85, 0.2) !important;
  transform: translateY(-2px);
}
#vouchesContainer .vouches-card .username,
#vouchesContainer .vouches-card .proof-link,
.vouches-title .vouches-profile {
  color: var(--te-red) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   §10  STATS SECTION — Scoreboard Style
   ───────────────────────────────────────────────────────────── */
.text-center.border-b-2.border-white\/5.py-4 {
  background: var(--te-surface) !important;
  border: 1px solid var(--te-border) !important;
  border-top: 3px solid var(--te-red) !important;
  border-radius: 0 !important;
  padding: 1.75rem 1.25rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
  transition: background-color var(--te-t) var(--te-ease);
}

/* Faint diagonal stripe on each stat box */
.text-center.border-b-2.border-white\/5.py-4::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    -45deg,
    transparent 48%,
    var(--te-border) 48%,
    var(--te-border) 52%,
    transparent 52%
  );
  pointer-events: none;
}

.text-center.border-b-2.border-white\/5.py-4:hover {
  background: var(--te-surface-2) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Stat numbers — Teko, Red */
.text-center.border-b-2.border-white\/5.py-4 .text-accent-500 {
  font-family: 'Teko', sans-serif !important;
  font-weight: 700 !important;
  color: var(--te-red) !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 16px rgba(255, 70, 85, 0.3);
  text-transform: uppercase;
}

/* Stat labels — Barlow Condensed */
.text-center.border-b-2.border-white\/5.py-4 .text-t-primary\/80,
.text-center.border-b-2.border-white\/5.py-4 p.text-sm {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--te-text-dim) !important;
}

/* Stats grid — tight gap */
.w-full.grid.grid-cols-1.gap-4 {
  gap: 2px !important;
}

/* ─────────────────────────────────────────────────────────────
   §11  FOOTER
   ───────────────────────────────────────────────────────────── */
footer {
  background: var(--te-bg) !important;
  border: none !important;
  border-top: 2px solid var(--te-red) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 -4px 20px rgba(255, 70, 85, 0.1) !important;
}
footer .border-b {
  border-color: var(--te-border) !important;
}
footer .bg-card\/25 {
  background: rgba(255, 255, 255, 0.02) !important;
}
footer p,
footer p.text-t-primary\/80 {
  color: var(--te-text-dim) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
footer a {
  color: var(--te-text-dim) !important;
  transition: color var(--te-t) var(--te-ease) !important;
}
footer a:hover {
  color: var(--te-red) !important;
}

/* ─────────────────────────────────────────────────────────────
   §12  GLOBAL ACCENT OVERRIDES — Red system
   ───────────────────────────────────────────────────────────── */
.text-accent-500 {
  color: var(--te-red) !important;
}
.fill-accent-500,
svg.fill-accent-500 {
  fill: var(--te-red) !important;
}
.bg-accent-500 {
  background-color: var(--te-red) !important;
  color: #fff !important;
}
.bg-accent-500:hover {
  background-color: #e83344 !important;
  box-shadow: 0 0 16px rgba(255, 70, 85, 0.4) !important;
}
.border-accent-500 {
  border-color: var(--te-red) !important;
}

/* ─────────────────────────────────────────────────────────────
   §13  INPUTS & FORMS — Tactical style
   ───────────────────────────────────────────────────────────── */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea {
  background: var(--te-surface) !important;
  border: 1px solid var(--te-border) !important;
  border-left: 2px solid var(--te-red) !important;
  border-radius: 0 !important;
  color: var(--te-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  transition: border-color var(--te-t) var(--te-ease) !important;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--te-border-hot) !important;
  border-left-color: var(--te-red) !important;
  box-shadow: -4px 0 12px rgba(255, 70, 85, 0.2) !important;
  outline: none !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--te-text-dim) !important;
}

/* ─────────────────────────────────────────────────────────────
   §14  SCROLLBAR — Red tactical
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--te-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--te-red);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: #e83344;
}

/* ─────────────────────────────────────────────────────────────
   §15  TEXT SELECTION
   ───────────────────────────────────────────────────────────── */
::selection {
  background: rgba(255, 70, 85, 0.3);
  color: var(--te-text);
}