/*============ NOTICES =================*/
:root {
    --notice-padding-20: clamp(10px, calc(1vw * 1.5), 20px);
    --notice-gap-10: 10px;
}

.notice-wrapper {
    position: fixed;
    bottom: var(--notice-padding-20);
    right: var(--notice-padding-20);
    width: calc(100% - (var(--notice-padding-20) * 2) );
    max-width: 400px;
    height: auto;
    max-height: 70vh;
    z-index: 9999;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: var(--notice-gap-10);

    pointer-events: none;

    @media(max-width: 1000px) {
        bottom: calc(var(--notice-padding-20) + 70px);
        max-height: calc(100vh - ( (var(--notice-padding-20) + 70px) * 2 ));
        overflow-y: auto;
    }
}
.notice-item {
    position: relative;
    width: 100%;
    height: fit-content;
    padding: var(--notice-padding-20);
    color: #ffffff;
    opacity: 0;
    transition: all 0.5s ease;

    -webkit-box-shadow: 0px 0px 20px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 20px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 20px 0px rgba(34, 60, 80, 0.2);

    &.active {
        opacity: 1;
    }

    &::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: #2D2D2D;
        opacity: 0.85;
        border-radius: 10px;
        z-index: -1;
    }
}


/*============ INPUTS =================*/
.checkout-input,
.cart-input,
.grampus-input {
    position: relative;
    display: block;
    height: fit-content;
    width: 100%;
    overflow: hidden;

    & input,
    & textarea {
        position: relative;
        width: 100%;
        height: fit-content;

        padding: calc(var(--Padding-20) + 3px) calc(var(--Padding-30) - 3px);
        background: var(--bg-p-primary);
        border: solid 1px var(--bg-p-stroke);
        outline: none;
        border-radius: 35px;
    }

    & textarea {
        height: 140px;
        resize: none;
    }

    & span {
        position: absolute;
        top: calc(var(--Padding-20) + 3px);
        left: calc(var(--Padding-30) - 3px);
        max-width: calc(100% - ( (var(--Padding-30) - 3px) * 2 ));
        white-space: nowrap;

        pointer-events: none;

        will-change: auto;
    }

    & input, & textarea,
    & input::placeholder, & textarea::placeholder,
    & span {
        color: var(--tx-p-secondary);
        transition: var(--Transition);
    }

    & input:hover, & textarea:hover,
    & input:focus, & textarea:focus,
    & input:focus-visible, & textarea:focus-visible,
    & input:focus-within, & textarea:focus-within,
    & input:active, & textarea:active,
    & input.active, & textarea.active {
        background: var(--bg-p-secondary);
        border-color: var(--bg-p-secondary);

        padding-top: calc(var(--Padding-20) + 9px);
        padding-bottom: calc(var(--Padding-20) - 3px);

        &,
        &::placeholder {
            color: var(--tx-p-head);
        }

        &+span {
            top: calc(var(--Padding-20) - 5px);
            font-size: var(--Font-size-p4);
            color: var(--tx-p-secondary);
        }
    }

    & input.error, & textarea.error {
        border-color: var(--Red);

        &,
        &::placeholder,
        &+span {
            color: var(--Red);
        }
    }
}