/* 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.
 *
 * Auto-contenido — no asume tokens del DS porque el DS no se carga en
 * frontend público. Usa colores neutros que combinan con cualquier theme.
 *
 * 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: #1d2327;
  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: #646970;
  line-height: 1.3;
  font-weight: 400;
}

.cs-rate__price {
  flex-shrink: 0;
  font-weight: 700;
  color: #1d2327;
  margin-left: 12px;
  white-space: nowrap;
}

/* "Gratis" en verde (mismo color que el tema usa para .ck-free según la
   docu del checkout). */
.cs-rate__price--free {
  color: #1e9b5c;
}

/* 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;
}