/* ============================================================
   Topic Detail Page — Negin Gostaran  (بخش‌های اختصاصی)
   Theme: navy #0B3954 + red #C81D25  |  RTL
============================================================ */

/* ══════════════════════════════════════════
   PAGE WRAPPER
══════════════════════════════════════════ */
.wrapper.row3 {
    background: linear-gradient(180deg, #F3FAFF 0%, #ffffff 70%);
    min-height: 80vh;
}

/* ══════════════════════════════════════════
   BREADCRUMB HERO BAND
══════════════════════════════════════════ */
.bgded.overlay.train {
    background: linear-gradient(135deg, #0B3954 0%, #1A6CA0 100%) !important;
    padding: 0 !important;
}

#breadcrumb {
    direction: rtl;
    font-family: 'IRANSansX', 'IRANSans', Tahoma, sans-serif;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

    #breadcrumb::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #C81D25;
        box-shadow: 0 0 0 4px rgba(200,29,37,.3);
        animation: tDot 1.8s ease-in-out infinite;
        flex-shrink: 0;
    }

/* ══════════════════════════════════════════
   MAIN CONTAINER
══════════════════════════════════════════ */
main.hoc.train.container {
    direction: rtl;
    font-family: 'IRANSansX', 'IRANSans', Tahoma, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    animation: tFadeUp .65s ease both;
}

/* ══════════════════════════════════════════
   CONTENT CARD
══════════════════════════════════════════ */
.content.three_quarter.first,
div.content.three_quarter.first {
    background: #fff;
    border: 1px solid rgba(11,57,84,.11);
    border-radius: 24px;
    padding: 36px 40px 44px;
    box-shadow: 0 2px 8px rgba(11,57,84,.05), 0 8px 32px rgba(11,57,84,.08), inset 0 1px 0 rgba(255,255,255,.9);
    margin-bottom: 0;
}

    .content.three_quarter.first h1 {
        font-size: clamp(20px, 3vw, 34px);
        font-weight: 900;
        color: #0B3954;
        margin: 0 0 14px;
        line-height: 1.5;
        letter-spacing: -.3px;
        text-align: center;
    }

        .content.three_quarter.first h1::after {
            content: "";
            display: block;
            width: 64px;
            height: 4px;
            margin: 12px auto 28px;
            border-radius: 4px;
            background: linear-gradient(90deg, #C81D25, #1A6CA0);
        }

/* ── بلوک معرفی (review) ── */
.contect-review {
    background: rgba(11,57,84,.04);
    border-right: 4px solid #C81D25;
    border-radius: 0 14px 14px 0;
    padding: 16px 20px;
    color: #1a4f6e;
    font-size: 15px;
    line-height: 1.95;
    margin-bottom: 28px;
}

/* ── محتوای اصلی (Desc) ── */
.scrollable {
    font-size: 15px;
    line-height: 2.1;
    color: #2c4a5c;
    margin-bottom: 32px;
    padding: 24px;
    background: rgba(243,250,255,.6);
    border: 1px solid rgba(11,57,84,.07);
    border-radius: 16px;
    text-align: right;
}

    .scrollable h2,
    .scrollable h3 {
        color: #C81D25;
        font-weight: 800;
        margin-top: 1.4em;
        text-align: right;
    }

    .scrollable strong,
    .scrollable b {
        color: #0B3954;
    }

    .scrollable img {
        max-width: 100%;
        border-radius: 12px;
        margin: 10px 0;
    }

    .scrollable p {
        margin: 0 0 8px;
        text-align: right;
    }

        .scrollable p:not(:has(a)) {
            margin-bottom: 6px;
        }

        /* پاراگراف‌های دکمه دانلود — flex وسط‌چین */
        .scrollable p:has(a[href$=".mp4"]),
        .scrollable p:has(a[href*="mp4"]),
        .scrollable p:has(a[href*="MP4"]),
        .scrollable p:has(a[href$=".wmv"]),
        .scrollable p:has(a[href*="wmv"]),
        .scrollable p:has(a[href*="WMV"]) {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 8px 0;
            text-align: center;
        }

    .scrollable ul, .scrollable ol {
        padding-right: 20px;
    }

    .scrollable p font,
    .scrollable p span,
    .scrollable p b,
    .scrollable p strong {
        display: block;
        text-align: right;
        width: 100%;
        direction: rtl;
    }

    .scrollable p:not(:has(a)) {
        text-align: right !important;
    }

    .scrollable .download-wrap {
        display: flex;
        justify-content: center;
        margin: 10px 0;
    }

    /* ── لینک‌های دانلود MP4/WMV — اندازه یکسان ── */
    .scrollable a[href$=".mp4"],
    .scrollable a[href*="mp4"],
    .scrollable a[href*="MP4"],
    .scrollable a[href$=".wmv"],
    .scrollable a[href*="wmv"],
    .scrollable a[href*="WMV"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        /* اندازه یکسان هر دو دکمه */
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        padding: 14px 24px;
        border-radius: 16px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
        margin: 6px 4px;
        background: linear-gradient(135deg, #0B3954 0%, #1A6CA0 100%);
        color: #fff;
        border: none;
        box-shadow: 0 6px 20px rgba(11,57,84,.28);
    }

        .scrollable a[href$=".mp4"]::before,
        .scrollable a[href*="mp4"]::before,
        .scrollable a[href*="MP4"]::before,
        .scrollable a[href$=".wmv"]::before,
        .scrollable a[href*="wmv"]::before,
        .scrollable a[href*="WMV"]::before {
            content: "▶";
            font-size: 13px;
            opacity: .85;
            transition: transform .3s ease;
            flex-shrink: 0;
        }

        .scrollable a[href$=".mp4"]::after,
        .scrollable a[href*="mp4"]::after,
        .scrollable a[href*="MP4"]::after,
        .scrollable a[href$=".wmv"]::after,
        .scrollable a[href*="wmv"]::after,
        .scrollable a[href*="WMV"]::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
            transform: translateX(-120%) skewX(-15deg);
        }

        .scrollable a[href$=".mp4"]:hover,
        .scrollable a[href*="mp4"]:hover,
        .scrollable a[href*="MP4"]:hover,
        .scrollable a[href$=".wmv"]:hover,
        .scrollable a[href*="wmv"]:hover,
        .scrollable a[href*="WMV"]:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 16px 36px rgba(11,57,84,.38);
            color: #fff;
        }

            .scrollable a[href$=".mp4"]:hover::before,
            .scrollable a[href*="mp4"]:hover::before,
            .scrollable a[href*="MP4"]:hover::before,
            .scrollable a[href$=".wmv"]:hover::before,
            .scrollable a[href*="wmv"]:hover::before,
            .scrollable a[href*="WMV"]:hover::before {
                transform: scale(1.25) rotate(-5deg);
            }

            .scrollable a[href$=".mp4"]:hover::after,
            .scrollable a[href*="mp4"]:hover::after,
            .scrollable a[href*="MP4"]:hover::after,
            .scrollable a[href$=".wmv"]:hover::after,
            .scrollable a[href*="wmv"]:hover::after,
            .scrollable a[href*="WMV"]:hover::after {
                animation: tShimmer .8s ease;
            }

        .scrollable a[href$=".mp4"]:active,
        .scrollable a[href*="mp4"]:active,
        .scrollable a[href*="MP4"]:active,
        .scrollable a[href$=".wmv"]:active,
        .scrollable a[href*="wmv"]:active,
        .scrollable a[href*="WMV"]:active {
            transform: translateY(-1px) scale(.98);
            box-shadow: 0 6px 16px rgba(11,57,84,.28);
        }

/* ══════════════════════════════════════════
   کادر دانلودها (Contact-files)
══════════════════════════════════════════ */
.Contact-files {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* ← وسط‌چین فرزندان */
    gap: 20px;
    margin: 0 0 28px;
    padding: 32px 24px;
    background: rgba(243,250,255,.6);
    border: 1px solid rgba(11,57,84,.07);
    border-radius: 16px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

    .Contact-files p,
    .Contact-files span,
    .Contact-files div:not(.Contact-file):not(.Contact-video) {
        text-align: right;
        width: 100%;
        direction: rtl;
    }

/* ── ردیف دکمه PDF ── */
.Contact-file {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    direction: ltr !important; /* ← RTL رو خنثی می‌کنه تا flex وسط‌چین بشه */

}

/* ── دکمه PDF ── */
.Contact-file-pdf {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #C81D25 0%, #8b1119 100%);
    
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(200,29,37,.38), 0 2px 8px rgba(200,29,37,.18);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
    cursor: pointer;
    white-space: nowrap;
    min-width: 360px !important;
    max-width: 420px !important;
    padding: 18px 70px !important;
    width: auto !important;
    
    letter-spacing: .4px;
    border: 1.5px solid rgba(255,255,255,.15);
    /* اطمینان از وسط‌چین */
    margin: 0 auto;
    text-align: center;
    /* حذف float یا position احتمالی از تم اصلی */
    float: none !important;
    left: auto !important;
    right: auto !important;
}

    .Contact-file-pdf:hover {
        transform: translateY(-5px) scale(1.04);
        box-shadow: 0 20px 46px rgba(200,29,37,.52), 0 4px 12px rgba(200,29,37,.22);
    }

    .Contact-file-pdf:active {
        transform: translateY(-1px) scale(.98);
        box-shadow: 0 6px 18px rgba(200,29,37,.32);
    }

    /* آیکون PDF */
    .Contact-file-pdf::before {
        content: "📄";
        font-size: 22px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
        transition: transform .3s ease;
        flex-shrink: 0;
    }

    .Contact-file-pdf:hover::before {
        transform: scale(1.25) rotate(-10deg);
    }

    /* شیمر */
    .Contact-file-pdf::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
        transform: translateX(-120%) skewX(-15deg);
    }

    .Contact-file-pdf:hover::after {
        animation: tShimmer .85s ease;
    }

    /* لینک شفاف روی کل دکمه */
    .Contact-file-pdf a {
        position: absolute;
        inset: 0;
        font-size: 0;
        color: transparent;
        text-decoration: none;
    }

/* ── دکمه‌های ویدیو (MP4 / WMV) در Contact-file-video ── */
.Contact-file-video {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 36px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
    background: linear-gradient(135deg, #0B3954 0%, #1A6CA0 100%);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(11,57,84,.28);
    min-width: 200px;
    letter-spacing: .3px;
}

    .Contact-file-video::before {
        content: "▶";
        font-size: 13px;
        opacity: .85;
        transition: transform .3s ease;
    }

    .Contact-file-video::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
        transform: translateX(-120%) skewX(-15deg);
        transition: none;
    }

    .Contact-file-video:hover {
        transform: translateY(-4px) scale(1.03);
        box-shadow: 0 16px 36px rgba(11,57,84,.38);
        color: #fff;
        text-decoration: none;
    }

        .Contact-file-video:hover::before {
            transform: scale(1.25) rotate(-5deg);
        }

        .Contact-file-video:hover::after {
            animation: tShimmer .8s ease;
        }

    .Contact-file-video:active {
        transform: translateY(-1px) scale(.98);
        box-shadow: 0 6px 16px rgba(11,57,84,.28);
    }

    .Contact-file-video .file-type {
        position: absolute;
        top: 6px;
        left: 10px;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1px;
        opacity: .65;
        text-transform: uppercase;
    }

/* ── ویدیو ── */
.Contact-video {
    width: 100%;
    max-width: 640px;
}

    .Contact-video video,
    .Contact-video iframe {
        width: 100%;
        border-radius: 16px;
        border: none;
        aspect-ratio: 16/9;
        background: #0B3954;
        box-shadow: 0 6px 24px rgba(11,57,84,.18);
        display: block;
        margin: 0 auto;
    }

/* ══════════════════════════════════════════
   TAGS (تگ‌ها)
══════════════════════════════════════════ */
.content-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid rgba(11,57,84,.10);
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(11,57,84,.05);
}

    .content-tag a {
        display: inline-block;
        padding: 7px 16px;
        background: rgba(11,57,84,.05);
        color: #0B3954;
        border: 1px solid rgba(11,57,84,.14);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: all .28s ease;
        cursor: pointer;
    }

        .content-tag a:hover {
            background: #C81D25;
            color: #fff;
            border-color: #C81D25;
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(200,29,37,.3);
        }

/* ══════════════════════════════════════════
   COMMENTS (نظرات)
══════════════════════════════════════════ */
#comments {
    margin-top: 40px;
    border-top: 1px solid rgba(11,57,84,.08);
    padding-top: 36px;
}

    #comments h2 {
        font-size: 20px;
        font-weight: 900;
        color: #0B3954;
        margin: 0 0 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        #comments h2::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #C81D25;
            box-shadow: 0 0 0 3px rgba(200,29,37,.2);
        }

    #comments ul {
        list-style: none;
        padding: 0;
        margin: 0 0 36px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

        #comments ul li article {
            background: rgba(243,250,255,.7);
            border: 1px solid rgba(11,57,84,.09);
            border-radius: 16px;
            padding: 18px 22px;
            transition: box-shadow .3s ease;
        }

            #comments ul li article:hover {
                box-shadow: 0 6px 20px rgba(11,57,84,.09);
            }

            #comments ul li article header {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 10px;
                flex-wrap: wrap;
            }

.avatar {
    margin: 0;
}

    .avatar img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 2px solid rgba(11,57,84,.15);
        object-fit: cover;
    }

#comments address {
    font-weight: 800;
    font-style: normal;
    color: #0B3954;
    font-size: 14px;
}

#comments time {
    font-size: 12px;
    color: #7a9aac;
    margin-right: auto;
}

.comcont p {
    margin: 0;
    font-size: 14px;
    line-height: 1.95;
    color: #2c4a5c;
}

/* ── فرم ارسال نظر ── */
#comments form {
    background: rgba(11,57,84,.03);
    border: 1px solid rgba(11,57,84,.09);
    border-radius: 20px;
    padding: 28px 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

#comments .one_half {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#comments .block.clear {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#comments label {
    font-size: 13px;
    font-weight: 700;
    color: #0B3954;
}

    #comments label span {
        color: #C81D25;
    }

#comments input[type="text"],
#comments input[type="email"],
#comments textarea {
    width: 100%;
    padding: 11px 16px;
    border: 1px solid rgba(11,57,84,.18);
    border-radius: 12px;
    font-family: 'IRANSansX', 'IRANSans', Tahoma, sans-serif;
    font-size: 14px;
    color: #0B3954;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .28s, box-shadow .28s;
    outline: none;
    direction: rtl;
}

    #comments input[type="text"]:focus,
    #comments input[type="email"]:focus,
    #comments textarea:focus {
        border-color: #1A6CA0;
        box-shadow: 0 0 0 3px rgba(26,108,160,.13);
    }

#comments textarea {
    resize: vertical;
    min-height: 110px;
}

#comments input[type="submit"] {
    padding: 12px 28px;
    background: linear-gradient(135deg, #C81D25, #a8181f);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(200,29,37,.3);
    transition: transform .3s ease, box-shadow .3s ease;
}

    #comments input[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(200,29,37,.44);
    }

#comments input[type="reset"] {
    padding: 12px 22px;
    background: transparent;
    color: #0B3954;
    border: 1px solid rgba(11,57,84,.22);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .28s, transform .28s;
}

    #comments input[type="reset"]:hover {
        background: rgba(11,57,84,.07);
        transform: translateY(-2px);
    }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 768px) {
    .content.three_quarter.first {
        padding: 22px 16px 28px;
        border-radius: 16px;
    }

    .scrollable {
        padding: 16px;
    }

    .Contact-files {
        padding: 20px 14px;
    }

    #comments form {
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    main.hoc.train.container {
        padding: 24px 12px 60px;
    }

    .content.three_quarter.first h1 {
        font-size: 20px;
    }

    .Contact-file-pdf {
        min-width: 0;
        width: 100%;
        padding: 16px 20px;
        font-size: 15px;
    }

    .scrollable a[href$=".mp4"],
    .scrollable a[href*="mp4"],
    .scrollable a[href*="MP4"],
    .scrollable a[href$=".wmv"],
    .scrollable a[href*="wmv"],
    .scrollable a[href*="WMV"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════
   FIXES: visited state + PDF icon
══════════════════════════════════════════ */

/* ── Fix: دکمه‌های MP4/WMV بعد از کلیک سفید نشن ── */
.scrollable a[href$=".mp4"],
.scrollable a[href*="mp4"],
.scrollable a[href*="MP4"],
.scrollable a[href$=".wmv"],
.scrollable a[href*="wmv"],
.scrollable a[href*="WMV"],
.scrollable a[href$=".mp4"]:visited,
.scrollable a[href*="mp4"]:visited,
.scrollable a[href*="MP4"]:visited,
.scrollable a[href$=".wmv"]:visited,
.scrollable a[href*="wmv"]:visited,
.scrollable a[href*="WMV"]:visited,
.scrollable a[href$=".mp4"]:focus,
.scrollable a[href*="mp4"]:focus,
.scrollable a[href*="MP4"]:focus,
.scrollable a[href$=".wmv"]:focus,
.scrollable a[href*="wmv"]:focus,
.scrollable a[href*="WMV"]:focus,
.scrollable a[href$=".mp4"]:active,
.scrollable a[href*="mp4"]:active,
.scrollable a[href*="MP4"]:active,
.scrollable a[href$=".wmv"]:active,
.scrollable a[href*="wmv"]:active,
.scrollable a[href*="WMV"]:active {
    color: #fff !important;
    background: linear-gradient(135deg, #0B3954 0%, #1A6CA0 100%) !important;
    text-decoration: none !important;
}

/* ── Fix: آیکون PDF — emoji رو حذف، SVG جایگزین ── */
.Contact-file-pdf::before {
    content: "" !important; /* emoji رو پاک می‌کنه */
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    filter: none !important;
    transition: transform .3s ease;
}

.Contact-file-pdf:hover::before {
    transform: scale(1.2) rotate(-6deg) !important;
}