body{

    font-family:"Plus Jakarta Sans",sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.5;

    font-size:16px;

}

h1,
h2,
h3,
h4,
h5,
h6{

    font-weight:700;

    color:var(--text);

}

p{

    color:var(--muted);

}

button{

    cursor:pointer;

    border:none;

    background:none;

}

input,
textarea,
select{

    outline:none;

}

.alert{

    margin-bottom:24px;

    padding:16px 20px;

    border-radius:12px;

    font-weight:600;

}

.alert-success{

    background:#DCFCE7;

    color:#166534;

    border:1px solid #BBF7D0;

}

.alert-error{

    background:#FEE2E2;

    color:#991B1B;

    border:1px solid #FECACA;

}

/* ==========================================================
   FLASH NOTIFICATION POPUP
   ========================================================== */

.flash-popup {
    position: fixed;

    top: 24px;
    right: 24px;

    z-index: 99999;

    display: flex;
    align-items: center;

    width: min(380px, calc(100vw - 32px));

    padding: 14px 15px;

    gap: 12px;

    border: 1px solid #e2e8f0;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(15, 23, 42, .15);

    animation:
        flashPopupIn .3s ease;
}

.flash-popup-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius: 11px;

    font-size: 17px;
    font-weight: 800;
}

.flash-popup-content {
    flex: 1;
    min-width: 0;
}

.flash-popup-content strong {
    display: block;

    margin-bottom: 2px;

    font-size: 12px;
    font-weight: 750;

    color: #0f172a;
}

.flash-popup-content p {
    margin: 0;

    font-size: 11px;
    line-height: 1.45;

    color: #64748b;
}

.flash-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;

    border-radius: 8px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;
}

.flash-popup-close:hover {
    background: #e2e8f0;
}


/* SUCCESS */

.flash-popup.flash-success .flash-popup-icon {
    background: #dcfce7;
    color: #16a34a;
}


/* ERROR */

.flash-popup.flash-error .flash-popup-icon {
    background: #fee2e2;
    color: #dc2626;
}


/* WARNING */

.flash-popup.flash-warning .flash-popup-icon {
    background: #fef3c7;
    color: #d97706;
}


/* INFO */

.flash-popup.flash-info .flash-popup-icon {
    background: #dbeafe;
    color: #2563eb;
}


@keyframes flashPopupIn {

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

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

}


/* MOBILE */

@media (max-width: 768px) {

    .flash-popup {
        top: 14px;
        right: 14px;
        left: 14px;

        width: auto;

        padding: 12px;
    }

}