/**
 * Button Component System
 * 
 * This file contains all button styles for the application.
 * It provides a unified button system with base classes and modifiers.
 * 
 * Base classes:
 * - .btn - Base button styles with common properties
 * - .btn-primary - Primary action button (dark bg, light text)
 * - .btn-secondary - Secondary action button (light bg, dark text)
 * - .btn-icon - Icon-only button with minimal padding
 * 
 * Modifiers:
 * - .btn-sm - Small size variant
 * - .btn-lg - Large size variant
 * - .btn-block - Full width button
 * 
 * Backward Compatibility:
 * - .event-card-btn - Event card action buttons
 * - .btn-submit - Form submit buttons
 * - .apply-filters-btn - Filter apply buttons
 * 
 * Usage:
 * <button class="btn btn-primary">Primary Action</button>
 * <button class="btn btn-secondary">Secondary Action</button>
 * <a href="#" class="btn btn-primary btn-lg">Large Link Button</a>
 * 
 * Requirements: 2.1, 2.2, 11.1
 */

/* === Base Button Styles === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-width-thin) solid var(--text-dark);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    font-size: var(--font-size-sm);
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast), 
                color var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* === Primary Button === */
.btn-primary {
    background-color: var(--text-dark);
    color: var(--white);
    border-color: var(--text-dark);
}

.btn-primary:hover {
    background-color: var(--text-dark-hover);
    color: var(--white);
}

.btn-primary:active {
    transform: translateY(1px);
}

/* === Secondary Button === */
.btn-secondary {
    background-color: var(--white);
    color: var(--text-dark);
    border-color: var(--text-dark);
}

.btn-secondary:hover {
    background-color: var(--secondary-bg);
    color: var(--text-dark);
}

.btn-secondary:active {
    transform: translateY(1px);
}

/* === Icon Button === */
.btn-icon {
    padding: var(--spacing-sm);
    min-width: 36px;
    min-height: 36px;
}

.btn-icon svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

/* === Size Modifiers === */
.btn-sm {
    padding: 6px 12px;
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: 12px 24px;
    font-size: var(--font-size-lg);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* === Event Card Button (Backward Compatibility) === */
.event-card-btn {
    padding: 7px 12px;
    background-color: var(--text-dark);
    color: var(--white);
    border: var(--border-width-thin) solid var(--text-dark);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    text-align: center;
    min-width: 0;
    white-space: nowrap;
    min-height: 36px;
    box-sizing: border-box;
}

.event-card-btn:hover {
    background-color: var(--text-dark-hover);
    color: var(--white);
    filter: brightness(1.15);
}

/* === Save Event Button States === */
.save-event-btn {
    /* Base save button - inherits from .event-card-btn */
}

.save-event-btn.saved {
    background-color: var(--white);
    color: var(--text-dark);
    border-color: var(--text-dark);
}

.save-event-btn.saved:hover {
    background-color: var(--secondary-bg);
    color: var(--text-dark);
    border-color: var(--text-dark);
}

.save-event-btn svg {
    fill: currentColor;
    transition: fill 0.2s ease, transform 0.2s ease;
}

.save-event-btn.saved svg {
    fill: red;
    animation: heartBeat 0.8s ease-in-out;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.15); }
    50% { transform: scale(1); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.share-event-btn svg,
.map-link-btn svg {
    fill: currentColor;
    width: 1.2em;
    height: 1.2em;
}

/* === Submit Button (Backward Compatibility) === */
.btn-submit {
    background: #fff;
    color: #000;
    border: 4px solid #000;
    padding: 0.75rem 2rem;
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    font-size: 1.1rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-submit:hover {
    background: #000;
    color: #fff;
    transform: translateY(-2px);
}

.btn-submit:active {
    transform: translateY(0);
}

/* === Cancel Button (Backward Compatibility) === */
.btn-cancel {
    background: transparent;
    color: var(--text-light);
    border: none;
    padding: 0.875rem 2rem;
    border-radius: var(--border-radius-sm);
    text-decoration: underline;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-cancel:hover {
    color: var(--text-dark);
    text-decoration: none;
}

/* === Apply Filters Button (Backward Compatibility) === */
.apply-filters-btn {
    background-color: var(--accent-color);
    color: var(--text-dark);
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.apply-filters-btn:hover {
    background-color: var(--accent-hover);
}

/* === Button Feedback States === */
.button-feedback-copied {
    background-color: #2d6a2f !important;
    color: white !important;
    border-color: #2d6a2f !important;
}

/* === Dark Mode === */
[data-theme="dark"] .btn-primary {
    background-color: #000;
    color: #fff;
    border-color: #fff;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #222;
}

[data-theme="dark"] .btn-secondary {
    background-color: #000;
    color: #fff;
    border-color: #fff;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #1a1a1a;
}

[data-theme="dark"] .btn:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .event-card-btn {
    background-color: #000;
    color: #fff;
    border: 1.5px solid #fff;
}

[data-theme="dark"] .event-card-btn:hover {
    background-color: #222;
    color: #fff;
    border: 1.5px solid #fff;
}

[data-theme="dark"] .save-event-btn.saved {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}

[data-theme="dark"] .save-event-btn.saved:hover {
    background-color: #eee;
    color: #000;
    border-color: #fff;
}