/* Buttons */
.btn {
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    padding: 0.625rem 1.5rem;
    transition: var(--transition);
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    color: white;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 30%, transparent);
}

.btn-outline-primary {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-outline-primary:hover {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Install App Button - Eye-catching styling */
.btn-install-app {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--secondary) 40%, transparent);
    animation: subtle-pulse 2s ease-in-out infinite;
}

.btn-install-app:hover {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary-700) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--secondary) 50%, transparent);
    color: white;
}

.btn-install-app:active {
    transform: translateY(0) scale(0.98);
}

.btn-install-app i {
    font-size: 1.1rem;
}

@keyframes subtle-pulse {
    0%,
    100% {
        box-shadow: 0 2px 10px color-mix(in srgb, var(--secondary) 40%, transparent);
    }

    50% {
        box-shadow: 0 2px 20px color-mix(in srgb, var(--secondary) 60%, transparent);
    }
}

/* Floating Install Button Animation */
.install-fab-btn {
    animation: bounce-in 1s ease-out;
    transition: transform 0.2s;
}

.install-fab-btn:active {
    transform: scale(0.95);
}

@keyframes bounce-in {
    0% {
        transform: scale(0) translateY(50px);
        opacity: 0;
    }

    60% {
        transform: scale(1.1) translateY(-10px);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* Hide install button when app is already installed */
.btn-install-app.installed {
    display: none !important;
}

/* Install menu item in dropdown */
.install-app-link {
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 10%, transparent) 0%, color-mix(in srgb, var(--success) 10%, transparent) 100%);
}

.install-app-link:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 20%, transparent) 0%, color-mix(in srgb, var(--success) 20%, transparent) 100%);
}

/* Hide install elements when already installed (controlled by JS) */
body.pwa-installed .btn-install-app,
body.pwa-installed #install-menu-item,
body.pwa-installed .footer-install-link,
body.pwa-installed #install-fab {
    display: none !important;
}