/* =====================================================================================
   GUNCHI DEV — "RED PROTOCOL" DESIGN SYSTEM
   Red / black / white, tactical-esports identity that mirrors the gun-"G" logo.
   Design tokens (--red, --dark-color-*, --notch, fonts...) live in head.twig :root.
   Loaded after custom.css so these rules win where they overlap.
   ===================================================================================== */

html { scroll-behavior: smooth; }

body {
  background-color: var(--dark-color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typography helpers ---------- */
.font-display { font-family: var(--font-display); }

.gd-glow-text {
  color: #fff;
  text-shadow: 0 0 18px var(--red-glow), 0 0 42px rgba(255, 34, 51, 0.25);
}

/* Hairline outline echoing the white stroke around the logo */
.gd-outline-text {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.65);
}

/* Eyebrow / kicker label, e.g. PREMIUM FIVEM SCRIPTS */
.gd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid rgba(255, 34, 51, 0.28);
  padding: 8px 16px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.gd-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--red);
  box-shadow: var(--glow-red);
  border-radius: 50%;
  animation: gd-pulse-dot 1.6s ease-in-out infinite;
}

/* Section heading — red tick + uppercase display type */
.gd-section-title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: relative;
  padding-left: 20px;
}
.gd-section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 0.85em;
  background: linear-gradient(var(--red), var(--red-deep));
  box-shadow: var(--glow-red);
}
.gd-section-title em { color: var(--red); font-style: normal; }

/* ---------- Angular / notched corners (tactical signature) ---------- */
.notch {
  clip-path: polygon(
    var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)
  );
}
.notch-tr { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.notch-sm { --notch: 9px; }
.notch-lg { --notch: 22px; }

/* ---------- Card system ---------- */
.gd-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    var(--dark-color-secondary);
  border: 1px solid var(--hairline);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.gd-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 34, 51, 0.55);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8), var(--glow-red-lg);
}
/* thin red top-edge that lights up on hover */
.gd-card::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0;
  transition: opacity .35s;
}
.gd-card:hover::after { opacity: 1; }

/* HUD targeting brackets in the corners (gun-sight / crosshair motif) */
.hud { position: relative; }
.hud::before, .hud::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 34, 51, 0.65);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
}
/* Brackets sit on the SQUARE corners (top-right / bottom-left); the default
   .notch cuts top-left + bottom-right, so this avoids the clip-path slicing them. */
.hud::before { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.hud::after  { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.hud:hover::before, .hud:hover::after,
.hud.is-on::before, .hud.is-on::after { opacity: 1; }

/* ---------- Buttons ---------- */
.gd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0c;
  background: linear-gradient(180deg, var(--red-bright), var(--red));
  border: 1px solid rgba(255, 120, 130, 0.5);
  padding: 14px 30px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 8px 24px -8px var(--red-glow);
  transition: transform .2s, box-shadow .3s, filter .3s;
  cursor: pointer;
  overflow: hidden;
}
.gd-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -6px var(--red-glow), var(--glow-red);
  filter: brightness(1.06);
}
.gd-btn:active { transform: translateY(0); }

.gd-btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline-strong);
  padding: 14px 28px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color .3s, color .3s, background .3s, box-shadow .3s;
  cursor: pointer;
}
.gd-btn-ghost:hover { border-color: var(--red); color: var(--red); box-shadow: var(--glow-red); }

/* ---------- Dividers ---------- */
.gd-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 34, 51, 0.5), transparent); }

/* ---------- Background atmosphere (red electric energy, echoes the logo) ---------- */
.gd-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(255, 34, 51, 0.16), transparent 60%),
    radial-gradient(900px 600px at 12% 8%, rgba(255, 34, 51, 0.08), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(255, 34, 51, 0.07), transparent 55%);
}
.gd-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 72%);
}
.gd-scanline {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(255, 34, 51, 0.07), transparent);
  animation: gd-scan 9s linear infinite;
}

/* ---------- Keyframes ---------- */
@keyframes gd-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .55; }
}
@keyframes gd-scan {
  0% { transform: translateY(-30%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(560%); opacity: 0; }
}
@keyframes gd-border-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 34, 51, 0.35), var(--glow-red); }
  50% { box-shadow: 0 0 0 4px rgba(255, 34, 51, 0), var(--glow-red-lg); }
}
.gd-pulse { animation: gd-border-pulse 2.2s ease-in-out infinite; }

/* =====================================================================================
   COMPONENT POLISH — scoped, JS-safe (no main.js hook classes are altered)
   ===================================================================================== */

/* Package cards: the notched BODY carries the surface + border (matches the
   "trending now" chip's cut-corner shape). Kept off the <a> so the HOT flame
   can still lick above the card without being clipped. */
.gd-pkg-body {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  background: var(--dark-color-secondary);
  border: 1px solid var(--hairline);
  border-radius: 0 !important;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  overflow: hidden;
  transition: border-color .35s, box-shadow .35s;
}
.gd-pkg-body::after { /* red top edge on hover */
  content: "";
  position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0; transition: opacity .35s; z-index: 3;
}
.package-list a[data-package-id],
.featured-package { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.package-list a[data-package-id]:hover,
.featured-package:hover { transform: translateY(-6px); }
.package-list a[data-package-id]:hover .gd-pkg-body,
.featured-package:hover .gd-pkg-body {
  border-color: rgba(255, 34, 51, 0.5);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.85), var(--glow-red-lg);
}
.package-list a[data-package-id]:hover .gd-pkg-body::after,
.featured-package:hover .gd-pkg-body::after { opacity: 1; }
.package-list a[data-package-id] .package-name,
.featured-package .package-name { font-family: var(--font-display); }

/* Cart / remove buttons share the angular cut corners */
.package-add-to-cart,
.package-remove {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  border-radius: 0 !important;
}
.package-add-to-cart.Btn { border-color: var(--hairline) !important; }

/* Keep wrapped rows packed to the top. Without this, a sparse row (e.g. 1–2
   packages) stretches to fill the list's min-height (80vh) and the cards grow
   to full viewport height. align-items:stretch still equalises cards per row. */
.package-list,
.hot-packages { align-content: flex-start; }

/* FAQ — tactical accordion (notched to match the rest of the UI) */
.faq-item {
  border: 1px solid var(--hairline);
  border-radius: 0 !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.faq-item:hover { border-color: rgba(255, 34, 51, 0.35); }
.faq-item:has(.faq-content[style*="height"]:not([style*="0px"])) {
  border-color: rgba(255, 34, 51, 0.55);
  box-shadow: var(--glow-red-lg);
}
.faq-toggle .faq-icon { color: var(--red) !important; font-weight: 700; }

/* Reviews — red rating chip + display name */
.rating { background: var(--red-soft) !important; border: 1px solid rgba(255, 34, 51, 0.18); }
.customer span { font-family: var(--font-display); }

/* Service cards — red icon halo */
.services-cards .gd-icon {
  background: var(--red-soft) !important;
  border: 1px solid rgba(255, 34, 51, 0.25);
  box-shadow: inset 0 0 22px rgba(255, 34, 51, 0.12);
}

/* Basket trigger accent + focus glow */
.show-basket { box-shadow: 0 6px 18px -6px var(--red-glow); }
input:focus, textarea:focus { box-shadow: 0 0 0 1px rgba(255, 34, 51, 0.4); }

/* =====================================================================================
   NAV CONSISTENCY — make nav chips/buttons share the angular language
   ===================================================================================== */
/* Desktop nav ALWAYS stays on one line — never wraps. It uses the space between
   the logo and the controls; if enough long categories exist to overflow, it
   scrolls horizontally with a hidden scrollbar instead of dropping to a 2nd row. */
.gd-navlinks {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap !important;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 8px;              /* room so the active inset glow isn't clipped */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gd-navlinks::-webkit-scrollbar { display: none; }
.gd-navlinks > li { flex: 0 0 auto; }

/* Top-level nav links styled as notched chips that match the GBP / currency button:
   same dark surface + hairline border + cut corners. Active = red. */
.gd-navlinks > li > a {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border-radius: 0 !important; /* kill rounded-[10px] so the cut corners read clean */
  border: 1px solid var(--hairline);
  background: var(--dark-color-secondary);
  color: var(--ink-soft);
  white-space: nowrap;
  padding-left: 11px !important;
  padding-right: 11px !important;
  font-size: 14px !important;
  transition: border-color .25s, color .25s, background .25s;
}
.gd-navlinks > li > a:hover {
  border-color: rgba(255, 34, 51, 0.45);
  background: var(--surface-2);
  color: #fff;
}
/* Active link (the inline style carries the red tint) — red border + soft glow,
   crisp like the LOGIN button instead of the old inset underline. */
.gd-navlinks > li > a[style*="34,51,0.14"] {
  border-color: var(--red) !important;
  color: #fff !important;
  background: rgba(255, 34, 51, 0.16) !important;
  box-shadow: inset 0 0 14px rgba(255, 34, 51, 0.28) !important;
}
/* Currency dropdown trigger: notched dark button with hairline border */
#dropdownButton,
#dropdownButton-mobile {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border-radius: 0 !important;
  border: 1px solid var(--hairline);
  transition: border-color .25s, color .25s;
}
#dropdownButton:hover,
#dropdownButton-mobile:hover { border-color: rgba(255, 34, 51, 0.45); color: #fff; }
/* Logged-in basket trigger keeps the angular cut */
.show-basket {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border-radius: 0 !important;
}

/* =====================================================================================
   "HOT" FLAME — pin to the featured card's top-right corner, above the artwork
   (replaces the original fragile calc(8% - 50px) positioning)
   ===================================================================================== */
.fire {
  top: -30px;
  right: 26px;
  left: auto;
  z-index: 6;
}

/* =====================================================================================
   CATEGORY PAGE — search bar + tag filter (angular + red-reactive so they stand out)
   ===================================================================================== */
.search {
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.search::placeholder { color: rgba(255, 255, 255, 0.4); }
.search:focus {
  border: 1px solid var(--red) !important;
  background: var(--surface-2) !important;
  box-shadow: var(--glow-red) !important;
}
/* search icon turns red while typing */
.search:focus ~ div svg path { fill: var(--red); fill-opacity: 1; }

#tagFilterButton {
  border: 1px solid var(--hairline-strong);
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color: var(--ink-soft);
  transition: border-color .25s, color .25s, background .25s;
}
#tagFilterButton:hover { border-color: rgba(255, 34, 51, 0.5); background: var(--surface-2); color: #fff; }
#tagFilterButton .text-gray-400 { color: var(--red) !important; }
#tagFilterMenu {
  border: 1px solid var(--hairline-strong);
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gd-scanline, .gd-pulse, .gd-eyebrow::before { animation: none !important; }
  * { scroll-behavior: auto !important; }
}