:root {
  --vfy-color-rose: #d92b5a;
  --vfy-color-blush: #fabecf;
  --vfy-color-teal: #4ba6a6;
  --vfy-color-mist: #f5f2f5;
  --vfy-color-cocoa: #291817;

  --vfy-primary: var(--vfy-color-rose);
  --vfy-primary-hover: #bd214c;
  --vfy-primary-soft: #fde7ee;
  --vfy-secondary: var(--vfy-color-teal);
  --vfy-secondary-hover: #3d8e8e;
  --vfy-accent: var(--vfy-color-blush);
  --vfy-bg: var(--vfy-color-mist);
  --vfy-surface: #ffffff;
  --vfy-text: var(--vfy-color-cocoa);
  --vfy-text-muted: #725e5c;
  --vfy-border: #e6dfe4;
  --vfy-success: #277a53;
  --vfy-warning: #a66a00;
  --vfy-danger: #b42345;

  --vfy-radius-sm: 0.5rem;
  --vfy-radius: 0.875rem;
  --vfy-radius-lg: 1.25rem;
  --vfy-section-space: clamp(3rem, 8vw, 6rem);
  --vfy-card-shadow: 0 1rem 2.5rem rgba(41, 24, 23, 0.08);
  --vfy-focus-ring: 0 0 0 0.25rem rgba(75, 166, 166, 0.28);
  --vfy-button-transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;

  --vfy-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vfy-font-display: "Varela Round", var(--vfy-font-body);

  /* SB Admin 2 layout metrics (ported to BS5) */
  --vfy-admin-sidebar-width: 14rem;
  --vfy-admin-sidebar-collapsed: 6.5rem;
  --vfy-admin-topbar-height: 4.375rem;
  --vfy-admin-shadow: 0 0.15rem 1.75rem rgba(41, 24, 23, 0.15);

  /* One width budget for page edges and nested surfaces. Components that need to
     change shape use their own inline size instead of guessing from the viewport. */
  --vfy-container-inset: 2rem;
  --vfy-panel-padding: clamp(1rem, 2vw, 1.5rem);
}

body {
  background: var(--vfy-bg);
  color: var(--vfy-text);
  font-family: var(--vfy-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--vfy-font-display);
}

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

a:hover {
  color: var(--vfy-primary-hover);
}

:focus-visible {
  outline: 0;
  box-shadow: var(--vfy-focus-ring);
}

.vfy-shell {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(250, 190, 207, 0.28), rgba(245, 242, 245, 0) 24rem),
    var(--vfy-bg);
}

.vfy-container {
  width: min(calc(100% - var(--vfy-container-inset)), 72rem);
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  margin-inline: auto;
}

.vfy-section {
  padding-block: var(--vfy-section-space);
}

.vfy-section-sm {
  padding-block: calc(var(--vfy-section-space) * 0.55);
}

.vfy-section-header {
  max-width: 46rem;
  margin-bottom: 2rem;
}

.vfy-eyebrow {
  color: var(--vfy-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vfy-muted {
  color: var(--vfy-text-muted);
}

.vfy-divider {
  border: 0;
  border-top: 1px solid var(--vfy-border);
  margin-block: 1.5rem;
}

.vfy-card {
  background: var(--vfy-surface);
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius);
  box-shadow: var(--vfy-card-shadow);
}

.vfy-card-soft {
  background: color-mix(in srgb, var(--vfy-accent) 24%, #fff);
  border: 1px solid color-mix(in srgb, var(--vfy-accent) 44%, #fff);
  border-radius: var(--vfy-radius);
}

.vfy-navbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--vfy-border);
  backdrop-filter: blur(14px);
}

.vfy-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--vfy-primary);
  color: #fff;
  font-weight: 800;
}

.vfy-navbar .nav-link {
  color: var(--vfy-text-muted);
  font-weight: 600;
}

.vfy-navbar .nav-link:hover,
.vfy-navbar .nav-link:focus,
.vfy-navbar .nav-link.active,
.vfy-navbar .nav-link[aria-current="page"] {
  color: var(--vfy-text);
}

.nav-pills .nav-link {
  color: var(--vfy-text-muted);
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus,
.nav-pills .nav-link[aria-current="page"] {
  background: var(--vfy-primary-soft);
  color: var(--vfy-primary);
}

.vfy-hero {
  padding-block: clamp(3rem, 8vw, 7rem);
}

.vfy-hero-panel {
  min-height: 20rem;
  background:
    radial-gradient(circle at 22% 18%, rgba(250, 190, 207, 0.82), transparent 36%),
    linear-gradient(135deg, rgba(75, 166, 166, 0.18), rgba(217, 43, 90, 0.14)),
    var(--vfy-surface);
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius-lg);
}

.btn,
.vfy-btn {
  --bs-btn-border-radius: 999px;
  --bs-btn-font-weight: 700;
  transition: var(--vfy-button-transition);
}

.vfy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid transparent;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.vfy-btn:hover {
  transform: translateY(-1px);
}

.vfy-btn-primary,
.btn-primary {
  --bs-btn-bg: var(--vfy-primary);
  --bs-btn-border-color: var(--vfy-primary);
  --bs-btn-hover-bg: var(--vfy-primary-hover);
  --bs-btn-hover-border-color: var(--vfy-primary-hover);
  --bs-btn-active-bg: var(--vfy-primary-hover);
  --bs-btn-active-border-color: var(--vfy-primary-hover);
  --bs-btn-disabled-bg: var(--vfy-primary);
  --bs-btn-disabled-border-color: var(--vfy-primary);
  color: #fff;
}

.vfy-btn-primary {
  background: var(--vfy-primary);
  border-color: var(--vfy-primary);
  color: #fff;
}

.vfy-btn-primary:hover {
  background: var(--vfy-primary-hover);
  border-color: var(--vfy-primary-hover);
  color: #fff;
}

.vfy-btn-secondary {
  background: var(--vfy-secondary);
  border-color: var(--vfy-secondary);
  color: #fff;
}

.vfy-btn-secondary:hover {
  background: var(--vfy-secondary-hover);
  border-color: var(--vfy-secondary-hover);
  color: #fff;
}

.vfy-btn-outline {
  background: transparent;
  border-color: var(--vfy-border);
  color: var(--vfy-text);
}

.vfy-btn-outline:hover {
  border-color: var(--vfy-primary);
  color: var(--vfy-primary);
}

.vfy-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--vfy-primary);
}

.vfy-btn-danger {
  background: var(--vfy-danger);
  border-color: var(--vfy-danger);
  color: #fff;
}

.vfy-btn-success {
  background: var(--vfy-success);
  border-color: var(--vfy-success);
  color: #fff;
}

.vfy-btn-full {
  width: 100%;
}

.vfy-btn-sm {
  min-height: 2.25rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
}

.vfy-btn-lg {
  min-height: 3.25rem;
  padding: 0.95rem 1.45rem;
  font-size: 1.0625rem;
}

.vfy-btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.76;
}

.vfy-btn:disabled,
.vfy-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.56;
}

.vfy-btn[aria-busy="true"]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vfy-spin 700ms linear infinite;
}

@keyframes vfy-spin {
  to { transform: rotate(360deg); }
}

.vfy-form-card {
  background: var(--vfy-surface);
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius-lg);
  box-shadow: var(--vfy-card-shadow);
}

.vfy-form-label,
.form-label {
  color: var(--vfy-text);
  font-weight: 700;
}

.vfy-required::after {
  content: " *";
  color: var(--vfy-danger);
}

.form-control,
.form-select {
  border-color: var(--vfy-border);
  border-radius: var(--vfy-radius-sm);
  color: var(--vfy-text);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--vfy-secondary);
  box-shadow: var(--vfy-focus-ring);
}

.form-check-input:checked {
  background-color: var(--vfy-primary);
  border-color: var(--vfy-primary);
}

.vfy-helper-text {
  color: var(--vfy-text-muted);
  font-size: 0.875rem;
}

.vfy-field-error {
  color: var(--vfy-danger);
  font-size: 0.875rem;
}

.vfy-field-success {
  color: var(--vfy-success);
  font-size: 0.875rem;
}

.vfy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--vfy-primary-soft);
  color: var(--vfy-primary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.vfy-badge-success {
  background: rgba(39, 122, 83, 0.12);
  color: var(--vfy-success);
}

.vfy-badge-warning {
  background: rgba(166, 106, 0, 0.12);
  color: var(--vfy-warning);
}

.vfy-badge-muted {
  background: var(--vfy-bg);
  color: var(--vfy-text-muted);
}

.vfy-badge-danger {
  background: rgba(180, 35, 69, 0.12);
  color: var(--vfy-danger);
}

.vfy-alert {
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius);
  background: var(--vfy-surface);
  color: var(--vfy-text);
}

.vfy-alert-danger {
  border-color: rgba(180, 35, 69, 0.28);
  background: rgba(180, 35, 69, 0.08);
}

.vfy-alert-success {
  border-color: rgba(39, 122, 83, 0.26);
  background: rgba(39, 122, 83, 0.08);
}

.vfy-alert-warning {
  border-color: rgba(166, 106, 0, 0.28);
  background: rgba(166, 106, 0, 0.08);
}

.vfy-alert[data-dismissible] {
  position: relative;
  padding-right: 3rem;
}

.vfy-alert-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.vfy-alert-close:hover {
  background: rgba(41, 24, 23, 0.08);
}

.vfy-venue-card {
  overflow: hidden;
  height: 100%;
}

.vfy-venue-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(250, 190, 207, 0.62), rgba(75, 166, 166, 0.2)),
    var(--vfy-bg);
  color: var(--vfy-text-muted);
}

/* Uniform thumbnails regardless of source dimensions. */
.vfy-venue-media > img,
.vfy-venue-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Click-to-enlarge affordance on a media tile. */
.vfy-media-expand {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(41, 24, 23, 0.55);
  color: #fff;
  opacity: 1; /* visible by default (touch); hover-hidden on pointer devices below */
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.vfy-media-expand:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .vfy-media-expand { opacity: 0; }
  .vfy-venue-media:hover .vfy-media-expand,
  .vfy-venue-media:focus-within .vfy-media-expand,
  .vfy-venue-carousel:hover .vfy-media-expand,
  .vfy-venue-carousel:focus-within .vfy-media-expand { opacity: 1; }
}

/* Customer venue gallery: stable frame, manual controls, touch swiping, and a
   compact indicator rail. The owner media manager intentionally remains a grid. */
.vfy-venue-carousel {
  overflow: hidden;
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius-lg);
  background: var(--vfy-surface);
  box-shadow: var(--vfy-card-shadow);
}

.vfy-venue-carousel .carousel-inner {
  background: #160f0f;
}

.vfy-venue-carousel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 38rem;
  overflow: hidden;
}

.vfy-venue-carousel-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #160f0f;
}

video.vfy-venue-carousel-media {
  object-fit: contain;
}

.vfy-venue-carousel-caption,
.vfy-venue-carousel-count {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - 7rem);
  border-radius: 999px;
  background: rgba(41, 24, 23, 0.78);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.3;
  backdrop-filter: blur(6px);
}

.vfy-venue-carousel-caption {
  left: 1rem;
  bottom: 1rem;
  padding: 0.45rem 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vfy-venue-carousel-count {
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.55rem;
  font-variant-numeric: tabular-nums;
}

.vfy-venue-carousel .carousel-control-prev,
.vfy-venue-carousel .carousel-control-next {
  bottom: 2.25rem;
  width: 3.5rem;
}

.vfy-venue-carousel .carousel-control-prev-icon,
.vfy-venue-carousel .carousel-control-next-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background-color: rgba(41, 24, 23, 0.76);
  background-size: 58%;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.24);
}

.vfy-venue-carousel .carousel-indicators {
  position: static;
  gap: 0.25rem;
  margin: 0;
  padding: 0.75rem 1rem;
}

.vfy-venue-carousel .carousel-indicators [data-bs-target] {
  box-sizing: border-box;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--vfy-text-muted);
  opacity: 0.28;
}

.vfy-venue-carousel .carousel-indicators .active {
  background-color: var(--vfy-primary);
  opacity: 1;
}

@media (max-width: 575.98px) {
  .vfy-venue-carousel-frame {
    aspect-ratio: 4 / 3;
  }

  .vfy-venue-carousel-caption {
    right: 3.5rem;
    bottom: 0.65rem;
    left: 0.65rem;
    max-width: none;
  }

  .vfy-venue-carousel .carousel-control-prev,
  .vfy-venue-carousel .carousel-control-next {
    bottom: 2.2rem;
    width: 2.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vfy-venue-carousel .carousel-item {
    transition: none;
  }
}

/* Lightbox — shows the original at natural size. */
.vfy-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(41, 24, 23, 0.82);
}
.vfy-lightbox[aria-hidden="false"] { display: flex; }
.vfy-lightbox-content {
  position: relative;
  max-width: min(100%, 1100px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vfy-lightbox-stage { display: flex; align-items: center; justify-content: center; }
.vfy-lightbox-stage img,
.vfy-lightbox-stage video {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--vfy-radius-sm);
  background: #000;
}
.vfy-lightbox-caption { color: #fff; text-align: center; font-size: 0.9rem; margin: 0; }
.vfy-lightbox-close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--vfy-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.vfy-lightbox-close:focus-visible { outline: 2px solid var(--vfy-secondary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .vfy-media-expand { transition: none; }
}

.vfy-feature-list {
  display: grid;
  gap: 0.5rem;
  padding-left: 0;
  list-style: none;
}

.vfy-feature-list li::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--vfy-secondary);
}

.vfy-calendar {
  background: var(--vfy-surface);
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius-lg);
}

.vfy-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.vfy-calendar-weekday {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vfy-text-muted);
  padding: 0.25rem 0;
}

/* --- Day cell: number / price / status dot stacked --- */
.vfy-calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 3.5rem;
  padding: 0.25rem;
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius-sm);
  background: var(--vfy-surface);
  color: var(--vfy-text);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.vfy-calendar-num { font-size: 0.95rem; }
.vfy-calendar-price { font-size: 0.68rem; font-weight: 700; color: var(--vfy-text-muted); }
.vfy-calendar-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--vfy-success);
}
.vfy-calendar-dot[data-status="booked"] { background: var(--vfy-danger); }
.vfy-calendar-dot[data-status="blocked"] { background: var(--vfy-warning); }

.vfy-calendar-day.is-outside {
  background: transparent;
  border-color: transparent;
  opacity: 0.4;
  pointer-events: none;
}
.vfy-calendar-day.is-past { opacity: 0.5; }
.vfy-calendar-day[data-status="booked"] { background: rgba(180, 35, 69, 0.07); }
.vfy-calendar-day[data-status="blocked"] { background: rgba(166, 106, 0, 0.08); }
.vfy-calendar-day.is-holiday { border-color: color-mix(in srgb, var(--vfy-accent) 60%, var(--vfy-border)); }
.vfy-calendar-day.is-holiday .vfy-calendar-price { color: var(--vfy-primary); }
.vfy-calendar-day.is-custom { border-color: color-mix(in srgb, var(--vfy-secondary) 60%, var(--vfy-border)); }
.vfy-calendar-day.is-custom .vfy-calendar-price { color: var(--vfy-secondary); font-weight: 700; }

.vfy-calendar-day[aria-disabled="true"],
.vfy-calendar-day:disabled,
.vfy-time-slot[aria-disabled="true"] {
  cursor: not-allowed;
}

.vfy-calendar-day:not([aria-disabled="true"]):not(:disabled),
.vfy-time-slot:not([aria-disabled="true"]):not(:disabled) {
  cursor: pointer;
}

.vfy-calendar-day:not([aria-disabled="true"]):not(:disabled):hover,
.vfy-time-slot:not([aria-disabled="true"]):not(:disabled):hover {
  border-color: var(--vfy-secondary);
}

.vfy-calendar-day:focus-visible {
  outline: 2px solid var(--vfy-secondary);
  outline-offset: 2px;
}

.vfy-calendar-day.is-today {
  border-color: var(--vfy-secondary);
  box-shadow: inset 0 0 0 1px var(--vfy-secondary);
}

.vfy-calendar-day[aria-selected="true"],
.vfy-time-slot[aria-selected="true"] {
  background: var(--vfy-primary);
  border-color: var(--vfy-primary);
  color: #fff;
}
.vfy-calendar-day[aria-selected="true"] .vfy-calendar-num,
.vfy-calendar-day[aria-selected="true"] .vfy-calendar-price { color: #fff; }
.vfy-calendar-day[aria-selected="true"] .vfy-calendar-dot { background: #fff; }

/* --- Legend --- */
.vfy-calendar-legend { font-size: 0.8rem; color: var(--vfy-text-muted); }
.vfy-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.vfy-legend-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--vfy-success);
}
.vfy-legend-dot[data-status="booked"] { background: var(--vfy-danger); }
.vfy-legend-dot[data-status="blocked"] { background: var(--vfy-warning); }
.vfy-legend-dot.is-holiday { background: var(--vfy-accent); }

/* --- Holiday tag --- */
.vfy-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}
.vfy-tag-holiday {
  background: color-mix(in srgb, var(--vfy-accent) 40%, #fff);
  color: var(--vfy-primary);
}
.vfy-tag-custom {
  background: color-mix(in srgb, var(--vfy-secondary) 25%, #fff);
  color: color-mix(in srgb, var(--vfy-secondary) 70%, #000);
}

/* --- Mobile agenda list (hidden on >= md) --- */
.vfy-calendar-agenda { display: none; }
.vfy-calendar-agenda-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--vfy-border);
}
.vfy-calendar,
.vfy-upfront,
.vfy-sigpad,
.vfy-responsive-panel,
.vfy-venue-filters {
  container-type: inline-size;
}

.vfy-agenda-main,
.vfy-responsive-content {
  min-width: 0;
}

/* Component-width fallbacks: an agenda can be narrow inside a dashboard column
   even when the browser itself is wider than a phone. */
@container (max-width: 25rem) {
  .vfy-calendar-agenda-item {
    align-items: stretch;
    flex-direction: column;
  }

  .vfy-calendar-agenda-item > .vfy-btn {
    width: 100%;
  }
}
.vfy-calendar-agenda-item:last-child { border-bottom: 0; }
.vfy-calendar-agenda-item.is-past { opacity: 0.5; }
.vfy-calendar-agenda-item.is-selected { background: var(--vfy-primary-soft); border-radius: var(--vfy-radius-sm); }
.vfy-agenda-main { display: flex; flex-direction: column; gap: 0.2rem; }
.vfy-agenda-date { font-weight: 700; }
.vfy-agenda-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.vfy-agenda-price { font-weight: 700; }

/* --- Time-slot picker (replaces the native time input) --- */
.vfy-timeslot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  gap: 0.5rem;
}
.vfy-time-slot {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius-sm);
  background: var(--vfy-surface);
  color: var(--vfy-text);
  font-weight: 600;
  font-size: 0.85rem;
  transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.vfy-time-slot:not([aria-disabled="true"]):not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(41, 24, 23, 0.08);
}
.vfy-time-slot[aria-selected="true"] { box-shadow: 0 4px 12px rgba(217, 43, 90, 0.26); }
.vfy-time-slot:focus-visible { outline: 2px solid var(--vfy-secondary); outline-offset: 2px; }

/* --- Hour:Minute:AM/PM time picker --- */
.vfy-timepick-field {
  width: auto;
  min-width: 5rem;
}
.vfy-timepick-sep {
  font-weight: 700;
  color: var(--vfy-text-muted);
}

/* --- Calendar polish: tactile hover, refined selected/today, circular nav --- */
.vfy-calendar-month {
  font-family: var(--vfy-font-display);
  font-weight: 700;
}
.vfy-calendar-nav {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
}
.vfy-calendar-nav.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.vfy-calendar-day:not(:disabled):not([aria-disabled="true"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(41, 24, 23, 0.10);
}
.vfy-calendar-day:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(0); }
.vfy-calendar-day[aria-selected="true"] { box-shadow: 0 6px 16px rgba(217, 43, 90, 0.30); }
.vfy-calendar-day.is-today:not([aria-selected="true"]) .vfy-calendar-num {
  color: var(--vfy-secondary);
  font-weight: 800;
}

@media (max-width: 767.98px) {
  .vfy-calendar-weekdays,
  .vfy-calendar-month-grid { display: none; }
  .vfy-calendar-agenda { display: block; }
}

.vfy-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--vfy-border);
}

.vfy-price-row:last-child {
  border-bottom: 0;
}

.vfy-price-total {
  color: var(--vfy-text);
  font-size: 1.25rem;
  font-weight: 800;
}

.vfy-step-list {
  counter-reset: vfy-step;
}

.vfy-step {
  counter-increment: vfy-step;
  color: var(--vfy-text-muted);
}

.vfy-step::before {
  content: counter(vfy-step);
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--vfy-bg);
  color: var(--vfy-text);
  font-size: 0.875rem;
  font-weight: 800;
}

.vfy-step[aria-current="step"] {
  color: var(--vfy-primary);
  font-weight: 800;
}

.vfy-step[aria-current="step"]::before {
  background: var(--vfy-primary);
  color: #fff;
}

.vfy-empty-state,
.vfy-loading-state {
  padding: 2rem;
  text-align: center;
}

.vfy-skeleton {
  min-height: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #eee8ee, #faf7fa, #eee8ee);
  background-size: 200% 100%;
  animation: vfy-skeleton 1.1s ease-in-out infinite;
}

@keyframes vfy-skeleton {
  to { background-position-x: -200%; }
}

.vfy-dashboard {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.vfy-dashboard-main {
  min-width: 0;
}

.vfy-sidebar {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

@media (min-width: 992px) {
  .vfy-dashboard {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1.5rem;
  }

  .vfy-sidebar {
    position: sticky;
    top: 1rem;
    padding: 1.25rem;
    background: var(--vfy-surface);
    border: 1px solid var(--vfy-border);
    border-radius: var(--vfy-radius-lg);
    box-shadow: var(--vfy-card-shadow);
  }
}

.vfy-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-block: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--vfy-border);
}

.vfy-table {
  --bs-table-bg: transparent;
  color: var(--vfy-text);
}

.vfy-table thead th {
  color: var(--vfy-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--vfy-border);
  padding-block: 0.75rem;
}

.vfy-table tbody td {
  vertical-align: middle;
  border-bottom: 1px solid var(--vfy-border);
  padding-block: 0.85rem;
}

.vfy-table tbody tr:last-child td {
  border-bottom: 0;
}

.vfy-table tbody tr:hover td {
  background: color-mix(in srgb, var(--vfy-primary-soft) 45%, transparent);
}

.vfy-error-page {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--vfy-section-space);
}

.vfy-error-panel {
  max-width: 34rem;
  padding: clamp(1.5rem, 5vw, 3rem);
}

/* ============================================================
   PUBLIC SURFACE — Grayscale theme, recolored to Adobe palette
   Scoped to .vfy-public so it never touches the dashboard.
   ============================================================ */
/* Public body: column layout so the dark footer sits at the bottom on short pages. */
.vfy-public {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.vfy-public > main {
  flex: 1 0 auto;
}

/* Home page body is fully dark (masthead → dark sections → dark footer). */
.vfy-home {
  background: var(--vfy-color-cocoa);
}

/* Interior public pages clear the fixed nav with this top spacer. */
.vfy-public-top {
  padding-top: 7rem;
}

/* Base nav: solid white with dark text — the default on every public page. */
.vfy-public #mainNav {
  min-height: 3.5rem;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(41, 24, 23, 0.06);
  transition: background-color 0.3s ease-in-out;
}

.vfy-public #mainNav .navbar-brand {
  color: var(--vfy-text);
  font-family: var(--vfy-font-display);
  font-weight: 700;
}

.vfy-public #mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.5rem 0.75rem;
  color: var(--vfy-primary);
  border: 1px solid var(--vfy-primary);
}

.vfy-public #mainNav .navbar-toggler:focus {
  box-shadow: var(--vfy-focus-ring);
}

/* Overlay nav (home only): transparent over the masthead, solid once shrunk. */
@media (min-width: 992px) {
  .vfy-public #mainNav.vfy-nav-overlay {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    box-shadow: none;
  }
  .vfy-public #mainNav.vfy-nav-overlay .navbar-brand {
    color: rgba(255, 255, 255, 0.75);
  }
  .vfy-public #mainNav.vfy-nav-overlay .nav-link {
    padding: 2rem 1.5rem;
    color: rgba(255, 255, 255, 0.65);
  }
  .vfy-public #mainNav.vfy-nav-overlay .nav-link:hover,
  .vfy-public #mainNav.vfy-nav-overlay .nav-link:focus {
    color: #fff;
  }
  .vfy-public #mainNav.vfy-nav-overlay:not(.vfy-nav-shrink) .vfy-btn-outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
  }
  .vfy-public #mainNav.vfy-nav-overlay:not(.vfy-nav-shrink) .vfy-btn-outline:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }
  .vfy-public #mainNav.vfy-nav-overlay.vfy-nav-shrink {
    background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(41, 24, 23, 0.08);
  }
  .vfy-public #mainNav.vfy-nav-overlay.vfy-nav-shrink .navbar-brand {
    color: var(--vfy-text);
  }
  .vfy-public #mainNav.vfy-nav-overlay.vfy-nav-shrink .nav-link {
    color: var(--vfy-text);
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0.25rem solid transparent;
  }
  .vfy-public #mainNav.vfy-nav-overlay.vfy-nav-shrink .nav-link:hover,
  .vfy-public #mainNav.vfy-nav-overlay.vfy-nav-shrink .nav-link.active,
  .vfy-public #mainNav.vfy-nav-overlay.vfy-nav-shrink .nav-link[aria-current="page"] {
    color: var(--vfy-primary);
    border-bottom-color: var(--vfy-primary);
  }
}

/* Masthead (full-screen hero) */
.vfy-masthead {
  position: relative;
  width: 100%;
  min-height: 35rem;
  padding: 11rem 0 9rem;
  background:
    linear-gradient(to bottom, rgba(41, 24, 23, 0.35) 0%, rgba(41, 24, 23, 0.78) 75%, var(--vfy-color-cocoa) 100%),
    url("/public/img/mihaly-koles-gccbrmlXZ7g-unsplash.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 992px) {
  .vfy-masthead {
    height: 100vh;
    padding: 0;
  }
}

.vfy-masthead-title {
  font-family: var(--vfy-font-display);
  /* Fluid base so the uppercase + letter-spaced title never overflows small phones. */
  font-size: clamp(1.9rem, 7vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: clamp(0.18rem, 1.6vw, 0.6rem);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
  .vfy-masthead-title {
    font-size: 4rem;
    line-height: 4rem;
  }
}

@media (min-width: 992px) {
  .vfy-masthead-title {
    font-size: 5.25rem;
    line-height: 5.25rem;
    letter-spacing: 0.7rem;
  }
}

.vfy-masthead-subtitle {
  max-width: 34rem;
  font-size: 1.15rem;
}

/* Interior dark band (sits under the fixed nav on non-masthead pages) */
.vfy-public-band {
  padding-top: 8rem;
  padding-bottom: 3.5rem;
  background: linear-gradient(to bottom, var(--vfy-color-cocoa), rgba(41, 24, 23, 0.92));
  color: rgba(255, 255, 255, 0.85);
}

/* Section variants */
.vfy-section-dark {
  background: linear-gradient(to bottom, var(--vfy-color-cocoa) 0%, rgba(41, 24, 23, 0.9) 100%);
  color: rgba(255, 255, 255, 0.82);
}

.vfy-section-darker {
  background: var(--vfy-color-cocoa);
  color: rgba(255, 255, 255, 0.82);
}

.vfy-section-dark .vfy-eyebrow,
.vfy-section-darker .vfy-eyebrow,
.vfy-public-band .vfy-eyebrow,
.vfy-masthead .vfy-eyebrow {
  color: var(--vfy-accent);
}

/* Outline buttons on any dark public band/section need light treatment */
.vfy-public-band .vfy-btn-outline,
.vfy-masthead .vfy-btn-outline,
.vfy-section-dark .vfy-btn-outline,
.vfy-section-darker .vfy-btn-outline,
.vfy-signup-section .vfy-btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.vfy-public-band .vfy-btn-outline:hover,
.vfy-masthead .vfy-btn-outline:hover,
.vfy-section-dark .vfy-btn-outline:hover,
.vfy-section-darker .vfy-btn-outline:hover,
.vfy-signup-section .vfy-btn-outline:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.vfy-text-light {
  color: #fff;
}

.vfy-text-light-muted {
  color: rgba(255, 255, 255, 0.6);
}

/* Grayscale button treatment (public only) */
.vfy-public .vfy-btn,
.vfy-public .btn {
  font-family: var(--vfy-font-display);
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  font-size: 0.82rem;
}

/* Signup band (dark photo) */
.vfy-signup-section {
  padding-block: var(--vfy-section-space);
  background:
    linear-gradient(to bottom, rgba(41, 24, 23, 0.25) 0%, rgba(41, 24, 23, 0.7) 75%, var(--vfy-color-cocoa) 100%),
    url("/public/img/ben-atkins-vcshPRvJpwo-unsplash.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Featured project text with accent rule */
.vfy-featured-text {
  padding: 1.5rem 0 0;
}

@media (min-width: 992px) {
  .vfy-featured-text {
    padding: 0 0 0 1.5rem;
    border-left: 0.5rem solid var(--vfy-primary);
  }
}

/* Contact cards */
.vfy-contact-card {
  border: 0;
  border-bottom: 0.25rem solid var(--vfy-primary);
  border-radius: var(--vfy-radius);
  background: var(--vfy-surface);
}

.vfy-contact-icon {
  color: var(--vfy-primary);
  font-size: 1.75rem;
}

.vfy-contact-rule {
  opacity: 1;
  width: 3rem;
  border: 0;
  border-top: 0.25rem solid var(--vfy-primary);
  margin: 1rem auto;
}

/* Dark footer + social icons */
.vfy-footer-dark {
  background: var(--vfy-color-cocoa);
  color: rgba(255, 255, 255, 0.5);
  padding-block: 4rem;
}

.vfy-footer-dark a {
  color: rgba(255, 255, 255, 0.7);
}

.vfy-footer-dark a:hover {
  color: #fff;
}

.vfy-social a {
  display: inline-grid;
  place-items: center;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.vfy-social a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   DASHBOARD SURFACE — SB Admin 2 layout, ported to BS5 + Adobe.
   Scoped to .vfy-admin so it never touches the public surface.
   ============================================================ */
.vfy-admin {
  background: var(--vfy-bg);
}

.vfy-admin #wrapper {
  display: flex;
}

.vfy-admin #content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 100vh;
  background: var(--vfy-bg);
}

.vfy-admin #content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Sidebar */
.vfy-admin-sidebar {
  flex-shrink: 0;
  width: var(--vfy-admin-sidebar-width);
  min-height: 100vh;
  padding: 0;
  background: linear-gradient(180deg, var(--vfy-color-cocoa) 0%, #5a2030 100%);
  color: #fff;
}

.vfy-admin-sidebar .sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--vfy-admin-topbar-height);
  padding: 1rem;
  color: #fff;
  font-family: var(--vfy-font-display);
  font-weight: 800;
  letter-spacing: 0.05rem;
  text-decoration: none;
}

.vfy-admin-sidebar .sidebar-divider {
  margin: 0 1rem 0.75rem;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.vfy-admin-sidebar .sidebar-heading {
  padding: 0 1rem;
  margin: 0.75rem 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  color: rgba(255, 255, 255, 0.45);
}

.vfy-admin-sidebar .nav {
  padding-left: 0;
  list-style: none;
}

.vfy-admin-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  text-decoration: none;
}

.vfy-admin-sidebar .nav-link i {
  width: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.85;
}

.vfy-admin-sidebar .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.vfy-admin-sidebar .nav-link.active,
.vfy-admin-sidebar .nav-link[aria-current="page"] {
  color: #fff;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0.25rem 0 0 var(--vfy-accent);
}

.vfy-admin-sidebar-toggle {
  width: 2.5rem;
  height: 2.5rem;
  margin: 1rem auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.vfy-admin-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Desktop collapse-to-icons */
@media (min-width: 768px) {
  .vfy-admin-sidebar.collapsed {
    width: var(--vfy-admin-sidebar-collapsed);
  }
  .vfy-admin-sidebar.collapsed .vfy-nav-label,
  .vfy-admin-sidebar.collapsed .sidebar-heading,
  .vfy-admin-sidebar.collapsed .sidebar-brand-text {
    display: none;
  }
  .vfy-admin-sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 0.8rem;
  }
  .vfy-admin-sidebar.collapsed .nav-link i {
    font-size: 1.05rem;
  }
  .vfy-admin-sidebar.collapsed .sidebar-brand {
    padding: 1rem 0;
  }
  .vfy-admin-sidebar.collapsed .vfy-admin-sidebar-toggle {
    transform: rotate(180deg);
  }
}

/* Mobile off-canvas */
.vfy-admin-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(41, 24, 23, 0.5);
}

@media (max-width: 767.98px) {
  .vfy-admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .vfy-admin-sidebar.show {
    transform: translateX(0);
  }
  .vfy-admin-backdrop.show {
    display: block;
  }
}

/* Topbar */
.vfy-admin-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--vfy-admin-topbar-height);
  padding: 0.5rem 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--vfy-surface);
  box-shadow: var(--vfy-admin-shadow);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.vfy-admin-topbar > * {
  min-width: 0;
}

.vfy-admin-topbar > .dropdown {
  flex: 0 1 auto;
}

.vfy-admin-topbar > .dropdown:not(.me-2) {
  flex: 0 0 auto;
}

/* Bootstrap rows deliberately use negative gutters. When a row is nested inside a
   semantic section rather than a Bootstrap container, opt it into a contained edge. */
.vfy-contained-row {
  margin-inline: 0;
}

.vfy-admin-topbar .vfy-topbar-title {
  font-family: var(--vfy-font-display);
  font-weight: 700;
}

/* Stat cards (border-left) */
.vfy-stat-card {
  position: relative;
  background: var(--vfy-surface);
  border: 1px solid var(--vfy-border);
  border-left: 0.25rem solid var(--vfy-primary);
  border-radius: var(--vfy-radius);
  box-shadow: var(--vfy-card-shadow);
}

.vfy-stat-card.vfy-stat-success { border-left-color: var(--vfy-success); }
.vfy-stat-card.vfy-stat-info { border-left-color: var(--vfy-secondary); }
.vfy-stat-card.vfy-stat-warning { border-left-color: var(--vfy-warning); }

.vfy-stat-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--vfy-primary);
}

.vfy-stat-card.vfy-stat-success .vfy-stat-label { color: var(--vfy-success); }
.vfy-stat-card.vfy-stat-info .vfy-stat-label { color: var(--vfy-secondary); }
.vfy-stat-card.vfy-stat-warning .vfy-stat-label { color: var(--vfy-warning); }

.vfy-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--vfy-text);
}

.vfy-stat-icon {
  font-size: 2rem;
  color: color-mix(in srgb, var(--vfy-text-muted) 35%, transparent);
}

/* Card header strip (sb-admin-2 table cards) */
.vfy-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  background: var(--vfy-bg);
  border-bottom: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius) var(--vfy-radius) 0 0;
  font-family: var(--vfy-font-display);
  font-weight: 700;
  color: var(--vfy-primary);
}

/* Dashboard switcher (basic users toggle Booking <-> Owner) */
.vfy-admin-sidebar .vfy-dash-switch {
  padding: 0.75rem 1rem 0;
}

.vfy-admin-sidebar .vfy-dash-switch-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--vfy-radius-sm);
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
}

.vfy-admin-sidebar .vfy-dash-switch-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vfy-admin-sidebar.collapsed .vfy-dash-switch {
  padding: 0.75rem 0.5rem 0;
}

@media (min-width: 768px) {
  .vfy-admin-sidebar.collapsed .vfy-dash-switch-link {
    justify-content: center;
  }
}

/* Mode badge shown on dashboard headers */
.vfy-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.vfy-mode-badge-booking {
  background: var(--vfy-primary-soft);
  color: var(--vfy-primary);
}

.vfy-mode-badge-owner {
  background: rgba(75, 166, 166, 0.16);
  color: var(--vfy-secondary-hover);
}

/* Dashboard footer (light, sb-admin-2) */
.vfy-admin-footer {
  margin-top: auto;
  padding: 1.5rem 1.25rem;
  background: var(--vfy-surface);
  border-top: 1px solid var(--vfy-border);
  color: var(--vfy-text-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Realtime notification toasts (fixed top-right stack, injected by realtime.js). */
.vfy-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.vfy-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--vfy-surface);
  border: 1px solid var(--vfy-border);
  border-left: 4px solid var(--vfy-secondary);
  border-radius: var(--vfy-radius);
  box-shadow: var(--vfy-card-shadow);
  color: var(--vfy-text);
  animation: vfy-toast-in 200ms ease;
}

.vfy-toast.is-leaving {
  opacity: 0;
  transform: translateX(0.5rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.vfy-toast-success { border-left-color: var(--vfy-success); }
.vfy-toast-warning { border-left-color: var(--vfy-warning); }
.vfy-toast-info { border-left-color: var(--vfy-secondary); }

.vfy-toast-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; }
.vfy-toast-title { font-weight: 700; }
.vfy-toast-msg { color: var(--vfy-text-muted); font-size: 0.9rem; }

.vfy-toast-close {
  border: 0;
  background: transparent;
  color: var(--vfy-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}
.vfy-toast-close:hover { color: var(--vfy-text); }

@keyframes vfy-toast-in {
  from { opacity: 0; transform: translateX(0.75rem); }
  to { opacity: 1; transform: translateX(0); }
}

/* Profile avatar thumbnail (account page). Fixed small square, cover-cropped. */
.vfy-avatar-thumb { width: 72px; height: 72px; object-fit: cover; background: var(--vfy-mist, #f5f2f5); }

/* ============================================================================
   Formal legal document — rental agreement + policies as a real contract.
   Shared by the signing page, both booking-review surfaces, and the print view
   (partial: _partials/ui/legal-document.html). On-brand: Nunito body + Varela
   Round headings, rose accents, mist panels, vfy tokens throughout.
   ============================================================================ */
.vfy-legal-document {
  max-width: 46rem;
  margin-inline: auto;
  color: var(--vfy-text);
  font-family: var(--vfy-font-body);
  font-size: 1rem;
  line-height: 1.75;
  text-align: left;
  overflow-wrap: break-word;
}
.vfy-legal-document-compact { font-size: 0.9375rem; line-height: 1.7; }
.vfy-legal-document p { margin: 0; }

/* Document header */
.vfy-legal-doc-head { text-align: center; margin-bottom: 2rem; }
.vfy-legal-doc-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--vfy-primary);
  margin-bottom: 0.35rem !important;
}
.vfy-legal-doc-title {
  font-family: var(--vfy-font-display);
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 0.5rem !important;
  color: var(--vfy-text);
}
.vfy-legal-document-compact .vfy-legal-doc-title { font-size: 1.3rem; }
.vfy-legal-doc-meta { color: var(--vfy-text-muted); font-size: 0.85rem; }
.vfy-legal-doc-rule {
  display: block;
  width: 3rem;
  height: 3px;
  border-radius: 3px;
  background: var(--vfy-primary);
  margin: 0.9rem auto 0;
}

/* Section labels (Parties / The Event / Signature) */
.vfy-legal-section { margin-bottom: 1.75rem; }
.vfy-legal-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--vfy-text-muted);
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--vfy-border);
}

/* Parties */
/* auto-fit collapses to one column when the container is narrow (phones, the review
   scroll box) without relying on a fixed breakpoint. */
.vfy-legal-parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 1rem;
}
.vfy-legal-party {
  background: var(--vfy-bg);
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius-sm);
  padding: 0.85rem 1rem;
  min-width: 0;                 /* let the grid cell shrink instead of overflowing */
  overflow-wrap: break-word;    /* wrap long emails / addresses */
}
.vfy-legal-party p { overflow-wrap: break-word; }
.vfy-legal-party-role {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--vfy-primary);
  margin-bottom: 0.3rem !important;
}
.vfy-legal-muted { color: var(--vfy-text-muted); }

/* Event details */
.vfy-legal-meta {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.25rem;
}
.vfy-legal-meta dt { color: var(--vfy-text-muted); font-weight: 600; }
.vfy-legal-meta dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: break-word; }

/* Articles */
.vfy-legal-article { margin-bottom: 1.75rem; }
.vfy-legal-article-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--vfy-primary);
  margin-bottom: 0.15rem !important;
}
.vfy-legal-article-head {
  font-family: var(--vfy-font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  color: var(--vfy-text);
}
.vfy-legal-document-compact .vfy-legal-article-head { font-size: 1.05rem; }
.vfy-legal-text { white-space: pre-wrap; margin: 0 0 0.75rem !important; }
.vfy-legal-text:last-child { margin-bottom: 0 !important; }

/* Sub-clauses (x.y items) */
.vfy-legal-clause {
  border-left: 2px solid var(--vfy-border);
  padding-left: 1rem;
  margin: 0.85rem 0 0.85rem 0.25rem;
}
.vfy-legal-clause-title { font-weight: 700; margin-bottom: 0.3rem !important; }
.vfy-legal-clause-num { color: var(--vfy-primary); font-weight: 800; }
.vfy-legal-clause .vfy-legal-text { font-size: 0.96em; }

/* Signature */
.vfy-legal-signature {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vfy-border);
}
.vfy-legal-sign-line {
  display: block;
  width: min(22rem, 100%);
  height: 0;
  border-bottom: 1.5px solid var(--vfy-text);
  margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
  .vfy-legal-parties { grid-template-columns: 1fr; }
  .vfy-legal-meta { grid-template-columns: 1fr; gap: 0.05rem; }
  .vfy-legal-meta dt { margin-top: 0.45rem; }
  .vfy-legal-document { font-size: 0.9375rem; line-height: 1.65; }
  .vfy-legal-doc-title { font-size: 1.25rem; }
  .vfy-legal-clause { padding-left: 0.75rem; margin-left: 0; }
}

/* Embedded-agreement scroll frame (booking-review surfaces). Keeps a long contract
   from dominating the page while making the whole document available to read. */
.vfy-legal-scroll {
  max-height: 30rem;
  overflow-y: auto;
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius);
  background: var(--vfy-surface);
  padding: 1.75rem;
  box-shadow: inset 0 -1.25rem 1rem -1rem rgba(41, 24, 23, 0.06);
}
@media (max-width: 575.98px) {
  .vfy-legal-scroll { padding: 1.1rem 0.9rem; max-height: 24rem; }
}
.vfy-legal-scroll::-webkit-scrollbar { width: 10px; }
.vfy-legal-scroll::-webkit-scrollbar-thumb {
  background: var(--vfy-border);
  border-radius: 10px;
  border: 3px solid var(--vfy-surface);
}
.vfy-legal-scroll-hint {
  color: var(--vfy-text-muted);
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.vfy-legal-scroll:focus-visible { outline: none; box-shadow: var(--vfy-focus-ring); }

/* Typeset plain legal text (.vfy-lt) — fmt.legalText parses the stored policy/contract
   bodies ("1. HEADING.", "1.1 clause", "(a) item", "• bullet") into these blocks so
   they read like a typeset document instead of a pre-wrap text dump. */
.vfy-lt { display: grid; gap: 0.5rem; }
.vfy-lt-heading {
  display: flex;
  gap: 0.55rem;
  margin: 0.9rem 0 0.1rem !important;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--vfy-text);
}
.vfy-lt:first-child > .vfy-lt-heading:first-child,
.vfy-lt > .vfy-lt-heading:first-child { margin-top: 0 !important; }
.vfy-lt-clause { display: flex; gap: 0.55rem; margin: 0 !important; }
.vfy-lt-num {
  flex: 0 0 auto;
  min-width: 1.9rem;
  color: var(--vfy-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.vfy-lt-list { list-style: none; margin: 0 0 0.25rem !important; padding-left: 2.45rem; display: grid; gap: 0.4rem; }
.vfy-lt-list li { display: flex; gap: 0.5rem; }
.vfy-lt-marker { flex: 0 0 auto; color: var(--vfy-primary); font-weight: 700; }
.vfy-lt-list-bullet li::before { content: "•"; color: var(--vfy-primary); font-weight: 800; flex: 0 0 auto; }
.vfy-lt-para { margin: 0 !important; }
@media (max-width: 575.98px) {
  .vfy-lt-num { min-width: 1.6rem; }
  .vfy-lt-list { padding-left: 1.35rem; }
}

/* Upfront-payment picker slider — brand accent on the track fill + thumb. */
.vfy-upfront-range { accent-color: var(--vfy-primary); cursor: pointer; }
.vfy-upfront [data-upfront-today] { color: var(--vfy-primary); }
.vfy-money-row {
  gap: 0.75rem;
}
.vfy-money-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.vfy-money-row > :last-child {
  margin-inline-start: auto;
  text-align: right;
}

@container (max-width: 18rem) {
  .vfy-money-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .vfy-money-row > :last-child {
    margin-inline-start: 0;
    text-align: left;
  }
}

/* Signature pad — draw-first with a type fallback (booking review / sign step). */
.vfy-sigpad-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vfy-sigpad-tabs [data-sig-tab][aria-selected="true"] {
  background: var(--vfy-primary-soft);
  color: var(--vfy-primary);
  font-weight: 700;
}
.vfy-sigpad-surface { position: relative; }
.vfy-sigpad-canvas {
  display: block;
  width: 100%;
  height: 160px;
  border: 1px dashed var(--vfy-border);
  border-radius: var(--vfy-radius-sm);
  background: var(--vfy-surface);
  touch-action: none;          /* let the canvas capture touch strokes, not scroll */
  cursor: crosshair;
}
.vfy-sigpad-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vfy-text-muted);
  font-size: 0.9rem;
  pointer-events: none;
}
.vfy-sigpad[data-sig-signed="1"] .vfy-sigpad-placeholder { display: none; }
.vfy-sigpad-help { gap: 0.5rem; }

@container (max-width: 22rem) {
  .vfy-sigpad-help {
    align-items: stretch !important;
    flex-direction: column;
  }

  .vfy-sigpad-help .vfy-btn {
    width: 100%;
  }
}

/* Owner activation checklist — the "to-do" dot for an incomplete step. */
.vfy-activation-dot { color: var(--vfy-border); font-size: 0.7rem; }

/* Read-only aggregate star rating (venue card + detail). */
.vfy-rating { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.vfy-rating-stars { color: var(--vfy-warning); font-size: 0.95rem; letter-spacing: 0.02em; }
.vfy-rating-stars .vfy-rating-empty { color: var(--vfy-border); }
.vfy-rating-num { font-weight: 700; font-size: 0.9rem; }
.vfy-rating-count { font-size: 0.85rem; }

/* Star rating input (post-event renter rating). Native radios, no JS: reverse DOM order
   + row-reverse means a checked/hovered star fills itself and every star to its left. */
.vfy-stars-field { border: 0; padding: 0; margin: 0 0 0.75rem; }
.vfy-stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; font-size: 1.7rem; line-height: 1; }
.vfy-stars-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vfy-stars-input label { color: var(--vfy-border); cursor: pointer; transition: color 0.1s ease; }
.vfy-stars-input input:checked ~ label,
.vfy-stars-input label:hover,
.vfy-stars-input label:hover ~ label { color: var(--vfy-warning); }
.vfy-stars-input input:focus-visible + label { outline: 2px solid var(--vfy-primary); outline-offset: 2px; border-radius: 4px; }

/* Refund & cancellation callout on the booking-review pages. */
.vfy-refund-card { border-left: 4px solid var(--vfy-primary); }
.vfy-refund-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vfy-primary-soft);
  color: var(--vfy-primary);
  font-size: 1.05rem;
}

/* Exclusive (login-free) booking funnel — isolated layout, no marketplace chrome. */
.vfy-exclusive { background: #f5f2f5; min-height: 100vh; color: var(--vfy-text); }
.vfy-exclusive-shell { max-width: 920px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.vfy-exclusive-brand { display: flex; align-items: baseline; gap: 0.5rem; }
.vfy-exclusive-cover { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--vfy-radius-lg); display: block; }
/* Fixed media frame prevents mixed image/video slides from shifting the booking content below. */
.vfy-exclusive-carousel {
  overflow: hidden;
  border-radius: var(--vfy-radius-lg);
  background: #000;
  box-shadow: var(--vfy-card-shadow);
}
.vfy-exclusive-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  object-fit: cover;
  background: #000;
}
video.vfy-exclusive-media {
  object-fit: contain;
}
.vfy-exclusive-carousel .carousel-control-prev,
.vfy-exclusive-carousel .carousel-control-next {
  width: 3.25rem;
}
.vfy-exclusive-carousel .carousel-control-prev-icon,
.vfy-exclusive-carousel .carousel-control-next-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background-color: rgba(41, 24, 23, 0.72);
  background-size: 58%;
}
.vfy-exclusive-carousel .carousel-indicators {
  margin-bottom: 0.75rem;
}
.vfy-exclusive-caption {
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  width: fit-content;
  max-width: min(28rem, calc(100% - 2rem));
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(41, 24, 23, 0.72);
  color: #fff;
  text-align: left;
}
.vfy-exclusive-footer { text-align: center; padding: 2rem 0 0; }

/* Marketing analytics — inline charts + funnel (no chart library). */
.vfy-chart { width: 100%; height: auto; display: block; }
.vfy-chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.85rem; color: var(--vfy-text-muted); }
.vfy-chart-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.3rem; vertical-align: middle; }
.vfy-funnel { display: grid; gap: 0.5rem; }
.vfy-funnel-row { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: 0.5rem; }
.vfy-funnel-label { font-size: 0.85rem; color: var(--vfy-text-muted); }
.vfy-funnel-track { background: color-mix(in srgb, var(--vfy-secondary) 12%, #fff); border-radius: 999px; height: 0.85rem; overflow: hidden; }
.vfy-funnel-fill { display: block; height: 100%; background: var(--vfy-secondary); border-radius: 999px; min-width: 2px; }
.vfy-funnel-count { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }

/* Marketing QR thumbnail (owner dashboard link cards). */
.vfy-qr-thumb {
  border: 1px solid var(--vfy-border);
  border-radius: var(--vfy-radius-sm);
  background: #fff;
  padding: 4px;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .vfy-toast { animation: none; }
}

/* ============================================================
   RESPONSIVE FOUNDATIONS (Phase 1)
   Bootstrap 5 breakpoints — sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400.
   Use these widths only; don't introduce new ad-hoc query values.
   ============================================================ */

/* Media never overflows its container. (SVG kept to max-width so inline
   fixed-size icons aren't forced to recompute height.) */
img,
video,
canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }

/* Brand logos keep their intended fixed height — the `height: auto` reset above would
   otherwise let the SVG grow to its intrinsic size (the inline height="" is ignored). */
.sidebar-brand-icon { height: 32px; width: auto; }
.vfy-public #mainNav .navbar-brand img { height: 48px; width: auto; }
.vfy-footer-logo { height: 32px; width: auto; }

/* Long tokens / URLs / hashes can't force horizontal page scroll. */
.vfy-card,
.vfy-table td,
.vfy-table th { overflow-wrap: anywhere; }

/* Reusable narrow form panel (replaces inline style="max-width:...") */
.vfy-form-narrow { max-width: 40rem; }

/* Comfortable tap targets on touch devices. */
@media (pointer: coarse) {
  .vfy-btn-sm { min-height: 2.5rem; }
  .vfy-admin-sidebar .nav-link { padding-block: 0.95rem; }
}

/* ============================================================
   RESPONSIVE TABLES — stacked cards below md (Phase 2)
   Add class `vfy-table-stack` to a <table> and give each <td> a
   data-label="Column". Below md the table becomes a stack of cards
   (label: value rows); mark the actions cell `vfy-cell-actions` to get
   full-width, reachable buttons instead of clipped horizontal scroll.
   ============================================================ */
@media (max-width: 767.98px) {
  .vfy-table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .vfy-table-stack,
  .vfy-table-stack tbody { display: block; width: 100%; }
  .vfy-table-stack tr {
    display: block;
    border: 1px solid var(--vfy-border);
    border-radius: 0.75rem;
    padding: 0.35rem 0.9rem;
    margin-bottom: 0.85rem;
    background: var(--vfy-surface);
  }
  /* Each cell becomes a row: the column name as a small caption on top, the value
     full-width beneath it — so long text wraps naturally instead of crunching. */
  .vfy-table-stack td {
    display: block;
    width: 100%;
    border: 0;
    padding: 0.5rem 0;
    text-align: left;
  }
  .vfy-table-stack td + td { border-top: 1px solid var(--vfy-border); }
  .vfy-table-stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vfy-text-muted);
  }
  .vfy-table-stack td:empty { display: none; }

  /* Actions cell: full-width stacked controls, no label, always reachable. */
  .vfy-table-stack td.vfy-cell-actions {
    display: block;
    text-align: left;
    padding-top: 0.65rem;
  }
  .vfy-table-stack td.vfy-cell-actions::before { content: none; }
  .vfy-table-stack td.vfy-cell-actions .d-flex {
    flex-direction: column;
    align-items: stretch;
  }
  .vfy-table-stack td.vfy-cell-actions .vfy-btn,
  .vfy-table-stack td.vfy-cell-actions form { width: 100%; }
  .vfy-table-stack td.vfy-cell-actions > * { margin-bottom: 0.4rem; }
  .vfy-table-stack td.vfy-cell-actions > *:last-child { margin-bottom: 0; }
}

/* Topbar venue switcher: cap width + ellipsis long venue names (Phase 3). */
.vfy-switcher-toggle {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(11rem, 100%);
}
.vfy-switcher-label {
  display: inline-block;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Marketing chart: floor the height so it stays legible on phones (Phase 4). */
.vfy-chart { min-height: 8rem; }

/* Funnel: stack the label above the bar on the narrowest screens (Phase 4). */
@media (max-width: 575.98px) {
  .vfy-funnel-row {
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
  }
  .vfy-funnel-label { grid-column: 1 / -1; }
}

/* ============================================================
   MOBILE-FIRST POLISH — dashboard chrome density on phones.
   ============================================================ */

/* Topbar: let the title shrink/truncate instead of pushing the switcher + overflow
   menu off-screen on small phones. */
.vfy-admin-topbar .me-auto { min-width: 0; }
.vfy-admin-topbar .vfy-topbar-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Below sm: tighter topbar so hamburger + title + switcher + overflow all fit at 320px. */
@media (max-width: 575.98px) {
  .vfy-admin-topbar {
    padding-top: 0.5rem;
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: 0.5rem;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .vfy-admin-topbar > .dropdown.me-2 {
    width: clamp(3rem, 28vw, 7.5rem);
    margin-right: 0 !important;
  }

  .vfy-admin-topbar .vfy-switcher-toggle {
    width: 100%;
  }

  .vfy-admin-topbar .vfy-switcher-label {
    max-width: calc(100% - 2rem);
  }
}

/* Stat value: fluid so long money / counts never overflow a narrow stat card. */
.vfy-stat-value { font-size: clamp(1.25rem, 4.5vw, 1.5rem); }

/* Status badges: icon-only on phones (text kept for screen readers); icon + text from
   sm up. Keeps status legible without crunching stacked-table rows. */
@media (max-width: 575.98px) {
  .vfy-badge-has-icon .vfy-badge-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .vfy-badge-has-icon { gap: 0; }
  .vfy-badge-has-icon i { font-size: 0.95rem; }
}

/* ============================================================
   RESPONSIVE UI REFINEMENT
   Shared ergonomics for phones, tablets, desktops, and wide screens.
   Uses the existing Veniufy tokens and Bootstrap breakpoints.
   ============================================================ */

html {
  scroll-padding-top: calc(var(--vfy-admin-topbar-height) + 1rem);
}

body {
  min-width: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

p, li, dd {
  text-wrap: pretty;
}

/* Keyboard users can bypass repeated public/dashboard navigation. */
.vfy-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2000;
  max-width: calc(100vw - 1.5rem);
  padding: 0.7rem 1rem;
  border-radius: var(--vfy-radius-sm);
  background: var(--vfy-color-cocoa);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: transform 160ms ease;
}

.vfy-skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

/* Inputs stay comfortable and consistent without changing form behavior. */
.form-control,
.form-select {
  min-height: 2.875rem;
  padding: 0.65rem 0.85rem;
  background-color: var(--vfy-surface);
}

textarea.form-control {
  min-height: 7rem;
  resize: vertical;
}

.form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.form-check-label {
  line-height: 1.45;
}

.dropdown-menu {
  max-width: calc(100vw - 1.5rem);
  border-color: var(--vfy-border);
  border-radius: var(--vfy-radius-sm);
  box-shadow: var(--vfy-card-shadow);
  overflow-wrap: anywhere;
}

.dropdown-item {
  padding-block: 0.65rem;
}

.vfy-card,
.vfy-card-soft,
.vfy-form-card,
.vfy-stat-card {
  min-width: 0;
}

.vfy-card-header {
  flex-wrap: wrap;
}

.vfy-action-row {
  flex-wrap: wrap;
}

.vfy-action-row > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Reusable content-aware rows. These preserve the desktop composition but stack
   when padding, a sidebar, or a narrow grid column reduces their real width. */
.vfy-adaptive-header,
.vfy-marketing-link-layout {
  min-width: 0;
}

.vfy-marketing-link-content {
  min-width: 0;
}

.vfy-marketing-link-content .form-control {
  min-width: 0;
  width: 100%;
}

@container (max-width: 28rem) {
  .vfy-adaptive-header,
  .vfy-marketing-link-layout {
    align-items: stretch !important;
    flex-direction: column;
  }

  .vfy-marketing-link-layout .vfy-qr-thumb {
    align-self: center;
  }

  .vfy-adaptive-header > .vfy-badge {
    align-self: flex-start;
  }
}

@container (max-width: 48rem) {
  .vfy-venue-filter-field {
    width: 50%;
  }
}

@container (max-width: 30rem) {
  .vfy-venue-filter-field {
    width: 100%;
  }
}

/* Dashboard content remains readable on ultrawide displays and gains fluid gutters. */
.vfy-admin main.container-fluid {
  width: 100%;
  max-width: 100rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.4vw, 2.5rem) !important;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .vfy-admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: width 180ms ease;
  }
}

.vfy-page-header > :first-child {
  min-width: 0;
  max-width: 54rem;
}

.vfy-page-actions {
  flex: 0 0 auto;
}

.vfy-stat-card > .d-flex > div:first-child {
  min-width: 0;
}

.vfy-stat-icon {
  flex: 0 0 auto;
}

.vfy-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.5rem;
}

.vfy-stat-grid > [class*="col"] {
  width: auto;
  max-width: none;
  padding: 0;
}

.vfy-plan-price {
  font-size: clamp(1.9rem, 4vw, 2.65rem);
  line-height: 1.15;
}

.vfy-terms-document section p {
  max-width: 75ch;
}

.vfy-empty-state > h2,
.vfy-empty-state > p {
  max-width: 44rem;
  margin-inline: auto;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vfy-plan-card,
  .vfy-venue-card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  .vfy-plan-card:hover,
  .vfy-venue-card:hover {
    transform: translateY(-0.2rem);
    border-color: color-mix(in srgb, var(--vfy-primary) 28%, var(--vfy-border));
    box-shadow: 0 1.2rem 3rem rgba(41, 24, 23, 0.12);
  }
}

/* The exclusive-flow CTA follows the visitor while the details column scrolls. */
@media (min-width: 992px) {
  .vfy-exclusive-cta {
    position: sticky;
    top: 1.25rem;
  }
}

/* Mobile public navigation opens as a scrollable, touch-friendly panel. */
@media (max-width: 991.98px) {
  .vfy-public #mainNav .navbar-collapse {
    max-height: calc(100dvh - 4.5rem);
    padding: 0.75rem 0 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .vfy-public #mainNav .nav-link {
    padding: 0.75rem 0.25rem;
    font-weight: 700;
  }

  .vfy-public #mainNav .navbar-nav > .nav-item.d-flex {
    align-items: stretch !important;
    flex-direction: column;
  }

  .vfy-public #mainNav .navbar-nav > .nav-item.d-flex .vfy-btn,
  .vfy-public #mainNav .navbar-nav > .nav-item.d-flex form {
    width: 100%;
  }

  .vfy-public #mainNav .navbar-nav > .nav-item.d-flex form .vfy-btn {
    width: 100%;
  }

  .vfy-admin-sidebar {
    width: min(18rem, 86vw);
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 1rem 0 2.5rem rgba(41, 24, 23, 0.24);
  }
}

@media (max-width: 767.98px) {
  body.vfy-nav-open {
    overflow: hidden;
  }

  .vfy-admin-topbar {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.96);
  }

  .vfy-table-stack tr:last-child {
    margin-bottom: 0;
  }

  .vfy-card-header .vfy-btn {
    min-height: 2.5rem;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 1rem;
    line-height: 1.55;
  }

  :root {
    --vfy-container-inset: max(1.25rem, calc(env(safe-area-inset-left) + env(safe-area-inset-right)));
    --vfy-panel-padding: 1rem;
  }

  h1, .h1 {
    font-size: clamp(1.65rem, 8vw, 1.9rem);
    line-height: 1.18;
  }

  h2, .h2 {
    font-size: clamp(1.4rem, 6.5vw, 1.6rem);
    line-height: 1.22;
  }

  h3, .h3 {
    font-size: clamp(1.25rem, 5.5vw, 1.4rem);
    line-height: 1.25;
  }

  h4, .h4 {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  h5, .h5 {
    font-size: 1.075rem;
    line-height: 1.35;
  }

  h6, .h6 {
    font-size: 1rem;
    line-height: 1.4;
  }

  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    hyphens: none;
  }

  .display-4 { font-size: 2.2rem; }
  .display-5 { font-size: 1.9rem; }
  .display-6 { font-size: 1.65rem; }

  .lead {
    font-size: 1rem;
    line-height: 1.55;
  }

  .vfy-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1.45;
  }

  .vfy-public .vfy-btn,
  .vfy-public .btn {
    letter-spacing: 0.075rem;
    line-height: 1.35;
    white-space: normal;
  }

  .vfy-muted,
  .vfy-helper-text,
  .form-check-label {
    overflow-wrap: break-word;
  }

  .vfy-card .d-flex > *,
  .vfy-card-soft .d-flex > *,
  .vfy-form-card .d-flex > * {
    min-width: 0;
  }

  .vfy-container {
    width: min(calc(100% - var(--vfy-container-inset)), 72rem);
  }

  .vfy-public .container.px-4,
  .vfy-public .container-fluid.px-4 {
    padding-inline: 0.875rem !important;
  }

  .vfy-admin main.container-fluid {
    padding-inline: 0.75rem !important;
    padding-bottom: 1.5rem;
  }

  .vfy-public main .row,
  .vfy-admin main .row,
  .vfy-exclusive-shell .row {
    --bs-gutter-x: 1rem;
  }

  .vfy-public main .row.g-4,
  .vfy-admin main .row.g-4,
  .vfy-exclusive-shell .row.g-4 {
    --bs-gutter-y: 1rem;
  }

  .vfy-section-sm {
    padding-block: 2rem;
  }

  .vfy-public-band {
    padding-top: 6.75rem;
    padding-bottom: 2.5rem;
  }

  .vfy-public-band .lead {
    font-size: 1rem;
  }

  .vfy-public #mainNav .navbar-brand img {
    height: 2.5rem;
  }

  .vfy-page-actions,
  .vfy-page-actions ul,
  .vfy-page-actions li,
  .vfy-page-actions .vfy-btn,
  .vfy-page-header > .vfy-btn,
  .vfy-page-header > :last-child:not(:first-child),
  .vfy-page-header > :last-child:not(:first-child) .vfy-btn,
  .vfy-page-header > :last-child:not(:first-child) form {
    width: 100%;
  }

  .vfy-card.p-4,
  .vfy-card-soft.p-4,
  .vfy-form-card.p-4,
  .vfy-stat-card.p-4,
  .vfy-contact-card.p-4,
  .vfy-hero-panel.p-4,
  .vfy-card > .p-4 {
    padding: 1rem !important;
  }

  .vfy-form-card.p-5,
  .vfy-card.p-5,
  .vfy-card-soft.p-5 {
    padding: 1.125rem !important;
  }

  .vfy-card-header {
    padding: 0.75rem 1rem;
  }

  .vfy-card .gap-4,
  .vfy-card-soft .gap-4,
  .vfy-form-card .gap-4 {
    gap: 1rem !important;
  }

  .vfy-empty-state,
  .vfy-loading-state {
    padding: 1.25rem 1rem;
  }

  .vfy-legal-scroll {
    padding: 0.85rem 0.75rem;
  }

  .vfy-terms-document section,
  .vfy-legal-section,
  .vfy-legal-article {
    margin-bottom: 1.25rem;
  }

  .vfy-price-row {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .vfy-price-row > :last-child {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .vfy-table-stack tr {
    padding-inline: 0.75rem;
  }

  .vfy-table-stack td {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .vfy-action-row {
    align-items: stretch !important;
    flex-direction: column;
  }

  .vfy-action-row .vfy-btn {
    width: 100%;
  }

  .vfy-form-card,
  .vfy-card,
  .vfy-card-soft {
    border-radius: var(--vfy-radius);
  }

  .vfy-exclusive-shell {
    padding: 0.875rem 0.625rem 2rem;
  }

  .vfy-exclusive-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .vfy-exclusive-location-separator { display: none; }

  .vfy-footer-dark {
    padding-block: 2.5rem;
  }

  .vfy-admin-footer {
    padding: 1rem 0.75rem;
  }
}

@media (pointer: coarse) {
  .form-control,
  .form-select,
  .vfy-btn,
  .dropdown-item {
    min-height: 3rem;
  }
}

/* Messaging — inbox rows + thread bubbles (scoped to the admin surface). */
.vfy-admin .vfy-inbox-row { transition: background-color .12s ease; }
.vfy-admin .vfy-inbox-row:hover,
.vfy-admin .vfy-inbox-row:focus-visible { background-color: var(--vfy-color-mist); }
.vfy-admin .vfy-thread { max-height: 60vh; overflow-y: auto; }
.vfy-admin .vfy-msg-bubble { max-width: 78%; }
.vfy-admin .vfy-msg-mine { background-color: var(--vfy-color-rose); color: #fff; }
.vfy-admin .vfy-msg-mine .vfy-muted { color: rgba(255, 255, 255, .8) !important; }
.vfy-admin .vfy-msg-theirs { background-color: var(--vfy-color-mist); }
.vfy-admin .min-w-0 { min-width: 0; }

/* Venue "virtual tour" gallery grid (venue detail page). */
.vfy-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
}
.vfy-gallery-item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: .75rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background: var(--vfy-color-mist);
}
.vfy-gallery-item img,
.vfy-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .18s ease;
}
.vfy-gallery-item:hover img,
.vfy-gallery-item:focus-visible img { transform: scale(1.05); }
.vfy-gallery-item:focus-visible { outline: 2px solid var(--vfy-color-rose); outline-offset: 2px; }
.vfy-gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .35rem .5rem;
  font-size: .72rem;
  color: #fff;
  text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vfy-gallery-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
}

/* Owner analytics — monthly revenue bars (CSS only). */
.vfy-revenue-chart { display: flex; align-items: flex-end; gap: .5rem; height: 160px; }
.vfy-revenue-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.vfy-revenue-value { font-size: .6rem; color: var(--vfy-color-cocoa, #291817); margin-bottom: 2px; white-space: nowrap; }
.vfy-revenue-bar { width: 70%; max-width: 2.75rem; background: var(--vfy-color-rose, #d92b5a); border-radius: .35rem .35rem 0 0; }
.vfy-revenue-label { font-size: .7rem; color: var(--vfy-color-mocha, #725e5c); margin-top: 4px; }