/* XTD: two global rules of the original removed (input[type=radio] margin, .text-orange): they restyled the
   theme's own radios on the product and cart pages. */
.tbibank_important {
    color: #ff5959;
    margin: 10px 0;
    font-size: 15px;
    font-style: italic;
}

.tbibank_logo_container {
    width: 100%;
    margin: 20px 0;
}

.tbibank_logo {
    max-height: 60px;
    width: auto;
}

.tbibank_form {
    width: 100%;
    margin: 20px 0;
}

.tbibank_row {
    max-width: 550px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.tbibank_row_no_space {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0;
}

.tbibank_field {
    width: 300px;
    max-width: 100%;
}

.tbibank_field_half {
    width: 145px;
    max-width: 100%;
}

.tbibank_confirm {
    padding: 10px 20px;
    background: #ff6600;
    border: 0;
    cursor: pointer;
}

.tbibank_button_line {
    font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight:400;
    font-size:12px;
    justify-content:center;
    align-items:center;
    margin:0;
    padding: 3px 10px;
    text-align: center;
}

#tbibank_button_container1:not(.tbibank_fp_container) {
    width:100%;
    position:relative;
    display:inline-block;
    overflow-y: hidden;
    transition: 0.3s;
}

#tbibank_button1:not(.tbibank_fp_wrapper) {
    text-decoration:none!important;
    outline:0!important;
    display: inline-block;
    margin: 20px 0;
    min-width:280px;
    max-width:90%;
}

#tbibank_button_body1:not(.tbibank_fp_button) {
    border-radius: 8px;
    height:50px;
    border:1px solid #e1e1e1;
    -webkit-box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 40%);
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 40%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    background:#f4f4f4;
    color:#000;
    padding: 3px 10px;
    cursor: pointer;
    align-items: center;
}

#tbibank_button_logo1:not(.tbibank_fp_logo) {
    max-height:40px;
    width:auto;
}

#tbibank_popup_container.container {
    width: 460px;
    max-width: calc(100vw - 32px);
    padding: 0 !important;
    margin: 0 auto !important;
}


#tbibank_button_body1.cart:not(.tbibank_fp_button) {
    margin-top: 0px;
    margin-right: 10px;
}

#tbicheckout_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
}


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

#tbicheckout_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;
}

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

.iframe_container {
    width: 100%;
    height: 400px;
    max-width: 100%;
    min-height: 400px;
    max-height: 720px;
    position: relative;
    background: #F4F4F4;
    border-radius: 24px;
}

#tbicheckout_small_popup img{
    width: -webkit-fill-available;
}

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

    }

    /* #tbibank_popup_container / .iframe_container 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. */
}

@media (max-width: 478px) {
    #tbibank_button_body1.cart:not(.tbibank_fp_button) {
        margin-top: 10px;
        margin-right: 0px;
    }
}
/* -----------------------------------------------------------------------
 * Fusion Pay financing widget (CKT-3616, restyled for the new design)
 *
 * Geometry, type scale and colours mirror the RO WooCommerce plugin, which is
 * the reference implementation for this button (assets/css/style.css there,
 * .tbi_button_body_ro and friends). Keep the three plugins in step: a value
 * changed here should be changed there too.
 * ----------------------------------------------------------------------- */

.tbibank_fp_container {
    display: block;
    overflow: visible;
    position: relative;
    width: 100%;
}

.tbibank_fp_wrapper {
    box-sizing: border-box;
    container-name: tbibankfp;
    container-type: inline-size;
    display: block;
    margin: 20px 0;
    max-width: 495px;
    outline: 0 !important;
    text-decoration: none !important;
    width: 100%;
}

.tbibank_fp_button {
    align-items: center;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 20px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 12%);
    box-sizing: border-box;
    color: #1c1e24;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    /* The reference ships "'Inter', open-sans", which no browser can resolve
       past Inter, so the button falls back to the default serif. A real chain
       has to follow it. Inherited by the copy below. */
    font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    gap: 12px;
    justify-content: space-between;
    /* The design frame is 493x68 with 12px padding and a 1px stroke on OUTER
       alignment, so the stroke sits beyond the frame: 495x70 in border-box. */
    min-height: 70px;
    padding: 12px;
    transition: box-shadow 0.2s ease;
    width: 100%;
}

/* The design separates the two states by elevation alone: the resting card
   carries the shadow and the hovered one drops it. */
.tbibank_fp_wrapper:hover .tbibank_fp_button,
.tbibank_fp_wrapper:focus-within .tbibank_fp_button,
.tbibank_fp_button:hover {
    box-shadow: none;
}

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

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

.tbibank_fp_logo {
    display: block;
    height: 44px;
    margin: 0;
    max-width: 100%;
    width: auto;
}

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

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

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

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

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

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

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

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

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

/* Flexible -> BNPL: the incoming offer starts above and slides down. */
.tbibank_fp_track.direction-down .tbibank_fp_state--next {
    top: -100%;
}

/* BNPL -> Flexible: the incoming offer starts below and slides up. */
.tbibank_fp_track.direction-up .tbibank_fp_state--next {
    top: 100%;
}

.tbibank_fp_title {
    color: #ff5f20;
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 16px;
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
}

.tbibank_fp_amount {
    color: #1c1e24;
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 24px;
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
}

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

.tbibank_fp_container.cart {
    text-align: right;
}

.tbibank_fp_container.cart .tbibank_fp_wrapper {
    margin-left: auto;
}

/* Mobile: the CTA leaves the row and spans the card underneath the financing
   information. */
@media (max-width: 767px) {
    .tbibank_fp_button {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

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

    .tbibank_fp_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) {
    .tbibank_fp_button {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

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

    .tbibank_fp_details {
        width: 100%;
    }
}