/*
 * Vristo only: SweetAlert2 look from vristo-html-main (components-sweetalert.html,
 * assets/css/sweetalert.css) for PortalVristoAlert.confirm() and .toast().
 */
html[data-portal-ui="vristo"] .v-swal {
  width: 32em;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: #545454;
  font-family: Nunito, sans-serif;
  overflow: auto;
  animation: v-swal-show 300ms;
}
html[data-portal-ui="vristo"] .v-swal::backdrop {
  background: rgb(0 0 0 / 0.4);
  animation: v-swal-fade 150ms ease-out;
}
html[data-portal-ui="vristo"] .v-swal--closing { animation: v-swal-hide 150ms forwards; }
html[data-portal-ui="vristo"] .v-swal--closing::backdrop { opacity: 0; transition: opacity 150ms; }

html[data-portal-ui="vristo"] .v-swal-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
}
html[data-portal-ui="vristo"] .v-swal-icon {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin: 15px auto 40px;
  border: 5px solid #f1f2f3;
  border-radius: 50%;
  box-shadow: 0 3px 25px 0 rgb(113 106 202 / 0.2);
  cursor: default;
  user-select: none;
}
html[data-portal-ui="vristo"] .v-swal-icon--warning { color: #fb4; }
html[data-portal-ui="vristo"] .v-swal-icon--question { color: #805dca; }
html[data-portal-ui="vristo"] .v-swal-icon-content { font-size: 5.75rem; line-height: 1; }
html[data-portal-ui="vristo"] .v-swal-title {
  width: 100%;
  margin: 0;
  padding: 0.8em 1em 0;
  color: #3b3f5c;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
html[data-portal-ui="vristo"] .v-swal-text {
  margin: 16px 0 0;
  color: #e95f2b;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
html[data-portal-ui="vristo"] .v-swal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
html[data-portal-ui="vristo"] .v-swal-button {
  min-height: 36px;
  padding: 8px 20px;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
html[data-portal-ui="vristo"] .v-swal-confirm { background: #4361ee; color: #fff; }
html[data-portal-ui="vristo"] .v-swal-confirm:hover { background: #2f46c7; }
html[data-portal-ui="vristo"] .v-swal-cancel {
  padding: 7px 20px;
  border: 1px solid #e8e8e8;
  background: #fff;
  color: #4361ee;
  box-shadow: 0 5px 20px 0 rgb(0 0 0 / 0.1);
}
html[data-portal-ui="vristo"] .v-swal-button:focus-visible { outline: 2px solid rgb(67 97 238 / 0.5); outline-offset: 2px; }

html[data-portal-ui="vristo"][data-theme="graphite"] .v-swal { background: #0e1726; }
html[data-portal-ui="vristo"][data-theme="graphite"] .v-swal-title { color: #888ea8; }
html[data-portal-ui="vristo"][data-theme="graphite"] .v-swal-icon { border-color: #888ea8; box-shadow: none; }
html[data-portal-ui="vristo"][data-theme="graphite"] .v-swal-cancel { border-color: #3b3f5c; background: #3b3f5c; color: #e0e6ed; }

/* Toast: swal2 toast, top end */
html[data-portal-ui="vristo"] .v-swal-toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1100;
  display: grid;
  gap: 10px;
  max-width: calc(100% - 32px);
  pointer-events: none;
}
html[data-portal-ui="vristo"] .v-swal-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 5px;
  background: #fff;
  color: #3b3f5c;
  box-shadow: 0 0 0.625em #d9d9d9;
  font-size: 14px;
  font-weight: 600;
  pointer-events: auto;
  animation: v-swal-toast-show 500ms;
}
html[data-portal-ui="vristo"] .v-swal-toast--closing { animation: v-swal-toast-hide 200ms forwards; }
html[data-portal-ui="vristo"] .v-swal-toast-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
}
html[data-portal-ui="vristo"] .v-swal-toast--success .v-swal-toast-icon { color: #00ab55; }
html[data-portal-ui="vristo"] .v-swal-toast--error .v-swal-toast-icon { color: #e7515a; }
html[data-portal-ui="vristo"] .v-swal-toast--info .v-swal-toast-icon { color: #4361ee; }
html[data-portal-ui="vristo"][data-theme="graphite"] .v-swal-toast { background: #0e1726; color: #e0e6ed; box-shadow: 0 0 0.625em rgb(0 0 0 / 0.6); }

@keyframes v-swal-show {
  0% { transform: scale(0.7); }
  45% { transform: scale(1.05); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes v-swal-hide { to { transform: scale(0.5); opacity: 0; } }
@keyframes v-swal-fade { from { opacity: 0; } }
@keyframes v-swal-toast-show {
  0% { transform: translateY(-0.625em) rotateZ(2deg); opacity: 0; }
  33% { transform: translateY(0) rotateZ(-2deg); opacity: 1; }
  66% { transform: translateY(0.3125em) rotateZ(2deg); }
  100% { transform: translateY(0) rotateZ(0); }
}
@keyframes v-swal-toast-hide { to { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 479px) {
  html[data-portal-ui="vristo"] .v-swal-icon { width: 96px; height: 96px; margin-bottom: 28px; }
  html[data-portal-ui="vristo"] .v-swal-icon-content { font-size: 4.5rem; }
  html[data-portal-ui="vristo"] .v-swal-title { font-size: 21px; padding-inline: 0; }
  html[data-portal-ui="vristo"] .v-swal-text { font-size: 16px; }
  html[data-portal-ui="vristo"] .v-swal-toasts { left: 16px; right: 16px; }
  html[data-portal-ui="vristo"] .v-swal-toast { min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-portal-ui="vristo"] .v-swal,
  html[data-portal-ui="vristo"] .v-swal::backdrop,
  html[data-portal-ui="vristo"] .v-swal--closing,
  html[data-portal-ui="vristo"] .v-swal-toast,
  html[data-portal-ui="vristo"] .v-swal-toast--closing { animation: none; }
}