/* WordMilestone Button Styles */

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #18181B;
    color: white;
    border: 2px solid #18181B;
    border-radius: 100px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    background: #FF4F00;
    border-color: #FF4F00;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
}

.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 transparent;
}

/* Full width variant */
.btn-primary.btn-full {
    width: 100%;
    justify-content: center;
}

/* Secondary button variant */
.btn-secondary {
    background: white;
    color: #18181B;
    border: 2px solid #E4E4E7;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    border-color: #18181B;
    background: #F7F6F2;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}

.btn-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 transparent;
}

/* Small button variant */
.btn-sm {
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.btn-sm:hover {
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
}

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