/**
 * FloatDock frontend
 * دکمه اصلی در باکس ثابت می‌ماند؛ برچسب‌ها absolute هستند تا layout shift نداشته باشیم.
 */

.fd-root {
  --fd-size: 56px;
  --fd-size-mobile: 52px;
  --fd-offset-x: 20px;
  --fd-offset-y: 20px;
  --fd-z: 9999;
  --fd-main: #0f766e;
  --fd-main-icon: #fff;
  --fd-main-radius: 999px;
  --fd-main-opacity: 1;
  --fd-gap: 10px;
  position: fixed;
  z-index: var(--fd-z);
  width: var(--fd-size);
  height: var(--fd-size);
  font-family: Tahoma, "Segoe UI", sans-serif;
  direction: ltr;
  /* جلوگیری از اثر برچسب روی باکس ریشه */
  overflow: visible;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fd-pos-bottom-right {
  right: var(--fd-offset-x);
  bottom: var(--fd-offset-y);
  left: auto;
  top: auto;
}

.fd-pos-bottom-left {
  left: var(--fd-offset-x);
  bottom: var(--fd-offset-y);
  right: auto;
  top: auto;
}

.fd-pos-top-right {
  right: var(--fd-offset-x);
  top: var(--fd-offset-y);
  left: auto;
  bottom: auto;
}

.fd-pos-top-left {
  left: var(--fd-offset-x);
  top: var(--fd-offset-y);
  right: auto;
  bottom: auto;
}

.fd-main {
  position: absolute;
  inset: 0;
  width: var(--fd-size);
  height: var(--fd-size);
  border: 0;
  border-radius: var(--fd-main-radius, 999px);
  background: var(--fd-main);
  color: var(--fd-main-icon);
  opacity: var(--fd-main-opacity, 1);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fd-main:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
}

.fd-main:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.fd-main-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.fd-main-icon svg {
  width: 24px;
  height: 24px;
}

.fd-main-close {
  display: none;
}

.fd-root.is-open .fd-main-open {
  display: none;
}

.fd-root.is-open .fd-main-close {
  display: inline-flex;
}

.fd-action-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--fd-label-bg, #0f172a);
  color: var(--fd-label-fg, #fff);
  font-size: var(--fd-label-size, 12px);
  padding: var(--fd-label-pad-y, 7px) var(--fd-label-pad-x, 10px);
  border-radius: var(--fd-label-radius, 8px);
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
  /* باید کلیک‌پذیر باشد تا کادر برچسب هم همان لینک اکشن را باز کند */
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  direction: rtl;
}

.fd-main-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--fd-label-bg, #0f172a);
  color: var(--fd-label-fg, #fff);
  font-size: var(--fd-label-size, 12px);
  line-height: 1;
  padding: var(--fd-label-pad-y, 7px) var(--fd-label-pad-x, 10px);
  border-radius: var(--fd-label-radius, 8px);
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
}

.fd-pos-bottom-right .fd-main-label,
.fd-pos-top-right .fd-main-label {
  right: calc(100% + 10px);
  left: auto;
}

.fd-pos-bottom-left .fd-main-label,
.fd-pos-top-left .fd-main-label {
  left: calc(100% + 10px);
  right: auto;
}

.fd-actions {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: var(--fd-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fd-actions[hidden] {
  display: none !important;
}

/* جهت باز شدن */
.fd-expand-up .fd-actions {
  left: 0;
  right: 0;
  bottom: calc(100% + var(--fd-gap));
  top: auto;
  flex-direction: column;
  align-items: center;
}

.fd-expand-down .fd-actions {
  left: 0;
  right: 0;
  top: calc(100% + var(--fd-gap));
  bottom: auto;
  flex-direction: column;
  align-items: center;
}

.fd-expand-left .fd-actions {
  top: 0;
  bottom: 0;
  right: calc(100% + var(--fd-gap));
  left: auto;
  flex-direction: row;
  align-items: center;
}

.fd-expand-right .fd-actions {
  top: 0;
  bottom: 0;
  left: calc(100% + var(--fd-gap));
  right: auto;
  flex-direction: row;
  align-items: center;
}

.fd-action {
  --fd-action-bg: #0f766e;
  --fd-action-fg: #fff;
  position: relative;
  width: var(--fd-size);
  height: var(--fd-size);
  flex: 0 0 var(--fd-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--fd-action-fg);
  transform-origin: center center;
  animation-duration: 0.28s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  animation-delay: calc(var(--fd-i, 0) * 45ms);
  /* دکمه پاپ‌آپ هم همین ظاهر را داشته باشد */
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.fd-anim-open-pop .fd-action {
  animation-name: fd-pop;
}

.fd-anim-open-fade .fd-action {
  animation-name: fd-fade;
}

.fd-anim-open-scale .fd-action {
  animation-name: fd-scale;
}

.fd-anim-open-slide.fd-expand-up .fd-action {
  animation-name: fd-slide-up;
}

.fd-anim-open-slide.fd-expand-down .fd-action {
  animation-name: fd-slide-down;
}

.fd-anim-open-slide.fd-expand-left .fd-action {
  animation-name: fd-slide-left;
}

.fd-anim-open-slide.fd-expand-right .fd-action {
  animation-name: fd-slide-right;
}

.fd-anim-open-fan .fd-action {
  animation-name: fd-fan;
}

.fd-anim-open-stagger .fd-action {
  animation-name: fd-stagger;
  animation-delay: calc(var(--fd-i, 0) * 70ms);
}

.fd-action-icon {
  width: calc(var(--fd-size) - 8px);
  height: calc(var(--fd-size) - 8px);
  border-radius: 999px;
  background: var(--fd-action-bg);
  color: var(--fd-action-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.fd-action:hover .fd-action-icon {
  transform: scale(1.06);
}

.fd-action-icon svg {
  width: 22px;
  height: 22px;
}

/* برچسب‌ها خارج از جریان — بدون جابه‌جا کردن آیکون/دکمه */
.fd-label-left .fd-action-label {
  right: calc(100% + 8px);
  left: auto;
}

.fd-label-right .fd-action-label {
  left: calc(100% + 8px);
  right: auto;
}

.fd-label-hidden .fd-action-label {
  display: none !important;
}

/* وقتی باز شدن افقی است، برچسب‌ها بالا/پایین آیکون خواناترند اگر left/right شلوغ شود — ولی تنظیمات کاربر اولویت دارد */

/* Attention animations on main button (when closed) */
.fd-anim-att-pulse:not(.is-open) .fd-main {
  animation: fd-att-pulse 2s ease-in-out infinite;
}

.fd-anim-att-bounce:not(.is-open) .fd-main {
  animation: fd-att-bounce 1.6s ease-in-out infinite;
}

.fd-anim-att-shake:not(.is-open) .fd-main {
  animation: fd-att-shake 2.4s ease-in-out infinite;
}

.fd-anim-att-ring:not(.is-open) .fd-main::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--fd-main-radius, 999px);
  box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.45);
  animation: fd-att-ring 1.8s ease-out infinite;
  pointer-events: none;
}

.fd-anim-att-glow:not(.is-open) .fd-main {
  animation: fd-att-glow 2s ease-in-out infinite;
}

.fd-anim-att-wiggle:not(.is-open) .fd-main {
  animation: fd-att-wiggle 2.2s ease-in-out infinite;
}

@keyframes fd-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fd-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fd-scale {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fd-slide-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fd-slide-down {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fd-slide-left {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fd-slide-right {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fd-fan {
  from {
    opacity: 0;
    transform: rotate(calc((var(--fd-i, 0) - 2) * -8deg)) scale(0.85);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes fd-att-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.32);
  }
}

@keyframes fd-att-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

@keyframes fd-att-shake {
  0%,
  80%,
  100% {
    transform: rotate(0);
  }
  85% {
    transform: rotate(-8deg);
  }
  90% {
    transform: rotate(8deg);
  }
  95% {
    transform: rotate(-5deg);
  }
}

@keyframes fd-att-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.45);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 16px rgba(15, 118, 110, 0);
    opacity: 0;
  }
}

@keyframes fd-stagger {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fd-att-glow {
  0%,
  100% {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22), 0 0 0 0 rgba(15, 118, 110, 0.35);
  }
  50% {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28), 0 0 0 10px rgba(15, 118, 110, 0);
  }
}

@keyframes fd-att-wiggle {
  0%,
  70%,
  100% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-6deg);
  }
  85% {
    transform: rotate(6deg);
  }
  92% {
    transform: rotate(-3deg);
  }
}

/* Badge */
.fd-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45);
  z-index: 3;
  pointer-events: none;
}

.fd-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
}

/* Label mode hover */
.fd-label-mode-hover .fd-action-label,
.fd-label-mode-hover .fd-main-label {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.fd-label-mode-hover .fd-action:hover .fd-action-label,
.fd-label-mode-hover .fd-action:focus-visible .fd-action-label,
.fd-label-mode-hover .fd-main:hover .fd-main-label,
.fd-label-mode-hover .fd-main:focus-visible .fd-main-label {
  opacity: 1;
  visibility: visible;
}

.fd-label-mode-hidden .fd-action-label,
.fd-label-mode-hidden .fd-main-label {
  display: none !important;
}

/* Welcome bubble */
.fd-welcome {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: min(260px, 70vw);
  background: #fff;
  color: #0f172a;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
  padding: 12px 14px 12px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  direction: rtl;
  z-index: 4;
  animation: fd-fade 0.25s ease both;
}

/* display:flex بالا ویژگی hidden مرورگر را خنثی می‌کند؛ باید صریح باشد. */
.fd-welcome[hidden] {
  display: none !important;
}

.fd-pos-bottom-left .fd-welcome,
.fd-pos-top-left .fd-welcome {
  right: auto;
  left: 0;
}

.fd-pos-top-right .fd-welcome,
.fd-pos-top-left .fd-welcome {
  bottom: auto;
  top: calc(100% + 12px);
}

.fd-welcome-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 40px;
}

.fd-welcome-title {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.fd-welcome-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
}

.fd-welcome-close {
  position: absolute;
  top: 6px;
  left: 8px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.fd-offline-msg {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  max-width: 220px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 10px;
  direction: rtl;
  z-index: 4;
}

.fd-pos-bottom-left .fd-offline-msg,
.fd-pos-top-left .fd-offline-msg {
  right: auto;
  left: 0;
}

.fd-root.is-offline .fd-action {
  opacity: 0.55;
  pointer-events: none;
}

.fd-root.fd-awaiting-trigger,
.fd-root.fd-scroll-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.fd-root.fd-scroll-hidden {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Sticky bar layout */
.fd-layout-bar,
.fd-layout-auto {
  /* auto switches via media query */
}

.fd-layout-bar {
  left: 0 !important;
  right: 0 !important;
  width: auto;
  height: auto;
  padding: 0;
}

.fd-layout-bar.fd-pos-bottom-right,
.fd-layout-bar.fd-pos-bottom-left {
  bottom: 0;
  top: auto;
  left: 0 !important;
  right: 0 !important;
}

.fd-layout-bar.fd-pos-top-right,
.fd-layout-bar.fd-pos-top-left {
  top: 0;
  bottom: auto;
  left: 0 !important;
  right: 0 !important;
}

.fd-layout-bar .fd-main {
  display: none;
}

.fd-layout-bar .fd-actions {
  position: static;
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  background: #0f172a;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.18);
}

.fd-layout-bar .fd-action {
  position: relative;
  flex: 1 1 0;
  width: auto;
  height: 56px;
  min-height: 56px;
  border-radius: 0;
}

.fd-layout-bar .fd-action-icon {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  color: #fff;
}

.fd-layout-bar .fd-action-label {
  position: static;
  transform: none;
  background: transparent;
  color: inherit;
  box-shadow: none;
  padding: 0;
  font-size: 11px;
  opacity: 0.95;
}

.fd-layout-bar .fd-action-icon svg {
  width: 20px;
  height: 20px;
}

.fd-layout-bar .fd-action:nth-child(odd) .fd-action-icon {
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 782px) {
  .fd-root {
    width: var(--fd-size-mobile, var(--fd-size));
    height: var(--fd-size-mobile, var(--fd-size));
  }

  .fd-root:not(.fd-layout-bar) .fd-main,
  .fd-root:not(.fd-layout-bar) .fd-action {
    width: var(--fd-size-mobile, var(--fd-size));
    height: var(--fd-size-mobile, var(--fd-size));
  }

  .fd-root:not(.fd-layout-bar) .fd-action {
    flex-basis: var(--fd-size-mobile, var(--fd-size));
  }

  /* auto: موبایل = نوار */
  .fd-layout-auto {
    left: 0 !important;
    right: 0 !important;
    width: auto;
    height: auto;
    bottom: 0 !important;
    top: auto !important;
  }

  .fd-layout-auto .fd-main {
    display: none;
  }

  .fd-layout-auto .fd-actions {
    position: static;
    display: flex !important;
    flex-direction: row;
    width: 100%;
    background: #0f172a;
    gap: 0;
  }

  .fd-layout-auto .fd-action {
    position: relative;
    flex: 1 1 0;
    width: auto;
    height: 54px;
    border-radius: 0;
  }

  .fd-layout-auto .fd-action-icon {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    flex-direction: column;
    gap: 3px;
    background: transparent;
    color: #fff;
  }

  .fd-layout-auto .fd-action-label {
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-size: 10px;
  }
}

@media (max-width: 782px) {
  .fd-device-desktop {
    display: none !important;
  }
}

@media (min-width: 783px) {
  .fd-device-mobile {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fd-action,
  .fd-main,
  .fd-action-icon,
  .fd-welcome,
  .fd-modal,
  .fd-modal-dialog,
  .fd-anim-att-ring:not(.is-open) .fd-main::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Popup / Modal (خارج از FAB تا تداخل z-index نداشته باشد) ===== */
.fd-modal {
  position: fixed;
  inset: 0;
  z-index: var(--fd-popup-z, 100050);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.fd-modal[hidden] {
  display: none !important;
}

.fd-modal-align-bottom {
  align-items: flex-end;
}

.fd-modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--fd-popup-overlay, #0f172a);
  opacity: var(--fd-popup-overlay-a, 0.55);
}

.fd-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, var(--fd-popup-width, 420px));
  max-height: var(--fd-popup-max-h, 80vh);
  overflow: auto;
  background: var(--fd-popup-bg, #fff);
  color: var(--fd-popup-fg, #0f172a);
  border-radius: var(--fd-popup-radius, 16px);
  padding: var(--fd-popup-pad, 24px);
  border: var(--fd-popup-border-w, 0) solid var(--fd-popup-border-c, #e2e8f0);
  direction: rtl;
  box-sizing: border-box;
}

.fd-modal-shadow .fd-modal-dialog {
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}

.fd-modal-align-bottom .fd-modal-dialog {
  width: min(100%, var(--fd-popup-width, 420px));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.fd-modal-close {
  position: absolute;
  top: 10px;
  left: 12px;
  border: 0;
  background: transparent;
  color: var(--fd-popup-close, #64748b);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  z-index: 2;
}

.fd-modal-title {
  margin: 0 0 14px;
  padding-left: 28px;
  font-size: var(--fd-popup-title, 18px);
  line-height: 1.35;
  font-weight: 700;
}

.fd-modal-title[hidden] {
  display: none !important;
}

.fd-popup-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--fd-popup-text, 14px);
  line-height: 1.6;
}

.fd-popup-heading {
  margin: 0;
  font-size: 1.15em;
  line-height: 1.35;
}

.fd-popup-text {
  margin: 0;
}

.fd-align-right { text-align: right; }
.fd-align-center { text-align: center; }
.fd-align-left { text-align: left; }

.fd-popup-image {
  width: 100%;
}

.fd-popup-image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  vertical-align: middle;
}

.fd-popup-image.fd-img-full img {
  width: 100%;
  max-height: 260px;
}

.fd-popup-image.fd-img-medium img {
  width: 70%;
  max-width: 280px;
}

.fd-popup-image.fd-img-small img {
  width: 40%;
  max-width: 160px;
}

.fd-popup-image.fd-align-right { text-align: right; }
.fd-popup-image.fd-align-center { text-align: center; }
.fd-popup-image.fd-align-left { text-align: left; }

.fd-popup-btn-wrap {
  display: flex;
  width: 100%;
}

.fd-popup-btn-wrap.fd-align-right { justify-content: flex-start; }
.fd-popup-btn-wrap.fd-align-center { justify-content: center; }
.fd-popup-btn-wrap.fd-align-left { justify-content: flex-end; }

.fd-popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  background: var(--fd-popup-btn-bg, #0f766e);
  color: var(--fd-popup-btn-fg, #fff);
  width: auto;
  min-width: 140px;
  max-width: 100%;
  box-sizing: border-box;
}

.fd-popup-btn-secondary {
  background: #e2e8f0;
  color: #0f172a;
}

.fd-popup-btn-ghost {
  background: transparent;
  color: var(--fd-popup-fg, #0f172a);
  border: 1px solid #cbd5e1;
}

.fd-popup-list {
  margin: 0;
  padding: 0 18px 0 0;
}

.fd-popup-list li {
  margin: 0 0 6px;
}

.fd-popup-divider {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 4px 0;
}

.fd-popup-html,
.fd-popup-shortcode {
  max-width: 100%;
  overflow: auto;
}

.fd-modal-anim-fade.is-open .fd-modal-overlay {
  animation: fd-fade 0.2s ease both;
}

.fd-modal-anim-fade.is-open .fd-modal-dialog {
  animation: fd-fade 0.22s ease both;
}

.fd-modal-anim-scale.is-open .fd-modal-dialog {
  animation: fd-popup-scale 0.22s ease both;
}

.fd-modal-anim-slide.is-open .fd-modal-dialog {
  animation: fd-popup-slide 0.25s ease both;
}

@keyframes fd-popup-scale {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fd-popup-slide {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

body.fd-modal-open {
  overflow: hidden;
}