/* Сценарий: сначала выбор номера, затем оформление и передача брони управляющему. */
.demo-room-action { position: relative; display: inline-block; }
.demo-room-cursor,
.demo-booking-sheet .demo-cursor {
  position: absolute;
  z-index: 5;
  width: 21px;
  height: 28px;
  background: #075b82;
  clip-path: polygon(0 0, 100% 58%, 60% 63%, 48% 100%);
  filter: drop-shadow(0 2px 2px rgba(9, 57, 78, .34));
  pointer-events: none;
  opacity: 0;
}
.demo-room-cursor { right: -16px; bottom: -15px; }
.demo-booking-sheet .demo-cursor { right: 21px; bottom: 15px; }

.demo-owner-handoff {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  min-width: 260px;
  padding: 15px 21px;
  border: 1px solid rgba(142, 231, 241, .42);
  border-radius: 16px;
  background: rgba(8, 61, 87, .96);
  box-shadow: 0 16px 35px rgba(8, 61, 87, .28);
  color: #fff;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -42%) scale(.96);
}
.demo-owner-handoff span { display: block; margin-bottom: 5px; color: #8ee7f1; font: 700 9px/1 Manrope, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.demo-owner-handoff strong { display: block; font: 800 15px/1.15 Manrope, sans-serif; letter-spacing: -.03em; }

.demo-admin-nav > span { position: relative; }
.demo-nav-cursor {
  position: absolute;
  z-index: 8;
  right: 5px;
  bottom: -10px;
  width: 17px;
  height: 22px;
  background: #e8fbff;
  clip-path: polygon(0 0, 100% 58%, 60% 63%, 48% 100%);
  filter: drop-shadow(0 2px 2px rgba(3, 43, 63, .44));
  pointer-events: none;
  opacity: 0;
}

.demo-admin-room-view,
.demo-admin-review-view {
  position: absolute;
  z-index: 3;
  inset: 0 0 0 172px;
  padding: 22px 25px;
  background: #f8fdff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
.demo-admin-view-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.demo-admin-view-heading span { display: block; margin-bottom: 5px; color: #2786aa; font: 700 8px/1 Manrope, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.demo-admin-view-heading h4 { margin: 0; color: #173f55; font: 800 19px/1.05 Manrope, sans-serif; letter-spacing: -.05em; }
.demo-admin-view-heading > b { padding: 6px 8px; border-radius: 999px; background: #d8f8ee; color: #167060; font: 800 8px/1 Manrope, sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.demo-admin-room-list { display: grid; gap: 8px; }
.demo-admin-room-list > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 34px 12px 12px; border: 1px solid #d8eaf0; border-radius: 11px; background: #fff; }
.demo-admin-room-list span { color: #245d75; font: 800 11px/1.2 Manrope, sans-serif; }
.demo-admin-room-list strong { color: #126f94; font: 800 12px/1 Manrope, sans-serif; }
.demo-admin-room-list small { grid-column: 1 / -1; color: #718f9f; font-size: 8px; }
.demo-admin-scroll { position: absolute; top: 65px; right: 8px; width: 3px; height: 38px; border-radius: 999px; background: #49b9d0; opacity: 0; }
.demo-admin-review-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px 10px; padding: 14px; border: 1px solid #c9e5ed; border-radius: 14px; background: #fff; box-shadow: 0 9px 22px rgba(35,103,131,.08); }
.demo-admin-review-card .demo-guest-avatar { width: 30px; height: 30px; border-radius: 9px; }
.demo-admin-review-card strong,.demo-admin-review-card small { display: block; }
.demo-admin-review-card strong { color: #234f64; font: 700 11px/1.2 Manrope, sans-serif; }
.demo-admin-review-card small { margin-top: 2px; color: #7994a3; font-size: 8px; }
.demo-admin-review-card p { grid-column: 1 / -1; margin: 2px 0 0; color: #315e73; font: 600 11px/1.35 Manrope, sans-serif; }
.demo-admin-review-card button { grid-column: 1 / -1; justify-self: start; padding: 8px 10px; border: 0; border-radius: 8px; background: #187bb2; color: #fff; font: 700 9px/1 Manrope, sans-serif; }
.demo-edit-icon { position: absolute; right: 10px; bottom: 9px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: #e5f7fb; color: #147fa7; font: 800 13px/1 sans-serif; font-style: normal; }
.demo-admin-review-card { position: relative; }
.demo-admin-review-list { display: grid; gap: 7px; }
.demo-admin-review-list article { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 34px 9px 9px; border: 1px solid #d8eaf0; border-radius: 10px; background: #fff; }
.demo-admin-review-list .demo-guest-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.demo-admin-review-list strong,.demo-admin-review-list small { display: block; }
.demo-admin-review-list strong { color: #245d75; font: 800 10px/1.1 Manrope, sans-serif; }
.demo-admin-review-list small { margin-top: 3px; overflow: hidden; color: #718f9f; font-size: 8px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.demo-admin-review-list b { padding: 5px 6px; border-radius: 999px; background: #e8f7fb; color: #28718b; font: 800 7px/1 Manrope, sans-serif; text-transform: uppercase; }
.demo-admin-review-list .demo-edit-icon { top: 50%; bottom: auto; transform: translateY(-50%); }

.demo-booking-details {
  display: grid !important;
  grid-template-columns: 1.34fr 1.1fr .85fr !important;
  gap: 0 !important;
  margin: 14px 0 0 !important;
  padding: 13px 0 14px !important;
  border-top: 1px solid #d8e7ed;
  border-bottom: 1px solid #d8e7ed;
}

.demo-booking-details div {
  padding: 0 10px;
  border-left: 1px solid #e2edf1;
}

.demo-booking-details div:first-child {
  padding-left: 0;
  border-left: 0;
}

.demo-booking-details dt {
  margin-bottom: 7px !important;
  color: #7893a2 !important;
  font-size: 9px !important;
}

.demo-booking-details dd {
  color: #315e73 !important;
  font: 800 10px/1.45 Manrope, sans-serif !important;
}

.demo-booking-details dd span { display: block; white-space: nowrap; }

.demo-admin-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-top: 0 !important;
}

.demo-admin-footer span { min-width: 0; line-height: 1.35; }
.demo-admin-footer button { white-space: nowrap; }
.demo-admin-nav strong i { position: relative; font-size: 0; color: #fff; }
.demo-admin-nav strong i::before { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; }
.demo-admin-nav strong i::after { content: ""; position: absolute; width: 10px; height: 1.5px; background: currentColor; }

/* Отзывы рассчитаны на короткую плотную ленту, а не на две огромные карточки. */
.review-list { display: grid; gap: 14px; }
.review-card {
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 16px;
  padding: 25px 29px;
  border-radius: 23px;
}
.review-mark { font-size: 52px; }
.review-card blockquote { font-size: clamp(19px, 2.2vw, 28px); line-height: 1.32; }
.review-card footer { gap: 11px; padding-top: 15px; }
.review-card footer img { width: 47px; height: 47px; flex-basis: 47px; }

@media (prefers-reduced-motion: no-preference) {
  .booking-demo.is-visible .demo-guest-screen,
  .booking-demo.is-visible .demo-admin-screen,
  .booking-demo.is-visible .demo-booking-sheet,
  .booking-demo.is-visible .demo-sent-note,
  .booking-demo.is-visible .demo-room-cursor,
  .booking-demo.is-visible .demo-cursor,
  .booking-demo.is-visible .demo-transition-flash,
  .booking-demo.is-visible .demo-owner-handoff,
  .booking-demo.is-visible .demo-admin-room-view,
  .booking-demo.is-visible .demo-admin-review-view,
  .booking-demo.is-visible .demo-nav-home,
  .booking-demo.is-visible .demo-nav-rooms,
  .booking-demo.is-visible .demo-nav-reviews,
  .booking-demo.is-visible .demo-nav-cursor,
  .booking-demo.is-visible .demo-admin-room-list > div { animation-duration: 22s; }
  .demo-room-cursor,
  .demo-owner-handoff,
  .demo-admin-room-view,
  .demo-admin-review-view,
  .demo-nav-home,
  .demo-nav-rooms,
  .demo-nav-reviews,
  .demo-nav-cursor,
  .demo-admin-room-list > div { animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-iteration-count: infinite; animation-play-state: paused; }
  .booking-demo.is-visible .demo-room-cursor { animation-name: demo-room-cursor; animation-play-state: running; }
  .booking-demo.is-visible .demo-owner-handoff { animation-name: demo-owner-handoff; animation-play-state: running; }
  .booking-demo.is-visible .demo-admin-room-view { animation-name: demo-admin-room-view; animation-play-state: running; }
  .booking-demo.is-visible .demo-admin-review-view { animation-name: demo-admin-review-view; animation-play-state: running; }
  .booking-demo.is-visible .demo-nav-home { animation-name: demo-nav-home; animation-play-state: running; }
  .booking-demo.is-visible .demo-nav-rooms { animation-name: demo-nav-rooms; animation-play-state: running; }
  .booking-demo.is-visible .demo-nav-reviews { animation-name: demo-nav-reviews; animation-play-state: running; }
  .booking-demo.is-visible .demo-nav-cursor-rooms { animation-name: demo-nav-cursor-rooms; animation-play-state: running; }
  .booking-demo.is-visible .demo-nav-cursor-reviews { animation-name: demo-nav-cursor-reviews; animation-play-state: running; }
  @keyframes demo-room-cursor {
    0%, 3% { opacity: 0; transform: translate(22px, 15px); }
    5%, 12% { opacity: 1; transform: translate(0, 0); }
    13%, 16% { opacity: 1; transform: translate(2px, 3px) scale(.84); }
    18%, 100% { opacity: 0; transform: translate(2px, 3px) scale(.84); }
  }
  @keyframes demo-guest-screen {
    0%, 42% { opacity: 1; transform: scale(1) translateY(0); }
    48%, 100% { opacity: 0; transform: scale(.97) translateY(-12px); }
  }
  @keyframes demo-booking-sheet {
    0%, 16% { opacity: 0; transform: translateY(130%); }
    18%, 40% { opacity: 1; transform: translateY(0); }
    44%, 100% { opacity: 0; transform: translateY(18%); }
  }
  @keyframes demo-sent-note {
    0%, 34% { opacity: 0; transform: scale(.96); }
    37%, 42% { opacity: 1; transform: scale(1); }
    44%, 100% { opacity: 0; transform: scale(1.03); }
  }
  @keyframes demo-cursor {
    0%, 22% { opacity: 0; transform: translate(23px, 16px); }
    25%, 32% { opacity: 1; transform: translate(0, 0); }
    33%, 37% { opacity: 1; transform: translate(2px, 3px) scale(.84); }
    39%, 100% { opacity: 0; transform: translate(2px, 3px) scale(.84); }
  }
  @keyframes demo-transition-flash {
    0%, 43% { opacity: 0; }
    45% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @keyframes demo-owner-handoff {
    0%, 45% { opacity: 0; transform: translate(-50%, -42%) scale(.96); }
    48%, 58% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    61%, 100% { opacity: 0; transform: translate(-50%, -56%) scale(1.02); }
  }
  @keyframes demo-admin-screen {
    0%, 62% { opacity: 0; transform: scale(.96) translateY(14px); }
    66%, 98% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(.99) translateY(-5px); }
  }
  @keyframes demo-nav-home {
    0%, 70% { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
    71%, 100% { background: transparent; color: #cfeaf3; font-weight: 400; }
  }
  @keyframes demo-nav-rooms {
    0%, 71% { background: transparent; color: #cfeaf3; font-weight: 400; }
    73%, 79% { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
    80%, 100% { background: transparent; color: #cfeaf3; font-weight: 400; }
  }
  @keyframes demo-nav-reviews {
    0%, 80% { background: transparent; color: #cfeaf3; font-weight: 400; }
    82%, 100% { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
  }
  @keyframes demo-nav-cursor-rooms {
    0%, 66% { opacity: 0; transform: translate(17px, 10px); }
    68%, 71% { opacity: 1; transform: translate(0, 0); }
    72%, 73% { opacity: 1; transform: translate(2px, 3px) scale(.84); }
    75%, 100% { opacity: 0; transform: translate(2px, 3px) scale(.84); }
  }
  @keyframes demo-nav-cursor-reviews {
    0%, 76% { opacity: 0; transform: translate(17px, 10px); }
    78%, 81% { opacity: 1; transform: translate(0, 0); }
    82%, 83% { opacity: 1; transform: translate(2px, 3px) scale(.84); }
    85%, 100% { opacity: 0; transform: translate(2px, 3px) scale(.84); }
  }
  @keyframes demo-admin-room-view {
    0%, 73% { opacity: 0; transform: translateY(12px); }
    75%, 79% { opacity: 1; transform: translateY(0); }
    81%, 100% { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes demo-admin-review-view {
    0%, 80% { opacity: 0; transform: translateY(12px); }
    83%, 99% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-6px); }
  }
}

@media (max-width: 700px) {
  .demo-admin-screen { grid-template-columns: 82px minmax(0, 1fr); }
  .demo-admin-nav { gap: 5px; padding: 11px 6px; }
  .demo-admin-nav strong {
    justify-content: flex-start;
    gap: 4px;
    margin-bottom: 9px;
    font-size: 8px;
  }
  .demo-admin-nav strong i { width: 20px; height: 20px; font-size: 10px; }
  .demo-admin-nav > span {
    justify-content: flex-start;
    gap: 3px;
    min-height: 25px;
    padding: 5px 3px;
    font-size: 7px;
    line-height: 1.15;
  }
  .demo-admin-nav > span::before { display: none; }
  .demo-admin-nav b { position: static; margin: 0 0 0 auto; flex: 0 0 12px; width: 12px; height: 12px; font-size: 7px; }
  .demo-admin-content { min-width: 0; }
  .demo-admin-top { gap: 7px; }
  .demo-admin-top > div { min-width: 0; }
  .demo-booking-sheet .demo-cursor { right: 20px; bottom: 14px; }
  .demo-room-cursor { right: -13px; bottom: -13px; }
  .demo-owner-handoff { width: calc(100% - 42px); min-width: 0; padding: 12px 14px; border-radius: 13px; }
  .demo-owner-handoff span { margin-bottom: 4px; font-size: 7px; }
  .demo-owner-handoff strong { font-size: 11px; }
  .demo-nav-cursor { right: 2px; bottom: -8px; width: 13px; height: 18px; }
  .demo-admin-room-view,
  .demo-admin-review-view { left: 82px; padding: 13px 10px; }
  .demo-admin-view-heading { gap: 7px; margin-bottom: 10px; }
  .demo-admin-view-heading span { margin-bottom: 3px; font-size: 6px; }
  .demo-admin-view-heading h4 { font-size: 13px; }
  .demo-admin-view-heading > b { padding: 4px 5px; font-size: 6px; }
  .demo-admin-room-list { gap: 5px; }
  .demo-admin-room-list > div { gap: 3px 6px; padding: 8px 27px 8px 8px; border-radius: 8px; }
  .demo-admin-room-list span { font-size: 8px; }
  .demo-admin-room-list strong { font-size: 9px; }
  .demo-admin-room-list small { font-size: 6px; }
  .demo-edit-icon { right: 6px; bottom: 6px; width: 14px; height: 14px; border-radius: 5px; font-size: 10px; }
  .demo-admin-review-list { gap: 4px; }
  .demo-admin-review-list article { grid-template-columns: 23px minmax(0, 1fr) auto; gap: 5px; padding: 6px 25px 6px 6px; border-radius: 7px; }
  .demo-admin-review-list .demo-guest-avatar { width: 23px; height: 23px; border-radius: 7px; font-size: 9px; }
  .demo-admin-review-list strong { font-size: 7px; }
  .demo-admin-review-list small { margin-top: 2px; font-size: 5.5px; }
  .demo-admin-review-list b { padding: 4px; font-size: 5px; }
  .demo-admin-review-list .demo-edit-icon { right: 5px; bottom: auto; }
  .demo-admin-review-card { grid-template-columns: 23px minmax(0, 1fr); gap: 6px 7px; padding: 9px; border-radius: 9px; }
  .demo-admin-review-card .demo-guest-avatar { width: 23px; height: 23px; border-radius: 7px; font-size: 9px; }
  .demo-admin-review-card strong { font-size: 8px; }
  .demo-admin-review-card small { font-size: 6px; }
  .demo-admin-review-card p { font-size: 8px; line-height: 1.25; }
  .demo-admin-review-card button { padding: 6px 7px; border-radius: 6px; font-size: 7px; }
  .demo-admin-content { padding: 12px 8px; }
  .demo-admin-top h4 { font-size: 16px; line-height: 1.05; }
  .demo-stat-row { gap: 4px; margin: 10px 0; }
  .demo-stat-row div { padding: 7px 4px; }
  .demo-stat-row span { margin-bottom: 4px; font-size: 6.5px; line-height: 1.15; }
  .demo-stat-row strong { font-size: 9px; white-space: nowrap; }
  .demo-new-booking { padding: 9px; }
  .demo-new-booking-title > span { font-size: 10px; line-height: 1.15; }
  .demo-new-booking-title b { padding: 5px 6px; font-size: 7px; }
  .demo-guest-line { align-items: flex-start; gap: 7px; padding: 10px 0; }
  .demo-guest-line > div { min-width: 0; }
  .demo-guest-line strong { font-size: 10px; }
  .demo-guest-line small { overflow: hidden; font-size: 7.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .demo-booking-details {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 11px 0 12px !important;
  }
  .demo-booking-details div,
  .demo-booking-details div:first-child { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 5px; padding: 5px 0; border-left: 0; border-bottom: 1px solid #e2edf1; }
  .demo-booking-details div:last-child { border-bottom: 0; }
  .demo-booking-details dt { margin: 0 !important; font-size: 7px !important; }
  .demo-booking-details dd { font-size: 8px !important; line-height: 1.25 !important; }
  .demo-admin-footer { display: flex !important; justify-content: flex-end; gap: 0; padding-top: 10px !important; }
  .demo-admin-footer span { display: none !important; }
  .demo-admin-footer button { padding: 8px 9px; font-size: 9px; }
  .review-list { gap: 11px; }
  .review-card {
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 8px;
    padding: 12px 13px;
    border-radius: 15px;
  }
  .review-mark { font-size: 29px; }
  .review-card blockquote { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
  .review-card footer { gap: 7px; padding-top: 8px; }
  .review-card footer img { width: 33px; height: 33px; flex-basis: 33px; }
  .review-card footer strong { font-size: 11px; font-weight: 700; white-space: nowrap; }
  .review-card footer span { margin-top: 2px; font-size: 9px; white-space: nowrap; }
}