/* Unified Button System - Simple and Consistent */

/* Base Button Styles */
.btn,
.purchase-button,
.plate-search-button,
.explore-free-btn,
.finn-view-more-btn,
.ai-expand-toggle {
    /* Typography */
    font-family: var(--font-family);
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    
    /* Spacing */
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 44px;
    
    /* Visual */
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    
    /* Transitions */
    transition: all 0.2s ease;
    
    /* Touch optimization */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Override for plate-search-button */
.plate-search-button {
    background: var(--primary-navy);
    border: none;
}

/* Hover State */
.btn:hover,
.purchase-button:hover,
.plate-search-button:hover,
.explore-free-btn:hover,
.finn-view-more-btn:hover,
.ai-expand-toggle:hover {
    background: var(--primary-blue-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* Override hover for plate-search-button */
.plate-search-button:hover {
    background: var(--primary-navy-hover);
}

/* Active State */
.btn:active,
.purchase-button:active,
.plate-search-button:active,
.explore-free-btn:active,
.finn-view-more-btn:active,
.ai-expand-toggle:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Button Sizes */
.btn-sm {
    font-size: var(--font-xs);
    padding: var(--spacing-sm) var(--spacing-base);
    min-height: 36px;
}

.btn-lg {
    font-size: var(--font-base);
    padding: var(--spacing-base) var(--spacing-2xl);
    min-height: 48px;
}

/* Full Width Button */
.btn-block {
    width: 100%;
    display: flex;
}

/* Button Icons */
.btn .toggle-icon {
    display: inline-block;
    font-size: var(--font-xs);
    transition: transform 0.3s ease;
    margin-left: var(--spacing-xs);
}

/* Disabled State */
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading State */
.btn.loading {
    position: relative;
    color: transparent;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .btn,
    .purchase-button,
    .plate-search-button,
    .explore-free-btn,
    .finn-view-more-btn,
    .ai-expand-toggle {
        font-size: var(--font-base);
        padding: var(--spacing-base) var(--spacing-2xl);
        min-height: 48px;
    }
    
    .btn-sm {
        font-size: var(--font-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
        min-height: 38px;
    }
    
    .btn-lg {
        font-size: var(--font-lg);
        padding: var(--spacing-lg) var(--spacing-3xl);
        min-height: 52px;
    }
}