/* ===== BUTTON COMPONENTS ===== */

/* Primary Soft Button */
.btn-luxury {
    background: linear-gradient(125deg, var(--gold-light)10%, var(--gold-yellow) 20%, var(--gold-dark) 100%);
    color: var(--text-primary);
    border: 2px solid var(--gold-dark);
}
.btn-luxury:hover {
    background: linear-gradient(125deg, var(--gold-dark) 0%, var(--gold-yellow) 50%, var(--gold-light) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Primary Soft Button */
.btn-soft {
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--accent-rose) 100%);
    color: var(--text-primary);
    border: 2px solid var(--primary-soft);
}

.btn-soft:hover {
    background: linear-gradient(135deg, var(--accent-rose) 0%, var(--primary-soft) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

/* Friendly Soft Button */
.btn-friendly {
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--accent-rose) 100%);
    color: var(--text-primary);
    border: 2px solid var(--primary-soft);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-friendly:hover {
    background: linear-gradient(135deg, var(--accent-rose) 0%, var(--primary-soft) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* Secondary Button */
.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-soft);
    color: var(--primary-soft);
}

/* Large Button */
.btn-lg {
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
}

/* Small Button */
.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

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

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

.btn-outline-light:hover {
    background: var(--primary-soft);
    color: var(--text-primary);
    border-color: var(--primary-soft);
}

/* ===== BUTTON GROUP ===== */
.btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-group .btn {
    flex: 1;
    min-width: 120px;
}

@media (max-width: 480px) {
    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        width: 100%;
    }
}