#waverii-gallery-requirement {
    margin: 0 0 12px;
    padding: 11px 14px;
    border-radius: 5px;
    background: #f7f9fb;
    border: 1px solid #dce3ea;
    color: #425466;
    font-size: 13px;
    line-height: 1.5;
}

#waverii-gallery-upload-status {
    margin: 0 0 15px;
    padding: 14px 16px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

#waverii-gallery-upload-status[hidden] {
    display: none !important;
}

#waverii-gallery-upload-status.uploading {
    background: #eaf6ff;
    border: 1px solid #b8dcf5;
    color: #176087;
}

#waverii-gallery-upload-status.required {
    background: #fff8e6;
    border: 1px solid #f0d48a;
    color: #765400;
}

#waverii-gallery-upload-status.error {
    background: #fff0f0;
    border: 1px solid #f1b5b5;
    color: #b42318;
}

#submit-listing-form .waverii-gallery-blocked {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

.waverii-submit-tooltip-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 20px;
}

.waverii-submit-tooltip-wrapper .waverii-gallery-blocked {
    pointer-events: none !important;
}

.waverii-submit-tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 99999;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 5px;
    background: #202b33;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.waverii-submit-tooltip-wrapper:hover .waverii-submit-tooltip,
.waverii-submit-tooltip-wrapper:focus-within .waverii-submit-tooltip {
    opacity: 1;
    visibility: visible;
}

.waverii-submit-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 24px;
    border-width: 5px;
    border-style: solid;
    border-color: #202b33 transparent transparent transparent;
}

#media-uploader .dz-preview.dz-error {
    outline: 2px solid #b42318;
    outline-offset: 2px;
    border-radius: 5px;
}

#media-uploader .dz-error-message {
    display: block !important;
}


/* Keep the tooltip inside the viewport on narrow screens. */
@media (max-width: 600px) {
    .waverii-submit-tooltip-wrapper {
        max-width: calc(100vw - 24px);
    }

    .waverii-submit-tooltip {
        width: min(320px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
}


/* Show the actual Dropzone error reason on each failed thumbnail. */
#media-uploader .dz-preview.dz-error .dz-error-message {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
    max-width: 180px;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}