/* ============================================================
   SESCOM — Tienda de Radios Nexus (modal carrito)
   Diseño coherente con el tema: verde Nexus #4ade80 + corporativo.
   Prefijo .sx- para no colisionar con Bootstrap / tema designesia.
   ============================================================ */

.sx-overlay{
  position:fixed; inset:0; z-index:99990;
  background:rgba(4,12,8,.74); backdrop-filter:blur(5px);
  display:none; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:16px 12px;
}
.sx-overlay.sx-open{ display:flex; }

.sx-modal{
  background:#fff; width:100%; max-width:860px;
  border-radius:16px; overflow:hidden; position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  animation:sxIn .28s cubic-bezier(.2,.8,.2,1);
  margin:auto;
}
.sx-modal.sx-narrow{ max-width:480px; }
@keyframes sxIn{ from{opacity:0; transform:translateY(24px) scale(.97);} to{opacity:1; transform:none;} }

.sx-close{
  position:absolute; top:12px; right:14px; z-index:6;
  width:36px; height:36px; border:none; border-radius:50%;
  background:rgba(8,20,14,.55); color:#fff; font-size:20px; line-height:1;
  cursor:pointer; transition:.25s; display:flex; align-items:center; justify-content:center;
}
.sx-close:hover{ background:rgba(8,20,14,.85); transform:rotate(90deg); }

/* ---------- Paso 1: detalle del producto ---------- */
.sx-product{ display:grid; grid-template-columns:1fr 1fr; }
.sx-pimg{ background:#f5f5f5; display:flex; align-items:center; justify-content:center; padding:26px; min-height:340px; }
.sx-pimg img{ max-width:100%; max-height:300px; object-fit:contain; }
.sx-pinfo{ padding:32px 30px; }
.sx-brand{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:#16a34a; background:#dcfce7;
  padding:4px 12px; border-radius:20px; margin-bottom:12px;
}
.sx-pinfo h3{ font-size:24px; margin:0 0 5px; color:#0e1b14; }
.sx-price{ font-size:28px; font-weight:800; color:#16a34a; margin-bottom:5px; }
.sx-tag{ color:#16a34a; font-weight:600; font-size:13.5px; margin:0 0 14px; }
.sx-desc{ color:#555; font-size:14px; line-height:1.6; margin:0 0 16px; }
.sx-specs{ list-style:none; padding:0; margin:0 0 20px; }
.sx-specs li{ position:relative; padding:6px 0 6px 24px; color:#333; font-size:13.5px; border-bottom:1px solid #f0f0f0; }
.sx-specs li:before{ content:"▸"; position:absolute; left:2px; color:#4ade80; font-weight:700; }
.sx-note{ font-size:12px; color:#9aa0a6; margin:12px 0 0; text-align:center; }

/* ---------- Header (checkout / pago / éxito) ---------- */
.sx-head{ background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; padding:13px 24px; }
.sx-head h3{ margin:0; font-size:17px; color:#fff; line-height:1.25; }
.sx-head p{ margin:2px 0 0; font-size:12.5px; color:#dcfce7; }

/* ---------- Formularios ---------- */
.sx-form{ padding:18px 24px 22px; }
.sx-label{ display:block; font-size:12px; font-weight:600; color:#374151; margin:8px 0 4px; }
.sx-form .sx-label:first-child{ margin-top:0; }
.sx-input{
  width:100%; padding:8px 13px; font-size:14px; line-height:1.35; color:#111;
  border:1.5px solid #e2e6ea; border-radius:9px; background:#fff;
  transition:border-color .2s, box-shadow .2s; font-family:inherit;
}
.sx-input:focus{ outline:none; border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); }
textarea.sx-input{ resize:vertical; min-height:42px; line-height:1.4; }
.sx-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Stepper de cantidad */
.sx-qty{ display:flex; align-items:center; gap:0; max-width:146px; }
.sx-qty button{
  width:42px; height:42px; border:1.5px solid #e2e6ea; background:#f8fafc;
  font-size:19px; color:#16a34a; cursor:pointer; transition:.15s; line-height:1;
}
.sx-qty button:hover{ background:#dcfce7; }
.sx-qty button:first-child{ border-radius:9px 0 0 9px; }
.sx-qty button:last-child{ border-radius:0 9px 9px 0; }
.sx-qty input{
  width:58px; height:42px; text-align:center; font-size:16px; font-weight:700;
  border:1.5px solid #e2e6ea; border-left:none; border-right:none; color:#111;
  -moz-appearance:textfield;
}
.sx-qty input::-webkit-outer-spin-button,
.sx-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Totales */
.sx-total{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; padding-top:11px; border-top:2px dashed #e5e7eb;
}
.sx-total span{ font-size:15px; color:#374151; font-weight:600; }
.sx-total b{ font-size:23px; color:#16a34a; }
.sx-paytotal{
  background:#04210f; color:#fff; border-radius:10px; padding:13px 18px;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;
}
.sx-paytotal span{ font-size:14px; }
.sx-paytotal b{ font-size:22px; color:#4ade80; }

/* Botones */
.sx-btn{
  display:block; width:100%; border:none; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:700; padding:13px; border-radius:10px;
  margin-top:14px; transition:.2s; text-align:center;
}
.sx-btn-buy{ background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; box-shadow:0 8px 20px rgba(22,163,74,.28); }
.sx-btn-buy:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(22,163,74,.36); }
.sx-btn-buy:disabled{ opacity:.7; cursor:wait; transform:none; }
.sx-btn-ghost{ background:transparent; color:#6b7280; box-shadow:none; padding:8px; margin-top:6px; }
.sx-btn-ghost:hover{ color:#16a34a; }

/* Errores y avisos */
.sx-err{ color:#dc2626; font-size:13px; font-weight:600; margin-top:12px; min-height:0; }
.sx-err:empty{ margin-top:0; }
.sx-secure{ text-align:center; font-size:12px; color:#9aa0a6; margin:12px 0 0; }

/* ---------- Paso final: éxito ---------- */
.sx-success{ text-align:center; padding:40px 32px; }
.sx-check{
  width:74px; height:74px; margin:0 auto 18px; border-radius:50%;
  background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff;
  font-size:38px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(22,163,74,.35); animation:sxPop .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes sxPop{ from{transform:scale(0);} to{transform:scale(1);} }
.sx-success h3{ font-size:22px; color:#0e1b14; margin:0 0 9px; }
.sx-success p{ color:#555; font-size:14px; line-height:1.55; margin:0 auto; max-width:330px; }

/* Spinner */
.sx-spin{
  display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-right:8px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:sxRot .7s linear infinite;
}
@keyframes sxRot{ to{ transform:rotate(360deg); } }

/* ---------- Responsive (teléfonos) ---------- */
@media (max-width:680px){
  .sx-overlay{ padding:8px 8px; }
  .sx-product{ grid-template-columns:1fr; }
  .sx-pimg{ min-height:180px; padding:18px; }
  .sx-pimg img{ max-height:165px; }
  .sx-pinfo{ padding:20px 20px; }
  .sx-pinfo h3{ font-size:22px; }
  .sx-price{ font-size:26px; }
  .sx-head{ padding:13px 18px; }
  .sx-head h3{ font-size:17px; }
  .sx-form{ padding:14px 16px 16px; }
  .sx-label{ margin:6px 0 3px; }
  .sx-success{ padding:30px 20px; }
}