/* ============================================================================
   CAPITAL LOS SANTOS — Tema Tebex  (reemplaza TODO tu generic.css con esto)
   ----------------------------------------------------------------------------
   Usa las plantillas oficiales de Tebex (shared.css / main.js SIN tocar).
   Todo el look se controla desde aquí con las variables de :root.

   AJUSTES DEL PANEL (para que quede como la referencia):
     - Navigation Style ......... "Vertical Nav in Sidebar"
     - Sidebar Position ......... "Left"
     - Sube tu logo (server-logo.png) y el icono/discord si quieres.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,800&display=swap");

/* ============================ PALETA / VARIABLES ============================ */
:root{
  /* Marca */
  --cls-amber:#ff9a3d;
  --cls-amber-deep:#e8620a;
  --cls-gold:#ffb347;
  --cls-gold-brt:#ffd07a;

  /* Texto */
  --color-text:#f4f5fa;
  --color-text-darker:#dfe2ea;
  --color-text-secondary:#9aa0b0;
  --color-text-dark:#160f07;

  /* Fondos */
  --color-bg:#0c0d13;              /* fondo página / inputs / huecos */
  --color-brighter-bg:#191c26;     /* paneles, tarjetas, widgets, cabecera */

  /* Primario (naranja/oro de Capital) */
  --color-primary:#ff9a3d;
  --color-primary-hover:#ffb347;
  --color-primary-text:var(--color-text-dark);
  --color-primary-text-hover:var(--color-text-dark);

  /* Secundario (botones oscuros: whitelist, login, check…) */
  --color-secondary:#242835;
  --color-secondary-hover:#2f3444;
  --color-secondary-text:var(--color-text);
  --color-secondary-text-hover:var(--color-text);

  /* Terciario (transparente: +/- cantidad, cerrar…) */
  --color-tertiary:transparent;
  --color-tertiary-hover:rgb(255 154 61 / 14%);
  --color-tertiary-text:var(--color-text);
  --color-tertiary-text-hover:var(--cls-gold-brt);

  --color-removed:#e5484d;
  --color-sale-banner-bg:var(--color-primary);
  --color-sale-banner-text:var(--color-text-dark);

  /* Medidas */
  --btn-size:46px;
  --sidebar-width:290px;
  --content-inner-width:1180px;

  /* Radios de Capital */
  --cls-radius:14px;
  --cls-radius-sm:10px;

  /* Bordes / glow */
  --cls-border:1px solid rgba(255,255,255,.07);
  --cls-border-amber:1px solid rgba(255,154,61,.55);
  --cls-glow:0 0 18px rgba(255,138,61,.35);

  --bg-image:linear-gradient(180deg, rgba(255,138,61,.14), transparent 70%);
}

/* ============================ BASE / FONDO ============================ */
body{
  font-family:'Kanit', system-ui, -apple-system, Segoe UI, sans-serif;
  color:var(--color-text);
  background:
    radial-gradient(60vw 42vh at 80% -6%, rgba(255,138,61,.10), transparent 60%),
    linear-gradient(180deg,#101019 0%, var(--color-bg) 45%, #08090e 100%);
  background-attachment:fixed;
}
body::before{
  max-height:460px;
  background:var(--bg-image) center top/cover no-repeat;
  mask-image:linear-gradient(rgba(0,0,0,.85) 40%, rgba(0,0,0,0));
}

h1,h2,h3,h4,h5,h6{ font-family:'Kanit',system-ui,sans-serif; font-weight:800; letter-spacing:.01em; }
::selection{ color:#fff; background:rgba(255,138,61,.4); }
html{ scrollbar-color:var(--cls-amber) var(--color-bg); }
select option{ background:var(--color-brighter-bg); }

/* Enlaces */
a:hover{ color:var(--cls-gold-brt); }
.link-text{ color:var(--cls-gold-brt); }
.link-text:hover{ color:var(--cls-amber); }

/* ============================ CABECERA / BANNER ============================ */
.site-header{ }
.site-header-inner .site-title img{ filter:drop-shadow(0 10px 26px rgba(255,138,61,.35)); }
.site-header-inner .info .title{ color:var(--color-text); }
.site-header-inner .info .action{ color:var(--cls-gold-brt); }
.site-header-inner .info:hover .action{ color:var(--cls-amber); }
.site-header-inner .info .value{
  border:var(--cls-border); background:rgba(255,255,255,.04); color:var(--color-text-secondary);
  border-radius:8px;
}

/* ============================ NAVEGACIÓN ============================ */
/* Vertical (sidebar) — pills como la referencia */
@media (width > 960px){
  .navigation-vertical.widget{ padding:10px; }
  .navigation-vertical .menu > li > a{
    border-radius:var(--cls-radius-sm);
    border:1px solid transparent;
    color:var(--color-text-secondary);
    font-weight:600;
    transition:all .15s ease;
  }
  .navigation-vertical .menu > li > a:hover{
    color:var(--color-text);
    background:rgba(255,255,255,.04);
  }
  .navigation-vertical .menu > li > a.link-active{
    color:var(--cls-gold-brt);
    background:rgba(255,154,61,.10);
    border:var(--cls-border-amber);
    font-weight:700;
    box-shadow:0 6px 16px rgba(255,138,61,.14);
  }
}
/* Horizontal */
.navigation-horizontal .menu{ border-radius:var(--cls-radius); border:var(--cls-border); }
.navigation-horizontal a:hover,
.navigation-horizontal a.link-active{ color:var(--cls-gold-brt); }

/* ============================ WIDGETS ============================ */
.widget{
  border-radius:var(--cls-radius);
  border:var(--cls-border);
  background:var(--color-brighter-bg);
}
.widget-title{ color:var(--color-text); }

/* Giftcard */
.widget-gift-card .gift-card-input{ border-radius:var(--cls-radius-sm); background:var(--color-bg); }

/* Barras de progreso (goals) */
.widget-community-goal .progress,
.widget-goal .progress{ border-radius:20px; background:var(--color-bg); border:var(--cls-border); }
.widget-community-goal .progress-bar,
.widget-goal .progress-bar{
  border-radius:20px;
  background:linear-gradient(90deg, var(--cls-amber-deep), var(--cls-gold));
  box-shadow:var(--cls-glow);
}

/* Estado servidor / badges */
.badge{ border-radius:8px; font-weight:800; padding:2px 9px; font-size:11px; }
.badge-success{ background:rgba(63,185,80,.16); color:#3fb950; }
.badge-danger{ background:rgba(229,72,77,.16); color:var(--color-removed); }

/* Top donator avatar redondo */
.widget-top-donator .avatar{ border-radius:50%; border:2px solid rgba(255,154,61,.4); }

/* ============================ CATEGORÍAS EN PORTADA ============================ */
.site-home-categories .category{
  border-radius:var(--cls-radius);
  border:var(--cls-border);
  background:var(--color-brighter-bg);
  padding:22px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.site-home-categories .category:hover{
  color:var(--cls-gold-brt);
  transform:translateY(-3px);
  border-color:rgba(255,154,61,.45);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}

/* Texto CMS (bienvenida, etc.) */
.store-text{
  border-radius:var(--cls-radius);
  border:var(--cls-border);
  background:var(--color-brighter-bg);
}
.category-description{
  border-radius:var(--cls-radius);
  border:var(--cls-border);
  background:var(--color-brighter-bg);
}

/* ============================ TARJETAS DE PRODUCTO ============================ */
.store-products-images .store-product,
.store-products-list .store-product{
  border-radius:var(--cls-radius);
  border:var(--cls-border);
  background:var(--color-brighter-bg);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.store-products-images .store-product:hover,
.store-products-list .store-product:hover{
  transform:translateY(-4px);
  border-color:rgba(255,154,61,.5);
  box-shadow:0 22px 46px rgba(0,0,0,.45);
}
/* Zona de imagen tipo "inset" */
.store-products-images .store-product .image-link{
  width:100%;
  border-radius:var(--cls-radius-sm);
  background:radial-gradient(circle at 50% 38%, rgba(255,179,71,.10), var(--color-bg) 70%);
  border:1px solid rgba(255,255,255,.05);
  padding:14px;
  min-height:150px;
}
.store-product .product-title a:hover{ color:var(--cls-gold-brt); }

/* Precio */
.store-product .price strong{ color:var(--cls-gold-brt); }
.store-product .price .discount{ color:var(--color-text-secondary); }

/* Producto individual / full */
.store-product-full{
  border-radius:var(--cls-radius);
  border:var(--cls-border);
  background:var(--color-brighter-bg);
}
.store-product-full .actions{ background:rgb(from var(--color-brighter-bg) r g b/.75); }
.store-product-tiered{ border-radius:var(--cls-radius); border:var(--cls-border); }
.store-category-tiered{ border-radius:var(--cls-radius); border:var(--cls-border); background:var(--color-brighter-bg); }
.no-products{ border-radius:var(--cls-radius); border:var(--cls-border); background:var(--color-brighter-bg); }

/* ============================ BOTONES ============================ */
.btn-primary,
.btn-secondary,
.btn-tertiary{ border-radius:var(--cls-radius-sm); font-weight:800; }

/* Primario: naranja→oro con glow (Compra, Checkout, Login) */
.btn-primary{
  background:linear-gradient(90deg, var(--cls-amber-deep), var(--cls-gold)) !important;
  color:var(--color-text-dark) !important;
  box-shadow:0 8px 22px rgba(255,138,61,.32);
}
.btn-primary:hover,
.btn-primary:focus{
  filter:brightness(1.06);
  box-shadow:0 12px 32px rgba(255,138,61,.5);
}

/* Secundario oscuro */
.btn-secondary{ border:var(--cls-border); }
.btn-secondary:hover,
.btn-secondary:focus{ border-color:rgba(255,154,61,.5); color:var(--cls-gold-brt); }

/* +/- cantidad */
.quantity-field{ border-radius:var(--cls-radius-sm); border-color:rgba(255,255,255,.12); background:var(--color-bg); }
.quantity-field input[type=number]{ border-radius:6px; }

/* ============================ CESTA / POPUPS ============================ */
.popup-content{ border-radius:var(--cls-radius); border:var(--cls-border); }
.popup-close{ border-radius:0 var(--cls-radius) 0 var(--cls-radius); }
.basket-popup-content,
.basket-popup-content .popup-close{ border-radius:0; }
.basket-item{ border-radius:var(--cls-radius-sm); }
.basket .basket-item .price,
.basket .basket-checkout .total,
.basket .basket-second-header .total{ color:var(--cls-gold-brt); }
.basket .basket-title::before{ background-color:var(--cls-gold); }
.store-form input[type=text],
.store-form input[type=email],
.store-form input[type=number],
.store-form select,
.store-form textarea{ border-radius:var(--cls-radius-sm); border:var(--cls-border); }
.store-form input:focus,
.store-form select:focus,
.store-form textarea:focus{ border-color:var(--cls-amber); box-shadow:var(--cls-glow); }

/* Toasts */
.toast{ border-radius:12px; border:var(--cls-border); }
.toast.toast-success{ background:#2e7d43; }
.toast.toast-error{ background:#c0392b; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--color-brighter-bg); border-top:var(--cls-border); }
.site-footer-inner .site-footer-nav a:hover{ color:var(--cls-gold-brt); }
.site-footer-inner .copyright{ color:var(--color-text-secondary); }

/* ============================ BANNER DE OFERTA ============================ */
.site-sale-banner{ border-radius:var(--cls-radius); font-weight:700; }