/* --- 1. CORE CONTAINER (CARD) --- */
.card.rounded-0 {
    border-radius: 0 !important;
    border: 1px solid #343a40; /* Bootstrap Dark */
}

/* --- 2. SEARCH BOX (DARK & SQUARE) --- */
#eventSearch.form-control {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #444;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#eventSearch.form-control:focus {
    border-color: #007bff !important; /* Bootstrap Primary */
}

#eventSearch::placeholder {
    color: #888;
}

/* --- 3. PANEL MECHANICS (EXPAND/COLLAPSE) --- */
/* Ensure the panel starts hidden */
#filter-panel.filter-panel-collapsed {
    display: none !important;
}

#filter-panel.filter-panel-expanded {
    display: block !important;
}

/* 1. The BASE state (The transition lives here) */
#toggle-icon {
    display: inline-block; /* Essential for transform to work on <span> or <i> */
    transition: transform 0.2s ease; 
    /* This ensures it animates when the class is added AND removed */
}

/* 2. The ACTIVE state (Only contains the change) */
.rotate-icon {
    transform: rotate(180deg);
}

/* --- 4. BUTTON & BADGE CONSISTENCY --- */
.btn, .badge, .input-group-text, .form-control-sm {
    border-radius: 0 !important;
}

/* Make the button group look like one solid unit */
.btn-group .btn-outline-primary {
    border-right: 0;
}

/* --- 5. RESULTS: DISTANCE TAGS --- */
/* This styles the "(X miles)" text in your event list */
.distance-tag {
    color: #ffffff !important; /* Forces text to white */
    font-size: 0.85rem;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.3); /* Subtle white divider */
}

/* --- 6. RESPONSIVE MOBILE TWEAKS --- */
@media (max-width: 768px) {
    #filter-footer {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    
    .btn-group {
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1; /* Buttons grow to fill width on mobile */
    }
    
    #location-context {
        margin-bottom: 5px;
    }
}


/* Styling for disabled buttons */
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5); /* Optional: makes them look more 'off' */
    pointer-events: auto !important; /* Allows the 'title' tooltip to show even when disabled */
}

/* Ensure icons inside disabled buttons also look faded */
.btn:disabled i {
    opacity: 0.5;
}