/* ==================== NOTIFY POPUP SYSTEM ==================== */

.notify-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.notify-overlay.active {
    opacity: 1;
    visibility: visible;
}

.notify-box {
    background: #fff;
    border-radius: 16px;
    width: 360px;
    max-width: 90vw;
    padding: 36px 32px 28px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    transform: scale(0.85) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.notify-overlay.active .notify-box {
    transform: scale(1) translateY(0);
}

/* Icon container */
.notify-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    position: relative;
}

/* ===== Animated Checkmark ===== */
.notify-icon-success {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #4caf50;
    stroke-miterlimit: 10;
}

.notify-icon-success .circle {
    fill: none;
    stroke: #4caf50;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-linecap: round;
}

.notify-overlay.active .notify-icon-success .circle {
    animation: notifyStroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards;
}

.notify-icon-success .check {
    fill: none;
    stroke: #4caf50;
    stroke-width: 3;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50% 50%;
}

.notify-overlay.active .notify-icon-success .check {
    animation: notifyStroke 0.35s cubic-bezier(0.65,0,0.45,1) 0.4s forwards;
}

/* ===== Animated X Mark ===== */
.notify-icon-error {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #e53935;
    stroke-miterlimit: 10;
}

.notify-icon-error .circle {
    fill: none;
    stroke: #e53935;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-linecap: round;
}

.notify-overlay.active .notify-icon-error .circle {
    animation: notifyStroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards;
}

.notify-icon-error .x-line {
    fill: none;
    stroke: #e53935;
    stroke-width: 3;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    stroke-linecap: round;
}

.notify-overlay.active .notify-icon-error .x-line:nth-child(2) {
    animation: notifyStroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards;
}

.notify-overlay.active .notify-icon-error .x-line:nth-child(3) {
    animation: notifyStroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.55s forwards;
}

/* ===== Warning Icon ===== */
.notify-icon-warning {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #333;
    stroke-miterlimit: 10;
}

.notify-icon-warning .circle {
    fill: none;
    stroke: #333;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-linecap: round;
}

.notify-overlay.active .notify-icon-warning .circle {
    animation: notifyStroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards;
}

.notify-icon-warning .excl-line {
    fill: none;
    stroke: #333;
    stroke-width: 3;
    stroke-dasharray: 18;
    stroke-dashoffset: 18;
    stroke-linecap: round;
}

.notify-icon-warning .excl-dot {
    fill: #333;
    opacity: 0;
}

.notify-overlay.active .notify-icon-warning .excl-line {
    animation: notifyStroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards;
}

.notify-overlay.active .notify-icon-warning .excl-dot {
    animation: notifyDotPop 0.25s ease 0.65s forwards;
}

/* ===== Progress / Info ===== */
.notify-icon-progress {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: block;
}

.notify-icon-progress .circle-bg {
    fill: none;
    stroke: #e0e7ef;
    stroke-width: 2;
}

.notify-icon-progress .info-i-line {
    fill: none;
    stroke: #42a5f5;
    stroke-width: 3;
    stroke-linecap: round;
}

.notify-icon-progress .info-i-dot {
    fill: #42a5f5;
}

.notify-spinner {
    width: 36px;
    height: 36px;
    margin: 12px auto 0;
    border: 3px solid #f0f0f0;
    border-top-color: #FF8C00;
    border-radius: 50%;
    animation: notifySpin 0.7s linear infinite;
}

/* ===== Text ===== */
.notify-message {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* ===== Buttons ===== */
.notify-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.notify-btn {
    padding: 10px 36px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.15s, filter 0.15s;
}

.notify-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.notify-btn:active {
    transform: translateY(0);
}

.notify-btn-primary {
    background: #FF8C00;
    color: #fff;
}

.notify-btn-cancel {
    background: #f0f0f0;
    color: #555;
}

.notify-btn-cancel:hover {
    background: #e4e4e4;
}

/* ===== Animations ===== */
@keyframes notifyStroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes notifyDotPop {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes notifySpin {
    to { transform: rotate(360deg); }
}

/* ===== Close transition ===== */
.notify-overlay.closing {
    opacity: 0;
}

.notify-overlay.closing .notify-box {
    transform: scale(0.9) translateY(10px);
}