/* Member 08 / 18: sizes estimated from the desktop XD preview (not Inspect).
 * Keep page containers, mobile and the approved Bank/Gateway modal unchanged.
 * Crypto-only surface rules apply only while that pane is active. */
@media (min-width: 992px) {
    #depositCooldownModal .modal-content {
        min-height: 468px;
        background: linear-gradient(180deg, #101010 0%, #171512 40%, #8a795b 100%);
        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 20px;
    }
    #depositCooldownModal .modal-header {
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 1;
        padding: 0;
    }
    #depositCooldownModal .modal-body { padding: 18px 41px 24px; }
    #depositCooldownModal .modal-footer { padding: 0 41px 48px; }
    #depositCooldownModal .deposit-cooldown-modal__gif {
        margin-bottom: 2px;
        mix-blend-mode: normal;
    }
    #depositCooldownModal .deposit-cooldown-modal__title {
        margin-bottom: 24px;
        color: #f4c66c;
    }
    #depositCooldownModal .deposit-cooldown-modal__message { color: #ffffff; }
    #depositCooldownModal .deposit-cooldown-modal__timer { color: #f4c66c; }
    #depositCooldownModal .deposit-cooldown-modal__close {
        border-color: rgba(255, 255, 255, 0.9);
    }
    #depositCooldownModal .deposit-cooldown-modal__close:focus-visible {
        outline: 2px solid #eccf97;
        outline-offset: 3px;
    }

    /* Bank and Crypto share the same modal frame, spacing and field styling. */
    #addBankModal .deposit-network-btn:focus-visible {
        outline: 2px solid #eccf97;
        outline-offset: 3px;
    }
}

/* Transparent feedback GIFs use normal compositing on desktop. */
@media (min-width: 992px) {
    #bankingDetailsErrorModal .failure-feedback-modal,
    #addBankFailModal .failure-feedback-modal { isolation: isolate; }
    #bankingDetailsErrorModal .failure-feedback-modal .success-feedback-modal__gif,
    #addBankFailModal .failure-feedback-modal .success-feedback-modal__gif { mix-blend-mode: normal; }
}

/* Legacy desktop feedback animations use normal compositing. */
@media (min-width: 992px) {
    #addBankSuccessModal .success-feedback-modal,
    #modalPasswordSuccess .success-feedback-modal,
    #modalUnverified .am-modal-overlay__dialog { isolation: isolate; }
    #addBankSuccessModal .success-feedback-modal__gif,
    #modalPasswordSuccess .success-feedback-modal__gif { mix-blend-mode: normal; }
    #modalUnverified .am-modal-overlay__body > img { mix-blend-mode: normal; }
}

/* Member 32: reuse the existing transparent Success.json animation and Bank/Gateway styling. */
@media (min-width: 992px) {
    #bankingDetailsSuccessModal .banking-crypto-success {
        border-radius: 20px;
        background: linear-gradient(180deg, #101010 0%, #171512 40%, #8a795b 100%) !important;
    }
    #bankingDetailsSuccessModal .banking-crypto-success .success-feedback-modal__body { padding: 18px 41px 0; }
    #bankingDetailsSuccessModal .banking-crypto-success .success-feedback-modal__gif {
        width: 220px;
        height: 220px;
        transform: none;
        margin-bottom: 2px;
        background: transparent;
        mix-blend-mode: normal;
        display: block;
    }
    #bankingDetailsSuccessModal .banking-crypto-success .success-feedback-modal__footer { padding: 48px 41px 48px; }
    #bankingDetailsSuccessModal .banking-crypto-success .success-feedback-modal__close { top: 24px; right: 24px; }
    #bankingDetailsSuccessModal .banking-crypto-success .success-feedback-modal__close svg { width: 32px; height: 32px; }
}