/* ========================================
 * GLOBAL MARGIN UTILITY SYSTEM
 * ========================================
 * CSS Custom Properties for easy margin adjustments in dev tools
 * Usage: Change --margin-* values in dev tools to test spacing
 * Apply to any page by including this CSS file
 * ======================================== */

:root {
  /* Base margin scale - easily adjustable in dev tools */
  --margin-none: 0;
  --margin-px: 1px;
  --margin-0\.5: 0.125rem;  /* 2px */
  --margin-1: 0.25rem;      /* 4px */
  --margin-1\.5: 0.375rem;  /* 6px */
  --margin-2: 0.5rem;       /* 8px */
  --margin-2\.5: 0.625rem;  /* 10px */
  --margin-3: 0.75rem;      /* 12px */
  --margin-3\.5: 0.875rem;  /* 14px */
  --margin-4: 1rem;         /* 16px */
  --margin-5: 1.25rem;      /* 20px */
  --margin-6: 1.5rem;       /* 24px */
  --margin-8: 2rem;         /* 32px */
  --margin-10: 2.5rem;      /* 40px */
  --margin-12: 3rem;        /* 48px */
  --margin-16: 4rem;        /* 64px */
  --margin-20: 5rem;        /* 80px */
  --margin-24: 6rem;        /* 96px */
  --margin-32: 8rem;        /* 128px */
  
  /* Semantic margin names for common use cases */
  --margin-xs: var(--margin-1);      /* Extra small: 4px */
  --margin-sm: var(--margin-2);      /* Small: 8px */
  --margin-md: var(--margin-4);      /* Medium: 16px */
  --margin-lg: var(--margin-6);      /* Large: 24px */
  --margin-xl: var(--margin-8);      /* Extra large: 32px */
  --margin-2xl: var(--margin-12);    /* 2X large: 48px */
  --margin-3xl: var(--margin-16);    /* 3X large: 64px */
  
  /* Component-specific margins */
  --margin-icon: var(--margin-2);        /* Icons: 8px */
  --margin-button: var(--margin-3);      /* Buttons: 12px */
  --margin-card: var(--margin-4);        /* Cards: 16px */
  --margin-section: var(--margin-8);     /* Sections: 32px */
  --margin-dropdown-arrow: var(--margin-1\.5); /* Dropdown arrows: 6px */
  --margin-form-field: var(--margin-4);  /* Form fields: 16px */
  --margin-modal: var(--margin-6);       /* Modals: 24px */
  --margin-navigation: var(--margin-3);  /* Navigation items: 12px */
  --margin-list-item: var(--margin-2);   /* List items: 8px */
  --margin-text-block: var(--margin-4);  /* Text blocks: 16px */
  
  /* DateTime field specific margins */
  --margin-datetime-text: var(--margin-2);    /* DateTime text: 8px */
  --margin-datetime-icon: var(--margin-3);    /* DateTime icon: 12px */
  --margin-datetime-arrow: var(--margin-3);   /* DateTime arrow: 12px */
  
  /* Page-specific margins */
  --margin-discover-topbar: var(--margin-4);     /* Discover page topbar: 16px */
  --margin-checkout-section: var(--margin-6);    /* Checkout sections: 24px */
  --margin-booking-detail: var(--margin-4);      /* Booking details: 16px */
  --margin-spot-card: var(--margin-3);           /* Spot cards: 12px */
  --margin-review-item: var(--margin-4);         /* Review items: 16px */
  --margin-dashboard-widget: var(--margin-6);    /* Dashboard widgets: 24px */
}

/* ========================================
 * UTILITY CLASSES - SEMANTIC SIZES
 * ======================================== */
.m-var-xs { margin: var(--margin-xs) !important; }
.m-var-sm { margin: var(--margin-sm) !important; }
.m-var-md { margin: var(--margin-md) !important; }
.m-var-lg { margin: var(--margin-lg) !important; }
.m-var-xl { margin: var(--margin-xl) !important; }
.m-var-2xl { margin: var(--margin-2xl) !important; }
.m-var-3xl { margin: var(--margin-3xl) !important; }

/* Horizontal margins */
.mx-var-xs { margin-left: var(--margin-xs) !important; margin-right: var(--margin-xs) !important; }
.mx-var-sm { margin-left: var(--margin-sm) !important; margin-right: var(--margin-sm) !important; }
.mx-var-md { margin-left: var(--margin-md) !important; margin-right: var(--margin-md) !important; }
.mx-var-lg { margin-left: var(--margin-lg) !important; margin-right: var(--margin-lg) !important; }
.mx-var-xl { margin-left: var(--margin-xl) !important; margin-right: var(--margin-xl) !important; }
.mx-var-2xl { margin-left: var(--margin-2xl) !important; margin-right: var(--margin-2xl) !important; }
.mx-var-3xl { margin-left: var(--margin-3xl) !important; margin-right: var(--margin-3xl) !important; }

/* Vertical margins */
.my-var-xs { margin-top: var(--margin-xs) !important; margin-bottom: var(--margin-xs) !important; }
.my-var-sm { margin-top: var(--margin-sm) !important; margin-bottom: var(--margin-sm) !important; }
.my-var-md { margin-top: var(--margin-md) !important; margin-bottom: var(--margin-md) !important; }
.my-var-lg { margin-top: var(--margin-lg) !important; margin-bottom: var(--margin-lg) !important; }
.my-var-xl { margin-top: var(--margin-xl) !important; margin-bottom: var(--margin-xl) !important; }
.my-var-2xl { margin-top: var(--margin-2xl) !important; margin-bottom: var(--margin-2xl) !important; }
.my-var-3xl { margin-top: var(--margin-3xl) !important; margin-bottom: var(--margin-3xl) !important; }

/* Individual side margins */
.ml-var-xs { margin-left: var(--margin-xs) !important; }
.ml-var-sm { margin-left: var(--margin-sm) !important; }
.ml-var-md { margin-left: var(--margin-md) !important; }
.ml-var-lg { margin-left: var(--margin-lg) !important; }
.ml-var-xl { margin-left: var(--margin-xl) !important; }
.ml-var-2xl { margin-left: var(--margin-2xl) !important; }
.ml-var-3xl { margin-left: var(--margin-3xl) !important; }

.mr-var-xs { margin-right: var(--margin-xs) !important; }
.mr-var-sm { margin-right: var(--margin-sm) !important; }
.mr-var-md { margin-right: var(--margin-md) !important; }
.mr-var-lg { margin-right: var(--margin-lg) !important; }
.mr-var-xl { margin-right: var(--margin-xl) !important; }
.mr-var-2xl { margin-right: var(--margin-2xl) !important; }
.mr-var-3xl { margin-right: var(--margin-3xl) !important; }

.mt-var-xs { margin-top: var(--margin-xs) !important; }
.mt-var-sm { margin-top: var(--margin-sm) !important; }
.mt-var-md { margin-top: var(--margin-md) !important; }
.mt-var-lg { margin-top: var(--margin-lg) !important; }
.mt-var-xl { margin-top: var(--margin-xl) !important; }
.mt-var-2xl { margin-top: var(--margin-2xl) !important; }
.mt-var-3xl { margin-top: var(--margin-3xl) !important; }

.mb-var-xs { margin-bottom: var(--margin-xs) !important; }
.mb-var-sm { margin-bottom: var(--margin-sm) !important; }
.mb-var-md { margin-bottom: var(--margin-md) !important; }
.mb-var-lg { margin-bottom: var(--margin-lg) !important; }
.mb-var-xl { margin-bottom: var(--margin-xl) !important; }
.mb-var-2xl { margin-bottom: var(--margin-2xl) !important; }
.mb-var-3xl { margin-bottom: var(--margin-3xl) !important; }

/* ========================================
 * COMPONENT-SPECIFIC UTILITY CLASSES
 * ======================================== */
.m-icon { margin: var(--margin-icon) !important; }
.mx-icon { margin-left: var(--margin-icon) !important; margin-right: var(--margin-icon) !important; }
.my-icon { margin-top: var(--margin-icon) !important; margin-bottom: var(--margin-icon) !important; }
.ml-icon { margin-left: var(--margin-icon) !important; }
.mr-icon { margin-right: var(--margin-icon) !important; }
.mt-icon { margin-top: var(--margin-icon) !important; }
.mb-icon { margin-bottom: var(--margin-icon) !important; }

.m-button { margin: var(--margin-button) !important; }
.mx-button { margin-left: var(--margin-button) !important; margin-right: var(--margin-button) !important; }
.my-button { margin-top: var(--margin-button) !important; margin-bottom: var(--margin-button) !important; }
.ml-button { margin-left: var(--margin-button) !important; }
.mr-button { margin-right: var(--margin-button) !important; }
.mt-button { margin-top: var(--margin-button) !important; }
.mb-button { margin-bottom: var(--margin-button) !important; }

.m-card { margin: var(--margin-card) !important; }
.mx-card { margin-left: var(--margin-card) !important; margin-right: var(--margin-card) !important; }
.my-card { margin-top: var(--margin-card) !important; margin-bottom: var(--margin-card) !important; }
.ml-card { margin-left: var(--margin-card) !important; }
.mr-card { margin-right: var(--margin-card) !important; }
.mt-card { margin-top: var(--margin-card) !important; }
.mb-card { margin-bottom: var(--margin-card) !important; }

.m-dropdown-arrow { margin: var(--margin-dropdown-arrow) !important; }
.mx-dropdown-arrow { margin-left: var(--margin-dropdown-arrow) !important; margin-right: var(--margin-dropdown-arrow) !important; }
.my-dropdown-arrow { margin-top: var(--margin-dropdown-arrow) !important; margin-bottom: var(--margin-dropdown-arrow) !important; }
.ml-dropdown-arrow { margin-left: var(--margin-dropdown-arrow) !important; }
.mr-dropdown-arrow { margin-right: var(--margin-dropdown-arrow) !important; }
.mt-dropdown-arrow { margin-top: var(--margin-dropdown-arrow) !important; }
.mb-dropdown-arrow { margin-bottom: var(--margin-dropdown-arrow) !important; }

.m-datetime-text { margin: var(--margin-datetime-text) !important; }
.mx-datetime-text { margin-left: var(--margin-datetime-text) !important; margin-right: var(--margin-datetime-text) !important; }
.my-datetime-text { margin-top: var(--margin-datetime-text) !important; margin-bottom: var(--margin-datetime-text) !important; }
.ml-datetime-text { margin-left: var(--margin-datetime-text) !important; }
.mr-datetime-text { margin-right: var(--margin-datetime-text) !important; }
.mt-datetime-text { margin-top: var(--margin-datetime-text) !important; }
.mb-datetime-text { margin-bottom: var(--margin-datetime-text) !important; }

.m-datetime-icon { margin: var(--margin-datetime-icon) !important; }
.mx-datetime-icon { margin-left: var(--margin-datetime-icon) !important; margin-right: var(--margin-datetime-icon) !important; }
.my-datetime-icon { margin-top: var(--margin-datetime-icon) !important; margin-bottom: var(--margin-datetime-icon) !important; }
.ml-datetime-icon { margin-left: var(--margin-datetime-icon) !important; }
.mr-datetime-icon { margin-right: var(--margin-datetime-icon) !important; }
.mt-datetime-icon { margin-top: var(--margin-datetime-icon) !important; }
.mb-datetime-icon { margin-bottom: var(--margin-datetime-icon) !important; }

.m-datetime-arrow { margin: var(--margin-datetime-arrow) !important; }
.mx-datetime-arrow { margin-left: var(--margin-datetime-arrow) !important; margin-right: var(--margin-datetime-arrow) !important; }
.my-datetime-arrow { margin-top: var(--margin-datetime-arrow) !important; margin-bottom: var(--margin-datetime-arrow) !important; }
.ml-datetime-arrow { margin-left: var(--margin-datetime-arrow) !important; }
.mr-datetime-arrow { margin-right: var(--margin-datetime-arrow) !important; }
.mt-datetime-arrow { margin-top: var(--margin-datetime-arrow) !important; }
.mb-datetime-arrow { margin-bottom: var(--margin-datetime-arrow) !important; }

.m-form-field { margin: var(--margin-form-field) !important; }
.mx-form-field { margin-left: var(--margin-form-field) !important; margin-right: var(--margin-form-field) !important; }
.my-form-field { margin-top: var(--margin-form-field) !important; margin-bottom: var(--margin-form-field) !important; }
.ml-form-field { margin-left: var(--margin-form-field) !important; }
.mr-form-field { margin-right: var(--margin-form-field) !important; }
.mt-form-field { margin-top: var(--margin-form-field) !important; }
.mb-form-field { margin-bottom: var(--margin-form-field) !important; }

.m-modal { margin: var(--margin-modal) !important; }
.mx-modal { margin-left: var(--margin-modal) !important; margin-right: var(--margin-modal) !important; }
.my-modal { margin-top: var(--margin-modal) !important; margin-bottom: var(--margin-modal) !important; }
.ml-modal { margin-left: var(--margin-modal) !important; }
.mr-modal { margin-right: var(--margin-modal) !important; }
.mt-modal { margin-top: var(--margin-modal) !important; }
.mb-modal { margin-bottom: var(--margin-modal) !important; }

.m-navigation { margin: var(--margin-navigation) !important; }
.mx-navigation { margin-left: var(--margin-navigation) !important; margin-right: var(--margin-navigation) !important; }
.my-navigation { margin-top: var(--margin-navigation) !important; margin-bottom: var(--margin-navigation) !important; }
.ml-navigation { margin-left: var(--margin-navigation) !important; }
.mr-navigation { margin-right: var(--margin-navigation) !important; }
.mt-navigation { margin-top: var(--margin-navigation) !important; }
.mb-navigation { margin-bottom: var(--margin-navigation) !important; }

.m-list-item { margin: var(--margin-list-item) !important; }
.mx-list-item { margin-left: var(--margin-list-item) !important; margin-right: var(--margin-list-item) !important; }
.my-list-item { margin-top: var(--margin-list-item) !important; margin-bottom: var(--margin-list-item) !important; }
.ml-list-item { margin-left: var(--margin-list-item) !important; }
.mr-list-item { margin-right: var(--margin-list-item) !important; }
.mt-list-item { margin-top: var(--margin-list-item) !important; }
.mb-list-item { margin-bottom: var(--margin-list-item) !important; }

.m-text-block { margin: var(--margin-text-block) !important; }
.mx-text-block { margin-left: var(--margin-text-block) !important; margin-right: var(--margin-text-block) !important; }
.my-text-block { margin-top: var(--margin-text-block) !important; margin-bottom: var(--margin-text-block) !important; }
.ml-text-block { margin-left: var(--margin-text-block) !important; }
.mr-text-block { margin-right: var(--margin-text-block) !important; }
.mt-text-block { margin-top: var(--margin-text-block) !important; }
.mb-text-block { margin-bottom: var(--margin-text-block) !important; }

/* ========================================
 * PAGE-SPECIFIC UTILITY CLASSES
 * ======================================== */
.m-discover-topbar { margin: var(--margin-discover-topbar) !important; }
.mx-discover-topbar { margin-left: var(--margin-discover-topbar) !important; margin-right: var(--margin-discover-topbar) !important; }
.my-discover-topbar { margin-top: var(--margin-discover-topbar) !important; margin-bottom: var(--margin-discover-topbar) !important; }

.m-checkout-section { margin: var(--margin-checkout-section) !important; }
.mx-checkout-section { margin-left: var(--margin-checkout-section) !important; margin-right: var(--margin-checkout-section) !important; }
.my-checkout-section { margin-top: var(--margin-checkout-section) !important; margin-bottom: var(--margin-checkout-section) !important; }

.m-booking-detail { margin: var(--margin-booking-detail) !important; }
.mx-booking-detail { margin-left: var(--margin-booking-detail) !important; margin-right: var(--margin-booking-detail) !important; }
.my-booking-detail { margin-top: var(--margin-booking-detail) !important; margin-bottom: var(--margin-booking-detail) !important; }

.m-spot-card { margin: var(--margin-spot-card) !important; }
.mx-spot-card { margin-left: var(--margin-spot-card) !important; margin-right: var(--margin-spot-card) !important; }
.my-spot-card { margin-top: var(--margin-spot-card) !important; margin-bottom: var(--margin-spot-card) !important; }

.m-review-item { margin: var(--margin-review-item) !important; }
.mx-review-item { margin-left: var(--margin-review-item) !important; margin-right: var(--margin-review-item) !important; }
.my-review-item { margin-top: var(--margin-review-item) !important; margin-bottom: var(--margin-review-item) !important; }

.m-dashboard-widget { margin: var(--margin-dashboard-widget) !important; }
.mx-dashboard-widget { margin-left: var(--margin-dashboard-widget) !important; margin-right: var(--margin-dashboard-widget) !important; }
.my-dashboard-widget { margin-top: var(--margin-dashboard-widget) !important; margin-bottom: var(--margin-dashboard-widget) !important; }

/* ========================================
 * RESPONSIVE MARGIN UTILITIES
 * ======================================== */
/* Mobile-specific margins */
@media (max-width: 520px) {
  :root {
    --margin-mobile-xs: var(--margin-0\.5);
    --margin-mobile-sm: var(--margin-1);
    --margin-mobile-md: var(--margin-2);
    --margin-mobile-lg: var(--margin-3);
    --margin-mobile-xl: var(--margin-4);
  }
  
  .m-mobile-xs { margin: var(--margin-mobile-xs) !important; }
  .m-mobile-sm { margin: var(--margin-mobile-sm) !important; }
  .m-mobile-md { margin: var(--margin-mobile-md) !important; }
  .m-mobile-lg { margin: var(--margin-mobile-lg) !important; }
  .m-mobile-xl { margin: var(--margin-mobile-xl) !important; }
  
  .mx-mobile-xs { margin-left: var(--margin-mobile-xs) !important; margin-right: var(--margin-mobile-xs) !important; }
  .mx-mobile-sm { margin-left: var(--margin-mobile-sm) !important; margin-right: var(--margin-mobile-sm) !important; }
  .mx-mobile-md { margin-left: var(--margin-mobile-md) !important; margin-right: var(--margin-mobile-md) !important; }
  .mx-mobile-lg { margin-left: var(--margin-mobile-lg) !important; margin-right: var(--margin-mobile-lg) !important; }
  .mx-mobile-xl { margin-left: var(--margin-mobile-xl) !important; margin-right: var(--margin-mobile-xl) !important; }
  
  .my-mobile-xs { margin-top: var(--margin-mobile-xs) !important; margin-bottom: var(--margin-mobile-xs) !important; }
  .my-mobile-sm { margin-top: var(--margin-mobile-sm) !important; margin-bottom: var(--margin-mobile-sm) !important; }
  .my-mobile-md { margin-top: var(--margin-mobile-md) !important; margin-bottom: var(--margin-mobile-md) !important; }
  .my-mobile-lg { margin-top: var(--margin-mobile-lg) !important; margin-bottom: var(--margin-mobile-lg) !important; }
  .my-mobile-xl { margin-top: var(--margin-mobile-xl) !important; margin-bottom: var(--margin-mobile-xl) !important; }
}

/* Tablet-specific margins */
@media (min-width: 481px) and (max-width: 1023px) {
  :root {
    --margin-tablet-xs: var(--margin-1);
    --margin-tablet-sm: var(--margin-2);
    --margin-tablet-md: var(--margin-3);
    --margin-tablet-lg: var(--margin-4);
    --margin-tablet-xl: var(--margin-6);
  }
  
  .m-tablet-xs { margin: var(--margin-tablet-xs) !important; }
  .m-tablet-sm { margin: var(--margin-tablet-sm) !important; }
  .m-tablet-md { margin: var(--margin-tablet-md) !important; }
  .m-tablet-lg { margin: var(--margin-tablet-lg) !important; }
  .m-tablet-xl { margin: var(--margin-tablet-xl) !important; }
  
  .mx-tablet-xs { margin-left: var(--margin-tablet-xs) !important; margin-right: var(--margin-tablet-xs) !important; }
  .mx-tablet-sm { margin-left: var(--margin-tablet-sm) !important; margin-right: var(--margin-tablet-sm) !important; }
  .mx-tablet-md { margin-left: var(--margin-tablet-md) !important; margin-right: var(--margin-tablet-md) !important; }
  .mx-tablet-lg { margin-left: var(--margin-tablet-lg) !important; margin-right: var(--margin-tablet-lg) !important; }
  .mx-tablet-xl { margin-left: var(--margin-tablet-xl) !important; margin-right: var(--margin-tablet-xl) !important; }
  
  .my-tablet-xs { margin-top: var(--margin-tablet-xs) !important; margin-bottom: var(--margin-tablet-xs) !important; }
  .my-tablet-sm { margin-top: var(--margin-tablet-sm) !important; margin-bottom: var(--margin-tablet-sm) !important; }
  .my-tablet-md { margin-top: var(--margin-tablet-md) !important; margin-bottom: var(--margin-tablet-md) !important; }
  .my-tablet-lg { margin-top: var(--margin-tablet-lg) !important; margin-bottom: var(--margin-tablet-lg) !important; }
  .my-tablet-xl { margin-top: var(--margin-tablet-xl) !important; margin-bottom: var(--margin-tablet-xl) !important; }
}

/* Desktop-specific margins */
@media (min-width: 1024px) {
  :root {
    --margin-desktop-xs: var(--margin-1\.5);
    --margin-desktop-sm: var(--margin-3);
    --margin-desktop-md: var(--margin-4);
    --margin-desktop-lg: var(--margin-6);
    --margin-desktop-xl: var(--margin-8);
  }
  
  .m-desktop-xs { margin: var(--margin-desktop-xs) !important; }
  .m-desktop-sm { margin: var(--margin-desktop-sm) !important; }
  .m-desktop-md { margin: var(--margin-desktop-md) !important; }
  .m-desktop-lg { margin: var(--margin-desktop-lg) !important; }
  .m-desktop-xl { margin: var(--margin-desktop-xl) !important; }
  
  .mx-desktop-xs { margin-left: var(--margin-desktop-xs) !important; margin-right: var(--margin-desktop-xs) !important; }
  .mx-desktop-sm { margin-left: var(--margin-desktop-sm) !important; margin-right: var(--margin-desktop-sm) !important; }
  .mx-desktop-md { margin-left: var(--margin-desktop-md) !important; margin-right: var(--margin-desktop-md) !important; }
  .mx-desktop-lg { margin-left: var(--margin-desktop-lg) !important; margin-right: var(--margin-desktop-lg) !important; }
  .mx-desktop-xl { margin-left: var(--margin-desktop-xl) !important; margin-right: var(--margin-desktop-xl) !important; }
  
  .my-desktop-xs { margin-top: var(--margin-desktop-xs) !important; margin-bottom: var(--margin-desktop-xs) !important; }
  .my-desktop-sm { margin-top: var(--margin-desktop-sm) !important; margin-bottom: var(--margin-desktop-sm) !important; }
  .my-desktop-md { margin-top: var(--margin-desktop-md) !important; margin-bottom: var(--margin-desktop-md) !important; }
  .my-desktop-lg { margin-top: var(--margin-desktop-lg) !important; margin-bottom: var(--margin-desktop-lg) !important; }
  .my-desktop-xl { margin-top: var(--margin-desktop-xl) !important; margin-bottom: var(--margin-desktop-xl) !important; }
}

/* ========================================
 * DEBUGGING UTILITIES
 * ======================================== */
/* Add these classes to visualize margins in dev tools */
.debug-margins * {
  outline: 1px solid rgba(255, 0, 0, 0.3) !important;
  background: rgba(255, 0, 0, 0.05) !important;
}

.debug-margins *:hover {
  outline: 2px solid rgba(255, 0, 0, 0.8) !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

/* Show margin values on hover (requires JavaScript to populate content) */
.show-margin-values *::before {
  content: attr(data-margin-value);
  position: absolute;
  top: -20px;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 3px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.show-margin-values *:hover::before {
  opacity: 1;
}