/* Selector de destino del envío (carrito y checkout).
   Va en un mu-plugin con handle propio porque wallflower-theme-switch.php
   desregistra wf-style en prioridad 99 y este CSS se perdería. */

.wf-envio {
  --wf-envio-linea: var(--wf-line, rgba(0, 0, 0, .14));
  --wf-envio-rosa: var(--wf-rose-deep, #a63d5b);
  font-size: .95rem;
}

.wf-envio__titulo {
  margin: 0 0 .7rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}

.wf-envio__opciones,
.wf-envio__sucursales,
.wf-envio__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------
   Contra el CSS de WooCommerce
   ------------------------------------------------------------------
   La lista de métodos lleva id="shipping_method" —y tiene que llevarlo, es
   por donde su JavaScript la encuentra—, así que sus reglas ganan por el
   identificador: «#shipping_method li label{display:inline}» dejaba las
   cabeceras sin el flex y todo se amontonaba. De ahí que estas cuatro vayan
   escritas con el id delante en lugar de con la clase sola. */
#shipping_method li.wf-envio__opcion {
  margin: 0;
  line-height: inherit;
}

#shipping_method li.wf-envio__opcion + li.wf-envio__opcion {
  margin-top: .5rem;
}

ul#shipping_method li.wf-envio__opcion label.wf-envio__cabecera,
ul#shipping_method li.wf-envio__sucursal label.wf-envio__sucursal-texto {
  display: flex;
}

ul#shipping_method li.wf-envio__sucursal label.wf-envio__sucursal-texto {
  flex-direction: column;
}

#shipping_method li input.wf-envio__modo,
#shipping_method li .wf-envio__sucursal input[type="radio"] {
  margin: .25rem .5rem 0 0;
  vertical-align: top;
}

/* ------------------------------------------------------------------
   Sin JavaScript
   ------------------------------------------------------------------
   Quedan a la vista los radios de WooCommerce, que es lo que se envía. Los
   nuestros y los paneles, que no servirían de nada, se esconden. */
.wf-envio:not(.wf-envio--js) .wf-envio__modo,
.wf-envio:not(.wf-envio--js) .wf-envio__panel {
  display: none;
}

.wf-envio--js .wf-envio__real {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Cada opción
   ------------------------------------------------------------------ */
.wf-envio__cabecera {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .75rem .9rem;
  border: 1px solid var(--wf-envio-linea);
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.wf-envio__cabecera:hover {
  border-color: var(--wf-envio-rosa);
}

.wf-envio__opcion:has(.wf-envio__modo:checked) .wf-envio__cabecera {
  border-color: var(--wf-envio-rosa);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 18px rgba(120, 40, 70, .08);
}

.wf-envio__modo {
  margin: .2rem 0 0;
  accent-color: var(--wf-envio-rosa);
  flex: 0 0 auto;
}

.wf-envio__texto {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  flex: 1 1 auto;
  min-width: 0;
}

.wf-envio__nombre {
  font-weight: 600;
  line-height: 1.25;
}

.wf-envio__nota {
  font-size: .82em;
  opacity: .7;
  line-height: 1.35;
}

.wf-envio__precio {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
  padding-left: .4rem;
}

/* ------------------------------------------------------------------
   El panel de cada opción
   ------------------------------------------------------------------ */
.wf-envio__panel {
  padding: .8rem .9rem .2rem;
}

.wf-envio__panel[hidden] {
  display: none;
}

.wf-envio__busqueda {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.wf-envio__input {
  flex: 1 1 9rem;
  min-width: 0;
  padding: .6rem .9rem;
  border: 1px solid var(--wf-envio-linea);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: .95rem;
  box-sizing: border-box;
}

.wf-envio__input:focus {
  outline: 0;
  border-color: var(--wf-envio-rosa);
}

.wf-envio__ver {
  flex: 0 0 auto;
  padding: .55rem 1rem;
  border: 1px solid var(--wf-envio-linea);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.wf-envio__ver:hover {
  border-color: var(--wf-envio-rosa);
  color: var(--wf-envio-rosa);
}

/* ------------------------------------------------------------------
   Resultados y tarifario
   ------------------------------------------------------------------ */
.wf-envio__resultados {
  margin-top: .5rem;
  max-height: 19rem;
  overflow-y: auto;
  border: 1px solid var(--wf-envio-linea);
  border-radius: 14px;
  background: #fff;
}

.wf-envio__resultados[hidden] {
  display: none;
}

/* El rótulo del grupo se queda pegado arriba mientras se recorre la lista.
   El gris va en el color y no en opacity: con opacity se transparenta también
   el fondo y las filas de la tarifa anterior se leían por debajo. */
.wf-envio__grupo {
  margin: 0;
  padding: .6rem .9rem .35rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(60, 30, 40, .6);
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

.wf-envio__resultado {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem .9rem;
  cursor: pointer;
}

.wf-envio__resultado + .wf-envio__resultado {
  border-top: 1px solid rgba(0, 0, 0, .05);
}

.wf-envio__resultado:hover,
.wf-envio__resultado.esta-activo {
  background: rgba(214, 138, 165, .12);
}

.wf-envio__resultado-texto {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.wf-envio__resultado-nombre {
  line-height: 1.3;
}

.wf-envio__resultado-grupo {
  font-size: .78em;
  opacity: .65;
}

.wf-envio__resultado-precio {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
}

.wf-envio__vacio {
  margin: 0;
  padding: .9rem;
  font-size: .9em;
}

.wf-envio__enlace {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--wf-envio-rosa);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   Sucursales
   ------------------------------------------------------------------ */
.wf-envio__sucursal {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .45rem 0;
}

.wf-envio__sucursal + .wf-envio__sucursal {
  border-top: 1px solid rgba(0, 0, 0, .05);
}

.wf-envio__sucursal input[type="radio"] {
  margin: .25rem 0 0;
  accent-color: var(--wf-envio-rosa);
}

.wf-envio__sucursal label {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   Cotización
   ------------------------------------------------------------------ */
.wf-envio__etiqueta {
  display: block;
  margin-bottom: .35rem;
  font-size: .85em;
  font-weight: 600;
}

.wf-envio__cotizar-texto {
  width: 100%;
  box-sizing: border-box;
  padding: .6rem .8rem;
  border: 1px solid var(--wf-envio-linea);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: .92rem;
  resize: vertical;
}

.wf-envio__cotizar-texto:focus {
  outline: 0;
  border-color: var(--wf-envio-rosa);
}

.wf-envio__cotizar-guardar {
  margin-top: .5rem;
  padding: .55rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--wf-envio-rosa);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.wf-envio__cotizar-guardar:hover {
  opacity: .9;
}

.wf-envio__aviso {
  margin: .6rem 0 0;
  font-size: .82em;
  opacity: .7;
  line-height: 1.4;
}

.wf-envio__estado {
  margin: .4rem 0 0;
  font-size: .85em;
  color: var(--wf-envio-rosa);
  min-height: 1.2em;
}

.wf-envio__estado:empty {
  margin: 0;
  min-height: 0;
}

/* La línea de envío es angosta en el resumen del checkout; ahí el bloque
   ocupa todo el ancho de la celda y no se aprieta contra el precio. */
.woocommerce-checkout-review-order-table .wf-envio,
.woocommerce-cart .cart_totals .wf-envio {
  width: 100%;
}

.woocommerce-shipping-totals .wf-envio + .woocommerce-shipping-destination {
  display: none;
}

/* En móvil, WooCommerce vuelca las tablas a una columna y alinea las celdas a
   la derecha (woocommerce-smallscreen.css). A un formulario eso le sienta mal:
   los radios quedaban a un lado y su texto al otro. */
.woocommerce table.shop_table_responsive tr td .wf-envio,
.woocommerce-page table.shop_table_responsive tr td .wf-envio {
  text-align: left;
}

/* Y el rótulo que WooCommerce añade con «content: attr(data-title) ": "»
   sobra, porque el bloque ya trae el suyo. Sin el atributo quedaba solo el
   dos puntos suelto delante del título. */
.woocommerce table.shop_table_responsive tr td.wf-envio-celda::before,
.woocommerce-page table.shop_table_responsive tr td.wf-envio-celda::before {
  content: none;
}

@media (max-width: 520px) {
  .wf-envio__cabecera {
    flex-wrap: wrap;
  }

  .wf-envio__precio {
    width: 100%;
    padding-left: 1.6rem;
  }

  .wf-envio__busqueda {
    flex-direction: column;
    align-items: stretch;
  }

  /* En columna, el flex-basis pasa a ser altura: sin esto el campo se estiraba
     hasta ocupar media pantalla. */
  .wf-envio__input {
    flex: 0 0 auto;
  }

  .wf-envio__ver {
    width: 100%;
  }
}