/* ============================================
   CUSTOM PRODUCT DETAIL PAGE STYLING
   Konsisten dengan custom-header.css dan custom-list-product.css
   Senior Frontend Developer: Comprehensive Fix - No Duplication
   ============================================ */

/* ============ ROOT VARIABLES ============ */
:root {
    --rc-orange-dark: #ee4d2d;
    --rc-border: #e0e0e0;
    --rc-bg-light: #f8f9fa;
    --rc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --rc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --rc-radius-md: 12px;
    --rc-radius-sm: 8px;
}

/* ============ MAIN PRODUCT IMAGE SLIDER ============ */
.detail-product .detail-bigimg {
    margin-bottom: 25px;
    position: relative;
}

/* Slick list wrapper */
.detail-product .detail-bigimg .slick-list {
    border-radius: var(--rc-radius-md);
    overflow: visible !important; /* Visible untuk arrows */
}

/* Slick track */
.detail-product .detail-bigimg .slick-track {
    display: flex !important;
}

/* Individual slide - NO BORDER for smooth transition */
.detail-product .detail-bigimg .slick-slide {
    background: #ffffff;
    border: none !important; /* NO BORDER - smooth transition */
    border-radius: var(--rc-radius-md);
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 500px !important;
    height: 500px !important;
    padding: 20px !important;
    margin: 0 !important;
}

/* Inner div wrapper */
.detail-product .detail-bigimg .slick-slide > div {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Product image */
.detail-product .detail-bigimg img {
    max-width: 100% !important;
    max-height: 600px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ============ SLIDER ARROWS (Override Template CSS - High Specificity) ============ */
/* Disable template's :before pseudo-element */
.detail-product .detail-bigimg button.slick-prev:before,
.detail-product .detail-bigimg button.slick-next:before {
    content: none !important;
    display: none !important;
}

/* Main arrow styling - override template completely */
.detail-product .detail-bigimg button.slick-prev,
.detail-product .detail-bigimg button.slick-next,
.detail-product .detail-bigimg .slick-prev,
.detail-product .detail-bigimg .slick-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    z-index: 100 !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    color: #2f2f2f !important;
}

/* Left arrow position */
.detail-product .detail-bigimg button.slick-prev,
.detail-product .detail-bigimg .slick-prev {
    left: 10px !important;
    right: auto !important;
}

/* Right arrow position */
.detail-product .detail-bigimg button.slick-next,
.detail-product .detail-bigimg .slick-next {
    right: 10px !important;
    left: auto !important;
}

/* Hover state */
.detail-product .detail-bigimg button.slick-prev:hover,
.detail-product .detail-bigimg button.slick-next:hover,
.detail-product .detail-bigimg .slick-prev:hover,
.detail-product .detail-bigimg .slick-next:hover {
    border-color: rgba(238, 77, 45, 0.45) !important;
    color: #ee4d2d !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(238, 77, 45, 0.2) !important;
}

/* Boxicons icons styling */
.detail-product .detail-bigimg button.slick-prev i,
.detail-product .detail-bigimg button.slick-next i,
.detail-product .detail-bigimg .slick-prev i,
.detail-product .detail-bigimg .slick-next i {
    font-size: 18px !important;
    color: #2f2f2f !important;
    transition: color 0.3s ease !important;
    display: block !important;
    line-height: 1 !important;
}

/* Hover icon color */
.detail-product .detail-bigimg button.slick-prev:hover i,
.detail-product .detail-bigimg button.slick-next:hover i,
.detail-product .detail-bigimg .slick-prev:hover i,
.detail-product .detail-bigimg .slick-next:hover i {
    color: #ee4d2d !important;
}

/* ============ THUMBNAIL NAVIGATION (Fixed - No Movement on Navigation) ============ */
.detail-product .slider-nav-thumbnails {
    margin-top: 20px;
    position: relative;
}

/* Slick list - hidden untuk prevent horizontal scroll */
.detail-product .slider-nav-thumbnails .slick-list {
    padding: 0 !important;
    overflow: hidden !important;
    /* Penting: hidden agar tidak muncul scroll bar */
}

/* Slick track - BIARKAN Slick handle sepenuhnya */
.detail-product .slider-nav-thumbnails .slick-track {
    display: flex !important;
    align-items: stretch !important;
    /* JANGAN override transform di sini - biarkan Slick handle */
}

/* Thumbnail slides - FIXED positioning & size */
.detail-product .slider-nav-thumbnails .slick-slide {
    /* Appearance */
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: var(--rc-radius-sm);
    background: var(--rc-bg-light);
    overflow: hidden !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;

    /* CRITICAL: Fixed positioning - TIDAK berubah saat navigation */
    float: none !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;

    /* CRITICAL: Fixed size - TIDAK berubah saat navigation */
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    margin: 0 8px !important;

    /* Flex untuk Slick compatibility */
    flex: 0 0 100px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;

    /* PENTING: JANGAN override transform/position - biarkan Slick handle */
}

/* Inner div wrapper - fixed sizing dan centering */
.detail-product .slider-nav-thumbnails .slick-slide > div {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Thumbnail images */
.detail-product .slider-nav-thumbnails .slick-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Hover state - NO transform */
.detail-product .slider-nav-thumbnails .slick-slide:hover {
    border-color: rgba(238, 77, 45, 0.5) !important;
    box-shadow: var(--rc-shadow-sm) !important;
}

/* Active thumbnail - border color change */
.detail-product .slider-nav-thumbnails .slick-current {
    border-color: var(--rc-orange-dark) !important;
    box-shadow: 0 4px 12px rgba(238, 77, 45, 0.3) !important;
}

/* Hide thumbnail if only 1 image */
.detail-product .slider-nav-thumbnails .slick-slide:only-child {
    display: none !important;
}

.detail-product .slider-nav-thumbnails:has(.slick-slide:only-child) {
    display: none;
}

/* ============ ADD TO CART BUTTON COLOR ============ */
.btn-add-cart {
    background-color: var(--rc-orange-dark) !important;
    border-color: var(--rc-orange-dark) !important;
    color: #ffffff !important;
}

.btn-add-cart:hover,
.listview-product
    .card
    .card-body
    .listing-button
    .btn-order.btn-add-cart:hover {
    background-color: #c21d00 !important;
    border-color: #c21d00 !important;
    color: #ffffff !important;
    opacity: 0.9;
}

/* ============ CARD HOVER EFFECTS ============ */
.listview-product .card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.listview-product .card:hover {
    box-shadow: var(--rc-shadow-md);
}

.product-unified-image {
    transition: transform 0.3s ease;
}

.listview-product .card:hover .product-unified-image {
    transform: scale(1.03);
}

.fav-icon {
    transition: all 0.3s ease;
}

.fav-icon:hover {
    background-color: #fff !important;
    color: #ff4757 !important;
    transform: scale(1.1);
}

/* ============ RESPONSIVE DESIGN ============ */
@media (max-width: 991px) {
    .detail-product .detail-bigimg .slick-slide {
        min-height: 400px !important;
        height: 400px !important;
        padding: 15px !important;
    }

    .detail-product .detail-bigimg img {
        max-height: 450px !important;
    }

    .detail-product .slider-nav-thumbnails .slick-slide {
        height: 80px !important;
        width: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        flex: 0 0 80px !important;
    }

    .detail-product .slider-nav-thumbnails .slick-slide > div {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }
}

@media (max-width: 767px) {
    .detail-product .detail-bigimg .slick-slide {
        min-height: 350px !important;
        height: 350px !important;
        padding: 10px !important;
    }

    .detail-product .detail-bigimg img {
        max-height: 400px !important;
    }

    .detail-product .detail-bigimg button.slick-prev,
    .detail-product .detail-bigimg button.slick-next,
    .detail-product .detail-bigimg .slick-prev,
    .detail-product .detail-bigimg .slick-next {
        width: 26px !important;
        height: 26px !important;
    }

    .detail-product .slider-nav-thumbnails .slick-slide {
        height: 70px !important;
        width: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        flex: 0 0 70px !important;
    }

    .detail-product .slider-nav-thumbnails .slick-slide > div {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
    }
}

@media (max-width: 575px) {
    .detail-product .detail-bigimg .slick-slide {
        min-height: 300px !important;
        height: 300px !important;
        padding: 8px !important;
    }

    .detail-product .detail-bigimg img {
        max-height: 350px !important;
    }

    .detail-product .slider-nav-thumbnails .slick-slide {
        height: 60px !important;
        width: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        flex: 0 0 60px !important;
        margin: 0 4px !important;
    }

    .detail-product .slider-nav-thumbnails .slick-slide > div {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }

    .detail-product .detail-bigimg button.slick-prev,
    .detail-product .detail-bigimg button.slick-next,
    .detail-product .detail-bigimg .slick-prev,
    .detail-product .detail-bigimg .slick-next {
        width: 24px !important;
        height: 24px !important;
    }

    .detail-product .detail-bigimg button.slick-prev i,
    .detail-product .detail-bigimg button.slick-next i,
    .detail-product .detail-bigimg .slick-prev i,
    .detail-product .detail-bigimg .slick-next i {
        font-size: 14px !important;
    }
}

/* ============ SMOOTH TRANSITIONS ============ */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}