/* ============================================================================
   هرکجا | MTheme — اکسپلورر تورهای ۳۶۰ — explorer.css
   Light Theme · Design System جدید MTheme
   جایگزین کامل تم تیره قدیمی (~/Theme/assets/css/explorer.css)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ۰) متغیرها
   --------------------------------------------------------------------------- */
:root {
    --hz-header-h: 0px;       /* Explorer هدر سایت را ندارد (Layout = null) */
    --hz-nav-h: 64px;         /* ارتفاع mobile-bottom-nav */
}
@media (max-width: 600px) {
    :root { --hz-nav-h: 60px; }
}
/* body: پایه از style.css سایت می‌آید (font-family, direction, color).
   اینجا فقط چیزی که مخصوص Explorer است override می‌شود. */
body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;            /* ریلز اسکرول صفحه نمی‌خواهد */
    background: #f7f9fc;
    overscroll-behavior: none;
}
@media (max-width: 600px) {
    body {
        padding-bottom: 0px !important;
    }
}
/* ---------------------------------------------------------------------------
   ۱) بدنه ریلز
   --------------------------------------------------------------------------- */
.main-wrapper {
    width: 100%;
    position: relative;
}
/* ارتفاع و offset در بخش ۱۰ (بر اساس mobile-bottom-nav) تعیین می‌شود */

.reels-container {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 0;
    display: block;
}
.reels-container::-webkit-scrollbar { display: none; }

.reel-item {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fc;
    padding: 0;
    /* ✅ stacking context مستقل برای هر کارت — اجزای داخل کارت
       هرگز با کارت‌های دیگر یا عناصر بیرون تداخل z-index ندارند */
    isolation: isolate;
}

/* ============================================================================
   📌 STACKING HIERARCHY — یک بار برای همیشه (به‌جای افزایش پله‌ای z-index)
   داخل هر .reel-item:
     0  .reel-preview / تصویر پایه
     1  .reel-iframe          (iframe تور)
    10  .reel-overlay-actions (کپشن + دکمه کسب‌وکار، به‌صورت یک واحد)
    20  .nav-arrows-vertical  (فلش‌های ناوبری — بالاتر از overlay)
    30  .business-action      (بالاترین — همیشه کلیک‌پذیر)
   ============================================================================ */
.reel-iframe { z-index: 1; }
.reel-overlay-actions { z-index: 10; }
.nav-arrows-vertical { z-index: 20; }
.business-action { z-index: 30; }

.reel-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #eef3f9;
}


/* (hierarchy بالا تعریف شده — این بلوک تکراری حذف شد) */

/* ---------------------------------------------------------------------------
   ۲) پیش‌نمایش تور
   --------------------------------------------------------------------------- */
.reel-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
    -webkit-tap-highlight-color: transparent;
    /* بدون will-change — وگرنه stacking context می‌سازد و
       z-index کپشن/دکمه کسب‌وکار داخل preview حبس می‌شود */
}
.reel-preview:active { transform: scale(.995); }

/* وقتی تور فعال است، iframe روی preview می‌آید و کلیک غیرفعال می‌شود */
.reel-item.tour-active .reel-preview { cursor: default; }
.reel-item.tour-active .play-btn-center { display: none; }

/* لایه ملایم روشن برای خوانایی کپشن (جای گرادیان مشکی قدیمی) */
.reel-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 32, 58, .28) 0%,
        rgba(15, 32, 58, .04) 38%,
        rgba(15, 32, 58, .05) 55%,
        rgba(15, 32, 58, .58) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   ۳) دکمه پلی مرکزی
   --------------------------------------------------------------------------- */
.play-btn-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 108, 223, .92);
    box-shadow: 0 14px 40px -12px rgba(45, 108, 223, .7), 0 0 0 10px rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3;
    transition: transform .22s, background .22s, box-shadow .22s;
    animation: hzPlayPulse 2.4s ease-in-out infinite;
}
.play-btn-center svg {
    width: 32px;
    height: 32px;
    margin-inline-start: 4px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
.reel-preview:hover .play-btn-center {
    transform: translate(-50%, -50%) scale(1.08);
    background: #006a0d;
    box-shadow: 0 18px 46px -12px rgba(45, 108, 223, .8), 0 0 0 13px rgba(255, 255, 255, .2);
}
.reel-preview:active .play-btn-center { transform: translate(-50%, -50%) scale(.96); }

@keyframes hzPlayPulse {
    0%, 100% { box-shadow: 0 14px 40px -12px rgba(45, 108, 223, .7), 0 0 0 10px rgba(255, 255, 255, .16); }
    50%      { box-shadow: 0 14px 40px -12px rgba(45, 108, 223, .7), 0 0 0 18px rgba(255, 255, 255, .06); }
}

/* ---------------------------------------------------------------------------
   ۴) ناحیه overlay پایین-راست: کپشن + دکمه کسب‌وکار
   ---------------------------------------------------------------------------
   هر دو داخل یک wrapper مشترک‌اند → هرگز روی هم نمی‌افتند و ترتیب‌شان
   با flex مشخص است. هیچ‌کدام position:absolute مستقل ندارند.
   --------------------------------------------------------------------------- */
.reel-overlay-actions {
    position: absolute;
    left: 18px;
    inset-inline-end: 18px;
    bottom: 20px;
    display: flex;
    flex-direction: column;      /* caption بالا، دکمه پایین */
    align-items: flex-end;       /* هر دو به لبه راست چسبیده */
    gap: 10px;
    max-width: min(72%, 440px);
    pointer-events: none;        /* خود wrapper کلیک را نمی‌گیرد */
}

/* کپشن — عرض با محتوا، نه کل عرض کارت */
.reel-caption {
    position: relative;          /* داخل flex، نه absolute */
    inset: auto;
    width: fit-content;          /* عرض = محتوا */
    max-width: 100%;             /* سقف = عرض wrapper */
    padding: 13px 17px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .6);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 16px 40px -18px rgba(15, 32, 58, .5);
    pointer-events: none;        /* کلیک از روی متن به لایه زیر می‌رسد */
    text-align: right;
    z-index:9999999
}
.reel-caption h3 {
    margin: 0 0 4px;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 900;
    color: #10233d;
    line-height: 1.6;
    text-shadow: none;
    overflow-wrap: anywhere;     /* متن بلند از کادر بیرون نزند */
}
.reel-caption p {
    margin: 0;
    font-size: clamp(11px, 1.3vw, 12.5px);
    color: #5d7591;
    line-height: 1.8;
    text-shadow: none;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   ۵) دکمه کسب‌وکار — داخل همان wrapper، بدون absolute
   --------------------------------------------------------------------------- */
.business-action {
    position: relative;
    inset: auto;
    flex: 0 0 auto;              /* اندازه‌اش را از محتوا می‌گیرد */
    cursor: pointer;
    pointer-events: auto;        /* همیشه کلیک‌پذیر */
}
.business-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .7);
    color: #006a0d;
    font-size: 17px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px -14px rgba(15, 32, 58, .55);
    transition: transform .2s, background .2s, color .2s;
}
.business-action:hover .business-icon {
    transform: translateY(-3px) scale(1.05);
    background: #006a0d;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   ۶) هدر جستجو — زیر site-header (نه پشت آن)
   ---------------------------------------------------------------------------
   .site-header در style.css: position:sticky; top:0; z-index:100; height:72px
   (موبایل: 64px). پس explorer-header باید از ارتفاع همان نقطه شروع شود
   و padding-top اضافی نداشته باشد.
   --------------------------------------------------------------------------- */
.explorer-header {
    position: fixed;
    top: var(--hz-header-h, 72px);   /* بلافاصله زیر site-header */
    inset-inline: 0;
    z-index: 30;                      /* بالای کارت‌ها، زیر mobile-bottom-nav(95) */
    padding: 14px 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

.search-row {
    max-width: 560px;
    margin: 0 auto;
    pointer-events: auto;
}
.search-box { position: relative; }

#searchInput {
    width: 100%;
    height: 50px;
    padding: 0 46px 0 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(20, 45, 95, .12);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #16283f;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    box-shadow: 0 12px 30px -16px rgba(15, 32, 58, .34);
    transition: border-color .2s, box-shadow .2s;
    text-align: right;
    direction: rtl;
}
#searchInput::placeholder { color: #9aa9bd; font-weight: 400; }
#searchInput:focus {
    border-color: #006a0d;
    box-shadow: 0 0 0 4px rgba(45, 108, 223, .14), 0 12px 30px -16px rgba(15, 32, 58, .34);
}

/* ---------------------------------------------------------------------------
   ۷) نتایج جستجوی زنده
   --------------------------------------------------------------------------- */
.live-results {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    max-height: 340px;
    overflow-y: auto;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(20, 45, 95, .09);
    box-shadow: 0 24px 60px -24px rgba(15, 32, 58, .45);
    display: none;
    z-index: 30;
    scrollbar-width: thin;
}
.live-results.show { display: block; }
.live-results::-webkit-scrollbar { width: 6px; }
.live-results::-webkit-scrollbar-thumb { background: rgba(20, 45, 95, .18); border-radius: 10px; }

.live-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    cursor: pointer;
    border-bottom: 1px solid rgba(20, 45, 95, .06);
    transition: background .15s;
}
.live-result-item:last-child { border-bottom: 0; }
.live-result-item:hover { background: #f3f7fd; }

.live-result-img {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eef3f9 center/cover no-repeat;
    border: 1px solid rgba(20, 45, 95, .07);
}
.live-result-info { min-width: 0; flex: 1 1 auto; }
.live-result-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #16283f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.8;
}
.live-result-cat {
    font-size: 11.5px;
    color: #7a8ca3;
    line-height: 1.8;
}

/* ---------------------------------------------------------------------------
   ۸) فلش‌های ناوبری — سمت راست، وسط ناحیه محتوا
   ---------------------------------------------------------------------------
   #navArrows فرزند مستقیم body است (نه داخل .reel-item)، پس نسبتبه
   viewport ثابت می‌شود. برای اینکه «وسط» به‌درستی بین site-header و
   bottom-nav بیفتد، از top/bottom واقعی استفاده می‌کنیم نه top:50%.
   --------------------------------------------------------------------------- */
.nav-arrows-vertical {
    position: fixed;
    left: 18px;
    inset-inline-end: 18px;
    right: auto;
    inset-inline-start: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    pointer-events: none;        /* wrapper کلیک نمی‌گیرد… */
}
/* …ولی خود فلش‌ها کاملاً کلیک‌پذیرند */
.nav-arrow { pointer-events: auto; }
.nav-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.nav-arrow-btn {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .92);
    border: 1.5px solid rgba(20, 45, 95, .1);
    color: #006a0d;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px -16px rgba(15, 32, 58, .5);
    transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.nav-arrow-btn svg { width: 22px; height: 22px; }
.nav-arrow:active .nav-arrow-btn { transform: scale(.95); }
.nav-arrow:not(.disabled):hover .nav-arrow-btn {
    background: #006a0d;
    color: #fff;
    border-color: #006a0d;
}

.nav-arrow span {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: #4a6483;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(20, 45, 95, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 118px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-arrow.disabled { opacity: .4; pointer-events: none; }
.nav-arrow.down-arrow .nav-arrow-btn {
    background: linear-gradient(135deg, #006a0d, #ee8d1a);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 16px 36px -14px rgba(45, 108, 223, .8);
}
.nav-arrow.down-arrow:not(.disabled):hover .nav-arrow-btn { filter: brightness(1.08); }

/* ---------------------------------------------------------------------------
   ۹) لودر اولیه
   --------------------------------------------------------------------------- */
.loading-reel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fc;
    z-index: 25;
}
.spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3.5px solid rgba(45, 108, 223, .16);
    border-top-color: #006a0d;
    animation: hzSpin .8s linear infinite;
}
@keyframes hzSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   ۱۰) نوار پایین — همان mobile-bottom-nav سایت
   ---------------------------------------------------------------------------
   ⚠️ هیچ ظاهری اینجا بازتعریف نمی‌شود. کل style از MTheme/css/style.css
   می‌آید (.mobile-bottom-nav). تنها override این است که در Explorer
   نوار در همه‌ی viewportها (دسکتاپ/تبلت/موبایل) نمایان باشد.
   --------------------------------------------------------------------------- */
.explorer-page .mobile-bottom-nav { display: flex; }

/* فاصله محتوا از نوار پایین */
.explorer-page .main-wrapper {
    height: calc(100% - var(--hz-header-h) - var(--hz-nav-h));
    margin-top: var(--hz-header-h);
}

/* ---------------------------------------------------------------------------
   ۱۱) Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* wrapper مشترک — موبایل: کمی جمع‌تر، بالای bottom-nav */
    .reel-overlay-actions {
        left: 13px;
        inset-inline-end: 13px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
        max-width: calc(100% - 26px);
    }
    .reel-caption {
        padding: 11px 14px;
        border-radius: 15px;
    }
    .business-icon { width: 45px; height: 45px; border-radius: 14px; font-size: 15px; }

    .play-btn-center { width: 62px; height: 62px; }
    .play-btn-center svg { width: 27px; height: 27px; }

    .nav-arrows-vertical {
        inset-inline-end: 11px;
        gap: 13px;
    }
    .nav-arrow-btn { width: 44px; height: 44px; border-radius: 14px; }
    .nav-arrow-btn svg { width: 19px; height: 19px; }
    .nav-arrow span { display: none; }         /* نام تور در موبایل جا نمی‌شود */

    .explorer-header { padding: 12px 12px 10px; }
    #searchInput { height: 46px; font-size: 13.5px; }

    .live-results { max-height: 260px; border-radius: 16px; }
    .live-result-img { flex-basis: 40px; width: 40px; height: 40px; border-radius: 10px; }
}