/*
    For active buttons, the text needs to be placed within a span, otherwise the text glow won't work
    Example use:
        <a href="URL" class="results-button"><span>Button text here</span></a>
*/

/*  -- REGULAR BUTTONS ON RESULTS PAGES ----------------------------------------------------------------------------- */

.results-button {
    width:              160px;
    height:             38px;
    font-family:        'Roboto', sans-serif;
    font-size:          15px;
    font-weight:        600;
    color:              #000;
    background:         linear-gradient(to bottom, rgb(243, 243, 243) 0%, rgb(243, 243, 243) 50%, rgb(234, 234, 234) 50%, rgb(234, 234, 234) 100%);
    border:             1px solid rgb(190, 190, 190);
    border-radius:      6px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    cursor:             pointer;
    box-sizing:         border-box;
    user-select:        none;
    padding:            0;
    transition:         background-color 0.3s ease, border-color 0.3s ease;
    text-decoration:    none;
}

.results-button span {
    transition:         text-shadow 0.3s ease;
}

.results-button:hover,
.results-button-active {
    background:         linear-gradient(to bottom, rgb(234, 234, 255) 0%, rgb(234, 234, 255) 50%, rgb(214, 214, 255) 50%, rgb(214, 214, 255) 100%);
    border-color:       rgb(178, 178, 251);
}

.results-button-active {
    cursor:             default;
}


.results-button:hover span,
.results-button-active span {
    text-shadow:
        0 0 2px rgba(150, 150, 220, 0.9),
        0 0 6px rgba(150, 150, 220, 0.7),
        0 0 12px rgba(150, 150, 220, 0.5);
}

.results-button-disabled {
    width:              160px;
    height:             38px;
    font-family:        'Roboto', sans-serif;
    font-size:          15px;
    font-weight:        400;
    color:              #b0b0b0;
    background-color:   rgb(242, 242, 242);
    border:             1px solid rgb(224, 224, 224);
    border-radius:      6px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    box-sizing:         border-box;
    user-select:        none;
    padding:            0;
}


/*  -- SLIDESHOW AND HOVER GALLERY BUTTONS -------------------------------------------------------------------------- */

.results-ss-button {
    width:              120px;
    height:             38px;
    font-family:        'Roboto Condensed', sans-serif;
    font-size:          14px;
    font-weight:        600;
    color:              #a0a0a0;
    background:         linear-gradient(to bottom, rgb(48, 48, 48) 0%, rgb(48, 48, 48) 50%, rgb(24, 24, 24) 50%, rgb(24, 24, 24) 100%);
    border:             1px solid rgb(80, 80, 80);
    border-radius:      6px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    cursor:             pointer;
    box-sizing:         border-box;
    user-select:        none;
    padding:            0;
    transition:         background-color 0.3s ease, border-color 0.3s ease;
    text-decoration:    none;
}

.results-ss-button span {
    transition:         text-shadow 0.3s ease;
}

.results-ss-button-active {
    cursor:             default;
}

.results-ss-button:hover span,
.results-ss-button-active span {
    color:      gold;
    text-shadow:
        0 0 2px rgba( 180, 180, 180, 0.9),
        0 0 6px rgba( 180, 180, 180, 0.7),
        0 0 12px rgba(180, 180, 180, 0.5);
}


/*  -- OTHER CLASSES ------------------------------------------------------------------------------------------------ */

.results-button-row {
    display:            flex;
    gap:                10px; /* optional spacing between buttons */
    padding:            8px 0 8px 0;
    justify-content:    center;
}

.results-button-column {
    display:            flex;
    flex-direction:     column;
    gap:                10px; /* optional spacing between buttons */
    padding:            8px 0 8px 0;
}