/* HMS-331 — Add-hotel wizard (admin) */

.hotel-wizard {
  max-width: 72rem; margin: 0 auto; padding: 2rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
}

.hotel-wizard__title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; }

/* Stepper */
.hotel-wizard__stepper {
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 0.5rem;
  padding-bottom: 1rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.hotel-wizard__step { display: flex; align-items: center; gap: 0.5rem; }

.hotel-wizard__step-num {
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--wa-color-surface-lowered); color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
}

.hotel-wizard__step::after {
  content: ""; width: 2rem; height: 2px; margin: 0 0.5rem;
  background: var(--wa-color-surface-border);
}
.hotel-wizard__step:last-child::after { display: none; }
.hotel-wizard__step.is-done::after { background: var(--wa-color-green-60); }

.hotel-wizard__step.is-current .hotel-wizard__step-num {
  background: var(--wa-color-brand-fill-loud, var(--wa-color-brand-60));
  color: var(--wa-color-brand-on-loud);
}
.hotel-wizard__step.is-done .hotel-wizard__step-num { background: var(--wa-color-green-60); color: var(--wa-color-brand-on-loud); }
.hotel-wizard__step.is-done .hotel-wizard__step-label { color: var(--wa-color-green-60); }
.hotel-wizard__step-label { white-space: nowrap; }

/* Panel + rows */
.hotel-wizard__panel { padding-block: 1rem; }

.hotel-wizard__rows > * + * { margin-top: 1rem; }
/* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), so a control's
   min-content width made the wizard card ~907px inside the ~790px main column
   at 1024 and .admin-shell__main clipped it instead of shrinking. */
.hotel-wizard__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.hotel-wizard__triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hotel-wizard__address { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 1rem; }
.hotel-wizard__address-fields > * + * { margin-top: 1rem; }
.hotel-wizard__map {
  align-self: stretch; min-height: 12rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--wa-color-surface-lowered);
  border: 1px dashed var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-quiet);
}
@media (max-width: 900px) {
  .hotel-wizard__pair, .hotel-wizard__triple { grid-template-columns: 1fr; }
  .hotel-wizard__address { grid-template-columns: 1fr; }
}

/* Amenities */
.hotel-wizard__amenity-group h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.hotel-wizard__amenity-row { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
/* Radios are light-DOM children of wa-radio-group — the group's own shadow
   container has gap:0 ("radios handle their own spacing"), so space them here. */
.hotel-wizard__amenity-row wa-radio { margin-inline-end: 1.5rem; }
.hotel-wizard__amenity-row wa-radio:last-child { margin-inline-end: 0; }

/* Figma 600:19976: the soft-green "Add Custom Amenity" pill sits on its own
   line under each option row. The ::part(base) rule paints the wa-button's
   shadow button; the host rules cover plain <a>/<button> reuse (toast). */
.hotel-wizard__add-amenity {
  display: inline-flex; align-items: center; gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.375rem 0.75rem; font-size: 0.875rem; cursor: pointer;
  border: 1px solid var(--wa-color-green-70);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-green-95); color: var(--wa-color-green-20);
  text-decoration: none;
}
wa-button.hotel-wizard__add-amenity::part(base) {
  border-color: var(--wa-color-green-70);
  background: var(--wa-color-green-95); color: var(--wa-color-green-20);
}
wa-button.hotel-wizard__add-amenity::part(label) { color: var(--wa-color-green-20); }

/* Parking fee spans the full content width under the transport radios. */
.hotel-wizard__parking-fee { display: block; width: 100%; margin-top: 0.75rem; }

/* Media dropzone */
.hotel-wizard__dropzone {
  position: relative; min-height: 9rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  border: 2px dashed var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
}
.hotel-wizard__dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hotel-wizard__filename { font-size: 0.75rem; color: var(--wa-color-text-quiet); }

/* Contacts */
.hotel-wizard__contact {
  padding: 1rem; border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  margin-bottom: 1rem;
}
/* Role sits full-width-left as a lone third row under the First/Last and
   Email/Phone pairs (Figma 600:20070). */
.hotel-wizard__contact-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }

/* Channel chips */
.hotel-wizard__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.hotel-wizard__chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.75rem; font-size: 0.875rem;
  background: var(--wa-color-brand-fill-loud, var(--wa-color-brand-70));
  color: var(--wa-color-brand-on-loud);
  border-radius: 999px;
}
.hotel-wizard__chip-x {
  padding: 0; border: 0; background: transparent;
  color: var(--wa-color-brand-on-loud); cursor: pointer; line-height: 1;
}

/* Integration test result */
.hotel-wizard__test-result.is-ok { color: var(--wa-color-green-60); }
.hotel-wizard__test-result.is-bad { color: var(--wa-color-red-60); }

/* Footer actions */
.hotel-wizard__actions {
  display: flex; justify-content: flex-end; gap: 0.75rem;
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--wa-color-surface-border);
}

/* Modal error */
.hotel-wizard__modal-error { font-size: 0.875rem; color: var(--wa-color-red-60); }

/* Toast */
.hotel-wizard-toast {
  position: fixed; right: 2rem; bottom: 2rem; z-index: 60;
  min-width: 24rem; padding: 1.25rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--wa-shadow-m);
}
.hotel-wizard-toast__head { display: flex; align-items: center; gap: 0.5rem; }
.hotel-wizard-toast__head strong { flex: 1; }
.hotel-wizard-toast__head button {
  margin-left: auto; padding: 0; border: 0;
  background: transparent; color: var(--wa-color-text-quiet); cursor: pointer;
}
.hotel-wizard-toast__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
/* Toast colors per Figma 600:17370 */
.hotel-wizard-toast__check { color: var(--wa-color-green-60); }
.hotel-wizard-toast__ghost {
  background: transparent; border: 0;
  color: var(--wa-color-text-quiet); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: inherit; padding: 0.375rem 0.75rem;
}
/* WA buttons derive fill from these host custom props; if it still renders
   navy, this line stays — it is the correct override hook. */
.hotel-wizard-toast__yes { --wa-color-brand-fill-loud: var(--wa-color-green-95); --wa-color-brand-on-loud: var(--wa-color-green-20); }

/* Step 3 media layout: logo + hero side by side, gallery full width. */
.hotel-wizard__media-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.hotel-wizard__media-field--full { grid-column: 1 / -1; }
.hotel-wizard__media-label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.hotel-wizard__dropzone-body { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 1.5rem; text-align: center; }
.hotel-wizard__dropzone-text { font-weight: 600; }
.hotel-wizard__dropzone-hint { font-size: 0.8125rem; color: var(--wa-color-text-quiet); }

/* Step 4/5 shared */
.hotel-wizard__step-heading { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.hotel-wizard__field-label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.hotel-wizard__contact { margin-bottom: 1rem; }

/* Step 5 integration */
.hotel-wizard__tier-option { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin: 0.75rem 0; }
/* Figma 600:20117: four fields + the Test Connection button in one row. */
.hotel-wizard__tier-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 1rem; align-items: end; border: 0; padding: 0; margin: 0 0 1rem; }
.hotel-wizard__tier-fields .hotel-wizard__test-row { display: flex; flex-direction: column; gap: 0.375rem; }
/* Tier-2 (manual) fields stack full-width instead of the tier-1 grid (Figma 600:20157). */
.hotel-wizard__tier-fields--manual { display: block; }
.hotel-wizard__tier-fields--manual > * + * { margin-top: 0.75rem; }
/* [hidden] must stay LAST in this block: its specificity ties with the
   modifier rules above, so source order decides — the author display would
   otherwise beat the browser's hidden-attribute style and the inactive tier
   would stay visible. */
.hotel-wizard__tier-fields[hidden] { display: none; }
.hotel-wizard__freq { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.hotel-wizard__chip-row { display: flex; gap: 0.5rem; align-items: center; }
.hotel-wizard__chip-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); }
.hotel-wizard__frequencies { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.hotel-wizard__receiver-emails { margin-bottom: 1rem; }

@media (max-width: 1200px) {
  .hotel-wizard__tier-fields { grid-template-columns: 1fr 1fr; }
}

/* Modal footer */
.hotel-wizard__modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* Error callouts (classes copied from the global hotel form) */
.hotel-form__errors, .hotel-form__duplicates { margin-bottom: 1rem; }

@media (max-width: 900px) {
  .hotel-wizard__media-grid, .hotel-wizard__tier-fields, .hotel-wizard__contact-fields { grid-template-columns: 1fr; }
}