/* ==========================================================================
   GIPMD error messages - "soft bubble": rounded white cards that float in
   with a spring, a round blush icon, Manrope text and pill-shaped field
   errors.
   Loaded last on the dashboard (layouts/sections/css), the login pages,
   the website (front/gipmd/layout) and the user portal (user/layout).
   Covers: toastr error/warning toasts, SweetAlert2 error popups (and warning
   popups without a Cancel button), field errors and .alert-danger boxes.
   ========================================================================== */
:root {
  --gpe-red: #e5484d;
  --gpe-red-dk: #c9353a;
  --gpe-blush: #fff0f0;
  --gpe-amber: #f5a524;
  --gpe-amber-soft: #fff6e5;
  --gpe-ink: #0b1b33;
  --gpe-text: #34475f;
  --gpe-line: #f4d7d8;
  --gpe-sans: "Manrope", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --gpe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5484d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Ccircle cx='12' cy='17' r='.6' fill='%23e5484d'/%3E%3C/svg%3E");
  --gpe-icon-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d48806' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Ccircle cx='12' cy='17' r='.6' fill='%23d48806'/%3E%3C/svg%3E");
}
@keyframes gpe-in { 0% { transform: translateY(14px) scale(.96); opacity: 0; } 60% { transform: translateY(-3px) scale(1.01); opacity: 1; } 100% { transform: none; } }
@keyframes gpe-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

/* ---------- toasts ---------- */
#toast-container > .toast.toast-error,
#toast-container > .toast.toast-warning {
  position: relative; width: 350px; max-width: calc(100vw - 24px); overflow: hidden;
  padding: 16px 40px 18px 74px !important; padding-inline-start: 74px !important; padding-inline-end: 40px !important; opacity: 1 !important;
  color: var(--gpe-text) !important; background: #fff !important; background-image: none !important;
  border: 1px solid var(--gpe-line) !important; border-radius: 22px !important;
  box-shadow: 0 24px 50px -20px rgba(229, 72, 77, .35), 0 2px 6px rgba(11, 27, 51, .05) !important;
  font-family: var(--gpe-sans); animation: gpe-in .5s cubic-bezier(.2, .8, .2, 1);
}
#toast-container > .toast.toast-warning { border-color: #f6e2bb !important; box-shadow: 0 24px 50px -20px rgba(245, 165, 36, .35), 0 2px 6px rgba(11, 27, 51, .05) !important; }
#toast-container > .toast.toast-error::before,
#toast-container > .toast.toast-warning::before {
  content: ""; position: absolute; top: 16px; inset-inline-start: 18px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--gpe-icon) center / 24px no-repeat, var(--gpe-blush);
  box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .18); animation: gpe-wobble .6s .35s ease;
}
#toast-container > .toast.toast-warning::before { background: var(--gpe-icon-amber) center / 24px no-repeat, var(--gpe-amber-soft); box-shadow: inset 0 0 0 1px rgba(245, 165, 36, .3); }
#toast-container > .toast-error .toast-title,
#toast-container > .toast-warning .toast-title { font: 800 15px/1.25 var(--gpe-sans); color: var(--gpe-ink); margin-bottom: 3px; }
#toast-container > .toast-error .toast-message,
#toast-container > .toast-warning .toast-message { font-size: 13.5px; line-height: 1.55; color: var(--gpe-text); }
#toast-container > .toast-error .toast-close-button,
#toast-container > .toast-warning .toast-close-button {
  position: absolute; top: 12px; inset-inline-end: 12px; width: 24px; height: 24px; line-height: 22px; text-align: center;
  border-radius: 50%; background: #f4f7fb; color: var(--gpe-ink); opacity: .7; text-shadow: none; font-size: 16px;
}
#toast-container > .toast-error .toast-progress { inset-inline-start: 0; height: 4px; opacity: 1; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #ff9a9d, var(--gpe-red)); }
#toast-container > .toast-warning .toast-progress { height: 4px; opacity: 1; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #ffd27a, var(--gpe-amber)); }

/* ---------- popups ---------- */
.swal2-popup.swal2-icon-error,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) {
  border-radius: 30px !important; border: 1px solid var(--gpe-line) !important; font-family: var(--gpe-sans);
  background: radial-gradient(360px 160px at 50% -10%, var(--gpe-blush), #fff 70%) !important;
  box-shadow: 0 50px 100px -40px rgba(229, 72, 77, .45) !important;
}
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) { border-color: #f6e2bb !important; background: radial-gradient(360px 160px at 50% -10%, var(--gpe-amber-soft), #fff 70%) !important; }
.swal2-popup.swal2-icon-error .swal2-title,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-title { font: 800 24px/1.25 var(--gpe-sans) !important; color: var(--gpe-ink) !important; }
.swal2-popup.swal2-icon-error .swal2-html-container { color: var(--gpe-text) !important; }
.swal2-popup.swal2-icon-error .swal2-icon.swal2-error {
  border: 0 !important; background: var(--gpe-blush); box-shadow: 0 0 0 10px rgba(255, 240, 240, .6), inset 0 0 0 1px rgba(229, 72, 77, .2);
}
.swal2-popup.swal2-icon-error .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--gpe-red) !important; border-radius: 4px; }
.swal2-popup.swal2-icon-error .swal2-confirm,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-confirm {
  background: var(--gpe-red) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  padding: 12px 34px !important; font: 700 14px/1 var(--gpe-sans) !important; box-shadow: 0 14px 28px -12px rgba(229, 72, 77, .8) !important;
}

/* ---------- field errors ---------- */
.invalid-feedback, p.text-danger:not(:empty), small.text-danger:not(:empty), label.error {
  position: relative; width: fit-content; max-width: 100%; margin-top: 8px;
  padding: 5px 12px 5px 30px; padding-inline-start: 30px; padding-inline-end: 12px;
  color: var(--gpe-red-dk) !important; background: var(--gpe-blush); border-radius: 999px;
  font: 600 12.5px/1.35 var(--gpe-sans);
}
.invalid-feedback::before, p.text-danger:not(:empty)::before, small.text-danger:not(:empty)::before, label.error::before {
  content: ""; position: absolute; inset-inline-start: 8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--gpe-icon) center / 13px no-repeat, #fff; box-shadow: 0 0 0 1px rgba(229, 72, 77, .3);
}
/* the speech-bubble tail pointing up at the field */
.invalid-feedback::after, p.text-danger:not(:empty)::after, small.text-danger:not(:empty)::after, label.error::after {
  content: ""; position: absolute; top: -5px; inset-inline-start: 14px; width: 10px; height: 10px; background: var(--gpe-blush); transform: rotate(45deg); border-radius: 2px;
}
body.dark-only .invalid-feedback, body.dark-only p.text-danger:not(:empty) { background: rgba(229, 72, 77, .16); color: #ff9a9d !important; }
body.dark-only .invalid-feedback::after, body.dark-only p.text-danger:not(:empty)::after { background: rgba(229, 72, 77, .16); }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
  border-color: #f2a3a5 !important; background-image: none !important; box-shadow: 0 0 0 4px rgba(229, 72, 77, .12) !important;
}

/* ---------- boxed alerts ---------- */
.alert.alert-danger {
  position: relative; padding: 16px 20px; padding-inline-start: 66px;
  color: var(--gpe-text) !important; background: #fff !important; border: 1px solid var(--gpe-line) !important; border-radius: 20px !important;
  box-shadow: 0 16px 34px -24px rgba(229, 72, 77, .5); font-family: var(--gpe-sans);
}
.alert.alert-danger::before {
  content: ""; position: absolute; top: 50%; inset-inline-start: 16px; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  background: var(--gpe-icon) center / 22px no-repeat, var(--gpe-blush);
}
.alert.alert-danger strong { color: var(--gpe-ink); font-weight: 800; }