:root {
      --bg: #f3f5f7;
      --card: rgba(255,255,255,.84);
      --ink: #111827;
      --muted: #5b6573;
      --accent: #45556c;
      --accent2: #748091;
      --accent-soft: rgba(69,85,108,.08);
      --button-soft-bg: rgba(69,85,108,.10);
      --button-soft-bg-hover: rgba(69,85,108,.15);
      --button-soft-border: rgba(69,85,108,.16);
      --button-soft-text: #334155;
      --border: rgba(17,24,39,.08);
      --danger: #d32f2f;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'Open Sans', Arial, sans-serif;
      background: var(--bg);
      color: var(--ink);
      overflow-x: hidden;
    }
    body.modal-open {
      overflow: hidden;
      overscroll-behavior: none;
    }
    main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 18px 14px 42px;
      overflow-x: hidden;
    }
    html.is-self-service-kiosk,
    html[data-initial-access-mode="self-service"] {
      background: #eef2f8;
    }
    html.is-self-service-kiosk main,
    html[data-initial-access-mode="self-service"] main {
      max-width: none;
      margin: 0;
      padding: 0;
      min-height: 100dvh;
    }
    main.main--selfServiceHub {
      max-width: none;
      margin: 0;
      padding: 0;
      min-height: 100dvh;
    }
    .panel {
      background: var(--card);
      border: 1px solid var(--border);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-radius: 22px;
      box-shadow: 0 16px 44px rgba(0,0,0,.10);
      padding: 18px;
    }
    .panel--selfServiceBrowse {
      width: 100%;
      max-width: none;
      min-height: 100dvh;
      margin: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      padding: clamp(18px, 2.8vh, 32px) clamp(18px, 3.5vw, 44px) clamp(18px, 3vh, 32px);
      background: linear-gradient(
        168deg,
        #fafaf8 0%,
        #f2f5f9 34%,
        #eaf0f8 68%,
        #e5edf7 100%
      );
    }
    .panel--selfServiceBrowse .brandTop,
    .panel--selfServiceBrowse .hero,
    .panel--selfServiceBrowse .siteDescription,
    .panel--selfServiceBrowse .welcomeFacade,
    .panel--selfServiceBrowse .contactActions,
    .panel--selfServiceBrowse .landingFooterActions,
    .panel--selfServiceBrowse .roomsViewHeader,
    .panel--selfServiceBrowse .sectionDivider,
    .panel--selfServiceBrowse .landingStaySearch,
    .panel--selfServiceBrowse .landingRoomsMount,
    .panel--selfServiceBrowse .roomsSection,
    .panel--selfServiceBrowse .roomsWrap {
      width: min(100%, 920px);
      margin-left: auto;
      margin-right: auto;
    }
    .panel--selfServiceBrowse .landingFooterActions {
      margin-top: 12px;
      margin-bottom: 4px;
    }
    .panel--selfServiceHub {
      width: 100%;
      min-height: 100dvh;
      margin: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      padding: clamp(18px, 2.8vh, 32px) clamp(18px, 3.5vw, 44px) clamp(14px, 2vh, 24px);
      display: flex;
      flex-direction: column;
      background: linear-gradient(
        168deg,
        #fafaf8 0%,
        #f2f5f9 34%,
        #eaf0f8 68%,
        #e5edf7 100%
      );
    }
    [hidden] {
      display: none !important;
    }
    .hostView {
      min-width: 0;
    }
    .brandTop {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }
    .brandTopMain {
      min-width: 0;
      flex: 1 1 auto;
    }
    .brandTopActions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }
    .publicLangSwitcher {
      position: relative;
    }
    .publicLangToggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(69,85,108,.12);
      background: rgba(255,255,255,.88);
      color: #334155;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
      transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .publicLangToggle:hover {
      background: #fff;
      box-shadow: 0 8px 20px rgba(15,23,42,.08);
    }
    .publicLangToggle[aria-expanded="true"] {
      background: #fff;
      box-shadow: 0 10px 24px rgba(15,23,42,.10);
    }
    .publicLangChevron {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .72;
    }
    .publicLangMenu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 92px;
      padding: 6px;
      border-radius: 14px;
      border: 1px solid rgba(69,85,108,.12);
      background: rgba(255,255,255,.98);
      box-shadow: 0 14px 34px rgba(15,23,42,.12);
      z-index: 30;
    }
    .publicLangOption {
      display: block;
      width: 100%;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #334155;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .05em;
      padding: 10px 12px;
      text-align: left;
      cursor: pointer;
    }
    .publicLangOption:hover,
    .publicLangOption.is-active {
      background: rgba(69,85,108,.08);
      color: #1e293b;
    }
    .brandTop > div {
      min-width: 0;
      flex: 1 1 auto;
    }
    .hero {
      margin-top: 12px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      display: none;
      flex-direction: column;
      background: #eef3f6;
    }
    .heroCarouselInner {
      position: relative;
      width: 100%;
      height: clamp(240px, 38vw, 420px);
      background: #eef3f6;
      touch-action: pan-y;
    }
    html[data-initial-access-mode="public"] .heroCarouselInner {
      height: clamp(152px, 30vw, 240px);
    }
    .hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      cursor: zoom-in;
    }
    .heroNav {
      width: 38px;
      height: 38px;
      border-color: rgba(255,255,255,.46);
      background: rgba(9, 14, 22, .22);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: .92;
      transition: background .18s ease, opacity .18s ease, transform .18s ease;
    }
    .heroNav:hover {
      background: rgba(9, 14, 22, .34);
      opacity: 1;
    }
    .heroSwipeHint {
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(9, 14, 22, .28);
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.94);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      pointer-events: none;
    }
    .heroSwipeHintText {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
      text-transform: uppercase;
    }
    .heroSwipeHintArrow {
      font-size: 14px;
      line-height: 1;
      opacity: .92;
    }
    .title {
      margin: 0;
      font-size: 24px;
      color: var(--ink);
      font-weight: 700;
    }
    .titleMetaRow {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .titleLocation {
      margin: 0;
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(69,85,108,.12);
      background: rgba(255,255,255,.78);
      color: #334155;
      font-size: 15px;
      line-height: 1.35;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
    }
    .titleLocation::before {
      content: '';
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345556c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6-5.2-6-11a6 6 0 1 1 12 0c0 5.8-6 11-6 11Z'/><circle cx='12' cy='10' r='2.5'/></svg>");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 16px 16px;
    }
    .subtitle {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }
    .siteDescription {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
      font-weight: 700;
    }
    @keyframes bootSkeletonPulse {
      0% { opacity: .58; }
      50% { opacity: .92; }
      100% { opacity: .58; }
    }
    .landingBootShell {
      margin-top: 12px;
      display: none;
    }
    .bootSkeleton {
      border-radius: 16px;
      background: linear-gradient(90deg, rgba(226,232,240,.92), rgba(241,245,249,.98), rgba(226,232,240,.92));
      animation: bootSkeletonPulse 1.15s ease-in-out infinite;
    }
    .bootSkeleton--hero {
      height: clamp(152px, 30vw, 240px);
      margin-bottom: 12px;
    }
    .bootSkeleton--chips {
      height: 38px;
      width: min(100%, 320px);
      border-radius: 999px;
      margin-bottom: 14px;
    }
    .bootSkeleton--room {
      height: 118px;
      margin-bottom: 10px;
    }
    html.is-booting[data-initial-access-mode="public"] .panel {
      min-height: min(72vh, 640px);
    }
    .siteUnavailableState {
      margin-top: 18px;
      padding: 26px 22px;
      border-radius: 24px;
      border: 1px solid rgba(69,85,108,.12);
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.98), rgba(226,232,240,.94) 58%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,245,249,.94));
      box-shadow: 0 18px 44px rgba(15,23,42,.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
    }
    .siteUnavailableIcon {
      width: 76px;
      height: 76px;
      display: grid;
      place-items: center;
      border-radius: 24px;
      border: 1px solid rgba(69,85,108,.14);
      background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(226,232,240,.88));
      color: var(--accent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 28px rgba(15,23,42,.10);
    }
    .siteUnavailableIcon svg {
      width: 36px;
      height: 36px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .siteUnavailableEyebrow {
      display: inline-flex;
      align-items: center;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(69,85,108,.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .siteUnavailableTitle {
      margin: 0;
      color: #1f2937;
      font-size: clamp(22px, 3vw, 30px);
      line-height: 1.18;
      font-weight: 800;
      letter-spacing: -.02em;
    }
    .siteUnavailableText {
      margin: 0;
      max-width: 520px;
      color: #475569;
      font-size: 15px;
      line-height: 1.65;
      font-weight: 600;
    }
    .welcomeFacade {
      position: relative;
      margin: 18px 0 4px;
      padding: 22px;
      border-radius: 24px;
      border: 1px solid rgba(69,85,108,.12);
      background:
        radial-gradient(circle at top right, rgba(148,163,184,.24), transparent 34%),
        linear-gradient(140deg, rgba(255,255,255,.98), rgba(241,245,249,.94));
      box-shadow: 0 18px 44px rgba(15,23,42,.08);
      overflow: hidden;
    }
    .welcomeIntro {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .welcomeValuePills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .welcomeValuePill {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(69,85,108,.12);
      background: rgba(255,255,255,.78);
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }
    .welcomeEyebrow {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(69,85,108,.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .welcomeLocation {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(69,85,108,.12);
      background: rgba(255,255,255,.72);
      color: #334155;
      font-size: 13px;
      font-weight: 700;
    }
    .welcomeLead {
      margin: 0;
      max-width: 820px;
      color: #334155;
      font-size: clamp(16px, 2vw, 18px);
      line-height: 1.65;
      font-weight: 600;
    }
    .welcomeHighlights {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 14px 0;
    }
    .welcomeHighlight {
      position: relative;
      flex: 1 1 180px;
      min-width: 0;
      padding: 0 18px;
    }
    .welcomeHighlight + .welcomeHighlight::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 1px;
      background: rgba(148,163,184,.38);
    }
    .welcomeHighlightLabel {
      display: block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #8a95a3;
    }
    .welcomeHighlightValue {
      display: block;
      margin-top: 6px;
      color: #1f2937;
      font-size: 15px;
      line-height: 1.4;
      font-weight: 700;
    }
    .welcomeHighlight--address .welcomeHighlightValue {
      font-size: 14px;
      line-height: 1.32;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .directBookingNote {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 0;
    }
    .directBookingNoteTitle {
      color: #334155;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .directBookingNoteText {
      margin: 0;
      color: #475569;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 600;
    }
    .welcomeFacade--compact {
      gap: 8px;
      margin: 12px 0 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }
    .welcomeFacade--compact .welcomeIntro {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .welcomeHighlights--compact {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
    }
    .welcomeCompactChip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(69,85,108,.12);
      background: rgba(255,255,255,.88);
      color: #334155;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      max-width: 100%;
    }
    .welcomeCompactIcon {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      color: #45556c;
    }
    .welcomeCompactLabel {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 18ch;
    }
    .welcomeFacade--compact .directBookingNote {
      margin-top: 0;
      margin-left: auto;
      flex: 0 0 auto;
      text-align: right;
    }
    .welcomeFacade--compact .directBookingNoteText {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      margin: 0;
      padding: 6px 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, #fde047, #facc15 45%, #f59e0b);
      color: #713f12;
      border: 1px solid rgba(180,83,9,.42);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 800;
      letter-spacing: .01em;
      box-shadow: 0 4px 14px rgba(245,158,11,.38), inset 0 1px 0 rgba(255,255,255,.55);
      white-space: nowrap;
    }
    .welcomeActions {
      display: flex;
      justify-content: flex-end;
      width: min(720px, 100%);
    }
    .landingFooterActions {
      margin: 12px 0 4px;
      display: flex;
      justify-content: flex-end;
    }
    .panel--selfServiceHub .brandTop--hub {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: clamp(6px, 1.5vh, 14px);
      gap: 4px;
    }
    .panel--selfServiceHub .brandTop--hub > div {
      width: 100%;
      text-align: center;
    }
    .panel--selfServiceHub .brandTop--hub .titleMetaRow {
      justify-content: center;
    }
    .panel--selfServiceHub .title {
      font-size: clamp(26px, 3.2vw, 34px);
      letter-spacing: -0.02em;
    }
    .brandTop.brandTop--selfServiceLanding {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "hubTitle hubClose"
        "hubMeta hubMeta";
      align-items: center;
      column-gap: 12px;
      row-gap: 6px;
      margin-bottom: 10px;
    }
    .brandTop.brandTop--selfServiceLanding > div {
      display: contents;
    }
    .brandTop.brandTop--selfServiceLanding .brandTopActions,
    .brandTop.brandTop--selfServiceLanding .brandTopActionsToolbar {
      display: contents;
    }
    .brandTop.brandTop--selfServiceLanding .title {
      grid-area: hubTitle;
      margin: 0;
      align-self: center;
      font-size: clamp(22px, 2.8vw, 30px);
      line-height: 1.15;
    }
    .brandTop.brandTop--selfServiceLanding .brandTopMeta {
      grid-area: hubMeta;
      margin: 0;
    }
    .brandTop.brandTop--selfServiceLanding .roomsBackBtn {
      grid-area: hubClose;
      align-self: center;
      justify-self: end;
      margin: 0;
    }
    .brandTop--hub .titleLocation {
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      font-size: clamp(15px, 1.6vw, 18px);
      font-weight: 600;
      color: #64748b;
    }
    .panel--selfServiceHub .hubView {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .hubView {
      display: flex;
      flex-direction: column;
      min-height: calc(100dvh - 128px);
      margin-top: 0;
    }
    .hubMain {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(12px, 2.5vh, 28px) clamp(14px, 2.5vw, 28px) clamp(8px, 1.5vh, 16px);
    }
    .hubChoiceCards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(16px, 2.4vw, 28px);
      width: min(96%, 920px);
      max-width: 920px;
      justify-content: center;
      margin: 0 auto;
    }
    .hubChoiceCard {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(16px, 2vh, 22px);
      width: 100%;
      min-height: clamp(260px, 36vh, 400px);
      aspect-ratio: 1.08;
      padding: clamp(22px, 3vh, 32px) clamp(18px, 2vw, 26px);
      border-radius: clamp(22px, 2.4vw, 28px);
      border: 1px solid transparent;
      color: #1f2937;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.2s ease, border-color 0.2s ease;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 18px 40px rgba(15, 23, 42, 0.1);
    }
    .hubChoiceCard--booking {
      background: linear-gradient(155deg, #f8fbff 0%, #e3ebf5 52%, #d5e0ec 100%);
      border-color: rgba(69, 85, 108, 0.16);
    }
    .hubChoiceCard--checkin {
      background: linear-gradient(155deg, #f4fbf7 0%, #dff1e8 52%, #d0e8dc 100%);
      border-color: rgba(22, 128, 78, 0.14);
    }
    .hubChoiceCard:hover:not(:disabled) {
      transform: translateY(-3px) scale(1.01);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 22px 48px rgba(15, 23, 42, 0.14);
    }
    .hubChoiceCard:active:not(:disabled) {
      transform: translateY(-1px) scale(0.995);
    }
    .hubChoiceCard:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      filter: grayscale(0.15);
    }
    .hubChoiceCardIcon {
      flex: 0 0 auto;
      width: clamp(64px, 8vw, 84px);
      height: clamp(64px, 8vw, 84px);
      border-radius: clamp(18px, 2vw, 22px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.65);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 20px rgba(15, 23, 42, 0.1);
    }
    .hubChoiceCardIcon svg {
      width: clamp(30px, 3.6vw, 38px);
      height: clamp(30px, 3.6vw, 38px);
      fill: currentColor;
    }
    .hubChoiceCard--booking .hubChoiceCardIcon {
      color: #2f3f55;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(210, 222, 236, 0.88) 100%);
    }
    .hubChoiceCard--checkin .hubChoiceCardIcon {
      color: #0d7a45;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(198, 236, 214, 0.9) 100%);
    }
    .hubChoiceCardCopy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 26ch;
    }
    .hubChoiceCardTitle {
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 700;
      line-height: 1.22;
      letter-spacing: -0.02em;
      color: #1a2433;
    }
    .hubChoiceCard--booking .hubChoiceCardTitle {
      color: #243247;
    }
    .hubChoiceCard--checkin .hubChoiceCardTitle {
      color: #145a36;
    }
    .hubChoiceCardSubtitle {
      font-size: clamp(13px, 1.45vw, 17px);
      line-height: 1.45;
      font-weight: 600;
      color: rgba(51, 65, 85, 0.82);
      max-width: none;
    }
    .hubChoiceCard--checkin .hubChoiceCardSubtitle {
      color: rgba(20, 90, 54, 0.78);
    }
    .hubContactStrip {
      display: none;
      flex: 0 0 auto;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      width: min(96%, 920px);
      max-width: 920px;
      margin: auto auto 4px;
      padding: clamp(10px, 1.8vh, 18px) 0 0;
      border: none;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      overflow: visible;
    }
    .hubContactStrip.is-visible {
      display: flex;
    }
    .panel--selfServiceHub .hubContactStrip {
      margin-top: auto;
    }
    .hubContactStrip .contactActionBtn {
      flex: 1 1 0;
      min-width: 0;
      border-radius: 0;
      min-height: 58px;
      padding: 10px 8px;
      border: none;
      background: transparent;
      box-shadow: none;
    }
    .hubContactStrip .contactActionBtn + .contactActionBtn {
      border-left: 1px solid rgba(100, 116, 139, 0.26);
    }
    .hubContactStrip .contactActionBtn:hover {
      background: rgba(255, 255, 255, 0.42);
    }
    .hubContactStrip .contactActionBtn.taxi .contactActionIcon {
      color: #9a6700;
      background: linear-gradient(180deg, rgba(255, 251, 235, 0.95) 0%, rgba(254, 243, 199, 0.9) 100%);
    }
    .taxiOverlay {
      position: fixed;
      inset: 0;
      z-index: 1180;
      display: none;
      align-items: center;
      justify-content: center;
      padding: clamp(14px, 3vw, 28px);
      background: rgba(15, 23, 42, 0.34);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .taxiOverlay.is-open {
      display: flex;
    }
    .taxiOverlayShell {
      width: min(100%, 720px);
      max-height: min(88dvh, 760px);
      display: flex;
      flex-direction: column;
      border-radius: clamp(20px, 2.4vw, 26px);
      overflow: hidden;
      background: linear-gradient(168deg, #faf8f4 0%, #f3f6fa 52%, #eef2f6 100%);
      box-shadow:
        0 0 0 1px rgba(69, 85, 108, 0.1),
        0 28px 64px rgba(15, 23, 42, 0.18);
    }
    .taxiOverlayTop {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: clamp(18px, 2.5vh, 24px) clamp(18px, 2.5vw, 24px) 12px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    }
    .taxiOverlayHeading {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .taxiOverlayTitle {
      font-size: clamp(20px, 2.4vw, 26px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #1f2937;
    }
    .taxiOverlaySubtitle {
      font-size: clamp(13px, 1.4vw, 15px);
      font-weight: 600;
      color: #64748b;
      line-height: 1.4;
    }
    .taxiOverlayClose {
      flex: 0 0 auto;
    }
    .taxiOverlayList {
      flex: 1 1 auto;
      overflow: auto;
      padding: 12px clamp(14px, 2vw, 20px) clamp(16px, 2vh, 22px);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .taxiProviderCard {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      width: 100%;
      padding: clamp(14px, 2vh, 18px) clamp(16px, 2vw, 20px);
      border-radius: 18px;
      border: 1px solid rgba(148, 163, 184, 0.24);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
      cursor: pointer;
      text-align: left;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .taxiProviderCard:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
    }
    .taxiProviderMeta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .taxiProviderName {
      font-size: clamp(17px, 2vw, 20px);
      font-weight: 700;
      color: #1f2937;
    }
    .taxiProviderType {
      display: inline-flex;
      align-self: flex-start;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #475569;
      background: rgba(148, 163, 184, 0.16);
    }
    .taxiProviderCard--bolt .taxiProviderType {
      color: #1d4ed8;
      background: rgba(59, 130, 246, 0.14);
    }
    .taxiProviderCard--uber .taxiProviderType {
      color: #111827;
      background: rgba(17, 24, 39, 0.1);
    }
    .taxiProviderCard--taxi .taxiProviderType {
      color: #9a6700;
      background: rgba(245, 158, 11, 0.16);
    }
    .taxiProviderPhone {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }
    .taxiProviderCall {
      flex: 0 0 auto;
      min-width: 72px;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      color: #334155;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94));
      border: 1px solid rgba(69, 85, 108, 0.16);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .taxiOverlayEmpty {
      margin: 0;
      padding: 8px clamp(14px, 2vw, 20px) 20px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      text-align: center;
    }
    .contactActionBtn.taxi {
      color: #9a6700;
    }
    .checkinOverlay {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: none;
      align-items: stretch;
      justify-content: center;
      padding: 0;
      background: rgba(248, 245, 240, 0.42);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .checkinOverlay.is-open {
      display: flex;
    }
    .checkinOverlayShell {
      display: flex;
      flex-direction: column;
      width: min(100%, 920px);
      height: 100%;
      margin: 0 auto;
      background: linear-gradient(180deg, #f8f5f0 0%, #f3f6fa 100%);
      box-shadow: 0 0 0 1px rgba(69, 85, 108, 0.08);
    }
    .checkinOverlayTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px 10px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.22);
      background: rgba(255, 255, 255, 0.72);
      position: relative;
      z-index: 2;
    }
    .checkinOverlayTitle {
      font-size: 17px;
      font-weight: 700;
      color: #334155;
      letter-spacing: 0.01em;
    }
    .checkinOverlayClose {
      position: static;
      flex: 0 0 auto;
      z-index: 3;
    }
    .checkinOverlayFrame {
      flex: 1 1 auto;
      width: 100%;
      border: none;
      background: #f8f5f0;
    }
    .welcomeBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 52px;
      border-radius: 16px;
      padding: 0 20px;
      border: 1px solid var(--button-soft-border);
      background: var(--button-soft-bg);
      color: var(--button-soft-text);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .01em;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }
    .titleMetaAction {
      width: auto;
      min-width: 0;
      min-height: 40px;
      padding: 0 18px;
      border-radius: 999px;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    #welcomePoliciesBtn {
      justify-content: center;
      text-align: center;
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,246,250,.94));
    }
    .welcomeBtn:hover {
      transform: translateY(-1px);
      background: var(--button-soft-bg-hover);
      border-color: rgba(69,85,108,.22);
      box-shadow: 0 12px 28px rgba(15,23,42,.08);
    }
    .welcomeBtn.primary {
      justify-content: center;
      min-height: 54px;
      width: min(500px, 100%);
      min-width: 0;
      padding-right: 46px;
      background: var(--button-soft-bg);
      border-color: var(--button-soft-border);
      color: var(--button-soft-text);
      position: relative;
      overflow: hidden;
      background-image:
        linear-gradient(108deg, transparent 0%, transparent 5%, rgba(191,219,254,0) 12%, rgba(191,219,254,.08) 24%, rgba(191,219,254,.18) 36%, rgba(224,242,254,.28) 44%, rgba(255,255,255,.44) 50%, rgba(224,242,254,.28) 56%, rgba(191,219,254,.18) 64%, rgba(191,219,254,.08) 76%, rgba(191,219,254,0) 88%, transparent 95%, transparent 100%),
        linear-gradient(108deg, transparent 0%, rgba(191,219,254,0) 4%, rgba(191,219,254,.04) 18%, rgba(191,219,254,.10) 32%, rgba(191,219,254,.14) 50%, rgba(191,219,254,.10) 68%, rgba(191,219,254,.04) 82%, rgba(191,219,254,0) 96%, transparent 100%),
        linear-gradient(180deg, var(--button-soft-bg), var(--button-soft-bg));
      background-size: 46% 265%, 64% 290%, 100% 100%;
      background-repeat: no-repeat;
      background-position: -220% 50%, -240% 50%, 0 0;
      animation: exploreRoomsSweep 8s linear infinite;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(191,219,254,.32);
    }
    .welcomeBtn.primary::after {
      content: '›';
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      color: currentColor;
      opacity: .58;
      pointer-events: none;
    }
    .welcomeBtn:disabled {
      opacity: .58;
      cursor: not-allowed;
      transform: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    }
    .welcomeBtn.primary:disabled {
      animation: none;
      background-image: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    }
    @keyframes exploreRoomsSweep {
      0% {
        background-position: -220% 50%, -240% 50%, 0 0;
      }
      75% {
        background-position: 220% 50%, 240% 50%, 0 0;
      }
      100% {
        background-position: 220% 50%, 240% 50%, 0 0;
      }
    }
    .paymentPromptBtn,
    .paymentPromptBtn.primary,
    .datePromptBtn,
    .statusDialogBtn,
    .propertyInfoBtn,
    .pinBtn,
    .cc-btn,
    .payBtn {
      border: 1px solid var(--button-soft-border);
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,246,250,.94));
      color: var(--button-soft-text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .paymentPromptBtn.primary:hover,
    .paymentPromptBtn:hover,
    .datePromptBtn:hover,
    .statusDialogBtn:hover,
    .propertyInfoBtn:hover,
    .pinBtn:hover,
    .cc-btn:hover,
    .payBtn:hover {
      background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(238,242,247,.96));
      border-color: rgba(69,85,108,.22);
      box-shadow: 0 10px 24px rgba(15,23,42,.08);
      transform: translateY(-1px);
    }
    .paymentPromptBtn.primary:disabled,
    .paymentPromptBtn:disabled,
    .datePromptBtn:disabled,
    .statusDialogBtn:disabled,
    .propertyInfoBtn:disabled,
    .pinBtn:disabled,
    .cc-btn:disabled,
    .payBtn:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    }
    .contactActions {
      display: none;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      margin: 18px 0 4px;
      padding: 8px;
      border-radius: 24px;
      border: 1px solid rgba(69,85,108,.12);
      background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,245,249,.92));
      box-shadow: 0 16px 34px rgba(15,23,42,.08);
      overflow: hidden;
    }
    .contactActions.is-visible {
      display: flex;
    }
    .contactActions--modern.is-visible {
      display: grid;
    }
    .contactActionBtn {
      flex: 1 1 0;
      min-height: 64px;
      border: none;
      border-radius: 18px;
      background: transparent;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      cursor: pointer;
      box-shadow: none;
      transition: background .18s ease, color .18s ease;
      text-align: left;
    }
    .contactActionBtn + .contactActionBtn {
      border-left: 1px solid rgba(107,114,128,.18);
    }
    .contactActionBtn:hover {
      background: rgba(69,85,108,.06);
    }
    .contactActionBtn:focus-visible {
      outline: 2px solid rgba(69,85,108,.35);
      outline-offset: 2px;
    }
    .contactActionBtn.phone {
      color: #243041;
    }
    .contactActionBtn.whatsapp {
      color: #0b6f46;
    }
    .contactActionBtn.directions {
      color: #7c3aed;
    }
    .contactActionIcon {
      width: 42px;
      height: 42px;
      min-width: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.76);
      border: 1px solid rgba(69,85,108,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    }
    .contactActionBtn.phone .contactActionIcon {
      background: rgba(69,85,108,.10);
      color: #45556c;
    }
    .contactActionBtn.whatsapp .contactActionIcon {
      background: rgba(16,164,92,.10);
      color: #0f9f58;
    }
    .contactActionBtn.directions .contactActionIcon {
      background: rgba(124,58,237,.10);
      color: #7c3aed;
    }
    .contactActionIcon svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
      display: block;
    }
    .contactActionCopy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .contactActionTitle {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }
    .contactActionSubtitle {
      font-size: 11px;
      line-height: 1.4;
      color: #64748b;
    }
    .contactActions--modern {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: 16px 0 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }
    .contactActionBtn--modern {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 78px;
      padding: 12px 8px;
      border-radius: 18px;
      border: 1px solid rgba(69,85,108,.10);
      background: rgba(255,255,255,.94);
      box-shadow: 0 8px 22px rgba(15,23,42,.07);
      text-align: center;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .contactActionBtn--modern + .contactActionBtn--modern {
      border-left: none;
    }
    .contactActionBtn--modern:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(15,23,42,.10);
      background: #fff;
    }
    .contactActionBtn--modern.phone {
      color: #1e293b;
    }
    .contactActionBtn--modern.whatsapp {
      color: #0f766e;
    }
    .contactActionBtn--modern.directions {
      color: #2563eb;
    }
    .contactActionIcon--modern {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 14px;
      border: none;
      box-shadow: none;
    }
    .contactActionBtn--modern.phone .contactActionIcon--modern {
      background: rgba(69,85,108,.10);
      color: #45556c;
    }
    .contactActionBtn--modern.whatsapp .contactActionIcon--modern {
      background: rgba(16,185,129,.12);
      color: #059669;
    }
    .contactActionBtn--modern.directions .contactActionIcon--modern {
      background: rgba(37,99,235,.12);
      color: #2563eb;
    }
    .contactActionLabel {
      font-size: 12px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: .01em;
    }
    .propertyFooter {
      margin: 18px 0 8px;
      padding: 16px 14px;
      border-radius: 16px;
      border: 1px solid rgba(69,85,108,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.88));
    }
    .propertyFooterInner {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }
    .propertyFooterAddress {
      margin: 0;
      color: #334155;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 600;
    }
    .propertyFooterPhone {
      color: #2563eb;
      font-size: 15px;
      font-weight: 800;
      text-decoration: none;
      line-height: 1.3;
    }
    .propertyFooterPhone:hover {
      text-decoration: underline;
    }
    .whatsappFab {
      position: fixed;
      right: max(16px, env(safe-area-inset-right, 0px));
      bottom: max(18px, env(safe-area-inset-bottom, 0px));
      z-index: 11050;
      width: 52px;
      height: 52px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(52,211,153,.72), rgba(5,150,105,.66));
      color: #fff;
      border: 1px solid rgba(255,255,255,.24);
      box-shadow: 0 8px 22px rgba(5,150,105,.16), inset 0 1px 0 rgba(255,255,255,.18);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
    }
    .whatsappFab[hidden] {
      display: none !important;
    }
    .whatsappFab:hover {
      transform: translateY(-1px);
      background: linear-gradient(135deg, rgba(52,211,153,.82), rgba(5,150,105,.76));
      box-shadow: 0 10px 26px rgba(5,150,105,.22), inset 0 1px 0 rgba(255,255,255,.22);
    }
    .whatsappFab svg {
      width: 26px;
      height: 26px;
      fill: currentColor;
    }
    .contactActionBtn--modern.directions .contactActionIcon--modern svg {
      stroke: currentColor;
      fill: none;
    }
    .roomsTitle {
      margin: 0;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.35;
      font-weight: 700;
    }
    .sectionDivider {
      margin: 12px 0 0;
      border: 0;
      border-top: 1px solid rgba(107, 114, 128, 0.5);
    }
    .roomsView {
      display: block;
      min-width: 0;
    }
    .roomsViewHeader {
      display: flex;
      align-items: flex-start;
      gap: 0;
      margin-top: 6px;
    }
    .roomsViewCopy {
      min-width: 0;
      flex: 1 1 auto;
    }
    .brandCloseBtn {
      flex: 0 0 auto;
      margin-left: auto;
      width: 40px;
      min-width: 40px;
      height: 40px;
      font-size: 0;
      line-height: 1;
      color: var(--button-soft-text);
    }
    .brandCloseIcon {
      font-size: 24px;
      line-height: 1;
      font-weight: 500;
    }
    .roomsViewEyebrow {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      margin-bottom: 8px;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(69,85,108,.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .roomsLead {
      margin: 8px 0 0;
      color: #64748b;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 600;
      max-width: 760px;
    }
    .roomsBackBtn {
      flex: 0 0 auto;
      width: 40px;
      min-width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--button-soft-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .18s ease;
    }
    .roomsBackIcon {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(69,85,108,.14);
      background: rgba(255,255,255,.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .roomsBackIcon svg {
      width: 14px;
      height: 14px;
      display: block;
    }
    .roomsBackIcon path {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .roomsBackBtn:hover {
      transform: translateY(-1px);
    }
    .roomsBackBtn:hover .roomsBackIcon {
      background: rgba(255,255,255,.84);
      border-color: rgba(69,85,108,.18);
      box-shadow: 0 12px 28px rgba(15,23,42,.08);
    }
    .roomsWrap { margin-top: 14px; display: block; }
    .landingRoomsMount {
      min-width: 0;
    }
    .landingRoomsMount:not(:empty) {
      margin-top: 14px;
    }
    .roomsViewMount {
      min-width: 0;
    }
    .roomsGrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .roomCard {
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      background: rgba(255,255,255,.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      width: 100%;
      height: 320px;
    }
    .roomCardInner {
      display: grid;
      grid-template-columns: 2fr 1fr;
      align-items: stretch;
      height: 320px;
    }
    .roomMedia {
      position: relative;
      width: 100%;
      height: 100%;
      background: #eef3f5;
      border-right: 1px solid var(--border);
      overflow: hidden;
    }
    .roomImg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      cursor: pointer;
    }
    .roomMediaBadge {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      max-width: calc(100% - 20px);
      padding: 6px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .01em;
      line-height: 1.1;
      pointer-events: none;
      box-shadow: 0 6px 18px rgba(15,23,42,.18);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .roomMediaBadge.lowStock {
      background: linear-gradient(135deg, rgba(37,99,235,.96), rgba(29,78,216,.96));
      color: #fff;
      border: 1px solid rgba(255,255,255,.28);
    }
    .roomMediaBadge.available {
      background: rgba(255,255,255,.92);
      color: #1d4ed8;
      border: 1px solid rgba(37,99,235,.22);
    }
    .roomMediaBadge.soldOut {
      background: linear-gradient(135deg, #f87171, #ef4444 45%, #dc2626);
      color: #fff;
      border: 1px solid rgba(255,255,255,.34);
      box-shadow: 0 6px 18px rgba(220,38,38,.42);
    }
    .roomBody--compact {
      padding: 10px 12px;
      gap: 8px;
      justify-content: space-between;
    }
    .roomTitleRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      flex-wrap: wrap;
    }
    .roomTitleRow .roomName {
      margin: 0;
      flex: 0 1 auto;
      min-width: 0;
    }
    .roomTitleRow .roomStatsRow {
      flex: 0 0 auto;
      margin-left: auto;
      justify-content: flex-end;
    }
    .roomBodyTop {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .roomStatsRow {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      min-width: 0;
    }
    .roomStat {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(69,85,108,.08);
      color: #334155;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }
    .roomStat strong {
      font-size: 13px;
      font-weight: 800;
      color: #1f2937;
    }
    .roomStatIcon {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      color: #45556c;
    }
    .roomPriceRow {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-top: auto;
    }
    html.room-cards--platform .roomCard {
      height: auto;
    }
    html.room-cards--platform .roomCardInner,
    html.room-cards--platform .roomCardInner--compact {
      height: auto;
    }
    html.room-cards--platform .roomCardInner--compact .roomName {
      font-size: 20px;
      line-height: 1.1;
    }
    html.room-cards--platform .roomsViewHeader {
      margin-top: 2px;
    }
    html.room-cards--platform .roomsLead {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.35;
    }
    html.room-cards--platform .roomsTitle {
      font-size: 18px;
      line-height: 1.2;
      margin: 0;
    }
    html.room-cards--platform .roomsSection .sectionDivider {
      margin-top: 8px;
    }
    @media (min-width: 901px) {
      html.room-cards--platform .roomCard {
        height: 260px;
        max-height: 260px;
      }
      html.room-cards--platform .roomCardInner,
      html.room-cards--platform .roomCardInner--compact {
        height: 260px;
        min-height: 260px;
        max-height: 260px;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: stretch;
      }
      html.room-cards--platform .roomMedia {
        height: 100%;
        min-height: 0;
      }
      html.room-cards--platform .roomBody--compact {
        padding: 14px 16px;
        gap: 10px;
        min-height: 0;
        overflow: hidden;
      }
      html.room-cards--platform .roomCardDesc {
        -webkit-line-clamp: 4;
        line-clamp: 4;
        font-size: 13px;
        line-height: 1.48;
      }
      html.room-cards--platform .roomTitleRow .roomName {
        font-size: 22px;
      }
    }
    .roomBody {
      padding: 12px;
      background: rgba(255,255,255,.96);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 6px;
    }
    .roomName {
      margin: 0;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.1;
    }
    .roomMeta { margin-top: 4px; font-size: 12px; color: var(--muted); }
    .roomOccupancy {
      margin-top: 2px;
      font-size: 12px;
      color: #4d5968;
      font-weight: 600;
    }
    .roomCardDesc {
      margin-top: 0;
      font-size: 12px;
      line-height: 1.5;
      color: #5b6573;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
    html.room-cards--platform .roomCardDesc {
      margin: 0;
    }
    .brandTopActionsToolbar {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }
    .brandTopMeta {
      margin-top: 8px;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    html[data-initial-access-mode="public"] .brandTopMeta .titleLocation {
      flex: 1 1 auto;
      min-width: 0;
    }
    html[data-initial-access-mode="public"] .brandTopMeta #welcomePoliciesBtn {
      flex: 0 0 auto;
      margin-left: auto;
    }
    @media (min-width: 901px) {
      html[data-initial-access-mode="public"] .brandTop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "title lang"
          "meta meta";
        align-items: start;
        column-gap: 16px;
        row-gap: 8px;
      }
      html[data-initial-access-mode="public"] .brandTopMain,
      html[data-initial-access-mode="public"] .brandTopActions {
        display: contents;
      }
      html[data-initial-access-mode="public"] .brandTop .title {
        grid-area: title;
      }
      html[data-initial-access-mode="public"] .brandTopMeta {
        grid-area: meta;
        margin-top: 0;
        width: 100%;
      }
      html[data-initial-access-mode="public"] .brandTopActionsToolbar {
        display: contents;
      }
      html[data-initial-access-mode="public"] #publicLangSwitcher,
      html[data-initial-access-mode="public"] #roomsBackBtn {
        grid-area: lang;
        justify-self: end;
      }
    }
    .landingStaySearch {
      margin-top: 12px;
      margin-bottom: 4px;
    }
    .landingStaySearchGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .landingStaySearch .landingStayLength {
      margin-top: 10px;
      grid-column: 1 / -1;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .landingStaySearch .landingStayLength .stayRangeTop {
      margin-bottom: 10px;
    }
    .landingStaySearch .landingStayLength .stayRangeTitle {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #8a95a3;
    }
    .landingStaySearch .landingStayLength .stayRangeValue {
      font-size: 13px;
      font-weight: 800;
      color: #1f2937;
      padding: 5px 11px;
      border-radius: 999px;
      background: rgba(69,85,108,.08);
      border: 1px solid rgba(69,85,108,.08);
    }
    .landingStaySearch .landingStayLength .stayRangeInput {
      height: 8px;
      margin: 2px 2px 0;
    }
    .landingStaySearch .landingStayLength .stayRangeInput::-webkit-slider-runnable-track {
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(59,130,246,.92) 0%, rgba(59,130,246,.92) var(--stay-range-progress, 0%), rgba(69,85,108,.10) var(--stay-range-progress, 0%), rgba(69,85,108,.34) 100%);
    }
    .landingStaySearch .landingStayLength .stayRangeInput::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      margin-top: -8px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid rgba(69,85,108,.22);
      box-shadow: 0 4px 14px rgba(15,23,42,.14);
      cursor: grab;
    }
    .landingStaySearch .landingStayLength .stayRangeInput::-webkit-slider-thumb:active {
      cursor: grabbing;
      transform: scale(1.04);
    }
    .landingStaySearch .landingStayLength .stayRangeInput::-moz-range-track {
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(59,130,246,.92) 0%, rgba(59,130,246,.92) var(--stay-range-progress, 0%), rgba(69,85,108,.10) var(--stay-range-progress, 0%), rgba(69,85,108,.34) 100%);
      border: none;
    }
    .landingStaySearch .landingStayLength .stayRangeInput::-moz-range-thumb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid rgba(69,85,108,.22);
      box-shadow: 0 4px 14px rgba(15,23,42,.14);
      cursor: grab;
    }
    .landingStayField {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(69,85,108,.12);
      background: rgba(255,255,255,.86);
      color: inherit;
      text-align: left;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
    }
    button.landingStayField {
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
    }
    .landingStayGuests {
      cursor: default;
    }
    .landingStayLabel {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #8a95a3;
    }
    .landingStayValue,
    .landingGuestsValue {
      font-size: 14px;
      font-weight: 800;
      color: #1f2937;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .landingGuestsStepper {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .landingGuestsBtn {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(69,85,108,.14);
      background: rgba(255,255,255,.92);
      color: #334155;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
    }
    .landingGuestsBtn:disabled {
      opacity: .45;
      cursor: not-allowed;
    }
    html.room-cards--platform .roomCardFooter {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    html.room-cards--platform .roomCardFooter .roomPrice {
      margin-top: 0;
      align-self: auto;
      text-align: left;
      flex: 1 1 auto;
      min-width: 0;
      font-size: 14px;
      line-height: 1.25;
    }
    html.room-cards--platform .roomCardFooter .roomCardCta {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(96,165,250,.42);
      background: var(--button-soft-bg);
      color: var(--button-soft-text);
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(191,219,254,.18);
    }
    html.room-cards--platform .roomCardFooter .roomCardCta:disabled {
      opacity: .62;
      cursor: not-allowed;
    }
    html.room-cards--platform .roomCard--stayUnavailable .roomCardInner {
      filter: saturate(.92);
    }
    html.room-cards--platform .roomCard--stayUnavailable .roomMediaBadge.soldOut {
      filter: none;
      opacity: 1;
    }
    .bookingStayEditor {
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
    }
    .bookingStayEditor[hidden] {
      display: none !important;
    }
    .bookingStayEditorCard {
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(69,85,108,.12);
      background: linear-gradient(180deg, rgba(247,250,252,.96), rgba(255,255,255,.92));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 24px rgba(148,163,184,.08);
      display: grid;
      gap: 10px;
    }
    .bookingStayEditorHeader {
      display: grid;
      gap: 4px;
    }
    .bookingStayEditorTitle {
      color: #1f2937;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.3;
    }
    .bookingStayEditorHint {
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
      font-weight: 600;
    }
    .bookingStayEditorGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .bookingStayField {
      width: 100%;
      min-width: 0;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(69,85,108,.14);
      background: rgba(255,255,255,.92);
      display: grid;
      gap: 4px;
      text-align: left;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }
    .bookingStayFieldLabel {
      color: #8a95a3;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .bookingStayFieldValue {
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
    }
    .bookingStayEditorMeta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 2px;
    }
    .bookingStayEditorMetaLabel {
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
    }
    .bookingStayEditorMetaValue {
      color: #1f2937;
      font-size: 13px;
      font-weight: 800;
    }
    .bookingOptionalDetails {
      grid-column: 1 / -1;
      margin-top: 4px;
      border-radius: 14px;
      border: 1px solid rgba(69,85,108,.10);
      background: rgba(255,255,255,.72);
      overflow: hidden;
    }
    .bookingOptionalDetails > summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      font-weight: 800;
      color: #334155;
    }
    .bookingOptionalDetails > summary::-webkit-details-marker {
      display: none;
    }
    .bookingOptionalSummaryTitle {
      min-width: 0;
    }
    .bookingOptionalSummaryState {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .bookingOptionalSummaryToggle--open {
      display: none;
    }
    .bookingOptionalSummaryChevron {
      font-size: 16px;
      line-height: 1;
      transform: rotate(0deg);
      transition: transform .18s ease;
    }
    .bookingOptionalDetails[open] .bookingOptionalSummaryToggle--closed {
      display: none;
    }
    .bookingOptionalDetails[open] .bookingOptionalSummaryToggle--open {
      display: inline;
    }
    .bookingOptionalDetails[open] .bookingOptionalSummaryChevron {
      transform: rotate(90deg);
    }
    .bookingOptionalDetailsBody {
      display: grid;
      gap: 10px;
      padding: 0 14px 14px;
    }
    .bookingFormDivider {
      grid-column: 1 / -1;
      margin: 14px 0 2px;
      border: 0;
      border-top: 1px solid rgba(69,85,108,.16);
      height: 0;
    }
    .bookingFormDivider[hidden] {
      display: none !important;
    }
    html[data-initial-access-mode="public"] .modal--publicUx {
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    .availabilityBadge {
      margin-top: 6px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 700;
      background: rgba(69,85,108,.12);
      color: #334155;
      border: 1px solid rgba(69,85,108,.24);
      width: fit-content;
    }
    .availabilityBadge.soldOut {
      background: rgba(211,47,47,.10);
      color: #b71c1c;
      border: 1px solid rgba(211,47,47,.26);
    }
    .availabilityBadge.lowStock {
      background: rgba(245,158,11,.14);
      color: #b45309;
      border: 1px solid rgba(245,158,11,.34);
    }
    .roomPrice {
      margin-top: auto;
      align-self: flex-end;
      text-align: right;
      font-size: 16px;
      color: var(--accent);
      font-weight: 700;
    }
    .roomPriceAmount {
      font-size: 1em;
      font-weight: 700;
    }
    .roomPriceCurrency {
      margin-left: 4px;
      font-size: .72em;
      color: var(--muted);
      font-weight: 600;
      position: relative;
      top: 2px;
    }
    .roomDesc {
      margin: 2px 0 0;
      font-size: 12px;
      line-height: 1.45;
      color: #4d5968;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .roomNav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.7);
      background: rgba(0,0,0,.3);
      color: #fff;
      font-size: 18px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }
    .roomNav.prev { left: 8px; }
    .roomNav.next { right: 8px; }

    .modalOverlay {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: none;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
      z-index: 1000;
    }
    .modal {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      background: rgba(255,255,255,.98);
      border-radius: 0;
      border: none;
      padding: max(16px, env(safe-area-inset-top)) clamp(16px, 4vw, 28px) max(24px, env(safe-area-inset-bottom));
      touch-action: pan-y;
    }
    .closeRow {
      position: sticky;
      top: 0;
      z-index: 8;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 2px 0 12px;
      margin-bottom: 8px;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(17,24,39,.08);
    }
    .bookingHeaderText {
      min-width: 0;
      flex: 1 1 auto;
    }
    .bookingRoomMetaBand {
      margin: 6px 0 0;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 600;
      color: #64748b;
      white-space: normal;
      word-break: break-word;
    }
    .bookingQuickHidden[hidden] {
      display: none !important;
    }
    .brandTop.brandTop--rooms {
      align-items: flex-start;
    }
    .closeBtn {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(17,24,39,.08);
      background: rgba(255,255,255,.92);
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      color: #334155;
      flex: 0 0 auto;
    }
    .bookingPageTitle {
      margin: 0;
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.1;
      color: #1f2a36;
      font-weight: 700;
    }
    .bookingPageSubtitle {
      margin-top: 6px;
      margin-bottom: 0;
      font-size: 14px;
    }
    .modal > .bookingRoomMetaBand,
    .modal > .bookingPageSubtitle,
    .modal > .bookingCarousel,
    .modal > #bookingDescription,
    .modal > .roomsCountWrap,
    .modal > .requiredHint,
    .modal > #bookingForm {
      width: min(920px, 100%);
      margin-left: auto;
      margin-right: auto;
    }
    .modal > .closeRow {
      width: min(920px, 100%);
      margin-left: auto;
      margin-right: auto;
    }
    .fieldGrid {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(140px, 1fr));
      gap: 10px;
    }
    .requiredHint {
      margin: 10px 0 0;
      font-size: 12px;
      line-height: 1.45;
      font-weight: 600;
      color: #7b8794;
      text-align: right;
    }
    .roomsCountWrap {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f7f9fa;
    }
    .roomsCountLeft {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .roomsCountTitle {
      font-size: 12px;
      font-weight: 700;
      color: #334;
    }
    .roomsCountAvail {
      font-size: 12px;
      font-weight: 600;
      color: #5b6573;
    }
    .roomsCountStepper {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: #fff;
      overflow: hidden;
    }
    .roomsCountBtn {
      width: 34px;
      height: 34px;
      border: none;
      background: #fff;
      color: #1f2a36;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
    }
    .roomsCountBtn:disabled {
      opacity: .4;
      cursor: not-allowed;
    }
    .roomsCountValue {
      min-width: 34px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #1f2a36;
      padding: 0 6px;
    }
    .roomsCountWrap.hiddenFuture {
      display: none !important;
    }
    .stayRangeWrap {
      grid-column: 1 / -1;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f7f9fa;
      padding: 10px;
    }
    .stayRangeTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .stayRangeHint {
      margin-top: 7px;
      font-size: 12px;
      color: #5b6573;
      font-weight: 600;
    }
    .stayRangeGrab {
      margin-top: 4px;
      font-size: 12px;
      color: #344256;
      font-weight: 700;
    }
    .stayRangeTitle {
      font-size: 12px;
      font-weight: 700;
      color: #334;
    }
    .stayRangeValue {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
    }
    .stayRangeInput {
      width: 100%;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      height: 3px;
      border-radius: 999px;
      background: transparent;
      border: none;
    }
    .stayRangeInput::-webkit-slider-runnable-track {
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(59,130,246,.92) 0%, rgba(59,130,246,.92) var(--stay-range-progress, 0%), rgba(69,85,108,.22) var(--stay-range-progress, 0%), rgba(69,85,108,.5) 100%);
      border: none;
    }
    .stayRangeInput::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      margin-top: -8px;
      border-radius: 50%;
      background: linear-gradient(140deg, var(--accent2), var(--accent));
      border: 2px solid #ffffff;
      box-shadow: 0 2px 7px rgba(0,0,0,.16);
      cursor: grab;
    }
    .stayRangeInput::-webkit-slider-thumb:active {
      cursor: grabbing;
    }
    .stayRangeInput::-moz-range-track {
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(59,130,246,.92) 0%, rgba(59,130,246,.92) var(--stay-range-progress, 0%), rgba(69,85,108,.22) var(--stay-range-progress, 0%), rgba(69,85,108,.5) 100%);
      border: none;
    }
    .stayRangeInput::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(140deg, var(--accent2), var(--accent));
      border: 2px solid #ffffff;
      box-shadow: 0 2px 7px rgba(0,0,0,.16);
      cursor: grab;
    }
    .bookingCarousel {
      margin-top: 8px;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: #f2f6f8;
      display: none;
    }
    .bookingCarouselInner {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
    }
    .bookingCarouselImg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: #edf2f4;
      cursor: zoom-in;
    }
    .carouselNav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.7);
      background: rgba(0,0,0,.25);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 0;
      cursor: pointer;
    }
    .carouselNav.prev { left: 8px; }
    .carouselNav.next { right: 8px; }
    .carouselNav svg,
    .roomNav svg,
    .mediaViewerNav svg {
      width: 16px;
      height: 16px;
      display: block;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      pointer-events: none;
    }
    .carouselDots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px;
      background: rgba(255,255,255,.9);
    }
    .carouselDot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #c9d3dd;
      border: none;
      padding: 0;
      cursor: pointer;
    }
    .carouselDot.active { background: var(--accent); }
    .mediaViewerOverlay {
      position: fixed;
      inset: 0;
      display: none;
      flex-direction: column;
      justify-content: flex-start;
      gap: 10px;
      padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
      background: rgba(5, 8, 12, .94);
      z-index: 1200;
      overscroll-behavior: contain;
    }
    .mediaViewerClose {
      position: absolute;
      top: max(10px, env(safe-area-inset-top));
      right: 12px;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(12,16,23,.64);
      color: #fff;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      z-index: 2;
    }
    .mediaViewerStage {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      touch-action: pan-y;
    }
    .mediaViewerImg {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      user-select: none;
      -webkit-user-drag: none;
    }
    .mediaViewerNav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(12,16,23,.58);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 0;
      cursor: pointer;
      z-index: 2;
    }
    .mediaViewerNav.prev { left: 0; }
    .mediaViewerNav.next { right: 0; }
    .mediaViewerFooter {
      width: min(1080px, 100%);
      margin: 0 auto;
      text-align: center;
      color: rgba(255,255,255,.92);
    }
    .mediaViewerTitle {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.35;
    }
    .mediaViewerCounter {
      margin-top: 4px;
      font-size: 12px;
      color: rgba(255,255,255,.74);
    }
    .mediaViewerDots {
      margin-top: 8px;
      background: transparent;
      padding: 0;
    }
    .mediaViewerDots .carouselDot {
      width: 8px;
      height: 8px;
      background: rgba(255,255,255,.26);
    }
    .mediaViewerDots .carouselDot.active {
      background: rgba(255,255,255,.96);
    }
    .field { display: flex; flex-direction: column; gap: 4px; }
    .fieldLabelRow {
      min-height: 18px;
      display: flex;
      align-items: center;
    }
    .fieldLabelRow.withInlineCheckbox {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .fieldLabelRow.withInlineCheckbox > label[for="childrenNo"] {
      white-space: nowrap;
    }
    .inlineCheckbox {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #4d5968;
      white-space: nowrap;
    }
    .inlineCheckbox input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--accent);
    }
    .field.big { grid-column: 1 / -1; }
    .fieldRow {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 10px;
    }
    .phoneInputRow {
      display: flex;
      align-items: stretch;
      gap: 8px;
    }
    .phonePrefixDisplay {
      width: 120px;
      min-width: 120px;
      font: 14px 'Open Sans', Arial, sans-serif;
      padding: 9px 24px 9px 20px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #f7f9fa;
      color: var(--ink);
      cursor: pointer;
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 2v8M2 6h8' stroke='%23555' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat, no-repeat;
      background-position: right 8px center, left 8px center;
      background-size: 16px 16px, 10px 10px;
    }
    .phonePrefixDisplay:focus {
      outline: none;
      border-color: rgba(69,85,108,.45);
      box-shadow: 0 0 0 1px rgba(69,85,108,.18);
    }
    .phonePrefixHidden { display: none !important; }
    .phonePrefix {
      width: 120px;
      min-width: 120px;
      font: 14px 'Open Sans', Arial, sans-serif;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #f7f9fa;
      color: var(--ink);
      -webkit-appearance: none;
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
      background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 28px;
    }
    .phonePrefix:focus {
      outline: none;
      border-color: rgba(69,85,108,.45);
      box-shadow: 0 0 0 1px rgba(69,85,108,.18);
    }
    .phoneLocal {
      flex: 1;
      min-width: 0;
    }
    .cc-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:9999; }
    .cc-popup { width:min(92vw, 520px); background:#fff; border-radius:14px; box-shadow:0 18px 50px -12px rgba(0,0,0,.5); padding:16px; display:flex; flex-direction:column; gap:10px; }
    .cc-title { font-weight:700; font-size:16px; color:#111; }
    .cc-search { font:14px 'Open Sans', Arial, sans-serif; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:#f7f8fa; }
    .cc-list { max-height:340px; overflow:auto; border:1px solid var(--border); border-radius:10px; }
    .cc-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; cursor:pointer; }
    .cc-item:hover { background: var(--accent-soft); }
    .cc-item .cc-name { font-size:14px; color:#111; }
    .cc-item .cc-code { font-size:13px; font-weight:700; color:var(--accent); }
    .cc-actions { display:flex; justify-content:flex-end; gap:10px; }
    .cc-btn { height:38px; padding:0 16px; border-radius:10px; border:1px solid #cbd5e1; background:#fff; font-weight:600; cursor:pointer; }
    .subsectionTitle {
      grid-column: 1 / -1;
      margin-top: 8px;
      padding-top: 10px;
      border-top: 1px solid rgba(17,24,39,.10);
      font-size: 15px;
      font-weight: 700;
      color: #1f2a36;
    }
    .subsectionTitle.withMeta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .subsectionMeta {
      font-size: 12px;
      color: #96a0ab;
      font-weight: 600;
    }
    .guestList {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .guestCard {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px;
      background: #f8fafb;
    }
    .guestHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #334;
    }
    .guestRemove {
      border: none;
      background: transparent;
      color: var(--danger);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      padding: 2px 4px;
    }
    .guestRemoveIcon {
      margin-right: 4px;
      font-size: 14px;
      line-height: 1;
    }
    .guestGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 8px;
    }
    .ghostBtn {
      margin-top: 4px;
      grid-column: 1 / -1;
      justify-self: end;
      border: 1px solid rgba(69,85,108,.35);
      border-radius: 10px;
      background: rgba(69,85,108,.12);
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      height: 38px;
      padding: 0 14px;
      cursor: pointer;
    }
    .ghostBtn:disabled {
      opacity: .5;
      cursor: not-allowed;
    }
    .scanIdBtn {
      width: 100%;
      justify-self: stretch;
      margin-top: 0;
      border-color: rgba(22, 163, 74, .45);
      background: rgba(22, 163, 74, .10);
      color: #166534;
      text-align: center;
    }
    .scanHint {
      margin-top: 6px;
      font-size: 12px;
      color: #5b6573;
      font-weight: 600;
    }
    .adultNote {
      grid-column: 1 / -1;
      margin-top: 4px;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(255,179,0,.6);
      background: rgba(255,213,79,.2);
      font-size: 13px;
      line-height: 1.3;
      color: #6A4A00;
      font-weight: 600;
      display: none;
      align-items: flex-start;
      gap: 8px;
    }
    .adultNote .icon {
      width: 18px;
      height: 18px;
      min-width: 18px;
      border-radius: 50%;
      border: 1px solid #ffb300;
      color: #ffb300;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      margin-top: 1px;
    }
    .adultNote .text {
      flex: 1;
      display: block;
    }
    .policiesSection {
      grid-column: 1 / -1;
      margin-top: 2px;
      display: none;
    }
    .policiesHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .policiesTitle {
      font-size: 15px;
      font-weight: 700;
      color: #1f2a36;
    }
    .policiesToggle {
      border: none;
      background: transparent;
      color: var(--accent);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      padding: 0;
    }
    .policiesBox {
      border: 0.9px solid var(--border);
      border-radius: 8px;
      background: transparent;
      padding: 12px;
      display: none;
      white-space: pre-wrap;
      line-height: 1.4;
      font-size: 13.5px;
      color: #334;
    }
    .policiesBox.is-rich {
      white-space: normal;
      padding: 14px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(248,250,252,.94), rgba(255,255,255,.98));
      border-color: rgba(203,213,225,.92);
    }
    .policyDisplay {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .policyGroup {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .policyGroupHeader {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .policyGroupTitle {
      font-size: 14px;
      font-weight: 800;
      color: #1f2a36;
    }
    .policyGroupSubtitle {
      font-size: 12px;
      line-height: 1.5;
      color: #64748b;
      font-weight: 600;
    }
    .policyGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }
    .policyCard {
      border-radius: 16px;
      border: 1px solid rgba(203,213,225,.92);
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
      padding: 12px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    }
    .policyCardTop {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .policyCardLabel {
      font-size: 14px;
      font-weight: 700;
      color: #1f2a36;
      line-height: 1.35;
    }
    .policyCardDescription {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.5;
      color: #64748b;
      font-weight: 600;
    }
    .policyStatus {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .02em;
      white-space: nowrap;
      border: 1px solid transparent;
    }
    .policyStatus.is-positive {
      background: rgba(22,163,74,.10);
      color: #15803d;
      border-color: rgba(22,163,74,.18);
    }
    .policyStatus.is-negative {
      background: rgba(220,38,38,.08);
      color: #b45353;
      border-color: rgba(220,38,38,.16);
    }
    .policyNote {
      border-radius: 16px;
      border: 1px solid rgba(203,213,225,.92);
      background: rgba(255,255,255,.92);
      padding: 14px;
    }
    .policyNoteTitle {
      font-size: 13px;
      font-weight: 800;
      color: #1f2a36;
    }
    .policyNoteBody {
      margin-top: 8px;
      font-size: 13px;
      line-height: 1.6;
      color: #475569;
      font-weight: 600;
      white-space: pre-wrap;
    }
    .policyEmptyState {
      border-radius: 16px;
      border: 1px dashed rgba(148,163,184,.55);
      background: rgba(248,250,252,.82);
      padding: 16px;
      font-size: 13px;
      line-height: 1.55;
      color: #64748b;
      font-weight: 600;
    }
    .termsWrap {
      grid-column: 1 / -1;
      margin-top: 2px;
      padding: 8px 10px;
      border: 1px solid transparent;
      border-radius: 8px;
    }
    .termsWrap.error {
      border-width: 0.8px;
      border-color: var(--danger);
    }
    .inputError {
      border-color: var(--danger) !important;
      border-width: 0.8px !important;
    }
    .checkbox {
      display: inline-flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      line-height: 1.3;
      color: #334;
      font-weight: 600;
    }
    .checkbox input {
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: var(--accent);
      flex-shrink: 0;
    }
    .legalLink {
      display: block;
      margin-top: 4px;
      text-align: right;
      color: var(--accent);
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
      font-size: 13px;
    }
    label { font-size: 12px; font-weight: 700; color: #334; }
    input, textarea, select {
      font: 14px 'Open Sans', Arial, sans-serif;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #f7f9fa;
    }
    select {
      height: 38px;
      min-height: 38px;
      line-height: 1.2;
      -webkit-appearance: none;
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
      background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 28px;
    }
    textarea { min-height: 72px; resize: vertical; }
    .submitBtn {
      margin-top: 12px;
      width: 100%;
      border: 1px solid rgba(96,165,250,.42);
      border-radius: 12px;
      height: 42px;
      color: var(--button-soft-text);
      font-weight: 700;
      background: var(--button-soft-bg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(191,219,254,.18);
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .submitBtn:hover {
      background: var(--button-soft-bg-hover);
      border-color: rgba(96,165,250,.56);
      box-shadow: 0 10px 24px rgba(15,23,42,.08), 0 0 0 1px rgba(191,219,254,.26);
    }
    .submitBtn:disabled {
      opacity: .6;
      cursor: not-allowed;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(191,219,254,.14);
    }
    .bookingSummaryCard {
      grid-column: 1 / -1;
      margin-top: 0;
      padding: 13px;
      border-radius: 14px;
      border: 1px solid rgba(217,119,6,.18);
      background: linear-gradient(180deg, rgba(255,251,235,.92), rgba(255,255,255,.90));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 10px 24px rgba(148,163,184,.10);
    }
    .bookingSummaryHeader {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .bookingSummaryTitle {
      color: #1f2937;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.3;
    }
    .bookingSummaryPrice {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 8px 12px;
      border-radius: 12px;
      border: 1px solid rgba(217,119,6,.18);
      background: rgba(245,158,11,.10);
      color: #92400e;
      font-size: 15px;
      font-weight: 800;
      text-align: right;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.56);
    }
    .bookingSummaryPrice.is-pending {
      border-color: rgba(69,85,108,.14);
      background: rgba(148,163,184,.10);
      color: #475569;
    }
    .bookingSummaryPrice.is-muted {
      border-color: rgba(69,85,108,.10);
      background: rgba(255,255,255,.78);
      color: #64748b;
    }
    .bookingSummaryPrice.is-total {
      border-color: rgba(217,119,6,.22);
      background: rgba(245,158,11,.14);
      color: #9a3412;
    }
    .bookingSummaryGrid {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .bookingSummaryItem {
      min-width: 0;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(69,85,108,.08);
      background: rgba(255,255,255,.82);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .bookingSummaryLabel {
      color: #8a95a3;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .bookingSummaryValue {
      color: #334155;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 700;
    }
    .bookingTrustNote {
      margin-top: 10px;
      color: #5b6573;
      font-size: 12px;
      line-height: 1.45;
      font-weight: 600;
    }
    @media (max-width: 700px) {
      .bookingStayEditorGrid {
        grid-template-columns: 1fr;
      }
    }
    .payBtn {
      margin-top: 8px;
      width: 100%;
      border-radius: 12px;
      height: 40px;
      font-weight: 700;
      cursor: pointer;
      display: none;
    }
    .paymentPromptOverlay {
      position: fixed;
      inset: 0;
      background: rgba(17,24,39,.44);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 1200;
    }
    .paymentPromptModal {
      width: min(460px, 100%);
      background: rgba(255,255,255,.98);
      border-radius: 16px;
      border: 1px solid var(--border);
      box-shadow: 0 20px 48px rgba(0,0,0,.20);
      padding: 16px;
    }
    .paymentPromptTitle {
      margin: 0;
      font-size: 18px;
      color: #1f2a36;
      font-weight: 700;
    }
    .paymentPromptText {
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.45;
      color: #4d5968;
      font-weight: 600;
    }
    .paymentPromptActions {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .paymentPromptBtn {
      height: 38px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #fff;
      color: #334;
      font-size: 13px;
      font-weight: 700;
      padding: 0 14px;
      cursor: pointer;
    }
    .paymentPromptBtn.primary {
      background: var(--button-soft-bg);
      color: var(--button-soft-text);
      border: 1px solid var(--button-soft-border);
    }
    .paymentLoadingOverlay {
      position: fixed;
      inset: 0;
      background: rgba(17,24,39,.44);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 1250;
    }
    .paymentLoadingModal {
      width: min(380px, 100%);
      background: rgba(255,255,255,.98);
      border-radius: 16px;
      border: 1px solid var(--border);
      box-shadow: 0 20px 48px rgba(0,0,0,.20);
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .paymentLoaderRing {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 3px solid rgba(69,85,108,.22);
      border-top-color: var(--accent);
      animation: vrSpin .85s linear infinite;
    }
    .paymentLoadingText {
      margin: 0;
      text-align: center;
      font-size: 14px;
      line-height: 1.4;
      color: #3d4a5b;
      font-weight: 600;
    }
    @keyframes vrSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .datePromptOverlay {
      position: fixed;
      inset: 0;
      background: rgba(17,24,39,.44);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 20000;
    }
    .datePromptModal {
      width: min(430px, 100%);
      background: rgba(255,255,255,.98);
      border-radius: 14px;
      border: 1px solid var(--border);
      box-shadow: 0 20px 46px rgba(0,0,0,.20);
      padding: 16px;
    }
    .datePromptTitle {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: #1f2a36;
    }
    .datePromptText {
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.45;
      color: #4d5968;
      font-weight: 600;
    }
    .datePromptActions {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }
    .datePromptBtn {
      height: 38px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      padding: 0 14px;
      cursor: pointer;
    }
    .statusDialogOverlay {
      position: fixed;
      inset: 0;
      background: rgba(17,24,39,.44);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 21000;
    }
    .statusDialogModal {
      width: min(460px, 100%);
      background: rgba(255,255,255,.98);
      border-radius: 14px;
      border: 1px solid var(--border);
      box-shadow: 0 20px 46px rgba(0,0,0,.20);
      padding: 16px;
    }
    .statusDialogTitle {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: #1f2a36;
    }
    .statusDialogText {
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.45;
      color: #4d5968;
      font-weight: 600;
      white-space: pre-wrap;
    }
    .statusDialogText.ok {
      color: #0a8f48;
    }
    .statusDialogText.err {
      color: var(--danger);
    }
    .statusDialogActions {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }
    .statusDialogBtn {
      height: 38px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      padding: 0 14px;
      cursor: pointer;
    }
    .propertyInfoOverlay {
      position: fixed;
      inset: 0;
      background: rgba(17,24,39,.48);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 22000;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .propertyInfoModal {
      width: min(760px, 100%);
      max-height: min(760px, calc(100dvh - 40px));
      background: rgba(255,255,255,.98);
      border-radius: 22px;
      border: 1px solid rgba(69,85,108,.12);
      box-shadow: 0 24px 56px rgba(0,0,0,.22);
      padding: 20px;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .propertyInfoTitle {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
      color: #1f2a36;
    }
    .propertyInfoText {
      margin: 12px 0 0;
      font-size: 14px;
      line-height: 1.65;
      color: #475569;
      font-weight: 600;
      white-space: pre-wrap;
      overflow-y: auto;
      min-height: 0;
      -webkit-overflow-scrolling: touch;
    }
    .propertyInfoText.is-rich {
      white-space: normal;
    }
    .propertyInfoActions {
      margin-top: 18px;
      display: flex;
      justify-content: flex-end;
    }
    .propertyInfoBtn {
      min-width: 110px;
      height: 42px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .calendarOverlay {
      position: fixed;
      inset: 0;
      background: rgba(9,14,22,.58);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 22500;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .calendarModal {
      width: min(380px, 100%);
      border-radius: 20px;
      border: 1px solid rgba(148,163,184,.24);
      background:
        radial-gradient(circle at top right, rgba(148,163,184,.18), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.985), rgba(241,245,249,.96));
      box-shadow: 0 24px 56px rgba(2,6,23,.22);
      padding: 16px;
    }
    .calendarModalTop {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .calendarTitle {
      margin: 0;
      font-size: 18px;
      line-height: 1.15;
      color: #1f2a36;
      font-weight: 800;
    }
    .calendarSubtitle {
      margin: 4px 0 0;
      color: #64748b;
      font-size: 12px;
      line-height: 1.4;
      font-weight: 600;
    }
    .calendarCloseBtn {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(69,85,108,.12);
      background: rgba(255,255,255,.82);
      color: #334155;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
    }
    .calendarActions {
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .propertyInfoBtn--ghost {
      background: rgba(255,255,255,.82);
      border-color: rgba(69,85,108,.14);
      color: #475569;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
    }
    .stayDateCal {
      padding: 2px 0 0;
    }
    .stayDateCalHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .stayDateMonth {
      flex: 1;
      text-align: center;
      font-weight: 800;
      font-size: 15px;
      color: #1f2a36;
    }
    .stayDateNav {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      border: 1px solid rgba(69,85,108,.14);
      background: rgba(255,255,255,.92);
      color: #334155;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
    }
    .stayDateNav:hover {
      background: rgba(241,245,249,.96);
    }
    .stayDateWeekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-align: center;
    }
    .stayDateGrid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0;
    }
    .stayDateDay {
      position: relative;
      height: 34px;
      min-height: 34px;
      border: none;
      border-radius: 0;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      padding: 0;
      overflow: visible;
    }
    .stayDateDayNum {
      position: relative;
      z-index: 2;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      color: #1f2937;
      border-radius: 999px;
    }
    .stayDateDay.blank {
      visibility: hidden;
      pointer-events: none;
    }
    .stayDateDay.disabled .stayDateDayNum {
      opacity: .35;
    }
    .stayDateDay.disabled {
      cursor: default;
    }
    .stayDateDay.rangeMid::before,
    .stayDateDay.rangeStart::before,
    .stayDateDay.rangeEnd::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 28px;
      background: rgba(69,85,108,.14);
      z-index: 0;
      pointer-events: none;
    }
    .stayDateDay.rangeMid::before {
      left: 0;
      right: 0;
    }
    .stayDateDay.rangeStart::before {
      left: 50%;
      right: 0;
    }
    .stayDateDay.rangeEnd::before {
      left: 0;
      right: 50%;
    }
    .stayDateDay.selected .stayDateDayNum {
      background: linear-gradient(140deg, var(--accent2), var(--accent));
      color: #fff;
      font-weight: 800;
    }
    .stayDateDay.today:not(.selected):not(.rangeMid):not(.rangeStart):not(.rangeEnd) .stayDateDayNum::after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--accent);
    }
    .stayDateDay.soldout .stayDateDayNum {
      background: rgba(211,47,47,.13);
      color: #b71c1c;
      font-weight: 700;
    }
    .stayDateDay:not(.disabled):not(.soldout):hover .stayDateDayNum {
      background: rgba(69,85,108,.08);
    }
    .stayDateDay.selected:not(.disabled):hover .stayDateDayNum,
    .stayDateDay.rangeMid:not(.disabled):hover::before {
      filter: brightness(.98);
    }
    .stayDateWarn {
      margin-top: 8px;
      min-height: 16px;
      font-size: 12px;
      font-weight: 700;
      color: #b91c1c;
      display: none;
    }
    #calendarOk:disabled {
      opacity: .66;
      cursor: not-allowed;
    }
    .pinOverlay {
      position: fixed;
      inset: 0;
      background: rgba(17,24,39,.44);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 23000;
    }
    .pinModal {
      width: min(420px, 100%);
      background: rgba(255,255,255,.98);
      border-radius: 14px;
      border: 1px solid var(--border);
      box-shadow: 0 20px 46px rgba(0,0,0,.20);
      padding: 16px;
    }
    .pinTitle {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: #1f2a36;
    }
    .pinHint {
      margin: 8px 0 0;
      font-size: 12px;
      line-height: 1.4;
      color: #8a95a3;
      font-weight: 600;
    }
    .pinError {
      margin: 8px 0 0;
      font-size: 12px;
      line-height: 1.4;
      color: var(--danger);
      font-weight: 700;
      min-height: 18px;
    }
    .pinInput {
      margin-top: 10px;
      width: 100%;
      text-align: center;
      letter-spacing: 6px;
      font-size: 20px;
      font-weight: 700;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #f7f9fa;
    }
    .pinActions {
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
    }
    .pinBtn {
      height: 38px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      padding: 0 14px;
      cursor: pointer;
    }
    .pinBtn:disabled {
      opacity: .6;
      cursor: not-allowed;
    }
    .status { margin-top: 10px; font-size: 12px; font-weight: 700; }
    .ok { color: #0a8f48; }
    .err { color: var(--danger); }

    @media (max-width: 700px), ((max-width: 960px) and (max-height: 520px)) {
      input,
      textarea,
      select,
      .cc-search {
        font-size: 16px !important;
      }

      .roomsViewHeader {
        align-items: flex-start;
        gap: 0;
      }

      .roomsBackBtn {
        width: 40px;
      }

      .welcomeFacade {
        margin-top: 14px;
        padding: 18px 16px;
      }

      .siteUnavailableState {
        margin-top: 14px;
        padding: 22px 16px;
        border-radius: 22px;
      }

      .siteUnavailableIcon {
        width: 68px;
        height: 68px;
        border-radius: 22px;
      }

      .siteUnavailableTitle {
        font-size: 22px;
      }

      .siteUnavailableText {
        font-size: 14px;
        line-height: 1.58;
      }

      .welcomeLead {
        font-size: 15px;
        line-height: 1.6;
      }

      .welcomeValuePills {
        gap: 6px;
      }

      .welcomeValuePill {
        font-size: 11px;
        min-height: 28px;
        padding: 0 10px;
      }

      .welcomeHighlights {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 0;
      }

      .welcomeHighlight {
        padding: 0 14px;
      }

      .welcomeHighlight::before {
        display: none;
      }

      .welcomeHighlight:nth-child(odd) {
        border-right: 1px solid rgba(148,163,184,.38);
      }

      .welcomeHighlight:last-child:nth-child(odd) {
        border-right: none;
      }

      .directBookingNote {
        padding: 0;
      }

      .welcomeActions {
        width: 100%;
        justify-content: flex-end;
      }

      .landingFooterActions {
        margin-top: 10px;
      }

      .panel--selfServiceHub .title {
        font-size: 24px;
      }

      .hubView {
        min-height: calc(100dvh - 112px);
      }

      .hubMain {
        padding: 14px 10px 10px;
      }

      .hubChoiceCards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: none;
      }

      .hubChoiceCard {
        min-height: clamp(200px, 42vw, 280px);
        padding: 16px 10px;
        border-radius: 20px;
      }

      .hubChoiceCardIcon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
      }

      .hubChoiceCardIcon svg {
        width: 28px;
        height: 28px;
      }

      .hubChoiceCardTitle {
        font-size: 17px;
      }

      .hubChoiceCardSubtitle {
        font-size: 12px;
        line-height: 1.35;
      }

      .hubContactStrip .contactActionBtn {
        min-height: 52px;
        padding: 10px 6px;
      }

      .welcomeBtn {
        min-height: 48px;
        padding: 0 16px;
      }

      .titleMetaRow {
        gap: 10px;
      }

      html[data-initial-access-mode="public"] .titleMetaRow {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      html[data-initial-access-mode="public"] .brandTop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "title lang"
          "meta meta";
        align-items: start;
        gap: 8px;
      }

      html[data-initial-access-mode="public"] .brandTopMain,
      html[data-initial-access-mode="public"] .brandTopActions {
        display: contents;
      }

      html[data-initial-access-mode="public"] .brandTop .title {
        grid-area: title;
      }

      html[data-initial-access-mode="public"] .brandTopMeta {
        grid-area: meta;
        margin-top: 0;
        width: 100%;
      }

      html[data-initial-access-mode="public"] .brandTopActionsToolbar {
        display: contents;
      }

      html[data-initial-access-mode="public"] #publicLangSwitcher,
      html[data-initial-access-mode="public"] #roomsBackBtn {
        grid-area: lang;
        justify-self: end;
      }

      html[data-initial-access-mode="public"] .titleLocation {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        padding: 6px 12px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      html[data-initial-access-mode="public"] #welcomePoliciesBtn {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
      }

      html[data-initial-access-mode="public"] .landingStaySearchGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      html[data-initial-access-mode="public"] .landingStaySearchGrid .landingStayGuests {
        grid-column: 1 / -1;
      }

      html[data-initial-access-mode="public"] .welcomeFacade--compact .welcomeIntro {
        flex-wrap: nowrap;
        gap: 10px;
      }

      html[data-initial-access-mode="public"] .welcomeFacade--compact .directBookingNote {
        order: 1;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        flex: 1 1 auto;
        min-width: 0;
      }

      html[data-initial-access-mode="public"] .welcomeFacade--compact .directBookingNoteText {
        min-height: 28px;
        padding: 5px 10px;
        font-size: 11px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      html[data-initial-access-mode="public"] .welcomeFacade--compact .welcomeHighlights--compact {
        order: 2;
        margin-left: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
      }

      html.room-cards--platform .roomCardFooter .roomPrice {
        font-size: 13px;
      }

      html.room-cards--platform .roomCardFooter .roomCardCta {
        min-height: 36px;
        padding: 0 14px;
        font-size: 12px;
      }

      html[data-initial-access-mode="public"] .brandTopMain {
        min-width: 0;
        flex: 1 1 auto;
      }

      html[data-initial-access-mode="public"] .brandTopActions {
        flex: 0 0 auto;
        margin-left: 4px;
      }

      html[data-initial-access-mode="public"] .publicLangToggle {
        min-height: 34px;
        padding: 0 10px;
        box-shadow: none;
      }

      html[data-initial-access-mode="public"] .title {
        font-size: clamp(18px, 5vw, 22px);
        line-height: 1.2;
      }

      .titleMetaAction {
        min-height: 38px;
        padding: 0 16px;
      }

      .welcomeActions {
        width: 100%;
      }

      .welcomeBtn.primary {
        min-height: 50px;
        width: 100%;
        padding-right: 40px;
      }

      .welcomeBtn.primary::after {
        right: 15px;
      }

      .contactActions {
        margin-top: 14px;
        margin-bottom: 0;
        padding: 0;
        gap: 8px;
        border-radius: 0;
        border: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        overflow: visible;
        justify-content: stretch;
      }

      .contactActions--modern {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .contactActionBtn--modern {
        min-height: 72px;
        padding: 10px 6px;
        border-radius: 16px;
        max-width: none;
        flex: initial;
      }

      .contactActionIcon--modern {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 12px;
      }

      .contactActionLabel {
        font-size: 11px;
      }

      .propertyFooter {
        margin-top: 14px;
        padding: 14px 12px;
      }

      .propertyFooterAddress {
        font-size: 13px;
      }

      .propertyFooterPhone {
        font-size: 14px;
      }

      .hubContactStrip.is-visible {
        width: min(96%, 920px);
        max-width: 920px;
        margin: auto auto 6px;
        padding-top: 10px;
      }

      .hubContactStrip .contactActionBtn + .contactActionBtn {
        border-left: none;
      }

      .contactActionBtn {
        min-height: 52px;
        padding: 8px 10px;
        justify-content: center;
        align-items: center;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.82);
        border: 0.5px solid rgba(60, 60, 67, 0.1);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        flex: 1;
        max-width: 112px;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.22s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.22s ease, box-shadow 0.22s ease;
      }

      .contactActionBtn:active {
        transform: scale(0.94);
        opacity: 0.88;
      }

      .contactActionBtn + .contactActionBtn {
        border-left: none;
      }

      .contactActionBtn:hover {
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
      }

      .contactActionIcon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 12px;
        border: 0.5px solid rgba(255, 255, 255, 0.72);
        box-shadow:
          0 0.5px 0 rgba(255, 255, 255, 0.95) inset,
          0 1px 2px rgba(15, 23, 42, 0.06);
        background: rgba(120, 120, 128, 0.08);
      }

      .contactActionBtn.phone .contactActionIcon {
        background: linear-gradient(180deg, rgba(99, 115, 140, 0.2) 0%, rgba(99, 115, 140, 0.1) 100%);
        color: #3a4a61;
      }

      .contactActionBtn.whatsapp .contactActionIcon {
        background: linear-gradient(180deg, rgba(37, 211, 102, 0.24) 0%, rgba(37, 211, 102, 0.12) 100%);
        color: #0f8a4a;
      }

      .contactActionBtn.directions .contactActionIcon {
        background: linear-gradient(180deg, rgba(88, 86, 214, 0.22) 0%, rgba(88, 86, 214, 0.11) 100%);
        color: #5856d6;
      }

      .contactActionIcon svg {
        width: 22px;
        height: 22px;
      }

      .contactActionCopy {
        display: none;
      }

      .heroSwipeHint {
        bottom: 10px;
        padding: 6px 10px;
        gap: 6px;
      }

      .heroSwipeHintText {
        font-size: 10px;
      }

      .modal {
        padding-left: 14px;
        padding-right: 14px;
      }

      .calendarOverlay {
        padding: 16px;
      }

      .calendarModal {
        padding: 14px 12px;
        border-radius: 18px;
      }

      .stayDateDay {
        height: 32px;
        min-height: 32px;
      }

      .stayDateDayNum {
        width: 26px;
        height: 26px;
        font-size: 12px;
      }

      .closeRow {
        padding-bottom: 10px;
      }

      .heroCarouselInner {
        height: 232px;
      }

      html[data-initial-access-mode="public"] .heroCarouselInner {
        height: 168px;
      }

      html.room-cards--platform .roomCard {
        height: auto;
      }

      html.room-cards--platform .roomCardInner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
      }

      html.room-cards--platform .roomMedia {
        height: clamp(176px, 48vw, 220px);
        border-right: none;
        border-bottom: 1px solid var(--border);
      }

      html.room-cards--platform .roomBody {
        min-height: 0;
        padding: 10px 12px;
      }

      html.room-cards--platform .roomName {
        font-size: 18px;
      }

      html.room-cards--platform .roomPrice {
        font-size: 15px;
      }

      html.room-cards--platform .roomMediaBadge {
        top: 8px;
        left: 8px;
        font-size: 11px;
        padding: 5px 9px;
      }

      html[data-initial-access-mode="public"] .welcomeFacade--compact {
        margin: 10px 0 0;
        padding: 0;
      }

      html[data-initial-access-mode="public"] .welcomeCompactChip {
        min-height: 28px;
        font-size: 11px;
      }

      .fieldGrid { grid-template-columns: 1fr; }

      .fieldRow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .guestCountsRow > .field {
        justify-content: flex-end;
      }

      .guestCountsRow .fieldLabelRow {
        min-height: 20px;
      }

      .phonePrefix {
        width: 106px;
        min-width: 106px;
      }
      .phonePrefixDisplay {
        width: 106px;
        min-width: 106px;
      }

      .roomsGrid .roomNav {
        display: none !important;
      }

      .roomCard {
        height: 272px;
      }

      .roomCardInner {
        grid-template-columns: minmax(118px, 1fr) minmax(0, 2fr);
        height: 272px;
      }

      .roomBody {
        padding: 12px 14px;
        gap: 7px;
      }

      .roomName {
        font-size: 21px;
        line-height: 1.15;
      }

      .roomMeta,
      .roomOccupancy {
        font-size: 12px;
      }

      .roomPrice {
        font-size: 15px;
      }

      .bookingSummaryGrid {
        grid-template-columns: 1fr;
      }

      .guestGrid {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .mediaViewerOverlay {
        padding-left: 8px;
        padding-right: 8px;
      }

      .mediaViewerNav {
        width: 36px;
        height: 36px;
      }
    }

    @media (max-width: 700px) and (orientation: portrait) {
      html[data-initial-access-mode="public"] .panel {
        overflow-x: clip;
      }
    }

    @media (max-width: 700px) and (orientation: landscape) {
      .roomsGrid .roomNav {
        display: flex;
      }

      .mediaViewerOverlay {
        padding: max(4px, env(safe-area-inset-top)) 0 max(4px, env(safe-area-inset-bottom));
        gap: 0;
      }

      .mediaViewerStage {
        width: 100%;
        padding: 0 44px;
      }

      .mediaViewerImg {
        max-width: 100vw;
        max-height: 100dvh;
      }

      .mediaViewerFooter {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 10px 16px max(10px, env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(5,8,12,0), rgba(5,8,12,.88));
      }
    }

    @media (max-width: 380px) {
      .heroCarouselInner {
        height: 208px;
      }

      html[data-initial-access-mode="public"] .heroCarouselInner {
        height: 148px;
      }

      html.room-cards--platform .roomMedia {
        height: clamp(160px, 44vw, 196px);
      }

      html.room-cards--platform .roomBody {
        min-height: 0;
        padding: 10px 12px;
      }

      html.room-cards--platform .roomName {
        font-size: 17px;
      }

      html.room-cards--platform .roomMediaBadge {
        top: 7px;
        left: 7px;
        font-size: 10px;
        padding: 4px 8px;
      }

      .heroNav {
        width: 34px;
        height: 34px;
      }

      .guestCountsRow .inlineCheckbox {
        font-size: 11px;
        gap: 4px;
      }

      .roomCard {
        height: 248px;
      }

      .roomCardInner {
        grid-template-columns: minmax(108px, 1fr) minmax(0, 1.9fr);
        height: 248px;
      }

      .roomBody {
        padding: 10px 12px;
        gap: 6px;
      }

      .roomName {
        font-size: 19px;
      }

      .mediaViewerClose {
        width: 38px;
        height: 38px;
      }

      .roomMeta,
      .roomOccupancy {
        font-size: 11px;
      }

      .availabilityBadge {
        font-size: 12px;
        padding: 5px 8px;
      }

      .roomPrice {
        font-size: 14px;
      }
    }

    .cookieConsentBanner {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 12000;
      padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
      pointer-events: none;
    }

    .cookieConsentBanner[hidden] {
      display: none !important;
    }

    .cookieConsentBannerInner {
      pointer-events: auto;
      max-width: 980px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 18px 42px rgba(17, 24, 39, 0.14);
    }

    .cookieConsentCopy {
      min-width: 0;
      flex: 1 1 auto;
    }

    .cookieConsentTitle {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px;
    }

    .cookieConsentText {
      margin: 0;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .cookieConsentLink {
      color: var(--accent);
      font-weight: 600;
      text-decoration: none;
    }

    .cookieConsentLink:hover {
      text-decoration: underline;
    }

    .cookieConsentActions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex: 0 0 auto;
    }

    .cookieConsentBtn {
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .cookieConsentBtnPrimary {
      background: var(--accent);
      color: #fff;
    }

    .cookieConsentBtnSecondary {
      background: var(--button-soft-bg);
      color: var(--button-soft-text);
      border-color: var(--button-soft-border);
    }

    .cookieConsentBtnPrimary:hover {
      filter: brightness(1.04);
    }

    .cookieConsentBtnSecondary:hover {
      background: var(--button-soft-bg-hover);
    }

    @media (max-width: 700px) {
      .cookieConsentBannerInner {
        flex-direction: column;
        align-items: stretch;
      }

      .cookieConsentActions {
        width: 100%;
      }

      .cookieConsentBtn {
        flex: 1 1 auto;
      }
    }