/* ==========================================================================
   GAMEIDSHOP — "Vivid" bright/modern theme
   Loaded AFTER infometion/css/xentzer.css on every customer-facing page.
   Strategy: override colors/shapes/shadows on the existing Webflow class
   names so both gameidshop.com (ROV) and freefire.gameidshop.com (FF)
   share one visual language without touching the PHP rendering logic.
   Safe to re-upload anytime — pure CSS, no markup dependency except the
   optional .gi-thumb wrapper used by the product-card markup.
   ========================================================================== */

:root {
  --gid-bg: #F7F6FC;
  --gid-bg-alt: #FFFFFF;
  --gid-text: #16151F;
  --gid-text-soft: #6C6B80;
  --gid-primary: #7C3AED;
  --gid-primary-2: #EC4899;
  --gid-cool-1: #6366F1;
  --gid-cool-2: #06B6D4;
  --gid-warn: #F59E0B;
  --gid-border: #ECEBF6;
  --gid-gradient-main: linear-gradient(135deg, #7C3AED 0%, #D946EF 48%, #FB923C 100%);
  --gid-gradient-cool: linear-gradient(135deg, #6366F1 0%, #06B6D4 100%);
  --gid-gradient-dark: linear-gradient(115deg, #1E1550 0%, #5B21B6 50%, #A21CAF 100%);
  --gid-radius-lg: 22px;
  --gid-radius-md: 14px;
  --gid-radius-pill: 999px;
  --gid-shadow-card: 0 10px 28px rgba(90,40,190,.10), 0 2px 8px rgba(90,40,190,.06);
  --gid-shadow-card-hover: 0 22px 40px rgba(90,40,190,.20), 0 6px 14px rgba(90,40,190,.10);
  --gid-shadow-btn: 0 8px 20px rgba(124,58,237,.28);
}

/* ---------------------------------------------------------------------- *
 * Base canvas
 * ---------------------------------------------------------------------- */
body { background-color: var(--gid-bg) !important; color: var(--gid-text) !important; }
.section.dark { background-color: var(--gid-bg-alt) !important; }
.section.light { background-color: var(--gid-bg) !important; }

.text-white, .store-game-name, .store-game-company,
h1, h2, h3, h4, h5, h6 { color: var(--gid-text) !important; }
.text-white-opacity { color: var(--gid-text-soft) !important; }
.text-extra-small { color: var(--gid-text-soft); }

/* restore light text where we deliberately keep a dark gradient backdrop */
.game-modes-header, .game-modes-header .text-white, .game-modes-header .text-white-opacity,
.navbar, .navbar .text-white,
.section.footer, .section.footer .text-white, .section.footer .text-white-opacity, .section.footer .footer-link,
.join-us-section, .join-us-section .text-large, .join-us-section .text-white-opacity,
.store-tabs-title, .kt, .promotion-2, .promotion-right, .countdown, .xent-img-2 img {
  color: rgba(255,255,255,.92) !important;
}
/* the blanket "h1..h6 = dark text" rule above wins over an ancestor's color
   (inheritance never beats a direct match, !important or not) — so headings
   that live INSIDE a kept-dark zone need their own direct override here */
.game-modes-header h1, .game-modes-header h2, .game-modes-header h3,
.game-modes-header h4, .game-modes-header h5, .game-modes-header h6,
.navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5, .navbar h6,
.section.footer h1, .section.footer h2, .section.footer h3,
.section.footer h4, .section.footer h5, .section.footer h6,
.join-us-section h1, .join-us-section h2, .join-us-section h3,
.join-us-section h4, .join-us-section h5, .join-us-section h6 {
  color: rgba(255,255,255,.92) !important;
}
.section.footer a:not([style]) { color: rgba(255,255,255,.82); }
.section.footer a:not([style]):hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------------- *
 * Navbar — deep gradient bar, glassy on scroll
 * ---------------------------------------------------------------------- */
.navbar {
  background: var(--gid-gradient-dark) !important;
  box-shadow: 0 4px 24px rgba(60,20,120,.25);
  border-bottom: none !important;
}
.nav-link:hover, .nav-link.w--current { border-bottom-color: var(--gid-primary-2) !important; }
.nav-dropdown { background: #201246 !important; border-radius: var(--gid-radius-md); overflow: hidden; box-shadow: var(--gid-shadow-card); }
.navbar .custom-button { padding: 10px 26px; }

/* ---------------------------------------------------------------------- *
 * Buttons — gradient pills, lift on hover, decorations removed
 * ---------------------------------------------------------------------- */
.button, .custom-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--gid-radius-pill) !important;
  border: none !important;
  background: var(--gid-gradient-main) !important;
  box-shadow: var(--gid-shadow-btn);
  color: #fff !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover, .custom-button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(124,58,237,.35); filter: brightness(1.04); }
.button.secondary { background: var(--gid-gradient-cool) !important; box-shadow: 0 8px 20px rgba(6,182,212,.28); }
.corner-black, .corner-light, .custom-button-hover { display: none !important; }
.custom-button-text { color: #fff !important; font-weight: 600; letter-spacing: .5px; }

/* buy-game-store2 (contact page social buttons) */
.buy-game-store2 { border-radius: var(--gid-radius-pill) !important; }

.text-highlight.white { background: #fff !important; color: var(--gid-primary) !important; box-shadow: 0 2px 10px rgba(90,40,190,.12); }
.text-highlight.primary { background: var(--gid-gradient-cool) !important; color: #fff !important; }

/* icons that were drawn light-on-dark now sit on a bright background —
   force them to a dark silhouette so they stay visible. (nav/footer icons
   are excluded on purpose: those areas stay on the dark gradient bars.) */
.filters-icon, .back-button-icon, .xent-img-2 > img, .store-tabs-title-right img {
  filter: brightness(0) opacity(.7);
}

/* ---------------------------------------------------------------------- *
 * Promo / category tab rail
 * ---------------------------------------------------------------------- */
.kt { background: var(--gid-gradient-main) !important; border-radius: var(--gid-radius-md) !important; }
.promotion-right { background: rgba(255,255,255,.25) !important; border-radius: var(--gid-radius-pill) !important; }

.store-tabs-menu-item {
  border-radius: var(--gid-radius-pill);
  margin-bottom: 6px;
  color: var(--gid-text-soft) !important;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.store-tabs-menu-item:hover { background-color: rgba(124,58,237,.08); color: var(--gid-primary) !important; }
.store-tabs-menu-item.w--current {
  background: var(--gid-gradient-main) !important;
  color: #fff !important;
  box-shadow: var(--gid-shadow-btn);
}

/* ---------------------------------------------------------------------- *
 * Product cards (.games-item.store3 — id-rov.php / id-freefire.php)
 * The info block below the image used position:absolute with no offset
 * (i.e. it just sat in static flow position); switching it to static
 * lets the card wrapper size to fit both image + text as one real card.
 * ---------------------------------------------------------------------- */
.games-item.store3 {
  position: relative;
  display: block;
  background: var(--gid-bg-alt);
  border-radius: var(--gid-radius-lg);
  overflow: hidden;
  box-shadow: var(--gid-shadow-card);
  margin-bottom: 26px !important;
  text-decoration: none;
  transition: transform .28s ease, box-shadow .28s ease;
}
.games-item.store3:hover { transform: translateY(-8px); box-shadow: var(--gid-shadow-card-hover); }

.games-item.store3 .gi-thumb { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #ECEBF6; }
.games-item.store3 .gi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.games-item.store3:hover .gi-thumb img { transform: scale(1.06); }

/* fallback: if a page hasn't been updated to use .gi-thumb, still look decent */
.games-item.store3 > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.games-item-hover { display: none !important; }
.game-info { position: static !important; padding: 16px 18px 18px !important; }
.store-game-company { font-size: 13px; }
.store-game-price { padding-top: 6px !important; }
.font-xe { color: var(--gid-primary) !important; font-weight: 700 !important; }
.old-price { color: #B7B4C9 !important; }
.img_icon_mark7.exclusive7 {
  background: var(--gid-gradient-cool) !important;
  border-radius: var(--gid-radius-pill) !important;
  top: 10px !important; right: 10px !important; margin-top: 0 !important;
  padding: 4px 10px !important;
}

/* ---------------------------------------------------------------------- *
 * Product detail page (product.php) gallery + info
 * ---------------------------------------------------------------------- */
.gallery-grid img, .gimg { border-radius: var(--gid-radius-md) !important; }
.store-game-header-name { color: var(--gid-text) !important; }
/* .x-zer (price/promo tag) carries its own hardcoded black box in
   xentzer.css — it's self-contained regardless of page theme, so give it
   the gradient-dark treatment instead of flat black. It's an <h4>, so the
   blanket "h1..h6 = dark text" rule was turning the price number black on
   the purple box — force white text (and every child) to fix that. */
.x-zer, .x-zer * {
  color: #fff !important;
}
.x-zer {
  background: var(--gid-gradient-dark) !important;
  border-color: transparent !important;
  border-radius: var(--gid-radius-md) !important;
}
.old-price22 { color: rgba(255,255,255,.85) !important; }

/* ---------------------------------------------------------------------- *
 * Reviews (feedback-card — review-id.php)
 * ---------------------------------------------------------------------- */
.feedback-card {
  background: var(--gid-bg-alt) !important;
  border: 1px solid var(--gid-border) !important;
  border-radius: var(--gid-radius-lg) !important;
  box-shadow: var(--gid-shadow-card);
}
.feedback-card:not([style*="e02020"]) { border-color: var(--gid-border) !important; }
.feedback-card strong, .feedback-card p { color: var(--gid-text) !important; }
.feedback-card .text-white-opacity { color: var(--gid-text-soft) !important; }
.feedback-card-score {
  background: var(--gid-gradient-main) !important;
  border-radius: 16px !important;
  color: #fff !important;
}
.fa.fa-star.checked { color: var(--gid-warn) !important; }
.fa.fa-star { color: #E4E1F0; }

#reviewForm input:not([type=submit]),
#reviewForm textarea,
#reviewForm select {
  background: #fff !important;
  color: var(--gid-text) !important;
  border: 1px solid var(--gid-border) !important;
}
#reviewForm input::placeholder, #reviewForm textarea::placeholder { color: #A9A7BC; }
#reviewForm button[type=submit] {
  background: var(--gid-gradient-main) !important;
  border-radius: var(--gid-radius-pill) !important;
  border: none !important;
}

/* ---------------------------------------------------------------------- *
 * Static informational pages (howto-id / contact-us / status / policy / about)
 * These share a ".section.dark > .store-game-header-row" breadcrumb bar
 * (back-button + store-game-header-name) that used near-white hardcoded
 * colors from xentzer.css — needs darkening now that .section.dark is
 * white. NOTE: product.php's ".store-game-header-name-xs" pill is a
 * DIFFERENT class with its own semi-opaque dark inline background, so it
 * intentionally keeps its light text and is left untouched here.
 * ---------------------------------------------------------------------- */
.back-button { color: var(--gid-text-soft) !important; opacity: 1; }
.back-button:hover { color: var(--gid-primary) !important; }
.back-button-icon { opacity: .85; }

/* body-copy "card" used repeatedly on about/contact-us/howto-id/policy/status
   (and inside review-id's review-form area) — originally #17161b-on-dark
   (i.e. invisible-on-purpose, just a body-text wrapper); on the light theme
   it becomes a real visible card, so give it a proper light-card treatment
   and re-darken the text it was supplying via inheritance. */
.search-result-item {
  background: var(--gid-bg-alt) !important;
  color: var(--gid-text-soft) !important;
  border: 1px solid var(--gid-border);
  border-radius: var(--gid-radius-lg) !important;
  box-shadow: var(--gid-shadow-card);
}
.divider { background-color: var(--gid-border) !important; }
.divider.dark { background-color: var(--gid-border) !important; }

/* ---------------------------------------------------------------------- *
 * Footer
 * ---------------------------------------------------------------------- */
.section.footer, .join-us-section {
  background: var(--gid-gradient-dark) !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* ---------------------------------------------------------------------- *
 * Small utility: soften default page-load spinner colors if present
 * ---------------------------------------------------------------------- */
::selection { background: var(--gid-primary-2); color: #fff; }

/* ========================================================================
   DELUXE LAYER — "อลังการ" effects pass
   Everything below is additive polish: glow, motion, shimmer, trust strip.
   Pure CSS; all motion is disabled under prefers-reduced-motion.
   ======================================================================== */

@keyframes gid-grad-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes gid-shine {
  to { background-position: 200% center; }
}
@keyframes gid-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes gid-sweep {
  to { transform: translateX(160%) skewX(-18deg); }
}
@keyframes gid-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(124,58,237,.28); }
  50%      { box-shadow: 0 8px 30px rgba(217,70,239,.55); }
}

/* ---- Hero: glowing animated headline + floating logo + welcome pill ---- */
/* Webflow's .w-background-video pins the hero at a fixed height with
   overflow:hidden — the taller deluxe content (bigger headline + trust
   strip) was getting clipped behind the navbar. Let the box grow instead. */
.game-modes-header.w-background-video { height: auto; min-height: 700px; }

.game-modes-header h2 {
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #FFFFFF 0%, #F0ABFC 25%, #FDE68A 50%, #67E8F9 75%, #FFFFFF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: gid-shine 5s linear infinite;
  filter: drop-shadow(0 0 22px rgba(217,70,239,.45));
}
.game-modes-header .mb-40 img { animation: gid-float 5.5s ease-in-out infinite; filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); }
.game-modes-header .text-highlight.primary {
  background: var(--gid-gradient-cool) !important;
  border-radius: var(--gid-radius-pill);
  padding: 6px 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: gid-pulse 3s ease-in-out infinite;
}

/* ---- Buttons: living gradients ---- */
.button {
  background-size: 220% 220% !important;
  animation: gid-grad-shift 6s ease infinite;
}
.button.secondary { animation: gid-grad-shift 7s ease infinite; }
.custom-button { background-size: 220% 220% !important; }
.custom-button:hover { animation: gid-grad-shift 2.5s ease infinite; }
.navbar .custom-button { animation: gid-pulse 3.5s ease-in-out infinite; }

/* ---- Product cards: shimmer sweep + glow ring on hover ---- */
.games-item.store3 .gi-thumb::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: 3;
}
.games-item.store3:hover .gi-thumb::after { animation: gid-sweep .9s ease forwards; }
.games-item.store3:hover {
  box-shadow: var(--gid-shadow-card-hover), 0 0 0 2px rgba(217,70,239,.35);
}
.games-item.store3 .game-info .custom-button { box-shadow: 0 6px 16px rgba(124,58,237,.30); }

/* price pops: gradient number */
.font-xe {
  background: var(--gid-gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-size: 17px;
}

/* ---- Section headlines (e.g. "รวม ID - ROV"): big + gradient underline ---- */
h4.text-white.mb-20 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  position: relative;
  padding-bottom: 14px;
}
h4.text-white.mb-20::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 84px; height: 5px;
  border-radius: 999px;
  background: var(--gid-gradient-main);
  box-shadow: 0 2px 10px rgba(217,70,239,.5);
}

/* ---- Promo bar: living gradient + shimmer ---- */
.kt {
  background-size: 220% auto !important;
  animation: gid-grad-shift 5s linear infinite;
  box-shadow: 0 6px 18px rgba(124,58,237,.25);
}

/* ---- Ambient glow inside light sections (soft color blobs) ---- */
.section.dark {
  background-image:
    radial-gradient(560px 320px at 88% 0%, rgba(124,58,237,.07), transparent 65%),
    radial-gradient(480px 300px at 4% 55%, rgba(6,182,212,.06), transparent 65%) !important;
}
.section.light {
  background-image:
    radial-gradient(600px 340px at 10% 8%, rgba(217,70,239,.06), transparent 65%),
    radial-gradient(520px 320px at 92% 70%, rgba(99,102,241,.07), transparent 65%) !important;
}

/* ---- Trust strip under the hero (markup: .gid-trust > .gid-trust-item) ---- */
.gid-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.gid-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--gid-radius-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* ---- Motion off for users who ask for it ---- */
@media (prefers-reduced-motion: reduce) {
  .game-modes-header h2,
  .game-modes-header .mb-40 img,
  .game-modes-header .text-highlight.primary,
  .button, .button.secondary, .custom-button, .custom-button:hover,
  .navbar .custom-button, .kt,
  .games-item.store3:hover .gi-thumb::after {
    animation: none !important;
  }
}

/* ========================================================================
   SOLD state — grayscale like project 1 (shopidgame)
   Every SOLD product card renders with href="#" (available cards carry a
   real product link), on BOTH the dynamic listing pages and the static
   homepage grids of both sites. So one attribute-selector rule turns every
   sold thumbnail black & white — pure CSS, no markup dependency. The
   deluxe hover motion (zoom / shimmer / glow ring) is also switched off on
   sold cards so a sold item reads as clearly unavailable, not clickable.
   ======================================================================== */
a.games-item.store3[href="#"] img {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}
a.games-item.store3[href="#"] { cursor: default; }
a.games-item.store3[href="#"]:hover {
  transform: none !important;
  box-shadow: var(--gid-shadow-card) !important;
}
a.games-item.store3[href="#"]:hover .gi-thumb img,
a.games-item.store3[href="#"]:hover img { transform: none !important; }
a.games-item.store3[href="#"] .gi-thumb::after { display: none !important; }