/* =========================
   WC STEP TEST - AISLADO
   ========================= */

/* =========================
   CONTENEDOR GENERAL
   ========================= */
.wcst-root{
  width:100%;
  display:flex;
  justify-content:center;
}

.wcst-wrapper{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:24px 16px;
  text-align:center;
}

/* Aislamiento total contra el theme */
.wcst-root,
.wcst-root *{
  box-sizing:border-box;
}

/* =========================
   HEADER
   ========================= */
.wcst-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
}

.wcst-title{
  font-size:26px;
  font-weight:700;
  margin-bottom:6px;
}

.wcst-subtitle{
  font-size:16px;
  opacity:.7;
}

/* =========================
   OPCIONES (CENTRADO REAL)
   ========================= */
.wcst-options{
  display:flex;
  justify-content:center;
  width:100%;
  margin:18px 0;
}

/* GRID DINÁMICO (no columnas fijas) */
.wcst-options-row{
  display:grid;
  grid-auto-flow:column;        /* columnas según cantidad */
  grid-auto-columns:220px;      /* ancho real de cada tarjeta */
  gap:18px;

  /* CLAVE: el grid se ajusta a su contenido */
  width:max-content;
  max-width:100%;
  margin:0 auto;

  justify-content:center;
  justify-items:center;
  align-items:start;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:900px){
  .wcst-options-row{
    width:100%;
    grid-auto-flow:row;
    grid-template-columns:repeat(2, 220px);
    justify-content:center;
  }
}

@media (max-width:520px){
  .wcst-options-row{
    grid-template-columns:220px;
  }
}

/* =========================
   OPCIONES / TARJETAS
   ========================= */
.wcst-option{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  cursor:pointer;
  text-align:center;
  color:inherit;
}

.wcst-option:focus{
  outline:none;
}

.wcst-option-box{
  width:220px;
  max-width:100%;
  border:2px solid #344EAD !important;
  border-radius:16px;
  padding:14px 10px;
  background:#fff;
  transition:
    transform .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.wcst-option:hover .wcst-option-box{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.wcst-option.is-selected .wcst-option-box{
  border-color:#e1002a;
  box-shadow:0 10px 24px rgba(6,147,227,.1);
  border:3px solid #344EAD !important;
}

.wcst-option-img{
  display:grid;
  place-items:center;
  margin-bottom:10px;
}

.wcst-option-img img{
  max-width:140px;
  width:100%;
  height:auto;
  display:block;
}

.wcst-option-label{
  font-weight:700;
  font-size:16px;
  color:#111;
}

/* =========================
   PROGRESO (DOTS)
   ========================= */
.wcst-progress{
  display:flex;
  justify-content:center;
  margin:10px 0 6px;
}

.wcst-dots{
  display:flex;
  gap:18px;
  padding:14px 0;
}

.wcst-dot{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#8ED1FC !important;
}

.wcst-dot.is-active{
  background:#344EAD !important;
}

.wcst-dot.is-done{
  background:#e1002a;
  opacity:.35;
}

/* =========================
   ACCIONES
   ========================= */
.wcst-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:8px;
}

.wcst-btn{
  border:0;
  border-radius:8px;
  padding:12px 20px;
  font-weight:700;
  cursor:pointer;
  line-height:1;
}

.wcst-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.wcst-btn--primary{
  background:#344EAD !important;
  color:#fff !important;
}


.wcst-btn:hover{
  background:#17375E !important;
  color:#fff !important;
}



.wcst-btn--ghost{
  background:#f1f1f1 !important;
  color:#111 !important;
}

/* =========================
   LOADING
   ========================= */
.wcst-loading{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:18px;
}

.wcst-loading-text{
  font-weight:600;
  opacity:.8;
}

.wcst-typing{
  display:inline-flex;
  gap:6px;
}

.wcst-typing span{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#e1002a;
  opacity:.3;
  animation:wcstTyping 1s infinite ease-in-out;
}

.wcst-typing span:nth-child(2){ animation-delay:.15s; }
.wcst-typing span:nth-child(3){ animation-delay:.30s; }

@keyframes wcstTyping{
  0%,80%,100%{ transform:translateY(0); opacity:.25; }
  40%{ transform:translateY(-4px); opacity:1; }
}

/* =========================
   RESULTADOS
   ========================= */
.wcst-results{
  margin-top:22px;
  text-align:left;
}

.wcst-results-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.wcst-results-link{
  font-weight:800;
  text-decoration:none;
  color:#e1002a;
}

/* Dejar que WooCommerce/theme renderice productos */
.wcst-products ul.products{
  margin:0 !important;
}

/* Estados */
.wcst-empty{
  text-align:center;
  padding:18px;
  border:1px dashed #ccc;
  border-radius:12px;
  opacity:.8;
}

.wcst-error{
  text-align:center;
  padding:18px;
  border:1px dashed #f0b;
  border-radius:12px;
  opacity:.9;
}