/* ARMember - Oceanpayment Payment Gateway: checkout styles */

/*
 * The checkout page hides the whole gateway box for modal-style gateways:
 *   .arm_membership_setup_form .arm_setup_gatewaybox_wrapper{display:none !important}
 * Oceanpayment embeds its hosted card fields inline, so the box must show
 * again — but only when it actually contains our fields (specificity +
 * :has() beats the site's !important rule without touching site CSS).
 */
.arm_membership_setup_form .arm_setup_gatewaybox_wrapper:has(.arm_module_gateway_fields_oceanpayment) {
    display: block !important;
}

/* When Oceanpayment is the only gateway, the picker dropdown is redundant —
 * hide it (and its label) and let the hosted fields speak for themselves. */
.arm_membership_setup_form .arm_setup_gatewaybox_wrapper .arm-df__form-group_select:has(.arm__dc--items > li:only-child) {
    display: none !important;
}

/* Section heading above the hosted card fields (mockup: "Payment Details"). */
.arm_module_gateway_fields_oceanpayment .arm_oceanpayment_section_title {
    font-size: 16px;
    font-weight: 600;
    color: #424242;
    margin-bottom: 10px;
}

/* Hosted card fields container (matches the /checkout-raw/ payment card). */
.arm_module_gateway_fields_oceanpayment .arm_oceanpayment_fields_inner {
    background: #ffffff;
    border: 1px solid #e6e7f5;
    border-radius: 8px;
    padding: 18px 20px;
    margin-top: 12px;
}

.arm_module_gateway_fields_oceanpayment .arm_oceanpayment_element {
    min-height: 120px;
}

/*
 * ARMember core hides ALL iframes inside the setup form
 * (.arm_setup_form_container iframe { width:0; height:0; position:absolute;
 * left:-9999px }) — meant for tracking pixels. Restore ours.
 * No !important on height: the SDK posts auto-resize messages that our JS
 * mirrors into an inline style (inline style beats this rule, so the
 * iframe keeps growing for error/3DS states).
 */
.arm_setup_form_container .arm_oceanpayment_fields_inner .arm_oceanpayment_element iframe,
.arm_oceanpayment_fields_inner .arm_oceanpayment_element iframe {
    display: block;
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    height: 131px;
    border: 0;
}

/* Inline binding error. */
.arm_oceanpayment_error {
    color: #e14d4b;
    background: #fdf1f0;
    border: 1px solid #e14d4b;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
}

/* "Card verified" state. */
.arm_oceanpayment_bound_notice {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #27ae60;
    background: #f2fbf6;
    border-radius: 6px;
    font-size: 14px;
}

.arm_oceanpayment_bound_notice .arm_oceanpayment_bound_card {
    font-weight: 600;
}

.arm_oceanpayment_bound_notice .arm_oceanpayment_change_card {
    margin-left: 8px;
    text-decoration: underline;
    cursor: pointer;
}

/* Busy state on the setup submit button while binding runs. */
button.arm_op_busy,
input.arm_op_busy {
    opacity: 0.65;
    cursor: wait !important;
}