/*
 * Pop-up messages (SweetAlert2 v11) in Shoprite's look (SS-305).
 *
 * Every Swal.fire() on every page takes this look without being changed:
 * the dialogs, their buttons and icons, and the small toasts. It also gives
 * a look to the buttons of the 110 dialogs that still pass
 * confirmButtonClass with buttonsStyling: false; SweetAlert v11 ignores that
 * option, so those buttons had no style at all.
 *
 * Colours come from notifications.css (--sr-*), so light and dark mode
 * follow the theme.
 */

.swal2-container {
    font-family: inherit;
}

/* The dialog */

.swal2-popup:not(.swal2-toast) {
    width: min(30em, calc(100vw - 32px));
    padding: 1.75em 1.5em 1.5em;
    border: 1px solid var(--sr-line, #e3e8ee);
    border-radius: 14px;
    background: var(--sr-surface, #fff);
    color: var(--sr-text, #495057);
    box-shadow: var(--sr-shadow, 0 18px 48px rgba(25, 30, 37, 0.18));
}

.swal2-popup:not(.swal2-toast) .swal2-title {
    padding-top: 0.6em;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--sr-ink, #1f2328);
}

.swal2-popup:not(.swal2-toast) .swal2-html-container {
    margin-top: 0.6em;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--sr-text, #495057);
}

.swal2-popup .swal2-close {
    color: var(--sr-muted, #6b7280);
    border-radius: 50%;
}

.swal2-popup .swal2-close:hover {
    color: var(--sr-ink, #1f2328);
    background: var(--sr-surface-sunk, #f3f6f9);
}

.swal2-popup .swal2-close:focus {
    box-shadow: 0 0 0 3px var(--sr-red-ring, rgba(213, 0, 25, 0.28));
}

/* The buttons: styled by SweetAlert, styled by nothing (confirmButtonClass),
   or Bootstrap buttons through customClass */

.swal2-popup .swal2-actions {
    gap: 8px;
    margin-top: 1.4em;
}

.swal2-popup .swal2-actions > button:not(.btn) {
    margin: 0;
    padding: 0.62em 1.25em;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.swal2-popup .swal2-actions > button.swal2-confirm:not(.btn) {
    background: var(--sr-red, #d50019) !important;
    color: #fff !important;
}

.swal2-popup .swal2-actions > button.swal2-confirm:not(.btn):hover {
    background: var(--sr-red-strong, #a30013) !important;
}

.swal2-popup .swal2-actions > button.swal2-deny:not(.btn) {
    background: var(--sr-slate, #333b46) !important;
    color: #fff !important;
}

/* Cancel is the template's light button, as the Close of other pop-ups */
.swal2-popup .swal2-actions > button.swal2-cancel:not(.btn) {
    background: var(--vz-light, #f3f6f9) !important;
    color: var(--vz-emphasis-color, #212529) !important;
    border-color: var(--vz-light, #f3f6f9);
}

.swal2-popup .swal2-actions > button.swal2-cancel:not(.btn):hover {
    background: var(--vz-light-bg-subtle, #e9ecef) !important;
    border-color: var(--vz-light-bg-subtle, #e9ecef);
}

.swal2-popup .swal2-actions > button:not(.btn):focus,
.swal2-popup .swal2-actions > button:not(.btn):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sr-red-ring, rgba(213, 0, 25, 0.28));
}

/* Bootstrap buttons (confirmButtonClass, customClass): whatever colour a
   page gave them, the confirm button is Shoprite red and the cancel button
   the light button, the same on every page */
.swal2-popup .swal2-actions > .swal2-confirm.btn {
    --vz-btn-bg: var(--sr-red, #d50019);
    --vz-btn-border-color: var(--sr-red, #d50019);
    --vz-btn-color: #fff;
    --vz-btn-hover-bg: var(--sr-red-strong, #a30013);
    --vz-btn-hover-border-color: var(--sr-red-strong, #a30013);
    --vz-btn-hover-color: #fff;
    --vz-btn-active-bg: var(--sr-red-strong, #a30013);
    --vz-btn-active-border-color: var(--sr-red-strong, #a30013);
    --vz-btn-active-color: #fff;
    --vz-btn-focus-shadow-rgb: 213, 0, 25;
}

.swal2-popup .swal2-actions > .swal2-cancel.btn {
    --vz-btn-bg: var(--vz-light, #f3f6f9);
    --vz-btn-border-color: var(--vz-light, #f3f6f9);
    --vz-btn-color: var(--vz-emphasis-color, #212529);
    --vz-btn-hover-bg: var(--vz-light-bg-subtle, #e9ecef);
    --vz-btn-hover-border-color: var(--vz-light-bg-subtle, #e9ecef);
    --vz-btn-hover-color: var(--vz-emphasis-color, #212529);
    --vz-btn-active-bg: var(--vz-light-bg-subtle, #e9ecef);
    --vz-btn-active-border-color: var(--vz-light-bg-subtle, #e9ecef);
    --vz-btn-active-color: var(--vz-emphasis-color, #212529);
    --vz-btn-focus-shadow-rgb: 213, 0, 25;
}

.swal2-popup .swal2-actions > .swal2-deny.btn {
    --vz-btn-bg: var(--sr-slate, #333b46);
    --vz-btn-border-color: var(--sr-slate, #333b46);
    --vz-btn-color: #fff;
    --vz-btn-hover-bg: var(--sr-slate-deep, #262c34);
    --vz-btn-hover-border-color: var(--sr-slate-deep, #262c34);
    --vz-btn-hover-color: #fff;
}

.swal2-popup .swal2-actions > .btn {
    margin: 0 !important;
    border-radius: 8px;
    font-weight: 500;
}

/* The icons, in the notification tones */

/* Success green, warning yellow, error red (Hanno, 23 October 2026) */
.swal2-icon.swal2-success {
    border-color: rgba(30, 158, 90, 0.3);
    color: var(--sr-tone-success, #1e9e5a);
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(30, 158, 90, 0.3);
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--sr-tone-success, #1e9e5a);
}

.swal2-icon.swal2-error {
    border-color: var(--sr-tone-danger, #d50019);
    color: var(--sr-tone-danger, #d50019);
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--sr-tone-danger, #d50019);
}

.swal2-icon.swal2-warning {
    border-color: var(--sr-tone-warning, #e0a800);
    color: var(--sr-tone-warning, #e0a800);
}

.swal2-icon.swal2-info {
    border-color: var(--sr-tone-info, #2563c9);
    color: var(--sr-tone-info, #2563c9);
}

.swal2-icon.swal2-question {
    border-color: var(--sr-slate, #333b46);
    color: var(--sr-slate, #333b46);
}

[data-bs-theme="dark"] .swal2-icon.swal2-question {
    border-color: var(--sr-tone-slate, #aab2bf);
    color: var(--sr-tone-slate, #aab2bf);
}

/* The success animation paints over the ring with the popup colour */
.swal2-icon.swal2-success [class^="swal2-success-circular-line"],
.swal2-icon.swal2-success .swal2-success-fix {
    background-color: var(--sr-surface, #fff) !important;
}

/* Inputs and messages */

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    border: 1px solid var(--sr-line, #e3e8ee);
    border-radius: 8px;
    background: var(--sr-surface, #fff);
    color: var(--sr-ink, #1f2328);
    box-shadow: none;
}

.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus {
    border-color: var(--sr-red, #d50019);
    box-shadow: 0 0 0 3px var(--sr-red-ring, rgba(213, 0, 25, 0.28));
}

.swal2-popup .swal2-validation-message {
    background: var(--sr-tone-danger-bg, rgba(196, 18, 47, 0.1));
    color: var(--sr-tone-danger, #c4122f);
}

.swal2-popup .swal2-loader {
    border-color: var(--sr-red, #d50019) transparent var(--sr-red, #d50019) transparent;
}

.swal2-timer-progress-bar {
    background: var(--sr-red, #d50019);
    opacity: 0.6;
}

/* The toasts: a card like the live notifications, under the top bar */

body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right,
body.swal2-toast-shown .swal2-container.swal2-top-start,
body.swal2-toast-shown .swal2-container.swal2-top-left,
body.swal2-toast-shown .swal2-container.swal2-top {
    top: var(--vz-header-height, 70px);
}

.swal2-popup.swal2-toast {
    align-items: center;
    padding: 0.7em 0.9em;
    border: 1px solid var(--sr-line, #e3e8ee);
    border-radius: 12px;
    background: var(--sr-surface, #fff);
    color: var(--sr-text, #495057);
    box-shadow: var(--sr-shadow, 0 18px 48px rgba(25, 30, 37, 0.18));
}

.swal2-popup.swal2-toast .swal2-title {
    margin: 0 0.6em;
    font-size: 0.92em;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sr-ink, #1f2328);
}

.swal2-popup.swal2-toast .swal2-html-container {
    margin: 0.3em 0.6em 0;
    font-size: 0.88em;
    color: var(--sr-text, #495057);
}

.swal2-popup.swal2-toast .swal2-close {
    font-size: 1.4em;
}

.swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .swal2-show,
    .swal2-hide,
    .swal2-icon-show,
    .swal2-icon-show * {
        animation: none !important;
    }
}