/*
 * Formulario de personalización.
 *
 * Usa los tokens del tema Amoriva; si el plugin acabara en otro sitio, los
 * valores de reserva mantienen el aspecto sin depender de él.
 */

/* Sin esto, `width:100%` en un campo le SUMA el relleno por encima y se sale de
   la caja: 216 px de ancho útil + 34 de relleno = 250, que es justo lo que se
   desbordaba en un móvil de 320 px. El tema no lo impone para los controles de
   formulario, así que se impone aquí. */
.amoriva-personalizador,
.amoriva-personalizador *,
.amoriva-personalizador *::before,
.amoriva-personalizador *::after {
  box-sizing: border-box;
}

.amoriva-personalizador {
  --am-chocolate: var(--wp--preset--color--chocolate, #2F2926);
  --am-marfil: var(--wp--preset--color--marfil, #FBF8F4);
  --am-beige: var(--wp--preset--color--beige, #F2EBE3);
  --am-rosa: var(--wp--preset--color--rosa, #B8897A);
  --am-terracota: var(--wp--preset--color--terracota, #8F6256);
  --am-tinta: var(--wp--preset--color--tinta, #302A27);
  --am-topo: var(--wp--preset--color--topo, #756B64);
  --am-serif: var(--wp--preset--font-family--editorial, ui-serif, Georgia, serif);

  margin: 0 0 2rem;
  padding: clamp(20px, 5vw, 32px);
  background: var(--am-beige);
  border-radius: 12px;
  color: var(--am-tinta);
}

.amoriva-personalizador h3 {
  font-family: var(--am-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem);
  line-height: 1.15;
  margin: 0 0 .4rem;
}

.amoriva-ayuda {
  color: var(--am-topo);
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
}

/* ---------- Pasos ---------- */
.amoriva-pasos {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  counter-reset: paso;
}
.amoriva-paso-punto {
  flex: 1;
  padding-top: 10px;
  border-top: 2px solid #E5DDD5;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--am-topo);
  cursor: default;
  transition: color .3s, border-color .3s;
}
.amoriva-paso-punto.es-hecho { border-top-color: var(--am-rosa); cursor: pointer; }
.amoriva-paso-punto.es-actual { border-top-color: var(--am-terracota); color: var(--am-terracota); }
.amoriva-paso-numero { display: block; font-weight: 600; }
.amoriva-paso-titulo { display: none; }
@media (min-width: 620px) {
  .amoriva-paso-numero { display: inline; margin-right: .4em; }
  .amoriva-paso-titulo { display: inline; }
}

/* ---------- Secciones ---------- */
.amoriva-seccion { display: none; }
.amoriva-seccion.es-activa { display: block; animation: amoriva-entra .35s ease both; }
@keyframes amoriva-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .amoriva-seccion.es-activa { animation: none; }
}

/* ---------- Campos ---------- */
.amoriva-campo {
  display: block;
  margin: 0 0 1.2rem;
  border: 0;
  padding: 0;
}
.amoriva-campo > span,
.amoriva-campo > legend {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: .4rem;
  padding: 0;
}
.amoriva-campo input,
.amoriva-campo textarea,
.amoriva-campo select {
  /* `size` da a los input un ancho intrínseco y, dentro de una rejilla o un
     flex, ese mínimo gana y desborda. min-width:0 lo desactiva. */
  min-width: 0;
  max-width: 100%;
}
.amoriva-campo input[type="text"],
.amoriva-campo input[type="date"],
.amoriva-campo textarea {
  width: 100%;
  padding: .85em 1em;
  border: 1px solid #E5DDD5;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: inherit;
}
.amoriva-campo textarea { resize: vertical; line-height: 1.6; }
.amoriva-campo input:focus,
.amoriva-campo textarea:focus {
  outline: 2px solid var(--am-rosa);
  outline-offset: 1px;
  border-color: var(--am-rosa);
}
.amoriva-campo small {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--am-topo);
}
.amoriva-contador.es-corta { color: var(--am-terracota); }

.amoriva-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.amoriva-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.amoriva-opcion span {
  display: inline-block;
  padding: .6em 1.1em;
  border: 1px solid #E5DDD5;
  border-radius: 999px;
  background: #fff;
  font-size: .85rem;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.amoriva-opcion input:checked + span {
  background: var(--am-terracota);
  border-color: var(--am-terracota);
  color: var(--am-marfil);
}
.amoriva-opcion input:focus-visible + span { outline: 2px solid var(--am-rosa); outline-offset: 2px; }

.amoriva-revelacion > span { color: var(--am-terracota); }

/* ---------- Fotos ---------- */
.amoriva-rejilla-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.amoriva-foto { position: relative; }
.amoriva-soltar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  aspect-ratio: 3 / 4;
  padding: 12px;
  border: 1px dashed #E5DDD5;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s, background .25s;
}
.amoriva-soltar:hover { border-color: var(--am-rosa); background: #fffdfa; }
.amoriva-foto-etiqueta { font-size: .8rem; font-weight: 500; }
.amoriva-foto-pista { font-size: .72rem; color: var(--am-topo); }
.amoriva-soltar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amoriva-foto.es-puesta .amoriva-foto-etiqueta,
.amoriva-foto.es-puesta .amoriva-foto-pista {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.amoriva-foto.es-puesta .amoriva-soltar { border-style: solid; border-color: var(--am-rosa); }
.amoriva-foto.es-subiendo .amoriva-soltar img { opacity: .5; }

.amoriva-progreso {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 3;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .4);
  overflow: hidden;
}
.amoriva-progreso i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--am-rosa);
  animation: amoriva-avanza 1.1s ease-in-out infinite;
}
@keyframes amoriva-avanza {
  from { transform: translateX(-100%); }
  to { transform: translateX(280%); }
}

.amoriva-pie {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 6px;
  padding: .55em .8em;
  border: 1px solid #E5DDD5;
  border-radius: 6px;
  font: inherit;
  font-size: .82rem;
  background: #fff;
}
.amoriva-quitar {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: .4em;
  border: 0;
  background: none;
  color: var(--am-topo);
  font-size: .75rem;
  text-decoration: underline;
  cursor: pointer;
}
.amoriva-quitar:hover { color: var(--am-terracota); }

/* ---------- Repaso ---------- */
.amoriva-repaso {
  border: 1px solid #E5DDD5;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 1.2rem;
}
.amoriva-repaso-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8em 1em;
  border-bottom: 1px solid #F2EBE3;
  font-size: .9rem;
}
.amoriva-repaso-fila:last-child { border-bottom: 0; }
.amoriva-repaso-fila span { color: var(--am-topo); }

/* ---------- Navegación y avisos ---------- */
.amoriva-navegacion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1.6rem;
}
.amoriva-principal,
.amoriva-secundario {
  padding: .95em 2em;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.amoriva-principal { border: 0; background: var(--am-terracota); color: var(--am-marfil); }
.amoriva-principal:hover { background: var(--am-tinta); }
.amoriva-secundario { border: 1px solid #E5DDD5; background: transparent; color: var(--am-tinta); }
.amoriva-secundario:hover { background: #fff; }

.amoriva-guardado {
  font-size: .75rem;
  color: var(--am-topo);
  animation: amoriva-entra .3s ease both;
}

.amoriva-aviso {
  margin: 0 0 1.2rem;
  padding: .8em 1em;
  border-radius: 8px;
  border-left: 3px solid var(--am-rosa);
  background: #fff;
  font-size: .88rem;
}
.amoriva-aviso.es-error { border-left-color: var(--am-terracota); color: var(--am-terracota); }

/* El botón de comprar, apagado mientras el regalo esté a medias. */
form.cart button[type="submit"]:disabled,
form.cart .single_add_to_cart_button.disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- Detalles opcionales ---------- */
.amoriva-bloque {
  padding: 1.1rem 1.2rem;
  border: 1px solid #E5DDD5;
  border-radius: 10px;
  background: #fff;
}
/* El <legend> se pinta sobre el borde del fieldset y, cuando el título parte en
   dos líneas, la segunda cae dentro de la caja y se monta encima. Flotándolo a
   ancho completo pasa a fluir como un bloque normal. */
.amoriva-bloque > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: .8rem;
  font-family: var(--am-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.25;
}
.amoriva-bloque::after { content: ''; display: table; clear: both; }
.amoriva-bloque .amoriva-campo:last-child { margin-bottom: 0; }
.amoriva-bloque input[type="date"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Safari en iOS le pone un ancho intrínseco propio que ignora el 100%. */
  -webkit-appearance: none;
  appearance: none;
  padding: .8em 1em;
  border: 1px solid #E5DDD5;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: inherit;
}

.amoriva-desplegable {
  margin-top: 1.4rem;
  border: 1px solid #E5DDD5;
  border-radius: 10px;
  background: #fff;
}
.amoriva-desplegable > summary {
  padding: 1em 1.2em;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.amoriva-desplegable > summary::-webkit-details-marker { display: none; }
.amoriva-desplegable > summary::after {
  content: '+';
  float: right;
  color: var(--am-terracota);
  font-size: 1.2em;
  line-height: 1;
}
.amoriva-desplegable[open] > summary::after { content: '−'; }
.amoriva-desplegable > *:not(summary) { padding-left: 1.2em; padding-right: 1.2em; }
.amoriva-desplegable > *:last-child { padding-bottom: 1.2em; }

.amoriva-grupo-titulo {
  margin: 1.4rem 0 .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--am-terracota);
}
#amoriva-textos .amoriva-campo { margin-bottom: .8rem; }
#amoriva-textos .amoriva-campo > span { font-size: .75rem; font-weight: 400; color: var(--am-topo); }


/* Última red de seguridad: si algún día entra un elemento ancho (una tabla, un
   bloque de código pegado), que se recorte él y no rompa la página entera. */
.amoriva-personalizador { overflow-x: clip; }
.amoriva-seccion > * { max-width: 100%; }

/* ---------- Entregar el regalo (página de gracias) ---------- */
.amoriva-entregar {
  margin: 0 0 2rem;
  padding: clamp(20px, 5vw, 28px);
  background: var(--wp--preset--color--beige, #F2EBE3);
  border-radius: 12px;
  text-align: center;
}
.amoriva-entregar-titulo {
  margin: 0 0 .3rem;
  font-family: var(--wp--preset--font-family--editorial, ui-serif, Georgia, serif);
  font-size: 1.35rem;
}
.amoriva-entregar-ayuda {
  margin: 0 0 1.2rem;
  font-size: .9rem;
  color: var(--wp--preset--color--topo, #756B64);
}
.amoriva-entregar-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
}
.amoriva-entregar-acciones .button { margin: 0; }