/* Vitruv Booking & Schedule Suite: booking UI */
.vsc-booking-app,
.vsc-live-schedule,
.vsc-customer-portal,
.vsc-packages {
  --vsc-accent: #b5522a;
  --vsc-dark: #171a18;
  --vsc-ink: #1c211d;
  --vsc-muted: #686f69;
  --vsc-line: #e2e5dc;
  --vsc-soft: #f4f5ef;
  --vsc-paper: #fff;
  --vsc-danger: #9f3a37;
  --vsc-success: #35734a;
  width: 100%;
  box-sizing: border-box;
  color: var(--vsc-ink);
  font-family: inherit;
  line-height: 1.5;
}

.vsc-booking-app *,
.vsc-live-schedule *,
.vsc-customer-portal *,
.vsc-packages * {
  box-sizing: border-box;
}

.vsc-booking-app button,
.vsc-live-schedule button,
.vsc-customer-portal button,
.vsc-packages button,
.vsc-booking-app input,
.vsc-booking-app select,
.vsc-booking-app textarea,
.vsc-customer-portal input,
.vsc-customer-portal select {
  font: inherit;
}

.vsc-booking-app {
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--vsc-line);
  border-radius: 24px;
  background: var(--vsc-paper);
  box-shadow: 0 22px 70px rgba(22, 28, 23, 0.1);
}

.vsc-booking-header {
  position: relative;
  padding: clamp(30px, 5vw, 62px);
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--vsc-accent) 32%, transparent) 0 11%, transparent 42%),
    linear-gradient(135deg, #1a1f1b, var(--vsc-dark));
  color: #fff;
}

.vsc-booking-header::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -145px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.025), 0 0 0 100px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

.vsc-eyebrow {
  display: inline-block;
  margin-bottom: 9px;
  color: var(--vsc-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.vsc-booking-header h2,
.vsc-schedule-header h2,
.vsc-portal-header h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.vsc-booking-header p,
.vsc-portal-header p {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 15px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
}

.vsc-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0 clamp(20px, 5vw, 62px);
  border-bottom: 1px solid var(--vsc-line);
  background: #fbfcf8;
  list-style: none;
}

.vsc-progress li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 72px;
  margin: 0;
  padding: 14px 6px;
  color: #8a908a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.vsc-progress li::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: transparent;
  transition: background-color 180ms ease;
}

.vsc-progress li span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #d5d9d0;
  border-radius: 50%;
  background: #fff;
  color: #7b817c;
  font-size: 12px;
}

.vsc-progress li.is-active,
.vsc-progress li.is-complete {
  color: var(--vsc-dark);
}

.vsc-progress li.is-active::after {
  background: var(--vsc-accent);
}

.vsc-progress li.is-active span,
.vsc-progress li.is-complete span {
  border-color: var(--vsc-accent);
  background: var(--vsc-accent);
  color: #11140f;
}

.vsc-progress li.is-complete span {
  font-size: 0;
}

.vsc-progress li.is-complete span::before {
  content: "✓";
  font-size: 12px;
}

.vsc-booking-form {
  margin: 0;
}

.vsc-booking-step {
  padding: clamp(28px, 5vw, 58px);
}

.vsc-booking-step[hidden],
.vsc-booking-complete[hidden],
.vsc-reschedule-panel[hidden],
.vsc-payment-options label[hidden],
.vsc-credit-option[hidden] {
  display: none !important;
}

.vsc-step-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.vsc-step-heading > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--vsc-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vsc-step-heading h3 {
  margin: 0;
  color: var(--vsc-dark);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.2;
  outline: none;
}

.vsc-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vsc-service-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--vsc-line);
  border-radius: 18px;
  background: var(--vsc-paper);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(22, 28, 23, 0.035);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.vsc-service-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--vsc-accent) 60%, var(--vsc-line));
  box-shadow: 0 14px 34px rgba(22, 28, 23, 0.09);
}

.vsc-service-card.is-selected {
  border-color: var(--vsc-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vsc-accent) 24%, transparent), 0 14px 34px rgba(22, 28, 23, 0.09);
}

.vsc-service-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--vsc-soft);
}

.vsc-service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}

.vsc-service-card:hover .vsc-service-card__image img {
  transform: scale(1.035);
}

.vsc-service-card__content {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 21px;
}

.vsc-service-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vsc-service-card__top strong {
  color: var(--vsc-dark);
  font-size: 18px;
  line-height: 1.32;
}

.vsc-checkmark {
  display: grid;
  width: 25px;
  min-width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #d6dacf;
  border-radius: 50%;
  color: transparent;
  font-size: 12px;
}

.vsc-service-card.is-selected .vsc-checkmark {
  border-color: var(--vsc-accent);
  background: var(--vsc-accent);
  color: #10120f;
}

.vsc-service-card__description {
  display: block;
  margin-top: 10px;
  color: var(--vsc-muted);
  font-size: 14px;
  line-height: 1.65;
}

.vsc-service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
}

.vsc-service-meta span,
.vsc-timezone-chip,
.vsc-package-credit {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--vsc-soft);
  color: #5d645e;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.vsc-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--vsc-line);
}

.vsc-step-actions--end {
  justify-content: flex-end;
}

.vsc-btn,
.vsc-booking-app .vsc-btn,
.vsc-live-schedule .vsc-btn,
.vsc-customer-portal .vsc-btn,
.vsc-packages .vsc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 47px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.vsc-btn:hover {
  transform: translateY(-1px);
}

.vsc-btn--primary,
.vsc-booking-app .vsc-btn--primary,
.vsc-live-schedule .vsc-btn--primary,
.vsc-customer-portal .vsc-btn--primary,
.vsc-packages .vsc-btn--primary {
  border-color: var(--vsc-accent);
  background: var(--vsc-accent);
  color: #10120f;
}

.vsc-btn--primary:hover {
  background: color-mix(in srgb, var(--vsc-accent) 88%, #fff);
  color: #10120f;
}

.vsc-btn--ghost,
.vsc-booking-app .vsc-btn--ghost,
.vsc-customer-portal .vsc-btn--ghost {
  border-color: #d9ddd4;
  background: #fff;
  color: var(--vsc-dark);
}

.vsc-btn--ghost:hover {
  border-color: var(--vsc-accent);
  background: var(--vsc-soft);
}

.vsc-btn--small {
  min-height: 37px;
  padding: 8px 14px;
  font-size: 12px;
}

.vsc-btn[disabled],
.vsc-text-btn[disabled],
.vsc-slot-button[disabled],
.vsc-reschedule-slot[disabled] {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

.vsc-text-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--vsc-dark);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.vsc-text-btn:hover {
  color: #923f20;
  border-bottom-color: #923f20;
}

.vsc-text-btn--danger {
  color: var(--vsc-danger);
}

.vsc-time-controls,
.vsc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
}

.vsc-time-controls {
  grid-template-columns: minmax(0, 2fr) minmax(140px, 0.65fr) minmax(180px, 0.85fr);
  align-items: end;
}

.vsc-field {
  min-width: 0;
}

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

.vsc-field > label,
.vsc-field > span:first-child {
  display: block;
  margin-bottom: 8px;
  color: #343a35;
  font-size: 13px;
  font-weight: 760;
}

.vsc-booking-app input[type="text"],
.vsc-booking-app input[type="email"],
.vsc-booking-app input[type="tel"],
.vsc-booking-app input[type="date"],
.vsc-booking-app input[type="number"],
.vsc-booking-app select,
.vsc-booking-app textarea,
.vsc-customer-portal input[type="date"],
.vsc-customer-portal select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #d8ddd4;
  border-radius: 10px;
  background: #fff;
  color: var(--vsc-dark);
  box-shadow: inset 0 1px 1px rgba(20, 25, 21, 0.02);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vsc-booking-app textarea {
  min-height: 112px;
  resize: vertical;
}

.vsc-booking-app input:focus,
.vsc-booking-app select:focus,
.vsc-booking-app textarea:focus,
.vsc-customer-portal input:focus,
.vsc-customer-portal select:focus {
  border-color: var(--vsc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vsc-accent) 20%, transparent);
}

.vsc-staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.vsc-staff-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid #dde1d8;
  border-radius: 12px;
  background: #fff;
  color: var(--vsc-dark);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.vsc-staff-card:hover,
.vsc-staff-card.is-selected {
  border-color: var(--vsc-accent);
  background: color-mix(in srgb, var(--vsc-accent) 7%, #fff);
  color: var(--vsc-ink);
}

.vsc-staff-card:hover strong,
.vsc-staff-card:hover small,
.vsc-staff-card.is-selected strong,
.vsc-staff-card.is-selected small {
  color: var(--vsc-ink) !important;
}

.vsc-staff-card.is-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vsc-accent) 18%, transparent);
}

.vsc-staff-avatar {
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: var(--vsc-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.vsc-staff-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vsc-staff-card > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.vsc-staff-card strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vsc-staff-card small {
  overflow: hidden;
  color: var(--vsc-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vsc-staff-card i {
  display: grid;
  width: 20px;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #d8ddd3;
  border-radius: 50%;
  color: transparent;
  font-size: 9px;
  font-style: normal;
}

.vsc-staff-card.is-selected i {
  border-color: var(--vsc-accent);
  background: var(--vsc-accent);
  color: #11140f;
}

.vsc-slot-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin: 28px 0 14px;
}

.vsc-slot-toolbar > div {
  display: flex;
  flex-direction: column;
}

.vsc-slot-toolbar strong {
  color: var(--vsc-dark);
  font-size: 17px;
}

.vsc-slot-toolbar small {
  margin-top: 2px;
  color: var(--vsc-muted);
  font-size: 11px;
}

.vsc-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 120px;
}

.vsc-slot-day {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vsc-line);
  border-radius: 14px;
  background: #fbfcf9;
}

.vsc-slot-day > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--vsc-line);
  background: var(--vsc-soft);
}

.vsc-slot-day > header strong {
  color: var(--vsc-dark);
  font-size: 13px;
}

.vsc-slot-day > header span {
  color: var(--vsc-muted);
  font-size: 11px;
}

.vsc-slot-day > div {
  display: grid;
  gap: 7px;
  padding: 9px;
}

.vsc-slot-button {
  display: grid;
  grid-template-columns: minmax(80px, 0.7fr) minmax(120px, 1.2fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #e0e4db;
  border-radius: 10px;
  background: #fff;
  color: var(--vsc-dark);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.vsc-slot-button:hover,
.vsc-slot-button.is-selected {
  border-color: var(--vsc-accent);
  background: color-mix(in srgb, var(--vsc-accent) 7%, #fff);
}

.vsc-slot-button.is-selected {
  box-shadow: inset 4px 0 0 var(--vsc-accent), 0 0 0 2px color-mix(in srgb, var(--vsc-accent) 16%, transparent);
}

.vsc-slot-button.is-waitlist {
  border-style: dashed;
}

.vsc-slot-button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.vsc-slot-button strong,
.vsc-slot-button b {
  overflow: hidden;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vsc-slot-button small {
  overflow: hidden;
  color: var(--vsc-muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vsc-slot-price {
  color: var(--vsc-dark);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.vsc-inline-loading,
.vsc-empty-inline {
  display: flex;
  grid-column: 1 / -1;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  border: 1px dashed #d9ddd4;
  border-radius: 12px;
  background: var(--vsc-soft);
  color: var(--vsc-muted);
  font-size: 13px;
  text-align: center;
}

.vsc-spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vsc-spin 700ms linear infinite;
}

.vsc-spinner.is-visible,
.is-loading .vsc-spinner {
  display: inline-block;
}

.vsc-btn.is-loading [data-vsc-submit-label] {
  opacity: 0.72;
}

@keyframes vsc-spin {
  to { transform: rotate(360deg); }
}

.vsc-payment-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 27px 0 0;
  padding: 0;
  border: 0;
}

.vsc-payment-options legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--vsc-dark);
  font-size: 14px;
  font-weight: 800;
}

.vsc-payment-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 100%;
  padding: 15px;
  border: 1px solid var(--vsc-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.vsc-payment-options label:has(input:checked) {
  border-color: var(--vsc-accent);
  background: color-mix(in srgb, var(--vsc-accent) 7%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vsc-accent) 17%, transparent);
}

.vsc-payment-options input,
.vsc-consent input {
  width: 17px;
  min-width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--vsc-accent);
}

.vsc-payment-options label > span {
  display: flex;
  flex-direction: column;
}

.vsc-payment-options strong {
  color: var(--vsc-dark);
  font-size: 13px;
}

.vsc-payment-options small {
  margin-top: 3px;
  color: var(--vsc-muted);
  font-size: 11px;
  line-height: 1.5;
}

.vsc-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  color: #4f5550;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
}

.vsc-consent a {
  color: var(--vsc-dark);
  font-weight: 700;
  text-decoration: underline;
}

.vsc-privacy-note,
.vsc-policy-note {
  margin: 13px 0 0;
  color: #7a807a;
  font-size: 11px;
  line-height: 1.6;
}

.vsc-review-card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 20px;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--vsc-line);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f6f7f2);
}

.vsc-review-icon,
.vsc-complete-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--vsc-accent);
  color: #10120f;
  font-size: 23px;
  font-weight: 900;
}

.vsc-review-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

.vsc-review-details > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--vsc-line);
}

.vsc-review-details span {
  color: var(--vsc-muted);
  font-size: 12px;
}

.vsc-review-details strong {
  color: var(--vsc-dark);
  font-size: 13px;
  text-align: right;
}

.vsc-booking-notice {
  margin: 22px clamp(28px, 5vw, 58px) 0;
  padding: 13px 16px;
  border: 1px solid #d9ddd3;
  border-radius: 10px;
  background: var(--vsc-soft);
  color: #454b46;
  font-size: 13px;
  font-weight: 650;
}

.vsc-booking-notice.is-error {
  border-color: color-mix(in srgb, var(--vsc-danger) 40%, #ddd);
  background: color-mix(in srgb, var(--vsc-danger) 7%, #fff);
  color: var(--vsc-danger);
}

.vsc-booking-notice.is-success {
  border-color: color-mix(in srgb, var(--vsc-success) 40%, #ddd);
  background: color-mix(in srgb, var(--vsc-success) 7%, #fff);
  color: var(--vsc-success);
}

.vsc-booking-complete {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(42px, 8vw, 90px) clamp(25px, 5vw, 55px);
  text-align: center;
}

.vsc-complete-mark {
  margin: 0 auto 21px;
}

.vsc-booking-complete h3 {
  margin: 4px 0 10px;
  color: var(--vsc-dark);
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.03em;
}

.vsc-booking-complete > p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--vsc-muted);
  font-size: 15px;
  line-height: 1.7;
}

.vsc-complete-summary {
  display: grid;
  gap: 6px;
  max-width: 470px;
  margin: 28px auto;
  padding: 20px;
  border: 1px solid var(--vsc-line);
  border-radius: 14px;
  background: var(--vsc-soft);
}

.vsc-complete-summary strong {
  color: var(--vsc-dark);
  font-size: 18px;
}

.vsc-complete-summary span {
  color: var(--vsc-muted);
  font-size: 13px;
}

.vsc-complete-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Live schedule */
.vsc-live-schedule {
  max-width: 1180px;
  margin: 0 auto;
}

.vsc-schedule-header,
.vsc-portal-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 25px;
}

.vsc-schedule-header h2,
.vsc-portal-header h2 {
  color: var(--vsc-dark);
  font-size: clamp(28px, 4vw, 46px);
}

.vsc-schedule-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.vsc-schedule-day {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vsc-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 28, 23, 0.05);
}

.vsc-schedule-day > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--vsc-dark);
  color: #fff;
}

.vsc-schedule-day > header strong {
  font-size: 15px;
}

.vsc-schedule-day > header span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
}

.vsc-schedule-list {
  display: grid;
}

.vsc-schedule-session {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid var(--vsc-line);
}

.vsc-schedule-session:last-child {
  border-bottom: 0;
}

.vsc-schedule-session::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--vsc-service-color, var(--vsc-accent));
}

.vsc-schedule-session__time,
.vsc-schedule-session__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.vsc-schedule-session__time strong,
.vsc-schedule-session__body strong {
  overflow: hidden;
  color: var(--vsc-dark);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vsc-schedule-session__time small,
.vsc-schedule-session__body span,
.vsc-schedule-session__body small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--vsc-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Customer portal */
.vsc-customer-portal {
  max-width: 1120px;
  margin: 0 auto;
}

.vsc-portal-header {
  align-items: center;
  padding: clamp(24px, 5vw, 45px);
  border-radius: 20px;
  background: var(--vsc-dark);
  color: #fff;
}

.vsc-portal-header > div {
  max-width: 670px;
}

.vsc-portal-header p {
  margin-top: 9px;
  font-size: 14px;
}

.vsc-customer-portal > .vsc-booking-notice {
  margin: 18px 0;
}

.vsc-portal-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.vsc-portal-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 19px;
  padding: 21px;
  border: 1px solid var(--vsc-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(22, 28, 23, 0.045);
}

.vsc-portal-card.is-history {
  opacity: 0.78;
}

.vsc-portal-date {
  display: flex;
  width: 65px;
  height: 72px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 13px;
  background: var(--vsc-soft);
  color: var(--vsc-dark);
}

.vsc-portal-date strong {
  font-size: 25px;
  line-height: 1;
}

.vsc-portal-date span {
  margin-top: 4px;
  color: var(--vsc-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.vsc-portal-main {
  min-width: 0;
}

.vsc-portal-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.vsc-portal-title h3 {
  margin: 7px 0 0;
  color: var(--vsc-dark);
  font-size: 19px;
  letter-spacing: -0.015em;
}

.vsc-status {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef1e8;
  color: #536044;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.vsc-status--confirmed,
.vsc-status--completed {
  background: #e7f3ea;
  color: #2d6940;
}

.vsc-status--pending,
.vsc-status--pending_approval,
.vsc-status--waitlisted {
  background: #f6f0da;
  color: #816d22;
}

.vsc-status--cancelled,
.vsc-status--no_show,
.vsc-status--needs_review {
  background: #f7e7e6;
  color: #913b37;
}

.vsc-reference {
  color: #878d87;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  white-space: nowrap;
}

.vsc-portal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 12px;
}

.vsc-portal-meta span {
  position: relative;
  color: var(--vsc-muted);
  font-size: 12px;
}

.vsc-portal-meta span:not(:last-child)::after {
  content: "•";
  position: absolute;
  right: -9px;
  color: #c4c8c1;
}

.vsc-portal-payment {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 11px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--vsc-line);
}

.vsc-portal-payment span,
.vsc-portal-payment small {
  color: var(--vsc-muted);
  font-size: 11px;
}

.vsc-portal-payment strong {
  color: var(--vsc-dark);
  font-size: 13px;
}

.vsc-portal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px 16px;
  margin-top: 14px;
}

.vsc-reschedule-panel {
  margin-top: 17px;
  padding: 18px;
  border: 1px solid var(--vsc-line);
  border-radius: 13px;
  background: var(--vsc-soft);
}

.vsc-reschedule-panel .vsc-form-grid {
  margin-bottom: 12px;
}

.vsc-reschedule-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.vsc-reschedule-slot {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 10px;
  border: 1px solid #dce1d7;
  border-radius: 9px;
  background: #fff;
  color: var(--vsc-dark);
  text-align: left;
  cursor: pointer;
}

.vsc-reschedule-slot:hover {
  border-color: var(--vsc-accent);
}

.vsc-reschedule-slot strong {
  font-size: 11px;
}

.vsc-reschedule-slot span,
.vsc-reschedule-slot small {
  margin-top: 2px;
  color: var(--vsc-muted);
  font-size: 10px;
}

/* Packages */
.vsc-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}

.vsc-package-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vsc-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(22, 28, 23, 0.06);
}

.vsc-package-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vsc-package-card > div {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 24px;
}

.vsc-package-credit {
  align-self: flex-start;
  background: color-mix(in srgb, var(--vsc-accent) 18%, #fff);
  color: var(--vsc-dark);
}

.vsc-package-card h3 {
  margin: 13px 0 8px;
  color: var(--vsc-dark);
  font-size: 23px;
  letter-spacing: -0.02em;
}

.vsc-package-description {
  color: var(--vsc-muted);
  font-size: 13px;
  line-height: 1.65;
}

.vsc-package-description p {
  margin: 0 0 9px;
}

.vsc-package-card ul {
  margin: 17px 0 22px;
  padding: 0;
  color: var(--vsc-muted);
  font-size: 12px;
  list-style: none;
}

.vsc-package-card li {
  position: relative;
  margin: 7px 0;
  padding-left: 18px;
}

.vsc-package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--vsc-accent);
  font-weight: 900;
}

.vsc-package-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--vsc-line);
}

.vsc-package-footer > strong {
  color: var(--vsc-dark);
  font-size: 19px;
}

.vsc-muted {
  color: var(--vsc-muted);
  font-size: 11px;
}

.vsc-empty-state {
  display: grid;
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 35px;
  border: 1px dashed #d5dacf;
  border-radius: 16px;
  background: var(--vsc-soft);
  color: var(--vsc-muted);
  text-align: center;
}

.vsc-empty-state > span {
  color: var(--vsc-accent);
  font-size: 30px;
}

.vsc-empty-state h3,
.vsc-empty-state p {
  margin: 0;
}

.vsc-empty-state h3 {
  color: var(--vsc-dark);
  font-size: 20px;
}

.vsc-empty-state p {
  max-width: 510px;
  font-size: 13px;
  line-height: 1.6;
}

.vsc-booking-app button:focus-visible,
.vsc-booking-app a:focus-visible,
.vsc-booking-app input:focus-visible,
.vsc-booking-app select:focus-visible,
.vsc-booking-app textarea:focus-visible,
.vsc-live-schedule a:focus-visible,
.vsc-customer-portal button:focus-visible,
.vsc-customer-portal a:focus-visible,
.vsc-packages a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--vsc-accent) 55%, #fff);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .vsc-service-grid,
  .vsc-schedule-days,
  .vsc-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vsc-time-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vsc-time-controls .vsc-field--wide {
    grid-column: 1 / -1;
  }

  .vsc-staff-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vsc-payment-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .vsc-booking-app {
    border-radius: 17px;
  }

  .vsc-progress {
    padding: 0 10px;
  }

  .vsc-progress li {
    min-height: 60px;
    gap: 5px;
    font-size: 10px;
  }

  .vsc-progress li span {
    width: 23px;
    height: 23px;
    font-size: 10px;
  }

  .vsc-service-grid,
  .vsc-slots,
  .vsc-schedule-days,
  .vsc-packages {
    grid-template-columns: 1fr;
  }

  .vsc-service-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .vsc-service-card__image {
    height: 100%;
    min-height: 150px;
    aspect-ratio: auto;
  }

  .vsc-time-controls,
  .vsc-form-grid,
  .vsc-review-details,
  .vsc-payment-options {
    grid-template-columns: 1fr;
  }

  .vsc-staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vsc-review-card {
    grid-template-columns: 1fr;
  }

  .vsc-review-icon {
    width: 46px;
    height: 46px;
  }

  .vsc-schedule-header,
  .vsc-portal-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .vsc-portal-card {
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 13px;
    padding: 15px;
  }

  .vsc-portal-date {
    width: 52px;
    height: 61px;
  }

  .vsc-reschedule-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .vsc-booking-header,
  .vsc-booking-step {
    padding: 25px 18px;
  }

  .vsc-booking-notice {
    margin-right: 18px;
    margin-left: 18px;
  }

  .vsc-progress li {
    flex-direction: column;
    line-height: 1.1;
  }

  .vsc-service-card {
    display: flex;
  }

  .vsc-service-card__image {
    min-height: 0;
    aspect-ratio: 16 / 8;
  }

  .vsc-staff-grid {
    grid-template-columns: 1fr;
  }

  .vsc-step-heading {
    margin-bottom: 22px;
  }

  .vsc-step-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .vsc-step-actions .vsc-btn {
    width: 100%;
  }

  .vsc-slot-button {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .vsc-slot-price {
    grid-column: 1 / -1;
    padding-top: 6px;
    border-top: 1px solid var(--vsc-line);
  }

  .vsc-schedule-session {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .vsc-schedule-session .vsc-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .vsc-portal-header {
    padding: 26px 20px;
  }

  .vsc-portal-header .vsc-btn {
    width: 100%;
  }

  .vsc-portal-card {
    grid-template-columns: 1fr;
  }

  .vsc-portal-date {
    width: 54px;
  }

  .vsc-portal-title {
    flex-direction: column;
    gap: 7px;
  }

  .vsc-reschedule-slots {
    grid-template-columns: 1fr;
  }

  .vsc-package-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .vsc-package-footer .vsc-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vsc-booking-app *,
  .vsc-live-schedule *,
  .vsc-customer-portal *,
  .vsc-packages * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

.vsc-payment-warning {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border: 1px solid rgba(153, 92, 34, .28);
  border-radius: 10px;
  background: rgba(255, 244, 226, .86);
  color: #6e451e;
  font-size: 14px;
  line-height: 1.5;
}


/* Vitruv UI refinement v2.0.1 */
.vsc-booking-app,
.vsc-live-schedule,
.vsc-customer-portal,
.vsc-packages {
    --vsc-accent:#b5522a;
}

/* Service cards */
.vsc-service-card {
    background:#fff;
    color:#1c211d;
    overflow:hidden;
    min-width:0;
}

.vsc-service-card:hover {
    background:#fff !important;
    color:#1c211d !important;
    border-color:#b5522a;
}

.vsc-service-card:hover *,
.vsc-service-card:hover strong,
.vsc-service-card:hover p,
.vsc-service-card:hover small {
    color:inherit;
}

.vsc-service-card__top {
    min-width:0;
}

.vsc-service-card__top strong {
    display:block;
    max-width:calc(100% - 38px);
    overflow-wrap:anywhere;
}

.vsc-service-card__description {
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.vsc-service-meta span {
    background:#f5f2ed;
    color:#1c211d;
    white-space:nowrap;
}

/* Slot cards */
.vsc-slot-button,
.vsc-reschedule-slot {
    background:#fff;
    color:#1c211d;
    border-color:#e2e5dc;
}

.vsc-slot-button:hover,
.vsc-slot-button.is-selected,
.vsc-reschedule-slot:hover {
    background:#fff;
    color:#1c211d;
    border-color:#b5522a;
}

.vsc-slot-button strong,
.vsc-slot-button b,
.vsc-slot-button small {
    color:inherit;
}

/* Responsive cards */
.vsc-service-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
}

@media(max-width:1024px){
    .vsc-service-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:680px){
    .vsc-service-grid {
        grid-template-columns:1fr;
    }

    .vsc-service-card__content {
        padding:18px;
    }

    .vsc-service-card__top strong {
        font-size:16px;
    }

    .vsc-step-actions {
        flex-direction:column;
        align-items:stretch;
    }

    .vsc-btn {
        width:100%;
    }
}

/* Primary actions */
.vsc-btn--primary,
.vsc-booking-app .vsc-btn--primary {
    background:#b5522a;
    border-color:#b5522a;
    color:#fff;
}

.vsc-btn--primary:hover {
    background:#923f20;
    border-color:#923f20;
    color:#fff;
}


/* v2.0.2 professional UI fixes */
.vsc-service-card,
.vsc-service-card * {
    transition: all .2s ease;
}
.vsc-service-card:hover,
.vsc-service-card.is-selected,
.vsc-service-card[aria-selected="true"] {
    background:#fff !important;
    color:#1c211d !important;
}
.vsc-service-card:hover h3,
.vsc-service-card:hover p,
.vsc-service-card:hover span {
    color:#1c211d !important;
}
.vsc-service-card h3,
.vsc-service-card strong,
.vsc-service-card p {
    overflow-wrap:anywhere;
    word-break:normal;
}
.vsc-service-card {
    min-height:205px;
}
.vsc-service-card p {
    min-height:48px;
}
.vsc-slot-button {
    min-height:72px;
    overflow:hidden;
}
.vsc-slot-button * {
    overflow-wrap:anywhere;
}
.vsc-slot-button strong {
    color:#1c211d !important;
}
.vsc-selected,
.vsc-active,
.vsc-booking-app .is-selected {
    border-color:#b5522a !important;
}
.vsc-trainer-card,
.vsc-payment-option {
    overflow:hidden;
}
@media(max-width:767px){
    .vsc-service-card {
        min-height:auto;
    }
}


/* v2.0.4 UI polish */
:root{--vsc-brand:#b5522a;}
.vsc-booking-app,.vsc-live-schedule,.vsc-customer-portal,.vsc-packages{--vsc-accent:#b5522a!important;}

/* Remove unwanted olive states */
.vsc-booking-app *, .vsc-admin-wrap * { --vsc-accent:#b5522a; }

/* Step navigation */
.vsc-step.is-active .vsc-step-number,
.vsc-step.active .vsc-step-number{background:#b5522a!important;color:#fff!important;}
.vsc-step.is-active:after,.vsc-step.active:after{background:#b5522a!important;}

/* Service cards */
.vsc-service-card{overflow:hidden;min-height:205px;}
.vsc-service-card h3,.vsc-service-card strong{overflow-wrap:anywhere;line-height:1.25;}
.vsc-service-card p{overflow-wrap:anywhere;line-height:1.55;}
.vsc-service-card:hover,.vsc-service-card.is-selected{background:#fff!important;color:#111!important;}
.vsc-service-card:hover *,.vsc-service-card.is-selected *{color:inherit!important;}
.vsc-service-card.is-selected{border-color:#b5522a!important;box-shadow:0 0 0 1px #b5522a!important;}
.vsc-service-card .vsc-check,.vsc-service-card .vsc-radio.is-active{background:#b5522a!important;color:#fff!important;}

/* Slots */
.vsc-slot-button,.vsc-time-slot{display:grid!important;grid-template-columns:90px 1fr auto;align-items:center;gap:16px;min-height:58px;overflow:hidden;}
.vsc-slot-button *{overflow-wrap:anywhere;}
.vsc-slot-button:hover,.vsc-slot-button.is-selected{border-color:#b5522a!important;background:#fff!important;color:#111!important;}
.vsc-slot-button.is-selected{box-shadow:0 0 0 1px #b5522a!important;}

/* Admin panels */
.vsc-admin-wrap input:focus,.vsc-admin-wrap select:focus,.vsc-admin-wrap textarea:focus{border-color:#b5522a!important;box-shadow:0 0 0 1px #b5522a!important;}
.vsc-admin-wrap .button-primary{background:#b5522a!important;border-color:#b5522a!important;}

/* Trainer cards */
.vsc-trainer-card.is-selected,.vsc-trainer-option.is-selected{border-color:#b5522a!important;background:#fff!important;}

@media(max-width:700px){
 .vsc-slot-button,.vsc-time-slot{grid-template-columns:1fr;gap:5px;}
}



/* =========================================================
   Vitruv Booking UI Polish v2.0.5
   ========================================================= */

/* Brand color enforcement */
:root,
.vsc-booking-app,
.vsc-booking-admin {
    --vsc-accent:#b5522a !important;
    --vsc-admin-accent:#b5522a !important;
    --vsc-admin-accent-dark:#923f20 !important;
}

/* Remove olive selected states */
.vsc-booking-app .is-selected,
.vsc-booking-app .selected,
.vsc-service-card.is-selected {
    border-color:#b5522a !important;
    outline-color:#b5522a !important;
    background:#fff !important;
    color:#18201b !important;
}

/* Service cards no layout shift */
.vsc-service-card,
.vsc-service-card.is-selected {
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
    min-height:210px;
    padding:24px !important;
}

.vsc-service-card h3,
.vsc-service-card__title {
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
    white-space:normal;
    line-height:1.25;
}

.vsc-service-card p,
.vsc-service-card__description {
    max-width:100%;
    overflow-wrap:anywhere;
    line-height:1.5;
}

/* Selected indicator */
.vsc-service-card.is-selected::before {
    background:#b5522a !important;
}

/* Trainer and slot selections */
.vsc-trainer-card.is-selected,
.vsc-trainer-option.is-selected,
.vsc-slot-button.is-selected,
.vsc-payment-option.is-selected {
    border-color:#b5522a !important;
    background:#fff !important;
}

.vsc-trainer-card:hover,
.vsc-slot-button:hover,
.vsc-payment-option:hover {
    border-color:#b5522a;
    background:#fff;
}

/* Progress steps */
.vsc-step.is-active .vsc-step-number,
.vsc-step.active .vsc-step-number {
    background:#b5522a !important;
}

.vsc-step-progress,
.vsc-progress-bar {
    background:#b5522a !important;
}

/* Admin working hours redesign */
.vsc-working-hours,
.vsc-weekly-hours,
.vsc-availability-panel {
    border:1px solid #dde3df;
    border-radius:18px;
    padding:24px;
    background:#fff;
}

.vsc-working-hours .vsc-day-row,
.vsc-weekly-hours .vsc-day-row {
    display:grid;
    grid-template-columns:120px 1fr;
    gap:18px;
    align-items:center;
    padding:12px 0;
}

@media(max-width:768px){
    .vsc-working-hours .vsc-day-row,
    .vsc-weekly-hours .vsc-day-row {
        grid-template-columns:1fr;
    }
}

/* Better inputs */
.vsc-booking-admin input,
.vsc-booking-admin select,
.vsc-booking-admin textarea {
    border-radius:10px;
    min-height:42px;
}

/* Booking slots */
.vsc-time-slot,
.vsc-slot-button {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:62px;
    padding:14px 18px;
    overflow:hidden;
}

.vsc-time-slot * {
    overflow-wrap:anywhere;
}

/* Package cards */
.vsc-package-card:hover,
.vsc-package-card.is-selected {
    border-color:#b5522a !important;
    background:#fff !important;
}

/* Mobile frontend */
@media(max-width:680px){
    .vsc-service-card,
    .vsc-service-card.is-selected {
        min-height:auto;
        padding:18px !important;
    }

    .vsc-time-slot,
    .vsc-slot-button {
        flex-direction:column;
        align-items:flex-start;
    }
}


/* Vitruv Booking UX Final Polish v2.0.6 */

/* Trainer selector: keep radio on the right and prevent text collision */
.vsc-trainer-card,
.vsc-trainer-option {
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    min-height:72px;
    padding:16px 48px 16px 16px !important;
    box-sizing:border-box;
    overflow:hidden;
}

.vsc-trainer-card .vsc-radio,
.vsc-trainer-option .vsc-radio,
.vsc-trainer-card input[type="radio"],
.vsc-trainer-option input[type="radio"] {
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
}

.vsc-trainer-card *,
.vsc-trainer-option * {
    color:#18201b !important;
}

.vsc-trainer-card:hover,
.vsc-trainer-option:hover,
.vsc-trainer-card.is-selected,
.vsc-trainer-option.is-selected {
    background:#fff !important;
    border-color:#b5522a !important;
}

.vsc-trainer-card:hover *,
.vsc-trainer-option:hover *,
.vsc-trainer-card.is-selected *,
.vsc-trainer-option.is-selected * {
    color:#18201b !important;
}

/* Service card fixed layout */
.vsc-service-card,
.vsc-service-card.is-selected {
    padding:24px !important;
    box-sizing:border-box;
}

.vsc-service-card__top {
    position:relative;
    padding-right:38px;
}

.vsc-service-card__top .vsc-radio,
.vsc-service-card__top input[type="radio"] {
    position:absolute;
    right:0;
    top:0;
}

.vsc-service-card h3,
.vsc-service-card strong,
.vsc-service-card p {
    max-width:100%;
    overflow-wrap:anywhere;
    white-space:normal;
}

/* Transparent secondary buttons */
.vsc-btn--secondary,
.vsc-back-button,
.vsc-refresh-button {
    background:transparent !important;
    color:#b5522a !important;
    border:1px solid #b5522a !important;
}

.vsc-btn--secondary:hover,
.vsc-back-button:hover,
.vsc-refresh-button:hover {
    background:#b5522a !important;
    color:#fff !important;
}

/* Never use old olive states */
.vsc-booking-app *,
.vsc-admin-wrap * {
    --vsc-accent:#b5522a;
}

/* Mobile */
@media(max-width:700px){
    .vsc-trainer-card,
    .vsc-trainer-option {
        padding-right:42px !important;
    }
}


/* =============================================================
   Vitruv Booking — v2.0.6 Final Color & UI Consistency
   ============================================================= */

/* --- Staff card: keep text dark on hover/selected --- */
.vsc-staff-card,
.vsc-staff-card:hover,
.vsc-staff-card.is-selected {
    color: #18201b !important;
}

.vsc-staff-card strong,
.vsc-staff-card small,
.vsc-staff-card:hover strong,
.vsc-staff-card:hover small,
.vsc-staff-card.is-selected strong,
.vsc-staff-card.is-selected small {
    color: #18201b !important;
}

/* --- Text buttons: no pink, use brand brown --- */
.vsc-text-btn {
    color: #18201b;
    border-bottom-color: rgba(24, 32, 27, .35);
}

.vsc-text-btn:hover,
.vsc-customer-portal .vsc-text-btn:hover,
.vsc-booking-app .vsc-text-btn:hover {
    color: #923f20 !important;
    border-bottom-color: #923f20 !important;
}

.vsc-text-btn--danger {
    color: #9f3a37 !important;
    border-bottom-color: rgba(159, 58, 55, .45) !important;
}

.vsc-text-btn--danger:hover {
    color: #7a2b28 !important;
    border-bottom-color: #7a2b28 !important;
}

/* --- Refresh / "Available times" top-right button --- */
.vsc-slot-toolbar .vsc-btn--ghost,
.vsc-slot-toolbar .vsc-btn {
    background: #fff;
    border-color: #d9ddd4;
    color: #18201b;
}

.vsc-slot-toolbar .vsc-btn--ghost:hover,
.vsc-slot-toolbar .vsc-btn:hover {
    background: #fff9f7;
    border-color: #b5522a;
    color: #b5522a;
}

/* --- Portal action buttons --- */

/* "Reschedule" primary */
.vsc-portal-actions .vsc-btn--primary {
    background: #b5522a !important;
    border-color: #b5522a !important;
    color: #fff !important;
}

.vsc-portal-actions .vsc-btn--primary:hover {
    background: #923f20 !important;
    border-color: #923f20 !important;
    color: #fff !important;
}

/* "Add to calendar" and "Cancel" text links */
.vsc-portal-actions .vsc-text-btn {
    color: #18201b !important;
    border-bottom-color: rgba(24, 32, 27, .3) !important;
}

.vsc-portal-actions .vsc-text-btn:hover {
    color: #923f20 !important;
    border-bottom-color: #923f20 !important;
}

.vsc-portal-actions .vsc-text-btn--danger {
    color: #9f3a37 !important;
    border-bottom-color: rgba(159, 58, 55, .35) !important;
}

.vsc-portal-actions .vsc-text-btn--danger:hover {
    color: #7a2b28 !important;
    border-bottom-color: #7a2b28 !important;
}

/* --- Ghost buttons (Back / secondary) --- */
.vsc-btn--ghost,
.vsc-booking-app .vsc-btn--ghost,
.vsc-customer-portal .vsc-btn--ghost {
    background: #fff;
    border-color: #d9ddd4;
    color: #18201b;
}

.vsc-btn--ghost:hover {
    background: #fff9f7;
    border-color: #b5522a;
    color: #18201b;
}

/* --- Primary button: never pink/magenta --- */
.vsc-booking-app .vsc-btn--primary,
.vsc-live-schedule .vsc-btn--primary,
.vsc-customer-portal .vsc-btn--primary,
.vsc-packages .vsc-btn--primary {
    background: #b5522a !important;
    border-color: #b5522a !important;
    color: #fff !important;
}

.vsc-booking-app .vsc-btn--primary:hover,
.vsc-live-schedule .vsc-btn--primary:hover,
.vsc-customer-portal .vsc-btn--primary:hover,
.vsc-packages .vsc-btn--primary:hover {
    background: #923f20 !important;
    border-color: #923f20 !important;
    color: #fff !important;
}