:root {
  --slider-card-bg: #f0f0f0;
  --slider-card-bg-hover: #e0e0e0;
  --slider-card-radius: 8px;
  --slider-card-padding: 20px;
  --slider-card-height: 200px;
  --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-size: 40px;
  --slider-arrow-icon-size: 20px;
  
  --slider-dot-color: #ccc;
  --slider-dot-color-active: hsl(230 100% 74%);
  --slider-dot-size: 12px;
  
  --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%);
}

.slider {position: relative; display: flex; align-items: center; overflow: hidden; width: 100%; padding: 10px 0;}
.slider-container {display: flex; transition: transform 0.5s ease; width: 100%;}

.slider-card {flex: 0 0 auto; padding-inline: 15px;}

.slider-card-content {
    border-radius: var(--slider-card-radius); 
    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;
    background: linear-gradient(45deg, var(--slider-card-gradient-start), var(--slider-card-gradient-end));
    color: white;
    transition: background 0.3s ease;
}

.slider-card:hover .slider-card-content {
    background: linear-gradient(45deg, var(--slider-card-gradient-start), var(--slider-card-gradient-end));
}

.slider-dots-container {display: flex; flex-wrap: wrap; justify-content: center; row-gap: 20px; margin-top: 20px;}
.slider-dot {width: var(--slider-dot-size); height: var(--slider-dot-size); border-radius: 50%; 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); width: 24px; border-radius: 6px;}

.slider-arrow {background: var(--slider-arrow-bg); color: var(--slider-arrow-color); border: none; width: var(--slider-arrow-size); height: var(--slider-arrow-size); border-radius: 50%; 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: 10px; top: 50%; transform: translateY(-50%);}
.slider-arrow-next {right: 10px; 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;}