/* =========================================================
   VELKO STORE — tema oscuro coherente con el landing
   (paleta violeta/magenta/cian sobre #070512 + tipografías
   Chakra Petch / Sora, igual que templates/landing.php)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Sora:wght@300;400;500;600&display=swap');

:root{
	--vk-cy:#00F0FF; --vk-cy2:#6FF7FF; --vk-cy-d:#00B8C8;
	--vk-violet:#8B5CF6; --vk-magenta:#FF2E88; --vk-gold:#FFC93C;
	--vk-bg:#070512; --vk-bg2:#0E0A1F; --vk-card:#140E2B;
	--vk-text:#EDE9FF; --vk-muted:#9C92C7; --vk-line:rgba(139,92,246,.18);
	--vk-display:'Chakra Petch',sans-serif; --vk-body:'Sora',sans-serif;
}

/* ---------- Base ---------- */
body{background:var(--vk-bg) !important;color:var(--vk-text);font-family:var(--vk-body);}
#main, .ct-main, .site-main, .ct-container{background:transparent;}
a{color:var(--vk-cy);}
h1,h2,h3,h4,h5{color:#fff;font-family:var(--vk-display);text-transform:uppercase;letter-spacing:.01em;}

/* ---------- Ocultar header nativo de Blocksy (usamos el propio) ---------- */
header.ct-header{display:none !important;}
.site-title{display:none !important;}
body{padding-top:58px;}                                       /* compensa el header fijo */

/* ---------- Header propio: fijo, compacto, oscuro ---------- */
#velko-header{
	position:fixed;top:0;left:0;right:0;height:58px;z-index:9999;
	display:flex;align-items:center;gap:12px;padding:0 16px;
	background:rgba(7,5,18,.85);backdrop-filter:blur(12px);
	border-bottom:1px solid var(--vk-line);
}
#velko-burger{
	background:none;border:0;cursor:pointer;width:40px;height:40px;padding:9px;
	display:flex;flex-direction:column;justify-content:center;gap:5px;flex:0 0 auto;
}
#velko-burger span{display:block;height:2.5px;width:100%;background:var(--vk-cy);border-radius:2px;transition:.2s;}
#velko-burger:hover span{background:var(--vk-cy2);}
.velko-logo{display:flex;align-items:center;line-height:0;}
.velko-logo img{height:42px;width:auto;filter:drop-shadow(0 0 10px rgba(0,240,255,.25));}
.velko-logo__text{color:#fff;font-weight:800;font-size:1.1rem;line-height:1;}
.velko-account{margin-left:auto;color:#cfe7f2;display:flex;align-items:center;gap:7px;padding:8px 10px;font-weight:600;font-size:.92rem;border:1px solid rgba(0,240,255,.25);border-radius:9px;}
.velko-account:hover{color:var(--vk-cy);border-color:rgba(0,240,255,.6);}
.velko-cart{color:#cfe7f2;display:flex;align-items:center;padding:8px;}
.velko-cart:hover{color:var(--vk-cy);}
@media(max-width:560px){ .velko-account__txt{display:none;} .velko-account{border:0;padding:8px;} }

/* ---------- Panel lateral (off-canvas) ---------- */
#velko-drawer{position:fixed;inset:0;z-index:10000;visibility:hidden;}
#velko-drawer.is-open{visibility:visible;}
.velko-drawer__overlay{position:absolute;inset:0;background:rgba(2,8,18,.6);opacity:0;transition:.25s;}
#velko-drawer.is-open .velko-drawer__overlay{opacity:1;}
.velko-drawer__panel{
	position:absolute;top:0;left:0;bottom:0;width:280px;max-width:82vw;
	background:var(--vk-bg2);border-right:1px solid rgba(0,240,255,.22);
	transform:translateX(-100%);transition:transform .28s ease;
	padding:66px 0 24px;overflow-y:auto;box-shadow:8px 0 40px rgba(0,0,0,.5);
}
#velko-drawer.is-open .velko-drawer__panel{transform:translateX(0);}
#velko-drawer-close{position:absolute;top:12px;right:14px;background:none;border:0;color:#9fb3c8;font-size:2rem;line-height:1;cursor:pointer;}
#velko-drawer-close:hover{color:var(--vk-cy);}
.velko-drawer__menu{list-style:none;margin:0;padding:0;}
.velko-drawer__menu li{border-bottom:1px solid rgba(255,255,255,.06);}
.velko-drawer__menu a{display:block;padding:15px 26px;color:#e6eef7;font-weight:600;text-decoration:none;transition:.15s;}
.velko-drawer__menu a:hover{background:rgba(0,240,255,.12);color:var(--vk-cy);padding-left:32px;}
body.velko-no-scroll{overflow:hidden;}

/* ---------- Banda de título de página ---------- */
/* Oscura en general (ya no blanca) para coherencia */
.hero-section{background:var(--vk-bg) !important;}
.hero-section .page-title,.hero-section .page-description{color:#fff !important;}
/* Oculta en el inicio y en las categorías (el banner ocupa ese espacio) */
.home .hero-section,.home .entry-header,.home .page-title,
.tax-product_cat .hero-section{display:none !important;}
.home #main,.home .ct-container{padding-top:0 !important;}
.tax-product_cat #main,.tax-product_cat .ct-container{padding-top:0 !important;}

/* ---------- Banner de categoría (Free Fire, etc.) ---------- */
.velko-cat-banner{
	position:relative;left:50%;right:50%;width:100vw;
	margin-left:-50vw;margin-right:-50vw;margin-top:0;margin-bottom:28px;
	line-height:0;
}
.velko-cat-banner img{display:block;width:100%;height:auto;}
/* evita la barra de scroll horizontal del full-bleed */
html,body{overflow-x:hidden;}

/* ---------- WooCommerce: tienda / productos ---------- */
.woocommerce ul.products li.product,
.wc-block-grid__product{
	background:var(--vk-card);border:1px solid var(--vk-line);border-radius:16px;
	padding:14px 14px 18px;transition:.25s;
}
.woocommerce ul.products li.product:hover{border-color:rgba(0,240,255,.5);transform:translateY(-4px);}
.woocommerce ul.products li.product a img{border-radius:10px;background:#0B0718;}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce .product_title{color:#fff !important;}
.woocommerce .price,.woocommerce .amount,.woocommerce ul.products li.product .price{color:var(--vk-gold) !important;font-weight:700;}
.woocommerce span.onsale{background:var(--vk-cy);color:#04121a;}

/* Botones */
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,
.woocommerce #respond input#submit,.woocommerce-page .button,
.wp-element-button,.single_add_to_cart_button{
	background:linear-gradient(95deg,var(--vk-cy),var(--vk-cy2)) !important;
	color:#0A0612 !important;border:0 !important;border-radius:10px !important;
	font-weight:700 !important;font-family:var(--vk-display) !important;
	text-transform:uppercase;letter-spacing:.06em;
	box-shadow:0 6px 18px rgba(0,240,255,.28);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.single_add_to_cart_button:hover{
	filter:brightness(1.08);transform:translateY(-1px);
}

/* ---------- Producto individual ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--vk-card);border-color:var(--vk-line);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--vk-bg2);}
.woocommerce-tabs .panel{background:var(--vk-bg2);padding:18px;border-radius:12px;}

/* ---------- Carrito / checkout / tablas ---------- */
.woocommerce table.shop_table,.woocommerce-cart table.cart,
.woocommerce-checkout #order_review,.woocommerce .cart_totals{
	background:var(--vk-card) !important;border:0 !important;border-radius:14px;color:var(--vk-text);
	box-shadow:0 8px 30px rgba(0,0,0,.30);overflow:hidden;
}
.woocommerce table.shop_table th,.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody tr,.woocommerce .cart_totals tr,
.woocommerce-checkout #order_review tr{border-color:rgba(255,255,255,.05) !important;color:var(--vk-text);}
.woocommerce table.shop_table thead th{background:rgba(255,255,255,.03);}

/* Imagen del producto en el carrito: visible, pequeña y redondeada */
.woocommerce-cart .cart_item .product-thumbnail img{
	width:64px;height:64px;object-fit:cover;border-radius:10px;
	border:1px solid var(--vk-line);background:#0B0718;
}
.woocommerce-cart table.cart thead th.product-thumbnail{color:transparent;}

/* Icono de eliminar más sutil */
.woocommerce a.remove{
	color:#ff7a7a !important;background:transparent !important;font-size:1.4rem;font-weight:400;
	width:auto;height:auto;line-height:1;
}
.woocommerce a.remove:hover{color:#fff !important;background:#e74c3c !important;}
.woocommerce form .form-row label,.woocommerce-checkout label,.woocommerce-cart label{color:var(--vk-text);}
.woocommerce form .form-row input,.woocommerce form .form-row textarea,
.woocommerce .select2-selection,.woocommerce input[type="text"],
.woocommerce input[type="email"],.woocommerce input[type="tel"],
.woocommerce input[type="number"],.woocommerce select,
.rcg-input{
	background:#0B0718 !important;color:#fff !important;border:1px solid var(--vk-line) !important;border-radius:9px !important;
}
.woocommerce-info,.woocommerce-message,.woocommerce-error{
	background:var(--vk-bg2) !important;border-top-color:var(--vk-cy) !important;color:var(--vk-text);
}
.woocommerce-info::before,.woocommerce-message::before{color:var(--vk-cy);}

/* ---------- Checkout: caja "Tu pedido" (wrapper .ct-order-review de Blocksy) ---------- */
/* Blocksy le pone un borde claro; lo convertimos en tarjeta oscura con aire. */
.ct-order-review{
	background:var(--vk-card) !important;
	border:1px solid var(--vk-line) !important;
	border-radius:16px !important;
	padding:clamp(18px,3vw,28px) !important;
}
.ct-order-review #order_review_heading{margin:0 0 18px;}
/* el wrapper ya es la tarjeta: la tabla interior va transparente y con aire */
.woocommerce-checkout #order_review{background:transparent !important;box-shadow:none !important;}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{padding:13px 12px !important;}

/* Más aire en las tablas de carrito/pedido en general */
.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:13px 14px;}

/* Métodos de pago */
.woocommerce-checkout #payment,.wc_payment_methods{background:transparent;}
.woocommerce-checkout #payment ul.payment_methods{background:var(--vk-card);border:1px solid var(--vk-line);border-radius:12px;}
.woocommerce-checkout #payment div.payment_box{background:var(--vk-bg2);color:var(--vk-text);}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--vk-bg2);}

/* ---------- Campos de Player ID (refinado oscuro) ---------- */
.rcg-player-fields{background:var(--vk-card);border-color:var(--vk-line);}
.rcg-player-fields__title{color:#fff;}
.rcg-help{color:var(--vk-muted);}

/* ---------- Footer oscuro ---------- */
.ct-footer,footer.ct-footer,[data-footer]{background:#070512 !important;color:var(--vk-muted) !important;border-top:1px solid var(--vk-line);}
.ct-footer a{color:#bfe9f3;}

/* ---------- QR de Binance Pay (método de pago manual) ---------- */
.velko-binance-qr{margin-top:12px;text-align:center;}
.velko-binance-qr__hint{margin:0 0 8px;color:var(--vk-muted);font-size:13px;}
.velko-binance-qr__img{display:block;width:100%;max-width:240px;height:auto;margin:0 auto;border-radius:12px;border:1px solid var(--vk-line);background:#fff;}
.velko-binance-qr__uid{margin:8px 0 0;color:var(--vk-text);font-size:13px;}
.velko-binance-qr__uid strong{color:#f3ba2f;letter-spacing:.5px;}

/* ---------- Torneo: leaderboard (shortcode [velko_torneo_ranking]) ---------- */
.rcg-torneo-wrap{max-width:560px;margin:0 auto;}
.vk-lb__season{font-family:var(--vk-display);font-size:.9rem;letter-spacing:.04em;color:var(--vk-muted);text-align:center;margin-bottom:18px;}
.vk-lb__season strong{color:var(--vk-gold);}
.vk-lb__empty{text-align:center;color:var(--vk-muted);background:var(--vk-card);border:1px dashed var(--vk-line);border-radius:14px;padding:26px 20px;}
.vk-lb__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.vk-lb__row{display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--vk-card);border:1px solid var(--vk-line);border-radius:12px;}
.vk-lb__pos{font-weight:800;min-width:30px;text-align:center;color:var(--vk-muted);}
.vk-lb__name{flex:1;font-weight:600;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vk-lb__prize{font-size:.7rem;color:var(--vk-gold);border:1px solid rgba(255,201,60,.4);border-radius:99px;padding:1px 9px;margin-left:8px;}
.vk-lb__pts{font-weight:800;color:var(--vk-cy);white-space:nowrap;}
.vk-lb__row--1{border-color:rgba(255,201,60,.55);}
.vk-lb__row--2{border-color:rgba(192,199,214,.45);}
.vk-lb__row--3{border-color:rgba(208,138,78,.45);}
.vk-lb__row--top .vk-lb__pos{font-size:1.25rem;}
.vk-lb__foot{text-align:center;color:var(--vk-muted);font-size:.78rem;margin-top:16px;}

/* ---------- Botón flotante de WhatsApp ---------- */
.velko-wa-float{position:fixed;right:18px;bottom:18px;z-index:99999;display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 18px 0 14px;border-radius:999px;background:#25d366;color:#fff !important;box-shadow:0 6px 20px rgba(0,0,0,.35);text-decoration:none !important;transition:transform .15s ease,box-shadow .15s ease;}
.velko-wa-float:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45);color:#fff !important;}
.velko-wa-float svg{flex:0 0 auto;}
.velko-wa-float__label{font-weight:700;font-size:15px;line-height:1;}
@media(max-width:600px){.velko-wa-float{right:14px;bottom:14px;height:52px;padding:0 14px;}.velko-wa-float__label{display:none;}}