.alert-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0000003d;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 0 16px;
  z-index: 2000;
}
.alert-overlay.active { opacity: 1; visibility: visible; }

.alert-wrapper {
  width: clamp(384px, 100%, 512px);
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 6px;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  margin-bottom: 5%;
  padding: 24px;
  animation: modal-appear 0.3s ease-out;
}
.alert-wrapper.pulse { animation: pulse 0.3s ease; }
/* Pulse Animation (optional, for emphasis) */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
/* Appear Animation */
@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Disappear Animation */
@keyframes modal-disappear {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}
/* Disappear State for the Modal */
.alert-wrapper.disappear { animation: modal-disappear 0.3s ease-out; }


.alert-content{
  display: flex;
  gap: 16px;
}
.alert-content.centered.not-centered{
  flex-direction: row;
}
.alert-content.centered{
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon-wrapper{ height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.icon-error{ background-color:  #ed143d14; color: #dc143c; font-size: 20px; }
.icon-error > i { margin-top: 1px}
.icon-danger{ background-color:  #ed143d14; color: #dc143c; font-size: 20px; }
.icon-danger > i { margin-bottom: 3px;}
.icon-warning{ color: #ffad46; background-color: #ffac463e; font-size: 18px; }
.icon-warning > i { margin-top: 2px; }
.icon-success{ background-color: #dcfce7; color: #16a34a; font-size: 22px; }
.icon-success > i{ margin-top: 2px; }
.icon-info{ color: #4f46e5; background-color: #4e46e517; font-size: 22px; }


.alert-text-wrapper{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alert-text-wrapper.centered{ justify-content: center; }
.alert-title{
  color: #111827;
  font-size: 16px;
  line-height: 24px;
  font-family: Inter, system-ui, -apple-system, Arial, Helvetica, sans-serif;
  margin: 0;
}
.alert-title.centered{ text-align: center; }
.alert-message{
  color: #6B7280;
  font-size: 14px;
  line-height: 20px;
  font-family: Inter, system-ui, -apple-system, Arial, Helvetica, sans-serif;
  margin: 0;
}
.alert-message.centered{ text-align: center; }


.alert-actions{
  width: 100%;
  display: flex;
  margin-top: 16px;
  flex-direction: row;
  gap: 12px;
  justify-content: right;
}
.alert-actions.centered{ justify-content: center; margin-top: 20px;}


.action-button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  border: none;
  user-select: none;
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  font-family: Inter, system-ui, -apple-system, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.action-button.centered{ width: 100%;}
.action-primary{ background-color: #18181b; color: #ffffff; }
.action-secondary{ 
  color: var(--dark); 
  font-weight: 500; 
  background-color: var(--white);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-ring-inset: inset;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.action-primary:hover{ background-color: #18181be6; } 
.action-secondary:hover{ background-color: #f5f5f6; }

.action-primary.error{ background-color: #dc143c; }
.action-primary.danger{ background-color: #dc143c; }
.action-primary.warning{ background-color: #ffad46; }
.action-primary.success{ background-color: #16a34a; }
.action-primary.info{ background-color: #4f46e5; }

.action-primary.error:hover{ background-color: #dc143cdb; }
.action-primary.danger:hover{ background-color: #dc143cdb; }
.action-primary.warning:hover{ background-color: #ffac46de; }
.action-primary.success:hover{ background-color: #16a34adc; }
.action-primary.info:hover{ background-color: #4e46e5d2; }

/* #ffad46 */