﻿.btn-modern {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    border: 2px solid transparent;
    background-color: #fff;
    cursor: pointer;
    transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    /* Resting: already “floating” */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.55);
}

    /* Hover: no vertical movement, just a subtle tint (variants handle color) */
    .btn-modern:hover {
        transform: translateY(-3px); /* stays put */
        box-shadow: 0 6px 12px rgba(0,0,0,0.55); /* same depth */
        /* background-color handled by variant :hover rules */
    }

    /* Active: press into the surface */
    .btn-modern:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
    }

    /* Optional: keyboard focus ring without moving button */
    .btn-modern:focus-visible {
        outline: none;
        box-shadow: 0 6px 12px rgba(0,0,0,0.55), 0 0 0 3px rgba(0,123,255,0.25); /* neutral focus halo */
    }

/* Variants */
.btn-cancel {
    color: #d9534f;
    border-color: #d9534f;
}

    .btn-cancel:hover {
        background-color: #fe9b9b;
    }

.btn-submit {
    color: #28a745;
    border-color: #28a745;
}

    .btn-submit:hover {
        /*background-color: #f0fff4;*/
        background-color: #9eef9b;
    }

    .btn-submit .fa-spinner {
        color: #28a745; /* match .btn-submit text color */
    }

.btn-utility {
    color: #007bff;
    border-color: #007bff;
}

    .btn-utility:hover {
        background-color: #9bd0fe;
    }

.btn-modern:disabled {
    background-color: #ccc; /* light gray background */
    color: #666; /* dark gray text */
    border-color: #999; /* medium gray border */
    cursor: not-allowed; /* shows the 'no' icon on hover */
    opacity: 0.7; /* slight transparency */
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce) {
    .btn-modern {
        transition: none;
    }
}
