/* Lo que la tienda propia anade a Cobalt (cobalt.css va sin tocar). */

/* El carrito de Cobalt es un panel centrado; en movil, que no se salga. */
.cart-body { overflow: auto; }
@media (max-width: 768px) {
  .cart-menu { margin: 1rem auto; width: calc(100% - 2rem); }
  .cart-menu .cart-header, .cart-body, .cart-footer { padding: 1rem 1.25rem; }
}
.cart-menu .cantidad { display: inline-flex; align-items: center; gap: .25rem; }
.cart-menu .cantidad button {
  width: 1.75rem; height: 1.75rem; padding: 0; line-height: 1;
  border: 0; border-radius: .4rem; background: rgba(255,255,255,.08); color: #fff;
}
.cart-menu .cantidad button:hover { background: rgba(255,255,255,.16); }
.cart-menu .cantidad span { min-width: 1.5rem; text-align: center; }
.cart-menu .codigo { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.cart-menu .codigo select, .cart-menu .codigo input { flex: 1 1 8rem; }
.cart-menu .codigos-aplicados { font-size: .9rem; color: #8fd19e; margin-top: .75rem; }
.cart-menu .cart-footer { align-items: center; gap: 1rem; }

/* Ventanas: Cobalt usa las de Bootstrap (sin su JavaScript, las abre app.js). */
#popup-modal.show { display: block; overflow-y: auto; }
.modal-backdrop { z-index: 1040; }
#popup-modal { z-index: 1050; }
.error-campo { color: #f87171; font-size: .9rem; margin: .5rem 0 0; }

/* Submenus de categoria (Cobalt los abre con el JavaScript de Bootstrap). */
.user-nav .dropdown-menu.show { display: block; position: static; margin: 0 1rem .5rem; }

/* Avisos breves (anadido al carrito, errores de Tebex). */
.avisos { position: fixed; right: 1rem; bottom: 1rem; z-index: 300000; display: flex; flex-direction: column; gap: .5rem; }
.aviso {
  max-width: 22rem; padding: .8rem 1rem; border-radius: .6rem;
  background: #1c1c1c; color: #fff; border-left: 4px solid var(--p-color);
  box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: aviso-entra .2s ease-out;
}
.aviso.error { border-left-color: #f87171; }
.aviso.exito { border-left-color: #4ade80; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(8px); } }

.pie-legal { font-size: .8rem; opacity: .6; padding-top: .25rem; }
#principal:focus { outline: none; }
.status-text { cursor: pointer; }

/* Como el ds_breakpoint de Cobalt (alli 1100; aqui 1280 porque el logo es muy ancho): por debajo, solo los iconos. */
@media (max-width: 1279px) { .status-box-container .text, .discord-box-container .text { display: none; } }

/* Paquete sin imagen en Tebex. */
.sin-imagen { font-size: 3rem; font-weight: 700; color: var(--p-color); text-align: center; padding: 1.5rem 0; }

/* Las imagenes de Tebex son PNG con transparencia: sin el recuadro blanco de Bootstrap 5. */
.img-thumbnail { background-color: transparent; border-color: transparent; }

/* El logo de LastPlayers es muy ancho (7:1): que no empuje las cajas de IP y Discord fuera. */
@media (min-width: 769px) {
  .logo-container { max-width: 55vw; }
  .logo { max-width: 100%; object-fit: contain; }
}

/* En movil, Cobalt pone una tarjeta por fila: imagenes mas bajas para no ocupar toda la pantalla. */
@media (max-width: 991px) {
  .card.package .image img, .featured-package img { max-height: 160px; width: auto; }
}

/* ---- Tabla de packs (llaves): una fila por producto, una columna por cantidad. ---- */
.tabla-packs { display: flex; flex-direction: column; gap: .75rem; }
.tp-fila {
  display: grid;
  grid-template-columns: minmax(15rem, 1.6fr) repeat(var(--columnas), minmax(0, 1fr));
  gap: .75rem;
}
.tp-producto, .tp-celda {
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: .75rem;
  min-height: 5.5rem;
  color: #fff;
  transition: border-color .15s, transform .15s, background-color .15s;
}
.tp-producto { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; }
.tp-producto img { width: 3.5rem; height: 3.5rem; object-fit: contain; flex: none; }
.tp-sin-imagen {
  width: 3.5rem; height: 3.5rem; flex: none; display: grid; place-items: center;
  font-size: 1.8rem; font-weight: 700; color: var(--p-color);
}
.tp-nombre { min-width: 0; overflow-wrap: anywhere; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.25; }
.tp-celda {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  padding: .5rem; text-align: center; cursor: pointer; position: relative;
}
.tp-cantidad { font-weight: 700; font-size: 1.3rem; color: #fff; line-height: 1.1; }
.tp-precio { font-weight: 600; font-size: 1rem; color: var(--p-color); }
.tp-precio s { color: rgba(255, 255, 255, .4); font-weight: 500; font-size: .8rem; }
.tp-producto:hover, a.tp-celda:hover { border-color: var(--p-color); transform: translateY(-2px); }
.tp-dentro { border-color: var(--p-color); background: color-mix(in srgb, var(--p-color) 14%, #1c1c1c); }
.tp-marca { font-size: .7rem; font-weight: 600; color: var(--p-color); }
.tp-vacia { cursor: default; opacity: .35; }

/* En movil, cada producto es una tarjeta con sus cantidades debajo. */
@media (max-width: 767px) {
  .tabla-packs { gap: 1rem; }
  .tp-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .tp-producto { grid-column: 1 / -1; min-height: 0; }
  .tp-celda { min-height: 4.5rem; }
  .tp-vacia { display: none; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .tp-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}