/*
 * MonBast: manual ad spacing and mobile mail layout stability
 * This file is an ADDITION to style.css, not a replacement for it.
 */

/* Prevent horizontal overflow created by the original 100% width + margins. */
.header .header-wrapper,
.header .header-wrapper .container-fluid,
.mail-wrapper,
.mail-wrapper .mail-selection,
.mail-wrapper .mail-select,
.mail-wrapper .mail-input {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.mail-wrapper {
    width: 100%;
    justify-content: center;
}

.mail-wrapper .mail-selection {
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Preserve the usable width of the real email field. */
.mail-wrapper .mail-selection .mail-select .mail-input #mainEmail {
    display: block;
    min-width: 0;
    direction: ltr;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
}

.mail-wrapper .mail-selection .mail-actions {
    gap: 10px;
}

.mail-wrapper .mail-selection .mail-actions .mail-action {
    min-width: 0;
    flex: 1 1 0;
    margin-right: 0 !important;
}

/* Reserve ad space before the responsive manual unit paints. */
.monbast-manual-ad {
    display: block;
    width: 100%;
    max-width: 728px;
    min-height: 90px;
    height: auto;
    margin: 28px auto 14px;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

.monbast-manual-ad ins.adsbygoogle {
    display: block;
    width: 100%;
}

@media (max-width: 767.98px) {
    .mail-wrapper .mail-selection {
        padding: 20px 16px;
    }

    .mail-wrapper .mail-selection .mail-select .mail-input #mainEmail {
        font-size: clamp(14px, 3.8vw, 18px);
    }

    .mail-wrapper .mail-selection .mail-actions {
        gap: 7px;
    }

    .mail-wrapper .mail-selection .mail-actions .mail-action {
        padding: 10px 4px;
    }

    .monbast-manual-ad {
        max-width: 100%;
        min-height: 250px;
        margin-top: 24px;
    }
}

@media (max-width: 359.98px) {
    .mail-wrapper .mail-selection {
        padding: 16px 10px;
    }

    .mail-wrapper .mail-selection .mail-actions {
        gap: 5px;
    }
}