/*
Theme Name:   Blocksy Vicionstore Gamer
Theme URI:    https://vicionstore.com
Description:  Tema hijo de Blocksy con estilo gamer para tienda de recargas digitales.
Author:       Vicionstore
Template:     blocksy
Version:      1.0.0
Text Domain:  blocksy-vicion
*/

/* ==========================================================
   1. VARIABLES (cambia aquí los colores de toda la tienda)
   ========================================================== */
:root {
  --nz-bg:        #0b0b14;
  --nz-bg-2:      #12121f;
  --nz-card:      #171727;
  --nz-border:    #26264a;
  --nz-text:      #e8e8f5;
  --nz-muted:     #9a9ac0;
  --nz-accent:    #00e5ff;   /* cian neón */
  --nz-accent-2:  #8a2be2;   /* violeta */
  --nz-hot:       #ff6a00;   /* naranja para ofertas */
  --nz-radius:    14px;
  --nz-glow:      0 0 18px rgba(0, 229, 255, .35);
  --nz-font:      'Rajdhani', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

/* ==========================================================
   2. BASE
   ========================================================== */
body {
  background: var(--nz-bg);
  background-image:
    radial-gradient(900px 400px at 85% -5%, rgba(138, 43, 226, .18), transparent 60%),
    radial-gradient(700px 350px at 5% 0%, rgba(0, 229, 255, .12), transparent 60%);
  background-attachment: fixed;
  color: var(--nz-text);
  font-family: var(--nz-font);
  font-size: 17px;
  letter-spacing: .2px;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title {
  font-family: var(--nz-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

a { color: var(--nz-accent); transition: color .2s, text-shadow .2s; }
a:hover { color: #fff; text-shadow: var(--nz-glow); }

::selection { background: var(--nz-accent-2); color: #fff; }

/* ==========================================================
   3. CABECERA Y PIE
   ========================================================== */
[data-header] .ct-header,
#header, .ct-header {
  background: rgba(11, 11, 20, .88) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nz-border);
  box-shadow: 0 2px 20px rgba(0, 229, 255, .08);
}
.ct-header a, .ct-header .menu a { color: var(--nz-text); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.ct-header a:hover, .ct-header .current-menu-item > a { color: var(--nz-accent); text-shadow: var(--nz-glow); }

.ct-footer, footer#footer {
  background: var(--nz-bg-2) !important;
  border-top: 1px solid var(--nz-border);
  color: var(--nz-muted);
}

/* ==========================================================
   4. BOTONES
   ========================================================== */
.button, button.button, .wp-element-button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.single_add_to_cart_button, #place_order {
  background: linear-gradient(135deg, var(--nz-accent-2), var(--nz-accent)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--nz-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 12px 24px;
  box-shadow: var(--nz-glow);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}
.button:hover, .wp-element-button:hover, .single_add_to_cart_button:hover, #place_order:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(0, 229, 255, .6);
  filter: brightness(1.1);
}

/* ==========================================================
   5. TARJETAS DE PRODUCTO (paquetes / juegos)
   ========================================================== */
.woocommerce ul.products li.product,
ul.products li.product {
  background: var(--nz-card);
  border: 1px solid var(--nz-border);
  border-radius: var(--nz-radius);
  padding: 14px;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  border-color: var(--nz-accent);
  box-shadow: var(--nz-glow);
}
.woocommerce ul.products li.product img { border-radius: 10px; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--nz-accent);
  font-weight: 700;
  font-size: 1.25em;
}
.woocommerce span.onsale {
  background: var(--nz-hot);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(255, 106, 0, .5);
}

/* ==========================================================
   6. PÁGINA DE PRODUCTO + CAMPO ID DE JUGADOR
   ========================================================== */
.woocommerce div.product .product_title { font-size: 2rem; }

.nz-player-id {
  background: var(--nz-card);
  border: 1px solid var(--nz-border);
  border-left: 4px solid var(--nz-accent);
  border-radius: var(--nz-radius);
  padding: 16px;
  margin: 0 0 18px;
}
.nz-player-id label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: var(--nz-accent);
}
.nz-player-id small { display: block; margin-top: 8px; color: var(--nz-muted); }

/* ==========================================================
   7. FORMULARIOS Y CHECKOUT
   ========================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], textarea, select,
.woocommerce form .form-row input.input-text,
.wc-block-components-text-input input {
  background: var(--nz-bg-2) !important;
  color: var(--nz-text) !important;
  border: 1px solid var(--nz-border) !important;
  border-radius: 10px !important;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--nz-accent) !important;
  box-shadow: var(--nz-glow);
}
.woocommerce-checkout #payment,
.woocommerce-cart .cart_totals,
.wc-block-components-sidebar,
.woocommerce table.shop_table {
  background: var(--nz-card);
  border: 1px solid var(--nz-border);
  border-radius: var(--nz-radius);
  color: var(--nz-text);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--nz-border); }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--nz-card);
  color: var(--nz-text);
  border-top-color: var(--nz-accent);
  border-radius: 10px;
}

/* ==========================================================
   8. EXTRAS
   ========================================================== */
/* Clases utilitarias para usar en bloques/páginas */
.nz-neon-title { text-shadow: 0 0 12px var(--nz-accent), 0 0 28px var(--nz-accent-2); }
.nz-card { background: var(--nz-card); border: 1px solid var(--nz-border); border-radius: var(--nz-radius); padding: 20px; }
.nz-card:hover { border-color: var(--nz-accent); box-shadow: var(--nz-glow); }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Móvil */
@media (max-width: 689px) {
  body { font-size: 16px; }
  .woocommerce div.product .product_title { font-size: 1.5rem; }
}


/* Ocultar carrito y cantidad */
.single_add_to_cart_button,
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .qty { display: none !important; }

/* Ocultar el carrito del encabezado */
.ct-header-cart, [data-id="cart"] { display: none !important; }

/* Botón Comprar ahora */
.nz-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #00b85c, #25d366) !important;
  color: #fff !important;
  font-family: var(--nz-font);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(37, 211, 102, .45);
  transition: transform .15s ease, box-shadow .2s ease;
}
.nz-wa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(37, 211, 102, .7);
  text-shadow: none;
}

/* Ocultar botón del catálogo (listados, categorías, productos relacionados) */
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product .ct-woo-card-actions,
.woocommerce ul.products li.product .added_to_cart {
  display: none !important;
}
/* Submenús desplegables del menú de escritorio */
.ct-header .sub-menu,
.ct-header [data-id^="menu"] .sub-menu,
.ct-header .ct-mega-menu,
.ct-header .ct-mega-menu-custom-width {
  --dropdown-background-color: #12121f;
  background-color: #12121f !important;
  border: 1px solid #26264a;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 229, 255, .12);
}

.ct-header .sub-menu li,
.ct-header .sub-menu a {
  background-color: transparent !important;
  color: #e8e8f5 !important;
}

.ct-header .sub-menu a:hover,
.ct-header .sub-menu .current-menu-item > a {
  color: #00e5ff !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, .5);
}

.ct-header .sub-menu li + li {
  border-top: 1px solid #1c1c38;
}

/* ==========================================================
   FORZAR PALETA OSCURA (Blocksy usa sus propias variables)
   Mantener este bloque al final del archivo
   ========================================================== */

/* Variables de color de Blocksy */
:root {
  --theme-palette-color-1: #00e5ff;
  --theme-palette-color-2: #8a2be2;
  --theme-palette-color-3: #e8e8f5;
  --theme-palette-color-4: #ffffff;
  --theme-palette-color-5: #26264a;
  --theme-palette-color-6: #12121f;
  --theme-palette-color-7: #0b0b14;
  --theme-palette-color-8: #171727;
  --theme-text-color: #e8e8f5;
  --theme-headings-color: #ffffff;
  --theme-link-initial-color: #00e5ff;
  --theme-link-hover-color: #ffffff;
  --theme-border-color: #26264a;
  --theme-form-field-border-initial-color: #26264a;
  --theme-form-field-background-initial-color: #12121f;
  --theme-form-text-initial-color: #e8e8f5;
}

/* Fondo general del sitio */
html, body, #main-container, #main, .site-main, .ct-container-full,
[data-vertical-spacing], .ct-drawer-canvas {
  background-color: #0b0b14 !important;
}

/* Cabecera */
header [data-row], .ct-header [data-row] {
  background-color: rgba(11, 11, 20, .92) !important;
}

/* Pie de página */
footer [data-row], .ct-footer [data-row] {
  background-color: #12121f !important;
}

/* Tarjetas, barra lateral, widgets y pestañas de producto */
.entry-card, article.post, .ct-sidebar, .widget,
.woocommerce div.product .woocommerce-tabs, .ct-woocommerce-tabs {
  background-color: #171727 !important;
  color: #e8e8f5;
  border-color: #26264a !important;
}

/* ==========================================================
   LISTAS DESPLEGABLES (ordenar catálogo, selectores)
   ========================================================== */

/* Fuerza el modo oscuro en la lista nativa del navegador */
select,
.woocommerce-ordering select {
  color-scheme: dark;
  background-color: #12121f !important;
  color: #e8e8f5 !important;
}

/* Opciones de la lista desplegada */
select option,
.woocommerce-ordering select option {
  background-color: #12121f !important;
  color: #e8e8f5 !important;
}

/* Si el tema usa un selector personalizado (Select2 / SelectWoo) */
.select2-dropdown,
.select2-results__option,
.select2-container--default .select2-selection--single {
  background-color: #12121f !important;
  color: #e8e8f5 !important;
  border-color: #26264a !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: #8a2be2 !important;
  color: #ffffff !important;
}

/* ==========================================================
   SELECTOR "ORDENAR POR" (corrige texto cortado)
   ========================================================== */
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select.orderby {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 40px 0 14px !important;
  line-height: 46px !important;
  box-sizing: border-box;
  font-size: 16px;
}