/* Shared layout, typography, navigation, and utility styles. */
/* ========================================
   ARABIC FONT STYLING - RESPONSIVE
   ======================================== */

/* Base Arabic Font Styling */
html[lang="ar"],
html[lang="ar"] body,
html.rtl,
html.rtl body {
    font-family: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.7;
}

/* English Font Styling - Plus Jakarta Sans */
html[lang="en"],
html[lang="en"] body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    letter-spacing: -0.005em;
}

/* ========================================
   ENGLISH FONT SIZING - RESPONSIVE
   Plus Jakarta Sans: clean metrics, only light
   negative tracking on display headings
   ======================================== */

/* MOBILE FIRST - Base (< 640px) */
html[lang="en"] {
    font-size: 16px;
}

html[lang="en"] h1 {
    font-weight: 800;
    font-size: 1.875rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

html[lang="en"] h2 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

html[lang="en"] h3 {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

html[lang="en"] h4 {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

html[lang="en"] .text-xs  { font-size: 0.8rem; }
html[lang="en"] .text-sm  { font-size: 0.925rem; }
html[lang="en"] .text-base{ font-size: 1.0625rem; }
html[lang="en"] .text-lg  { font-size: 1.175rem; }
html[lang="en"] .text-xl  { font-size: 1.3rem; }
html[lang="en"] .text-2xl { font-size: 1.5rem;   letter-spacing: -0.015em; }
html[lang="en"] .text-3xl { font-size: 1.875rem; letter-spacing: -0.02em; }
html[lang="en"] .text-4xl { font-size: 2.25rem;  letter-spacing: -0.02em; }
html[lang="en"] .text-5xl { font-size: 2.75rem;  letter-spacing: -0.025em; }

/* TABLET - sm (640px+) */
@media (min-width: 640px) {
    html[lang="en"] { font-size: 17px; }

    html[lang="en"] h1 { font-size: 2.25rem; }
    html[lang="en"] h2 { font-size: 1.875rem; }
    html[lang="en"] h3 { font-size: 1.5rem; }
    html[lang="en"] h4 { font-size: 1.25rem; }

    html[lang="en"] .text-xs  { font-size: 0.85rem; }
    html[lang="en"] .text-sm  { font-size: 0.95rem; }
    html[lang="en"] .text-base{ font-size: 1.1rem; }
    html[lang="en"] .text-lg  { font-size: 1.25rem; }
    html[lang="en"] .text-xl  { font-size: 1.4rem; }
    html[lang="en"] .text-2xl { font-size: 1.625rem; }
    html[lang="en"] .text-3xl { font-size: 2rem; }
    html[lang="en"] .text-4xl { font-size: 2.5rem; }
    html[lang="en"] .text-5xl { font-size: 3rem; }
}

/* DESKTOP - md (768px+) */
@media (min-width: 768px) {
    html[lang="en"] { font-size: 17px; }

    html[lang="en"] h1 { font-size: 2.5rem; }
    html[lang="en"] h2 { font-size: 2rem; }
    html[lang="en"] h3 { font-size: 1.625rem; }
    html[lang="en"] h4 { font-size: 1.375rem; }
}

/* LARGE DESKTOP - lg (1024px+) */
@media (min-width: 1024px) {
    html[lang="en"] { font-size: 18px; }

    html[lang="en"] h1 { font-size: 2.75rem; }
    html[lang="en"] h2 { font-size: 2.25rem; }
    html[lang="en"] h3 { font-size: 1.75rem; }
    html[lang="en"] h4 { font-size: 1.5rem; }

    html[lang="en"] .text-lg  { font-size: 1.3rem; }
    html[lang="en"] .text-xl  { font-size: 1.5rem; }
    html[lang="en"] .text-2xl { font-size: 1.75rem; }
    html[lang="en"] .text-3xl { font-size: 2.25rem; }
    html[lang="en"] .text-4xl { font-size: 2.75rem; }
    html[lang="en"] .text-5xl { font-size: 3.5rem; }
}

/* XL DESKTOP - xl (1280px+) */
@media (min-width: 1280px) {
    html[lang="en"] {
        font-size: 18px;
    }

    html[lang="en"] h1 {
        font-size: 3rem;
    }

    html[lang="en"] h2 {
        font-size: 2.5rem;
    }

    html[lang="en"] h3 {
        font-size: 1.875rem;
    }

    html[lang="en"] h4 {
        font-size: 1.625rem;
    }

    html[lang="en"] .text-5xl {
        font-size: 3.75rem;
    }
}

/* Arabic buttons and links - bolder */
html[lang="ar"] button,
html[lang="ar"] a,
html[lang="ar"] .font-medium,
html[lang="ar"] .font-semibold,
html.rtl button,
html.rtl a,
html.rtl .font-medium,
html.rtl .font-semibold {
    font-weight: 600;
}

html[lang="ar"] .font-bold,
html.rtl .font-bold {
    font-weight: 800;
}

/* Scrollbar Hide Utility */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ========================================
   MOBILE FIRST - Base (< 640px)
   ======================================== */
html[lang="ar"],
html.rtl {
    font-size: 15px;
}

html[lang="ar"] h1,
html.rtl h1 {
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.3;
}

html[lang="ar"] h2,
html.rtl h2 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.35;
}

html[lang="ar"] h3,
html.rtl h3 {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
}

html[lang="ar"] h4,
html.rtl h4 {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.4;
}

/* Mobile text sizes */
html[lang="ar"] .text-xs,
html.rtl .text-xs {
    font-size: 0.8rem;
}

html[lang="ar"] .text-sm,
html.rtl .text-sm {
    font-size: 0.9rem;
}

html[lang="ar"] .text-base,
html.rtl .text-base {
    font-size: 1rem;
}

html[lang="ar"] .text-lg,
html.rtl .text-lg {
    font-size: 1.15rem;
}

html[lang="ar"] .text-xl,
html.rtl .text-xl {
    font-size: 1.3rem;
}

html[lang="ar"] .text-2xl,
html.rtl .text-2xl {
    font-size: 1.5rem;
}

html[lang="ar"] .text-3xl,
html.rtl .text-3xl {
    font-size: 1.75rem;
}

html[lang="ar"] .text-4xl,
html.rtl .text-4xl {
    font-size: 2rem;
}

html[lang="ar"] .text-5xl,
html.rtl .text-5xl {
    font-size: 2.5rem;
}

/* ========================================
   TABLET - sm (640px+)
   ======================================== */
@media (min-width: 640px) {

    html[lang="ar"],
    html.rtl {
        font-size: 16px;
    }

    html[lang="ar"] h1,
    html.rtl h1 {
        font-size: 2rem;
    }

    html[lang="ar"] h2,
    html.rtl h2 {
        font-size: 1.75rem;
    }

    html[lang="ar"] h3,
    html.rtl h3 {
        font-size: 1.375rem;
    }

    html[lang="ar"] h4,
    html.rtl h4 {
        font-size: 1.2rem;
    }

    html[lang="ar"] .text-xs,
    html.rtl .text-xs {
        font-size: 0.825rem;
    }

    html[lang="ar"] .text-sm,
    html.rtl .text-sm {
        font-size: 0.95rem;
    }

    html[lang="ar"] .text-base,
    html.rtl .text-base {
        font-size: 1.05rem;
    }

    html[lang="ar"] .text-lg,
    html.rtl .text-lg {
        font-size: 1.2rem;
    }

    html[lang="ar"] .text-xl,
    html.rtl .text-xl {
        font-size: 1.35rem;
    }

    html[lang="ar"] .text-2xl,
    html.rtl .text-2xl {
        font-size: 1.6rem;
    }

    html[lang="ar"] .text-3xl,
    html.rtl .text-3xl {
        font-size: 1.9rem;
    }

    html[lang="ar"] .text-4xl,
    html.rtl .text-4xl {
        font-size: 2.25rem;
    }

    html[lang="ar"] .text-5xl,
    html.rtl .text-5xl {
        font-size: 2.75rem;
    }
}

/* ========================================
   DESKTOP - md (768px+)
   ======================================== */
@media (min-width: 768px) {

    html[lang="ar"],
    html.rtl {
        font-size: 16px;
    }

    html[lang="ar"] h1,
    html.rtl h1 {
        font-size: 2.25rem;
    }

    html[lang="ar"] h2,
    html.rtl h2 {
        font-size: 1.875rem;
    }

    html[lang="ar"] h3,
    html.rtl h3 {
        font-size: 1.5rem;
    }

    html[lang="ar"] h4,
    html.rtl h4 {
        font-size: 1.25rem;
    }
}

/* ========================================
   LARGE DESKTOP - lg (1024px+)
   ======================================== */
@media (min-width: 1024px) {

    html[lang="ar"],
    html.rtl {
        font-size: 17px;
    }

    html[lang="ar"] h1,
    html.rtl h1 {
        font-size: 2.5rem;
    }

    html[lang="ar"] h2,
    html.rtl h2 {
        font-size: 2rem;
    }

    html[lang="ar"] h3,
    html.rtl h3 {
        font-size: 1.625rem;
    }

    html[lang="ar"] h4,
    html.rtl h4 {
        font-size: 1.375rem;
    }

    html[lang="ar"] .text-lg,
    html.rtl .text-lg {
        font-size: 1.25rem;
    }

    html[lang="ar"] .text-xl,
    html.rtl .text-xl {
        font-size: 1.4rem;
    }

    html[lang="ar"] .text-2xl,
    html.rtl .text-2xl {
        font-size: 1.7rem;
    }

    html[lang="ar"] .text-3xl,
    html.rtl .text-3xl {
        font-size: 2.1rem;
    }

    html[lang="ar"] .text-4xl,
    html.rtl .text-4xl {
        font-size: 2.6rem;
    }

    html[lang="ar"] .text-5xl,
    html.rtl .text-5xl {
        font-size: 3.25rem;
    }
}

/* ========================================
   XL DESKTOP - xl (1280px+)
   ======================================== */
@media (min-width: 1280px) {

    html[lang="ar"],
    html.rtl {
        font-size: 18px;
    }

    html[lang="ar"] h1,
    html.rtl h1 {
        font-size: 2.75rem;
    }

    html[lang="ar"] h2,
    html.rtl h2 {
        font-size: 2.25rem;
    }

    html[lang="ar"] h3,
    html.rtl h3 {
        font-size: 1.75rem;
    }

    html[lang="ar"] h4,
    html.rtl h4 {
        font-size: 1.5rem;
    }

    html[lang="ar"] .text-5xl,
    html.rtl .text-5xl {
        font-size: 3.5rem;
    }
}

/* ========================================
   FLOATING ICONS ANIMATIONS
   ======================================== */
.floating-icon {
    transition: transform 0.3s ease;
}

.floating-icon:hover {
    transform: scale(1.1);
}

@keyframes float-1 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(3deg);
    }
}

@keyframes float-2 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(-3deg);
    }
}

@keyframes float-3 {

    0%,
    100% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(6px) translateY(-10px);
    }
}

@keyframes float-4 {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

@keyframes float-5 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

@keyframes float-6 {

    0%,
    100% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(-5px) translateY(-12px);
    }
}

.floating-icon-1 {
    animation: float-1 3s ease-in-out infinite;
}

.floating-icon-2 {
    animation: float-2 4s ease-in-out infinite 0.5s;
}

.floating-icon-3 {
    animation: float-3 3.5s ease-in-out infinite 0.3s;
}

.floating-icon-4 {
    animation: float-4 3s ease-in-out infinite 0.7s;
}

.floating-icon-5 {
    animation: float-5 4s ease-in-out infinite 0.2s;
}

.floating-icon-6 {
    animation: float-6 3.5s ease-in-out infinite 0.8s;
}

.floating-icon>div {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
}

/* RTL Support */
html.rtl .floating-icon-1 {
    left: auto;
    right: 0.5rem;
}

html.rtl .floating-icon-2 {
    right: auto;
    left: -0.5rem;
}

html.rtl .floating-icon-3 {
    left: auto;
    right: -1rem;
}

html.rtl .floating-icon-4 {
    left: auto;
    right: -0.5rem;
}

html.rtl .floating-icon-5 {
    right: auto;
    left: -0.25rem;
}

html.rtl .floating-icon-6 {
    right: auto;
    left: -1rem;
}

@media (min-width: 640px) {
    html.rtl .floating-icon-2 {
        left: -1rem;
    }

    html.rtl .floating-icon-3 {
        right: -1.5rem;
    }

    html.rtl .floating-icon-4 {
        right: -1rem;
    }

    html.rtl .floating-icon-5 {
        left: -0.75rem;
    }

    html.rtl .floating-icon-6 {
        left: -1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .floating-icon-1,
    .floating-icon-2,
    .floating-icon-3,
    .floating-icon-4,
    .floating-icon-5,
    .floating-icon-6 {
        animation: none;
    }
}

/* ========================================
   DONATION SUCCESS CELEBRATION
   ======================================== */
.celebration-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: 0;
}

.confetti.circle {
    border-radius: 50%;
}

.confetti.square {
    border-radius: 2px;
}

.confetti.star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.confetti.heart {
    clip-path: polygon(50% 85%, 100% 35%, 85% 0%, 50% 25%, 15% 0%, 0% 35%);
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

@keyframes confetti-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(15px);
    }

    75% {
        transform: translateX(-15px);
    }
}

.confetti.animate {
    animation: confetti-fall 3s ease-out forwards, confetti-shake 0.5s ease-in-out infinite;
}

/* Success Modal */
.success-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.success-modal.active {
    opacity: 1;
    visibility: visible;
}

.success-modal-content {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    text-align: center;
    max-width: 400px;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.success-modal.active .success-modal-content {
    transform: scale(1);
}

.success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: success-pop 0.5s ease-out;
}

@keyframes success-pop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.success-checkmark svg {
    width: 40px;
    height: 40px;
    color: white;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkmark-draw 0.5s ease-out 0.3s forwards;
}

@keyframes checkmark-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Normalize Django error output */
ul.errorlist {
    margin-top: 0.25rem;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

ul.errorlist li {
    background: #fef2f2;
    /* red-50 */
    color: #991b1b;
    /* red-800 */
    border: 1px solid #fecaca;
    /* red-200 */
    font-size: 0.875rem;
    /* text-sm */
    border-radius: 0.375rem;
    /* rounded-md */
    padding: 0.5rem 0.75rem;
    /* px-3 py-2 */
    margin-top: 0.25rem;
    /* mt-1 */
}

input[type="file"]::file-selector-button {
    background-color: var(--primary-2);
    color: white;
    border: none;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--primary);
}

input[type="file"]:focus {
    outline: 2px solid var(--primary-2);
    outline-offset: 2px;
}

/* Remove outline from all form inputs */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
}

details.nav-dropdown summary {
    list-style: none;
}

details.nav-dropdown summary::-webkit-details-marker {
    display: none;
}

details.nav-dropdown .nav-dropdown-menu {
    display: none;
}

details.nav-dropdown[open] .nav-dropdown-menu {
    display: block;
}

details.nav-dropdown[open]>summary {
    color: var(--primary);
}

/* Desktop nav consistency */
.nav-desktop a,
.nav-desktop summary {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    /* rounded-md */
}

/* Align dropdown for RTL correctly */
details.nav-dropdown .nav-dropdown-menu {
    left: 0;
    right: auto;
}

html.rtl details.nav-dropdown .nav-dropdown-menu {
    right: 0;
    left: auto;
}

/* Make language select height consistent with links */
#language-select {
    height: 44px;
    /* touch target */
    line-height: 1;
}

/* Responsive Visibility - Mobile/Desktop Toggle */
/* Show only on mobile (< 768px) */
.show-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* Hide on mobile (< 768px), show on desktop (768px+) */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block !important;
    }
}

/* Mobile navigation menu - only visible on mobile, hidden by default */
.mobile-nav-menu {
    display: none;
}

@media (max-width: 767px) {
    .mobile-nav-menu {
        display: block;
    }
}

@media (min-width: 768px) {
    .mobile-nav-menu {
        display: none !important;
    }
}

/* When mobile nav is shown (JS toggles .hidden class) */
.mobile-nav-menu:not(.hidden) {
    display: block;
}

/* ========================================
   MODERN NAVBAR STYLES
   ======================================== */

/* Header scroll effect */

/* Dropdown menu improvements */
.dropdown-menu {
    pointer-events: none;
}

.group:hover .dropdown-menu {
    pointer-events: auto;
}

/* Mobile menu button animation */
#mobile-menu-btn.active .hamburger-icon {
    opacity: 0;
    transform: rotate(90deg);
}

#mobile-menu-btn.active .close-icon {
    opacity: 1;
    transform: rotate(0deg);
}

#mobile-menu-btn .close-icon {
    transform: rotate(-90deg);
}

/* Mobile nav slide animation */
#mobile-nav {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Nav link hover effect */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: rgba(8, 38, 30, 0.08);
    transition: transform 0.3s ease;
    transform: translateX(-50%);
    border-radius: 1px;
}

.nav-link:hover::after {
    width: 60%;
}

/* RTL Support for new navbar */
html.rtl .dropdown-menu {
    left: auto;
    right: 0;
}

html.rtl #user-dropdown .dropdown-menu {
    left: 0;
    right: auto;
}

/* ========================================
   DROPDOWN HOVER FIX
   ======================================== */
/* Create invisible bridge between trigger and dropdown */
.group>.dropdown-menu {
    padding-top: 0.75rem;
    margin-top: -0.5rem;
}

/* .group>.dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1rem;
    right: -1rem;
    height: 1rem;
} */

/* Ensure dropdown stays visible on hover */
.group:hover>.dropdown-menu,
.dropdown-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* ========================================
   RTL ICON FLIP SUPPORT
   ======================================== */
/* Flip directional icons in RTL mode */
html.rtl .rtl-flip,
html[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* Flip arrow icons */
html.rtl [class*="translate-x"],
html[dir="rtl"] [class*="translate-x"],
html.rtl .group-hover\\:translate-x-1,
html[dir="rtl"] .group-hover\\:translate-x-1 {
    --tw-translate-x: calc(var(--tw-translate-x) * -1);
}

/* Flip chevron/arrow SVGs that indicate direction */
html.rtl .arrow-icon,
html[dir="rtl"] .arrow-icon,
html.rtl a svg[class*="translate-x"],
html[dir="rtl"] a svg[class*="translate-x"],
html.rtl button svg[class*="translate-x"],
html[dir="rtl"] button svg[class*="translate-x"] {
    transform: scaleX(-1);
}

/* RTL-aware margin/padding */
html.rtl .ml-1 {
    margin-left: 0;
    margin-right: 0.25rem;
}

html.rtl .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

html.rtl .mr-1 {
    margin-right: 0;
    margin-left: 0.25rem;
}

html.rtl .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Fix action card arrows in RTL */
html.rtl .orphan-action-card svg:last-child,
html[dir="rtl"] .orphan-action-card svg:last-child,
html.rtl .group svg[class*="group-hover:translate-x"],
html[dir="rtl"] .group svg[class*="group-hover:translate-x"] {
    transform: scaleX(-1);
}

/* Cinematic hero word-reveal (motion.js) - staggered rise per word */
[data-hero-title] .ht-word {
    display: inline-block;
    will-change: transform, opacity;
}

.toast-notification {
                    animation: toast-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
                }

                @keyframes toast-slide-in {
                    from {
                        opacity: 0;
                        transform: translateY(-20px) scale(0.95);
                    }

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

                .toast-progress {
                    animation: toast-countdown 5s linear forwards;
                }

                @keyframes toast-countdown {
                    from {
                        width: 100%;
                    }

                    to {
                        width: 0%;
                    }
                }