body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#wb_LayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: #FFFFFF;
   background-image: none;
   border: 0px solid #DEE2E6;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid1
{
   box-sizing: border-box;
   padding: 0 15px 0 15px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid1 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#LayoutGrid1 > .row > .col-1, #LayoutGrid1 > .row > .col-2
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid1 > .row > .col-1, #LayoutGrid1 > .row > .col-2
{
   float: left;
}
#LayoutGrid1 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 50%;
   text-align: left;
}
#LayoutGrid1 > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 50%;
   text-align: left;
}
#LayoutGrid1:before,
#LayoutGrid1:after,
#LayoutGrid1 .row:before,
#LayoutGrid1 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid1:after,
#LayoutGrid1 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#LayoutGrid1 > .row > .col-1, #LayoutGrid1 > .row > .col-2
{
   float: none;
   width: 100% !important;
}
}
#wb_Image1
{
   margin: 0;
   vertical-align: top;
}
#Image1
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   display: block;
   width: 100%;
   height: auto;
   max-width: 194px;
   margin-left: auto;
   margin-right: auto;
   vertical-align: top;
}
#wb_Image1
{
   display: block;
   width: 100%;
   height: auto;
   z-index: 0;
}
@media only screen and (max-width: 969px)
{
body
{
   background-color: #FFFFFF;
   background-image: none;
}
}
/* قفل اسکرول کلی وقتی لایت‌باکس باز است */
html.no-scroll, body.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
}

/* اطمینان از اینکه container ثابت و کل صفحه را پوشش دهد */
.fancybox-container,
.fancybox-bg,
.fancybox__container,
.fancybox--hidden { /* چند نام ممکن برای انواع fancybox */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* تنها محتوا درون اسلاید اسکرول شود */
.fancybox-slide,
.fancybox__stage,
.fancybox-stage,
.fancybox-content {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* (اختیاری) glassmorphism پس‌زمینه */
.fancybox-bg {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
}

/* (اختیاری) استایل خود باکس */
.fancybox-content {
  background: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(18px) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
}
/* --- گلس مورفیسم پاپ آپ مثل باکس شما --- */
.mfp-bg {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(24px) saturate(140%);
}

.mfp-wrap .mfp-content {
    border-radius: 18px;
}

.mfp-wrap .mfp-content .mfp-close {
    color: #111827;
}

/* جلوگیری از حرکت صفحه زیر پاپ آپ */
html.mfp-helper {
    overflow: hidden !important;
}
/* پس‌زمینه گلس */
.mfp-bg {
    background: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
}

/* خود پاپ‌آپ (لایه مرکزی) */
.mfp-wrap .mfp-container .mfp-content {
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* جلوگیری از اسکرول */
body.mfp-active {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}
/* حالت روز (Light Mode) */
body:not(.dark-mode) .mfp-bg {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
}

body:not(.dark-mode) .mfp-wrap .mfp-container .mfp-content {
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72)) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    border-radius: 18px !important;
    color: #111827 !important;
}

/* حالت شب (Dark Mode) */
body.dark-mode .mfp-bg {
    background: rgba(20,24,30,0.18) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
}

body.dark-mode .mfp-wrap .mfp-container .mfp-content {
    background: linear-gradient(180deg, rgba(20,24,30,0.26), rgba(20,24,30,0.18)) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    border-radius: 18px !important;
    color: #e6eef9 !important;
}

/* ----- حالت عادی (Light Mode) ----- */
.mfp-wrap .mfp-container .mfp-content {
    background: rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;

    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.45) !important;

    box-shadow:
        0 10px 40px rgba(0,0,0,0.15),
        inset 0 0 0 1px rgba(255,255,255,0.2) !important;

    padding: 22px !important;
    transition: all .35s ease;
}

/* ----- حالت Dark Mode ----- */
body.dark-mode .mfp-wrap .mfp-container .mfp-content {
    background: rgba(20, 23, 30, 0.35) !important;
    backdrop-filter: blur(26px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(180%) !important;

    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;

    box-shadow:
        0 12px 50px rgba(0,0,0,0.65),
        inset 0 0 0 1px rgba(255,255,255,0.04) !important;

    padding: 22px !important;
    color: #eee !important;
}

/* متن داخل باکس در حالت شب */
body.dark-mode .mfp-content * {
    color: #f0f0f0 !important;
}
/* پس زمینه لایت‌باکس با فید + بلور نرم */
.mfp-bg {
    opacity: 0 !important;
    backdrop-filter: blur(0px) !important;
    transition: opacity .45s ease, backdrop-filter .5s ease !important;
}

.mfp-bg.mfp-ready {
    opacity: 1 !important;
    backdrop-filter: blur(12px) !important;
}

.mfp-bg.mfp-removing {
    opacity: 0 !important;
    backdrop-filter: blur(0px) !important;
}
/* شروع باز شدن باکس */
.mfp-wrap .mfp-content {
    opacity: 0;
    transform: scale(0.78) translateY(8px);
    transition:
        opacity .45s cubic-bezier(.25,.9,.25,1),
        transform .55s cubic-bezier(.25,.9,.25,1),
        backdrop-filter .6s ease;

    /* اول کم شیشه‌ای → بعد زیاد */
    backdrop-filter: blur(8px) saturate(120%);
}

/* وقتی آماده شد (باز شدن کامل) */
.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
    transform: scale(1) translateY(0);
    backdrop-filter: blur(22px) saturate(160%);
}

/* هنگام بسته شدن */
.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
    transform: scale(0.86) translateY(6px);
    backdrop-filter: blur(6px);
}



/* فقط پس‌زمینه لایت‌باکس بلور شود – بدون هیچ تداخلی */
div.pp_overlay {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: backdrop-filter .35s ease, opacity .35s ease !important;
}
div.pp_overlay {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(0px) !important;
    transition: backdrop-filter .45s ease, opacity .45s ease !important;
    opacity: 0 !important;
}

div.pp_overlay[style*="display: block"] {
    /* فعال شده */
    opacity: 1 !important;
    backdrop-filter: blur(14px) !important;
}

body:not(.dark-mode) div.pp_overlay {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px) !important;
}
body.dark-mode div.pp_overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(14px) !important;
}
/* سایه زیبا برای باکس گالری (گلس مورفیسم واقعی) */
div.pp_pic_holder {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 0 25px rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
}