/* ============================================================
   Mobile Toast Notifications
   Overrides jquery-toast defaults for mobile screens.
   Position: bottom-center, above the bottom nav bar.
   Dark/light mode is handled in mobile-notification.js (colors
   are set per-call based on data-theme). Layout overrides here.
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────────── */
.jq-toast-wrap {
  width: calc(100% - 24px) !important;
  max-width: 440px !important;
  /* center horizontally */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  /* sit above the bottom nav (≈56 px) + safe area */
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  z-index: 99990 !important;
  pointer-events: none !important;
}

/* ── Single toast card ───────────────────────────────────────── */
.jq-toast-single {
  border-radius: 14px !important;
  font-size: 13px !important;
  font-family: "Source Sans Pro", "Cairo", sans-serif !important;
  line-height: 1.55 !important;
  padding: 12px 36px 12px 50px !important;
  margin: 0 0 6px !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  pointer-events: all !important;
  position: relative !important;
  overflow: hidden !important;
  /* slide-up entrance */
  animation: mtoast-in 0.28s cubic-bezier(0.34, 1.26, 0.64, 1) both !important;
}

@keyframes mtoast-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Heading ─────────────────────────────────────────────────── */
.jq-toast-single h2,
.jq-toast-single .jq-toast-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  letter-spacing: 0.01em !important;
}

/* ── Body text ───────────────────────────────────────────────── */
.jq-toast-single p,
.jq-toast-single
  > *:not(h2):not(.jq-toast-loader):not(.close-jq-toast-single):not(
    .jq-toast-heading
  ) {
  font-size: 12px !important;
  margin: 3px 0 0 !important;
  opacity: 0.85 !important;
}

/* ── Progress bar ────────────────────────────────────────────── */
.jq-toast-loader {
  height: 3px !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 0 !important;
}
.jq-toast-loaded {
  width: 100% !important;
}

/* ── Close button ────────────────────────────────────────────── */
.close-jq-toast-single {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0.65 !important;
  padding: 4px !important;
}
.close-jq-toast-single:hover {
  opacity: 1 !important;
}

/* ── Icon positioning ────────────────────────────────────────── */
.jq-has-icon {
  padding-left: 50px !important;
  background-position: 14px 50% !important;
  background-size: 22px 22px !important;
  background-repeat: no-repeat !important;
}

/* ── "Close all" button injected by notification.js ─────────── */
.close-jq-toast-single.btn {
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  margin-top: 6px !important;
}