@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/* =====================================================================
   Splidu v3 SweetAlert theme
   ---------------------------------------------------------------------
   Skins EVERY popup site-wide to the v3 / MB design language.
   Load this file AFTER the SweetAlert css/js in each layout.

   Covers three libraries that live in this repo:
     1. SweetAlert2 v11 (live, .swal2-* / .swal2-html-container) — injects
        its own <style> into <head> at runtime, so we win via later source
        order + !important (also beats inline confirmButtonColor).
     2. SweetAlert v1 original (.sweet-alert / .sa-icon.sa-*) — used by the
        admin css/sweetalert.css + pc/ev/private-chef sweetalert-master dist.
     3. SweetAlert 2.x t4t5 (.swal-* / .swal-icon--*) — not bundled locally,
        included for CDN safety / future-proofing.

   Design tokens (v3 / public/mb/css/admin.css :root + .mbw-btn):
     ink #000 · muted #6D6E71 · line #E6E7E8 · primary #7C5CFC
     success #1FB47C · warning #E2A400 · error #E5484D
     gradient linear-gradient(135deg,#FF08C9,#AE00FF,#00AEFF)
     backdrop rgba(13,13,18,.55)
   ===================================================================== */

:root {
  --swx-ink: #000;
  --swx-mut: #6D6E71;
  --swx-line: #E6E7E8;
  --swx-primary: #7C5CFC;
  --swx-success: #1FB47C;
  --swx-warning: #E2A400;
  --swx-error: #E5484D;
  --swx-grad: linear-gradient(135deg, #FF08C9, #AE00FF, #00AEFF);
  --swx-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =====================================================================
   1) SweetAlert2  (v11 live + v6/v7 fallback)
   ===================================================================== */

/* Backdrop */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-shown {
  background: rgba(13, 13, 18, .55) !important;
}

/* Popup shell */
.swal2-container .swal2-popup,
.swal2-container .swal2-modal {
  font-family: var(--swx-font) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18) !important;
  padding: 1.5em 1.6em 1.35em !important;
  color: var(--swx-ink) !important;
}

/* Title */
.swal2-container .swal2-title {
  font-family: var(--swx-font) !important;
  color: var(--swx-ink) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  padding: .4em .6em 0 !important;
  margin: 0 !important;
}

/* Body text (v11 .swal2-html-container, v6/v7 .swal2-content) */
.swal2-container .swal2-html-container,
.swal2-container .swal2-content {
  font-family: var(--swx-font) !important;
  color: var(--swx-mut) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-top: .5em !important;
}

/* Actions row */
.swal2-container .swal2-actions,
.swal2-container .swal2-buttonswrapper {
  gap: 10px !important;
  margin-top: 1.15em !important;
}

/* Buttons — base pill */
.swal2-container .swal2-styled {
  font-family: var(--swx-font) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  padding: 12px 28px !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: filter .15s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease !important;
}

/* Confirm — gradient filled */
.swal2-container .swal2-styled.swal2-confirm {
  background: var(--swx-grad) !important;
  background-image: var(--swx-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
  border: 0 !important;
}
.swal2-container .swal2-styled.swal2-confirm:hover {
  filter: brightness(1.07) !important;
}

/* Cancel + Deny — white ghost */
.swal2-container .swal2-styled.swal2-cancel,
.swal2-container .swal2-styled.swal2-deny {
  background: #fff !important;
  background-image: none !important;
  background-color: #fff !important;
  color: var(--swx-mut) !important;
  border: 1.5px solid var(--swx-line) !important;
}
.swal2-container .swal2-styled.swal2-cancel:hover,
.swal2-container .swal2-styled.swal2-deny:hover {
  border-color: #B9BABC !important;
  color: var(--swx-ink) !important;
  background-color: #fff !important;
}

/* Focus ring — no default swal glow */
.swal2-container .swal2-styled:focus,
.swal2-container .swal2-styled.swal2-confirm:focus,
.swal2-container .swal2-styled.swal2-cancel:focus,
.swal2-container .swal2-styled.swal2-deny:focus {
  outline: 2px solid var(--swx-primary) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Inputs / selects / textarea */
.swal2-container .swal2-input,
.swal2-container .swal2-select,
.swal2-container .swal2-textarea,
.swal2-container .swal2-file {
  font-family: var(--swx-font) !important;
  border: 1px solid var(--swx-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--swx-ink) !important;
  font-size: 14px !important;
}
.swal2-container .swal2-input:focus,
.swal2-container .swal2-select:focus,
.swal2-container .swal2-textarea:focus {
  border-color: var(--swx-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 252, .15) !important;
  outline: none !important;
}

/* Icons */
.swal2-container .swal2-icon {
  border-width: 4px !important;
}
.swal2-container .swal2-icon.swal2-warning {
  border-color: var(--swx-warning) !important;
  color: var(--swx-warning) !important;
}
.swal2-container .swal2-icon.swal2-info,
.swal2-container .swal2-icon.swal2-question {
  border-color: var(--swx-primary) !important;
  color: var(--swx-primary) !important;
}
.swal2-container .swal2-icon.swal2-warning .swal2-icon-content,
.swal2-container .swal2-icon.swal2-info .swal2-icon-content,
.swal2-container .swal2-icon.swal2-question .swal2-icon-content {
  color: inherit !important;
}
.swal2-container .swal2-icon.swal2-error {
  border-color: var(--swx-error) !important;
}
.swal2-container .swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-container .swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: var(--swx-error) !important;
}
.swal2-container .swal2-icon.swal2-success {
  border-color: var(--swx-success) !important;
}
.swal2-container .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(31, 180, 124, .3) !important;
}
.swal2-container .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-container .swal2-icon.swal2-success .swal2-success-line-long {
  background-color: var(--swx-success) !important;
}

/* Loader + timer bar tint */
.swal2-container .swal2-loader {
  border-color: var(--swx-primary) transparent var(--swx-primary) transparent !important;
}
.swal2-container .swal2-timer-progress-bar {
  background: rgba(124, 92, 252, .35) !important;
}

/* Close button */
.swal2-container .swal2-close:hover,
.swal2-container .swal2-close:focus {
  color: var(--swx-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =====================================================================
   2) SweetAlert v1 original  (.sweet-alert / .sa-icon.sa-*)
   ===================================================================== */

.sweet-overlay {
  background-color: rgba(13, 13, 18, .55) !important;
}

.sweet-alert {
  font-family: var(--swx-font) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18) !important;
  padding: 24px 24px 20px !important;
}
.sweet-alert h2 {
  color: var(--swx-ink) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 14px 0 6px !important;
}
.sweet-alert p {
  color: var(--swx-mut) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.sweet-alert button {
  font-family: var(--swx-font) !important;
  border-radius: 999px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  padding: 12px 28px !important;
  box-shadow: none !important;
  color: #fff !important;
}
.sweet-alert button.confirm {
  background: var(--swx-grad) !important;
  background-image: var(--swx-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
}
.sweet-alert button.confirm:hover {
  filter: brightness(1.07) !important;
  background-image: var(--swx-grad) !important;
}
.sweet-alert button.cancel {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--swx-mut) !important;
  border: 1.5px solid var(--swx-line) !important;
}
.sweet-alert button.cancel:hover {
  background-color: #fff !important;
  color: var(--swx-ink) !important;
  border-color: #B9BABC !important;
}
.sweet-alert button:focus {
  outline: 2px solid var(--swx-primary) !important;
  box-shadow: none !important;
}

.sweet-alert input {
  border: 1px solid var(--swx-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--swx-font) !important;
}
.sweet-alert input:focus {
  border-color: var(--swx-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 252, .15) !important;
}

/* v1 icons */
.sweet-alert .sa-icon.sa-warning {
  border-color: var(--swx-warning) !important;
}
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot {
  background-color: var(--swx-warning) !important;
}
.sweet-alert .sa-icon.sa-info {
  border-color: var(--swx-primary) !important;
}
.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after {
  background-color: var(--swx-primary) !important;
}
.sweet-alert .sa-icon.sa-error {
  border-color: var(--swx-error) !important;
}
.sweet-alert .sa-icon.sa-error .sa-line {
  background-color: var(--swx-error) !important;
}
.sweet-alert .sa-icon.sa-success {
  border-color: var(--swx-success) !important;
}
.sweet-alert .sa-icon.sa-success .sa-line {
  background-color: var(--swx-success) !important;
}
.sweet-alert .sa-icon.sa-success .sa-placeholder {
  border-color: rgba(31, 180, 124, .2) !important;
}

/* =====================================================================
   3) SweetAlert 2.x t4t5  (.swal-* / .swal-icon--*)  — CDN safety
   ===================================================================== */

.swal-overlay {
  background-color: rgba(13, 13, 18, .55) !important;
}
.swal-modal {
  font-family: var(--swx-font) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18) !important;
}
.swal-title {
  color: var(--swx-ink) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}
.swal-text {
  color: var(--swx-mut) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
}
.swal-button {
  font-family: var(--swx-font) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  padding: 12px 28px !important;
  box-shadow: none !important;
}
.swal-button--confirm {
  background: var(--swx-grad) !important;
  background-image: var(--swx-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
}
.swal-button--confirm:hover {
  filter: brightness(1.07) !important;
  background-image: var(--swx-grad) !important;
}
.swal-button--cancel {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--swx-mut) !important;
  border: 1.5px solid var(--swx-line) !important;
}
.swal-button--cancel:hover {
  background-color: #fff !important;
  color: var(--swx-ink) !important;
  border-color: #B9BABC !important;
}
.swal-button:focus {
  outline: 2px solid var(--swx-primary) !important;
  box-shadow: none !important;
}
.swal-content__input,
.swal-content__textarea {
  border: 1px solid var(--swx-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.swal-content__input:focus,
.swal-content__textarea:focus {
  border-color: var(--swx-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 252, .15) !important;
}
.swal-icon--warning {
  border-color: var(--swx-warning) !important;
}
.swal-icon--warning__body,
.swal-icon--warning__dot {
  background-color: var(--swx-warning) !important;
}
.swal-icon--info {
  border-color: var(--swx-primary) !important;
}
.swal-icon--info::before,
.swal-icon--info::after {
  background-color: var(--swx-primary) !important;
}
.swal-icon--error {
  border-color: var(--swx-error) !important;
}
.swal-icon--error__line {
  background-color: var(--swx-error) !important;
}
.swal-icon--success {
  border-color: var(--swx-success) !important;
}
.swal-icon--success__line {
  background-color: var(--swx-success) !important;
}
.swal-icon--success__ring {
  border-color: rgba(31, 180, 124, .3) !important;
}
