/* Australcode Couriers — Estilos del rate label en frontend (checkout + cart).
 *
 * NO scoped a .cs-page (esos estilos viven en admin.css). Estos estilos
 * targetean el HTML que CheckoutLabelEnhancer inyecta dentro del Paso 3
 * y del sidebar del checkout, donde no controlamos el wrapper.
 *
 * CAPA DE DOMINIO sobre el Australcode Frontend Kit (`assets/acfk/`).
 * Canon: references/frontend.md de la skill plugin-wp (australcode-kit).
 *
 * El header anterior decía «usa colores neutros que combinan con cualquier
 * theme». No era así: `.cs-rate__title` era `#1d2327` y `.cs-rate__sub`
 * `#646970` — los grises de wp-admin, hardcodeados en una superficie de
 * CLIENTE. Sobre un checkout de theme oscuro el nombre del courier quedaba
 * casi negro sobre negro. Ahora el título hereda el color del contexto (que en
 * el checkout es el del label de WooCommerce, elegido por el theme) y el
 * subtítulo sale del `--acfk-muted` del kit, derivado de `currentColor`.
 *
 * Estructura del HTML que renderiza el plugin:
 *
 *   <span class="cs-rate">
 *     <img class="cs-rate__logo" />
 *     <span class="cs-rate__body">
 *       <span class="cs-rate__title">BlueExpress Express</span>
 *       <span class="cs-rate__sub">Llega el jueves 30 de abril</span>
 *     </span>
 *     <span class="cs-rate__price">$4.330</span>
 *   </span>
 *
 * El layout es flex con:
 *   logo (fixed)  |  body (grow)  |  price (fixed, push right)
 */

.cs-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.cs-rate__logo {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
}

.cs-rate__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.cs-rate__title {
  font-weight: 600;
  color: inherit;
  line-height: 1.3;
  /* Hereda el font-size del contexto (.ck-opt-t es 14px, sidebar puede
     ser distinto). */
}

.cs-rate__sub {
  font-size: 0.85em;
  color: var( --acfk-muted, inherit );
  line-height: 1.3;
  font-weight: 400;
}

.cs-rate__price {
  flex-shrink: 0;
  font-weight: 700;
  color: inherit;
  margin-left: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* "Gratis" en verde. Es color SEMÁNTICO (éxito), no de marca, así que sale del
   token del kit —compartido con el resto de la familia— y no de un hex propio.
   El literal anterior era #1e9b5c. */
.cs-rate__price--free {
  color: var( --acfk-success, #1a7f37 );
}

/* wc_price() envuelve el monto en su propio span; resetar font-weight
   heredado para que tome el del contenedor. */
.cs-rate__price .woocommerce-Price-amount {
  font-weight: inherit;
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
 * Sidebar: layout 3 columnas — "Envío" | logo + nombre | precio
 *
 * El theme custom de Tigo Vape (bricks-child) renderiza el sidebar como:
 *
 *   <div class="ck-sum-row ck-sum-shipping">
 *     <span>Envío</span>
 *     <span>{ wc_cart_totals_shipping_html() }</span>
 *   </div>
 *
 * y `wc_cart_totals_shipping_html()` produce wrappers anidados:
 *
 *   <ul class="woocommerce-shipping-methods">
 *     <li><input type="hidden"/><label><span class="cs-rate">…</span></label></li>
 *   </ul>
 *
 * Para que la fila quede en 3 columnas alineadas (label "Envío" |
 * logo + nombre | precio, igual a la fila "Subtotal | $monto"), usamos
 * grid de 4 columnas en .ck-sum-shipping y `display: contents` en los
 * wrappers (span outer, ul, li, label, cs-rate) para aplanar a logo,
 * body y price como hijos directos del grid del padre.
 *
 * Cuatro columnas en lugar de tres porque el logo y el nombre van
 * pegados pero como elementos separados (no podemos meter al logo
 * adentro del body sin tocar el HTML del plugin).
 * ──────────────────────────────────────────────────────────────────── */
.ck-sum-shipping {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  column-gap: 8px;
}

.ck-sum-shipping > span:last-child,
.ck-sum-shipping ul.woocommerce-shipping-methods,
.ck-sum-shipping ul.woocommerce-shipping-methods > li,
.ck-sum-shipping ul.woocommerce-shipping-methods > li > label,
.ck-sum-shipping .cs-rate {
  display: contents;
}

/* Reset de margenes/paddings del ul/li que WC trae por default y que
   "atraviesan" el display: contents. */
.ck-sum-shipping ul.woocommerce-shipping-methods,
.ck-sum-shipping ul.woocommerce-shipping-methods > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ck-sum-shipping .cs-rate__logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* En el sidebar el subtítulo de ETA es redundante (ya se ve en el
   Paso 3). Ocultarlo libera espacio. */
.ck-sum-shipping .cs-rate__sub {
  display: none;
}

/* Body queda en col 3 con título dentro. Permitir wrap si el nombre
   del courier no entra. */
.ck-sum-shipping .cs-rate__body {
  display: block;
  min-width: 0;
}

.ck-sum-shipping .cs-rate__title {
  white-space: normal;
  word-break: break-word;
}

.ck-sum-shipping .cs-rate__price {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 0;  /* override del .cs-rate__price global */
}

/* ─────────────────────────────────────────────────────────────────────
 * Sidebar "Tu pedido": mostrar SOLO la opción de envío seleccionada.
 *
 * Movido desde el <style> inline de CheckoutCleanups::printSidebarStyles()
 * (refactor ⑪: enqueue en vez de inline). Iba en wp_head prioridad 100, o
 * sea después de esta hoja → al final del archivo conserva la cascada.
 *
 * Las opciones completas viven en el Card #3 del checkout; en el sidebar
 * solo se muestra la elegida. `:has()` soportado en todos los browsers
 * modernos (Chrome 105+, Firefox 121+, Safari 15.4+).
 * ──────────────────────────────────────────────────────────────────── */
.ck-sum-shipping ul.woocommerce-shipping-methods > li:not(:has(input:checked)) {
  display: none !important;
}

/* Ocultar el radio del seleccionado (queda solo el label). */
.ck-sum-shipping ul.woocommerce-shipping-methods > li input[type="radio"] {
  display: none !important;
}

/* Permitir wrap del label largo (ej. "BlueExpress Retiro en Punto") para
   que el precio quede en línea propia si no entra. */
.ck-sum-shipping .cs-rate {
  flex-wrap: wrap;
  align-items: center;
}

.ck-sum-shipping .cs-rate__body {
  min-width: 0;
  flex: 1 1 auto;
}

/* ─────────────────────────────────────────────────────────────────────
 * Chevron del <select> de comuna (campo city override).
 *
 * Movido desde el <style> inline de CityFieldOverride::printCitySelectStyles()
 * (refactor ⑪). Algunos themes (Bricks/Elementor) aplican `appearance: none`
 * global a los selects y dejan el campo plano. Forzamos un chevron SVG inline
 * (gris #646970). `!important` necesario porque los themes pisan el
 * `background-image` con selectores muy específicos.
 * ──────────────────────────────────────────────────────────────────── */
select.cs-city-select,
.cs-city-select-wrap select.cs-city-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23646970%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20d%3D%22M1%201l4%204%204-4%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 6px !important;
  padding-right: 32px !important;
  cursor: pointer !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Foco de teclado sobre la opción de envío.
 *
 * El aro del kit cubre lo que vive DENTRO de un `.acfk`, y acá el elemento
 * enfocable es el `<input type="radio">` que genera WooCommerce, fuera de
 * nuestro markup. Sin esto, elegir courier con teclado en un theme que resetea
 * outlines no da ninguna señal — y a diferencia del dropdown de direcciones,
 * este no lo rompimos nosotros: nunca lo tuvo.
 * ──────────────────────────────────────────────────────────────────── */
ul.woocommerce-shipping-methods input[type="radio"]:focus-visible + label .cs-rate,
ul.woocommerce-shipping-methods input[type="radio"]:focus-visible ~ label .cs-rate {
  /* `currentColor`, NO `--acfk-accent`. Esta regla usaba el acento
     heredado con una nota que decía que heredaría el fix del kit cuando éste
     se resolviera: era falso — es una regla APARTE, el kit no la alcanza.
     Medido: bajo TT5 el acento resuelve a #FFEE58 y el aro daba 1,19:1 sobre
     el base #FFFFFF del theme, contra el 3:1 de WCAG 1.4.11. Y es el aro del
     CHECKOUT, donde el foco de teclado importa más. */
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var( --acfk-radius-sm, 6px );
}

/* ─────────────────────────────────────────────────────────────────────
 * Widget de Puntos Blue Express (PUDO).
 *
 * Lo monta `assets/js/checkout-pickup-points.js` cuando el cliente elige la
 * rate de retiro en punto. Es el SEGUNDO renderizador del plugin — este markup
 * no existe en PHP —, así que el marcador `acfk` lo pone el JS en el wrapper.
 *
 * Este cromo estaba inline en el JS con `#e5e7eb` (borde) y `#646970` (nota):
 * los grises de wp-admin en el checkout del CLIENTE, el mismo defecto ya
 * corregido en `.cs-rate__title`/`.cs-rate__sub`. Inline además lo dejaba
 * invisible a `frontend-css-lint.sh`, que mide archivos `.css`. Ahora sale de
 * los tokens del kit, que derivan de `currentColor` y sobreviven theme oscuro.
 * ──────────────────────────────────────────────────────────────────── */
.cs-bx-pickup-iframe-row {
  display: block;
  width: 100%;
  margin: 14px 0 4px;
}

#cs-bx-pickup-iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
  border-radius: var( --acfk-radius-sm, 6px );
}

.cs-bx-pickup-iframe-row[hidden] { display: none; }

.cs-bx-pickup-iframe__note {
  margin: 0 0 8px;
  color: var( --acfk-muted, inherit );
  font-size: 0.9em;
}

.cs-bx-pickup-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
  border-radius: var( --acfk-radius-sm, 6px );
}
.cs-bx-pickup-error p { margin: 0; }

@media ( max-width: 600px ) {
  /* A 375px el nombre del courier y el precio no entran en una línea: el precio
     baja y se alinea al ancho completo en vez de quedar colgando a la derecha. */
  .cs-rate {
    flex-wrap: wrap;
  }

  .cs-rate__price {
    margin-left: 0;
  }

  /* 600px de mapa en un viewport de 667px se comen la pantalla entera y el
     cliente pierde de vista el resto del checkout. */
  #cs-bx-pickup-iframe {
    height: 420px;
  }

  /* El logo a 24px con el nombre en dos líneas descuadra la fila. */
  .cs-rate__logo {
    width: 20px;
    height: 20px;
  }
}

/* La promesa de entrega en su línea (checkout-rate-labels.js): debajo del nombre,
 * más liviana. Hereda el color del tema; la opacidad mantiene el contraste AA
 * sobre fondos claros (tinta #111 al 75 % ≈ #4d4d4d, 8:1 sobre blanco). */
.acshp-rate-promise {
	display: block;
	margin-top: 0.2em;
	font-weight: 400;
	font-size: 0.92em;
	line-height: 1.35;
	opacity: 0.75;
}

/* ============================================================
   «¿Cómo lo recibes?» (DeliveryMode), oficinas Chilexpress
   (PickupOffices) y avisos de la dirección (StreetNumberFields).
   Llevan la clase .acfk (los tokens del kit). El acento es
   --acshp-accent si el sitio lo fija en un ancestro (en Tigo, el
   verde de Bricks), y si no el del kit.
   ============================================================ */
.acshp-modes { border: 0; margin: 0; padding: 0; min-width: 0; }
.acshp-modes__legend { padding: 0; margin: 0 0 12px; font-weight: 700; font-size: 1.1em; }
.acshp-modes__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.acshp-mode {
  position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  padding: 16px; border: 1.5px solid var(--acfk-hairline); border-radius: var(--acshp-radius, var(--acfk-radius));
  transition: border-color .16s ease, background-color .16s ease;
}
.acshp-mode:hover { border-color: var(--acfk-muted); }
.acshp-mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.acshp-mode:has(input:checked) { border-color: var(--acshp-accent, var(--acfk-accent)); background: color-mix(in srgb, var(--acshp-accent, var(--acfk-accent)) 9%, transparent); }
.acshp-mode:has(input:focus-visible) { outline: 2px solid var(--acshp-accent, var(--acfk-accent)); outline-offset: 2px; }
.acshp-mode__icon { width: 26px; height: 26px; color: var(--acshp-accent, var(--acfk-accent)); margin-bottom: 4px; }
.acshp-mode__title { font-weight: 700; }
.acshp-mode__text { font-size: .875em; color: var(--acfk-muted); line-height: 1.4; }
.acshp-mode__badge { margin-top: auto; padding-top: 4px; font-size: .8em; font-weight: 700; color: var(--acshp-accent, var(--acfk-accent)); }
@media (max-width: 600px) {
  .acshp-modes__list { grid-template-columns: 1fr; }
  .acshp-mode { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .acshp-mode__icon { grid-row: span 3; margin: 0; }
  .acshp-mode__badge { grid-column: 2; padding: 0; }
}

.acshp-offices { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.acshp-offices__empty { margin: 0; color: var(--acfk-muted); }
.acshp-offices__search { display: block; position: sticky; top: 0; z-index: 1; padding-bottom: 4px; background: var(--acshp-surface, Canvas); }
.acshp-offices__search input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--acfk-hairline); border-radius: var(--acshp-radius, var(--acfk-radius-sm)); font: inherit; }
.acshp-offices__none { margin: 4px 0; color: var(--acfk-muted); }
.acshp-office[hidden], .acshp-offices__none[hidden] { display: none; }
.acshp-office {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px; cursor: pointer;
  border: 1px solid var(--acfk-hairline); border-radius: var(--acshp-radius, var(--acfk-radius-sm));
}
.acshp-office:has(input:checked) { border-color: var(--acshp-accent, var(--acfk-accent)); background: color-mix(in srgb, var(--acshp-accent, var(--acfk-accent)) 7%, transparent); }
.acshp-office input { margin-top: 3px; accent-color: var(--acshp-accent, var(--acfk-accent)); }
.acshp-office__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acshp-office__name { font-weight: 600; }
.acshp-office__name small { font-weight: 400; color: var(--acfk-muted); margin-left: 4px; }
.acshp-office__address, .acshp-office__hours { font-size: .875em; color: var(--acfk-muted); }
.acshp-office__map { font-size: .875em; color: var(--acshp-accent, var(--acfk-accent)); text-underline-offset: 2px; align-self: flex-start; }

.acshp-hint { display: block; margin-top: 4px; font-size: .85em; color: var(--acfk-muted); }
.acshp-hint:empty { display: none; }
.acshp-hint--ok { color: var(--acfk-success); }
.acshp-hint--warn { color: var(--acfk-error); }

/* ============================================================
   Recálculo del checkout: velo liviano con indicador, no blanco.
   WooCommerce y Bricks tapan resumen, envíos y pagos con un velo
   blanco al 60 % mientras recalculan (en línea, por eso !important):
   la lista desaparecía y parecía una falla. Queda visible y atenuada,
   con un indicador del color de acción.
   ============================================================ */
:is(form.checkout, .woocommerce-checkout .brxe-woocommerce-checkout-order-summary, .woocommerce-cart) .blockUI.blockOverlay {
	background: rgba(255, 255, 255, 0.35) !important;
	opacity: 1 !important;
	cursor: progress !important;
}
:is(form.checkout, .woocommerce-checkout .brxe-woocommerce-checkout-order-summary, .woocommerce-cart) .blockUI.blockOverlay::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2.5px solid var(--acshp-accent, var(--acfk-accent, currentColor));
	border-right-color: transparent;
	border-radius: 50%;
	animation: acshp-spin 0.7s linear infinite;
}
/* El indicador propio reemplaza al de WooCommerce (::before), si el tema lo trae. */
form.checkout .blockUI.blockOverlay::before { display: none !important; }
@keyframes acshp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	:is(form.checkout, .woocommerce-checkout .brxe-woocommerce-checkout-order-summary, .woocommerce-cart) .blockUI.blockOverlay::after { animation-duration: 2s; }
}
.acshp-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ============================================================
   Libro de direcciones: «Tus direcciones» en el checkout
   (AddressBookPicker) y «Mis direcciones» en Mi cuenta
   (AddressBookPage). Tarjetas como las de los modos y oficinas.
   ============================================================ */
.acshp-book { margin: 0 0 4px; }
.acshp-book__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.acshp-book__legend { padding: 0; margin: 0 0 8px; font-weight: 700; }
.acshp-book__list { display: grid; gap: 8px; }
.acshp-book__card,
.acshp-ab__card,
.acshp-me__card {
	display: flex; gap: 10px; align-items: flex-start; padding: 12px; cursor: pointer;
	border: 1px solid var(--acfk-hairline); border-radius: var(--acshp-radius, var(--acfk-radius-sm));
	background: var(--acshp-surface, transparent);
}
.acshp-book__card:has(input:checked),
.acshp-me__card {
	border-color: var(--acshp-accent, var(--acfk-accent));
	box-shadow: inset 0 0 0 1px var(--acshp-accent, var(--acfk-accent));
	background: color-mix(in srgb, var(--acshp-accent, var(--acfk-accent)) 7%, transparent);
}
.acshp-book__card input { margin-top: 3px; accent-color: var(--acshp-accent, var(--acfk-accent)); }
.acshp-book__body, .acshp-ab__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acshp-book__name, .acshp-ab__name { font-weight: 600; margin: 0; }
.acshp-book__line, .acshp-ab__line { font-size: .875em; color: var(--acfk-muted); margin: 0; }
.acshp-book__manage { display: inline-block; margin-top: 8px; font-size: .875em; color: var(--acshp-accent, var(--acfk-accent)); text-underline-offset: 2px; }
.acshp-book__save[hidden] { display: none; }
.acshp-book__save { margin: 8px 0 0; }

.acshp-ab__intro { margin: 0 0 16px; }
.acshp-ab__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.acshp-ab__card { cursor: default; justify-content: space-between; flex-wrap: wrap; }
.acshp-ab__badge {
	display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .75em; font-weight: 600;
	background: color-mix(in srgb, var(--acshp-accent, var(--acfk-accent)) 12%, transparent); color: inherit;
}
.acshp-ab__actions { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: .875em; }
.acshp-ab__actions a, .acshp-ab__link { color: var(--acshp-accent, var(--acfk-accent)); text-decoration: underline; text-underline-offset: 2px; }
.acshp-ab__inline { display: inline; margin: 0; }
.acshp-ab__link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.acshp-ab__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; max-width: 640px; }
.acshp-ab__form .form-row { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.acshp-ab__form #acshp_ab_label_field,
.acshp-ab__form #acshp_ab_street_field,
.acshp-ab__form .form-row:has(.acshp-ab__check),
.acshp-ab__formactions { grid-column: 1 / -1; }
.acshp-ab__form input.input-text, .acshp-ab__form select { width: 100%; min-height: 44px; }
.acshp-ab__formactions { display: flex; gap: 16px; align-items: center; margin: 4px 0 0; }
@media (max-width: 600px) { .acshp-ab__form { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   «Comprando como…» (CustomerCard) y enlaces «Inicia sesión». La tarjeta
   es la de «Tus direcciones» en su estado marcado.
   ============================================================ */
.woocommerce-checkout .form-row.acshp-me-hide { display: none !important; }
.acshp-me[hidden] { display: none; }
.acshp-me { margin: 0 0 12px; }
.acshp-me__card { gap: 12px; padding: 14px; cursor: default; }
.acshp-me__check {
	flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
	background: var(--acshp-accent, var(--acfk-accent)) no-repeat center / 12px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.acshp-me__body { flex: 1; }
.acshp-me__label { font-size: .75em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acfk-muted); }
.acshp-me__name { font-weight: 700; }
.acshp-me__body .acshp-book__line { overflow-wrap: anywhere; }
.acshp-me__edit {
	flex: none; align-self: center; padding: 6px 10px; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: .875em; font-weight: 600; color: var(--acshp-accent, var(--acfk-accent));
	text-decoration: underline; text-underline-offset: 2px;
}
.acshp-login-invite { margin: 0 0 12px; font-size: .875em; }
.acshp-login-invite a { font-weight: 600; color: var(--acshp-accent, var(--acfk-accent)); text-underline-offset: 2px; }