/**
 * Button Components CSS
 * Shared button styling used across all post types
 * (load more, action buttons, etc.)
 */

/* Import variables */
@import '../base/variables.css';

/* Base Button Styles */
.btn-base {
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

/* Load More Buttons - Default Style */
.btn-load-more {
    border-radius: var(--border-radius-md);
    color: var(--sticky-bg);
    border: 2px solid var(--sticky-bg);
    text-transform: uppercase;
    background-color: var(--bg-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--font-size-lg);
    padding: var(--spacing-sm) var(--spacing-xl);
    transition: all var(--transition-fast);
}

.btn-load-more:hover {
    color: #000 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-medium) !important;
    background: var(--bg-light) !important;
    border-color: var(--border-dark) !important;
}

.btn-load-more:focus {
    background: var(--primary-green-hover) !important;
    color: var(--text-white) !important;
    box-shadow: 0 0 0 3px var(--primary-green-focus) !important;
    outline: none !important;
    border-color: var(--primary-green) !important;
}

/* Special styling for threats archive load more */
.threats-archive-bootstrap-wrapper .btn-load-more {
    background: var(--primary-green) !important;
    color: var(--text-white) !important;
    border: none !important;
    padding: var(--spacing-md) var(--spacing-3xl) !important;
    border-radius: var(--border-radius-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-lg) !important;
    text-transform: uppercase !important;
    box-shadow: var(--shadow-light) !important;
}

.threats-archive-bootstrap-wrapper .btn-load-more:hover {
    background: var(--primary-green-hover) !important;
    color: var(--text-white) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-medium) !important;
}

.threats-archive-bootstrap-wrapper .btn-load-more:focus {
    background: var(--primary-green-hover) !important;
    color: var(--text-white) !important;
    box-shadow: 0 0 0 3px var(--primary-green-focus) !important;
    outline: none !important;
}

/* Action Buttons (Species, Habitat, etc.) */
.btn-species,
.btn-habitat {
    background: var(--primary-green) !important;
    color: var(--text-white) !important;
    padding: 8px var(--spacing-xl) !important;
    border-radius: var(--border-radius-sm) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-lg) !important;
    border: none !important;
    transition: background-color var(--transition-fast) !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.btn-species:hover,
.btn-habitat:hover {
    background: var(--primary-green-hover) !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
}

.btn-species:focus,
.btn-habitat:focus {
    background: var(--primary-green-hover) !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--primary-green-focus) !important;
}

/* Species specific button positioning */
.btn-species {
    margin-top: var(--spacing-lg) !important;
}

/* Reset Button */
.btn-reset {
    border-radius: var(--border-radius-md);
    color: var(--sticky-bg);
    border: 2px solid var(--sticky-bg);
    text-transform: uppercase;
    background-color: var(--bg-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--font-size-lg);
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.btn-reset:hover {
    background: var(--bg-light) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-dark) !important;
}

.btn-reset:focus {
    background: var(--bg-light) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-dark) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(150, 179, 164, 0.3) !important;
}

/* Button Loading States */
.btn-load-more:disabled,
.btn-species:disabled,
.btn-habitat:disabled,
.btn-reset:disabled {
    background: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: #cccccc !important;
}

/* Button Loading Animation */
.btn-loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
}

.btn-loading::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    border: 2px solid transparent !important;
    border-top-color: currentColor !important;
    border-radius: var(--border-radius-circle) !important;
    animation: btn-spin 1s linear infinite !important;
}

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

/* Mobile Responsive */
@media (max-width: 768px) {
    .btn-load-more {
        padding: var(--spacing-sm) var(--spacing-xl) !important;
        font-size: var(--font-size-md) !important;
    }

    .threats-archive-bootstrap-wrapper .btn-load-more {
        padding: var(--spacing-sm) var(--spacing-xxl) !important;
        font-size: var(--font-size-md) !important;
    }

    .btn-species,
    .btn-habitat {
        padding: 6px var(--spacing-md) !important;
        font-size: var(--font-size-md) !important;
    }

    .btn-reset {
        padding: 6px var(--spacing-md) !important;
        font-size: var(--font-size-sm) !important;
    }
}