/* ============================================
   CSS Variables for LeagueStageCreation
   Added: 25/08/2025
   Purpose: Centralize common values
   ============================================ */
:root {
  /* Colors */
  --rumble-red: #f5484d;
  --rumble-green: #b9ff66;
  --rumble-purple: #9747ff;
  --rumble-gold: #ffd700;
  
  /* Background Colors */
  --bg-dark: rgb(33, 37, 41);
  --bg-dark-transparent: rgba(33, 37, 41, 0.95);
  --bg-light-transparent: rgba(255, 255, 255, 0.05);
  --bg-light-transparent-hover: rgba(255, 255, 255, 0.08);
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ============================================
   Mobile Specific Fixes - LeagueStageCreation
   Added: 21/08/2025
   Fix: Remove margins for proper mobile layout
   ============================================ */
@media (max-width: 767px) {
  /* Remove margin-top from main container on mobile */
  .league-stage-creation-page .w-1320.mt-2,
  .league-stage-creation-page .w-1320.m-auto.mt-2 {
    margin-top: 0 !important;
  }
  
  /* Ensure full width on mobile */
  .league-stage-creation-page .w-1320 {
    width: 100% !important;
    padding: 0 !important;
  }
  
  /* Remove any padding from form container */
  .league-stage-creation-page form > .w-1320 {
    padding: 0 !important;
  }
  
  /* Fix sticky menu bar container fit */
  .league-stage-creation-page .sticky-menu-bar {
    width: 100% !important;
    padding: 8px !important;
  }
  
  /* Ensure buttons don't overflow */
  .league-stage-creation-page .sticky-menu-bar .d-flex.gap-2 {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Make buttons smaller if needed */
  .league-stage-creation-page .sticky-menu-bar button {
    min-width: auto;
    white-space: nowrap;
  }
  
  /* Fix 1: Advanced Options button colors - override bright red with transparent theme */
  .league-stage-creation-page .advance-option-toggle.mobile-toggle {
    /* Use transparent red gradient like other pages */
    background: linear-gradient(135deg, 
      rgba(255, 0, 0, 0.2) 0%, 
      rgba(255, 0, 0, 0.1) 100%
    ) !important;
    /* Thin red border */
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    /* Ensure button is tappable */
    min-height: 44px;
    padding: 12px 20px;
    width: 100%;
    margin: 16px 0;
  }
  
  .league-stage-creation-page .advance-option-toggle.mobile-toggle:hover {
    background: linear-gradient(135deg, 
      rgba(255, 0, 0, 0.3) 0%, 
      rgba(255, 0, 0, 0.2) 100%
    ) !important;
    border-color: rgba(255, 0, 0, 0.4) !important;
    transform: translateY(-2px);
  }
  
  .league-stage-creation-page .advance-option-toggle.mobile-toggle:active {
    transform: translateY(0);
  }
  
  /* Fix 2: Mobile background - Now handled centrally in mobile-background-override.css */
  /* Keeping only page-specific height requirement */
  .league-stage-creation-page {
    min-height: 100vh;
  }
  
  /* Fix 3: Independent scroll for each panel */
  .league-stage-creation-page .carousel-panel {
    /* Allow scroll on all panels */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    /* Disable smooth scrolling to prevent interference with scroll reset */
    scroll-behavior: auto;
    /* Override excessive min-height from OnGoingRumblePage.css */
    min-height: auto !important;
    height: 100%;
    /* Ensure panels can be scrolled on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Fix 4: Ensure main panel can scroll by overriding overflow: visible */
  .league-stage-creation-page .carousel-panel.active {
    overflow-y: auto !important;
  }
  
  /* Fix 5: Ensure proper swipe behavior by controlling overflow during swipe */
  .league-stage-creation-page .mobile-panels-carousel-container {
    /* Ensure touch events are properly captured */
    touch-action: pan-y pinch-zoom;
  }
  
  /* During swipe, ensure no elements interfere with touch events */
  .league-stage-creation-page .mobile-panels-carousel-container.swiping .carousel-panel {
    pointer-events: none;
  }
  
  .league-stage-creation-page .mobile-panels-carousel-container.swiping .carousel-panel * {
    pointer-events: none;
  }
  
  /* Ensure Advanced Options button is always clickable */
  .league-stage-creation-page .advance-option-toggle.mobile-toggle {
    pointer-events: auto !important;
    z-index: 100;
    position: relative;
  }
  
  /* Ensure panel container has proper height */
  .league-stage-creation-page .panel-container-mobile {
    height: var(--mobile-panel-height); /* Uses centralized variable */
  }
  
  /* Ensure carousel wrapper doesn't have conflicting overflow */
  .league-stage-creation-page .mobile-panels-carousel-wrapper {
    overflow-x: hidden;
    overflow-y: hidden; /* Let individual panels handle vertical scroll */
    height: 100%;
  }
  
  /* Ensure each panel maintains its own scroll context */
  .league-stage-creation-page .carousel-panel {
    /* Create stacking context for independent scroll */
    position: relative;
    z-index: 1;
    /* Ensure content doesn't affect other panels */
    contain: layout style;
  }

  /* (Old row rule removed - replaced by Option A solution below) */

  /* First column: no left padding, right padding for gap */
  .league-stage-creation-page .main-info-fields .col-6:nth-child(odd) {
    padding-left: 0 !important;
    padding-right: 0.25rem !important;
  }

  /* Second column: left padding for gap, no right padding */
  .league-stage-creation-page .main-info-fields .col-6:nth-child(even) {
    padding-left: 0.25rem !important;
    padding-right: 0 !important;
  }

  /* Override any inline styles */
  .league-stage-creation-page .main-info-fields .col-6[style*="padding"] {
    /* Will be overridden by nth-child rules above due to higher specificity */
  }
}

/* Collapsible Scoring Explanation Styles - Minimal & Modern */
.scoring-explanation-container {
  margin-top: 1rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 0 20px;
}

.scoring-explanation-header {
  padding: 16px 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  user-select: none;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
}

.scoring-explanation-header:hover {
  color: rgba(255, 255, 255, 1);
}

/* Removed ::after hover indicator */

.scoring-title {
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 16px;
  letter-spacing: 0.3px;
}

/* Modern expand indicator */
.scoring-expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.scoring-expand-icon.expanded {
  transform: rotate(90deg);
}

/* Add icon styling for scoring system */
.scoring-icon {
  font-size: 16px;
  opacity: 1;
  color: #b9ff66;
}

.scoring-content {
  padding: 20px 0;
  animation: slideDown 0.3s ease-out;
}

/* Modern scoring grid layout - 2 columns for setters/repeaters */
.scoring-content .battle-scoring-grid {
  display: block;
  margin: 0;
  padding: 0;
}

/* Main row for setters and repeaters */
.scoring-content .battle-scoring-grid .scoring-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
}

/* Bonus section with 2x2 grid */
.scoring-content .battle-scoring-grid .bonus-section {
  margin-top: 1.5rem;
}

.scoring-content .battle-scoring-grid .bonus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  margin-top: 1rem;
}

/* Removed visual separator between setters and repeaters */


/* Main scoring row - all three scores in columns */
.scoring-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  position: relative;
}

/* Removed vertical separators */

.scoring-column {
  padding: 0;
}

.scoring-label {
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Removed green dots from labels */

.scoring-content .battle-score-item {
  padding: 8px 0;
  color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

/* Removed hover effect - items always at full opacity */

.scoring-content .battle-score-value {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
}

/* Bonus section styling */

.scoring-content .battle-bonus-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0;
}

.scoring-content .battle-bonus-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  background-color: transparent;
  color: rgba(255, 255, 255, 1);
  font-size: 0.9rem;
  position: relative;
}

/* Removed all hover effects - items always at full opacity */

.scoring-content .battle-bonus-value {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsiveness for collapsible sections */
@media (max-width: 768px) {
  .scoring-explanation-container {
    padding: 0 16px;
  }
  
  .scoring-content .battle-scoring-grid .scoring-main-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  /* Removed visual separator on mobile rule - no longer needed */
  
  .scoring-column:not(:first-child) {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .scoring-content .battle-scoring-grid .bonus-grid {
    grid-template-columns: 1fr;
  }
  
  .scoring-explanation-header {
    padding: 10px 12px;
  }
}

/* Battle Gameplay Cards Styling */
.battle-gameplay-options {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem; /* Desktop spacing for cards section */
}

.battle-gameplay-card {
  flex: 1;
  background: rgba(33, 37, 41, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.battle-gameplay-card:hover {
  background: rgba(33, 37, 41, 0.98);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.battle-gameplay-card.active {
  background: rgba(33, 37, 41, 0.97);
  border-color: #b9ff66;
}

.battle-card-header {
  padding: 24px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.battle-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.battle-status-btn {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.battle-status-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.battle-status-btn.active {
  background: #b9ff66;
  border-color: #b9ff66;
  color: #000;
  font-weight: 500;
}

.battle-card-body {
  padding: 0 1rem 1rem 1rem;
}

.battle-boulder-question {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}

.battle-boulder-input {
  width: 80px;
  height: 40px !important;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: none;
  outline: none;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.battle-boulder-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
}

.battle-boulder-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.battle-description {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* NOTE: This is overridden by .scoring-content .battle-scoring-grid above */
.battle-scoring-grid {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.battle-scoring-column {
  flex: 1;
}

.battle-scoring-header {
  margin: 0 0 12px 0;
  padding-bottom: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #b9ff66;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.battle-score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 1);
}


.battle-score-value {
  font-weight: 500;
  color: #fff;
}

.battle-bonus-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.battle-bonus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.battle-bonus-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 1);
}

.battle-bonus-value {
  font-weight: 500;
  color: #fff;
}

/* Jam Session Gameplay Methods Row - Desktop */
.gameplay-methods-row {
  margin-bottom: 1.5rem; /* Desktop spacing for cards section */
}

/* Jam Session Gameplay Method Cards */
.gameplay-method-card {
  background: rgba(33, 37, 41, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.gameplay-method-card:hover {
  background: rgba(33, 37, 41, 0.98);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.gameplay-method-card.active {
  background: rgba(33, 37, 41, 0.97);
  border-color: #b9ff66;
}

.method-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  text-align: center;
}

.method-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.method-status {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 20px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.method-status:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.method-status.active {
  background: #b9ff66;
  border-color: #b9ff66;
  color: #000;
  font-weight: 500;
}

.method-content {
  margin-top: 12px;
}

.method-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 8px;
}

.default-value {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-style: italic;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  /* Battle gameplay options - Horizontal carousel */
  .battle-gameplay-options {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    /* Extend to screen edges */
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* Prevent swipe propagation to panel container */
    touch-action: pan-x;
    /* Override desktop margin-bottom */
    margin-bottom: 0 !important;
  }
  
  .battle-gameplay-options::-webkit-scrollbar {
    height: 4px;
  }
  
  .battle-gameplay-options::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
  }
  
  .battle-gameplay-options::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
  }
  
  .battle-gameplay-card {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: center;
    margin-bottom: 0;
  }
  
  /* Remove transform effect on mobile for battle cards */
  .battle-gameplay-card:hover {
    transform: none !important;
  }
  
  /* Jam Session gameplay methods - Horizontal carousel */
  .gameplay-methods-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Extend to screen edges */
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* Prevent swipe propagation to panel container */
    touch-action: pan-x;
    /* Override desktop margin-bottom */
    margin-bottom: 0 !important;
  }
  
  .gameplay-methods-row::-webkit-scrollbar {
    height: 4px;
  }
  
  .gameplay-methods-row::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
  }
  
  .gameplay-methods-row::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
  }
  
  .gameplay-methods-row > .col-md-6 {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    scroll-snap-align: center;
  }
  
  /* Override any inherited padding from parent panel rules */
  .option-panel .gameplay-methods-row > .col-md-6,
  .carousel-panel .gameplay-methods-row > .col-md-6,
  .gameplay-methods-row > [class*="col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure parent row has no margins that could interfere */
  .row:has(.gameplay-methods-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
  }
  
  /* Remove any padding from immediate parent of gameplay-methods-row */
  [class*="col"]:has(> .gameplay-methods-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .gameplay-method-card {
    margin-bottom: 0;
    height: 100%;
  }
  
  /* Remove transform effect on mobile for jam session cards */
  .gameplay-method-card:hover {
    transform: none !important;
  }
  
  .battle-bonus-grid {
    grid-template-columns: 1fr;
  }
  
  /* NOTE: Commented out - using .scoring-content .battle-scoring-grid styles instead
  .battle-scoring-grid {
    flex-direction: column;
    gap: 16px;
  } */
  
  /* Prevent carousel swipe from triggering panel swipe */
  .battle-gameplay-options,
  .gameplay-methods-row {
    /* Isolate touch events to these containers */
    isolation: isolate;
    position: relative;
    z-index: 10;
  }
  
  /* Extend gameplay carousel parent containers to edges */
  .league-stage-creation-page .section-container:has(.battle-gameplay-options),
  .league-stage-creation-page .section-container:has(.gameplay-methods-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* When swiping on internal carousels, disable panel swipe temporarily */
  .carousel-panel:has(.battle-gameplay-options:active),
  .carousel-panel:has(.gameplay-methods-row:active) {
    pointer-events: all !important;
  }
}

/* Map Search Overlay Styles */
.map-search-overlay {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: 480px;
  width: calc(100% - 32px);
  overflow: visible !important;
}

.unified-location-search {
  position: relative;
  background: rgba(33, 37, 41, 0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 12px;
  box-shadow: none;
  overflow: visible;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 0;
  border-radius: 12px;
  background: transparent;
  transition: none;
  max-height: 48px;
}

/* Remove ALL focus effects */
.search-input-wrapper:focus-within {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.unified-search-input:focus {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.unified-location-search:focus-within {
  box-shadow: none !important;
  border: none !important;
}

.search-icon {
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  font-size: 20px;
}

.unified-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #f8f9fa;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  font-family: inherit;
  line-height: 1.3;
  border-radius: 0;
  padding-left: 0.75rem;
}

/* When clear button is present, adjust input radius */
.search-input-wrapper:has(.clear-search-btn) .unified-search-input {
  border-radius: 0 !important;
}

/* When no clear button, input has right radius */
.search-input-wrapper:not(:has(.clear-search-btn)) .unified-search-input {
  border-radius: 0 8px 8px 0;
}

.unified-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 300;
}

/* Dark mode input color */
.dark-mode-active .unified-search-input {
  color: #f8f9fa !important;
}

.location-btn {
  background-color: #f5484d;
  color: #fff;
  padding: 10px;
  margin: 0;
  border-radius: 8px 0 0 8px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
}

.location-btn.active {
  background-color: #b9ff66;
  color: #000;
}

.location-btn:hover {
  background-color: #d93a3f;
}

.location-btn.active:hover {
  background-color: #a2e855;
}

.clear-search-btn {
  background: transparent;
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 10px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
}

.clear-search-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* Quando c'è testo nel campo, mantieni il pulsante X trasparente */
.search-input-wrapper:has(.unified-search-input:not(:placeholder-shown)) .clear-search-btn {
  background: transparent;
}

/* Mantieni trasparente su hover quando c'è testo */
.search-input-wrapper:has(.unified-search-input:not(:placeholder-shown)) .clear-search-btn:hover {
  background: transparent;
}

/* Removed transform scale effect on active state */

/* Map Suggestions Dropdown System
 * 
 * IMPORTANT: This uses specific selectors with .unified-location-search parent
 * to override global '.suggestions-dropdown' styles.
 * 
 * Structure:
 * - .suggestions-dropdown: Main dropdown container with blur effect
 * - .suggestions-dropdown--upward: Modifier for upward opening
 * 
 * The .unified-location-search parent ensures these styles take precedence.
 */

/* Extra specificity to ensure override of global styles */
/* Base dropdown rules - only for downward opening */
.map-search-overlay .unified-location-search .suggestions-dropdown:not(.suggestions-dropdown--upward),
.leaguestage-panel .unified-location-search .suggestions-dropdown:not(.suggestions-dropdown--upward),
.unified-location-search .suggestions-dropdown:not(.suggestions-dropdown--upward) {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(33, 37, 41, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  max-height: 320px !important;
  overflow: visible !important; /* FIXED: was hidden */
  overflow-y: auto !important;
  z-index: 99999 !important; /* Increased z-index */
  animation: dropdownSlide 0.2s ease-out !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overscroll-behavior-y: contain; /* Prevent scroll chaining */
  font-family: inherit !important;
  font-size: inherit !important;
  color: #fff !important;
  isolation: isolate;
  will-change: scroll-position;
  display: block !important;
  list-style: none !important;
  border: none !important;
  min-height: 100px !important; /* Ensure minimum height */
  height: auto !important;
}

/* Override ul and li elements from global suggestion.css */
.unified-location-search .suggestions-dropdown ul,
.unified-location-search .suggestions-dropdown li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Upward dropdown rules - higher specificity to ensure they override base rules */
.map-search-overlay .unified-location-search .suggestions-dropdown.suggestions-dropdown--upward,
.leaguestage-panel .unified-location-search .suggestions-dropdown.suggestions-dropdown--upward,
.unified-location-search .suggestions-dropdown.suggestions-dropdown--upward {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(33, 37, 41, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  max-height: 320px !important;
  overflow: visible !important; /* FIXED: was hidden */
  overflow-y: auto !important;
  z-index: 99999 !important; /* Increased z-index */
  animation: dropdownSlideUp 0.2s ease-out !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overscroll-behavior-y: contain; /* Prevent scroll chaining */
  font-family: inherit !important;
  font-size: inherit !important;
  color: #fff !important;
  isolation: isolate;
  will-change: scroll-position;
  display: block !important;
  list-style: none !important;
  border: none !important;
  min-height: 100px !important; /* Ensure minimum height */
  height: auto !important;
}

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dropdownSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Note: isolation and will-change are now in the main dropdown rule above */

/* Scrollbar styling */
.unified-location-search .suggestions-dropdown::-webkit-scrollbar {
  width: 6px !important;
}

.unified-location-search .suggestions-dropdown::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 3px !important;
}

.unified-location-search .suggestions-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 3px !important;
}

.unified-location-search .suggestions-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Prevent dropdown collapse to single line */
.suggestions-dropdown .gym-suggestions,
.suggestions-dropdown .address-suggestions {
  min-height: 50px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force dropdown content to be visible */
.suggestions-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure parent containers allow overflow - but only on desktop */
@media (min-width: 768px) {
  .unified-location-search {
    overflow: visible !important;
  }
}

/* Gym Suggestions Section */
.unified-location-search .gym-suggestions {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

.unified-location-search .gym-suggestions.premium-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: 0.5px solid #ffd700 !important;
  position: relative !important;
  border-radius: 10px 0 0 0 !important;
}

.unified-location-search .gym-suggestions.premium-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.unified-location-search .suggestion-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px 8px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.header-crown-icon {
  color: #FFD700;
  font-size: 14px;
}

/* Suggestion Items */
.unified-location-search .suggestion-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  text-decoration: none !important;
  min-height: 40px !important;
}

.unified-location-search .suggestion-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  transform: none !important;
}

.unified-location-search .suggestion-item:active {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

/* Gym Logo */
.unified-location-search .gym-mini-logo {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 0px !important;
}

/* Premium gym logo styling */
.unified-location-search .premium-section .gym-mini-logo {
  border: none !important;
}

/* Suggestion Content */
.suggestion-content {
  flex: 1;
  min-width: 0;
}

.unified-location-search .suggestion-content .gym-name,
.unified-location-search .suggestion-content strong {
  display: block !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.unified-location-search .suggestion-subtitle {
  display: block !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Override global li styles from suggestion.css */
.unified-location-search .suggestions-dropdown li {
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Override global ul styles if present */
.unified-location-search .suggestions-dropdown ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

/* Address Suggestions Section */
.unified-location-search .address-suggestions {
  padding-top: 4px !important;
}

/* Removed padding-left for address suggestions - they don't need extra alignment */

/* Mobile adjustments */
@media (max-width: 768px) {
  .map-search-overlay {
    max-width: none;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);
  }

  .unified-location-search {
    border-radius: 10px;
  }

  .search-input-wrapper {
    padding: 0;
    gap: 0;
  }

  .unified-search-input {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .unified-location-search .suggestions-dropdown:not(.suggestions-dropdown--upward),
  .unified-location-search .suggestions-dropdown.suggestions-dropdown--upward {
    max-height: 280px !important;
    border-radius: 10px !important;
  }

  .unified-location-search .suggestion-item {
    padding: 10px 12px !important;
  }

  .unified-location-search .gym-mini-logo {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Mobile fallback logo size for dropdown */
  .unified-location-search .gym-mini-logo.fallback-logo {
    width: 48px !important;
    height: 48px !important;
    border: none !important;
    opacity: 0.6 !important;
    mix-blend-mode: overlay !important;
    background: rgba(255, 255, 255, 50%) !important;
  }

  /* Removed mobile padding for address suggestions */
}

/* GPS Icon styling removed - no longer used */

/* Logo Rumble come placeholder - Desktop */
@media (min-width: 769px) {
  .unified-location-search .gym-mini-logo.fallback-logo {
    width: 44px !important;
    height: 48px !important;
    border: none !important;
    opacity: 0.4 !important;
    mix-blend-mode: overlay !important;
    background: rgba(255, 255, 255, 50%) !important;
  }
}

/* Rimuove border da logo premium quando è placeholder */
.unified-location-search .premium-section .gym-mini-logo.fallback-logo {
  border: none !important;
  box-shadow: none !important;
}

/* Detected gym logo in search bar */
.detected-gym-logo {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Detected gym logo when using Rumble placeholder - Desktop */
@media (min-width: 769px) {
  .detected-gym-logo.fallback-logo {
    width: 44px !important;
    height: 48px !important;
    border: none !important;
    opacity: 0.4 !important;
    mix-blend-mode: overlay !important;
    background: rgba(255, 255, 255, 50%) !important;
  }
}

/* Adjust input padding when logo is present */
.search-input-wrapper:has(.detected-gym-logo) .unified-search-input {
  padding-left: 0.5rem !important;
}

/* Mobile adjustments for detected gym logo */
@media (max-width: 768px) {
  .detected-gym-logo {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }
  
  /* Mobile fallback logo size */
  .detected-gym-logo.fallback-logo {
    width: 48px !important;
    height: 48px !important;
    border: none !important;
    opacity: 0.6 !important;
    mix-blend-mode: overlay !important;
    background: rgba(255, 255, 255, 50%) !important;
  }
}

/* Search bar height fix */
.search-input-wrapper {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 0;
  border-radius: 12px;
  background: transparent;
  transition: none;
  min-height: 48px;
  height: 48px;
}

.unified-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #f8f9fa;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 0 8px 8px 0;
}

/* Enhanced glass effect */
.unified-location-search {
  position: relative;
  background: rgba(33, 37, 41, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 12px;
  box-shadow: none;
  overflow: visible;
}


/* Container overflow fix - Changed to contain map markers */
.createrumble-map-sec {
  position: relative;
  border-radius: 8px;
  overflow: hidden !important;
}

/* Mapbox canvas should be clipped to prevent marker overflow */
.createrumble-map-sec .mapboxgl-canvas-container,
.createrumble-map-sec .mapboxgl-map {
  overflow: hidden !important;
  border-radius: 8px;
}

/* But allow dropdown to be visible - desktop only */
@media (min-width: 768px) {
  .createrumble-map-sec .map-search-overlay {
    overflow: visible !important;
    z-index: 9999;
  }
  
  /* Critical: Allow dropdown to escape map container */
  .map-search-overlay,
  .map-search-overlay * {
    overflow: visible !important;
  }
}

/* Ensure mapbox markers stay within bounds */
.createrumble-map-sec .mapboxgl-marker {
  overflow: hidden !important;
}

/* Map parent container - contain map markers but allow dropdown - desktop only */
@media (min-width: 768px) {
  /* Main map wrapper should contain markers */
  .position-relative.w-100.mb-3 {
    overflow: hidden !important;
  }
  
  /* But allow search overlay dropdown to be visible */
  .createrumble-map-sec {
    overflow: hidden !important;
    position: relative;
  }
  
  /* Search overlay can extend beyond map bounds */
  .createrumble-map-sec .map-search-overlay {
    position: absolute;
    z-index: 9999;
    /* Remove overflow constraint for dropdown */
  }
}

/* Map container and canvas should clip content, except search overlay */
.createrumble-map-sec > *:not(.map-search-overlay) {
  overflow: hidden !important;
}

/* Force dropdown to be above everything */
.suggestions-dropdown.show,
.suggestions-dropdown[style*="display: block"] {
  z-index: 99999 !important;
  position: absolute !important;
}

/* Absolute failsafe for dropdown visibility */
.suggestions-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;
}

/* Ensure dropdown is not cut off by any parent */
.unified-location-search {
  position: relative !important;
  z-index: 9999 !important;
}

/* Force show all dropdown content */
.suggestions-dropdown > * {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure dropdown can extend beyond boundaries */
.createrumble-map-sec .map-search-overlay {
  position: absolute;
  z-index: 9999; /* High z-index for search overlay */
  overflow: visible !important;
}

/* Desktop specific fixes */
@media (min-width: 769px) {
  .unified-location-search .suggestions-dropdown:not(.suggestions-dropdown--upward) {
    max-height: 480px;
  }
  
  .unified-location-search .suggestions-dropdown.suggestions-dropdown--upward {
    max-height: 480px;
  }
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  
  /* Search wrapper */
  .search-input-wrapper {
    padding: 0;
    min-height: 48px;
    height: 48px;
  }
  
  /* Input font size to prevent zoom */
  .unified-search-input {
    font-size: 16px !important;
    border-radius: 0;
  }
  
  /* Mobile location button */
  .location-btn {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  /* Mobile clear button */
  .clear-search-btn {
    width: 48px;
    height: 48px;
  }
  
  /* Panel container margins */
  .panel-content {
    padding: 0.5rem !important;
  }
  
  /* Form sections spacing - default for all sections */
  .section-container {
    margin-bottom: 0.5rem !important;
  }
  
  /* Special spacing for React Quill section - exactly 0.5rem from edges */
  .league-stage-creation-page .section-container:has(.event_desc_section) {
    padding: 0rem 0rem !important;
  }
  
  /* Upload button section - keep standard padding on desktop */
  .league-stage-creation-page .section-container:has(.upload-button-container) {
    padding: 0rem 0rem !important;
  }
  
  @media (min-width: 992px) {
    .league-stage-creation-page .section-container:has(.upload-button-container) {
      padding: 0rem 0rem !important;
    }
  }
  
  /* Alternative: Create new class for exact spacing */
  .league-stage-creation-page .minimal-padding-section {
    margin-bottom: 0.5rem !important;
    padding: 0.75rem 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Remove Bootstrap gap on upload section Row */
  .league-stage-creation-page .section-container:has(.upload-button-container) .row.g-3 {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Remove ALL Bootstrap column padding for React Quill section */
  .league-stage-creation-page .section-container:has(.event_desc_section) [class*="col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  
  /* Upload button section - remove Bootstrap padding on mobile only */
  /* Desktop will use inline style padding: 0.5rem */
  @media (max-width: 991px) {
    .league-stage-creation-page .section-container:has(.upload-button-container) [class*="col"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-inline-start: 0 !important;
      padding-inline-end: 0 !important;
    }
  }
  
  /* Ensure inner content and all children have no additional padding */
  .league-stage-creation-page .event_desc_section,
  .league-stage-creation-page .event_desc_section > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Upload button container - remove padding on mobile only */
  @media (max-width: 991px) {
    .league-stage-creation-page .upload-button-container,
    .league-stage-creation-page .upload-button-container > * {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }
  
  /* Ensure Quill editor container has no extra margins */
  .league-stage-creation-page .event_desc_section .quill {
    margin: 0 !important;
  }
  
  
  /* Ensure no inherited margins */
  .league-stage-creation-page .section-container:has(.event_desc_section) > *,
  .league-stage-creation-page .section-container:has(.upload-button-container) > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Override any Bootstrap utilities that might interfere */
  .league-stage-creation-page .section-container.mb-2 {
    margin-bottom: 0.5rem !important;
  }
  
  /* Ensure Row inside both sections has no gaps or margins */
  .league-stage-creation-page .section-container:has(.event_desc_section) > .row,
  .league-stage-creation-page .section-container:has(.upload-button-container) > .row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Input groups and selectors */
  .form-group,
  .MuiFormControl-root,
  .dropdown-container {
    margin-bottom: 0.25rem !important;
  }
  
  /* Accordion items */
  .MuiAccordion-root {
    margin-bottom: 0.25rem !important;
  }
  
  /* Search overlay position from edges */
  .map-search-overlay {
    left: 0.25rem;
    right: 0.25rem;
    bottom: 0.25rem;
    width: calc(100% - 0.5rem);
    transform: none;
  }
  
  /* Dropdown suggestions */
  .unified-location-search .suggestions-dropdown:not(.suggestions-dropdown--upward) {
    margin-top: 0.25rem;
  }
  
  .unified-location-search .suggestions-dropdown.suggestions-dropdown--upward {
    margin-bottom: 0.25rem;
    margin-top: 0;
  }
  
  /* Map container mobile height */
  .createrumble-map-sec {
    min-height: 30vh !important;
    height: 30vh !important;
    overflow: hidden !important;
    border-radius: 8px;
  }
  
  /* Mobile location search container (outside map) */
  .mobile-location-search-container {
    position: relative;
    width: 100%;
    /* Margin handled by mb-1 on parent row */
  }
  
  .mobile-location-search-container .unified-location-search {
    position: relative;
    background: rgba(33, 37, 41, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 6px;
    box-shadow: none;
  }
  
  /* Mobile: Contain mapbox canvas */
  .createrumble-map-sec .mapboxgl-canvas-container,
  .createrumble-map-sec .mapboxgl-map {
    overflow: hidden !important;
    border-radius: 8px;
  }
  
  /* Mobile: Contain within viewport */
  .createrumble-map-sec .map-search-overlay {
    overflow: hidden;
  }
}

/* Gap correction for col-6 elements - both vertical and horizontal */
.main-info-panel .row,
.option-panel .row,
.validation-panel .row,
.main-info-fields .row {
  margin-left: -0.375rem;  /* Half of 0.75rem */
  margin-right: -0.375rem;
}

.main-info-panel .col-md-6,
.option-panel .col-md-6,
.validation-panel .col-md-6,
.main-info-fields .col-md-6 {
  padding-left: 0.375rem !important;  /* Half of 0.75rem for 0.75rem gap */
  padding-right: 0.375rem !important;
  margin-bottom: 0.75rem !important;
}

/* Remove margin-bottom from other column sizes to prevent cumulative gaps */
.main-info-panel .col-md-3,
.main-info-panel .col-md-4,
.main-info-panel .col-md-8,
.main-info-panel .col-md-9,
.main-info-panel .col-md-12,
.option-panel .col-md-3,
.option-panel .col-md-4,
.option-panel .col-md-8,
.option-panel .col-md-9,
.option-panel .col-md-12,
.validation-panel .col-md-3,
.validation-panel .col-md-4,
.validation-panel .col-md-8,
.validation-panel .col-md-9,
.validation-panel .col-md-12,
.main-info-fields .col-md-3,
.main-info-fields .col-md-4,
.main-info-fields .col-md-8,
.main-info-fields .col-md-9,
.main-info-fields .col-md-12 {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
  margin-bottom: 0 !important;  /* No margin to prevent cumulative gaps */
}

/* Event name and date picker row - maintain gap between rows */
.event-name-date-row {
  margin-bottom: 0.75rem !important;
}

/* Remove margin-bottom only from columns inside this specific row */
.event-name-date-row .col-md-6 {
  margin-bottom: 0 !important;
}

/* Remove margin-bottom from col-md-6 elements between board selector and format selector */
.board-format-section .col-md-6,
.select-rum-container .col-md-6,
.format-selection-cls .col-md-6 {
  margin-bottom: 0 !important;
}

/* Date picker height to match event name field */
.ant-range-picker-wrapper .ant-picker,
.ant-range-picker-rumble {
  height: 48px !important;
}

.ant-range-picker-wrapper .ant-picker-input > input,
.ant-range-picker-rumble .ant-picker-input > input {
  height: 48px !important;
  line-height: 48px;
}

/* Ant Design Date Picker Custom Styles - Rumble Theme */
/* Base date picker styles */
.ant-picker,
.ant-range-picker-rumble {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px !important;
  transition: all 0.2s ease;
}

.ant-picker:hover,
.ant-range-picker-rumble:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  box-shadow: none !important;
}

.ant-picker-focused {
  border: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Date picker dropdown container */
.ant-picker-dropdown {
  background: rgba(26, 26, 26, 0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Allow Ant Design to handle natural dropdown positioning */
/* Removed centering CSS to let dropdowns appear relative to their inputs */

/* Panel layout with glass effect */
.ant-picker-panel-layout {
  background: rgb(25 28 31 / 95%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  border-top: #f5484d solid 1px !important;
  border-radius: 8px !important;
}

/* Transparent panel */
.ant-picker-panel {
  background: transparent !important;
}

/* Override Ant Design Range Colors - Fixed white stripe issue */
.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single) .ant-picker-cell-inner,
.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single) .ant-picker-cell-inner,
.ant-picker-cell-range-start.ant-picker-cell-range-end .ant-picker-cell-inner,
.ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-start-single) .ant-picker-cell-inner,
.ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-end-single) .ant-picker-cell-inner,
.ant-picker-cell-range-hover .ant-picker-cell-inner,
.ant-picker-cell-in-range .ant-picker-cell-inner {
  background: rgba(245, 72, 77, 0.3) !important;
  color: #fff !important;
}

/* Range selection background stripe - ensure red theme */
.ant-picker-cell-in-range::before,
.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
.ant-picker-cell-range-hover::before {
  background: rgba(245, 72, 77, 0.15) !important;
}

/* Range stripe connection - fixed white issue */
.ant-picker-cell-in-range.ant-picker-cell-in-view::before {
  background: rgba(245, 72, 77, 0.15) !important;
}

/* Time panel styling */
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell {
  color: white !important;
}

.ant-picker-time-panel-column > li.ant-picker-time-panel-cell:hover {
  background: rgba(245, 72, 77, 0.15) !important;
}

.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected {
  background: #f5484d !important;
  color: white !important;
  font-weight: 600;
}

/* OK Button styling */
.ant-picker-ok button,
.ant-picker-ok button:not(:disabled) {
  background-color: #f5484d !important;
  border: none !important;
  color: white !important;
}

.ant-picker-ok button:hover:not(:disabled) {
  background-color: #e73a3f !important;
}

/* Today outline styling */
.ant-picker-cell-today .ant-picker-cell-inner::before {
  border-color: #f5484d !important;
}

/* Header arrow buttons */
.ant-picker-header button {
  color: rgba(255, 255, 255, 0.7) !important;
}

.ant-picker-header button:hover {
  color: #f5484d !important;
}

/* Range arrow */
.ant-picker-range-arrow {
  color: #f5484d !important;
}

.ant-picker-range-arrow::before,
.ant-picker-range-arrow::after {
  background: #f5484d !important;
  border-color: #f5484d !important;
}

/* Fix for panel container backgrounds override from panels.css */
.ant-picker-dropdown .ant-picker-panel-container,
.ant-picker-dropdown .ant-picker-time-panel,
.ant-picker-dropdown .ant-picker-time-panel-column,
.ant-picker-dropdown .ant-picker-time-panel-cell {
  background-color: transparent !important;
}

/* High specificity override to ensure date picker styles apply */
body .ant-picker-dropdown,
body .ant-picker-dropdown .ant-picker-panel-container {
  background: rgba(26, 26, 26, 0.98) !important;
}

body .ant-picker-dropdown .ant-picker-panel-layout {
  background: rgb(25 28 31 / 95%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-top: #f5484d solid 1px !important;
}

/* Clear button styling */
.ant-picker-clear {
  color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
}

.ant-picker-clear:hover {
  color: #f5484d !important;
}

/* Input text color */
.ant-picker-input > input {
  color: #f8f9fa !important;
  padding: 10px !important;
}

/* Placeholder color */
.ant-picker-input > input::placeholder {
  color: rgba(248, 249, 250, 0.5) !important;
}

/* Separator color - changed from black base to light */
.ant-picker-range-separator {
  color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
}

/* Separator specific background fix */
.ant-picker-range-separator .ant-picker-separator {
  color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
}

/* Suffix icon color */
.ant-picker-suffix {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* Calendar date hover with red */
.ant-picker-cell:hover:not(.ant-picker-cell-in-range):not(.ant-picker-cell-disabled):not(.ant-picker-cell-selected) .ant-picker-cell-inner {
  background: rgba(245, 72, 77, 0.1) !important;
}

/* Selected date with red theme */
.ant-picker-cell-selected .ant-picker-cell-inner {
  background: #f5484d !important;
  color: white !important;
  font-weight: 600;
}

/* Input focus border - Remove all borders */
.ant-picker-focused .ant-picker-input {
  border: none !important;
  border-color: transparent !important;
}

/* Remove all input borders and outlines */
.ant-picker-input input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ant-picker-input input:focus,
.ant-picker-input input:active,
.ant-picker-input input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Style the input container */
.ant-picker-input {
  border: none !important;
  position: relative;
}

/* Panel text color for dark theme */
.ant-picker-header-view {
  color: rgba(255, 255, 255, 0.9) !important;
}

.ant-picker-cell-inner {
  color: rgba(255, 255, 255, 0.85) !important;
}

.ant-picker-cell-disabled .ant-picker-cell-inner {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* Time panel header - fixed text color from dark to light */
.ant-picker-time-panel-column-header {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
}

/* Day names in calendar header - fixed from black to light */
.ant-picker-content thead th {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Time picker numbers - ensure light color with high specificity */
.ant-picker-time-panel-column > li {
  color: rgba(255, 255, 255, 0.65) !important;
}

.ant-picker-time-panel-column > li.ant-picker-time-panel-cell {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Additional high specificity rules for time picker text */
.ant-picker-dropdown .ant-picker-time-panel-column > li,
.ant-picker-dropdown .ant-picker-time-panel-column > li.ant-picker-time-panel-cell,
.ant-picker-panel-container .ant-picker-time-panel-column > li,
.ant-picker-panel-container .ant-picker-time-panel-column > li.ant-picker-time-panel-cell,
body .ant-picker-dropdown .ant-picker-time-panel-column > li,
body .ant-picker-dropdown .ant-picker-time-panel-column > li.ant-picker-time-panel-cell {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Time panel cell inner text - ensure it's visible */
.ant-picker-time-panel-cell-inner {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Disabled time cells */
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-disabled {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* Footer buttons */
.ant-picker-footer a {
  color: #f5484d !important;
}

.ant-picker-footer a:hover {
  color: #e73a3f !important;
}

/* Week panel */
.ant-picker-week-panel-row .ant-picker-cell {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Month and year selector */
.ant-picker-month-btn,
.ant-picker-year-btn {
  color: rgba(255, 255, 255, 0.85) !important;
}

.ant-picker-month-btn:hover,
.ant-picker-year-btn:hover {
  color: #f5484d !important;
}

/* Additional text color fixes for dark theme */
.ant-picker-decade-panel .ant-picker-cell-inner,
.ant-picker-year-panel .ant-picker-cell-inner,
.ant-picker-month-panel .ant-picker-cell-inner,
.ant-picker-date-panel .ant-picker-cell-inner {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Range hover edge cells */
.ant-picker-cell-range-hover-edge-start::after,
.ant-picker-cell-range-hover-edge-end::after {
  border-color: #f5484d !important;
}

/* Range edge colors */
.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after,
.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after {
  border-color: #f5484d !important;
}

/* Now button */
.ant-picker-now-btn {
  color: #f5484d !important;
}

.ant-picker-now-btn:hover {
  color: #e73a3f !important;
}

/* Additional fixes for blue selector issues */
/* Dropdown active cell - ensure no blue colors */
.ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
.ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background: #f5484d !important;
  color: white !important;
}

/* Focus state - remove all focus indicators except active bar */
.ant-picker:focus,
.ant-picker-focused,
.ant-picker.ant-picker-focused {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove any default blue from Ant Design */
.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
  border: 1px solid #f5484d !important;
}

/* Dropdown panel borders - removed */
.ant-picker-dropdown,
.ant-picker-panel-container {
  border: none !important;
  box-shadow: none !important;
}

/* Active/selected time cells */
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell.ant-picker-time-panel-cell-selected {
  background: #f5484d !important;
  color: white !important;
}

/* Ensure all interactive elements use red theme */
.ant-picker-header button:hover,
.ant-picker-prev-icon:hover,
.ant-picker-next-icon:hover,
.ant-picker-super-prev-icon:hover,
.ant-picker-super-next-icon:hover {
  color: #f5484d !important;
}

/* Force time picker text to be light with maximum specificity */
.ant-picker-time-panel,
.ant-picker-time-panel *,
.ant-picker-time-panel-column,
.ant-picker-time-panel-column *,
.ant-picker-time-panel-cell,
.ant-picker-time-panel-cell * {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Time panel with Ant prefix variations */
.ant-picker-datetime-panel .ant-picker-time-panel-column > li,
.ant-picker-datetime-panel .ant-picker-time-panel-cell,
.ant-picker-time-panel .ant-picker-time-panel-cell-inner,
.ant-picker-panel .ant-picker-time-panel-column > li {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Remove all borders and outlines from date picker components */
.ant-picker,
.ant-picker *,
.ant-range-picker-rumble,
.ant-range-picker-rumble *,
.ant-picker-suffix,
.ant-picker-prefix,
.ant-picker-separator,
.ant-picker-active-bar {
  border: none !important;
  outline: none !important;
}

/* Active bar with red theme - visible only under active field */
.ant-picker-active-bar {
  background: #f5484d !important;
  display: block !important;
  height: 2px !important;
}

.ant-picker-range-separator .ant-picker-active-bar {
  background: #f5484d !important;
}

/* Scrollbar styling for time panel - light theme */
.ant-picker-dropdown .ant-picker-time-panel-column {
  scrollbar-color: rgba(255, 255, 255, 0.45) transparent !important;
  scrollbar-width: thin !important;
}

.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {
  width: 6px !important;
}

.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar-track {
  background: transparent !important;
}

.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45) !important;
  border-radius: 3px !important;
}

.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* Fix date picker panel borders - use light borders */
.ant-picker-panel *[style*="border-bottom: 1px solid rgba(5, 5, 5, 0.06)"],
.ant-picker-dropdown *[style*="border-bottom: 1px solid rgba(5, 5, 5, 0.06)"],
.ant-picker-footer,
.ant-picker-time-panel,
.ant-picker-datetime-panel .ant-picker-time-panel,
.ant-picker-ranges,
.ant-picker-panel-container > *:not(:last-child) {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Ensure all dividers in date picker use light borders */
.ant-picker-header,
.ant-picker-footer,
.ant-picker-time-panel-column::after,
.ant-picker-ranges,
.ant-picker-datetime-panel .ant-picker-date-panel,
.ant-picker-datetime-panel .ant-picker-time-panel {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Override any inline styles with dark borders */
.ant-picker-dropdown [style*="border-bottom: 1px solid rgba(5, 5, 5"] {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Form control input text color */
input.form-control {
  color: #f8f9fa !important;
}

/* Format and Type selectors container - rounded corners */
.select-rum-container {
  border-radius: 6px !important;
  overflow: hidden;
}

/* Mobile gap correction */
@media (max-width: 768px) {
  .main-info-panel .row,
  .option-panel .row,
  .validation-panel .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Exclude main-info-fields .row - it has its own two-column rules above */
  
  .main-info-panel .col-md-6,
  .option-panel .col-md-6,
  .validation-panel .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0.25rem !important;
  }
  
  /* Exclude main-info-fields .col-md-6 - it has its own two-column rules above */
  
  /* Remove margin-bottom from other column sizes on mobile too */
  .main-info-panel .col-md-3,
  .main-info-panel .col-md-4,
  .main-info-panel .col-md-8,
  .main-info-panel .col-md-9,
  .main-info-panel .col-md-12,
  .option-panel .col-md-3,
  .option-panel .col-md-4,
  .option-panel .col-md-8,
  .option-panel .col-md-9,
  .option-panel .col-md-12,
  .validation-panel .col-md-3,
  .validation-panel .col-md-4,
  .validation-panel .col-md-8,
  .validation-panel .col-md-9,
  .validation-panel .col-md-12,
  .main-info-fields .col-md-3,
  .main-info-fields .col-md-4,
  .main-info-fields .col-md-8,
  .main-info-fields .col-md-9,
  .main-info-fields .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Event name date row - maintain smaller gap on mobile */
  .event-name-date-row {
    margin-bottom: 0.25rem !important;
  }
  
  /* Remove margin from columns inside this row on mobile */
  .event-name-date-row .col-md-6 {
    margin-bottom: 0 !important;
  }
  
  /* Exclude .col-6 and .col rules for main-info-fields - they have specific two-column rules above */
  
  /* Last child no margin */
  .main-info-panel .row > .col-md-6:last-child,
  .option-panel .row > .col-md-6:last-child,
  .validation-panel .row > .col-md-6:last-child,
  .main-info-fields .row > .col-md-6:last-child {
    margin-bottom: 0 !important;
  }
}

/* Modern Prize and Sponsor UI Styles - Minimal overrides only */
/* Most styles are imported from LeagueEdit.css and RumbleData.css */

.prizes-options-panel .option-switch-wrapper.expanded,
.sponsors-options-panel .option-switch-wrapper.expanded {
  margin-bottom: 1rem;
}

/* Prize and sponsor container styles - removed duplicates, using StageUpdate.css */

.legal-warning-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Add button styles - removed duplicates, using StageUpdate.css */

/* Keep only specific overrides that don't conflict with imported styles */
.prize-item-modern.min-h-100 {
  min-height: 100px;
}

.prize-item-modern.min-h-auto {
  min-height: auto;
}

/* All prize and sponsor images should be 100x100px */
/* Sizes are inherited from RumbleData.css */

.icon-opacity-1 {
  opacity: 0.6;
}

.icon-opacity-3 {
  opacity: 0.3;
}

/* Prize column layout styles - removed duplicates, using StageUpdate.css */

.prize-rank-select {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
}

/* Gray out disabled options in dropdown */
.prize-rank-select option:disabled {
  color: rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
  font-style: italic;
}

.prize-desc-input {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
}

.prize-desc-input.flex-1-min-0 {
  flex: 1;
  min-width: 0;
}

.text-sponsor-title,
.text-small-desc {
  /* Keep for backwards compatibility */
}

.error-message {
  color: #f87171;
  font-size: 0.85rem;
  margin: 0;
}

/* Desktop: handle last items in rows */
@media (min-width: 769px) {
  /* Last row items no margin */
  .main-info-panel .row:last-child > .col-md-6,
  .option-panel .row:last-child > .col-md-6,
  .validation-panel .row:last-child > .col-md-6,
  .main-info-fields .row:last-child > .col-md-6 {
    margin-bottom: 0 !important;
  }
}

/* Timer Section Styles - Modern & Unified */
.timer-switch-main-container {
  border-radius: 12px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.timer-switch-main-container:hover {
  /* Hover state removed as background/border are removed */
}

.timer-switch-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.timer-switch-col {
  flex: 1;
}

.timer-icon-col {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

/* Timer Hide Container - Active State */
.timer-hide-container {
  animation: slideDown 0.3s ease-out;
  /* Light background for better visual separation */
  background: rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  padding: 0 20px 20px 20px;
  border-radius: 8px;
}

/* Timer Input Component Override */
.timer-hide-container .timer-input-container {
  border-radius: 8px;
  padding: 0;
  margin-bottom: 0;
  transition: all 0.2s ease;
  background: transparent;
}

.timer-hide-container .timer-input-container:hover {
  /* Hover state removed */
}

/* Delay Timer Specific */
.timer-hide-container .delay-timer-input {
  margin-bottom: 0;
}

/* Main Timer Specific */
.timer-hide-container .main-timer-input {
  margin-bottom: 0;
}

/* Timer Input Label Styling */
.timer-hide-container .timer-input-container p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 12px;
  text-align: center;
}

/* Timer Input Fields */
.timer-hide-container .timerInputs {
  background: rgba(33, 37, 41, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  text-align: center;
  transition: all 0.2s ease;
  height: 56px !important;
  width: 80px !important;
  border-radius: 8px !important;
}

.timer-hide-container .timerInputs:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(33, 37, 41, 0.98) !important;
}

.timer-hide-container .timerInputs:focus {
  border-color: #f5484d !important;
  background: rgba(33, 37, 41, 1) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(245, 72, 77, 0.2) !important;
}

/* Timer Labels */
.timer-hide-container .form-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-align: center;
  display: block;
}

/* Timer Input Groups */
.timer-hide-container .timerInputs-grp {
  justify-content: center;
  width: auto !important;
}

/* Timer Switch Label */
.timer-switch-container .MuiFormControlLabel-root {
  margin: 0;
}

.timer-switch-container .MuiFormControlLabel-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Timer switch now uses global MuiSwitch styles from form-controls.css
   to match leaderboard switches (green #b9ff66 when checked) */

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .timer-switch-main-container {
    margin-bottom: 16px;
  }
  
  .timer-hide-container {
    /* Padding and margin removed */
  }
  
  .timer-hide-container .timer-input-container {
    padding: 0;
    margin-bottom: 0;
  }
  
  .timer-hide-container .delay-timer-input {
    margin-bottom: 0;
  }
  
  .timer-hide-container .timerInputs {
    height: 48px !important;
    width: 70px !important;
    font-size: 1.1rem !important;
  }
  
  .timer-hide-container .timer-input-container p {
    font-size: 0.9rem;
    margin-bottom: 10px;
  }
  
  .timer-hide-container .form-label {
    font-size: 0.8rem;
  }
}

/* Ant Design Timer Input Styles */
.ant-timer-input {
  width: 100%;
}

.ant-timer-input .timer-input-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 12px;
}

.timer-picker-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Rumble Timer Picker Styles */
.rumble-timer-picker {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 8px !important;
  height: 48px !important;
  min-width: 140px !important;
  max-width: 200px !important;
  transition: all 0.2s ease;
}

.rumble-timer-picker:hover:not(.ant-picker-disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
}

.rumble-timer-picker.ant-picker-focused {
  border: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
}

/* Remove any focus outline */
.rumble-timer-picker:focus,
.rumble-timer-picker:focus-visible,
.rumble-timer-picker:focus-within {
  outline: none !important;
  border: none !important;
}

/* Timer Picker Input */
.rumble-timer-picker .ant-picker-input > input {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.1rem !important;
  font-weight: 500;
  text-align: center !important;
}

.rumble-timer-picker .ant-picker-input > input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Timer Picker Dropdown */
.rumble-timer-picker-dropdown {
  background: rgba(26, 26, 26, 0.98) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.rumble-timer-picker-dropdown .ant-picker-panel {
  background: transparent !important;
  border: none !important;
}

.rumble-timer-picker-dropdown .ant-picker-time-panel {
  background: transparent !important;
}

/* Time Panel Columns */
.rumble-timer-picker-dropdown .ant-picker-time-panel-column {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 4px;
  margin: 0 4px;
  padding: 4px 0;
  flex: 1;
  min-width: 0;
}

.rumble-timer-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {
  width: 4px;
}

.rumble-timer-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* Time Panel Cells */
.rumble-timer-picker-dropdown .ant-picker-time-panel-cell {
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 4px 12px !important;
}

.rumble-timer-picker-dropdown .ant-picker-time-panel-cell:hover {
  background: rgba(245, 72, 77, 0.15) !important;
}

.rumble-timer-picker-dropdown .ant-picker-time-panel-cell-selected {
  background: #f5484d !important;
  color: white !important;
  font-weight: 600;
}

.rumble-timer-picker-dropdown .ant-picker-time-panel-cell-disabled {
  color: rgba(255, 255, 255, 0.2) !important;
  cursor: not-allowed;
}

/* Delay Timer Specific - Hide hours column */
.delay-timer-input .rumble-timer-picker {
  min-width: 100px !important;
  max-width: 140px !important;
}

/* Delay timer dropdown specific styles */
.delay-timer-dropdown .ant-picker-panel-layout {
  max-width: 200px !important;
  min-width: 180px !important;
}

/* Center the columns for delay timer */
.delay-timer-dropdown .ant-picker-time-panel {
  justify-content: space-evenly;
  display: flex;
  padding: 0 8px;
}

/* Delay timer columns should fill available space */
.delay-timer-dropdown .ant-picker-time-panel-column {
  display: block !important;
  flex: 1;
  min-width: 70px;
  max-width: 90px;
}

/* For delay timer with format mm:ss, hide hour column if it exists */
.delay-timer-dropdown .ant-picker-time-panel-column:nth-child(1):nth-last-child(3) {
  display: none !important;
}

/* Timer in the hide container */
.timer-hide-container .ant-timer-input {
  margin-bottom: 0;
}

.timer-hide-container .delay-timer-input {
  margin-bottom: 0;
}

/* Mobile Responsiveness for Ant Timer */
@media (max-width: 768px) {
  .rumble-timer-picker {
    height: 44px !important;
    min-width: 120px !important;
    max-width: 180px !important;
  }
  
  .rumble-timer-picker .ant-picker-input > input {
    font-size: 1rem !important;
  }
  
  .ant-timer-input .timer-input-label {
    font-size: 0.9rem;
    margin-bottom: 10px;
  }
  
  .delay-timer-input .rumble-timer-picker {
    min-width: 90px !important;
    max-width: 120px !important;
  }
}

/* ============================================
   Utility Classes for Common Inline Styles
   Added: 25/08/2025
   Purpose: Replace common inline styles with CSS classes
   ============================================ */

/* Font Utilities - DIN Font Family */
.font-din {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.font-din-bold {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: bold !important;
}

.font-din-sm-bold {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: bold !important;
  font-size: 0.9rem !important;
}

.font-din-xs {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.875rem !important;
}

/* Spacing Utilities */
.px-0-5 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.pl-12 {
  padding-left: 12px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.px-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Display Utilities */
.d-flex-gap-8 {
  display: flex !important;
  gap: 8px !important;
}

.d-flex-gap-12 {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Layout Utilities */
.z-10 {
  z-index: 10 !important;
}

.w-100 {
  width: 100% !important;
}

.flex-1 {
  flex: 1 !important;
}

/* Color Utilities */
.text-purple {
  color: #9747ff !important;
}

.text-gray-400 {
  color: #9ca3af !important;
}

.text-white {
  color: white !important;
}

/* Background Utilities */
.bg-transparent {
  background-color: transparent !important;
}

.bg-dark-42 {
  background-color: rgb(42, 42, 42) !important;
}

.bg-dark-36 {
  background-color: rgba(36, 36, 36, 0.98) !important;
}

.bg-white-02 {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.bg-white-05 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Flexbox Utilities */
.flex-column {
  flex-direction: column !important;
}

/* MUI Select Full Width Fix - Stage Creation Page */
.main-info-fields .select-rum-container {
  width: 100%;
}

.main-info-fields .select-rum-container .MuiFormControl-root {
  width: 100%;
}

.main-info-fields .format-selection-cls {
  width: 100%;
}

/* Ensure the MUI Select inside also takes full width */
.main-info-fields .MuiSelect-select {
  width: 100%;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-items-center {
  align-items: center !important;
}

/* Size Utilities */
.w-full {
  width: 100% !important;
}

.h-48 {
  height: 48px !important;
}

.h-100 {
  height: 100% !important;
}

.h-full {
  height: 100% !important;
}

.w-32 {
  width: 32px !important;
}

.h-32 {
  height: 32px !important;
}

.w-100px {
  width: 100px !important;
}

/* Margin Utilities */
.mt-auto {
  margin-top: auto !important;
}

.mt-0-5 {
  margin-top: 0.5rem !important;
}

/* Border Utilities */
.border-none {
  border: none !important;
}

.border-white-05 {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.rounded-6 {
  border-radius: 6px !important;
}

.rounded-8 {
  border-radius: 8px !important;
}

/* Gap Utilities */
.gap-12 {
  gap: 12px !important;
}

.gap-15 {
  gap: 15px !important;
}

/* Cursor Utilities */
.cursor-pointer {
  cursor: pointer !important;
}

/* Font Size Utilities */
.text-sm {
  font-size: 0.875rem !important;
}

.text-lg {
  font-size: 18px !important;
}

/* Padding Utilities */
.p-16 {
  padding: 16px !important;
}

.p-12-16 {
  padding: 12px 16px !important;
}

.p-3 {
  padding: 1rem !important;
}

/* Max Width Utilities */
.max-w-1220 {
  max-width: 1220px !important;
}

/* Margin Utilities */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Display Utilities */
.block {
  display: block !important;
}

/* Button Icon Utilities */
.btn-icon-32 {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
}

.btn-icon-bg {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #f8f9fa !important;
}

/* Overflow Utilities */
.overflow-hidden {
  overflow: hidden !important;
}

/* Object Fit Utilities */
.object-cover {
  object-fit: cover !important;
}

/* Form Control Utilities */
.form-control-48 {
  height: 48px !important;
  border: none !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Flex Utilities */
.flex-shrink-0 {
  flex-shrink: 0 !important;
}

/* Button Icon Variations */
.btn-icon-danger {
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
}

/* Button Icon Base (combines common properties) */
.btn-icon-base {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

/* Upload Placeholder Styles */
.upload-placeholder {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  height: 100px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #f8f9fa !important;
  border-radius: 6px !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

/* Cover Image Display (repeated pattern) */
.cover-image-layout {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  height: 100px !important;
  overflow: hidden !important;
}

/* ============================================
   FIX: Option Switch Layout - Single Line
   Centralizzato per TUTTE le option switch rows
   ============================================ */

/* Fix globale per TUTTE le switch rows nella pagina */
.league-stage-creation-page .option-switch-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  gap: 0;
  flex-wrap: nowrap !important;
  min-height: 48px;
}

/* Override larghezza fissa 90% - usa flex per distribuzione dinamica */
.league-stage-creation-page .option-switch-content {
  flex: 1 1 auto;
  width: auto !important;
  display: flex;
  align-items: center;
  min-width: 0; /* Permette shrinking del contenuto */
}

/* Assicura che FormControl occupi tutto lo spazio disponibile */
.league-stage-creation-page .option-switch-content .MuiFormControl-root {
  width: 100%;
}

.league-stage-creation-page .option-switch-content .MuiFormGroup-root {
  width: 100%;
}

/* FormControlLabel DEVE rimanere su una riga */
.league-stage-creation-page .option-switch-content .MuiFormControlLabel-root {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  justify-content: flex-start;
}

/* Previeni wrap del testo del label */
.league-stage-creation-page .option-switch-content .MuiFormControlLabel-label,
.league-stage-creation-page .option-switch-content .MuiTypography-root {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Override larghezza fissa 10% - usa flex per dimensione automatica */
.league-stage-creation-page .option-switch-actions {
  flex: 0 0 auto;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: 12px;
  padding-left: 0;
}

/* Switch deve mantenere dimensione consistente */
.league-stage-creation-page .MuiSwitch-root {
  margin-right: 8px;
  flex-shrink: 0;
}

/* Fix per tooltip icon */
.league-stage-creation-page .option-switch-actions .tooltip-icon-wrapper {
  display: flex;
  align-items: center;
}

/* Fix quando c'è un input extra (es. parti-input) */
.league-stage-creation-page .option-switch-actions:has(.parti-input) {
  min-width: fit-content;
  gap: 8px;
}

.league-stage-creation-page .option-switch-actions .parti-input {
  margin-right: 8px;
}

/* Assicura comportamento consistente per tutti i container */
.league-stage-creation-page .option-switch-row {
  width: 100%;
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .league-stage-creation-page .option-switch-wrapper {
    padding: 8px 16px;
    min-height: 44px;
  }
  
  .league-stage-creation-page .option-switch-content .MuiFormControlLabel-label,
  .league-stage-creation-page .option-switch-content .MuiTypography-root {
    font-size: 14px;
  }
  
  .league-stage-creation-page .option-switch-actions {
    margin-left: 8px;
  }
}

/* Dark mode background for option switch wrapper */
.dark-mode .option-switch-wrapper,
.dark-mode-active .option-switch-wrapper {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
}

/* ============================================
   MOBILE PADDING FIX - Option A (Refined)
   Date: 2024-11-08
   Strategy: Column-based padding with col-6 gap fix
   ============================================ */

@media (max-width: 767px) {

  /* Step 1: Container has NO padding */
  .league-stage-creation-page .main-info-fields {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Step 2: ALL columns get uniform 8px padding by default */
  .league-stage-creation-page .main-info-fields .col,
  .league-stage-creation-page .main-info-fields [class*="col-"] {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
  }

  /* Step 3: Special handling for col-6 split rows (reduce gap) */
  .league-stage-creation-page .main-info-fields .row > .col-6:first-child,
  .league-stage-creation-page .main-info-fields .row > .col-xs-6:first-child {
    padding-left: 0.5rem !important;   /* 8px from edge */
    padding-right: 0.25rem !important; /* 4px to middle */
  }

  .league-stage-creation-page .main-info-fields .row > .col-6:last-child,
  .league-stage-creation-page .main-info-fields .row > .col-xs-6:last-child {
    padding-left: 0.25rem !important;  /* 4px from middle */
    padding-right: 0.5rem !important;  /* 8px to edge */
  }

  /* If only one col-6 (shouldn't happen but safe) */
  .league-stage-creation-page .main-info-fields .row > .col-6:only-child,
  .league-stage-creation-page .main-info-fields .row > .col-xs-6:only-child {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Step 4: Reset Bootstrap row negative margins */
  .league-stage-creation-page .main-info-fields .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Step 5: Exception - Map is full-width (no padding) */
  /* Map's first Row (from MapSection component) */
  .league-stage-creation-page .main-info-fields > .row:first-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Map's Col inside first Row - remove all padding */
  .league-stage-creation-page .main-info-fields > .row:first-child > .col,
  .league-stage-creation-page .main-info-fields > .row:first-child > [class*="col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Map container itself - ensure full width */
  .league-stage-creation-page .main-info-fields .createrumble-map-sec {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* NUCLEAR: Remove ALL spacing from map's first row and its descendants */
  .league-stage-creation-page .main-info-fields > .row:first-child,
  .league-stage-creation-page .main-info-fields > .row:first-child *,
  .league-stage-creation-page .main-info-fields > .row:first-child .col,
  .league-stage-creation-page .main-info-fields > .row:first-child [class*="col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ==========================================
     SECTION 2: Elements after main-info-fields
     (React Quill, Uploads, Advanced button)
     ========================================== */

  /* Section containers (React Quill editor, Upload buttons) */
  .league-stage-creation-page .main-info-panel > .section-container {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
  }

  /* Ensure section container children don't have extra padding */
  .league-stage-creation-page .main-info-panel > .section-container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Section container columns - remove Bootstrap padding */
  .league-stage-creation-page .main-info-panel > .section-container .col,
  .league-stage-creation-page .main-info-panel > .section-container [class*="col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Advanced Options button - add margin instead of padding */
  .league-stage-creation-page .main-info-panel > button.advance-option-toggle,
  .league-stage-creation-page .main-info-panel > button.mobile-toggle {
    margin-left: 0.5rem !important;   /* 8px */
    margin-right: 0.5rem !important;  /* 8px */
    width: calc(100% - 1rem) !important;  /* Account for margins */
  }

  /* React Quill specific container (if needed) */
  .league-stage-creation-page .main-info-panel .ql-container,
  .league-stage-creation-page .main-info-panel .ql-editor {
    /* Quill handles its own internal padding */
  }

  /* ==========================================
     SECTION 3: Advanced Options Panels
     Direct padding for each options container
     ========================================== */

  /* Registration options panel */
  .league-stage-creation-page .registration-options-panel {
    padding-left: 0.5rem !important;   /* 8px */
    padding-right: 0.5rem !important;  /* 8px */
  }

  /* Boulders options panel */
  .league-stage-creation-page .boulders-options-panel {
    padding-left: 0.5rem !important;   /* 8px */
    padding-right: 0.5rem !important;  /* 8px */
  }

  /* Validation options panel */
  .league-stage-creation-page .validation-options-panel {
    padding-left: 0.5rem !important;   /* 8px */
    padding-right: 0.5rem !important;  /* 8px */
  }

  /* Prizes options panel */
  .league-stage-creation-page .prizes-options-panel {
    padding-left: 0.5rem !important;   /* 8px */
    padding-right: 0.5rem !important;  /* 8px */
  }

  /* Sponsors options panel */
  .league-stage-creation-page .sponsors-options-panel {
    padding-left: 0.5rem !important;   /* 8px */
    padding-right: 0.5rem !important;  /* 8px */
  }

  /* Realtime leaderboard container (kept for backwards compatibility) */
  .league-stage-creation-page .realtime-leaderboard-container {
    padding-left: 0.5rem !important;   /* 8px */
    padding-right: 0.5rem !important;  /* 8px */
  }

}