/* Hide vehicle Select2 boxes on front page until restoration completes (no empty dropdowns visible) */
#vehicle-selection.pv-restoring select.vehicle-selection-manufacturer,
#vehicle-selection.pv-restoring select.vehicle-selection-model,
#vehicle-selection.pv-restoring select.vehicle-selection-generation,
#vehicle-selection.pv-restoring select.vehicle-selection-modification,
#vehicle-selection.pv-restoring select.vehicle-selection-diameter,
#vehicle-selection.pv-restoring .select2-container,
.vehicle-selection-filter-container.pv-restoring select.vehicle-selection-manufacturer,
.vehicle-selection-filter-container.pv-restoring select.vehicle-selection-model,
.vehicle-selection-filter-container.pv-restoring select.vehicle-selection-generation,
.vehicle-selection-filter-container.pv-restoring select.vehicle-selection-modification,
.vehicle-selection-filter-container.pv-restoring select.vehicle-selection-diameter,
.vehicle-selection-filter-container.pv-restoring .select2-container {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.vehicle-selection-container .select2-selection {
  min-height: 40px;
}

.vehicle-selection-container .select2-selection__rendered {
  margin: 4px;
}

.vehicle-selection-container .select2-selection__arrow {
  margin: 4px;
}

/* Vehicle Selection Widget Button Overflow Fix */
.vehicle-selection-sidebar {
  width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
}

/* Hide navigation buttons by default - they'll be shown after vehicle activation */
.vehicle-selection-sidebar table {
  border-collapse: collapse;
  width: 100% !important;
  margin-bottom: 0em;
  table-layout: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: none !important;
}

/* Show navigation buttons when vehicle is active */
.vehicle-selection-sidebar.vehicle-active table {
  display: table !important;
}

/* Default: 2 buttons per row (50% each) */
.vehicle-selection-sidebar table tbody tr td {
  width: calc(50% - 5px) !important;
  padding: 0 3px !important;
  box-sizing: border-box !important;
  max-width: calc(50% - 5px) !important;
}

/* When there are 3 buttons (FLANTSID added), make all 33.33% with reduced padding */
.vehicle-selection-sidebar table tbody tr:has(td:nth-child(3)) td {
  width: calc(33.33% - 4px) !important;
  max-width: calc(33.33% - 4px) !important;
  padding: 0 2px !important;
}

.vehicle-selection-sidebar table tbody tr td a.btn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 1.0em !important;
  text-align: center !important;
  display: block !important;
  margin-top: 10px;
  transition: all 0.3s ease !important;
  padding: 12px 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hover effects for navigation buttons - using same style as Berocket flash */
.vehicle-selection-sidebar table tbody tr td a.btn:not(.no-animate):hover {
  background-color: #ff6b35 !important;
  box-shadow: 0 0 0 8px rgba(255, 107, 53, 0.3) !important;
  border-color: #ff6b35 !important;
  cursor: pointer !important;
  transform: scale(1.02) !important;
}

/* Animation for category dropdown - only flashes border/box-shadow, keeps original background */
@keyframes vehicle-dropdown-attention {
  0% { 
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    border-color: inherit;
  }
  50% { 
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.4);
    border-color: #ff6b35;
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    border-color: inherit;
  }
}

/* Animate category dropdown widget when vehicle is active - keeps original Select2 styling */
.select2-container.vehicle-active-dropdown .select2-selection--single {
  animation: vehicle-dropdown-attention 1.5s ease-in-out infinite !important;
  transition: none !important;
  -webkit-transition: none !important;
}

/* Stop animation on hover to allow normal Select2 hover behavior */
.select2-container.vehicle-active-dropdown .select2-selection--single:hover {
  animation: none !important;
}

/* Stop animation on category dropdown when filters are in URL or on category pages (same as buttons) */
body:has([data-filters-in-url="true"]) .select2-container.vehicle-active-dropdown .select2-selection--single,
body[data-filters-in-url="true"] .select2-container.vehicle-active-dropdown .select2-selection--single,
body:has([data-filters-in-url="true"]) .select2-container.vehicle-active-dropdown.select2-container--default .select2-selection--single,
body[data-filters-in-url="true"] .select2-container.vehicle-active-dropdown.select2-container--default .select2-selection--single,
body.tax-product_cat .select2-container.vehicle-active-dropdown .select2-selection--single,
body.woocommerce.archive.tax-product_cat .select2-container.vehicle-active-dropdown .select2-selection--single {
  animation: none !important;
}

/* Erilaius toggle label styles */
.vehicle-selection-erilaius-toggle label {
  color: #fff;
  text-transform: uppercase;
}

/* Winter toggle label styles */
.vehicle-selection-winter-toggle label {
  color: #fff;
  text-transform: uppercase;
}

/* Stock4 toggle label styles */
.vehicle-selection-stock4-toggle label {
  color: #fff;
  text-transform: uppercase;
}

/* Sidebar widget uses black label */
.vehicle-selection-sidebar .vehicle-selection-erilaius-toggle label {
  color: #000;
  text-transform: none;
}

/* Front page selector: Label hover white (override theme's bold black) - keep bold on hover */
.vehicle-selection.vehicle-selection-container .vehicle-selection-erilaius-toggle label:hover {
  color: #fff !important;
  font-weight: bold !important;
}

/* Front page selector: Winter label hover white (override theme's bold black) - keep bold on hover */
.vehicle-selection.vehicle-selection-container .vehicle-selection-winter-toggle label:hover {
  color: #fff !important;
  font-weight: bold !important;
}

/* Front page selector: Stock4 label hover white (override theme's bold black) - keep bold on hover */
.vehicle-selection.vehicle-selection-container .vehicle-selection-stock4-toggle label:hover {
  color: #fff !important;
  font-weight: bold !important;
}

/* Front page selector: Stock4 label active/checked white */
.vehicle-selection.vehicle-selection-container .vehicle-selection-stock4-toggle label:active,
.vehicle-selection.vehicle-selection-container .vehicle-selection-stock4-toggle input[type="checkbox"]:checked + label {
  color: #fff !important;
}

/* Front page selector: Checkbox background black when checked */
.vehicle-selection.vehicle-selection-container .bapf_ckbox_sqchck input[type="checkbox"]:checked {
  background-color: #000 !important;
  border-color: #000 !important;
}

/* Front page selector: Checkbox checkmark (tick) white */
.vehicle-selection.vehicle-selection-container .bapf_ckbox_sqchck input[type="checkbox"]:checked:after {
  border-bottom-color: #fff !important;
  border-right-color: #fff !important;
}

/* BeRocket group checkboxes: Make checkbox background black and checkmark white */
.berocket-group-123168-checkboxes .bapf_ckbox_sqchck input[type="checkbox"]:checked {
  background-color: #000 !important;
  border-color: #000 !important;
}

/* Make checkmark white and slightly thicker for better visibility */
.berocket-group-123168-checkboxes .bapf_ckbox_sqchck input[type="checkbox"]:checked:after,
.berocket-group-123168-erilaius-toggle .bapf_ckbox_sqchck input[type="checkbox"]:checked:after,
.berocket-group-123168-winter-toggle .bapf_ckbox_sqchck input[type="checkbox"]:checked:after,
.berocket-group-123168-stock4-toggle .bapf_ckbox_sqchck input[type="checkbox"]:checked:after,
.berocket-group-123168-checkboxes input[type="checkbox"]:checked:after,
#berocket-group-123168-erilaius:checked:after,
#berocket-group-123168-winter:checked:after,
#berocket-group-123168-stock4:checked:after {
  border-bottom-color: #fff !important;
  border-right-color: #fff !important;
  border-bottom-width: 2.5px !important;
  border-right-width: 2.5px !important;
}

/* Use BeRocket checkbox visuals; only adjust label color/case per location */

/* Pulsing animation to draw attention to navigation buttons - same as Berocket flash */
@keyframes vehicle-nav-attention {
  0% { 
    background-color: #424242; 
    box-shadow: 0 0 0 0 rgba(66, 66, 66, 0.7);
  }
  50% { 
    background-color: #ff6b35; 
    box-shadow: 0 0 0 8px rgba(255, 107, 53, 0.3);
  }
  100% { 
    background-color: #424242; 
    box-shadow: 0 0 0 0 rgba(66, 66, 66, 0.7);
  }
}

/* Animate navigation buttons only on main shop page (no filters in URL) */
.vehicle-selection-sidebar.vehicle-active table tbody tr td a.btn {
  animation: vehicle-nav-attention 1.5s ease-in-out infinite;
  border-color: #424242 !important;
}

/* Stop animation on category pages with filters in URL */
body:has([data-filters-in-url="true"]) .vehicle-selection-sidebar table tbody tr td a.btn,
.vehicle-selection-sidebar table tbody tr td a.btn.no-animate {
  animation: none !important;
}

/* Vehicle Selection Widget Button Styling */
button.border-black.btn.big.vehicle-selection-widget-save.vehicle-active {
  background-color: #41a74f !important;
  margin-bottom: 10px;
}

/* Disabled button styling */
button.vehicle-selection-widget-save.disabled,
button.vehicle-selection-widget-save[disabled] {
  opacity: 0.8 !important;
  cursor: not-allowed !important;
}

@keyframes vehicle-selection-loading-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200% 0;
  }
}

button.vehicle-selection-widget-save.vehicle-loading {
  position: relative;
  overflow: hidden;
  color: #fff !important;
}

button.vehicle-selection-widget-save.vehicle-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Dense repeating stripes for a richer effect */
  background-image:
    repeating-linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.16) 0px,
      rgba(255, 255, 255, 0.16) 6px,
      rgba(255, 255, 255, 0.04) 6px,
      rgba(255, 255, 255, 0.04) 12px
    );
  background-size: 200% 100%;
  animation: vehicle-selection-loading-stripes 1.2s linear infinite;
  opacity: 0.5;
  pointer-events: none;
}

/* Secondary cross-hatch layer for cooler multi-line effect */
@keyframes vehicle-selection-loading-stripes-2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0;
  }
}

button.vehicle-selection-widget-save.vehicle-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      55deg,
      rgba(0, 0, 0, 0.12) 0px,
      rgba(0, 0, 0, 0.12) 5px,
      rgba(0, 0, 0, 0.03) 5px,
      rgba(0, 0, 0, 0.03) 10px
    );
  background-size: 200% 100%;
  animation: vehicle-selection-loading-stripes-2 1.6s linear infinite;
  opacity: 0.35;
  pointer-events: none;
}

/* Vehicle Selection Container Layout */
.vehicle-selection.container,
.vehicle-selection-container {
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.vehicle-selection-filter-container {
  text-align: center;
}

/* Vehicle Selection Form Elements */
.vehicle-selection select {
  width: 160px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
}

.vehicle-selection .vehicle-selection-save {
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  margin-bottom: 10px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

/* Front page selector loader - positioned next to diameter field */
#vehicle-selection .vehicle-selection-loading {
  /* Override any fixed positioning from custom-loading-cursor class */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  
  /* Always keep element in DOM to prevent animation restart - use visibility/opacity for show/hide */
  display: inline-block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  vertical-align: middle;
  margin-left: 10px;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  
  /* Spinner border */
  border: 3px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: #ffffff !important;
  border-right-color: rgba(255, 255, 255, 0.3) !important;
  border-bottom-color: rgba(255, 255, 255, 0.3) !important;
  border-left-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  
  /* Remove any filters/effects that might cause issues */
  filter: brightness(1) contrast(1) grayscale(0) !important;
  
  /* Positioning */
  pointer-events: none !important;
  z-index: 1 !important;
  
  /* Remove any background or content */
  background: transparent !important;
  content: none !important;
  
  /* Hardware acceleration */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  /* No animation by default - animation only runs when is-loading class is present */
  -webkit-animation: none !important;
  animation: none !important;
}

/* Show and animate loader when is-loading class is present */
/* CRITICAL: Override inline display:none from hide() to prevent animation restart */
#vehicle-selection .vehicle-selection-loading.is-loading {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Use animation-play-state to prevent restart - animation continues from current position */
  -webkit-animation: vehicle-spinner-rotate 1s linear infinite !important;
  animation: vehicle-spinner-rotate 1s linear infinite !important;
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important;
}

/* Override inline display:none if is-loading class is present (even if hide() was called) */
#vehicle-selection .vehicle-selection-loading.is-loading[style*="display: none"],
#vehicle-selection .vehicle-selection-loading.is-loading[style*="display:none"] {
  display: inline-block !important;
  /* Keep animation running even if hide() was called */
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important;
}

/* Support inline style show() for backward compatibility - but DON'T trigger animation */
/* Animation should ONLY be triggered by is-loading class to prevent restarts */
#vehicle-selection .vehicle-selection-loading[style*="display: block"],
#vehicle-selection .vehicle-selection-loading[style*="display:inline-block"],
#vehicle-selection .vehicle-selection-loading[style*="display: block;"],
#vehicle-selection .vehicle-selection-loading[style*="display:inline-block;"] {
  visibility: visible !important;
  opacity: 1 !important;
  /* Don't trigger animation here - only is-loading class should trigger it */
  /* This prevents animation restart when show()/hide() is called multiple times */
}

/* Remove any pseudo-elements that might interfere */
#vehicle-selection .vehicle-selection-loading::before,
#vehicle-selection .vehicle-selection-loading::after {
  display: none !important;
  content: none !important;
}

/* Smooth spinner rotation animation - very simple approach */
/* Use animation-fill-mode: forwards to maintain state during brief class removal */
@keyframes vehicle-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes vehicle-spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/* CRITICAL: Don't override transform here - animation needs to control rotation */
/* CSS animations with transform automatically get hardware acceleration */
/* Setting transform: translateZ(0) here would override the animation's transform: rotate() */
/* Hardware acceleration is provided by the animation's transform property itself */
#vehicle-selection .vehicle-selection-loading.is-loading {
  /* Only set will-change for optimization - don't override transform */
  will-change: transform;
  /* The animation's transform: rotate() will provide hardware acceleration */
}

/* Also support inline style show() for compatibility - but DON'T trigger animation */
/* Animation should ONLY be triggered by is-loading class to prevent restarts */
#vehicle-selection .vehicle-selection-loading[style*="display: block"],
#vehicle-selection .vehicle-selection-loading[style*="display:inline-block"],
#vehicle-selection .vehicle-selection-loading[style*="display: block;"],
#vehicle-selection .vehicle-selection-loading[style*="display:inline-block;"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Don't trigger animation here - only is-loading class should trigger it */
  /* This prevents animation restart when show()/hide() is called multiple times */
}

/* Disable vehicle selection checkboxes until diameter is selected */
/* IMPORTANT: Only target the toggle containers, NOT Select2 dropdowns */
/* Support both #vehicle-selection (category pages) and .vehicle-selection-filter-container (front page widget) */
#vehicle-selection .vehicle-selection-erilaius-toggle,
#vehicle-selection .vehicle-selection-winter-toggle,
#vehicle-selection .vehicle-selection-stock4-toggle,
.vehicle-selection-filter-container .vehicle-selection-erilaius-toggle,
.vehicle-selection-filter-container .vehicle-selection-winter-toggle,
.vehicle-selection-filter-container .vehicle-selection-stock4-toggle {
  opacity: 0.4 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  cursor: not-allowed !important;
}

/* Disable checkbox inputs and labels - be specific to avoid affecting Select2 */
#vehicle-selection .vehicle-selection-erilaius-toggle input[type="checkbox"],
#vehicle-selection .vehicle-selection-winter-toggle input[type="checkbox"],
#vehicle-selection .vehicle-selection-stock4-toggle input[type="checkbox"],
#vehicle-selection .vehicle-selection-erilaius-toggle label,
#vehicle-selection .vehicle-selection-winter-toggle label,
#vehicle-selection .vehicle-selection-stock4-toggle label,
.vehicle-selection-filter-container .vehicle-selection-erilaius-toggle input[type="checkbox"],
.vehicle-selection-filter-container .vehicle-selection-winter-toggle input[type="checkbox"],
.vehicle-selection-filter-container .vehicle-selection-stock4-toggle input[type="checkbox"],
.vehicle-selection-filter-container .vehicle-selection-erilaius-toggle label,
.vehicle-selection-filter-container .vehicle-selection-winter-toggle label,
.vehicle-selection-filter-container .vehicle-selection-stock4-toggle label {
  cursor: not-allowed !important;
  opacity: 0.4 !important;
}

/* Style disabled Select2 dropdowns - grey them out */
/* Target the select element itself when disabled */
#vehicle-selection select.vehicle-selection-model:disabled,
#vehicle-selection select.vehicle-selection-generation:disabled,
#vehicle-selection select.vehicle-selection-modification:disabled,
#vehicle-selection select.vehicle-selection-diameter:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Style disabled Select2 containers - use general sibling selector (~) in case structure differs */
#vehicle-selection select.vehicle-selection-model[disabled] ~ .select2-container,
#vehicle-selection select.vehicle-selection-generation[disabled] ~ .select2-container,
#vehicle-selection select.vehicle-selection-modification[disabled] ~ .select2-container,
#vehicle-selection select.vehicle-selection-diameter[disabled] ~ .select2-container,
#vehicle-selection select.vehicle-selection-model:disabled ~ .select2-container,
#vehicle-selection select.vehicle-selection-generation:disabled ~ .select2-container,
#vehicle-selection select.vehicle-selection-modification:disabled ~ .select2-container,
#vehicle-selection select.vehicle-selection-diameter:disabled ~ .select2-container {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Style the selection element inside disabled Select2 containers */
#vehicle-selection select.vehicle-selection-model[disabled] ~ .select2-container .select2-selection,
#vehicle-selection select.vehicle-selection-generation[disabled] ~ .select2-container .select2-selection,
#vehicle-selection select.vehicle-selection-modification[disabled] ~ .select2-container .select2-selection,
#vehicle-selection select.vehicle-selection-diameter[disabled] ~ .select2-container .select2-selection,
#vehicle-selection select.vehicle-selection-model:disabled ~ .select2-container .select2-selection,
#vehicle-selection select.vehicle-selection-generation:disabled ~ .select2-container .select2-selection,
#vehicle-selection select.vehicle-selection-modification:disabled ~ .select2-container .select2-selection,
#vehicle-selection select.vehicle-selection-diameter:disabled ~ .select2-container .select2-selection {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: #f5f5f5 !important;
}

/* Enable checkboxes when diameter is selected - using JavaScript class */
/* Support both #vehicle-selection (category pages) and .vehicle-selection-filter-container (front page widget) */
#vehicle-selection.diameter-selected .vehicle-selection-erilaius-toggle,
#vehicle-selection.diameter-selected .vehicle-selection-winter-toggle,
#vehicle-selection.diameter-selected .vehicle-selection-stock4-toggle,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-erilaius-toggle,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-winter-toggle,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-stock4-toggle {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Enable checkbox inputs and labels when diameter selected */
#vehicle-selection.diameter-selected .vehicle-selection-erilaius-toggle input,
#vehicle-selection.diameter-selected .vehicle-selection-winter-toggle input,
#vehicle-selection.diameter-selected .vehicle-selection-stock4-toggle input,
#vehicle-selection.diameter-selected .vehicle-selection-erilaius-toggle label,
#vehicle-selection.diameter-selected .vehicle-selection-winter-toggle label,
#vehicle-selection.diameter-selected .vehicle-selection-stock4-toggle label,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-erilaius-toggle input,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-winter-toggle input,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-stock4-toggle input,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-erilaius-toggle label,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-winter-toggle label,
.vehicle-selection-filter-container.diameter-selected .vehicle-selection-stock4-toggle label {
  cursor: pointer !important;
  opacity: 1 !important;
}

/* E-shop: OTSI ERILAIUSEGA checkbox always clickable (only disabled on front page until car selected) */
#vehicle-selection.pv-erilaius-always-enabled .vehicle-selection-erilaius-toggle,
.vehicle-selection-filter-container.pv-erilaius-always-enabled .vehicle-selection-erilaius-toggle {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
#vehicle-selection.pv-erilaius-always-enabled .vehicle-selection-erilaius-toggle input,
#vehicle-selection.pv-erilaius-always-enabled .vehicle-selection-erilaius-toggle label,
.vehicle-selection-filter-container.pv-erilaius-always-enabled .vehicle-selection-erilaius-toggle input,
.vehicle-selection-filter-container.pv-erilaius-always-enabled .vehicle-selection-erilaius-toggle label {
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Ensure animation continues smoothly without restarting */
#vehicle-selection .vehicle-selection-loading:not([style*="display: none"]) {
  /* Animation should continue from current state, not restart */
  animation-iteration-count: infinite !important;
  -webkit-animation-iteration-count: infinite !important;
}

/* Mobile view - ensure loader works properly */
/* CRITICAL: Dimensions are set statically on mobile - they should NOT change during animation */
/* If dimensions change during animation (even via JS), it causes reflow and restarts animation */
@media (max-width: 480px) {
  #vehicle-selection .vehicle-selection-loading {
    /* Set dimensions once - these should remain constant during animation */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-width: 2px !important;
    margin-left: 8px !important;
    
    /* CRITICAL: Prevent reflow during animation - use isolation and contain */
    contain: layout style paint !important;
    isolation: isolate !important;
  }
  
  /* When is-loading class is present, lock dimensions and ensure animation continues */
  /* CRITICAL: Don't override transform - let animation handle rotation transform */
  #vehicle-selection .vehicle-selection-loading.is-loading {
    /* Lock dimensions - prevent any JS or CSS from changing them during animation */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    border-width: 2px !important;
    
    /* Force animation to continue, never restart */
    -webkit-animation: vehicle-spinner-rotate 1s linear infinite !important;
    animation: vehicle-spinner-rotate 1s linear infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    
    /* DON'T override transform - animation needs to control rotation */
    /* The animation's transform: rotate() provides hardware acceleration */
    /* Setting will-change helps browser optimize */
    will-change: transform !important;
    
    /* Prevent any layout recalculation that could restart animation */
    contain: strict !important;
    isolation: isolate !important;
  }
}

/* Responsive Button Container */
.vehicle-selection .vehicle-selection-save-container {
  display: flex;
  width: 100%;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Responsive Adjustments for Narrow Screens */
@media (max-width: 480px) {
  .vehicle-selection .vehicle-selection-save {
    padding: 0 8px;
    font-size: 14px;
  }
  .vehicle-selection .vehicle-selection-save-container {
    gap: 5px;
  }
  
  /* Mobile Select2 dropdown - keep default positioning, make results scrollable */
  .select2-dropdown {
    z-index: 9999 !important;
    /* Keep default positioning - don't use fixed */
  }
  
  /* Ensure Select2 search field is visible when keyboard appears */
  .select2-search--dropdown .select2-search__field {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 8px !important;
  }
  
  /* Make Select2 results list scrollable on mobile - this is what scrolls, not the dropdown */
  .select2-results__options {
    max-height: 50vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  
  /* Ensure Select2 container doesn't get cut off */
  .select2-container--open .select2-dropdown {
    margin-top: 5px !important;
  }
  
  /* Vehicle selection Select2 containers - ensure they're scrollable into view */
  .vehicle-selection-container .select2-container--open {
    position: relative !important;
  }
  
  /* CRITICAL: Stabilize parent container of loader to prevent layout shifts that restart animation */
  /* The loader is inside a div with display: inline-block - ensure it's stable on mobile */
  #vehicle-selection div[style*="display: inline-block"] {
    /* Prevent layout recalculation that could restart animation */
    contain: layout !important;
  }
}

@media (max-width: 320px) {
  .vehicle-selection .vehicle-selection-save {
    padding: 0 4px;
    font-size: 12px;
  }
}

/* Override Table-based Styling */
.vehicle-selection-save-container table,
.vehicle-selection-save-container td {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.vehicle-selection-save-container .btn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.vehicle-selection-save-container {
  overflow: hidden;
}

.vehicle-selection-save-container table {
  table-layout: fixed !important;
  width: 100% !important;
}

.vehicle-selection-save-container td {
  width: 50% !important;
  padding: 0 5px !important;
}

/* Accessible Hidden Labels for Screen Readers */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Berocket Filter Button Flashing Animation */
@keyframes berocket-flash {
  0% { 
    background-color: #424242; 
    box-shadow: 0 0 0 0 rgba(66, 66, 66, 0.7);
  }
  50% { 
    background-color: #ff6b35; 
    box-shadow: 0 0 0 8px rgba(255, 107, 53, 0.3);
  }
  100% { 
    background-color: #424242; 
    box-shadow: 0 0 0 0 rgba(66, 66, 66, 0.7);
  }
}

/* Apply/OK button loading state: hide original text, show spinner; do not replace innerHTML so 2nd click works */
.pv-apply-button-loading {
  animation: none !important;
  /* Do not use pointer-events: none – click must reach the button so BeRocket/OK handler runs */
}
.pv-apply-button-loading .pv-button-original-text {
  display: none !important;
}
.pv-apply-button-loading .pv-button-inline-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: vehicle-spinner-rotate 0.7s linear infinite;
  vertical-align: middle;
  box-sizing: border-box;
}
.pv-secondary-tire-section .pv-apply-button-loading .pv-button-inline-spinner,
.pv-tire-size-input-widget .pv-apply-button-loading .pv-button-inline-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

.bapf_button.bapf_update.flash-filter-button {
  animation: berocket-flash 1.5s ease-in-out infinite;
  border-color: #ff6b35 !important;
}

/* Tire size OK button: match berocket-manual-button / bapf_divi_button styling */
.pv-secondary-tire-section .bapf_button.bapf_update,
.pv-tire-size-input-widget .bapf_button.bapf_update {
  background-color: #424242;
  border-color: #424242;
  color: #fff;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
  border: none;
}
.pv-secondary-tire-section .bapf_button.bapf_update:hover,
.pv-tire-size-input-widget .bapf_button.bapf_update:hover {
  background-color: #dc4348;
  border-color: #dc4348;
}

/* Ensure flashing works for both button containers and secondary tire OK button */
.berocket-manual-button .bapf_button.bapf_update.flash-filter-button,
.bapf_sfilter .bapf_button.bapf_update.flash-filter-button,
.pv-secondary-tire-section .bapf_button.bapf_update.flash-filter-button {
  animation: berocket-flash 1.5s ease-in-out infinite;
  border-color: #ff6b35 !important;
}

/* Mobile tire input: full-width inputs, smaller OK button, LAIUS below */
@media (max-width: 768px) {
  .pv-tire-size-input-widget,
  .berocket_inline_filters.pv-tire-size-input-widget {
    width: 100% !important;
    min-width: 100% !important;
  }
  .pv-merged-tire-size-container {
    width: 100% !important;
  }
  .pv-primary-tire-section,
  .pv-secondary-tire-section {
    width: 100%;
  }
  .pv-secondary-tire-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .pv-secondary-tire-section input#pv-secondary-tire-size-input {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .pv-secondary-tire-section .pv-secondary-ok-button,
  .pv-secondary-tire-section .bapf_button.bapf_update.pv-secondary-ok-button {
    width: 28px !important;
    min-width: 28px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }
  .pv-primary-tire-row .pv-tire-btn-spacer {
    width: 28px !important;
    min-width: 28px !important;
  }
}

/* Vehicle Selection Button Flashing Animation (for Muuda sõidukit / Muuda diameetrit) */
button.vehicle-selection-widget-save.vehicle-flash,
button.vehicle-selection-save.vehicle-flash {
  animation: berocket-flash 1.5s ease-in-out infinite;
  border-color: #ff6b35 !important;
}

/* Active Vehicle Display */
.active-vehicle-display {
    display: block !important;
    width: 100%;
    max-width: 800px;
    padding: 8px 15px;
    background: rgb(0 0 0 / 50%);
    border-radius: 1px;
    font-size: 12px;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    margin: 30px 0 0 0;
    clear: both;
    box-sizing: border-box;
}

.active-vehicle-display.force-hidden {
    display: none !important;
}

.active-vehicle-display:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Vehicle Header */
.vehicle-header {
  padding-bottom: 4px;
  border-bottom: 1px solid #c2c2c2;
  font-size: 13px !important;
  color: white !important;
  display: block;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* Technical Specifications */
.vehicle-tech-specs {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 5px;
}

/* Specifications Table */
.specs-table {
    flex: 2;
    min-width: 300px;
}

.specs-header {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.9fr;
    gap: 12px;
    padding: 4px 0;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    color: white;
    border-bottom: 1px solid #e0e0e0;
}

.specs-header .spec-col:nth-child(1) {
    justify-content: flex-start;
}

.specs-header .spec-col:nth-child(2) {
    justify-content: left;
}

.specs-header .spec-col:nth-child(3) {
    justify-content: flex-end;
}

.specs-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.9fr;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    align-items: start;
    justify-items: start;
}

.spec-col {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.specs-row .spec-col:nth-child(1) {
    justify-content: flex-start;
}

.specs-row .spec-col:nth-child(2) {
    justify-content: flex-start;
    text-align: left;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    align-items: flex-start;
    overflow: visible;
    text-indent: 0;
    line-height: 1.5;
}

.rim-spec {
    font-weight: 500;
    text-align: left;
    display: inline-block;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
    text-indent: 0;
    line-height: 1.5;
    vertical-align: top;
}

.tire-spec {
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.5;
}

.offset-spec {
    color: white;
    justify-content: center;
    text-align: center;
}

.pressure-spec {
    color: white;
    justify-content: center;
}

/* General Specifications */
.general-specs {
    flex: 0 0 auto;
    max-width: 210px;
    min-width: 150px;
}

.spec-item {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.3;
}

.spec-item strong {
    color: white;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .active-vehicle-display {
        margin: 20px 10px 0 10px;
        padding: 10px 12px;
        font-size: 11px;
        max-width: calc(100% - 20px);
    }
    
    .vehicle-tech-specs {
        flex-direction: column;
        gap: 15px;
    }
    .specs-header .spec-col:nth-child(2) {
      justify-content: center;
  }

    
    .specs-table {
        min-width: auto;
        width: 100%;
    }
    
    .general-specs {
        width: 100%;
    }
    
    .specs-header,
    .specs-row {
        grid-template-columns: 1fr 1fr 1fr 0.6fr;
        gap: 8px;
    }
    
    .general-specs {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .active-vehicle-display {
        margin: 15px 5px 0 5px;
        padding: 8px 10px;
        font-size: 10px;
        max-width: calc(100% - 10px);
    }
    
    .vehicle-header {
        font-size: 11px !important;
    }
    
    /* Show 3 columns on mobile: Tire, Rim, Offset */
    .specs-header,
    .specs-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    
    /* Ensure offset column is visible */
    .specs-header .spec-col:nth-child(3),
    .specs-row .spec-col:nth-child(3) {
        display: flex !important;
        font-size: 12px;
    }
    
    /* Hide 4th column if it exists */
    .specs-header .spec-col:nth-child(4),
    .specs-row .spec-col:nth-child(4) {
        display: none;
    }
    
    /* Make general specs items display in a 2-column grid on mobile to save space */
    .general-specs {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 8px 12px;
        width: 100%;
    }
    
    .spec-item {
        margin-bottom: 4px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    /* Reorder items for mobile: Poldivalem and Keskava on first row, Kinnitusviis and Keermemõõt on second row */
    .general-specs .spec-item:nth-child(1) {
        order: 1;
    }
    
    .general-specs .spec-item:nth-child(2) {
        order: 3;
    }
    
    .general-specs .spec-item:nth-child(3) {
        order: 4;
    }
    
    .general-specs .spec-item:nth-child(4) {
        order: 2;
    }
    
    /* Show offset info inline with Poldivalem on mobile */
    .offset-in-general-specs {
        display: inline;
        margin-left: 8px;
        font-size: 10px;
    }
    
    /* On very small screens, show offset on new line */
    @media (max-width: 360px) {
        .offset-in-general-specs {
            display: block;
            margin-left: 0;
            margin-top: 4px;
        }
    }
}