/* VPremium Gold - SweetAlert2 theme ("Gold Noir"), companion of assets/js/vg-swal.js.
   SweetAlert2 11.26 is themed through --swal2-* variables; they are set on .swal2-container (a closer ancestor than :root),
   so this file wins whatever the load order of sweetalert2.min.css (which is loaded asynchronously).
   Colours come from the site tokens (--vg-*) and therefore follow the light / dark theme automatically. */

.swal2-container {
  --swal2-backdrop: rgba(20, 17, 12, .62);
  --swal2-width: 29rem;
  --swal2-padding: 0 0 1.5rem;
  --swal2-border: 1px solid var(--vg-border);
  --swal2-border-radius: 1.25rem;
  --swal2-background: var(--vg-surface);
  --swal2-color: var(--vg-ink);
  --swal2-title-padding: 1.6rem 1.75rem 0;
  --swal2-html-container-padding: .75rem 1.75rem .25rem;
  --swal2-outline: 0 0 0 .25rem rgba(242, 183, 5, .45);
  --swal2-show-animation: vg-swal-in .24s cubic-bezier(.2, .8, .2, 1);
  --swal2-hide-animation: vg-swal-out .16s ease forwards;
  --swal2-input-border: 1px solid var(--vg-ui-border);
  --swal2-input-border-radius: .7rem;
  --swal2-input-background: var(--bs-body-bg);
  --swal2-input-box-shadow: none;
  --swal2-input-hover-box-shadow: none;
  --swal2-input-focus-border: 1px solid var(--vg-gold);
  --swal2-input-focus-box-shadow: 0 0 0 .25rem rgba(242, 183, 5, .32);
  --swal2-validation-message-background: var(--vg-red-subtle);
  --swal2-validation-message-color: var(--vg-red-text);
  --swal2-timer-progress-bar-background: var(--vg-gold);
  --swal2-progress-step-background: var(--vg-gold);
  --swal2-close-button-color: var(--vg-muted);
  --swal2-close-button-font-size: 2rem;
  --swal2-footer-border-color: var(--vg-border);
  --swal2-actions-margin: 1.5rem auto 0;
  --swal2-toast-border: 1px solid var(--vg-border);
  --swal2-toast-box-shadow: 0 .75rem 2rem rgba(20, 17, 12, .28);
  font-family: inherit;
}

@keyframes vg-swal-in { from { opacity: 0; transform: translateY(.75rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vg-swal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(.5rem) scale(.97); } }

/* ---- backdrop: same blur as the Bootstrap modals of the site */
/* not for toasts: their container is transparent and would blur a whole column of the page */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show,
body:not(.swal2-toast-shown) .swal2-container.swal2-noanimation { backdrop-filter: blur(3px); }

/* ---- popup */
.swal2-container .swal2-popup.vg-swal {
  box-shadow: 0 2rem 4rem rgba(20, 17, 12, .38);
  border-top: 4px solid var(--vg-gold);
  overflow: hidden;
  font-family: inherit;
  max-width: calc(100vw - 1.5rem);
}
.swal2-container .swal2-popup.vg-swal:has(.swal2-icon.swal2-success) { border-top-color: var(--vg-success-text); }
.swal2-container .swal2-popup.vg-swal:has(.swal2-icon.swal2-error) { border-top-color: var(--vg-red-text); }

.swal2-container .vg-swal .swal2-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--vg-ink);
}
.swal2-container .vg-swal .swal2-html-container {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--vg-ink);
  overflow-wrap: anywhere;
}
.swal2-container .vg-swal .swal2-html-container strong { font-weight: 700; }
.swal2-container .vg-swal .swal2-html-container a { color: var(--vg-link); }

/* ---- icons recoloured to the palette (no blues, no pastel orange) */
.swal2-container .vg-swal .swal2-icon { margin: 1.5rem auto .5rem; width: 4.5rem; height: 4.5rem; border-width: .22em; }
.swal2-container .vg-swal .swal2-icon .swal2-icon-content { font-size: 3rem; }
.swal2-container .vg-swal .swal2-icon.swal2-warning,
.swal2-container .vg-swal .swal2-icon.swal2-info,
.swal2-container .vg-swal .swal2-icon.swal2-question { border-color: var(--vg-gold); color: var(--vg-gold); }
.swal2-container .vg-swal .swal2-icon.swal2-error { border-color: var(--vg-red-text); color: var(--vg-red-text); }
.swal2-container .vg-swal .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--vg-red-text); }
.swal2-container .vg-swal .swal2-icon.swal2-success { border-color: var(--vg-success-text); color: var(--vg-success-text); }
.swal2-container .vg-swal .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--vg-success-text); }
.swal2-container .vg-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--vg-success-text) 30%, transparent); }
.swal2-container .vg-swal .swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-container .vg-swal .swal2-icon.swal2-success .swal2-success-fix { background: var(--vg-surface); }

/* ---- fields (look like the .form-control of the site) */
.swal2-container .vg-swal .swal2-input,
.swal2-container .vg-swal .swal2-textarea,
.swal2-container .vg-swal .swal2-select {
  margin: 1.1rem 1.75rem .25rem;
  width: calc(100% - 3.5rem);
  max-width: 100%;
  min-height: 3rem;
  padding: .55rem .9rem;
  font-size: 1rem;
  color: var(--vg-ink);
}
.swal2-container .vg-swal .swal2-input::placeholder,
.swal2-container .vg-swal .swal2-textarea::placeholder { color: var(--vg-muted); }
.swal2-container .vg-swal .swal2-validation-message {
  margin: .9rem 1.75rem 0;
  padding: .6rem .9rem;
  border-radius: .7rem;
  font-size: .925rem;
  font-weight: 600;
  justify-content: flex-start;
  text-align: left;
}
.swal2-container .vg-swal .swal2-validation-message::before { background-color: var(--vg-red-text); }

/* ---- buttons: Bootstrap buttons of the site (buttonsStyling is off), cancel left / confirm right */
.swal2-container .vg-swal .swal2-actions { gap: .6rem; flex-wrap: wrap; padding: 0 1.75rem; width: 100%; box-sizing: border-box; }
.swal2-container .vg-swal .swal2-actions .btn { min-width: 7.5rem; padding: .6rem 1.4rem; font-weight: 600; }
.swal2-container .vg-swal .swal2-actions .swal2-loader { border-color: var(--vg-gold) transparent var(--vg-gold) transparent; }
.swal2-container .vg-swal .swal2-confirm.btn:focus-visible,
.swal2-container .vg-swal .swal2-cancel.btn:focus-visible,
.swal2-container .vg-swal .swal2-deny.btn:focus-visible { box-shadow: var(--swal2-outline); }
.swal2-container .vg-swal .swal2-loader { border-color: var(--vg-gold) transparent var(--vg-gold) transparent; }
@media (max-width: 575.98px) {
  .swal2-container .vg-swal .swal2-actions .btn { flex: 1 1 100%; }
}

.swal2-container .vg-swal .swal2-close { border-radius: 50%; width: 2.5rem; height: 2.5rem; margin: .5rem; }
.swal2-container .vg-swal .swal2-close:hover { color: var(--vg-ink); background: var(--vg-gold-subtle); }
.swal2-container .vg-swal .swal2-footer { color: var(--vg-muted); font-size: .9rem; }
.swal2-container .vg-swal .swal2-timer-progress-bar { height: .3rem; }

/* ---- toasts */
.swal2-container .swal2-popup.vg-toast {
  border-top: 0;
  border-left: 4px solid var(--vg-gold);
  border-radius: .9rem;
  padding: .75rem 1rem;
  color: var(--vg-ink);
  background: var(--vg-surface);
}
.swal2-container .swal2-popup.vg-toast:has(.swal2-icon.swal2-success) { border-left-color: var(--vg-success-text); }
.swal2-container .swal2-popup.vg-toast:has(.swal2-icon.swal2-error) { border-left-color: var(--vg-red-text); }
.swal2-container .vg-toast .swal2-title { font-size: 1rem; padding: 0; margin: .25rem .75rem; text-align: left; font-weight: 600; }
.swal2-container .vg-toast .swal2-icon { width: 1.9rem; height: 1.9rem; margin: 0 .25rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .swal2-container { --swal2-show-animation: none; --swal2-hide-animation: none; }
  .swal2-container.swal2-backdrop-show { transition: none; }
}