@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600;700;800;900&family=Quicksand:wght@400;500;600;700&display=swap");

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

body {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  color: var(--text-on-light);
  background: var(--page-bg, #faf8f9);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea,
.subpage button,
.subpage input,
.subpage select,
.subpage textarea {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
}

.subpage .swal2-popup,
.swal2-popup {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif !important;
}

h1, h2 {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.flex {
  display: flex;
}

.flex_space {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  border: none;
  background: none;
  outline: none;
  transition: 0.5s;
  cursor: pointer;
}

.primary-btn {
  padding: 15px 40px;
  background: #7fc142;
  font-weight: bold;
  color: white;
}

.secondary-btn {
  padding: 15px 40px;
  background: none;
  border: 2px solid white;
  font-weight: bold;
  color: white;
}

.container {
  width: 100%;
  max-width: var(--page-max-width, 1280px);
  margin-inline: auto;
  padding-inline: var(--page-gutter, clamp(0.85rem, 2.5vw, 1.5rem));
}

/*--------header---------*/
:root {
  --page-max-width: 1280px;
  --page-gutter: clamp(0.85rem, 2.5vw, 1.5rem);
  --section-gap: clamp(1.5rem, 3vw, 2rem);
  --section-gap-sm: clamp(0.85rem, 1.8vw, 1.15rem);
  --page-bg: #faf8f9;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 0.18s;
  --motion: 0.28s;
  --motion-slow: 0.42s;
  --header-pink: #c46b82;
  --header-pink-dark: #c46b82;
  --header-pink-light: #c46b82;
  --brand-pink: #c46b82;
  --brand-pink-dark: #c46b82;
  --brand-pink-soft: #c46b82;
  --theme-pink: #c46b82;
  --theme-pink-dark: #c46b82;
  --theme-pink-soft: #c46b82;
  --pa-pink: #c46b82;
  --brand-ink: #3d3340;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.9);
  --text-on-light: #1a1220;
  --ui-overlay-pad-y: max(12px, env(safe-area-inset-top, 0px));
  --ui-overlay-pad-x: max(12px, env(safe-area-inset-right, 0px));
  --ui-overlay-pad-b: max(12px, env(safe-area-inset-bottom, 0px));
  --ui-overlay-pad-l: max(12px, env(safe-area-inset-left, 0px));
  --ui-dialog-max-h: min(92dvh, calc(100dvh - 24px));
  --ui-dialog-max-w: min(100%, calc(100vw - 24px));
  --ui-z-overlay: 3000;
  --ui-z-panel: 10100;
  --ui-z-alert: 20000;

  /* Shared data-table tokens (admin / manager / reception) */
  --dt-radius: 12px;
  --dt-shadow: 0 8px 22px rgba(31, 43, 22, 0.05), 0 2px 8px rgba(196, 107, 130, 0.07);
  --dt-border: 1px solid rgba(127, 193, 66, 0.22);
  --dt-border-pink: 1px solid rgba(196, 107, 130, 0.18);
  --dt-head-bg: #f4f8ee;
  --dt-head-bg-pink: #fdf5f7;
  --dt-head-color: #3e4a34;
  --dt-head-color-pink: #6b4a55;
  --dt-row-line: #e8eedf;
  --dt-row-line-pink: rgba(196, 107, 130, 0.12);
  --dt-row-alt: #fcfdf9;
  --dt-row-alt-pink: #fffafb;
  --dt-row-hover: #f4f9ec;
  --dt-row-hover-pink: #fff5f8;
  --dt-cell-pad-y: 7px;
  --dt-cell-pad-x: 10px;
  --dt-font: 0.82rem;
  --dt-th-size: 0.68rem;
}

/* Staff dashboards need a wider content rail */
body.admin-app,
body[data-staff-portal] {
  --page-max-width: 1480px;
}

header {
  --header-progress: 0;
  --header-logo-h: calc(clamp(2.25rem, 4.5vw, 3.375rem) - (0.72rem * var(--header-progress)));
  --header-pad-y: calc(clamp(0.5rem, 1.2vw, 0.65rem) - (0.28rem * var(--header-progress)));
  --header-pad-x: var(--page-gutter, clamp(0.85rem, 2.5vw, 1.5rem));
  min-height: calc(clamp(4.5rem, 9vw, 5.5rem) - (1.35rem * var(--header-progress)));
  height: auto;
  line-height: normal;
  padding: var(--header-pad-y) 0;
  padding-top: max(var(--header-pad-y), env(safe-area-inset-top, 0px));
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  overflow: visible;
  background: #c46b82;
  background-clip: border-box;
  color: var(--text-on-dark);
  border: 0 none transparent;
  border-top: 0 none transparent;
  border-bottom: 0 none transparent;
  outline: none;
  /* Flat at rest — elevation fades in via .is-scrolled */
  box-shadow: none;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  transition:
    box-shadow 0.38s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color 0.38s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
    backdrop-filter 0.38s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
    -webkit-backdrop-filter 0.38s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
    min-height 0.28s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
    padding 0.28s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

header.is-scrolled {
  border-bottom: 0 none transparent;
  border-bottom-color: transparent;
  box-shadow:
    0 6px 16px rgba(45, 32, 38, 0.14),
    0 14px 36px rgba(196, 107, 130, 0.28);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

header.is-compact {
  border-bottom: 0 none transparent;
  border-bottom-color: transparent;
}

header .site-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  max-width: 100%;
}

header .site-logo,
header .logo img {
  margin: 0;
  display: block;
  height: var(--header-logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transform-origin: left center;
}

header ul,
header .site-nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(clamp(0.1rem, 0.35vw, 0.3rem) - (0.04rem * var(--header-progress)));
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

header .navlinks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  gap: 0.5rem;
}

header .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(clamp(0.5rem, 1.5vw, 0.85rem) - (0.12rem * var(--header-progress)));
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--header-pad-x);
  min-width: 0;
  box-sizing: border-box;
}

header .logo {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(14rem, 36%);
}

header ul li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* [hidden] loses to header ul li { display:flex } — force hide for logged-in customers */
body.book-page.customer-logged-in header li[data-customer-extra="1"],
body.book-page.customer-logged-in header #roleLoginNav,
body.book-page.customer-logged-in header .role-login-nav,
header li[data-customer-extra="1"][hidden],
header #roleLoginNav[hidden],
header .role-login-nav[hidden] {
  display: none !important;
}

header ul li a {
  color: var(--text-on-dark);
  margin: 0;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  padding: calc(clamp(0.5rem, 0.9vw, 0.65rem) - (0.1rem * var(--header-progress))) calc(clamp(0.5rem, 1vw, 0.85rem) - (0.05rem * var(--header-progress)));
  border-radius: 999px;
  font-weight: 600;
  font-size: clamp(0.7rem, 0.58rem + 0.35vw, 0.82rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  box-sizing: border-box;
}

header ul li a.primary-btn {
  padding: calc(clamp(0.5rem, 0.95vw, 0.65rem) - (0.08rem * var(--header-progress))) calc(clamp(0.85rem, 1.35vw, 1.15rem) - (0.06rem * var(--header-progress)));
  font-size: clamp(0.7rem, 0.58rem + 0.35vw, 0.8rem);
  min-height: 2.625rem;
}

.nav-menu-toggle,
header button.nav-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  flex-shrink: 0;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-menu-toggle__bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--text-on-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-menu-toggle.is-active .nav-menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-menu-toggle.is-active .nav-menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-menu-toggle.is-active .nav-menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-menu-toggle:hover,
.nav-menu-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  border-color: #fff;
  outline: none;
}

.nav-menu-toggle:hover .nav-menu-toggle__bar,
.nav-menu-toggle:focus-visible .nav-menu-toggle__bar {
  background: var(--header-pink-dark);
}

header ul li a:hover {
  color: var(--brand-ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header ul li a:active {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

header ul li a:focus-visible {
  outline: none;
  color: var(--brand-ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Admin / staff portal nav — active state without underlines */
body.subpage header ul li a[href^="#section-"] {
  display: inline-block;
}

body.subpage header ul li a[href^="#section-"].active:not(.admin-nav-dropdown-item) {
  color: var(--brand-ink);
  background: #ffffff;
}

body.subpage header ul li#adminAuthNav > a#adminSettingsToggle {
  display: inline-block;
}

body.subpage header ul li#adminAuthNav > a#adminSettingsToggle.active {
  color: var(--brand-ink);
  background: #ffffff;
}

body.subpage header ul li#staffAuthNav > a#staffSettingsToggle {
  display: inline-block;
}

body.subpage header ul li#staffAuthNav > a#staffSettingsToggle.active {
  color: var(--brand-ink);
  background: #ffffff;
}

body.subpage .staff-header-user {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  margin-left: 0.15rem;
  z-index: 5;
}

body.subpage .staff-header-user .staff-notif-wrap {
  flex-shrink: 0;
}

body.subpage .staff-header-user .staff-notif-bell {
  width: calc(40px - (4px * var(--header-progress)));
  height: calc(40px - (4px * var(--header-progress)));
  background: #ffffff;
  border-color: #e5e7eb;
  color: #1f1218;
  box-shadow: 0 4px 14px rgba(31, 18, 24, 0.12);
}

body.subpage .staff-header-user[hidden] {
  display: none;
}

body.subpage .staff-header-user__inner {
  display: inline-flex;
  align-items: center;
  gap: calc(0.55rem - (0.08rem * var(--header-progress)));
  max-width: min(18rem, 52vw);
  padding: calc(0.28rem - (0.06rem * var(--header-progress))) calc(0.85rem - (0.12rem * var(--header-progress))) calc(0.28rem - (0.06rem * var(--header-progress))) calc(0.32rem - (0.04rem * var(--header-progress)));
  background: #ffffff;
  color: #1f1218;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(31, 18, 24, 0.16);
}

body.subpage .staff-header-user__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(2.15rem - (0.22rem * var(--header-progress)));
  height: calc(2.15rem - (0.22rem * var(--header-progress)));
  border-radius: 50%;
  background: #c46b82;
  color: #ffffff;
}

body.subpage .staff-header-user__icon svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

body.subpage .staff-header-user__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.15;
  text-transform: none;
}

body.subpage .staff-header-user__name {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1220;
  letter-spacing: 0;
  text-transform: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.subpage .staff-header-user__role {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c46b82;
}

/* Profile identity popover (name + role from authenticated session) */
.staff-identity-popover {
  position: fixed;
  z-index: 2400;
  min-width: 180px;
  max-width: min(260px, calc(100vw - 16px));
  padding: 12px 14px;
  background: #ffffff;
  color: #1f1218;
  border: 1px solid rgba(196, 107, 130, 0.22);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(45, 32, 38, 0.18);
}

.staff-identity-popover[hidden] {
  display: none !important;
}

.staff-identity-popover__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.staff-identity-popover__role {
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #c46b82;
}

.staff-identity-popover__hint {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.3;
}

body.subpage .staff-header-user.is-identity-open .staff-header-user__inner {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* Friendly inline / toast errors */
.elenest-error-toast {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 5000;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 12px 14px;
  background: #1f1218;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.elenest-error-toast[hidden] {
  display: none !important;
}

.elenest-error-toast__msg {
  margin: 0;
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.35;
}

.elenest-error-toast__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.elenest-inline-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  background: #fff7f8;
  border: 1px solid rgba(196, 107, 130, 0.28);
  border-radius: 12px;
}

.elenest-inline-error__msg {
  margin: 0;
  color: #4a3038;
  font-size: 0.9rem;
  line-height: 1.4;
}

.elenest-inline-error__retry {
  min-height: 40px;
}

header i {
  margin: 0 clamp(0.2rem, 0.8vw, 0.65rem);
  color: var(--text-on-dark);
  flex-shrink: 0;
}

header button {
  padding: 13px 40px;
}

header button.book-nav-profile,
header button.book-nav-appointments,
header button.book-nav-logout,
header button.book-nav-icon-btn,
header button.customer-notif-bell,
header button.staff-notif-bell,
header #bookNavUser .btn--small {
  padding: 0;
}

header #bookNavUser {
  position: relative;
  z-index: 5;
  text-transform: none;
}

header button.book-nav-profile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.45rem;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 999px;
  transition: background 0.2s ease, opacity 0.2s ease;
}

header button.book-nav-profile:hover,
header button.book-nav-profile:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

header button.book-nav-profile:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

header button.book-nav-profile .book-nav-greet,
header button.book-nav-profile .guest-avatar {
  pointer-events: none;
}

header #bookNavUser .btn--small {
  padding: 8px 14px;
  margin-top: 0;
}

.role-login-nav {
  position: relative;
  flex-shrink: 0;
}

.role-login-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 8px;
  border-radius: 50%;
  border: 1px solid rgba(61, 51, 64, 0.22);
  background: rgba(255, 255, 255, 0.45);
  color: var(--brand-ink);
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.role-login-trigger i {
  margin: 0;
  color: inherit;
  font-size: 16px;
}

.role-login-trigger span {
  margin: 0;
  color: inherit;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
  background: rgba(255, 255, 255, 0.62);
}

.role-login-trigger span::before {
  content: "\1F464";
  font-size: 11px;
  line-height: 1;
  transform: translateY(-0.5px);
}

.role-login-trigger:hover {
  border-color: #fff;
  color: var(--header-pink-dark);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.role-login-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(196, 107, 130, 0.2);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(196, 107, 130, 0.16);
  z-index: 1500;
}

.role-login-item,
.role-login-action {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  background: transparent;
  color: #1f2b16;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.role-login-item:hover,
.role-login-action:hover {
  background: rgba(196, 107, 130, 0.35);
  color: var(--brand-ink);
}

.role-login-action {
  margin-top: 4px;
  font-weight: 700;
  text-decoration: none;
}

header ul li a.role-login-trigger.staff-access-btn,
.role-login-trigger.staff-access-btn,
a.role-login-trigger.staff-access-btn {
  color: var(--text-on-light) !important;
  -webkit-text-fill-color: var(--text-on-light) !important;
  width: auto;
  min-width: 5.5rem;
  height: auto;
  min-height: 2.75rem;
  border-radius: 999px;
  padding: calc(0.65rem - (2px * var(--header-progress, 0))) calc(1.35rem - (4px * var(--header-progress, 0)));
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  background: #ffffff;
  color: #2f2a32;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition:
    background 0.22s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
    color 0.22s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow 0.22s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
    transform 0.18s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

header ul li a.role-login-trigger.staff-access-btn:hover,
.role-login-trigger.staff-access-btn:hover,
a.role-login-trigger.staff-access-btn:hover {
  background: #ffffff;
  color: #2f2a32;
  border-color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

header ul li a.role-login-trigger.staff-access-btn:active,
.role-login-trigger.staff-access-btn:active,
a.role-login-trigger.staff-access-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

header ul li a.role-login-trigger.staff-access-btn:focus-visible,
.role-login-trigger.staff-access-btn:focus-visible,
a.role-login-trigger.staff-access-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 6px 16px rgba(0, 0, 0, 0.16);
}

body.elenest-role-gated {
  visibility: hidden;
}

html.elenest-auth-ready body.elenest-role-gated {
  visibility: visible;
}

.staff-access-pin-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.staff-access-pin-overlay {
  background: rgba(18, 12, 16, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.staff-access-pin-overlay.is-visible {
  opacity: 1;
}

.staff-gate-modal {
  width: min(440px, 100%);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 28px 80px rgba(28, 10, 20, 0.35),
    0 0 0 1px rgba(196, 107, 130, 0.08);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.staff-access-pin-overlay.is-visible .staff-gate-modal {
  transform: translateY(0) scale(1);
}

.staff-role-picker-modal.staff-gate-modal {
  width: min(520px, 100%);
}

.staff-gate-modal__hero {
  padding: 22px 22px 16px;
  background: #c46b82;
  border-bottom: 1px solid rgba(196, 107, 130, 0.1);
}

.staff-gate-modal__eyebrow {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.staff-gate-modal__hero h3 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-on-dark);
  letter-spacing: -0.02em;
}

.staff-gate-modal__lead {
  margin: 8px 0 0;
  font-family: "Poppins", sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
}

.staff-gate-modal__form,
.staff-role-picker__list,
.staff-gate-modal__footer {
  padding-left: 22px;
  padding-right: 22px;
}

.staff-gate-modal__form {
  padding-top: 16px;
  padding-bottom: 8px;
}

.staff-gate-modal__pin-input {
  letter-spacing: 0.35em;
  font-size: 1.25rem !important;
  font-weight: 700;
  text-align: center;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.staff-gate-modal__footer {
  padding-bottom: 18px;
  justify-content: flex-start;
}

.staff-role-picker__list {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  padding-bottom: 6px;
}

.staff-role-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(31, 43, 22, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  color: #1f2b16;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 8px 20px rgba(31, 43, 22, 0.05);
  opacity: 0;
  transform: translateY(10px);
  animation: staffRoleCardIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--role-delay, 0ms);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}

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

.staff-role-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff-role-card__icon svg {
  width: 24px;
  height: 24px;
}

.staff-role-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.staff-role-card__label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2b16;
}

.staff-role-card__blurb {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #6b7280;
}

.staff-role-card__arrow {
  font-size: 1.15rem;
  font-weight: 700;
  color: #9ca3af;
  transition: transform 0.2s ease, color 0.2s ease;
}

.staff-role-card--admin .staff-role-card__icon,
.staff-role-card--manager .staff-role-card__icon,
.staff-role-card--reception .staff-role-card__icon {
  color: var(--text-on-dark);
  background: #c46b82;
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.28);
}

.staff-role-card:hover,
.staff-role-card:focus-visible {
  outline: none;
  border-color: rgba(196, 107, 130, 0.35);
  background: #c46b82;
  color: var(--text-on-dark);
  box-shadow: 0 14px 28px rgba(196, 107, 130, 0.14);
  transform: translateY(-2px);
}

.staff-role-card:hover .staff-role-card__label,
.staff-role-card:hover .staff-role-card__blurb,
.staff-role-card:focus-visible .staff-role-card__label,
.staff-role-card:focus-visible .staff-role-card__blurb {
  color: var(--text-on-dark);
}

.staff-role-card:hover .staff-role-card__arrow,
.staff-role-card:focus-visible .staff-role-card__arrow {
  color: var(--text-on-dark);
  transform: translateX(3px);
}

.staff-role-card:active {
  transform: translateY(0);
}

@media (max-width: 560px) {
  .staff-gate-modal,
  .staff-role-picker-modal.staff-gate-modal {
    width: 100%;
  }

  .staff-role-card {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }

  .staff-role-card__arrow {
    display: none;
  }
}

header .navlinks span.fa-bars {
  display: none;
}

@media only screen and (max-width: 1100px) {
  header {
    --header-logo-h: calc(clamp(2.25rem, 4.5vw, 3.375rem) - (0.42rem * var(--header-progress)));
    min-height: calc(clamp(4.5rem, 9vw, 5.5rem) - (0.85rem * var(--header-progress)));
    --header-pad-y: calc(clamp(0.5rem, 1.2vw, 0.65rem) - (0.16rem * var(--header-progress)));
  }

  header .logo {
    max-width: min(11rem, 52%);
  }

  /* Anchor absolute menu to the header, not the narrow .navlinks strip */
  header .navlinks {
    position: static;
  }

  .nav-menu-toggle,
  header button.nav-menu-toggle {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    position: relative;
    z-index: 1300;
  }

  header #menulist,
  header .navlinks > ul.site-nav-list {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: var(--header-pad-x, 0.85rem);
    right: var(--header-pad-x, 0.85rem);
    width: auto;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: max-height 0.35s ease;
    text-align: left;
    z-index: 1200;
    background: #c46b82;
    border: 1px solid rgba(196, 107, 130, 0.16);
    border-radius: 0.85rem;
    box-shadow: 0 16px 34px rgba(196, 107, 130, 0.18);
    padding: 0;
    pointer-events: none;
    box-sizing: border-box;
  }

  header #menulist:not(.is-open),
  header .navlinks > ul.site-nav-list:not(.is-open) {
    border: 0;
    box-shadow: none;
  }

  header #menulist.is-open,
  header .navlinks > ul.site-nav-list.is-open {
    padding: 0.5rem 0 0.75rem;
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  header ul li {
    display: block;
    width: 100%;
    flex-shrink: 1;
  }

  header ul li a {
    display: block;
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    white-space: normal;
    border-radius: 0;
    padding: 0.7rem 1rem;
    box-sizing: border-box;
    background: transparent;
  }

  header ul li a:hover {
    color: var(--header-pink-dark);
    background: rgba(255, 255, 255, 0.88);
  }

  header #menulist a.active,
  header #menulist a[href^="#section-"].active,
  body.subpage header #menulist a.active,
  body.subpage header #menulist a[href^="#section-"].active {
    color: #1f1218 !important;
    -webkit-text-fill-color: #1f1218 !important;
    background: #ffffff !important;
  }

  /* Sign In stays readable on the pink mobile panel */
  header ul li a.role-login-trigger.staff-access-btn,
  .role-login-trigger.staff-access-btn {
    color: #1f1218 !important;
    -webkit-text-fill-color: #1f1218 !important;
    background: #ffffff !important;
    margin: 0.35rem 0.75rem 0;
    width: calc(100% - 1.5rem);
    text-align: center;
    border-radius: 999px;
  }

  body.subpage .staff-header-user {
    gap: 0.4rem;
  }

  body.subpage .staff-header-user .staff-notif-bell {
    width: 36px;
    height: 36px;
  }

  body.subpage .staff-header-user__inner {
    max-width: min(11.5rem, 42vw);
    padding: 0.22rem 0.7rem 0.22rem 0.28rem;
  }

  body.subpage .staff-header-user__name {
    font-size: 0.9rem;
  }

  header ul li a.primary-btn {
    margin: 0.35rem 0.75rem 0;
    width: calc(100% - 1.5rem);
    text-align: center;
    border-radius: 999px;
  }

  .role-login-nav {
    display: flex;
    justify-content: center;
    padding: 0.35rem 0 0.15rem;
  }

  body.book-page.customer-logged-in header .role-login-nav,
  body.book-page.customer-logged-in header #roleLoginNav,
  body.book-page.customer-logged-in header li[data-customer-extra="1"],
  header .role-login-nav[hidden],
  header #roleLoginNav[hidden],
  header li[data-customer-extra="1"][hidden] {
    display: none !important;
  }

  .role-login-trigger {
    margin: 0;
    border-color: rgba(196, 107, 130, 0.35);
    background: rgba(255, 255, 255, 0.92);
    color: var(--header-pink-dark);
  }

  header ul li a.role-login-trigger.staff-access-btn,
  .role-login-trigger.staff-access-btn {
    min-height: 2.75rem;
    min-width: 5.5rem;
    padding: 0.65rem 1.25rem;
    font-size: 13px;
    background: #ffffff;
    color: #2f2a32;
  }

  .role-login-menu {
    position: static;
    margin: 0.5rem auto 0;
    max-width: calc(100% - 1.5rem);
    width: calc(100% - 1.5rem);
    background: rgba(255, 247, 251, 0.98);
  }
}

@media only screen and (max-width: 480px) {
  header {
    --header-logo-h: calc(clamp(2.25rem, 4.5vw, 3.375rem) - (0.28rem * var(--header-progress)));
    min-height: calc(clamp(4.5rem, 9vw, 5.5rem) - (0.65rem * var(--header-progress)));
  }

  header .logo {
    max-width: min(9.5rem, 58%);
  }
}

/* Admin: many nav labels — use the hamburger menu up to 1500px */
@media only screen and (max-width: 1500px) {
  body.admin-app .logo {
    max-width: min(11rem, 52%);
  }

  body.admin-app header .navlinks {
    position: static;
  }

  body.admin-app .nav-menu-toggle,
  body.admin-app header button.nav-menu-toggle {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    position: relative;
    z-index: 1300;
  }

  body.admin-app header #menulist,
  body.admin-app header .navlinks > ul.site-nav-list {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: var(--header-pad-x, 0.85rem);
    right: var(--header-pad-x, 0.85rem);
    width: auto;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: max-height 0.35s ease;
    text-align: left;
    z-index: 1200;
    background: #c46b82;
    border: 1px solid rgba(196, 107, 130, 0.16);
    border-radius: 0.85rem;
    box-shadow: 0 16px 34px rgba(196, 107, 130, 0.18);
    padding: 0;
    pointer-events: none;
    box-sizing: border-box;
  }

  body.admin-app header #menulist:not(.is-open),
  body.admin-app header .navlinks > ul.site-nav-list:not(.is-open) {
    border: 0;
    box-shadow: none;
  }

  body.admin-app header #menulist.is-open,
  body.admin-app header .navlinks > ul.site-nav-list.is-open {
    padding: 0.5rem 0 0.75rem;
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.admin-app header ul li {
    display: block;
    width: 100%;
    flex-shrink: 1;
  }

  body.admin-app header ul li a {
    display: block;
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    white-space: normal;
    border-radius: 0;
    padding: 0.7rem 1rem;
    box-sizing: border-box;
    background: transparent;
  }

  body.admin-app header ul li a:hover {
    color: #1f1218;
    background: rgba(255, 255, 255, 0.88);
  }

  body.admin-app header #menulist a.active,
  body.admin-app header #menulist a[href^="#section-"].active,
  body.admin-app header #menulist #adminSettingsToggle.active {
    color: #1f1218 !important;
    -webkit-text-fill-color: #1f1218 !important;
    background: #ffffff !important;
  }
}

/*--------header---------*/
/*--------home---------*/
.home {
  height: 100vh;
  color: #fff;
}

.home .owl-carousel .item {
  position: relative;
}

.home img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
}

.home .text {
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  max-width: min(620px, 90vw);
  padding: 1.75rem 0 1.75rem 1.5rem;
  border-left: 4px solid #7fc142;
}

.home .hero-kicker {
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 0.85rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.home .hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
}

.home .hero-title__brand {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(3.5rem, 12vw, 6.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 0.92;
  color: #fff;
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.45),
    0 4px 48px rgba(0, 0, 0, 0.35);
}

.home .hero-title__accent {
  display: block;
  width: min(100px, 28vw);
  height: 3px;
  margin: 0.65rem 0 0.55rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #7fc142, rgba(127, 193, 66, 0.25));
}

.home .hero-title__suffix {
  font-family: "Poppins", sans-serif;
  font-size: clamp(0.68rem, 1.8vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

.home .hero-title--single {
  flex-direction: row;
  flex-wrap: wrap;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.65rem, 7.5vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.12;
  color: #fff;
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.45),
    0 4px 48px rgba(0, 0, 0, 0.35);
}

.home .hero-tagline {
  font-family: "Poppins", sans-serif;
  font-size: clamp(0.95rem, 2.1vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.65;
  max-width: 36ch;
  margin: 1.35rem 0 1.5rem;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.home .text .flex {
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.home .text .primary-btn,
.home .text .secondary-btn {
  display: inline-block;
  margin-right: 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 14px 28px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.home .text .primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(127, 193, 66, 0.42);
}

.home .text .secondary-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.95);
}

.home button {
  margin-right: 0;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
  position: absolute;
  top: 40%;
  height: 50px;
  width: 50px;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #fff;
  transition: background 0.25s ease;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
  background: rgba(127, 193, 66, 0.55) !important;
}

.owl-nav .owl-prev {
  left: 0;
  border-radius: 0 4px 4px 0;
}

.owl-nav .owl-next {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.home .owl-carousel .owl-stage-outer {
  overflow: hidden;
}

.home .owl-carousel .owl-nav {
  margin: 0;
  pointer-events: none;
}

.home .owl-carousel .owl-nav button.owl-prev,
.home .owl-carousel .owl-nav button.owl-next {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42) !important;
  color: #fff !important;
  border-radius: 50%;
  z-index: 5;
}

.home .owl-carousel .owl-nav button.owl-prev {
  left: 18px;
}

.home .owl-carousel .owl-nav button.owl-next {
  right: 18px;
}

.home .hero-arrow {
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-top: -4px;
}

@media only screen and (max-width: 768px) {
  .home .owl-carousel .owl-nav button.owl-prev,
  .home .owl-carousel .owl-nav button.owl-next {
    width: 40px;
    height: 40px;
  }

  .home .owl-carousel .owl-nav button.owl-prev {
    left: 8px;
  }

  .home .owl-carousel .owl-nav button.owl-next {
    right: 8px;
  }

  .home .hero-arrow {
    font-size: 28px;
  }
}

/*--------home---------*/
/*--------book---------*/
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
}

input {
  outline: none;
  border: none;
  width: 100%;
}

.book {
  padding: 28px 0;
  background: #282834;
  color: #fff;
}

h1 {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
}

.book h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.book h1 span {
  color: #7fc142;
  font-style: italic;
  font-weight: 400;
}

.book input {
  padding: 20px;
}

.book input:nth-last-child(1) {
  background: #7fc142;
  color: #fff;
}

/* Simple reserve bar: Select dates | Adults | Children | CTA */
.book-reserve-form {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) minmax(88px, 0.7fr) minmax(88px, 0.7fr) minmax(140px, 1.1fr);
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: 720px;
}

#homeReserveForm.book-reserve-form {
  grid-template-columns: minmax(180px, 1.8fr) minmax(160px, 0.9fr);
}

.book-reserve-form .book-date-trigger,
.book-reserve-form .book-reserve-submit,
.book-reserve-form input[type="number"] {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  min-height: 52px;
  border-radius: 10px;
}

.book-reserve-form .book-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  margin: 0;
  border: none;
  background: #fff;
  color: #9ca3af;
  font: inherit;
  font-size: 0.98rem;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.book-reserve-form .book-date-trigger.is-filled {
  color: #111827;
  font-weight: 600;
}

.book-reserve-form .book-date-trigger:hover,
.book-reserve-form .book-date-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.28);
}

.book-reserve-form .book-date-trigger__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-reserve-form .book-date-trigger__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.book-reserve-form input[type="number"] {
  width: 100%;
  padding: 14px 12px;
  border: none;
  background: #fff;
  color: #111827;
  font: inherit;
  text-align: center;
}

.book-reserve-form input[type="number"]::placeholder {
  color: #9ca3af;
}

.book-reserve-form .book-reserve-submit {
  width: 100%;
  padding: 14px 16px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  background: #c46b82;
}

.book-reserve-form .book-reserve-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.28);
}

.avail-modal__dialog--simple {
  width: min(860px, 100%);
  padding: 16px 16px 18px;
}

.avail-legend--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  padding: 10px 12px;
}

.avail-legend--compact .avail-legend__item {
  margin: 0;
  font-size: 0.8rem;
}

.book .text p {
  margin-top: 0.75rem;
  max-width: 28rem;
  line-height: 1.55;
}

.book .home-reserve-cta {
  display: inline-block;
  margin-top: 1rem;
}

.home-reserve-note {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.92;
}

.avail-modal__calendar-lead {
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: #3d3340;
  line-height: 1.4;
}

.book-page-reserve {
  margin-top: 0;
}

.book-page-reserve__lead {
  max-width: 520px;
  margin-top: 14px;
  line-height: 1.55;
  opacity: 0.92;
  font-size: 1rem;
}

.book-page-reserve__form-note {
  margin-top: 12px;
  font-size: 0.85rem;
  opacity: 0.85;
  line-height: 1.45;
}

.book-page-info {
  padding-top: 28px;
  padding-bottom: 8px;
}

.book-page-info__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.book-page-info__list {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.55;
}

.book-page-info__list li + li {
  margin-top: 6px;
}

.book-page-info__steps {
  margin: 0 0 12px 1.1rem;
  padding: 0;
  line-height: 1.6;
}

.book-page-info__steps li + li {
  margin-top: 8px;
}

@media (max-width: 992px) {
  .book-page-info__grid {
    grid-template-columns: 1fr;
  }
}

/* -------- availability modal (Check Availability) -------- */
body.avail-modal-open {
  overflow: hidden;
}

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

.avail-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.avail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.avail-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(196, 107, 130, 0.2);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  padding: 22px 22px 26px;
}

.avail-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #374151;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.avail-modal__close:hover {
  background: #e5e7eb;
}

.avail-modal__activities-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  color: #74b34d;
}

.avail-modal__activities-lead {
  margin: 0 0 14px;
  color: #6b7280;
  font-size: 0.92rem;
}

.avail-activities-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.avail-activity-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(196, 107, 130, 0.15);
  background: #fff;
  box-shadow: 0 6px 16px rgba(196, 107, 130, 0.08);
}

.avail-activity-card__img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
}

.avail-activity-card__title {
  margin: 0;
  padding: 8px 10px 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #374151;
  font-weight: 600;
}

.avail-modal__calendar-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #1f2937;
}

.avail-legend {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: #ffffff;
}

.avail-legend__live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #047857;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}

.avail-legend__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  animation: avail-legend-pulse 1.6s ease-out infinite;
}

@keyframes avail-legend-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.avail-legend--inline {
  margin-top: 12px;
  margin-bottom: 4px;
}

.avail-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #4b5563;
  line-height: 1.4;
}

.avail-legend__swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.avail-legend__swatch--available {
  background: linear-gradient(160deg, #dcfce7, #bbf7d0);
  border-color: #22c55e;
}

.avail-legend__swatch--partial {
  background: linear-gradient(160deg, #fef3c7, #fde68a);
  border-color: #d97706;
  position: relative;
  overflow: hidden;
}

.avail-legend__swatch--partial::after {
  content: "/";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(146, 64, 14, 0.55);
}

.avail-legend__swatch--hold {
  background: linear-gradient(160deg, #ffedd5, #fed7aa);
  border-color: #ea580c;
  position: relative;
  overflow: hidden;
}

.avail-legend__swatch--hold::after {
  content: "⏱";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}

.avail-legend__swatch--unavailable {
  background: linear-gradient(160deg, #fde8ef, #f4b8c9);
  border-color: #d97892;
}

.avail-legend__swatch--pending {
  background: #f4c2d4;
  border-color: #d989a8;
}

.avail-legend__swatch--booked {
  background: linear-gradient(160deg, #e5e7eb, #d1d5db);
  border-color: #9ca3af;
  position: relative;
  overflow: hidden;
}

.avail-legend__swatch--booked::after {
  content: "";
}

.avail-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.avail-modal__actions .book-unit-confirm {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}

.avail-modal__action-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

#availModalReserveBtn[hidden] {
  display: none !important;
}

body:not(.subpage) .avail-modal__action-btns {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: auto;
}

body:not(.subpage) #availModalReserveBtn:not([hidden]) {
  width: auto;
  align-self: center;
  background: #c46b82;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(196, 107, 130, 0.22);
}

body:not(.subpage) #availModalReserveBtn:not([hidden]):hover {
  background: #b35d74;
}

.avail-modal__actions .btn:disabled,
.avail-modal__actions .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.avail-facility-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(196, 107, 130, 0.18);
}

.avail-facility-section__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: #1f2937;
}

.avail-facility-section__lead {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: #6b7280;
}

.avail-facility-section__empty {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 0.9rem;
}

.avail-facility-host {
  display: block;
  width: 100%;
}

.avail-facility-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
}

.avail-facility-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(196, 107, 130, 0.28);
  background: #fff;
  color: #3d3340;
  border-radius: 12px;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.avail-facility-tab:hover {
  border-color: rgba(196, 107, 130, 0.55);
}

.avail-facility-tab--active {
  background: #c46b82;
  border-color: #c46b82;
  color: #fff;
}

.avail-facility-tab__count {
  display: inline-flex;
  min-width: 1.35em;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(127, 193, 66, 0.18);
  color: #5f9e2e;
  font-size: 0.72rem;
}

.avail-facility-tab--active .avail-facility-tab__count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.avail-facility-panel {
  display: block;
  width: 100%;
}

.avail-facility-panel__title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #c46b82;
}

.avail-facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .avail-facility-tabs {
    flex-direction: column;
  }

  .avail-facility-tab {
    flex: 1 1 auto;
    width: 100%;
  }
}

.avail-facility-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(196, 107, 130, 0.22);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.avail-facility-card:hover:not(:disabled):not(.is-selected) {
  border-color: rgba(196, 107, 130, 0.55);
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.12);
  transform: translateY(-1px);
}

.avail-facility-card.is-selected,
.avail-facility-card.is-selected:hover:not(:disabled) {
  border-color: #c46b82;
  background: #fff8fa;
  box-shadow: 0 0 0 2px #c46b82, 0 8px 18px rgba(196, 107, 130, 0.18);
}

.avail-facility-card.is-selected::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  background-color: #c46b82;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
  box-shadow: 0 2px 6px rgba(31, 18, 24, 0.2);
}

.avail-facility-card--unavailable {
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(1);
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #6b7280;
}

.avail-facility-card--unavailable .avail-facility-card__img {
  filter: grayscale(1);
  opacity: 0.7;
}

.avail-facility-card__img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #f3f4f6;
}

.avail-facility-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px 12px;
}

.avail-facility-card__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

.avail-facility-card__meta {
  font-size: 0.75rem;
  color: #6b7280;
}

.avail-facility-card__status {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #059669;
}

.avail-guest-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(196, 107, 130, 0.22);
  border-radius: 14px;
  background: #fff8fa;
}

.avail-guest-bar__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.avail-guest-bar__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d3340;
}

.avail-guest-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(196, 107, 130, 0.28);
}

.avail-guest-stepper button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #c46b82;
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.avail-guest-stepper button:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.avail-guest-stepper span,
.avail-guest-stepper input[type="number"] {
  width: 2.75rem;
  min-width: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-weight: 700;
  color: #1f2937;
  -moz-appearance: textfield;
  appearance: textfield;
}

.avail-guest-stepper input[type="number"]::-webkit-outer-spin-button,
.avail-guest-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.avail-guest-bar__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6b7280;
}

.avail-stay-times {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
}

.avail-stay-times__field {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.avail-stay-times__field[hidden] {
  display: none;
}

.avail-stay-times__field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d3340;
}

.avail-stay-times__field input,
.avail-stay-times__field select {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(196, 107, 130, 0.32);
  background: #fff;
  color: #1f2937;
  font: inherit;
}

.avail-guest-bar__hint {
  flex: 1 1 220px;
  margin: 0;
  font-size: 0.84rem;
  color: #6b7280;
}

.avail-facility-recommend {
  margin: 0 0 12px;
}

.avail-facility-recommend__btn {
  min-height: 40px;
}

.avail-facility-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: #c46b82;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.avail-facility-card--recommended {
  border-color: #c46b82;
  box-shadow: 0 0 0 1px rgba(196, 107, 130, 0.35);
}

.avail-facility-card--unavailable .avail-facility-card__status {
  color: #9ca3af;
}

@media (max-width: 700px) {
  .avail-modal {
    align-items: flex-end;
    padding: 0;
  }

  .avail-modal__dialog {
    width: 100%;
    max-height: min(94vh, 100%);
    border-radius: 20px 20px 0 0;
    padding: 18px 16px 28px;
  }

  .avail-modal__activities {
    display: none;
  }

  .avail-modal__calendar-title {
    padding-right: 36px;
  }

  .avail-modal__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .avail-modal__actions .book-unit-confirm {
    margin-right: 0;
  }

  .avail-modal__action-btns {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .avail-modal__actions .btn,
  .avail-modal__action-btns .btn {
    width: 100%;
  }

  .avail-facility-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* -------- booking status stepper -------- */
.book-status-stepper {
  margin: 0 0 16px;
}

.book-status-stepper__list {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.book-status-stepper__step {
  flex: 1 1 120px;
  min-width: 108px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f6f3f1;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.book-status-stepper__step.is-done {
  background: #e8f7ee;
  color: #166534;
}

.book-status-stepper__step.is-current {
  background: #fde8ef;
  color: #9d174d;
}

.book-status-stepper__index {
  font-weight: 700;
}

.book-confirm-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 22px 18px;
  border: 1px solid rgba(196, 107, 130, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fff8fa 100%);
  box-shadow: 0 10px 28px rgba(157, 23, 77, 0.06);
}

.book-confirm-status {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.book-confirm-status.is-waiting {
  background: #fff4e5;
  color: #9a3412;
}

.book-confirm-status.is-ready {
  background: #e8f7ee;
  color: #166534;
}

.book-confirm-status.is-pay {
  background: #fde8ef;
  color: #9d174d;
}

.book-confirm-status.is-expired {
  background: #fee2e2;
  color: #991b1b;
}

.pay-deadline-alert {
  margin: 0 0 14px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(196, 107, 130, 0.45);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7fa 0%, #fde8ef 100%);
  color: #7a2948;
  box-shadow: 0 8px 20px rgba(157, 23, 77, 0.08);
}

.pay-deadline-alert[hidden] {
  display: none;
}

body.subpage .pay-deadline-alert .pay-deadline-alert__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: #9d174d;
}

body.subpage .pay-deadline-alert .pay-deadline-alert__clock {
  margin: 0 0 8px;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: #c46b82;
  line-height: 1.1;
}

body.subpage .pay-deadline-alert .pay-deadline-alert__note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #6b3a4a;
}

.pay-deadline-alert.is-expired {
  border-color: #fecdd3;
  background: #fff1f2;
}

body.subpage .pay-deadline-alert.is-expired .pay-deadline-alert__title {
  color: #9f1239;
}

.book-confirm-summary {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
}

.book-confirm-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
}

.book-confirm-summary__row span {
  color: #6b7280;
  font-size: 0.86rem;
}

.book-confirm-summary__row strong {
  color: #1f2937;
  font-size: 0.92rem;
  text-align: right;
}

.admin-booking-review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-booking-review-lead {
  margin: 4px 0 0;
  color: #6b7280;
  max-width: 62ch;
}

.admin-booking-review-list {
  display: grid;
  gap: 14px;
}

.admin-booking-review-card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
}

.admin-booking-review-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-booking-review-card__name {
  margin: 0;
  font-size: 1.05rem;
}

.admin-booking-review-card__email {
  margin: 2px 0 0;
  color: #6b7280;
  font-size: 0.86rem;
  word-break: break-word;
}

.admin-booking-review-card__badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-booking-review-card__badge.is-available {
  background: #e8f7ee;
  color: #166534;
}

.admin-booking-review-card__badge.is-unavailable {
  background: #fee2e2;
  color: #991b1b;
}

.admin-booking-review-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
}

.admin-booking-review-card__grid div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #faf7f8;
}

.admin-booking-review-card__grid dt {
  margin: 0;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-booking-review-card__grid dd {
  margin: 4px 0 0;
  color: #1f2937;
  font-weight: 600;
}

.admin-booking-review-card__note {
  margin: 12px 0 0;
  color: #991b1b;
  font-size: 0.88rem;
}

.admin-booking-review-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* -------- booking flow stepper -------- */
.book-flow-stepper {
  margin-bottom: 28px;
  padding-bottom: 8px;
}

.book-flow-stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.book-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  text-align: center;
}

.book-flow-stepper__marker {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  background: #f3f4f6;
  color: #6b7280;
  border: 2px solid #e5e7eb;
  transition: 0.25s ease;
}

.book-flow-stepper__label {
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 600;
  max-width: 110px;
  line-height: 1.25;
}

.book-flow__step.is-active .book-flow-stepper__marker {
  background: #c46b82;
  color: var(--text-on-dark);
  border-color: #c46b82;
  box-shadow: 0 6px 14px rgba(196, 107, 130, 0.28);
}

.book-flow__step.is-active .book-flow-stepper__label {
  color: #c46b82;
}

.book-flow__step.is-done .book-flow-stepper__marker {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border-color: #22c55e;
}

.book-flow__step.is-done .book-flow-stepper__label {
  color: #166534;
}

.book-flow-stepper__connector {
  flex: 1;
  min-width: 40px;
  max-width: 80px;
  height: 3px;
  margin: 0 6px 22px;
  border-radius: 999px;
  background: #e5e7eb;
  transition: background 0.25s ease;
}

.book-flow-stepper__connector.is-done {
  background: linear-gradient(90deg, #22c55e, #86efac);
}

@media (max-width: 640px) {
  .book-flow-stepper__connector {
    min-width: 24px;
    max-width: 40px;
  }

  .book-flow__step {
    min-width: 80px;
  }

  .avail-activities-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*--------book---------*/
/*--------about---------*/
.left, .right {
  width: 50%;
  padding: 20px;
}

.top {
  margin-top: var(--section-gap, 2rem);
}

.mtop {
  margin-top: var(--section-gap-sm, 1.15rem);
}

.heading h1 {
  font-size: 100px;
  font-weight: 500;
  opacity: 0.1;
  font-family: serif;
  position: absolute;
  top: -30px;
}

.heading {
  position: relative;
}

.heading p {
  max-width: 700px;
}

.heading h2 {
  margin: 18px 0;
  font-size: 45px;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1a1a1a;
}

.about .heading h1 {
  top: -6px;
  left: 0;
  line-height: 1;
  white-space: nowrap;
}

.about .heading h2 {
  position: relative;
  z-index: 1;
  margin: 36px 0 20px;
  display: inline-block;
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.about .heading {
  display: inline-block;
}

.about {
  position: relative;
}

.about .left {
  margin-top: 30px;
}

.about p {
  font-size: 15px;
  line-height: 1.8;
  margin-top: 14px;
}

.about button {
  margin: 30px 0;
}

.about .primary-btn {
  display: inline-block;
  margin-top: 24px;
}

.about .right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__media {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  background: #f1f5f9;
}

.about__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*--------about---------*/
/*--------counter---------*/
.counter {
  background-image: url("../Images/background-1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 30vh;
  height: auto;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
}

.counter .grid {
  grid-template-columns: repeat(2, minmax(0, 280px));
  justify-content: center;
  gap: 24px 64px;
  text-align: center;
  place-items: center;
  padding-top: 60px;
}

.counter h1 {
  font-size: 50px;
}

.counter hr {
  width: 50%;
  margin: 10px auto;
  background: #7fc142;
  height: 2px;
  border: none;
}

.counter--quote {
  text-align: center;
}

.counter-quote {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px;
}

.counter-quote > i.fa-quote-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(127, 193, 66, 0.55);
  font-size: 28px;
  color: #fff;
}

.counter-quote blockquote {
  margin: 0;
}

.counter-quote blockquote p {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.55;
  font-weight: 400;
  color: #fff;
}

.counter-quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7fc142;
}

/*--------counter---------*/
/*--------rooms---------*/
.rooms {
  position: relative;
  padding: 4px 0 20px;
  scroll-margin-top: 5.5rem;
}

.rooms .container.top {
  margin-top: 12px;
}

.rooms .heading {
  padding-top: 0;
  max-width: 40rem;
}

.rooms .heading h1 {
  display: none;
}

.rooms .heading .rooms-heading-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 4px;
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #7fc142;
}

.rooms .heading h2 {
  color: #1f2b16;
  padding-bottom: 0;
  display: block;
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.15;
}

.rooms .heading h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  border-radius: 99px;
  background: var(--theme-pink, #c46b82);
}

.rooms .heading > p {
  max-width: 38rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.72;
}

.rooms .heading p strong {
  color: #5a8c28;
  font-weight: 600;
}

.rooms .heading .rooms-heading-kicker,
.rooms .heading .rooms-heading-explore {
  opacity: 1;
}

.rooms .heading .rooms-heading-explore {
  margin-top: 10px;
  margin-bottom: 0;
}

.rooms .heading .rooms-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5f9e2e;
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.rooms .heading .rooms-explore-link:hover {
  color: #335e16;
  gap: 10px;
}

.rooms .content.mtop {
  margin-top: 14px;
  position: relative;
}

.rooms #homeFacilitiesCarousel,
.rooms .owl-carousel1 {
  width: 100%;
}

.rooms .owl-carousel1 .owl-stage-outer {
  margin: 0;
}

.rooms .owl-carousel1 .owl-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 0;
  position: static;
}

.rooms .owl-carousel1 .owl-nav .owl-prev,
.rooms .owl-carousel1 .owl-nav .owl-next,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next,
.rooms .owl-carousel1.owl-theme .owl-nav button.owl-prev,
.rooms .owl-carousel1.owl-theme .owl-nav button.owl-next {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.rooms .owl-carousel1 .owl-stage {
  display: flex;
}

.rooms .owl-carousel1 .owl-item {
  display: flex;
}

.rooms .items .text h2 {
  color: #2d5016;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rooms .items .text .rate {
  margin: 6px 0 0;
}

.rooms .items .text .rate i {
  color: #7fc142;
  font-size: 11px;
  margin: 0 2px 0 0;
}

.rooms .text {
  border: none;
  padding: 12px 14px 14px;
}

.rooms .items {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(196, 107, 130, 0.14);
  box-shadow: 0 8px 22px rgba(31, 43, 22, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.rooms .items:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(196, 107, 130, 0.16);
}

.rooms .items .image {
  position: relative;
  overflow: hidden;
}

.rooms .items .image img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.rooms .items:hover .image img {
  transform: scale(1.05);
}

.rooms .items .rooms-card-type {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--theme-pink, #c46b82);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(31, 43, 22, 0.12);
}

.rooms .items .text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rooms .items .text p {
  min-height: 0;
  margin: 8px 0 12px;
  opacity: 0.72;
  font-size: 0.86rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rooms .items .rooms-amenities {
  display: none;
}

.rooms .items .button {
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

.rooms .items .button .primary-btn {
  padding: 8px 16px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  white-space: nowrap;
}

.rooms .items .button h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.15;
  font-weight: 600;
  color: #7fc142;
  text-align: right;
}

.rooms .items .button h3 span {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.rooms p {
  margin: 0;
  opacity: 0.7;
}

.owl-carousel1 .owl-nav {
  margin: 0;
}

.owl-carousel1 .owl-nav .owl-prev,
.owl-carousel1 .owl-nav .owl-next {
  position: absolute;
  top: 84px;
  height: 40px;
  width: 40px;
  background: #7fc142 !important;
}

.owl-carousel1 .owl-nav .owl-prev i,
.owl-carousel1 .owl-nav .owl-next i {
  color: #fff;
}

.owl-carousel1 .owl-nav .owl-prev {
  left: 8px;
}

.owl-carousel1 .owl-nav .owl-next {
  right: 8px;
}

/* Override Owl theme (loads after this file) — pink nav for Our Facilities */
.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next,
.owl-carousel1.owl-theme .owl-nav .owl-prev,
.owl-carousel1.owl-theme .owl-nav .owl-next {
  background: var(--theme-pink, #c46b82) !important;
  color: #fff !important;
  border-radius: 50%;
  margin: 0;
  box-shadow: 0 4px 12px rgba(196, 107, 130, 0.35);
  transition: background 0.25s ease, transform 0.2s ease;
}

.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev:hover,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next:hover,
.owl-carousel1.owl-theme .owl-nav .owl-prev:hover,
.owl-carousel1.owl-theme .owl-nav .owl-next:hover {
  background: var(--theme-pink-dark, #c46b82) !important;
  color: #fff !important;
  transform: scale(1.06);
}

.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev i,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next i,
.owl-carousel1.owl-theme .owl-nav .owl-prev i,
.owl-carousel1.owl-theme .owl-nav .owl-next i {
  color: #fff !important;
}

.rooms .owl-carousel1.owl-theme .owl-nav .disabled,
.owl-carousel1.owl-theme .owl-nav .disabled {
  opacity: 0.45;
}

/* Owl Carousel 2 renders nav as <button> */
.rooms .owl-carousel1.owl-theme .owl-nav button.owl-prev,
.rooms .owl-carousel1.owl-theme .owl-nav button.owl-next {
  background: var(--theme-pink, #c46b82) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(196, 107, 130, 0.4);
}

.rooms .owl-carousel1.owl-theme .owl-nav button.owl-prev:hover,
.rooms .owl-carousel1.owl-theme .owl-nav button.owl-next:hover {
  background: var(--theme-pink-dark, #c46b82) !important;
  color: #fff !important;
}

.rooms .owl-carousel1.owl-theme .owl-nav button.owl-prev:focus-visible,
.rooms .owl-carousel1.owl-theme .owl-nav button.owl-next:focus-visible {
  outline: 2px solid var(--theme-pink, #c46b82);
  outline-offset: 2px;
}

/*--------rooms---------*/
/*--------gallery---------*/
.gallery {
  position: relative;
}

.gallery .items {
  position: relative;
  padding: 0 2px;
}

.gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.gallery .img {
  position: relative;
  overflow: hidden;
}

.gallery .img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(126, 193, 65, 0.86);
  z-index: 2;
  opacity: 0;
  transition: 0.5s;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  color: white;
  opacity: 0;
  transition: 0.5s;
  width: 80%;
  pointer-events: none;
}

.gallery span {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  border: 2px solid white;
}

.overlay h3 {
  margin-top: 20px;
  font-weight: 500;
}

.gallery-caption {
  display: none;
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: #333;
}

.gallery .items:hover .overlay,
.gallery .items:hover .img::after {
  opacity: 1;
  cursor: pointer;
}

.gallery .owl-nav .owl-prev {
  left: 12px;
}

.gallery .owl-nav .owl-next {
  right: 12px;
}

.gallery .owl-nav .owl-next,
.gallery .owl-nav .owl-prev {
  top: 42%;
}

.gallery .owl-gallery.owl-theme .owl-nav .owl-prev,
.gallery .owl-gallery.owl-theme .owl-nav .owl-next {
  background: #7fc142 !important;
  color: #fff !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(127, 193, 66, 0.35);
}

.gallery .owl-gallery.owl-theme .owl-nav .owl-prev:hover,
.gallery .owl-gallery.owl-theme .owl-nav .owl-next:hover {
  background: #6aad38 !important;
}

.gallery .owl-gallery.owl-theme .owl-nav .owl-prev i,
.gallery .owl-gallery.owl-theme .owl-nav .owl-next i {
  color: #fff !important;
}

.gallery .owl-gallery.owl-theme .owl-dots {
  margin-top: 14px;
}

.gallery .owl-gallery.owl-theme .owl-dots .owl-dot span {
  background: #d3d3d3;
}

.gallery .owl-gallery.owl-theme .owl-dots .owl-dot.active span,
.gallery .owl-gallery.owl-theme .owl-dots .owl-dot:hover span {
  background: #7fc142;
}

@media (max-width: 767px) {
  .gallery .content {
    padding: 0 12px;
  }

  .gallery .owl-nav .owl-prev,
  .gallery .owl-nav .owl-next {
    top: auto;
    bottom: 52px;
    width: 40px;
    height: 40px;
  }

  .gallery .owl-nav .owl-prev {
    left: 12px;
  }

  .gallery .owl-nav .owl-next {
    right: 12px;
  }

  .gallery .overlay {
    opacity: 0;
  }

  .gallery .img::after {
    opacity: 0;
  }

  .gallery-caption {
    display: block;
  }
}

/*--------gallery---------*/
/*--------services---------*/
.services {
  position: relative;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 18px;
}

.services .left {
  padding: 18px 0;
}

.services .box {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: 0.5s;
  padding: 20px;
}

.services .box .text {
  padding: 16px 0;
  border: 1px dashed rgba(0, 0, 0, 0.12);
}

.services .box .text p {
  margin: 16px 20px 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4b5563;
}

.services i {
  font-size: 50px;
  color: #7fc142;
  transition: 0.5s;
}

.services h3 {
  font-size: 20px;
  font-weight: 400;
  margin-top: 20px;
  transition: 0.5s;
}

.services .right {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.services__media {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  max-height: min(520px, 70vh);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  background: #c46b82;
}

.services__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.services img {
  width: 100%;
  height: 100%;
}

.services .box:hover {
  background: #7fc142;
  color: #fff;
  cursor: pointer;
}

.services .box:hover i,
.services .box:hover h3 {
  color: #fff;
}

/*--------services---------*/
/*--------Customer---------*/
.Customer {
  background-image: url("../Images/background-2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 320px;
  height: auto;
  width: 100%;
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.Customer .container {
  max-width: 70%;
  position: relative;
  z-index: 1;
}

.Customer.home-review-kpis .container,
.home-review-kpis__grid {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  align-items: center;
  justify-items: center;
  padding: 56px 16px;
}

.home-review-kpis__item {
  text-align: center;
  min-width: 0;
}

.home-review-kpis__item h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
}

.home-review-kpis__item hr {
  width: 48%;
  max-width: 72px;
  margin: 12px auto;
  background: #7fc142;
  height: 2px;
  border: none;
}

.home-review-kpis__item span {
  display: block;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.Customer .owl-carousel2 {
  overflow: hidden;
}

.Customer .item {
  padding: 36px 12px 48px;
}

.Customer .item > i.fa-quote-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: rgba(126, 193, 64, 0.57);
  line-height: 1;
  border-radius: 50%;
  font-size: 50px;
  margin: 0 auto 28px;
}

.Customer .customer-stars {
  justify-content: center;
  margin: 0 0 24px;
}

.Customer .customer-stars i {
  width: auto;
  height: auto;
  background: none;
  line-height: 1;
  border-radius: 0;
  font-size: 18px;
  margin: 0 4px 0 0;
  color: #f4b400;
}

.Customer p {
  line-height: 30px;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.Customer h3 {
  margin-top: 20px;
  color: #7fc142;
}

.Customer span {
  font-size: 15px;
}

.owl-carousel2 .owl-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

.owl-carousel2 .owl-dots i {
  color: #7fc142;
}

.owl-carousel2 .owl-dots i:hover button {
  color: #7fc142 !important;
}

.owl-carousel2 span {
  border: 2px solid #fff;
  background: transparent !important;
}

.owl-carousel2 .active span {
  background: #7fc142 !important;
  border: 2px solid #7fc142;
}

/*--------Customer---------*/
/*--------news---------*/
.news {
  position: relative;
  isolation: isolate;
  background: #fff;
  z-index: 1;
}

.news .content.flex {
  gap: 36px;
  align-items: flex-start;
}

.news i {
  color: #7fc142;
  font-size: 14px;
  margin: 0;
  line-height: 1;
}

.news .admin {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 12px 0 0;
}

.news .admin label {
  margin: 0 14px 0 0;
  font-size: 0.92rem;
}

.news .left {
  padding: 8px 0 0;
  width: 65%;
  min-width: 0;
}

.news .right {
  width: 35%;
  min-width: 0;
  padding-top: 8px;
}

.news img {
  width: 100%;
  display: block;
}

.news .left .items .image {
  overflow: hidden;
}

.news .left .items .image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news .left .items .text {
  padding: 18px 0 0;
  border: none;
}

.news .left .items .text h2 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.25;
  color: #2d5016;
}

.news .items p {
  padding-top: 16px;
  margin: 16px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  opacity: 1;
}

.news .box {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 22px 0;
  align-items: flex-start;
  gap: 16px;
}

.news .box:nth-child(1) {
  padding-top: 0;
}

.news .box:nth-last-child(1) {
  border-bottom: none;
  padding-bottom: 0;
}

.news .box img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  flex-shrink: 0;
}

.news .stext {
  padding: 0;
  min-width: 0;
}

.news .stext h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.3;
}

.news .stext p {
  margin: 0;
  opacity: 0.75;
}

/*--------news---------*/
/*--------newsletter---------*/
.newsletter {
  position: relative;
}

.newsletter .container {
  background: #7fc142;
  padding: 28px 24px;
  position: absolute;
  top: -70px;
  left: 8%;
  width: 100%;
}

.newsletter .newsletter-banner.flex_space {
  gap: 24px;
  align-items: center;
}

.newsletter .newsletter-banner h1 {
  width: auto;
  flex: 0 0 auto;
  font-size: 30px;
  color: #fff;
  margin-top: 10px;
}

.newsletter form.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-end;
  align-items: stretch;
}

.newsletter .newsletter-email,
.newsletter .newsletter-message {
  padding: 16px 18px;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.4);
  color: #1a1a1a;
  border-radius: 4px;
}

.newsletter .newsletter-email::placeholder,
.newsletter .newsletter-message::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.newsletter .newsletter-email {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 320px;
}

.newsletter .newsletter-message {
  flex: 2 1 220px;
  min-width: 200px;
  resize: vertical;
  min-height: 52px;
}

.newsletter .newsletter-submit {
  flex: 0 0 auto;
  padding: 16px 26px;
  margin-left: 4px;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: #fff;
  color: #1a1a1a;
  font-family: "Poppins", sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

.newsletter .newsletter-submit:hover {
  background: #f0f7e8;
  color: #335e16;
}

/*--------newsletter---------*/
/*--------footer---------*/
footer {
  background: #282834;
  color: #ffffff;
  padding: 6% 0 4% 0;
}

footer .grid {
  grid-template-columns: 6fr 3fr 3fr;
}

footer p {
  color: #ffffff;
  font-size: 15px;
  line-height: 25px;
}

footer .icon i {
  margin: 20px 20px 20px 0;
  color: #b6b7b9;
}

footer h2 {
  color: #fff;
  margin-bottom: 10px;
}

footer li {
  margin-bottom: 12px;
}

footer i {
  color: #7fc142;
  margin: 20px 0;
  margin-right: 20px;
}

footer label {
  margin: 20px 0;
}

.legal {
  padding: 15px 0;
  background: #282834;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.legal p {
  color: #ffffff;
  text-align: center;
}

/*--------footer---------*/
@media only screen and (max-width:768px) {
  .home {
    color: #fff;
    height: 50vh;
  }

  .home img {
    width: 100%;
    height: 50vh;
  }

  .home .text {
    left: 5%;
    max-width: 92vw;
    padding: 1rem 0 1rem 1rem;
    border-left-width: 3px;
  }

  .home .hero-title__brand {
    letter-spacing: 0.04em;
  }

  .home .hero-title__suffix {
    letter-spacing: 0.32em;
  }

  .left, .right {
    width: 100%;
  }

  .book h1 {
    margin-bottom: 20px;
  }

  .container.flex,
  .book .flex_space {
    flex-direction: column;
  }

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

  .book .book-reserve-form {
    grid-template-columns: 1fr 1fr;
    max-width: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .book .book-reserve-form .book-date-trigger--range {
    grid-column: 1 / -1;
  }

  .book .book-reserve-form .book-reserve-submit {
    grid-column: 1 / -1;
  }

  .book .form,
  .book .text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .counter .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .owl-carousel .owl-nav .owl-prev {
    left: 80%;
  }

  .rooms .owl-carousel1 .owl-nav .owl-prev,
  .rooms .owl-carousel1 .owl-nav .owl-next {
    top: 84px;
  }

  .rooms .owl-carousel1 .owl-nav .owl-prev {
    left: 8px;
  }

  .rooms .owl-carousel1 .owl-nav .owl-next {
    right: 8px;
  }

  .rooms .items .image img {
    height: 150px;
  }

  .rooms .owl-carousel1 .owl-nav .owl-prev,
  .rooms .owl-carousel1 .owl-nav .owl-next {
    top: 75px;
  }

  .services .flex_space {
    flex-direction: column;
  }

  .about__media {
    aspect-ratio: 16 / 10;
    max-height: none;
  }

  .services__media {
    aspect-ratio: 16 / 10;
    max-height: none;
    margin-top: 8px;
  }

  .Customer {
    min-height: 280px;
  }

  .Customer .container {
    max-width: 90%;
  }

  .Customer.home-review-kpis .container,
  .home-review-kpis__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 12px;
  }

  .home-review-kpis__item h1 {
    font-size: 40px;
  }

  .Customer .item {
    padding: 28px 8px 40px;
  }

  .owl-carousel2 .owl-dots {
    bottom: 16px;
    left: 50%;
  }

  .news .content.flex {
    flex-direction: column;
  }

  .news .left {
    padding: 0;
    width: 100%;
  }

  .news .right {
    width: 100%;
    padding-top: 0;
  }

  .news .left .items .image img {
    height: 200px;
  }

  .newsletter {
    position: relative;
    background: #7fc142;
  }

  .newsletter .container {
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    position: relative;
  }

  .newsletter .flex_space {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter .newsletter-banner h1 {
    width: 100%;
    text-align: center;
  }

  .newsletter form.newsletter-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .newsletter .newsletter-email,
  .newsletter .newsletter-message {
    max-width: none;
    width: 100%;
  }

  .newsletter .newsletter-submit {
    margin-left: 0;
    width: 100%;
  }

  footer .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*--------subpages (about/reviews/rooms/faq/calendar/policies/contact)---------*/
.subpage {
  background: #f7f9f5;
  color: #1f2937;
}

.subpage .navbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.subpage .logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2b16;
  letter-spacing: 0.3px;
}

.subpage .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
}

.subpage .nav-links a {
  text-decoration: none;
  color: #1f2937;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 8px;
  transition: 0.25s ease;
}

.subpage .nav-links a:hover,
.subpage .nav-links a.active {
  background: rgba(196, 107, 130, 0.28);
  color: #335e16;
}

.subpage header ul li a.active:not(.primary-btn):not(.admin-nav-dropdown-item) {
  color: var(--brand-ink);
  background: #ffffff;
}

.subpage header ul li a.primary-btn.active {
  color: var(--brand-ink) !important;
}

.subpage header ul li a.primary-btn {
  background: #fff !important;
  color: var(--brand-ink) !important;
  display: inline-block;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.subpage .hero {
  margin-top: 12px;
  padding: 28px 24px 24px;
  min-height: 148px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 18px;
  background: #c46b82;
  color: var(--text-on-dark);
  box-shadow: 0 16px 35px rgba(196, 107, 130, 0.18);
  border: 1px solid #c46b82;
}

.subpage .hero h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
  margin: 0 0 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.3;
  color: var(--text-on-dark);
}

.subpage .hero p {
  color: var(--text-on-dark-muted);
  max-width: 760px;
}

.subpage .section {
  padding: 12px 0 22px;
}

.subpage .grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.subpage .card {
  background: #ffffff;
  border: 1px solid rgba(196, 107, 130, 0.16);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(196, 107, 130, 0.08), 0 6px 16px rgba(127, 193, 66, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.subpage .card::before,
.subpage .card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  line-height: 1;
}

.subpage .card::before {
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 1;
  background: linear-gradient(90deg, #c46b82 0%, #d992a5 48%, #7fc142 100%);
}

.subpage .card::after {
  display: none;
}

/* Admin dashboard only: no decorative florals on cards */
.admin-app .card::before,
.admin-app .card::after {
  content: none !important;
  display: none !important;
}

.subpage .card > * {
  position: relative;
  z-index: 1;
}

.subpage .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(196, 107, 130, 0.12), 0 8px 18px rgba(127, 193, 66, 0.1);
  border-color: rgba(127, 193, 66, 0.36);
}

.subpage .card h3 {
  margin-bottom: 8px;
  color: #74b34d;
}

.subpage .card p,
.subpage li {
  color: #5f6673;
}

.subpage .list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.subpage .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin-top: 8px;
  text-decoration: none;
  background: #7fc142;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s ease;
}

.subpage .btn:hover {
  background: #5f9e2e;
}

.subpage .btn--success {
  background: #16a34a;
}

.subpage .btn--success:hover {
  background: #15803d;
}

.subpage .btn--danger {
  background: #dc2626;
}

.subpage .btn--danger:hover {
  background: #b91c1c;
}

.subpage .btn--danger.btn--outline,
.subpage .btn--success.btn--outline {
  background: transparent;
}

.subpage .btn--danger.btn--outline {
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: #dc2626;
}

.subpage .btn--danger.btn--outline:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.subpage .btn--success.btn--outline {
  border: 1px solid rgba(22, 163, 74, 0.45);
  color: #16a34a;
}

.subpage .btn--success.btn--outline:hover {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}

.subpage footer {
  background: #282834;
  color: #ffffff;
  padding: 22px 0;
  border-top: 3px solid #7fc142;
  text-align: center;
}

.subpage footer .container,
.subpage footer p {
  text-align: center;
  color: #ffffff;
}

.subpage .faq-hero__eyebrow {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c46b82;
}

.subpage .faq-section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.subpage .faq-section__title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: var(--brand-ink, #3d3340);
}

.subpage .faq-section__lead {
  margin: 0 0 18px;
  color: #5f6673;
  font-size: 0.95rem;
}

.subpage .faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subpage .faq-list__empty {
  margin: 0;
  padding: 16px;
  background: #fff;
  border: 1px dashed #e4e8df;
  border-radius: 12px;
  color: #5f6673;
  text-align: center;
}

.subpage .faq-item {
  background: #fff;
  border: 1px solid #e4e8df;
  border-left: 5px solid #c46b82;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(61, 51, 64, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.subpage .faq-item[open] {
  border-color: #f0c9d4;
  box-shadow: 0 10px 22px rgba(196, 107, 130, 0.1);
}

.subpage .faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #3d3340;
  user-select: none;
}

.subpage .faq-item__question::-webkit-details-marker {
  display: none;
}

.subpage .faq-item__question::marker {
  content: "";
}

.subpage .faq-item__q-text {
  flex: 1;
  min-width: 0;
}

.subpage .faq-item__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fce8ee;
  position: relative;
}

.subpage .faq-item__icon::before,
.subpage .faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #c46b82;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.subpage .faq-item__icon::before {
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.subpage .faq-item__icon::after {
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.subpage .faq-item[open] .faq-item__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.subpage .faq-item__answer {
  padding: 0 16px 16px;
  border-top: 1px solid #f3e6ea;
}

.subpage .faq-item__answer p {
  margin: 12px 0 0;
  color: #4b5563;
  line-height: 1.55;
}

.subpage .faq-item__cta {
  margin: 14px 0 0;
}

.subpage .faq-item h4 {
  margin-bottom: 6px;
}

.subpage .calendar {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.subpage .calendar-embed-wrap {
  margin-top: 14px;
  border: 1px solid #e4e8df;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(31, 41, 55, 0.06);
  background: #fff;
}

.subpage .calendar-embed-wrap iframe {
  width: 100%;
  min-height: 600px;
  border: 0;
  display: block;
}

/* Calendar page — formal card (no embedded iframe) */
.calendar-formal-card__title {
  margin: 0 0 14px;
  font-size: 1.35rem;
  color: #74b34d;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.calendar-formal-card__note {
  margin-bottom: 0;
  color: #3d3340;
}

.calendar-formal-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  border: 1px solid rgba(196, 107, 130, 0.22) !important;
  background: #ffffff !important;
  box-shadow: 0 16px 34px rgba(196, 107, 130, 0.12), 0 10px 24px rgba(196, 107, 130, 0.07) !important;
}

.calendar-formal-card::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

.calendar-formal-card > * {
  position: relative;
  z-index: 1;
}

.calendar-legend {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(196, 107, 130, 0.28);
  background: #c46b82;
  display: grid;
  gap: 8px;
  list-style: none;
}

.calendar-legend-card {
  margin-top: 14px;
  border-radius: 16px !important;
  border: 1px solid rgba(196, 107, 130, 0.22) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(196, 107, 130, 0.1) !important;
}

.calendar-legend-card__title {
  margin: 0 0 10px;
  color: #74b34d;
  font-size: 1.05rem;
}

/* Activities page — promotional & past events */
.activities-section__title {
  margin: 0 0 8px;
  font-size: 1.45rem;
  color: #74b34d;
  font-weight: 700;
}

.activities-section__lead {
  margin: 0 0 20px;
  color: #3d3340;
  max-width: 62ch;
}

.activities-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.activities-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  border: 1px solid rgba(196, 107, 130, 0.2) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(196, 107, 130, 0.1) !important;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.activities-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #c46b82;
}

.activities-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.activities-card:hover .activities-card__img {
  transform: scale(1.04);
}

.activities-card__body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.activities-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-block;
  margin-bottom: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  background: #c46b82;
}

.activities-card--past .activities-card__badge {
  background: #c46b82;
}

.activities-card--past .activities-card__badge--inline {
  position: static;
  display: inline-block;
  margin-bottom: 10px;
}

.activities-card__type {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c46b82;
}

.activities-card__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: #4a2033;
  line-height: 1.35;
}

.activities-card__date {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #74b34d;
}

.activities-card__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5c3a4a;
}

.activities-cta-card {
  text-align: center;
  border-radius: 18px !important;
  border: 1px solid rgba(196, 107, 130, 0.22) !important;
  background: #ffffff !important;
  box-shadow: 0 14px 30px rgba(196, 107, 130, 0.1) !important;
  padding: 28px 24px;
}

.activities-cta-card__title {
  margin: 0 0 10px;
  color: #74b34d;
  font-size: 1.3rem;
}

.activities-cta-card p {
  margin: 0 0 18px;
  color: #3d3340;
}

.activities-cta-card .btn {
  display: inline-block;
}

.feedback-stars {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.feedback-star {
  border: 1px solid rgba(196, 107, 130, 0.3);
  background: #fff;
  color: #c46b82;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s ease;
}

.feedback-star:hover,
.feedback-star.is-active {
  background: #c46b82;
  color: var(--text-on-dark);
  border-color: rgba(196, 107, 130, 0.6);
}

.calendar-legend li {
  color: var(--text-on-dark);
  line-height: 1.45;
  padding-left: 2px;
  font-size: 0.95rem;
}

.calendar-legend li strong {
  color: var(--text-on-dark);
  font-weight: 700;
}

/* -------- global pink-first brand harmonization -------- */
:root {
  --brand-pink: #c46b82;
  --brand-pink-dark: #c46b82;
  --brand-pink-soft: #c46b82;
  --brand-green: #8fcf63;
  --brand-green-dark: #74b34d;
  --brand-green-soft: #f3ffe9;
}

body {
  background: #ffffff;
}

/* Primary CTAs and key interactive controls */
.primary-btn,
.subpage .btn:not(.btn--facebook):not(.btn--google),
.subpage header ul li a.primary-btn,
.book input:nth-last-child(1),
.newsletter .container,
.admin-save-btn,
.subpage .booking-carousel__dot--active {
  background: #c46b82 !important;
  color: #fff !important;
  border-color: transparent !important;
}

.primary-btn:hover,
.primary-btn:active,
.subpage .btn:not(.btn--facebook):not(.btn--google):hover,
.subpage .btn:not(.btn--facebook):not(.btn--google):active,
.admin-save-btn:hover,
.admin-save-btn:active,
.subpage .booking-carousel__arrow:hover:not(:disabled) {
  background: #c46b82 !important;
  color: #fff !important;
}

/* Secondary/outline controls keep green touch */
.subpage .btn--outline,
.subpage .btn--success.btn--outline,
.subpage .btn--danger.btn--outline {
  background: #fff !important;
  border-color: rgba(143, 207, 99, 0.45) !important;
  color: var(--brand-green-dark) !important;
}

.subpage .btn--outline:hover,
.subpage .btn--success.btn--outline:hover,
.subpage .btn--danger.btn--outline:hover {
  background: var(--brand-green-soft) !important;
  color: #4a7f2f !important;
}

/* Links and highlights */
header ul li a:hover,
.subpage .auth-switch a,
.rooms .heading .rooms-explore-link,
.news i,
footer i,
.subpage .kpi h4,
.subpage .section-title {
  color: var(--brand-pink) !important;
}

.rooms .heading h2 {
  color: var(--brand-green-dark) !important;
}

/* Keep supportive green where appropriate */
.rooms .items .text h2,
.subpage .card h3,
.calendar-formal-card__title,
.calendar-legend-card__title {
  color: var(--brand-ink) !important;
}

.subpage .hero h1 {
  color: var(--text-on-dark) !important;
}

/* Navigation/carousel surfaces */
.owl-carousel1 .owl-nav .owl-prev,
.owl-carousel1 .owl-nav .owl-next,
.gallery .owl-gallery.owl-theme .owl-nav .owl-prev,
.gallery .owl-gallery.owl-theme .owl-nav .owl-next,
.subpage .booking-carousel__arrow {
  background: var(--brand-pink) !important;
  color: var(--text-on-dark) !important;
}

/* Inputs and focus states */
.subpage input:not(.swal2-input):not(.swal2-file):focus,
.subpage textarea:not(.swal2-textarea):focus,
.subpage select:not(.swal2-select):focus,
.subpage .password-field__toggle:focus-visible,
.subpage .booking-carousel__arrow:focus-visible {
  border-color: var(--brand-pink) !important;
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.22) !important;
  outline: none;
}

/* Cards and key panels */
.subpage .card,
.calendar-formal-card,
.calendar-legend-card,
.book-flow-calendar {
  border-color: rgba(196, 107, 130, 0.22) !important;
  background: #ffffff !important;
}

/* Hero boards in subpages */
.subpage .hero {
  background: #c46b82 !important;
  color: var(--text-on-dark) !important;
  border-color: #c46b82 !important;
  position: relative;
  overflow: hidden;
}

.subpage .hero::before {
  content: "🌸";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0.34;
  pointer-events: none;
}

.subpage .hero > * {
  position: relative;
  z-index: 1;
}

/* Login page: white text on pink hero/card surfaces */
.login-page .hero h1,
.login-page .hero p,
.login-page .auth-card h3,
.login-page .auth-lead,
.login-page label,
.login-page .auth-switch,
.login-page .auth-switch a {
  color: var(--text-on-dark) !important;
}

.login-page .hero,
.login-page .auth-card {
  background: #c46b82 !important;
  color: var(--text-on-dark) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.login-page .note {
  color: var(--text-on-dark-muted) !important;
}

.login-page input,
.login-page textarea,
.login-page select {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #2f1b24 !important;
}

/* Remove flowers from green title boards/cards */
.subpage .hero::before,
.subpage .hero::after,
.calendar-formal-card::before,
.calendar-formal-card::after,
.calendar-legend-card::before,
.calendar-legend-card::after {
  content: none !important;
}

/* Step 2 — system date picker (formal, restrained) */
.book-flow-calendar {
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 107, 130, 0.26);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(196, 107, 130, 0.14), 0 8px 22px rgba(196, 107, 130, 0.08);
  position: relative;
  overflow: hidden;
}

.book-flow-calendar::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  top: -110px;
  right: -80px;
  border-radius: 999px;
  background: transparent;
  pointer-events: none;
}

.book-flow-calendar::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  bottom: -120px;
  left: -70px;
  border-radius: 999px;
  background: transparent;
  pointer-events: none;
}

.book-flow-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.book-flow-cal-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(196, 107, 130, 0.32);
  background: #ffffff;
  color: #c46b82;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.book-flow-cal-nav:hover {
  background: #c46b82;
  color: var(--text-on-dark);
  border-color: rgba(196, 107, 130, 0.45);
  box-shadow: 0 6px 14px rgba(196, 107, 130, 0.16);
}

.book-flow-cal-nav:focus-visible {
  outline: 2px solid rgba(196, 107, 130, 0.45);
  outline-offset: 2px;
}

.book-flow-cal-month {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #c46b82;
  letter-spacing: 0.02em;
}

.book-flow-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.book-flow-cal-wd {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c46b82;
  padding: 6px 0;
  background: rgba(196, 107, 130, 0.08);
  border-radius: 8px;
}

.book-flow-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  position: relative;
  z-index: 1;
}

.book-flow-cal-cell--empty {
  min-height: 40px;
}

.book-flow-cal-day {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(196, 107, 130, 0.22);
  background: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #33422a;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  line-height: 1.15;
  backdrop-filter: blur(3px);
}

.book-flow-cal-day__num {
  font-size: 0.95rem;
  font-weight: 600;
}

.book-flow-cal-day__status {
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #c46b82;
  max-width: 100%;
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  padding: 0 1px;
  max-height: 1.2em;
  overflow: hidden;
  text-overflow: clip;
}

.book-flow-cal-day--manager-blocked .book-flow-cal-day__status,
.book-flow-cal-day--unavailable .book-flow-cal-day__status {
  font-size: 5px;
  letter-spacing: -0.02em;
  line-height: 1;
  max-height: 1.15em;
  white-space: nowrap;
}

.book-flow-cal-day--available {
  background: linear-gradient(160deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: rgba(34, 197, 94, 0.45);
  color: #166534;
}

.book-flow-cal-day--available:hover {
  background: linear-gradient(160deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #22c55e;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.2);
}

.book-flow-cal-day--partial {
  background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: rgba(217, 119, 6, 0.5) !important;
  color: #92400e !important;
}

.book-flow-cal-day--partial:hover {
  background: linear-gradient(160deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #d97706 !important;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.18);
}

.book-flow-cal-day--partial .book-flow-cal-day__status {
  color: #b45309 !important;
}

.book-flow-cal-day--hold {
  background: linear-gradient(160deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-color: rgba(234, 88, 12, 0.55) !important;
  color: #9a3412 !important;
}

.book-flow-cal-day--hold:hover {
  background: linear-gradient(160deg, #ffedd5 0%, #fed7aa 100%) !important;
  border-color: #ea580c !important;
  box-shadow: 0 8px 18px rgba(234, 88, 12, 0.16);
}

.book-flow-cal-day--hold .book-flow-cal-day__status {
  color: #c2410c !important;
}

.book-flow-cal-day--slashed {
  position: relative;
  overflow: hidden;
}

.book-flow-cal-day__slash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(120, 53, 15, 0.28);
  pointer-events: none;
  z-index: 0;
}

.book-flow-cal-day--booked .book-flow-cal-day__slash {
  color: rgba(127, 29, 29, 0.32);
}

.book-flow-cal-day--slashed .book-flow-cal-day__num,
.book-flow-cal-day--slashed .book-flow-cal-day__status {
  position: relative;
  z-index: 1;
}

.book-flow-cal-day--booked {
  background: linear-gradient(160deg, #f3f4f6 0%, #e5e7eb 100%) !important;
  border-color: #9ca3af !important;
  color: #4b5563 !important;
}

.book-flow-cal-day--booked:disabled,
.book-flow-cal-day--booked.book-flow-cal-day--disabled {
  cursor: not-allowed;
}

.book-flow-cal-day--booked.book-flow-cal-day--checkin,
.book-flow-cal-day--booked.book-flow-cal-day--checkout,
.book-flow-cal-day--booked.book-flow-cal-day--range {
  background: #c46b82 !important;
  border-color: #c46b82 !important;
  color: #fff !important;
}

.book-flow-cal-day--booked .book-flow-cal-day__status {
  color: #6b7280 !important;
}

.book-flow-cal-day--booked.book-flow-cal-day--pending .book-flow-cal-day__status,
.book-flow-cal-day--pending .book-flow-cal-day__status,
.book-flow-cal-day__status--pending,
.avail-facility-card__status--pending,
.book-facility-card__pending,
.book-facility-card__price--pending {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 2px;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  line-height: 1.25;
  max-height: none;
  overflow: visible;
  font-size: 8px;
  font-weight: 700;
  color: #c45c86 !important;
}

.book-facility-card__pending,
.book-facility-card__price--pending,
.avail-facility-card__status--pending {
  display: block;
  font-size: 0.72rem;
}

.book-flow-cal-day--unavailable:not(.book-flow-cal-day--booked),
.book-flow-cal-day--manager-blocked:not(.book-flow-cal-day--booked) {
  background: linear-gradient(160deg, #fde8ef 0%, #f4b8c9 100%) !important;
  border-color: #d97892 !important;
  color: #8f3d57 !important;
}

.book-flow-cal-day--unavailable:not(.book-flow-cal-day--booked) .book-flow-cal-day__status,
.book-flow-cal-day--manager-blocked:not(.book-flow-cal-day--booked) .book-flow-cal-day__status {
  color: #b54e6c !important;
}

.book-flow-cal-day:focus-visible {
  outline: 2px solid rgba(196, 107, 130, 0.75);
  outline-offset: 2px;
}

.book-flow-cal-day--range {
  background: #c46b82;
  border-color: rgba(196, 107, 130, 0.36);
  color: var(--text-on-dark);
}

.book-flow-cal-day--checkin,
.book-flow-cal-day--checkout {
  background: #c46b82;
  border-color: #c46b82;
  color: var(--text-on-dark);
  font-weight: 600;
  box-shadow: 0 10px 18px rgba(196, 107, 130, 0.3);
}

.book-flow-cal-day--checkin .book-flow-cal-day__num,
.book-flow-cal-day--checkout .book-flow-cal-day__num {
  color: var(--text-on-dark);
}

.book-flow-cal-day--checkin .book-flow-cal-day__status--pending,
.book-flow-cal-day--checkout .book-flow-cal-day__status--pending,
.book-flow-cal-day--range .book-flow-cal-day__status--pending,
.book-flow-cal-day--checkin.book-flow-cal-day--pending .book-flow-cal-day__status,
.book-flow-cal-day--checkout.book-flow-cal-day--pending .book-flow-cal-day__status,
.book-flow-cal-day--range.book-flow-cal-day--pending .book-flow-cal-day__status,
.book-flow-cal-day--selected .book-flow-cal-day__status--pending,
.book-flow-cal-day--selected.book-flow-cal-day--pending .book-flow-cal-day__status {
  color: #fff7fb !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-transform: none !important;
}

.book-flow-cal-day--disabled {
  min-height: 52px;
  background: #f6f6f7;
  color: #a7a9af;
  border-color: #ebecef;
  cursor: not-allowed;
  opacity: 1;
}

.book-flow-cal-day--disabled .book-flow-cal-day__status {
  color: #9ca3af;
}

.book-flow-cal-day--disabled:hover {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.book-flow-cal-day--unavailable.book-flow-cal-day--disabled:not(.book-flow-cal-day--booked):not(.book-flow-cal-day--past),
.book-flow-cal-day--manager-blocked.book-flow-cal-day--disabled:not(.book-flow-cal-day--booked):not(.book-flow-cal-day--past) {
  background: linear-gradient(160deg, #fde8ef 0%, #f4b8c9 100%) !important;
  border-color: #d97892 !important;
  color: #8f3d57 !important;
}

.book-flow-cal-day--unavailable.book-flow-cal-day--disabled:not(.book-flow-cal-day--booked):not(.book-flow-cal-day--past) .book-flow-cal-day__status,
.book-flow-cal-day--manager-blocked.book-flow-cal-day--disabled:not(.book-flow-cal-day--booked):not(.book-flow-cal-day--past) .book-flow-cal-day__status {
  color: #b54e6c !important;
}

.book-flow-cal-day--unavailable.book-flow-cal-day--disabled:not(.book-flow-cal-day--booked):not(.book-flow-cal-day--past):hover,
.book-flow-cal-day--manager-blocked.book-flow-cal-day--disabled:not(.book-flow-cal-day--booked):not(.book-flow-cal-day--past):hover {
  background: linear-gradient(160deg, #f9d5e0 0%, #eea8bc 100%) !important;
  border-color: #c46b82 !important;
}

.book-flow-picked {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #c46b82;
  border: 1px solid rgba(196, 107, 130, 0.28);
  color: var(--text-on-dark);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.book-step1-next-hint {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.book-step1-next-hint p {
  margin: 0;
  font-size: 0.92rem;
  color: #4b5563;
  line-height: 1.5;
}

.book-flow-block {
  margin: 0 0 20px;
  padding: 16px 16px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fafbfc;
}

.book-flow-block__title {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d3340;
}

.book-flow-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.book-flow-actions-split {
  justify-content: space-between;
}

.book-flow-actions .btn {
  min-width: 132px;
}

@media (max-width: 900px) {
  .book-flow-actions-split {
    flex-direction: column-reverse;
  }

  .book-flow-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

#bookPanel1 .book-flow-block {
  margin-top: 14px;
  margin-bottom: 0;
}

#bookPanel2 .book-flow-block {
  margin-top: 22px;
  margin-bottom: 0;
}

.book-flow-stay-bar {
  margin: 0 0 4px;
}

#bookPanel1 > .book-flow-stay-bar {
  margin: 0 auto 16px;
  padding-bottom: 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

#bookPanel1 .book-flow-stay-bar .reception-walkin-stay-bar__label {
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: #6b7280;
  text-align: center;
  width: 100%;
}

#bookPanel1 .book-flow-stay-bar .reception-walkin-stay-bar__option input[type="radio"] {
  width: auto !important;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#bookPanel1 .book-flow-stay-bar .reception-walkin-stay-bar__toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 6px;
  border-radius: 16px;
}

#bookPanel1 .book-flow-stay-bar .reception-walkin-stay-bar__option {
  display: block;
  min-width: 0;
}

#bookPanel1 .book-flow-stay-bar .reception-walkin-stay-bar__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

@media (max-width: 640px) {
  #bookPanel1 .book-flow-stay-bar .reception-walkin-stay-bar__toggle {
    grid-template-columns: 1fr;
  }

  #bookPanel1 .book-flow-stay-bar .reception-walkin-stay-bar__option span {
    min-height: 48px;
    font-size: 0.98rem;
  }
}

.book-step2-facilities {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.book-step2-facilities__dates {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #3d3340;
}

.book-step2-facilities__lead {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: #6b7280;
}

.book-step2-facilities__subtype {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b7280;
}

.book-step2-facilities__empty {
  margin: 12px 0 0;
  font-size: 0.92rem;
  color: #dc2626;
}

.book-step1-facilities {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.book-step1-facilities__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.book-step1-facilities__lead {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: #6b7280;
}

.book-step1-facilities__empty {
  margin: 0;
  font-size: 0.92rem;
  color: #6b7280;
}

.book-step1-subgroup-title {
  margin: 10px 0 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b7280;
}

.book-step1-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.book-step1-options--none {
  margin-bottom: 4px;
}

.book-step1-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.book-step1-option:hover {
  border-color: rgba(196, 107, 130, 0.45);
  background: #c46b82;
  color: var(--text-on-dark);
}

.book-step1-option--selected {
  border-color: #c46b82;
  background: #c46b82;
  color: var(--text-on-dark);
}

.book-step1-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.book-unit-detail-hint {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: #6b7280;
}

.book-unit-summary__body--details {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .book-unit-summary__body--details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.book-unit-detail-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.book-unit-detail-card--reserved {
  opacity: 0.88;
  border-color: #fecaca;
  background: #fffafa;
}

.book-unit-detail-card__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
}

.book-unit-detail-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-unit-detail-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.book-unit-detail-card__body {
  min-width: 0;
}

.book-unit-detail-card__name {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: #111827;
}

.book-unit-detail-card__desc {
  margin: 0 0 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #6b7280;
}

.book-unit-detail-card__price {
  margin: 0 0 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #c46b82;
}

.book-unit-detail-card__status {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
}

.book-unit-detail-card__status--ok {
  color: #059669;
}

.book-unit-detail-card__status--bad {
  color: #dc2626;
}

.book-unit-picker {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.book-unit-picker__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.book-unit-picker__groups {
  display: grid;
  gap: 20px;
}

.book-unit-picker__group-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

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

.book-unit-picker__list--none-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* Facility cards with catalog images */
.book-facility-card {
  position: relative;
  display: block;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.book-facility-card:hover:not(.book-facility-card--readonly):not(.book-facility-card--selected):not(:has(> .book-facility-card__input:checked)) {
  border-color: rgba(196, 107, 130, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(196, 107, 130, 0.12);
}

.book-facility-card--selected,
.book-facility-card:has(> .book-facility-card__input:checked) {
  border-color: #c46b82;
  background: #fff8fa;
  box-shadow: 0 0 0 2px #c46b82, 0 8px 22px rgba(196, 107, 130, 0.18);
}

.book-facility-card--selected:hover:not(.book-facility-card--readonly):not(.book-facility-card--none),
.book-facility-card:has(> .book-facility-card__input:checked):hover:not(.book-facility-card--readonly):not(.book-facility-card--none) {
  border-color: #c46b82;
  background: #fff8fa;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px #c46b82, 0 10px 24px rgba(196, 107, 130, 0.22);
}

.book-facility-card--selected:not(.book-facility-card--none)::after,
.book-facility-card:has(> .book-facility-card__input:checked):not(.book-facility-card--none)::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  z-index: 6;
  pointer-events: none;
  border-radius: 50%;
  background-color: #c46b82;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  box-shadow: 0 2px 6px rgba(31, 18, 24, 0.2);
}

.book-facility-card--readonly {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
  background: #f3f4f6;
  filter: grayscale(1);
  box-shadow: none;
}

.book-facility-card--booked {
  border-color: #d1d5db;
  background: #e5e7eb;
  color: #6b7280;
}

.book-facility-card--readonly.book-facility-card--unavailable {
  pointer-events: auto;
  cursor: pointer;
  filter: none;
  background: #f3f4f6;
  border-color: #d1d5db;
  box-shadow: none;
}

.book-facility-card--unavailable.book-facility-card--selected,
.book-facility-card--unavailable:has(> .book-facility-card__input:checked) {
  border-color: #d1d5db;
  background: #f3f4f6;
  box-shadow: none;
}

.book-facility-card--unavailable.book-facility-card--selected::after,
.book-facility-card--unavailable:has(> .book-facility-card__input:checked)::after {
  content: none;
}

.book-facility-card--unavailable .book-facility-card__media img {
  filter: grayscale(0.35);
  opacity: 0.85;
}

.book-facility-card--unavailable .book-facility-card__overlay {
  background: rgba(55, 65, 81, 0.45);
}

.book-facility-card--none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4b5563;
  box-shadow: none;
}

.book-facility-card--none.book-facility-card--selected,
.book-facility-card--none:has(> .book-facility-card__input:checked) {
  border-color: #c46b82;
  background: #c46b82;
  color: var(--text-on-dark);
}

.book-facility-card__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.book-facility-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f3f4f6;
  overflow: hidden;
}

.book-facility-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.book-facility-card__media .facility-swipe {
  position: absolute;
  inset: 0;
  margin: 0;
}

.book-facility-card__media .facility-swipe__viewport,
.book-facility-card__media .facility-swipe__slide {
  height: 100%;
}

.book-facility-card__media .facility-swipe .room-img {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.book-facility-card__media .facility-swipe__prev,
.book-facility-card__media .facility-swipe__next {
  width: 26px;
  height: 26px;
  font-size: 1.1rem;
}

.book-facility-card__media .facility-swipe__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  margin: 0;
  z-index: 2;
}

.book-facility-card__media .facility-swipe__count {
  bottom: 8px;
  z-index: 2;
}

.book-facility-card__media img[src*="big-room-1"],
.book-facility-card__media img[src*="big-room-2"] {
  object-fit: cover;
}

.book-facility-card__media img[src*="big-room-2-beds"] {
  object-position: center 58%;
}

.book-facility-card__media img[src*="big-room-2-living-sofa"] {
  object-position: center 72%;
}

.book-facility-card__media img[src*="big-room-2-tv"] {
  object-position: center 46%;
}

.book-facility-card__media img[src*="big-room-2-bath"] {
  object-position: center 52%;
}

.book-facility-card__media img[src*="big-room-1"] {
  object-position: center 48%;
}

.book-facility-card--readonly .book-facility-card__media img,
.book-facility-card--booked .book-facility-card__media img {
  filter: grayscale(1);
  opacity: 0.75;
}

.book-facility-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(75, 85, 99, 0.55);
  color: #f9fafb;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.book-facility-card__body {
  padding: 10px 12px 12px;
}

.book-facility-card__name {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: #1f2937;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-facility-card__capacity {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: #4b5563;
  font-weight: 600;
}

.book-facility-card__price {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: #c46b82;
  font-weight: 600;
}

.book-unit-modal__capacity,
.book-unit-summary__capacity,
.book-capacity-hint {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: #374151;
  line-height: 1.45;
}

.book-capacity-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 4px 0 2px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #f5d0a9;
  background: linear-gradient(160deg, #fff8ef 0%, #fff1e0 100%);
  color: #5c4328;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.book-guest-capacity-warn {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.book-guest-capacity-warn[hidden] {
  display: none !important;
}

.subpage #adults.book-guest-input--over,
.subpage #children.book-guest-input--over,
body.subpage #adults.book-guest-input--over,
body.subpage #children.book-guest-input--over {
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
  border-color: #f87171 !important;
  background: #fef2f2 !important;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}

.book-capacity-notice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(196, 107, 130, 0.12);
  color: #c46b82;
}

.book-capacity-notice__body {
  flex: 1 1 auto;
  min-width: 0;
}

.book-capacity-notice__title {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #8a3d52;
}

.book-capacity-notice__lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5c4328;
}

.book-facility-pool-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0;
}

.book-facility-pool-notes--form {
  margin-top: 4px;
}

.book-facility-pool-notes--modal {
  margin: 12px 0 0;
}

.book-facility-pool-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #d7cfc4;
  background: linear-gradient(160deg, #fbf9f6 0%, #f4f0ea 100%);
  color: #3f342c;
}

.book-facility-pool-note p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.book-facility-pool-note strong {
  font-weight: 650;
  color: #2c241e;
}

.book-facility-pool-note--room {
  border-color: #c9d9e8;
  background: linear-gradient(160deg, #f5f9fc 0%, #eef4f9 100%);
  color: #2c3d4d;
}

.book-facility-pool-note--hall {
  border-color: #c5e0c8;
  background: linear-gradient(160deg, #f4fbf5 0%, #eaf6ec 100%);
  color: #2f4a34;
}

.book-facility-pool-note--cottage {
  border-color: #c5e0c8;
  background: linear-gradient(160deg, #f4fbf5 0%, #eaf6ec 100%);
  color: #2f4a34;
}

.book-facility-pool-note[hidden],
.book-hall-pool-note[hidden] {
  display: none !important;
}

/* Legacy class kept for older markup references */
.book-hall-pool-note {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #c5e0c8;
  background: linear-gradient(160deg, #f4fbf5 0%, #eaf6ec 100%);
  color: #2f4a34;
}

.book-hall-pool-note p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.book-hall-pool-note--modal {
  margin: 12px 0 0;
}

.book-facility-card__pool-perk {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #2f6b3a;
  font-weight: 500;
}

@media (max-width: 640px) {
  .book-capacity-notice {
    padding: 12px 12px;
    gap: 10px;
  }
}

.book-unit-modal__capacity--ok,
.book-unit-summary__capacity:not(.book-unit-summary__capacity--warn) {
  color: #047857;
}

.book-unit-modal__capacity--warn,
.book-unit-summary__capacity--warn {
  color: #b91c1c;
  font-weight: 600;
}

.book-unit-modal__capacity-alert,
.book-unit-modal__capacity-warn {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

.book-unit-modal__capacity-alert[hidden],
.book-unit-modal__capacity-warn[hidden] {
  display: none !important;
}

.facility-card__capacity {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: #374151;
}

.facility-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.facility-card__actions .btn {
  margin: 0;
  flex: 1 1 120px;
  text-align: center;
  justify-content: center;
}

.facility-card__amenities {
  margin: 10px 0 8px;
}

.facility-card__amenities h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #3d3340;
}

.facility-card__amenities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.facility-card__amenities-list li {
  position: relative;
  padding-left: 1.15em;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #111111;
}

.facility-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  background: rgba(18, 14, 16, 0.72);
  overflow: auto;
  opacity: 0;
  transition: opacity 0.22s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.facility-detail-overlay.is-visible {
  opacity: 1;
}

.facility-detail-overlay[hidden] {
  display: none !important;
}

body.facility-detail-open {
  overflow: hidden;
}

.facility-detail-modal {
  position: relative;
  width: min(1040px, 100%);
  max-height: min(94vh, 980px);
  overflow: auto;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(18, 14, 16, 0.42);
  transform: translateY(16px) scale(0.988);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.facility-detail-overlay.is-visible .facility-detail-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.facility-detail-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #2c2430;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.facility-detail-modal__close:hover {
  background: #fff;
}

.facility-detail-modal__hero {
  position: relative;
  background: #1c1719;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.facility-detail-modal__media {
  background: #1c1719;
}

.facility-detail-modal__media .facility-swipe {
  margin: 0;
}

.facility-detail-modal__media .facility-swipe__viewport,
.facility-detail-modal__media .facility-swipe__slide {
  border-radius: 0;
  height: min(52vh, 460px);
  min-height: 280px;
  background: #1c1719;
}

.facility-detail-modal__media .facility-swipe__slide {
  display: block;
}

.subpage .facility-detail-modal__media .facility-swipe .room-img,
.facility-detail-modal__media .facility-swipe .room-img,
.facility-detail-modal__media .room-img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 45% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block;
  background: #1c1719;
}

.facility-detail-modal__media .room-img[src*="small-room-bed"] {
  object-position: center 55% !important;
}

.facility-detail-modal__media .room-img[src*="small-room-bath"] {
  object-position: center 50% !important;
}

.facility-detail-modal__media .room-img[src*="small-room-tv"] {
  object-position: center 40% !important;
}

.facility-detail-modal__media .facility-swipe__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(18, 14, 16, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.facility-detail-modal__media .facility-swipe__dot {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.facility-detail-modal__media .facility-swipe__dot.is-active {
  background: #fff;
}

.facility-detail-modal__media .facility-swipe__count {
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
  z-index: 3;
  background: rgba(18, 14, 16, 0.5);
  color: #fff;
  border: 0;
}

.facility-detail-modal__media .facility-swipe__expand {
  display: inline-flex;
  top: 14px;
  right: 58px;
  z-index: 4;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.facility-detail-modal__media .facility-swipe__prev,
.facility-detail-modal__media .facility-swipe__next {
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.facility-detail-modal__body {
  padding: 0;
  background:
    radial-gradient(ellipse at top right, rgba(196, 107, 130, 0.08), transparent 42%),
    linear-gradient(180deg, #fffaf8 0%, #ffffff 38%, #faf6f3 100%);
}

.facility-detail-modal__intro {
  margin: 0;
  padding: 26px 32px 22px;
  position: static;
  top: auto;
  left: auto;
  width: auto;
  min-height: 0;
  height: auto;
  z-index: auto;
  overflow: visible;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 247, 249, 0.88)) !important;
  color: inherit;
  border: 0;
  border-bottom: 1px solid rgba(196, 107, 130, 0.12);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.facility-detail-modal__intro-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
}

.facility-detail-modal__intro-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.facility-detail-modal__eyebrow {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c46b82;
}

.facility-detail-modal__title {
  margin: 0 0 14px;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.95rem, 3.3vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: #1f1218;
}

.facility-detail-modal__price-block {
  flex: 0 0 auto;
  min-width: 158px;
  text-align: center;
  padding: 16px 18px 14px;
  border-radius: 16px;
  background:
    linear-gradient(165deg, #c46b82 0%, #b45a74 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 30px rgba(196, 107, 130, 0.28);
}

.facility-detail-modal__price {
  display: block;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
}

.facility-detail-modal__price-unit {
  display: block;
  margin-top: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.facility-detail-modal__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.facility-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(196, 107, 130, 0.16);
  box-shadow: 0 4px 12px rgba(61, 51, 64, 0.04);
  font-size: 0.88rem;
  color: #3d3340;
}

.facility-detail-meta-item__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8190;
}

.facility-detail-meta-item__value {
  font-weight: 600;
  color: #1f1218;
}

.facility-detail-meta-item strong {
  font-weight: 700;
  color: #1f1218;
  margin-right: 6px;
}

.facility-detail-modal__desc {
  margin: 0;
  max-width: 40rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #5a4f57;
}

.facility-detail-modal__divider {
  display: none;
}

.facility-detail-modal__panels {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  margin: 0;
  padding: 22px 32px 8px;
}

.facility-detail-modal__panel {
  padding: 18px 18px 16px;
  border: 1px solid rgba(61, 51, 64, 0.07);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(61, 51, 64, 0.05);
  border-radius: 16px;
}

.facility-detail-modal__panel-head {
  margin: 0 0 14px;
}

.facility-detail-modal__panel-kicker {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(196, 107, 130, 0.12);
  color: #9e4d66;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.facility-detail-modal__panel h3 {
  margin: 0 0 4px;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 600;
  color: #1f1218;
}

.facility-detail-modal__panel-sub {
  margin: 0;
  font-size: 0.8rem;
  color: #8a8190;
}

.facility-detail-modal__amenity-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.facility-detail-modal__amenity-grid li {
  position: relative;
  margin: 0;
  padding: 12px 12px 12px 36px;
  border: 1px solid rgba(196, 107, 130, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fffaf9);
  box-shadow: 0 4px 12px rgba(61, 51, 64, 0.03);
  font-size: 0.9rem;
  line-height: 1.45;
  color: #3d3340;
}

.facility-detail-modal__amenity-grid li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c46b82, #d4899a);
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.14);
}

.facility-detail-modal__amenity-grid li::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 7px;
  height: 4px;
  border-left: 1.7px solid #fff;
  border-bottom: 1.7px solid #fff;
  transform: rotate(-45deg);
}

.facility-detail-modal__panel--notes {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(196, 107, 130, 0.1), rgba(255, 255, 255, 0.95) 48%);
  border: 1px solid rgba(196, 107, 130, 0.14);
  box-shadow: 0 12px 28px rgba(196, 107, 130, 0.06);
}

.facility-detail-modal__notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.facility-detail-modal__notes-list li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.05em;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4a3f48;
}

.facility-detail-modal__notes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.38em;
  height: 0.38em;
  border-radius: 50%;
  background: #c46b82;
}

.facility-detail-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin: 18px 32px 28px;
  padding: 16px 18px;
  border: 1px solid rgba(196, 107, 130, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(196, 107, 130, 0.08), rgba(255, 255, 255, 0.95));
  box-shadow: 0 10px 24px rgba(61, 51, 64, 0.04);
}

.facility-detail-modal__actions-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.facility-detail-modal__actions-copy strong {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f1218;
}

.facility-detail-modal__actions-copy span {
  font-size: 0.84rem;
  color: #7a6d76;
}

.facility-detail-modal__actions-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.facility-detail-modal__book {
  margin: 0;
  min-width: 180px;
  padding: 13px 28px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(196, 107, 130, 0.3);
}

.facility-detail-modal__book:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(196, 107, 130, 0.36);
}

.facility-detail-modal__dismiss {
  margin: 0;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: #8a8190;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.facility-detail-modal__dismiss:hover {
  color: #1f1218;
}

@media (max-width: 820px) {
  .facility-detail-modal__panels {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 18px 6px;
  }

  .facility-detail-modal__amenity-grid {
    grid-template-columns: 1fr;
  }

  .facility-detail-modal__intro {
    padding: 22px 18px 18px;
  }

  .facility-detail-modal__intro-top {
    flex-direction: column;
    gap: 14px;
  }

  .facility-detail-modal__price-block {
    align-self: flex-start;
    text-align: center;
    min-width: 0;
  }

  .facility-detail-modal__actions {
    margin: 14px 18px 22px;
    flex-direction: column;
    align-items: stretch;
  }

  .facility-detail-modal__actions-btns {
    width: 100%;
  }

  .facility-detail-modal__book {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .facility-detail-overlay {
    padding: 0;
    align-items: stretch;
  }

  .facility-detail-modal {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .facility-detail-modal__hero {
    border-radius: 0;
  }

  .facility-detail-modal__close {
    top: 12px;
    right: 12px;
  }

  .facility-detail-modal__body {
    padding: 0;
  }

  .facility-detail-modal__media .facility-swipe__viewport,
  .facility-detail-modal__media .facility-swipe__slide {
    height: min(42vh, 320px);
    min-height: 220px;
  }

  .facility-detail-modal__media .facility-swipe__expand {
    right: 56px;
  }

  .facility-detail-modal__book {
    flex: 1 1 100%;
    min-width: 0;
  }
}

.facility-card__amenities-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #7fc142;
  font-weight: 700;
}

.book-unit-summary {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}

.book-details-summary.book-unit-summary {
  margin-top: 10px;
  padding: 10px 12px 8px;
  border-radius: 10px;
  border: 1px solid rgba(196, 107, 130, 0.2);
  background: #ffffff;
}

.book-details-summary .book-unit-picker__title {
  margin: 0 0 6px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1f1218;
}

.book-details-summary__list {
  display: grid;
  grid-template-columns: minmax(92px, 0.9fr) minmax(0, 1.35fr);
  gap: 2px 12px;
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid rgba(196, 107, 130, 0.14);
}

@media (min-width: 640px) {
  .book-details-summary__list {
    grid-template-columns: minmax(88px, 0.7fr) minmax(0, 1.2fr) minmax(88px, 0.7fr) minmax(0, 1.2fr);
    gap: 3px 16px;
  }

  .book-details-summary__list > :nth-child(n + 5) {
    border-top: 1px solid rgba(196, 107, 130, 0.08);
    margin-top: 3px;
    padding-top: 5px;
  }
}

.book-details-summary__list dt {
  margin: 0;
  padding: 2px 0;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8190;
  line-height: 1.35;
}

.book-details-summary__list dd {
  margin: 0;
  padding: 2px 0;
  color: #1f1218;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
}

.book-details-summary__list dd.is-pending {
  font-weight: 500;
  color: #9ca3af;
  font-style: italic;
}

.book-details-summary__hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: #8a8190;
  line-height: 1.3;
}

body.subpage .book-details-summary__hint {
  font-size: 0.75rem;
  color: #8a8190;
}

.book-unit-summary__body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.book-unit-summary__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-size: 0.84rem;
  color: #374151;
}

.book-unit-summary__chip img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.book-unit-summary__chip--plain {
  padding: 6px 12px;
}

.book-unit-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.book-unit-modal[hidden] {
  display: none;
}

.book-unit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(2px);
}

.book-unit-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(88vh, 780px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
  padding: 0;
}

.book-unit-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #374151;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.book-unit-modal__close:hover {
  background: #fff;
  color: #111827;
}

.book-unit-modal header.book-unit-modal__header,
.book-unit-modal__header {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  height: auto;
  padding: 18px 20px 12px;
  margin: 0;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
}

.book-unit-modal__header button {
  padding: 8px 16px;
}

.book-unit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.book-unit-tab-panel[hidden] {
  display: none !important;
}

.book-unit-info {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(47, 27, 36, 0.32);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.book-unit-info[hidden] {
  display: none;
}

.book-unit-info__card {
  width: min(360px, 100%);
  padding: 22px 20px 20px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, #fff8fa 0%, #ffffff 68%);
  border: 1px solid rgba(196, 107, 130, 0.22);
  box-shadow: 0 16px 36px rgba(47, 27, 36, 0.16);
}

.book-unit-info__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c46b82;
}

.book-unit-info__title {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2f1b24;
}

.book-unit-info__dates {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b6170;
}

.book-unit-info__lead {
  margin: 0 auto 16px;
  max-width: 34ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #5f6673;
}

.book-unit-modal__title {
  margin: 0 28px 4px 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #111827;
}

.book-unit-modal__dates {
  margin: 0;
  color: #6b7280;
  font-size: 0.88rem;
  font-weight: 500;
}

.book-unit-modal__lead {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 0.84rem;
  line-height: 1.45;
}

.book-unit-modal__empty {
  margin: 0;
  padding: 8px 20px 0;
  color: #b45309;
  font-size: 0.88rem;
}

.book-unit-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex: 0 0 auto;
  padding: 12px 16px 14px;
  border-top: 1px solid #f1f5f9;
  background: #fff;
}

.book-unit-confirm {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.book-unit-confirm[hidden] {
  display: none;
}

.book-unit-confirm__body {
  max-height: 168px;
  overflow: auto;
}

.book-unit-confirm__box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px 10px;
  border: 1px solid #f4e6ea;
  border-radius: 16px;
  background: #fffafb;
}

.book-unit-confirm__facility {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 86px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.book-unit-confirm__photo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 78px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
  background: #f6e8ec;
  box-shadow: 0 6px 14px rgba(47, 27, 36, 0.08);
}

.book-unit-confirm__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-unit-confirm__name {
  display: -webkit-box;
  width: 100%;
  max-width: 86px;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: #2f1b24;
  text-align: center;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.book-unit-confirm__schedule {
  flex: 1 0 100%;
  margin: 2px 2px 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #6b6170;
}

.book-unit-confirm__cancel {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #9f3d55;
  box-shadow: 0 2px 8px rgba(47, 27, 36, 0.22);
  cursor: pointer;
}

.book-unit-confirm__cancel svg {
  width: 15px;
  height: 15px;
}

.book-unit-confirm__cancel:hover,
.book-unit-confirm__cancel:focus-visible {
  background: #c46b82;
  color: #fff;
  outline: none;
  box-shadow: 0 2px 8px rgba(196, 107, 130, 0.35);
}

.book-unit-confirm__cancel:disabled {
  opacity: 0.5;
  cursor: wait;
}

.book-unit-modal__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px 18px;
  background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
  border-top: 1px solid #f1f5f9;
}

.book-unit-modal__footer .book-unit-modal__actions {
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  margin: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.book-unit-modal__footer .book-unit-modal__actions .btn {
  width: auto;
  white-space: nowrap;
}

.book-flow-btn-main:disabled,
.book-flow-btn-main[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

#bookUnitModalError {
  margin: 0 20px 8px;
}

#bookUnitModalHost {
  padding: 16px 20px 8px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

body.book-unit-modal-open {
  overflow: hidden;
}

@media (min-width: 520px) {
  .book-unit-picker__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.subpage .calendar {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(196, 107, 130, 0.2);
  box-shadow: 0 12px 30px rgba(196, 107, 130, 0.1), 0 8px 18px rgba(127, 193, 66, 0.08);
}

.subpage .calendar th {
  background: #ffffff;
  color: #c46b82;
  border-color: rgba(196, 107, 130, 0.2);
}

.subpage .calendar td {
  background: #fff;
  border-color: #c46b82;
}

.subpage .calendar tr:nth-child(even) td {
  background: rgba(196, 107, 130, 0.22);
}

.book-flow-pay {
  margin-top: 8px;
}

.book-flow-pay-breakdown {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f6fff4 0%, #ffffff 100%);
  border: 1px solid rgba(127, 193, 66, 0.35);
  color: #1f2b16;
  font-size: 0.95rem;
  line-height: 1.55;
}

.book-flow-pay-highlight {
  color: #047857;
  font-weight: 700;
}

.book-flow-pay-zero-note {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 500;
}

.book-flow-pay-method {
  margin: 18px 0;
  padding: 20px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #d7e8c4;
  box-shadow: 0 8px 28px rgba(31, 43, 22, 0.06);
}

.book-flow-pay-method-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a8a1f;
}

.book-flow-pay-method-name {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.55;
}

.book-flow-qr-wrap--gcash {
  display: flex;
  justify-content: center;
  margin: 12px 0 16px;
}

.book-flow-qr-wrap--gcash .book-flow-qr {
  border-radius: 12px;
  border: 1px solid rgba(127, 193, 66, 0.4);
  box-shadow: 0 10px 32px rgba(31, 43, 22, 0.09);
  background: #fff;
}

.book-flow-pay-gcash-number {
  margin: 0 0 12px;
  text-align: center;
  font-size: 1.05rem;
  color: #1f2b16;
}

.book-flow-pay-gcash-digits {
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.04em;
  color: #047857;
  font-size: 1.15rem;
}

.book-flow-pay-method-hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #6b7280;
}

.book-flow-pay-note {
  margin: 16px 0 8px;
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.55;
}

.subpage .book-flow-notes {
  padding-top: 8px;
  padding-bottom: 52px;
}

.subpage .book-flow-aside .book-flow-aside__h3 {
  margin: 1.35rem 0 10px;
  font-size: 1.05rem;
  color: #1f2b16;
}

.subpage .book-flow-aside {
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(196, 107, 130, 0.2);
  box-shadow: 0 14px 30px rgba(196, 107, 130, 0.1), 0 8px 18px rgba(127, 193, 66, 0.08);
}

.subpage .book-flow-aside .book-flow-aside__title,
.subpage .book-flow-aside .book-flow-aside__h3 {
  color: #74b34d;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.subpage .book-flow-aside .book-flow-aside__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.subpage .book-flow-aside .book-flow-aside__section {
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 107, 130, 0.16);
  background: #ffffff;
  margin-bottom: 12px;
}

.subpage .book-flow-aside .book-flow-aside__list {
  gap: 8px;
}

.subpage .book-flow-aside .book-flow-aside__list li {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(196, 107, 130, 0.14);
  color: #5e3f4f;
  line-height: 1.55;
}

.subpage .book-flow-aside .note {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(143, 207, 99, 0.25);
}

@media (max-width: 520px) {
  .book-flow-cal-day {
    min-height: 36px;
    font-size: 0.9rem;
  }

  .book-flow-cal-wd {
    font-size: 10px;
  }
}

.subpage .calendar th,
.subpage .calendar td {
  border: 1px solid #e4e8df;
  padding: 12px;
  text-align: center;
}

.subpage .calendar th {
  background: rgba(196, 107, 130, 0.28);
  color: #335e16;
}

.subpage .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.subpage .contact-info-card {
  display: flex;
  flex-direction: column;
}

.subpage .contact-info-card:hover {
  transform: none;
}

.subpage .contact-location {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e4e8df;
}

.subpage .contact-location-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #74b34d;
}

.subpage .contact-location-lead {
  margin: 0 0 10px;
}

.subpage .contact-info-card .map-wrap {
  margin-top: 0;
  flex: 1;
}

.subpage .contact-info-card .map-wrap iframe {
  min-height: 280px;
}

.subpage .contact-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.subpage .contact-map-actions .btn {
  margin-top: 0;
}

.subpage input:not(.swal2-input):not(.swal2-file),
.subpage textarea:not(.swal2-textarea),
.subpage select:not(.swal2-select) {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d7ddcf;
  border-radius: 8px;
  margin-top: 4px;
  margin-bottom: 6px;
  font-family: "Poppins", sans-serif;
  background: #fff;
}

.subpage select {
  /* Make native dropdowns easier to tap/read (Windows selects vary by browser). */
  min-height: 42px;
  padding: 8px 12px;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.subpage input:not(.swal2-input):not(.swal2-file):focus,
.subpage textarea:not(.swal2-textarea):focus,
.subpage select:not(.swal2-select):focus {
  border-color: #7fc142;
  box-shadow: 0 0 0 3px rgba(127, 193, 66, 0.2);
  outline: none;
}

.subpage .password-field {
  position: relative;
  margin-top: 8px;
  margin-bottom: 12px;
}

.subpage .password-field > input[type="password"],
.subpage .password-field > input[type="text"] {
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 48px;
}

.subpage .password-field__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  line-height: 0;
}

.subpage .password-field__toggle:hover {
  color: #335e16;
  background: rgba(127, 193, 66, 0.12);
}

.subpage .password-field__toggle:focus {
  outline: none;
}

.subpage .password-field__toggle:focus-visible {
  outline: 2px solid #7fc142;
  outline-offset: 2px;
}

.subpage .password-field__svg {
  display: block;
  pointer-events: none;
}

@media (max-width: 900px) {
  .subpage .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .subpage .grid,
  .subpage .contact-grid {
    grid-template-columns: 1fr;
  }

  .subpage .contact-info-card .map-wrap iframe {
    min-height: 320px;
  }

  .subpage .contact-map-actions .btn {
    flex: 1 1 auto;
  }
}

.subpage .section-title {
  margin-bottom: 12px;
  font-size: 1.5rem;
  color: #1f2b16;
}

.subpage .credentials-lead {
  max-width: 720px;
  margin: -4px 0 14px;
  color: #5f6673;
  line-height: 1.55;
}

.subpage .split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.subpage .pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.subpage .pill-list span {
  display: inline-block;
  background: rgba(196, 107, 130, 0.28);
  color: #335e16;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.subpage .kpi {
  text-align: center;
}

.subpage .admin-kpi-card {
  cursor: pointer;
}

.subpage .admin-kpi-card:focus {
  outline: 2px solid rgba(127, 193, 66, 0.6);
  outline-offset: 4px;
}

.subpage .kpi h4 {
  font-size: 2rem;
  color: #7fc142;
}

.subpage .quote {
  font-style: italic;
  color: #4b5563;
  margin-top: 8px;
}

.subpage .review-card .review-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e8f2de;
  margin-bottom: 10px;
}

/* Dark book strip keeps white text; soft pink surfaces use ink */
.book,
.book h1,
.book p {
  color: #ffffff !important;
}

.newsletter .newsletter-banner.flex_space,
.newsletter .newsletter-banner h1,
.newsletter .newsletter-banner p,
.newsletter .newsletter-banner label {
  color: var(--text-on-dark) !important;
}

.services .box .text h3 {
  color: #1a1a1a !important;
}

.subpage .stars {
  color: #f4b400;
  letter-spacing: 2px;
  font-size: 1rem;
  margin-bottom: 8px;
}

.subpage .room-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid #e5eadf;
}

/* Resort Credentials: show full permit/certificate images (no crop) */
#aboutCredGrid .credential-card__media {
  display: block;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid #e5eadf;
  background: #f8faf8;
  overflow: hidden;
  text-decoration: none;
}

#aboutCredGrid .credential-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: top center;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.facility-swipe {
  position: relative;
  margin-bottom: 12px;
}

.facility-swipe__viewport {
  overflow: hidden;
  border-radius: 10px;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.facility-swipe__track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}

.facility-swipe__slide {
  flex: 0 0 100%;
  min-width: 100%;
  overflow: hidden;
}

.facility-swipe .room-img {
  margin-bottom: 0;
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
}

.facility-swipe .room-img[src*="small-room-bed"] {
  object-position: center 62%;
}

.facility-swipe .room-img[src*="small-room-bath"] {
  object-position: center 72%;
}

.facility-swipe .room-img[src*="small-room-tv"] {
  object-position: center 42%;
}

.facility-swipe .room-img[src*="big-room-1"] {
  object-fit: cover;
  object-position: center 48%;
}

.facility-swipe .room-img[src*="big-room-2"] {
  object-fit: cover;
  object-position: center 48%;
}

.facility-swipe .room-img[src*="big-room-2-beds"] {
  object-position: center 58%;
}

.facility-swipe .room-img[src*="big-room-2-living-sofa"] {
  object-position: center 72%;
}

.facility-swipe .room-img[src*="big-room-2-tv"] {
  object-position: center 46%;
}

.facility-swipe .room-img[src*="big-room-2-bath"] {
  object-position: center 52%;
}

.subpage .room-img[src*="small-room-bed"] {
  object-position: center 62%;
}

.book-facility-card__media img[src*="small-room-bed"] {
  object-position: center 62%;
}

.book-facility-card__media img[src*="small-room-bath"] {
  object-position: center 72%;
}

.book-facility-card__media img[src*="small-room-tv"] {
  object-position: center 42%;
}

.facility-swipe__prev,
.facility-swipe__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1f1218;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(31, 18, 24, 0.16);
}

.facility-swipe__prev { left: 8px; }
.facility-swipe__next { right: 8px; }

.facility-swipe__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.facility-swipe__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
}

.facility-swipe__dot.is-active {
  background: #c46b82;
}

.facility-swipe__count {
  position: absolute;
  right: 8px;
  bottom: 36px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(31, 18, 24, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.facility-swipe--single .facility-swipe__count,
.facility-swipe--single .facility-swipe__dots,
.facility-swipe--single .facility-swipe__prev,
.facility-swipe--single .facility-swipe__next {
  display: none;
}

.facility-swipe__expand {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  color: #1f1218;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(31, 18, 24, 0.16);
  pointer-events: auto;
}

.facility-swipe__expand svg {
  width: 16px;
  height: 16px;
  display: block;
}

.facility-swipe__expand:hover,
.facility-swipe__expand:focus-visible {
  background: #fff;
  color: #c46b82;
}

.book-facility-card__media .facility-swipe__expand {
  width: 26px;
  height: 26px;
  z-index: 5;
}

.book-facility-card__media .facility-swipe__expand svg {
  width: 14px;
  height: 14px;
}

.book-facility-card__overlay {
  pointer-events: none;
  z-index: 3;
}

.book-facility-card--readonly .facility-swipe__expand,
.book-facility-card--readonly .facility-swipe__prev,
.book-facility-card--readonly .facility-swipe__next,
.book-facility-card--readonly .facility-swipe__dot,
.book-facility-card--readonly .facility-swipe__viewport {
  pointer-events: auto;
}

body.facility-lightbox-open {
  overflow: hidden;
}

.facility-lightbox {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.facility-lightbox[hidden] {
  display: none;
}

.facility-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 14, 0.88);
}

.facility-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.facility-lightbox__close {
  position: absolute;
  top: -4px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.facility-lightbox__close:hover,
.facility-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.facility-lightbox__title {
  margin: 0 48px 0 0;
  align-self: stretch;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
}

.facility-lightbox__stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.facility-lightbox__img {
  display: block;
  max-width: min(96vw, 1100px);
  max-height: min(78vh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #111;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.facility-lightbox__prev,
.facility-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1f1218;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.facility-lightbox__prev { left: 8px; }
.facility-lightbox__next { right: 8px; }

.facility-lightbox__count {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  font-weight: 700;
}

.facility-lightbox__thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}

.facility-lightbox__thumb {
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #222;
  cursor: pointer;
}

.facility-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.facility-lightbox__thumb.is-active {
  border-color: #c46b82;
}

.facility-lightbox--single .facility-lightbox__prev,
.facility-lightbox--single .facility-lightbox__next,
.facility-lightbox--single .facility-lightbox__thumbs {
  display: none;
}

@media (max-width: 640px) {
  .facility-lightbox {
    padding: 10px;
  }

  .facility-lightbox__img {
    max-height: min(68vh, 640px);
  }

  .facility-lightbox__prev,
  .facility-lightbox__next {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }

  .facility-lightbox__prev { left: 2px; }
  .facility-lightbox__next { right: 2px; }
}

.facility-photos-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.facility-photos-field__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #374151;
}

.facility-photos-field__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.facility-photos-field__row input[type="text"] {
  flex: 1 1 220px;
}

.facility-photos-field__hint {
  margin: 0;
  font-size: 0.78rem;
  color: #6b7280;
}

.facility-photos-preview__count,
.facility-photos-preview__empty {
  margin: 0;
  font-size: 0.78rem;
  color: #4b5563;
}

.facility-photos-preview__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.facility-photos-preview__item {
  position: relative;
  width: 72px;
  height: 72px;
}

.facility-photos-preview__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.facility-photos-preview__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.subpage .sentiment-row {
  display: grid;
  grid-template-columns: 150px 1fr 48px;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.subpage .sentiment-row label {
  color: #374151;
  font-weight: 500;
}

.subpage .sentiment-bar {
  height: 10px;
  background: #eef2ea;
  border-radius: 999px;
  overflow: hidden;
}

.subpage .sentiment-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0%;
  transition: width 0.45s ease;
}

.subpage .sentiment-bar .positive {
  background: #7fc142;
}

.subpage .sentiment-bar .neutral {
  background: #94a3b8;
}

.subpage .sentiment-bar .negative {
  background: #ef4444;
}

.reviews-page .reviews-sentiment-live {
  display: none;
}

.subpage .sentiment-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subpage .table-wrap {
  overflow-x: auto;
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  background: #fff;
  box-shadow: var(--dt-shadow);
  -webkit-overflow-scrolling: touch;
}

.subpage .map-wrap {
  margin-top: 14px;
  border: 1px solid #e4e8df;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(31, 41, 55, 0.06);
}

.subpage .map-wrap iframe {
  width: 100%;
  min-height: 360px;
  border: 0;
  display: block;
}

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

.subpage .form-grid .full {
  grid-column: 1 / -1;
}

.subpage .note {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
}

@media (max-width: 900px) {
  .subpage .split-2,
  .subpage .form-grid {
    grid-template-columns: 1fr;
  }
}

.subpage .auth-gate-card {
  max-width: 440px;
  margin: 0 auto;
  padding: 28px 26px 24px;
  text-align: center;
}

.subpage .auth-gate-card__header {
  margin-bottom: 4px;
}

.subpage .auth-gate-card h3 {
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.55rem);
  font-weight: 600;
  color: var(--brand-pink-dark, #c46b82);
  letter-spacing: 0.02em;
}

.subpage .auth-gate-card__lead {
  margin: 0 auto 20px;
  max-width: 34ch;
  line-height: 1.55;
  color: #4a5568;
}

.subpage .auth-gate-card p {
  margin-bottom: 0;
}

.subpage .auth-gate-card .auth-msg {
  text-align: left;
  margin-bottom: 14px;
}

.subpage .auth-gate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 0;
}

.subpage .auth-gate-btn {
  width: 100%;
  margin-top: 0;
  padding: 12px 16px;
  text-align: center;
  box-sizing: border-box;
}

.subpage .auth-gate-card .auth-oauth {
  margin-top: 22px;
}

.subpage .auth-gate-card .auth-oauth-divider {
  margin-bottom: 16px;
}

.subpage .auth-gate-card .btn--facebook,
.subpage .auth-gate-card .btn--google {
  margin-top: 0;
}

.subpage .auth-gate-card .btn--outline {
  border-color: rgba(196, 107, 130, 0.42) !important;
  color: var(--brand-pink-dark, #c46b82) !important;
}

.subpage .auth-gate-card .btn--outline:hover,
.subpage .auth-gate-card .btn--outline:focus-visible {
  background: rgba(196, 107, 130, 0.08) !important;
  color: var(--brand-pink-dark, #c46b82) !important;
}

.subpage .auth-gate-card .auth-oauth-divider::before,
.subpage .auth-gate-card .auth-oauth-divider::after {
  background: rgba(196, 107, 130, 0.18);
}

@media (max-width: 420px) {
  .subpage .auth-gate-actions {
    grid-template-columns: 1fr;
  }
}

.subpage .btn--outline {
  background: #fff;
  color: #335e16;
  border: 2px solid #7fc142;
}

.subpage .btn--outline:hover {
  background: rgba(196, 107, 130, 0.28);
  color: #1f2b16;
}

.subpage .btn,
.admin-app .btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.65rem 1.15rem;
  box-sizing: border-box;
  gap: 0.5rem;
}

.subpage .btn--small,
.admin-app .btn--small {
  min-height: 2.375rem;
  min-width: 2.375rem;
  margin-top: 0;
  padding: 0.5rem 0.9rem;
  font-size: 14px;
}

.subpage .book-nav-user {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  list-style: none;
}

.subpage .book-nav-identity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.subpage .book-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.subpage .book-nav-greet {
  color: #1f2b16;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.subpage .auth-card {
  max-width: 560px;
  margin: 0 auto;
}

.subpage .auth-card > h3,
.subpage .auth-card #loginCardTitle {
  text-align: center;
  font-weight: 700;
  width: 100%;
  margin: 0 0 14px;
}

.subpage .auth-lead {
  margin-bottom: 14px;
}

.subpage .auth-form-single {
  grid-template-columns: 1fr;
}

.subpage .auth-form-single .full:has(> .btn),
.subpage #loginForm .full:has(#loginSubmitBtn) {
  display: flex;
  justify-content: center;
}

.subpage .auth-msg {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}

.subpage .auth-msg--ok {
  background: rgba(95, 158, 46, 0.16);
  color: #1f4a0c;
  border: 1px solid #b8e096;
}

.subpage .auth-msg--err {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.subpage .auth-switch a {
  color: #5f9e2e;
  font-weight: 600;
}

.subpage .auth-forgot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin: -2px 0 8px;
}

.subpage .auth-forgot[hidden] {
  display: none;
}

.subpage .auth-forgot a,
.subpage .auth-forgot button {
  color: #5f9e2e;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

.subpage .auth-forgot button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.subpage .auth-forgot .btn-spinner {
  border-color: rgba(95, 158, 46, 0.35);
  border-top-color: #5f9e2e;
}

.subpage .auth-reset-form[hidden] {
  display: none !important;
}

.subpage .auth-reset-form .btn {
  width: 100%;
}

.subpage .auth-card .auth-lead {
  text-align: center;
  color: #3d4a34;
  line-height: 1.5;
}

.subpage .auth-oauth {
  margin-top: 18px;
}

.subpage .auth-oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: #7a8575;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.subpage .auth-oauth-divider::before,
.subpage .auth-oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(127, 193, 66, 0.25);
}

.subpage .auth-oauth-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.subpage .btn--facebook,
.subpage .btn--google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  margin-top: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.subpage .btn--facebook,
.subpage .btn--facebook:hover,
.subpage .btn--facebook:active,
.subpage .btn--facebook:focus,
.subpage .btn--facebook:focus-visible {
  background: #1877f2 !important;
  border: 1px solid #1877f2 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 18px rgba(24, 119, 242, 0.22);
}

.subpage .btn--facebook:hover,
.subpage .btn--facebook:focus-visible {
  background: #166fe0 !important;
  border-color: #166fe0 !important;
}

.subpage .btn--facebook:disabled,
.subpage .btn--google:disabled {
  opacity: 0.72;
  cursor: wait !important;
}

.subpage .btn--google,
.subpage .btn--google:hover,
.subpage .btn--google:active,
.subpage .btn--google:focus,
.subpage .btn--google:focus-visible {
  background: #c46b82 !important;
  border: 1px solid #c46b82 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.22);
}

.subpage .btn--google:hover,
.subpage .btn--google:focus-visible {
  background: #b35f75 !important;
  border-color: #b35f75 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Keep Google's multicolor G (global pink-button rules force white fills) */
.subpage .btn.btn--google svg,
.subpage .btn.btn--google svg * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  stroke: none !important;
}

.subpage .btn.btn--google .btn-google-icon path:nth-child(1) {
  fill: #4285f4 !important;
}
.subpage .btn.btn--google .btn-google-icon path:nth-child(2) {
  fill: #34a853 !important;
}
.subpage .btn.btn--google .btn-google-icon path:nth-child(3) {
  fill: #fbbc05 !important;
}
.subpage .btn.btn--google .btn-google-icon path:nth-child(4) {
  fill: #ea4335 !important;
}

.subpage .btn.btn--google .btn-loading-label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.subpage .btn--google .btn-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

/* Button loading state (shared via ui-button-loading.js) */
.btn.is-loading,
.subpage .btn.is-loading,
.primary-btn.is-loading,
.admin-save-btn.is-loading,
.book-flow-btn-main.is-loading,
button.is-loading,
input[type="submit"].is-loading {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  opacity: 0.85;
  cursor: wait !important;
  pointer-events: none;
}

.btn-spinner {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.75s linear infinite;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  fill: none !important;
  stroke: none !important;
}

.btn--outline .btn-spinner,
.subpage .btn--outline .btn-spinner,
.subpage .btn--facebook .btn-spinner {
  border-color: rgba(127, 193, 66, 0.35);
  border-top-color: #c46b82;
}

.subpage .btn--facebook .btn-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

.btn-loading-label {
  white-space: nowrap;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.subpage .btn-facebook-icon,
.subpage .btn-google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.subpage .auth-callback-card {
  text-align: center;
}

.subpage .auth-callback-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  border: 3px solid rgba(127, 193, 66, 0.25);
  border-top-color: #c46b82;
  border-radius: 50%;
  animation: auth-callback-spin 0.85s linear infinite;
}

@keyframes auth-callback-spin {
  to {
    transform: rotate(360deg);
  }
}

.subpage .booking-summary-card {
  margin-bottom: 0;
}

.subpage .booking-summary-lead {
  margin-bottom: 16px;
  color: #5f6673;
}

.subpage .req-mark {
  color: #b91c1c;
  font-weight: 700;
}

.subpage .booking-form-hint {
  margin-bottom: 12px;
}

.subpage .bookings-carousel-host {
  min-height: 1px;
}

.subpage .booking-carousel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.subpage .booking-carousel__shell {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: stretch;
  gap: 8px;
}

.subpage .booking-carousel__shell--single {
  grid-template-columns: minmax(0, 1fr);
}

.subpage .booking-carousel__shell--single .booking-carousel__viewport--full {
  grid-column: 1 / -1;
}

.subpage .booking-carousel__viewport {
  overflow: hidden;
  border-radius: 16px;
  min-width: 0;
  touch-action: pan-y pinch-zoom;
}

.subpage .booking-carousel__track {
  display: flex;
  flex-direction: row;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .subpage .booking-carousel__track {
    transition-duration: 0.01ms;
  }
}

.subpage .booking-carousel__slide {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 4px;
}

.subpage .booking-carousel__arrow {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #d7e8c4;
  background: linear-gradient(180deg, #fff 0%, #f6faf2 100%);
  color: #335e16;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease,
    opacity 0.25s ease;
  box-shadow: 0 2px 8px rgba(31, 43, 22, 0.08);
}

.subpage .booking-carousel__arrow:hover:not(:disabled) {
  background: #7fc142;
  color: #fff;
  border-color: #6aad38;
  box-shadow: 0 4px 14px rgba(127, 193, 66, 0.35);
}

.subpage .booking-carousel__arrow:active:not(:disabled) {
  transform: scale(0.96);
}

.subpage .booking-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.subpage .booking-carousel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}

.subpage .booking-carousel__counter {
  font-size: 13px;
  font-weight: 600;
  color: #5f6673;
  letter-spacing: 0.02em;
}

.subpage .booking-carousel__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.subpage .booking-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}

.subpage .booking-carousel__dot:hover {
  background: #9ca3af;
}

.subpage .booking-carousel__dot--active {
  background: #7fc142;
  width: 22px;
}

.subpage .booking-card {
  position: relative;
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: linear-gradient(145deg, #fdfefa 0%, #f3f8ec 55%, #eef5e4 100%);
  border: 1px solid rgba(127, 193, 66, 0.28);
  box-shadow: 0 10px 36px rgba(31, 43, 22, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

.subpage .booking-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #7fc142, #a8d96a, #7fc142);
  opacity: 0.9;
}

.subpage .booking-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.booking-status__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  font-size: 0.95em;
  font-weight: 800;
  line-height: 1;
}

.status-glyph {
  display: block;
  width: 1em;
  height: 1em;
}

.booking-status__label {
  line-height: 1.2;
}

.subpage .booking-status--pending {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.subpage .booking-status--confirmed {
  background: #ecfdf3;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.subpage .booking-status--cancelled {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.subpage .booking-card__name {
  margin: 0 0 16px;
  font-size: 1.35rem;
  font-weight: 600;
  color: #1f2b16;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.02em;
}

.subpage .booking-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(127, 193, 66, 0.15);
}

.subpage .booking-card__row:last-of-type {
  border-bottom: none;
}

.subpage .booking-card__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subpage .booking-card__value {
  font-size: 15px;
  font-weight: 600;
  color: #1f2b16;
  text-align: right;
}

.subpage .booking-card__value--note {
  font-size: 13px;
  font-weight: 600;
  color: #9a3412;
  max-width: 58%;
  line-height: 1.35;
}

.subpage .booking-card__note-row .booking-card__label {
  color: #c2410c;
}

.subpage .booking-card__sub {
  margin: 14px 0 0;
  font-size: 12px;
  color: #9ca3af;
}

.subpage .booking-card__details {
  margin-top: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #e4e8df;
}

.subpage .booking-card__details summary {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #335e16;
  list-style: none;
}

.subpage .booking-card__details summary::-webkit-details-marker {
  display: none;
}

.subpage .booking-card__details summary::after {
  content: "▸";
  float: right;
  transition: transform 0.25s ease;
}

.subpage .booking-card__details[open] summary::after {
  transform: rotate(90deg);
}

.subpage .booking-card__details .booking-dl {
  padding: 0 14px 14px;
  margin: 0;
  border-top: 1px solid #e8ede3;
  max-height: min(42vh, 360px);
  overflow: auto;
  line-height: 1.35;
}

.subpage .booking-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  font-size: 14px;
  margin: 0;
}

.subpage .booking-dl--compact {
  grid-template-columns: minmax(100px, 130px) 1fr;
  font-size: 13px;
}

.subpage .booking-dl dt {
  color: #6b7280;
  font-weight: 400;
  margin: 0;
}

.subpage .booking-dl dd {
  margin: 0;
  color: #1f2b16;
  font-weight: 500;
}

.subpage .bookings-empty {
  padding: 18px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  border: 1px dashed #d7ddcf;
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 640px) {
  .subpage .booking-carousel__shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 4px;
  }

  .subpage .booking-carousel__arrow {
    width: 38px;
    height: 38px;
  }

  .subpage .booking-card {
    padding: 18px 16px 14px;
  }

  .subpage .booking-card__name {
    font-size: 1.2rem;
  }

  .subpage .booking-card__details .booking-dl {
    max-height: min(38vh, 280px);
  }
}

@media (max-width: 600px) {
  .subpage .booking-dl {
    grid-template-columns: 1fr;
  }
  .subpage .booking-dl dt {
    margin-top: 8px;
  }
  .subpage .booking-dl dt:first-child {
    margin-top: 0;
  }
}

/* Payment submitted modal (after down payment) */
.payment-success-overlay[hidden] {
  display: none;
}

.payment-success-overlay:not([hidden]) {
  display: flex;
}

.payment-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(31, 41, 55, 0.48);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.payment-success-overlay--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.payment-success-overlay:not(.payment-success-overlay--open) .payment-success-modal {
  pointer-events: none;
}

.payment-success-overlay--open .payment-success-modal {
  pointer-events: auto;
}

.payment-success-modal {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 28px;
  border-radius: 20px;
  background: linear-gradient(165deg, #f6fff4 0%, #ffffff 45%, #f3faf0 100%);
  border: 1px solid rgba(127, 193, 66, 0.45);
  box-shadow: 0 24px 56px rgba(31, 43, 22, 0.18), 0 8px 20px rgba(127, 193, 66, 0.12);
  text-align: center;
}

.payment-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #7fc142 0%, #4a8a1f 100%);
  color: #fff;
  font-size: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(127, 193, 66, 0.45);
  position: relative;
  overflow: visible;
}

.payment-success-icon .status-glyph,
.payment-success-icon > svg {
  display: block;
  width: 28px;
  height: 28px;
  color: #fff;
  stroke: currentColor;
  flex-shrink: 0;
}

.payment-success-check {
  display: block;
  width: 16px;
  height: 28px;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(45deg) translate(-2px, -4px);
  box-sizing: border-box;
}

.payment-success-icon--success {
  background: linear-gradient(145deg, #7fc142 0%, #4a8a1f 100%);
  box-shadow: 0 8px 24px rgba(127, 193, 66, 0.45);
}

.payment-success-icon--success::after {
  content: none;
}

.payment-success-icon--pending {
  background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.38);
}

.payment-success-icon--cancelled {
  background: linear-gradient(145deg, #f87171 0%, #b91c1c 100%);
  box-shadow: 0 8px 24px rgba(185, 28, 28, 0.38);
}

.payment-success-icon--cancelled::before,
.payment-success-icon--cancelled::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 4px;
  background: #fff;
  border-radius: 2px;
}

.payment-success-icon--cancelled::before {
  transform: rotate(45deg);
}

.payment-success-icon--cancelled::after {
  transform: rotate(-45deg);
}

.payment-success-title {
  margin: 0 0 10px;
  font-size: 1.45rem;
  font-weight: 700;
  color: #1f2b16;
  letter-spacing: 0.01em;
}

.payment-success-lead {
  margin: 0 0 22px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4b5563;
}

.payment-success-btn {
  width: 100%;
  max-width: 280px;
}

.booking-status--pending-payment {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.booking-dl__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.booking-status-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  font-weight: 800;
  line-height: 1;
}

.booking-dl__status--success {
  color: #047857;
}

.booking-dl__status--pending {
  color: #c2410c;
}

.booking-dl__status--cancelled {
  color: #b91c1c;
}

.book-flow-confirm-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #7fc142 0%, #4a8a1f 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(127, 193, 66, 0.35);
}

.book-flow-confirm-icon .status-glyph {
  width: 28px;
  height: 28px;
}

.book-flow__panel[data-step="4"] {
  text-align: center;
}

.book-flow__panel[data-step="4"] .book-flow-actions {
  justify-content: center;
}

.book-flow-receipt[hidden] {
  display: none;
}

.book-flow-receipt {
  text-align: left;
  margin: 14px auto 0;
  max-width: 440px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(127, 193, 66, 0.32);
  box-shadow: 0 6px 16px rgba(31, 43, 22, 0.06);
}

.book-flow-receipt__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f6fff4 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(127, 193, 66, 0.22);
}

.book-flow-receipt__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1f2b16;
}

.book-flow-receipt__id {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5f9e2e;
  white-space: nowrap;
}

.book-flow-receipt__list,
.subpage .book-flow-receipt .booking-dl,
.subpage .book-flow-receipt .booking-dl--compact {
  display: grid;
  grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 4px 14px 8px;
  font-size: 0.8rem;
}

.subpage .book-flow-receipt .booking-dl dt,
.subpage .book-flow-receipt .booking-dl dd,
.book-flow-receipt__list dt,
.book-flow-receipt__list dd {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid #eef2ea;
  line-height: 1.35;
}

.subpage .book-flow-receipt .booking-dl dt,
.book-flow-receipt__list dt {
  color: #6b7280;
  font-weight: 500;
}

.subpage .book-flow-receipt .booking-dl dd,
.book-flow-receipt__list dd {
  color: #1f2b16;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.subpage .book-flow-receipt .booking-dl dt:nth-last-child(2),
.subpage .book-flow-receipt .booking-dl dd:last-child,
.book-flow-receipt__list dt:nth-last-child(2),
.book-flow-receipt__list dd:last-child {
  border-bottom: none;
}

.book-flow-receipt__list dt.book-flow-receipt__row--total,
.book-flow-receipt__list dd.book-flow-receipt__row--total {
  padding-top: 9px;
  border-top: 1px dashed #d7e4c8;
  font-weight: 700;
  color: #1f2b16;
}

.book-flow-receipt__list dd.book-flow-receipt__row--total {
  color: #335e16;
  font-size: 0.88rem;
}

.book-flow-receipt__list dd.book-flow-receipt__row--status {
  color: #c2410c;
}

.book-flow-receipt--modal {
  margin: 0 0 14px;
  max-width: none;
}

.payment-success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.guest-receipt-overlay {
  z-index: 12050;
}

.guest-receipt-modal {
  width: min(760px, 100%);
  max-height: min(94vh, 920px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  background: #f3efed;
  border: 1px solid rgba(184, 92, 104, 0.18);
}

.guest-receipt-modal__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 2px 4px;
}

.guest-receipt-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #3a2c2e;
}

.guest-receipt-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.guest-receipt-body {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 2px 8px;
}

.guest-receipt-sheet {
  background: #fff;
  border: 1px solid #e2d6d7;
  border-radius: 4px;
  padding: 28px 28px 22px;
  box-shadow: 0 14px 36px rgba(36, 25, 26, 0.1);
}

.guest-receipt-sheet__letterhead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 3px solid #b85c68;
}

.guest-receipt-sheet__logo-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guest-receipt-sheet__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.guest-receipt-sheet__brand-name {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #24191a;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.guest-receipt-sheet__doc-type {
  margin: 6px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b85c68;
}

.guest-receipt-sheet__brand-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #6b5f60;
}

.guest-receipt-sheet__docmeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 20px;
  padding: 14px 16px;
  background: #faf7f6;
  border: 1px solid #eadfe0;
}

.guest-receipt-sheet__docmeta-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a6c6d;
}

.guest-receipt-sheet__docmeta-value {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: #24191a;
  word-break: break-word;
  line-height: 1.35;
}

.guest-receipt-sheet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.guest-receipt-section {
  border: 1px solid #eadfe0;
  padding: 14px 16px 10px;
  background: #fff;
}

.guest-receipt-section--full {
  margin-bottom: 14px;
}

.guest-receipt-section__title {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b85c68;
}

.guest-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f1eaeb;
}

.guest-receipt-row:last-child {
  border-bottom: none;
}

.guest-receipt-row__label {
  color: #6b5f60;
  font-size: 0.84rem;
  flex: 0 1 42%;
}

.guest-receipt-row__value {
  color: #24191a;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  flex: 1 1 auto;
}

.guest-receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(90deg, #fff7f8 0%, #f8eef0 100%);
  border: 1px solid #e4c8cc;
}

.guest-receipt-total__note {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a6c6d;
}

.guest-receipt-total__amount {
  font-size: 1.55rem;
  font-weight: 700;
  color: #8f3d4a;
  letter-spacing: 0.01em;
}

.guest-receipt-sheet__footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #eadfe0;
}

.guest-receipt-sheet__thanks {
  margin: 0 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  color: #24191a;
}

.guest-receipt-sheet__note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #6b5f60;
}

@media (max-width: 700px) {
  .guest-receipt-modal {
    width: min(100%, 100%);
    padding: 10px;
  }

  .guest-receipt-modal__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .guest-receipt-modal__actions {
    justify-content: stretch;
  }

  .guest-receipt-modal__actions .btn {
    flex: 1 1 auto;
  }

  .guest-receipt-sheet {
    padding: 18px 14px 16px;
  }

  .guest-receipt-sheet__letterhead {
    align-items: flex-start;
  }

  .guest-receipt-sheet__docmeta,
  .guest-receipt-sheet__grid {
    grid-template-columns: 1fr;
  }

  .guest-receipt-total {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .subpage .book-flow-receipt .booking-dl,
  .subpage .book-flow-receipt .booking-dl--compact {
    grid-template-columns: minmax(104px, 40%) minmax(0, 1fr);
  }

  .subpage .book-flow-receipt .booking-dl dt {
    margin-top: 0;
  }
}

/* Booking payment step */
.payment-summary {
  margin: 0 0 18px;
}

.payment-summary__card {
  padding: 16px 18px;
  border-radius: 14px;
  background: #f8faf6;
  border: 1px solid rgba(127, 193, 66, 0.25);
}

.payment-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.92rem;
  color: #374151;
}

.payment-summary__row--total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed #d1d5db;
  font-weight: 700;
  color: #1f2b16;
}

.payment-summary__label {
  color: #6b7280;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.payment-methods-empty {
  padding: 16px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  text-align: center;
}

.payment-method-card {
  display: block;
  position: relative;
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.payment-method-card:has(.payment-method-card__radio:checked) {
  border-color: #7fc142;
  box-shadow: 0 8px 24px rgba(127, 193, 66, 0.15);
}

.payment-method-card__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-card__body {
  padding: 16px;
}

.payment-method-card__head {
  margin-bottom: 12px;
}

.payment-method-card__provider {
  font-size: 1.05rem;
  color: #1f2b16;
}

.payment-method-card__qr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #f9fafb;
}

.payment-method-card__qr-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  border-radius: 8px;
  line-height: 0;
}

.payment-method-card__qr-btn:focus-visible {
  outline: 2px solid rgba(127, 193, 66, 0.7);
  outline-offset: 3px;
}

.payment-method-card__qr img {
  width: 160px;
  height: 160px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 8px;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.payment-method-card__qr-btn:hover img {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.payment-method-card__qr-hint {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
}

.payment-qr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.payment-qr-lightbox[hidden] {
  display: none;
}

.payment-qr-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 14, 0.9);
}

.payment-qr-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.payment-qr-lightbox__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.payment-qr-lightbox__close:hover,
.payment-qr-lightbox__close:focus-visible {
  background: #e5e7eb;
}

.payment-qr-lightbox__title {
  margin: 0 36px 0 0;
  align-self: flex-start;
  font-size: 1.15rem;
  color: #1f2b16;
}

.payment-qr-lightbox__stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 14px;
  background: #f9fafb;
}

.payment-qr-lightbox__img {
  width: min(360px, 78vw);
  height: min(360px, 78vw);
  max-width: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}

.payment-qr-lightbox__hint {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: #4b5563;
}

body.payment-qr-lightbox-open {
  overflow: hidden;
}

.payment-method-card__meta {
  margin: 0 0 10px;
  font-size: 0.88rem;
}

.payment-method-card__meta dt {
  color: #6b7280;
  margin-top: 6px;
}

.payment-method-card__meta dt:first-child {
  margin-top: 0;
}

.payment-method-card__meta dd {
  margin: 2px 0 0;
  color: #1f2937;
  font-weight: 600;
}

.payment-method-card__instructions {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4b5563;
}

.payment-proof-section {
  margin-bottom: 16px;
}

.payment-proof-preview {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
}

.payment-proof-preview__name {
  display: block;
  margin-bottom: 8px;
  font-size: 0.88rem;
  color: #4b5563;
}

.payment-proof-preview__thumb {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.payment-type-choice {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.payment-type-choice__legend {
  font-weight: 700;
  color: #1f2b16;
  margin-bottom: 10px;
}

.payment-type-choice__option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
}

.payment-type-choice__option input[type="radio"] {
  width: auto;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex: 0 0 16px;
  accent-color: #7fc142;
}

.payment-type-choice__option:has(input:checked) {
  border-color: rgba(127, 193, 66, 0.65);
  background: #f7fdf2;
}

.payment-type-choice__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.45;
}

.payment-type-choice__body strong {
  font-size: 0.95rem;
  color: #1f2b16;
}

.payment-rules-overlay {
  background: rgba(47, 27, 36, 0.48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.payment-rules-modal {
  position: relative;
  width: min(440px, 100%);
  padding: 28px 24px 22px;
  border-radius: 24px;
  border: 1px solid rgba(196, 107, 130, 0.2);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 228, 236, 0.95) 0%, transparent 55%),
    linear-gradient(180deg, #fffafb 0%, #ffffff 42%, #fdf5f7 100%);
  box-shadow:
    0 28px 56px rgba(47, 27, 36, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  text-align: center;
  overflow: hidden;
}

.payment-rules-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #c46b82 20%, #e8a0b2 50%, #c46b82 80%, transparent);
}

.payment-rules-modal__header {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(196, 107, 130, 0.12);
}

.payment-rules-modal__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c46b82;
}

.payment-rules-modal__title {
  margin: 0 0 8px;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #2f1b24;
}

.payment-rules-modal__lead {
  margin: 0 auto;
  max-width: 36ch;
  color: #6b6170;
  font-size: 0.88rem;
  line-height: 1.55;
}

.payment-rules-modal__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: left;
  counter-reset: pay-rule;
}

.payment-rules-modal__item,
.payment-rules-modal__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 248, 250, 0.92) 100%);
  border: 1px solid rgba(196, 107, 130, 0.16);
  box-shadow:
    0 8px 18px rgba(47, 27, 36, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  color: #5f6673;
  font-size: 0.82rem;
  line-height: 1.45;
  counter-increment: pay-rule;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.payment-rules-modal__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8a0b2, #c46b82);
  opacity: 0.85;
}

.payment-rules-modal__item:hover {
  transform: translateY(-1px);
  border-color: rgba(196, 107, 130, 0.28);
  box-shadow:
    0 12px 24px rgba(196, 107, 130, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.payment-rules-modal__badge {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(160deg, #f8e1e7 0%, #f0c8d3 100%);
  color: #c46b82;
  box-shadow:
    0 6px 14px rgba(196, 107, 130, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.payment-rules-modal__badge svg {
  width: 18px;
  height: 18px;
}

.payment-rules-modal__badge::after {
  content: counter(pay-rule);
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c46b82;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(196, 107, 130, 0.35);
}

.payment-rules-modal__item--arrive .payment-rules-modal__badge {
  background: linear-gradient(160deg, #fde8d8 0%, #f5c9a8 100%);
  color: #c47a4a;
}

.payment-rules-modal__item--arrive::after {
  background: linear-gradient(180deg, #f0b27a, #c47a4a);
}

.payment-rules-modal__item--arrive .payment-rules-modal__badge::after {
  background: #c47a4a;
}

.payment-rules-modal__rule {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 1px;
}

.payment-rules-modal__list strong {
  color: #2f1b24;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.payment-rules-modal__rule > span {
  color: #6b6170;
  font-size: 0.8rem;
  line-height: 1.5;
}

.payment-rules-modal__agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #2f1b24;
  font-weight: 600;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

.payment-rules-modal__agree input[type="checkbox"],
.subpage .payment-rules-modal__agree input[type="checkbox"],
body.subpage .payment-rules-modal__agree input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 1px solid #c46b82 !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
  flex: 0 0 18px !important;
  accent-color: #c46b82;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: checkbox;
}

.payment-rules-modal__agree span {
  flex: 1 1 auto;
  min-width: 0;
}

.payment-rules-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.payment-rules-modal__actions .btn {
  min-width: 118px;
  min-height: 42px;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.payment-rules-modal__actions #downPaymentRulesAgreeBtn {
  background: linear-gradient(180deg, #d07a90 0%, #c46b82 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.28);
}

.payment-rules-modal__actions #downPaymentRulesAgreeBtn:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(196, 107, 130, 0.34);
}

.payment-rules-modal__actions #downPaymentRulesAgreeBtn:disabled,
.payment-rules-modal__actions #downPaymentRulesAgreeBtn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.1);
  box-shadow: none;
  transform: none;
}

.payment-rules-modal__actions #downPaymentRulesCancelBtn,
.payment-rules-modal__actions #downPaymentRulesCancelBtn.btn--outline {
  background: #ffffff;
  color: #c46b82;
  border: 1.5px solid rgba(196, 107, 130, 0.45);
  box-shadow: none;
}

.payment-rules-modal__actions #downPaymentRulesCancelBtn:hover {
  background: #fff5f7;
  border-color: #c46b82;
}

.booking-terms-overlay {
  background: rgba(47, 27, 36, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 3100;
}

.booking-terms-modal {
  width: min(440px, 100%);
  max-height: min(90vh, 640px);
  padding: 22px 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: #ffffff;
  box-shadow: 0 22px 48px rgba(47, 27, 36, 0.2);
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.booking-terms-modal__eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c46b82;
  text-align: center;
}

.booking-terms-modal__title {
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2f1b24;
  text-align: center;
}

.booking-terms-modal__lead {
  margin: 0 0 14px;
  color: #6b6170;
  font-size: 0.84rem;
  line-height: 1.45;
  text-align: center;
}

.booking-terms-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}

.booking-terms-modal__rules {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 107, 130, 0.14);
  background: #fafafa;
}

.booking-terms-modal__heading--plain {
  color: #2f1b24;
  margin-bottom: 8px;
}

.booking-terms-modal__rules-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #5f6673;
}

.booking-terms-modal__rules-list li + li {
  margin-top: 4px;
}

.booking-terms-modal__policy {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #f0d2b0;
  background: #fff8f0;
}

.booking-terms-modal__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #8a3d52;
}

.booking-terms-modal__warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(196, 107, 130, 0.12);
  color: #c46b82;
  flex: 0 0 auto;
}

.booking-terms-modal__caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}

.booking-terms-modal__caps > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(196, 107, 130, 0.12);
}

.booking-terms-modal__caps dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b6170;
}

.booking-terms-modal__caps dd {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2f1b24;
  white-space: nowrap;
}

.booking-terms-modal__note {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5c4328;
}

.booking-terms-modal__important {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(196, 107, 130, 0.08);
  border: 1px solid rgba(196, 107, 130, 0.18);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #7a3450;
  font-weight: 600;
}

.booking-terms-modal__agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: #fafafa;
  cursor: pointer;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #2f1b24;
  font-weight: 600;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.booking-terms-modal__agree input[type="checkbox"],
.subpage .booking-terms-modal__agree input[type="checkbox"],
body.subpage .booking-terms-modal__agree input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 1px solid #c46b82 !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
  flex: 0 0 18px !important;
  accent-color: #c46b82;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: checkbox;
}

.booking-terms-modal__agree span {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #2f1b24;
  -webkit-text-fill-color: #2f1b24;
}

.booking-terms-modal__actions {
  display: flex;
  justify-content: stretch;
  gap: 8px;
}

.booking-terms-modal__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
}

.booking-terms-modal__actions #bookingTermsAgreeBtn {
  background: #c46b82;
  color: #ffffff;
  border: none;
}

.booking-terms-modal__actions #bookingTermsAgreeBtn:disabled,
.booking-terms-modal__actions #bookingTermsAgreeBtn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.1);
}

.booking-terms-modal__actions #bookingTermsCancelBtn,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn.btn,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn.btn--outline,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn.btn.btn--outline,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn:link,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn:visited,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn:hover,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn:active,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn:focus,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn:focus-visible {
  background: #ffffff !important;
  color: #c46b82 !important;
  border: 1.5px solid #c46b82 !important;
  -webkit-text-fill-color: #c46b82 !important;
  caret-color: #c46b82 !important;
}

.booking-terms-modal__actions #bookingTermsCancelBtn:hover,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn:hover,
.subpage .booking-terms-modal__actions #bookingTermsCancelBtn.btn--outline:hover {
  background: #fff5f7 !important;
  color: #a84e66 !important;
  border-color: #a84e66 !important;
  -webkit-text-fill-color: #a84e66 !important;
}

@media (max-width: 420px) {
  .booking-terms-modal__caps {
    grid-template-columns: 1fr;
  }

  .booking-terms-modal__actions {
    flex-direction: column;
  }
}

.admin-arrival-card {
  border-left: 4px solid #f59e0b;
}

.admin-arrival-timer {
  font-size: 1.35rem;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.04em;
}

.admin-arrival-timer--expired {
  color: #991b1b;
}

.admin-arrival-timer--stopped {
  color: #166534;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.admin-pay-table tr.admin-arrival-row {
  position: relative;
}

.admin-pay-table tr.admin-arrival-row--processing > td {
  opacity: 0.45;
  pointer-events: none;
}

.admin-arrival-row-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.82);
  pointer-events: none;
}

.admin-arrival-row-loading__spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid #d6e6c6;
  border-top-color: #c46b82;
  border-radius: 50%;
  animation: btn-spin 0.75s linear infinite;
}

.admin-arrival-row-loading__text {
  font-size: 0.88rem;
  font-weight: 600;
  color: #5f6673;
}

@media (prefers-reduced-motion: reduce) {
  .admin-arrival-row-loading__spinner {
    animation: none;
    border-top-color: #c46b82;
  }
}

/* Upcoming Bookings (Admin Dashboard) */
.admin-upcoming-card {
  padding: 18px 20px 20px;
}

.admin-upcoming-card__title {
  margin: 0 0 14px;
  font-size: 1.15rem;
  text-align: center;
}

.admin-upcoming-empty {
  margin: 12px 0 0;
  color: #64748b;
  font-size: 0.95rem;
  text-align: center;
}

.admin-future-booking-pill {
  background: #e0f2fe;
  color: #075985;
  margin-top: 4px;
}

.admin-checkin-today-pill {
  background: #dcfce7;
  color: #166534;
  margin-top: 4px;
}

.admin-status-triplet__line {
  display: block;
  margin-top: 2px;
}

.admin-arrival-status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
}

.btn--disabled,
button.btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-pay-verify-count {
  background: linear-gradient(135deg, #eef8e4 0%, #d8efc0 100%);
  color: #3f6d1c;
  border: 1px solid rgba(127, 193, 66, 0.5);
}

.admin-arrival-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.admin-arrival-actions .btn,
.admin-pay-table .admin-arrival-actions .btn {
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
  cursor: pointer;
  min-height: 40px;
  min-width: 96px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
}

.admin-arrival-arrive-btn {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

.admin-arrival-arrive-btn:hover,
.admin-arrival-arrive-btn:focus-visible {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #fff !important;
}

.admin-arrival-noshow-btn {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  background: #fff !important;
}

.admin-arrival-noshow-btn:hover,
.admin-arrival-noshow-btn:focus-visible {
  background: #fef2f2 !important;
}

.admin-pay-table .admin-arrival-actions {
  margin-top: 0;
  gap: 10px;
}

.admin-pay-table .admin-arrival-actions .btn--small {
  padding: 10px 16px;
  font-size: 0.9rem;
}

.admin-pay-table tr.admin-arrival-row td:last-child {
  position: relative;
  z-index: 2;
  overflow: visible;
  pointer-events: auto;
}

.admin-pay-table tr.admin-arrival-row--processing > td {
  opacity: 0.72;
  pointer-events: none;
}

.admin-arrival-row-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Admin payment management */
.admin-payments-split {
  align-items: flex-start;
}

.admin-payments-kpi-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 18px;
  gap: 14px;
}

.subpage .split-2.admin-payments-kpi-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-payment-feature-card {
  scroll-margin-top: 88px;
}

.admin-payment-methods-list,
.admin-payment-verification-list {
  display: grid;
  gap: 14px;
}

.admin-payment-verification-list:has(> .admin-pay-table) {
  display: block;
  overflow-x: auto;
  gap: 0;
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  background: #fff;
  box-shadow: var(--dt-shadow);
  -webkit-overflow-scrolling: touch;
}

.admin-payment-approval-board {
  padding: 16px 18px 12px;
}

.admin-pay-table-section {
  scroll-margin-top: 88px;
  padding: 12px 0 14px;
  border-bottom: 1px solid #e5eadc;
}

.admin-pay-table-section:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.admin-pay-table-title {
  margin: 0;
  font-size: 1rem;
  color: #1f2b16;
}

.admin-pay-table-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-pay-table-lead {
  margin: 4px 0 10px;
  color: #5f6673;
  line-height: 1.45;
  font-size: 0.84rem;
}

.admin-payment-approval-board .admin-payment-verification-list {
  display: block;
  overflow-x: auto;
  gap: 0;
}

.admin-payment-approval-board .admin-payment-verification-list:has(> .admin-pay-table) {
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  background: #fff;
  box-shadow: var(--dt-shadow);
}

.admin-payment-approval-board .admin-pagination {
  margin-top: 8px;
  padding-top: 8px;
}

.admin-pay-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--dt-font);
  line-height: 1.35;
  color: #1f2b16;
}

.admin-pay-table th,
.admin-pay-table td {
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--dt-row-line);
  white-space: nowrap;
}

.admin-pay-table .admin-pay-cell-wrap {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 14rem;
}

/* Upcoming bookings: readable on phones without clipping */
#adminUpcomingBookingsList.admin-payment-verification-list,
#adminUpcomingBookingsCard .admin-payment-verification-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#adminUpcomingBookingsList .admin-pay-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

#adminUpcomingBookingsList .admin-pay-table th,
#adminUpcomingBookingsList .admin-pay-table td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

@media (max-width: 700px) {
  #adminUpcomingBookingsList .admin-pay-table col.upcoming-col-hide,
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(3),
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(4),
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(5),
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(6),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(3),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(4),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(5),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(6) {
    display: none;
  }

  #adminUpcomingBookingsList .admin-pay-table th:nth-child(1),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(1) {
    width: 40%;
  }

  #adminUpcomingBookingsList .admin-pay-table th:nth-child(2),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(2) {
    width: 34%;
  }

  #adminUpcomingBookingsList .admin-pay-table th:nth-child(7),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(7) {
    width: 26%;
    min-width: 4.75rem;
  }

  #adminUpcomingBookingsList .admin-pay-table th:nth-child(7) {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    padding: 8px 3px;
    text-align: center;
  }

  #adminUpcomingBookingsList .admin-pay-table .admin-upcoming-actions-cell .btn--small,
  #adminUpcomingBookingsList .admin-pay-table .btn--small {
    min-height: 32px;
    padding: 5px 7px;
    font-size: 0.7rem;
  }
}

.admin-pay-table th {
  font-size: var(--dt-th-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dt-head-color);
  background: var(--dt-head-bg);
  border-bottom: 1px solid #d6e6c6;
}

.admin-pay-table tbody tr {
  transition: background-color 0.15s ease;
}

.admin-pay-table tbody tr:nth-child(even) td {
  background: var(--dt-row-alt);
}

.admin-pay-table tbody tr:hover td {
  background: var(--dt-row-hover);
}

.admin-pay-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-pay-table tr.admin-arrival-row td:first-child {
  box-shadow: inset 3px 0 0 #f59e0b;
}

.admin-pay-table .admin-pay-cell-wrap {
  white-space: normal;
  min-width: 120px;
}

.admin-pay-cell-main {
  font-weight: 700;
  color: #1f2b16;
}

.admin-pay-cell-sub {
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

.admin-pay-table .booking-status {
  margin-bottom: 0;
  font-size: 10px;
  padding: 3px 8px;
  letter-spacing: 0.04em;
}

.admin-pay-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.admin-pay-table .admin-arrival-timer {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-pay-table .admin-arrival-status-pill {
  font-size: 0.72rem;
  padding: 2px 8px;
}

.admin-pay-table-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.admin-pay-table .admin-arrival-actions {
  margin-top: 0;
  gap: 10px;
}

.admin-pay-wait-note {
  margin: 0;
  max-width: 180px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #92400e;
  white-space: normal;
}

.admin-pay-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #d6e6c6;
  background: #fff;
  color: #1f2b16;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}

.admin-pay-icon-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.admin-pay-icon-btn:hover,
.admin-pay-icon-btn:focus-visible {
  outline: none;
  border-color: #7fc142;
  background: #f3f9eb;
}

.admin-pay-icon-btn--view {
  color: #3f4d32;
}

.admin-pay-icon-btn--approve {
  border-color: #bbf7d0;
  background: #ecfdf3;
  color: #15803d;
}

.admin-pay-icon-btn--approve:hover,
.admin-pay-icon-btn--approve:focus-visible {
  border-color: #16a34a;
  background: #dcfce7;
}

.admin-pay-icon-btn--reject {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.admin-pay-icon-btn--reject:hover,
.admin-pay-icon-btn--reject:focus-visible {
  border-color: #dc2626;
  background: #fee2e2;
}

.admin-pay-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-pay-icon-btn.is-loading {
  min-width: 40px;
  min-height: 40px;
}

.admin-pay-icon-btn.is-loading .btn-loading-label {
  display: none;
}

.admin-pay-icon-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #1f2b16;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.admin-pay-icon-btn:hover .admin-pay-icon-tip,
.admin-pay-icon-btn:focus-visible .admin-pay-icon-tip {
  opacity: 1;
}

@media (max-width: 900px) {
  .admin-pay-icon-tip {
    display: none;
  }
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.admin-pagination__info,
.admin-pagination__page {
  color: #5f6673;
  font-size: 0.9rem;
}

.admin-pagination__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-payment-method-item {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}

.admin-payment-method-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-payment-method-item__qr {
  display: block;
  width: 100px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.admin-payment-method-item__actions,
.admin-payment-verification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-payment-empty {
  padding: 14px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  color: #6b7280;
  text-align: center;
}

.admin-payment-verification-card {
  padding: 16px;
}

.admin-payment-proof-thumb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.admin-payment-proof-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}

.admin-payment-proof-image-host {
  margin: 12px 0;
  text-align: center;
}

.admin-payment-proof-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.admin-payment-proof-modal {
  max-width: 640px;
}

.admin-payment-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-payment-active-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: #374151;
}

/* Customer notification bell & panel */
.customer-notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.customer-notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.subpage .customer-notif-bell {
  border-color: #d1d5db;
  background: #f9fafb;
  color: #1f2b16;
}

.customer-notif-bell:hover,
.customer-notif-bell:focus-visible {
  background: rgba(127, 193, 66, 0.2);
  border-color: #7fc142;
  outline: none;
}

.subpage .customer-notif-bell:hover,
.subpage .customer-notif-bell:focus-visible {
  background: rgba(196, 107, 130, 0.28);
}

.customer-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

.customer-notif-panel {
  position: fixed;
  top: 72px;
  right: max(16px, env(safe-area-inset-right));
  z-index: 10002;
  width: min(400px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 48px rgba(31, 43, 22, 0.18);
  overflow: hidden;
}

.customer-notif-panel[hidden] {
  display: none;
}

.customer-notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f2;
  background: #f9fafb;
}

.customer-notif-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2b16;
}

.customer-notif-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-notif-panel__mark-all,
.customer-notif-panel__clear-all {
  border: none;
  background: none;
  color: #4a8a1f;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}

.customer-notif-panel__clear-all {
  color: #b45309;
}

.customer-notif-panel__mark-all:hover,
.customer-notif-panel__clear-all:hover {
  text-decoration: underline;
}

.customer-notif-panel__list {
  overflow-y: auto;
  padding: 8px;
}

.customer-notif-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  margin-bottom: 6px;
  padding: 12px 14px;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.customer-notif-item:hover {
  border-color: #c8e6a0;
  background: #f9fff4;
}

.customer-notif-item--unread {
  background: #fffbeb;
  border-color: #fde68a;
}

.customer-notif-item__type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
}

.customer-notif-item__title {
  font-size: 0.92rem;
  color: #1f2b16;
}

.customer-notif-item__msg {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #4b5563;
}

.customer-notif-item__time {
  font-size: 0.75rem;
  color: #9ca3af;
}

.customer-notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
}

.customer-notif-detail-overlay[hidden] {
  display: none;
}

.customer-notif-detail-modal {
  max-width: 480px;
  text-align: left;
}

.customer-notif-detail__type {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.customer-notif-detail__title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: #1f2b16;
}

.customer-notif-detail__time {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: #9ca3af;
}

.customer-notif-detail__message {
  margin: 0 0 18px;
  line-height: 1.6;
  color: #374151;
  white-space: pre-wrap;
}

.customer-notif-detail__actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* Admin notification management */
.admin-notifications-split {
  align-items: flex-start;
}

.admin-notif-auto-list {
  margin: 0;
  padding-left: 1.1rem;
  color: #4b5563;
  line-height: 1.65;
  font-size: 0.92rem;
}

.admin-notif-campaigns-list {
  display: grid;
  gap: 12px;
}

.admin-notif-campaign-item {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}

.admin-notif-campaign-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.admin-notif-campaign-item__msg {
  margin: 8px 0 0;
  color: #4b5563;
  line-height: 1.55;
  font-size: 0.9rem;
}

.content-mgmt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.content-mgmt-tab {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.content-mgmt-tab:hover {
  border-color: #c46b82;
  color: #c46b82;
}

.content-mgmt-tab--active {
  background: #c46b82;
  border-color: #c46b82;
  color: var(--text-on-dark);
}

.admin-payments-strip {
  margin: 0 0 14px;
  padding: 20px 16px;
  min-height: 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(180deg, #fdf6f8 0%, #ffffff 58%, #fbf0f3 100%);
  border: 1px solid rgba(196, 107, 130, 0.28);
  box-shadow: 0 10px 28px rgba(196, 107, 130, 0.08);
}

.admin-payments-strip__head {
  max-width: none;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.admin-app #section-payments .admin-payments-strip__title,
.admin-payments-strip__title {
  margin: 0;
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  color: #c46b82 !important;
  -webkit-text-fill-color: #c46b82 !important;
  text-shadow: none;
}

.admin-payments-card {
  margin-top: 0;
  padding-top: 18px;
}

.admin-payments-tabs {
  margin: 0 0 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-payments-tabs .content-mgmt-tab {
  font-weight: 700;
  min-width: 160px;
  justify-content: center;
}

.admin-payments-panels {
  margin-top: 0;
}

.admin-app #section-payments .admin-payment-kpi-card {
  margin: 0;
  padding: 18px 16px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(196, 107, 130, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #fff8fa 100%);
  box-shadow: 0 8px 20px rgba(196, 107, 130, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.admin-app #section-payments .admin-payment-kpi-card:hover,
.admin-app #section-payments .admin-payment-kpi-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(196, 107, 130, 0.32);
  box-shadow: 0 12px 26px rgba(196, 107, 130, 0.12);
  outline: none;
}

.admin-app #section-payments .admin-payment-kpi-card h4 {
  margin: 0 0 6px;
  font-size: clamp(1.75rem, 2.4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #c46b82 !important;
  -webkit-text-fill-color: #c46b82 !important;
}

.admin-app #section-payments .admin-payment-kpi-card p {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #3d3338;
  line-height: 1.35;
}

.admin-payments-panel[hidden] {
  display: none !important;
}

.admin-payments-period {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #fff8fa 100%);
}

.admin-payments-period__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-payments-period__mode {
  min-width: 76px;
}

.admin-app .admin-payments-period__mode.admin-payments-period__mode--active,
.admin-app .admin-payments-period__mode.admin-payments-period__mode--active:hover,
.subpage .admin-payments-period__mode.admin-payments-period__mode--active,
.subpage .admin-payments-period__mode.admin-payments-period__mode--active:hover {
  background: #c46b82 !important;
  border-color: #c46b82 !important;
  color: #fff !important;
}

.admin-payments-period__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  flex: 1 1 280px;
}

.admin-payments-period__fields[hidden],
.admin-payments-period__field[hidden] {
  display: none !important;
}

.admin-payments-period__field {
  display: flex;
  flex-direction: column;
  min-width: 148px;
  margin: 0;
  flex: 1 1 148px;
}

.admin-payments-period__field span {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6b4a54;
}

.admin-payments-period__field select {
  width: 100%;
  margin: 0;
}

.admin-payments-period__summary {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #5c4a50;
}

.admin-payments-period__summary[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .admin-payments-period {
    align-items: stretch;
  }

  .admin-payments-period__modes,
  .admin-payments-period__fields,
  .admin-payments-period__field {
    width: 100%;
  }

  .admin-payments-period__mode {
    flex: 1 1 calc(50% - 8px);
  }
}

.content-mgmt-panels {
  margin-top: 10px;
}

#section-content .content-mgmt-card {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 10px 12px 12px;
}

#section-content .content-mgmt-panel > .content-mgmt-card:first-child {
  margin-top: 0;
}

#section-content .content-mgmt-card::before,
#section-content .content-mgmt-card::after {
  content: none !important;
  display: none !important;
}

#section-content .content-mgmt-card:hover {
  transform: none;
}

#section-content .content-mgmt-card__title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--brand-ink);
}

#section-content .content-mgmt-card__lead {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #5f6673;
}

.content-mgmt-form + .content-mgmt-card__title,
.content-mgmt-actions + .content-mgmt-card__title {
  margin-top: 12px;
}

#section-content .manager-msg-table tbody th {
  text-align: left;
  font-size: var(--dt-th-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dt-head-color-pink);
  background: var(--dt-head-bg-pink);
  border: none;
  border-bottom: 1px solid rgba(196, 107, 130, 0.16);
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
  white-space: nowrap;
  width: auto;
}

#section-content .manager-msg-table input:not([type="checkbox"]):not([type="hidden"]),
#section-content .manager-msg-table select,
#section-content .manager-msg-table textarea {
  width: 100%;
  height: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0 8px;
  font-size: 0.78rem;
  line-height: 1.2;
  border: 1px solid #f0c9d4;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  font-family: inherit;
  color: #3d3340;
}

#section-content .manager-msg-table select {
  padding: 0 6px;
}

#section-content .manager-msg-table input[type="file"] {
  height: auto;
  min-height: 30px;
  padding: 3px 4px;
  font-size: 0.72rem;
}

#section-content .manager-msg-table input:not([type="checkbox"]):focus,
#section-content .manager-msg-table select:focus,
#section-content .manager-msg-table textarea:focus {
  border-color: #c46b82;
  box-shadow: 0 0 0 2px rgba(196, 107, 130, 0.16);
  outline: none;
}

#section-content .content-mgmt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

#section-content .content-mgmt-actions .btn {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  min-height: 2.375rem;
}

#section-content .content-mgmt-actions .auth-msg {
  margin: 0;
}

#section-content .content-mgmt-check .admin-toolbar__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b4a56;
  white-space: nowrap;
}

#section-content .content-mgmt-check input[type="checkbox"] {
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
}

#section-content .manager-msg-table tr[hidden],
#section-content .manager-msg-table tbody[hidden] {
  display: none !important;
}

#section-content .manager-msg-table .manager-msg-body {
  max-width: 280px;
}

.content-mgmt-item__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.cm-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #f0c9d4;
  background: #fff;
  color: #c46b82;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}

.cm-icon-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.cm-icon-btn--edit:hover,
.cm-icon-btn--edit:focus-visible {
  outline: none;
  background: #fff5f8;
  border-color: #c46b82;
}

.cm-icon-btn--delete {
  border-color: #e8b4c2;
  background: #fce8ee;
  color: #a84a62;
}

.cm-icon-btn--delete:hover,
.cm-icon-btn--delete:focus-visible {
  outline: none;
  border-color: #c46b82;
  background: #f5d0da;
  color: #8a3d52;
}

.cm-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cm-icon-btn.is-loading {
  min-width: 30px;
}

.cm-icon-btn.is-loading .btn-loading-label,
.cm-icon-btn.is-loading .cm-icon-tip {
  display: none;
}

.cm-icon-btn .btn-spinner {
  width: 12px;
  height: 12px;
  border-color: rgba(196, 107, 130, 0.25);
  border-top-color: #c46b82;
}

.cm-icon-btn--delete .btn-spinner {
  border-color: rgba(168, 74, 98, 0.25);
  border-top-color: #a84a62;
}

.cm-icon-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 6px;
  background: #3d3340;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.cm-icon-btn:hover .cm-icon-tip,
.cm-icon-btn:focus-visible .cm-icon-tip {
  opacity: 1;
}

@media (max-width: 900px) {
  .cm-icon-tip {
    display: none;
  }
}

@media (max-width: 640px) {
  .payment-methods-grid {
    grid-template-columns: 1fr;
  }

  .admin-payments-kpi-row {
    grid-template-columns: 1fr;
  }

  .subpage .split-2.admin-payments-kpi-row {
    grid-template-columns: 1fr;
  }

  .admin-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-payment-proof-thumb-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .customer-notif-panel {
    top: auto;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .book-nav-user {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.reservation-status-host {
  min-height: 120px;
}

.reservation-board--single {
  max-width: 520px;
  margin: 0 auto;
}

.reservation-empty {
  padding: 20px 18px;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  color: #6b7280;
  text-align: center;
  font-size: 0.95rem;
}

.reservation-carousel {
  margin-top: 4px;
}

/* Full-page loading (book.html) */
.book-facility-loading[hidden] {
  display: none !important;
}

.book-facility-loading {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.38);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.book-facility-loading__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  max-width: min(90vw, 340px);
  padding: 22px 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.book-facility-loading__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  border-top-color: #c46b82;
  animation: book-facility-spin 0.75s linear infinite;
}

.book-facility-loading__text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}

.book-flow-calendar.is-loading-facilities {
  pointer-events: none;
  opacity: 0.72;
}

@keyframes book-facility-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-facility-loading__spinner {
    animation: none;
    border-top-color: #c46b82;
  }
}

.book-loading-overlay[hidden] {
  display: none;
}

.book-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f0fdf4 0%, #ecfdf5 40%, #e8f5e9 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.book-loading-overlay--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.book-loading-overlay:not(.book-loading-overlay--active) {
  pointer-events: none !important;
}

.book-loading-inner {
  text-align: center;
  padding: 24px;
}

.book-loading-spinner {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
}

.book-loading-leaf {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border-radius: 0 70% 0 70%;
  background: linear-gradient(145deg, #7fc142 0%, #4a8a1f 100%);
  opacity: 0.85;
  animation: book-loading-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 4px 14px rgba(74, 138, 31, 0.35);
}

.book-loading-leaf--a {
  animation-delay: 0s;
}

.book-loading-leaf--b {
  width: 22px;
  height: 22px;
  left: 18px;
  top: -8px;
  animation-delay: 0.15s;
  opacity: 0.65;
  transform: rotate(32deg);
}

.book-loading-leaf--c {
  width: 20px;
  height: 20px;
  left: -14px;
  top: 12px;
  animation-delay: 0.3s;
  opacity: 0.55;
  transform: rotate(-28deg);
}

@keyframes book-loading-pulse {
  0%,
  100% {
    transform: scale(0.92) rotate(0deg);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.08) rotate(8deg);
    opacity: 1;
  }
}

.book-loading-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #335e16;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .book-loading-leaf {
    animation: none;
    opacity: 0.85;
  }
}

/* Staff portal boot loading (admin / manager / reception) */
.staff-boot-loading {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 12% 18%, rgba(196, 107, 130, 0.28), transparent 58%),
    radial-gradient(ellipse 70% 50% at 88% 82%, rgba(127, 193, 66, 0.2), transparent 55%),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.72), transparent 62%),
    linear-gradient(155deg, #f7eef1 0%, #f4f8ee 46%, #efe6ea 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.staff-boot-loading::before,
.staff-boot-loading::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.staff-boot-loading::before {
  width: min(42vw, 280px);
  height: min(42vw, 280px);
  top: -8%;
  right: -6%;
  background: radial-gradient(circle, rgba(196, 107, 130, 0.35) 0%, rgba(196, 107, 130, 0) 70%);
  animation: staff-boot-drift 7.5s ease-in-out infinite;
}

.staff-boot-loading::after {
  width: min(48vw, 320px);
  height: min(48vw, 320px);
  bottom: -12%;
  left: -10%;
  background: radial-gradient(circle, rgba(127, 193, 66, 0.28) 0%, rgba(127, 193, 66, 0) 70%);
  animation: staff-boot-drift 9s ease-in-out infinite reverse;
}

/* Stay visible even while role-gated body is visibility:hidden */
body.elenest-role-gated > .staff-boot-loading {
  visibility: hidden;
}

body.elenest-role-gated > .staff-boot-loading.staff-boot-loading--active,
.staff-boot-loading.staff-boot-loading--active {
  opacity: 1;
  visibility: visible !important;
  pointer-events: auto;
}

.staff-boot-loading__card {
  position: relative;
  z-index: 1;
  width: min(100%, 17.5rem);
  padding: 1.35rem 1.25rem 1.2rem;
  text-align: center;
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 248, 250, 0.94) 55%, rgba(247, 251, 242, 0.95) 100%);
  border: 1px solid rgba(196, 107, 130, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 32px rgba(61, 51, 64, 0.12),
    0 6px 14px rgba(196, 107, 130, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(10px) scale(0.97);
  opacity: 0.9;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.staff-boot-loading__card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, #c46b82 0%, #d992a5 45%, #7fc142 100%);
}

.staff-boot-loading--active .staff-boot-loading__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* No circular badge — logo only, or hide if unused */
.staff-boot-loading__brand {
  display: none;
}

.staff-boot-loading__logo {
  display: none;
}

.staff-boot-loading__spinner {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 0.35rem auto 0.9rem;
}

.staff-boot-loading__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(196, 107, 130, 0.14);
  border-top-color: #c46b82;
  border-right-color: rgba(196, 107, 130, 0.45);
  animation: staff-boot-spin 0.95s cubic-bezier(0.55, 0.15, 0.35, 0.85) infinite;
  box-shadow: 0 0 10px rgba(196, 107, 130, 0.16);
}

.staff-boot-loading__ring--soft {
  inset: 7px;
  border-width: 2px;
  border-color: rgba(127, 193, 66, 0.14);
  border-bottom-color: #7fc142;
  border-left-color: rgba(127, 193, 66, 0.4);
  animation-duration: 1.3s;
  animation-direction: reverse;
  box-shadow: none;
}

.staff-boot-loading__kicker {
  margin: 0 0 0.28rem;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c46b82;
}

.staff-boot-loading__title {
  margin: 0 0 0.3rem;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #3d3340;
  line-height: 1.2;
}

.staff-boot-loading__sub {
  margin: 0 0 0.95rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(61, 51, 64, 0.62);
  line-height: 1.4;
}

.staff-boot-loading__bar {
  position: relative;
  height: 3px;
  width: 100%;
  overflow: hidden;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(196, 107, 130, 0.12), rgba(127, 193, 66, 0.12));
}

.staff-boot-loading__bar > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c46b82 0%, #d992a5 50%, #7fc142 100%);
  box-shadow: 0 0 10px rgba(196, 107, 130, 0.35);
  animation: staff-boot-bar 1.4s ease-in-out infinite;
}

@keyframes staff-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes staff-boot-bar {
  0% {
    left: -42%;
  }
  100% {
    left: 108%;
  }
}

@keyframes staff-boot-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(12px, -10px) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-boot-loading__ring,
  .staff-boot-loading__bar > span,
  .staff-boot-loading__card,
  .staff-boot-loading::before,
  .staff-boot-loading::after {
    animation: none;
    transition: none;
  }

  .staff-boot-loading--active .staff-boot-loading__card {
    transform: none;
  }

  .staff-boot-loading__bar > span {
    left: 0;
    width: 55%;
  }
}

/* Appointments header button + popup (text-style fallback only) */
header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn),
header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):hover,
header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):focus,
header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):focus-visible,
.subpage header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn),
.subpage header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):hover,
.subpage header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):focus-visible {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  margin: 0;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.25;
}

header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):hover,
header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):focus-visible,
header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn).is-active,
.subpage header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):hover,
.subpage header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn):focus-visible,
.subpage header #bookNavUser button.book-nav-appointments:not(.book-nav-icon-btn).is-active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

.appointments-modal {
  width: min(640px, 100%);
  max-height: min(90vh, 840px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 16px;
}

.appointments-modal__head {
  text-align: center;
  margin-bottom: 8px;
}

.appointments-modal__head h3 {
  margin: 0 0 8px;
}

.appointments-modal__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5f6673;
}

.appointments-modal #appointmentsBoard {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 120px;
  max-height: min(62vh, 560px);
  padding: 6px 2px 10px;
}

.appointments-modal .admin-settings-modal__actions {
  margin-top: 8px;
  justify-content: center;
}

.appointments-board {
  min-height: 100px;
}

.appointments-strip {
  margin-top: 16px;
  padding: 16px 18px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f7fdf3 0%, #ffffff 55%, #f3faf0 100%);
  border: 1px solid rgba(127, 193, 66, 0.28);
  box-shadow: 0 12px 40px rgba(31, 43, 22, 0.07);
}

.appointments-strip__head {
  max-width: 640px;
  margin: 0 auto 8px;
  text-align: center;
}

.appointments-strip__title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2b16;
  letter-spacing: 0.02em;
}

.appointments-strip__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5f6673;
}

.book-flow-step4-cta {
  margin: 16px 0 8px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.book-flow-step4-cta .btn {
  min-width: 160px;
}

.payment-success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.payment-success-btn--secondary,
.subpage .payment-success-btn--secondary {
  background: #ffffff !important;
  color: #c46b82 !important;
  border: 1.5px solid #c46b82 !important;
  -webkit-text-fill-color: #c46b82 !important;
}

.subpage .booking-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.subpage .booking-card__top .booking-status {
  margin-bottom: 0;
}

.subpage .booking-card__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subpage .booking-card__name-row .booking-card__name {
  margin-bottom: 0;
}

.subpage .booking-card__delete {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(185, 28, 28, 0.35);
  background: #fff;
  color: #b91c1c;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.subpage .booking-card__delete:hover {
  background: #fef2f2;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.12);
}

.subpage .booking-card__delete:focus-visible {
  outline: 2px solid #7fc142;
  outline-offset: 2px;
}

.subpage .booking-card__receipt-actions {
  margin-top: 14px;
  display: flex;
  justify-content: stretch;
}

.subpage .booking-card__receipt-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(127, 193, 66, 0.45);
  background: linear-gradient(180deg, #f7fff2 0%, #eef8e6 100%);
  color: #335e16;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.subpage .booking-card__receipt-btn:hover {
  background: linear-gradient(180deg, #effae6 0%, #e3f3d6 100%);
  box-shadow: 0 4px 14px rgba(127, 193, 66, 0.22);
}

.subpage .booking-card__receipt-btn:focus-visible {
  outline: 2px solid #7fc142;
  outline-offset: 2px;
}

.welcome-modal-overlay[hidden] {
  display: none;
}

.welcome-modal-overlay:not([hidden]) {
  display: flex;
}

.welcome-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(56, 78, 92, 0.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.38s ease, visibility 0.38s ease;
}

.welcome-modal-overlay--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Parent pointer-events:none does not stop children from receiving clicks.
   When the overlay is not open (or closing), the invisible modal could still
   block the center of the page — links and buttons underneath won't work. */
.welcome-modal-overlay:not(.welcome-modal-overlay--open) .welcome-modal {
  pointer-events: none;
}

.welcome-modal-overlay--open .welcome-modal {
  pointer-events: auto;
}

.welcome-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(47, 27, 36, 0.18), 0 8px 20px rgba(196, 107, 130, 0.16);
  background: linear-gradient(180deg, #fff8fa 0%, #ffffff 58%, #fdf4f6 100%);
  border: 1px solid rgba(196, 107, 130, 0.22);
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
}

.welcome-modal-overlay--open .welcome-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.welcome-modal__glow {
  position: absolute;
  inset: auto -20% 55% -20%;
  height: 180px;
  background: radial-gradient(ellipse at 50% 0%, rgba(196, 107, 130, 0.2) 0%, rgba(196, 107, 130, 0) 70%);
  pointer-events: none;
}

.welcome-modal__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.welcome-modal__bloom {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.welcome-modal__bloom--a {
  width: 120px;
  height: 120px;
  top: -36px;
  left: -28px;
  background: radial-gradient(circle, rgba(196, 107, 130, 0.18) 0%, rgba(196, 107, 130, 0) 70%);
}

.welcome-modal__bloom--b {
  width: 90px;
  height: 90px;
  top: 18px;
  right: -22px;
  background: radial-gradient(circle, rgba(127, 193, 66, 0.16) 0%, rgba(127, 193, 66, 0) 70%);
}

.welcome-modal__bloom--c {
  width: 140px;
  height: 140px;
  bottom: -48px;
  right: 18%;
  background: radial-gradient(circle, rgba(196, 107, 130, 0.12) 0%, rgba(196, 107, 130, 0) 72%);
}

.welcome-modal__inner {
  position: relative;
  z-index: 1;
  padding: 28px 26px 24px;
  text-align: center;
}

.welcome-modal__mark {
  display: inline-flex;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(160deg, #f7dde3 0%, #c46b82 100%);
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.26);
  position: relative;
}

.welcome-modal__mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 11px;
  height: 16px;
  border-radius: 80% 20% 80% 20%;
  background: #ffffff;
  transform: translate(-50%, -50%) rotate(-18deg);
  box-shadow: 7px 1px 0 -1px rgba(255, 255, 255, 0.82);
}

.welcome-modal__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.92);
  transform: translateX(-50%);
}

.welcome-modal__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c46b82;
}

.welcome-modal__title {
  margin: 0 0 8px;
  font-size: clamp(1.28rem, 4.2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  color: #2f1b24;
}

.welcome-modal__subtitle {
  margin: 0 auto 20px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: #6b6170;
  max-width: 30ch;
}

.welcome-modal__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 11px 26px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #ffffff;
  background: #c46b82;
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.welcome-modal__ok:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(196, 107, 130, 0.4);
}

.welcome-modal__ok:active {
  transform: translateY(0);
}

.welcome-modal__ok:focus {
  outline: 3px solid rgba(196, 107, 130, 0.35);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-modal-overlay,
  .welcome-modal,
  .welcome-modal__ok {
    transition-duration: 0.01ms;
  }
}

/* -------- Admin dashboard (admin.html) -------- */
.admin-section {
  margin-top: 10px;
}

.admin-toolbar {
  max-width: 980px;
  margin: 0 auto 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
}

.admin-toolbar__note {
  color: #5f6673;
  font-size: 0.95rem;
  font-weight: 500;
}

.admin-refresh-btn {
  padding: 10px 16px;
}

.admin-booking-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-status-select {
  min-width: 160px;
  min-height: 52px;
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.2;
}

.admin-save-btn {
  background: #7fc142;
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
}

.admin-save-btn:hover {
  background: #5f9e2e;
}

.admin-recent-list {
  margin-top: 6px;
}

.admin-recent-list .booking-card {
  margin-top: 14px;
}

.admin-recent-list .booking-card:first-child {
  margin-top: 0;
}

.appointments-strip--reception-checkin .appointments-strip__head {
  max-width: none;
  margin: 0 auto;
  text-align: center;
}

.appointments-strip--reception-checkin .appointments-strip__title {
  margin: 0;
  text-align: center;
}

.appointments-strip--reception-checkin .appointments-strip__head--split {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
  margin-bottom: 14px;
}

.appointments-strip--reception-checkin .appointments-strip__head--split .appointments-strip__title {
  margin-bottom: 0;
}

.appointments-strip__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.appointments-strip__lead--checkin {
  margin: 0;
  text-align: left;
  max-width: none;
}

.reception-records-split {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  margin-top: 8px;
}

.reception-records-panel {
  padding: 10px 10px 8px;
  border: 1px solid #d6e6c6;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fcf4 0%, #ffffff 42%);
  box-shadow: 0 4px 14px rgba(31, 43, 22, 0.04);
}

.reception-records-panel--checkout {
  background: linear-gradient(180deg, #fdf7f9 0%, #ffffff 42%);
  border-color: rgba(196, 107, 130, 0.22);
}

.reception-records-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(214, 230, 198, 0.9);
}

.reception-records-panel--checkout .reception-records-panel__head {
  border-bottom-color: rgba(196, 107, 130, 0.16);
}

.reception-records-panel__head::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 99px;
  background: #7fc142;
  flex-shrink: 0;
}

.reception-records-panel--checkout .reception-records-panel__head::before {
  background: #c46b82;
}

.reception-records-split__heading {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1f2b16;
}

.reception-records-split__empty {
  margin: 0 0 8px !important;
  font-size: 0.9rem;
}

.reception-record-card .reception-checkin-card__name-row {
  margin-bottom: 0;
}

.reception-table-host {
  margin-top: 4px;
}

.reception-table-wrap {
  overflow-x: auto;
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  background: #fff;
  box-shadow: var(--dt-shadow);
  -webkit-overflow-scrolling: touch;
}

.reception-table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--dt-font);
  line-height: 1.35;
  color: #1f2b16;
}

.reception-table th,
.reception-table td {
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--dt-row-line);
}

.reception-table th {
  font-size: var(--dt-th-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dt-head-color);
  background: var(--dt-head-bg);
  border-bottom: 1px solid #d6e6c6;
  white-space: nowrap;
}

.reception-table tbody tr {
  transition: background-color 0.15s ease;
}

.reception-table tbody tr:nth-child(even) td {
  background: var(--dt-row-alt);
}

.reception-table tbody tr:hover td {
  background: var(--dt-row-hover);
}

.reception-table tbody tr:last-child td {
  border-bottom: none;
}

.reception-table__name {
  font-weight: 700;
  color: #1f2b16;
  min-width: 124px;
  max-width: 180px;
  white-space: normal;
}

.reception-table__id {
  font-family: "Poppins", sans-serif;
  font-size: 0.74rem;
  color: #5b6752;
  max-width: 112px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reception-table__facility {
  min-width: 132px;
  max-width: 220px;
  white-space: normal;
}

.reception-table__date {
  white-space: nowrap;
}

.reception-table__stay {
  min-width: 188px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding-right: 14px;
}

.reception-stay {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-left: 1px;
}

.reception-stay::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #d7e4ca;
}

.reception-stay__row {
  display: grid;
  grid-template-columns: 10px 4.7rem minmax(0, 1fr);
  column-gap: 6px;
  align-items: center;
  line-height: 1.2;
}

.reception-stay__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fc142;
  box-shadow: 0 0 0 2px #fff;
  justify-self: center;
  position: relative;
  z-index: 1;
}

.reception-stay__row--out .reception-stay__dot {
  background: #fff;
  border: 1.5px solid #c46b82;
  box-sizing: border-box;
}

.reception-stay__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6a7560;
  white-space: nowrap;
}

.reception-stay__value {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1f2b16;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.reception-table__status {
  min-width: 120px;
  max-width: 168px;
}

.reception-table__status .booking-status {
  margin-bottom: 0;
  font-size: 10px;
  padding: 3px 8px;
  letter-spacing: 0.04em;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

.reception-table__actions {
  white-space: normal;
}

.reception-table__actions-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.reception-table__actions-inner .admin-pay-icon-btn {
  width: 40px;
  height: 40px;
}

.reception-table__actions--icons {
  width: 88px;
  min-width: 88px;
  white-space: nowrap;
}

.reception-table__actions--icons .reception-table__actions-inner {
  flex-wrap: nowrap;
  flex-direction: row;
}

.reception-table .btn--small {
  margin-top: 0;
  padding: 5px 10px;
  font-size: 0.72rem;
  line-height: 1.2;
}

.reception-records-split .reception-table {
  min-width: 0;
}

.reception-records-split .reception-table-wrap {
  border: var(--dt-border);
  box-shadow: var(--dt-shadow);
}

.reception-records-panel--checkout .reception-table-wrap {
  border: var(--dt-border-pink);
}

.reception-records-panel--checkout .reception-table th {
  background: var(--dt-head-bg-pink);
  color: var(--dt-head-color-pink);
  border-bottom-color: rgba(196, 107, 130, 0.18);
}

.reception-records-panel--checkout .reception-table tbody tr:nth-child(even) td {
  background: var(--dt-row-alt-pink);
}

.reception-records-panel--checkout .reception-table tbody tr:hover td {
  background: var(--dt-row-hover-pink);
}

.reception-records-split .reception-table-host {
  margin-top: 0;
}

.reception-records-search {
  margin-bottom: 8px;
  gap: 4px;
}

.reception-records-search label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4d5a42;
}

#section-customer-record #receptionRecordSearch {
  display: block;
  width: 240px;
  max-width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 4px 9px;
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.2;
  border-radius: 7px;
}

#section-customer-record .admin-pagination,
#section-checkin .admin-pagination,
#section-checkout .admin-pagination {
  margin-top: 6px;
  padding-top: 6px;
  gap: 6px;
  border-top-color: #e8eedf;
}

#section-customer-record .admin-pagination__info,
#section-customer-record .admin-pagination__page,
#section-checkin .admin-pagination__info,
#section-checkin .admin-pagination__page,
#section-checkout .admin-pagination__info,
#section-checkout .admin-pagination__page {
  font-size: 0.7rem;
  line-height: 1.2;
}

#section-customer-record .admin-pagination__nav,
#section-checkin .admin-pagination__nav,
#section-checkout .admin-pagination__nav {
  gap: 4px;
}

#section-customer-record .admin-pagination .btn--small,
#section-checkin .admin-pagination .btn--small,
#section-checkout .admin-pagination .btn--small {
  min-height: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 0.68rem;
  line-height: 1;
  border-radius: 6px;
}

.reception-checkin-card-wrap {
  margin-top: 18px;
}

/* Check-in ticket stubs — each booking is a perforated event ticket */
.checkin-ticket-list {
  --ticket-paper: #fffdfb;
  --ticket-notch: #f6eef2;
  --ticket-ink: var(--text-on-light, #1a1220);
  --ticket-muted: #6b5c63;
  --ticket-line: rgba(196, 107, 130, 0.42);
  --ticket-pink: #c46b82;
  margin-top: 2px;
  padding: 14px;
  border-radius: 16px;
  background: var(--ticket-notch);
}

.checkin-ticket-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checkin-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(168px, 220px);
  align-items: stretch;
  position: relative;
  background: var(--ticket-paper);
  color: var(--ticket-ink);
  border-radius: 16px;
  box-shadow:
    0 10px 24px rgba(61, 51, 64, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  overflow: visible;
}

.checkin-ticket::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;
  border-radius: 0 6px 6px 0;
  background: var(--ticket-pink);
}

.checkin-ticket__info {
  padding: 16px 16px 16px 22px;
  min-width: 0;
}

.checkin-ticket__info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.checkin-ticket__guest {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ticket-ink);
  letter-spacing: -0.01em;
}

.checkin-ticket__info-top .booking-status {
  margin: 0;
  flex-shrink: 0;
}

.checkin-ticket__id {
  margin: 4px 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ticket-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkin-ticket__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
}

.checkin-ticket__meta-item {
  min-width: 0;
}

.checkin-ticket__meta-item dt {
  margin: 0 0 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ticket-pink);
}

.checkin-ticket__meta-item dd {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ticket-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkin-ticket__perf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
}

.checkin-ticket__dash {
  flex: 1;
  width: 0;
  margin: 14px 0;
  border-left: 2px dashed var(--ticket-line);
}

.checkin-ticket__notch {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ticket-notch);
  box-shadow: inset 0 0 0 1px rgba(196, 107, 130, 0.1);
  transform: translateX(-50%);
}

.checkin-ticket__notch--start {
  top: -9px;
}

.checkin-ticket__notch--end {
  bottom: -9px;
}

.checkin-ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 16px 14px 14px;
  text-align: center;
}

.checkin-ticket__stub-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ticket-pink);
}

.checkin-ticket__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.checkin-ticket__actions .btn {
  margin-top: 0;
  width: 100%;
  min-height: 38px;
}

.checkin-ticket__actions .btn--small {
  padding: 7px 10px;
  font-size: 0.74rem;
  line-height: 1.2;
}

.checkin-ticket__actions .btn--outline,
.checkin-ticket__actions .btn.btn--outline {
  background: #ffffff !important;
  color: var(--ticket-ink) !important;
  -webkit-text-fill-color: var(--ticket-ink) !important;
  border: 1px solid rgba(196, 107, 130, 0.38) !important;
}

.checkin-ticket__barcode {
  display: block;
  height: 18px;
  margin-top: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--ticket-ink) 0 2px,
    transparent 2px 4px,
    var(--ticket-ink) 4px 5px,
    transparent 5px 8px,
    var(--ticket-ink) 8px 9px,
    transparent 9px 11px
  );
  opacity: 0.22;
}

@media (max-width: 760px) {
  .checkin-ticket {
    grid-template-columns: 1fr;
    grid-template-rows: auto 28px auto;
  }

  .checkin-ticket__perf {
    flex-direction: row;
  }

  .checkin-ticket__dash {
    width: auto;
    height: 0;
    margin: 0 14px;
    border-left: none;
    border-top: 2px dashed var(--ticket-line);
  }

  .checkin-ticket__notch {
    top: 50%;
    left: auto;
    transform: translateY(-50%);
  }

  .checkin-ticket__notch--start {
    top: 50%;
    left: -9px;
    transform: translateY(-50%);
  }

  .checkin-ticket__notch--end {
    top: 50%;
    bottom: auto;
    right: -9px;
    left: auto;
    transform: translateY(-50%);
  }

  .checkin-ticket__meta {
    grid-template-columns: 1fr;
  }

  .checkin-ticket__stub {
    padding-top: 6px;
  }

  .checkin-ticket__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .checkin-ticket__actions .btn {
    width: auto;
    flex: 1 1 140px;
  }
}

.reception-checkin-card__body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.reception-checkin-card__main {
  flex: 1;
  min-width: min(100%, 220px);
}

.reception-checkin-card__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.reception-checkin-card__name-row .booking-card__name {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.reception-checkin-card__view-btn {
  flex-shrink: 0;
}

.reception-booking-detail-body {
  margin-top: 12px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

.reception-checkin-card__aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: min(100%, 220px);
}

.reception-checkin-card__aside-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reception-checkin-card__aside-controls .reception-checkin-status-select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 200px;
}

.reception-checkin-card__aside .btn {
  margin-top: 0;
}

.admin-status-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-status-toggle {
  white-space: nowrap;
}

.sentiment-chart-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.sentiment-chart-header__right {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-app .admin-sentiment-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-app .admin-sentiment-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}

.sentiment-period-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-app .sentiment-period-btn.sentiment-period-btn--active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* Formal reporting presentation (admin dashboards) */
.admin-app .admin-reports-strip {
  margin-bottom: 4px;
}

.admin-app .admin-reports-lede {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 46rem;
}

.admin-app .admin-reports-kpi-row {
  margin-top: 12px;
}

.admin-app .admin-reports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}

.admin-app .admin-reports-grid > .admin-report-chart-card,
.admin-app .admin-reports-grid > .admin-model-eval {
  margin-top: 0;
  min-width: 0;
  height: 100%;
}

.admin-app .admin-report-card-title {
  margin: 0 0 4px;
  font-size: 1.08rem;
  color: #1e1a20;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.admin-app .admin-report-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.admin-app .admin-report-card-head .admin-report-card-title {
  margin: 0;
}

.admin-app .admin-report-link-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-app .admin-report-donut-layout {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(160px, 0.95fr);
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

.admin-app .admin-report-donut-chart {
  width: 100%;
  max-height: 230px;
  margin: 0 auto;
  border: none;
  background: transparent;
  box-shadow: none;
}

.admin-app .admin-report-donut-legend {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-app .admin-report-donut-legend li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfafc 0%, #f7f5f8 100%);
  border: 1px solid rgba(61, 51, 64, 0.06);
  font-size: 0.84rem;
  color: #334155;
  font-weight: 600;
}

.admin-app .admin-report-donut-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(61, 51, 64, 0.06);
}

.admin-app .admin-report-donut-legend__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.admin-app .admin-report-donut-legend__label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #2f2933;
  line-height: 1.25;
}

.admin-app .admin-report-donut-legend__count {
  font-size: 0.72rem;
  font-weight: 500;
  color: #8a8490;
  line-height: 1.3;
}

.admin-app .admin-report-donut-legend__value {
  color: #5b5560;
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.admin-app .admin-report-donut-legend__empty {
  display: block;
  padding: 12px;
  text-align: center;
  color: #8a8490;
  font-weight: 500;
  background: #f8f6f9;
  border-radius: 10px;
  border: 1px dashed rgba(61, 51, 64, 0.14);
}

.admin-app .admin-report-reviews-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 14px 0 18px;
  align-items: center;
  justify-items: center;
}

.admin-app .admin-report-review-names {
  margin-top: 16px;
  display: grid;
  gap: 0;
}

.admin-app .admin-report-review-names[hidden] {
  display: none;
}

.admin-app .admin-report-review-names__heading {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8490;
}

.admin-app .admin-report-review-names__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(196, 107, 130, 0.16);
}

.admin-app .admin-report-review-names__name {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d3748;
}

.admin-app .admin-report-review-names__meta {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: #8a8490;
  letter-spacing: 0.02em;
}

.admin-app .admin-report-reviews-kpi {
  text-align: center;
  min-width: 0;
  width: 100%;
  padding: 4px 2px;
  border: none;
  background: transparent;
  border-radius: 0;
}

.admin-app .admin-report-reviews-kpi strong {
  display: block;
  margin: 0;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  font-weight: 700;
  color: #7fc142;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.admin-app .admin-report-reviews-kpi hr {
  width: 48%;
  max-width: 56px;
  margin: 10px auto;
  background: #7fc142;
  height: 2px;
  border: none;
}

.admin-app .admin-report-reviews-kpi span {
  display: block;
  margin-top: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #64748b;
}

.admin-app .admin-report-reviews-bars {
  margin-bottom: 12px;
}

.admin-app .admin-report-sentiment-row {
  margin-bottom: 8px;
}

.admin-app .admin-report-reviews-chart-block {
  margin-top: 4px;
}

.admin-app .admin-report-reviews-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.admin-app .admin-report-reviews-chart-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8490;
}

.admin-app .admin-report-reviews-legend {
  margin: 0;
  gap: 8px 12px;
}

.admin-app .admin-report-chart-legend__swatch--pos {
  background: #5f9e2e;
  box-shadow: 0 0 0 3px rgba(95, 158, 46, 0.16);
}

.admin-app .admin-report-chart-legend__swatch--neu {
  background: #7b7480;
  box-shadow: 0 0 0 3px rgba(123, 116, 128, 0.14);
}

.admin-app .admin-report-chart-legend__swatch--neg {
  background: #c46b82;
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.16);
}

.admin-app .admin-report-reviews-chart-wrap {
  margin-top: 0;
  padding: 10px 10px 8px;
}

.admin-app .admin-report-reviews-chart {
  width: 100%;
  max-height: none;
  border: none;
  background: transparent;
  cursor: crosshair;
}

.admin-app .admin-reports-grid .admin-model-eval {
  padding: 14px 16px 16px;
}

.admin-app .admin-reports-grid .admin-model-eval__head {
  padding-right: 64px;
  margin-bottom: 12px;
  text-align: left;
}

.admin-app .admin-reports-grid .admin-model-eval__head h2,
.admin-app .admin-reports-grid .admin-model-eval__head h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: 0;
  text-align: left;
}

.admin-app .admin-reports-grid .admin-model-eval__live-note {
  text-align: left;
  margin-top: 6px;
}

.admin-app .admin-reports-grid .admin-model-eval__grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.admin-app .admin-report-chart-card {
  border: 1px solid rgba(61, 51, 64, 0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(61, 51, 64, 0.05);
  background: linear-gradient(180deg, #ffffff 0%, #fcfbfd 100%);
  padding: 16px 18px;
}

.admin-app #section-reports .admin-report-chart-card {
  padding: 14px 16px 16px;
}

@media (max-width: 960px) {
  .admin-app .admin-reports-grid {
    grid-template-columns: 1fr;
  }

  .admin-app .admin-report-donut-layout {
    grid-template-columns: 1fr;
  }
}

.admin-app .admin-report-chart-sub {
  color: #64748b !important;
  font-size: 0.9rem;
  line-height: 1.5;
}

.admin-app .admin-report-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 10px;
}

.admin-app .admin-report-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.2;
}

.admin-app .admin-report-chart-legend__swatch {
  display: inline-block;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.admin-app .admin-report-chart-legend__swatch--green {
  background: #7fc142;
  box-shadow: 0 0 0 3px rgba(127, 193, 66, 0.18);
}

.admin-app .admin-report-chart-legend__swatch--pink {
  background: #c46b82;
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.18);
}

.admin-app .admin-report-chart-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
  margin-top: 6px;
  border: 1px solid rgba(61, 51, 64, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(248, 246, 249, 0.55) 0%, rgba(255, 255, 255, 0.9) 100%);
  padding: 12px 12px 8px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.admin-app .admin-report-chart-wrap--revenue {
  padding-top: 14px;
  padding-bottom: 10px;
}

.admin-app .admin-report-chart-wrap .admin-pro-chart,
.admin-app #adminReportTrendChart.admin-pro-chart,
.admin-app #adminReportRevenueChart.admin-pro-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 0;
  border: none;
  background: transparent;
  vertical-align: middle;
  max-width: 100%;
  cursor: crosshair;
  box-sizing: border-box;
}

.admin-app .admin-report-chart-months {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 2px;
  padding: 0 14px 2px;
  box-sizing: border-box;
}

.admin-app .admin-report-chart-months span {
  display: block;
  text-align: center;
  font-family: Poppins, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #3d3340;
  line-height: 1.3;
  white-space: nowrap;
}

.admin-app .admin-reports-grid .admin-report-chart-months span {
  font-size: 0.64rem;
  letter-spacing: -0.02em;
}

.admin-app .admin-reports-grid .admin-report-insights {
  margin-top: 10px;
  padding: 10px 12px 8px;
}

.admin-app .admin-reports-grid .admin-report-insights__list li {
  font-size: 0.8rem;
}

.admin-app .admin-pro-chart {
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(61, 51, 64, 0.08);
  background: #ffffff;
  vertical-align: middle;
  max-width: 100%;
  cursor: crosshair;
}

.admin-app #adminReportFacilityChart.admin-pro-chart {
  max-height: none;
  padding: 4px 0;
}

.admin-app .admin-sentiment-period-chart {
  width: 100%;
  height: auto;
  max-height: none;
  border: none;
  background: transparent;
  box-sizing: border-box;
  cursor: crosshair;
}

.admin-app .admin-sentiment-period-chart-wrap {
  margin-top: 4px;
  padding: 10px 12px 8px;
}

.admin-app .admin-report-chart-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(196, 107, 130, 0.28);
  box-shadow:
    0 10px 28px rgba(61, 51, 64, 0.14),
    0 2px 6px rgba(61, 51, 64, 0.06);
  color: #3d3340;
  font-size: 0.75rem;
  line-height: 1.35;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.admin-app .admin-report-chart-tooltip[hidden] {
  display: none !important;
}

.admin-app .admin-report-chart-tooltip__month {
  margin: 0;
  font-weight: 700;
  color: #c46b82;
}

.admin-app .admin-report-chart-tooltip__value {
  margin: 2px 0 0;
  font-weight: 600;
  color: #3d3340;
}

.admin-app .admin-report-chart-tooltip__kind {
  margin: 2px 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #7fc142;
}

.admin-app .admin-report-chart-tooltip__kind--pink {
  color: #c46b82;
}

.admin-app .admin-report-insights {
  margin-top: 14px;
  padding: 12px 14px 10px;
  border-radius: 10px;
  border: 1px solid rgba(196, 107, 130, 0.2);
  background: linear-gradient(180deg, #fff8fa 0%, #ffffff 100%);
}

.admin-app .admin-report-insights__title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c46b82;
}

.admin-app .admin-report-insights__list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.admin-app .admin-report-insights__list li {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #3d3340;
}

.admin-app .admin-model-eval {
  margin-top: 18px;
  padding: 20px 22px 22px;
}

.admin-app .admin-model-eval__head {
  position: relative;
  display: block;
  margin-bottom: 18px;
  padding-right: 72px;
  text-align: center;
}

.admin-app .admin-model-eval__head h2 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.02em;
  text-align: center;
}

.admin-app .admin-model-eval__live {
  position: absolute;
  top: 0;
  right: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-app .admin-model-eval__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}

.admin-app .admin-model-eval__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.admin-app .admin-model-eval__panel {
  min-width: 0;
}

.admin-app .admin-model-eval__panel h3 {
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #334155;
}

.admin-app .admin-model-eval__empty,
.admin-app .admin-model-eval__remark {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #64748b;
}

.admin-app .admin-model-eval__live-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #64748b;
  text-align: center;
}

.admin-app .admin-model-eval__table-wrap {
  overflow-x: auto;
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  background: #fff;
  box-shadow: var(--dt-shadow);
  -webkit-overflow-scrolling: touch;
}

.admin-app .admin-model-eval__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--dt-font);
  background: #fff;
  color: #1f2b16;
}

.admin-app .admin-model-eval__table th,
.admin-app .admin-model-eval__table td {
  border: none;
  border-bottom: 1px solid var(--dt-row-line);
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
  text-align: left;
}

.admin-app .admin-model-eval__table th {
  background: var(--dt-head-bg);
  font-size: var(--dt-th-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dt-head-color);
  border-bottom: 1px solid #d6e6c6;
}

.admin-app .admin-model-eval__table tbody tr {
  transition: background-color 0.15s ease;
}

.admin-app .admin-model-eval__table tbody tr:hover td {
  background: var(--dt-row-hover);
}

.admin-app .admin-model-eval__table tbody tr:last-child td {
  border-bottom: none;
}

.admin-app .admin-model-eval__table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-app .admin-model-eval__avg td {
  background: #f8fafc;
  font-weight: 600;
}

.admin-app .admin-model-eval__acc td {
  background: #f4f7f0;
  font-weight: 700;
}

.admin-app .admin-model-eval__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: capitalize;
}

.admin-app .admin-model-eval__badge--very-good,
.admin-app .admin-model-eval__badge--good {
  background: #ecfdf3;
  color: #166534;
}

.admin-app .admin-model-eval__badge--acceptable {
  background: #fffbeb;
  color: #92400e;
}

.admin-app .admin-model-eval__badge--needs-improvement {
  background: #fff1f2;
  color: #9f1239;
}

@media (max-width: 900px) {
  .admin-app .admin-model-eval__grid {
    grid-template-columns: 1fr;
  }
}

.admin-app #section-sentiment .sentiment-row {
  grid-template-columns: minmax(168px, 190px) 1fr 56px;
}

.admin-app .admin-sentiment-hero .section-title.admin-sentiment-title {
  color: #0f172a;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.admin-app .admin-sentiment-lede {
  margin: 0 0 18px;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 52rem;
}

.admin-app .admin-sentiment-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
}

.admin-app .admin-sentiment-header-row .admin-sentiment-lede {
  margin: 6px 0 0;
}

.admin-app .admin-sentiment-archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-app .sentiment-current-week-empty,
.admin-app .sentiment-archive-empty {
  margin: 0;
  padding: 14px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.5;
}

.admin-app .admin-sentiment-archive-modal {
  max-width: 720px;
  max-height: min(85vh, 820px);
  overflow: auto;
}

.admin-app .sentiment-archive-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-app .sentiment-archive-week {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.admin-app .sentiment-archive-week-summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
}

.admin-app .sentiment-archive-week-summary::-webkit-details-marker {
  display: none;
}

.admin-app .sentiment-archive-comment-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
}

.admin-app .sentiment-archive-comment {
  padding: 10px 0;
  border-top: 1px solid #f1f5f9;
}

.admin-app .sentiment-archive-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.admin-app .sentiment-archive-comment-stars {
  color: #ca8a04;
  font-size: 0.88rem;
}

.admin-app .sentiment-archive-comment blockquote {
  margin: 0;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.5;
}

.admin-app .sentiment-archive-rec-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

.admin-app .sentiment-archive-rec-title {
  margin: 0 0 4px;
  font-size: 1rem;
  color: #0f172a;
}

.admin-app .sentiment-archive-rec-meta {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #64748b;
}

.admin-app .sentiment-archive-rec-summary {
  margin: 0 0 10px;
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.5;
}

.admin-app .sentiment-archive-rec-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.admin-app .sentiment-archive-rec-item p {
  margin: 6px 0 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.5;
}

.admin-app .sentiment-archive-rec-accepted-badge,
.admin-app .sentiment-archive-rec-item-accepted {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #c46b82;
  color: var(--text-on-dark);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}

.admin-app .sentiment-archive-rec-item-accepted {
  margin-left: 0;
  margin-top: 6px;
}

.admin-app .admin-sentiment-metric-card .admin-sentiment-h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e293b;
}

.admin-app .admin-sentiment-sub {
  color: #64748b !important;
}

.admin-app .admin-sentiment-total {
  color: #334155 !important;
  font-size: 0.9rem;
}

.admin-app .admin-sentiment-label {
  color: #334155 !important;
  font-weight: 600;
  font-size: 0.88rem;
}

.admin-app #section-sentiment .sentiment-bar {
  background: #e2e8f0;
  height: 11px;
}

.admin-app #section-sentiment .sentiment-bar .positive {
  background: #047857;
}

.admin-app #section-sentiment .sentiment-bar .neutral {
  background: #64748b;
}

.admin-app #section-sentiment .sentiment-bar .negative {
  background: #dc2626;
}

.admin-app #section-sentiment .sentiment-row strong {
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Sentiment: auto-generated recommendations */
.admin-app .admin-sentiment-recommendations {
  margin-top: 20px;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(30, 64, 175, 0.22) 0%,
    rgba(4, 120, 87, 0.2) 45%,
    rgba(159, 18, 57, 0.12) 100%
  );
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.08);
}

.admin-app .admin-sentiment-rec-inner {
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 22px 24px 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.admin-app .admin-sentiment-rec-heading {
  margin-bottom: 18px;
}

.admin-app .admin-sentiment-rec-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4338ca;
  background: rgba(67, 56, 202, 0.08);
  border: 1px solid rgba(67, 56, 202, 0.2);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.admin-app .admin-sentiment-rec-title {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 650;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.admin-app .admin-sentiment-rec-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  max-width: 58rem;
}

.admin-app .admin-sentiment-rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-app .admin-sentiment-rec-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-app .admin-sentiment-rec-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.admin-app .admin-sentiment-rec-item--action {
  border-left: 4px solid #c46b82;
  background: linear-gradient(90deg, rgba(159, 18, 57, 0.04) 0%, #fff 12%);
}

.admin-app .admin-sentiment-rec-item--watch {
  border-left: 4px solid #b45309;
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.05) 0%, #fff 12%);
}

.admin-app .admin-sentiment-rec-item--positive {
  border-left: 4px solid #047857;
  background: linear-gradient(90deg, rgba(4, 120, 87, 0.06) 0%, #fff 12%);
}

.admin-app .admin-sentiment-rec-item--neutral {
  border-left: 4px solid #475569;
  background: linear-gradient(90deg, rgba(71, 85, 105, 0.05) 0%, #fff 12%);
}

.admin-app .admin-sentiment-rec-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin-top: 2px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  position: relative;
}

.admin-app .admin-sentiment-rec-item--action .admin-sentiment-rec-icon {
  background: rgba(159, 18, 57, 0.1);
  border-color: rgba(159, 18, 57, 0.22);
}

.admin-app .admin-sentiment-rec-icon::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}

.admin-app .admin-sentiment-rec-item--action .admin-sentiment-rec-icon::after {
  content: "!";
  color: #c46b82;
  font-family: "Poppins", sans-serif;
}

.admin-app .admin-sentiment-rec-item--watch .admin-sentiment-rec-icon::after {
  content: "◉";
  color: #b45309;
  font-size: 13px;
  font-weight: 700;
}

.admin-app .admin-sentiment-rec-item--positive .admin-sentiment-rec-icon::after {
  content: "✓";
  color: #047857;
  font-size: 14px;
}

.admin-app .admin-sentiment-rec-item--neutral .admin-sentiment-rec-icon::after {
  content: "–";
  color: #475569;
  font-size: 18px;
  font-weight: 600;
}

.admin-app .admin-sentiment-rec-body {
  min-width: 0;
}

.admin-app .admin-sentiment-rec-item-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 650;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.admin-app .admin-sentiment-rec-item-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
}

.admin-app .admin-sentiment-rec-footnote {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #94a3b8;
  font-style: italic;
}

.admin-app .admin-sentiment-rec-example-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(67, 56, 202, 0.08);
  border: 1px solid rgba(67, 56, 202, 0.2);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4338ca;
}

.admin-app .admin-sentiment-rec-category {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.admin-app .admin-sentiment-rec-actions {
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

.admin-app #section-sentiment .admin-sentiment-rec-actions .sentiment-rec-accept {
  margin-top: 0;
  cursor: pointer;
  pointer-events: auto;
}

.admin-app #section-sentiment .admin-sentiment-rec-actions .sentiment-rec-accept--accepted,
.admin-app #section-sentiment .admin-sentiment-rec-actions .sentiment-rec-accept:disabled:not(.is-loading) {
  background: #c46b82;
  border-color: #c46b82;
  color: var(--text-on-dark) !important;
  -webkit-text-fill-color: var(--text-on-dark) !important;
  box-shadow: 0 2px 8px rgba(196, 107, 130, 0.35);
  opacity: 1;
}

.admin-app #section-sentiment .admin-sentiment-rec-actions .sentiment-rec-accept.is-loading {
  opacity: 0.9;
}

.admin-app .admin-sentiment-rec-item--accepted {
  border-color: #86efac;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0%, #fff 14%);
}

.admin-app .admin-sentiment-example-banner {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 0.88rem;
  line-height: 1.5;
}

.admin-app .sentiment-comments-list--detail {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.admin-app .sentiment-detail-row {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.admin-app .sentiment-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.admin-app .sentiment-detail-name {
  color: #0f172a;
  font-size: 0.95rem;
}

.admin-app .sentiment-detail-stars {
  color: #b45309;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.admin-app .sentiment-example-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 3px 8px;
  border-radius: 999px;
}

.admin-app .sentiment-detail-quote {
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 3px solid #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334155;
}

.admin-app .sentiment-detail-empty {
  color: #64748b;
  font-size: 0.9rem;
  padding: 12px;
}

.admin-recent-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(127, 193, 66, 0.15);
}

.admin-recent-row:first-child {
  border-top: none;
}

.admin-recent-row__title {
  font-weight: 700;
  color: #1f2b16;
  margin-bottom: 2px;
}

.admin-recent-row__meta {
  color: #6b7280;
  font-size: 0.9rem;
}

.admin-recent-row__right {
  font-weight: 700;
  color: #1f2b16;
  white-space: nowrap;
}

/*--------- admin nav dropdown groups ---------*/
.admin-nav-dropdown {
  position: relative;
}

.admin-nav-dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  transition: 0.3s ease;
  padding: clamp(0.4rem, 0.8vw, 0.55rem) clamp(0.35rem, 0.9vw, 0.7rem);
  border-radius: 999px;
  font-weight: 600;
  font-size: clamp(0.68rem, 0.55rem + 0.35vw, 0.8rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.25;
  display: inline-block;
  text-transform: uppercase;
}

.admin-nav-dropdown-toggle:hover,
.admin-nav-dropdown-toggle:focus-visible {
  color: var(--header-pink-dark);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  outline: none;
}

body.subpage header ul li .admin-nav-dropdown-toggle.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

body.admin-app header ul li .admin-nav-dropdown-toggle,
body.admin-app header ul li .admin-nav-dropdown-toggle.active {
  color: var(--text-on-dark);
}

body.admin-app header ul li .admin-nav-dropdown-toggle:hover,
body.admin-app header ul li .admin-nav-dropdown-toggle:focus-visible {
  color: var(--text-on-light);
}

.admin-nav-dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  z-index: 2000;
}

.admin-nav-dropdown.is-open .admin-nav-dropdown-menu {
  display: block;
}

.admin-nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #1f2b16;
  cursor: pointer;
  white-space: nowrap;
}

.admin-nav-dropdown-item:hover {
  background: rgba(196, 107, 130, 0.28);
  color: #1f2b16;
}

.admin-nav-dropdown-item.active {
  background: rgba(196, 107, 130, 0.28);
  color: #1f2b16;
}

@media only screen and (max-width: 1500px) {
  body.admin-app .admin-nav-dropdown-menu {
    position: static;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  body.admin-app .admin-nav-dropdown-toggle {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0;
    color: var(--text-on-dark);
    font-weight: 700;
    font-size: 0.875rem;
    white-space: normal;
    padding: 0.7rem 1rem;
    text-transform: none;
  }

  body.admin-app .admin-nav-dropdown-toggle:hover,
  body.admin-app .admin-nav-dropdown-toggle:focus-visible {
    color: var(--text-on-light);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: none;
  }

  body.admin-app header ul li .admin-nav-dropdown-toggle.active {
    color: var(--text-on-light);
    background: rgba(255, 255, 255, 0.88);
  }

  body.admin-app .admin-nav-dropdown-item {
    padding: 0.55rem 1rem 0.55rem 1.75rem;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-on-dark);
    white-space: normal;
  }

  body.admin-app .admin-nav-dropdown-item:hover,
  body.admin-app .admin-nav-dropdown-item.active {
    background: rgba(255, 255, 255, 0.88);
    color: var(--text-on-light);
  }
}

/*--------- manager Event Management dropdown ---------*/
body[data-staff-portal="manager"] .admin-nav-dropdown-menu {
  min-width: 248px;
}

body[data-staff-portal="manager"] .admin-nav-dropdown-toggle {
  color: var(--text-on-dark);
}

body[data-staff-portal="manager"] .admin-nav-dropdown-toggle:hover,
body[data-staff-portal="manager"] .admin-nav-dropdown-toggle:focus-visible,
body[data-staff-portal="manager"] header ul li .admin-nav-dropdown-toggle.active,
body[data-staff-portal="manager"] .admin-nav-dropdown.is-open .admin-nav-dropdown-toggle {
  color: var(--brand-ink);
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 1100px) {
  body[data-staff-portal="manager"] .admin-nav-dropdown-menu {
    position: static;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-staff-portal="manager"] .admin-nav-dropdown-toggle {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0;
    color: var(--brand-ink);
    font-weight: 700;
    font-size: 0.875rem;
    white-space: normal;
    padding: 0.7rem 1rem;
  }

  body[data-staff-portal="manager"] .admin-nav-dropdown-toggle:hover,
  body[data-staff-portal="manager"] .admin-nav-dropdown-toggle:focus-visible {
    color: var(--brand-ink);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: none;
  }

  body[data-staff-portal="manager"] header ul li .admin-nav-dropdown-toggle.active {
    color: var(--brand-ink);
    background: rgba(255, 255, 255, 0.88);
  }

  body[data-staff-portal="manager"] .admin-nav-dropdown-item {
    padding: 0.55rem 1rem 0.55rem 1.75rem;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--header-pink-dark);
    white-space: normal;
  }

  body[data-staff-portal="manager"] .admin-nav-dropdown-item:hover,
  body[data-staff-portal="manager"] .admin-nav-dropdown-item.active {
    background: rgba(255, 255, 255, 0.88);
    color: var(--header-pink-dark);
  }

  body[data-staff-portal="manager"] .admin-nav-dropdown.is-open .admin-nav-dropdown-menu {
    padding-bottom: 0.15rem;
  }
}

/*--------- admin settings dropdown + modals ---------*/
.admin-auth-nav {
  position: relative;
  overflow: visible;
  z-index: 2100;
}

.admin-settings-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 240px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  z-index: 2000;
}

.admin-settings-menu[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  header #menulist.is-open,
  header .navlinks > ul.site-nav-list.is-open {
    /* Keep panel clipped so it does not paint a huge blank white region */
    overflow-x: hidden;
    overflow-y: auto;
  }

  header #menulist .admin-settings-menu,
  header .navlinks > ul.site-nav-list .admin-settings-menu {
    position: static;
    right: auto;
    top: auto;
    width: auto;
    min-width: 0;
    margin: 6px 12px 8px;
    box-sizing: border-box;
  }
}

.admin-settings-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  color: #1f2b16;
  cursor: pointer;
}

.admin-settings-item:hover {
  background: rgba(196, 107, 130, 0.28);
}

.admin-settings-item--danger {
  color: #991b1b;
}

.admin-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.admin-settings-overlay[hidden] {
  display: none;
}

.admin-settings-modal {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

/* Customer logout confirmation */
.logout-confirm-overlay {
  background: rgba(45, 36, 48, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: logoutConfirmOverlayIn 0.22s ease;
}

.logout-confirm-modal {
  width: min(380px, 100%);
  padding: 0;
  border: 1px solid rgba(196, 107, 130, 0.16);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 18px 50px rgba(61, 51, 64, 0.22),
    0 2px 8px rgba(61, 51, 64, 0.08);
  animation: logoutConfirmModalIn 0.28s ease;
}

.logout-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.85rem 1.6rem 1.45rem;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(196, 107, 130, 0.12), transparent 55%),
    linear-gradient(180deg, #fffafb 0%, #ffffff 48%, #fbf8f6 100%);
}

.logout-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: #c46b82;
  background: rgba(196, 107, 130, 0.12);
  border: 1px solid rgba(196, 107, 130, 0.22);
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.12);
}

.logout-confirm__title {
  margin: 0 0 0.4rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #3d3340;
}

.logout-confirm__lead {
  margin: 0 0 1.45rem;
  max-width: 16rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6b6170;
}

.logout-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  width: 100%;
}

.logout-confirm__btn {
  min-height: 44px;
  margin: 0;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.logout-confirm__btn:focus-visible {
  outline: 2px solid #c46b82;
  outline-offset: 3px;
}

.logout-confirm__btn--no {
  background: #fff;
  color: #5a5060;
  border: 1.5px solid rgba(61, 51, 64, 0.18);
  box-shadow: none;
}

.logout-confirm__btn--no:hover,
.logout-confirm__btn--no:focus-visible {
  background: #f7f4f6;
  border-color: rgba(61, 51, 64, 0.28);
  color: #3d3340;
}

.logout-confirm__btn--yes {
  background: #c46b82;
  color: #fff;
  border: 1.5px solid #c46b82;
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.28);
}

.logout-confirm__btn--yes:hover,
.logout-confirm__btn--yes:focus-visible {
  background: #b35d74;
  border-color: #b35d74;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(196, 107, 130, 0.34);
}

.logout-confirm__btn--yes:active,
.logout-confirm__btn--no:active {
  transform: translateY(0);
}

@keyframes logoutConfirmOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes logoutConfirmModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logout-confirm-overlay,
  .logout-confirm-modal,
  .logout-confirm__btn {
    animation: none;
    transition: none;
  }
}

.admin-reservation-overlay {
  backdrop-filter: blur(4px);
}

.admin-reservation-modal {
  position: relative;
  width: min(680px, 100%);
  max-height: min(92vh, 820px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: adminReservationModalIn 0.28s ease;
}

@keyframes adminReservationModalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.admin-reservation-modal__accent {
  height: 4px;
  background: linear-gradient(90deg, #c46b82 0%, #8fcf63 50%, #c46b82 100%);
}

.admin-reservation-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(196, 107, 130, 0.12);
  background: linear-gradient(180deg, #fffafb 0%, #ffffff 100%);
}

.admin-reservation-modal__title-wrap {
  min-width: 0;
}

.admin-reservation-modal__eyebrow {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a8490;
}

.admin-reservation-modal__head h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #2f2430;
  font-family: "Poppins", sans-serif;
}

.admin-reservation-modal__date {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 0.95rem;
  font-weight: 500;
}

.admin-reservation-modal__close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(196, 107, 130, 0.22);
  background: #fff;
  color: #5f4b55;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-reservation-modal__close:hover,
.admin-reservation-modal__close:focus-visible {
  border-color: rgba(127, 193, 66, 0.55);
  color: #335e16;
  background: rgba(196, 107, 130, 0.1);
}

.admin-reservation-modal__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px 20px 18px;
}

.admin-reservation-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(196, 107, 130, 0.12);
  background: #fafafa;
}

.admin-reservation-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 24px 18px;
  border-radius: 14px;
  border: 1px dashed rgba(196, 107, 130, 0.28);
  background: linear-gradient(160deg, rgba(196, 107, 130, 0.06) 0%, rgba(255, 255, 255, 0.9) 100%);
  text-align: center;
}

.admin-reservation-empty__icon {
  font-size: 2rem;
  line-height: 1;
}

.admin-reservation-empty p {
  margin: 0;
  color: #6b7280;
  font-size: 0.98rem;
  font-weight: 500;
}

.admin-reservation-picker {
  margin-bottom: 16px;
}

.admin-reservation-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-reservation-picker__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: #3d3340;
}

.admin-reservation-picker__count {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5a7f2c;
  background: linear-gradient(135deg, #eef8e4 0%, #d8efc0 100%);
  border: 1px solid rgba(127, 193, 66, 0.35);
}

.admin-reservation-picker__list {
  display: grid;
  gap: 10px;
}

.admin-reservation-picker__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(196, 107, 130, 0.06);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.admin-reservation-picker__item:hover {
  border-color: rgba(196, 107, 130, 0.35);
  box-shadow: 0 4px 14px rgba(196, 107, 130, 0.1);
  transform: translateY(-1px);
}

.admin-reservation-picker__item--active {
  border-color: rgba(127, 193, 66, 0.65);
  background: linear-gradient(135deg, rgba(238, 248, 228, 0.55) 0%, #ffffff 100%);
  box-shadow: 0 0 0 1px rgba(127, 193, 66, 0.25), 0 6px 18px rgba(127, 193, 66, 0.12);
}

.admin-reservation-picker__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #6b3f52;
  background: linear-gradient(145deg, rgba(196, 107, 130, 0.18) 0%, rgba(196, 107, 130, 0.08) 100%);
  border: 1px solid rgba(196, 107, 130, 0.18);
}

.admin-reservation-picker__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-reservation-picker__name {
  font-weight: 650;
  color: #2f2430;
  font-size: 0.96rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-reservation-picker__meta {
  font-size: 0.8rem;
  color: #7a7280;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-reservation-picker__item .booking-status {
  margin: 0;
  white-space: nowrap;
  font-size: 0.68rem;
  padding: 4px 8px;
}

.admin-reservation-detail__panel {
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(196, 107, 130, 0.16);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(196, 107, 130, 0.08);
}

.admin-reservation-detail__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(196, 107, 130, 0.1) 0%, rgba(143, 207, 99, 0.08) 100%);
  border-bottom: 1px solid rgba(196, 107, 130, 0.1);
}

.admin-reservation-detail__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(145deg, #c46b82 0%, #a85573 100%);
  box-shadow: 0 6px 16px rgba(196, 107, 130, 0.28);
}

.admin-reservation-detail__hero-text {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-reservation-detail__hero-text h4 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #2f2430;
  font-family: "Poppins", sans-serif;
}

.admin-reservation-detail__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-reservation-detail__badges .booking-status {
  margin: 0;
  font-size: 0.72rem;
  padding: 4px 10px;
}

.admin-reservation-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.admin-reservation-pill--paid {
  color: #2f6b1a;
  background: #eef8e4;
  border-color: rgba(127, 193, 66, 0.35);
}

.admin-reservation-pill--pending {
  color: #92400e;
  background: #fef3c7;
  border-color: rgba(245, 158, 11, 0.25);
}

.admin-reservation-pill--danger {
  color: #991b1b;
  background: #fee2e2;
  border-color: rgba(239, 68, 68, 0.25);
}

.admin-reservation-detail__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid rgba(196, 107, 130, 0.1);
}

.admin-reservation-stat {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-right: 1px solid rgba(196, 107, 130, 0.08);
}

.admin-reservation-stat:last-child {
  border-right: none;
}

.admin-reservation-stat__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a8490;
}

.admin-reservation-stat__value {
  font-size: 0.92rem;
  font-weight: 650;
  color: #2f2430;
  line-height: 1.35;
  word-break: break-word;
}

.admin-reservation-stat--amount .admin-reservation-stat__value {
  font-size: 1.08rem;
  font-weight: 700;
  color: #3f6d1c;
}

.admin-reservation-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.admin-reservation-field {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-top: 1px solid rgba(196, 107, 130, 0.08);
  border-right: 1px solid rgba(196, 107, 130, 0.08);
}

.admin-reservation-field:nth-child(-n + 2) {
  border-top: none;
}

.admin-reservation-field:nth-child(2n) {
  border-right: none;
}

.admin-reservation-field--wide {
  grid-column: 1 / -1;
  border-right: none;
}

.admin-reservation-field__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a8490;
}

.admin-reservation-field__value {
  font-size: 0.92rem;
  font-weight: 600;
  color: #2f2430;
  line-height: 1.4;
  word-break: break-word;
}

@media (max-width: 640px) {
  .admin-reservation-modal__head,
  .admin-reservation-modal__body,
  .admin-reservation-modal__footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin-reservation-detail__highlights {
    grid-template-columns: 1fr;
  }

  .admin-reservation-stat {
    border-right: none;
    border-bottom: 1px solid rgba(196, 107, 130, 0.08);
  }

  .admin-reservation-stat:last-child {
    border-bottom: none;
  }

  .admin-reservation-detail__grid {
    grid-template-columns: 1fr;
  }

  .admin-reservation-field {
    border-right: none;
  }

  .admin-reservation-field:nth-child(-n + 2) {
    border-top: 1px solid rgba(196, 107, 130, 0.08);
  }

  .admin-reservation-field:first-child {
    border-top: none;
  }

  .admin-reservation-picker__item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  .admin-reservation-picker__item .booking-status {
    grid-column: 2;
    justify-self: start;
  }
}

.manager-edit-modal {
  width: min(720px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  padding: 18px 18px 16px;
}

.manager-edit-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.manager-edit-modal__title {
  margin: 0;
  font-size: 1.2rem;
  color: #1f2b16;
}

.manager-edit-modal__sub {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
}

.manager-edit-modal__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #1f2b16;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.manager-edit-form {
  margin-top: 14px;
  align-items: start;
}

.manager-edit-form__section {
  margin: 6px 0 0;
  padding: 10px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c46b82;
  border-top: 1px solid rgba(196, 107, 130, 0.14);
}

.manager-edit-form__section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.manager-edit-modal textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
}

.manager-edit-modal__close:hover {
  border-color: rgba(127, 193, 66, 0.55);
  color: #335e16;
  background: rgba(196, 107, 130, 0.28);
}

.manager-edit-modal .form-grid {
  margin-top: 14px !important;
}

.manager-edit-modal input,
.manager-edit-modal select,
.manager-edit-modal textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  padding: 10px 12px;
  background: #fff;
}

.manager-edit-modal input:focus,
.manager-edit-modal select:focus,
.manager-edit-modal textarea:focus {
  outline: 2px solid rgba(127, 193, 66, 0.55);
  outline-offset: 1px;
}

.manager-edit-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.manager-report-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.manager-report-live {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #166534;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.manager-report-live__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}

.manager-report-tools {
  justify-content: flex-end;
  align-items: flex-end;
}

.manager-report-tools__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  min-width: 0;
}

.manager-report-tools__field span {
  color: #8a5a68;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.manager-report-tools__field input,
.manager-report-tools__field select {
  margin: 0;
  min-height: 40px;
  min-width: 138px;
  padding: 6px 10px;
  border: 1px solid rgba(196, 107, 130, 0.28);
  border-radius: 10px;
  background: #fff;
  color: #3d3340;
  font-family: inherit;
  font-size: 0.86rem;
}

@media (max-width: 1100px) {
  .manager-report-tools {
    justify-content: flex-start;
  }
}

.manager-report-tools__field input:focus,
.manager-report-tools__field select:focus {
  outline: 2px solid rgba(196, 107, 130, 0.35);
  outline-offset: 1px;
}

#section-analytics > .appointments-strip .manager-report-tools .btn {
  align-self: flex-end;
}

.manager-print-sheet {
  display: none !important;
}

.manager-report-card {
  margin-top: 18px;
  padding: 14px 16px 16px;
}

.manager-report-card::before,
.manager-report-card::after {
  content: none !important;
  display: none !important;
}

.manager-report-card:hover {
  transform: none;
}

.manager-report-card__title {
  margin: 0 0 4px !important;
  color: #c46b82 !important;
  font-size: 1.12rem;
}

.manager-report-summary {
  margin: 0;
  color: #3d3340;
  line-height: 1.4;
  font-family: "Poppins", sans-serif;
}

.manager-report-summary__empty {
  margin: 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.manager-report-summary__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.4;
}

.manager-report-summary__meta .manager-report-live__dot {
  flex: 0 0 8px;
}

.manager-report-summary__section + .manager-report-summary__section {
  margin-top: 14px;
}

.manager-report-summary__section-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c46b82;
}

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

.manager-report-summary__grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.manager-report-summary__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manager-report-summary__grid--1 {
  grid-template-columns: minmax(0, 1fr);
}

.manager-report-summary__row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  border-radius: 12px;
  background: linear-gradient(160deg, #fffafb 0%, #ffffff 62%);
}

.manager-report-summary__label {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.3;
}

.manager-report-summary__value {
  color: #3d3340;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  .manager-report-summary__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .manager-report-summary__grid,
  .manager-report-summary__grid--4,
  .manager-report-summary__grid--2,
  .manager-report-summary__grid--1 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  header,
  footer,
  #staffAuthNav,
  .navlinks,
  .nav-menu-toggle,
  .appointments-strip__tools button,
  #managerDownloadReport {
    display: none !important;
  }
  body.subpage {
    background: #fff !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
  }
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  @page {
    size: A4 portrait;
    margin: 14mm 12mm 16mm;
  }

  body.manager-printing {
    background: #fff !important;
    color: #1a1a1a !important;
  }

  body.manager-printing header,
  body.manager-printing footer,
  body.manager-printing main,
  body.manager-printing .nav-menu-toggle,
  body.manager-printing #staffHeaderRoleItem,
  body.manager-printing #staffProfileOverlay,
  body.manager-printing #managerEditOverlay,
  body.manager-printing .swal2-container,
  body.manager-printing .admin-settings-overlay {
    display: none !important;
  }

  body.manager-printing .manager-print-sheet,
  body.manager-printing #managerPrintSheet,
  body.manager-printing #managerPrintSheet[hidden] {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.manager-printing .mgr-doc__letterhead {
    display: grid !important;
  }
}

.mgr-doc {
  font-family: Calibri, "Segoe UI", Arial, Helvetica, sans-serif;
  color: #1a1a1a;
  font-size: 11pt;
  line-height: 1.45;
}

.mgr-doc__letterhead {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 0 0 12px;
  border-bottom: 2.5px solid #7a3148;
}

.mgr-doc__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.mgr-doc__org {
  min-width: 0;
}

.mgr-doc__org-name {
  margin: 0;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 22pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: #1a1a1a;
  text-transform: uppercase;
}

.mgr-doc__org-sub {
  margin: 2px 0 0;
  font-size: 10pt;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a3148;
}

.mgr-doc__org-lines {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: #333;
  font-size: 9.5pt;
  line-height: 1.4;
}

.mgr-doc__mark {
  text-align: right;
  color: #4b4b4b;
  font-size: 9pt;
  line-height: 1.35;
}

.mgr-doc__mark strong {
  display: block;
  color: #7a3148;
  font-size: 8.5pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mgr-doc__title-block {
  margin: 16px 0 12px;
  text-align: center;
}

.mgr-doc__title {
  margin: 0;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 16.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1a1a;
}

.mgr-doc__subtitle {
  margin: 4px 0 0;
  font-size: 10.5pt;
  color: #4b4b4b;
}

.mgr-doc__meta {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 10pt;
}

.mgr-doc__meta th,
.mgr-doc__meta td {
  border: 1px solid #c8c8c8;
  padding: 6px 10px;
  vertical-align: top;
  text-align: left;
}

.mgr-doc__meta th {
  width: 22%;
  background: #f4f1f2;
  font-weight: 700;
  color: #333;
}

.mgr-doc__section {
  margin: 0 0 16px;
  page-break-inside: avoid;
}

.mgr-doc__section--break {
  page-break-inside: auto;
}

.mgr-doc__h {
  margin: 0 0 8px;
  padding: 0 0 4px;
  border-bottom: 1px solid #7a3148;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 12.5pt;
  font-weight: 700;
  color: #1a1a1a;
}

.mgr-doc__note {
  margin: 0 0 8px;
  color: #444;
  font-size: 9.5pt;
}

.mgr-doc__kpis {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 4px;
}

.mgr-doc__kpis th,
.mgr-doc__kpis td {
  border: 1px solid #c8c8c8;
  padding: 8px 8px 7px;
  text-align: center;
}

.mgr-doc__kpis th {
  background: #7a3148;
  color: #fff;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.mgr-doc__kpis td {
  font-size: 13pt;
  font-weight: 700;
}

.mgr-doc table.mgr-doc__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 9.5pt;
}

.mgr-doc__table th,
.mgr-doc__table td {
  border: 1px solid #c8c8c8;
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.mgr-doc__table th {
  background: #f4f1f2;
  font-weight: 700;
  color: #2a2a2a;
  font-size: 8.5pt;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.mgr-doc__table td.num,
.mgr-doc__table th.num {
  text-align: right;
  white-space: nowrap;
}

.mgr-doc__table tbody tr:nth-child(even) {
  background: #fafafa;
}

.mgr-doc__table tfoot td {
  font-weight: 700;
  background: #f4f1f2;
}

.mgr-doc__charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.mgr-doc__chart {
  border: 1px solid #c8c8c8;
  padding: 8px;
}

.mgr-doc__chart h4 {
  margin: 0 0 6px;
  font-size: 10pt;
  text-align: center;
}

.mgr-doc__chart img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.mgr-doc__findings {
  margin: 6px 0 0;
  padding-left: 18px;
}

.mgr-doc__findings li {
  margin: 0 0 4px;
}

.mgr-doc__empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #c8c8c8;
  color: #555;
  font-style: italic;
}

.mgr-doc__sign {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.mgr-doc__sign td {
  width: 50%;
  border: 1px solid #c8c8c8;
  padding: 12px 14px 16px;
  vertical-align: top;
}

.mgr-doc__sign-label {
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a3148;
}

.mgr-doc__sign-line {
  margin-top: 28px;
  border-top: 1px solid #1a1a1a;
  padding-top: 4px;
  font-size: 9.5pt;
}

.mgr-doc__foot {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1.5px solid #7a3148;
  color: #555;
  font-size: 8.5pt;
  text-align: center;
  line-height: 1.4;
}

@media print {
  .mgr-doc__section--register {
    page-break-before: auto;
  }

  .mgr-doc__table thead {
    display: table-header-group;
  }

  .mgr-doc__table tr {
    page-break-inside: avoid;
  }
}

.admin-settings-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.admin-settings-field {
  margin: 10px 0;
  color: #1f2b16;
  font-size: 0.98rem;
}

.admin-settings-profile {
  margin-top: 10px;
}

.admin-users-list {
  margin-top: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-users-list:has(> .admin-users-table) {
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  background: #fff;
  box-shadow: var(--dt-shadow);
}

.admin-users-wrap {
  position: relative;
  min-height: 88px;
}

.admin-users-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 88px;
  color: #5f6673;
}

.admin-users-loading[hidden] {
  display: none !important;
}

.admin-users-loading--overlay {
  position: absolute;
  inset: 0;
  min-height: 100%;
  background: rgba(255, 255, 255, 0.72);
  z-index: 2;
}

.admin-users-loading__spinner {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid #d6e6c6;
  border-top-color: #c46b82;
  border-radius: 50%;
  animation: btn-spin 0.75s linear infinite;
}

.admin-users-loading__text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #5f6673;
}

@media (prefers-reduced-motion: reduce) {
  .admin-users-loading__spinner {
    animation: none;
    border-top-color: #c46b82;
  }
}

.admin-users-list > p {
  margin: 0;
  line-height: 1.6;
}

.admin-users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--dt-font);
  line-height: 1.4;
  color: #1f2b16;
}

.admin-users-table th,
.admin-users-table td {
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--dt-row-line);
}

.admin-users-table th {
  font-size: var(--dt-th-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dt-head-color);
  background: var(--dt-head-bg);
  border-bottom: 1px solid #d6e6c6;
}

.admin-users-table tbody tr {
  transition: background-color 0.15s ease;
}

.admin-users-table tbody tr:nth-child(even) td {
  background: var(--dt-row-alt);
}

.admin-users-table tbody tr:hover td {
  background: var(--dt-row-hover);
}

.admin-users-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-users-password {
  font-weight: 600;
  color: #1f2b16;
  letter-spacing: 0.02em;
  word-break: break-all;
}

.sentiment-comments-list {
  list-style: disc;
  margin: 8px 0 0;
  padding-left: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px;
}

.sentiment-comments-list li {
  color: #1f2b16;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* -------- policies page -------- */
.policies-page .policies-heading {
  text-align: center;
  padding-bottom: 8px;
}

.policies-page .policies-heading .credentials-lead {
  margin-left: auto;
  margin-right: auto;
}

.policies-page .policies-hero__kicker {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-pink, #c46b82);
}

.policies-page .policies-hero__lead {
  max-width: 52rem;
  line-height: 1.65;
  color: #4d5c42;
}

.policies-page .policies-hero .pill-list {
  margin-top: 18px;
  justify-content: flex-start;
}

.policies-page .policies-hero .pill-list span {
  background: rgba(196, 107, 130, 0.1);
  color: var(--theme-pink-dark, #c46b82);
}

/* Shared policy card surface (home Rules & Policy + policies page) */
.policy-card,
.services #homePoliciesGrid .policy-card,
.policies-page .policy-card {
  background: linear-gradient(180deg, #fffdf9 0%, #fff 52%, #fafefa 100%);
  border: 1px solid rgba(196, 107, 130, 0.2);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 18px rgba(127, 193, 66, 0.07), 0 4px 10px rgba(196, 107, 130, 0.06);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.policy-card::before,
.services #homePoliciesGrid .policy-card::before,
.policies-page .policy-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c46b82 0%, #d992a5 48%, #7fc142 100%);
  pointer-events: none;
}

.policy-card::after,
.services #homePoliciesGrid .policy-card::after,
.policies-page .policy-card::after {
  display: none;
}

.policy-card > *,
.services #homePoliciesGrid .policy-card > *,
.policies-page .policy-card > * {
  position: relative;
  z-index: 1;
}

.policy-card:hover,
.services #homePoliciesGrid .policy-card:hover,
.policies-page .policy-card:hover {
  transform: translateY(-4px);
  border-color: rgba(127, 193, 66, 0.42);
  box-shadow: 0 10px 26px rgba(127, 193, 66, 0.1), 0 6px 14px rgba(196, 107, 130, 0.08);
  background: linear-gradient(180deg, #fffdf9 0%, #fff 52%, #fafefa 100%);
  color: inherit;
  cursor: default;
}

.policy-card__icon-wrap,
.policies-page .policy-card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 1.35rem;
  background: linear-gradient(145deg, rgba(196, 107, 130, 0.14), rgba(127, 193, 66, 0.16));
  color: var(--theme-pink, #c46b82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.policy-card__icon-wrap i,
.policies-page .policy-card__icon-wrap i,
.services .policy-card__icon-wrap i {
  color: inherit !important;
  font-size: inherit !important;
  -webkit-text-fill-color: inherit;
}

.policy-card h3,
.services #homePoliciesGrid .policy-card h3,
.policies-page .policy-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2f461f !important;
  -webkit-text-fill-color: #2f461f;
}

.policy-card p,
.services #homePoliciesGrid .policy-card p,
.policies-page .policy-card p {
  margin: 0 0 10px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #5f6673 !important;
  -webkit-text-fill-color: #5f6673;
}

.policy-card p:last-child,
.services #homePoliciesGrid .policy-card p:last-child,
.policies-page .policy-card p:last-child {
  margin-bottom: 0;
}

.policies-page .policy-card__muted {
  font-weight: 600;
  color: #46543c;
}

.services #homePoliciesGrid {
  align-content: start;
}

.services #homePoliciesGrid .policy-card:hover h3,
.services #homePoliciesGrid .policy-card:hover p,
.services #homePoliciesGrid .policy-card:hover i,
.services #homePoliciesGrid .policy-card:hover .policy-card__icon-wrap {
  color: inherit !important;
  -webkit-text-fill-color: inherit;
}

.policies-page .policies-detail-wrap {
  padding-top: 8px;
  padding-bottom: 36px;
}

.policies-page .policies-detail-intro {
  text-align: center;
  margin-bottom: 18px;
}

.policies-page .policies-detail-intro .credentials-lead {
  margin-left: auto;
  margin-right: auto;
}

.policies-page .policies-pool-grid {
  margin-top: 4px;
}

.policies-page .policy-highlight-card__text {
  margin-bottom: 12px;
  line-height: 1.58;
}

.policies-page .policy-highlight-list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  color: #5f6673;
}

.policies-page .policy-highlight-list li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.policies-page .policy-highlight-list li:last-child {
  margin-bottom: 0;
}

.policies-page .policy-highlight-list--compact {
  margin-bottom: 16px;
}

.policies-page .policy-highlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* -------- pink theme override -------- */
:root {
  --theme-pink: #c46b82;
  --theme-pink-dark: #c46b82;
  --theme-pink-soft: #c46b82;
}

.primary-btn,
.book input:nth-last-child(1),
.newsletter .container,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google),
.subpage header ul li a.primary-btn,
.admin-save-btn {
  background: var(--theme-pink) !important;
  color: var(--text-on-dark) !important;
}

header ul li a:hover,
body.subpage header ul li a[href^="#section-"].active:not(.admin-nav-dropdown-item),
body.subpage header ul li#adminAuthNav > a#adminSettingsToggle.active,
body.subpage header ul li#staffAuthNav > a#staffSettingsToggle.active,
.subpage header ul li a.active:not(.admin-nav-dropdown-item) {
  color: var(--theme-pink) !important;
}

.rooms .heading .rooms-heading-kicker,
.rooms h3,
.rooms .items .text .rate i,
.rooms .heading .rooms-explore-link,
.news i,
.services i,
.counter hr,
footer i,
.subpage .kpi h4 {
  color: var(--theme-pink) !important;
}

.rooms .heading h2 {
  color: var(--theme-pink) !important;
}

.owl-carousel1 .owl-nav .owl-prev,
.owl-carousel1 .owl-nav .owl-next,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next,
.gallery .owl-gallery.owl-theme .owl-nav .owl-prev,
.gallery .owl-gallery.owl-theme .owl-nav .owl-next {
  background: var(--theme-pink) !important;
  color: var(--text-on-dark) !important;
}

.owl-carousel1 .owl-nav .owl-prev i,
.owl-carousel1 .owl-nav .owl-next i,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev i,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next i,
.gallery .owl-gallery.owl-theme .owl-nav .owl-prev i,
.gallery .owl-gallery.owl-theme .owl-nav .owl-next i {
  color: var(--text-on-dark) !important;
}

.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev:hover,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next:hover,
.gallery .owl-gallery.owl-theme .owl-nav .owl-prev:hover,
.gallery .owl-gallery.owl-theme .owl-nav .owl-next:hover,
.services .box:hover,
.subpage .btn:hover,
.admin-save-btn:hover {
  background: var(--theme-pink-dark) !important;
  color: var(--text-on-dark) !important;
}

.gallery .img::after {
  background: rgba(196, 107, 130, 0.82) !important;
}

.subpage .btn--outline {
  border-color: var(--theme-pink) !important;
}

.subpage .password-field__toggle:hover {
  border-color: var(--theme-pink) !important;
  color: var(--theme-pink-dark) !important;
}

/* Outline class still uses the pink fill — white labels, same as other pink buttons */
.subpage .btn.btn--outline,
.subpage .btn.btn--outline:link,
.subpage .btn.btn--outline:visited,
.subpage .btn.btn--outline:hover,
.subpage .btn.btn--outline:active,
.subpage .btn.btn--outline:focus,
.subpage .btn.btn--outline:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}

.subpage .btn.btn--outline *,
.subpage .btn.btn--outline *::before,
.subpage .btn.btn--outline *::after {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.subpage input:not(.swal2-input):not(.swal2-file):focus,
.subpage textarea:not(.swal2-textarea):focus,
.subpage select:not(.swal2-select):focus,
.subpage .password-field__toggle:focus-visible,
.rooms .owl-carousel1.owl-theme .owl-nav button.owl-prev:focus-visible,
.rooms .owl-carousel1.owl-theme .owl-nav button.owl-next:focus-visible {
  border-color: var(--theme-pink) !important;
  outline-color: var(--theme-pink) !important;
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.24) !important;
}

@media only screen and (max-width: 1100px) {
  header #menulist {
    background: #ffffff !important;
  }
}

/* -------- Pink-filled buttons & controls: white text site-wide -------- */
.primary-btn,
.primary-btn:link,
.primary-btn:visited,
.primary-btn:hover,
.primary-btn:active,
.primary-btn:focus,
.primary-btn:focus-visible,
a.primary-btn,
header ul li a.primary-btn,
header ul li a.primary-btn:hover,
header ul li a.primary-btn:active,
header ul li a.primary-btn:focus-visible,
.subpage header ul li a.primary-btn,
.subpage header ul li a.primary-btn:hover,
.subpage header ul li a.primary-btn:active,
.subpage header ul li a.primary-btn:focus-visible,
.subpage header ul li a.primary-btn.active,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google),
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google):hover,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google):active,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google):focus,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google):focus-visible,
.admin-save-btn,
.admin-save-btn:hover,
.admin-save-btn:active,
.admin-save-btn:focus,
.admin-save-btn:focus-visible,
.book input[type="submit"],
.book input:nth-last-child(1),
.subpage .booking-carousel__arrow:not(:disabled),
.subpage .booking-carousel__arrow:not(:disabled):hover,
.subpage .booking-carousel__arrow:not(:disabled):active,
.subpage .booking-carousel__arrow:not(:disabled):focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) i,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) .fa,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) svg,
.primary-btn i,
.primary-btn .fa,
header ul li a.primary-btn i {
  color: #fff !important;
  fill: #fff !important;
}

/* Nested content inside pink buttons (spans, strong, links) — white on pink */
.primary-btn *,
.primary-btn *::before,
.primary-btn *::after,
header ul li a.primary-btn *,
header ul li a.primary-btn *::before,
header ul li a.primary-btn *::after,
.subpage header ul li a.primary-btn *,
.subpage header ul li a.primary-btn *::before,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) *,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) *::before,
.subpage .btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) *::after,
.subpage a.btn:not(.btn--outline):not(.btn--facebook):not(.btn--google),
.subpage a.btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) *,
.subpage a.btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) *::before,
.subpage a.btn:not(.btn--outline):not(.btn--facebook):not(.btn--google) *::after,
.admin-save-btn *,
.admin-save-btn *::before,
.admin-save-btn *::after,
.book-flow-btn-main *,
.book-flow-btn-main *::before,
.book-flow-btn-main *::after,
.subpage .booking-carousel__arrow:not(:disabled) *,
.subpage .booking-carousel__arrow:not(:disabled) *::before,
.owl-carousel1 .owl-nav .owl-prev *,
.owl-carousel1 .owl-nav .owl-next *,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev *,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next *,
.gallery .owl-gallery.owl-theme .owl-nav .owl-prev *,
.gallery .owl-gallery.owl-theme .owl-nav .owl-next * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

.rooms .owl-carousel1.owl-theme .owl-nav .owl-prev i,
.rooms .owl-carousel1.owl-theme .owl-nav .owl-next i {
  color: #fff !important;
}

/* Service tiles turn pink on hover — override global .services i pink */
.services .box:hover,
.services .box:hover .text,
.services .box:hover .text h3,
.services .box:hover .text p,
.services .box:hover .text i,
.services .box:hover i,
.services .box:hover h3 {
  color: var(--text-on-dark) !important;
  -webkit-text-fill-color: var(--text-on-dark);
}

/* -------- Admin dashboard: pink solid buttons — white text on click & nested content -------- */
.admin-app .btn:not(.btn--outline),
.admin-app .btn:not(.btn--outline):link,
.admin-app .btn:not(.btn--outline):visited,
.admin-app .btn:not(.btn--outline):hover,
.admin-app .btn:not(.btn--outline):active,
.admin-app .btn:not(.btn--outline):focus,
.admin-app .btn:not(.btn--outline):focus-visible,
.admin-app a.btn:not(.btn--outline),
.admin-app a.btn:not(.btn--outline):link,
.admin-app a.btn:not(.btn--outline):visited,
.admin-app a.btn:not(.btn--outline):hover,
.admin-app a.btn:not(.btn--outline):active,
.admin-app a.btn:not(.btn--outline):focus,
.admin-app a.btn:not(.btn--outline):focus-visible,
.admin-app .admin-save-btn,
.admin-app .admin-save-btn:hover,
.admin-app .admin-save-btn:active,
.admin-app .admin-save-btn:focus,
.admin-app .admin-save-btn:focus-visible,
.admin-app button[type="submit"].btn:not(.btn--outline),
.admin-app button[type="submit"].btn:not(.btn--outline):active,
.admin-app input[type="submit"].btn,
.admin-app input[type="submit"].btn:active {
  color: var(--text-on-dark) !important;
  -webkit-text-fill-color: var(--text-on-dark) !important;
  caret-color: var(--text-on-dark);
}

.admin-app .btn:not(.btn--outline) *,
.admin-app .btn:not(.btn--outline) *::before,
.admin-app .btn:not(.btn--outline) *::after,
.admin-app a.btn:not(.btn--outline) *,
.admin-app a.btn:not(.btn--outline) *::before,
.admin-app a.btn:not(.btn--outline) *::after,
.admin-app .admin-save-btn *,
.admin-app .admin-save-btn *::before,
.admin-app .admin-save-btn *::after {
  color: var(--text-on-dark) !important;
  -webkit-text-fill-color: var(--text-on-dark) !important;
}

/* Beat header nav link hover/active pink inside admin main (e.g. link-styled controls in cards) */
.admin-app main a.btn:not(.btn--outline):hover,
.admin-app main a.btn:not(.btn--outline):active,
.admin-app main a.btn:not(.btn--outline):focus,
.admin-app main button.btn:not(.btn--outline):hover,
.admin-app main button.btn:not(.btn--outline):active,
.admin-app main button.btn:not(.btn--outline):focus {
  color: var(--text-on-dark) !important;
  -webkit-text-fill-color: var(--text-on-dark) !important;
}

/* -------- Branded pink header: light nav text on pink bar -------- */
header ul li a:not(.primary-btn):not(.admin-nav-dropdown-item):not(.staff-access-btn):not(.role-login-trigger) {
  color: var(--text-on-dark) !important;
}

body[data-staff-portal="manager"] header ul li .admin-nav-dropdown-toggle,
body.admin-app header ul li .admin-nav-dropdown-toggle {
  color: var(--text-on-dark) !important;
  -webkit-text-fill-color: var(--text-on-dark) !important;
}

body[data-staff-portal="manager"] header ul li .admin-nav-dropdown-toggle:hover,
body[data-staff-portal="manager"] header ul li .admin-nav-dropdown-toggle:focus-visible,
body[data-staff-portal="manager"] header ul li .admin-nav-dropdown-toggle.active,
body[data-staff-portal="manager"] .admin-nav-dropdown.is-open .admin-nav-dropdown-toggle,
body.admin-app header ul li .admin-nav-dropdown-toggle:hover,
body.admin-app header ul li .admin-nav-dropdown-toggle:focus-visible,
body.admin-app header ul li .admin-nav-dropdown-toggle.active,
body.admin-app .admin-nav-dropdown.is-open .admin-nav-dropdown-toggle {
  color: var(--brand-ink) !important;
  -webkit-text-fill-color: var(--brand-ink) !important;
  background: #ffffff !important;
}

header ul li a:not(.primary-btn):not(.admin-nav-dropdown-item):not(.staff-access-btn):not(.role-login-trigger):hover {
  color: var(--text-on-light) !important;
  background: #ffffff !important;
  border-bottom-color: transparent !important;
}

header ul li a.admin-nav-dropdown-item,
header ul li a.admin-nav-dropdown-item:link,
header ul li a.admin-nav-dropdown-item:visited {
  color: #1f2b16 !important;
  -webkit-text-fill-color: #1f2b16 !important;
  background: transparent !important;
  box-shadow: none !important;
}

header ul li a.admin-nav-dropdown-item:hover,
header ul li a.admin-nav-dropdown-item:focus-visible {
  color: #1f2b16 !important;
  -webkit-text-fill-color: #1f2b16 !important;
  background: rgba(196, 107, 130, 0.28) !important;
}

header ul li a.admin-nav-dropdown-item.active,
body.subpage header ul li a.admin-nav-dropdown-item.active,
body.subpage header ul li a.admin-nav-dropdown-item[href^="#section-"].active {
  color: #1f2b16 !important;
  -webkit-text-fill-color: #1f2b16 !important;
  background: rgba(196, 107, 130, 0.28) !important;
}

header ul li a.primary-btn,
header ul li a.primary-btn:link,
header ul li a.primary-btn:visited,
header ul li a.primary-btn:hover,
header ul li a.primary-btn:active,
header ul li a.primary-btn:focus,
header ul li a.primary-btn:focus-visible,
.subpage header ul li a.primary-btn,
.subpage header ul li a.primary-btn:hover,
.subpage header ul li a.primary-btn:active,
.subpage header ul li a.primary-btn.active {
  background: #fff !important;
  color: var(--brand-ink) !important;
  -webkit-text-fill-color: var(--brand-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.subpage header ul li a.active:not(.primary-btn):not(.admin-nav-dropdown-item),
body.subpage header ul li a[href^="#section-"].active:not(.admin-nav-dropdown-item),
body.subpage header ul li#adminAuthNav > a#adminSettingsToggle.active,
body.subpage header ul li#staffAuthNav > a#staffSettingsToggle.active {
  color: var(--brand-ink) !important;
  background: #ffffff !important;
}

/* Admin nav dropdown panel links — never inherit header white link styling */
header .admin-nav-dropdown-menu a.admin-nav-dropdown-item,
header .admin-nav-dropdown-menu a.admin-nav-dropdown-item:link,
header .admin-nav-dropdown-menu a.admin-nav-dropdown-item:visited,
body.subpage header .admin-nav-dropdown-menu a.admin-nav-dropdown-item,
body.subpage header .admin-nav-dropdown-menu a.admin-nav-dropdown-item[href^="#section-"],
body.subpage header .admin-nav-dropdown-menu a.admin-nav-dropdown-item[href^="#section-"]:link,
body.subpage header .admin-nav-dropdown-menu a.admin-nav-dropdown-item[href^="#section-"]:visited {
  color: #1f2b16 !important;
  -webkit-text-fill-color: #1f2b16 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

header .admin-nav-dropdown-menu a.admin-nav-dropdown-item:hover,
header .admin-nav-dropdown-menu a.admin-nav-dropdown-item:focus-visible,
body.subpage header .admin-nav-dropdown-menu a.admin-nav-dropdown-item[href^="#section-"]:hover,
body.subpage header .admin-nav-dropdown-menu a.admin-nav-dropdown-item[href^="#section-"]:focus-visible {
  color: #1f2b16 !important;
  -webkit-text-fill-color: #1f2b16 !important;
  background: rgba(196, 107, 130, 0.28) !important;
}

header .admin-nav-dropdown-menu a.admin-nav-dropdown-item.active,
body.subpage header .admin-nav-dropdown-menu a.admin-nav-dropdown-item.active,
body.subpage header .admin-nav-dropdown-menu a.admin-nav-dropdown-item[href^="#section-"].active {
  color: #1f2b16 !important;
  -webkit-text-fill-color: #1f2b16 !important;
  background: rgba(196, 107, 130, 0.28) !important;
}

@media only screen and (max-width: 1100px) {
  header #menulist li a:not(.primary-btn) {
    color: var(--text-on-light) !important;
  }

  header #menulist li a.primary-btn {
    background: var(--header-pink) !important;
    color: var(--text-on-dark) !important;
    -webkit-text-fill-color: var(--text-on-dark) !important;
  }

  body[data-staff-portal="manager"] header .admin-nav-dropdown-menu a.admin-nav-dropdown-item,
  body[data-staff-portal="manager"] header .admin-nav-dropdown-menu a.admin-nav-dropdown-item:link,
  body[data-staff-portal="manager"] header .admin-nav-dropdown-menu a.admin-nav-dropdown-item:visited,
  body[data-staff-portal="manager"] header .admin-nav-dropdown-menu a.admin-nav-dropdown-item:hover,
  body[data-staff-portal="manager"] header .admin-nav-dropdown-menu a.admin-nav-dropdown-item:focus-visible,
  body[data-staff-portal="manager"] header .admin-nav-dropdown-menu a.admin-nav-dropdown-item.active {
    white-space: normal !important;
    padding: 0.55rem 1rem 0.55rem 1.75rem !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
  }
}

/* -------- Site typography (Home + subpages use Poppins) -------- */
body:not(.subpage),
body:not(.subpage) h1,
body:not(.subpage) h2,
body:not(.subpage) h3,
body:not(.subpage) h4,
body:not(.subpage) .heading h2,
body:not(.subpage) .home,
body:not(.subpage) .home .hero-title,
body:not(.subpage) .home .hero-title__brand,
body:not(.subpage) .home .hero-title__suffix,
body:not(.subpage) .home .hero-title--single,
body:not(.subpage) .home .hero-kicker,
body:not(.subpage) .home .hero-tagline,
body:not(.subpage) .home .text .primary-btn,
body:not(.subpage) .home .text .secondary-btn,
body:not(.subpage) header,
body:not(.subpage) header ul li a,
body:not(.subpage) button,
body:not(.subpage) input,
body:not(.subpage) select,
body:not(.subpage) textarea {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
}

body.subpage {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #111111;
}

body.subpage h1,
body.subpage h2,
body.subpage h3,
body.subpage h4,
body.subpage .section-title,
body.subpage .appointments-strip__title {
  font-family: "Poppins", sans-serif;
  color: #111111;
  line-height: 1.3;
  font-weight: 600;
}

body.subpage h1,
body.subpage .hero h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
}

body.subpage h2,
body.subpage .section-title {
  font-size: 1.35rem;
}

body.subpage h3,
body.subpage .card h3 {
  font-size: 1.125rem;
}

body.subpage p,
body.subpage li,
body.subpage label,
body.subpage input:not(.swal2-input):not(.swal2-file),
body.subpage select:not(.swal2-select),
body.subpage textarea:not(.swal2-textarea),
body.subpage .note,
body.subpage .auth-lead,
body.subpage .book-flow__panel-lead,
body.subpage .booking-form-hint,
body.subpage .appointments-strip__lead {
  font-size: 0.9375rem;
  color: #111111;
}

/* Footer copyright: stay white + centered (overrides body.subpage p) */
footer,
footer p,
footer label,
footer li,
footer .box,
footer .container,
.subpage footer,
.subpage footer p,
.subpage footer .container,
body.subpage footer,
body.subpage footer p,
body.subpage footer .container,
body.subpage footer label,
body.subpage footer li,
.legal,
.legal p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.subpage footer,
.subpage footer .container,
.subpage footer p,
body.subpage footer,
body.subpage footer .container,
body.subpage footer p,
.legal,
.legal p {
  text-align: center !important;
}

body.subpage .hero p {
  color: #333333;
  max-width: 42rem;
}

body.subpage .card p,
body.subpage .card li {
  color: #111111;
}

body.subpage a:not(.btn):not(.primary-btn):not(.book-flow-btn-main) {
  color: #111111;
  text-decoration: none;
}

body.subpage a:not(.btn):not(.primary-btn):not(.book-flow-btn-main):hover {
  color: #c46b82;
}

/* Guest avatars — default icons only, no profile photos */
.guest-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #111111;
  border: 1px solid rgba(17, 17, 17, 0.12);
}

.guest-avatar svg {
  width: 60%;
  height: 60%;
  fill: currentColor;
}

.guest-avatar--sm {
  width: 2rem;
  height: 2rem;
}

.guest-avatar--md {
  width: 2.5rem;
  height: 2.5rem;
}

.guest-avatar--female {
  color: var(--text-on-dark);
  background: #c46b82;
}

.guest-avatar--male {
  color: #1e40af;
  background: #eff6ff;
}

.reviews-page .reviews-give-feedback {
  display: none !important;
}

.reviews-page .reviews-empty {
  margin: 0;
  padding: 28px 18px;
  text-align: center;
  color: #7a6d76;
  font-size: 1rem;
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(196, 107, 130, 0.25);
  border-radius: 14px;
}

.reviews-page .reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}

.reviews-page .reviews-pagination[hidden] {
  display: none !important;
}

.reviews-page .reviews-pagination__page {
  min-width: 72px;
  text-align: center;
  font-size: 0.95rem;
  color: #5f6673;
  font-weight: 600;
}

.reviews-page .reviews-pagination .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.reviews-page .reviews-sentiment-card--solo {
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(180deg, #fff8fa 0%, #fde8ef 100%) !important;
  border-color: rgba(196, 107, 130, 0.28) !important;
}

.reviews-page .reviews-sentiment-split {
  display: block;
}

body.guest-review-open {
  overflow: hidden;
}

.guest-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  background: rgba(22, 18, 20, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.guest-review-overlay[hidden] {
  display: none !important;
}

.guest-review-modal {
  position: relative;
  width: min(480px, 100%);
  max-height: min(92vh, 720px);
  overflow: auto;
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdfb, #faf6f3);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 28px 70px rgba(22, 18, 20, 0.35);
  animation: guestReviewIn 0.28s ease;
}

@keyframes guestReviewIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.guest-review-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #3d3340;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.guest-review-modal__eyebrow {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c46b82;
}

.guest-review-modal__title {
  margin: 0 0 10px;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #1f1218;
}

.guest-review-modal__lede {
  margin: 0 0 18px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #5a4f57;
}

.guest-review-modal__form {
  display: grid;
  gap: 14px;
}

.guest-review-modal__form[hidden] {
  display: none !important;
}

.guest-review-modal__form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #3d3340;
}

.guest-review-modal__form textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(61, 51, 64, 0.14);
  padding: 12px 14px;
  font: inherit;
  resize: vertical;
  min-height: 110px;
  background: #fff;
}

.guest-review-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 4px;
}

.guest-review-modal__dismiss {
  border: 0;
  background: transparent;
  color: #8a8190;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guest-review-modal__dismiss:hover {
  color: #1f1218;
}

.reviews-page .reviews-give-feedback__lede {
  margin: 0 0 1.25rem;
  color: #4a5568;
  line-height: 1.55;
}

.reviews-page .reviews-give-feedback__form {
  margin: 0;
  padding: 1.25rem 1.35rem 1.1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(196, 107, 130, 0.18);
  border-radius: 14px;
}

.reviews-page .reviews-give-feedback:target {
  scroll-margin-top: 96px;
}

.reviews-page #give-feedback {
  scroll-margin-top: 96px;
}

.book-nav-user {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.book-nav-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.book-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

header #bookNavUser button.book-nav-icon-btn,
header #bookNavUser button.book-nav-appointments.book-nav-icon-btn,
header #bookNavUser button.book-nav-logout,
.subpage header #bookNavUser button.book-nav-icon-btn,
.subpage header #bookNavUser button.book-nav-appointments.book-nav-icon-btn,
.subpage header #bookNavUser button.book-nav-logout {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.subpage header #bookNavUser button.book-nav-icon-btn,
.subpage header #bookNavUser button.book-nav-appointments.book-nav-icon-btn,
.subpage header #bookNavUser button.book-nav-logout {
  border-color: #d1d5db;
  background: #f9fafb;
  color: #1f2b16;
}

header #bookNavUser button.book-nav-icon-btn:hover,
header #bookNavUser button.book-nav-icon-btn:focus-visible,
header #bookNavUser button.book-nav-appointments.book-nav-icon-btn:hover,
header #bookNavUser button.book-nav-appointments.book-nav-icon-btn:focus-visible,
header #bookNavUser button.book-nav-appointments.book-nav-icon-btn.is-active,
header #bookNavUser button.book-nav-logout:hover,
header #bookNavUser button.book-nav-logout:focus-visible,
.subpage header #bookNavUser button.book-nav-icon-btn:hover,
.subpage header #bookNavUser button.book-nav-icon-btn:focus-visible,
.subpage header #bookNavUser button.book-nav-appointments.book-nav-icon-btn:hover,
.subpage header #bookNavUser button.book-nav-appointments.book-nav-icon-btn:focus-visible,
.subpage header #bookNavUser button.book-nav-appointments.book-nav-icon-btn.is-active,
.subpage header #bookNavUser button.book-nav-logout:hover,
.subpage header #bookNavUser button.book-nav-logout:focus-visible {
  background: rgba(127, 193, 66, 0.2);
  border-color: #7fc142;
  color: #fff;
  outline: none;
}

.subpage header #bookNavUser button.book-nav-icon-btn:hover,
.subpage header #bookNavUser button.book-nav-icon-btn:focus-visible,
.subpage header #bookNavUser button.book-nav-appointments.book-nav-icon-btn:hover,
.subpage header #bookNavUser button.book-nav-appointments.book-nav-icon-btn:focus-visible,
.subpage header #bookNavUser button.book-nav-appointments.book-nav-icon-btn.is-active,
.subpage header #bookNavUser button.book-nav-logout:hover,
.subpage header #bookNavUser button.book-nav-logout:focus-visible {
  color: #1f2b16;
}

header #bookNavUser button.book-nav-icon-btn svg,
header #bookNavUser button.book-nav-logout svg {
  display: block;
  flex-shrink: 0;
}

.book-nav-profile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

button.book-nav-profile {
  border: none;
  background: transparent;
  padding: 0.2rem 0.45rem;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 999px;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

button.book-nav-profile .book-nav-greet,
button.book-nav-profile .guest-avatar {
  pointer-events: none;
}

button.book-nav-profile:hover,
button.book-nav-profile:focus-visible {
  opacity: 0.92;
  transform: translateY(-1px);
}

button.book-nav-profile:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

header .book-nav-profile:hover .book-nav-greet,
header .book-nav-profile:focus-visible .book-nav-greet {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guest-profile-modal {
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow-y: auto;
}

.guest-profile-modal__lead {
  margin: 0 0 16px;
  color: #4a5568;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.guest-profile-form {
  margin-bottom: 8px;
}

.guest-profile-email__value {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  color: #111;
  font-weight: 600;
}

.guest-profile-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: #7a8575;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guest-profile-divider::before,
.guest-profile-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(196, 107, 130, 0.18);
}

.guest-profile-oauth-note {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.45;
}

header .guest-avatar--sm {
  width: calc(2rem - (0.18rem * var(--header-progress)));
  height: calc(2rem - (0.18rem * var(--header-progress)));
}

header .book-nav-profile .book-nav-greet {
  color: rgba(255, 255, 255, 0.95);
  font-size: calc(0.875rem - (0.04rem * var(--header-progress)));
  font-weight: 600;
}

.subpage .book-nav-greet {
  color: #111111;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.subpage .booking-card__name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* -------- No text underlines site-wide -------- */
a,
a:hover,
a:focus,
a:active,
a:visited,
u,
abbr[title],
header a,
header ul li a,
header ul li a:hover,
header ul li a:focus,
header ul li a.active,
header ul li a.primary-btn,
body.subpage header ul li a,
body.subpage header ul li a:hover,
body.subpage header ul li a.active,
body.subpage header ul li a[href^="#section-"],
body.subpage header ul li a[href^="#section-"].active,
body.subpage header ul li#adminAuthNav > a,
body.subpage header ul li#staffAuthNav > a,
.auth-switch a,
.book-flow-aside a,
.note a,
.card a:not(.btn):not(.primary-btn) {
  text-decoration: none !important;
  text-underline-offset: unset !important;
  border-bottom: none !important;
  box-decoration-break: clone;
}
/*--------weather forecast (book page)---------*/
.weather-bar--top:empty,
.weather-panel--guest:empty {
  display: none;
}

.weather-bar--top {
  background:
    radial-gradient(1200px 80px at 8% 0%, rgba(127, 193, 66, 0.22), transparent 60%),
    radial-gradient(900px 90px at 92% 120%, rgba(196, 107, 130, 0.22), transparent 58%),
    linear-gradient(105deg, #fff4f7 0%, #f7fbee 48%, #fde8ef 100%);
  border-bottom: 1px solid rgba(196, 107, 130, 0.18);
  padding: 12px 0 14px;
}

.weather-bar--top .weather-widget {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
}

.weather-panel--guest {
  padding-top: 8px;
  padding-bottom: 4px;
}

.weather-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(127, 193, 66, 0.16);
  color: #4f8a1e;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.weather-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fc142;
  box-shadow: 0 0 0 0 rgba(127, 193, 66, 0.7);
  animation: weather-live-pulse 1.8s ease-out infinite;
}

@keyframes weather-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(127, 193, 66, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(127, 193, 66, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(127, 193, 66, 0);
  }
}

.weather-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7fc142;
}

.weather-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.weather-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 250, 0.88));
  border: 1px solid rgba(196, 107, 130, 0.2);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow:
    0 12px 32px rgba(196, 107, 130, 0.1),
    0 2px 8px rgba(127, 193, 66, 0.08);
}

.weather-widget--compact {
  gap: 12px 16px;
  padding: 12px 16px;
  border-radius: 18px;
  backdrop-filter: blur(10px);
}

.weather-widget__now {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 168px;
}

.weather-widget__now .weather-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fde8ef 0%, #eef8e2 100%);
  color: #c46b82;
  box-shadow: inset 0 0 0 1px rgba(196, 107, 130, 0.12);
}

.weather-widget__now .weather-icon {
  width: 30px;
  height: 30px;
}

.weather-widget--compact .weather-widget__now .weather-icon-wrap {
  width: 46px;
  height: 46px;
  color: #7fc142;
}

.weather-widget--compact .weather-widget__now .weather-icon {
  width: 26px;
  height: 26px;
}

.weather-widget__now-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.weather-widget__temp {
  margin: 2px 0 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: #c46b82;
  font-family: "Poppins", "Segoe UI", sans-serif;
}

.weather-widget--compact .weather-widget__temp {
  font-size: 1.4rem;
}

.weather-widget__label,
.weather-widget__place,
.weather-widget__status {
  margin: 0;
  font-size: 0.84rem;
  color: #5a4a52;
  line-height: 1.35;
}

.weather-widget__place {
  color: #7a8f4e;
  font-weight: 600;
}

.weather-widget__days {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.weather-day {
  flex: 1 1 68px;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f7fbee 100%);
  border: 1px solid rgba(127, 193, 66, 0.22);
  text-align: center;
}

.weather-day--rain {
  background: linear-gradient(180deg, #fff 0%, #fde8ef 100%);
  border-color: rgba(196, 107, 130, 0.22);
}

.weather-day__name {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c46b82;
}

.weather-day .weather-icon-wrap {
  color: #7fc142;
}

.weather-day--rain .weather-icon-wrap {
  color: #c46b82;
}

.weather-day .weather-icon {
  width: 20px;
  height: 20px;
}

.weather-day__temps {
  font-size: 0.76rem;
  font-weight: 600;
  color: #5a4a52;
}

.weather-day__temps em {
  font-style: normal;
  color: #c46b82;
}

.weather-widget__status {
  margin: 0;
  width: auto;
  flex: 1;
  text-align: left;
  color: #5a4a52;
}

@media (max-width: 768px) {
  .weather-widget {
    flex-direction: column;
    align-items: stretch;
  }

  .weather-widget__days {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .weather-day {
    flex: none;
    min-width: 0;
    width: 100%;
  }

  .weather-bar--top .weather-widget {
    margin: 0 12px;
    width: calc(100% - 24px);
  }
}

/*--------weather modal (live Mataasnakahoy forecast)---------*/
.weather-widget--tap {
  width: 100%;
  text-align: left;
  cursor: pointer;
  appearance: none;
  font: inherit;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.weather-widget--tap:hover,
.weather-widget--tap:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(127, 193, 66, 0.45);
  box-shadow:
    0 16px 34px rgba(196, 107, 130, 0.16),
    0 4px 12px rgba(127, 193, 66, 0.12);
  outline: none;
}

.weather-widget__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #c46b82 0%, #d4899a 58%, #7fc142 140%);
  white-space: nowrap;
  width: auto;
}

.weather-widget--compact .weather-widget__hint {
  margin-top: 0;
  align-self: center;
}

.weather-widget--loading .weather-widget__hint,
.weather-widget--error .weather-widget__hint {
  margin-left: 0;
}

body.weather-modal-open {
  overflow: hidden;
}

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

.weather-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.weather-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(48, 28, 36, 0.48);
  backdrop-filter: blur(4px);
}

.weather-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(88vh, 780px);
  overflow: auto;
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(127, 193, 66, 0.16), transparent 58%),
    radial-gradient(380px 180px at 0% 8%, rgba(196, 107, 130, 0.18), transparent 55%),
    linear-gradient(180deg, #fff8fa 0%, #ffffff 42%, #f6fbee 100%);
  border: 1px solid rgba(196, 107, 130, 0.16);
  border-radius: 24px;
  padding: 22px 20px 18px;
  box-shadow: 0 28px 70px rgba(61, 28, 40, 0.28);
}

.weather-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  color: #c46b82;
  box-shadow: 0 2px 8px rgba(196, 107, 130, 0.16);
}

.weather-modal__close:hover,
.weather-modal__close:focus-visible {
  background: #c46b82;
  color: #fff;
  outline: none;
}

.weather-modal header,
.weather-modal__header {
  position: static;
  inset: auto;
  top: auto;
  left: auto;
  width: auto;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0 40px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  z-index: auto;
  overflow: visible;
  line-height: 1.35;
}

.weather-modal__header .weather-live {
  margin-bottom: 8px;
}

.weather-modal__title {
  margin: 6px 0 0;
  font-size: 1.5rem;
  color: #3d3340;
}

.weather-modal__place {
  margin: 4px 0 0;
  color: #c46b82;
  font-weight: 600;
}

.weather-modal__body {
  margin-top: 16px;
}

.weather-modal__status {
  margin: 8px 0;
  color: #6b5b63;
}

.weather-modal-now {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: center;
  overflow: hidden;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #c46b82 0%, #d4899a 46%, #8ec85a 130%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(196, 107, 130, 0.28);
}

.weather-modal-now::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -36px;
  top: -48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.weather-modal-now .weather-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  z-index: 1;
}

.weather-modal-now .weather-icon {
  width: 34px;
  height: 34px;
}

.weather-modal-now__copy {
  z-index: 1;
  min-width: 0;
}

.weather-modal-now .weather-live {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.weather-modal-now .weather-live__dot {
  background: #e8f7c8;
  box-shadow: 0 0 0 0 rgba(232, 247, 200, 0.7);
}

.weather-modal-now__temp {
  margin: 6px 0 0;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.weather-modal-now p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.92);
}

.weather-modal-now__cond {
  font-weight: 600;
}

.weather-modal-now__updated {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}

.weather-modal-now__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  z-index: 1;
}

.weather-modal-now__meta li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
}

.weather-modal-now__meta span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.weather-modal-now__meta strong {
  font-size: 0.92rem;
  color: #fff;
}

.weather-modal__section-title {
  margin: 18px 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8f4e;
}

.weather-modal-hours {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.weather-modal-hour {
  flex: 0 0 auto;
  min-width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbe9 100%);
  border: 1px solid rgba(127, 193, 66, 0.2);
  font-size: 0.74rem;
  color: #5a4a52;
}

.weather-modal-hour .weather-icon-wrap {
  color: #7fc142;
}

.weather-modal-hour strong {
  color: #c46b82;
}

.weather-modal-days {
  display: grid;
  gap: 8px;
}

.weather-modal-day {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 107, 130, 0.12);
  background: rgba(255, 255, 255, 0.78);
}

.weather-modal-day:nth-child(even) {
  background: linear-gradient(90deg, rgba(247, 251, 238, 0.95), rgba(255, 255, 255, 0.9));
  border-color: rgba(127, 193, 66, 0.18);
}

.weather-modal-day__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weather-modal-day__head .weather-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f4fbe9;
  color: #7fc142;
}

.weather-modal-day--rain .weather-icon-wrap {
  background: #fde8ef;
  color: #c46b82;
}

.weather-modal-day__head .weather-icon {
  width: 20px;
  height: 20px;
}

.weather-modal-day__head strong {
  display: block;
  font-size: 0.9rem;
  color: #3d3340;
}

.weather-modal-day__head span {
  font-size: 0.78rem;
  color: #7a6a72;
}

.weather-modal-day__temps {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.82rem;
  font-weight: 600;
}

.weather-modal-day__high {
  color: #c46b82;
}

.weather-modal-day__low {
  color: #7a8f4e;
}

.weather-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  justify-content: flex-end;
}

.weather-modal__done {
  background: #c46b82;
  color: #fff;
}

@media (max-width: 520px) {
  .weather-widget__hint {
    width: 100%;
    margin-left: 0;
  }

  .weather-modal-now {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .weather-modal-now__meta {
    grid-template-columns: 1fr;
  }
}

/* Reception walk-in room picker uses shared .book-unit-modal styles */
.reception-walkin-calendar-card .book-unit-summary {
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}

#receptionWiRoomModalHost {
  padding: 16px 20px 8px;
}

#receptionWiRoomModalError {
  margin: 0 20px 8px;
}

.reception-walkin-stay-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}

.reception-walkin-stay-bar__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
}

.reception-walkin-stay-bar__toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.reception-walkin-stay-bar__option {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.reception-walkin-stay-bar__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reception-walkin-stay-bar__option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.reception-walkin-stay-bar__option:hover span {
  color: #374151;
}

.reception-walkin-stay-bar__option input:checked + span {
  background: #fff;
  color: #c46b82;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.reception-walkin-stay-bar__option input:focus-visible + span {
  outline: 2px solid rgba(196, 107, 130, 0.45);
  outline-offset: 2px;
}

#receptionWiDayTourTime[readonly],
#bookDayTourSchedule[readonly] {
  background: #f8fafc;
  color: #374151;
  cursor: default;
}

#bookDayTourScheduleWrap {
  grid-column: 1 / -1;
}

/* Walk-in guest form: even 2-column spacing for Overnight / Day Tour */
.reception-walkin-guest-form {
  align-items: start;
}

.reception-walkin-guest-form > [data-wi="name"] { grid-area: name; }
.reception-walkin-guest-form > [data-wi="email"] { grid-area: email; }
.reception-walkin-guest-form > [data-wi="phone"] { grid-area: phone; }
.reception-walkin-guest-form > [data-wi="checkin"] { grid-area: checkin; }
.reception-walkin-guest-form > [data-wi="checkout"] { grid-area: checkout; }
.reception-walkin-guest-form > [data-wi="daytime"] { grid-area: daytime; }
.reception-walkin-guest-form > [data-wi="arrive"] { grid-area: arrive; }
.reception-walkin-guest-form > [data-wi="depart"] { grid-area: depart; }
.reception-walkin-guest-form > [data-wi="adults"] { grid-area: adults; }
.reception-walkin-guest-form > [data-wi="children"] { grid-area: children; }
.reception-walkin-guest-form > [data-wi="childrenUnder6"] { grid-area: childrenUnder6; }
.reception-walkin-guest-form > [data-wi="actions"] { grid-area: actions; }

.reception-walkin-guest-form[data-stay="overnight"] {
  grid-template-areas:
    "name email"
    "phone phone"
    "checkin checkout"
    "arrive depart"
    "adults children"
    "childrenUnder6 ."
    "actions actions";
}

.reception-walkin-guest-form[data-stay="day_tour"] {
  grid-template-areas:
    "name email"
    "phone checkin"
    "checkout daytime"
    "adults children"
    "childrenUnder6 ."
    "actions actions";
}

@media (max-width: 900px) {
  .reception-walkin-guest-form[data-stay="overnight"],
  .reception-walkin-guest-form[data-stay="day_tour"] {
    grid-template-areas:
      "name"
      "email"
      "phone"
      "checkin"
      "checkout"
      "daytime"
      "arrive"
      "depart"
      "adults"
      "children"
      "childrenUnder6"
      "actions";
  }
}

/* Compact Walk-in: tighter gaps, keep the same look */
#section-walkin.section {
  padding: 20px 0 28px;
}

#section-walkin > .card {
  margin-top: 12px;
  padding: 10px 12px;
}

#section-walkin > .reception-walkin-calendar-card {
  padding: 10px 12px;
}

#section-walkin .reception-walkin-stay-bar {
  margin: 0 0 8px;
  padding-bottom: 8px;
  gap: 8px 12px;
}

#section-walkin .reception-walkin-stay-label {
  margin: 0 0 4px;
  font-size: 0.8rem;
  line-height: 1.3;
}

#section-walkin .reception-cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr);
  gap: 8px;
  align-items: start;
}

#section-walkin .reception-cal-layout .admin-dash-cal-head {
  margin: 0 0 4px;
}

#section-walkin .reception-cal-grid.book-flow-calendar {
  flex: 1 1 auto;
  width: 100%;
  margin-top: 0;
  padding: 6px;
  box-shadow: none;
  border-radius: 12px;
}

#section-walkin .reception-cal-grid.book-flow-calendar::before,
#section-walkin .reception-cal-grid.book-flow-calendar::after {
  content: none !important;
  display: none !important;
}

#section-walkin .reception-cal-grid .book-flow-cal-weekdays {
  margin-top: 0;
  margin-bottom: 4px;
  gap: 4px;
}

#section-walkin .reception-cal-grid .book-flow-cal-grid {
  gap: 4px;
}

#section-walkin .reception-cal-grid .book-flow-cal-cell--empty,
#section-walkin .reception-cal-grid .book-flow-cal-day,
#section-walkin .reception-cal-grid .book-flow-cal-day--disabled {
  min-height: 42px;
}

#section-walkin .reception-cal-notes.admin-dash-cal-notes {
  gap: 8px;
  padding: 10px 12px;
}

#section-walkin .reception-cal-notes .admin-dash-cal-legend {
  gap: 6px;
}

#section-walkin .reception-cal-notes .admin-dash-cal-legend li {
  padding: 6px 8px;
  gap: 8px;
}

@media (min-width: 1100px) {
  #section-walkin .reception-cal-grid .book-flow-cal-cell--empty,
  #section-walkin .reception-cal-grid .book-flow-cal-day,
  #section-walkin .reception-cal-grid .book-flow-cal-day--disabled {
    min-height: 52px;
  }
}

@media (max-width: 1024px) {
  #section-walkin .reception-cal-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #section-walkin .reception-cal-notes .admin-dash-cal-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #section-walkin .reception-cal-grid .book-flow-cal-cell--empty,
  #section-walkin .reception-cal-grid .book-flow-cal-day,
  #section-walkin .reception-cal-grid .book-flow-cal-day--disabled {
    min-height: 36px;
  }

  #section-walkin .reception-cal-notes .admin-dash-cal-legend {
    grid-template-columns: 1fr;
  }
}

#section-walkin .reception-walkin-calendar-card .book-unit-summary {
  margin-top: 10px;
  padding-top: 8px;
}

#section-walkin .reception-walkin-hint {
  margin: 8px 0 0;
}

#section-walkin .reception-walkin-guest-card .section-title {
  margin: 0 0 8px;
}

#section-walkin .reception-walkin-guest-form {
  gap: 8px 12px;
}

#section-walkin .reception-walkin-guest-form label {
  display: block;
  margin: 0;
  line-height: 1.3;
}

#section-walkin .reception-walkin-guest-form input:not([type="hidden"]):not(.swal2-input),
#section-walkin .reception-walkin-guest-form select:not(.swal2-select) {
  margin-top: 4px;
  margin-bottom: 0;
}

#section-walkin .reception-walkin-guest-form select:not(.swal2-select) {
  min-height: 0;
  padding: 8px 10px;
  font-size: 0.9375rem;
}

#section-walkin .reception-walkin-guest-form > [data-wi="actions"] {
  margin-top: 2px;
}

/* Predictive Analytics styles live in css/predictive-analytics.css (pink + green only) */

/* SweetAlert confirm uses the pink fill — white label */
.swal2-confirm,
.swal2-styled.swal2-confirm {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* -------- Manager: section heading bars (pink, equal size) -------- */
#section-messages > .appointments-strip,
#section-content > .appointments-strip,
#section-manage > .appointments-strip,
#section-calendar > .appointments-strip,
#section-calendar-access > .appointments-strip,
#section-activity-logs > .appointments-strip,
#section-payments > .appointments-strip,
#section-analytics > .appointments-strip {
  margin-top: 12px;
  padding: 12px 16px;
  min-height: 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #fdf6f8 0%, #ffffff 58%, #fbf0f3 100%);
  border: 1px solid rgba(196, 107, 130, 0.28);
  box-shadow: 0 10px 28px rgba(196, 107, 130, 0.08);
}

#section-messages > .appointments-strip .appointments-strip__head,
#section-content > .appointments-strip .appointments-strip__head,
#section-manage > .appointments-strip .appointments-strip__head,
#section-calendar > .appointments-strip .appointments-strip__head,
#section-calendar-access > .appointments-strip .appointments-strip__head,
#section-activity-logs > .appointments-strip .appointments-strip__head,
#section-payments > .appointments-strip .appointments-strip__head,
#section-analytics > .appointments-strip .appointments-strip__head {
  max-width: none;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  text-align: left;
}

#section-messages > .appointments-strip .appointments-strip__title,
#section-content > .appointments-strip .appointments-strip__title,
#section-manage > .appointments-strip .appointments-strip__title,
#section-calendar > .appointments-strip .appointments-strip__title,
#section-calendar-access > .appointments-strip .appointments-strip__title,
#section-activity-logs > .appointments-strip .appointments-strip__title,
#section-payments > .appointments-strip .appointments-strip__title,
#section-analytics > .appointments-strip .appointments-strip__title {
  margin: 0;
  color: #c46b82;
}

#section-manage > .appointments-strip .btn,
#section-analytics > .appointments-strip .btn {
  margin-top: 0;
}

#section-manage > .appointments-strip input {
  margin: 0;
  min-height: 40px;
}

#section-calendar > .appointments-strip .appointments-strip__lead,
#section-calendar-access > .appointments-strip .appointments-strip__lead,
#section-activity-logs > .appointments-strip .appointments-strip__lead {
  margin-top: 4px;
  text-align: left;
}

#section-calendar > .appointments-strip {
  margin-top: 8px;
  padding: 8px 12px;
  min-height: 0;
}

#section-calendar > .appointments-strip .appointments-strip__lead {
  font-size: 0.82rem;
  line-height: 1.35;
}

#section-content .content-mgmt-tabs {
  margin-top: 10px;
}

body.admin-app #section-content > .appointments-strip {
  min-height: auto;
  padding: 10px 16px;
}

body.admin-app #section-content > .appointments-strip .appointments-strip__head {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}

body.admin-app #section-content > .appointments-strip .appointments-strip__title {
  margin: 0;
}

body.admin-app #section-content > .appointments-strip .appointments-strip__lead {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

#section-content .content-mgmt-panels .appointments-strip {
  margin-top: 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, #fdf6f8 0%, #ffffff 58%, #fbf0f3 100%);
  border: 1px solid rgba(196, 107, 130, 0.28);
  box-shadow: 0 10px 28px rgba(196, 107, 130, 0.08);
}

#section-manage .manager-messages-card {
  margin-top: 12px;
  padding: 10px 12px 12px;
  overflow: visible;
}

#section-manage .manager-messages-card::before,
#section-manage .manager-messages-card::after {
  content: none !important;
  display: none !important;
}

#section-manage .manager-messages-card:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(196, 107, 130, 0.08), 0 6px 16px rgba(127, 193, 66, 0.08);
}

#section-messages .manager-messages-card {
  margin-top: 12px;
  padding: 10px 12px 12px;
  overflow: visible;
}

#section-messages .manager-messages-card::before,
#section-messages .manager-messages-card::after {
  content: none !important;
  display: none !important;
}

#section-messages .manager-messages-card:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(196, 107, 130, 0.08), 0 6px 16px rgba(127, 193, 66, 0.08);
}

.manager-messages-list {
  margin: 0;
}

.manager-messages-empty,
.manager-messages-status {
  margin-top: 8px;
}

.manager-msg-table-wrap {
  overflow-x: auto;
  border: var(--dt-border-pink);
  border-radius: var(--dt-radius);
  background: #fff;
  box-shadow: var(--dt-shadow);
  -webkit-overflow-scrolling: touch;
}

.manager-msg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: var(--dt-font);
  color: #3d3340;
}

.manager-msg-table thead th {
  text-align: left;
  font-size: var(--dt-th-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dt-head-color-pink);
  background: var(--dt-head-bg-pink);
  border: none;
  border-bottom: 1px solid rgba(196, 107, 130, 0.16);
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
  white-space: nowrap;
}

.manager-msg-col-name {
  width: 18%;
  max-width: 180px;
}

.manager-msg-col-message {
  width: 32%;
}

.manager-msg-col-when {
  width: 140px;
  white-space: nowrap;
}

.manager-msg-col-reply {
  width: 24%;
  min-width: 160px;
}

.manager-msg-col-actions {
  width: 84px;
  text-align: center;
  white-space: nowrap;
}

.manager-reserve-table {
  table-layout: fixed;
}

.manager-reserve-col-status {
  width: 132px;
  min-width: 132px;
  max-width: 132px;
}

.manager-reserve-table .booking-status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  height: 28px;
  padding: 0 6px;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manager-reserve-table .booking-status--pending {
  background: #eef8e4;
  color: #3d6b1a;
  border: 1px solid #b7d98a;
}

.manager-reserve-col-stay {
  width: 22%;
  min-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manager-reserve-col-room {
  width: 16%;
  min-width: 130px;
}

.manager-reserve-col-key {
  width: 16%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-reserve-col-id {
  width: 54px;
  max-width: 64px;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 6px;
  padding-right: 6px;
}

.manager-reserve-col-qty {
  width: 68px;
  max-width: 72px;
  text-align: center;
  font-size: 0.7rem;
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 4px;
}

.manager-reserve-col-hall {
  width: 78px;
  max-width: 88px;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 6px;
  padding-right: 6px;
}

#section-manage .admin-pagination {
  margin-top: 10px;
}

.manager-msg-row td {
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--dt-row-line-pink);
  background: #fff;
}

.manager-msg-table tbody td {
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--dt-row-line-pink);
}

.manager-msg-table tbody tr:last-child td,
.manager-msg-row:last-child td {
  border-bottom: none;
}

.manager-msg-row {
  transition: background-color 0.15s ease;
}

.manager-msg-row:nth-child(even) td {
  background: var(--dt-row-alt-pink);
}

.manager-msg-row:hover td {
  background: var(--dt-row-hover-pink);
}

.manager-msg-customer__name {
  display: inline;
  font-size: 0.84rem;
  font-weight: 700;
  color: #3d3340;
  line-height: 1.35;
  font-family: inherit;
}

/* Keep table cells as cells — never apply inline display to <td> */
td.manager-msg-customer__name {
  display: table-cell;
}

#section-content .manager-msg-table td:first-child {
  min-width: 140px;
  width: 22%;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

#section-content .manager-msg-table td:first-child .manager-msg-customer__name {
  display: inline;
  white-space: normal;
}

.manager-msg-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fce8ee;
  color: #c46b82;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  vertical-align: middle;
}

.manager-msg-body {
  display: block;
  color: #4a4146;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.manager-msg-when {
  white-space: nowrap;
  color: #6b5660;
  font-size: 0.75rem;
  font-weight: 600;
}

.manager-msg-reply-input {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #f0c9d4;
  border-radius: 6px;
  padding: 0 8px;
  font: inherit;
  font-size: 0.78rem;
  color: #3d3340;
  background: #fff;
}

.manager-msg-actions {
  text-align: center;
}

.manager-msg-actions__btns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.manager-msg-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #f0c9d4;
  background: #fff;
  color: #c46b82;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}

.manager-msg-icon-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.manager-msg-icon-btn--send {
  background: #fce8ee;
  border-color: #e8b4c2;
}

.manager-msg-icon-btn--send:hover,
.manager-msg-icon-btn--send:focus-visible {
  outline: none;
  background: #c46b82;
  border-color: #c46b82;
  color: #fff;
}

.manager-msg-icon-btn--clear:hover,
.manager-msg-icon-btn--clear:focus-visible {
  outline: none;
  background: #fff5f8;
  border-color: #c46b82;
}

.manager-msg-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.manager-msg-icon-btn.is-loading {
  min-width: 28px;
}

.manager-msg-icon-btn.is-loading .btn-loading-label {
  display: none;
}

.manager-msg-icon-btn .btn-spinner {
  width: 12px;
  height: 12px;
  border-color: rgba(196, 107, 130, 0.25);
  border-top-color: #c46b82;
}

.manager-msg-icon-tip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 6px;
  background: #3d3340;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.manager-msg-icon-btn:hover .manager-msg-icon-tip,
.manager-msg-icon-btn:focus-visible .manager-msg-icon-tip {
  opacity: 1;
}

@media (max-width: 800px) {
  .manager-msg-body {
    max-width: 220px;
  }

  .manager-msg-icon-tip {
    display: none;
  }
}

/* -------- Manager: Recommendations (pink accent, 2-up cards fill remaining height) -------- */
body.subpage[data-staff-portal="manager"]:has(#section-recommendations:not([hidden])) {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.subpage[data-staff-portal="manager"]:has(#section-recommendations:not([hidden])) > main.container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.subpage[data-staff-portal="manager"]:has(#section-recommendations:not([hidden])) > footer {
  flex-shrink: 0;
  margin-top: 0;
}

#section-recommendations.admin-section:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 10px 0 10px;
}

#section-recommendations .manager-rec-strip {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 12px 14px 12px;
  background: linear-gradient(180deg, #fdf6f8 0%, #ffffff 58%, #fbf0f3 100%);
  border: 1px solid rgba(196, 107, 130, 0.28);
  box-shadow: 0 10px 28px rgba(196, 107, 130, 0.08);
}

#section-recommendations .manager-rec-strip .appointments-strip__head {
  flex: 0 0 auto;
  max-width: none;
  margin: 0 0 10px;
  text-align: left;
}

#section-recommendations .manager-rec-strip .appointments-strip__title {
  margin: 0;
  color: #c46b82;
}

#section-recommendations .manager-rec-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 8px;
}

#section-recommendations .manager-rec-panel::before,
#section-recommendations .manager-rec-panel::after {
  content: none !important;
  display: none !important;
}

#section-recommendations .manager-rec-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  gap: 12px;
  align-items: stretch;
  align-content: stretch;
  min-height: 0;
}

#section-recommendations .manager-rec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  min-height: 0;
  height: 100%;
  padding: 16px 18px 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, #fffafb 0%, #fff 62%);
  border: 1px solid rgba(196, 107, 130, 0.22);
  box-shadow: 0 3px 8px rgba(196, 107, 130, 0.06);
  overflow: hidden;
}

#section-recommendations .manager-rec-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c46b82, #e8a4b4, #c46b82);
}

#section-recommendations .manager-rec-card__title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #c46b82;
  font-family: "Poppins", sans-serif;
}

#section-recommendations .manager-rec-card__text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #5a5160;
}

@media (max-width: 640px) {
  #section-recommendations .manager-rec-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-content: start;
    gap: 10px;
  }

  #section-recommendations .manager-rec-card {
    height: auto;
    justify-content: flex-start;
  }
}

/* -------- Manager: Guest feedback (compact rows) -------- */
.manager-feedback-panel {
  margin-top: 10px;
  padding: 10px 12px 8px;
}

.manager-feedback-panel::before,
.manager-feedback-panel::after {
  content: none !important;
  display: none !important;
}

.manager-feedback-panel__title {
  margin: 0 0 2px !important;
  color: #c46b82 !important;
  font-size: 1.05rem;
}

.manager-feedback-panel__lead {
  margin: 0 0 6px;
  color: #5f6673;
  line-height: 1.3;
  font-size: 0.82rem;
}

.manager-feedback-list {
  display: grid;
  gap: 4px;
  margin: 0;
}

.manager-feedback-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(160deg, #fffafb 0%, #ffffff 62%);
  border: 1px solid rgba(196, 107, 130, 0.18);
  box-shadow: none;
}

.manager-feedback-card__img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(143, 207, 99, 0.4);
  background: #f7faf3;
  flex-shrink: 0;
}

.manager-feedback-card__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.manager-feedback-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 8px;
}

.manager-feedback-card__name {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 650;
  color: #3d3340;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Poppins", sans-serif;
}

.manager-feedback-card__stars {
  margin: 0 !important;
  margin-bottom: 0 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.4px;
  line-height: 1;
  white-space: nowrap;
  color: #c46b82;
}

.manager-feedback-card__when {
  font-size: 0.7rem;
  color: #8a8190;
  white-space: nowrap;
  justify-self: end;
}

.manager-feedback-card__comment {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #5a5160;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop: avatar | name | stars | comment | date — no stretched name column */
@media (min-width: 721px) {
  .manager-feedback-card {
    grid-template-columns: 32px auto auto minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
  }

  .manager-feedback-card__body,
  .manager-feedback-card__top {
    display: contents;
  }

  .manager-feedback-card__img { order: 0; }
  .manager-feedback-card__name { order: 1; max-width: 220px; }
  .manager-feedback-card__stars { order: 2; }
  .manager-feedback-card__comment { order: 3; }
  .manager-feedback-card__when { order: 4; }

  .manager-feedback-card__comment {
    -webkit-line-clamp: unset;
    display: block;
  }
}

@media (max-width: 720px) {
  .manager-feedback-card__top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name when"
      "stars stars";
    gap: 2px 8px;
  }

  .manager-feedback-card__name { grid-area: name; }
  .manager-feedback-card__stars { grid-area: stars; }
  .manager-feedback-card__when { grid-area: when; }

  .manager-feedback-card__comment {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* -------- Manager: Calendar (compact, legend-matched) -------- */
#section-calendar .manager-cal-panel,
#section-calendar-access .manager-cal-panel {
  margin-top: 8px;
  padding: 8px 10px 10px;
}

#section-calendar .manager-cal-panel::before,
#section-calendar .manager-cal-panel::after,
#section-calendar-access .manager-cal-panel::before,
#section-calendar-access .manager-cal-panel::after {
  content: none !important;
  display: none !important;
}

.manager-cal-toolbar {
  display: grid;
  gap: 6px;
  margin-bottom: 6px;
}

.manager-cal-head {
  margin: 0 0 4px;
  max-width: none;
}

.manager-cal-head .book-flow-cal-nav {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.manager-cal-head .book-flow-cal-month {
  font-size: 0.92rem;
  margin: 0;
}

.manager-cal-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdf6f8 0%, #ffffff 100%);
  border: 1px solid rgba(196, 107, 130, 0.18);
}

.manager-cal-selected__info {
  margin: 0;
  color: #5f6673;
  font-size: 0.82rem;
  line-height: 1.25;
}

.manager-cal-selected__status {
  margin-left: 6px;
  font-size: 0.76rem;
  color: #8a8190;
}

.manager-cal-actions {
  gap: 6px;
}

.manager-cal-actions .btn {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.78rem;
}

.manager-cal-actions .btn.is-loading {
  min-width: 7.25rem;
  gap: 0.4em;
}

.manager-cal-actions .btn.is-loading .btn-spinner,
#section-calendar .manager-cal-actions .btn.is-loading .btn-spinner,
#section-calendar-access .manager-cal-actions .btn.is-loading .btn-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

#section-calendar .manager-cal-layout,
#section-calendar-access .manager-cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr);
  gap: 8px;
  align-items: start;
}

#section-calendar .manager-cal-grid.book-flow-calendar,
#section-calendar-access .manager-cal-grid.book-flow-calendar {
  flex: 1 1 auto;
  width: 100%;
  margin-top: 0;
  padding: 6px;
  box-shadow: none;
  border-radius: 12px;
}

#section-calendar .manager-cal-grid::before,
#section-calendar .manager-cal-grid::after,
#section-calendar-access .manager-cal-grid::before,
#section-calendar-access .manager-cal-grid::after {
  content: none !important;
  display: none !important;
}

#section-calendar .manager-cal-grid .book-flow-cal-weekdays,
#section-calendar-access .manager-cal-grid .book-flow-cal-weekdays {
  margin-top: 0;
  margin-bottom: 4px;
  gap: 4px;
}

#section-calendar .manager-cal-grid .book-flow-cal-grid,
#section-calendar-access .manager-cal-grid .book-flow-cal-grid {
  gap: 4px;
}

#section-calendar .manager-cal-grid .book-flow-cal-cell--empty,
#section-calendar .manager-cal-grid .book-flow-cal-day,
#section-calendar .manager-cal-grid .book-flow-cal-day--disabled,
#section-calendar-access .manager-cal-grid .book-flow-cal-cell--empty,
#section-calendar-access .manager-cal-grid .book-flow-cal-day,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--disabled {
  min-height: 42px;
}

#section-calendar .manager-cal-grid .book-flow-cal-day--selected,
#section-calendar .manager-cal-grid .book-flow-cal-day--selected:hover,
#section-calendar .manager-cal-grid .book-flow-cal-day--selected:focus,
#section-calendar .manager-cal-grid .book-flow-cal-day--available.book-flow-cal-day--selected,
#section-calendar .manager-cal-grid .book-flow-cal-day--available.book-flow-cal-day--selected:hover,
#section-calendar .manager-cal-grid .book-flow-cal-day--booked.book-flow-cal-day--selected,
#section-calendar .manager-cal-grid .book-flow-cal-day--booked.book-flow-cal-day--selected:hover,
#section-calendar .manager-cal-grid .book-flow-cal-day--unavailable.book-flow-cal-day--selected,
#section-calendar .manager-cal-grid .book-flow-cal-day--unavailable.book-flow-cal-day--selected:hover,
#section-calendar .manager-cal-grid .book-flow-cal-day--manager-blocked.book-flow-cal-day--selected,
#section-calendar .manager-cal-grid .book-flow-cal-day--manager-blocked.book-flow-cal-day--selected:hover,
#section-calendar .manager-cal-grid .book-flow-cal-day--disabled.book-flow-cal-day--selected,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--selected,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--selected:hover,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--selected:focus,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--available.book-flow-cal-day--selected,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--available.book-flow-cal-day--selected:hover,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--booked.book-flow-cal-day--selected,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--booked.book-flow-cal-day--selected:hover,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--unavailable.book-flow-cal-day--selected,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--unavailable.book-flow-cal-day--selected:hover,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--manager-blocked.book-flow-cal-day--selected,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--manager-blocked.book-flow-cal-day--selected:hover,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--disabled.book-flow-cal-day--selected {
  background: linear-gradient(160deg, #dcfce7 0%, #bbf7d0 100%) !important;
  border-color: #22c55e !important;
  color: #166534 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.2);
}

#section-calendar .manager-cal-grid .book-flow-cal-day--selected .book-flow-cal-day__num,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--selected .book-flow-cal-day__num {
  color: #166534 !important;
}

#section-calendar .manager-cal-grid .book-flow-cal-day--selected .book-flow-cal-day__status,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--selected .book-flow-cal-day__status {
  color: #15803d !important;
}

#section-calendar .manager-cal-grid .book-flow-cal-day--selected .book-flow-cal-day__status--pending,
#section-calendar .manager-cal-grid .book-flow-cal-day--selected.book-flow-cal-day--pending .book-flow-cal-day__status,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--selected .book-flow-cal-day__status--pending,
#section-calendar-access .manager-cal-grid .book-flow-cal-day--selected.book-flow-cal-day--pending .book-flow-cal-day__status {
  color: #9d3d66 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-transform: none !important;
  background: none !important;
}

#section-calendar .manager-cal-notes.admin-dash-cal-notes {
  gap: 8px;
  padding: 10px 12px;
}

@media (min-width: 1100px) {
  #section-calendar .manager-cal-grid .book-flow-cal-cell--empty,
  #section-calendar .manager-cal-grid .book-flow-cal-day,
  #section-calendar .manager-cal-grid .book-flow-cal-day--disabled,
  #section-calendar-access .manager-cal-grid .book-flow-cal-cell--empty,
  #section-calendar-access .manager-cal-grid .book-flow-cal-day,
  #section-calendar-access .manager-cal-grid .book-flow-cal-day--disabled {
    min-height: 52px;
  }
}

@media (max-width: 1024px) {
  #section-calendar .manager-cal-layout,
  #section-calendar-access .manager-cal-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #section-calendar .manager-cal-notes .admin-dash-cal-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #section-calendar .manager-cal-grid .book-flow-cal-cell--empty,
  #section-calendar .manager-cal-grid .book-flow-cal-day,
  #section-calendar .manager-cal-grid .book-flow-cal-day--disabled,
  #section-calendar-access .manager-cal-grid .book-flow-cal-cell--empty,
  #section-calendar-access .manager-cal-grid .book-flow-cal-day,
  #section-calendar-access .manager-cal-grid .book-flow-cal-day--disabled {
    min-height: 36px;
  }

  #section-calendar .manager-cal-notes .admin-dash-cal-legend {
    grid-template-columns: 1fr;
  }
}

/* Pink status legend — matched to Manager Calendar screenshot */
.manager-cal-legend.calendar-legend {
  margin-top: 0;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(90, 40, 55, 0.12);
  background: #c46b82;
  gap: 8px;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(196, 107, 130, 0.22);
  list-style: none;
}

.manager-cal-legend.calendar-legend li {
  color: var(--text-on-dark);
  font-size: 0.95rem;
  line-height: 1.45;
  padding-left: 2px;
}

.manager-cal-legend.calendar-legend li strong {
  color: var(--text-on-dark);
  font-weight: 700;
}

/* -------- Manager: Appointment schedules (compact cards) -------- */
#section-calendar .manager-appt-panel {
  margin-top: 8px;
  padding: 8px 10px 10px;
}

#section-calendar .manager-appt-panel::before,
#section-calendar .manager-appt-panel::after {
  content: none !important;
  display: none !important;
}

.manager-appt-panel__head {
  margin: 0 0 8px;
}

.manager-appt-panel__title {
  margin: 0 !important;
  color: #c46b82 !important;
  font-size: 1.08rem;
}

.manager-appt-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.manager-appt-empty {
  margin: 2px 0 0 !important;
  font-size: 0.88rem;
  color: #6b7280;
}

.manager-appt-card {
  position: relative;
  margin: 0;
  padding: 10px 12px 8px;
  border-radius: 11px;
  background: linear-gradient(160deg, #fffafb 0%, #ffffff 62%);
  border: 1px solid rgba(196, 107, 130, 0.2);
  box-shadow: 0 2px 8px rgba(196, 107, 130, 0.05);
  overflow: hidden;
}

.manager-appt-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c46b82, #8fcf63, #c46b82);
}

.manager-appt-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.manager-appt-card__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: #3d3340;
  font-family: "Poppins", sans-serif;
}

.manager-appt-card .booking-status {
  margin-bottom: 0;
  padding: 3px 8px;
  font-size: 10px;
}

.manager-appt-card__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 10px;
}

.manager-appt-card__cell {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 5px 0;
  border-bottom: 1px solid rgba(196, 107, 130, 0.1);
}

.manager-appt-card__label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a8190;
}

.manager-appt-card__value {
  font-size: 0.82rem;
  font-weight: 600;
  color: #3d3340;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manager-appt-card__sub {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: #9ca3af;
}

@media (max-width: 800px) {
  .manager-appt-card__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 520px) {
  .manager-feedback-card {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 7px;
  }

  .manager-feedback-card__img {
    width: 30px;
    height: 30px;
  }

  .manager-appt-card__meta {
    grid-template-columns: 1fr;
  }

  .manager-cal-selected {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* -------- Public Reviews page (compact text + spacing) -------- */
.reviews-page .reviews-hero,
.reviews-page .hero {
  margin-top: 16px;
  padding: 36px 28px 28px;
  min-height: 168px;
}

.reviews-page .reviews-hero h1,
.reviews-page .hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
}

.reviews-page .reviews-hero p,
.reviews-page .hero p {
  margin: 0;
  max-width: 760px;
  line-height: 1.6;
  font-size: 0.9375rem;
}

.reviews-page .section {
  padding: 8px 0 0;
}

.reviews-page .section.reviews-sentiment {
  padding-bottom: 16px;
}

.reviews-page .reviews-grid,
.reviews-page .reviews-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.reviews-page .reviews-card,
.reviews-page .reviews-kpi,
.reviews-page .reviews-sentiment-card {
  padding: 10px 12px;
}

.reviews-page .reviews-card::before,
.reviews-page .reviews-card::after,
.reviews-page .reviews-kpi::before,
.reviews-page .reviews-kpi::after,
.reviews-page .reviews-sentiment-card::before,
.reviews-page .reviews-sentiment-card::after {
  content: none !important;
  display: none !important;
}

.reviews-page .reviews-card:hover,
.reviews-page .reviews-kpi:hover,
.reviews-page .reviews-sentiment-card:hover {
  transform: none;
}

.reviews-page .reviews-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
}

.reviews-page .reviews-card .review-img {
  width: 44px;
  height: 44px;
  margin: 0;
  border-width: 2px;
}

.reviews-page .reviews-card__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.reviews-page .reviews-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.reviews-page .reviews-card h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #3d3340 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviews-page .reviews-card .stars {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 1px;
  line-height: 1;
  flex-shrink: 0;
  color: #c46b82;
}

.reviews-page .reviews-card__comment {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #5f6673;
}

.reviews-page .reviews-kpi {
  text-align: center;
  display: grid;
  gap: 1px;
  align-content: center;
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.reviews-page .reviews-kpi h4 {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.15;
}

.reviews-page .reviews-kpi p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #5f6673;
}

.reviews-page .reviews-sentiment .section-title {
  margin: 2px 0 8px;
  font-size: 1.25rem;
}

.reviews-page .reviews-sentiment-split {
  gap: 8px;
  align-items: start;
}

.reviews-page .reviews-sentiment-card h3 {
  margin: 0 0 12px;
  font-size: 1.08rem;
  color: #c46b82 !important;
}

.reviews-page .reviews-sentiment .sentiment-row {
  grid-template-columns: 102px minmax(0, 1fr) 48px;
  gap: 8px;
  margin-bottom: 10px;
}

.reviews-page .reviews-sentiment .sentiment-row:last-child {
  margin-bottom: 0;
}

.reviews-page .reviews-sentiment .sentiment-row label {
  font-size: 0.95rem;
  white-space: nowrap;
}

.reviews-page .reviews-sentiment .sentiment-row strong {
  font-size: 0.95rem;
  text-align: right;
}

.reviews-page .reviews-sentiment .sentiment-bar {
  height: 8px;
}

.reviews-page .sentiment-feedback-list {
  display: grid;
  gap: 6px;
}

.reviews-page .reviews-feedback-empty {
  margin: 0;
  font-size: 0.95rem;
  color: #6b7280;
}

.reviews-page .reviews-feedback-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(160deg, #fffafb 0%, #ffffff 62%);
  border: 1px solid rgba(196, 107, 130, 0.16);
}

.reviews-page .reviews-feedback-row .review-img {
  width: 40px;
  height: 40px;
  margin: 0;
  border-width: 2px;
}

.reviews-page .reviews-feedback-row__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.reviews-page .reviews-feedback-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.reviews-page .reviews-feedback-row__name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  color: #3d3340;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviews-page .reviews-feedback-row .stars {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 1px;
  line-height: 1;
  flex-shrink: 0;
  color: #c46b82;
}

.reviews-page .reviews-feedback-row__comment {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #5f6673;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reviews-page .reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(196, 107, 130, 0.16);
}

.reviews-page .reviews-pagination__info,
.reviews-page .reviews-pagination__page {
  color: #5f6673;
  font-size: 0.9rem;
  line-height: 1.35;
}

.reviews-page .reviews-pagination__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.reviews-page .reviews-pagination .btn {
  margin-top: 0;
  padding: 6px 12px;
  font-size: 0.88rem;
  min-height: 0;
}

.reviews-page .reviews-pagination .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .reviews-page .reviews-grid,
  .reviews-page .reviews-kpi-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .reviews-page .reviews-hero,
  .reviews-page .hero {
    padding: 28px 18px 22px;
    min-height: 140px;
  }

  .reviews-page .reviews-card__top,
  .reviews-page .reviews-feedback-row__top {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .reviews-page .reviews-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .reviews-page .reviews-pagination__nav {
    justify-content: space-between;
  }
}

/* -------- Site-wide compact spacing (layout only) -------- */
.subpage .admin-section {
  margin-top: 8px;
}

.subpage .auth-card {
  padding: 18px 18px 16px;
}

.subpage .auth-gate-card {
  padding: 22px 20px 18px;
}

.subpage .auth-oauth {
  margin-top: 16px;
}

.admin-pay-table th,
.admin-pay-table td {
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
}

.reception-table th,
.reception-table td {
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
}

.manager-msg-table thead th,
.manager-msg-row td {
  padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
}

.subpage .booking-card__row {
  margin-bottom: 4px;
}

.subpage .calendar th,
.subpage .calendar td {
  padding: 8px;
}

#section-checkin .reception-checkin-card-wrap,
#section-checkout .reception-checkin-card-wrap,
#section-customer-record > .card {
  margin-top: 12px;
}

.reception-table-host {
  margin-top: 2px;
}

.admin-pagination {
  margin-top: 10px;
  padding-top: 8px;
}

.content-mgmt-tabs {
  margin-top: 12px;
}

.admin-payments-panels {
  margin-top: 0 !important;
}

.book-flow-calendar-head {
  gap: 8px;
}

.avail-legend--inline {
  margin-top: 8px;
}

.subpage .map-wrap {
  margin-top: 10px;
}

.subpage .pill-list {
  margin-top: 8px;
  gap: 8px;
}

.newsletter .newsletter-banner.flex_space {
  gap: 16px;
}

.Customer .item > i.fa-quote-right {
  margin: 0 auto 16px;
}

.Customer .customer-stars {
  margin: 0 0 16px;
}

/* -------- Facilities page: slightly more compact pink hero -------- */
.facilities-page .hero {
  margin-top: 10px;
  padding: 18px 22px 16px;
  min-height: 118px;
}

.facilities-page .hero h1 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 2.2vw, 1.95rem);
  line-height: 1.25;
}

.facilities-page .hero p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.facilities-page .hero::before {
  top: 8px;
  right: 12px;
  font-size: 1.45rem;
}

/* -------- Facilities page tabs -------- */
.facilities-tabs-section {
  padding-top: 0;
}

.facilities-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.facilities-tab {
  border: 1px solid rgba(127, 193, 66, 0.35);
  background: rgba(127, 193, 66, 0.1);
  color: #3d3340;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.facilities-tab:hover {
  border-color: rgba(196, 107, 130, 0.45);
}

.facilities-tab--active {
  background: #c46b82;
  border-color: #c46b82;
  color: #fff;
}

.facilities-tab-panel[hidden] {
  display: none !important;
}

.facilities-tab-panel .credentials-lead {
  margin: 0 0 14px;
}

/* -------- Login: Reserve Your Stay -------- */
.login-reserve {
  padding-top: 0;
}

.login-reserve-card {
  padding: 18px 18px 16px;
}

.login-reserve-card__title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #c46b82;
}

.login-reserve-card__lead,
.login-reserve-panel__note {
  margin: 0 0 14px;
  color: #5f6673;
  font-size: 0.9rem;
  line-height: 1.5;
}

.login-reserve-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.login-reserve-tab {
  border: 1px solid rgba(127, 193, 66, 0.35);
  background: rgba(127, 193, 66, 0.1);
  color: #3d3340;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.login-reserve-tab--active {
  background: #c46b82;
  border-color: #c46b82;
  color: #fff;
}

.login-reserve-stay-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 12px;
}

.login-reserve-stay-bar__label {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d3340;
  line-height: 1.2;
}

.login-reserve-stay-bar__toggle {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

.login-reserve-stay-bar__option {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(196, 107, 130, 0.3);
  background: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  color: #3d3340;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.login-reserve-stay-bar__option span {
  display: inline;
  white-space: nowrap;
  flex: 0 0 auto;
}

.login-reserve-stay-bar__option:has(input:checked) {
  background: rgba(196, 107, 130, 0.12);
  border-color: #c46b82;
  color: #c46b82;
}

/* Override .subpage input { width:100%; padding; border } so radios don't break the pills */
.login-reserve-stay-bar__option input[type="radio"],
.subpage .login-reserve-stay-bar__option input[type="radio"],
body.subpage .login-reserve-stay-bar__option input[type="radio"] {
  width: auto !important;
  min-width: 1rem;
  max-width: none;
  height: auto !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent !important;
  flex: 0 0 auto;
  accent-color: #c46b82;
}

.login-reserve-stay-bar__option input[type="radio"]:focus,
.subpage .login-reserve-stay-bar__option input[type="radio"]:focus {
  border: none !important;
  box-shadow: none !important;
  outline: 2px solid rgba(196, 107, 130, 0.45);
  outline-offset: 2px;
}

.login-reserve-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.login-reserve-form .book-date-trigger,
.login-reserve-form .book-reserve-submit {
  flex: 1 1 160px;
}

.avail-modal-stay-bar {
  margin: 0 0 10px;
}

.login-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.login-activity-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid rgba(196, 107, 130, 0.2);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.login-activity-card:hover,
.login-activity-card:focus-visible {
  border-color: #c46b82;
  box-shadow: 0 8px 20px rgba(196, 107, 130, 0.14);
  outline: none;
}

.login-activity-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
}

.login-activity-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.login-activity-card__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #c46b82;
  color: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.68rem;
  font-weight: 700;
}

.login-activity-card__body {
  display: grid;
  gap: 4px;
  padding: 12px 12px 14px;
}

.login-activity-card__type,
.login-activity-card__date {
  font-size: 0.72rem;
  font-weight: 600;
  color: #7fc142;
}

.login-activity-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d3340;
}

.login-activity-card__cta {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #c46b82;
}

.login-activity-detail {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-activity-detail[hidden] {
  display: none !important;
}

.login-activity-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(61, 51, 64, 0.45);
}

.login-activity-detail__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}

.login-activity-detail__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(196, 107, 130, 0.12);
  color: #c46b82;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.login-activity-detail__title {
  margin: 0 36px 12px 0;
  font-size: 1.15rem;
  color: #c46b82;
}

.login-activity-detail__media {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #f3f4f6;
}

.login-activity-detail__media img {
  width: 100%;
  display: block;
  max-height: 220px;
  object-fit: cover;
}

.login-activity-detail__meta {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #7fc142;
}

.login-activity-detail__desc {
  margin: 0 0 14px;
  color: #5f6673;
  font-size: 0.9rem;
  line-height: 1.55;
}

.login-activity-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-activity-detail__actions .btn {
  margin-top: 0;
  flex: 1 1 140px;
}

body.login-activity-detail-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .login-reserve-form .book-date-trigger,
  .login-reserve-form .book-reserve-submit {
    flex: 1 1 100%;
  }
}

/* -------- Calendar Access Control (admin + manager requests) -------- */
#section-calendar-access > .appointments-strip {
  margin-top: 12px;
  margin-bottom: 16px;
  min-height: 0;
  padding: 20px 16px;
}

#section-calendar-access > .appointments-strip .appointments-strip__head {
  justify-content: center;
  text-align: center;
}

#section-calendar-access > .appointments-strip .appointments-strip__title {
  width: 100%;
  text-align: center;
}

#section-calendar-access .admin-payment-feature-card,
#section-calendar .admin-payment-feature-card {
  padding: 10px 12px 12px;
}

#section-calendar .admin-payment-feature-card {
  margin-top: 8px !important;
}

#section-calendar-access .admin-pay-table-title,
#section-calendar .admin-pay-table-title,
#section-activity-logs .admin-pay-table-title {
  margin: 0;
}

/* -------- Admin Activity Logs -------- */
#section-activity-logs > .appointments-strip {
  margin-top: 12px;
  min-height: 0;
  padding: 20px 16px;
}

#section-activity-logs > .appointments-strip .appointments-strip__head {
  justify-content: center;
  text-align: center;
}

#section-activity-logs > .appointments-strip .appointments-strip__title {
  width: 100%;
  text-align: center;
}

#section-payments > .appointments-strip {
  margin-top: 0;
  margin-bottom: 14px;
  min-height: 0;
  padding: 20px 16px;
}

#section-payments > .appointments-strip .appointments-strip__head {
  justify-content: center;
  text-align: center;
}

#section-payments > .appointments-strip .appointments-strip__title {
  width: 100%;
  text-align: center;
  color: #c46b82 !important;
  -webkit-text-fill-color: #c46b82 !important;
}

#section-activity-logs .activity-logs-kpi-row {
  margin-top: 16px;
  margin-bottom: 12px;
}

#section-activity-logs .admin-payment-feature-card {
  padding: 12px 14px 14px;
}

#section-activity-logs #adminActivityLogsList {
  display: block;
  overflow-x: auto;
}

.activity-logs-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(120px, 1fr)) auto;
  gap: 10px 12px;
  align-items: end;
  margin: 4px 0 14px;
}

.activity-logs-filters label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4d5a42;
}

.activity-logs-filters input,
.activity-logs-filters select {
  width: 100%;
  min-height: 40px;
  margin: 0;
}

.activity-logs-filters__reset {
  display: flex;
  align-items: flex-end;
}

.activity-logs-filters__reset .btn {
  margin: 0;
  white-space: nowrap;
}

.activity-logs-table td.activity-logs-activity {
  white-space: normal;
  min-width: 220px;
  max-width: 420px;
  line-height: 1.4;
}

/* Let table card shadows show inside dashboard cards */
.subpage .card:has(.reception-table-wrap),
.subpage .card:has(.manager-msg-table-wrap),
.subpage .card:has(.admin-payment-verification-list),
.subpage .card:has(.admin-users-list),
.subpage .card:has(.admin-model-eval__table-wrap),
.subpage .card:has(.pa-table-wrap) {
  overflow: visible;
}

/* Slightly softer elevation when a table card sits inside another card */
.subpage .card .manager-msg-table-wrap,
.subpage .card .reception-table-wrap,
.subpage .card .admin-model-eval__table-wrap,
.subpage .card .pa-table-wrap,
.subpage .card .admin-payment-verification-list:has(> .admin-pay-table),
.subpage .card .admin-users-list:has(> .admin-users-table) {
  box-shadow: 0 4px 14px rgba(31, 43, 22, 0.04), 0 1px 4px rgba(196, 107, 130, 0.06);
}

.activity-logs-role {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #eef3e6;
  color: #3e4a34;
}

.activity-logs-role--manager {
  background: #fdeef2;
  color: #a14b63;
}

.activity-logs-role--reception {
  background: #e8f4ea;
  color: #2f6b3a;
}

@media (max-width: 1100px) {
  .activity-logs-filters {
    grid-template-columns: 1fr 1fr;
  }

  .activity-logs-filters__search {
    grid-column: 1 / -1;
  }

  .activity-logs-filters__reset {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .activity-logs-filters {
    grid-template-columns: 1fr;
  }
}

/* -------- Owner Dashboard: Reservation Calendar (2-column) -------- */
.admin-app .admin-dash-cal-card {
  padding: 12px 14px 14px;
}

.admin-app .admin-dash-cal-card:hover {
  transform: none;
}

.admin-dash-cal-card__head {
  margin: 0 0 10px;
}

.admin-dash-cal-card__title.section-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.admin-dash-cal-card__lead {
  margin: 0;
  color: #5f6673;
  font-size: 0.84rem;
  line-height: 1.4;
}

.admin-dash-cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.admin-dash-cal-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-dash-cal-head {
  margin: 0 0 6px;
  max-width: none;
}

.admin-dash-cal-head .book-flow-cal-nav {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.admin-dash-cal-head .book-flow-cal-month {
  font-size: 0.98rem;
}

#section-dashboard .admin-dash-cal-host.book-flow-calendar {
  flex: 1 1 auto;
  width: 100%;
  margin-top: 0;
  padding: 8px;
  box-shadow: none;
  border-radius: 12px;
}

#section-dashboard .admin-dash-cal-host.book-flow-calendar::before,
#section-dashboard .admin-dash-cal-host.book-flow-calendar::after {
  content: none !important;
  display: none !important;
}

#section-dashboard .admin-dash-cal-host .book-flow-cal-weekdays {
  margin-top: 0;
  margin-bottom: 6px;
  gap: 5px;
}

#section-dashboard .admin-dash-cal-host .book-flow-cal-grid {
  gap: 5px;
}

#section-dashboard .admin-dash-cal-host .book-flow-cal-cell--empty,
#section-dashboard .admin-dash-cal-host .book-flow-cal-day,
#section-dashboard .admin-dash-cal-host .book-flow-cal-day--disabled {
  min-height: 58px;
}

.admin-dash-cal-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: linear-gradient(180deg, #fdf6f8 0%, #ffffff 100%);
  box-sizing: border-box;
}

.admin-dash-cal-notes__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #1f2b16;
}

.admin-dash-cal-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.admin-dash-cal-legend li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(196, 107, 130, 0.12);
  background: #ffffff;
}

.admin-dash-cal-legend .avail-legend__swatch {
  margin-top: 2px;
}

.admin-dash-cal-legend__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-dash-cal-legend__text strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1f1218;
  line-height: 1.25;
}

.admin-dash-cal-legend__text span {
  font-size: 0.78rem;
  color: #5f6673;
  line-height: 1.35;
}

.admin-dash-cal-notes__hint {
  margin: auto 0 0;
  padding-top: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #8a8190;
}

@media (min-width: 1100px) {
  #section-dashboard .admin-dash-cal-host .book-flow-cal-cell--empty,
  #section-dashboard .admin-dash-cal-host .book-flow-cal-day,
  #section-dashboard .admin-dash-cal-host .book-flow-cal-day--disabled {
    min-height: 68px;
  }
}

@media (max-width: 1024px) {
  .admin-dash-cal-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .admin-dash-cal-notes {
    padding: 10px 12px;
  }

  .admin-dash-cal-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dash-cal-notes__hint {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .admin-app .admin-dash-cal-card {
    padding: 10px;
  }

  #section-dashboard .admin-dash-cal-host.book-flow-calendar {
    padding: 6px;
  }

  #section-dashboard .admin-dash-cal-host .book-flow-cal-cell--empty,
  #section-dashboard .admin-dash-cal-host .book-flow-cal-day,
  #section-dashboard .admin-dash-cal-host .book-flow-cal-day--disabled {
    min-height: 42px;
  }

  .admin-dash-cal-legend {
    grid-template-columns: 1fr;
  }
}

/* -------- Customer calendar: two-column layout like manager/admin -------- */
.book-flow-cal-layout.admin-dash-cal-layout,
.avail-modal-cal-layout.admin-dash-cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.7fr);
  gap: 8px;
  align-items: start;
  margin-top: 4px;
}

.book-flow-cal-layout .book-flow-cal-host.book-flow-calendar,
.avail-modal-cal-layout .book-flow-calendar {
  flex: 1 1 auto;
  width: 100%;
  margin-top: 0;
  padding: 6px;
  box-shadow: none;
  border-radius: 12px;
}

.book-flow-cal-layout .book-flow-calendar::before,
.book-flow-cal-layout .book-flow-calendar::after,
.avail-modal-cal-layout .book-flow-calendar::before,
.avail-modal-cal-layout .book-flow-calendar::after {
  content: none !important;
  display: none !important;
}

.book-flow-cal-layout .book-flow-cal-weekdays,
.avail-modal-cal-layout .book-flow-cal-weekdays {
  margin-top: 0;
  margin-bottom: 4px;
  gap: 4px;
}

.book-flow-cal-layout .book-flow-cal-grid,
.avail-modal-cal-layout .book-flow-cal-grid {
  gap: 4px;
}

.book-flow-cal-layout .book-flow-cal-cell--empty,
.book-flow-cal-layout .book-flow-cal-day,
.book-flow-cal-layout .book-flow-cal-day--disabled,
.avail-modal-cal-layout .book-flow-cal-cell--empty,
.avail-modal-cal-layout .book-flow-cal-day,
.avail-modal-cal-layout .book-flow-cal-day--disabled {
  min-height: 42px;
  padding: 3px 1px;
}

.book-flow-cal-notes.admin-dash-cal-notes,
.avail-modal-cal-layout .admin-dash-cal-notes {
  gap: 8px;
  padding: 10px 12px;
}

.book-flow-cal-notes .admin-dash-cal-legend,
.avail-modal-cal-layout .admin-dash-cal-legend {
  grid-template-columns: 1fr;
}

body.subpage .book-flow-cal-notes .admin-dash-cal-notes__title,
body.subpage .avail-modal-cal-layout .admin-dash-cal-notes__title,
.book-flow-cal-notes .admin-dash-cal-notes__title,
.avail-modal-cal-layout .admin-dash-cal-notes__title {
  font-size: 0.95rem;
}

.book-flow-cal-notes .avail-legend__live,
.avail-modal-cal-layout .avail-legend__live {
  margin: 0;
  font-size: 0.74rem;
}

.book-flow-cal-layout + .book-flow-picked {
  margin-top: 10px;
  padding: 8px 12px;
}

.avail-modal .book-flow-picked {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 0.88rem;
}

.date-range-alert {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 600;
}

.date-range-alert[hidden] {
  display: none !important;
}

.date-notice[hidden] {
  display: none !important;
}

.date-notice {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(56, 78, 92, 0.42);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.date-notice__card {
  position: relative;
  width: min(380px, 100%);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(196, 107, 130, 0.22);
  background: linear-gradient(180deg, #fff8fa 0%, #ffffff 58%, #fdf4f6 100%);
  box-shadow: 0 24px 48px rgba(47, 27, 36, 0.18), 0 8px 20px rgba(196, 107, 130, 0.16);
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
}

.date-notice.is-open .date-notice__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.date-notice__glow {
  position: absolute;
  inset: auto -20% 62% -20%;
  height: 160px;
  background: radial-gradient(ellipse at 50% 0%, rgba(196, 107, 130, 0.22) 0%, rgba(196, 107, 130, 0) 70%);
  pointer-events: none;
}

.date-notice__inner {
  position: relative;
  z-index: 1;
  padding: 28px 26px 24px;
  text-align: center;
}

.date-notice__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(160deg, #f3c3cf 0%, #c46b82 100%);
  box-shadow: 0 10px 20px rgba(196, 107, 130, 0.28);
}

.date-notice__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c46b82;
}

.date-notice__title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2f1b24;
}

.date-notice__text {
  margin: 0 auto 20px;
  max-width: 32ch;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
  color: #6b6170;
}

.date-notice__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: #fff;
  background: #c46b82;
  box-shadow: 0 8px 18px rgba(196, 107, 130, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.date-notice__ok:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(196, 107, 130, 0.4);
}

.date-notice__ok:focus {
  outline: 3px solid rgba(196, 107, 130, 0.35);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .date-notice__card,
  .date-notice__ok {
    transition-duration: 0.01ms;
  }
}

.avail-modal .avail-facility-section {
  margin-top: 12px;
  padding-top: 12px;
}

@media (min-width: 1100px) {
  .book-flow-cal-layout .book-flow-cal-cell--empty,
  .book-flow-cal-layout .book-flow-cal-day,
  .book-flow-cal-layout .book-flow-cal-day--disabled,
  .avail-modal-cal-layout .book-flow-cal-cell--empty,
  .avail-modal-cal-layout .book-flow-cal-day,
  .avail-modal-cal-layout .book-flow-cal-day--disabled {
    min-height: 50px;
  }
}

@media (max-width: 1024px) {
  .book-flow-cal-layout .book-flow-cal-cell--empty,
  .book-flow-cal-layout .book-flow-cal-day,
  .book-flow-cal-layout .book-flow-cal-day--disabled,
  .avail-modal-cal-layout .book-flow-cal-cell--empty,
  .avail-modal-cal-layout .book-flow-cal-day,
  .avail-modal-cal-layout .book-flow-cal-day--disabled {
    min-height: 38px;
  }
}

@media (max-width: 700px) {
  .avail-modal-cal-layout.admin-dash-cal-layout,
  .book-flow-cal-layout.admin-dash-cal-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .book-flow-cal-notes .admin-dash-cal-legend,
  .avail-modal-cal-layout .admin-dash-cal-legend {
    grid-template-columns: 1fr;
  }

  .avail-modal__dialog--simple {
    width: 100%;
  }
}

/* -------- Manager dashboard: live charts + interpretation -------- */
#section-dashboard .manager-chart-row,
#section-analytics .manager-chart-row {
  margin-top: 18px;
  align-items: stretch;
}

#section-dashboard .manager-chart-card,
#section-analytics .manager-chart-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 14px;
}

#section-dashboard .manager-chart-card__head,
#section-analytics .manager-chart-card__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 8px;
  min-height: 28px;
}

#section-dashboard .manager-chart-card__title,
#section-analytics .manager-chart-card__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #1f2b16;
}

#section-dashboard .manager-chart-live,
#section-analytics .manager-chart-live {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#section-dashboard .manager-chart-live::before,
#section-analytics .manager-chart-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}

#section-dashboard .manager-chart-insights,
#section-analytics .manager-chart-insights {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(196, 107, 130, 0.18);
  background: linear-gradient(180deg, #fff8fa 0%, #ffffff 100%);
  min-height: 168px;
}

#section-dashboard .manager-chart-insights__title,
#section-analytics .manager-chart-insights__title {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c46b82;
}

#section-dashboard .manager-chart-insights__list,
#section-analytics .manager-chart-insights__list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

#section-dashboard .manager-chart-insights__list li,
#section-analytics .manager-chart-insights__list li {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #1f2b16;
}

@media (max-width: 640px) {
  #section-dashboard .manager-chart-card__head,
  #section-analytics .manager-chart-card__head {
    justify-content: flex-start;
    padding-right: 58px;
  }
}

/* Manager Analytics / Dashboard pro charts */
#section-dashboard .manager-chart-card__sub,
#section-analytics .manager-chart-card__sub {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.45;
}

#section-dashboard .manager-donut-layout,
#section-analytics .manager-donut-layout {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(160px, 0.95fr);
  gap: 14px;
  align-items: center;
}

#section-dashboard .manager-donut-chart,
#section-analytics .manager-donut-chart {
  width: 100%;
  max-height: 230px;
  margin: 0 auto;
  border: none;
  background: transparent;
}

#section-dashboard .manager-donut-legend,
#section-analytics .manager-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#section-dashboard .manager-donut-legend li,
#section-analytics .manager-donut-legend li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfafc 0%, #f7f5f8 100%);
  border: 1px solid rgba(61, 51, 64, 0.06);
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
}

#section-dashboard .manager-donut-legend__swatch,
#section-analytics .manager-donut-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(61, 51, 64, 0.06);
}

#section-dashboard .manager-donut-legend__meta,
#section-analytics .manager-donut-legend__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

#section-dashboard .manager-donut-legend__label,
#section-analytics .manager-donut-legend__label {
  font-weight: 700;
  color: #2f2933;
  line-height: 1.25;
}

#section-dashboard .manager-donut-legend__count,
#section-analytics .manager-donut-legend__count {
  font-size: 0.72rem;
  font-weight: 500;
  color: #8a8490;
}

#section-dashboard .manager-donut-legend__value,
#section-analytics .manager-donut-legend__value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #5b5560;
}

#section-dashboard .manager-donut-legend__empty,
#section-analytics .manager-donut-legend__empty {
  display: block;
  padding: 12px;
  text-align: center;
  color: #8a8490;
  font-weight: 500;
  background: #f8f6f9;
  border-radius: 10px;
  border: 1px dashed rgba(61, 51, 64, 0.14);
}

#section-dashboard .manager-chart-legend,
#section-analytics .manager-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 8px;
}

#section-dashboard .manager-chart-legend__item,
#section-analytics .manager-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
}

#section-dashboard .manager-chart-legend__swatch,
#section-analytics .manager-chart-legend__swatch {
  display: inline-block;
  width: 22px;
  height: 4px;
  border-radius: 999px;
}

#section-dashboard .manager-chart-legend__swatch--green,
#section-analytics .manager-chart-legend__swatch--green {
  background: #7fc142;
  box-shadow: 0 0 0 3px rgba(127, 193, 66, 0.18);
}

#section-dashboard .manager-chart-legend__swatch--pink,
#section-analytics .manager-chart-legend__swatch--pink {
  background: #c46b82;
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.18);
}

#section-dashboard .manager-chart-legend__swatch--pos,
#section-analytics .manager-chart-legend__swatch--pos {
  background: #5f9e2e;
  box-shadow: 0 0 0 3px rgba(95, 158, 46, 0.16);
}

#section-dashboard .manager-chart-legend__swatch--neu,
#section-analytics .manager-chart-legend__swatch--neu {
  background: #7b7480;
  box-shadow: 0 0 0 3px rgba(123, 116, 128, 0.14);
}

#section-dashboard .manager-chart-legend__swatch--neg,
#section-analytics .manager-chart-legend__swatch--neg {
  background: #c46b82;
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.16);
}

#section-dashboard .manager-chart-wrap,
#section-analytics .manager-chart-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
  margin-top: 4px;
  border: 1px solid rgba(61, 51, 64, 0.08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(248, 246, 249, 0.55) 0%, rgba(255, 255, 255, 0.9) 100%);
  padding: 12px 12px 8px;
  box-sizing: border-box;
}

#section-dashboard .manager-pro-chart,
#section-analytics .manager-pro-chart {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: none;
  background: transparent;
  cursor: crosshair;
}

#section-dashboard .manager-chart-tooltip,
#section-analytics .manager-chart-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(196, 107, 130, 0.28);
  box-shadow: 0 10px 28px rgba(61, 51, 64, 0.14);
  font-size: 0.75rem;
  line-height: 1.35;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
}

#section-dashboard .manager-chart-tooltip[hidden],
#section-analytics .manager-chart-tooltip[hidden] {
  display: none !important;
}

#section-dashboard .manager-chart-tooltip__month,
#section-analytics .manager-chart-tooltip__month {
  margin: 0;
  font-weight: 700;
  color: #c46b82;
}

#section-dashboard .manager-chart-tooltip__value,
#section-analytics .manager-chart-tooltip__value {
  margin: 2px 0 0;
  font-weight: 600;
  color: #3d3340;
}

#section-dashboard .manager-chart-tooltip__kind,
#section-analytics .manager-chart-tooltip__kind {
  margin: 2px 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #7fc142;
}

#section-dashboard .manager-chart-tooltip__kind--pink,
#section-analytics .manager-chart-tooltip__kind--pink {
  color: #c46b82;
}

#section-analytics .manager-reviews-card {
  margin-top: 14px;
}

#section-analytics .manager-reviews-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

#section-analytics .manager-reviews-kpi {
  text-align: center;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

#section-analytics .manager-reviews-kpi strong {
  display: block;
  font-size: 1.15rem;
  color: #7fc142;
  line-height: 1.2;
}

#section-analytics .manager-reviews-kpi span {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

#section-analytics .manager-reviews-bars {
  margin-bottom: 12px;
}

#section-analytics .manager-sentiment-row {
  margin-bottom: 8px;
}

#section-analytics .manager-reviews-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}

#section-analytics .manager-reviews-chart-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8490;
}

.mgr-doc__chart--wide {
  grid-column: 1 / -1;
}

.mgr-doc__model-eval {
  font-size: 9pt;
}

.mgr-doc__model-eval .admin-model-eval__live,
.mgr-doc__model-eval .admin-model-eval__live-note {
  display: none;
}

#section-analytics .manager-admin-charts-mirror {
  margin-top: 16px;
}

#section-analytics .manager-admin-charts-mirror .admin-reports-grid {
  margin-top: 0;
}

#section-analytics .manager-admin-charts-mirror .manager-chart-live {
  position: static;
  transform: none;
}

@media (max-width: 960px) {
  #section-dashboard .manager-donut-layout,
  #section-analytics .manager-donut-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Contrast lock: light text on dark/pink surfaces, dark text on light surfaces
   ========================================================================== */
.home,
.home .text,
.home .hero-title,
.home .hero-kicker,
.home .hero-tagline,
.counter,
.book,
.book h1,
.book p,
footer,
footer p,
footer h2,
.legal,
.legal p {
  color: var(--text-on-dark);
}

.subpage .hero,
.subpage .hero h1,
.subpage .hero p,
.login-page .hero,
.login-page .hero h1,
.login-page .hero p,
.login-page .auth-card,
.login-page .auth-card h3,
.login-page .auth-lead,
.login-page label,
.login-page .auth-switch,
.login-page .auth-switch a,
.login-page .note,
.calendar-legend,
.calendar-legend li,
.calendar-legend li strong,
.manager-cal-legend.calendar-legend li,
.manager-cal-legend.calendar-legend li strong,
.staff-gate-modal__hero,
.staff-gate-modal__hero h3,
.staff-gate-modal__eyebrow,
.staff-gate-modal__lead,
.book-flow-picked,
.newsletter .container,
.newsletter .newsletter-banner h1,
.newsletter .newsletter-banner p,
.newsletter .newsletter-banner label {
  color: var(--text-on-dark) !important;
}

.subpage .card,
.subpage .card h3,
.subpage .card p,
.subpage .card li,
.calendar-formal-card,
.calendar-legend-card,
.book-flow-calendar,
.role-login-menu,
.admin-nav-dropdown-menu,
.welcome-modal,
.swal2-popup,
.swal2-title,
.swal2-html-container,
.staff-gate-modal__form,
.staff-role-card,
table,
th,
td,
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  color: var(--text-on-light);
}

.login-page input,
.login-page textarea,
.login-page select {
  color: var(--text-on-light) !important;
}

/* ==========================================================================
   Overlay / modal / alert / notification lock
   Keeps every popup on-screen, centered, scrollable, and consistently sized.
   ========================================================================== */

.admin-settings-overlay:not([hidden]),
.payment-success-overlay:not([hidden]),
.welcome-modal-overlay:not([hidden]),
.avail-modal:not([hidden]),
.book-unit-modal:not([hidden]),
.weather-modal:not([hidden]),
.login-activity-detail:not([hidden]) {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100dvh;
  padding: var(--ui-overlay-pad-y) var(--ui-overlay-pad-x) var(--ui-overlay-pad-b) var(--ui-overlay-pad-l);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-settings-modal,
.payment-success-modal,
.welcome-modal,
.payment-rules-modal,
.booking-terms-modal,
.staff-gate-modal,
.avail-modal__dialog,
.book-unit-modal__dialog,
.weather-modal__dialog,
.login-activity-detail__dialog,
.book-unit-info__card,
.guest-profile-modal,
.manager-edit-modal,
.admin-payment-proof-modal,
.customer-notif-detail-modal,
.admin-sentiment-archive-modal {
  box-sizing: border-box;
  max-height: var(--ui-dialog-max-h);
  margin-top: auto;
  margin-bottom: auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.admin-settings-modal:not(.admin-reservation-modal),
.payment-success-modal,
.payment-rules-modal,
.booking-terms-modal,
.staff-gate-modal,
.avail-modal__dialog,
.weather-modal__dialog,
.login-activity-detail__dialog,
.book-unit-info__card,
.guest-profile-modal,
.manager-edit-modal,
.admin-payment-proof-modal,
.customer-notif-detail-modal,
.admin-app .admin-sentiment-archive-modal {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-reservation-modal,
.book-unit-modal__dialog {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.admin-reservation-modal__head,
.admin-reservation-modal__footer,
.admin-reservation-modal__accent,
.book-unit-modal__header,
.book-unit-modal__footer,
.book-unit-modal__actions {
  flex: 0 0 auto;
}

.admin-reservation-modal__body,
#bookUnitModalHost,
#receptionWiRoomModalHost {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.admin-settings-modal img,
.payment-success-modal img,
.avail-modal__dialog img,
.book-unit-modal__dialog img,
.weather-modal__dialog img,
.login-activity-detail__dialog img,
.admin-payment-proof-image,
.swal2-popup img {
  max-width: 100%;
  height: auto;
}

.admin-payment-proof-image {
  max-height: min(60dvh, 520px);
  object-fit: contain;
}

.admin-settings-modal__actions,
.payment-rules-modal__actions,
.booking-terms-modal__actions,
.manager-edit-modal__actions,
.book-unit-modal__actions,
.avail-modal__actions,
.weather-modal__actions,
.admin-reservation-modal__footer,
.customer-notif-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

.admin-settings-modal__actions .btn,
.payment-rules-modal__actions .btn,
.booking-terms-modal__actions .btn,
.manager-edit-modal__actions .btn,
.book-unit-modal__actions .btn,
.avail-modal__actions .btn,
.weather-modal__actions .btn,
.admin-reservation-modal__footer .btn,
.payment-success-btn,
.welcome-modal__ok {
  max-width: 100%;
}

.book-unit-info:not([hidden]) {
  overflow: auto;
  align-items: flex-start;
}

.admin-settings-modal.payment-rules-modal {
  width: min(440px, 100%);
}

.admin-settings-modal.booking-terms-modal {
  width: min(440px, 100%);
}

.book-unit-info__card {
  width: min(360px, 100%);
}

/* Notification inbox — stay inside the viewport */
.customer-notif-panel,
.staff-notif-panel {
  position: fixed;
  top: max(72px, calc(var(--ui-overlay-pad-y) + 56px));
  right: var(--ui-overlay-pad-x);
  left: auto;
  z-index: var(--ui-z-panel);
  width: min(400px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(70dvh, calc(100dvh - 84px - env(safe-area-inset-bottom, 0px)));
  overflow: hidden;
  box-sizing: border-box;
}

.customer-notif-panel__list,
.staff-notif-panel .customer-notif-panel__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* SweetAlert2 — above all site overlays, never clipped */
.swal2-container {
  z-index: var(--ui-z-alert) !important;
  box-sizing: border-box !important;
  padding: var(--ui-overlay-pad-y) var(--ui-overlay-pad-x) var(--ui-overlay-pad-b) var(--ui-overlay-pad-l) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-items: flex-start !important;
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: rgba(31, 41, 55, 0.48) !important;
}

.swal2-popup {
  width: min(28rem, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: var(--ui-dialog-max-h) !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.swal2-html-container {
  overflow-y: auto !important;
  max-height: none !important;
  overflow-wrap: break-word;
}

.swal2-actions {
  flex-wrap: wrap !important;
  width: 100%;
  max-width: 100%;
  margin: 1rem 0 0 !important;
  gap: 8px;
}

.swal2-styled {
  min-height: 40px;
  box-sizing: border-box;
}

.role-login-menu,
.admin-nav-dropdown-menu {
  max-width: min(22rem, calc(100vw - 24px));
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .avail-modal:not([hidden]) {
    align-items: flex-end;
    padding: 0;
  }

  .avail-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: min(94dvh, 100%);
    margin: 0;
    border-radius: 20px 20px 0 0;
  }

  .book-unit-modal:not([hidden]),
  .weather-modal:not([hidden]) {
    align-items: flex-end;
    padding: 0;
  }

  .book-unit-modal__dialog,
  .weather-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: min(94dvh, 100%);
    margin: 0;
    border-radius: 20px 20px 0 0;
  }
}

@media (max-width: 560px) {
  .admin-settings-overlay:not([hidden]),
  .payment-success-overlay:not([hidden]),
  .welcome-modal-overlay:not([hidden]),
  .login-activity-detail:not([hidden]) {
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }

  .admin-settings-modal,
  .payment-success-modal,
  .welcome-modal,
  .payment-rules-modal,
  .booking-terms-modal,
  .staff-gate-modal,
  .guest-profile-modal,
  .manager-edit-modal,
  .login-activity-detail__dialog,
  .customer-notif-detail-modal {
    width: 100%;
    max-width: 100%;
  }

  .admin-settings-modal__actions,
  .payment-rules-modal__actions,
  .booking-terms-modal__actions,
  .manager-edit-modal__actions,
  .book-unit-modal__actions,
  .avail-modal__actions,
  .weather-modal__actions,
  .admin-reservation-modal__footer,
  .customer-notif-detail__actions,
  .swal2-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .book-unit-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .book-unit-modal__footer .book-unit-modal__actions,
  .book-unit-modal__footer .book-unit-modal__actions .btn {
    width: 100%;
  }

  .admin-settings-modal__actions .btn,
  .payment-rules-modal__actions .btn,
  .booking-terms-modal__actions .btn,
  .manager-edit-modal__actions .btn,
  .book-unit-modal__actions .btn,
  .avail-modal__actions .btn,
  .weather-modal__actions .btn,
  .admin-reservation-modal__footer .btn,
  .payment-success-btn,
  .welcome-modal__ok,
  .swal2-styled {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .customer-notif-panel,
  .staff-notif-panel {
    top: max(8px, env(safe-area-inset-top, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-success-overlay,
  .welcome-modal-overlay,
  .welcome-modal,
  .staff-gate-modal,
  .admin-reservation-modal {
    transition: none;
    animation: none;
  }

  .payment-rules-modal__item,
  .payment-rules-modal__item:hover,
  .payment-rules-modal__actions .btn,
  .payment-rules-modal__actions #downPaymentRulesAgreeBtn:hover {
    transition: none;
    transform: none;
  }
}

/* -------- Pink-filled buttons: white label only (do not change fill/size/layout) -------- */
.primary-btn,
.primary-btn:link,
.primary-btn:visited,
.primary-btn:hover,
.primary-btn:active,
.primary-btn:focus,
.primary-btn:focus-visible,
.subpage .btn:not(.btn--facebook),
.subpage .btn:not(.btn--facebook):link,
.subpage .btn:not(.btn--facebook):visited,
.subpage .btn:not(.btn--facebook):hover,
.subpage .btn:not(.btn--facebook):active,
.subpage .btn:not(.btn--facebook):focus,
.subpage .btn:not(.btn--facebook):focus-visible,
.admin-app .btn:not(.btn--facebook),
.admin-save-btn,
.book-flow-btn-main,
.book-reserve-submit,
.welcome-modal__ok,
.payment-success-btn,
.swal2-confirm,
.swal2-styled.swal2-confirm,
.pa-refresh-btn,
.pa-section-btn--active,
.content-mgmt-tab--active,
.avail-facility-tab--active,
.facilities-tab--active,
.login-reserve-tab--active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.primary-btn *:not(.btn-spinner),
.subpage .btn:not(.btn--facebook):not(.btn--google) *:not(.btn-spinner),
.admin-app .btn:not(.btn--facebook):not(.btn--google) *:not(.btn-spinner),
.admin-save-btn *:not(.btn-spinner),
.book-flow-btn-main *:not(.btn-spinner),
.swal2-confirm *:not(.btn-spinner) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.subpage .btn.btn--google svg,
.subpage .btn.btn--google svg * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  stroke: none !important;
}

.subpage .btn.btn--google .btn-google-icon path:nth-child(1) { fill: #4285f4 !important; }
.subpage .btn.btn--google .btn-google-icon path:nth-child(2) { fill: #34a853 !important; }
.subpage .btn.btn--google .btn-google-icon path:nth-child(3) { fill: #fbbc05 !important; }
.subpage .btn.btn--google .btn-google-icon path:nth-child(4) { fill: #ea4335 !important; }

.btn-spinner,
.subpage .btn .btn-spinner,
.primary-btn .btn-spinner {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* White header Book chip — not a pink fill */
header ul li a.primary-btn,
header ul li a.primary-btn:link,
header ul li a.primary-btn:visited,
header ul li a.primary-btn:hover,
header ul li a.primary-btn:active,
header ul li a.primary-btn:focus,
header ul li a.primary-btn:focus-visible,
.subpage header ul li a.primary-btn,
.subpage header ul li a.primary-btn:hover,
.subpage header ul li a.primary-btn:active,
.subpage header ul li a.primary-btn.active {
  color: var(--brand-ink) !important;
  -webkit-text-fill-color: var(--brand-ink) !important;
}

/* Terms modal Cancel must stay outline with visible pink label */
.subpage .booking-terms-modal #bookingTermsCancelBtn,
.subpage .booking-terms-modal #bookingTermsCancelBtn.btn,
.subpage .booking-terms-modal #bookingTermsCancelBtn.btn--outline,
.subpage .booking-terms-modal #bookingTermsCancelBtn.btn.btn--outline,
.subpage .payment-rules-modal #downPaymentRulesCancelBtn,
.subpage .payment-rules-modal #downPaymentRulesCancelBtn.btn,
.subpage .payment-rules-modal #downPaymentRulesCancelBtn.btn--outline,
.subpage .payment-rules-modal #downPaymentRulesCancelBtn.btn.btn--outline {
  background: #ffffff !important;
  color: #c46b82 !important;
  border: 1.5px solid #c46b82 !important;
  -webkit-text-fill-color: #c46b82 !important;
}

.subpage .payment-rules-modal #downPaymentRulesCancelBtn:hover,
.subpage .payment-rules-modal #downPaymentRulesCancelBtn.btn--outline:hover {
  background: #fff5f7 !important;
  border-color: #c46b82 !important;
  color: #c46b82 !important;
  -webkit-text-fill-color: #c46b82 !important;
}

@media only screen and (max-width: 1100px) {
  header #menulist li a.primary-btn {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
}

/* True white-fill outline chips keep dark labels */
.checkin-ticket__actions .btn--outline,
.checkin-ticket__actions .btn.btn--outline,
.checkin-ticket__actions .btn.btn--outline:hover,
.checkin-ticket__actions .btn.btn--outline:focus,
.checkin-ticket__actions .btn.btn--outline:focus-visible {
  color: var(--ticket-ink) !important;
  -webkit-text-fill-color: var(--ticket-ink) !important;
}

.checkin-ticket__actions .btn.btn--outline *,
.checkin-ticket__actions .btn.btn--outline *::before,
.checkin-ticket__actions .btn.btn--outline *::after {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Auth-gate Sign In uses a light fill on hover */
.subpage .auth-gate-card .btn--outline:hover,
.subpage .auth-gate-card .btn--outline:focus-visible {
  color: var(--brand-pink-dark, #c46b82) !important;
  -webkit-text-fill-color: var(--brand-pink-dark, #c46b82) !important;
}

/* ==========================================================================
   Site-wide responsive polish (same design — sizing/spacing/overflow only)
   Breakpoints: laptop ~1100, tablet ~900, phone ~640 / ~480
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

main,
.content,
.section,
.card,
.admin-section,
.appointments-strip,
.split-2,
.grid,
.admin-reports-grid,
.manager-chart-row,
.manager-admin-charts-mirror,
.form-grid,
.table-wrap,
.reception-table-wrap {
  min-width: 0;
  max-width: 100%;
}

.container {
  min-width: 0;
  /* Keep gutters: do not force max-width:100% here (that wiped page margins). */
  max-width: var(--page-max-width, 1280px);
}

.table-wrap,
.reception-table-wrap,
.manager-msg-table-wrap,
.admin-payment-verification-list:has(> .admin-pay-table),
.admin-users-list,
#adminActivityLogsList,
.mgr-doc__table-wrap,
.admin-model-eval__table-wrap,
.pa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

/* Keep multi-column tables readable: scroll instead of crushing columns */
.manager-msg-table,
.manager-reserve-table,
.admin-pay-table,
.admin-users-table,
.activity-logs-table,
.pa-table,
.admin-model-eval__table {
  min-width: 680px;
}

/* Upcoming bookings must stay fluid on phones (override min-width:680 above) */
#adminUpcomingBookingsList .admin-pay-table,
#adminUpcomingBookingsList .admin-upcoming-table,
.admin-pay-table.admin-upcoming-table {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

#adminUpcomingBookingsList .admin-pay-table th,
#adminUpcomingBookingsList .admin-pay-table td,
.admin-pay-table.admin-upcoming-table th,
.admin-pay-table.admin-upcoming-table td {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  vertical-align: top;
}

@media (max-width: 700px) {
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(3),
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(4),
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(5),
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(6),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(3),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(4),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(5),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(6),
  .admin-upcoming-table th:nth-child(3),
  .admin-upcoming-table th:nth-child(4),
  .admin-upcoming-table th:nth-child(5),
  .admin-upcoming-table th:nth-child(6),
  .admin-upcoming-table td:nth-child(3),
  .admin-upcoming-table td:nth-child(4),
  .admin-upcoming-table td:nth-child(5),
  .admin-upcoming-table td:nth-child(6) {
    display: none !important;
  }

  #adminUpcomingBookingsList .admin-pay-table,
  #adminUpcomingBookingsList .admin-upcoming-table,
  .admin-pay-table.admin-upcoming-table {
    display: table !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  #adminUpcomingBookingsList .admin-pay-table thead,
  #adminUpcomingBookingsList .admin-upcoming-table thead {
    display: table-header-group !important;
  }

  #adminUpcomingBookingsList .admin-pay-table tbody,
  #adminUpcomingBookingsList .admin-upcoming-table tbody {
    display: table-row-group !important;
  }

  #adminUpcomingBookingsList .admin-pay-table tr,
  #adminUpcomingBookingsList .admin-upcoming-table tr {
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #adminUpcomingBookingsList .admin-pay-table th,
  #adminUpcomingBookingsList .admin-pay-table td,
  #adminUpcomingBookingsList .admin-upcoming-table th,
  #adminUpcomingBookingsList .admin-upcoming-table td {
    display: table-cell !important;
  }

  #adminUpcomingBookingsList .admin-pay-table th:nth-child(1),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(1),
  .admin-upcoming-table th:nth-child(1),
  .admin-upcoming-table td:nth-child(1) {
    width: 40% !important;
  }

  #adminUpcomingBookingsList .admin-pay-table th:nth-child(2),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(2),
  .admin-upcoming-table th:nth-child(2),
  .admin-upcoming-table td:nth-child(2) {
    width: 34% !important;
  }

  #adminUpcomingBookingsList .admin-pay-table th:nth-child(7),
  #adminUpcomingBookingsList .admin-pay-table td:nth-child(7),
  .admin-upcoming-table th:nth-child(7),
  .admin-upcoming-table td:nth-child(7) {
    width: 26% !important;
    min-width: 4.75rem;
  }

  #adminUpcomingBookingsList .admin-pay-table th,
  #adminUpcomingBookingsList .admin-pay-table td,
  .admin-upcoming-table th,
  .admin-upcoming-table td {
    padding: 8px 5px !important;
    font-size: 0.78rem;
  }

  /* Keep ACTIONS header on one line — avoid "ACTIO / NS" wrap on narrow phones */
  #adminUpcomingBookingsList .admin-pay-table th:nth-child(7),
  .admin-upcoming-table th:nth-child(7) {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.02em;
    padding: 8px 3px !important;
    text-align: center;
  }

  .admin-upcoming-date-main {
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .admin-checkin-today-pill,
  #adminUpcomingBookingsList .admin-arrival-status-pill {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
    padding: 3px 7px;
    font-size: 0.66rem;
  }

  .admin-upcoming-actions-cell {
    text-align: center;
    vertical-align: middle !important;
    padding: 6px 3px !important;
  }

  .admin-upcoming-actions-cell .btn--small {
    min-height: 32px;
    min-width: 0;
    padding: 5px 7px;
    width: auto;
    max-width: 100%;
    white-space: nowrap !important;
    font-size: 0.7rem;
    line-height: 1.15;
    border-radius: 8px;
  }
}

.admin-pro-chart,
.manager-pro-chart,
.pa-canvas,
canvas.admin-pro-chart,
canvas.manager-pro-chart {
  display: block;
  width: 100% !important;
  max-width: 100%;
  /* Do NOT force height:auto — JS sets drawing box via style.height */
}

.admin-report-chart-wrap,
.manager-chart-wrap,
.pa-chart-wrap {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* —— Laptop / small desktop —— */
@media (max-width: 1100px) {
  :root {
    --page-max-width: 100%;
  }

  .container {
    max-width: 100%;
  }

  .admin-reports-kpi-row,
  .subpage .split-2.admin-reports-kpi-row {
    gap: 12px;
  }
}

/* —— Tablet —— */
@media (max-width: 900px) {
  .container {
    max-width: 100%;
  }

  .admin-payments-kpi-row,
  .subpage .split-2.admin-payments-kpi-row,
  .admin-reports-kpi-row,
  .subpage .split-2.admin-reports-kpi-row {
    grid-template-columns: 1fr 1fr !important;
  }

  .admin-app .admin-reports-grid,
  #section-analytics .admin-reports-grid,
  .manager-admin-charts-mirror .admin-reports-grid {
    grid-template-columns: 1fr !important;
  }

  .manager-report-tools {
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .manager-report-tools__field,
  .manager-report-tools .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .appointments-strip__head--split,
  .appointments-strip__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .appointments-strip__tools {
    flex-wrap: wrap;
    width: 100%;
  }

  .book-flow__step {
    min-width: 72px;
  }

  .book-flow-stepper__list {
    gap: 4px;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .book-flow-stepper__connector {
    flex: 0 0 18px;
    min-width: 12px;
  }

  .facilities-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .facilities-tabs .btn,
  .facilities-tabs button {
    flex: 1 1 auto;
  }

  #section-dashboard .manager-chart-row,
  #section-analytics .manager-chart-row,
  .subpage .split-2.manager-chart-row {
    grid-template-columns: 1fr !important;
  }

  .admin-nav-dropdown-menu {
    max-width: min(320px, 90vw);
  }
}

/* —— Tablet (phones/landscape + small tablets) —— */
@media (max-width: 768px) {
  body.subpage .staff-header-user__inner {
    max-width: min(9rem, 38vw);
  }

  body.subpage .staff-header-user__name {
    font-size: 0.8rem;
  }

  .admin-nav-dropdown-menu {
    max-width: min(100vw - 24px, 360px);
    left: auto;
    right: 0;
  }

  .subpage .modal__dialog,
  .subpage .avail-modal__dialog,
  .subpage .facility-detail-modal__dialog,
  .subpage .appointments-modal__dialog {
    width: min(100% - 20px, 560px);
    max-width: calc(100vw - 20px);
    margin-left: auto;
    margin-right: auto;
  }

  .btn,
  button.btn,
  .primary-btn,
  .secondary-btn,
  .nav-menu-toggle,
  .staff-notif-bell {
    min-height: 40px;
  }
}

/* —— Phone —— */
@media (max-width: 640px) {
  :root {
    --page-gutter: 12px;
    --section-gap: 1.25rem;
    --section-gap-sm: 0.85rem;
  }

  .container {
    max-width: 100%;
    padding-inline: var(--page-gutter);
  }

  .primary-btn,
  .secondary-btn {
    padding: 12px 22px;
  }

  .admin-payments-kpi-row,
  .subpage .split-2.admin-payments-kpi-row,
  .admin-reports-kpi-row,
  .subpage .split-2.admin-reports-kpi-row,
  .subpage .split-2 {
    grid-template-columns: 1fr !important;
  }

  .subpage .form-grid {
    grid-template-columns: 1fr !important;
  }

  .subpage .card,
  .card.kpi,
  .manager-chart-card,
  .admin-report-chart-card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .book-flow__step {
    min-width: 58px;
  }

  .book-flow__step span:not(.book-flow-stepper__marker),
  .book-flow-stepper__label {
    font-size: 0.62rem;
    line-height: 1.15;
    white-space: normal;
    max-width: 4.6rem;
    hyphens: auto;
  }

  .book-flow-stepper__marker {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .book-flow-stepper__connector {
    display: none;
  }

  .book-flow-stepper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .book-flow-stepper__list {
    width: max-content;
    min-width: 100%;
    justify-content: space-between;
    padding-bottom: 4px;
  }

  .admin-app .admin-report-donut-layout,
  #section-dashboard .manager-donut-layout,
  #section-analytics .manager-donut-layout,
  .manager-admin-charts-mirror .admin-report-donut-layout {
    grid-template-columns: 1fr !important;
  }

  .admin-report-reviews-kpis,
  #section-analytics .manager-reviews-kpis,
  .manager-admin-charts-mirror .admin-report-reviews-kpis {
    grid-template-columns: 1fr !important;
  }

  .admin-report-chart-months span,
  .manager-admin-charts-mirror .admin-report-chart-months span {
    font-size: 0.62rem;
    letter-spacing: -0.03em;
  }

  .admin-report-chart-months span.is-chart-label-skip,
  .manager-admin-charts-mirror .admin-report-chart-months span.is-chart-label-skip {
    visibility: hidden;
    pointer-events: none;
  }

  .manager-report-tools__field {
    width: 100%;
  }

  .manager-report-tools__field input,
  .manager-report-tools__field select,
  .manager-report-tools .btn {
    width: 100%;
  }

  /* Staff header: free space so logo is not clipped */
  header .logo,
  body.admin-app .logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: min(9.5rem, 38vw) !important;
  }

  header .site-logo {
    max-height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  header .navlinks {
    gap: 0.3rem !important;
    flex: 0 0 auto !important;
  }

  body.subpage .staff-header-user {
    gap: 0.28rem !important;
    margin-left: 0 !important;
  }

  body.subpage .staff-header-user .staff-notif-bell {
    width: 34px !important;
    height: 34px !important;
  }

  body.subpage .staff-header-user__inner {
    max-width: min(7.25rem, 34vw) !important;
    padding: 0.16rem 0.5rem 0.16rem 0.2rem !important;
    gap: 0.35rem !important;
  }

  body.subpage .staff-header-user__icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }

  body.subpage .staff-header-user__icon svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  body.subpage .staff-header-user__name {
    font-size: 0.72rem !important;
  }

  body.subpage .staff-header-user__role {
    display: none !important;
  }

  .nav-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .content.flex_space {
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .avail-facility-grid {
    grid-template-columns: 1fr !important;
  }

  .sentiment-row,
  .admin-report-sentiment-row,
  .manager-sentiment-row {
    grid-template-columns: 72px 1fr 44px;
    gap: 6px;
    font-size: 0.8rem;
  }

  .grid {
    grid-template-columns: 1fr !important;
  }

  .btn,
  button.btn {
    max-width: 100%;
  }

  .btn--small {
    white-space: normal;
  }

  /* Calendars: denser cells, no page overflow */
  .book-flow-calendar,
  .manager-cal-grid,
  .admin-dash-cal-layout,
  .book-flow-cal-layout,
  .avail-modal-cal-layout {
    width: 100%;
    max-width: 100%;
  }

  .book-flow-cal-day,
  .manager-cal-day,
  .admin-dash-cal-day,
  .book-flow-cal-cell--empty {
    min-height: 36px;
    font-size: 0.72rem;
    padding: 2px;
  }

  .book-flow-cal-day__status,
  .manager-cal-day__status,
  .admin-dash-cal-day__status {
    font-size: 5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    max-height: 1.3em;
    overflow: hidden;
  }

  .book-flow-cal-day--manager-blocked .book-flow-cal-day__status,
  .book-flow-cal-day--unavailable .book-flow-cal-day__status {
    font-size: 5px !important;
  }

  .admin-model-eval__grid {
    grid-template-columns: 1fr !important;
  }

  .mgr-doc__charts {
    grid-template-columns: 1fr !important;
  }

  .admin-report-card-head,
  .manager-chart-card__head,
  .appointments-strip__head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-report-card-head .btn,
  .manager-chart-card__head .btn {
    width: 100%;
  }
}

/* —— Small phones —— */
@media (max-width: 480px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  header .logo {
    max-width: min(7.25rem, 32vw);
  }

  body.subpage .staff-header-user__meta {
    display: none !important;
  }

  body.subpage .staff-header-user__inner {
    max-width: none !important;
    padding: 0.14rem !important;
    border-radius: 50% !important;
  }

  .book-flow__step {
    min-width: 48px;
  }

  .book-flow-stepper__list {
    justify-content: flex-start;
  }

  .card.kpi h4,
  .kpi h4 {
    font-size: clamp(1.1rem, 6vw, 1.45rem);
    word-break: break-word;
  }

  .admin-report-card-title,
  .manager-chart-card__title,
  .appointments-strip__title {
    font-size: 1rem;
    line-height: 1.3;
  }

  .admin-report-chart-legend,
  .manager-chart-legend {
    gap: 6px 10px;
  }

  .admin-report-chart-legend__item,
  .manager-chart-legend__item {
    font-size: 0.74rem;
  }

  /* Modal actions stack full-width */
  .avail-modal__actions,
  .facility-detail-modal__actions,
  .appointments-modal__actions,
  .manager-edit-modal__actions,
  .admin-settings-modal .form-grid + .full,
  .checkin-ticket__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .avail-modal__action-btns {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .avail-modal__actions .btn,
  .avail-modal__action-btns .btn,
  .facility-detail-modal__actions .btn,
  .appointments-modal__actions .btn,
  .manager-edit-modal__actions .btn,
  .checkin-ticket__actions .btn {
    width: 100%;
  }

  input,
  select,
  textarea,
  .subpage input,
  .subpage select,
  .subpage textarea {
    max-width: 100%;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

/* Prevent sticky hover/focus outlines from causing horizontal scroll */
@media (max-width: 900px) {
  .section,
  .admin-section,
  main.admin-main,
  #section-dashboard,
  #section-analytics,
  #section-reports,
  #section-payments,
  #section-predictive {
    overflow-x: clip;
  }
}

/* ==========================================================================
   Site-wide smoothness + depth (same layout — polish only)
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(196, 107, 130, 0.22);
  color: #3d3340;
}

a,
button,
.btn,
.primary-btn,
.secondary-btn,
input,
select,
textarea,
.card,
.subpage .card,
.admin-section,
.appointments-strip,
.manager-chart-card,
.admin-report-chart-card,
.admin-settings-overlay,
.admin-settings-modal {
  transition-timing-function: var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

a {
  transition: color var(--motion-fast, 0.18s) var(--ease-soft), opacity var(--motion-fast, 0.18s) var(--ease-soft);
}

button,
.btn,
.primary-btn,
.secondary-btn,
.subpage .btn,
.admin-save-btn {
  transition:
    background var(--motion, 0.28s) var(--ease-soft),
    color var(--motion-fast, 0.18s) var(--ease-soft),
    border-color var(--motion-fast, 0.18s) var(--ease-soft),
    box-shadow var(--motion, 0.28s) var(--ease-soft),
    transform var(--motion-fast, 0.18s) var(--ease-out);
}

.btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.subpage .btn:hover:not(:disabled),
.admin-save-btn:hover {
  transform: translateY(-1px);
}

.btn:active,
.primary-btn:active,
.secondary-btn:active,
.subpage .btn:active:not(:disabled) {
  transform: translateY(0);
}

input,
select,
textarea,
.subpage input,
.subpage select,
.subpage textarea {
  transition:
    border-color var(--motion-fast, 0.18s) var(--ease-soft),
    box-shadow var(--motion-fast, 0.18s) var(--ease-soft),
    background var(--motion-fast, 0.18s) var(--ease-soft);
}

input:focus,
select:focus,
textarea:focus,
.subpage input:focus,
.subpage select:focus,
.subpage textarea:focus {
  outline: none;
  border-color: rgba(196, 107, 130, 0.55);
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.16);
}

/* Soft page enter for dashboards & content pages */
.subpage main.container {
  animation: elenest-view-in var(--motion-slow, 0.42s) var(--ease-out) both;
}

body:not(.subpage) .about,
body:not(.subpage) .rooms,
body:not(.subpage) .gallery,
body:not(.subpage) .Customer,
body:not(.subpage) .news,
body:not(.subpage) .newsletter,
body:not(.subpage) footer {
  animation: elenest-view-in 0.55s var(--ease-out) both;
}

body:not(.subpage) .about { animation-delay: 0.02s; }
body:not(.subpage) .rooms { animation-delay: 0.05s; }
body:not(.subpage) .gallery { animation-delay: 0.08s; }
body:not(.subpage) .Customer { animation-delay: 0.1s; }
body:not(.subpage) .news { animation-delay: 0.12s; }

@keyframes elenest-view-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Shared surfaces — slightly richer depth */
.subpage .card,
.manager-chart-card,
.admin-report-chart-card,
.appointments-strip,
.admin-settings-modal,
.manager-edit-modal,
.manager-messages-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 28px rgba(61, 51, 64, 0.06),
    0 4px 12px rgba(196, 107, 130, 0.07);
}

.subpage .card:hover,
.manager-chart-card:hover,
.admin-report-chart-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 16px 34px rgba(61, 51, 64, 0.09),
    0 8px 18px rgba(196, 107, 130, 0.1);
}

.subpage .hero {
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(145deg, #c46b82 0%, #b85f78 55%, #c46b82 100%);
}

.admin-settings-overlay {
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  background: rgba(45, 32, 38, 0.38);
  transition: opacity var(--motion, 0.28s) var(--ease-soft), visibility var(--motion, 0.28s) var(--ease-soft);
}

.admin-settings-overlay:not([hidden]) .admin-settings-modal,
.admin-settings-overlay:not([hidden]) .manager-edit-modal {
  animation: elenest-modal-in 0.34s var(--ease-out) both;
}

@keyframes elenest-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Header link polish (elevation handled on header / .is-scrolled above) */
header ul li a {
  transition:
    color var(--motion-fast, 0.18s) var(--ease-soft),
    background var(--motion-fast, 0.18s) var(--ease-soft),
    box-shadow var(--motion-fast, 0.18s) var(--ease-soft),
    transform var(--motion-fast, 0.18s) var(--ease-out);
}

header ul li a:hover {
  transform: translateY(-1px);
}

header ul li a:active {
  transform: translateY(0);
}

/* ==========================================================================
   Button usability — shared hit targets, spacing, states (all portals)
   ========================================================================== */

.btn,
.primary-btn,
.secondary-btn,
.subpage .btn,
.admin-app .btn,
.admin-save-btn,
button.btn {
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.subpage .btn:focus-visible,
.admin-app .btn:focus-visible,
.admin-save-btn:focus-visible,
button.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 107, 130, 0.28), 0 4px 14px rgba(61, 51, 64, 0.1);
}

.btn:disabled,
.primary-btn:disabled,
.secondary-btn:disabled,
.subpage .btn:disabled,
.admin-app .btn:disabled,
.btn[aria-disabled="true"],
.subpage .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  pointer-events: none;
}

/* Keep action clusters spaced so buttons never overlap */
.book-flow-actions,
.avail-modal__actions,
.guest-receipt-modal__actions,
.payment-rules-modal__actions,
.booking-terms-modal__actions,
.admin-arrival-actions,
.manager-cal-actions,
.staff-access-pin-actions,
.contact-map-actions,
.facility-card__actions,
.login-activity-detail__actions,
.reviews-pagination,
.content-mgmt-actions {
  gap: 0.65rem;
}

.admin-arrival-actions .btn,
.admin-pay-table .admin-arrival-actions .btn,
.reception-table .btn--small,
.checkin-ticket__actions .btn,
.checkin-ticket__actions .btn--small {
  min-height: 2.375rem;
  min-width: 2.375rem;
  padding: 0.5rem 0.85rem;
}

/* Icon / utility controls stay square and tappable */
.nav-menu-toggle,
header button.nav-menu-toggle,
.password-field__toggle,
.customer-notif-bell,
.staff-notif-bell,
.book-nav-icon-btn,
header #bookNavUser button.book-nav-icon-btn,
header #bookNavUser button.book-nav-logout {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  box-sizing: border-box;
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Homepage section rhythm */
body:not(.subpage) .rooms,
body:not(.subpage) .gallery,
body:not(.subpage) .about,
body:not(.subpage) .Customer,
body:not(.subpage) .news {
  position: relative;
}

body:not(.subpage) .rooms .items,
body:not(.subpage) .gallery .items,
body:not(.subpage) .news .box {
  transition: transform var(--motion, 0.28s) var(--ease-out), box-shadow var(--motion, 0.28s) var(--ease-soft);
}

/* Smooth custom scrollbars (Chromium / Safari) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 107, 130, 0.45) rgba(196, 107, 130, 0.08);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(196, 107, 130, 0.06);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(196, 107, 130, 0.55), rgba(127, 193, 66, 0.4));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(196, 107, 130, 0.75), rgba(127, 193, 66, 0.55));
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  header,
  header.is-scrolled {
    transition: none;
  }

  .subpage main.container,
  body:not(.subpage) .about,
  body:not(.subpage) .rooms,
  body:not(.subpage) .gallery,
  body:not(.subpage) .Customer,
  body:not(.subpage) .news,
  body:not(.subpage) .newsletter,
  body:not(.subpage) footer,
  .admin-settings-overlay:not([hidden]) .admin-settings-modal,
  .admin-settings-overlay:not([hidden]) .manager-edit-modal {
    animation: none !important;
  }

  .btn:hover,
  .primary-btn:hover,
  .secondary-btn:hover,
  .subpage .btn:hover:not(:disabled),
  header ul li a:hover,
  header ul li a.role-login-trigger.staff-access-btn:hover,
  .role-login-trigger.staff-access-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   iPhone 13 / phone hard overrides (=430px) � keep desktop look unchanged
   ========================================================================== */
@media (max-width: 430px) {
  :root {
    --page-gutter: 10px !important;
  }

  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  .container,
  main.container,
  .subpage main.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Header: logo + bell + avatar + menu only � no name/role crowding */
  header .content.flex_space {
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    align-items: center !important;
  }

  header .logo,
  body.admin-app .logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: min(42vw, 8.5rem) !important;
  }

  header .site-logo,
  header .logo img,
  header .site-logo-link {
    max-width: 100% !important;
    max-height: 36px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  header .navlinks {
    flex: 0 0 auto !important;
    gap: 4px !important;
    align-items: center !important;
  }

  body.subpage .staff-header-user {
    gap: 4px !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }

  body.subpage .staff-header-user .staff-notif-bell {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  body.subpage .staff-header-user__meta {
    display: none !important;
  }

  body.subpage .staff-header-user__inner {
    max-width: none !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  body.subpage .staff-header-user__icon {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
  }

  .nav-menu-toggle,
  header button.nav-menu-toggle,
  body.admin-app .nav-menu-toggle,
  body.admin-app header button.nav-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Full-width mobile nav under header (not a thin strip inside .navlinks) */
  header .navlinks,
  body.admin-app header .navlinks {
    position: static !important;
  }

  header #menulist,
  header .navlinks > ul.site-nav-list,
  body.admin-app header #menulist,
  body.admin-app header .navlinks > ul.site-nav-list {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    background: #c46b82 !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(45, 32, 38, 0.22) !important;
    z-index: 3000 !important;
  }

  /* Closed menu must fully collapse — border+bg was drawing a pink hairline under the header */
  header #menulist:not(.is-open),
  header .navlinks > ul.site-nav-list:not(.is-open),
  body.admin-app header #menulist:not(.is-open),
  body.admin-app header .navlinks > ul.site-nav-list:not(.is-open) {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    max-height: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  header #menulist.is-open,
  header .navlinks > ul.site-nav-list.is-open,
  body.admin-app header #menulist.is-open,
  body.admin-app header .navlinks > ul.site-nav-list.is-open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: min(70vh, 520px) !important;
    background: #c46b82 !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 18px 40px rgba(45, 32, 38, 0.22) !important;
  }

  header ul li a,
  body.admin-app header ul li a,
  body.admin-app .admin-nav-dropdown-toggle {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.95rem !important;
    padding: 0.85rem 1rem !important;
    min-height: 44px !important;
    background: transparent !important;
  }

  /* Active item must NOT be white-on-white (that looked like a blank bar) */
  header #menulist a.active,
  header #menulist a[href^="#section-"].active,
  body.admin-app header #menulist a.active,
  body.admin-app header #menulist a[href^="#section-"].active,
  body.admin-app header #menulist #adminSettingsToggle.active,
  body.subpage header #menulist #staffSettingsToggle.active,
  body.admin-app header #menulist .admin-nav-dropdown-toggle.active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1f1218 !important;
    -webkit-text-fill-color: #1f1218 !important;
  }

  body.admin-app .admin-nav-dropdown-item,
  .admin-settings-item {
    color: #1f1218 !important;
    -webkit-text-fill-color: #1f1218 !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;
    min-height: 44px !important;
    background: rgba(255, 255, 255, 0.95) !important;
  }

  /* Closed submenus must not reserve a white gap */
  body.admin-app header #menulist .admin-nav-dropdown:not(.is-open) > .admin-nav-dropdown-menu,
  header #menulist .admin-nav-dropdown:not(.is-open) > .admin-nav-dropdown-menu {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  header #menulist .admin-settings-menu[hidden],
  body.admin-app header #menulist .admin-settings-menu[hidden] {
    display: none !important;
  }

  header #menulist .admin-settings-menu:not([hidden]) {
    background: rgba(255, 255, 255, 0.96) !important;
    margin: 4px 10px 8px !important;
    border-radius: 12px !important;
  }

  header ul li a:hover,
  body.admin-app header ul li a:hover,
  body.admin-app .admin-nav-dropdown-toggle:hover {
    color: #1f1218 !important;
    -webkit-text-fill-color: #1f1218 !important;
    background: rgba(255, 255, 255, 0.92) !important;
  }

  header ul li a.role-login-trigger.staff-access-btn,
  .role-login-trigger.staff-access-btn {
    color: #1f1218 !important;
    -webkit-text-fill-color: #1f1218 !important;
    background: #ffffff !important;
  }

  /* Cards / forms fit phone width and stack — no overlap */
  .subpage .card,
  .card.kpi,
  .manager-chart-card,
  .admin-report-chart-card,
  .admin-section .card,
  .book .form,
  .book .text,
  .about .left,
  .about .right,
  .gallery .items,
  .Customer .items {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .book .book-reserve-form {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .book .book-reserve-form .book-date-trigger--range,
  .book .book-reserve-form .book-reserve-submit {
    grid-column: 1 / -1 !important;
  }

  .book .container.flex_space,
  .about .container.flex,
  .container.flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
  }

  /* Chart month labels: CSS fallback if old JS is cached */
  .admin-report-chart-months,
  .manager-admin-charts-mirror .admin-report-chart-months {
    overflow: hidden !important;
  }

  .admin-report-chart-months span,
  .manager-admin-charts-mirror .admin-report-chart-months span {
    font-size: 0.58rem !important;
    letter-spacing: -0.04em !important;
  }

  .admin-report-chart-months span:not(:nth-child(3n+1)):not(:last-child),
  .manager-admin-charts-mirror .admin-report-chart-months span:not(:nth-child(3n+1)):not(:last-child) {
    visibility: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
  }

  .admin-report-chart-wrap,
  .manager-chart-wrap,
  .pa-chart-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .admin-pro-chart,
  .manager-pro-chart,
  .pa-canvas {
    min-width: 280px;
  }

  /* Calendar tap targets */
  .book-flow-cal-day,
  .manager-cal-day,
  .admin-dash-cal-day {
    min-height: 40px !important;
    font-size: 0.7rem !important;
  }

  .book-flow-cal-day__status,
  .manager-cal-day__status,
  .admin-dash-cal-day__status {
    font-size: 5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    max-height: 1.15em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* Predictive / model eval */
  #section-predictive .pa-panel,
  .admin-model-eval {
    padding: 14px 12px !important;
  }

  .admin-model-eval__table-wrap,
  .pa-table-wrap,
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

.reservation-queue-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff6e8;
  color: #6b4a12;
  line-height: 1.45;
}

.reservation-queue-note--unavailable {
  background: #fdecec;
  color: #8a2b2b;
}

.reservation-queue-note--next {
  background: #eef6ff;
  color: #1d4e89;
}

.rq-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rq-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.rq-calendar-card,
.rq-panel {
  background: #fff;
  border: 1px solid #ead7de;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(90, 32, 48, 0.06);
  padding: 14px 16px;
}

.rq-calendar-card {
  flex: 0 0 auto;
}

.rq-cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rq-cal-nav__title {
  flex: 1;
  margin: 0;
  text-align: center;
  color: #4a2430;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rq-cal-nav__btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #ead7de;
  background: #fff;
  color: #a14b63;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(90, 32, 48, 0.05);
}

.rq-cal-nav__btn:hover,
.rq-cal-nav__btn:focus-visible {
  background: #a14b63;
  color: #fff;
}

.rq-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.rq-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b4450;
  font-size: 0.82rem;
  font-weight: 600;
}

.rq-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
  background: #8fbf9a;
}

.rq-dot--pending { background: #e0a15a; }
.rq-dot--reserved { background: #c45b73; }
.rq-dot--unavailable { background: #8a6570; }

.rq-weekdays,
.rq-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}

.rq-weekdays {
  background: #f7f1f3;
  border: 1px solid #ead7de;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.rq-weekdays span {
  text-align: center;
  padding: 6px 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d4d60;
}

.rq-month {
  background: #ead7de;
  border: 1px solid #ead7de;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  align-content: start;
  grid-auto-rows: 42px;
}

.rq-day {
  height: 42px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 4px 6px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.rq-day:hover:not(:disabled) {
  background: #fff8fa;
}

.rq-day__note {
  display: inline-flex;
  align-self: center;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fde8ee;
  color: #8d3048;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rq-day__num {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d2430;
}

.rq-day__mark {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #6b4450;
  text-transform: capitalize;
}

.rq-day.has-note {
  background: #fff7f9;
  box-shadow: inset 3px 0 0 #c45b73;
}
.rq-day.is-outside { background: #fbf8f9; }
.rq-day.is-outside .rq-day__num { color: #b7a3aa; }
.rq-day.is-past,
.rq-day:disabled {
  cursor: default;
  opacity: 1;
  background: #f4f1f2;
}
.rq-day.is-past .rq-day__num,
.rq-day:disabled .rq-day__num {
  color: #c4b4ba;
}
.rq-day.is-past:hover,
.rq-day:disabled:hover {
  background: #f4f1f2;
}
.rq-day.is-today .rq-day__num {
  background: #a14b63;
  color: #fff;
}
.rq-day.is-selected {
  background: #fff1f5;
  box-shadow: inset 0 0 0 2px #a14b63;
}
.rq-day.is-selected.is-today .rq-day__num {
  background: #7a3044;
}

.rq-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rq-panel__kicker {
  margin: 0;
  color: #c45b73;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rq-panel__title {
  margin: 4px 0 0;
  color: #7a3044;
  font-size: 1.15rem;
}

.rq-panel__lead,
.rq-empty {
  margin: 8px 0 0;
  color: #6d5360;
  line-height: 1.45;
}

.rq-group-title {
  margin: 8px 0 0;
  color: #a14b63;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rq-room-list,
.rq-request-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.rq-room {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name pill" "meta pill";
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  border-radius: 14px;
  border: 1px solid #f0d5de;
  background: #fff;
  padding: 12px 14px;
  cursor: pointer;
}

.rq-room__name { grid-area: name; font-weight: 700; color: #3d2430; }
.rq-room__meta { grid-area: meta; color: #7a6570; font-size: 0.82rem; }
.rq-room .rq-pill { grid-area: pill; align-self: center; }

.rq-room--available { background: #f7fcf8; }
.rq-room--pending { background: #fff9f2; }
.rq-room--reserved { background: #fff5f8; }
.rq-room--unavailable { background: #f7f3f4; }
.rq-room.is-selected {
  border-color: #a14b63;
  box-shadow: 0 0 0 2px rgba(161, 75, 99, 0.25);
}

.rq-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #eef6f0;
  color: #24643a;
}

.rq-pill--pending { background: #fff1df; color: #8a5414; }
.rq-pill--reserved { background: #fde8ee; color: #9a3450; }
.rq-pill--unavailable { background: #efe7ea; color: #6a4a54; }

.rq-request {
  border: 1px solid #f0d5de;
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, #fff 0%, #fff8fa 100%);
}

.rq-request.is-closed { opacity: 0.78; }

.rq-request__top,
.rq-request__actions,
.rq-detail__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.rq-request__place {
  display: block;
  color: #c45b73;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rq-request__name {
  display: block;
  margin-top: 2px;
  color: #3d2430;
}

.rq-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 12px 0;
}

.rq-facts__item { margin: 0; }
.rq-facts dt {
  margin: 0;
  color: #9a7180;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.rq-facts dd {
  margin: 2px 0 0;
  color: #3d2430;
  font-weight: 600;
}

.rq-request__details {
  margin: 0 0 12px;
  color: #6d5360;
  line-height: 1.45;
}

.rq-request__actions { flex-wrap: wrap; }

.rq-pay-btn {
  background: #a14b63;
  border-color: #a14b63;
  color: #fff;
}

.rq-pay-btn:hover,
.rq-pay-btn:focus-visible {
  background: #8b3d54;
  color: #fff;
}

.rq-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #efd0d8;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rq-detail__label { color: #9a7180; font-size: 0.78rem; font-weight: 700; }
.rq-detail__value { color: #3d2430; text-align: right; }

.admin-payment-focus-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fde8ee;
  color: #7a3044;
  border: 1px solid #f0c2cd;
}

.admin-pay-row--focus {
  outline: 2px solid #c45b73;
  background: #fff4f7;
}

.rq-doubles__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.rq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 6px;
  background: #faf6f7;
  border: 1px solid #f0e1e6;
  border-radius: 14px;
}

.rq-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #6d4452;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.rq-tab.is-active {
  background: #fff;
  color: #7a3044;
  box-shadow: 0 1px 4px rgba(90, 32, 48, 0.08);
}

.rq-tab__count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3e4e8;
  color: #8d3048;
  font-size: 0.72rem;
}

.rq-tab.is-active .rq-tab__count {
  background: #fde8ee;
}

.rq-empty-card {
  margin-top: 16px;
  padding: 28px 18px;
  text-align: center;
  border: 1px dashed #e7c9d1;
  border-radius: 16px;
  background: #fffafb;
}

.rq-empty-card__title {
  margin: 0;
  color: #7a3044;
  font-weight: 700;
}

.rq-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
  border: 1px solid #f0e1e6;
  border-radius: 16px;
}

.rq-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 920px;
}

.rq-table th,
.rq-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #f6eaee;
  vertical-align: middle;
  color: #3d2430;
  font-size: 0.88rem;
}

.rq-table th {
  position: sticky;
  top: 0;
  color: #8d4d60;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #fbf7f8;
}

.rq-group td {
  background: #f7eef1;
  color: #6d3044;
  font-weight: 700;
  font-size: 0.84rem;
}

.rq-table tbody tr.rq-row--first td {
  background: #fff7f9;
}

.rq-table tbody tr:hover td {
  background: #fff8fa;
}

.rq-strong { font-weight: 700; }
.rq-muted { color: #7a6570; }

.rq-order,
.rq-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #f6eef1;
  color: #6d4452;
  white-space: nowrap;
}

.rq-order--first {
  background: #fde8ee;
  color: #8d3048;
}

.rq-status--notified {
  background: #e7f6ec;
  color: #166534;
}

.rq-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rq-table__detail td {
  background: #fff8fa;
}

@media (max-width: 980px) {
  .rq-layout { grid-template-columns: 1fr; }
  .rq-calendar-card,
  .rq-panel { padding: 14px; }
  .rq-month { grid-auto-rows: 36px; }
  .rq-day { height: 36px; padding: 2px 4px; }
  .rq-day__note { font-size: 0.58rem; padding: 1px 4px; }
  .rq-doubles__head { flex-direction: column; }
  .rq-facts { grid-template-columns: 1fr; }
  .rq-detail__row { flex-direction: column; }
  .rq-detail__value { text-align: left; }
}

/* Phone list for data tables. Hidden on desktop and laptop. */
tr.m-record-extra {
  display: none !important;
}

.m-record-list {
  display: none;
}

.m-record-modal[hidden] {
  display: none !important;
}

.m-record-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: auto;
  max-width: 100%;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: rgba(61, 36, 48, 0.46);
  box-sizing: border-box;
  overflow: hidden;
}

.m-record-modal__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 16px);
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 18px 50px rgba(61, 36, 48, 0.22);
  box-sizing: border-box;
}

.m-record-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  min-width: 0;
  max-width: 100%;
}

.m-record-modal__title {
  margin: 0;
  min-width: 0;
  color: #3d2430;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.m-record-modal__close {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #ead7de;
  background: #fff;
  color: #a14b63;
  font-weight: 700;
  cursor: pointer;
}

.m-record-modal__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  padding: 9px 0;
  border-bottom: 1px solid #f3e6ea;
  color: #3d2430;
  font-size: 0.92rem;
  line-height: 1.35;
}

.m-record-modal__label {
  color: #8d4d60;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.m-record-modal__value,
.m-record-modal__value * {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box;
}

.m-record-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.m-record-modal__actions {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

.m-record-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.m-record-modal__actions .btn,
.m-record-modal__actions .admin-pay-icon-btn,
.m-record-modal__actions a {
  width: 100%;
  min-height: 44px;
  height: auto;
  white-space: normal;
  box-sizing: border-box;
}

.m-record-modal__actions .admin-pay-icon-btn {
  justify-content: flex-start;
  gap: 10px;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 10px 14px;
}

.m-record-modal__actions .admin-pay-icon-tip {
  position: static;
  transform: none;
  opacity: 1;
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: normal;
}

.m-record-modal__actions .admin-pay-table-actions,
.m-record-modal__actions .admin-arrival-actions,
.m-record-modal__actions .rq-table__actions,
.m-record-modal__actions .rq-request__actions {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
}

html.m-record-open,
body.m-record-open {
  overflow: hidden !important;
  max-width: 100%;
}

@media (max-width: 700px) {
  .m-host {
    position: relative;
    overflow-x: hidden !important;
    min-width: 0;
    max-width: 100%;
  }

  table.m-src {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .m-record-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .m-record-section {
    margin: 6px 0 0;
    color: #8d4d60;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .m-record {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px;
    background: #fff;
    border: 1px solid #ead7de;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(90, 32, 48, 0.05);
  }

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

  .m-record__title,
  .m-record__meta {
    margin: 0;
  }

  .m-record__title {
    color: #3d2430;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  .m-record__meta {
    margin-top: 3px;
    color: #7a6570;
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .m-record__view.btn {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 40px;
    padding: 8px 12px;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .table-wrap,
  .subpage .table-wrap,
  .reception-table-wrap,
  .reception-table-host,
  .manager-msg-table-wrap,
  .admin-payment-verification-list,
  .admin-payment-verification-list:has(> .admin-pay-table),
  #adminUpcomingBookingsList,
  #adminUpcomingBookingsList.admin-payment-verification-list,
  #adminUpcomingBookingsCard .admin-payment-verification-list,
  .admin-users-list,
  #adminActivityLogsList,
  #section-activity-logs #adminActivityLogsList,
  .admin-model-eval__table-wrap,
  .admin-app .admin-model-eval__table-wrap,
  .pa-table-wrap,
  .rq-table-wrap,
  .m-host {
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    max-width: 100%;
  }

  .manager-msg-table,
  .manager-reserve-table,
  .admin-pay-table,
  .admin-users-table,
  .activity-logs-table,
  .pa-table,
  .admin-model-eval__table,
  .reception-table,
  .rq-table,
  #adminUpcomingBookingsList .admin-pay-table,
  .admin-pay-table.admin-upcoming-table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media print {
  .m-record-list,
  .m-record-modal {
    display: none !important;
  }

  table.m-src {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   Shared motion — buttons, cards, steps, overlays (layout unchanged)
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.btn,
.primary-btn,
.secondary-btn,
.book-flow-btn-main,
.admin-save-btn,
.staff-access-btn,
button.btn {
  transition:
    transform 0.16s var(--ease-out),
    box-shadow 0.2s var(--ease-soft),
    background-color 0.2s var(--ease-soft),
    border-color 0.2s var(--ease-soft),
    filter 0.2s var(--ease-soft);
}

@media (hover: hover) {
  .btn:hover:not(:disabled):not([aria-disabled="true"]),
  .primary-btn:hover,
  .secondary-btn:hover,
  .book-flow-btn-main:hover:not(:disabled),
  .admin-save-btn:hover:not(:disabled),
  .staff-access-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(196, 107, 130, 0.22);
  }
}

.btn:active:not(:disabled):not([aria-disabled="true"]),
.primary-btn:active,
.secondary-btn:active,
.book-flow-btn-main:active:not(:disabled),
.admin-save-btn:active:not(:disabled),
.staff-access-btn:active,
.book-flow-cal-day:active:not(:disabled) {
  transform: scale(0.97);
}

.subpage .card,
.admin-kpi-card,
.admin-payment-kpi-card,
.manager-chart-card,
.admin-report-chart-card,
.admin-booking-review-card,
.review-card,
.facility-card,
.home-review-kpis__item,
body:not(.subpage) .rooms .items,
body:not(.subpage) .gallery .items,
body:not(.subpage) .news .box {
  transition:
    transform 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-soft);
}

@media (hover: hover) {
  .subpage .card:hover,
  .admin-kpi-card:hover,
  .admin-payment-kpi-card:hover,
  .manager-chart-card:hover,
  .admin-report-chart-card:hover,
  .admin-booking-review-card:hover,
  .review-card:hover,
  .facility-card:hover,
  .home-review-kpis__item:hover,
  body:not(.subpage) .rooms .items:hover,
  body:not(.subpage) .news .box:hover {
    transform: translateY(-3px);
    box-shadow:
      0 14px 28px rgba(61, 51, 64, 0.08),
      0 6px 16px rgba(196, 107, 130, 0.12);
  }
}

.subpage [id^="section-"]:not([hidden]),
.book-flow__panel:not([hidden]) {
  animation: elenest-view-in 0.32s var(--ease-out) both;
}

.book-flow-stepper__marker,
.book-flow-stepper__connector,
.book-flow-stepper__label {
  transition:
    background 0.22s var(--ease-soft),
    color 0.22s var(--ease-soft),
    border-color 0.22s var(--ease-soft),
    box-shadow 0.22s var(--ease-soft),
    transform 0.22s var(--ease-out);
}

.book-flow__step.is-active .book-flow-stepper__marker {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px rgba(196, 107, 130, 0.16), 0 6px 14px rgba(196, 107, 130, 0.28);
}

.book-flow__step.is-done .book-flow-stepper__marker {
  background: linear-gradient(135deg, #c46b82, #d9899c);
  border-color: #c46b82;
  color: #fff;
}

.book-flow__step.is-done .book-flow-stepper__label {
  color: #9a4e63;
}

.book-flow-stepper__connector.is-done {
  background: linear-gradient(90deg, #c46b82, #f3c3cf);
}

@media (max-width: 640px) {
  .book-flow-stepper {
    margin-bottom: 14px;
    padding-bottom: 0;
  }

  .book-flow-stepper__list {
    flex-wrap: nowrap;
  }

  .book-flow__step {
    min-width: 0;
    flex: 1 1 0;
    gap: 4px;
  }

  .book-flow-stepper__marker {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }

  .book-flow-stepper__label {
    font-size: 0.66rem;
    max-width: 4.6rem;
  }

  .book-flow-stepper__connector {
    min-width: 12px;
    max-width: 28px;
    margin-bottom: 18px;
  }
}

.book-flow-cal-day {
  transition:
    transform 0.16s var(--ease-out),
    box-shadow 0.16s var(--ease-soft),
    background 0.16s var(--ease-soft);
}

@media (hover: hover) {
  .book-flow-cal-day--available:hover,
  .book-flow-cal-day--partial:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(196, 107, 130, 0.16);
  }
}

.book-flow-cal-day.is-selected,
.book-flow-cal-day[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #c46b82;
}

.swal2-popup {
  animation: elenest-modal-in 0.28s var(--ease-out) both;
}

.elenest-error-toast:not([hidden]) {
  animation: elenest-toast-in 0.28s var(--ease-out) both;
}

.admin-nav-dropdown-menu:not([hidden]) {
  animation: elenest-drop-in 0.2s var(--ease-out) both;
}

.customer-notif-badge {
  animation: elenest-badge-in 0.35s var(--ease-out) both;
}

.manager-chart-card canvas,
.admin-report-chart-card canvas,
.admin-kpi-card,
.admin-payment-kpi-card {
  animation: elenest-view-in 0.4s var(--ease-out) both;
}

.btn.is-loading,
[aria-busy="true"].btn {
  position: relative;
}

@keyframes elenest-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes elenest-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes elenest-badge-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(196, 107, 130, 0.72), rgba(216, 154, 170, 0.85));
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(176, 90, 112, 0.9), rgba(196, 107, 130, 0.95));
}

@media (prefers-reduced-motion: reduce) {
  .subpage [id^="section-"]:not([hidden]),
  .book-flow__panel:not([hidden]),
  .swal2-popup,
  .elenest-error-toast:not([hidden]),
  .admin-nav-dropdown-menu:not([hidden]),
  .customer-notif-badge,
  .manager-chart-card canvas,
  .admin-report-chart-card canvas,
  .admin-kpi-card,
  .admin-payment-kpi-card {
    animation: none !important;
  }

  .btn:hover,
  .btn:active,
  .primary-btn:hover,
  .primary-btn:active,
  .secondary-btn:hover,
  .secondary-btn:active,
  .book-flow-btn-main:hover,
  .book-flow-btn-main:active,
  .admin-save-btn:hover,
  .admin-save-btn:active,
  .staff-access-btn:hover,
  .staff-access-btn:active,
  .subpage .card:hover,
  .admin-kpi-card:hover,
  .admin-payment-kpi-card:hover,
  .manager-chart-card:hover,
  .admin-report-chart-card:hover,
  .admin-booking-review-card:hover,
  .review-card:hover,
  .facility-card:hover,
  .book-flow__step.is-active .book-flow-stepper__marker,
  .book-flow-cal-day:active,
  .book-flow-cal-day--available:hover,
  .book-flow-cal-day--partial:hover {
    transform: none !important;
  }
}