/* 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: wp-plugin-design/references/frontend-kit.md
 *
 * 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` (B-708). Esta regla usaba el acento
     heredado con una nota que decía que heredaría el fix del kit cuando B-708
     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__note {
  margin: 6px 0 0;
  color: var( --acfk-muted, inherit );
  font-size: 12px;
}

@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;
  }
}