/* =============================================================================
   GxGaming - tema de cores + refino visual do front
   =============================================================================
   Carregar SEMPRE por ultimo, depois de v1.css e freemucms.css.

   Estrategia: o tema ja' expunha variaveis proprias (--theme-color,
   --bs-gradient-5, --default-color...). Em vez de reescrever as 112 views,
   redefinimos essas variaveis dentro de [data-theme="..."]. Trocar de cor
   passa a ser mudar um atributo no <html>.

   As 6 paletas sao identicas as do painel React (src/index.css), para o site
   e o painel parecerem o mesmo produto.
   ========================================================================== */

/* ---------- 1. paletas ---------------------------------------------------- */

:root,
[data-theme="blue"]{
  --gx-p400:#818cf8; --gx-p500:#6366f1; --gx-p600:#4f46e5; --gx-p700:#4338ca;
  --gx-accent:#38bdf8;
  --gx-primary-rgb:99,102,241;
  --gx-accent-rgb:56,189,248;
  --gx-btn-from:#6366f1; --gx-btn-to:#0ea5e9;
  --gx-btn-from-h:#4f46e5; --gx-btn-to-h:#0284c7;
  --gx-bg:#020617; --gx-bg-2:#0f172a; --gx-surface:#0f172a;
}

[data-theme="gold"]{
  --gx-p400:#fbbf24; --gx-p500:#f59e0b; --gx-p600:#d97706; --gx-p700:#b45309;
  --gx-accent:#fbbf24;
  --gx-primary-rgb:245,158,11;
  --gx-accent-rgb:251,191,36;
  --gx-btn-from:#f59e0b; --gx-btn-to:#fbbf24;
  --gx-btn-from-h:#d97706; --gx-btn-to-h:#f59e0b;
  --gx-bg:#020617; --gx-bg-2:#0f172a; --gx-surface:#0f172a;
}

[data-theme="green"]{
  --gx-p400:#34d399; --gx-p500:#10b981; --gx-p600:#059669; --gx-p700:#047857;
  --gx-accent:#34d399;
  --gx-primary-rgb:16,185,129;
  --gx-accent-rgb:52,211,153;
  --gx-btn-from:#10b981; --gx-btn-to:#34d399;
  --gx-btn-from-h:#059669; --gx-btn-to-h:#10b981;
  --gx-bg:#020617; --gx-bg-2:#0f172a; --gx-surface:#0f172a;
}

[data-theme="yellow"]{
  --gx-p400:#facc15; --gx-p500:#eab308; --gx-p600:#ca8a04; --gx-p700:#a16207;
  --gx-accent:#facc15;
  --gx-primary-rgb:234,179,8;
  --gx-accent-rgb:250,204,21;
  --gx-btn-from:#eab308; --gx-btn-to:#facc15;
  --gx-btn-from-h:#ca8a04; --gx-btn-to-h:#eab308;
  --gx-bg:#020617; --gx-bg-2:#0f172a; --gx-surface:#0f172a;
}

[data-theme="orange"]{
  --gx-p400:#fb923c; --gx-p500:#f97316; --gx-p600:#ea580c; --gx-p700:#c2410c;
  --gx-accent:#fb923c;
  --gx-primary-rgb:249,115,22;
  --gx-accent-rgb:251,146,60;
  --gx-btn-from:#f97316; --gx-btn-to:#fb923c;
  --gx-btn-from-h:#ea580c; --gx-btn-to-h:#f97316;
  --gx-bg:#020617; --gx-bg-2:#0f172a; --gx-surface:#0f172a;
}

/* o vermelho usa fundo neutro quente, igual ao painel */
[data-theme="red"]{
  --gx-p400:#fb7185; --gx-p500:#ef4444; --gx-p600:#dc2626; --gx-p700:#b91c1c;
  --gx-accent:#fb923c;
  --gx-primary-rgb:239,68,68;
  --gx-accent-rgb:251,146,60;
  --gx-btn-from:#dc2626; --gx-btn-to:#ea580c;
  --gx-btn-from-h:#b91c1c; --gx-btn-to-h:#c2410c;
  --gx-bg:#0a0a0a; --gx-bg-2:#0f0c0c; --gx-surface:#0f0c0c;
}

/* ---------- 2. liga a paleta as variaveis que o tema ja' usava ------------ */
/* E' isto que faz as 112 views trocarem de cor sem serem editadas.          */

:root,
[data-theme]{
  --theme-color:  var(--gx-primary-rgb);
  --theme-color2: var(--gx-primary-rgb);
  --theme-color3: var(--gx-accent-rgb);

  --default-color:  var(--gx-p400);
  --default-color2: var(--gx-p600);

  --bs-gradient:   linear-gradient(to right, var(--gx-btn-from-h) 0%, var(--gx-btn-from) 100%);
  --bs-gradient-2: linear-gradient(to right, var(--gx-btn-from) 0%, var(--gx-btn-to) 100%);
  --bs-gradient-5: linear-gradient(to right, var(--gx-btn-from) 0%, var(--gx-btn-to) 100%);

  --dark-color:       var(--gx-bg);
  --light-gray-color: var(--gx-bg-2);
  --light-dark-color: var(--gx-surface);

  --gx-line:      rgba(var(--gx-primary-rgb), .16);
  --gx-line-soft: rgba(255,255,255,.06);
  --gx-ink:       #e6e9f0;
  --gx-ink-dim:   #9aa3b2;
  --gx-radius:    12px;
}

/* transicao suave ao trocar de cor (sem piscar) */
html.gx-switching, html.gx-switching *, html.gx-switching *::before, html.gx-switching *::after{
  transition: background-color .28s ease, border-color .28s ease, color .28s ease !important;
}

/* ---------- 3. refino visual --------------------------------------------- */

body{
  background-color: var(--gx-bg);
  background-image:
    radial-gradient(1200px 560px at 12% -8%, rgba(var(--gx-primary-rgb), .13), transparent 60%),
    radial-gradient(1000px 520px at 90% 0%,  rgba(var(--gx-accent-rgb),  .10), transparent 55%);
  background-attachment: fixed;
  color: var(--gx-ink);
}

a{ color: var(--gx-accent); }
a:hover{ color: var(--gx-p400); }

::selection{ background: rgba(var(--gx-primary-rgb), .35); color:#fff; }

*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: var(--gx-bg); }
*::-webkit-scrollbar-thumb{
  background: rgba(var(--gx-primary-rgb), .32);
  border-radius: 8px; border: 2px solid var(--gx-bg);
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(var(--gx-accent-rgb), .5); }

/* --- cards (blog-meta / blog-content) ------------------------------------ */

.bg-major-black{
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent) , var(--gx-surface) !important;
}

.blog-meta.has-border,
.blog-meta{
  border: 1px solid var(--gx-line);
  border-bottom: 0;
  border-radius: var(--gx-radius) var(--gx-radius) 0 0;
  position: relative;
  overflow: hidden;
}
/* faixa de acento no topo do card */
.blog-meta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, var(--gx-btn-from), var(--gx-btn-to));
  opacity:.9;
}
.blog-content{
  border: 1px solid var(--gx-line);
  border-top: 0;
  border-radius: 0 0 var(--gx-radius) var(--gx-radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 18px 46px -28px #000;
}
.blog-title h2, .blog-title h4{
  color:#fff; letter-spacing:-.01em; text-wrap: balance;
}

/* --- botoes -------------------------------------------------------------- */

.vs-btn.gradient-btn:before,
.vs-btn2.gradient-btn:before{
  background-image: linear-gradient(to right, var(--gx-btn-from) 0%, var(--gx-btn-to) 100%);
}
.vs-btn.gradient-btn:hover:before,
.vs-btn2.gradient-btn:hover:before{
  background-image: linear-gradient(to right, var(--gx-btn-from-h) 0%, var(--gx-btn-to-h) 100%);
}
.vs-btn, .vs-btn2{
  box-shadow: 0 8px 22px -12px rgba(var(--gx-primary-rgb), .75);
}
.vs-btn:active, .vs-btn2:active{ transform: translateY(1px); }
.vs-btn:focus-visible, .vs-btn2:focus-visible{
  outline: 2px solid var(--gx-accent); outline-offset: 3px;
}

/* --- formularios --------------------------------------------------------- */

.form-control, .form-select,
.form-control.bg-light-dark{
  background-color: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  color: var(--gx-ink) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.form-control:focus, .form-select:focus{
  background-color: rgba(0,0,0,.42) !important;
  border-color: var(--gx-p500);
  box-shadow: 0 0 0 3px rgba(var(--gx-primary-rgb), .22);
  color:#fff !important;
}
.form-control::placeholder{ color: var(--gx-ink-dim); opacity:.75; }
.control-label, label{ color: var(--gx-ink-dim); font-weight:500; }
input[type="checkbox"], input[type="radio"]{ accent-color: var(--gx-p500); }

/* --- tabelas ------------------------------------------------------------- */

.table, .gx-rankings-table{ color: var(--gx-ink); border-color: var(--gx-line-soft); }
.table thead th, .gx-rankings-table thead th{
  background: rgba(var(--gx-primary-rgb), .10);
  border-bottom: 1px solid var(--gx-line) !important;
  color:#fff; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-size:12px;
}
.table td, .gx-rankings-table td{ border-color: var(--gx-line-soft) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: rgba(255,255,255,.022); color: var(--gx-ink);
}
.table tbody tr:hover > *{ background-color: rgba(var(--gx-primary-rgb), .09); }
.table .num, td.num{ font-variant-numeric: tabular-nums; }

/* --- alertas ------------------------------------------------------------- */

.alert{ border-radius:10px; border:1px solid var(--gx-line-soft); border-left-width:3px; }
.alert-success{ background: rgba(34,197,94,.10);  border-left-color:#22c55e; color:#bbf7d0; }
.alert-danger,
.alert-error  { background: rgba(239,68,68,.10);  border-left-color:#ef4444; color:#fecaca; }
.alert-info,
.alert-primary{ background: rgba(var(--gx-primary-rgb),.10); border-left-color: var(--gx-p500); color:#dbeafe; }
.alert-warning{ background: rgba(245,158,11,.10); border-left-color:#f59e0b; color:#fde68a; }

/* --- paginacao ----------------------------------------------------------- */

.pagination .page-link{
  background: var(--gx-surface); border-color: var(--gx-line-soft); color: var(--gx-ink-dim);
}
.pagination .page-link:hover{ background: rgba(var(--gx-primary-rgb),.16); color:#fff; }
.pagination .active .page-link{
  background: linear-gradient(135deg, var(--gx-btn-from), var(--gx-btn-to));
  border-color: transparent; color:#fff;
}

/* ---------- 4. seletor de cores ------------------------------------------ */

.gx-colors{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 9px; border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid var(--gx-line);
  vertical-align: middle;
}
.gx-colors button{
  width:17px; height:17px; padding:0; border-radius:50%; cursor:pointer;
  border:2px solid transparent; background-clip: padding-box;
  transition: transform .15s ease, border-color .15s ease;
}
.gx-colors button:hover{ transform: scale(1.18); }
.gx-colors button[aria-pressed="true"]{ border-color:#fff; transform: scale(1.12); }
.gx-colors button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.gx-sw-blue  { background: linear-gradient(135deg,#6366f1,#0ea5e9); }
.gx-sw-gold  { background: linear-gradient(135deg,#f59e0b,#fbbf24); }
.gx-sw-green { background: linear-gradient(135deg,#10b981,#34d399); }
.gx-sw-yellow{ background: linear-gradient(135deg,#eab308,#facc15); }
.gx-sw-orange{ background: linear-gradient(135deg,#f97316,#fb923c); }
.gx-sw-red   { background: linear-gradient(135deg,#dc2626,#ea580c); }

@media (max-width: 991px){
  .gx-colors{ margin: 8px 0; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* =============================================================================
   MODAL DE COMPRA DA LOJA
   =============================================================================
   O modal e' um dialog do jQuery UI carregando buy_item.ejs, que fica em
   default_assets - compartilhado por todos os temas. Por isso vinha com o
   chrome branco do jQuery UI e tabelas claras, destoando do site inteiro.

   Aqui o dialog e o conteudo passam a usar as variaveis do tema ativo,
   entao acompanham tema E cor escolhida, sem duplicar codigo por tema.
   ========================================================================== */

/* --- fundo atras do modal --- */
.ui-widget-overlay{
  background: rgba(0,0,0,.72) !important;
  opacity: 1 !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* --- caixa do dialog --- */
.ui-dialog{
  background: var(--gx-surface, #0f172a) !important;
  border: 1px solid var(--gx-line, rgba(255,255,255,.12)) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px -30px #000, 0 0 0 1px rgba(255,255,255,.04) !important;
  padding: 0 !important;
  overflow: hidden;
  color: var(--gx-ink, #e6e9f0);
  font-family: inherit !important;
}

/* --- barra de titulo --- */
.ui-dialog .ui-dialog-titlebar{
  background: linear-gradient(180deg, rgba(var(--gx-primary-rgb,99,102,241), .22), transparent) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gx-line, rgba(255,255,255,.12)) !important;
  border-radius: 0 !important;
  padding: 15px 18px !important;
  position: relative;
}
.ui-dialog .ui-dialog-titlebar::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background: linear-gradient(90deg, var(--gx-btn-from,#6366f1), var(--gx-btn-to,#0ea5e9));
}
.ui-dialog .ui-dialog-title{
  color:#fff !important; font-weight:700 !important;
  font-size:15px !important; letter-spacing:.01em; float:none !important;
}

/* botao de fechar */
.ui-dialog .ui-dialog-titlebar-close{
  right:12px !important; top:50% !important; transform:translateY(-50%) !important;
  width:30px !important; height:30px !important; margin:0 !important;
  background: rgba(255,255,255,.06) !important;
  border:1px solid var(--gx-line, rgba(255,255,255,.14)) !important;
  border-radius:8px !important; padding:0 !important;
  transition: background .15s ease, border-color .15s ease;
}
.ui-dialog .ui-dialog-titlebar-close:hover{
  background: rgba(239,68,68,.22) !important; border-color: rgba(239,68,68,.5) !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon{
  background-image: none !important; text-indent: 0 !important;
  width:100% !important; height:100% !important; margin:0 !important;
  position:relative !important; left:0 !important; top:0 !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before{
  content:"\00d7"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; color: var(--gx-ink-dim, #9aa3b2);
}
.ui-dialog .ui-dialog-titlebar-close:hover .ui-icon::before{ color:#fff; }

/* --- corpo --- */
.ui-dialog .ui-dialog-content{
  background: transparent !important;
  color: var(--gx-ink, #e6e9f0) !important;
  padding: 18px !important;
}

/* =============================================================================
   Conteudo: item a esquerda, opcoes a direita
   ========================================================================== */

#item_buy{
  display: flex; gap: 18px; align-items: flex-start;
}

/* --- coluna do item --- */
#item_buy_left{
  flex: 0 0 210px; width: 210px; float: none !important;
  display: flex; flex-direction: column; gap: 9px;
}

#item_image_bg{
  background:
    radial-gradient(70% 70% at 50% 42%, rgba(var(--gx-primary-rgb,99,102,241), .30), transparent 72%),
    rgba(0,0,0,.34) !important;
  border: 1px solid var(--gx-line, rgba(255,255,255,.12));
  border-radius: 12px;
  min-height: 168px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; position: relative; overflow: hidden;
}
#item_image_bg::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gx-accent-rgb,56,189,248),.85), transparent);
}
#item_image_bg img{ max-width:100%; height:auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)); }

#item_buy_left .item_info{
  background: rgba(255,255,255,.045);
  border: 1px solid var(--gx-line, rgba(255,255,255,.10));
  border-radius: 9px; padding: 9px 12px;
  font-size: 12.5px; color: var(--gx-ink-dim, #9aa3b2);
}
#item_buy_left .item_info .info{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#item_buy_left .item_info:first-of-type .info{
  justify-content:center; color:#fff; font-weight:650; font-size:13.5px; text-align:center;
}
#item_buy_left .btimes{
  color:#fff; font-weight:700; font-variant-numeric: tabular-nums;
}
#item_buy_left .normalcr, #item_buy_left .goldcr{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; white-space:nowrap;
}
#item_buy_left .normalcr{ background: rgba(var(--gx-primary-rgb,99,102,241),.20); color: var(--gx-accent,#38bdf8); }
#item_buy_left .goldcr  { background: rgba(245,158,11,.20); color:#fcd34d; }

/* --- coluna das opcoes --- */
#item_buy_right{
  flex: 1 1 auto; min-width: 0; float: none !important;
  max-height: 62vh; overflow-y: auto; padding-right: 6px;
  display: grid; grid-template-columns: minmax(120px, 40%) 1fr;
  gap: 0; align-content: start;
}
#item_buy_right::-webkit-scrollbar{ width:8px; }
#item_buy_right::-webkit-scrollbar-track{ background: transparent; }
#item_buy_right::-webkit-scrollbar-thumb{
  background: rgba(var(--gx-primary-rgb,99,102,241),.42); border-radius:8px;
}

.opt_title, .opt{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  padding: 9px 10px !important;
  display: flex; align-items: center; min-height: 42px;
  font-size: 12.5px;
}
.opt_title{
  color: var(--gx-ink-dim, #9aa3b2); font-weight: 500;
}
.opt{
  color: var(--gx-ink, #e6e9f0);
  gap: 9px; flex-wrap: wrap; justify-content: space-between;
}
.opt_title:hover, .opt:hover{ background: rgba(var(--gx-primary-rgb,99,102,241), .07) !important; }

/* controles dentro das opcoes */
.opt select, .opt input[type="number"], .opt input[type="text"]{
  background: rgba(0,0,0,.34) !important;
  border: 1px solid var(--gx-line, rgba(255,255,255,.14)) !important;
  border-radius: 8px !important;
  color: var(--gx-ink, #e6e9f0) !important;
  padding: 6px 9px !important; font-size: 12.5px !important;
  min-width: 0; max-width: 100%; height: auto !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.opt select{ flex: 1 1 130px; }
.opt input[type="number"]{ width: 66px !important; flex: 0 0 auto; }
.opt select:focus, .opt input:focus{
  outline: none;
  border-color: var(--gx-p500, #6366f1) !important;
  box-shadow: 0 0 0 3px rgba(var(--gx-primary-rgb,99,102,241), .20);
}
.opt select option{ background:#0b1020; color:#e6e9f0; }

.opt input[type="checkbox"]{
  width:17px; height:17px; accent-color: var(--gx-p500, #6366f1);
  margin:0 !important; flex:0 0 auto; cursor:pointer;
}

/* o preco de cada opcao vira chip */
.opt span[id^="credits_"]{
  display:inline-flex; align-items:center; justify-content:flex-end;
  min-width:38px; padding:2px 8px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--gx-line, rgba(255,255,255,.10));
  color:#fff; font-weight:700; font-size:11.5px;
  font-variant-numeric: tabular-nums;
}

/* --- barra de acoes --- */
.buy_button, #buy_item, #add_to_card, .buttonn{
  border: 0 !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff !important; cursor: pointer;
  background-image: linear-gradient(135deg, var(--gx-btn-from,#6366f1), var(--gx-btn-to,#0ea5e9)) !important;
  box-shadow: 0 10px 26px -12px rgba(var(--gx-primary-rgb,99,102,241), .9);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  margin: 4px 6px 0 0;
}
.buy_button:hover, #buy_item:hover, #add_to_card:hover, .buttonn:hover{
  filter: brightness(1.12); transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(var(--gx-primary-rgb,99,102,241), 1);
}
.buy_button:active, #buy_item:active, #add_to_card:active, .buttonn:active{ transform: translateY(0); }
.buy_button:focus-visible, #buy_item:focus-visible, #add_to_card:focus-visible{
  outline: 2px solid var(--gx-accent, #38bdf8); outline-offset: 3px;
}
/* o "adicionar ao carrinho" e' secundario: contorno em vez de solido */
#add_to_card{
  background-image: none !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--gx-line-2, rgba(255,255,255,.20)) !important;
  box-shadow: none;
}
#add_to_card:hover{
  background: rgba(var(--gx-primary-rgb,99,102,241), .18) !important;
  border-color: var(--gx-p500, #6366f1) !important;
}

/* --- responsivo --- */
@media (max-width: 700px){
  .ui-dialog{ width: calc(100vw - 24px) !important; left: 12px !important; }
  #item_buy{ flex-direction: column; }
  #item_buy_left{ flex: 1 1 auto; width: 100%; }
  #item_image_bg{ min-height: 140px; }
  #item_buy_right{ grid-template-columns: 1fr; max-height: 50vh; }
  .opt_title{
    border-bottom: 0 !important; padding-bottom: 2px !important; min-height: 0;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  }
  .opt{ padding-top: 2px !important; }
}

@media (prefers-reduced-motion: reduce){
  .buy_button, #buy_item, #add_to_card, .buttonn{ transition: none !important; }
  .buy_button:hover, #buy_item:hover, #add_to_card:hover{ transform: none; }
}