/* PEYPO — Componentes compartidos del flujo de búsqueda y reserva */

/* ─── Pasos 3 y 4 del buscador: mascotas ─── */
.modal-help {
  color: var(--color-dark-500);
  font-size: var(--text-sm);
  margin: calc(var(--space-3) * -1) 0 var(--space-6);
  max-width: 90%;
}

.pet-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
}

.pet-counter-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pet-counter-info small {
  display: block;
  color: var(--color-dark-300);
  font-size: var(--text-xs);
}

.pet-counter-icon { font-size: 1.75rem; }

.pet-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.stepper-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.stepper-btn:hover { opacity: 0.8; }

.stepper-value {
  min-width: 1.5rem;
  text-align: center;
  font-weight: var(--weight-semibold);
}

.choice-grid {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.choice-grid-4 { grid-template-columns: repeat(4, 1fr); }
.choice-grid-3 { grid-template-columns: repeat(3, 1fr); }

.choice-card {
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-dark);
  transition: all var(--transition-fast);
}

.choice-card span { font-size: 1.5rem; }
.choice-card small { color: var(--color-dark-300); font-size: var(--text-xs); }
.choice-card-text { font-weight: var(--weight-semibold); padding: var(--space-4); }
.choice-card:hover { border-color: var(--color-dark-300); }

.choice-card.selected {
  border-color: var(--color-dark);
  box-shadow: 0 0 0 1px var(--color-dark);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

.btn-pill-blue {
  background: #1B68D6;
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.9rem 2rem;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.btn-pill-blue:disabled {
  background: var(--color-gray-100);
  color: var(--color-dark-300);
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .choice-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Favoritos ─── */
.fav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-dark-300);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.fav-btn:hover { border-color: var(--color-dark-300); }
.fav-btn.active { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-light); }

/* ─── Estado vacío de resultados ─── */
.empty-results {
  background: var(--color-white);
  border: 1.5px dashed var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.empty-results p { color: var(--color-dark-500); font-size: var(--text-sm); max-width: 420px; }
.pet-steppers { border: 2px solid var(--color-gray-200); border-radius: var(--radius-md); padding: 0 var(--space-4); }
.pet-steppers .pet-counter-row { padding: var(--space-3) 0; }
.pet-steppers .pet-counter-row + .pet-counter-row { border-top: 1px solid var(--color-gray-200); }

/* ─── Calendario de disponibilidad ─── */
.cal-legend { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.cal-nav { display: flex; justify-content: space-between; margin-bottom: var(--space-2); }
.cal-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--color-dark-300); background: var(--color-white); font-size: 1.2rem; cursor: pointer; line-height: 1; }
.cal-arrow:disabled { opacity: 0.35; cursor: default; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.cal-title { text-align: center; font-weight: var(--weight-semibold); margin-bottom: var(--space-2); text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-dark-500); padding-bottom: 4px; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-semibold); min-width: 0; }
.cal-day.ok { background: #BDE9CC; color: #14532D; }
.cal-day.off, .cal-day.past { background: repeating-linear-gradient(135deg, #F1F2F5 0 4px, #E4E6EB 4px 6px); color: var(--color-dark-500); }
.cal-day.past { opacity: 0.55; }
.cal-legend .cal-day { width: 22px; aspect-ratio: auto; height: 22px; }
.cal-day[data-iso] { cursor: pointer; }
.cal-day[data-iso]:hover { outline: 2px solid var(--color-dark); }
@media (max-width: 640px) { .cal-months { grid-template-columns: 1fr; } }