/*
 * TS20 · Mi ubicación + ETA al punto de recogida
 * Capa independiente: no altera el cálculo de tarifa de la calculadora.
 */

.ts20-origin-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: stretch;
  margin-bottom: .35rem;
}

.ts20-origin-tools .autocomplete-host {
  min-width: 0;
  margin: 0;
}

.ts20-my-location-btn {
  min-height: 48px;
  padding: .72rem .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  white-space: nowrap;
  border: 1px solid rgba(180, 124, 255, .55);
  border-radius: 12px;
  background: rgba(141, 77, 255, .09);
  color: #f5efff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ts20-my-location-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(180, 124, 255, .9);
  background: rgba(141, 77, 255, .16);
  box-shadow: 0 10px 28px rgba(83, 34, 160, .2);
}

.ts20-my-location-btn:focus-visible,
.ts20-eta-btn:focus-visible,
.ts20-eta-map-link:focus-visible {
  outline: 3px solid rgba(180, 124, 255, .42);
  outline-offset: 3px;
}

.ts20-my-location-btn[disabled] {
  opacity: .65;
  cursor: wait;
  transform: none;
}

.ts20-my-location-btn.is-active {
  border-color: rgba(69, 214, 137, .75);
  background: rgba(35, 173, 101, .12);
  color: #e8fff2;
}

.ts20-origin-geo-status {
  min-height: 0;
  margin: .45rem 0 1rem;
  padding: .62rem .78rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: rgba(246,246,247,.78);
  font-size: .86rem;
  line-height: 1.45;
}

.ts20-origin-geo-status[hidden] {
  display: none !important;
}

.ts20-origin-geo-status.is-success {
  border-color: rgba(69, 214, 137, .24);
  background: rgba(35, 173, 101, .07);
  color: #dfffee;
}

.ts20-origin-geo-status.is-error {
  border-color: rgba(239, 68, 68, .32);
  background: rgba(239, 68, 68, .08);
  color: #ffe1e1;
}

/* ETA: una única tarjeta compacta. Se muestra solo cuando existe recogida válida. */
.ts20-eta-panel {
  position: relative;
  overflow: hidden;
  margin: 1rem 0 1.05rem;
  padding: 1rem;
  border: 1px solid rgba(180, 124, 255, .22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(141,77,255,.13), transparent 42%),
    rgba(15, 15, 19, .72);
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
}

.ts20-eta-panel[hidden] {
  display: none !important;
}

.ts20-eta-head {
  display: flex;
  align-items: flex-start;
  gap: .72rem;
}

.ts20-eta-dot {
  width: 11px;
  height: 11px;
  margin-top: .35rem;
  border-radius: 50%;
  flex: 0 0 11px;
  background: #a9a9b0;
  box-shadow: 0 0 0 5px rgba(169,169,176,.10);
}

.ts20-eta-panel[data-state="available"] .ts20-eta-dot,
.ts20-eta-panel[data-state="success"] .ts20-eta-dot {
  background: #45d689;
  box-shadow: 0 0 0 5px rgba(69,214,137,.12);
}

.ts20-eta-panel[data-state="busy"] .ts20-eta-dot,
.ts20-eta-panel[data-state="error"] .ts20-eta-dot {
  background: #ef4444;
  box-shadow: 0 0 0 5px rgba(239,68,68,.12);
}

.ts20-eta-panel[data-state="loading"] .ts20-eta-dot {
  background: #b47cff;
  box-shadow: 0 0 0 5px rgba(180,124,255,.12);
  animation: ts20EtaPulse 1.2s ease-in-out infinite;
}

@keyframes ts20EtaPulse {
  0%, 100% { opacity: .55; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}

.ts20-eta-copy {
  min-width: 0;
  flex: 1;
}

.ts20-eta-title {
  display: block;
  margin: 0 0 .24rem;
  color: #fff;
  font-weight: 850;
  font-size: .98rem;
}

.ts20-eta-message {
  margin: 0;
  color: rgba(246,246,247,.73);
  font-size: .87rem;
  line-height: 1.48;
}

.ts20-eta-value-wrap {
  margin-top: .9rem;
  padding: .88rem .95rem;
  border: 1px solid rgba(69,214,137,.2);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(35,173,101,.11), rgba(141,77,255,.07));
}

.ts20-eta-value-wrap[hidden] {
  display: none !important;
}

.ts20-eta-value-label {
  display: block;
  color: rgba(238,255,246,.72);
  font-size: .8rem;
  font-weight: 700;
}

.ts20-eta-value {
  display: block;
  margin-top: .15rem;
  color: #effff6;
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
}

.ts20-eta-meta {
  display: block;
  margin-top: .42rem;
  color: rgba(246,246,247,.6);
  font-size: .76rem;
  line-height: 1.35;
}

.ts20-eta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
}

.ts20-eta-btn {
  min-height: 42px;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #8d4dff, #a96dff);
  color: #fff;
  font: inherit;
  font-size: .86rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(103, 48, 190, .22);
}

.ts20-eta-btn:hover:not(:disabled) {
  filter: brightness(1.07);
}

.ts20-eta-btn:disabled {
  opacity: .62;
  cursor: wait;
  box-shadow: none;
}

.ts20-eta-map-link {
  color: #cbb1ff;
  font-size: .83rem;
  font-weight: 750;
  text-decoration: none;
}

.ts20-eta-map-link:hover {
  text-decoration: underline;
}

@media (max-width: 620px) {
  .ts20-origin-tools {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .ts20-my-location-btn {
    width: 100%;
    min-height: 44px;
  }

  .ts20-eta-panel {
    padding: .9rem;
    border-radius: 14px;
  }

  .ts20-eta-btn {
    width: 100%;
  }

  .ts20-eta-map-link {
    width: 100%;
    text-align: center;
    padding: .25rem 0;
  }
}