@charset 'UTF-8';@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* Importing Poppins font */
* {
    font-family: 'Poppins', sans-serif; /* Using Poppins font */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-rendering: optimizeLegibility; /* Enhances font clarity */
    -webkit-font-smoothing: antialiased; /* Smooths font on WebKit browsers */
    -moz-osx-font-smoothing: grayscale; /* Improves readability on macOS */
}
html {

/* Mobile Optimizations for PhotoDomeViewer */
.photo-dome-container {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 768px) {
    .expand-button {
        min-width: 60px !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }
}

/* Fullscreen mobile optimizations */
.photo-dome-container:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
}
.photo-dome-container:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
}
.photo-dome-container:-moz-full-screen {
    width: 100vw !important;
    height: 100vh !important;
}
.photo-dome-container:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
}

/* Prevent body scroll when in fullscreen on mobile */
body:fullscreen .photo-dome-container,
body:-webkit-full-screen .photo-dome-container,
body:-moz-full-screen .photo-dome-container,
body:-ms-fullscreen .photo-dome-container {
    overflow: hidden !important;
}

/* Mobile landscape optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .photo-dome-container:not(:fullscreen) {
        height: 300px !important;
    }
}

/* High DPI mobile devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .photo-dome-container canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    .photo-dome-container {
        cursor: pointer;
    }
  
    .expand-button {
        -webkit-appearance: none;
        appearance: none;
    }
}
    font-size: 16px;
    color: #f1f5f9;
    background:#0f172a;
    background-image: radial-gradient(circle at 18% 22%, rgba(255,255,255,0.08), transparent 60%),
                      radial-gradient(circle at 82% 70%, rgba(255,255,255,0.05), transparent 65%);
}
:root {
    --app-bg:#0f172a;
    --panel-bg:#ffffff;
    --panel-border:#e2e8f0;
    --grad-accent:linear-gradient(135deg,#38bdf8,#6366f1);
    --accent:#6366f1;
    --accent-rgb:99,102,241;
    --danger:#dc2626;
    --success:#16a34a;
    --warning:#d97706;
    --text-primary:#0f172a;
    --text-secondary:#64748b;
    --radius:14px;
    --shadow:0 4px 14px -2px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.04);
}
body { background:transparent; }
/* Legal / Contact pages */
.legal-page { max-width:900px; margin:60px auto 80px; padding:0 1.25rem; }
.legal-page h1 { font-size:2.1rem; margin:0 0 1rem; letter-spacing:.5px; }
.legal-page h2 { margin:2rem 0 .75rem; font-size:1.15rem; font-weight:600; letter-spacing:.4px; }
.legal-page p, .legal-page li { font-size:.95rem; line-height:1.55; }
.legal-page ul { padding-left:1.2rem; margin:.4rem 0 1.2rem; }
.contact-form { display:flex; flex-direction:column; gap:.9rem; margin:1.2rem 0 2rem; background:#fff; padding:1.25rem 1.4rem 1.5rem; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 4px 12px -2px rgba(0,0,0,.06); }
.contact-form label { display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#475569; }
.contact-form input, .contact-form textarea { font:inherit; padding:.7rem .8rem; border:1px solid #cbd5e1; border-radius:10px; background:#fff; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.contact-form button { align-self:flex-start; background:#2563eb; color:#fff; border:1px solid #1d4ed8; padding:.7rem 1.2rem; font-size:.8rem; font-weight:600; letter-spacing:.06em; border-radius:10px; cursor:pointer; text-transform:uppercase; box-shadow:0 2px 8px rgba(37,99,235,.35); }
.contact-form button:disabled { opacity:.6; cursor:not-allowed; }
.contact-form .error { color:#b91c1c; font-size:.8rem; }
.alt-contact { background:#fff; border:1px solid #e2e8f0; padding:1rem 1.25rem 1.25rem; border-radius:14px; box-shadow:0 2px 8px -2px rgba(0,0,0,.05); }
.alt-contact h2 { margin:0 0 .75rem; font-size:1rem; }
@media (max-width:640px){ .legal-page { margin:40px auto 60px; } .legal-page h1 { font-size:1.75rem; } }
/* Generic panel utility */
.panel { background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:var(--radius); box-shadow:var(--shadow); }
/* --------------------------------------------- */
/* Accessibility / Contrast Fixes               */
/* --------------------------------------------- */
/* Many components used pure #fff for text even on light backgrounds after theme changes.
     Provide safer defaults + utilities without rewriting every file. */
/* Light surface contexts (white / very light backgrounds) force dark primary text */
.favorites-container, 
.landlord-dashboard .ll-card, 
.landlord-dashboard .landlord-main, 
.dashboard-container.landlord-dashboard, 
.tenant-dashboard .favorites-main, 
.tenant-dashboard .panel, 
.tenant-dashboard .ll-card { color: var(--color-text-primary); }
/* Generic correction: any paragraph/span with pure white inside a light container gets downgraded */
.favorites-container p, 
.favorites-container span, 
.landlord-dashboard .ll-card p, 
.landlord-dashboard .ll-card span { color: var(--color-text-secondary); }
/* Preserve intentional inverse text on dark / colored chips & buttons via explicit classes */
.btn, .ll-btn.primary, .ll-btn.danger, .ll-btn.warn,
.favorite-badge, .property-badge, .video-badge, .favorite-price,
.feature-tag, .view-btn, .toggle-filters-btn, .reset-filters,
.browse-btn, .aboutus-btn, .register-btn, .contact-btn, .landlord-profile-btn,
.dashboard-sidebar li.active, .dashboard-sidebar .logout, .sidebar li.active, .sidebar .logout {
    color:#fff !important; /* keep white for contrast on strong / dark backgrounds */
}
/* Fine-tune small meta text previously inheriting white making it low contrast on light panels */
.property-date, .favorite-meta span, .favorites-toolbar label, .results-count, .results-metrics { color: var(--color-text-secondary) !important; }
/* Ensure links inside light surfaces are dark unless styled as button */
.favorites-container a:not(.btn):not(.ll-btn),
.landlord-dashboard .ll-card a:not(.btn):not(.ll-btn) { color: #1d4b8f; text-decoration:none; }
.favorites-container a:not(.btn):not(.ll-btn):hover { text-decoration:underline; }
/* Utility classes */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted, #6b7280) !important; }
.text-inverse { color:#fff !important; }
/* Reduce opacity of disabled elements while keeping readable foreground */
[disabled], .is-disabled { opacity:.65; }
/* Badge refinement: ensure small white text stays legible on gradients via slight text-shadow */
.favorite-badge, .property-badge, .video-badge, .verified-badge, .lp-verified { text-shadow:0 1px 2px rgba(0,0,0,.35); }
/* Heart / favorite icon remains inverse on mixed backgrounds */
.favorite-icon { color:#e11d48 !important; }
/* Override any accidental global white text that might have cascaded into light theme containers */
.landlord-dashboard h1, .landlord-dashboard h2, .landlord-dashboard h3, .landlord-dashboard h4, .landlord-dashboard h5, .landlord-dashboard h6 { color: var(--color-text-primary); }
/* Dark surface contexts: reinforce light foreground for readability */
.dark-surface, .glass-panel, .property-listing-container, .property-card, .property-detail-wrapper, .home-hero, .aboutus-hero, .footer, .navbar, .property-images-overlay {
    color:#f1f5f9;
}
.dark-surface p, .dark-surface span, .glass-panel p, .glass-panel span, .property-card p, .property-card span { color:#cbd5e1; }
/* Utilities for explicit intent */
.on-dark { color:#f8fafc !important; }
.on-dark .muted, .on-dark-muted, .text-on-dark-muted { color:#cbd5e1 !important; }
.on-light { color: var(--color-text-primary) !important; }
/* High contrast focus ring adjustments for dark areas */
.on-dark a:focus-visible, .dark-surface a:focus-visible, .glass-panel a:focus-visible, .property-card a:focus-visible, .on-dark button:focus-visible, .dark-surface button:focus-visible {
    outline:2px solid #ffffff; outline-offset:3px; border-radius:6px;
}
/* Subtle text-shadow on light text over noisy backgrounds */
.dark-surface h1, .dark-surface h2, .dark-surface h3, .glass-panel h1, .glass-panel h2, .glass-panel h3, .property-card h3 { text-shadow:0 1px 2px rgba(0,0,0,.5); }
/* Ensure buttons placed inside dark panels but styled as neutral remain readable */
.dark-surface .ll-btn:not(.primary):not(.danger):not(.warn):not(.outline) { color:#1f2937; }
/* ------------------ Responsive helpers (mobile-first) ------------------ */
:root {
        --bp-sm: 640px;
        --bp-md: 768px;
        --bp-lg: 1024px;
}
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1rem; }
/* Utility to stack children vertically on small screens */
.stack-mobile { display:flex; gap:1rem; }
@media (max-width: 640px) { .stack-mobile { flex-direction:column; } }
/* Make images responsive by default unless opt-out */
img.responsive, .responsive-img { max-width:100%; height:auto; display:block; }
/* Larger touch targets on mobile */
@media (max-width: 640px) {
    button, .btn, .login-register, .register-btn, .browse-btn { padding:12px 16px; font-size:0.95rem; }
    .input-wrapper { padding:12px 12px; }
}
/* Ensure form panels shrink gracefully on mobile */
@media (max-width: 640px) {
    .panel, .register-form, .login-form { padding-left:14px; padding-right:14px; }
}
/* small helper to reduce gutters for compact mobile screens */
@media (max-width:420px){ .compact-mobile { padding-left:10px; padding-right:10px; } }
/* ---------------- Dashboard & Admin responsive helpers ---------------- */
/* Make tenant/landlord dashboards stack on mobile and ensure tables are scrollable */
@media (max-width: 1024px) {
    .dashboard-container, .tenant-dashboard, .landlord-dashboard, .dashboard-wrapper { display:flex; flex-direction:column; gap:1rem; padding:0.8rem 1rem; }
    .dashboard-sidebar, .dashboard-side, .ll-sidebar, .tenant-sidebar { order:2; width:100%; display:block; }
    .dashboard-main, .dashboard-content, .ll-main, .tenant-main { order:1; width:100%; }
    /* make small panels full width */
    .panel, .card, .stats-panel { width:100%; }
}
/* Make wide tables horizontally scrollable while keeping layout stable */
@media (max-width: 900px) {
    .table-responsive { overflow:auto; -webkit-overflow-scrolling:touch; }
    .table-responsive table { width:100%; min-width:700px; border-collapse:separate; }
    /* convert dense table rows into card-like stacks where possible */
    .table-card-list { display:grid; grid-template-columns:1fr; gap:0.85rem; }
    .table-card { background:#fff; border:1px solid var(--panel-border); border-radius:12px; padding:0.85rem; box-shadow:var(--shadow); }
    /* make form controls and action buttons bigger for touch */
    button, .btn, .action-btn, .register-btn, .login-btn { padding:12px 14px; font-size:0.96rem; }
}
/* Tight mobile (phones): hide non-essential decorative content and collapse secondary sidebars */
@media (max-width: 420px) {
    .dashboard-container, .tenant-dashboard, .landlord-dashboard { padding:0.6rem 0.6rem; gap:0.7rem; }
    /* Keep sidebars available on tiny screens; sidebar component handles mobile layout */
    .mobile-only { display:block; }
    .desktop-only { display:none !important; }
    /* Ensure lists/cards are comfortably spaced on tiny screens */
    .card-list, .table-card-list { grid-template-columns:1fr; gap:0.6rem; }
    img.responsive, .property-thumb { max-height:160px; object-fit:cover; }
}

/* Dashboard Container */
.dashboard-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(120deg, rgba(59,130,246,0.04), rgba(99,102,241,0.03));
  margin: 0;
  padding: 0;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 2rem;
  box-sizing: border-box;
  min-height: 100vh;
  margin-left: 0; /* Remove margin-left since sidebar is in flex flow */
}

.tenant-my-rentals {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.tenant-my-rentals h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #38bdf8, #6366f1, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.tabs button {
  background: rgba(59,130,246,0.08);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 2rem;
  font-weight: 700;
  color: #6366f1;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px 0 rgba(59,130,246,0.04);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.tabs button.active, 
.tabs button:hover {
  background: linear-gradient(90deg, #38bdf8, #6366f1, #3b82f6);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(59,130,246,0.15);
  transform: translateY(-2px);
}

/* Tab Content */
.tab-content {
  margin-top: 1rem;
}

/* Application Rows */
.app-row {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: 1.2rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px 0 rgba(59,130,246,0.08);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.app-row:hover {
  box-shadow: 0 8px 32px 0 rgba(59,130,246,0.15);
  transform: translateY(-3px);
}

/* App Row Header */
.app-row-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.status-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.status-icon {
  font-size: 1.2rem;
}

.status-icon.pending {
  color: #f59e0b;
}

.status-icon.approved {
  color: #10b981;
}

.status-icon.rejected {
  color: #ef4444;
}

.status-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.status-badge.pending {
  background: rgba(245,158,11,0.15);
  color: #d97706;
}

.status-badge.approved {
  background: rgba(16,185,129,0.15);
  color: #059669;
}

.status-badge.rejected {
  background: rgba(239,68,68,0.15);
  color: #dc2626;
}

.app-row h4 {
  font-size: 1.3rem;
  color: #1f2937;
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
}

.app-row p {
  color: #000;
  margin: 0.5rem 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

/* Actions */
.actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.actions button {
  background: linear-gradient(90deg, #38bdf8, #6366f1);
  color: #fff;
  border: none;
  border-radius: 0.7rem;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.actions button:hover {
  background: linear-gradient(90deg, #6366f1, #38bdf8);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}

/* Ensure the view property button is clickable even if overlays exist */
.view-property-btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}

.no-apps {
  color: #000;
  font-style: italic;
  text-align: center;
  margin: 3rem 0;
  font-size: 1.1rem;
}

/* Responsive Design */

/* Tablet and Small Desktop */
@media (max-width: 1024px) {
  .main-content {
    padding: 1.5rem;
  }
  
  .tenant-my-rentals h2 {
    font-size: 2rem;
  }
  
  .app-row-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  
  .app-row h4 {
    min-width: auto;
  }
}

/* Mobile Devices */
@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }
  
  .main-content {
    padding: 1rem;
    margin-top: 0;
    width: 100%;
  }
  
  .tenant-my-rentals h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: left;
  }
  
  .tabs {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    gap: 0.8rem;
  }
  
  .tabs button {
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
    flex-shrink: 0;
  }
  
  .app-row {
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    border-radius: 1rem;
  }
  
  .app-row-header {
    gap: 0.6rem;
  }
  
  .app-row h4 {
    font-size: 1.1rem;
  }
  
  .status-badge {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
  }
  
  .actions {
    justify-content: stretch;
  }
  
  .actions button {
    width: 100%;
    justify-content: center;
    padding: 0.8rem;
  }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
  .main-content {
    padding: 0.8rem;
  }
  
  .tenant-my-rentals h2 {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }
  
  .tabs {
    gap: 0.5rem;
  }
  
  .tabs button {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
  
  .app-row {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .app-row h4 {
    font-size: 1rem;
  }
  
  .app-row p {
    font-size: 0.9rem;
  }
  
  .status-section {
    width: 100%;
    justify-content: space-between;
  }
  
  .status-badge {
    font-size: 0.75rem;
  }
}

/* Ensure no horizontal overflow */
.dashboard-container,
.main-content,
.tenant-my-rentals {
  overflow-x: hidden;
}/* Reusable Dashboard Sidebar */
.dashboard-sidebar { 
  width: 250px; 
  background: var(--color-surface, #ffffff); 
  color: var(--color-text-primary, #111827); 
  padding: 26px 20px 24px; 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .15); 
  border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.10)); 
  position: sticky;
  top: 0;
  z-index: 100; 
  transition: transform 0.3s ease;
  margin: 0;
  overflow-y: auto;
  flex-shrink: 0;
}

.dashboard-sidebar:after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  background: linear-gradient(180deg, rgba(99, 132, 255, 0.12), transparent 50%, rgba(16, 185, 129, 0.08)); 
  mix-blend-mode: multiply; 
  opacity: .5; 
}

.dashboard-sidebar h2.brand { 
  text-align: center; 
  margin: 0 0 18px; 
  font-size: 1.05rem; 
  letter-spacing: .6px; 
  font-weight: 700; 
  background: linear-gradient(90deg, #2563eb, #1d4ed8, #059669); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
}

.dashboard-sidebar ul { 
  list-style: none; 
  padding: 4px 0 0; 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
  flex: 1;
}

.dashboard-sidebar li { 
  position: relative; 
  padding: 12px 14px; 
  cursor: pointer; 
  background: var(--color-surface-subtle, #f1f5f9); 
  border: 1px solid transparent; 
  border-radius: 10px; 
  text-align: left; 
  font-size: .75rem; 
  letter-spacing: .5px; 
  font-weight: 600; 
  color: var(--color-text-secondary, #374151); 
  display: flex; 
  flex-direction: column; 
  gap: 2px; 
  transition: .25s background, .25s color, .25s border-color; 
}

.dashboard-sidebar li:hover { 
  background: #e2e8f0; 
  color: var(--color-text-primary, #1e293b); 
}

.dashboard-sidebar li.active { 
  background: #2563eb; 
  color: #fff; 
  box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35); 
}

.dashboard-sidebar li.active:after { 
  content: ""; 
  position: absolute; 
  right: -10px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 6px; 
  height: 24px; 
  border-radius: 4px; 
  background: linear-gradient(180deg, #2563eb, #1d4ed8); 
}

.dashboard-sidebar li.locked { 
  background: #e2e8f0; 
  cursor: not-allowed; 
  color: #6b7280; 
}

.dashboard-sidebar li.locked:hover { 
  background: #e2e8f0; 
}

.dashboard-sidebar .logout { 
  margin-top: auto; 
  background: #dc2626; 
  color: #fff; 
}

.dashboard-sidebar .logout:hover { 
  background: #b91c1c; 
}

.dashboard-sidebar .label-row { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}

.dashboard-sidebar .lock-indicator { 
  font-size: .9rem; 
}

.dashboard-sidebar .hint-row { 
  display: block; 
  font-size: .52rem; 
  letter-spacing: .5px; 
  text-transform: uppercase; 
  margin-top: 2px; 
  color: #b45309; 
  font-weight: 600; 
}

/* Sidebar Header */
.sidebar-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verification-pill {
  margin: 0 0 16px; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
  justify-content: center; 
  width: 100%;
}

.verification-pill .verified, 
.verification-pill .pending, 
.verification-pill .rejected {
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  padding: 6px 14px 7px; 
  font-size: .58rem; 
  font-weight: 700; 
  letter-spacing: .55px; 
  border-radius: 40px; 
  text-transform: uppercase; 
  border: 1px solid var(--color-border-strong, rgba(0, 0, 0, 0.18)); 
}

.verification-pill .verified {
  background: #d1fae5;
  color: #065f46;
  border-color: #34d399;
}

.verification-pill .pending {
  background: #fef3c7;
  color: #854d0e;
  border-color: #fbbf24;
}

.verification-pill .rejected {
  background: #fee2e2;
  color: #7f1d1d;
  border-color: #fca5a5;
}

/* Mobile Overlay */
.mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 98;
}

/* Mobile Hamburger Button - SEPARATE from sidebar */
.mobile-hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  z-index: 99;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.3s ease;
}

.mobile-hamburger:hover {
  background: #1d4ed8;
}

.mobile-hamburger.open {
  background: #dc2626;
}

.mobile-hamburger.open:hover {
  background: #b91c1c;
}

.mobile-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.mobile-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.mobile-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Styles */
@media (max-width: 767px) {
  /* Show hamburger on mobile */
  .mobile-hamburger {
    display: flex;
  }

  /* Sidebar mobile styles */
  .dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 280px;
    z-index: 100;
  }

  .dashboard-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  }

  .dashboard-sidebar li.active:after {
    display: none;
  }
}

/* Desktop Styles */
@media (min-width: 768px) {
  .dashboard-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
  
  .mobile-hamburger {
    display: none !important;
  }
  
  .mobile-sidebar-overlay {
    display: none !important;
  }
}

/* Ensure no margin conflicts */
body {
  margin: 0;
  padding: 0;
}/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
.error-boundary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  padding: 20px;
}

.error-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Loading spinner styles */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e293b, #0f172a);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.loading-container p {
  color: #f8fafc;
  font-size: 1.2rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-content h1 {
  color: #f1f5f9;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.error-content p {
  color: #cbd5e1;
  margin-bottom: 1.5rem;
}

.error-details {
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: left;
  color: #94a3b8;
  font-family: monospace;
  font-size: 0.9rem;
  max-height: 200px;
  overflow-y: auto;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.error-actions button,
.error-actions .home-link {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
  text-decoration: none;
}

.error-actions button {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  cursor: pointer;
}

.error-actions .home-link {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.error-actions button:hover,
.error-actions .home-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}/* Dark / Glass Themed Home Page */
.home-page { width:100%; max-width:1320px; margin:0 auto; padding:clamp(2.5rem,4vw,4rem) clamp(1.15rem,2.2vw,2.25rem) 5rem; font-family:'Inter',system-ui,sans-serif; position:relative; }

/* Hero */
.hero-section { position:relative; display:flex; align-items:stretch; gap:clamp(2.2rem,3.2vw,3.8rem); padding:clamp(2.2rem,3vw,3.5rem) clamp(1.5rem,2.6vw,2.8rem) clamp(2.6rem,3.5vw,3.6rem); border-radius:36px; background:linear-gradient(145deg,rgba(15,23,42,.85),rgba(30,41,59,.78)); border:1px solid rgba(255,255,255,.08); box-shadow:0 14px 48px -12px rgba(0,0,0,.7),0 2px 4px -1px rgba(0,0,0,.4); overflow:hidden; margin:0 0 clamp(3rem,6vh,4.8rem); }
.hero-bg-glow { position:absolute; inset:0; background:
  radial-gradient(circle at 28% 25%,rgba(56,189,248,.35),transparent 60%),
  radial-gradient(circle at 82% 70%,rgba(99,102,241,.3),transparent 66%);
  opacity:.6; filter:blur(6px); pointer-events:none; }
.hero-left { flex:1.05; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; }
.hero-title { font-size:clamp(2.15rem,1.8rem + 2.1vw,3.35rem); line-height:1.05; font-weight:650; letter-spacing:.5px; margin:0 0 1.1rem; }
.gradient-text { background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.subtitle { font-size:clamp(.92rem,.88rem + .25vw,1.05rem); line-height:1.55; color:#cbd5e1; margin:0 0 1.85rem; max-width:600px; }
.hero-cta-row { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.browse-btn { --btn-bg:linear-gradient(135deg,#6366f1,#3b82f6); position:relative; display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.5rem; font-size:.8rem; font-weight:600; letter-spacing:.08em; border-radius:16px; border:1px solid rgba(255,255,255,.15); text-decoration:none; cursor:pointer; background:var(--btn-bg); color:#fff; box-shadow:0 6px 24px -8px rgba(99,102,241,.6),0 0 0 1px rgba(255,255,255,.05) inset; backdrop-filter:blur(6px); transition:transform .4s,box-shadow .4s,filter .4s; text-transform:uppercase; }
.browse-btn.primary:hover { transform:translateY(-4px); box-shadow:0 10px 36px -10px rgba(99,102,241,.85); }
.browse-btn.ghost { --btn-bg:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.05)); color:#f1f5f9; }
.browse-btn.ghost:hover { filter:brightness(1.15); }
.btn-arrow { transition:transform .4s; }
.browse-btn:hover .btn-arrow { transform:translateX(5px); }
.hero-mini-stats { display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; font-weight:600; }
.hero-mini-stats div { display:flex; flex-direction:column; align-items:flex-start; padding:.7rem .85rem .65rem; border-radius:14px; background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px); box-shadow:0 4px 18px -6px rgba(0,0,0,.5); min-width:88px; }
.hero-mini-stats strong { font-size:1.05rem; font-weight:650; color:#f1f5f9; letter-spacing:.5px; }
.hero-mini-stats span { font-size:.6rem; margin-top:.15rem; }

.hero-right { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }
.hero-image-container { position:relative; width:100%; height:430px; overflow:hidden; border-radius:28px; box-shadow:0 18px 48px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06) inset; background:linear-gradient(135deg,#1e293b,#0f172a); }
.hero-image-wrapper { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; filter:brightness(.85) saturate(1.05); transition:opacity 1.2s cubic-bezier(.19,1,.22,1); }
.hero-image-wrapper.active { opacity:1; }
.prev-btn,.next-btn { position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border:none; cursor:pointer; border-radius:50%; background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.75)); backdrop-filter:blur(4px); box-shadow:0 6px 22px -8px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; color:#1e293b; transition:transform .45s, box-shadow .45s, background .45s; }
.prev-btn:hover,.next-btn:hover { transform:translateY(-50%) scale(1.08); box-shadow:0 10px 34px -10px rgba(0,0,0,.55); }
.prev-btn svg,.next-btn svg { width:26px; height:26px; fill:currentColor; }
.prev-btn { left:18px; }
.next-btn { right:18px; }

/* Dots */
.dots-container { display:flex; justify-content:center; margin-top:1.35rem; gap:.55rem; }
.dot { width:11px; height:11px; border:none; border-radius:50%; background:#475569; cursor:pointer; position:relative; overflow:hidden; padding:0; transition:transform .45s, background .45s; }
.dot.active { background:linear-gradient(90deg,#38bdf8,#6366f1); transform:scale(1.35); box-shadow:0 0 0 4px rgba(99,102,241,.25); }

/* Feature Grid */
.feature-grid-section { margin:clamp(3.8rem,6vh,5.2rem) 0 clamp(3.8rem,6vh,5.2rem); }
.section-heading { text-align:center; margin:0 0 2.2rem; font-size:clamp(1.65rem,1.25rem + 1.2vw,2.25rem); font-weight:620; letter-spacing:.5px; position:relative; }
.section-heading:after { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-12px; width:70px; height:3px; background:linear-gradient(90deg,#6366f1,#3b82f6,#0ea5e9); border-radius:3px; }
.feature-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.feature-card { position:relative; padding:1.55rem 1.35rem 1.35rem; border-radius:22px; background:linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); box-shadow:0 6px 26px -10px rgba(0,0,0,.6); transition:transform .5s, border-color .5s, box-shadow .5s; }
.feature-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 65% 35%,rgba(56,189,248,.4),transparent 70%); opacity:.15; pointer-events:none; }
.feature-card:hover { transform:translateY(-6px); border-color:rgba(255,255,255,.25); box-shadow:0 14px 50px -16px rgba(56,189,248,.5); }
.feature-icon { font-size:2rem; margin-bottom:.75rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.feature-card h3 { margin:.35rem 0 .55rem; font-size:1rem; font-weight:600; letter-spacing:.45px; }
.feature-card p { margin:0; font-size:.72rem; line-height:1.48; color:#94a3b8; letter-spacing:.04em; }

/* CTA */
.cta-section { position:relative; margin:clamp(3.8rem,6vh,5.2rem) 0 0; }
.cta-inner { position:relative; overflow:hidden; padding:clamp(2.6rem,4vw,3.6rem) clamp(1.5rem,2.6vw,3rem) clamp(2.8rem,3.6vw,3.8rem); border-radius:34px; background:linear-gradient(145deg,rgba(30,41,59,.85),rgba(15,23,42,.85)); border:1px solid rgba(255,255,255,.1); box-shadow:0 16px 54px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.05) inset; text-align:center; }
.cta-inner:before { content:""; position:absolute; top:-15%; left:55%; width:520px; height:520px; background:radial-gradient(circle at center,rgba(99,102,241,.5),rgba(56,189,248,.25) 55%,transparent 70%); filter:blur(40px); opacity:.55; pointer-events:none; animation:pulseCta 10s ease-in-out infinite; }
@keyframes pulseCta { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }
.cta-inner h2 { margin:0 0 1rem; font-size:clamp(1.65rem,1.3rem + 1vw,2.25rem); font-weight:630; letter-spacing:.6px; }
.cta-inner p { margin:0 0 1.7rem; font-size:.9rem; line-height:1.55; color:#cbd5e1; }
.cta-actions { display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; }
.cta-actions .browse-btn { min-width:180px; }

/* Responsive */
@media (max-width:1120px){ .hero-section { flex-direction:column; padding:clamp(2.2rem,3vw,3.5rem) clamp(1.4rem,2.4vw,2.4rem) 3.1rem; } .hero-left { flex:none; } .hero-right { width:100%; } .hero-image-container { height:400px; } .hero-mini-stats { justify-content:flex-start; } }
@media (max-width:820px){ .hero-image-container { height:360px; } .feature-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } }
@media (max-width:640px){ .home-page { padding:2.25rem 1.05rem 4.5rem; } .hero-section { border-radius:28px; } .hero-image-container { height:320px; border-radius:24px; } .hero-title { font-size:clamp(1.95rem,1.6rem + 1.8vw,2.55rem); } .hero-cta-row { justify-content:flex-start; } .cta-inner { padding:2.6rem 1.4rem 3rem; border-radius:28px; } }
@media (max-width:500px){ .browse-btn { width:100%; justify-content:center; } .hero-mini-stats { gap:.75rem; } .hero-mini-stats div { min-width:calc(33% - .5rem); flex:1; align-items:center; } .hero-mini-stats div span { text-align:center; } .feature-grid { grid-template-columns:1fr; } .hero-image-container { height:300px; } }/* Shared Landlord Theme (light modern) */
.landlord-dashboard {
  --color-bg-gradient: linear-gradient(140deg,#f5f7fa,#edf1f5 55%,#e2e8f0);
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;
  --color-surface-subtle: #f1f5f9;
  --color-border: rgba(0,0,0,0.10);
  --color-border-strong: rgba(0,0,0,0.18);
  --color-border-accent: #2563eb;
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;
  --color-focus-ring: #2563eb;
  --color-danger: #dc2626;
  --color-warning: #d97706;
  --color-success: #059669;
  --elevation-sm: 0 1px 2px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.06);
  --elevation-md: 0 4px 10px -2px rgba(0,0,0,0.08),0 2px 4px -2px rgba(0,0,0,0.06);
  --elevation-lg: 0 8px 24px -6px rgba(0,0,0,0.15),0 4px 12px -4px rgba(0,0,0,0.08);
  --radius-card: 18px;
  --radius-field: 10px;
  --transition-base: .25s cubic-bezier(.4,.2,.2,1);
  color-scheme: light;
}

.landlord-dashboard.dashboard-container { display:flex; min-height:100vh; background:var(--color-bg-gradient); color:var(--color-text-primary); }
.landlord-main { padding:2rem; flex:1; overflow-y:auto; position:relative; }
.landlord-main:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 18% 22%,rgba(99,132,255,0.16),transparent 55%),radial-gradient(circle at 82% 70%,rgba(16,185,129,0.12),transparent 60%); mix-blend-mode:multiply; opacity:.4; }

.ll-card { position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); box-shadow:var(--elevation-md); padding:1.25rem 1.4rem 1.6rem; transition:box-shadow var(--transition-base), transform var(--transition-base), background .3s; }
.ll-card:hover { box-shadow:var(--elevation-lg); transform:translateY(-2px); }

.ll-field { width:100%; background:#fff; border:1px solid #d1d5db; border-radius:var(--radius-field); padding:.75rem .9rem; font-size:.92rem; font-family:inherit; color:#000 !important; transition:border-color var(--transition-base), box-shadow var(--transition-base); }
.ll-field::placeholder { color:#6b7280; opacity:1; }
.ll-field:focus { outline:none; border-color:var(--color-border-accent); box-shadow:0 0 0 3px rgba(37,99,235,0.25); }
.ll-field[disabled] { opacity:.55; cursor:not-allowed; }
textarea.ll-field, input.ll-field, select.ll-field { color:#000 !important; }

/* Styling for select options */
.ll-field option { color:#000; background:#fff; }
.ll-field option:checked { background:#e0f2fe; color:#000; }

/* Label styling */
.ll-field ~ label, label { color:#000 !important; font-weight:600; }

.ll-btn { --btn-bg:linear-gradient(135deg,#f3f4f6,#e5e7eb); --btn-border:#d1d5db; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:42px; padding:.55rem 1.15rem .6rem; border-radius:12px; border:1px solid var(--btn-border); background:var(--btn-bg); color:#1f2937; font-weight:600; font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; transition:background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.ll-btn.primary { --btn-bg:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; }
.ll-btn.danger { --btn-bg:linear-gradient(135deg,#dc2626,#b91c1c); color:#fff; }
.ll-btn.warn { --btn-bg:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.ll-btn.outline { background:#fff; border-color:#2563eb; color:#2563eb; }
.ll-btn.outline:hover { background:#f0f7ff; }
.ll-btn:focus-visible { outline:2px solid var(--color-focus-ring); outline-offset:2px; }
.ll-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 4px 12px -3px rgba(0,0,0,.25); }
.ll-btn:active:not(:disabled) { transform:translateY(0); }
.ll-btn:disabled { opacity:.55; cursor:not-allowed; }

.ll-grid { display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.ll-stack { display:flex; flex-direction:column; }
.ll-gap-sm { gap:.75rem; }
.ll-gap-md { gap:1.25rem; }

.landlord-main::-webkit-scrollbar { width:10px; }
.landlord-main::-webkit-scrollbar-track { background:rgba(0,0,0,0.06); }
.landlord-main::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#9ca3af,#6b7280); border-radius:6px; }
.landlord-main::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#6b7280,#4b5563); }

@media (max-width:900px){ .ll-grid { grid-template-columns:1fr; } }
@media (max-width:640px){ .landlord-main { padding:1.1rem; } .ll-card { padding:1.1rem 1rem 1.3rem; } }

/* Verification state styles */
.status-pill { display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:capitalize; }
.status-pill.verified { background:linear-gradient(90deg,#ecfdf5,#dcfce7); color:var(--color-success); border:1px solid rgba(5,150,105,0.12); }
.status-pill.rejected { background:linear-gradient(90deg,#fff7f7,#fff1f2); color:var(--color-danger); border:1px solid rgba(220,38,38,0.12); }
.status-pill.pending { background:linear-gradient(90deg,#f8fafc,#f1f5f9); color:var(--color-text-secondary); border:1px solid rgba(99,102,241,0.06); }

.id-modal { max-width:760px; width:92%; border-radius:14px; overflow:hidden; background:var(--color-surface); box-shadow:var(--elevation-lg); border:1px solid var(--color-border-strong); padding:18px; }
.id-modal .modal-header { padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,0.04); margin-bottom:12px; }
.id-modal .modal-header h3 { margin:0; font-size:1.05rem; color:var(--color-text-primary); }
.id-modal .modal-body { max-height:70vh; overflow:auto; padding-right:6px; color:var(--color-text-secondary); }
.id-modal .id-intro { margin:0 0 10px; color:var(--color-text-primary); }
.id-modal .id-guidelines { margin:8px 0 12px; background:var(--color-surface-alt); padding:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.03); }
.id-modal .id-guidelines ul { margin:8px 0 0; padding-left:1.1rem; }
.id-modal .file-drop { display:flex; align-items:center; gap:10px; border:1px dashed rgba(0,0,0,0.08); padding:12px; border-radius:8px; background:transparent; cursor:pointer; color:var(--color-text-secondary); margin-bottom:10px; }
.id-modal .file-drop input { display:none; }
.id-modal .id-file-list { margin-bottom:10px; }
.id-modal .id-file-row { display:flex; gap:8px; align-items:center; padding:8px 10px; background:var(--color-surface); border-radius:8px; border:1px solid rgba(0,0,0,0.04); margin-bottom:6px; }
.id-modal .id-file-row .name { flex:1; font-size:.92rem; color:var(--color-text-primary); }
.id-modal .id-file-row select { min-width:160px; padding:.4rem .5rem; border-radius:8px; border:1px solid rgba(0,0,0,0.06); }
.id-modal .id-file-row .remove { background:transparent; border:0; cursor:pointer; font-size:1rem; color:var(--color-text-muted); }
.id-modal .placeholder { color:var(--color-text-muted); padding:8px; }
.id-modal .id-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.id-modal .id-modal-actions button { min-width:120px; padding:.55rem .8rem; border-radius:10px; border:1px solid rgba(0,0,0,0.06); background:transparent; cursor:pointer; }
.id-modal .id-modal-actions button:first-child { background:transparent; }
.id-modal .id-modal-actions button[disabled] { opacity:.6; cursor:not-allowed; }
.id-modal .review-time { margin-top:10px; color:var(--color-text-muted); font-size:.85rem; }
.id-modal .reject-list { background:#fff6f6; border-left:4px solid rgba(220,38,38,0.12); padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.id-modal .reject-title { margin:0 0 6px; font-weight:700; color:var(--color-danger); }
.id-modal .reject-list ul { margin:0; padding-left:1rem; }

.id-modal-error { color:var(--color-danger); background:rgba(220,38,38,0.04); padding:8px 10px; border-radius:8px; margin-top:8px; }

/* Modal overlay tweaks for centered modal */
.id-modal-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,0.45); z-index:60; }
/* end of landlord-theme.css */
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Slider */
.slick-loading .slick-list
{
    background: #fff url('/assets/ajax-loader-BcnMEykj.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('data:application/vnd.ms-fontobject;base64,AAgAAGQHAAABAAIAAAAAAAIABQkAAAAAAAABAJABAAAAAExQAQAAgCAAAAAAAAAAAAAAAAEAAAAAAAAATxDE8AAAAAAAAAAAAAAAAAAAAAAAAAoAcwBsAGkAYwBrAAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAKAHMAbABpAGMAawAAAAAAAAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=');
    src: url('data:application/vnd.ms-fontobject;base64,AAgAAGQHAAABAAIAAAAAAAIABQkAAAAAAAABAJABAAAAAExQAQAAgCAAAAAAAAAAAAAAAAEAAAAAAAAATxDE8AAAAAAAAAAAAAAAAAAAAAAAAAoAcwBsAGkAYwBrAAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAKAHMAbABpAGMAawAAAAAAAAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=') format('embedded-opentype'), url('data:font/woff;base64,d09GRk9UVE8AAAVkAAsAAAAAB1wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAi4AAAKbH/pWDkZGVE0AAAM4AAAAGgAAABxt0civR0RFRgAAA1QAAAAcAAAAIAAyAARPUy8yAAADcAAAAFIAAABgUBj/rmNtYXAAAAPEAAAAUAAAAWIiC0SwaGVhZAAABBQAAAAuAAAANgABMftoaGVhAAAERAAAABwAAAAkA+UCA2htdHgAAARgAAAADgAAAA4ESgBKbWF4cAAABHAAAAAGAAAABgAFUABuYW1lAAAEeAAAANwAAAFuBSeBwnBvc3QAAAVUAAAAEAAAACAAAwABeJw9ks9vEkEUx2cpWyeUoFYgNkHi2Wt7N3rVm3cTs3UVLC4LxIWEQvi1P3i7O1tYLJDAmlgKGEhQrsajf0j7J3jYTXrQWUrMJG+++b55n5e8NwwKBhHDMLv5kxT3ATEBxKBn3qOAl9zxHgb1MAPhHQgHkyF08Gr/L8B/Eb6zWnmCJ7AJVLubQOheArXvJ1A4EXi6j4I+Zg9F0QFKvsnlBCmXeve+sFEnb/nCptdtQ4QYhVFRAT1HrF8UQK/RL/SbmUbclsvGVFXRZKDHUE38cc4qpkbAAsuwiImvro+ufcfaOIQ6szlrmjRJDaKZKnbjN3GWKIbiIzRFUfCffuxxKOL+3LDlDVvx2TdxN84qZEsnhNBa6pgm2dAsnzbLsETdsmRFxUeHV4e+I2/ptN8TyqV8T3Dt29t7EYOuajVIw2y1Wy3M86w0zg/Fz2IvawmQAUHOVrPVfLkoScVynsqsTG0MGUs4z55nh3mnOJa+li+rl9WpPIcFfDubDeaDC+fLBdYN3QADzLauGfj4B6sZmq6CCpqmtSvF0qlUl2qf5AJIUCSlTqlb7lUG+LRfGzZGzZEyBgccMu6MuqPecNDvD4Y9Kjtj4gD+DsvKVMTcMdtqtZtmkzQstQvYje7Syep0PDSAhSOeHYXYWThEF//A/0YvYV1fSQtpKU5STtrhbQ444OtpKSWJIg3pOg8cBs7maTY1EZf07aq+hjWs7IWzdCYTGhb2CtZ47x+Uhx28AAB4nGNgYGBkAIJz765vANHnCyvqYTQAWnkHswAAeJxjYGRgYOADYgkGEGBiYARCFjAG8RgABHYAN3icY2BmYmCcwMDKwMHow5jGwMDgDqW/MkgytDAwMDGwcjKAQQMDAyOQUmCAgoA01xQGB4ZExUmMD/4/YNBjvP3/NgNEDQPjbbBKBQZGADfLDgsAAHicY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQzMCQqKClOUJz0/z9YHRLv/+L7D+8V3cuHmgAHjGwM6ELUByxUMIOZCmbgAAA5LQ8XeJxjYGRgYABiO68w73h+m68M3EwMIHC+sKIeTqsyqDLeZrwN5HIwgKUB/aYJUgAAeJxjYGRgYLzNwMCgx8QAAkA2IwMqYAIAMGIB7QIAAAACAAAlACUAJQAlAAAAAFAAAAUAAHicbY49asNAEIU/2ZJDfkiRIvXapUFCEqpcptABUrg3ZhEiQoKVfY9UqVLlGDlADpAT5e16IUWysMz3hjfzBrjjjQT/EjKpCy+4YhN5yZoxcirPe+SMWz4jr6S+5UzSa3VuwpTnBfc8RF7yxDZyKs9r5IxHPiKv1P9iZqDnyAvMQ39UecbScVb/gJO03Xk4CFom3XYK1clhMdQUlKo7/d9NF13RkIdfy+MV7TSe2sl11tRFaXYmJKpWTd7kdVnJ8veevZKc+n3I93t9Jnvr5n4aTVWU/0z9AI2qMkV4nGNgZkAGjAxoAAAAjgAF') format('woff'), url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=') format('truetype'), url('/assets/slick-BlzDm7g2.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
/* Panorama Navigation */
.panorama-nav-button {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.panorama-nav-button:hover {
    background: rgba(0,0,0,0.7);
    opacity: 1;
    transform: scale(1.1);
}

.panorama-nav-button:active {
    transform: scale(0.95);
}

.panorama-nav-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}

.panorama-counter {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    z-index: 10;
    transition: all 0.3s ease;
}

.panorama-counter:hover {
    background: rgba(0,0,0,0.9);
}

/* General Styles */
.property-detail-container { 
  max-width:1240px; 
  margin:0 auto; 
  padding:clamp(2.4rem,3.8vw,4rem) clamp(1.15rem,2.2vw,2.25rem) 5rem; 
  font-family:'Inter',system-ui,sans-serif; 
  color:#000;
}

.gradient-text { 
  background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); 
  -webkit-background-clip:text; 
  background-clip:text; 
  color:transparent; 
}

.detail-glass-header { 
  display:flex; 
  flex-direction:column; 
  gap:.85rem; 
  margin:0 0 2rem; 
}

.back-btn { 
  align-self:flex-start; 
  display:inline-flex; 
  align-items:center; 
  gap:.55rem; 
  padding:.7rem 1rem .72rem; 
  font-size:.65rem; 
  font-weight:600; 
  letter-spacing:.14em; 
  text-transform:uppercase; 
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.04)); 
  border:1px solid rgba(255,255,255,.18); 
  border-radius:14px; 
  cursor:pointer; 
  color:#fff; 
  backdrop-filter:blur(6px); 
  box-shadow:0 6px 22px -8px rgba(0,0,0,.55); 
  transition:transform .45s, box-shadow .45s, background .45s; 
}

.back-btn:hover { 
  transform:translateY(-3px); 
  box-shadow:0 10px 34px -10px rgba(56,189,248,.55); 
}

.property-header { 
  text-align:center; 
}

.property-header h1 { 
  margin:0 0 .4rem; 
  font-size:clamp(1.9rem,1.5rem + 2.1vw,2.9rem); 
  font-weight:640; 
  letter-spacing:.5px; 
  line-height:1.05; 
}

.property-location { 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:.45rem; 
  font-size:.68rem; 
  letter-spacing:.18em; 
  text-transform:uppercase; 
  font-weight:600; 
  color:#94a3b8; 
}

.status-remark {
  display:inline-block;
  margin-top:0.35rem;
  padding: .35rem .75rem;
  border-radius: 12px;
  font-weight:700;
  font-size: .78rem;
  color: #10b981; /* default green */
  background: rgba(16,185,129,0.08);
}

.status-remark.not-available {
  color: #fff;
  background: linear-gradient(135deg,#ef4444,#dc2626);
  box-shadow: 0 6px 18px -8px rgba(239,68,68,0.45);
}

.status-remark.available {
  color: #fff;
  background: linear-gradient(135deg,#10b981,#059669);
}

/* Layout */
.property-content { 
  display:flex; 
  gap:clamp(1.6rem,2.2vw,2.4rem); 
  align-items:flex-start; 
}

@media (max-width:1020px){ 
  .property-content { 
    flex-direction:column; 
  } 
}

/* Glass Panel Utility */
.glass-panel { 
  position:relative; 
  border:none; 
  background:linear-gradient(145deg,rgba(15,23,42,.85),rgba(30,41,59,.78)); 
  border-radius:36px; 
  box-shadow:0 14px 48px -12px rgba(0,0,0,.7),0 2px 4px -1px rgba(0,0,0,.4); 
  overflow:hidden; 
}

/* Gallery */
.property-gallery { 
  flex:1; 
  min-width:0; 
  padding:1rem 1rem 1.2rem; 
}

.video-wrapper { 
  margin:0 0 1rem; 
  border-radius:24px; 
  overflow:hidden; 
  box-shadow:0 10px 42px -18px rgba(0,0,0,.65); 
  background:#000; 
  position:relative; 
}

.property-video-player { 
  width:100%; 
  max-height:480px; 
  display:block; 
  object-fit:cover; 
}

@media (max-width:1020px){ 
  .property-video-player { 
    max-height:420px; 
  } 
}

@media (max-width:720px){ 
  .property-video-player { 
    max-height:380px; 
  } 
}

@media (max-width:520px){ 
  .property-video-player { 
    max-height:300px; 
  } 
}

.slider-item { 
  border-radius:24px; 
  overflow:hidden; 
  box-shadow:0 10px 42px -18px rgba(0,0,0,.65); 
}

.property-gallery-image { 
  width:100%; 
  height:440px; 
  object-fit:cover; 
  display:block; 
  transform:scale(1.03); 
  transition:transform 1.2s cubic-bezier(.19,1,.22,1); 
  filter:brightness(.92) saturate(1.05); 
}

.slider-item:hover .property-gallery-image { 
  transform:scale(1.1); 
}

@media (max-width:1020px){ 
  .property-gallery-image { 
    height:400px; 
  } 
}

@media (max-width:720px){ 
  .property-gallery-image { 
    height:360px; 
  } 
}

@media (max-width:520px){ 
  .property-gallery-image { 
    height:300px; 
  } 
}

/* Info Panel */
.property-info { 
  flex:1; 
  padding:1.4rem 1.5rem 1.75rem; 
  display:flex; 
  flex-direction:column; 
  gap:1.15rem; 
  background:transparent; 
  box-shadow:none; 
  border-radius:0; 
}

/* FIXED: Price Section with non-overlapping badges */
.price-section { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  gap: 1rem; 
  padding: 0 0 1rem; 
  border-bottom: 1px solid rgba(255,255,255,.15); 
  flex-wrap: wrap;
}

.price-section h2 { 
  margin: 0; 
  font-size: 1.9rem; 
  font-weight: 650; 
  letter-spacing: .5px; 
  background: linear-gradient(90deg,#6366f1,#3b82f6,#0ea5e9); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
  flex: 1;
  min-width: 200px;
}

.property-badges-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120px;
}

.badge-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
}

.property-badge, 
.property-type-badge {
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  min-width: 80px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-badge { 
  padding: .45rem .9rem .4rem; 
  font-size: .6rem; 
  font-weight: 600; 
  letter-spacing: .14em; 
  text-transform: uppercase; 
  background: linear-gradient(135deg,#6366f1,#3b82f6); 
  color: #fff; 
  border-radius: 18px; 
  box-shadow: 0 4px 18px -6px rgba(99,102,241,.6); 
}

.property-type-badge {
  padding: .45rem .9rem .4rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 18px -6px rgba(99,102,241,.6);
}

.property-type-badge.for-rent {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.property-type-badge.for-sale {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.availability-badge.available {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}
.availability-badge.not-available {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

.pet-types label { font-weight:500; }

/* Features */
.property-features { 
  display:flex; 
  flex-wrap:wrap; 
  gap:.55rem; 
}

.feature { 
  display:inline-flex; 
  align-items:center; 
  gap:.45rem; 
  padding:.55rem .8rem .5rem; 
  font-size:.65rem; 
  font-weight:500; 
  letter-spacing:.05em; 
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.04)); 
  border:1px solid rgba(255,255,255,.14); 
  border-radius:16px; 
  color:#f1f5f9; 
}

.feature-icon { 
  color:#6366f1; 
}

/* NEW: Special styling for floor area and lot area features */
.feature.floor-area-feature,
.feature.lot-area-feature {
  background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(56,189,248,.08));
  border-color:rgba(56,189,248,.3);
  color:#7dd3fc;
}

.feature.floors-feature {
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(139,92,246,.08));
  border-color:rgba(139,92,246,.3);
  color: #000;
}

/* Details */
.details-section { 
  margin:.25rem 0 .5rem; 
}

.details-section h3 { 
  display:flex; 
  align-items:center; 
  gap:.6rem; 
  margin:0 0 .9rem; 
  font-size:1.05rem; 
  font-weight:600; 
  letter-spacing:.5px; 
  background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); 
  -webkit-background-clip:text; 
  background-clip:text; 
  color:transparent; 
  position:relative; 
}

.detail-item { 
  display:flex; 
  gap:.9rem; 
  padding:.55rem 0; 
}

.detail-icon { 
  font-size:1rem; 
  color:#6366f1; 
  margin-top:.15rem; 
}

.detail-item strong { 
  display:block; 
  margin:0 0 .25rem; 
  font-weight:600; 
  letter-spacing:.4px; 
  color:#f1f5f9; 
}

.detail-item p { 
  margin:0; 
  font-size:.72rem; 
  line-height:1.5; 
  letter-spacing:.04em; 
  color:#f3f4f6; 
}

/* Property Highlights Section */
.description-section {
  margin: .25rem 0 .5rem;
}

.description-section h3 {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .5px;
  background: linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.highlight-item {
  margin-bottom: 1rem;
  padding: .8rem;
  background: linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
}

.highlight-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}

.highlight-icon {
  color: #6366f1;
  font-size: .9rem;
}

.highlight-header strong {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .4px;
  color: #f1f5f9;
}

.highlight-content {
  font-size: .7rem;
  line-height: 1.4;
  color: #f3f4f6;
  margin-left: 1.5rem;
}

.highlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
  margin-left: 1.5rem;
}

.market-highlight-tag {
  padding: .3rem .6rem;
  font-size: .6rem;
  font-weight: 500;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px -2px rgba(99,102,241,.4);
}

/* Apply Button */
.apply-btn {
  width: 100%;
  padding: .95rem 1.25rem 1rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(135deg,#10b981,#059669);
  color: #fff;
  box-shadow: 0 10px 34px -12px rgba(16,185,129,.7);
  transition: transform .55s, box-shadow .55s;
  margin-bottom: 10px;
}

.apply-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 48px -16px rgba(16,185,129,.85);
}

.apply-btn:disabled {
  background: #64748b;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Contact */
.contact-btn { 
  margin-top:.25rem; 
  width:100%; 
  padding:.95rem 1.25rem 1rem; 
  font-size:.7rem; 
  font-weight:600; 
  letter-spacing:.14em; 
  text-transform:uppercase; 
  border:none; 
  border-radius:16px; 
  cursor:pointer; 
  background:linear-gradient(135deg,#6366f1,#3b82f6); 
  color:#fff; 
  box-shadow:0 10px 34px -12px rgba(99,102,241,.7); 
  transition:transform .55s, box-shadow .55s, filter .55s; 
}

.contact-btn:hover { 
  transform:translateY(-4px); 
  box-shadow:0 14px 48px -16px rgba(99,102,241,.85); 
}

.detail-actions { 
  display:flex; 
  flex-wrap:wrap; 
  gap:.6rem; 
  margin-top:.6rem; 
}

/* Landlord Card */
.landlord-card { 
  margin:.5rem 0 0; 
  padding:1rem 1.1rem 1.15rem; 
  border:1px solid rgba(255,255,255,.12); 
  background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); 
  border-radius:22px; 
  box-shadow:0 10px 40px -16px rgba(0,0,0,.55); 
  display:flex; 
  flex-direction:column; 
  gap:.8rem; 
}

.landlord-card-header { 
  display:flex; 
  gap:.9rem; 
  align-items:center; 
}

.landlord-card-avatar { 
  width:62px; 
  height:62px; 
  border-radius:50%; 
  object-fit:cover; 
  border:2px solid rgba(255,255,255,.25); 
  background:#0f172a; 
  box-shadow:0 4px 16px -8px rgba(0,0,0,.6); 
}

.landlord-card-meta h4 { 
  margin:0 0 .25rem; 
  font-size:.95rem; 
  font-weight:600; 
  letter-spacing:.4px; 
  color:#f1f5f9; 
  display:flex; 
  align-items:center; 
  gap:.4rem; 
}

.landlord-address, .landlord-contact { 
  margin:0; 
  font-size:.63rem; 
  letter-spacing:.08em; 
  text-transform:uppercase; 
  font-weight:500; 
  color:#94a3b8; 
}

.landlord-contact { 
  letter-spacing:.06em; 
}

.landlord-profile-btn { 
  width:100%; 
  padding:.7rem 1rem .75rem; 
  font-size:.58rem; 
  font-weight:600; 
  letter-spacing:.14em; 
  text-transform:uppercase; 
  border:none; 
  border-radius:14px; 
  cursor:pointer; 
  background:linear-gradient(135deg,#0ea5e9,#6366f1); 
  color:#fff; 
  box-shadow:0 6px 26px -10px rgba(14,165,233,.6); 
  transition:transform .45s,box-shadow .45s,filter .45s; 
}

.landlord-profile-btn:hover { 
  transform:translateY(-3px); 
  box-shadow:0 10px 34px -12px rgba(14,165,233,.7); 
}

.verified-badge { 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  font-size:.55rem; 
  width:18px; 
  height:18px; 
  background:linear-gradient(135deg,#0ea5e9,#6366f1); 
  color:#fff; 
  border-radius:50%; 
  box-shadow:0 2px 8px -2px rgba(14,165,233,.6); 
}

.landlord-card-actions { 
  display:flex; 
  flex-direction:column; 
  gap:.55rem; 
}

/* Loading & Error */
.loading-container { 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  min-height:40vh; 
}

.loading-spinner { 
  border:5px solid rgba(255,255,255,.15); 
  border-top:5px solid #6366f1; 
  border-radius:50%; 
  width:50px; 
  height:50px; 
  animation:spin 1s linear infinite; 
  margin-bottom:1rem; 
}

@keyframes spin { 
  0%{transform:rotate(0);} 
  100%{transform:rotate(360deg);} 
}

.error-message { 
  text-align:center; 
  padding:3.2rem 1.4rem; 
  border:1px solid rgba(255,255,255,.12); 
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); 
  border-radius:30px; 
  box-shadow:0 12px 48px -18px rgba(0,0,0,.65); 
  backdrop-filter:blur(10px); 
}

.error-message h3 { 
  margin:0 0 1rem; 
  font-size:1.35rem; 
  font-weight:620; 
  letter-spacing:.5px; 
  background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); 
  -webkit-background-clip:text; 
  background-clip:text; 
  color:transparent; 
}

.error-message .back-btn { 
  margin-top:.6rem; 
}

/* Status Remark */
.status-remark {
  padding: .6rem 1.2rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 20px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  display: inline-block;
  margin-top: .5rem;
  box-shadow: 0 4px 16px -6px rgba(34,197,94,.4);
}

/* Panorama Section */
.panorama-section .section-title {
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.5px;
  background:linear-gradient(90deg,#aee7ff 0%,#60aaff 25%,#38bdf8 55%,#b3cfff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:brightness(1.35) drop-shadow(0 2px 8px rgba(56,189,248,0.18));
  margin-bottom:.7rem;
}

.panorama-section .section-title.white {
  background:none;
  color:#fff;
  filter:drop-shadow(0 2px 8px rgba(56,189,248,0.13));
}

/* NEW: Better responsive handling for features */
@media (max-width:680px){ 
  .property-info { 
    padding:1.2rem 1.2rem 1.6rem; 
  } 
  
  .glass-panel { 
    border-radius:28px; 
  } 
  
  .price-section { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 1rem; 
  }
  
  .property-badges-container {
    align-items: flex-start;
    width: 100%;
  }
  
  .badge-group {
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .property-features {
    gap: .4rem;
  }
  
  .feature {
    font-size: .6rem;
    padding: .45rem .7rem .4rem;
  }
  
  .highlight-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }
  
  .highlight-content {
    margin-left: 0;
  }
  
  .highlight-tags {
    margin-left: 0;
  }
}

@media (max-width:520px){ 
  .property-detail-container { 
    padding:2.2rem 1rem 4.2rem; 
  } 
  
  .detail-glass-header { 
    margin-bottom:1.6rem; 
  } 
  
  .property-header h1 { 
    font-size:clamp(1.7rem,1.5rem + 1.4vw,2.3rem); 
  } 
  
  .badge-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .property-badge,
  .property-type-badge {
    min-width: 100px;
  }
  
  .property-features {
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .price-section h2 {
    font-size: 1.6rem;
  }
  
  .property-badge,
  .property-type-badge {
    font-size: 0.55rem;
    padding: 0.4rem 0.7rem 0.35rem;
    min-width: 90px;
  }
  
  .feature {
    font-size: .55rem;
    padding: .4rem .6rem .35rem;
  }
}

/* Hide deprecated units display */
.improved-units { display:none; }
.units-pill { display:none; }
.units-label { display:none; }

/* Feedback Section Styles */
.feedback-section {
  margin: 3rem 0 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.feedback-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  color: #fff;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feedback-item {
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.feedback-item:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 4px 16px rgba(56,189,248,.1);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.feedback-name {
  color: #38bdf8;
  font-size: 1rem;
}

.feedback-date {
  color: #94a3b8;
  font-size: 0.85rem;
}

.feedback-message {
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

.no-feedback {
  text-align: center;
  color: #94a3b8;
  padding: 2rem;
  font-style: italic;
}

/* Feedback Button */
.feedback-btn {
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.feedback-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 20px rgba(16,185,129,.3);
  transform: translateY(-2px);
}

.feedback-btn:active {
  transform: translateY(0);
}

/* Feedback Modal */
.feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.feedback-modal {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: slideUp 0.3s ease;
}

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

.feedback-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.feedback-modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
  color: #fff;
}

.modal-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-radius: 6px;
}

.modal-close-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #cbd5e1;
}

.form-group input,
.form-group textarea {
  padding: 0.85rem;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #64748b;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  background: rgba(255,255,255,.08);
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56,189,248,.1);
}

.form-group input:disabled,
.form-group textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

.char-count {
  font-size: 0.8rem;
  color: #64748b;
  text-align: right;
}

.feedback-modal-footer {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  justify-content: flex-end;
}

.modal-cancel-btn,
.modal-submit-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.modal-cancel-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #cbd5e1;
}

.modal-cancel-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
}

.modal-cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-submit-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid rgba(16,185,129,.3);
  color: #fff;
}

.modal-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 20px rgba(16,185,129,.3);
  transform: translateY(-2px);
}

.modal-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}.property-listing-container { 
    max-width:1320px; 
    margin:0 auto; 
    padding:clamp(2.2rem,3.5vw,3.6rem) clamp(1.1rem,2.2vw,2.4rem) 5rem; 
    font-family:'Inter',system-ui,sans-serif; 
    color:#f1f5f9; 
    position:relative; 
}

.property-listing-header { 
    margin:0 0 2.2rem; 
}

.glass-panel { 
    position:relative; 
    border:1px solid rgba(255,255,255,.09); 
    background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(43, 138, 228, 0.78)); 
    border-radius:34px; 
    padding:clamp(2.2rem,3vw,3.2rem) clamp(1.4rem,2.6vw,2.8rem) clamp(2.2rem,3vw,2.8rem); 
    box-shadow:0 14px 46px -14px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05) inset; 
    overflow:hidden; 
}

.listing-header-inner { 
    max-width:1000px; 
    margin:0 auto; 
    text-align:center; 
    position:relative; 
    z-index:1; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
}

.listing-title { 
    font-size:clamp(2rem,1.7rem + 2.1vw,3.1rem); 
    font-weight:650; 
    margin:0 0 .9rem; 
    line-height:1.05; 
    letter-spacing:.5px; 
    width:100%; 
}

.gradient-text {
    background:linear-gradient(90deg,#aee7ff 0%,#60aaff 25%,#38bdf8 55%,#b3cfff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:brightness(1.35) drop-shadow(0 2px 8px rgba(71, 88, 95, 0.18));
}

.subtitle { 
    font-size:clamp(.9rem,.85rem + .25vw,1.05rem); 
    color:#cbd5e1; 
    margin:0 0 1.6rem; 
    width:100%; 
}

.controls-wrapper { 
    width:100%; 
    margin-top:1.2rem; 
    display:flex; 
    flex-direction:column; 
    gap:1rem; 
}

.controls-align-left { 
    text-align:left; 
    margin-left:auto; 
    margin-right:auto; 
    width:100%; 
    max-width:1000px; 
}

.search-input-container { 
    position:relative; 
    width:100%; 
    display:flex; 
    flex-direction:column; 
    align-items:stretch; 
    gap:.7rem; 
}

.search-field-wrapper {
    position:relative;
    width:100%;
}

.search-icon { 
    position:absolute; 
    left:16px; 
    top:50%;
    transform:translateY(-50%);
    font-size:1.1rem; 
    color:#f3f3f3; 
    z-index:2;
}

.property-search { 
    width:100%;
    padding:1rem 1.1rem 1rem 2.9rem; 
    border:1px solid rgba(247, 245, 245, 0.18); 
    background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255, 255, 255, 0.04)); 
    color:#f1f5f9; 
    border-radius:16px; 
    font-size:.85rem; 
    letter-spacing:.4px; 
    outline:none; 
    box-shadow:0 0 0 0 rgba(99,102,241,0); 
    transition:box-shadow .45s,border-color .45s, background .45s; 
    backdrop-filter:blur(6px); 
}

.property-search::placeholder { 
    color:#fff; 
    opacity:.85; 
}

.property-search:focus { 
    border-color:#6366f1; 
    box-shadow:0 0 0 4px rgba(99,102,241,.25); 
    background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(43, 103, 172, 0.07)); 
}

.listing-sort-row { 
    width:100%; 
    display:flex; 
    flex-wrap:wrap; 
    gap:1.2rem; 
    align-items:center; 
    margin-top:0.2rem; 
    justify-content: space-between;
}

.filter-control-group {
    display:flex;
    gap:8px;
    align-items:center;
}

.filter-control-group label {
    color:#cbd5e1;
    font-size:0.78rem;
    font-weight:600;
    margin-right:6px;
    white-space: nowrap;
}

.filter-control-group select {
    padding:8px 10px;
    border-radius:10px;
    background:rgba(15,23,42,0.7);
    color:#fff;
    border:1px solid rgba(255,255,255,0.08);
    font-size:0.8rem;
    transition: all 0.3s ease;
}

.filter-control-group select:focus {
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.3);
    outline:none;
}

.filter-control-group select option {
    background:rgba(15,23,42,0.95);
    color:#f1f5f9;
    border:none;
    padding:8px;
}

.toggle-filters-btn { 
    padding:.95rem 1.2rem; 
    font-size:.7rem; 
    font-weight:600; 
    letter-spacing:.09em; 
    text-transform:uppercase; 
    background:linear-gradient(135deg,#6366f1,#3b82f6); 
    border:1px solid rgba(255,255,255,.2); 
    color:#fff; 
    border-radius:14px; 
    cursor:pointer; 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:.45rem; 
    min-width:140px; 
    box-shadow:0 6px 24px -8px rgba(99,102,241,.6); 
    transition:transform .4s,box-shadow .4s,filter .4s; 
    margin-left: auto;
}

.toggle-filters-btn.active { 
    filter:brightness(1.1); 
}

.toggle-filters-btn:hover { 
    transform:translateY(-3px); 
    box-shadow:0 10px 34px -10px rgba(99,102,241,.75); 
}

.filters-container {
    margin-top:1.2rem;
    padding:1.6rem 1.4rem 1.8rem;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    border-radius:26px;
    box-shadow:0 10px 42px -18px rgba(0,0,0,.55);
    backdrop-filter:blur(10px);
    animation:fadeSlide .65s ease;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

@keyframes fadeSlide { 
    0%{opacity:0; transform:translateY(14px);} 
    100%{opacity:1; transform:translateY(0);} 
}

.filters-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:1rem 1.1rem;
    margin:0 0 1.2rem;
    width:100%;
}

.filter-group { 
    display:flex; 
    flex-direction:column; 
    gap:.45rem; 
}

.filter-group label { 
    font-size:.55rem; 
    font-weight:600; 
    letter-spacing:.18em; 
    text-transform:uppercase; 
    color:#94a3b8; 
    display:flex; 
    align-items:center; 
    gap:.45rem; 
}

.filter-group select, 
.filter-group input[type="text"], 
.filter-group input[type="number"] { 
    padding:.75rem .9rem; 
    border:1px solid rgba(255,255,255,.18); 
    background:linear-gradient(135deg,rgba(15,23,42,.85),rgba(30,41,59,.75)); 
    color:#f8fafc; 
    border-radius:12px; 
    font-size:.78rem; 
    letter-spacing:.35px; 
    outline:none; 
    transition:border-color .35s, background .35s, box-shadow .35s; 
}

.filter-group select { 
    cursor:pointer; 
    appearance:none; 
}

.filter-group select:focus, 
.filter-group input:focus { 
    border-color:#6366f1; 
    box-shadow:0 0 0 3px rgba(99,102,241,.3); 
    background:linear-gradient(135deg,rgba(30,41,59,.9),rgba(15,23,42,.85)); 
}

.filter-group select option {
    background:rgba(15,23,42,0.95);
    color:#f1f5f9;
    border:none;
    padding:8px;
    font-size:.78rem;
}

.market-highlights-filter select {
    height:120px;
}

.market-highlights-select option {
    background:rgba(15,23,42,0.95);
    color:#f1f5f9;
    border:none;
    padding:8px 12px;
    margin:2px 0;
    border-radius:6px;
}

.market-highlights-select option:checked {
    background:linear-gradient(135deg,rgba(99,102,241,.3),rgba(56,189,248,.2));
    color:#fff;
    border:1px solid rgba(99,102,241,.5);
}

.market-highlights-select option:hover {
    background:rgba(99,102,241,.2);
}

.price-range { 
    display:flex; 
    align-items:center; 
    gap:.5rem; 
}

.price-range input { 
    flex:1; 
    min-width:0; 
}

.price-range span { 
    font-size:.65rem; 
    text-transform:uppercase; 
    letter-spacing:.18em; 
    color:#64748b; 
}

.amenities { 
    gap:.4rem; 
}

.amenity-checkbox { 
    display:flex; 
    align-items:center; 
    gap:.45rem; 
    font-size:.68rem; 
}

.amenity-checkbox input { 
    width:18px; 
    height:18px; 
    accent-color:#6366f1; 
    cursor:pointer; 
}

.amenity-checkbox label { 
    color:#cbd5e1; 
    font-weight:500; 
    letter-spacing:.3px; 
    display:flex; 
    align-items:center; 
    gap:.35rem; 
    text-transform:none;
}

.landmarks-filter {
    grid-column: 1 / -1;
}

.landmarks-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:.5rem;
    max-height:200px;
    overflow-y:auto;
    padding-right:.3rem;
}

.landmark-option {
    background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    padding:.4rem .6rem;
    transition:background .25s,border-color .25s;
}

.landmark-option:hover {
    background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(56,189,248,.1));
    border-color:rgba(99,102,241,.4);
}

.reset-filters { 
    display:inline-flex; 
    margin:0 auto 0; 
    padding:.8rem 1.2rem; 
    font-size:.65rem; 
    letter-spacing:.12em; 
    text-transform:uppercase; 
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); 
    color:#fff; 
    border:1px solid rgba(255,255,255,.24); 
    border-radius:14px; 
    cursor:pointer; 
    font-weight:600; 
    transition:transform .45s, box-shadow .45s, background .45s; 
}

.reset-filters:hover { 
    transform:translateY(-3px); 
    box-shadow:0 8px 30px -10px rgba(99,102,241,.6); 
    background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); 
}

.results-row { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:1rem; 
    flex-wrap:wrap; 
    margin-top:.9rem; 
    padding:.4rem 0 .1rem; 
    width:100%;
}

.results-count { 
    flex:1; 
    display:flex; 
    flex-wrap:wrap; 
    align-items:center; 
    gap:.45rem; 
    font-size:.72rem; 
    font-weight:600; 
    letter-spacing:.16em; 
    text-transform:uppercase; 
    color:#cbd5e1; 
}

.results-metrics { 
    font-weight:500; 
    letter-spacing:.05em; 
    color:#94a3b8; 
    text-transform:none; 
}

.properties-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); 
    gap:1.25rem; 
    margin:2.2rem 0 0; 
}

.property-card { 
    position:relative; 
    border:1px solid rgba(255,255,255,.1); 
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); 
    border-radius:26px; 
    overflow:hidden; 
    box-shadow:0 10px 40px -16px rgba(0,0,0,.6); 
    cursor:pointer; 
    transition:transform .6s, box-shadow .6s, border-color .6s; 
    backdrop-filter:blur(8px); 
}

.property-card:hover { 
    transform:translateY(-8px); 
    box-shadow:0 18px 56px -18px rgba(56,189,248,.55); 
    border-color:rgba(255,255,255,.25); 
}

.property-badges {
    position:absolute;
    top:14px;
    left:14px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:2;
    max-width:120px;
}

.property-type-badge {
    padding:6px 12px;
    border-radius:4px;
    font-size:0.8rem;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.property-type-badge.for-rent {
    background:rgba(34,197,94,0.9);
    color:white;
}

.property-type-badge.for-sale {
    background:rgba(59,130,246,0.9);
    color:white;
}

.favorite-icon { 
    position:absolute; 
    top:14px; 
    right:14px; 
    z-index:3; 
    width:40px; 
    height:40px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    border-radius:50%; 
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.78)); 
    color:#e11d48; 
    box-shadow:0 6px 22px -8px rgba(0,0,0,.5); 
    cursor:pointer; 
    transition:transform .45s, background .45s; 
}

.favorite-icon:hover, 
.favorite-icon:focus { 
    transform:scale(1.08); 
    outline:none; 
    box-shadow:0 8px 30px -10px rgba(225,29,72,.55); 
}

.favorite-icon svg { 
    font-size:1.25rem; 
    pointer-events:none; 
}

.property-images { 
    position:relative; 
    width:100%; 
    height:200px; 
    overflow:hidden; 
}

.property-image { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    transition:transform 1.2s cubic-bezier(.19,1,.22,1); 
    filter:brightness(.92) saturate(1.05); 
}

.property-card:hover .property-image { 
    transform:scale(1.12); 
}

.property-price-row {
    position:absolute;
    left:14px;
    bottom:14px;
    display:flex;
    align-items:center;
    gap:0.7rem;
    z-index:2;
}

.property-price {
    padding:.55rem .95rem .5rem;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.12em;
    color:#fff;
    background:linear-gradient(135deg,rgba(0,0,0,.68),rgba(0,0,0,.55));
    border-radius:14px;
    backdrop-filter:blur(4px);
    box-shadow:0 4px 16px -6px rgba(0,0,0,.6);
    display:flex;
    align-items:center;
}

.property-availability {
    padding:.48rem .85rem .45rem;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.11em;
    color:#fff;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    border-radius:12px;
    margin-left:0;
    box-shadow:0 2px 8px -2px rgba(34,197,94,.25);
    display:flex;
    align-items:center;
    white-space:nowrap;
    filter:brightness(1.15) drop-shadow(0 1px 4px rgba(34,197,94,0.13));
}

.property-availability.unavailable,
.property-availability.not-available {
    background:linear-gradient(135deg,#f87171,#ef4444);
    box-shadow:0 2px 8px -2px rgba(239,68,68,.18);
}

.property-availability.not-ready {
    background:linear-gradient(135deg,#fde047,#facc15);
    color:#7a5d00;
    text-shadow:0 1px 4px rgba(255,255,255,0.13);
    box-shadow:0 2px 8px -2px rgba(250,204,21,.18);
    filter:brightness(1.08) drop-shadow(0 1px 4px rgba(250,204,21,0.13));
}

.property-details { 
    padding:1.05rem 1.05rem 1.25rem; 
    display:flex; 
    flex-direction:column; 
    gap:.6rem; 
}

.property-details h3 { 
    margin:.2rem 0 .15rem; 
    font-size:.95rem; 
    font-weight:600; 
    letter-spacing:.4px; 
    color:#f1f5f9; 
    line-height:1.25; 
}

.property-category {
    display:inline-block;
    font-size:0.6rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#94a3b8;
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    padding:0.3rem 0.6rem;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.1);
    width:fit-content;
}

.property-date { 
    display:inline-block; 
    margin:.05rem 0 .2rem; 
    font-size:.5rem; 
    font-weight:600; 
    letter-spacing:.14em; 
    text-transform:uppercase; 
    color:#94a3b8; 
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); 
    padding:.38rem .6rem .34rem; 
    border:1px solid rgba(255,255,255,.1); 
    border-radius:12px; 
    backdrop-filter:blur(4px); 
    box-shadow:0 4px 12px -8px rgba(0,0,0,.5); 
}

.property-location { 
    display:flex; 
    align-items:center; 
    gap:.35rem; 
    font-size:.65rem; 
    letter-spacing:.12em; 
    text-transform:uppercase; 
    font-weight:600; 
    margin:.15rem 0 .15rem; 
    color:#94a3b8; 
}

.property-features { 
    display:flex; 
    flex-wrap:wrap; 
    gap:.4rem; 
    margin:.15rem 0 .35rem; 
}

.feature-tag { 
    display:inline-flex; 
    align-items:center; 
    gap:.3rem; 
    font-size:.55rem; 
    font-weight:500; 
    letter-spacing:.05em; 
    padding:.45rem .65rem .4rem; 
    border-radius:14px; 
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); 
    border:1px solid rgba(255,255,255,.14); 
    color:#cbd5e1; 
    backdrop-filter:blur(4px); 
}

/* NEW: Better styling for feature tags with icons */
.feature-tag.floor-area,
.feature-tag.lot-area {
    background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(56,189,248,.08));
    border-color:rgba(56,189,248,.3);
    color:#7dd3fc;
}

.feature-tag.floors {
    background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(139,92,246,.08));
    border-color:rgba(139,92,246,.3);
    color:#c4b5fd;
}

.property-landmarks { 
    font-size:.62rem; 
    line-height:1.4; 
    color:#a5b4c6; 
    margin:.1rem 0 .2rem; 
    letter-spacing:.04em; 
}

.view-btn { 
    margin-top:.25rem; 
    width:100%; 
    padding:.75rem 1rem .78rem; 
    font-size:.6rem; 
    font-weight:600; 
    letter-spacing:.12em; 
    text-transform:uppercase; 
    border:none; 
    border-radius:14px; 
    cursor:pointer; 
    background:linear-gradient(135deg,#6366f1,#3b82f6); 
    color:#fff; 
    box-shadow:0 6px 24px -8px rgba(99,102,241,.6); 
    transition:transform .45s, box-shadow .45s, filter .45s; 
}

.view-btn:hover { 
    transform:translateY(-3px); 
    box-shadow:0 10px 34px -10px rgba(99,102,241,.75); 
}

.landlord-mini { 
    display:flex; 
    align-items:center; 
    gap:.5rem; 
    margin-top:.15rem; 
    font-size:.62rem; 
    font-weight:600; 
    letter-spacing:.08em; 
    text-transform:uppercase; 
    color:#cbd5e1; 
    cursor:pointer; 
    background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); 
    padding:.4rem .55rem .45rem; 
    border:1px solid rgba(255,255,255,.14); 
    border-radius:14px; 
    width:fit-content; 
    box-shadow:0 4px 16px -8px rgba(0,0,0,.5); 
    transition:transform .45s, box-shadow .45s, background .45s; 
}

.landlord-mini:hover { 
    transform:translateY(-2px); 
    box-shadow:0 8px 28px -10px rgba(56,189,248,.55); 
    background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.04)); 
}

.landlord-avatar { 
    width:28px; 
    height:28px; 
    border-radius:50%; 
    object-fit:cover; 
    border:1px solid rgba(255,255,255,.25); 
    background:#0f172a; 
}

.landlord-name { 
    display:inline-flex; 
    align-items:center; 
    gap:.3rem; 
}

.verified-badge { 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    font-size:.55rem; 
    width:15px; 
    height:15px; 
    background:linear-gradient(135deg,#0ea5e9,#6366f1); 
    color:#fff; 
    border-radius:50%; 
    box-shadow:0 2px 8px -2px rgba(14,165,233,.6); 
}

.no-properties-message { 
    grid-column:1 / -1; 
    text-align:center; 
    padding:3.6rem 1.6rem 3.8rem; 
    border:1px solid rgba(255,255,255,.12); 
    background:linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); 
    border-radius:34px; 
    box-shadow:0 14px 48px -18px rgba(0,0,0,.6); 
    backdrop-filter:blur(10px); 
}

.no-properties-message img { 
    width:170px; 
    margin:0 0 1.2rem; 
    opacity:.6; 
}

.no-properties-message h3 { 
    margin:0 0 .6rem; 
    font-size:1.35rem; 
    font-weight:620; 
    letter-spacing:.5px; 
    background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); 
    -webkit-background-clip:text; 
    background-clip:text; 
    color:transparent; 
}

.no-properties-message p { 
    margin:0 0 1.4rem; 
    font-size:.75rem; 
    letter-spacing:.05em; 
    color:#94a3b8; 
}

.card-units-pill-row {
    display:flex;
    align-items:center;
    gap:8px;
    margin:.1rem 0;
}

.card-units-pill {
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    background:rgba(56,189,248,0.15);
    border:1px solid rgba(56,189,248,0.3);
    border-radius:8px;
    font-size:0.6rem;
    font-weight:600;
    color:#38bdf8;
}

.card-units-label {
    font-size:0.55rem;
    color:#94a3b8;
    text-transform:uppercase;
    letter-spacing:0.1em;
}

/* NEW: Responsive adjustments for feature tags */
@media (max-width:480px) {
    .property-features {
        gap:.3rem;
    }
    
    .feature-tag {
        font-size:.5rem;
        padding:.35rem .55rem .3rem;
    }
}

@media (max-width:700px){
    .listing-sort-row { 
        flex-direction:column; 
        gap:0.7rem; 
        align-items:stretch; 
    }
    
    .toggle-filters-btn {
        margin-left:0;
        width:100%;
    }
}

@media (max-width:820px){ 
    .search-input-container { 
        flex-direction:column; 
        gap:.8rem; 
    } 
}

@media (max-width:620px){ 
    .results-row { 
        flex-direction:column; 
        align-items:stretch; 
    } 
}

@media (max-width:680px){ 
    .properties-grid { 
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); 
    } 
}

@media (max-width:560px){ 
    .property-listing-container { 
        padding:2rem 1rem 4.5rem; 
    } 
    .glass-panel { 
        padding:2rem 1.1rem 2.2rem; 
        border-radius:28px; 
    } 
    .listing-title { 
        font-size:clamp(1.8rem,1.5rem + 2vw,2.4rem); 
    } 
    .properties-grid { 
        gap:1rem; 
    } 
    .property-images { 
        height:180px; 
    } 
}

@media (max-width:480px) {
    .property-badges {
        max-width:100px;
    }
    
    .property-type-badge {
        font-size:0.7rem;
        padding:4px 8px;
    }
}

@media (max-width:420px){ 
    .property-images { 
        height:160px; 
    } 
    .feature-tag { 
        font-size:.5rem; 
        padding:.4rem .55rem .35rem; 
    } 
}/* Login Page Revamp (Aligned with Register Theme) */
.login-page { min-height:100vh; display:flex; align-items:stretch; justify-content:center; gap:3rem; padding:clamp(2rem,4vh,3.5rem) clamp(1.2rem,2.5vw,3rem); background:transparent; position:relative; }
.login-page::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(56,189,248,.18),transparent 70%), radial-gradient(circle at 80% 75%,rgba(99,102,241,.15),transparent 75%); opacity:.55; pointer-events:none; }

/* Shared illustration styles (mirroring Register) */
.with-illustration .auth-illustration { flex:1.1; position:relative; display:flex; align-items:flex-end; justify-content:flex-start; border:1px solid rgba(0,0,0,.08); background:linear-gradient(135deg,#e0f2fe,#f5f3ff); border-radius:28px; overflow:hidden; box-shadow:0 4px 28px -8px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.04); min-height:580px; }
.with-illustration .auth-illustration:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(99,102,241,.25),transparent 60%), radial-gradient(circle at 30% 80%,rgba(56,189,248,.25),transparent 65%); mix-blend-mode:multiply; opacity:.8; pointer-events:none; }
.illu-art { position:absolute; inset:0; display:flex; }
.illu-art img, .illu-art source { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.05) contrast(1.02); }
.with-illustration .illu-inner { position:relative; z-index:2; padding:2.2rem 2.4rem 2.6rem; max-width:480px; }
.illu-inner h2 { margin:0 0 .9rem; font-size:clamp(1.9rem,1.4rem + 1.4vw,2.6rem); font-weight:600; line-height:1.08; letter-spacing:.5px; background:linear-gradient(90deg,#2563eb,#6366f1,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.illu-inner p { margin:0; font-size:.95rem; line-height:1.5; color:#334155; font-weight:500; letter-spacing:.3px; }
.auth-form-wrap { flex:1; display:flex; flex-direction:column; align-items:flex-start; }
.login-page h1 { width:100%; max-width:520px; margin:0 0 1.1rem; font-size:clamp(1.65rem,1.3rem + 1vw,2.25rem); font-weight:600; letter-spacing:.5px; background:var(--grad-accent,linear-gradient(90deg,#38bdf8,#6366f1)); -webkit-background-clip:text; background-clip:text; color:transparent; text-align:left; }

.login-form { width:100%; max-width:520px; display:flex; flex-direction:column; gap:1rem; background:#ffffff; border:1px solid var(--panel-border,#e2e8f0); border-radius:18px; padding:1.8rem 2rem 2rem; box-shadow:0 4px 18px -2px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05); position:relative; overflow:hidden; }
.login-form::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(56,189,248,.15),rgba(99,102,241,.15)); opacity:.55; pointer-events:none; mix-blend-mode:overlay; }

.input-group { display:flex; flex-direction:column; gap:.45rem; position:relative; }
.input-group label { font-size:.65rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#475569; }

.input-wrapper { display:flex; align-items:center; gap:.55rem; background:#f1f5f9; border:1px solid #d8e2ec; border-radius:12px; padding:10px 14px; transition:border .25s, background .25s; position:relative; }
.input-wrapper:focus-within { border-color:#6366f1; background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.input-wrapper input { flex:1; background:transparent; border:none; outline:none; font-size:.9rem; font-weight:500; color:#0f172a; letter-spacing:.3px; padding:2px 0; }
.input-wrapper input::placeholder { color:#6b7280; }
.input-wrapper svg { flex-shrink:0; opacity:.7; }
.eye-icon { cursor:pointer; display:flex; align-items:center; justify-content:center; padding:2px; }
.eye-icon:hover svg { opacity:1; }

/* Password Requirement Text */
.password-requirement {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 0.35rem;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
}

/* Remember / Forgot */
.remember-forgot { display:flex; justify-content:space-between; align-items:center; width:100%; font-size:.68rem; letter-spacing:.05em; margin-top:.25rem; }
.remember-forgot label { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:500; color:#334155; }
.remember-forgot input[type="checkbox"] { width:18px; height:18px; accent-color:#6366f1; cursor:pointer; }
.remember-forgot a { color:#6366f1; font-weight:600; text-decoration:none; }
.remember-forgot a:hover { text-decoration:underline; }

/* Button */
.login-btn { margin-top:.25rem; width:100%; padding:14px 20px; font-size:.8rem; font-weight:600; letter-spacing:.07em; background:linear-gradient(135deg,#6366f1,#3b82f6); color:#fff; border:none; border-radius:14px; cursor:pointer; position:relative; box-shadow:0 6px 20px -4px rgba(99,102,241,.55); transition:filter .35s, transform .35s; text-transform:uppercase; }
.login-btn:hover { filter:brightness(1.08); transform:translateY(-2px); }
.login-btn:disabled { opacity:.65; cursor:not-allowed; filter:grayscale(.3); }

/* Error */
.error-message { background:linear-gradient(90deg,rgba(220,38,38,.12),rgba(220,38,38,.04)); border:1px solid rgba(220,38,38,.35); color:#991b1b; padding:.75rem 1rem; border-radius:10px; font-size:.7rem; letter-spacing:.04em; }

/* Signup Link */
.signup-link { text-align:center; font-size:.68rem; letter-spacing:.05em; color:#475569; margin-top:.25rem; }
.signup-link a { color:#6366f1; font-weight:600; text-decoration:none; }
.signup-link a:hover { text-decoration:underline; }

/* Spinner placeholder */
.spinner { width:18px; height:18px; border:3px solid #ffffff55; border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Responsive */
@media (max-width:1080px){ .with-illustration { flex-direction:column; gap:2rem; } .with-illustration .auth-illustration { min-height:360px; } }
@media (max-width:900px){ .with-illustration { flex-direction:column; } .with-illustration .auth-illustration { order:2; } }
@media (max-width:620px){
	.login-form { padding:1.1rem 0.9rem 1.1rem; width:100%; max-width:100%; }
	.login-page { padding:1rem 0.8rem 1.6rem; gap:1rem; }
	.illu-inner { padding:1.1rem 1rem 1.2rem; }
	.auth-illustration { order:2; width:100%; }
	.auth-illustration .illu-art img { max-height:220px; object-fit:cover; }
    .password-requirement {
        font-size: 0.65rem;
        padding: 0.4rem 0.6rem;
    }
}

/* Ensure form stacks above illustration and stretches full width on small screens */
@media (max-width:640px) {
	.login-page, .with-illustration { flex-direction:column; align-items:stretch; }
	.auth-form-wrap { order:1; width:100%; display:flex; justify-content:center; }
	.login-page h1 { text-align:left; width:100%; padding:0 .6rem; }
	.login-form { width:100%; max-width:760px; padding:1rem .85rem; }
	.input-wrapper { padding:12px 12px; }
	.input-wrapper input { font-size:0.98rem; }
	.login-btn { padding:13px 16px; font-size:0.96rem; }
}

/* Very small phones: hide decorative illustration to prioritize form */
@media (max-width:420px) {
	.auth-illustration { display:none !important; }
	.login-page { padding:0.8rem 0.6rem 1.1rem; }
	.login-form { padding:0.9rem 0.8rem; gap:0.9rem; }
    .password-requirement {
        font-size: 0.62rem;
        padding: 0.35rem 0.5rem;
        line-height: 1.3;
    }
}:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Register Page Revamp (Compact Multi-Column) */
.register-page { min-height:100vh; display:flex; align-items:stretch; justify-content:center; gap:3rem; padding:clamp(2rem,4vh,3.5rem) clamp(1.2rem,2.5vw,3rem); background:transparent; position:relative; }
.register-page::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(56,189,248,.18),transparent 70%), radial-gradient(circle at 80% 75%,rgba(99,102,241,.15),transparent 75%); opacity:.55; pointer-events:none; }

/* Illustration side */
.with-illustration .auth-illustration { flex:1.1; position:relative; display:flex; align-items:flex-end; justify-content:flex-start; border:1px solid rgba(0,0,0,.08); background:linear-gradient(135deg,#e0f2fe,#f5f3ff); border-radius:28px; overflow:hidden; box-shadow:0 4px 28px -8px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.04); min-height:620px; }
.with-illustration .auth-illustration:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(99,102,241,.25),transparent 60%), radial-gradient(circle at 30% 80%,rgba(56,189,248,.25),transparent 65%); mix-blend-mode:multiply; opacity:.8; pointer-events:none; }
.illu-art { position:absolute; inset:0; display:flex; }
.illu-art img, .illu-art source { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.05) contrast(1.02); }
.with-illustration .illu-inner { position:relative; z-index:2; padding:2.2rem 2.4rem 2.6rem; max-width:480px; }
.illu-inner h2 { margin:0 0 .9rem; font-size:clamp(1.9rem,1.4rem + 1.4vw,2.6rem); font-weight:600; line-height:1.08; letter-spacing:.5px; background:linear-gradient(90deg,#2563eb,#6366f1,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.illu-inner p { margin:0; font-size:.95rem; line-height:1.5; color:#334155; font-weight:500; letter-spacing:.3px; }

.auth-form-wrap { flex:1; display:flex; flex-direction:column; align-items:flex-start; }

.register-page h1 { width:100%; max-width:900px; margin:0 0 1.1rem; font-size:clamp(1.55rem,1.2rem + 1vw,2.2rem); font-weight:600; letter-spacing:.5px; background:var(--grad-accent,linear-gradient(90deg,#38bdf8,#6366f1)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.register-form { width:100%; max-width:900px; display:grid; gap:1.1rem 1.25rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); background:#ffffff; border:1px solid var(--panel-border,#e2e8f0); border-radius:18px; padding:1.6rem 1.8rem 1.75rem; box-shadow:0 4px 18px -2px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05); position:relative; overflow:hidden; backdrop-filter:blur(4px); }
.register-form::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(56,189,248,.15),rgba(99,102,241,.15)); opacity:.55; pointer-events:none; mix-blend-mode:overlay; }

.input-group { display:flex; flex-direction:column; gap:.45rem; position:relative; }
.input-group.full { grid-column:1 / -1; }
.input-group label { font-size:.65rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#475569; }

.input-wrapper { display:flex; align-items:center; gap:.55rem; background:#f1f5f9; border:1px solid #d8e2ec; border-radius:12px; padding:10px 14px; transition:border .25s, background .25s; position:relative; }
.input-wrapper:focus-within { border-color:#6366f1; background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.input-wrapper input, .input-wrapper select { flex:1; background:transparent; border:none; outline:none; font-size:.85rem; font-weight:500; color:#0f172a; letter-spacing:.3px; }
.input-wrapper select { cursor:pointer; }
.input-wrapper svg { flex-shrink:0; opacity:.7; }

.eye-icon { cursor:pointer; display:flex; align-items:center; justify-content:center; padding:2px; }
.eye-icon:hover svg { opacity:1; }

/* Contact number validation */
.contact-number-info { margin-top:.3rem; }
.contact-number-info small { font-size:.55rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.contact-number-info .valid { color:#059669; }
.contact-number-info .invalid { color:#b91c1c; }

/* Password strength */
.password-strength { margin-top:.4rem; width:100%; }
.password-strength progress { width:100%; height:8px; border-radius:6px; overflow:hidden; background:#e2e8f0; }
.password-strength progress::-webkit-progress-bar { background:#e2e8f0; }
.password-strength progress::-webkit-progress-value { background:linear-gradient(90deg,#ef4444,#6366f1,#16a34a); }
.password-strength progress::-moz-progress-bar { background:linear-gradient(90deg,#ef4444,#6366f1,#16a34a); }

.pwd-meta { margin-top:.3rem; font-size:.55rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#475569; }
.pwd-meta.weak { color:#b91c1c; }
.pwd-meta.medium { color:#d97706; }
.pwd-meta.strong { color:#059669; }

/* Password hint styling (explicit) */
.password-hint {
	color: #000000; /* black */
	font-size: 14px;
	margin-top: 8px;
}

/* Terms */
.input-group.full label { display:flex; align-items:center; gap:.55rem; font-size:.7rem; font-weight:500; letter-spacing:.04em; color:#334155; }
.input-group.full label input[type="checkbox"] { width:18px; height:18px; accent-color:#6366f1; cursor:pointer; }
.terms-link { color:#6366f1; cursor:pointer; font-weight:600; position:relative; }
.terms-link:hover { text-decoration:underline; }

/* Button */
.register-btn { grid-column:1 / -1; margin-top:.4rem; padding:14px 20px; font-size:.8rem; font-weight:600; letter-spacing:.07em; background:linear-gradient(135deg,#6366f1,#3b82f6); color:#fff; border:none; border-radius:14px; cursor:pointer; position:relative; box-shadow:0 6px 20px -4px rgba(99,102,241,.55); transition:filter .35s, transform .35s; text-transform:uppercase; }
.register-btn:hover { filter:brightness(1.08); transform:translateY(-2px); }
.register-btn:disabled { opacity:.65; cursor:not-allowed; filter:grayscale(.3); }

/* Error & link */
.error-message { grid-column:1 / -1; background:linear-gradient(90deg,rgba(220,38,38,.12),rgba(220,38,38,.04)); border:1px solid rgba(220,38,38,.35); color:#991b1b; padding:.75rem 1rem; border-radius:10px; font-size:.7rem; letter-spacing:.04em; }
.signup-link { grid-column:1 / -1; text-align:center; font-size:.7rem; letter-spacing:.05em; color:#475569; margin-top:.25rem; }
.signup-link a { color:#6366f1; font-weight:600; text-decoration:none; }
.signup-link a:hover { text-decoration:underline; }

/* Responsive tweaks */
@media (max-width:1080px){ .with-illustration { flex-direction:column; gap:2rem; } .with-illustration .auth-illustration { min-height:360px; } }
@media (max-width:900px){ .with-illustration { flex-direction:column; } .with-illustration .auth-illustration { order:2; } }
@media (max-width:740px){ .register-form { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); padding:1.35rem 1.2rem 1.5rem; } .register-page { gap:2rem; } }
@media (max-width:540px){
	.register-form { grid-template-columns:1fr; padding:1rem .9rem 1.1rem; }
	.register-page { padding:1rem .8rem 1.6rem; gap:1rem; }
	.illu-inner { padding:1rem .9rem 1.1rem; }
	.auth-illustration { order:2; min-height:200px; }
	.illu-art img { max-height:200px; object-fit:cover; }
}

/* Ensure form stacks above illustration and stretches full width on very small screens */
@media (max-width:640px) {
	.register-page, .with-illustration { flex-direction:column; align-items:stretch; }
	.auth-form-wrap { order:1; width:100%; display:flex; justify-content:center; }
	.auth-form-wrap h1 { text-align:left; width:100%; padding:0 .6rem; }
	.register-form { width:100%; max-width:760px; padding:1rem .85rem; }
	.input-wrapper { padding:12px 12px; }
	.input-wrapper input, .input-wrapper select { font-size:0.98rem; }
	.register-btn { padding:13px 16px; font-size:0.96rem; }
}

/* Very small phones: hide decorative illustration to prioritize form and reduce layout jank */
@media (max-width:420px) {
	.auth-illustration { display:none !important; }
	.register-page { padding:0.8rem 0.6rem 1.1rem; }
	.register-form { padding:0.9rem 0.8rem; gap:0.9rem; }
	.password-strength progress { height:10px; }
	.pwd-meta { font-size:0.68rem; }
}.term-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.term-popup {
    background: var(--color-surface, #fff);
    padding: 20px;
    width: 420px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.12);
    text-align: left;
}

.term-popup .terms-text p {
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--color-text-primary, #111827);
    line-height: 1.5;
}

/* Make the title stand out */
.term-popup .terms-text p strong,
.term-popup .terms-text p b {
    font-weight: 700;
    color: var(--color-text-primary, #111827);
}

.term-popup .terms-text {
    padding: 6px 4px;
}

.term-popup .close-btn {
    background: var(--color-border-accent, #2563eb);
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.term-popup .close-btn:hover {
    filter: brightness(0.95);
    box-shadow: 0 6px 18px rgba(37,99,235,0.12);
}

.term-popup .terms-link {
    color: var(--color-border-accent, #2563eb);
    cursor: pointer;
    text-decoration: underline;
}
/* Forgot Password Revamp */
.forgot-page { min-height:100vh; display:flex; align-items:stretch; justify-content:center; gap:3rem; padding:clamp(2rem,4vh,3.5rem) clamp(1.2rem,2.5vw,3rem); background:transparent; position:relative; }
.forgot-page::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(56,189,248,.18),transparent 70%), radial-gradient(circle at 80% 75%,rgba(99,102,241,.15),transparent 75%); opacity:.55; pointer-events:none; }

/* Illustration reused */
.with-illustration .auth-illustration { flex:1.1; position:relative; display:flex; align-items:flex-end; justify-content:flex-start; border:1px solid rgba(0,0,0,.08); background:linear-gradient(135deg,#e0f2fe,#f5f3ff); border-radius:28px; overflow:hidden; box-shadow:0 4px 28px -8px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.04); min-height:600px; }
.with-illustration .auth-illustration:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(99,102,241,.25),transparent 60%), radial-gradient(circle at 30% 80%,rgba(56,189,248,.25),transparent 65%); mix-blend-mode:multiply; opacity:.8; pointer-events:none; }
.forgot-page .illu-art { position:absolute; inset:0; display:flex; }
.forgot-page .illu-art img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.05) contrast(1.02); }
.forgot-page .illu-inner { position:relative; z-index:2; padding:2.2rem 2.4rem 2.6rem; max-width:460px; }
.forgot-page .illu-inner h2 { margin:0 0 .9rem; font-size:clamp(1.9rem,1.4rem + 1.4vw,2.5rem); font-weight:600; line-height:1.08; letter-spacing:.5px; background:linear-gradient(90deg,#2563eb,#6366f1,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.forgot-page .illu-inner p { margin:0; font-size:.95rem; line-height:1.5; color:#334155; font-weight:500; letter-spacing:.3px; }

.auth-form-wrap { flex:1; display:flex; flex-direction:column; align-items:flex-start; }
.forgot-page h1 { width:100%; max-width:640px; margin:0 0 1.1rem; font-size:clamp(1.55rem,1.2rem + 1vw,2.2rem); font-weight:600; letter-spacing:.5px; background:linear-gradient(90deg,#38bdf8,#6366f1); -webkit-background-clip:text; background-clip:text; color:transparent; }

.forgot-form { width:100%; max-width:640px; display:flex; flex-direction:column; gap:1rem; background:#ffffff; border:1px solid var(--panel-border,#e2e8f0); border-radius:18px; padding:1.6rem 1.8rem 1.75rem; box-shadow:0 4px 18px -2px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05); position:relative; overflow:hidden; }
.forgot-form::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(56,189,248,.15),rgba(99,102,241,.15)); opacity:.55; pointer-events:none; mix-blend-mode:overlay; }

.input-group { display:flex; flex-direction:column; gap:.45rem; position:relative; }
.input-group.full { width:100%; }
.input-group label { font-size:.65rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#475569; }
.input-wrapper { display:flex; align-items:center; gap:.55rem; background:#f1f5f9; border:1px solid #d8e2ec; border-radius:12px; padding:10px 14px; transition:border .25s, background .25s; position:relative; }
.input-wrapper:focus-within { border-color:#6366f1; background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.input-wrapper input { flex:1; background:transparent; border:none; outline:none; font-size:.85rem; font-weight:500; color:#0f172a; letter-spacing:.3px; }
.password-wrapper .toggle-visibility { background:transparent; border:none; cursor:pointer; display:flex; align-items:center; padding:2px; color:#475569; }
.password-wrapper .toggle-visibility:hover { color:#1e293b; }

/* OTP row and resend */
.otp-row { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; }
.resend-wrap { display:flex; align-items:center; }
.resend-btn { background:transparent; border:none; font-size:.65rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#6366f1; cursor:pointer; padding:6px 10px; border-radius:8px; transition:background .25s; }
.resend-btn:disabled { opacity:.5; cursor:not-allowed; }
.resend-btn:not(:disabled):hover { background:#eef2ff; }

/* Action buttons */
.action-btn { margin-top:.2rem; width:100%; padding:14px 20px; font-size:.8rem; font-weight:600; letter-spacing:.07em; background:linear-gradient(135deg,#6366f1,#3b82f6); color:#fff; border:none; border-radius:14px; cursor:pointer; position:relative; box-shadow:0 6px 20px -4px rgba(99,102,241,.55); transition:filter .35s, transform .35s; text-transform:uppercase; }
.action-btn:hover { filter:brightness(1.08); transform:translateY(-2px); }
.action-btn:disabled { opacity:.65; cursor:not-allowed; filter:grayscale(.3); }

/* Password strength meter */
.pwd-strength { margin-top:.4rem; display:flex; align-items:center; gap:.65rem; }
.meter { flex:1; background:#e2e8f0; height:8px; border-radius:6px; position:relative; overflow:hidden; }
.meter span { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#ef4444,#6366f1,#16a34a); transition:width .5s; }
.meter-label { font-size:.55rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#475569; }

/* Alt hint */
.alt-hint { text-align:center; font-size:.7rem; letter-spacing:.05em; color:#475569; margin-top:.25rem; }
.alt-hint a { color:#6366f1; font-weight:600; text-decoration:none; }
.alt-hint a:hover { text-decoration:underline; }

/* Responsive */
@media (max-width:1080px){ .with-illustration { flex-direction:column; gap:2rem; } .with-illustration .auth-illustration { min-height:360px; } }
@media (max-width:900px){ .with-illustration { flex-direction:column; } .with-illustration .auth-illustration { order:2; } }
@media (max-width:620px){ .forgot-form { padding:1.35rem 1.2rem 1.5rem; } .forgot-page { padding:1.65rem 1rem 2.5rem; gap:1.4rem; } .forgot-page .illu-inner { padding:1.6rem 1.4rem 2rem; } }

@media (max-width:740px){
	.forgot-page, .with-illustration { flex-direction:column; align-items:stretch; }
	.auth-form-wrap { order:1; width:100%; display:flex; justify-content:center; }
	.forgot-form { width:100%; max-width:760px; padding:1rem .9rem; }
	.input-wrapper { padding:12px 12px; }
	.action-btn { padding:13px 16px; font-size:0.96rem; }
}

@media (max-width:420px){
	.auth-illustration, .illu-art, .illu-inner { display:none !important; }
	.forgot-page { padding:0.8rem 0.6rem 1.1rem; }
	.forgot-form { padding:0.9rem .8rem; gap:0.9rem; }
	.meter { height:10px; }
	.meter-label { font-size:.66rem; }
}
/* Full-page styling */
.verify-otp-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #f3f4f6, #e0f7fa);
  padding: 20px;
}

/* OTP container */
.verify-otp-container {
  background: #ffffff;
  padding: 35px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 380px;
  animation: fadeIn 0.3s ease-in-out;
}

/* Heading */
.verify-otp-container h1 {
  margin-bottom: 12px;
  font-size: 26px;
  color: #000000;
  font-weight: 600;
}

/* Instruction text */
.verify-otp-container p {
  font-size: 15px;
  color: #000000;
  margin-bottom: 18px;
  line-height: 1.4;
}

/* OTP input container */
.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* OTP input fields */
.otp-inputs input {
  width: 48px;
  height: 54px;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  border: 2px solid #000000;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  color: #000000;
}

.otp-inputs input:focus {
  border-color: #007bff;
  background: #ffffff;
  transform: scale(1.05);
}

/* OTP timer text */
.otp-timer {
  font-size: 14px;
  color: #000000;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Verify button */
.verify-otp-form button {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease-in-out;
}

.verify-otp-form button:disabled {
  background: #000000;
  cursor: not-allowed;
}

.verify-otp-form button:hover:not(:disabled) {
  background: #0056b3;
  transform: scale(1.02);
}

/* Resend OTP button */
.resend-otp {
  margin-top: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}

.resend-otp:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive tweaks */
@media (max-width: 400px) {
  .verify-otp-container {
    width: 100%;
    padding: 25px;
  }

  .otp-inputs input {
    width: 42px;
    height: 50px;
    font-size: 20px;
  }
}

/* Ensure full-width and comfortable targets on small screens */
@media (max-width:640px) {
  .verify-otp-page { padding: 18px; align-items:flex-start; }
  .verify-otp-container { width:100%; max-width:720px; padding:22px; }
  .otp-inputs { gap:8px; }
  .otp-inputs input { width:46px; height:52px; font-size:20px; }
  .verify-otp-form button { padding:13px; font-size:15px; }
}

@media (max-width:420px) {
  /* hide any heavy decorative art if present on the page */
  .auth-illustration, .illu-art, .illu-inner { display:none !important; }
  .verify-otp-page { padding:12px; }
  .verify-otp-container { padding:18px; }
}/* Modern Dark / Glass Theme for About Us */
/* Container */
.aboutus-container { width:100%; max-width:1240px; margin:0 auto; padding:clamp(2rem,3vw,3.25rem) clamp(1.1rem,2.2vw,2.2rem) 5rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #f3f4f6; position:relative; z-index:0; }
.aboutus-container h1, .aboutus-container h2, .aboutus-container h3 { font-weight:600; letter-spacing:.4px; color:#fff; }
.aboutus-container h2 { font-size:clamp(1.6rem,1.1rem + 1.2vw,2.15rem); line-height:1.2; position:relative; }
.gradient-text { background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Hero */
.aboutus-hero-section { position:relative; overflow:hidden; border-radius:28px; padding:clamp(3.2rem,4vw,4.6rem) clamp(1.4rem,2.6vw,3.4rem) clamp(3rem,3.4vw,4rem); margin:0 0 clamp(3rem,5vh,4.2rem); background:linear-gradient(140deg,rgba(30,41,59,.65),rgba(15,23,42,.85) 55%); box-shadow:0 10px 38px -12px rgba(0,0,0,.55),0 2px 4px -1px rgba(0,0,0,.4); }
.aboutus-hero-glow { position:absolute; top:-20%; left:10%; width:520px; height:520px; background:radial-gradient(circle at center,rgba(56,189,248,.38),rgba(99,102,241,.15) 48%,transparent 70%); filter:blur(42px); opacity:.8; pointer-events:none; animation:pulseGlow 9s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
.aboutus-hero-content { position:relative; max-width:860px; margin:0 auto; text-align:center; z-index:1; }
.aboutus-hero-content h1 { font-size:clamp(2.1rem,1.6rem + 2.2vw,3.35rem); line-height:1.08; margin:0 0 1.1rem; font-weight:650; }
.aboutus-hero-subtitle { font-size:clamp(.92rem,.85rem + .3vw,1.05rem); font-weight:400; color:#f3f4f6; line-height:1.5; max-width:690px; margin:0 auto 2rem; }
.aboutus-hero-cta-row { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.aboutus-btn { --btn-bg:linear-gradient(135deg,#6366f1,#3b82f6); position:relative; display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.35rem; font-size:.8rem; font-weight:600; letter-spacing:.08em; border-radius:14px; text-decoration:none; color:#fff; background:var(--btn-bg); box-shadow:0 6px 24px -8px rgba(99,102,241,.65),0 0 0 1px rgba(255,255,255,.05) inset; backdrop-filter:blur(6px); transition:transform .35s,box-shadow .35s,filter .35s; text-transform:uppercase; }
.aboutus-btn.primary:hover { transform:translateY(-3px); box-shadow:0 8px 32px -10px rgba(99,102,241,.85); }
.aboutus-btn.ghost { --btn-bg:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.05)); color:#fff; }
.aboutus-btn.ghost:hover { filter:brightness(1.15); }

/* Metrics */
.aboutus-metrics-section { margin:0 0 clamp(2.5rem,4vh,3.5rem); }
.aboutus-metrics-grid { display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.metric-card { position:relative; overflow:hidden; padding:1.3rem 1.15rem 1.15rem; border-radius:18px; background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.04)); backdrop-filter:blur(10px); box-shadow:0 4px 22px -6px rgba(0,0,0,.45); transition:transform .4s; }
.metric-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 65% 30%,rgba(56,189,248,.42),transparent 70%); opacity:.15; pointer-events:none; }
.metric-card:hover { transform:translateY(-4px); }
.metric-card h3 { margin:0 0 .35rem; font-size:1.4rem; font-weight:650; letter-spacing:.5px; background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.metric-card h3 span { font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; margin-left:.25rem; background:none; color:#f3f4f6; -webkit-background-clip:initial; background-clip:initial; }
.metric-card p { margin:0; font-size:.7rem; font-weight:500; letter-spacing:.05em; color:#f3f4f6; }

/* Shared sections base */
.aboutus-mission-section, .aboutus-solution-section, .aboutus-team-section, .aboutus-values-section, .aboutus-problem-section { margin:clamp(3rem,6vh,4.5rem) 0; position:relative; }

/* Mission */
.aboutus-mission-content, .aboutus-solution-content, .aboutus-team-content { display:flex; align-items:stretch; gap:clamp(2rem,3vw,3.5rem); position:relative; }
.aboutus-mission-text, .aboutus-solution-text, .aboutus-team-text { flex:1; font-size:.85rem; letter-spacing:.25px; color:#f3f4f6; }
.aboutus-mission-text p, .aboutus-solution-text p, .aboutus-team-text p { line-height:1.55; color:#f3f4f6; }
.aboutus-mission-image, .aboutus-solution-image, .aboutus-team-image { flex:1; position:relative; border-radius:26px; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); box-shadow:0 8px 32px -10px rgba(0,0,0,.55); }
.aboutus-mission-image img, .aboutus-solution-image img, .aboutus-team-image img { width:100%; height:100%; min-height:340px; object-fit:cover; display:block; transform:scale(1.03); transition:transform 1.2s cubic-bezier(.19,1,.22,1); filter:saturate(1.05) contrast(1.05); }
.aboutus-mission-image:hover img, .aboutus-solution-image:hover img, .aboutus-team-image:hover img { transform:scale(1.09); }

/* Problem */
.aboutus-problem-section { padding:2.8rem 1.4rem 3rem; border-radius:32px; background:linear-gradient(135deg,rgba(15,23,42,.75),rgba(30,41,59,.78)); box-shadow:0 10px 40px -14px rgba(0,0,0,.6); }
.aboutus-problem-section h2 { margin-top:0; }
.aboutus-problem-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; margin-top:2.15rem; }
.aboutus-problem-card { position:relative; padding:1.6rem 1.4rem 1.35rem; border-radius:20px; background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); box-shadow:0 4px 26px -8px rgba(0,0,0,.55); transition:transform .45s, box-shadow .45s; }
.aboutus-card-icon { font-size:2.15rem; margin-bottom:.85rem; filter:drop-shadow(0 4px 6px rgba(0,0,0,.55)); }
.aboutus-problem-card h3 { margin:.2rem 0 .55rem; font-size:1.05rem; font-weight:600; letter-spacing:.5px; }
.aboutus-problem-card p { margin:0; font-size:.72rem; line-height:1.5; color:#f3f4f6; letter-spacing:.05em; }
.aboutus-problem-card:hover { transform:translateY(-6px); box-shadow:0 10px 42px -10px rgba(56,189,248,.5); }

/* Solution */
.aboutus-solution-features { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.9rem; }
.aboutus-solution-features li { position:relative; padding-left:1.55rem; font-size:.74rem; color:#f3f4f6; line-height:1.45; letter-spacing:.04em; }
.aboutus-solution-features li:before { content:""; position:absolute; left:.2rem; top:.55rem; width:.7rem; height:.7rem; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#6366f1); box-shadow:0 0 0 3px rgba(56,189,248,.2); }

/* Team Section */
.aboutus-team-section { padding:2.6rem 1.2rem 3.1rem; border-radius:30px; background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); box-shadow:0 10px 40px -14px rgba(0,0,0,.55); }
.aboutus-team-content { padding:0; }

/* Values */
.aboutus-values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.15rem; margin-top:2.2rem; }
.aboutus-value-card { position:relative; padding:1.5rem 1.3rem 1.3rem; border-radius:20px; background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); text-align:left; box-shadow:0 4px 24px -6px rgba(0,0,0,.55); transition:transform .45s; }
.aboutus-value-card h3 { margin:0 0 .55rem; font-size:.95rem; font-weight:600; letter-spacing:.55px; }
.aboutus-value-card p { margin:0; font-size:.7rem; line-height:1.48; color:#f3f4f6; letter-spacing:.05em; }
.aboutus-value-card:before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at 65% 35%,rgba(56,189,248,.35),transparent 70%); opacity:.12; pointer-events:none; }
.aboutus-value-card:hover { transform:translateY(-6px); }

/* Animations on scroll (optional classes if JS is added later) */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.19,1,.22,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width: 1020px){ .aboutus-mission-content, .aboutus-solution-content, .aboutus-team-content { flex-direction:column; } }
@media (max-width:840px){ .aboutus-hero-cta-row { gap:.8rem; } .metric-card h3 { font-size:1.25rem; } }
@media (max-width:640px){ .aboutus-container { padding:2rem 1.05rem 4rem; } .aboutus-hero-section { padding:3.4rem 1.25rem 3.4rem; border-radius:22px; } .aboutus-hero-content h1 { font-size:clamp(1.95rem,1.6rem + 1.5vw,2.5rem); } .metric-card { padding:1.15rem 1rem 1.05rem; } }
@media (max-width:480px){ .aboutus-btn { width:100%; } .aboutus-problem-cards { grid-template-columns:1fr; } .aboutus-values-grid { grid-template-columns:1fr; } }.landlord-public-container { max-width:860px; margin:0 auto; padding:clamp(2.2rem,3.4vw,3.6rem) clamp(1.1rem,2.1vw,2.2rem) 4rem; font-family:'Inter',system-ui,sans-serif; color:#f1f5f9; }
.lp-back { display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1rem .72rem; font-size:.65rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.18); border-radius:14px; cursor:pointer; color:#fff; backdrop-filter:blur(6px); box-shadow:0 6px 22px -8px rgba(0,0,0,.55); transition:transform .45s, box-shadow .45s, background .45s; }
.lp-back:hover { transform:translateY(-3px); box-shadow:0 10px 34px -10px rgba(56,189,248,.55); }
.lp-card { margin:1.3rem 0 0; border:1px solid rgba(255,255,255,.1); background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border-radius:34px; padding:clamp(1.8rem,2.2vw,2.4rem) clamp(1.4rem,2vw,2.1rem); box-shadow:0 16px 54px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05) inset; backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:1.6rem; }
.lp-header { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.lp-avatar { width:140px; height:140px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.25); background:#0f172a; box-shadow:0 8px 30px -12px rgba(0,0,0,.6); }
.lp-meta h1 { margin:0 0 .4rem; font-size:clamp(1.6rem,1.4rem + 1.4vw,2.3rem); font-weight:640; letter-spacing:.5px; line-height:1.05; background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent; display:flex; align-items:center; gap:.6rem; }
.lp-username { margin:.1rem 0 .6rem; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#94a3b8; }
.lp-address, .lp-contact { margin:.2rem 0; font-size:.75rem; font-weight:500; letter-spacing:.04em; color:#cbd5e1; display:flex; align-items:center; gap:.5rem; }
.lp-verified { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background:linear-gradient(135deg,#0ea5e9,#6366f1); color:#fff; border-radius:50%; font-size:1rem; box-shadow:0 6px 22px -8px rgba(14,165,233,.55); }
.lp-footer { border-top:1px solid rgba(255,255,255,.12); padding:1rem 0 0; }
.lp-note { margin:0; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#94a3b8; line-height:1.5; }
.lp-loading, .lp-error { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:40vh; text-align:center; gap:1rem; }
.lp-spinner { border:5px solid rgba(255,255,255,.15); border-top:5px solid #6366f1; border-radius:50%; width:50px; height:50px; animation:spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
.lp-error h3 { margin:0 0 .5rem; font-size:1.4rem; font-weight:640; letter-spacing:.5px; background:linear-gradient(90deg,#38bdf8,#6366f1,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:620px){ .lp-header { flex-direction:column; align-items:flex-start; } .lp-avatar { width:120px; height:120px; border-radius:50%; } }
/* Dashboard Container */
.dashboard-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(120deg, rgba(59,130,246,0.04), rgba(99,102,241,0.03));
  margin: 0;
  padding: 0;
}

/* Main Messages Container */
.tenant-messages-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: 0;
  background: #fff;
}

.messages-content-wrapper {
  display: flex;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Conversations List */
.conversations-list {
  width: 320px;
  background: #fff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
}

.conversations-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

/* Messages Header */
.messages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.messages-title {
  font-weight: 600;
  font-size: 1.25rem;
  color: #1a202c;
  margin: 0;
}

.mobile-menu-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  color: #64748b;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.mobile-menu-btn:hover {
  background: #f1f5f9;
}

/* Conversation Items */
.conversation-item {
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  border-radius: 8px;
  margin: 0.125rem 0.75rem;
  transition: all 0.2s ease;
  position: relative;
  border: 1px solid transparent;
}

.conversation-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.conversation-item.active {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
}

.conversation-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 0.875rem;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
  background: #f8fafc;
}

.conversation-info {
  flex: 1;
  min-width: 0;
}

.messages-username {
  font-weight: 600;
  color: #1a202c;
  font-size: 0.95rem;
  margin-bottom: 0.125rem;
}

.conversation-preview {
  font-size: 0.875rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.unread-badge {
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.no-conversations {
  text-align: center;
  padding: 2rem 1rem;
  color: #64748b;
  font-style: italic;
  background: #f8fafc;
  border-radius: 8px;
  margin: 1rem;
  border: 1px dashed #e2e8f0;
}

/* Chat Area */
.chat-area {
  flex: 1;
  display: flex;
  background: #f8fafc;
  height: 100%;
  position: relative;
}

.chat-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.chat-box-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Mobile Chat Header */
.mobile-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.back-button {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  color: #3b82f6;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color 0.2s;
  min-width: 60px;
  text-align: left;
}

.back-button:hover {
  background: #f1f5f9;
}

.mobile-chat-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #1a202c;
  text-align: center;
  flex: 1;
  margin: 0 1rem;
}

.header-spacer {
  width: 60px;
  visibility: hidden;
}

.no-chat-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f8fafc;
  color: #64748b;
  font-size: 1.1rem;
  text-align: center;
  padding: 2rem;
  width: 100%;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }

  .tenant-messages-main {
    margin-left: 0;
    height: 100vh;
  }

  .messages-content-wrapper {
    height: 100vh;
  }

  .conversations-list {
    width: 100%;
    border-right: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: #fff;
  }

  .conversations-scroll-area {
    padding: 0.25rem 0;
  }

  .conversation-item {
    margin: 0.125rem 1rem;
    padding: 1rem 0.875rem;
    min-height: 68px;
  }

  .conversation-avatar {
    width: 44px;
    height: 44px;
    margin-right: 0.75rem;
  }

  .messages-header {
    padding: 0.875rem 1rem;
  }

  .messages-title {
    font-size: 1.2rem;
  }

  .mobile-hidden {
    display: none !important;
  }

  .chat-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 20;
  }

  .no-chat-selected {
    font-size: 1rem;
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .conversation-item {
    margin: 0.125rem 0.75rem;
    padding: 0.875rem 0.75rem;
    min-height: 64px;
  }

  .conversation-avatar {
    width: 40px;
    height: 40px;
    margin-right: 0.625rem;
  }

  .messages-header {
    padding: 0.75rem 0.875rem;
  }

  .messages-title {
    font-size: 1.1rem;
  }

  .mobile-chat-header {
    padding: 0.625rem 0.875rem;
  }

  .mobile-chat-title {
    font-size: 1rem;
  }

  .conversation-preview {
    font-size: 0.8125rem;
  }

  .messages-username {
    font-size: 0.9rem;
  }
}

/* Scrollbar Styling */
.conversations-scroll-area::-webkit-scrollbar {
  width: 6px;
}

.conversations-scroll-area::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.conversations-scroll-area::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.conversations-scroll-area::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Loading States */
.conversation-item.loading {
  opacity: 0.6;
  pointer-events: none;
}

.conversation-item.loading .conversation-avatar {
  background: #e2e8f0;
}

.conversation-item.loading .messages-username,
.conversation-item.loading .conversation-preview {
  background: #e2e8f0;
  color: transparent;
  border-radius: 4px;
}

/* Animation for mobile transitions */
.conversations-list,
.chat-area {
  transition: transform 0.3s ease-in-out;
}

/* Ensure no horizontal overflow */
.dashboard-container,
.tenant-messages-main,
.messages-content-wrapper {
  overflow-x: hidden;
}

/* Fix for very small screens */
@media (max-width: 360px) {
  .conversation-item {
    margin: 0.125rem 0.5rem;
    padding: 0.75rem 0.5rem;
  }

  .conversation-avatar {
    width: 36px;
    height: 36px;
  }

  .messages-header {
    padding: 0.625rem 0.75rem;
  }

  .back-button {
    min-width: 50px;
    padding: 0.375rem 0.5rem;
    font-size: 1rem;
  }
}/* Chat wrapper */
.chatbox-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Chat container */
.chatbox-container {
  width: 100%;
  max-width: 350px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
}

/* Messenger-style header */
.chatbox-header {
  border-bottom: 1px solid #eee;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chatbox-header-main {
  display: flex;
  align-items: center;
  width: 100%;
}

.chatbox-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.chatbox-header-title {
  font-weight: 600;
  font-size: 1.1em;
  color: #050505;
}

/* Property context */
.chatbox-property-context {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #23272f;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 12px 0 0 0;
  color: #fff;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}

.chatbox-property-context img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.chatbox-property-info {
  flex: 1;
}

.chatbox-property-title {
  font-weight: 600;
  font-size: 1.05em;
  margin-bottom: 2px;
}

.chatbox-property-price {
  font-size: 0.98em;
  color: #a3e635;
}

.chatbox-property-link {
  margin-left: auto;
  background: linear-gradient(90deg,#2563eb 0%,#1e40af 100%);
  color: #fff;
  padding: 7px 16px;
  border-radius: 7px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.98em;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.333);
}

/* Main content area */
.chatbox-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Messages area */
.chatbox-messages {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  gap: 2px;
}

.chatbox-empty {
  color: #888;
  text-align: center;
  margin-top: 40px;
}

/* Input container */
.chatbox-input-container {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
}

/* Messenger-style input row - FIXED: removed absolute positioning */
.chatbox-input-row {
  display: flex;
  border-top: 1px solid #e4e6eb;
  padding: 12px;
  background: #fff;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.chatbox-input {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-right: 8px;
  font-size: 0.9375rem;
  color: #000; /* Ensure typed text is black for readability */
}

.chatbox-input::placeholder { color: #666; }
.chatbox-input:focus { caret-color: #000; color: #000; }

.chatbox-send-button {
  padding: 10px 20px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  min-width: 60px;
}

.chatbox-send-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.chatbox-send-button:hover:not(:disabled) {
  background: #1e40af;
}

/* Message row container */
.chatbox-message-row {
  display: flex;
  align-items: flex-end;
  margin: 1px 0;
  position: relative;
}

/* My messages: Right-aligned + Blue */
.chatbox-message-row.mine {
  justify-content: flex-end;
  padding-left: 60px;
}

/* Their messages: Left-aligned + Gray */
.chatbox-message-row.theirs {
  justify-content: flex-start;
  padding-right: 60px;
}

/* Basic message bubble styles */
.chatbox-message {
  border-radius: 18px;
  padding: 8px 12px;
  font-size: 0.9375rem;
  line-height: 1.3333;
  max-width: 60%;
  word-break: break-word;
  position: relative;
}

/* My message style */
.chatbox-message.me {
  background: #0084ff;
  color: #fff;
  margin-left: 4px;
  border-top-right-radius: 4px;
}

/* Their message style */
.chatbox-message.them {
  background: #e4e6eb;
  color: #050505;
  margin-right: 4px;
  border-top-left-radius: 4px;
}

/* Avatar styling */
.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0 4px 2px;
  background: #e4e6eb;
  opacity: 1;
  transition: opacity 0.15s ease-in-out;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Hide avatar while loading to prevent flicker */
.msg-avatar.loading {
  opacity: 0;
}

/* Ensure consistent space even when avatar is hidden */
.msg-avatar[style*="display: none"] {
  width: 28px;
  visibility: hidden !important;
  margin: 0 4px 2px;
}

/* Add spacing between sender changes */
.chatbox-message-row.mine + .chatbox-message-row.theirs,
.chatbox-message-row.theirs + .chatbox-message-row.mine {
  margin-top: 8px;
}

/* Group messages from same sender */
.chatbox-message-row:not(:first-child) {
  margin-top: 1px;
}

/* Add spacing between message groups */
.chatbox-message-row + .chatbox-message-row {
  margin-top: 4px;
}

/* Additional spacing when switching between senders */
.chatbox-message-row.mine + .chatbox-message-row.theirs,
.chatbox-message-row.theirs + .chatbox-message-row.mine {
  margin-top: 12px;
}

/* Message bubble positioning */
.chatbox-message-row.mine .chatbox-message {
  margin-right: 0;
  margin-left: 4px;
}

.chatbox-message-row.theirs .chatbox-message {
  margin-left: 0;
  margin-right: 4px;
}

/* small animation to reduce perceived jump */
.chatbox-message { 
  transition: transform 120ms ease, opacity 120ms ease; 
}
.chatbox-message-row { 
  min-height: 36px; 
}

/* Messenger-style avatars */
.chatbox-message-row.mine .msg-avatar {
  margin-left: 8px;
  margin-right: 0;
}

.chatbox-message-row.theirs .msg-avatar {
  margin-right: 8px;
  margin-left: 0;
}

/* Consecutive messages from same sender */
.chatbox-message-row.mine + .chatbox-message-row.mine .msg-avatar,
.chatbox-message-row.theirs + .chatbox-message-row.theirs .msg-avatar {
  opacity: 0;
  visibility: hidden;
}

/* large/embed variant */
.chatbox-container.large { 
  max-width: 100%; 
  height: 100%; 
  max-width: 600px;
  height: 80vh;
}

/* ========== MOBILE RESPONSIVE STYLES ========== */
@media (max-width: 768px) {
  .chatbox-wrapper.mobile-chat {
    height: 100vh;
  }

  .chatbox-container.mobile-fullscreen {
    max-width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .chatbox-header {
    padding: 12px 16px;
  }

  .chatbox-header-avatar {
    width: 36px;
    height: 36px;
  }

  .chatbox-header-title {
    font-size: 1rem;
  }

  .chatbox-messages {
    padding: 12px 8px;
  }

  .chatbox-message {
    max-width: 75%;
    font-size: 0.95rem;
  }

  .chatbox-input-row {
    padding: 8px 12px;
  }

  .chatbox-input {
    padding: 12px;
    font-size: 1rem;
  }

  .chatbox-send-button {
    padding: 12px 16px;
    min-width: 50px;
    font-size: 1rem;
  }

  /* Adjust property context for mobile */
  .chatbox-property-context {
    padding: 10px 12px;
    gap: 10px;
  }

  .chatbox-property-context img {
    width: 48px;
    height: 48px;
  }

  .chatbox-property-title {
    font-size: 0.95rem;
  }

  .chatbox-property-price {
    font-size: 0.9rem;
  }

  .chatbox-property-link {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  /* Better touch targets for messages */
  .chatbox-message {
    padding: 10px 14px;
  }

  /* Adjust message padding for mobile */
  .chatbox-message-row.mine {
    padding-left: 40px;
  }

  .chatbox-message-row.theirs {
    padding-right: 40px;
  }
}

@media (max-width: 480px) {
  .chatbox-header {
    padding: 10px 12px;
  }

  .chatbox-header-avatar {
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }

  .chatbox-header-title {
    font-size: 0.95rem;
  }

  .chatbox-messages {
    padding: 10px 6px;
  }

  .chatbox-message {
    max-width: 80%;
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  .chatbox-input-row {
    padding: 6px 10px;
  }

  .chatbox-input {
    padding: 10px;
    font-size: 0.95rem;
  }

  .chatbox-send-button {
    padding: 10px 14px;
    min-width: 45px;
    font-size: 0.95rem;
  }

  .chatbox-property-context {
    padding: 8px 10px;
    gap: 8px;
  }

  .chatbox-property-context img {
    width: 44px;
    height: 44px;
  }

  .chatbox-property-title {
    font-size: 0.9rem;
  }

  .chatbox-property-price {
    font-size: 0.85rem;
  }

  .chatbox-property-link {
    padding: 5px 10px;
    font-size: 0.85rem;
  }
}

/* Mobile-specific utility classes */
.mobile-hidden {
  display: none !important;
}

/* Improve scroll behavior on mobile */
.chatbox-messages {
  -webkit-overflow-scrolling: touch;
}

/* Keyboard avoidance for mobile */
@media (max-width: 768px) {
  .chatbox-input-container {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Loading states for better mobile UX */
.chatbox-empty {
  padding: 40px 20px;
  font-size: 1rem;
}

/* Touch-friendly improvements */
.chatbox-send-button {
  touch-action: manipulation;
}

.chatbox-input {
  touch-action: manipulation;
}

/* Prevent zoom on input focus for iOS */
@media (max-width: 768px) {
  .chatbox-input {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}.messages-title {
  padding: 1em 0.5em 0.5em;
  font-weight: 600;
  font-size: 1.2em;
  color: #111;
}

.messages-username {
  font-weight: 500;
  color: #111;
}

/* Mobile responsive: stack list above chat area and make list collapsible width */
@media (max-width:720px) {
  .messages-layout { flex-direction: column; height: auto !important; }
  .messages-list { width: 100% !important; border-right: none !important; max-height: 260px; overflow-y: auto; }
  .messages-area { width: 100% !important; min-height: 320px; }
  .messages-list img { width:44px; height:44px; }
}
/* =============================================================
	 Landlord Dashboard – Enhanced Dark Glass UI
	 - Design tokens & semantic variables
	 - Accessibility & focus states
	 - Reduced motion support
	 - Subtle performance-friendly effects
	 ============================================================= */

/* Design Tokens (light mode refactor – 2025-08-15) */
.landlord-dashboard {
	--color-bg-gradient: linear-gradient(140deg,#f5f7fa,#edf1f5 55%,#e2e8f0);
	--color-surface-glass: rgba(255,255,255,0.72);
	--color-surface-glass-hover: rgba(255,255,255,0.86);
	--color-border: rgba(0,0,0,0.10);
	--color-border-strong: rgba(0,0,0,0.18);
	--color-border-accent: #2563eb;
	--color-text-primary: #111827; /* near-black */
	--color-text-secondary: #374151;
	--color-text-muted: #6b7280;
	--color-focus-ring: #2563eb;
	--color-danger: #dc2626;
	--color-danger-bg: #fee2e2;
	--color-warning: #d97706;
	--color-success: #059669;
	--radius-card: 18px;
	--radius-field: 10px;
	--transition-base: .25s cubic-bezier(.4,.2,.2,1);
	color-scheme: light;
}

/* Root layout */
.dashboard-container { display:flex; min-height:100vh; background:var(--color-bg-gradient); color:var(--color-text-primary); animation:fadeSlide .6s ease forwards; }
.landlord-main { padding:2rem; flex:1; overflow-y:auto; position:relative; }
.landlord-main:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 18% 22%,rgba(99,132,255,0.18),transparent 55%),radial-gradient(circle at 82% 70%,rgba(16,185,129,0.15),transparent 60%); mix-blend-mode:multiply; opacity:.5; }

/* Grid */
.profile-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); align-items:start; }

/* Card / glass */
.card { position:relative; border-radius:var(--radius-card); padding:1.5rem 1.6rem 1.8rem; backdrop-filter:blur(18px) saturate(160%); background:var(--color-surface-glass); border:1px solid var(--color-border); box-shadow:0 4px 18px -6px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,0.08); transition:transform var(--transition-base), box-shadow var(--transition-base), background .3s; overflow:hidden; contain:layout paint; }
.card:before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(140deg,rgba(99,132,255,0.55),rgba(255,255,255,0) 40%,rgba(32,232,190,0.35)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.4; transition:opacity .45s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 8px 22px -6px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,0.08); background:var(--color-surface-glass-hover); }
.card:hover:before { opacity:.75; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.card-header h2 { font-size:1.15rem; letter-spacing:.5px; font-weight:600; margin:0; }

/* Avatar */
.avatar-wrapper { position:relative; width:136px; aspect-ratio:1/1; margin:0 auto .75rem; border-radius:50%; overflow:hidden; box-shadow:0 0 0 4px rgba(0,0,0,0.05),0 3px 10px -2px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,0.1); isolation:isolate; flex-shrink:0; }
.avatar-wrapper img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.avatar-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.35),rgba(0,0,0,0)); display:flex; align-items:flex-end; justify-content:center; font-size:.7rem; letter-spacing:.5px; font-weight:600; padding:.4rem 0 .55rem; opacity:0; transition:.35s ease; text-transform:uppercase; color:#f8fafc; }
.avatar-wrapper:hover .avatar-overlay, .avatar-wrapper:focus .avatar-overlay { opacity:1; }
.username { text-align:center; font-weight:600; font-size:1rem; margin:.25rem 0 1rem; color:var(--color-text-primary); }

/* Fields */
.field-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.9rem; }
.field-row { display:flex; gap:1rem; flex-wrap:wrap; }
.field-row .field-group { flex:1; min-width:240px; }
label { font-size:.7rem; text-transform:uppercase; letter-spacing:.55px; font-weight:600; color:var(--color-text-secondary); user-select:none; }
.req { color:#ff7b72; margin-left:2px; }
input, select { background:#ffffff; border:1px solid #d1d5db; border-radius:var(--radius-field); padding:.75rem .9rem; color:var(--color-text-primary); font-size:.92rem; font-family:inherit; outline:none; transition:border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base); min-width:0; }
input:focus, select:focus { border-color:var(--color-border-accent); background:#ffffff; box-shadow:0 0 0 3px rgba(37,99,235,0.25); }
input::placeholder { color:var(--color-text-muted); opacity:.9; }
input:disabled, select:disabled { opacity:.55; cursor:not-allowed; }
input.error { border-color:var(--color-danger); box-shadow:0 0 0 3px rgba(220,38,38,0.25); }
input::placeholder { color:#9ca3af; }
select { cursor:pointer; }

/* Buttons */
.btn { --btn-bg:linear-gradient(135deg,#f3f4f6,#e5e7eb); --btn-border:#d1d5db; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:44px; padding:.6rem 1.25rem .65rem; border-radius:12px; border:1px solid var(--btn-border); background:var(--btn-bg); color:#1f2937; font-weight:600; letter-spacing:.45px; font-size:.72rem; text-transform:uppercase; cursor:pointer; transition:background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 1px rgba(255,255,255,0.6) inset; }
.btn.primary { --btn-bg:linear-gradient(135deg,#2563eb,#1d4ed8); color:#ffffff; }
.btn.outline { background:#ffffff; border-color:#2563eb; color:#2563eb; }
.btn.outline:hover { background:#f0f7ff; }
.btn.danger { --btn-bg:linear-gradient(135deg,#dc2626,#b91c1c); color:#ffffff; }
.btn:focus-visible { outline:2px solid var(--color-focus-ring); outline-offset:2px; }

.btn[disabled], .btn:disabled {
	opacity: .85;
	cursor: not-allowed;
	background: linear-gradient(135deg, #e5e7eb, #d1d5db);
	color: #374151 !important;
	border-color: #d1d5db;
	box-shadow: none;
}

/* Status */
.status-pill { padding:.42rem .85rem .46rem; font-size:.62rem; letter-spacing:.55px; font-weight:700; border-radius:40px; text-transform:uppercase; background:#e5e7eb; color:#111827; border:1px solid var(--color-border-strong); position:relative; }
.status-pill:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,rgba(255,255,255,0.8),rgba(255,255,255,0)); opacity:.4; pointer-events:none; }
.status-pill.approved { background:#d1fae5; color:#065f46; border-color:#34d399; }
.status-pill.rejected { background:#fee2e2; color:#7f1d1d; border-color:#fca5a5; }
.status-pill.pending { background:#fef3c7; color:#854d0e; border-color:#fbbf24; }
.success { color:#065f46; font-size:.8rem; }
.error-text { color:#b91c1c; font-size:.8rem; }
.pending { color:#92400e; font-size:.8rem; }
.rejected-box { background:#fee2e2; border:1px solid #fca5a5; padding:1rem 1.05rem; border-radius:14px; margin-bottom:1rem; }
.rejection-reasons { list-style:disc; padding-left:1.1rem; margin:.45rem 0 0; }
.rejection-reasons li { font-size:.72rem; margin:.3rem 0; color:#7f1d1d; }

/* Make the ID verification section feel like an inline card (not a modal) */
.id-verification-section {
	/* slightly stronger white surface but less glassy */
	background: rgba(255,255,255,0.94);
	backdrop-filter: none;
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: 0 2px 8px rgba(15,23,42,0.06);
	padding: 1.1rem 1.2rem 1.25rem;
	border-radius: calc(var(--radius-card) - 6px);
}
.id-verification-section.card:before { display:none; }
.id-verification-section .card-header { gap:0.75rem; }
.id-verification-section .card-header h2 { font-size:1rem; margin:0; }
.id-verification-section .status-pill { margin-left:8px; transform:none; position:static; }
.id-verification-section .rejected-box { margin-top:0.6rem; }
.id-verification-section .field-group input[type=file] { cursor:pointer; }
.id-verification-section .actions.end { margin-top:0.6rem; }

/* Keep the visual weight low on small screens */
@media (max-width:640px) {
	.id-verification-section { padding:0.9rem 0.9rem 1rem; }
}

/* Password meter */
.pw-meter { position:relative; display:flex; align-items:center; margin-top:.45rem; gap:.6rem; }
.pw-meter .bar { flex:1; height:6px; border-radius:4px; background:linear-gradient(90deg,#fecaca,#fde68a,#d1fae5,#bfdbfe); filter:grayscale(1) brightness(.75); opacity:.8; position:relative; overflow:hidden; }
.pw-meter .bar::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#ef4444,#f59e0b,#10b981,#2563eb,#7c3aed); transform:scaleX(var(--s,0)); transform-origin:left; transition:transform .45s ease; }
.pw-meter .pw-label { font-size:.63rem; letter-spacing:.6px; font-weight:600; color:var(--color-text-muted); }
.score-0 { --s:.15; }
.score-1 { --s:.3; filter:grayscale(.85) brightness(.7); }
.score-2 { --s:.55; filter:grayscale(.6) brightness(.85); }
.score-3 { --s:.8; filter:grayscale(.35) brightness(.95); }
.score-4, .score-5 { --s:1; filter:grayscale(0) brightness(1.05); opacity:1; }

/* Toggles */
.toggle { font-size:.65rem; font-weight:600; letter-spacing:.5px; display:inline-flex; gap:.4rem; align-items:center; cursor:pointer; user-select:none; }
.toggle input { width:18px; height:18px; accent-color:#2563eb; }

/* Utility */
.stack { display:flex; flex-direction:column; }
.gap-sm { gap:.75rem; }
.gap-md { gap:1.15rem; }
.inline { flex-direction:row; }

/* Loading */
.loading-container { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1rem; animation:fadeIn .6s ease; }
.spinner { width:40px; height:40px; border:4px solid rgba(0,0,0,0.08); border-top-color:#2563eb; border-radius:50%; animation:spin 1s linear infinite; margin-bottom:1rem; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeSlide { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from { opacity:0;} to { opacity:1;} }

/* Focus visible polyfill style */
*:focus-visible { outline:2px solid var(--color-focus-ring); outline-offset:3px; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.card, .btn, input, select, .avatar-overlay, .pw-meter .bar::after { transition:none !important; }
	.dashboard-container { animation:none; }
}

/* High contrast mode support (forced-colors) */
@media (forced-colors: active) {
	.card { border:1px solid CanvasText; background:Canvas; }
	.btn { border:1px solid CanvasText; }
	input, select { border:1px solid CanvasText; }
}

/* Screen reader utility */
.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; }

/* Scrollbar (webkit) */
.landlord-main::-webkit-scrollbar { width:10px; }
.landlord-main::-webkit-scrollbar-track { background:rgba(0,0,0,0.06); }
.landlord-main::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#9ca3af,#6b7280); border-radius:6px; }
.landlord-main::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#6b7280,#4b5563); }

/* Responsive */
@media (max-width:1020px){ .profile-grid { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } }
@media (max-width:900px){ .profile-grid { grid-template-columns:1fr; } .field-row { flex-direction:column; } }
@media (max-width:640px){ .landlord-main { padding:1.1rem; } .card { padding:1.25rem 1.1rem 1.4rem; } .actions.end { justify-content:stretch; } .btn { flex:1; } }/* AddProperties.css - UPDATED */

/* Modern Add Property Styling leveraging landlord theme */
.add-property-container { 
    max-width:960px; 
    margin:0 auto; 
}
.add-property-container .form-title { 
    text-align:center; 
    margin:0 0 1.4rem; 
    font-size:1.55rem; 
    font-weight:600; 
    letter-spacing:.5px; 
    color:var(--color-text-primary); 
}

/* Form Sections */
.form-section {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

/* Add grid layout for form sections */
.ll-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.ll-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ll-gap-md {
    gap: 32px;
}

.add-property-form {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    background: #fff;
}

.form-header {
    margin-bottom: 32px;
}

.form-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.form-subtitle {
    font-size: 1.1rem;
    color: #111;
}

.info-banner {
    margin-bottom: 32px;
    padding: 12px 18px;
    background: #f7f7f7;
    border-radius: 8px;
    font-size: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full {
    grid-column: span 2;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
}

.images-section, .video-section {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 0;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.current-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.image-chip {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-chip button {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 1.1em;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.placeholder {
    color: #111;
    font-size: 0.95em;
}

.file-drop-modern {
    display: inline-block;
    padding: 8px 16px;
    background: #e3e3e3;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.98em;
    margin-top: 6px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.video-preview-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: column;
}

.video-preview {
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
}

.video-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.ll-btn.tiny {
    font-size: 0.92em;
    padding: 4px 10px;
}

.ll-btn.primary {
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-weight: 600;
    cursor: pointer;
}

.ll-btn.outline {
    background: #fff;
    color: #1976d2;
    border: 1px solid #1976d2;
    border-radius: 6px;
    padding: 8px 18px;
    font-weight: 600;
    cursor: pointer;
}

.ll-btn.danger {
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-weight: 600;
    cursor: pointer;
}

.map-preview-section {
    margin-top: 32px;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    background: #fafafa;
}

.form-row .form-section {
    flex: 1;
}

/* 360° Panoramic Section Design - UPDATED */
.panorama-section {
    border-top: 1px solid var(--color-border);
    padding-top: 1.4rem;
    margin-bottom: 1.5rem;
}
.panorama-section .section-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.08rem;
    color: #0a2540;
}
.panorama-section .field-hint {
    color: #64748b;
    font-size: 0.93em;
    margin-bottom: 0.7em;
}

/* Panorama Preview Container - UPDATED */
.panorama-preview-container {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-bottom: 12px;
    background: #000;
    position: relative;
}

/* Grid for multiple panorama previews - UPDATED */
.panorama-previews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.panorama-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.panorama-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.panorama-card .panorama-preview-container {
    height: 240px;
    margin-bottom: 0;
    border-radius: 0;
    flex: 1;
}

/* Panorama Card Actions - UPDATED */

/* --- New: Shared panorama caption styling --- */
.panorama-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    padding: 12px;
}

.panorama-item .panorama-viewer, .panorama-img {
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.12);
}

.panorama-caption-label {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.panorama-caption-input {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1.5px solid #d1d1d1;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panorama-caption-input:focus {
    border-color: #29871c;
    box-shadow: 0 0 5px rgba(41, 135, 28, 0.4);
}

.caption-counter {
    font-size: 0.75rem;
    color: #000;
    text-align: right;
}
.panorama-actions {
    padding: 12px 16px;
    display: flex;
    justify-content: center;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    min-height: 60px;
    align-items: center;
}

.panorama-card button.remove-panorama {
    position: static;
    width: auto;
    margin: 0;
    font-size: 0.85em;
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.panorama-card button.remove-panorama:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* Panorama Control Buttons - UPDATED */
.panorama-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.panorama-control-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #0f172a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 14px;
}

.panorama-control-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

.panorama-control-btn.expand {
    color: #2563eb;
}

.panorama-control-btn.remove {
    color: #dc2626;
    display: none; /* Hide the remove button from controls since it's now in actions */
}

.panorama-section .ll-btn.tiny {
    font-size: 0.85em;
    padding: 0.45rem 0.9rem 0.4rem;
}
.panorama-section .ll-btn.tiny.danger {
    background: #dc2626;
}
.panorama-section .ll-btn.tiny.danger:hover {
    filter: brightness(1.1);
}

/* Form Elements */
.input-field,
.textarea-field,
.select-field { 
    width:100%; 
    padding:12px 15px; 
    border:1px solid #d1d5db; 
    border-radius:var(--radius-field); 
    font-size:.95rem; 
    background:#fff; 
    color:#000 !important; 
    transition:border-color var(--transition-base), box-shadow var(--transition-base); 
    box-sizing: border-box;
}

.input-field::placeholder,
.textarea-field::placeholder,
.select-field::placeholder { 
    color:#6b7280; 
    opacity:1;
}

.input-field:focus,
.textarea-field:focus,
.select-field:focus { 
    outline:none; 
    border-color:var(--color-border-accent); 
    box-shadow:0 0 0 3px rgba(37,99,235,0.25); 
}

.textarea-field {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
    color:#000 !important;
}

.select-field {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    cursor: pointer;
    color:#000 !important;
}

.select-field option { color:#000; background:#fff; }
.select-field option:checked { background:#e0f2fe; color:#000; }

/* Checkbox Styles */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.checkbox-group label {
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}

.conditional-field {
    margin-top: 15px;
    padding-left: 28px;
}

/* Image Upload Styles */
.file-input { 
    width:100%; 
    padding:12px 14px; 
    margin-bottom:15px; 
    border:2px dashed #cbd5e1; 
    border-radius:12px; 
    background:var(--color-surface-subtle); 
    cursor:pointer; 
    font-size:.85rem; 
    font-weight:600; 
    color:var(--color-text-secondary); 
    letter-spacing:.5px; 
    text-transform:uppercase; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:8px; 
    transition:.25s border-color,.25s background; 
    box-sizing: border-box;
}

.file-input:hover { 
    border-color:var(--color-border-accent); 
    background:#f0f7ff; 
}

.image-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.image-preview-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-preview {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.remove-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    background-color: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.remove-image-btn:hover {
    background-color: #dc2626;
}

/* Button Styles */
.submit-button { 
    width:100%; 
    margin-top:20px; 
}

.submit-button.ll-btn { 
    font-size:.8rem; 
}

.submit-button.ll-btn:disabled { 
    opacity:.6; 
}

/* Verification Message Styles */
.verification-message { 
    max-width:620px; 
    margin:50px auto; 
    padding:30px; 
    background:var(--color-surface); 
    border:1px solid var(--color-border); 
    border-radius:16px; 
    box-shadow:var(--elevation-md); 
    text-align:center; 
}

.verification-message h2 {
    color: #ef4444;
    margin-bottom: 15px;
    font-size: 24px;
}

.verification-message p {
    color: #4b5563;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.verify-button {
    padding: 12px 30px;
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.verify-button:hover {
    background-color: #2563eb;
}

/* Modern AddProperties form alignment with EditProperty */
.add-property-main { 
    padding:2rem; 
}

.add-property-form { 
    display:flex; 
    flex-direction:column; 
    gap:2rem; 
}

.form-header { 
    margin-bottom:.25rem; 
}

.form-subtitle { 
    margin:0; 
    font-size:.85rem; 
    color:var(--color-text-muted); 
    line-height:1.4; 
}

.form-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); 
    gap:1.2rem 1.4rem; 
}

.form-grid .field-group.full { 
    grid-column:1/-1; 
}

.field-group { 
    display:flex; 
    flex-direction:column; 
    position:relative; 
}

.field-group label { 
    font-weight:600; 
    font-size:.78rem; 
    letter-spacing:.5px; 
    text-transform:uppercase; 
    margin-bottom:6px; 
    color:var(--color-text-secondary); 
}

.field-hint { 
    font-size:.65rem; 
    color:var(--color-text-muted); 
    margin-top:4px; 
}

.field-hint.small { 
    font-size:.63rem; 
    letter-spacing:.4px; 
}

.checkbox-label { 
    font-size:.8rem; 
    font-weight:600; 
    display:flex; 
    align-items:center; 
    gap:.55rem; 
    cursor:pointer; 
}

.checkbox-label input { 
    width:18px; 
    height:18px; 
    accent-color:#2563eb; 
}

.toggle-field .mt-6 { 
    margin-top:6px; 
}

.info-banner { 
    background:#fff8e6; 
    border:1px solid #ffe2ab; 
    padding:14px 16px; 
    border-radius:12px; 
    font-size:.75rem; 
    line-height:1.4; 
    letter-spacing:.35px; 
}

/* Image section reuse */
.images-section { 
    border-top:1px solid var(--color-border); 
    padding-top:1.4rem; 
}

.section-title { 
    margin:0 0 .5rem; 
    font-size:1.05rem; 
    font-weight:600; 
    letter-spacing:.4px; 
}

.current-images-grid { 
    display:flex; 
    flex-wrap:wrap; 
    gap:.9rem; 
    margin-top:.6rem; 
}

.image-chip { 
    position:relative; 
    width:140px; 
    height:110px; 
    border-radius:14px; 
    overflow:hidden; 
    background:var(--color-surface-subtle); 
    border:1px solid var(--color-border); 
    box-shadow:0 1px 3px rgba(0,0,0,.12); 
}

.image-chip img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    display:block; 
}

.image-chip button { 
    position:absolute; 
    top:6px; 
    right:6px; 
    background:rgba(0,0,0,.55); 
    color:#fff; 
    border:none; 
    width:26px; 
    height:26px; 
    border-radius:50%; 
    font-size:18px; 
    line-height:1; 
    font-weight:600; 
    cursor:pointer; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    transition:.25s background; 
}

.image-chip button:hover { 
    background:#dc2626; 
}

.placeholder { 
    font-size:.7rem; 
    color:var(--color-text-muted); 
    padding:.4rem .2rem; 
}

.form-actions { 
    display:flex; 
    justify-content:flex-end; 
    gap:.85rem; 
    margin-top:.5rem; 
}

/* Video Section */
.video-section { 
    border-top:1px solid var(--color-border); 
    padding-top:1.4rem; 
}

.video-preview-wrapper { 
    position:relative; 
    max-width:420px; 
    margin-top:.8rem; 
}

.video-preview { 
    width:100%; 
    max-height:300px; 
    border-radius:16px; 
    background:#000; 
    box-shadow:0 4px 18px -6px rgba(0,0,0,.4); 
}

.video-preview-wrapper .ll-btn.tiny { 
    margin-top:.6rem; 
    font-size:.55rem; 
    padding:.45rem .75rem .4rem; 
}

.ll-btn.tiny.danger { 
    background:#dc2626; 
}

.ll-btn.tiny.danger:hover { 
    filter:brightness(1.1); 
}

/* Required Field Indicator */
.required::after {
    content: " *";
    color: #ef4444;
}

.form-group label {
    color: #000 !important;
    font-weight: 600;
    font-size: 0.92rem;
}

/* ========== MOBILE RESPONSIVE STYLES ========== */
@media (max-width: 768px) {
    .add-property-main { 
        padding: 1rem; 
    }
    
    .add-property-form {
        padding: 20px 16px;
        border-radius: 12px;
    }
    
    .ll-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .form-group.full {
        grid-column: 1;
    }
    
    .form-title {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .form-subtitle {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .info-banner {
        font-size: 0.8rem;
        padding: 10px 14px;
        margin-bottom: 20px;
    }
    
    .form-row.mobile-column {
        flex-direction: column;
        gap: 0;
    }
    
    .images-section, 
    .video-section, 
    .panorama-section {
        padding: 14px;
        margin-top: 20px;
    }
    
    .section-title {
        font-size: 1rem;
    }
    
    .current-images-grid {
        justify-content: center;
    }
    
    .image-chip {
        width: 100px;
        height: 80px;
    }
    
    .file-drop-modern {
        padding: 10px 12px;
        font-size: 0.82rem;
    }
    
    .map-preview-section {
        padding: 16px;
        margin-top: 20px;
    }
    
    .map-preview-section h3 {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .form-actions .ll-btn {
        width: 100%;
        text-align: center;
    }
    
    .video-preview-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .video-preview {
        max-height: 200px;
        width: 100%;
    }
    
    /* Mobile panorama adjustments */
    .panorama-preview-container {
        height: 250px;
    }
    
    .panorama-previews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .panorama-card .panorama-preview-container {
        height: 200px;
    }
    
    .panorama-controls {
        top: 8px;
        right: 8px;
    }
    
    .panorama-control-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .panorama-actions {
        padding: 10px 12px;
        min-height: 50px;
    }
}

@media (max-width: 480px) {
    .add-property-main {
        padding: 0.5rem;
    }
    
    .add-property-form {
        padding: 16px 12px;
    }
    
    .form-title {
        font-size: 1.3rem;
    }
    
    .info-banner {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
    
    .input-field,
    .textarea-field,
    .select-field {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .textarea-field {
        min-height: 80px;
    }
    
    .image-chip {
        width: 80px;
        height: 60px;
    }
    
    .current-images-grid {
        gap: 6px;
    }
    
    .map-preview-section > div[style], 
    .map-preview-section > div {
        height: 200px !important;
    }
    
    /* Small mobile panorama */
    .panorama-preview-container {
        height: 200px;
    }
    
    .panorama-card .panorama-preview-container {
        height: 180px;
    }
    
    .panorama-actions {
        padding: 8px 10px;
        min-height: 45px;
    }
    
    .panorama-card button.remove-panorama {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

/* Additional mobile tweaks for very small screens */
@media (max-width: 360px) {
    .add-property-form {
        padding: 12px 8px;
    }
    
    .form-title {
        font-size: 1.2rem;
    }
    
    .image-chip {
        width: 70px;
        height: 55px;
    }
    
    .file-drop-modern {
        font-size: 0.75rem;
        padding: 8px 10px;
    }
    
    .map-preview-section {
        padding: 12px;
    }
    
    .map-preview-section > div[style], 
    .map-preview-section > div {
        height: 180px !important;
    }
    
    .panorama-preview-container {
        height: 180px;
    }
    
    .panorama-card .panorama-preview-container {
        height: 160px;
    }
}

/* Mobile grid class for conditional rendering */
.mobile-grid {
    grid-template-columns: 1fr !important;
}.pano-payment-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  animation: fadeIn 0.2s ease-out;
}

.pano-payment-overlay.mobile .pano-payment-modal {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
}

.pano-payment-modal {
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  animation: slideUp 0.3s ease-out;
}

.pano-payment-header {
  text-align: center;
  margin-bottom: 20px;
}

.pano-payment-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.pano-payment-modal h3 {
  margin: 0 0 8px 0;
  font-size: 1.5em;
  color: #1f2937;
  font-weight: 700;
}

.pano-payment-content {
  margin: 20px 0;
}

.pano-payment-description {
  margin: 0 0 20px 0;
  color: #4b5563;
  line-height: 1.5;
  text-align: center;
}

.pano-payment-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #0b74ff;
}

.benefit-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

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

.benefit-text strong {
  color: #1f2937;
  font-size: 0.9em;
}

.benefit-text span {
  color: #6b7280;
  font-size: 0.85em;
}

.pano-payment-pricing {
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-radius: 12px;
  margin: 20px 0;
}

.pricing-amount {
  font-size: 2.5em;
  font-weight: 800;
  color: #0b74ff;
  line-height: 1;
}

.pricing-note {
  color: #4b5563;
  font-size: 0.9em;
  margin-top: 4px;
}

.pano-payment-error {
  background: #fff5f5;
  color: #9b2c2c;
  border: 1px solid #fecaca;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 0.9em;
}

.pano-payment-success {
  background: #f0fdf4;
  color: #065f46;
  border: 1px solid #bbf7d0;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 0.9em;
}

.pano-payment-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin: 24px 0 16px 0;
}

.btn {
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  border: none;
}

.btn.primary {
  background: linear-gradient(90deg, #0b74ff, #0066d6);
  color: white;
  box-shadow: 0 4px 12px rgba(11, 116, 255, 0.2);
}

.btn.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 116, 255, 0.3);
}

.btn.primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn.outline {
  background: #dc2626; /* RED BACKGROUND */
  color: white; /* WHITE TEXT */
  border: 1px solid #dc2626;
}

.btn.outline:hover:not(:disabled) {
  background: #b91c1c; /* DARKER RED */
  color: white; /* KEEP WHITE TEXT */
}

.btn.outline:active {
  transform: translateY(0);
}

.btn.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  background: #dc2626;
  color: white;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.pano-payment-footer {
  text-align: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #6b7280;
  font-size: 0.85em;
}

.shield-icon {
  font-size: 14px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 520px) {
  .pano-payment-modal {
    width: calc(100% - 32px);
    padding: 20px;
    border-radius: 12px;
  }
  
  .pano-payment-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  
  .btn {
    width: 100%;
    padding: 14px 20px;
  }
  
  .pano-payment-modal h3 {
    font-size: 1.3em;
  }
  
  .pricing-amount {
    font-size: 2.2em;
  }
}

@media (max-width: 380px) {
  .pano-payment-modal {
    padding: 16px;
  }
  
  .benefit-item {
    padding: 10px;
  }
  
  .pano-payment-pricing {
    padding: 12px;
  }
}

/* PREVIEW COMPONENT STYLES */
.pano-upload-container {
  max-width: 600px;
  margin: 0 auto;
}

.upload-section {
  padding: 30px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  text-align: center;
  background: #fafafa;
}

.upload-section h4 {
  margin-bottom: 15px;
  color: #1f2937;
}

.preview-container {
  padding: 20px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.preview-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e5e7eb;
}

.preview-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 25px;
}

.uploading-state {
  text-align: center;
  padding: 40px 20px;
}

.uploading-state .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f4f6;
  border-top: 3px solid #0b74ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}/* Modern My Properties Styling */
.properties-main { position:relative; }

.search-filter-container {
  margin-bottom: 20px;
}

.search-filter-container input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.properties-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.properties-grid.modern .property-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; box-shadow:var(--elevation-md); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow var(--transition-base), transform var(--transition-base); }
.properties-grid.modern .property-card:hover { box-shadow:var(--elevation-lg); transform:translateY(-3px); }
/* enhanced rich card variant */
.property-card.rich { position:relative; }
.property-card.rich .property-images.swap { position:relative; }
.property-card.rich .property-images.swap .property-image.layer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .5s ease, transform .6s ease; }
.property-card.rich .property-images.swap .property-image.base { opacity:1; }
.property-card.rich .property-images.swap .property-image.hover { opacity:0; transform:scale(1.08); }
.property-card.rich:hover .property-images.swap .property-image.base { opacity:0; }
.property-card.rich:hover .property-images.swap .property-image.hover { opacity:1; transform:scale(1); }
.image-badges { position:absolute; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:6px; z-index:2; }
.image-badges .tag { background:rgba(255,255,255,0.85); backdrop-filter:blur(4px); padding:4px 8px; border-radius:40px; font-size:.55rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#1f2937; box-shadow:0 2px 6px -2px rgba(0,0,0,.25); border:1px solid rgba(0,0,0,.1); }
.image-badges .tag.cat { background:linear-gradient(135deg,#dbeafe,#bfdbfe); }
.image-badges .tag.loc { background:linear-gradient(135deg,#fef3c7,#fde68a); }
.image-badges .tag.pet { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
.image-badges .tag.park { background:linear-gradient(135deg,#e0f2fe,#bae6fd); }

/* base card style replaced */

.property-card.skeleton {
  position: relative;
  animation: pulse 1.4s ease-in-out infinite;
}

/* hover handled by modern variant */

.property-images { height:200px; overflow:hidden; background:#f1f5f9; position:relative; }
.property-images:after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0) 60%,rgba(0,0,0,0.35)); opacity:.6; pointer-events:none; }

.property-card.skeleton .property-images {
  background: #e3e6e9;
}

.property-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-details { padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; }

.property-card.skeleton .property-details .line {
  height: 14px;
  background: #e3e6e9;
  border-radius: 6px;
  margin-bottom: 10px;
}

.property-card.skeleton .property-details .line.w-60 { width: 60%; }
.property-card.skeleton .property-details .line.w-40 { width: 40%; }
.property-card.skeleton .property-details .line.w-50 { width: 50%; }
.property-card.skeleton .property-details .line.w-30 { width: 30%; }

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}

.property-details h3 { margin:0 0 8px; font-size:1.05rem; font-weight:600; color:var(--color-text-primary); letter-spacing:.3px; }

.property-details p { margin:4px 0; color:var(--color-text-secondary); font-size:.8rem; }
.property-details .meta-line { display:flex; align-items:center; gap:8px; font-size:.7rem; font-weight:600; color:var(--color-text-secondary); margin:-2px 0 6px; letter-spacing:.4px; text-transform:uppercase; }
.property-details .meta-line .price { font-size:.85rem; font-weight:700; color:#111827; letter-spacing:.5px; }
.property-details .meta-line .dot { width:4px; height:4px; background:#9ca3af; border-radius:50%; display:inline-block; }
.property-details .landmark { font-size:.68rem; letter-spacing:.3px; color:var(--color-text-muted); margin:0 0 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.my-properties-actions { margin-top:auto; display:flex; gap:8px; }

.my-properties-actions button { flex:1; }
.my-properties-actions.unified { gap:10px; }
.my-properties-actions.unified .ll-btn.small { min-height:34px; font-size:.55rem; padding:.45rem .9rem .5rem; }

.no-properties-message { text-align:center; padding:34px 28px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; box-shadow:var(--elevation-md); }

.no-properties-message p {
  margin-bottom: 10px;
}

.no-properties-message button { background:#2563eb; color:#fff; border:none; padding:12px 20px; cursor:pointer; border-radius:10px; font-weight:600; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; box-shadow:0 4px 12px -2px rgba(37,99,235,0.4); }
.no-properties-message button:hover { background:#1d4ed8; }

.no-properties-message button:hover {
  background-color: #0056b3;
}

@media (max-width:780px){ .header-row { flex-direction:column; align-items:flex-start; gap:10px; } }
/* Toolbar additions */
.header-row { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.title-block { display:flex; flex-direction:column; gap:.35rem; }
.title-block .stats-line { font-size:.65rem; letter-spacing:.45px; font-weight:600; color:var(--color-text-muted); display:flex; gap:.5rem; }
.toolbar-actions { display:flex; align-items:stretch; gap:.75rem; flex-wrap:wrap; }
.toolbar-actions .search-filter-container { margin:0; flex:1 1 240px; }
.toolbar-actions .search-input { min-height:42px; font-size:.72rem; }
.sort-select { width:140px; min-height:42px; font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; }

/* Mobile tweaks */
@media (max-width:600px) {
  .properties-grid { grid-template-columns: 1fr; }
  .toolbar-actions { flex-direction:column; align-items:stretch; gap:8px; }
  .toolbar-actions .search-filter-container { order:1; width:100%; }
  .toolbar-actions .sort-select { width:100%; }
  .my-properties-actions { flex-direction:column; }
}.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;}
.confirm-box{background:#fff;color:#222;min-width:300px;max-width:420px;border-radius:12px;padding:1.25rem 1.25rem 1rem;box-shadow:0 10px 28px -6px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:.75rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
.confirm-box.danger{border:2px solid #dc2626;}
.cd-header{display:flex;align-items:center;gap:.6rem;}
.cd-icon{font-size:1.75rem;display:flex;align-items:center;justify-content:center;}
.confirm-box h4{margin:0;font-size:1.05rem;font-weight:600;}
.confirm-box p{margin:0;font-size:.9rem;line-height:1.3;color:#333;}
.confirm-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:.5rem;}
.confirm-actions button{border:none;cursor:pointer;font-size:.85rem;font-weight:600;border-radius:8px;padding:.55rem .95rem;display:inline-flex;align-items:center;justify-content:center;transition:background .18s,box-shadow .18s,transform .18s;}
.primary-btn{background:#2563eb;color:#fff;}
.primary-btn:hover:not(:disabled){background:#1d4ed8;}
.secondary-btn{background:#e5e7eb;color:#111;}
.secondary-btn:hover:not(:disabled){background:#d1d5db;}
.danger-btn{background:#dc2626;color:#fff;}
.danger-btn:hover:not(:disabled){background:#b91c1c;}
button:disabled{opacity:.6;cursor:default;}
@media (max-width:480px){.confirm-box{width:100%;min-width:0;}}
/* EditProperty.css - COMPLETE UPDATED VERSION */

/* Modernized Edit Property styles leveraging landlord theme */
.edit-property-main { 
    padding: 2rem; 
}

.edit-property-form { 
    display: flex; 
    flex-direction: column; 
    gap: 2rem; 
}

.form-header { 
    margin-bottom: .25rem; 
}

.form-title { 
    margin: 0 0 .35rem; 
    font-size: 1.55rem; 
    font-weight: 600; 
    letter-spacing: .5px; 
}

.form-subtitle { 
    margin: 0; 
    font-size: .85rem; 
    color: var(--color-text-muted); 
    line-height: 1.4; 
}

.form-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
    gap: 1.2rem 1.4rem; 
}

.form-grid .field-group.full { 
    grid-column: 1 / -1; 
}

.field-group { 
    display: flex; 
    flex-direction: column; 
    position: relative; 
}

.field-group label { 
    font-weight: 600; 
    font-size: .78rem; 
    letter-spacing: .5px; 
    text-transform: uppercase; 
    margin-bottom: 6px; 
    color: #000 !important; 
}

.field-hint { 
    font-size: .65rem; 
    color: var(--color-text-muted); 
    margin-top: 4px; 
}

.field-hint.small { 
    font-size: .63rem; 
    letter-spacing: .4px; 
}

.field-hint.small.success {
    color: #10b981;
    font-weight: 500;
}

.checkbox-label { 
    font-size: .8rem; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    gap: .55rem; 
    cursor: pointer; 
}

.checkbox-label input { 
    width: 18px; 
    height: 18px; 
    accent-color: #2563eb; 
}

.toggle-field .mt-6 { 
    margin-top: 6px; 
}

/* 🟡 FIX 1 & 2: Better styling for conditional fields */
.field-disabled {
    opacity: 0.7;
    pointer-events: none;
}

.field-disabled .ll-field {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
}

.field-disabled label {
    color: #6c757d;
}

.field-disabled .field-hint {
    color: #6c757d;
}

/* Error state styling */
.field-error {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 4px;
    font-weight: 500;
}

.ll-field.error {
    border-color: #dc2626;
    background-color: #fef2f2;
}

/* Animation for field changes */
.field-transition {
    transition: all 0.3s ease;
}

/* Loading state for form */
.form-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Images Section */
.images-section { 
    border-top: 1px solid var(--color-border); 
    padding-top: 1.4rem; 
}

.section-title { 
    margin: 0 0 .5rem; 
    font-size: 1.05rem; 
    font-weight: 600; 
    letter-spacing: .4px; 
}

.current-images-grid, .new-images-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: .9rem; 
    margin-top: .6rem; 
}

.image-chip { 
    position: relative; 
    width: 140px; 
    height: 110px; 
    border-radius: 14px; 
    overflow: hidden; 
    background: var(--color-surface-subtle); 
    border: 1px solid var(--color-border); 
    box-shadow: 0 1px 3px rgba(0,0,0,.12); 
}

.image-chip img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.image-chip button { 
    position: absolute; 
    top: 6px; 
    right: 6px; 
    background: rgba(0,0,0,.55); 
    color: #fff; 
    border: none; 
    width: 26px; 
    height: 26px; 
    border-radius: 50%; 
    font-size: 18px; 
    line-height: 1; 
    font-weight: 600; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: .25s background; 
}

.image-chip button:hover { 
    background: #dc2626; 
}

.image-chip.pending { 
    outline: 2px dashed #2563eb; 
    outline-offset: 2px; 
}

.placeholder { 
    font-size: .7rem; 
    color: var(--color-text-muted); 
    padding: .4rem .2rem; 
}

.file-drop-modern { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: .55rem; 
    padding: 12px 20px; 
    border: 2px dashed #cbd5e1; 
    border-radius: 14px; 
    background: var(--color-surface-subtle); 
    font-size: .65rem; 
    font-weight: 700; 
    letter-spacing: .55px; 
    text-transform: uppercase; 
    cursor: pointer; 
    transition: .25s border-color, .25s background; 
    color: var(--color-text-secondary); 
    margin-top: .9rem; 
}

.file-drop-modern:hover { 
    border-color: var(--color-border-accent); 
    background: #ecf4ff; 
}

.file-drop-modern input { 
    position: absolute; 
    opacity: 0; 
    width: 0; 
    height: 0; 
    pointer-events: none; 
}

.new-upload-block { 
    margin-top: .5rem; 
}

/* Video Section */
.video-section { 
    border-top: 1px solid var(--color-border); 
    padding-top: 1.4rem; 
}

.video-preview-wrapper { 
    position: relative; 
    max-width: 420px; 
    margin-top: .8rem; 
}

.video-preview { 
    width: 100%; 
    max-height: 300px; 
    border-radius: 16px; 
    background: #000; 
    box-shadow: 0 4px 18px -6px rgba(0,0,0,.4); 
}

.video-actions { 
    display: flex; 
    gap: .6rem; 
    margin-top: .6rem; 
}

.ll-btn.tiny { 
    font-size: .55rem; 
    padding: .45rem .75rem .4rem; 
}

.ll-btn.tiny.danger { 
    background: #dc2626; 
}

.ll-btn.tiny.danger:hover { 
    filter: brightness(1.1); 
}

.removed-note { 
    margin-top: .6rem; 
    font-size: .6rem; 
    color: #dc2626; 
    font-weight: 600; 
    letter-spacing: .5px; 
}

.link-btn { 
    background: none; 
    border: none; 
    color: #2563eb; 
    cursor: pointer; 
    text-decoration: underline; 
    padding: 0 .2rem; 
    font-size: .6rem; 
}

.link-btn:hover { 
    color: #1d4ed8; 
}

/* 360° Panoramic Section - ENHANCED */
.panorama-section {
    border-top: 1px solid var(--color-border);
    padding-top: 1.4rem;
    margin-bottom: 2rem;
}

.panorama-section .section-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.1rem;
    color: #0a2540;
    margin-bottom: 1rem;
}

.panorama-section .field-hint {
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Count badge styling */
.count-badge {
    background: #3b82f6;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7em;
    margin-left: 8px;
    font-weight: 600;
}

/* Panorama Grid - ENHANCED */
.panorama-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
    align-items: start;
}

@media (max-width: 1280px) {
    .panorama-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .panorama-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1rem;
    }
}

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

/* Panorama Card - ENHANCED */
.panorama-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.panorama-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.panorama-preview {
    position: relative;
    width: 100%;
    height: 240px;
    background: #f1f5f9;
    flex: 1;
}

.panorama-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
}

.panorama-control-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #0f172a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.panorama-control-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

.panorama-control-btn.expand {
    color: #2563eb;
}

.panorama-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Panorama Actions - ENHANCED */
.panorama-actions {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    min-height: 60px;
}

.panorama-info {
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* 🟢 FIX 4: Enhanced Remove Button in Actions Area */
.panorama-remove-btn {
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.panorama-remove-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.panorama-remove-btn:active {
    transform: translateY(0);
}

.panorama-remove-btn i {
    font-size: 0.9em;
}

/* Upload Section - ENHANCED */
.panorama-upload {
    margin: 1rem 0;
    padding: 2rem;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    text-align: center;
    background: #f8fafc;
    transition: all 0.3s ease;
    position: relative;
}

.panorama-upload:hover:not(.disabled) {
    border-color: #3b82f6;
    background: #f0f7ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.panorama-upload.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.panorama-upload-text {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.panorama-upload.disabled .panorama-upload-text {
    color: #000;
}

.panorama-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #64748b;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.panorama-count .count-current {
    color: #0f172a;
    font-weight: 600;
}

.panorama-count .count-max {
    color: #64748b;
}

/* Progress Indicator */
.upload-progress {
    margin-top: 0.5rem;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
}

/* 360° Preview Container */
.panorama-viewer {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-bottom: 1rem;
    background: #000;
}

.panorama-section .ll-btn.tiny {
    font-size: 0.85em;
    padding: 0.45rem 0.9rem 0.4rem;
}

.panorama-section .ll-btn.tiny.danger {
    background: #dc2626;
}

.panorama-section .ll-btn.tiny.danger:hover {
    filter: brightness(1.1);
}

/* Form Actions */
.form-actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: .85rem; 
    margin-top: .5rem; 
}

/* Skeleton Loading */
.skeleton-card { 
    padding: 1.2rem; 
}

.skeleton.line { 
    height: 14px; 
    background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9); 
    background-size: 200% 100%; 
    animation: shimmer 1.4s linear infinite; 
    border-radius: 6px; 
    margin: .55rem 0; 
}

.skeleton.line.w-50 { 
    width: 50%; 
}

.skeleton.line.w-80 { 
    width: 80%; 
}

.skeleton.line.w-40 { 
    width: 40%; 
}

.skeleton.line.w-70 { 
    width: 70%; 
}

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

/* Fullscreen Panorama Viewer */
.fullscreen-panorama {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-fullscreen {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    color: #0f172a;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

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

@media (max-width: 768px) {
    .close-fullscreen {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
}

/* Map Preview Section */
.map-preview-section {
    margin-top: 32px;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    background: #fafafa;
    border: 1px solid #e5e7eb;
}

/* Status Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-indicator.success {
    background: #d1fae5;
    color: #065f46;
}

.status-indicator.warning {
    background: #fef3c7;
    color: #92400e;
}

.status-indicator.info {
    background: #dbeafe;
    color: #1e40af;
}

/* Required Field Indicator */
.required::after {
    content: " *";
    color: #dc2626;
}

/* Mobile Responsive */
@media (max-width: 820px) { 
    .edit-property-main { 
        padding: 1.4rem; 
    } 
    
    .form-grid { 
        grid-template-columns: 1fr 1fr; 
    } 
}

@media (max-width: 620px) { 
    .form-grid { 
        grid-template-columns: 1fr; 
    } 
    
    .form-actions { 
        flex-direction: column-reverse; 
        align-items: stretch; 
    } 
    
    .form-actions .ll-btn { 
        width: 100%; 
    } 
}

/* Mobile tweaks for edit page */
@media (max-width: 520px) {
    .edit-property-main { 
        padding: 12px; 
    }
    
    .map-preview-section > div[style], 
    .map-preview-section > div { 
        height: 240px !important; 
    }
    
    .video-preview { 
        max-height: 200px; 
    }
    
    .image-chip { 
        width: 110px; 
        height: 84px; 
    }
    
    .form-grid { 
        gap: 0.8rem 0.9rem; 
    }
    
    /* Mobile panorama adjustments */
    .panorama-preview-container {
        height: 250px;
    }
    
    .panorama-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .panorama-preview {
        height: 200px;
    }
    
    .panorama-preview-overlay {
        height: 56px;
        padding: 8px;
    }
    
    .panorama-control-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .panorama-actions {
        padding: 10px 12px;
        min-height: 50px;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    .panorama-info {
        justify-content: center;
    }
    
    .panorama-remove-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .panorama-preview-container {
        height: 200px;
    }
    
    .panorama-preview {
        height: 180px;
    }
    
    .panorama-upload {
        padding: 1.5rem;
    }
    
    .panorama-upload-text {
        font-size: 0.9rem;
    }
    
    .panorama-actions {
        padding: 8px 10px;
        min-height: 45px;
    }
    
    .panorama-remove-btn {
        padding: 6px 12px;
        font-size: 0.8em;
    }
    

/* Map area improvements appended */
.map-container {
    width: 100%;
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 0.75rem;
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
    border: 1px solid var(--color-border);
}

.map-header { display:flex; justify-content:space-between; align-items:center; gap:12px }
.map-instructions { font-size:0.9rem; color:var(--color-text-muted); margin-top:0.6rem }
.geocoding-indicator { display:flex; align-items:center; gap:8px; color:var(--color-text-secondary) }
.loading-spinner { width:12px; height:12px; border-radius:50%; border:2px solid rgba(0,0,0,0.08); border-top-color:var(--color-border-accent); animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
    .form-title {
        font-size: 1.3rem;
    }
    
    .section-title {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .panorama-preview-container {
        height: 180px;
    }
    
    .panorama-preview {
        height: 160px;
    }
    
    .panorama-upload {
        padding: 1rem;
    }
    
    .panorama-upload-text {
        font-size: 0.85rem;
    }
    
    .image-chip {
        width: 100px;
        height: 80px;
    }
    
    .panorama-grid {
        gap: 0.8rem;
    }
}

/* Print Styles */
@media print {
    .edit-property-form {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .file-drop-modern,
    .panorama-upload,
    .form-actions {
        display: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .panorama-card {
        border: 2px solid #000;
    }
    
    .file-drop-modern {
        border: 2px dashed #000;
    }
    
    .panorama-upload {
        border: 2px dashed #000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .panorama-card,
    .file-drop-modern,
    .panorama-upload,
    .panorama-remove-btn,
    .close-fullscreen {
        transition: none;
    }
    
    .skeleton.line {
        animation: none;
        background: #e2e8f0;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .panorama-card {
        background: #1e293b;
        border-color: #334155;
    }
    
    .panorama-actions {
        background: #0f172a;
        border-color: #334155;
    }
    
    .panorama-upload {
        background: #0f172a;
        border-color: #334155;
    }
    
    .panorama-count {
        background: #1e293b;
        color: #000;
    }
}

/* --- New: Shared panorama caption styling --- */
.panorama-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    padding: 12px;
}

.panorama-item .panorama-viewer, .panorama-img {
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.12);
}

.panorama-caption-label {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.panorama-caption-input {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1.5px solid #d1d1d1;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panorama-caption-input:focus {
    border-color: #29871c;
    box-shadow: 0 0 5px rgba(41, 135, 28, 0.4);
}

.caption-counter {
    font-size: 0.75rem;
    color: #000;
    text-align: right;
}/* Rental Requests Container */
.rental-requests-container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, rgba(59,130,246,0.04) 0%, rgba(99,102,241,0.03) 50%, rgba(168,85,247,0.02) 100%);
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.rental-requests-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* Back Button */
.back-btn {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.875rem 1.75rem;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2rem;
  color: #475569;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.back-btn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59,130,246,0.15);
  color: #3b82f6;
}

/* Headers */
.rental-requests-content h2 {
  font-size: 2.4rem;
  margin-bottom: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  position: relative;
}

.rental-requests-content h2::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border-radius: 2px;
}

.rental-requests-content h3 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem 0;
  color: #1f2937;
  font-weight: 700;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

/* Property ID Card */
.property-id-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 1rem;
  padding: 1.75rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 30px rgba(59,130,246,0.12);
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

.property-id-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.property-id-icon {
  font-size: 2.2rem;
  color: #6366f1;
  flex-shrink: 0;
  margin-top: 0.25rem;
  filter: drop-shadow(0 4px 8px rgba(99,102,241,0.2));
}

.property-info {
  flex: 1;
}

.property-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.property-id-label {
  font-weight: 600;
  color: #64748b;
  font-size: 1rem;
}

.property-name {
  font-size: 1.3rem;
  color: #1f2937;
  font-weight: 700;
}

.property-units {
  color: #475569;
  font-size: 1rem;
  background: #f1f5f9;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  display: inline-block;
}

.property-units strong {
  color: #374151;
}

/* Requests Sections */
.requests-sections {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.request-section {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 8px 30px rgba(59,130,246,0.08);
  border: 1px solid #e2e8f0;
  transition: transform 0.3s ease;
}

.request-section:hover {
  transform: translateY(-2px);
}

/* Application Rows */
.app-row {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.app-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(59,130,246,0.02) 0%, rgba(99,102,241,0.01) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.app-row:hover::before {
  opacity: 1;
}

.app-row:hover {
  box-shadow: 0 12px 40px rgba(59,130,246,0.15);
  transform: translateY(-3px);
  border-color: #cbd5e1;
}

.app-row-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.status-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.status-icon.pending {
  color: #f59e0b;
}

.status-icon.approved {
  color: #10b981;
}

.status-icon.rejected {
  color: #ef4444;
}

.status {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.status.pending {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #fbbf24;
}

.status.approved {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  border: 1px solid #34d399;
}

.status.rejected {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border: 1px solid #f87171;
}

/* Tenant Info Section */
.tenant-info-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tenant-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid rgba(99,102,241,0.15);
  box-shadow: 0 4px 12px rgba(16,24,40,0.1);
  transition: all 0.3s ease;
}

.tenant-avatar:hover {
  border-color: rgba(99,102,241,0.3);
  transform: scale(1.05);
}

.tenant-avatar-placeholder {
  font-size: 60px;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.tenant-avatar-placeholder:hover {
  color: #94a3b8;
}

.tenant-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.tenant-name {
  font-size: 1.25rem;
  color: #1f2937;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.025em;
}

.tenant-contacts {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.tenant-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  font-weight: 500;
}

.tenant-contact:hover {
  color: #3b82f6;
  background: #f8fafc;
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}

.contact-icon {
  font-size: 0.8rem;
  color: #94a3b8;
}

.tenant-contact:hover .contact-icon {
  color: #3b82f6;
}

.app-message {
  color: #475569;
  font-size: 1rem;
  line-height: 1.6;
  margin: 1rem 0;
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Date Section - FIXED */
.date-container {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.date-line {
  display: block;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.date-line:last-child {
  margin-bottom: 0;
}

.date-label {
  font-weight: 600;
  color: #374151;
}

/* Actions */
.actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.approve-btn, .reject-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 52px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.approve-btn::before, .reject-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.approve-btn:hover::before, .reject-btn:hover::before {
  left: 100%;
}

.approve-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
}

.approve-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16,185,129,0.4);
}

.approve-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.reject-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
}

.reject-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239,68,68,0.4);
}

.no-apps {
  color: #94a3b8;
  font-style: italic;
  text-align: center;
  padding: 3rem 2rem;
  background: #f8fafc;
  border-radius: 1rem;
  border: 2px dashed #cbd5e1;
  margin: 1rem 0;
  font-size: 1.1rem;
}

/* Responsive Design */

/* Tablet */
@media (max-width: 1024px) {
  .rental-requests-content {
    padding: 2rem 1.5rem;
  }

  .rental-requests-content h2 {
    font-size: 2.1rem;
  }

  .request-section {
    padding: 1.75rem;
  }

  .property-id-card {
    padding: 1.5rem;
  }

  .tenant-avatar {
    width: 55px;
    height: 55px;
  }

  .tenant-avatar-placeholder {
    font-size: 55px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .rental-requests-content {
    padding: 1.5rem 1rem;
  }

  .rental-requests-content h2 {
    font-size: 1.9rem;
    text-align: left;
    margin-bottom: 2rem;
  }

  .rental-requests-content h2::after {
    left: 0;
    transform: none;
  }

  .rental-requests-content h3 {
    font-size: 1.35rem;
  }

  .property-id-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
  }

  .property-title-row {
    gap: 0.5rem;
  }

  .property-name {
    font-size: 1.15rem;
  }

  .requests-sections {
    gap: 2rem;
  }

  .request-section {
    padding: 1.5rem;
  }

  .app-row {
    padding: 1.5rem;
  }

  .app-row-header {
    gap: 0.5rem;
  }

  .tenant-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .tenant-name {
    font-size: 1.15rem;
  }

  .tenant-contacts {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .tenant-contact {
    width: 100%;
    justify-content: center;
  }

  .actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .approve-btn, .reject-btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
  }

  .back-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .tenant-avatar {
    width: 50px;
    height: 50px;
  }

  .tenant-avatar-placeholder {
    font-size: 50px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .rental-requests-content {
    padding: 1rem 0.75rem;
  }

  .rental-requests-content h2 {
    font-size: 1.7rem;
  }

  .rental-requests-content h3 {
    font-size: 1.25rem;
  }

  .property-id-card {
    padding: 1.25rem;
    margin-bottom: 2rem;
  }

  .request-section {
    padding: 1.25rem;
  }

  .tenant-avatar, .tenant-avatar-placeholder {
    width: 45px;
    height: 45px;
    font-size: 45px;
  }

  .app-row {
    padding: 1.25rem;
  }

  .app-row-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .status {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
  }

  .app-message {
    font-size: 0.95rem;
    padding: 0.875rem;
  }

  .date-container {
    padding: 0.625rem;
  }

  .date-line {
    font-size: 0.85rem;
  }

  .tenant-name {
    font-size: 1.1rem;
  }
}

/* Ensure no horizontal overflow */
.rental-requests-container,
.rental-requests-content {
  overflow-x: hidden;
}

/* Loading states */
.app-row.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Smooth transitions */
.app-row,
.back-btn,
.approve-btn,
.reject-btn,
.tenant-avatar,
.tenant-contact {
  transition: all 0.3s ease;
}.view-property-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.view-property-container img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.view-property-details {
    width: 100%;
    text-align: left;
}

.view-property-details h2 {
    color: #333;
    margin-bottom: 10px;
}

.view-property-details p {
    margin: 5px 0;
    color: #111;
}

.back-button {
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #29871c;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.back-button:hover {
    background-color: #206817;
}
/* Tenant light theme adaptation (reusing landlord theme tokens) */
:root { --nav-offset:80px; }
.tenant-dashboard.dashboard-container { display:flex; min-height:100vh; }
.tenant-dashboard .ll-grid { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }

/* Avatar styling aligned to landlord aesthetic */
.tenant-avatar { width:140px; height:140px; border-radius:50%; overflow:hidden; position:relative; cursor:pointer; box-shadow:0 4px 12px -4px rgba(0,0,0,.25); border:1px solid var(--color-border); background:#fff; }
.tenant-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.tenant-avatar-badge { position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#fff; transition:.25s opacity; }
.tenant-avatar:hover .tenant-avatar-badge, .tenant-avatar:focus .tenant-avatar-badge { opacity:1; }
.tenant-username { margin:0; font-size:.8rem; font-weight:600; letter-spacing:.5px; color:var(--color-text-secondary); }

/* Utility adjustments */
.ll-stack.ll-gap-sm { gap:.55rem; }
.ll-stack.ll-gap-md { gap:1rem; }
.ll-label { font-size:.65rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-muted); }
.ll-grid.narrow-two { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

/* Responsive tweaks */
@media (max-width:760px){
	.tenant-dashboard .ll-grid { grid-template-columns:1fr; }
	.tenant-avatar { width:120px; height:120px; border-radius:50%; }
}

/* Mobile tightening for tenant dashboard and connected pages */
@media (max-width: 900px) {
	.tenant-dashboard.dashboard-container { flex-direction: column; }
	.tenant-dashboard .ll-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.tenant-dashboard.dashboard-container { padding: 8px; }
	.tenant-avatar { width:100px; height:100px; }
	.tenant-username { font-size:0.78rem; }
}/* Page layout with sidebar */
.favorites-page { width:100%; display:flex; }
.favorites-main { flex:1; padding:2rem 2rem 2.8rem; position:relative; }
.favorites-container { background:#f8f9fa; border:1px solid #e2e8f0; border-radius:16px; padding:1.8rem 1.8rem 2rem; box-shadow:0 4px 18px -6px rgba(0,0,0,.06); max-width:1400px; margin:0 auto; position:relative; }
.favorites-container.empty-wrap { text-align:center; }

.favorites-title {
	font-size: 2.2rem;
	color: #007bff;
	margin-bottom: 24px;
	text-align: center;
	letter-spacing: 1px;
	font-weight: 700;
}

/* Toolbar */
.favorites-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:0 0 22px; padding:10px 14px 14px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.favorites-toolbar .toolbar-group { display:flex; flex-wrap:wrap; gap:10px; flex:1; }
.fav-input, .fav-select { padding:10px 12px; border:1px solid #cbd5e1; border-radius:8px; font-size:.85rem; background:#f8fafc; min-width:160px; font-family:inherit; }
.fav-input:focus, .fav-select:focus { outline:2px solid #2563eb; outline-offset:2px; background:#fff; }
.fav-clear { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:10px 14px; font-size:.7rem; font-weight:600; letter-spacing:.5px; border-radius:8px; cursor:pointer; text-transform:uppercase; }
.fav-clear:hover { background:#fee2e2; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

.favorites-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; margin:8px 0 30px; }

.favorite-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.3s, transform 0.3s;
	box-shadow: 0 4px 16px rgba(0,0,0,0.10);
	cursor: pointer;
	position: relative;
	border: 1px solid #e9ecef;
}

.favorite-card.removing { opacity:.4; filter:grayscale(.6); pointer-events:none; }

.favorite-card:hover { transform:translateY(-6px); box-shadow:0 12px 26px -6px rgba(0,0,0,0.15); border-color:#007bff33; }
.favorite-card.selected { outline:3px solid #2563eb; }

/* Reuse .favorite-icon style from listing (scoped adjustments if needed) */
.favorite-icon.is-removing { animation:favRemove .45s ease both; }
@keyframes favRemove { 0% { transform:scale(1); opacity:1; } 50% { transform:scale(.8); opacity:.5; } 100% { transform:scale(.4); opacity:0; } }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.favorite-badge { position:absolute; bottom:12px; right:12px; background:linear-gradient(135deg,#0ea5e9,#2563eb); color:#fff; padding:6px 14px; border-radius:20px; font-size:.7rem; font-weight:700; z-index:2; letter-spacing:.5px; box-shadow:0 2px 6px rgba(0,0,0,.18); }

.favorite-images { width:100%; height:200px; overflow:hidden; position:relative; background:#e2e8f0; }
.favorite-images .image-count { position:absolute; top:12px; left:58px; background:rgba(0,0,0,.55); color:#fff; font-size:.65rem; padding:4px 9px 4px 8px; border-radius:18px; letter-spacing:.5px; font-weight:600; backdrop-filter:blur(3px); z-index:3; }
.fav-hover-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05)); color:#fff; display:flex; align-items:flex-end; justify-content:flex-start; padding:14px 16px; font-size:.75rem; font-weight:600; letter-spacing:.5px; opacity:0; transform:translateY(10px); transition:.35s opacity,.35s transform; text-transform:uppercase; }
.favorite-card:hover .fav-hover-overlay { opacity:1; transform:translateY(0); }

.favorite-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
	border-bottom: 1px solid #e9ecef;
}

.favorite-card:hover .favorite-image {
	transform: scale(1.07);
}

.favorite-price { position:absolute; bottom:12px; left:12px; background:rgba(17,24,39,.75); color:#fff; padding:6px 14px; border-radius:8px; font-weight:600; font-size:1rem; letter-spacing:.5px; backdrop-filter:blur(4px); }

.favorite-details { padding:18px 18px 16px; display:flex; flex-direction:column; gap:4px; }

.favorite-details h3 {
	font-size: 1.35rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: #007bff;
	letter-spacing: 0.5px;
}

.favorite-location { color:#475569; margin:0 0 4px; font-size:.85rem; font-weight:500; letter-spacing:.2px; }
.favorite-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; font-size:.62rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#334155; }
.favorite-meta span { display:inline-flex; align-items:center; gap:4px; background:#e2e8f0; padding:6px 10px; border-radius:30px; line-height:1; }
.favorite-meta span svg { font-size:.7rem; }
.favorite-meta span.pet-ok { background:#d1fae5; color:#047857; }

/* Selection checkbox */
.fav-check { position:absolute; top:12px; right:14px; z-index:4; display:flex; align-items:center; justify-content:center; }
.fav-check input { position:absolute; opacity:0; width:0; height:0; }
.fav-check span { width:20px; height:20px; border:2px solid #2563eb; border-radius:6px; background:#fff; display:inline-block; position:relative; transition:.2s background; }
.fav-check input:checked + span { background:#2563eb; }
.fav-check input:checked + span:after { content:""; position:absolute; width:6px; height:12px; border:2px solid #fff; border-top:none; border-left:none; top:1px; left:6px; transform:rotate(45deg); }

/* Toolbar actions */
.toolbar-actions { display:flex; gap:10px; align-items:center; }
.fav-select-toggle, .fav-batch-remove, .fav-browse { background:#2563eb; color:#fff; border:none; padding:10px 16px; font-size:.7rem; letter-spacing:.5px; font-weight:600; border-radius:8px; cursor:pointer; text-transform:uppercase; box-shadow:0 2px 8px rgba(37,99,235,.35); transition:.25s background,.25s transform; }
.fav-select-toggle:hover, .fav-batch-remove:hover, .fav-browse:hover { background:#1d4ed8; }
.fav-select-toggle.active { background:#0d9488; }
.fav-select-toggle.active:hover { background:#0f766e; }
.fav-batch-remove:disabled { opacity:.5; cursor:not-allowed; }

/* Pagination */
.favorites-pagination { display:flex; gap:14px; align-items:center; justify-content:flex-end; font-size:.75rem; font-weight:600; letter-spacing:.5px; }
.favorites-pagination button { background:#fff; border:1px solid #cbd5e1; padding:8px 14px; border-radius:8px; font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; cursor:pointer; transition:.25s background,.25s border-color; }
.favorites-pagination button:hover:not(:disabled) { background:#f1f5f9; }
.favorites-pagination button:disabled { opacity:.5; cursor:not-allowed; }
.favorites-pagination .page-status { background:#f1f5f9; padding:6px 12px; border-radius:8px; }
/* Button and Empty State Enhancements */
.favorites-container button {
	background: #007bff;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 22px;
	font-size: 1rem;
	font-weight: 600;
	margin: 18px auto 0 auto;
	display: block;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,123,255,0.08);
	transition: background 0.2s, transform 0.2s;
}
.favorites-container button:hover {
	background: #0056b3;
	transform: translateY(-2px) scale(1.03);
}

.favorites-container .empty-state {
	text-align: center;
	color: #111;
	margin-top: 40px;
	font-size: 1.1rem;
}

@media (max-width:1100px){ .favorites-main { padding:1.4rem 1.2rem 2.4rem; } }
@media (max-width: 900px) { .favorites-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; } }

@media (max-width: 620px){
	.favorites-main { padding:1rem 1rem 2.6rem; }
	.favorites-container { padding:1.4rem 1.2rem 1.6rem; }
	.favorites-title { font-size:1.4rem; }
	.favorites-grid { grid-template-columns:1fr; gap:18px; }
	.favorite-images { height:160px; }
	.toolbar-actions { width:100%; justify-content:flex-start; }
	.favorites-toolbar { padding:12px 12px 14px; }
}

/* Skeleton Loading */
.skeleton { position:relative; animation:fadeIn .3s ease; }
.skeleton .favorite-details { display:flex; flex-direction:column; gap:10px; }
.skeleton .line { height:14px; background:linear-gradient(90deg,#e2e8f0,#f1f5f9,#e2e8f0); border-radius:6px; }
.skeleton .line.w80 { width:80%; }
.skeleton .line.w40 { width:40%; }
.shimmer { position:relative; overflow:hidden; }
.shimmer:before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.65) 45%,rgba(255,255,255,0) 90%); transform:translateX(-100%); animation:shimmer 1.8s infinite; }
@keyframes shimmer { 100% { transform:translateX(100%); } }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
/* Brand block for logo and tagline */
.navbar-brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  margin-left: 0;
}

.navbar-brand-image {
  height: 38px;
  width: auto;
  display: block;
  margin: 0;
  object-fit: contain;
  align-self: flex-start;
}

.navbar-tagline {
  margin-top: 0.1rem;
  font-size: 0.85rem;
  color: #e0e7ef;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
  width: 100%;
}

/* Navbar Container */
.navbar {
  width: 100%;
  position: relative;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px clamp(1rem, 2vw, 2.25rem);
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  flex-wrap: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Logo Styling */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease-out;
  flex-shrink: 0;
}

.navbar-logo:hover {
  transform: scale(1.05);
}

.navbar-brand-image {
  height: 38px;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Centered Navbar Links */
.navbar-links {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0 auto;
  padding: 0;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.navbar-links li {
  display: flex;
  align-items: center;
}

.navbar-links li a {
  color: #e2e8f0; 
  text-decoration: none; 
  font-size: .9rem; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-weight: 500; 
  letter-spacing: .4px; 
  padding: 8px 14px; 
  border-radius: 10px; 
  position: relative; 
  transition: all 0.2s ease-out;
}

.navbar-links li a:hover {
  color: #ffffff; 
  background: rgba(255, 255, 255, 0.08); 
  transform: translateY(-2px);
}

.navbar-links li a.active { 
  color: #fff; 
  background: linear-gradient(90deg, #38bdf8, #6366f1); 
  box-shadow: 0 4px 14px -2px rgba(56, 189, 248, 0.45); 
}

/* Navbar Login/Register & Dashboard Button */
.navbar-login {
  display: flex;
  align-items: center;
  margin-left: 12px;
  flex-shrink: 0;
}

/* Common styles for both Login/Register & Dashboard buttons */
.navbar-login .login-register,
.navbar-login .dashboard-link {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  font-size: .8rem; 
  font-weight: 600; 
  letter-spacing: .05em; 
  text-decoration: none; 
  color: #fff; 
  padding: 10px 18px; 
  border-radius: 12px; 
  position: relative; 
  background: linear-gradient(135deg, #6366f1, #3b82f6); 
  box-shadow: 0 4px 18px -2px rgba(99, 102, 241, 0.5); 
  overflow: hidden; 
  transition: all 0.2s ease-out;
}

.navbar-login .login-register:hover,
.navbar-login .dashboard-link:hover {
  filter: brightness(1.1); 
  transform: translateY(-2px);
}

/* Ensures icon in Login/Register & Dashboard aligns correctly */
.navbar-login .navbar-icon {
  font-size: 20px;
  transition: transform 0.2s ease-out;
}

/* Icon Hover Effect */
.navbar-login .login-register:hover .navbar-icon,
.navbar-login .dashboard-link:hover .navbar-icon {
  transform: scale(1.15);
}

/* Logo Image */
.navbar-logo-image { 
  width: 46px; 
  height: 46px; 
  border-radius: 14px; 
  object-fit: cover; 
  position: relative; 
  z-index: 2; 
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4); 
  outline: 2px solid rgba(255, 255, 255, 0.15); 
  transition: all 0.3s ease-out;
}

.navbar-logo-image:hover { 
  transform: rotate(12deg) scale(1.05); 
  filter: brightness(1.15); 
}

/* Navbar Links Hover Effect */
.navbar-links li a:hover .navbar-icon {
  transform: scale(1.15);
}

/* ========== MOBILE RESPONSIVE STYLES ========== */

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
}

.menu-toggle-btn {
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.15s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.menu-toggle-btn:hover,
.menu-toggle-btn:active {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.1);
}

.menu-toggle-btn.active {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

/* Mobile Menu Overlay - SIMPLIFIED */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  animation: overlayFadeIn 0.2s ease-out;
}

.mobile-menu-overlay.active {
  display: flex;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mobile-menu {
  width: 85%;
  max-width: 320px;
  height: 100%;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.25s ease-out;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.mobile-menu.active {
  animation: slideInRight 0.25s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Mobile Menu Header */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.95);
}

.mobile-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s ease-out;
}

.mobile-logo:active {
  transform: scale(0.98);
}

.mobile-logo-image {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  outline: 2px solid rgba(255, 255, 255, 0.15);
}

.mobile-brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.mobile-brand-image {
  height: 26px;
  width: auto;
  object-fit: contain;
}

.mobile-tagline {
  font-size: 0.78rem;
  color: #e0e7ef;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.menu-close-btn {
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.15s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.menu-close-btn:hover,
.menu-close-btn:active {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.1);
}

/* Mobile Navigation Links */
.mobile-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  transition: all 0.15s ease-out;
  border-left: 4px solid transparent;
  min-height: 60px;
  cursor: pointer;
}

.mobile-nav-link:hover,
.mobile-nav-link:active,
.mobile-nav-link.active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-left-color: #3b82f6;
  transform: translateX(4px);
}

.mobile-nav-icon {
  font-size: 1.3rem;
  width: 24px;
  text-align: center;
  transition: transform 0.15s ease-out;
}

.mobile-nav-link:active .mobile-nav-icon {
  transform: scale(1.1);
}

/* Mobile Login Section */
.mobile-login-section {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.8);
}

.mobile-dashboard-link,
.mobile-login-register {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  transition: all 0.15s ease-out;
  text-align: center;
  min-height: 56px;
  cursor: pointer;
}

.mobile-dashboard-link {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.mobile-login-register {
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.mobile-dashboard-link:active,
.mobile-login-register:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  .navbar {
    padding: 10px 16px;
    flex-wrap: nowrap;
  }

  .navbar-logo {
    margin: 0;
  }

  /* Hide desktop elements on mobile */
  .navbar-links,
  .navbar-login {
    display: none;
  }

  .navbar-brand-block {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .navbar {
    padding: 8px 12px;
  }

  .mobile-menu {
    width: 90%;
    max-width: 280px;
  }

  .mobile-menu-header {
    padding: 16px 18px;
  }

  .mobile-nav-link {
    padding: 16px 20px;
    font-size: 1rem;
    min-height: 56px;
  }

  .mobile-login-section {
    padding: 18px;
  }

  .mobile-dashboard-link,
  .mobile-login-register {
    padding: 15px 18px;
    font-size: 1rem;
    min-height: 52px;
  }
}

/* Small screen adjustments */
@media screen and (max-width: 360px) {
  .navbar {
    padding: 6px 10px;
  }

  .navbar-logo-image {
    width: 40px;
    height: 40px;
  }

  .mobile-menu {
    width: 95%;
  }

  .mobile-nav-link {
    padding: 14px 16px;
    min-height: 52px;
  }

  .menu-toggle-btn,
  .menu-close-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
}.footer { width:100%; background:rgba(15,23,42,0.9); position:relative; color:#e2e8f0; text-align:center; padding:38px 20px 26px; margin-top:60px; border-top:1px solid rgba(255,255,255,0.08); box-shadow:0 -2px 10px -2px rgba(0,0,0,0.4); overflow:hidden; }
.footer::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%,rgba(56,189,248,.23),transparent 65%), radial-gradient(circle at 75% 70%,rgba(99,102,241,.28),transparent 70%); opacity:.55; pointer-events:none; mix-blend-mode:overlay; }

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-links {
    list-style: none;
    display: flex;
    gap: 15px;
    padding: 0;
    margin: 0;
}

.footer-links li {
    display: inline;
}

.footer-links a { color:#cbd5e1; text-decoration:none; font-size:.8rem; letter-spacing:.05em; padding:6px 10px; border-radius:8px; position:relative; transition:color .3s, background .35s; }
.footer-links a:hover { color:#fff; background:rgba(255,255,255,0.09); }

.footer small { display:block; margin-top:16px; font-size:.65rem; letter-spacing:.05em; color:#94a3b8; }