/* Appointment page only. No global layout or footer overrides. */
.page-appointment .appointment-page {
  --appointment-navy: #082f49;
  --appointment-navy-deep: #06263b;
  --appointment-teal: #0b97a5;
  --appointment-teal-dark: #087886;
  --appointment-teal-soft: #e8f7f8;
  --appointment-text: #263b4d;
  --appointment-muted: #5f7383;
  --appointment-border: #dce7ed;
  --appointment-surface: #ffffff;
  --appointment-bg: #f7fafc;
  --appointment-shadow: 0 18px 48px rgba(8, 47, 73, 0.09);
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 36px 0 72px;
  color: var(--appointment-text);
}

.page-appointment .appointment-page *,
.page-appointment .appointment-page *::before,
.page-appointment .appointment-page *::after {
  box-sizing: border-box;
}

.page-appointment .appointment-page svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-appointment .appointment-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
  padding: 22px 0 38px;
}

.page-appointment .appointment-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  color: var(--appointment-muted);
  font-size: 0.92rem;
  font-weight: 650;
}

.page-appointment .appointment-breadcrumbs a {
  color: var(--appointment-navy);
  text-decoration: none;
}

.page-appointment .appointment-breadcrumbs a:hover,
.page-appointment .appointment-breadcrumbs a:focus-visible {
  color: var(--appointment-teal-dark);
}

.page-appointment .appointment-intro .eyebrow,
.page-appointment .appointment-card-heading .eyebrow,
.page-appointment .appointment-form-card__head .eyebrow {
  margin: 0 0 12px;
  color: var(--appointment-teal-dark);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.page-appointment .appointment-intro h1 {
  max-width: 680px;
  margin: 0;
  color: var(--appointment-navy);
  font-size: clamp(2.65rem, 5vw, 4.75rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.page-appointment .appointment-intro > p:not(.eyebrow) {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--appointment-muted);
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.72;
}

.page-appointment .appointment-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.page-appointment .appointment-button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 13px 18px;
  text-decoration: none;
  font-weight: 800;
  line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-appointment .appointment-button > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.page-appointment .appointment-button strong,
.page-appointment .appointment-button small {
  display: block;
}

.page-appointment .appointment-button small {
  font-size: 0.73rem;
  font-weight: 650;
  opacity: 0.86;
}

.page-appointment .appointment-button--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--appointment-navy), var(--appointment-teal));
  box-shadow: 0 14px 28px rgba(10, 138, 151, 0.21);
}

.page-appointment .appointment-button--secondary {
  color: var(--appointment-navy);
  background: #fff;
  border-color: #91bfca;
}

.page-appointment .appointment-button:hover,
.page-appointment .appointment-button:focus-visible {
  transform: translateY(-2px);
}

.page-appointment .appointment-button:focus-visible,
.page-appointment .appointment-submit:focus-visible,
.page-appointment .appointment-field :is(input, select, textarea):focus-visible {
  outline: 3px solid rgba(11, 151, 165, 0.24);
  outline-offset: 2px;
}

.page-appointment .appointment-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--appointment-border);
  border-radius: 17px;
  background: var(--appointment-border);
}

.page-appointment .appointment-benefit {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  background: #fff;
}

.page-appointment .appointment-benefit__icon,
.page-appointment .appointment-step__icon,
.page-appointment .appointment-contact-person__avatar,
.page-appointment .appointment-final-cta__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--appointment-teal-dark);
  background: var(--appointment-teal-soft);
  border-radius: 50%;
}

.page-appointment .appointment-benefit__icon {
  width: 42px;
  height: 42px;
}

.page-appointment .appointment-benefit > span:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.page-appointment .appointment-benefit strong {
  color: var(--appointment-navy);
  font-size: 0.92rem;
  line-height: 1.35;
}

.page-appointment .appointment-benefit small {
  color: var(--appointment-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.page-appointment .appointment-form-card {
  border: 1px solid var(--appointment-border);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 38px);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--appointment-shadow);
  scroll-margin-top: 120px;
}

.page-appointment .appointment-form-card__head {
  margin-bottom: 24px;
}

.page-appointment .appointment-form-card__head h2,
.page-appointment .appointment-card-heading h2 {
  margin: 0;
  color: var(--appointment-navy);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.page-appointment .appointment-form-card__head > p:last-child {
  margin: 12px 0 0;
  color: var(--appointment-muted);
  line-height: 1.65;
}

.page-appointment .appointment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.page-appointment .appointment-field {
  display: grid;
  gap: 8px;
}

.page-appointment .appointment-field--wide {
  grid-column: 1 / -1;
}

.page-appointment .appointment-field label {
  color: var(--appointment-navy);
  font-size: 0.88rem;
  font-weight: 800;
}

.page-appointment .appointment-field label span {
  color: #b42318;
}

.page-appointment .appointment-field :is(input, select, textarea) {
  width: 100%;
  min-height: 50px;
  border: 1px solid #cad9e1;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--appointment-text);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  box-shadow: inset 0 1px 2px rgba(8, 47, 73, 0.025);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-appointment .appointment-field textarea {
  min-height: 126px;
  resize: vertical;
  line-height: 1.55;
}

.page-appointment .appointment-field :is(input, select, textarea):focus {
  border-color: var(--appointment-teal);
  box-shadow: 0 0 0 4px rgba(11, 151, 165, 0.1);
}

.page-appointment .appointment-field ::placeholder {
  color: #8394a1;
  opacity: 1;
}

.page-appointment .appointment-submit {
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  border: 0;
  border-radius: 11px;
  padding: 14px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--appointment-navy), var(--appointment-teal));
  font: inherit;
  font-size: 1.03rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(8, 120, 134, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.page-appointment .appointment-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(8, 120, 134, 0.26);
}

.page-appointment .appointment-booking-form.is-loading .appointment-submit {
  opacity: 0.68;
  pointer-events: none;
}

.page-appointment .appointment-privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 13px 0 0;
  color: var(--appointment-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

.page-appointment .appointment-privacy-note svg {
  width: 1rem;
  height: 1rem;
}

.page-appointment .appointment-support {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 24px;
  padding: 22px 0 26px;
}

.page-appointment .appointment-process-card,
.page-appointment .appointment-contact-card {
  border: 1px solid var(--appointment-border);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 34px);
  background: #fff;
  box-shadow: 0 12px 32px rgba(8, 47, 73, 0.055);
}

.page-appointment .appointment-card-heading {
  margin-bottom: 24px;
}

.page-appointment .appointment-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-appointment .appointment-steps li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding-top: 46px;
}

.page-appointment .appointment-step__number {
  position: absolute;
  top: 2px;
  left: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #b9d8df;
  border-radius: 50%;
  color: var(--appointment-teal-dark);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}

.page-appointment .appointment-step__icon {
  width: 44px;
  height: 44px;
}

.page-appointment .appointment-steps strong {
  display: block;
  color: var(--appointment-navy);
  font-size: 0.96rem;
  line-height: 1.35;
}

.page-appointment .appointment-steps p {
  margin: 7px 0 0;
  color: var(--appointment-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.page-appointment .appointment-contact-person {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 14px;
  background: var(--appointment-bg);
}

.page-appointment .appointment-contact-person__avatar {
  width: 44px;
  height: 44px;
}

.page-appointment .appointment-contact-person > span:last-child {
  display: grid;
  gap: 4px;
}

.page-appointment .appointment-contact-person strong {
  color: var(--appointment-navy);
}

.page-appointment .appointment-contact-person small {
  color: var(--appointment-muted);
}

.page-appointment .appointment-contact-list {
  display: grid;
  gap: 10px;
}

.page-appointment .appointment-contact-list > * {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  border-radius: 12px;
  padding: 12px 10px;
  color: var(--appointment-text);
  text-decoration: none;
}

.page-appointment .appointment-contact-list > a:hover,
.page-appointment .appointment-contact-list > a:focus-visible {
  background: var(--appointment-teal-soft);
}

.page-appointment .appointment-contact-list svg {
  margin-top: 2px;
  color: var(--appointment-teal-dark);
}

.page-appointment .appointment-contact-list span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.page-appointment .appointment-contact-list small {
  color: var(--appointment-muted);
  font-size: 0.77rem;
  font-weight: 700;
}

.page-appointment .appointment-contact-list strong {
  overflow-wrap: anywhere;
  color: var(--appointment-navy);
  font-size: 0.92rem;
  line-height: 1.55;
}

.page-appointment .appointment-final-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 8px;
  border-radius: 20px;
  padding: 28px 30px;
  color: #fff;
  background: linear-gradient(135deg, var(--appointment-navy-deep), #07597a 58%, var(--appointment-teal-dark));
  box-shadow: 0 20px 44px rgba(6, 38, 59, 0.17);
}

.page-appointment .appointment-final-cta__icon {
  width: 56px;
  height: 56px;
  color: #dffbfc;
  background: rgba(255, 255, 255, 0.12);
}

.page-appointment .appointment-final-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.25;
}

.page-appointment .appointment-final-cta p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.83);
  line-height: 1.55;
}

.page-appointment .appointment-final-cta__actions {
  display: flex;
  gap: 10px;
}

.page-appointment .appointment-button--light,
.page-appointment .appointment-button--outline-light {
  min-width: 140px;
  min-height: 48px;
  padding: 11px 17px;
}

.page-appointment .appointment-button--light {
  color: var(--appointment-navy);
  background: #fff;
}

.page-appointment .appointment-button--outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}

/* Reuse the site's dynamic FAQ, but style it only on the appointment page. */
.page-appointment .section--faq {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto 64px;
  padding: 38px 0 0;
}

.page-appointment .section--faq .section-header {
  max-width: 760px;
  margin-bottom: 24px;
}

.page-appointment .section--faq .section-header .eyebrow {
  color: var(--appointment-teal-dark, #087886);
}

.page-appointment .section--faq .section-header h2 {
  color: var(--appointment-navy, #082f49);
  font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.page-appointment .section--faq .faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-appointment .section--faq .faq-item {
  border: 1px solid #dce7ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(8, 47, 73, 0.045);
}

.page-appointment .section--faq .faq-question {
  min-height: 58px;
  padding: 16px 18px;
  color: #082f49;
  font-size: 0.98rem;
}

@media (max-width: 1050px) {
  .page-appointment .appointment-hero {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .page-appointment .appointment-hero__content {
    max-width: 820px;
  }

  .page-appointment .appointment-form-card {
    max-width: 820px;
  }

  .page-appointment .appointment-support {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-appointment .appointment-page {
    width: min(100% - 24px, 680px);
    padding: 18px 0 48px;
  }

  .page-appointment .appointment-hero {
    gap: 24px;
    padding: 12px 0 24px;
  }

  .page-appointment .appointment-breadcrumbs {
    margin-bottom: 20px;
    font-size: 0.86rem;
  }

  .page-appointment .appointment-intro h1 {
    font-size: clamp(2.15rem, 10vw, 3.15rem);
    line-height: 1.06;
  }

  .page-appointment .appointment-intro > p:not(.eyebrow) {
    margin-top: 18px;
    font-size: 1.08rem;
    line-height: 1.65;
  }

  .page-appointment .appointment-actions {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .page-appointment .appointment-button {
    min-height: 60px;
    justify-content: flex-start;
    padding-inline: 18px;
  }

  .page-appointment .appointment-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
  }

  .page-appointment .appointment-benefit {
    min-height: 112px;
    align-items: flex-start;
    flex-direction: column;
    padding: 15px;
  }

  .page-appointment .appointment-benefit__icon {
    width: 38px;
    height: 38px;
  }

  .page-appointment .appointment-form-card {
    border-radius: 18px;
    padding: 22px 18px;
    scroll-margin-top: 88px;
  }

  .page-appointment .appointment-form-card__head h2,
  .page-appointment .appointment-card-heading h2 {
    font-size: 1.65rem;
  }

  .page-appointment .appointment-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-appointment .appointment-field--wide {
    grid-column: auto;
  }

  .page-appointment .appointment-field label {
    font-size: 0.95rem;
  }

  .page-appointment .appointment-field :is(input, select, textarea) {
    min-height: 54px;
    font-size: 1.05rem;
  }

  .page-appointment .appointment-field textarea {
    min-height: 132px;
  }

  .page-appointment .appointment-submit {
    min-height: 58px;
    font-size: 1.05rem;
  }

  .page-appointment .appointment-support {
    gap: 16px;
    padding-top: 12px;
  }

  .page-appointment .appointment-process-card,
  .page-appointment .appointment-contact-card {
    border-radius: 17px;
    padding: 22px 18px;
  }

  .page-appointment .appointment-steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-appointment .appointment-steps li {
    grid-template-columns: 46px 1fr;
    padding: 14px 0 14px 44px;
    border-bottom: 1px solid var(--appointment-border);
  }

  .page-appointment .appointment-steps li:last-child {
    border-bottom: 0;
  }

  .page-appointment .appointment-step__number {
    top: 24px;
    left: 0;
  }

  .page-appointment .appointment-step__icon {
    width: 42px;
    height: 42px;
  }

  .page-appointment .appointment-steps strong {
    font-size: 1rem;
  }

  .page-appointment .appointment-steps p {
    font-size: 0.94rem;
  }

  .page-appointment .appointment-final-cta {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 24px 20px;
    text-align: center;
  }

  .page-appointment .appointment-final-cta__icon {
    margin: 0 auto;
  }

  .page-appointment .appointment-final-cta__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-appointment .appointment-final-cta .appointment-button {
    justify-content: center;
  }

  .page-appointment .section--faq {
    width: min(100% - 24px, 680px);
    margin-bottom: 44px;
    padding-top: 28px;
  }

  .page-appointment .section--faq .faq-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .page-appointment .appointment-page {
    width: calc(100% - 20px);
  }

  .page-appointment .appointment-benefits {
    grid-template-columns: 1fr;
  }

  .page-appointment .appointment-benefit {
    min-height: auto;
    flex-direction: row;
    align-items: center;
  }

  .page-appointment .section--faq {
    width: calc(100% - 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-appointment .appointment-button,
  .page-appointment .appointment-submit {
    transition: none;
  }
}


/* Payment choice added to the existing appointment form; all selectors remain page-scoped. */
.page-appointment .appointment-payment {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
}
.page-appointment .appointment-payment legend {
  margin-bottom: 10px;
  color: var(--appointment-navy);
  font-size: 0.95rem;
  font-weight: 780;
}
.page-appointment .appointment-payment__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.page-appointment .appointment-payment-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 92px;
  padding: 15px;
  border: 1px solid var(--appointment-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.page-appointment .appointment-payment-option:has(input:checked) {
  border-color: var(--appointment-teal);
  box-shadow: 0 0 0 3px rgba(11,151,165,.1);
}
.page-appointment .appointment-payment-option.is-disabled {
  opacity: .58;
  cursor: not-allowed;
}
.page-appointment .appointment-payment-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--appointment-teal-dark);
}
.page-appointment .appointment-payment-option span {
  display: grid;
  gap: 5px;
}
.page-appointment .appointment-payment-option strong { color: var(--appointment-navy); }
.page-appointment .appointment-payment-option small { color: var(--appointment-muted); line-height: 1.45; }
.page-appointment .appointment-payment__notice {
  margin: 10px 0 0;
  color: var(--appointment-muted);
  font-size: .86rem;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .page-appointment .appointment-payment__options { grid-template-columns: 1fr; }
  .page-appointment .appointment-payment-option { min-height: auto; }
}

/* Compact service picker: category filters + accordion rows. Scoped to appointment page. */
.page-appointment .appointment-service-field {
  position: relative;
}

.page-appointment .appointment-service-help {
  margin: -2px 0 2px;
  color: var(--appointment-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.page-appointment .appointment-service-native.is-enhanced {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.page-appointment .appointment-service-picker {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.page-appointment .appointment-service-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-appointment .appointment-service-filter {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #cad9e1;
  border-radius: 9px;
  padding: 8px 11px;
  color: #526a78;
  background: #fff;
  font: inherit;
  font-size: 0.77rem;
  font-weight: 780;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.page-appointment .appointment-service-filter svg {
  width: 1rem;
  height: 1rem;
}

.page-appointment .appointment-service-filter:hover,
.page-appointment .appointment-service-filter:focus-visible {
  color: var(--appointment-teal-dark);
  border-color: #85c8cf;
}

.page-appointment .appointment-service-filter:focus-visible,
.page-appointment .appointment-service-option:focus-visible,
.page-appointment .appointment-service-more:focus-visible {
  outline: 3px solid rgba(11, 151, 165, 0.2);
  outline-offset: 2px;
}

.page-appointment .appointment-service-filter.is-active {
  color: #fff;
  border-color: var(--appointment-teal-dark);
  background: linear-gradient(135deg, var(--appointment-teal-dark), var(--appointment-teal));
  box-shadow: 0 8px 18px rgba(8, 120, 134, 0.16);
}

.page-appointment .appointment-service-filter__grid {
  width: 14px;
  height: 14px;
  display: grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 2px;
}

.page-appointment .appointment-service-filter__grid i {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 1px;
}

.page-appointment .appointment-service-list {
  overflow: hidden;
  border: 1px solid #d5e2e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(8, 47, 73, 0.035);
}

.page-appointment .appointment-service-item {
  min-width: 0;
  border-bottom: 1px solid #e3ebef;
  background: #fff;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.page-appointment .appointment-service-item:last-child,
.page-appointment .appointment-service-item[hidden] + .appointment-service-item:last-child {
  border-bottom: 0;
}

.page-appointment .appointment-service-item.is-selected {
  position: relative;
  z-index: 1;
  margin: -1px;
  border: 1px solid var(--appointment-teal);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(231, 248, 248, 0.88), #fff 76%);
  box-shadow: 0 0 0 3px rgba(11, 151, 165, 0.08);
}

.page-appointment .appointment-service-option {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(86px, auto) 22px;
  gap: 11px;
  align-items: center;
  border: 0;
  padding: 11px 13px;
  color: var(--appointment-text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-appointment .appointment-service-option:hover {
  background: rgba(231, 248, 248, 0.52);
}

.page-appointment .appointment-service-option__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--appointment-teal-dark);
  background: var(--appointment-teal-soft);
}

.page-appointment .appointment-service-option__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.page-appointment .appointment-service-option__main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.page-appointment .appointment-service-option__main strong {
  overflow: hidden;
  color: var(--appointment-navy);
  font-size: 0.9rem;
  font-weight: 830;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.page-appointment .appointment-service-option__main small {
  overflow: hidden;
  color: var(--appointment-muted);
  font-size: 0.69rem;
  font-weight: 690;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-appointment .appointment-service-option__price {
  max-width: 118px;
  color: var(--appointment-navy);
  font-size: 0.83rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}

.page-appointment .appointment-service-item.is-selected .appointment-service-option__price {
  color: var(--appointment-teal-dark);
}

.page-appointment .appointment-service-option__chevron {
  display: grid;
  place-items: center;
  color: #647b88;
  transition: transform 0.18s ease;
}

.page-appointment .appointment-service-option__chevron svg {
  width: 1rem;
  height: 1rem;
}

.page-appointment .appointment-service-item.is-selected .appointment-service-option__chevron {
  color: var(--appointment-teal-dark);
  transform: rotate(180deg);
}

.page-appointment .appointment-service-details {
  display: grid;
  gap: 10px;
  margin: 0 13px 13px 60px;
  border-top: 1px solid rgba(8, 120, 134, 0.15);
  padding: 11px 0 1px;
}

.page-appointment .appointment-service-details[hidden] {
  display: none;
}

.page-appointment .appointment-service-details p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #536b78;
  font-size: 0.79rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.page-appointment .appointment-service-details__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.page-appointment .appointment-service-details__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 9px;
  color: #526a78;
  background: #f0f5f7;
  font-size: 0.69rem;
  font-weight: 760;
  line-height: 1;
}

.page-appointment .appointment-service-details__meta span.is-online {
  color: #087886;
  background: #dff6f5;
}

.page-appointment .appointment-service-details__meta svg {
  width: 0.9rem;
  height: 0.9rem;
}

.page-appointment .appointment-service-empty {
  margin: 0;
  border: 1px dashed #cbdce3;
  border-radius: 12px;
  padding: 18px;
  color: var(--appointment-muted);
  background: #fbfdfe;
  font-size: 0.86rem;
  text-align: center;
}

.page-appointment .appointment-service-more {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  justify-self: center;
  border: 0;
  padding: 7px 12px;
  color: var(--appointment-teal-dark);
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 820;
  cursor: pointer;
}

.page-appointment .appointment-service-more svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.18s ease;
}

.page-appointment .appointment-service-more.is-expanded svg {
  transform: rotate(180deg);
}

@media (max-width: 760px) {
  .page-appointment .appointment-service-help {
    font-size: 0.87rem;
  }

  .page-appointment .appointment-service-categories {
    width: calc(100% + 36px);
    margin-inline: -18px;
    padding: 2px 18px 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .page-appointment .appointment-service-categories::-webkit-scrollbar {
    display: none;
  }

  .page-appointment .appointment-service-filter {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: 12px;
    font-size: 0.79rem;
    scroll-snap-align: start;
  }

  .page-appointment .appointment-service-list {
    border-radius: 13px;
  }

  .page-appointment .appointment-service-option {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr) 76px 18px;
    gap: 9px;
    padding: 11px 10px;
  }

  .page-appointment .appointment-service-option__icon {
    width: 38px;
    height: 38px;
  }

  .page-appointment .appointment-service-option__main strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.9rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .page-appointment .appointment-service-option__main small {
    font-size: 0.67rem;
  }

  .page-appointment .appointment-service-option__price {
    max-width: 76px;
    font-size: 0.78rem;
  }

  .page-appointment .appointment-service-details {
    margin: 0 10px 12px 57px;
    padding-top: 10px;
  }

  .page-appointment .appointment-service-details p {
    font-size: 0.78rem;
    -webkit-line-clamp: 4;
  }
}

@media (max-width: 420px) {
  .page-appointment .appointment-service-option {
    grid-template-columns: 34px minmax(0, 1fr) 67px 16px;
    gap: 7px;
    padding-inline: 8px;
  }

  .page-appointment .appointment-service-option__icon {
    width: 34px;
    height: 34px;
  }

  .page-appointment .appointment-service-option__main strong {
    font-size: 0.84rem;
  }

  .page-appointment .appointment-service-option__main small {
    font-size: 0.63rem;
  }

  .page-appointment .appointment-service-option__price {
    max-width: 67px;
    font-size: 0.73rem;
  }

  .page-appointment .appointment-service-details {
    margin-left: 49px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-appointment .appointment-service-filter,
  .page-appointment .appointment-service-option__chevron,
  .page-appointment .appointment-service-more svg {
    transition: none;
  }
}

/* ============================================================================
   KPHYSIO PREMIUM APPOINTMENT PAGE — 2026-07-20
   Visual refinement only; form fields, validation and payment logic unchanged.
============================================================================ */
.page-appointment {
  background: linear-gradient(180deg, #f7fafb 0%, #f3f7f8 56%, #ffffff 100%);
}

.page-appointment .appointment-page {
  --appointment-navy: #072a40;
  --appointment-navy-deep: #061f31;
  --appointment-teal: #078d96;
  --appointment-teal-dark: #08727e;
  --appointment-teal-soft: #eaf7f5;
  --appointment-border: #d8e5e8;
  --appointment-bg: #f6f9fa;
  --appointment-shadow: 0 18px 46px rgba(7, 43, 63, .07);
  width: min(1220px, calc(100% - 36px));
  padding-top: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(78px, 8vw, 112px);
}

.page-appointment .appointment-hero {
  gap: clamp(38px, 5vw, 70px);
  padding: 0 0 46px;
}

.page-appointment .appointment-hero__content {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4.4vw, 50px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 8%, rgba(11, 168, 169, .15), transparent 28%),
    linear-gradient(128deg, #061f31 0%, #083b55 60%, #0a5361 100%);
  box-shadow: 0 24px 60px rgba(6,37,53,.12);
}

.page-appointment .appointment-breadcrumbs {
  margin-bottom: 24px;
  color: rgba(255,255,255,.62);
}

.page-appointment .appointment-breadcrumbs a {
  color: rgba(255,255,255,.9);
}

.page-appointment .appointment-intro .eyebrow {
  color: #82e2dc;
}

.page-appointment .appointment-intro h1 {
  color: #fff;
  font-weight: 760;
  letter-spacing: -.045em;
}

.page-appointment .appointment-intro > p:not(.eyebrow) {
  color: rgba(241,249,251,.82);
}

.page-appointment .appointment-button {
  min-height: 56px;
  border-radius: 12px;
}

.page-appointment .appointment-button--primary {
  background: linear-gradient(135deg, #078b99, #0aa7aa);
  box-shadow: 0 12px 26px rgba(7,150,158,.2);
}

.page-appointment .appointment-button--secondary {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.07);
  color: #fff;
}

.page-appointment .appointment-benefits {
  border-color: rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.1);
}

.page-appointment .appointment-benefit {
  background: rgba(255,255,255,.065);
}

.page-appointment .appointment-benefit strong {
  color: #fff;
}

.page-appointment .appointment-benefit small {
  color: rgba(255,255,255,.7);
}

.page-appointment .appointment-benefit__icon {
  background: rgba(112, 225, 217, .12);
  color: #7be0db;
}

.page-appointment .appointment-form-card {
  border-color: var(--appointment-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(7,43,63,.085);
}

.page-appointment .appointment-form-card__head h2,
.page-appointment .appointment-card-heading h2 {
  font-weight: 740;
}

.page-appointment .appointment-field :is(input, select, textarea) {
  min-height: 52px;
  border-radius: 12px;
  border-color: #cfdde2;
  box-shadow: none;
}

.page-appointment .appointment-field :is(input, select, textarea):focus {
  border-color: var(--appointment-teal);
  box-shadow: 0 0 0 4px rgba(7,141,150,.1);
}

.page-appointment .appointment-submit {
  min-height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #083f59, #0798a1);
  box-shadow: 0 12px 26px rgba(7,152,161,.18);
}

.page-appointment .appointment-process-card,
.page-appointment .appointment-contact-card,
.page-appointment .appointment-service-item,
.page-appointment .appointment-payment-option {
  border-color: var(--appointment-border);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(7,43,63,.045);
}

.page-appointment .appointment-service-option {
  min-height: 44px;
}

.page-appointment .appointment-final-cta {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 10%, rgba(12,177,175,.16), transparent 30%),
    linear-gradient(125deg, #061f31 0%, #083b55 58%, #0a5361 100%);
  box-shadow: 0 18px 48px rgba(6,37,53,.12);
}

@media (max-width: 980px) {
  .page-appointment .appointment-hero {
    width: 100%;
    margin-left: 0;
    transform: none;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .page-appointment .appointment-page {
    width: calc(100% - 20px);
    padding-top: 18px;
  }

  .page-appointment .appointment-hero__content {
    padding: 26px 20px;
    border-radius: 20px;
  }

  .page-appointment .appointment-intro h1 {
    font-size: clamp(2.05rem, 10vw, 3.15rem);
  }

  .page-appointment .appointment-actions {
    grid-template-columns: 1fr;
  }

  .page-appointment .appointment-benefits {
    grid-template-columns: 1fr;
  }

  .page-appointment .appointment-form-card {
    padding: 24px 20px;
    border-radius: 18px;
  }
}

/* ===== Live booking calendar ===== */
.page-appointment .appointment-booking-calendar{margin-top:8px;border:1px solid var(--appointment-border);border-radius:18px;padding:18px;background:linear-gradient(180deg,#fbfeff 0%,#f7fbfc 100%)}
.page-appointment .appointment-booking-calendar__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.page-appointment .appointment-booking-calendar__head h3{margin:3px 0 5px;color:var(--appointment-navy);font-size:1.08rem}
.page-appointment .appointment-booking-calendar__head p{margin:0;color:var(--appointment-muted);font-size:.84rem;line-height:1.55}
.page-appointment .appointment-calendar-step{display:block;color:var(--appointment-teal-dark);font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.page-appointment .appointment-calendar-duration{flex:0 0 auto;border:1px solid #bcdde0;border-radius:999px;padding:7px 10px;background:#fff;color:var(--appointment-teal-dark);font-size:.74rem;font-weight:800}
.page-appointment .appointment-booking-calendar__layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(250px,.88fr);gap:14px}
.page-appointment .appointment-public-calendar,.page-appointment .appointment-public-times{border:1px solid #dfe9ee;border-radius:15px;background:#fff;overflow:hidden}
.page-appointment .appointment-public-calendar__nav{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;padding:12px;border-bottom:1px solid #e8eef1}
.page-appointment .appointment-public-calendar__nav strong{text-align:center;color:var(--appointment-navy);font-size:.95rem}
.page-appointment .appointment-public-calendar__nav button{width:36px;height:36px;border:1px solid #dce7ec;border-radius:10px;background:#fff;color:var(--appointment-navy);display:grid;place-items:center;cursor:pointer}
.page-appointment .appointment-public-calendar__nav button:disabled{opacity:.28;cursor:not-allowed}
.page-appointment .appointment-public-calendar__nav button:not(:disabled):hover{background:var(--appointment-teal-soft);border-color:#9dd3d8;color:var(--appointment-teal-dark)}
.page-appointment .appointment-public-calendar__nav svg{width:1rem;height:1rem}
.page-appointment .appointment-public-calendar__weekdays,.page-appointment .appointment-public-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.page-appointment .appointment-public-calendar__weekdays{padding:8px 8px 4px;color:#84939e;font-size:.65rem;font-weight:800;text-align:center}
.page-appointment .appointment-public-calendar__grid{padding:6px 8px 12px;gap:5px;min-height:270px;align-content:start}
.page-appointment .appointment-calendar-day{position:relative;aspect-ratio:1/1;min-height:36px;border:1px solid transparent;border-radius:10px;background:transparent;color:#72838f;font:inherit;font-size:.78rem;font-weight:750;cursor:default;display:grid;place-items:center;padding:0}
.page-appointment .appointment-calendar-day.is-outside{opacity:.22}
.page-appointment .appointment-calendar-day.is-available{border-color:#c5e4d0;background:#f1faf4;color:#1f7140;cursor:pointer}
.page-appointment .appointment-calendar-day.is-available:hover{border-color:#65bd82;background:#e9f7ee;transform:translateY(-1px)}
.page-appointment .appointment-calendar-day.is-selected{border-color:var(--appointment-teal);background:linear-gradient(145deg,var(--appointment-teal),var(--appointment-teal-dark));color:#fff;box-shadow:0 7px 16px rgba(11,151,165,.22)}
.page-appointment .appointment-calendar-day.is-today:not(.is-selected) span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--appointment-navy);color:var(--appointment-navy)}
.page-appointment .appointment-calendar-day i{position:absolute;right:3px;bottom:2px;min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:#fff;color:#23824a;font-style:normal;font-size:.54rem;display:grid;place-items:center;box-shadow:0 1px 4px rgba(8,47,73,.08)}
.page-appointment .appointment-calendar-day.is-selected i{color:var(--appointment-teal-dark)}
.page-appointment .appointment-calendar-placeholder{grid-column:1/-1;min-height:230px;display:grid;place-items:center;text-align:center;padding:25px;color:#7a8b96;font-size:.84rem;line-height:1.55}
.page-appointment .appointment-calendar-placeholder.is-loading{animation:appointmentPulse 1.15s ease-in-out infinite alternate}
@keyframes appointmentPulse{to{opacity:.45}}
.page-appointment .appointment-public-times{display:flex;flex-direction:column;min-height:100%}
.page-appointment .appointment-public-times__head{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid #e8eef1}
.page-appointment .appointment-public-times__icon{width:38px;height:38px;border-radius:11px;background:var(--appointment-teal-soft);color:var(--appointment-teal-dark);display:grid;place-items:center;flex:0 0 auto}
.page-appointment .appointment-public-times__head div{display:grid;gap:2px}
.page-appointment .appointment-public-times__head small{color:#81909b;font-size:.66rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em}
.page-appointment .appointment-public-times__head strong{color:var(--appointment-navy);font-size:.9rem}
.page-appointment .appointment-public-times__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px;align-content:start;flex:1}
.page-appointment .appointment-time-slot{min-height:42px;border:1px solid #d8e4e9;border-radius:10px;background:#fff;color:var(--appointment-navy);font:inherit;font-size:.86rem;font-weight:800;cursor:pointer;transition:.18s ease}
.page-appointment .appointment-time-slot:hover{border-color:#8fcbd0;background:#f4fbfb;color:var(--appointment-teal-dark)}
.page-appointment .appointment-time-slot.is-selected{border-color:var(--appointment-teal);background:linear-gradient(135deg,var(--appointment-teal),var(--appointment-teal-dark));color:#fff;box-shadow:0 8px 18px rgba(11,151,165,.2)}
.page-appointment .appointment-times-placeholder{grid-column:1/-1;margin:auto;padding:28px 8px;color:#7c8c98;text-align:center;font-size:.82rem;line-height:1.6}
.page-appointment .appointment-booking-choice{margin:0 14px 14px;padding:11px 12px;border:1px solid #b9e0c6;border-radius:11px;background:#effaf3;display:flex;align-items:center;gap:9px;color:#246f40}
.page-appointment .appointment-booking-choice>span{width:28px;height:28px;border-radius:50%;background:#d9f2e2;display:grid;place-items:center;flex:0 0 auto}
.page-appointment .appointment-booking-choice svg{width:.9rem;height:.9rem}
.page-appointment .appointment-booking-choice div{display:grid;gap:1px}
.page-appointment .appointment-booking-choice small{font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.page-appointment .appointment-booking-choice strong{font-size:.86rem}
@media(max-width:760px){.page-appointment .appointment-booking-calendar{padding:13px}.page-appointment .appointment-booking-calendar__head{display:grid}.page-appointment .appointment-calendar-duration{justify-self:start}.page-appointment .appointment-booking-calendar__layout{grid-template-columns:1fr}.page-appointment .appointment-public-calendar__grid{min-height:250px}.page-appointment .appointment-calendar-day{min-height:34px}.page-appointment .appointment-public-times__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ============================================================================
   APPOINTMENT FLOW LAYOUT REFINEMENT — 2026-07-23
   Keeps the existing visual language, but makes the booking flow shorter,
   easier to scan and better balanced on desktop and mobile.
============================================================================ */

.page-appointment .appointment-details-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  padding-top: 4px;
}

.page-appointment .appointment-details-heading span {
  color: var(--appointment-teal-dark);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-appointment .appointment-details-heading strong {
  color: var(--appointment-navy);
  font-size: 1rem;
  font-weight: 820;
}

.page-appointment .appointment-booking-calendar {
  margin-top: 2px;
  scroll-margin-top: 110px;
}

/* Prevent a large number of free hours from stretching the whole form. */
.page-appointment .appointment-booking-calendar__layout {
  align-items: start;
}

.page-appointment .appointment-public-calendar,
.page-appointment .appointment-public-times {
  min-width: 0;
}

.page-appointment .appointment-public-times {
  min-height: 0;
  max-height: 356px;
}

.page-appointment .appointment-public-times__head {
  flex: 0 0 auto;
}

.page-appointment .appointment-public-times__head div,
.page-appointment .appointment-booking-choice div {
  min-width: 0;
}

.page-appointment .appointment-public-times__head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-appointment .appointment-public-times__grid {
  min-height: 0;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c7d8df transparent;
}

.page-appointment .appointment-public-times__grid::-webkit-scrollbar {
  width: 8px;
}

.page-appointment .appointment-public-times__grid::-webkit-scrollbar-track {
  background: transparent;
}

.page-appointment .appointment-public-times__grid::-webkit-scrollbar-thumb {
  border: 2px solid #fff;
  border-radius: 999px;
  background: #c7d8df;
}

.page-appointment .appointment-booking-choice {
  flex: 0 0 auto;
}

/* Desktop: give the booking card more usable width and keep the intro visible
   while the longer form is being completed. */
@media (min-width: 1161px) {
  .page-appointment .appointment-hero {
    width: min(1420px, calc(100vw - 40px));
    margin-left: 50%;
    transform: translateX(-50%);
    grid-template-columns: minmax(480px, .88fr) minmax(640px, 1.12fr);
    gap: clamp(30px, 3.2vw, 48px);
  }

  .page-appointment .appointment-hero__content {
    position: sticky;
    top: 104px;
    align-self: start;
  }

  .page-appointment .appointment-form-card {
    padding: clamp(26px, 2.4vw, 34px);
  }

  .page-appointment .appointment-public-calendar__grid {
    min-height: 0;
  }

  .page-appointment .appointment-calendar-day {
    aspect-ratio: auto;
    min-height: 38px;
    height: 38px;
  }
}

/* Switch to one clean column before the two desktop columns become cramped. */
@media (max-width: 1160px) {
  .page-appointment .appointment-hero {
    grid-template-columns: 1fr;
  }

  .page-appointment .appointment-hero__content {
    position: relative;
    top: auto;
  }
}

@media (max-width: 760px) {
  .page-appointment .appointment-details-heading {
    display: grid;
    gap: 3px;
    margin-top: 2px;
  }

  .page-appointment .appointment-details-heading strong {
    font-size: .98rem;
  }

  .page-appointment .appointment-booking-calendar {
    margin-top: 0;
    scroll-margin-top: 86px;
  }

  .page-appointment .appointment-public-calendar__grid {
    min-height: 0;
  }

  .page-appointment .appointment-calendar-day {
    aspect-ratio: auto;
    min-height: 34px;
    height: 34px;
  }

  .page-appointment .appointment-public-times {
    max-height: 288px;
  }

  .page-appointment .appointment-public-times__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 178px;
  }
}

@media (max-width: 360px) {
  .page-appointment .appointment-public-times__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}