/* Button System - Consistent styling for all buttons */

/* Base button styles - shared by all button types */
.button,
.app-store-button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

/* Primary button style */
.button,
.btn-primary {
    background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(94, 92, 230, 0.3);
}

.button:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(94, 92, 230, 0.4);
}

.button:active,
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(94, 92, 230, 0.3);
}

/* Secondary button style */
.button.secondary,
.btn-secondary {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    box-shadow: none;
}

.button.secondary:hover,
.btn-secondary:hover {
    background: var(--color-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(94, 92, 230, 0.3);
}

/* App Store button style - Matching site design */
.app-store-button,
.btn-app-store {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    background: #000000;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Apple logo icon */
.app-store-button::before,
.btn-app-store::before {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 16.97 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.app-store-button:hover,
.btn-app-store:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    background: #111111;
}

.app-store-button:active,
.btn-app-store:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Size variants */
.button.small,
.btn-small {
    padding: 10px 24px;
    font-size: 14px;
}

.button.large,
.btn-large {
    padding: 18px 40px;
    font-size: 18px;
}

/* Full width variant */
.button.full-width,
.btn-full-width {
    width: 100%;
}

/* Disabled state */
.button:disabled,
.button.disabled,
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Dark theme adjustments */
[data-theme="dark"] .button.secondary,
[data-theme="dark"] .btn-secondary {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

[data-theme="dark"] .button.secondary:hover,
[data-theme="dark"] .btn-secondary:hover {
    background: var(--color-accent);
    color: white;
}

/* Dark theme - App Store button inverts colors */
[data-theme="dark"] .app-store-button,
[data-theme="dark"] .btn-app-store {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .app-store-button::before,
[data-theme="dark"] .btn-app-store::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 16.97 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .app-store-button:hover,
[data-theme="dark"] .btn-app-store:hover {
    background: #f0f0f0;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* Auto theme (follows system preference) */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .button.secondary,
    [data-theme="auto"] .btn-secondary {
        color: var(--color-accent);
        border-color: var(--color-accent);
    }
    
    [data-theme="auto"] .button.secondary:hover,
    [data-theme="auto"] .btn-secondary:hover {
        background: var(--color-accent);
        color: white;
    }
    
    /* App Store button inverts in auto dark mode */
    [data-theme="auto"] .app-store-button,
    [data-theme="auto"] .btn-app-store {
        background: #ffffff;
        color: #000000;
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
    }
    
    [data-theme="auto"] .app-store-button::before,
    [data-theme="auto"] .btn-app-store::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 16.97 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z'/%3E%3C/svg%3E");
    }
    
    [data-theme="auto"] .app-store-button:hover,
    [data-theme="auto"] .btn-app-store:hover {
        background: #f0f0f0;
    }
}

/* Loading state */
.button.loading::after,
.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: button-loading-spinner 1s linear infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .button,
    .app-store-button,
    .btn {
        padding: 12px 24px;
        font-size: 15px;
        position: static;
        z-index: 1;
    }
    
    .button.small,
    .btn-small {
        padding: 8px 20px;
        font-size: 13px;
    }
    
    .button.large,
    .btn-large {
        padding: 16px 32px;
        font-size: 17px;
    }
    
    /* App Store button responsive */
    .app-store-button,
    .btn-app-store {
        padding: 12px 24px;
        font-size: 15px;
        width: auto;
        height: auto;
    }
    
    .app-store-button::before,
    .btn-app-store::before {
        width: 18px;
        height: 18px;
    }
    
    /* Fix for app store button in cards on mobile */
    .card .app-store-button {
        display: inline-flex;
        margin: 16px auto;
    }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
    .app-store-button,
    .btn-app-store {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .app-store-button::before,
    .btn-app-store::before {
        width: 16px;
        height: 16px;
    }
}

/* Special styles for hero sections */
.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
}

.hero-buttons .button,
.hero-buttons .app-store-button {
    min-width: 200px;
}