/*
 * لایه واکنش‌گرای مشترک صفحات عمومی
 * این فایل عمداً پس از استایل اختصاصی هر صفحه بارگذاری می‌شود.
 */

html {
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
}

img,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

.page-body,
.modal-info,
.info-text,
.nice-card-title {
    overflow-wrap: anywhere;
    word-break: normal;
}

.page-body table {
    max-width: 100%;
}

@media (max-width: 1100px) {
    body .library-wrapper,
    body .page-container,
    body .profile-container {
        width: calc(100% - 24px) !important;
        margin-top: 105px !important;
        margin-inline: auto !important;
    }

    body .content-wrapper {
        width: calc(100% - 24px) !important;
        margin: 95px auto 40px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --mobile-page-gutter: 12px;
    }

    body {
        overflow-x: hidden !important;
    }

    button,
    input,
    select,
    textarea {
        max-width: 100%;
    }

    body .content-wrapper {
        width: calc(100% - (2 * var(--mobile-page-gutter))) !important;
        margin: 90px auto 28px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    body .library-wrapper,
    body .page-container,
    body .profile-container {
        width: calc(100% - (2 * var(--mobile-page-gutter))) !important;
        margin: 95px auto 32px !important;
    }

    body .library-header {
        margin-bottom: 28px !important;
        padding-inline: 6px;
    }

    body .library-header h2 {
        font-size: clamp(24px, 8vw, 30px) !important;
        line-height: 1.35 !important;
        margin-top: 0 !important;
    }

    body .library-header p {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    body .hero-section {
        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto 26px !important;
        border-radius: 14px !important;
    }

    .hero-content {
        padding: 14px !important;
    }

    .hero-content h2 {
        font-size: clamp(20px, 7vw, 28px) !important;
    }

    .main-grid {
        gap: 16px !important;
        margin-bottom: 24px !important;
    }

    .glass-panel-content {
        padding: 18px !important;
    }

    .featured-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        gap: 8px !important;
    }

    .page-layout {
        flex-direction: column-reverse !important;
        gap: 24px !important;
        padding: 20px !important;
    }

    .page-layout.no-media {
        display: block !important;
    }

    .media-col {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
    }

    .page-header-text {
        margin-bottom: 22px !important;
    }

    .page-header-text h1 {
        font-size: clamp(26px, 8vw, 32px) !important;
        overflow-wrap: anywhere;
    }

    .page-body {
        font-size: 15px !important;
        line-height: 2 !important;
    }

    .page-body table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-body iframe {
        width: 100% !important;
    }

    .dynamic-form-box,
    .profile-card {
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .profile-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .profile-header {
        margin-bottom: 26px !important;
        padding-bottom: 22px !important;
    }

    .profile-header h2 {
        font-size: 27px !important;
    }

    .smart-search-wrapper {
        margin-bottom: 24px !important;
    }

    .smart-search-input {
        min-height: 52px !important;
        padding-block: 12px !important;
        font-size: 14px !important;
    }

    html[dir="rtl"] body .smart-search-input {
        padding-left: 44% !important;
        padding-right: 16px !important;
    }

    html[dir="ltr"] body .smart-search-input {
        padding-right: 44% !important;
        padding-left: 16px !important;
    }

    .smart-search-btn {
        max-width: 42% !important;
        min-height: 40px !important;
        height: calc(100% - 12px) !important;
        padding-inline: 12px !important;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .book-modal-overlay,
    .video-modal-overlay,
    .contact-modal-overlay {
        padding: 8px !important;
    }

    .book-modal {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - 16px) !important;
        overflow-y: auto !important;
        border-radius: 14px !important;
    }

    .book-modal .modal-cover {
        width: 100% !important;
        min-height: auto !important;
        padding: 18px !important;
        gap: 12px !important;
    }

    .book-modal .modal-cover img {
        width: auto !important;
        max-width: 115px !important;
        max-height: 145px !important;
        margin-bottom: 10px !important;
    }

    .book-modal .modal-info {
        width: 100% !important;
        padding: 20px !important;
        overflow: visible !important;
    }

    .book-modal .modal-info h2 {
        font-size: 23px !important;
        padding-inline-end: 32px;
    }

    .book-modal .modal-info h4 {
        font-size: 15px !important;
        margin-bottom: 14px !important;
    }

    .book-modal .modal-info .summary {
        margin-bottom: 8px !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.9 !important;
        overflow: visible !important;
    }

    .book-modal .modal-close,
    .video-modal-box .modal-close {
        top: 10px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    .book-modal .modal-close {
        position: fixed !important;
        top: calc(58px + env(safe-area-inset-top)) !important;
        z-index: 2147483600 !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
    }

    html[dir="rtl"] .book-modal .modal-close {
        left: 18px !important;
        right: auto !important;
    }

    html[dir="ltr"] .book-modal .modal-close {
        right: 18px !important;
        left: auto !important;
    }

    .login-prompt-box > div {
        flex-wrap: wrap;
    }

    .contact-modal-box {
        width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .contact-modal-box .contact-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .contact-modal-box .glass-panel-content {
        padding: 18px !important;
    }

    .contact-modal-close {
        top: 10px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .video-modal-box {
        width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 14px !important;
    }

    .video-modal-main {
        padding: 48px 12px 14px !important;
    }

    .video-container-inner {
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
    }

    .video-modal-sidebar {
        padding: 16px !important;
    }

    .custom-video-controls {
        padding: 30px 10px 10px !important;
        gap: 8px !important;
    }

    .controls-left,
    .controls-right {
        gap: 10px !important;
    }

    .control-btn svg {
        width: 21px !important;
        height: 21px !important;
    }

    .gallery-grid {
        column-count: 2 !important;
        column-gap: 6px !important;
    }

    .gallery-item {
        margin-bottom: 6px !important;
    }

    .lightbox-content {
        padding: 66px 8px 8px !important;
    }

    .lightbox-toolbar {
        max-width: calc(100% - 20px);
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .lightbox-thumbnails-wrapper {
        width: calc(100% - 10px) !important;
        max-width: calc(100% - 10px) !important;
    }

    .reader-top-bar {
        width: 100%;
        padding: 10px 12px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .reader-controls,
    .reader-tools-top {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .reader-tools-top .tool-btn {
        min-width: 42px;
        min-height: 40px;
    }

    .nahj-reader-container {
        width: calc(100% - 24px) !important;
        margin: 24px auto !important;
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .quran-frame-wrapper {
        width: calc(100% - 20px) !important;
        padding: 28px 14px !important;
    }

    .index-menu-dropdown {
        width: min(320px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .nav-buttons-bottom {
        width: calc(100% - 24px) !important;
        gap: 10px;
    }

    .nav-buttons-bottom .btn-outline {
        white-space: normal;
        line-height: 1.5;
    }

    .auth-container {
        min-height: 100dvh !important;
        padding: 12px !important;
    }

    .auth-box .glass-panel-content {
        padding: 18px !important;
    }

    .main-footer-wrapper {
        padding: 20px 0 calc(20px + env(safe-area-inset-bottom)) !important;
    }

    .footer-content-flex {
        width: calc(100% - 24px) !important;
    }

    .master-player {
        max-height: 72dvh;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .player-main-row {
        padding: 12px !important;
    }

    .np-info,
    .np-controls-wrap,
    .np-filters {
        min-width: 0 !important;
    }

    .np-info {
        padding-inline-end: 38px !important;
    }

    .np-text {
        min-width: 0;
    }

    .np-text h4 {
        max-width: 100% !important;
    }

    .np-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .np-filters input[type="range"] {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    body .content-wrapper {
        padding: 10px !important;
    }

    .main-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .featured-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body .multi-col-grid.grid-compact,
    body .articles-grid,
    body .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body .nice-card {
        min-width: 0 !important;
    }

    body .book-presentation {
        height: 115px !important;
    }

    body .book-presentation .nice-card-img-book {
        height: 108px !important;
        max-height: 108px !important;
    }

    body .quran-card {
        min-height: 112px !important;
    }

    body .video-thumb-wrapper {
        height: auto !important;
        aspect-ratio: 3 / 4;
    }

    .book-modal .modal-cover {
        padding: 14px 10px !important;
    }

    .book-modal .modal-cover img {
        max-width: 90px !important;
        max-height: 115px !important;
    }

    .book-modal .modal-info {
        padding: 16px !important;
    }

    .reader-top-bar .btn-outline,
    .reader-download-btn {
        padding-inline: 11px !important;
        font-size: 12px !important;
    }

    .reader-top-bar .book-meta {
        flex: 0 0 100%;
    }

    .progress-box {
        max-width: 100%;
    }

    .page-action-bar {
        flex-wrap: wrap;
    }

    .nav-buttons-bottom {
        align-items: stretch;
    }

    .nav-buttons-bottom .btn-outline {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
    }

    .gallery-grid {
        column-count: 2 !important;
    }

    .time-display {
        font-size: 11px !important;
    }

    .volume-container {
        display: none !important;
    }
}

@media (max-width: 360px) {
    body .content-wrapper,
    body .library-wrapper,
    body .page-container,
    body .profile-container {
        width: calc(100% - 16px) !important;
    }

    .featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .contact-modal-box {
        padding: 12px !important;
    }

    .np-buttons {
        gap: 12px !important;
    }
}