/* =========================================================
   GLOBAL NOTIFICATION
========================================================= */

.notification {
    position: fixed;

    top: 25px;
    right: 30px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 20px;

    background-color: #ffef8a;
    color: #78aadd;

    border-radius: 15px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.15);

    font-size: 14px;
    font-weight: 600;

    z-index: 99999;

    animation:
        notificationSlideIn 0.4s ease,
        notificationFadeOut 0.4s ease 2.6s forwards;
}


/* =========================================================
   NOTIFICATION ICON
========================================================= */

.notification-icon {
    font-size: 20px;

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


/* =========================================================
   NOTIFICATION TEXT
========================================================= */

.notification-message {
    line-height: 1.4;
}


/* =========================================================
   SUCCESS
   Style utama — sama seperti Favorite Notification
========================================================= */

.notification-success {
    background-color: #ffef8a;
    color: #78aadd;
}


/* =========================================================
   ERROR
========================================================= */

.notification-error {
    background-color: #f5dede;
    color: #a85c5c;
}


/* =========================================================
   WARNING
========================================================= */

.notification-warning {
    background-color: #ffef8a;
    color: #78aadd;
}


/* =========================================================
   INFO
========================================================= */

.notification-info {
    background-color: #ffffe8;
    color: #78aadd;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.notification-close {
    border: none;

    background: transparent;

    color: inherit;

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;

    padding: 0;
    margin-left: 5px;

    line-height: 1;

    transition: transform 0.2s ease;
}

.notification-close:hover {
    transform: scale(1.15);
}


/* =========================================================
   NOTIFICATION ANIMATION
========================================================= */

@keyframes notificationSlideIn {

    from {
        opacity: 0;

        transform:
            translateX(40px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes notificationFadeOut {

    from {
        opacity: 1;

        transform:
            translateX(0);
    }

    to {
        opacity: 0;

        transform:
            translateX(40px);
    }

}


/* =========================================================
   MANUAL HIDE
========================================================= */

.notification.hide {
    animation:
        notificationFadeOut 0.4s ease forwards;
}
/* =========================================================
   CONFIRM MODAL
========================================================= */

.notification-overlay {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.45);

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

    z-index: 100000;
}


/* =========================
   CONFIRM BOX
========================= */

.notification-confirm {
    width: 380px;

    background-color: #ffffe8;

    border-radius: 20px;

    padding: 25px 28px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.2);

    text-align: center;

    animation: confirmScaleIn 0.25s ease;
}


/* =========================
   CONFIRM ICON
========================= */

.confirm-icon {
    width: 55px;
    height: 55px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background-color: #ffef8a;

    color: #78aadd;

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

    font-size: 25px;
    font-weight: 700;
}


/* =========================
   CONFIRM TITLE
========================= */

.confirm-title {
    color: #78aadd;

    font-size: 21px;
    font-weight: 700;

    margin-bottom: 8px;
}


/* =========================
   CONFIRM MESSAGE
========================= */

.confirm-message {
    color: #555;

    font-size: 15px;

    line-height: 1.5;

    margin-bottom: 22px;
}


/* =========================
   CONFIRM BUTTON AREA
========================= */

.confirm-buttons {
    display: flex;

    justify-content: center;

    gap: 10px;
}


/* =========================
   BUTTON
========================= */

.confirm-button {
    border: none;

    padding: 10px 22px;

    border-radius: 22px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.confirm-button:hover {
    transform: scale(1.05);
}


/* =========================
   CANCEL
========================= */

.confirm-cancel {
    background-color: #ffef8a;

    color: #78aadd;
}


/* =========================
   CONFIRM / DELETE
========================= */

.confirm-ok {
    background-color: #78aadd;

    color: #ffffe8;
}


.confirm-button:hover {
    opacity: 0.9;
}


/* =========================
   ANIMATION
========================= */

@keyframes confirmScaleIn {

    from {
        opacity: 0;

        transform: scale(0.9);
    }

    to {
        opacity: 1;

        transform: scale(1);
    }

}

.notification-confirm .confirm-button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}