/**
 * Smart WooCommerce Brands Carousel — Frontend Styles
 * Author: Comify.net
 *
 * Apple-style clean layout. All sizing driven by CSS custom properties
 * (--bc-logo-w, --bc-logo-h, --bc-gap, --bc-desktop, --bc-tablet, --bc-mobile)
 * which are injected inline by the PHP template based on admin settings.
 */

/* =========================================================
 * THEME-INTERFERENCE GUARDS
 * Some themes (Avada, Flatsome, Astra builders, custom builds)
 * apply aggressive global rules to img / a / div that hide our content.
 * Force-reset the most common offenders for elements inside our wrapper.
 * ========================================================= */
.bc-wrapper,
.bc-wrapper * {
    visibility: visible !important;
    opacity: initial;
}

.bc-wrapper img {
    display: block !important;
    max-width: 100% !important;
    height: auto;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none;
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
}

/* Specifically defeat Avada / Fusion lazy-load CSS that sets opacity:0 on images
   until they enter the viewport. Our carousel handles its own visibility. */
.bc-wrapper img.lazyload,
.bc-wrapper img.fusion-lazyload,
.bc-wrapper img.lazy,
.bc-wrapper img.b-lazy,
.bc-wrapper img.lazyloading {
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
}

.bc-wrapper a {
    display: flex !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bc-wrapper a::before,
.bc-wrapper a::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
 * WRAPPER
 * ========================================================= */
.bc-wrapper {
    --bc-logo-w: 160px;
    --bc-logo-h: 80px;
    --bc-gap: 24px;
    --bc-desktop: 6;
    --bc-tablet: 4;
    --bc-mobile: 2;

    /* Default to desktop count. Overridden via media queries below. */
    --bc-items: var(--bc-desktop);

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 0;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.bc-wrapper *,
.bc-wrapper *::before,
.bc-wrapper *::after {
    box-sizing: border-box;
}

/* RTL: flip the layout direction so items start from the right. */
.bc-wrapper.is-rtl {
    direction: rtl;
}

/* =========================================================
 * VIEWPORT (the visible window)
 * ========================================================= */
.bc-viewport {
    width: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.bc-viewport.is-dragging {
    cursor: grabbing;
}

/* When content fits — disable dragging cursor. */
.bc-viewport.is-static {
    cursor: default;
}

/* =========================================================
 * TRACK
 * ========================================================= */
.bc-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--bc-gap);
    /* Free mode: no transition; JS drives transform every frame.
       Slide mode: JS sets transition inline when animating between slides. */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* Centering when content fits (added via JS in free mode only). */
.bc-mode-free .bc-track.is-centered {
    justify-content: center;
    transform: none !important;
}

/* Slide mode should NEVER center — it must always be transformable. */
.bc-mode-slide .bc-track {
    justify-content: flex-start !important;
}

.bc-mode-slide .bc-track.is-centered {
    justify-content: flex-start !important;
    transform: translate3d(0,0,0);
}

/* =========================================================
 * ITEM
 * ========================================================= */
.bc-item {
    /* Flex-basis = (100% - total gaps) / items_per_view  */
    flex: 0 0 calc(
        (100% - (var(--bc-gap) * (var(--bc-items) - 1))) / var(--bc-items)
    );
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bc-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
    border: 0;
    outline: none;
}

.bc-item a:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 4px;
    border-radius: 6px;
}

/* =========================================================
 * LOGO BOX
 * ========================================================= */
.bc-logo {
    width: 100%;
    max-width: var(--bc-logo-w);
    height: var(--bc-logo-h);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0.85;
}

.bc-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.bc-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none; /* let the wrapper handle drag/click */
    -webkit-user-drag: none;
    user-select: none;
}

/* Smart sizing classes — based on aspect ratio detected in PHP. */
.bc-logo--wide img {
    /* Wide logos: fill width, height adapts. */
    width: 100%;
    height: auto;
    max-height: 100%;
}

.bc-logo--square img {
    /* Square / tall logos: fill height, width adapts. */
    height: 100%;
    width: auto;
    max-width: 100%;
}

/* Text fallback when no logo image exists. */
.bc-logo--text {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 8px 16px;
}

.bc-logo--text span {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* =========================================================
 * SNAP MODE (mobile)
 * In snap mode, items are sized so exactly N fit in viewport
 * (controlled by --bc-mobile via the existing flex-basis math),
 * and the JS centers the active item via transform.
 * ========================================================= */
.bc-wrapper.bc-mode-snap .bc-track {
    /* Transition is set inline by JS; no centering. */
    justify-content: flex-start !important;
}

.bc-wrapper.bc-mode-snap .bc-viewport {
    cursor: grab;
}

.bc-wrapper.bc-mode-snap .bc-viewport.is-dragging {
    cursor: grabbing;
}

/* =========================================================
 * RESPONSIVE BREAKPOINTS
 * Switch the --bc-items variable so flex-basis recalculates.
 * ========================================================= */
@media (max-width: 1023px) {
    .bc-wrapper {
        --bc-items: var(--bc-tablet);
    }
}

@media (max-width: 599px) {
    .bc-wrapper {
        --bc-items: var(--bc-mobile);
    }
}

/* =========================================================
 * DARK MODE — gentle adaption
 * ========================================================= */
@media (prefers-color-scheme: dark) {
    .bc-logo {
        opacity: 0.9;
    }
}

/* =========================================================
 * REDUCED MOTION — kill hover transform for a11y.
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .bc-logo,
    .bc-logo:hover {
        transition: none;
        transform: none;
    }
}