/* ==========================================================
   Estúdio Alice - Design System & Custom Styles
   ========================================================== */

/* Cartão Fidelidade Gradient Glass */
.card-loyalty {
  background: linear-gradient(135deg, #B76E79 0%, #8A4650 50%, #C5A059 100%);
}

/* Botões com Efeito Rose Gold */
.btn-primary {
  background: linear-gradient(135deg, #DEA291 0%, #B76E79 100%);
  color: #FFFFFF;
  transition: all 0.25s ease;
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(183, 110, 121, 0.45);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Abas de Navegação */
.tab-btn.active {
  background: #FFFFFF;
  color: #B76E79;
  box-shadow: 0 2px 8px -2px rgba(183, 110, 121, 0.25);
}

/* Pills de Categoria */
.cat-pill.active-cat {
  background: #B76E79;
  color: #FFFFFF;
  border-color: #B76E79;
  box-shadow: 0 4px 12px -3px rgba(183, 110, 121, 0.35);
}

.cat-pill.active-cat i {
  color: #FFFFFF;
}

/* Slot de Horário */
.slot-btn {
  transition: all 0.2s ease;
  border: 1px solid #F5DFD7;
  background-color: #FFFFFF;
}

.slot-btn:hover:not(:disabled) {
  border-color: #B76E79;
  color: #B76E79;
}

.slot-btn.selected {
  background: #B76E79;
  color: #FFFFFF;
  border-color: #B76E79;
  box-shadow: 0 4px 10px -2px rgba(183, 110, 121, 0.4);
}

/* Card de Serviço */
.service-card {
  transition: all 0.2s ease;
  border: 1.5px solid #F5DFD7;
  cursor: pointer;
}

.service-card:hover {
  border-color: #DEA291;
  transform: translateY(-1px);
}

.service-card.selected {
  border-color: #B76E79;
  background-color: #FAF0ED;
  box-shadow: 0 4px 14px -4px rgba(183, 110, 121, 0.25);
}

/* Animações */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-up {
  animation: scaleUp 0.25s ease-out forwards;
}

/* Coração Fidelidade Glow */
.heart-filled {
  color: #FFFFFF;
  fill: #FFFFFF;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  animation: heartPulse 0.3s ease;
}

.heart-empty {
  color: rgba(255, 255, 255, 0.3);
  stroke-dasharray: 2 2;
}

@keyframes heartPulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}