/* ============================================================
   VESTRA REALTY — Global Styles
   Reset, typography, base components, utility classes.
   Loaded on every page after vr_variables.css.
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip; /* clip instead of hidden — prevents horizontal scroll without breaking position:sticky */
}

body {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  color: var(--vr-text-dark);
  background: var(--vr-surface-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* clip instead of hidden — hidden creates scroll container that breaks position:sticky */
  width: 100%;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--vr-green-500); text-decoration: none; }
a:hover { color: var(--vr-green-400); }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--vr-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--vr-text-dark);
}
h1 { font-size: var(--vr-text-5xl); }
h2 { font-size: var(--vr-text-4xl); }
h3 { font-size: var(--vr-text-2xl); }
h4 { font-size: var(--vr-text-xl); }

p { margin-bottom: var(--vr-space-4); }

/* ── Buttons ────────────────────────────────────────────── */
.vr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vr-space-2);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 28px;
  border-radius: var(--vr-radius-sm);
  border: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--vr-duration-fast) var(--vr-ease-smooth),
    transform var(--vr-duration-fast) var(--vr-ease-smooth),
    box-shadow var(--vr-duration-fast) var(--vr-ease-smooth);
}
.vr-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

.vr-btn--primary {
  background: var(--vr-green-500);
  color: #ffffff;
}
.vr-btn--secondary {
  background: transparent;
  color: var(--vr-green-500);
  border: 1.5px solid var(--vr-green-500);
}
.vr-btn--ghost {
  background: transparent;
  color: var(--vr-green-600);
  border: 1px solid rgba(28,107,63,0.18);
}
.vr-btn--danger {
  background: var(--vr-coral);
  color: #ffffff;
}
.vr-btn--small, .vr-btn--sm {
  padding: 8px 16px;
  font-size: var(--vr-text-xs);
  min-height: 36px;
}

.vr-btn--white {
  background: #ffffff;
  color: var(--vr-green-800);
}
.vr-btn--outline-white {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.25);
}

/* Hover — pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .vr-btn--primary:hover:not(:disabled) {
    background: var(--vr-green-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(45,179,106,0.35);
  }
  .vr-btn--secondary:hover:not(:disabled) {
    background: rgba(45,179,106,0.08);
  }
  .vr-btn--ghost:hover:not(:disabled) {
    background: rgba(28,107,63,0.06);
    border-color: rgba(28,107,63,0.3);
  }
  .vr-btn--white:hover:not(:disabled) {
    background: var(--vr-green-50);
    transform: translateY(-1px);
  }
  .vr-btn--outline-white:hover:not(:disabled) {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.40);
  }
}

/* Touch — active state */
.vr-btn:active:not(:disabled) { transform: scale(0.97); }

/* Loading state */
.vr-btn.is-loading { pointer-events: none; opacity: 0.75; }
.vr-btn.is-loading::after {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vrSpinner 0.7s linear infinite;
  margin-left: var(--vr-space-2);
}

/* ── Cards ──────────────────────────────────────────────── */
.vr-card {
  background: var(--vr-surface-card);
  border: 1px solid rgba(28, 107, 63, 0.10);
  border-radius: var(--vr-radius-xl);
  padding: var(--vr-space-6);
  box-shadow: var(--vr-shadow-sm);
  transition:
    box-shadow var(--vr-duration-base) var(--vr-ease-smooth),
    transform var(--vr-duration-base) var(--vr-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .vr-card--hoverable:hover {
    box-shadow: var(--vr-shadow-lg);
    transform: translateY(-3px);
  }
}
.vr-card--hoverable:active { transform: scale(0.98); }

/* ── Form Inputs ────────────────────────────────────────── */
.vr-input,
.vr-select,
.vr-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(18, 77, 42, 0.20);
  border-radius: var(--vr-radius-md);
  font-family: var(--vr-font-body);
  font-size: 16px; /* 16px prevents iOS zoom */
  color: var(--vr-text-dark);
  background: #ffffff;
  min-height: 48px;
  outline: none;
  transition:
    border-color var(--vr-duration-fast) var(--vr-ease-smooth),
    box-shadow var(--vr-duration-fast) var(--vr-ease-smooth);
}
.vr-input:focus, .vr-select:focus, .vr-textarea:focus {
  border-color: var(--vr-green-500);
  box-shadow: 0 0 0 3px rgba(45,179,106,0.15);
}
.vr-input.is-error {
  border-color: var(--vr-coral);
  box-shadow: 0 0 0 3px rgba(217,95,59,0.12);
}
.vr-input.is-success {
  border-color: var(--vr-green-500);
}

.vr-label {
  display: block;
  font-size: var(--vr-text-sm);
  font-weight: 500;
  color: var(--vr-text-dark);
  margin-bottom: var(--vr-space-1);
}
.vr-label .required { color: var(--vr-coral); }

.vr-field-error {
  font-size: var(--vr-text-xs);
  color: var(--vr-coral);
  margin-top: var(--vr-space-1);
}

/* ── Badges ─────────────────────────────────────────────── */
.vr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--vr-text-xs);
  font-weight: 600;
  font-family: var(--vr-font-body);
  padding: 4px 10px;
  border-radius: var(--vr-radius-full);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.vr-badge--active    { background: rgba(45,179,106,0.12);  color: #1a7a45; }
.vr-badge--pending   { background: rgba(232,160,32,0.12);  color: #a06e10; }
.vr-badge--reserved  { background: rgba(26,143,196,0.12);  color: #0f5a82; }
.vr-badge--rejected  { background: rgba(217,95,59,0.12);   color: #9c3520; }
.vr-badge--sold      { background: rgba(108,77,184,0.12);  color: #4a3290; }
.vr-badge--verified  { background: rgba(45,179,106,0.12);  color: #1a7a45; }

/* ── Grid Background (hero / marketing bands) ──────────── */
.vr-grid-bg {
  background-color: var(--vr-green-900);
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  position: relative;
}
.vr-grid-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(transparent, var(--vr-green-900));
  pointer-events: none;
}

/* ── Skeleton Loader ────────────────────────────────────── */
.vr-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: vrSkeleton 1.4s ease infinite;
  border-radius: var(--vr-radius-md);
}

/* ── Empty State ────────────────────────────────────────── */
.vr-empty-state {
  text-align: center;
  padding: var(--vr-space-16) var(--vr-space-6);
  color: var(--vr-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vr-space-3);
}
.vr-empty-state h3 {
  color: var(--vr-text-dark);
  font-family: var(--vr-font-heading);
  font-size: var(--vr-text-xl);
}

/* ── Toast Notifications ────────────────────────────────── */
.vr-toast {
  position: fixed;
  bottom: calc(var(--vr-bottom-nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--vr-green-800);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--vr-radius-lg);
  font-size: var(--vr-text-sm);
  font-weight: 500;
  box-shadow: var(--vr-shadow-lg);
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.vr-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.vr-toast--error   { background: var(--vr-coral); }
.vr-toast--info    { background: var(--vr-sky); }

@media (min-width: 1024px) {
  .vr-toast { bottom: 24px; }
}

/* ── Message Notification Popup ────────────────────────── */
.vr-msg-notification {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--vr-surface-card, #ffffff);
  border: 1px solid rgba(28,107,63,0.15);
  border-left: 4px solid var(--vr-green-500, #2db36a);
  border-radius: var(--vr-radius-lg);
  padding: 12px 16px;
  box-shadow: var(--vr-shadow-lg);
  z-index: 9500;
  cursor: pointer;
  max-width: calc(100vw - 24px);
  width: 340px;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.vr-msg-notification--visible {
  opacity: 1;
  transform: translateX(0);
}
.vr-msg-notification-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vr-green-500, #2db36a);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.vr-msg-notification-body {
  flex: 1;
  min-width: 0;
}
.vr-msg-notification-title {
  font-weight: 600;
  font-size: var(--vr-text-sm);
  color: var(--vr-text-dark, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vr-msg-notification-preview {
  font-size: var(--vr-text-xs);
  color: var(--vr-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.vr-msg-notification-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--vr-text-muted, #6b7280);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.vr-msg-notification-close:hover {
  color: var(--vr-text-dark, #1a1a1a);
}

@media (min-width: 1024px) {
  .vr-msg-notification { top: 20px; right: 20px; }
}

/* ── Layout Containers ──────────────────────────────────── */
.vr-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--vr-space-4);
}

@media (min-width: 768px) {
  .vr-container { padding: 0 var(--vr-space-6); }
}

/* ── Page Transitions ───────────────────────────────────── */
.vr-page--loaded  { animation: vrFadeIn 0.3s var(--vr-ease-enter); }
.vr-page--exiting { animation: vrFadeOut 0.25s var(--vr-ease-exit) forwards; }

/* ── Responsive Grids ───────────────────────────────────── */
.vr-listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vr-space-4);
}

@media (min-width: 640px) {
  .vr-listings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .vr-listings-grid { grid-template-columns: repeat(3, 1fr); gap: var(--vr-space-6); }
}
@media (min-width: 1280px) {
  .vr-listings-grid { grid-template-columns: repeat(4, 1fr); }
}

.vr-grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vr-space-5);
}
@media (min-width: 640px) {
  .vr-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .vr-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.vr-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vr-space-3);
}
@media (min-width: 1024px) {
  .vr-stat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--vr-space-5); }
}

.vr-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vr-space-4);
}
@media (min-width: 768px) {
  .vr-form-grid--2col { grid-template-columns: repeat(2, 1fr); }
}

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes vrSpinner   { to { transform: rotate(360deg); } }
@keyframes vrSkeleton  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes vrFadeIn    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vrFadeOut   { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes vrModalIn   { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes vrBackdropIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Version "What's New" Modal ─────────────────────────── */
.vr-version-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6,38,22,0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s var(--vr-ease-enter);
}
.vr-version-modal-backdrop.vr-version-modal--visible { opacity: 1; }

.vr-version-modal {
  background: var(--vr-surface-card);
  border-radius: var(--vr-radius-2xl);
  padding: var(--vr-space-10) var(--vr-space-8);
  max-width: 440px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: var(--vr-shadow-xl);
  animation: vrModalIn 0.4s var(--vr-ease-spring) forwards;
}
.vr-version-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(45,179,106,0.10);
  color: var(--vr-green-600);
  font-size: var(--vr-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: var(--vr-radius-full);
  margin-bottom: var(--vr-space-4);
}
.vr-version-modal__title {
  font-family: var(--vr-font-heading);
  font-size: var(--vr-text-2xl);
  color: var(--vr-text-dark);
  margin-bottom: var(--vr-space-2);
}
.vr-version-modal__version {
  font-size: var(--vr-text-sm);
  color: var(--vr-text-muted);
  margin-bottom: var(--vr-space-4);
}
.vr-version-modal__summary {
  font-size: var(--vr-text-base);
  color: var(--vr-text-dark);
  margin-bottom: var(--vr-space-5);
  line-height: 1.6;
}
.vr-version-modal__bullets {
  list-style: none;
  text-align: left;
  margin-bottom: var(--vr-space-6);
}
.vr-version-modal__bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--vr-space-2);
  font-size: var(--vr-text-sm);
  color: var(--vr-text-dark);
  padding: var(--vr-space-2) 0;
}
.vr-version-modal__bullets li i { color: var(--vr-green-500); margin-top: 2px; }
.vr-version-modal__actions {
  display: flex;
  gap: var(--vr-space-3);
  margin-top: var(--vr-space-2);
}
.vr-version-modal__thanks { flex: 1; }
.vr-version-modal__reload { flex: 2; }

/* ── What's New — compiled multi-version view ─────────── */
.vr-version-modal--multi {
  max-height: 85vh;
  overflow-y: auto;
  text-align: left;
}
.vr-version-modal--multi .vr-version-modal__badge { display: inline-flex; }
.vr-version-modal--multi .vr-version-modal__title { font-size: var(--vr-text-xl); }
.vr-version-modal--multi .vr-version-modal__summary { margin-bottom: var(--vr-space-4); }
.vr-version-modal__entries {
  display: flex;
  flex-direction: column;
  gap: var(--vr-space-3);
  margin-bottom: var(--vr-space-5);
}
.vr-version-modal__entry {
  background: rgba(28,107,63,0.04);
  border: 1px solid rgba(28,107,63,0.1);
  border-radius: var(--vr-radius-lg);
  padding: var(--vr-space-4);
}
.vr-version-modal__entry-header {
  display: flex;
  align-items: center;
  gap: var(--vr-space-2);
  margin-bottom: var(--vr-space-2);
}
.vr-version-modal__entry-vtag {
  font-size: 10px;
  font-weight: 700;
  background: rgba(45,179,106,0.12);
  color: var(--vr-green-600);
  padding: 2px 8px;
  border-radius: var(--vr-radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.vr-version-modal__entry-title {
  font-size: var(--vr-text-sm);
  font-weight: 600;
  color: var(--vr-text-dark);
}
.vr-version-modal--multi .vr-version-modal__bullets { margin-bottom: 0; }
.vr-version-modal--multi .vr-version-modal__bullets li { font-size: var(--vr-text-xs); padding: 3px 0; }

/* ── OTP Digit Inputs ──────────────────────────────────── */
.vr-otp-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  font-family: var(--vr-font-body);
  color: var(--vr-text-dark);
  border: 1.5px solid rgba(28,107,63,0.2);
  border-radius: var(--vr-radius-md);
  background: #fff;
  outline: none;
  transition:
    border-color var(--vr-duration-fast) var(--vr-ease-smooth),
    box-shadow var(--vr-duration-fast) var(--vr-ease-smooth);
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
.vr-otp-digit:focus {
  border-color: var(--vr-green-500);
  box-shadow: 0 0 0 3px rgba(45,179,106,0.15);
}
.vr-otp-digit.is-error {
  border-color: var(--vr-coral);
  box-shadow: 0 0 0 3px rgba(217,95,59,0.12);
}
.vr-otp-digit::-webkit-inner-spin-button,
.vr-otp-digit::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Scrollbar (webkit) ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(45,179,106,0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(45,179,106,0.5); }

/* ── Welcome Banner (portal dashboard home panels) ──────────── */
.vr-welcome-banner {
  background: linear-gradient(135deg, #062616 0%, #0d2e18 55%, #0b3b1c 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--vr-radius-xl);
  padding: var(--vr-space-6) var(--vr-space-7);
  margin-bottom: var(--vr-space-6);
  display: flex;
  align-items: center;
  gap: var(--vr-space-6);
  position: relative;
  overflow: hidden;
}
.vr-welcome-banner::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(45,179,106,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.vr-welcome-banner-logo {
  width: 80px;
  flex-shrink: 0;
  opacity: 0.95;
}
.vr-welcome-banner-body {
  flex: 1;
  min-width: 0;
}
.vr-welcome-banner-greeting {
  font-family: var(--vr-font-heading);
  font-size: var(--vr-text-2xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--vr-space-1);
}
.vr-welcome-banner-greeting em {
  font-style: normal;
  color: #fff;
}
.vr-welcome-banner-msg {
  font-size: var(--vr-text-sm);
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--vr-space-4);
}
.vr-welcome-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-space-2);
}
.vr-welcome-banner-actions .vr-btn {
  font-size: var(--vr-text-xs);
}
.vr-welcome-banner-actions .vr-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.vr-welcome-banner-actions .vr-btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
@media (min-width: 1024px) {
  .vr-welcome-banner {
    padding: var(--vr-space-10) var(--vr-space-12);
    gap: var(--vr-space-8);
  }
  .vr-welcome-banner-logo {
    width: 100px;
  }
  .vr-welcome-banner-greeting {
    font-size: var(--vr-text-3xl);
    margin-bottom: var(--vr-space-2);
  }
  .vr-welcome-banner-msg {
    font-size: var(--vr-text-base);
    margin-bottom: var(--vr-space-5);
  }
  .vr-welcome-banner-actions {
    gap: var(--vr-space-3);
  }
  .vr-welcome-banner-actions .vr-btn {
    font-size: var(--vr-text-sm);
  }
}
@media (max-width: 640px) {
  .vr-welcome-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vr-space-4);
    padding: var(--vr-space-5);
  }
  .vr-welcome-banner-logo {
    width: 60px;
  }
  .vr-welcome-banner-greeting {
    font-size: var(--vr-text-xl);
  }
}

/* ── Multi-role dashboard switcher ─────────────────────────── */
.vr-role-switcher {
  border-top: 1px solid var(--vr-border, rgba(0,0,0,0.08));
  margin-top: 4px;
  padding-top: 6px;
}
.vr-switch-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vr-text-muted, #888);
  padding: 4px 12px 2px;
}
.vr-switch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vr-text, #1a1a1a);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.vr-switch-item:hover { background: var(--vr-green-50, rgba(45,179,106,0.08)); }
.vr-switch-item.is-active {
  color: var(--vr-green-600, #1c6b3f);
  font-weight: 700;
  cursor: default;
}
.vr-switch-item.is-active:hover { background: transparent; }
.vr-switch-now { font-size: 11px; font-weight: 500; color: var(--vr-text-muted, #888); }