@import url('apsara-theme.css');

:root {
  /* Match parent .booking-app-shell — one solid chrome color (no header/body seam) */
  --apsara-bg: #000;
  --apsara-font-heading: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --apsara-font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --apsara-font-card-title: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--apsara-font-body);
  background: var(--apsara-bg);
  color: var(--apsara-text);
  min-height: 0;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.008em;
}

body.platform-web.in-iframe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.shell-screen {
  display: none;
  min-height: 0;
  padding-bottom: 0;
  animation: fadeIn 0.3s ease;
}

.shell-screen.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-screen-header--hero .screen-title,
.tab-screen-header--hero .messages-title {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

#screen-book .tab-screen-header--hero {
  background-image: linear-gradient(rgba(13, 13, 13, 0.65), rgba(13, 13, 13, 0.85)), url('../assets/hotel_room_lotus.jpg') !important;
}

#screen-pickup .tab-screen-header--hero {
  background-image: linear-gradient(rgba(13, 13, 13, 0.65), rgba(13, 13, 13, 0.85)), url('../assets/card_airport.png') !important;
}

#screen-chat .tab-screen-header--hero {
  background-image: linear-gradient(rgba(13, 13, 13, 0.65), rgba(13, 13, 13, 0.85)), url('../assets/card_concierge.png') !important;
}

#screen-offers .tab-screen-header--hero {
  background-image: linear-gradient(rgba(13, 13, 13, 0.65), rgba(13, 13, 13, 0.85)), url('../assets/card_offers.png') !important;
}

.tab-screen-header--solo {
  grid-template-columns: 1fr;
}

.tab-screen-header--solo .tab-screen-header-main,
.tab-screen-header--solo .activity-header-main,
.tab-screen-header--solo .messages-header-main {
  width: 100%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.onboard-hero {
  position: relative;
  height: 220px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  overflow: hidden;
}

.onboard-hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.onboard-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.2) 0%, rgba(18, 18, 18, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.onboard-hero h1:not(.apsara-wordmark) {
  font-family: var(--apsara-font-heading);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--apsara-primary);
  letter-spacing: 0.02em;
}

.onboard-hero p {
  font-size: 0.9rem;
  color: var(--apsara-text-muted);
  margin-top: 4px;
}

.onboard-body { padding: 24px 20px; }

.onboard-body h2 {
  font-family: var(--apsara-font-heading);
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.onboard-body .hint {
  font-size: 0.88rem;
  color: var(--apsara-text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.lang-pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lang-pick button,
.btn-primary,
.btn-outline,
.service-card,
.room-card,
.amenity-card,
.pick-btn {
  border: 1px solid var(--apsara-border);
  border-radius: var(--apsara-radius);
  cursor: pointer;
  transition: var(--apsara-transition);
  font-family: var(--apsara-font-body);
}

.lang-pick button {
  background: rgba(17, 17, 17, 0.95);
  color: #fff;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 500;
}

.lang-pick button .flag { font-size: 1.5rem; display: block; margin-bottom: 6px; }

/* Pre-arrival welcome — magazine hero (Telegram opening) */
#screen-lang.lang-screen {
  background: #050505;
  color: #fff;
}
#screen-lang.lang-screen.shell-screen.active {
  align-items: stretch;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.lang-hero {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(200px, 38dvh, 300px);
  overflow: hidden;
  background: #0a0a0a;
  border-radius: 0;
  margin: 0;
}
.lang-hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.lang-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.12) 0%, rgba(5, 5, 5, 0.08) 42%, rgba(5, 5, 5, 0.72) 100%);
  pointer-events: none;
}
.lang-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 20px 20px;
  text-align: center;
  pointer-events: none;
}
#screen-lang .lang-hero-brand.lotus-wordmark {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.35rem, 11vw, 3.25rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.05;
  white-space: nowrap;
  color: #fff;
  background: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.lang-onboard {
  width: 100%;
  margin: 0;
  padding: 16px 18px max(22px, env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: var(--apsara-font-body), 'Kantumruy Pro', sans-serif;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.lang-onboard-welcome {
  margin: 0;
  padding: 8px 4px 12px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
}
.lang-onboard-en,
.lang-onboard-km {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.lang-onboard-km {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
}
#screen-lang.lang-km .lang-onboard-en,
#screen-lang:not(.lang-km) .lang-onboard-km,
#screen-lang.lang-km .lang-open-en,
#screen-lang:not(.lang-km) .lang-open-km {
  display: none;
}

/* Telegram: keep both welcome languages visible. Button still follows pick. */
html[data-surface="telegram"] #screen-lang .lang-onboard-en,
html[data-surface="telegram"] #screen-lang .lang-onboard-km,
body.tg-app #screen-lang .lang-onboard-en,
body.tg-app #screen-lang .lang-onboard-km {
  display: block;
}
html[data-surface="telegram"] #screen-lang .lang-onboard-km,
body.tg-app #screen-lang .lang-onboard-km {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.78);
}
.lang-onboard-pick {
  margin: 16px 0 10px;
  font-size: 12.5px;
  color: #A3A3A3;
}
#screen-lang .lang-choice {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 52px;
  font-family: var(--apsara-font-body), 'Kantumruy Pro', sans-serif;
}
#screen-lang .lang-choice.is-selected {
  border-color: rgba(184, 146, 74, 0.65);
  box-shadow: none;
  background: transparent;
  color: var(--apsara-primary);
}
#screen-lang .lang-pick {
  margin-bottom: 12px;
}
.lang-choice-name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.lang-choice-sep {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}
.lang-choice-native {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.58);
}
.lang-open-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 15px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #d4b56a 0%, #c4a05a 42%, #b8924a 100%);
  color: #111;
  cursor: pointer;
  font-family: var(--apsara-font-body), 'Kantumruy Pro', sans-serif;
  box-shadow: 0 8px 22px rgba(184, 146, 74, 0.28);
}
.lang-open-en,
.lang-open-km {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lang-open-km {
  font-family: 'Kantumruy Pro', sans-serif;
}
body.in-iframe #screen-lang .lang-hero {
  height: clamp(148px, 30dvh, 200px);
}

/* Website splash — pure black so the Concierge mark’s black canvas disappears */
.prearrival-splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0;
  padding:
    max(20px, calc(var(--tg-content-top, 0px) + env(safe-area-inset-top, 0px)))
    20px
    max(48px, calc(28px + var(--tg-content-bottom, var(--tg-safe-bottom, 0px)) + env(safe-area-inset-bottom, 0px)));
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
  background: #000;
  color: #fff;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.45s ease;
}
html.prearrival-splash-pending,
html.prearrival-splash-pending body {
  background: #000;
}
html.prearrival-splash-pending .prearrival-splash,
html.prearrival-splash-pending .prearrival-splash[hidden],
.prearrival-splash.is-visible {
  display: flex !important;
}
.prearrival-splash.is-leaving,
.prearrival-splash[hidden] {
  pointer-events: none !important;
}
.prearrival-splash.is-leaving {
  opacity: 0;
}
.prearrival-splash-glow {
  display: none;
}
.prearrival-splash-inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: prearrivalSplashIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prearrival-splash-mark {
  position: relative;
  width: 72px;
  height: 55px;
  margin: 0 auto 10px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.prearrival-splash-mark img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  object-position: center top;
  display: block;
  mix-blend-mode: screen;
  background: transparent;
  animation: prearrivalSplashBloom 2.6s ease-in-out infinite;
}
.prearrival-splash-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 10px;
  margin: 0 0 14px;
}
.prearrival-splash-wait span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.28;
  animation: prearrivalSplashDot 1.15s ease-in-out infinite;
}
.prearrival-splash-wait span:nth-child(2) { animation-delay: 0.16s; }
.prearrival-splash-wait span:nth-child(3) { animation-delay: 0.32s; }
.prearrival-splash-brand {
  font-family: Outfit, var(--apsara-font-body), 'Kantumruy Pro', sans-serif;
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.2;
  animation: prearrivalSplashFade 0.7s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prearrival-splash-tag {
  margin-top: 8px;
  font-family: Outfit, var(--apsara-font-body), 'Kantumruy Pro', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4CC9F0;
  animation: prearrivalSplashTag 2.4s 0.28s ease-in-out infinite;
}
.prearrival-splash-built {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 12px 6px;
  min-height: 32px;
  line-height: 1.4;
  overflow: visible;
  text-align: center;
  font-family: Outfit, var(--apsara-font-body), 'Kantumruy Pro', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #A3A3A3;
  animation: prearrivalSplashFade 0.7s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prearrival-splash-built a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}
.prearrival-splash-built-mark {
  width: 16px;
  height: 16px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  overflow: visible;
  mix-blend-mode: screen;
  filter: none;
}
@keyframes prearrivalSplashIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes prearrivalSplashFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes prearrivalSplashBloom {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.12));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45));
  }
}
@keyframes prearrivalSplashDot {
  0%, 80%, 100% {
    opacity: 0.22;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1.18);
  }
}
@keyframes prearrivalSplashTag {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .prearrival-splash-inner,
  .prearrival-splash-built,
  .prearrival-splash-brand,
  .prearrival-splash-tag,
  .prearrival-splash-mark img,
  .prearrival-splash-wait span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.btn-primary {
  background: var(--apsara-primary);
  color: #0D0D0D;
  border-color: var(--apsara-primary);
  border-radius: var(--apsara-radius-pill);
  padding: 14px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  width: 100%;
  transition: background var(--apsara-transition), transform var(--apsara-transition), box-shadow var(--apsara-transition);
}

.btn-primary:hover:not(:disabled) {
  background: var(--apsara-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--apsara-primary-glow);
}

.btn-primary:disabled { opacity: 0.4; cursor: default; }

.btn-outline {
  background: transparent;
  color: var(--apsara-primary);
  border-color: var(--apsara-border-gold);
  border-radius: var(--apsara-radius-pill);
  padding: 10px 18px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background var(--apsara-transition), border-color var(--apsara-transition);
}

.btn-outline:hover {
  background: var(--apsara-primary-light);
  border-color: var(--apsara-primary);
}

.hub-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--apsara-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-header.subpage { grid-template-columns: auto 1fr auto; }

.hub-brand {
  font-family: var(--apsara-font-heading);
  font-size: 1.28rem;
  color: var(--apsara-primary);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Wordmark keeps Cormorant — do not let .hub-brand Inter override .apsara-wordmark */
.hub-brand.apsara-wordmark {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--apsara-ivory, #F5EFE6);
}

#screen-hub.shell-screen {
  padding-top: 0;
}

#screen-hub .hub-header .hub-brand {
  font-size: 1.6rem;
  padding-bottom: 0;
}

.back-btn {
  background: none;
  border: none;
  color: var(--apsara-primary);
  font-size: 1.4rem;
  padding: 4px 8px;
  cursor: pointer;
}

.hub-hero {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  height: 140px;
  width: 100%;
  max-width: none;
  min-width: 0;
  flex-shrink: 0;
  background: var(--apsara-bg-card);
}

.hub-hero--branded {
  height: clamp(148px, 26dvh, 188px);
}

.hub-hero img,
.hub-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hub-hero-caption,
.hub-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.15) 0%, rgba(13, 13, 13, 0.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 18px;
}

.hub-hero-brand {
  font-size: 1.05rem;
  color: var(--apsara-primary);
  margin-bottom: 4px;
}

.hub-hero--branded .hub-hero-overlay {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 16px;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.35) 0%,
    rgba(13, 13, 13, 0.62) 45%,
    rgba(13, 13, 13, 0.35) 100%
  );
}

.hub-hero--branded .hub-hero-overlay h2,
.hub-hero--branded #hub-greeting {
  font-family: var(--apsara-font-heading);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.12;
  width: 100%;
  text-align: center;
}

.hub-hero--branded .hub-hero-overlay p,
.hub-hero--branded #hub-greeting-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 4px;
  line-height: 1.3;
  width: 100%;
  text-align: center;
}

.hub-hero-caption h2,
.hub-hero-overlay h2 {
  font-family: var(--apsara-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
}

.hub-hero-caption p,
.hub-hero-overlay p {
  font-size: 0.84rem;
  color: var(--apsara-text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

.hub-section-title {
  padding: 8px 16px 12px;
  font-family: var(--apsara-font-heading);
  font-size: 1.05rem;
  color: var(--apsara-text-muted);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
}

.service-card {
  background: var(--apsara-bg-card);
  color: var(--apsara-text);
  padding: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-height: 112px;
  height: auto;
  overflow: visible;
  border-radius: 12px;
  border: 1px solid var(--apsara-border);
  transition: border-color var(--apsara-transition), transform var(--apsara-transition), box-shadow var(--apsara-transition);
}

.service-card:hover {
  border-color: var(--apsara-border-gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.service-card .icon { font-size: 1.5rem; flex-shrink: 0; }
.service-card .service-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin-top: 0;
  flex: 1;
  min-width: 0;
}
.service-card .title { font-weight: 600; font-size: 0.88rem; line-height: 1.25; word-break: break-word; }
.service-card .sub {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--apsara-text-muted);
  word-break: break-word;
}

.promo-banner {
  margin: 0 16px 16px;
  padding: 14px 16px;
  background: var(--apsara-bg-card);
  border: 1px solid var(--apsara-border);
  border-radius: var(--apsara-radius);
  font-size: 0.85rem;
  line-height: 1.5;
}

#screen-hub #promo-banner {
  background: linear-gradient(135deg, var(--apsara-primary-light) 0%, transparent 100%);
  border: 1px solid var(--apsara-primary-glow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 18px rgba(0, 0, 0, 0.28);
  color: var(--apsara-text);
}

.promo-banner strong { color: var(--apsara-primary); font-weight: 700; }

#screen-hub.active.has-bottom-nav .promo-banner,
#screen-hub.active.has-bottom-nav #promo-banner {
  margin: 0 16px 10px;
  padding: 10px 14px;
  font-size: 0.78rem;
  line-height: 1.4;
  flex-shrink: 0;
}

#screen-hub.active.has-bottom-nav .hub-footer {
  display: none;
}

.wizard-body {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.wizard-step { display: none; }
.wizard-step.active { display: block; }

.wizard-title {
  font-family: var(--apsara-font-heading);
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.wizard-sub {
  font-size: 0.85rem;
  color: var(--apsara-text-muted);
  margin-bottom: 16px;
  line-height: 1.45;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-field label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--apsara-text-muted);
}

.form-field input,
.form-field select {
  background: var(--apsara-bg-card);
  border: 1px solid var(--apsara-border);
  color: var(--apsara-text);
  border-radius: var(--apsara-radius-sm);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--apsara-font-body);
}

.form-field input:focus,
.form-field select:focus {
  outline: 2px solid var(--apsara-primary);
  outline-offset: 2px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.room-pick-list,
.pay-pick-list {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.room-pick-card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: none;
  border-radius: var(--apsara-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.room-pick-card:active {
  transform: scale(0.99);
}

.room-pick-card:focus-visible {
  outline: 2px solid var(--apsara-primary);
  outline-offset: 2px;
}

.pick-btn {
  background: var(--apsara-bg-card);
  color: var(--apsara-text);
  padding: 14px 16px;
  text-align: left;
  width: 100%;
  transition: border-color var(--apsara-transition), background var(--apsara-transition);
}

.pick-btn.selected {
  border-color: var(--apsara-primary);
  background: var(--apsara-primary-light);
}

.pick-btn .price {
  display: block;
  font-size: 0.82rem;
  color: var(--apsara-primary);
  margin-top: 4px;
}

.pickup-rate-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
}

.pickup-rate-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 13px;
  border-radius: var(--apsara-radius-sm);
  background: var(--apsara-bg-elevated);
  border: 1px solid var(--apsara-border);
}

.pickup-rate-name {
  font-family: 'Instrument Sans', var(--apsara-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apsara-text-muted);
}

.pickup-rate-price {
  font-family: var(--apsara-font-body);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--apsara-primary);
  letter-spacing: 0.02em;
}

.pickup-rate-price s {
  color: var(--apsara-text-muted);
  font-size: 0.72em;
  font-weight: 400;
  margin-right: 0.25em;
}

.pickup-rate-price strong {
  color: var(--apsara-primary);
  font-weight: 600;
}

.pickup-rate-meta {
  font-size: 0.75rem;
  color: var(--apsara-text-faint);
}

.pickup-vehicle-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--apsara-radius-md);
  border: 1px solid var(--apsara-border);
  background: var(--apsara-bg-elevated);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--apsara-text-muted);
}

.pickup-vehicle-note.is-van {
  border-color: var(--apsara-border-gold);
  background: var(--apsara-primary-light);
  color: var(--apsara-primary);
}

.pickup-vehicle-note.is-over {
  border-color: rgba(220, 140, 80, 0.45);
  background: rgba(220, 140, 80, 0.12);
  color: #e8b88a;
}

.verify-card {
  background: var(--apsara-bg-card);
  border: 1px solid var(--apsara-border);
  border-radius: var(--apsara-radius);
  padding: 16px;
  margin-bottom: 16px;
  line-height: 1.55;
}

.verify-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

/* Room & Amenity Gallery */
#screen-rooms .gallery-list.is-room-detail {
  padding: 0 0 16px;
}
#screen-rooms .gallery-list.is-room-detail .room-detail-hero {
  margin: 0 0 12px;
}
#screen-rooms .gallery-list.is-room-detail .room-detail-info {
  margin: 0 16px;
}

.room-card,
.amenity-card {
  background: var(--apsara-bg-card);
  overflow: hidden;
  text-align: left;
  padding: 0;
  transition: border-color var(--apsara-transition), box-shadow var(--apsara-transition);
}

.room-card:hover,
.amenity-card:hover {
  border-color: var(--apsara-border-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.room-carousel-single,
.room-card img,
.amenity-card img,
.room-pick-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.room-carousel {
  position: relative;
  background: #050505;
}

.room-carousel-stage {
  position: relative;
}

.room-carousel-viewport {
  overflow: hidden;
  width: 100%;
  height: 160px;
  touch-action: pan-y;
}

.room-carousel-count {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(12, 16, 24, 0.62);
  border-radius: 999px;
  padding: 4px 8px;
  pointer-events: none;
}

.room-carousel-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #050505;
}

.room-carousel-thumbs::-webkit-scrollbar {
  display: none;
}

.room-carousel-thumb {
  flex: 0 0 58px;
  width: 58px;
  height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}

.room-carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-carousel-thumb.is-active {
  border-color: var(--apsara-primary);
}

.room-carousel:not(.has-thumbs) .room-carousel-count {
  display: none;
}
.room-carousel.has-many .room-carousel-count {
  display: inline-block;
}

.room-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.32s ease;
  will-change: transform;
}

.room-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.room-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.62);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.room-carousel-prev { left: 8px; }
.room-carousel-next { right: 8px; }

.room-carousel-nav:hover {
  background: rgba(12, 16, 24, 0.82);
}

.room-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.room-carousel-dot {
  width: 7px;
  height: 7px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.room-carousel-dot.is-active {
  background: var(--apsara-primary);
  transform: scale(1.15);
}

.room-card-body,
.amenity-card-body,
.room-pick-card .room-card-body { padding: 14px 16px 16px; }

.room-card-title,
.amenity-card-title {
  font-family: var(--apsara-font-card-title);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 6px;
  color: var(--apsara-text);
}

.room-card-price {
  color: var(--apsara-primary);
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.room-card-price s {
  color: var(--apsara-text-muted);
  margin-right: 6px;
}

.room-card-details,
.amenity-card-details {
  font-size: 0.78rem;
  color: var(--apsara-text-muted);
  line-height: 1.4;
}

/* Amenities — list rows with checkout-style hairlines, not grey cards */
#screen-amenities .gallery-list {
  padding: 4px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#screen-amenities .amenity-card {
  padding: 16px 0;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  box-shadow: none;
}

#screen-amenities .amenity-card:last-child {
  border-bottom: none;
}

#screen-amenities .amenity-card:hover {
  border-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

#screen-amenities .amenity-card:last-child:hover {
  border-bottom: none;
}

#screen-amenities .amenity-card img {
  width: 100%;
  height: 120px;
  border-radius: var(--apsara-radius-sm);
  object-fit: cover;
  object-position: center;
}

#screen-amenities .amenity-card-body {
  padding: 0;
}

/* Rooms browse — inset cards below flow hero (not full-bleed banners) */
#screen-rooms .gallery-list:not(.is-room-detail) {
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#screen-rooms .gallery-list:not(.is-room-detail) .room-pick-card {
  padding: 0 0 16px;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#screen-rooms .gallery-list:not(.is-room-detail) .room-pick-card + .room-pick-card {
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#screen-rooms .gallery-list:not(.is-room-detail) .room-carousel {
  border-radius: var(--apsara-radius-sm);
  overflow: hidden;
}

#screen-rooms .gallery-list:not(.is-room-detail) .room-carousel-viewport {
  height: 140px;
  border-radius: var(--apsara-radius-sm);
}

#screen-rooms .gallery-list:not(.is-room-detail) .room-pick-card .room-card-body {
  padding: 12px 0 0;
}

.room-amenities-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--apsara-text-muted);
  margin: 10px 0 6px;
  font-weight: 600;
}

.room-amenity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.room-amenity-tag {
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--apsara-bg-elevated);
  border: 1px solid var(--apsara-border);
  color: var(--apsara-text-muted);
  line-height: 1.3;
}

.room-card-actions {
  padding: 0 16px 14px;
}

.success-panel {
  padding: 24px 20px;
  text-align: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

/* Center the confirmation block in the viewport (not stuck under Telegram chrome). */
#screen-success.active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: var(--app-viewport-height, 100dvh);
  padding: calc(16px + var(--tg-content-top, 0px)) 20px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

body.shell-app #screen-success.active {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: var(--app-viewport-height, 100dvh) !important;
}

.success-icon { font-size: 3rem; margin-bottom: 12px; }

.success-panel h2 {
  font-family: var(--apsara-font-heading);
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.success-summary {
  text-align: left;
  background: var(--apsara-bg-card);
  border: 1px solid var(--apsara-border);
  border-radius: var(--apsara-radius);
  padding: 16px;
  margin: 16px 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.success-note {
  font-size: 0.8rem;
  color: var(--apsara-text-muted);
  margin-bottom: 20px;
  line-height: 1.45;
}

.demo-note {
  font-size: 0.75rem;
  color: var(--apsara-text-muted);
  margin-top: 12px;
}

.hub-footer {
  padding: 12px 20px 0;
  font-size: 0.8rem;
  color: var(--apsara-text-muted);
  text-align: center;
  line-height: 1.45;
}


#app-bottom-nav[hidden],
#app-bottom-nav.is-hidden {
  display: none !important;
}

.bottom-nav {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  background: #000;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  z-index: 50;
  min-height: 56px;
  max-height: none;
  padding: 8px 8px 6px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

body.tg-app .bottom-nav {
  padding-bottom: calc(10px + var(--tg-safe-bottom, env(safe-area-inset-bottom, 0px)));
  min-height: calc(56px + var(--tg-safe-bottom, env(safe-area-inset-bottom, 0px)));
  max-height: none;
}

body:not(.tg-app) .bottom-nav {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  min-height: calc(56px + env(safe-area-inset-bottom, 0));
  max-height: none;
}

.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--apsara-text-muted);
  font-family: var(--apsara-font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.1;
  padding: 2px 4px;
  min-height: 0;
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
}

.bottom-nav-btn.active { color: var(--apsara-primary); }

.bottom-nav-btn .nav-icon,
.bottom-nav-btn .app-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--apsara-primary);
  color: #0D0D0D;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.nav-badge[hidden] { display: none !important; }

.activity-list {
  padding: 12px 16px 16px;
  display: grid;
  gap: 10px;
}

.activity-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#screen-activity .flow-hero-content .card-hero-title {
  font-family: var(--apsara-font-heading);
  font-weight: 600;
  color: #fff;
}

body.shell-app #screen-activity.active {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body.shell-app #screen-activity .activity-body {
  flex: 1 1 0;
  min-height: 0;
}

.activity-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--apsara-text-muted);
  font-size: 0.9rem;
}

body.shell-app #screen-activity.active > .activity-body:has(> .activity-empty:not([hidden])),
body.shell-app #screen-activity.active:has(> .activity-empty:not([hidden])) {
  display: flex !important;
  flex-direction: column;
}

body.shell-app #screen-activity .activity-body > .activity-list:empty,
body.shell-app #screen-activity.active:has(> .activity-empty:not([hidden])) > .activity-list,
body.shell-app #screen-activity .activity-body:has(> .activity-empty:not([hidden])) > .activity-list {
  display: none !important;
}

body.shell-app #screen-activity.active > .activity-empty:not([hidden]),
body.shell-app #screen-activity .activity-body > .activity-empty:not([hidden]) {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 28px 32px !important;
  box-sizing: border-box;
}

.activity-card {
  background: var(--apsara-bg-card);
  border: 1px solid var(--apsara-border);
  border-radius: var(--apsara-radius);
  padding: 14px;
}

.activity-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
}

.activity-card-head h3 {
  font-size: 0.95rem;
  font-family: var(--apsara-font-card-title);
  font-weight: 700;
}

.activity-card-head time {
  font-size: 0.72rem;
  color: var(--apsara-text-muted);
}

.activity-status {
  font-size: 0.72rem;
  color: var(--apsara-primary);
  font-weight: 600;
}

.activity-summary,
.activity-total {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--apsara-text-muted);
}

.messages-screen {
  display: none;
}

.msg-bubble.msg-status {
  border-width: 1.5px;
  padding: 12px 14px;
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.08);
}

.msg-bubble.msg-status-confirmed {
  background: linear-gradient(145deg, rgba(201, 169, 98, 0.16), rgba(201, 169, 98, 0.06));
  border-color: rgba(201, 169, 98, 0.55);
  box-shadow: 0 0 18px rgba(201, 169, 98, 0.12);
}

.msg-bubble.msg-status-delivered {
  background: linear-gradient(145deg, rgba(88, 166, 110, 0.18), rgba(88, 166, 110, 0.06));
  border-color: rgba(88, 166, 110, 0.5);
  box-shadow: 0 0 18px rgba(88, 166, 110, 0.1);
}

.msg-bubble.msg-status-completed {
  background: linear-gradient(145deg, rgba(120, 150, 130, 0.14), rgba(120, 150, 130, 0.05));
  border-color: rgba(120, 150, 130, 0.45);
}

.msg-bubble.msg-status-booked {
  background: linear-gradient(145deg, rgba(110, 155, 200, 0.16), rgba(110, 155, 200, 0.06));
  border-color: rgba(110, 155, 200, 0.45);
}

.msg-bubble.msg-status-submitted {
  background: linear-gradient(145deg, rgba(201, 169, 98, 0.1), rgba(201, 169, 98, 0.04));
  border-color: rgba(201, 169, 98, 0.35);
}

.msg-meta-prominent { margin-bottom: 10px; }

.msg-dept { font-weight: 600; color: var(--apsara-primary); }

.msg-dept-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.msg-dept-icon { font-size: 1.35rem; line-height: 0; }
.msg-dept-icon:has(svg),
.msg-dept-icon .app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  font-size: 0;
  color: var(--apsara-primary);
}
.msg-dept-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.msg-dept-icon:has(.msg-lotus-mark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  overflow: visible !important;
  flex-shrink: 0;
  line-height: 0;
  font-size: 0;
}

.msg-lotus-mark {
  display: block;
  width: 22px;
  height: 22px;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: screen;
  filter: none;
}

.msg-dept-name { color: var(--apsara-primary); }

.msg-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
}

.msg-status-title {
  font-family: var(--apsara-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--apsara-text);
}

.msg-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1408;
  background: var(--apsara-primary);
}

.msg-status-badge-wide {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.82rem;
  border-radius: var(--apsara-radius-sm);
}

.msg-status-confirmed .msg-status-badge {
  background: var(--apsara-primary);
  box-shadow: 0 0 12px rgba(201, 169, 98, 0.35);
}

.msg-status-delivered .msg-status-badge {
  background: #6fcf8a;
  color: #0f1a12;
}

.msg-status-completed .msg-status-badge {
  background: #9bb5a4;
  color: #101814;
}

.msg-status-booked .msg-status-badge {
  background: #7eb8e8;
  color: #0d1520;
}

.msg-status-divider {
  height: 1px;
  margin: 0 0 10px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 98, 0.45), transparent);
  border: 0;
}

.msg-status-delivered .msg-status-divider {
  background: linear-gradient(90deg, transparent, rgba(88, 166, 110, 0.45), transparent);
}

.msg-status-body { display: grid; gap: 6px; }

.msg-status-detail {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--apsara-text);
}

.msg-status-total {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--apsara-primary);
}

.msg-text {
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* —— Hotel Info / FAQ —— */
.info-list {
  padding: 4px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-content: start;
}

.info-card {
  background: transparent;
  border-radius: 0;
  padding: 16px 0;
  text-align: left;
  overflow: visible;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-card:last-child {
  border-bottom: none;
}

.info-card-img {
  width: 100%;
  height: 140px;
  min-height: 140px;
  max-height: 140px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--apsara-radius-sm);
  margin: 0;
  display: block;
  flex: 0 0 140px;
}

.info-card h3 {
  font-family: var(--apsara-font-heading);
  font-size: 1rem;
  color: var(--apsara-primary);
  margin-bottom: 6px;
}

.info-card p {
  font-size: 0.88rem;
  color: var(--apsara-text-muted);
  line-height: 1.5;
}

/* Chat pills — mini-app-shell.css */

/* —— First-visit 25% off promo popup —— */
body.promo-popup-open {
  overflow: hidden;
}

.promo-popup-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

.promo-popup-modal[hidden] {
  display: none !important;
}

.promo-popup-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.promo-popup-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 352px);
  overflow: hidden;
  background: var(--apsara-bg-card);
  border: 1px solid var(--apsara-border);
  border-radius: 20px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.62);
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  animation: promo-popup-in 0.42s var(--apsara-ease);
}

@keyframes promo-popup-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.promo-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 214, 170, 0.55);
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.72);
  color: #F5E6C8;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.promo-popup-close:hover {
  background: rgba(8, 8, 8, 0.88);
  border-color: var(--apsara-primary, #B8924A);
}

.promo-popup-media {
  position: relative;
  height: 168px;
  overflow: hidden;
}

.promo-popup-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promo-popup-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.08) 0%, rgba(13, 13, 13, 0.2) 38%, rgba(13, 13, 13, 0.92) 100%);
  pointer-events: none;
}

.promo-popup-media-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 20px 14px;
}

.promo-popup-eyebrow {
  margin: 0 0 2px;
  font-family: 'Instrument Sans', var(--apsara-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apsara-primary);
}

.promo-popup-save {
  margin: 0;
  font-family: var(--apsara-font-body);
  font-size: 2.35rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #fff;
}

[data-lang="km"] .promo-popup-save,
html[lang="km"] .promo-popup-save {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 1.55rem;
  font-weight: 600;
}

.promo-popup-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
}

.promo-popup-title {
  margin: 0;
  font-family: var(--apsara-font-body);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--apsara-ivory, #F5EFE6);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

[data-lang="km"] .promo-popup-title,
html[lang="km"] .promo-popup-title {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.promo-popup-lead {
  margin: 0;
  font-family: var(--apsara-font-body);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--apsara-text-muted);
}

.promo-popup-lead strong {
  color: var(--apsara-primary);
  font-weight: 600;
}

.promo-popup-code-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--apsara-bg-elevated);
  border: 1px solid var(--apsara-border);
}

.promo-popup-code-label {
  font-family: 'Instrument Sans', var(--apsara-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apsara-text-faint);
}

.promo-popup-code {
  font-family: 'Instrument Sans', var(--apsara-font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--apsara-primary);
}

.promo-popup-perk {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--apsara-font-body);
  font-size: 0.8rem;
  color: var(--apsara-text-muted);
}

.promo-popup-perk::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--apsara-primary);
  box-shadow: 0 0 8px var(--apsara-primary-glow);
}

.promo-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.promo-popup-actions .btn-primary {
  width: 100%;
  border: 1px solid var(--apsara-primary);
  border-radius: var(--apsara-radius-pill);
  cursor: pointer;
  font-family: 'Instrument Sans', var(--apsara-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 16px;
  background: var(--apsara-primary);
  color: #0D0D0D;
  transition: var(--apsara-transition);
}

.promo-popup-actions .btn-primary:hover {
  background: var(--apsara-ivory, #F5EFE6);
  border-color: var(--apsara-ivory, #F5EFE6);
  box-shadow: 0 6px 20px var(--apsara-primary-glow);
}

.promo-popup-skip {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--apsara-text-muted);
  cursor: pointer;
  font-family: var(--apsara-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 8px 10px 2px;
  transition: color 0.2s ease;
}

.promo-popup-skip:hover {
  color: var(--apsara-text);
}

/* Redesign Hero Card */
.hub-hero-card {
  position: relative;
  width: 100vw;
  margin-left: -16px;
  height: 240px;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px 24px;
  border: none;
  background: var(--apsara-bg-card);
  margin-bottom: 24px;
  cursor: pointer;
}

.hub-hero-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hub-hero-card::after {
  display: none;
}

.hub-hero-card .hub-hero-caption {
  position: relative;
  z-index: 3;
  text-align: left;
  background: none;
}

.hub-hero-card #hub-greeting {
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 4px 0;
}

.hub-hero-card #hub-greeting-sub {
  font-size: 1.05rem;
  color: var(--apsara-primary);
  margin: 0;
  font-weight: 500;
}

/* Services Carousel */
.services-carousel-wrapper {
  padding: 0 8px; /* Adds additional margin on top of standard padding */
}

.services-carousel-header {
  margin-bottom: 12px;
}

.services-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #FFF;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.services-title .arrow {
  color: var(--apsara-primary);
}

.services-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.services-carousel::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  position: relative;
  min-width: 160px;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  flex-shrink: 0;
  border: none;
  background: var(--apsara-bg-card);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  cursor: pointer;
}

.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.carousel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 70%);
  z-index: 2;
}

.carousel-title {
  position: relative;
  z-index: 3;
  color: #FFF;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
}

/* Custom Bottom Nav Chat Button */
.nav-chat-primary {
  position: relative;
}

.chat-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--apsara-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-circle .nav-icon {
  width: 1.2rem;
  height: 1.2rem;
  opacity: 1 !important;
  filter: none !important;
}

/* Hide original icons in the nav-chat-primary if they overlap */
.nav-chat-primary > .nav-icon {
  display: none;
}


/* --- Lotus Boutique New Hub Layout (matching Lotus Concierge structure) --- */

.hub-accent-rule {
  display: none !important;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--apsara-primary) 0%, rgba(184,146,74,0.15) 45%, transparent 100%);
  opacity: 0.5;
  margin-top: 1px;
}

.home-content {
  flex: 1;
  min-height: 0;
  padding: 10px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-content > .fade-in {
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.home-content > .fade-in:last-child {
  flex: 1 1 auto;
  display: flex;
  min-height: 150px;
}
.home-content > .fade-in:nth-child(1) { animation-delay: 0s; }
.home-content > .fade-in:nth-child(2) { animation-delay: 0.08s; }
.home-content > .fade-in:nth-child(3) { animation-delay: 0.16s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Hub open: cards fade/slide up in sequence (hero → carousel tiles → chat). */
#screen-hub .home-content > .cards-carousel.fade-in {
  opacity: 1;
  transform: none;
  animation: none;
}
#screen-hub .home-content > .card-hero.fade-in,
#screen-hub .home-content > .card-support.fade-in,
#screen-hub .cards-track .card-sm {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#screen-hub .home-content > .card-hero.fade-in { animation-delay: 0.04s; }
#screen-hub .cards-track .card-sm:nth-child(1) { animation-delay: 0.12s; }
#screen-hub .cards-track .card-sm:nth-child(2) { animation-delay: 0.18s; }
#screen-hub .cards-track .card-sm:nth-child(3) { animation-delay: 0.24s; }
#screen-hub .cards-track .card-sm:nth-child(4) { animation-delay: 0.30s; }
#screen-hub .cards-track .card-sm:nth-child(5) { animation-delay: 0.36s; }
#screen-hub .cards-track .card-sm:nth-child(6) { animation-delay: 0.42s; }
#screen-hub .cards-track .card-sm:nth-child(7) { animation-delay: 0.48s; }
#screen-hub .home-content > .card-support.fade-in { animation-delay: 0.22s; }

html.prearrival-splash-pending #screen-hub .home-content > .card-hero.fade-in,
html.prearrival-splash-pending #screen-hub .home-content > .card-support.fade-in,
html.prearrival-splash-pending #screen-hub .cards-track .card-sm,
#screen-hub:not(.active):not(.hub-entered) .home-content > .card-hero.fade-in,
#screen-hub:not(.active):not(.hub-entered) .home-content > .card-support.fade-in,
#screen-hub:not(.active):not(.hub-entered) .cards-track .card-sm {
  animation: none;
  opacity: 0;
  transform: translateY(16px);
}

#screen-hub.hub-entered .home-content > .card-hero.fade-in,
#screen-hub.hub-entered .home-content > .card-support.fade-in,
#screen-hub.hub-entered .cards-track .card-sm,
#screen-hub .hub-card-settled {
  animation: none;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-content > .fade-in,
  #screen-hub .home-content > .card-hero.fade-in,
  #screen-hub .home-content > .card-support.fade-in,
  #screen-hub .cards-track .card-sm {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* HERO CARD */
.card-hero {
  position: relative;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  background: #0a0a0a;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, border-color 0.3s;
  width: 100%;
  padding: 0;
  line-height: 0;
}
.card-hero picture {
  display: block;
  width: 100%;
  line-height: 0;
}
.card-hero:hover,
.card-hero:active {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
.card-hero-img {
  width: 100%;
  height: 188px;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}
.card-hero:hover .card-hero-img { transform: scale(1.04); }
.card-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(13,13,13,0.04) 0%, rgba(13,13,13,0.08) 30%, rgba(13,13,13,0.78) 62%, rgba(13,13,13,0.97) 100%);
  pointer-events: none;
}
.card-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 18px 18px;
  z-index: 10;
  line-height: 1.1;
}
.card-hero-title {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-family: var(--apsara-font-body);
}
.card-hero-sub {
  font-size: 12px;
  color: #E8C97A;
  font-weight: 600;
  margin-top: 3px;
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000, 0 0 8px #000, 0 2px 12px #000;
}
.card-hero-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  background: var(--apsara-primary);
  color: #0D0D0D;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  font-family: 'Instrument Sans', sans-serif;
  transition: all 0.25s;
  box-shadow: 0 0 16px rgba(184,146,74,0.35), 0 4px 12px rgba(0,0,0,0.4);
}
.card-hero:hover .card-hero-cta {
  background: var(--apsara-ivory);
  box-shadow: 0 0 24px rgba(184,146,74,0.5), 0 6px 18px rgba(0,0,0,0.5);
}

/* Full-bleed page hero — back arrow in the photo, no boxed card */
.flow-hero {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  cursor: default;
  background: #0a0a0a;
  align-self: stretch;
}
.flow-hero-img {
  display: block;
  width: 100%;
  height: clamp(168px, 26dvh, 220px);
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0;
}
.flow-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.28) 0%, rgba(5, 5, 5, 0.08) 38%, rgba(5, 5, 5, 0.72) 78%, rgba(5, 5, 5, 0.96) 100%);
  pointer-events: none;
}
.flow-hero-back {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px) + var(--tg-content-top, var(--tg-safe-top, 0px)));
  left: calc(10px + env(safe-area-inset-left, 0px));
  z-index: 12;
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid rgba(232, 214, 170, 0.55);
  background: rgba(8, 8, 8, 0.72);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #F5E6C8;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
}
.flow-hero-back::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.flow-hero-back:hover,
.flow-hero-back:focus-visible {
  background: rgba(8, 8, 8, 0.88);
  border-color: var(--apsara-primary, #B8924A);
  opacity: 1;
}
.flow-hero-back:focus-visible {
  outline: 2px solid var(--apsara-primary, #B8924A);
  outline-offset: 2px;
}
.flow-hero-back[hidden] {
  display: none !important;
}
.flow-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  padding: 16px 18px 18px;
  pointer-events: none;
}
.flow-hero-content .card-hero-title {
  font-size: 26px;
  line-height: 1.08;
  margin: 0;
}
.flow-hero-content .card-hero-sub {
  margin-top: 4px;
}

/* CAROUSEL */
.cards-carousel { margin: 0 -13px; }
.cards-track {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 13px 4px;
  scroll-padding-left: 13px;
}
.cards-track::-webkit-scrollbar { display: none; }

/* SMALL CARD */
.card-sm {
  position: relative;
  flex: 0 0 36%;
  min-width: 118px;
  max-width: 148px;
  border-radius: var(--apsara-radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--apsara-border);
  background: var(--apsara-bg-card);
  scroll-snap-align: start;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, border-color 0.3s;
}
.card-sm:hover {
  transform: translateY(-4px);
  border-color: var(--apsara-border-gold);
  box-shadow: 0 10px 28px rgba(0,0,0,0.7), 0 0 14px rgba(184,146,74,0.18);
}
.card-sm:active { transform: scale(0.96); }
.card-sm-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.card-sm:hover .card-sm-img { transform: scale(1.08); }
.card-sm-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 15%, rgba(13,13,13,0.97) 100%);
  pointer-events: none;
}
.card-sm-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 9px 10px;
}
.card-sm-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.01em;
  display: block;
  font-family: var(--apsara-font-body);
}
.card-sm-sub {
  font-size: 8.5px;
  font-weight: 500;
  color: var(--apsara-primary);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
  font-family: 'Instrument Sans', sans-serif;
}

/* SUPPORT / DISCOUNTS CARD */
.card-support {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 160px;
  border-radius: var(--apsara-radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--apsara-border);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, border-color 0.3s;
  display: flex;
}
.card-support:hover {
  transform: translateY(-2px);
  border-color: var(--apsara-border-gold);
  box-shadow: 0 12px 32px rgba(0,0,0,0.75), 0 0 18px rgba(184,146,74,0.2);
}
.card-support:active { transform: scale(0.99); }
.card-support-img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.65s ease;
}
.card-support:hover .card-support-img { transform: scale(1.04); }
.card-support-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.65) 48%, rgba(13,13,13,0.96) 100%);
  pointer-events: none;
}
.card-support-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px 17px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.card-support-title {
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-family: var(--apsara-font-body);
}

/* DOTS */
.cards-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 0 0;
}
.cards-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,.18);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.cards-dot.active {
  background: var(--apsara-primary);
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(184,146,74,0.5);
}

/* ORB BACKGROUND ACCENTS */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
}
.orb-1 {
  width: 280px;
  height: 280px;
  top: -70px;
  right: -80px;
}
.orb-2 {
  width: 300px;
  height: 300px;
  bottom: 100px;
  left: -100px;
}

/* Fix: hub-main overflow clips the discounts card on web/shell-app */
body.shell-app #screen-hub .hub-main,
#screen-hub .hub-main {
  overflow: visible;
}

#screen-hub .home-content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Center the Lotus Boutique brand in the hub header */
#screen-hub .hub-header {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  grid-template-rows: 48px;
  align-items: center;
  column-gap: 0;
  padding: 0 4px;
}

body.tg-app #screen-hub .hub-header {
  padding-top: 8px;
  padding-left: calc(10px + var(--tg-safe-left, 0px));
  padding-right: calc(10px + var(--tg-safe-right, 0px));
}

#screen-hub .hub-header .hub-brand {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
  width: max-content;
  max-width: 100%;
  justify-self: center;
  align-self: center;
  white-space: nowrap;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

#screen-hub .hub-header-start {
  grid-column: 1;
  grid-row: 1;
}

#screen-hub .hub-cart-btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--apsara-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  padding: 0;
  z-index: 2;
}

#screen-hub .hub-cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--apsara-primary);
  color: #0d0d0d;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

#screen-hub .hub-header-end {
  display: none;
}

#screen-hub .hub-accent-rule {
  display: none !important;
}

.app-lang-toggle {
  display: none !important; /* removed from live UX */
  position: fixed;
  top: calc(10px + var(--tg-content-top, env(safe-area-inset-top, 0px)));
  right: calc(12px + var(--tg-safe-right, env(safe-area-inset-right, 0px)));
  z-index: 80;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(184, 146, 74, 0.65);
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.72);
  color: var(--apsara-primary, #B8924A);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Website overlay close (X) sits on the iframe’s top-right — keep language off that corner */
body.in-iframe .app-lang-toggle,
html[data-surface="iframe"] .app-lang-toggle {
  right: auto;
  left: calc(12px + var(--tg-safe-left, 0px));
}

.app-lang-toggle[hidden] {
  display: none !important;
}

html.prearrival-splash-pending .app-lang-toggle {
  display: none !important;
}

/* Hub row sizing lives in “HUB LAYOUT CONTRACT” at the end of this file.
   Do not add per-surface heights here — it re-creates the gap/clip bugs. */

/* === CAROUSEL ARROWS === */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--apsara-border-gold);
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--apsara-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  padding: 0;
  line-height: 0;
}
.carousel-arrow-icon {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel-arrow:hover {
  background: var(--apsara-primary);
  color: #0d0d0d;
  border-color: var(--apsara-primary);
  box-shadow: 0 0 14px rgba(184,146,74,0.45);
}
.carousel-arrow-prev { left: 4px; }
.carousel-arrow-next { right: 4px; }
.carousel-arrow:not([hidden]) { display: flex !important; }
.carousel-arrow[hidden] { display: none !important; }

/* Chat card sub-text */
.card-support-sub {
  font-size: 11px;
  color: var(--apsara-primary);
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 4px;
}

/* ====================================================
   BOTTOM NAV — raised gold Chat FAB
   ==================================================== */
.bottom-nav {
  overflow: visible !important;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45) !important;
  max-height: none !important;
}

.bottom-nav-btn {
  color: rgba(255, 255, 255, 0.42) !important;
  overflow: visible;
}

.bottom-nav-btn.active {
  color: var(--apsara-primary) !important;
  text-shadow: none !important;
}

.bottom-nav-btn:not(.nav-chat-primary) .nav-icon,
.bottom-nav-btn:not(.nav-chat-primary) .app-icon {
  opacity: 0.55 !important;
  filter: none !important;
}

.bottom-nav-btn.active:not(.nav-chat-primary) .nav-icon,
.bottom-nav-btn.active:not(.nav-chat-primary) .app-icon {
  opacity: 1 !important;
  color: var(--apsara-primary) !important;
  filter: none !important;
}

.nav-badge[hidden] {
  display: none !important;
}

.nav-chat-primary {
  overflow: visible !important;
  z-index: 3;
}

.nav-chat-primary .chat-circle {
  width: 36px !important;
  height: 36px !important;
  margin-top: -8px;
  border-radius: 50% !important;
  background: var(--lotus-chat, #48A894) !important;
  border: 0 !important;
  box-shadow: 0 4px 12px var(--lotus-chat-glow, rgba(72, 168, 148, 0.28)) !important;
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

.nav-chat-primary .chat-circle .nav-icon,
.nav-chat-primary .chat-circle .app-icon {
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  color: #111 !important;
  filter: none !important;
  transform: none !important;
  line-height: 0 !important;
}

.nav-chat-primary .chat-circle svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  overflow: visible;
  fill: #111 !important;
  stroke: none !important;
  /* Glyph sits high-left in the 24 viewBox; nudge to the visual centre. */
  transform: translate(0.5px, 1.5px) !important;
}

.nav-chat-primary.active .chat-circle {
  background: var(--lotus-chat, #48A894) !important;
  box-shadow: 0 4px 14px var(--lotus-chat-glow, rgba(72, 168, 148, 0.28)) !important;
}

.nav-chat-primary.active .chat-circle .nav-icon,
.nav-chat-primary.active .chat-circle .app-icon {
  color: #1a1408 !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.nav-chat-primary .nav-badge {
  top: 2px;
  right: calc(50% - 28px);
}

/* Remove white border around the Chat card */
.card-support {
  border: none !important;
}

.card-support:hover {
  border: none !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.75), 0 0 18px rgba(184,146,74,0.1) !important;
}

/* Hide desktop scrollbars that render as vertical lines */
.hub-main::-webkit-scrollbar,
.home-content::-webkit-scrollbar,
#screen-hub::-webkit-scrollbar,
.shell-screen::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.hub-main,
.home-content,
#screen-hub,
.shell-screen {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Glassmorphism Inputs for Wizard */
.glass-input {
  background: rgba(10, 10, 10, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(184, 146, 74, 0.3) !important;
  border-radius: var(--apsara-radius, 12px) !important;
  color: var(--apsara-text) !important;
  padding: 12px 14px !important;
  font-size: 1rem !important;
  width: 100% !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}

.glass-input:focus {
  outline: none !important;
  border-color: var(--apsara-primary) !important;
  box-shadow: 0 0 12px rgba(184, 146, 74, 0.25) !important;
}

.glass-input[type="date"]::-webkit-calendar-picker-indicator,
.glass-input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.9 !important;
  cursor: pointer;
  filter: none !important;
}

/* Book Room + Airport Pickup — no input bubbles; gold Continue stays */
#screen-book .wizard-body,
#screen-pickup .wizard-body {
  padding-top: 8px;
}
#screen-book .wizard-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 12px;
}

/* Leftover overlay height fills the photo, not a void under Continue. */
body.shell-app #screen-book.active > .flow-hero {
  flex: 1 0 120px;
  min-height: 120px;
  position: relative;
}

body.shell-app #screen-book.active > .flow-hero .flow-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Telegram — and every step after the dates form (room list, details, payment):
   Book Room hero band matches Pickup / Spa — not flex-fill, so a tall list can't
   squash it down to 120px. */
body.tg-app.shell-app #screen-book.active > .flow-hero,
html[data-surface="telegram"] body.shell-app #screen-book.active > .flow-hero,
body.shell-app #screen-book.active:not([data-book-step="dates"]) > .flow-hero {
  flex: 0 0 auto;
  min-height: 0;
}

body.tg-app.shell-app #screen-book.active > .flow-hero .flow-hero-img,
html[data-surface="telegram"] body.shell-app #screen-book.active > .flow-hero .flow-hero-img,
body.shell-app #screen-book.active:not([data-book-step="dates"]) > .flow-hero .flow-hero-img {
  position: static;
  inset: auto;
  width: 100%;
  height: clamp(168px, 26dvh, 220px);
  object-fit: cover;
  object-position: center 40%;
}

/* Telegram dates step: use leftover height so fields are not packed at the top. */
body.tg-app.shell-app #screen-book.active > .wizard-body:has(.book-stay-perk),
html[data-surface="telegram"] body.shell-app #screen-book.active > .wizard-body:has(.book-stay-perk) {
  flex: 1 1 auto;
  justify-content: space-between;
  gap: clamp(10px, 2.6dvh, 20px);
  padding-top: clamp(14px, 2.8dvh, 24px);
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .form-row,
html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .form-row {
  margin-bottom: 0;
  gap: 20px;
}

body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .form-field,
html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .form-field {
  margin-bottom: 0;
  gap: 6px;
}

body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .form-field input,
body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .form-field select,
body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .glass-input,
html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .form-field input,
html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .form-field select,
html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .glass-input {
  padding: 10px 0 12px !important;
  font-size: 1.08rem !important;
}

body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .btn-primary,
html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .btn-primary {
  margin-top: 0 !important;
  padding: 14px 20px;
}

body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk,
html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk {
  margin-top: 0;
  padding: 14px 16px;
}

body.shell-app #screen-book.active > .wizard-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#screen-book .book-stay-perk {
  margin-top: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(184, 146, 74, 0.22) 0%, rgba(184, 146, 74, 0.05) 100%);
  border: 1px solid rgba(184, 146, 74, 0.38);
  pointer-events: none;
  user-select: none;
}
#screen-book .book-stay-perk-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #B8924A;
  color: #0D0D0D;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
#screen-book .book-stay-perk-text {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#screen-book .book-stay-perk-text strong {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
#screen-book .book-stay-perk-text span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  line-height: 1.35;
}
#screen-pickup .wizard-body {
  display: flex;
  flex-direction: column;
}
#screen-pickup .verify-actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 16px;
}
#screen-pickup .verify-actions .pick-btn {
  flex: 1 1 148px;
  width: auto;
  max-width: 200px;
  text-align: center;
}
#screen-book .form-row {
  gap: 18px;
  margin-bottom: 2px;
}
#screen-book .form-field,
#screen-pickup .form-field {
  margin-bottom: 10px;
  gap: 2px;
}
#screen-book .form-field label,
#screen-pickup .form-field label {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
  letter-spacing: 0.08em;
}
#screen-book .form-field input,
#screen-book .form-field select,
#screen-book .glass-input,
#screen-pickup .form-field input,
#screen-pickup .form-field select {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 10px !important;
  font-size: 1.05rem !important;
}
#screen-book .form-field select,
#screen-book select.glass-input {
  color: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B8924A' d='M1.4 0.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
  background-size: 10px 7px !important;
  padding-right: 18px !important;
}
#screen-book .form-field select option,
#screen-book select.glass-input option,
#screen-pickup .form-field select option,
.cv-appointment-time option,
select.cv-appointment-time option {
  color: #F5EFE6;
  background: #0D0D0D;
}

#screen-book .form-field input[type="date"],
#screen-book .form-field input[type="time"],
#screen-pickup .form-field input[type="date"],
#screen-pickup .form-field input[type="time"],
.cv-appointment-date,
.cv-appointment-time,
.tour-date-input {
  color-scheme: dark;
  color: #fff;
}

#screen-book .form-field input[type="date"]::-webkit-calendar-picker-indicator,
#screen-book .form-field input[type="time"]::-webkit-calendar-picker-indicator,
#screen-pickup .form-field input[type="date"]::-webkit-calendar-picker-indicator,
#screen-pickup .form-field input[type="time"]::-webkit-calendar-picker-indicator,
.cv-appointment-date::-webkit-calendar-picker-indicator,
.tour-date-input::-webkit-calendar-picker-indicator {
  opacity: 0.9;
  cursor: pointer;
  filter: none;
}
#screen-book .form-field input:focus,
#screen-book .form-field select:focus,
#screen-book .glass-input:focus,
#screen-pickup .form-field input:focus,
#screen-pickup .form-field select:focus {
  outline: none !important;
  border-bottom-color: var(--apsara-primary) !important;
  box-shadow: none !important;
}
#screen-book .btn-primary,
#screen-pickup .btn-primary {
  margin-top: 16px;
  flex-shrink: 0;
}

/* Short overlay / phone: keep the dates form compact so the photo can still breathe. */
@media (max-height: 680px) {
  #screen-book .flow-hero-content {
    padding: 10px 16px 12px;
  }
  #screen-book .flow-hero-content .card-hero-title {
    font-size: 22px;
  }
  #screen-book .wizard-body {
    padding-top: 4px;
    padding-bottom: 10px;
  }
  #screen-book .form-row {
    gap: 14px;
  }
  #screen-book .form-field {
    margin-bottom: 4px;
  }
  #screen-book .form-field input,
  #screen-book .form-field select,
  #screen-book .glass-input {
    padding: 4px 0 6px !important;
    font-size: 0.95rem !important;
  }
  #screen-book .btn-primary {
    margin-top: 10px;
    padding: 11px 20px;
  }
  #screen-book .book-stay-perk {
    margin-top: 10px;
    padding: 8px 12px;
    gap: 10px;
  }
  #screen-book .book-stay-perk-badge {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.64rem;
  }
  #screen-book .book-stay-perk-text strong {
    font-size: 0.82rem;
  }
  #screen-book .book-stay-perk-text span {
    font-size: 0.7rem;
  }

  body.tg-app #screen-book .wizard-body:has(.book-stay-perk),
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) {
    padding-top: clamp(12px, 2.4dvh, 20px);
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .form-field,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .form-field {
    margin-bottom: 0;
  }
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .form-field input,
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .form-field select,
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .glass-input,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .form-field input,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .form-field select,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .glass-input {
    padding: 10px 0 12px !important;
    font-size: 1.05rem !important;
  }
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .btn-primary,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .btn-primary {
    margin-top: 0 !important;
    padding: 14px 20px;
  }
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk {
    margin-top: 0;
    padding: 14px 16px;
    gap: 12px;
  }
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk-badge,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk-badge {
    min-height: 26px;
    padding: 5px 10px;
    font-size: 0.68rem;
  }
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk-text strong,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk-text strong {
    font-size: 0.9rem;
  }
  body.tg-app #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk-text span,
  html[data-surface="telegram"] #screen-book .wizard-body:has(.book-stay-perk) .book-stay-perk-text span {
    font-size: 0.76rem;
  }
}
#screen-pickup .pickup-rate-strip {
  gap: 24px;
  margin: 4px 0 20px;
}
#screen-pickup .pickup-rate-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
#screen-pickup .pickup-vehicle-note,
#screen-pickup .pickup-vehicle-note.is-van,
#screen-pickup .pickup-vehicle-note.is-over,
#screen-pickup .verify-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
}

/* Adjust wizard text to match aesthetic */
.wizard-title {
  color: var(--apsara-primary);
  font-family: var(--apsara-font-heading);
  margin-bottom: 4px;
}

.wizard-sub {
  color: var(--apsara-text-muted);
  margin-bottom: 20px;
}

#screen-book.shell-screen {
  background-color: #050505;
  background-image: radial-gradient(circle at 50% -20%, rgba(184, 146, 74, 0.15) 0%, transparent 70%);
}

.glass-card {
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(184, 146, 74, 0.15);
  border-radius: var(--apsara-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.room-detail-hero {
  margin: -16px -16px 20px -16px;
  position: relative;
}

.room-detail-hero .room-carousel {
  height: auto;
  border-radius: 0;
  background: #050505;
}

.room-detail-hero .room-carousel-viewport,
.room-detail-hero .room-carousel-single {
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 320px;
}

.room-detail-info {
  padding: 16px 16px 20px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.room-detail-title {
  font-family: var(--apsara-font-heading);
  font-size: 1.5rem;
  color: var(--apsara-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-detail-title svg {
  width: 24px;
  height: 24px;
  fill: var(--apsara-primary);
}

.room-detail-price {
  font-size: 1.1rem;
  color: var(--apsara-text-muted);
  margin-bottom: 16px;
}

.room-detail-price s {
  color: var(--apsara-text-faint);
  font-size: 0.9em;
  margin-right: 4px;
}

.room-detail-price strong {
  color: var(--apsara-primary);
  font-size: 1.2em;
}

.room-detail-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--apsara-text);
  margin-bottom: 24px;
}

.room-detail-amenities-title {
  font-family: var(--apsara-font-heading);
  font-size: 1.1rem;
  color: var(--apsara-primary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.room-detail-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.room-amenity-pill {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--apsara-primary);
  background: rgba(184, 146, 74, 0.1);
  border: 1px solid rgba(184, 146, 74, 0.3);
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

.room-detail-btn {
  width: 100%;
}

/* Cart + upsell */
.upsell-deal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 14px 14px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.45);
}
.upsell-deal-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--apsara-primary, #D4AF37);
  color: #0D0D0D;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.upsell-deal-copy {
  min-width: 0;
}
.upsell-deal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.upsell-deal-body {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.upsell-deal-body strong {
  color: var(--apsara-primary, #D4AF37);
  font-weight: 700;
}
.upsell-card .cart-line-price {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.hub-cart-btn:hover { opacity: 0.85; }

.upsell-list,
.cart-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

#screen-upsell .upsell-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#screen-upsell #upsell-to-cart.btn-primary,
#screen-upsell .btn-primary {
  margin-top: auto;
  background: #B8924A !important;
  color: #0D0D0D !important;
  border: 1px solid #B8924A !important;
  opacity: 1 !important;
  width: 100%;
  flex-shrink: 0;
}

.upsell-card,
.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.cart-line.has-thumb {
  align-items: flex-start;
}

.cart-line-thumb {
  width: 92px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  background: #161616;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.cart-line-main {
  flex: 1;
  min-width: 0;
}

/* Label | date as a real 2-col grid (display:contents) so flex shrink
   cannot crush “Check-out” / “10 Sept 2026” into narrow wrapping columns. */
.cart-line-stay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 5px;
  margin-top: 8px;
  width: 100%;
  font-size: 0.8rem;
  line-height: 1.35;
}

.cart-line-date {
  display: contents;
}

.cart-line-date span {
  color: var(--apsara-text-muted);
  white-space: nowrap;
}

.cart-line-date strong {
  font-weight: 600;
  color: var(--apsara-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  justify-self: start;
}

.cart-line-aside {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
  padding-top: 1px;
}

.upsell-card-title,
.cart-line-title {
  font-weight: 600;
  color: var(--apsara-text);
  font-size: 0.95rem;
}

.upsell-card-sub,
.cart-line-meta {
  font-size: 0.75rem;
  color: var(--apsara-text-muted);
  margin-top: 2px;
}

.cart-line-price {
  color: var(--apsara-primary);
  font-weight: 600;
  white-space: nowrap;
}

.cart-line-remove {
  border: none;
  background: transparent;
  color: var(--apsara-text-faint);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px 8px;
  line-height: 1;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 8px 0 18px;
  font-size: 1.05rem;
}

.cart-total-row strong {
  color: var(--apsara-primary);
  font-size: 1.25rem;
}

.cart-empty {
  color: var(--apsara-text-muted);
  font-size: 0.9rem;
  margin: 12px 0 20px;
  line-height: 1.45;
}

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.cart-actions .btn-outline,
.cart-continue-btn {
  width: 100%;
  padding: 14px 24px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Cart tab: pin CTAs above the bottom nav; stop the empty mid-gap. */
#screen-cart.active > .wizard-body.cart-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#screen-cart.active > .wizard-body.cart-body > .cart-list {
  flex: 0 0 auto;
}

#screen-cart.active > .wizard-body.cart-body > .cart-actions {
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 4px;
}

/* Tour/spa stay rows that only render a single <strong> still align cleanly. */
.cart-line-date > strong:only-child {
  grid-column: 1 / -1;
}

.cart-need-room {
  color: var(--apsara-primary);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

/* Spa catalog — flat treatment rows, no hint, category arrows via shell */
#screen-spa .cat-btn,
#screen-tours .cat-btn,
body.shell-app #screen-spa .cat-btn,
body.shell-app #screen-tours .cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--apsara-primary, #B8924A);
  color: var(--apsara-primary, #B8924A);
  border-radius: var(--lotus-radius-pill, 999px);
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#screen-spa .cat-btn-icon,
#screen-tours .cat-btn-icon,
body.shell-app #screen-spa .cat-btn-icon,
body.shell-app #screen-tours .cat-btn-icon {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  border-radius: 0;
  color: inherit;
}

#screen-spa .cat-btn .app-icon,
#screen-tours .cat-btn .app-icon,
#screen-spa .cat-btn.active .app-icon,
#screen-tours .cat-btn.active .app-icon,
body.shell-app #screen-spa .cat-btn.active .app-icon,
body.shell-app #screen-tours .cat-btn.active .app-icon {
  color: inherit;
  background: none;
  border-radius: 0;
  padding: 0;
}

#screen-spa .cat-btn:hover,
#screen-tours .cat-btn:hover,
#screen-spa .cat-btn.active,
#screen-tours .cat-btn.active,
body.shell-app #screen-spa .cat-btn:hover,
body.shell-app #screen-tours .cat-btn:hover,
body.shell-app #screen-spa .cat-btn.active,
body.shell-app #screen-tours .cat-btn.active {
  background: var(--apsara-primary, #B8924A);
  border-color: var(--apsara-primary, #B8924A);
  color: #0D0D0D;
  font-weight: 600;
}

#screen-spa:not(.cv-schedule-step) .cv-items-hint,
#screen-spa:not(.cv-schedule-step) .items-hint {
  display: none !important;
}

#screen-spa .item-card,
body.in-iframe #screen-spa .item-card,
html[data-surface="web"] body.shell-app #screen-spa .item-card,
html[data-surface="browser"] body.shell-app #screen-spa .item-card {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 4px !important;
}

#screen-spa .item-card:last-child {
  border-bottom: none !important;
}

#screen-spa .item-info {
  min-width: 0 !important;
}

#screen-spa .item-info h3,
#screen-spa .item-info .meta,
#screen-spa .item-info .price {
  display: block;
  max-width: 100%;
}

#screen-spa .item-image-btn {
  border-radius: 8px;
  width: 104px !important;
  height: 78px !important;
  flex-shrink: 0 !important;
}

/* Spa schedule step — dedicated “when” screen, not a nested card */
.cv-appointment-panel[hidden] {
  display: none !important;
}

#screen-spa.cv-schedule-step .cv-items-hint,
#screen-spa.cv-schedule-step .items-hint {
  display: none !important;
}

#screen-spa.cv-schedule-step .flow-hero,
#screen-spa.cv-schedule-step .flow-hero-img {
  flex-shrink: 0;
}

#screen-spa.cv-schedule-step .cv-appointment-panel,
#screen-spa.cv-schedule-step .appointment-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 4px 20px 0 !important;
  padding: 12px 0 8px !important;
}

#screen-spa.cv-schedule-step .cv-appointment-summary {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--apsara-primary, #B8924A);
}

#screen-spa.cv-schedule-step .cv-appointment-title,
#screen-spa.cv-schedule-step .appointment-title {
  flex-shrink: 0;
  margin: 0;
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: #fff;
}

#screen-spa.cv-schedule-step .cv-appointment-lede {
  flex-shrink: 0;
  margin: 0 0 8px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.48);
}

#screen-spa.cv-schedule-step .appointment-fields {
  flex-shrink: 0;
  grid-template-columns: 1fr;
  gap: 16px;
}

#screen-spa.cv-schedule-step .appointment-field input,
#screen-spa.cv-schedule-step .appointment-field select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 10px !important;
  font-size: 1.05rem !important;
}

#screen-spa.cv-schedule-step .appointment-field.is-chip-driven select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#screen-spa.cv-schedule-step .cv-time-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  margin: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

#screen-spa.cv-schedule-step .cv-cart-bar,
#screen-spa.cv-schedule-step .cart-bar {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

#screen-tours .cv-cart-bar,
#screen-tours .cart-bar,
#screen-spa .cv-cart-bar,
#screen-spa .cart-bar,
body.shell-app #screen-tours.catalog-screen.active > .cv-cart-bar,
body.shell-app #screen-spa.catalog-screen.active > .cv-cart-bar,
body.shell-app .shell-screen.catalog-screen.active > .cv-cart-bar,
body.shell-app .shell-screen.catalog-screen.active > .cart-bar {
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

#screen-spa.cv-schedule-step .cv-time-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(184, 146, 74, 0.32);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

#screen-spa.cv-schedule-step .cv-time-chip.is-selected {
  background: #B8924A;
  border-color: #B8924A;
  color: #0D0D0D;
}



/* Tours — same deferred schedule UX as spa */
#screen-tours:not(.cv-schedule-step) .cv-items-hint,
#screen-tours:not(.cv-schedule-step) .items-hint {
  display: none !important;
}

#screen-tours.cv-schedule-step .cv-items-hint,
#screen-tours.cv-schedule-step .items-hint {
  display: none !important;
}

#screen-tours.cv-schedule-step .cv-appointment-panel,
#screen-tours.cv-schedule-step .appointment-panel {
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 8px 16px 12px !important;
  padding: 8px 0 0 !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto;
}

#screen-tours.cv-schedule-step .cv-appointment-title,
#screen-tours.cv-schedule-step .appointment-title {
  flex-shrink: 0;
  margin: 0;
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: #fff;
}

#screen-tours.cv-schedule-step .cv-appointment-lede {
  flex-shrink: 0;
  margin: 4px 0 8px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.48);
}

#screen-tours.cv-schedule-step .tour-date-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

#screen-tours.cv-schedule-step .tour-date-row {
  gap: 4px;
  margin-bottom: 0;
}

#screen-tours.cv-schedule-step .tour-date-name {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

#screen-tours.cv-schedule-step .tour-date-sched {
  color: var(--apsara-primary, #B8924A);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

#screen-tours.cv-schedule-step .tour-date-conflict {
  margin: 10px 0 0;
  color: #e8a0a0;
  font-size: 0.8rem;
  line-height: 1.4;
}

#screen-tours.cv-schedule-step .tour-date-row.is-conflict .tour-date-input {
  border-bottom-color: #c45c5c !important;
}

#screen-tours.cv-schedule-step .tour-date-input {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  display: block;
  width: 100%;
  min-height: 48px;
  color: #fff !important;
  color-scheme: dark;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 0 !important;
  padding: 10px 0 12px !important;
  font-size: 1rem !important;
}

#screen-tours.cv-schedule-step .tour-date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

#screen-tours.cv-schedule-step .cv-date-chip {
  appearance: none;
  border: 1px solid rgba(184, 146, 74, 0.35);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  min-height: 42px;
}

#screen-tours.cv-schedule-step .cv-date-chip.is-selected {
  background: #B8924A;
  border-color: #B8924A;
  color: #0D0D0D;
}

#screen-tours.cv-schedule-step .tour-date-other {
  margin-top: 4px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


#screen-tours.cv-schedule-step .appointment-fields,
#screen-tours .appointment-fields--date-only {
  display: none !important;
}

#screen-tours.cv-schedule-step .appointment-field input,
#screen-tours.cv-schedule-step .appointment-field select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 10px !important;
}

#screen-tours .item-card,
body.in-iframe #screen-tours .item-card,
html[data-surface="web"] body.shell-app #screen-tours .item-card,
html[data-surface="browser"] body.shell-app #screen-tours .item-card {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 4px !important;
}

#screen-tours .item-card:last-child {
  border-bottom: none !important;
}

#screen-tours .item-info {
  min-width: 0 !important;
}

/* Offers — featured card + full-width one-at-a-time carousel */
#screen-offers .offers-home {
  flex: 1 1 0;
  min-height: 0;
  padding: 10px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

#screen-offers .offers-home > .card-hero {
  position: relative;
  flex: 0 0 auto;
  height: clamp(168px, 26dvh, 220px);
  min-height: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  align-self: stretch;
  border-radius: var(--apsara-radius-sm);
  border: 1px solid var(--apsara-border);
  overflow: hidden;
}

#screen-offers .offers-home .card-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

#screen-offers .offers-carousel {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  display: block;
}

#screen-offers .offers-track {
  display: flex;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 160px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--apsara-radius-sm);
  border: 1px solid var(--apsara-border);
  background: var(--apsara-bg-card, #121212);
  touch-action: pan-x;
  box-sizing: border-box;
}

#screen-offers .offers-track::-webkit-scrollbar { display: none; }

#screen-offers .offers-track .card-sm {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

#screen-offers .offers-track .card-sm-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

#screen-offers .offers-track .card-sm-body {
  padding: 16px 18px 20px;
}

#screen-offers .offers-track .card-sm-title {
  font-size: clamp(22px, 6.2vw, 30px);
  font-weight: 600;
  line-height: 1.15;
}

#screen-offers .offers-track .card-sm-sub {
  font-size: clamp(13px, 3.6vw, 16px);
  letter-spacing: 0.05em;
  margin-top: 6px;
}

#screen-offers .offers-carousel .carousel-arrow {
  width: 34px;
  height: 34px;
  z-index: 12;
}

#screen-offers .offers-carousel .carousel-arrow-prev { left: 6px; }
#screen-offers .offers-carousel .carousel-arrow-next { right: 6px; }

#screen-offers .offers-carousel .carousel-arrow-icon {
  width: 16px;
  height: 16px;
}

.khqr-demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 8px 0 18px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.28);
}
.khqr-demo-qr {
  width: 196px;
  height: 196px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  box-sizing: content-box;
}
.khqr-demo-qr img,
.khqr-demo-qr canvas {
  display: block;
  width: 196px !important;
  height: 196px !important;
}
.khqr-demo-meta {
  text-align: center;
}
.khqr-demo-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.khqr-demo-sub {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--apsara-text-muted, rgba(255,255,255,0.55));
  line-height: 1.4;
}
.messages-compose .btn-primary,
#messages-send.btn-primary {
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  max-width: none;
}

/* Chat in phone overlay: keep compose + nav visible; hero matches other flow screens. */
#screen-messages .flow-hero-img,
#screen-room-issues .flow-hero-img {
  object-position: center 28%;
}

body.shell-app #screen-messages.active,
body.shell-app #screen-room-issues.active {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body.shell-app #screen-messages .messages-body,
body.shell-app #screen-room-issues .messages-body {
  flex: 1 1 0;
  min-height: 0;
}

body.shell-app #screen-messages .messages-footer,
body.shell-app #screen-room-issues .messages-footer {
  flex-shrink: 0;
  margin-bottom: 0 !important;
}

body.shell-app #screen-messages .messages-footer.compose-pinned,
body.shell-app #screen-room-issues .messages-footer.compose-pinned {
  position: relative;
  bottom: auto;
  transform: none;
}

/* Hub in the website phone overlay: nav stays in flow; cards keep real heights. */
body.in-iframe.shell-app #screen-hub.active.has-bottom-nav,
html[data-surface="web"] body.shell-app #screen-hub.active.has-bottom-nav,
html[data-surface="iframe"] body.shell-app #screen-hub.active.has-bottom-nav {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.in-iframe.shell-app #app-bottom-nav:not([hidden]),
html[data-surface="web"] body.shell-app #app-bottom-nav:not([hidden]),
html[data-surface="iframe"] body.shell-app #app-bottom-nav:not([hidden]),
html[data-surface="browser"] body.shell-app #app-bottom-nav:not([hidden]) {
  position: relative !important;
  bottom: auto !important;
  z-index: 60 !important;
  overflow: visible !important;
  background: #000 !important;
}

body.in-iframe.shell-app .nav-chat-primary .chat-circle,
html[data-surface="web"] body.shell-app .nav-chat-primary .chat-circle,
html[data-surface="iframe"] body.shell-app .nav-chat-primary .chat-circle {
  width: 36px !important;
  height: 36px !important;
  margin-top: -8px;
}

body.in-iframe.shell-app .nav-chat-primary .chat-circle .nav-icon,
body.in-iframe.shell-app .nav-chat-primary .chat-circle .app-icon,
body.in-iframe.shell-app .nav-chat-primary .chat-circle svg,
html[data-surface="web"] body.shell-app .nav-chat-primary .chat-circle .nav-icon,
html[data-surface="iframe"] body.shell-app .nav-chat-primary .chat-circle .nav-icon,
html[data-surface="web"] body.shell-app .nav-chat-primary .chat-circle svg,
html[data-surface="iframe"] body.shell-app .nav-chat-primary .chat-circle svg {
  width: 22px !important;
  height: 22px !important;
  fill: #111 !important;
  stroke: none !important;
}

/* Hotel Info: never squash photo cards into unlabeled strips. */
body.shell-app #screen-info.active > .info-list,
body.in-iframe.shell-app #screen-info.active > .info-list,
html[data-surface="web"] body.shell-app #screen-info.active > .info-list,
html[data-surface="iframe"] body.shell-app #screen-info.active > .info-list {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  align-content: start !important;
  grid-auto-rows: unset !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  gap: 0 !important;
}

body.shell-app #screen-info .info-card,
body.in-iframe.shell-app #screen-info .info-card,
html[data-surface="web"] body.shell-app #screen-info .info-card,
html[data-surface="iframe"] body.shell-app #screen-info .info-card {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 16px 0 !important;
  box-shadow: none !important;
}

body.shell-app #screen-info .info-card:last-child,
body.in-iframe.shell-app #screen-info .info-card:last-child,
html[data-surface="web"] body.shell-app #screen-info .info-card:last-child,
html[data-surface="iframe"] body.shell-app #screen-info .info-card:last-child {
  border-bottom: none !important;
}

body.shell-app #screen-info .info-card-img,
body.in-iframe.shell-app #screen-info .info-card-img,
html[data-surface="web"] body.shell-app #screen-info .info-card-img,
html[data-surface="iframe"] body.shell-app #screen-info .info-card-img {
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  flex: 0 0 140px !important;
  object-fit: cover !important;
}

body.shell-app #screen-amenities.active > .gallery-list,
body.in-iframe.shell-app #screen-amenities.active > .gallery-list,
html[data-surface="web"] body.shell-app #screen-amenities.active > .gallery-list,
html[data-surface="iframe"] body.shell-app #screen-amenities.active > .gallery-list {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  gap: 0 !important;
  padding: 4px 20px 28px !important;
}

body.shell-app #screen-amenities .amenity-card,
body.in-iframe.shell-app #screen-amenities .amenity-card,
html[data-surface="web"] body.shell-app #screen-amenities .amenity-card,
html[data-surface="iframe"] body.shell-app #screen-amenities .amenity-card {
  flex: 0 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 16px 0 !important;
  box-shadow: none !important;
}

body.shell-app #screen-amenities .amenity-card:last-child,
body.in-iframe.shell-app #screen-amenities .amenity-card:last-child,
html[data-surface="web"] body.shell-app #screen-amenities .amenity-card:last-child,
html[data-surface="iframe"] body.shell-app #screen-amenities .amenity-card:last-child {
  border-bottom: none !important;
}

body.shell-app #screen-amenities .amenity-card img,
body.in-iframe.shell-app #screen-amenities .amenity-card img,
html[data-surface="web"] body.shell-app #screen-amenities .amenity-card img,
html[data-surface="iframe"] body.shell-app #screen-amenities .amenity-card img {
  width: 100% !important;
  height: 120px !important;
  border-radius: var(--apsara-radius-sm) !important;
  object-fit: cover !important;
}

body.shell-app #screen-rooms.active > .gallery-list:not(.is-room-detail),
body.in-iframe.shell-app #screen-rooms.active > .gallery-list:not(.is-room-detail),
html[data-surface="web"] body.shell-app #screen-rooms.active > .gallery-list:not(.is-room-detail),
html[data-surface="iframe"] body.shell-app #screen-rooms.active > .gallery-list:not(.is-room-detail) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  gap: 12px !important;
  padding: 12px 16px 24px !important;
}

body.shell-app #screen-rooms .gallery-list:not(.is-room-detail) .room-pick-card,
body.in-iframe.shell-app #screen-rooms .gallery-list:not(.is-room-detail) .room-pick-card,
html[data-surface="web"] body.shell-app #screen-rooms .gallery-list:not(.is-room-detail) .room-pick-card,
html[data-surface="iframe"] body.shell-app #screen-rooms .gallery-list:not(.is-room-detail) .room-pick-card {
  flex: 0 0 auto !important;
  padding: 0 0 16px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.shell-app #screen-rooms .gallery-list:not(.is-room-detail) .room-carousel-viewport,
body.in-iframe.shell-app #screen-rooms .gallery-list:not(.is-room-detail) .room-carousel-viewport,
html[data-surface="web"] body.shell-app #screen-rooms .gallery-list:not(.is-room-detail) .room-carousel-viewport,
html[data-surface="iframe"] body.shell-app #screen-rooms .gallery-list:not(.is-room-detail) .room-carousel-viewport {
  height: 140px !important;
  border-radius: var(--apsara-radius-sm) !important;
}

/* Chat screens (My Chat + Room Issues) — same hero type; gold-border bubbles, gold Send */
#screen-messages .flow-hero-content .card-hero-title,
#screen-room-issues .flow-hero-content .card-hero-title {
  font-family: var(--apsara-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}
#screen-messages .msg-bubble.msg-welcome,
#screen-messages .msg-bubble.msg-concierge,
#screen-room-issues .msg-bubble.msg-welcome,
#screen-room-issues .msg-bubble.msg-concierge {
  background: #0a0a0a;
  border: 1px solid rgba(184, 146, 74, 0.48);
  border-radius: 12px;
  max-width: 92%;
  padding: 12px 14px;
  overflow: visible;
}
#screen-messages .msg-meta,
#screen-messages .msg-dept,
#screen-messages .msg-dept-icon,
#screen-room-issues .msg-meta,
#screen-room-issues .msg-dept,
#screen-room-issues .msg-dept-icon {
  overflow: visible;
}
#screen-messages .msg-bubble.msg-welcome .msg-text,
#screen-messages .msg-bubble.msg-concierge .msg-text,
#screen-room-issues .msg-bubble.msg-welcome .msg-text,
#screen-room-issues .msg-bubble.msg-concierge .msg-text {
  color: #f5f5f5;
  font-size: 0.92rem;
  line-height: 1.45;
}
#screen-messages .messages-thread-hint,
#screen-room-issues .messages-thread-hint {
  margin: 2px 4px 0;
  padding: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.38);
  align-self: flex-start;
  max-width: 92%;
}
#screen-messages .messages-body,
#screen-messages .messages-thread,
#screen-room-issues .messages-body,
#screen-room-issues .messages-thread {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
#screen-messages .messages-footer,
#screen-room-issues .messages-footer {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  background: #000;
}
#screen-messages .messages-compose,
#screen-room-issues .messages-compose {
  background: #000;
}
#screen-messages .messages-compose input,
#screen-room-issues .messages-compose input {
  border-radius: 12px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
#screen-messages .messages-compose input:focus,
#screen-room-issues .messages-compose input:focus {
  outline: none;
  border-color: rgba(184, 146, 74, 0.45);
  box-shadow: none;
}
#screen-messages .msg-chat-btn,
#screen-room-issues .msg-chat-btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
  background: #c4a05a;
  border: 0;
  color: #111;
  font-weight: 700;
}
#screen-messages .msg-chat-btn-secondary,
#screen-messages .msg-chat-btn-default,
#screen-room-issues .msg-chat-btn-secondary,
#screen-room-issues .msg-chat-btn-default {
  background: rgba(196, 160, 90, 0.18);
  border: 1px solid rgba(196, 160, 90, 0.55);
  color: #e8d5a3;
}
#screen-messages #messages-send.btn-primary,
#screen-room-issues #room-issues-send.btn-primary {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, #d4b56a 0%, #c4a05a 46%, #b8924a 100%);
  color: #111;
  font-weight: 700;
  min-width: 76px;
  box-shadow: 0 4px 14px rgba(184, 146, 74, 0.28);
}
body.in-iframe #screen-messages .flow-hero-content .card-hero-title,
html[data-surface="iframe"] #screen-messages .flow-hero-content .card-hero-title,
html[data-surface="web"] #screen-messages .flow-hero-content .card-hero-title,
body.in-iframe #screen-room-issues .flow-hero-content .card-hero-title,
html[data-surface="iframe"] #screen-room-issues .flow-hero-content .card-hero-title,
html[data-surface="web"] #screen-room-issues .flow-hero-content .card-hero-title {
  font-size: 26px;
}

/* Chat card docks to the bottom nav — one black block, gold FAB on the seam.
   Hub fills the space ABOVE the in-flow nav. Chat grows into leftover height
   so there is no black gap above Chat or below the nav. */
#screen-hub.active.has-bottom-nav {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

#screen-hub.has-bottom-nav > .built-by-lotus,
#screen-hub.active.has-bottom-nav > .built-by-lotus,
body.in-iframe.shell-app #screen-hub.active.has-bottom-nav .built-by-lotus {
  display: none !important;
}

#screen-hub.has-bottom-nav > #hub-chat-dock {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  z-index: 8;
  transform: none !important;
  box-shadow: none !important;
}

#screen-hub.has-bottom-nav > #hub-chat-dock:hover,
#screen-hub.has-bottom-nav > #hub-chat-dock:active {
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

#screen-hub.has-bottom-nav > #hub-chat-dock .card-support-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: right 38%;
}

#screen-hub.has-bottom-nav > #hub-chat-dock .card-support-overlay {
  display: none !important;
}

#screen-hub.has-bottom-nav > #hub-chat-dock .card-support-content {
  padding: clamp(12px, calc(var(--hub-h) * 0.03), 20px)
           clamp(14px, calc(var(--hub-w) * 0.045), 22px)
           clamp(14px, calc(var(--hub-h) * 0.034), 24px);
}

#screen-hub.has-bottom-nav > #hub-chat-dock .card-support-sub {
  display: none;
}

#screen-hub.has-bottom-nav .hub-footer {
  display: none !important;
}

body.shell-app.has-bottom-nav #app-bottom-nav:not([hidden]),
body.in-iframe.shell-app #app-bottom-nav:not([hidden]),
html[data-surface="iframe"] body.shell-app #app-bottom-nav:not([hidden]),
html[data-surface="web"] body.shell-app #app-bottom-nav:not([hidden]) {
  border-top: 0 !important;
  margin-top: 0;
  box-shadow: none !important;
  background: #000 !important;
}

body.shell-app.has-bottom-nav .nav-chat-primary .chat-circle,
body.in-iframe.shell-app .nav-chat-primary .chat-circle,
html[data-surface="iframe"] body.shell-app .nav-chat-primary .chat-circle,
html[data-surface="web"] body.shell-app .nav-chat-primary .chat-circle {
  margin-top: -16px;
}

/* Telegram hub: grow Book Room into leftover height so Chat sits under the carousel,
   and fill the <picture> so Android's grey button chrome cannot show. */
#screen-hub.has-bottom-nav .home-content > .card-hero picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#screen-hub.has-bottom-nav .home-content > .card-hero .card-hero-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 40%;
}

html[data-surface="telegram"] #screen-hub.has-bottom-nav .home-content > .card-hero {
  background: #0a0a0a;
}

/* Telegram hub — slim centered wordmark; fullscreen overlays Telegram chrome band */
html[data-surface="telegram"] #screen-hub .hub-header {
  position: relative;
  display: block;
  flex-shrink: 0;
  min-height: 0;
  padding: 2px 56px 4px;
  border: 0;
  background: transparent;
}

html[data-surface="telegram"] #screen-hub .hub-header-start,
html[data-surface="telegram"] #screen-hub .hub-header-end {
  display: none;
}

html[data-surface="telegram"] #screen-hub .hub-header .hub-brand {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto;
  text-align: center;
  justify-self: unset;
  align-self: unset;
  grid-column: 1 / -1;
  grid-row: 1;
  /* Phone Telegram chrome eats ~56px/side — keep wordmark fully readable (no LOTUS BOUTIQ…). */
  font-size: clamp(1.28rem, calc(var(--hub-w) * 0.052), 1.62rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-surface="telegram"] body.tg-compact-chrome #screen-hub .hub-header {
  padding-top: 0;
  padding-bottom: 2px;
}

html[data-surface="telegram"] body.tg-compact-chrome #screen-hub.active.has-bottom-nav .hub-header {
  padding-top: 0;
  padding-bottom: 2px;
  padding-left: 56px;
  padding-right: 56px;
}

html[data-surface="telegram"] body.tg-fullscreen #screen-hub .hub-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  padding-top: calc(var(--tg-content-top, 0px) + 2px);
  padding-bottom: 4px;
  padding-left: max(56px, calc(12px + var(--tg-safe-left, 0px)));
  padding-right: max(56px, calc(12px + var(--tg-safe-right, 0px)));
  pointer-events: none;
}

html[data-surface="telegram"] body.tg-fullscreen #screen-hub .hub-header .hub-brand {
  font-size: clamp(1.28rem, calc(var(--hub-w) * 0.052), 1.62rem);
  letter-spacing: 0.04em;
}

html[data-surface="telegram"] #screen-hub.active.has-bottom-nav .hub-header .hub-brand,
html[data-surface="telegram"] #screen-hub.has-bottom-nav .hub-header .hub-brand {
  font-size: clamp(1.28rem, calc(var(--hub-w) * 0.052), 1.62rem) !important;
  letter-spacing: 0.04em !important;
}

html[data-surface="telegram"] body.tg-fullscreen #screen-hub.has-bottom-nav .home-content.hub-main {
  padding-top: 2px !important;
}

/* Web / browser / iframe preview: same grow model as Telegram.
   Nav stays in document flow so it pins to the real bottom. */
html[data-surface="web"] body.shell-app,
html[data-surface="browser"] body.shell-app,
html[data-surface="iframe"] body.shell-app,
body.in-iframe.shell-app {
  position: relative;
  overflow: hidden;
}

body.in-iframe.shell-app #app-bottom-nav:not([hidden]),
html[data-surface="web"] body.shell-app #app-bottom-nav:not([hidden]),
html[data-surface="iframe"] body.shell-app #app-bottom-nav:not([hidden]),
html[data-surface="browser"] body.shell-app #app-bottom-nav:not([hidden]) {
  position: relative !important;
  left: auto;
  right: auto;
  bottom: auto !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-bottom: 4px !important;
}

/* ============================================================
   HUB LAYOUT CONTRACT — one model for every surface and device
   ------------------------------------------------------------
   The hub is a flex column: header (auto) · hero · carousel · Chat,
   with the bottom nav as an in-flow sibling. Rows are sized by
   flex-grow ratios of the real column height, never by fixed dvh
   clamps, so Telegram compact, Telegram fullscreen, the demo
   iframe and any browser width/height all divide the same space.
   Only --hub-row-* below should be tuned; adding per-surface
   heights re-creates the black-gap and clipped-card bugs.
   ============================================================ */
#screen-hub.has-bottom-nav,
#screen-hub.active.has-bottom-nav {
  --hub-card-aspect: 4 / 3;
  --hub-w: 100vw;
  --hub-h: var(--app-viewport-height, 100dvh);
  --hub-gap: clamp(6px, calc(var(--hub-h) * 0.014), 12px);
  --hub-pad-x: clamp(10px, calc(var(--hub-w) * 0.034), 18px);
  --hub-peek: clamp(40px, 18cqi, 72px);
  gap: var(--hub-gap);
  padding-left: 0;
  padding-right: 0;
}

@supports (container-type: inline-size) {
  #screen-hub.has-bottom-nav,
  #screen-hub.active.has-bottom-nav {
    container-type: inline-size;
    --hub-w: 100cqw;
  }
}

/* Unwrap the wrapper so Book Room and Chat are siblings and can share
   leftover height 1:1. Carousel stays auto-sized between them. */
#screen-hub.active.has-bottom-nav .home-content.hub-main {
  display: contents !important;
  padding: 0 !important;
}

#screen-hub.has-bottom-nav .home-content > .card-hero,
#screen-hub.has-bottom-nav > #hub-chat-dock {
  flex: 1 1 0 !important;
  min-height: 88px !important;
  max-height: none !important;
}

/* Book Room stays edge-to-edge. Chat + carousel share one explicit width. */
#screen-hub.has-bottom-nav .home-content > .card-hero,
#screen-hub.active.has-bottom-nav .home-content > .card-hero {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
}

#screen-hub.has-bottom-nav .home-content > .cards-carousel {
  position: relative;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: calc(100% - 2 * var(--hub-pad-x)) !important;
  max-width: calc(100% - 2 * var(--hub-pad-x)) !important;
  margin-left: var(--hub-pad-x) !important;
  margin-right: var(--hub-pad-x) !important;
  align-self: flex-start !important;
  box-sizing: border-box !important;
  container-type: inline-size;
  overflow: hidden !important;
}

#screen-hub.has-bottom-nav .home-content > .cards-carousel::-webkit-scrollbar {
  display: none;
}

#screen-hub.has-bottom-nav .cards-track {
  height: auto !important;
  align-items: stretch !important;
  gap: var(--hub-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x !important;
  scroll-padding-left: 0 !important;
}

#screen-hub.has-bottom-nav .cards-track::-webkit-scrollbar {
  display: none;
}

/* Two cards plus a peek of the third — Chat stays full-bleed; carousel is inset. */
#screen-hub.has-bottom-nav .card-sm {
  flex: 0 0 calc((100cqi - var(--hub-gap) - var(--hub-peek)) / 2) !important;
  aspect-ratio: var(--hub-card-aspect) !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
}

#screen-hub.has-bottom-nav .card-sm picture {
  display: block;
  width: 100%;
  height: 100%;
}

#screen-hub.has-bottom-nav .card-sm-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#screen-hub.has-bottom-nav .cards-carousel::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(16px, 5cqi, 28px);
  background: linear-gradient(90deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.55) 100%);
  pointer-events: none;
  z-index: 4;
}

#screen-hub.has-bottom-nav .carousel-arrow {
  display: flex;
  background: #000;
  border-color: rgba(184, 146, 74, 0.55);
}

#screen-hub.has-bottom-nav .carousel-arrow[hidden] {
  display: none !important;
}

/* Telegram hub carousel — visible arrows + peek of next card. */
html[data-surface="telegram"] #screen-hub.has-bottom-nav .home-content > .cards-carousel,
body.tg-app.shell-app #screen-hub.has-bottom-nav .home-content > .cards-carousel {
  overflow: visible !important;
}

html[data-surface="telegram"] #screen-hub.has-bottom-nav .cards-track,
body.tg-app.shell-app #screen-hub.has-bottom-nav .cards-track {
  display: flex !important;
  flex-wrap: nowrap !important;
}

html[data-surface="telegram"] #screen-hub.has-bottom-nav .card-sm,
body.tg-app.shell-app #screen-hub.has-bottom-nav .card-sm {
  flex: 0 0 calc((100cqi - var(--hub-gap) - var(--hub-peek)) / 2) !important;
}

html[data-surface="telegram"] #screen-hub.has-bottom-nav .carousel-arrow,
body.tg-app.shell-app #screen-hub.has-bottom-nav .carousel-arrow {
  width: 32px;
  height: 32px;
  z-index: 15;
  background: rgba(13, 13, 13, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(184, 146, 74, 0.8);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

html[data-surface="telegram"] #screen-hub.has-bottom-nav .carousel-arrow-icon,
body.tg-app.shell-app #screen-hub.has-bottom-nav .carousel-arrow-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

html[data-surface="telegram"] #screen-hub.has-bottom-nav .carousel-arrow-prev,
body.tg-app.shell-app #screen-hub.has-bottom-nav .carousel-arrow-prev {
  left: 2px;
}

html[data-surface="telegram"] #screen-hub.has-bottom-nav .carousel-arrow-next,
body.tg-app.shell-app #screen-hub.has-bottom-nav .carousel-arrow-next {
  right: 2px;
}

#screen-hub.has-bottom-nav > #hub-chat-dock {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

#screen-hub.has-bottom-nav > #hub-chat-dock .card-support-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

/* Type scales with the column, so nothing overflows a short phone
   and nothing looks undersized on a tall one. */
#screen-hub.has-bottom-nav > #hub-chat-dock .card-support-title {
  font-family: 'Instrument Sans', var(--apsara-font-body), sans-serif;
  font-weight: 600;
  font-size: clamp(20px, calc(var(--hub-w) * 0.064), 30px);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 8px #000, 0 2px 18px #000;
}

#screen-hub.has-bottom-nav .card-hero-title {
  font-size: clamp(19px, calc(var(--hub-w) * 0.06), 28px);
}

/* Pre-arrival home only: drop gold carousel lines, enlarge white titles. */
html.prearrival-app #screen-hub .cards-track .card-sm-sub {
  display: none !important;
}

html.prearrival-app #screen-hub.has-bottom-nav .card-hero-title {
  font-size: clamp(26px, calc(var(--hub-w) * 0.078), 36px);
}

html.prearrival-app #screen-hub.has-bottom-nav .card-sm-title {
  font-size: clamp(16px, calc(var(--hub-w) * 0.048), 20px);
  line-height: 1.15;
}

html.prearrival-app #screen-hub.has-bottom-nav > #hub-chat-dock .card-support-title {
  font-size: clamp(26px, calc(var(--hub-w) * 0.078), 36px);
}

/* Home Book Room only: larger gold subline + Book Now. */
html.prearrival-app #screen-hub.has-bottom-nav .card-hero-sub {
  font-size: clamp(13px, calc(var(--hub-w) * 0.038), 16px);
  letter-spacing: 0.06em;
  margin-top: 5px;
}

html.prearrival-app #screen-hub.has-bottom-nav .card-hero-cta {
  font-size: clamp(12px, calc(var(--hub-w) * 0.034), 14px);
  margin-top: clamp(8px, calc(var(--hub-h) * 0.016), 12px);
  padding: clamp(7px, calc(var(--hub-h) * 0.014), 10px) clamp(14px, calc(var(--hub-w) * 0.042), 18px);
}

#screen-hub.has-bottom-nav .card-hero-sub {
  font-size: clamp(9.5px, calc(var(--hub-w) * 0.026), 12px);
  color: #E8C97A;
  font-weight: 600;
  text-shadow: 0 1px 2px #000, 0 0 8px #000, 0 2px 14px #000;
}

#screen-hub.has-bottom-nav .card-hero-content {
  padding: clamp(8px, calc(var(--hub-h) * 0.022), 16px)
           clamp(12px, calc(var(--hub-w) * 0.04), 18px)
           clamp(10px, calc(var(--hub-h) * 0.024), 18px);
}

#screen-hub.has-bottom-nav .card-hero-cta {
  margin-top: clamp(4px, calc(var(--hub-h) * 0.012), 10px);
  padding: clamp(4px, calc(var(--hub-h) * 0.01), 6px) clamp(10px, calc(var(--hub-w) * 0.032), 14px);
}

#screen-hub.has-bottom-nav .card-sm-title {
  font-size: clamp(11px, calc(var(--hub-w) * 0.032), 14px);
}

#screen-hub.has-bottom-nav .card-sm-sub {
  font-size: clamp(7.5px, calc(var(--hub-w) * 0.021), 9px);
}

/* Header: shrink-to-fit band, brand scales with the viewport height. */
#screen-hub.has-bottom-nav .hub-header {
  flex: 0 0 auto !important;
  grid-template-rows: minmax(clamp(34px, 6vh, 48px), auto) !important;
}

#screen-hub.has-bottom-nav .hub-header .hub-brand {
  height: auto !important;
  font-size: clamp(1.12rem, calc(var(--hub-w) * 0.048), 1.5rem);
  letter-spacing: 0.07em;
  font-weight: 500;
}

/* Book Room photo runs under the wordmark. Header is an overlay, not a band. */
#screen-hub.active.has-bottom-nav {
  position: relative;
}

#screen-hub.active.has-bottom-nav .hub-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
  padding-top: calc(8px + var(--tg-content-top, 0px)) !important;
  padding-bottom: 8px !important;
}

#screen-hub.active.has-bottom-nav .hub-header .hub-brand {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 0, 0, 0.45);
}

html[data-surface="telegram"] #screen-hub.active.has-bottom-nav .hub-header {
  padding-left: 56px !important;
  padding-right: 56px !important;
}

/* Pre-arrival Telegram: Lotus Boutique sits below status + Close (not in the notch). */
html.prearrival-app[data-surface="telegram"] body.tg-fullscreen #screen-hub.active.has-bottom-nav .hub-header,
html.prearrival-app body.tg-app.tg-fullscreen #screen-hub.active.has-bottom-nav .hub-header {
  padding-top: calc(8px + max(100px, var(--tg-content-top, 0px))) !important;
}

html.prearrival-app[data-surface="telegram"] body.tg-fullscreen #screen-hub .hub-header,
html.prearrival-app body.tg-app.tg-fullscreen #screen-hub .hub-header {
  padding-top: calc(8px + max(100px, var(--tg-content-top, 0px))) !important;
}

/* Pre-arrival Telegram only: slightly larger wordmark. */
html.prearrival-app[data-surface="telegram"] #screen-hub .hub-header .hub-brand,
html.prearrival-app[data-surface="telegram"] body.tg-fullscreen #screen-hub .hub-header .hub-brand,
html.prearrival-app[data-surface="telegram"] #screen-hub.active.has-bottom-nav .hub-header .hub-brand,
html.prearrival-app[data-surface="telegram"] #screen-hub.has-bottom-nav .hub-header .hub-brand,
html.prearrival-app body.tg-app #screen-hub .hub-header .hub-brand {
  font-size: clamp(1.42rem, calc(var(--hub-w) * 0.058), 1.78rem) !important;
  letter-spacing: 0.035em !important;
}

#screen-hub.has-bottom-nav .home-content > .card-hero,
#screen-hub.active.has-bottom-nav .home-content > .card-hero {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#screen-hub.has-bottom-nav .home-content > .card-hero:hover,
#screen-hub.has-bottom-nav .home-content > .card-hero:active,
#screen-hub.active.has-bottom-nav .home-content > .card-hero:hover,
#screen-hub.active.has-bottom-nav .home-content > .card-hero:active {
  transform: none;
  box-shadow: none !important;
  border-color: transparent;
}

#screen-hub.has-bottom-nav .home-content > .card-hero picture,
#screen-hub.has-bottom-nav .home-content > .card-hero .card-hero-img,
#screen-hub.has-bottom-nav .home-content > .card-hero .card-hero-overlay,
#screen-hub.has-bottom-nav .home-content > .card-hero .card-hero-content {
  border-radius: 0 !important;
}

#screen-hub.active.has-bottom-nav .home-content > .card-hero .card-hero-overlay {
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.5) 0%, rgba(5, 5, 5, 0.12) 32%, rgba(5, 5, 5, 0.08) 52%, rgba(5, 5, 5, 0.88) 100%);
}

/* Short viewports: overlay wordmark stays; it no longer consumes row height. */
@media (max-height: 480px) {
  #screen-hub.has-bottom-nav,
  #screen-hub.active.has-bottom-nav {
    --hub-gap: 5px;
  }
}

/* Phone Telegram Mini App only — web + Telegram Web stay on the shared hub contract.
   Carousel keeps its own height (near-square cards). Book Room and Chat share
   leftover space so Chat stays fully above the nav. */
@media (max-width: 480px) and (hover: none) {
  html[data-surface="telegram"] body.tg-app #screen-hub.active.has-bottom-nav {
    overflow: hidden !important;
  }

  html[data-surface="telegram"] body.tg-app #screen-hub.has-bottom-nav > .built-by-lotus {
    display: none !important;
  }

  html[data-surface="telegram"] body.tg-app
    #screen-hub.has-bottom-nav .home-content > .card-hero,
  html[data-surface="telegram"] body.tg-app
    #screen-hub.active.has-bottom-nav .home-content > .card-hero,
  html[data-surface="telegram"] body.tg-app
    #screen-hub.has-bottom-nav > #hub-chat-dock,
  html[data-surface="telegram"] body.tg-app
    #screen-hub.active.has-bottom-nav > #hub-chat-dock {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[data-surface="telegram"] body.tg-app
    #screen-hub.has-bottom-nav .home-content > .cards-carousel,
  html[data-surface="telegram"] body.tg-app
    #screen-hub.active.has-bottom-nav .home-content > .cards-carousel {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 168px !important;
    align-self: stretch !important;
  }

  html[data-surface="telegram"] body.tg-app
    #screen-hub.has-bottom-nav .cards-track {
    height: auto !important;
    max-height: 168px !important;
  }

  html[data-surface="telegram"] body.tg-app
    #screen-hub.has-bottom-nav .card-sm {
    height: auto !important;
    max-height: 168px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 calc((100cqi - var(--hub-gap) - var(--hub-peek)) / 2) !important;
  }
}

/* Full-bleed top photo banners — square, edge-to-edge (web + Telegram) */
.lang-hero,
.flow-hero,
.hub-hero,
.hub-hero-card,
#screen-hub.has-bottom-nav .home-content > .card-hero,
#screen-hub.has-bottom-nav > #hub-chat-dock {
  border-radius: 0 !important;
}

.lang-hero,
.flow-hero,
.hub-hero,
.hub-hero-card,
#screen-hub.has-bottom-nav .home-content > .card-hero {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
  border: 0 !important;
  box-shadow: none !important;
}

.lang-hero img,
.lang-hero-img,
.flow-hero-img,
.hub-hero img,
.hub-hero-photo,
#screen-hub.has-bottom-nav .home-content > .card-hero picture,
#screen-hub.has-bottom-nav .home-content > .card-hero .card-hero-img,
#screen-hub.has-bottom-nav .home-content > .card-hero .card-hero-overlay,
#screen-hub.has-bottom-nav .home-content > .card-hero .card-hero-content {
  border-radius: 0 !important;
}

.hotel-offer-popup {
  position: fixed;
  inset: 0;
  z-index: 122;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}

.hotel-offer-popup[hidden] {
  display: none !important;
}

.hotel-offer-popup-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
}

.hotel-offer-popup-panel {
  position: relative;
  width: min(100%, 360px);
  padding: 22px 20px 18px;
  border-radius: 18px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

.hotel-offer-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.hotel-offer-popup-kicker {
  margin: 0 28px 8px 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hotel-offer-popup-copy {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.hotel-offer-popup-panel .btn-primary {
  width: 100%;
}