/* preferences.css */

/* Container for Tabbed Sets */
.tabbed-set {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; /* Allow flex items to wrap */
    margin: 1em 0;
    border-radius: 0.1rem;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
    white-space: normal; /* Allow labels to wrap */
}

/* Hide Radio Inputs */
.tabbed-set > input[type="radio"] {
    display: none;
}

/* Style Tab Labels */
.tabbed-set > label {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 2px;
    margin-bottom: 2px; /* Add margin-bottom for wrapped lines */
    cursor: pointer;
    background-color: #f0f0f0; /* Adjust to match your theme */
    border: 1px solid #ccc;
    border-bottom: none;
    white-space: nowrap; /* Prevent label text from wrapping */
    font-weight: 700;
    font-size: 0.84em;
    transition: background-color 250ms, color 250ms;
}

/* Active Tab Label */
.tabbed-set > input[type="radio"]:checked + label {
    color: red; /* Desired active text color */
    background-color: #fff; /* Active tab background */
    border-color: red; /* Active tab border color */
    border-bottom: 1px solid #fff; /* Seamless with content */
}

/* Hide All Tab Contents by Default */
.tabbed-set > .tabbed-block {
    display: none;
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 -0.05rem #ddd;
    width: 100%; /* Ensure content fills the container */
    box-sizing: border-box; /* Include padding and border in width */
    white-space: normal; /* Allow content to wrap */
}

/* Show Active Tab Content */
.tabbed-set > input[type="radio"]:checked + label + .tabbed-block {
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .tabbed-set > label {
        padding: 6px 10px; /* Further reduced padding for smaller screens */
        font-size: 0.7em; /* Further reduced font size */
    }
    
    .tabbed-set > .tabbed-block {
        padding: 10px; /* Adjust padding for better fit */
        font-size: 0.9em; /* Ensure readability */
    }
}

/* Optional: Style the Reset Preferences Button */
#reset-preferences {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#reset-preferences:hover {
    background-color: #ff1a1a;
}