/*
 * Cart steps: choose domain (configureproductdomain.tpl), configure (configureproduct.tpl) and domain details
 * (configuredomains.tpl). Layout and styles by the Diseño session (dabbleam/design, piezas/whmcs-cesta/cesta.css,
 * commit 8d2df1a, 30-10-2026); colours come from the palette variables in style.css. The order summary of the mockup
 * is left out: it needs WHMCS's jQuery recalculation, and the cart right after shows the full summary.
 */

/* ---------- integration with the theme (its reset and global element styles) ---------- */
main.cesta { padding-top: 7em; line-height: 1.5; min-height: 0; }
.cesta b, .cesta strong, .cesta h1, .cesta h2 { font-weight: bold; }
.cesta h1 { max-width: none; }
.cesta h2 { text-align: left; }
/* "hidden" must win over the grid and flex displays of the components */
.cesta [hidden] { display: none !important; }
/* buttons that are links keep their white text over the theme's link colours */
.cesta a.cesta-boton, .cesta a.cesta-boton:visited, .cesta a.cesta-boton:hover { color: #fff; text-decoration: none; }
/* the theme gives every <section> a centred flex column with a -20vh/20vh anchor offset */
:where(.cesta) section { display: block; padding-top: 0; margin-top: 0; } /* no specificity: .cesta-seccion keeps its padding */
/* the theme's labels are 2em blocks, and its inputs full-width with a 2em bottom margin */
:where(.cesta) label { font-size: inherit; margin-bottom: 0; line-height: inherit; }
:where(.cesta) input, :where(.cesta) select { margin: 0; }
.cesta-opcion input, .cesta-interruptor input, .cesta-tab { width: 1px; height: 1px; padding: 0; }
.cesta-error { margin: 0 0 1.2em; padding: .9em 1.1em; border-radius: .45em; background: #fdecee; color: #8a1c24; line-height: 1.5; }
.cesta-error ul { margin: .4em 0 0 1.2em; }
.cesta-error li { list-style: disc; margin: 0; }
/* a single error reads as a sentence, without the bullet; two or more stay a list */
.cesta-error ul:has(> li:only-child) { margin-left: 0; }
.cesta-error li:only-child { list-style: none; }

/* ---------- marco común de los pasos ---------- */
.cesta { --tinta: #0b2a40; --gris: #5f6b78; --linea: #e3eef6; --fondo: #f3f9fe; --borde: #b9c7d3;
  max-width: 1024px; margin: 0 auto; padding: 2.2em 1.25em 4em; }
.cesta-cabecera { text-align: center; margin-bottom: 2em; }
.cesta-cabecera h1 { font-size: 2.1em; line-height: 1.15; color: var(--tinta); margin: 0 0 .35em; }
.cesta-cabecera p { margin: 0; color: var(--gris); font-size: 1em; line-height: 1.5; }
.cesta-cabecera p b { color: var(--tinta); }

/* pasos: los que hay en este pedido (sin "Datos del dominio" si no hacen falta). Hecho = visto; actual = relleno */
.cesta-pasos { display: flex; justify-content: center; gap: 0; list-style: none; padding: 0; margin: 0 auto 1.8em; max-width: 640px; counter-reset: paso; }
.cesta-pasos li { flex: 1 1 0; position: relative; text-align: center; font-size: .82em; color: var(--gris); counter-increment: paso; }
.cesta-pasos li::before { content: counter(paso); display: block; width: 2em; height: 2em; line-height: 2.05em; margin: 0 auto .45em; border-radius: 50%;
  border: 2px solid var(--borde); background: #fff; color: var(--gris); font-weight: bold; position: relative; z-index: 1; box-sizing: border-box; }
.cesta-pasos li + li::after { content: ""; position: absolute; top: 1em; right: 50%; width: 100%; height: 2px; background: var(--borde); }
.cesta-pasos li.hecho { color: var(--tinta); }
.cesta-pasos li.hecho::before { content: "✓"; border-color: var(--primary-color); color: var(--primary-color); }
.cesta-pasos li.hecho::after, .cesta-pasos li.actual::after { background: var(--primary-color); }
.cesta-pasos li.actual { color: var(--tinta); font-weight: bold; }
.cesta-pasos li.actual::before { border-color: transparent; background: var(--brand-gradient); color: #fff; }

.cesta-estrecha { max-width: 580px; margin: 0 auto; }
.cesta-estrecha.ancha { max-width: 680px; }

/* tarjeta: la de .tienda-plan, sin cabecera de color (el título ya está en la página) */
.cesta-tarjeta { background: #fff; border-radius: .6em; box-shadow: 0 2px 12px rgba(0, 60, 110, .14); }
.cesta-seccion { padding: 1.5em 1.6em; }
.cesta-seccion + .cesta-seccion { border-top: 1px solid var(--linea); }
.cesta-seccion > h2 { font-size: 1.2em; color: var(--tinta); margin: 0 0 .3em; }
.cesta-seccion > .nota { margin: 0 0 1.1em; color: var(--gris); font-size: .92em; line-height: 1.5; }

/* barra de acciones: siempre al pie de la tarjeta, separada de los campos por una línea; volver a la izquierda,
   continuar a la derecha. En el móvil, continuar arriba y a todo el ancho */
.cesta-acciones { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.1em 1.6em; border-top: 1px solid var(--linea);
  background: var(--fondo); border-radius: 0 0 .6em .6em; }
.cesta-volver { font-size: .95em; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: -10px 0; } /* finger-sized, same place */
.cesta-volver::before { content: "← "; white-space: pre; } /* inline-flex would drop the space */
/* Objectivity draws capitals .1em over the middle of the line: the text of the buttons goes lower, taken
   from the bottom padding (or from the free room of a 48 px button) so the height stays (Jesús, 03-11-2026) */
.cesta-boton { display: inline-flex; align-items: center; gap: .5em; border: 0; cursor: pointer; font: inherit; font-weight: bold; font-size: 1.1em; line-height: 1.2;
  padding: calc(.75em + 1px) 1.6em calc(.7em - 1px); border-radius: .45em; background: var(--brand-gradient); color: #fff; text-shadow: 0 1px .4px rgba(0,0,0,.35);
  box-shadow: 0 2px 6px rgba(0, 60, 110, .25); text-decoration: none; }
.cesta-boton::after { content: "→"; }
.cesta-boton:hover { background: var(--secondary-color); }
.cesta-boton:focus-visible, .cesta-volver:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.cesta-ayuda { text-align: center; font-size: .88em; color: var(--gris); margin: 1.4em 0 0; }

/* campos: 48 px de alto, borde #6b8ca6 (3,5:1) y el anillo de foco de la guía */
.cesta-campo { display: flex; flex-direction: column; gap: .4em; }
.cesta-campo > label { font-weight: bold; font-size: .9em; color: var(--tinta); }
.cesta-campo > small { color: var(--gris); font-size: .82em; line-height: 1.4; }
/* a field help that is a condition (the review's "has to be an address of your web"): ink and normal size, never fine print */
.cesta-campo > small.condicion { color: var(--tinta); font-size: 1em; }
.cesta input[type=text], .cesta select { box-sizing: border-box; width: 100%; height: 48px; padding: 0 .9em; font: inherit; font-size: 1em; color: var(--tinta);
  border: 1px solid #6b8ca6; border-radius: .45em; background: #fff; }
.cesta select { appearance: none; padding-right: 2.2em;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23006bae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9em center / .75em no-repeat; }
.cesta input[type=text]:focus, .cesta select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring); }
.cesta input::placeholder { color: #8796a3; }
.cesta-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em 1.2em; }
.cesta-rejilla .ancho { grid-column: 1 / -1; }

/* ---------- 1. elegir dominio ---------- */
.cesta-pestanas { display: flex; border-bottom: 1px solid var(--linea); }
.cesta-pestanas label { flex: 1 1 0; text-align: center; padding: 1em .5em .85em; font-size: .9em; font-weight: bold; line-height: 1.3; color: var(--gris); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px; }
.cesta-pestanas label:first-child { border-top-left-radius: .6em; } .cesta-pestanas label:last-child { border-top-right-radius: .6em; }
.cesta-pestanas label:hover { color: var(--link-color); background: var(--fondo); }
.cesta-pestanas svg { display: block; width: 1.4em; height: 1.4em; margin: 0 auto .4em; }
.cesta-tab { position: absolute; opacity: 0; pointer-events: none; }
.cesta-panel { display: none; }
#dt-register:checked ~ .cesta-paneles .p-register, #dt-own:checked ~ .cesta-paneles .p-own, #dt-transfer:checked ~ .cesta-paneles .p-transfer, #dt-incart:checked ~ .cesta-paneles .p-incart, #dt-sub:checked ~ .cesta-paneles .p-sub { display: block; }
#dt-register:checked ~ .cesta-pestanas [for=dt-register], #dt-own:checked ~ .cesta-pestanas [for=dt-own], #dt-transfer:checked ~ .cesta-pestanas [for=dt-transfer], #dt-incart:checked ~ .cesta-pestanas [for=dt-incart], #dt-sub:checked ~ .cesta-pestanas [for=dt-sub] {
  color: var(--link-color); border-bottom-color: var(--primary-color); }
#dt-register:focus-visible ~ .cesta-pestanas [for=dt-register], #dt-own:focus-visible ~ .cesta-pestanas [for=dt-own], #dt-transfer:focus-visible ~ .cesta-pestanas [for=dt-transfer], #dt-incart:focus-visible ~ .cesta-pestanas [for=dt-incart], #dt-sub:focus-visible ~ .cesta-pestanas [for=dt-sub] {
  box-shadow: inset 0 0 0 3px var(--focus-ring); }
.cesta-panel .cesta-seccion > p { margin: 0 0 1.2em; line-height: 1.55; }
/* el nombre y la extensión, unidos en un solo campo */
.cesta-dominio { display: flex; border: 1px solid #6b8ca6; border-radius: .45em; background: #fff; }
.cesta-dominio:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring); }
.cesta .cesta-dominio input[type=text], .cesta .cesta-dominio select { border: 0; box-shadow: none !important; height: 50px; font-size: 1.1em; }
.cesta .cesta-dominio input[type=text] { flex: 1 1 auto; min-width: 0; border-radius: .45em 0 0 .45em; }
.cesta .cesta-dominio select { flex: 0 0 6.5em; width: 6.5em; border-left: 1px solid var(--linea); border-radius: 0 .45em .45em 0; font-weight: bold; color: var(--dark-primary-color); background-color: var(--fondo); }
.cesta-dominio + small { display: block; margin-top: .55em; color: var(--gris); font-size: .82em; }

/* ---------- 2. configurar: forma de pago y complementos, como tarjetas que se eligen ---------- */
.cesta-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.cesta-opcion { position: relative; display: block; cursor: pointer; border: 2px solid var(--linea); border-radius: .6em; padding: 1.1em 1.2em 1em; background: #fff;
  transition: border-color .15s, background .15s; }
.cesta-opcion:hover { border-color: var(--borde); }
.cesta-opcion input { position: absolute; opacity: 0; }
.cesta-opcion:has(input:checked) { border-color: var(--primary-color); background: var(--fondo); }
.cesta-opcion:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring); }
/* la marca de la esquina: aro vacío o visto */
.cesta-opcion .marca { position: absolute; top: 1em; right: 1em; width: 1.35em; height: 1.35em; border-radius: 50%; border: 2px solid var(--borde); box-sizing: border-box; }
.cesta-opcion:has(input:checked) .marca { border: 0; background: var(--brand-gradient); }
.cesta-opcion:has(input:checked) .marca::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: .8em; font-weight: bold; text-align: center; line-height: 1.7em; }
.cesta-opcion .nombre { display: block; font-weight: bold; color: var(--tinta); margin-bottom: .5em; padding-right: 1.6em; } /* clear of the round mark */
.cesta-opcion .precio { font-size: 1.9em; font-weight: bold; color: var(--dark-primary-color); line-height: 1; }
.cesta-opcion .ciclo { color: var(--gris); font-size: .9em; }
.cesta-opcion .extra { display: block; margin-top: .55em; font-size: .85em; color: var(--tinta); }
.cesta-opcion .extra b { color: #1d7a45; }
/* complemento: título, frase, lo que incluye y el precio a la derecha */
.cesta-complemento { display: grid; grid-template-columns: 1fr auto; gap: .2em 1.5em; padding-right: 3em; }
.cesta-complemento .nombre { margin-bottom: .2em; font-size: 1.1em; }
.cesta-complemento .frase { grid-column: 1; display: block; color: #4a5866; font-size: .92em; }
.cesta-complemento .cuanto { grid-column: 2; grid-row: 1 / span 2; text-align: right; align-self: start; }
.cesta-complemento .cuanto .precio { font-size: 1.5em; }
.cesta-complemento .lista { grid-column: 1 / -1; list-style: none; margin: .8em 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .35em 1.2em; font-size: .88em; color: #4a5866; }
.cesta-complemento .lista > span { padding-left: 1.3em; position: relative; line-height: 1.4; }
.cesta-complemento .lista > span::before { content: "✓"; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }
/* a condition in an add-on card (the Plan Tranquilidad next to the Proactivo): ink and normal size, never fine print */
.cesta-complemento .condicion { grid-column: 1 / -1; display: block; margin-top: .9em; color: var(--tinta); line-height: 1.5; }
.cesta-linea .condicion { grid-column: 1 / -1; color: var(--tinta); line-height: 1.5; } /* the same, as a line of the cart */
.cesta-complemento .condicion a, .cesta-linea .condicion a { text-decoration: underline; } /* inside a sentence: not by colour alone */

/* options of the plan (not in the mockup): one group per option, cards in as many columns as fit */
.cesta-grupo + .cesta-grupo { margin-top: 1.2em; }
.cesta-grupo > h3 { font-size: .95em; font-weight: bold; color: var(--tinta); margin: 0 0 .6em; }
.cesta-opciones.auto { grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); }
.cesta-opciones.auto .cesta-opcion .nombre { margin-bottom: .2em; padding-right: 1.6em; }
.cesta-opcion .extra:empty { display: none; }
/* quantity: - and + buttons of 48 px around the number (easier to tap on a phone), the unit price beside */
.cesta-cantidad { display: flex; align-items: center; gap: 0; color: var(--gris); }
.cesta-cantidad button { width: 48px; height: 48px; border: 1px solid #6b8ca6; background: var(--fondo); color: var(--dark-primary-color);
  font: inherit; font-size: 1.3em; font-weight: bold; cursor: pointer; padding: 0; }
.cesta-cantidad button:first-child { border-radius: .45em 0 0 .45em; border-right: 0; }
.cesta-cantidad button:nth-child(3) { border-radius: 0 .45em .45em 0; border-left: 0; }
.cesta-cantidad button:hover { background: var(--linea); }
.cesta-cantidad button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); position: relative; }
.cesta input[type=number] { box-sizing: border-box; width: 4em; height: 48px; padding: 0 .4em; font: inherit; font-size: 1.05em; color: var(--tinta);
  text-align: center; border: 1px solid #6b8ca6; border-radius: 0; background: #fff; appearance: textfield; -moz-appearance: textfield; }
.cesta input[type=number]::-webkit-inner-spin-button, .cesta input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cesta input[type=number]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring); position: relative; }
.cesta-cantidad .unidad { margin-left: .9em; font-size: .95em; }
/* option prices: as visible as the payment-cycle extras */
.cesta-opciones.auto .cesta-opcion .extra, .cesta-sino .extra { font-size: .92em; color: var(--dark-primary-color); font-weight: bold; }
.cesta-pestanas i { display: block; font-size: 1.3em; margin: 0 auto .4em; }

.cesta-precio-unico { margin: 0; }
.cesta-precio-unico .precio { font-size: 1.9em; font-weight: bold; color: var(--dark-primary-color); line-height: 1; }
.cesta-precio-unico .ciclo { color: var(--gris); font-size: .9em; }

/* ---------- 3. datos del dominio ---------- */
/* WHMCS writes the registry field's help as plain text after the input: grey and small like the other helps */
.cesta-rejilla .cesta-campo { color: var(--gris); font-size: .88em; line-height: 1.4; }
.cesta-rejilla .cesta-campo > label { font-size: 1.02em; }
.cesta .cesta-rejilla input[type=text], .cesta .cesta-rejilla select { font-size: 1.14em; }
.cesta-dominio-nombre { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.cesta-dominio-nombre h2 { font-size: 1.35em; margin: 0; color: var(--tinta); word-break: break-all; }
.cesta-chip { display: inline-block; font-size: .78em; padding: .3em .7em .25em; border-radius: 1em; background: var(--fondo); color: var(--dark-primary-color); font-weight: bold; }
.cesta-interruptor { display: flex; align-items: flex-start; gap: .9em; cursor: pointer; }
.cesta-interruptor input { position: absolute; opacity: 0; }
.cesta-interruptor .boton { flex: none; width: 2.9em; height: 1.6em; border-radius: .8em; background: #b9c7d3; position: relative; transition: background .2s; margin-top: .1em; }
.cesta-interruptor .boton::after { content: ""; position: absolute; top: .2em; left: .2em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.cesta-interruptor input:checked + .boton { background: var(--primary-color); }
.cesta-interruptor input:checked + .boton::after { transform: translateX(1.3em); }
.cesta-interruptor input:focus-visible + .boton { box-shadow: 0 0 0 3px var(--focus-ring); }
.cesta-interruptor b { color: var(--tinta); } .cesta-interruptor small { display: block; color: var(--gris); font-size: .88em; margin-top: .2em; line-height: 1.45; }
.cesta-gratis { color: #1d7a45; font-size: .85em; font-weight: bold; margin-left: .4em; }

/* ---------- 4. revisar y pagar (viewcart.tpl y checkout.tpl): una sola columna de 680 px, como los pasos 2 y 3 ---------- */
.cesta-media { max-width: 680px; margin: 0 auto; }
.cesta-seccion > .cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .6em; }
.cesta-seccion > .cabeza h2 { font-size: 1.2em; color: var(--tinta); margin: 0; }
.cesta-enlace { background: none; border: 0; padding: 0; font: inherit; font-size: .88em; color: var(--link-color); cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
.cesta-enlace:hover { color: var(--link-hover-color); }
.cesta-enlace:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: .2em; }
.cesta-enlace.gris { color: var(--gris); }
/* líneas del pedido: nombre y detalle a la izquierda, precio a la derecha, y debajo "Cambiar" y "Quitar" en texto */
.cesta-lineas { list-style: none; margin: 0; padding: 0; }
.cesta-linea { display: grid; grid-template-columns: 1fr auto; gap: .15em 1.5em; padding: 1em 0; border-top: 1px solid var(--linea); }
.cesta-linea:first-child { border-top: 0; padding-top: .3em; }
.cesta-linea .que { font-weight: bold; color: var(--tinta); }
.cesta-linea .detalle { grid-column: 1; color: var(--gris); font-size: .88em; line-height: 1.5; }
.cesta-linea .cuanto { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; }
.cesta-linea .cuanto b { display: block; font-size: 1.15em; color: var(--tinta); }
.cesta-linea .cuanto small { color: var(--gris); font-size: .82em; }
.cesta-linea .cuanto b.incluido { color: #1d7a45; }
.cesta-linea .acciones { grid-column: 1 / -1; display: flex; gap: 1.2em; margin-top: .35em; }
.cesta-linea.hija { padding-left: 1.2em; border-top-style: dashed; }
/* código de promoción, plegado */
.cesta-codigo summary { cursor: pointer; list-style: none; color: var(--link-color); font-size: .95em; display: inline-block; }
.cesta-codigo summary::-webkit-details-marker { display: none; }
.cesta-codigo summary::after { content: " +"; font-weight: bold; }
.cesta-codigo[open] summary::after { content: " −"; }
.cesta-codigo summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: .2em; }
.cesta-codigo .fila { display: flex; gap: .6em; margin-top: .9em; }
.cesta-codigo .fila input { flex: 1 1 auto; min-width: 0; }
.cesta-boton-sec { flex: none; height: 48px; padding: 4px 1.3em 0; font: inherit; font-weight: bold; border-radius: .45em; border: 2px solid var(--link-color); background: #fff; color: var(--link-color); cursor: pointer; }
.cesta-boton-sec:hover { background: var(--fondo); }
.cesta-boton-sec:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* totales: base e IVA pequeños, el total grande; debajo, lo que se pagará cada mes o cada año */
.cesta-totales { margin: 0; font-size: .95em; }
.cesta-totales > div { display: flex; justify-content: space-between; gap: 1em; padding: .3em 0; }
.cesta-totales dt { color: #4a5866; } .cesta-totales dd { margin: 0; color: var(--tinta); white-space: nowrap; }
.cesta-totales .total { margin-top: .5em; padding-top: .8em; border-top: 2px solid var(--linea); align-items: baseline; }
.cesta-totales .total dt { color: var(--tinta); font-weight: bold; font-size: 1.05em; }
.cesta-totales .total dd { font-size: 1.9em; font-weight: bold; color: var(--dark-primary-color); }
/* what the client commits to goes in ink and at normal size: no fine print (owner, 30-10-2026) */
.cesta-suscripcion { margin: .9em 0 0; padding: .8em 1em; border-radius: .45em; background: var(--fondo); font-size: 1em; color: var(--tinta); line-height: 1.55; }
.cesta-linea .detalle .renueva { color: var(--tinta); font-size: 1rem; }
.cesta-seccion > .cesta-suscripcion { margin: 0 0 1em; }
.cesta-suscripcion b { color: var(--tinta); }
.cesta-boton.pagar::after { content: none; }
.cesta-boton.pagar::before { content: ""; width: .95em; height: .95em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* finalizar pedido: entrar o datos nuevos, y casilla de condiciones */
.cesta-aviso { margin: 0 0 1.1em; padding: .75em 1em; border-radius: .45em; background: var(--fondo); font-size: .92em; }
.cesta-casilla { display: flex; gap: .8em; align-items: flex-start; cursor: pointer; line-height: 1.5; font-size: .95em; }
.cesta-casilla input { width: 1.25em; height: 1.25em; margin: 0; accent-color: var(--primary-color); flex: none; }

/* integration: the theme's "main ul li" (disc bullets, margins) and its unstyled e-mail/phone/password inputs */
.cesta-linea { list-style: none; margin: 0; }
.cesta input[type=email], .cesta input[type=tel], .cesta input[type=password] { box-sizing: border-box; width: 100%; height: 48px; padding: 0 .9em;
  font: inherit; font-size: 1em; color: var(--tinta); border: 1px solid #6b8ca6; border-radius: .45em; background: #fff; }
.cesta input[type=email]:focus, .cesta input[type=tel]:focus, .cesta input[type=password]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring); }
.cesta-campo .opcional { font-weight: normal; color: var(--gris); }
.cesta-ok { margin: 0 0 1.2em; padding: .9em 1.1em; border-radius: .45em; background: #e8f5ee; color: #1d5e3a; line-height: 1.5; }
.cesta-linea .cuanto small { display: block; }
.cesta-cuantos { display: inline-flex; align-items: center; gap: .5em; font-size: .88em; color: var(--gris); }
.cesta .cesta-cuantos input[type=number] { width: 4.5em; height: 36px; border-radius: .45em; }
.cesta-codigo .fila b { color: var(--tinta); }
.cesta textarea { box-sizing: border-box; width: 100%; min-height: 6em; margin: 0; padding: .7em .9em; font: inherit; color: var(--tinta);
  border: 1px solid #6b8ca6; border-radius: .45em; background: #fff; resize: vertical; }
.cesta textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring); }
.cesta-nota-casilla { display: block; color: var(--gris); font-size: .88em; margin-top: .2em; }
.cesta-otro-titular { margin-top: 1.1em; }
.cesta-aviso .cesta-enlace { font-size: 1em; }
/* links that look like links: the theme's "a { text-decoration: none }" would win over .cesta-enlace */
.cesta a.cesta-enlace { text-decoration: underline; text-underline-offset: .15em; }
/* checkboxes are square (the theme gives every input appearance: none and a round border) */
.cesta .cesta-casilla input[type=checkbox], .cesta-casilla input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox; width: 1.25em; height: 1.25em; padding: 0; border: 0;
  border-radius: .25em; box-shadow: none; accent-color: var(--primary-color); }
.cesta-casilla + .cesta-casilla { margin-top: .9em; }
/* no red before the client tries to go on (the theme marks every :invalid input at once) */
.cesta input:invalid, .cesta select:invalid { box-shadow: none; }
.cesta .intentado input:invalid, .cesta .intentado select:invalid { border-color: #d01c2a; }
.cesta .intentado .cesta-casilla input:invalid { outline: 2px solid #d01c2a; outline-offset: 2px; }
/* single gateway: one sentence instead of a card to choose */
.cesta-pago-unico { margin: 0; line-height: 1.55; }
.cesta-pago-unico b { color: var(--tinta); }
/* a field the server rejected: red border and the reason under it */
.cesta-campo.con-error input, .cesta-campo.con-error select { border-color: #d01c2a; }
.cesta-campo .error-campo { color: #d01c2a; font-size: .9em; }

@media (prefers-reduced-motion: reduce) { .cesta * { transition: none !important; } }
@media (max-width: 560px) {
  .cesta { padding: 1.5em .9em 3em; }
  .cesta-cabecera h1 { font-size: 1.6em; }
  .cesta-pasos li { font-size: .72em; }
  .cesta-pasos li:not(.actual) span { display: none; }
  .cesta-seccion { padding: 1.2em 1.1em; }
  .cesta-opciones, .cesta-rejilla, .cesta-complemento .lista { grid-template-columns: 1fr; }
  .cesta-acciones { flex-direction: column-reverse; align-items: stretch; padding: 1em 1.1em; text-align: center; }
  .cesta-boton { justify-content: center; }
  .cesta-pestanas label { font-size: .8em; padding: .9em .3em .75em; }
  .cesta-codigo .fila { flex-direction: column; }
  .cesta-totales .total dd { font-size: 1.6em; }
  .cesta-complemento { display: block; padding-right: 1.2em; }
  .cesta-complemento .cuanto { display: block; text-align: left; margin-top: .5em; }
  .cesta-complemento .cuanto br { display: none; }
  .cesta-complemento .cuanto .ciclo { margin-left: .3em; }
  .cesta-complemento .frase { line-height: 1.45; }
  .cesta-complemento .lista { clear: both; }
}
/* promotion code rejected: red field and the reason under it, once */
.cesta-codigo .fila.con-error input { border-color: #d01c2a; }
.cesta-codigo .error-campo { margin: .5em 0 0; color: #d01c2a; font-size: .9em; }
/* done steps link back: the whole step (circle and label) is clickable */
.cesta-pasos li a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.cesta-pasos li a::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.cesta-pasos li a:hover { color: var(--link-color); }
.cesta-pasos li:has(a:hover)::before { border-color: var(--link-color); background: var(--fondo); }
.cesta-pasos li a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: .2em; }

/* web review form (modules/addons/dabbleam_review): the privacy text has several paragraphs, and .cesta p has no margin */
#privacidad p + p { margin-top: .7em; }

/* notice of illegal content (/abuso, templates/dabbleam/abuso.tpl): textareas like the inputs (no red before trying,
   red when the server rejected them), and space between the paragraphs of a text section */
.cesta textarea:invalid { box-shadow: none; }
.cesta-campo.con-error textarea { border-color: #d01c2a; }
.cesta-texto p + p { margin-top: .7em; }
/* trap field for robots: off the screen, never display:none (the container has aria-hidden for screen readers) */
.cesta-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* final checkout button (desistimiento, 02-11-2026): what it does and, always, that the order brings an obligation to
   pay (art. 98.2 TRLGDCU), on two lines when it charges at once */
.cesta-boton-texto { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; text-align: left; }
.cesta-boton-texto .obligacion { font-size: .9em; }
.cesta-boton-texto [data-boton-pagar]:not([hidden]) + .obligacion { font-weight: normal; }
@media (max-width: 760px) { .cesta-boton-texto { align-items: center; text-align: center; } }
/* /revision-web from a letter QR: talk first, the form below (addon dabbleam_review) */
.cesta-carta { margin-bottom: 1.6em; }
.cesta-carta p { margin: 0 0 .9em; line-height: 1.5; }
.cesta-carta p:last-child { margin-bottom: 0; }
.cesta-botones { display: flex; flex-wrap: wrap; gap: .6em; margin: 0 0 1.1em; }
a.cesta-boton-sec { display: inline-flex; align-items: center; text-decoration: none; }