html,
head,
body,
footer,
a,
p,
div,
input,
label,
span,
img,
h1,
h2,
h3,
h4,
h5,
option,
article,
section,
select {
  padding: 0;
  margin: 0;
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical>.btn-group:before,
.btn-group-vertical>.btn-group:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
}

/* This is a light-only design — no prefers-color-scheme rules exist anywhere in
   this stylesheet. Without an explicit background and color-scheme, a browser in
   dark mode paints the UA canvas black while every text colour here stays dark,
   which made pages that don't paint their own background (search, dashboards)
   unreadable. Declaring it keeps form controls and scrollbars light too. */
html {
  height: 100%;
  width: 100%;
  color-scheme: light;
  background-color: var(--color-bg, #ffffff);
}

label {
  margin-bottom: 5px;
}

body {
  font-family: 'Inter', sans-serif;
  height: 100%;
  width: 100%;
  background-color: var(--color-bg, #ffffff);
  color: var(--color-text, #271826);
}

div {
  display: block;
}

img {
  vertical-align: middle;
  border-radius: 12px !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select {
  border-radius: 8px !important;
}

input:invalid,
textarea:invalid,
select:invalid {
  border-color: #e74c3c !important;
}

input:invalid:focus,
textarea:invalid:focus,
select:invalid:focus {
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

.error-msg {
  display: none;
  color: var(--color-danger);
  font-size: 12px;
  margin-top: 4px;
}

input:invalid~.error-msg,
textarea:invalid~.error-msg {
  display: block;
}

p,
h1,
h2 {
  color: #716f6f;
}

a {
  color: var(--color-primary-deep);
}

a:hover,
a:focus,
.user-dropdown-trigger a {
  color: var(--color-primary-deep);
  text-decoration: none;
  font-weight: bold;
}

.underline {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px !important;
}

/* Global button base — shared flex + rounding for all live .btn paths */
.btn,
button,
input[type="submit"],
input[type="button"],
.btn-create-listing,
.btn-primary,
.btn-success,
.btn-default,
.btn-link,
.btn-block {
  border-radius: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.4;
}

div#star1 {
  margin-top: 12px;
}

.center {
  text-align: center;
}

.lightbox-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
  overflow: visible;
}

.lightbox-dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.lightbox-dialog[open] {
  animation: lightbox-fade-in 0.3s ease;
}

@keyframes lightbox-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox-image {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 12px;
  object-fit: contain;
}

.lightbox-caption {
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  margin: 0;
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lightbox-close:hover {
  background: #fff;
  transform: scale(1.05);
}

.nav-toggle-checkbox {
  display: none;
}

.mobile-header-wrap {
  width: 100%;
}

.mobile-header-wrap:has(.nav-toggle-checkbox:checked) {
  position: relative;
  z-index: 10000;
}

.mobile-header {
  position: sticky;
  top: 0;
  z-index: 100;

  min-height: 76px;
  padding: 10px var(--layout-gutter);
  padding-top: calc(10px + env(safe-area-inset-top));

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 0;
}

.mobile-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.mobile-logo img,
.mobile-menu-header img {
  /* Horizontal lockup (no slogan, transparent). The old asset was a stacked
     lockup, so at a 44px header height it could only ever render ~57px wide.
     A horizontal one uses the header's width instead of its height, so the
     brand reads at a usable size. */
  width: auto;
  height: 34px;
  max-width: 190px;
  display: block;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

/* Hamburger trigger.
   Rebuilt: the old version used a 18%-opacity border (which reads as washed
   grey rather than brand) and spaced the bars with `margin: 4px 0`, giving a
   10px centre-to-centre distance while the open state animated by only 6px —
   so the X never actually closed. Bars are now spaced with flex `gap`, and the
   transform matches that gap exactly. */
.mobile-menu-trigger {
  width: 44px;
  height: 44px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* bar height 2 + gap 5 = 7px centre-to-centre */

  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(39, 24, 38, 0.04);

  color: var(--color-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mobile-menu-trigger:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.mobile-menu-trigger:active {
  background: var(--color-primary-soft);
  box-shadow: inset 0 1px 3px rgba(39, 24, 38, 0.10);
}

/* The real control is the visually-hidden checkbox, so the focus ring has to be
   rendered on this label instead. */
.nav-toggle-checkbox:focus-visible~.mobile-menu-trigger {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Open state reads as a filled button, so it is obvious the menu is showing. */
.nav-toggle-checkbox:checked~.mobile-menu-trigger {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.mobile-menu-trigger .icon-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.16s ease,
    background-color 0.18s ease;
}

.nav-toggle-checkbox:checked~.mobile-menu-trigger .icon-bar {
  background: #fff;
}

/* 7px = one bar (2px) + one gap (5px) — the exact distance to the centre bar. */
.nav-toggle-checkbox:checked~.mobile-menu-trigger .icon-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle-checkbox:checked~.mobile-menu-trigger .icon-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.nav-toggle-checkbox:checked~.mobile-menu-trigger .icon-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-trigger .icon-bar {
    transition: none;
  }
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;

  background: rgba(39, 24, 38, 0.42);
  backdrop-filter: blur(8px);

  display: flex;
  justify-content: flex-end;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-header-wrap:has(.nav-toggle-checkbox:checked) .mobile-menu-overlay,
.user-dropdown:hover .user-dropdown-menu,
.menu-internas ul li:hover ul {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-panel {
  --panel-width: 272px;
  width: min(var(--panel-width), calc(100% - 40px));
  max-width: calc(100% - 40px);
  min-height: 100dvh;
  max-height: 100dvh;

  padding: calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));

  background: #fff;
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: -16px 0 48px rgba(59, 18, 57, 0.18);

  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-header-wrap:has(.nav-toggle-checkbox:checked) .mobile-menu-panel {
  transform: translateX(0);
}

body:has(.nav-toggle-checkbox:checked) .detail-mobile-reserve {
  display: none !important;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding-bottom: 14px;
  border-bottom: 1px solid var(--shadow-purple-5);
}

/* Visually the twin of .mobile-menu-trigger — it replaces it on screen when the
   drawer is open, so it must share the same shape, radius and states rather
   than being a smaller pale circle. 44px meets the tap-target rule too. */
.mobile-menu-close {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(39, 24, 38, 0.04);

  color: var(--color-primary);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.mobile-menu-panel h2 {
  display: none;
}

.mobile-menu-list {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  padding-bottom: 16px;
}

.mobile-menu-item {
  min-height: 44px;
  padding: 9px 12px;
  width: 100%;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr 14px;
  align-items: center;
  gap: 8px;

  border-radius: 10px;
  border: 1px solid #eadceb;
  background: var(--color-surface-alt-2);

  color: #4e1c51 !important;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
}

.mobile-menu-item:link,
.mobile-menu-item:visited,
.mobile-menu-item:hover,
.mobile-menu-item:focus,
.menu-internas .mobile-menu-item:link,
.menu-internas .mobile-menu-item:visited,
.menu-internas .mobile-menu-item:hover,
.menu-internas .mobile-menu-item:focus {
  color: #4e1c51 !important;
  text-decoration: none;
}

.mobile-menu-item>span:nth-child(2) {
  min-width: 0;
  overflow-wrap: break-word;
}

.mobile-menu-item>span {
  color: inherit !important;
  opacity: 1;
}

.mobile-menu-item--danger {
  color: var(--color-danger-deep);
  border-color: rgba(155, 27, 27, 0.1);
  background: #fdf5f5;
}

.mobile-menu-icon {
  display: none;
}

.mobile-menu-arrow {
  color: #8c5a87;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-align: right;
}

.mobile-menu-primary {
  min-height: 44px;
  margin-top: 14px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;

  display: grid;
  place-items: center;

  border-radius: 999px;
  background: var(--color-primary);
  color: #fff !important;

  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

.mobile-menu-primary:link,
.mobile-menu-primary:visited,
.mobile-menu-primary:hover,
.mobile-menu-primary:focus {
  color: #fff !important;
  text-decoration: none;
}

.mobile-menu-hint {
  margin: 10px 0 0;

  color: #8c7a8c;
  text-align: center;
  font-size: 12px;
}

.menu-internas .mobile-menu-panel,
.menu-internas .mobile-menu-panel * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.menu-internas .mobile-menu-item {
  min-height: 44px;
  padding: 9px 12px !important;
  color: #4e1c51 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2;
}

.menu-internas .mobile-menu-primary,
.menu-internas .mobile-menu-hint {
  font-weight: 400 !important;
}

.menu-internas .mobile-menu-primary {
  padding: 8px 12px !important;
  color: #fff !important;
  font-size: 14px !important;
}

@media (max-width: 768px) {

  .menu-internas .navbar,
  .menu-internas .navbar-default,
  .menu-internas .navbar-fixed-top,
  .menu-internas .navbar-header,
  .menu-internas .navbar-collapse,
  .menu-internas #navbar:not(.mobile-menu-overlay) {
    display: none !important;
  }
}

.login-dialog {
  border: none;
  border-radius: 18px;
  padding: 0;
  max-width: 420px;
  width: min(92vw, 420px);
  color: var(--color-text);
  background: #fff;
  box-shadow: 0 24px 70px rgba(39, 24, 38, 0.24);
}

.login-dialog::backdrop {
  background: rgba(39, 24, 38, 0.5);
  backdrop-filter: blur(6px);
}

.login-dialog[open] {
  animation: dialog-fade-in 0.3s ease;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.login-dialog-content {
  position: relative;
  padding: 28px;
}

.login-dialog-close-form {
  margin: 0;
}

.login-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border: 1px solid var(--shadow-purple-9);
  border-radius: 999px;
  background: var(--color-bg-soft);

  color: var(--color-primary);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  appearance: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.login-dialog-close:hover {
  background: #f1e5f1;
  border-color: rgba(89, 22, 84, 0.22);
  color: var(--color-primary-dark);
}

.login-dialog-title {
  margin: 0 44px 22px 0;
  color: var(--color-primary-deep);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-field {
  display: grid;
  gap: 7px;
  margin: 0;
}

.login-field__label {
  color: var(--color-primary-deep);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.login-field__control {
  min-height: 48px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  border: 1px solid var(--shadow-purple-4);
  border-radius: 12px;
  background: var(--color-surface-alt-2);
  color: var(--color-primary);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.login-field__control:focus-within,
.detail-message__input:focus,
.detail-booking__input:focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: var(--shadow-focus);
}

.login-field__icon {
  display: grid;
  place-items: center;
  color: var(--color-muted-strong);
  font-size: 15px;
}

.login-field__input {
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  padding: 0 14px 0 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
}

.login-field__input::placeholder {
  color: #9b8a9a;
  opacity: 1;
}

.login-field__control:has(.login-field__input:user-invalid),
.login-field__control:has(.login-field__input:invalid:not(:placeholder-shown)) {
  border-color: #d34b4b;
  box-shadow: 0 0 0 3px rgba(211, 75, 75, 0.1);
}

.login-submit {
  min-height: 48px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.login-submit:hover,
.login-submit:focus-visible {
  background: var(--color-primary-dark);
}

.login-form__message {
  min-height: 18px;
  margin: 0;
  color: #b22f2f;
  font-size: 13px;
  text-align: center;
}

.login-form__links {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  color: var(--color-muted-2);
  font-size: 13px;
  text-align: center;
}

.login-form__links .rodapeContent {
  margin: 0;
  padding: 0 !important;
}

.login-form__links a {
  color: #5b1856 !important;
  font-weight: 600;
  text-decoration: none;
}

.login-form__links a:hover,
.login-form__links a:focus-visible {
  text-decoration: underline;
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin: 15px;
}

article.container h2 {
  margin-top: 20px;
}

.menu-internas {
  position: relative;
  width: 100%;
  display: table;
  margin: 0;
  z-index: 2;
  color: #999;
  border-bottom: 5px solid var(--color-primary-deep);
  padding: 0;
  background: #fff;
}

.menu-internas .marca {
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

.menu-internas .marca a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0 !important;
  line-height: 0;
}

.menu-internas .marca h1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.menu-internas .marca img {
  width: auto;
  max-height: 72px;
  height: 72px;
  display: block;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.menu-internas a {
  font-size: 15px;
  color: #999;
  padding: 0 10px;
  text-decoration: none;
  transition: all .3s ease;
}

.menu-internas #nav-mobile {
  float: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.menu-internas #nav-mobile ul li {
  display: inline-block;
  width: auto;
  float: left;
  list-style: none;
  background: #fff;
}

.user-dropdown {
  position: relative;
}

.user-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 10px;
}

.user-dropdown-trigger img {
  height: 35px;
  width: 35px;
}

.user-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 200px;
  margin: 0;
  padding: 10px 0;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all .3s ease;
  z-index: 1000;
}

.user-dropdown-menu li {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border-light);
  background: #fff;
}

.user-dropdown-menu li:last-child {
  border-bottom: none;
}

.user-dropdown-menu li a {
  display: block;
  padding: 8px 15px;
  color: var(--color-primary-deep);
  text-decoration: none;
  font-size: 14px;
}

.user-dropdown-menu li a:hover {
  background: #f5f5f5;
  color: var(--color-primary-deep);
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.menu-internas a:hover,
.menu-internas a:focus {
  color: var(--color-primary-deep);
  padding: 0 10px;
  text-decoration: none;
}

.menu-internas ul li {
  border: 0;
  padding: 5px 10px;
  margin: 0;
  display: block;
  float: left;
  width: 100%;
  background: #fff;
}

.menu-internas #nav-mobile ul li ul li {
  border: 0;
  padding: 5px 10px;
  margin: 0;
  display: block;
  float: left;
  width: 100%;
  background: #fff;
  border-bottom: 1px solidvar(--color-border-light);
}

.menu-internas ul li ul li:last-child {
  padding-bottom: 15px;
}

#nav-mobile ul li img {
  height: 35px;
  margin-top: -14px;
}

:root {
  --color-primary: #5b1856;
  --color-primary-dark: #3b1239;
  --color-primary-soft: #f6eff6;
  --color-accent: #b985b4;
  --color-text: #271826;
  --color-muted: #6c5f6d;
  --color-border: rgba(89, 22, 84, 0.14);
  --color-bg: #ffffff;
  --color-bg-soft: #faf7fb;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;


  --layout-gutter: 24px;
  --layout-max-width: none;
  --layout-form-max: none;

  --color-primary-deep: #4e1c51;
  --color-muted-strong: #8c6a89;
  --color-muted-2: #6d5b6b;
  --shadow-focus: 0 0 0 3px rgba(91, 24, 86, 0.12);
  --border-strong: rgba(82, 20, 74, 0.16);
  --shadow-card: 0 12px 40px rgba(59, 18, 57, 0.10);

  /* Round-2 DRY: semantic color/shadow tokens (reuses --color-primary-deep, --color-bg-soft, --color-text) */
  --color-danger: #e74c3c;
  --color-danger-deep: #9b1b1b;
  --color-success: #1e8f56;
  --color-success-soft: #eaf8ef;
  --color-success-border: #bfe8ce;
  --color-warning: #b8860b;
  --color-muted-purple: #836085;
  --color-surface-alt-2: #fcf9fc;
  --color-surface-alt-3: #faf7fa;
  --color-surface-alt-4: #f8f2f8;
  --color-border-light: #ececec;
  --shadow-purple-1: rgba(82, 20, 74, 0.1);
  --shadow-purple-2: rgba(82, 20, 74, 0.12);
  --shadow-purple-3: rgba(82, 20, 74, 0.14);
  --shadow-purple-4: rgba(89, 22, 84, 0.16);
  --shadow-purple-5: rgba(89, 22, 84, 0.08);
  --shadow-purple-6: rgba(82, 20, 74, 0.09);
  --shadow-purple-7: rgba(91, 24, 86, 0.12);
  --shadow-purple-8: rgba(91, 24, 86, 0.1);
  --shadow-purple-9: rgba(89, 22, 84, 0.12);
  --shadow-purple-10: rgba(78, 28, 81, 0.06);
}

.container,
.page-master>.container {
  width: 100% !important;
  max-width: var(--layout-max-width) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  padding-left: var(--layout-gutter) !important;
  padding-right: var(--layout-gutter) !important;
  box-sizing: border-box;
}

.page-master {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.eyebrow {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 var(--space-3) 0;
}

.hero {
  background: radial-gradient(circle at top left, rgba(89, 22, 84, 0.10), transparent 32rem),
    linear-gradient(180deg, #fff 0%, var(--color-bg-soft) 100%);

  padding: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 48px;
  align-items: center;
}

.hero-content {
  order: 1;
}

.hero-media {
  order: 2;
}

.hero h1 {
  margin: 0;
  max-width: 100%;
  color: var(--color-primary-dark);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  max-width: 100%;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-top: var(--space-4);
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(59, 18, 57, 0.15);
}

.hero-media .mobile {
  display: none;
}

.search-panel {
  margin-top: var(--space-5);
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}

.search-panel fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
}

.search-panel legend {
  margin-bottom: var(--space-3);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 14px;
}

.chip-group,
.listing-card-actions,
.agenda-dashboard__controls,
.agenda-sync__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.chip:hover {
  background: #ece0ec;
}

.chip input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}

.search-row>label {
  display: grid;
  gap: 8px;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 14px;
}

.search-input-wrap {
  width: 100%;
}

.search-row input[type="search"] {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid #ddd0dc;
  border-radius: 14px;
  font: inherit;
  font-size: 15px;
  outline: none;
}

.search-row input[type="search"]:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.search-btn {
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}

.search-btn:hover {
  background: var(--color-primary-dark);
}

.popular-searches {
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-size: 13px;
}

.popular-searches a,
.detail-breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.popular-searches a:hover {
  text-decoration: underline;
}

.featured-spaces {
  padding-top: 48px;
  padding-bottom: 72px;
  padding-inline: 0;
  background: var(--color-bg-soft);
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.section-header h2 {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.listing-card {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 40px rgba(59, 18, 57, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(59, 18, 57, 0.14);
}

.listing-card a {
  text-decoration: none;
  color: inherit;
}

.listing-card__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 10px 14px;
  background: #25d366;
  color: #fff !important;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: background 160ms ease, transform 160ms ease;
}

.listing-card__whatsapp:hover {
  background: #1ebe57;
  transform: translateY(-1px);
}

.listing-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-surface-alt-4), #f1e8f1);
}

.listing-media img,
.detail-hero__main img,
.hla-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-media__fallback {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 24px;
  color: var(--color-primary);
  text-align: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(185, 133, 180, 0.18), transparent 34%),
    linear-gradient(145deg, #fbf7fb, #f2eaf2);
}

.listing-media__fallback svg {
  width: 52px;
  height: 52px;
}

.listing-media__fallback span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
}

.listing-media__fallback--error {
  display: none;
}

.listing-media.has-image-error img {
  display: none;
}

.listing-media.has-image-error .listing-media__fallback--error {
  display: grid;
}

.price-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.listing-body {
  padding: 18px;
}

.listing-body h3 {
  margin: 0 0 6px 0;
  color: var(--color-primary-dark);
  font-size: 15px;
  line-height: 1.3;
}

.listing-card-footer {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

.listing-card-meta,
.inbox-detail__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.listing-card-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}

.listing-card-chip.is-active {
  color: #0f6b3c;
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
}

.listing-card-chip.is-paused {
  color: #8a4a08;
  background: #fff3e5;
  border-color: #ffd6ab;
}

.listing-card-meta__text,
.detail-booking__period small {
  color: var(--color-muted);
  font-size: 12px;
}

.listing-card-action {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.listing-card-action--ghost,
.profile-button--ghost {
  background: #fff;
  color: var(--color-primary);
  border-color: var(--border-strong);
}

.listing-card-action--danger {
  background: #fff4f4;
  color: var(--color-danger-deep);
  border-color: #f0c3c3;
}

.listing-card-action--success {
  background: #ebf8ef;
  color: #146c43;
  border-color: var(--color-success-border);
}

.listing-location,
.detail-owner__rating {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.distance-badge {
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.rating {
  margin: 10px 0 0 0;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 13px;
}

.rating.new-listing {
  color: var(--color-accent);
  font-weight: 600;
}

.search-page {
  min-height: 60vh;
}

.search-filters-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  padding: 0.75rem 1.5rem;
}

.search-filters-bar__quick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

/* Sized in px, not rem: the root font-size here is 10px (Bootstrap), so the
   original 0.85rem/0.45rem rendered as 8.5px text in a 23px-tall pill — far
   below a usable tap target. min-height meets the 44px touch guideline. */
.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-pill:hover,
.settings-flag:hover:not(.is-active),
.hla-btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-pill--active,
.filter-chip--active,
.agenda-sync__button--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.filter-pill--active:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.filter-pill--more {
  gap: var(--space-2);
}

.filter-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.filter-pill--active .filter-pill__badge {
  background: #fff;
  color: var(--color-primary);
}

body.drawer-open {
  overflow: hidden;
}

.filter-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
}

.filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  height: 100vh;
  height: 100dvh;
  background: #fff;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-drawer--entering,
.filter-drawer--leaving {
  will-change: transform;
}

.filter-drawer--closed {
  transform: translateX(100%);
}

.filter-drawer--open {
  transform: translateX(0);
}

.filter-drawer__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.filter-drawer__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-primary-dark);
}

.filter-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dim-md);
  height: var(--dim-md);
  border: none;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.filter-drawer__close:hover {
  background: var(--color-accent);
  color: #fff;
}

.filter-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-2) var(--space-5) var(--space-5);
}

.filter-section {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.filter-section:last-child {
  border-bottom: none;
}

.filter-section__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}

.filter-section__value {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.filter-section__unit {
  color: var(--color-muted);
  font-weight: 500;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--color-primary);
}

.filter-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.range-dual {
  position: relative;
  height: var(--dim-md);
}

.range-dual__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: #e6e0e6;
  border-radius: 4px;
}

.range-dual__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: 4px;
}

.range-dual__input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--dim-md);
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.range-dual__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.range-dual__input::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.range-dual__input:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.range-inputs {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.range-inputs__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.range-inputs__box {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--space-2);
  background: #fff;
  transition: border-color 0.15s ease;
}

.range-inputs__box:focus-within {
  border-color: var(--color-primary);
}

.range-inputs__prefix {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.range-inputs__box input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.range-inputs__dash {
  padding-bottom: var(--space-3);
  color: var(--color-muted);
}

.range-single__input {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #e6e0e6;
  border-radius: 4px;
  outline: none;
  accent-color: var(--color-primary);
}

.range-single__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.range-single__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.range-single__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.filter-drawer__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: #fff;
}

.filter-drawer__clear {
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: underline;
  cursor: pointer;
}

.filter-drawer__apply {
  flex: 1;
  max-width: 62%;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--space-3);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.filter-drawer__apply:hover {
  background: var(--color-primary-dark);
}

@media (max-width: 520px) {
  .filter-drawer {
    width: 100vw;
  }

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

}

.filter-dropdown {
  position: relative;
}

.filter-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-dropdown__trigger:hover {
  border-color: var(--color-primary);
}

.filter-dropdown__arrow {
  font-size: 12px;
  color: #999;
}

/* ─── Search split view: scrolling list + sticky map ──────────────────────
   The split view is in-page and never an overlay on desktop. Below the
   breakpoint the map is not rendered inline at all — it opens as a
   full-screen sheet from .search-map-toggle (see "Search map sheet" below).

   Breakpoint is 1024px because that is the breakpoint this file already used
   for .search-map. It is deliberately NOT Bootstrap's 992px — do not add a
   third scheme to a file that already mixes 1024 / 960 / 768.

   --search-bar-h is the height of the sticky .search-filters-bar (a 44px pill
   plus 2 x 7.5px padding). The map sticks *below* the bar instead of under it.
   Tokens are scoped to .search-page so nothing else on the site inherits them.
   ───────────────────────────────────────────────────────────────────────── */
.search-page {
  --search-bar-h: 60px;
  --search-map-w: clamp(36rem, 40%, 56rem);
  --search-sheet-z: 1100;
}

/* --search-bar-h is measured and written inline on .search-page by the page
   script. On a phone the pill bar wraps to full height (~893px at 375px), so
   the token is only trustworthy where the bar is actually a fixed-height
   sticky strip. Nothing below the split-view breakpoint depends on it. */
.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

/* No overflow-y here: it would make the list its own scroll container, so a
   card scrollIntoView() from a pin click would move the wrong scrollport. */
.search-results {
  min-width: 0;
  padding: var(--layout-gutter);
  box-sizing: border-box;
}

.search-map {
  display: none;
  min-width: 0;
  box-sizing: border-box;
}

.search-map__canvas {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 12px var(--shadow-purple-5);
  background: var(--color-bg-soft);
}

.search-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.search-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0.5rem 0;
}

.search-count {
  font-size: 15px;
  color: #666;
}

.search-count__number {
  font-weight: 700;
  color: var(--color-primary);
}

.search-location-info {
  margin: 8px 0 0;
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.search-location-info strong {
  color: var(--color-primary-dark);
}

.search-location-icon {
  font-size: 16px;
}

.sort-indicator {
  color: var(--color-muted);
  font-size: 13px;
  font-style: italic;
}

.search-sort {
  margin: 1rem 0;
  display: flex;
  justify-content: flex-end;
}

.search-sort label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--color-muted);
}

.search-sort select {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  font-size: 14px;
}

.price-period-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
}

.search-empty {
  text-align: center;
  padding: 3rem;
  color: #999;
  font-size: 15px;
}

.search-scroll-sentinel {
  width: 100%;

}

.search-scroll-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0 2rem;
  font-size: var(--font-size-md);
  color: #888;
}

@media (min-width: 1024px) {
  .search-layout {
    grid-template-columns: minmax(0, 1fr) var(--search-map-w);
    min-height: calc(100vh - var(--search-bar-h));
  }

  .search-results .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The sheet only exists below this breakpoint, so its dismiss control is
     meaningless here — the map is permanently on screen and cannot be closed.
     !important because the control is toggled with Alpine x-show, which writes
     an inline display. */
  .search-map__close {
    display: none !important;
  }

  .search-map {
    display: block;
    position: sticky;
    top: var(--search-bar-h);
    height: calc(100vh - var(--search-bar-h));
    padding: calc(var(--layout-gutter) / 2) var(--layout-gutter) calc(var(--layout-gutter) / 2) 0;
  }
}

@media (max-width: 1023px) {
  .search-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* .filter-pills is `flex: 1 1 0` inside a wrapping row, so on a phone its
     flex-basis collapses and min-width:auto pins it to the widest single pill
     (~181px of a 345px row). Every pill wider than that got its own line: the
     bar measured 893px tall at 375px — a full screen of filters above the
     first result, and the reason --search-bar-h reads ~893px there.
     The fix keeps the horizontal pill bar the design calls for: professions
     get their own row and scroll sideways, while Period / Price / More Filters
     stay on a second row and never scroll out of reach. Both classes are used
     only by inc/search/_quick-pills.html. */
  .search-filters-bar__quick {
    row-gap: var(--space-2);
  }

  .filter-pills {
    flex: 1 0 100%;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-pills::-webkit-scrollbar {
    display: none;
  }

  .filter-pills > * {
    flex: 0 0 auto;
  }

  /* Stays display:none until .is-sheet-open — see "Search map sheet". */
  .search-map {
    display: none;
  }
}

.how-it-works {
  padding-block: 72px;
  padding-inline: 0;
  text-align: center;
}

.how-it-works h2 {
  margin: 0 0 40px 0;
  color: var(--color-primary-dark);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.step-card {
  padding: 28px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(59, 18, 57, 0.06);
  text-align: center;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.step-card h3 {
  margin: 0 0 8px 0;
  color: var(--color-primary-dark);
  font-size: 15px;
}

.step-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
}

.cta-owners {
  padding-block: 64px;
  padding-inline: 0;
  background: var(--color-primary);
}

.cta-owners__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cta-owners__text {
  flex: 1;
  max-width: 100%;
}

.cta-owners h2 {
  margin: 0 0 8px 0;
  color: #fff;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
}

.cta-owners p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.5;
}

.cta-owners__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s;
  white-space: nowrap;
}

.cta-owners__btn:hover {
  transform: scale(1.03);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  max-width: 100%;
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-media {
    order: -1;
  }

  .hero-media img {
    border-radius: 16px;
    max-height: 280px;
  }

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

  .cta-owners__inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  :root {
    --layout-gutter: 16px;
  }


  .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--layout-gutter) !important;
    padding-right: var(--layout-gutter) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .menu-internas .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  .menu-internas .md-show {
    display: none !important;
  }

  .menu-internas .md-hidden {
    display: block !important;
  }


  .menu-internas {
    position: sticky;
    top: 0;
    z-index: 50;
    display: block;
    width: 100%;
    min-height: 88px;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .menu-internas .navbar {
    min-height: 88px;
    margin: 0;
    border: 0;
    background: #fff;
  }

  .menu-internas .container {
    padding-left: 0;
    padding-right: 0;
  }

  .menu-internas .navbar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 88px;
    padding: 12px 12px;
    padding-top: calc(12px + env(safe-area-inset-top));
    gap: 12px;
  }

  .menu-internas .navbar-header h1 {
    margin: 0;
    font-size: 1px;
    line-height: 1;
  }

  .menu-internas .navbar-header a {
    flex: 0 1 auto;
    order: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    margin-right: auto;
  }

  .menu-internas .navbar-header img {
    height: 64px !important;
    width: auto;
    max-width: none;
    display: block;
  }

  .menu-internas .navbar-toggle {
    order: 2;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--shadow-purple-4);
    border-radius: 999px;
    background: #fff;
    margin: 0 !important;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    float: none !important;
    position: static;
  }

  .menu-internas .navbar-toggle .icon-bar {
    width: 18px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
  }


  .hero {
    padding: 0;
  }

  .hero-grid {
    gap: 18px;
  }

  .hero-media {
    display: none;
  }

  .hero h1 {
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: -0.01em;
  }

  .hero-subtitle {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 10px;
    color: var(--color-muted);
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    color: var(--color-primary);
  }


  .search-panel,
  form.search-panel {
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
    padding: 16px;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(78, 28, 81, 0.06);
    overflow: hidden;
  }

  .search-panel fieldset {
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px 0;
    min-width: 0;
  }

  .search-panel legend {
    font-size: 12px;
    margin-bottom: 8px;
    color: var(--color-text);
  }


  .chip-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    width: 100%;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .chip-group::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 999px;
  }

  .chip input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }


  .search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  .search-row>label {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .search-row>label>span {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--color-text);
  }

  .search-input-wrap {
    width: 100%;
    max-width: 100%;
  }

  .search-row input[type="search"] {
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    height: 52px;
    font-size: 16px;
    border-radius: 12px;
    padding: 0 14px;
  }

  .search-btn {
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    height: 52px;
    font-size: 15px;
    border-radius: 12px;
    margin-top: 2px;
  }

  .popular-searches {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 14px;
    color: var(--color-muted);
  }

  .popular-searches a {
    color: var(--color-primary);
    white-space: nowrap;
  }


  .featured-spaces {
    padding-top: 48px;
    padding-bottom: 48px;
    padding-inline: 0;
  }

  .section-header {
    flex-direction: column;
    align-items: start;
    gap: 8px;
    margin-bottom: 20px;
  }

  .section-header h2 {
    font-size: 22px;
  }

  .listing-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .listing-card {
    border-radius: 18px;
  }

  .listing-media img {
    aspect-ratio: 16 / 10;
  }

  .price-badge {
    font-size: 12px;
    padding: 5px 10px;
    left: 12px;
    top: 12px;
  }

  .listing-body {
    padding: 14px;
  }

  .listing-body h3 {
    font-size: 15px;
  }

  .listing-location {
    font-size: 13px;
  }

  .rating {
    font-size: 12px;
  }


  .how-it-works {
    padding-block: 48px;
    padding-inline: 0;
  }

  .how-it-works h2 {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .step-card {
    padding: 20px 18px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .step-number {
    margin: 0;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  .step-card h3 {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .step-card p {
    font-size: 13px;
  }


  .cta-owners {
    padding-block: 48px;
    padding-inline: 0;
  }

  .cta-owners__inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .cta-owners h2 {
    font-size: 20px;
  }

  .cta-owners p {
    font-size: 14px;
  }

  .cta-owners__btn {
    width: 100%;
  }


  .site-footer {
    display: none;
  }


  #ng-view {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }


  .menu-internas .md-show,
  .menu-internas .xs-hide {
    display: none !important;
  }

  .menu-internas .md-hidden,
  .menu-internas .xs-show {
    display: block !important;
  }
}

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--color-border);
  }

  .mobile-bottom-nav a {
    min-height: 52px;
    display: grid;
    place-items: center;
    gap: 4px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  .mobile-bottom-nav .nav-icon {
    width: 22px;
    height: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-bottom-nav .nav-label {
    font-size: 12px;
  }

  .mobile-bottom-nav a.is-active {
    color: var(--color-primary);
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 22px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .chip {
    padding: 0 12px;
    min-height: 44px;
  }
}

.form-control:focus {
  border-color: var(--color-primary-deep);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px var(--color-primary-deep), 0 0 8px var(--color-primary-deep);
  box-shadow: inset 0 1px 1px var(--color-primary-deep), 0 0 8px var(--color-primary-deep);
}

.form-group {
  margin-bottom: 15px;
}

.container {
  margin-right: 0;
  margin-left: 0;
}

select option:hover {
  background-color: #fff;
}

.modal-title {
  color: #7a7a7a;
  font-size: 34px;
  line-height: 40px;
  font-weight: 300;
  margin-bottom: 10px;
  text-align: center;
}

.glyphicon {
  top: 0;
}

.form-control {
  height: 33px;
  border-radius: 8px !important;
  border: 1px solid var(--color-primary-deep);
}

.btn-primary {
  color: #fff;
  background-color: var(--color-primary-deep);
  border-radius: 12px;
}

.btn-primary:hover,
.btn-primary:focus {
  color: var(--color-muted-purple);
  background-color: #fff;
  border-color: var(--color-muted-purple);
}

.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open>.dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open>.dropdown-toggle.btn-primary:focus {
  color: #fff;
  background-color: var(--color-muted-purple);
  border-color: var(--color-muted-purple);
}

/* Headings follow the text direction of their section. Centering used to be
   applied globally here, which fought the left-aligned section headers and the
   login title's asymmetric margin. Sections that want centering opt in below. */
h2 {
  margin-top: 10px;
}

.page-status h1,
.page-status h2,
.page-status p {
  text-align: center;
}

.btn-success {
  color: #fff;
  background-color: #a189a1 !important;
  border-color: #a189a1 !important;
  height: 30px;
  padding: 0px 10px 0px 10px;
  border: 0;
}

.inscricao-topo {
  background: #1c1456;
  height: 170px;
  width: 100%;
  position: relative;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
}

.inscricao-topo img {
  position: relative;
  max-width: 745px;
  width: 90%;
  margin: 0 auto;
  display: block;
  z-index: 1;
}

.inscricao-rodape {
  border-top: 3px solid #e9b933;
  margin-top: 20px;
  padding: 20px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.inscricao-rodape img {
  z-index: 2;
  position: relative;
  margin: 0 20px;
}

.inscricao-rodape::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background: #e9b933;
}

.inscricao-rodape::before {
  content: "";
  display: block;
  width: 110px;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
  border-radius: 100%;
}

@media screen and (max-width: 730px) {
  .inscricao-rodape {
    flex-direction: column;
  }
}

.desktop-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 var(--layout-gutter);
  box-sizing: border-box;
  width: 100%;
}

.desktop-nav-row #nav-mobile>ul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-nav-row #nav-mobile>ul>li {
  float: none;
  width: auto;
  padding: 0;
  margin: 0;
}

.desktop-nav-row #nav-mobile>ul>li>a {
  margin: 0;
}

.desktop-logo {
  /* Horizontal lockup: the height that made a stacked logo look right now
     leaves it oversized, so trade height for width. */
  height: 46px;
  width: auto;
  max-width: 260px;
  display: block;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.clickable {
  cursor: pointer;
}

.zoom-in {
  cursor: zoom-in;
}

.pix-qr-wrap {
  margin-top: 15px;
}

.page-contato {
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  padding-inline: 0;
  box-sizing: border-box;
}

footer {
  width: 100%;
  height: auto;
  display: table;
  background: RGB(71, 19, 74);
  text-align: center;
}

footer p {
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}

footer .redes {
  width: 100%;
  padding: 15px;
  background: var(--color-muted-purple);
}

.md-hidden {
  display: none;
}

@media(max-width:1280px) {
  .page-contato {
    max-width: none;
    margin-top: 12px;
    margin-left: 0;
    margin-right: 0;
  }
}

@media(max-width:980px) {
  .page-contato {
    max-width: 750px;
    margin-top: 12px;
    margin-left: 0;
  }
}

@media(max-width:768px) {
  .page-contato {
    max-width: 600px;
    margin-top: 12px;
    margin-left: 0;
  }

  .menu-internas nav {
    float: right;
    margin-right: 0;
    border-bottom: 5px solid var(--color-primary-deep);
  }
}

@media (min-width: 430px) {
  .xs-show {
    display: none;
  }

  .page-contato {
    margin-left: 0;
  }
}

@media(max-width:425px) {
  .menu-internas a {
    font-size: 15px;
    color: #999;
    padding: 0px;
    text-decoration: none;
    transition: all .3s ease;
  }

  .menu-internas #nav-mobile {
    float: right;
    margin: 31px;
    display: none;
  }

  .xs-show {
    display: inline;
  }
}

@media(max-width: 415px) {
  .page-contato {
    margin-top: 32px;
    margin-left: 0px;
  }

  .marca img {
    height: 56px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    object-position: left center;
    background: transparent;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

.detail-page {
  color: var(--color-text);
}

.detail-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 24px 0 0;
  padding-inline: var(--layout-gutter);
  box-sizing: border-box;
  height: 480px;
  border-radius: 0;
  overflow: hidden;
}

.detail-hero__main {
  grid-row: span 2;
  background: #000;
}

.detail-hero__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

.detail-hero__thumb {
  border: 0;
  padding: 0;
  margin: 0;
  background: #000;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.detail-hero__thumb img,
.detail-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}

.detail-hero__thumb:hover img {
  transform: scale(1.05);
}

.detail-hero__thumb--more {
  background: rgba(59, 18, 57, 0.85);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.detail-hero__thumb--more:hover {
  background: rgba(59, 18, 57, 1);
}

.detail-title {
  padding-top: 32px;
  padding-bottom: 8px;
  padding-inline: 16px;
}

.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.detail-breadcrumb a:hover {
  text-decoration: underline;
}

.detail-breadcrumb__sep {
  color: var(--color-muted);
}

.detail-title__h1 {
  margin: 0 0 8px 0;
  color: var(--color-primary-dark);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.detail-title__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--color-muted);
  font-size: 14px;
}

.detail-title__sep {
  color: var(--color-muted);
}

.detail-body {
  padding-top: 24px;
  padding-bottom: 72px;
  padding-inline: var(--layout-gutter);
  box-sizing: border-box;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 32px;
  align-items: start;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.detail-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(78, 28, 81, 0.06);
}

.detail-card .eyebrow {
  margin-bottom: 12px;
}

.detail-description {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
  white-space: pre-line;
}

.detail-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.detail-rate__stars {
  display: inline-flex;
  gap: 2px;
}

.detail-rate__value {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.detail-rate__msg {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

.detail-reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-review {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.detail-review:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.detail-review__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.detail-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.detail-review__meta,
.detail-owner__info,
.inbox-thread__content {
  flex: 1;
  min-width: 0;
}

.detail-review__author {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary-dark);
}

.detail-review__date {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.detail-review__stars {
  color: #f5a623;
  font-size: 15px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.detail-review__title {
  margin: 0 0 4px 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

.detail-review__comment {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  white-space: pre-line;
}

.detail-owner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.detail-owner__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-primary-soft);
}

.detail-owner__name {
  margin: 0 0 4px 0;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 16px;
}

.detail-message {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-message__input {
  width: 100%;
  min-height: 100px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
  outline: none;
  background: var(--color-bg-soft);
  box-sizing: border-box;
  font-family: inherit;
}

.detail-mobile-reserve {
  display: none;
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.detail-gallery__item {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}

.detail-gallery__item:hover img {
  transform: scale(1.05);
}

.detail-aside {
  position: sticky;
  top: calc(72px + 16px);
  align-self: start;
}

/* Detail page — collapse to a single column on tablet/mobile.
   These rules previously lived in the @media (max-width: 960px) block near
   line 2008, ABOVE the base .detail-grid/.detail-aside definitions. With equal
   specificity the later base rule won, so the aside never collapsed: at 390px
   the grid still resolved to two columns ("0px 326px"), squeezing the booking
   panel to ~36px and spilling the price over the content. Keeping them after
   the base rules is what makes them apply. */
@media (max-width: 960px) {
  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-aside {
    position: static;
  }

  .detail-grid .detail-aside {
    order: -1;
  }

  .detail-grid .detail-content {
    order: 0;
  }

  .detail-hero {
    height: 360px;
  }
}


.detail-booking {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(78, 28, 81, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-booking__price {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
}

.detail-booking__priceRow {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.detail-booking__priceRow small {
  font-size: 14px;
  color: var(--color-muted);
  font-weight: 600;
}

.detail-booking__priceVal {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
}

.detail-booking__period {
  margin: 4px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-booking__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-booking__field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.detail-booking__input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  background: var(--color-bg-soft);
  outline: none;
  box-sizing: border-box;
  color: var(--color-text);
}

.detail-booking__cta {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--color-primary) !important;
  color: #fff !important;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none;
}

.detail-booking__cta:hover {
  background: var(--color-primary-dark) !important;
}

.detail-booking__hint {
  margin: -8px 0 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
}

.detail-booking__fav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.detail-booking__favLink,
.detail-booking__favRemove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.detail-booking__favLink:hover,
.detail-booking__favRemove:hover {
  text-decoration: underline;
}

.detail-booking__favLink--active {
  color: var(--color-accent);
}

.detail-booking__more {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.detail-booking__moreSummary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-primary-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.detail-booking__moreSummary::-webkit-details-marker {
  display: none;
}

.detail-booking__moreSummary::after {
  content: '+';
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.detail-booking__more[open] .detail-booking__moreSummary {
  margin-bottom: 12px;
}

.detail-booking__more[open] .detail-booking__moreSummary::after {
  content: '-';
}

.detail-booking__map {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
}

.listing-features {
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--shadow-purple-3);
  box-shadow: 0 8px 28px rgba(40, 10, 35, 0.06);
}

.listing-features .feature-group+.feature-group {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(82, 20, 74, 0.10);
}

.listing-features .feature-group__summary {
  display: block;
  list-style: none;
}

.listing-features .feature-group__summary::-webkit-details-marker {
  display: none;
}

.listing-features .feature-group__title {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #4b1248;
}

.listing-features .feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* feature-grid--compact is always paired with .feature-grid in HTML; columns inherit */

.listing-features .feature-grid li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: #261626;
}

.listing-features .feature-grid .feature-check {
  flex: 0 0 auto;
  color: #5b1559;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.35;
}

.listing-features .feature-grid .feature-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {

  .listing-features .feature-grid,
  .listing-features .feature-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agenda-dashboard--pro .agenda-workspace__controls {
    justify-content: flex-start;
    width: 100%;
  }

  .agenda-dashboard--pro .agenda-toolbar {
    justify-content: stretch;
  }

  .agenda-dashboard--pro .agenda-timeboard__header,
  .agenda-dashboard--pro .agenda-timeboard__allday,
  .agenda-dashboard--pro .agenda-timeboard__body {
    grid-template-columns: 56px repeat(7, minmax(120px, 1fr));
    overflow-x: auto;
  }

  .agenda-dashboard--pro .agenda-year-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 640px) {
  .listing-features {
    padding: 22px;
    border-radius: 16px;
  }

  .listing-features .feature-group+.feature-group {
    margin-top: 10px;
    padding-top: 10px;
  }

  .listing-features .feature-group__summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
  }

  .listing-features .feature-group__summary::after {
    content: '+';
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: #5b1559;
    font-size: 18px;
    line-height: 1;
  }

  .listing-features .feature-group[open] .feature-group__summary::after {
    content: '-';
  }

  .listing-features .feature-group__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
  }

  .listing-features .feature-group[open] .feature-grid {
    margin-top: 12px;
  }

  .listing-features .feature-grid,
  .listing-features .feature-grid--compact {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .listing-features .feature-grid li {
    font-size: 15px;
  }

  .inbox-composer__send-label {
    display: none;
  }

}

.filter-editor {
  padding: 16px 0;
}

.filter-editor__group {
  margin-bottom: 24px;
}

.filter-editor__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 12px;
}

.filter-editor__items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.filter-editor__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #261626;
  cursor: pointer;
}

.filter-editor__sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 13px;
  color: var(--color-muted);
}

.dashboard-master {
  min-height: calc(100dvh - 210px);
  padding: 24px var(--layout-gutter) 96px;
  background:
    radial-gradient(circle at 100% 0%, rgba(185, 133, 180, 0.1), transparent 32%),
    linear-gradient(180deg, #fbf9fb 0%, #f7f3f7 100%);
  box-sizing: border-box;
}

.dashboard-master__shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.dashboard-master__header,
.dashboard-menu {
  background: #fff;
  border: 1px solid var(--shadow-purple-1);
  box-shadow: 0 16px 40px rgba(40, 10, 35, 0.06);
  border-radius: 22px;
}

.dashboard-master__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 138px;
  padding: 26px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 20%, rgba(185, 133, 180, 0.2), transparent 28%),
    #fff;
}

.dashboard-master__eyebrow,
.profile-eyebrow {
  margin: 0 0 6px;
  color: var(--color-muted-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-master__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.dashboard-master__subtitle {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--color-muted-2);
  font-size: 16px;
  line-height: 1.5;
}

.dashboard-master__context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--shadow-purple-1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 750;
}

.dashboard-master__context-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35a768;
  box-shadow: 0 0 0 4px rgba(53, 167, 104, 0.12);
}

.dashboard-master__layout {
  display: grid;
  align-items: start;
  gap: 24px;
  grid-template-columns: minmax(230px, 252px) minmax(0, 1fr);
}

/* Grid items default to min-width:auto, which resolves to min-content — the
   nav's long labels then force this track far past the viewport (716px on a
   390px screen), pushing the content column off-screen where an ancestor's
   overflow:hidden clips it. min-width:0 lets the track actually shrink. */
.dashboard-master__sidebar {
  min-width: 0;
}

.dashboard-master__content {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.dashboard-master__panel {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-master__panel .profile-page,
.dashboard-master__panel .form-page,
.dashboard-master__panel .inbox-page,
.profile-page {
  min-height: auto;
  padding: 0;
  background: transparent;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.dashboard-kpi-card {
  --kpi-accent: var(--color-primary);
  position: relative;
  min-height: 126px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--shadow-purple-1);
  background: #fff;
  padding: 17px 18px;
  box-shadow: 0 12px 30px rgba(40, 10, 35, 0.045);
}

.dashboard-kpi-card::after {
  content: '';
  position: absolute;
  right: -26px;
  bottom: -42px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kpi-accent) 9%, transparent);
}

.dashboard-kpi-card--success {
  --kpi-accent: #2b9b60;
}

.dashboard-kpi-card--warning {
  --kpi-accent: #d98a27;
}

.dashboard-kpi-card--info {
  --kpi-accent: #4e78b8;
}

.dashboard-kpi-card--plum,
.dashboard-kpi-card--1 {
  --kpi-accent: var(--color-primary);
}

.dashboard-kpi-card--2 {
  --kpi-accent: #2b9b60;
}

.dashboard-kpi-card--3 {
  --kpi-accent: #4e78b8;
}

.dashboard-kpi-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-kpi-card__signal {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--kpi-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kpi-accent) 12%, transparent);
}

.dashboard-kpi-card__label {
  margin: 0;
  color: #72586f;
  font-size: 12px;
  font-weight: 750;
}

.dashboard-kpi-card__value {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  color: var(--color-primary-dark);
  font-size: 32px;
  letter-spacing: -0.035em;
  line-height: 1;
  font-weight: 780;
}

.dashboard-kpi-card__hint {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  color: var(--color-muted-2);
  font-size: 12px;
  line-height: 1.4;
}

.dashboard-menu {
  padding: 16px;
  position: sticky;
  top: 18px;
}

.dashboard-menu__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 15px;
  background: linear-gradient(135deg, #f8f1f8, #fff);
}

.dashboard-menu__brand-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--color-primary);
  color: #fff;
}

.dashboard-menu__brand-icon svg {
  width: 22px;
  height: 22px;
}

.dashboard-menu__brand strong,
.dashboard-menu__brand span {
  display: block;
}

.dashboard-menu__brand strong {
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 800;
}

.dashboard-menu__brand span,
.dashboard-menu__publish small {
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 12px;
}

.dashboard-menu__title {
  margin: 0 0 12px;
  color: var(--color-muted-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.dashboard-menu__item a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 10px 11px;
  border-radius: 12px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.dashboard-menu__item a svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.dashboard-menu__item a:hover,
.dashboard-menu__item a:focus-visible {
  background: #f7f1f8;
  border-color: var(--shadow-purple-2);
}

.dashboard-menu__item a.is-active {
  color: #fff;
  background: linear-gradient(135deg, #5b1856, #74206c);
  border-color: var(--color-primary);
  box-shadow: 0 8px 18px rgba(91, 24, 86, 0.18);
}

.dashboard-menu__publish {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(82, 20, 74, 0.11);
  border-radius: 14px;
  background: #fbf8fb;
  color: var(--color-primary);
  text-decoration: none;
}

.dashboard-menu__publish:hover,
.dashboard-menu__publish:focus-visible {
  border-color: rgba(82, 20, 74, 0.22);
  background: #f7f0f7;
  color: var(--color-primary-dark);
}

.dashboard-menu__publish-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-size: 21px;
  line-height: 1;
}

.dashboard-menu__publish strong,
.dashboard-menu__publish small {
  display: block;
}

.dashboard-menu__publish strong {
  font-size: 12px;
  font-weight: 800;
}

.dashboard-section__description {
  margin: 6px 0 0;
  color: var(--color-muted-2);
  font-size: 14px;
  line-height: 1.45;
}

.dashboard-section--inventory {
  padding: 24px;
  border: 1px solid var(--shadow-purple-1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(40, 10, 35, 0.05);
}

.dashboard-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-section__eyebrow {
  margin: 0 0 5px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-section__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 760;
  letter-spacing: -0.025em;
}

.dashboard-primary-action,
.dashboard-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.dashboard-primary-action {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 9px 20px rgba(91, 24, 86, 0.16);
}

.dashboard-primary-action:hover,
.dashboard-primary-action:focus-visible,
.profile-button--primary:hover,
.profile-button--primary:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
}

.dashboard-secondary-action {
  border: 1px solid rgba(82, 20, 74, 0.15);
  background: #fff;
  color: var(--color-primary);
}

.dashboard-secondary-action:hover,
.dashboard-secondary-action:focus-visible {
  background: var(--color-surface-alt-4);
  color: var(--color-primary-dark);
}

.dashboard-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--shadow-purple-6);
  border-radius: 16px;
  background: var(--color-surface-alt-3);
}

.dashboard-toolbar--favorites {
  grid-template-columns: minmax(240px, 1fr) auto;
}

.dashboard-toolbar__search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--shadow-purple-2);
  border-radius: 12px;
  background: #fff;
  color: var(--color-muted);
}

.dashboard-toolbar__search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--shadow-purple-8);
}

.dashboard-toolbar__search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.dashboard-toolbar__search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
}

.dashboard-toolbar__filters {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--shadow-purple-1);
  border-radius: 11px;
  background: #fff;
}

.dashboard-toolbar__filters button {
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.dashboard-toolbar__filters button.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.dashboard-toolbar__sort select {
  min-height: 44px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--shadow-purple-2);
  border-radius: 12px;
  background: #fff;
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-toolbar__summary,
.dashboard-results-meta {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-results-meta {
  display: flex;
  justify-content: flex-end;
  margin: 12px 2px;
}

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

.listing-card-include {
  display: contents;
}

.dashboard-listing-grid .listing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(59, 18, 57, 0.065);
}

.dashboard-listing-grid .listing-card>a {
  display: block;
}

.dashboard-listing-grid .listing-media {
  aspect-ratio: 16 / 9;
}

.dashboard-listing-grid .listing-body {
  padding: 16px 17px 14px;
}

.dashboard-listing-grid .listing-body h3 {
  font-size: 16px;
  line-height: 1.35;
}

.dashboard-listing-grid .listing-card-footer {
  margin-top: auto;
  padding: 14px 17px 17px;
  border-top: 1px solid rgba(82, 20, 74, 0.08);
  background: #fdfbfd;
}

.dashboard-listing-grid .listing-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-listing-grid .listing-card-action {
  width: 100%;
  border-radius: 10px;
}

.dashboard-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 44px 28px;
  border: 1px dashed rgba(82, 20, 74, 0.18);
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(145deg, #fdfafd, var(--color-surface-alt-4));
}

.dashboard-empty-state__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 28px;
  line-height: 1;
}

.dashboard-empty-state__icon--heart {
  font-size: 32px;
}

.dashboard-empty-state__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 18px;
  font-weight: 700;
}

.dashboard-empty-state__text {
  max-width: 520px;
  margin: 0 0 6px;
  color: var(--color-muted-2);
  font-size: 14px;
}

.agenda-dashboard,
.profile-form {
  display: grid;
  gap: 18px;
}

.agenda-period-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.agenda-period-picker__field {
  display: inline-flex;
}

.agenda-period-picker__select {
  min-height: 44px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--shadow-purple-3);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  appearance: none;
  cursor: pointer;
}

.agenda-view-switcher {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--shadow-purple-3);
  border-radius: 999px;
  background: var(--color-bg-soft);
}

.agenda-view-switcher__button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.agenda-view-switcher__button.is-active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(91, 24, 86, 0.2);
}

.agenda-nav-btn,
.agenda-sync__button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--shadow-purple-3);
  background: #fff;
  color: var(--color-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.agenda-nav-btn--ghost,
.agenda-sync__button--ghost {
  background: var(--color-bg-soft);
}

.agenda-sync {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--shadow-purple-2);
  border-radius: 18px;
  background: var(--color-surface-alt-2);
}

.agenda-sync__label {
  display: block;
  margin-bottom: 8px;
  color: var(--color-muted-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agenda-sync__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.agenda-sync__input {
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px !important;
  border: 1px solid var(--shadow-purple-3);
  background: #fff;
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 13px;
}

/* Deliberate exception to the 44px tap-target rule: these are secondary chips
   inside a 100x160px day cell, which is itself the primary target (it selects
   the day). Sizing them to 44px would roughly triple the height of the month
   grid. 30px keeps them comfortably tappable without that cost — the same
   trade-off Google Calendar and Airbnb make for month-view chips. */
.agenda-day__event-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 30px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-day__event-pill.is-start,
.agenda-day__event-pill.is-single {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.agenda-day__event-pill.is-middle {
  border-radius: 8px;
}

.agenda-day__event-pill.is-end {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.agenda-day__event-pill.is-confirmed {
  background: var(--color-success-soft);
  color: #0f6b3c;
  border-color: rgba(15, 107, 60, 0.12);
}

.agenda-day__event-pill.is-pending {
  background: #fff3e5;
  color: #8a4a08;
  border-color: rgba(138, 74, 8, 0.14);
}

.agenda-day__more {
  color: var(--color-muted-strong);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .agenda-sync__field {
    grid-template-columns: 1fr;
  }

  .agenda-period-picker {
    width: 100%;
    justify-content: space-between;
  }

  .agenda-period-picker__field {
    flex: 1 1 0;
  }

  .agenda-period-picker__select {
    width: 100%;
  }

  .agenda-view-switcher {
    width: 100%;
    justify-content: space-between;
  }

  .agenda-view-switcher__button {
    flex: 1 1 0;
  }
}

.agenda-dashboard--pro {
  gap: 0;
}

.agenda-dashboard--pro .agenda-workspace {
  --agenda-bg: #fff;
  --agenda-surface: var(--color-surface-alt-3);
  --agenda-border: rgba(82, 20, 74, 0.11);
  --agenda-text: #351333;
  --agenda-muted: var(--color-muted-2);
  --agenda-dim: #967792;
  --agenda-chip: #f4edf4;
  --agenda-primary: var(--color-primary);
  --agenda-primary-dark: var(--color-primary-dark);
  --agenda-primary-soft: #f7eef7;
  --agenda-accent: var(--color-accent);
  --agenda-event-confirmed-bg: #e8f7ee;
  --agenda-event-confirmed-text: #17633c;
  --agenda-event-pending-bg: #fff1df;
  --agenda-event-pending-text: #8a4a08;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--agenda-bg);
  color: var(--agenda-text);
  border: 1px solid var(--agenda-border);
  box-shadow: 0 18px 44px rgba(40, 10, 35, 0.07);
}

.agenda-dashboard--pro .agenda-workspace__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid var(--agenda-border);
  background:
    radial-gradient(circle at 92% 12%, rgba(185, 133, 180, 0.15), transparent 28%),
    #fff;
  flex-wrap: wrap;
}

.agenda-dashboard--pro .agenda-workspace__title-group {
  display: grid;
  gap: 8px;
}

.agenda-dashboard--pro .agenda-workspace__eyebrow {
  margin: 0;
  color: var(--agenda-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agenda-dashboard--pro .agenda-workspace__title {
  margin: 0;
  color: var(--agenda-text);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-align: left;
}

.agenda-dashboard--pro .agenda-workspace__subtitle {
  margin: 0;
  max-width: 720px;
  color: var(--agenda-muted);
  font-size: 14px;
  line-height: 1.45;
}

.agenda-dashboard--pro .agenda-workspace__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-items: end;
  flex-wrap: wrap;
}

.agenda-dashboard--pro .agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.agenda-dashboard--pro .agenda-view-switcher,
.agenda-dashboard--pro .agenda-period-picker,
.agenda-dashboard--pro .agenda-dashboard__controls {
  background: var(--agenda-surface);
  border: 1px solid var(--agenda-border);
  border-radius: 999px;
}

.agenda-dashboard--pro .agenda-view-switcher {
  padding: 4px;
}

.agenda-dashboard--pro .agenda-view-switcher__button {
  color: var(--agenda-muted);
  min-height: 44px;
  padding-inline: 13px;
}

.agenda-dashboard--pro .agenda-view-switcher__button.is-active {
  background: var(--agenda-primary);
  color: #fff;
  box-shadow: none;
}

.agenda-dashboard--pro .agenda-period-picker {
  padding: 4px;
  gap: 4px;
}

.agenda-dashboard--pro .agenda-period-picker__select,
.agenda-dashboard--pro .agenda-nav-btn,
.agenda-dashboard--pro .agenda-sync__button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--agenda-text);
}

.agenda-dashboard--pro .agenda-period-picker__select {
  padding: 0 32px 0 12px;
  color: var(--agenda-text);
  background: var(--agenda-surface);
}

.agenda-dashboard--pro .agenda-period-picker__select option {
  color: var(--agenda-text);
}

.agenda-dashboard--pro .agenda-nav-btn--ghost,
.agenda-dashboard--pro .agenda-sync__button--ghost {
  background: var(--agenda-chip);
  color: var(--agenda-text);
}

.agenda-dashboard--pro .agenda-nav-btn,
.agenda-dashboard--pro .agenda-sync__button {
  border-radius: 999px;
}

.agenda-dashboard--pro .agenda-sync {
  display: block;
  margin: 18px 24px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--agenda-border);
  background: #fff;
  border-radius: 16px;
}

.agenda-dashboard--pro .agenda-sync__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.agenda-dashboard--pro .agenda-sync__summary::-webkit-details-marker {
  display: none;
}

.agenda-dashboard--pro .agenda-sync__summary-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--agenda-primary-soft);
  color: var(--agenda-primary);
  font-size: 17px;
  font-weight: 800;
}

.agenda-dashboard--pro .agenda-sync__summary strong,
.agenda-dashboard--pro .agenda-sync__summary small {
  display: block;
}

.agenda-dashboard--pro .agenda-sync__summary strong {
  color: var(--agenda-text);
  font-size: 13px;
}

.agenda-dashboard--pro .agenda-sync__summary small {
  margin-top: 2px;
  color: var(--agenda-muted);
  font-size: 12px;
}

.agenda-dashboard--pro .agenda-sync__summary-action {
  color: var(--agenda-primary);
  font-size: 12px;
  font-weight: 750;
}

.agenda-dashboard--pro .agenda-sync__content {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid var(--agenda-border);
  background: var(--agenda-surface);
}

.agenda-dashboard--pro .agenda-sync__label,
.agenda-dashboard--pro .agenda-sync__input {
  color: var(--agenda-muted);
}

.agenda-dashboard--pro .agenda-sync__input {
  border: 1px solid var(--agenda-border);
  background: #fff;
}

.agenda-dashboard--pro .agenda-sync__button--primary {
  background: var(--agenda-primary);
  color: #fff;
}

.agenda-dashboard--pro .agenda-empty-banner {
  display: grid;
  gap: 8px;
  margin: 16px 24px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed var(--agenda-border);
  background: var(--agenda-primary-soft);
}

.agenda-dashboard--pro .agenda-empty-banner__title {
  margin: 0;
  color: var(--agenda-text);
  font-size: 15px;
  font-weight: 700;
}

.agenda-dashboard--pro .agenda-empty-banner__text {
  margin: 0;
  color: var(--agenda-muted);
  font-size: 14px;
}

.agenda-dashboard--pro .agenda-workspace__body {
  min-width: 0;
  padding: 20px 24px 24px;
}

.agenda-dashboard--pro .agenda-workspace__main {
  min-width: 0;
}

.agenda-dashboard--pro .agenda-month-pro__weekdays,
.agenda-dashboard--pro .agenda-month-pro__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda-dashboard--pro .agenda-month-pro__weekdays {
  margin-bottom: 2px;
}

.agenda-dashboard--pro .agenda-month-pro__weekday {
  padding: 0 12px 12px;
  color: var(--agenda-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.agenda-dashboard--pro .agenda-month-pro__cell {
  min-height: 128px;
  padding: 12px;
  border-top: 1px solid var(--agenda-border);
  border-left: 1px solid var(--agenda-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  background: #fff;
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.agenda-dashboard--pro .agenda-month-pro__cell:hover {
  background: #fdfafd;
  box-shadow: inset 0 0 0 1px rgba(91, 24, 86, 0.08);
}

.agenda-dashboard--pro .agenda-month-pro__grid> :nth-child(7n) {
  border-right: 1px solid var(--agenda-border);
}

.agenda-dashboard--pro .agenda-month-pro__grid> :nth-last-child(-n+7) {
  border-bottom: 1px solid var(--agenda-border);
}

.agenda-dashboard--pro .agenda-month-pro__cell.is-outside {
  color: rgba(109, 91, 107, 0.48);
  background: #fbf9fb;
}

.agenda-dashboard--pro .agenda-month-pro__cell.is-selected {
  background: var(--agenda-primary-soft);
}

.agenda-dashboard--pro .agenda-month-pro__cell.is-today .agenda-month-pro__cell-day,
.agenda-dashboard--pro .agenda-timeboard__day-head.is-today .agenda-timeboard__day-date,
.agenda-dashboard--pro .agenda-mini-month__day.is-today span,
.agenda-dashboard--pro .agenda-year-pro__day.is-today {
  color: #fff;
  background: var(--agenda-primary);
  border-radius: 999px;
}

.agenda-dashboard--pro .agenda-month-pro__cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agenda-dashboard--pro .agenda-month-pro__cell-day {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--agenda-text);
  font-size: 14px;
  font-weight: 700;
}

.agenda-dashboard--pro .agenda-month-pro__cell-count {
  color: var(--agenda-dim);
  font-size: 12px;
  font-weight: 700;
}

.agenda-dashboard--pro .agenda-month-pro__cell-events {
  display: grid;
  gap: 6px;
  margin-top: auto;
}

.agenda-dashboard--pro .agenda-day__event-pill {
  justify-content: flex-start;
  width: 100%;
  min-height: 22px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 8px;
}

.agenda-dashboard--pro .agenda-day__event-pill--interactive {
  border: 0;
  cursor: pointer;
}

.agenda-dashboard--pro .agenda-day__event-pill.is-confirmed,
.agenda-dashboard--pro .agenda-timeboard__event.is-confirmed {
  background: var(--agenda-event-confirmed-bg);
  color: var(--agenda-event-confirmed-text);
}

.agenda-dashboard--pro .agenda-day__event-pill.is-pending,
.agenda-dashboard--pro .agenda-timeboard__event.is-pending {
  background: var(--agenda-event-pending-bg);
  color: var(--agenda-event-pending-text);
}

.agenda-dashboard--pro .agenda-day__more {
  color: var(--agenda-dim);
}

.agenda-dashboard--pro .agenda-timeboard {
  display: grid;
  gap: 0;
}

.agenda-dashboard--pro .agenda-timeboard__header,
.agenda-dashboard--pro .agenda-timeboard__allday,
.agenda-dashboard--pro .agenda-timeboard__body {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
}

.agenda-dashboard--pro .agenda-timeboard__corner {
  border-bottom: 1px solid var(--agenda-border);
}

.agenda-dashboard--pro .agenda-timeboard__day-head {
  padding: 0 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--agenda-border);
  background: transparent;
  color: var(--agenda-text);
  display: grid;
  justify-items: center;
  gap: 6px;
  cursor: pointer;
}

.agenda-dashboard--pro .agenda-timeboard__day-weekday {
  color: var(--agenda-muted);
  font-size: 13px;
}

.agenda-dashboard--pro .agenda-timeboard__day-date {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--agenda-text);
  font-size: 14px;
  font-weight: 700;
}

.agenda-dashboard--pro .agenda-timeboard__allday--single,
.agenda-dashboard--pro .agenda-timeboard__body--single {
  grid-template-columns: 72px minmax(0, 1fr);
}

.agenda-dashboard--pro .agenda-timeboard__allday-label,
.agenda-dashboard--pro .agenda-timeboard__hour {
  color: var(--agenda-dim);
  font-size: 12px;
  padding-top: 8px;
}

.agenda-dashboard--pro .agenda-timeboard__allday-column {
  min-height: 34px;
  padding: 6px 8px;
  border-top: 1px solid var(--agenda-border);
  border-left: 1px solid var(--agenda-border);
  display: grid;
  gap: 6px;
}

.agenda-dashboard--pro .agenda-timeboard__hours {
  display: grid;
  grid-template-rows: repeat(15, minmax(64px, 1fr));
}

.agenda-dashboard--pro .agenda-timeboard__column {
  position: relative;
  min-height: calc(15 * 64px);
  border-left: 1px solid var(--agenda-border);
  cursor: pointer;
}

.agenda-dashboard--pro .agenda-timeboard__column--single {
  min-height: calc(15 * 72px);
}

.agenda-dashboard--pro .agenda-timeboard__line {
  height: 64px;
  border-top: 1px solid var(--agenda-border);
}

.agenda-dashboard--pro .agenda-timeboard__column--single .agenda-timeboard__line {
  height: 72px;
}

.agenda-dashboard--pro .agenda-timeboard__event {
  position: absolute;
  left: 8px;
  right: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(40, 10, 35, 0.1);
}

.agenda-dashboard--pro .agenda-timeboard__event-title {
  font-size: 12px;
  font-weight: 700;
}

.agenda-dashboard--pro .agenda-timeboard__event-time {
  font-size: 12px;
  opacity: 0.88;
}

.agenda-dashboard--pro .agenda-day-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
}

.agenda-dashboard--pro .agenda-day-pro__headline {
  margin: 0 0 12px;
  color: var(--agenda-text);
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
}

.agenda-dashboard--pro .agenda-day-pro__rail {
  display: grid;
  gap: 16px;
}

.agenda-dashboard--pro .agenda-sidecard {
  padding: 16px;
  border-radius: 20px;
  background: var(--agenda-surface);
  border: 1px solid var(--agenda-border);
}

.agenda-dashboard--pro .agenda-sidecard__nav {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.agenda-dashboard--pro .agenda-mini-month__weekdays,
.agenda-dashboard--pro .agenda-mini-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.agenda-dashboard--pro .agenda-mini-month__weekdays {
  margin-bottom: 10px;
  color: var(--agenda-dim);
  font-size: 12px;
  text-align: center;
}

.agenda-dashboard--pro .agenda-mini-month__day {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--agenda-muted);
  cursor: pointer;
}

.agenda-dashboard--pro .agenda-mini-month__day.is-outside {
  color: rgba(109, 91, 107, 0.4);
}

.agenda-dashboard--pro .agenda-mini-month__day.is-selected span {
  color: #fff;
  background: var(--agenda-primary-dark);
  border-radius: 999px;
}

.agenda-dashboard--pro .agenda-mini-month__day.has-bookings span,
.agenda-dashboard--pro .agenda-year-pro__day.has-bookings {
  position: relative;
}

.agenda-dashboard--pro .agenda-mini-month__day span,
.agenda-dashboard--pro .agenda-year-pro__day {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.agenda-dashboard--pro .agenda-sidecard__eyebrow {
  margin: 0;
  color: var(--agenda-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agenda-dashboard--pro .agenda-sidecard__title {
  margin: 10px 0 0;
  color: var(--agenda-text);
  font-size: 18px;
  font-weight: 700;
}

.agenda-dashboard--pro .agenda-sidecard__meta {
  margin: 8px 0 0;
  color: var(--agenda-muted);
  font-size: 13px;
}

.agenda-dashboard--pro .agenda-sidecard__empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--agenda-dim);
  font-size: 18px;
}

.agenda-dashboard--pro .agenda-year-pro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.agenda-dashboard--pro .agenda-year-pro__month {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--agenda-border);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.agenda-dashboard--pro .agenda-year-pro__month-title {
  margin-bottom: 6px;
  color: var(--agenda-primary);
  font-size: 17px;
  font-weight: 750;
}

.agenda-dashboard--pro .agenda-year-pro__weekdays,
.agenda-dashboard--pro .agenda-year-pro__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.agenda-dashboard--pro .agenda-year-pro__weekdays {
  margin-bottom: 10px;
  color: var(--agenda-dim);
  font-size: 12px;
  text-align: center;
}

.agenda-dashboard--pro .agenda-year-pro__weekdays span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.agenda-dashboard--pro .agenda-year-pro__day {
  color: var(--agenda-text);
  font-size: 14px;
  justify-self: center;
}

.agenda-dashboard--pro .agenda-year-pro__day.is-outside {
  color: rgba(109, 91, 107, 0.34);
}

.agenda-dashboard--pro .agenda-year-pro__day.has-bookings::after,
.agenda-dashboard--pro .agenda-mini-month__day.has-bookings span::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--agenda-accent);
  transform: translateX(-50%);
}

@media (max-width: 1200px) {
  .agenda-dashboard--pro .agenda-year-pro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agenda-dashboard--pro .agenda-day-pro {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 768px) {
  .agenda-dashboard--pro .agenda-workspace {
    border-radius: 16px;
  }

  .agenda-dashboard--pro .agenda-workspace__header {
    padding: 16px;
  }

  .agenda-dashboard--pro .agenda-workspace__title {
    font-size: 30px;
  }

  .agenda-dashboard--pro .agenda-workspace__controls,
  .agenda-dashboard--pro .agenda-toolbar {
    width: 100%;
  }

  .agenda-dashboard--pro .agenda-view-switcher,
  .agenda-dashboard--pro .agenda-period-picker,
  .agenda-dashboard--pro .agenda-dashboard__controls {
    width: 100%;
    justify-content: space-between;
  }

  .agenda-dashboard--pro .agenda-month-pro__cell {
    min-height: 96px;
    padding: 8px;
  }

  .agenda-dashboard--pro .agenda-sync,
  .agenda-dashboard--pro .agenda-empty-banner {
    margin-inline: 14px;
  }

  .agenda-dashboard--pro .agenda-workspace__body {
    padding: 16px 14px 18px;
    overflow-x: auto;
  }

  .agenda-dashboard--pro .agenda-month-pro {
    min-width: 700px;
  }

  .agenda-dashboard--pro .agenda-year-pro {
    grid-template-columns: 1fr;
  }
}

.dashboard-chart {
  background: #fff;
  border: 1px solid var(--shadow-purple-2);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(40, 10, 35, 0.06);
  padding: 16px;
}

.dashboard-chart__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 16px;
  font-weight: 700;
}

.dashboard-chart__subtitle {
  margin: 4px 0 0;
  color: var(--color-muted-strong);
  font-size: 12px;
}

.dashboard-chart__bars {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.dashboard-chart__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.dashboard-chart__label {
  color: var(--color-muted-2);
}

.dashboard-chart__value {
  color: var(--color-primary-dark);
}

.dashboard-chart__track {
  margin-top: 6px;
  height: 10px;
  background: #f3edf4;
  border-radius: 999px;
  overflow: hidden;
}

.dashboard-chart__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5b1856, #8f4a88);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.dashboard-master__guest {
  width: min(560px, 100%);
  margin: 16px auto 0;
  background: #fff;
  border: 1px solid var(--shadow-purple-2);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}

.dashboard-master__guest-title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 24px;
}

.dashboard-master__guest-text {
  margin: 10px 0 18px;
  color: var(--color-muted-2);
}

@media (max-width: 1080px) {

  /* minmax(0, 1fr), not 1fr: a bare 1fr keeps an auto (min-content) minimum,
     so the stacked column still refuses to shrink below its widest label. */
  .dashboard-master__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-menu {
    position: static;
  }

  .dashboard-menu__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Nav cells must be allowed to shrink; below 768px the list becomes a
     horizontal scroll strip (flex + overflow-x:auto) and keeps its nowrap
     labels deliberately, so only the min-width floor is lifted here. */
  .dashboard-menu__item,
  .dashboard-menu__item a {
    min-width: 0;
  }

  .dashboard-menu__publish {
    width: fit-content;
  }
}

@media (max-width: 768px) {
  .dashboard-master {
    padding: 12px 10px 112px;
  }

  .dashboard-master__header,
  .dashboard-menu {
    border-radius: 14px;
  }

  .dashboard-master__header {
    min-height: 0;
    padding: 14px;
  }

  .dashboard-master__context {
    display: none;
  }

  .dashboard-master__title {
    font-size: 27px;
  }

  .dashboard-master__subtitle {
    font-size: 14px;
  }

  .dashboard-menu {
    padding: 12px;
  }

  .dashboard-menu__brand,
  .dashboard-menu__title,
  .dashboard-menu__publish {
    display: none;
  }

  .dashboard-menu__list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .dashboard-menu__list::-webkit-scrollbar {
    display: none;
  }

  .dashboard-menu__item {
    flex: 0 0 auto;
  }

  .dashboard-menu__item a {
    min-height: 44px;
    white-space: nowrap;
  }

  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-kpi-card {
    min-height: 112px;
    padding: 14px;
  }

  .dashboard-section--inventory {
    padding: 16px;
    border-radius: 16px;
  }

  .dashboard-section__header {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-section__header .dashboard-primary-action,
  .dashboard-section__header .dashboard-secondary-action {
    width: 100%;
  }

  .dashboard-toolbar,
  .dashboard-toolbar--favorites {
    grid-template-columns: 1fr;
  }

  .dashboard-toolbar__filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-toolbar__sort select {
    width: 100%;
  }

  .dashboard-listing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }

  .detail-hero {
    width: calc(100% - 32px);
    margin: 16px auto 0;
    border-radius: 16px;
  }

  .detail-body {
    padding-inline: 0;
  }

  .detail-content {
    gap: 12px;
  }

  .detail-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .detail-booking {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

}

.form-page {
  min-height: calc(100dvh - 180px);

  padding: 32px 0 96px;
  background: linear-gradient(180deg, #fff 0%, #fbf8fb 100%);
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.profile-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

.form-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

.profile-hero,
.profile-card {
  background: #fff;
  border: 1px solid var(--shadow-purple-1);
  box-shadow: 0 16px 38px rgba(40, 10, 35, 0.05);
}

.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 20%, rgba(185, 133, 180, 0.16), transparent 28%),
    #fff;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.profile-hero__body {
  min-width: 0;
}

.profile-title,
.profile-form__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
}

.profile-subtitle {
  margin: 8px 0 0;
  color: var(--color-muted-2);
  font-size: 15px;
  overflow-wrap: anywhere;
  text-align: left;
}

.profile-actions,
.profile-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px !important;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.profile-button--primary,
.inbox-pill {
  background: var(--color-primary);
  color: #fff;
}

.profile-button--ghost:hover,
.profile-button--ghost:focus-visible {
  background: var(--color-bg-soft);
  color: var(--color-primary-dark);
}

.profile-card {
  margin-top: 18px;
  padding: 24px;
  border-radius: 22px;
}

.profile-section+.profile-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--shadow-purple-1);
}

.profile-section__title {
  margin: 0 0 14px;
  color: var(--color-primary-deep);
  font-size: 16px;
  font-weight: 700;
}

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

.profile-data-item {
  padding: 15px 16px;
  border: 1px solid var(--shadow-purple-6);
  border-radius: 14px;
  background: linear-gradient(145deg, #fdfbfd, #faf6fa);
}

.profile-data-item dt {
  margin: 0 0 6px;
  color: var(--color-muted-strong);
  font-size: 12px;
  font-weight: 700;
}

.profile-data-item dd {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.settings-flag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.settings-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.settings-flag.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.profile-form__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.profile-fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.profile-fieldset legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--color-primary-deep);
  font-size: 16px;
  font-weight: 700;
}

.profile-field {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--color-primary-deep);
  font-size: 13px;
  font-weight: 600;
}

.profile-field--wide {
  grid-column: 1 / -1;
}

.password-input-wrap {
  position: relative;
  display: grid;
  align-items: center;
}

.password-input-wrap .profile-input {
  padding-right: 92px;
}

.password-toggle {
  position: absolute;
  right: 6px;
  min-width: 74px;
  min-height: 44px;
  border: 0;
  border-radius: 9px !important;
  background: #f4edf4;
  color: var(--color-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: #e9dde9;
  color: var(--color-primary-dark);
}

.profile-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(89, 22, 84, 0.16) !important;
  border-radius: 12px !important;
  outline: 0;
  padding: 0 14px;
  background: var(--color-surface-alt-2);
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.app-textarea {
  min-height: 140px;
  padding-block: 12px;
  resize: vertical;
}

.app-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.profile-input:focus {
  border-color: #5b1856 !important;
  background: #fff;
  box-shadow: var(--shadow-focus);
}

.profile-form .profile-input:invalid:placeholder-shown {
  border-color: rgba(89, 22, 84, 0.16) !important;
}

.profile-form .profile-input:user-invalid {
  border: 1px solid #d34b4b !important;
  box-shadow: 0 0 0 3px rgba(211, 75, 75, 0.1);
}

.profile-form__actions {
  padding-top: 6px;
}

.profile-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

.password-account-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--shadow-purple-1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 20%, rgba(185, 133, 180, 0.16), transparent 28%),
    #fff;
  box-shadow: 0 14px 34px rgba(40, 10, 35, 0.05);
}

.password-account-banner .profile-avatar {
  width: 58px;
  height: 58px;
  font-size: 18px;
}

.password-account-banner__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -0.02em;
  text-align: left;
}

.password-account-banner__badge {
  padding: 8px 12px;
  border: 1px solid var(--color-success-border);
  border-radius: 999px;
  background: var(--color-success-soft);
  color: #17663c;
  font-size: 12px;
  font-weight: 750;
}

.password-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  margin-top: 18px;
}

.password-guide {
  align-self: start;
  padding: 24px;
  border: 1px solid var(--shadow-purple-1);
  border-radius: 22px;
  background: linear-gradient(145deg, #f8f1f8, #fff);
  box-shadow: 0 16px 38px rgba(40, 10, 35, 0.05);
}

.password-guide__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
}

.password-guide__icon svg {
  width: 28px;
  height: 28px;
}

.password-guide h3,
.password-form__header h3 {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.password-guide>p:not(.profile-eyebrow),
.password-form__header p {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.5;
}

.password-checklist {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.password-checklist li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 650;
}

.password-checklist li span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #eee7ee;
  color: #9b8699;
  font-size: 12px;
}

.password-checklist li.is-valid {
  color: #17663c;
}

.password-checklist li.is-valid span {
  background: #ddf3e5;
  color: #17663c;
}

.password-form {
  margin-top: 0;
}

.password-form__header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--shadow-purple-6);
}

.password-form .profile-fieldset {
  grid-template-columns: 1fr;
}

.password-strength {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--color-surface-alt-3);
}

.password-strength__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.password-strength__meta strong {
  color: var(--color-primary-dark);
}

.password-strength__track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9e0e9;
}

.password-strength__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d78d2f, var(--color-primary), #2f9e62);
  transition: width 0.2s ease;
}

.profile-status {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  font-size: 14px;
  text-align: center;
}

.profile-status.is-success {
  background: #f0faf4;
  color: #226b3d;
}

.profile-status.is-error {
  background: #fdf2f2;
  color: var(--color-danger-deep);
}

@media (max-width: 768px) {
  .profile-page {
    padding: 0;
  }

  .form-page {
    padding: 20px 14px 112px;
  }

  .profile-hero {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
    border-radius: 16px;
  }

  .profile-avatar {
    width: 56px;
    height: 56px;
    font-size: 18px;
  }

  .profile-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .profile-actions .profile-button,
  .profile-form__actions .profile-button {
    flex: 1 1 0;
  }

  .profile-card {
    padding: 18px;
    border-radius: 16px;
  }

  .profile-data-grid,
  .profile-fieldset {
    grid-template-columns: 1fr;
  }

  .profile-form__header {
    flex-direction: column;
  }

  .profile-form__actions {
    justify-content: stretch;
  }

  .password-input-wrap .profile-input {
    padding-right: 82px;
  }

  .password-toggle {
    min-width: 64px;
  }

  .password-account-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .password-account-banner__badge {
    display: none;
  }

  .password-layout {
    grid-template-columns: 1fr;
  }

  .password-guide {
    padding: 18px;
  }
}


@media (max-width: 768px) {
  .detail-mobile-reserve {
    position: fixed;
    right: 16px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 90;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(78, 28, 81, 0.2);
  }

  .detail-page {
    padding-bottom: 72px;
  }

  .detail-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 240px auto;
    height: auto;
  }

  .detail-hero__main {
    grid-row: 1;
  }

  .detail-hero__thumbs {
    grid-row: 2;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
  }

  .detail-hero__thumb {
    aspect-ratio: 1 / 1;
  }

  .detail-card {
    padding: 18px;
    border-radius: 16px;
  }

  .detail-booking {
    padding: 18px;
    border-radius: 16px;
    gap: 12px;
  }

  .detail-booking__price {
    padding-bottom: 12px;
  }

  .detail-booking__input {
    min-height: 44px;
  }

  .detail-booking__cta {
    min-height: 48px;
  }

  .detail-title__h1 {
    font-size: 22px;
  }

  .detail-owner {
    gap: 12px;
  }

  .detail-owner__avatar {
    width: 48px;
    height: 48px;
  }

  .detail-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}


.gallery-dialog {
  border: none;
  border-radius: 20px;
  padding: 0;
  background: #fff;
  max-width: 1100px;
  width: min(95vw, 1100px);
  max-height: 90vh;
  overflow: hidden;
}

.gallery-dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.gallery-dialog__inner {
  position: relative;
  padding: 32px;
  max-height: 90vh;
  overflow-y: auto;
}

.gallery-dialog__title {
  margin: 0 0 20px 0;
}

.gallery-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

.detail-gallery--dialog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .gallery-dialog__inner {
    padding: 20px;
  }

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

@media (max-width: 560px) {
  .create-listing-btn {
    width: 100%;
  }

  .create-listing-flow .create-listing-panel__title {
    font-size: var(--font-size-xl);
  }

  .create-listing-flow__footer-spacer {
    display: none;
  }

  .create-listing-summary__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

}

[x-cloak] {
  display: none !important;
}

.inbox-page {
  min-height: calc(100vh - 280px);
}

.inbox-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(89, 22, 84, 0.06);
}

.inbox-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  max-height: calc(100vh - 320px);
}

.inbox-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inbox-list__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.inbox-list__count {
  font-size: 13px;
  color: var(--color-muted);
  background: var(--color-bg-soft);
  padding: 2px 10px;
  border-radius: 999px;
}

.inbox-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 20px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--color-bg-soft);
  border: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.inbox-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--shadow-purple-8);
  background: var(--color-bg);
}

.inbox-search svg {
  color: var(--color-muted);
  flex-shrink: 0;
}

.inbox-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 4px;
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  font-family: inherit;
}

.inbox-search input::placeholder {
  color: var(--color-muted);
}

.inbox-list__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
}

.inbox-thread {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.inbox-thread:hover {
  background: var(--color-bg-soft);
}

.inbox-thread.is-active {
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.inbox-thread.is-unread::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.inbox-thread__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.inbox-detail__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.inbox-thread__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.inbox-thread__sender {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-thread__date {
  font-size: 12px;
  color: var(--color-muted);
  flex-shrink: 0;
}

.inbox-thread__subject {
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-thread__excerpt {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbox-detail__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inbox-detail__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}

.inbox-detail__back-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  display: grid;
  place-items: center;
}

.inbox-detail__back-btn:hover {
  background: var(--color-primary-soft);
  transform: translateX(-2px);
}

.inbox-detail__contact {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.inbox-detail__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
}

.inbox-detail__meta {
  font-size: 13px;
  color: var(--color-muted);
}

.inbox-detail__reply-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}

.inbox-detail__reply-btn:hover,
.inbox-composer__send:hover:not(:disabled) {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.inbox-detail__body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--color-bg);
}

.inbox-detail--empty {
  grid-column: 1 / -1;
  display: none;
}

.inbox-detail--empty_text {
  color: var(--color-muted);
  font-size: 15px;
  margin-top: 12px;
}

.inbox-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 12px;
}

.inbox-empty-state svg {
  color: var(--color-accent);
  opacity: 0.5;
}

.inbox-empty-state p {
  color: var(--color-muted);
  font-size: 14px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.modal-header button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-muted);
  transition: background-color 0.2s, color 0.2s;
}

.modal-header button:hover {
  background: var(--color-bg-soft);
  color: var(--color-text);
}

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

.btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}

.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(91, 24, 86, 0.3);
  z-index: 99999;
  animation: toast-in 0.3s ease-out;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 768px) {
  .inbox-page {
    padding: 12px;
  }

  .inbox-layout {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }

  .inbox-list {
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }


  .inbox-layout.show-detail .inbox-list {
    display: none !important;
  }

  .inbox-layout.show-detail .inbox-detail {
    display: flex !important;
  }


  .inbox-detail {
    display: none;
  }

  .inbox-empty-state {
    padding: 40px 16px;
  }
}

.dashboard-master__panel .inbox-page {
  min-height: 0;
}

.inbox-layout {
  grid-template-columns: minmax(360px, 42%) minmax(0, 1fr);
  height: clamp(620px, 72vh, 760px);
  min-height: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(89, 22, 84, 0.1);
}

.inbox-list {
  height: 100%;
  min-height: 0;
  max-height: none;
  background: #fff;
}

.inbox-list__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 6px;
}

.inbox-list__eyebrow {
  margin: 0 0 4px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inbox-list__title {
  margin: 0;
  font-size: 18px;
  color: var(--color-primary-dark);
}

.inbox-list__count {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  padding: 0 8px;
  font-weight: 700;
}

.inbox-list__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 2px;
}

.inbox-pill,
.inbox-thread__badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.inbox-pill--soft {
  background: rgba(185, 133, 180, 0.18);
  color: var(--color-primary-dark);
}

.inbox-search {
  margin: 12px 20px 14px;
  border-radius: 12px;
  background: #fff;
  border-color: var(--shadow-purple-9);
}

.inbox-list__body {
  min-height: 0;
  padding: 0 10px 10px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.inbox-list__section-title {
  margin: 0 10px 8px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.inbox-thread {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px 12px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
}

.inbox-thread:hover {
  background: var(--color-bg-soft);
  border-color: var(--shadow-purple-5);
  box-shadow: none;
}

.inbox-thread:focus-visible {
  outline: 3px solid rgba(91, 24, 86, 0.22);
  outline-offset: -2px;
}

.inbox-thread.is-active {
  background: linear-gradient(135deg, rgba(246, 239, 246, 0.98), #fff);
  border-color: rgba(89, 22, 84, 0.13);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.inbox-thread.is-unread::before {
  left: 5px;
  top: 20px;
  width: 6px;
  height: 6px;
}

.inbox-thread__sender {
  font-weight: 700;
}

.inbox-thread__subject,
.inbox-thread__listing {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-thread__subject {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.inbox-thread__listing {
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 12px;
}

.inbox-thread__excerpt {
  margin: 4px 0 0;
  -webkit-line-clamp: 1;
}

.inbox-thread__meta {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.inbox-thread__message-count {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.inbox-thread__badge.is-unread {
  background: var(--shadow-purple-7);
  color: var(--color-primary-dark);
}

.inbox-thread__badge.is-read {
  background: rgba(185, 133, 180, 0.18);
  color: var(--color-muted);
}

.inbox-detail {
  height: 100%;
  min-height: 0;
  background: var(--color-bg-soft);
}

.inbox-detail__header {
  min-height: 78px;
  padding: 14px 20px;
  background: #fff;
}

.inbox-detail__back-btn {
  display: none;
}

.inbox-detail__contact-copy {
  min-width: 0;
}

.inbox-detail__name,
.inbox-detail__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-detail__context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.72);
}

.inbox-detail__context>div {
  min-width: 0;
}

.inbox-detail__context-label {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.inbox-detail__context-value {
  display: block;
  overflow: hidden;
  color: var(--color-primary-dark);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-detail__listing-link {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.inbox-detail__listing-link:hover {
  text-decoration: underline;
}

.inbox-detail__body {
  min-height: 0;
  padding: 22px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.inbox-conversation {
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(100%, 760px);
  min-height: 100%;
  margin: 0 auto;
}

.inbox-message {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  width: 100%;
}

.inbox-message.is-own {
  justify-content: flex-end;
}

.inbox-message__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.inbox-message__bubble {
  width: fit-content;
  max-width: min(78%, 580px);
  padding: 12px 14px;
  border: 1px solid rgba(89, 22, 84, 0.1);
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(89, 22, 84, 0.05);
}

.inbox-message.is-own .inbox-message__bubble {
  border-color: var(--color-primary);
  border-radius: 16px 16px 4px 16px;
  background: var(--color-primary);
  color: #fff;
}

.inbox-message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 5px;
  font-size: 12px;
}

.inbox-message__header strong {
  font-weight: 800;
}

.inbox-message__header time {
  color: var(--color-muted);
  font-size: 12px;
}

.inbox-message.is-own .inbox-message__header time {
  color: rgba(255, 255, 255, 0.7);
}

.inbox-message__text {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.inbox-message.is-own .inbox-message__text {
  color: #fff;
}

.inbox-detail__composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: #fff;
}

.inbox-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  width: 100%;
}

.inbox-composer__input {
  flex: 1;
  min-height: 96px;
  max-height: 160px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.inbox-composer__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(91, 24, 86, 0.15);
  background: #fff;
}

.inbox-composer__send {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s, opacity 0.2s;
}

.inbox-composer__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hla-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-5);
}

.hla-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(39, 24, 38, .04), 0 12px 30px -18px rgba(39, 24, 38, .22);
  transition: box-shadow .2s, transform .2s;
}

.hla-card:hover {
  box-shadow: 0 1px 2px rgba(39, 24, 38, .05), 0 18px 40px -18px rgba(39, 24, 38, .3);
  transform: translateY(-2px);
}

.hla-card--weak {
  border-color: rgba(231, 76, 60, .35);
}

.hla-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f4eef2;
}

.hla-card__media-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.hla-card__media-empty svg {
  width: 30px;
  height: 30px;
}

.hla-status,
.hla-photocount {
  position: absolute;
  top: 12px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.hla-status {
  left: 12px;
}

.hla-status.is-active {
  background: rgba(30, 143, 86, .92);
  color: #fff;
}

.hla-status.is-paused {
  background: rgba(39, 24, 38, .72);
  color: #fff;
}

.hla-photocount {
  right: 12px;
  background: rgba(255, 255, 255, .88);
  color: var(--color-text);
}

.hla-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  flex: 1;
}

.hla-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.hla-card__headtext {
  min-width: 0;
}

.hla-card__title {
  margin: 0 0 4px;
  font-size: var(--font-size-base);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--color-text);
}

.hla-card__loc {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.hla-gauge {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.hla-gauge svg {
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}

.hla-gauge__track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 4;
}

.hla-gauge__fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 119.38;
  transition: stroke-dashoffset .5s ease;
}

.hla-gauge--strong .hla-gauge__fill {
  stroke: var(--color-success);
}

.hla-gauge--medium .hla-gauge__fill {
  stroke: var(--color-warning);
}

.hla-gauge--weak .hla-gauge__fill {
  stroke: var(--color-danger);
}

.hla-gauge__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.hla-band {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.hla-band__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hla-band--strong {
  color: var(--color-success);
}

.hla-band--strong .hla-band__dot {
  background: var(--color-success);
}

.hla-band--medium {
  color: var(--color-warning);
}

.hla-band--medium .hla-band__dot {
  background: var(--color-warning);
}

.hla-band--weak {
  color: var(--color-danger);
}

.hla-band--weak .hla-band__dot {
  background: var(--color-danger);
}

.hla-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.hla-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.hla-metric__v {
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.hla-metric__l {
  font-size: 12px;
  color: var(--color-muted);
}

.hla-hints {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hla-hints__title {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hla-hints__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hla-hint {
  display: flex;
  gap: 9px;
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.hla-hint__icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.hla-hint--critical .hla-hint__icon {
  background: var(--color-danger);
}

.hla-hint--warning .hla-hint__icon {
  background: var(--color-warning);
}

.hla-hint--info .hla-hint__icon {
  background: var(--color-primary);
  opacity: .55;
}

.hla-hint__text {
  color: var(--color-muted);
}

.hla-hints__toggle {
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
  padding: 2px 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
}

.hla-allgood {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-success);
}

.hla-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.hla-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}

.hla-btn--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.hla-btn--success {
  background: var(--color-success);
  color: #fff;
}

.hla-btn--danger {
  background: transparent;
  border-color: rgba(231, 76, 60, .5);
  color: var(--color-danger);
}

.hla-btn--danger:hover {
  background: var(--color-danger);
  color: #fff;
}

.inbox-detail--empty {
  grid-column: 2;
  place-items: center;
  align-content: center;
  padding: 40px;
  background: var(--color-bg-soft);
  text-align: center;
}

.inbox-detail--empty__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 12px 30px var(--shadow-purple-5);
}

@media (max-width: 1100px) {
  .inbox-layout {
    grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  }

  .inbox-detail__actions .inbox-thread__badge {
    display: none;
  }
}

@media (max-width: 768px) {
  .inbox-page {
    padding: 0;
  }

  .inbox-layout {
    grid-template-columns: 1fr;
    height: min(720px, calc(100vh - 120px));
    min-height: 560px;
  }

  .inbox-list {
    height: 100%;
    border: 0;
  }

  .inbox-layout:not(.show-detail) .inbox-detail {
    display: none !important;
  }

  .inbox-layout.show-detail .inbox-detail {
    display: flex !important;
    grid-column: 1;
  }

  .inbox-detail__back-btn {
    display: grid;
    flex: 0 0 auto;
  }

  .inbox-thread {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .inbox-thread__meta {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
  }

  .inbox-detail__header {
    gap: 10px;
    padding: 12px;
  }

  .inbox-detail__avatar {
    width: 38px;
    height: 38px;
  }

  .inbox-detail__actions .inbox-detail__reply-btn {
    display: none;
  }

  .inbox-detail__context,
  .inbox-detail__body,
  .inbox-detail__composer {
    padding-inline: 14px;
  }

  .inbox-message__bubble {
    max-width: 88%;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   create-listing wizard — restored from commit afc81f3^.
   The "dry" refactor (afc81f3) deleted 274 of this component's 279 rules,
   leaving the six-step listing form rendering as an unstyled <ol> with raw
   browser-default inputs. Only rules that exclusively target create-listing
   classes are restored here — the old global button rule and the legacy
   desktop `.page-create-listing { margin-left: 20% }` are deliberately left out.
   ───────────────────────────────────────────────────────────────────────── */

.create-listing-panel__help {
  margin: 0 0 1.25rem;
  color: var(--create-listing-muted);
  font-size: 14px;
}

.create-listing-field {
  margin-bottom: 1.35rem;
}

.create-listing-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.create-listing-hint {
  margin: 0 0 0.45rem;
  font-size: 13px;
  color: var(--create-listing-muted);
}

.create-listing-input,
.create-listing-textarea {
  width: 100%;
  min-height: 52px;
  /* 16px, not 1.15rem: the 10px root made this 11.5px, and any control under
     16px makes iOS Safari zoom the viewport when the field is focused. */
  font-size: 16px !important;
  padding: 12px 14px !important;
  border: 2px solid var(--create-listing-border) !important;
  border-radius: 10px !important;
  color: var(--create-listing-fg);
  background: #fff;
  box-sizing: border-box;
}

.create-listing-textarea {
  min-height: 140px;
  resize: vertical;
}

.create-listing-error {
  color: var(--create-listing-error);
  font-size: 13px;
  margin: 0.4rem 0 0;
  font-weight: 600;
}

.create-listing-ok {
  color: var(--create-listing-ok);
  font-size: 13px;
  margin: 0.5rem 0 0;
  font-weight: 600;
}

.create-listing-period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.create-listing-period-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.65rem;
  border: 2px solid var(--create-listing-border);
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.create-listing-period-card__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.create-listing-filter-group {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}

.create-listing-filter-group__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0.65rem;
  color: var(--create-listing-primary);
}

.create-listing-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.55rem;
}

.create-listing-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.65rem 0.75rem;
  border: 2px solid var(--create-listing-border);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  font-size: 14px;
}

.create-listing-check:has(.create-listing-check__input:checked) {
  border-color: var(--create-listing-primary);
  background: #f8f0f9;
}

.create-listing-check__input {
  width: 1.35rem;
  height: 1.35rem;
  min-width: 1.35rem;
  margin-top: 0.15rem;
  accent-color: var(--create-listing-primary);
}

.create-listing-address-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.create-listing-address-row .create-listing-input {
  flex: 1 1 220px;
}

.create-listing-map {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  border: 2px solid var(--create-listing-border);
  margin-top: 0.75rem;
  background: #e8e8e8;
}

.create-listing-photo-preview {
  margin-bottom: 0.75rem;
}

.create-listing-photo-preview__img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  display: block;
  margin-bottom: 0.4rem;
}

.create-listing-btn--primary {
  background: var(--create-listing-primary);
  color: var(--create-listing-primary-contrast);
  border-color: var(--create-listing-primary);
}

.create-listing-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.create-listing-btn--secondary {
  background: #fff;
  color: var(--create-listing-primary);
  border-color: var(--create-listing-primary);
}

.create-listing-btn--ghost {
  background: transparent;
  color: var(--create-listing-fg);
  border-color: var(--create-listing-border);
}

/* AI vision (Phase 2): "Analyze my photos" panel + suggestion chips */
.create-listing-vision {
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed var(--create-listing-border);
  border-radius: 12px;
  background: var(--create-listing-surface, #faf7fb);
}

.create-listing-vision .create-listing-btn--secondary {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.create-listing-vision__hint {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}

.create-listing-vision__status {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--create-listing-fg);
}

.create-listing-vision__status--error {
  color: #b3261e;
}

.create-listing-vision__status--done {
  color: #1e7e34;
}

.create-listing-vision__progress {
  width: 100%;
  height: 8px;
  margin-top: 8px;
}

.create-listing-suggestions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--create-listing-border);
}

.create-listing-suggestions__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.create-listing-chip {
  padding: 6px 12px;
  border: 1px solid var(--create-listing-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--create-listing-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.create-listing-chip:hover {
  background: var(--create-listing-primary);
  color: #fff;
}

.create-listing-btn--publish {
  min-width: 200px;
  font-size: 16px !important;
}

.create-listing-price-row {
  display: flex;
  align-items: stretch;
  max-width: 320px;
  border: 2px solid var(--create-listing-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.create-listing-price-row .create-listing-input--price {
  flex: 1;
  min-width: 0;
}

.create-listing-flow__progress {
  margin-bottom: var(--space-4);
}

.create-listing-flow__progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.create-listing-flow__progress-step {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--create-listing-muted);
}

.create-listing-flow__progress-pct {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--create-listing-primary);
}

.create-listing-flow__bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #efe6ef;
}

.create-listing-flow__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b1856, #74206c);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.create-listing-tabs {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.create-listing-tabs::-webkit-scrollbar {
  display: none;
}

.create-listing-tabs__item {
  flex: 0 0 auto;
}

.create-listing-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--dim-2xl);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
  border: 1px solid rgba(82, 20, 74, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--create-listing-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}

.create-listing-tab:hover {
  border-color: rgba(82, 20, 74, 0.3);
  color: var(--create-listing-primary-dark);
}

.create-listing-tab__badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0e6f0;
  color: var(--create-listing-primary);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.create-listing-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  font-weight: 600;
  border: 1px solid transparent;
}

.create-listing-alert--error {
  background: var(--create-listing-error-bg);
  color: var(--create-listing-error);
  border-color: rgba(161, 37, 37, 0.3);
}

.create-listing-alert--success {
  background: #e8f5ec;
  color: var(--create-listing-ok);
  border-color: rgba(27, 122, 61, 0.3);
}

.create-listing-flow__form {
  margin: 0;
}

.create-listing-panel__badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-primary-soft, #f6eff6);
  color: var(--create-listing-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.create-listing-flow .create-listing-panel__help {
  margin: 0 0 1.25rem;
  color: var(--create-listing-muted);
  font-size: var(--font-size-md);
  line-height: 1.5;
}

.create-listing-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.create-listing-flow .create-listing-photo-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  margin: 0;
  border: 1px solid var(--create-listing-border);
  border-radius: 14px;
  background: #fff;
}

.create-listing-flow .create-listing-photo-preview__img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0;
}

.create-listing-summary {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--create-listing-border);
  border-radius: 16px;
  overflow: hidden;
}

.create-listing-summary__edit {
  border: 1px solid rgba(82, 20, 74, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--create-listing-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.create-listing-summary__edit:hover {
  background: var(--color-primary-soft, #f6eff6);
}

.create-listing-flow__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(82, 20, 74, 0.1);
}

.create-listing-flow .create-listing-btn--sm {
  min-width: 0;
  min-height: var(--dim-lg);
  padding: 0.3rem 0.85rem;
  font-size: var(--font-size-sm) !important;
}

.create-listing-flow .create-listing-btn--primary {
  background: linear-gradient(135deg, #5b1856, #74206c);
  color: var(--create-listing-primary-contrast);
  border-color: #5b1856;
  box-shadow: 0 9px 20px rgba(91, 24, 86, 0.16);
}

.create-listing-flow .create-listing-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.create-listing-flow .create-listing-btn--secondary {
  background: #fff;
  color: var(--create-listing-primary);
  border-color: var(--create-listing-primary);
}

.create-listing-flow .create-listing-btn--secondary:hover:not(:disabled) {
  background: var(--color-primary-soft, #f6eff6);
}

.create-listing-flow .create-listing-btn--ghost {
  background: transparent;
  color: var(--create-listing-fg);
  border-color: var(--create-listing-border);
}

.create-listing-flow .create-listing-btn--ghost:hover:not(:disabled) {
  background: #faf7fa;
}

.create-listing-flow .create-listing-btn--publish {
  min-width: 200px;
  font-size: var(--font-size-lg) !important;
}

@media (max-width: 560px) {
  .create-listing-flow__footer {
    flex-direction: column-reverse;
  }

  .create-listing-summary__edit {
    justify-self: start;
  }
}

/* Tokens the restored create-listing rules depend on.
   The create-listing colours are recovered from commit afc81f3^ and mapped
   onto the current design tokens. The dimension and font-size scale below was
   never declared anywhere (those rules referenced it even before the
   refactor), so it is defined here mobile-first: both dimensions clear the
   44px tap target and the control font sizes stay at or above 12px. */
:root {
  --create-listing-primary: var(--color-primary);
  --create-listing-primary-dark: var(--color-primary-dark);
  --create-listing-primary-contrast: #fff;
  --create-listing-fg: var(--color-text);
  --create-listing-muted: var(--color-muted);
  --create-listing-border: rgba(82, 20, 74, 0.16);
  --create-listing-error: #a12525;
  --create-listing-error-bg: #fdecec;
  --create-listing-ok: #1b7a3d;

  --dim-md: 44px;
  --dim-lg: 44px;
  --dim-2xl: 48px;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
}

/* Base button + tab state rules, also lost in afc81f3. These were skipped by
   the first restore pass because their selectors pair a create-listing class
   with a state class (.is-active/.is-done), and rem values are converted to px
   for the 10px root (1.15rem would have rendered 11.5px). */
:root {
  --dim-3xl: 52px;
}

.create-listing-btn {
  min-height: 52px;
  min-width: 140px;
  padding: 12px 20px;
  font-size: 16px !important;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
}

.create-listing-btn:disabled,
.create-listing-flow .create-listing-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.create-listing-flow .create-listing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--dim-3xl);
  min-width: 130px;
  padding: 10px 20px;
  font-size: var(--font-size-md) !important;
  font-weight: 750;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s, border-color 0.15s;
}

.create-listing-tab.is-done {
  color: var(--create-listing-primary-dark);
  border-color: rgba(43, 155, 96, 0.4);
}

.create-listing-tab.is-done .create-listing-tab__badge {
  background: #e4f4ea;
  color: #2b9b60;
}

.create-listing-tab.is-active {
  color: #fff;
  border-color: #5b1856;
  background: linear-gradient(135deg, #5b1856, #74206c);
  box-shadow: 0 8px 18px rgba(91, 24, 86, 0.18);
}

.create-listing-tab.is-active .create-listing-tab__badge {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.create-listing-check:has(.create-listing-check__input:checked) {
  border-color: var(--create-listing-primary);
  background: #f8f0f9;
}

/* ─────────────────────────────────────────────────────────────────────────
   create-listing polish pass (2026-07): the flow rendered structurally sound
   but visually flat — no panel chrome, no title hierarchy, summary as raw
   text. These rules add the premium finish: carded panels, gradient accents,
   softer focus states, and a review summary that reads like a document.
   ───────────────────────────────────────────────────────────────────────── */

.create-listing-flow {
  display: grid;
  gap: var(--space-5);
}

/* Each step is a soft card — the form stops feeling like a bare wireframe. */
.create-listing-panel {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(82, 20, 74, 0.1);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(91, 24, 86, 0.025), rgba(91, 24, 86, 0) 120px),
    #fff;
  box-shadow: 0 1px 2px rgba(42, 16, 40, 0.05), 0 12px 32px -18px rgba(91, 24, 86, 0.22);
}

.create-listing-panel__title {
  margin: 0 0 0.4rem;
  font-size: clamp(22px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--create-listing-primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Field cards: inputs sit in a subtle well instead of floating on the page. */
.create-listing-field {
  padding: 14px 16px 16px;
  border: 1px solid rgba(82, 20, 74, 0.08);
  border-radius: 14px;
  background: #fdfbfe;
}

.create-listing-field.has-error {
  border-color: rgba(161, 37, 37, 0.35);
  background: #fff8f8;
}

.create-listing-label {
  letter-spacing: 0.005em;
  color: #3d223a;
}

.create-listing-input:focus,
.create-listing-textarea:focus {
  outline: none;
  border-color: var(--create-listing-primary) !important;
  box-shadow: 0 0 0 4px rgba(116, 32, 108, 0.14);
}

/* Period cards + amenity checks: lift + tint on select instead of a flat tint. */
.create-listing-period-card,
.create-listing-check {
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.create-listing-period-card:hover,
.create-listing-check:hover {
  border-color: rgba(82, 20, 74, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(91, 24, 86, 0.35);
}

.create-listing-period-card.is-selected {
  border-color: var(--create-listing-primary);
  background: linear-gradient(135deg, #faf2fa, #f4e9f5);
  box-shadow: inset 0 0 0 1px var(--create-listing-primary), 0 8px 18px -10px rgba(91, 24, 86, 0.4);
}

/* Price row: R$ prefix looks like part of the control, not loose text. */
.create-listing-price-row {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--create-listing-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.create-listing-price-prefix {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: linear-gradient(135deg, #5b1856, #74206c);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}

.create-listing-price-row .create-listing-input--price {
  border: 0 !important;
  border-radius: 0 !important;
}

.create-listing-price-row:focus-within {
  border-color: var(--create-listing-primary);
  box-shadow: 0 0 0 4px rgba(116, 32, 108, 0.14);
}

/* Photo previews: keep the img flush and the remove action subtle. */
.create-listing-flow .create-listing-photo-preview {
  overflow: hidden;
  box-shadow: 0 4px 12px -6px rgba(42, 16, 40, 0.18);
}

/* Review summary: zebra rows, clear label/value hierarchy, roomy edit pills. */
.create-listing-summary__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 13px 18px;
  border-bottom: 1px solid rgba(82, 20, 74, 0.08);
}

.create-listing-summary__row:nth-child(odd) {
  background: rgba(91, 24, 86, 0.028);
}

.create-listing-summary__row:last-child {
  border-bottom: 0;
}

.create-listing-summary__row dt {
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--create-listing-muted);
}

.create-listing-summary__row dd {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--create-listing-fg);
  overflow-wrap: anywhere;
}

/* Footer actions: publish button gets the full brand gradient + lift. */
.create-listing-btn--publish,
.create-listing-flow .create-listing-btn--publish {
  background: linear-gradient(135deg, #5b1856, #7c2475);
  border-color: transparent;
  box-shadow: 0 10px 24px -10px rgba(91, 24, 86, 0.55);
}

.create-listing-btn--publish:hover:not(:disabled),
.create-listing-flow .create-listing-btn--publish:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(91, 24, 86, 0.6);
}

/* AI panels: brand-tinted gradient instead of a bare dashed box. */
.create-listing-vision {
  border: 1px solid rgba(116, 32, 108, 0.22);
  background: linear-gradient(135deg, rgba(116, 32, 108, 0.06), rgba(116, 32, 108, 0.015));
}

@media (prefers-reduced-motion: reduce) {

  .create-listing-period-card,
  .create-listing-check,
  .create-listing-btn--publish,
  .create-listing-flow .create-listing-btn--publish {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Modal shell (booking + booking-request).

   These use Bootstrap 3's .modal markup, but Bootstrap's JS never loads, so
   nothing positioned the dialog or drew a backdrop: the panel rendered
   top-left over the page content and the page behind stayed fully visible.
   openBookingModal() sets display:flex inline, so .modal.in only needs to
   supply the overlay, centring and scroll behaviour.
   ───────────────────────────────────────────────────────────────────────── */
.modal.in {
  position: fixed;
  inset: 0;
  z-index: 1050;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(39, 24, 38, 0.5);
  -webkit-overflow-scrolling: touch;
}

.modal.in>form,
.modal.in>.modal-dialog {
  width: 100%;
  margin: auto;
}

.modal.in .modal-dialog {
  width: min(560px, 92vw);
  max-width: 100%;
  margin: auto;
}

.modal.in .modal-content {
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(39, 24, 38, 0.24);
  overflow: hidden;
}

/* Title: Bootstrap's 34px/300 grey rendered as a light serif because Inter
   ships no 300 weight. Align it with the design system instead. */
.modal.in .modal-title {
  margin: 0;
  color: var(--color-primary-dark);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

.modal.in .modal-header {
  flex-direction: row-reverse;
  /* × sits at the trailing edge */
  gap: 12px;
}

.modal.in .modal-body fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Legend inherited a red from the Bootstrap reset — use the brand colour. */
.modal.in .modal-body legend {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
}

.modal.in .modal-body p {
  margin: 0 0 8px;
  color: var(--color-text);
  font-size: 14px;
}

/* Check-in and check-out sat on one line and wrapped mid-value. */
.modal.in #bookingDates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* The button carries .btn-success, which sets background-color and border-color
   with !important plus height:30px — hence the washed-out, squashed CTA. Those
   have to be beaten on their own terms. */
.modal.in #confirmBookingButton {
  width: 100%;
  height: auto;
  min-height: 44px;
  margin-top: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.modal.in #confirmBookingButton:hover:not(:disabled) {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

.modal.in #confirmBookingButton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.booking-modal__error {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #f0c4c4;
  border-radius: 10px;
  background: var(--create-listing-error-bg);
  color: var(--create-listing-error);
  font-size: 13px;
  font-weight: 600;
}

/* The countdown line has no value until a booking exists — hide the orphan
   label rather than showing "Your booking will expire on" with nothing. */
.modal.in #bookingCountdown:not(.is-active) {
  display: none;
}

@media (max-width: 768px) {
  .modal.in {
    padding: 12px;
  }

  .modal.in .modal-dialog {
    width: 100%;
  }

  .modal.in .modal-body {
    padding: 16px;
  }

  .modal.in .modal-header {
    padding: 16px 16px 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Availability calendar + slot chips (listing detail booking panel).
   Answers "which days can I actually book?" before the user commits to a
   date, instead of reporting a conflict after the fact.
   ───────────────────────────────────────────────────────────────────────── */
.booking-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.booking-cal__month {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-dark);
  /* pt-BR renders "julho de 2026"; `capitalize` would also uppercase the
     preposition ("Julho De 2026"), so only lift the first letter. */
  text-transform: lowercase;
}

.booking-cal__month::first-letter {
  text-transform: uppercase;
}

.booking-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.booking-cal__nav:hover {
  background: var(--color-primary-soft);
}

.booking-cal__weekdays,
.booking-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.booking-cal__weekdays {
  margin-bottom: 2px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.booking-cal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.booking-cal__day.is-outside {
  visibility: hidden;
}

/* Free days read as quietly available; the dot carries partial state so the
   grid stays legible at a glance without colour alone doing the work. */
.booking-cal__day.is-free {
  background: var(--color-primary-soft);
}

.booking-cal__day.is-free:hover {
  border-color: var(--color-primary);
}

.booking-cal__day.is-partial {
  background: #fff8e6;
  border-color: #f0dcae;
}

.booking-cal__day.is-partial::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-warning);
}

/* Fully booked and past days are inert — struck through so the state is not
   conveyed by colour alone. */
.booking-cal__day.is-full,
.booking-cal__day.is-past {
  background: transparent;
  color: var(--color-muted);
  cursor: not-allowed;
}

.booking-cal__day.is-full {
  text-decoration: line-through;
}

.booking-cal__day.is-past {
  opacity: 0.45;
}

.booking-cal__day.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.booking-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 12px;
}

.booking-cal__legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.booking-cal__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.booking-cal__dot--free {
  background: var(--color-primary-soft);
}

.booking-cal__dot--partial {
  background: #fff8e6;
  border-color: #f0dcae;
}

.booking-cal__dot--full {
  background: transparent;
}

/* The native date input stays in the DOM as a fallback and test hook, but the
   calendar is the primary control. */
.detail-booking__input--date,
.detail-booking__input--slot {
  margin-top: 10px;
}

/* ─── slot chips ─── */
.booking-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.booking-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.booking-slot__name {
  font-size: 13px;
  font-weight: 700;
}

.booking-slot__time {
  font-size: 12px;
  color: var(--color-muted);
}

.booking-slot__state {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-success);
}

.booking-slot:hover:not(.is-taken) {
  border-color: var(--color-primary);
}

.booking-slot.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.booking-slot.is-taken {
  background: var(--color-bg-soft);
  color: var(--color-muted);
  cursor: not-allowed;
}

.booking-slot.is-taken .booking-slot__state {
  color: var(--color-danger-deep);
}

.booking-slot.is-taken .booking-slot__name {
  text-decoration: line-through;
}

/* Disabled CTA must read as unavailable, not merely faded — the previous
   fully-saturated button invited a click that could never succeed. */
.detail-booking__cta:disabled {
  background: var(--color-bg-soft) !important;
  border-color: var(--color-border) !important;
  color: var(--color-muted) !important;
  box-shadow: none;
  cursor: not-allowed;
}

.detail-booking__availability--taken {
  color: var(--color-danger-deep);
  font-weight: 600;
}

.detail-booking__availability--free {
  color: var(--color-success);
  font-weight: 600;
}

/* ─── Hour picker: start time + duration ──────────────────────────────────
   A single horizontally scrollable row, never a wrapped grid: a wrapped
   12x2 grid cannot express a contiguous range (10:00–14:00 would paint two
   disjoint blobs), and 24 cells do not fit the ~354px usable width of the
   booking panel on a 390px phone. */
.booking-hours {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.booking-hour {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.booking-hour:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.booking-hour.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.booking-hour:disabled {
  background: var(--color-bg-soft);
  color: var(--color-muted);
  cursor: not-allowed;
}

.booking-hours__empty {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.booking-duration__label {
  margin-top: 12px;
}

.booking-window {
  margin: 10px 0 0;
  color: var(--color-text);
  font-size: 14px;
}

.booking-window strong {
  color: var(--color-primary-dark);
}

/* ─── Star rating input ───────────────────────────────────────────────────
   A real radio group. The visible star is the <span>; the radio itself is
   visually hidden but focusable, so keyboard and screen-reader users get the
   native control while pointer users get a 44px star. */
.detail-rate__stars {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.star-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  margin: 0;
  color: var(--color-border-light);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s;
}

.star-input.is-on {
  color: #f0a500;
}

/* Hover/focus preview: light up this star and everything before it. */
.detail-rate__stars:hover .star-input {
  color: #f0a500;
}

.detail-rate__stars .star-input:hover~.star-input {
  color: var(--color-border-light);
}

.star-input input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.star-input input:focus-visible+span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen-reader-only text (the fieldset legend). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Agenda: ongoing chip + day detail ───────────────────────────────────
   A long booking covers every day it spans. Rendering each as a full pill
   flooded every cell with identical chips and read as duplicated data, so
   continuing bookings collapse into one summary chip. */
.agenda-day__ongoing {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
}

/* Day detail. The sidecard lives inside .agenda-day-pro (day view only), so
   month view had no way to inspect a day or an event. */
.agenda-daydetail {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.agenda-daydetail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.agenda-daydetail__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 16px;
  font-weight: 700;
  text-transform: lowercase;
}

.agenda-daydetail__title::first-letter {
  text-transform: uppercase;
}

.agenda-daydetail__count {
  color: var(--color-muted);
  font-size: 13px;
}

.agenda-daydetail__empty {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}

.agenda-daydetail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agenda-daydetail__item {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.agenda-daydetail__item:hover {
  border-color: var(--color-primary);
}

.agenda-daydetail__item.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.agenda-daydetail__when {
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
}

.agenda-daydetail__what {
  color: var(--color-text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-daydetail__status {
  font-size: 12px;
  font-weight: 700;
}

.agenda-daydetail__status.is-confirmed {
  color: var(--color-success);
}

.agenda-daydetail__status.is-pending {
  color: var(--color-warning);
}

.agenda-daydetail__selected {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.agenda-daydetail__meta {
  margin: 0 0 6px;
  color: var(--color-muted);
  font-size: 13px;
}

@media (max-width: 768px) {
  .agenda-daydetail__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Day-detail rows: the booking reference disambiguates listings that share a
   title and address (common in seed data, possible in production). */
.agenda-daydetail__ref {
  margin-left: 6px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
}

/* The panel must never inherit the month grid's intrinsic width — it sits in a
   horizontally scrollable 7-column container, which made it 700px wide inside
   a 390px viewport. */
.agenda-daydetail {
  max-width: 100%;
  box-sizing: border-box;
}

/* Title truncates, reference never does — the reference is what distinguishes
   two rows that share a title and address. */
.agenda-daydetail__what {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.agenda-daydetail__what>span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-daydetail__ref {
  flex: 0 0 auto;
  margin-left: 0;
}

@media (max-width: 768px) {
  .agenda-daydetail__when {
    font-size: 12px;
  }
}


.mobile-menu-close:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.mobile-menu-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Shown when the visitor already has a review on this listing — submitting
   replaces it (listing_review_client_listing_uix allows only one). */
.detail-rate__hint {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 13px;
}
/* ═════════════════════════════════════════════════════════════════════════
   SEARCH: card <-> map linkage
   ─────────────────────────────────────────────────────────────────────────
   Everything below is additive and scoped to .search-results,
   .search-map-carousel or to new classes (.is-map-active, .is-map-selected,
   .listing-card__map-btn, .listing-distance, .map-pin*). The only shared
   selector touched is .listing-card:hover, and only inside .search-results.

   Class contract with the layout / interaction builders:
     .listing-card.is-map-active     hoveredId or focusedId  -> this card
     .listing-card.is-map-selected   selectedId              -> this card
     .listing-card__map-btn          "Ver no mapa" pin button
     .listing-distance               the row that replaced the address line
     .map-pin                        put on marker.content (or a cluster
                                     element) at creation time
     .map-pin--active / --selected   emphasis tiers
   ═════════════════════════════════════════════════════════════════════════ */

/* The shared .listing-grid is 3 fixed columns, which the map column squeezes to
   ~220px per card — too narrow to read a title, a price and a distance row.
   Below the split-view breakpoint the track count follows the available width
   (1 column on a phone); the split view itself is pinned to 2 columns at every
   size, which is what the split-view references all settle on. Leaving it on
   auto-fill there makes the count swing between 1, 2 and 3 as the map's clamp
   engages, and 3 puts the cards back under 260px. */
.search-results .listing-grid {
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}

/* container-type gives .listing-card__map-btn an exact anchor: .listing-media
   is full-width with aspect-ratio 4/3, so its height is always 75cqi. This
   lets the button sit at the bottom-right of the photo while staying a direct
   child of <article> — a <button> inside the navigation <a> is invalid HTML
   and browsers reparent it. position:relative alone is not enough. */
/* outline-color is deliberately NOT transitioned. Its initial value is
   currentcolor (near-black here), so any in-flight frame paints the linkage
   ring in the body text colour instead of brand purple — and on a throttled
   or backgrounded tab it never advances past that first frame. The ring has
   to read as "this card is that pin" on the first frame, so it lands instantly
   and only the depth cues animate. */
.search-results .listing-card,
.search-map-carousel .listing-card {
  position: relative;
  container-type: inline-size;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Baymard: on a multi-destination list item, sub-elements must not light up
   independently. Hovering anywhere in the <article> highlights the map pin
   (JS), but only the navigation <a> gets the "go to this listing" lift — the
   WhatsApp <a> keeps its own hover treatment. Without :has() the file's
   existing whole-card lift stays, which is the safe degradation. */
@supports selector(:has(*)) {
  .search-results .listing-card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }

  .search-results .listing-card:has(> a:not(.listing-card__whatsapp):hover) {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px var(--shadow-purple-3);
  }

  /* Keyboard parity with the hover ring (WCAG 2.1.1). JS also sets
     .is-map-active on focusin; this covers the frame before it lands. */
  .search-results .listing-card:has(:focus-visible),
  .search-map-carousel .listing-card:has(:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--shadow-purple-8), 0 20px 60px var(--shadow-purple-3);
  }
}

/* The card <-> pin link. Deliberately loud: at a 40%-wide map a subtle tint is
   unreadable across the gap, and this is the whole point of the interaction. */
.listing-card.is-map-active {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--shadow-purple-8), 0 20px 60px var(--shadow-purple-3);
}

/* Third tier: a deliberate commit (pin click or "Ver no mapa"). Persists. */
.listing-card.is-map-selected {
  outline: 3px solid var(--color-primary-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--shadow-purple-4), 0 24px 68px var(--shadow-purple-3);
}

/* ─── "Ver no mapa" — the tap + keyboard equivalent of hover ─────────────── */
.listing-card__map-btn {
  position: absolute;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dim-md);
  height: var(--dim-md);
  padding: 0;
  border: 1px solid var(--color-border);
  /* !important only to out-rank the global `button { border-radius: 12px
     !important }` near the top of this file. Without it this circular control
     renders as a squircle. Same reason on .search-map-toggle / __close. */
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary-deep);
  cursor: pointer;
  box-shadow: 0 4px 14px var(--shadow-purple-5);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Preferred placement: direct child of <article>, outside the nav <a>.
   75cqi is the height of .listing-media (full width, aspect-ratio 4/3). */
.listing-card > .listing-card__map-btn {
  top: calc(75cqi - var(--dim-md) - 12px);
}

/* Fallback placement if the button ends up inside .listing-media instead. */
.listing-media > .listing-card__map-btn {
  top: auto;
  bottom: 12px;
}

.listing-card__map-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.listing-card__map-btn:hover {
  background: var(--color-primary-deep);
  color: #fff;
  border-color: var(--color-primary-deep);
  transform: scale(1.06);
}

.listing-card__map-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.listing-card.is-map-selected .listing-card__map-btn {
  background: var(--color-primary-deep);
  color: #fff;
  border-color: var(--color-primary-deep);
}

/* ─── Distance + pin row (replaces the ", " address line) ─────────────────
   city/state are empty on every imported row, so the old
   "<city>, <state> · 768 m" rendered as a bare ", · 768 m". This row shows
   distance alone, and falls back to city/state only when both are present. */
.listing-distance {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-height: 20px;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.3;
}

.listing-distance__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.listing-distance__value {
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.listing-distance__place {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-distance:empty {
  display: none;
}

/* ─── Map pins ────────────────────────────────────────────────────────────
   Put .map-pin on marker.content when the marker is created. The transition
   applies even when JS writes style.transform inline (which highlightMarker
   already does), so the 1.3x jump becomes a 140ms ease. The pin's fill lives
   in Google's shadow DOM and cannot be reached from here — the inverted
   background/border/glyph must be set on the PinElement in JS. */
.map-pin {
  transform-origin: 50% 100%;
  transition: transform 140ms ease-out, filter 140ms ease-out;
}

.map-pin--active {
  transform: scale(1.28);
  filter: drop-shadow(0 4px 10px rgba(39, 24, 38, 0.35));
}

.map-pin--selected {
  transform: scale(1.4);
  filter: drop-shadow(0 0 6px rgba(78, 28, 81, 0.85)) drop-shadow(0 6px 14px rgba(39, 24, 38, 0.35));
}

/* ─── Map chrome: skip link, hint, off-screen edge indicator ─────────────── */
/* Hidden by clip-path + zero size, not by translate: .search-map does not clip
   its overflow, so a translated-off link stays fully painted above the canvas.
   Clipping is also what keeps it out of the a11y tree's visual order without
   using display:none, which would make it unfocusable. */
.search-map__skip {
  position: absolute;
  left: calc(var(--layout-gutter) / 2 + 12px);
  top: calc(var(--layout-gutter) / 2 + 12px);
  z-index: 4;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border-radius: 999px;
  background: var(--color-primary-deep);
  color: #fff !important;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-decoration: none;
}

.search-map__skip:focus {
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  overflow: visible;
  clip: auto;
  clip-path: none;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.search-map__hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--layout-gutter) / 2 + 16px);
  transform: translateX(-50%);
  z-index: 3;
  max-width: calc(100% - var(--space-8));
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: rgba(39, 24, 38, 0.88);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-align: center;
}

/* Reduced-motion substitute for the conditional pan: a 400ms glow on the
   border side the off-screen marker lies toward. JS toggles .is-on. */
.search-map__edge {
  position: absolute;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.search-map__edge.is-on {
  opacity: 1;
}

.search-map__edge--top,
.search-map__edge--bottom {
  left: calc(var(--layout-gutter) / 2);
  right: var(--layout-gutter);
  height: 56px;
}

.search-map__edge--left,
.search-map__edge--right {
  top: calc(var(--layout-gutter) / 2);
  bottom: calc(var(--layout-gutter) / 2);
  width: 56px;
}

.search-map__edge--top {
  top: calc(var(--layout-gutter) / 2);
  background: linear-gradient(to bottom, var(--shadow-purple-3), transparent);
}

.search-map__edge--bottom {
  bottom: calc(var(--layout-gutter) / 2);
  background: linear-gradient(to top, var(--shadow-purple-3), transparent);
}

.search-map__edge--left {
  left: calc(var(--layout-gutter) / 2);
  background: linear-gradient(to right, var(--shadow-purple-3), transparent);
}

.search-map__edge--right {
  right: var(--layout-gutter);
  background: linear-gradient(to left, var(--shadow-purple-3), transparent);
}

/* ═════════════════════════════════════════════════════════════════════════
   SEARCH MAP SHEET (< 1024px)
   Airbnb's pattern: list full width, map reached from a floating pill, opened
   as a full-screen sheet with a snap carousel of the results in front of it.
   Body scroll lock reuses the existing body.drawer-open rule.
   ═════════════════════════════════════════════════════════════════════════ */
.search-map-toggle {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--dim-md);
  padding: 0 20px;
  border: 0;
  border-radius: 999px !important;
  background: var(--color-primary-dark);
  color: #fff;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(39, 24, 38, 0.32);
}

.search-map-toggle svg {
  width: 18px;
  height: 18px;
}

.search-map-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.search-map__close {
  position: absolute;
  top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  right: var(--space-3);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dim-md);
  height: var(--dim-md);
  border: 1px solid var(--color-border);
  border-radius: 999px !important;
  background: #fff;
  color: var(--color-primary-deep);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--shadow-purple-5);
}

.search-map__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.search-map-carousel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.search-map-carousel::-webkit-scrollbar {
  display: none;
}

.search-map-carousel > * {
  flex: 0 0 min(30rem, 82%);
  scroll-snap-align: center;
}

@media (max-width: 1023px) {
  .search-page .search-map-toggle {
    display: inline-flex;
  }

  .search-map.is-sheet-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--search-sheet-z);
    height: 100%;
    padding: 0;
    background: var(--color-bg);
  }

  .search-map.is-sheet-open .search-map__canvas {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .search-map.is-sheet-open ~ .search-map-toggle,
  .search-page:has(.search-map.is-sheet-open) .search-map-toggle {
    display: none;
  }

  .search-map__skip,
  .search-map__hint {
    left: var(--space-4);
  }

  .search-map__hint {
    left: 50%;
    bottom: calc(12rem + env(safe-area-inset-bottom, 0px));
  }

  .search-map__edge--top,
  .search-map__edge--bottom {
    left: 0;
    right: 0;
  }

  .search-map__edge--left {
    left: 0;
    top: 0;
    bottom: 0;
  }

  .search-map__edge--right {
    right: 0;
    top: 0;
    bottom: 0;
  }
}

/* Vestibular guidance exempts map panning that conveys spatial context, so JS
   keeps the functional camera moves (instantly, via setCenter/setZoom) — what
   is dropped here is the decorative motion. */
@media (prefers-reduced-motion: reduce) {

  .search-results .listing-card,
  .search-map-carousel .listing-card,
  .listing-card__map-btn,
  .search-map__edge,
  .map-pin {
    transition: none;
  }

  .listing-card__map-btn:hover {
    transform: none;
  }

  .search-map-carousel {
    scroll-behavior: auto;
  }
}