/* ====================================
   Button Styles
   ==================================== */

.btn {
    padding: 10px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: var(--smooth-transition);
    cursor: pointer;
    border: none;
    transform: translateZ(0);
    will-change: transform, box-shadow, background-color;
}

.btn-primary {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    color: white !important;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
}

.btn-super-cta {
    background: linear-gradient(90deg,
            #2e7d32 0%,
            #4caf50 25%,
            #66bb6a 50%,
            #4caf50 75%,
            #2e7d32 100%);
    background-size: 200% 100%;
    animation: wave-flow 4s ease-in-out infinite;
}

@keyframes wave-flow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.btn-outline {
    background: white;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    transform: translateZ(0);
    will-change: transform, background-color, box-shadow;
    transition: var(--smooth-transition);
}

.btn-outline:hover {
    background: rgba(46, 125, 50, 0.08);
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.15);
    transform: translateY(-2px) translateZ(0);
}

/* Green Hover Button */
.btn-green-hover {
    transition: all 0.3s ease;
}

.btn-green-hover:hover {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    transform: scale(1.02) translateZ(0);
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
}