/* ============================================================
   HSB Frontend Slider CSS v2.0
   ============================================================ */

/* Wrapper */
.hsb-slider-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #000;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

/* Track: all slides side-by-side */
.hsb-slides-track {
    display: flex;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* RTL direction */
[dir="rtl"] .hsb-slides-track {
    flex-direction: row-reverse;
}

/* Individual slide */
.hsb-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    position: relative;
    display: flex;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay */
.hsb-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Slide content */
.hsb-slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 60px;
    box-sizing: border-box;
}

/* Typography */
.hsb-subtitle {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 12px;
    opacity: .9;
    animation: hsbFadeUp .7s .1s both;
}
.hsb-title {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
    word-wrap: break-word;
    animation: hsbFadeUp .7s .25s both;
}
.hsb-description {
    font-size: 18px;
    line-height: 1.65;
    margin: 0 0 36px;
    max-width: 600px;
    animation: hsbFadeUp .7s .4s both;
}

/* Buttons */
.hsb-buttons-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: hsbFadeUp .7s .55s both;
}
.hsb-btn-row { display: block; }

.hsb-button {
    display: inline-block;
    padding: 14px 38px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, opacity .25s;
    letter-spacing: .5px;
    border: none;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.hsb-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    opacity: .92;
}
.hsb-button:active { transform: scale(.97); }

/* Arrows */
.hsb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s, opacity .2s;
    opacity: .8;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0;
    line-height: 1;
}
.hsb-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.1); }
.hsb-arrow-prev { left: 16px; }
.hsb-arrow-next { right: 16px; }

/* Dots */
.hsb-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}
.hsb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--dot-color, #fff);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .25s, transform .25s, border-color .25s;
}
.hsb-dot.hsb-dot-active {
    background: var(--dot-active, #ff6b6b);
    border-color: var(--dot-active, #ff6b6b);
    transform: scale(1.35);
}

/* Entrance animations (only active slide) */
@keyframes hsbFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hsb-slide-content { padding: 30px 40px; }
    .hsb-title { font-size: 42px; }
    .hsb-subtitle { font-size: 14px; }
    .hsb-description { font-size: 16px; }
    .hsb-button { padding: 12px 28px; font-size: 14px; }
}

@media (max-width: 768px) {
    .hsb-slide-content { padding: 24px 28px; }
    .hsb-title { font-size: 32px; }
    .hsb-subtitle { font-size: 13px; letter-spacing: 2px; }
    .hsb-description { font-size: 14px; margin-bottom: 24px; }
    .hsb-button { padding: 11px 24px; font-size: 13px; }
    .hsb-arrow { width: 38px; height: 38px; font-size: 15px; }
    .hsb-arrow-prev { left: 8px; }
    .hsb-arrow-next { right: 8px; }
}

@media (max-width: 480px) {
    .hsb-slide-content { padding: 20px 18px; }
    .hsb-title { font-size: 26px; }
    .hsb-description { font-size: 13px; }
    .hsb-button { padding: 10px 20px; font-size: 13px; width: 100%; text-align: center; box-sizing: border-box; }
    .hsb-buttons-wrap { gap: 8px; }
    .hsb-arrow { display: none; } /* hide arrows on very small screens to save space */
    .hsb-dots { bottom: 10px; }
}

/* Accessibility */
.hsb-arrow:focus,
.hsb-dot:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Pause-on-hover indicator */
.hsb-slider-wrap:hover .hsb-slides-track {
    /* keep same transition, just visual pause is handled by JS */
}