/* ==========================================================
   BRANDS SECTION - Master Integrated Edition
   ========================================================== */

.theme-dark {
    --brand-pop-bg: var(--bg-secondary);
    --brand-pop-text: var(--text-primary);
    --brand-overlay: rgba(0, 0, 0, 0.9);
    /* Glow shadow for dark mode visibility using master accent */
    --logo-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 2px var(--accent-glow));
    --logo-shadow-hover: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px var(--accent));
}

.theme-light {
    --brand-pop-bg: var(--bg-secondary);
    --brand-pop-text: var(--text-primary);
    --brand-overlay: rgba(15, 23, 42, 0.85);
    /* Soft dark shadow for light mode */
    --logo-shadow: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
    --logo-shadow-hover: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.2));
}

.brands-module { 
    width: 100%; 
    padding: var(--space-xl) 0; 
    overflow: hidden; 
}

.brands-header-center {
    text-align: center;
    margin-bottom: var(--space-lg);
    padding: 0 var(--space-md);
}

/* Inherits font-size and weight from css.php */
.brands-header-center h2 {
    font-size: var(--text-section-title);
    font-weight: 800;
    color: var(--accent);
    margin-bottom: var(--space-xs);
}

.brands-header-center p {
    color: var(--text-muted);
}

.brands-row-container {
    width: 100%; 
    height: 120px; 
    overflow: hidden; 
    position: relative;
    display: flex;
    align-items: center;
    /* Soft edges using standard masking */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.brands-track { 
    display: flex; 
    flex-direction: row;
    gap: 15px; /* Minimum separator */
    width: max-content; 
    align-items: center; 
    will-change: transform;
}

/* MASTER OVERRIDE: 
   We reset padding/border inherited from .brand-card-scroll in css.php 
   to keep the "Frameless" look and prevent cropping.
*/
.brands-module .brand-card-scroll { 
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex: 0 0 auto; 
    width: 110px; 
    height: 90px; 
    cursor: pointer;
    display: flex !important; 
    align-items: center; 
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible !important;
    line-height: 0 !important;
}

.card-frame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-frame img { 
    max-width: 95%; 
    max-height: 95%; 
    object-fit: contain; 
    filter: var(--logo-shadow);
    transition: all 0.3s ease;
    display: block;
}

.brand-card-scroll:hover { 
    transform: scale(1.1) translateY(-3px);
    z-index: 10;
}

.brand-card-scroll:hover img {
    filter: var(--logo-shadow-hover);
}

/* RTL Mask Correction */
[dir="rtl"] .brands-row-container {
    mask-image: linear-gradient(to left, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to left, transparent, black 10%, black 90%, transparent);
}

/* ===== Popup UI - Uses Master Card variables ===== */
.brand-pop-overlay {
    position: fixed; inset: 0; background: var(--brand-overlay); backdrop-filter: blur(12px);
    display: none; justify-content: center; align-items: center; z-index: 99999; 
    opacity: 0; transition: opacity 0.3s ease;
}
.brand-pop-overlay.is-visible { opacity: 1; }

.brand-pop-card {
    background: var(--brand-pop-bg); 
    width: 90%; 
    max-width: 400px;
    border-radius: var(--card-radius); 
    padding: var(--space-lg); 
    position: relative;
    color: var(--brand-pop-text); 
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

.brand-pop-close-btn {
    position: absolute; top: 15px; right: 15px; background: none; border: none;
    font-size: 1.5rem; color: var(--text-muted); cursor: pointer;
}

.brand-pop-image-center {
    height: 120px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
}
.brand-pop-image-center img { max-width: 80%; max-height: 100%; object-fit: contain; }

.brand-pop-description { text-align: center; line-height: 1.6; font-size: 0.95rem; }

@media (max-width: 768px) {
    .brands-row-container { height: 100px; }
    .brands-module .brand-card-scroll { width: 90px; height: 70px; }
    .brands-track { gap: 10px; }
}