/* Modal banners for deposit, withdrawal, and referral */

/* Deposit modal banner */
.modal[class*="deposit"] .modal-header::before,
.modal-content[class*="deposit"]::before,
.modal[class*="wallet-deposit"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 180px;
    background-image: url('/images/banners/banner-deposito.webp');
    background-size: cover;
    background-position: center;
    margin-bottom: 16px;
    border-radius: 8px 8px 0 0;
}

/* Withdrawal/Saque modal banner */
.modal[class*="withdraw"] .modal-header::before,
.modal-content[class*="withdraw"]::before,
.modal[class*="saque"]::before,
.modal[class*="wallet-withdraw"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 180px;
    background-image: url('/images/banners/banner-saque.webp');
    background-size: cover;
    background-position: center;
    margin-bottom: 16px;
    border-radius: 8px 8px 0 0;
}

/* Referral/Indicacao modal banner */
.modal[class*="referral"] .modal-header::before,
.modal-content[class*="referral"]::before,
.modal[class*="indicacao"]::before,
.modal[class*="indicar"]::before,
.modal[class*="affiliate"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 180px;
    background-image: url('/images/banners/banner-indicar.webp');
    background-size: cover;
    background-position: center;
    margin-bottom: 16px;
    border-radius: 8px 8px 0 0;
}

/* Generic modal banner styling */
[class*="modal"] > div:first-child::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Overlay modals - deposit, withdraw, referral */
.overlay .modal-panel::before,
.modal-panel[class*="deposit"]::before,
.modal-panel[class*="withdraw"]::before,
.modal-panel[class*="referral"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
}

.modal-panel[class*="deposit"]::before {
    background-image: url('/images/banners/banner-deposito.webp');
}

.modal-panel[class*="withdraw"]::before,
.modal-panel[class*="saque"]::before {
    background-image: url('/images/banners/banner-saque.webp');
}

.modal-panel[class*="referral"]::before,
.modal-panel[class*="indicacao"]::before,
.modal-panel[class*="indicar"]::before,
.modal-panel[class*="affiliate"]::before {
    background-image: url('/images/banners/banner-indicar.webp');
}