/* ============================================================================
   RECOMMENDATIONS PAGE STYLES
   ============================================================================ */

/* --- Data Disclaimer --- */
.data-disclaimer {
    position: absolute;
    top: 95px; /* Changed from 15px to account for site header */
    left: 20px; /* Adjust as needed */
    font-size: 17px; /* Smaller font size */
    color: #aaa; /* Light gray color */
    line-height: 1.4; /* Slightly more space between lines */
    z-index: 100; /* Ensure it's above other elements if needed */
    max-width: 400px; /* Prevent it from becoming too wide */
}

/* --- Controls Container --- */
.controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #122030;
    border-bottom: 1px solid #2a3a4a;
}

/* --- Filter Buttons --- */
.filter-button-group {
    display: flex;
    gap: 10px;
}

.filter-button {
    padding: 4px 14px;
    font-size: 16px;
    font-weight: 600;
    min-width: 70px;
    background-color: transparent;
    border: 1px solid #597EF7;
    color: #597EF7;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
    text-align: center;
}

.filter-button.active {
    background-color: #4861F6;
    border-color: #4861F6;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.filter-button:hover {
    background-color: rgba(89, 126, 247, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filter-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent;
    border-color: #597EF7;
    color: #597EF7;
}

.filter-button:disabled:hover {
    background-color: transparent;
    box-shadow: none;
}

/* --- Share Button --- */
#shareButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #4861F6;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    font-size: 18px;
    font-weight: 600;
    transform: scale(1);
    box-shadow: none;
}

#shareButton svg {
   fill: white;
}

#shareButton:hover {
    background-color: #3a4dc4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- Language Selector (Currently Commented Out) --- */
/* Language Selector Styles */
/*
.language-selector {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 100;
    display: flex; // Arrange flags side-by-side
    gap: 10px; // Space between flags
}

.flag-image {
    width: 25px; // Control flag size
    height: auto;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2); // Optional border
    border-radius: 3px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flag-image:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
*/

/* --- Recommendations Table Container --- */
.recommendations-container {
    padding: 20px;
}

/* --- Recommendations Table --- */
#recommendations-table {
    width: 100%;
    border-collapse: collapse;
}

#recommendations-table th, #recommendations-table td {
    border: none;
    padding: 8px;
    text-align: center;
    /* height: 80px; */ /* Removed fixed height to allow header to grow */
}

#recommendations-table tbody td {
    height: 80px; /* Re-apply fixed height only to body cells for consistency */
}

.champion-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
}

.champion-icon {
    width: 48px;
    height: 48px;
    border-radius: 5px;
    flex-shrink: 0;
    border-width: 6px !important; /* Increased from 2px to 6px */
    border-style: solid !important;
}

.role-icon {
    width: 24px;
    height: 24px;
    margin: 0; /* Reset margins */
}

.column-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 8px; /* More space between buttons */
    margin-top: 8px; /* More space after header text */
}

/* Base button styles for all buttons */
button {
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Main sort buttons in table headers */
.sort-button {
    padding: 8px 14px; /* Even larger padding */
    font-size: 16px;   /* Even larger text */
    font-weight: 600;  /* Bold text */
    min-width: 70px;   /* Wider minimum width */
    background-color: transparent;
    border: 1px solid #597EF7;
    color: #597EF7;
}

.sort-button:hover {
    background-color: rgba(89, 126, 247, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sort-button.active {
    background-color: #4861F6;
    border-color: #4861F6;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Toggle buttons */
.toggle-button {
    padding: 8px 16px;
    background-color: transparent;
    border: 1px solid #597EF7;
    color: #597EF7;
    font-size: 14px;
    box-shadow: none;
}

.toggle-button:hover {
    background-color: rgba(89, 126, 247, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-button.active {
    background-color: #4861F6;
    border-color: #4861F6;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* The small sort icon buttons we already styled - adjust only if needed */
.sort-icon-button {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;

    /* Unpressed state */
    background-color: transparent;
    border: 1px solid #597EF7;
    color: #597EF7;
}

/* Keep the special delta button styles */
.sort-icon-button.sort-delta {
    border-color: #64A338;
    color: #64A338;
}

.sort-icon-button:hover {
    background-color: rgba(89, 126, 247, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sort-icon-button.active {
    background-color: #4861F6;
    border-color: #4861F6;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.stat-value {
    font-size: 28px;
    font-weight: 500; /* Slightly bolder */
    line-height: 1.2; /* Better vertical spacing */
}

.delta-positive {
    color: #4CAF50;
    font-size: 20px;
    margin-top: 2px;
}

.delta-negative {
    color: #f44336;
    font-size: 20px;
    margin-top: 2px;
}

.sample-size {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.sample-size.low {
    color: #ff9800;
}

.champion-cell {
    display: flex;
    flex-direction: row; /* Change to row instead of column */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center the entire content horizontally */
    gap: 8px; /* Space between image and stats */
}

.champion-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.low-samples {
    font-size: 14px;
    color: #ff9900;
    margin-top: 2px;
}

.page-title {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 2em;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.page-title .role-icon {
    width: 96px; /* 3 times bigger */
    height: 96px; /* 3 times bigger */
    filter: brightness(1.2);
}

.page-title .tier-icon {
    width: 96px; /* Twice as big (was 48px) */
    height: 96px; /* Twice as big (was 48px) */
    vertical-align: middle;
    margin: 0 4px;
    object-fit: contain; /* Ensure the icon fits within the bounds */
    object-position: center; /* Center the icon to account for white space */
}

.page-title .tier-name {
    font-size: 1em; /* Match the rest of the text size (was 0.8em) */
    font-weight: 600;
    color: #fff;
    margin-left: 4px;
}

/* Only add border to champion icons in the champion column */
.champion-cell .champion-icon {
    border: 2px solid;
}

/* Remove border from header images */
.champion-header .champion-icon {
    width: 96px; /* Doubled from 48px */
    height: 96px; /* Doubled from 48px */
    position: relative; /* Needed for absolute positioning of children */
    margin-left: 0; /* Remove negative margin */
    margin-bottom: 4px; /* Add spacing below champion icon */
}

/* NEW: Styles for the pick order indicator */
.pick-order-indicator {
    position: absolute;
    top: 4px;
    /* Make it circular */
    border-radius: 50%;
    /* Set fixed size for the circle */
    width: 26px;
    height: 26px;
    /* Gold background */
    background-color: #e6c570; /* Adjust gold shade as needed */
    /* Dark text */
    color: #282828; /* Dark grey/brown text */
    /* Font styling */
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 16px; /* Slightly smaller font for the circle */
    font-weight: 900;
    /* Center the text inside the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Ensure single line */
    /* Remove previous border and padding */
    border: none;
    padding: 0;
    /* Remove text shadow */
    text-shadow: none;
    /* Keep z-index and shadow */
    z-index: 3;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Position indicator on top-right for enemies (columns 1-5) */
#recommendations-table thead th:nth-child(-n+5) .pick-order-indicator {
    right: 10px; /* Adjust horizontal position */
    left: auto;
}

/* Position indicator on top-left for allies (columns 9-13) */
#recommendations-table thead th:nth-child(n+9):nth-child(-n+13) .pick-order-indicator {
    left: 10px; /* Adjust horizontal position */
    right: auto;
}
/* END NEW STYLES */

.color-legend-container {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-bottom: 20px;
}

.color-legend {
    text-align: center;
}

.rammus-legend {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: flex-start;
    margin: 5px 0;
}

.rammus-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rammus-icon {
    width: 35px; /* Increased size */
    height: 35px; /* Increased size */
    border-radius: 3px;
    border: 3px solid;
}

.rammus-percent {
    font-size: 11px;
    color: #aaa;
}

.legend-caption {
    font-size: 14px;
    color: #fff;
    margin-top: 5px;
}

/* Remove old gradient styles */
.gradient-bar, .wr-gradient, .border-gradient {
    display: none;
}

/* Restore and keep the gradient styles */
.gradient-bar {
    width: 400px; /* Increased width */
    height: 25px; /* Increased height */
    border-radius: 4px;
    margin: 5px 0;
}

.wr-gradient {
    display: block;
    background: linear-gradient(
        to right,
        #FF4444 0%,    /* -3% */
        #FFD700 33%,   /* 0% */
        #4CAF50 66%,   /* +3% */
        #00BFFF 100%   /* +6% */
    );
}

.legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 14px; /* Increased font size */
    color: #aaa; /* Adjusted color for visibility */
    width: 400px; /* Match gradient bar width */
}

.pick-score {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 0 0 0 8px;
    font-size: 16px;
    color: #222;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2;
}

/* NEW: Move pick score to top-left for enemy team */
#recommendations-table thead th:nth-child(-n+5) .pick-score {
    left: 0;
    right: auto; /* Override the default right: 0 */
    border-radius: 0 0 8px 0; /* Adjust radius for top-left corner */
}
/* END NEW */

/* Row styling improvements */
#recommendations-table tbody tr {
    transition: background-color 0.2s;
}

#recommendations-table tbody tr:hover {
    background-color: #263545;
}

/* Add rank indicators */
.rank-indicator {
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;  /* Consistent size for all ranks */
    height: 28px;
    color: #222;  /* Dark text for better contrast with light backgrounds */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove the medal-specific colors */
tr:nth-child(1) .rank-indicator,
tr:nth-child(2) .rank-indicator,
tr:nth-child(3) .rank-indicator,
tr:nth-child(n+4) .rank-indicator {
    background-color: inherit; /* Overriding all previous settings */
    width: 28px;
    height: 28px;
    font-size: 16px;
}

/* Champion cell enhancements */
.champion-cell {
    position: relative;
    padding-left: 10px !important;
}

/* Update the base score-indicator style */
.score-indicator {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 6px;
    border-radius: 0 0 0 8px;
    font-size: 12px;
    font-weight: bold;
    color: #222; /* Dark text for contrast with gradient backgrounds */
}

/* Help tooltips */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    color: white;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
    cursor: help;
}

/* Legend and explanation panel */
.explanation-panel {
    background-color: rgba(20, 35, 55, 0.8);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border: 1px solid #345678;
}

.explanation-panel.expanded {
    max-height: 600px;
}

.explanation-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* Add these styles to make simplified view the default */
.detail-data {
    display: none;
}

/* Update the alternating row colors for more contrast */
#recommendations-table tbody tr:nth-child(odd) {
    background-color: #1a2a3a; /* Keep this color */
}

#recommendations-table tbody tr:nth-child(even) {
    background-color: #122030; /* Make this darker for better contrast */
}

/* Update the table header to also be dark blue */
#recommendations-table thead tr {
    background-color: #0d1a28; /* Dark blue for the header */
}

/* Update the subtle divider between table header and body to be more visible */
#recommendations-table thead {
    border-bottom: 2px solid #304560;
}

/* Styles for empty cells and placeholders */
.empty-cell {
    color: rgba(255, 255, 255, 0.2);
}

.champion-header.empty {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    font-size: 14px;
}

/* Team color indicators in header row */
/* Enemy team cells (columns 1-5) */
#recommendations-table thead th:nth-child(-n+5) {
    background-color: #3d1515; /* Dark red background */
    border-bottom: 3px solid #4d1f1f; /* Red border for enemy columns */
}

/* Ally team cells (columns 9-13) */
#recommendations-table thead th:nth-child(n+9):nth-child(-n+13) {
    background-color: #153d15; /* Dark green background */
    border-bottom: 3px solid #1f4d1f; /* Green border for ally columns */
}

/* Add subtle border to visually separate team sections */
#recommendations-table thead th:nth-child(5) {
    border-right: 2px solid #4d1f1f; /* Slightly brighter red border */
}

#recommendations-table thead th:nth-child(8) {
    border-right: 2px solid #1f4d1f; /* Slightly brighter green border */
}

/* Remove the previous tbody row styling */
#recommendations-table tbody tr:first-child td:nth-child(-n+5),
#recommendations-table tbody tr:first-child td:nth-child(n+9):nth-child(-n+13),
#recommendations-table tbody tr:first-child td:nth-child(5),
#recommendations-table tbody tr:first-child td:nth-child(8) {
    background-color: inherit;
    border-right: none;
}

/* Style for the empty champion icon */
.empty-champion {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Update the placeholder style to position as a label */
.placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-size: 12px;
    margin-top: 5px;
    position: absolute;
    bottom: 0;
}

/* Position header sort buttons in vertical layout below role icon */
.header-sort-buttons {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin-left: 0; /* Remove margin since we're centered */
}

/* Make the question mark indicator smaller */
.role-estimation-indicator {
    display: inline-flex;    /* Keep flex properties */
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffcc00;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
  cursor: help;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Create a vertical container for role icon and buttons */
.role-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
}

/* Role icon container - make it a flex container */
.role-icon-container {
    display: flex;          /* Use flexbox */
    align-items: center;    /* Vertically center items */
    justify-content: center;/* Horizontally center items */
    gap: 4px;               /* Add space between icon and indicator */
    margin-bottom: 6px;     /* Keep existing bottom margin */
}

/* Style for the active/pressed state - like the primary button */
.sort-icon-button.active {
    background-color: #4861F6;  /* Primary blue color */
    border-color: #4861F6;      /* Border matches fill */
    color: white;               /* White text */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Special styling for delta buttons */
.sort-icon-button.sort-delta {
    border-color: #64A338;  /* Green border for delta */
    color: #64A338;        /* Green text for delta */
}

.sort-icon-button.sort-delta:hover {
    background-color: rgba(100, 163, 56, 0.1);  /* Very light green background */
}

.sort-icon-button.sort-delta.active {
    background-color: #64A338;  /* Green background when active */
    border-color: #64A338;
    color: white;
}

/* Make column headers and buttons larger */
.column-header span {
    font-size: 16px; /* Larger title text */
    font-weight: 600; /* Make the titles bolder */
    margin-bottom: 4px; /* Add space below title */
}

.waiting-message {
    text-align: center;
    padding: 40px 20px !important;
    height: 300px !important;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(75, 97, 246, 0.2);
    border-radius: 50%;
    border-top-color: #4861F6;
    animation: spin 1s linear infinite;
}

.waiting-text h3 {
    color: #aaa;
    font-size: 20px;
    margin-bottom: 10px;
}

.waiting-text p {
    color: #888;
    font-size: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Style for champion names in the header */
.header-champion-name {
    font-size: 24px; /* Doubled from 12px */
    font-weight: 600; /* Bolder text */
    color: #ccc; /* Light gray color */
    margin-top: 8px; /* Space above the name */
    text-align: center;
    max-width: 96px; /* Match icon width */
    min-height: 56px; /* Accommodate two lines of larger text */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1; /* Adjust line height for wrapped text */
    word-wrap: break-word; /* Allow long words to break and wrap */
    white-space: normal; /* Allow text to wrap */
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        /* Start with a slightly larger base glow */
        box-shadow: 0 0 10px rgba(100, 130, 255, 0.7), 0 0 20px rgba(100, 130, 255, 0.5);
    }
    50% {
        transform: scale(1.08); /* Slightly larger scale */
        /* Significantly larger and brighter shadow */
        box-shadow: 0 0 40px rgba(150, 180, 255, 1), 0 0 70px rgba(150, 180, 255, 0.8);
    }
    100% {
        transform: scale(1);
        /* Return to the slightly larger base glow */
        box-shadow: 0 0 10px rgba(100, 130, 255, 0.7), 0 0 20px rgba(100, 130, 255, 0.5);
    }
}

/* Class to apply the animation */
.initial-glow {
    /* Keep animation properties, maybe slightly adjust timing if needed */
    animation: pulseGlow 1.0s ease-in-out 6; /* Run the animation twice */
}

/* Slider Styles */
.slider-container {
    display: flex;
    flex-direction: column; /* Stack title on top of slider */
    align-items: center;
    margin: 0 20px;
    flex-grow: 1;
    max-width: 500px;
}

.slider-title {
    font-size: 1.5em; /* Was 1.2em */
    font-weight: bold;
    color: #E0E0E0;
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 0;
}

.slider-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}

.slider-label {
    color: #A0A0A0;
    font-size: 1.8em; /* Doubled from original 0.9em */
    font-weight: 500;
}

.slider-label.left {
    margin-right: 10px;
}

.slider-label.right {
    margin-left: 10px;
}

/* Main Slider Styles - Shared by all three sliders (Play For, My Winrate Effect, Min Mastery Level) */
.main-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #444;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    border-radius: 5px;
    flex-grow: 1;
}

.main-slider:hover {
    opacity: 1;
}

.main-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00BFFF;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #1a2a3a;
}

.main-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #00BFFF;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #1a2a3a;
}

/* Disabled Slider Styles */
.slider-container.disabled {
    opacity: 0.5;
}

.slider-container.disabled .slider-title {
    color: #666;
}

.slider-container.disabled .slider-label {
    color: #666;
}

.main-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.main-slider:disabled::-webkit-slider-thumb {
    background: #666;
    cursor: not-allowed;
}

.main-slider:disabled::-moz-range-thumb {
    background: #666;
    cursor: not-allowed;
}
/* End Slider Styles */

/* Styles for Individual Champion Weight Sliders in Header */
.individual-weight-slider-container {
    margin-top: 5px; /* Space above the slider */
    text-align: center;
    height: 30px; /* Reserve space even if empty */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.individual-weight-slider-container.placeholder {
    /* Keep placeholder same height but invisible content */
  visibility: hidden;
}

.individual-weight-label {
    font-size: 1.2em; /* Was 0.8em */
    font-weight: 600;
    color: #A0A0A0;
    margin-bottom: 4px; /* Increased margin */
}

.individual-weight-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: #444;
    outline: none;
    border-radius: 3px;
}

/* Optional: Customize slider appearance */
.individual-weight-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: #555;
  border-radius: 2px;
}
.individual-weight-slider::-moz-range-track {
  height: 4px;
  background: #555;
  border-radius: 2px;
}
.individual-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #00BFFF; /* Match button color */
  border-radius: 50%;
}
.individual-weight-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #00BFFF;
  border-radius: 50%;
}



/* Waiting/Error Message Styles */
.waiting-message, .error-message {
    text-align: center;
    padding: 40px;
    font-size: 1.2em;
    color: #aaa;
}

.error-message {
    color: #FF6B6B;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.loading-spinner {
    border: 4px solid #444;
    border-top: 4px solid #00BFFF;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.waiting-text h3 {
    margin: 0;
    color: #E0E0E0;
}

.waiting-text p {
    margin: 5px 0 0;
    color: #888;
}