/* === Mobile Drawer (Hamburger) === */
#mobileMenu[hidden]{ display:none !important; }
#mobileMenu{
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,.38);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}

/* پنل سمت راست */
#mobileMenu .drawer-panel{
    position: absolute; top:0; right:0; bottom:0;
    width: min(92vw, 420px);
    background: #fff;
    color: black;
    display: grid; grid-template-rows: auto 1fr;
    box-shadow: -16px 0 40px rgba(0,0,0,.12);
    transform: translateX(100%);
    animation: drawer-in .25s ease-out forwards;
}

/* اسکرول محتوا */
#mobileMenu .drawer-body{ overflow:auto; max-height: calc(100vh - 64px); }

/* انیمیشن */
@keyframes drawer-in { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* ساب‌منو */
.first-child-parent[hidden]{ display:none !important; }
.first-child-parent{ animation: subIn .2s ease; }
@keyframes subIn { from{opacity:0; transform:translateX(8px)} to{opacity:1; transform:none} }

/* دسکتاپ: در هر صورت مخفی */
@media (min-width: 992px){
    #mobileMenu{ display:none !important; }
}
.navbar-items-mobile[hidden]{display:none!important;}
.navbar-items-mobile{
    position:fixed; inset:0; z-index:1050;
    display:grid; grid-template-columns:1fr min(90vw,420px);
    background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);
    overflow:hidden;
}
/* سرِپنل (هدر) و بدنه در ستون دوم؛ سمت راست */
.navbar-items-mobile > *{ grid-column:2; background:#fff; }
.navbar-items-mobile .navbar-items-mobile-head{ position:sticky; top:0; background:#fff; z-index:2; }
.navbar-items-mobile .navbar-items-mobile-body{ max-height:calc(100vh - 64px); overflow:auto; }
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.navbar-items-mobile > *{ animation:slideIn .25s ease-out; }
@media (min-width:992px){ #mobileMenu{display:none!important;} }
.ig-wrapper{ position:relative; display:inline-block; }

.ig-tip{
    position:absolute; left:50%; bottom:100%;
    transform: translate(-50%, -6px);
    background:#111; color:#fff; font-size:12px; line-height:1;
    padding:6px 10px; border-radius:8px; white-space:nowrap;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    opacity:0; pointer-events:none; z-index:10;
    transition: opacity .25s ease, transform .25s ease;
}
.ig-tip::after{
    content:""; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#111;
}

/* نمایش روی هاور آیکون */
.ig-wrapper:hover .ig-tip{
    opacity:1; transform: translate(-50%, -14px);
}

/* پاپ‌آپ خودکار هنگام لود */
/* قبلاً: animation: igPop 2.6s ... */
.ig-tip.auto-pop{ animation: igPop 1.4s ease-out 1 both; }

@keyframes igPop{
    0%   { opacity:0; transform:translate(-50%,-6px) scale(.9); }
    15%  { opacity:1; transform:translate(-50%,-14px) scale(1); }
    85%  { opacity:1; transform:translate(-50%,-14px) scale(1); }
    100% { opacity:0; transform:translate(-50%,-18px) scale(.98); }
}


@yield('styleUser')
.first-child-parent[hidden]{ display:none; }
.first-child-parent{ animation: subIn .2s ease; }
@keyframes subIn{ from{opacity:0; transform:translateX(8px)} to{opacity:1; transform:none} }


/* مات شدن پس‌زمینه/بک‌دراپ مودال */
.modal-backdrop.show{
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px) saturate(120%);
}

/* وینیت/هاله خفن روی صحنه */
.story-vignette{
    background:
        radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.75) 65%, rgba(0,0,0,0.92) 100%),
        transparent;
    z-index: 1;
}

/* تصویر: کاملاً داخل صفحه و بدون برش */
.story-modal-img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 2;
    transform: scale(0.98);
    animation: storyIn 200ms ease-out both;
}
@keyframes storyIn{
    from{opacity:0; transform:scale(0.96)}
    to{opacity:1; transform:scale(1)}
}

/* Progress */
.story-progress{
    height: 4px;
    background: rgba(255,255,255,0.25);
    z-index: 3;
}
.story-progress-bar{
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,#FFD700,#DAA520);
    position: relative;
    overflow: hidden;
}
.story-progress-bar::after{
    content:"";
    position:absolute; top:0; left:-30%;
    width:30%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    animation: shimmer 1.2s linear infinite;
}
.headerSlider,
.headerSlider .swiper-wrapper,
.headerSlider .swiper-slide { height: auto !important; }

.headerSlider img {
    display:block; width:100%; height:auto; /* بدون کشیدن */
}

@keyframes shimmer{
    from{left:-30%} to{left:100%}
}

/* برای اینکه کلیک بیرون عکس کار کنه، stage تمام صفحه است */
.story-stage{ z-index: 2; }



@media (max-width: 1400px) {

    /* تنظیم سایز متن‌ها */
    .swiper-slide .discounted_price {
        font-size: 14px !important; /* سایز متن عنوان */
    }
    .swiper-slide .product-details span {
        font-size: 12px !important; /* سایز متن قیمت و درصد تخفیف */
    }
    .swiper-slide .real_price {
        font-size: 10px !important; /* سایز متن قیمت اصلی */
    }


}


/* بدنۀ صفحه وقتی اسپلش فعاله: دقیقاً مثل نمونه‌ای که گفتی */
html, body { height: 100%; margin: 0; }
body.splash-active{
    min-height: 100svh;
    display: grid;
    place-items: center;        /* مرکز کامل */
    overflow: hidden;
    position: relative;
    isolation: isolate;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: #ffffff;
}
/* لایه‌های پس‌زمینه (اختیاری مثل نمونه) */
body.splash-active::before{
    content: "";
    position: fixed; inset: -20px;
    z-index: -1;
    filter: blur(14px) saturate(.9) brightness(.95);
    transform: scale(1.04);
    pointer-events: none;
}
body.splash-active::after{
    content:"";
    position: fixed; inset: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* خود اوورلی اسپلش: تمام‌صفحه و مرکزچین */
/* اسپلش: اوورلی که فقط محو می‌شود، ساختار صفحه را دست نمی‌زند */
/* فقط اوورلی ساده؛ layout رو تغییر نده */
/* از دیده‌شدن اسکرول‌بار موقع جمع‌شدن اوورلی جلوگیری می‌کند (بدون CLS) */
html { scrollbar-gutter: stable both-edges; background:#fff; }

/* اسپلش فول‌اسکرین و سفید */
#splash{
    position: fixed;
    inset: 0;
    z-index: 2147483647;   /* از همه بزرگ‌تر */
    display: grid;
    place-items: center;
    background: #fff;      /* کاملاً سفید */
    opacity: 1;
    transition: opacity .25s ease;
}

/* هنگام لود، اسکرول نباشد */
body.loading { overflow: hidden; }

/* محوشدن نرم، بعدش می‌تونیم hidden کنیم */
#splash.hide-splash{ opacity: 0; pointer-events: none; }
#splash[hidden]{ display: none !important; }

/* اندازه‌ها (دلخواه؛ اگر کوچک/بزرگ خواستی بگو) */
.splash-image{ width: clamp(80px, 14vw, 100px); height: auto; display:block; }
.loader-gif { width: clamp(80px, 12vw, 100px);  height: auto; display:block; }