/**
 * Estimated delivery block on the PDP. Tokens only — no new colors.
 *
 * Mobile-first (REQ-22): base rules describe the 390px strip; the min-width query widens
 * the day chips. 30.0625rem is the complement of the 30rem max-width query it replaces —
 * the unit stays rem so a reader who raises their browser's default font size still
 * crosses the breakpoint at the same text size.
 */

.cp-eta {
  margin-block: var(--cp-space-md);
  padding: var(--cp-space-sm);
  border: 1px solid var(--cp-line);
  background: var(--cp-sheet);
}

.cp-eta__title {
  margin: 0 0 var(--cp-space-2xs);
  color: var(--cp-graphite);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-eta__headline {
  margin: 0 0 var(--cp-space-2xs);
  color: var(--cp-ink);
  font-size: var(--cp-text-md);
  line-height: 1.35;
}

.cp-eta__headline strong {
  border-bottom: 2px solid var(--cp-amber);
  font-weight: 700;
  white-space: nowrap;
}

.cp-eta__note,
.cp-eta__disclaimer {
  margin: 0;
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  line-height: 1.5;
}

.cp-eta__caption {
  margin: var(--cp-space-sm) 0 var(--cp-space-2xs);
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Wraps instead of scrolling: the buy column is narrow, and a half-visible day
   reads as a broken layout rather than as an affordance. */
.cp-eta__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-2xs);
  margin: 0 0 var(--cp-space-sm);
  padding: 0;
  list-style: none;
}

.cp-eta__day {
  flex: 0 1 calc((100% - var(--cp-space-2xs) * 2) / 3);
  min-width: 4rem;
  padding: var(--cp-space-xs) 0.4rem;
  border: 1px solid var(--cp-line);
  background: var(--cp-page);
  text-align: center;
}

.cp-eta__date {
  display: block;
  color: var(--cp-ink);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  text-transform: capitalize;
}

.cp-eta__slots {
  display: block;
  margin-top: 0.15rem;
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  font-variant-numeric: tabular-nums;
}

.cp-eta__day--full {
  border-style: dashed;
  background: transparent;
  opacity: 0.55;
}

.cp-eta__day--full .cp-eta__date,
.cp-eta__day--full .cp-eta__slots {
  color: var(--cp-graphite);
}

.cp-eta__day--target {
  border-color: var(--cp-ink);
  background: var(--cp-amber);
  opacity: 1;
}

.cp-eta__day--target .cp-eta__date,
.cp-eta__day--target .cp-eta__slots {
  color: var(--cp-ink);
}

.cp-eta__disclaimer {
  font-style: italic;
}

@media (min-width: 30.0625rem) {
  .cp-eta__day {
    min-width: 4.5rem;
  }
}

/* A closed day stays in the strip, greyed and struck through, so the customer sees WHY the
   dates jump instead of wondering why the workshop looks slow. It is never bookable: the
   slot label reads "cerrado", not a number. */
.cp-eta__day--closed {
  border-style: dashed;
  border-color: var(--cp-line);
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    color-mix(in srgb, var(--cp-graphite) 12%, transparent) 4px,
    color-mix(in srgb, var(--cp-graphite) 12%, transparent) 8px
  );
}

.cp-eta__day--closed .cp-eta__date {
  color: var(--cp-graphite);
  text-decoration: line-through;
}

.cp-eta__day--closed .cp-eta__slots {
  color: var(--cp-graphite);
  font-style: italic;
  text-transform: lowercase;
}

.cp-eta__closed-note {
  margin: 0 0 var(--cp-space-2xs);
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  line-height: 1.5;
}