/* =====================================================================
   El Hub Social · Capa de estilo PREMIUM — Tema oscuro
   Fuente Sora + Inter · esquinas redondeadas · degradados · sombras
   Reemplaza el contenido de generic.css en la pestaña Appearance.
   (Las fuentes se cargan desde head.twig)
   ===================================================================== */

/* ---- Redondeo global (afecta a casi toda la tienda) ---- */
:root {
  --color-primary: var(--c-primary);
  --border-radius-s: 12px;
  --border-radius-m: 18px;

  --hs-shadow:    0 14px 34px rgba(0, 0, 0, 0.42);
  --hs-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.35);
  --hs-glow:      0 0 0 1px rgba(47, 155, 240, 0.40), 0 14px 30px rgba(13, 58, 99, 0.45);
  --hs-card-bg:   linear-gradient(180deg, #18242f 0%, #131c27 100%);
  --hs-font-head: "Sora", "Inter", system-ui, sans-serif;
}

/* ---- Tipografia ---- */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 620px at 50% -180px, rgba(47, 128, 200, 0.30) 0%, transparent 62%),
    linear-gradient(180deg, #0e1a26 0%, #0b1521 420px, #0a121a 1000px) fixed;
}

h1, h2, h3, h4, h5, h6,
.package-name, .widget-title, .home-category-title,
.store-category-tiered-header h1, .store-category-tiered-header h2,
.store-category-tiered-header h3, .store-text h1, .store-text h2,
.feature-title, .sidebar-logo {
  font-family: var(--hs-font-head);
  letter-spacing: 0.2px;
}

a { transition: color 0.15s ease; }

/* ---- Botones ---- */
.button,
.btn-primary, .btn-secondary, .btn-tertiary {
  border-radius: 12px;
  font-family: var(--hs-font-head);
  letter-spacing: 0.3px;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.button-primary {
  background-color: var(--c-primary-dark);
  background-image: linear-gradient(180deg, var(--c-primary-light), var(--c-primary-dark));
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 155, 240, 0.30);
}
.button-primary:hover, .btn-primary:hover, .btn-primary:focus {
  background-image: linear-gradient(180deg, #76d1ff, var(--c-primary));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(47, 155, 240, 0.45);
}
.button-primary:active { transform: translateY(0); }

.button-inner, .btn-secondary {
  border-radius: 12px;
  background-color: var(--c-block-inner);
  border: 1px solid var(--c-block-border);
}
.button-inner:hover, .btn-secondary:hover, .btn-secondary:focus {
  border-color: var(--c-primary);
  transform: translateY(-1px);
}

.button-added {
  border-radius: 12px;
  background-image: linear-gradient(180deg, var(--c-success-light), var(--c-success-dark));
  color: #fff;
}
.button-added:hover { box-shadow: 0 10px 22px rgba(40, 163, 122, 0.40); }

.button-gift { border-radius: 12px; }

.copy-button:hover { background-color: var(--c-sidebar-dark); }

/* ---- Tarjetas / bloques / productos ---- */
.block {
  background: var(--hs-card-bg);
  border: 1px solid var(--c-block-border);
  border-radius: var(--border-radius-m);
  box-shadow: var(--hs-shadow-sm);
}

.store-products-list .store-product,
.store-products-images .store-product,
.store-product-tiered,
.store-category-tiered,
.category-description,
.store-text,
.no-products,
.widget {
  border-radius: var(--border-radius-m);
  background: var(--hs-card-bg);
  border: 1px solid var(--c-block-border);
  box-shadow: var(--hs-shadow-sm);
}

/* Tarjeta de producto: elevacion al pasar el raton */
.store-products-list .store-product,
.store-products-images .store-product,
.store-package-item .block {
  transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.store-products-list .store-product:hover,
.store-products-images .store-product:hover,
.store-package-item:hover .block {
  transform: translateY(-4px);
  border-color: rgba(47, 155, 240, 0.55);
  box-shadow: var(--hs-glow);
}

.store-text h1, .store-text h2, .store-text h3,
.store-text h4, .store-text h5, .store-text h6,
.store-category-tiered-header h1, .store-category-tiered-header h2,
.store-category-tiered-header h3, .store-category-tiered-header h4,
.store-category-tiered-header h5, .store-category-tiered-header h6,
.widget-title { text-align: center; }

.widget .store-product { text-align: center; }
.store-products-images .store-product { text-align: center; }

/* ---- Categorias del home ---- */
.site-home-categories .category {
  border-radius: var(--border-radius-m);
  padding: 20px var(--widget-padding);
  background: var(--hs-card-bg);
  border: 1px solid var(--c-block-border);
  transition: color 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease;
}
.site-home-categories .category:hover {
  color: var(--c-primary);
  transform: translateY(-3px);
  border-color: rgba(47, 155, 240, 0.55);
  box-shadow: var(--hs-shadow-sm);
}
.home-category-title { color: var(--c-text-highlighted) !important; }
.home-grid-item:hover { background-color: var(--c-block-border); }

/* ---- Nombre / precio / imagen del paquete ---- */
.package-name { color: var(--c-text-highlighted); }
.package-img { border-radius: var(--border-radius-s); overflow: hidden; }
.package-img img { transition: transform 0.25s ease; }
.package-img:hover img { transform: scale(1.05); }

/* ---- Marco de rareza tras el icono (rangos, cajas y productos) ---- */
/* Degrada con elegancia: si falta el PNG, no se ve marco (sin imagen rota). */
.package-img.rarity-slot {
  width: 130px; height: 130px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--rarity-bg) center / cover no-repeat;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.package-img.rarity-slot:hover { transform: none; }
.package-img.rarity-slot img {
  width: 62%; height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.55));
}

/* ---- Badges y etiquetas tipo pildora ---- */
.package-tag {
  border-radius: 999px;
  background-color: var(--c-block-inner-hover);
  color: var(--c-text-highlighted);
  padding: 0 0.9rem;
}
.package-discount {
  border-radius: 999px;
  background-image: linear-gradient(180deg, var(--c-danger-light), var(--c-danger-dark));
}
.package-popular {
  border-radius: 999px;
  width: auto;
  padding: 0 0.85rem;
  color: #3a2a05;
  background-image: linear-gradient(180deg, var(--c-secondary-light), var(--c-secondary-dark));
  box-shadow: 0 5px 14px rgba(246, 197, 68, 0.40);
}
.package-popular:hover {
  background-image: linear-gradient(180deg, #ffe085, var(--c-secondary));
}

/* ---- Campos / cantidad / inputs ---- */
.quantity-field,
.store-product .quantity-field {
  border-radius: 12px;
  background: var(--c-block-inner);
  border: 1px solid var(--c-block-border);
}
.store-product .quantity-field input[type=number] { border: none; background: transparent; }
.widget-gift-card .gift-card-input,
.giftcard-field,
input[type=text], input[type=email], input[type=number], select, textarea {
  border-radius: 12px;
}
.giftcard-field:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(47, 155, 240, 0.20);
}

/* ---- Navegacion / sidebar ---- */
.navbar-content { background-color: var(--c-sidebar); color: var(--c-text-highlighted); border-radius: 12px; }
.navbar-content:hover { background-color: var(--c-sidebar-dark); }
.navbar-square { background-color: var(--c-sidebar-dark); color: var(--c-text-highlighted); border-radius: 12px; }
.navbar-submenu li a { color: var(--c-text); }
.navbar-submenu li a:hover { background-color: var(--c-sidebar-dark-hover); color: var(--c-text-highlighted); }
@media (width > 960px) { .navigation-horizontal > ul { border-radius: var(--border-radius-m); } }
.navigation-horizontal .has-children > ul { border-radius: var(--border-radius-m); }
@media (width <= 960px) {
  .widget.site-navigation { border-radius: 0; background: transparent; border: none; box-shadow: none; }
}

.site-header-inner .info .image { border-radius: 12px; }
.site-header-inner .user-name ul li { overflow: hidden; }
.site-header-inner .user-name ul li:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.site-header-inner .user-name ul li:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

.store-greeting { color: var(--c-text-highlighted); opacity: 0.6; }

/* ---- Banner de oferta ---- */
.site-sale-banner {
  border-radius: var(--border-radius-m);
  background-image: linear-gradient(120deg, var(--c-primary-dark), var(--c-primary));
  box-shadow: var(--hs-shadow-sm);
}

/* ---- Barras de progreso (metas) ---- */
.widget-community-goal .progress,
.widget-goal .progress,
.progress-container {
  border-radius: 999px;
  background: var(--c-block-inner);
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--c-primary), var(--c-primary-light));
}
.info-text { color: var(--c-success-light); }

/* ---- Top donator ---- */
.widget-top-donator .avatar { border-radius: 50%; }

/* ---- Popups / toasts ---- */
.popup-content { border-radius: var(--border-radius-m); }
.popup-close { right: 2rem; top: 2rem; border-radius: 10px; }
.toast { border-radius: 14px; box-shadow: var(--hs-shadow); }
.toast-close { border-radius: 8px; }
.basket-items { padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding)); }

/* ---- Cesta ---- */
.basket .basket-item { background-color: var(--c-block-inner); border-radius: 12px; }
.basket-quantity { background-color: var(--c-sidebar); border-radius: 8px; }
.basket-quantity:focus { background-color: var(--c-bg); }

/* ---- Media slider ---- */
.media-slider .slider, .media-slider .thumb,
.media-slider .open-lightbox,
.popup.popup-media-slider .thumb,
.popup.popup-media-slider .popup-close { border-radius: var(--border-radius-s); }

/* ---- Botones de texto blanco (legibilidad) ---- */
.button, .button-primary, .button-secondary,
.button-secondary:hover, .button-primary:hover,
.creator-code-add, .creator-code-add:hover,
.logout-button:hover { color: #fff; }

/* ---- Scrollbar a juego ---- */
* { scrollbar-color: var(--c-primary) var(--c-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-primary-light), var(--c-primary-dark));
  border-radius: 999px;
  border: 2px solid var(--c-bg);
}
::selection { background: var(--c-primary); color: #fff; }

/* ---- Página / Modal de paquete (package.html) ---- */
.store-product-full { max-width: 780px; margin: 0 auto; padding: 4px 2px 10px; }
.store-product-full .product-title {
  font-family: var(--hs-font-head); font-weight: 700; font-size: 30px; line-height: 1.12;
  text-align: center; color: var(--c-text-highlighted); margin: 0 0 20px;
}
.store-product-full .product-title .countdown {
  display: inline-block; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--c-danger-light), var(--c-danger-dark));
  border-radius: 999px; padding: 3px 11px; margin-left: 8px; vertical-align: middle; text-transform: uppercase;
}
.store-product-full > .image {
  display: block; max-width: 280px; width: auto; height: auto; margin: 4px auto 6px;
  object-fit: contain; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
.store-product-full .image-default {
  width: 220px; height: 220px; margin: 4px auto 6px; border-radius: 20px;
  background: linear-gradient(160deg, #1c2b3a, #16202c); border: 1px solid var(--c-block-border);
}
.store-product-full .product-actions {
  justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 20px auto 2px; max-width: 480px;
}
.store-product-full .actions-price {
  font-family: var(--hs-font-head); font-weight: 700; font-size: 22px; color: var(--c-text-highlighted);
}
.store-product-full .descr {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-block-border);
  color: var(--c-text); font-size: 14px; line-height: 1.7;
}
.store-product-full .descr p { margin: 0 0 10px; }
.store-product-full .descr strong, .store-product-full .descr b { color: var(--c-text-highlighted); font-weight: 700; }
.store-product-full .descr u { text-decoration-color: var(--c-primary); text-underline-offset: 2px; }
.store-product-full .descr a { color: var(--c-primary-light); }
.store-product-full .descr h1, .store-product-full .descr h2,
.store-product-full .descr h3, .store-product-full .descr h4 {
  font-family: var(--hs-font-head); color: var(--c-text-highlighted); margin: 18px 0 8px;
}
.store-product-full .descr ul, .store-product-full .descr ol { padding-left: 20px; margin: 0 0 12px; }
.store-product-full .descr li { margin-bottom: 5px; }
.store-product-full .descr img { display: block; max-width: 190px; height: auto; margin: 16px auto; border: none; border-radius: 14px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
.store-product-full .descr hr { border: none; border-top: 1px solid var(--c-block-border); margin: 16px 0; }
@media (max-width: 600px) {
  .store-product-full .product-title { font-size: 23px; }
  .store-product-full > .image { max-width: 200px; }
  .store-product-full .image-default { width: 180px; height: 180px; }
}

/* ===================================================================
   El Hub Social · limpieza global (todas las páginas)
   =================================================================== */
/* Cabecera de arriba (logo + nombre + icono Discord) — sobra: ya está en la sidebar */
.header-block { display: none !important; }
/* Widget "Paquete Destacado" (sidebar y móvil) */
module-insert[name="featured-package"] { display: none !important; }
.mobile-featured { display: none !important; }

/* ---- Sidebar nav · hover limpio y cohesionado ---- */
.navbar-content { text-decoration: none; }
.navbar-submenu-toggle { cursor: pointer; }

/* Nombre de categoría: resaltado azul suave al pasar el ratón */
.navbar-content:hover {
    background-color: rgba(47, 155, 240, 0.14) !important;
    color: var(--c-text-highlighted) !important;
}

/* Submenú: sin caja, ítems como pastilla inset */
.navbar-submenu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    list-style: none !important;
    margin: 2px 0 6px !important;
    padding: 2px 8px !important;
}
.navbar-submenu li { list-style: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
.navbar-submenu li a {
    display: block;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    color: var(--c-text);
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.navbar-submenu li a:hover {
    background-color: rgba(47, 155, 240, 0.14) !important;
    color: var(--c-text-highlighted) !important;
}