/**
 * Frontend styles for Brand Showcase Pro
 */

/* Master Container */
.bsp-master-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: var(--bsp-background-color, #ffffff);
    padding: var(--bsp-padding, 20px) 0;
    box-sizing: border-box;
    box-shadow: rgba(190, 223, 255, 0.4) 0px 15px, rgba(190, 223, 255, 0.3) 0px 25px, rgba(190, 223, 255, 0.2) 0px 35px, rgba(190, 223, 255, 0.1) 0px 45px, rgba(190, 223, 255, 0.05) 0px 55px;
    background: #bedfff;
    border-radius: 0 0 35px 35px;
    margin-bottom: 30px;
}

/* Showcase Title */
.bsp-showcase-title {
    text-align: center;
    font-size: 20px;
    font-weight: 100;
    margin: 40px 0 30px 0;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 4px;
    word-spacing: 6px;
}

/* Container */
.bsp-brands-container {
    position: relative;
    margin: 30px 0;
    overflow: hidden;
    width: 100%;
    opacity: 0; /* Start hidden */
    transition: opacity 0.8s ease-in-out;
}

.bsp-brands-container.bsp-fade-in {
    opacity: 1; /* Fade in when class is added */
}

/* Carousel Layout */
.bsp-layout-carousel .bsp-carousel-wrapper {
    overflow: hidden;
    padding: 0 0 50px 0;
    width: 100%;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    z-index: 1;
}

.bsp-layout-carousel .bsp-carousel {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 50ms linear; /* Small transition for smoother movement */
    width: max-content;
    position: relative;
    left: 0;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
}

/* Grid Layout */
.bsp-layout-grid .bsp-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 15px 0;
}

/* Brand Item */
.bsp-brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin: 0 15px;
    border-radius: 35px;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    transition: all 0.8s ease;
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 250px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Clone items should be identical to originals */
.bsp-brand-item-clone {
    /* No different styles needed, just a marker class */
}

.bsp-layout-grid .bsp-brand-item {
    margin: 0;
    flex: 0 0 calc(20% - 20px);
    min-width: 150px;
}

.bsp-brand-item:hover {
    transform: translateY(-5px);
}

.bsp-brand-image {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.bsp-brand-item:hover .bsp-brand-image {
    transform: scale(1.05);
}

.bsp-brand-name {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

/* Grayscale effect */
.bsp-grayscale .bsp-brand-image {
    filter: grayscale(100%);
}

.bsp-grayscale .bsp-brand-item:hover .bsp-brand-image {
    filter: grayscale(0%);
}

/* Non-grayscale (ensuring no grayscale is applied) */
.bsp-brands-container:not(.bsp-grayscale) .bsp-brand-image {
    filter: grayscale(0%);
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .bsp-layout-grid .bsp-brand-item {
        flex: 0 0 calc(25% - 20px);
    }
}

@media screen and (max-width: 768px) {
    .bsp-layout-grid .bsp-brand-item {
        flex: 0 0 calc(33.333% - 20px);
    }
    
    .bsp-brand-image {
        max-height: 80px;
    }
    
    .bsp-brand-item {
        padding: 12px;
    }
    
    .bsp-master-container {
        padding: 30px 0;
        border-radius: 25px;
    }
    
    .bsp-showcase-title {
        font-size: 18px;
        margin-bottom: 20px;
        letter-spacing: 3px;
        word-spacing: 4px;
    }
}

@media screen and (max-width: 576px) {
    .bsp-layout-grid .bsp-brand-item {
        flex: 0 0 calc(50% - 20px);
    }
    
    .bsp-brand-item {
        min-width: 120px;
        padding: 12px;
        margin: 0 6px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
    }
    
    .bsp-brand-image {
        max-height: 50px;
    }
    
    .bsp-carousel-wrapper {
        padding: 6px 0;
    }
    
    /* Reduce overall container height for mobile */
    .bsp-brands-container {
        margin: 12px 0;
    }
    
    .bsp-brand-name {
        margin-top: 4px;
        font-size: 12px;
    }
    
    .bsp-master-container {
        padding: 20px 0;
        border-radius: 20px;
    }
    
    .bsp-showcase-title {
        font-size: 16px;
        margin-bottom: 15px;
        letter-spacing: 2px;
        word-spacing: 3px;
    }
}

/* Even smaller screens */
@media screen and (max-width: 480px) {
    .bsp-brand-item {
        min-width: 90px;
        padding: 4px;
        margin: 0 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }
    
    .bsp-brand-image {
        max-height: 40px;
    }
    
    .bsp-carousel-wrapper {
        padding: 4px 0;
    }
    
    .bsp-brands-container {
        margin: 8px 0;
    }
    
    .bsp-brand-name {
        margin-top: 2px;
        font-size: 10px;
    }
    
    .bsp-master-container {
        padding: 15px 0;
        border-radius: 15px;
    }
    
    .bsp-showcase-title {
        font-size: 14px;
        margin-bottom: 10px;
        letter-spacing: 1px;
        word-spacing: 2px;
    }
}

/* Very small screens */
@media screen and (max-width: 360px) {
    .bsp-brand-item {
        min-width: 70px;
        padding: 3px;
        margin: 0 3px;
    }
    
    .bsp-brand-image {
        max-height: 30px;
    }
    
    .bsp-showcase-title {
        font-size: 12px;
        margin-bottom: 8px;
        letter-spacing: 0;
        word-spacing: 1px;
    }
}

/* No brands message styling */
.bsp-no-brands {
    text-align: center;
    color: #666;
    font-size: 16px;
    font-weight: 400;
    margin: 30px 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border: 2px dashed #ccc;
    line-height: 1.6;
}

/* Responsive styling for no brands message */
@media screen and (max-width: 768px) {
    .bsp-no-brands {
        font-size: 14px;
        margin: 20px 15px;
        padding: 15px;
    }
}

@media screen and (max-width: 480px) {
    .bsp-no-brands {
        font-size: 13px;
        margin: 15px 10px;
        padding: 12px;
        line-height: 1.5;
    }
}

@media screen and (max-width: 360px) {
    .bsp-no-brands {
        font-size: 12px;
        margin: 10px 8px;
        padding: 10px;
        line-height: 1.4;
    }
}