/* ============================================
   SLIDER COMPONENTS
   ============================================

   Shared slider styles for hero slider dots
   Used across: home page
   ============================================ */

/* Hero Slider Dots */
.hc-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(16px);
    z-index: 3;
}

.hc-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(148, 163, 184, 0.7);
    cursor: pointer;
    transition: background 0.2s ease-out, width 0.2s ease-out, transform 0.2s ease-out;
}

.hc-hero-dot.is-active {
    width: 18px;
    background: #fb923c;
    transform: translateY(-1px);
}

.hc-hero-dot:hover {
    background: rgba(251, 146, 60, 0.8);
}

.hc-hero-dot:focus {
    outline: 2px solid rgba(251, 146, 60, 0.5);
    outline-offset: 2px;
}