/* Global box-sizing fix for true scalability */
*, ::before, ::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #FAFAFA; /* Very light gray background */
    color: #333333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    font-size: 2.5em;
    color: #502c2c;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #007BFF; /* Blue Accent */
    padding-bottom: 10px;
    text-align: center;
}

h2 {
    font-size: 1.6em;
    color: #333333;
}

/* ------------------- 2. NAVIGATION/MENU BAR & GLOBAL BUTTONS ------------------- */
.menu-bar {
    background-color: #2C3E50; /* Dark Navy/Slate */
    display: flex;
    justify-content: center;
    padding: 0;
    margin: -20px -20px 20px -20px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
}

.menu-btn, .action-btn {
    background: transparent;
    color: #FFFFFF;
    border: none;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9em;
}

.menu-btn:hover {
    background-color: #3e5369; 
}

/* Primary buttons (used outside the main menu) */
.action-btn {
    background-color: #007BFF; /* Blue Accent */
    color: #FFFFFF;
    border-radius: 5px;
    padding: 10px 15px;
    margin-right: 10px;
    display: inline-block;
}

.action-btn:hover {
    background-color: #0056b3;
}

/* ------------------- 3. SEARCH & FILTERS ------------------- */
.search-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

#searchBar {
    flex-grow: 1;
    padding: 12px 40px 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#searchBar:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.clear-btn {
    position: absolute;
    right: 10px;
    font-size: 1.5em;
    color: #999;
    cursor: pointer;
    display: none;
}

.search-wrapper {
    position: relative;
    max-width: 600px;
}

/* Filter Container Styling */
#filterContainer {
    background-color: #FFFFFF; /* White background */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

/* Custom Dropdown Styling (CRITICAL FIX: position: relative) */
.custom-dropdown-container {
    position: relative; 
    display: inline-block;
    background-color: #F8F9FA; 
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}

/* Dropdown Content Visibility (CRITICAL FIX: display: none/block) */
.dropdown-content {
    /* Set default alignment to left */
    left: 0; 
    transform: none; 
    
    display: none; 
    position: absolute;
    top: 100%; 
    z-index: 100; 
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden; 
    
    /* 🚀 FIX: Use max-content for width adjustment */
    width: max-content; 
    
    margin-top: 5px; 
    text-align: left; 
    box-sizing: border-box; 
    /* Keep white-space nowrap to allow max-content to calculate full text width */
    white-space: nowrap; 
}

/* NEW CLASS FOR JS ALIGNMENT FIX (Right alignment override) */
.dropdown-content.dropdown-align-right {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* Functional CSS: Show content when the hidden checkbox is checked */
.dropdown-toggle:checked + .dropdown-content {
    display: block; 
}

/* --- FIX: REMOVE LIST MARKERS --- */
.dropdown-content ul {
    list-style: none; /* Removes the bullet points/markers */
    padding: 0;      
    margin: 0;       
}
/* ---------------------------------- */

/* Filter Chips Display */
.filter-chip {
    display: inline-flex;
    align-items: center;
    background-color: #007BFF; /* Blue Accent */
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chip-close {
    margin-left: 5px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.1s;
}

/* Dropdown list items */
.dropdown-content li {
    text-align: left; /* Explicitly ensure left alignment */
    padding: 5px 15px; 
    
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.1s;
    font-size: 0.9em;
}

.dropdown-content li:hover {
    background-color: #f0f0f0;
}

.dropdown-content li.selected {
    background-color: #007BFF;
    color: white;
    font-weight: 600;
}

/* ------------------- 4. RESULTS GRID & CARDS ------------------- */
/* Standard grid definition for grouped views */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* FIX 1: Overrides for the main container when a single group view is active */
#ownedCarsContainer.single-group-view .group-container,
#duplicatesContainer.single-group-view .group-container {
    padding: 15px;
    box-shadow: none;
    border-radius: 8px;
    margin-bottom: 0;
    position: absolute;
}

/* FIX 2: Force two equal columns inside the single-group-view */
#ownedCarsContainer.single-group-view .results-grid {
    /* CRITICAL: Override the auto-fill to force exactly two equal columns (1fr 1fr) */
    grid-template-columns: 1fr 1fr;
    
    /* Ensure no outer margin/padding is trapping the width */
    max-width: none;
    margin: 20px 0; 
}

/* FIX 3: Restrict the individual card width inside the two-column view */
#ownedCarsContainer.single-group-view .results-grid .result-card {
    /* Ensures cards don't stretch too wide within the 1fr column */
    max-width: 450px; 
    /* Centers the card within its 1fr column */
    margin: 0 auto; 
}


.result-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    min-height: 350px;
    border: none;
    flex-wrap: wrap;
    flex-direction: row;
}

.result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* --- MAIN CAR IMAGE SIZE (DESKTOP) --- */
/* CRITICAL FIX: Use :not() to exclude the small hunt icons from the 100% rule */
.result-card img:not(.hunt-badge) {
    width: 100%;
    height: 180px; 
    display: block;
    margin: 0 auto; 
    object-fit: contain; 
    background-color: #FFFFFF; 
    border-bottom: 1px solid #eee;
    border-radius: 5px;
}
/* --- MAIN CAR IMAGE SIZE FIX (DESKTOP) END --- */

.card-info {
    padding: 15px;
    flex-grow: 1;
}

.card-info h3, .card-info h4 {
    margin-top: 0;
    margin-bottom: 3px; 
    font-size: 1.1em;
    font-weight: 600;
    color: #2C3E50;
    line-height: 1.2;
    text-align: center; 
}

.card-info p {
    margin: 2px 0;
    font-size: 0.9em;
    color: #666;
    text-align: center; 
}

/* Card Action Buttons (Used in Grid) */
.owned-btn, .unowned-btn, .add-wanted-btn {
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85em;
    margin-top: 10px;
    transition: background-color 0.2s;
    display: block; 
    width: 100%;
    text-align: center;
}

.owned-btn { /* Primary Action */
    background-color: #007BFF;
    color: white;
}
.owned-btn:hover { background-color: #0056b3; }

.unowned-btn { /* Secondary Action (Unmark) */
    background-color: #FFFFFF;
    color: #007BFF;
    border: 2px solid #007BFF;
}
.unowned-btn:hover { background-color: #f0f0f0; }

.add-wanted-btn { /* Neutral Action (Add to Wanted) */
    background-color: #6c757d; 
    color: white;
}
.add-wanted-btn:hover { background-color: #5a6268; }

/* Quantity Controls */
.quantity-line {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-weight: 600;
    color: #333;
    justify-content: center; /* Center quantity controls */
}

.quantity-value {
    font-size: 1.2em;
    margin: 0 5px;
    color: #007BFF; 
}

.increase-btn, .decrease-btn {
    display: inline-block;
    width: 30px;
    padding: 0;
    line-height: 28px;
    height: 30px;
    text-align: center;
    background-color: #6c757d; 
    color: white;
    border-radius: 50%;
    margin-left: 2px;
    font-size: 1.2em;
    border: none;
}

/* --- SPECIAL HUNT LABELS AND ICON FIX (FINAL CENTERING & SIZING) --- */
.sth-label, .th-label {
    /* CRITICAL FIX: Use Flexbox to guarantee horizontal centering across the full card width */
    display: flex; 
    justify-content: center; /* Center content (the icon) horizontally */
    align-items: center; 
    margin: 5px auto 10px auto; /* Margin for vertical spacing */
}

/* Targeting the specific hunt labels */
.sth-label { 
    color: #FFD700; 
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); 
} 
.th-label { 
    color: #C0C0C0; 
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); 
}

.hunt-badge {
    /* FINAL ROBUST SIZE ADJUSTMENT: Fixed pixel size to avoid percentage inheritance issues */
    width: 30px !important; 
    height: 30px !important; 
    vertical-align: middle;
}
/* --- SPECIAL HUNT LABELS AND ICON SIZE FIX END --- */

/* ------------------- 5. POPUP (MODAL) ------------------- */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

.popup-content {
    background-color: #FFFFFF;
    margin: 5% auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    position: relative; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.popup-close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1; 
    padding: 5px; 
    z-index: 1010; 
}

.popup-close:hover,
.popup-close:focus {
    color: #333;
    text-decoration: none;
}

/* DETAIL CARD CONTAINER (CRITICAL FIX: Vertical centering of content) */
.card-detail {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-top: 10%;
     /* NEW: Vertically center image and info column */
     flex-wrap: wrap;
}

.card-detail img {
    /* HORIZONTAL CENTERING FIX */
    display: block; /* Ensure it is treated as a block for auto margins */
    margin: 0 auto; /* Center image horizontally within its 40% column */
    /* END HORIZONTAL CENTERING FIX */
    
    width: 40%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 10px;
}

.card-detail .card-info {
    padding: 0;
    width: 60%;
    text-align: center;
}

.card-detail h3 {
    margin-top: 20px;
    color: #007BFF; 
    font-size: 1.2em;
}

/* POPUP BUTTON HIERARCHY */
#addWantedBtn {
    background-color: #6c757d; 
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 5px;
    padding: 10px 15px;
    margin-top: 15px;
    display: block;
    width: 100%;
}
#addWantedBtn:hover {
    background-color: #5a6268;
}

#showAllCaseBtn, #showAllSeriesBtn {
    background-color: #007BFF; 
    color: white;
    text-transform: uppercase; 
    font-weight: 600;
    display: block;
    width: 100%;
    border-radius: 5px;
    padding: 10px 15px;
    margin-top: 10px;
    margin-bottom: 10px; 
    border: none;
    cursor: pointer;
}

#showAllCaseBtn:hover, #showAllSeriesBtn:hover {
    background-color: #0056b3;
}


/* Prevent body scroll when popup is open */
.popup-open {
    overflow: hidden;
}

/* ------------------- 6. OWNED/DUPLICATES/SERIES PAGES ------------------- */
.group-container {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.group-container h2 {
    color: #2C3E50;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 5px;
}

.select-btn {
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    margin-left: 10px;
    cursor: pointer;
    background-color: white;
}

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    font-size: 1.2em;
    color: #999;
}


/* Media Queries for Responsiveness (FINAL FIXES) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    /* On mobile, override the single-group view to revert to default responsive auto-fit behavior */
    #ownedCarsContainer.single-group-view .results-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        max-width: none;
        margin-left: initial;
        margin-right: initial;
    }
    
    .menu-bar {
        justify-content: space-around;
        padding: 0 10px;
        margin: -10px -10px 15px -10px;
    }
    
    .menu-btn {
        padding: 10px 8px;
        font-size: 0.8em;
    }

    .results-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .result-card {
        min-height: 250px;
    }
    
    /* CRITICAL FIX: Applying user's requested mobile image styling */
    .result-card img:not(.hunt-badge) {
        width: 100%;
        height: auto;
    }

    .card-info h3 {
        font-size: 1em;
    }

    .card-info p {
        font-size: 0.8em;
    }

    /* POPUP/DETAIL PAGE FIXES */
    .popup-content {
        margin: 5vh 5vw; 
        width: 90%;
        max-width: none;
        padding: 20px 15px;
        min-width: 0; 
    }

    .card-detail {
        flex-direction: column; 
        gap: 15px;
        min-width: 0; 
    }

    .card-detail img, .card-detail .card-info {
        width: 100%; 
        max-width: none;
        padding: 0;
    }
    
    .card-detail img {
        max-height: 200px;
        object-fit: contain;
    }

    .card-detail .card-info * {
        max-width: 100%; 
    }

    .owned-btn, .unowned-btn, .add-wanted-btn {
        padding: 6px 8px;
        font-size: 0.8em;
    }
    
    /* CRITICAL MOBILE DROPDOWN FIX: Use right: auto and limit width using vw */
    .dropdown-content {
        left: 0; 
        right: auto; 
        transform: none; 
        /* Ensures the dropdown cannot push the page wider than the viewport */
        max-width: calc(100vw - 20px); 
        width: max-content; 
    }
}

/* --- WANTED LIST SPECIFIC BUTTON --- */
.remove-from-list-btn {
    background-color: #dc3545; /* A standard, professional red for danger/removal */
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85em;
    margin-top: 10px;
    transition: background-color 0.2s;
    display: block; 
    width: 100%;
    text-align: center;
}

.remove-from-list-btn:hover {
    background-color: #c82333; /* Darker red on hover */
}


.FilterBox{
display: flex; 
flex-wrap: nowrap; 
gap: 1%; 
align-items: flex-start;
}

/* Media Queries for Responsiveness (FINAL FIXES) */
@media (max-width: 768px) {
    .FilterBox {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping for better layout on small screens */
        gap: 1%;
        align-items: flex-start;
        width: 100%; /* Ensure the container takes full width */
    }

    .custom-dropdown-container {
        flex: 1; /* Make each button take equal space */
        min-width: 0; /* Allow flex items to shrink */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }

    /* Ensure buttons have consistent padding and font size */
    .custom-dropdown-container, .menu-btn, .action-btn {
        padding: 10px;
        font-size: 0.9em;
        text-align: center;
    }

    /* The general media query already handles .dropdown-content for mobile */
}