/* --- General Styling for the Container --- */
.container1 {
    font-family: Arial, sans-serif;
    max-width: 1200px; /* Limit overall width */
    margin: 20px auto; /* Center the container */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.container1 h2 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    font-size: 2em;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* --- Flexbox for Filter and Search Groups --- */
.filter-search-section {
    display: flex;
    flex-direction: column; /* Key change: Stacks filter-group and search-group vertically */
    gap: 20px; /* Space between filter-group and search-group */
    margin-bottom: 20px;
    /* justify-content: space-between; Removed as groups are now stacked */
}

.filter-group,
.search-group {
    display: flex;
    flex-wrap: wrap; /* Allows individual selects/inputs to wrap */
    gap: 15px; /* Space between items within a group */
    /* flex: 1; Removed as groups are now stacked and will take full width */
    /* min-width: 300px; Removed, let it adapt */
    width: 100%; /* Ensure groups take full width */
    justify-content: center; /* Center items if they don't fill the whole row */
}

/* --- Styled Selects --- */
.styled-select {
    flex: 1; /* Allows selects to grow/shrink */
    min-width: 180px; /* Minimum width for each select */
    max-width: 250px; /* Optional: set a max-width for uniformity */
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    font-size: 1rem;
    color: #555;
    appearance: none; /* Removes default browser styling for select */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23444" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.styled-select:hover {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.styled-select:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
}

/* --- Styled Inputs (Search Boxes) --- */
.styled-input {
    flex: 1; /* Allows inputs to grow/shrink */
    min-width: 200px; /* Minimum width for each input */
    max-width: 300px; /* Optional: set a max-width for uniformity */
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    color: #555;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.styled-input::placeholder {
    color: #999;
}

.styled-input:hover {
    border-color: #007bff;
}

.styled-input:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    /* On smaller screens, the groups are already stacked vertically by default now. */
    /* So, we just need to ensure the items within the groups stack. */
    .filter-group,
    .search-group {
        flex-direction: column; /* Stacks individual selects/inputs within their groups */
        align-items: center; /* Center them when stacked vertically */
    }

    .styled-select,
    .styled-input {
        width: 100%; /* Make each select/input take full width when stacked */
        min-width: unset; /* Remove min-width to allow full width */
        max-width: 300px; /* Keep a sensible max-width for readability even at 100% */
    }
}

/* Style for the edit course link */
.edit_course_link {
    display: inline-flex; /* Allows icon and text to align */
    align-items: center;
    gap: 5px; /* Space between icon and text */
    padding: 8px 15px; /* Adjust padding as needed */
    border-radius: 5px; /* Slightly rounded corners */
    text-decoration: none; /* Remove underline */
    color: #ffffff; /* White text color */
    background-color: #007bff; /* A nice blue background */
    border: 1px solid #007bff; /* Matching border */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.1s ease;
    font-weight: 500; /* Slightly bolder text */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Hover effect */
.edit_course_link:hover {
    background-color: #0056b3; /* Darker blue on hover */
    border-color: #0056b3; /* Darker border on hover */
    color: #ffffff; /* Keep text white */
    transform: translateY(-1px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

/* Active (click) effect */
.edit_course_link:active {
    background-color: #004085; /* Even darker blue on click */
    border-color: #004085; /* Even darker border on click */
    transform: translateY(0); /* "Press down" effect */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* Smaller shadow on click */
}

/* Icon specific styling within the link */
.edit_course_link .edit-icon i {
    font-size: 1rem; /* Adjust icon size if needed */
    margin-right: 0; /* Already handled by gap on parent */
}

/* --- Form Input Styling --- */
.input_class {
    margin-bottom: 15px; /* Spacing between input groups */
}

.input_class label {
    display: block; /* Make labels appear above inputs */
    margin-bottom: 5px; /* Space between label and input */
    font-weight: 600; /* Slightly bolder labels */
    color: #333; /* Darker text for labels */
    font-size: 0.95rem;
}

.course_input {
    width: 100%; /* Full width for inputs */
    padding: 10px 12px; /* Comfortable padding */
    border: 1px solid #ced4da; /* Light gray border */
    border-radius: 6px; /* Slightly more rounded corners */
    font-size: 1rem; /* Standard font size */
    color: #495057; /* Darker text inside input */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for focus effects */
}

.course_input::placeholder {
    color: #8c96a0; /* Lighter placeholder text */
    opacity: 1; /* Ensure placeholder is visible across browsers */
}

.course_input:focus {
    border-color: #80bdff; /* Blue border on focus */
    outline: 0; /* Remove default outline */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Subtle blue shadow on focus */
}

/* --- Button Section Styling --- */
.button-section {
    display: flex; /* Arrange buttons in a row */
    gap: 15px; /* Space between buttons */
    margin-top: 25px; /* Space above the button section */
    justify-content: flex-start; /* Align buttons to the start */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* --- Base Button Styling --- */
.add-btn,
.clear-btn {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    padding: 10px 20px; /* Comfortable padding for buttons */
    border-radius: 8px; /* Nicely rounded buttons */
    font-size: 1rem; /* Standard font size */
    font-weight: 600; /* Bolder text for buttons */
    cursor: pointer; /* Indicate clickable element */
    transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-decoration: none; /* Remove underline from button text if any */
}

/* --- Add Button Specific Styling --- */
.add-btn {
    background-color: #28a745; /* Green for add */
    color: #fff; /* White text */
    border: 1px solid #28a745; /* Matching border */
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2); /* Green shadow */
}

.add-btn:hover {
    background-color: #218838; /* Darker green on hover */
    border-color: #1e7e34;
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3); /* More pronounced shadow */
}

.add-btn:active {
    background-color: #1e7e34; /* Even darker green on click */
    border-color: #1c7430;
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.15); /* Smaller shadow */
}

/* --- Clear Button Specific Styling --- */
.clear-btn {
    background-color: #dc3545; /* Red for clear/danger */
    color: #fff; /* White text */
    border: 1px solid #dc3545; /* Matching border */
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.2); /* Red shadow */
}

.clear-btn:hover {
    background-color: #c82333; /* Darker red on hover */
    border-color: #bd2130;
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 6px 12px rgba(220, 53, 69, 0.3); /* More pronounced shadow */
}

.clear-btn:active {
    background-color: #bd2130; /* Even darker red on click */
    border-color: #b21f2d;
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.15); /* Smaller shadow */
}

/* --- Icon inside buttons --- */
.add-btn .icon,
.clear-btn .icon {
    font-size: 1.1rem; /* Slightly larger icons */
}

/* --- Responsiveness for smaller screens --- */
@media (max-width: 576px) {
    .button-section {
        flex-direction: column; /* Stack buttons vertically on small screens */
        gap: 10px; /* Adjust gap for vertical stacking */
    }

    .add-btn,
    .clear-btn {
        width: 100%; /* Full width for buttons on small screens */
    }
}

/* --- Button Section Layout --- */
.button-section {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap to the next line on smaller screens */
    gap: 20px; /* Increased space between buttons for better visual separation */
    margin-top: 25px; /* Space above the button section */
    justify-content: center; /* Center buttons horizontally for a balanced look */
    align-items: center; /* Align items vertically if they have different heights */
}

/* --- Base Styling for All Action Buttons --- */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center content (icon + text) within the button */
    gap: 10px; /* Space between icon and text (increased from 8px) */
    padding: 12px 25px; /* More generous padding for larger, more clickable buttons */
    border-radius: 10px; /* Slightly more rounded corners for a modern look */
    font-size: 1.05rem; /* Slightly larger font size for better readability */
    font-weight: 600; /* Bolder text */
    cursor: pointer;
    text-decoration: none; /* Ensure no underlines */
    transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    min-width: 160px; /* Ensure a minimum width for uniformity */
    height: 50px; /* Set a consistent height */
    white-space: nowrap; /* Prevent text from wrapping inside the button */
}

/* --- Icon Specific Styling (Larger Icons) --- */
.action-btn .button-icon {
    font-size: 1.4rem; /* Significantly larger icons */
    line-height: 1; /* Helps with vertical alignment */
}

/* --- Primary Action Button (e.g., Add Course) --- */
.primary-action-btn {
    background-color: #28a745; /* Green */
    color: #fff;
    border: 1px solid #28a745;
    box-shadow: 0 5px 12px rgba(40, 167, 69, 0.3); /* Enhanced shadow */
}

.primary-action-btn:hover {
    background-color: #218838; /* Darker green */
    border-color: #1e7e34;
    transform: translateY(-3px); /* More pronounced lift */
    box-shadow: 0 8px 16px rgba(40, 167, 69, 0.4); /* Larger shadow on hover */
}

.primary-action-btn:active {
    background-color: #1e7e34;
    border-color: #1c7430;
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2); /* Smaller shadow on click */
}

/* --- Danger Action Button (e.g., Delete Course) --- */
.danger-action-btn {
    background-color: #dc3545; /* Red */
    color: #fff;
    border: 1px solid #dc3545;
    box-shadow: 0 5px 12px rgba(220, 53, 69, 0.3); /* Enhanced shadow */
}

.danger-action-btn:hover {
    background-color: #c82333; /* Darker red */
    border-color: #bd2130;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(220, 53, 69, 0.4);
}

.danger-action-btn:active {
    background-color: #bd2130;
    border-color: #b21f2d;
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.2);
}


.secondary-action-btn {
    background-color: #ffc107; 
    background-color: #fd7e14; 
    background-color: #6c757d;
    color: #fff; 
    border: 1px solid #6c757d;
    box-shadow: 0 5px 12px rgba(108, 117, 125, 0.3);
}

.secondary-action-btn:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(108, 117, 125, 0.4);
}

.secondary-action-btn:active {
    background-color: #545b62;
    border-color: #4e555b;
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(108, 117, 125, 0.2);
}


*/
.secondary-action-btn { /* For "Clear Details" */
    background-color: #ff4d4d; /* A slightly softer red */
    color: #fff;
    border: 1px solid #ff4d4d;
    box-shadow: 0 5px 12px rgba(255, 77, 77, 0.3);
}

.secondary-action-btn:hover {
    background-color: #e60000; /* Darker red */
    border-color: #cc0000;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(255, 77, 77, 0.4);
}

.secondary-action-btn:active {
    background-color: #cc0000;
    border-color: #b30000;
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(255, 77, 77, 0.2);
}


/* --- Responsiveness --- */
@media (max-width: 768px) {
    .action-btn {
        padding: 10px 20px; /* Slightly less padding on smaller screens */
        font-size: 0.95rem; /* Slightly smaller text */
        min-width: 140px; /* Reduce minimum width */
        height: 45px; /* Reduce height */
    }

    .action-btn .button-icon {
        font-size: 1.2rem; /* Slightly smaller icons */
    }
}

@media (max-width: 576px) {
    .button-section {
        flex-direction: column; /* Stack buttons vertically on very small screens */
        gap: 15px; /* Adjust gap for vertical stacking */
    }

    .action-btn {
        width: 100%; /* Full width for buttons on small screens */
        min-width: unset; /* Remove min-width to allow full width */
        height: 50px; /* Keep consistent height for full-width buttons */
        padding: 12px 25px; /* Restore padding for full-width buttons */
    }
}

        .app-container {
            width: 100%;
            max-width: 1200px; /* Equivalent to mx-auto and max-w-screen-xl */
            padding: 1rem;
            background-color: #ffffff;
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            border: 1px solid #e2e8f0; /* border border-gray-200 */
        }

        /* Main title styling */
        .main-title {
            font-size: 2.25rem; /* text-3xl */
            font-weight: 800; /* font-extrabold */
            text-align: center;
            color: #1e3a8a; /* text-blue-800 */
            margin-bottom: 2rem; /* mb-8 */
            margin-top: 1rem; /* mt-4 */
        }

        /* Flex container for the two list boxes */
        .list-boxes-container {
            display: flex;
            flex-direction: column; /* flex-col */
            gap: 1.5rem; /* gap-6 */
        }
        @media (min-width: 768px) { /* md: equivalent */
            .list-boxes-container {
                flex-direction: row; /* md:flex-row */
            }
        }

        /* Individual list box styling (common) */
        .list-box {
            flex: 1; /* flex-1 */
            padding: 1.25rem; /* p-5 */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
            display: flex;
            flex-direction: column;
        }

        /* Specific styling for available courses list box */
        .available-courses-box {
            background: linear-gradient(to bottom right, #e0e7ff, #cfe2ff); /* bg-gradient-to-br from-indigo-50 to-blue-100 */
            border: 1px solid #bfdbfe; /* border-blue-200 */
        }

        /* Specific styling for selected courses list box */
        .selected-courses-box {
            background: linear-gradient(to bottom right, #ecfdf5, #d1fae5); /* bg-gradient-to-br from-green-50 to-emerald-100 */
            border: 1px solid #a7f3d0; /* border-green-200 */
        }

        /* List box title styling */
        .list-box-title {
            font-size: 1.25rem; /* text-xl */
            font-weight: 700; /* font-bold */
            margin-bottom: 1rem; /* mb-4 */
            padding-bottom: 0.5rem; /* pb-2 */
            border-bottom-width: 2px; /* border-b-2 */
        }
        .available-courses-box .list-box-title {
            color: #1d4ed8; /* text-blue-700 */
            border-color: #93c5fd; /* border-blue-300 */
        }
        .selected-courses-box .list-box-title {
            color: #047857; /* text-green-700 */
            border-color: #6ee7b7; /* border-green-300 */
        }

        /* Course list container */
        .course-list-content {
            min-height: 250px;
            max-height: 500px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0.75rem; /* space-y-3 */
            border-radius: 0.5rem; /* rounded-lg */
            padding: 0.5rem; /* p-2 */
        }

        /* Placeholder text when no courses are present */
        .no-courses-placeholder {
            color: #6b7280; /* text-gray-500 */
            text-align: center;
            padding-top: 2rem; /* py-8 */
            padding-bottom: 2rem;
        }

        /* Individual course item styling */
        .course-item {
            padding: 1rem; /* p-4 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            cursor: pointer;
            transition: all 200ms ease-in-out; /* transition-all duration-200 ease-in-out */
            transform: scale(1); /* transform */
            display: flex;
            flex-direction: column; /* flex-col */
            justify-content: space-between;
            align-items: flex-start; /* items-start */
        }
        @media (min-width: 640px) { /* sm: equivalent */
            .course-item {
                flex-direction: row; /* sm:flex-row */
                align-items: center; /* sm:items-center */
            }
        }

        /* Hover and active effects for course items */
        .course-item:hover {
            transform: scale(1.02); /* hover:scale-[1.02] */
        }
        .course-item:active {
            transform: scale(0.98); /* active:scale-[0.98] */
        }

        /* Available course item specific styles */
        .course-item.available {
            background-color: #ffffff; /* bg-white */
            color: #1e3a8a; /* text-blue-800 */
            border: 1px solid #bfdbfe; /* border-blue-200 */
        }
        .course-item.available:hover {
            background-color: #eff6ff; /* hover:bg-blue-50 */
        }

        /* Selected course item specific styles */
        .course-item.selected {
            background-color: #ffffff; /* bg-white */
            color: #065f46; /* text-emerald-800 */
            border: 1px solid #a7f3d0; /* border-emerald-200 */
        }
        .course-item.selected:hover {
            background-color: #f0fdf4; /* hover:bg-emerald-50 */
        }

        /* Course details text */
        .course-code-title {
            font-weight: 600; /* font-semibold */
            font-size: 1.125rem; /* text-lg */
        }
        .credit-units {
            font-size: 0.875rem; /* text-sm */
            color: #4b5563; /* text-gray-600 */
        }

        /* Click action label for course items */
        .click-action-label-container {
            margin-top: 0.5rem; /* mt-2 */
            flex-shrink: 0; /* flex-shrink-0 */
            display: inline-flex;
            align-items: center;
            gap: 0.375rem; /* Small gap for icon */
            padding-left: 0.75rem; /* px-3 */
            padding-right: 0.75rem;
            padding-top: 0.25rem; /* py-1 */
            padding-bottom: 0.25rem;
            border-radius: 9999px; /* rounded-full */
            font-size: 0.75rem; /* text-xs */
            font-weight: 500; /* font-medium */
        }
        @media (min-width: 640px) { /* sm: equivalent */
            .click-action-label-container {
                margin-left: 1rem; /* sm:ml-4 */
                margin-top: 0; /* sm:mt-0 */
            }
        }

        .course-item.available .click-action-label-container {
            background-color: #dbeafe; /* bg-blue-100 */
            color: #1e3a8a; /* text-blue-800 */
        }
        .course-item.selected .click-action-label-container {
            background-color: #d1fae5; /* bg-emerald-100 */
            color: #065f46; /* text-emerald-800 */
        }

        /* Simulated Inputs Section */
        .simulated-inputs-section {
            margin-top: 2rem; /* mt-8 */
            padding: 1rem; /* p-4 */
            background-color: #f3f4f6; /* bg-gray-100 */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* shadow-inner */
            font-size: 0.875rem; /* text-sm */
            color: #374151; /* text-gray-700 */
        }

        .simulated-inputs-title {
            font-weight: 600; /* font-semibold */
            margin-bottom: 0.5rem; /* mb-2 */
        }

        .input-grid {
            display: grid;
            grid-template-columns: 1fr; /* grid-cols-1 */
            gap: 1rem; /* gap-4 */
        }
        @media (min-width: 640px) { /* sm: equivalent */
            .input-grid {
                grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
            }
        }
        @media (min-width: 1024px) { /* lg: equivalent */
            .input-grid {
                grid-template-columns: repeat(4, 1fr); /* lg:grid-cols-4 */
            }
        }

        .input-group label {
            display: block;
            color: #4b5563; /* text-gray-600 */
        }

        .input-group select {
            margin-top: 0.25rem; /* mt-1 */
            display: block;
            width: 100%;
            border-radius: 0.375rem; /* rounded-md */
            border: 1px solid #d1d5db; /* border-gray-300 */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            padding: 0.5rem; /* p-2 */
            /* Focus styles */
            outline: none;
            border-color: #818cf8; /* focus:border-indigo-300 */
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* focus:ring focus:ring-indigo-200 focus:ring-opacity-50 */
        }

        /* Fetch Courses Button */
        .fetch-button-container {
            margin-top: 1.5rem; /* mt-6 */
            text-align: center;
        }

        .fetch-button {
            padding: 0.75rem 2rem; /* px-8 py-3 */
            background-color: #2563eb; /* bg-blue-600 */
            color: #ffffff; /* text-white */
            font-weight: 600; /* font-semibold */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
            transition: all 300ms ease-in-out; /* transition-all duration-300 ease-in-out */
            transform: scale(1); /* transform */
            border: none;
            cursor: pointer;
            outline: none; /* focus:outline-none */
        }

        .fetch-button:hover {
            background-color: #1d4ed8; /* hover:bg-blue-700 */
            transform: scale(1.05); /* hover:scale-105 */
        }

        .fetch-button:focus {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 */
        }

        /* Custom class for Swal narrow alert */
        .narrow-alert {
            width: 300px !important; /* Adjust width as needed */
        }
        /* Hide scrollbar for a cleaner look, but allow scrolling */
        .overflow-y-auto::-webkit-scrollbar {
            display: none;
        }
        .overflow-y-auto {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* CSS for the appealing, small, and inline radio button switch */
.filter-switch-container {
    /* Ensures the radio button group is visually separated and uses flex for layout */
    display: flex;
    gap: 20px; /* Space between the two radio button options */
    padding: 8px 0;
    font-family: Arial, sans-serif; /* Recommended: Use a clean, readable font */
}

.filter-switch-container label {
    /* Styles for the label wrapping the input and text */
    display: flex;
    align-items: center; /* Vertically center the radio button with its text */
    cursor: pointer;
    font-size: 0.95em; /* Slightly smaller text size */
    color: #333; /* Darker text for readability */
    transition: color 0.2s ease;
}

.filter-switch-container label:hover {
    color: #007bff; /* Highlight text on hover */
}

.filter-switch-container input[type="radio"] {
    /* Styles to make the radio button input itself smaller */
    appearance: none; /* Hide default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 14px; /* Set a small size */
    height: 14px;
    border: 2px solid #ccc; /* Light grey border */
    border-radius: 50%; /* Make it perfectly circular */
    margin-right: 6px; /* Space between the radio button and its text */
    position: relative;
    outline: none;
    cursor: pointer;
    background-color: #fff; /* White background */
    transition: all 0.2s ease;
}

.filter-switch-container input[type="radio"]:checked {
    border-color: #007bff; /* Blue border when checked */
    background-color: #fff; /* Keep background white */
}

.filter-switch-container input[type="radio"]:checked::before {
    /* The inner dot when the radio button is checked */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; /* Size of the inner dot */
    height: 6px;
    border-radius: 50%;
    background-color: #007bff; /* Blue color for the dot */
}