/*
 * TBI Fusion Pay — storefront widget + popup styles.
 */

.fusionpaytbi-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 12px 0;
    border: 1px solid #dce1e6;
    border-radius: var(--fusionpaytbi-radius, 4px);
    background: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
}
.fusionpaytbi-widget .fusionpaytbi-logo { height: 22px; width: auto; flex: 0 0 auto; }
.fusionpaytbi-widget .fusionpaytbi-text { flex: 1 1 auto; line-height: 1.4; }
.fusionpaytbi-widget .fusionpaytbi-calc-btn {
    flex: 0 0 auto;
    border: 1px solid #0066cc;
    background: #0066cc;
    color: #fff;
    border-radius: var(--fusionpaytbi-radius, 4px);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}
.fusionpaytbi-widget .fusionpaytbi-calc-btn:hover { background: #0052a3; border-color: #0052a3; }

/* Style variants */
.fusionpaytbi-style-2 { background: #f7f9fc; }
.fusionpaytbi-style-3 { border-color: #0066cc; background: #eaf2fb; }
.fusionpaytbi-style-4 { flex-direction: column; align-items: flex-start; }
.fusionpaytbi-style-5 { border: none; padding: 6px 0; background: transparent; }

/* Popup */
.fusionpaytbi-popup {
    position: fixed; inset: 0; display: none; z-index: 9998;
}
.fusionpaytbi-popup.is-open { display: block; }
.fusionpaytbi-popup__backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
}
.fusionpaytbi-popup__dialog {
    position: absolute; top: 50%; left: 50%;
    /* Compact-card default before ro-iframe-resize.js sizes the dialog from
       the calculator's own TBI_CALCULATOR_RESIZE message - mobile-vs-desktop
       and compact-vs-banner sizing, plus the full-screen chrome removal
       below 767px, all live there now so there is only one place making
       that call. */
    width: min(460px, 94vw); height: min(699px, 92vh);
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    overflow: hidden;
}
.fusionpaytbi-popup__loading {
    position: absolute; inset: 0; display: flex;
    flex-direction: column;
    align-items: center; justify-content: center;
    background: #fff;
}
.fusionpaytbi-popup__iframe { width: 100%; height: 100%; border: 0; }

/* Advertisement floating button */
.fusionpaytbi-ad {
    position: fixed; bottom: 20px; right: 20px; z-index: 9997;
}
.fusionpaytbi-ad__trigger {
    width: 56px; height: 56px; border-radius: 50%;
    border: none; background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    cursor: pointer; padding: 8px;
}
.fusionpaytbi-ad__trigger img { width: 100%; height: 100%; object-fit: contain; }
.fusionpaytbi-ad__panel { display: none; position: absolute; bottom: 70px; right: 0; width: 320px; height: 420px; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.2); overflow: hidden; }
.fusionpaytbi-ad.is-open .fusionpaytbi-ad__panel { display: block; }
.fusionpaytbi-ad__panel iframe { width: 100%; height: 100%; border: 0; }
.fusionpaytbi-ad__close {
    position: absolute; top: 6px; right: 8px;
    border: none; background: transparent; font-size: 22px; cursor: pointer;
}

/* ── TBI branded button variants (styles 1-4, full WC parity) ─────────────── */

.tbi_button_container1, .tbi_button_container2,
.tbi_button_container3, .tbi_button_container4 {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.tbi_button1, .tbi_button2, .tbi_button3, .tbi_button4 {
    display: inline-block;
    min-width: 250px;
    max-width: 100%;
    text-decoration: none;
    outline: 0;
}

.tbi_button_body1, .tbi_button_body2 {
    background: #ff6600;
    border-radius: 8px;
    min-height: 50px;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 3px 10px;
}

.tbi_button_body1 { color: #fff; }
.tbi_button_body2 { color: #000; }

.tbi_button_body3, .tbi_button_body4 {
    background: #000;
    color: #fff;
    border-radius: 8px;
    min-height: 50px;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 3px 10px;
}

.tbi_button_line {
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 3px 10px;
    text-align: center;
}

.tbi_button_logo1, .tbi_button_logo2,
.tbi_button_logo3, .tbi_button_logo4 {
    max-height: 25px;
    width: auto;
    margin: -2px 0 0 5px;
}

/* Admin order listing badges */
.badge.status-pending { background: #ffc107; color: #333; }
.badge.status-completed { background: #28a745; color: #fff; }
.badge.status-failed { background: #dc3545; color: #fff; }

/* -----------------------------------------------------------------------
 * TBI button variants 1–4 (ported from WooCommerce plugin)
 * Used by widget styles 1–4.
 * ----------------------------------------------------------------------- */

.tbi_button_container1,
.tbi_button_container2,
.tbi_button_container3,
.tbi_button_container4 {
    width: 100%;
    position: relative;
    display: inline-block;
    overflow-y: hidden;
    transition: 0.3s;
}

/* Shared anchor reset */
.tbi_button1, .tbi_button2, .tbi_button3, .tbi_button4 {
    text-decoration: none !important;
    outline: 0 !important;
    display: inline-block;
    margin: 20px 0;
    min-width: 250px;
    max-width: 90%;
}

/* Shared line text style */
.tbi_button_line {
    font-family: 'Inter', open-sans;
    font-weight: 400;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 3px 10px;
    text-align: center;
}

/* Variant 1 — orange background, white text */
.tbi_button_body1 {
    border-radius: 8px;
    min-height: 50px;
    -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: column;
    justify-content: space-around;
    background: #ff6600;
    color: #fff;
    padding: 3px 10px;
}
.tbi_button_logo1 { max-height: 25px; width: auto; margin: -2px 0 0 5px; }

/* Variant 2 — orange background, dark text */
.tbi_button_body2 {
    border-radius: 8px;
    min-height: 50px;
    -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: column;
    justify-content: space-around;
    background: #ff6600;
    color: #000;
    padding: 3px 10px;
}
.tbi_button_logo2 { max-height: 25px; width: auto; margin: -2px 0 0 5px; }

/* Variant 3 — black background, white text */
.tbi_button_body3 {
    border-radius: 8px;
    min-height: 50px;
    -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: column;
    justify-content: space-around;
    background: #000;
    color: #fff;
    padding: 3px 10px;
}
.tbi_button_logo3 { max-height: 25px; width: auto; margin: -2px 0 0 5px; }

/* Variant 4 — black background, white text (product) */
.tbi_button_body4 {
    border-radius: 8px;
    min-height: 50px;
    -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: column;
    justify-content: space-around;
    background: #000;
    color: #fff;
    padding: 3px 10px;
}
.tbi_button_logo4 { max-height: 25px; width: auto; margin: -2px 0 0 5px; }

/* Neutral/gray horizontal layout (RO style) */
.tbi_button_body2--neutral {
    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;
    align-items: center;
    background: #f4f4f4;
    color: #000;
    padding: 3px 10px;
    cursor: pointer;
}
.tbi_button_logo2--neutral { max-height: 40px; width: auto; }

/* RO-only checkout logo override: Romania uses tbi-bank-small.svg */
#checkout-payment-step img[src*="tbi-bank-small.svg"],
.payment-options img[src*="tbi-bank-small.svg"] {
    max-height: 40px;
    width: auto;
}

.text-orange { color: #ff6600; }

/* -----------------------------------------------------------------------
 * Redesigned tbi bank financing card (product page).
 *
 * Only rendered for countries with FeatureFlags::REDESIGNED_WIDGET,
 * so the styles 1-4 button above is untouched for the others. Geometry, type
 * scale and colours mirror the OpenCart and WooCommerce RO plugins: a value
 * changed here should be changed there too.
 * ----------------------------------------------------------------------- */

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

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

.tbi_button_body_ro {
    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. */
.tbi_button_ro:hover .tbi_button_body_ro,
.tbi_button_ro:focus-within .tbi_button_body_ro,
.tbi_button_body_ro:hover {
    box-shadow: none;
}

.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_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;
}

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

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

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

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

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

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

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

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

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

.tbi_button_ro_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;
}

.tbi_button_ro_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;
}

.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-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 24px;
    min-height: 40px;
    padding: 8px 16px;
    text-align: center;
    white-space: nowrap;
}

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

    .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 tbibankfpro (max-width: 479px) {
    .tbi_button_body_ro {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

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

    .tbi_button_ro_details {
        width: 100%;
    }
}