/*
 * Sicily Experience - Main Stylesheet
 *
 * Design tokens imported from tokens.css
 * All visual properties use CSS custom properties — no hardcoded values.
 */

@import url('./tokens.css');

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* ============================================
   UTILITIES
   ============================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: 800px;
}

.container-wide {
  max-width: 1440px;
}

.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;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

.btn-primary:hover:not(:disabled) {
  background: var(--primary-600);
  color: #fff;
}

.btn-secondary {
  background: var(--primary-50);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--primary-100);
}

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

.btn-ghost:hover:not(:disabled) {
  background: var(--primary-50);
}

.btn-danger {
  background: var(--error-500);
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: var(--error-700);
  color: #fff;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

/* ============================================
   FORMS
   ============================================ */

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.form-input.error,
.form-select.error {
  border-color: var(--error-500);
}

.form-error {
  color: var(--error-500);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ============================================
   CARDS (generic - page-specific cards override below)
   ============================================ */

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  padding: 0 var(--space-7);
  height: 64px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.navbar-brand {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-600);
  white-space: nowrap;
}

.navbar-brand span {
  color: var(--secondary-500);
}

.navbar-brand:hover {
  color: var(--primary-600);
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.navbar-links a {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--text-base);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-base);
}

.navbar-links a:hover {
  color: var(--primary-500);
  border-bottom-color: var(--primary-500);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mode Switch (Host/Guest toggle, Airbnb-style) */
.navbar-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.navbar-mode-switch svg {
  flex-shrink: 0;
}

/* User Menu (avatar dropdown) */
.navbar-user-menu {
  position: relative;
}
.navbar-user-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-light);
  background: var(--bg-secondary);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}
.navbar-user-trigger:hover {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 2px var(--primary-100);
}
.navbar-user-avatar {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary-600);
  line-height: 1;
}
.navbar-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown, 100);
  overflow: hidden;
}
.navbar-user-menu.open .navbar-user-dropdown {
  display: block;
}
.navbar-user-dropdown-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navbar-user-dropdown-header strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.navbar-user-dropdown-header span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.navbar-user-dropdown-links {
  padding: var(--space-2) 0;
}
.navbar-user-dropdown-links a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.navbar-user-dropdown-links a:hover {
  background: var(--bg-secondary);
}
.navbar-user-dropdown-logout {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-top: 1px solid var(--border-light);
  background: none;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-danger, #dc2626);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition-fast);
}
.navbar-user-dropdown-logout:hover {
  background: var(--bg-secondary);
}

/* Mobile mode switch */
.mobile-mode-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-weight: 600;
}
.mobile-mode-switch svg {
  flex-shrink: 0;
}

/* Language Trigger Button (navbar) */
.lang-trigger {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 6px 10px; cursor: pointer; font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--text-primary);
  transition: all var(--transition-fast);
}
.lang-trigger:hover { border-color: var(--primary-400); background: var(--bg-secondary); }
.lang-trigger-flag { width: 20px; height: 15px; display: flex; align-items: center; flex-shrink: 0; }
.lang-trigger-flag .flag-svg { width: 20px; height: 15px; border-radius: 2px; }
.lang-trigger-code { font-weight: 600; }

/* Language Modal (Booking.com style) */
.lang-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-modal-backdrop);
  display: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lang-modal-overlay.open { display: block; }
.lang-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg-primary); border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  width: 90vw; max-width: 720px; max-height: 80vh; overflow-y: auto;
  z-index: var(--z-modal); display: none;
  padding: var(--space-7);
}
.lang-modal.open { display: block; }
.lang-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}
.lang-modal-header h3 {
  font-size: var(--text-xl); font-family: var(--font-heading);
  color: var(--text-primary); margin: 0;
}
.lang-modal-close {
  background: none; border: none; font-size: 28px; cursor: pointer;
  color: var(--text-secondary); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.lang-modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.lang-modal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
}
.lang-modal-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  text-decoration: none; color: var(--text-primary);
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}
.lang-modal-item:hover {
  background: var(--bg-secondary); color: var(--text-primary);
}
.lang-modal-item.active {
  border-color: var(--primary-500); background: var(--primary-50);
  color: var(--primary-600); font-weight: 500;
}
.lang-modal-flag { width: 24px; height: 18px; flex-shrink: 0; display: flex; align-items: center; }
.lang-modal-flag .flag-svg { width: 24px; height: 18px; border-radius: 2px; }
.lang-modal-name { font-size: var(--text-sm); font-weight: 500; }

/* Legacy lang-flag (mobile menu) */
.lang-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  opacity: 0.6;
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--text-primary);
}

.lang-flag:hover,
.lang-flag--active {
  opacity: 1;
  background: var(--bg-secondary);
}

/* Outline button for "Diventa Host" */
.btn-outline {
  background: transparent;
  color: var(--primary-500);
  border: 2px solid var(--primary-500);
}

.btn-outline:hover {
  background: var(--primary-50);
  color: var(--primary-600);
}

/* Hamburger Menu Button */
.navbar-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  color: var(--text-primary);
}

.navbar-hamburger svg {
  width: 24px;
  height: 24px;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.open {
  display: block;
  opacity: 1;
}

/* Mobile Menu Drawer */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100%;
  background: var(--bg-primary);
  z-index: 999;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  transition: right 0.3s ease-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.mobile-menu-header .navbar-brand {
  font-size: var(--text-xl);
}

.mobile-menu-close {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-menu-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Nav Links */
.mobile-menu-nav {
  list-style: none;
  padding: var(--space-2) 0;
  flex-shrink: 0;
}

.mobile-menu-nav li {
  border-bottom: 1px solid var(--border-light);
}

.mobile-menu-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--text-base);
  transition: background var(--transition-fast);
}

.mobile-menu-nav a:hover {
  background: var(--bg-secondary);
  color: var(--primary-500);
}

.mobile-menu-nav a::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

/* Language flags row */
.mobile-menu-langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-langs .lang-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  opacity: 1;
}

.mobile-menu-langs .lang-flag:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.mobile-menu-langs .lang-flag--active {
  background: var(--primary-50);
  color: var(--primary-600);
  font-weight: 600;
}

.mobile-menu-langs .lang-dropdown-flag {
  width: 18px;
  height: 13px;
  display: flex;
  align-items: center;
}

.mobile-menu-langs .lang-dropdown-flag .flag-svg {
  width: 18px;
  height: 13px;
  border-radius: 2px;
}

/* Action buttons */
.mobile-menu-actions {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  flex-shrink: 0;
}

.mobile-menu-actions .btn {
  width: 100%;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
}

/* Bottom Navigation (mobile) */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-light);
  z-index: var(--z-sticky);
  padding: var(--space-2) 0 env(safe-area-inset-bottom, var(--space-2));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}

.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-1) var(--space-3);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.bottom-nav-item svg {
  width: 22px;
  height: 22px;
}

.bottom-nav-item:hover,
.bottom-nav-item--active {
  color: var(--primary-500);
}

/* ============================================
   FOOTER (Dark Theme)
   ============================================ */

.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--space-12) var(--space-7) var(--space-6);
  margin-top: auto;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/sicily-pattern.svg') repeat;
  background-size: 500px 500px;
  z-index: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-9);
}

.footer-brand {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-3);
}

.footer-brand span {
  color: var(--secondary-400);
}

.footer-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.footer h4 {
  color: var(--footer-heading);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.footer a {
  display: block;
  color: var(--footer-text);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  transition: color var(--transition-base);
  text-decoration: none;
}

.footer a:hover {
  color: var(--footer-link-hover);
}

.footer-bottom {
  border-top: 1px solid var(--footer-border);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}

/* Footer social icons */
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  color: var(--footer-text);
  transition: all var(--transition-base);
  margin-bottom: 0;
}

.footer-social-link:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  transform: translateY(-2px);
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
}

/* Footer bottom links */
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-bottom-links a {
  display: inline;
  margin-bottom: 0;
  color: var(--footer-text);
  transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
  color: var(--footer-link-hover);
}

.footer-bottom-sep {
  color: var(--footer-border);
  user-select: none;
}

/* ============================================
   ALERTS
   ============================================ */

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.alert-success {
  background: var(--success-light, #f0fdf4);
  color: var(--success, #16a34a);
  border: 1px solid var(--success, #16a34a);
}

.alert-danger {
  background: var(--danger-light, #fef2f2);
  color: var(--error-500);
  border: 1px solid var(--error-500);
}

.alert-warning {
  background: var(--warning-light, #fffbeb);
  color: var(--warning, #d97706);
  border: 1px solid var(--warning, #d97706);
}

.alert-info {
  background: var(--info-light, #eff6ff);
  color: var(--info, #2563eb);
  border: 1px solid var(--info, #2563eb);
}

/* ============================================
   LOADING & STATES
   ============================================ */

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

.skeleton {
  background: linear-gradient(90deg, var(--primary-50) 25%, var(--primary-100) 50%, var(--primary-50) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  .container {
    padding: 0 var(--space-4);
  }

  .navbar-hamburger { display: flex; }
  .navbar-links { display: none; }
  .navbar-host-btn { display: none; }
  .bottom-nav { display: block; }
  body { padding-bottom: 60px; }

  /* Hide desktop-only actions on mobile (except lang trigger, hamburger, and user avatar) */
  .navbar-actions .btn { display: none; }
  .navbar-actions form { display: none; }
  .navbar-actions .lang-trigger { display: flex; }
  .navbar-actions .navbar-hamburger { display: flex; }
  .navbar-actions .navbar-user-menu { display: flex; }
  .navbar-actions .navbar-mode-switch { display: none; }

  /* Mobile menu: wider on tablet screens */
  .mobile-menu {
    width: 340px;
    right: -360px;
  }

  /* Language modal: 3 columns on tablet */
  .lang-modal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 640px) {
  /* Mobile menu: standard width on small screens */
  .mobile-menu {
    width: 300px;
    right: -320px;
  }

  /* Language modal: bottom-sheet on mobile */
  .lang-modal {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%; max-width: none;
    padding: var(--space-6);
  }
  .lang-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mobile menu langs: wrapping grid */
  .mobile-menu-langs {
    flex-wrap: wrap;
  }

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

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}

/* =============================================================================
   AUTH PAGES — Split layout (desktop: left gradient + right form, mobile: stacked)
   ============================================================================= */

.auth-page {
  min-height: calc(100vh - 72px);
  display: flex;
  background: var(--bg-secondary);
}

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: calc(100vh - 72px);
}

/* Left panel — Mediterranean gradient with brand */
.auth-panel {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-900) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-12);
  position: relative;
  overflow: hidden;
  color: white;
}

.auth-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/sicily-pattern.svg') repeat;
  background-size: 500px 500px;
  z-index: 0;
}

.auth-panel-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 400px;
}

.auth-panel-brand {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.auth-panel-brand span {
  color: var(--secondary-300);
}

.auth-panel-tagline {
  font-size: var(--text-lg);
  opacity: 0.85;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.auth-panel-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

.auth-panel-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  opacity: 0.8;
}

.auth-panel-feature svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Right panel — form area */
.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-7);
  overflow-y: auto;
}

.auth-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-8);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
}

.auth-card--wide {
  max-width: 520px;
}

.auth-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

.auth-subtitle {
  color: var(--text-secondary);
  text-align: center;
  font-size: var(--text-base);
  margin-bottom: var(--space-7);
}

/* Social login buttons */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-social:hover {
  background: var(--bg-secondary);
  border-color: var(--neutral-400);
  box-shadow: var(--shadow-sm);
}

.btn-social svg {
  flex-shrink: 0;
}

/* Divider ("oppure") */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* Auth form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-form .form-group {
  margin-bottom: 0;
}

.auth-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.auth-form .form-group label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.auth-form input::placeholder {
  color: var(--text-tertiary);
}

/* Password visibility toggle */
.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: var(--space-11) !important;
}

.password-toggle {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.password-toggle:hover {
  color: var(--text-secondary);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

.password-toggle .eye-closed {
  display: none;
}

.password-toggle.showing .eye-open {
  display: none;
}

.password-toggle.showing .eye-closed {
  display: block;
}

/* Captcha card */
.captcha-card {
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 50%, #ECFDF5 100%);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  text-align: center;
}

.captcha-question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.captcha-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.captcha-icons svg {
  width: 36px;
  height: 36px;
  color: var(--primary-700);
  flex-shrink: 0;
}

.captcha-operator {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-600);
}

.captcha-qmark {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--primary-500);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--primary-300);
}

.captcha-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.captcha-input {
  width: 80px;
  text-align: center;
  font-size: var(--text-xl) !important;
  font-weight: 700;
  padding: var(--space-2) var(--space-3) !important;
  border: 2px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--primary-700);
  background: var(--surface-card);
}

.captcha-input:focus {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px var(--primary-100) !important;
}

.captcha-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Hide number spinners */
.captcha-input::-webkit-outer-spin-button,
.captcha-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.captcha-input[type=number] {
  -moz-appearance: textfield;
}

.captcha-refresh {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
}

.captcha-refresh:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-600);
}

.captcha-refresh svg {
  width: 18px;
  height: 18px;
}

.captcha-refresh.spinning svg {
  animation: captcha-spin 0.6s ease;
}

@keyframes captcha-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.has-error input {
  border-color: var(--error-500);
}

.has-error input:focus {
  box-shadow: 0 0 0 3px var(--error-50);
}

.form-link {
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.form-link:hover {
  color: var(--primary-600);
}

.form-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.auth-form .form-error {
  display: block;
  font-size: var(--text-xs);
  color: var(--error-500);
  min-height: 0;
  margin-top: var(--space-1);
}

.form-error-global {
  background: var(--error-50);
  color: var(--error-700);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-align: center;
  border: 1px solid var(--error-500);
}

.form-success {
  background: var(--success-50);
  color: var(--success-700);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-align: center;
  border: 1px solid var(--success-500);
}

/* Submit button — auth-specific primary */
.auth-form .btn-primary {
  background: var(--primary-500);
  color: var(--text-on-primary);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--space-2);
}

.auth-form .btn-primary:hover {
  background: var(--primary-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-full {
  width: 100%;
}

/* Role Selector */
.role-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.role-option {
  cursor: pointer;
}

.role-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.role-card:hover {
  border-color: var(--primary-200);
}

.role-option--active .role-card {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.role-card strong {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.role-card small {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.host-fields {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
}

/* Tax Type Selector — card style matching Role Selector */
.tax-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.tax-type-option {
  cursor: pointer;
}

.tax-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tax-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.tax-type-card:hover {
  border-color: var(--primary-200);
}

.tax-type-option--active .tax-type-card {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.tax-type-card strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.tax-type-card small {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Required asterisk */
.required {
  color: var(--error-500);
  font-weight: var(--font-semibold);
}

/* Terms & footer text */
.auth-terms {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
  line-height: var(--leading-relaxed);
}

.auth-terms a {
  color: var(--primary-500);
  text-decoration: underline;
}

.auth-footer-text {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}

.auth-footer-text a {
  color: var(--primary-500);
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.auth-footer-text a:hover {
  color: var(--primary-600);
  text-decoration: underline;
}

.text-success { color: var(--success-500); }
.text-danger { color: var(--error-500); }

/* Responsive */
@media (max-width: 1024px) {
  .auth-split {
    grid-template-columns: 2fr 3fr;
  }
}

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

  .auth-panel {
    display: none;
  }

  .auth-page {
    min-height: auto;
    background: linear-gradient(180deg, var(--primary-700) 0%, var(--primary-800) 30%, var(--bg-secondary) 30%);
    padding: var(--space-12) 0 var(--space-8);
  }

  .auth-form-panel {
    padding: 0 var(--space-5);
  }

  .auth-card {
    padding: var(--space-7) var(--space-6);
  }

  .auth-title {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  .auth-form .form-row {
    grid-template-columns: 1fr;
  }

  .role-selector,
  .tax-type-selector {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
}


/* =============================================================================
   HOMEPAGE
   ============================================================================= */

/* === HERO === */
.hero {
  background: linear-gradient(135deg, var(--primary-700), var(--primary-900));
  padding: var(--space-14) var(--space-7) var(--space-12);
  text-align: center; color: white; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/images/sicily-pattern.svg') repeat;
  background-size: 500px 500px;
  z-index: 0;
}
.hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.hero h1 { font-size: var(--text-5xl); margin-bottom: var(--space-3); letter-spacing: var(--tracking-tight); color: white; }
.hero p { font-size: var(--text-lg); opacity: 0.9; margin-bottom: var(--space-9); }
.hero .trust-bar { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-8); font-size: var(--text-sm); opacity: 0.8; }
.hero .trust-bar span { display: flex; align-items: center; gap: var(--space-2); }
.trust-bar-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; flex-shrink: 0; }
.trust-bar-icon svg { width: 16px; height: 16px; }

/* Hero media support (video/image background) */
.hero--media { padding: 0; min-height: 500px; display: flex; align-items: center; justify-content: center; }
.hero--media .hero-content { padding: var(--space-14) var(--space-7) var(--space-12); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-media[style*="background-image"] { background-size: cover; background-position: center; }
video.hero-media { object-fit: cover; }
video.hero-media::-webkit-media-controls { display: none !important; }
video.hero-media::-webkit-media-controls-enclosure { display: none !important; }
video.hero-media::-webkit-media-controls-panel { display: none !important; }
.hero-media-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 1; }
.hero--media .hero-content { z-index: 2; }
.hero--media::before { z-index: 1; }

/* === SEARCH BAR === */
.search-container { max-width: 900px; margin: -36px auto 0; position: relative; z-index: 10; padding: 0 var(--space-6); }
.search-bar {
  background: var(--surface-card); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); padding: var(--space-2);
  display: flex; align-items: center; border: 1px solid var(--border-light);
}
.search-field-group {
  flex: 1; padding: var(--space-3) var(--space-5); min-width: 0;
}
.search-field-label { font-size: 11px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; display: flex; align-items: center; gap: 5px; }
.search-field-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.search-field-input {
  width: 100%; border: none; background: none; font-size: var(--text-sm); color: var(--text-primary);
  font-family: var(--font-body); padding: 0; outline: none;
}
.search-field-input::placeholder { color: var(--text-tertiary); }
/* Date field as clickable trigger */
.search-date-trigger {
  cursor: pointer; font-size: var(--text-sm); color: var(--text-tertiary);
  font-family: var(--font-body); user-select: none;
  display: flex; align-items: center; gap: var(--space-2);
}
.search-date-trigger.has-value { color: var(--text-primary); font-weight: 500; }
.search-date-trigger .date-icon { font-size: 14px; opacity: 0.5; }
.search-divider { width: 1px; height: 40px; background: var(--border-light); flex-shrink: 0; }

/* === DATE PICKER CALENDAR === */
.datepicker-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
}
.datepicker-overlay.open { display: block; }
.datepicker {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  padding: var(--space-6); z-index: 1000;
  margin-top: var(--space-3);
}
.datepicker-months {
  display: flex; gap: var(--space-7);
}
.datepicker-month { width: 280px; }
.datepicker-month-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-4);
}
.datepicker-month-title {
  font-weight: var(--font-bold); font-size: var(--text-md);
  font-family: var(--font-heading);
}
.datepicker-nav {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: none; border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; color: var(--text-secondary);
}
.datepicker-nav:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.datepicker-nav.hidden { visibility: hidden; }
.datepicker-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--space-2);
}
.datepicker-weekday {
  text-align: center; font-size: 11px; font-weight: var(--font-bold);
  color: var(--text-tertiary); text-transform: uppercase;
  padding: var(--space-1) 0;
}
.datepicker-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.datepicker-day {
  text-align: center; padding: 10px 0; font-size: var(--text-sm);
  border-radius: var(--radius-full); cursor: pointer;
  transition: all 0.1s; position: relative;
  background: none; border: none; font-family: var(--font-body);
  color: var(--text-primary);
}
.datepicker-day:hover:not(.disabled):not(.empty) {
  background: var(--primary-50); color: var(--primary-600);
}
.datepicker-day.empty { visibility: hidden; cursor: default; }
.datepicker-day.disabled { color: var(--text-tertiary); opacity: 0.4; cursor: not-allowed; }
.datepicker-day.today { font-weight: var(--font-bold); }
.datepicker-day.today::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary-500);
}
.datepicker-day.start-date {
  background: var(--primary-500); color: #fff; font-weight: var(--font-bold);
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}
.datepicker-day.end-date {
  background: var(--primary-500); color: #fff; font-weight: var(--font-bold);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}
.datepicker-day.start-date.end-date { border-radius: var(--radius-full); }
.datepicker-day.in-range {
  background: var(--primary-50); color: var(--primary-700);
  border-radius: 0;
}
/* Mobile close header (hidden on desktop) */
.mobile-close { display: none; }
.mobile-close-title { font-weight: 600; font-size: var(--text-base); font-family: var(--font-body); }
.mobile-close-btn {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--bg-secondary); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-secondary); line-height: 1;
}
.mobile-close-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.datepicker-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}
.datepicker-selection {
  font-size: var(--text-sm); color: var(--text-secondary);
}
.datepicker-selection strong { color: var(--text-primary); }
.datepicker-actions { display: flex; gap: var(--space-3); }
.datepicker-clear {
  padding: 8px 16px; border-radius: var(--radius-md);
  background: none; border: 1px solid var(--border-light);
  font-size: var(--text-sm); cursor: pointer;
  font-family: var(--font-body); color: var(--text-secondary);
}
.datepicker-clear:hover { background: var(--bg-tertiary); }
.datepicker-apply {
  padding: 8px 20px; border-radius: var(--radius-md);
  background: var(--primary-500); color: #fff; border: none;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  cursor: pointer; font-family: var(--font-body);
}
.datepicker-apply:hover { background: var(--primary-600); }
.search-guests-trigger {
  flex: 1; padding: var(--space-3) var(--space-5); cursor: pointer;
  font-size: var(--text-base); color: var(--text-primary); font-family: var(--font-body);
  position: relative; min-width: 140px;
}
.search-guests-trigger .guest-label { font-size: 11px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; display: flex; align-items: center; gap: 5px; }
.search-guests-trigger .guest-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.search-guests-trigger .guest-summary { font-size: var(--text-sm); font-weight: 500; }
.search-btn {
  background: var(--search-btn-bg); color: white; border: none;
  padding: var(--space-4) var(--space-7); border-radius: var(--radius-lg);
  font-size: var(--text-base); font-weight: 600; cursor: pointer;
  margin-left: var(--space-2); font-family: var(--font-body);
  white-space: nowrap; flex-shrink: 0;
}
.search-btn:hover { background: var(--search-btn-hover); }

/* Guest Dropdown */
.guest-dropdown {
  position: absolute; top: calc(100% + var(--space-4)); right: 0;
  background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  padding: var(--space-5); width: 360px; z-index: 100;
  display: none; max-height: 70vh; overflow-y: auto;
}
.guest-dropdown.open { display: block; }
.guest-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
}
.guest-row:last-child { border-bottom: none; }
.guest-row-info h4 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; margin-bottom: 2px; }
.guest-row-info span { font-size: var(--text-xs); color: var(--text-tertiary); }
.guest-counter { display: flex; align-items: center; gap: var(--space-3); }
.guest-counter button {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--border-default); background: var(--bg-primary);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); font-family: var(--font-body);
}
.guest-counter button:hover { border-color: var(--primary-500); color: var(--primary-500); }
.guest-counter button:disabled { opacity: 0.3; cursor: not-allowed; }
.guest-counter .count { min-width: 24px; text-align: center; font-weight: 600; font-size: var(--text-md); }

/* Children ages */
.children-ages { padding: var(--space-3) 0 0; }
.children-ages .age-row {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-2); font-size: var(--text-sm);
}
.children-ages label { color: var(--text-secondary); min-width: 90px; font-size: var(--text-sm); }

/* Pet type */
.pet-details { padding: var(--space-3) 0 0; }
.pet-row {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-2); font-size: var(--text-sm);
}
.pet-row label { color: var(--text-secondary); min-width: 90px; font-size: var(--text-sm); }

/* Custom Select */
.custom-select {
  flex: 1; position: relative; font-family: var(--font-body);
}
.custom-select-trigger {
  padding: 7px 28px 7px 10px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); font-size: var(--text-sm);
  background: var(--bg-primary); color: var(--text-primary);
  cursor: pointer; user-select: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.custom-select-trigger::after {
  content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--text-tertiary);
}
.custom-select-trigger:hover { border-color: var(--primary-400); }
.custom-select-trigger.placeholder { color: var(--text-tertiary); }
.custom-select-options {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  z-index: 200; max-height: 180px; overflow-y: auto;
  padding: 4px 0;
}
.custom-select-options.open { display: block; }
.custom-select-option {
  padding: 7px 10px; font-size: var(--text-sm); cursor: pointer;
  color: var(--text-primary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.custom-select-option:hover { background: var(--primary-50); color: var(--primary-600); }
.custom-select-option.selected { background: var(--primary-50); color: var(--primary-600); font-weight: 500; }
.guest-dropdown-done {
  width: 100%; padding: var(--space-3); border: none; border-radius: var(--radius-md);
  background: var(--primary-500); color: white; font-weight: 600;
  font-size: var(--text-sm); cursor: pointer; margin-top: var(--space-4);
  font-family: var(--font-body);
}

/* === SECTIONS === */
.section { max-width: 1200px; margin: 0 auto; padding: var(--space-12) var(--space-6); }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-7); }
.section-header h2 { font-size: var(--text-3xl); }
.section-header a { color: var(--primary-500); font-weight: 600; font-size: var(--text-base); text-decoration: none; }
.section-header a:hover { color: var(--primary-600); }

/* === CITY GRID BLOCKS === */
.city-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.city-block {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  transition: all var(--transition-base);
  display: block;
  text-decoration: none;
  color: inherit;
}
.city-block:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.city-block.active { box-shadow: 0 0 0 3px var(--primary-500), var(--shadow-lg); }
.city-block-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
}
.city-block-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  padding: var(--space-4) var(--space-3) var(--space-3);
}
.city-block-name {
  color: #fff; font-weight: var(--font-bold);
  font-size: var(--text-md); font-family: var(--font-heading);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.city-block-count {
  color: rgba(255,255,255,0.8); font-size: var(--text-xs);
  margin-top: 2px;
}
.city-block.featured {
  grid-column: span 2;
  grid-row: span 2;
}
.city-block.featured .city-block-name { font-size: var(--text-xl); }

/* === PROPERTY CARDS === */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.card {
  background: var(--surface-card); border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm); transition: all var(--transition-slow);
  cursor: pointer; text-decoration: none; color: inherit; display: block;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); color: inherit; }
.card-img {
  height: 200px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-300), var(--primary-600));
}
.card-img .badge { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--accent-500); color: var(--neutral-900); padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; }
.card-img .badge-genius { background: var(--primary-500); color: white; }
.card-img .badge-lastminute { background: var(--secondary-500); color: white; }
.card-img .badge-eco { background: var(--accent-500); }
.card-img .fav { position: absolute; top: var(--space-3); right: var(--space-3); background: rgba(255,255,255,0.9); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; border: none; }
.card-body { padding: var(--space-4); }
.card-body h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; margin-bottom: 2px; }
.card-body .loc { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-2); display: flex; align-items: center; gap: 4px; }
.card-body .loc-icon { width: 14px; height: 14px; flex-shrink: 0; }
.card-body .rating { display: flex; align-items: center; gap: 4px; margin-bottom: var(--space-2); }
.card-body .rating .score { background: var(--primary-500); color: white; padding: 2px 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; }
.card-body .rating .text { color: var(--text-tertiary); font-size: var(--text-xs); }
.card-body .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.card-body .tag { background: var(--bg-tertiary); padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; color: var(--text-secondary); }
.card-body .price-row { display: flex; justify-content: space-between; align-items: center; }
.card-body .price { font-size: var(--text-xl); font-weight: 700; }
.card-body .price small { font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); }
.card-body .old-price { text-decoration: line-through; color: var(--text-tertiary); font-size: var(--text-sm); margin-right: 4px; }

/* === CATEGORY CARDS (Explore by Type) === */
.section--categories {
  background: var(--bg-secondary); max-width: none; padding: var(--space-12) 0;
}
.section--categories-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6);
}
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.cat-card {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  height: 180px; cursor: pointer; transition: transform var(--transition-base);
  display: block; text-decoration: none; color: inherit;
}
.cat-card:hover { transform: scale(1.03); }
.cat-card .overlay {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1));
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-4);
  color: white;
}
.cat-card .overlay h3 { font-size: var(--text-lg); margin-bottom: 2px; color: white; }
.cat-card .overlay span { font-size: var(--text-xs); opacity: 0.8; }

/* === GUIDE TEASER === */
.guide-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4); height: 400px; }
.guide-card {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  cursor: pointer; transition: transform var(--transition-base);
}
.guide-card:hover { transform: scale(1.02); }
.guide-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-6); color: white;
}
.guide-card .overlay .cat-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); opacity: 0.8; margin-bottom: var(--space-1); }
.guide-card .overlay h3 { font-size: var(--text-2xl); color: white; }
.guide-card .overlay p { font-size: var(--text-sm); opacity: 0.8; margin-top: var(--space-1); }

/* === FEATURES SECTION === */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); }
.feature-item { text-align: center; padding: var(--space-6); }
.feature-icon { font-size: 40px; margin-bottom: var(--space-4); color: var(--primary-500); }
.feature-icon svg { width: 40px; height: 40px; margin: 0 auto; }
.feature-item h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-2); }
.feature-item p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* === CTA HOST === */
.cta-host {
  background: linear-gradient(135deg, var(--secondary-500), var(--secondary-700));
  border-radius: var(--radius-xl); padding: var(--space-12) var(--space-9);
  display: flex; align-items: center; justify-content: space-between;
  color: white; margin: var(--space-7) 0;
}
.cta-host h2 { font-size: var(--text-4xl); margin-bottom: var(--space-3); color: white; }
.cta-host p { font-size: var(--text-lg); opacity: 0.9; max-width: 500px; margin-bottom: var(--space-6); }
.cta-host .btn-white {
  background: white; color: var(--secondary-700); padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-md);
  border: none; cursor: pointer; display: inline-block; text-decoration: none;
  font-family: var(--font-body);
}
.cta-host .btn-white:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.cta-host .stats { display: flex; gap: var(--space-8); }
.cta-host .stat { text-align: center; }
.cta-host .stat .num { font-size: var(--text-4xl); font-weight: 700; font-family: var(--font-heading); }
.cta-host .stat .label { font-size: var(--text-sm); opacity: 0.8; }

/* === HOMEPAGE RESPONSIVE === */

/* --- Tablet landscape / small desktop (max 1024px) --- */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .guide-grid .guide-card { min-height: 200px; }
  .cta-host { flex-direction: column; text-align: center; }
  .cta-host .stats { justify-content: center; }
}
/* --- Tablet portrait (max 768px) --- */
@media (max-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: var(--text-3xl); }
  .guide-grid { grid-template-columns: 1fr; }
  .city-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .city-block.featured { grid-column: span 1; grid-row: span 1; }
  .city-block-name { font-size: var(--text-sm); }
  .city-block.featured .city-block-name { font-size: var(--text-sm); }
  /* Search bar: 2x2 grid for tablet */
  .search-bar {
    display: grid; grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-lg); padding: var(--space-3);
  }
  .search-divider { display: none; }
  .search-field-group { padding: var(--space-3) var(--space-4); text-align: left; }
  .search-field-group, .search-guests-trigger { border-bottom: 1px solid var(--border-light); }
  .search-guests-trigger { min-width: auto; padding: var(--space-3) var(--space-4); text-align: left; }
  .search-btn {
    grid-column: 1 / -1; width: 100%; text-align: center;
    margin: var(--space-2) 0 0 0; padding: var(--space-4); border-radius: var(--radius-md);
  }
  /* Datepicker: centered modal, keep dual months but smaller */
  .datepicker {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 90vw; max-width: 600px;
    padding: var(--space-5); margin-top: var(--space-3);
  }
  .datepicker-month { width: 240px; }
  .datepicker-months { gap: var(--space-4); }
  .datepicker-day { padding: 7px 0; font-size: 13px; }
  .datepicker-nav { width: 30px; height: 30px; font-size: 14px; }
  /* Guest dropdown: centered, not bottom-sheet */
  .guest-dropdown {
    right: auto; left: 50%; transform: translateX(-50%);
    width: 380px; max-width: 90vw;
  }
  .guest-row { padding: var(--space-4) 0; }
}
/* --- Mobile (max 640px) --- */
@media (max-width: 640px) {
  .features-grid { grid-template-columns: 1fr; }
  /* Search bar: fully stacked */
  .search-bar {
    display: flex; flex-direction: column;
    border-radius: var(--radius-lg); padding: var(--space-3);
  }
  .search-field-group, .search-guests-trigger { border-bottom: none; }
  .search-divider { display: block; width: 100%; height: 1px; }
  /* Guest dropdown: bottom-sheet */
  .guest-dropdown {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    transform: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 80vh; overflow-y: auto; z-index: 200;
    padding: var(--space-5) var(--space-5) var(--space-6);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  }
  .guest-dropdown .mobile-close {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-4); padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
  }
  /* Datepicker: bottom-sheet, single column */
  .datepicker {
    left: 0; right: 0; transform: none; width: auto;
    padding: var(--space-4) var(--space-4) var(--space-5);
    margin: 0; position: fixed; top: auto; bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 80vh; max-width: none; overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  }
  .datepicker .mobile-close {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-3); padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
  }
  .datepicker-months { flex-direction: column; gap: var(--space-3); }
  .datepicker-month { width: 100%; }
  .datepicker-day { padding: 8px 0; font-size: 13px; }
  .datepicker-month-title { font-size: var(--text-sm); }
  .datepicker-weekday { font-size: 10px; }
  .datepicker-nav { width: 28px; height: 28px; font-size: 12px; }
  .hero .trust-bar { flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
}
/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .cat-card { height: 140px; }
  .city-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

/* Base reveal class — hidden initially */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(9) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(10) { transition-delay: 0.9s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(11) { transition-delay: 1s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(12) { transition-delay: 1.1s; opacity: 1; transform: translateY(0); }

/* Fade in from left/right */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Scale in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ============================================
   HERO PARALLAX EFFECT
   ============================================ */
.hero {
  background-attachment: fixed;
}

/* ============================================
   ENHANCED "WHY SICILY EXPERIENCE" SECTION
   ============================================ */
.features-grid .feature-item {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all 0.4s ease;
  padding: var(--space-8) var(--space-6);
}

.features-grid .feature-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-200);
}

.features-grid .feature-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  transition: all 0.4s ease;
}

.features-grid .feature-item:hover .feature-icon {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  transform: scale(1.1);
}

.features-grid .feature-item:hover .feature-icon svg {
  stroke: white;
}

.features-grid .feature-icon svg {
  width: 28px;
  height: 28px;
  transition: stroke 0.4s ease;
}

/* ============================================
   ENHANCED CTA HOST SECTION
   ============================================ */
.cta-host {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-500) 50%, var(--accent-500) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
  position: relative;
  overflow: hidden;
}

.cta-host::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/sicily-pattern.svg') repeat;
  background-size: 500px 500px;
  z-index: 0;
}

.cta-host > * {
  position: relative;
  z-index: 1;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.cta-host .btn-white {
  transition: all 0.3s ease;
}

.cta-host .btn-white:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.cta-host .stat .num {
  transition: transform 0.3s ease;
}

.cta-host .stat:hover .num {
  transform: scale(1.1);
}

/* ============================================
   ENHANCED GUIDE SECTION
   ============================================ */
.guide-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.guide-card:hover::after {
  opacity: 1;
}

.guide-card .overlay h3 {
  transition: transform 0.3s ease;
}

.guide-card:hover .overlay h3 {
  transform: translateY(-4px);
}

/* ============================================
   CATEGORY CARD ENHANCEMENTS
   ============================================ */
.cat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.6s ease;
}

.cat-card:hover::after {
  left: 150%;
}

/* ============================================
   PROPERTY CARD ENHANCEMENTS
   ============================================ */
.card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.1) 0%, transparent 40%);
  transition: opacity 0.3s ease;
}

.card:hover .card-img::after {
  opacity: 0;
}

.card .fav {
  transition: all 0.3s ease;
}

.card .fav:hover {
  transform: scale(1.2);
  background: white;
}

/* ============================================
   CITY BLOCK ENHANCEMENTS
   ============================================ */
.city-block-img {
  transition: transform 0.6s ease;
}

.city-block:hover .city-block-img {
  transform: scale(1.08);
}

.city-block-overlay {
  transition: padding-bottom 0.3s ease;
}

.city-block:hover .city-block-overlay {
  padding-bottom: var(--space-5);
}

/* ============================================
   SEARCH BAR ENHANCEMENTS
   ============================================ */
.search-bar {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.search-bar:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.search-btn {
  transition: all 0.3s ease;
}

.search-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cta-host { animation: none; }
  .hero { background-attachment: scroll; }
}


/* ============================================
   SEARCH PAGE
   ============================================ */

/* --- Search Page Top Bar --- */
.search-page-bar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-4) 0;
  position: sticky;
  top: 60px; /* below navbar */
  z-index: var(--z-sticky);
}

.search-page-bar-inner {
  max-width: var(--max-w-xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.search-page-bar .search-bar {
  box-shadow: var(--shadow-md);
}

.search-page-bar .search-bar:hover {
  transform: none; /* disable lift on search page */
}

/* --- Main Layout --- */
.search-layout {
  max-width: var(--max-w-2xl);
  margin: 0 auto;
  padding: var(--space-6);
  display: flex;
  gap: var(--space-7);
  min-height: 60vh;
  position: relative;
}

/* --- Filter Sidebar --- */
.search-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 140px; /* navbar + search bar */
  height: fit-content;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.search-sidebar-header {
  display: none; /* shown only on mobile */
}

.search-sidebar-body {
  padding: var(--space-5);
}

.search-sidebar-footer {
  display: none; /* shown only on mobile */
}

/* Filter Groups */
.search-filter-group {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-light);
}

.search-filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.search-filter-heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Custom Checkboxes */
.search-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.search-checkbox:hover {
  color: var(--text-primary);
}

.search-checkbox input[type="checkbox"] {
  display: none;
}

.search-checkbox-mark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-default);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  background: var(--bg-primary);
}

.search-checkbox input:checked + .search-checkbox-mark {
  background: var(--primary-500);
  border-color: var(--primary-500);
}

.search-checkbox input:checked + .search-checkbox-mark::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}

.search-checkbox input:checked ~ span:last-child {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* Amenity Category Accordion */
.search-amenity-selected-count {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
}

.search-amenity-category {
  border-bottom: 1px solid var(--border-light);
}

.search-amenity-category:last-child {
  border-bottom: none;
}

.search-amenity-category-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  text-align: left;
  gap: var(--space-2);
}

.search-amenity-category-toggle:hover {
  color: var(--color-primary);
}

.search-amenity-category-label {
  flex: 1;
}

.search-amenity-category-count {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  min-width: 20px;
  text-align: center;
}

.search-amenity-category-count:empty {
  display: none;
}

.search-amenity-category-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.search-amenity-category-toggle[aria-expanded="true"] .search-amenity-category-arrow {
  transform: rotate(180deg);
}

.search-amenity-category-items {
  padding: 0 0 var(--space-2) var(--space-2);
  max-height: 240px;
  overflow-y: auto;
}

.search-amenity-category-items .search-checkbox {
  padding: var(--space-1) 0;
  margin: 0;
}

.search-amenity-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.search-amenity-icon {
  font-size: 18px;
  color: var(--text-tertiary);
  vertical-align: middle;
}

.search-amenity-category-items::-webkit-scrollbar {
  width: 4px;
}

.search-amenity-category-items::-webkit-scrollbar-track {
  background: transparent;
}

.search-amenity-category-items::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 2px;
}

/* Price Range */
.search-price-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.search-price-field {
  flex: 1;
}

.search-price-field label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: block;
  margin-bottom: var(--space-1);
}

.search-price-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-primary);
  transition: border-color var(--transition-fast);
}

.search-price-input-wrap:focus-within {
  border-color: var(--border-focus);
}

.search-price-currency {
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.search-price-input-wrap input {
  width: 100%;
  border: none;
  background: none;
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
  font-family: var(--font-body);
  -moz-appearance: textfield;
}

.search-price-input-wrap input::-webkit-inner-spin-button,
.search-price-input-wrap input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.search-price-dash {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.search-price-slider {
  margin-top: var(--space-3);
}

.search-price-slider input[type="range"] {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-default);
  border-radius: 2px;
  outline: none;
}

.search-price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--primary-500);
  cursor: pointer;
  border: 3px solid var(--bg-primary);
  box-shadow: var(--shadow-md);
}

.search-price-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--primary-500);
  cursor: pointer;
  border: 3px solid var(--bg-primary);
  box-shadow: var(--shadow-md);
}

/* Rating Buttons */
.search-rating-btns {
  display: flex;
  gap: var(--space-2);
}

.search-rating-btn {
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.search-rating-btn:hover {
  border-color: var(--primary-400);
  color: var(--primary-500);
}

.search-rating-btn.active {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: white;
}

/* Toggle Switch */
.search-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.search-toggle input {
  display: none;
}

.search-toggle-slider {
  width: 44px;
  height: 24px;
  background: var(--neutral-300);
  border-radius: 12px;
  position: relative;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.search-toggle-slider::after {
  content: '';
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.search-toggle input:checked + .search-toggle-slider {
  background: var(--primary-500);
}

.search-toggle input:checked + .search-toggle-slider::after {
  transform: translateX(20px);
}

.search-toggle-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- Filter FAB (mobile) --- */
.search-filter-fab {
  display: none; /* shown on mobile via media query */
  position: fixed;
  bottom: 80px; /* above bottom nav */
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-fixed);
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
}

.search-filter-fab:hover {
  box-shadow: var(--shadow-xl);
}

.search-filter-fab svg {
  flex-shrink: 0;
}

/* Filter Overlay (mobile) */
.search-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
}

.search-filter-overlay.open {
  display: block;
}

/* --- Results Area --- */
.search-results {
  flex: 1;
  min-width: 0;
}

.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.search-results-title {
  font-size: var(--text-2xl);
  font-family: var(--font-heading);
  margin-bottom: var(--space-1);
}

.search-results-count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.search-results-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* View Toggle */
.search-view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.search-view-btn {
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.search-view-btn.active {
  background: var(--surface-card);
  color: var(--primary-500);
  box-shadow: var(--shadow-sm);
}

.search-view-btn:hover:not(.active) {
  color: var(--text-secondary);
}

/* Sort */
.search-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-sort-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.search-sort-select {
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239E9E9E' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.search-sort-select:focus {
  border-color: var(--border-focus);
}

/* --- Results Container --- */
.search-results-grid {
  position: relative;
}

/* --- Skeleton Cards --- */
.search-skeletons {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.search-skeleton-card {
  display: flex;
  gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--space-4);
}

.search-skeleton-img {
  width: 260px;
  height: 180px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.search-skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
}

.search-skeleton-tags {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* --- Property Cards (List View) --- */
#resultsList {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.search-card {
  display: flex;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.search-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  color: inherit;
}

/* Card Image */
.search-card-img {
  width: 280px;
  min-height: 200px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tertiary);
  position: relative;
}

.search-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  z-index: 1;
}

.search-card-badge--superhost {
  background: var(--accent-500);
  color: var(--text-on-accent);
}

.search-card-badge--instant {
  background: var(--success-500);
  color: white;
  left: auto;
  right: var(--space-3);
  top: var(--space-3);
}

.search-card-fav {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  z-index: 1;
}

.search-card-fav:hover {
  transform: scale(1.1);
  background: white;
}

.search-card-fav.active {
  color: var(--error-500);
}

/* Card Body */
.search-card-body {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.search-card-name-area {
  min-width: 0;
  flex: 1;
}

.search-card-type {
  font-size: var(--text-xs);
  color: var(--primary-500);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 2px;
  display: block;
}

.search-card-name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-card-loc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Rating */
.search-card-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.search-card-score {
  background: var(--primary-500);
  color: white;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  min-width: 36px;
  text-align: center;
}

.search-card-reviews {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Tags */
.search-card-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.search-card-tag {
  background: var(--bg-tertiary);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--text-secondary);
}

.search-card-tag--more {
  background: var(--primary-50);
  color: var(--primary-500);
  font-weight: var(--font-medium);
}

/* Price */
.search-card-price-row {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.search-card-price {
  text-align: right;
}

.search-card-price-amount {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.search-card-price-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-regular);
}

/* --- Grid View --- */
[data-view="grid"] .search-skeletons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

[data-view="grid"] .search-skeleton-card {
  flex-direction: column;
}

[data-view="grid"] .search-skeleton-img {
  width: 100%;
  height: 180px;
}

[data-view="grid"] #resultsList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

[data-view="grid"] .search-card {
  flex-direction: column;
}

[data-view="grid"] .search-card-img {
  width: 100%;
  min-height: 200px;
  height: 200px;
}

[data-view="grid"] .search-card-body {
  padding: var(--space-4);
}

[data-view="grid"] .search-card-name {
  font-size: var(--text-md);
}

[data-view="grid"] .search-card-top {
  flex-direction: column;
  gap: var(--space-1);
}

[data-view="grid"] .search-card-rating {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* --- Empty State --- */
.search-empty {
  text-align: center;
  padding: var(--space-13) var(--space-6);
  color: var(--text-secondary);
}

.search-empty-icon {
  margin-bottom: var(--space-5);
}

.search-empty h3 {
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.search-empty p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Pagination --- */
.search-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) 0 var(--space-4);
}

.search-pagination-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--primary-500);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-pagination-btn:hover:not(:disabled) {
  background: var(--primary-50);
  border-color: var(--primary-400);
}

.search-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.search-pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.search-pagination-page {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.search-pagination-page:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.search-pagination-page.active {
  background: var(--primary-500);
  color: white;
  font-weight: var(--font-bold);
  border-radius: var(--radius-sm);
}

.search-pagination-ellipsis {
  padding: 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* --- Map FAB --- */
.search-map-fab {
  display: none; /* shown on mobile via media query */
  position: fixed;
  bottom: 80px;
  right: var(--space-4);
  z-index: var(--z-fixed);
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
}

.search-map-fab:hover {
  background: var(--primary-600);
  box-shadow: var(--shadow-xl);
}

.search-map-fab svg {
  flex-shrink: 0;
}


/* === SEARCH PAGE RESPONSIVE === */

/* --- Desktop large (1024px+) --- */
@media (min-width: 1024px) {
  .search-filter-fab { display: none !important; }
  .search-map-fab { display: none; }
}

/* --- Tablet / small desktop (max 1024px) --- */
@media (max-width: 1024px) {
  /* Hide sidebar, show as drawer */
  .search-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    z-index: var(--z-modal);
    border-radius: 0;
    border: none;
    max-height: none;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
  }

  .search-sidebar.open {
    transform: translateX(0);
  }

  .search-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
  }

  .search-sidebar-header h3 {
    font-size: var(--text-lg);
    font-family: var(--font-body);
    font-weight: var(--font-bold);
  }

  .search-sidebar-close {
    background: none;
    border: none;
    font-size: var(--text-2xl);
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    line-height: 1;
  }

  .search-sidebar-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .search-sidebar-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-light);
    background: var(--surface-card);
  }

  .search-sidebar-footer .btn {
    flex: 1;
  }

  .search-filter-fab {
    display: flex;
  }

  .search-map-fab {
    display: flex;
  }

  .search-layout {
    padding: var(--space-4);
  }

  /* Grid view: 2 columns on tablet */
  [data-view="grid"] #resultsList,
  [data-view="grid"] .search-skeletons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Tablet portrait (max 768px) --- */
@media (max-width: 768px) {
  .search-page-bar {
    top: 0;
    padding: var(--space-3) 0;
  }

  .search-page-bar-inner {
    padding: 0 var(--space-3);
  }

  /* Search bar: 2x2 grid for tablet on search page */
  .search-page-bar .search-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }

  .search-page-bar .search-divider { display: none; }
  .search-page-bar .search-field-group { padding: var(--space-3) var(--space-4); text-align: left; }
  .search-page-bar .search-field-group,
  .search-page-bar .search-guests-trigger { border-bottom: 1px solid var(--border-light); }
  .search-page-bar .search-guests-trigger { min-width: auto; padding: var(--space-3) var(--space-4); text-align: left; }
  .search-page-bar .search-btn {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    margin: var(--space-2) 0 0 0;
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .search-results-header {
    flex-direction: column;
  }

  .search-results-title {
    font-size: var(--text-xl);
  }

  /* Sort label hidden on tablet, just show select */
  .search-sort-label {
    display: none;
  }

  /* Card image smaller */
  .search-card-img {
    width: 200px;
    min-height: 160px;
  }
}

/* --- Mobile (max 640px) --- */
@media (max-width: 640px) {
  .search-page-bar .search-bar {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }

  .search-page-bar .search-field-group,
  .search-page-bar .search-guests-trigger { border-bottom: none; }
  .search-page-bar .search-divider { display: block; width: 100%; height: 1px; }

  /* Guest dropdown: bottom-sheet */
  .search-page-bar .guest-dropdown {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    transform: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 80vh; overflow-y: auto; z-index: 200;
    padding: var(--space-5) var(--space-5) var(--space-6);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  }
  .search-page-bar .guest-dropdown .mobile-close {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-4); padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
  }

  /* Datepicker: bottom-sheet */
  .search-page-bar .datepicker {
    left: 0; right: 0; transform: none; width: auto;
    padding: var(--space-4) var(--space-4) var(--space-5);
    margin: 0; position: fixed; top: auto; bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 80vh; max-width: none; overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  }
  .search-page-bar .datepicker .mobile-close {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-3); padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
  }
  .search-page-bar .datepicker-months { flex-direction: column; gap: var(--space-3); }
  .search-page-bar .datepicker-month { width: 100%; }

  .search-layout {
    padding: var(--space-3);
    gap: 0;
  }

  /* Cards go vertical (stacked) on mobile */
  .search-card {
    flex-direction: column;
  }

  .search-card-img {
    width: 100%;
    min-height: 180px;
    height: 180px;
  }

  .search-card-body {
    padding: var(--space-4);
  }

  .search-card-name {
    font-size: var(--text-md);
    white-space: normal;
  }

  /* Grid view: single column on mobile */
  [data-view="grid"] #resultsList,
  [data-view="grid"] .search-skeletons {
    grid-template-columns: 1fr;
  }

  /* Skeleton: stacked */
  .search-skeleton-card {
    flex-direction: column;
  }

  .search-skeleton-img {
    width: 100%;
    height: 160px;
  }

  /* View toggle hidden on small mobile */
  .search-view-toggle {
    display: none;
  }

  /* Map FAB + Filter FAB stack */
  .search-filter-fab {
    bottom: 80px;
    left: var(--space-4);
    right: auto;
    transform: none;
  }

  .search-map-fab {
    bottom: 80px;
  }

  /* Pagination: simplify */
  .search-pagination-btn span {
    display: none;
  }
}

/* --- Small mobile (max 375px) --- */
@media (max-width: 375px) {
  .search-results-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .search-card-body {
    padding: var(--space-3);
  }

  .search-card-price-amount {
    font-size: var(--text-lg);
  }
}


/* =============================================================================
   PROPERTY DETAIL PAGE
   ============================================================================= */

/* --- Back Navigation Bar --- */
.property-back-bar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-3) 0;
}

.property-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.property-back-link:hover {
  color: var(--primary-500);
}

.property-back-link svg {
  flex-shrink: 0;
}

/* --- Photo Gallery (Desktop Grid) --- */
.property-gallery {
  position: relative;
  max-width: var(--max-w-xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.property-gallery-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 420px;
}

.property-gallery-main {
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.property-gallery-main:hover {
  opacity: 0.92;
}

.property-gallery-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-2);
}

.property-gallery-thumb {
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.property-gallery-thumb:hover {
  opacity: 0.88;
}

/* Show all photos button */
.property-gallery-show-all {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-8);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
}

/* --- Photo Gallery (Mobile Carousel) --- */
.property-gallery-carousel {
  display: none;
  position: relative;
  overflow: hidden;
  height: 280px;
}

.property-gallery-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
}

.property-gallery-carousel-slide {
  min-width: 100%;
  height: 100%;
  background: var(--bg-tertiary);
}

.property-gallery-carousel-dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 5;
}

.property-gallery-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast);
}

.property-gallery-carousel-dot.active {
  background: white;
  width: 20px;
}

/* --- Full-screen Gallery Modal --- */
.property-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-modal-backdrop);
  display: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.property-modal-overlay.open {
  display: block;
}

.property-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

.property-modal.open {
  display: flex;
}

.property-modal-header {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.property-modal-counter {
  color: white;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.property-modal-close {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.property-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.property-modal-body {
  max-width: 900px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.property-modal-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.property-modal-slide img {
  max-height: 80vh;
  max-width: 100%;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.property-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  z-index: 2;
}

.property-modal-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.property-modal-prev {
  left: var(--space-5);
}

.property-modal-next {
  right: var(--space-5);
}

/* --- Main Layout (Content + Sidebar) --- */
.property-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-10);
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
  align-items: start;
}

.property-content {
  min-width: 0;
}

/* --- Section Dividers --- */
.property-divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--space-7) 0;
}

/* --- Section Titles --- */
.property-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-5);
  color: var(--text-primary);
}

/* --- Property Header --- */
.property-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.property-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.property-meta-location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.property-meta-location svg {
  flex-shrink: 0;
}

.property-badges {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.property-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.property-badge--rating {
  background: var(--primary-500);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.property-badge--type {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.property-badge--instant {
  background: var(--accent-100);
  color: var(--accent-700);
}

.property-badge-text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* --- Host Info --- */
.property-host-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.property-host-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-300), var(--primary-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: white;
  flex-shrink: 0;
}

.property-host-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.property-host-detail {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* --- Highlights --- */
.property-highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.property-highlight-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.property-highlight-card:hover {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-sm);
}

.property-highlight-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-500);
}

.property-highlight-icon svg {
  width: 22px;
  height: 22px;
}

.property-highlight-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.property-highlight-text strong {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.property-highlight-text span {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* --- Description --- */
.property-description-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  white-space: pre-line;
}

.property-description-text--truncated {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-show-more {
  background: none;
  border: none;
  color: var(--primary-500);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.property-show-more:hover {
  color: var(--primary-600);
}

/* --- Amenities --- */
.property-amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}

.property-amenity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.property-amenity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-500);
  flex-shrink: 0;
}

.property-amenity-icon svg {
  width: 20px;
  height: 20px;
}

/* --- House Rules --- */
.property-rule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}

.property-rule-row:last-child {
  border-bottom: none;
}

.property-rule-label {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  font-size: var(--text-base);
}

.property-rule-value {
  color: var(--text-secondary);
  font-size: var(--text-base);
}

/* --- Location / Map --- */
.property-map-placeholder {
  width: 100%;
  height: 300px;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

.property-map-coords {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--primary-600);
  font-weight: var(--font-medium);
  font-size: var(--text-lg);
}

.property-location-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* --- Reviews --- */
.property-no-reviews {
  color: var(--text-tertiary);
  font-size: var(--text-base);
  font-style: italic;
}

.property-rating-overview {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-bottom: var(--space-7);
}

.property-rating-circle {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: var(--primary-50);
  border: 3px solid var(--primary-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.property-rating-number {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--primary-600);
  line-height: 1;
}

.property-rating-out {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.property-rating-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.property-rating-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.property-rating-bar-label {
  width: 120px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.property-rating-bar-track {
  flex: 1;
  height: 6px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.property-rating-bar-fill {
  height: 100%;
  background: var(--primary-500);
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

.property-rating-bar-score {
  width: 28px;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Review Cards */
.property-reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.property-review-card {
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.property-review-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.property-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--secondary-300), var(--secondary-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  color: white;
  font-size: var(--text-base);
  flex-shrink: 0;
}

.property-review-info {
  display: flex;
  flex-direction: column;
}

.property-review-info strong {
  font-size: var(--text-base);
  color: var(--text-primary);
}

.property-review-date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.property-review-stars {
  margin-bottom: var(--space-2);
  display: flex;
  gap: 2px;
}

.property-star {
  color: var(--neutral-300);
  font-size: var(--text-md);
}

.property-star--filled {
  color: var(--accent-500);
}

.property-review-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* --- Calendar --- */
.property-calendar-body {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.property-cal-header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.property-cal-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.property-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--space-2);
}

.property-cal-weekdays span {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  padding: var(--space-1) 0;
}

.property-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.property-cal-day {
  text-align: center;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.property-cal-day--empty {
  visibility: hidden;
}

.property-cal-day--available {
  color: var(--text-primary);
  background: var(--success-50);
}

.property-cal-day--blocked {
  color: var(--text-tertiary);
  background: var(--neutral-100);
  text-decoration: line-through;
}

.property-cal-empty {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-5);
}

.property-calendar-legend {
  display: flex;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.property-calendar-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.property-calendar-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

.property-calendar-legend-dot--available {
  background: var(--success-50);
  border: 1px solid var(--success-500);
}

.property-calendar-legend-dot--blocked {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-400);
}

/* --- Booking Card (Sidebar) --- */
.property-sidebar {
  position: sticky;
  top: 88px; /* navbar height + padding */
}

.property-booking-card {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.property-booking-price {
  margin-bottom: var(--space-5);
}

.property-booking-amount {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.property-booking-per-night {
  font-size: var(--text-base);
  color: var(--text-tertiary);
  margin-left: var(--space-1);
}

.property-booking-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.property-booking-field {
  position: relative;
}

.property-booking-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-1);
}

.property-booking-field .form-input {
  font-size: var(--text-sm);
}

.property-booking-guests-field {
  margin-bottom: var(--space-5);
}

.property-booking-guests-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: border-color var(--transition-fast);
}

.property-booking-guests-trigger:hover {
  border-color: var(--primary-400);
}

.property-booking-guests-trigger svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.property-booking-guests-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  z-index: var(--z-dropdown);
}

.property-booking-guests-dropdown.open {
  display: block;
}

.property-booking-btn {
  width: 100%;
  margin-bottom: var(--space-3);
}

.property-booking-reassurance {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-5);
}

.property-booking-breakdown {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-4);
}

.property-booking-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.property-booking-row--total {
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--text-primary);
}

/* --- Mobile Sticky Booking Bar --- */
.property-mobile-booking {
  display: none;
  position: fixed;
  bottom: 60px; /* above bottom nav */
  left: 0;
  right: 0;
  background: var(--surface-card);
  border-top: 1px solid var(--border-light);
  padding: var(--space-3) var(--space-5);
  z-index: var(--z-sticky);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  align-items: center;
  justify-content: space-between;
}

.property-mobile-booking-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.property-mobile-booking-price {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.property-mobile-booking-per-night {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* --- Similar Properties (Horizontal Scroll) --- */
.property-similar-scroll {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}

.property-similar-scroll::-webkit-scrollbar {
  height: 6px;
}

.property-similar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.property-similar-scroll::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--radius-full);
}

.property-similar-scroll .card {
  min-width: 280px;
  max-width: 300px;
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* =============================================================================
   PROPERTY DETAIL PAGE — RESPONSIVE
   ============================================================================= */

/* --- Tablet (max 1024px) --- */
@media (max-width: 1024px) {
  .property-layout {
    grid-template-columns: 1fr 320px;
    gap: var(--space-7);
  }

  .property-gallery-grid {
    height: 350px;
  }

  .property-amenities-grid {
    grid-template-columns: 1fr 1fr;
  }

  .property-rating-bar-label {
    width: 100px;
  }
}

/* --- Tablet portrait (max 768px) --- */
@media (max-width: 768px) {
  .property-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Hide desktop gallery, show mobile carousel */
  .property-gallery-grid {
    display: none;
  }

  .property-gallery-carousel {
    display: block;
  }

  .property-gallery {
    padding: 0;
  }

  .property-gallery-show-all {
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .property-title {
    font-size: var(--text-2xl);
  }

  .property-section-title {
    font-size: var(--text-xl);
  }

  .property-highlights-grid {
    grid-template-columns: 1fr;
  }

  .property-amenities-grid {
    grid-template-columns: 1fr 1fr;
  }

  .property-rating-overview {
    flex-direction: column;
    align-items: center;
  }

  .property-rating-bars {
    width: 100%;
  }

  .property-sidebar {
    position: static;
  }

  .property-mobile-booking {
    display: flex;
  }

  /* Modal adjustments for mobile */
  .property-modal {
    padding: var(--space-4);
  }

  .property-modal-nav {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  .property-modal-prev {
    left: var(--space-2);
  }

  .property-modal-next {
    right: var(--space-2);
  }
}

/* --- Mobile (max 640px) --- */
@media (max-width: 640px) {
  .property-gallery-carousel {
    height: 240px;
  }

  .property-booking-dates {
    grid-template-columns: 1fr;
  }

  .property-booking-card {
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }

  .property-amenities-grid {
    grid-template-columns: 1fr;
  }

  .property-map-placeholder {
    height: 220px;
  }

  .property-rating-circle {
    width: 80px;
    height: 80px;
  }

  .property-rating-number {
    font-size: var(--text-2xl);
  }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
  .property-gallery-carousel {
    height: 200px;
  }

  .property-booking-amount {
    font-size: var(--text-2xl);
  }

  .property-highlight-card {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .property-highlight-icon {
    width: 36px;
    height: 36px;
  }

  .property-rating-bar-label {
    width: 80px;
    font-size: var(--text-xs);
  }
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .property-gallery-carousel-track {
    transition: none;
  }

  .property-gallery-carousel-dot {
    transition: none;
  }
}


/* ============================================
   HOST DASHBOARD
   ============================================ */

/* Layout */
.host-layout {
  display: flex;
  min-height: calc(100vh - 64px);
  background-color: var(--bg-secondary);
}

/* ---- Sidebar ---- */
.host-sidebar {
  width: 260px;
  min-width: 260px;
  background-color: var(--surface-card);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  z-index: var(--z-sticky);
}

.host-sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--border-light);
}

.host-sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.host-sidebar-avatar-initials {
  color: var(--text-on-primary);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.host-sidebar-user {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.host-sidebar-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-sidebar-role {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.host-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
  flex: 1;
}

.host-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.host-sidebar-link:hover {
  background-color: var(--bg-tertiary);
  color: var(--primary-500);
}

.host-sidebar-link--active {
  color: var(--primary-500);
  background-color: var(--primary-50);
  border-left-color: var(--primary-500);
  font-weight: var(--font-semibold);
}

.host-sidebar-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.host-sidebar-link--active svg {
  opacity: 1;
}

.host-sidebar-badge {
  margin-left: auto;
  background-color: var(--error-500);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

/* Sidebar overlay (tablet) */
.host-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: calc(var(--z-fixed) - 1);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.host-sidebar-overlay--open {
  display: block;
  opacity: 1;
}

/* ---- Main content ---- */
.host-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-7);
  max-width: 1200px;
}

/* Topbar (mobile/tablet) */
.host-topbar {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-light);
}

.host-topbar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.host-topbar-toggle:hover {
  background-color: var(--bg-tertiary);
}

.host-topbar-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

/* ---- Sections ---- */
.host-section {
  display: none;
}

.host-section--active {
  display: block;
  animation: hostFadeIn 0.2s ease;
}

@keyframes hostFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.host-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.host-section-header h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

/* ---- Welcome ---- */
.host-welcome {
  margin-bottom: var(--space-6);
}

.host-welcome-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
}

.host-welcome-date {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
}

/* ---- Stats Row ---- */
.host-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.host-stat-card {
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.host-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.host-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.host-stat-icon--bookings {
  background-color: var(--primary-50);
  color: var(--primary-500);
}

.host-stat-icon--occupancy {
  background-color: var(--success-50);
  color: var(--success-500);
}

.host-stat-icon--earnings {
  background-color: var(--accent-50);
  color: var(--accent-600);
}

.host-stat-icon--rating {
  background-color: var(--secondary-50);
  color: var(--secondary-500);
}

.host-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.host-stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.host-stat-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* ---- Today Row ---- */
.host-today-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.host-today-card {
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.host-today-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  margin: 0;
}

.host-today-card-title svg {
  color: var(--primary-500);
}

.host-today-card-body {
  padding: var(--space-4) var(--space-5);
}

.host-today-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}

.host-today-item:last-child {
  border-bottom: none;
}

.host-today-item-name {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  font-size: var(--text-base);
}

.host-today-item-prop {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.host-today-empty {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-3) 0;
  margin: 0;
}

/* ---- Cards ---- */
.host-card {
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.host-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
}

.host-card-header h3 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.host-card-body {
  padding: var(--space-5);
}

.host-link {
  font-size: var(--text-sm);
  color: var(--primary-500);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.host-link:hover {
  color: var(--primary-600);
}

/* ---- Tables ---- */
.host-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.host-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.host-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  background-color: var(--bg-secondary);
}

.host-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  white-space: nowrap;
}

.host-table tbody tr:last-child td {
  border-bottom: none;
}

.host-table tbody tr:hover {
  background-color: var(--bg-tertiary);
}

.host-table-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4) !important;
  color: var(--text-tertiary);
  font-size: var(--text-base);
}

/* ---- Status Badges ---- */
.host-status-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: capitalize;
}

.host-status-badge--confirmed,
.host-status-badge--active {
  background-color: var(--success-50);
  color: var(--success-700);
}

.host-status-badge--pending {
  background-color: var(--warning-50);
  color: var(--warning-700);
}

.host-status-badge--cancelled {
  background-color: var(--error-50);
  color: var(--error-700);
}

.host-status-badge--completed,
.host-status-badge--past {
  background-color: var(--neutral-200);
  color: var(--neutral-700);
}

.host-status-badge--cancelled_guest,
.host-status-badge--cancelled_host {
  background-color: var(--error-50);
  color: var(--error-700);
}

.host-status-badge--no_show {
  background-color: var(--warning-50);
  color: var(--warning-700);
}

.host-status-badge--disputed {
  background-color: var(--error-50);
  color: var(--error-700);
}

/* ---- Booking Detail Modal ---- */
.host-booking-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop, 1040);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  justify-content: center;
  align-items: flex-start;
}

.host-booking-modal-overlay--open {
  display: flex;
}

.host-booking-modal {
  background: var(--surface-card, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,0.3));
  width: 100%;
  max-width: 560px;
  margin: auto;
  max-height: calc(100vh - var(--space-12, 48px));
  display: flex;
  flex-direction: column;
  animation: hostBookingModalIn 0.2s ease-out;
}

@keyframes hostBookingModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.host-booking-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-primary, #e5e7eb);
  flex-shrink: 0;
}

.host-booking-modal-header h3 {
  font-family: var(--font-heading, sans-serif);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary, #111);
  margin: 0;
}

.host-booking-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full, 50%);
  border: none;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
}

.host-booking-modal-close:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-primary, #111);
}

.host-booking-modal-body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  flex: 1 1 auto;
}

.host-booking-modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-primary, #e5e7eb);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3, 12px);
  flex-shrink: 0;
}

.host-booking-modal-footer:empty {
  display: none;
}

.host-booking-modal-error {
  color: var(--error-600, #dc2626);
  text-align: center;
  padding: var(--space-8) 0;
  font-size: var(--text-sm, 0.875rem);
}

/* Detail sections */
.host-booking-detail-status-section {
  text-align: center;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary, #e5e7eb);
}

.host-booking-detail-status-section .host-status-badge {
  font-size: var(--text-sm, 0.875rem);
  padding: var(--space-1) var(--space-3);
}

.host-booking-detail-section {
  margin-bottom: var(--space-5);
}

.host-booking-detail-section-title {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-semibold, 600);
  color: var(--text-tertiary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.05em);
  margin: 0 0 var(--space-3) 0;
}

.host-booking-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-secondary, #f3f4f6);
}

.host-booking-detail-row:last-child {
  border-bottom: none;
}

.host-booking-detail-label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
  flex-shrink: 0;
  margin-right: var(--space-3);
}

.host-booking-detail-value {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-medium, 500);
  color: var(--text-primary, #111);
  text-align: right;
  word-break: break-word;
}

.host-booking-detail-total {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-bold, 700);
  color: var(--primary, #0369a1);
}

.host-booking-detail-extras {
  padding-top: var(--space-2);
}

.host-booking-detail-extras .host-booking-detail-label {
  display: block;
  margin-bottom: var(--space-2);
}

.host-booking-detail-extras-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.host-booking-detail-extras-list li {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
  padding: var(--space-1) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-primary, #e5e7eb);
}

.host-booking-detail-notes {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-primary, #111);
  line-height: var(--leading-relaxed, 1.625);
  background: var(--bg-secondary, #f9fafb);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-3);
  margin: 0;
  white-space: pre-wrap;
}

.host-booking-detail-meta {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary, #9ca3af);
  text-align: right;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-secondary, #f3f4f6);
  margin-top: var(--space-3);
}

/* Clickable table rows */
.host-table tbody tr[style*="cursor"] {
  transition: background var(--transition-fast, 0.15s);
}

.host-table tbody tr[style*="cursor"]:hover {
  background: var(--bg-secondary, #f9fafb);
}

/* Mobile adjustments for booking modal */
@media (max-width: 639px) {
  .host-booking-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .host-booking-modal {
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    max-height: 90vh;
    margin: 0;
    animation: hostBookingModalSlideUp 0.25s ease-out;
  }

  @keyframes hostBookingModalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .host-booking-modal-header {
    padding: var(--space-4) var(--space-4);
  }

  .host-booking-modal-body {
    padding: var(--space-4) var(--space-4);
  }

  .host-booking-modal-footer {
    padding: var(--space-3) var(--space-4);
  }
}

/* ---- Quick Actions ---- */
.host-quick-actions {
  margin-bottom: var(--space-6);
}

.host-quick-actions h3 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

.host-quick-actions-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.host-quick-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.host-quick-action:hover {
  border-color: var(--primary-500);
  color: var(--primary-500);
  box-shadow: var(--shadow-sm);
}

.host-quick-action svg {
  color: var(--primary-500);
}

/* ---- Buttons ---- */
.host-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-body);
}

.host-btn--primary {
  background-color: var(--primary-500);
  color: var(--text-on-primary);
}

.host-btn--primary:hover {
  background-color: var(--primary-600);
  box-shadow: var(--shadow-sm);
}

.host-btn--outline {
  background-color: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

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

.host-btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* ---- Tabs ---- */
.host-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0;
}

.host-tab {
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.host-tab:hover {
  color: var(--primary-500);
}

.host-tab--active {
  color: var(--primary-500);
  border-bottom-color: var(--primary-500);
  font-weight: var(--font-semibold);
}

/* ---- Properties Grid ---- */
.host-properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

.host-property-card {
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.host-property-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.host-property-card-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.host-property-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.host-property-badge--active {
  background-color: var(--success-50);
  color: var(--success-700);
}

.host-property-badge--draft {
  background-color: var(--neutral-200);
  color: var(--neutral-700);
}

.host-property-badge--paused {
  background-color: var(--warning-50);
  color: var(--warning-700);
}

.host-property-card-body {
  padding: var(--space-4);
}

.host-property-card-name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
}

.host-property-card-city {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--space-3);
}

.host-property-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.host-property-card-rating {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ============================================================
   CALENDAR v2 — Airbnb-style redesign
   ============================================================ */

/* Container */
.cal2-container {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Toolbar */
.cal2-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-100);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cal2-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.cal2-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cal2-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.cal2-property-select {
  min-width: 200px;
  max-width: 280px;
}

/* View switcher pills */
.cal2-view-switcher {
  display: inline-flex;
  background: var(--neutral-100);
  border-radius: var(--radius-full, 9999px);
  padding: 3px;
  gap: 2px;
}

.cal2-view-btn {
  padding: 6px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cal2-view-btn:hover {
  color: var(--neutral-800);
  background: var(--neutral-200);
}

.cal2-view-btn--active {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Today button */
.cal2-today-btn {
  font-weight: 600;
}

/* Navigation */
.cal2-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cal2-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--neutral-200);
  background: var(--bg-primary);
  border-radius: 50%;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal2-nav-btn:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-300);
  color: var(--neutral-800);
}

.cal2-nav-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 160px;
  text-align: center;
}

/* Legend bar */
.cal2-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-100);
  flex-wrap: wrap;
  font-size: var(--text-xs);
}

.cal2-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--neutral-500);
  font-weight: 500;
}

.cal2-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.cal2-legend-dot--available { background: #34d399; }
.cal2-legend-dot--booked { background: #818cf8; }
.cal2-legend-dot--blocked { background: #fb7185; }
.cal2-legend-dot--today {
  background: var(--primary-600);
  border-radius: 50%;
}

.cal2-legend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.cal2-legend-badge--booking { background: #003580; }
.cal2-legend-badge--airbnb { background: #FF5A5F; }
.cal2-legend-badge--direct { background: #34d399; }

/* Layout: main + sidebar */
.cal2-layout {
  display: flex;
  position: relative;
}

.cal2-main {
  flex: 1;
  min-width: 0;
}

/* Scrollable area for continuous month scroll */
.cal2-scroll {
  max-height: calc(100vh - 280px);
  min-height: 500px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.cal2-grid {
  padding: var(--space-4) var(--space-5);
}

/* Empty message */
.cal2-empty-msg {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--neutral-400);
  font-size: var(--text-base);
}

.cal2-empty-msg svg {
  display: block;
  margin: 0 auto var(--space-3);
  color: var(--neutral-300);
}

/* ---- Month block ---- */
.cal2-month-block {
  margin-bottom: var(--space-8);
}

.cal2-month-block:last-child {
  margin-bottom: var(--space-4);
}

.cal2-month-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-800);
  padding: var(--space-1) 0 var(--space-3);
  position: sticky;
  top: 0;
  background: var(--surface-card);
  z-index: 5;
}

/* Day-of-week header */
.cal2-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-2) 0;
  position: sticky;
  top: 36px;
  background: var(--surface-card);
  z-index: 4;
}

.cal2-header-cell {
  padding: var(--space-1) 0;
}

/* Days grid */
.cal2-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Day cell */
.cal2-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--bg-primary);
  cursor: pointer;
  position: relative;
  transition: all 0.12s ease;
  min-height: 100px;
  overflow: hidden;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.cal2-cell:hover:not(.cal2-cell--past):not(.cal2-cell--empty) {
  background: var(--primary-50);
  border-color: var(--primary-200);
  z-index: 1;
}

.cal2-cell--empty {
  cursor: default;
  background: transparent;
  border: none;
  min-height: 0;
  padding: 0;
}

.cal2-cell--today {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.cal2-cell--today .cal2-day-num {
  background: var(--primary-600);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.cal2-cell--past {
  opacity: 0.3;
  cursor: default;
}

.cal2-cell--past .cal2-day-num {
  color: var(--neutral-400);
}

/* Available */
.cal2-cell--available {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

/* Booked */
.cal2-cell--booked {
  background: linear-gradient(135deg, #eef2ff 0%, #e8e8ff 100%);
  cursor: pointer;
}

/* Blocked */
.cal2-cell--blocked {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}

.cal2-cell--blocked .cal2-day-num {
  text-decoration: line-through;
  color: var(--error-500);
}

/* Selected / range */
.cal2-cell--selected {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 1px var(--primary-500);
  z-index: 2;
}

.cal2-cell--range-start,
.cal2-cell--range-end {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 1px var(--primary-500);
  z-index: 2;
}

.cal2-cell--in-range {
  background: var(--primary-50) !important;
  border-color: var(--primary-200);
}

/* Day number */
.cal2-day-num {
  font-size: 14px;
  color: var(--neutral-700);
  font-weight: 500;
  line-height: 1;
}

/* Price in cell */
.cal2-day-price {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  line-height: 1;
  margin-top: auto;
}

/* Source badge */
.cal2-source-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  position: absolute;
  top: 6px;
  right: 6px;
  color: #fff;
}

.cal2-source-badge--booking_com { background: #003580; }
.cal2-source-badge--airbnb { background: #FF5A5F; }
.cal2-source-badge--direct { background: #059669; }
.cal2-source-badge--ical { background: #d97706; }

/* Guest name */
.cal2-guest-name {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

/* Unit label */
.cal2-unit-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--neutral-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Booking bar */
.cal2-booking-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: #818cf8;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.cal2-booking-bar--pending { background: #fbbf24; }
.cal2-booking-bar--booking_com { background: #003580; }
.cal2-booking-bar--airbnb { background: #FF5A5F; }

.cal2-booking-bar--start {
  border-radius: 6px 0 0 6px;
  left: 4px;
}

.cal2-booking-bar--end {
  border-radius: 0 6px 6px 0;
  right: 4px;
}

.cal2-booking-bar--start.cal2-booking-bar--end {
  border-radius: 6px;
}

.cal2-booking-name {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
  line-height: 26px;
}

/* ---- Year view ---- */
.cal2-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.cal2-mini-month {
  background: var(--bg-primary);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color 0.15s;
}

.cal2-mini-month:hover {
  border-color: var(--primary-300);
}

.cal2-mini-month-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--neutral-700);
  margin-bottom: var(--space-2);
  text-align: center;
}

.cal2-mini-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  color: var(--neutral-400);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.cal2-mini-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal2-mini-cell {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border-radius: 3px;
  color: var(--neutral-600);
}

.cal2-mini-cell--empty { visibility: hidden; }
.cal2-mini-cell--today { background: var(--primary-600); color: #fff; font-weight: 700; }
.cal2-mini-cell--booked { background: #c7d2fe; color: #3730a3; }
.cal2-mini-cell--blocked { background: #fecdd3; color: #be123c; }
.cal2-mini-cell--available { background: #d1fae5; color: #065f46; }
.cal2-mini-cell--past { opacity: 0.3; }

/* ---- Week view ---- */
.cal2-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal2-week-cell {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-md);
  min-height: 300px;
  overflow: hidden;
  transition: border-color 0.15s;
  cursor: pointer;
}

.cal2-week-cell:hover {
  border-color: var(--primary-200);
}

.cal2-week-cell-header {
  padding: var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--neutral-100);
}

.cal2-week-day-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal2-week-day-num {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--neutral-800);
  margin-top: 2px;
}

.cal2-week-cell--today .cal2-week-day-num {
  background: var(--primary-600);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal2-week-cell-body {
  padding: var(--space-2);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cal2-week-cell--past {
  opacity: 0.3;
}

.cal2-week-cell--booked {
  background: linear-gradient(135deg, #eef2ff 0%, #e8e8ff 100%);
}

.cal2-week-cell--blocked {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}

.cal2-week-cell--available {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

.cal2-week-booking-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #818cf8;
}

.cal2-week-booking-chip--booking_com { background: #003580; }
.cal2-week-booking-chip--airbnb { background: #FF5A5F; }
.cal2-week-booking-chip--pending { background: #fbbf24; color: #78350f; }

.cal2-week-price {
  font-size: 14px;
  font-weight: 700;
  color: #059669;
  margin-top: auto;
  padding: var(--space-1) 0;
}

.cal2-week-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-400);
  text-align: center;
  padding: var(--space-2);
}

.cal2-week-status--blocked {
  color: #fb7185;
}

/* ---- Sidebar panel v2 ---- */
.cal2-sidebar {
  width: 0;
  overflow: hidden;
  border-left: 0 solid var(--border-light);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease, border-left-width 0.25s ease;
  flex-shrink: 0;
}

.cal2-sidebar--open {
  width: 360px;
  border-left: 1px solid var(--neutral-100);
}

.cal2-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-100);
}

.cal2-sidebar-header h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.cal2-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--neutral-100);
  border-radius: 50%;
  color: var(--neutral-500);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.cal2-sidebar-close:hover {
  background: var(--neutral-200);
  color: var(--neutral-700);
}

.cal2-sidebar-body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
  overflow-y: auto;
}

.cal2-sidebar-field {
  margin-bottom: var(--space-4);
}

.cal2-sidebar-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-500);
  margin-bottom: var(--space-1);
}

.cal2-hint {
  font-size: var(--text-xs);
  color: var(--neutral-400);
  margin: 0 0 var(--space-3);
}

/* Toggle group (open/close) */
.cal2-toggle-group {
  display: flex;
  gap: var(--space-2);
}

.cal2-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--text-sm);
}

.cal2-toggle input[type="radio"] {
  accent-color: var(--primary-500);
}

.cal2-toggle--open .cal2-toggle-label {
  color: #059669;
  font-weight: 600;
}

.cal2-toggle--closed .cal2-toggle-label {
  color: #e11d48;
  font-weight: 600;
}

/* Price input */
.cal2-price-input {
  display: flex;
  align-items: center;
}

.cal2-price-currency {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-right: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-weight: 600;
  color: var(--neutral-500);
  font-size: var(--text-sm);
}

.cal2-price-input .host-input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  flex: 1;
}

/* Status indicator */
.cal2-sidebar-status {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--space-4);
}

.cal2-sidebar-status--available { background: #ecfdf5; color: #059669; }
.cal2-sidebar-status--booked { background: #eef2ff; color: #6366f1; }
.cal2-sidebar-status--blocked { background: #fff1f2; color: #e11d48; }

/* Booking detail card */
.cal2-booking-detail {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.cal2-booking-detail h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #4338ca;
}

.cal2-booking-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  padding: 3px 0;
}

.cal2-booking-detail-row .label {
  color: var(--neutral-500);
}

.cal2-booking-detail-row .value {
  font-weight: 600;
  color: var(--neutral-800);
}

.cal2-booking-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: #fff;
}

.cal2-booking-source--booking_com { background: #003580; }
.cal2-booking-source--airbnb { background: #FF5A5F; }
.cal2-booking-source--direct { background: #059669; }

/* Sidebar footer */
.cal2-sidebar-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--neutral-100);
}

.cal2-sidebar-footer .host-btn {
  flex: 1;
}

/* ---- Messages ---- */
.host-messages-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-height: 500px;
  overflow: hidden;
}

.host-threads {
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
  max-height: 500px;
}

.host-thread {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.host-thread:hover {
  background-color: var(--bg-tertiary);
}

.host-thread--unread {
  background-color: var(--primary-50);
}

.host-thread-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-300), var(--primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-primary);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.host-thread-info {
  flex: 1;
  min-width: 0;
}

.host-thread-name {
  display: block;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-thread-preview {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-thread-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.host-thread-badge {
  background-color: var(--error-500);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: var(--font-bold);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
}

.host-conversation {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.host-conversation-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
  gap: var(--space-3);
  padding: var(--space-8);
}

.host-conversation-empty p {
  margin: 0;
  font-size: var(--text-base);
}

.host-conversation-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 420px;
}

.host-message {
  max-width: 70%;
  align-self: flex-start;
}

.host-message--mine {
  align-self: flex-end;
}

.host-message-text {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.host-message--mine .host-message-text {
  background-color: var(--primary-500);
  color: var(--text-on-primary);
}

.host-message-time {
  display: block;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  text-align: right;
}

.host-conversation-reply {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-light);
  align-items: flex-end;
}

.host-conversation-reply .host-textarea {
  flex: 1;
}

/* ---- Reviews ---- */
.host-reviews-overview {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.host-reviews-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 100px;
}

.host-reviews-avg-score {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1;
}

.host-reviews-avg-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.host-reviews-stars {
  display: flex;
  gap: 2px;
  color: var(--accent-500);
}

.host-reviews-count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.host-reviews-subcategories {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.host-review-subcat-row {
  display: grid;
  grid-template-columns: 160px 1fr 36px;
  align-items: center;
  gap: var(--space-3);
}

.host-review-subcat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.host-review-subcat-bar {
  height: 8px;
  background: var(--neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.host-review-subcat-bar--sm {
  height: 6px;
}

.host-review-subcat-bar-fill {
  height: 100%;
  background: var(--primary-500);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.host-review-subcat-val {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-align: right;
}

.host-reviews-loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.host-reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.host-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
}

.host-error-state svg {
  color: var(--danger-400);
}

.host-error-state p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.host-empty-state-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

@media (max-width: 640px) {
  .host-reviews-overview {
    flex-direction: column;
    align-items: stretch;
  }
  .host-reviews-avg {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-3);
    min-width: auto;
  }
  .host-review-subcat-row {
    grid-template-columns: 120px 1fr 32px;
  }
}

/* ---- Earnings ---- */
.host-earnings-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.host-earnings-card {
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.host-earnings-card-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.host-earnings-card-value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.host-earnings-card--gross {
  border-top: 3px solid var(--primary-500);
}

.host-earnings-card--fees {
  border-top: 3px solid var(--warning-500);
}

.host-earnings-card--net {
  border-top: 3px solid var(--success-500);
}

.host-chart-placeholder {
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-height: 280px;
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.host-chart-empty {
  color: var(--text-tertiary);
  font-size: var(--text-base);
}

/* ---- Settings / Forms ---- */
.host-form-avatar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.host-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-primary);
  font-weight: var(--font-bold);
  font-size: var(--text-2xl);
}

.host-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.host-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.host-form-group--full {
  grid-column: 1 / -1;
}

.host-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.host-input,
.host-textarea,
.host-select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  font-family: var(--font-body);
}

.host-input:focus,
.host-textarea:focus,
.host-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.host-textarea {
  resize: vertical;
  min-height: 40px;
}

.host-form-actions {
  margin-top: var(--space-5);
  display: flex;
  justify-content: flex-end;
}

/* Toggle switches */
.host-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
}

.host-toggle-row:last-child {
  border-bottom: none;
}

.host-toggle-label {
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.host-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.host-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.host-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--neutral-300);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
}

.host-toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: var(--neutral-0);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.host-toggle input:checked + .host-toggle-slider {
  background-color: var(--primary-500);
}

.host-toggle input:checked + .host-toggle-slider::before {
  transform: translateX(22px);
}

/* Form hint (small help text below input) */
.host-form-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}

/* Amenity groups */
.host-amenity-group { margin-bottom: var(--space-4); }
.host-amenity-group h5 { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--border-color, #e5e7eb); }
.host-amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.host-amenity-check { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); cursor: pointer; padding: 4px 0; }
.host-amenity-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-500); cursor: pointer; }

/* Toggle description text */
.host-toggle-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}

/* Payout status */
.host-payout-status {
  padding: var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

/* ---- Empty States ---- */
.host-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  gap: var(--space-4);
}

.host-empty-state p {
  margin: 0;
  font-size: var(--text-base);
}

/* ---- Skeleton Loading ---- */
.host-skeleton {
  background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: hostSkeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.host-skeleton--text {
  display: inline-block;
  width: 80px;
  height: 24px;
}

.host-skeleton--row {
  height: 44px;
  width: 100%;
  margin-bottom: var(--space-2);
}

.host-skeleton--card {
  height: 260px;
  width: 100%;
  border-radius: var(--radius-md);
}

.host-skeleton--calendar {
  height: 380px;
  width: 100%;
  border-radius: var(--radius-md);
}

.host-skeleton--chart {
  height: 260px;
  width: 100%;
  border-radius: var(--radius-md);
}

@keyframes hostSkeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- Mobile Bottom Nav ---- */
.host-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--surface-card);
  border-top: 1px solid var(--border-light);
  z-index: var(--z-fixed);
  padding: var(--space-1) 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.host-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-1);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: var(--font-medium);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  flex: 1;
  transition: color var(--transition-fast);
  position: relative;
}

.host-bottom-nav-item:hover,
.host-bottom-nav-item--active {
  color: var(--primary-500);
}

.host-bottom-badge {
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translateX(14px);
  background-color: var(--error-500);
  color: var(--text-inverse);
  font-size: 9px;
  font-weight: var(--font-bold);
  padding: 1px 5px;
  border-radius: var(--radius-full);
  min-width: 16px;
  text-align: center;
}

/* ---- More Menu (Mobile) ---- */
.host-more-menu {
  display: none;
}

.host-more-menu--open {
  display: block;
}

.host-more-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: var(--z-modal-backdrop);
}

.host-more-menu-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--surface-card);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  z-index: var(--z-modal);
  padding: var(--space-4) 0 var(--space-6) 0;
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
}

.host-more-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.host-more-menu-item:hover {
  background-color: var(--bg-tertiary);
}

.host-more-menu-item svg {
  color: var(--text-secondary);
}

/* ---- Period selector ---- */
.host-period-selector {
  display: flex;
  gap: var(--space-3);
}


/* ============================================
   HOST DASHBOARD -- RESPONSIVE
   ============================================ */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .host-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-fixed);
  }

  .host-sidebar--open {
    transform: translateX(0);
  }

  .host-topbar {
    display: flex;
  }

  .host-main {
    padding: var(--space-5);
  }

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

  .host-today-row {
    grid-template-columns: 1fr;
  }

  .host-messages-layout {
    grid-template-columns: 280px 1fr;
  }

  .host-form-grid {
    grid-template-columns: 1fr;
  }

  .host-form-group--full {
    grid-column: 1;
  }
}

/* Mobile (below 768px) */
@media (max-width: 767px) {
  .host-layout {
    flex-direction: column;
    padding-bottom: 64px;
  }

  .host-sidebar {
    display: none;
  }

  .host-sidebar-overlay {
    display: none !important;
  }

  .host-topbar {
    display: flex;
  }

  .host-topbar-toggle {
    display: none;
  }

  .host-main {
    padding: var(--space-4);
  }

  .host-welcome-title {
    font-size: var(--text-2xl);
  }

  .host-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .host-stat-card {
    padding: var(--space-4);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .host-stat-icon {
    width: 40px;
    height: 40px;
  }

  .host-stat-value {
    font-size: var(--text-xl);
  }

  .host-today-row {
    grid-template-columns: 1fr;
  }

  .host-quick-actions-row {
    flex-direction: column;
  }

  .host-quick-action {
    width: 100%;
    justify-content: center;
  }

  .host-properties-grid {
    grid-template-columns: 1fr;
  }

  .host-messages-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .host-conversation {
    display: none;
  }

  .host-threads {
    border-right: none;
    max-height: none;
  }

  .host-earnings-summary {
    grid-template-columns: 1fr;
  }

  .host-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .host-bottom-nav {
    display: flex;
    justify-content: space-around;
  }

  .host-form-grid {
    grid-template-columns: 1fr;
  }

  .host-form-group--full {
    grid-column: 1;
  }

  /* Hide existing site bottom nav on host dashboard */
  body .bottom-nav {
    display: none;
  }
}

/* Small mobile (375px) */
@media (max-width: 400px) {
  .host-main {
    padding: var(--space-3);
  }

  .host-stats-row {
    grid-template-columns: 1fr;
  }

  .host-stat-card {
    flex-direction: row;
    align-items: center;
  }
}

/* Wide desktop (1440px+) */
@media (min-width: 1440px) {
  .host-main {
    padding: var(--space-9) var(--space-11);
  }

  .host-stats-row {
    gap: var(--space-5);
  }
}

/* ============================================
   BOOKING CHECKOUT
   ============================================ */

/* --- Checkout Container --- */
.booking-checkout {
  max-width: var(--max-w-xl);
  margin: 0 auto;
  padding: var(--space-4);
}

/* --- Progress Bar (Desktop) --- */
.booking-progress {
  margin-bottom: var(--space-7);
}

.booking-progress-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-4) var(--space-6);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.booking-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  flex-shrink: 0;
}

.booking-progress-circle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: all var(--transition-base);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
}

.booking-progress-check {
  display: none;
}

.booking-progress-step.active .booking-progress-circle {
  border-color: var(--primary-500);
  background: var(--primary-500);
  color: var(--text-on-primary);
}

.booking-progress-step.completed .booking-progress-circle {
  border-color: var(--success-500);
  background: var(--success-500);
  color: var(--text-inverse);
}

.booking-progress-step.completed .booking-progress-num {
  display: none;
}

.booking-progress-step.completed .booking-progress-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-progress-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
  white-space: nowrap;
  transition: color var(--transition-base);
}

.booking-progress-step.active .booking-progress-label {
  color: var(--primary-500);
  font-weight: var(--font-semibold);
}

.booking-progress-step.completed .booking-progress-label {
  color: var(--success-500);
}

.booking-progress-line {
  flex: 1;
  height: 2px;
  background: var(--border-default);
  min-width: 40px;
  margin: 0 var(--space-2);
  margin-bottom: var(--space-5);
  transition: background var(--transition-base);
}

.booking-progress-line.filled {
  background: var(--success-500);
}

/* Progress dots (mobile only) */
.booking-progress-dots {
  display: none;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.booking-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border-default);
  transition: all var(--transition-base);
}

.booking-progress-dot.active {
  background: var(--primary-500);
  transform: scale(1.3);
}

.booking-progress-dot.completed {
  background: var(--success-500);
}

/* --- Main Layout --- */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-7);
  align-items: start;
}

/* --- Wizard Steps --- */
.booking-wizard {
  min-width: 0;
}

.booking-step-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-5);
  color: var(--text-primary);
}

.booking-step-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
}

/* --- Loading / Error --- */
.booking-loading {
  padding: var(--space-6);
}

.booking-error .empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.booking-error .empty-state p {
  margin: var(--space-4) 0;
  color: var(--text-secondary);
}

/* --- Property Card (Step 1) --- */
.booking-property-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.booking-property-img {
  width: 120px;
  height: 90px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--neutral-200);
  flex-shrink: 0;
}

.booking-property-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.booking-property-info h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-property-loc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.booking-property-rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.booking-rating-score {
  background: var(--primary-500);
  color: var(--text-on-primary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.booking-rating-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- Dates Section --- */
.booking-dates-section,
.booking-guests-section,
.booking-unit-section {
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}

.booking-dates-section h4,
.booking-guests-section h4,
.booking-unit-section h4,
.booking-billing h4,
.booking-cancel-policy h4,
.booking-payment-methods h4,
.booking-special-requests h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.booking-dates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.booking-date-field label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  font-weight: var(--font-medium);
}

.booking-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.booking-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.booking-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-base);
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.booking-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.booking-nights-info {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

/* --- Guest Counters --- */
.booking-guests-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.booking-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}

.booking-guest-label span {
  font-size: var(--text-base);
  color: var(--text-primary);
}

.booking-guest-counter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.booking-counter-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}

.booking-counter-btn:hover {
  border-color: var(--primary-500);
  color: var(--primary-500);
  background: var(--primary-50);
}

.booking-counter-btn--sm {
  width: 28px;
  height: 28px;
  font-size: var(--text-sm);
}

.booking-counter-val {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  min-width: 24px;
  text-align: center;
  color: var(--text-primary);
}

/* --- Unit Selection --- */
.booking-units-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.booking-unit-card {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.booking-unit-card:hover {
  border-color: var(--primary-300);
}

.booking-unit-card.selected {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.booking-unit-name {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.booking-unit-details {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- Step Actions --- */
.booking-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  gap: var(--space-3);
}

.booking-btn-next,
.booking-btn-back,
.booking-btn-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
}

.booking-btn-confirm {
  padding: var(--space-4) var(--space-7);
  font-size: var(--text-md);
}

.booking-btn-confirm.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* --- Extras (Step 2) --- */
.booking-extras-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.booking-extra-card {
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.booking-extra-card:hover {
  box-shadow: var(--shadow-sm);
}

.booking-extra-card.mandatory {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.booking-extra-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.booking-extra-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.booking-extra-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-500);
}

.booking-extra-text {
  flex: 1;
  min-width: 0;
}

.booking-extra-name {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.booking-extra-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.booking-extra-price {
  font-size: var(--text-sm);
  color: var(--primary-500);
  font-weight: var(--font-semibold);
}

.booking-extra-mandatory-tag {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--success-500);
  background: var(--success-50);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.booking-extra-toggle-wrap {
  flex-shrink: 0;
}

.booking-extra-qty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.booking-extra-qty-val {
  min-width: 20px;
  text-align: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.booking-extras-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
}

/* --- Toggle Switch --- */
.booking-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.booking-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.booking-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--neutral-300);
  border-radius: var(--radius-full);
  transition: background var(--transition-base);
}

.booking-toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--neutral-0);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.booking-toggle input:checked + .booking-toggle-slider {
  background: var(--primary-500);
}

.booking-toggle input:checked + .booking-toggle-slider::before {
  transform: translateX(22px);
}

/* --- Rules (Step 3) --- */
.booking-rules-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.booking-rule-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.booking-rule-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.booking-rule-text {
  flex: 1;
  min-width: 0;
}

.booking-rule-label {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-size: var(--text-sm);
  margin-bottom: 2px;
}

.booking-rule-value {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- Checkbox --- */
.booking-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.booking-checkbox-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.booking-checkbox-custom {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  margin-top: 1px;
}

.booking-checkbox-label input:checked + .booking-checkbox-custom {
  background: var(--primary-500);
  border-color: var(--primary-500);
}

.booking-checkbox-label input:checked + .booking-checkbox-custom::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid var(--neutral-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.booking-rules-accept,
.booking-terms-accept {
  padding: var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-4);
}

.booking-rules-error,
.booking-terms-error {
  color: var(--error-500);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  margin-left: calc(22px + var(--space-3));
}

/* --- Special Requests --- */
.booking-special-requests {
  margin-bottom: var(--space-4);
}

/* --- Payment (Step 4) --- */
.booking-payment-methods {
  margin-bottom: var(--space-5);
}

.booking-payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.booking-payment-option {
  display: block;
  cursor: pointer;
}

.booking-payment-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.booking-payment-option-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.booking-payment-option-inner:hover {
  border-color: var(--primary-300);
}

.booking-payment-option.selected .booking-payment-option-inner,
.booking-payment-option input:checked ~ .booking-payment-option-inner {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

/* Card form */
.booking-card-form {
  margin-bottom: var(--space-5);
}

.booking-card-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.booking-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.booking-field label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

/* Redirect info */
.booking-redirect-info {
  margin-bottom: var(--space-5);
}

.booking-redirect-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--info-50);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.booking-redirect-msg svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Billing */
.booking-billing {
  margin-bottom: var(--space-5);
}

.booking-billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Cancellation policy */
.booking-cancel-policy {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.booking-cancel-policy p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Security badges */
.booking-security {
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.booking-security-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-2);
}

.booking-security-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.booking-no-charge {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* --- Sidebar --- */
.booking-sidebar {
  position: sticky;
  top: 80px;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.booking-sidebar-toggle {
  display: none;
}

.booking-sidebar-content {
  padding: var(--space-5);
}

.booking-sidebar-property {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.booking-sidebar-img {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--neutral-200);
  flex-shrink: 0;
}

.booking-sidebar-info h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0 0 2px;
  color: var(--text-primary);
}

.booking-sidebar-info span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Sidebar dates */
.booking-sidebar-dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.booking-sidebar-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.booking-sidebar-date-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.booking-sidebar-date-val {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.booking-sidebar-date-arrow {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

/* Sidebar breakdown */
.booking-sidebar-breakdown {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}

.booking-sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.booking-sidebar-row span:last-child {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.booking-sidebar-discount span:last-child {
  color: var(--success-500);
}

/* Sidebar coupon */
.booking-sidebar-coupon {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}

.booking-sidebar-coupon label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
}

.booking-coupon-input-wrap {
  display: flex;
  gap: var(--space-2);
}

.booking-coupon-input-wrap .booking-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  text-transform: uppercase;
}

.booking-coupon-input-wrap .btn {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.booking-coupon-msg {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  color: var(--error-500);
}

.booking-coupon-msg.success {
  color: var(--success-500);
}

/* Sidebar total */
.booking-sidebar-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0 var(--space-2);
}

.booking-sidebar-total span:first-child {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.booking-sidebar-total span:last-child {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

/* --- Success State --- */
.booking-success-content {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.booking-success-icon {
  margin-bottom: var(--space-5);
}

.booking-success-content h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.booking-success-content p {
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  font-size: var(--text-lg);
}

.booking-success-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

/* --- Toast Notification --- */
.booking-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  z-index: var(--z-toast);
  opacity: 0;
  transition: all var(--transition-slow);
  max-width: 90%;
  text-align: center;
}

.booking-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.booking-toast--error {
  background: var(--error-500);
  color: var(--neutral-0);
  box-shadow: var(--shadow-lg);
}

/* --- Shake Animation --- */
@keyframes booking-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake {
  animation: booking-shake 0.6s ease;
}

/* --- Skeleton (booking-specific) --- */
.booking-loading .skeleton-block {
  background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: booking-skeleton-loading 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes booking-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   BOOKING CHECKOUT — TABLET (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .booking-layout {
    grid-template-columns: 1fr 340px;
    gap: var(--space-5);
  }

  .booking-progress-inner {
    padding: var(--space-3) var(--space-4);
  }

  .booking-progress-label {
    font-size: 11px;
  }
}

/* ============================================
   BOOKING CHECKOUT — MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {
  .booking-checkout {
    padding: var(--space-3);
  }

  /* Progress: hide desktop, show dots */
  .booking-progress-inner {
    display: none;
  }

  .booking-progress-dots {
    display: flex;
  }

  /* Stack layout */
  .booking-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Sidebar becomes collapsible at top */
  .booking-sidebar {
    position: relative;
    top: 0;
    order: -1;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
  }

  .booking-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4);
    background: var(--surface-card);
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
  }

  .booking-sidebar-toggle svg {
    transition: transform var(--transition-base);
  }

  .booking-sidebar-toggle.open svg {
    transform: rotate(180deg);
  }

  .booking-sidebar-toggle-total {
    font-weight: var(--font-bold);
    color: var(--primary-500);
    margin-left: auto;
    margin-right: var(--space-2);
  }

  .booking-sidebar-content {
    display: none;
    padding: 0 var(--space-4) var(--space-4);
  }

  .booking-sidebar-content.open {
    display: block;
  }

  /* Property card responsive */
  .booking-property-card {
    flex-direction: column;
  }

  .booking-property-img {
    width: 100%;
    height: 160px;
  }

  /* Dates grid stack */
  .booking-dates-grid {
    grid-template-columns: 1fr;
  }

  /* Payment options stack */
  .booking-payment-options {
    grid-template-columns: 1fr;
  }

  /* Card form */
  .booking-card-row {
    grid-template-columns: 1fr;
  }

  /* Billing */
  .booking-billing-grid {
    grid-template-columns: 1fr;
  }

  /* Rules grid to single column */
  .booking-rules-list {
    grid-template-columns: 1fr;
  }

  /* Step actions */
  .booking-step-actions {
    flex-direction: column-reverse;
    gap: var(--space-3);
  }

  .booking-btn-next,
  .booking-btn-back,
  .booking-btn-confirm {
    width: 100%;
    justify-content: center;
  }

  /* Step title */
  .booking-step-title {
    font-size: var(--text-xl);
  }

  /* Sidebar total on mobile */
  .booking-sidebar-total span:last-child {
    font-size: var(--text-lg);
  }

  /* Success */
  .booking-success-content {
    padding: var(--space-8) var(--space-4);
  }

  .booking-success-content h2 {
    font-size: var(--text-2xl);
  }

  /* Toast position above bottom nav */
  .booking-toast {
    bottom: 80px;
  }
}

/* ============================================================
   SETUP WIZARD
   ============================================================ */
.wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.wizard-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--neutral-200);
}

.wizard-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
}

.wizard-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--neutral-500);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.wizard-close:hover {
  color: var(--neutral-900);
}

/* Progress */
.wizard-progress {
  height: 4px;
  background: var(--neutral-200);
}

.wizard-progress-bar {
  height: 100%;
  background: var(--primary-600);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.wizard-steps-labels {
  display: flex;
  padding: var(--space-3) var(--space-6);
  gap: var(--space-2);
  overflow-x: auto;
  border-bottom: 1px solid var(--neutral-100);
}

.wizard-step-label {
  font-size: var(--text-xs);
  color: var(--neutral-400);
  white-space: nowrap;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.wizard-step-label--active {
  color: var(--primary-700);
  background: var(--primary-50);
  font-weight: 600;
}

.wizard-step-label--done {
  color: var(--success-700);
}

/* Steps */
.wizard-step {
  display: none;
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  max-height: calc(90vh - 200px);
}

.wizard-step--active {
  display: block;
}

.wizard-step-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0 0 var(--space-5) 0;
}

.wizard-subtitle {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--neutral-800);
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-200);
}

/* Fields */
.wizard-field {
  margin-bottom: var(--space-4);
}

.wizard-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.wizard-field-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.wizard-field-row--4 {
  grid-template-columns: 1fr 1fr auto auto;
}

.wizard-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: var(--space-1);
}

.wizard-input,
.wizard-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--neutral-900);
  background: var(--surface-0, #fff);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.wizard-input:focus,
.wizard-textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.wizard-textarea {
  resize: vertical;
  min-height: 80px;
}

.wizard-hint {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: var(--space-1);
}

.wizard-map-container {
  margin-bottom: var(--space-2);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wizard-map-container .leaflet-container {
  font-family: inherit;
}

.wizard-char-count {
  font-size: var(--text-xs);
  color: var(--neutral-400);
  float: right;
  margin-top: var(--space-1);
}

.wizard-error {
  font-size: var(--text-xs);
  color: var(--danger-600);
  margin-top: var(--space-1);
  min-height: 1em;
}

/* Type cards (radio grid) */
.wizard-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.wizard-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.wizard-type-card:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.wizard-type-card input[type="radio"] {
  display: none;
}

.wizard-type-card:has(input:checked) {
  border-color: var(--primary-600);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.wizard-type-card span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-700);
}

.wizard-type-card svg {
  color: var(--neutral-500);
}

.wizard-type-card:has(input:checked) svg {
  color: var(--primary-600);
}

/* Radio cards (booking type) */
.wizard-radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.wizard-radio-card {
  display: flex;
  padding: var(--space-4);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
}

.wizard-radio-card:hover {
  border-color: var(--primary-300);
}

.wizard-radio-card input[type="radio"] {
  display: none;
}

.wizard-radio-card:has(input:checked) {
  border-color: var(--primary-600);
  background: var(--primary-50);
}

.wizard-radio-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.wizard-radio-card-body strong {
  font-size: var(--text-sm);
  color: var(--neutral-900);
}

.wizard-radio-card-body span {
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

/* Units */
.wizard-unit-row {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  position: relative;
}

.wizard-unit-row .wizard-field-row {
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: end;
}

.wizard-unit-remove {
  background: none;
  border: none;
  color: var(--danger-500);
  font-size: 24px;
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
  align-self: end;
  margin-bottom: var(--space-4);
}

.wizard-unit-remove:hover {
  color: var(--danger-700);
}

/* Room rows (Step 3 per_room) */
.wizard-room-row {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.wizard-room-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-100);
  border-bottom: 1px solid var(--neutral-200);
}

.wizard-room-row-title {
  font-size: var(--text-sm);
  color: var(--neutral-700);
}

.wizard-room-remove {
  background: none;
  border: none;
  color: var(--danger-400);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color 0.2s;
}

.wizard-room-remove:hover {
  color: var(--danger-600);
}

.wizard-room-row-body {
  padding: var(--space-3);
}

.wizard-room-row-body .wizard-field-row {
  grid-template-columns: 2fr 1fr 1fr;
}

/* Toggle switch */
.wizard-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.wizard-toggle input[type="checkbox"] {
  display: none;
}

.wizard-toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--neutral-300);
  border-radius: 12px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.wizard-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.wizard-toggle input:checked + .wizard-toggle-slider {
  background: var(--primary-500);
}

.wizard-toggle input:checked + .wizard-toggle-slider::after {
  transform: translateX(20px);
}

.wizard-toggle-text {
  font-size: var(--text-sm);
  color: var(--neutral-600);
}

/* Wizard tabs (for room amenities / room photos) */
.wizard-tab-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--neutral-600);
  transition: all 0.2s;
  margin-right: var(--space-1);
}

.wizard-tab-btn--active {
  background: white;
  color: var(--primary-600);
  font-weight: 600;
  border-color: var(--primary-300);
  border-bottom: 2px solid white;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

.wizard-room-amenities-tabs,
.wizard-room-photo-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--neutral-200);
  margin-bottom: 0;
}

.wizard-room-amenities-panels,
.wizard-room-photo-panels {
  border: 1px solid var(--neutral-200);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-3);
  background: white;
}

.wizard-room-amenity-panel {
  max-height: 350px;
  overflow-y: auto;
}

/* Summary room cards */
.wizard-summary-room-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.wizard-summary-room-card strong {
  color: var(--neutral-800);
}

.wizard-summary-room-card span {
  color: var(--neutral-600);
}

.wizard-summary-room-extra {
  color: var(--primary-600) !important;
  font-size: var(--text-xs);
}

.wizard-summary-sub {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  margin: var(--space-2) 0 var(--space-1);
}

.wizard-subtitle--mt {
  margin-top: var(--space-6);
}

.wizard-hint--muted {
  color: var(--neutral-400);
  font-style: italic;
}

.wizard-field--grow {
  flex: 2;
}

/* Bed rows */
.wizard-beds-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.wizard-bed-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.wizard-bed-row .wiz-bed-type-select {
  flex: 2;
  min-width: 0;
}

.wizard-bed-x {
  color: var(--neutral-400);
  font-size: var(--text-lg);
  font-weight: 300;
}

.wizard-bed-row .wiz-bed-qty-select {
  width: 70px;
  flex-shrink: 0;
}

.wizard-bed-remove {
  background: none;
  border: none;
  color: var(--neutral-400);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.2s;
}

.wizard-bed-remove:hover {
  color: var(--danger-500);
}

.wizard-btn-add-bed {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}

.wizard-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px dashed var(--primary-400);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--primary-600);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.wizard-btn-outline:hover {
  background: var(--primary-50);
  border-style: solid;
}

/* Amenities */
.wizard-amenities {
  max-height: 400px;
  overflow-y: auto;
}

.wizard-amenity-cat {
  border-bottom: 1px solid var(--neutral-100);
}

.wizard-amenity-cat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-700);
}

.wizard-amenity-cat-toggle svg {
  transition: transform 0.2s;
}

.wizard-amenity-cat--open .wizard-amenity-cat-toggle svg {
  transform: rotate(180deg);
}

.wizard-amenity-cat-items {
  display: none;
  padding: 0 0 var(--space-3) var(--space-2);
  flex-wrap: wrap;
  gap: var(--space-1);
}

.wizard-amenity-cat--open .wizard-amenity-cat-items {
  display: flex;
}

.wizard-amenity-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.wizard-amenity-item:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
}

.wizard-amenity-item:has(input:checked) {
  background: var(--primary-100);
  border-color: var(--primary-500);
  color: var(--primary-800);
}

.wizard-amenity-item input[type="checkbox"] {
  display: none;
}

/* Photos */
.wizard-photo-upload {
  border: 2px dashed var(--neutral-300);
  border-radius: var(--radius-lg);
  transition: all 0.2s;
}

.wizard-photo-upload--dragover {
  border-color: var(--primary-400);
  background: var(--primary-50);
}

.wizard-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  cursor: pointer;
  gap: var(--space-2);
  color: var(--neutral-400);
}

.wizard-photo-placeholder span {
  font-size: var(--text-sm);
}

.wizard-photo-count {
  font-size: var(--text-xs);
  font-weight: 600;
}

.wizard-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.wizard-photo-thumb {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--neutral-200);
}

.wizard-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wizard-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Summary */
.wizard-summary {
  display: grid;
  gap: var(--space-4);
}

.wizard-summary-section {
  background: var(--neutral-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.wizard-summary-section h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
}

.wizard-summary-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.wizard-summary-dl dt {
  color: var(--neutral-500);
  font-weight: 500;
}

.wizard-summary-dl dd {
  color: var(--neutral-900);
  margin: 0;
}

.wizard-publish-note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--warning-50, #FFFBEB);
  border: 1px solid var(--warning-200, #FDE68A);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}

.wizard-publish-note svg {
  flex-shrink: 0;
  color: var(--warning-600, #D97706);
}

.wizard-publish-note p {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  margin: 0;
}

/* Footer */
.wizard-footer {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--neutral-200);
  background: var(--bg-primary);
}

.wizard-footer-spacer {
  flex: 1;
}

.wizard-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.wizard-btn--primary {
  background: var(--primary-600);
  color: #fff;
}

.wizard-btn--primary:hover {
  background: var(--primary-700);
}

.wizard-btn--secondary {
  background: var(--neutral-100);
  color: var(--neutral-700);
}

.wizard-btn--secondary:hover {
  background: var(--neutral-200);
}

/* Loading */
.wizard-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.9);
  z-index: 10;
  font-size: var(--text-sm);
  color: var(--neutral-600);
}

.wizard-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--neutral-200);
  border-top-color: var(--primary-600);
  border-radius: 50%;
  animation: wizSpin 0.8s linear infinite;
}

@keyframes wizSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   CALENDAR v2 — Responsive overrides
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .cal2-sidebar--open {
    width: 300px;
  }

  .cal2-year-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cal2-cell {
    min-height: 80px;
    padding: 6px 8px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cal2-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }

  .cal2-toolbar-left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .cal2-property-select {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .cal2-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .cal2-nav-label {
    min-width: 120px;
    font-size: var(--text-sm);
  }

  .cal2-layout {
    flex-direction: column;
  }

  .cal2-sidebar--open {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--neutral-100);
  }

  .cal2-grid {
    padding: var(--space-3);
  }

  .cal2-cell {
    min-height: 70px;
    padding: 4px 6px;
  }

  .cal2-cell--today .cal2-day-num {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .cal2-day-num { font-size: 12px; }
  .cal2-day-price { font-size: 10px; }
  .cal2-booking-bar { height: 20px; }
  .cal2-booking-name { font-size: 9px; line-height: 20px; }
  .cal2-source-badge { font-size: 7px; padding: 1px 3px; }
  .cal2-guest-name { font-size: 9px; }

  .cal2-year-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .cal2-week-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .cal2-week-cell {
    min-height: 120px;
  }

  .cal2-week-cell-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-align: left;
    border-bottom: 1px solid var(--neutral-100);
  }

  .cal2-legend {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
  }

  .cal2-legend-item--source { display: none; }
}

/* Small mobile */
@media (max-width: 480px) {
  .cal2-cell {
    min-height: 58px;
    padding: 3px 4px;
  }

  .cal2-day-num { font-size: 11px; }
  .cal2-day-price { font-size: 9px; }
  .cal2-booking-bar { height: 18px; }
  .cal2-booking-name { font-size: 8px; line-height: 18px; }
  .cal2-source-badge { display: none; }
  .cal2-guest-name { font-size: 8px; }
  .cal2-unit-label { display: none; }

  .cal2-view-btn {
    padding: 5px 10px;
    font-size: 12px;
  }

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

/* ============================================================
   HOST REVIEWS
   ============================================================ */
.host-review-card {
  background: var(--bg-primary);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.host-review-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

.host-review-guest {
  font-size: var(--text-sm);
  color: var(--neutral-900);
}

.host-review-prop {
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

.host-review-rating {
  color: var(--warning-500);
  font-size: var(--text-base);
}

.host-review-date {
  font-size: var(--text-xs);
  color: var(--neutral-400);
  margin-left: auto;
}

.host-review-comment {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1.5;
  margin: 0 0 var(--space-3) 0;
}

.host-review-reply {
  background: var(--neutral-50);
  border-left: 3px solid var(--primary-400);
  padding: var(--space-3);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: var(--space-2);
}

.host-review-reply strong {
  font-size: var(--text-xs);
  color: var(--primary-700);
  display: block;
  margin-bottom: var(--space-1);
}

.host-review-reply p {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  margin: 0;
}

.host-review-reply-form {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.host-review-reply-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.host-review-reply-date {
  font-size: var(--text-xs);
  color: var(--neutral-400);
  display: block;
  margin-bottom: var(--space-1);
}

.host-review-rating-num {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  font-weight: var(--font-semibold);
}

.host-review-subcats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--neutral-50);
  border-radius: var(--radius-md);
}

.host-review-subcat-item {
  display: grid;
  grid-template-columns: 100px 1fr 28px;
  align-items: center;
  gap: var(--space-2);
}

.host-review-subcat-item-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .host-review-subcats {
    grid-template-columns: 1fr;
  }
  .host-review-subcat-item {
    grid-template-columns: 90px 1fr 28px;
  }
}

/* ============================================================
   HOST EARNINGS BARS
   ============================================================ */
.host-earnings-bars {
  padding: var(--space-4) 0;
}

.host-earnings-bar-item {
  display: grid;
  grid-template-columns: 100px 1fr 80px;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.host-earnings-bar-label {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  text-align: right;
}

.host-earnings-bar-bg {
  height: 24px;
  background: var(--neutral-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.host-earnings-bar {
  height: 100%;
  border-radius: var(--radius-md);
  transition: width 0.5s ease;
  min-width: 4px;
}

.host-earnings-bar-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-800);
}

/* ============================================================
   HOST BUTTON VARIANTS
   ============================================================ */
.host-property-card-type {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  display: block;
  margin-bottom: var(--space-2);
}

.host-property-card-price {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-700);
}

.host-btn--success {
  background: var(--success-600);
  color: #fff;
}

.host-btn--success:hover {
  background: var(--success-700);
}

.host-btn--danger {
  background: var(--danger-600);
  color: #fff;
}

.host-btn--danger:hover {
  background: var(--danger-700);
}

/* ============================================================
   WIZARD RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .wizard-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .wizard-modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .wizard-type-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .wizard-radio-row {
    grid-template-columns: 1fr;
  }

  .wizard-field-row {
    grid-template-columns: 1fr;
  }

  .wizard-field-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .wizard-unit-row .wizard-field-row {
    grid-template-columns: 1fr 1fr;
  }

  .wizard-room-row-body .wizard-field-row {
    grid-template-columns: 1fr 1fr;
  }

  .wizard-room-row-body .wizard-field-row--4 {
    grid-template-columns: 1fr 1fr;
  }

  .wizard-tab-btn {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
  }

  .wizard-steps-labels {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1);
  }
}

/* ============================================================
   PROPERTY DETAIL VIEW
   ============================================================ */
.host-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.host-detail-header h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
}

.host-detail-actions {
  display: flex;
  gap: var(--space-2);
}

/* ── Property detail accordion sections ── */
.host-detail-section {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--white);
}

.host-detail-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  user-select: none;
  background: var(--neutral-50);
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease;
}

.host-detail-section-header:hover {
  background: var(--neutral-100);
}

.host-detail-section-header svg {
  flex-shrink: 0;
  color: var(--primary-500);
}

.host-detail-section-header .section-title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--neutral-800);
  margin: 0;
}

.host-detail-section-header .section-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--neutral-400);
}

.host-detail-section--open > .host-detail-section-header {
  border-bottom-color: var(--neutral-200);
}

.host-detail-section--open > .host-detail-section-header .section-chevron {
  transform: rotate(180deg);
}

.host-detail-section-body {
  display: none;
  padding: var(--space-5);
}

.host-detail-section--open > .host-detail-section-body {
  display: block;
}

/* ── Property Page Navigation ── */
.prop-nav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .prop-nav-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .prop-nav-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.prop-nav-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl, var(--radius-lg));
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.prop-nav-card:hover {
  border-color: var(--primary-300, var(--primary-500));
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.prop-nav-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.prop-nav-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prop-nav-card-icon--info { background: #EEF2FF; color: #4F46E5; }
.prop-nav-card-icon--units { background: #FEF3C7; color: #D97706; }
.prop-nav-card-icon--photos { background: #FCE7F3; color: #DB2777; }
.prop-nav-card-icon--amenities { background: #D1FAE5; color: #059669; }
.prop-nav-card-icon--pricing { background: #DBEAFE; color: #2563EB; }
.prop-nav-card-icon--calendar { background: #FEE2E2; color: #DC2626; }
.prop-nav-card-icon--boost { background: #FEF9C3; color: #CA8A04; }

.prop-nav-card-text {
  flex: 1;
  min-width: 0;
}

.prop-nav-card-title {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--neutral-900, var(--text-primary));
  margin-bottom: 2px;
}

.prop-nav-card-desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: 1.3;
}

.prop-nav-card-arrow {
  flex-shrink: 0;
  color: var(--neutral-400);
  transition: transform 0.2s;
}

.prop-nav-card:hover .prop-nav-card-arrow {
  transform: translateX(3px);
  color: var(--primary-500);
}

/* ── Property Sub-pages ── */
.prop-page {
  animation: propPageSlideIn 0.25s ease-out;
}

@keyframes propPageSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.prop-page-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium, 500);
  color: var(--primary-600, var(--primary-500));
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.prop-page-back:hover {
  background: var(--primary-50, rgba(59,130,246,0.08));
  color: var(--primary-700, var(--primary-600));
}

.prop-page-back:active {
  background: var(--primary-100, rgba(59,130,246,0.15));
}

.prop-page-back svg {
  flex-shrink: 0;
}

.prop-page-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold, 700);
  color: var(--neutral-900, var(--text-primary));
  margin: 0 0 var(--space-5) 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--neutral-100);
}

.prop-page-body {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

@media (max-width: 639px) {
  .prop-nav-card {
    padding: var(--space-3) var(--space-4);
  }

  .prop-nav-card-icon {
    width: 40px;
    height: 40px;
  }

  .prop-nav-card-icon svg {
    width: 20px;
    height: 20px;
  }

  .prop-page-body {
    padding: var(--space-4);
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
  }

  .prop-page-title {
    font-size: var(--text-lg);
  }
}

/* ── House Rules Airbnb-style ── */
.rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  min-height: 56px;
}

.rule-row-label {
  font-size: var(--text-base);
  color: var(--neutral-800);
  flex: 1;
  padding-right: var(--space-4);
}

.rule-row-controls {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.rule-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--neutral-300);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--neutral-400);
  font-family: inherit;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.rule-toggle-btn:hover {
  border-color: var(--neutral-500);
}

.rule-toggle-no.rule-toggle-active {
  background: var(--neutral-600);
  border-color: var(--neutral-600);
  color: white;
}

.rule-toggle-yes.rule-toggle-active {
  background: var(--neutral-900);
  border-color: var(--neutral-900);
  color: white;
}

.rule-divider {
  height: 1px;
  background: var(--neutral-100);
}

.rule-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0 var(--space-3) var(--space-4);
}

.rule-sub-label {
  font-size: var(--text-sm);
  color: var(--neutral-500);
}

.rule-counter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.rule-counter-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--neutral-300);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2em;
  color: var(--neutral-700);
  font-family: inherit;
  padding: 0;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.rule-counter-btn:hover {
  border-color: var(--neutral-500);
  background: var(--neutral-50);
}

.rule-counter-value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  min-width: 24px;
  text-align: center;
  color: var(--neutral-900);
}

.rule-time-inputs {
  display: flex;
  align-items: center;
}

.rule-time-input {
  width: 100px !important;
  text-align: center;
}

/* Custom rules */
.custom-rule-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--neutral-50);
  border-radius: var(--radius-lg);
}

.custom-rule-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.custom-rule-input {
  width: 100%;
}

/* ── Visibility Booster (Booking.com style) ── */
.boost-step {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--neutral-100);
}

.boost-step:last-child {
  border-bottom: none;
}

.boost-step-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.boost-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.boost-step-icon--dates { background: #DBEAFE; color: #1D4ED8; }
.boost-step-icon--target { background: #D1FAE5; color: #059669; }
.boost-step-icon--commission { background: #EDE9FE; color: #7C3AED; }

.boost-step-header h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--neutral-900);
  margin: 0 0 4px 0;
}

.boost-step-header p {
  margin: 0;
}

/* Calendar */
.boost-cal-wrapper {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.boost-cal-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.boost-cal-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .boost-cal-months {
    grid-template-columns: 1fr;
  }
}

.boost-cal-month-header {
  text-align: center;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  color: var(--neutral-800);
  margin-bottom: var(--space-2);
}

.boost-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.boost-cal-day-headers span {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  font-weight: var(--font-semibold);
  padding: 4px 0;
}

.boost-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.15s;
  color: var(--neutral-800);
  font-family: inherit;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.boost-cal-day:hover:not(.boost-cal-day--past):not(.boost-cal-day--empty) {
  background: var(--primary-50, #EFF6FF);
}

.boost-cal-day--empty {
  cursor: default;
}

.boost-cal-day--past {
  color: var(--neutral-300);
  cursor: default;
}

.boost-cal-day--today {
  font-weight: var(--font-bold);
  color: var(--primary-600);
  box-shadow: inset 0 0 0 2px var(--primary-300);
}

.boost-cal-day--selected {
  background: #2563EB !important;
  color: white !important;
  font-weight: var(--font-semibold);
}

.boost-cal-day--active {
  background: #22C55E !important;
  color: white !important;
  font-weight: var(--font-semibold);
}

/* Target audience */
.boost-target-options {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.boost-target-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-full, 50px);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.boost-target-radio:has(input:checked) {
  border-color: var(--primary-500);
  color: var(--primary-600);
  background: var(--primary-50, #EFF6FF);
}

.boost-target-radio input {
  accent-color: var(--primary-500);
}

/* Commission slider */
.boost-slider-wrap {
  background: var(--primary-50, #EFF6FF);
  border: 1px solid var(--primary-200, #BFDBFE);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.boost-slider-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-700);
  margin-bottom: var(--space-3);
}

.boost-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--neutral-200);
  border-radius: 3px;
  outline: none;
}

.boost-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-500, #2563EB);
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.boost-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-500, #2563EB);
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

@media (max-width: 639px) {
  .rule-row-label {
    font-size: var(--text-sm);
  }
  .rule-sub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .rule-time-input {
    width: 80px !important;
  }
  .boost-step-header {
    flex-direction: column;
  }
  .boost-target-options {
    flex-direction: column;
  }
}

.host-form-section-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-3) 0;
  color: var(--neutral-800);
  border-bottom: 1px solid var(--neutral-200);
  padding-bottom: var(--space-2);
}

.host-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.host-form-group--full {
  grid-column: 1 / -1;
}

.host-form-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
}

.host-muted {
  color: var(--neutral-500);
  font-size: var(--text-sm);
}

/* Unit Cards */
.host-units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.host-unit-card {
  background: var(--bg-primary);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.host-unit-card:hover {
  box-shadow: var(--shadow-md);
}

.host-unit-card-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--neutral-100);
}

.host-unit-card-header h4 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.host-unit-card-body {
  padding: var(--space-3) var(--space-4);
}

.host-unit-card-info {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--neutral-50, var(--neutral-100));
}

.host-unit-card-info:last-child {
  border-bottom: none;
}

.host-unit-card-label {
  color: var(--neutral-500);
}

.host-unit-card-value {
  font-weight: 600;
  color: var(--neutral-800);
}

/* Photos Grid */
.host-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.host-photo-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.host-photo-item--cover {
  border-color: var(--primary-500);
}

.host-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.host-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  opacity: 0;
  transition: opacity 0.2s;
}

.host-photo-item:hover .host-photo-overlay {
  opacity: 1;
}

.host-photo-action {
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.host-photo-action:hover {
  transform: scale(1.1);
}

.host-photo-action--danger:hover {
  background: var(--danger-100);
  color: var(--danger-700);
}

.host-photo-cover-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--primary-500);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

/* Seasons & Discounts */
.host-season-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--neutral-100);
}

.host-season-name {
  font-weight: 600;
  min-width: 120px;
}

.host-season-dates {
  color: var(--neutral-500);
  font-size: var(--text-sm);
  flex: 1;
}

.host-season-multiplier {
  font-weight: 700;
  color: var(--primary-700);
}

/* ---- Property Detail Mini-Calendar (inside property edit panel) ---- */
.host-calendar-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.host-calendar-month-label {
  font-weight: 600;
  font-size: var(--text-base);
  min-width: 160px;
  text-align: center;
}

.host-calendar-legend {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.host-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.host-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

.host-legend-dot--available {
  background-color: var(--success-500);
}

.host-legend-dot--booked {
  background-color: var(--primary-500);
}

.host-legend-dot--blocked {
  background-color: var(--error-500);
}

.host-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

/* Shared small calendar classes used by propDetail mini-calendar */
.host-cal-header {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  padding: var(--space-2);
  text-transform: uppercase;
}

.host-cal-num {
  font-size: var(--text-sm);
}

/* Property detail mini-calendar cell styles */
.host-calendar-grid .host-cal-cell {
  text-align: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background-color 0.15s;
}
.host-calendar-grid .host-cal-cell:hover:not(.host-cal-cell--past):not(.host-cal-cell--empty) {
  background: var(--primary-50);
}
.host-calendar-grid .host-cal-cell--empty { cursor: default; }
.host-calendar-grid .host-cal-cell--past { opacity: 0.3; cursor: default; }
.host-calendar-grid .host-cal-cell--booked { background: #eef2ff; color: #6366f1; }
.host-calendar-grid .host-cal-cell--blocked { background: #fff1f2; color: #e11d48; text-decoration: line-through; }

/* Responsive */
@media (max-width: 767px) {
  .host-detail-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .host-form-grid {
    grid-template-columns: 1fr;
  }

  .host-units-grid {
    grid-template-columns: 1fr;
  }

  .host-photos-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .host-season-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

/* ============================================================
   PRICING TAB - Accordion, Toggles, Cards, Tables
   ============================================================ */

/* ---- Accordion ---- */
.host-pricing-accordion {
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  margin-bottom: var(--space-3, 12px);
  background: var(--bg-primary, #fff);
  overflow: hidden;
}

.host-pricing-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast, 0.15s ease);
}

.host-pricing-accordion-header:hover {
  background-color: var(--bg-secondary, #f9fafb);
}

.host-pricing-accordion-title {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  font-weight: var(--font-semibold, 600);
  font-size: var(--text-base, 1rem);
  color: var(--text-primary, #111827);
}

.host-pricing-accordion-title svg {
  color: var(--primary-500, #6366f1);
  flex-shrink: 0;
}

.host-pricing-accordion-chevron {
  transition: transform var(--transition-base, 0.2s ease);
  color: var(--text-tertiary, #9ca3af);
  flex-shrink: 0;
}

.host-pricing-accordion--open .host-pricing-accordion-chevron {
  transform: rotate(180deg);
}

.host-pricing-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 var(--space-5, 20px);
}

.host-pricing-accordion--open .host-pricing-accordion-body {
  max-height: 5000px;
  padding: 0 var(--space-5, 20px) var(--space-5, 20px);
}

/* ---- Toggle switch (iOS-style) ---- */
.host-pricing-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.host-pricing-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.host-pricing-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: var(--neutral-300, #d1d5db);
  border-radius: 24px;
  transition: background-color var(--transition-fast, 0.15s ease);
}

.host-pricing-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast, 0.15s ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.host-pricing-toggle input:checked + .host-pricing-toggle-slider {
  background-color: var(--primary-500, #6366f1);
}

.host-pricing-toggle input:checked + .host-pricing-toggle-slider::before {
  transform: translateX(20px);
}

.host-pricing-toggle input:focus + .host-pricing-toggle-slider {
  box-shadow: 0 0 0 3px var(--primary-100, #e0e7ff);
}

/* ---- Inline form styling ---- */
.host-pricing-inline-form {
  margin-top: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border: 2px solid var(--primary-200, #c7d2fe);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-secondary, #f9fafb);
}

/* ---- Action buttons (edit/delete) ---- */
.host-pricing-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

.host-pricing-action-btn {
  padding: var(--space-1, 4px) var(--space-2, 8px) !important;
  min-width: auto !important;
  color: var(--text-tertiary, #9ca3af);
}

.host-pricing-action-btn:hover {
  color: var(--primary-600, #4f46e5);
}

.host-pricing-action-btn--danger:hover {
  color: var(--error-600, #dc2626);
}

/* ---- Badges ---- */
.host-pricing-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  line-height: 1;
  white-space: nowrap;
}

.host-pricing-badge--success {
  background-color: var(--success-100, #dcfce7);
  color: var(--success-700, #15803d);
}

.host-pricing-badge--neutral {
  background-color: var(--neutral-100, #f3f4f6);
  color: var(--neutral-600, #4b5563);
}

.host-pricing-badge--info {
  background-color: var(--primary-100, #e0e7ff);
  color: var(--primary-700, #4338ca);
}

.host-pricing-badge--warning {
  background-color: var(--warning-100, #fef3c7);
  color: var(--warning-700, #a16207);
}

/* ---- Rate Type Cards ---- */
.host-pricing-rate-card {
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4, 16px);
  margin-bottom: var(--space-3, 12px);
  background: var(--bg-primary, #fff);
  transition: border-color var(--transition-fast, 0.15s ease);
}

.host-pricing-rate-card:hover {
  border-color: var(--primary-200, #c7d2fe);
}

.host-pricing-rate-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
}

.host-pricing-rate-card-name {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

.host-pricing-rate-default-badge {
  color: var(--warning-500, #f59e0b);
  font-size: var(--text-lg, 1.125rem);
}

.host-pricing-rate-policy {
  margin-top: var(--space-3, 12px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.host-pricing-policy-item {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: var(--bg-secondary, #f9fafb);
  border-radius: var(--radius-sm, 4px);
}

/* ---- Per-Unit Pricing Accordion ---- */
.host-pricing-unit-accordion {
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  margin-bottom: var(--space-3, 12px);
  background: var(--bg-primary, #fff);
  overflow: hidden;
}

.host-pricing-unit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast, 0.15s ease);
}

.host-pricing-unit-header:hover {
  background-color: var(--bg-secondary, #f9fafb);
}

.host-pricing-unit-header-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.host-pricing-unit-name {
  font-weight: var(--font-semibold, 600);
  font-size: var(--text-base, 1rem);
  color: var(--text-primary, #111827);
}

.host-pricing-unit-meta {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-tertiary, #9ca3af);
}

.host-pricing-unit-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 var(--space-5, 20px);
}

.host-pricing-unit-accordion--open .host-pricing-unit-body {
  max-height: 3000px;
  padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px);
}

.host-pricing-unit-accordion--open .host-pricing-accordion-chevron {
  transform: rotate(180deg);
}

/* ---- Input grid for pricing forms ---- */
.host-pricing-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
}

.host-pricing-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.host-pricing-input-prefix {
  position: absolute;
  left: var(--space-3, 12px);
  color: var(--text-tertiary, #9ca3af);
  font-weight: var(--font-medium, 500);
  pointer-events: none;
  z-index: 1;
}

.host-pricing-input-wrap .host-input {
  padding-left: var(--space-7, 28px);
}

.host-pricing-input-suffix {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-tertiary, #9ca3af);
  margin-top: var(--space-1, 4px);
}

/* ---- Filter row ---- */
.host-pricing-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  padding-bottom: var(--space-3, 12px);
  border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.host-pricing-filter-select {
  max-width: 280px;
}

/* ---- Guest Price Preview ---- */
.host-pricing-preview {
  margin: var(--space-4, 16px) 0;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.host-pricing-preview-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.025em);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--bg-secondary, #f9fafb);
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  margin: 0;
}

.host-pricing-guest-table {
  padding: 0;
}

.host-pricing-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  font-size: var(--text-sm, 0.875rem);
  transition: background-color var(--transition-fast, 0.15s ease);
}

.host-pricing-guest-row:last-child {
  border-bottom: none;
}

.host-pricing-guest-row:nth-child(even) {
  background-color: var(--bg-tertiary, #f3f4f6);
}

.host-pricing-guest-row--base {
  background-color: var(--primary-50, #eef2ff) !important;
  border-left: 3px solid var(--primary-500, #6366f1);
}

.host-pricing-guest-label {
  font-weight: var(--font-medium, 500);
  color: var(--text-primary, #111827);
  min-width: 100px;
}

.host-pricing-guest-price {
  font-weight: var(--font-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.host-pricing-guest-price--base {
  color: var(--primary-600, #4f46e5);
}

.host-pricing-guest-price--up {
  color: var(--warning-600, #d97706);
}

.host-pricing-guest-price--down {
  color: var(--success-600, #16a34a);
}

/* ---- Discount row improvements ---- */
.host-discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--neutral-100, #f3f4f6);
}

.host-pricing-discount-content {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex: 1;
  min-width: 0;
}

/* ---- Responsive: Pricing Tab ---- */
@media (max-width: 767px) {
  .host-pricing-accordion-header {
    padding: var(--space-3, 12px) var(--space-4, 16px);
  }

  .host-pricing-accordion-title {
    font-size: var(--text-sm, 0.875rem);
  }

  .host-pricing-accordion--open .host-pricing-accordion-body {
    padding: 0 var(--space-4, 16px) var(--space-4, 16px);
  }

  .host-pricing-input-grid {
    grid-template-columns: 1fr;
  }

  .host-pricing-unit-header {
    padding: var(--space-3, 12px) var(--space-4, 16px);
  }

  .host-pricing-unit-accordion--open .host-pricing-unit-body {
    padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
  }

  .host-pricing-rate-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .host-pricing-rate-policy {
    flex-direction: column;
  }

  .host-pricing-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .host-pricing-filter-select {
    max-width: 100%;
  }

  .host-pricing-discount-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1, 4px);
  }

  .host-pricing-guest-row {
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }
}

/* ── iCal Sync ──────────────────────────── */
.host-ical-section { margin-top: 1rem; }
.host-ical-section h4 { font-size: .95rem; font-weight: 600; margin-bottom: .5rem; color: var(--text-primary); }
.host-ical-feed-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .75rem;
    background: var(--surface-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: .5rem;
    margin-bottom: .5rem;
    font-size: .85rem;
}
.host-ical-feed-row .host-ical-url {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-family: monospace;
    font-size: .8rem;
}
.host-ical-feed-row .host-ical-unit-badge {
    padding: .125rem .5rem;
    background: var(--primary-100, #e0f2fe);
    color: var(--primary-700, #0369a1);
    border-radius: .25rem;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}
.host-ical-feed-row .host-ical-source {
    font-weight: 600;
    white-space: nowrap;
    min-width: 80px;
}
.host-ical-status {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .125rem .5rem;
    border-radius: .25rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
}
.host-ical-status--ok { background: #dcfce7; color: #166534; }
.host-ical-status--pending { background: #fef9c3; color: #854d0e; }
.host-ical-status--error { background: #fee2e2; color: #991b1b; }
.host-ical-add-form {
    padding: 1rem;
    background: var(--surface-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: .5rem;
}
.host-ical-add-form .host-ical-form-row {
    display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap;
    margin-bottom: .75rem;
}
.host-ical-add-form .host-ical-form-group {
    display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 160px;
}
.host-ical-add-form .host-ical-form-group label {
    font-size: .8rem; font-weight: 500; color: var(--text-secondary);
}
.host-ical-add-form .host-ical-form-group input,
.host-ical-add-form .host-ical-form-group select {
    padding: .5rem .625rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: .375rem;
    font-size: .85rem;
}
.host-ical-copy-btn {
    padding: .25rem .5rem;
    background: var(--primary-600, #0284c7);
    color: white;
    border: none;
    border-radius: .25rem;
    font-size: .75rem;
    cursor: pointer;
    white-space: nowrap;
}
.host-ical-copy-btn:hover { background: var(--primary-700, #0369a1); }
.host-ical-copy-btn.copied { background: #16a34a; }
.host-ical-gen-btn {
    padding: .375rem .75rem;
    background: var(--primary-100, #e0f2fe);
    color: var(--primary-700, #0369a1);
    border: 1px solid var(--primary-300, #7dd3fc);
    border-radius: .375rem;
    font-size: .8rem;
    cursor: pointer;
    white-space: nowrap;
}
.host-ical-gen-btn:hover { background: var(--primary-200, #bae6fd); }
.host-ical-del-btn {
    padding: .25rem;
    background: none;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    line-height: 1;
}
.host-ical-del-btn:hover { color: #ef4444; }
.host-ical-empty {
    padding: .75rem;
    color: var(--text-muted, #94a3b8);
    font-size: .85rem;
    text-align: center;
    background: var(--surface-secondary, #f8f9fa);
    border-radius: .5rem;
}