:root {
  --slider-card-bg: #f0f0f0;
  --slider-card-bg-hover: #e0e0e0;
  --slider-card-radius: 8px;
  --slider-card-padding: 23px;
  --slider-card-height: 100%;
  --slider-card-gradient-start: hsl(230 100% 74% / 0.8);
  --slider-card-gradient-end: hsl(230 100% 74% / 0.5);

  --slider-arrow-color: #fff;
  --slider-arrow-bg: rgba(0,0,0,0.5);
  --slider-arrow-bg-hover: rgba(0,0,0,0.7);
  --slider-arrow-width: 36px;
  --slider-arrow-height: 62px;
  --slider-arrow-icon-size: 20px;
  
  --slider-dot-color: #da1834;
  --slider-dot-color-active :#da1834;
  --slider-dot-width: 25px;
  --slider-dot-height: 8px;
  
  --slider-progress-height: 4px;
  --slider-progress-bg: #eee;
  --slider-progress-color: hsl(230 100% 74%);
}

.dark {
    --slider-card-gradient-start: hsl(230 100% 74% / 0.8);
    --slider-card-gradient-end: hsl(230 100% 74% / 0.5);
    --slider-dot-color-active: hsl(230 100% 74%);
    --slider-progress-color: hsl(230 100% 74%);
}

* {padding: 0; margin: 0; box-sizing: border-box;}

.slider {position: relative; overflow: hidden; width: 100%;}
.slider-container {display: flex; transition: transform 0.5s ease; width: 100%;}

.slider-card {flex: 0 0 auto; transition: transform 0.3s ease, box-shadow 0.3s ease; }


.slider-card-content {
    padding: var(--slider-card-padding); 
    height: var(--slider-card-height); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; 
    font-weight: bold; 
    user-select: none;
    color: white;
    transition: background 0.3s ease;
   
}



.slider-dots-container {display: flex; justify-content: center; margin-top: 50px;}
.slider-dot {width: var(--slider-dot-width); height: var(--slider-dot-height); background: var(--slider-dot-color); margin: 0 5px; cursor: pointer; border: none; padding: 0; transition: all 0.3s ease;}
.slider-dot.active {background: var(--slider-dot-color-active); opacity: .5; width: 40px;}

.slider-arrow {background: transparent; color: var(--slider-arrow-color); border: none; width: var(--slider-arrow-width); height: var(--slider-arrow-height); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--slider-arrow-icon-size); position: absolute; z-index: 1;}
.slider-arrow:hover {background: var(--slider-arrow-bg-hover);}
.slider-arrow-prev {left: 50px; top: 50%; transform: translateY(-50%);}
.slider-arrow-next {right: 50px; top: 50%; transform: translateY(-50%);}

.vertical-slides {height: 600px;}
.vertical-slides .slider-container {flex-direction: column;}
.vertical-slides .slider-card-content {height: 100%;}
.vertical-slides .slider-arrow-prev {left: 50%; top: 10px; transform: translateX(-50%) rotate(90deg);}
.vertical-slides .slider-arrow-next {left: 50%; bottom: 0; top: auto; transform: translateX(-50%) rotate(90deg);}
.vertical-slides .slider-dots-container {position: absolute; inset: 0 auto 0 3%; height: fit-content; flex-direction: column; align-items: start; background-color: hsl(220 13% 95%); padding: 8px; border-radius: 20px; margin-block: auto;}
.vertical-slides .slider-dot {margin: 5px 0;}
.vertical-slides .slider-dot.active {width: 12px; height: 24px;}
.vertical-slides .carousel-progress {position: absolute; inset: 0 0 auto;}

.slider-container.draggable {cursor: grab; user-select: none;}
.slider-container.dragging {cursor: grabbing; transition: none;}
.slider-arrow.disabled {opacity: 0.5; cursor: not-allowed; background: rgba(0,0,0,0.3);}

.carousel-progress {background: var(--slider-progress-bg); height: var(--slider-progress-height); width: 100%; position: relative; margin-top: 10px; border-radius: 1px; overflow: hidden;}
.carousel-progress-bar {background: var(--slider-progress-color); height: 100%; width: 0; transition: width 400ms ease;}