/* Keyframes
   ========================================================================== */

@-webkit-keyframes zoom-blur-animation-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    opacity: 0;

    -webkit-filter: blur(2px);
    filter: blur(2px);
  }

  to {
    -webkit-transform: none;
    transform: none;

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes zoom-blur-animation-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    opacity: 0;

    -webkit-filter: blur(2px);
    filter: blur(2px);
  }

  to {
    -webkit-transform: none;
    transform: none;

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes zoom-blur-animation-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;

    -webkit-filter: blur();
    filter: blur(0);
  }

  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    opacity: 0;

    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
}

@keyframes zoom-blur-animation-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;

    -webkit-filter: blur();
    filter: blur(0);
  }

  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    opacity: 0;

    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
}

@-webkit-keyframes animation-overlay-opening-keyframes {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes animation-overlay-opening-keyframes {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes animation-overlay-closing-keyframes {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes animation-overlay-closing-keyframes {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


@-webkit-keyframes modalShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@keyframes modalShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@keyframes slideFromTop {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideToTop {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100px); opacity: 0; }
}

@keyframes slideFromBottom {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideToBottom {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100px); opacity: 0; }
}

@keyframes slideFromLeft {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideToLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100px); opacity: 0; }
}

@keyframes slideFromRight {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideToRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100px); opacity: 0; }
}
@-webkit-keyframes slideFromTop {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes slideToTop {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100px); opacity: 0; }
}

@-webkit-keyframes slideFromBottom {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes slideToBottom {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100px); opacity: 0; }
}

@-webkit-keyframes slideFromLeft {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@-webkit-keyframes slideToLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100px); opacity: 0; }
}

@-webkit-keyframes slideFromRight {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@-webkit-keyframes slideToRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100px); opacity: 0; }
}


@keyframes slideFullFromTop {
  from { transform: translateY(-100%); top: -100%; opacity: 0; }
  to { transform: translateY(0); top: 0; opacity: 1; }
}

@keyframes slideFullToTop {
  from { transform: translateY(0); top: 0; opacity: 1; }
  to { transform: translateY(-100%); top: -100%; opacity: 0; }
}

@keyframes slideFullFromBottom {
  from { transform: translateY(100%); bottom: -100%; opacity: 0; }
  to { transform: translateY(0); bottom: 0; opacity: 1; }
}

@keyframes slideFullToBottom {
  from { transform: translateY(0); bottom: 0; opacity: 1; }
  to { transform: translateY(100%); bottom: -100%; opacity: 0; }
}

@keyframes slideFullFromLeft {
  from { transform: translateX(-100%); left: -100%; opacity: 0; }
  to { transform: translateX(0); left: 0; opacity: 1; }
}

@keyframes slideFullToLeft {
  from { transform: translateX(0); left: 0; opacity: 1; }
  to { transform: translateX(-100%); left: -100%; opacity: 0; }
}

@keyframes slideFullFromRight {
  from { transform: translateX(100%); right: -100%; opacity: 0; }
  to { transform: translateX(0); right: 0; opacity: 1; }
}

@keyframes slideFullToRight {
  from { transform: translateX(0); right: 0; opacity: 1; }
  to { transform: translateX(100%); right: -100%; opacity: 0; }
}

/* Webkit support */
@-webkit-keyframes slideFullFromTop {
  from { transform: translateY(-100%); top: -100%; opacity: 0; }
  to { transform: translateY(0); top: 0; opacity: 1; }
}

@-webkit-keyframes slideFullToTop {
  from { transform: translateY(0); top: 0; opacity: 1; }
  to { transform: translateY(-100%); top: -100%; opacity: 0; }
}

@-webkit-keyframes slideFullFromBottom {
  from { transform: translateY(100%); bottom: -100%; opacity: 0; }
  to { transform: translateY(0); bottom: 0; opacity: 1; }
}

@-webkit-keyframes slideFullToBottom {
  from { transform: translateY(0); bottom: 0; opacity: 1; }
  to { transform: translateY(100%); bottom: -100%; opacity: 0; }
}

@-webkit-keyframes slideFullFromLeft {
  from { transform: translateX(-100%); left: -100%; opacity: 0; }
  to { transform: translateX(0); left: 0; opacity: 1; }
}

@-webkit-keyframes slideFullToLeft {
  from { transform: translateX(0); left: 0; opacity: 1; }
  to { transform: translateX(-100%); left: -100%; opacity: 0; }
}

@-webkit-keyframes slideFullFromRight {
  from { transform: translateX(100%); right: -100%; opacity: 0; }
  to { transform: translateX(0); right: 0; opacity: 1; }
}

@-webkit-keyframes slideFullToRight {
  from { transform: translateX(0); right: 0; opacity: 1; }
  to { transform: translateX(100%); right: -100%; opacity: 0; }
}



@keyframes scale-full-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scale-full-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@-webkit-keyframes scale-full-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes scale-full-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes prk-modal-zoom-in-center {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes prk-modal-zoom-out-center {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@-webkit-keyframes prk-modal-zoom-in-center {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes prk-modal-zoom-out-center {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes prk-slide-3d-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(200px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes prk-slide-3d-out-bottom {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(200px) scale(1.1);
  }
}

@-webkit-keyframes prk-slide-3d-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(200px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@-webkit-keyframes prk-slide-3d-out-bottom {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(200px) scale(1.1);
  }
}


/* Overlay */
.prk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  /* موبایل: مودال پایین */
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  backface-visibility: hidden;
  /* will-change: opacity, transform; */
  contain: layout paint;
}

.prk-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-out;
}

/* Base modal */
.prk-modal {
  background: white;
  z-index: 999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  align-self: center;
  /* transform: translateY(100%); */
  /* transition: opacity 0.3s ease-out, transform 0.3s ease-out; */
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backface-visibility: hidden;
  /* will-change: opacity, transform; */
  /* contain: layout paint; */
}

/* فعال شدن مودال */
.prk-modal.show {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-out;
}

html.modal-is-locked {
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}

.prk-modal {
  width: 700px;
  max-height: 90vh;
  border-radius: var(--prk-overlay-radius, 12px);
  /* transform: unset; */
}


/*------- انیمیشن ها -------*/

/* انیمیشن پیش فرض (شبیه ریمودال) */
.prk-modal-overlay.animation.modal-is-opening,
.prk-modal-overlay.animation.modal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.prk-modal-overlay.animation-duration02.modal-is-opening,
.prk-modal-overlay.animation-duration02.modal-is-closing {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.prk-modal-overlay.animation.modal-is-opening {
  -webkit-animation-name: animation-overlay-opening-keyframes;
  animation-name: animation-overlay-opening-keyframes;
}

.prk-modal-overlay.animation.modal-is-closing {
  -webkit-animation-name: animation-overlay-closing-keyframes;
  animation-name: animation-overlay-closing-keyframes;
}



.prk-modal[data-animation-type="zoom-blur"].modal-is-opening,
.prk-modal[data-animation-type="zoom-blur"].modal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.prk-modal[data-animation-type="zoom-blur"].modal-is-opening {
  -webkit-animation-name: zoom-blur-animation-opening-keyframes;
  animation-name: zoom-blur-animation-opening-keyframes;
}

.prk-modal[data-animation-type="zoom-blur"].modal-is-closing {
  -webkit-animation-name: zoom-blur-animation-closing-keyframes;
  animation-name: zoom-blur-animation-closing-keyframes;
}

.prk-modal.required-shake {
  animation: modalShake 0.3s ease;
}

.prk-modal[data-animation-type="slide-full-top"].modal-is-opening {
  animation: slideFullFromTop 0.3s forwards;
}
.prk-modal[data-animation-type="slide-full-bottom"].modal-is-opening {
  animation: slideFullFromBottom 0.3s forwards;
}
.prk-modal[data-animation-type="slide-full-left"].modal-is-opening {
  animation: slideFullFromLeft 0.3s forwards;
}
.prk-modal[data-animation-type="slide-full-right"].modal-is-opening {
  animation: slideFullFromRight 0.3s forwards;
}

.prk-modal[data-animation-type="slide-full-top"].modal-is-closing {
  animation: slideFullToTop 0.3s forwards;
}
.prk-modal[data-animation-type="slide-full-bottom"].modal-is-closing {
  animation: slideFullToBottom 0.3s forwards;
}
.prk-modal[data-animation-type="slide-full-left"].modal-is-closing {
  animation: slideFullToLeft 0.3s forwards;
}
.prk-modal[data-animation-type="slide-full-right"].modal-is-closing {
  animation: slideFullToRight 0.3s forwards;
}


.prk-modal[data-animation-type="slide-top"].modal-is-opening {
  animation: slideFromTop 0.3s forwards;
}
.prk-modal[data-animation-type="slide-bottom"].modal-is-opening {
  animation: slideFromBottom 0.3s forwards;
}
.prk-modal[data-animation-type="slide-left"].modal-is-opening {
  animation: slideFromLeft 0.3s forwards;
}
.prk-modal[data-animation-type="slide-right"].modal-is-opening {
  animation: slideFromRight 0.3s forwards;
}

.prk-modal[data-animation-type="slide-top"].modal-is-closing {
  animation: slideToTop 0.3s forwards;
}
.prk-modal[data-animation-type="slide-bottom"].modal-is-closing {
  animation: slideToBottom 0.3s forwards;
}
.prk-modal[data-animation-type="slide-left"].modal-is-closing {
  animation: slideToLeft 0.3s forwards;
}
.prk-modal[data-animation-type="slide-right"].modal-is-closing {
  animation: slideToRight 0.3s forwards;
}

.prk-modal[data-animation-type="scale-full"].modal-is-opening {
  animation: scale-full-in 0.3s ease-out;
}

.prk-modal[data-animation-type="scale-full"].modal-is-closing {
  animation: scale-full-out 0.3s ease-out forwards;
}

.prk-modal[data-animation-type="zoom-in-center"].modal-is-opening {
  animation: prk-modal-zoom-in-center 0.4s ease-out;
}

.prk-modal[data-animation-type="zoom-in-center"].modal-is-closing {
  animation: prk-modal-zoom-out-center 0.4s ease-out forwards;
}

.prk-modal[data-animation-type="slide-3d-in-bottom"].modal-is-opening {
  animation: prk-slide-3d-in-bottom 0.2s ease-out;
  transform-origin: bottom center;
}

.prk-modal[data-animation-type="slide-3d-in-bottom"].modal-is-closing {
  animation: prk-slide-3d-out-bottom 0.2s ease-out forwards;
  transform-origin: bottom center;
}


/* در موبایل از پایین */
@media (max-width: 1023px) {
  .prk-modal[data-enable-mobile-bottom-sheet="true"] {
    width: 100%;
    align-self: flex-end;
    max-height: calc(var(--vh) * 100);
    border-radius: var(--prk-overlay-radius, 16px) var(--prk-overlay-radius, 16px) 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    backface-visibility: hidden;
    contain: layout paint;
    /* برای درگ نرمِ ارتفاع: */
    will-change: height, border-radius, transform;
  }

  .prk-modal[data-enable-mobile-bottom-sheet="true"].show {
    transform: translateY(0);
  }

  /* وقتی ژست‌ها فعاله، تغییر ارتفاع هم انیمیت می‌شود */
  .prk-modal[data-enable-mobile-bottom-sheet="true"][data-bottom-sheet-gestures="true"] {
    transition:
      height 220ms cubic-bezier(.2,.8,.2,1),
      transform 0.3s ease-out;
  }

  /* اسکرولِ داخلی تمیز */
  .prk-modal[data-enable-mobile-bottom-sheet="true"] {
    display: flex;           /* ستون کامل */
    flex-direction: column;
  }
  .prk-modal .modal-header {
    flex: 0 0 auto;
  }
  .prk-modal .modal-body,
  .prk-modal .prk-modal-body,
  .prk-modal [data-modal-body],
  .prk-modal [data-prk-modal-body] {
    flex: 1 1 auto;
    min-height: 0;                   /* مهم */
    overflow: auto;                  /* اسکرول فقط داخل محتوا */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;    /* iOS rubber-band کمتر شود */
  }
}

/* استایل هندل (اگر خودت بذاری) */
[data-bs-handle]{
  cursor: grab;
  position: relative;
  z-index: 1;
  touch-action: none;
}
[data-bs-handle]:active{
  cursor: grabbing;
}

/* Header */
.prk-modal .modal-header {
  position: relative;
}

/* Body محتوا */
.prk-modal .modal-body,
.prk-modal .prk-modal-body,
.prk-modal [data-modal-body],
.prk-modal [data-prk-modal-body] {
  overflow-y: auto;
}


.prk-modal[data-no-overlay="true"] {
  background: transparent;
  border-radius: unset;
  pointer-events: none;
}