/**
 * Carousel Indicators Fix
 * แก้ไขปัญหา Carousel Indicators ที่แสดงขนาดใหญ่ผิดปกติ
 */

/* ========================================
   CAROUSEL INDICATORS CRITICAL FIX
   ======================================== */

/* Force reset for all possible carousel indicator variations */
.carousel-indicators,
.product-card .carousel-indicators {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 10 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Indicator buttons - maximum specificity */
.carousel-indicators .indicator,
.product-card .carousel-indicators .indicator,
.carousel-indicators button.indicator,
.product-card .carousel-indicators button.indicator,
button.indicator,
.indicator {
    width: 4px !important;
    height: 4px !important;
    min-width: 4px !important;
    min-height: 4px !important;
    max-width: 4px !important;
    max-height: 4px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
}

/* Active state */
.carousel-indicators .indicator.active,
.product-card .carousel-indicators .indicator.active,
.carousel-indicators button.indicator.active,
.product-card .carousel-indicators button.indicator.active,
button.indicator.active,
.indicator.active {
    background: white !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

/* Hover state */
.carousel-indicators .indicator:hover,
.product-card .carousel-indicators .indicator:hover,
.carousel-indicators button.indicator:hover,
.product-card .carousel-indicators button.indicator:hover,
button.indicator:hover,
.indicator:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.1) !important;
}

/* Focus state for accessibility */
.carousel-indicators .indicator:focus,
.product-card .carousel-indicators .indicator:focus,
button.indicator:focus,
.indicator:focus {
    outline: 1px solid white !important;
    outline-offset: 1px !important;
}

/* Remove any pseudo elements that might interfere */
.indicator::before,
.indicator::after {
    display: none !important;
    content: none !important;
}

/* Remove any child elements */
.indicator * {
    display: none !important;
}

/* Override Bootstrap carousel if present */
.carousel-indicators [data-bs-target],
.carousel-indicators [data-target] {
    width: 4px !important;
    height: 4px !important;
    min-width: 4px !important;
    min-height: 4px !important;
    max-width: 4px !important;
    max-height: 4px !important;
    border-radius: 50% !important;
    margin-left: 1.5px !important;
    margin-right: 1.5px !important;
    text-indent: -999px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border: none !important;
    box-sizing: border-box !important;
}

.carousel-indicators [data-bs-target].active,
.carousel-indicators [data-target].active {
    background-color: white !important;
    transform: scale(1.2) !important;
}

/* ========================================
   MOBILE RESPONSIVE (768px and below)
   ======================================== */

@media (max-width: 768px) {
    .carousel-indicators,
    .product-card .carousel-indicators {
        bottom: 6px !important;
        gap: 2px !important;
    }
    
    .carousel-indicators .indicator,
    .product-card .carousel-indicators .indicator,
    .carousel-indicators button.indicator,
    .product-card .carousel-indicators button.indicator,
    button.indicator,
    .indicator {
        width: 3px !important;
        height: 3px !important;
        min-width: 3px !important;
        min-height: 3px !important;
        max-width: 3px !important;
        max-height: 3px !important;
    }
    
    .carousel-indicators .indicator.active,
    .product-card .carousel-indicators .indicator.active,
    button.indicator.active,
    .indicator.active {
        transform: scale(1.3) !important;
    }
}

/* ========================================
   VERY SMALL MOBILE (480px and below)
   ======================================== */

@media (max-width: 480px) {
    .carousel-indicators,
    .product-card .carousel-indicators {
        bottom: 4px !important;
        gap: 1.5px !important;
    }
}

/* ========================================
   HIGH SPECIFICITY OVERRIDES
   ======================================== */

/* Ultra high specificity for stubborn overrides */
html body .product-card .carousel-indicators .indicator,
html body .carousel-indicators .indicator {
    width: 4px !important;
    height: 4px !important;
    font-size: 0 !important;
}

html body .product-card .carousel-indicators .indicator.active,
html body .carousel-indicators .indicator.active {
    width: 4px !important;
    height: 4px !important;
    transform: scale(1.2) !important;
}