body {
    color: black;
}

[x-cloak] {
    display: none !important;
}

.tbi-logo {
    margin-left: 15px;
}

.fusion-pay-custom-message {
    line-height: 3;
    background: #dbffd9;
    margin: 20px 0;
    border: 1px solid green;
    border-radius: 5px;
    padding: 0 20px;
}

.fusion-pay-custom-message p {
    line-height: 1.5;
}

#repayment-plans-container {
    margin: 0 20px 20px 20px;
}

@media (min-width: 412px) {
    #payment-method-description {
        margin-left: 20px;
    }
}

label[for="fusionpay"] {
    display: inline-flex;
    align-items: center;
}

#tbi_button {
    cursor: pointer;
}

#tbi_button_container,
.tbi_button_container_ro {
    display: block;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    width: 100%;
    min-width: 0;
}

.tbi_button1,
.tbi_button_ro,
#tbi_button1 {
    text-decoration: none !important;
    outline: 0 !important;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 495px;
    min-width: 0;
    container-name: tbibankfp;
    container-type: inline-size;
}

.tbi_button_body1,
.tbi_button_body_ro,
#tbi_button_body1 {
    align-items: center;
    background: #fff !important;
    border: 1px solid #ebebeb;
    border-radius: 20px !important;
    box-shadow: 0 6px 12px rgb(0 0 0 / 12%) !important;
    box-sizing: border-box;
    color: #1c1e24 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    justify-content: space-between !important;
    min-height: 70px;
    padding: 12px !important;
    transition: box-shadow 0.2s ease;
    width: 100%;
}

#tbi_button:hover .tbi_button_body_ro,
#tbi_button:focus-within .tbi_button_body_ro,
.tbi_button_body_ro:hover {
    box-shadow: none !important;
}

.tbi_button_ro_info {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    gap: 12px;
    min-width: 0;
}

.tbi_button_ro_brand {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
}

#tbi_button_logo1,
.tbi_button_ro_logo {
    display: block;
    height: 44px;
    margin: 0;
    max-width: 100%;
    width: auto;
}

.tbi_button_ro_divider {
    background: #ebebeb;
    border: 0;
    display: block;
    flex: 0 0 1px;
    height: 44px;
    width: 1px;
}

.tbi_button_ro_copy {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* ------------------------
 * RO offer state animation
 * ------------------------ */

.tbi_button_ro_state_viewport {
    display: flex;
    align-items: center;
    min-height: 44px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.tbi_button_ro_state_track {
    display: flex;
    flex-direction: column;
    position: relative;
    transform: translateY(0);
    transition: transform 0.24s ease;
    will-change: transform;
    width: 100%;
}

.tbi_button_ro_state_track.is-animating-up {
    transform: translateY(-100%);
}

.tbi_button_ro_state_track.is-animating-down {
    transform: translateY(100%);
}

.tbi_button_ro_state_track.is-resetting {
    transition: none;
}

.tbi_button_ro_state {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 4px;
    justify-content: center;
    min-height: 44px;
    width: 100%;
}

.tbi_button_ro_state--next {
    left: 0;
    pointer-events: none;
    position: absolute;
}

/* A -> B: B starts above and slides down into view. */
.tbi_button_ro_state_track.direction-down .tbi_button_ro_state--next {
    top: -100%;
}

/* B -> A: A starts below and slides up into view. */
.tbi_button_ro_state_track.direction-up .tbi_button_ro_state--next {
    top: 100%;
}

.tbi_button_ro_title {
    color: #ff5f20;
    display: block;
    font-family: 'Inter', open-sans;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 16px;
    margin: 0;
    text-align: left;
    white-space: nowrap;
}

.tbi_button_line--ro-amount {
    color: #1c1e24;
    display: block;
    font-family: 'Inter', open-sans;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    line-height: 24px;
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
}

.tbi_button_ro_details {
    align-items: center;
    background: #ff5f20;
    border-radius: 12px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-family: 'Inter', open-sans;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 24px;
    min-height: 40px;
    padding: 8px 16px;
    text-align: center;
    white-space: nowrap;
}

.text-orange {
    color: #ff6600;
}

#tbi_small_popup {
    max-width: 800px;
    background: #fff;
    padding: 6px 6px;
    border: 1px solid #f46424;
    border-radius: 8px;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    cursor: pointer;
    transition: 0.3s ease-in;
    opacity: 0.8;
}

#tbi_small_popup:hover {
    opacity: 1;
    box-shadow: 0 0 20px rgb(0 0 0 / 60%);
    transition: 0.3s ease-out;
}

#tbi_big_popup {
    width: 90vw;
    height: 220px;
    max-width: 400px;
    max-height: 0;
    margin: 8px 0 0 0;
    border-radius: 8px;
    opacity: 0;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    position: relative;
    overflow: hidden;
    transition: 300ms ease-in-out;
}

.tbi_expand {
    opacity: 1 !important;
    max-height: 400px !important;
    max-width: 400px !important;
}

#tbi_popup_container {
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.3);
    top: 0;
    display: none;
    justify-content: center;
    align-items: center;
    left: 0;
}

#tbi_popup_container.show {
    display: flex;
}

#iframe_container {
    width: 460px;
    height: 400px;
    max-width: calc(100vw - 32px);
    min-height: 400px;
    max-height: 720px;
    position: relative;
    background: #F4F4F4;
    border-radius: 24px;
}

#tbi_popup_iframe {
    width: 100%;
    height: 400px;
    max-height: 720px;
    border-radius: 24px;
}

#tbi_loading {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 130px;
    height: 130px;
    max-width: 50%;
}

#tbi_loading_text {
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .tbi_button_body1,
    .tbi_button_body_ro,
    #tbi_button_body1 {
        align-items: stretch;
        flex-direction: column !important;
        gap: 12px;
        padding: 12px !important;
    }

    .tbi_button_ro_info {
        flex: 0 0 auto;
        width: 100%;
    }

    .tbi_button_ro_details {
        width: 100%;
    }
}

/* A narrow product column is the mobile case too: below this width the row
   cannot hold the brand, the amount and the CTA, and the amount would be
   clipped by the rotation viewport. The media query above stays as the
   fallback for engines without container queries. */
@container tbibankfp (max-width: 479px) {
    .tbi_button_body1,
    .tbi_button_body_ro,
    #tbi_button_body1 {
        align-items: stretch;
        flex-direction: column !important;
        gap: 12px;
        padding: 12px !important;
    }

    .tbi_button_ro_info {
        flex: 0 0 auto;
        width: 100%;
    }

    .tbi_button_ro_details {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    #tbicheckout_small_popup {
        padding: 5px;
        max-width: 70px;
    }

    /* #iframe_container / #tbi_popup_iframe sizing, the full-screen
       border-radius/background removal below 767px, and the mobile-vs-
       desktop decision itself all live in ro-iframe-resize.js now, so there
       is only one place making that call instead of a CSS breakpoint here
       that could drift out of sync with it. */
}