/*
Theme Name: Haven Coastal
Author: Havenvox
Author URI: https://havenvox.com/
Description: An editorial WordPress theme for hotels and event venues, designed and built by Havenvox. Thoughtful typography, immersive photography, and subtle motion create a cohesive presence, with responsive layouts and clear paths to room reservations, event inquiries, and newsletter signups.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: haven-theme
Domain Path: /languages
Tags: one-column, grid-layout, custom-menu, editor-style, featured-images, full-width-template, theme-options, wide-blocks

Haven Coastal, Copyright 2026 Havenvox
Haven Coastal is distributed under the terms of the GNU GPL v2 or later.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/

/* ==========================================================================
   TABLE OF CONTENTS - HAVEN THEME COMPREHENSIVE STYLE GUIDE
   ==========================================================================

   Shared styles for the Haven hospitality theme foundation.
   The current Bluffs Landing design uses the styles in assets/css/.

   1.0 - NORMALIZE & RESET
     1.1 - Normalize.css v8.0.1
     1.2 - Box Sizing Reset
     1.3 - Remove Default Margins

   2.0 - CSS CUSTOM PROPERTIES (DESIGN SYSTEM)
     2.1 - Primary Brand Colors
     2.2 - Secondary & Accent Colors
     2.3 - Neutral Palette (Gray Scale)
     2.4 - Semantic Colors
     2.5 - PMS Provider Status Colors
     2.6 - Overlay & Shadow Colors
     2.7 - Typography System
     2.8 - Spacing Scale
     2.9 - Layout Variables
     2.10 - Border Radius
     2.11 - Transitions & Animations
     2.12 - Z-Index Scale
     2.13 - Breakpoints

   3.0 - COLOR SCHEME SYSTEM (5 Themes)
     3.1 - Default Scheme (Blue & Orange)
     3.2 - Ocean Breeze (Teal & Coral)
     3.3 - Mountain Lodge (Forest & Earth)
     3.4 - Desert Sunset (Amber & Terracotta)
     3.5 - Arctic Luxe (Slate & Ice)

   4.0 - BASE TYPOGRAPHY
     4.1 - Font Face Imports
     4.2 - Body & Base Styles
     4.3 - Headings
     4.4 - Paragraphs & Text Elements
     4.5 - Links
     4.6 - Lists
     4.7 - Code & Pre
     4.8 - Blockquotes
     4.9 - Tables

   5.0 - LAYOUT FOUNDATIONS
     5.1 - Container System
     5.2 - Grid System
     5.3 - Flexbox Layouts
     5.4 - Section Spacing
     5.5 - Wrapper Classes

   6.0 - ACCESSIBILITY (WCAG 2.1 AA)
     6.1 - Skip Links
     6.2 - Screen Reader Only Text
     6.3 - Focus Styles
     6.4 - Keyboard Navigation
     6.5 - Reduced Motion
     6.6 - High Contrast Support
     6.7 - ARIA States

   7.0 - WORDPRESS CORE STYLES
     7.1 - Alignment Classes
     7.2 - Caption Classes
     7.3 - Gallery Classes
     7.4 - WordPress Embeds
     7.5 - Post Formats
     7.6 - Sticky Posts
     7.7 - Post Navigation
     7.8 - Comment Styles

   8.0 - GUTENBERG BLOCKS (40+ Core Blocks)
     8.1 - Common Blocks
     8.2 - Formatting Blocks
     8.3 - Layout Blocks
     8.4 - Widget Blocks
     8.5 - Theme Blocks
     8.6 - Embed Blocks
     8.7 - Block Alignment & Spacing
     8.8 - Block Editor Styles

   9.0 - HAVEN CUSTOM BLOCKS (20+ Property Blocks)
     9.1 - Property Card Block
     9.2 - Property Grid Block
     9.3 - Property List Block
     9.4 - Property Search Block
     9.5 - Property Filter Block
     9.6 - Booking Form Block
     9.7 - Availability Calendar Block
     9.8 - Pricing Display Block
     9.9 - Review System Block
     9.10 - Host Profile Block
     9.11 - Amenities List Block
     9.12 - Property Gallery Block
     9.13 - Location Map Block
     9.14 - Similar Properties Block
     9.15 - Property Comparison Block
     9.16 - Booking Summary Block
     9.17 - Guest Selector Block
     9.18 - Seasonal Pricing Block
     9.19 - Property Stats Block
     9.20 - Trust Badges Block

   10.0 - UTILITY CLASSES (250+ Utilities)
     10.1 - Display Utilities
     10.2 - Flexbox Utilities
     10.3 - Grid Utilities
     10.4 - Spacing Utilities (Margin & Padding)
     10.5 - Width & Height Utilities
     10.6 - Typography Utilities
     10.7 - Color Utilities
     10.8 - Background Utilities
     10.9 - Border Utilities
     10.10 - Border Radius Utilities
     10.11 - Shadow Utilities
     10.12 - Position Utilities
     10.13 - Overflow Utilities
     10.14 - Visibility Utilities
     10.15 - Z-Index Utilities
     10.16 - Cursor Utilities
     10.17 - Animation Utilities
     10.18 - Transform Utilities
     10.19 - Opacity Utilities
     10.20 - Pointer Events Utilities

   11.0 - COMPONENT LIBRARY (60+ Components)
     11.1 - Buttons (12 Variants, 5 Sizes)
     11.2 - Forms & Inputs
     11.3 - Cards & Containers
     11.4 - Badges & Labels
     11.5 - Alerts & Notifications
     11.6 - Modals & Dialogs
     11.7 - Tooltips & Popovers
     11.8 - Dropdowns & Menus
     11.9 - Tabs & Accordions
     11.10 - Progress Bars & Loaders
     11.11 - Pagination
     11.12 - Breadcrumbs
     11.13 - Avatars & Images
     11.14 - Icons & Symbols
     11.15 - Dividers & Separators

   12.0 - VACATION RENTAL COMPONENTS
     12.1 - Property Cards
     12.2 - Property Grid Layouts
     12.3 - Property List Layouts
     12.4 - Booking Forms
     12.5 - Availability Calendars
     12.6 - Date Pickers
     12.7 - Guest Selectors
     12.8 - Pricing Displays
     12.9 - Seasonal Pricing
     12.10 - Review Systems
     12.11 - Rating Stars
     12.12 - Host Profiles
     12.13 - Amenities Lists
     12.14 - Property Galleries
     12.15 - Image Lightbox
     12.16 - Location Maps
     12.17 - Nearby Attractions
     12.18 - Property Search
     12.19 - Advanced Filters
     12.20 - Sort Controls
     12.21 - Comparison Tables
     12.22 - Booking Summary
     12.23 - Reservation Details
     12.24 - Cancellation Policies
     12.25 - House Rules
     12.26 - Trust Badges
     12.27 - Property Stats
     12.28 - Occupancy Indicators

   13.0 - HAVEN ECOSYSTEM INTEGRATION
     13.1 - Booking Engine Components
     13.2 - Streamline Connector Components
     13.3 - PMS Sync Status Indicators
     13.4 - Connection Status Displays
     13.5 - Webhook Notifications
     13.6 - Sync Dashboard
     13.7 - Resort Showcase
     13.8 - Multi-Property Management
     13.9 - Analytics Pro Dashboard
     13.10 - Chart & Graph Styling
     13.11 - Revenue Metrics
     13.12 - Performance Indicators
     13.13 - Report Interfaces
     13.14 - Provider-Agnostic Displays

   14.0 - HEADER & NAVIGATION
     14.1 - Main Header
     14.2 - Logo & Branding
     14.3 - Primary Navigation
     14.4 - Mobile Navigation
     14.5 - Mega Menu
     14.6 - Dropdown Menus
     14.7 - Search Header
     14.8 - Sticky Header
     14.9 - Header Variants
     14.10 - Top Bar

   15.0 - FOOTER
     15.1 - Main Footer
     15.2 - Footer Widgets
     15.3 - Footer Navigation
     15.4 - Social Media Links
     15.5 - Newsletter Signup
     15.6 - Copyright & Legal
     15.7 - Back to Top Button
     15.8 - Footer Variants

   16.0 - SIDEBAR & WIDGETS
     16.1 - Primary Sidebar
     16.2 - Secondary Sidebar
     16.3 - Widget Containers
     16.4 - Search Widget
     16.5 - Categories Widget
     16.6 - Recent Posts Widget
     16.7 - Tag Cloud Widget
     16.8 - Calendar Widget
     16.9 - Archives Widget
     16.10 - Custom Widgets

   17.0 - BLOG & ARCHIVE LAYOUTS
     17.1 - Blog Grid Layout
     17.2 - Blog List Layout
     17.3 - Post Cards
     17.4 - Post Meta
     17.5 - Featured Images
     17.6 - Excerpt Styling
     17.7 - Read More Links
     17.8 - Category Archives
     17.9 - Tag Archives
     17.10 - Date Archives
     17.11 - Author Archives

   18.0 - SINGLE POST & PAGE
     18.1 - Post Header
     18.2 - Post Content
     18.3 - Post Footer
     18.4 - Author Bio Box
     18.5 - Social Sharing
     18.6 - Related Posts
     18.7 - Post Navigation
     18.8 - Comment Section
     18.9 - Page Templates
     18.10 - Full Width Template

   19.0 - COMMENTS SYSTEM
     19.1 - Comment List
     19.2 - Comment Form
     19.3 - Comment Meta
     19.4 - Comment Author
     19.5 - Comment Avatars
     19.6 - Reply Links
     19.7 - Comment Pagination
     19.8 - Pingbacks & Trackbacks

   20.0 - SEARCH & 404
     20.1 - Search Results Page
     20.2 - Search Form
     20.3 - No Results Message
     20.4 - 404 Error Page
     20.5 - Helpful Links
     20.6 - Search Suggestions

   21.0 - PLUGIN INTEGRATIONS
     21.1 - WooCommerce Complete
     21.2 - Contact Form 7
     21.3 - WPForms
     21.4 - Gravity Forms
     21.5 - Yoast SEO
     21.6 - Rank Math SEO
     21.7 - WPML & Polylang
     21.8 - Google Maps
     21.9 - Social Login
     21.10 - Payment Gateways

   22.0 - RESPONSIVE DESIGN (8+ Breakpoints)
     22.1 - Mobile (< 576px)
     22.2 - Small (≥ 576px)
     22.3 - Medium (≥ 768px)
     22.4 - Large (≥ 1024px)
     22.5 - Extra Large (≥ 1280px)
     22.6 - 2X Large (≥ 1536px)
     22.7 - Landscape Orientation
     22.8 - Portrait Orientation

   23.0 - ANIMATIONS & KEYFRAMES (20+ Animations)
     23.1 - Fade Animations
     23.2 - Slide Animations
     23.3 - Zoom Animations
     23.4 - Rotate Animations
     23.5 - Bounce Animations
     23.6 - Pulse Animations
     23.7 - Loading Spinners
     23.8 - Skeleton Loaders
     23.9 - Micro-interactions
     23.10 - Hover Effects

   24.0 - RTL (RIGHT-TO-LEFT) SUPPORT
     24.1 - RTL Layout Adjustments
     24.2 - RTL Typography
     24.3 - RTL Navigation
     24.4 - RTL Forms
     24.5 - RTL Components

   25.0 - PRINT STYLES
     25.1 - Print Layout
     25.2 - Print Typography
     25.3 - Print Colors
     25.4 - Page Breaks
     25.5 - Print Optimization

   26.0 - LOADING & ERROR STATES
     26.1 - Loading Indicators
     26.2 - Skeleton Screens
     26.3 - Error Messages
     26.4 - Empty States
     26.5 - Success States

   27.0 - PERFORMANCE OPTIMIZATION
     27.1 - Critical CSS
     27.2 - Efficient Selectors
     27.3 - Reduced Specificity
     27.4 - Vendor Prefixes
     27.5 - Will-Change Properties

   28.0 - BROWSER COMPATIBILITY
     28.1 - Modern Browser Support
     28.2 - Fallbacks & Polyfills
     28.3 - Progressive Enhancement
     28.4 - Graceful Degradation

   ========================================================================== */


/* ==========================================================================
   1.0 - NORMALIZE & RESET
   ========================================================================== */

/**
 * 1.1 - Normalize.css v8.0.1
 * 
 * Normalize.css makes browsers render all elements more consistently
 * and in line with modern standards. It precisely targets only the
 * styles that need normalizing.
 */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}


/**
 * 1.2 - Box Sizing Reset
 * 
 * Apply a natural box layout model to all elements for predictable
 * sizing behavior. This makes padding and border included in the
 * element's total width and height.
 */

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


/**
 * 1.3 - Remove Default Margins
 * 
 * Remove all default margins to provide a consistent baseline
 * across all elements. Margins will be added intentionally where needed.
 */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   2.0 - CSS CUSTOM PROPERTIES (DESIGN SYSTEM)
   ==========================================================================
   
   Haven Theme's design system uses CSS custom properties for consistency,
   maintainability, and easy customization. All values can be overridden
   in child themes or via the WordPress Customizer.
   ========================================================================== */

:root {
  
  /* ==========================================================================
     2.1 - PRIMARY BRAND COLORS (Vacation Rental Theme)
     ========================================================================== */
  
  --haven-primary: #2563eb;
  --haven-primary-rgb: 37, 99, 235;
  --haven-primary-50: #eff6ff;
  --haven-primary-100: #dbeafe;
  --haven-primary-200: #bfdbfe;
  --haven-primary-300: #93c5fd;
  --haven-primary-400: #60a5fa;
  --haven-primary-500: #2563eb;
  --haven-primary-600: #1d4ed8;
  --haven-primary-700: #1e40af;
  --haven-primary-800: #1e3a8a;
  --haven-primary-900: #1e3a8a;
  
  
  /* ==========================================================================
     2.2 - SECONDARY & ACCENT COLORS
     ========================================================================== */
  
  /* Secondary Colors (Accent/Urgency) */
  --haven-secondary: #f59e0b;
  --haven-secondary-rgb: 245, 158, 11;
  --haven-secondary-50: #fffbeb;
  --haven-secondary-100: #fef3c7;
  --haven-secondary-200: #fde68a;
  --haven-secondary-300: #fcd34d;
  --haven-secondary-400: #fbbf24;
  --haven-secondary-500: #f59e0b;
  --haven-secondary-600: #d97706;
  --haven-secondary-700: #b45309;
  --haven-secondary-800: #92400e;
  --haven-secondary-900: #78350f;
  
  /* Accent Colors */
  --haven-accent-teal: #14b8a6;
  --haven-accent-purple: #8b5cf6;
  --haven-accent-pink: #ec4899;
  --haven-accent-green: #10b981;
  
  
  /* ==========================================================================
     2.3 - NEUTRAL PALETTE (Professional Gray Scale)
     ========================================================================== */
  
  --haven-white: #ffffff;
  --haven-gray-50: #f9fafb;
  --haven-gray-100: #f3f4f6;
  --haven-gray-200: #e5e7eb;
  --haven-gray-300: #d1d5db;
  --haven-gray-400: #9ca3af;
  --haven-gray-500: #6b7280;
  --haven-gray-600: #4b5563;
  --haven-gray-700: #374151;
  --haven-gray-800: #1f2937;
  --haven-gray-900: #111827;
  --haven-black: #000000;
  
  
  /* ==========================================================================
     2.4 - SEMANTIC COLORS (User Feedback)
     ========================================================================== */
  
  /* Success (Available/Confirmed) */
  --haven-success: #10b981;
  --haven-success-rgb: 16, 185, 129;
  --haven-success-light: #d1fae5;
  --haven-success-dark: #065f46;
  
  /* Warning (Limited Availability) */
  --haven-warning: #f59e0b;
  --haven-warning-rgb: 245, 158, 11;
  --haven-warning-light: #fef3c7;
  --haven-warning-dark: #92400e;
  
  /* Error (Unavailable/Error) */
  --haven-error: #ef4444;
  --haven-error-rgb: 239, 68, 68;
  --haven-error-light: #fee2e2;
  --haven-error-dark: #991b1b;
  
  /* Info (Informational) */
  --haven-info: #3b82f6;
  --haven-info-rgb: 59, 130, 246;
  --haven-info-light: #dbeafe;
  --haven-info-dark: #1e40af;
  
  
  /* ==========================================================================
     2.5 - PMS PROVIDER STATUS COLORS
     ========================================================================== */
  
  --haven-provider-connected: #10b981;      /* PMS connected */
  --haven-provider-syncing: #f59e0b;        /* Sync in progress */
  --haven-provider-error: #ef4444;          /* Sync error */
  --haven-provider-disconnected: #6b7280;   /* Not connected */
  
  
  /* ==========================================================================
     2.6 - OVERLAY & SHADOW COLORS
     ========================================================================== */
  
  --haven-overlay-dark: rgba(0, 0, 0, 0.75);
  --haven-overlay-light: rgba(255, 255, 255, 0.9);
  
  /* Box Shadows */
  --haven-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --haven-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --haven-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --haven-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --haven-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --haven-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --haven-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --haven-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* Focus Shadows */
  --haven-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.3);
  --haven-shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.3);
  
  
  /* ==========================================================================
     2.7 - TYPOGRAPHY SYSTEM
     ========================================================================== */
  
  /* Font Families */
  --haven-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --haven-font-secondary: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --haven-font-mono: 'Monaco', 'Courier New', Courier, monospace;
  
  /* Font Weights */
  --haven-font-thin: 100;
  --haven-font-extralight: 200;
  --haven-font-light: 300;
  --haven-font-regular: 400;
  --haven-font-medium: 500;
  --haven-font-semibold: 600;
  --haven-font-bold: 700;
  --haven-font-extrabold: 800;
  --haven-font-black: 900;
  
  /* Font Sizes (Modular Scale 1.250 - Major Third) */
  --haven-text-xs: 0.75rem;       /* 12px */
  --haven-text-sm: 0.875rem;      /* 14px */
  --haven-text-base: 1rem;        /* 16px */
  --haven-text-lg: 1.125rem;      /* 18px */
  --haven-text-xl: 1.25rem;       /* 20px */
  --haven-text-2xl: 1.5rem;       /* 24px */
  --haven-text-3xl: 1.875rem;     /* 30px */
  --haven-text-4xl: 2.25rem;      /* 36px */
  --haven-text-5xl: 3rem;         /* 48px */
  --haven-text-6xl: 3.75rem;      /* 60px */
  --haven-text-7xl: 4.5rem;       /* 72px */
  --haven-text-8xl: 6rem;         /* 96px */
  
  /* Line Heights */
  --haven-leading-none: 1;
  --haven-leading-tight: 1.25;
  --haven-leading-snug: 1.375;
  --haven-leading-normal: 1.5;
  --haven-leading-relaxed: 1.625;
  --haven-leading-loose: 2;
  
  /* Letter Spacing */
  --haven-tracking-tighter: -0.05em;
  --haven-tracking-tight: -0.025em;
  --haven-tracking-normal: 0;
  --haven-tracking-wide: 0.025em;
  --haven-tracking-wider: 0.05em;
  --haven-tracking-widest: 0.1em;
  
  
  /* ==========================================================================
     2.8 - SPACING SCALE (8px Grid System)
     ========================================================================== */
  
  --haven-space-0: 0;
  --haven-space-1: 0.25rem;       /* 4px */
  --haven-space-2: 0.5rem;        /* 8px */
  --haven-space-3: 0.75rem;       /* 12px */
  --haven-space-4: 1rem;          /* 16px */
  --haven-space-5: 1.25rem;       /* 20px */
  --haven-space-6: 1.5rem;        /* 24px */
  --haven-space-7: 1.75rem;       /* 28px */
  --haven-space-8: 2rem;          /* 32px */
  --haven-space-9: 2.25rem;       /* 36px */
  --haven-space-10: 2.5rem;       /* 40px */
  --haven-space-11: 2.75rem;      /* 44px */
  --haven-space-12: 3rem;         /* 48px */
  --haven-space-14: 3.5rem;       /* 56px */
  --haven-space-16: 4rem;         /* 64px */
  --haven-space-20: 5rem;         /* 80px */
  --haven-space-24: 6rem;         /* 96px */
  --haven-space-28: 7rem;         /* 112px */
  --haven-space-32: 8rem;         /* 128px */
  --haven-space-36: 9rem;         /* 144px */
  --haven-space-40: 10rem;        /* 160px */
  --haven-space-44: 11rem;        /* 176px */
  --haven-space-48: 12rem;        /* 192px */
  --haven-space-52: 13rem;        /* 208px */
  --haven-space-56: 14rem;        /* 224px */
  --haven-space-60: 15rem;        /* 240px */
  --haven-space-64: 16rem;        /* 256px */
  --haven-space-72: 18rem;        /* 288px */
  --haven-space-80: 20rem;        /* 320px */
  --haven-space-96: 24rem;        /* 384px */
  
  
  /* ==========================================================================
     2.9 - LAYOUT VARIABLES
     ========================================================================== */
  
  /* Container Max Widths */
  --haven-container-xs: 20rem;        /* 320px */
  --haven-container-sm: 24rem;        /* 384px */
  --haven-container-md: 28rem;        /* 448px */
  --haven-container-lg: 32rem;        /* 512px */
  --haven-container-xl: 36rem;        /* 576px */
  --haven-container-2xl: 42rem;       /* 672px */
  --haven-container-3xl: 48rem;       /* 768px */
  --haven-container-4xl: 56rem;       /* 896px */
  --haven-container-5xl: 64rem;       /* 1024px */
  --haven-container-6xl: 72rem;       /* 1152px */
  --haven-container-7xl: 80rem;       /* 1280px */
  
  /* Container Padding */
  --haven-container-padding: var(--haven-space-4);
  --haven-container-padding-lg: var(--haven-space-6);
  
  /* Grid Gaps */
  --haven-grid-gap-sm: var(--haven-space-4);
  --haven-grid-gap-md: var(--haven-space-6);
  --haven-grid-gap-lg: var(--haven-space-8);
  --haven-grid-gap-xl: var(--haven-space-10);
  
  /* Section Spacing */
  --haven-section-padding: var(--haven-space-12);
  --haven-section-padding-lg: var(--haven-space-20);
  
  
  /* ==========================================================================
     2.10 - BORDER RADIUS
     ========================================================================== */
  
  --haven-radius-none: 0;
  --haven-radius-sm: 0.125rem;        /* 2px */
  --haven-radius-base: 0.25rem;       /* 4px */
  --haven-radius-md: 0.375rem;        /* 6px */
  --haven-radius-lg: 0.5rem;          /* 8px */
  --haven-radius-xl: 0.75rem;         /* 12px */
  --haven-radius-2xl: 1rem;           /* 16px */
  --haven-radius-3xl: 1.5rem;         /* 24px */
  --haven-radius-full: 9999px;
  
  
  /* ==========================================================================
     2.11 - TRANSITIONS & ANIMATIONS
     ========================================================================== */
  
  /* Duration */
  --haven-duration-fast: 150ms;
  --haven-duration-base: 200ms;
  --haven-duration-slow: 300ms;
  --haven-duration-slower: 500ms;
  
  /* Easing Functions */
  --haven-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --haven-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --haven-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --haven-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Combined Transitions */
  --haven-transition-all: all var(--haven-duration-base) var(--haven-ease-in-out);
  --haven-transition-colors: color var(--haven-duration-base) var(--haven-ease-in-out),
                              background-color var(--haven-duration-base) var(--haven-ease-in-out),
                              border-color var(--haven-duration-base) var(--haven-ease-in-out);
  --haven-transition-transform: transform var(--haven-duration-base) var(--haven-ease-out);
  --haven-transition-opacity: opacity var(--haven-duration-base) var(--haven-ease-in-out);
  
  
  /* ==========================================================================
     2.12 - Z-INDEX SCALE
     ========================================================================== */
  
  --haven-z-auto: auto;
  --haven-z-0: 0;
  --haven-z-10: 10;
  --haven-z-20: 20;
  --haven-z-30: 30;
  --haven-z-40: 40;
  --haven-z-50: 50;
  --haven-z-dropdown: 1000;
  --haven-z-sticky: 1020;
  --haven-z-fixed: 1030;
  --haven-z-modal-backdrop: 1040;
  --haven-z-modal: 1050;
  --haven-z-popover: 1060;
  --haven-z-tooltip: 1070;
  
  
  /* ==========================================================================
     2.13 - BREAKPOINTS (For Media Query Reference)
     ========================================================================== */
  
  --haven-breakpoint-xs: 0;
  --haven-breakpoint-sm: 576px;
  --haven-breakpoint-md: 768px;
  --haven-breakpoint-lg: 1024px;
  --haven-breakpoint-xl: 1280px;
  --haven-breakpoint-2xl: 1536px;
  
  
  /* ==========================================================================
     2.14 - COMPONENT-SPECIFIC VARIABLES
     ========================================================================== */
  
  /* Buttons */
  --haven-button-padding-x: var(--haven-space-6);
  --haven-button-padding-y: var(--haven-space-3);
  --haven-button-font-weight: var(--haven-font-semibold);
  --haven-button-border-radius: var(--haven-radius-lg);
  
  /* Forms */
  --haven-input-padding-x: var(--haven-space-4);
  --haven-input-padding-y: var(--haven-space-3);
  --haven-input-border-width: 1px;
  --haven-input-border-radius: var(--haven-radius-md);
  
  /* Cards */
  --haven-card-padding: var(--haven-space-6);
  --haven-card-border-radius: var(--haven-radius-xl);
  --haven-card-border-width: 1px;
  
  /* Header */
  --haven-header-height: 4rem;
  --haven-header-height-sticky: 3.5rem;
  
  /* Footer */
  --haven-footer-padding: var(--haven-space-12);
  
}


/* ==========================================================================
   3.0 - COLOR SCHEME SYSTEM (5 Instant-Switch Themes)
   ==========================================================================
   
   Haven Theme features a revolutionary 5-theme color scheme system.
   Each scheme is activated by adding a body class, allowing instant
   visual transformation without code changes.
   
   Usage: Add one of these classes to the <body> element:
   - .haven-scheme-default (Blue & Orange - Default)
   - .haven-scheme-ocean (Teal & Coral)
   - .haven-scheme-mountain (Forest & Earth)
   - .haven-scheme-desert (Amber & Terracotta)
   - .haven-scheme-arctic (Slate & Ice)
   ========================================================================== */

/**
 * 3.1 - Default Scheme (Blue & Orange)
 * 
 * The default Haven color scheme. Trust-building blue primary with
 * energetic orange accents. Perfect for coastal and waterfront properties.
 * This scheme is active by default and doesn't require a body class.
 */

/* Default colors are defined in :root above */


/**
 * 3.2 - Ocean Breeze Scheme (Teal & Coral)
 * 
 * Refreshing teal and coral palette inspired by tropical destinations.
 * Perfect for beach houses, island rentals, and coastal properties.
 */

body.haven-scheme-ocean {
  --haven-primary: #14b8a6;
  --haven-primary-rgb: 20, 184, 166;
  --haven-primary-50: #f0fdfa;
  --haven-primary-100: #ccfbf1;
  --haven-primary-200: #99f6e4;
  --haven-primary-300: #5eead4;
  --haven-primary-400: #2dd4bf;
  --haven-primary-500: #14b8a6;
  --haven-primary-600: #0d9488;
  --haven-primary-700: #0f766e;
  --haven-primary-800: #115e59;
  --haven-primary-900: #134e4a;
  
  --haven-secondary: #fb7185;
  --haven-secondary-rgb: 251, 113, 133;
  --haven-secondary-50: #fff1f2;
  --haven-secondary-100: #ffe4e6;
  --haven-secondary-200: #fecdd3;
  --haven-secondary-300: #fda4af;
  --haven-secondary-400: #fb7185;
  --haven-secondary-500: #f43f5e;
  --haven-secondary-600: #e11d48;
  --haven-secondary-700: #be123c;
  --haven-secondary-800: #9f1239;
  --haven-secondary-900: #881337;
}


/**
 * 3.3 - Mountain Lodge Scheme (Forest & Earth)
 * 
 * Rich forest greens and earthy browns evoke mountain cabins and
 * woodland retreats. Perfect for ski lodges and mountain properties.
 */

body.haven-scheme-mountain {
  --haven-primary: #059669;
  --haven-primary-rgb: 5, 150, 105;
  --haven-primary-50: #ecfdf5;
  --haven-primary-100: #d1fae5;
  --haven-primary-200: #a7f3d0;
  --haven-primary-300: #6ee7b7;
  --haven-primary-400: #34d399;
  --haven-primary-500: #10b981;
  --haven-primary-600: #059669;
  --haven-primary-700: #047857;
  --haven-primary-800: #065f46;
  --haven-primary-900: #064e3b;
  
  --haven-secondary: #d97706;
  --haven-secondary-rgb: 217, 119, 6;
  --haven-secondary-50: #fffbeb;
  --haven-secondary-100: #fef3c7;
  --haven-secondary-200: #fde68a;
  --haven-secondary-300: #fcd34d;
  --haven-secondary-400: #fbbf24;
  --haven-secondary-500: #f59e0b;
  --haven-secondary-600: #d97706;
  --haven-secondary-700: #b45309;
  --haven-secondary-800: #92400e;
  --haven-secondary-900: #78350f;
}


/**
 * 3.4 - Desert Sunset Scheme (Amber & Terracotta)
 * 
 * Warm amber and terracotta hues capture desert sunsets and
 * southwestern charm. Ideal for desert and southwestern properties.
 */

body.haven-scheme-desert {
  --haven-primary: #f59e0b;
  --haven-primary-rgb: 245, 158, 11;
  --haven-primary-50: #fffbeb;
  --haven-primary-100: #fef3c7;
  --haven-primary-200: #fde68a;
  --haven-primary-300: #fcd34d;
  --haven-primary-400: #fbbf24;
  --haven-primary-500: #f59e0b;
  --haven-primary-600: #d97706;
  --haven-primary-700: #b45309;
  --haven-primary-800: #92400e;
  --haven-primary-900: #78350f;
  
  --haven-secondary: #dc2626;
  --haven-secondary-rgb: 220, 38, 38;
  --haven-secondary-50: #fef2f2;
  --haven-secondary-100: #fee2e2;
  --haven-secondary-200: #fecaca;
  --haven-secondary-300: #fca5a5;
  --haven-secondary-400: #f87171;
  --haven-secondary-500: #ef4444;
  --haven-secondary-600: #dc2626;
  --haven-secondary-700: #b91c1c;
  --haven-secondary-800: #991b1b;
  --haven-secondary-900: #7f1d1d;
}


/**
 * 3.5 - Arctic Luxe Scheme (Slate & Ice)
 * 
 * Cool slate grays with icy blue accents create a sophisticated,
 * modern aesthetic. Perfect for luxury urban rentals and contemporary spaces.
 */

body.haven-scheme-arctic {
  --haven-primary: #64748b;
  --haven-primary-rgb: 100, 116, 139;
  --haven-primary-50: #f8fafc;
  --haven-primary-100: #f1f5f9;
  --haven-primary-200: #e2e8f0;
  --haven-primary-300: #cbd5e1;
  --haven-primary-400: #94a3b8;
  --haven-primary-500: #64748b;
  --haven-primary-600: #475569;
  --haven-primary-700: #334155;
  --haven-primary-800: #1e293b;
  --haven-primary-900: #0f172a;
  
  --haven-secondary: #06b6d4;
  --haven-secondary-rgb: 6, 182, 212;
  --haven-secondary-50: #ecfeff;
  --haven-secondary-100: #cffafe;
  --haven-secondary-200: #a5f3fc;
  --haven-secondary-300: #67e8f9;
  --haven-secondary-400: #22d3ee;
  --haven-secondary-500: #06b6d4;
  --haven-secondary-600: #0891b2;
  --haven-secondary-700: #0e7490;
  --haven-secondary-800: #155e75;
  --haven-secondary-900: #164e63;
}


/* ==========================================================================
   4.0 - BASE TYPOGRAPHY
   ==========================================================================
   
   Foundation typography styles that establish the base reading experience
   across the Haven Theme. Uses a modular scale for consistent rhythm.
   ========================================================================== */

/**
 * 4.1 - Font Face Imports
 * 
 * Import web fonts for optimal typography. Inter for UI/body text,
 * Playfair Display for elegant headings.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;600;700;800&display=swap');


/**
 * 4.2 - Body & Base Styles
 */

body {
  font-family: var(--haven-font-primary);
  font-size: var(--haven-text-base);
  font-weight: var(--haven-font-regular);
  line-height: var(--haven-leading-normal);
  color: var(--haven-gray-900);
  background-color: var(--haven-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/**
 * 4.3 - Headings
 * 
 * Consistent heading hierarchy with responsive sizing and elegant
 * Playfair Display font for visual impact.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--haven-font-secondary);
  font-weight: var(--haven-font-bold);
  line-height: var(--haven-leading-tight);
  color: var(--haven-gray-900);
  margin-top: 0;
  margin-bottom: var(--haven-space-4);
}

h1 {
  font-size: var(--haven-text-4xl);
  letter-spacing: var(--haven-tracking-tight);
}

h2 {
  font-size: var(--haven-text-3xl);
  letter-spacing: var(--haven-tracking-tight);
}

h3 {
  font-size: var(--haven-text-2xl);
}

h4 {
  font-size: var(--haven-text-xl);
}

h5 {
  font-size: var(--haven-text-lg);
}

h6 {
  font-size: var(--haven-text-base);
  font-family: var(--haven-font-primary);
  font-weight: var(--haven-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--haven-tracking-wide);
}

/* Responsive heading sizes */
@media (min-width: 768px) {
  h1 {
    font-size: var(--haven-text-5xl);
  }
  
  h2 {
    font-size: var(--haven-text-4xl);
  }
  
  h3 {
    font-size: var(--haven-text-3xl);
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: var(--haven-text-6xl);
  }
}


/**
 * 4.4 - Paragraphs & Text Elements
 */

p {
  margin-top: 0;
  margin-bottom: var(--haven-space-4);
  line-height: var(--haven-leading-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--haven-text-sm);
}

mark {
  background-color: var(--haven-secondary-100);
  padding: 0.125em 0.25em;
  border-radius: var(--haven-radius-sm);
}

del {
  text-decoration: line-through;
  opacity: 0.7;
}

ins {
  text-decoration: none;
  border-bottom: 2px solid var(--haven-success);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}


/**
 * 4.5 - Links
 */

a {
  color: var(--haven-primary);
  text-decoration: none;
  transition: var(--haven-transition-colors);
}

a:hover,
a:focus {
  color: var(--haven-primary-700);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--haven-primary);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
a:focus:not(:focus-visible) {
  outline: none;
}


/**
 * 4.6 - Lists
 */

ul,
ol {
  margin-top: 0;
  margin-bottom: var(--haven-space-4);
  padding-left: var(--haven-space-6);
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
}

li {
  margin-bottom: var(--haven-space-2);
  line-height: var(--haven-leading-relaxed);
}

li:last-child {
  margin-bottom: 0;
}

dl {
  margin-top: 0;
  margin-bottom: var(--haven-space-4);
}

dt {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-1);
}

dd {
  margin-left: 0;
  margin-bottom: var(--haven-space-3);
  color: var(--haven-gray-600);
}


/**
 * 4.7 - Code & Pre
 */

code,
kbd,
samp,
pre {
  font-family: var(--haven-font-mono);
  font-size: 0.875em;
}

code,
kbd,
samp {
  padding: 0.125em 0.375em;
  background-color: var(--haven-gray-100);
  border-radius: var(--haven-radius-sm);
  color: var(--haven-error);
}

kbd {
  background-color: var(--haven-gray-800);
  color: var(--haven-white);
  border: 1px solid var(--haven-gray-700);
  box-shadow: var(--haven-shadow-sm);
}

pre {
  display: block;
  padding: var(--haven-space-4);
  margin-top: 0;
  margin-bottom: var(--haven-space-4);
  overflow-x: auto;
  background-color: var(--haven-gray-900);
  color: var(--haven-gray-100);
  border-radius: var(--haven-radius-lg);
  line-height: var(--haven-leading-relaxed);
}

pre code {
  padding: 0;
  background-color: transparent;
  color: inherit;
  border-radius: 0;
}


/**
 * 4.8 - Blockquotes
 */

blockquote {
  margin: var(--haven-space-8) 0;
  padding: var(--haven-space-6) var(--haven-space-8);
  border-left: 4px solid var(--haven-primary);
  background-color: var(--haven-gray-50);
  font-style: italic;
  color: var(--haven-gray-700);
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  margin-top: var(--haven-space-3);
  font-size: var(--haven-text-sm);
  font-style: normal;
  color: var(--haven-gray-600);
}

blockquote cite::before {
  content: '— ';
}


/**
 * 4.9 - Tables
 */

table {
  width: 100%;
  margin-bottom: var(--haven-space-6);
  border-collapse: collapse;
  background-color: var(--haven-white);
}

thead th {
  padding: var(--haven-space-3) var(--haven-space-4);
  font-weight: var(--haven-font-semibold);
  text-align: left;
  color: var(--haven-gray-900);
  background-color: var(--haven-gray-50);
  border-bottom: 2px solid var(--haven-gray-200);
}

tbody td {
  padding: var(--haven-space-3) var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
  color: var(--haven-gray-700);
}

tbody tr:hover {
  background-color: var(--haven-gray-50);
}

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

/* Responsive tables */
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   5.0 - LAYOUT FOUNDATIONS
   ==========================================================================
   
   Core layout system providing containers, grids, and flex utilities
   for building responsive page layouts.
   ========================================================================== */

/**
 * 5.1 - Container System
 * 
 * Centered containers with max-widths and responsive padding.
 */

.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--haven-container-padding);
  padding-left: var(--haven-container-padding);
}

.container {
  max-width: var(--haven-container-7xl);
}

.container-sm {
  max-width: var(--haven-container-3xl);
}

.container-md {
  max-width: var(--haven-container-4xl);
}

.container-lg {
  max-width: var(--haven-container-5xl);
}

.container-xl {
  max-width: var(--haven-container-6xl);
}

@media (min-width: 1024px) {
  .container,
  .container-fluid {
    padding-right: var(--haven-container-padding-lg);
    padding-left: var(--haven-container-padding-lg);
  }
}


/**
 * 5.2 - Grid System
 * 
 * Flexible CSS Grid-based layout system with responsive columns.
 */

.grid {
  display: grid;
  gap: var(--haven-grid-gap-md);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Responsive grid columns */
@media (min-width: 576px) {
  .grid-cols-sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-sm-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-cols-lg-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Grid gap utilities */
.gap-0 { gap: var(--haven-space-0); }
.gap-1 { gap: var(--haven-space-1); }
.gap-2 { gap: var(--haven-space-2); }
.gap-3 { gap: var(--haven-space-3); }
.gap-4 { gap: var(--haven-space-4); }
.gap-5 { gap: var(--haven-space-5); }
.gap-6 { gap: var(--haven-space-6); }
.gap-8 { gap: var(--haven-space-8); }
.gap-10 { gap: var(--haven-space-10); }
.gap-12 { gap: var(--haven-space-12); }

/* Grid span utilities */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }


/**
 * 5.3 - Flexbox Layouts
 * 
 * Flexible box layout utilities for common patterns.
 */

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* Flex direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align content */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }

/* Flex grow/shrink */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink { flex-shrink: 1; }


/**
 * 5.4 - Section Spacing
 * 
 * Consistent vertical spacing for major page sections.
 */

.section {
  padding-top: var(--haven-section-padding);
  padding-bottom: var(--haven-section-padding);
}

.section-lg {
  padding-top: var(--haven-section-padding-lg);
  padding-bottom: var(--haven-section-padding-lg);
}

.section-sm {
  padding-top: var(--haven-space-8);
  padding-bottom: var(--haven-space-8);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--haven-section-padding-lg);
    padding-bottom: var(--haven-section-padding-lg);
  }
}


/**
 * 5.5 - Wrapper Classes
 */

.wrapper {
  margin-right: auto;
  margin-left: auto;
}

.wrapper-sm {
  max-width: 40rem;
}

.wrapper-md {
  max-width: 56rem;
}

.wrapper-lg {
  max-width: 72rem;
}

.wrapper-xl {
  max-width: 80rem;
}


/* ==========================================================================
   6.0 - ACCESSIBILITY (WCAG 2.1 AA COMPLIANT)
   ==========================================================================
   
   Comprehensive accessibility features ensuring Haven Theme meets
   WCAG 2.1 AA standards for inclusive user experiences.
   ========================================================================== */

/**
 * 6.1 - Skip Links
 * 
 * Allow keyboard users to skip directly to main content.
 */

.skip-link {
  position: absolute;
  top: -999px;
  left: -999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--haven-z-tooltip);
}

.skip-link:focus {
  position: fixed;
  top: var(--haven-space-4);
  left: var(--haven-space-4);
  width: auto;
  height: auto;
  padding: var(--haven-space-3) var(--haven-space-6);
  background-color: var(--haven-primary);
  color: var(--haven-white);
  text-decoration: none;
  border-radius: var(--haven-radius-lg);
  box-shadow: var(--haven-shadow-lg);
  font-weight: var(--haven-font-semibold);
}


/**
 * 6.2 - Screen Reader Only Text
 * 
 * Hide content visually but keep it available to screen readers.
 */

.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus,
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/**
 * 6.3 - Focus Styles
 * 
 * Clear, visible focus indicators for keyboard navigation.
 */

*:focus {
  outline: 2px solid var(--haven-primary);
  outline-offset: 2px;
}

/* Remove outline for mouse users (but keep for keyboard) */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--haven-primary);
  outline-offset: 2px;
}

/* Custom focus styles for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--haven-primary);
  outline-offset: 2px;
  box-shadow: var(--haven-shadow-focus);
}


/**
 * 6.4 - Keyboard Navigation
 * 
 * Ensure all interactive elements are keyboard accessible.
 */

/* Add cursor pointer to clickable elements */
button,
[role="button"],
.btn,
.button {
  cursor: pointer;
}

/* Ensure disabled elements are not focusable */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}


/**
 * 6.5 - Reduced Motion
 * 
 * Respect user's motion preferences for accessibility.
 */

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


/**
 * 6.6 - High Contrast Support
 * 
 * Ensure readability in high contrast mode.
 */

@media (prefers-contrast: high) {
  * {
    border-color: currentColor;
  }
  
  button,
  .btn,
  .button {
    border: 2px solid currentColor;
  }
}


/**
 * 6.7 - ARIA States
 * 
 * Visual feedback for ARIA states.
 */

[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
}

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Removed legacy global ARIA visibility rules.
   They hid active Gutenberg/navigation UI, including the luxury header.
   Component-specific disclosure styles must control visibility instead. */

/* Touch targets - minimum 44x44px for accessibility */
button,
a,
input[type="checkbox"],
input[type="radio"],
.btn,
.button,
[role="button"] {
  min-width: 44px;
  min-height: 44px;
}


/* ==========================================================================
   7.0 - WORDPRESS CORE STYLES
   ==========================================================================
   
   Styles for WordPress-generated classes and default WordPress features.
   ========================================================================== */

/**
 * 7.1 - Alignment Classes
 * 
 * WordPress image and content alignment classes.
 */

.alignnone {
  margin: var(--haven-space-5) var(--haven-space-5) var(--haven-space-5) 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: var(--haven-space-5) auto;
}

.alignright {
  float: right;
  margin: var(--haven-space-5) 0 var(--haven-space-5) var(--haven-space-5);
}

.alignleft {
  float: left;
  margin: var(--haven-space-5) var(--haven-space-5) var(--haven-space-5) 0;
}

/* Clear floats */
.alignleft::after,
.alignright::after {
  content: "";
  display: table;
  clear: both;
}

/**
 * 7.2 - Caption Classes
 * 
 * WordPress image caption styling.
 */

.wp-caption {
  max-width: 100%;
  margin-bottom: var(--haven-space-6);
}

.wp-caption img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.wp-caption-text,
.wp-caption-dd {
  padding: var(--haven-space-3);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  text-align: center;
  background-color: var(--haven-gray-50);
  border-radius: 0 0 var(--haven-radius-lg) var(--haven-radius-lg);
}


/**
 * 7.3 - Gallery Classes
 * 
 * WordPress gallery shortcode styling.
 */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--haven-space-4);
  margin-bottom: var(--haven-space-6);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--haven-radius-lg);
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--haven-transition-transform);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--haven-space-3);
  font-size: var(--haven-text-sm);
  color: var(--haven-white);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

/* Gallery columns */
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

@media (max-width: 768px) {
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6,
  .gallery-columns-7,
  .gallery-columns-8,
  .gallery-columns-9 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/**
 * 7.4 - WordPress Embeds
 * 
 * Responsive embed styling for videos and iframes.
 */

.wp-block-embed,
.wp-embedded-content,
embed,
iframe,
object {
  max-width: 100%;
}

.wp-block-embed {
  margin-bottom: var(--haven-space-6);
}

/* Responsive video wrapper */
.wp-block-embed__wrapper,
.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: var(--haven-radius-xl);
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed,
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/**
 * 7.5 - Post Formats
 * 
 * Styling for different WordPress post formats.
 */

/* Aside format */
.format-aside .entry-title {
  font-size: var(--haven-text-lg);
}

/* Quote format */
.format-quote {
  border-left: 4px solid var(--haven-primary);
  padding-left: var(--haven-space-6);
}

/* Link format */
.format-link .entry-title a {
  color: var(--haven-primary);
}

.format-link .entry-title a::after {
  content: " →";
}

/* Status format */
.format-status {
  font-style: italic;
}


/**
 * 7.6 - Sticky Posts
 * 
 * Highlight sticky posts.
 */

.sticky {
  position: relative;
}

.sticky::before {
  content: "📌";
  position: absolute;
  top: var(--haven-space-4);
  right: var(--haven-space-4);
  font-size: var(--haven-text-2xl);
  z-index: var(--haven-z-10);
}


/**
 * 7.7 - Post Navigation
 * 
 * Next/previous post navigation.
 */

.post-navigation,
.posts-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: var(--haven-space-12);
  padding-top: var(--haven-space-6);
  border-top: 1px solid var(--haven-gray-200);
}

.nav-previous,
.nav-next {
  flex: 1;
}

.nav-next {
  text-align: right;
}

.post-navigation a,
.posts-navigation a {
  display: inline-flex;
  align-items: center;
  padding: var(--haven-space-3) var(--haven-space-6);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-medium);
  transition: var(--haven-transition-colors);
}

.post-navigation a:hover,
.posts-navigation a:hover {
  background-color: var(--haven-primary);
  color: var(--haven-white);
  border-color: var(--haven-primary);
  text-decoration: none;
}


/**
 * 7.8 - Comment Styles
 * 
 * WordPress comment list and form styling.
 */

.comments-area {
  margin-top: var(--haven-space-12);
  padding-top: var(--haven-space-12);
  border-top: 1px solid var(--haven-gray-200);
}

.comments-title {
  margin-bottom: var(--haven-space-6);
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment {
  margin-bottom: var(--haven-space-8);
  padding: var(--haven-space-6);
  background-color: var(--haven-gray-50);
  border-radius: var(--haven-radius-xl);
}

.comment-author {
  display: flex;
  align-items: center;
  margin-bottom: var(--haven-space-4);
}

.comment-author img {
  width: 48px;
  height: 48px;
  border-radius: var(--haven-radius-full);
  margin-right: var(--haven-space-3);
}

.comment-metadata {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-3);
}

.comment-content {
  margin-bottom: var(--haven-space-3);
  line-height: var(--haven-leading-relaxed);
}

.comment-reply-link {
  display: inline-block;
  padding: var(--haven-space-2) var(--haven-space-4);
  font-size: var(--haven-text-sm);
  color: var(--haven-primary);
  border: 1px solid var(--haven-primary);
  border-radius: var(--haven-radius-md);
  transition: var(--haven-transition-colors);
}

.comment-reply-link:hover {
  background-color: var(--haven-primary);
  color: var(--haven-white);
  text-decoration: none;
}

/* Nested comments */
.children {
  list-style: none;
  padding-left: var(--haven-space-8);
  margin-top: var(--haven-space-6);
}

/* Comment form */
.comment-respond {
  margin-top: var(--haven-space-8);
}

.comment-form {
  display: grid;
  gap: var(--haven-space-4);
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
  display: block;
  margin-bottom: var(--haven-space-2);
  font-weight: var(--haven-font-medium);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-md);
  font-size: var(--haven-text-base);
  transition: var(--haven-transition-colors);
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

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

.form-submit {
  margin-top: var(--haven-space-4);
}

.form-submit input[type="submit"] {
  padding: var(--haven-space-3) var(--haven-space-8);
  background-color: var(--haven-primary);
  color: var(--haven-white);
  border: none;
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-semibold);
  cursor: pointer;
  transition: var(--haven-transition-colors);
}

.form-submit input[type="submit"]:hover {
  background-color: var(--haven-primary-700);
}


/* ==========================================================================
   8.0 - GUTENBERG BLOCKS (40+ Core WordPress Blocks)
   ==========================================================================
   
   Comprehensive styling for all WordPress Gutenberg core blocks.
   ========================================================================== */

/**
 * 8.1 - Common Blocks
 */

/* Paragraph Block */
.wp-block-paragraph {
  margin-bottom: var(--haven-space-6);
  line-height: var(--haven-leading-relaxed);
}

.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
  float: left;
  font-size: 4em;
  line-height: 0.75;
  margin: 0.1em 0.1em 0 0;
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
}

/* Heading Blocks */
.wp-block-heading {
  margin-bottom: var(--haven-space-4);
}

/* Image Block */
.wp-block-image {
  margin-bottom: var(--haven-space-6);
}

.wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--haven-radius-lg);
}

.wp-block-image figcaption {
  margin-top: var(--haven-space-3);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  text-align: center;
}

/* Quote Block */
.wp-block-quote {
  margin: var(--haven-space-8) 0;
  padding: var(--haven-space-6) var(--haven-space-8);
  border-left: 4px solid var(--haven-primary);
  background-color: var(--haven-gray-50);
}

.wp-block-quote p {
  font-size: var(--haven-text-lg);
  font-style: italic;
  color: var(--haven-gray-800);
  margin-bottom: var(--haven-space-4);
}

.wp-block-quote cite {
  display: block;
  font-size: var(--haven-text-sm);
  font-style: normal;
  color: var(--haven-gray-600);
}

.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
  padding: var(--haven-space-10);
  border-left-width: 6px;
}

.wp-block-quote.is-large p,
.wp-block-quote.is-style-large p {
  font-size: var(--haven-text-2xl);
}

/* Pullquote Block */
.wp-block-pullquote {
  margin: var(--haven-space-12) auto;
  padding: var(--haven-space-10);
  text-align: center;
  border-top: 4px solid var(--haven-primary);
  border-bottom: 4px solid var(--haven-primary);
}

.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.wp-block-pullquote p {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  line-height: var(--haven-leading-tight);
  color: var(--haven-gray-900);
}

.wp-block-pullquote cite {
  margin-top: var(--haven-space-4);
  font-size: var(--haven-text-base);
}

/* List Blocks */
.wp-block-list {
  margin-bottom: var(--haven-space-6);
  padding-left: var(--haven-space-6);
}

.wp-block-list li {
  margin-bottom: var(--haven-space-2);
}

/* Code Block */
.wp-block-code {
  margin-bottom: var(--haven-space-6);
}

.wp-block-code code {
  display: block;
  padding: var(--haven-space-4);
  background-color: var(--haven-gray-900);
  color: var(--haven-gray-100);
  border-radius: var(--haven-radius-lg);
  overflow-x: auto;
}

/* Preformatted Block */
.wp-block-preformatted {
  padding: var(--haven-space-4);
  background-color: var(--haven-gray-900);
  color: var(--haven-gray-100);
  border-radius: var(--haven-radius-lg);
  overflow-x: auto;
  margin-bottom: var(--haven-space-6);
}

/* Verse Block */
.wp-block-verse {
  font-family: var(--haven-font-secondary);
  font-style: italic;
  padding: var(--haven-space-6);
  background-color: var(--haven-gray-50);
  border-radius: var(--haven-radius-lg);
  margin-bottom: var(--haven-space-6);
}


/**
 * 8.2 - Formatting Blocks
 */

/* Table Block */
.wp-block-table {
  margin-bottom: var(--haven-space-6);
}

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}

.wp-block-table thead {
  border-bottom: 2px solid var(--haven-gray-300);
}

.wp-block-table th,
.wp-block-table td {
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-200);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--haven-gray-50);
}

/* Separator Block */
.wp-block-separator {
  margin: var(--haven-space-12) auto;
  border: none;
  border-top: 1px solid var(--haven-gray-300);
}

.wp-block-separator.is-style-wide {
  border-top-width: 2px;
}

.wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
}

.wp-block-separator.is-style-dots::before {
  content: '···';
  color: var(--haven-gray-400);
  font-size: var(--haven-text-2xl);
  letter-spacing: var(--haven-tracking-widest);
}

/* Spacer Block */
.wp-block-spacer {
  clear: both;
}

/* Button Block */
.wp-block-button {
  margin-bottom: var(--haven-space-4);
}

.wp-block-button__link {
  display: inline-block;
  padding: var(--haven-space-3) var(--haven-space-8);
  background-color: var(--haven-primary);
  color: var(--haven-white);
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-semibold);
  text-decoration: none;
  transition: var(--haven-transition-colors);
  border: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: var(--haven-primary-700);
  color: var(--haven-white);
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--haven-primary);
  color: var(--haven-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--haven-primary);
  color: var(--haven-white);
}

/* Buttons Group */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-4);
  margin-bottom: var(--haven-space-6);
}

.wp-block-buttons.aligncenter {
  justify-content: center;
}

.wp-block-buttons.alignright {
  justify-content: flex-end;
}


/**
 * 8.3 - Layout Blocks
 */

/* Group Block */
.wp-block-group {
  margin-bottom: var(--haven-space-6);
}

.wp-block-group__inner-container {
  padding: var(--haven-space-6);
}

.wp-block-group.has-background {
  padding: var(--haven-space-6);
  border-radius: var(--haven-radius-xl);
}

/* Columns Block */
.wp-block-columns {
  display: flex;
  gap: var(--haven-grid-gap-md);
  margin-bottom: var(--haven-space-6);
}

.wp-block-column {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

/* Cover Block */
.wp-block-cover {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--haven-space-10);
  margin-bottom: var(--haven-space-6);
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
}

.wp-block-cover__background,
.wp-block-cover__gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  color: var(--haven-white);
  text-align: center;
}

/* Media & Text Block */
.wp-block-media-text {
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: var(--haven-grid-gap-lg);
  align-items: center;
  margin-bottom: var(--haven-space-6);
}

.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1fr 50%;
}

.wp-block-media-text__media {
  margin: 0;
}

.wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--haven-radius-xl);
}

.wp-block-media-text__content {
  padding: var(--haven-space-6);
}

@media (max-width: 768px) {
  .wp-block-media-text,
  .wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 1fr;
  }
}


/**
 * 8.4 - Widget Blocks
 */

/* Archives Block */
.wp-block-archives {
  list-style: none;
  padding: 0;
}

.wp-block-archives li {
  padding: var(--haven-space-2) 0;
  border-bottom: 1px solid var(--haven-gray-200);
}

.wp-block-archives li:last-child {
  border-bottom: none;
}

/* Categories Block */
.wp-block-categories {
  list-style: none;
  padding: 0;
}

.wp-block-categories li {
  padding: var(--haven-space-2) 0;
  border-bottom: 1px solid var(--haven-gray-200);
}

/* Latest Posts Block */
.wp-block-latest-posts {
  list-style: none;
  padding: 0;
}

.wp-block-latest-posts li {
  margin-bottom: var(--haven-space-4);
  padding-bottom: var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
}

.wp-block-latest-posts__post-title {
  font-weight: var(--haven-font-semibold);
  margin-bottom: var(--haven-space-2);
}

.wp-block-latest-posts__post-date {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.wp-block-latest-posts__post-excerpt {
  margin-top: var(--haven-space-2);
  color: var(--haven-gray-700);
}

/* Calendar Block */
.wp-block-calendar {
  margin-bottom: var(--haven-space-6);
}

.wp-block-calendar table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-calendar th,
.wp-block-calendar td {
  padding: var(--haven-space-2);
  text-align: center;
  border: 1px solid var(--haven-gray-200);
}

.wp-block-calendar th {
  background-color: var(--haven-gray-50);
  font-weight: var(--haven-font-semibold);
}

/* Tag Cloud Block */
.wp-block-tag-cloud {
  margin-bottom: var(--haven-space-6);
}

.wp-block-tag-cloud a {
  display: inline-block;
  margin: 0 var(--haven-space-1) var(--haven-space-2) 0;
  padding: var(--haven-space-2) var(--haven-space-4);
  background-color: var(--haven-gray-100);
  border-radius: var(--haven-radius-full);
  font-size: var(--haven-text-sm);
  transition: var(--haven-transition-colors);
}

.wp-block-tag-cloud a:hover {
  background-color: var(--haven-primary);
  color: var(--haven-white);
  text-decoration: none;
}

/* Search Block */
.wp-block-search {
  margin-bottom: var(--haven-space-6);
}

.wp-block-search__inside-wrapper {
  display: flex;
  gap: var(--haven-space-2);
}

.wp-block-search__input {
  flex: 1;
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-md);
}

.wp-block-search__button {
  padding: var(--haven-space-3) var(--haven-space-6);
  background-color: var(--haven-primary);
  color: var(--haven-white);
  border: none;
  border-radius: var(--haven-radius-md);
  font-weight: var(--haven-font-semibold);
  cursor: pointer;
}


/**
 * 8.5 - Theme Blocks
 */

/* Site Logo Block */
.wp-block-site-logo {
  margin-bottom: var(--haven-space-4);
}

.wp-block-site-logo img {
  max-height: 60px;
  width: auto;
}

/* Site Title Block */
.wp-block-site-title {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-2);
}

.wp-block-site-title a {
  color: var(--haven-gray-900);
  text-decoration: none;
}

/* Site Tagline Block */
.wp-block-site-tagline {
  font-size: var(--haven-text-base);
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-4);
}

/* Post Title Block */
.wp-block-post-title {
  margin-bottom: var(--haven-space-6);
}

/* Post Date Block */
.wp-block-post-date {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-2);
}

/* Post Author Block */
.wp-block-post-author {
  display: flex;
  align-items: center;
  margin-bottom: var(--haven-space-4);
}

.wp-block-post-author__avatar img {
  width: 48px;
  height: 48px;
  border-radius: var(--haven-radius-full);
  margin-right: var(--haven-space-3);
}

.wp-block-post-author__name {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
}

/* Post Excerpt Block */
.wp-block-post-excerpt {
  margin-bottom: var(--haven-space-6);
  color: var(--haven-gray-700);
  line-height: var(--haven-leading-relaxed);
}

/* Post Featured Image Block */
.wp-block-post-featured-image {
  margin-bottom: var(--haven-space-6);
}

.wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  border-radius: var(--haven-radius-xl);
}


/**
 * 8.6 - Embed Blocks
 */

.wp-block-embed {
  margin-bottom: var(--haven-space-6);
}

.wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--haven-radius-xl);
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Social Embeds */
.wp-block-embed-twitter,
.wp-block-embed-instagram,
.wp-block-embed-facebook {
  text-align: center;
}


/**
 * 8.7 - Block Alignment & Spacing
 */

/* Wide and full alignments */
.wp-block[data-align="wide"] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.wp-block[data-align="full"] {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Block spacing */
.wp-block {
  margin-bottom: var(--haven-space-6);
}

/* Background colors */
.has-background {
  padding: var(--haven-space-6);
  border-radius: var(--haven-radius-xl);
}

/* Text colors - using theme colors */
.has-primary-color { color: var(--haven-primary); }
.has-secondary-color { color: var(--haven-secondary); }
.has-success-color { color: var(--haven-success); }
.has-warning-color { color: var(--haven-warning); }
.has-error-color { color: var(--haven-error); }
.has-black-color { color: var(--haven-black); }
.has-white-color { color: var(--haven-white); }

/* Background colors - using theme colors */
.has-primary-background-color { background-color: var(--haven-primary); }
.has-secondary-background-color { background-color: var(--haven-secondary); }
.has-success-background-color { background-color: var(--haven-success); }
.has-warning-background-color { background-color: var(--haven-warning); }
.has-error-background-color { background-color: var(--haven-error); }
.has-black-background-color { background-color: var(--haven-black); }
.has-white-background-color { background-color: var(--haven-white); }


/* ==========================================================================
   9.0 - HAVEN CUSTOM BLOCKS (20+ Property Blocks)
   ==========================================================================
   
   Specialized blocks for vacation rental property displays and bookings.
   These are provider-agnostic and work with any booking system.
   ========================================================================== */

/**
 * 9.1 - Property Card Block
 */

.wp-block-haven-property-card {
  display: block;
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
  transition: var(--haven-transition-all);
  margin-bottom: var(--haven-space-6);
}

.wp-block-haven-property-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--haven-shadow-xl);
}

.haven-property-card__image {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.haven-property-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--haven-transition-transform);
}

.wp-block-haven-property-card:hover .haven-property-card__image img {
  transform: scale(1.05);
}

.haven-property-card__badge {
  position: absolute;
  top: var(--haven-space-4);
  right: var(--haven-space-4);
  padding: var(--haven-space-2) var(--haven-space-4);
  background-color: var(--haven-secondary);
  color: var(--haven-white);
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-semibold);
  border-radius: var(--haven-radius-full);
}

.haven-property-card__content {
  padding: var(--haven-space-6);
}

.haven-property-card__title {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-2);
}

.haven-property-card__location {
  display: flex;
  align-items: center;
  color: var(--haven-gray-600);
  font-size: var(--haven-text-sm);
  margin-bottom: var(--haven-space-4);
}

.haven-property-card__location::before {
  content: '📍';
  margin-right: var(--haven-space-2);
}

.haven-property-card__features {
  display: flex;
  gap: var(--haven-space-4);
  margin-bottom: var(--haven-space-4);
  padding-bottom: var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
}

.haven-property-card__feature {
  display: flex;
  align-items: center;
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-700);
}

.haven-property-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.haven-property-card__price {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
}

.haven-property-card__price-label {
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-regular);
  color: var(--haven-gray-600);
}

.haven-property-card__rating {
  display: flex;
  align-items: center;
  gap: var(--haven-space-1);
}

.haven-property-card__stars {
  color: var(--haven-secondary);
}

.haven-property-card__rating-count {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}


/**
 * 9.2 - Property Grid Block
 */

.wp-block-haven-property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--haven-grid-gap-lg);
  margin-bottom: var(--haven-space-12);
}

@media (max-width: 768px) {
  .wp-block-haven-property-grid {
    grid-template-columns: 1fr;
  }
}


/**
 * 9.3 - Property List Block
 */

.wp-block-haven-property-list {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-6);
  margin-bottom: var(--haven-space-12);
}

.haven-property-list-item {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--haven-space-6);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
  transition: var(--haven-transition-all);
}

.haven-property-list-item:hover {
  box-shadow: var(--haven-shadow-lg);
}

@media (max-width: 768px) {
  .haven-property-list-item {
    grid-template-columns: 1fr;
  }
}


/**
 * 9.4 - Property Search Block
 */

.wp-block-haven-property-search {
  padding: var(--haven-space-8);
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  box-shadow: var(--haven-shadow-lg);
  margin-bottom: var(--haven-space-12);
}

.haven-property-search__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--haven-space-4);
  align-items: end;
}

.haven-property-search__field {
  display: flex;
  flex-direction: column;
}

.haven-property-search__label {
  margin-bottom: var(--haven-space-2);
  font-weight: var(--haven-font-medium);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-700);
}

.haven-property-search__input,
.haven-property-search__select {
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-md);
  font-size: var(--haven-text-base);
}

.haven-property-search__button {
  padding: var(--haven-space-3) var(--haven-space-8);
  background-color: var(--haven-primary);
  color: var(--haven-white);
  border: none;
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-semibold);
  cursor: pointer;
  transition: var(--haven-transition-colors);
}

.haven-property-search__button:hover {
  background-color: var(--haven-primary-700);
}


/**
 * 9.5 - Property Filter Block
 */

.wp-block-haven-property-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-4);
  margin-bottom: var(--haven-space-8);
  padding: var(--haven-space-6);
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-xl);
}

.haven-property-filter__item {
  display: flex;
  flex-direction: column;
}

.haven-property-filter__label {
  margin-bottom: var(--haven-space-2);
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-700);
}

.haven-property-filter__control {
  padding: var(--haven-space-2) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-md);
  background: var(--haven-white);
}


/**
 * 9.6 - Booking Form Block
 */

.wp-block-haven-booking-form {
  padding: var(--haven-space-8);
  background: var(--haven-white);
  border: 2px solid var(--haven-primary-200);
  border-radius: var(--haven-radius-2xl);
  margin-bottom: var(--haven-space-12);
}

.haven-booking-form__header {
  margin-bottom: var(--haven-space-6);
  padding-bottom: var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
}

.haven-booking-form__title {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-2);
}

.haven-booking-form__subtitle {
  color: var(--haven-gray-600);
}

.haven-booking-form__field-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--haven-space-4);
  margin-bottom: var(--haven-space-6);
}

.haven-booking-form__field {
  display: flex;
  flex-direction: column;
}

.haven-booking-form__label {
  margin-bottom: var(--haven-space-2);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-700);
}

.haven-booking-form__input {
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-base);
  transition: var(--haven-transition-colors);
}

.haven-booking-form__input:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

.haven-booking-form__price-summary {
  padding: var(--haven-space-6);
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-xl);
  margin-bottom: var(--haven-space-6);
}

.haven-booking-form__price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--haven-space-3);
}

.haven-booking-form__price-total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--haven-space-4);
  border-top: 2px solid var(--haven-gray-300);
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
}

.haven-booking-form__submit {
  width: 100%;
  padding: var(--haven-space-4) var(--haven-space-6);
  background-color: var(--haven-primary);
  color: var(--haven-white);
  border: none;
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-semibold);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.haven-booking-form__submit:hover {
  background-color: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}


/**
 * 9.7 - Availability Calendar Block
 */

.wp-block-haven-availability-calendar {
  padding: var(--haven-space-6);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
  margin-bottom: var(--haven-space-8);
}

.haven-calendar {
  width: 100%;
}

.haven-calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--haven-space-4);
  padding-bottom: var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
}

.haven-calendar__month {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}

.haven-calendar__nav {
  display: flex;
  gap: var(--haven-space-2);
}

.haven-calendar__nav-button {
  padding: var(--haven-space-2) var(--haven-space-4);
  background: var(--haven-gray-100);
  border: none;
  border-radius: var(--haven-radius-md);
  cursor: pointer;
  transition: var(--haven-transition-colors);
}

.haven-calendar__nav-button:hover {
  background: var(--haven-primary);
  color: var(--haven-white);
}

.haven-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--haven-space-1);
}

.haven-calendar__day-header {
  padding: var(--haven-space-2);
  text-align: center;
  font-weight: var(--haven-font-semibold);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.haven-calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--haven-space-2);
  border-radius: var(--haven-radius-md);
  font-size: var(--haven-text-sm);
  cursor: pointer;
  transition: var(--haven-transition-colors);
}

.haven-calendar__day:hover {
  background: var(--haven-gray-100);
}

.haven-calendar__day--available {
  background: var(--haven-success-light);
  color: var(--haven-success-dark);
}

.haven-calendar__day--booked {
  background: var(--haven-error-light);
  color: var(--haven-error-dark);
  cursor: not-allowed;
}

.haven-calendar__day--selected {
  background: var(--haven-primary);
  color: var(--haven-white);
}

.haven-calendar__legend {
  display: flex;
  gap: var(--haven-space-4);
  justify-content: center;
  margin-top: var(--haven-space-4);
  padding-top: var(--haven-space-4);
  border-top: 1px solid var(--haven-gray-200);
}

.haven-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
  font-size: var(--haven-text-sm);
}

.haven-calendar__legend-color {
  width: 16px;
  height: 16px;
  border-radius: var(--haven-radius-sm);
}


/**
 * 9.8 - Pricing Display Block
 */

.wp-block-haven-pricing-display {
  padding: var(--haven-space-6);
  background: linear-gradient(135deg, var(--haven-primary-50), var(--haven-secondary-50));
  border-radius: var(--haven-radius-xl);
  margin-bottom: var(--haven-space-8);
}

.haven-pricing__featured {
  text-align: center;
  margin-bottom: var(--haven-space-4);
}

.haven-pricing__amount {
  font-size: var(--haven-text-5xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
  line-height: 1;
}

.haven-pricing__period {
  font-size: var(--haven-text-lg);
  color: var(--haven-gray-600);
  margin-top: var(--haven-space-2);
}

.haven-pricing__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--haven-space-4);
}

.haven-pricing__detail {
  padding: var(--haven-space-4);
  background: var(--haven-white);
  border-radius: var(--haven-radius-lg);
  text-align: center;
}

.haven-pricing__detail-label {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-1);
}

.haven-pricing__detail-value {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}


/**
 * 9.9 - Review System Block
 */

.wp-block-haven-review-system {
  margin-bottom: var(--haven-space-12);
}

.haven-reviews__summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--haven-space-8);
  padding: var(--haven-space-8);
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-xl);
  margin-bottom: var(--haven-space-8);
}

.haven-reviews__overall {
  text-align: center;
}

.haven-reviews__overall-score {
  font-size: var(--haven-text-6xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
  line-height: 1;
}

.haven-reviews__overall-stars {
  font-size: var(--haven-text-2xl);
  color: var(--haven-secondary);
  margin: var(--haven-space-2) 0;
}

.haven-reviews__overall-count {
  color: var(--haven-gray-600);
}

.haven-reviews__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-3);
}

.haven-reviews__category {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.haven-reviews__category-label {
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-700);
}

.haven-reviews__category-bar {
  flex: 1;
  height: 8px;
  background: var(--haven-gray-200);
  border-radius: var(--haven-radius-full);
  margin: 0 var(--haven-space-4);
  overflow: hidden;
}

.haven-reviews__category-fill {
  height: 100%;
  background: var(--haven-primary);
  border-radius: var(--haven-radius-full);
  transition: width var(--haven-duration-slower) var(--haven-ease-out);
}

.haven-reviews__category-score {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
}

.haven-reviews__list {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-6);
}

.haven-review {
  padding: var(--haven-space-6);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
}

.haven-review__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--haven-space-4);
}

.haven-review__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--haven-radius-full);
  margin-right: var(--haven-space-3);
}

.haven-review__author {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
}

.haven-review__date {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  margin-top: var(--haven-space-1);
}

.haven-review__rating {
  margin-left: auto;
  color: var(--haven-secondary);
}

.haven-review__content {
  color: var(--haven-gray-700);
  line-height: var(--haven-leading-relaxed);
}


/**
 * 9.10 - Host Profile Block
 */

.wp-block-haven-host-profile {
  padding: var(--haven-space-8);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-2xl);
  margin-bottom: var(--haven-space-12);
}

.haven-host__header {
  display: flex;
  gap: var(--haven-space-6);
  margin-bottom: var(--haven-space-6);
  padding-bottom: var(--haven-space-6);
  border-bottom: 1px solid var(--haven-gray-200);
}

.haven-host__avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--haven-radius-full);
  object-fit: cover;
  border: 4px solid var(--haven-primary-100);
}

.haven-host__info {
  flex: 1;
}

.haven-host__name {
  font-size: var(--haven-text-3xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-2);
}

.haven-host__title {
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-4);
}

.haven-host__stats {
  display: flex;
  gap: var(--haven-space-6);
}

.haven-host__stat {
  text-align: center;
}

.haven-host__stat-value {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
}

.haven-host__stat-label {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.haven-host__bio {
  margin-bottom: var(--haven-space-6);
  color: var(--haven-gray-700);
  line-height: var(--haven-leading-relaxed);
}

.haven-host__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-2);
  margin-bottom: var(--haven-space-6);
}

.haven-host__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--haven-space-2);
  padding: var(--haven-space-2) var(--haven-space-4);
  background: var(--haven-primary-50);
  color: var(--haven-primary-700);
  border-radius: var(--haven-radius-full);
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-medium);
}

.haven-host__contact {
  display: flex;
  gap: var(--haven-space-4);
}

.haven-host__contact-button {
  flex: 1;
  padding: var(--haven-space-3) var(--haven-space-6);
  text-align: center;
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-semibold);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.haven-host__contact-button--primary {
  background: var(--haven-primary);
  color: var(--haven-white);
  border: none;
}

.haven-host__contact-button--primary:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

.haven-host__contact-button--secondary {
  background: var(--haven-white);
  color: var(--haven-primary);
  border: 2px solid var(--haven-primary);
}

.haven-host__contact-button--secondary:hover {
  background: var(--haven-primary-50);
}


/**
 * 9.11 - Amenities List Block
 */

.wp-block-haven-amenities-list {
  padding: var(--haven-space-8);
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  margin-bottom: var(--haven-space-8);
}

.haven-amenities__title {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-6);
  color: var(--haven-gray-900);
}

.haven-amenities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--haven-space-4);
}

.haven-amenities__category {
  margin-bottom: var(--haven-space-6);
}

.haven-amenities__category-title {
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-800);
  margin-bottom: var(--haven-space-4);
  padding-bottom: var(--haven-space-2);
  border-bottom: 2px solid var(--haven-primary-200);
}

.haven-amenities__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.haven-amenities__item {
  display: flex;
  align-items: center;
  padding: var(--haven-space-2) 0;
  color: var(--haven-gray-700);
}

.haven-amenities__item::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--haven-space-3);
  background: var(--haven-success-light);
  color: var(--haven-success-dark);
  border-radius: var(--haven-radius-full);
  font-weight: var(--haven-font-bold);
  font-size: var(--haven-text-sm);
}


/**
 * 9.12 - Property Gallery Block
 */

.wp-block-haven-property-gallery {
  margin-bottom: var(--haven-space-12);
}

.haven-gallery__main {
  position: relative;
  height: 600px;
  margin-bottom: var(--haven-space-4);
  border-radius: var(--haven-radius-2xl);
  overflow: hidden;
}

.haven-gallery__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.haven-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--haven-space-4);
  pointer-events: none;
}

.haven-gallery__nav-button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--haven-white);
  border: none;
  border-radius: var(--haven-radius-full);
  box-shadow: var(--haven-shadow-lg);
  cursor: pointer;
  pointer-events: all;
  transition: var(--haven-transition-all);
}

.haven-gallery__nav-button:hover {
  background: var(--haven-primary);
  color: var(--haven-white);
  transform: scale(1.1);
}

.haven-gallery__thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--haven-space-4);
}

.haven-gallery__thumbnail {
  aspect-ratio: 4/3;
  border-radius: var(--haven-radius-lg);
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: var(--haven-transition-all);
}

.haven-gallery__thumbnail:hover {
  border-color: var(--haven-primary-300);
}

.haven-gallery__thumbnail.is-active {
  border-color: var(--haven-primary);
}

.haven-gallery__thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--haven-transition-transform);
}

.haven-gallery__thumbnail:hover .haven-gallery__thumbnail-image {
  transform: scale(1.05);
}


/**
 * 9.13 - Location Map Block
 */

.wp-block-haven-location-map {
  margin-bottom: var(--haven-space-12);
}

.haven-map__container {
  position: relative;
  height: 450px;
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
  border: 1px solid var(--haven-gray-200);
}

.haven-map__frame {
  width: 100%;
  height: 100%;
  border: none;
}

.haven-map__info {
  padding: var(--haven-space-6);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
  margin-top: var(--haven-space-4);
}

.haven-map__address {
  display: flex;
  align-items: start;
  gap: var(--haven-space-3);
  margin-bottom: var(--haven-space-4);
}

.haven-map__icon {
  color: var(--haven-primary);
  font-size: var(--haven-text-xl);
}

.haven-map__text {
  flex: 1;
  color: var(--haven-gray-700);
  line-height: var(--haven-leading-relaxed);
}

.haven-map__directions {
  display: inline-flex;
  align-items: center;
  gap: var(--haven-space-2);
  padding: var(--haven-space-3) var(--haven-space-6);
  background: var(--haven-primary);
  color: var(--haven-white);
  border-radius: var(--haven-radius-lg);
  text-decoration: none;
  font-weight: var(--haven-font-semibold);
  transition: var(--haven-transition-colors);
}

.haven-map__directions:hover {
  background: var(--haven-primary-700);
  text-decoration: none;
}


/**
 * 9.14 - Similar Properties Block
 */

.wp-block-haven-similar-properties {
  padding: var(--haven-space-12) 0;
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-2xl);
  margin-bottom: var(--haven-space-12);
}

.haven-similar__header {
  text-align: center;
  margin-bottom: var(--haven-space-8);
}

.haven-similar__title {
  font-size: var(--haven-text-4xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-2);
}

.haven-similar__subtitle {
  color: var(--haven-gray-600);
}

.haven-similar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--haven-space-6);
  padding: 0 var(--haven-space-6);
}


/**
 * 9.15 - Property Comparison Block
 */

.wp-block-haven-property-comparison {
  margin-bottom: var(--haven-space-12);
}

.haven-comparison__table {
  width: 100%;
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
}

.haven-comparison__header {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(250px, 1fr));
  background: var(--haven-gray-50);
  border-bottom: 2px solid var(--haven-gray-300);
}

.haven-comparison__header-cell {
  padding: var(--haven-space-6);
  font-weight: var(--haven-font-semibold);
  text-align: center;
}

.haven-comparison__row {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(250px, 1fr));
  border-bottom: 1px solid var(--haven-gray-200);
}

.haven-comparison__row:last-child {
  border-bottom: none;
}

.haven-comparison__label {
  padding: var(--haven-space-4) var(--haven-space-6);
  background: var(--haven-gray-50);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-900);
  display: flex;
  align-items: center;
}

.haven-comparison__cell {
  padding: var(--haven-space-4) var(--haven-space-6);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--haven-gray-700);
}


/**
 * 9.16 - Booking Summary Block
 */

.wp-block-haven-booking-summary {
  position: sticky;
  top: var(--haven-space-8);
  padding: var(--haven-space-8);
  background: var(--haven-white);
  border: 2px solid var(--haven-primary-200);
  border-radius: var(--haven-radius-2xl);
  box-shadow: var(--haven-shadow-xl);
  margin-bottom: var(--haven-space-8);
}

.haven-booking-summary__header {
  margin-bottom: var(--haven-space-6);
  padding-bottom: var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
}

.haven-booking-summary__title {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}

.haven-booking-summary__dates {
  margin-bottom: var(--haven-space-6);
}

.haven-booking-summary__date-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--haven-space-3);
}

.haven-booking-summary__date-label {
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-700);
}

.haven-booking-summary__date-value {
  color: var(--haven-gray-900);
}

.haven-booking-summary__pricing {
  padding: var(--haven-space-6);
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-lg);
  margin-bottom: var(--haven-space-6);
}

.haven-booking-summary__price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--haven-space-3);
}

.haven-booking-summary__price-label {
  color: var(--haven-gray-700);
}

.haven-booking-summary__price-value {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
}

.haven-booking-summary__total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--haven-space-4);
  border-top: 2px solid var(--haven-gray-300);
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
}

.haven-booking-summary__total-value {
  color: var(--haven-primary);
}

.haven-booking-summary__cta {
  width: 100%;
  padding: var(--haven-space-4) var(--haven-space-6);
  background: var(--haven-primary);
  color: var(--haven-white);
  border: none;
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-semibold);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.haven-booking-summary__cta:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}


/**
 * 9.17 - Guest Selector Block
 */

.wp-block-haven-guest-selector {
  padding: var(--haven-space-6);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-xl);
  margin-bottom: var(--haven-space-6);
}

.haven-guest-selector__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--haven-space-4) 0;
  border-bottom: 1px solid var(--haven-gray-200);
}

.haven-guest-selector__item:last-child {
  border-bottom: none;
}

.haven-guest-selector__label {
  flex: 1;
}

.haven-guest-selector__title {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-1);
}

.haven-guest-selector__subtitle {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.haven-guest-selector__controls {
  display: flex;
  align-items: center;
  gap: var(--haven-space-4);
}

.haven-guest-selector__button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--haven-gray-100);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-full);
  cursor: pointer;
  transition: var(--haven-transition-colors);
  font-weight: var(--haven-font-bold);
  font-size: var(--haven-text-lg);
}

.haven-guest-selector__button:hover:not(:disabled) {
  background: var(--haven-primary);
  color: var(--haven-white);
  border-color: var(--haven-primary);
}

.haven-guest-selector__button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.haven-guest-selector__value {
  min-width: 40px;
  text-align: center;
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
}


/**
 * 9.18 - Seasonal Pricing Block
 */

.wp-block-haven-seasonal-pricing {
  padding: var(--haven-space-8);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
  margin-bottom: var(--haven-space-12);
}

.haven-seasonal__title {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-6);
  text-align: center;
  color: var(--haven-gray-900);
}

.haven-seasonal__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--haven-space-2);
}

.haven-seasonal__row {
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-lg);
}

.haven-seasonal__cell {
  padding: var(--haven-space-4) var(--haven-space-6);
}

.haven-seasonal__cell:first-child {
  border-radius: var(--haven-radius-lg) 0 0 var(--haven-radius-lg);
}

.haven-seasonal__cell:last-child {
  border-radius: 0 var(--haven-radius-lg) var(--haven-radius-lg) 0;
}

.haven-seasonal__season {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
}

.haven-seasonal__dates {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.haven-seasonal__price {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
  text-align: right;
}

.haven-seasonal__note {
  margin-top: var(--haven-space-6);
  padding: var(--haven-space-4);
  background: var(--haven-info-light);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-sm);
  color: var(--haven-info-dark);
  text-align: center;
}


/**
 * 9.19 - Property Stats Block
 */

.wp-block-haven-property-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--haven-space-6);
  margin-bottom: var(--haven-space-12);
}

.haven-stat {
  padding: var(--haven-space-6);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
  text-align: center;
  transition: var(--haven-transition-all);
}

.haven-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--haven-shadow-lg);
}

.haven-stat__icon {
  font-size: var(--haven-text-4xl);
  margin-bottom: var(--haven-space-3);
}

.haven-stat__value {
  font-size: var(--haven-text-3xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
  margin-bottom: var(--haven-space-2);
}

.haven-stat__label {
  color: var(--haven-gray-600);
  font-size: var(--haven-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--haven-tracking-wide);
}


/**
 * 9.20 - Trust Badges Block
 */

.wp-block-haven-trust-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--haven-space-6);
  padding: var(--haven-space-8);
  margin-bottom: var(--haven-space-12);
}

.haven-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--haven-space-2);
  padding: var(--haven-space-4) var(--haven-space-6);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-lg);
  transition: var(--haven-transition-all);
}

.haven-trust-badge:hover {
  box-shadow: var(--haven-shadow-md);
}

.haven-trust-badge__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--haven-success-light);
  color: var(--haven-success-dark);
  border-radius: var(--haven-radius-full);
  font-size: var(--haven-text-2xl);
}

.haven-trust-badge__text {
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-700);
  text-align: center;
}


/* ==========================================================================
   10.0 - UTILITY CLASSES (250+ Utilities)
   ==========================================================================
   
   Comprehensive utility class system inspired by Tailwind CSS but
   optimized for Haven Theme's vacation rental use cases. All utilities
   include responsive variants at major breakpoints.
   
   Naming Convention: property-value or property-direction-value
   Responsive: breakpoint\:property-value
   State: state:property-value
   ========================================================================== */

/**
 * 10.1 - DISPLAY UTILITIES
 * 
 * Control element display types across breakpoints.
 */

/* Base display utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.table { display: table; }
.table-cell { display: table-cell; }
.table-row { display: table-row; }
.flow-root { display: flow-root; }
.contents { display: contents; }
.list-item { display: list-item; }
.hidden { display: none; }

/* Responsive display utilities - Small (≥576px) */
@media (min-width: 576px) {
  .sm\:block { display: block; }
  .sm\:inline-block { display: inline-block; }
  .sm\:inline { display: inline; }
  .sm\:flex { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:grid { display: grid; }
  .sm\:inline-grid { display: inline-grid; }
  .sm\:hidden { display: none; }
}

/* Responsive display utilities - Medium (≥768px) */
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:inline { display: inline; }
  .md\:flex { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:grid { display: grid; }
  .md\:inline-grid { display: inline-grid; }
  .md\:hidden { display: none; }
}

/* Responsive display utilities - Large (≥1024px) */
@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:inline-block { display: inline-block; }
  .lg\:inline { display: inline; }
  .lg\:flex { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:grid { display: grid; }
  .lg\:inline-grid { display: inline-grid; }
  .lg\:hidden { display: none; }
}

/* Responsive display utilities - Extra Large (≥1280px) */
@media (min-width: 1280px) {
  .xl\:block { display: block; }
  .xl\:inline-block { display: inline-block; }
  .xl\:inline { display: inline; }
  .xl\:flex { display: flex; }
  .xl\:inline-flex { display: inline-flex; }
  .xl\:grid { display: grid; }
  .xl\:inline-grid { display: inline-grid; }
  .xl\:hidden { display: none; }
}


/**
 * 10.2 - FLEXBOX UTILITIES
 * 
 * Complete flexbox layout utilities for rapid UI development.
 */

/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* Flex */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Flex Grow */
.flex-grow-0 { flex-grow: 0; }
.flex-grow { flex-grow: 1; }

/* Flex Shrink */
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink { flex-shrink: 1; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Content */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-baseline { align-self: baseline; }

/* Order */
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }

/* Responsive Flexbox - Medium */
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:flex-wrap { flex-wrap: wrap; }
  .md\:flex-nowrap { flex-wrap: nowrap; }
  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:items-start { align-items: flex-start; }
  .md\:items-center { align-items: center; }
  .md\:items-stretch { align-items: stretch; }
}

/* Responsive Flexbox - Large */
@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:flex-wrap { flex-wrap: wrap; }
  .lg\:flex-nowrap { flex-wrap: nowrap; }
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-center { align-items: center; }
  .lg\:items-stretch { align-items: stretch; }
}


/**
 * 10.3 - GRID UTILITIES
 * 
 * CSS Grid utilities for advanced layouts.
 */

/* Grid Template Columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }

/* Grid Template Rows */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid-rows-none { grid-template-rows: none; }

/* Grid Column Span */
.col-auto { grid-column: auto; }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Grid Row Span */
.row-auto { grid-row: auto; }
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }
.row-span-full { grid-row: 1 / -1; }

/* Grid Auto Flow */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }

/* Grid Auto Columns */
.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-min { grid-auto-columns: min-content; }
.auto-cols-max { grid-auto-columns: max-content; }
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

/* Grid Auto Rows */
.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-min { grid-auto-rows: min-content; }
.auto-rows-max { grid-auto-rows: max-content; }
.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

/* Gap Utilities */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--haven-space-1); }
.gap-2 { gap: var(--haven-space-2); }
.gap-3 { gap: var(--haven-space-3); }
.gap-4 { gap: var(--haven-space-4); }
.gap-5 { gap: var(--haven-space-5); }
.gap-6 { gap: var(--haven-space-6); }
.gap-8 { gap: var(--haven-space-8); }
.gap-10 { gap: var(--haven-space-10); }
.gap-12 { gap: var(--haven-space-12); }
.gap-16 { gap: var(--haven-space-16); }
.gap-20 { gap: var(--haven-space-20); }
.gap-24 { gap: var(--haven-space-24); }

/* Gap X (Column Gap) */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: var(--haven-space-1); }
.gap-x-2 { column-gap: var(--haven-space-2); }
.gap-x-3 { column-gap: var(--haven-space-3); }
.gap-x-4 { column-gap: var(--haven-space-4); }
.gap-x-6 { column-gap: var(--haven-space-6); }
.gap-x-8 { column-gap: var(--haven-space-8); }

/* Gap Y (Row Gap) */
.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: var(--haven-space-1); }
.gap-y-2 { row-gap: var(--haven-space-2); }
.gap-y-3 { row-gap: var(--haven-space-3); }
.gap-y-4 { row-gap: var(--haven-space-4); }
.gap-y-6 { row-gap: var(--haven-space-6); }
.gap-y-8 { row-gap: var(--haven-space-8); }

/* Responsive Grid - Medium */
@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
}

/* Responsive Grid - Large */
@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
}


/**
 * 10.4 - SPACING UTILITIES (MARGIN & PADDING)
 * 
 * Comprehensive spacing system based on 8px grid.
 * Includes margin (m) and padding (p) with all directional variants.
 */

/* Margin - All Sides */
.m-0 { margin: 0; }
.m-1 { margin: var(--haven-space-1); }
.m-2 { margin: var(--haven-space-2); }
.m-3 { margin: var(--haven-space-3); }
.m-4 { margin: var(--haven-space-4); }
.m-5 { margin: var(--haven-space-5); }
.m-6 { margin: var(--haven-space-6); }
.m-8 { margin: var(--haven-space-8); }
.m-10 { margin: var(--haven-space-10); }
.m-12 { margin: var(--haven-space-12); }
.m-16 { margin: var(--haven-space-16); }
.m-20 { margin: var(--haven-space-20); }
.m-24 { margin: var(--haven-space-24); }
.m-32 { margin: var(--haven-space-32); }
.m-auto { margin: auto; }

/* Margin - Horizontal (X-axis) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: var(--haven-space-1); margin-right: var(--haven-space-1); }
.mx-2 { margin-left: var(--haven-space-2); margin-right: var(--haven-space-2); }
.mx-3 { margin-left: var(--haven-space-3); margin-right: var(--haven-space-3); }
.mx-4 { margin-left: var(--haven-space-4); margin-right: var(--haven-space-4); }
.mx-6 { margin-left: var(--haven-space-6); margin-right: var(--haven-space-6); }
.mx-8 { margin-left: var(--haven-space-8); margin-right: var(--haven-space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin - Vertical (Y-axis) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--haven-space-1); margin-bottom: var(--haven-space-1); }
.my-2 { margin-top: var(--haven-space-2); margin-bottom: var(--haven-space-2); }
.my-3 { margin-top: var(--haven-space-3); margin-bottom: var(--haven-space-3); }
.my-4 { margin-top: var(--haven-space-4); margin-bottom: var(--haven-space-4); }
.my-6 { margin-top: var(--haven-space-6); margin-bottom: var(--haven-space-6); }
.my-8 { margin-top: var(--haven-space-8); margin-bottom: var(--haven-space-8); }
.my-12 { margin-top: var(--haven-space-12); margin-bottom: var(--haven-space-12); }

/* Margin - Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--haven-space-1); }
.mt-2 { margin-top: var(--haven-space-2); }
.mt-3 { margin-top: var(--haven-space-3); }
.mt-4 { margin-top: var(--haven-space-4); }
.mt-5 { margin-top: var(--haven-space-5); }
.mt-6 { margin-top: var(--haven-space-6); }
.mt-8 { margin-top: var(--haven-space-8); }
.mt-10 { margin-top: var(--haven-space-10); }
.mt-12 { margin-top: var(--haven-space-12); }
.mt-16 { margin-top: var(--haven-space-16); }
.mt-20 { margin-top: var(--haven-space-20); }
.mt-24 { margin-top: var(--haven-space-24); }

/* Margin - Right */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--haven-space-1); }
.mr-2 { margin-right: var(--haven-space-2); }
.mr-3 { margin-right: var(--haven-space-3); }
.mr-4 { margin-right: var(--haven-space-4); }
.mr-5 { margin-right: var(--haven-space-5); }
.mr-6 { margin-right: var(--haven-space-6); }
.mr-8 { margin-right: var(--haven-space-8); }
.mr-auto { margin-right: auto; }

/* Margin - Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--haven-space-1); }
.mb-2 { margin-bottom: var(--haven-space-2); }
.mb-3 { margin-bottom: var(--haven-space-3); }
.mb-4 { margin-bottom: var(--haven-space-4); }
.mb-5 { margin-bottom: var(--haven-space-5); }
.mb-6 { margin-bottom: var(--haven-space-6); }
.mb-8 { margin-bottom: var(--haven-space-8); }
.mb-10 { margin-bottom: var(--haven-space-10); }
.mb-12 { margin-bottom: var(--haven-space-12); }
.mb-16 { margin-bottom: var(--haven-space-16); }
.mb-20 { margin-bottom: var(--haven-space-20); }
.mb-24 { margin-bottom: var(--haven-space-24); }

/* Margin - Left */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--haven-space-1); }
.ml-2 { margin-left: var(--haven-space-2); }
.ml-3 { margin-left: var(--haven-space-3); }
.ml-4 { margin-left: var(--haven-space-4); }
.ml-5 { margin-left: var(--haven-space-5); }
.ml-6 { margin-left: var(--haven-space-6); }
.ml-8 { margin-left: var(--haven-space-8); }
.ml-auto { margin-left: auto; }

/* Negative Margins */
.-m-1 { margin: calc(var(--haven-space-1) * -1); }
.-m-2 { margin: calc(var(--haven-space-2) * -1); }
.-m-4 { margin: calc(var(--haven-space-4) * -1); }
.-mt-1 { margin-top: calc(var(--haven-space-1) * -1); }
.-mt-2 { margin-top: calc(var(--haven-space-2) * -1); }
.-mt-4 { margin-top: calc(--haven-space-4) * -1); }
.-mr-1 { margin-right: calc(var(--haven-space-1) * -1); }
.-mr-2 { margin-right: calc(var(--haven-space-2) * -1); }
.-mb-1 { margin-bottom: calc(var(--haven-space-1) * -1); }
.-mb-2 { margin-bottom: calc(var(--haven-space-2) * -1); }
.-ml-1 { margin-left: calc(var(--haven-space-1) * -1); }
.-ml-2 { margin-left: calc(var(--haven-space-2) * -1); }

/* Padding - All Sides */
.p-0 { padding: 0; }
.p-1 { padding: var(--haven-space-1); }
.p-2 { padding: var(--haven-space-2); }
.p-3 { padding: var(--haven-space-3); }
.p-4 { padding: var(--haven-space-4); }
.p-5 { padding: var(--haven-space-5); }
.p-6 { padding: var(--haven-space-6); }
.p-8 { padding: var(--haven-space-8); }
.p-10 { padding: var(--haven-space-10); }
.p-12 { padding: var(--haven-space-12); }
.p-16 { padding: var(--haven-space-16); }
.p-20 { padding: var(--haven-space-20); }
.p-24 { padding: var(--haven-space-24); }

/* Padding - Horizontal (X-axis) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--haven-space-1); padding-right: var(--haven-space-1); }
.px-2 { padding-left: var(--haven-space-2); padding-right: var(--haven-space-2); }
.px-3 { padding-left: var(--haven-space-3); padding-right: var(--haven-space-3); }
.px-4 { padding-left: var(--haven-space-4); padding-right: var(--haven-space-4); }
.px-5 { padding-left: var(--haven-space-5); padding-right: var(--haven-space-5); }
.px-6 { padding-left: var(--haven-space-6); padding-right: var(--haven-space-6); }
.px-8 { padding-left: var(--haven-space-8); padding-right: var(--haven-space-8); }
.px-10 { padding-left: var(--haven-space-10); padding-right: var(--haven-space-10); }

/* Padding - Vertical (Y-axis) */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--haven-space-1); padding-bottom: var(--haven-space-1); }
.py-2 { padding-top: var(--haven-space-2); padding-bottom: var(--haven-space-2); }
.py-3 { padding-top: var(--haven-space-3); padding-bottom: var(--haven-space-3); }
.py-4 { padding-top: var(--haven-space-4); padding-bottom: var(--haven-space-4); }
.py-5 { padding-top: var(--haven-space-5); padding-bottom: var(--haven-space-5); }
.py-6 { padding-top: var(--haven-space-6); padding-bottom: var(--haven-space-6); }
.py-8 { padding-top: var(--haven-space-8); padding-bottom: var(--haven-space-8); }
.py-10 { padding-top: var(--haven-space-10); padding-bottom: var(--haven-space-10); }
.py-12 { padding-top: var(--haven-space-12); padding-bottom: var(--haven-space-12); }

/* Padding - Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--haven-space-1); }
.pt-2 { padding-top: var(--haven-space-2); }
.pt-3 { padding-top: var(--haven-space-3); }
.pt-4 { padding-top: var(--haven-space-4); }
.pt-5 { padding-top: var(--haven-space-5); }
.pt-6 { padding-top: var(--haven-space-6); }
.pt-8 { padding-top: var(--haven-space-8); }
.pt-10 { padding-top: var(--haven-space-10); }
.pt-12 { padding-top: var(--haven-space-12); }

/* Padding - Right */
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--haven-space-1); }
.pr-2 { padding-right: var(--haven-space-2); }
.pr-3 { padding-right: var(--haven-space-3); }
.pr-4 { padding-right: var(--haven-space-4); }
.pr-5 { padding-right: var(--haven-space-5); }
.pr-6 { padding-right: var(--haven-space-6); }
.pr-8 { padding-right: var(--haven-space-8); }

/* Padding - Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--haven-space-1); }
.pb-2 { padding-bottom: var(--haven-space-2); }
.pb-3 { padding-bottom: var(--haven-space-3); }
.pb-4 { padding-bottom: var(--haven-space-4); }
.pb-5 { padding-bottom: var(--haven-space-5); }
.pb-6 { padding-bottom: var(--haven-space-6); }
.pb-8 { padding-bottom: var(--haven-space-8); }
.pb-10 { padding-bottom: var(--haven-space-10); }
.pb-12 { padding-bottom: var(--haven-space-12); }

/* Padding - Left */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--haven-space-1); }
.pl-2 { padding-left: var(--haven-space-2); }
.pl-3 { padding-left: var(--haven-space-3); }
.pl-4 { padding-left: var(--haven-space-4); }
.pl-5 { padding-left: var(--haven-space-5); }
.pl-6 { padding-left: var(--haven-space-6); }
.pl-8 { padding-left: var(--haven-space-8); }

/* Space Between - For flex and grid children */
.space-x-0 > * + * { margin-left: 0; }
.space-x-1 > * + * { margin-left: var(--haven-space-1); }
.space-x-2 > * + * { margin-left: var(--haven-space-2); }
.space-x-3 > * + * { margin-left: var(--haven-space-3); }
.space-x-4 > * + * { margin-left: var(--haven-space-4); }
.space-x-6 > * + * { margin-left: var(--haven-space-6); }
.space-x-8 > * + * { margin-left: var(--haven-space-8); }

.space-y-0 > * + * { margin-top: 0; }
.space-y-1 > * + * { margin-top: var(--haven-space-1); }
.space-y-2 > * + * { margin-top: var(--haven-space-2); }
.space-y-3 > * + * { margin-top: var(--haven-space-3); }
.space-y-4 > * + * { margin-top: var(--haven-space-4); }
.space-y-6 > * + * { margin-top: var(--haven-space-6); }
.space-y-8 > * + * { margin-top: var(--haven-space-8); }


/**
 * 10.5 - WIDTH & HEIGHT UTILITIES
 * 
 * Sizing utilities for precise layout control.
 */

/* Width */
.w-0 { width: 0; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

/* Fractional widths */
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-2\/4 { width: 50%; }
.w-3\/4 { width: 75%; }
.w-1\/5 { width: 20%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }
.w-1\/6 { width: 16.666667%; }
.w-5\/6 { width: 83.333333%; }

/* Fixed widths */
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.w-56 { width: 14rem; }
.w-64 { width: 16rem; }
.w-80 { width: 20rem; }
.w-96 { width: 24rem; }

/* Min Width */
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.min-w-min { min-width: min-content; }
.min-w-max { min-width: max-content; }
.min-w-fit { min-width: fit-content; }

/* Max Width */
.max-w-0 { max-width: 0; }
.max-w-none { max-width: none; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }

/* Height */
.h-0 { height: 0; }
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }

/* Fixed heights */
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }
.h-80 { height: 20rem; }
.h-96 { height: 24rem; }

/* Min Height */
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Max Height */
.max-h-0 { max-height: 0; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }
.max-h-none { max-height: none; }


/**
 * 10.6 - TYPOGRAPHY UTILITIES
 * 
 * Complete typography control utilities.
 */

/* Font Family */
.font-sans { font-family: var(--haven-font-primary); }
.font-serif { font-family: var(--haven-font-secondary); }
.font-mono { font-family: var(--haven-font-mono); }

/* Font Size */
.text-xs { font-size: var(--haven-text-xs); }
.text-sm { font-size: var(--haven-text-sm); }
.text-base { font-size: var(--haven-text-base); }
.text-lg { font-size: var(--haven-text-lg); }
.text-xl { font-size: var(--haven-text-xl); }
.text-2xl { font-size: var(--haven-text-2xl); }
.text-3xl { font-size: var(--haven-text-3xl); }
.text-4xl { font-size: var(--haven-text-4xl); }
.text-5xl { font-size: var(--haven-text-5xl); }
.text-6xl { font-size: var(--haven-text-6xl); }
.text-7xl { font-size: var(--haven-text-7xl); }
.text-8xl { font-size: var(--haven-text-8xl); }

/* Font Weight */
.font-thin { font-weight: var(--haven-font-thin); }
.font-extralight { font-weight: var(--haven-font-extralight); }
.font-light { font-weight: var(--haven-font-light); }
.font-normal { font-weight: var(--haven-font-regular); }
.font-medium { font-weight: var(--haven-font-medium); }
.font-semibold { font-weight: var(--haven-font-semibold); }
.font-bold { font-weight: var(--haven-font-bold); }
.font-extrabold { font-weight: var(--haven-font-extrabold); }
.font-black { font-weight: var(--haven-font-black); }

/* Font Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Line Height */
.leading-none { line-height: var(--haven-leading-none); }
.leading-tight { line-height: var(--haven-leading-tight); }
.leading-snug { line-height: var(--haven-leading-snug); }
.leading-normal { line-height: var(--haven-leading-normal); }
.leading-relaxed { line-height: var(--haven-leading-relaxed); }
.leading-loose { line-height: var(--haven-leading-loose); }

/* Letter Spacing */
.tracking-tighter { letter-spacing: var(--haven-tracking-tighter); }
.tracking-tight { letter-spacing: var(--haven-tracking-tight); }
.tracking-normal { letter-spacing: var(--haven-tracking-normal); }
.tracking-wide { letter-spacing: var(--haven-tracking-wide); }
.tracking-wider { letter-spacing: var(--haven-tracking-wider); }
.tracking-widest { letter-spacing: var(--haven-tracking-widest); }

/* Text Align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Color - Primary Shades */
.text-primary { color: var(--haven-primary); }
.text-primary-50 { color: var(--haven-primary-50); }
.text-primary-100 { color: var(--haven-primary-100); }
.text-primary-200 { color: var(--haven-primary-200); }
.text-primary-300 { color: var(--haven-primary-300); }
.text-primary-400 { color: var(--haven-primary-400); }
.text-primary-500 { color: var(--haven-primary-500); }
.text-primary-600 { color: var(--haven-primary-600); }
.text-primary-700 { color: var(--haven-primary-700); }
.text-primary-800 { color: var(--haven-primary-800); }
.text-primary-900 { color: var(--haven-primary-900); }

/* Text Color - Secondary Shades */
.text-secondary { color: var(--haven-secondary); }
.text-secondary-50 { color: var(--haven-secondary-50); }
.text-secondary-100 { color: var(--haven-secondary-100); }
.text-secondary-200 { color: var(--haven-secondary-200); }
.text-secondary-300 { color: var(--haven-secondary-300); }
.text-secondary-400 { color: var(--haven-secondary-400); }
.text-secondary-500 { color: var(--haven-secondary-500); }
.text-secondary-600 { color: var(--haven-secondary-600); }
.text-secondary-700 { color: var(--haven-secondary-700); }
.text-secondary-800 { color: var(--haven-secondary-800); }
.text-secondary-900 { color: var(--haven-secondary-900); }

/* Text Color - Grayscale */
.text-white { color: var(--haven-white); }
.text-black { color: var(--haven-black); }
.text-gray-50 { color: var(--haven-gray-50); }
.text-gray-100 { color: var(--haven-gray-100); }
.text-gray-200 { color: var(--haven-gray-200); }
.text-gray-300 { color: var(--haven-gray-300); }
.text-gray-400 { color: var(--haven-gray-400); }
.text-gray-500 { color: var(--haven-gray-500); }
.text-gray-600 { color: var(--haven-gray-600); }
.text-gray-700 { color: var(--haven-gray-700); }
.text-gray-800 { color: var(--haven-gray-800); }
.text-gray-900 { color: var(--haven-gray-900); }

/* Text Color - Semantic */
.text-success { color: var(--haven-success); }
.text-warning { color: var(--haven-warning); }
.text-error { color: var(--haven-error); }
.text-info { color: var(--haven-info); }

/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text Overflow */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-ellipsis { text-overflow: ellipsis; }
.overflow-clip { text-overflow: clip; }

/* Whitespace */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* Word Break */
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }


/**
 * 10.7 - BACKGROUND UTILITIES
 * 
 * Background color utilities for all theme colors.
 */

/* Background Color - Primary Shades */
.bg-primary { background-color: var(--haven-primary); }
.bg-primary-50 { background-color: var(--haven-primary-50); }
.bg-primary-100 { background-color: var(--haven-primary-100); }
.bg-primary-200 { background-color: var(--haven-primary-200); }
.bg-primary-300 { background-color: var(--haven-primary-300); }
.bg-primary-400 { background-color: var(--haven-primary-400); }
.bg-primary-500 { background-color: var(--haven-primary-500); }
.bg-primary-600 { background-color: var(--haven-primary-600); }
.bg-primary-700 { background-color: var(--haven-primary-700); }
.bg-primary-800 { background-color: var(--haven-primary-800); }
.bg-primary-900 { background-color: var(--haven-primary-900); }

/* Background Color - Secondary Shades */
.bg-secondary { background-color: var(--haven-secondary); }
.bg-secondary-50 { background-color: var(--haven-secondary-50); }
.bg-secondary-100 { background-color: var(--haven-secondary-100); }
.bg-secondary-200 { background-color: var(--haven-secondary-200); }
.bg-secondary-300 { background-color: var(--haven-secondary-300); }
.bg-secondary-400 { background-color: var(--haven-secondary-400); }
.bg-secondary-500 { background-color: var(--haven-secondary-500); }
.bg-secondary-600 { background-color: var(--haven-secondary-600); }
.bg-secondary-700 { background-color: var(--haven-secondary-700); }
.bg-secondary-800 { background-color: var(--haven-secondary-800); }
.bg-secondary-900 { background-color: var(--haven-secondary-900); }

/* Background Color - Grayscale */
.bg-white { background-color: var(--haven-white); }
.bg-black { background-color: var(--haven-black); }
.bg-gray-50 { background-color: var(--haven-gray-50); }
.bg-gray-100 { background-color: var(--haven-gray-100); }
.bg-gray-200 { background-color: var(--haven-gray-200); }
.bg-gray-300 { background-color: var(--haven-gray-300); }
.bg-gray-400 { background-color: var(--haven-gray-400); }
.bg-gray-500 { background-color: var(--haven-gray-500); }
.bg-gray-600 { background-color: var(--haven-gray-600); }
.bg-gray-700 { background-color: var(--haven-gray-700); }
.bg-gray-800 { background-color: var(--haven-gray-800); }
.bg-gray-900 { background-color: var(--haven-gray-900); }

/* Background Color - Semantic */
.bg-success { background-color: var(--haven-success); }
.bg-success-light { background-color: var(--haven-success-light); }
.bg-success-dark { background-color: var(--haven-success-dark); }
.bg-warning { background-color: var(--haven-warning); }
.bg-warning-light { background-color: var(--haven-warning-light); }
.bg-warning-dark { background-color: var(--haven-warning-dark); }
.bg-error { background-color: var(--haven-error); }
.bg-error-light { background-color: var(--haven-error-light); }
.bg-error-dark { background-color: var(--haven-error-dark); }
.bg-info { background-color: var(--haven-info); }
.bg-info-light { background-color: var(--haven-info-light); }
.bg-info-dark { background-color: var(--haven-info-dark); }

/* Background Utilities */
.bg-transparent { background-color: transparent; }
.bg-current { background-color: currentColor; }

/* Background Position */
.bg-bottom { background-position: bottom; }
.bg-center { background-position: center; }
.bg-left { background-position: left; }
.bg-left-bottom { background-position: left bottom; }
.bg-left-top { background-position: left top; }
.bg-right { background-position: right; }
.bg-right-bottom { background-position: right bottom; }
.bg-right-top { background-position: right top; }
.bg-top { background-position: top; }

/* Background Repeat */
.bg-repeat { background-repeat: repeat; }
.bg-no-repeat { background-repeat: no-repeat; }
.bg-repeat-x { background-repeat: repeat-x; }
.bg-repeat-y { background-repeat: repeat-y; }
.bg-repeat-round { background-repeat: round; }
.bg-repeat-space { background-repeat: space; }

/* Background Size */
.bg-auto { background-size: auto; }
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }


/**
 * 10.8 - BORDER UTILITIES
 * 
 * Border styling utilities for all sides and colors.
 */

/* Border Width - All Sides */
.border-0 { border-width: 0; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-8 { border-width: 8px; }

/* Border Width - Individual Sides */
.border-t-0 { border-top-width: 0; }
.border-t { border-top-width: 1px; }
.border-t-2 { border-top-width: 2px; }
.border-t-4 { border-top-width: 4px; }

.border-r-0 { border-right-width: 0; }
.border-r { border-right-width: 1px; }
.border-r-2 { border-right-width: 2px; }
.border-r-4 { border-right-width: 4px; }

.border-b-0 { border-bottom-width: 0; }
.border-b { border-bottom-width: 1px; }
.border-b-2 { border-bottom-width: 2px; }
.border-b-4 { border-bottom-width: 4px; }

.border-l-0 { border-left-width: 0; }
.border-l { border-left-width: 1px; }
.border-l-2 { border-left-width: 2px; }
.border-l-4 { border-left-width: 4px; }

/* Border Style */
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-double { border-style: double; }
.border-none { border-style: none; }

/* Border Color - Primary */
.border-primary { border-color: var(--haven-primary); }
.border-primary-200 { border-color: var(--haven-primary-200); }
.border-primary-300 { border-color: var(--haven-primary-300); }
.border-primary-400 { border-color: var(--haven-primary-400); }

/* Border Color - Secondary */
.border-secondary { border-color: var(--haven-secondary); }
.border-secondary-200 { border-color: var(--haven-secondary-200); }
.border-secondary-300 { border-color: var(--haven-secondary-300); }

/* Border Color - Grayscale */
.border-white { border-color: var(--haven-white); }
.border-black { border-color: var(--haven-black); }
.border-gray-100 { border-color: var(--haven-gray-100); }
.border-gray-200 { border-color: var(--haven-gray-200); }
.border-gray-300 { border-color: var(--haven-gray-300); }
.border-gray-400 { border-color: var(--haven-gray-400); }
.border-gray-500 { border-color: var(--haven-gray-500); }
.border-gray-600 { border-color: var(--haven-gray-600); }

/* Border Color - Semantic */
.border-success { border-color: var(--haven-success); }
.border-warning { border-color: var(--haven-warning); }
.border-error { border-color: var(--haven-error); }
.border-info { border-color: var(--haven-info); }

/* Border Color - Utilities */
.border-transparent { border-color: transparent; }
.border-current { border-color: currentColor; }


/**
 * 10.9 - BORDER RADIUS UTILITIES
 * 
 * Border radius utilities for rounded corners.
 */

/* Border Radius - All Corners */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--haven-radius-sm); }
.rounded { border-radius: var(--haven-radius-base); }
.rounded-md { border-radius: var(--haven-radius-md); }
.rounded-lg { border-radius: var(--haven-radius-lg); }
.rounded-xl { border-radius: var(--haven-radius-xl); }
.rounded-2xl { border-radius: var(--haven-radius-2xl); }
.rounded-3xl { border-radius: var(--haven-radius-3xl); }
.rounded-full { border-radius: var(--haven-radius-full); }

/* Border Radius - Individual Sides */
.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-t-sm { border-top-left-radius: var(--haven-radius-sm); border-top-right-radius: var(--haven-radius-sm); }
.rounded-t { border-top-left-radius: var(--haven-radius-base); border-top-right-radius: var(--haven-radius-base); }
.rounded-t-md { border-top-left-radius: var(--haven-radius-md); border-top-right-radius: var(--haven-radius-md); }
.rounded-t-lg { border-top-left-radius: var(--haven-radius-lg); border-top-right-radius: var(--haven-radius-lg); }
.rounded-t-xl { border-top-left-radius: var(--haven-radius-xl); border-top-right-radius: var(--haven-radius-xl); }
.rounded-t-2xl { border-top-left-radius: var(--haven-radius-2xl); border-top-right-radius: var(--haven-radius-2xl); }
.rounded-t-full { border-top-left-radius: var(--haven-radius-full); border-top-right-radius: var(--haven-radius-full); }

.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-r { border-top-right-radius: var(--haven-radius-base); border-bottom-right-radius: var(--haven-radius-base); }
.rounded-r-lg { border-top-right-radius: var(--haven-radius-lg); border-bottom-right-radius: var(--haven-radius-lg); }

.rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-b { border-bottom-left-radius: var(--haven-radius-base); border-bottom-right-radius: var(--haven-radius-base); }
.rounded-b-lg { border-bottom-left-radius: var(--haven-radius-lg); border-bottom-right-radius: var(--haven-radius-lg); }

.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-l { border-top-left-radius: var(--haven-radius-base); border-bottom-left-radius: var(--haven-radius-base); }
.rounded-l-lg { border-top-left-radius: var(--haven-radius-lg); border-bottom-left-radius: var(--haven-radius-lg); }

/* Border Radius - Individual Corners */
.rounded-tl-none { border-top-left-radius: 0; }
.rounded-tl { border-top-left-radius: var(--haven-radius-base); }
.rounded-tl-lg { border-top-left-radius: var(--haven-radius-lg); }
.rounded-tl-xl { border-top-left-radius: var(--haven-radius-xl); }

.rounded-tr-none { border-top-right-radius: 0; }
.rounded-tr { border-top-right-radius: var(--haven-radius-base); }
.rounded-tr-lg { border-top-right-radius: var(--haven-radius-lg); }
.rounded-tr-xl { border-top-right-radius: var(--haven-radius-xl); }

.rounded-br-none { border-bottom-right-radius: 0; }
.rounded-br { border-bottom-right-radius: var(--haven-radius-base); }
.rounded-br-lg { border-bottom-right-radius: var(--haven-radius-lg); }
.rounded-br-xl { border-bottom-right-radius: var(--haven-radius-xl); }

.rounded-bl-none { border-bottom-left-radius: 0; }
.rounded-bl { border-bottom-left-radius: var(--haven-radius-base); }
.rounded-bl-lg { border-bottom-left-radius: var(--haven-radius-lg); }
.rounded-bl-xl { border-bottom-left-radius: var(--haven-radius-xl); }


/**
 * 10.10 - SHADOW UTILITIES
 * 
 * Box shadow utilities for depth and elevation.
 */

.shadow-xs { box-shadow: var(--haven-shadow-xs); }
.shadow-sm { box-shadow: var(--haven-shadow-sm); }
.shadow { box-shadow: var(--haven-shadow); }
.shadow-md { box-shadow: var(--haven-shadow-md); }
.shadow-lg { box-shadow: var(--haven-shadow-lg); }
.shadow-xl { box-shadow: var(--haven-shadow-xl); }
.shadow-2xl { box-shadow: var(--haven-shadow-2xl); }
.shadow-inner { box-shadow: var(--haven-shadow-inner); }
.shadow-none { box-shadow: none; }

/* Hover Shadow States */
.hover\:shadow:hover { box-shadow: var(--haven-shadow); }
.hover\:shadow-md:hover { box-shadow: var(--haven-shadow-md); }
.hover\:shadow-lg:hover { box-shadow: var(--haven-shadow-lg); }
.hover\:shadow-xl:hover { box-shadow: var(--haven-shadow-xl); }
.hover\:shadow-2xl:hover { box-shadow: var(--haven-shadow-2xl); }
.hover\:shadow-none:hover { box-shadow: none; }


/**
 * 10.11 - POSITION UTILITIES
 * 
 * Positioning utilities for layout control.
 */

.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

/* Position Values */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-auto { top: auto; right: auto; bottom: auto; left: auto; }
.inset-x-0 { left: 0; right: 0; }
.inset-x-auto { left: auto; right: auto; }
.inset-y-0 { top: 0; bottom: 0; }
.inset-y-auto { top: auto; bottom: auto; }

.top-0 { top: 0; }
.top-auto { top: auto; }
.top-full { top: 100%; }
.right-0 { right: 0; }
.right-auto { right: auto; }
.right-full { right: 100%; }
.bottom-0 { bottom: 0; }
.bottom-auto { bottom: auto; }
.bottom-full { bottom: 100%; }
.left-0 { left: 0; }
.left-auto { left: auto; }
.left-full { left: 100%; }


/**
 * 10.12 - OVERFLOW UTILITIES
 * 
 * Control overflow behavior.
 */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-clip { overflow: clip; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-x-clip { overflow-x: clip; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-clip { overflow-y: clip; }

/* Scrollbar Styling */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--haven-gray-400);
  border-radius: var(--haven-radius-full);
}

.scrollbar-thin::-webkit-scrollbar-track {
  background-color: var(--haven-gray-100);
}


/**
 * 10.13 - VISIBILITY UTILITIES
 * 
 * Control element visibility.
 */

.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Responsive Visibility */
@media (max-width: 767px) {
  .hide-mobile { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none; }
}


/**
 * 10.14 - Z-INDEX UTILITIES
 * 
 * Layer stacking utilities.
 */

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* Special z-index values */
.z-dropdown { z-index: var(--haven-z-dropdown); }
.z-sticky { z-index: var(--haven-z-sticky); }
.z-fixed { z-index: var(--haven-z-fixed); }
.z-modal-backdrop { z-index: var(--haven-z-modal-backdrop); }
.z-modal { z-index: var(--haven-z-modal); }
.z-popover { z-index: var(--haven-z-popover); }
.z-tooltip { z-index: var(--haven-z-tooltip); }


/**
 * 10.15 - CURSOR UTILITIES
 * 
 * Change cursor appearance.
 */

.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-help { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-none { cursor: none; }
.cursor-context-menu { cursor: context-menu; }
.cursor-progress { cursor: progress; }
.cursor-cell { cursor: cell; }
.cursor-crosshair { cursor: crosshair; }
.cursor-vertical-text { cursor: vertical-text; }
.cursor-alias { cursor: alias; }
.cursor-copy { cursor: copy; }
.cursor-no-drop { cursor: no-drop; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-zoom-in { cursor: zoom-in; }
.cursor-zoom-out { cursor: zoom-out; }


/**
 * 10.16 - POINTER EVENTS UTILITIES
 * 
 * Control pointer event handling.
 */

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


/**
 * 10.17 - USER SELECT UTILITIES
 * 
 * Control text selection.
 */

.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.select-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all;
}

.select-auto {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}


/**
 * 10.18 - OPACITY UTILITIES
 * 
 * Control element opacity.
 */

.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/* Hover Opacity States */
.hover\:opacity-0:hover { opacity: 0; }
.hover\:opacity-50:hover { opacity: 0.5; }
.hover\:opacity-75:hover { opacity: 0.75; }
.hover\:opacity-100:hover { opacity: 1; }


/**
 * 10.19 - TRANSITION UTILITIES
 * 
 * Transition and animation utilities.
 */

/* Transition Property */
.transition-none { transition-property: none; }
.transition-all { transition-property: all; }
.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
}
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
}
.transition-opacity { transition-property: opacity; }
.transition-shadow { transition-property: box-shadow; }
.transition-transform { transition-property: transform; }

/* Transition Duration */
.duration-75 { transition-duration: 75ms; }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

/* Transition Timing Function */
.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: var(--haven-ease-in); }
.ease-out { transition-timing-function: var(--haven-ease-out); }
.ease-in-out { transition-timing-function: var(--haven-ease-in-out); }


/**
 * 10.20 - TRANSFORM UTILITIES
 * 
 * Transform property utilities.
 */

/* Transform */
.transform { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.transform-none { transform: none; }
.transform-gpu {
  transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), 0) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
}

/* Scale */
.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; }
.scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5; }
.scale-75 { --tw-scale-x: 0.75; --tw-scale-y: 0.75; }
.scale-90 { --tw-scale-x: 0.9; --tw-scale-y: 0.9; }
.scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; }
.scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }
.scale-125 { --tw-scale-x: 1.25; --tw-scale-y: 1.25; }
.scale-150 { --tw-scale-x: 1.5; --tw-scale-y: 1.5; }

/* Hover Scale */
.hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.hover\:scale-110:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }

/* Rotate */
.rotate-0 { --tw-rotate: 0deg; }
.rotate-45 { --tw-rotate: 45deg; }
.rotate-90 { --tw-rotate: 90deg; }
.rotate-180 { --tw-rotate: 180deg; }
.-rotate-45 { --tw-rotate: -45deg; }
.-rotate-90 { --tw-rotate: -90deg; }
.-rotate-180 { --tw-rotate: -180deg; }

/* Translate */
.translate-x-0 { --tw-translate-x: 0; }
.translate-x-full { --tw-translate-x: 100%; }
.-translate-x-full { --tw-translate-x: -100%; }
.translate-y-0 { --tw-translate-y: 0; }
.translate-y-full { --tw-translate-y: 100%; }
.-translate-y-full { --tw-translate-y: -100%; }

/* Transform Origin */
.origin-center { transform-origin: center; }
.origin-top { transform-origin: top; }
.origin-top-right { transform-origin: top right; }
.origin-right { transform-origin: right; }
.origin-bottom-right { transform-origin: bottom right; }
.origin-bottom { transform-origin: bottom; }
.origin-bottom-left { transform-origin: bottom left; }
.origin-left { transform-origin: left; }
.origin-top-left { transform-origin: top left; }


/**
 * 10.21 - HOVER & FOCUS STATE UTILITIES
 * 
 * Hover and focus state utilities for interactive elements.
 */

/* Hover Text Colors */
.hover\:text-primary:hover { color: var(--haven-primary); }
.hover\:text-primary-700:hover { color: var(--haven-primary-700); }
.hover\:text-secondary:hover { color: var(--haven-secondary); }
.hover\:text-white:hover { color: var(--haven-white); }
.hover\:text-gray-900:hover { color: var(--haven-gray-900); }

/* Hover Background Colors */
.hover\:bg-primary:hover { background-color: var(--haven-primary); }
.hover\:bg-primary-50:hover { background-color: var(--haven-primary-50); }
.hover\:bg-primary-700:hover { background-color: var(--haven-primary-700); }
.hover\:bg-secondary:hover { background-color: var(--haven-secondary); }
.hover\:bg-gray-50:hover { background-color: var(--haven-gray-50); }
.hover\:bg-gray-100:hover { background-color: var(--haven-gray-100); }
.hover\:bg-white:hover { background-color: var(--haven-white); }

/* Hover Border Colors */
.hover\:border-primary:hover { border-color: var(--haven-primary); }
.hover\:border-secondary:hover { border-color: var(--haven-secondary); }
.hover\:border-gray-400:hover { border-color: var(--haven-gray-400); }

/* Focus States */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring:focus { box-shadow: var(--haven-shadow-focus); }
.focus\:ring-primary:focus { box-shadow: 0 0 0 3px rgba(var(--haven-primary-rgb), 0.3); }
.focus\:border-primary:focus { border-color: var(--haven-primary); }


/* ==========================================================================
   11.0 - COMPONENT LIBRARY (60+ Components)
   ==========================================================================
   
   Professional UI component library providing reusable, accessible
   components for rapid application development. All components follow
   Haven Theme design system and work seamlessly with utility classes.
   ========================================================================== */

/**
 * 11.1 - BUTTONS (12 Variants, 5 Sizes)
 * 
 * Comprehensive button system with multiple variants and sizes.
 */

/* Base Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--haven-space-3) var(--haven-space-6);
  font-family: var(--haven-font-primary);
  font-size: var(--haven-text-base);
  font-weight: var(--haven-font-semibold);
  line-height: var(--haven-leading-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
  border-radius: var(--haven-radius-lg);
  transition: var(--haven-transition-all);
}

.btn:focus {
  outline: none;
  box-shadow: var(--haven-shadow-focus);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Variants */

/* Primary Button */
.btn-primary {
  background-color: var(--haven-primary);
  color: var(--haven-white);
  border-color: var(--haven-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--haven-primary-700);
  border-color: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--haven-shadow-md);
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--haven-secondary);
  color: var(--haven-white);
  border-color: var(--haven-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--haven-secondary-700);
  border-color: var(--haven-secondary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Outline Button */
.btn-outline {
  background-color: transparent;
  color: var(--haven-primary);
  border-color: var(--haven-primary);
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: var(--haven-primary);
  color: var(--haven-white);
  border-color: var(--haven-primary);
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--haven-gray-700);
  border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--haven-gray-100);
  color: var(--haven-gray-900);
}

/* Link Button */
.btn-link {
  background-color: transparent;
  color: var(--haven-primary);
  border-color: transparent;
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--haven-primary-700);
  text-decoration: underline;
}

/* Success Button */
.btn-success {
  background-color: var(--haven-success);
  color: var(--haven-white);
  border-color: var(--haven-success);
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--haven-success-dark);
  border-color: var(--haven-success-dark);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Warning Button */
.btn-warning {
  background-color: var(--haven-warning);
  color: var(--haven-white);
  border-color: var(--haven-warning);
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--haven-warning-dark);
  border-color: var(--haven-warning-dark);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Error/Danger Button */
.btn-error,
.btn-danger {
  background-color: var(--haven-error);
  color: var(--haven-white);
  border-color: var(--haven-error);
}

.btn-error:hover,
.btn-error:focus,
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--haven-error-dark);
  border-color: var(--haven-error-dark);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Info Button */
.btn-info {
  background-color: var(--haven-info);
  color: var(--haven-white);
  border-color: var(--haven-info);
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--haven-info-dark);
  border-color: var(--haven-info-dark);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Light Button */
.btn-light {
  background-color: var(--haven-gray-100);
  color: var(--haven-gray-900);
  border-color: var(--haven-gray-200);
}

.btn-light:hover,
.btn-light:focus {
  background-color: var(--haven-gray-200);
  border-color: var(--haven-gray-300);
}

/* Dark Button */
.btn-dark {
  background-color: var(--haven-gray-900);
  color: var(--haven-white);
  border-color: var(--haven-gray-900);
}

.btn-dark:hover,
.btn-dark:focus {
  background-color: var(--haven-black);
  border-color: var(--haven-black);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Button Sizes */

.btn-xs {
  padding: var(--haven-space-1) var(--haven-space-3);
  font-size: var(--haven-text-xs);
  border-radius: var(--haven-radius-md);
}

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

.btn-md {
  /* Default size - already defined in .btn */
}

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

.btn-xl {
  padding: var(--haven-space-5) var(--haven-space-10);
  font-size: var(--haven-text-xl);
  border-radius: var(--haven-radius-xl);
}

/* Button Block (Full Width) */
.btn-block {
  display: flex;
  width: 100%;
}

/* Button Group */
.btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.btn-group .btn {
  border-radius: 0;
  margin-left: -2px;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--haven-radius-lg);
  border-bottom-left-radius: var(--haven-radius-lg);
  margin-left: 0;
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--haven-radius-lg);
  border-bottom-right-radius: var(--haven-radius-lg);
}

/* Button with Icon */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--haven-space-2);
}

.btn-icon-only {
  padding: var(--haven-space-3);
  aspect-ratio: 1;
}

/* Loading Button */
.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--haven-white);
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}


/**
 * 11.2 - FORMS & INPUTS
 * 
 * Complete form component system with validation states.
 */

/* Form Group */
.form-group {
  margin-bottom: var(--haven-space-6);
}

/* Form Label */
.form-label {
  display: inline-block;
  margin-bottom: var(--haven-space-2);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-900);
  font-size: var(--haven-text-sm);
}

.form-label.required::after {
  content: '*';
  color: var(--haven-error);
  margin-left: var(--haven-space-1);
}

/* Form Control (Input, Textarea, Select) */
.form-control {
  display: block;
  width: 100%;
  padding: var(--haven-space-3) var(--haven-space-4);
  font-family: var(--haven-font-primary);
  font-size: var(--haven-text-base);
  font-weight: var(--haven-font-regular);
  line-height: var(--haven-leading-normal);
  color: var(--haven-gray-900);
  background-color: var(--haven-white);
  background-clip: padding-box;
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-md);
  transition: var(--haven-transition-colors);
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--haven-gray-100);
  opacity: 0.6;
  cursor: not-allowed;
}

.form-control::placeholder {
  color: var(--haven-gray-400);
  opacity: 1;
}

/* Textarea */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Select */
select.form-control {
  cursor: pointer;
  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='%23374151' 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 var(--haven-space-3) center;
  background-size: 16px 12px;
  padding-right: var(--haven-space-10);
}

select.form-control[multiple] {
  background-image: none;
  padding-right: var(--haven-space-4);
}

/* Form Control Sizes */
.form-control-sm {
  padding: var(--haven-space-2) var(--haven-space-3);
  font-size: var(--haven-text-sm);
  border-radius: var(--haven-radius-base);
}

.form-control-lg {
  padding: var(--haven-space-4) var(--haven-space-5);
  font-size: var(--haven-text-lg);
  border-radius: var(--haven-radius-lg);
}

/* Validation States */
.form-control.is-valid {
  border-color: var(--haven-success);
}

.form-control.is-valid:focus {
  border-color: var(--haven-success);
  box-shadow: 0 0 0 3px rgba(var(--haven-success-rgb), 0.3);
}

.form-control.is-invalid {
  border-color: var(--haven-error);
}

.form-control.is-invalid:focus {
  border-color: var(--haven-error);
  box-shadow: var(--haven-shadow-focus-error);
}

/* Form Text (Helper Text) */
.form-text {
  display: block;
  margin-top: var(--haven-space-2);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

/* Validation Feedback */
.valid-feedback,
.invalid-feedback {
  display: none;
  margin-top: var(--haven-space-2);
  font-size: var(--haven-text-sm);
}

.valid-feedback {
  color: var(--haven-success);
}

.invalid-feedback {
  color: var(--haven-error);
}

.form-control.is-valid ~ .valid-feedback {
  display: block;
}

.form-control.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Checkbox & Radio */
.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: var(--haven-space-6);
  margin-bottom: var(--haven-space-3);
}

.form-check-input {
  float: left;
  margin-left: calc(var(--haven-space-6) * -1);
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  vertical-align: top;
  appearance: none;
  background-color: var(--haven-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid var(--haven-gray-300);
  cursor: pointer;
}

.form-check-input:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

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

.form-check-input[type="checkbox"] {
  border-radius: var(--haven-radius-base);
}

.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-label {
  cursor: pointer;
  color: var(--haven-gray-700);
}

/* Switch Toggle */
.form-switch {
  padding-left: var(--haven-space-10);
}

.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.25rem;
  margin-left: calc(var(--haven-space-10) * -1);
  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='rgba(0,0,0,0.25)'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: var(--haven-radius-full);
  transition: background-position 0.15s ease-in-out;
}

.form-switch .form-check-input:checked {
  background-position: right center;
  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");
}

/* Input Group */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: var(--haven-space-3) var(--haven-space-4);
  font-size: var(--haven-text-base);
  font-weight: var(--haven-font-regular);
  line-height: var(--haven-leading-normal);
  color: var(--haven-gray-700);
  text-align: center;
  white-space: nowrap;
  background-color: var(--haven-gray-100);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-md);
}

.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Range Input */
input[type="range"].form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  appearance: none;
  border: none;
}

input[type="range"].form-range::-webkit-slider-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--haven-gray-200);
  border-color: transparent;
  border-radius: var(--haven-radius-full);
}

input[type="range"].form-range::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.375rem;
  background-color: var(--haven-primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
}

input[type="range"].form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--haven-gray-200);
  border-color: transparent;
  border-radius: var(--haven-radius-full);
}

input[type="range"].form-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--haven-primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* File Input */
.form-file {
  position: relative;
  display: inline-block;
  width: 100%;
}

.form-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.form-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  height: calc(2.75rem);
  padding: var(--haven-space-3) var(--haven-space-4);
  font-weight: var(--haven-font-regular);
  line-height: var(--haven-leading-normal);
  color: var(--haven-gray-700);
  background-color: var(--haven-white);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-md);
}


/**
 * 11.3 - CARDS & CONTAINERS
 * 
 * Versatile card components for content display.
 */

/* Base Card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--haven-white);
  background-clip: border-box;
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-xl);
  box-shadow: var(--haven-shadow-sm);
}

/* Card Image */
.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
  object-fit: cover;
}

.card-img-top {
  border-top-left-radius: calc(var(--haven-radius-xl) - 1px);
  border-top-right-radius: calc(var(--haven-radius-xl) - 1px);
}

.card-img-bottom {
  border-bottom-left-radius: calc(var(--haven-radius-xl) - 1px);
  border-bottom-right-radius: calc(var(--haven-radius-xl) - 1px);
}

/* Card Body */
.card-body {
  flex: 1 1 auto;
  padding: var(--haven-space-6);
}

.card-body > :last-child {
  margin-bottom: 0;
}

/* Card Title & Subtitle */
.card-title {
  margin-bottom: var(--haven-space-3);
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}

.card-subtitle {
  margin-top: calc(var(--haven-space-3) * -0.5);
  margin-bottom: var(--haven-space-3);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

/* Card Text */
.card-text {
  margin-bottom: var(--haven-space-4);
  color: var(--haven-gray-700);
}

/* Card Header */
.card-header {
  padding: var(--haven-space-4) var(--haven-space-6);
  margin-bottom: 0;
  background-color: var(--haven-gray-50);
  border-bottom: 1px solid var(--haven-gray-200);
  border-top-left-radius: calc(var(--haven-radius-xl) - 1px);
  border-top-right-radius: calc(var(--haven-radius-xl) - 1px);
}

.card-header:first-child {
  border-radius: calc(var(--haven-radius-xl) - 1px) calc(var(--haven-radius-xl) - 1px) 0 0;
}

/* Card Footer */
.card-footer {
  padding: var(--haven-space-4) var(--haven-space-6);
  background-color: var(--haven-gray-50);
  border-top: 1px solid var(--haven-gray-200);
  border-bottom-left-radius: calc(var(--haven-radius-xl) - 1px);
  border-bottom-right-radius: calc(var(--haven-radius-xl) - 1px);
}

.card-footer:last-child {
  border-radius: 0 0 calc(var(--haven-radius-xl) - 1px) calc(var(--haven-radius-xl) - 1px);
}

/* Card Link */
.card-link {
  color: var(--haven-primary);
  text-decoration: none;
  transition: var(--haven-transition-colors);
}

.card-link:hover {
  color: var(--haven-primary-700);
  text-decoration: underline;
}

.card-link + .card-link {
  margin-left: var(--haven-space-4);
}

/* Card Variants */
.card-hover {
  transition: var(--haven-transition-all);
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--haven-shadow-xl);
}

.card-bordered {
  border-width: 2px;
}

.card-flat {
  border: none;
  box-shadow: none;
}

/* Horizontal Card */
.card-horizontal {
  flex-direction: row;
}

.card-horizontal .card-img-top {
  width: 300px;
  border-radius: calc(var(--haven-radius-xl) - 1px) 0 0 calc(var(--haven-radius-xl) - 1px);
}

@media (max-width: 768px) {
  .card-horizontal {
    flex-direction: column;
  }
  
  .card-horizontal .card-img-top {
    width: 100%;
    border-radius: calc(var(--haven-radius-xl) - 1px) calc(var(--haven-radius-xl) - 1px) 0 0;
  }
}


/**
 * 11.4 - BADGES & LABELS
 * 
 * Small count and labeling components.
 */

.badge {
  display: inline-block;
  padding: var(--haven-space-1) var(--haven-space-3);
  font-size: var(--haven-text-xs);
  font-weight: var(--haven-font-semibold);
  line-height: 1;
  color: var(--haven-white);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--haven-radius-full);
}

.badge:empty {
  display: none;
}

/* Badge Variants */
.badge-primary {
  background-color: var(--haven-primary);
}

.badge-secondary {
  background-color: var(--haven-secondary);
}

.badge-success {
  background-color: var(--haven-success);
}

.badge-warning {
  background-color: var(--haven-warning);
}

.badge-error,
.badge-danger {
  background-color: var(--haven-error);
}

.badge-info {
  background-color: var(--haven-info);
}

.badge-light {
  background-color: var(--haven-gray-200);
  color: var(--haven-gray-900);
}

.badge-dark {
  background-color: var(--haven-gray-900);
}

/* Badge Sizes */
.badge-sm {
  padding: 0.125rem var(--haven-space-2);
  font-size: 0.625rem;
}

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

/* Badge Pill */
.badge-pill {
  padding-right: var(--haven-space-4);
  padding-left: var(--haven-space-4);
  border-radius: var(--haven-radius-full);
}

/* Badge with Icon */
.badge-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--haven-space-1);
}


/**
 * 11.5 - ALERTS & NOTIFICATIONS
 * 
 * Alert messages for user feedback.
 */

.alert {
  position: relative;
  padding: var(--haven-space-4) var(--haven-space-5);
  margin-bottom: var(--haven-space-4);
  border: 1px solid transparent;
  border-radius: var(--haven-radius-lg);
}

.alert-heading {
  font-weight: var(--haven-font-semibold);
  color: inherit;
  margin-bottom: var(--haven-space-2);
}

.alert-link {
  font-weight: var(--haven-font-semibold);
  color: inherit;
  text-decoration: underline;
}

.alert-link:hover {
  opacity: 0.8;
}

/* Alert Variants */
.alert-primary {
  color: var(--haven-primary-900);
  background-color: var(--haven-primary-50);
  border-color: var(--haven-primary-200);
}

.alert-secondary {
  color: var(--haven-secondary-900);
  background-color: var(--haven-secondary-50);
  border-color: var(--haven-secondary-200);
}

.alert-success {
  color: var(--haven-success-dark);
  background-color: var(--haven-success-light);
  border-color: var(--haven-success);
}

.alert-warning {
  color: var(--haven-warning-dark);
  background-color: var(--haven-warning-light);
  border-color: var(--haven-warning);
}

.alert-error,
.alert-danger {
  color: var(--haven-error-dark);
  background-color: var(--haven-error-light);
  border-color: var(--haven-error);
}

.alert-info {
  color: var(--haven-info-dark);
  background-color: var(--haven-info-light);
  border-color: var(--haven-info);
}

/* Dismissible Alert */
.alert-dismissible {
  padding-right: var(--haven-space-12);
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--haven-space-5);
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
}

.alert-dismissible .btn-close:hover {
  opacity: 0.75;
}


/**
 * 11.6 - MODALS & DIALOGS
 * 
 * Modal dialog components.
 */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--haven-z-modal);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal.show {
  display: block;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--haven-space-4);
  pointer-events: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--haven-white);
  background-clip: padding-box;
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-2xl);
  box-shadow: var(--haven-shadow-2xl);
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--haven-z-modal-backdrop);
  width: 100vw;
  height: 100vh;
  background-color: var(--haven-overlay-dark);
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--haven-space-6);
  border-bottom: 1px solid var(--haven-gray-200);
  border-top-left-radius: calc(var(--haven-radius-2xl) - 1px);
  border-top-right-radius: calc(var(--haven-radius-2xl) - 1px);
}

.modal-title {
  margin-bottom: 0;
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  line-height: var(--haven-leading-tight);
  color: var(--haven-gray-900);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--haven-space-6);
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--haven-space-3);
  padding: var(--haven-space-6);
  border-top: 1px solid var(--haven-gray-200);
  border-bottom-right-radius: calc(var(--haven-radius-2xl) - 1px);
  border-bottom-left-radius: calc(var(--haven-radius-2xl) - 1px);
}

/* Modal Sizes */
.modal-sm .modal-dialog {
  max-width: 300px;
}

.modal-lg .modal-dialog {
  max-width: 800px;
}

.modal-xl .modal-dialog {
  max-width: 1140px;
}

.modal-fullscreen .modal-dialog {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

/* Modal Centered */
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--haven-space-8));
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: var(--haven-space-8) auto;
  }
  
  .modal-dialog-centered {
    min-height: calc(100% - var(--haven-space-16));
  }
}

/* Close Button */
.btn-close {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: var(--haven-gray-700);
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: var(--haven-radius-md);
  opacity: 0.5;
  cursor: pointer;
}

.btn-close:hover {
  opacity: 0.75;
}


/**
 * 11.7 - TOOLTIPS & POPOVERS
 * 
 * Contextual overlays for displaying information.
 */

.tooltip {
  position: absolute;
  z-index: var(--haven-z-tooltip);
  display: block;
  margin: var(--haven-space-1);
  font-family: var(--haven-font-primary);
  font-size: var(--haven-text-sm);
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip-arrow {
  position: absolute;
  display: block;
  width: var(--haven-space-2);
  height: var(--haven-space-2);
}

.tooltip-inner {
  max-width: 200px;
  padding: var(--haven-space-2) var(--haven-space-3);
  color: var(--haven-white);
  text-align: center;
  background-color: var(--haven-gray-900);
  border-radius: var(--haven-radius-md);
}

/* Popover */
.popover {
  position: absolute;
  z-index: var(--haven-z-popover);
  display: block;
  max-width: 276px;
  font-family: var(--haven-font-primary);
  font-size: var(--haven-text-sm);
  word-wrap: break-word;
  background-color: var(--haven-white);
  background-clip: padding-box;
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-lg);
  box-shadow: var(--haven-shadow-lg);
}

.popover-arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
}

.popover-header {
  padding: var(--haven-space-3) var(--haven-space-4);
  margin-bottom: 0;
  font-size: var(--haven-text-base);
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
  background-color: var(--haven-gray-50);
  border-bottom: 1px solid var(--haven-gray-200);
  border-top-left-radius: calc(var(--haven-radius-lg) - 1px);
  border-top-right-radius: calc(var(--haven-radius-lg) - 1px);
}

.popover-body {
  padding: var(--haven-space-4);
  color: var(--haven-gray-700);
}


/**
 * 11.8 - DROPDOWNS & MENUS
 * 
 * Toggleable contextual overlays for displaying lists of links.
 */

.dropdown {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: var(--haven-space-2);
  vertical-align: middle;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-menu {
  position: absolute;
  z-index: var(--haven-z-dropdown);
  display: none;
  min-width: 10rem;
  padding: var(--haven-space-2) 0;
  margin: var(--haven-space-1) 0 0;
  font-size: var(--haven-text-base);
  color: var(--haven-gray-700);
  text-align: left;
  list-style: none;
  background-color: var(--haven-white);
  background-clip: padding-box;
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-lg);
  box-shadow: var(--haven-shadow-lg);
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--haven-space-2) var(--haven-space-4);
  clear: both;
  font-weight: var(--haven-font-regular);
  color: var(--haven-gray-700);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  transition: var(--haven-transition-colors);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--haven-gray-900);
  background-color: var(--haven-gray-100);
}

.dropdown-item.active {
  color: var(--haven-white);
  background-color: var(--haven-primary);
}

.dropdown-item:disabled {
  color: var(--haven-gray-400);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-divider {
  height: 0;
  margin: var(--haven-space-2) 0;
  overflow: hidden;
  border-top: 1px solid var(--haven-gray-200);
}

.dropdown-header {
  display: block;
  padding: var(--haven-space-2) var(--haven-space-4);
  margin-bottom: 0;
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-600);
  white-space: nowrap;
}


/**
 * 11.9 - TABS & ACCORDIONS
 * 
 * Content organization components.
 */

/* Tabs */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 1px solid var(--haven-gray-200);
}

.nav-tabs .nav-link {
  display: block;
  padding: var(--haven-space-3) var(--haven-space-6);
  margin-bottom: -1px;
  color: var(--haven-gray-600);
  text-decoration: none;
  background: none;
  border: 1px solid transparent;
  border-top-left-radius: var(--haven-radius-lg);
  border-top-right-radius: var(--haven-radius-lg);
  transition: var(--haven-transition-colors);
  cursor: pointer;
}

.nav-tabs .nav-link:hover {
  color: var(--haven-gray-900);
  border-color: var(--haven-gray-200);
}

.nav-tabs .nav-link.active {
  color: var(--haven-primary);
  background-color: var(--haven-white);
  border-color: var(--haven-gray-200) var(--haven-gray-200) var(--haven-white);
}

.nav-tabs .nav-link:disabled {
  color: var(--haven-gray-400);
  background-color: transparent;
  border-color: transparent;
  cursor: not-allowed;
}

.tab-content {
  padding: var(--haven-space-6);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Accordion */
.accordion {
  --accordion-border-color: var(--haven-gray-200);
  --accordion-border-width: 1px;
}

.accordion-item {
  background-color: var(--haven-white);
  border: var(--accordion-border-width) solid var(--accordion-border-color);
}

.accordion-item:first-of-type {
  border-top-left-radius: var(--haven-radius-lg);
  border-top-right-radius: var(--haven-radius-lg);
}

.accordion-item:last-of-type {
  border-bottom-right-radius: var(--haven-radius-lg);
  border-bottom-left-radius: var(--haven-radius-lg);
}

.accordion-item:not(:first-of-type) {
  border-top: 0;
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--haven-space-4) var(--haven-space-5);
  font-size: var(--haven-text-base);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-900);
  text-align: left;
  background-color: var(--haven-white);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--haven-transition-colors);
  cursor: pointer;
}

.accordion-button:not(.collapsed) {
  color: var(--haven-primary);
  background-color: var(--haven-primary-50);
}

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg);
}

.accordion-body {
  padding: var(--haven-space-4) var(--haven-space-5);
}

.accordion-collapse {
  border: 0;
}


/**
 * 11.10 - PROGRESS BARS & LOADERS
 * 
 * Progress indicators and loading states.
 */

/* Progress Bar */
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: var(--haven-text-xs);
  background-color: var(--haven-gray-200);
  border-radius: var(--haven-radius-full);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--haven-white);
  text-align: center;
  white-space: nowrap;
  background-color: var(--haven-primary);
  transition: width 0.6s ease;
}

.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% { background-position: 1rem 0; }
  100% { background-position: 0 0; }
}

/* Spinner Loader */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border-spin 0.75s linear infinite;
}

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

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

/* Growing Spinner */
.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: spinner-grow 0.75s linear infinite;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

/* Skeleton Loader */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--haven-gray-200) 0%,
    var(--haven-gray-100) 50%,
    var(--haven-gray-200) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--haven-radius-md);
}

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

.skeleton-text {
  height: 1rem;
  margin-bottom: var(--haven-space-2);
}

.skeleton-heading {
  height: 2rem;
  margin-bottom: var(--haven-space-4);
}

.skeleton-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: var(--haven-radius-full);
}

.skeleton-card {
  height: 300px;
}


/**
 * 11.11 - PAGINATION
 * 
 * Pagination components for navigation.
 */

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  gap: var(--haven-space-2);
}

.page-item {
  display: block;
}

.page-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: var(--haven-space-2) var(--haven-space-3);
  color: var(--haven-primary);
  text-decoration: none;
  background-color: var(--haven-white);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-md);
  transition: var(--haven-transition-colors);
  cursor: pointer;
}

.page-link:hover {
  z-index: 2;
  color: var(--haven-primary-700);
  background-color: var(--haven-gray-50);
  border-color: var(--haven-gray-300);
}

.page-link:focus {
  z-index: 3;
  outline: none;
  box-shadow: var(--haven-shadow-focus);
}

.page-item.active .page-link {
  z-index: 3;
  color: var(--haven-white);
  background-color: var(--haven-primary);
  border-color: var(--haven-primary);
}

.page-item.disabled .page-link {
  color: var(--haven-gray-400);
  pointer-events: none;
  background-color: var(--haven-white);
  border-color: var(--haven-gray-300);
  cursor: not-allowed;
}

/* Pagination Sizes */
.pagination-lg .page-link {
  min-width: 3rem;
  padding: var(--haven-space-3) var(--haven-space-5);
  font-size: var(--haven-text-lg);
}

.pagination-sm .page-link {
  min-width: 2rem;
  padding: var(--haven-space-1) var(--haven-space-2);
  font-size: var(--haven-text-sm);
}


/**
 * 11.12 - BREADCRUMBS
 * 
 * Navigation hierarchy indicator.
 */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: var(--haven-space-4);
  list-style: none;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--haven-space-2);
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: var(--haven-space-2);
  color: var(--haven-gray-400);
  content: "/";
}

.breadcrumb-item a {
  color: var(--haven-primary);
  text-decoration: none;
  transition: var(--haven-transition-colors);
}

.breadcrumb-item a:hover {
  color: var(--haven-primary-700);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--haven-gray-600);
}


/**
 * 11.13 - AVATARS & IMAGES
 * 
 * User avatar and image components.
 */

.avatar {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  font-size: var(--haven-text-base);
  line-height: 1;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--haven-radius-full);
}

.avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--haven-white);
  background-color: var(--haven-primary);
  border-radius: var(--haven-radius-full);
  font-weight: var(--haven-font-semibold);
  text-transform: uppercase;
}

/* Avatar Sizes */
.avatar-xs {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--haven-text-xs);
}

.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: var(--haven-text-sm);
}

.avatar-md {
  width: 3rem;
  height: 3rem;
  font-size: var(--haven-text-base);
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: var(--haven-text-lg);
}

.avatar-xl {
  width: 6rem;
  height: 6rem;
  font-size: var(--haven-text-2xl);
}

/* Avatar Group */
.avatar-group {
  display: inline-flex;
  padding-left: var(--haven-space-2);
}

.avatar-group .avatar {
  margin-left: calc(var(--haven-space-2) * -1);
  border: 2px solid var(--haven-white);
  transition: var(--haven-transition-transform);
}

.avatar-group .avatar:hover {
  z-index: 1;
  transform: translateY(-2px);
}

/* Avatar with Status */
.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  border: 2px solid var(--haven-white);
  border-radius: var(--haven-radius-full);
}

.avatar-status.online {
  background-color: var(--haven-success);
}

.avatar-status.offline {
  background-color: var(--haven-gray-400);
}

.avatar-status.busy {
  background-color: var(--haven-error);
}


/**
 * 11.14 - DIVIDERS & SEPARATORS
 * 
 * Visual separators for content.
 */

.divider {
  margin: var(--haven-space-6) 0;
  border: 0;
  border-top: 1px solid var(--haven-gray-200);
}

.divider-vertical {
  display: inline-block;
  width: 1px;
  height: 1.5rem;
  margin: 0 var(--haven-space-2);
  vertical-align: middle;
  background-color: var(--haven-gray-200);
}

.divider-text {
  display: flex;
  align-items: center;
  margin: var(--haven-space-6) 0;
  text-align: center;
  color: var(--haven-gray-600);
  font-size: var(--haven-text-sm);
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--haven-gray-200);
}

.divider-text:not(:empty)::before {
  margin-right: var(--haven-space-4);
}

.divider-text:not(:empty)::after {
  margin-left: var(--haven-space-4);
}


/* ==========================================================================
   12.0 - VACATION RENTAL COMPONENTS (30+ Specialized Components)
   ==========================================================================
   
   Specialized components designed specifically for vacation rental
   properties, property management, bookings, and guest experiences.
   These components integrate seamlessly with the Haven Booking Engine
   and Haven Streamline Connector.
   ========================================================================== */

/**
 * 12.1 - PROPERTY CARD VARIANTS
 * 
 * Enhanced property card designs for various layouts.
 */

/* Base Property Card (Enhanced) */
.property-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--haven-white);
  border-radius: var(--haven-radius-2xl);
  overflow: hidden;
  box-shadow: var(--haven-shadow-md);
  transition: var(--haven-transition-all);
}

.property-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--haven-shadow-2xl);
}

.property-card__image-container {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 aspect ratio */
  overflow: hidden;
  background: var(--haven-gray-100);
}

.property-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--haven-ease-out);
}

.property-card:hover .property-card__image {
  transform: scale(1.1);
}

.property-card__image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.7) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.property-card:hover .property-card__image-overlay {
  opacity: 1;
}

.property-card__badges {
  position: absolute;
  top: var(--haven-space-4);
  right: var(--haven-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-2);
  z-index: 2;
}

.property-card__badge {
  padding: var(--haven-space-2) var(--haven-space-3);
  background: var(--haven-white);
  color: var(--haven-gray-900);
  font-size: var(--haven-text-xs);
  font-weight: var(--haven-font-semibold);
  border-radius: var(--haven-radius-full);
  box-shadow: var(--haven-shadow-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.property-card__badge--featured {
  background: var(--haven-secondary);
  color: var(--haven-white);
}

.property-card__badge--new {
  background: var(--haven-success);
  color: var(--haven-white);
}

.property-card__badge--popular {
  background: var(--haven-primary);
  color: var(--haven-white);
}

.property-card__wishlist {
  position: absolute;
  top: var(--haven-space-4);
  left: var(--haven-space-4);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--haven-white);
  border: none;
  border-radius: var(--haven-radius-full);
  box-shadow: var(--haven-shadow-sm);
  cursor: pointer;
  transition: var(--haven-transition-all);
  z-index: 2;
}

.property-card__wishlist:hover {
  transform: scale(1.1);
  box-shadow: var(--haven-shadow-md);
}

.property-card__wishlist--active {
  background: var(--haven-error);
  color: var(--haven-white);
}

.property-card__gallery-indicator {
  position: absolute;
  bottom: var(--haven-space-4);
  left: var(--haven-space-4);
  right: var(--haven-space-4);
  display: flex;
  gap: var(--haven-space-1);
  z-index: 2;
}

.property-card__gallery-dot {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--haven-radius-full);
  transition: var(--haven-transition-all);
}

.property-card__gallery-dot--active {
  background: var(--haven-white);
}

.property-card__content {
  padding: var(--haven-space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.property-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--haven-space-3);
}

.property-card__title {
  flex: 1;
  margin: 0;
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  line-height: var(--haven-leading-tight);
}

.property-card__title:hover {
  color: var(--haven-primary);
}

.property-card__rating {
  display: flex;
  align-items: center;
  gap: var(--haven-space-1);
  margin-left: var(--haven-space-3);
  white-space: nowrap;
}

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

.property-card__rating-count {
  color: var(--haven-gray-600);
  font-size: var(--haven-text-sm);
}

.property-card__location {
  display: flex;
  align-items: center;
  gap: var(--haven-space-1);
  margin-bottom: var(--haven-space-4);
  color: var(--haven-gray-600);
  font-size: var(--haven-text-sm);
}

.property-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-4);
  margin-bottom: var(--haven-space-4);
  padding-bottom: var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
}

.property-card__feature {
  display: flex;
  align-items: center;
  gap: var(--haven-space-1);
  color: var(--haven-gray-700);
  font-size: var(--haven-text-sm);
}

.property-card__feature-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--haven-gray-500);
}

.property-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-2);
  margin-bottom: var(--haven-space-4);
}

.property-card__amenity {
  padding: var(--haven-space-1) var(--haven-space-3);
  background: var(--haven-gray-100);
  color: var(--haven-gray-700);
  font-size: var(--haven-text-xs);
  border-radius: var(--haven-radius-full);
}

.property-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--haven-space-4);
}

.property-card__price-wrapper {
  display: flex;
  flex-direction: column;
}

.property-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--haven-space-1);
}

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

.property-card__price-period {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  font-weight: var(--haven-font-regular);
}

.property-card__price-note {
  font-size: var(--haven-text-xs);
  color: var(--haven-gray-500);
  margin-top: var(--haven-space-1);
}

.property-card__cta {
  padding: var(--haven-space-3) var(--haven-space-6);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.property-card__cta:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Property Card Variants */

/* Compact Card */
.property-card--compact .property-card__content {
  padding: var(--haven-space-4);
}

.property-card--compact .property-card__title {
  font-size: var(--haven-text-lg);
}

.property-card--compact .property-card__price-amount {
  font-size: var(--haven-text-2xl);
}

/* Horizontal Card */
.property-card--horizontal {
  flex-direction: row;
}

.property-card--horizontal .property-card__image-container {
  width: 40%;
  padding-top: 0;
  height: 100%;
  min-height: 300px;
}

.property-card--horizontal .property-card__content {
  width: 60%;
}

@media (max-width: 768px) {
  .property-card--horizontal {
    flex-direction: column;
  }
  
  .property-card--horizontal .property-card__image-container,
  .property-card--horizontal .property-card__content {
    width: 100%;
  }
}

/* Featured Card (Larger) */
.property-card--featured {
  grid-column: span 2;
}

.property-card--featured .property-card__title {
  font-size: var(--haven-text-2xl);
}

.property-card--featured .property-card__content {
  padding: var(--haven-space-8);
}


/**
 * 12.2 - PROPERTY SEARCH & FILTERS
 * 
 * Search and filtering components for property discovery.
 */

.property-search {
  background: var(--haven-white);
  border-radius: var(--haven-radius-2xl);
  padding: var(--haven-space-6);
  box-shadow: var(--haven-shadow-xl);
}

.property-search__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--haven-space-4);
  align-items: end;
}

.property-search__field {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-2);
}

.property-search__label {
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-700);
}

.property-search__input {
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-base);
  transition: var(--haven-transition-colors);
}

.property-search__input:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

.property-search__button {
  padding: var(--haven-space-3) var(--haven-space-8);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.property-search__button:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Property Filters */
.property-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-3);
  margin-bottom: var(--haven-space-6);
}

.property-filters__item {
  padding: var(--haven-space-2) var(--haven-space-4);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-full);
  font-size: var(--haven-text-sm);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.property-filters__item:hover {
  border-color: var(--haven-primary);
  color: var(--haven-primary);
}

.property-filters__item--active {
  background: var(--haven-primary);
  border-color: var(--haven-primary);
  color: var(--haven-white);
}

.property-filters__clear {
  padding: var(--haven-space-2) var(--haven-space-4);
  background: transparent;
  border: none;
  color: var(--haven-gray-600);
  font-size: var(--haven-text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.property-filters__clear:hover {
  color: var(--haven-gray-900);
}


/**
 * 12.3 - BOOKING FORM & CALENDAR
 * 
 * Advanced booking components with date selection and pricing.
 */

.booking-widget {
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-2xl);
  padding: var(--haven-space-6);
  box-shadow: var(--haven-shadow-lg);
  position: sticky;
  top: var(--haven-space-6);
}

.booking-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--haven-space-6);
  padding-bottom: var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
}

.booking-widget__price {
  display: flex;
  align-items: baseline;
  gap: var(--haven-space-2);
}

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

.booking-widget__price-period {
  font-size: var(--haven-text-base);
  color: var(--haven-gray-600);
}

.booking-widget__rating {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
}

.booking-widget__form {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-4);
}

.booking-widget__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--haven-space-3);
}

.booking-widget__date-field {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-2);
}

.booking-widget__label {
  font-size: var(--haven-text-xs);
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.booking-widget__input {
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-base);
  cursor: pointer;
  transition: var(--haven-transition-colors);
}

.booking-widget__input:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

.booking-widget__guests {
  position: relative;
}

.booking-widget__guests-selector {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--haven-space-2);
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-lg);
  padding: var(--haven-space-4);
  box-shadow: var(--haven-shadow-xl);
  z-index: var(--haven-z-dropdown);
  display: none;
}

.booking-widget__guests-selector--active {
  display: block;
}

.booking-widget__guest-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--haven-space-3) 0;
  border-bottom: 1px solid var(--haven-gray-200);
}

.booking-widget__guest-type:last-child {
  border-bottom: none;
}

.booking-widget__guest-info {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-1);
}

.booking-widget__guest-label {
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-900);
}

.booking-widget__guest-description {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.booking-widget__guest-controls {
  display: flex;
  align-items: center;
  gap: var(--haven-space-3);
}

.booking-widget__guest-button {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-full);
  background: var(--haven-white);
  color: var(--haven-gray-700);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.booking-widget__guest-button:hover {
  border-color: var(--haven-primary);
  color: var(--haven-primary);
}

.booking-widget__guest-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.booking-widget__guest-count {
  min-width: 2rem;
  text-align: center;
  font-weight: var(--haven-font-medium);
}

.booking-widget__price-breakdown {
  padding: var(--haven-space-4) 0;
  border-top: 1px solid var(--haven-gray-200);
}

.booking-widget__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--haven-space-2) 0;
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-700);
}

.booking-widget__price-row--total {
  margin-top: var(--haven-space-3);
  padding-top: var(--haven-space-3);
  border-top: 1px solid var(--haven-gray-200);
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}

.booking-widget__submit {
  width: 100%;
  padding: var(--haven-space-4);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-semibold);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.booking-widget__submit:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

.booking-widget__note {
  font-size: var(--haven-text-xs);
  color: var(--haven-gray-600);
  text-align: center;
}

/* Availability Calendar */
.availability-calendar {
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  padding: var(--haven-space-6);
}

.availability-calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--haven-space-6);
}

.availability-calendar__month {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}

.availability-calendar__nav {
  display: flex;
  gap: var(--haven-space-2);
}

.availability-calendar__nav-button {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--haven-gray-100);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-colors);
}

.availability-calendar__nav-button:hover {
  background: var(--haven-gray-200);
}

.availability-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--haven-space-1);
}

.availability-calendar__day-label {
  padding: var(--haven-space-2);
  text-align: center;
  font-size: var(--haven-text-xs);
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-600);
  text-transform: uppercase;
}

.availability-calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--haven-radius-md);
  font-size: var(--haven-text-sm);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.availability-calendar__day--available {
  background: var(--haven-white);
  color: var(--haven-gray-900);
  border: 1px solid var(--haven-gray-200);
}

.availability-calendar__day--available:hover {
  border-color: var(--haven-primary);
  color: var(--haven-primary);
}

.availability-calendar__day--unavailable {
  background: var(--haven-gray-100);
  color: var(--haven-gray-400);
  cursor: not-allowed;
  text-decoration: line-through;
}

.availability-calendar__day--selected {
  background: var(--haven-primary);
  color: var(--haven-white);
  border-color: var(--haven-primary);
}

.availability-calendar__day--in-range {
  background: var(--haven-primary-100);
  color: var(--haven-primary-900);
}

.availability-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-4);
  margin-top: var(--haven-space-6);
  padding-top: var(--haven-space-4);
  border-top: 1px solid var(--haven-gray-200);
}

.availability-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-700);
}

.availability-calendar__legend-color {
  width: 1rem;
  height: 1rem;
  border-radius: var(--haven-radius-sm);
}


/**
 * 12.4 - REVIEWS & RATINGS
 * 
 * Comprehensive review and rating display components.
 */

.reviews-summary {
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  padding: var(--haven-space-6);
  border: 1px solid var(--haven-gray-200);
}

.reviews-summary__header {
  display: flex;
  align-items: center;
  gap: var(--haven-space-6);
  margin-bottom: var(--haven-space-6);
  padding-bottom: var(--haven-space-6);
  border-bottom: 1px solid var(--haven-gray-200);
}

.reviews-summary__overall {
  text-align: center;
}

.reviews-summary__score {
  font-size: var(--haven-text-6xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
  line-height: 1;
  margin-bottom: var(--haven-space-2);
}

.reviews-summary__stars {
  color: var(--haven-secondary);
  font-size: var(--haven-text-2xl);
  margin-bottom: var(--haven-space-1);
}

.reviews-summary__count {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.reviews-summary__categories {
  flex: 1;
}

.reviews-summary__category {
  display: flex;
  align-items: center;
  gap: var(--haven-space-3);
  margin-bottom: var(--haven-space-3);
}

.reviews-summary__category:last-child {
  margin-bottom: 0;
}

.reviews-summary__category-label {
  min-width: 100px;
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-700);
}

.reviews-summary__category-bar {
  flex: 1;
  height: 8px;
  background: var(--haven-gray-200);
  border-radius: var(--haven-radius-full);
  overflow: hidden;
}

.reviews-summary__category-fill {
  height: 100%;
  background: var(--haven-primary);
  border-radius: var(--haven-radius-full);
  transition: width 0.6s ease;
}

.reviews-summary__category-score {
  min-width: 2rem;
  text-align: right;
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
  font-size: var(--haven-text-sm);
}

/* Individual Review */
.review {
  padding: var(--haven-space-6);
  border-bottom: 1px solid var(--haven-gray-200);
}

.review:last-child {
  border-bottom: none;
}

.review__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--haven-space-4);
}

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

.review__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--haven-radius-full);
  object-fit: cover;
}

.review__author-info {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-1);
}

.review__author-name {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
}

.review__author-meta {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.review__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--haven-space-1);
}

.review__stars {
  color: var(--haven-secondary);
  font-size: var(--haven-text-lg);
}

.review__date {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.review__content {
  margin-bottom: var(--haven-space-4);
  line-height: var(--haven-leading-relaxed);
  color: var(--haven-gray-700);
}

.review__images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--haven-space-2);
  margin-bottom: var(--haven-space-4);
}

.review__image {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-transform);
}

.review__image:hover {
  transform: scale(1.05);
}

.review__footer {
  display: flex;
  align-items: center;
  gap: var(--haven-space-4);
}

.review__helpful {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
  padding: var(--haven-space-2) var(--haven-space-3);
  background: transparent;
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-700);
  cursor: pointer;
  transition: var(--haven-transition-colors);
}

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

.review__helpful--active {
  border-color: var(--haven-primary);
  background: var(--haven-primary-50);
  color: var(--haven-primary);
}

.review__response {
  margin-top: var(--haven-space-4);
  padding: var(--haven-space-4);
  background: var(--haven-gray-50);
  border-left: 4px solid var(--haven-primary);
  border-radius: var(--haven-radius-lg);
}

.review__response-header {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
  margin-bottom: var(--haven-space-2);
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
}

.review__response-content {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-700);
  line-height: var(--haven-leading-relaxed);
}


/**
 * 12.5 - HOST PROFILE & INFO
 * 
 * Property host information and profile display.
 */

.host-profile {
  background: var(--haven-white);
  border: 1px solid var(--haven-gray-200);
  border-radius: var(--haven-radius-2xl);
  padding: var(--haven-space-6);
}

.host-profile__header {
  display: flex;
  align-items: center;
  gap: var(--haven-space-4);
  margin-bottom: var(--haven-space-6);
  padding-bottom: var(--haven-space-6);
  border-bottom: 1px solid var(--haven-gray-200);
}

.host-profile__avatar-wrapper {
  position: relative;
}

.host-profile__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: var(--haven-radius-full);
  object-fit: cover;
  border: 3px solid var(--haven-white);
  box-shadow: var(--haven-shadow-md);
}

.host-profile__verified {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--haven-success);
  color: var(--haven-white);
  border: 2px solid var(--haven-white);
  border-radius: var(--haven-radius-full);
}

.host-profile__info {
  flex: 1;
}

.host-profile__name {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-1);
}

.host-profile__title {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-2);
}

.host-profile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-2);
}

.host-profile__badge {
  padding: var(--haven-space-1) var(--haven-space-2);
  background: var(--haven-primary-100);
  color: var(--haven-primary-900);
  font-size: var(--haven-text-xs);
  font-weight: var(--haven-font-semibold);
  border-radius: var(--haven-radius-full);
}

.host-profile__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--haven-space-4);
  margin-bottom: var(--haven-space-6);
  padding-bottom: var(--haven-space-6);
  border-bottom: 1px solid var(--haven-gray-200);
}

.host-profile__stat {
  text-align: center;
}

.host-profile__stat-value {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
  margin-bottom: var(--haven-space-1);
}

.host-profile__stat-label {
  font-size: var(--haven-text-xs);
  color: var(--haven-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.host-profile__bio {
  margin-bottom: var(--haven-space-6);
  line-height: var(--haven-leading-relaxed);
  color: var(--haven-gray-700);
}

.host-profile__actions {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-3);
}

.host-profile__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--haven-space-2);
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-700);
  background: var(--haven-white);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.host-profile__action:hover {
  border-color: var(--haven-primary);
  color: var(--haven-primary);
}

.host-profile__action--primary {
  background: var(--haven-primary);
  border-color: var(--haven-primary);
  color: var(--haven-white);
}

.host-profile__action--primary:hover {
  background: var(--haven-primary-700);
  border-color: var(--haven-primary-700);
  color: var(--haven-white);
}


/**
 * 12.6 - AMENITIES & FEATURES
 * 
 * Property amenities display components.
 */

.amenities-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--haven-space-4);
}

.amenities-list__category {
  margin-bottom: var(--haven-space-6);
}

.amenities-list__category-title {
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-4);
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
}

.amenities-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-3);
}

.amenities-list__item {
  display: flex;
  align-items: center;
  gap: var(--haven-space-3);
  color: var(--haven-gray-700);
  font-size: var(--haven-text-sm);
}

.amenities-list__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--haven-primary);
  flex-shrink: 0;
}

.amenities-list__item--unavailable {
  opacity: 0.5;
  text-decoration: line-through;
}

.amenities-list__item--unavailable .amenities-list__icon {
  color: var(--haven-gray-400);
}

/* Amenities Grid (Compact) */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--haven-space-3);
}

.amenities-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--haven-space-2);
  padding: var(--haven-space-4);
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-lg);
  text-align: center;
  transition: var(--haven-transition-all);
}

.amenities-grid__item:hover {
  background: var(--haven-primary-50);
}

.amenities-grid__icon {
  width: 2rem;
  height: 2rem;
  color: var(--haven-primary);
}

.amenities-grid__label {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-700);
  font-weight: var(--haven-font-medium);
}


/**
 * 12.7 - PROPERTY COMPARISON
 * 
 * Side-by-side property comparison component.
 */

.property-comparison {
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
  box-shadow: var(--haven-shadow-lg);
}

.property-comparison__header {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--haven-space-4);
  padding: var(--haven-space-6);
  background: var(--haven-gray-50);
  border-bottom: 2px solid var(--haven-gray-200);
}

.property-comparison__label {
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}

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

.property-comparison__property-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--haven-radius-lg);
  margin-bottom: var(--haven-space-3);
}

.property-comparison__property-name {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-2);
}

.property-comparison__property-price {
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
}

.property-comparison__row {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--haven-space-4);
  padding: var(--haven-space-4) var(--haven-space-6);
  border-bottom: 1px solid var(--haven-gray-200);
}

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

.property-comparison__row-label {
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-700);
}

.property-comparison__value {
  text-align: center;
  color: var(--haven-gray-900);
}

.property-comparison__value--check {
  color: var(--haven-success);
  font-size: var(--haven-text-xl);
}

.property-comparison__value--times {
  color: var(--haven-gray-400);
  font-size: var(--haven-text-xl);
}


/* ==========================================================================
   13.0 - THIRD-PARTY INTEGRATIONS (40+ Integration Styles)
   ==========================================================================
   
   Comprehensive styling for popular WordPress plugins and third-party
   services to ensure seamless integration with Haven Theme. Includes
   e-commerce, forms, SEO, analytics, multi-language, and more.
   ========================================================================== */

/**
 * 13.1 - WOOCOMMERCE INTEGRATION
 * 
 * Complete WooCommerce styling for vacation rental bookings
 * and merchandise sales.
 */

/* WooCommerce Product Grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--haven-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
  box-shadow: var(--haven-shadow-md);
  transition: var(--haven-transition-all);
  margin: 0;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--haven-shadow-xl);
}

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  padding: var(--haven-space-4);
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  padding: 0 var(--haven-space-4) var(--haven-space-4);
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  display: block;
  width: calc(100% - var(--haven-space-8));
  margin: 0 var(--haven-space-4) var(--haven-space-4);
  padding: var(--haven-space-3) var(--haven-space-4);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  text-align: center;
  border-radius: var(--haven-radius-lg);
  transition: var(--haven-transition-all);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
}

/* WooCommerce Single Product */
.woocommerce div.product,
.woocommerce-page div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--haven-space-8);
  margin-bottom: var(--haven-space-12);
}

@media (max-width: 768px) {
  .woocommerce div.product,
  .woocommerce-page div.product {
    grid-template-columns: 1fr;
  }
}

.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
  border-radius: var(--haven-radius-2xl);
  overflow: hidden;
}

.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  padding: var(--haven-space-6);
  background: var(--haven-white);
  border-radius: var(--haven-radius-2xl);
  box-shadow: var(--haven-shadow-lg);
}

.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
  font-size: var(--haven-text-3xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-4);
}

.woocommerce div.product p.price,
.woocommerce-page div.product p.price {
  font-size: var(--haven-text-4xl);
  font-weight: var(--haven-font-bold);
  color: var(--haven-primary);
  margin-bottom: var(--haven-space-6);
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-page div.product .woocommerce-product-details__short-description {
  margin-bottom: var(--haven-space-6);
  line-height: var(--haven-leading-relaxed);
  color: var(--haven-gray-700);
}

.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
  margin-bottom: var(--haven-space-6);
}

.woocommerce div.product form.cart .quantity,
.woocommerce-page div.product form.cart .quantity {
  margin-right: var(--haven-space-3);
}

.woocommerce div.product form.cart input.qty,
.woocommerce-page div.product form.cart input.qty {
  width: 80px;
  padding: var(--haven-space-3);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  text-align: center;
  font-size: var(--haven-text-base);
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce-page div.product form.cart .single_add_to_cart_button {
  padding: var(--haven-space-4) var(--haven-space-8);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce-page div.product form.cart .single_add_to_cart_button:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* WooCommerce Cart */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
  box-shadow: var(--haven-shadow-md);
}

.woocommerce table.shop_table thead,
.woocommerce-page table.shop_table thead {
  background: var(--haven-gray-900);
  color: var(--haven-white);
}

.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th {
  padding: var(--haven-space-4);
  font-weight: var(--haven-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--haven-text-sm);
}

.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
  padding: var(--haven-space-4);
  border-bottom: 1px solid var(--haven-gray-200);
}

.woocommerce .cart_totals,
.woocommerce-page .cart_totals {
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  padding: var(--haven-space-6);
  box-shadow: var(--haven-shadow-lg);
}

.woocommerce .cart_totals h2,
.woocommerce-page .cart_totals h2 {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-4);
}

.woocommerce .cart_totals .wc-proceed-to-checkout a,
.woocommerce-page .cart_totals .wc-proceed-to-checkout a {
  display: block;
  width: 100%;
  padding: var(--haven-space-4);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  text-align: center;
  text-decoration: none;
  border-radius: var(--haven-radius-lg);
  transition: var(--haven-transition-all);
}

.woocommerce .cart_totals .wc-proceed-to-checkout a:hover,
.woocommerce-page .cart_totals .wc-proceed-to-checkout a:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* WooCommerce Checkout */
.woocommerce form.checkout,
.woocommerce-page form.checkout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--haven-space-8);
}

@media (max-width: 768px) {
  .woocommerce form.checkout,
  .woocommerce-page form.checkout {
    grid-template-columns: 1fr;
  }
}

.woocommerce form.checkout h3,
.woocommerce-page form.checkout h3 {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-4);
}

.woocommerce .woocommerce-checkout-review-order,
.woocommerce-page .woocommerce-checkout-review-order {
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  padding: var(--haven-space-6);
  box-shadow: var(--haven-shadow-lg);
}

.woocommerce #payment,
.woocommerce-page #payment {
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-xl);
  padding: var(--haven-space-6);
}

.woocommerce #payment .place-order,
.woocommerce-page #payment .place-order {
  margin-top: var(--haven-space-4);
}

.woocommerce #payment .place-order button,
.woocommerce-page #payment .place-order button {
  width: 100%;
  padding: var(--haven-space-4);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  font-size: var(--haven-text-lg);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.woocommerce #payment .place-order button:hover,
.woocommerce-page #payment .place-order button:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}


/**
 * 13.2 - CONTACT FORM PLUGINS
 * 
 * Support for popular contact form plugins.
 */

/* Contact Form 7 */
.wpcf7 {
  max-width: 800px;
  margin: 0 auto;
}

.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-4);
}

.wpcf7-form p {
  margin: 0;
}

.wpcf7-form label {
  display: block;
  margin-bottom: var(--haven-space-2);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-900);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-base);
  font-family: var(--haven-font-primary);
  transition: var(--haven-transition-colors);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

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

.wpcf7-form input[type="submit"] {
  padding: var(--haven-space-4) var(--haven-space-8);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.wpcf7-form input[type="submit"]:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

.wpcf7-response-output {
  margin: var(--haven-space-4) 0 0;
  padding: var(--haven-space-4);
  border-radius: var(--haven-radius-lg);
}

.wpcf7-validation-errors {
  background: var(--haven-error-light);
  border: 1px solid var(--haven-error);
  color: var(--haven-error-dark);
}

.wpcf7-mail-sent-ok {
  background: var(--haven-success-light);
  border: 1px solid var(--haven-success);
  color: var(--haven-success-dark);
}

/* WPForms */
.wpforms-container {
  max-width: 800px;
  margin: 0 auto;
}

.wpforms-form .wpforms-field {
  margin-bottom: var(--haven-space-4);
}

.wpforms-form .wpforms-field-label {
  display: block;
  margin-bottom: var(--haven-space-2);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-900);
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form input[type="date"],
.wpforms-form textarea,
.wpforms-form select {
  width: 100%;
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-base);
  font-family: var(--haven-font-primary);
  transition: var(--haven-transition-colors);
}

.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

.wpforms-form button[type="submit"] {
  padding: var(--haven-space-4) var(--haven-space-8);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.wpforms-form button[type="submit"]:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}

/* Gravity Forms */
.gform_wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.gform_wrapper .gfield {
  margin-bottom: var(--haven-space-4);
}

.gform_wrapper .gfield_label {
  display: block;
  margin-bottom: var(--haven-space-2);
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-900);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-base);
  font-family: var(--haven-font-primary);
  transition: var(--haven-transition-colors);
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

.gform_wrapper .gform_button {
  padding: var(--haven-space-4) var(--haven-space-8);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  border: none;
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.gform_wrapper .gform_button:hover {
  background: var(--haven-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-lg);
}


/**
 * 13.3 - SEO PLUGINS
 * 
 * Support for Yoast SEO, Rank Math, and other SEO plugins.
 */

/* Yoast SEO Breadcrumbs */
.yoast-breadcrumb,
#breadcrumbs {
  padding: var(--haven-space-4) 0;
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.yoast-breadcrumb a,
#breadcrumbs a {
  color: var(--haven-primary);
  text-decoration: none;
  transition: var(--haven-transition-colors);
}

.yoast-breadcrumb a:hover,
#breadcrumbs a:hover {
  color: var(--haven-primary-700);
  text-decoration: underline;
}

/* Rank Math Breadcrumbs */
.rank-math-breadcrumb {
  padding: var(--haven-space-4) 0;
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.rank-math-breadcrumb a {
  color: var(--haven-primary);
  text-decoration: none;
  transition: var(--haven-transition-colors);
}

.rank-math-breadcrumb a:hover {
  color: var(--haven-primary-700);
  text-decoration: underline;
}


/**
 * 13.4 - MULTI-LANGUAGE PLUGINS
 * 
 * WPML, Polylang, and TranslatePress support.
 */

/* WPML Language Switcher */
.wpml-ls {
  display: flex;
  gap: var(--haven-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpml-ls-item {
  margin: 0;
}

.wpml-ls-link {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
  padding: var(--haven-space-2) var(--haven-space-3);
  color: var(--haven-gray-700);
  text-decoration: none;
  border-radius: var(--haven-radius-md);
  transition: var(--haven-transition-colors);
}

.wpml-ls-link:hover {
  background: var(--haven-gray-100);
  color: var(--haven-gray-900);
}

.wpml-ls-current-language .wpml-ls-link {
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
}

/* Polylang Language Switcher */
.pll-switcher {
  display: flex;
  gap: var(--haven-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pll-switcher li {
  margin: 0;
}

.pll-switcher a {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
  padding: var(--haven-space-2) var(--haven-space-3);
  color: var(--haven-gray-700);
  text-decoration: none;
  border-radius: var(--haven-radius-md);
  transition: var(--haven-transition-colors);
}

.pll-switcher a:hover {
  background: var(--haven-gray-100);
  color: var(--haven-gray-900);
}

.pll-switcher .current-lang a {
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
}


/**
 * 13.5 - GOOGLE MAPS INTEGRATION
 * 
 * Google Maps styling for property locations.
 */

.google-map-container {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: var(--haven-radius-xl);
  overflow: hidden;
  box-shadow: var(--haven-shadow-lg);
}

.google-map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.map-info-window {
  padding: var(--haven-space-4);
  max-width: 300px;
}

.map-info-window__title {
  font-size: var(--haven-text-lg);
  font-weight: var(--haven-font-bold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-2);
}

.map-info-window__address {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-3);
}

.map-info-window__link {
  display: inline-block;
  padding: var(--haven-space-2) var(--haven-space-4);
  background: var(--haven-primary);
  color: var(--haven-white);
  text-decoration: none;
  border-radius: var(--haven-radius-md);
  font-size: var(--haven-text-sm);
  font-weight: var(--haven-font-semibold);
}


/**
 * 13.6 - SOCIAL MEDIA INTEGRATION
 * 
 * Social sharing buttons and social login styling.
 */

.social-share {
  display: flex;
  gap: var(--haven-space-3);
  align-items: center;
}

.social-share__label {
  font-weight: var(--haven-font-medium);
  color: var(--haven-gray-700);
}

.social-share__buttons {
  display: flex;
  gap: var(--haven-space-2);
}

.social-share__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--haven-radius-full);
  color: var(--haven-white);
  text-decoration: none;
  transition: var(--haven-transition-all);
}

.social-share__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--haven-shadow-md);
}

.social-share__button--facebook {
  background: #1877F2;
}

.social-share__button--twitter {
  background: #1DA1F2;
}

.social-share__button--linkedin {
  background: #0A66C2;
}

.social-share__button--pinterest {
  background: #E60023;
}

.social-share__button--whatsapp {
  background: #25D366;
}

.social-share__button--email {
  background: var(--haven-gray-700);
}

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

.social-login__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--haven-space-3);
  padding: var(--haven-space-3) var(--haven-space-6);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-medium);
  text-decoration: none;
  transition: var(--haven-transition-all);
}

.social-login__button:hover {
  border-color: var(--haven-gray-400);
  box-shadow: var(--haven-shadow-md);
}

.social-login__button--google {
  background: var(--haven-white);
  color: var(--haven-gray-900);
}

.social-login__button--facebook {
  background: #1877F2;
  color: var(--haven-white);
  border-color: #1877F2;
}

.social-login__button--apple {
  background: var(--haven-black);
  color: var(--haven-white);
  border-color: var(--haven-black);
}


/**
 * 13.7 - PAYMENT GATEWAY STYLING
 * 
 * Stripe, PayPal, and other payment gateway integrations.
 */

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-3);
}

.payment-method {
  display: flex;
  align-items: center;
  padding: var(--haven-space-4);
  border: 2px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.payment-method:hover {
  border-color: var(--haven-gray-400);
}

.payment-method--active {
  border-color: var(--haven-primary);
  background: var(--haven-primary-50);
}

.payment-method__radio {
  margin-right: var(--haven-space-3);
}

.payment-method__icon {
  width: 3rem;
  height: 2rem;
  object-fit: contain;
  margin-right: var(--haven-space-3);
}

.payment-method__info {
  flex: 1;
}

.payment-method__name {
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-900);
  margin-bottom: var(--haven-space-1);
}

.payment-method__description {
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

/* Stripe Elements */
.StripeElement {
  padding: var(--haven-space-3) var(--haven-space-4);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  background: var(--haven-white);
  transition: var(--haven-transition-colors);
}

.StripeElement--focus {
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-focus);
}

.StripeElement--invalid {
  border-color: var(--haven-error);
}

/* PayPal Button Container */
#paypal-button-container {
  margin: var(--haven-space-4) 0;
}


/**
 * 13.8 - CALENDAR & BOOKING PLUGINS
 * 
 * Integration with popular booking calendar plugins.
 */

/* Generic Booking Calendar */
.booking-calendar {
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  padding: var(--haven-space-6);
  box-shadow: var(--haven-shadow-lg);
}

.booking-calendar table {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--haven-space-1);
}

.booking-calendar th {
  padding: var(--haven-space-2);
  font-weight: var(--haven-font-semibold);
  color: var(--haven-gray-600);
  text-transform: uppercase;
  font-size: var(--haven-text-xs);
}

.booking-calendar td {
  padding: var(--haven-space-2);
  text-align: center;
  border-radius: var(--haven-radius-md);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.booking-calendar td:hover {
  background: var(--haven-gray-100);
}

.booking-calendar .available {
  background: var(--haven-success-light);
  color: var(--haven-success-dark);
}

.booking-calendar .booked {
  background: var(--haven-error-light);
  color: var(--haven-error-dark);
  cursor: not-allowed;
}

.booking-calendar .selected {
  background: var(--haven-primary);
  color: var(--haven-white);
}


/**
 * 13.9 - ANALYTICS & TRACKING
 * 
 * Google Analytics, Facebook Pixel, and other tracking integrations.
 */

/* Cookie Consent Banner */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--haven-gray-900);
  color: var(--haven-white);
  padding: var(--haven-space-6);
  z-index: var(--haven-z-modal);
  box-shadow: var(--haven-shadow-2xl);
}

.cookie-consent__container {
  max-width: var(--haven-container-xl);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--haven-space-4);
}

.cookie-consent__message {
  flex: 1;
  min-width: 250px;
}

.cookie-consent__title {
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-2);
}

.cookie-consent__text {
  font-size: var(--haven-text-sm);
  opacity: 0.9;
  line-height: var(--haven-leading-relaxed);
}

.cookie-consent__actions {
  display: flex;
  gap: var(--haven-space-3);
}

.cookie-consent__button {
  padding: var(--haven-space-3) var(--haven-space-6);
  border: none;
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-semibold);
  cursor: pointer;
  transition: var(--haven-transition-all);
}

.cookie-consent__button--accept {
  background: var(--haven-primary);
  color: var(--haven-white);
}

.cookie-consent__button--accept:hover {
  background: var(--haven-primary-700);
}

.cookie-consent__button--decline {
  background: transparent;
  color: var(--haven-white);
  border: 1px solid var(--haven-white);
}

.cookie-consent__button--decline:hover {
  background: rgba(255, 255, 255, 0.1);
}


/**
 * 13.10 - CHATBOT & LIVE CHAT
 * 
 * Integration with chat widgets and customer support tools.
 */

/* Custom Chat Widget */
.chat-widget {
  position: fixed;
  bottom: var(--haven-space-6);
  right: var(--haven-space-6);
  z-index: var(--haven-z-modal);
}

.chat-widget__button {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--haven-radius-full);
  background: var(--haven-primary);
  color: var(--haven-white);
  border: none;
  box-shadow: var(--haven-shadow-xl);
  cursor: pointer;
  transition: var(--haven-transition-all);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-widget__button:hover {
  transform: scale(1.1);
  box-shadow: var(--haven-shadow-2xl);
}

.chat-widget__window {
  position: absolute;
  bottom: 4.5rem;
  right: 0;
  width: 380px;
  max-height: 600px;
  background: var(--haven-white);
  border-radius: var(--haven-radius-2xl);
  box-shadow: var(--haven-shadow-2xl);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.chat-widget__window--open {
  display: flex;
}

.chat-widget__header {
  padding: var(--haven-space-4);
  background: var(--haven-primary);
  color: var(--haven-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-widget__title {
  font-weight: var(--haven-font-bold);
}

.chat-widget__close {
  background: transparent;
  border: none;
  color: var(--haven-white);
  cursor: pointer;
  padding: var(--haven-space-2);
}

.chat-widget__messages {
  flex: 1;
  padding: var(--haven-space-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--haven-space-3);
}

.chat-widget__message {
  max-width: 80%;
  padding: var(--haven-space-3);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-sm);
}

.chat-widget__message--user {
  align-self: flex-end;
  background: var(--haven-primary);
  color: var(--haven-white);
  border-bottom-right-radius: var(--haven-radius-sm);
}

.chat-widget__message--agent {
  align-self: flex-start;
  background: var(--haven-gray-100);
  color: var(--haven-gray-900);
  border-bottom-left-radius: var(--haven-radius-sm);
}

.chat-widget__input-area {
  padding: var(--haven-space-4);
  border-top: 1px solid var(--haven-gray-200);
  display: flex;
  gap: var(--haven-space-2);
}

.chat-widget__input {
  flex: 1;
  padding: var(--haven-space-2) var(--haven-space-3);
  border: 1px solid var(--haven-gray-300);
  border-radius: var(--haven-radius-lg);
  font-size: var(--haven-text-sm);
}

.chat-widget__input:focus {
  outline: none;
  border-color: var(--haven-primary);
}

.chat-widget__send {
  padding: var(--haven-space-2) var(--haven-space-4);
  background: var(--haven-primary);
  color: var(--haven-white);
  border: none;
  border-radius: var(--haven-radius-lg);
  font-weight: var(--haven-font-semibold);
  cursor: pointer;
}


/* ==========================================================================
   14.0 - POLISH & REFINEMENT (Final 50+ Enhancements)
   ==========================================================================
   
   Final polish including responsive refinements, animations, RTL support,
   template-specific styles, and micro-interactions. This section brings
   everything together for a professional, production-ready theme.
   ========================================================================== */

/**
 * 14.1 - RESPONSIVE BREAKPOINT REFINEMENTS
 * 
 * Fine-tuned responsive adjustments for all breakpoints.
 */

/* Extra Small Devices (<576px) */
@media (max-width: 575px) {
  /* Typography adjustments */
  h1 { font-size: var(--haven-text-3xl); }
  h2 { font-size: var(--haven-text-2xl); }
  h3 { font-size: var(--haven-text-xl); }
  
  /* Container padding */
  .container,
  .container-fluid {
    padding-left: var(--haven-space-4);
    padding-right: var(--haven-space-4);
  }
  
  /* Button adjustments */
  .btn {
    font-size: var(--haven-text-sm);
    padding: var(--haven-space-2) var(--haven-space-4);
  }
  
  /* Card spacing */
  .card-body {
    padding: var(--haven-space-4);
  }
  
  /* Property card mobile */
  .property-card__content {
    padding: var(--haven-space-4);
  }
  
  .property-card__price-amount {
    font-size: var(--haven-text-2xl);
  }
  
  /* Booking widget mobile */
  .booking-widget {
    padding: var(--haven-space-4);
  }
  
  .booking-widget__dates {
    grid-template-columns: 1fr;
  }
  
  /* Modal mobile */
  .modal-dialog {
    margin: var(--haven-space-2);
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--haven-space-4);
  }
  
  /* Forms mobile */
  .property-search__form {
    grid-template-columns: 1fr;
  }
  
  /* Table responsive */
  table {
    font-size: var(--haven-text-sm);
  }
  
  /* Hide desktop elements */
  .hide-mobile {
    display: none !important;
  }
}

/* Small Devices (≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767px) {
  .property-search__form {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium Devices (≥768px and <1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Navigation adjustments */
  .site-header__nav {
    flex-wrap: wrap;
  }
  
  /* Property grid */
  .property-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Booking widget */
  .booking-widget {
    position: static;
  }
  
  .hide-tablet {
    display: none !important;
  }
}

/* Large Devices (≥1024px) */
@media (min-width: 1024px) {
  /* Enhanced hover effects on desktop */
  .property-card:hover {
    transform: translateY(-12px);
  }
  
  /* Smooth transitions */
  * {
    transition-duration: 0.2s;
  }
  
  .hide-desktop {
    display: none !important;
  }
}

/* Extra Large Devices (≥1280px) */
@media (min-width: 1280px) {
  /* Larger containers */
  .container {
    max-width: var(--haven-container-xl);
  }
  
  /* Property grid 4 columns */
  .property-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Enhanced spacing */
  .section {
    padding: var(--haven-space-24) 0;
  }
}

/* Print Styles */
@media print {
  /* Hide non-essential elements */
  .site-header,
  .site-footer,
  .booking-widget,
  .social-share,
  .btn,
  .navigation,
  .chat-widget,
  .cookie-consent {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  /* Page breaks */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }
  
  /* Show link URLs */
  a[href]:after {
    content: " (" attr(href) ")";
  }
}


/**
 * 14.2 - ANIMATIONS & MICRO-INTERACTIONS
 * 
 * Delightful animations and interactive feedback.
 */

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s var(--haven-ease-out);
}

/* Slide In Animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

.slide-in-left {
  animation: slideInLeft 0.6s var(--haven-ease-out);
}

.slide-in-right {
  animation: slideInRight 0.6s var(--haven-ease-out);
}

.slide-in-up {
  animation: slideInUp 0.6s var(--haven-ease-out);
}

/* Scale In Animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.4s var(--haven-ease-out);
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Shake Animation */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  animation: shake 0.5s;
}

/* Rotate Animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 2s linear infinite;
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--haven-gray-200) 0%,
    var(--haven-gray-100) 50%,
    var(--haven-gray-200) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Float Animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* Glow Effect */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--haven-primary),
                0 0 10px var(--haven-primary);
  }
  50% {
    box-shadow: 0 0 20px var(--haven-primary),
                0 0 30px var(--haven-primary);
  }
}

.glow {
  animation: glow 2s ease-in-out infinite;
}

/* Typing Animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.typing-animation {
  overflow: hidden;
  border-right: 2px solid var(--haven-primary);
  white-space: nowrap;
  animation: typing 3s steps(40) 1s 1 normal both,
             blink 0.75s step-end infinite;
}

/* Parallax Scroll Effect */
.parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Stagger Animation */
.stagger-animation > * {
  opacity: 0;
  animation: fadeIn 0.6s var(--haven-ease-out) forwards;
}

.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-animation > *:nth-child(6) { animation-delay: 0.6s; }

/* Hover Effects */
.hover-lift {
  transition: var(--haven-transition-transform);
}

.hover-lift:hover {
  transform: translateY(-8px);
}

.hover-grow {
  transition: var(--haven-transition-transform);
}

.hover-grow:hover {
  transform: scale(1.05);
}

.hover-shrink {
  transition: var(--haven-transition-transform);
}

.hover-shrink:hover {
  transform: scale(0.95);
}

.hover-rotate {
  transition: var(--haven-transition-transform);
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-blur {
  transition: filter 0.3s ease;
}

.hover-blur:hover {
  filter: blur(2px);
}

.hover-brightness {
  transition: filter 0.3s ease;
}

.hover-brightness:hover {
  filter: brightness(1.2);
}

/* Scroll Animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}


/**
 * 14.3 - RTL (RIGHT-TO-LEFT) SUPPORT
 * 
 * Complete RTL language support for Arabic, Hebrew, etc.
 */

[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Flip padding and margins */
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: var(--haven-space-1); }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: var(--haven-space-2); }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: var(--haven-space-3); }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: var(--haven-space-4); }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: var(--haven-space-1); }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: var(--haven-space-2); }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: var(--haven-space-3); }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: var(--haven-space-4); }

[dir="rtl"] .pr-1 { padding-right: 0; padding-left: var(--haven-space-1); }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: var(--haven-space-2); }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: var(--haven-space-3); }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: var(--haven-space-4); }
[dir="rtl"] .pl-1 { padding-left: 0; padding-right: var(--haven-space-1); }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: var(--haven-space-2); }
[dir="rtl"] .pl-3 { padding-left: 0; padding-right: var(--haven-space-3); }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: var(--haven-space-4); }

/* Flip text alignment */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Flip float */
[dir="rtl"] .float-left { float: right; }
[dir="rtl"] .float-right { float: left; }

/* Flip border radius */
[dir="rtl"] .rounded-l {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--haven-radius-base);
  border-bottom-right-radius: var(--haven-radius-base);
}

[dir="rtl"] .rounded-r {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--haven-radius-base);
  border-bottom-left-radius: var(--haven-radius-base);
}

/* Flip transform */
[dir="rtl"] .transform-flip {
  transform: scaleX(-1);
}

/* RTL-specific components */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  padding-left: var(--haven-space-2);
  padding-right: 0;
  content: "\\";
}

[dir="rtl"] .dropdown-toggle::after {
  margin-left: 0;
  margin-right: var(--haven-space-2);
}

[dir="rtl"] .property-card__badges {
  right: auto;
  left: var(--haven-space-4);
}

[dir="rtl"] .property-card__wishlist {
  left: auto;
  right: var(--haven-space-4);
}

[dir="rtl"] .modal-header .btn-close {
  margin-left: auto;
  margin-right: 0;
}

[dir="rtl"] .chat-widget {
  right: auto;
  left: var(--haven-space-6);
}


/**
 * 14.4 - TEMPLATE-SPECIFIC STYLES
 * 
 * Styles for specific WordPress templates and page layouts.
 */

/* Homepage Hero Section */
.hero-section {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--haven-primary) 0%,
    var(--haven-secondary) 100%
  );
  color: var(--haven-white);
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom center no-repeat;
  background-size: cover;
  opacity: 0.5;
}

.hero-section__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: var(--haven-space-12) var(--haven-space-4);
}

.hero-section__title {
  font-size: var(--haven-text-6xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-6);
  line-height: var(--haven-leading-tight);
}

.hero-section__subtitle {
  font-size: var(--haven-text-xl);
  margin-bottom: var(--haven-space-8);
  opacity: 0.95;
  line-height: var(--haven-leading-relaxed);
}

.hero-section__cta {
  display: inline-flex;
  gap: var(--haven-space-4);
}

@media (max-width: 768px) {
  .hero-section__title {
    font-size: var(--haven-text-4xl);
  }
  
  .hero-section__subtitle {
    font-size: var(--haven-text-lg);
  }
  
  .hero-section__cta {
    flex-direction: column;
    width: 100%;
  }
}

/* Archive Page Layout */
.archive-header {
  padding: var(--haven-space-12) 0 var(--haven-space-8);
  background: var(--haven-gray-50);
  text-align: center;
  border-bottom: 1px solid var(--haven-gray-200);
}

.archive-header__title {
  font-size: var(--haven-text-4xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-4);
  color: var(--haven-gray-900);
}

.archive-header__description {
  max-width: 600px;
  margin: 0 auto;
  color: var(--haven-gray-700);
  line-height: var(--haven-leading-relaxed);
}

.archive-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--haven-space-6);
  padding: var(--haven-space-4);
  background: var(--haven-white);
  border-radius: var(--haven-radius-lg);
  box-shadow: var(--haven-shadow-sm);
}

.archive-meta__count {
  color: var(--haven-gray-600);
  font-size: var(--haven-text-sm);
}

.archive-meta__sort {
  display: flex;
  align-items: center;
  gap: var(--haven-space-2);
}

/* Single Post Layout */
.single-post-header {
  margin-bottom: var(--haven-space-8);
  text-align: center;
}

.single-post-header__category {
  display: inline-block;
  padding: var(--haven-space-1) var(--haven-space-3);
  background: var(--haven-primary-100);
  color: var(--haven-primary-900);
  font-size: var(--haven-text-xs);
  font-weight: var(--haven-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--haven-radius-full);
  margin-bottom: var(--haven-space-4);
}

.single-post-header__title {
  font-size: var(--haven-text-5xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-4);
  line-height: var(--haven-leading-tight);
}

.single-post-header__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--haven-space-4);
  flex-wrap: wrap;
  color: var(--haven-gray-600);
  font-size: var(--haven-text-sm);
}

.single-post-content {
  max-width: 720px;
  margin: 0 auto var(--haven-space-12);
  font-size: var(--haven-text-lg);
  line-height: var(--haven-leading-relaxed);
}

.single-post-content > * + * {
  margin-top: var(--haven-space-6);
}

.single-post-content h2 {
  font-size: var(--haven-text-3xl);
  font-weight: var(--haven-font-bold);
  margin-top: var(--haven-space-12);
  margin-bottom: var(--haven-space-4);
}

.single-post-content h3 {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  margin-top: var(--haven-space-8);
  margin-bottom: var(--haven-space-4);
}

.single-post-footer {
  border-top: 2px solid var(--haven-gray-200);
  padding-top: var(--haven-space-8);
  margin-top: var(--haven-space-12);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haven-space-2);
  margin-bottom: var(--haven-space-6);
}

.post-tag {
  padding: var(--haven-space-2) var(--haven-space-4);
  background: var(--haven-gray-100);
  color: var(--haven-gray-700);
  font-size: var(--haven-text-sm);
  border-radius: var(--haven-radius-full);
  text-decoration: none;
  transition: var(--haven-transition-colors);
}

.post-tag:hover {
  background: var(--haven-primary);
  color: var(--haven-white);
}

/* Author Bio Box */
.author-bio {
  display: flex;
  gap: var(--haven-space-6);
  padding: var(--haven-space-6);
  background: var(--haven-gray-50);
  border-radius: var(--haven-radius-xl);
  margin: var(--haven-space-12) 0;
}

.author-bio__avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--haven-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.author-bio__content {
  flex: 1;
}

.author-bio__name {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-2);
}

.author-bio__description {
  color: var(--haven-gray-700);
  line-height: var(--haven-leading-relaxed);
  margin-bottom: var(--haven-space-4);
}

.author-bio__social {
  display: flex;
  gap: var(--haven-space-3);
}

@media (max-width: 768px) {
  .author-bio {
    flex-direction: column;
    text-align: center;
  }
  
  .author-bio__avatar {
    margin: 0 auto;
  }
  
  .author-bio__social {
    justify-content: center;
  }
}

/* Related Posts Section */
.related-posts {
  margin: var(--haven-space-12) 0;
}

.related-posts__title {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-6);
  text-align: center;
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--haven-space-6);
}

/* 404 Error Page */
.error-404 {
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--haven-space-12) var(--haven-space-4);
}

.error-404__content {
  max-width: 600px;
}

.error-404__code {
  font-size: 150px;
  font-weight: var(--haven-font-black);
  line-height: 1;
  color: var(--haven-primary);
  margin-bottom: var(--haven-space-4);
  text-shadow: 4px 4px 0 var(--haven-secondary);
}

.error-404__title {
  font-size: var(--haven-text-4xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-4);
}

.error-404__message {
  font-size: var(--haven-text-lg);
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-8);
  line-height: var(--haven-leading-relaxed);
}

.error-404__search {
  max-width: 400px;
  margin: 0 auto var(--haven-space-8);
}

/* Search Results Page */
.search-results-header {
  padding: var(--haven-space-8) 0;
  background: var(--haven-gray-50);
  border-bottom: 1px solid var(--haven-gray-200);
}

.search-results-header__title {
  font-size: var(--haven-text-3xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-4);
}

.search-results-header__query {
  color: var(--haven-primary);
}

.search-results-header__count {
  color: var(--haven-gray-600);
  font-size: var(--haven-text-base);
}

.search-result-item {
  padding: var(--haven-space-6);
  margin-bottom: var(--haven-space-4);
  background: var(--haven-white);
  border-radius: var(--haven-radius-xl);
  border: 1px solid var(--haven-gray-200);
  transition: var(--haven-transition-all);
}

.search-result-item:hover {
  border-color: var(--haven-primary);
  box-shadow: var(--haven-shadow-md);
}

.search-result-item__title {
  font-size: var(--haven-text-xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-2);
}

.search-result-item__title a {
  color: var(--haven-gray-900);
  text-decoration: none;
  transition: var(--haven-transition-colors);
}

.search-result-item__title a:hover {
  color: var(--haven-primary);
}

.search-result-item__excerpt {
  color: var(--haven-gray-700);
  margin-bottom: var(--haven-space-3);
  line-height: var(--haven-leading-relaxed);
}

.search-result-item__meta {
  display: flex;
  gap: var(--haven-space-4);
  font-size: var(--haven-text-sm);
  color: var(--haven-gray-600);
}

.search-no-results {
  padding: var(--haven-space-12);
  text-align: center;
}

.search-no-results__icon {
  font-size: 80px;
  color: var(--haven-gray-400);
  margin-bottom: var(--haven-space-4);
}

.search-no-results__title {
  font-size: var(--haven-text-2xl);
  font-weight: var(--haven-font-bold);
  margin-bottom: var(--haven-space-4);
}

.search-no-results__message {
  color: var(--haven-gray-600);
  margin-bottom: var(--haven-space-8);
}


/**
 * 14.5 - ACCESSIBILITY ENHANCEMENTS
 * 
 * Additional accessibility improvements beyond WCAG 2.1 AA.
 */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --haven-gray-300: #888;
    --haven-gray-600: #444;
  }
  
  .btn {
    border-width: 2px;
  }
  
  a {
    text-decoration: underline;
  }
  
  .card {
    border-width: 2px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  body.auto-theme {
    --haven-white: #1a1a1a;
    --haven-black: #ffffff;
    --haven-gray-50: #2a2a2a;
    --haven-gray-100: #333333;
    --haven-gray-200: #404040;
    --haven-gray-300: #525252;
    --haven-gray-400: #6b6b6b;
    --haven-gray-500: #858585;
    --haven-gray-600: #a3a3a3;
    --haven-gray-700: #c2c2c2;
    --haven-gray-800: #e0e0e0;
    --haven-gray-900: #f5f5f5;
    
    background-color: var(--haven-white);
    color: var(--haven-gray-900);
  }
  
  body.auto-theme .card,
  body.auto-theme .modal-content,
  body.auto-theme .dropdown-menu {
    background-color: var(--haven-gray-50);
    border-color: var(--haven-gray-300);
  }
}

/* Focus Visible (Enhanced) */
:focus-visible {
  outline: 3px solid var(--haven-primary);
  outline-offset: 3px;
}

/* Keyboard Navigation Indicators */
.keyboard-focused {
  outline: 3px solid var(--haven-primary);
  outline-offset: 3px;
}

/* Skip to Main Content (Enhanced) */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--haven-space-3) var(--haven-space-6);
  background: var(--haven-primary);
  color: var(--haven-white);
  font-weight: var(--haven-font-semibold);
  border-radius: var(--haven-radius-lg);
  z-index: var(--haven-z-tooltip);
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: var(--haven-space-4);
}

/* ARIA Live Region Styling */
[aria-live="polite"],
[aria-live="assertive"] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Disabled State Improvements */
[disabled],
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Loading State Improvements */
[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

[aria-busy="true"]::after {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: var(--haven-space-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border-spin 0.75s linear infinite;
}


/**
 * 14.6 - PERFORMANCE OPTIMIZATIONS
 * 
 * CSS optimizations for better rendering performance.
 */

/* GPU Acceleration for Transforms */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Content Visibility for Large Lists */
.large-list-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Will-Change for Animated Elements */
.will-animate {
  will-change: transform, opacity;
}

.will-animate.animation-complete {
  will-change: auto;
}

/* Font Loading Optimization */
@font-face {
  font-family: 'Haven Fallback';
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
  src: local('Arial');
}


/**
 * 14.7 - UTILITY HELPERS & HELPERS
 * 
 * Final utility classes and helper styles.
 */

/* Aspect Ratio Utilities */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-2 { aspect-ratio: 3 / 2; }

/* Object Fit Utilities */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* Mix Blend Mode */
.mix-blend-normal { mix-blend-mode: normal; }
.mix-blend-multiply { mix-blend-mode: multiply; }
.mix-blend-screen { mix-blend-mode: screen; }
.mix-blend-overlay { mix-blend-mode: overlay; }

/* Backdrop Blur */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur { backdrop-filter: blur(8px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); }

/* Gradient Text */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--haven-primary) 0%,
    var(--haven-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glass Morphism */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

/* Neumorphism */
.neumorphism {
  background: var(--haven-gray-100);
  box-shadow: 
    8px 8px 16px rgba(0, 0, 0, 0.1),
    -8px -8px 16px rgba(255, 255, 255, 0.7);
}

.neumorphism-inset {
  background: var(--haven-gray-100);
  box-shadow: 
    inset 8px 8px 16px rgba(0, 0, 0, 0.1),
    inset -8px -8px 16px rgba(255, 255, 255, 0.7);
}

/* Text Selection */
::selection {
  background: var(--haven-primary);
  color: var(--haven-white);
}

::-moz-selection {
  background: var(--haven-primary);
  color: var(--haven-white);
}

/* Scrollbar Styling (Webkit) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--haven-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--haven-gray-400);
  border-radius: var(--haven-radius-full);
  border: 3px solid var(--haven-gray-100);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--haven-gray-500);
}

/* Utility Classes for Common Patterns */
.container-fluid {
  width: 100%;
  padding-right: var(--haven-space-4);
  padding-left: var(--haven-space-4);
  margin-right: auto;
  margin-left: auto;
}

.section {
  padding: var(--haven-space-16) 0;
}

.section-sm {
  padding: var(--haven-space-8) 0;
}

.section-lg {
  padding: var(--haven-space-24) 0;
}

.vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.text-gradient {
  background: linear-gradient(135deg, var(--haven-primary) 0%, var(--haven-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.overlay-primary {
  background: linear-gradient(
    135deg,
    rgba(var(--haven-primary-rgb), 0.8) 0%,
    rgba(var(--haven-secondary-rgb), 0.8) 100%
  );
}


/* ==========================================================================
   END OF HAVEN THEME STYLES
   ==========================================================================
   
   Total Sections: 14 major sections
   Total Lines: ~12,200 lines
   Version: 1.0.0
   
   Complete enterprise-grade CSS foundation for Haven Vacation Rental Theme
   with 5 color schemes, 250+ utilities, 60+ components, 30+ vacation rental
   components, complete third-party integrations, and professional polish.
   ========================================================================== */