/* ==========================================================
   PREMIUM INPUT LIMIT UI
========================================================== */

.input-limit-ui {
    margin-top: 8px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}


.input-limit-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-height: 18px;
}


.input-limit-counter {
    font-size: 12px;
    line-height: 1;

    font-weight: 650;

    color: #a0a4b3;

    letter-spacing: .01em;

    transition:
        color .18s ease,
        transform .18s ease;
}


.input-limit-counter.near-limit {
    color: #7b3cff;
}


.input-limit-counter.at-limit {
    color: #dc2626;

    font-weight: 750;
}


.input-limit-message {
    display: none;

    align-items: flex-start;

    gap: 11px;

    padding: 12px 14px;

    border:
        1px solid
        rgba(220, 38, 38, .16);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(254, 242, 242, .96),
            rgba(255, 247, 247, .92)
        );

    box-shadow:
        0 7px 22px
        rgba(220, 38, 38, .055);

    color: #b91c1c;

    animation:
        inputLimitFadeIn
        .18s ease;
}


.input-limit-message.visible {
    display: flex;
}


.input-limit-message-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        rgba(220, 38, 38, .09);

    font-size: 14px;

    font-weight: 900;

    color: #dc2626;
}


.input-limit-message-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.input-limit-message-title {
    font-size: 13px;

    font-weight: 800;

    color: #b91c1c;
}


.input-limit-message-text {
    font-size: 12px;

    line-height: 1.45;

    color: #c24141;
}


.input-limit-reached {
    border-color:
        rgba(220, 38, 38, .42)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(220, 38, 38, .055)
        !important;
}


@keyframes inputLimitFadeIn {

    from {
        opacity: 0;
        transform:
            translateY(-3px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}



/* ==========================================================
   DESIGN BUTTON INPUT STATE
========================================================== */


/*
   Feld n?hert sich dem Limit:
   Button bleibt vollst?ndig nutzbar,
   bekommt aber einen subtilen Hinweis.
*/
.input-limit-button-warning {
    box-shadow:
        0 0 0 3px
        rgba(123, 60, 255, .075),
        0 10px 24px
        rgba(123, 60, 255, .10)
        !important;

    transition:
        box-shadow .18s ease,
        transform .18s ease,
        background .18s ease;
}


/*
   Mindestens ein Feld ist rot:
   Design darf nicht abgeschickt werden.
*/
.input-limit-button-locked,
.input-limit-button-locked:hover,
.input-limit-button-locked:active {
    cursor:
        not-allowed
        !important;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #dc2626
        )
        !important;

    border-color:
        rgba(220, 38, 38, .35)
        !important;

    color:
        #ffffff
        !important;

    box-shadow:
        0 10px 24px
        rgba(220, 38, 38, .16)
        !important;

    transform:
        none
        !important;

    opacity:
        1
        !important;
}


.input-limit-button-locked:disabled {
    opacity:
        1
        !important;
}


.input-limit-lock-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-right:
        7px;

    font-size:
        .92em;

    transform:
        translateY(-1px);
}



/* ==========================================================
   REQUIRED FIELD PREMIUM STATE
========================================================== */

.input-required-missing {
    border-color:
        rgba(220, 38, 38, .42)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(220, 38, 38, .055)
        !important;
}


/*
   Gesperrter Button:
   bewusst deutlich rot.
*/
.input-limit-button-locked,
.input-limit-button-locked:hover,
.input-limit-button-locked:active,
.input-limit-button-locked:disabled {
    cursor:
        not-allowed
        !important;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #dc2626
        )
        !important;

    border-color:
        rgba(220, 38, 38, .40)
        !important;

    color:
        #fff
        !important;

    box-shadow:
        0 10px 28px
        rgba(220, 38, 38, .18)
        !important;

    opacity:
        1
        !important;

    filter:
        none
        !important;

    transform:
        none
        !important;
}


.input-limit-lock-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-right:
        8px;

    font-size:
        .95em;
}


/*
   Nur nahe am Limit:
   dezenter violetter Hinweis.
*/
.input-limit-button-warning {
    box-shadow:
        0 0 0 3px
        rgba(123, 60, 255, .07),
        0 10px 28px
        rgba(123, 60, 255, .11)
        !important;
}



/* ==========================================================
   FINAL DESIGN VALIDATION STATES
========================================================== */


/* Leichtes violettes Signal */
.input-near-limit {
    border-color:
        rgba(123, 60, 255, .38)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(123, 60, 255, .045)
        !important;
}


/* Pflichtfeld / Limit */
.input-required-missing,
.input-limit-reached {
    border-color:
        rgba(239, 68, 68, .55)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(239, 68, 68, .055)
        !important;
}


/* ----------------------------------------------------------
   BUTTON: NAHE LIMIT
---------------------------------------------------------- */

.validation-button-near {

    box-shadow:
        0 0 0 4px
        rgba(123, 60, 255, .07),
        0 12px 30px
        rgba(123, 60, 255, .14)
        !important;

}


/* ----------------------------------------------------------
   BUTTON: GESPERRT
---------------------------------------------------------- */

.validation-button-locked,
.validation-button-locked:hover,
.validation-button-locked:focus,
.validation-button-locked:active,
.validation-button-locked:disabled {

    background:
        linear-gradient(
            135deg,
            #f05252,
            #dc2626
        )
        !important;

    border-color:
        rgba(185, 28, 28, .25)
        !important;

    color:
        #ffffff
        !important;

    opacity:
        1
        !important;

    cursor:
        not-allowed
        !important;

    transform:
        none
        !important;

    box-shadow:
        0 10px 28px
        rgba(220, 38, 38, .20)
        !important;

    filter:
        none
        !important;
}


.validation-lock-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-right:
        8px;

    vertical-align:
        middle;

}


.validation-lock-icon svg {

    display:
        block;

}



/* ==========================================================
   FINAL LOCK BUTTON OVERRIDE V4
========================================================== */

.validation-button-near {

    box-shadow:
        0 0 0 4px
        rgba(123, 60, 255, .09),
        0 14px 30px
        rgba(123, 60, 255, .15)
        !important;

}


.validation-button-locked,
.validation-button-locked:hover,
.validation-button-locked:focus,
.validation-button-locked:active,
.validation-button-locked:disabled {

    background:
        linear-gradient(
            135deg,
            #f04b4b 0%,
            #dc2626 100%
        )
        !important;

    background-color:
        #dc2626
        !important;

    border:
        1px solid
        rgba(185, 28, 28, .32)
        !important;

    color:
        white
        !important;

    opacity:
        1
        !important;

    filter:
        none
        !important;

    cursor:
        not-allowed
        !important;

    pointer-events:
        none
        !important;

    box-shadow:
        0 12px 28px
        rgba(220, 38, 38, .22)
        !important;

    transform:
        none
        !important;

}


.validation-button-locked * {

    color:
        white
        !important;

}


.validation-lock-icon {

    display:
        inline-flex
        !important;

    align-items:
        center;

    justify-content:
        center;

    margin-right:
        9px;

}


.validation-lock-icon svg {

    display:
        block;

    fill:
        currentColor;

}