/* ============================================================
   StayVerse - Vacation Rental Platform
   Main Stylesheet
   Bootstrap 5 Override Theme + Custom Components
   ============================================================ */

/* CDN LINKS
   Bootstrap 5: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
   Font Awesome 6: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css
   Google Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap
*/

/* ============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {
  --primary: #FF385C;
  --primary-dark: #E31C5F;
  --primary-light: #FF6B7A;
  --primary-rgb: 255, 56, 92;
  --secondary: #222222;
  --secondary-light: #484848;
  --secondary-lighter: #717171;
  --success: #008A05;
  --success-light: #E8F5E9;
  --success-rgb: 0, 138, 5;
  --warning: #FFB800;
  --warning-light: #FFF8E1;
  --warning-rgb: 255, 184, 0;
  --danger: #FF385C;
  --danger-light: #FFEBEE;
  --danger-rgb: 255, 56, 92;
  --info: #428BFF;
  --info-light: #E3F2FD;
  --info-rgb: 66, 139, 255;
  --white: #FFFFFF;
  --gray-50: #F7F7F7;
  --gray-100: #F0F0F0;
  --gray-200: #DDDDDD;
  --gray-300: #C0C0C0;
  --gray-400: #A0A0A0;
  --gray-500: #808080;
  --gray-600: #606060;
  --gray-700: #484848;
  --gray-800: #303030;
  --gray-900: #222222;
  --black: #000000;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 1.5rem;
  --border-radius-full: 9999px;
  --border-width: 1px;
  --border-color: var(--gray-200);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 14px rgba(var(--primary-rgb), 0.35);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  --container-max: 1280px;
  --container-narrow: 800px;
  --container-wide: 1440px;
  --header-height: 80px;
  --header-height-mobile: 64px;
  --body-bg: var(--white);
  --body-color: var(--secondary);
  --link-color: var(--primary);
  --link-hover-color: var(--primary-dark);
  --star-color: #FFB800;
  --rating-color: #222222;
  --divider-color: var(--gray-200);
  --skeleton-bg: var(--gray-100);
  --skeleton-shine: var(--gray-200);
}
/* ============================================================
   2. RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--body-color);
  background-color: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--secondary);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }
p { margin: 0 0 1rem; color: var(--gray-700); }
a { color: var(--link-color); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--link-hover-color); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; margin: 0 0 1rem; }
label { display: inline-block; margin-bottom: 0.375rem; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--gray-700); }
hr { margin: var(--spacing-6) 0; border: 0; border-top: var(--border-width) solid var(--divider-color); opacity: 1; }
::selection { background-color: var(--primary); color: var(--white); }

/* ============================================================
   3. BOOTSTRAP OVERRIDES
   ============================================================ */

.container { max-width: var(--container-max); }
.container-narrow { max-width: var(--container-narrow); margin-left: auto; margin-right: auto; padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.container-wide { max-width: var(--container-wide); }

.navbar { padding-top: 0; padding-bottom: 0; min-height: var(--header-height); }
.navbar-brand { font-weight: var(--font-weight-bold); font-size: var(--font-size-2xl); color: var(--primary) !important; letter-spacing: -0.5px; }
.navbar-brand i { margin-right: var(--spacing-2); }
.navbar-nav .nav-link { padding: var(--spacing-3) var(--spacing-4); font-weight: var(--font-weight-medium); color: var(--secondary); border-radius: var(--border-radius-full); transition: all var(--transition-fast); }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { background-color: var(--gray-50); color: var(--secondary); }
.navbar-nav .nav-link.active { color: var(--primary); }
.navbar-light .navbar-toggler { border: none; padding: var(--spacing-2); }
.navbar-light .navbar-toggler:focus { box-shadow: none; }

.card { border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-card); transition: all var(--transition-base); overflow: hidden; }
.card:hover { box-shadow: var(--shadow-card-hover); }
.card-header { background-color: var(--white); border-bottom: var(--border-width) solid var(--border-color); padding: var(--spacing-4) var(--spacing-5); font-weight: var(--font-weight-semibold); }
.card-body { padding: var(--spacing-5); }
.card-footer { background-color: var(--white); border-top: var(--border-width) solid var(--border-color); padding: var(--spacing-4) var(--spacing-5); }
.card-img-top { border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0; }

.btn { font-family: var(--font-family); font-weight: var(--font-weight-semibold); padding: 0.625rem 1.25rem; border-radius: var(--border-radius-md); transition: all var(--transition-base); border-width: 2px; position: relative; overflow: hidden; }
.btn:focus { box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--white); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; color: var(--white) !important; box-shadow: var(--shadow-primary) !important; }
.btn-primary:active { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.btn-primary:disabled { background-color: var(--gray-300); border-color: var(--gray-300); cursor: not-allowed; }
.btn-secondary { background-color: var(--secondary); border-color: var(--secondary); color: var(--white); }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--gray-800) !important; border-color: var(--gray-800) !important; color: var(--white) !important; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); background-color: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; }
.btn-outline-secondary { color: var(--secondary); border-color: var(--gray-300); background-color: transparent; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--gray-50) !important; border-color: var(--secondary) !important; color: var(--secondary) !important; }
.btn-light { background-color: var(--white); border-color: var(--gray-200); color: var(--secondary); box-shadow: var(--shadow-sm); }
.btn-light:hover, .btn-light:focus { background-color: var(--gray-50) !important; border-color: var(--gray-300) !important; color: var(--secondary) !important; box-shadow: var(--shadow-md) !important; }
.btn-link { color: var(--primary); text-decoration: none; padding: 0; border: 0; }
.btn-link:hover { color: var(--primary-dark); text-decoration: underline; }
.btn-lg { padding: 0.875rem 2rem; font-size: var(--font-size-lg); border-radius: var(--border-radius-lg); }
.btn-sm { padding: 0.375rem 0.75rem; font-size: var(--font-size-sm); border-radius: var(--border-radius-sm); }
.btn-block { display: block; width: 100%; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); }
.btn-icon-only { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--border-radius-full); }
.btn-social { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-3); padding: 0.75rem 1.5rem; border-radius: var(--border-radius-md); font-weight: var(--font-weight-medium); }
.btn-ghost { background: transparent; border: none; color: var(--secondary); padding: var(--spacing-2) var(--spacing-3); }
.btn-ghost:hover { background-color: var(--gray-50); color: var(--secondary); }

.form-control, .form-select { font-family: var(--font-family); font-size: var(--font-size-base); padding: 0.75rem 1rem; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); color: var(--secondary); background-color: var(--white); transition: all var(--transition-fast); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); color: var(--secondary); }
.form-control::placeholder { color: var(--gray-400); }
.form-control-lg { padding: 1rem 1.25rem; font-size: var(--font-size-lg); border-radius: var(--border-radius-lg); }
.form-floating > .form-control { padding-top: 1.625rem; padding-bottom: 0.625rem; }
.form-floating > label { padding: 1rem 1rem; color: var(--gray-500); }
.form-text { font-size: var(--font-size-xs); color: var(--gray-500); margin-top: 0.25rem; }
.form-check { min-height: 1.5rem; padding-left: 1.75em; margin-bottom: 0.25rem; }
.form-check-input { width: 1.2em; height: 1.2em; margin-top: 0.15em; margin-left: -1.75em; border: 2px solid var(--gray-300); transition: all var(--transition-fast); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); }
.form-switch { padding-left: 2.75em; }
.form-switch .form-check-input { width: 2.25em; margin-left: -2.75em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-position: left center; border-radius: 2em; transition: background-position var(--transition-fast); }
.form-switch .form-check-input:checked { background-position: right center; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.5rem; }
textarea.form-control { min-height: 100px; resize: vertical; }
.form-control.is-valid, .was-validated .form-control:valid { border-color: var(--success); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23008A05' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: calc(1.5em + 0.75rem); }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23FF385C' d='M6 0a6 6 0 100 12A6 6 0 006 0zM5.25 2.5h1.5v5h-1.5v-5zm0 6.5h1.5v1.5h-1.5V9z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: calc(1.5em + 0.75rem); }
.valid-feedback { font-size: var(--font-size-sm); margin-top: 0.25rem; color: var(--success); }
.invalid-feedback { font-size: var(--font-size-sm); margin-top: 0.25rem; color: var(--danger); }

.alert { border: none; border-radius: var(--border-radius-lg); padding: var(--spacing-4) var(--spacing-5); font-size: var(--font-size-sm); }
.alert-primary { background-color: rgba(var(--primary-rgb), 0.1); color: var(--primary-dark); }
.alert-success { background-color: var(--success-light); color: var(--success); }
.alert-warning { background-color: var(--warning-light); color: #B38600; }
.alert-danger { background-color: var(--danger-light); color: var(--danger); }
.alert-info { background-color: var(--info-light); color: var(--info); }

.badge { font-weight: var(--font-weight-medium); padding: 0.25em 0.75em; border-radius: var(--border-radius-full); font-size: var(--font-size-xs); }
.badge-primary { background-color: var(--primary); color: var(--white); }
.badge-success { background-color: var(--success); color: var(--white); }
.badge-warning { background-color: var(--warning); color: var(--secondary); }
.badge-danger { background-color: var(--danger); color: var(--white); }
.badge-info { background-color: var(--info); color: var(--white); }
.badge-secondary { background-color: var(--gray-200); color: var(--secondary); }
.badge-soft-primary { background-color: rgba(var(--primary-rgb), 0.1); color: var(--primary-dark); }
.badge-soft-success { background-color: var(--success-light); color: var(--success); }
.badge-soft-warning { background-color: var(--warning-light); color: #B38600; }
.badge-soft-danger { background-color: var(--danger-light); color: var(--danger); }

.modal-content { border: none; border-radius: var(--border-radius-xl); box-shadow: var(--shadow-xl); }
.modal-header { border-bottom: var(--border-width) solid var(--border-color); padding: var(--spacing-5) var(--spacing-6); }
.modal-body { padding: var(--spacing-6); }
.modal-footer { border-top: var(--border-width) solid var(--border-color); padding: var(--spacing-4) var(--spacing-6); }
.modal-backdrop { background-color: rgba(0, 0, 0, 0.5); }

.dropdown-menu { border: none; border-radius: var(--border-radius-xl); box-shadow: var(--shadow-lg); padding: var(--spacing-2) 0; min-width: 220px; }
.dropdown-item { padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--secondary); transition: all var(--transition-fast); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--gray-50); color: var(--secondary); }
.dropdown-divider { border-top: var(--border-width) solid var(--border-color); margin: var(--spacing-2) 0; }

.page-link { color: var(--secondary); border: var(--border-width) solid var(--border-color); padding: var(--spacing-2) var(--spacing-3); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); }
.page-link:hover { color: var(--primary); background-color: var(--gray-50); border-color: var(--border-color); }
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); color: var(--white); }

.progress { background-color: var(--gray-100); border-radius: var(--border-radius-full); height: 8px; }
.progress-bar { background-color: var(--primary); border-radius: var(--border-radius-full); }

.nav-tabs { border-bottom: 2px solid var(--gray-100); gap: var(--spacing-1); }
.nav-tabs .nav-link { border: none; color: var(--gray-500); font-weight: var(--font-weight-medium); padding: var(--spacing-3) var(--spacing-4); margin-bottom: -2px; border-bottom: 2px solid transparent; transition: all var(--transition-fast); }
.nav-tabs .nav-link:hover { color: var(--secondary); }
.nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }
.nav-pills .nav-link { border-radius: var(--border-radius-full); padding: var(--spacing-2) var(--spacing-4); font-weight: var(--font-weight-medium); color: var(--gray-600); }
.nav-pills .nav-link.active { background-color: var(--primary); color: var(--white); }

.table { color: var(--secondary); margin-bottom: 0; }
.table th { font-weight: var(--font-weight-semibold); border-bottom: 2px solid var(--border-color); padding: var(--spacing-3) var(--spacing-4); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-600); }
.table td { padding: var(--spacing-3) var(--spacing-4); border-bottom: var(--border-width) solid var(--border-color); vertical-align: middle; }

.accordion-item { border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg) !important; }
.accordion-button { padding: var(--spacing-4) var(--spacing-5); font-weight: var(--font-weight-semibold); color: var(--secondary); background-color: var(--white); box-shadow: none; }
.accordion-button:not(.collapsed) { color: var(--primary); background-color: rgba(var(--primary-rgb), 0.05); }
.accordion-body { padding: var(--spacing-5); }

.offcanvas { border: none; }
.offcanvas-header { padding: var(--spacing-5); border-bottom: var(--border-width) solid var(--border-color); }
.offcanvas-body { padding: var(--spacing-5); }
/* ============================================================
   4. LAYOUT
   ============================================================ */

.site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background-color: var(--white); border-bottom: var(--border-width) solid var(--border-color); z-index: var(--z-sticky); transition: all var(--transition-base); }
.site-header.scrolled { box-shadow: var(--shadow-md); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 var(--spacing-6); max-width: var(--container-max); margin: 0 auto; }
.site-logo { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--primary); text-decoration: none; }
.site-logo:hover { color: var(--primary-dark); }
.site-logo img { height: 38px; width: auto; }
.header-search { flex: 0 1 400px; display: flex; align-items: center; background: var(--white); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-full); padding: var(--spacing-2); box-shadow: var(--shadow-sm); transition: all var(--transition-fast); }
.header-search:focus-within { box-shadow: var(--shadow-md); border-color: var(--gray-400); }
.header-search input { flex: 1; border: none; outline: none; padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-sm); background: transparent; }
.header-search button { width: 32px; height: 32px; border-radius: var(--border-radius-full); background-color: var(--primary); color: var(--white); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: var(--spacing-2); }
.header-actions .btn-language { display: flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--border-radius-full); background: none; border: none; color: var(--secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.header-actions .btn-user { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--border-radius-full); border: var(--border-width) solid var(--border-color); background: var(--white); color: var(--secondary); transition: all var(--transition-fast); }
.header-actions .btn-user:hover { box-shadow: var(--shadow-md); }

.page-wrapper { padding-top: var(--header-height); min-height: 100vh; }
.page-section { padding: var(--spacing-16) 0; }
.page-section-sm { padding: var(--spacing-8) 0; }
.page-header { padding: var(--spacing-10) 0; background-color: var(--gray-50); border-bottom: var(--border-width) solid var(--border-color); }
.page-header h1 { margin-bottom: var(--spacing-2); }
.page-content { padding: var(--spacing-8) 0; }

.sidebar { position: sticky; top: calc(var(--header-height) + var(--spacing-6)); }
.sidebar-card { background: var(--white); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); padding: var(--spacing-5); box-shadow: var(--shadow-card); }
.sidebar-card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-3); border-bottom: var(--border-width) solid var(--border-color); }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li { margin-bottom: var(--spacing-1); }
.sidebar-menu a { display: block; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--gray-700); transition: all var(--transition-fast); }
.sidebar-menu a:hover { background-color: var(--gray-50); color: var(--secondary); }
.sidebar-menu a.active { background-color: rgba(var(--primary-rgb), 0.1); color: var(--primary); }

.site-footer { background-color: var(--gray-900); color: var(--gray-300); padding: var(--spacing-20) 0 0; margin-top: auto; }
.site-footer h5 { color: var(--white); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-4); text-transform: uppercase; letter-spacing: 0.05em; }
.site-footer a { color: var(--gray-400); font-size: var(--font-size-sm); display: block; padding: var(--spacing-1) 0; transition: color var(--transition-fast); }
.site-footer a:hover { color: var(--white); }
.footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-8); padding-bottom: var(--spacing-12); border-bottom: var(--border-width) solid var(--gray-700); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-6) 0; font-size: var(--font-size-sm); color: var(--gray-500); }
.footer-bottom-links { display: flex; align-items: center; gap: var(--spacing-4); }
.footer-bottom-links a { display: inline; padding: 0; font-size: var(--font-size-sm); }
.footer-social { display: flex; align-items: center; gap: var(--spacing-3); }
.footer-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-full); background-color: var(--gray-800); color: var(--gray-400); font-size: var(--font-size-base); padding: 0; }
.footer-social a:hover { background-color: var(--primary); color: var(--white); }
.footer-newsletter { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-4); }
.footer-newsletter input { flex: 1; padding: 0.625rem 1rem; border-radius: var(--border-radius-md); border: var(--border-width) solid var(--gray-700); background: var(--gray-800); color: var(--white); font-size: var(--font-size-sm); }
.footer-newsletter button { padding: 0.625rem 1.25rem; border-radius: var(--border-radius-md); background: var(--primary); color: var(--white); border: none; font-weight: var(--font-weight-semibold); white-space: nowrap; }

/* ============================================================
   5. HERO SECTION
   ============================================================ */

.hero-section { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.4) 100%); }
.hero-content { position: relative; z-index: 2; text-align: center; padding: var(--spacing-8); max-width: 800px; }
.hero-content h1 { font-size: var(--font-size-5xl); font-weight: var(--font-weight-extrabold); color: var(--white); margin-bottom: var(--spacing-4); text-shadow: 0 2px 4px rgba(0,0,0,0.3); line-height: 1.1; }
.hero-content p { font-size: var(--font-size-xl); color: rgba(255,255,255,0.9); margin-bottom: var(--spacing-8); text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.hero-search-box { background: var(--white); border-radius: var(--border-radius-2xl); padding: var(--spacing-4); box-shadow: var(--shadow-xl); max-width: 700px; margin: 0 auto; display: flex; align-items: center; gap: var(--spacing-2); }
.hero-search-box .search-input-group { flex: 1; display: flex; flex-direction: column; padding: var(--spacing-2) var(--spacing-4); border-radius: var(--border-radius-lg); transition: background var(--transition-fast); }
.hero-search-box .search-input-group:hover { background: var(--gray-50); }
.hero-search-box .search-input-group label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--secondary); margin-bottom: var(--spacing-1); }
.hero-search-box .search-input-group input { border: none; outline: none; font-size: var(--font-size-sm); background: transparent; padding: 0; }
.hero-search-box .search-divider { width: 1px; height: 40px; background: var(--border-color); flex-shrink: 0; }
.hero-search-box .btn-search { width: 48px; height: 48px; border-radius: var(--border-radius-full); background: var(--primary); color: var(--white); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition-base); }
.hero-search-box .btn-search:hover { background: var(--primary-dark); transform: scale(1.05); }
.hero-small { min-height: 50vh; }
.hero-small .hero-content h1 { font-size: var(--font-size-3xl); }

/* ============================================================
   6. PROPERTY CARDS
   ============================================================ */

.property-card { border: none; border-radius: var(--border-radius-xl); overflow: hidden; transition: all var(--transition-base); background: var(--white); cursor: pointer; }
.property-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.property-card-image { position: relative; width: 100%; padding-top: 66.67%; overflow: hidden; background: var(--gray-100); }
.property-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.property-card:hover .property-card-image img { transform: scale(1.05); }
.property-card-image-overlay { position: absolute; top: var(--spacing-3); left: var(--spacing-3); right: var(--spacing-3); display: flex; justify-content: space-between; align-items: flex-start; z-index: 1; }
.property-card-badge { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: 0.25rem 0.625rem; background: var(--white); border-radius: var(--border-radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--secondary); box-shadow: var(--shadow-sm); }
.property-card-wishlist { width: 32px; height: 32px; border-radius: var(--border-radius-full); background: rgba(255,255,255,0.8); border: none; display: flex; align-items: center; justify-content: center; color: var(--gray-600); cursor: pointer; transition: all var(--transition-fast); backdrop-filter: blur(4px); }
.property-card-wishlist:hover { background: var(--white); color: var(--primary); transform: scale(1.1); }
.property-card-wishlist.active { color: var(--primary); }
.property-card-body { padding: var(--spacing-4) 0; }
.property-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-1); }
.property-card-type { font-size: var(--font-size-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; font-weight: var(--font-weight-medium); }
.property-card-rating { display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--secondary); }
.property-card-rating i { color: var(--star-color); font-size: var(--font-size-xs); }
.property-card-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--secondary); margin-bottom: var(--spacing-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.property-card-details { font-size: var(--font-size-sm); color: var(--gray-500); margin-bottom: var(--spacing-2); display: flex; gap: var(--spacing-2); align-items: center; }
.property-card-details .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-400); }
.property-card-price { display: flex; align-items: baseline; gap: var(--spacing-1); margin-top: var(--spacing-1); }
.property-card-price .amount { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--secondary); }
.property-card-price .period { font-size: var(--font-size-sm); color: var(--gray-500); }
.property-card-price .original { font-size: var(--font-size-sm); color: var(--gray-400); text-decoration: line-through; }
.property-card-price .discount { font-size: var(--font-size-xs); color: var(--success); font-weight: var(--font-weight-semibold); }
.property-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-6); }
.property-list-view .property-card { display: flex; flex-direction: row; }
.property-list-view .property-card-image { width: 300px; min-width: 300px; padding-top: 0; height: 200px; }
.property-list-view .property-card-body { flex: 1; padding: var(--spacing-4) var(--spacing-5); }
.property-card-image-actions { position: absolute; bottom: var(--spacing-3); left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-2); opacity: 0; transition: opacity var(--transition-base); }
.property-card:hover .property-card-image-actions { opacity: 1; }
.property-card-image-actions button { width: 32px; height: 32px; border-radius: var(--border-radius-full); background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; color: var(--secondary); font-size: var(--font-size-xs); cursor: pointer; transition: all var(--transition-fast); }
.property-card-image-counter { position: absolute; bottom: var(--spacing-3); left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-1); }
.property-card-image-counter span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: all var(--transition-fast); }
.property-card-image-counter span.active { background: var(--white); width: 16px; border-radius: 3px; }
/* ============================================================
   7. SEARCH BAR & AUTOCOMPLETE
   ============================================================ */

.search-bar { position: relative; }
.search-bar .form-control { padding-left: 2.75rem; background-color: var(--gray-50); border-color: transparent; border-radius: var(--border-radius-full); }
.search-bar .form-control:focus { background-color: var(--white); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); }
.search-bar .search-icon { position: absolute; left: var(--spacing-4); top: 50%; transform: translateY(-50%); color: var(--gray-500); }
.search-bar .search-clear { position: absolute; right: var(--spacing-3); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--gray-300); border: none; color: var(--white); font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--transition-fast); }
.search-bar .search-clear.visible { opacity: 1; }
.autocomplete-container { position: relative; }
.autocomplete-dropdown { position: absolute; top: calc(100% + var(--spacing-1)); left: 0; right: 0; background: var(--white); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-lg); border: var(--border-width) solid var(--border-color); z-index: var(--z-dropdown); max-height: 320px; overflow-y: auto; display: none; }
.autocomplete-dropdown.show { display: block; }
.autocomplete-item { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); cursor: pointer; transition: background var(--transition-fast); }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--gray-50); }
.autocomplete-item-icon { width: 40px; height: 40px; border-radius: var(--border-radius-md); background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--gray-600); flex-shrink: 0; }
.autocomplete-item-text { flex: 1; }
.autocomplete-item-text .name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--secondary); }
.autocomplete-item-text .sub { font-size: var(--font-size-xs); color: var(--gray-500); }
.filter-tags { display: flex; gap: var(--spacing-2); flex-wrap: wrap; padding: var(--spacing-3) 0; }
.filter-tag { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: 0.375rem 0.875rem; background: var(--white); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-full); font-size: var(--font-size-sm); color: var(--secondary); cursor: pointer; transition: all var(--transition-fast); user-select: none; }
.filter-tag:hover { border-color: var(--secondary); }
.filter-tag.active { background: var(--secondary); border-color: var(--secondary); color: var(--white); }

/* ============================================================
   8. FILTER PANEL
   ============================================================ */

.filter-panel { background: var(--white); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); padding: var(--spacing-5); margin-bottom: var(--spacing-4); }
.filter-panel-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-4); display: flex; align-items: center; justify-content: space-between; }
.filter-panel-title .clear-btn { font-size: var(--font-size-sm); color: var(--primary); cursor: pointer; font-weight: var(--font-weight-medium); }
.filter-group { margin-bottom: var(--spacing-5); }
.filter-group-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--secondary); margin-bottom: var(--spacing-3); }
.filter-checkboxes { display: flex; flex-direction: column; gap: var(--spacing-2); }

.range-slider { position: relative; width: 100%; height: 6px; background: var(--gray-200); border-radius: 3px; }
.range-slider .range-track { position: absolute; height: 100%; background: var(--primary); border-radius: 3px; }
.range-slider input[type="range"] { position: absolute; width: 100%; height: 6px; background: none; pointer-events: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; top: 50%; transform: translateY(-50%); margin: 0; }
.range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--primary); box-shadow: var(--shadow-sm); cursor: pointer; pointer-events: all; transition: all var(--transition-fast); }
.range-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: var(--shadow-md); }
.range-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--primary); box-shadow: var(--shadow-sm); cursor: pointer; pointer-events: all; }

.category-filters { display: flex; gap: var(--spacing-4); padding: var(--spacing-4) 0; overflow-x: auto; scrollbar-width: none; }
.category-filters::-webkit-scrollbar { display: none; }
.category-filter-item { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); min-width: 80px; cursor: pointer; opacity: 0.6; transition: all var(--transition-fast); border: none; background: none; padding: 0; color: var(--secondary); }
.category-filter-item:hover { opacity: 0.9; }
.category-filter-item.active { opacity: 1; }
.category-filter-item.active .category-filter-icon { border-bottom: 2px solid var(--secondary); }
.category-filter-icon { font-size: var(--font-size-2xl); padding-bottom: var(--spacing-2); border-bottom: 2px solid transparent; transition: border-color var(--transition-fast); }
.category-filter-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; }
.sort-selector { display: flex; align-items: center; gap: var(--spacing-2); }
.sort-selector select { padding: 0.375rem 2rem 0.375rem 0.75rem; font-size: var(--font-size-sm); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); background: var(--white); color: var(--secondary); cursor: pointer; }

/* ============================================================
   9. BOOKING FORM
   ============================================================ */

.booking-form { background: var(--white); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); padding: var(--spacing-5); box-shadow: var(--shadow-card); position: sticky; top: calc(var(--header-height) + var(--spacing-6)); }
.booking-form-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--spacing-5); }
.booking-form-header .price { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--secondary); }
.booking-form-header .price span { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); color: var(--gray-500); }
.booking-form-header .rating { display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.booking-form-header .rating i { color: var(--star-color); }
.booking-date-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2); margin-bottom: var(--spacing-3); }
.booking-date-inputs .form-group label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.booking-guest-selector { margin-bottom: var(--spacing-5); }
.booking-total { border-top: var(--border-width) solid var(--border-color); padding-top: var(--spacing-4); margin-top: var(--spacing-3); }
.booking-total-row { display: flex; justify-content: space-between; margin-bottom: var(--spacing-2); font-size: var(--font-size-sm); color: var(--gray-600); }
.booking-total-row.total { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--secondary); border-top: var(--border-width) solid var(--border-color); padding-top: var(--spacing-3); margin-top: var(--spacing-2); }
.booking-form .btn-primary { width: 100%; padding: 0.875rem; font-size: var(--font-size-base); border-radius: var(--border-radius-md); }
.booking-form .charge-note { text-align: center; font-size: var(--font-size-xs); color: var(--gray-500); margin: var(--spacing-3) 0 0; }

/* ============================================================
   10. CALENDAR / DATEPICKER
   ============================================================ */

.calendar-container { background: var(--white); border-radius: var(--border-radius-xl); padding: var(--spacing-5); }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-4); }
.calendar-header h6 { margin-bottom: 0; font-size: var(--font-size-base); }
.calendar-nav { display: flex; gap: var(--spacing-2); }
.calendar-nav button { width: 32px; height: 32px; border-radius: var(--border-radius-full); border: var(--border-width) solid var(--border-color); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); font-size: var(--font-size-xs); color: var(--secondary); }
.calendar-nav button:hover { background: var(--gray-50); border-color: var(--gray-300); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--spacing-1); }
.calendar-weekday { text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--gray-500); padding: var(--spacing-2) 0; text-transform: uppercase; }
.calendar-day { text-align: center; padding: var(--spacing-2) 0; font-size: var(--font-size-sm); color: var(--secondary); border-radius: var(--border-radius-full); cursor: pointer; transition: all var(--transition-fast); position: relative; }
.calendar-day:hover { background: var(--gray-100); }
.calendar-day.today { font-weight: var(--font-weight-bold); color: var(--primary); }
.calendar-day.selected { background: var(--primary); color: var(--white); font-weight: var(--font-weight-semibold); }
.calendar-day.in-range { background: rgba(var(--primary-rgb), 0.1); border-radius: 0; }
.calendar-day.range-start { background: var(--primary); color: var(--white); border-radius: var(--border-radius-full) 0 0 var(--border-radius-full); }
.calendar-day.range-end { background: var(--primary); color: var(--white); border-radius: 0 var(--border-radius-full) var(--border-radius-full) 0; }
.calendar-day.blocked { color: var(--gray-300); text-decoration: line-through; cursor: not-allowed; pointer-events: none; }
.calendar-day-price { font-size: 9px; color: var(--gray-500); display: block; margin-top: 1px; }
.calendar-dual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-6); }

/* ============================================================
   11. MODAL & POPUP STYLES
   ============================================================ */

.sv-modal .modal-content { border-radius: var(--border-radius-2xl); }
.sv-modal-sm .modal-dialog { max-width: 400px; }
.sv-modal-lg .modal-dialog { max-width: 800px; }
.modal.fade .modal-dialog { transform: scale(0.95) translateY(-10px); }
.modal.show .modal-dialog { transform: scale(1) translateY(0); }

.toast-container { position: fixed; top: calc(var(--header-height) + var(--spacing-4)); right: var(--spacing-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--spacing-2); }
.toast { background: var(--white); border: none; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: var(--spacing-4); min-width: 300px; max-width: 420px; animation: slideInRight var(--transition-base) ease; }
.toast-header { display: flex; align-items: center; justify-content: space-between; border-bottom: none; padding: 0 0 var(--spacing-2) 0; }
.toast-body { padding: 0; font-size: var(--font-size-sm); color: var(--gray-600); }
.toast.toast-success { border-left: 4px solid var(--success); }
.toast.toast-error { border-left: 4px solid var(--danger); }
.toast.toast-warning { border-left: 4px solid var(--warning); }
.toast.toast-info { border-left: 4px solid var(--info); }

@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============================================================
   12. USER AVATAR STYLES
   ============================================================ */

.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--border-radius-full); object-fit: cover; background: var(--gray-200); color: var(--gray-600); font-weight: var(--font-weight-semibold); flex-shrink: 0; }
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: var(--font-size-xs); }
.avatar-md { width: 48px; height: 48px; font-size: var(--font-size-base); }
.avatar-lg { width: 64px; height: 64px; font-size: var(--font-size-lg); }
.avatar-xl { width: 96px; height: 96px; font-size: var(--font-size-2xl); }
.avatar-2xl { width: 128px; height: 128px; font-size: var(--font-size-3xl); }
.avatar-bordered { border: 2px solid var(--white); box-shadow: var(--shadow-sm); }
.avatar-group { display: flex; align-items: center; }
.avatar-group .avatar { margin-right: -8px; border: 2px solid var(--white); }
.avatar-group .avatar:last-child { margin-right: 0; }
.avatar-status { position: relative; display: inline-flex; }
.avatar-status-indicator { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); }
.avatar-status-indicator.online { background: var(--success); }
.avatar-status-indicator.away { background: var(--warning); }
.avatar-status-indicator.busy { background: var(--danger); }
.avatar-status-indicator.offline { background: var(--gray-400); }

/* ============================================================
   13. STAR RATING
   ============================================================ */

.star-rating { display: inline-flex; align-items: center; gap: 2px; color: var(--star-color); font-size: var(--font-size-sm); }
.star-rating-lg { font-size: var(--font-size-xl); }
.star-rating-sm { font-size: 10px; }
.star-rating-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-rating-input input { display: none; }
.star-rating-input label { font-size: var(--font-size-2xl); color: var(--gray-300); cursor: pointer; transition: color var(--transition-fast); margin-bottom: 0; }
.star-rating-input label:hover, .star-rating-input label:hover ~ label, .star-rating-input input:checked ~ label { color: var(--star-color); }
.star-rating-score { display: flex; align-items: center; gap: var(--spacing-2); }
.star-rating-score .score { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--secondary); }
.star-rating-score .count { font-size: var(--font-size-sm); color: var(--gray-500); }

/* ============================================================
   14. SKELETON LOADING
   ============================================================ */

.skeleton { background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-shine) 50%, var(--skeleton-bg) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--border-radius-md); }
.skeleton-text { height: 14px; margin-bottom: var(--spacing-2); width: 100%; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 20px; width: 70%; margin-bottom: var(--spacing-3); }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-thumbnail { width: 100%; padding-top: 66.67%; border-radius: var(--border-radius-lg); }
.skeleton-button { height: 44px; width: 120px; border-radius: var(--border-radius-md); }
@keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-card { border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); overflow: hidden; }
.skeleton-card-image { width: 100%; padding-top: 66.67%; background: var(--skeleton-bg); }
.skeleton-card-body { padding: var(--spacing-4); }
.skeleton-line { height: 12px; background: var(--skeleton-bg); border-radius: 6px; margin-bottom: var(--spacing-2); animation: skeleton-shimmer 1.5s ease-in-out infinite; background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-shine) 50%, var(--skeleton-bg) 75%); background-size: 200% 100%; }
/* ============================================================
   15. DASHBOARD LAYOUTS
   ============================================================ */

.dashboard-layout { display: flex; min-height: 100vh; }
.dashboard-sidebar { width: 260px; min-width: 260px; background: var(--white); border-right: var(--border-width) solid var(--border-color); padding: var(--spacing-6); position: fixed; top: var(--header-height); left: 0; bottom: 0; overflow-y: auto; z-index: var(--z-sticky); }
.dashboard-sidebar .sidebar-nav { list-style: none; padding: 0; margin: 0; }
.dashboard-sidebar .sidebar-nav .nav-item { margin-bottom: var(--spacing-1); }
.dashboard-sidebar .sidebar-nav .nav-link { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--gray-600); transition: all var(--transition-fast); }
.dashboard-sidebar .sidebar-nav .nav-link:hover { background: var(--gray-50); color: var(--secondary); }
.dashboard-sidebar .sidebar-nav .nav-link.active { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); }
.dashboard-sidebar .sidebar-nav .nav-link i { width: 20px; text-align: center; font-size: var(--font-size-base); }
.dashboard-main { flex: 1; margin-left: 260px; padding: var(--spacing-8); background: var(--gray-50); min-height: 100vh; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-6); }
.dashboard-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.stat-card { background: var(--white); border-radius: var(--border-radius-xl); padding: var(--spacing-5); box-shadow: var(--shadow-card); display: flex; align-items: flex-start; gap: var(--spacing-4); }
.stat-card-icon { width: 48px; height: 48px; border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); flex-shrink: 0; }
.stat-card-icon.primary { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); }
.stat-card-icon.success { background: var(--success-light); color: var(--success); }
.stat-card-icon.warning { background: var(--warning-light); color: #B38600; }
.stat-card-icon.info { background: var(--info-light); color: var(--info); }
.stat-card-body h4 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-1); }
.stat-card-body p { font-size: var(--font-size-sm); color: var(--gray-500); margin-bottom: 0; }
.stat-card-body .stat-change { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); margin-top: var(--spacing-1); }
.stat-card-body .stat-change.up { color: var(--success); }
.stat-card-body .stat-change.down { color: var(--danger); }

/* ============================================================
   16. TIMELINE
   ============================================================ */

.timeline { position: relative; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--border-color); }
.timeline-item { position: relative; padding: 0 0 var(--spacing-6) var(--spacing-10); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: 10px; top: 4px; width: 14px; height: 14px; border-radius: var(--border-radius-full); background: var(--white); border: 2px solid var(--primary); }
.timeline-item.completed::before { background: var(--primary); }
.timeline-item.cancelled::before { background: var(--danger); border-color: var(--danger); }
.timeline-item.pending::before { border-color: var(--warning); }
.timeline-date { font-size: var(--font-size-xs); color: var(--gray-500); margin-bottom: var(--spacing-1); }
.timeline-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-1); }
.timeline-text { font-size: var(--font-size-sm); color: var(--gray-600); }

/* ============================================================
   17. CHAT / MESSAGING UI
   ============================================================ */

.chat-container { display: flex; height: 600px; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); overflow: hidden; background: var(--white); }
.chat-sidebar { width: 320px; min-width: 320px; border-right: var(--border-width) solid var(--border-color); display: flex; flex-direction: column; }
.chat-sidebar-header { padding: var(--spacing-4); border-bottom: var(--border-width) solid var(--border-color); }
.chat-conversations { flex: 1; overflow-y: auto; }
.chat-conversation { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); cursor: pointer; transition: background var(--transition-fast); }
.chat-conversation:hover { background: var(--gray-50); }
.chat-conversation.active { background: rgba(var(--primary-rgb), 0.05); }
.chat-conversation.unread { background: var(--gray-50); }
.chat-conversation-avatar .avatar { width: 48px; height: 48px; border-radius: 50%; }
.chat-conversation-info { flex: 1; min-width: 0; }
.chat-conversation-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--secondary); display: flex; align-items: center; gap: var(--spacing-2); }
.chat-conversation-name .unread-badge { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.chat-conversation-message { font-size: var(--font-size-xs); color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conversation-time { font-size: 10px; color: var(--gray-400); flex-shrink: 0; align-self: flex-start; }
.chat-main { flex: 1; display: flex; flex-direction: column; }
.chat-main-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-4); border-bottom: var(--border-width) solid var(--border-color); }
.chat-messages { flex: 1; overflow-y: auto; padding: var(--spacing-4); display: flex; flex-direction: column; gap: var(--spacing-3); }
.chat-message { display: flex; gap: var(--spacing-3); max-width: 70%; }
.chat-message.sent { align-self: flex-end; flex-direction: row-reverse; }
.chat-message.received { align-self: flex-start; }
.chat-message-bubble { padding: var(--spacing-3) var(--spacing-4); border-radius: var(--border-radius-xl); font-size: var(--font-size-sm); line-height: 1.5; }
.chat-message.sent .chat-message-bubble { background: var(--primary); color: var(--white); border-bottom-right-radius: var(--border-radius-sm); }
.chat-message.received .chat-message-bubble { background: var(--gray-50); color: var(--secondary); border-bottom-left-radius: var(--border-radius-sm); }
.chat-message-time { font-size: 10px; color: var(--gray-400); margin-top: var(--spacing-1); text-align: right; }
.chat-input-area { padding: var(--spacing-4); border-top: var(--border-width) solid var(--border-color); display: flex; align-items: center; gap: var(--spacing-3); }
.chat-input-area input { flex: 1; padding: 0.625rem 1rem; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-full); font-size: var(--font-size-sm); outline: none; }
.chat-input-area input:focus { border-color: var(--primary); }
.chat-input-area .btn-send { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--white); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); }
.chat-input-area .btn-send:hover { background: var(--primary-dark); transform: scale(1.05); }
.chat-typing { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-xs); color: var(--gray-500); }
.chat-typing-dots { display: flex; gap: 3px; }
.chat-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); animation: typingDot 1.4s ease-in-out infinite; }
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ============================================================
   18. ADMIN PANEL
   ============================================================ */

.admin-header { background: linear-gradient(135deg, var(--secondary) 0%, var(--gray-800) 100%); color: var(--white); padding: var(--spacing-8) var(--spacing-6); border-radius: var(--border-radius-xl); margin-bottom: var(--spacing-6); }
.admin-header h1 { color: var(--white); font-size: var(--font-size-3xl); margin-bottom: var(--spacing-2); }
.admin-header p { color: rgba(255,255,255,0.7); }
.admin-table { background: var(--white); border-radius: var(--border-radius-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.admin-table .table th { background: var(--gray-50); }
.admin-table .table-actions { display: flex; gap: var(--spacing-2); }
.admin-table .table-actions button { width: 32px; height: 32px; border-radius: var(--border-radius-md); border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); font-size: var(--font-size-xs); }
.admin-card { background: var(--white); border-radius: var(--border-radius-xl); padding: var(--spacing-5); box-shadow: var(--shadow-card); margin-bottom: var(--spacing-4); }
.admin-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-3); border-bottom: var(--border-width) solid var(--border-color); }
.admin-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: var(--border-radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.admin-badge.active { background: var(--success-light); color: var(--success); }
.admin-badge.inactive { background: var(--danger-light); color: var(--danger); }
.admin-badge.pending { background: var(--warning-light); color: #B38600; }

/* ============================================================
   19. FILE UPLOAD
   ============================================================ */

.file-upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-8) var(--spacing-4); border: 2px dashed var(--border-color); border-radius: var(--border-radius-xl); background: var(--gray-50); cursor: pointer; transition: all var(--transition-fast); }
.file-upload:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.03); }
.file-upload.dragover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.05); }
.file-upload-icon { font-size: var(--font-size-4xl); color: var(--gray-400); margin-bottom: var(--spacing-3); }
.file-upload-text { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--secondary); margin-bottom: var(--spacing-1); }
.file-upload-hint { font-size: var(--font-size-sm); color: var(--gray-500); }
.file-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-upload-preview { display: flex; gap: var(--spacing-3); flex-wrap: wrap; margin-top: var(--spacing-4); }
.file-upload-preview-item { position: relative; width: 80px; height: 80px; border-radius: var(--border-radius-md); overflow: hidden; border: var(--border-width) solid var(--border-color); }
.file-upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.file-upload-preview-item .remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: var(--white); font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--transition-fast); }
.file-upload-preview-item:hover .remove { opacity: 1; }
/* ============================================================
   20. ANIMATIONS & TRANSITIONS
   ============================================================ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.animate-fade-in { animation: fadeIn var(--transition-base) ease; }
.animate-fade-in-up { animation: fadeInUp var(--transition-base) ease; }
.animate-fade-in-down { animation: fadeInDown var(--transition-base) ease; }
.animate-scale-in { animation: scaleIn var(--transition-base) ease; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 1s ease infinite; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger-children > * { opacity: 0; animation: fadeInUp 0.5s ease forwards; }
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }

/* ============================================================
   21. SCROLLBAR CUSTOMIZATION
   ============================================================ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
.scrollbar-thin { scrollbar-width: thin; }
.scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-hidden { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hidden::-webkit-scrollbar { display: none; }

/* ============================================================
   22. NOTIFICATIONS
   ============================================================ */

.notification-item { display: flex; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); transition: background var(--transition-fast); border-bottom: var(--border-width) solid var(--border-color); }
.notification-item:hover { background: var(--gray-50); }
.notification-item.unread { background: rgba(var(--primary-rgb), 0.03); }
.notification-item-icon { width: 36px; height: 36px; border-radius: var(--border-radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--font-size-sm); }
.notification-item-content { flex: 1; min-width: 0; }
.notification-item-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--secondary); margin-bottom: 2px; }
.notification-item-text { font-size: var(--font-size-xs); color: var(--gray-500); line-height: 1.4; }
.notification-item-time { font-size: 10px; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; }
.notification-bell { position: relative; display: inline-flex; }
.notification-bell .badge { position: absolute; top: -4px; right: -4px; font-size: 9px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.notification-dropdown { width: 360px; max-height: 420px; overflow: hidden; }
.notification-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-3) var(--spacing-4); border-bottom: var(--border-width) solid var(--border-color); }
.notification-dropdown-body { max-height: 340px; overflow-y: auto; }

/* ============================================================
   23. PRINT STYLES
   ============================================================ */

@media print {
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  body { font-size: 12pt; line-height: 1.5; }
  a, a:visited { text-decoration: underline; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  .site-header, .site-footer, .main-navbar, .sidebar, .chat-sidebar, .chat-input-area, .dashboard-sidebar, .back-to-top, .btn, .no-print { display: none !important; }
  .page-wrapper { padding-top: 0; }
  .dashboard-main { margin-left: 0; padding: 0; }
  .card { border: 1px solid #ddd; break-inside: avoid; }
  .container { max-width: 100%; padding: 0; }
  .hero-section { min-height: auto; padding: var(--spacing-8) 0; }
  @page { margin: 2cm; }
}

/* ============================================================
   24. RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 1199.98px) {
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
  .property-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .calendar-dual { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  :root { --header-height: var(--header-height-mobile); }
  .dashboard-sidebar { width: 220px; min-width: 220px; }
  .dashboard-main { margin-left: 220px; }
  .chat-sidebar { width: 280px; min-width: 280px; }
  .hero-content h1 { font-size: var(--font-size-4xl); }
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
  .property-list-view .property-card { flex-direction: column; }
  .property-list-view .property-card-image { width: 100%; min-width: unset; height: 200px; }
}

@media (max-width: 767.98px) {
  .header-search { display: none; }
  .hero-search-box { flex-direction: column; align-items: stretch; }
  .hero-search-box .search-divider { display: none; }
  .hero-content h1 { font-size: var(--font-size-3xl); }
  .dashboard-layout { flex-direction: column; }
  .dashboard-sidebar { position: relative; top: 0; width: 100%; min-width: unset; border-right: none; border-bottom: var(--border-width) solid var(--border-color); }
  .dashboard-main { margin-left: 0; }
  .chat-container { flex-direction: column; height: auto; }
  .chat-sidebar { width: 100%; min-width: unset; border-right: none; border-bottom: var(--border-width) solid var(--border-color); max-height: 300px; }
  .footer-columns { grid-template-columns: 1fr; }
  .booking-date-inputs { grid-template-columns: 1fr; }
  .property-grid { grid-template-columns: 1fr; }
  .toast { min-width: unset; max-width: 100%; }
  .notification-dropdown { width: 300px; }
}

@media (max-width: 575.98px) {
  .site-header-inner { padding: 0 var(--spacing-4); }
  .hero-content { padding: var(--spacing-6) var(--spacing-4); }
  .hero-content h1 { font-size: var(--font-size-2xl); }
  .hero-section { min-height: 60vh; }
  .page-section { padding: var(--spacing-8) 0; }
  .dashboard-main { padding: var(--spacing-4); }
  .header-actions .btn-language span { display: none; }
  .chat-message { max-width: 85%; }
}

/* ============================================================
   25. DARK MODE TOGGLE BUTTON
   ============================================================ */

.dark-mode-toggle { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--border-radius-full); background: none; border: none; color: var(--secondary); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); }
.dark-mode-toggle:hover { background-color: var(--gray-50); }

/* ============================================================
   26. BACK TO TOP
   ============================================================ */

.back-to-top { position: fixed; bottom: var(--spacing-8); right: var(--spacing-8); width: 44px; height: 44px; border-radius: var(--border-radius-full); background: var(--secondary); color: var(--white); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-lg); z-index: var(--z-popover); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition-base); }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--primary); transform: translateY(-2px); }

/* ============================================================
   27. PASSWORD STRENGTH
   ============================================================ */

.password-strength { display: flex; gap: var(--spacing-1); margin-top: var(--spacing-2); }
.password-strength-bar { height: 4px; flex: 1; border-radius: 2px; background: var(--gray-200); transition: all var(--transition-fast); }
.password-strength-bar.weak { background: var(--danger); }
.password-strength-bar.medium { background: var(--warning); }
.password-strength-bar.strong { background: var(--success); }
.password-strength-text { font-size: var(--font-size-xs); margin-top: var(--spacing-1); display: block; }
.password-strength-text.weak { color: var(--danger); }
.password-strength-text.medium { color: #B38600; }
.password-strength-text.strong { color: var(--success); }

/* ============================================================
   28. SKIP LINK (Accessibility)
   ============================================================ */

.skip-link { position: absolute; top: -100%; left: var(--spacing-4); padding: var(--spacing-3) var(--spacing-4); background: var(--primary); color: var(--white); z-index: var(--z-tooltip); border-radius: var(--border-radius-md); font-weight: var(--font-weight-semibold); transition: top var(--transition-fast); }
.skip-link:focus { top: var(--spacing-4); }

/* ============================================================
   29. SOCIAL LOGIN BUTTONS
   ============================================================ */

.btn-social-google { background: var(--white); border: var(--border-width) solid var(--gray-300); color: var(--secondary); }
.btn-social-google:hover { background: var(--gray-50); }
.btn-social-facebook { background: #1877F2; border-color: #1877F2; color: var(--white); }
.btn-social-apple { background: var(--black); border-color: var(--black); color: var(--white); }

/* ============================================================
   30. UTILITY CLASSES
   ============================================================ */

.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--gray-500) !important; }
.text-white { color: var(--white) !important; }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.text-center { text-align: center; }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bg-primary { background-color: var(--primary) !important; }
.bg-light { background-color: var(--gray-50) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-dark { background-color: var(--gray-900) !important; }
.rounded-full { border-radius: var(--border-radius-full); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.d-flex { display: flex; }
.d-none { display: none; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.user-select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }
/* ============================================================
   31. EXTRA UTILITY CLASSES
   ============================================================ */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.start-0 { left: 0; }
.end-0 { right: 0; }
.translate-middle { transform: translate(-50%, -50%); }
.translate-middle-x { transform: translateX(-50%); }
.translate-middle-y { transform: translateY(-50%); }
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-end-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-start-0 { border-left: 0 !important; }
.border-primary { border-color: var(--primary) !important; }
.border-success { border-color: var(--success) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-info { border-color: var(--info) !important; }
.border-dark { border-color: var(--secondary) !important; }
.border-white { border-color: var(--white) !important; }
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }
.min-vh-100 { min-height: 100vh; }
.vh-100 { height: 100vh; }

.flex-row-reverse { flex-direction: row-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }
.align-content-start { align-content: flex-start; }
.align-content-center { align-content: center; }
.align-content-end { align-content: flex-end; }
.align-self-start { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }
.align-self-stretch { align-self: stretch; }

.fw-light { font-weight: var(--font-weight-light); }
.fw-lighter { font-weight: lighter; }
.fw-normal { font-weight: var(--font-weight-normal); }
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-bold { font-weight: var(--font-weight-bold); }
.fw-bolder { font-weight: bolder; }
.fst-italic { font-style: italic; }
.fst-normal { font-style: normal; }
.lh-1 { line-height: 1; }
.lh-sm { line-height: var(--line-height-tight); }
.lh-base { line-height: var(--line-height-normal); }
.lh-lg { line-height: var(--line-height-relaxed); }
.text-start { text-align: left; }
.text-end { text-align: right; }
.text-nowrap { white-space: nowrap; }
.text-break { word-break: break-word; overflow-wrap: break-word; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-decoration-underline { text-decoration: underline; }
.text-decoration-line-through { text-decoration: line-through; }
.text-decoration-none { text-decoration: none; }
.text-wrap { white-space: normal; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-body { color: var(--body-color) !important; }
.text-black-50 { color: rgba(0, 0, 0, 0.5); }
.text-white-50 { color: rgba(255, 255, 255, 0.5); }
.text-reset { color: inherit !important; }

.bg-transparent { background-color: transparent !important; }
.bg-body { background-color: var(--body-bg) !important; }
.bg-primary-subtle { background-color: rgba(var(--primary-rgb), 0.1); }
.bg-success-subtle { background-color: var(--success-light); }
.bg-warning-subtle { background-color: var(--warning-light); }
.bg-danger-subtle { background-color: var(--danger-light); }
.bg-info-subtle { background-color: var(--info-light); }
.bg-gradient { background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0)); }

.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.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; }
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.stretched-link::after { position: absolute; inset: 0; z-index: 1; content: ""; }
.text-bg-primary { color: var(--white) !important; background-color: var(--primary) !important; }
.text-bg-success { color: var(--white) !important; background-color: var(--success) !important; }
.text-bg-warning { color: var(--secondary) !important; background-color: var(--warning) !important; }
.text-bg-danger { color: var(--white) !important; background-color: var(--danger) !important; }
.text-bg-info { color: var(--white) !important; background-color: var(--info) !important; }
.text-bg-dark { color: var(--white) !important; background-color: var(--secondary) !important; }
.text-bg-light { color: var(--secondary) !important; background-color: var(--gray-50) !important; }

.z-n1 { z-index: -1; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.float-start { float: left; }
.float-end { float: right; }
.float-none { float: none; }
.clearfix::after { display: block; clear: both; content: ""; }
.user-select-all { user-select: all; }
.user-select-auto { user-select: auto; }
.user-select-none { user-select: none; }
.pe-none { pointer-events: none; }
.pe-auto { pointer-events: auto; }
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--aspect-ratio, 100%); content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-1x1 { --aspect-ratio: 100%; }
.ratio-4x3 { --aspect-ratio: 75%; }
.ratio-16x9 { --aspect-ratio: 56.25%; }
.ratio-21x9 { --aspect-ratio: 42.8571428571%; }
.ratio-2x1 { --aspect-ratio: 50%; }
.ratio-3x2 { --aspect-ratio: 66.666%; }

/* ============================================================
   32. COMPLEMENTARY COMPONENTS
   ============================================================ */

.gallery-nav { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; color: var(--secondary); cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-md); z-index: 2; }
.gallery-nav:hover { background: var(--white); transform: scale(1.05); }

.empty-state { text-align: center; padding: var(--spacing-16) var(--spacing-4); }
.empty-state-icon { font-size: 4rem; color: var(--gray-300); margin-bottom: var(--spacing-4); }
.empty-state-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-2); }
.empty-state-text { color: var(--gray-500); margin-bottom: var(--spacing-6); max-width: 400px; margin-left: auto; margin-right: auto; }

.loading-spinner { display: flex; align-items: center; justify-content: center; padding: var(--spacing-8); }
.loading-spinner .spinner { width: 40px; height: 40px; border: 3px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }

.divider { display: flex; align-items: center; color: var(--gray-500); font-size: var(--font-size-sm); margin: var(--spacing-4) 0; }
.divider::before, .divider::after { flex: 1; content: ""; height: 1px; background: var(--border-color); }
.divider:not(:empty) { gap: var(--spacing-4); }

.country-flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; }

.language-selector { display: flex; align-items: center; gap: var(--spacing-2); cursor: pointer; padding: var(--spacing-2); border-radius: var(--border-radius-md); transition: background var(--transition-fast); }
.language-selector:hover { background: var(--gray-50); }
.language-selector .lang-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--secondary); }
.language-selector .lang-arrow { font-size: var(--font-size-xs); color: var(--gray-400); }

.feature-badge { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-2); background: var(--gray-50); border-radius: var(--border-radius-md); font-size: var(--font-size-xs); color: var(--gray-600); }

.price-tag { display: inline-flex; align-items: baseline; gap: 2px; }
.price-tag .amount { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--secondary); }
.price-tag .currency { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--secondary); }
.price-tag .period { font-size: var(--font-size-sm); color: var(--gray-500); }

.amenity-tag { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); font-size: var(--font-size-sm); color: var(--gray-600); transition: all var(--transition-fast); cursor: default; }
.amenity-tag i { color: var(--gray-400); }

.cancellation-badge { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-3); border-radius: var(--border-radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.cancellation-badge.flexible { background: var(--success-light); color: var(--success); }
.cancellation-badge.moderate { background: var(--warning-light); color: #B38600; }
.cancellation-badge.strict { background: var(--danger-light); color: var(--danger); }

.quick-stat { text-align: center; padding: var(--spacing-4); }
.quick-stat-number { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--secondary); display: block; }
.quick-stat-label { font-size: var(--font-size-sm); color: var(--gray-500); }

.host-card { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-5); background: var(--gray-50); border-radius: var(--border-radius-xl); }
.host-card-info { flex: 1; }
.host-card-name { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-1); }
.host-card-meta { font-size: var(--font-size-sm); color: var(--gray-500); }
.host-card-badge { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-3); background: var(--secondary); color: var(--white); border-radius: var(--border-radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }

.map-container { width: 100%; height: 400px; border-radius: var(--border-radius-xl); overflow: hidden; }
.map-container-sm { height: 250px; }

.sticky-sidebar { position: sticky; top: calc(var(--header-height) + var(--spacing-6)); }

.page-transition { animation: fadeInUp 0.4s ease; }

.hero-wave { position: absolute; bottom: -1px; left: 0; right: 0; z-index: 2; }
.hero-wave svg { display: block; width: 100%; height: 60px; }

.shimmer { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.floating-label-group { position: relative; margin-bottom: var(--spacing-4); }
.floating-label-group label { position: absolute; left: var(--spacing-4); top: 50%; transform: translateY(-50%); background: var(--white); padding: 0 var(--spacing-1); color: var(--gray-500); font-size: var(--font-size-base); transition: all var(--transition-fast); pointer-events: none; }
.floating-label-group .form-control:focus ~ label,
.floating-label-group .form-control:not(:placeholder-shown) ~ label { top: -0.5rem; left: 0.75rem; font-size: var(--font-size-xs); color: var(--primary); }

.card-divider { height: 1px; background: var(--border-color); margin: var(--spacing-4) 0; }

.overlay-link { position: absolute; inset: 0; z-index: 1; }

.image-aspect { position: relative; overflow: hidden; }
.image-aspect-1x1 { padding-top: 100%; }
.image-aspect-4x3 { padding-top: 75%; }
.image-aspect-16x9 { padding-top: 56.25%; }
.image-aspect-3x2 { padding-top: 66.66%; }
.image-aspect img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--primary); color: var(--white); border-radius: 50%; font-size: 10px; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th { padding: var(--spacing-3) var(--spacing-4); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); text-align: left; border-bottom: 2px solid var(--border-color); }
.data-table td { padding: var(--spacing-3) var(--spacing-4); border-bottom: var(--border-width) solid var(--border-color); vertical-align: middle; }
.data-table tr:hover td { background: var(--gray-50); }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--spacing-2); }
.status-dot.active { background: var(--success); }
.status-dot.inactive { background: var(--gray-300); }
.status-dot.pending { background: var(--warning); }
.status-dot.cancelled { background: var(--danger); }

.ticket { display: inline-flex; align-items: center; padding: var(--spacing-1) var(--spacing-3); border-radius: var(--border-radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.ticket-low { background: var(--success-light); color: var(--success); }
.ticket-medium { background: var(--warning-light); color: #B38600; }
.ticket-high { background: var(--danger-light); color: var(--danger); }

.display-1 { font-size: 5rem; font-weight: var(--font-weight-extrabold); line-height: 1.1; }
.display-2 { font-size: 4.5rem; font-weight: var(--font-weight-extrabold); line-height: 1.1; }
.display-3 { font-size: 4rem; font-weight: var(--font-weight-bold); line-height: 1.1; }
.display-4 { font-size: 3.5rem; font-weight: var(--font-weight-bold); line-height: 1.1; }
.display-5 { font-size: 3rem; font-weight: var(--font-weight-bold); line-height: 1.1; }
.display-6 { font-size: 2.5rem; font-weight: var(--font-weight-bold); line-height: 1.1; }

.section-divider { display: flex; align-items: center; width: 100%; margin: var(--spacing-8) 0; }
.section-divider-line { flex: 1; height: 1px; background: var(--border-color); }
.section-divider-icon { padding: 0 var(--spacing-4); color: var(--gray-400); font-size: var(--font-size-lg); }

.tooltip-wrapper { position: relative; display: inline-flex; }
.tooltip-wrapper .tooltip-box { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--secondary); color: var(--white); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--border-radius-md); font-size: var(--font-size-xs); white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--transition-fast); z-index: var(--z-tooltip); }
.tooltip-wrapper:hover .tooltip-box { opacity: 1; visibility: visible; }

.image-comparison { position: relative; width: 100%; overflow: hidden; border-radius: var(--border-radius-xl); }
.image-comparison img { display: block; width: 100%; }
.image-comparison .before, .image-comparison .after { position: absolute; top: 0; width: 50%; overflow: hidden; }
.image-comparison .before { left: 0; }
.image-comparison .after { right: 0; }
.image-comparison .handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; cursor: ew-resize; z-index: 2; }

.step-indicator { display: flex; justify-content: center; gap: var(--spacing-8); margin-bottom: var(--spacing-8); }
.step { display: flex; align-items: center; gap: var(--spacing-2); position: relative; }
.step-number { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); border: 2px solid var(--gray-300); color: var(--gray-400); background: var(--white); }
.step.active .step-number { background: var(--primary); border-color: var(--primary); color: var(--white); }
.step.completed .step-number { background: var(--success); border-color: var(--success); color: var(--white); }
.step-label { font-size: var(--font-size-sm); color: var(--gray-500); white-space: nowrap; }
.step.active .step-label { color: var(--secondary); font-weight: var(--font-weight-semibold); }

.card-highlight { position: relative; overflow: hidden; }
.card-highlight::before { content: "Best Deal"; position: absolute; top: 12px; right: -32px; background: var(--primary); color: var(--white); font-size: 11px; font-weight: var(--font-weight-bold); padding: 4px 40px; transform: rotate(45deg); z-index: 2; }

.hover-lift { transition: transform var(--transition-base); }
.hover-lift:hover { transform: translateY(-4px); }

.hover-shadow { transition: box-shadow var(--transition-base); }
.hover-shadow:hover { box-shadow: var(--shadow-lg); }

.hover-scale { transition: transform var(--transition-base); }
.hover-scale:hover { transform: scale(1.03); }

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

.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--spacing-4); }
.dash-col-3 { grid-column: span 3; }
.dash-col-4 { grid-column: span 4; }
.dash-col-6 { grid-column: span 6; }
.dash-col-8 { grid-column: span 8; }
.dash-col-9 { grid-column: span 9; }
.dash-col-12 { grid-column: span 12; }

@media (max-width: 991.98px) {
  .dash-col-3, .dash-col-4 { grid-column: span 6; }
  .dash-col-8, .dash-col-9 { grid-column: span 12; }
}

@media (max-width: 767.98px) {
  .dash-col-3, .dash-col-4, .dash-col-6 { grid-column: span 12; }
}

/* ============================================================
   33. EXTRA RESPONSIVE UTILITIES
   ============================================================ */

@media (min-width: 576px) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
  .d-sm-flex { display: flex; }
  .text-sm-start { text-align: left; }
  .text-sm-center { text-align: center; }
  .text-sm-end { text-align: right; }
}

@media (min-width: 768px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
  .text-md-start { text-align: left; }
  .text-md-center { text-align: center; }
  .text-md-end { text-align: right; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none; }
  .d-lg-block { display: block; }
  .d-lg-flex { display: flex; }
  .text-lg-start { text-align: left; }
  .text-lg-center { text-align: center; }
  .text-lg-end { text-align: right; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none; }
  .d-xl-block { display: block; }
  .d-xl-flex { display: flex; }
}

@media (max-width: 575.98px) {
  .d-xs-none { display: none; }
}

/* ============================================================
   34. EXTRA ANIMATIONS
   ============================================================ */

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4); } 50% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0); } }
@keyframes slide-down { from { max-height: 0; opacity: 0; } to { max-height: 500px; opacity: 1; } }
@keyframes slide-up { from { max-height: 500px; opacity: 1; } to { max-height: 0; opacity: 0; } }
@keyframes wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes flip { 0% { transform: perspective(400px) rotateY(0); } 100% { transform: perspective(400px) rotateY(360deg); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-4px); } 20%,40%,60%,80% { transform: translateX(4px); } }
@keyframes pop { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-wobble { animation: wobble 1s ease-in-out; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-pop { animation: pop 0.3s ease-out; }
.animate-gradient { background-size: 200% 200%; animation: gradient-shift 3s ease infinite; }

.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.4); width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; top: 50%; left: 50%; transform: scale(0); opacity: 0; }
.btn-ripple:active::after { animation: ripple 0.6s ease-out; }

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

.separator { display: flex; align-items: center; gap: 1rem; color: var(--gray-400); font-size: var(--font-size-sm); }
.separator::before, .separator::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

.stacked-cards { display: grid; grid-template-columns: 1fr; gap: 0; }
.stacked-cards > * { grid-row: 1; grid-column: 1; }
.stacked-cards > :nth-child(1) { transform: rotate(-2deg); z-index: 1; }
.stacked-cards > :nth-child(2) { transform: rotate(1deg); z-index: 2; margin-top: 8px; }
.stacked-cards > :nth-child(3) { transform: rotate(0deg); z-index: 3; margin-top: 16px; }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); text-align: center; padding: var(--spacing-8) 0; }
.stat-item-number { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--secondary); display: block; }
.stat-item-label { font-size: var(--font-size-sm); color: var(--gray-500); margin-top: var(--spacing-1); }

.testimonial-card { background: var(--white); border-radius: var(--border-radius-xl); padding: var(--spacing-6); box-shadow: var(--shadow-card); position: relative; }
.testimonial-card::before { content: "\201C"; font-size: 4rem; color: var(--primary); position: absolute; top: 8px; left: 20px; line-height: 1; opacity: 0.2; font-family: Georgia, serif; }
.testimonial-text { font-style: italic; line-height: 1.7; color: var(--gray-600); margin-bottom: var(--spacing-4); }
.testimonial-author { display: flex; align-items: center; gap: var(--spacing-3); }

.pricing-table { text-align: center; padding: var(--spacing-6); background: var(--white); border-radius: var(--border-radius-xl); transition: all var(--transition-base); }
.pricing-table.featured { box-shadow: var(--shadow-lg); border: 2px solid var(--primary); transform: scale(1.02); position: relative; }
.pricing-table.featured .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--white); padding: 4px 20px; border-radius: var(--border-radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.pricing-amount { font-size: var(--font-size-5xl); font-weight: var(--font-weight-extrabold); color: var(--secondary); }
.pricing-currency { font-size: var(--font-size-xl); vertical-align: super; }
.pricing-period { font-size: var(--font-size-sm); color: var(--gray-500); }
.pricing-features { list-style: none; padding: 0; margin: var(--spacing-6) 0; }
.pricing-features li { padding: var(--spacing-2) 0; font-size: var(--font-size-sm); color: var(--gray-600); border-bottom: var(--border-width) solid var(--gray-50); }
.pricing-features li:last-child { border-bottom: none; }

.bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); }
.bento-item { border-radius: var(--border-radius-xl); overflow: hidden; position: relative; min-height: 200px; }
.bento-item:first-child { grid-column: 1 / -1; }
.bento-item-content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--spacing-5); background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: var(--white); }
.bento-item-content h4 { color: var(--white); margin-bottom: var(--spacing-1); }
.bento-item-content p { color: rgba(255,255,255,0.8); font-size: var(--font-size-sm); margin-bottom: 0; }

.countdown { display: flex; gap: var(--spacing-4); justify-content: center; }
.countdown-item { text-align: center; }
.countdown-number { display: block; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--secondary); line-height: 1; }
.countdown-label { font-size: var(--font-size-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; }

.achievement { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); border-radius: var(--border-radius-md); transition: background var(--transition-fast); }
.achievement:hover { background: var(--gray-50); }
.achievement-icon { width: 40px; height: 40px; border-radius: var(--border-radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); flex-shrink: 0; }
.achievement-icon.locked { background: var(--gray-100); color: var(--gray-400); }
.achievement-icon.unlocked { background: var(--warning-light); color: var(--warning); }
.achievement-info h6 { font-size: var(--font-size-sm); margin-bottom: 2px; }
.achievement-info small { font-size: var(--font-size-xs); color: var(--gray-500); }

.onboarding-progress { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-4); background: var(--gray-50); border-radius: var(--border-radius-xl); }
.onboarding-progress-bar { flex: 1; height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.onboarding-progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.5s ease; }
.onboarding-progress-text { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--gray-600); white-space: nowrap; }

.quick-actions { display: flex; gap: var(--spacing-3); }
.quick-action { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); padding: var(--spacing-4); border-radius: var(--border-radius-lg); background: var(--white); border: var(--border-width) solid var(--border-color); cursor: pointer; transition: all var(--transition-fast); min-width: 80px; }
.quick-action:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.03); }
.quick-action i { font-size: var(--font-size-2xl); color: var(--gray-500); }
.quick-action span { font-size: var(--font-size-xs); color: var(--gray-600); text-align: center; }

.sticky-note { background: #FFF8E1; padding: var(--spacing-4); border-radius: var(--border-radius-lg); border-left: 4px solid var(--warning); margin-bottom: var(--spacing-4); }
.sticky-note-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); margin-bottom: var(--spacing-1); }
.sticky-note-text { font-size: var(--font-size-sm); color: var(--gray-600); }

/* ============================================================
   END OF STYLESHEET
   ============================================================ */
/* ============================================================
   35. DETAILED COMPONENT STYLES
   ============================================================ */

.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--border-radius-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.compare-table th, .compare-table td { padding: var(--spacing-4) var(--spacing-5); text-align: center; border-bottom: var(--border-width) solid var(--border-color); }
.compare-table th { background: var(--gray-50); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--gray-700); }
.compare-table th:first-child { text-align: left; }
.compare-table td:first-child { text-align: left; font-weight: var(--font-weight-medium); color: var(--gray-700); }
.compare-table .featured-col { background: rgba(var(--primary-rgb), 0.03); border-left: 2px solid var(--primary); border-right: 2px solid var(--primary); }
.compare-table .check-mark { color: var(--success); font-size: var(--font-size-lg); }
.compare-table .cross-mark { color: var(--danger); font-size: var(--font-size-lg); }

.hero-carousel { position: relative; overflow: hidden; }
.hero-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.hero-carousel-slide.active { opacity: 1; position: relative; }
.hero-carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-carousel-indicators { position: absolute; bottom: var(--spacing-6); left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-2); z-index: 3; }
.hero-carousel-indicators button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; transition: all var(--transition-fast); }
.hero-carousel-indicators button.active { background: var(--white); width: 24px; border-radius: 4px; }

.floating-card { position: absolute; background: var(--white); border-radius: var(--border-radius-xl); padding: var(--spacing-4); box-shadow: var(--shadow-lg); z-index: 3; }
.floating-card.top-right { top: var(--spacing-6); right: var(--spacing-6); }
.floating-card.bottom-left { bottom: var(--spacing-6); left: var(--spacing-6); }
.floating-card.bottom-right { bottom: var(--spacing-6); right: var(--spacing-6); }

.image-grid { display: grid; gap: var(--spacing-1); border-radius: var(--border-radius-xl); overflow: hidden; }
.image-grid-2 { grid-template-columns: 1fr 1fr; }
.image-grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.image-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.image-grid > :first-child { grid-column: 1 / -1; }
.image-grid img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform var(--transition-base); }
.image-grid img:hover { transform: scale(1.02); }

.room-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-3); }
.room-item { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-4); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); transition: all var(--transition-fast); }
.room-item:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
.room-icon { width: 44px; height: 44px; border-radius: var(--border-radius-md); background: var(--gray-50); display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: var(--font-size-lg); flex-shrink: 0; }
.room-info { flex: 1; }
.room-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); margin-bottom: 2px; }
.room-desc { font-size: var(--font-size-xs); color: var(--gray-500); }
.room-price { font-weight: var(--font-weight-bold); color: var(--secondary); }

.availability-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--gray-100); }
.availability-bar .block { height: 100%; transition: width var(--transition-base); }
.availability-bar .block.available { background: var(--success); }
.availability-bar .block.booked { background: var(--primary); }
.availability-bar .block.blocked { background: var(--gray-300); }

.booking-summary { background: var(--gray-50); border-radius: var(--border-radius-xl); padding: var(--spacing-5); }
.booking-summary-row { display: flex; justify-content: space-between; padding: var(--spacing-2) 0; font-size: var(--font-size-sm); }
.booking-summary-row.total { border-top: var(--border-width) solid var(--border-color); margin-top: var(--spacing-2); padding-top: var(--spacing-3); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); }

.policy-card { padding: var(--spacing-4); border-left: 3px solid var(--gray-300); margin-bottom: var(--spacing-3); }
.policy-card:first-of-type { border-left-color: var(--success); }
.policy-card:nth-of-type(2) { border-left-color: var(--warning); }
.policy-card:nth-of-type(3) { border-left-color: var(--danger); }
.policy-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); margin-bottom: var(--spacing-1); }
.policy-text { font-size: var(--font-size-sm); color: var(--gray-600); }

.neighborhood-card { position: relative; border-radius: var(--border-radius-xl); overflow: hidden; cursor: pointer; }
.neighborhood-card img { width: 100%; height: 200px; object-fit: cover; transition: transform var(--transition-slow); }
.neighborhood-card:hover img { transform: scale(1.05); }
.neighborhood-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%); }
.neighborhood-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--spacing-5); color: var(--white); }
.neighborhood-card-content h5 { color: var(--white); margin-bottom: var(--spacing-1); }
.neighborhood-card-content p { color: rgba(255,255,255,0.8); font-size: var(--font-size-sm); margin-bottom: 0; }

.profile-header { position: relative; padding-top: 80px; }
.profile-cover { position: absolute; top: 0; left: 0; right: 0; height: 200px; overflow: hidden; border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl); }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar { position: relative; z-index: 1; display: flex; justify-content: center; margin-bottom: var(--spacing-4); }
.profile-avatar .avatar { width: 120px; height: 120px; border: 4px solid var(--white); box-shadow: var(--shadow-md); }
.profile-info { text-align: center; }
.profile-name { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-1); }
.profile-meta { display: flex; justify-content: center; gap: var(--spacing-4); font-size: var(--font-size-sm); color: var(--gray-500); margin-bottom: var(--spacing-4); }
.profile-actions { display: flex; justify-content: center; gap: var(--spacing-3); }

.faq-item { border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); margin-bottom: var(--spacing-3); overflow: hidden; }
.faq-question { padding: var(--spacing-4) var(--spacing-5); background: var(--white); font-weight: var(--font-weight-medium); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background var(--transition-fast); }
.faq-question:hover { background: var(--gray-50); }
.faq-question i { transition: transform var(--transition-fast); font-size: var(--font-size-sm); color: var(--gray-400); }
.faq-question.open i { transform: rotate(180deg); }
.faq-answer { padding: 0 var(--spacing-5); max-height: 0; overflow: hidden; transition: all var(--transition-base); }
.faq-answer.open { padding: var(--spacing-4) var(--spacing-5); max-height: 500px; }
.faq-answer p { margin-bottom: 0; font-size: var(--font-size-sm); color: var(--gray-600); }

.referral-card { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); border-radius: var(--border-radius-xl); padding: var(--spacing-6); text-align: center; }
.referral-card h4 { color: var(--white); margin-bottom: var(--spacing-3); }
.referral-card p { color: rgba(255,255,255,0.8); margin-bottom: var(--spacing-4); }
.referral-code { display: inline-flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-6); background: rgba(255,255,255,0.2); border-radius: var(--border-radius-md); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: 2px; margin-bottom: var(--spacing-4); cursor: pointer; transition: background var(--transition-fast); }
.referral-code:hover { background: rgba(255,255,255,0.3); }
.referral-code i { font-size: var(--font-size-base); opacity: 0.8; }

.invoice { background: var(--white); border-radius: var(--border-radius-xl); padding: var(--spacing-6); }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-6); padding-bottom: var(--spacing-4); border-bottom: 2px solid var(--border-color); }
.invoice-logo { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--primary); }
.invoice-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--secondary); }
.invoice-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.invoice-detail-label { font-size: var(--font-size-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; }
.invoice-detail-value { font-weight: var(--font-weight-semibold); }
.invoice-table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-6); }
.invoice-table th { padding: var(--spacing-3) var(--spacing-4); font-size: var(--font-size-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--border-color); text-align: left; }
.invoice-table td { padding: var(--spacing-3) var(--spacing-4); border-bottom: var(--border-width) solid var(--border-color); }
.invoice-total { text-align: right; padding-top: var(--spacing-4); border-top: 2px solid var(--border-color); }
.invoice-total-row { display: flex; justify-content: flex-end; gap: var(--spacing-8); margin-bottom: var(--spacing-2); font-size: var(--font-size-sm); }
.invoice-total-row.grand { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); border-top: var(--border-width) solid var(--border-color); padding-top: var(--spacing-3); }

.announcement-bar { background: var(--secondary); color: var(--white); text-align: center; padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-sm); position: relative; }
.announcement-bar a { color: var(--white); text-decoration: underline; }
.announcement-bar .close-announcement { position: absolute; right: var(--spacing-4); top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: var(--font-size-sm); }

.social-proof { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); background: var(--gray-50); border-radius: var(--border-radius-lg); }
.social-proof-avatars { display: flex; }
.social-proof-avatars .avatar { width: 28px; height: 28px; border: 2px solid var(--white); margin-right: -8px; }
.social-proof-avatars .avatar:last-child { margin-right: 0; }
.social-proof-text { font-size: var(--font-size-sm); color: var(--gray-600); }
.social-proof-text strong { color: var(--secondary); }

.toggle-container { display: flex; background: var(--gray-50); border-radius: var(--border-radius-full); padding: 3px; }
.toggle-option { padding: var(--spacing-2) var(--spacing-4); border-radius: var(--border-radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); color: var(--gray-500); border: none; background: none; }
.toggle-option:hover { color: var(--secondary); }
.toggle-option.active { background: var(--white); color: var(--secondary); box-shadow: var(--shadow-sm); }

.breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 var(--spacing-4); list-style: none; font-size: var(--font-size-sm); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 var(--spacing-2); color: var(--gray-400); }
.breadcrumb-item a { color: var(--gray-500); }
.breadcrumb-item a:hover { color: var(--secondary); }
.breadcrumb-item.active { color: var(--gray-700); }

.page-numbers { display: flex; justify-content: center; gap: var(--spacing-2); margin-top: var(--spacing-8); }
.page-number { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-full); border: var(--border-width) solid var(--border-color); color: var(--secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); }
.page-number:hover { border-color: var(--secondary); }
.page-number.active { background: var(--secondary); border-color: var(--secondary); color: var(--white); }
.page-number.disabled { opacity: 0.4; cursor: not-allowed; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.tag-cloud-item { padding: var(--spacing-1) var(--spacing-3); background: var(--gray-50); border-radius: var(--border-radius-full); font-size: var(--font-size-xs); color: var(--gray-600); cursor: pointer; transition: all var(--transition-fast); }
.tag-cloud-item:hover { background: var(--primary); color: var(--white); }

.mega-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl); box-shadow: var(--shadow-xl); padding: var(--spacing-6); display: none; z-index: var(--z-dropdown); }
.mega-menu.show { display: block; }
.mega-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-6); }
.mega-menu-col h6 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-3); color: var(--gray-500); }
.mega-menu-col a { display: block; padding: var(--spacing-1) 0; font-size: var(--font-size-sm); color: var(--gray-700); }
.mega-menu-col a:hover { color: var(--primary); }

.feature-spotlight { display: flex; align-items: center; gap: var(--spacing-6); padding: var(--spacing-8) 0; }
.feature-spotlight.reverse { flex-direction: row-reverse; }
.feature-spotlight-image { flex: 1; border-radius: var(--border-radius-2xl); overflow: hidden; }
.feature-spotlight-image img { width: 100%; height: 400px; object-fit: cover; }
.feature-spotlight-content { flex: 1; }
.feature-spotlight-content h2 { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-4); }
.feature-spotlight-content p { font-size: var(--font-size-lg); color: var(--gray-600); line-height: 1.7; }
.feature-spotlight-content .feature-list { list-style: none; padding: 0; margin: var(--spacing-6) 0; }
.feature-spotlight-content .feature-list li { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-2) 0; font-size: var(--font-size-base); }
.feature-spotlight-content .feature-list li i { color: var(--success); }

.trust-badge { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); background: var(--gray-50); border-radius: var(--border-radius-full); font-size: var(--font-size-sm); color: var(--gray-600); }
.trust-badge i { color: var(--success); }

.partner-logos { display: flex; align-items: center; justify-content: center; gap: var(--spacing-8); flex-wrap: wrap; padding: var(--spacing-8) 0; opacity: 0.5; }
.partner-logo { height: 32px; filter: grayscale(1); transition: all var(--transition-fast); }
.partner-logo:hover { filter: grayscale(0); opacity: 1; }

.news-card { position: relative; border-radius: var(--border-radius-xl); overflow: hidden; background: var(--white); border: var(--border-width) solid var(--border-color); transition: all var(--transition-base); }
.news-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.news-card-image { height: 200px; overflow: hidden; }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.news-card:hover .news-card-image img { transform: scale(1.05); }
.news-card-body { padding: var(--spacing-5); }
.news-card-date { font-size: var(--font-size-xs); color: var(--gray-500); margin-bottom: var(--spacing-2); }
.news-card-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-2); line-height: 1.4; }
.news-card-excerpt { font-size: var(--font-size-sm); color: var(--gray-600); margin-bottom: var(--spacing-3); line-height: 1.6; }
.news-card-link { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--primary); }

.masonry-grid { column-count: 3; column-gap: var(--spacing-4); }
.masonry-item { break-inside: avoid; margin-bottom: var(--spacing-4); border-radius: var(--border-radius-xl); overflow: hidden; }
.masonry-item img { width: 100%; display: block; }

@media (max-width: 991.98px) {
  .masonry-grid { column-count: 2; }
  .feature-spotlight, .feature-spotlight.reverse { flex-direction: column; }
  .mega-menu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .masonry-grid { column-count: 1; }
  .mega-menu-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   36. PRINT-FRIENDLY BOOKING CONFIRMATION
   ============================================================ */

.confirmation-hero { text-align: center; padding: var(--spacing-12) var(--spacing-4); background: linear-gradient(135deg, var(--success-light) 0%, var(--white) 100%); border-radius: var(--border-radius-2xl); margin-bottom: var(--spacing-8); }
.confirmation-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--success); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl); margin: 0 auto var(--spacing-4); }
.confirmation-code { font-size: var(--font-size-sm); color: var(--gray-500); margin-bottom: var(--spacing-2); }
.confirmation-code span { font-weight: var(--font-weight-bold); color: var(--secondary); font-size: var(--font-size-lg); letter-spacing: 2px; }
.confirmation-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-4); margin: var(--spacing-8) 0; }
.confirmation-detail { padding: var(--spacing-4); background: var(--gray-50); border-radius: var(--border-radius-lg); }
.confirmation-detail-label { font-size: var(--font-size-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-1); }
.confirmation-detail-value { font-weight: var(--font-weight-semibold); color: var(--secondary); }

.verification-code { display: flex; justify-content: center; gap: var(--spacing-3); margin: var(--spacing-6) 0; }
.verification-digit { width: 48px; height: 56px; text-align: center; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); outline: none; transition: border-color var(--transition-fast); }
.verification-digit:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); }

/* ============================================================
   END OF STYLESHEET
   ============================================================ */
/* ============================================================
   37. AUTHENTICATION FORM STYLES
   ============================================================ */

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--spacing-6); background: var(--gray-50); }
.auth-card { background: var(--white); border-radius: var(--border-radius-2xl); box-shadow: var(--shadow-lg); padding: var(--spacing-8); width: 100%; max-width: 440px; }
.auth-card-header { text-align: center; margin-bottom: var(--spacing-6); }
.auth-card-header .auth-logo { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--primary); margin-bottom: var(--spacing-2); }
.auth-card-header h1 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-2); }
.auth-card-header p { color: var(--gray-500); margin-bottom: 0; }
.auth-divider { display: flex; align-items: center; gap: var(--spacing-4); margin: var(--spacing-6) 0; color: var(--gray-400); font-size: var(--font-size-sm); }
.auth-divider::before, .auth-divider::after { flex: 1; content: ""; height: 1px; background: var(--border-color); }
.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3); margin-bottom: var(--spacing-6); }
.auth-footer { text-align: center; margin-top: var(--spacing-6); padding-top: var(--spacing-4); border-top: var(--border-width) solid var(--border-color); font-size: var(--font-size-sm); color: var(--gray-500); }
.auth-footer a { font-weight: var(--font-weight-semibold); }
.auth-checkbox-group { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-4); font-size: var(--font-size-sm); }

.onboarding-step { display: none; }
.onboarding-step.active { display: block; animation: fadeInUp 0.4s ease; }
.onboarding-progress-steps { display: flex; justify-content: center; gap: var(--spacing-2); margin-bottom: var(--spacing-8); }
.onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200); transition: all var(--transition-fast); }
.onboarding-dot.active { background: var(--primary); width: 24px; border-radius: 4px; }
.onboarding-dot.completed { background: var(--success); }

.two-factor-setup { text-align: center; }
.two-factor-qr { display: inline-block; padding: var(--spacing-4); background: var(--white); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); margin-bottom: var(--spacing-4); }
.two-factor-secret { font-family: monospace; font-size: var(--font-size-sm); color: var(--gray-500); background: var(--gray-50); padding: var(--spacing-2) var(--spacing-4); border-radius: var(--border-radius-md); display: inline-block; letter-spacing: 2px; }

/* ============================================================
   38. SEARCH RESULTS PAGE
   ============================================================ */

.search-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-4); flex-wrap: wrap; gap: var(--spacing-3); }
.search-results-count { font-size: var(--font-size-sm); color: var(--gray-600); }
.search-results-count strong { color: var(--secondary); }
.search-results-toolbar { display: flex; align-items: center; gap: var(--spacing-3); }
.search-results-map-toggle { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-full); background: var(--white); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); }
.search-results-map-toggle:hover { border-color: var(--secondary); }
.search-results-map-toggle.active { background: var(--secondary); color: var(--white); border-color: var(--secondary); }

.search-map-panel { position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); }
.search-map-panel .map-container { height: 100%; border-radius: 0; }

.split-view { display: flex; gap: 0; }
.split-view-list { flex: 1; padding: var(--spacing-4); overflow-y: auto; height: calc(100vh - var(--header-height)); }
.split-view-map { width: 50%; position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); }

@media (max-width: 991.98px) {
  .split-view { flex-direction: column; }
  .split-view-map { width: 100%; height: 300px; position: relative; top: 0; }
  .split-view-list { height: auto; }
}

/* ============================================================
   39. HOST DASHBOARD EXTENSIONS
   ============================================================ */

.host-earnings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); padding: var(--spacing-6); background: linear-gradient(135deg, var(--secondary) 0%, var(--gray-800) 100%); border-radius: var(--border-radius-xl); color: var(--white); margin-bottom: var(--spacing-6); }
.host-earnings-item { text-align: center; }
.host-earnings-item:not(:last-child) { border-right: var(--border-width) solid rgba(255,255,255,0.15); }
.host-earnings-label { font-size: var(--font-size-xs); color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-1); }
.host-earnings-value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }
.host-earnings-change { font-size: var(--font-size-xs); margin-top: var(--spacing-1); }
.host-earnings-change.up { color: var(--success); }
.host-earnings-change.down { color: var(--danger); }

.calendar-view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-4); }
.calendar-view-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); overflow: hidden; }
.calendar-view-cell { min-height: 100px; padding: var(--spacing-2); border-right: var(--border-width) solid var(--border-color); border-bottom: var(--border-width) solid var(--border-color); font-size: var(--font-size-sm); }
.calendar-view-cell:nth-child(7n) { border-right: none; }
.calendar-view-cell-header { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-1); font-size: var(--font-size-xs); }
.calendar-view-cell.available { background: rgba(var(--success-rgb), 0.05); }
.calendar-view-cell.booked { background: rgba(var(--primary-rgb), 0.08); }
.calendar-view-cell.blocked { background: var(--gray-50); }
.calendar-view-event { padding: 2px var(--spacing-1); font-size: 10px; border-radius: 2px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.calendar-view-event.booked { background: var(--primary); color: var(--white); }

.listing-manager-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-6); }
.listing-manager-stats { display: flex; gap: var(--spacing-6); }
.listing-manager-stat { text-align: center; }
.listing-manager-stat-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--secondary); display: block; }
.listing-manager-stat-label { font-size: var(--font-size-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-3); }
.photo-grid-item { position: relative; border-radius: var(--border-radius-lg); overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid-item-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); }
.photo-grid-item:hover .photo-grid-item-overlay { opacity: 1; }
.photo-grid-item-overlay button { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--secondary); transition: all var(--transition-fast); }
.photo-grid-item-overlay button:hover { background: var(--white); transform: scale(1.1); }
.photo-grid-item.primary { grid-column: span 2; grid-row: span 2; }
.photo-grid-item.primary::after { content: "Cover"; position: absolute; bottom: var(--spacing-2); left: var(--spacing-2); padding: 2px var(--spacing-2); background: var(--primary); color: var(--white); font-size: 10px; border-radius: var(--border-radius-sm); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; }

.review-card { padding: var(--spacing-5); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); margin-bottom: var(--spacing-4); transition: all var(--transition-fast); }
.review-card:hover { box-shadow: var(--shadow-sm); }
.review-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-3); }
.review-card-user { display: flex; align-items: center; gap: var(--spacing-3); }
.review-card-user-info h6 { margin-bottom: 0; font-size: var(--font-size-sm); }
.review-card-user-info span { font-size: var(--font-size-xs); color: var(--gray-500); }
.review-card-rating { color: var(--star-color); font-size: var(--font-size-sm); }
.review-card-text { font-size: var(--font-size-sm); color: var(--gray-600); line-height: 1.6; margin-bottom: var(--spacing-3); }
.review-card-images { display: flex; gap: var(--spacing-2); flex-wrap: wrap; }
.review-card-images img { width: 64px; height: 64px; border-radius: var(--border-radius-md); object-fit: cover; cursor: pointer; transition: transform var(--transition-fast); }
.review-card-images img:hover { transform: scale(1.05); }
.review-card-actions { display: flex; gap: var(--spacing-3); margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: var(--border-width) solid var(--border-color); }
.review-card-actions button { font-size: var(--font-size-sm); color: var(--gray-500); background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-1); padding: 0; transition: color var(--transition-fast); }
.review-card-actions button:hover { color: var(--primary); }
.review-card-actions button.liked { color: var(--primary); }
.review-card-actions button.liked i { font-weight: 900; }

.inbox-item { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-4); border-bottom: var(--border-width) solid var(--border-color); cursor: pointer; transition: background var(--transition-fast); }
.inbox-item:hover { background: var(--gray-50); }
.inbox-item.unread { background: rgba(var(--primary-rgb), 0.03); }
.inbox-item.unread .inbox-item-subject { font-weight: var(--font-weight-semibold); }
.inbox-item-avatar { position: relative; flex-shrink: 0; }
.inbox-item-avatar .avatar { width: 48px; height: 48px; }
.inbox-item-avatar .status-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border: 2px solid var(--white); }
.inbox-item-content { flex: 1; min-width: 0; }
.inbox-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.inbox-item-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.inbox-item-time { font-size: var(--font-size-xs); color: var(--gray-400); }
.inbox-item-subject { font-size: var(--font-size-sm); color: var(--secondary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item-preview { font-size: var(--font-size-xs); color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.message-thread { max-height: 500px; overflow-y: auto; padding: var(--spacing-4); }
.message-thread-item { display: flex; gap: var(--spacing-3); margin-bottom: var(--spacing-4); }
.message-thread-item.sent { flex-direction: row-reverse; }
.message-thread-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.message-thread-bubble { max-width: 70%; padding: var(--spacing-3) var(--spacing-4); border-radius: var(--border-radius-xl); font-size: var(--font-size-sm); line-height: 1.5; }
.message-thread-item.sent .message-thread-bubble { background: var(--primary); color: var(--white); border-bottom-right-radius: 4px; }
.message-thread-item.received .message-thread-bubble { background: var(--gray-50); color: var(--secondary); border-bottom-left-radius: 4px; }
.message-thread-time { font-size: 10px; color: var(--gray-400); margin-top: var(--spacing-1); text-align: right; }
.message-composer { display: flex; gap: var(--spacing-3); padding: var(--spacing-4); border-top: var(--border-width) solid var(--border-color); }
.message-composer input { flex: 1; padding: var(--spacing-3) var(--spacing-4); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-full); font-size: var(--font-size-sm); outline: none; }
.message-composer input:focus { border-color: var(--primary); }

/* ============================================================
   40. MISC COMPONENTS
   ============================================================ */

.search-suggestion-chip { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); background: var(--gray-50); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-full); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); }
.search-suggestion-chip:hover { border-color: var(--secondary); background: var(--white); }
.search-suggestion-chip i { color: var(--gray-400); font-size: var(--font-size-xs); }

.gradient-text { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }

.country-phone-input { display: flex; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; }
.country-phone-input select { border: none; padding: 0.75rem 0.5rem; background: var(--gray-50); color: var(--secondary); font-size: var(--font-size-sm); outline: none; min-width: 80px; cursor: pointer; }
.country-phone-input input { flex: 1; border: none; padding: 0.75rem 1rem; font-size: var(--font-size-base); outline: none; }

.otp-input-group { display: flex; gap: var(--spacing-3); justify-content: center; }
.otp-input { width: 48px; height: 56px; text-align: center; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); outline: none; transition: border-color var(--transition-fast); }
.otp-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); }

.floating-notification { position: fixed; bottom: var(--spacing-8); left: 50%; transform: translateX(-50%); background: var(--secondary); color: var(--white); padding: var(--spacing-3) var(--spacing-6); border-radius: var(--border-radius-full); font-size: var(--font-size-sm); box-shadow: var(--shadow-lg); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--spacing-3); animation: fadeInUp var(--transition-base) ease; }
.floating-notification-action { padding: var(--spacing-1) var(--spacing-3); background: rgba(255,255,255,0.2); border-radius: var(--border-radius-full); font-weight: var(--font-weight-semibold); cursor: pointer; font-size: var(--font-size-xs); transition: background var(--transition-fast); }
.floating-notification-action:hover { background: rgba(255,255,255,0.3); }
.floating-notification-close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; padding: 0; font-size: var(--font-size-sm); }

.expandable-text { position: relative; overflow: hidden; }
.expandable-text.collapsed { max-height: 60px; }
.expandable-text-toggle { display: inline-block; margin-top: var(--spacing-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--secondary); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; }

.mini-card { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); transition: all var(--transition-fast); cursor: pointer; }
.mini-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
.mini-card-image { width: 56px; height: 56px; border-radius: var(--border-radius-md); object-fit: cover; flex-shrink: 0; }
.mini-card-info { flex: 1; min-width: 0; }
.mini-card-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card-subtitle { font-size: var(--font-size-xs); color: var(--gray-500); }
.mini-card-price { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--secondary); white-space: nowrap; }

.hero-animated { position: relative; overflow: hidden; }
.hero-animated-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary) 0%, #6B2FA0 50%, #2D7FE0 100%); background-size: 400% 400%; animation: gradient-shift 8s ease infinite; z-index: 0; }
.hero-animated-content { position: relative; z-index: 1; }
.hero-animated-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.05); z-index: 0; }
.hero-animated-shape:nth-child(1) { width: 300px; height: 300px; top: -80px; left: -80px; }
.hero-animated-shape:nth-child(2) { width: 200px; height: 200px; bottom: -40px; right: -40px; }
.hero-animated-shape:nth-child(3) { width: 150px; height: 150px; top: 50%; right: 10%; }

.notification-banner { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-4); border-radius: var(--border-radius-lg); margin-bottom: var(--spacing-4); }
.notification-banner.info { background: var(--info-light); border-left: 4px solid var(--info); }
.notification-banner.warning { background: var(--warning-light); border-left: 4px solid var(--warning); }
.notification-banner.error { background: var(--danger-light); border-left: 4px solid var(--danger); }
.notification-banner.success { background: var(--success-light); border-left: 4px solid var(--success); }
.notification-banner-icon { font-size: var(--font-size-xl); flex-shrink: 0; }
.notification-banner.info .notification-banner-icon { color: var(--info); }
.notification-banner.warning .notification-banner-icon { color: #B38600; }
.notification-banner.error .notification-banner-icon { color: var(--danger); }
.notification-banner.success .notification-banner-icon { color: var(--success); }
.notification-banner-content { flex: 1; }
.notification-banner-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); margin-bottom: 2px; }
.notification-banner-text { font-size: var(--font-size-sm); color: var(--gray-600); margin-bottom: 0; }
.notification-banner-close { background: none; border: none; cursor: pointer; color: var(--gray-400); padding: var(--spacing-1); font-size: var(--font-size-sm); }

.booking-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-8); padding: 0 var(--spacing-4); }
.booking-progress-step { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); position: relative; }
.booking-progress-number { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--gray-300); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--gray-400); background: var(--white); }
.booking-progress-step.completed .booking-progress-number { background: var(--success); border-color: var(--success); color: var(--white); }
.booking-progress-step.active .booking-progress-number { background: var(--primary); border-color: var(--primary); color: var(--white); }
.booking-progress-label { font-size: var(--font-size-xs); color: var(--gray-500); }
.booking-progress-step.active .booking-progress-label { color: var(--secondary); font-weight: var(--font-weight-semibold); }
.booking-progress-line { flex: 1; height: 2px; background: var(--gray-200); margin: 0 var(--spacing-2); align-self: center; margin-bottom: var(--spacing-6); }
.booking-progress-line.done { background: var(--success); }

.search-highlight { background: #FFF176; padding: 0 2px; border-radius: 2px; }

.page-loader { position: fixed; inset: 0; background: var(--white); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.3s ease; }
.page-loader.hidden { opacity: 0; pointer-events: none; }
.page-loader-spinner { width: 48px; height: 48px; border: 3px solid var(--gray-100); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }

.amount-input { display: flex; align-items: center; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; }
.amount-input button { width: 40px; height: 40px; border: none; background: var(--gray-50); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); color: var(--gray-600); transition: all var(--transition-fast); }
.amount-input button:hover { background: var(--gray-100); }
.amount-input input { width: 60px; text-align: center; border: none; border-left: var(--border-width) solid var(--border-color); border-right: var(--border-width) solid var(--border-color); padding: 0.5rem; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); outline: none; -moz-appearance: textfield; }
.amount-input input::-webkit-outer-spin-button, .amount-input input::-webkit-inner-spin-button { -webkit-appearance: none; }

.side-sheet { position: fixed; top: 0; right: -400px; width: 400px; height: 100%; background: var(--white); box-shadow: var(--shadow-xl); z-index: var(--z-modal); transition: right 0.3s ease; display: flex; flex-direction: column; }
.side-sheet.open { right: 0; }
.side-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-5); border-bottom: var(--border-width) solid var(--border-color); }
.side-sheet-body { flex: 1; overflow-y: auto; padding: var(--spacing-5); }
.side-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: calc(var(--z-modal) - 1); opacity: 0; visibility: hidden; transition: all var(--transition-base); }
.side-sheet-backdrop.show { opacity: 1; visibility: visible; }

@media (max-width: 575.98px) {
  .side-sheet { width: 100%; right: -100%; }
  .auth-page { padding: var(--spacing-4); }
  .auth-card { padding: var(--spacing-5); }
  .auth-social { grid-template-columns: 1fr; }
  .booking-progress { padding: 0; overflow-x: auto; }
  .host-earnings { grid-template-columns: 1fr; }
  .host-earnings-item:not(:last-child) { border-right: none; border-bottom: var(--border-width) solid rgba(255,255,255,0.15); padding-bottom: var(--spacing-4); }
}

/* ============================================================
   END OF STYLESHEET
   ============================================================ */
/* ============================================================
   41. EXTRA FORM ELEMENTS & STATES
   ============================================================ */

.form-floating { position: relative; }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { opacity: 0.65; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); }
.form-floating > label { position: absolute; top: 0; left: 0; height: 100%; padding: 1rem 0.75rem; pointer-events: none; border: 1px solid transparent; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; }

.input-group-sm > .form-control, .input-group-sm > .input-group-text { padding: 0.375rem 0.75rem; font-size: var(--font-size-sm); }
.input-group-lg > .form-control, .input-group-lg > .input-group-text { padding: 1rem 1.25rem; font-size: var(--font-size-lg); }

.form-control-color { width: 3rem; height: auto; padding: 0.375rem; }
.form-control-color::-webkit-color-swatch-wrapper { padding: 0; }
.form-control-color::-webkit-color-swatch { border: 0; border-radius: var(--border-radius-sm); }

.form-range { width: 100%; height: 1.5rem; padding: 0; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.form-range:focus { outline: 0; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--white), 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px var(--white), 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25); }
.form-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: var(--primary); border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -webkit-appearance: none; appearance: none; }
.form-range::-webkit-slider-thumb:active { background-color: var(--primary-light); }
.form-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: var(--gray-200); border-color: transparent; border-radius: 1rem; }
.form-range::-moz-range-thumb { width: 1rem; height: 1rem; background-color: var(--primary); border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -moz-appearance: none; appearance: none; }
.form-range::-moz-range-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: var(--gray-200); border-color: transparent; border-radius: 1rem; }

.form-check-inline { display: inline-block; margin-right: 1rem; }

.btn-check:checked + .btn-outline-primary { background-color: var(--primary); border-color: var(--primary); color: var(--white); }
.btn-check:checked + .btn-outline-secondary { background-color: var(--secondary); border-color: var(--secondary); color: var(--white); }

.form-label-group { position: relative; margin-bottom: var(--spacing-4); }
.form-label-group > .form-control { height: 3.5rem; padding: 1rem 0.75rem; }
.form-label-group > label { position: absolute; top: 0; left: 0; display: block; width: 100%; margin-bottom: 0; line-height: 1.5; color: var(--gray-500); border: 1px solid transparent; border-radius: 0.25rem; transition: all 0.1s ease-in-out; padding: 1rem 0.75rem; pointer-events: none; }

.input-with-icon { position: relative; }
.input-with-icon .form-control { padding-left: 2.5rem; }
.input-with-icon .input-icon { position: absolute; left: var(--spacing-4); top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }

.input-with-right-icon { position: relative; }
.input-with-right-icon .form-control { padding-right: 2.5rem; }
.input-with-right-icon .right-icon { position: absolute; right: var(--spacing-4); top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }

.btn-group .btn:first-child { border-radius: var(--border-radius-md) 0 0 var(--border-radius-md); }
.btn-group .btn:last-child { border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; }
.btn-group .btn:only-child { border-radius: var(--border-radius-md); }

.form-section { margin-bottom: var(--spacing-6); }
.form-section-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-2); border-bottom: var(--border-width) solid var(--border-color); }

.custom-checkbox-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--spacing-2); }
.custom-checkbox-item { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); cursor: pointer; transition: all var(--transition-fast); }
.custom-checkbox-item:hover { border-color: var(--primary); }
.custom-checkbox-item.checked { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.05); }
.custom-checkbox-item .check { width: 20px; height: 20px; border: 2px solid var(--gray-300); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); flex-shrink: 0; }
.custom-checkbox-item.checked .check { background: var(--primary); border-color: var(--primary); color: var(--white); font-size: 10px; }

.radio-button-group { display: flex; gap: var(--spacing-3); }
.radio-button { flex: 1; }
.radio-button input { display: none; }
.radio-button label { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); width: 100%; margin-bottom: 0; }
.radio-button input:checked + label { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.05); color: var(--primary); }

.tag-input { display: flex; flex-wrap: wrap; gap: var(--spacing-2); padding: var(--spacing-2); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); min-height: 44px; cursor: text; }
.tag-input-tag { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: 2px var(--spacing-2); background: var(--gray-100); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); }
.tag-input-tag .remove { cursor: pointer; font-size: 10px; color: var(--gray-500); }
.tag-input-tag .remove:hover { color: var(--danger); }
.tag-input input { flex: 1; border: none; outline: none; min-width: 80px; font-size: var(--font-size-sm); padding: 2px; background: transparent; }

.searchable-select { position: relative; }
.searchable-select input { width: 100%; padding: 0.75rem 1rem; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); font-size: var(--font-size-base); outline: none; cursor: pointer; }
.searchable-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); max-height: 200px; overflow-y: auto; z-index: var(--z-dropdown); display: none; }
.searchable-select-dropdown.show { display: block; }
.searchable-select-option { padding: var(--spacing-2) var(--spacing-4); cursor: pointer; transition: background var(--transition-fast); font-size: var(--font-size-sm); }
.searchable-select-option:hover, .searchable-select-option.highlighted { background: var(--gray-50); }
.searchable-select-option.selected { background: rgba(var(--primary-rgb), 0.05); color: var(--primary); font-weight: var(--font-weight-medium); }

.rich-text-editor { border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; }
.rich-text-toolbar { display: flex; gap: var(--spacing-1); padding: var(--spacing-2); background: var(--gray-50); border-bottom: var(--border-width) solid var(--border-color); flex-wrap: wrap; }
.rich-text-toolbar button { width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--border-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-600); transition: all var(--transition-fast); }
.rich-text-toolbar button:hover { background: var(--gray-200); }
.rich-text-toolbar button.active { background: var(--gray-200); color: var(--secondary); }
.rich-text-editor textarea, .rich-text-editor [contenteditable] { width: 100%; min-height: 150px; padding: var(--spacing-4); border: none; outline: none; font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; resize: vertical; }

/* ============================================================
   42. EXTRA DROPDOWN & TOOLTIP STYLES
   ============================================================ */

.dropdown-menu-end { right: 0; left: auto; }
.dropdown-menu-sm { min-width: 160px; }
.dropdown-menu-lg { min-width: 320px; }
.dropdown-menu-xl { min-width: 420px; }
.dropdown-menu-center { left: 50%; transform: translateX(-50%); }
.dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; }
.dropdown-toggle:empty::after { margin-left: 0; }
.dropdown-toggle-split::after { margin-left: 0; }

.dropdown-header-with-icon { display: flex; align-items: center; gap: var(--spacing-2); }
.dropdown-item i { width: 18px; color: var(--gray-400); }
.dropdown-item:hover i { color: var(--secondary); }
.dropdown-item-text { font-size: var(--font-size-xs); color: var(--gray-500); padding: var(--spacing-1) var(--spacing-4); }

.dropdown-menu-animated { animation: dropdownFadeIn 0.2s ease; }
@keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.tooltip-primary .tooltip-inner { background-color: var(--primary); }
.tooltip-primary.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--primary); }

.popover-header { background-color: var(--white); border-bottom: var(--border-width) solid var(--border-color); padding: var(--spacing-3) var(--spacing-4); font-weight: var(--font-weight-semibold); }
.popover-body { padding: var(--spacing-4); color: var(--gray-600); }

.menu-separator { display: flex; align-items: center; gap: var(--spacing-3); margin: var(--spacing-2) 0; color: var(--gray-400); font-size: var(--font-size-xs); }
.menu-separator::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

/* ============================================================
   43. RESPONSIVE DATA TABLES
   ============================================================ */

.table-responsive-stack { display: none; }

@media (max-width: 767.98px) {
  .table-responsive-stack { display: block; }
  .table-responsive-stack thead { display: none; }
  .table-responsive-stack tr { display: block; margin-bottom: var(--spacing-4); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); padding: var(--spacing-4); }
  .table-responsive-stack td { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-2) 0; border-bottom: var(--border-width) solid var(--border-color); }
  .table-responsive-stack td:last-child { border-bottom: none; }
  .table-responsive-stack td::before { content: attr(data-label); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; }
}

.data-card-view { display: none; }

@media (max-width: 767.98px) {
  .data-card-view { display: block; }
  .data-card-view .data-table { display: none; }
}

.data-card { background: var(--white); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); padding: var(--spacing-5); margin-bottom: var(--spacing-4); box-shadow: var(--shadow-card); }
.data-card-field { display: flex; justify-content: space-between; padding: var(--spacing-2) 0; border-bottom: var(--border-width) solid var(--gray-50); font-size: var(--font-size-sm); }
.data-card-field:last-child { border-bottom: none; }
.data-card-label { color: var(--gray-500); font-weight: var(--font-weight-medium); }
.data-card-value { font-weight: var(--font-weight-semibold); color: var(--secondary); text-align: right; }

/* ============================================================
   44. EXTRA SKELETON & LOADING
   ============================================================ */

.skeleton-table-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 80px; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); align-items: center; }
.skeleton-table-cell { height: 16px; border-radius: 4px; background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-shine) 50%, var(--skeleton-bg) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }

.skeleton-property-card { border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-xl); overflow: hidden; }
.skeleton-property-image { width: 100%; padding-top: 66.67%; background: var(--skeleton-bg); }
.skeleton-property-body { padding: var(--spacing-4); }
.skeleton-property-title { height: 18px; width: 70%; margin-bottom: var(--spacing-2); border-radius: 4px; background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-shine) 50%, var(--skeleton-bg) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-property-meta { height: 12px; width: 50%; margin-bottom: var(--spacing-3); border-radius: 4px; background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-shine) 50%, var(--skeleton-bg) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-property-price { height: 20px; width: 30%; border-radius: 4px; background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-shine) 50%, var(--skeleton-bg) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }

.skeleton-avatar-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--skeleton-bg); }
.skeleton-avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: var(--skeleton-bg); }

.loading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; z-index: 5; border-radius: inherit; }
.loading-overlay .spinner { width: 32px; height: 32px; }

.content-placeholder { padding: var(--spacing-8); text-align: center; }
.content-placeholder i { font-size: 3rem; color: var(--gray-300); margin-bottom: var(--spacing-3); }
.content-placeholder p { color: var(--gray-500); margin-bottom: 0; }

/* ============================================================
   END OF STYLESHEET
   ============================================================ */
/* ============================================================
   45. RESPONSIVE NAVIGATION EXTENSIONS
   ============================================================ */

.navbar-expand { flex-wrap: wrap; justify-content: space-between; }
.navbar-expand .navbar-nav { flex-direction: row; }
.navbar-expand .navbar-nav .nav-link { padding-right: var(--spacing-3); padding-left: var(--spacing-3); }
.navbar-expand .navbar-collapse { display: flex; flex-basis: auto; }
.navbar-expand .navbar-toggler { display: none; }

@media (max-width: 991.98px) {
  .navbar-expand .navbar-collapse { display: none; flex-basis: 100%; }
  .navbar-expand .navbar-collapse.show { display: block; }
  .navbar-expand .navbar-toggler { display: block; }
  .navbar-expand .navbar-nav { flex-direction: column; }
  .navbar-expand .navbar-nav .nav-link { padding: var(--spacing-3) 0; }
}

.navbar-search-mobile { display: none; padding: var(--spacing-3); }
@media (max-width: 767.98px) {
  .navbar-search-mobile { display: block; }
}

.nav-underline { display: flex; gap: var(--spacing-1); border-bottom: 2px solid var(--gray-100); padding: 0; }
.nav-underline .nav-item { margin-bottom: -2px; list-style: none; }
.nav-underline .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--gray-500); font-weight: var(--font-weight-medium); padding: var(--spacing-3) var(--spacing-4); transition: all var(--transition-fast); background: none; }
.nav-underline .nav-link:hover { color: var(--secondary); }
.nav-underline .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); }

.nav-scrollable { display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: var(--spacing-1); }
.nav-scrollable::-webkit-scrollbar { display: none; }
.nav-scrollable .nav-item { white-space: nowrap; flex-shrink: 0; }

.nav-pills-sm .nav-link { padding: var(--spacing-1) var(--spacing-3); font-size: var(--font-size-sm); }
.nav-pills-sm .nav-link.active { background-color: var(--primary); color: var(--white); }

.secondary-nav { background: var(--white); border-bottom: var(--border-width) solid var(--border-color); padding: 0; position: sticky; top: var(--header-height); z-index: calc(var(--z-sticky) - 1); }
.secondary-nav-inner { display: flex; align-items: center; gap: var(--spacing-4); height: 48px; overflow-x: auto; scrollbar-width: none; }
.secondary-nav-inner::-webkit-scrollbar { display: none; }
.secondary-nav-item { white-space: nowrap; font-size: var(--font-size-sm); color: var(--gray-600); cursor: pointer; padding: var(--spacing-2) 0; border-bottom: 2px solid transparent; transition: all var(--transition-fast); }
.secondary-nav-item:hover { color: var(--secondary); }
.secondary-nav-item.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--font-weight-medium); }

/* ============================================================
   46. DETAILED TAB STYLES
   ============================================================ */

.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

.tabs-modern { display: flex; background: var(--gray-50); border-radius: var(--border-radius-xl); padding: 4px; }
.tabs-modern .tab-item { flex: 1; text-align: center; padding: var(--spacing-2) var(--spacing-4); border-radius: var(--border-radius-lg); cursor: pointer; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--gray-500); transition: all var(--transition-fast); border: none; background: none; }
.tabs-modern .tab-item:hover { color: var(--secondary); }
.tabs-modern .tab-item.active { background: var(--white); color: var(--secondary); box-shadow: var(--shadow-sm); }

.tabs-vertical { display: flex; gap: 0; }
.tabs-vertical-nav { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 180px; border-right: var(--border-width) solid var(--border-color); padding-right: var(--spacing-4); }
.tabs-vertical-nav .tab-link { padding: var(--spacing-3) var(--spacing-4); border-radius: var(--border-radius-md); cursor: pointer; transition: all var(--transition-fast); font-size: var(--font-size-sm); color: var(--gray-600); border: none; background: none; text-align: left; }
.tabs-vertical-nav .tab-link:hover { background: var(--gray-50); color: var(--secondary); }
.tabs-vertical-nav .tab-link.active { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); font-weight: var(--font-weight-medium); }
.tabs-vertical-content { flex: 1; padding-left: var(--spacing-6); }

@media (max-width: 767.98px) {
  .tabs-vertical { flex-direction: column; }
  .tabs-vertical-nav { flex-direction: row; min-width: unset; border-right: none; border-bottom: var(--border-width) solid var(--border-color); padding-right: 0; padding-bottom: var(--spacing-3); overflow-x: auto; }
  .tabs-vertical-content { padding-left: 0; padding-top: var(--spacing-4); }
}

.tab-pane-fade { animation: fadeIn 0.3s ease; }

/* ============================================================
   47. SPACING & GAP EXTENDED
   ============================================================ */

.gap-0 { gap: 0; }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
.gap-10 { gap: var(--spacing-10); }
.gap-12 { gap: var(--spacing-12); }

.row-gap-1 { row-gap: var(--spacing-1); }
.row-gap-2 { row-gap: var(--spacing-2); }
.row-gap-3 { row-gap: var(--spacing-3); }
.row-gap-4 { row-gap: var(--spacing-4); }

.col-gap-1 { column-gap: var(--spacing-1); }
.col-gap-2 { column-gap: var(--spacing-2); }
.col-gap-3 { column-gap: var(--spacing-3); }
.col-gap-4 { column-gap: var(--spacing-4); }

.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }

/* ============================================================
   48. FLEXBOX GRID ALTERNATIVE
   ============================================================ */

.flex-grid { display: flex; flex-wrap: wrap; margin: calc(-1 * var(--spacing-3)); }
.flex-grid > * { padding: var(--spacing-3); }
.flex-grid-2 > * { width: 50%; }
.flex-grid-3 > * { width: 33.333%; }
.flex-grid-4 > * { width: 25%; }
.flex-grid-auto > * { flex: 1; min-width: 250px; }

@media (max-width: 991.98px) {
  .flex-grid-4 > * { width: 33.333%; }
  .flex-grid-3 > * { width: 50%; }
}

@media (max-width: 767.98px) {
  .flex-grid-4 > * { width: 50%; }
  .flex-grid-3 > * { width: 100%; }
  .flex-grid-2 > * { width: 100%; }
}

@media (max-width: 575.98px) {
  .flex-grid-4 > * { width: 100%; }
  .flex-grid-auto > * { min-width: 100%; }
}

/* ============================================================
   49. OBJECT FIT & ASPECT RATIOS
   ============================================================ */

.object-fit-contain { object-fit: contain; }
.object-fit-cover { object-fit: cover; }
.object-fit-fill { object-fit: fill; }
.object-fit-none { object-fit: none; }
.object-fit-scale-down { object-fit: scale-down; }
.object-position-top { object-position: top; }
.object-position-center { object-position: center; }
.object-position-bottom { object-position: bottom; }

.aspect-auto { aspect-ratio: auto; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-landscape { aspect-ratio: 4 / 3; }
.aspect-wide { aspect-ratio: 21 / 9; }
.aspect-ultrawide { aspect-ratio: 32 / 9; }

/* ============================================================
   50. OVERFLOW & TEXT WRAPPING
   ============================================================ */

.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-break { word-break: break-word !important; overflow-wrap: break-word !important; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.word-break-all { word-break: break-all; }
.word-break-keep { word-break: keep-all; }

.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   51. CURSOR UTILITIES
   ============================================================ */

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-zoom-in { cursor: zoom-in; }
.cursor-zoom-out { cursor: zoom-out; }
.cursor-crosshair { cursor: crosshair; }
.cursor-help { cursor: help; }

/* ============================================================
   52. FOCUS RING UTILITIES
   ============================================================ */

.focus-ring { outline: 2px solid var(--primary); outline-offset: 2px; }
.focus-ring-none:focus { outline: none; box-shadow: none; }
.focus-ring-primary:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.focus-ring-success:focus { outline: 2px solid var(--success); outline-offset: 2px; }
.focus-ring-warning:focus { outline: 2px solid var(--warning); outline-offset: 2px; }
.focus-ring-danger:focus { outline: 2px solid var(--danger); outline-offset: 2px; }

/* ============================================================
   53. BOX SHADOW EXTENDED
   ============================================================ */

.shadow-inner { box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); }
.shadow-soft { box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
.shadow-medium { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.shadow-hard { box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.shadow-left { box-shadow: -4px 0 15px rgba(0,0,0,0.08); }
.shadow-top { box-shadow: 0 -4px 15px rgba(0,0,0,0.08); }
.shadow-colored { box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.25); }
.shadow-success { box-shadow: 0 4px 14px rgba(var(--success-rgb), 0.25); }
.shadow-warning { box-shadow: 0 4px 14px rgba(var(--warning-rgb), 0.25); }

/* ============================================================
   54. BORDER RADIUS EXTENDED
   ============================================================ */

.rounded-top-0 { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-bottom-0 { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-start-0 { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-end-0 { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-top-xl { border-top-left-radius: var(--border-radius-xl); border-top-right-radius: var(--border-radius-xl); }
.rounded-bottom-xl { border-bottom-left-radius: var(--border-radius-xl); border-bottom-right-radius: var(--border-radius-xl); }
.rounded-top-lg { border-top-left-radius: var(--border-radius-lg); border-top-right-radius: var(--border-radius-lg); }
.rounded-bottom-lg { border-bottom-left-radius: var(--border-radius-lg); border-bottom-right-radius: var(--border-radius-lg); }

/* ============================================================
   55. Z-INDEX UTILITIES
   ============================================================ */

.z-negative { z-index: -1; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-500 { z-index: 500; }
.z-1000 { z-index: 1000; }
.z-9999 { z-index: 9999; }

/* ============================================================
   56. TRANSFORM UTILITIES
   ============================================================ */

.translate-0 { transform: translate(0); }
.translate-x-50 { transform: translateX(-50%); }
.translate-y-50 { transform: translateY(-50%); }
.translate-middle { transform: translate(-50%, -50%); }
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.scale-90 { transform: scale(0.9); }
.scale-100 { transform: scale(1); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }

/* ============================================================
   57. RESIZE UTILITIES
   ============================================================ */

.resize-none { resize: none; }
.resize-vertical { resize: vertical; }
.resize-horizontal { resize: horizontal; }
.resize-both { resize: both; }

/* ============================================================
   58. USER SELECT
   ============================================================ */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ============================================================
   59. POINTER EVENTS
   ============================================================ */

.events-none { pointer-events: none; }
.events-auto { pointer-events: auto; }

/* ============================================================
   60. BACKDROP FILTER
   ============================================================ */

.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* ============================================================
   61. MIXED UTILITIES
   ============================================================ */

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

.contents { display: contents; }
.hidden { display: none; }
.inline { display: inline; }
.table { display: table; }
.table-cell { display: table-cell; }
.table-row { display: table-row; }
.list-item { display: list-item; }

.isolate { isolation: isolate; }
.isolation-auto { isolation: auto; }

.break-before-page { break-before: page; }
.break-after-page { break-after: page; }
.break-inside-avoid { break-inside: avoid; }

.ordinal { font-variant-numeric: ordinal; }
.slashed-zero { font-variant-numeric: slashed-zero; }
.lining-nums { font-variant-numeric: lining-nums; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.proportional-nums { font-variant-numeric: proportional-nums; }

.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

/* ============================================================
   END OF STYLESHEET
   ============================================================ */
/* ============================================================
   62. MISC ELEMENTS
   ============================================================ */

kbd { padding: 2px 6px; font-size: var(--font-size-xs); color: var(--secondary); background-color: var(--gray-50); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-sm); box-shadow: inset 0 -1px 0 var(--border-color); font-family: monospace; }
mark { padding: 0.1em 0.3em; background: #FFF8E1; border-radius: 2px; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
blockquote { padding: var(--spacing-4) var(--spacing-6); border-left: 4px solid var(--primary); background: var(--gray-50); border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; margin: var(--spacing-4) 0; }
blockquote p { margin-bottom: 0; font-style: italic; }
code { padding: 2px 6px; font-size: 0.875em; background: var(--gray-50); border-radius: var(--border-radius-sm); color: var(--primary-dark); }
pre { padding: var(--spacing-4); background: var(--gray-900); color: var(--gray-200); border-radius: var(--border-radius-lg); overflow-x: auto; font-size: var(--font-size-sm); line-height: 1.6; }
figure { margin: 0; }
figcaption { font-size: var(--font-size-sm); color: var(--gray-500); text-align: center; margin-top: var(--spacing-2); }
dl { margin: 0; }
dt { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-1); }
dd { margin-bottom: var(--spacing-3); padding-left: var(--spacing-4); color: var(--gray-600); }
address { font-style: normal; margin-bottom: var(--spacing-4); }

.well { padding: var(--spacing-6); background: var(--gray-50); border-radius: var(--border-radius-xl); border: var(--border-width) solid var(--border-color); }
.well-sm { padding: var(--spacing-4); }
.well-lg { padding: var(--spacing-8); }

/* ============================================================
   END OF STYLESHEET - StayVerse Main Styles
   ============================================================ */