/* ==========================================================================
   ZOONARANJA — Extras: soporta clases generadas dinámicamente por JS
   (locations, booking, calculadora, vacunas, chatbot, formularios)
   ========================================================================== */

/* ---- Utilidades genéricas ---- */
.hidden { display: none !important; }
.chip {
  font-size: 0.68rem;
  background: var(--ink-100);
  color: var(--ink-600);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.badge-sm { font-size: 0.62rem; padding: 0.15rem 0.5rem; }

/* Estado de carga en botones */
.btn.loading, .location-search-bar button.loading {
  opacity: 0.75;
  pointer-events: none;
}
#find-nearest-btn.loading i::before { content: '\f110'; animation: fa-spin 1s linear infinite; }

/* ---- Panel de tarjeta de sede (renderizado dinámico por locations.js) ---- */
#location-card-panel {
  position: relative;
  margin-bottom: var(--space-md);
  z-index: 2;
}
#location-card-panel:not(.open) { display: none; }
#location-card-panel .location-card { position: relative; }
#location-card-panel .location-card,
#location-card-panel .location-card * {
  visibility: visible;
}
.location-card-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10,31,43,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.location-card-media { position: relative; height: 180px; overflow: hidden; }
.location-card-media img { width: 100%; height: 100%; object-fit: cover; }
.location-card-media .badge { position: absolute; bottom: 10px; left: 10px; }
.location-card-body { padding: var(--space-md); }
.location-card-body h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.location-card-address, .location-card-phone, .location-card-hours {
  display: flex; align-items: flex-start; gap: 0.5rem;
  color: var(--ink-500); font-size: 0.85rem; margin-bottom: 0.4rem;
}
.location-card-address i, .location-card-phone i, .location-card-hours i { color: var(--orange); margin-top: 0.15rem; }
.location-services { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0; }

@media (max-width: 768px) {
  #location-card-panel {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
  }

  .location-card-media {
    height: 120px;
  }

  .location-card-body {
    padding: 1rem;
  }
}

.location-list-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--grad-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.location-list-info { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }
.location-list-info strong { font-size: 0.92rem; color: var(--ink-900); }
.location-list-info span { font-size: 0.78rem; color: var(--ink-500); }
.locations-empty { color: var(--ink-400); text-align: center; padding: var(--space-lg) 0; }

.map-pin.active .pin-dot { background: var(--turquoise); transform: scale(1.35); }
.map-pin .pin-pointer { display: none; } /* la punta ya se dibuja con ::after en 04-components.css */

/* ---- Buscador y "sede más cercana" ---- */
.location-search-bar .finder-box button {
  border-radius: var(--radius-full);
  padding: 0.7rem 1.3rem;
  background: var(--grad-warm);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
}

/* ---- Booking: pasos ---- */
.booking-step-panel { display: none; }
.booking-step-panel.active { display: block; }
.vet-pick-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--ink-100);
  background: var(--white);
  text-align: center;
  transition: all var(--dur-fast) var(--ease-soft);
}
.vet-pick-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.vet-pick-name { font-weight: 700; font-size: 0.85rem; color: var(--ink-800); }
.vet-pick-spec { font-size: 0.75rem; color: var(--turquoise); font-weight: 600; }
.vet-pick-card:hover { border-color: var(--turquoise); transform: translateY(-3px); }
.vet-pick-card.selected { border-color: var(--orange); box-shadow: var(--shadow-glow-orange); background: rgba(255,122,48,0.05); }

#booking-vet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
#booking-time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.booking-actions {
  display: flex;
  gap: 0.8rem;
}
.booking-actions .btn {
  min-width: 0;
}
.time-slot {
  padding: 0.6rem; border-radius: var(--radius-sm);
  background: var(--white); border: 1.5px solid var(--ink-100);
  font-weight: 700; font-size: 0.85rem; color: var(--ink-700);
  transition: all var(--dur-fast);
}
.time-slot:hover { border-color: var(--turquoise); }
.time-slot.selected { background: var(--grad-primary); color: #fff; border-color: transparent; }

.booking-summary-list { display: flex; flex-direction: column; gap: 0.6rem; margin: var(--space-sm) 0 var(--space-md); }
.booking-summary-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--ink-700); }
.booking-summary-list i { color: var(--orange); width: 18px; }

.form-control.error, #booking-vet-grid.error, #booking-time-grid.error { outline: 2px solid #EF4444; outline-offset: 2px; border-radius: var(--radius-sm); }

#booking-success {
  width: 100%;
  min-height: 360px;
  align-items: center;
  justify-content: center;
}
#booking-success.show {
  display: flex;
}
#booking-success:not(.show) { display: none; }

/* ---- Calculadora de edad ---- */
.calc-result-inner { text-align: center; padding: var(--space-md) 0; }
.calc-result-icon { font-size: 2rem; color: var(--orange); margin-bottom: 0.5rem; }
.calc-result-number { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 800; line-height: 1.2; color: #fff; }
.calc-result-label { color: #fff; font-size: 0.9rem; margin: 0.3rem 0 0.7rem; }
.calc-stage-badge { background: var(--grad-warm); color: #fff; }
.form-control.error, input.error, select.error { border-color: #EF4444 !important; }

/* ---- Calendario de vacunas ---- */
.vaccine-species-btn {
  padding: 0.6rem 1.3rem; border-radius: var(--radius-full);
  background: var(--white); border: 1.5px solid var(--ink-200); font-weight: 700; font-size: 0.85rem;
  margin-right: 0.6rem;
}
.vaccine-species-btn.active { background: var(--grad-primary); color: #fff; border-color: transparent; }
.vaccine-step-content { padding-left: 0.3rem; }
.vaccine-step-week { color: var(--orange); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.vaccine-step-dot {
  position: absolute; left: -2.5rem; top: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--grad-warm); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--turquoise);
}

/* ---- Chatbot: acciones dentro de mensajes ---- */
.chat-action-btn {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.75rem; font-weight: 700;
  padding: 0.4rem 0.8rem; border-radius: var(--radius-full);
  background: var(--grad-warm); color: #fff;
}
.chat-quick-reply {
  font-size: 0.75rem; padding: 0.4rem 0.8rem; border-radius: var(--radius-full);
  background: var(--ink-100); color: var(--blue-vet); font-weight: 600;
  transition: background var(--dur-fast);
}
.chat-quick-reply:hover { background: var(--turquoise); color: #fff; }

/* ---- Formularios: error dinámico ---- */
.form-error-msg { display: block !important; }
.form-group .form-error-msg:empty { display: none !important; }
.form-control.valid { border-color: var(--emerald); }

/* ---- Comparador antes/después: estado dragging ---- */
.compare-wrap.dragging { cursor: ew-resize; }
.compare-wrap.dragging .compare-handle { transform: translate(-50%, -50%) scale(1.08); }

/* ---- WhatsApp tag mostrado por tap en mobile ---- */
.wa-tag.shown { animation: none; transform: scale(1.08); }

#whatsapp-widget:not(.visible) { opacity: 0; pointer-events: none; }

/* ---- Newsletter input error ---- */
.footer-newsletter input.error { outline: 2px solid #EF4444; }

#pet-companion-track {
  position: fixed;
  inset: 0;
  height: 100vh;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

@media (max-width: 768px) {
  #booking .booking-panel {
    padding: var(--space-lg) var(--space-md);
  }

  #booking .booking-steps {
    margin-inline: -0.25rem;
    gap: 0.25rem;
  }

  #booking .booking-step {
    min-width: 0;
  }

  #booking .booking-step span.step-label {
    max-width: 5.5rem;
    font-size: 0.68rem;
    line-height: 1.25;
  }

  #booking-vet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .vet-pick-card {
    min-width: 0;
    min-height: 158px;
    padding: 0.75rem 0.45rem;
  }

  .vet-pick-card img {
    width: 60px;
    height: 60px;
  }

  .vet-pick-name,
  .vet-pick-spec {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .booking-actions {
    flex-wrap: wrap;
  }

  .booking-actions .btn {
    flex: 1 1 140px;
    min-height: 44px;
  }

  #pet-companion-track {
    height: 100vh;
  }
}

@media (max-width: 360px) {
  #booking .booking-panel {
    padding-inline: 0.9rem;
  }

  #booking .booking-step span.step-label {
    font-size: 0.62rem;
  }

  #booking-vet-grid {
    gap: 0.55rem;
  }

  .vet-pick-card {
    min-height: 150px;
  }

  .booking-actions {
    flex-direction: column-reverse;
  }

  .booking-actions .btn {
    width: 100%;
    flex-basis: auto;
  }
}