/* صفحه‌ی جزئیات محتوا — هماهنگ با نظام هویت بصری ادبراه (site.css :root) */

.content-page-container {
    max-width: 1100px;
    margin   : 0 auto;
    padding  : 1rem
}

.section-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 1.5rem
}

.section-header h2 {
    font-size: 1.8rem
}

/* ======== ۱. هدر محصول: کاور/ویدیو + اطلاعات + اقدامات ======== */
.content-hero {
    display              : grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap                  : 2rem;
    background-color     : var(--surface);
    border               : 1px solid var(--border-subtle);
    border-radius        : 20px;
    padding              : 1.75rem;
    margin-bottom        : 2rem;
    box-shadow           : var(--card-shadow)
}

.content-hero-media {
    position     : relative;
    border-radius: 14px;
    overflow     : hidden
}

.content-cover-wrap {
    position: relative
}

.content-cover {
    width        : 100%;
    aspect-ratio : 1 / 1;
    object-fit   : cover;
    display      : block;
    border-radius: 14px;
    background-color: var(--surface-strong)
}

.content-play-overlay {
    position        : absolute;
    inset           : 0;
    width           : 100%;
    height          : 100%;
    background      : linear-gradient(0deg, #00000080, transparent 55%);
    border          : none;
    cursor          : pointer;
    display         : flex;
    align-items     : flex-end;
    justify-content : center;
    padding-bottom  : 1.5rem
}

.content-play-overlay i {
    width          : 72px;
    height         : 72px;
    border-radius  : 50%;
    background-color: var(--accent-color);
    color          : var(--background-secondary);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 2rem;
    box-shadow     : 0 8px 24px #00000059;
    transition     : transform .2s ease
}

.content-play-overlay:hover i {
    transform: scale(1.06)
}

.video-player {
    display      : block;
    width        : 100%;
    aspect-ratio : 16 / 9;
    border-radius: 14px;
    background-color: #000
}

.content-hero-info {
    display       : flex;
    flex-direction: column;
    justify-content: center
}

.content-badges {
    display  : flex;
    flex-wrap: wrap;
    gap      : .5rem;
    margin-bottom: .75rem
}

.content-badge {
    display         : inline-flex;
    align-items     : center;
    gap             : .35rem;
    background-color: var(--surface-strong);
    border          : 1px solid var(--border-subtle);
    color           : var(--secondary-text);
    font-size       : .8rem;
    padding         : .3rem .7rem;
    border-radius   : 999px
}

.content-badge-accent {
    background-color: var(--accent-color-soft);
    border-color     : var(--accent-color);
    color            : var(--accent-color)
}

.content-hero-info h1 {
    font-size    : 2rem;
    margin       : 0 0 .5rem
}

.content-author {
    color    : var(--secondary-text);
    font-size: 1rem;
    margin-bottom: .25rem
}

.content-author a {
    color: var(--accent-color) !important
}

.content-price {
    font-size  : 1.3rem;
    font-weight: 700;
    color      : var(--accent-color);
    margin-bottom: 1.25rem
}

.content-actions {
    display    : flex;
    align-items: center;
    gap        : 1rem;
    flex-wrap  : wrap
}

.content-actions #like-count {
    color    : var(--secondary-text);
    font-size: .9rem
}

/* ======== ۲. کنترل‌های پلیر ویدیو (فقط برای محتوای ویدیویی؛ صوت به پلیر سراسری سپرده می‌شود) ======== */
.player-controls.video-controls {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-top     : 1.25rem
}

.icon-button {
    background: none;
    border    : none;
    color     : var(--secondary-text);
    font-size : 1.4rem;
    cursor    : pointer;
    transition: color .2s
}

.icon-button:hover {
    color: var(--accent-color)
}

.main-controls {
    display    : flex;
    align-items: center;
    gap        : 1rem
}

.play-pause-button {
    background-color: var(--accent-color);
    color           : var(--background-secondary);
    width           : 56px;
    height          : 56px;
    border-radius   : 50%;
    border          : none;
    font-size       : 1.8rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    transition      : transform .2s
}

.play-pause-button:hover {
    transform: scale(1.05)
}

.playback-speed-container {
    position: relative
}

.speed-menu {
    position        : absolute;
    bottom          : 120%;
    left            : 0;
    background-color: var(--surface-strong);
    color           : var(--primary-text);
    border          : 1px solid var(--border-subtle);
    border-radius   : 8px;
    padding         : 5px;
    width           : 120px;
    box-shadow      : 0 10px 25px #00000059;
    z-index         : 10;
    opacity         : 1;
    transition      : opacity .2s ease, transform .2s ease;
    transform       : translateY(0)
}

.speed-menu.hidden {
    opacity       : 0;
    pointer-events: none;
    transform     : translateY(10px)
}

.speed-option {
    padding      : 8px 12px;
    cursor       : pointer;
    border-radius: 5px;
    text-align   : center
}

.speed-option:hover {
    background-color: var(--accent-color-soft)
}

.speed-option.active {
    background-color: var(--accent-color);
    color           : var(--background-secondary);
    font-weight     : 700
}

.progress-bar-container {
    display    : flex;
    align-items: center;
    gap        : 1rem;
    color      : var(--secondary-text);
    font-size  : .9rem;
    margin-top : 1rem
}

.progress-bar {
    position        : relative;
    flex-grow       : 1;
    height          : 6px;
    background-color: var(--border-subtle);
    border-radius   : 5px;
    cursor          : pointer
}

.progress {
    position        : absolute;
    top             : 0;
    right           : 0;
    height          : 100%;
    width           : 0%;
    background-color: var(--accent-color);
    border-radius   : 5px
}

/* ======== ۳. تب‌های اطلاعات ======== */
.content-info-section {
    margin-bottom: 3rem
}

.info-tabs {
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1.5rem
}

.tab-button {
    background   : none;
    border       : none;
    color        : var(--secondary-text);
    font-size    : 1rem;
    padding      : .5rem 1rem;
    cursor       : pointer;
    border-bottom: 3px solid transparent;
    transition   : all .2s
}

.tab-button.active,
.tab-button:hover {
    color             : var(--primary-text);
    border-bottom-color: var(--accent-color)
}

.info-content h2 {
    font-size    : 1.5rem;
    margin-bottom: .5rem
}

.info-content p {
    color: var(--secondary-text)
}

/* ======== ۴. محتوای مرتبط (Carousel) ======== */
.carousel-nav .nav-arrow {
    background-color: var(--surface-strong);
    color           : var(--primary-text);
    border          : none;
    width           : 35px;
    height          : 35px;
    border-radius   : 50%;
    cursor          : pointer;
    margin          : 0 .25rem
}

.related-carousel {
    display         : flex;
    gap             : 1rem;
    overflow-x      : auto;
    padding-bottom  : 1rem;
    scrollbar-width : none
}

.related-carousel::-webkit-scrollbar {
    display: none
}

.related-card {
    flex         : 0 0 180px;
    border-radius: 10px;
    overflow     : hidden;
    position     : relative;
    cursor       : pointer;
    aspect-ratio : 1 / 1
}

.related-card img {
    width     : 100%;
    height    : 100%;
    object-fit: cover
}

.related-card .card-title {
    position  : absolute;
    bottom    : 0;
    right     : 0;
    left      : 0;
    background: linear-gradient(to top, #000000cc, transparent);
    padding   : 1.5rem .75rem .75rem;
    font-size : 1rem;
    color     : #fff !important
}

/* ======== طراحی ریسپانسیو ======== */
@media (max-width: 768px) {
    .content-hero {
        grid-template-columns: 1fr;
        padding              : 1.25rem
    }

    .content-hero-info h1 {
        font-size: 1.5rem
    }
}

@media (max-width: 600px) {
    .content-page-container {
        padding: .5rem
    }

    .related-card {
        flex-basis: 150px
    }

    .section-header h2 {
        font-size: 1.5rem
    }
}