/* P1R6CS — orchestration propre à l'étape catégorie/service.
   Toute géométrie de carte est déléguée à entity-card-layout.css. */

#step-service .content-subtitle {
  margin-top: var(--public-space-xs) !important;
  color: color-mix(in srgb, var(--brand-card-panel-bg) 82%, transparent) !important;
  letter-spacing: .01em !important;
}
body.booking-service-step-active .booking-topbar,
.booking-container:has(#step-service.active) .booking-topbar {
  position: relative !important;
  top: auto !important;
  z-index: 30 !important;
}
#step-service.active {
  display: flex !important;
  flex-direction: column !important;
}
#step-service .content-header { order: 0; }
#step-service > .action-buttons { order: 1; }
#step-service .content-body { order: 2; }

#step-service > .public-action-bar {
  margin-top: 0 !important;
  background: color-mix(in srgb, var(--brand-card-panel-bg) 96%, transparent) !important;
  border-top: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
  box-shadow: var(--shadow-xs) !important;
  position: static !important;
  top: auto !important;
  z-index: 18;
}
#step-service .service-step-action-hint {
  color: var(--public-text-muted);
  text-align: center;
  line-height: 1.35;
}
#step-service[data-service-view="categories"] #service-continue-btn:disabled { opacity: .72 !important; }
#step-service[data-service-view="categories"][data-has-current-choice="true"] #service-continue-btn:not(:disabled) {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  color: var(--brand-card-button-text) !important;
}

#step-service .public-entity-card { cursor: pointer !important; }
#step-service .public-entity-card.is-opening,
#step-service .public-entity-card.is-opening:hover {
  pointer-events: none;
  opacity: .92;
}
#step-service .public-entity-card.is-opening .public-entity-card__action::after {
  content: "";
  inline-size: .85em;
  block-size: .85em;
  margin-inline-start: var(--public-space-xs);
  border-radius: var(--radius-pill);
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: entityCardActionSpin .75s linear infinite;
}
@keyframes entityCardActionSpin { to { transform: rotate(360deg); } }

/* Les badges/meta gardent le vocabulaire du modèle ; cette étape ne décide que
   leur contraste métier, jamais leur taille ou leur hauteur. */
#step-service .public-entity-card .public-entity-card__meta,
#step-service .public-entity-card .service-feature,
#step-service .public-entity-card .availability-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--brand-secondary) !important;
  -webkit-text-fill-color: var(--brand-secondary) !important;
  background: color-mix(in srgb, var(--brand-card-panel-bg) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent) !important;
  text-shadow: none !important;
}
#step-service .public-entity-card .public-entity-card__price {
  color: var(--brand-card-text) !important;
  -webkit-text-fill-color: var(--brand-card-text) !important;
  background: var(--brand-card-button-text) !important;
}

@container entity-card-grid (min-width: 56rem) {
  #step-service .service-grid--categories.consultation-front-preview > .public-entity-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc(var(--public-card-grid-min) * 1.35)) !important;
  }
}