/* Button Component Styles — Bootstrap 5 Integration */

/* Override Bootstrap primary color with site orange palette */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

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

.btn-primary-outline:hover,
.btn-primary-outline:focus {
    background-color: var(--color-transparent);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.btn-primary-outline:active,
.btn-primary-outline.active {
    background-color: var(--color-transparent);
    border-color: var(--color-primary-dark);
}

/* Custom size variants (beyond Bootstrap's sm/lg) */
.btn-lg {
    height: 3.5rem;
    padding: 0 2rem !important;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-xl {
    height: 4rem;
    padding: 0 2.5rem !important;
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Custom outline variant (Bootstrap uses .btn-outline-primary, but we override with our style) */
.btn-outline {
    background-color: transparent;
    color: var(--color-slate-900);
    border-color: var(--color-slate-700);
}

.btn-outline:hover {
    background-color: var(--color-slate-800);
    border-color: var(--color-slate-800);
    color: var(--color-white);
}

/* Icon styling in buttons */
.btn svg {
    margin-left: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
}

/* Smooth transitions for Bootstrap button classes */
.btn {
    transition: all 0.2s ease;
}

/* Focus state for accessibility */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}