.hotel-registration {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem;
}

.hotel-registration__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
  margin: 0 0 0.5rem;
}

.hotel-registration__intro {
  color: var(--wa-color-text-quiet);
  margin: 0 0 1.5rem;
}

.hotel-registration__step-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
  margin: 0 0 1rem;
}

.hotel-registration__errors {
  background: var(--wa-color-danger-fill-quiet);
  border: 1px solid var(--wa-color-danger-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: 1rem;
  margin-bottom: 1rem;
}

.hotel-registration__error-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--wa-color-danger-on-quiet);
}

.hotel-registration__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hotel-registration__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hotel-registration__field label {
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
}

/* Text-like fields anywhere in the wizard: full width on the design's light
   field fill. Non-text types keep WA's native.css styling. Padding is
   inline-only: native.css fixes input/select height at
   --wa-form-control-height, so block padding would clip the value text (the
   same fix hotel_requests.css carries). */
.hotel-registration input:not(
  [type="checkbox"], [type="radio"], [type="file"], [type="hidden"],
  [type="submit"], [type="button"], [type="image"], [type="range"],
  [type="reset"], [type="color"]),
.hotel-registration select,
.hotel-registration textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--wa-form-control-padding-inline, 0.625rem);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-normal);
}

/* Textareas size to content, not the fixed control height. */
.hotel-registration textarea {
  padding-block: 0.625rem;
  height: auto;
}

/* Back link/button sits left, submit(s) right. */
.hotel-registration__actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}

/* Primary submit — brand-fill-loud is the dark teal (Nautical East);
   brand-fill-normal resolves to brand-90 (var(--wa-color-brand-90)), a near-white tint. */
.hotel-registration__submit,
.hotel-registration__actions button[type="submit"]:not(.hotel-registration__back),
.hotel-registration__actions input[type="submit"] {
  padding: 0.625rem 1.25rem;
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  border: none;
  border-radius: var(--wa-border-radius-m);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Ghost button — the views emit both <a> and <button> under this class. */
.hotel-registration__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: transparent;
  color: var(--wa-color-text-quiet);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.hotel-registration__review {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.hotel-registration__review dt {
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
}

.hotel-registration__review dd {
  margin: 0;
  color: var(--wa-color-text-normal);
}

/* ── HMS-363: five-step registration wizard (Figma 435:3417…) ───────── */

/* Dark teal shell bar — brand-fill-loud is Nautical East + white, same
   pairing as .portal-header. */
.registration-shell__header {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--wa-space-xl, 1.5rem);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.registration-shell__wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: inherit;
}

/* Light footer bar: grey copyright left, teal link row right. */
.registration-shell__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem var(--wa-space-xl, 1.5rem);
  background: var(--wa-color-surface-default);
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.8125rem;
}

.registration-shell__copyright {
  color: var(--wa-color-text-quiet);
}

.registration-shell__footer-links {
  display: flex;
  gap: 1.5rem;
}

.registration-shell__footer-links a {
  color: var(--wa-color-text-link);
  text-decoration: none;
}

/* Stepper — circle above label, thin connector to the next step. */
.registration-stepper {
  display: flex;
  align-items: flex-start;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.registration-stepper__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}

/* The connector runs from this circle's right edge to the next circle's
   left edge — every li is equal width, so ±50% lands on the neighbours'
   centres. */
.registration-stepper__step::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  border-top: 2px solid var(--wa-color-neutral-border-quiet);
}

.registration-stepper__step:last-child::after { content: none; }

.registration-stepper__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--wa-color-neutral-border-quiet);
  border-radius: 50%;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
  font-weight: 600;
}

.registration-stepper__label {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.registration-stepper__step.is-current .registration-stepper__number {
  background: var(--wa-color-brand-fill-loud);
  border-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.registration-stepper__step.is-done .registration-stepper__number {
  background: var(--wa-color-success-fill-loud, var(--wa-color-green-60));
  border-color: var(--wa-color-success-fill-loud, var(--wa-color-green-60));
  color: var(--wa-color-surface-default);
}

.registration-stepper__step.is-current .registration-stepper__label,
.registration-stepper__step.is-done .registration-stepper__label {
  color: var(--wa-color-text-link);
  font-weight: 600;
}

/* White card the step form lives in. */
.hotel-registration__card {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-xl, 2rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Two-column field rows (Name+Title, Email+Phone, credential pairs). */
.hotel-registration__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Radio rows (PMS vendor, protocol). */
.hotel-registration__radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
}

/* Photo dropzone — dashed, centered icon + text stack. The file input is a
   plain block under the text: NOT visually hidden, so a no-JS form still
   posts the files. */
.registration-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 110px;
  padding: 1rem;
  border: 2px dashed var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-quiet);
  text-align: center;
}

.registration-dropzone > i { font-size: 1.5rem; }
.registration-dropzone strong { color: var(--wa-color-text-normal); }

.registration-dropzone__input {
  display: block;
  margin-top: 0.5rem;
}

/* Five preview slots — Stimulus fills them via inline background-image. */
.registration-photos__slots {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.registration-photos__slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  background-size: cover;
  background-position: center;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

/* Keep the Hero/Photo label readable over the preview image. */
.registration-photos__slot.has-image span {
  padding: 0.125rem 0.375rem;
  border-radius: var(--wa-border-radius-s);
  background: rgba(0, 0, 0, 0.55);
  color: var(--wa-color-surface-default);
}

.registration-photos__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--wa-color-surface-default);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

/* An explicit display rule beats the UA [hidden] rule — the same bug class
   hotel_requests.css guards against. */
[data-controller="registration-photos"] [hidden] {
  display: none !important;
}

/* Amenity groups — 4 columns of small-caps legends + checkbox rows. */
.registration-amenities__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 1.5rem;
}

.registration-amenities__group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  border: none;
}

.registration-amenities__group legend {
  padding: 0;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wa-color-text-quiet);
}

.registration-amenities__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
}

/* Integration tier radio cards — .is-selected is toggled by
   registration_integration_controller.js on change. */
.registration-tier-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  cursor: pointer;
}

.registration-tier-card > span {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.registration-tier-card strong { color: var(--wa-color-text-normal); }

.registration-tier-card small {
  font-weight: 400;
  color: var(--wa-color-text-quiet);
}

.registration-tier-card.is-selected {
  border-color: var(--wa-color-brand);
  background: var(--wa-color-brand-fill-quiet);
}

/* The grid inside directFields would beat the UA [hidden] rule — guard it. */
[data-controller="registration-integration"] [hidden] {
  display: none !important;
}

/* The integration block is a real <fieldset> so its `disabled` property can
   gate every input at once — strip the UA border/min-inline-size. The grid
   and top margin space these fields off the tier cards above them. */
.registration-direct-fields {
  border: 0;
  padding: 0;
  margin: 0;
  margin-top: 1.5rem;
  min-inline-size: 0;
  display: grid;
  gap: 1rem;
}

/* Room/rate code mapping tables. */
.registration-mapping__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.registration-mapping__grid table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.registration-mapping__grid th {
  padding: 0.5rem 0.75rem;
  background: var(--wa-color-neutral-fill-quiet);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  text-align: left;
  font-weight: 600;
}

.registration-mapping__grid td {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
}

/* Test-connection chip. */
.registration-test-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.registration-test-status.is-passed {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.registration-test-status.is-failed {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

/* 2×2 contact cards on a light fill. */
.registration-contacts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.registration-contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--wa-color-neutral-fill-quiet);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
}

.registration-contact-card strong { font-size: 1rem; }

.registration-contact-card__role {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* Info banner under the contact grid. */
.registration-contacts__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--wa-color-brand);
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-brand-fill-quiet);
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* Review step — two-column summary cards. */
.registration-review__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.registration-review__card {
  padding: 1rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
}

.registration-review__card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.registration-review__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.875rem;
}

.registration-review__row:last-child { border-bottom: none; }

.registration-review__row > span:first-child {
  color: var(--wa-color-text-quiet);
}

.registration-review__row > span:last-child {
  text-align: right;
}

.registration-status-chip {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--wa-color-neutral-fill-normal);
  color: var(--wa-color-text-quiet);
}

.registration-status-chip.is-complete {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.registration-review__terms {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
}

@media (max-width: 900px) {
  .registration-amenities__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hotel-registration { padding: 1rem; }

  .hotel-registration__row,
  .registration-amenities__grid,
  .registration-mapping__grid,
  .registration-contacts__grid,
  .registration-review__grid {
    grid-template-columns: 1fr;
  }

  .hotel-registration__card { padding: 1rem; }

  .registration-stepper__number {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  .registration-stepper__step::after {
    top: 13px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
  }

  .registration-stepper__label { font-size: 0.6875rem; }

  .hotel-registration__actions { flex-wrap: wrap; }
}

/* Test Connection needs air under the credential inputs. */
.registration-direct-fields .hotel-registration__field:last-child {
  margin-top: 0.5rem;
}

/* Required marker + failed-field highlight on the wizard steps. */
.hotel-registration__required {
  color: var(--wa-color-danger);
}

.hotel-registration .hotel-registration__field--error input,
.hotel-registration .hotel-registration__field--error select {
  border-color: var(--wa-color-danger);
}