/**
 * Hyva Theme Styles for TBI FusionPay
 * Uses Tailwind CSS utility classes and custom styles
 */

/* Alpine.js x-cloak to prevent flash of unstyled content */
[x-cloak] {
    display: none !important;
}

/* TBI Button Animations */
.tbi-button {
    transition: all 0.2s ease-in-out;
}

.tbi-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tbi-button:active {
    transform: translateY(0);
}

/* Modal Backdrop Animation */
.modal-backdrop {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Iframe Loading State */
#tbi_loading {
    animation: fadeIn 0.3s ease-in-out;
}

#tbi_loading img {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Success Message Styling */
.fusion-pay-custom-message {
    animation: slideInDown 0.4s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus States for Accessibility */
.tbi-button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Orange Text Color (matching brand) */
.text-orange-600 {
    color: #ea580c;
}

.text-orange {
    color: #ea580c;
}

/* Additional Button Variants */
.tbi-button-primary {
    background-color: #2563eb;
    color: #ffffff;
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.tbi-button-primary:hover {
    background-color: #1d4ed8;
}

.tbi-button-secondary {
    background-color: #e5e7eb;
    color: #1f2937;
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.tbi-button-secondary:hover {
    background-color: #d1d5db;
}

.fusionpay-hyva-product-button {
    min-width: 0;
}

.fusionpay-hyva-product-button #tbi_button_container {
    display: block;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    width: 100%;
    min-width: 0;
}

.fusionpay-hyva-product-button .tbi_button1,
.fusionpay-hyva-product-button .tbi_button_ro {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 495px;
    min-width: 0;
    container-name: tbibankfp;
    container-type: inline-size;
}

.fusionpay-hyva-product-button #tbi_button_body1,
.fusionpay-hyva-product-button .tbi_button_body_ro {
    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%;
}

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

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

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

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

.fusionpay-hyva-product-button .tbi_button_ro_divider {
    background: #ebebeb;
    border: 0;
    display: block;
    flex: 0 0 1px;
    height: 44px;
    width: 1px;
}

.fusionpay-hyva-product-button .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
 * ------------------------ */

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

.fusionpay-hyva-product-button .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%;
}

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

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

.fusionpay-hyva-product-button .tbi_button_ro_state_track.is-resetting {
    transition: none;
}

.fusionpay-hyva-product-button .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%;
}

.fusionpay-hyva-product-button .tbi_button_ro_state--next {
    left: 0;
    pointer-events: none;
    position: absolute;
}

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

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

.fusionpay-hyva-product-button .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;
}

.fusionpay-hyva-product-button .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;
}

.fusionpay-hyva-product-button .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;
}

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

    .fusionpay-hyva-product-button .tbi_button_ro_info {
        flex: 0 0 auto;
        width: 100%;
    }

    .fusionpay-hyva-product-button .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) {
    .fusionpay-hyva-product-button #tbi_button_body1,
    .fusionpay-hyva-product-button .tbi_button_body_ro {
        align-items: stretch;
        flex-direction: column !important;
        gap: 12px;
        padding: 12px !important;
    }

    .fusionpay-hyva-product-button .tbi_button_ro_info {
        flex: 0 0 auto;
        width: 100%;
    }

    .fusionpay-hyva-product-button .tbi_button_ro_details {
        width: 100%;
    }
}