/* ──────────────────────────────────────────────────────────────────────────
 * TBI Fusion Pay – Custom overrides for reborn-theme
 *
 * Strategy: loaded after `tbi_checkout_frontend` (plugin default style) and
 * after `reborn-compiled` so all !important rules win cleanly.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Common wrapper: always full-width, no external margin ── */
#tbi_button_container,
.tbi_button_container1,
.tbi_button_container2,
.tbi_button_container3,
.tbi_button_container4 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* ── Inner button anchor/div: also full-width ── */
.tbi_button1,
.tbi_button2,
.tbi_button3,
.tbi_button4 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* ── Shared body: rounded-xl, matching Buy button height ── */
.tbi_button_body1,
.tbi_button_body2,
.tbi_button_body3,
.tbi_button_body4 {
    width: 100% !important;
    border-radius: 12px !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    /* prevent gap below inline elements */
    font-size: 0;
}

/* ── Variants 1 & 2: Orange gradient (tbi orange → deep red) ── */
.tbi_button_body1,
.tbi_button_body2 {
    background: linear-gradient(135deg, #ff7a18 0%, #e64a00 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(255, 100, 0, 0.35) !important;
}

.tbi_button_body1:hover,
.tbi_button_body2:hover {
    background: linear-gradient(135deg, #ff8f3a 0%, #f05000 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(255, 100, 0, 0.45) !important;
}

/* ── Variants 3 & 4: Dark gradient (charcoal → near-black) ── */
.tbi_button_body3,
.tbi_button_body4 {
    background: linear-gradient(135deg, #374151 0%, #111827 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

.tbi_button_body3:hover,
.tbi_button_body4:hover {
    background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

/* ── Button text lines: theme typography ── */
.tbi_button_line {
    font-family: 'Space Grotesk', 'Manrope', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: inherit !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* First line (Buy with tbi) — slightly smaller */
.tbi_button_body1 .tbi_button_line:first-child,
.tbi_button_body2 .tbi_button_line:first-child,
.tbi_button_body3 .tbi_button_line:first-child,
.tbi_button_body4 .tbi_button_line:first-child {
    font-size: 12px !important;
    font-weight: 500 !important;
    opacity: 0.9;
}

/* Second line (installment amount) — bolder */
.tbi_button_body1 .tbi_button_line:last-child,
.tbi_button_body2 .tbi_button_line:last-child,
.tbi_button_body3 .tbi_button_line:last-child,
.tbi_button_body4 .tbi_button_line:last-child {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* ── Logo sizing ── */
.tbi_button_logo1,
.tbi_button_logo2,
.tbi_button_logo3,
.tbi_button_logo4 {
    display: inline-block !important;
    height: 20px !important;
    width: 45px !important;
    min-width: 45px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
    margin: 0 0 0 6px !important;
    vertical-align: middle !important;
}

/* ── Loading state: keep it subtle ── */
#tbi_button.loading .tbi_button_body1,
#tbi_button.loading .tbi_button_body2,
#tbi_button.loading .tbi_button_body3,
#tbi_button.loading .tbi_button_body4 {
    opacity: 0.75 !important;
}