/* HMS-60 — hotel partner portal. Own layout, quiet palette, the same token
   conventions as every other screen. */

/* HMS-354 — hotel partner sign-in (Figma 442:5914): split-screen, form panel
   left, photograph right. The hero layers the photo in `overlay` blend over a
   brand gradient then tints it, matching the staff sign-in adaptation. */

.hotel-sign-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: 100dvh;
}

.hotel-sign-in__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding: 4rem;
  background: var(--wa-color-surface-lowered);
}

.hotel-sign-in__logo {
  width: 220px;
  height: 55px;
  object-fit: contain;
}

/* HMS-424 — the gate carries the event's own logo + name when a link spells
   out the context; the event name also shows on its own when the event has
   no logo to render. */
.hotel-sign-in__event-brand {
  display: flex;
  align-items: center;
  /* The logo keeps its intrinsic width, so a long event name beside it would
     be squeezed into a word-per-line column. Let the row wrap: the name drops
     to a full-width line under the logo instead. */
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
}

.hotel-sign-in__event-logo {
  max-height: 48px;
  max-width: 100%;
  width: auto;
}

.hotel-sign-in__event-name {
  font-weight: 600;
  font-size: 1.1rem;
}

.hotel-sign-in__for-event {
  margin: 0;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__intro {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.hotel-sign-in__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wa-color-text-normal);
}

.hotel-sign-in__subtitle {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__sso-block {
  max-width: 26rem;
}

.hotel-sign-in__sso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-weight: 600;
}

.hotel-sign-in__sso:hover {
  background: var(--wa-color-surface-lowered);
}

.hotel-sign-in__sso-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  max-width: 26rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__divider::before,
.hotel-sign-in__divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-sign-in__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 26rem;
}

.hotel-sign-in__submit {
  width: 100%;
}

.hotel-sign-in__forgot {
  align-self: flex-start;
  font-size: 0.8125rem;
  color: var(--wa-color-text-link);
}

.hotel-sign-in__muted {
  margin: 0;
  max-width: 26rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__legal {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__legal-brand {
  color: var(--wa-color-text-link);
}

.hotel-sign-in__hero {
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(
    circle at 50% 120%,
    var(--wa-color-brand-60),
    var(--wa-color-brand-40)
  );
}

.hotel-sign-in__hero::before,
.hotel-sign-in__hero::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hotel-sign-in__hero::before {
  /* ../ is load-bearing: Propshaft resolves url() relative to THIS file's
     directory, so a bare "sign-in-hero.png" is looked up as
     layouts/sign-in-hero.png, unrewritten, and 404s. */
  background-image: url("/assets/sign-in-hero-301c04e0.png");
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
}

.hotel-sign-in__hero::after {
  background: var(--ek-color-sign-in-tint);
}

/* The photograph is decoration: below the fold it costs bandwidth, so the
   panel takes the whole screen. */
@media (max-width: 40rem) {
  .hotel-sign-in {
    grid-template-columns: 1fr;
  }

  .hotel-sign-in__hero {
    display: none;
  }

  .hotel-sign-in__panel {
    padding: 2rem 1.5rem;
  }
}

/* Dashboard */

.hotel-dashboard__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hotel-dashboard__title {
  margin: 0;
  font-size: 1.375rem;
  color: var(--wa-color-text-normal);
}

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

.hotel-dashboard__section {
  margin-bottom: 2rem;
}

.hotel-dashboard__section-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

.hotel-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.hotel-dashboard__kpi {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
}

.hotel-dashboard__kpi-label {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  margin: 0;
}

.hotel-dashboard__kpi-value {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.25rem 0 0;
}

.hotel-dashboard__kpi-sub {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  margin: 0.25rem 0 0;
}

/* The icon is the card's soft accent, pushed right by the card's
   justify-content: space-between. */
.hotel-dashboard__kpi-icon {
  font-size: 1.5rem;
  color: var(--wa-color-brand-on-quiet);
}

/* Quick-action buttons sit in a full-width row directly under the KPIs.
   Both <a> and <button> share the look; the Confirm Receipt control is a
   real submit button wrapped in a small form, so the form stays inline. */
.hotel-dashboard__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.hotel-dashboard__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.hotel-dashboard__action:hover {
  background: var(--wa-color-surface-lowered);
}

/* display:contents makes the wrapped submit button itself a flex item of
   .hotel-dashboard__quick-actions, so it stretches and wraps identically to
   the sibling <a> controls. */
.hotel-dashboard__action-form {
  display: contents;
}

/* Web Awesome's native-button layer (public/webawesome/styles/native.css)
   pins every <button> to height: var(--wa-form-control-height); an explicit
   height beats flex stretch, which left this submit shorter than the
   sibling anchors. height:auto restores the stretch. */
form.hotel-dashboard__action-form > button.hotel-dashboard__action {
  height: auto;
}

/* Footer under the recent-activity table: per-page caption on the left,
   pagination on the right. */
.hotel-dashboard__recent-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

.hotel-dashboard__per-page {
  color: var(--wa-color-text-quiet);
  font-size: 0.75rem;
  margin: 0;
}

/* Sort links in the recent-activity header: inline next to the column label;
   the icon carries the state — muted when neutral (fa-sort), louder for the
   active direction (fa-sort-up / fa-sort-down). */
.hotel-dashboard__recent th .hotel-dashboard__sort {
  display: inline;
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

.hotel-dashboard__recent th .hotel-dashboard__sort .fa-sort {
  color: var(--wa-color-text-quiet);
}

.hotel-dashboard__recent th .hotel-dashboard__sort .fa-sort-up,
.hotel-dashboard__recent th .hotel-dashboard__sort .fa-sort-down {
  color: var(--wa-color-brand-fill-loud);
}

/* Small text link in a recent row, styled like a table action. */
.hotel-dashboard__dispute-link {
  color: var(--wa-color-text-link);
  font-size: 0.8125rem;
}

.hotel-dashboard__table,
.hotel-rooming__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* The dashboard tables carry 5+ columns plus an inline dispute form; on a
   phone they outgrow the section and the overflow renders under the next
   section, where it cannot be tapped. Scroll inside the wrap instead —
   same contract as .admin-table-wrap. */
.hotel-table-wrap {
  overflow-x: auto;
  width: 100%;
  /* Same right-edge scroll hint as .admin-table-wrap: painted beneath the
     table, so it never covers or blocks tappable content. */
  box-shadow: inset -10px 0 10px -10px var(--wa-color-neutral-border-quiet);
}

.hotel-table-wrap table {
  min-width: max-content;
}

.hotel-dashboard__table th,
.hotel-dashboard__table td,
.hotel-rooming__table th,
.hotel-rooming__table td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-rooming__event {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  color: var(--wa-color-text-normal);
}

.hotel-rooming__empty {
  color: var(--wa-color-text-quiet);
}

.hotel-rooming__confirm {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Rooming filter — a compact inline field row instead of stacked full-width
   inputs. */
.hotel-rooming__filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

/* native.css gives labels wrapping inputs width:100% and inputs a 0.5em
   top margin — two-class specificity is required to beat it. */
.hotel-rooming__filter .hotel-rooming__filter-field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  width: auto;
}

.hotel-rooming__filter .hotel-rooming__filter-field input {
  margin-block-start: 0;
}

.hotel-rooming__filter-field input,
.hotel-rooming__filter-field select {
  min-width: 9rem;
}

.hotel-rooming__filter-submit {
  margin-top: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* VIP verifications (HMS-253) — same table/quiet conventions as the dashboard
   and rooming list above. */

.hotel-vip-verifications__title {
  margin: 0 0 1rem;
  font-size: 1.375rem;
  color: var(--wa-color-text-normal);
}

.hotel-vip-verifications__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.hotel-vip-verifications__table th,
.hotel-vip-verifications__table td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-vip-verifications__table input[type="submit"],
.hotel-vip-verifications__table button {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.hotel-vip-verifications__empty {
  color: var(--wa-color-text-quiet);
}

/* HMS-353 — portal chrome (Figma 435:221): navy topbar, left sidebar, footer,
   breadcrumb. Rendered only for a signed-in contact; sign-in and token pages
   keep the bare <main>. */

.hotel-portal-body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hotel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  min-height: 3.25rem;
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.hotel-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  font-size: 1.125rem;
}

.hotel-topbar__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hotel-topbar__bell {
  font-size: 1.125rem;
  color: inherit;
  opacity: 0.9;
}

.hotel-topbar__avatar-button {
  display: inline-flex;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.hotel-topbar__profile-menu {
  min-width: 14rem;
  padding: 0.75rem 1rem;
}

.hotel-topbar__profile-name {
  margin: 0;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.hotel-topbar__profile-email,
.hotel-topbar__profile-hotel {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-topbar__signout {
  margin-top: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: transparent;
  color: var(--wa-color-text-normal);
  font: inherit;
  cursor: pointer;
}

.hotel-shell {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.hotel-sidebar {
  width: 15rem;
  flex-shrink: 0;
  background: var(--wa-color-surface-default);
  border-right: 1px solid var(--wa-color-neutral-border-quiet);
  padding: 0.75rem 0;
}

.hotel-sidebar__list,
.hotel-sidebar__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Web Awesome's native stylesheet styles EVERY <details> as a bordered card
   and injects its own chevron via summary::after. Sidebar sections are flat
   nav rows, not disclosure cards — strip the card chrome and the extra
   chevron so only our fa-chevron-right rotates. */
.hotel-sidebar .hotel-sidebar__section {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hotel-sidebar .hotel-sidebar__section[open] > .hotel-sidebar__head {
  margin-inline: 0;
}

.hotel-sidebar .hotel-sidebar__head::after {
  content: none;
}

.hotel-sidebar__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wa-color-text-normal);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.hotel-sidebar__head::-webkit-details-marker {
  display: none;
}

.hotel-sidebar__head:hover {
  background: var(--wa-color-surface-lowered);
}

.hotel-sidebar__label {
  flex: 1;
}

.hotel-sidebar__chevron {
  font-size: 0.625rem;
  color: var(--wa-color-text-quiet);
  transition: transform 120ms ease;
}

.hotel-sidebar__section[open] > .hotel-sidebar__head .hotel-sidebar__chevron {
  transform: rotate(90deg);
}

.hotel-sidebar__sublist .hotel-sidebar__link {
  display: block;
  padding: 0.5rem 1rem 0.5rem 2.375rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

.hotel-sidebar__sublist .hotel-sidebar__link:hover {
  background: var(--wa-color-surface-lowered);
}

.hotel-sidebar__link--current {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-weight: 600;
}

.hotel-content {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 2rem;
  background: var(--wa-color-surface-lowered);
}

.hotel-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
}

.hotel-breadcrumbs__section {
  color: var(--wa-color-text-quiet);
}

.hotel-breadcrumbs__page {
  color: var(--wa-color-brand-fill-loud);
  font-weight: 600;
}

.hotel-breadcrumbs .fa-angle-right {
  font-size: 0.625rem;
  color: var(--wa-color-text-quiet);
}

.hotel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--wa-color-surface-default);
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.hotel-footer__center {
  margin: 0;
}

.hotel-footer__legal {
  display: flex;
  gap: 1.25rem;
  color: var(--wa-color-text-link);
  font-weight: 600;
}

/* The sidebar does not fit beside content on a phone — it becomes a
   horizontal strip across the top instead. */
@media (max-width: 48rem) {
  .hotel-shell {
    flex-direction: column;
  }

  .hotel-sidebar {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
    padding: 0.25rem 0;
    /* The dropdown's containing block: position:relative HERE, not on the
       section — the section lives inside the horizontally scrolling list,
       whose overflow would clip (hide) an absolutely-positioned submenu.
       Anchored to the nav instead, the submenu escapes the clip. */
    position: relative;
  }

  .hotel-sidebar__list {
    display: flex;
    overflow-x: auto;
  }

  .hotel-sidebar__list > li {
    flex-shrink: 0;
  }

  .hotel-sidebar__sublist {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--wa-color-surface-default);
    border: 1px solid var(--wa-color-neutral-border-quiet);
    border-radius: var(--wa-border-radius-m);
    box-shadow: var(--wa-shadow-m);
  }

  .hotel-sidebar__sublist .hotel-sidebar__link {
    padding-left: 1rem;
  }

  .hotel-content {
    padding: 1rem;
  }

  .hotel-footer {
    flex-direction: column;
    gap: 0.375rem;
    text-align: center;
  }

  /* The KPI grid collapses to a single column and the quick-action buttons
     grow to full width so they stay tappable. */
  .hotel-dashboard__kpis {
    grid-template-columns: 1fr;
  }

  .hotel-dashboard__action {
    flex: 1 1 100%;
    justify-content: center;
  }

  .hotel-dashboard__recent-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Flash banners — the chrome layout emits .hotel-flash for signed-in pages
   and the bare layout for sign-in/token pages. */
.hotel-flash {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--wa-border-radius-m);
  font-size: 0.875rem;
}

.hotel-flash--notice {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
  border: 1px solid var(--wa-color-success-border-quiet);
}

.hotel-flash--alert {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
  border: 1px solid var(--wa-color-danger-border-quiet);
}

/* Signed-out pages render flashes directly under <body> (the chrome branch
   nests them inside .hotel-content) — center them like the sign-in card. */
.hotel-portal-body > main > .hotel-flash {
  margin: 1rem auto;
  max-width: 24rem;
}

/* HMS-355 — dispute form page: a narrow, left-aligned block. */
.hotel-dispute {
  max-width: 36rem;
}

.hotel-dispute__title {
  margin: 0;
  font-size: 1.375rem;
  color: var(--wa-color-text-normal);
}

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

.hotel-dispute__form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.hotel-dispute__actions {
  display: flex;
  gap: 0.75rem;
}

/* Muted one-liner under the block-request form. */
.hotel-block-request__alt {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  margin-top: 1rem;
}

/* VIP verifications has four narrow columns — at phone widths let cells wrap
   so the Status chip stays inside the viewport instead of scrolling off. */
@media (max-width: 40rem) {
  .hotel-table-wrap .hotel-vip-verifications__table {
    min-width: 0;
  }
  .hotel-vip-verifications__table th,
  .hotel-vip-verifications__table td {
    white-space: normal;
  }
}

/* Phone-width tables scroll inside the wrap; a soft right-edge fade is the
   cue. Masked to 55% opacity (not transparent) so the faded cells stay
   readable. Scoped to narrow widths where overflow is expected. */
@media (max-width: 48rem) {
  /* NOT .hotel-sidebar__list: the mask creates a stacking context that traps
     the section dropdown (z-index:200) inside the list's context, so in-flow
     page content paints over it and eats every click. */
  .hotel-table-wrap {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0, 0, 0, 0.55));
    mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0, 0, 0, 0.55));
  }
}

/* HMS-430 — the topbar lockup carries the event brand when one resolves:
   the white event wordmark reads straight on the dark bar; the product
   label stays as the muted suffix. */
.hotel-topbar__event-logo {
  display: block;
  height: 1.75rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
  flex-shrink: 0;
}

.hotel-topbar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}

.hotel-topbar__product {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}

.hotel-topbar__product::before {
  content: "\00b7\00a0";
}

/* The seeded event logos are white wordmarks on transparent — on the light
   sign-in panel they need a brand-colored chip to stay readable (WCAG). */
.hotel-sign-in__event-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.625rem;
  border-radius: var(--wa-border-radius-m, 0.5rem);
  background-color: var(--ek-brand-primary);
  flex-shrink: 0;
  max-width: 100%;
}

.hotel-sign-in__event-logo-chip .hotel-sign-in__event-logo {
  max-height: 2rem;
}

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

  .hotel-topbar__event-logo {
    max-width: 6rem;
  }

  .hotel-topbar__label {
    max-width: 8rem;
  }

  /* The muted product suffix is the first thing to give way on a narrow bar:
     the event lockup carries the brand on its own, and bell + avatar must
     stay on screen. */
  .hotel-topbar__product {
    display: none;
  }
}