@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css');

/* ==========================================================================
   VELORA ESTETİK - DYNAMIC DESIGN SYSTEM & THEME TOKENS
   Mobile-First Luxury Medical Aesthetics Theme
   Fully Variable-Driven Architecture for Easy Maintenance & Customization
   ========================================================================== */

:root {
  /* ==========================================================================
     PHASE 6: DESIGN TOKEN ARCHITECTURE (MANDATORY GROUPS)
     Single Source of Truth for Colors, Base, Typography & Radii
     ========================================================================== */

  /* 1. MANDATORY COLOR TOKENS (Brand Colors) */
  --vl-wine: #4D122D;
  --vl-wine-deep: #350A1E;
  --vl-wine-soft: rgba(77, 18, 45, 0.08);
  --vl-gold: #C9A36A;
  --vl-gold-deep: #A9834B;
  --vl-gold-soft: rgba(201, 163, 106, 0.15);
  --vl-ink: #2A121C;
  --vl-muted: #624B55;
  --vl-line: #E8DED2;
  --vl-ivory: #F7F1EA;
  --vl-paper: #FAF6F0;
  --vl-sand: #E3D3C1;
  --vl-blush: #F4E8E1;
  --vl-whatsapp: #25D366;

  /* 2. BASE BACKGROUND TOKENS */
  --vl-base: var(--vl-ivory);
  --vl-base-elevated: var(--vl-paper);
  --vl-base-mute: var(--vl-sand);

  /* 3. TYPOGRAPHY TOKENS */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* 4. SINGLE-SOURCE RADIUS SYSTEM (Professional Enterprise Standard: 4px - 8px) */
  --vl-r-unit: 0.5rem;
  --vl-r-0: 0px;
  --vl-r-xs: 2px;
  --vl-r-sm: 4px;
  --vl-r-md: 6px;
  --vl-r-lg: 8px;
  --vl-r-xl: 8px;
  --vl-r-2xl: 10px;
  --vl-r-card: 8px;
  --vl-r-btn: 6px;
  --vl-r-pill: 9999px;
  --vl-r-input: 6px;
  --vl-r-select: 6px;
  --vl-r-cookie: 8px;
  --vl-r-ba: 8px;

  /* 5. BACKWARD-COMPATIBILITY ALIASES (Existing theme.css variables map directly to tokens) */
  --vl-color-wine: var(--vl-wine);
  --vl-color-wine-dark: var(--vl-wine-deep);
  --vl-color-wine-light: #6A1A3F;
  --vl-color-wine-hover: #5B1636;
  --vl-color-wine-soft: var(--vl-wine-soft);
  --vl-color-wine-muted: rgba(77, 18, 45, 0.12);

  --vl-color-gold: var(--vl-gold);
  --vl-color-gold-dark: var(--vl-gold-deep);
  --vl-color-gold-light: #DFBF8B;
  --vl-color-gold-soft: var(--vl-gold-soft);
  --vl-color-gold-hairline: rgba(201, 163, 106, 0.35);
  --vl-color-gold-glow: rgba(201, 163, 106, 0.25);

  --vl-color-ivory: var(--vl-ivory);
  --vl-color-ivory-light: #FDFBF8;
  --vl-color-paper: var(--vl-paper);
  --vl-color-white: #FFFFFF;

  --vl-color-ink: var(--vl-ink);
  --vl-color-ink-muted: var(--vl-muted);
  --vl-color-ink-light: #8E7783;

  --vl-color-border: var(--vl-line);
  --vl-color-border-light: rgba(232, 222, 210, 0.6);
  --vl-color-border-dark: #D4C6B6;
  --vl-color-border-focus: var(--vl-gold);

  /* ------------------------------------------------------------------------
     LUXURY CLINICAL STATUS TOKENS (Bespoke Velora Aesthetic System)
     Botanical Sage, Antique Topaz / Amber, Mineral Slate, and Velvet Ruby Carmine
     ------------------------------------------------------------------------ */
  /* SUCCESS (Luxury Botanical Sage / Herbal Eucalyptus) */
  --vl-success: #245847;
  --vl-success-light: #37705D;
  --vl-success-bg: #EEF5F1;
  --vl-success-border: #C6DDD2;
  --vl-success-text: #245847;

  /* WARNING (Antique Topaz / Warm Honey Gold - matches --vl-gold) */
  --vl-warning: #87581B;
  --vl-warning-light: #A36E28;
  --vl-warning-bg: #FAF5EC;
  --vl-warning-border: #E8DAC2;
  --vl-warning-text: #87581B;

  /* INFO (Mineral Petrol / Muted Slate Navy) */
  --vl-info: #2A536B;
  --vl-info-light: #3B6B87;
  --vl-info-bg: #EFF4F7;
  --vl-info-border: #CADAE5;
  --vl-info-text: #2A536B;

  /* DANGER / ERROR (Velvet Wine Carmine - matches --vl-wine) */
  --vl-danger: #6E1634;
  --vl-danger-light: #8A2244;
  --vl-danger-bg: #FAF0F3;
  --vl-danger-border: #E8C8D0;
  --vl-danger-text: #6E1634;

  /* VIP / LUXURY (Velora Royal Champagne Gold) */
  --vl-vip: #C9A36A;
  --vl-vip-light: #DFBF8B;
  --vl-vip-bg: #FAF5EE;
  --vl-vip-border: rgba(201, 163, 106, 0.4);
  --vl-vip-text: #4D122D;

  /* Backward Compatibility Aliases */
  --vl-color-success: var(--vl-success);
  --vl-color-success-bg: var(--vl-success-bg);
  --vl-color-error: var(--vl-danger);
  --vl-color-error-bg: var(--vl-danger-bg);

  --vl-font-sans: var(--font-sans);
  --vl-font-serif: var(--font-sans);

  --vl-touch-min-size: 44px;

  --vl-radius-xs: var(--vl-r-xs);
  --vl-radius-sm: var(--vl-r-sm);
  --vl-radius-md: var(--vl-r-md);
  --vl-radius-lg: var(--vl-r-lg);
  --vl-radius-xl: var(--vl-r-xl);
  --vl-radius-2xl: var(--vl-r-2xl);
  --vl-radius-full: var(--vl-r-pill);

  --vl-shadow-sm: 0 2px 8px -2px rgba(42, 18, 28, 0.06);
  --vl-shadow-md: 0 6px 18px -3px rgba(42, 18, 28, 0.08);
  --vl-shadow-lg: 0 12px 28px -4px rgba(42, 18, 28, 0.12);
  --vl-shadow-xl: 0 20px 48px -6px rgba(42, 18, 28, 0.16);
  --vl-shadow-dropdown: 0 16px 36px -4px rgba(42, 18, 28, 0.14);
  --vl-shadow-glow-gold: 0 8px 24px -2px rgba(201, 163, 106, 0.3);

  /* ------------------------------------------------------------------------
     4. TRANSITIONS & TIMINGS
     ------------------------------------------------------------------------ */
  --vl-transition-fast: 0.15s ease;
  --vl-transition-normal: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --vl-transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------------
     5. LAYOUT & CHROME DIMENSIONS
     ------------------------------------------------------------------------ */
  --dock-h: 64px;
  --header-h: 72px;
  --header-top-h: 36px;
  --drawer-max-w: 420px;
  --container-max-w: 1280px;

  /* ------------------------------------------------------------------------
     6. FORM CONTROLS DYNAMIC VARIABLES (Plugin & Inputs)
     ------------------------------------------------------------------------ */
  --vl-form-input-bg: var(--vl-color-white);
  --vl-form-input-bg-focus: var(--vl-color-white);
  --vl-form-input-border: var(--vl-color-border);
  --vl-form-input-border-hover: var(--vl-color-gold-light);
  --vl-form-input-border-focus: var(--vl-color-gold);
  --vl-form-input-color: var(--vl-color-ink);
  --vl-form-input-placeholder: var(--vl-color-ink-light);
  --vl-form-input-radius: var(--vl-radius-md);
  --vl-form-input-height: 38px;
  --vl-form-input-padding-x: 12px;
  --vl-form-input-font-mobile: 14px;
  --vl-form-input-font-desktop: 13px;
  --vl-form-ring-color: rgba(201, 163, 106, 0.25);

  /* Custom Select Tokens */
  --vl-select-bg: var(--vl-color-white);
  --vl-select-border: var(--vl-color-border);
  --vl-select-dropdown-bg: var(--vl-color-paper);
  --vl-select-dropdown-border: var(--vl-color-border);
  --vl-select-item-color: var(--vl-color-ink);
  --vl-select-item-hover-bg: var(--vl-color-gold-soft);
  --vl-select-item-hover-color: var(--vl-color-wine);
  --vl-select-item-selected-bg: var(--vl-color-wine);
  --vl-select-item-selected-color: var(--vl-color-white);
  --vl-select-max-h: 280px;

  /* Time Slot Picker Tokens */
  --vl-time-slot-bg: var(--vl-color-white);
  --vl-time-slot-border: var(--vl-color-border);
  --vl-time-slot-color: var(--vl-color-ink);
  --vl-time-slot-hover-border: var(--vl-color-gold);
  --vl-time-slot-active-bg: var(--vl-color-wine);
  --vl-time-slot-active-color: var(--vl-color-white);
  --vl-time-slot-disabled-opacity: 0.35;

  /* Date Picker Tokens */
  --vl-date-picker-bg: var(--vl-color-paper);
  --vl-date-picker-border: var(--vl-color-border);
  --vl-date-day-active-bg: var(--vl-color-wine);
  --vl-date-day-active-color: var(--vl-color-white);
  --vl-date-day-today-border: var(--vl-color-gold);
  --vl-date-day-hover-bg: var(--vl-color-gold-soft);

  /* Checkbox & Radio Tokens */
  --vl-check-size: 20px;
  --vl-check-border: var(--vl-color-border-dark);
  --vl-check-border-checked: var(--vl-color-wine);
  --vl-check-bg-checked: var(--vl-color-wine);
  --vl-check-tick-color: var(--vl-color-gold-light);
  --vl-radio-dot-size: 8px;
  --vl-radio-dot-color: var(--vl-color-gold);

  /* Switch / Toggle Tokens */
  --vl-switch-w: 46px;
  --vl-switch-h: 26px;
  --vl-switch-dot-size: 20px;
  --vl-switch-bg: var(--vl-color-border-dark);
  --vl-switch-bg-active: var(--vl-color-wine);
  --vl-switch-dot-bg: var(--vl-color-white);
}

/* ==========================================================================
   BASE RESETS & RESPONSIVE FOUNDATION
   ========================================================================== */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--vl-font-sans);
  color: var(--vl-color-ink);
  background-color: var(--vl-color-ivory-light);
  overflow-x: hidden;
  /* Reserve space for mobile floating bottom dock */
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0px;
  }
}

.font-serif-luxury { font-family: var(--font-sans); }

/* Minimum 44x44 Touch Target Standard */
.touch-target {
  min-height: var(--vl-touch-min-size);
  min-width: var(--vl-touch-min-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent iOS 16px auto zoom on mobile inputs */
input,
select,
textarea {
  font-size: var(--vl-form-input-font-mobile) !important;
}

@media (min-width: 768px) {
  input,
  select,
  textarea {
    font-size: var(--vl-form-input-font-desktop) !important;
  }
}

/* ==========================================================================
   HEADER & NAVIGATION PATTERNS (Variable-Driven)
   ========================================================================== */
.vl-header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background-color var(--vl-transition-normal), 
              box-shadow var(--vl-transition-normal), 
              backdrop-filter var(--vl-transition-normal);
}

.vl-header.scrolled {
  background-color: rgba(253, 251, 248, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--vl-shadow-sm);
}

.vl-nav-item {
  position: relative;
}

/* PATTERN 1: 3-Level Classic Dropdown (vl-drop & vl-drop-fly) */
@media (min-width: 1024px) {
  .vl-drop-wrapper {
    position: relative;
  }

  .vl-drop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background-color: var(--vl-color-paper);
    border: 1px solid var(--vl-color-border);
    border-top: 2px solid var(--vl-color-gold);
    border-radius: 0 0 var(--vl-radius-md) var(--vl-radius-md);
    box-shadow: var(--vl-shadow-dropdown);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--vl-transition-fast), 
                transform var(--vl-transition-fast), 
                visibility var(--vl-transition-fast);
    z-index: 50;
  }

  .vl-drop.p-2 {
    padding: 0.5rem;
  }

  .vl-drop-wrapper:hover .vl-drop,
  .vl-drop-wrapper.active .vl-drop,
  .vl-nav-group:hover .vl-drop,
  .vl-nav-group.active .vl-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .vl-drop-link {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vl-color-ink);
    transition: background-color var(--vl-transition-fast), 
                color var(--vl-transition-fast);
  }

  .vl-drop-link:hover,
  .vl-drop-item:hover > .vl-drop-link,
  .vl-drop-link:focus {
    background-color: var(--vl-color-gold-soft);
    color: var(--vl-color-wine);
  }

  /* Level 2, 3 & 4 Multi-Level Flyout */
  .vl-drop-item {
    position: relative;
  }

  .vl-drop-fly {
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 240px;
    background-color: var(--vl-color-paper);
    border: 1px solid var(--vl-color-border);
    border-left: 2px solid var(--vl-color-gold);
    border-radius: 0 var(--vl-radius-md) var(--vl-radius-md) var(--vl-radius-md);
    box-shadow: var(--vl-shadow-dropdown);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity var(--vl-transition-fast), 
                transform var(--vl-transition-fast), 
                visibility var(--vl-transition-fast);
    z-index: 55;
  }

  .vl-drop-fly .vl-drop-fly {
    z-index: 60;
  }

  .vl-drop-fly .vl-drop-fly .vl-drop-fly {
    z-index: 65;
  }

  .vl-drop-item:hover > .vl-drop-fly,
  .vl-drop-item.active > .vl-drop-fly {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .vl-drop-fly.vl-fly-left {
    left: auto;
    right: 100%;
    border-left: 1px solid var(--vl-color-border);
    border-right: 2px solid var(--vl-color-gold);
    border-radius: var(--vl-radius-md) 0 var(--vl-radius-md) var(--vl-radius-md);
    transform: translateX(-8px);
  }

  .vl-drop-item:hover > .vl-drop-fly.vl-fly-left,
  .vl-drop-item.active > .vl-drop-fly.vl-fly-left {
    transform: translateX(0);
  }
}

/* PATTERN 2: Full Width Visual Mega Menu (vl-mega vl-mega-visual) */
@media (min-width: 1024px) {
  .vl-mega-wrapper {
    position: static;
  }

  .vl-mega-visual {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: var(--vl-color-paper);
    border-top: 1px solid var(--vl-color-gold);
    border-bottom: 2px solid var(--vl-color-border);
    box-shadow: var(--vl-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--vl-transition-normal), 
                transform var(--vl-transition-normal), 
                visibility var(--vl-transition-normal);
    z-index: 48;
  }

  .vl-mega-wrapper:hover .vl-mega-visual,
  .vl-mega-wrapper.active .vl-mega-visual,
  .vl-nav-group:hover .vl-mega-visual,
  .vl-nav-group.active .vl-mega-visual {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .vl-mega-cat-btn {
    text-align: left;
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vl-color-ink);
    border-left: 3px solid transparent;
    transition: all var(--vl-transition-fast);
  }

  .vl-mega-cat-btn:hover,
  .vl-mega-cat-btn.active {
    background-color: var(--vl-color-gold-soft);
    color: var(--vl-color-wine);
    border-left-color: var(--vl-color-gold);
  }

  .vl-service-card {
    transition: transform var(--vl-transition-normal), 
                box-shadow var(--vl-transition-normal), 
                border-color var(--vl-transition-normal);
    border: 1px solid transparent;
  }

  .vl-service-card:hover {
    transform: translateY(-3px);
    border-color: var(--vl-color-gold);
    box-shadow: var(--vl-shadow-glow-gold);
  }
}

/* PATTERN 3: Compact Visual Shop Panel (vl-mega-shop) */
@media (min-width: 1024px) {
  .vl-shop-wrapper {
    position: relative;
  }

  .vl-mega-shop {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 760px;
    background-color: var(--vl-color-paper);
    border: 1px solid var(--vl-color-border);
    border-top: 2px solid var(--vl-color-gold);
    border-radius: 0 0 var(--vl-radius-lg) var(--vl-radius-lg);
    box-shadow: var(--vl-shadow-xl);
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--vl-transition-normal), 
                transform var(--vl-transition-normal), 
                visibility var(--vl-transition-normal);
    z-index: 49;
  }

  .vl-shop-wrapper:hover .vl-mega-shop,
  .vl-shop-wrapper.active .vl-mega-shop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .vl-product-mini-card {
    transition: transform var(--vl-transition-normal), 
                border-color var(--vl-transition-normal), 
                box-shadow var(--vl-transition-normal);
    border: 1px solid var(--vl-color-border);
  }

  .vl-product-mini-card:hover {
    transform: translateY(-2px);
    border-color: var(--vl-color-gold);
    box-shadow: var(--vl-shadow-sm);
  }
}

/* Hide desktop menus completely on screen widths < 1024px */
@media (max-width: 1023px) {
  .vl-desktop-nav,
  .vl-drop,
  .vl-drop-fly,
  .vl-mega-visual,
  .vl-mega-shop {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .vl-desktop-nav {
    display: flex !important;
  }
}

/* ==========================================================================
   MOBILE DRAWER & ACCORDIONS (<1024px)
   ========================================================================== */
#mobile-drawer-overlay {
  transition: opacity var(--vl-transition-smooth), visibility var(--vl-transition-smooth);
}

#mobile-drawer-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
}

#mobile-drawer {
  transition: transform var(--vl-transition-smooth);
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}

#mobile-drawer.open {
  transform: translateX(0) !important;
}

.vl-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.vl-accordion-item.active > .vl-accordion-content {
  max-height: 3000px;
  transition: max-height 0.35s ease-in-out;
}

.vl-accordion-item.active > .vl-accordion-btn {
  border-left: 3px solid var(--vl-color-gold);
  background-color: var(--vl-color-gold-soft);
  color: var(--vl-color-wine);
}

.vl-accordion-item.active > .vl-accordion-btn .vl-chevron,
.vl-accordion-item.active > .vl-accordion-btn svg.vl-chevron {
  transform: rotate(180deg);
}

.vl-sub-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.vl-sub-accordion-item.active > .vl-sub-accordion-content {
  max-height: 2000px;
}

.vl-sub-accordion-item.active > .vl-sub-accordion-btn {
  color: var(--vl-color-wine);
  font-weight: 600;
}

.vl-sub-accordion-item.active > .vl-sub-accordion-btn .vl-sub-chevron,
.vl-sub-accordion-item.active > .vl-sub-accordion-btn svg.vl-sub-chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   HERO SLIDER BANNER VIEWPORT FITTING
   Desktop/Tablet (>= 1024px): 100dvh - header (108px)
   Mobile (< 1024px): 100dvh - header (108px) - dock (64px) - safe-area
   ========================================================================== */
#hero-slider-banner {
  height: calc(100vh - 108px);
  height: calc(100svh - 108px);
  height: calc(100dvh - 108px);
  min-height: calc(100vh - 108px);
  min-height: calc(100svh - 108px);
  min-height: calc(100dvh - 108px);
  max-height: calc(100vh - 108px);
  max-height: calc(100svh - 108px);
  max-height: calc(100dvh - 108px);
}

@media (max-width: 1023px) {
  #hero-slider-banner {
    height: calc(100vh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100svh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100vh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100svh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100dvh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100svh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 108px - var(--dock-h, 64px) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================================================
   BOTTOM FLOATING DOCK (<= 1023px)
   ========================================================================== */
.vl-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: rgba(247, 241, 234, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--vl-color-gold-light);
  box-shadow: var(--vl-shadow-sm);
  z-index: 60;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

body.drawer-open .vl-dock {
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.vl-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--vl-color-wine);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--vl-transition-fast), background-color var(--vl-transition-fast);
  min-height: 48px;
}

.vl-dock-item:active {
  background-color: var(--vl-color-gold-soft);
  color: var(--vl-color-gold-dark);
}

/* ==========================================================================
   COOKIE BAR & DESKTOP WHATSAPP FAB
   ========================================================================== */
#cookie-bar {
  transition: transform var(--vl-transition-smooth), opacity var(--vl-transition-smooth);
  z-index: 59;
}

@media (max-width: 1023px) {
  #cookie-bar {
    bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 12px);
    left: 12px;
    right: 12px;
  }
}

@media (min-width: 1024px) {
  #cookie-bar {
    bottom: 24px;
    left: 24px;
    max-width: 440px;
  }
}

.vl-fab-wa {
  position: fixed !important;
  bottom: 28px;
  right: 28px;
  z-index: 55;
  box-shadow: 0 8px 24px -2px rgba(77, 18, 45, 0.35);
  transition: transform var(--vl-transition-normal), box-shadow var(--vl-transition-normal);
}

.vl-fab-wa:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 30px 0 rgba(77, 18, 45, 0.45);
}

/* ==========================================================================
   BEFORE / AFTER COMPARISON SLIDER
   ========================================================================== */
.vl-comparison-container {
  position: relative;
  overflow: hidden;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
  cursor: ew-resize;
}

.vl-comparison-container * {
  -webkit-user-drag: none !important;
}

.vl-comparison-container img,
.vl-comparison-before img,
.vl-comparison-after img {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.vl-comparison-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  transition: none !important;
}

.vl-comparison-before img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none !important;
}

.vl-comparison-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background-color: var(--vl-color-gold, #C9A36A);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
  transform: translateX(-50%);
  z-index: 10;
  touch-action: none !important;
  transition: none !important;
}

/* Extended hit area for easy grabbing */
.vl-comparison-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 100%;
  cursor: ew-resize;
  pointer-events: auto;
}

.vl-comparison-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  background-color: var(--vl-color-wine, #4D122D);
  color: var(--vl-color-white, #FFFFFF);
  border: 2px solid var(--vl-color-gold, #C9A36A);
  border-radius: var(--vl-radius-full, 9999px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vl-comparison-container:hover .vl-comparison-button,
.vl-comparison-container.is-dragging .vl-comparison-button {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   VELORA FORM CONTROLS PLUGIN - STYLING & VARIABLE BINDINGS
   ========================================================================== */

/* 1. Base Input Luxury Styling */
.vl-input {
  width: 100%;
  height: var(--vl-form-input-height, 38px);
  min-height: 38px;
  padding: 0 var(--vl-form-input-padding-x, 12px);
  background-color: var(--vl-form-input-bg);
  border: 1px solid var(--vl-form-input-border);
  border-radius: var(--vl-form-input-radius);
  color: var(--vl-form-input-color);
  font-size: 13px;
  line-height: 36px;
  transition: border-color var(--vl-transition-fast), 
              box-shadow var(--vl-transition-fast),
              background-color var(--vl-transition-fast);
}

select.vl-select {
  height: var(--vl-form-input-height, 38px) !important;
  min-height: 38px !important;
  padding: 0 var(--vl-form-input-padding-x, 12px) !important;
  font-size: 13px !important;
  line-height: 36px !important;
}

/* Number input styling */
input[type="number"].vl-input,
input[type="number"] {
  height: var(--vl-form-input-height, 38px);
  min-height: 38px;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   LUXURY VELORA INPUT GROUP (.vl-input-group)
   ========================================================================== */
.vl-input-group {
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
  width: 100%;
}

.vl-input-group > * {
  border-radius: 0 !important;
}

.vl-input-group > *:first-child,
.vl-input-group > .vl-select-wrapper:first-child .vl-select-trigger,
.vl-input-group > select:first-child {
  border-top-left-radius: var(--vl-radius-md, 10px) !important;
  border-bottom-left-radius: var(--vl-radius-md, 10px) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.vl-input-group > *:last-child,
.vl-input-group > .vl-select-wrapper:last-child .vl-select-trigger,
.vl-input-group > select:last-child {
  border-top-right-radius: var(--vl-radius-md, 10px) !important;
  border-bottom-right-radius: var(--vl-radius-md, 10px) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.vl-input-group > *:only-child {
  border-radius: var(--vl-radius-md, 10px) !important;
}

.vl-input-group > * + * {
  margin-left: -1px;
}

.vl-input-group > .vl-input-addon,
.vl-input-group > .vl-input-group-addon,
.vl-input-group > span:not(.vl-select-wrapper):not(.select2) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background-color: var(--vl-surface, #FAF6F0);
  border: 1px solid var(--vl-line, #E8DED2);
  color: var(--vl-muted, #8C7B83);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  min-height: var(--vl-form-input-height, 38px);
  box-sizing: border-box;
}

.vl-input-group > .vl-select-wrapper {
  position: relative;
  flex: 0 0 auto !important;
  display: flex;
}

.vl-input-group > .vl-select-wrapper .vl-select-trigger {
  height: 100% !important;
  min-height: var(--vl-form-input-height, 38px) !important;
}

.vl-input-group > select:first-child {
  height: 100% !important;
  min-height: var(--vl-form-input-height, 38px) !important;
}

.vl-input-group > input,
.vl-input-group > .vl-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: var(--vl-form-input-height, 38px) !important;
  min-height: 38px !important;
}

.vl-input-group > *:focus,
.vl-input-group > *:focus-within,
.vl-input-group > .vl-select-wrapper.open,
.vl-input-group > input:focus,
.vl-input-group > button:focus {
  z-index: 5 !important;
}

html[data-mode="dark"] .vl-input-group > .vl-input-addon,
html[data-mode="dark"] .vl-input-group > .vl-input-group-addon,
html[data-mode="dark"] .vl-input-group > span:not(.vl-select-wrapper):not(.select2),
[data-mode="dark"] .vl-input-group > .vl-input-addon,
[data-mode="dark"] .vl-input-group > .vl-input-group-addon,
[data-mode="dark"] .vl-input-group > span:not(.vl-select-wrapper):not(.select2) {
  background-color: var(--vl-surface, #241620);
  border-color: var(--vl-line, #382531);
  color: var(--vl-muted, #A898A0);
}

/* ==========================================================================
   LUXURY VELORA STEPPER (Quantity / Session Stepper)
   ========================================================================== */
.vl-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--vl-line, #E8DED2);
  border-radius: var(--vl-radius-md, 10px);
  background-color: var(--vl-paper, #FFFFFF);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(42, 18, 28, 0.03);
  height: 38px;
  transition: border-color var(--vl-transition-fast, 0.15s ease), box-shadow var(--vl-transition-fast, 0.15s ease);
}

.vl-stepper:hover {
  border-color: var(--vl-gold, #C9A36A);
}

.vl-stepper:focus-within {
  border-color: var(--vl-gold, #C9A36A);
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.2);
}

.vl-stepper-sm {
  height: 32px !important;
  border-radius: 8px !important;
}

.vl-stepper-btn {
  width: 32px;
  min-width: 32px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vl-surface, #FAF6F0);
  color: var(--vl-wine, #4D122D);
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  user-select: none;
  padding: 0;
  transition: all var(--vl-transition-fast, 0.15s ease);
}

.vl-stepper-sm .vl-stepper-btn {
  width: 28px;
  min-width: 28px;
  font-size: 13px;
}

.vl-stepper-btn:hover {
  background-color: var(--vl-wine, #4D122D);
  color: var(--vl-gold-light, #FAF6F0);
}

.vl-stepper-btn:active {
  transform: scale(0.92);
}

.vl-stepper-val {
  width: 44px;
  min-width: 40px;
  height: 100% !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--vl-ink, #2A121C) !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--vl-line, #E8DED2) !important;
  border-right: 1px solid var(--vl-line, #E8DED2) !important;
  padding: 0 4px !important;
  margin: 0 !important;
  outline: none !important;
  -moz-appearance: textfield !important;
}

.vl-stepper-sm .vl-stepper-val {
  width: 38px;
  min-width: 34px;
  font-size: 12px !important;
}

.vl-stepper-val::-webkit-outer-spin-button,
.vl-stepper-val::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}


/* Date & Datetime-local luxury styling */
input[type="date"].vl-input,
input[type="datetime-local"].vl-input,
input[type="date"],
input[type="datetime-local"] {
  height: var(--vl-form-input-height, 38px);
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Checkbox & Radio vertical centering */
.vl-switch-wrapper,
.form-check,
label.form-check-label,
.form-check-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.form-check-input {
  margin-top: 0 !important;
}

.vl-input:hover {
  border-color: var(--vl-form-input-border-hover);
}

.vl-input:focus {
  outline: none;
  background-color: var(--vl-form-input-bg-focus);
  border-color: var(--vl-form-input-border-focus);
  box-shadow: 0 0 0 3px var(--vl-form-ring-color);
}

.vl-textarea {
  width: 100%;
  padding: 8px var(--vl-form-input-padding-x, 12px);
  background-color: var(--vl-form-input-bg);
  border: 1px solid var(--vl-form-input-border);
  border-radius: var(--vl-form-input-radius);
  color: var(--vl-form-input-color);
  font-size: 13px;
  transition: border-color var(--vl-transition-fast), box-shadow var(--vl-transition-fast);
}

.vl-textarea:hover {
  border-color: var(--vl-form-input-border-hover);
}

.vl-textarea:focus {
  outline: none;
  border-color: var(--vl-form-input-border-focus);
  box-shadow: 0 0 0 3px var(--vl-form-ring-color);
}

/* 2. Custom Select Component (VeloraSelect) */
.vl-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.vl-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

.vl-select-trigger {
  width: 100%;
  height: var(--vl-form-input-height, 38px);
  min-height: 38px;
  padding: 0 var(--vl-form-input-padding-x, 12px);
  background-color: var(--vl-select-bg);
  border: 1px solid var(--vl-select-border);
  border-radius: var(--vl-form-input-radius);
  color: var(--vl-form-input-color);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--vl-transition-fast), 
              box-shadow var(--vl-transition-fast);
}

.vl-select-trigger:hover {
  border-color: var(--vl-color-gold-light);
}

.vl-select-wrapper.open .vl-select-trigger,
.vl-select-trigger:focus {
  outline: none;
  border-color: var(--vl-color-gold);
  box-shadow: 0 0 0 3px var(--vl-form-ring-color);
}

.vl-select-trigger .vl-select-arrow {
  color: var(--vl-color-gold);
  transition: transform var(--vl-transition-normal);
  flex-shrink: 0;
}

.vl-select-wrapper.open .vl-select-trigger .vl-select-arrow {
  transform: rotate(180deg);
}

.vl-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--vl-select-dropdown-bg);
  border: 1px solid var(--vl-select-dropdown-border);
  border-radius: var(--vl-radius-lg);
  box-shadow: var(--vl-shadow-dropdown);
  max-height: var(--vl-select-max-h);
  overflow-y: auto;
  z-index: 70;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--vl-transition-normal), 
              transform var(--vl-transition-normal), 
              visibility var(--vl-transition-normal);
}

.vl-select-wrapper.open .vl-select-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vl-select-search-box {
  position: sticky;
  top: 0;
  padding: 4px 4px 8px 4px;
  background-color: var(--vl-select-dropdown-bg);
  z-index: 2;
  border-bottom: 1px solid var(--vl-color-border-light);
  margin-bottom: 4px;
}

.vl-select-search-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px !important;
  background-color: var(--vl-color-white);
  border: 1px solid var(--vl-color-border);
  border-radius: var(--vl-radius-sm);
  color: var(--vl-color-ink);
}

.vl-select-search-input:focus {
  outline: none;
  border-color: var(--vl-color-gold);
}

.vl-select-option {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vl-select-item-color);
  border-radius: var(--vl-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--vl-transition-fast), 
              color var(--vl-transition-fast);
}

.vl-select-option:hover,
.vl-select-option.highlighted {
  background-color: var(--vl-select-item-hover-bg);
  color: var(--vl-select-item-hover-color);
}

.vl-select-option.selected {
  background-color: var(--vl-select-item-selected-bg);
  color: var(--vl-select-item-selected-color);
  font-weight: 600;
}

.vl-select-option.selected .vl-select-check {
  display: inline-block;
  color: var(--vl-color-gold-light);
}

.vl-select-option .vl-select-check {
  display: none;
}

.vl-select-option-content {
  display: block;
  width: 100%;
  line-height: 1.35;
}

.vl-select-option.selected .vl-select-option-content * {
  color: #FFFFFF !important;
}

.vl-select-option.selected .vl-select-option-content .border {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 3. Slot-Based 15-Minute Time Picker (VeloraTimePicker) */
.vl-timepicker-wrapper {
  position: relative;
  width: 100%;
}

.vl-timepicker-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--vl-color-paper);
  border: 1px solid var(--vl-color-border);
  border-top: 2px solid var(--vl-color-gold);
  border-radius: var(--vl-radius-lg);
  box-shadow: var(--vl-shadow-xl);
  padding: 14px;
  z-index: 75;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--vl-transition-normal), 
              transform var(--vl-transition-normal), 
              visibility var(--vl-transition-normal);
}

.vl-timepicker-wrapper.open .vl-timepicker-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vl-time-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--vl-color-border);
  padding-bottom: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.vl-time-tab-btn {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vl-color-ink-muted);
  border-radius: var(--vl-radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--vl-transition-fast);
}

.vl-time-tab-btn:hover,
.vl-time-tab-btn.active {
  color: var(--vl-color-wine);
  background-color: var(--vl-color-gold-soft);
}

.vl-time-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 480px) {
  .vl-time-slots-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vl-time-slot {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vl-time-slot-bg);
  border: 1px solid var(--vl-time-slot-border);
  border-radius: var(--vl-radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--vl-time-slot-color);
  cursor: pointer;
  transition: all var(--vl-transition-fast);
}

.vl-time-slot:hover {
  border-color: var(--vl-time-slot-hover-border);
  background-color: var(--vl-color-gold-soft);
  color: var(--vl-color-wine);
}

.vl-time-slot.selected {
  background-color: var(--vl-time-slot-active-bg);
  color: var(--vl-time-slot-active-color);
  border-color: var(--vl-color-wine);
  box-shadow: 0 2px 8px rgba(77, 18, 45, 0.25);
}

.vl-time-slot.disabled {
  opacity: var(--vl-time-slot-disabled-opacity);
  pointer-events: none;
  background-color: #EFEFEF;
  text-decoration: line-through;
}

/* 4. Luxury Date Picker (VeloraDatePicker) */
.vl-datepicker-wrapper {
  position: relative;
  width: 100%;
}

.vl-input-group > .vl-datepicker-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.vl-input-group > .vl-datepicker-wrapper > input.vl-input {
  width: 100% !important;
  height: 100% !important;
}

.vl-input-group > *:not(:last-child) + .vl-datepicker-wrapper > input.vl-input,
.vl-input-group > .vl-datepicker-wrapper:not(:first-child) > input.vl-input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.vl-input-group > .vl-datepicker-wrapper:not(:last-child) > input.vl-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}

.vl-input-group > .vl-datepicker-wrapper.open,
.vl-input-group > .vl-datepicker-wrapper:focus-within {
  z-index: 50 !important;
}

.vl-datepicker-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 320px;
  background-color: var(--vl-date-picker-bg);
  border: 1px solid var(--vl-date-picker-border);
  border-top: 2px solid var(--vl-color-gold);
  border-radius: var(--vl-radius-lg);
  box-shadow: var(--vl-shadow-xl);
  padding: 16px;
  z-index: 75;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--vl-transition-normal), 
              transform var(--vl-transition-normal), 
              visibility var(--vl-transition-normal);
}

@media (max-width: 480px) {
  .vl-datepicker-popover {
    width: 100%;
    left: 0;
  }
}

.vl-datepicker-wrapper.open .vl-datepicker-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vl-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vl-cal-title {
  font-family: var(--vl-font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--vl-color-wine);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vl-cal-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--vl-color-white);
  border: 1px solid var(--vl-color-border);
  border-radius: var(--vl-radius-sm);
  padding: 3px 18px 3px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--vl-color-wine);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A36A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px;
  transition: all var(--vl-transition-fast);
}

.vl-cal-select:hover {
  border-color: var(--vl-color-gold);
}

.vl-cal-select:focus {
  outline: none;
  border-color: var(--vl-color-wine);
  box-shadow: 0 0 0 2px rgba(77, 18, 45, 0.1);
}

html[data-mode="dark"] .vl-cal-select,
[data-mode="dark"] .vl-cal-select {
  background-color: var(--vl-surface);
  border-color: var(--vl-line);
  color: var(--vl-gold);
}

.vl-cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--vl-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vl-color-wine);
  background-color: var(--vl-color-white);
  border: 1px solid var(--vl-color-border);
  cursor: pointer;
  transition: all var(--vl-transition-fast);
}

.vl-cal-nav-btn:hover {
  background-color: var(--vl-color-gold);
  color: var(--vl-color-white);
}

.vl-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--vl-color-ink-muted);
  margin-bottom: 8px;
}

.vl-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.vl-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--vl-color-ink);
  border-radius: var(--vl-radius-sm);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--vl-transition-fast);
}

.vl-cal-day:hover:not(.disabled) {
  background-color: var(--vl-date-day-hover-bg);
  color: var(--vl-color-wine);
}

.vl-cal-day.today {
  border-color: var(--vl-date-day-today-border);
  font-weight: 700;
}

.vl-cal-day.selected {
  background-color: var(--vl-date-day-active-bg);
  color: var(--vl-date-day-active-color) !important;
  font-weight: 700;
}

.vl-cal-day.disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.vl-cal-day.other-month {
  opacity: 0.3;
}

.vl-cal-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--vl-color-border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.vl-cal-quick-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--vl-color-wine);
  padding: 4px 8px;
  background-color: var(--vl-color-white);
  border: 1px solid var(--vl-color-border);
  border-radius: var(--vl-radius-xs);
  cursor: pointer;
  transition: all var(--vl-transition-fast);
}

.vl-cal-quick-btn:hover {
  background-color: var(--vl-color-gold-soft);
  border-color: var(--vl-color-gold);
}

/* 5. Custom Checkbox (VeloraCheckbox) */
.vl-checkbox-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  min-height: var(--vl-touch-min-size);
  padding: 6px 0;
}

.vl-checkbox-native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.vl-checkbox-box {
  width: var(--vl-check-size, 20px);
  height: var(--vl-check-size, 20px);
  min-width: var(--vl-check-size, 20px);
  min-height: var(--vl-check-size, 20px);
  border: 1.5px solid var(--vl-check-border, #D4C6B6) !important;
  border-radius: var(--vl-radius-xs, 5px) !important;
  background-color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all var(--vl-transition-fast, 0.15s ease);
}

.vl-checkbox-wrapper:hover .vl-checkbox-box {
  border-color: var(--vl-color-gold, #C9A36A) !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.18) !important;
}

.vl-checkbox-native:focus ~ .vl-checkbox-box {
  box-shadow: 0 0 0 3px rgba(77, 18, 45, 0.2) !important;
  border-color: var(--vl-color-gold, #C9A36A) !important;
}

.vl-checkbox-native:checked ~ .vl-checkbox-box {
  background-color: #4D122D !important;
  border-color: #4D122D !important;
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.25) !important;
}

.vl-checkbox-box i,
.vl-checkbox-box svg,
.vl-checkbox-icon {
  width: 12px;
  height: 12px;
  color: var(--vl-check-tick-color, #DFBF8B) !important;
  opacity: 0 !important;
  transform: scale(0.5);
  transition: transform var(--vl-transition-fast, 0.15s ease), opacity var(--vl-transition-fast, 0.15s ease);
}

.vl-checkbox-native:checked ~ .vl-checkbox-box i,
.vl-checkbox-native:checked ~ .vl-checkbox-box svg,
.vl-checkbox-native:checked ~ .vl-checkbox-box .vl-checkbox-icon {
  opacity: 1 !important;
  transform: scale(1);
}

/* 6. Custom Radio Button (VeloraRadio) */
.vl-radio-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  min-height: var(--vl-touch-min-size);
  padding: 4px 0;
}

.vl-radio-native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.vl-radio-circle {
  width: var(--vl-check-size);
  height: var(--vl-check-size);
  border: 1.5px solid var(--vl-check-border);
  border-radius: var(--vl-radius-full);
  background-color: var(--vl-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--vl-transition-fast);
}

.vl-radio-wrapper:hover .vl-radio-circle {
  border-color: var(--vl-color-gold);
}

.vl-radio-native:focus ~ .vl-radio-circle {
  box-shadow: 0 0 0 3px var(--vl-form-ring-color);
  border-color: var(--vl-color-gold);
}

.vl-radio-native:checked ~ .vl-radio-circle {
  border-color: var(--vl-color-wine);
}

.vl-radio-dot {
  width: var(--vl-radio-dot-size);
  height: var(--vl-radio-dot-size);
  border-radius: var(--vl-radius-full);
  background-color: var(--vl-radio-dot-color);
  opacity: 0;
  transform: scale(0);
  transition: transform var(--vl-transition-fast), opacity var(--vl-transition-fast);
}

.vl-radio-native:checked ~ .vl-radio-circle .vl-radio-dot {
  opacity: 1;
  transform: scale(1);
}

/* 7. Custom Switch / Toggle (VeloraSwitch) */
.vl-switch-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: var(--vl-touch-min-size);
}

.vl-switch-native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.vl-switch-track {
  width: var(--vl-switch-w);
  height: var(--vl-switch-h);
  background-color: var(--vl-switch-bg);
  border-radius: var(--vl-radius-full);
  position: relative;
  transition: background-color var(--vl-transition-fast);
}

.vl-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: var(--vl-switch-dot-size);
  height: var(--vl-switch-dot-size);
  background-color: var(--vl-switch-dot-bg);
  border-radius: var(--vl-radius-full);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform var(--vl-transition-fast);
}

.vl-switch-native:checked ~ .vl-switch-track {
  background-color: var(--vl-switch-bg-active);
}

.vl-switch-native:checked ~ .vl-switch-track .vl-switch-thumb {
  transform: translateX(20px);
}

/* Switch Size Variants */
/* Small Switch (.vl-switch-sm) */
.vl-switch-sm .vl-switch-track,
.vl-switch-track.vl-switch-sm,
.vl-switch-track.is-sm {
  width: 32px !important;
  height: 18px !important;
}
.vl-switch-sm .vl-switch-thumb,
.vl-switch-thumb.vl-switch-sm,
.vl-switch-thumb.is-sm {
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
}
.vl-switch-sm .vl-switch-native:checked ~ .vl-switch-track .vl-switch-thumb,
.vl-switch-native:checked ~ .vl-switch-track.vl-switch-sm .vl-switch-thumb,
.vl-switch-native:checked ~ .vl-switch-track.is-sm .vl-switch-thumb,
.vl-switch-sm .vl-switch-native:checked ~ .vl-switch-track.is-sm .vl-switch-thumb {
  transform: translateX(14px) !important;
}

/* Large Switch (.vl-switch-lg) */
.vl-switch-lg .vl-switch-track,
.vl-switch-track.vl-switch-lg,
.vl-switch-track.is-lg {
  width: 52px !important;
  height: 28px !important;
}
.vl-switch-lg .vl-switch-thumb,
.vl-switch-thumb.vl-switch-lg,
.vl-switch-thumb.is-lg {
  top: 3px !important;
  left: 3px !important;
  width: 22px !important;
  height: 22px !important;
}
.vl-switch-lg .vl-switch-native:checked ~ .vl-switch-track .vl-switch-thumb,
.vl-switch-native:checked ~ .vl-switch-track.vl-switch-lg .vl-switch-thumb,
.vl-switch-native:checked ~ .vl-switch-track.is-lg .vl-switch-thumb {
  transform: translateX(24px) !important;
}

/* Switch Luxury Color Variants */
.vl-switch-gold .vl-switch-native:checked ~ .vl-switch-track,
.vl-switch-native:checked ~ .vl-switch-track.is-gold {
  background-color: var(--vl-gold) !important;
}
.vl-switch-gold .vl-switch-thumb,
.vl-switch-native:checked ~ .vl-switch-track.is-gold .vl-switch-thumb {
  background-color: #FFFFFF !important;
}

.vl-switch-success .vl-switch-native:checked ~ .vl-switch-track,
.vl-switch-native:checked ~ .vl-switch-track.is-success {
  background-color: var(--vl-success) !important;
}

.vl-switch-danger .vl-switch-native:checked ~ .vl-switch-track,
.vl-switch-track.is-danger {
  background-color: var(--vl-danger) !important;
}

.vl-switch-info .vl-switch-native:checked ~ .vl-switch-track,
.vl-switch-track.is-info {
  background-color: var(--vl-info) !important;
}

/* ==========================================================================
   8. CARD RADIO & CARD CHECK COMPONENTS (.vl-card-selectable)
   ========================================================================== */
.vl-card-selectable {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border-radius: var(--vl-r-card, 16px);
  border: 1.5px solid var(--vl-line, #E8DED2);
  background-color: var(--vl-surface, #FFFFFF);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.vl-card-selectable:hover {
  border-color: var(--vl-gold, #C9A36A);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(42, 18, 28, 0.08);
}

.vl-card-selectable:has(input:checked) {
  border-color: var(--vl-wine, #4D122D);
  background-color: var(--vl-wine-soft, rgba(77, 18, 45, 0.04));
  box-shadow: 0 8px 24px -4px rgba(77, 18, 45, 0.12);
}

.vl-card-selectable.is-vip:has(input:checked),
.vl-card-selectable.is-gold:has(input:checked) {
  border-color: var(--vl-gold, #C9A36A);
  background-color: var(--vl-gold-soft, rgba(201, 163, 106, 0.08));
  box-shadow: 0 8px 24px -4px rgba(201, 163, 106, 0.18);
}

/* ==========================================================================
   9. IMAGE CHECK & IMAGE RADIO COMPONENTS (.vl-image-selectable)
   ========================================================================== */
.vl-image-selectable {
  position: relative;
  display: block;
  border-radius: var(--vl-r-card, 16px);
  border: 2px solid var(--vl-line, #E8DED2);
  background-color: var(--vl-surface, #FFFFFF);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.vl-image-selectable:hover {
  border-color: var(--vl-gold, #C9A36A);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -6px rgba(42, 18, 28, 0.12);
}

.vl-image-selectable .vl-image-preview {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  background-color: #FAF6F0;
}

.vl-image-selectable .vl-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.vl-image-selectable:hover .vl-image-preview img {
  transform: scale(1.05);
}

.vl-image-selectable .vl-image-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #2A121C;
}

.vl-image-selectable .vl-image-indicator-icon {
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vl-image-selectable:has(input:checked) {
  border-color: var(--vl-wine, #4D122D);
  box-shadow: 0 10px 28px -4px rgba(77, 18, 45, 0.2);
}

.vl-image-selectable:has(input:checked) .vl-image-indicator {
  background-color: var(--vl-wine, #4D122D);
  border-color: var(--vl-wine, #4D122D);
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(77, 18, 45, 0.4);
}

.vl-image-selectable:has(input:checked) .vl-image-indicator-icon {
  opacity: 1;
  transform: scale(1);
}

/* VIP / Gold variant for Image Selectable */
.vl-image-selectable.is-vip:has(input:checked),
.vl-image-selectable.is-gold:has(input:checked) {
  border-color: var(--vl-gold, #C9A36A);
  box-shadow: 0 10px 28px -4px rgba(201, 163, 106, 0.28);
}
.vl-image-selectable.is-vip:has(input:checked) .vl-image-indicator,
.vl-image-selectable.is-gold:has(input:checked) .vl-image-indicator {
  background-color: var(--vl-gold, #C9A36A);
  border-color: var(--vl-gold, #C9A36A);
  color: #2A121C;
}

/* Dark mode support */
html[data-mode="dark"] .vl-card-selectable {
  background-color: #241018;
  border-color: rgba(201, 163, 106, 0.2);
}
html[data-mode="dark"] .vl-card-selectable:hover {
  border-color: rgba(201, 163, 106, 0.5);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4);
}
html[data-mode="dark"] .vl-card-selectable:has(input:checked) {
  border-color: var(--vl-gold, #C9A36A);
  background-color: rgba(77, 18, 45, 0.35);
  box-shadow: 0 0 20px rgba(201, 163, 106, 0.2);
}

html[data-mode="dark"] .vl-image-selectable {
  background-color: #241018;
  border-color: rgba(201, 163, 106, 0.2);
}
html[data-mode="dark"] .vl-image-selectable .vl-image-preview {
  background-color: #1A0B12;
}
html[data-mode="dark"] .vl-image-selectable .vl-image-indicator {
  background-color: rgba(36, 16, 24, 0.9);
  border-color: rgba(201, 163, 106, 0.4);
  color: #FAF6F0;
}
html[data-mode="dark"] .vl-image-selectable:has(input:checked) {
  border-color: var(--vl-gold, #C9A36A);
  box-shadow: 0 0 24px rgba(201, 163, 106, 0.25);
}
html[data-mode="dark"] .vl-image-selectable:has(input:checked) .vl-image-indicator {
  background-color: var(--vl-gold, #C9A36A);
  border-color: var(--vl-gold, #C9A36A);
  color: #1A0B12;
}

/* Base Range Slider Luxury Styling */
input[type="range"].vl-range,
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #E8DED2;
  border-radius: 999px;
  outline: none;
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4D122D;
  border: 2px solid #C9A36A;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(201, 163, 106, 0.25);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4D122D;
  border: 2px solid #C9A36A;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ==========================================================================
   TABLE & SCROLLBAR HELPERS
   ========================================================================== */
.vl-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--vl-color-ivory);
}
::-webkit-scrollbar-thumb {
  background: var(--vl-color-gold-dark);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vl-color-wine);
}

.border-gold-hairline {
  border-color: var(--vl-color-gold-hairline);
}

/* ==========================================================================
   INNER-PAGE HELPER EXTENSIONS (Phase 2)
   ========================================================================== */

/* Active Page Indicator in Desktop Header */
.vl-nav-item[aria-current="page"],
.vl-desktop-nav > a[aria-current="page"] {
  color: var(--vl-color-wine) !important;
  position: relative;
}

.vl-nav-item[aria-current="page"]::after,
.vl-desktop-nav > a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background-color: var(--vl-color-gold);
  border-radius: var(--vl-radius-full);
}

/* Inner Page Hero (.vl-page-hero) */
.vl-page-hero {
  position: relative;
  min-height: 220px;
  background-color: var(--vl-color-paper);
  border-bottom: 1px solid var(--vl-color-border);
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .vl-page-hero {
    min-height: 280px;
  }
}

@media (min-width: 1024px) {
  .vl-page-hero {
    min-height: 320px;
  }
}

/* Compact Hero for Booking & Contact */
.vl-page-hero-compact {
  position: relative;
  min-height: 180px !important;
  background-color: var(--vl-color-paper);
  border-bottom: 1px solid var(--vl-color-border);
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .vl-page-hero-compact {
    min-height: 220px !important;
  }
}

.vl-page-hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Breadcrumb Navigation (.vl-breadcrumb-bar & .vl-breadcrumb) */
.vl-breadcrumb-bar {
  background-color: var(--vl-color-paper);
  border-bottom: 1px solid var(--vl-color-border);
  position: relative;
  z-index: 20;
}

.vl-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vl-color-ink-muted);
}

.vl-breadcrumb a {
  color: var(--vl-color-ink-muted);
  transition: color var(--vl-transition-fast);
}

.vl-breadcrumb a:hover {
  color: var(--vl-color-wine);
}

.vl-breadcrumb-sep {
  color: var(--vl-color-gold);
  font-size: 11px;
}

.vl-breadcrumb-current {
  color: var(--vl-color-ink);
  font-weight: 600;
}

/* Typography & Prose Styling (.vl-prose) */
.vl-prose {
  color: var(--vl-color-ink);
  font-size: 15px;
  line-height: 1.75;
}

.vl-prose h2 {
  font-family: var(--vl-font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--vl-color-wine);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vl-color-border-light);
}

.vl-prose h3 {
  font-family: var(--vl-font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vl-color-wine);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.vl-prose p {
  margin-bottom: 1.25rem;
  color: #43333C;
}

.vl-prose ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.25rem;
  space-y: 0.5rem;
}

.vl-prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.vl-prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  border-radius: var(--vl-radius-full);
  background-color: var(--vl-color-gold);
}

.vl-prose blockquote {
  border-left: 4px solid var(--vl-color-wine);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background-color: var(--vl-color-paper);
  border-radius: 0 var(--vl-radius-md) var(--vl-radius-md) 0;
  font-style: italic;
  color: var(--vl-color-ink);
}

.vl-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 13px;
}

.vl-prose th {
  background-color: var(--vl-color-paper);
  color: var(--vl-color-wine);
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--vl-color-gold);
}

.vl-prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--vl-color-border);
  color: var(--vl-color-ink);
}

.vl-prose tr:hover td {
  background-color: var(--vl-color-gold-soft);
}

/* Legal mini-nav (.vl-legal) */
.vl-legal-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--vl-radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--vl-color-ink-muted);
  border: 1px solid var(--vl-color-border);
  background-color: var(--vl-color-white);
  transition: all var(--vl-transition-fast);
}

.vl-legal-tab:hover,
.vl-legal-tab.active {
  background-color: var(--vl-color-wine);
  color: var(--vl-color-white);
  border-color: var(--vl-color-wine);
}

/* Product Quantity Stepper (.vl-stepper) */
.vl-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vl-color-border);
  border-radius: var(--vl-radius-md);
  background-color: var(--vl-color-white);
  overflow: hidden;
}

.vl-stepper-btn {
  width: 36px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: bold;
  color: var(--vl-color-wine);
  cursor: pointer;
  transition: background-color var(--vl-transition-fast);
}

.vl-stepper-btn:hover {
  background-color: var(--vl-color-gold-soft);
}

.vl-stepper-val {
  width: 44px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--vl-color-ink);
  border-left: 1px solid var(--vl-color-border);
  border-right: 1px solid var(--vl-color-border);
}

/* Filter chips */
.vl-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--vl-radius-full);
  border: 1px solid var(--vl-color-border);
  background-color: var(--vl-color-white);
  color: var(--vl-color-ink);
  cursor: pointer;
  transition: all var(--vl-transition-fast);
  white-space: nowrap;
}

.vl-chip:hover,
.vl-chip.active {
  background-color: var(--vl-color-wine);
  color: var(--vl-color-white);
  border-color: var(--vl-color-wine);
  box-shadow: var(--vl-shadow-sm);
}

/* ==========================================================================
   17. PHASE 3: MULTI-BRANCH SELECTOR & BOOKING WIZARD
   ========================================================================== */

/* 1. Branch Selector Pill & Dropdown Panel */
.vl-branch-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.vl-branch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--vl-radius-full);
  border: 1px solid var(--vl-color-gold);
  background-color: transparent;
  color: var(--vl-color-wine);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--vl-transition-fast);
  min-height: 32px;
}

.vl-branch-pill:hover {
  background-color: var(--vl-color-paper);
  border-color: var(--vl-color-gold-dark);
}

.vl-branch-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background-color: var(--vl-color-white);
  border-radius: var(--vl-radius-lg);
  border: 1px solid var(--vl-color-border);
  box-shadow: var(--vl-shadow-dropdown);
  z-index: 50;
  overflow: hidden;
}

.vl-branch-panel.hidden {
  display: none !important;
}

.vl-branch-option {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--vl-color-border-light);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--vl-transition-fast);
}

.vl-branch-option:last-child {
  border-bottom: none;
}

.vl-branch-option:hover {
  background-color: var(--vl-color-paper);
}

/* 2. Customer Type Cards (Step 0) */
.vl-book-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 359px) {
  .vl-book-type-grid {
    grid-template-columns: 1fr;
  }
}

.vl-book-type-card {
  padding: 16px 14px;
  border-radius: var(--vl-radius-lg);
  border: 1px solid var(--vl-color-border);
  background-color: var(--vl-color-white);
  cursor: pointer;
  transition: all var(--vl-transition-normal);
  position: relative;
}

@media (max-width: 480px) {
  .vl-book-type-card {
    padding: 12px 10px;
  }
}

.vl-book-type-card:hover {
  border-color: var(--vl-color-gold);
}

.vl-book-type-card.active {
  background-color: var(--vl-color-wine);
  border-color: var(--vl-color-gold);
  color: var(--vl-color-ivory);
  box-shadow: var(--vl-shadow-md);
}

.vl-book-type-card.active .vl-book-type-desc {
  color: rgba(247, 241, 234, 0.8);
}

.vl-book-type-card.active .vl-book-type-title {
  color: var(--vl-color-gold);
}

/* 3. Wizard Step Indicators */
.vl-book-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* 4. Service Rows & Gold Accent */
.vl-border-left-gold {
  border-left: 4px solid var(--vl-color-gold) !important;
}

/* 5. Calendar Day Cells */
.vl-book-cal-day {
  user-select: none;
  touch-action: manipulation;
}

/* 6. Collapsible Summary Panel & Toggle Pill (Desktop + Mobile) */
.vl-book-summary-card {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background-color: var(--vl-color-paper);
  border: 1px solid var(--vl-color-border);
  border-radius: var(--vl-radius-xl);
  transition: all var(--vl-transition-smooth);
}

/* Desktop Collapsed state & Desktop Toggle:
   Desktop summary is always visible and sticky; arrow pill is hidden on desktop */
.vl-book-summary-toggle-desktop {
  display: none !important;
}

/* Mobile Offcanvas Drawer (<1024px) */
@media (max-width: 1023px) {
  .vl-book-summary-card {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border-left: 1px solid var(--vl-color-border);
    border-top: none;
    border-bottom: none;
    border-right: none;
    z-index: 50;
    overflow-y: auto;
    background-color: var(--vl-color-paper);
    box-shadow: var(--vl-shadow-2xl);
    transform: translateX(0);
    transition: transform var(--vl-transition-smooth);
    padding-bottom: calc(var(--dock-h) + 16px);
  }

  .vl-book-summary-card.vl-summary-collapsed {
    transform: translateX(100%);
    pointer-events: none;
  }

  /* Fixed Right Toggle Pill on Mobile */
  .vl-book-summary-toggle-mobile {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 56px;
    border-radius: 22px 0 0 22px;
    background-color: var(--vl-color-wine);
    color: var(--vl-color-gold);
    border: 1px solid var(--vl-color-gold);
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 35;
    box-shadow: var(--vl-shadow-md);
    transition: transform var(--vl-transition-fast);
  }

  .vl-book-summary-toggle-mobile:hover {
    background-color: var(--vl-color-wine-hover);
  }
}

/* ==========================================================================
   7. LUXURY FORM CONTROLS: CHECKBOX & RADIO (Velora Dynamic Tokens)
   ========================================================================== */
input[type="checkbox"].vl-checkbox,
.vl-checkbox input[type="checkbox"],
[data-velora-checkbox],
.vl-service-checkbox {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: var(--vl-check-size, 20px) !important;
  height: var(--vl-check-size, 20px) !important;
  min-width: var(--vl-check-size, 20px) !important;
  min-height: var(--vl-check-size, 20px) !important;
  border: 1.5px solid var(--vl-check-border, #D4C6B6) !important;
  border-radius: var(--vl-radius-xs, 4px) !important;
  background-color: var(--vl-color-white, #FFFFFF) !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: all var(--vl-transition-fast, 0.15s ease) !important;
  position: relative !important;
  margin: 0 !important;
  outline: none !important;
  flex-shrink: 0 !important;
}

input[type="checkbox"].vl-checkbox:hover,
.vl-checkbox input[type="checkbox"]:hover,
[data-velora-checkbox]:hover,
.vl-service-checkbox:hover {
  border-color: var(--vl-color-gold, #C9A36A) !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.18) !important;
}

input[type="checkbox"].vl-checkbox:focus-visible,
.vl-checkbox input[type="checkbox"]:focus-visible,
[data-velora-checkbox]:focus-visible,
.vl-service-checkbox:focus-visible {
  border-color: var(--vl-color-gold, #C9A36A) !important;
  box-shadow: 0 0 0 3px rgba(77, 18, 45, 0.2) !important;
}

input[type="checkbox"].vl-checkbox:checked,
.vl-checkbox input[type="checkbox"]:checked,
[data-velora-checkbox]:checked,
.vl-service-checkbox:checked {
  background-color: var(--vl-check-bg-checked, #4D122D) !important;
  border-color: var(--vl-check-border-checked, #4D122D) !important;
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.25) !important;
}

input[type="checkbox"].vl-checkbox:checked::before,
.vl-checkbox input[type="checkbox"]:checked::before,
[data-velora-checkbox]:checked::before,
.vl-service-checkbox:checked::before {
  content: "" !important;
  width: 5.5px !important;
  height: 9.5px !important;
  border: solid var(--vl-check-tick-color, #DFBF8B) !important;
  border-width: 0 2.2px 2.2px 0 !important;
  transform: rotate(45deg) translate(-0.5px, -1px) !important;
  display: block !important;
}

/* Luxury Radio Token & Style */
input[type="radio"].vl-radio,
.vl-radio input[type="radio"],
[data-velora-radio] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border: 1.5px solid var(--vl-check-border, #D4C6B6) !important;
  border-radius: 50% !important;
  background-color: #FFFFFF !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  outline: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

input[type="radio"].vl-radio:hover,
[data-velora-radio]:hover {
  border-color: var(--vl-color-gold, #C9A36A) !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.18) !important;
}

input[type="radio"].vl-radio:checked,
[data-velora-radio]:checked {
  border-color: var(--vl-color-wine, #4D122D) !important;
  background-color: var(--vl-color-wine, #4D122D) !important;
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.25) !important;
}

input[type="radio"].vl-radio:checked::before,
[data-velora-radio]:checked::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--vl-color-gold-light, #DFBF8B) !important;
  display: block !important;
}

/* ==========================================================================
   8. LUXURY STEPPER (Centered Quantity Selector)
   ========================================================================== */
.vl-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vl-color-border, #E8DED2);
  border-radius: var(--vl-radius-md, 8px);
  background-color: var(--vl-color-white, #FFFFFF);
  overflow: hidden;
  box-shadow: var(--vl-shadow-sm);
  height: 42px;
}

.vl-stepper-btn {
  width: 38px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vl-color-paper, #FAF6F0);
  color: var(--vl-color-wine, #4D122D);
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all var(--vl-transition-fast, 0.15s ease);
  user-select: none;
  padding: 0;
}

.vl-stepper-btn:hover {
  background-color: var(--vl-color-wine, #4D122D);
  color: var(--vl-color-white, #FFFFFF);
}

.vl-stepper-val {
  width: 48px;
  height: 100%;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--vl-color-wine, #4D122D) !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--vl-color-border, #E8DED2) !important;
  border-right: 1px solid var(--vl-color-border, #E8DED2) !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}

.vl-stepper-val::-webkit-outer-spin-button,
.vl-stepper-val::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ==========================================================================
   9. LUXURY CART DRAWER & CART BADGE (VeloraCart)
   ========================================================================== */
.vl-cart-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(42, 18, 28, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all var(--vl-transition-smooth, 0.3s cubic-bezier(0.16, 1, 0.3, 1));
}
.vl-cart-overlay.active {
  opacity: 1;
  visibility: visible;
}

.vl-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  height: 100dvh;
  background-color: var(--vl-color-paper, #FAF6F0);
  z-index: 101;
  display: flex;
  flex-direction: column;
  box-shadow: var(--vl-shadow-2xl);
  border-left: 1px solid rgba(201, 163, 106, 0.35);
  transform: translateX(100%);
  transition: transform var(--vl-transition-smooth, 0.3s cubic-bezier(0.16, 1, 0.3, 1));
}
.vl-cart-drawer.active {
  transform: translateX(0);
}

.vl-cart-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--vl-color-border, #E8DED2);
  border-radius: var(--vl-radius-lg, 12px);
  align-items: center;
  transition: border-color var(--vl-transition-fast);
}
.vl-cart-item:hover {
  border-color: var(--vl-color-gold);
}

.vl-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--vl-radius-full);
  background-color: var(--vl-color-gold, #C9A36A);
  color: var(--vl-color-wine-dark, #350A1E);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================================
   10. QUICK VIEW MODAL
   ========================================================================== */
.vl-quickview-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(42, 18, 28, 0.65);
  backdrop-filter: blur(5px);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: all var(--vl-transition-smooth);
}
.vl-quickview-overlay.active {
  opacity: 1;
  visibility: visible;
}
.vl-quickview-box {
  background-color: #FAF6F0;
  border-radius: var(--vl-radius-xl, 16px);
  border: 1px solid rgba(201, 163, 106, 0.4);
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 48px -12px rgba(42, 18, 28, 0.3);
  transform: scale(0.95);
  transition: transform var(--vl-transition-smooth);
}
.vl-quickview-overlay.active .vl-quickview-box {
  transform: scale(1);
}

/* ==========================================================================
   11. LIGHTBOX MODAL (Image Fullscreen Viewer)
   ========================================================================== */
.vl-lightbox-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 8, 17, 0.94);
  backdrop-filter: blur(8px);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: all var(--vl-transition-smooth);
}
.vl-lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}
.vl-lightbox-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--vl-radius-lg, 12px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(201, 163, 106, 0.35);
  transition: transform var(--vl-transition-smooth);
}

/* ==========================================================================
   12. BRANCH ACTION MODAL (Universal Clinic Selection)
   ========================================================================== */
.vl-branch-action-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(42, 18, 28, 0.65);
  backdrop-filter: blur(5px);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: all var(--vl-transition-smooth);
}
.vl-branch-action-overlay.active {
  opacity: 1;
  visibility: visible;
}
.vl-branch-action-box {
  background-color: #FAF6F0;
  border-radius: var(--vl-radius-2xl, 24px);
  border: 1px solid rgba(201, 163, 106, 0.4);
  max-width: 580px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 48px -12px rgba(42, 18, 28, 0.3);
  transform: scale(0.96);
  transition: transform var(--vl-transition-smooth);
}
.vl-branch-action-overlay.active .vl-branch-action-box {
  transform: scale(1);
}
.vl-branch-action-card {
  transition: all var(--vl-transition-fast);
  border: 1px solid var(--vl-color-border, #E8DED2);
  background-color: #FFFFFF;
  border-radius: var(--vl-radius-xl, 16px);
}
.vl-branch-action-card:hover {
  border-color: var(--vl-color-gold, #C9A36A);
  box-shadow: var(--vl-shadow-md);
  transform: translateY(-2px);
}

/* ==========================================================================
   13. CATALOG SIDEBAR & FILTER ACCORDIONS
   ========================================================================== */
.vl-filter-card {
  background-color: #FAF6F0;
  border: 1px solid var(--vl-color-border, #E8DED2);
  border-radius: var(--vl-radius-xl, 16px);
  padding: 20px;
}
.vl-filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font-family: var(--vl-font-serif);
  font-weight: 700;
  color: var(--vl-color-wine);
  padding: 6px 0;
  cursor: pointer;
}

/* ==========================================================================
   14. PHASE 4: HOMEPAGE SHOWCASE VARIANTS (vl-home-2, vl-home-3, vl-home-4, vl-home-5)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. VARIANT 2: EDITORIAL VITRIN (.vl-home-2)
   -------------------------------------------------------------------------- */
.vl-home-2-topbar {
  background-color: var(--vl-color-paper, #FAF6F0);
  border-bottom: 1px solid var(--vl-color-gold-hairline, rgba(201, 163, 106, 0.35));
  color: var(--vl-color-wine, #4D122D);
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.vl-home-2-header {
  background-color: rgba(253, 251, 248, 0.98);
  border-bottom: 1px solid var(--vl-color-border, #E8DED2);
  transition: all var(--vl-transition-normal);
}

.vl-home-2-nav-link {
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vl-color-ink, #2A121C);
  padding: 8px 12px;
  transition: color var(--vl-transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vl-home-2-nav-link:hover {
  color: var(--vl-color-wine, #4D122D);
}
.vl-home-2-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background-color: var(--vl-color-gold, #C9A36A);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--vl-transition-normal);
}
.vl-home-2-nav-link:hover::after,
.vl-home-2-nav-group.active .vl-home-2-nav-link::after {
  transform: scaleX(1);
}

.vl-home-2-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background-color: #FAF6F0;
  border: 1px solid var(--vl-color-gold-hairline, rgba(201, 163, 106, 0.4));
  box-shadow: var(--vl-shadow-dropdown);
  border-radius: var(--vl-radius-lg, 12px);
  padding: 24px;
  min-width: 580px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--vl-transition-normal);
  z-index: 50;
}
.vl-home-2-nav-group:hover .vl-home-2-drop,
.vl-home-2-nav-group.active .vl-home-2-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.vl-home-2-journal-card {
  transition: transform var(--vl-transition-normal), box-shadow var(--vl-transition-normal);
}
.vl-home-2-journal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--vl-shadow-lg);
}

/* --------------------------------------------------------------------------
   B. VARIANT 3: KLINIK OTORITE VITRIN (.vl-home-3)
   -------------------------------------------------------------------------- */
.vl-home-3-topbar {
  background-color: var(--vl-color-wine, #4D122D);
  color: var(--vl-color-ivory, #F7F1EA);
  border-bottom: 2px solid var(--vl-color-gold, #C9A36A);
  min-height: 40px;
  font-size: 11.5px;
}

.vl-home-3-mega-rail-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #FAF6F0;
  border-bottom: 2px solid var(--vl-color-gold, #C9A36A);
  box-shadow: var(--vl-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transition: all var(--vl-transition-normal);
  z-index: 50;
}
.vl-home-3-nav-group:hover .vl-home-3-mega-rail-wrap,
.vl-home-3-nav-group.active .vl-home-3-mega-rail-wrap {
  opacity: 1;
  visibility: visible;
}

.vl-home-3-rail-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vl-color-ink, #2A121C);
  border-radius: var(--vl-radius-sm, 6px);
  transition: all var(--vl-transition-fast);
}
.vl-home-3-rail-btn:hover,
.vl-home-3-rail-btn.active {
  background-color: var(--vl-color-wine, #4D122D);
  color: #FFFFFF;
}

.vl-home-3-timeline-line {
  position: absolute;
  left: 20px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--vl-color-gold), rgba(201, 163, 106, 0.2));
}

/* --------------------------------------------------------------------------
   C. VARIANT 4: DONUSUM & RANDEVU VITRIN (.vl-home-4)
   -------------------------------------------------------------------------- */
.vl-home-4-ticker {
  background-color: var(--vl-color-wine, #4D122D);
  color: #FFFFFF;
  font-size: 12px;
  border-bottom: 1px solid rgba(201, 163, 106, 0.4);
  overflow: hidden;
  position: relative;
}

.vl-home-4-offcanvas-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(42, 18, 28, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all var(--vl-transition-normal);
}
.vl-home-4-offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
}

.vl-home-4-offcanvas-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 520px;
  background-color: #FAF6F0;
  z-index: 101;
  transform: translateX(-100%);
  transition: transform var(--vl-transition-smooth);
  box-shadow: var(--vl-shadow-xl);
  display: flex;
  flex-direction: column;
}
.vl-home-4-offcanvas-panel.active {
  transform: translateX(0);
}

.vl-home-4-concern-card {
  transition: transform var(--vl-transition-fast), border-color var(--vl-transition-fast), box-shadow var(--vl-transition-fast);
}
.vl-home-4-concern-card:hover {
  transform: translateY(-3px);
  border-color: var(--vl-color-gold, #C9A36A);
  box-shadow: var(--vl-shadow-md);
}

/* --------------------------------------------------------------------------
   D. VARIANT 5: IMMERSIVE LUXURY VITRIN (.vl-home-5)
   -------------------------------------------------------------------------- */
.vl-home-5-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
  color: var(--vl-color-ivory, #F7F1EA);
  transition: background-color var(--vl-transition-normal), border-color var(--vl-transition-normal), box-shadow var(--vl-transition-normal);
}
.vl-home-5-header.is-scrolled {
  position: fixed;
  background-color: rgba(250, 246, 240, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vl-color-border, #E8DED2);
  color: var(--vl-color-wine, #4D122D);
  box-shadow: var(--vl-shadow-sm);
}

.vl-home-5-fullscreen-menu {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 8, 16, 0.98);
  backdrop-filter: blur(16px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all var(--vl-transition-smooth);
  overflow-y: auto;
}
.vl-home-5-fullscreen-menu.active {
  opacity: 1;
  visibility: visible;
}

.vl-home-5-snap-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vl-home-5-snap-scroll::-webkit-scrollbar {
  display: none;
}
.vl-home-5-snap-item {
  scroll-snap-align: start;
  flex: 0 0 320px;
}
@media (min-width: 768px) {
  .vl-home-5-snap-item {
    flex: 0 0 380px;
  }
}

.vl-home-5-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 163, 106, 0.4);
  box-shadow: var(--vl-shadow-lg);
}



/* ==========================================================================
   PHASE 5: ACCOUNT, CART, AUTH, STYLEGUIDE & ORDER NAMESPACES
   ========================================================================== */

/* 1. vl-account Namespace */
.vl-account-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.vl-account-tabs::-webkit-scrollbar {
  display: none;
}
.vl-account-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--vl-radius-full);
  border: 1px solid var(--vl-color-border);
  background-color: var(--vl-color-white);
  color: var(--vl-color-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--vl-transition-fast);
}
.vl-account-tab:hover,
.vl-account-tab.active {
  background-color: var(--vl-color-wine);
  color: var(--vl-color-white);
  border-color: var(--vl-color-wine);
  box-shadow: var(--vl-shadow-sm);
}
.vl-account-tab.active svg {
  color: var(--vl-color-gold-light);
}
.vl-progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--vl-color-border-light);
  border-radius: var(--vl-radius-full);
  overflow: hidden;
}
.vl-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vl-color-gold) 0%, var(--vl-color-gold-light) 100%);
  border-radius: var(--vl-radius-full);
  transition: width var(--vl-transition-normal);
}

/* 2. vl-cart Namespace */
.vl-cart-table-th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vl-color-wine);
  background-color: var(--vl-color-paper);
  border-bottom: 1px solid var(--vl-color-border);
}
.vl-cart-table-td {
  padding: 16px;
  border-bottom: 1px solid var(--vl-color-border);
  vertical-align: middle;
}
.vl-cart-summary-box {
  background-color: var(--vl-color-paper);
  border: 1px solid var(--vl-color-border);
  border-radius: var(--vl-radius-xl);
  padding: 24px;
}

/* 3. vl-auth Namespace */
.vl-auth-card {
  background-color: var(--vl-color-paper);
  border: 1px solid var(--vl-color-border);
  border-radius: var(--vl-radius-2xl);
  box-shadow: var(--vl-shadow-xl);
}
.vl-password-toggle {
  cursor: pointer;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vl-color-ink-muted);
  transition: color var(--vl-transition-fast);
}
.vl-password-toggle:hover {
  color: var(--vl-color-wine);
}

/* 4. vl-styleguide Namespace */
.vl-styleguide-swatch {
  height: 80px;
  border-radius: var(--vl-radius-lg);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 12px;
}
.vl-styleguide-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  background-color: #FAF4EB;
  color: var(--vl-color-wine);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #E8DED2;
}
.vl-signature-canvas {
  width: 100%;
  height: 160px;
  background-color: #FFFFFF;
  border: 1.5px dashed var(--vl-color-gold);
  border-radius: var(--vl-radius-lg);
  cursor: crosshair;
  touch-action: none;
}
.vl-richtext-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background-color: var(--vl-color-paper);
  border: 1px solid var(--vl-color-border);
  border-bottom: none;
  border-radius: var(--vl-radius-md) var(--vl-radius-md) 0 0;
}
.vl-richtext-btn {
  padding: 4px 8px;
  border-radius: 4px;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--vl-color-wine);
  cursor: pointer;
}
.vl-richtext-btn:hover {
  background-color: var(--vl-color-gold-soft);
}
.vl-richtext-area {
  min-height: 120px;
  padding: 12px;
  background-color: #FFFFFF;
  border: 1px solid var(--vl-color-border);
  border-radius: 0 0 var(--vl-radius-md) var(--vl-radius-md);
  outline: none;
  font-size: 14px;
  line-height: 1.6;
}
.vl-richtext-area:focus {
  border-color: var(--vl-color-gold);
  box-shadow: 0 0 0 3px var(--vl-form-ring-color);
}

/* 5. vl-order Namespace & Print Styles */
.vl-order-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vl-color-ink-muted);
}
.vl-order-step.active {
  color: var(--vl-color-wine);
}
.vl-order-step.completed {
  color: #10B981;
}
.vl-order-step-num {
  width: 28px;
  height: 28px;
  border-radius: var(--vl-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid currentColor;
}
.vl-order-step.active .vl-order-step-num {
  background-color: var(--vl-color-wine);
  color: var(--vl-color-white);
  border-color: var(--vl-color-wine);
}
.vl-order-step.completed .vl-order-step-num {
  background-color: #10B981;
  color: #FFFFFF;
  border-color: #10B981;
}
.vl-shipping-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--vl-radius-lg);
  border: 1.5px solid var(--vl-color-border);
  background-color: #FFFFFF;
  cursor: pointer;
  transition: all var(--vl-transition-fast);
}
.vl-shipping-radio:hover,
.vl-shipping-radio.selected {
  border-color: var(--vl-color-wine);
  background-color: var(--vl-color-gold-soft);
}

@media print {
  body * {
    visibility: hidden;
  }
  #vl-printable-receipt, #vl-printable-receipt * {
    visibility: visible;
  }
  #vl-printable-receipt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  .no-print {
    display: none !important;
  }
}


/* ==========================================================================
   PHASE 6: MULTI-PALETTE, MULTI-BASE, TYPOGRAPHY & THEME CHANGER SYSTEM
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THEME BASE FAMILIES (html[data-base])
   -------------------------------------------------------------------------- */
html[data-base="ivory"], :root {
  --vl-base: #F7F1EA;
  --vl-paper: #FAF6F0;
  --vl-base-elevated: #FAF6F0;
  --vl-base-mute: #EFE8DE;
}
html[data-base="white"] {
  --vl-base: #FFFFFF;
  --vl-paper: #FDFBF8;
  --vl-base-elevated: #FFFFFF;
  --vl-base-mute: #F5F3F0;
}
html[data-base="stone"] {
  --vl-base: #F3F1EE;
  --vl-paper: #F8F7F5;
  --vl-base-elevated: #FFFFFF;
  --vl-base-mute: #E9E6E2;
}
html[data-base="warm"] {
  --vl-base: #F6EFE4;
  --vl-paper: #FAF5EC;
  --vl-base-elevated: #FFFFFF;
  --vl-base-mute: #ECE2D4;
}
html[data-base="mist"] {
  --vl-base: #EEF0F2;
  --vl-paper: #F6F7F9;
  --vl-base-elevated: #FFFFFF;
  --vl-base-mute: #E1E4E8;
}

/* --------------------------------------------------------------------------
   2. COLOR PALETTES (html[data-palette])
   -------------------------------------------------------------------------- */
/* Bordeaux (Default) */
html[data-palette="bordeaux"], :root {
  --vl-wine: #4D122D;
  --vl-wine-deep: #350A1E;
  --vl-wine-soft: rgba(77, 18, 45, 0.08);
  --vl-gold: #C9A36A;
  --vl-gold-deep: #A9834B;
  --vl-gold-soft: rgba(201, 163, 106, 0.15);
  --vl-ink: #2A121C;
  --vl-muted: #624B55;
  --vl-line: #E8DED2;
  --vl-sand: #E3D3C1;
  --vl-blush: #F4E8E1;
}

/* Noir: Ink Black + Champagne */
html[data-palette="noir"] {
  --vl-wine: #1E1B1D;
  --vl-wine-deep: #121011;
  --vl-wine-soft: rgba(30, 27, 29, 0.08);
  --vl-gold: #D6C5A8;
  --vl-gold-deep: #B8A382;
  --vl-gold-soft: rgba(214, 197, 168, 0.18);
  --vl-ink: #1C191A;
  --vl-muted: #5C5659;
  --vl-line: #E0DCD5;
  --vl-sand: #DDD8CE;
  --vl-blush: #F0EDE8;
}

/* Olive: Deep Olive + Gold */
html[data-palette="olive"] {
  --vl-wine: #2F3E2F;
  --vl-wine-deep: #1E281E;
  --vl-wine-soft: rgba(47, 62, 47, 0.08);
  --vl-gold: #C9A36A;
  --vl-gold-deep: #A9834B;
  --vl-gold-soft: rgba(201, 163, 106, 0.15);
  --vl-ink: #1D241D;
  --vl-muted: #536053;
  --vl-line: #DCE3DC;
  --vl-sand: #DCD8C8;
  --vl-blush: #ECF0EB;
}

/* Navy: Deep Navy + Sand Gold */
html[data-palette="navy"] {
  --vl-wine: #1A283B;
  --vl-wine-deep: #101926;
  --vl-wine-soft: rgba(26, 40, 59, 0.08);
  --vl-gold: #C2A675;
  --vl-gold-deep: #A68A57;
  --vl-gold-soft: rgba(194, 166, 117, 0.15);
  --vl-ink: #131C28;
  --vl-muted: #4F5E72;
  --vl-line: #D8E0EB;
  --vl-sand: #D9D2C3;
  --vl-blush: #EAEFF6;
}

/* Cocoa: Deep Cocoa + Bronze */
html[data-palette="cocoa"] {
  --vl-wine: #3D271D;
  --vl-wine-deep: #291811;
  --vl-wine-soft: rgba(61, 39, 29, 0.08);
  --vl-gold: #C89D7C;
  --vl-gold-deep: #A77B59;
  --vl-gold-soft: rgba(200, 157, 124, 0.16);
  --vl-ink: #26160F;
  --vl-muted: #665046;
  --vl-line: #E8DDD6;
  --vl-sand: #DFCFBE;
  --vl-blush: #F5EEE8;
}

/* Rose: Dusty Rose + Gold */
html[data-palette="rose"] {
  --vl-wine: #5A2C3C;
  --vl-wine-deep: #3D1B27;
  --vl-wine-soft: rgba(90, 44, 60, 0.08);
  --vl-gold: #D4AF77;
  --vl-gold-deep: #B58F56;
  --vl-gold-soft: rgba(212, 175, 119, 0.15);
  --vl-ink: #2E151E;
  --vl-muted: #6B4D57;
  --vl-line: #EADEE3;
  --vl-sand: #E2D3BE;
  --vl-blush: #F8EDF1;
}

/* Constant: WhatsApp color is immutable across all palettes and modes */
:root, [data-palette], [data-mode] {
  --vl-whatsapp: #25D366 !important;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY PAIRS (html[data-font])
   -------------------------------------------------------------------------- */
html[data-font="cormorant-outfit"], :root {
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
}
html[data-font="playfair-figtree"] {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Figtree', -apple-system, sans-serif;
}
html[data-font="libre-karla"] {
  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-sans: 'Karla', -apple-system, sans-serif;
}
html[data-font="cormorant-manrope"] {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, sans-serif;
}
html[data-font="fraunces-source"] {
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Source Sans 3', -apple-system, sans-serif;
}
html[data-font="newsreader-inter"] {
  --font-display: 'Newsreader', Georgia, serif;
  --font-sans: 'Inter', -apple-system, sans-serif;
}

/* Apply font tokens */
body, input, select, textarea, button, .font-sans {
  font-family: var(--font-sans);
}
h1, h2, h3, .font-sans, .vl-font-display {
  font-family: var(--font-sans);
}

/* --------------------------------------------------------------------------
   4. LIGHT / DARK MODE (html[data-mode])
   -------------------------------------------------------------------------- */
html[data-mode="dark"] {
  --vl-base: #16060d;
  --vl-base-elevated: #241018;
  --vl-base-mute: #2e1620;
  --vl-paper: #241018;
  --vl-ivory: #16060d;
  --vl-ink: #f3e6d4;
  --vl-muted: #bba5b0;
  --vl-line: rgba(201, 163, 106, 0.22);

  /* Luxury Clinical Status Tokens (Dark Mode) */
  --vl-success: #52B08E;
  --vl-success-light: #70C5A7;
  --vl-success-bg: rgba(40, 92, 77, 0.25);
  --vl-success-border: rgba(82, 176, 142, 0.35);
  --vl-success-text: #B4E8D5;

  --vl-warning: #E0AB58;
  --vl-warning-light: #ECC078;
  --vl-warning-bg: rgba(148, 95, 36, 0.25);
  --vl-warning-border: rgba(224, 171, 88, 0.35);
  --vl-warning-text: #FCE6C1;

  --vl-info: #5E9EBF;
  --vl-info-light: #7CB5D3;
  --vl-info-bg: rgba(43, 87, 112, 0.25);
  --vl-info-border: rgba(94, 158, 191, 0.35);
  --vl-info-text: #C1E1F2;

  --vl-danger: #E26177;
  --vl-danger-light: #EC7D90;
  --vl-danger-bg: rgba(128, 34, 53, 0.28);
  --vl-danger-border: rgba(226, 97, 119, 0.38);
  --vl-danger-text: #FAC8D1;

  --vl-vip: #DFBF8B;
  --vl-vip-light: #EBD3AB;
  --vl-vip-bg: rgba(201, 163, 106, 0.18);
  --vl-vip-border: rgba(201, 163, 106, 0.45);
  --vl-vip-text: #FAF6F0;

  /* Form Controls Dark Mode Tokens */
  --vl-form-input-bg: #241018;
  --vl-form-input-bg-focus: #180811;
  --vl-form-input-border: rgba(201, 163, 106, 0.28);
  --vl-form-input-border-hover: rgba(201, 163, 106, 0.55);
  --vl-form-input-border-focus: #C9A36A;
  --vl-form-input-color: #f3e6d4;
  --vl-form-input-placeholder: rgba(243, 230, 212, 0.45);
  --vl-form-ring-color: rgba(201, 163, 106, 0.25);

  /* Custom Select Tokens */
  --vl-select-bg: #241018;
  --vl-select-border: rgba(201, 163, 106, 0.28);
  --vl-select-dropdown-bg: #241018;
  --vl-select-dropdown-border: rgba(201, 163, 106, 0.35);
  --vl-select-item-color: #f3e6d4;
  --vl-select-item-hover-bg: rgba(201, 163, 106, 0.16);
  --vl-select-item-hover-color: #C9A36A;
  --vl-select-item-selected-bg: #4D122D;
  --vl-select-item-selected-color: #F7F1EA;

  /* Time Slot Picker Tokens */
  --vl-time-slot-bg: #1A0912;
  --vl-time-slot-border: rgba(201, 163, 106, 0.22);
  --vl-time-slot-color: #f3e6d4;
  --vl-time-slot-hover-border: #C9A36A;
  --vl-time-slot-active-bg: #4D122D;
  --vl-time-slot-active-color: #C9A36A;

  /* Date Picker Tokens */
  --vl-date-picker-bg: #241018;
  --vl-date-picker-border: rgba(201, 163, 106, 0.35);
  --vl-date-day-active-bg: #4D122D;
  --vl-date-day-active-color: #C9A36A;
  --vl-date-day-today-border: #C9A36A;
  --vl-date-day-hover-bg: rgba(201, 163, 106, 0.16);

  /* Checkbox & Radio Tokens */
  --vl-check-border: rgba(201, 163, 106, 0.38);
  --vl-check-border-checked: #C9A36A;
  --vl-check-bg-checked: #4D122D;
  --vl-check-tick-color: #C9A36A;
  --vl-radio-dot-color: #C9A36A;

  /* Switch / Toggle Tokens */
  --vl-switch-bg: #381B27;
  --vl-switch-bg-active: #4D122D;
  --vl-switch-dot-bg: #C9A36A;
}

html[data-mode="dark"][data-base] {
  --vl-base: #16060d;
  --vl-paper: #241018;
  --vl-base-elevated: #241018;
  --vl-base-mute: #2e1620;
}

html[data-mode="dark"] body {
  background-color: var(--vl-base) !important;
  color: var(--vl-ink) !important;
}

html[data-mode="dark"] .bg-[#FDFBF8],
html[data-mode="dark"] .bg-[#FAF6F0],
html[data-mode="dark"] .bg-[#F7F1EA] {
  background-color: var(--vl-base) !important;
}

html[data-mode="dark"] .bg-white {
  background-color: var(--vl-paper) !important;
  border-color: var(--vl-line) !important;
}

html[data-mode="dark"] .text-[#2A121C] {
  color: var(--vl-ink) !important;
}

html[data-mode="dark"] .text-[#624B55],
html[data-mode="dark"] .text-[#43333C] {
  color: var(--vl-muted) !important;
}

html[data-mode="dark"] .border-[#E8DED2] {
  border-color: var(--vl-line) !important;
}

html[data-mode="dark"] .vl-header,
html[data-mode="dark"] header.vl-header {
  background-color: rgba(22, 6, 13, 0.94) !important;
  border-color: var(--vl-line) !important;
}

html[data-mode="dark"] .vl-drop,
html[data-mode="dark"] .vl-mega,
html[data-mode="dark"] #mobile-drawer,
html[data-mode="dark"] #search-modal > div,
html[data-mode="dark"] #cookie-bar,
html[data-mode="dark"] .vl-account-tabs,
html[data-mode="dark"] .vl-cart-summary-box {
  background-color: var(--vl-paper) !important;
  border-color: var(--vl-line) !important;
  color: var(--vl-ink) !important;
}

/* ==========================================================================
   DARK MODE: FORM PLUGIN CONTROLS, HOVER, BG & TEXT COMPREHENSIVE STYLING
   ========================================================================== */

/* 1. Base Inputs, Textareas & Annotated Inputs */
html[data-mode="dark"] .vl-input,
html[data-mode="dark"] .vl-textarea,
html[data-mode="dark"] input.vl-input,
html[data-mode="dark"] textarea.vl-textarea,
html[data-mode="dark"] input[data-velora-datepicker],
html[data-mode="dark"] input[data-velora-timepicker],
html[data-mode="dark"] input[data-velora-phone],
[data-mode="dark"] .vl-input,
[data-mode="dark"] .vl-textarea,
[data-mode="dark"] input[data-velora-datepicker],
[data-mode="dark"] input[data-velora-timepicker],
[data-mode="dark"] input[data-velora-phone] {
  background-color: #241018 !important;
  color: #f3e6d4 !important;
  border: 1px solid rgba(201, 163, 106, 0.28) !important;
}

html[data-mode="dark"] .vl-input:hover,
html[data-mode="dark"] .vl-textarea:hover,
html[data-mode="dark"] input.vl-input:hover,
html[data-mode="dark"] textarea.vl-textarea:hover,
[data-mode="dark"] .vl-input:hover,
[data-mode="dark"] .vl-textarea:hover {
  border-color: rgba(201, 163, 106, 0.55) !important;
}

html[data-mode="dark"] .vl-input:focus,
html[data-mode="dark"] .vl-textarea:focus,
html[data-mode="dark"] input.vl-input:focus,
html[data-mode="dark"] textarea.vl-textarea:focus,
[data-mode="dark"] .vl-input:focus,
[data-mode="dark"] .vl-textarea:focus {
  background-color: #180811 !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.25) !important;
  outline: none !important;
}

html[data-mode="dark"] .vl-input::placeholder,
html[data-mode="dark"] .vl-textarea::placeholder,
[data-mode="dark"] .vl-input::placeholder,
[data-mode="dark"] .vl-textarea::placeholder {
  color: rgba(243, 230, 212, 0.45) !important;
}

html[data-mode="dark"] .vl-input:disabled,
html[data-mode="dark"] .vl-textarea:disabled,
html[data-mode="dark"] .vl-input[readonly].bg-[#FAF6F0],
[data-mode="dark"] .vl-input:disabled,
[data-mode="dark"] .vl-textarea:disabled {
  background-color: #180811 !important;
  color: rgba(243, 230, 212, 0.4) !important;
  border-color: rgba(201, 163, 106, 0.15) !important;
  cursor: not-allowed !important;
}

/* 2. Native Select in Dark Mode */
html[data-mode="dark"] select.vl-select,
html[data-mode="dark"] .vl-select,
[data-mode="dark"] select.vl-select,
[data-mode="dark"] .vl-select {
  background-color: #241018 !important;
  color: #f3e6d4 !important;
  border: 1px solid rgba(201, 163, 106, 0.28) !important;
}

html[data-mode="dark"] select.vl-select:hover,
html[data-mode="dark"] .vl-select:hover,
[data-mode="dark"] select.vl-select:hover,
[data-mode="dark"] .vl-select:hover {
  border-color: rgba(201, 163, 106, 0.55) !important;
}

html[data-mode="dark"] select.vl-select:focus,
html[data-mode="dark"] .vl-select:focus,
[data-mode="dark"] select.vl-select:focus,
[data-mode="dark"] .vl-select:focus {
  background-color: #180811 !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.25) !important;
  outline: none !important;
}

html[data-mode="dark"] select.vl-select option,
html[data-mode="dark"] select option,
[data-mode="dark"] select.vl-select option,
[data-mode="dark"] select option {
  background-color: #241018 !important;
  color: #f3e6d4 !important;
}

/* 3. Custom Select Plugin (VeloraSelect) in Dark Mode */
html[data-mode="dark"] .vl-select-trigger,
[data-mode="dark"] .vl-select-trigger {
  background-color: #241018 !important;
  color: #f3e6d4 !important;
  border: 1px solid rgba(201, 163, 106, 0.28) !important;
}

html[data-mode="dark"] .vl-select-trigger:hover,
[data-mode="dark"] .vl-select-trigger:hover {
  border-color: rgba(201, 163, 106, 0.55) !important;
}

html[data-mode="dark"] .vl-select-wrapper.open .vl-select-trigger,
html[data-mode="dark"] .vl-select-trigger:focus,
[data-mode="dark"] .vl-select-wrapper.open .vl-select-trigger,
[data-mode="dark"] .vl-select-trigger:focus {
  background-color: #180811 !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.25) !important;
}

html[data-mode="dark"] .vl-select-arrow,
[data-mode="dark"] .vl-select-arrow {
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-select-dropdown,
[data-mode="dark"] .vl-select-dropdown {
  background-color: #241018 !important;
  border: 1px solid rgba(201, 163, 106, 0.35) !important;
  box-shadow: 0 18px 40px -4px rgba(0, 0, 0, 0.65) !important;
}

html[data-mode="dark"] .vl-select-search-box,
[data-mode="dark"] .vl-select-search-box {
  background-color: #241018 !important;
  border-bottom: 1px solid rgba(201, 163, 106, 0.2) !important;
}

html[data-mode="dark"] .vl-select-search-input,
[data-mode="dark"] .vl-select-search-input {
  background-color: #16060d !important;
  color: #f3e6d4 !important;
  border: 1px solid rgba(201, 163, 106, 0.28) !important;
}

html[data-mode="dark"] .vl-select-search-input:focus,
[data-mode="dark"] .vl-select-search-input:focus {
  border-color: #C9A36A !important;
  box-shadow: 0 0 0 2px rgba(201, 163, 106, 0.25) !important;
  outline: none !important;
}

html[data-mode="dark"] .vl-select-option,
[data-mode="dark"] .vl-select-option {
  color: #f3e6d4 !important;
}

html[data-mode="dark"] .vl-select-option:hover,
html[data-mode="dark"] .vl-select-option.highlighted,
[data-mode="dark"] .vl-select-option:hover,
[data-mode="dark"] .vl-select-option.highlighted {
  background-color: rgba(201, 163, 106, 0.16) !important;
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-select-option.selected,
[data-mode="dark"] .vl-select-option.selected {
  background-color: #4D122D !important;
  color: #F7F1EA !important;
}

html[data-mode="dark"] .vl-select-option.selected .vl-select-check,
[data-mode="dark"] .vl-select-option.selected .vl-select-check {
  color: #C9A36A !important;
}

/* 4. Checkboxes (Component & Native) in Dark Mode */
html[data-mode="dark"] .vl-checkbox-box,
[data-mode="dark"] .vl-checkbox-box {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(201, 163, 106, 0.38) !important;
}

html[data-mode="dark"] .vl-checkbox-wrapper:hover .vl-checkbox-box,
[data-mode="dark"] .vl-checkbox-wrapper:hover .vl-checkbox-box {
  border-color: #C9A36A !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.2) !important;
}

html[data-mode="dark"] .vl-checkbox-native:checked ~ .vl-checkbox-box,
[data-mode="dark"] .vl-checkbox-native:checked ~ .vl-checkbox-box {
  background-color: #4D122D !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 8px rgba(201, 163, 106, 0.3) !important;
}

html[data-mode="dark"] .vl-checkbox-icon,
[data-mode="dark"] .vl-checkbox-icon {
  color: #C9A36A !important;
}

html[data-mode="dark"] input[type="checkbox"].vl-checkbox,
html[data-mode="dark"] .vl-checkbox input[type="checkbox"],
html[data-mode="dark"] [data-velora-checkbox],
html[data-mode="dark"] .vl-service-checkbox,
[data-mode="dark"] input[type="checkbox"].vl-checkbox,
[data-mode="dark"] [data-velora-checkbox],
[data-mode="dark"] .vl-service-checkbox {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(201, 163, 106, 0.38) !important;
}

html[data-mode="dark"] input[type="checkbox"].vl-checkbox:hover,
html[data-mode="dark"] .vl-checkbox input[type="checkbox"]:hover,
html[data-mode="dark"] [data-velora-checkbox]:hover,
html[data-mode="dark"] .vl-service-checkbox:hover,
[data-mode="dark"] input[type="checkbox"].vl-checkbox:hover {
  border-color: #C9A36A !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.2) !important;
}

html[data-mode="dark"] input[type="checkbox"].vl-checkbox:checked,
html[data-mode="dark"] .vl-checkbox input[type="checkbox"]:checked,
html[data-mode="dark"] [data-velora-checkbox]:checked,
html[data-mode="dark"] .vl-service-checkbox:checked,
[data-mode="dark"] input[type="checkbox"].vl-checkbox:checked,
[data-mode="dark"] [data-velora-checkbox]:checked {
  background-color: #4D122D !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 8px rgba(201, 163, 106, 0.3) !important;
}

html[data-mode="dark"] input[type="checkbox"].vl-checkbox:checked::before,
html[data-mode="dark"] .vl-checkbox input[type="checkbox"]:checked::before,
html[data-mode="dark"] [data-velora-checkbox]:checked::before,
html[data-mode="dark"] .vl-service-checkbox:checked::before,
[data-mode="dark"] input[type="checkbox"].vl-checkbox:checked::before {
  border-color: #C9A36A !important;
}

/* 5. Radio Buttons (Component & Native) in Dark Mode */
html[data-mode="dark"] .vl-radio-circle,
[data-mode="dark"] .vl-radio-circle {
  background-color: #241018 !important;
  border: 1.5px solid rgba(201, 163, 106, 0.38) !important;
}

html[data-mode="dark"] .vl-radio-wrapper:hover .vl-radio-circle,
[data-mode="dark"] .vl-radio-wrapper:hover .vl-radio-circle {
  border-color: #C9A36A !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.2) !important;
}

html[data-mode="dark"] .vl-radio-native:checked ~ .vl-radio-circle,
[data-mode="dark"] .vl-radio-native:checked ~ .vl-radio-circle {
  border-color: #C9A36A !important;
  background-color: #4D122D !important;
  box-shadow: 0 0 8px rgba(201, 163, 106, 0.25) !important;
}

html[data-mode="dark"] .vl-radio-dot,
[data-mode="dark"] .vl-radio-dot {
  background-color: #C9A36A !important;
}

html[data-mode="dark"] input[type="radio"].vl-radio,
html[data-mode="dark"] .vl-radio input[type="radio"],
html[data-mode="dark"] [data-velora-radio],
[data-mode="dark"] input[type="radio"].vl-radio,
[data-mode="dark"] [data-velora-radio] {
  background-color: #241018 !important;
  border: 1.5px solid rgba(201, 163, 106, 0.38) !important;
}

html[data-mode="dark"] input[type="radio"].vl-radio:hover,
html[data-mode="dark"] [data-velora-radio]:hover,
[data-mode="dark"] input[type="radio"].vl-radio:hover {
  border-color: #C9A36A !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.2) !important;
}

html[data-mode="dark"] input[type="radio"].vl-radio:checked,
html[data-mode="dark"] [data-velora-radio]:checked,
[data-mode="dark"] input[type="radio"].vl-radio:checked,
[data-mode="dark"] [data-velora-radio]:checked {
  border-color: #C9A36A !important;
  background-color: #4D122D !important;
  box-shadow: 0 0 8px rgba(201, 163, 106, 0.25) !important;
}

html[data-mode="dark"] input[type="radio"].vl-radio:checked::before,
html[data-mode="dark"] [data-velora-radio]:checked::before,
[data-mode="dark"] input[type="radio"].vl-radio:checked::before {
  background-color: #C9A36A !important;
}

/* 6. Switch / Toggle in Dark Mode */
html[data-mode="dark"] .vl-switch-track,
[data-mode="dark"] .vl-switch-track {
  background-color: #381B27 !important;
  border: 1px solid rgba(201, 163, 106, 0.25) !important;
}

html[data-mode="dark"] .vl-switch-thumb,
[data-mode="dark"] .vl-switch-thumb {
  background-color: #E8DED2 !important;
}

html[data-mode="dark"] .vl-switch-wrapper:hover .vl-switch-track,
[data-mode="dark"] .vl-switch-wrapper:hover .vl-switch-track {
  border-color: rgba(201, 163, 106, 0.5) !important;
}

html[data-mode="dark"] .vl-switch-native:checked ~ .vl-switch-track,
[data-mode="dark"] .vl-switch-native:checked ~ .vl-switch-track {
  background-color: #4D122D !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 10px rgba(201, 163, 106, 0.3) !important;
}

html[data-mode="dark"] .vl-switch-native:checked ~ .vl-switch-track .vl-switch-thumb,
[data-mode="dark"] .vl-switch-native:checked ~ .vl-switch-track .vl-switch-thumb {
  background-color: #C9A36A !important;
}

/* 7. DatePicker Popover in Dark Mode */
html[data-mode="dark"] .vl-datepicker-popover,
[data-mode="dark"] .vl-datepicker-popover {
  background-color: #241018 !important;
  border: 1px solid rgba(201, 163, 106, 0.35) !important;
  border-top: 2px solid #C9A36A !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7) !important;
}

html[data-mode="dark"] .vl-cal-title,
[data-mode="dark"] .vl-cal-title {
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-cal-nav-btn,
[data-mode="dark"] .vl-cal-nav-btn {
  background-color: #381B27 !important;
  border: 1px solid rgba(201, 163, 106, 0.25) !important;
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-cal-nav-btn:hover,
[data-mode="dark"] .vl-cal-nav-btn:hover {
  background-color: #C9A36A !important;
  color: #16060d !important;
  border-color: #C9A36A !important;
}

html[data-mode="dark"] .vl-cal-weekdays,
[data-mode="dark"] .vl-cal-weekdays {
  color: #bba5b0 !important;
}

html[data-mode="dark"] .vl-cal-day,
[data-mode="dark"] .vl-cal-day {
  color: #f3e6d4 !important;
}

html[data-mode="dark"] .vl-cal-day:hover:not(.disabled),
[data-mode="dark"] .vl-cal-day:hover:not(.disabled) {
  background-color: rgba(201, 163, 106, 0.18) !important;
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-cal-day.today,
[data-mode="dark"] .vl-cal-day.today {
  border-color: #C9A36A !important;
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-cal-day.selected,
[data-mode="dark"] .vl-cal-day.selected {
  background-color: #4D122D !important;
  color: #C9A36A !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 8px rgba(201, 163, 106, 0.3) !important;
}

html[data-mode="dark"] .vl-cal-footer,
[data-mode="dark"] .vl-cal-footer {
  border-top: 1px solid rgba(201, 163, 106, 0.2) !important;
}

html[data-mode="dark"] .vl-cal-quick-btn,
[data-mode="dark"] .vl-cal-quick-btn {
  background-color: #381B27 !important;
  border: 1px solid rgba(201, 163, 106, 0.25) !important;
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-cal-quick-btn:hover,
[data-mode="dark"] .vl-cal-quick-btn:hover {
  background-color: #4D122D !important;
  border-color: #C9A36A !important;
  color: #FFFFFF !important;
}

/* 8. TimePicker Popover in Dark Mode */
html[data-mode="dark"] .vl-timepicker-popover,
[data-mode="dark"] .vl-timepicker-popover {
  background-color: #241018 !important;
  border: 1px solid rgba(201, 163, 106, 0.35) !important;
  border-top: 2px solid #C9A36A !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7) !important;
}

html[data-mode="dark"] .vl-time-tabs,
[data-mode="dark"] .vl-time-tabs {
  border-bottom: 1px solid rgba(201, 163, 106, 0.2) !important;
}

html[data-mode="dark"] .vl-time-tab-btn,
[data-mode="dark"] .vl-time-tab-btn {
  color: #bba5b0 !important;
}

html[data-mode="dark"] .vl-time-tab-btn:hover,
html[data-mode="dark"] .vl-time-tab-btn.active,
[data-mode="dark"] .vl-time-tab-btn:hover,
[data-mode="dark"] .vl-time-tab-btn.active {
  color: #C9A36A !important;
  background-color: rgba(201, 163, 106, 0.18) !important;
}

html[data-mode="dark"] .vl-time-slot,
[data-mode="dark"] .vl-time-slot {
  background-color: #1A0912 !important;
  border: 1px solid rgba(201, 163, 106, 0.22) !important;
  color: #f3e6d4 !important;
}

html[data-mode="dark"] .vl-time-slot:hover,
[data-mode="dark"] .vl-time-slot:hover {
  border-color: #C9A36A !important;
  background-color: rgba(201, 163, 106, 0.18) !important;
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-time-slot.selected,
[data-mode="dark"] .vl-time-slot.selected {
  background-color: #4D122D !important;
  color: #C9A36A !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 10px rgba(201, 163, 106, 0.3) !important;
}

html[data-mode="dark"] .vl-time-slot.disabled,
[data-mode="dark"] .vl-time-slot.disabled {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: rgba(243, 230, 212, 0.2) !important;
  border-color: transparent !important;
}

/* 9. Stepper Component in Dark Mode */
html[data-mode="dark"] .vl-stepper,
[data-mode="dark"] .vl-stepper {
  background-color: #241018 !important;
  border: 1px solid rgba(201, 163, 106, 0.28) !important;
}

html[data-mode="dark"] .vl-stepper-btn,
[data-mode="dark"] .vl-stepper-btn {
  background-color: #381B27 !important;
  color: #C9A36A !important;
}

html[data-mode="dark"] .vl-stepper-btn:hover,
[data-mode="dark"] .vl-stepper-btn:hover {
  background-color: #4D122D !important;
  color: #FFFFFF !important;
}

html[data-mode="dark"] .vl-stepper-val,
html[data-mode="dark"] .vl-stepper input,
[data-mode="dark"] .vl-stepper-val,
[data-mode="dark"] .vl-stepper input {
  color: #f3e6d4 !important;
  background-color: transparent !important;
}

/* 10. Range Slider in Dark Mode */
html[data-mode="dark"] input[type="range"],
[data-mode="dark"] input[type="range"] {
  background: #381B27 !important;
}

html[data-mode="dark"] input[type="range"]::-webkit-slider-thumb,
[data-mode="dark"] input[type="range"]::-webkit-slider-thumb {
  background: #4D122D !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 8px rgba(201, 163, 106, 0.4) !important;
}

html[data-mode="dark"] input[type="range"]::-moz-range-thumb,
[data-mode="dark"] input[type="range"]::-moz-range-thumb {
  background: #4D122D !important;
  border-color: #C9A36A !important;
  box-shadow: 0 0 8px rgba(201, 163, 106, 0.4) !important;
}

/* 11. Form Labels, Headings & Containers in Dark Mode */
html[data-mode="dark"] label,
html[data-mode="dark"] .vl-checkbox-wrapper span,
html[data-mode="dark"] .vl-radio-wrapper span,
html[data-mode="dark"] .vl-switch-wrapper span,
[data-mode="dark"] label,
[data-mode="dark"] .vl-checkbox-wrapper span,
[data-mode="dark"] .vl-radio-wrapper span,
[data-mode="dark"] .vl-switch-wrapper span {
  color: #f3e6d4 !important;
}

html[data-mode="dark"] [class*="text-[#4D122D]"],
[data-mode="dark"] [class*="text-[#4D122D]"],
html[data-mode="dark"] .text-\[\#4D122D\],
[data-mode="dark"] .text-\[\#4D122D\] {
  color: #C9A36A !important;
}

html[data-mode="dark"] [class*="text-[#800020]"],
[data-mode="dark"] [class*="text-[#800020]"],
html[data-mode="dark"] .text-\[\#800020\],
[data-mode="dark"] .text-\[\#800020\] {
  color: #DFBF8B !important;
}

html[data-mode="dark"] [class*="bg-[#FFFAF4]"],
[data-mode="dark"] [class*="bg-[#FFFAF4]"],
html[data-mode="dark"] .bg-\[\#FFFAF4\],
[data-mode="dark"] .bg-\[\#FFFAF4\] {
  background-color: #1A0912 !important;
}

html[data-mode="dark"] [class*="border-[#C9A36A]"],
[data-mode="dark"] [class*="border-[#C9A36A]"] {
  border-color: rgba(201, 163, 106, 0.35) !important;
}

html[data-mode="dark"] img {
  filter: none !important; /* Images are never inverted */
}

/* --------------------------------------------------------------------------
   5. DYNAMIC RADIUS BINDINGS
   -------------------------------------------------------------------------- */
.rounded-2xl, .vl-card, .vl-modal-box, .vl-auth-card, .vl-cart-summary-box, .vl-home-5-snap-item {
  border-radius: var(--vl-r-card) !important;
}
.rounded-xl, #cookie-bar, .vl-account-tabs {
  border-radius: var(--vl-r-cookie) !important;
}
.rounded-lg, .vl-input, select.vl-select, .vl-custom-select, [data-velora-datepicker], [data-velora-phone], .vl-stepper {
  border-radius: var(--vl-r-input) !important;
}
.rounded-full, .vl-btn-gold, .vl-btn-dark, .vl-pill, button.rounded-full, a.rounded-full, .vl-badge {
  border-radius: var(--vl-r-btn) !important;
}

/* ==========================================================================
   CANONICAL AS MEDICAL AESTHETICS BUTTONS
   ========================================================================== */
.vl-btn-gold {
  background-color: #C9A36A !important;
  color: #FFFFFF !important;
  border: 1px solid #C9A36A !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}
.vl-btn-gold:hover {
  background-color: #A9834B !important;
  border-color: #A9834B !important;
  color: #FFFFFF !important;
}

.vl-btn-dark {
  background-color: #4D122D !important;
  color: #FFFFFF !important;
  border: 1px solid #4D122D !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}
.vl-btn-dark:hover {
  background-color: #6A1A3F !important;
  border-color: #6A1A3F !important;
  color: #FFFFFF !important;
}

.vl-btn-outline-gold {
  background-color: transparent !important;
  color: #C9A36A !important;
  border: 1.5px solid #C9A36A !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}
.vl-btn-outline-gold:hover {
  background-color: #C9A36A !important;
  color: #FFFFFF !important;
}

.vl-btn-white {
  background-color: #FFFFFF !important;
  color: #4D122D !important;
  border: 1px solid #E8DED2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}
.vl-btn-white:hover {
  background-color: #FAF6F0 !important;
  border-color: #C9A36A !important;
  color: #4D122D !important;
}

.vl-ba {
  border-radius: var(--vl-r-ba) !important;
}
#mobile-drawer {
  border-top-left-radius: var(--vl-r-card);
  border-bottom-left-radius: var(--vl-r-card);
}

/* --------------------------------------------------------------------------
   6. DYNAMIC COLOR UTILITY BRIDGES (Smooth Theme/Palette Propagation)
   -------------------------------------------------------------------------- */
[data-palette]:not([data-palette="bordeaux"]) .bg-[#4D122D],
[data-palette]:not([data-palette="bordeaux"]) .bg-wine {
  background-color: var(--vl-wine) !important;
}
[data-palette]:not([data-palette="bordeaux"]) .text-[#4D122D],
[data-palette]:not([data-palette="bordeaux"]) .text-wine {
  color: var(--vl-wine) !important;
}
[data-palette]:not([data-palette="bordeaux"]) .border-[#4D122D],
[data-palette]:not([data-palette="bordeaux"]) .border-wine {
  border-color: var(--vl-wine) !important;
}
[data-palette]:not([data-palette="bordeaux"]) .text-[#C9A36A],
[data-palette]:not([data-palette="bordeaux"]) .text-gold {
  color: var(--vl-gold) !important;
}
[data-palette]:not([data-palette="bordeaux"]) .bg-[#C9A36A],
[data-palette]:not([data-palette="bordeaux"]) .bg-gold {
  background-color: var(--vl-gold) !important;
}
[data-palette]:not([data-palette="bordeaux"]) .border-[#C9A36A],
[data-palette]:not([data-palette="bordeaux"]) .border-gold {
  border-color: var(--vl-gold) !important;
}

/* --------------------------------------------------------------------------
   7. THEME CHANGER UI STYLES (Disabled & Hidden)
   -------------------------------------------------------------------------- */
#vl-theme-trigger,
.vl-theme-trigger,
#vl-theme-drawer,
.vl-theme-drawer,
#vl-theme-overlay,
.vl-theme-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.vl-theme-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 18, 28, 0.25);
  backdrop-filter: blur(2px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.vl-theme-overlay.active {
  opacity: 1;
  visibility: visible;
}

.vl-theme-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: var(--vl-paper);
  color: var(--vl-ink);
  border-right: 1px solid var(--vl-line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vl-theme-drawer.active {
  transform: translateX(0);
}

.vl-theme-swatch-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--vl-line);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.vl-theme-swatch-btn.active {
  border-color: var(--vl-gold);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--vl-wine);
}

.vl-theme-palette-card {
  padding: 8px 10px;
  border-radius: var(--vl-r-input);
  border: 1px solid var(--vl-line);
  background: var(--vl-base-elevated);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.vl-theme-palette-card:hover {
  border-color: var(--vl-gold);
}
.vl-theme-palette-card.active {
  border-color: var(--vl-gold);
  background: var(--vl-gold-soft);
}

.vl-theme-code-box {
  background: #181014;
  color: #e6ded6;
  border-radius: var(--vl-r-input);
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid rgba(201, 163, 106, 0.3);
  white-space: pre-wrap;
  word-break: break-all;
}


/* ==========================================================================
   PHASE 7: CLINIC APPOINTMENT CALENDAR PLUGIN (.vl-cal-*)
   ========================================================================== */

:root {
  --vl-cal-slot-h: 26px; /* 15-minute slot row height */
  --vl-cal-time-col-w: 64px;
  --vl-cal-sidebar-w: 320px;
}

/* 1. Main Workspace Shell */
.vl-cal-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--vl-base);
  color: var(--vl-ink);
  overflow: hidden;
  font-family: var(--font-sans);
}

.vl-cal-topbar {
  height: 56px;
  background-color: var(--vl-paper);
  border-bottom: 1px solid var(--vl-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 30;
}

.vl-cal-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.vl-cal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--vl-base);
}

/* 2. Toolbar & Controls */
.vl-cal-toolbar {
  padding: 10px 16px;
  background-color: var(--vl-base-elevated);
  border-bottom: 1px solid var(--vl-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.vl-cal-btn-group {
  display: inline-flex;
  border-radius: var(--vl-r-input);
  background-color: var(--vl-paper);
  border: 1px solid var(--vl-line);
  padding: 2px;
}

.vl-cal-tab-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: calc(var(--vl-r-input) * 0.8);
  color: var(--vl-muted);
  transition: all 0.15s ease;
  cursor: pointer;
  background: transparent;
  border: none;
}

.vl-cal-tab-btn:hover {
  color: var(--vl-wine);
}

.vl-cal-tab-btn.active {
  background-color: var(--vl-wine);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.2);
}

/* 3. Grid Structure (Day / Week) */
.vl-cal-view-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
  background-color: var(--vl-base);
}

.vl-cal-grid {
  display: flex;
  min-width: 820px;
  position: relative;
}

.vl-cal-time-col {
  width: var(--vl-cal-time-col-w);
  flex-shrink: 0;
  border-right: 1px solid var(--vl-line);
  background-color: var(--vl-paper);
  position: sticky;
  left: 0;
  z-index: 25;
}

.vl-cal-time-cell {
  height: calc(var(--vl-cal-slot-h) * 4); /* 1 hour = 4 slots */
  border-bottom: 1px solid var(--vl-line);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vl-muted);
  box-sizing: border-box;
}

.vl-cal-columns-container {
  display: flex;
  flex: 1;
  position: relative;
}

.vl-cal-day-col {
  flex: 1;
  min-width: 110px;
  border-right: 1px solid var(--vl-line);
  position: relative;
  background-color: var(--vl-base-elevated);
}

.vl-cal-day-col:last-child {
  border-right: none;
}

.vl-cal-day-header {
  position: sticky;
  top: 0;
  height: 48px;
  background-color: var(--vl-paper);
  border-bottom: 1px solid var(--vl-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.vl-cal-day-header.is-today {
  background-color: var(--vl-gold-soft);
  color: var(--vl-wine);
}

.vl-cal-day-header.is-today .vl-cal-day-num {
  background-color: var(--vl-wine);
  color: #FFFFFF;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vl-cal-slot {
  height: var(--vl-cal-slot-h);
  border-bottom: 1px dashed rgba(232, 222, 210, 0.45);
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.vl-cal-slot:nth-child(4n) {
  border-bottom: 1px solid var(--vl-line);
}

.vl-cal-slot:hover {
  background-color: var(--vl-gold-soft);
}

/* 4. Live Now Line */
.vl-cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--vl-gold);
  z-index: 15;
  pointer-events: none;
}

.vl-cal-now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  background-color: var(--vl-gold);
  border-radius: 50%;
}

/* 5. Appointment Cards */
.vl-cal-card {
  position: absolute;
  border-radius: 0 !important;
  padding: 4px 6px;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.15s ease, box-shadow 0.15s ease, z-index 0.15s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11px;
  line-height: 1.25;
  box-shadow: 0 1px 4px rgba(42, 18, 28, 0.08);
}

.vl-cal-card:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 12px rgba(42, 18, 28, 0.18);
  z-index: 25;
}

/* Status: request (Gold Outline, Subtle Tint) */
.vl-cal-card--request {
  background-color: rgba(201, 163, 106, 0.12);
  border: 1.5px dashed var(--vl-gold);
  color: var(--vl-ink);
}

/* Status: planned (Muted Outline & Background) */
.vl-cal-card--planned {
  background-color: rgba(98, 75, 85, 0.08);
  border: 1px solid var(--vl-muted);
  border-left: 3px solid var(--vl-muted);
  color: var(--vl-ink);
}

/* Status: approved (Wine Solid Left Bar, Clean White/Elevated Surface) */
.vl-cal-card--approved {
  background-color: #FFFFFF;
  border: 1px solid var(--vl-line);
  border-left: 4px solid var(--vl-wine);
  color: var(--vl-ink);
}

/* Status: completed (Solid Thin Gold Bar + Checkmark) */
.vl-cal-card--completed {
  background-color: rgba(201, 163, 106, 0.08);
  border: 1px solid var(--vl-gold);
  border-left: 4px solid var(--vl-gold);
  color: var(--vl-ink);
}

/* Status: cancelled (Dimmed) */
.vl-cal-card--cancelled {
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px dashed var(--vl-line);
  opacity: 0.55;
  color: var(--vl-muted);
}
.vl-cal-card--cancelled .vl-cal-card-title {
  text-decoration: line-through;
}

/* Card Elements */
.vl-cal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.vl-cal-card-title {
  font-weight: 700;
  color: var(--vl-wine);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vl-cal-card-time {
  font-size: 10px;
  color: var(--vl-muted);
  white-space: nowrap;
}

.vl-cal-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 2px;
}

.vl-cal-badge-pay {
  padding: 1px 5px;
  border-radius: var(--vl-r-input);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}
.vl-cal-pay--unpaid {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.vl-cal-pay--partial {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}
.vl-cal-pay--paid {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.vl-cal-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--vl-wine);
  color: var(--vl-gold);
  font-size: 8.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 6. Monthly View */
.vl-cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, 1fr);
  gap: 1px;
  background-color: var(--vl-line);
  min-width: 780px;
}

.vl-cal-month-cell {
  background-color: var(--vl-base-elevated);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.vl-cal-month-cell:hover {
  background-color: var(--vl-gold-soft);
}

.vl-cal-month-cell.is-outside {
  opacity: 0.4;
  background-color: var(--vl-base);
}

.vl-cal-month-chip {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid var(--vl-wine);
  background-color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 7. Operational Sidebar */
.vl-cal-sidebar {
  width: var(--vl-cal-sidebar-w);
  background-color: var(--vl-paper);
  border-left: 1px solid var(--vl-line);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 25;
}

.vl-cal-sidebar-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--vl-line);
  background-color: var(--vl-base);
}

.vl-cal-sidebar-tab {
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--vl-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vl-cal-sidebar-tab.active {
  color: var(--vl-wine);
  border-bottom-color: var(--vl-wine);
  background-color: var(--vl-paper);
}

.vl-cal-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vl-cal-request-card {
  background-color: #FFFFFF;
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-r-input);
  padding: 12px;
  box-shadow: 0 2px 6px rgba(42, 18, 28, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease;
}

.vl-cal-request-card:hover {
  border-color: var(--vl-gold);
}

/* 8. Modal Window (960px 4-Tab Precision Architecture) */
.vl-cal-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(42, 18, 28, 0.45);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.vl-cal-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.vl-cal-modal-container {
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  background-color: var(--vl-paper);
  border-radius: var(--vl-r-card);
  border: 1px solid var(--vl-gold);
  box-shadow: 0 25px 50px -12px rgba(42, 18, 28, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.vl-cal-modal-backdrop.active .vl-cal-modal-container {
  transform: translateY(0) scale(1);
}

.vl-cal-modal-header {
  padding: 16px 20px;
  background-color: var(--vl-base-elevated);
  border-bottom: 1px solid var(--vl-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.vl-cal-nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--vl-line);
  background-color: var(--vl-base);
  padding: 0 20px;
  gap: 8px;
  flex-shrink: 0;
}

.vl-cal-nav-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vl-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
}

.vl-cal-nav-tab.active {
  color: var(--vl-wine);
  border-bottom-color: var(--vl-wine);
}

.vl-cal-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.vl-cal-modal-footer {
  padding: 14px 20px;
  background-color: var(--vl-base-elevated);
  border-top: 1px solid var(--vl-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 10px;
}

/* Responsive Rules for Calendar Workspace */
@media (max-width: 1023px) {
  .vl-cal-layout {
    flex-direction: column;
  }
  .vl-cal-sidebar {
    width: 100%;
    height: 280px;
    border-left: none;
    border-top: 1px solid var(--vl-line);
  }
  .vl-cal-root {
    height: auto;
    min-height: 100vh;
  }
}

/* Slot Line Aliases */
.vl-cal-slot-line {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px dashed rgba(232, 222, 210, 0.45);
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.vl-cal-slot-line.is-hour {
  border-bottom: 1px solid var(--vl-line, #E8DED2);
}
.vl-cal-slot-line:hover {
  background-color: var(--vl-gold-soft, rgba(201, 163, 106, 0.1));
}

/* Status Card Aliases: .is-status-* */
.vl-cal-card.is-status-request, .vl-cal-card--request {
  background-color: rgba(201, 163, 106, 0.12);
  border: 1.5px dashed var(--vl-gold);
  color: var(--vl-ink);
}
.vl-cal-card.is-status-planned, .vl-cal-card--planned {
  background-color: rgba(98, 75, 85, 0.08);
  border: 1px solid var(--vl-muted);
  border-left: 3px solid var(--vl-muted);
  color: var(--vl-ink);
}
.vl-cal-card.is-status-approved, .vl-cal-card--approved {
  background-color: #FFFFFF;
  border: 1px solid var(--vl-line);
  border-left: 4px solid var(--vl-wine);
  color: var(--vl-ink);
}
.vl-cal-card.is-status-completed, .vl-cal-card--completed {
  background-color: rgba(201, 163, 106, 0.08);
  border: 1px solid var(--vl-gold);
  border-left: 4px solid var(--vl-gold);
  color: var(--vl-ink);
}
.vl-cal-card.is-status-cancelled, .vl-cal-card--cancelled {
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px dashed var(--vl-line);
  opacity: 0.55;
  color: var(--vl-muted);
}
.vl-cal-card.is-status-cancelled .vl-cal-card-title {
  text-decoration: line-through;
}

/* Payment Badge Aliases: .vl-cal-pay-badge */
.vl-cal-pay-badge {
  padding: 1px 6px;
  border-radius: var(--vl-r-input, 6px);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.vl-cal-pay-badge.is-unpaid, .vl-cal-pay--unpaid {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.vl-cal-pay-badge.is-partial, .vl-cal-pay--partial {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}
.vl-cal-pay-badge.is-paid, .vl-cal-pay--paid {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

/* ==========================================================================
   PHASE 8: VELORA UI COMPONENT LIBRARY & GRID ENGINE (.vl-ui-*, .vl-grid-*)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PHASE 10: UNIFIED PANEL SHELL ARCHITECTURE (STANDARD / ICON / TOP)
   -------------------------------------------------------------------------- */
:root {
  --vl-sidebar-w: 260px;
  --vl-sidebar-w-icon: 72px;
  --vl-panel-top: 64px;
  --vl-nav-indent: 14px;
}

.vl-panel-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: var(--vl-base);
  color: var(--vl-ink);
  position: relative;
}

#vl-shell {
  display: contents;
}

/* --- THREE LAYOUT ATTRIBUTE MODES --- */

/* Standard Layout (Default 260px) */
html[data-panel-layout="standard"] {
  --vl-sidebar-w: 260px;
}
html[data-panel-layout="standard"][data-panel-collapsed="true"],
html[data-panel-collapsed="true"] {
  --vl-sidebar-w: 72px;
}
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-text,
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-badge,
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-category-title,
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-nav-chevron,
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-panel-search-box,
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-text,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-text,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-badge,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-category-title,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-nav-chevron,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-panel-search-box,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-text {
  display: none !important;
}
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-nav-item,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-nav-item {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-nav-submenu,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-nav-submenu {
  display: none !important;
}

/* Collapsed Sidebar Footer Alignment */
html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-panel-sidebar-footer,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-panel-sidebar-footer,
html[data-panel-layout="icon"] .vl-panel-sidebar .vl-panel-sidebar-footer {
  padding: 12px 6px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-user-card,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-user-card,
html[data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-user-card {
  display: none !important;
}

html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-actions,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-actions,
html[data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-actions {
  flex-direction: column !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn,
html[data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  transition: all 0.15s ease !important;
}

html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount,
html[data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount {
  background-color: var(--vl-surface, #FAF6F0) !important;
  border: 1px solid var(--vl-line, #E8DED2) !important;
  color: var(--vl-wine, #4D122D) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount:hover,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount:hover,
html[data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount:hover {
  background-color: var(--vl-gold-soft, #F5EDE2) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
  color: var(--vl-wine, #4D122D) !important;
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.15) !important;
  transform: translateY(-1px);
}

html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout,
html[data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout {
  background-color: #FFF5F5 !important;
  border: 1px solid rgba(225, 29, 72, 0.2) !important;
  color: #E11D48 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

html[data-panel-layout="standard"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout:hover,
html[data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout:hover,
html[data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout:hover {
  background-color: #FFE4E6 !important;
  border-color: #F43F5E !important;
  color: #BE123C !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.18) !important;
  transform: translateY(-1px);
}

/* Dark mode overrides for collapsed footer */
html[data-mode="dark"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount,
html[data-mode="dark"][data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--vl-gold, #C9A36A) !important;
}
html[data-mode="dark"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount:hover,
html[data-mode="dark"][data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-myaccount:hover {
  background-color: rgba(201, 163, 106, 0.2) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
  color: #ffffff !important;
}
html[data-mode="dark"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout,
html[data-mode="dark"][data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout {
  background-color: rgba(225, 29, 72, 0.12) !important;
  border-color: rgba(225, 29, 72, 0.3) !important;
  color: #FB7185 !important;
}
html[data-mode="dark"][data-panel-collapsed="true"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout:hover,
html[data-mode="dark"][data-panel-layout="icon"] .vl-panel-sidebar .vl-sidebar-footer-btn.vl-btn-logout:hover {
  background-color: rgba(225, 29, 72, 0.25) !important;
  border-color: #FB7185 !important;
  color: #ffffff !important;
}

/* Icon Layout (Permanent 72px Rail) */
html[data-panel-layout="icon"] {
  --vl-sidebar-w: 72px;
}
html[data-panel-layout="icon"] .vl-sidebar-text,
html[data-panel-layout="icon"] .vl-sidebar-badge,
html[data-panel-layout="icon"] .vl-sidebar-category-title,
html[data-panel-layout="icon"] .vl-nav-chevron,
html[data-panel-layout="icon"] .vl-panel-search-box,
html[data-panel-layout="icon"] .vl-sidebar-footer-text {
  display: none !important;
}
html[data-panel-layout="icon"] .vl-sidebar-nav-item {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html[data-panel-layout="icon"] .vl-nav-submenu {
  display: none !important;
}

/* Top Layout (0px Sidebar, Horizontal Top Navigation Bar) */
html[data-panel-layout="top"] {
  --vl-sidebar-w: 0px;
}
html[data-panel-layout="top"] .vl-panel-sidebar {
  display: none !important;
}
html[data-panel-layout="top"] .vl-top-nav-container {
  display: flex !important;
}
html[data-panel-layout="top"] #sidebar-collapse-btn {
  display: none !important;
}

/* --- SIDEBAR COMPONENTS --- */
.vl-panel-sidebar {
  width: var(--vl-sidebar-w);
  min-width: var(--vl-sidebar-w);
  flex-shrink: 0;
  background-color: var(--vl-paper);
  border-right: 1px solid var(--vl-line);
  display: flex;
  flex-direction: column;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 40;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.vl-panel-sidebar-header {
  height: var(--vl-panel-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--vl-line);
  flex-shrink: 0;
}

.vl-panel-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px;
}

.vl-panel-sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}
.vl-panel-sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(201, 163, 106, 0.25);
  border-radius: 4px;
}

.vl-panel-sidebar-footer {
  border-top: 1px solid var(--vl-line);
  padding: 12px 14px;
  background-color: var(--vl-paper);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- NAVIGATION ACCORDION & TREE --- */
.vl-sidebar-category-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--vl-gold-deep);
  text-transform: uppercase;
  padding: 14px 12px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vl-sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--vl-r-sm, 8px);
  font-size: 13px;
  font-weight: 500;
  color: var(--vl-ink);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  background: transparent;
  text-align: left;
}

.vl-sidebar-nav-item:hover {
  background-color: var(--vl-gold-soft);
  color: var(--vl-wine);
}

.vl-sidebar-nav-item.is-active {
  background-color: var(--vl-wine) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  border-color: var(--vl-wine-deep);
  box-shadow: 0 2px 8px rgba(77, 18, 45, 0.25);
}

.vl-sidebar-nav-item.is-active svg,
.vl-sidebar-nav-item.is-active i {
  color: var(--vl-gold) !important;
}

.vl-sidebar-nav-item .vl-nav-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--vl-muted);
  flex-shrink: 0;
}

.vl-sidebar-nav-item[aria-expanded="true"] .vl-nav-chevron {
  transform: rotate(90deg);
  color: var(--vl-gold);
}

.vl-nav-submenu {
  display: none;
  position: relative;
}

.vl-nav-submenu.is-open {
  display: block;
}

/* Indentation Guideline */
.vl-nav-submenu::before {
  content: '';
  position: absolute;
  left: calc(12px + var(--vl-nav-indent, 14px) * (var(--depth, 1) - 1) + 6px);
  top: 4px;
  bottom: 4px;
  width: 1px;
  background-color: var(--vl-line);
  opacity: 0.5;
}

/* --- ICON RAIL FLYOUT PANEL --- */
.vl-panel-flyout {
  position: fixed;
  left: 78px;
  width: 270px;
  background-color: var(--vl-paper, #FAF6F0);
  border: 1px solid var(--vl-line, rgba(201, 163, 106, 0.25));
  border-radius: var(--vl-r-card, 14px);
  box-shadow: 0 16px 40px -4px rgba(45, 12, 25, 0.18), 0 0 0 1px rgba(201, 163, 106, 0.2);
  padding: 12px;
  z-index: 1050;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  display: none;
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.vl-panel-flyout::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -14px;
  width: 14px;
  background: transparent;
}

.vl-panel-flyout.is-open {
  display: block !important;
  animation: vl-flyout-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.vl-panel-flyout::-webkit-scrollbar {
  width: 4px;
}
.vl-panel-flyout::-webkit-scrollbar-thumb {
  background-color: rgba(201, 163, 106, 0.35);
  border-radius: 4px;
}

.vl-panel-flyout .vl-flyout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--vl-line);
}

.vl-panel-flyout .vl-sidebar-text {
  display: inline-block !important;
  color: inherit !important;
}

.vl-panel-flyout .vl-nav-chevron {
  display: none !important;
}

.vl-panel-flyout .vl-sidebar-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: var(--vl-r-sm, 8px) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--vl-ink) !important;
  text-decoration: none !important;
  width: 100% !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}

.vl-panel-flyout .vl-sidebar-nav-item:hover {
  background-color: var(--vl-gold-soft) !important;
  color: var(--vl-wine) !important;
}

.vl-panel-flyout .vl-sidebar-nav-item.is-active {
  background-color: var(--vl-wine) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(77, 18, 45, 0.25) !important;
}

.vl-panel-flyout .vl-sidebar-nav-item.is-active i,
.vl-panel-flyout .vl-sidebar-nav-item.is-active svg {
  color: var(--vl-gold) !important;
}

.vl-panel-flyout .vl-nav-submenu {
  display: block !important;
  padding-left: 0 !important;
}

.vl-panel-flyout .vl-nav-submenu::before {
  display: none !important;
}

.vl-panel-flyout .vl-nav-subgroup {
  margin-top: 6px;
  margin-bottom: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--vl-line);
}

.vl-panel-flyout .vl-nav-subgroup > button.vl-sidebar-nav-item {
  font-weight: 700 !important;
  color: var(--vl-gold-deep) !important;
  background: transparent !important;
  padding: 4px 6px !important;
  cursor: default !important;
  pointer-events: none !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  min-height: auto !important;
}

.vl-panel-flyout .vl-nav-subgroup > button.vl-sidebar-nav-item .vl-nav-chevron {
  display: none !important;
}

.vl-panel-flyout .vl-nav-subgroup .vl-nav-submenu .vl-sidebar-nav-item {
  padding: 6px 10px 6px 18px !important;
  font-size: 12.5px !important;
}

/* --- TOP HORIZONTAL NAVIGATION & DYNAMIC OVERFLOW --- */
.vl-top-nav-container {
  display: none;
  flex: 1;
  align-items: center;
  min-width: 0;
  margin: 0 16px;
  position: relative;
  height: 100%;
}

.vl-top-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.vl-top-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vl-ink);
  text-decoration: none;
  border-radius: var(--vl-r-sm, 8px);
  position: relative;
  transition: all 0.15s ease;
  cursor: pointer;
  height: 40px;
}

.vl-top-nav-item:hover {
  background-color: var(--vl-gold-soft);
  color: var(--vl-wine);
}

.vl-top-nav-item.is-active,
.vl-top-nav-item.is-parent-active {
  color: var(--vl-wine) !important;
  font-weight: 600;
}

.vl-top-nav-item.is-active::after,
.vl-top-nav-item.is-parent-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 3px;
  background-color: var(--vl-gold);
  border-radius: 3px 3px 0 0;
}

.vl-top-overflow-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vl-gold-deep);
  border-radius: var(--vl-r-sm, 8px);
  cursor: pointer;
  transition: all 0.15s ease;
  height: 40px;
}

.vl-top-overflow-btn:hover {
  background-color: var(--vl-gold-soft);
  color: var(--vl-wine);
}

.vl-top-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background-color: var(--vl-paper);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-r-card, 14px);
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.25);
  padding: 12px;
  min-width: 260px;
  max-width: 480px;
  max-height: 75vh;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.vl-top-dropdown-menu.is-open {
  display: block;
  animation: vl-top-drop-in 0.15s ease;
}

@keyframes vl-top-drop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- MAIN CANVAS & TOPBAR --- */
.vl-panel-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100vh;
}

.vl-panel-topbar {
  height: var(--vl-panel-top);
  background-color: var(--vl-paper);
  border-bottom: 1px solid var(--vl-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 30;
  gap: 12px;
}

.vl-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  background-color: var(--vl-base);
}

/* --- MOBILE DRAWER (< 1024px) --- */
.vl-panel-drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(22, 6, 13, 0.65);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.vl-panel-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.vl-panel-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(340px, 85vw);
  background-color: var(--vl-paper);
  border-right: 1px solid var(--vl-line);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vl-panel-drawer.is-open {
  transform: translateX(0);
}

/* --- STRICT CARD RULES & SURFACE SEPARATION --- */
.vl-card,
.vl-panel-card {
  background-color: var(--vl-paper);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-r-card, 14px);
  padding: 20px;
  box-shadow: var(--vl-shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.vl-card-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Table Card: Hairline Dividers */
.vl-table-card {
  background-color: var(--vl-paper);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-r-card, 14px);
  overflow: hidden;
  box-shadow: var(--vl-shadow-sm);
  display: flex;
  flex-direction: column;
}

.vl-table-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--vl-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vl-table-card-toolbar {
  padding: 12px 20px;
  border-bottom: 1px solid var(--vl-line);
  background-color: var(--vl-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vl-table-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--vl-line);
  background-color: var(--vl-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Dark Mode Contrast Elevation */
html[data-mode="dark"] .vl-card,
html[data-mode="dark"] .vl-panel-card,
html[data-mode="dark"] .vl-table-card,
html[data-mode="dark"] .vl-panel-flyout,
html[data-mode="dark"] .vl-top-dropdown-menu,
html[data-mode="dark"] .vl-panel-drawer {
  background-color: #241018 !important;
  border-color: rgba(201, 163, 106, 0.28) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important;
}

html[data-mode="dark"] .vl-table-card-toolbar,
html[data-mode="dark"] .vl-table-card-footer {
  background-color: #1A0912 !important;
  border-color: rgba(201, 163, 106, 0.22) !important;
}

/* --- RESPONSIVE ADAPTATIONS --- */
@media (max-width: 1023.98px) {
  .vl-panel-sidebar {
    display: none !important;
  }
  .vl-top-nav-container {
    display: none !important;
  }
  .vl-panel-flyout {
    display: none !important;
  }
  .vl-mobile-hamburger {
    display: flex !important;
  }
  .vl-panel-content {
    padding: 16px;
  }
}

@media (min-width: 1024px) {
  .vl-mobile-hamburger {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .vl-responsive-grid {
    grid-template-columns: 1fr !important;
  }
  .vl-card {
    padding: 16px;
  }
}

@media (max-width: 374.98px) {
  .vl-header-desktop-actions {
    display: none !important;
  }
  .vl-header-mobile-overflow {
    display: flex !important;
  }
}

/* --------------------------------------------------------------------------
   2. CODE BLOCK & SHOWCASE CONTAINERS
   -------------------------------------------------------------------------- */
.vl-code-block {
  position: relative;
  background-color: #1F151B;
  color: #EBDAC9;
  border-radius: var(--vl-r-card, 12px);
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  border: 1px solid rgba(201, 163, 106, 0.3);
}

.vl-code-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.1);
  color: #C9A36A;
  border: 1px solid rgba(201, 163, 106, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.vl-code-copy-btn:hover {
  background-color: var(--vl-wine);
  color: #FFFFFF;
}

.vl-showcase-section {
  background-color: var(--vl-base-elevated, #FFFFFF);
  border-radius: var(--vl-r-card, 16px);
  border: 1px solid var(--vl-line);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(42, 18, 28, 0.04);
}

.vl-showcase-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--vl-wine);
  margin-bottom: 6px;
}

.vl-showcase-desc {
  font-size: 12px;
  color: var(--vl-muted);
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   3. DEVEXTREME-GRADE GRID ENGINE (.vl-grid-*)
   -------------------------------------------------------------------------- */
.vl-grid-wrapper {
  background-color: var(--vl-paper);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-r-card, 12px);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(42, 18, 28, 0.04);
  display: flex;
  flex-direction: column;
}

.vl-grid-toolbar {
  padding: 10px 16px;
  background-color: var(--vl-base-elevated);
  border-bottom: 1px solid var(--vl-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.vl-grid-search-input {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 30px !important;
  padding-right: 28px !important;
  line-height: 30px !important;
  background-color: var(--vl-paper) !important;
}

.vl-grid-search-input:focus {
  border-color: var(--vl-gold) !important;
  box-shadow: 0 0 0 2px rgba(201, 163, 106, 0.2) !important;
}

.vl-grid-table-container {
  overflow-x: auto;
  position: relative;
}

.vl-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.vl-grid-th {
  background-color: var(--vl-base-elevated);
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vl-wine);
  border-bottom: 1px solid var(--vl-line);
  user-select: none;
  white-space: nowrap;
  position: relative;
}

.vl-grid-th.is-sortable {
  cursor: pointer;
}

.vl-grid-th.is-sortable:hover {
  background-color: var(--vl-gold-soft);
}

.vl-grid-sort-icon {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--vl-gold);
  transition: transform 0.15s ease;
}

.vl-grid-filter-row {
  display: none !important;
}

.vl-grid-tr {
  border-bottom: 1px solid var(--vl-line);
  transition: background-color 0.1s ease;
}

.vl-grid-tr:hover {
  background-color: rgba(201, 163, 106, 0.06);
}

.vl-grid-tr.is-selected {
  background-color: rgba(77, 18, 45, 0.07) !important;
  border-left: 4px solid var(--vl-wine);
}

.vl-grid-td {
  padding: 10px 14px;
  color: var(--vl-ink);
  vertical-align: middle;
}

.vl-grid-footer {
  padding: 10px 16px;
  background-color: var(--vl-base-elevated);
  border-top: 1px solid var(--vl-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--vl-muted);
}

.vl-grid-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vl-grid-page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--vl-r-input, 6px);
  border: 1px solid var(--vl-line);
  background-color: var(--vl-paper);
  color: var(--vl-ink);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vl-grid-page-btn:hover:not(:disabled) {
  border-color: var(--vl-gold);
  color: var(--vl-wine);
}

.vl-grid-page-btn.is-active {
  background-color: var(--vl-wine);
  color: #FFFFFF;
  border-color: var(--vl-wine);
  font-weight: 700;
}

.vl-grid-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Responsive Cards Mode on Mobile */
@media (max-width: 768px) {
  .vl-grid-wrapper.is-mobile-cards .vl-grid-table,
  .vl-grid-wrapper.is-mobile-cards .vl-grid-table thead,
  .vl-grid-wrapper.is-mobile-cards .vl-grid-table tbody,
  .vl-grid-wrapper.is-mobile-cards .vl-grid-table tr,
  .vl-grid-wrapper.is-mobile-cards .vl-grid-table td {
    display: block;
    width: 100%;
  }
  .vl-grid-wrapper.is-mobile-cards thead {
    display: none;
  }
  .vl-grid-wrapper.is-mobile-cards .vl-grid-tr {
    margin: 12px;
    padding: 12px;
    border: 1px solid var(--vl-line);
    border-radius: var(--vl-r-card, 10px);
    background-color: var(--vl-paper);
  }
  .vl-grid-wrapper.is-mobile-cards .vl-grid-td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(232, 222, 210, 0.4);
  }
  .vl-grid-wrapper.is-mobile-cards .vl-grid-td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--vl-muted);
  }
}

/* --------------------------------------------------------------------------
   4. BESPOKE VELORA TOAST NOTIFICATIONS (.vl-ui-toast-*)
   -------------------------------------------------------------------------- */
.vl-ui-toast-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 400px;
  width: calc(100vw - 32px);
}

.vl-ui-toast-container.is-ne, .vl-ui-toast-container.is-top-right { top: 24px; right: 24px; }
.vl-ui-toast-container.is-nw, .vl-ui-toast-container.is-top-left { top: 24px; left: 24px; }
.vl-ui-toast-container.is-tc, .vl-ui-toast-container.is-top-center { top: 24px; left: 50%; transform: translateX(-50%); }
.vl-ui-toast-container.is-se, .vl-ui-toast-container.is-bottom-right { bottom: 24px; right: 24px; }
.vl-ui-toast-container.is-sw, .vl-ui-toast-container.is-bottom-left { bottom: 24px; left: 24px; }
.vl-ui-toast-container.is-bc, .vl-ui-toast-container.is-bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }

/* Tabler Font-Size Compatibility Classes */
.fs-1 { font-size: 2rem !important; }
.fs-2 { font-size: 1.5rem !important; }
.fs-3 { font-size: 1.25rem !important; }
.fs-4 { font-size: 1rem !important; }
.fs-5 { font-size: 0.875rem !important; }
.fs-6 { font-size: 0.75rem !important; }

.vl-ui-toast {
  position: relative;
  pointer-events: auto;
  background: #FFFFFF !important;
  border: 1px solid var(--vl-line, #E8DED2) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  box-shadow: 0 12px 32px -4px rgba(77, 18, 45, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: vlToastSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  overflow: hidden !important;
}

/* Left accent status bar */
.vl-ui-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
}

.vl-ui-toast.is-success::before {
  background-color: #10B981;
}
.vl-ui-toast.is-error::before,
.vl-ui-toast.is-danger::before {
  background-color: #E11D48;
}
.vl-ui-toast.is-warning::before {
  background-color: #F59E0B;
}
.vl-ui-toast.is-info::before {
  background-color: #0284C7;
}
.vl-ui-toast.is-vip::before,
.vl-ui-toast.is-gold::before,
.vl-ui-toast.is-wine::before {
  background-color: var(--vl-wine, #4D122D);
}

@keyframes vlToastSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Typography */
.vl-toast-title {
  color: var(--vl-ink, #2A121C) !important;
}
.vl-toast-msg {
  color: var(--vl-muted, #624B55) !important;
}

/* Close Button */
.vl-toast-close {
  color: #A8929D !important;
  cursor: pointer;
  border: none;
  background: transparent;
}
.vl-toast-close:hover {
  color: var(--vl-ink, #2A121C) !important;
  background-color: var(--vl-base, #FAF6F0) !important;
}

/* Animated Progress Bar */
.vl-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.5px;
  width: 100%;
  opacity: 0.65;
  animation: vlToastProgress linear forwards;
  transform-origin: left;
}

@keyframes vlToastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.vl-ui-toast.is-success .vl-toast-progress { background-color: #10B981; }
.vl-ui-toast.is-error .vl-toast-progress,
.vl-ui-toast.is-danger .vl-toast-progress { background-color: #E11D48; }
.vl-ui-toast.is-warning .vl-toast-progress { background-color: #F59E0B; }
.vl-ui-toast.is-info .vl-toast-progress { background-color: #0284C7; }
.vl-ui-toast.is-vip .vl-toast-progress,
.vl-ui-toast.is-gold .vl-toast-progress,
.vl-ui-toast.is-wine .vl-toast-progress { background-color: var(--vl-gold, #C9A36A); }

/* Dark Mode */
html[data-mode="dark"] .vl-ui-toast {
  background: #241018 !important;
  border-color: rgba(201, 163, 106, 0.25) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
}
html[data-mode="dark"] .vl-toast-title {
  color: #f3e6d4 !important;
}
html[data-mode="dark"] .vl-toast-msg {
  color: #bba5b0 !important;
}
html[data-mode="dark"] .vl-toast-close {
  color: #bba5b0 !important;
}
html[data-mode="dark"] .vl-toast-close:hover {
  color: #f3e6d4 !important;
  background-color: #180811 !important;
}

/* --------------------------------------------------------------------------
   5. CONFIRM DIALOG (.vl-ui-confirm-*)
   -------------------------------------------------------------------------- */
.vl-ui-confirm-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(42, 18, 28, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: vlFadeIn 0.2s ease;
}

.vl-ui-confirm-modal {
  position: relative;
  background-color: var(--vl-paper, #FAF6F0);
  border-radius: var(--vl-r-card, 16px);
  border: 1px solid var(--vl-line, #E8DED2);
  box-shadow: 0 20px 50px rgba(42, 18, 28, 0.3);
  max-width: 440px;
  width: 100%;
  padding: 24px;
  animation: vlScaleUp 0.2s ease;
}

.vl-ui-confirm-modal h3,
.vl-ui-confirm-modal .vl-modal-title {
  color: #4D122D !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
}

[data-mode="dark"] .vl-ui-confirm-modal h3,
[data-mode="dark"] .vl-ui-confirm-modal .vl-modal-title {
  color: #E8A5B8 !important;
}

[data-mode="dark"] .vl-ui-confirm-modal {
  background-color: var(--vl-card-bg, #1a1017);
  border-color: var(--vl-line, rgba(201, 163, 106, 0.2));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  color: #FAF6F0;
}

[data-mode="dark"] .vl-ui-confirm-modal p {
  color: rgba(250, 246, 240, 0.9) !important;
}

[data-mode="dark"] .vl-ui-confirm-modal .vl-btn-cancel {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #E8A5B8 !important;
  border-color: rgba(232, 165, 184, 0.2) !important;
}

@keyframes vlFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vlScaleUp { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* --------------------------------------------------------------------------
   6. DROPZONE UPLOADER (.vl-ui-dropzone-*)
   -------------------------------------------------------------------------- */
.vl-ui-dropzone {
  border: 2px dashed rgba(201, 163, 106, 0.6);
  background-color: var(--vl-base);
  border-radius: var(--vl-r-card, 14px);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vl-ui-dropzone:hover, .vl-ui-dropzone.is-dragover {
  border-color: var(--vl-wine);
  background-color: var(--vl-gold-soft);
}

.vl-ui-dropzone-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--vl-r-input, 8px);
  background-color: var(--vl-paper);
  border: 1px solid var(--vl-line);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   7. DUAL-HANDLE RANGE SLIDER (.vl-ui-range-*)
   -------------------------------------------------------------------------- */
.vl-ui-range-slider {
  position: relative;
  height: 6px;
  background-color: var(--vl-line);
  border-radius: 3px;
  margin: 20px 0;
}

.vl-ui-range-track {
  position: absolute;
  height: 100%;
  background-color: var(--vl-wine);
  border-radius: 3px;
}

.vl-ui-range-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 2px solid var(--vl-wine);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
}

.vl-ui-range-thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 0 4px rgba(77, 18, 45, 0.2);
}

/* --------------------------------------------------------------------------
   8. SKELETON SHIMMER LOADERS (.vl-ui-skeleton-*)
   -------------------------------------------------------------------------- */
.vl-ui-skeleton {
  background: linear-gradient(90deg, rgba(232, 222, 210, 0.3) 25%, rgba(232, 222, 210, 0.6) 37%, rgba(232, 222, 210, 0.3) 63%);
  background-size: 400% 100%;
  animation: vlShimmer 1.4s ease infinite;
  border-radius: var(--vl-r-input, 6px);
}

@keyframes vlShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* --------------------------------------------------------------------------
   9. KANBAN TASK BOARD (.vl-ui-kanban-*)
   -------------------------------------------------------------------------- */
.vl-ui-kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  min-height: 480px;
}

@media (max-width: 768px) {
  .vl-ui-kanban-board {
    grid-template-columns: 1fr;
  }
}

.vl-ui-kanban-col {
  background-color: var(--vl-paper);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-r-card, 12px);
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.vl-ui-kanban-card {
  background-color: var(--vl-base-elevated, #FFFFFF);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-r-input, 8px);
  padding: 12px;
  margin-bottom: 8px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vl-ui-kanban-card:active {
  cursor: grabbing;
  transform: rotate(2deg);
  box-shadow: 0 6px 16px rgba(42, 18, 28, 0.15);
}

.vl-ui-kanban-card.is-dragging {
  opacity: 0.4;
}

.vl-ui-kanban-col.is-drag-over {
  background-color: var(--vl-gold-soft);
  border-color: var(--vl-gold);
}


/* Phase 8: Panel Mega Dropdown */
@media (min-width: 1024px) {
  .vl-drop.vl-drop-panel-mega {
    right: -30px;
    left: auto;
    width: 680px;
    max-width: calc(100vw - 40px);
  }
}


/* ==========================================================================
   PHASE 8 ENHANCEMENTS: CALENDAR & MODAL FIXES
   ========================================================================== */
.vl-cal-workspace, 
.vl-cal-layout {
  display: flex !important;
  flex: 1 !important;
  width: 100% !important;
  height: calc(100vh - 56px) !important;
  max-height: calc(100vh - 56px) !important;
  overflow: hidden !important;
  position: relative !important;
}

.vl-cal-modal-backdrop.is-open,
.vl-cal-modal-backdrop.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.vl-cal-modal-backdrop.is-open .vl-cal-modal-container,
.vl-cal-modal-backdrop.active .vl-cal-modal-container,
.vl-cal-modal-backdrop.is-open .vl-cal-modal-panel,
.vl-cal-modal-backdrop.active .vl-cal-modal-panel {
  transform: translateY(0) scale(1) !important;
}

.vl-cal-modal-panel {
  width: 100%;
  max-width: 960px;
  height: auto !important;
  max-height: 85vh !important;
  background-color: var(--vl-paper, #FAF6F0);
  border-radius: var(--vl-radius-md, 8px) !important;
  border: 1px solid var(--vl-gold, #C9A36A);
  box-shadow: 0 25px 50px -12px rgba(42, 18, 28, 0.45);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.vl-cal-modal-header,
.vl-cal-modal-nav,
.vl-cal-modal-footer {
  flex-shrink: 0 !important;
}

.vl-cal-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(85vh - 130px) !important;
  overflow-y: auto !important;
  padding: 18px !important;
}

/* Offcanvas Drawers */
/* ==========================================================================
   OFFCANVAS & DRAWERS SYSTEM (.vl-offcanvas, .vl-drawer)
   Full-screen viewport coverage, z-index 1050+, blur backdrop, and smooth transitions
   ========================================================================== */
.vl-offcanvas,
.vl-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1050 !important;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vl-offcanvas.is-open,
.vl-offcanvas.open,
.vl-drawer.is-open,
.vl-drawer.open {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Fullscreen Backdrop starting strictly at (0, 0) covering everything */
.vl-offcanvas-backdrop,
.vl-drawer-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(22, 6, 13, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1040 !important;
}

.vl-offcanvas.is-open .vl-offcanvas-backdrop,
.vl-offcanvas.open .vl-offcanvas-backdrop,
.vl-drawer.is-open .vl-drawer-backdrop,
.vl-drawer.open .vl-drawer-backdrop {
  opacity: 1 !important;
}

/* Drawer Sliding Panel */
.vl-offcanvas-panel,
.vl-drawer-panel {
  position: fixed !important;
  z-index: 1050 !important;
  background-color: var(--vl-paper, #FFFFFF);
  color: var(--vl-ink, #2A121C);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* Right Drawer */
.vl-offcanvas-right .vl-offcanvas-panel,
.vl-drawer-right .vl-drawer-panel {
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 440px;
  max-width: 92vw;
  height: 100vh !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  border-left: 1px solid var(--vl-line, #E8DED2);
}

/* Left Drawer */
.vl-offcanvas-left .vl-offcanvas-panel,
.vl-drawer-left .vl-drawer-panel {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 380px;
  max-width: 92vw;
  height: 100vh !important;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.25);
  transform: translateX(-100%);
  border-right: 1px solid var(--vl-line, #E8DED2);
}

/* Bottom Sheet Drawer */
.vl-offcanvas-bottom .vl-offcanvas-panel,
.vl-drawer-bottom .vl-drawer-panel {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: auto !important;
  max-height: 85vh !important;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
  border-top: 1px solid var(--vl-line, #E8DED2);
}

/* Wide Right Drawer */
.vl-offcanvas-wide .vl-offcanvas-panel,
.vl-drawer-wide .vl-drawer-panel {
  width: 680px !important;
  max-width: 95vw !important;
}

/* Open states */
.vl-offcanvas.is-open .vl-offcanvas-panel,
.vl-offcanvas.open .vl-offcanvas-panel,
.vl-drawer.is-open .vl-drawer-panel,
.vl-drawer.open .vl-drawer-panel {
  transform: none !important;
}

/* Dark Mode Support for Drawers */
html[data-mode="dark"] .vl-offcanvas-panel,
html[data-mode="dark"] .vl-drawer-panel {
  background-color: #200E16 !important;
  color: #FAF6F0 !important;
  border-color: rgba(201, 163, 106, 0.25) !important;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.6) !important;
}
html[data-mode="dark"] .vl-offcanvas-left .vl-offcanvas-panel,
html[data-mode="dark"] .vl-drawer-left .vl-drawer-panel {
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.6) !important;
}
html[data-mode="dark"] .vl-offcanvas-bottom .vl-offcanvas-panel,
html[data-mode="dark"] .vl-drawer-bottom .vl-drawer-panel {
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.6) !important;
}

/* Global full-screen modal backdrop fix */
.vl-modal-backdrop-fixed {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1050 !important;
  background-color: rgba(42, 18, 28, 0.55) !important;
  backdrop-filter: blur(4px) !important;
}


/* ==========================================================================
   VELORA CALENDAR ENGINE (PHASE 9 CURATED STYLES)
   ========================================================================== */
.vl-cal-workspace {
  display: flex !important;
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Modal Tab Panes - Essential Tab Switching */
.vl-cal-modal-pane {
  display: none !important;
}
.vl-cal-modal-pane.is-active {
  display: block !important;
}

/* Modal Nav Tabs */
.vl-cal-modal-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-bottom: 1px solid var(--vl-line, #E8DED2) !important;
  padding: 0 16px !important;
  background-color: var(--vl-ivory, #F7F1EA) !important;
  overflow-x: auto !important;
}

.vl-cal-modal-nav-btn {
  padding: 11px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--vl-muted, #624B55) !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.vl-cal-modal-nav-btn:hover {
  color: var(--vl-wine, #4D122D) !important;
}

.vl-cal-modal-nav-btn.is-active {
  color: var(--vl-wine, #4D122D) !important;
  border-bottom-color: var(--vl-wine, #4D122D) !important;
  font-weight: 700 !important;
}

/* View Selector (Day, Week, Month) Segmented Control */
.vl-cal-view-selector {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px !important;
  background: var(--vl-ivory, #F7F1EA) !important;
  border: 1px solid var(--vl-line, #E8DED2) !important;
  border-radius: var(--vl-radius-lg, 12px) !important;
  gap: 2px !important;
}

.vl-cal-view-btn {
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--vl-muted, #624B55) !important;
  border-radius: var(--vl-radius-md, 8px) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
}

.vl-cal-view-btn:hover {
  color: var(--vl-ink, #2A121C) !important;
}

.vl-cal-view-btn.is-active {
  background: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(77, 18, 45, 0.2) !important;
}

/* Add Appointment Button */
.vl-cal-btn-add {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--vl-gold, #C9A36A) !important;
  background-color: var(--vl-wine, #4D122D) !important;
  border-radius: var(--vl-radius-xl, 14px) !important;
  border: 1px solid rgba(201, 163, 106, 0.3) !important;
  box-shadow: 0 2px 4px rgba(77, 18, 45, 0.15) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.vl-cal-btn-add:hover {
  background-color: var(--vl-wine-deep, #3B0E23) !important;
  box-shadow: 0 4px 8px rgba(77, 18, 45, 0.25) !important;
  transform: translateY(-0.5px) !important;
}

/* Appointment Cards in Grid - Fixed White Background #FFFFFF & #E2D3C4 Border like is-status-approved, Status on Left Border Only */
.vl-cal-card {
  position: absolute !important;
  background-color: #FFFFFF !important;
  border-radius: 0 !important;
  border: 1px solid #E2D3C4 !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  border-left-color: var(--vl-wine, #4D122D) !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
  box-shadow: 0 1px 4px rgba(42, 18, 28, 0.05) !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

.vl-cal-card:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(42, 18, 28, 0.12) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
  z-index: 25 !important;
}

.vl-cal-card:active,
.vl-cal-card.is-selected {
  outline: 2px solid var(--vl-gold, #C9A36A) !important;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.3) !important;
}

/* Status variants for cards: Fixed #FFFFFF background, #E2D3C4 border, ONLY left border reflects status */
.vl-cal-card.is-status-approved, .vl-cal-card--approved {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: var(--vl-wine, #4D122D) !important;
}
.vl-cal-card.is-status-in_progress,
.vl-cal-card.is-status-operating,
.vl-cal-card--operating {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #F59E0B !important;
}
.vl-cal-card.is-status-completed, .vl-cal-card--completed {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #10B981 !important;
}
.vl-cal-card.is-status-planned, .vl-cal-card--planned {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #3B82F6 !important;
}
.vl-cal-card.is-status-request, .vl-cal-card--request {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #8B5CF6 !important;
}
.vl-cal-card.is-status-cancelled, .vl-cal-card--cancelled {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #EF4444 !important;
  opacity: 0.65 !important;
}

/* Month View Pills - Sharp, High-Contrast Text (legible in light/dark), Left Border Status */
.vl-cal-month-pill {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background-color: var(--vl-paper, #FAF6F0) !important;
  color: var(--vl-ink, #2A121C) !important;
  border: 1px solid var(--vl-line, #E8DED2) !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
  border-left-color: var(--vl-wine, #4D122D) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.vl-cal-month-pill:hover {
  background-color: var(--vl-base, #FFFFFF) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06) !important;
}
.vl-cal-month-pill.is-status-approved { border-left-color: var(--vl-wine, #4D122D) !important; }
.vl-cal-month-pill.is-status-in_progress,
.vl-cal-month-pill.is-status-operating { border-left-color: #F59E0B !important; }
.vl-cal-month-pill.is-status-completed { border-left-color: #10B981 !important; }
.vl-cal-month-pill.is-status-planned { border-left-color: #3B82F6 !important; }
.vl-cal-month-pill.is-status-request { border-left-color: #8B5CF6 !important; }
.vl-cal-month-pill.is-status-cancelled { border-left-color: #EF4444 !important; }
.vl-cal-pill-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.vl-cal-pill-dot.is-status-approved { background-color: var(--vl-wine, #4D122D) !important; }
.vl-cal-pill-dot.is-status-in_progress,
.vl-cal-pill-dot.is-status-operating { background-color: #F59E0B !important; }
.vl-cal-pill-dot.is-status-completed { background-color: #10B981 !important; }
.vl-cal-pill-dot.is-status-planned { background-color: #3B82F6 !important; }
.vl-cal-pill-dot.is-status-request { background-color: #8B5CF6 !important; }
.vl-cal-pill-dot.is-status-cancelled { background-color: #EF4444 !important; }

/* Sidebar Tabs & Cards - Subtle Sharp/Clean Geometry (not overly rounded) */
.vl-cal-sidebar-tabs {
  display: flex !important;
  border-bottom: 2px solid var(--vl-line, #E8DED2) !important;
  background: var(--vl-ivory, #F7F1EA) !important;
}
.vl-cal-sidebar-tab {
  flex: 1 !important;
  padding: 10px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: var(--vl-muted, #624B55) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.vl-cal-sidebar-tab.is-active {
  color: var(--vl-wine, #4D122D) !important;
  border-bottom-color: var(--vl-wine, #4D122D) !important;
  font-weight: 700 !important;
}

.vl-cal-sidebar-card {
  padding: 10px 12px !important;
  border-radius: 0 !important;
  background: var(--vl-paper, #FAF6F0) !important;
  border: 1px solid var(--vl-line, #E8DED2) !important;
  border-left-width: 3px !important;
  border-left-color: var(--vl-wine, #4D122D) !important;
  margin-bottom: 8px !important;
  transition: all 0.15s ease !important;
}
.vl-cal-sidebar-card:hover {
  border-color: var(--vl-gold, #C9A36A) !important;
  box-shadow: 0 3px 8px rgba(42,18,28,0.08) !important;
  transform: translateY(-1px) !important;
}

.vl-cal-request-card {
  padding: 12px !important;
  border-radius: 0 !important;
  background: var(--vl-paper, #FAF6F0) !important;
  border: 1px solid var(--vl-line, #E8DED2) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  border-left: 4px solid #F59E0B !important;
}

/* Sidebar action buttons */
.vl-cal-btn-place {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.vl-cal-btn-place:hover {
  background-color: var(--vl-wine-deep, #3B0E23) !important;
  color: white !important;
}

.vl-cal-btn-reject {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background-color: transparent !important;
  color: #DC2626 !important;
  border: 1px solid #FECDD3 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.vl-cal-btn-reject:hover {
  background-color: #FEF2F2 !important;
  border-color: #F87171 !important;
}

/* Flag cards */
.vl-cal-flag-card {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 4px !important;
  background-color: var(--vl-paper, #FAF6F0) !important;
  border: 1.5px solid var(--vl-line, #E8DED2) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.vl-cal-flag-card:hover {
  border-color: var(--vl-gold, #C9A36A) !important;
}
.vl-cal-flag-card.is-selected {
  border-color: var(--vl-wine, #4D122D) !important;
  background-color: #FFFDF9 !important;
  box-shadow: 0 0 0 2px rgba(77, 18, 45, 0.12) !important;
}

/* Dark mode enhancements for calendar */
[data-mode="dark"] .vl-cal-card {
  background-color: var(--vl-paper, #250F1A) !important;
  border-color: var(--vl-line, #3D1E28) !important;
  color: var(--vl-ink, #F7F1EA) !important;
}
[data-mode="dark"] .vl-cal-month-pill {
  background-color: var(--vl-paper, #250F1A) !important;
  border-color: var(--vl-line, #3D1E28) !important;
  color: var(--vl-ink, #F7F1EA) !important;
}
[data-mode="dark"] .vl-cal-sidebar-card,
[data-mode="dark"] .vl-cal-request-card {
  background-color: var(--vl-paper, #250F1A) !important;
  border-color: var(--vl-line, #3D1E28) !important;
  color: var(--vl-ink, #F7F1EA) !important;
}
[data-mode="dark"] .vl-cal-flag-card {
  background-color: var(--vl-paper, #250F1A) !important;
  border-color: var(--vl-line, #3D1E28) !important;
}

/* ==========================================================================
   Velora UI - Tabs Component (.vl-tabs)
   ========================================================================== */
.vl-tabs {
  display: block;
  width: 100%;
}

.vl-tabs-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 1. Underline Style */
.vl-tabs-underline .vl-tabs-nav {
  border-bottom: 1px solid var(--vl-line, #E8DED2);
  gap: 1.5rem;
}
.vl-tabs-underline .vl-tab-btn {
  position: relative;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vl-muted, #624B55);
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}
.vl-tabs-underline .vl-tab-btn:hover {
  color: var(--vl-wine, #4D122D);
}
.vl-tabs-underline .vl-tab-btn.is-active,
.vl-tabs-underline .vl-tab-btn.active {
  color: var(--vl-wine, #4D122D);
  border-bottom-color: var(--vl-gold, #C9A36A);
}

/* 2. Pill Style */
.vl-tabs-pill .vl-tabs-nav {
  gap: 0.5rem;
}
.vl-tabs-pill .vl-tab-btn,
.vl-tabs-pill .tab-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vl-muted, #624B55);
  background-color: var(--vl-paper, #FAF6F0);
  border: 1px solid var(--vl-line, #E8DED2);
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.vl-tabs-pill .vl-tab-btn:hover,
.vl-tabs-pill .tab-btn:hover {
  color: var(--vl-wine, #4D122D);
  border-color: var(--vl-gold, #C9A36A);
}
.vl-tabs-pill .vl-tab-btn.is-active,
.vl-tabs-pill .vl-tab-btn.active,
.vl-tabs-pill .tab-btn.is-active,
.vl-tabs-pill .tab-btn.active {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
  border-color: var(--vl-wine, #4D122D) !important;
  box-shadow: 0 1px 3px rgba(77, 18, 45, 0.2) !important;
}
/* Hover Protection: Active Pill Tab MUST keep gold text on hover */
.vl-tabs-pill .vl-tab-btn.is-active:hover,
.vl-tabs-pill .vl-tab-btn.active:hover,
.vl-tabs-pill .tab-btn.is-active:hover,
.vl-tabs-pill .tab-btn.active:hover {
  color: var(--vl-gold, #C9A36A) !important;
  background-color: var(--vl-wine, #4D122D) !important;
  border-color: var(--vl-wine, #4D122D) !important;
}

/* 3. Capsule / Segmented Style */
.vl-tabs-segmented .vl-tabs-nav {
  display: inline-flex;
  padding: 0.25rem;
  background-color: var(--vl-paper, #FAF6F0);
  border: 1px solid var(--vl-line, #E8DED2);
  border-radius: 9999px;
  gap: 0.25rem;
}
.vl-tabs-segmented .vl-tab-btn,
.vl-tabs-segmented .tab-btn {
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vl-muted, #624B55);
  background: transparent;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.vl-tabs-segmented .vl-tab-btn:hover,
.vl-tabs-segmented .tab-btn:hover {
  color: var(--vl-wine, #4D122D);
}
.vl-tabs-segmented .vl-tab-btn.is-active,
.vl-tabs-segmented .vl-tab-btn.active,
.vl-tabs-segmented .tab-btn.is-active,
.vl-tabs-segmented .tab-btn.active {
  background-color: var(--vl-card-bg, #FFFFFF) !important;
  color: var(--vl-wine, #4D122D) !important;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 4. Card / Boxed Style (Klasör & Kart Sekmeleri) */
.vl-tabs-card .vl-tabs-nav {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  border-bottom: 1px solid var(--vl-line, #E8DED2);
  position: relative;
  padding-top: 4px;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.vl-tabs-card .vl-tabs-nav::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}
.vl-tabs-card .vl-tabs-nav > li {
  display: flex !important;
  align-items: flex-end !important;
  flex-shrink: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vl-tabs-card .vl-tab-btn,
.vl-tabs-card .tab-btn {
  padding: 0.625rem 1.25rem;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vl-muted, #624B55);
  background-color: var(--vl-paper, #FAF6F0);
  border: 1px solid var(--vl-line, #E8DED2);
  border-bottom: 1px solid var(--vl-line, #E8DED2);
  margin-bottom: -1px;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
  text-decoration: none;
}
.vl-tabs-card .vl-tab-btn:hover,
.vl-tabs-card .tab-btn:hover {
  color: var(--vl-wine, #4D122D);
  background-color: var(--vl-blush, #F4E8E1);
  border-color: var(--vl-line, #E8DED2);
  border-bottom-color: var(--vl-line, #E8DED2);
}
/* Active Card Tab: Background WINE, Color GOLD, Border WINE, Bottom Border WINE */
.vl-tabs-card .vl-tab-btn.is-active,
.vl-tabs-card .vl-tab-btn.active,
.vl-tabs-card .tab-btn.is-active,
.vl-tabs-card .tab-btn.active {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
  border-color: var(--vl-wine, #4D122D) !important;
  border-bottom-color: var(--vl-wine, #4D122D) !important;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 -1px 3px rgba(77, 18, 45, 0.15), 0 2px 4px rgba(77, 18, 45, 0.2) !important;
}
/* Hover Protection: Active Card Tab MUST keep gold text on hover */
.vl-tabs-card .vl-tab-btn.is-active:hover,
.vl-tabs-card .vl-tab-btn.active:hover,
.vl-tabs-card .tab-btn.is-active:hover,
.vl-tabs-card .tab-btn.active:hover {
  color: var(--vl-gold, #C9A36A) !important;
  background-color: var(--vl-wine, #4D122D) !important;
  border-color: var(--vl-wine, #4D122D) !important;
  border-bottom-color: var(--vl-wine, #4D122D) !important;
}

/* 5. Vertical Style */
.vl-tabs-vertical .vl-tab-btn,
.vl-tabs-vertical .tab-btn {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vl-muted, #624B55);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.vl-tabs-vertical .vl-tab-btn:hover,
.vl-tabs-vertical .tab-btn:hover {
  background-color: var(--vl-paper, #FAF6F0);
  color: var(--vl-wine, #4D122D);
}
.vl-tabs-vertical .vl-tab-btn.is-active,
.vl-tabs-vertical .vl-tab-btn.active,
.vl-tabs-vertical .tab-btn.is-active,
.vl-tabs-vertical .tab-btn.active {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
  border-color: var(--vl-wine, #4D122D) !important;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(77, 18, 45, 0.2) !important;
}
.vl-tabs-vertical .vl-tab-btn.is-active:hover,
.vl-tabs-vertical .vl-tab-btn.active:hover,
.vl-tabs-vertical .tab-btn.is-active:hover,
.vl-tabs-vertical .tab-btn.active:hover {
  color: var(--vl-gold, #C9A36A) !important;
  background-color: var(--vl-wine, #4D122D) !important;
}

/* Universal Active Tab Hover Protection - Active tab text must stay gold on hover */
.tab-btn.is-active:hover,
.tab-btn.active:hover,
.vl-tab-btn.is-active:hover,
.vl-tab-btn.active:hover,
button.tab-btn.is-active:hover,
a.tab-btn.is-active:hover,
button.tab-btn.active:hover,
a.tab-btn.active:hover {
  color: var(--vl-gold, #C9A36A) !important;
}

/* Dark Mode Overrides for Tabs */
[data-mode="dark"] .vl-tabs-underline .vl-tab-btn.is-active,
[data-mode="dark"] .vl-tabs-underline .vl-tab-btn.active,
[data-mode="dark"] .vl-tabs-underline .tab-btn.is-active,
[data-mode="dark"] .vl-tabs-underline .tab-btn.active {
  color: var(--vl-gold, #C9A36A) !important;
  border-bottom-color: var(--vl-gold, #C9A36A) !important;
}
[data-mode="dark"] .vl-tabs-pill .vl-tab-btn,
[data-mode="dark"] .vl-tabs-pill .tab-btn {
  background-color: var(--vl-card-bg, #1F1018);
  border-color: var(--vl-line, #3D2230);
  color: var(--vl-muted, #BFA8B2);
}
[data-mode="dark"] .vl-tabs-pill .vl-tab-btn.is-active,
[data-mode="dark"] .vl-tabs-pill .vl-tab-btn.active,
[data-mode="dark"] .vl-tabs-pill .tab-btn.is-active,
[data-mode="dark"] .vl-tabs-pill .tab-btn.active {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
}
[data-mode="dark"] .vl-tabs-pill .vl-tab-btn.is-active:hover,
[data-mode="dark"] .vl-tabs-pill .vl-tab-btn.active:hover,
[data-mode="dark"] .vl-tabs-pill .tab-btn.is-active:hover,
[data-mode="dark"] .vl-tabs-pill .tab-btn.active:hover {
  color: var(--vl-gold, #C9A36A) !important;
  background-color: var(--vl-wine, #4D122D) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
}
[data-mode="dark"] .vl-tabs-segmented .vl-tabs-nav {
  background-color: var(--vl-card-bg, #1F1018);
  border-color: var(--vl-line, #3D2230);
}
[data-mode="dark"] .vl-tabs-segmented .vl-tab-btn,
[data-mode="dark"] .vl-tabs-segmented .tab-btn {
  color: var(--vl-muted, #BFA8B2);
}
[data-mode="dark"] .vl-tabs-segmented .vl-tab-btn.is-active,
[data-mode="dark"] .vl-tabs-segmented .vl-tab-btn.active,
[data-mode="dark"] .vl-tabs-segmented .tab-btn.is-active,
[data-mode="dark"] .vl-tabs-segmented .tab-btn.active {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
}
[data-mode="dark"] .vl-tabs-card .vl-tabs-nav {
  border-bottom-color: var(--vl-line, #3D2230);
}
[data-mode="dark"] .vl-tabs-card .vl-tab-btn,
[data-mode="dark"] .vl-tabs-card .tab-btn {
  background-color: var(--vl-paper, #160B10);
  color: var(--vl-muted, #BFA8B2);
  border-color: var(--vl-line, #3D2230);
  border-bottom-color: var(--vl-line, #3D2230);
}
[data-mode="dark"] .vl-tabs-card .vl-tab-btn:hover,
[data-mode="dark"] .vl-tabs-card .tab-btn:hover {
  background-color: var(--vl-card-bg, #1F1018);
  color: var(--vl-gold, #C9A36A);
  border-color: var(--vl-line, #3D2230);
  border-bottom-color: var(--vl-line, #3D2230);
}
[data-mode="dark"] .vl-tabs-card .vl-tab-btn.is-active,
[data-mode="dark"] .vl-tabs-card .vl-tab-btn.active,
[data-mode="dark"] .vl-tabs-card .tab-btn.is-active,
[data-mode="dark"] .vl-tabs-card .tab-btn.active {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
  border-bottom-color: var(--vl-gold, #C9A36A) !important;
}
[data-mode="dark"] .vl-tabs-card .vl-tab-btn.is-active:hover,
[data-mode="dark"] .vl-tabs-card .vl-tab-btn.active:hover,
[data-mode="dark"] .vl-tabs-card .tab-btn.is-active:hover,
[data-mode="dark"] .vl-tabs-card .tab-btn.active:hover {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
  border-bottom-color: var(--vl-gold, #C9A36A) !important;
}
[data-mode="dark"] .vl-tabs-vertical .vl-tab-btn:hover,
[data-mode="dark"] .vl-tabs-vertical .tab-btn:hover {
  background-color: var(--vl-paper, #160B10);
  color: var(--vl-ink, #FDF9F4);
}
[data-mode="dark"] .vl-tabs-vertical .vl-tab-btn.is-active,
[data-mode="dark"] .vl-tabs-vertical .vl-tab-btn.active,
[data-mode="dark"] .vl-tabs-vertical .tab-btn.is-active,
[data-mode="dark"] .vl-tabs-vertical .tab-btn.active {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
}
[data-mode="dark"] .vl-tabs-vertical .vl-tab-btn.is-active:hover,
[data-mode="dark"] .vl-tabs-vertical .vl-tab-btn.active:hover,
[data-mode="dark"] .vl-tabs-vertical .tab-btn.is-active:hover,
[data-mode="dark"] .vl-tabs-vertical .tab-btn.active:hover {
  background-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
}

/* ==========================================================================
   Velora UI - Sliding Pill Toggle / Segmented Control (.vl-pill-toggle)
   Smooth gliding animated pill indicator with luxury wine bg & gold text
   ========================================================================== */
.vl-pill-toggle {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 0.75rem;
  background-color: var(--vl-surface, #FAF6F0);
  border: 1px solid var(--vl-line, #E8DED2);
  gap: 4px;
  user-select: none;
  box-sizing: border-box;
  overflow: hidden;
}

.vl-pill-toggle .vl-pill-glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 12px) / 2);
  border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--vl-wine, #4D122D) 0%, #350A1E 100%);
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12);
  pointer-events-none;
  z-index: 1;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.34, 1.25, 0.64, 1);
  will-change: transform;
}

/* Slide to second item when second radio is checked */
.vl-pill-toggle:has(.vl-pill-item:nth-of-type(2) input:checked) .vl-pill-glider,
.vl-pill-toggle.is-item-2 .vl-pill-glider {
  transform: translateX(calc(100% + 4px));
}

.vl-pill-toggle:has(.vl-pill-item:nth-of-type(1) input:checked) .vl-pill-glider,
.vl-pill-toggle.is-item-1 .vl-pill-glider {
  transform: translateX(0);
}

.vl-pill-toggle .vl-pill-item {
  position: relative;
  z-index: 2;
  flex: 1 1 0%;
  margin: 0 !important;
  text-align: center;
  cursor: pointer;
  border-radius: 0.5rem;
}

.vl-pill-toggle .vl-pill-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vl-muted, #624B55);
  border-radius: 0.5rem;
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), font-weight 0.25s ease;
}

.vl-pill-toggle .vl-pill-item:hover span {
  color: var(--vl-ink, #2A121C);
}

/* Active / Checked State: Luxury Wine & Gold */
.vl-pill-toggle .vl-pill-item input:checked ~ span,
.vl-pill-toggle .vl-pill-item:has(input:checked) span,
.vl-pill-toggle .vl-pill-item.is-active,
.vl-pill-toggle .vl-pill-item.is-active span {
  color: var(--vl-gold, #C9A36A) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.vl-pill-toggle .vl-pill-item input:checked ~ span i,
.vl-pill-toggle .vl-pill-item:has(input:checked) span i,
.vl-pill-toggle .vl-pill-item.is-active i {
  color: var(--vl-gold, #C9A36A) !important;
  filter: drop-shadow(0 0 1px rgba(201, 163, 106, 0.4));
}

.vl-pill-toggle .vl-pill-item input:focus-visible ~ span {
  outline: 2px solid var(--vl-gold, #C9A36A);
  outline-offset: 1px;
}

[data-mode="dark"] .vl-pill-toggle {
  background-color: var(--vl-card-bg, #1F1018);
  border-color: var(--vl-line, #3D2230);
}

[data-mode="dark"] .vl-pill-toggle .vl-pill-glider {
  background: linear-gradient(135deg, #6A1A3F 0%, #4D122D 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

[data-mode="dark"] .vl-pill-toggle .vl-pill-item span {
  color: var(--vl-muted, #BFA8B2);
}

[data-mode="dark"] .vl-pill-toggle .vl-pill-item:hover span {
  color: #FFFFFF;
}

[data-mode="dark"] .vl-pill-toggle .vl-pill-item input:checked ~ span,
[data-mode="dark"] .vl-pill-toggle .vl-pill-item:has(input:checked) span,
[data-mode="dark"] .vl-pill-toggle .vl-pill-item.is-active,
[data-mode="dark"] .vl-pill-toggle .vl-pill-item.is-active span {
  color: var(--vl-gold, #C9A36A) !important;
}

/* Inflow Variant: Gelir (Emerald) / Gider (Rose) */
.vl-pill-toggle-inflow .vl-pill-glider {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.25, 0.64, 1), background 0.25s ease, box-shadow 0.25s ease !important;
}

.vl-pill-toggle-inflow:has(.vl-pill-item:nth-of-type(2) input:checked) .vl-pill-glider,
.vl-pill-toggle-inflow.is-item-2 .vl-pill-glider {
  background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%) !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.4) !important;
}

.vl-pill-toggle-inflow .vl-pill-item input:checked ~ span,
.vl-pill-toggle-inflow .vl-pill-item:has(input:checked) span,
.vl-pill-toggle-inflow .vl-pill-item.is-active,
.vl-pill-toggle-inflow .vl-pill-item.is-active span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.vl-pill-toggle-inflow .vl-pill-item input:checked ~ span i,
.vl-pill-toggle-inflow .vl-pill-item:has(input:checked) span i,
.vl-pill-toggle-inflow .vl-pill-item.is-active i {
  color: #FFFFFF !important;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
}

/* ==========================================================================
   Velora UI - Timeline Component (.vl-timeline)
   ========================================================================== */
.vl-timeline {
  position: relative;
  padding-left: 2.25rem;
}
.vl-timeline::before {
  content: '';
  position: absolute;
  left: 0.9375rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background-color: var(--vl-line, #E8DED2);
}
.vl-timeline-item {
  position: relative;
  margin-bottom: 1.75rem;
  transition: all 0.2s ease;
}
.vl-timeline-item:last-child {
  margin-bottom: 0;
}
.vl-timeline-node {
  position: absolute;
  left: -2.25rem;
  top: 0.125rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  background-color: var(--vl-card-bg, #FFFFFF);
  border: 2px solid var(--vl-line, #E8DED2);
  color: var(--vl-muted, #624B55);
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.vl-timeline-node.is-wine {
  background-color: var(--vl-wine, #4D122D) !important;
  border-color: var(--vl-wine, #4D122D) !important;
  color: var(--vl-gold, #C9A36A) !important;
}
.vl-timeline-node.is-gold {
  background-color: var(--vl-gold, #C9A36A) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
  color: #FFFFFF !important;
}
.vl-timeline-node.is-success {
  background-color: #10B981 !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
}
.vl-timeline-node.is-future {
  background-color: var(--vl-paper, #FAF6F0) !important;
  border: 2px dashed var(--vl-line, #E8DED2) !important;
  color: var(--vl-muted, #624B55) !important;
}
.vl-timeline-card {
  background-color: var(--vl-card-bg, #FFFFFF);
  border: 1px solid var(--vl-line, #E8DED2);
  border-radius: 0.875rem;
  padding: 1.125rem 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}
.vl-timeline-card:hover {
  border-color: var(--vl-gold, #C9A36A);
  box-shadow: 0 4px 12px rgba(77, 18, 45, 0.06);
}

[data-mode="dark"] .vl-timeline::before {
  background-color: var(--vl-line, #3D2230);
}
[data-mode="dark"] .vl-timeline-node {
  background-color: var(--vl-card-bg, #1F1018);
  border-color: var(--vl-line, #3D2230);
  color: var(--vl-muted, #BFA8B2);
}
[data-mode="dark"] .vl-timeline-node.is-future {
  background-color: var(--vl-paper, #160B10) !important;
  border-color: var(--vl-line, #3D2230) !important;
  color: var(--vl-muted, #BFA8B2) !important;
}
[data-mode="dark"] .vl-timeline-card {
  background-color: var(--vl-card-bg, #1F1018);
  border-color: var(--vl-line, #3D2230);
}
[data-mode="dark"] .vl-timeline-card:hover {
  border-color: var(--vl-gold, #C9A36A);
}

/* --------------------------------------------------------------------------
   7. LOADING STATES, SKELETON SHIMMER & BUTTON LOADERS (.vl-shimmer, .vl-loading-*)
   -------------------------------------------------------------------------- */
@keyframes vlShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.vl-shimmer {
  background: linear-gradient(
    90deg,
    rgba(232, 222, 210, 0.45) 0%,
    rgba(201, 163, 106, 0.3) 50%,
    rgba(232, 222, 210, 0.45) 100%
  );
  background-size: 200% 100%;
  animation: vlShimmer 1.8s infinite ease-in-out;
  border-radius: var(--vl-r-input, 8px);
}

[data-mode="dark"] .vl-shimmer {
  background: linear-gradient(
    90deg,
    rgba(61, 34, 48, 0.6) 0%,
    rgba(201, 163, 106, 0.22) 50%,
    rgba(61, 34, 48, 0.6) 100%
  );
  background-size: 200% 100%;
}

.vl-skeleton-text {
  height: 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.vl-skeleton-title {
  height: 1.25rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.vl-skeleton-avatar {
  border-radius: 9999px;
}
.vl-skeleton-btn {
  height: 2.25rem;
  border-radius: var(--vl-r-input, 10px);
}

/* Luxury Dual Ring Spinner */
.vl-spinner-luxury {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  display: inline-block;
}
.vl-spinner-luxury::before,
.vl-spinner-luxury::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}
.vl-spinner-luxury::before {
  border-top-color: var(--vl-wine, #4D122D);
  border-bottom-color: var(--vl-wine, #4D122D);
  animation: vlSpin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
.vl-spinner-luxury::after {
  border-left-color: var(--vl-gold, #C9A36A);
  border-right-color: var(--vl-gold, #C9A36A);
  animation: vlSpinReverse 1.4s linear infinite;
  inset: 4px;
  border-width: 2.5px;
}

[data-mode="dark"] .vl-spinner-luxury::before {
  border-top-color: var(--vl-gold, #C9A36A);
  border-bottom-color: var(--vl-gold, #C9A36A);
}
[data-mode="dark"] .vl-spinner-luxury::after {
  border-left-color: #FAF6F0;
  border-right-color: #FAF6F0;
}

@keyframes vlSpin {
  100% { transform: rotate(360deg); }
}
@keyframes vlSpinReverse {
  100% { transform: rotate(-360deg); }
}

/* Button Loading States */
.vl-btn.is-loading,
button.is-loading,
.vl-btn[data-loading="true"] {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.82;
  position: relative;
}

/* Loading Dots */
.vl-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vl-loading-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
  animation: vlDotPulse 1.4s infinite ease-in-out both;
}
.vl-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.vl-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.vl-loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes vlDotPulse {
  0%, 80%, 100% {
    transform: scale(0.4);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Card Loading Overlay */
.vl-card-loading-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(250, 246, 240, 0.85);
  backdrop-filter: blur(4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  transition: opacity 0.25s ease;
  animation: vlFadeIn 0.2s ease;
}

[data-mode="dark"] .vl-card-loading-overlay {
  background-color: rgba(26, 16, 23, 0.88);
}

/* Full Screen Backdrop Overlay */
.vl-full-loading-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(42, 18, 28, 0.78);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: vlFadeIn 0.25s ease;
}

/* Striped Animated Progress Bar */
.vl-progress-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.22) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.22) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: vlProgressStripes 1s linear infinite;
}

@keyframes vlProgressStripes {
  0% { background-position: 1rem 0; }
  100% { background-position: 0 0; }
}

/* ==========================================================================
   8. BESPOKE CLINICAL STATUS PALETTE & COMPONENTS (.vl-badge-*, .vl-alert-*, .vl-status-*)
   ========================================================================== */

/* --- 1. STATUS BADGES & PILLS --- */
.vl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--vl-r-pill, 9999px);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.vl-badge-sm {
  padding: 0.15rem 0.45rem;
  font-size: 0.625rem;
}

.vl-badge-lg {
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
}

/* Soft Pastel Tint Badges */
.vl-badge-success, .vl-badge.is-success {
  background-color: var(--vl-success-bg);
  color: var(--vl-success-text);
  border: 1px solid var(--vl-success-border);
}
.vl-badge-warning, .vl-badge.is-warning {
  background-color: var(--vl-warning-bg);
  color: var(--vl-warning-text);
  border: 1px solid var(--vl-warning-border);
}
.vl-badge-info, .vl-badge.is-info {
  background-color: var(--vl-info-bg);
  color: var(--vl-info-text);
  border: 1px solid var(--vl-info-border);
}
.vl-badge-danger, .vl-badge.is-danger, .vl-badge.is-error {
  background-color: var(--vl-danger-bg);
  color: var(--vl-danger-text);
  border: 1px solid var(--vl-danger-border);
}
.vl-badge-vip, .vl-badge.is-vip, .vl-badge.is-gold {
  background-color: var(--vl-vip-bg);
  color: var(--vl-vip-text);
  border: 1px solid var(--vl-vip-border);
}
.vl-badge-wine, .vl-badge.is-wine {
  background-color: var(--vl-wine-soft);
  color: var(--vl-wine);
  border: 1px solid rgba(77, 18, 45, 0.25);
}
.vl-badge-neutral, .vl-badge.is-neutral {
  background-color: var(--vl-surface, #FAF6F0);
  color: var(--vl-muted, #624B55);
  border: 1px solid var(--vl-line, #E8DED2);
}

/* Universal Velora Palette Overrides for Bootstrap/Tabler Status Badges */
.badge.bg-success, .badge.bg-success-lt, .badge-success {
  background-color: var(--vl-success-bg) !important;
  color: var(--vl-success-text) !important;
  border: 1px solid var(--vl-success-border) !important;
}
.badge.bg-warning, .badge.bg-warning-lt, .badge-warning {
  background-color: var(--vl-warning-bg) !important;
  color: var(--vl-warning-text) !important;
  border: 1px solid var(--vl-warning-border) !important;
}
.badge.bg-info, .badge.bg-info-lt, .badge-info {
  background-color: var(--vl-info-bg) !important;
  color: var(--vl-info-text) !important;
  border: 1px solid var(--vl-info-border) !important;
}
.badge.bg-danger, .badge.bg-danger-lt, .badge-danger {
  background-color: var(--vl-danger-bg) !important;
  color: var(--vl-danger-text) !important;
  border: 1px solid var(--vl-danger-border) !important;
}
.badge.bg-secondary, .badge.bg-secondary-lt, .badge-secondary {
  background-color: var(--vl-surface, #FAF6F0) !important;
  color: var(--vl-muted, #624B55) !important;
  border: 1px solid var(--vl-line, #E8DED2) !important;
}

/* Universal Velora Palette Overrides for Alerts */
.alert.alert-success, .alert-success, .vl-alert-success {
  background-color: var(--vl-success-bg) !important;
  color: var(--vl-success-text) !important;
  border: 1px solid var(--vl-success-border) !important;
}
.alert.alert-warning, .alert-warning, .vl-alert-warning {
  background-color: var(--vl-warning-bg) !important;
  color: var(--vl-warning-text) !important;
  border: 1px solid var(--vl-warning-border) !important;
}
.alert.alert-info, .alert-info, .vl-alert-info {
  background-color: var(--vl-info-bg) !important;
  color: var(--vl-info-text) !important;
  border: 1px solid var(--vl-info-border) !important;
}
.alert.alert-danger, .alert-danger, .vl-alert-danger {
  background-color: var(--vl-danger-bg) !important;
  color: var(--vl-danger-text) !important;
  border: 1px solid var(--vl-danger-border) !important;
}

/* Solid Rich Badges */
.vl-badge-solid-success {
  background-color: var(--vl-success);
  color: #FFFFFF !important;
  border: 1px solid transparent;
}
.vl-badge-solid-warning {
  background-color: var(--vl-warning);
  color: #FFFFFF !important;
  border: 1px solid transparent;
}
.vl-badge-solid-info {
  background-color: var(--vl-info);
  color: #FFFFFF !important;
  border: 1px solid transparent;
}
.vl-badge-solid-danger {
  background-color: var(--vl-danger);
  color: #FFFFFF !important;
  border: 1px solid transparent;
}
.vl-badge-solid-vip {
  background-color: var(--vl-gold);
  color: #FFFFFF !important;
  border: 1px solid transparent;
}
.vl-badge-solid-wine {
  background-color: var(--vl-wine);
  color: #FFFFFF !important;
  border: 1px solid transparent;
}
.vl-badge[class*="vl-badge-solid-"],
.vl-badge.is-solid {
  color: #FFFFFF !important;
}

/* Outline Minimal Badges */
.vl-badge-outline-success {
  background-color: transparent;
  color: var(--vl-success);
  border: 1.5px solid var(--vl-success-border);
}
.vl-badge-outline-warning {
  background-color: transparent;
  color: var(--vl-warning);
  border: 1.5px solid var(--vl-warning-border);
}
.vl-badge-outline-info {
  background-color: transparent;
  color: var(--vl-info);
  border: 1.5px solid var(--vl-info-border);
}
.vl-badge-outline-danger {
  background-color: transparent;
  color: var(--vl-danger);
  border: 1.5px solid var(--vl-danger-border);
}
.vl-badge-outline-vip {
  background-color: transparent;
  color: var(--vl-gold);
  border: 1.5px solid var(--vl-vip-border);
}

/* Status Indicator Dot (.vl-status-dot) */
.vl-status-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.vl-status-dot.is-success { background-color: var(--vl-success); }
.vl-status-dot.is-warning { background-color: var(--vl-warning); }
.vl-status-dot.is-info { background-color: var(--vl-info); }
.vl-status-dot.is-danger { background-color: var(--vl-danger); }
.vl-status-dot.is-vip { background-color: var(--vl-gold); }

/* --- 2. STATUS ALERTS & BANNERS (.vl-alert) --- */
.vl-alert {
  padding: 1rem 1.25rem;
  border-radius: var(--vl-r-card, 14px);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  transition: all 0.2s ease;
}
.vl-alert-success {
  background-color: var(--vl-success-bg);
  border: 1px solid var(--vl-success-border);
  color: var(--vl-success-text);
}
.vl-alert-warning {
  background-color: var(--vl-warning-bg);
  border: 1px solid var(--vl-warning-border);
  color: var(--vl-warning-text);
}
.vl-alert-info {
  background-color: var(--vl-info-bg);
  border: 1px solid var(--vl-info-border);
  color: var(--vl-info-text);
}
.vl-alert-danger {
  background-color: var(--vl-danger-bg);
  border: 1px solid var(--vl-danger-border);
  color: var(--vl-danger-text);
}
.vl-alert-vip {
  background-color: var(--vl-vip-bg);
  border: 1px solid var(--vl-vip-border);
  color: var(--vl-vip-text);
}

/* --- 3. STATUS ACTION BUTTONS (.vl-btn-status-*) --- */
.vl-btn-status-success {
  background-color: var(--vl-success);
  color: #FFFFFF;
  border: 1px solid transparent;
}
.vl-btn-status-success:hover {
  background-color: var(--vl-success-light);
  color: #FFFFFF;
}
.vl-btn-status-warning {
  background-color: var(--vl-warning);
  color: #FFFFFF;
  border: 1px solid transparent;
}
.vl-btn-status-warning:hover {
  background-color: var(--vl-warning-light);
  color: #FFFFFF;
}
.vl-btn-status-info {
  background-color: var(--vl-info);
  color: #FFFFFF;
  border: 1px solid transparent;
}
.vl-btn-status-info:hover {
  background-color: var(--vl-info-light);
  color: #FFFFFF;
}
.vl-btn-status-danger {
  background-color: var(--vl-danger);
  color: #FFFFFF;
  border: 1px solid transparent;
}
.vl-btn-status-danger:hover {
  background-color: var(--vl-danger-light);
  color: #FFFFFF;
}

/* Outline Status Buttons */
.vl-btn-outline-success {
  background-color: transparent;
  color: var(--vl-success);
  border: 1.5px solid var(--vl-success-border);
}
.vl-btn-outline-success:hover {
  background-color: var(--vl-success-bg);
}
.vl-btn-outline-warning {
  background-color: transparent;
  color: var(--vl-warning);
  border: 1.5px solid var(--vl-warning-border);
}
.vl-btn-outline-warning:hover {
  background-color: var(--vl-warning-bg);
}
.vl-btn-outline-info {
  background-color: transparent;
  color: var(--vl-info);
  border: 1.5px solid var(--vl-info-border);
}
.vl-btn-outline-info:hover {
  background-color: var(--vl-info-bg);
}
.vl-btn-outline-danger {
  background-color: transparent;
  color: var(--vl-danger);
  border: 1.5px solid var(--vl-danger-border);
}
.vl-btn-outline-danger:hover {
  background-color: var(--vl-danger-bg);
}

/* ==========================================================================
   4. LUXURY CLINICAL STATUS COMPATIBILITY OVERRIDES (PANEL HARMONIZATION)
   Gracefully overrides harsh, generic Bootstrap/Tailwind neon colors with
   Velora's bespoke luxury clinical tokens across all panel elements.
   ========================================================================== */

/* --- SUCCESS: BOTANICAL SAGE / HERBAL EUCALYPTUS --- */
.bg-emerald-500\/10,
.bg-emerald-50,
.bg-emerald-100,
.bg-emerald-50\/20,
.bg-emerald-50\/30,
.bg-emerald-500\/20,
.bg-emerald-700\/10,
.bg-green-50,
.bg-green-100,
.bg-green-500\/10 {
  background-color: var(--vl-success-bg, #EFF6F3) !important;
}

.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-green-600,
.text-green-700,
.text-green-800 {
  color: #022C22 !important;
  font-weight: 700 !important;
}

.border-emerald-500\/20,
.border-emerald-200,
.border-emerald-100,
.border-emerald-300,
.border-emerald-700\/20,
.border-green-200,
.border-green-100 {
  border-color: var(--vl-success-border) !important;
}

.bg-emerald-500,
.bg-emerald-600,
.bg-emerald-700,
.bg-emerald-800,
.bg-green-600,
.bg-green-700 {
  background-color: var(--vl-success) !important;
  color: #FFFFFF !important;
}

.hover\:bg-emerald-100:hover,
.hover\:bg-emerald-50:hover {
  background-color: var(--vl-success-border) !important;
}

.hover\:bg-emerald-700:hover,
.hover\:bg-emerald-800:hover {
  filter: brightness(0.9) !important;
}

/* --- WARNING: ANTIQUE HONEY / WARM AMBER --- */
.bg-amber-500\/10,
.bg-amber-50,
.bg-amber-100,
.bg-amber-50\/20,
.bg-amber-50\/70,
.bg-amber-100\/70,
.bg-yellow-50,
.bg-yellow-100,
.bg-yellow-500\/10 {
  background-color: var(--vl-warning-bg, #FEF3C7) !important;
}

.text-amber-500,
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-amber-900,
.text-amber-950,
.text-yellow-600,
.text-yellow-700,
.text-yellow-800 {
  color: #451A03 !important;
  font-weight: 700 !important;
}

.border-amber-500\/20,
.border-amber-200,
.border-amber-100,
.border-amber-300,
.border-yellow-200,
.border-yellow-100 {
  border-color: var(--vl-warning-border) !important;
}

.bg-amber-500,
.bg-amber-600,
.bg-amber-700,
.bg-yellow-500,
.bg-yellow-600 {
  background-color: var(--vl-warning) !important;
  color: #FFFFFF !important;
}

.hover\:bg-amber-100:hover,
.hover\:bg-amber-50:hover {
  background-color: var(--vl-warning-border) !important;
}

.hover\:bg-amber-700:hover,
.hover\:bg-amber-800:hover {
  filter: brightness(0.9) !important;
}

/* --- DANGER: VELVET RUBY / DEEP CARMINE --- */
.bg-rose-500\/10,
.bg-rose-50,
.bg-rose-100,
.bg-rose-50\/20,
.bg-rose-50\/30,
.bg-rose-50\/70,
.bg-rose-100\/70,
.bg-rose-500\/20,
.bg-red-50,
.bg-red-100,
.bg-red-500\/10 {
  background-color: var(--vl-danger-bg, #FFE4E6) !important;
}

.text-rose-500,
.text-rose-600,
.text-rose-700,
.text-rose-800,
.text-rose-900,
.text-red-500,
.text-red-600,
.text-red-700,
.text-red-800 {
  color: #4C0519 !important;
  font-weight: 700 !important;
}

.border-rose-500\/20,
.border-rose-200,
.border-rose-100,
.border-rose-300,
.border-rose-500\/30,
.border-red-200,
.border-red-100 {
  border-color: var(--vl-danger-border) !important;
}

.bg-rose-500,
.bg-rose-600,
.bg-rose-700,
.bg-rose-800,
.bg-red-600,
.bg-red-700 {
  background-color: var(--vl-danger) !important;
  color: #FFFFFF !important;
}

.hover\:bg-rose-100:hover,
.hover\:bg-rose-50:hover {
  background-color: var(--vl-danger-border) !important;
}

.hover\:bg-rose-700:hover,
.hover\:bg-rose-800:hover {
  filter: brightness(0.9) !important;
}

/* --- INFO: MINERAL SLATE / FRENCH PETROL BLUE --- */
.bg-blue-500\/10,
.bg-blue-50,
.bg-blue-100,
.bg-sky-500\/10,
.bg-sky-50,
.bg-sky-100,
.bg-cyan-50,
.bg-cyan-500\/10 {
  background-color: var(--vl-info-bg, #DBEAFE) !important;
}

.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-sky-600,
.text-sky-700,
.text-sky-800,
.text-cyan-700 {
  color: #172554 !important;
  font-weight: 700 !important;
}

.border-blue-500\/20,
.border-blue-200,
.border-blue-100,
.border-sky-500\/20,
.border-sky-200,
.border-cyan-200 {
  border-color: var(--vl-info-border) !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-sky-500,
.bg-sky-600 {
  background-color: var(--vl-info) !important;
  color: #FFFFFF !important;
}

/* --- DARK MODE SPECIAL OVERRIDES --- */
html[data-mode="dark"] .text-emerald-400,
html[data-mode="dark"] .text-emerald-300,
html[data-mode="dark"] .text-emerald-500,
html[data-mode="dark"] .text-emerald-600 {
  color: var(--vl-success-text) !important;
}

html[data-mode="dark"] .text-amber-400,
html[data-mode="dark"] .text-amber-300,
html[data-mode="dark"] .text-amber-500,
html[data-mode="dark"] .text-amber-600 {
  color: var(--vl-warning-text) !important;
}

html[data-mode="dark"] .text-rose-400,
html[data-mode="dark"] .text-rose-300,
html[data-mode="dark"] .text-rose-500,
html[data-mode="dark"] .text-rose-600 {
  color: var(--vl-danger-text) !important;
}

html[data-mode="dark"] .text-sky-400,
html[data-mode="dark"] .text-sky-300,
html[data-mode="dark"] .text-blue-400,
html[data-mode="dark"] .text-blue-500 {
  color: var(--vl-info-text) !important;
}

html[data-mode="dark"] .bg-emerald-950\/40 {
  background-color: var(--vl-success-light) !important;
}

html[data-mode="dark"] .bg-amber-950\/40 {
  background-color: var(--vl-warning-light) !important;
}

html[data-mode="dark"] .bg-rose-950\/40 {
  background-color: var(--vl-danger-light) !important;
}





/* ==========================================================================
   VELORA INPUT GROUP SYSTEM (UNIFIED JOINED CONTROLS)
   ========================================================================== */
.vl-input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
}

.vl-input-group > .vl-input,
.vl-input-group > .vl-select,
.vl-input-group > select,
.vl-input-group > input {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--vl-form-input-height, 42px);
}

.vl-input-group > *:first-child:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}

.vl-input-group > *:last-child:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.vl-input-group > *:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
  border-right-width: 0 !important;
}

.vl-input-group > *:focus,
.vl-input-group > *:focus-within {
  z-index: 3 !important;
}

/* Select Wrapper inside Input Group */
.vl-input-group > .vl-select-wrapper {
  position: relative;
  flex: 0 0 auto !important;
  display: flex;
}

.vl-input-group > .vl-select-wrapper .vl-select-trigger {
  height: 100% !important;
  min-height: var(--vl-form-input-height, 42px) !important;
}

.vl-input-group > .vl-select-wrapper:first-child .vl-select-trigger,
.vl-input-group > select.vl-select-hidden:first-child + .vl-select-wrapper .vl-select-trigger,
.vl-input-group > select:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}

.vl-input-group > .vl-select-wrapper:last-child .vl-select-trigger,
.vl-input-group > select.vl-select-hidden:last-child + .vl-select-wrapper .vl-select-trigger,
.vl-input-group > select:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}

.vl-input-group > .vl-select-wrapper + input,
.vl-input-group > .vl-select-wrapper + .vl-input,
.vl-input-group > select + input,
.vl-input-group > select + .vl-input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

.vl-input-group > input + .vl-select-wrapper .vl-select-trigger,
.vl-input-group > .vl-input + .vl-select-wrapper .vl-select-trigger {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}

.vl-input-group > .vl-select-wrapper.open,
.vl-input-group > .vl-select-wrapper:focus-within {
  z-index: 5 !important;
}

.vl-input-group-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background-color: var(--vl-wine, #4D122D);
  color: var(--vl-gold, #C9A36A);
  border: 1px solid var(--vl-wine, #4D122D);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--vl-transition-fast, 0.15s ease);
  white-space: nowrap;
}

.vl-input-group-btn:hover {
  background-color: #360C1F;
  border-color: #360C1F;
  color: #DFBF8B;
}

.vl-input-group-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background-color: var(--vl-surface, #FAF6F0);
  color: var(--vl-muted, #624B55);
  border: 1px solid var(--vl-line, #E8DED2);
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  user-select: none;
}

/* ==========================================================================
   VELORA HIGH-CONTRAST READABLE BADGE SYSTEM (WCAG AAA)
   Fixes washed-out / unreadable light-tint badges across all components
   ========================================================================== */
.vl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.vl-badge-success {
  background-color: #ecfdf5 !important;
  color: #022c22 !important; /* Deepest forest green */
  border-color: #6ee7b7 !important;
  font-weight: 800 !important;
}

.vl-badge-warning {
  background-color: #fffbeb !important;
  color: #78350f !important; /* Deepest amber/brown */
  border-color: #fcd34d !important;
  font-weight: 800 !important;
}

.vl-badge-danger {
  background-color: #fff1f2 !important;
  color: #881337 !important; /* Deep burgundy/rose */
  border-color: #fda4af !important;
  font-weight: 800 !important;
}

.vl-badge-info {
  background-color: #eff6ff !important;
  color: #172554 !important; /* Deepest navy */
  border-color: #93c5fd !important;
  font-weight: 800 !important;
}

.vl-badge-gold {
  background-color: #faf6f0 !important;
  color: #4d122d !important;
  border-color: #c9a36a !important;
  font-weight: 800 !important;
}

.vl-badge-neutral {
  background-color: #f4f4f5 !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   BULLETPROOF HIGH-CONTRAST BADGE SYSTEM (LIGHT & DARK MODES - AAA ACCESSIBLE)
   ========================================================================== */

/* --- 1. LIGHT MODE BADGES (Pure Pastel Backgrounds + Deep Obsidian Contrast Text) --- */

/* AMBER / WARNING BADGE */
.bg-amber-50,
.bg-amber-100,
.bg-yellow-50,
.bg-yellow-100,
[class*="bg-amber-50"],
[class*="bg-amber-100"],
[class*="bg-yellow-50"] {
  background-color: #FEF3C7 !important; /* Soft warm honey */
}
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-amber-900,
.text-amber-950,
.text-yellow-700,
.text-yellow-800,
.text-yellow-900,
[class*="text-amber-"],
[class*="text-yellow-"],
.bg-amber-50.text-amber-700,
.bg-amber-50 [class*="text-amber-"] {
  color: #451A03 !important; /* Deep espresso amber (14.0:1 contrast on #FEF3C7) */
  font-weight: 800 !important;
}
.border-amber-100,
.border-amber-200,
.border-amber-300,
[class*="border-amber-"],
[class*="border-yellow-"] {
  border-color: #FCD34D !important;
}

/* EMERALD / SUCCESS BADGE */
.bg-emerald-50,
.bg-emerald-100,
.bg-green-50,
.bg-green-100,
[class*="bg-emerald-50"],
[class*="bg-emerald-100"],
[class*="bg-green-50"] {
  background-color: #D1FAE5 !important; /* Soft botanical mint */
}
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-green-700,
.text-green-800,
[class*="text-emerald-"],
[class*="text-green-"],
.bg-emerald-50.text-emerald-700,
.bg-emerald-50 [class*="text-emerald-"] {
  color: #022C22 !important; /* Deep pine emerald (13.8:1 contrast on #D1FAE5) */
  font-weight: 800 !important;
}
.border-emerald-100,
.border-emerald-200,
.border-emerald-300,
[class*="border-emerald-"],
[class*="border-green-"] {
  border-color: #6EE7B7 !important;
}

/* ROSE / RED / DANGER BADGE */
.bg-rose-50,
.bg-rose-100,
.bg-red-50,
.bg-red-100,
[class*="bg-rose-50"],
[class*="bg-rose-100"],
[class*="bg-red-50"] {
  background-color: #FFE4E6 !important; /* Soft rose blush */
}
.text-rose-600,
.text-rose-700,
.text-rose-800,
.text-rose-900,
.text-red-700,
.text-red-800,
[class*="text-rose-"],
[class*="text-red-"],
.bg-rose-50.text-rose-700,
.bg-rose-50 [class*="text-rose-"] {
  color: #4C0519 !important; /* Deepest ruby crimson (13.2:1 contrast on #FFE4E6) */
  font-weight: 800 !important;
}
.border-rose-100,
.border-rose-200,
.border-rose-300,
[class*="border-rose-"],
[class*="border-red-"] {
  border-color: #FDA4AF !important;
}

/* BLUE / INFO BADGE */
.bg-blue-50,
.bg-blue-100,
.bg-sky-50,
.bg-sky-100,
[class*="bg-blue-50"],
[class*="bg-blue-100"],
[class*="bg-sky-50"] {
  background-color: #DBEAFE !important; /* Soft sky blue */
}
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
.text-sky-700,
.text-sky-800,
[class*="text-blue-"],
[class*="text-sky-"],
.bg-blue-50.text-blue-700,
.bg-blue-50 [class*="text-blue-"] {
  color: #172554 !important; /* Deepest midnight navy (12.0:1 contrast on #DBEAFE) */
  font-weight: 800 !important;
}
.border-blue-100,
.border-blue-200,
.border-blue-300,
[class*="border-blue-"],
[class*="border-sky-"] {
  border-color: #93C5FD !important;
}

/* PURPLE / WINE BADGE */
.bg-purple-50,
.bg-purple-100,
[class*="bg-purple-50"],
[class*="bg-purple-100"] {
  background-color: #F3E8FF !important; /* Soft lavender */
}
.text-purple-600,
.text-purple-700,
.text-purple-800,
.text-purple-900,
[class*="text-purple-"],
.bg-purple-50.text-purple-700,
.bg-purple-50 [class*="text-purple-"] {
  color: #3B0764 !important; /* Deepest royal purple (13.0:1 contrast on #F3E8FF) */
  font-weight: 800 !important;
}
.border-purple-100,
.border-purple-200,
[class*="border-purple-"] {
  border-color: #D8B4FE !important;
}

/* GRAY / SLATE / NEUTRAL BADGE */
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-slate-100 {
  background-color: #F1F5F9 !important;
}
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-slate-600,
.text-slate-700,
.text-slate-800 {
  color: #0F172A !important; /* Deep slate ink */
  font-weight: 800 !important;
}
.border-gray-200,
.border-slate-200 {
  border-color: #CBD5E1 !important;
}

/* --- 2. DARK MODE BADGES (Translucent Tint Backgrounds + Vivid High-Luminance Text) --- */
html[data-mode="dark"] .bg-amber-50,
html[data-mode="dark"] .bg-amber-100,
html[data-mode="dark"] [class*="bg-amber-50"],
html[data-mode="dark"] [class*="bg-amber-100"],
[data-mode="dark"] .bg-amber-50,
[data-mode="dark"] .bg-amber-100,
[data-mode="dark"] [class*="bg-amber-50"],
[data-mode="dark"] [class*="bg-amber-100"] {
  background-color: rgba(245, 158, 11, 0.18) !important;
}
html[data-mode="dark"] .text-amber-600,
html[data-mode="dark"] .text-amber-700,
html[data-mode="dark"] .text-amber-800,
html[data-mode="dark"] [class*="text-amber-"],
[data-mode="dark"] .text-amber-600,
[data-mode="dark"] .text-amber-700,
[data-mode="dark"] .text-amber-800,
[data-mode="dark"] [class*="text-amber-"] {
  color: #FDE68A !important;
  font-weight: 800 !important;
}
html[data-mode="dark"] [class*="border-amber-"],
[data-mode="dark"] [class*="border-amber-"] {
  border-color: rgba(245, 158, 11, 0.45) !important;
}

html[data-mode="dark"] .bg-emerald-50,
html[data-mode="dark"] .bg-emerald-100,
html[data-mode="dark"] [class*="bg-emerald-50"],
html[data-mode="dark"] [class*="bg-emerald-100"],
[data-mode="dark"] .bg-emerald-50,
[data-mode="dark"] .bg-emerald-100,
[data-mode="dark"] [class*="bg-emerald-50"],
[data-mode="dark"] [class*="bg-emerald-100"] {
  background-color: rgba(16, 185, 129, 0.18) !important;
}
html[data-mode="dark"] .text-emerald-600,
html[data-mode="dark"] .text-emerald-700,
html[data-mode="dark"] .text-emerald-800,
html[data-mode="dark"] [class*="text-emerald-"],
[data-mode="dark"] .text-emerald-600,
[data-mode="dark"] .text-emerald-700,
[data-mode="dark"] .text-emerald-800,
[data-mode="dark"] [class*="text-emerald-"] {
  color: #A7F3D0 !important;
  font-weight: 800 !important;
}
html[data-mode="dark"] [class*="border-emerald-"],
[data-mode="dark"] [class*="border-emerald-"] {
  border-color: rgba(16, 185, 129, 0.45) !important;
}

html[data-mode="dark"] .bg-rose-50,
html[data-mode="dark"] .bg-rose-100,
html[data-mode="dark"] [class*="bg-rose-50"],
html[data-mode="dark"] [class*="bg-rose-100"],
[data-mode="dark"] .bg-rose-50,
[data-mode="dark"] .bg-rose-100,
[data-mode="dark"] [class*="bg-rose-50"],
[data-mode="dark"] [class*="bg-rose-100"] {
  background-color: rgba(244, 63, 94, 0.18) !important;
}
html[data-mode="dark"] .text-rose-600,
html[data-mode="dark"] .text-rose-700,
html[data-mode="dark"] .text-rose-800,
html[data-mode="dark"] [class*="text-rose-"],
[data-mode="dark"] .text-rose-600,
[data-mode="dark"] .text-rose-700,
[data-mode="dark"] .text-rose-800,
[data-mode="dark"] [class*="text-rose-"] {
  color: #FECDD3 !important;
  font-weight: 800 !important;
}
html[data-mode="dark"] [class*="border-rose-"],
[data-mode="dark"] [class*="border-rose-"] {
  border-color: rgba(244, 63, 94, 0.45) !important;
}

html[data-mode="dark"] .bg-blue-50,
html[data-mode="dark"] .bg-blue-100,
html[data-mode="dark"] [class*="bg-blue-50"],
html[data-mode="dark"] [class*="bg-blue-100"],
[data-mode="dark"] .bg-blue-50,
[data-mode="dark"] .bg-blue-100,
[data-mode="dark"] [class*="bg-blue-50"],
[data-mode="dark"] [class*="bg-blue-100"] {
  background-color: rgba(59, 130, 246, 0.18) !important;
}
html[data-mode="dark"] .text-blue-600,
html[data-mode="dark"] .text-blue-700,
html[data-mode="dark"] .text-blue-800,
html[data-mode="dark"] [class*="text-blue-"],
[data-mode="dark"] .text-blue-600,
[data-mode="dark"] .text-blue-700,
[data-mode="dark"] .text-blue-800,
[data-mode="dark"] [class*="text-blue-"] {
  color: #BFDBFE !important;
  font-weight: 800 !important;
}
html[data-mode="dark"] [class*="border-blue-"],
[data-mode="dark"] [class*="border-blue-"] {
  border-color: rgba(59, 130, 246, 0.45) !important;
}

/* ==========================================================================
   VELORA CALENDAR APPOINTMENT CARDS - CRISP ELEVATED LIGHT SURFACES
   ========================================================================== */
.vl-cal-card {
  position: absolute !important;
  background-color: #FFFFFF !important;
  border-radius: 0 !important;
  border: 1px solid #E2D3C4 !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  border-left-color: var(--vl-wine, #4D122D) !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
  box-shadow: 0 2px 6px rgba(42, 18, 28, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

.vl-cal-card:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 20px rgba(77, 18, 45, 0.16) !important;
  border-color: var(--vl-gold, #C9A36A) !important;
  z-index: 30 !important;
}

.vl-cal-card:active,
.vl-cal-card.is-selected {
  outline: 2px solid var(--vl-gold, #C9A36A) !important;
  box-shadow: 0 0 0 4px rgba(201, 163, 106, 0.25) !important;
  z-index: 35 !important;
}

/* All cards have fixed #FFFFFF background and #E2D3C4 border like is-status-approved, distinguishing status solely via left border accent */
.vl-cal-card.is-status-approved, .vl-cal-card--approved {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: var(--vl-wine, #4D122D) !important;
}

.vl-cal-card.is-status-planned, .vl-cal-card--planned {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #2563EB !important;
}

.vl-cal-card.is-status-in_progress,
.vl-cal-card.is-status-operating,
.vl-cal-card--operating {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #D97706 !important;
}

.vl-cal-card.is-status-completed, .vl-cal-card--completed {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #16A34A !important;
}

.vl-cal-card.is-status-request, .vl-cal-card--request {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #9333EA !important;
}

.vl-cal-card.is-status-cancelled, .vl-cal-card--cancelled {
  background: #FFFFFF !important;
  border-color: #E2D3C4 !important;
  border-left-color: #DC2626 !important;
  opacity: 0.65 !important;
}

/* Compact Session Badge */
.vl-cal-session-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background-color: var(--vl-surface, #F5EFE6);
  color: var(--vl-wine, #4D122D);
  border: 1px solid var(--vl-line, #E2D3C4);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Compact Iconic Status Dots (Quick & Payment Statuses) */
.vl-cal-status-dot {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  cursor: help;
  transition: transform 0.15s ease;
  border: 1px solid transparent;
}
.vl-cal-status-dot:hover {
  transform: scale(1.2);
}
.vl-cal-status-dot.is-consult {
  background-color: #FAF6F0;
  color: var(--vl-wine, #4D122D);
  border-color: var(--vl-gold, #C9A36A);
}
.vl-cal-status-dot.is-quick {
  background-color: #FEF3C7;
  color: #B45309;
  border-color: #FCD34D;
}
.vl-cal-status-dot.is-paid {
  background-color: #DCFCE7;
  color: #15803D;
  border-color: #86EFAC;
}
.vl-cal-status-dot.is-partial {
  background-color: #FFEDD5;
  color: #C2410C;
  border-color: #FDBA74;
}
.vl-cal-status-dot.is-unpaid {
  background-color: #FEE2E2;
  color: #B91C1C;
  border-color: #FCA5A5;
}

/* Ensure slot lines have box-border */
.vl-cal-slot-line {
  box-sizing: border-box !important;
}
.vl-cal-slot-line.is-hour {
  border-bottom: 1px solid var(--vl-line, #E8DED2) !important;
}

.vl-cal-time-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--vl-muted, #624B55);
  text-align: center;
  padding-top: 2px;
  line-height: 1;
}

/* Flag Pill Styles */
.vl-cal-flag-pill {
  padding: 1px 6px !important;
  border-radius: 6px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}
.vl-cal-flag-pill.is-consult {
  background-color: #EDE9FE !important;
  color: #5B21B6 !important;
  border: 1px solid #DDD6FE !important;
}
.vl-cal-flag-pill.is-quick {
  background-color: #FEF3C7 !important;
  color: #92400E !important;
  border: 1px solid #FDE68A !important;
}
.vl-cal-flag-pill.is-op {
  background-color: #F1F5F9 !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
}

/* Month View Pill Elevated Styling */
.vl-cal-month-pill {
  background-color: #FFFFFF !important;
  border-radius: 0 !important;
  border: 1px solid #E2D3C4 !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
  box-shadow: 0 1px 3px rgba(42, 18, 28, 0.06) !important;
}
.vl-cal-month-pill.is-status-approved { border-left-color: var(--vl-wine, #4D122D) !important; }
.vl-cal-month-pill.is-status-planned { border-left-color: #2563EB !important; }
.vl-cal-month-pill.is-status-completed { border-left-color: #16A34A !important; }
.vl-cal-month-pill.is-status-request { border-left-color: #9333EA !important; }
.vl-cal-month-pill.is-status-cancelled { border-left-color: #DC2626 !important; }

/* ==========================================================================
   VELORA FORM CONTROLS - SMALL SIZES (SM / 32PX)
   ========================================================================== */
.vl-input-sm,
input.vl-input-sm,
.vl-select-sm,
select.vl-select-sm {
  height: 32px !important;
  min-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 12px !important;
  line-height: 30px !important;
  border-radius: var(--vl-radius-md, 10px) !important;
}

select.vl-select-sm,
.vl-select.vl-select-sm {
  padding-right: 26px !important;
  background-position: right 8px center !important;
  background-size: 14px 14px !important;
}

/* Custom Select Plugin (VeloraSelect) SM */
.vl-select-wrapper.vl-select-sm .vl-select-trigger,
.vl-select-sm + .vl-select-wrapper .vl-select-trigger,
.vl-select-trigger.vl-select-sm {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 24px 0 10px !important;
  font-size: 12px !important;
  line-height: 30px !important;
  border-radius: var(--vl-radius-md, 10px) !important;
}

.vl-select-wrapper.vl-select-sm .vl-select-arrow,
.vl-select-sm + .vl-select-wrapper .vl-select-arrow {
  right: 8px !important;
}

.vl-select-wrapper.vl-select-sm .vl-select-arrow svg,
.vl-select-sm + .vl-select-wrapper .vl-select-arrow svg {
  width: 14px !important;
  height: 14px !important;
}

.vl-select-wrapper.vl-select-sm .vl-select-dropdown,
.vl-select-sm + .vl-select-wrapper .vl-select-dropdown {
  border-radius: var(--vl-radius-md, 10px) !important;
}

.vl-select-wrapper.vl-select-sm .vl-select-option,
.vl-select-sm + .vl-select-wrapper .vl-select-option {
  padding: 6px 10px !important;
  font-size: 12px !important;
}

/* Small Textarea */
.vl-textarea-sm,
textarea.vl-textarea-sm,
.vl-textarea.vl-textarea-sm {
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  border-radius: var(--vl-radius-md, 10px) !important;
}

/* Small Button */
.vl-btn-sm,
button.vl-btn-sm,
a.vl-btn-sm {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: var(--vl-radius-md, 10px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* Small Input Group */
.vl-input-group-sm {
  display: flex !important;
  align-items: stretch !important;
}
.vl-input-group-sm > .vl-input,
.vl-input-group-sm > .vl-select,
.vl-input-group-sm > .vl-select-wrapper,
.vl-input-group-sm > .vl-btn,
.vl-input-group-sm > button,
.vl-input-group-sm > span {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 12px !important;
}
.vl-input-group-sm > :first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.vl-input-group-sm > :not(:first-child):not(:last-child) {
  border-radius: 0 !important;
  border-left-width: 0 !important;
}
.vl-input-group-sm > :last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}

/* Small Switch */
.vl-switch-sm {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 20px;
}
.vl-switch-sm input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.vl-switch-sm .vl-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--vl-line, #E8DED2);
  transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 20px;
}
.vl-switch-sm .vl-switch-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  top: 3px;
  background-color: #FFFFFF;
  transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.vl-switch-sm input:checked + .vl-switch-slider {
  background-color: var(--vl-wine, #4D122D);
}
.vl-switch-sm input:checked + .vl-switch-slider:before {
  transform: translateX(14px);
}

/* Marketing Segment Buttons Active State */
.open-segment.is-active {
  background-color: var(--vl-wine, #4D122D) !important;
  color: #FFFFFF !important;
  border-color: var(--vl-wine, #4D122D) !important;
  box-shadow: 0 1px 3px rgba(77, 18, 45, 0.2) !important;
}
.open-segment.is-active span,
.open-segment.is-active {
  color: #FFFFFF !important;
}
.open-segment.is-active i {
  color: #D4AF37 !important;
}

/* ==========================================================================
   UNIVERSAL MODAL RULES & CLOSE BUTTONS (VELORA PANEL STANDARD)
   ========================================================================== */
.modal.hidden,
.vl-modal.hidden,
[role="dialog"].hidden,
[data-vl-modal].hidden {
  display: none !important;
}

.close-modal-btn,
.vl-modal-close,
[data-vl-dismiss="modal"],
[data-bs-dismiss="modal"] {
  cursor: pointer !important;
}

.close-modal-btn:hover {
  opacity: 0.85;
}

/* ==========================================================================
   VELORA SLIDING PILL TOGGLE / SEGMENTED CONTROLS
   ========================================================================== */
.vl-pill-toggle {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 0.75rem;
  background-color: var(--vl-surface, #FAF6F0);
  border: 1px solid var(--vl-line, #E8DED2);
  gap: 4px;
  user-select: none;
  box-sizing: border-box;
  overflow: hidden;
}

.vl-pill-toggle .vl-pill-glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 12px) / 2);
  border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--vl-wine, #4D122D) 0%, #350A1E 100%);
  box-shadow: 0 2px 6px rgba(77, 18, 45, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12);
  pointer-events-none;
  z-index: 1;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.34, 1.25, 0.64, 1), background 0.28s ease, box-shadow 0.28s ease;
  will-change: transform, background;
}

.vl-pill-toggle:has(.vl-pill-item:nth-of-type(2) input:checked) .vl-pill-glider,
.vl-pill-toggle.is-item-2 .vl-pill-glider {
  transform: translateX(calc(100% + 4px));
}

.vl-pill-toggle:has(.vl-pill-item:nth-of-type(1) input:checked) .vl-pill-glider,
.vl-pill-toggle.is-item-1 .vl-pill-glider {
  transform: translateX(0);
}

.vl-pill-toggle .vl-pill-item {
  position: relative;
  z-index: 2;
  flex: 1 1 0%;
  margin: 0 !important;
  text-align: center;
  cursor: pointer;
  border-radius: 0.5rem;
}

.vl-pill-toggle .vl-pill-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vl-muted, #624B55);
  border-radius: 0.5rem;
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), font-weight 0.25s ease;
}

.vl-pill-toggle .vl-pill-item:hover span {
  color: var(--vl-ink, #2A121C);
}

.vl-pill-toggle .vl-pill-item input:checked ~ span,
.vl-pill-toggle .vl-pill-item:has(input:checked) span,
.vl-pill-toggle .vl-pill-item.is-active,
.vl-pill-toggle .vl-pill-item.is-active span {
  color: var(--vl-gold, #C9A36A) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.vl-pill-toggle .vl-pill-item input:checked ~ span i,
.vl-pill-toggle .vl-pill-item:has(input:checked) span i,
.vl-pill-toggle .vl-pill-item.is-active i {
  color: var(--vl-gold, #C9A36A) !important;
  filter: drop-shadow(0 0 1px rgba(201, 163, 106, 0.4));
}

/* Inflow / Outflow Gelir - Gider Pill Variants */
.vl-pill-toggle-inflow .vl-pill-glider {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.vl-pill-toggle-inflow:has(.vl-pill-item:nth-of-type(1) input:checked) .vl-pill-glider,
.vl-pill-toggle-inflow.is-item-1 .vl-pill-glider {
  transform: translateX(0);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.vl-pill-toggle-inflow:has(.vl-pill-item:nth-of-type(2) input:checked) .vl-pill-glider,
.vl-pill-toggle-inflow.is-item-2 .vl-pill-glider {
  transform: translateX(calc(100% + 4px));
  background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.vl-pill-toggle-inflow .vl-pill-item input:checked ~ span,
.vl-pill-toggle-inflow .vl-pill-item:has(input:checked) span,
.vl-pill-toggle-inflow .vl-pill-item.is-active,
.vl-pill-toggle-inflow .vl-pill-item.is-active span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.vl-pill-toggle-inflow .vl-pill-item input:checked ~ span i,
.vl-pill-toggle-inflow .vl-pill-item:has(input:checked) span i,
.vl-pill-toggle-inflow .vl-pill-item.is-active i {
  color: #FFFFFF !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* ==========================================================================
   VELORA LUXURY SEGMENTED CONTROL / SLIDING PILL SWITCHER
   Supports binary and 3-way toggle switches with smooth sliding spring physics
   ========================================================================== */
.vl-segmented-control {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  padding: 4px;
  border-radius: 0.875rem; /* 14px */
  background-color: var(--vl-surface, #FAF6F0);
  border: 1px solid var(--vl-line, #E8DED2);
  gap: 4px;
  user-select: none;
  box-sizing: border-box;
  isolation: isolate;
}

/* Sliding active pill indicator (glider) */
.vl-segmented-control .vl-segmented-glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 12px) / 2);
  border-radius: 0.625rem; /* 10px */
  background: linear-gradient(135deg, var(--vl-wine, #4D122D) 0%, #350A1E 100%);
  box-shadow: 0 4px 14px rgba(77, 18, 45, 0.28), 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(201, 163, 106, 0.25);
  border: 1px solid rgba(201, 163, 106, 0.2);
  pointer-events-none;
  z-index: 1;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.25, 0.64, 1), 
              background 0.3s ease, 
              box-shadow 0.3s ease;
  will-change: transform;
}

/* 2-Option glider positions */
.vl-segmented-control[data-active="0"] .vl-segmented-glider,
.vl-segmented-control.is-item-1 .vl-segmented-glider,
.vl-segmented-control:has(> button:nth-of-type(1).is-active) .vl-segmented-glider,
.vl-segmented-control:has(> .vl-segmented-btn:nth-of-type(1).is-active) .vl-segmented-glider,
.vl-segmented-control:has(> .vl-segmented-item:nth-of-type(1) input:checked) .vl-segmented-glider {
  transform: translateX(0);
}

.vl-segmented-control[data-active="1"] .vl-segmented-glider,
.vl-segmented-control.is-item-2 .vl-segmented-glider,
.vl-segmented-control:has(> button:nth-of-type(2).is-active) .vl-segmented-glider,
.vl-segmented-control:has(> .vl-segmented-btn:nth-of-type(2).is-active) .vl-segmented-glider,
.vl-segmented-control:has(> .vl-segmented-item:nth-of-type(2) input:checked) .vl-segmented-glider {
  transform: translateX(calc(100% + 4px));
}

/* 3-Option variant */
.vl-segmented-control.vl-segmented-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vl-segmented-control.vl-segmented-3 .vl-segmented-glider {
  width: calc((100% - 16px) / 3);
}
.vl-segmented-control.vl-segmented-3[data-active="0"] .vl-segmented-glider,
.vl-segmented-control.vl-segmented-3:has(> button:nth-of-type(1).is-active) .vl-segmented-glider {
  transform: translateX(0);
}
.vl-segmented-control.vl-segmented-3[data-active="1"] .vl-segmented-glider,
.vl-segmented-control.vl-segmented-3:has(> button:nth-of-type(2).is-active) .vl-segmented-glider {
  transform: translateX(calc(100% + 4px));
}
.vl-segmented-control.vl-segmented-3[data-active="2"] .vl-segmented-glider,
.vl-segmented-control.vl-segmented-3:has(> button:nth-of-type(3).is-active) .vl-segmented-glider {
  transform: translateX(calc(200% + 8px));
}

/* Buttons & Labels inside Segmented Control */
.vl-segmented-control button,
.vl-segmented-control .vl-segmented-btn,
.vl-segmented-control .vl-segmented-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  color: var(--vl-muted, #624B55);
  background: transparent;
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  outline: none;
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
  text-align: center;
  line-height: 1.25;
}

.vl-segmented-control button:hover,
.vl-segmented-control .vl-segmented-btn:hover,
.vl-segmented-control .vl-segmented-item:hover {
  color: var(--vl-wine, #4D122D);
}

.vl-segmented-control button:active,
.vl-segmented-control .vl-segmented-btn:active,
.vl-segmented-control .vl-segmented-item:active {
  transform: scale(0.98);
}

/* Active State Typography & Icon */
.vl-segmented-control button.is-active,
.vl-segmented-control .vl-segmented-btn.is-active,
.vl-segmented-control .vl-segmented-item.is-active,
.vl-segmented-control .vl-segmented-item:has(input:checked),
.vl-segmented-control .vl-segmented-item:has(input:checked) span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.vl-segmented-control button.is-active i,
.vl-segmented-control .vl-segmented-btn.is-active i,
.vl-segmented-control .vl-segmented-item.is-active i,
.vl-segmented-control .vl-segmented-item:has(input:checked) i {
  color: var(--vl-gold, #C9A36A) !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Luxury Gold Variant */
.vl-segmented-gold .vl-segmented-glider {
  background: linear-gradient(135deg, var(--vl-gold, #C9A36A) 0%, #A9834B 100%);
  box-shadow: 0 4px 14px rgba(201, 163, 106, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.vl-segmented-gold button.is-active,
.vl-segmented-gold .vl-segmented-btn.is-active,
.vl-segmented-gold .vl-segmented-item.is-active {
  color: #2A121C !important;
}
.vl-segmented-gold button.is-active i,
.vl-segmented-gold .vl-segmented-btn.is-active i,
.vl-segmented-gold .vl-segmented-item.is-active i {
  color: var(--vl-wine, #4D122D) !important;
}

/* Safety override: completely eliminate monospace font rendering */
.font-mono {
  font-family: inherit !important;
}