/* Main Containers */
.brf-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    color: #333;
}

/* Filters Bar */
.brf-filters-bar {
    margin-bottom: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.brf-filters-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.brf-filter-btn {
    background: transparent;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.brf-filter-btn.active,
.brf-filter-btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Reset Button */
.brf-reset-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #444;
    color: #fff;
    border: none;
    padding: 0 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    height: 42px;
    display: flex;
    /* Use Flexbox for centering */
    align-items: center;
    justify-content: center;
}

.brf-reset-btn.active {
    opacity: 1;
    visibility: visible;
}

.brf-reset-btn:hover {
    background: #ff3c00;
}

/* Content Layout */
.brf-main-content {
    display: flex;
    gap: 30px;
}

.brf-results-column {
    flex: 2;
    /* 66% roughly */
}

.brf-map-column {
    flex: 1;
    /* 33% roughly */
    position: relative;
    min-height: 500px;
}

.brf-google-map {
    width: 100%;
    height: 100%;
    min-height: 500px;
    position: sticky;
    top: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Results Grid */
.brf-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Card */
.brf-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: visible !important;
    /* Ensure tooltip isn't clipped */
}

.brf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    z-index: 100;
    /* Bring to front on hover */
    position: relative;
    /* Ensure z-index works */
}

.brf-card h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #111;
}

/* Responsive */
@media (max-width: 900px) {
    .brf-main-content {
        flex-direction: column-reverse;
        /* Map on top in mobile? Or bottom. Usually map top is better for context or bottom for detail. Column reverse puts map on top if HTML order is Results first. Wait, HTML is Results then Map. column-reverse puts Map first visually. */
    }

    .brf-google-map {
        min-height: 300px;
        position: static;
    }

    .brf-results-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Rental Enhancements --- */

/* Reveal Links */
.brf-reveal-wrapper a {
    color: #fff !important;
    text-decoration: underline;
    transition: color 0.2s;
}

.brf-reveal-wrapper a:hover {
    color: #ccc !important;
}

/* Info Tooltip */
.brf-tooltip-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 6px;
}

/* Info Icon - Solid Circle (#666) */
.brf-info-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    background: #666;
    /* Solid background */
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: sans-serif;
    cursor: help;
    line-height: 1;
    margin-top: -1px;
    box-sizing: border-box;
    text-decoration: none;
}

.brf-tooltip-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 145%;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    /* Dark Background */
    border: 1px solid #444;
    /* Dark Border */
    padding: 12px;
    border-radius: 6px;
    width: 200px;
    /* Slightly wider for dots */
    z-index: 999999;
    margin-bottom: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    text-align: left;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.brf-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #222 transparent transparent transparent;
    /* Dark Arrow */
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
}

.brf-tooltip-wrapper:hover .brf-tooltip-content,
.brf-tooltip-wrapper:focus .brf-tooltip-content,
.brf-tooltip-wrapper:focus-within .brf-tooltip-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}

.brf-tooltip-row {
    font-size: 12px;
    color: #fff;
    /* White Text */
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    line-height: 1.3;
}

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

.brf-dots-group {
    display: flex;
    gap: 3px;
    align-items: center;
}

.brf-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.brf-dot.filled {
    background: #ff3c00;
    /* Orange Filled */
}

.brf-dot.empty {
    background: #555;
    /* Dark Grey Empty */
}

/* For simplified tooltip representation (just one dot per row to indicate level? Or replicating structure?)
   User: "wyświetl te trzy statusy w kropkach i napisz obok small <8 units itd."
   I'll style .brf-dot to represent the 'Active' color. 
*/

/* --- Google Maps Infowindow Overrides (Dark Theme) --- */
.gm-style-iw-c {
    background-color: #222 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.gm-style-iw-d {
    overflow: hidden !important;
    background-color: #222 !important;
    color: #fff !important;
}

/* Tail/Arrow Triangle */
.gm-style-iw-tc::after {
    background: #222 !important;
}

/* Close Button */
.gm-ui-hover-effect {
    background: #444 !important;
    border-radius: 50% !important;
    top: 0px !important;
    right: 0px !important;
    opacity: 1 !important;
    transform: scale(0.5) !important;
    transform-origin: top right !important;
}

.gm-ui-hover-effect>span {
    background-color: #fff !important;
}

/* Remove default padding from content wrapper if needed */
.brf-infowindow {
    padding: 2px 12px 5px 12px !important;
}

/* Force white links in shortcodes */
.brf-white-link-wrapper a {
    color: #fff !important;
    text-decoration: none !important;
}

.brf-white-link-wrapper a:hover {
    text-decoration: underline !important;
}

/* Mobile Optimizations */
.brf-mobile-filter-toggle {
    display: none;
    width: auto;
    padding: 4px 12px;
    background: #222;
    border: 1px solid #000;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 0;
    text-align: center;
    color: #fff;
    font-size: 10px;
    /* Reduced */
    align-items: center;
    justify-content: center;
}

.brf-mobile-filter-toggle.active {
    background: #000;
    border-color: #333;
}

/* Mobile Controls Wrapper */
.brf-mobile-controls {
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {

    /* Hide Sort on Mobile */
    .pv-sort-container {
        display: none !important;
    }

    /* Show Mobile Controls */
    .brf-mobile-controls {
        display: flex !important;
    }

    /* Ensure Filter Toggle is visible */
    .brf-mobile-filter-toggle {
        display: inline-flex !important;
    }

    /* Hide Desktop Reset inside input area */
    .brf-question-section .brf-reset-btn {
        display: none !important;
    }

    /* Hide Filters Container by default - Increased Specificity */
    .pv-portfolio-wrapper .pv-filters-container {
        display: none;
        width: 100%;
        flex-direction: column;
        /* Stack children vertically */
        gap: 0;
    }

    /* Stack Filter Groups */
    .brf-distributors-wrapper .pv-filters-container .pv-filter-group,
    .brf-rentals-wrapper .pv-filters-container .pv-filter-group,
    .brf-rentals-wrapper .pv-filters-container .pv-filter-group:nth-child(1),
    .brf-rentals-wrapper .pv-filters-container .pv-filter-group:nth-child(2),
    .brf-rentals-wrapper .pv-filters-container .pv-filter-group:nth-child(3) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px;
    }

    /* Controls Bar Wrapping */
    .pv-controls-bar {
        flex-wrap: wrap !important;
    }

    .brf-mobile-controls {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Mobile Reset Button Styling */
    .brf-mobile-controls .brf-reset-btn {
        position: static !important;
        height: auto !important;
        padding: 4px 12px !important;
        font-size: 10px !important;
        border-radius: 20px !important;
        margin: 0 !important;
        transform: none !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 0.5;
        cursor: not-allowed;
    }

    .brf-mobile-controls .brf-reset-btn.active {
        opacity: 1 !important;
        cursor: pointer;
    }
}

/* Tab Navigation Scrollbar Hide */
.brf-tab-nav {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* Layout Layout Overrides for 40/60 Split */
.pv-controls-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.pv-filters-container {
    flex: 1;
    display: flex;
    gap: 20px;
    margin-right: 20px;
    /* Space between filters and sort */
}

/* Distributors (2 Columns) */
.brf-distributors-wrapper .pv-filters-container .pv-filter-group {
    min-width: 0;
    /* Allow shrinking */
}

.brf-distributors-wrapper .pv-filters-container .pv-filter-group:nth-child(1) {
    flex: 4;
    /* 40% ratio */
}

.brf-distributors-wrapper .pv-filters-container .pv-filter-group:nth-child(2) {
    flex: 6;
    /* 60% ratio */
}

/* Rentals (3 Columns) - Default to equal or adjusting? 
   User specifically mentioned Continents/Countries. 
   Let's keep them somewhat proportional */
/* Rentals (3 Columns) - 30% / 40% / 30% */
.brf-rentals-wrapper .pv-filters-container .pv-filter-group {
    min-width: 0;
}

/* Continent (30%) */
.brf-rentals-wrapper .pv-filters-container .pv-filter-group:nth-child(1) {
    flex: 3;
}

/* Country (40%) */
.brf-rentals-wrapper .pv-filters-container .pv-filter-group:nth-child(2) {
    flex: 4;
}

/* Gear (30%) */
.brf-rentals-wrapper .pv-filters-container .pv-filter-group:nth-child(3) {
    flex: 3;
}

/* Sort Container - Fixed width or auto, stuck right */
.pv-sort-container {
    flex-shrink: 0;
    width: auto;
    min-width: 0 !important;
    /* Override user custom CSS */
}

/* Sort Toggle Styling */
.brf-sort-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid #444;
    border-radius: 20px;
    background: #222;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.brf-sort-toggle:hover {
    background: #333;
    color: #fff;
    border-color: #666;
}

/* Explicit Map Styling override */
#brf-map,
#brf-rental-map {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 80px !important;
    background-color: #222 !important;
}