﻿/* =========================================================
   Validation popup
   ========================================================= */

.w6-validation-popup-host {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

    .w6-validation-popup-host .wiso_popup__inner-html-content {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

.w6-validation-popup {
    position: relative;
    min-width: 280px;
    max-width: 360px;
    padding: 14px 16px 14px 42px;
    box-sizing: border-box;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient( 180deg, rgba(49,55,72,0.98) 0%, rgba(34,38,50,0.98) 100% );
    border: 1px solid rgba(255, 86, 86, 0.96);
    box-shadow: 0 10px 28px rgba(0,0,0,0.48), 0 0 0 1px rgba(255, 86, 86, 0.20), 0 0 18px rgba(255, 70, 70, 0.22), inset 0 1px 0 rgba(255,255,255,0.05);
    color: #f4f7fb;
    font-size: 12px;
    line-height: 1.45;
    font-family: inherit;
    animation: w6ValidationFadeIn 0.18s ease-out, w6ValidationPulse 1.8s ease-in-out infinite;
}

    .w6-validation-popup::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #ff9d9d 0%, #ff5757 100%);
        box-shadow: 0 0 12px rgba(255, 80, 80, 0.45);
    }

    .w6-validation-popup::after {
        content: "⚠";
        position: absolute;
        left: 14px;
        top: 13px;
        font-size: 14px;
        line-height: 1;
        color: #ffb0b0;
        text-shadow: 0 0 8px rgba(255, 90, 90, 0.75), 0 0 16px rgba(255, 60, 60, 0.25);
    }

.w6-validation-popup__title {
    display: block;
    margin: 0 0 4px 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2px;
    color: #ffbdbd;
}

.w6-validation-popup__text {
    display: block;
    margin: 0;
    color: #eef3f8;
    opacity: 0.97;
    word-break: break-word;
    white-space: normal;
}

/* =========================================================
   Field validation styles
   - nur Container highlighten
   - vorhandene Spezial-CSS nicht überschreiben
   ========================================================= */

.w6-validate-error .wiso_input__container,
.w6-validate-error .wiso_combobox-input-box,
.w6-validate-error .wiso_select__container {
    border-color: rgba(255, 86, 86, 0.96) !important;
    box-shadow: 0 0 0 1px rgba(255, 86, 86, 0.20), 0 0 10px rgba(255, 70, 70, 0.22) !important;
}

.w6-validate-success .wiso_input__container,
.w6-validate-success .wiso_combobox-input-box,
.w6-validate-success .wiso_select__container {
    border-color: rgba(48, 201, 120, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(48, 201, 120, 0.16), 0 0 10px rgba(48, 201, 120, 0.14) !important;
}

@keyframes w6ValidationFadeIn {
    from {
        opacity: 0;
        transform: translateY(-3px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes w6ValidationPulse {
    0% {
        box-shadow: 0 10px 28px rgba(0,0,0,0.48), 0 0 0 1px rgba(255, 86, 86, 0.20), 0 0 12px rgba(255, 70, 70, 0.16), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    50% {
        box-shadow: 0 10px 28px rgba(0,0,0,0.52), 0 0 0 1px rgba(255, 86, 86, 0.30), 0 0 22px rgba(255, 70, 70, 0.28), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    100% {
        box-shadow: 0 10px 28px rgba(0,0,0,0.48), 0 0 0 1px rgba(255, 86, 86, 0.20), 0 0 12px rgba(255, 70, 70, 0.16), inset 0 1px 0 rgba(255,255,255,0.05);
    }
}
