/* -------------------------------------------------------------
 * Brand Pro – Full Release
 * Frontend Style (Colorful, Multi-row, Smooth Marquee)
 * Updated: vertical-centering, min-height, carousel-safe reset
 * ------------------------------------------------------------- */

.bpf-multi-wrapper {
    width: 100%;
    padding: 18px 6px;
    --bpf-gap: 34px;
    box-sizing: border-box;
    display: block;
    position: relative;
}

/* Each row */
.bpf-row {
    overflow: hidden;
    width: 100%;
    margin-bottom: 22px;
    position: relative;
    box-sizing: border-box;
    min-height: 88px; /* prevents logos from visually "jumping inside" - adjust as needed */
}

.bpf-row:last-child {
    margin-bottom: 0;
}

/* Moving inner wrapper */
.bpf-row-inner {
    display: flex;
    flex-wrap: nowrap !important;
    gap: var(--bpf-gap);
    align-items: center;           /* vertical centering */
    justify-content: flex-start;
    will-change: transform;
    white-space: nowrap;
    /* default transition is none; JS will apply transition when necessary */
}

/* small helper to mark animation paused (safer selector) */
.bpf-row-inner[style*="animation-play-state: paused"], 
.bpf-row-inner[style*="paused"] {
    animation-play-state: paused !important;
}

/* LOGO ITEM */
.bpf-item {
    flex: 0 0 auto;                /* prevent shrinking */
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.bpf-item img {
    max-height: 70px;
    width: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    filter: none !important;       /* colorful logos */
    transition: transform .35s ease, opacity .35s ease;
}

/* Hover effect */
.bpf-item img:hover {
    transform: scale(1.08);
    opacity: 0.95;
}

/* -------------------------------------------------------------
 * MARQUEE ANIMATIONS
 * Row direction alternates:
 * dir-normal = left
 * dir-reverse = right
 * ------------------------------------------------------------- */

.bpf-row.dir-normal .bpf-row-inner {
    animation-name: bpf-left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

/* IMPORTANT: reverse animation starts from -50% -> 0 so items appear from left */
.bpf-row.dir-reverse .bpf-row-inner {
    animation-name: bpf-right;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

/* Keyframes */
@keyframes bpf-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* FIXED: reverse should move from -50% to 0 so content enters from left */
@keyframes bpf-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* -------------------------------------------------------------
 * CAROUSEL SUPPORT (one-by-one)
 * JS will set inline transforms/transitions; provide a fallback style
 * ------------------------------------------------------------- */
.bpf-multi-wrapper[data-bpf-mode="carousel"] .bpf-row-inner {
    /* keep transition only as default hint; JS will control real timing */
    transition: transform .6s linear;
}

/* If JS disables animation, ensure inner wraps properly in grid mode */
.mode-grid .bpf-row-inner {
    animation: none !important;
    flex-wrap: wrap !important;
    justify-content: center;
}

/* -------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .bpf-item img { max-height: 60px; }
    .bpf-multi-wrapper { --bpf-gap: 28px; }
}

@media (max-width: 768px) {
    .bpf-item img { max-height: 48px; }
    .bpf-multi-wrapper { --bpf-gap: 22px; }
}

@media (max-width: 480px) {
    .bpf-item img { max-height: 40px; }
    .bpf-multi-wrapper { --bpf-gap: 16px; }
}

/* Small utility: avoid unexpected inline transform selector not paused
   -> removed fragile attribute selector that caused VSCode/linter issues
*/
 
/* Accessibility: focus outline for keyboard users */
.bpf-item:focus-within img {
  outline: 2px solid rgba(0,0,0,0.08);
  outline-offset: 4px;
}