.public-header, .public-footer { padding: var(--space-3) var(--space-4); }
.public-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: .85rem; }
.public-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.public-shell { width: min(100% - 2rem, var(--content-width)); margin-inline: auto; }

/* "Go back one step" button shown at the top of every booking-flow page
   except the homepage. Full-width like the other primary actions, so it
   reads clearly as a button rather than a small text link. */
.back-link { margin: 0 0 var(--space-4); }
.back-link a { width: 100%; }

/* Language dropdown: a native <details>/<summary> disclosure so it works
   without any JavaScript, per the project's PHP/HTML/CSS-only constraint. */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.5rem; padding: 0.45rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); font-weight: 700; font-size: .85rem; background: var(--color-surface); color: var(--color-text); }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { content: ""; }
.lang-switch summary::after { content: "\25BE"; margin-left: 0.2rem; color: var(--color-muted); }
.lang-switch[open] summary { border-color: var(--color-accent); }
.lang-switch nav { position: absolute; right: 0; top: calc(100% + 0.4rem); display: grid; min-width: 8rem; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface-raised); box-shadow: var(--shadow); z-index: 30; }
.lang-switch nav a { padding: 0.55rem 0.7rem; border-radius: var(--radius-small); text-decoration: none; color: var(--color-text); font-weight: 600; font-size: .9rem; }
.lang-switch nav a:hover { background: var(--color-surface); }
.lang-switch nav a.is-active { color: #fff; border-bottom: 2px solid var(--color-accent); }
.public-hero { display: grid; gap: var(--space-2); padding: var(--space-3) 0 var(--space-4); }
.public-card, .booking-card { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); }
.public-grid { display: grid; gap: var(--space-2); }

.service-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.service-list li { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2); border-bottom: 1px solid var(--color-border); }
.service-list-name { display: flex; align-items: center; gap: 0.6rem; }

/* Shared small line-icon used next to a service's name across the price
   list, the service-selection cards, and the in-form service buttons. */
.service-icon { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; color: #fff; }

/* Short instructional line shown at the top of a booking step, e.g.
   "Step 1: select the service" / "Step 2: select the date, then the time". */
.step-hint { color: var(--color-muted); font-size: .9rem; font-weight: 600; margin-bottom: var(--space-3); }

/* Day + date carousel: a single horizontally-scrollable row of compact date
   chips (weekday, day number, month) so picking a day and seeing its times
   both happen on one page without a separate weekday step. */
.date-carousel-wrap { margin-bottom: var(--space-3); }
.date-carousel {
  display: flex; gap: 0.5rem; margin: 0; padding: 0.25rem 0.1rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.date-carousel li { flex: 0 0 auto; scroll-snap-align: start; }
.date-carousel-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  min-width: 3.75rem; padding: 0.55rem 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-small);
  background: var(--color-surface-raised); color: var(--color-text); text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.date-carousel-item:hover, .date-carousel-item:focus-visible { border-color: var(--color-accent); transform: translateY(-2px); }
.date-carousel-item.is-selected { background: var(--color-accent); border-color: var(--color-accent); }
.date-carousel-weekday { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.date-carousel-item.is-selected .date-carousel-weekday { color: #f5f5f5; }
.date-carousel-daynum { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.date-carousel-month { font-size: .7rem; color: var(--color-muted); }
.date-carousel-item.is-selected .date-carousel-month { color: #f5f5f5; }

.booking-form { display: grid; gap: var(--space-3); }
/* Time slots: 2-per-row grid of larger, easy-to-tap buttons. The list itself
   scrolls inside a capped-height box (see .slot-grid-scroll) instead of
   pushing the whole page down when a day has many half-hour slots. */
.slot-grid-scroll { max-height: 16rem; overflow-y: auto; padding-right: 0.25rem; }
.slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.slot-option { position: relative; display: flex; align-items: center; justify-content: center; min-height: 3.5rem; width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface-raised); color: var(--color-text); font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.slot-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.slot-option:hover, .slot-option:focus-within { border-color: var(--color-accent); }
.slot-option:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.slot-option .slot-time { font-size: 1.05rem; }

/* Service multi-select: same clean toggle-button treatment as the time slots
   above, with an icon + name + price stacked instead of a checkbox row. */
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.service-choice { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface-raised); font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.service-choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.service-choice:hover, .service-choice:focus-within { border-color: var(--color-accent); }
.service-choice:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.service-choice-name { font-size: .85rem; line-height: 1.2; }
.service-choice-price { font-size: .8rem; color: var(--color-muted); font-weight: 700; }
.service-choice:has(input:checked) .service-choice-price { color: #f5f5f5; }
.service-choice:has(input:checked) .service-icon { color: #fff; }

/* Front-page "choose a service" step: fixed two-per-row grid so buttons are
   big enough to tap comfortably on a phone without needing much scrolling.
   Kept separate from .service-grid/.service-choice above (the later
   date+time page's multi-select) so neither style affects the other. */
.service-select-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.service-select-grid li { display: flex; }
.service-select-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  height: 8rem; width: 100%; padding: var(--space-3); text-align: center; overflow: hidden;
  border: 1px solid var(--color-border); border-bottom: 3px solid var(--color-accent); border-radius: var(--radius);
  background: var(--color-surface-raised); color: var(--color-text); text-decoration: none;
  font-weight: 700; font-size: 1rem; cursor: pointer; transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.service-select-card input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.service-select-card:hover, .service-select-card:focus-within { background: var(--color-surface); border-color: var(--color-accent); transform: translateY(-2px); }
.service-select-card:has(input:checked), .service-select-card.is-selected { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.service-select-card:has(input:checked) .service-select-price, .service-select-card.is-selected .service-select-price { color: #f5f5f5; }
.service-select-card:has(input:checked) .service-icon, .service-select-card.is-selected .service-icon { color: #fff; }
.service-select-card .service-select-price { font-size: .92rem; font-weight: 600; color: var(--color-muted); }
.service-select-card .service-icon { width: 2.1rem; height: 2.1rem; }
.services-step form > .button { margin-top: var(--space-4); width: 100%; }

/* Only the "choose a service" step uses this squared-off slab serif, to set
   it apart from the rest of the site (which stays on the default sans font). */
.services-step { font-family: Rockwell, 'Roboto Slab', 'Courier New', Georgia, serif; }

.form-error { color: var(--color-error); }
.form-success { color: var(--color-success); }

.confirmation-summary { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.confirmation-total { font-size: 1.15rem; font-weight: 800; border-top: 1px solid var(--color-border); padding-top: var(--space-2); margin-top: var(--space-1); }

/* Client photo gallery: responsive grid, 2-up on phones, more columns as
   space allows, without altering any other part of the page. */
.client-gallery { margin-top: var(--space-5); }
.client-gallery h2 { text-align: center; margin-bottom: var(--space-3); }

.cancel-info { margin-top: var(--space-5); }
.cancel-info h3 { color: var(--color-accent-hover); }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.client-grid li { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); aspect-ratio: 3 / 4; }
.client-grid img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.client-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-1) var(--space-2); background: linear-gradient(0deg, rgb(0 0 0 / 75%), transparent); color: #fff; font-weight: 700; font-size: .9rem; border-top: 2px solid var(--color-accent); }

@media (min-width: 30rem) {
  .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .public-hero { grid-template-columns: 1.2fr .8fr; align-items: center; }
  .public-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}