:root {
    --tr: all 0.5s ease 0s;
    --ch1: #05478a;
    --ch2: #0070e0;
    --cs1: #005e38;
    --cs2: #03a65a;
    --cw1: #c24914;
    --cw2: #fc8621;
    --ce1: #851d41;
    --ce2: #db3056;
}
@property --bg-help {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -10%;
}

@property --bg-success {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 145%;
}

@property --bg-warning {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -55%;
}

@property --bg-error {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 112%;
}

@property --bsc {
    syntax: '<color>';
    inherits: false;
    initial-value: red;
}
.toast-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--tr);
    position: absolute;
    padding: 0 1rem;
    height: 100%;
}
.toast-item {
    max-height: 25rem;
    transition: all 0.5s ease 0s;
    position: relative;
}
@keyframes show-toast {
    0%, 50%, 100% { max-height: 0; opacity: 0; }
    10%, 25% { max-height: 15rem; opacity: 1; }
}
.toast {
    background: #fff;
    color: #f5f5f5;
    padding: 1rem 2rem 1rem 3rem;
    border-radius: 1rem !important;
    position: relative;
    font-weight: 300;
    margin: 1rem 0;
    text-align: center;
    max-width: 100% !important;
    width: 100% !important;
    transition: all 0.5s ease 0s;
    border: 0.15rem solid #fff2;
    box-shadow: 0 0 1.5rem 0 #1a1f4360;
    opacity: 1 !important;
}

.toast:before {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: calc(100% - 1.5rem);
    top: 0.75rem;
    left: 0.5rem;
    z-index: 0;
    border-radius: 1rem;
    background: var(--clr);
}
.toast:after {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: calc(100% - 1.5rem);
    top: 0.75rem;
    right: 0.5rem;
    z-index: 0;
    border-radius: 1rem;
    background: var(--clr);
}
.toast h3 {
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.35rem;
    font-weight: 600;
    position: relative;
    color: var(--clr);
}

.toast p {
    position: relative;
    font-size: 0.95rem;
    z-index: 1;
    margin: 0.25rem 0 0;
    color: #595959;
    line-height: 1.3rem;
}

.toast-item.success {
    animation-delay: 2s;
}

.toast-item.warning {
    animation-delay: 1s;
}

.toast-item.error {
    animation-delay: 0s;
}

.toast.help {
    --bg: #05478a;
    --clr: #0070e0;
}
.icon-help:after {
    content: "?";
}

.toast.success {
    --bg: #005e38;
    --clr: #03a65a;
}

.icon-success:after {
    content: "L";
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 0.35rem;
    transform: rotateY(180deg) rotate(-38deg);
    text-indent: 0.1rem;
}

.toast.warning {
    --bg: #c24914;
    --clr: #fc8621;
}

.icon-warning:after {
    content: "!";
    font-weight: bold;
}

.toast.error {
    --bg: #851d41;
    --clr: #db3056;
}

.icon-error:after {
    content: "+";
    font-size: 2.85rem;
    line-height: 1.2rem;
    transform: rotate(45deg);
}
@keyframes fadeOutInitial {
    0% { opacity: 1; }
    50% { opacity: 1; } /* Maintain opacity for 5 seconds */
    100% { opacity: 0; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.toast-item {
    /* Your existing styles */
    animation: fadeOutInitial 10s forwards;
}

/* Apply fade-out animation after initial delay */
.toast-item.fade-out {
    animation: fadeOut 5s forwards;
}

.toast a {
    color: var(--clr);
}

.toast a:hover {
    color: var(--bg);
}

/*** ICONS ***/

.toast-icons {
    background: #fff;
    padding: 1rem 1rem 1.25rem 1rem;
    display: flex;
    justify-content: space-around;
    border-radius: 1rem;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
    border: 0.15rem solid #fff1;
    box-shadow: 0 0 1.5rem 0 #1a1f4340;
}

.toast-icons:before {
    position: absolute;
    width: calc(100% + 0.3rem);
    height: calc(100% + 0.25rem);
    --bg-help: 45%;
    --bg-success: 45%;
    --bg-warning: 45%;
    --bg-error: 45%;
    --bsc: #fff0;
    background:
        radial-gradient(circle at 14% var(--bg-help), var(--ch1), #fff0 1.5rem), radial-gradient(circle at 38% var(--bg-success), var(--cs1), #fff0 1.5rem), radial-gradient(circle at 62% var(--bg-warning), var(--cw1), #fff0 1.5rem), radial-gradient(circle at 86% var(--bg-error), var(--ce1), #fff0 1.5rem);
    content: "";
    bottom: -0.15rem;
    border-radius: 1rem;
    z-index: 0;
    transition: --bg-help 0.5s ease 0s, --bg-success 0.5s ease 0s, --bg-warning 0.5s ease 0s, --bg-error 0.5s ease 0s, --bsc 0.5s ease 0s;
    box-shadow: 0 0 1.5rem 0 #1a1f4320;
}

.toast-icons:has(label[for=t-help]:hover):before {
    --bg-help: 53%;
    --bsc: #0070e0;
}
.toast-icons:has(label[for=t-success]:hover):before {
    --bg-success: 53%;
    --bsc: #03a65a;
}
.toast-icons:has(label[for=t-warning]:hover):before {
    --bg-warning: 53%;
    --bsc: #fc8621;
}
.toast-icons:has(label[for=t-error]:hover):before {
    --bg-error: 53%;
    --bsc: #db3056;
}

.toast-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    position: relative;
    background: radial-gradient(circle at 50% 50%, var(--clr) 1.25rem, var(--brd) calc(1.25rem + 1px) 100%);
}



.toast-icon:after {
    font-size: 1.75rem;
}
.icon-success:after {
    font-size: 1.5rem;
    padding-bottom: 0.25rem;
}
.icon-error:after {
    font-size: 2.85rem;
    line-height: 2rem;
    font-weight: 500;
    padding-top: 0.25rem;
    max-height: 2rem;
}


.icon-help,
.toast-item.help {
    --clr: #0070e0;
    --brd: #0070e040;
}

.icon-success,
.toast-item.success {
    --clr: #03a65a;
    --brd: #03a65a40;
}

.icon-warning,
.toast-item.warning {
    --clr: #fc8621;
    --brd: #fc862140;
}

.icon-error,
.toast-item.error {
    --clr: #db3056;
    --brd: #db305640;
}


#t-help:checked ~ .toast-panel .toast-item.help,
#t-success:checked ~ .toast-panel .toast-item.success,
#t-warning:checked ~ .toast-panel .toast-item.warning,
#t-error:checked ~ .toast-panel .toast-item.error {
    max-height: 0;
    opacity: 0;
}

input[type=checkbox] {
    display: none;
}