/* Rainbow Shield services — offerings, appointments, vaccination, live sessions, contests and the
   shared booking flow (schedule → review → payment → success). Desktop first; .be-m adapts to the
   390 mobile artboard. */

.be-svc {
  padding-bottom: 64px;
}

.be-svc-head {
  margin-top: 24px;
}

/* ---------- Shared pieces ---------- */
.be-svc-section {
  margin-top: 48px;
}

.be-svc-section--first {
  margin-top: 8px;
}

.be-svc-section__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.be-svc-section__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--be-ink);
  margin-bottom: 12px;
}

.be-svc-section__row .be-svc-section__title {
  margin-bottom: 0;
}

.be-svc-section__sub {
  font-size: 13px;
  color: var(--be-muted);
  margin-top: 2px;
}

.be-svc-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--be-ink);
  margin-bottom: 12px;
  padding: 0;
}

.be-svc-hint {
  font-size: 12px;
  line-height: 18px;
  color: var(--be-muted);
  margin-top: 8px;
}

.be-svc-good {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--be-color-text-success, #2a8e7d);
}

.be-svc-member-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--be-maroon, #8d1730);
}

.be-svc-member-note--box {
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--be-blush);
}

.be-svc-member-note svg {
  flex-shrink: 0;
  color: var(--be-coral);
}

.be-svc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--be-blush);
  font-size: 13px;
  color: var(--be-ink);
}

.be-svc-banner svg {
  color: var(--be-coral);
}

.be-svc-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--be-white);
  color: var(--be-coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.be-svc-tag--inline {
  position: static;
  background: var(--be-blush);
}

.be-svc-tag--live {
  left: auto;
  right: 12px;
  background: var(--be-coral);
  color: #fff;
}

.be-svc-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--be-blush);
  color: var(--be-ink);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.be-svc-status.is-good {
  background: var(--be-color-status-success, #dce8cf);
  color: #2b5a1f;
}

.be-svc-status.is-warn {
  background: #fff1d6;
  color: #8a5a00;
}

.be-svc-status.is-muted {
  background: #efe7de;
  color: var(--be-muted);
}

.be-svc-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--be-line);
  border-radius: 999px;
  background: var(--be-white);
  font-size: 12px;
  font-weight: 600;
  color: var(--be-ink);
  white-space: nowrap;
}

.be-svc-verified {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--be-coral);
  color: #fff;
  vertical-align: middle;
}

.be-svc-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 40px 24px;
  background: var(--be-white);
}

.be-svc-empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--be-blush);
  color: var(--be-coral);
  margin-bottom: 6px;
}

.be-svc-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-empty__text {
  max-width: 420px;
  font-size: 13px;
  line-height: 20px;
}

.be-svc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.be-svc-pager__info {
  font-size: 13px;
  color: var(--be-muted);
}

/* Segmented tabs */
.be-svc-seg {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 4px;
  border: 1px solid var(--be-line);
  border-radius: 999px;
  background: var(--be-white);
  overflow-x: auto;
  scrollbar-width: none;
}

.be-svc-seg::-webkit-scrollbar {
  display: none;
}

.be-svc-section__row .be-svc-seg {
  margin: 0;
}

.be-svc-seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 112px;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--be-muted);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.be-svc-seg__item:hover {
  color: var(--be-ink);
}

.be-svc-seg__item.is-active {
  background: var(--be-blush);
  color: var(--be-coral);
}

.be-svc-seg__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--be-coral);
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

/* Chips row */
.be-svc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.be-svc-chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 24px;
  padding-bottom: 2px;
}

.be-svc-chips--scroll::-webkit-scrollbar {
  display: none;
}

.be-svc-chips .be-chip {
  font-weight: 600;
}

.be-svc-chip-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--be-coral);
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.be-svc-radio-chip {
  position: relative;
}

.be-svc-radio-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.be-svc-radio-chip span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--be-line);
  border-radius: 999px;
  background: var(--be-white);
  font-size: 13px;
  font-weight: 600;
  color: var(--be-ink);
  cursor: pointer;
}

.be-svc-radio-chip input:checked + span {
  background: var(--be-blush);
  border-color: var(--be-coral-soft);
  color: var(--be-coral);
}

.be-svc-radio-chip input:focus-visible + span {
  outline: 2px solid var(--be-coral);
  outline-offset: 2px;
}

/* Search / sort toolbar */
.be-svc-toolbar,
.be-svc-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.be-svc-filters__form {
  display: flex;
  align-items: center;
  gap: 12px;
}

.be-svc-search {
  flex: 1 1 360px;
  max-width: 480px;
  min-height: 48px;
  border-radius: 999px;
}

.be-svc-search--sm {
  flex: 0 1 280px;
}

.be-svc-sort select,
.be-svc-select select,
.be-svc-select input {
  height: 40px;
  padding: 0 36px 0 16px;
  border: 1px solid var(--be-line);
  border-radius: 999px;
  background: var(--be-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a2333' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--be-ink);
  appearance: none;
}

.be-svc-select input {
  background-image: none;
  padding-right: 16px;
}

/* ---------- Cards & grids ---------- */
.be-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.be-svc-card {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 20px;
  border: 1px solid var(--be-line);
  border-radius: 24px;
  background: var(--be-white);
  box-shadow: 0 4px 16px rgba(90, 35, 51, 0.03);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.be-svc-card:hover {
  box-shadow: var(--be-shadow-soft);
}

.be-svc-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #f7ebe6;
}

.be-svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.be-svc-card__ph {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--be-coral-soft);
}

.be-svc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 16px 4px 0;
}

.be-svc-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--be-ink);
}

.be-svc-card__title a:hover {
  color: var(--be-coral);
}

.be-svc-card__meta,
.be-svc-card__host {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-card__excerpt {
  font-size: 12px;
  line-height: 18px;
  color: var(--be-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.be-svc-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}

.be-svc-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.be-svc-card__badges:empty {
  display: none;
}

.be-svc-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-price s {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--be-coral-soft);
}

.be-svc-price strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-price--lg strong {
  font-size: 26px;
}

.be-svc-offer__cta {
  color: var(--be-coral);
  border-color: var(--be-coral-soft);
  background: var(--be-blush);
}

.be-svc-datebadge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: grid;
  justify-items: center;
  min-width: 48px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--be-white);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--be-coral);
}

.be-svc-datebadge strong {
  font-size: 18px;
  line-height: 20px;
  color: var(--be-ink);
}

.be-svc-closes {
  display: grid;
  justify-items: center;
  margin-top: auto;
  padding: 10px;
  border-radius: 14px;
  background: #f3e8e2;
  text-align: center;
}

.be-svc-closes span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--be-muted);
}

.be-svc-closes strong {
  font-size: 13px;
  color: var(--be-ink);
}

.be-svc-contest__cat {
  color: var(--be-coral);
}

/* Category circles */
.be-svc-cats {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 24px;
  padding-bottom: 4px;
}

.be-svc-cats::-webkit-scrollbar {
  display: none;
}

.be-svc-cats__item {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 96px;
  flex-shrink: 0;
}

.be-svc-cats__circle {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #f7ebe6;
  font-family: var(--be-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--be-coral);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.be-svc-cats__item:hover .be-svc-cats__circle,
.be-svc-cats__item.is-active .be-svc-cats__circle {
  border-color: var(--be-coral-soft);
  background: var(--be-blush);
}

.be-svc-cats__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--be-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Detail pages (offering, session, contest) ---------- */
.be-svc-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 24px;
  align-items: start;
}

.be-svc-page .be-mh__title,
.be-svc-page .be-mh__subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.be-svc-page .be-mh__subtitle {
  -webkit-line-clamp: 1;
}

.be-d .be-svc-detail__info {
  position: sticky;
  top: 24px;
}

.be-svc-gallery {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #f7ebe6;
}

.be-svc-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.be-svc-gallery__track::-webkit-scrollbar {
  display: none;
}

.be-svc-gallery__track img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: start;
}

.be-svc-gallery--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  color: var(--be-coral-soft);
}

.be-svc-gallery__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.be-svc-gallery__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transition: width 0.2s ease;
}

.be-svc-gallery__dots span.is-active {
  width: 18px;
  border-radius: 6px;
  background: #fff;
}

.be-svc-detail__title {
  font-family: var(--be-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: var(--be-ink);
  margin-top: 6px;
}

.be-svc-detail__vendor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--be-muted);
}

.be-svc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.be-svc-stats li {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid var(--be-line);
  border-radius: 16px;
  background: var(--be-white);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  text-align: center;
  color: var(--be-ink);
}

.be-svc-stats__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--be-blush);
  color: var(--be-coral);
}

.be-svc-buy {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 20px;
}

.be-svc-sections {
  max-width: 820px;
}

.be-svc-sections .be-svc-section {
  margin-top: 40px;
}

.be-svc-clamp p,
.be-svc-prose p {
  font-size: 14px;
  line-height: 22px;
  color: var(--be-color-text-secondary, #5c4742);
}

.be-svc-clamp p + p,
.be-svc-prose p + p {
  margin-top: 12px;
}

.be-svc-clamp.is-clamped {
  max-height: 132px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}

.be-svc-more {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-ticks {
  display: grid;
  gap: 12px;
}

.be-svc-ticks li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 20px;
  color: var(--be-color-text-secondary, #5c4742);
}

.be-svc-ticks svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--be-color-text-success, #2a8e7d);
}

.be-svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.be-svc-section .be-svc-tags {
  margin-top: 0;
}

.be-svc-numbered {
  display: grid;
  gap: 14px;
  counter-reset: svc;
}

.be-svc-numbered li {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 20px;
  color: var(--be-color-text-secondary, #5c4742);
  counter-increment: svc;
}

.be-svc-numbered li::before {
  content: counter(svc);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--be-blush);
  color: var(--be-coral);
  font-size: 11px;
  font-weight: 700;
}

.be-svc-faqs {
  border-top: 1px solid var(--be-line);
}

.be-svc-faq {
  border-bottom: 1px solid var(--be-line);
}

.be-svc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--be-ink);
  cursor: pointer;
  list-style: none;
}

.be-svc-faq summary::-webkit-details-marker {
  display: none;
}

.be-svc-faq summary svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.be-svc-faq[open] summary svg {
  transform: rotate(180deg);
}

.be-svc-faq p {
  padding-bottom: 16px;
  font-size: 13px;
  line-height: 20px;
  color: var(--be-color-text-secondary, #5c4742);
}

.be-svc-grid--rail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.be-svc-facts {
  display: grid;
  gap: 0;
  margin-top: 20px;
  padding: 4px 20px;
}

.be-svc-facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--be-line);
  font-size: 13px;
}

.be-svc-facts div:last-child {
  border-bottom: 0;
}

.be-svc-facts dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--be-muted);
  white-space: nowrap;
}

.be-svc-facts dt svg {
  color: var(--be-coral);
}

.be-svc-facts dd {
  font-weight: 600;
  color: var(--be-ink);
  text-align: right;
}

.be-svc-entry {
  font-size: 13px;
  line-height: 20px;
  color: var(--be-color-text-secondary, #5c4742);
}

.be-svc-entry__img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 16px;
}

.be-svc-enter {
  display: grid;
  gap: 12px;
}

.be-svc-input {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--be-ink);
}

.be-svc-input .be-field {
  min-height: 52px;
}

.be-svc-input textarea {
  padding: 12px 0;
  resize: vertical;
  font: inherit;
  font-size: 14px;
}

.be-svc-upload {
  display: grid;
  gap: 10px;
  cursor: pointer;
}

.be-svc-upload__box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px dashed var(--be-coral-soft);
  border-radius: 16px;
  background: var(--be-blush);
  font-size: 12px;
  font-weight: 500;
  color: var(--be-ink);
}

.be-svc-upload:focus-within .be-svc-upload__box {
  outline: 2px solid var(--be-coral);
  outline-offset: 2px;
}

.be-svc-upload img {
  max-height: 200px;
  width: auto;
  border-radius: 12px;
}

.be-svc-winners {
  display: grid;
  gap: 10px;
}

.be-svc-winners li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--be-ink);
}

.be-svc-winners svg {
  color: var(--be-coral);
}

.be-svc-winners span {
  margin-left: auto;
  color: var(--be-muted);
}

/* ---------- Booking flow ---------- */
.be-svc-flow {
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 24px;
}

.be-svc-flow--narrow {
  max-width: 720px;
}

.be-svc-flowhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.be-svc-flowhead__back {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--be-line);
  border-radius: 16px;
  background: var(--be-white);
  color: var(--be-ink);
}

.be-svc-flowhead__back:hover {
  border-color: var(--be-coral-soft);
}

.be-svc-flowhead__title {
  font-family: var(--be-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  color: var(--be-ink);
}

.be-svc-flowhead__sub {
  font-size: 13px;
  color: var(--be-muted);
}

.be-svc-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.be-svc-steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--be-muted);
  white-space: nowrap;
}

.be-svc-steps__item:not(:last-child)::after {
  content: "";
  flex: 1;
  border-top: 2px dotted var(--be-blush-line, #f3d6cf);
}

.be-svc-steps__item.is-current,
.be-svc-steps__item.is-done {
  color: var(--be-coral);
}

.be-svc-steps__item.is-current {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--be-blush);
  flex: 0 0 auto;
}

.be-svc-steps__item.is-current:not(:last-child) {
  flex: 1;
}

.be-svc-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}

.be-svc-flow__main {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.be-svc-flow__aside {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

.be-svc-panel {
  padding: 20px;
  border: 1px solid var(--be-line);
  min-width: 0;
}

fieldset.be-svc-panel {
  margin: 0;
}

.be-svc-select {
  display: grid;
  gap: 6px;
}

.be-svc-select .be-svc-label {
  margin-bottom: 2px;
}

.be-svc-select select {
  width: 100%;
  border-radius: 14px;
  height: 48px;
}

/* Doctor / service picker */
.be-svc-picks {
  display: grid;
  gap: 12px;
}

.be-svc-pick {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.be-svc-pick:hover {
  border-color: var(--be-coral-soft);
  box-shadow: var(--be-shadow-soft);
}

.be-svc-pick__avatar,
.be-svc-doctor__photo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--be-blush);
  color: var(--be-coral);
}

.be-svc-pick__avatar img,
.be-svc-doctor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.be-svc-pick__meta {
  display: grid;
  flex: 1;
  gap: 2px;
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-pick__meta strong {
  font-size: 15px;
  color: var(--be-ink);
}

.be-svc-pick__modes {
  color: var(--be-coral);
  font-weight: 500;
}

.be-svc-pick__price {
  display: grid;
  justify-items: end;
  font-size: 11px;
  color: var(--be-coral-soft);
}

.be-svc-pick__price strong {
  font-size: 16px;
  color: var(--be-ink);
}

/* Calendar */
.be-svc-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.be-svc-cal__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-cal__nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--be-blush);
  color: var(--be-ink);
}

.be-svc-cal__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.be-svc-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px 4px;
  text-align: center;
}

.be-svc-cal__dow {
  padding-bottom: 6px;
  font-size: 11px;
  color: var(--be-muted);
}

.be-svc-cal__day {
  justify-self: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--be-ink);
  transition: background 0.15s ease, color 0.15s ease;
}

.be-svc-cal__day:hover:not(:disabled) {
  background: var(--be-blush);
}

.be-svc-cal__day:disabled {
  color: #d9c9c1;
  font-weight: 400;
  cursor: default;
}

.be-svc-cal__day.is-selected {
  background: var(--be-coral);
  color: #fff;
}

.be-svc-cal__day:focus-visible,
.be-svc-time input:focus-visible + span {
  outline: 2px solid var(--be-coral);
  outline-offset: 2px;
}

/* Time slots */
.be-svc-times {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.be-svc-times__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.be-svc-times__grid:empty {
  display: none;
}

.be-svc-times.is-loading .be-svc-times__grid {
  opacity: 0.4;
}

.be-svc-time {
  position: relative;
}

.be-svc-time input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.be-svc-time span {
  display: grid;
  place-items: center;
  height: 42px;
  border: 1.5px solid var(--be-line);
  border-radius: 12px;
  background: var(--be-white);
  font-size: 12px;
  font-weight: 600;
  color: var(--be-ink);
  cursor: pointer;
}

.be-svc-time input:checked + span {
  border-color: var(--be-coral);
  background: var(--be-blush);
  color: var(--be-coral);
}

.be-svc-time.is-off span {
  color: #d9c9c1;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Summary + aside */
.be-svc-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.be-svc-mini img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
}

.be-svc-mini img.is-round {
  border-radius: 50%;
}

.be-svc-mini__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-mini__sub {
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-mini__change {
  font-size: 12px;
}

.be-svc-summary {
  padding: 12px 12px 16px;
}

.be-svc-summary__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 14px;
}

.be-svc-summary__img.is-avatar,
.be-svc-success__img.is-avatar {
  width: 72px;
  height: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 4px 4px 12px;
  background: var(--be-blush);
}

.be-svc-success__img.is-avatar {
  margin: 0 auto 12px;
}

.be-svc-summary__name {
  padding: 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-summary__sub {
  padding: 0 4px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-summary__when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 4px 0;
  border-top: 1px solid var(--be-line);
}

.be-svc-summary__date {
  font-size: 15px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-summary__day {
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-summary__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--be-muted);
}

.be-svc-summary__note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--be-coral);
}

.be-svc-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.be-svc-block__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--be-ink);
  margin-bottom: 12px;
}

.be-svc-block__head .be-svc-block__title {
  margin-bottom: 0;
}

.be-svc-block__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--be-coral);
}

.be-svc-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.be-svc-person__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--be-blush);
  font-family: var(--be-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--be-coral);
}

.be-svc-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.be-svc-person__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-person__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--be-maroon, #8d1730);
}

.be-svc-person__contact {
  font-size: 12px;
  color: var(--be-muted);
  word-break: break-word;
}

.be-svc-pricebox {
  padding: 16px 20px;
}

.be-svc-pricebox__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--be-color-text-secondary, #5c4742);
}

.be-svc-pricebox__row dd {
  font-weight: 500;
}

.be-svc-pricebox__row.is-good {
  color: var(--be-color-text-success, #2a8e7d);
}

.be-svc-pricebox__total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--be-line);
  font-size: 15px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-pricebox__total dd {
  font-weight: 700;
}

.be-svc-visits {
  display: grid;
  gap: 10px;
}

.be-svc-visits li {
  display: grid;
  grid-template-columns: 96px 96px 1fr;
  gap: 8px;
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-visits__when {
  font-weight: 700;
  color: var(--be-ink);
}

/* Sticky price + CTA bar (fixed on mobile, card in the desktop aside) */
.be-svc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--be-line);
  border-radius: 24px;
  background: var(--be-white);
  box-shadow: var(--be-shadow-soft);
}

.be-svc-bar__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-bar__price s {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--be-coral-soft);
}

.be-svc-bar__price strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-bar__save {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 600;
  color: var(--be-color-text-success, #2a8e7d);
}

.be-svc-detail + .be-svc-sections + .be-svc-bar {
  display: none;
}

.be-svc-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--be-muted);
  text-align: center;
}

/* Payment */
.be-svc-pay__lead {
  margin-top: 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--be-color-text-secondary, #5c4742);
}

.be-svc-ref {
  margin-top: 8px;
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-ref strong {
  color: var(--be-ink);
}

.be-svc-methods {
  display: grid;
  gap: 0;
  margin-top: 16px;
  border: 1px solid var(--be-line);
  border-radius: 16px;
  overflow: hidden;
}

.be-svc-methods li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--be-ink);
}

.be-svc-methods li + li {
  border-top: 1px solid var(--be-line);
}

.be-svc-methods svg {
  color: var(--be-coral);
}

.be-svc-pay__status {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--be-ink);
}

.be-svc-pay__status:empty {
  display: none;
}

.be-svc-pay__status.is-error {
  color: var(--be-color-text-error, #b81e40);
}

.be-svc-pay__failed {
  margin-top: 12px;
}

.be-svc-pay__check {
  justify-self: center;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
}

.be-svc-cancel {
  margin-top: 16px;
}

.be-svc-cancel-inline {
  text-align: center;
}

.be-svc-cancel-inline button {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--be-muted);
  text-decoration: underline;
}

/* Success */
.be-svc-success {
  display: grid;
  justify-items: center;
  max-width: 560px;
  margin: 32px auto 0;
  padding: 40px 32px 32px;
  border-radius: 32px;
  background-color: var(--be-coral);
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  text-align: center;
}

.be-svc-success__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--be-ink);
}

.be-svc-success__title {
  font-family: var(--be-font-display);
  font-size: 56px;
  font-style: italic;
  font-weight: 700;
  line-height: 64px;
  color: var(--be-ink);
}

.be-svc-success__lead {
  max-width: 360px;
  font-size: 14px;
  line-height: 20px;
  color: var(--be-ink);
}

.be-svc-success__lead strong {
  display: block;
}

.be-svc-success__card {
  width: 100%;
  margin-top: 24px;
  padding: 16px;
  border-radius: 24px;
  background: var(--be-white);
  text-align: left;
}

.be-svc-success__ref {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--be-ink);
}

.be-svc-success__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 12px;
}

.be-svc-success__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-success__sub {
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-success__paid {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--be-line);
  font-size: 14px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-success__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 24px;
}

.be-svc-success__actions .be-btn--ghost {
  border-color: var(--be-white);
}

/* Phone gate */
.be-svc-phone {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 24px auto 0;
  padding: 40px 24px;
  text-align: center;
}

.be-svc-phone .be-svc-empty__text {
  color: var(--be-muted);
}

.be-svc-phone__actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

/* ---------- Appointments ---------- */
.be-svc-appts {
  display: grid;
  gap: 12px;
}

.be-svc-appt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--be-line);
  border-radius: 20px;
  background: var(--be-white);
  transition: border-color 0.15s ease;
}

.be-svc-appt:hover {
  border-color: var(--be-coral-soft);
}

.be-svc-appt__date {
  display: grid;
  justify-items: center;
  flex-shrink: 0;
  width: 56px;
  padding: 8px 0;
  border-radius: 14px;
  background: var(--be-blush);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--be-coral);
}

.be-svc-appt__date strong {
  font-size: 20px;
  line-height: 22px;
  color: var(--be-ink);
}

.be-svc-appt__body {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.be-svc-appt__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-appt__sub,
.be-svc-appt__time {
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-appt__time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.be-svc-doctors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.be-svc-doctor {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px;
}

.be-svc-doctor__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.be-svc-doctor__photo {
  width: 64px;
  height: 64px;
}

.be-svc-doctor__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-doctor__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--be-color-text-success, #2a8e7d);
}

.be-svc-doctor__spec {
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-doctor__bio {
  font-size: 12px;
  line-height: 18px;
  color: var(--be-color-text-secondary, #5c4742);
}

.be-svc-doctor__svc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--be-canvas);
}

.be-svc-doctor__svc > div {
  flex: 1;
  min-width: 0;
}

.be-svc-doctor__svc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-doctor__svc-meta {
  font-size: 11px;
  color: var(--be-muted);
}

.be-svc-doctor__svc .be-svc-price {
  display: grid;
  justify-items: end;
}

.be-svc-doctor__svc .be-svc-price strong {
  font-size: 15px;
}

.be-svc-booking {
  display: grid;
  gap: 8px;
}

.be-svc-booking__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.be-svc-booking__head > div {
  flex: 1;
}

.be-svc-booking__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-booking .be-svc-facts {
  margin-top: 8px;
  padding: 0;
}

.be-svc-booking__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.be-svc-cancel summary {
  font-size: 14px;
  font-weight: 700;
  color: var(--be-ink);
  cursor: pointer;
}

.be-svc-cancel form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.be-svc-cancel textarea {
  padding: 12px 0;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.be-svc-cancel .be-btn {
  justify-self: start;
}

/* ---------- Vaccination ---------- */
.be-svc-pkgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.be-svc-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 20px;
  overflow: hidden;
}

.be-svc-pkg::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--pkg, var(--be-coral-soft));
}

.be-svc-pkg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.be-svc-pkg__type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pkg, var(--be-coral));
}

.be-svc-pkg__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  color: var(--be-ink);
}

.be-svc-pkg__duration {
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-pkg__summary {
  font-size: 12px;
  line-height: 18px;
  color: var(--be-color-text-secondary, #5c4742);
}

.be-svc-pkg__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.be-svc-pkg__facts li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--be-canvas);
  font-size: 11px;
  color: var(--be-muted);
}

.be-svc-pkg__facts strong {
  color: var(--be-ink);
}

.be-svc-pkg .be-svc-price {
  margin-top: auto;
  padding-top: 8px;
}

.be-svc-pkg__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.be-svc-pkg__actions .be-btn {
  flex: 1;
}

.be-svc-schedule-form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.be-svc-schedule-form .be-svc-select {
  flex: 1 1 220px;
}

.be-svc-schedule-form input[type="date"] {
  width: 100%;
  height: 48px;
  border-radius: 14px;
}

.be-svc-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 8px;
}

.be-svc-plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.be-svc-plan__title {
  font-family: var(--be-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-plan__progress {
  display: grid;
  justify-items: end;
  font-size: 11px;
  color: var(--be-muted);
}

.be-svc-plan__progress strong {
  font-size: 22px;
  color: var(--be-coral);
}

.be-svc-progress {
  height: 8px;
  margin-top: 16px;
  border-radius: 8px;
  background: var(--be-blush);
  overflow: hidden;
}

.be-svc-progress span {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: var(--be-coral);
}

.be-svc-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff1d6;
  font-size: 13px;
  font-weight: 600;
  color: #8a5a00;
}

.be-svc-vax {
  display: grid;
  gap: 32px;
}

.be-svc-vax__visit {
  position: relative;
  display: grid;
  justify-items: center;
  margin-bottom: 16px;
}

.be-svc-vax__word {
  font-family: var(--be-font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -2px;
  background: linear-gradient(180deg, var(--be-coral-soft) 0%, rgba(255, 139, 122, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.3;
  white-space: nowrap;
}

.be-svc-vax__label {
  margin-top: -24px;
  font-family: var(--be-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-vax__doses {
  position: relative;
  display: grid;
  gap: 4px;
}

.be-svc-vax__dose {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px 14px 0;
}

.be-svc-vax__dose:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 40px;
  bottom: -18px;
  border-left: 1.5px solid var(--be-line);
}

.be-svc-vax__dot {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  align-self: flex-start;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 1.5px solid var(--be-ink);
  border-radius: 50%;
  background: var(--be-white);
}

.be-svc-vax__dose.is-done .be-svc-vax__dot {
  border-color: var(--be-color-text-success, #2a8e7d);
  background: var(--be-color-text-success, #2a8e7d);
  color: #fff;
}

.be-svc-vax__body {
  flex: 1;
  min-width: 0;
}

.be-svc-vax__due {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--be-blush);
  font-size: 10px;
  font-weight: 600;
  color: var(--be-coral);
}

.be-svc-vax__due.is-late {
  background: #fde1e6;
  color: var(--be-color-text-error, #b81e40);
}

.be-svc-vax__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--be-ink);
}

.be-svc-vax__meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--be-muted);
}

.be-svc-vax__go {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--be-blush);
  color: var(--be-ink);
  transition: background 0.15s ease;
}

.be-svc-vax__go:hover {
  background: var(--be-coral-soft);
}

.be-svc-pkg-options {
  display: grid;
  gap: 10px;
}

.be-svc-pkg-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--be-line);
  border-radius: 16px;
  cursor: pointer;
}

.be-svc-pkg-option:has(input:checked) {
  border-color: var(--be-coral);
  background: var(--be-blush);
}

.be-svc-pkg-option input {
  accent-color: var(--be-coral);
}

.be-svc-pkg-option__body {
  display: grid;
  flex: 1;
  gap: 2px;
}

.be-svc-pkg-option__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-pkg-option__meta {
  font-size: 11px;
  color: var(--be-muted);
}

.be-svc-pkg-option__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--be-ink);
}

.be-svc-note .be-svc-ticks {
  margin-top: 12px;
}

/* ---------- Mobile ---------- */
.be-m .be-svc {
  padding-bottom: 32px;
}

.be-m .be-svc-section {
  margin-top: 32px;
}

.be-m .be-svc-section--first {
  margin-top: 8px;
}

.be-m .be-svc-section__title {
  font-size: 17px;
  line-height: 24px;
}

.be-m .be-svc-section__row {
  flex-direction: column;
  align-items: stretch;
}

.be-m .be-svc-grid,
.be-m .be-svc-pkgs,
.be-m .be-svc-doctors {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.be-m .be-svc-grid--rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--be-m-pad, 20px));
  padding: 0 var(--be-m-pad, 20px) 4px;
}

.be-m .be-svc-grid--rail > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

.be-m .be-svc-seg {
  width: 100%;
  margin-bottom: 20px;
}

.be-m .be-svc-seg__item {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
}

.be-m .be-svc-cats {
  gap: 12px;
  margin: 0 calc(-1 * var(--be-m-pad, 20px)) 20px;
  padding: 4px var(--be-m-pad, 20px);
}

.be-m .be-svc-cats__item {
  width: 80px;
}

.be-m .be-svc-cats__circle {
  width: 72px;
  height: 72px;
  font-size: 24px;
}

.be-m .be-svc-toolbar,
.be-m .be-svc-filters {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.be-m .be-svc-search {
  max-width: none;
  flex-basis: auto;
}

.be-m .be-svc-chips:not(.be-svc-chips--scroll) {
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.be-m .be-svc-filters__form {
  flex-wrap: wrap;
}

.be-m .be-svc-filters__form .be-svc-search {
  flex: 1 1 100%;
  min-width: 0;
}

.be-m .be-svc-chips--scroll {
  margin: 0 calc(-1 * var(--be-m-pad, 20px)) 20px;
  padding: 0 var(--be-m-pad, 20px) 2px;
}

.be-m .be-svc-detail {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.be-m .be-svc-gallery {
  border-radius: 24px;
}

.be-m .be-svc-detail__title {
  font-size: 22px;
  line-height: 30px;
}

.be-m .be-svc-stats {
  gap: 8px;
  margin-bottom: 18px;
}

.be-m .be-svc-stats li {
  padding: 12px 6px;
  font-size: 10px;
}

.be-m .be-svc-sections .be-svc-section {
  margin-top: 28px;
}

.be-m .be-svc--offering .be-svc-buy {
  display: none;
}

.be-m .be-svc-detail + .be-svc-sections + .be-svc-bar {
  display: flex;
}

.be-m .be-svc-flow {
  padding-top: 12px;
}

.be-m .be-svc-steps {
  margin-bottom: 20px;
}

.be-m .be-svc-flow__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.be-m .be-svc-flow__aside {
  position: static;
}

.be-m .be-svc-panel {
  padding: 16px;
}

.be-m .be-svc-cal__day {
  width: 38px;
  height: 38px;
}

.be-m .be-svc-times__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.be-m .be-svc-visits li {
  grid-template-columns: 1fr 1fr;
}

.be-m .be-svc-visits__doses {
  grid-column: 1 / -1;
}

/* The CTA bar sticks to the bottom of the screen on mobile. */
.be-m.be-svc-has-bar .be-main {
  padding-bottom: 104px;
}

.be-m .be-svc-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px var(--be-m-pad, 20px) calc(12px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--be-line);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 24px rgba(90, 35, 51, 0.08);
}

.be-m .be-svc-bar .be-btn {
  flex-shrink: 0;
  min-width: 150px;
}

.be-m .be-svc-pay__check {
  margin-top: 4px;
}

.be-m .be-svc-success {
  max-width: none;
  margin: 0;
  min-height: calc(100vh - 80px);
  align-content: start;
  padding: 32px var(--be-m-pad, 20px) 40px;
  border-radius: 0;
}

.be-m .be-svc-success__title {
  font-size: 48px;
  line-height: 56px;
}

.be-m .be-svc-phone__actions {
  flex-direction: column;
  width: 100%;
}

.be-m .be-svc-appt {
  padding: 12px;
  gap: 12px;
}

.be-m .be-svc-appt .be-svc-status {
  align-self: flex-start;
}

.be-m .be-svc-doctor__svc {
  flex-wrap: wrap;
}

.be-m .be-svc-plan__title {
  font-size: 20px;
}

.be-m .be-svc-vax__word {
  font-size: 36px;
}

.be-m .be-svc-schedule-form {
  flex-direction: column;
  align-items: stretch;
}

.be-m .be-svc-schedule-form .be-svc-select {
  flex-basis: auto;
}

.be-m .be-svc-preview-head {
  flex-direction: column;
  align-items: flex-start;
}

/* Desktop tablet widths */
@media (max-width: 1180px) {
  .be-d .be-svc-grid,
  .be-d .be-svc-pkgs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .be-d .be-svc-flow__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (max-width: 860px) {
  .be-d .be-svc-detail,
  .be-d .be-svc-flow__grid,
  .be-d .be-svc-doctors {
    grid-template-columns: minmax(0, 1fr);
  }

  .be-d .be-svc-flow__aside {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .be-svc-card,
  .be-svc-cal__day,
  .be-svc-faq summary svg {
    transition: none;
  }
}