/* popup-standard.css — the default look of every SweetAlert2 pop-up in the solution
 * ("sample 1"): a small icon on the title line, the text under it, and big equal
 * buttons side by side for touch screens.
 *
 * It works on the library's standard markup, so the existing Swal.fire calls need no
 * change. Loaded together with js/popup-standard.js, which marks each pop-up's container
 * pv-light or pv-dark from the page it opens on (the areas use different theme classes).
 * Toasts are left alone. A call that passes its own background / color / width keeps them
 * (the library writes those inline).
 */
.swal2-container { --pv-bg: #ffffff; --pv-text: #1e293b; --pv-line: #cbd5e1; --pv-cancel-line: #334155; --pv-field: #ffffff; --pv-field-line: #94a3b8; }
.swal2-container.pv-dark { --pv-bg: #1e2233; --pv-text: #f1f5f9; --pv-line: #475569; --pv-cancel-line: #94a3b8; --pv-field: #2a2f45; --pv-field-line: #64748b; }

.swal2-popup.swal2-modal {
    max-width: 94vw; padding: 14px; border-radius: 16px;
    background: var(--pv-bg); color: var(--pv-text); border: 1px solid var(--pv-line);
    font-size: 16px;
}
/* Title and text take the pop-up's own text colour, so a call with its own colours stays readable */
.swal2-popup.swal2-modal .swal2-title { color: inherit; font-size: 19px; font-weight: 800; line-height: 1.25; padding: 0; margin: 0; }
.swal2-popup.swal2-modal .swal2-html-container { color: inherit; font-size: 15px; line-height: 1.4; margin: 6px 0 0; padding: 0; }
.swal2-popup.swal2-modal .swal2-footer { color: inherit; }

/* Small icon: 34px instead of the library's 80px (its parts are sized in em).
   The library draws the rings very pale; full colour keeps a small icon readable. */
.swal2-popup.swal2-modal .swal2-icon { font-size: 6.8px; margin: 0 auto 6px; flex-shrink: 0; border-width: 2px; }
.swal2-popup.swal2-modal .swal2-icon.swal2-warning { border-color: #f59e0b; color: #d97706; }
.swal2-popup.swal2-modal .swal2-icon.swal2-question { border-color: #6366f1; color: #6366f1; }
.swal2-popup.swal2-modal .swal2-icon.swal2-info { border-color: #3b82f6; color: #3b82f6; }
.swal2-popup.swal2-modal .swal2-icon.swal2-error { border-color: #ef4444; }
.swal2-popup.swal2-modal .swal2-icon.swal2-success { border-color: #22c55e; }
.swal2-popup.swal2-modal .swal2-icon.swal2-success .swal2-success-ring { border-color: #22c55e; }
.swal2-container.pv-dark .swal2-popup.swal2-modal .swal2-icon.swal2-question { border-color: #a5b4fc; color: #a5b4fc; }
.swal2-container.pv-dark .swal2-popup.swal2-modal .swal2-icon.swal2-warning { color: #fbbf24; }
.swal2-container.pv-dark .swal2-popup.swal2-modal .swal2-icon.swal2-info { border-color: #93c5fd; color: #93c5fd; }

/* When an icon is showing: icon and title share the first line, everything else runs full width */
.swal2-popup.swal2-modal:has(> .swal2-icon[style*="flex"]) { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.swal2-popup.swal2-modal:has(> .swal2-icon[style*="flex"]) > .swal2-icon { grid-column: 1; grid-row: 1; margin: 0; }
.swal2-popup.swal2-modal:has(> .swal2-icon[style*="flex"]) > .swal2-title { grid-column: 2; grid-row: 1; text-align: start; }
.swal2-popup.swal2-modal:has(> .swal2-icon[style*="flex"]) > *:not(.swal2-icon):not(.swal2-title):not(.swal2-close) { grid-column: 1 / -1; }
.swal2-popup.swal2-modal:has(> .swal2-icon[style*="flex"]) > .swal2-html-container { text-align: start; }

/* The corner close (where a pop-up has one) stays out of the layout */
.swal2-popup.swal2-modal > .swal2-close { position: absolute; top: 6px; inset-inline-end: 6px; margin: 0; }

/* Big touch buttons: 54px tall, 12px apart, equal width. Their fill colour comes from each call. */
.swal2-popup.swal2-modal .swal2-actions { display: flex; width: 100%; margin: 14px 0 0; padding: 0; gap: 12px; flex-wrap: nowrap; }
.swal2-popup.swal2-modal .swal2-actions .swal2-styled {
    flex: 1 1 0; min-width: 0; min-height: 54px; margin: 0; padding: 8px 12px;
    border-radius: 12px; border: 0; font-size: 16px; font-weight: 800; color: #ffffff;
    box-shadow: none; align-items: center; justify-content: center; gap: 6px;
}
.swal2-popup.swal2-modal .swal2-actions .swal2-styled.swal2-cancel { border: 1px solid var(--pv-cancel-line); }
.swal2-popup.swal2-modal .swal2-actions .swal2-styled:hover { filter: brightness(1.12); color: #ffffff; background-image: none; }
.swal2-popup.swal2-modal .swal2-actions .swal2-styled:active { filter: brightness(0.88); color: #ffffff; background-image: none; transform: scale(0.98); }
.swal2-popup.swal2-modal .swal2-actions .swal2-styled:focus-visible { outline: 3px solid #38bdf8; outline-offset: 2px; box-shadow: none; }
.swal2-popup.swal2-modal .swal2-actions .swal2-styled:disabled { opacity: 0.55; }

/* The "About Us" card (Views/Shared/_AboutUsSwal.cshtml): one fixed navy palette in every theme — text #eef3fa on #131f33 */
.swal2-container .swal2-popup.about-yakutsoft-swal { background: #131f33 !important; color: #eef3fa !important; border: 1px solid rgba(129,140,248,0.35) !important; border-radius: 14px; }
.swal2-container .swal2-popup.about-yakutsoft-swal .swal2-html-container { color: #eef3fa !important; }

/* The library's own input / textarea / select, for the few pop-ups that use them */
.swal2-popup.swal2-modal .swal2-input, .swal2-popup.swal2-modal .swal2-textarea, .swal2-popup.swal2-modal .swal2-select {
    background: var(--pv-field); color: var(--pv-text); border: 1px solid var(--pv-field-line); margin: 10px 0 0; width: 100%; box-sizing: border-box;
}
.swal2-popup.swal2-modal .swal2-validation-message { background: var(--pv-field); color: var(--pv-text); margin: 10px 0 0; }