/* 1. WRAPPER */
.iziToast-wrapper {
     gap: 5px;
     z-index: 2147483647 !important; 
}

/* 2. THE PILL */
.iziToast {
     background: #ffffff !important;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.05) !important; 
     border-radius: 50px !important; 
     overflow: hidden;
     padding: 12px 45px 12px 0 !important; 
     border: 1px solid #f1f1f1 !important; 
     min-height: auto !important;
     margin-bottom: 30px !important; 
}

/* 3. ALIGNMENT */
.iziToast>.iziToast-body {
     position: unset;
     padding: unset;
     height: unset;
     min-height: unset;
     margin: unset;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 15px !important; 
     padding-left: 20px !important;
}

.iziToast:after {
     box-shadow: none;
}

/* 4. THE ICON CIRCLE */
.iziToast>.iziToast-body .iziToast-icon {
     position: unset;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px !important; 
     line-height: 1;
     margin-top: unset;
     width: 32px !important; 
     height: 32px !important;
}

.iziToast .iziToast-icon {
     border-radius: 50% !important;
     padding: 0 !important; 
     opacity: 1 !important; 
}

/* 5. SOLID BACKGROUND COLORS */
.iziToast.iziToast-color-green .iziToast-icon,
.iziToast.iziToast-color-success .iziToast-icon {
     background: #28c76f !important; 
     color: #ffffff !important; 
}

.iziToast.iziToast-color-red .iziToast-icon,
.iziToast.iziToast-color-error .iziToast-icon {
     background: #eb2222 !important;
     color: #ffffff !important;
}

.iziToast.iziToast-color-blue .iziToast-icon,
.iziToast.iziToast-color-info .iziToast-icon {
     background: #1e9ff2 !important;
     color: #ffffff !important;
}

.iziToast.iziToast-color-orange .iziToast-icon,
.iziToast.iziToast-color-warning .iziToast-icon {
     background: #ff9f43 !important;
     color: #ffffff !important;
}

/* Forces the FontAwesome icon inside the circle to be white */
.iziToast .iziToast-icon i {
     color: #ffffff !important;
}

/* 6. TEXT STYLING */
.iziToast>.iziToast-body .iziToast-texts {
     margin: 0;
     padding-right: 0;
     display: flex;
     flex-direction: column;
     gap: 2px;
}

.iziToast>.iziToast-body .iziToast-message {
     margin: 0;
     color: #222222 !important; 
     font-weight: 500 !important;
}

/* 7. CLOSE BUTTON (CROSS) */
.iziToast>.iziToast-close {
     font-family: 'Line Awesome Free';
     font-weight: 900;
     background: unset;
     right: 5px !important; 
     color: #000000 !important; 
     opacity: 0.8 !important; 
     width: 40px !important;
}

.iziToast>.iziToast-close:hover {
     opacity: 1 !important; 
}

.iziToast>.iziToast-close::before {
     content: "\f00d";
}

.iziToast>.iziToast-progressbar>div {
     height: 4px;
}

/* 8. PROPER NATIVE MOBILE STYLING */
@media only screen and (max-width: 768px) {
     /* Targets the native topCenter wrapper generated by JS */
     .iziToast-wrapper-topCenter {
          top: 15px !important; /* Spaces it cleanly just off the top edge */
          z-index: 2147483647 !important; 
     }
     
     .iziToast {
          width: 90vw !important; 
          max-width: 350px !important;
          margin: 0 auto 10px auto !important; /* Stack spacing handled natively */
     }
     
     .iziToast>.iziToast-body .iziToast-message {
          font-size: 13px !important;
          white-space: nowrap !important; 
     }
     
     .iziToast>.iziToast-body {
          gap: 10px !important; 
     }
}