/* User Visual Design Functional Overlays — Phase 3B.12
   Central protected contract for modals/overlays. Page CSS may define legacy
   component details, but positioning, viewport coverage, z-index, scroll lock,
   and functional sizing must live here so every future theme inherits safety.
*/
:root {
  --uvd-z-overlay: 2147482500;
  --uvd-z-overlay-high: 2147482600;
  --uvd-overlay-padding: 18px;
  --uvd-overlay-backdrop: rgba(2, 6, 23, .74);
  --uvd-overlay-backdrop-image: radial-gradient(circle at 50% 0%, rgba(57,117,196,.22), transparent 38%), linear-gradient(180deg, rgba(2,6,23,.68), rgba(0,0,0,.84));
  --uvd-overlay-backdrop-filter: blur(18px) saturate(120%);
  --uvd-overlay-backdrop-transition: background-color .18s ease, opacity .18s ease, backdrop-filter .18s ease, -webkit-backdrop-filter .18s ease;
  --uvd-dialog-width: min(94vw, 680px);
  --uvd-dialog-width-device-confirm: min(94vw, 620px);
  --uvd-dialog-width-device-check: min(94vw, 520px);
  --uvd-dialog-width-notice: min(94vw, 680px);
  --uvd-dialog-max-height: calc(100dvh - 36px);
  --uvd-dialog-radius: 28px;
  --uvd-dialog-bg: rgba(15, 23, 42, .96);
  --uvd-dialog-text: rgba(226, 232, 240, .96);
  --uvd-dialog-border: 1px solid rgba(148, 163, 184, .22);
  --uvd-dialog-shadow: 0 34px 110px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.04) inset;
}

html.uvd-scroll-lock-safe,
html.dashboard-notice-scroll-lock {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-gutter: stable;
}
body.uvd-body-locked,
body.dashboard-notice-body-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* Any visual skin must not create fixed-position containing blocks around
   protected overlay descendants. If a future skin wants depth/perspective,
   it should put it on child decorative layers, not the page wrapper. */
body.uvd-page-key-dashboard-home .dashboard-right,
body.uvd-page-key-downloads .container {
  perspective: none !important;
  transform-style: flat !important;
  contain: initial !important;
}

#deviceCheckOverlay,
#deviceConfirmOverlay,
.dashboard-notice-modal,
.push-result-modal-overlay,
.avatar-crop-modal,
.avatar-confirm-modal,
.account-trial-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  z-index: var(--uvd-z-overlay) !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
  direction: rtl;
  overscroll-behavior: contain;
}

#deviceCheckOverlay,
#deviceConfirmOverlay,
.dashboard-notice-modal,
.account-trial-modal,
.push-result-modal-overlay,
.avatar-crop-modal,
.avatar-confirm-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: var(--uvd-overlay-padding) !important;
}

/* Phase 3B.12 central backdrop contract: every protected functional overlay
   gets the real full-viewport dim/blur layer from core. Themes may tune the
   variables, but must not remove viewport coverage or visibility behavior. */
#deviceCheckOverlay,
#deviceConfirmOverlay,
.dashboard-notice-modal,
.account-trial-modal,
.push-result-modal-overlay,
.avatar-crop-modal,
.avatar-confirm-modal {
  background-color: var(--uvd-overlay-backdrop) !important;
  background-image: var(--uvd-overlay-backdrop-image) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  backdrop-filter: var(--uvd-overlay-backdrop-filter) !important;
  -webkit-backdrop-filter: var(--uvd-overlay-backdrop-filter) !important;
  transition: var(--uvd-overlay-backdrop-transition) !important;
}

/* Phase 3B.12 visibility contract: overlays are open only when their
   semantic state says so. Never force display:flex unconditionally; page JS
   may hide overlays with hidden/aria-hidden/data-uvd-visible/style during
   login/device checks. */
#deviceCheckOverlay,
#deviceConfirmOverlay,
.dashboard-notice-modal,
.account-trial-modal,
.push-result-modal-overlay,
.avatar-crop-modal,
.avatar-confirm-modal {
  display: none !important;
}

#deviceCheckOverlay:not([hidden]):not([aria-hidden="true"]):not([data-uvd-visible="false"]):not([style*="display:none"]):not([style*="display: none"]),
#deviceConfirmOverlay:not([hidden]):not([aria-hidden="true"]):not([data-uvd-visible="false"]):not([style*="display:none"]):not([style*="display: none"]),
.dashboard-notice-modal:not([hidden]):not([aria-hidden="true"]):not([data-uvd-visible="false"]):not([style*="display:none"]):not([style*="display: none"]),
.account-trial-modal:not([hidden]):not([aria-hidden="true"]):not([data-uvd-visible="false"]):not([style*="display:none"]):not([style*="display: none"]),
.push-result-modal-overlay:not([hidden]):not([aria-hidden="true"]):not([data-uvd-visible="false"]):not([style*="display:none"]):not([style*="display: none"]),
.avatar-crop-modal:not([hidden]):not([aria-hidden="true"]):not([data-uvd-visible="false"]):not([style*="display:none"]):not([style*="display: none"]),
.avatar-confirm-modal:not([hidden]):not([aria-hidden="true"]):not([data-uvd-visible="false"]):not([style*="display:none"]):not([style*="display: none"]) {
  display: flex !important;
}

#deviceCheckOverlay[hidden],
#deviceCheckOverlay[aria-hidden="true"],
#deviceCheckOverlay[data-uvd-visible="false"],
#deviceCheckOverlay[style*="display:none"],
#deviceCheckOverlay[style*="display: none"],
#deviceConfirmOverlay[hidden],
#deviceConfirmOverlay[aria-hidden="true"],
#deviceConfirmOverlay[data-uvd-visible="false"],
#deviceConfirmOverlay[style*="display:none"],
#deviceConfirmOverlay[style*="display: none"],
.dashboard-notice-modal[hidden],
.dashboard-notice-modal[aria-hidden="true"],
.dashboard-notice-modal[data-uvd-visible="false"],
.dashboard-notice-modal[style*="display:none"],
.dashboard-notice-modal[style*="display: none"],
.push-result-modal-overlay[hidden],
.push-result-modal-overlay[aria-hidden="true"],
.push-result-modal-overlay[data-uvd-visible="false"],
.avatar-crop-modal[hidden],
.avatar-crop-modal[aria-hidden="true"],
.avatar-crop-modal[data-uvd-visible="false"],
.avatar-confirm-modal[hidden],
.avatar-confirm-modal[aria-hidden="true"],
.avatar-confirm-modal[data-uvd-visible="false"],
.account-trial-modal[hidden],
.account-trial-modal[aria-hidden="true"],
.account-trial-modal[data-uvd-visible="false"] {
  display: none !important;
}

#deviceConfirmOverlay { --uvd-dialog-width: var(--uvd-dialog-width-device-confirm); }
#deviceCheckOverlay { --uvd-dialog-width: var(--uvd-dialog-width-device-check); }
.dashboard-notice-modal { --uvd-dialog-width: var(--uvd-dialog-width-notice); }

.dashboard-notice-modal__shade,
.account-trial-modal__shade {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background: transparent !important;
  pointer-events: auto;
}

.dashboard-notice-modal__card,
.account-trial-modal__card,
.push-result-modal-card,
.dc-modal,
.uvd-modal-card,
.uvd-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: var(--uvd-dialog-width) !important;
  max-width: var(--uvd-dialog-width) !important;
  max-height: var(--uvd-dialog-max-height) !important;
  overflow: hidden !important;
  border-radius: var(--uvd-dialog-radius) !important;
  background: var(--uvd-dialog-bg) !important;
  color: var(--uvd-dialog-text) !important;
  border: var(--uvd-dialog-border) !important;
  box-shadow: var(--uvd-dialog-shadow) !important;
  box-sizing: border-box !important;
}

.dashboard-notice-modal__card,
.account-trial-modal__card,
.push-result-modal-card,
.dc-modal {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.dashboard-notice-modal__message,
.account-trial-modal__items,
.push-result-modal-message,
.dc-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
}
.dashboard-notice-modal__message { max-height: min(50dvh, 430px) !important; }
.push-result-modal-message { max-height: min(42dvh, 360px) !important; }
.account-trial-modal__items { max-height: min(32dvh, 260px) !important; }
.dc-body { max-height: min(52dvh, 430px) !important; }

.dashboard-notice-modal__actions,
.account-trial-modal__actions,
.push-result-modal-actions,
.dc-actions {
  flex: 0 0 auto !important;
}

.uvd-device-check-card {
  width: var(--uvd-dialog-width-device-check) !important;
  max-width: var(--uvd-dialog-width-device-check) !important;
  border-radius: var(--uvd-dialog-radius);
  background: var(--uvd-dialog-bg);
  color: var(--uvd-dialog-text);
  border: var(--uvd-dialog-border);
  box-shadow: var(--uvd-dialog-shadow);
  padding: 22px 20px;
  text-align: center;
  font-family: Vazirmatn, Tahoma, sans-serif;
  box-sizing: border-box;
}
.uvd-device-check-title { font-size: 20px; font-weight: 950; }
.uvd-device-check-text { margin-top: 8px; font-size: 14px; opacity: .84; }
.uvd-device-check-spinner {
  margin: 16px auto 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(57,117,196,.25);
  border-top-color: #3975C4;
  animation: dcSpin 1s linear infinite;
}

#pwaInstallBanner {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  max-width: min(94vw, 560px) !important;
  z-index: 2147482100 !important;
  box-sizing: border-box !important;
  isolation: isolate;
}

.uvd-modal-overlay { position: fixed; inset: 0; z-index: var(--uvd-z-overlay); display: flex; align-items: center; justify-content: center; padding: var(--uvd-overlay-padding); direction: rtl; isolation: isolate; background: var(--uvd-overlay-backdrop); }
.uvd-modal-overlay[hidden] { display: none !important; }


/* Phase 3B.12: the dynamic push notification result modal uses the same
   central backdrop as every other protected overlay. Do not restyle its
   viewport layer in page CSS; only theme variables may tune the visual mood. */
.push-result-modal-overlay {
  --uvd-dialog-width: var(--uvd-dialog-width-push-result, min(94vw, 465px));
}

/* Phase 3B.12: central contract for the dynamic push notification result modal.
   JS may create this overlay at runtime, but visibility, focus target geometry,
   scroll-safety and action layout are owned by the central core. Theme files may
   only change visual variables/colors/shadows. */
.push-result-modal-overlay {
  font-family: Vazirmatn, Tahoma, sans-serif;
  color-scheme: dark;
}
.push-result-modal-card {
  --uvd-dialog-width: var(--uvd-dialog-width-push-result, min(94vw, 465px));
  padding: var(--uvd-push-dialog-padding, 24px 22px 20px) !important;
  text-align: right !important;
  animation: uvdDialogIn .18s ease-out;
}
.push-result-modal-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: var(--uvd-dialog-radius) var(--uvd-dialog-radius) 0 0;
  background: var(--uvd-push-dialog-accent, linear-gradient(90deg,#3975C4,#80b7ff,#f4c95d));
  box-shadow: var(--uvd-push-dialog-accent-shadow, 0 0 22px rgba(57,117,196,.32));
}
.push-result-modal-close {
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;
  width: 36px !important;
  height: 36px !important;
  z-index: 3 !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  line-height: 34px !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.push-result-modal-head {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  padding-left: 38px !important;
  margin-bottom: 12px !important;
}
.push-result-modal-icon {
  flex: 0 0 auto !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 29px !important;
  font-weight: 900 !important;
}
.push-result-modal-title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -.2px !important;
}
.push-result-modal-subtitle {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
}
.push-result-modal-message {
  margin: 14px 0 18px !important;
  padding: 14px 15px !important;
  border-radius: 18px !important;
  line-height: 2 !important;
  font-size: 14px !important;
  white-space: pre-wrap !important;
  box-sizing: border-box !important;
}
.push-result-modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.push-result-modal-ok,
.push-result-modal-action {
  min-height: 42px !important;
  border-radius: 16px !important;
  font-family: inherit !important;
  font-weight: 850 !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease !important;
}
.push-result-modal-ok:hover,
.push-result-modal-action:hover {
  transform: translateY(-1px);
}
@keyframes uvdDialogIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
  :root { --uvd-overlay-padding: 12px; --uvd-dialog-width: min(96vw, 680px); --uvd-dialog-max-height: calc(100dvh - 24px); --uvd-dialog-radius: 24px; }
  .dc-actions,
  .push-result-modal-actions { flex-direction: column !important; }
  .dashboard-notice-modal__actions,
  .account-trial-modal__actions { justify-content: stretch !important; }
  .dashboard-notice-modal__close,
  .account-trial-modal__btn,
  .push-result-modal-ok,
  .push-result-modal-action { width: 100% !important; }
  .push-result-modal-card { padding: 22px 16px 16px !important; }
  .push-result-modal-icon { width: 52px !important; height: 52px !important; border-radius: 19px !important; font-size: 25px !important; }
  .push-result-modal-title { font-size: 16px !important; }
  .push-result-modal-message { font-size: 13px !important; }
}