/* Brand Buttons - Compact Segmented Control */

/* Segmented control container - no card background */
.brand-selector {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 60px;
    background: transparent !important;
    border-radius: 30px;
    padding: 4px;
    border: none !important;
    box-shadow: none !important;
}

/* Segmented control buttons - no upward movement */
.brand-btn {
    background: linear-gradient(135deg, #6c757d 0%, #2c3e50 100%);
    color: white;
    border: none !important;
    border-radius: 26px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    position: relative !important;
    overflow: hidden;
    margin: 0;
    min-width: 100px;
    text-align: center;
    z-index: 2;
    flex: 1;
    white-space: nowrap;
    box-shadow: none !important;
    outline: none !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: baseline !important;
}

/* Active/Selected segment - slightly different shade - no movement */
.brand-btn.active {
    background: linear-gradient(135deg, #495057 0%, #212529 100%);
    color: white;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    z-index: 3;
}

/* Hover state - no movement or upward jump */
.brand-btn:hover:not(.active) {
    background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
    color: white;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* Active hover - no movement */
.brand-btn.active:hover {
    transform: none !important;
    background: linear-gradient(135deg, #495057 0%, #212529 100%) !important;
    color: white !important;
    box-shadow: none !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* Prevent any upward movement on all states */
.brand-btn,
.brand-btn:hover,
.brand-btn:active,
.brand-btn:focus,
.brand-btn.active,
.brand-btn.active:hover,
.brand-btn.active:active,
.brand-btn.active:focus {
    transform: none !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: baseline !important;
}

/* Remove borders between segments */
.brand-btn:not(:last-child) {
    border-right: none !important;
    border-right: 1px solid rgba(108, 117, 125, 0.2) !important;
}

/* All buttons have same shape - uniform rounded corners */
.brand-btn {
    border-radius: 26px !important;
}

/* Focus states */
.brand-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.3) !important;
    z-index: 4 !important;
}

.brand-btn.active:focus {
    outline: none !important;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3), 0 0 0 2px rgba(108, 117, 125, 0.3) !important;
}

/* Active state */
.brand-btn:active {
    transform: scale(0.98) !important;
}

.brand-btn.active:active {
    transform: scale(0.98) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .brand-selector {
        padding: 3px !important;
        margin-bottom: 40px !important;
    }
    
    .brand-btn {
        padding: 10px 18px !important;
        font-size: 12px !important;
        min-width: 80px !important;
    }
}

@media (max-width: 480px) {
    .brand-selector {
        padding: 2px !important;
        margin-bottom: 30px !important;
        max-width: 100% !important;
    }
    
    .brand-btn {
        padding: 8px 14px !important;
        font-size: 11px !important;
        min-width: 70px !important;
    }
}

/* Ensure no gaps or spacing issues */
.brand-selector {
    display: inline-flex !important;
    width: auto !important;
}

.brand-btn {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Remove any default browser styling */
.brand-btn {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Smooth transitions for all states */
.brand-btn {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
}