/* === JOIC Brand Buttons === */
.joic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end; 
    padding: 0.75rem 1.5rem;
    font-weight: var(--bs-font-weight-bold);
    border: none;
    border-radius: var(--bs-border-radius-xl);
    font-family: var(--bs-font-sans-serif);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    color: var(--bs-white);
    text-decoration: none;
    text-align: right; 
}


.joic-btn-compact {
    --bs-btn-padding-y: .175rem;
    --bs-btn-padding-x: .55rem;
    --bs-btn-font-size: .78rem;
    --bs-btn-line-height: 1.1;
    --bs-btn-border-radius: .25rem;
    line-height: 0.1 !important;
}

.joic-btn:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

/* ==== Solid Gradient Buttons (Opacity Variants) ==== */

/* Red → Yellow (100%) */
.joic-btn-gradient-red-yellow-100 {
    background: linear-gradient(to right, var(--bs-red), var(--bs-yellow));
}

/* Red → Yellow (60%) */
.joic-btn-gradient-red-yellow-60 {
    background: linear-gradient( to right, rgba(var(--bs-red-rgb), 0.6), rgba(var(--bs-yellow-rgb), 0.6) );
}

/* Red → Yellow (20%) */
.joic-btn-gradient-red-yellow-20 {
    background: linear-gradient( to right, rgba(var(--bs-red-rgb), 0.2), rgba(var(--bs-yellow-rgb), 0.2) );
}

/* ==== Transparent-to-Color Blend Buttons ==== */

/* Transparent → Yellow */
.joic-btn-blend-yellow {
    background: linear-gradient(to right, transparent, var(--bs-yellow));
}

/* Transparent → Orange */
.joic-btn-blend-orange {
    background: linear-gradient(to right, transparent, var(--bs-orange));
}

/* Transparent → Red */
.joic-btn-blend-red {
    background: linear-gradient(to right, transparent, var(--bs-red));
}

.joic-gradient-black {
    background: linear-gradient( to right, rgba(var(--bs-black-rgb), 0), /* transparent */
    rgba(var(--bs-black-rgb), 1) /* solid */
    );
}


/* Solid Red Button */
.joic-btn-red {
    background: var(--bs-red);
    color: #fff;
}