/* Confirmation popups (#customConfirmModal: "Free Bottle Added!" and the
   others on the checkout and sales pages) on phones and tablets. The long
   text pushed the button below the screen and the dark overlay couldn't
   scroll, so customers were stuck (5 Oct 2026, a UK customer). The box now
   fits the screen, its text scrolls inside it, and the buttons stay in view.
   ID selectors so these win over each page's own .custom-modal rules. */
#customConfirmModal.custom-modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#customConfirmModal .custom-modal-content {
    display: flex;
    flex-direction: column;
    margin: 16px auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}

#customConfirmModal .custom-modal-header,
#customConfirmModal .custom-modal-actions {
    flex: 0 0 auto;
}

#customConfirmModal .custom-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    #customConfirmModal .custom-modal-content {
        width: calc(100% - 24px);
    }

    #customConfirmModal .custom-modal-header {
        padding: 14px 16px;
    }

    #customConfirmModal .custom-modal-header h3 {
        font-size: 20px;
    }

    #customConfirmModal .custom-modal-body {
        padding: 16px;
    }

    #customConfirmModal .custom-modal-body p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    #customConfirmModal .custom-modal-actions {
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px 16px;
    }
}