.provider-onboarding {
  --provider-onboarding-shell-max: 1600px;
  --provider-onboarding-gutter: clamp(16px, 3vw, 48px);
  --provider-onboarding-gap: clamp(1rem, 1.8vw, 1.4rem);
  --provider-onboarding-card-radius: clamp(24px, 2vw, 32px);
  --provider-onboarding-control-radius: 18px;
  --provider-onboarding-card-padding: clamp(1.25rem, 2.4vw, 2rem);
}

body.provider-onboarding {
  font-family: inherit;
}

body.provider-onboarding :is(
  .onboarding-stage,
  .provider-details-shell,
  .provider-service-shell,
  .provider-review-shell
) {
  width: min(100%, var(--provider-onboarding-shell-max));
  max-width: none;
  margin: clamp(1.5rem, 3vw, 2.75rem) auto clamp(2.5rem, 5vw, 4.5rem);
  padding-inline: var(--provider-onboarding-gutter);
  box-sizing: border-box;
  gap: var(--provider-onboarding-gap);
}

body.provider-onboarding .onboarding-stage {
  --provider-onboarding-shell-max: 1240px;
}

body.provider-onboarding :is(
  .onboarding-card,
  .provider-details-hero,
  .provider-details-panel,
  .provider-service-hero,
  .provider-service-selector,
  .provider-service-card,
  .provider-review-hero,
  .provider-review-card,
  .provider-hotel-room-card
) {
  position: relative;
  overflow: hidden;
  border-radius: var(--provider-onboarding-card-radius);
  padding: var(--provider-onboarding-card-padding);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--vt-border);
  box-shadow:
    0 22px 46px rgba(17, 24, 39, 0.08),
    0 6px 18px rgba(17, 24, 39, 0.04);
}

body.provider-onboarding :is(
  .onboarding-card,
  .provider-details-hero,
  .provider-details-panel,
  .provider-service-hero,
  .provider-service-selector,
  .provider-service-card,
  .provider-review-hero,
  .provider-review-card,
  .provider-hotel-room-card
)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--vt-accent), var(--vt-accent-strong));
  opacity: 0.9;
}

body.provider-onboarding :is(
  .onboarding-card,
  .provider-details-hero,
  .provider-details-panel,
  .provider-service-hero,
  .provider-service-selector,
  .provider-service-card,
  .provider-review-hero,
  .provider-review-card,
  .provider-hotel-room-card
) > * {
  position: relative;
  z-index: 1;
}

body.provider-onboarding :is(
  .provider-details-panel__head,
  .provider-service-selector__head,
  .provider-review-card__head
) {
  align-items: flex-start;
  gap: 0.85rem;
}

body.provider-onboarding :is(
  .provider-details-form,
  .provider-service-form,
  .provider-review-sections,
  .onboarding-form
) {
  gap: var(--provider-onboarding-gap);
}

body.provider-onboarding .provider-details-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--provider-onboarding-gap);
}

body.provider-onboarding .provider-details-grid > .provider-field {
  grid-column: span 6;
  min-width: 0;
}

body.provider-onboarding .provider-details-grid > .provider-field--full {
  grid-column: 1 / -1;
}

body.provider-onboarding .provider-phone-row {
  gap: 0.9rem;
  grid-template-columns: minmax(112px, 140px) minmax(0, 1fr);
}

body.provider-onboarding .provider-service-selector {
  display: grid;
  gap: 1.1rem;
}

body.provider-onboarding .provider-service-options {
  gap: 0.95rem;
}

body.provider-onboarding .provider-service-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 68px;
  padding: 1rem 1.2rem;
  text-align: left;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.provider-onboarding .provider-service-option.is-active {
  box-shadow:
    0 14px 28px rgba(0, 122, 83, 0.12),
    inset 0 0 0 1px rgba(0, 139, 94, 0.08);
}

body.provider-onboarding .provider-service-panel {
  gap: var(--provider-onboarding-gap);
}

body.provider-onboarding :is(
  .provider-grid--three,
  .provider-grid--four,
  .provider-grid--nested,
  .provider-ticket-row
) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--provider-onboarding-gap);
}

body.provider-onboarding .provider-grid--three > * {
  grid-column: span 4;
  min-width: 0;
}

body.provider-onboarding .provider-grid--four > * {
  grid-column: span 3;
  min-width: 0;
}

body.provider-onboarding .provider-grid--nested {
  grid-column: 1 / -1;
}

body.provider-onboarding .provider-grid--nested > * {
  grid-column: span 4;
  min-width: 0;
}

body.provider-onboarding :is(.provider-input--wide, .provider-field--full) {
  grid-column: 1 / -1 !important;
}

body.provider-onboarding .provider-ticket-row > * {
  grid-column: span 4;
  min-width: 0;
}

body.provider-onboarding .provider-hotel-rooms,
body.provider-onboarding .provider-hotel-rooms__list,
body.provider-onboarding .provider-chip-group,
body.provider-onboarding .provider-toggle-group {
  gap: var(--provider-onboarding-gap);
}

body.provider-onboarding .provider-chip-grid,
body.provider-onboarding .provider-radio-row,
body.provider-onboarding .provider-payment-actions,
body.provider-onboarding .provider-review-actions {
  gap: 0.9rem;
}

body.provider-onboarding :is(
  .onboarding-field input,
  .provider-field input,
  .provider-input input,
  .provider-input select,
  .provider-input textarea
) {
  width: 100%;
  min-height: 56px;
  padding: 0.95rem 1rem;
  border-radius: var(--provider-onboarding-control-radius);
  font-family: inherit;
  line-height: 1.45;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

body.provider-onboarding :is(
  .onboarding-field input:focus,
  .provider-field input:focus,
  .provider-input input:focus,
  .provider-input select:focus,
  .provider-input textarea:focus
) {
  outline: none;
  border-color: var(--vt-accent);
  box-shadow: 0 0 0 4px rgba(0, 139, 94, 0.14);
}

body.provider-onboarding .provider-input textarea {
  min-height: clamp(140px, 18vw, 190px);
}

body.provider-onboarding :is(.provider-input input, .provider-input textarea)::placeholder,
body.provider-onboarding :is(.provider-field input, .onboarding-field input)::placeholder {
  opacity: 0.9;
}

body.provider-onboarding :is(
  .provider-service-option,
  .provider-chip,
  .provider-radio,
  .provider-payment-button,
  .provider-review-button,
  .provider-details-btn,
  .provider-service-submit,
  .onboarding-btn,
  .onboarding-mode-switch
) {
  font-family: inherit;
}

body.provider-onboarding :is(
  .provider-chip,
  .provider-radio,
  .provider-payment-button--ghost,
  .provider-review-button--ghost
) {
  border-radius: 18px;
}

body.provider-onboarding :is(
  .provider-details-btn,
  .provider-service-submit,
  .provider-payment-button,
  .provider-review-button,
  .onboarding-btn
) {
  min-height: 56px;
  padding: 0.95rem 1.55rem;
  border-radius: 999px;
}

body.provider-onboarding :is(
  .provider-details-btn,
  .provider-service-submit,
  .provider-review-button--solid,
  .onboarding-btn--solid
) {
  box-shadow: 0 14px 26px rgba(0, 122, 83, 0.22);
}

body.provider-onboarding :is(
  .provider-details-btn:hover,
  .provider-service-submit:hover,
  .provider-payment-button:hover,
  .provider-review-button:hover,
  .onboarding-btn:hover
) {
  transform: translateY(-1px);
}

body.provider-onboarding .provider-payment-button--primary {
  min-width: min(100%, 230px);
}

body.provider-onboarding .provider-payment-button--ghost,
body.provider-onboarding .provider-review-button--ghost {
  background: rgba(255, 255, 255, 0.88);
}

body.provider-onboarding .provider-input input[type='file'] {
  padding: 0.45rem;
}

body.provider-onboarding .provider-input input[type='file']::file-selector-button {
  margin-right: 0.85rem;
  border: 0;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  background: var(--vt-accent-strong);
  color: #ffffff;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

body.provider-onboarding .provider-input input[type='file']::file-selector-button:hover {
  background: var(--vt-accent-strong-hover);
}

body.provider-onboarding .provider-input select {
  color: inherit;
}

body.provider-onboarding .provider-service-actions,
body.provider-onboarding .provider-details-actions {
  padding-top: 0.35rem;
}

body.provider-onboarding .provider-review-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

body.provider-onboarding .provider-review-sections > :first-child {
  grid-column: 1 / -1;
}

body.provider-onboarding .provider-review-item {
  border-radius: 20px;
  padding: 1rem 1.1rem;
}

body.provider-onboarding .onboarding-card {
  display: grid;
  gap: var(--provider-onboarding-gap);
}

body.provider-onboarding .onboarding-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

body.provider-onboarding .onboarding-form > :is(.onboarding-checkbox-field, .onboarding-btn) {
  grid-column: 1 / -1;
}

body.provider-onboarding .onboarding-checkbox-field {
  padding: 0.9rem 1rem;
  border: 1px solid var(--vt-border);
  border-radius: var(--provider-onboarding-control-radius);
  background: rgba(255, 255, 255, 0.72);
}

body.provider-onboarding .onboarding-checkbox-field input[type='checkbox'] {
  flex: 0 0 auto;
}

body.provider-onboarding[data-theme='dark'] :is(
  .onboarding-card,
  .provider-details-hero,
  .provider-details-panel,
  .provider-service-hero,
  .provider-service-selector,
  .provider-service-card,
  .provider-review-hero,
  .provider-review-card,
  .provider-hotel-room-card
) {
  background: var(--vt-surface) !important;
  border-color: var(--vt-border) !important;
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.34),
    0 8px 20px rgba(0, 0, 0, 0.18);
}

body.provider-onboarding[data-theme='dark'] :is(
  .onboarding-field input,
  .provider-field input,
  .provider-input input,
  .provider-input select,
  .provider-input textarea,
  .provider-service-option:not(.is-active),
  .provider-chip,
  .provider-radio,
  .provider-payment-button--ghost,
  .provider-review-button--ghost,
  .provider-review-item,
  .onboarding-checkbox-field,
  .onboarding-mode-switch
) {
  background: var(--vt-surface-muted) !important;
  border-color: var(--vt-border-strong) !important;
  color: var(--vt-text) !important;
}

body.provider-onboarding[data-theme='dark'] :is(
  .onboarding-field span,
  .provider-field span,
  .provider-input span,
  .provider-chip-group__label,
  .provider-toggle-group > span,
  .provider-service-option,
  .provider-chip,
  .provider-radio,
  .provider-payment-button--ghost,
  .provider-review-button--ghost,
  .provider-review-item,
  .onboarding-checkbox-field,
  .onboarding-card h1,
  .provider-details-hero h1,
  .provider-details-panel h2,
  .provider-service-hero h1,
  .provider-service-selector h2,
  .provider-service-card h3,
  .provider-service-card h4,
  .provider-hotel-room-card h5,
  .provider-review-hero h1,
  .provider-review-card h2
) {
  color: var(--vt-text) !important;
}

body.provider-onboarding[data-theme='dark'] :is(
  .onboarding-mode-copy,
  .onboarding-feedback:not([data-state='error']):not([data-state='success']),
  .provider-details-status:not([data-state='error']):not([data-state='success']),
  .provider-service-status:not([data-state='error']):not([data-state='warn']):not([data-state='success']):not([data-state='info']),
  .provider-service-card p,
  .provider-hotel-rooms__head p,
  .provider-input small,
  .provider-payment-copy,
  .provider-payment-status:not([data-state='error']):not([data-state='warn']):not([data-state='success']):not([data-state='info']),
  .provider-review-copy,
  .provider-review-empty,
  .provider-review-status:not([data-state='error']):not([data-state='success'])
) {
  color: var(--vt-text-muted) !important;
}

body.provider-onboarding[data-theme='dark'] :is(
  .onboarding-field input::placeholder,
  .provider-field input::placeholder,
  .provider-input input::placeholder,
  .provider-input textarea::placeholder
) {
  color: var(--vt-text-muted) !important;
  opacity: 1;
}

body.provider-onboarding[data-theme='dark'] :is(
  .provider-input select,
  .provider-input select option
) {
  background: var(--vt-surface-muted) !important;
  color: var(--vt-text) !important;
}

body.provider-onboarding[data-theme='dark'] .provider-service-option.is-active {
  background: rgba(36, 183, 135, 0.14) !important;
  border-color: var(--vt-accent) !important;
}

body.provider-onboarding[data-theme='dark'] .provider-input input[type='file']::file-selector-button {
  box-shadow: none;
}

@media (max-width: 1200px) {
  body.provider-onboarding .provider-service-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.provider-onboarding .provider-grid--three > *,
  body.provider-onboarding .provider-grid--four > *,
  body.provider-onboarding .provider-grid--nested > *,
  body.provider-onboarding .provider-ticket-row > * {
    grid-column: span 6;
  }
}

@media (max-width: 900px) {
  body.provider-onboarding :is(.onboarding-stage, .provider-details-shell, .provider-service-shell, .provider-review-shell) {
    padding-inline: clamp(14px, 4vw, 24px);
  }

  body.provider-onboarding .provider-details-grid > .provider-field,
  body.provider-onboarding .onboarding-form > .onboarding-field {
    grid-column: 1 / -1;
  }

  body.provider-onboarding .provider-phone-row {
    grid-template-columns: 1fr;
  }

  body.provider-onboarding .provider-review-sections {
    grid-template-columns: 1fr;
  }

  body.provider-onboarding .provider-review-sections > :first-child {
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  body.provider-onboarding .provider-service-options,
  body.provider-onboarding .provider-grid--three > *,
  body.provider-onboarding .provider-grid--four > *,
  body.provider-onboarding .provider-grid--nested > *,
  body.provider-onboarding .provider-ticket-row > * {
    grid-column: 1 / -1;
  }

  body.provider-onboarding .provider-service-options {
    grid-template-columns: 1fr;
  }

  body.provider-onboarding .provider-payment-actions,
  body.provider-onboarding .provider-review-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.provider-onboarding :is(
    .provider-payment-button,
    .provider-review-button,
    .provider-details-btn,
    .provider-service-submit,
    .onboarding-btn
  ) {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  body.provider-onboarding .onboarding-form {
    grid-template-columns: 1fr;
  }

  body.provider-onboarding .onboarding-form > :is(.onboarding-checkbox-field, .onboarding-btn) {
    grid-column: auto;
  }
}