/* ==========================================================================
   IIME error messages - "seal & ribbon": white cards with a red-to-holo
   gradient frame, a folded ribbon corner, a wax-seal style icon and an
   italic Fraunces title.
   Loaded last on the dashboard (layouts/sections/css), the login pages,
   the website (front/logistic/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 {
  --iie-red: #c8102e;
  --iie-red-2: #a30d25;
  --iie-holo: #2f7fff;
  --iie-holo-2: #43c6ff;
  --iie-gold: #b8964b;
  --iie-navy: #0b2a5b;
  --iie-ink: #0d1b2e;
  --iie-text: #33435a;
  --iie-paper: #fff;
  --iie-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --iie-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --iie-mono: "JetBrains Mono", Consolas, monospace;
  --iie-frame: linear-gradient(120deg, var(--iie-red) 0%, #e2456a 40%, var(--iie-holo) 80%, var(--iie-holo-2) 100%);
}

/* ---------- toasts ---------- */
#toast-container > .toast.toast-error,
#toast-container > .toast.toast-warning {
  position: relative; width: 350px; max-width: calc(100vw - 24px);
  padding: 16px 40px 16px 70px !important; padding-inline-start: 70px !important; padding-inline-end: 40px !important; opacity: 1 !important;
  color: var(--iie-text) !important; border: 1.5px solid transparent !important; border-radius: 16px 16px 16px 4px !important;
  background: linear-gradient(var(--iie-paper), var(--iie-paper)) padding-box, var(--iie-frame) border-box !important;
  box-shadow: 0 26px 50px -24px rgba(11, 42, 91, .5), 0 2px 8px rgba(11, 42, 91, .06) !important; font-family: var(--iie-sans);
}
#toast-container > .toast.toast-warning { background: linear-gradient(var(--iie-paper), var(--iie-paper)) padding-box, linear-gradient(120deg, var(--iie-gold), #e8b44a) border-box !important; }
#toast-container > .toast.toast-error::before,
#toast-container > .toast.toast-warning::before {
  content: "!"; position: absolute; top: 16px; inset-inline-start: 18px; width: 38px; height: 38px; display: grid; place-items: center;
  font: italic 600 22px/1 var(--iie-serif); color: #fff;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #ff5a74, var(--iie-red) 55%, var(--iie-red-2));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(200, 16, 46, .25), 0 8px 18px -6px rgba(200, 16, 46, .7);
}
#toast-container > .toast.toast-warning::before { background: radial-gradient(circle at 35% 30%, #f3d27e, var(--iie-gold) 60%, #8f7231); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(184, 150, 75, .3), 0 8px 18px -6px rgba(184, 150, 75, .7); }
#toast-container > .toast.toast-error::after,
#toast-container > .toast.toast-warning::after {
  content: ""; position: absolute; top: -1.5px; inset-inline-end: 22px; width: 14px; height: 22px;
  background: var(--iie-frame); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
#toast-container > .toast.toast-warning::after { background: var(--iie-gold); }
#toast-container > .toast-error .toast-title,
#toast-container > .toast-warning .toast-title { font: italic 600 17px/1.2 var(--iie-serif); color: var(--iie-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(--iie-text); }
#toast-container > .toast-error .toast-close-button,
#toast-container > .toast-warning .toast-close-button { position: absolute; bottom: 10px; top: auto; inset-inline-end: 14px; color: var(--iie-ink); opacity: .4; text-shadow: none; }
#toast-container > .toast-error .toast-progress { height: 3px; opacity: 1; border-radius: 0 0 0 4px; background: var(--iie-frame); }
#toast-container > .toast-warning .toast-progress { height: 3px; opacity: 1; background: var(--iie-gold); }

/* ---------- popups ---------- */
.swal2-popup.swal2-icon-error,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) {
  border: 2px solid transparent !important; border-radius: 24px 24px 24px 6px !important; font-family: var(--iie-sans);
  background: linear-gradient(#fff, #fff) padding-box, var(--iie-frame) border-box !important;
  box-shadow: 0 50px 100px -40px rgba(11, 42, 91, .55) !important;
}
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, var(--iie-gold), #e8b44a) border-box !important; }
.swal2-popup.swal2-icon-error .swal2-title,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-title { font: italic 600 27px/1.2 var(--iie-serif) !important; color: var(--iie-ink) !important; }
.swal2-popup.swal2-icon-error .swal2-html-container { color: var(--iie-text) !important; }
.swal2-popup.swal2-icon-error .swal2-icon.swal2-error {
  border: 0 !important; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #ff5a74, var(--iie-red) 55%, var(--iie-red-2));
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(200, 16, 46, .25), 0 16px 30px -10px rgba(200, 16, 46, .7);
}
.swal2-popup.swal2-icon-error .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: #fff !important; }
.swal2-popup.swal2-icon-error .swal2-confirm,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-confirm {
  background: var(--iie-navy) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important;
  padding: 12px 28px !important; font: 600 14px/1 var(--iie-sans) !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(47, 127, 255, .45) !important;
}

/* ---------- field errors ---------- */
.invalid-feedback, p.text-danger:not(:empty), small.text-danger:not(:empty), label.error, .ii-ma-err:not(:empty) {
  position: relative; margin-top: 6px; padding-inline-start: 14px;
  color: var(--iie-red) !important; font: italic 500 13.5px/1.45 var(--iie-serif);
}
body.dark-only .invalid-feedback, body.dark-only p.text-danger:not(:empty), body.dark-only small.text-danger:not(:empty) { color: #ff7d92 !important; }
.invalid-feedback::before, p.text-danger:not(:empty)::before, small.text-danger:not(:empty)::before, label.error::before, .ii-ma-err:not(:empty)::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--iie-red), var(--iie-holo));
}
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
  border-color: transparent !important; background-image: none !important;
  box-shadow: 0 0 0 1.5px var(--iie-red), 0 6px 0 -3px rgba(47, 127, 255, .55) !important;
}

/* ---------- boxed alerts ---------- */
.alert.alert-danger {
  position: relative; padding: 15px 18px; padding-inline-start: 64px;
  color: var(--iie-text) !important; border: 1.5px solid transparent !important; border-radius: 16px 16px 16px 4px !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--iie-frame) border-box !important; font-family: var(--iie-sans);
}
.alert.alert-danger::before {
  content: "!"; position: absolute; top: 12px; inset-inline-start: 16px; width: 32px; height: 32px; display: grid; place-items: center;
  font: italic 600 18px/1 var(--iie-serif); color: #fff; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #ff5a74, var(--iie-red) 55%, var(--iie-red-2));
}
.alert.alert-danger strong { font-family: var(--iie-serif); font-style: italic; color: var(--iie-ink); }