/* ==========================================================================
   XJ SCRIPTS — ventanas emergentes y carrito lateral

   El carrito, el login y la ficha rapida los abre el propio Tebex (main.js)
   dentro de  div.popup > div.popup-scroll-cont > div.popup-content.
   Aqui solo les damos la piel XJ. El carrito, ademas, se coloca como cajon
   a la derecha: se reconoce por el data-url que pone Tebex en el contenedor.
   No tocamos su contenido ni sus formularios, asi el pago sigue intacto.
   ========================================================================== */

.popup{
  position:fixed; inset:0;
  z-index:120;
  background:rgba(2,6,14,.74);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:xj-fade .22s var(--xj-ease);
}
@keyframes xj-fade{ from{ opacity:0; } to{ opacity:1; } }

.popup-scroll-cont{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  padding:28px;
  overflow-y:auto;
}

.popup-content{
  position:relative;
  width:min(100%, 760px);
  padding:30px;
  border-radius:var(--xj-radius);
  border:1px solid var(--xj-line);
  background:linear-gradient(170deg, var(--xj-panel-2), #040d1a);
  box-shadow:var(--xj-shadow);
  color:var(--xj-text);
  animation:xj-rise .26s var(--xj-ease);
}
@keyframes xj-rise{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to  { opacity:1; transform:none; }
}

.popup-close{
  position:absolute; top:14px; right:14px;
  height:36px; padding:0 15px;
  border-radius:999px;
  border:1px solid var(--xj-line);
  background:rgba(8,20,38,.9);
  color:var(--xj-dim);
  font-family:var(--xj-head);
  font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  z-index:4;
  transition:color .18s var(--xj-ease), border-color .18s var(--xj-ease);
}
.popup-close:hover{ color:var(--xj-text); border-color:var(--xj-blue); }

/* --- el carrito, como cajon lateral -------------------------------------- */

.popup[data-url*="/checkout/basket"] .popup-scroll-cont{
  align-items:stretch;
  justify-content:flex-end;
  padding:0;
}

.popup[data-url*="/checkout/basket"] .popup-content{
  width:min(100%, 430px);
  min-height:100%;
  border-radius:0;
  border:0;
  border-left:1px solid var(--xj-line);
  padding:30px 26px 26px;
  background:linear-gradient(180deg, var(--xj-panel-2), var(--xj-bg));
  box-shadow:-24px 0 64px rgba(0,0,0,.6);
  animation:xj-slide .3s var(--xj-ease);
}
@keyframes xj-slide{
  from{ transform:translateX(100%); }
  to  { transform:none; }
}

/* --- contenido interno (tablas de cesta, formularios de Tebex) ----------- */

.popup-content h1,
.popup-content h2,
.popup-content h3{
  font-family:var(--xj-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-top:0;
}

.popup-content table{
  width:100%;
  border-collapse:collapse;
}
.popup-content th,
.popup-content td{
  padding:12px 8px;
  border-bottom:1px solid var(--xj-line-soft);
  text-align:left;
  font-size:14px;
}
.popup-content th{
  font-family:var(--xj-head);
  font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--xj-dim-2);
}
.popup-content td img{
  max-width:56px; height:auto;
  border-radius:8px;
  border:1px solid var(--xj-line);
}

.popup-content input[type="text"],
.popup-content input[type="email"],
.popup-content input[type="number"],
.popup-content input[type="password"],
.popup-content select{
  width:100%;
  height:44px;
  padding:0 14px;
  border-radius:var(--xj-radius-sm);
  border:1px solid var(--xj-line);
  background:rgba(3,9,20,.8);
  color:var(--xj-text);
  font-family:var(--xj-body);
  font-size:14.5px;
}
.popup-content input:focus,
.popup-content select:focus{
  outline:none;
  border-color:var(--xj-blue);
  box-shadow:var(--xj-glow-soft);
}

.popup-content label{
  display:block;
  margin-bottom:7px;
  font-family:var(--xj-head);
  font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--xj-dim);
}

/* total y boton de pago, que son lo que mas se mira */
.popup-content .total,
.popup-content .basket-total{
  font-family:var(--xj-head);
  font-size:26px; font-weight:700;
  color:var(--xj-cyan);
}

/* --- adaptacion ---------------------------------------------------------- */

@media (max-width:560px){
  .popup-scroll-cont{ padding:0; align-items:stretch; }
  .popup-content{
    width:100%;
    min-height:100%;
    border-radius:0;
    padding:62px 18px 24px;
  }
  .popup[data-url*="/checkout/basket"] .popup-content{ width:100%; }
}

/* --- remates del cajon ------------------------------------------------- */

.popup[data-url*="/checkout/basket"] .popup-content{
  background:linear-gradient(180deg, #0c1d33 0%, #061120 55%, #040d1a 100%) !important;
  border-left:1px solid rgba(7,140,255,.45) !important;
  box-shadow:-24px 0 70px rgba(0,0,0,.7), inset 1px 0 0 rgba(0,201,255,.18) !important;
  padding-top:64px !important;
}

/* Titulo del cajon, para que no empiece pegado al borde */
.popup[data-url*="/checkout/basket"] .popup-content::before{
  content:"TU CESTA";
  position:absolute; top:26px; left:26px;
  font-family:var(--xj-head);
  font-size:13px; font-weight:700;
  letter-spacing:.24em;
  color:var(--xj-cyan);
}

.popup[data-url*="/checkout/basket"] .popup-close{
  top:20px; right:22px;
}

/* El contenido que manda Tebex, con aire */
.popup-content > *:not(.popup-close){ max-width:100%; }
.popup-content p{ color:var(--xj-dim); line-height:1.65; }
.popup-content .btn-primary{ width:100%; justify-content:center; text-align:center; }


/* ==========================================================================
   FIX recorte de la ventana emergente

   .popup-scroll-cont es el que hace scroll. Con align-items:center, cuando
   el contenido es mas alto que la pantalla el navegador recorta la parte de
   ARRIBA y no deja subir hasta ella. En la vista rapida de un producto eso
   escondia la imagen, el precio y el boton de comprar: solo se veia la
   descripcion.

   align-items:flex-start + margin:auto en el hijo: se centra cuando cabe y
   no recorta cuando no cabe.
   ========================================================================== */

.popup-scroll-cont{ align-items:flex-start !important; }
.popup-content{ margin:auto !important; }

/* el cajon del carrito sigue pegado arriba y a la derecha */
.popup[data-url*="/checkout/basket"] .popup-scroll-cont{
  align-items:stretch !important;
  justify-content:flex-end;
}
.popup[data-url*="/checkout/basket"] .popup-content{
  margin:0 0 0 auto !important;
}

/* el boton de cerrar, siempre a la vista aunque la ficha sea larga */
.popup-close{
  position:fixed !important;
  top:18px; right:22px;
  z-index:10;
}