:root{

--primary:#ff6a00;
--primary-dark:#ff4500;

--success:#16a34a;
--danger:#dc2626;

--dark:#0f172a;

--text:#475569;

--white:#ffffff;

--radius:24px;

--shadow:
0 25px 80px rgba(0,0,0,.25);

}

/* =========================================================
BODY LOCK
========================================================= */

body.modal-open{

overflow:hidden;

}

/* =========================================================
TOAST
========================================================= */

#toast{

position:fixed;

top:50%;

left:50%;

transform:
translate(-50%,-50%)
scale(.92);

width:520px;

max-width:92vw;

min-height:120px;

background:#ffffff;

border-radius:24px;

padding:22px;

box-shadow:var(--shadow);

display:flex;

align-items:flex-start;

gap:16px;

z-index:999999;

opacity:0;

visibility:hidden;

transition:
all .25s ease;

}

/* SHOW */

#toast.show{

opacity:1;

visibility:visible;

transform:
translate(-50%,-50%)
scale(1);

}

/* ICON */

#toastIcon{

width:60px;

height:60px;

min-width:60px;

border-radius:50%;

background:
linear-gradient(
    135deg,
    #ff6a00,
    #ff9d00
);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:28px;

font-weight:700;

}

/* CONTENT */

.toast-body{

flex:1;

}

#toastTitle{

font-size:22px;

font-weight:800;

color:var(--dark);

margin-bottom:8px;

}

#toastMessage{

font-size:15px;

line-height:1.7;

color:var(--text);

}

/* CLOSE */

#toastClose{

width:38px;

height:38px;

border:none;

border-radius:50%;

background:#f3f4f6;

color:#111827;

cursor:pointer;

font-size:24px;

font-weight:700;

transition:.25s;

}

#toastClose{

background:#e5e7eb;

}

/* =========================================================
MODAL BACKDROP
========================================================= */

.notification-modal{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

padding:20px;

background:
rgba(0,0,0,.70);

backdrop-filter:blur(8px);

z-index:999998;

}

.notification-modal.show{

display:flex;

}

/* =========================================================
CARD
========================================================= */

.notification-card{

width:100%;

max-width:550px;

background:#fff;

border-radius:30px;

padding:36px 30px;

text-align:center;

box-shadow:var(--shadow);

animation:popupShow .30s ease;

}

@keyframes popupShow{

from{

    opacity:0;

    transform:
    translateY(20px)
    scale(.95);
}

to{

    opacity:1;

    transform:
    translateY(0)
    scale(1);
}

}

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

.notification-icon{

width:95px;

height:95px;

margin:0 auto 20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

}

.notification-success
.notification-icon{

background:#ecfdf3;

color:var(--success);

}

.notification-error
.notification-icon{

background:#fef2f2;

color:var(--danger);

}

/* =========================================================
HEADING
========================================================= */

.notification-card h2{

margin:0 0 12px;

font-size:34px;

font-weight:800;

color:var(--dark);

}

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

.notification-card p{

margin:0;

font-size:17px;

line-height:1.8;

color:var(--text);

}

/* =========================================================
REFERENCE
========================================================= */

.notification-reference{

margin-top:16px;

color:var(--primary);

font-size:15px;

font-weight:700;

}

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

.notification-extra{

margin-top:20px;

color:#64748b;

font-size:15px;

line-height:1.8;

}

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

.notification-whatsapp{

display:flex;

justify-content:center;

align-items:center;

width:100%;

margin-top:24px;

padding:16px;

border-radius:16px;

background:#25D366;

color:#fff;

text-decoration:none;

font-size:16px;

font-weight:700;

transition:.25s;

}

.notification-whatsapp{

transform:translateY(-2px);

background:#1ebe5d;

}

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

.notification-close{

display:block;

width:220px;

margin:18px auto 0;

padding:15px;

border:none;

border-radius:16px;

background:#0f172a;

color:#fff;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.notification-close{

transform:translateY(-2px);

background:#000;

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:768px){

#toast{

    width:92vw;

    padding:18px;

    min-height:auto;
}

#toastIcon{

    width:52px;

    height:52px;

    min-width:52px;

    font-size:22px;
}

#toastTitle{

    font-size:18px;
}

#toastMessage{

    font-size:14px;
}

.notification-card{

    padding:28px 20px;

    border-radius:24px;
}

.notification-card h2{

    font-size:26px;
}

.notification-card p{

    font-size:15px;
}

.notification-close{

    width:100%;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

#toast{

    width:94vw;

    padding:16px;
}

#toastTitle{

    font-size:17px;
}

#toastMessage{

    font-size:13px;
}

.notification-card{

    padding:24px 18px;
}

.notification-card h2{

    font-size:24px;
}

.notification-card p{

    font-size:14px;
}

}