/* Ajustes isolados do modal de depósito; não afetam a grade de jogos. */
#modalElDeposit .full-screen {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

#modalElDeposit {
    z-index: 10001 !important;
    align-items: flex-start !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    scrollbar-width: thin;
    scrollbar-color: var(--ci-primary-color) rgba(255, 255, 255, 0.12);
}

/* O painel da carteira usa z-index alto; os formulários financeiros devem
   sempre abrir em primeiro plano e permitir rolagem independente no mobile. */
#modalElSaque {
    z-index: 10001 !important;
    align-items: flex-start !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
}

#modalElSaque > .relative {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh + 1px) !important;
    max-height: none !important;
    margin-top: 0 !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
}

#modalElDeposit::-webkit-scrollbar {
    width: 6px !important;
}

#modalElDeposit::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px;
}

#modalElDeposit::-webkit-scrollbar-thumb {
    background: var(--ci-primary-color) !important;
    border-radius: 999px;
}

#modalElDeposit > .relative {
    margin-top: 0 !important;
    padding-bottom: 24px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100dvh + 1px) !important;
    overflow: visible !important;
}

#modalElDeposit > .relative > div {
    min-height: max-content !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#modalElDeposit .form-box,
#modalElDeposit .form-box > div,
#modalElDeposit .form-box .mt-5,
#modalElDeposit .form-box .ui-button-blue {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#modalElDeposit .input-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#modalElDeposit img.bonus-icon {
    display: block !important;
    position: static !important;
    top: auto !important;
    width: min(100%, 640px) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    margin: 8px auto 14px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Depois que o PIX é gerado, libera o espaço do banner para o código e contador. */
#modalElDeposit:has(.dashed-container) img.bonus-icon {
    display: none !important;
}

#modalElDeposit:has(.dashed-container) .full-screen > div {
    margin-top: 0 !important;
}

#modalElDeposit .item-selected,
#modalElDeposit .item-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

#modalElDeposit .item-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#modalElDeposit .item-list .item {
    width: 100% !important;
    min-width: 0 !important;
    height: 68px !important;
    margin: 0 !important;
}

#modalElDeposit .item-list .content {
    margin-top: 20px !important;
}

#modalElDeposit .item-list .amount {
    margin-bottom: 0 !important;
    font-size: clamp(18px, 4.8vw, 25px) !important;
    line-height: 1.1 !important;
}

#modalElDeposit .item-list .bonus,
#modalElDeposit label.inline-flex.items-center.mb-5.cursor-pointer {
    display: none !important;
}

/* QR Code: o componente nasce com 300x300px. Mantemos uma medida previsivel
   e altura automatica para que nunca seja cortado pelo modal. */
#modalElDeposit .text-container {
    min-height: 0 !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#modalElDeposit .text-container > div,
#modalElDeposit .text-container > div > div {
    max-width: 100% !important;
}

#modalElDeposit .text-container img,
#modalElDeposit .text-container canvas,
#modalElDeposit .text-container svg {
    display: block !important;
    width: min(260px, 100%) !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto 20px !important;
    object-fit: contain !important;
}

@media (max-width: 640px) {
    #modalElDeposit img.bonus-icon {
        max-height: 140px !important;
        margin-bottom: 10px !important;
    }

    #modalElDeposit .item-list {
        gap: 6px !important;
    }

    #modalElDeposit .item-list .header {
        padding-inline: 2px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    #modalElDeposit:has(.dashed-container) .text-container img,
    #modalElDeposit:has(.dashed-container) .text-container canvas,
    #modalElDeposit:has(.dashed-container) .text-container svg {
        width: 160px !important;
        height: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        max-height: 160px !important;
        margin-bottom: 24px !important;
    }
}