/*
 * eta.css — widget "Llegada estimada" + selector de comuna (SPEC §6-7).
 * Sin Tailwind (el build del tema no escanea plugins). Todo bajo .cs-eta,
 * .cs-eta-picker o body.cs-eta-lock. Tokens de marca CS: amarillo #ffe800,
 * negro, Montserrat (títulos/botones) + Poppins (texto).
 */

.cs-eta, .cs-eta-picker {
  --eta-k: #000;
  --eta-y: #ffe800;
  --eta-mute: #6b6b6b;   /* #777 da 4.48:1 en texto chico; éste pasa AA */
  --eta-off: #bdbdbd;
  --eta-line: #ececec;
  --eta-fill: #f4f4f4;
  --eta-press: #e9e9e9;
  --eta-ease: cubic-bezier(.2, .8, .2, 1);
  --eta-head: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --eta-body: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--eta-body);
  color: var(--eta-k);
  -webkit-font-smoothing: antialiased;
}
.cs-eta *, .cs-eta *::before, .cs-eta *::after,
.cs-eta-picker *, .cs-eta-picker *::before, .cs-eta-picker *::after { box-sizing: border-box; }
/* :where() = especificidad 0: el reset nunca le gana a una clase propia. */
:where(.cs-eta, .cs-eta-picker) :where(p, h2) { margin: 0; }
:where(.cs-eta, .cs-eta-picker) :where(button, input) {
  font-family: inherit; margin: 0; text-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.cs-eta svg, .cs-eta-picker svg { display: block; flex: none; }
.cs-eta[hidden], .cs-eta [hidden], .cs-eta-picker[hidden], .cs-eta-picker [hidden] { display: none !important; }
.cs-eta :focus-visible, .cs-eta-picker :focus-visible { outline: 2px solid var(--eta-k); outline-offset: 2px; }

/* ------------------------------------------------------------- ficha */
/* Colapsado = una línea (familia de la píldora .cs-origin del tema);
   desplegado = tarjeta con la tira de días, la frase del % y el retiro. */
.cs-eta { box-sizing: border-box; width: 100%; margin: 4px 0 16px; font-size: 12.5px; line-height: 1.5; }
.cs-eta__view { display: none; }
.cs-eta.is-loaded .cs-eta__view { display: block; }
.cs-eta.is-loaded .cs-eta__skeleton { display: none; }
.cs-eta.is-enter .cs-eta__bar { animation: cs-eta-fade 220ms ease both; }
.cs-eta.is-swap .cs-eta__pill-text, .cs-eta.is-swap .cs-eta__chip-name { animation: cs-eta-fade 260ms ease both; }
@keyframes cs-eta-fade { from { opacity: 0; } }

.cs-eta__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-eta__pill, .cs-eta__chip {
  position: relative; appearance: none; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center;
  min-height: 36px; max-width: 100%; border-radius: 18px; color: var(--eta-k);
  font-size: 12px; line-height: 16px;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.cs-eta__pill::before, .cs-eta__chip::before { content: ""; position: absolute; inset: -4px -2px; }
.cs-eta__pill { gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid #e7e7e7; background: #fff; }
.cs-eta__pill-icon {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--eta-y);
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-eta__pill-icon svg { width: 14px; height: 14px; }
.cs-eta__pill-text { min-width: 0; }
.cs-eta__pill-label { color: var(--eta-mute); white-space: nowrap; }
.cs-eta__pill-value { font-weight: 700; white-space: nowrap; }
.cs-eta__pill-value--short { display: none; }
.cs-eta__pill > svg { width: 14px; height: 14px; margin-left: -2px; color: var(--eta-mute); transition: transform 240ms var(--eta-ease); }
.cs-eta.is-open .cs-eta__pill > svg { transform: rotate(180deg); }
.cs-eta.is-open .cs-eta__pill { border-color: #cfcfcf; }
@media (max-width: 479px) {
  .cs-eta__pill-value { display: none; }
  .cs-eta__pill-value--short { display: inline; }
}

/* Botón de comuna: mismo alto que la píldora (36px); 44px de toque vía ::before. */
.cs-eta__chip {
  gap: 5px; padding: 0 12px 0 10px; border: 0; background: var(--eta-fill);
  font-weight: 600; white-space: nowrap;
}
.cs-eta__chip svg { width: 14px; height: 14px; }
.cs-eta__chip-name { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.cs-eta__chip-approx { font-weight: 500; font-size: 11px; color: var(--eta-mute); }
.cs-eta__chip--geo { gap: 6px; }
.cs-eta__msg { margin-top: 6px; color: #b42318; font-size: 12px; line-height: 17px; }

/* Detalle: 0fr → 1fr anima el alto real; visibility lo saca del tab-order. */
.cs-eta__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--eta-ease); }
.cs-eta.is-open .cs-eta__panel { grid-template-rows: 1fr; }
.cs-eta__panel-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 240ms; }
.cs-eta.is-open .cs-eta__panel-inner { visibility: visible; transition-delay: 0s; }
.cs-eta__card {
  margin: 8px 0 3px; padding: 10px 14px 12px;
  background: #fff; border: 1px solid var(--eta-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* ------------------------------------------------------ tira de 8 días */
/* Alturas fijas: la cápsula se ubica sólo por columnas (sin medir en JS). */
.cs-eta__strip {
  position: relative;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: 58px;
  margin: 0 -4px;
}
.cs-eta__caps {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
}
.cs-eta__day {
  grid-row: 1; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 2px; min-width: 0;
}
.cs-eta__dow {
  height: 14px; font-size: 10.5px; line-height: 14px; font-weight: 500;
  color: var(--eta-mute); white-space: nowrap; letter-spacing: .01em;
}
.cs-eta__num {
  margin-top: 8px; height: 30px;
  font-family: var(--eta-head); font-weight: 700; font-size: 14px; line-height: 30px;
  font-variant-numeric: tabular-nums; color: var(--eta-k);
}
.cs-eta__day.is-today::after {
  content: ""; position: absolute; left: 50%; top: 52px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--eta-k);
}
.cs-eta__day.is-month .cs-eta__dow, .cs-eta__day.is-today .cs-eta__dow { color: var(--eta-k); font-weight: 600; }
.cs-eta__day.is-off .cs-eta__num { color: var(--eta-off); }
.cs-eta__day.is-in .cs-eta__num { color: var(--eta-k); }
.cs-eta__day.is-in.is-off .cs-eta__num { opacity: .55; }

.cs-eta__cap {
  grid-row: 1; align-self: start;
  height: 30px; margin: 24px 2px 0;
  border-radius: 999px; background: var(--eta-y);
  transform-origin: left center;
}
.cs-eta.is-reveal .cs-eta__cap { animation: cs-eta-cap 420ms var(--eta-ease) 140ms both; }
@keyframes cs-eta-cap { from { transform: scaleX(0); opacity: .6; } }

.cs-eta__strip.is-neutral .cs-eta__num { color: #a3a3a3; }
.cs-eta__strip.is-neutral .cs-eta__day.is-off .cs-eta__num { color: #cfcfcf; }
.cs-eta__strip.is-neutral .cs-eta__day.is-today .cs-eta__num { color: var(--eta-k); }

.cs-eta__sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Botones genéricos (los usa el carrito). */
.cs-eta__btn {
  position: relative; appearance: none; border: 0; cursor: pointer;
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  font-family: var(--eta-head); font-weight: 700; font-size: 11px; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.cs-eta__btn::before { content: ""; position: absolute; inset: -2px 0; }
.cs-eta__btn--dark { background: var(--eta-k); color: #fff; }
.cs-eta__btn--light {
  background: var(--eta-fill); color: var(--eta-k);
  font-family: var(--eta-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0; text-transform: none;
}
.cs-eta__btn-icon { position: relative; width: 15px; height: 15px; }
.cs-eta__btn-icon svg { width: 15px; height: 15px; }

/* Spinner compartido: reemplaza el ícono mientras se geolocaliza. */
.cs-eta__spin {
  display: none; position: absolute; inset: 1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: cs-eta-spin 700ms linear infinite;
}
.cs-eta [aria-busy="true"] .cs-eta__spin, .cs-eta-picker [aria-busy="true"] .cs-eta__spin { display: block; }
.cs-eta [aria-busy="true"] .cs-eta__btn-icon svg, .cs-eta-picker [aria-busy="true"] .cs-eta-picker__geo-icon svg { visibility: hidden; }
.cs-eta [aria-busy="true"], .cs-eta-picker [aria-busy="true"] { cursor: progress; }
@keyframes cs-eta-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ frase del % */
.cs-eta__stat {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--eta-mute);
}
.cs-eta__stat strong { color: var(--eta-k); font-weight: 600; }
.cs-eta__meter { flex: none; margin-top: 6.5px; width: 56px; height: 4px; border-radius: 4px; background: #eee; overflow: hidden; }
.cs-eta__meter > span { display: block; height: 100%; border-radius: inherit; background: var(--eta-k); }

/* Línea extra del detalle: reparto propio en el Gran Concepción o zona extrema. */
.cs-eta__note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 8px; font-size: 12px; line-height: 17px; color: var(--eta-mute);
}
.cs-eta__note-icon { flex: none; width: 14px; height: 14px; margin-top: 1.5px; }
.cs-eta__note-icon svg { width: 14px; height: 14px; }
.cs-eta__note[hidden] { display: none !important; }

/* ----------------------------------------------------------------- retiro */
.cs-eta__pickup { margin: 10px -4px 0; padding: 10px 12px; background: #f7f7f7; border-radius: 12px; }
.cs-eta__stat + .cs-eta__pickup { margin-top: 12px; }
.cs-eta__note + .cs-eta__pickup { margin-top: 12px; }
.cs-eta__pk-row { display: flex; align-items: center; gap: 10px; }
.cs-eta__pk-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--eta-k); color: #fff;
}
.cs-eta__pk-icon svg { width: 16px; height: 16px; }
.cs-eta__pk-text { min-width: 0; flex: 1; }
.cs-eta__pk-main { font-size: 12.5px; line-height: 18px; font-weight: 500; }
.cs-eta__pk-main strong { font-weight: 700; }
.cs-eta__pk-sub { display: flex; flex-wrap: wrap; align-items: center; column-gap: 5px; font-size: 12px; line-height: 18px; color: var(--eta-mute); }
.cs-eta__pk-toggle {
  position: relative; appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; line-height: 18px; font-weight: 600; color: var(--eta-k);
  text-underline-offset: 3px;
}
.cs-eta__pk-toggle::before { content: ""; position: absolute; inset: -13px -6px; }
.cs-eta__pk-toggle svg { width: 13px; height: 13px; transition: transform 220ms var(--eta-ease); }
.cs-eta__pk-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 0fr → 1fr anima el alto real. visibility saca el enlace del tab-order cerrado. */
.cs-eta__pk-detail {
  display: grid; grid-template-rows: 0fr; margin-left: 40px;
  transition: grid-template-rows 220ms var(--eta-ease);
}
.cs-eta__pk-detail.is-open { grid-template-rows: 1fr; }
.cs-eta__pk-inner {
  overflow: hidden; min-height: 0; visibility: hidden;
  font-size: 12px; line-height: 17px; color: var(--eta-mute);
  transition: visibility 0s linear 220ms;
}
.cs-eta__pk-detail.is-open .cs-eta__pk-inner { visibility: visible; transition-delay: 0s; }
.cs-eta__pk-address { padding-top: 8px; color: #333; }
.cs-eta__pk-hours { margin-top: 2px; }
.cs-eta__pk-map {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; margin: 8px 0 2px; padding: 0 12px;
  border: 1px solid var(--eta-k); border-radius: 999px;
  font-family: var(--eta-head); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--eta-k) !important; text-decoration: none !important; background: #fff;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.cs-eta__pk-map svg { width: 13px; height: 13px; }

/* -------------------------------------------------------------- esqueleto */
/* Misma forma y alto que la barra colapsada: hidratar no mueve nada. */
.cs-eta__skeleton { pointer-events: none; }
.cs-eta__sk {
  display: block; border-radius: 18px; height: 36px;
  background: linear-gradient(90deg, #f0f0f0 30%, #f8f8f8 50%, #f0f0f0 70%) 0 0 / 300% 100%;
  animation: cs-eta-shimmer 1.3s linear infinite;
}
.cs-eta__sk--pill { width: 300px; max-width: 100%; }
.cs-eta__sk--chip { width: 118px; }
@media (min-width: 480px) { .cs-eta__sk--pill { width: 372px; } }
@media (min-width: 768px) { .cs-eta__sk--pill { width: 400px; } }
@media (max-width: 359px) { .cs-eta__sk--pill { height: 46px; } } /* la píldora corta ya va en 2 líneas */
@keyframes cs-eta-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ----------------------------------------------------- escritorio / hover */
@media (min-width: 768px) {
  .cs-eta__pill, .cs-eta__chip { font-size: 13px; }
}
@media (hover: hover) {
  .cs-eta__pill:hover { border-color: #bdbdbd; }
  .cs-eta__chip:hover { background: var(--eta-press); }
  .cs-eta__btn--dark:hover { background: var(--eta-y); color: var(--eta-k); }
  .cs-eta__btn--light:hover { background: var(--eta-press); }
  .cs-eta__pk-toggle:hover span { text-decoration: underline; }
  .cs-eta__pk-map:hover { background: var(--eta-k); color: #fff !important; }
}
.cs-eta__pill:active, .cs-eta__chip:active, .cs-eta__btn:active, .cs-eta__pk-map:active,
.cs-eta-picker__chip:active, .cs-eta-picker__close:active, .cs-eta-picker__geo:active { transform: scale(.97); }

/* ================================================================ selector */
.cs-eta-picker { position: fixed; inset: 0; z-index: 100000; font-size: 14px; line-height: 1.4; }
.cs-eta-picker__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity 240ms ease; }
.cs-eta-picker--sheet.is-open .cs-eta-picker__backdrop { opacity: 1; }
.cs-eta-picker--popover .cs-eta-picker__backdrop { background: transparent; }

.cs-eta-picker__panel {
  position: absolute; display: flex; flex-direction: column;
  background: #fff; outline: none; overflow: hidden;
}

/* móvil: bottom sheet */
.cs-eta-picker--sheet .cs-eta-picker__panel {
  left: 0; right: 0; bottom: 0; height: min(580px, 86vh); height: min(580px, 86dvh);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
}
.cs-eta-picker--sheet.is-open .cs-eta-picker__panel { transform: none; }
.cs-eta-picker__handle { flex: none; height: 20px; touch-action: none; cursor: grab; position: relative; }
.cs-eta-picker__handle::after { content: ""; position: absolute; left: 50%; top: 7px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: #d9d9d9; }
.cs-eta-picker--popover .cs-eta-picker__handle { display: none; }

/* escritorio: popover */
.cs-eta-picker--popover .cs-eta-picker__panel {
  width: 360px; max-width: calc(100vw - 16px); max-height: min(540px, calc(100vh - 16px));
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04);
  opacity: 0; transform: scale(.98);
  transition: opacity 160ms ease, transform 160ms var(--eta-ease);
}
.cs-eta-picker--popover .cs-eta-picker__head { padding-top: 14px; }
.cs-eta-picker--popover.is-open .cs-eta-picker__panel { opacity: 1; transform: none; }
.cs-eta-picker--centered .cs-eta-picker__panel { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.98); }
.cs-eta-picker--centered.is-open .cs-eta-picker__panel { transform: translate(-50%, -50%); }

.cs-eta-picker__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 16px 12px; }
.cs-eta-picker__title { font-family: var(--eta-head); font-weight: 700; font-size: 17px; line-height: 22px; letter-spacing: -.01em; color: var(--eta-k); }
.cs-eta-picker__close {
  appearance: none; border: 0; cursor: pointer; flex: none; position: relative;
  width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--eta-fill); color: var(--eta-k);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease, transform 120ms ease;
}
.cs-eta-picker__close::before { content: ""; position: absolute; inset: -6px; }
.cs-eta-picker__close svg { width: 16px; height: 16px; }

.cs-eta-picker__search-wrap { flex: none; position: relative; margin: 0 16px 8px; }
.cs-eta-picker__search-wrap svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: #8a8a8a; pointer-events: none; }
.cs-eta-picker__search {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 14px 0 38px;
  border: 1px solid transparent; border-radius: 12px; background: var(--eta-fill);
  font-size: 16px; /* 16px: iOS no hace zoom al enfocar */ line-height: 1; color: var(--eta-k);
  outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.cs-eta-picker__search::placeholder { color: #8a8a8a; }
.cs-eta-picker__search::-webkit-search-cancel-button { -webkit-appearance: none; }
.cs-eta-picker__search:focus { background: #fff; border-color: var(--eta-k); box-shadow: 0 0 0 3px rgba(0, 0, 0, .1); outline: none; }

.cs-eta-picker__geo {
  flex: none; appearance: none; border: 0; background: none; cursor: pointer; text-align: left; color: var(--eta-k);
  display: flex; align-items: center; gap: 12px;
  margin: 0 8px; padding: 8px; min-height: 52px; border-radius: 12px;
  font-size: 14px; font-weight: 500; line-height: 20px;
  transition: background-color 150ms ease, transform 120ms ease;
}
.cs-eta-picker__geo-icon {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--eta-y); display: inline-flex; align-items: center; justify-content: center;
}
.cs-eta-picker__geo-icon svg { width: 17px; height: 17px; }
.cs-eta-picker__geo-icon .cs-eta__spin { inset: 8px; }
.cs-eta-picker__geo-text { flex: 1; min-width: 0; }
.cs-eta-picker__geo > svg { width: 16px; height: 16px; color: #a3a3a3; }
.cs-eta-picker__msg { flex: none; margin: 0 16px 8px; font-size: 12.5px; line-height: 18px; color: #b42318; }

.cs-eta-picker__popular { flex: none; margin: 4px 16px 8px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.cs-eta-picker__label {
  margin: 0 0 8px !important;
  font-family: var(--eta-head); font-weight: 700; font-size: 10.5px; line-height: 14px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--eta-mute);
}
.cs-eta-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-eta-picker__chip {
  appearance: none; cursor: pointer; flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid #e3e3e3; background: #fff;
  font-size: 13px; font-weight: 500; line-height: 1; color: var(--eta-k);
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.cs-eta-picker__chip svg { width: 14px; height: 14px; margin-left: -3px; }
.cs-eta-picker__chip.is-current { background: var(--eta-k); border-color: var(--eta-k); color: #fff; }

.cs-eta-picker__list { list-style: none; margin: 0; padding: 0 8px 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.cs-eta-picker__list:empty { display: none; }
.cs-eta-picker__list li { margin: 0; padding: 0; }
.cs-eta-picker__item {
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left; color: var(--eta-k);
  width: 100%; min-height: 48px; padding: 6px 8px; border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; line-height: 20px; color: var(--eta-k);
}
.cs-eta-picker__item-name { flex: 1; min-width: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-eta-picker__item-name b { font-weight: 700; }
.cs-eta-picker__item-region { flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--eta-mute); }
.cs-eta-picker__item-check { flex: none; width: 16px; height: 16px; }
.cs-eta-picker__item-check svg { width: 16px; height: 16px; stroke-width: 2.25; }
.cs-eta-picker__item.is-active { background: var(--eta-fill); }
.cs-eta-picker__item.is-current .cs-eta-picker__item-name { font-weight: 600; }
.cs-eta-picker__empty { flex: none; padding: 28px 20px; text-align: center; font-size: 13px; color: var(--eta-mute); }
.cs-eta-picker__attribution { flex: none; margin-top: auto; padding: 8px 16px 12px; text-align: center; font-size: 10.5px; }
.cs-eta-picker__attribution a { color: #8a8a8a; text-decoration: underline; }

@media (hover: hover) {
  .cs-eta-picker__close:hover { background: var(--eta-press); }
  .cs-eta-picker__geo:hover { background: var(--eta-fill); }
  .cs-eta-picker__chip:hover { border-color: var(--eta-k); }
  .cs-eta-picker__chip.is-current:hover { background: #222; }
}

body.cs-eta-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cs-eta.is-enter .cs-eta__bar, .cs-eta.is-swap .cs-eta__pill-text, .cs-eta.is-swap .cs-eta__chip-name, .cs-eta.is-reveal .cs-eta__cap { animation: none; }
  .cs-eta__sk { animation: none; }
  .cs-eta *, .cs-eta-picker * { transition-duration: 0s !important; }
  .cs-eta__spin { animation-duration: 1.4s; }
}

/* ── Carrito / checkout ──────────────────────────────────────────────────
 * Fase 4 (plan): `.cs-eta-line` en el carrito y el mini-carrito, `.cs-eta-rate`
 * bajo cada método de envío del checkout. Selectores propios, sin tocar nada
 * de arriba (el widget de ficha). Mismo lenguaje visual (tokens, Montserrat/
 * Poppins, píldora amarilla al hover) que el resto del plugin.
 */
.cs-eta-line, .cs-eta-rate {
  --eta-k: #000;
  --eta-y: #ffe800;
  --eta-mute: #6b6b6b;
  --eta-line: #ececec;
  --eta-fill: #f4f4f4;
  --eta-head: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --eta-body: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--eta-body);
  color: var(--eta-k);
  -webkit-font-smoothing: antialiased;
}
.cs-eta-line *, .cs-eta-line *::before, .cs-eta-line *::after,
.cs-eta-rate *, .cs-eta-rate *::before, .cs-eta-rate *::after { box-sizing: border-box; }
.cs-eta-line svg, .cs-eta-rate svg { display: block; flex: none; }
.cs-eta-line[hidden], .cs-eta-rate[hidden] { display: none !important; }
.cs-eta-line :focus-visible, .cs-eta-rate :focus-visible { outline: 2px solid var(--eta-k); outline-offset: 2px; }
.cs-eta-line button { font-family: inherit; margin: 0; text-shadow: none; -webkit-tap-highlight-color: transparent; }

/* Línea compacta: carrito (sidebar, junto a la barra de envío gratis) y
   mini-carrito (drawer, antes de los botones). Mismo lenguaje de píldora
   que el widget de ficha: texto + chip de comuna. */
.cs-eta-line {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0; padding: 11px 14px;
  background: #fff; border: 1px solid var(--eta-line); border-radius: 12px;
  font-size: 12.5px; line-height: 1.4;
}
.cs-eta-line--mini { margin: 8px 0 12px; }
.cs-eta-line__icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--eta-fill); color: var(--eta-k);
  display: grid; place-items: center;
}
.cs-eta-line__icon svg { width: 16px; height: 16px; }
.cs-eta-line__body {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.cs-eta-line__text { color: var(--eta-mute); }
.cs-eta-line__text strong { color: var(--eta-k); font-weight: 700; }
.cs-eta-line__chip, .cs-eta-line__link {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--eta-k); white-space: nowrap;
  transition: background-color 150ms ease, transform 120ms ease;
}
.cs-eta-line__chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px 0 8px; border-radius: 999px;
  background: var(--eta-fill); font-size: 11.5px; font-weight: 600;
}
.cs-eta-line__chip svg { width: 12px; height: 12px; }
.cs-eta-line__chip svg:last-child { width: 11px; height: 11px; color: var(--eta-mute); }
.cs-eta-line__link {
  background: none; padding: 0; height: auto;
  font-size: 12.5px; font-weight: 500; color: var(--eta-mute);
}
.cs-eta-line__link strong { color: var(--eta-k); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) {
  .cs-eta-line__chip:hover { background: var(--eta-y); }
  .cs-eta-line__link:hover strong { color: #000; }
}
.cs-eta-line__chip:active, .cs-eta-line__link:active { transform: scale(.97); }

/* Bajo cada método de envío del checkout. Sin fondo propio a propósito:
   convive con el estado amarillo de cs-shipping-selector.php (el `li`
   seleccionado ya trae su propio realce) sin competir con él. El padding
   izquierdo alinea el texto con el label del radio, no con el radio mismo. */
.cs-eta-rate {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 4px 0 0; padding-left: 28px;
  font-size: 12px; line-height: 16px; color: var(--eta-mute);
}
/* Cada método del checkout es un `li` con `display:flex` (mu-plugin
   cs-shipping-selector). Sin esto nuestra línea entra como TERCERA columna y
   aplasta el nombre del método (reporte del dueño, 2026-09-16): tiene que
   ocupar su propia fila completa debajo del label. */
ul#shipping_method li,
.woocommerce-shipping-methods li,
ul[id^="shipping_method"] li { flex-wrap: wrap; }
ul#shipping_method li > .cs-eta-rate,
.woocommerce-shipping-methods li > .cs-eta-rate,
ul[id^="shipping_method"] li > .cs-eta-rate {
  flex: 0 0 100%; width: 100%; margin: 6px 0 0; padding-left: 28px;
}
.cs-eta-rate__icon { flex: none; width: 13px; height: 13px; margin-top: 1.5px; color: var(--eta-mute); }
.cs-eta-rate__icon svg { width: 13px; height: 13px; }
.cs-eta-rate__text strong { color: #000; font-weight: 600; }
/* Segunda línea: días de ruta del reparto propio, sector de una comuna partida
   o el aviso de zona extrema. Va debajo, más chica y sin competir con la fecha. */
.cs-eta-rate__note { display: block; margin-top: 1px; font-size: 11px; line-height: 15px; opacity: .85; }

@media (max-width: 480px) {
  .cs-eta-line { padding: 10px 12px; gap: 8px; }
  ul#shipping_method li > .cs-eta-rate,
  .woocommerce-shipping-methods li > .cs-eta-rate { padding-left: 26px; }
  .cs-eta-line__body { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cs-eta-rate { padding-left: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-eta-line *, .cs-eta-rate * { transition-duration: 0s !important; }
}