/* ============================================
   BASE
   ============================================ */
   *, *::before, *::after {
    box-sizing: border-box;
}

.shorts-page-wrapper {
    max-width: 480px;
    margin: 0 auto;
    font-family: inherit;
    direction: rtl;
    padding-bottom: 40px;
}

.shorts-page-wrapper {
    background: var(--paper);
}

/* ============================================
   PROFILE
   ============================================ */
/* بالشتک افقی صفحه = ۱۸px موبایل / ۴۴px دسکتاپ (README §Spacing) */
.shorts-profile-section {
    padding: 16px var(--page-pad) 0;
    position: relative;
}

/* استایل دکمه‌ی تعویض پوسته از این فایل به style.css منتقل شد:
   این فایل فقط روی صفحه‌ی اصلی و تک‌شورت لود می‌شه، ولی دکمه حالا توی هدر
   فلت‌سام و روی همه‌ی صفحه‌هاست. */

.shorts-profile-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ردیف بالا — آواتار راست، آمار بلافاصله کنارش (نه فاصله‌دار) */
.shorts-profile-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shorts-avatar-wrapper {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    padding: 2.5px;
    /* README §1: حلقه‌ی گرادیان طلایی → سبز عمیق (نه ink) */
    background: linear-gradient(140deg, var(--gold-500), var(--green-800));
    display: flex;
    align-items: center;
    justify-content: center;
}

.shorts-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%; /* README §Assets — قاب پرتره‌ی مدرس */
    border: 2.5px solid var(--paper);
    display: block;
    box-shadow: none;
}

.shorts-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid var(--paper);
    box-shadow: none;
}

.shorts-profile-info {
    min-width: 0;
}

.shorts-profile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.shorts-profile-name {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: var(--text-1);
    line-height: 1.3;
    /* فلت‌سام به همه‌ی h1..h6 مقدار width:100% می‌ده؛ اینجا باید عرضِ خودِ متن
       باشه وگرنه تیتر کل ردیف رو می‌گیره و بج تأیید تا ته چپ هل داده می‌شه */
    width: auto;
    max-width: 100%;
    min-width: 0;
}

.shorts-verified-badge {
    width: 15px;
    height: 15px;
    flex: none;
}

.shorts-profile-role {
    font-size: 12.5px;
    color: var(--text-3);
    margin: 0 0 4px;
    line-height: 1.5;
}

/* آمار — بلافاصله کنار آواتار، فضای باقی‌مونده رو مساوی پر می‌کنه */
.shorts-stats {
    display: flex;
    flex: 1;
    text-align: center;
}

.shorts-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shorts-stat-number {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-1);
}

.shorts-stat-label {
    font-size: 11px;
    color: var(--text-3);
}

.shorts-bio {
    font-size: 13px;
    color: var(--text-700);  /* متن بدنه — نه متن اصلی (README §Color) */
    margin: 0 0 6px;
    line-height: 1.85;
    text-wrap: pretty;
    word-break: break-word;
}

.shorts-bio-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--gold-link);
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
    word-break: break-all;
}

.shorts-bio-link svg {
    width: 13px;
    height: 13px;
    flex: none;
}

.shorts-bio-link:hover {
    text-decoration: underline;
}

/* ============================================
   CTA پروفایل — دوره‌ها/تماس
   ============================================ */
.shorts-profile-cta {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.shorts-cta-primary,
.shorts-cta-secondary,
.shorts-cta-more {
    /* flex + line-height صریح: هم سه دکمه هم‌ارتفاع می‌شن، هم line-height و
       margin ارثیِ دکمه‌های فلت‌سام ارتفاع ردیف رو باد نمی‌کنه (اسپک: ۱۱px پدینگ) */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1.5;
    min-height: 0;
}

.shorts-cta-primary,
.shorts-cta-secondary {
    text-align: center;
    padding: 11px 6px;
    border-radius: var(--r-control);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background var(--dur-color) var(--ease), color var(--dur-color) var(--ease);
}

.shorts-cta-primary {
    flex: 2;
    background: var(--ink);
    color: var(--ink-text);
}

.shorts-cta-secondary {
    flex: 1;
    background: var(--surface);
    color: var(--text-1);
    border: 1px solid var(--border);
    font-weight: 600;
}

/* دکمه‌ی مربعی ۴۴px انتهای ردیف — README §1 «Action row» */
.shorts-cta-more {
    flex: none;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    color: var(--text-1);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-color) var(--ease);
}

.shorts-cta-more svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.shorts-cta-primary:active,
.shorts-cta-secondary:active,
.shorts-cta-more:active {
    transform: scale(var(--press-scale));
    transition-duration: var(--dur-press);
}

/* هاور فقط روی دستگاه اشاره‌گردار — «یک پله روشن‌تر» (README §Interactions) */
@media (hover: hover) {
    .shorts-cta-primary:hover { background: var(--hover-ink); }
    .shorts-cta-secondary:hover,
    .shorts-cta-more:hover     { background: var(--hover-surface); }
}

/* ============================================
   دایره‌های استوری
   ============================================ */
.shorts-highlights-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 18px var(--page-pad) 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.shorts-highlights-row::-webkit-scrollbar {
    display: none;
}

.shorts-highlight-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 66px;
    text-decoration: none;
}

.shorts-highlight-thumb {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    padding: 3px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shorts-highlight-thumb.is-highlighted {
    border-color: var(--coral);
}

.shorts-highlight-thumb img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.shorts-highlight-letter {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--ink);
    color: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

.shorts-highlight-label {
    font-size: 10.5px;
    color: var(--text-700);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

/* ============================================
   TABS BAR - نوار سه آیکون
   ============================================ */
/* ══════════════════════════════
   نوار تب‌های صفحه اصلی
══════════════════════════════ */
.shorts-tabs-bar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    background: var(--paper);
    padding: 0;
    margin: 0;
    width: 100%;
}

.shorts-tab-icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 0;
    /* فلت‌سام به هر <button> یک margin-bottom ارثی می‌ده که ته نوار تب
       ۱۳px فضای مرده می‌ساخت */
    margin: 0;
    color: var(--text-3);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    /* خط زیرین همیشه هست ولی شفاف — تا فعال‌شدن ارتفاع رو جابه‌جا نکنه */
    border: none;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease);
    font-size: 0;
}

.shorts-tab-icon svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* تب فعال — رنگ ink + خط زیرین ۲px (README §1) */
.shorts-tab-icon.active {
    color: var(--feed-tab-active);
    border-bottom-color: var(--feed-tab-active);
}

@media (hover: hover) {
    .shorts-tab-icon:not(.active):hover { color: var(--text-500); }
}

.shorts-tab-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 0;
    /* همان margin-bottom ارثیِ فلت‌سام روی <button> که برای .shorts-tab-icon
       صفر شده بود؛ اینجا جا مانده بود و «برای شما» را ۷px بالاتر از بقیه‌ی
       تب‌ها می‌نشاند و نوار را ۱۳px بلندتر می‌کرد. */
    margin: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    cursor: pointer;
    transition: color var(--dur-color) var(--ease),
                border-color var(--dur-color) var(--ease);
}

/* ============================================
   GRID
   ============================================ */
.shorts-grid-section {
    padding: 2px 0; /* گرید تمام‌عرضه؛ فقط ۲px فاصله‌ی عمودی (README §1) */
}

.shorts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.shorts-grid-item {
    display: block;
    aspect-ratio: 9 / 14;
    overflow: hidden;
    position: relative;
    background: var(--surface-2);
    text-decoration: none;
    cursor: pointer;
}

.shorts-grid-thumb {
    width: 100%;
    height: 100%;
    position: relative;
}

.shorts-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.shorts-grid-no-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text-3);
}

.shorts-play-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

/* شمارنده‌ی بازدید روی کاشی — پایین‌راست، ۱۰px/۶۰۰ سفید (README §1 «Grid») */
.shorts-grid-views {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    pointer-events: none;
}

.shorts-grid-views svg {
    width: 9px;
    height: 9px;
    flex: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}

.shorts-grid-item:hover .shorts-play-overlay {
    opacity: 1;
}

.shorts-grid-item:hover .shorts-grid-thumb img {
    transform: scale(1.05);
}

.shorts-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: var(--text-2);
    gap: 12px;
}

.shorts-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* ============================================
   پوسته‌ی تیره‌ی فید — README §1b
   ساختار عیناً همون روشنه؛ فقط چند رنگ که با swap توکن‌ها درنمیان:
   تب فعال طلایی می‌شه.
   مقادیر توی متغیر جمع شدن تا قانون‌ها یک‌بار نوشته بشن.
   ============================================ */
.shorts-page-wrapper {
    --feed-tab-active:     var(--ink-900);
    /* کارت تیره‌ی «دوره‌ی در جریان» در ستون کناری دسکتاپ (README §9) */
    --feed-featured-bg:     var(--ink-900);
    --feed-featured-border: transparent;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .shorts-page-wrapper {
        --feed-tab-active:     var(--gold-500);
        --feed-featured-bg:     var(--surface);
        --feed-featured-border: var(--border);
    }
}
html[data-theme="dark"] .shorts-page-wrapper {
    --feed-tab-active:     var(--gold-500);
    --feed-featured-bg:     var(--surface);
    --feed-featured-border: var(--border);
}

/* ============================================
   REEL PLAYER - WRAPPER
   ============================================ */
.shorts-reel-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9000; /* ✅ کمتر از نوار پایین (9999) تا نوار روش بیاد */
    overflow: hidden;
}

/* ============================================
   BACK BUTTON
   ============================================ */
/* ============================================
   نوار بالای پلیر — README §۲
   چورن بازگشت (راست) · تب‌ها · جستجو (چپ)
   ============================================ */
.shorts-reel-topbar {
    position: fixed;
    top: 44px;
    inset-inline: var(--page-pad, 18px);
    z-index: 9500;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: #fff;
    pointer-events: none; /* فقط خود کنترل‌ها کلیک‌پذیرن */
}

.shorts-reel-topbar > * {
    pointer-events: auto;
}

.shorts-back-btn,
.shorts-reel-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
    -webkit-tap-highlight-color: transparent;
}

.shorts-back-btn:hover,
.shorts-reel-search:hover {
    color: #fff;
    opacity: .8;
}

.shorts-back-btn svg,
.shorts-reel-search svg {
    display: block;
    pointer-events: none;
}

/* تب‌ها — فعال با زیرخط ۲px طلایی */
.shorts-reel-tabs {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* یکی از تب‌ها دکمه است و دیگری لینک (مقصدش ثابت است و در HTML می‌آید).
   بدون یکسان‌سازی، دکمه و لینک روی دو خط پایه‌ی متفاوت می‌نشینند و متن
   «برای شما» نسبت به «همه» چند پیکسل جابه‌جا می‌شود — پایه‌ی دکمه‌ی
   فلت‌سام (min-height/line-height/margin) هم اینجا خنثی می‌شود. */
.shorts-reel-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 0;
    min-width: 0;
    background: none;
    border: none;
    padding: 0 0 3px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    opacity: .55;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--dur-color, 160ms) var(--ease, ease);
}

.shorts-reel-tab:hover,
.shorts-reel-tab:focus {
    color: #fff;
    text-decoration: none;
}

.shorts-reel-tab.is-loading {
    opacity: .35;
    pointer-events: none;
}

.shorts-reel-tab.is-active {
    opacity: 1;
    border-bottom-color: var(--gold-500, #D4A24C);
}

/* ============================================
   پرده‌ی گرادیان روی ویدیو — مقدار دقیق README §۲
   ============================================ */
.shorts-reel-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(8,12,10,.92) 0%,
        rgba(8,12,10,.25) 42%,
        rgba(8,12,10,.55) 100%
    );
}
.shorts-reel-container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shorts-reel-container::-webkit-scrollbar {
    display: none;
}

/* ============================================
   REEL ITEM
   ============================================ */
.shorts-reel-item {
    /* فاصله‌ی بلوک پایین از کف صفحه (۲۲ = ناحیه‌ی امن home-indicator، README §Spacing) */
    --sz-info-bottom: calc(var(--nav-safe-bottom, 22px) + env(safe-area-inset-bottom));
    /* جای کارت دوره — پیش‌فرض صفر؛ فقط وقتی دوره‌ی مرتبط ست شده باشه باز می‌شه.
       ریل کنش‌ها ازش استفاده می‌کنه تا بدونِ کارت هم بیاد پایین. */
    --sz-card-space: 0px;

    position: relative;
    width: 100%;
    height: 100vh;
	height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

/* کارت دوره ست شده → ارتفاع کارت (۶۸) + گپ (۱۲) به فضای پایین اضافه می‌شه */
.shorts-reel-item.has-related-course {
    --sz-card-space: 80px;
}

/* ============================================
   VIDEO
   ============================================ */
.shorts-reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   TAP AREA
   ============================================ */
.shorts-reel-tap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 140px; /* ✅ بیشتر از قبل - فضا برای دیسکریپشن */
    z-index: 10;
    cursor: pointer;
    background: transparent;
}

/* ============================================
   PLAY / PAUSE ICON
   ============================================ */
.shorts-reel-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shorts-reel-play-icon.show {
    opacity: 1;
}

/* آیکون پلی ثابت - حالت autoplay block */
.shorts-reel-play-icon.static {
    opacity: 1;
    transition: none;
}

/* ============================================
   GRADIENT + INFO - پایین ویدیو
   ✅ گرادینت قوی‌تر + فاصله از نوار پایین
   ============================================ */
/* ============================================
   بلوک پایین — README §۲
   ترتیب: پروفایل → کپشن → کارت دوره.
   بلوک به پایین چسبیده و ستونیه؛ پس اگه کارت دوره ست نشده باشه
   کارت اصلاً رندر نمی‌شه و کپشن و پروفایل خودشون میان پایین.
   ============================================ */
.shorts-reel-info {
    position: absolute;
    inset-inline: var(--page-pad, 18px);
    bottom: var(--sz-info-bottom);

    display: flex;
    flex-direction: column;
    gap: 12px;

    color: #fff;
    direction: rtl;
    z-index: 5;
    pointer-events: none;
}

/* ============================================
   کارت درگاه فروش — دوره‌ی مرتبط با این ویدیو
   (فقط وقتی رندر می‌شه که دوره‌ی مرتبط ست شده باشه)
   ============================================ */
.shorts-related-course-card {
    pointer-events: all;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(250,248,244,.96);
    border-radius: var(--r-media, 16px);
    padding: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    transition: background var(--dur-color, 160ms) var(--ease, ease);
}

.shorts-related-course-card:hover {
    background: rgba(252,251,248,.98);
}

.shorts-related-course-card:active {
    transform: scale(var(--press-scale, .985));
    transition: transform var(--dur-press, 80ms) var(--ease, ease);
}

.shorts-related-course-thumb {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    object-fit: cover;
    object-position: 50% 18%;
    flex: none;
}

.shorts-related-course-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.shorts-related-course-label {
    font-size: 10.5px;
    color: var(--gold-700, #8E621E);
    font-weight: 700;
}

.shorts-related-course-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-900, #0F1A15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shorts-related-course-price {
    font-size: 11.5px;
    color: var(--text-500, #5C574D);
}

/* قیمت وو از خودش <bdi>/<del>/<ins> میاره — این‌ها رو هم‌اندازه نگه می‌داریم
   و کل خط رو تک‌خطی می‌کنیم تا ارتفاع کارت ثابت بمونه (۶۸px). */
.shorts-related-course-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shorts-related-course-price .amount,
.shorts-related-course-price bdi {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}

/* متن مخصوص اسکرین‌ریدرِ ووکامرس («قیمت اصلی … بود») نباید دیده بشه */
.shorts-related-course-price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* قیمت قدیم خط‌خورده و کم‌رنگ‌تر، قیمت فعلی بدون زیرخط (README §۵) */
.shorts-related-course-price del {
    font-size: 10.5px;
    color: var(--text-400, #6E685C);
    text-decoration: line-through;
    opacity: .9;
}

.shorts-related-course-price ins {
    text-decoration: none;
    background: none;
    color: inherit;
    font-weight: 700;
}

.shorts-related-course-dot {
    margin: 0 5px;
    color: var(--text-400, #6E685C);
}

.shorts-related-course-cta {
    background: var(--gold-500, #D4A24C);
    color: var(--ink-900, #0F1A15);
    font-size: 12.5px;
    font-weight: 800;
    padding: 9px 14px;
    border-radius: 11px;
    flex: none;
    transition: background var(--dur-color, 160ms) var(--ease, ease);
}

.shorts-related-course-card:hover .shorts-related-course-cta {
    background: var(--hover-gold, #C08F3C);
}

/* ============================================
   ردیف پروفایل داخل ویدیو — README §۲
   آواتار ۳۴px · هندل ۱۳.۵/۷۰۰ · چیپ «دنبال کردن» outline
   ============================================ */
.shorts-reel-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    pointer-events: all;
}

.shorts-reel-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--r-pill, 99px);
    object-fit: cover;
    object-position: 50% 22%;
    border: 1.5px solid rgba(255,255,255,.6);
    flex-shrink: 0;
}

.shorts-reel-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.shorts-reel-title {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.5;
    max-width: 270px;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.shorts-reel-desc-wrapper {
    position: relative;
    z-index: 5;
    pointer-events: all;
}

/* کپشن — README §۲: ۱۳px/۱.۸، حداکثر ۲۷۰px تا از ریل کنش‌ها فاصله بگیره */
.shorts-reel-desc {
    font-size: 13px;
    margin: 0;
    color: #fff;
    line-height: 1.8;
    max-width: 270px;
    text-wrap: pretty;
    word-break: break-word;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* هشتگ داخل کپشن طلاییه (README §۲) */
.shorts-reel-desc a,
.shorts-reel-desc .hashtag {
    color: var(--gold-500, #D4A24C);
    text-decoration: none;
}

.shorts-reel-desc--collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.shorts-more-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    padding: 4px 0 0;
    cursor: pointer;
    display: none;
    font-family: inherit;
    direction: rtl;
    pointer-events: all;
}

.shorts-more-btn.visible {
    display: inline-block;
}

.shorts-more-btn:hover {
    color: #fff;
}

/* ============================================
   DESCRIPTION PANEL - باتم شیت
   ============================================ */
.shorts-desc-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
}

.shorts-desc-panel.open {
    visibility: visible;
    pointer-events: all;
}

.shorts-desc-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 1;
}

.shorts-desc-panel.open .shorts-desc-panel-overlay {
    opacity: 1;
}

.shorts-desc-panel-content {
    position: absolute;
    bottom: 56px; /* ✅ بالای نوار پایین */
    left: 0;
    right: 0;
    z-index: 2;
    background: #1a1a1a;
    border-radius: 16px 16px 0 0;
    height: 65vh;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    overflow: hidden;
}

.shorts-desc-panel.open .shorts-desc-panel-content {
    transform: translateY(0);
}

/* دستگیره */
.shorts-desc-panel-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}

/* هدر */
.shorts-desc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
    direction: rtl;
}

/* دکمه بستن */
.shorts-desc-panel-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}

.shorts-desc-panel-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* بدنه اسکرول‌پذیر */
.shorts-desc-panel-body {
    overflow-y: auto;
    padding: 16px 20px 40px;
    flex: 1 1 auto;
    min-height: 0;
    direction: rtl;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.shorts-desc-panel-body::-webkit-scrollbar {
    width: 4px;
}

.shorts-desc-panel-body::-webkit-scrollbar-track {
    background: transparent;
}

.shorts-desc-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

.shorts-desc-panel-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.shorts-desc-panel-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}

.shorts-desc-panel-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.shorts-desc-panel-text {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.75;
    margin: 0;
    white-space: normal;
    word-break: break-word;
}

/* ============================================
   LIKE BUTTON
   ============================================ */
/* ============================================
   ریل کنش‌ها — README §۲
   در RTL کنش‌ها سمت چپ می‌نشینن. آیکن ۲۷px، لیبل ۱۱/۶۰۰، فاصله ۲۰.
   موقعیت عمودی به وجود کارت دوره وابسته‌ست: اگه کارت نباشه
   ریل هم مثل بقیه‌ی محتوا میاد پایین (--sz-card-space صفر می‌شه).
   ============================================ */
.shorts-reel-actions {
    position: absolute;
    left: 14px;
    right: auto;
    bottom: calc(var(--sz-info-bottom) + var(--sz-card-space) + 46px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #fff;
    transition: bottom var(--dur-color, 160ms) var(--ease, ease);
}

.shorts-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.shorts-action svg {
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}

.shorts-action-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    text-align: center;
    min-width: 16px;
}

/* عددها LTR بمونن، لیبل‌های فارسی نه */
.shorts-like-count,
.shorts-comment-count,
.shorts-view-count {
    direction: ltr;
}

.shorts-action:active {
    transform: scale(var(--press-scale, .985));
    transition: transform var(--dur-press, 80ms) var(--ease, ease);
}

/* بازدید — نمایشی، خارج از چهار کنشِ README */
.shorts-view-stat {
    pointer-events: none;
    user-select: none;
}

.shorts-view-icon {
    color: rgba(255,255,255,.95);
}
.shorts-like-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.shorts-like-icon {
    fill: rgba(255,255,255,0.9);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
    transition: fill 0.2s ease, transform 0.15s ease;
    display: block;
}

.shorts-like-btn.liked .shorts-like-icon {
    fill: var(--coral);
    filter: drop-shadow(0 1px 6px rgba(255,45,85,0.5));
}

.shorts-like-btn:active .shorts-like-icon {
    transform: scale(0.85);
}

.shorts-like-btn.pop .shorts-like-icon {
    animation: likePopAnim 0.35s ease forwards;
}

@keyframes likePopAnim {
    0%   { transform: scale(1);   }
    40%  { transform: scale(1.4); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1);   }
}

/* ============================================
   COMMENT BUTTON — هم‌خانواده با لایک/ویو
   ============================================ */
.shorts-comment-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    color: rgba(255,255,255,0.9);
}

.shorts-comment-btn svg {
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
    display: block;
}

.shorts-comment-btn:active svg {
    transform: scale(0.85);
}

/* تایپوگرافی‌ی شمارنده‌ها حالا از .shorts-action-label میاد (README §۲: ۱۱px/۶۰۰) */

/* ============================================
   COMMENTS SHEET — همون بدنه‌ی shorts-desc-panel، محتوای متفاوت
   ============================================ */
.shorts-comments-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
}

.shorts-comments-sheet.open {
    visibility: visible;
    pointer-events: all;
}

.shorts-comments-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 1;
}

.shorts-comments-sheet.open .shorts-comments-backdrop {
    opacity: 1;
}

.shorts-comments-content {
    position: absolute;
    bottom: 56px;
    left: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(180deg, #201c22 0%, #171418 100%);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    height: 75vh;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    overflow: hidden;
    direction: rtl;
}

.shorts-comments-sheet.open .shorts-comments-content {
    transform: translateY(0);
}

.shorts-comments-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.shorts-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
}

.shorts-comments-header #shortsCommentsCount {
    font-family: var(--font-mono, monospace);
    color: rgba(255,255,255,0.45);
    font-weight: 500;
    font-size: 13px;
}

.shorts-comments-close {
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}

.shorts-comments-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.14);
}

.shorts-comments-close svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.shorts-comments-close svg path {
    stroke: currentColor;
}

.shorts-comments-list {
    overflow-y: auto;
    padding: 12px 16px 16px;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shorts-comments-list::-webkit-scrollbar { width: 4px; }
.shorts-comments-list::-webkit-scrollbar-track { background: transparent; }
.shorts-comments-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.shorts-comments-loading,
.shorts-comments-empty {
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* یک ردیف کامنت — کارت مستقل، نه فقط یه ردیف با خط جداکننده */
.shorts-comment-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.05);
    transition: background .15s ease;
}

.shorts-comment-item.pinned {
    background: linear-gradient(135deg, rgba(255,75,46,.1), rgba(255,75,46,.03));
    border-color: rgba(255,75,46,.22);
}

.shorts-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}

.shorts-comment-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
}

.shorts-comment-avatar--placeholder svg path,
.shorts-comments-my-avatar--guest svg path,
.shorts-comments-empty svg path {
    stroke: currentColor;
}

.shorts-comment-body {
    flex: 1;
    min-width: 0;
}

.shorts-comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.shorts-comment-author {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.shorts-comment-pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--coral, #ff4b2e);
    background: rgba(255,75,46,0.16);
    padding: 3px 8px 3px 6px;
    border-radius: 20px;
}

.shorts-comment-text {
    font-size: 13.5px;
    color: rgba(255,255,255,0.88);
    line-height: 1.7;
    margin: 0 0 7px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* لینک داخل نظر — پنل همیشه تیره است، پس طلایی در هر دو پوسته خواناست.
   نشانیِ بلند در ستون باریکِ پاسخ هر جا لازم باشد می‌شکند. */
.shorts-comment-text a {
    color: var(--gold-500, #D4A24C);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.shorts-comment-text a:hover { color: #E6C077; }

.shorts-comment-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.shorts-comment-time {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}

.shorts-comment-reply-btn {
    background: rgba(255,255,255,0.06);
    border: none;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, color .15s ease;
}

.shorts-comment-reply-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* پاسخ‌ها زیر ستون لایکِ نظر اصلی هم پهن می‌شوند (۲۴ دکمه + ۱۰ فاصله)؛
   آن ستون زیر قلب خالی بود و متن پاسخ — همان‌جا که مدیر لینک می‌گذارد —
   در موبایل به ۹۵ پیکسل می‌رسید و نشانی چهار خط می‌شکست. */
.shorts-comment-replies {
    margin-top: 10px;
    margin-inline-end: -34px;
    padding-right: 14px;
    border-right: 1.5px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shorts-comment-reply .shorts-comment-avatar {
    width: 26px;
    height: 26px;
}

.shorts-comment-like-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 0 0;
    margin: 0;          /* فلت‌سام به هر button حاشیه‌ی ۱em می‌دهد */
    min-width: 24px;    /* همان مقدار فلت‌سام، این‌جا صریح چون حاشیه‌ی منفیِ پاسخ‌ها به آن بسته است */
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
    -webkit-tap-highlight-color: transparent;
}

.shorts-comment-like-btn svg { fill: currentColor; display: block; }

.shorts-comment-like-btn.liked { color: var(--coral); }

.shorts-comment-like-btn:active svg { transform: scale(0.85); }

.shorts-comment-like-count {
    font-size: 10px;
    font-weight: 700;
    min-height: 12px;
    direction: ltr;
}

/* بنر «در حال پاسخ به ...» */
/* بنر «پاسخ به …» فقط موقع ریپلای باز می‌شود؛ بدون این، display:flex
   روی attribute hidden می‌چربد و بنر همیشه باز می‌ماند */
.shorts-comments-reply-banner[hidden] { display: none; }

.shorts-comments-reply-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    flex-shrink: 0;
}

.shorts-comments-reply-banner b { color: #fff; }

.shorts-comments-reply-banner button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px;
    display: flex;
}

.shorts-comments-reply-banner button svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.shorts-comments-reply-banner button svg path {
    stroke: currentColor;
}

/* نوار ارسال نظر */
.shorts-comments-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.shorts-comments-my-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

.shorts-comments-my-avatar--guest {
    position: relative;
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
}

/* اسکوپ‌شده با تگ input + والد، تا از قانون عمومی‌تر input[type="text"] فلت‌سام (که
   هم‌وزن یا قوی‌تره) برنده بشه — همون باگی که توی فیلدهای حساب کاربری هم بود */
.shorts-comments-composer input.shorts-comments-input {
    flex: 1;
    min-width: 0;
    /* پس‌زمینه‌ی نیمه‌شفاف قبلی باعث می‌شد Chrome/اندروید حالت auto-dark رو
       روی این فیلد اجرا کنه و متن سفید رو معکوس/تیره کنه؛ با color-scheme
       و پس‌زمینه‌ی توپُرتر این حدس خودکار مرورگر رو خنثی می‌کنیم */
    color-scheme: dark;
    background: #2a262d;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 10px 16px;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    box-shadow: none;
    height: auto;
    transition: border-color .2s ease, background .2s ease;
}

.shorts-comments-composer input.shorts-comments-input:focus {
    border-color: var(--coral, #ff4b2e);
    background: #322d35;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.shorts-comments-input::placeholder { color: rgba(255,255,255,0.45); }

.shorts-comments-send {
    background: var(--coral-gradient, var(--coral));
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--coral-ink, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease, opacity .2s ease;
}

.shorts-comments-send svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.shorts-comments-send svg path {
    fill: currentColor;
}

.shorts-comments-send:active { transform: scale(0.9); }

.shorts-comments-send:disabled {
    opacity: .4;
    cursor: default;
}

/* پیام موقتی بعد از ارسال (در انتظار تایید) */
.shorts-comments-toast {
    position: absolute;
    bottom: 78px;
    left: 16px;
    right: 16px;
    z-index: 3;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 12.5px;
    text-align: center;
    padding: 10px 14px;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    animation: shortsToastIn .25s ease;
}

@keyframes shortsToastIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* تایپوگرافی‌ی شمارنده‌ی لایک هم از .shorts-action-label میاد */

/* ============================================
   HEART BURST - دبل کلیک
   ============================================ */
.shorts-heart-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    pointer-events: none;
    animation: heartBurst 0.8s ease forwards;
}

.shorts-heart-burst svg {
    fill: var(--coral);
    filter: drop-shadow(0 2px 12px rgba(255,45,85,0.6));
    display: block;
}

@keyframes heartBurst {
    0%   { transform: translate(-50%, -50%) scale(0);    opacity: 1; }
    35%  { transform: translate(-50%, -50%) scale(1.3);  opacity: 1; }
    65%  { transform: translate(-50%, -50%) scale(1.0);  opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}

/* ============================================
   NO VIDEO
   ============================================ */
.shorts-no-video {
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* ============================================
   PIN BADGE - نشان پین روی کاشی
   ============================================ */
.shorts-pin-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================
   LONG VIDEOS - LIST
   ============================================ */
.lv-list {
    padding: 8px 0;
}

/* ============================================
   EMPTY
   ============================================ */
.lv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    color: var(--text-2);
    gap: 12px;
}

.lv-empty p {
    font-size: 14px;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .shorts-page-wrapper {
        max-width: 100%;
    }

    /* آواتار در همه‌ی عرض‌ها ۷۶px می‌مونه (README §1) — override قبلی ۷۸/۷۲ حذف شد */

    .shorts-profile-name {
        font-size: 16px;
    }

    /* بلوک پایین حالا absolute+ستونیه؛ padding قدیمی لازم نیست،
       فقط حاشیه‌ی افقی روی صفحه‌های ریز کمی جمع‌تر می‌شه */
    .shorts-reel-info {
        inset-inline: 12px;
    }

    .shorts-reel-actions {
        left: 10px;
    }

    .shorts-desc-panel-content {
        height: 70vh;
        max-height: 70vh;
        bottom: 56px; /* ✅ بالای نوار پایین */
    }
}

@media (min-width: 768px) {
    .shorts-reel-wrapper {
        display: flex;
        justify-content: center;
    }

    .shorts-reel-container {
        max-width: 420px;
    }

    /* دسکتاپ: ویدیو در ستونی به عرض ۴۲۰ وسط صفحه‌ست،
       پس کروم هم باید به همون ستون قفل بشه نه لبه‌ی صفحه */
    .shorts-reel-actions {
        left: calc(50% - 210px + 14px);
    }

    .shorts-reel-info {
        inset-inline: calc(50% - 210px + 18px);
    }

    .shorts-reel-topbar {
        inset-inline: calc(50% - 210px + 18px);
    }
}
/* ══════════════════════════════
   کانتینر تب‌های محتوا
══════════════════════════════ */
.shorts-tabs-content {
    position: relative;
}

.shorts-tab-pane {
    display: none;
    animation: tabFadeIn .3s ease;
}

.shorts-tab-pane.active {
    display: block;
}

@keyframes tabFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ══════════════════════════════
   مودال «بزودی» پادکست
══════════════════════════════ */
.podcast-coming-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.podcast-coming-modal.is-open { pointer-events: all; opacity: 1; }
.podcast-coming-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.podcast-coming-box {
    position: relative; z-index: 1;
    width: 100%; max-width: 480px;
    background: var(--surface);
    border-radius: 28px 28px 0 0;
    padding: 36px 28px 48px;
    text-align: center;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    direction: rtl;
}
.podcast-coming-modal.is-open .podcast-coming-box { transform: translateY(0); }
.podcast-coming-box::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    margin: 0 auto 28px;
}
.podcast-coming-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--coral-gradient);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    color: var(--coral-ink);
    box-shadow: 0 8px 24px -4px rgba(255,75,46,.45);
}
.podcast-coming-title {
    font-size: 22px; font-weight: 700;
    color: var(--text-1); margin: 0 0 6px;
}
.podcast-coming-subtitle {
    font-size: 28px; font-weight: 800;
    background: var(--coral);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 14px; line-height: 1.2;
}
.podcast-coming-desc {
    font-size: 14px; color: var(--text-3);
    line-height: 1.7; margin: 0 0 28px;
}
.podcast-coming-close {
    display: inline-block;
    padding: 13px 40px;
    background: var(--coral-gradient);
    color: var(--coral-ink); border: none;
    border-radius: 14px;
    font-size: 15px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: all .2s ease;
    box-shadow: 0 6px 18px -4px rgba(255,75,46,.4);
}
.podcast-coming-close:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(255,75,46,.5);
}
.podcast-coming-close:active { transform: scale(.97); }
/* ══════════════════════════════════════
   REEL AD SLIDE — کارت تبلیغاتی ریلز
══════════════════════════════════════ */
.reel-ad-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;               /* ✅ اضافه شد — هم‌ارتفاع دقیق با ویدیوها */
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;     /* ✅ اضافه شد — ترمز اصلی */
}
.reel-ad-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* برچسب تبلیغات (بالا سمت چپ) */
.reel-ad-label {
    position: absolute;
    top: 53px;
    background: rgb(255 47 47 / 69%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    z-index: 10;
    letter-spacing: 0.3px;
}

/* تصویر تبلیغ */
.reel-ad-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.reel-ad-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* دکمه CTA */
.reel-ad-cta {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: calc(100% - 48px);
    max-width: 320px;
}

.reel-ad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px 24px;
    background: var(--surface);
    color: var(--coral-ink);
    font-size: 15px;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 1px -4px 20px rgba(255,75,46,.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    -webkit-tap-highlight-color: #fff0;
    background-color: var(--coral);
}

.reel-ad-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.reel-ad-btn svg {
    flex-shrink: 0;
}
/* ویدیوی تبلیغ */
.reel-ad-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}
/* ══════════════════════════════════════
   GRID — بارگذاری تدریجی (Infinite Scroll)
══════════════════════════════════════ */

/* سنتینل نامرئی */
.shorts-grid-sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
    opacity: 0;
}

/* اسکلتون لودینگ (هم‌سبک با گرید) */
.shorts-grid-loader {
    padding: 3px 0 0;
    display: none; /* JS مدیریتش می‌کنه؛ اگه JS نبود مخفی می‌مونه */
}

.shorts-grid-loader .shorts-grid {
    margin-top: 0;
}

.shorts-skeleton {
    background: linear-gradient(
        100deg,
        var(--surface-2) 30%,
        var(--border) 50%,
        var(--surface-2) 70%
    );
    background-size: 200% 100%;
    animation: shortsSkeletonShine 1.2s ease-in-out infinite;
}

@keyframes shortsSkeletonShine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* دکمه‌ی بازگشت به بالا */
.shorts-back-top {
	display: none !important;
    position: fixed;
    bottom: 72px; /* بالای نوار پایین (56px) + فاصله */
    left: 16px;
    z-index: 8000;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--coral);
    color: var(--coral-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    -webkit-tap-highlight-color: transparent;
}

.shorts-back-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.shorts-back-top:active {
    transform: scale(0.92);
}

.shorts-back-top svg {
    display: block;
    pointer-events: none;
}

/* موقع باز بودن پلیر ریل، دکمه‌ی بالا مخفی بشه */
.shorts-reel-wrapper ~ .shorts-back-top,
body:has(.shorts-reel-wrapper) .shorts-back-top {
    display: none;
}

/* در دسکتاپ، دکمه رو با محدوده‌ی ۴۸۰px هماهنگ کن */
@media (min-width: 520px) {
    .shorts-back-top {
        left: calc(50% - 240px + 16px);
    }
}
/* ===========================================
   دکمه CTA زمان‌بندی‌شده روی ویدیو
=========================================== */
.shorts-cta-btn {
    position: absolute;
    left: 50%;
    bottom: 160px; /* ⚠️ اگه ارتفاع بخش توضیحاتت فرق داره، این عدد رو تنظیم کن */
    transform: translate(-50%, 8px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 26px;
    border: none;
    border-radius: 24px;

    background: var(--coral-gradient);
    box-shadow: 0 8px 22px -6px rgba(255, 75, 46, .65);

    color: var(--coral-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;

    z-index: 20;
    opacity: 0;
    pointer-events: none;

    transition: opacity 0.35s ease, transform 0.35s ease;
}

.shorts-cta-btn.cta-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

/* ══════════════════════════════
   پاپ‌آپ ورود با موبایل (RIRA OTP) — قبل از ثبت کامنت از مهمون‌ها
══════════════════════════════ */
.shorts-login-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.shorts-login-modal.open {
    visibility: visible;
    pointer-events: all;
}

.shorts-login-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: pointer;
}

.shorts-login-modal.open .shorts-login-backdrop {
    opacity: 1;
}

.shorts-login-box {
    /* کارت از توکن‌های طرح رنگ می‌گیرد — همان‌هایی که خودشان در پوستهٔ تیره
       ری‌مپ می‌شوند (style.css §«حالت تیره»)، پس اینجا بلوک دارک جدا لازم نیست.
       ظاهرِ خودِ فرم RIRA داخل این کارت را rira-login.css می‌سازد (.rml-skin). */
    --login-card-bg: var(--surface);
    --login-card-text: var(--text-1);
    --login-card-text-dim: var(--text-2);
    --login-close-bg: var(--surface-2);

    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--login-card-bg);
    color: var(--login-card-text);
    border-radius: 20px;
    padding: 18px 16px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease, background .2s ease, color .2s ease;
    direction: rtl;
}

.shorts-login-modal.open .shorts-login-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.shorts-login-close {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--login-close-bg);
    border: none;
    border-radius: 50%;
    color: var(--login-card-text);
    cursor: pointer;
    z-index: 2;
}

/* همون باگ SVG-توی-فلکس قبلی: بدون flex:none عرض آیکون توی این دکمه‌ی
   flex-centered تا ~۲px جمع می‌شه و عملاً نامرئی می‌شه */
.shorts-login-close svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.shorts-login-hint {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--login-card-text-dim);
    margin: 6px 0 0;
}

/* فرم افزونه RIRA خودش کارت سفید گردِ خودش رو داره؛ داخل این پاپ‌آپ اون چروک
   و بقیه‌ی ظاهرش رو rira-login.css صاف می‌کنه (کلاس .rml-skin روی همین باکس).
   اینجا فقط فاصله‌ی فرم تا متن «برای ثبت نظر ابتدا وارد شوید» می‌مونه. */
.shorts-login-box.rml-skin div#rml-data {
    margin-top: 14px;
}

.shorts-cta-btn:active {
    transform: translate(-50%, 0) scale(0.96);
}
/* ============================================================
   فید دسکتاپ — README §9 «Desktop feed — 1280»
   ------------------------------------------------------------
   ساختار: هدر چسبان (کروم خود فلت‌سام، خارج از این فایل) و بدنه‌ای که به دو
   ستون می‌شکنه: ستون کناری ۳۰۰px سمت راست (کارت پروفایل + کارت تیره‌ی دوره)
   و ستون اصلی منعطف سمت چپ (ردیف پیل تب‌ها + شبکه‌ی ۴ستونه‌ی ۹/۱۴).

   یک DOM برای هر دو چیدمان: زیر ۱۰۲۴px دو ظرفِ ستون فقط دو <div> بلوکیِ
   تمام‌عرض‌ان، پس ترتیب موبایل دست‌نخورده می‌مونه؛ عناصر مخصوص دسکتاپ
   (کارت دوره، متن پیل‌ها، شمارنده) پایین همین‌جا مخفی می‌شن.

   دو انحراف عمدی از پروتوتایپ، چون بورد دسکتاپ این دو بخش رو نداره ولی
   حذفشون یعنی از دست دادن قابلیت:
   — «موضوع‌ها» (سیستم دنبال‌کردن) توی ستون کناری زیر کارت‌ها می‌شینه.
   — ردیف استوری‌ها بالای ردیف تب‌ها توی ستون اصلی می‌مونه.
   ============================================================ */

/* عناصر مخصوص دسکتاپ — پیش‌فرض مخفی، در ≥۱۰۲۴px روشن می‌شن */
.shorts-featured-course,
.shorts-tab-text,
.shorts-tabs-count,
.shorts-tab-pill-only {
    display: none;
}

@media (min-width: 1024px) {

    /* ── قاب دو ستونه ─────────────────────────────────────── */
    .shorts-page-wrapper {
        max-width: 1280px;
        display: flex;
        align-items: flex-start;
        gap: 36px;
        padding: 34px var(--page-pad) 60px;
    }

    .shorts-col-side {
        width: 300px;
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .shorts-col-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ── کارت پروفایل ─────────────────────────────────────── */
    /* در موبایل آواتار و آمار کنار هم‌ان و بقیه زیرشون؛ در دسکتاپ ترتیب
       آواتار → نام → نقش → آمار → بایو → CTA و همه وسط‌چین.
       این ترتیب از دو سطح تودرتو رد می‌شه، پس هر دو ظرف رو display:contents
       می‌کنیم تا فرزندهاشون مستقیم آیتم فلکسِ کارت بشن و order بگیرن. */
    .shorts-profile-section {
        background: var(--surface);
        border: 1px solid var(--divider);
        border-radius: var(--r-card-lg);
        padding: 22px;
    }

    .shorts-profile-header {
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .shorts-profile-top,
    .shorts-profile-info {
        display: contents;
    }

    .shorts-avatar-wrapper   { order: 1; width: 100px; height: 100px; padding: 3px; }
    .shorts-profile-name-row { order: 2; justify-content: center; margin-bottom: 0; }
    .shorts-profile-role     { order: 3; margin: -10px 0 0; }
    .shorts-stats            { order: 4; width: 100%; flex: none; }
    .shorts-bio              { order: 5; margin: 0; line-height: var(--lh-body); }
    .shorts-bio-link         { order: 6; margin-top: 0; }
    .shorts-profile-cta      { order: 7; width: 100%; margin-top: 0; }

    .shorts-avatar,
    .shorts-avatar-placeholder { border-width: 3px; border-color: var(--surface); }

    .shorts-profile-name { font-size: 18px; }
    .shorts-stat-number  { font-size: 16px; }

    /* CTA تک‌دکمه‌ای و طلایی: «تماس» و دکمه‌ی مربعی در دسکتاپ حذف می‌شن چون
       هر دو توی نویگیشن هدرن، و دکمه‌ی اصلی طلاییه نه ink (README §9) */
    .shorts-cta-secondary,
    .shorts-cta-more {
        display: none;
    }

    .shorts-cta-primary {
        flex: 1;
        padding: 12px;
        font-size: 14px;
        font-weight: 800;
        background: var(--coral);
        color: var(--coral-ink);
    }

    /* ── کارت تیره‌ی «دوره‌ی در جریان» ───────────────────────── */
    .shorts-featured-course {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: var(--feed-featured-bg);
        border: 1px solid var(--feed-featured-border);
        border-radius: var(--r-card-lg);
        padding: 20px;
        text-decoration: none;
        /* متن این کارت در هر دو پوسته روشنه، چون خود کارت همیشه تیره‌ست */
        color: #FAF8F4;
        transition: background var(--dur-color) var(--ease);
    }

    .shorts-featured-eyebrow {
        font-size: 11px;
        font-weight: 700;
        color: var(--gold-500);
    }

    .shorts-featured-title {
        font-size: 16px;
        font-weight: 800;
        line-height: var(--lh-title);
    }

    .shorts-featured-meta {
        font-size: 12.5px;
        line-height: 1.8;
        color: rgba(250,248,244,.65);
    }

    .shorts-featured-price {
        font-size: 18px;
        font-weight: 800;
        color: #FAF8F4;
    }

    /* عددِ قیمت را خودِ ووکامرس در .woocommerce-Price-amount.amount می‌پیچد و
       رنگ #111 رویش می‌گذارد — دو کلاس، پس از .shorts-featured-price قوی‌تر
       بود و روی این کارتِ تیره سیاه‌روی‌سیاه می‌شد. del و ins رنگ خودشان را
       دارند، پس inherit همان را می‌گیرد. */
    .shorts-featured-price .woocommerce-Price-amount.amount {
        color: inherit;
    }

    /* «تومان» به‌صورت span کوچک‌تر و کم‌رنگ‌تر بعد از عدد (README §Typography) */
    .shorts-featured-price .woocommerce-Price-currencySymbol {
        font-size: 11px;
        font-weight: 400;
        color: rgba(250,248,244,.6);
        margin-right: 4px;
    }

    .shorts-featured-price del {
        font-size: 12px;
        font-weight: 500;
        color: rgba(250,248,244,.5);
        margin-left: 6px;
    }

    .shorts-featured-price ins {
        text-decoration: none;
        color: #FAF8F4;
    }

    .shorts-featured-free { color: var(--gold-500); }

    .shorts-featured-cta {
        background: var(--coral);
        color: var(--coral-ink);
        text-align: center;
        padding: 11px;
        border-radius: 11px;
        font-size: 13.5px;
        font-weight: 800;
        transition: background var(--dur-color) var(--ease);
    }

    .shorts-featured-course:active {
        transform: scale(var(--press-scale));
        transition-duration: var(--dur-press);
    }

    /* ── ستون اصلی: استوری، تب، شبکه ───────────────────────── */
    .shorts-highlights-row {
        padding: 0 0 2px;
    }

    /* نوار تب به ردیف پیل تبدیل می‌شه: بدون خط بالا/پایین، گلیف جاش رو به متن
       می‌ده و شمارنده‌ی ویدیو ته ردیف می‌شینه (README §9) */
    .shorts-tabs-bar {
        border: none;
        background: transparent;
        align-items: center;
        gap: 8px;
    }

    /* «برای شما» در دسکتاپ هم پیل می‌شود. قبلاً اینجا display:none بود،
       چون برچسب تزئینی بود؛ حالا دکمه‌ی ورود به ریل است و پنهان کردنش
       یعنی غیرقابل‌دسترس شدنش بالای ۱۰۲۴px. */
    .shorts-tab-icon,
    .shorts-tab-pill-only,
    .shorts-tab-label {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 18px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--text-1);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        text-decoration: none;
        cursor: pointer;
        transition: background var(--dur-color) var(--ease), color var(--dur-color) var(--ease);
    }

    .shorts-tab-icon svg {
        display: none;
    }

    .shorts-tab-text {
        display: inline;
    }

    /* پیل فعال: ink روی روشن و طلایی روی تیره — همون قاعده‌ی --ink (README §1b) */
    .shorts-tab-icon.active {
        background: var(--ink);
        color: var(--ink-text);
        border-color: transparent;
        font-weight: 700;
    }

    .shorts-tabs-count {
        display: inline;
        margin-inline-start: auto;
        font-size: 13px;
        color: var(--text-3);
        white-space: nowrap;
    }

    /* شبکه: ۴ ستون، فاصله‌ی ۱۴، کاشی گرد ۱۴ — برخلاف موبایل که تمام‌عرض و
       چسبیده با فاصله‌ی ۲px بود (README §9 در برابر §1) */
    .shorts-grid-section {
        padding: 0;
    }

    .shorts-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .shorts-grid-item {
        border-radius: 14px; /* README §9: کاشی دسکتاپ ۱۴ */
    }

    .shorts-grid-views {
        bottom: 9px;
        right: 9px;
        font-size: 12px;
        text-shadow: 0 1px 4px rgba(0,0,0,.7);
    }

    .shorts-grid-views svg {
        width: 11px;
        height: 11px;
    }

    /* ── هاور: «یک پله روشن‌تر»، بدون transform روی کارت‌ها ── */
    @media (hover: hover) {
        .shorts-cta-primary:hover,
        .shorts-featured-cta:hover     { background: var(--hover-gold); }
        .shorts-featured-course:hover  { background: var(--hover-ink); }
        .shorts-tab-icon:not(.active):hover,
        .shorts-tab-pill-only:hover    { background: var(--hover-surface); color: var(--text-1); }
    }
}


/* ============================================================
   چسبیدن سوییچر تب — README §۳الف
   ------------------------------------------------------------
   قبلاً یک نوار باریکِ پروفایل (position: fixed) بالای صفحه می‌نشست و
   تب زیرِ آن با آفستِ ارتفاع هدر می‌چسبید. نوار باریک برداشته شد و تب
   خودش می‌چسبد، آن هم درست به بالای صفحه: هدر سایت روی این صفحه اصلاً
   چسبان نیست و با اسکرول می‌رود، پس هر آفستی فقط یک فاصله‌ی خالی بود.

   یک نکته که بدون آن هیچ‌کدام کار نمی‌کرد: style.css روی html و body
   (و روی #wrapper) overflow-x: hidden !important گذاشته تا اسکرول افقی
   نیفتد، و همان یک خط، body را ظرفِ اسکرول می‌کند و position: sticky را
   در کل سایت از کار می‌اندازد. clip همان محافظت را می‌دهد بدون ساختن
   ظرف؛ اینجا فقط برای صفحه‌ی خانه عوض می‌شود.
   ============================================================ */
body.home,
body.home #wrapper { overflow-x: clip !important; }

@media (max-width: 1023px) {

    .shorts-tabs-bar {
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--paper);
    }

    /* سایه فقط وقتی واقعاً چسبیده — همان مقدار README §۳الف */
    .shorts-page-wrapper.is-pinned .shorts-tabs-bar {
        box-shadow: 0 4px 12px -8px rgba(15, 26, 21, .25);
    }
}

/* ============================================
   نوار پخش (اسکراب) — README §۲
   --------------------------------------------
   جایش بین بلوک کپشن و کف صفحه است: خودش روی
   --sz-info-bottom می‌نشیند و بلوک پایین و ریل
   کنش‌ها به اندازه‌ی --sz-scrub-space بالا می‌روند.
   عمداً auto-hide ندارد (README §۲).
   ============================================ */
.shorts-reel-item {
    /* ارتفاع کنترل (۲۰) + فاصله تا بلوک بالایی (۱۲) */
    --sz-scrub-space: 36px;
}

.shorts-scrub {
    position: absolute;
    inset-inline: 14px;
    bottom: var(--sz-info-bottom);
    z-index: 11;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #fff;
    direction: rtl;
}

.shorts-scrub-time {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    min-width: 30px;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.shorts-scrub-total { color: rgba(255,255,255,.7); }

/* ناحیه‌ی لمسی از خودِ ریل بزرگ‌تر است (ریل ۳px، هدف ۲۰px) */
.shorts-scrub-track {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 3px;
    border-radius: var(--r-pill, 99px);
    background: rgba(255,255,255,.28);
    cursor: pointer;
    touch-action: none;
}
.shorts-scrub-track::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: -9px;
    bottom: -9px;
}
.shorts-scrub-track:focus-visible {
    outline: 2px solid var(--gold-500, #D4A24C);
    outline-offset: 6px;
}

.shorts-scrub-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: var(--r-pill, 99px);
    background: var(--gold-500, #D4A24C);
}

.shorts-scrub-knob {
    position: absolute;
    top: -3.5px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: var(--r-pill, 99px);
    background: #fff;
    transform: translateX(-50%);
    pointer-events: none;
}

.shorts-scrub-volume {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    /* خنثی‌کردن پایه‌ی دکمه‌ی فلت‌سام (min-height:2.5em) که وگرنه
       کل ردیف نوار پخش را به ۳۹px می‌کشاند */
    min-height: 0;
    min-width: 0;
    line-height: 1;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.shorts-scrub-volume svg { width: 17px; height: 17px; display: block; }
.shorts-scrub-volume .shorts-scrub-vol-off { display: none; }
.shorts-scrub-volume.is-muted .shorts-scrub-vol-on { display: none; }
.shorts-scrub-volume.is-muted .shorts-scrub-vol-off { display: block; }

/* بلوک پایین و ریل کنش‌ها جا برای نوار پخش باز می‌کنند */
.shorts-reel-info {
    bottom: calc(var(--sz-info-bottom) + var(--sz-scrub-space));
}
.shorts-reel-actions {
    bottom: calc(var(--sz-info-bottom) + var(--sz-scrub-space) + var(--sz-card-space) + 46px);
}

/* ============================================================
   پلیر شورت — دسکتاپ (README §۲ج)
   ------------------------------------------------------------
   همان مارک‌آپ موبایل، چیدمان دیگر: یک ردیفِ وسط‌چین
   [چورن قبلی/بعدی] [ویدیو ۴۰۰×۷۱۲] [ریل کنش] [پنل نظرات ۴۱۲×۷۱۲].
   پنل نظرات روی ویدیو نمی‌افتد و همیشه باز است؛ دلیلش هم همین است
   که ویدیو موقع خواندن نظرها به پخش ادامه می‌دهد.
   ============================================================ */
.shorts-reel-nav { display: none; }
.shorts-comments-sort { display: none; }

@media (min-width: 1024px) {

    .shorts-reel-wrapper {
        background: #0B0F0D;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 26px;
    }

    .shorts-reel-topbar { top: 24px; inset-inline: 40px; }

    /* ── چورن‌های قبلی/بعدی — راستِ ردیف (اول در DOM، RTL) ── */
    .shorts-reel-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        flex: none;
    }
    .shorts-reel-nav-btn {
        width: 24px;
        height: 24px;
        padding: 0;
        margin: 0;
        min-width: 0;
        min-height: 0;
        line-height: 1;
        border: 0;
        background: transparent;
        color: rgba(250,248,244,.35);
        cursor: pointer;
        transition: color var(--dur-color, 160ms) var(--ease, ease);
    }
    .shorts-reel-nav-btn:hover { color: var(--paper, #FAF8F4); }
    .shorts-reel-nav-btn svg { width: 24px; height: 24px; display: block; }
    .shorts-reel-nav-btn[data-dir="prev"] svg { transform: rotate(-90deg); }
    .shorts-reel-nav-btn[data-dir="next"] svg { transform: rotate(90deg); }

    /* ── کارت ویدیو ─────────────────────────────────────────
       ظرف از کارت پهن‌تر است تا ریل کنش بیرون کارت بنشیند و
       اسکرول عمودیِ اسنپ همچنان کار کند (اسکرول افقی چیزی نمی‌بُرد). */
    .shorts-reel-container {
        width: 472px;        /* کارت ۴۰۰ + جای ریل کنش */
        max-width: 472px;    /* لغو سقف ۴۲۰ بلوک ۷۶۸ */
        height: 712px;
        flex: none;
    }

    .shorts-reel-item {
        width: 400px;
        height: 712px;
        margin-inline-end: auto;     /* کارت سمت راست، ۹۸px خالی سمت چپ برای ریل */
        overflow: visible;
        background: var(--green-800, #12291F);
        border-radius: var(--r-card-lg, 20px);
    }

    /* شعاع روی خودِ ویدیو و پرده است، نه روی ظرف — تا ریل بیرون بریده نشود */
    .shorts-reel-video,
    .shorts-reel-scrim { border-radius: var(--r-card-lg, 20px); }

    /* ── ریل کنش — بیرون کارت، دکمه‌های دایره‌ای ۴۶px ── */
    .shorts-reel-actions {
        left: -72px;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        gap: 22px;
    }
    .shorts-action { gap: 5px; }
    .shorts-action svg {
        width: 21px;
        height: 21px;
        box-sizing: content-box;
        padding: 12px;
        border-radius: var(--r-pill, 99px);
        background: #141A17;
        border: 1px solid #232B27;
    }
    .shorts-action-label { font-size: 11px; font-weight: 600; }

    /* دکمه‌ی نظرات فعال است، چون پنل کنارش همیشه باز است */
    .shorts-comment-btn svg {
        background: rgba(212,162,76,.16);
        border-color: rgba(212,162,76,.4);
        color: var(--gold-500, #D4A24C);
    }
    .shorts-comment-btn .shorts-action-label { color: var(--gold-500, #D4A24C); }

    /* آمار بازدید در دسکتاپ جای خودش را به پنل نظرات می‌دهد */
    .shorts-view-stat { display: none; }

    /* ── نوار پخش فشرده (README §۲ج: زمان یکجا، بدون آیکن صدا) ── */
    .shorts-reel-info { inset-inline: 18px; bottom: 20px; }
    .shorts-scrub { inset-inline: 14px; bottom: 6px; gap: 9px; }
    .shorts-scrub-current { display: none; }
    .shorts-scrub-total {
        font-size: 10px;
        color: rgba(255,255,255,.75);
        min-width: 0;
    }
    .shorts-scrub-volume { display: none; }

    /* ── پنل نظرات — کارت ثابتِ کنار ویدیو، نه شیت ── */
    .shorts-comments-sheet {
        position: static;
        visibility: visible;
        pointer-events: auto;
        flex: none;
        z-index: auto;
    }
    .shorts-comments-backdrop,
    .shorts-comments-handle { display: none; }

    .shorts-comments-content {
        position: static;
        width: 412px;
        height: 712px;
        max-height: 712px;
        transform: none;
        background: #141A17;
        border: 1px solid #232B27;
        border-radius: var(--r-card-lg, 20px);
        box-shadow: none;
    }

    .shorts-comments-header { padding: 18px 20px; }
    .shorts-comments-close { display: none; }

    .shorts-comments-sort {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: none;
        padding: 6px 11px;
        min-width: 0;
        min-height: 0;
        line-height: 1;
        background: #0B0F0D;
        border: 1px solid #232B27;
        border-radius: 9px;
        color: rgba(250,248,244,.7);
        font-family: inherit;
        font-size: 11.5px;
        cursor: pointer;
    }
    .shorts-comments-sort svg { width: 12px; height: 12px; }

    /* آناتومی کامنت یک پله بزرگ‌تر از موبایل (README §۲ج) */
    .shorts-comment-avatar { width: 38px; height: 38px; }
    .shorts-comment-text { line-height: 1.9; }
}

/* ============================================
   COMMENTS — حالت «در انتظار تایید» و نظر تازه‌نشسته
   ============================================ */
.shorts-comment-pending-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #ffc46b;
    background: rgba(255,196,107,0.14);
    padding: 3px 8px;
    border-radius: 20px;
}

.shorts-comment-item.is-pending {
    background: rgba(255,196,107,0.06);
    border-color: rgba(255,196,107,0.18);
}

.shorts-comment-item.is-pending .shorts-comment-text { color: rgba(255,255,255,0.72); }

/* یک برق کوتاه روی نظری که همین الان ثبت شد */
.shorts-comment-item.just-added { animation: shortsCommentIn .45s ease; }

@keyframes shortsCommentIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.shorts-comment-replies[hidden] { display: none; }

.shorts-comments-sort.is-new { color: #fff; }

/* ============================================
   SHARE SHEET — پاپ‌آپ اشتراک‌گذاری ریلز
   (همون بدنه‌ی شیت نظرات، فقط کوتاه‌تر)
   ============================================ */
.shorts-share-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    visibility: hidden;
    pointer-events: none;
}

.shorts-share-sheet.open {
    visibility: visible;
    pointer-events: auto;
}

.shorts-share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s ease;
    cursor: pointer;
}

.shorts-share-sheet.open .shorts-share-backdrop { opacity: 1; }

.shorts-share-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #201c22 0%, #171418 100%);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
    direction: rtl;
}

.shorts-share-sheet.open .shorts-share-content { transform: translateY(0); }

.shorts-share-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 2px;
    margin: 10px auto 0;
}

.shorts-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.shorts-share-close {
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .2s, background .2s;
}

.shorts-share-close:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* همون باگ SVG-توی-فلکس: بدون flex:none آیکون داخل دکمه‌ی flex-centered
   تا چند پیکسل جمع می‌شود و عملاً نامرئی می‌ماند */
.shorts-share-close svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.shorts-share-close svg path { stroke: currentColor; }

.shorts-share-targets {
    display: flex;
    gap: 10px;
    padding: 20px 20px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.shorts-share-targets::-webkit-scrollbar { display: none; }

/* دکمه‌ی «بیشتر» فقط جایی که مرورگر navigator.share دارد؛ باز هم
   display:flex روی attribute hidden می‌چربد، پس صریح خاموشش می‌کنیم */
.shorts-share-target[hidden] { display: none; }

.shorts-share-target {
    flex: 1 0 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: transform .15s ease;
}

.shorts-share-target:active { transform: scale(0.94); }

.shorts-share-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.shorts-share-icon svg { flex: none; display: block; }

/* آیکون‌های برندی توپُرند و آیکون «بیشتر» خطی — هر کدام باید رنگ خودش را بگیرد */
.shorts-share-icon--native svg path,
.shorts-share-icon--native svg circle {
    stroke: currentColor;
    fill: none;
}

.shorts-share-icon--telegram { background: #229ED9; }
.shorts-share-icon--whatsapp { background: #25D366; }
.shorts-share-icon--x        { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.14); }
.shorts-share-icon--native   { background: rgba(255,255,255,0.1); }

.shorts-share-name {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}

.shorts-share-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 20px 0;
    padding: 6px 6px 6px 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}

.shorts-share-url {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    padding: 0 8px;
    text-overflow: ellipsis;
}

.shorts-share-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 12px;
    cursor: pointer;
    transition: background .2s ease;
}

.shorts-share-copy:hover { background: rgba(255,255,255,0.18); }

.shorts-share-copy svg { flex: none; }

.shorts-share-copy svg path,
.shorts-share-copy svg rect {
    stroke: currentColor;
    fill: none;
}

.shorts-share-copy.copied {
    background: rgba(37,211,102,0.2);
    color: #4ade80;
}

@media (min-width: 1024px) {
    /* روی دسکتاپ کارت وسط صفحه، نه شیت پایین */
    .shorts-share-content {
        bottom: auto;
        top: 50%;
        left: 50%;
        right: auto;
        width: 420px;
        max-width: calc(100vw - 40px);
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.08);
        padding-bottom: 20px;
        transform: translate(-50%, -46%) scale(0.96);
        opacity: 0;
        transition: transform .25s ease, opacity .25s ease;
    }

    .shorts-share-sheet.open .shorts-share-content {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .shorts-share-handle { display: none; }
}

/* استایل ورودی لینک باید از استایل عمومی input تم قوی‌تر باشد */
.shorts-share-link input.shorts-share-url {
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255,255,255,0.62);
    height: auto;
    margin: 0;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.6;
}

.shorts-share-link input.shorts-share-url:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
    color: #fff;
}

.shorts-share-copy span { white-space: nowrap; }

/* ============================================
   «از این‌جا شروع کنید» — کارتِ بالای گرید
   ============================================
   یک مسیرِ روشن پیش از شورتس‌ها (front-page.php). همان زبانِ کارتِ تیره‌ی
   «دوره‌ی در جریان»، پس در پوسته‌ی تیره هم با همان متغیرها عوض می‌شود.
   متنِ روی طلایی --coral-ink است، نه --ink-900 که در پوسته‌ی تیره روشن
   می‌شود. */
.shorts-start {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px var(--page-pad) 0;
    padding: 10px;
    border-radius: var(--r-media);
    background: var(--feed-featured-bg);
    border: 1px solid var(--feed-featured-border);
    color: #FAF8F4;
    text-decoration: none;
    transition: transform var(--dur-press) var(--ease);
}
.shorts-start:hover { color: #FAF8F4; }
.shorts-start:active { transform: scale(var(--press-scale)); }
.shorts-start:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

.shorts-start-thumb {
    position: relative;
    flex: none;
    width: 84px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--green-600), #0F1A15);
}
.shorts-start-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shorts-start-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 26px;
    height: 26px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    background: var(--coral);
    color: var(--coral-ink);
}
.shorts-start-play svg { width: 11px; height: 11px; margin-inline-start: 2px; }

.shorts-start-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.shorts-start-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gold-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shorts-start-title { font-size: 14px; font-weight: 800; line-height: 1.55; }
.shorts-start-meta { font-size: 11px; color: rgba(250, 248, 244, .62); }
.shorts-start-cta {
    flex: none;
    background: var(--coral);
    color: var(--coral-ink);
    font-size: 12px;
    font-weight: 800;
    padding: 9px 12px;
    border-radius: 10px;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .shorts-start { margin: 0; padding: 12px 14px; gap: 14px; }
    .shorts-start-thumb { width: 112px; }
    .shorts-start-title { font-size: 15.5px; }
    .shorts-start-cta { padding: 10px 16px; font-size: 13px; }
}


/* ============================================
   «درباره‌ی شاهکار ذهن» — متن معرفیِ ته صفحه‌ی اصلی
   template-parts/home-intro.php
   بعد از فید و پیش از فوتر؛ هم‌عرضِ ستون موبایل، و در دسکتاپ
   هم‌عرض قاب دوستونه با متنی که از ۷۶۰px پهن‌تر نمی‌شود.
   ============================================ */
.home-intro {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--page-pad) 36px;
    background: var(--paper);
    direction: rtl;
}
.home-intro-inner {
    border-top: 1px solid var(--divider);
    padding-top: 22px;
}
.home-intro-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--text-1);
}
.home-intro p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 2;
    color: var(--text-2);
}
.home-intro strong { color: var(--text-1); font-weight: 700; }
.home-intro p a {
    color: var(--text-1);
    text-decoration: underline;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
.home-intro-subtitle {
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
}
.home-intro-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.home-intro-topics li { margin: 0; }
.home-intro-topics a {
    display: inline-block;
    padding: 8px 14px;            /* هدف لمسی ≥ ۳۶px */
    border: 1px solid var(--border);
    border-radius: var(--r-pill, 99px);
    background: var(--surface);
    color: var(--text-1);
    font-size: 12.5px;
    line-height: 1.6;
    text-decoration: none;
}
.home-intro-topics a:hover { border-color: var(--coral); }

@media (min-width: 1024px) {
    .home-intro {
        max-width: 1280px;
        padding: 0 var(--page-pad) 56px;
    }
    .home-intro-inner { max-width: 760px; }
    .home-intro-title { font-size: 19px; }
    .home-intro p { font-size: 14.5px; }
}