/*
 * Visitor-facing branded call-to-action buttons.
 * Loaded after Bootstrap and locale styles to keep the variants consistent
 * without changing ordinary Bootstrap, account, or administration buttons.
 */

.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) {
    --visitor-cta-background: transparent;
    --visitor-cta-border: transparent;
    --visitor-cta-color: var(--whiteColor, #fff);
    --visitor-cta-hover-background: transparent;
    --visitor-cta-hover-color: var(--visitor-cta-color);
    --visitor-cta-focus-color: rgb(244 120 54 / 35%);

    align-items: center;
    background: var(--visitor-cta-background) !important;
    border-color: var(--visitor-cta-border) !important;
    border-radius: 999px !important;
    color: var(--visitor-cta-color) !important;
    display: inline-flex !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    justify-content: center;
    line-height: 1.25;
    min-height: 48px;
    padding: 7px 18px !important;
    text-align: center !important;
    text-decoration: none;
    text-transform: uppercase !important;
    transition: background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, color 180ms ease, transform 180ms ease !important;
    vertical-align: middle;
    white-space: normal;
}

.btn.btn-orange {
    --visitor-cta-background: var(--orangeColor, #f47836);
    --visitor-cta-border: var(--orangeColor, #f47836);
    --visitor-cta-hover-background: #dc6a2f;
}

.btn.btn-teal {
    --visitor-cta-background: var(--tealColor, #00aaa6);
    --visitor-cta-border: var(--tealColor, #00aaa6);
    --visitor-cta-hover-background: #00918d;
    --visitor-cta-focus-color: rgb(0 170 166 / 35%);
}

.btn.btn-yellow {
    --visitor-cta-background: var(--yellowColor, #fff254);
    --visitor-cta-border: var(--yellowColor, #fff254);
    --visitor-cta-color: var(--blackColor, #000);
    --visitor-cta-hover-background: #e6dd4c;
    --visitor-cta-hover-color: var(--blackColor, #000);
    --visitor-cta-focus-color: rgb(255 242 84 / 45%);
}

.btn.btn-magenta {
    --visitor-cta-background: var(--magentaColor, #e40e62);
    --visitor-cta-border: var(--magentaColor, #e40e62);
    --visitor-cta-hover-background: #c10c55;
    --visitor-cta-focus-color: rgb(228 14 98 / 35%);
}

.btn.btn-purple {
    --visitor-cta-background: var(--purpleColor, #7c4199);
    --visitor-cta-border: var(--purpleColor, #7c4199);
    --visitor-cta-hover-background: #693784;
    --visitor-cta-focus-color: rgb(124 65 153 / 35%);
}

.btn.btn-green {
    --visitor-cta-background: var(--greenColor, #7bc143);
    --visitor-cta-border: var(--greenColor, #7bc143);
    --visitor-cta-hover-background: #69aa3a;
    --visitor-cta-focus-color: rgb(123 193 67 / 35%);
}

.btn.btn-outline-orange {
    --visitor-cta-border: var(--orangeColor, #f47836);
    --visitor-cta-color: var(--orangeColor, #f47836);
    --visitor-cta-hover-background: var(--orangeColor, #f47836);
    --visitor-cta-hover-color: var(--whiteColor, #fff);
}

.btn.btn-outline-teal {
    --visitor-cta-border: var(--tealColor, #00aaa6);
    --visitor-cta-color: var(--tealColor, #00aaa6);
    --visitor-cta-hover-background: var(--tealColor, #00aaa6);
    --visitor-cta-hover-color: var(--whiteColor, #fff);
    --visitor-cta-focus-color: rgb(0 170 166 / 35%);
}

.btn.btn-outline-yellow {
    --visitor-cta-border: var(--yellowColor, #fff254);
    --visitor-cta-color: var(--yellowColor, #fff254);
    --visitor-cta-hover-background: var(--yellowColor, #fff254);
    --visitor-cta-hover-color: var(--blackColor, #000);
    --visitor-cta-focus-color: rgb(255 242 84 / 45%);
}

.btn.btn-outline-magenta {
    --visitor-cta-border: var(--magentaColor, #e40e62);
    --visitor-cta-color: var(--magentaColor, #e40e62);
    --visitor-cta-hover-background: var(--magentaColor, #e40e62);
    --visitor-cta-hover-color: var(--whiteColor, #fff);
    --visitor-cta-focus-color: rgb(228 14 98 / 35%);
}

.btn.btn-outline-purple {
    --visitor-cta-border: var(--purpleColor, #7c4199);
    --visitor-cta-color: var(--purpleColor, #7c4199);
    --visitor-cta-hover-background: var(--purpleColor, #7c4199);
    --visitor-cta-hover-color: var(--whiteColor, #fff);
    --visitor-cta-focus-color: rgb(124 65 153 / 35%);
}

.btn.btn-outline-green {
    --visitor-cta-border: var(--greenColor, #7bc143);
    --visitor-cta-color: var(--greenColor, #7bc143);
    --visitor-cta-hover-background: var(--greenColor, #7bc143);
    --visitor-cta-hover-color: var(--whiteColor, #fff);
    --visitor-cta-focus-color: rgb(123 193 67 / 35%);
}

.btn:is(.btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) {
    border-style: solid !important;
    border-width: 2px !important;
}

.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover {
    background: var(--visitor-cta-hover-background) !important;
    border-color: var(--visitor-cta-hover-background) !important;
    border-radius: 999px !important;
    color: var(--visitor-cta-hover-color) !important;
    transform: translateY(-1px);
}

.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):focus-visible {
    box-shadow: 0 0 0 4px var(--visitor-cta-focus-color) !important;
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):active {
    transform: translateY(0);
}

.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span {
    align-items: center;
    color: inherit !important;
    display: inline-flex !important;
    gap: 12px;
    justify-content: center;
    padding: 0 !important;
    text-align: center !important;
    width: auto !important;
}

.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span > img {
    background-color: transparent !important;
    border-radius: 50%;
    box-shadow: none !important;
    flex: 0 0 32px;
    height: 32px;
    inset: auto !important;
    margin: 0;
    max-height: 32px;
    max-width: 32px;
    min-height: 32px;
    min-width: 32px;
    position: static !important;
    transform: none !important;
    transition: transform 180ms ease !important;
    width: 32px;
}

.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img.sibf-forward-icon,
.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img[src*="arrow-right-circle"],
.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img.sibf-directional-icon {
    transform: translateX(3px) !important;
}

[dir="rtl"] .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span > img.sibf-forward-icon,
body.rtl .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span > img.sibf-forward-icon,
[dir="rtl"] .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span > img[src*="arrow-right-circle"],
body.rtl .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span > img[src*="arrow-right-circle"],
[dir="rtl"] .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span > img.sibf-directional-icon,
body.rtl .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span > img.sibf-directional-icon {
    transform: rotate(180deg) !important;
}

[dir="rtl"] .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img.sibf-forward-icon,
body.rtl .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img.sibf-forward-icon,
[dir="rtl"] .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img[src*="arrow-right-circle"],
body.rtl .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img[src*="arrow-right-circle"],
[dir="rtl"] .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img.sibf-directional-icon,
body.rtl .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-outline-orange, .btn-outline-teal,
    .btn-outline-yellow, .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):hover > span > img.sibf-directional-icon {
    transform: rotate(180deg) translateX(-3px) !important;
}

.btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
    .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
    .btn-outline-magenta, .btn-outline-purple, .btn-outline-green):is(
        :disabled, .disabled, [aria-disabled="true"]) {
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
        .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
        .btn-outline-magenta, .btn-outline-purple, .btn-outline-green),
    .btn:is(.btn-orange, .btn-teal, .btn-yellow, .btn-magenta, .btn-purple, .btn-green,
        .btn-outline-orange, .btn-outline-teal, .btn-outline-yellow,
        .btn-outline-magenta, .btn-outline-purple, .btn-outline-green) > span > img {
        transition: none !important;
    }
}