@charset "UTF-8";
/* ============================================================================
   ecommerce2-beta.css
   Estilos ESPECÍFICOS de t-ecommerce2-beta.php (checkout sin registro).
   Se enlaza SOLO en esta página -> no afecta al resto del sitio.
   Todo va prefijado con #ecommerce2 (y con #ecommerce2 #formOK cuando el
   elemento vive dentro del formulario) para ganar en especificidad a las
   reglas globales de style.css, p.ej. "#ecommerce2 input { width:63% }".
   ============================================================================ */

:root{
  --oro:#d19c28;
  --oro-h:#b1821c;
  --negro:#22241a;
  --rojo:#d14028;
  --verde:#79c159;
  --verde-bg:#f3ffee;
}

/* ----------------------------------------------------------------------------
   Caja de totales al 100% (en style.css es width:42% float:right en escritorio).
   Mismo selector que el global -> al cargarse este CSS después, gana en el empate.
   ---------------------------------------------------------------------------- */
#ecommerce2 #div_total{
  width:100%;
  float:none;
}

/* ----------------------------------------------------------------------------
   Bloque "¿Cómo quieres continuar?"  (está fuera del <form>)
   ---------------------------------------------------------------------------- */
#ecommerce2 .continuar{
  margin:45px 0 0;
  padding:26px 28px;
  background:#fcfcfc;
  border:1px solid #e6e6e6;
  border-radius:4px;
}
#ecommerce2 .continuar h3{ margin-bottom:18px; }

#ecommerce2 .opt{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
  padding:14px 16px;
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius:4px;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
#ecommerce2 .opt:last-child{ margin-bottom:0; }

/* override del global #ecommerce2 input{width:63%} para el radio */
#ecommerce2 .opt input[type="radio"]{
  width:18px; height:18px;
  margin:3px 0 0; padding:0;
  flex:0 0 auto;
  background:none;
  accent-color:var(--oro);
  cursor:pointer;
}
#ecommerce2 .opt .txt{ flex:1; }
#ecommerce2 .opt .txt strong{
  display:block;
  font-size:1.7rem; font-weight:600;
  color:var(--negro);
}
#ecommerce2 .opt .txt small{
  display:block;
  font-size:1.3rem; line-height:1.4;
  color:#888;
}
#ecommerce2 .opt.sel{
  border-color:var(--oro);
  box-shadow:inset 0 0 0 1px var(--oro);
}
#ecommerce2 .opt .badge{
  margin-left:auto;
  align-self:center;
  padding:3px 12px;
  font-size:1.2rem; font-weight:600;
  color:var(--oro);
  border:1px solid var(--oro);
  border-radius:20px;
  white-space:nowrap;
}

/* ----------------------------------------------------------------------------
   Checkbox "Quiero añadir mis datos de facturación"  (vive dentro de #formOK)
   ---------------------------------------------------------------------------- */
#ecommerce2 #formOK .facturacion-toggle{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:50px 0 18px;
  padding:14px 16px;
  background:#fafafa;
  border:1px solid #ececec;
  border-radius:4px;
}
/* override de #ecommerce2 #formOK input{width:63%} para el checkbox */
#ecommerce2 #formOK .facturacion-toggle input[type="checkbox"]{
  width:18px; height:18px;
  margin:2px 0 0; padding:0;
  flex:0 0 auto;
  background:none;
  accent-color:var(--oro);
  cursor:pointer;
}
/* override de #ecommerce2 #formOK label{width:35%} para esta label */
#ecommerce2 #formOK .facturacion-toggle label{
  width:auto; margin:0;
  font-weight:500;
  cursor:pointer;
}
#ecommerce2 #formOK .facturacion-toggle label small{
  display:block;
  font-size:1.3rem; font-weight:400;
  color:#999;
}

/* utilidad para ocultar el bloque de facturación */
#ecommerce2 .hidden{ display:none !important; }

/* ----------------------------------------------------------------------------
   Modal de login · Iniciar sesión / Registro  (está fuera del <form>, a nivel de body)
   ---------------------------------------------------------------------------- */
#ecommerce2 .eco-modal-bg{
  position:fixed; inset:0;
  display:flex;
  align-items:flex-start; justify-content:center;
  padding:40px 16px;
  background:rgba(0,0,0,.55);
  overflow-y:auto;
  z-index:1000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
#ecommerce2 .eco-modal-bg.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .25s ease;
}
#ecommerce2 .eco-modal{
  position:relative;
  width:100%; max-width:920px;
  padding:38px 40px 44px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  opacity:0; transform:translateY(-10px);
  transition:opacity .25s ease, transform .25s ease;
}
#ecommerce2 .eco-modal-bg.is-open .eco-modal{
  opacity:1; transform:translateY(0);
}
#ecommerce2 .eco-modal .eco-modal-close{
  position:absolute; top:14px; right:18px;
  font-size:2.6rem; line-height:1;
  color:#999; background:none; border:0;
  cursor:pointer;
}
#ecommerce2 .eco-modal .eco-modal-close:hover{ color:var(--negro); }
#ecommerce2 .eco-modal-cols{ display:flex; gap:5%; flex-wrap:wrap; }
#ecommerce2 .eco-modal .login-col{ width:42%; min-width:280px; }
#ecommerce2 .eco-modal .reg-col{
  flex:1; min-width:300px;
  padding-left:5%;
  border-left:1px solid #eee;
}
#ecommerce2 .eco-modal h3{ margin-bottom:6px; color:var(--oro); }
#ecommerce2 .eco-modal .sub{ margin:0 0 16px; font-size:1.4rem; color:#777; }
#ecommerce2 .eco-modal .incorrecto{ display:block; margin:0 0 12px; font-size:1.3rem; color:var(--rojo); }
#ecommerce2 .eco-modal .campo{ display:block; margin-bottom:10px; }
#ecommerce2 .eco-modal .campo label{ display:block; width:100%; margin-bottom:4px; font-weight:500; }
/* override de #ecommerce2 input{width:63%} para los inputs del modal */
#ecommerce2 .eco-modal .campo input{
  width:100%;
  padding:7px 9px;
  background:#fff;
  border:1px solid #cfcfcf;
}
/* Validación: clases error/success visibles dentro del modal (ganan al borde gris de arriba) */
#ecommerce2 .eco-modal .campo input.error{ border-color:var(--rojo); }
#ecommerce2 .eco-modal .campo input.success{ border-color:var(--verde); }
#ecommerce2 .eco-modal .missat{ display:block; }
#ecommerce2 .eco-modal .missatgi{ display:block; margin-top:3px; font-size:1.2rem; color:var(--rojo); }
#ecommerce2 .eco-modal #aceptar_reg{ display:block; font-size:1.3rem; color:var(--rojo); }
#ecommerce2 .eco-modal .olvido{ display:inline-block; margin:4px 0 0; font-size:1.3rem; }
#ecommerce2 .eco-modal .condiciones{
  height:90px; margin:12px 0; padding:8px;
  font-size:1.2rem; color:#b5b8b9;
  border:1px solid #c5c7c8;
  overflow:auto;
}
#ecommerce2 .eco-modal .acepto{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:1.3rem; }
#ecommerce2 .eco-modal .acepto input{ width:auto; }
#ecommerce2 .eco-modal .recaptcha-ph{
  display:inline-block; margin:10px 0; padding:8px 10px;
  font-size:1.2rem; color:#aaa;
  border:1px dashed #ccc; border-radius:3px;
}
#ecommerce2 .eco-modal .boton{
  display:block;
  width:200px; margin:18px 0 0; padding:11px 15px;
  font-size:1.7rem; font-weight:600; text-align:center;
  color:#fff; background:var(--oro);
  border:0; cursor:pointer;
}
#ecommerce2 .eco-modal .boton:hover{ background:var(--oro-h); }
#ecommerce2 .eco-modal .boton:disabled{ opacity:.6; cursor:default; }

@media (max-width:680px){
  #ecommerce2 .eco-modal{ padding:34px 22px 34px; }
  #ecommerce2 .eco-modal .login-col,
  #ecommerce2 .eco-modal .reg-col{ width:100%; }
  #ecommerce2 .eco-modal .reg-col{
    margin-top:8px; padding:24px 0 0;
    border-left:0; border-top:1px solid #eee;
  }
}