/* Cosmetic scheduling update. Load after the existing scheduling.css.
   Scoped to the four updated cosmetic pages; medical scheduling is unaffected. */
body.cosmetic-providers-page,
body.cosmetic-fee-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cosmetic-providers-page .booking-main,
.cosmetic-fee-page .booking-main { flex: 1; }

.cosmetic-providers-page .booking-shell {
  --booking-max-width: 1440px;
  width: min(90%, var(--booking-max-width));
  min-height: 0;
  padding-bottom: 36px;
}

.cosmetic-providers-page .section-space { margin-top: 34px; }

.cosmetic-providers-page .provider-grid--four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.cosmetic-providers-page .provider-card {
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

/* Each provider uses the SAME fixed-ratio photo window and bottom crop.
   The source photos all measure 940 x 788. Only the image inside Christina's
   window is scaled/repositioned, keeping her head between Mark's and Michelle's.
   Her full photo still extends past the window's bottom, avoiding a thumbnail. */
.cosmetic-providers-page .provider-portrait {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 71.428571%; /* 1.4:1 window; also works without aspect-ratio support. */
  overflow: hidden;
  flex: 0 0 auto;
  background: #fff;
}

.cosmetic-providers-page .provider-portrait .provider-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  background: #fff;
}

.cosmetic-providers-page .provider-portrait--christina .provider-photo {
  width: 90%;
  left: 5%;
  top: 5%;
}

.cosmetic-providers-page .provider-card-body { padding: 22px 24px 24px; }
.cosmetic-providers-page .provider-card h2 { font-size: 21px; }
.cosmetic-providers-page .provider-card-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
}
.cosmetic-providers-page .provider-card-actions .button {
  width: 100%;
  margin-top: 0;
  padding: 12px;
}
.cosmetic-providers-page .provider-availability {
  margin: 0;
  padding: 9px 8px;
  background: #e3ebe6;
  color: var(--booking-ink);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* Match the approved dark, legible action labels on sage. */
.cosmetic-providers-page .button,
.cosmetic-fee-page .button { color: var(--booking-ink); }
.cosmetic-providers-page .header-book,
.cosmetic-fee-page .header-book { color: #fff; }
.cosmetic-providers-page .header-book:hover,
.cosmetic-fee-page .header-book:hover { color: var(--booking-dark); }
.cosmetic-fee-page .button[disabled] {
  background: #dbe2dd;
  border-color: #dbe2dd;
  color: #4a5650;
  opacity: 1;
}

/* Clear the desktop column flex-basis when review panels stack on mobile. */
@media (max-width: 1199px) {
  .cosmetic-providers-page .provider-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .cosmetic-fee-page .review-grid > :first-child { flex: 0 1 auto; }
  .cosmetic-fee-page .review-grid > .review-panel { width: 100%; }
}
@media (max-width: 720px) {
  .cosmetic-providers-page .booking-shell { width: calc(100% - 32px); }
  .cosmetic-providers-page .provider-grid--four { grid-template-columns: minmax(0, 1fr); }
  .cosmetic-providers-page .provider-card-body { padding: 22px; }
  .cosmetic-providers-page .provider-card h2 { font-size: 22px; }
}
@media (max-width: 560px) {
  .cosmetic-fee-page .utility-row { row-gap: 10px; }
  .cosmetic-fee-page .help-link { grid-row: 2; justify-self: start; }
  .cosmetic-fee-page .booking-steps { grid-row: 3; }
}