/* Container for the buttons */
.custom-btn-group {
    display: flex;
    gap: 15px; /* Creates the gap between buttons */
    flex-wrap: wrap; /* Allows wrapping on very small screens */
}

/* Base styling for both links */
.custom-btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #ffffff;
    color: #495057;
    border: 2px solid #e9ecef; /* Individual button borders */
    border-radius: 8px; /* Fully rounded individual buttons */
    cursor: pointer;
    text-decoration: none !important; /* Removes link underline */
    /* Flexbox for centering icon and text */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Smooth animation for all changes */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    /* Responsive sizing */
    flex: 1;
    min-width: 140px;
    text-align: center;
}

    /* Hover effect to draw attention */
    .custom-btn:hover {
        transform: translateY(-4px); /* Moves the button up slightly */
        box-shadow: 0 6px 15px rgba(0,0,0,0.1); /* Adds a deeper shadow */
        border-color: #ffc107; /* Highlights border with Rojgarbee yellow */
        color: #212529;
    }

    /* The ACTIVE state (Currently selected) */
    .custom-btn.active {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #000000;
        font-weight: 600;
        /* Adds a subtle golden glow to the active tab */
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
        transform: translateY(-2px); /* Keeps active button slightly elevated */
    }

/* Mobile specifically */
@media (max-width: 576px) {
    .custom-btn-group {
        width: 100%; /* Forces the group to take full width on phones */
        gap: 10px; /* Slightly smaller gap on mobile */
    }

    .custom-btn {
        padding: 12px 10px; /* Taller touch target for thumbs */
        font-size: 14px; /* Slightly smaller text to fit */
    }
}

/* Disabled Button State */
.custom-btn.disabled-btn {
    background-color: #f8f9fa; /* Light gray background */
    color: #adb5bd; /* Faded text */
    border-color: #e9ecef; /* Faded border */
    cursor: not-allowed; /* Shows the 'disabled' red circle cursor */
}

    /* Prevents the hover animation on disabled buttons */
    .custom-btn.disabled-btn:hover {
        transform: none;
        box-shadow: none;
        border-color: #e9ecef;
        color: #adb5bd;
    }