body {
    color: #183354;
    text-align: right;
    font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    text-transform: capitalize;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.top-header {
    background-color: #0b3150;
    padding-top: 4px;
    padding-bottom: 4px;
}

header {
    height: 94px;
}

.nav .nav-item .nav-link {
    color: #183354 !important;
    text-align: right;
    font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    text-transform: capitalize;
}

.nav .nav-item .nav-link:hover {
    color: #0b3150 !important;
    font-weight: 700;
}

footer {
    height: 50px;
    background-color: #0b3150;
}

footer small {
    color: #ffffff;
    font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    text-transform: capitalize;
}

/* publication */
.title-page {
    margin-bottom: 28px;
    text-align: start;
    position: relative;
    padding-bottom: 14px;
}

.title-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(to left, #ffc107 0 60px, #f8f9fa 60px 100%);
    z-index: 0;
}

.title-page::before {
    content: "";
    position: absolute;
    left: 0;
    right: 60px;
    bottom: 0;
    height: 1px;
    background: #e9ecef;
    z-index: 1;
}

.title-page h1 {
    color: #183354;
    text-align: right;
    font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 33.6px;
    text-transform: capitalize;
    display: inline-block;
    margin: 0;
}

.title-page .underline-title {
    display: none;
    margin-right: 12px;
    vertical-align: middle;
    position: relative;
    top: 6px;
}

.pubs-grid .card {
    border: 0;
    background: transparent;
}

.pubs-grid .cover {
    padding: 10px 16px;
    text-align: center;
}

.pubs-grid img {
    width: 170px;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.pub-title {
    margin-top: 14px;
    font-weight: 600;
    color: #222;
    font-size: 15px;
}

.pub-date {
    font-size: 12px;
    color: #6c757d;
    margin: 6px 0;
}

.btn-download {
    background: #183354;
    border: none;
    color: #fff;
    padding: 8px 26px;
    border-radius: 6px;
}

.btn-download:hover {
    background: #0b3150;
}

.pubs-grid .col-6 {
    padding-left: 18px;
    padding-right: 18px;
}

@media (max-width: 767px) {
    .pubs-grid .card {
        margin-bottom: 12px;
    }
    
    .pubs-grid .cover {
        padding: 8px 12px;
    }
    
    .pubs-grid img {
        width: 100%;
        max-width: 160px;
        height: 200px;
    }
    
    .referendum-title {
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.4;
    }
    
    .pubs-grid .col-6 {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .title-page h1 {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    .pubs-grid img {
        width: 100%;
        max-width: 140px;
        height: 180px;
    }
    
    .referendum-title {
        font-size: 12px;
        margin-top: 8px;
        line-height: 1.3;
    }
    
    .pubs-grid .cover {
        padding: 6px 8px;
    }
    
    .pubs-grid .col-6 {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .title-page h1 {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .pubs-grid img {
        width: 180px;
        height: 260px;
    }
}

/* news list styles (images large) */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 22px
}

.news-item {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid #f1f3f5
}

/* Target image size per design */
.news-img {
    flex: 0 0 542px;
    width: 542px;
    height: 314px;
    overflow: hidden;
    border-radius: 8px
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.news-content {
    flex: 1;
    text-align: right;
    min-width: 0;
}

.news-action {
    text-align: right;
    flex-basis: calc(100% - 542px - 28px);
    margin-top: -18px;
}

.news-title {
    font-size: 18px;
    font-weight: 700;
    color: #183354;
    margin-bottom: 8px;
    line-height: 30px;
}

.news-excerpt {
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 12px
}

/* Sidebar news title link styling: inherit parent formatting and remove underline */
.sidebar-news-title a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 100%;
}
.sidebar-news-title a:hover {
    text-decoration: underline;
}

.btn-read {
    background: #183354;
    border: none;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px
}

.btn-read:hover {
    background: #0b3150
}

/* News attachments thumbnails */
.news-attachments {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.news-attachments .news-attachment-thumb {
    max-width: 180px;
    height: auto;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    display: block;
}
.news-attachments .news-attachment-file {
    display: inline-block;
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    color: #333;
    border: 1px solid #e9ecef;
}
@media (max-width: 991px) {
    .news-item {
        flex-direction: column-reverse
    }

    .news-img {
        width: 100%;
        height: 240px
    }

    .news-content {
        text-align: right
    }
}

@media (max-width: 575px) {
    .news-img {
        height: 200px
    }
}

.pagination {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-left: 0;
    margin: 0;
    flex-wrap: wrap;
}

.pagination .page-item .page-link {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #bcc6d2;
    color: #ffffff;
    font-weight: 700;
    border: 0;
    padding: 0;
    box-shadow: none;
    transition: background 0.15s ease;
}

.pagination .page-item .page-link:hover {
    background: #9eaec0;
}

.pagination .page-item.active .page-link {
    background: #183354;
    color: #ffffff;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-sm .page-link {
    font-size: 14px;
}

.referendum-title {
    color: #505050;
    text-align: center;
    font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 26.4px;
    text-transform: capitalize;
    margin-top: 20px;
}

.title-page .news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.title-page .news-header .text-start {
    order: 1
}

.title-page .news-header .text-end {
    order: 2
}

.btn-all {
    border: 1px solid #e9ecef;
    background: #ffffff;
    color: #183354;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: none
}

.btn-all i {
    font-size: 12px
}

.ahkams-container {
    margin: 20px auto
}

.ahkams-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: none;
    padding: 6px;
    width: 100%
}

.ahkams-card .accordion .accordion-item {
    border: 0;
    margin-bottom: 12px;
    position: relative;
    border-radius: 0;
    overflow: visible
}

.ahkams-card .accordion .accordion-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: #E8ECF1
}

.ahkams-card .accordion-header {
    position: relative
}

.ahkams-card .accordion-header::after {
    display: none
}

.ahkams-card .accordion-button {
    background: #eef3f7;
    color: #183354;
    padding: 0 0 0 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    font-weight: 700;
    text-align: right;
    border-radius: 0;
    position: relative;
    min-height: 54px;
    height: 54px;
}

.ahkams-card .accordion-button::after {
    display: none
}

.ahkams-card .accordion-button:focus {
    box-shadow: none
}

.ahkams-card .accordion-button.collapsed {
    background: #eef3f7
}

.ahkams-card .accordion-button:not(.collapsed) {
    background: #f8fafc
}

.ahkams-card .accordion-button .ahkam-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    border-radius: 0;
    background: transparent;
    color: #183354;
    font-size: 18px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.ahkams-card .accordion-button .ahkam-date {
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #6c757d;
    white-space: nowrap;
    line-height: 1;
}

.ahkams-card .accordion-button .ahkam-title {
    padding-right: 22px;
    padding-left: 80px;
}

.ahkams-card .accordion-button .ahkam-icon i {
    transition: transform .18s ease
}

.ahkams-card .accordion-button:not(.collapsed) .ahkam-icon i {
    transform: rotate(-90deg)
}

.ahkam-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 22px;
    font-size: 17px;
    height: 54px;
}

.ahkam-title::before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #183354;
    border-radius: 3px;
    transition: background 0.2s;
    z-index: 1;
}

.ahkam-open .ahkam-title::before {
    background: #183354
}

.ahkams-card .accordion-body {
    background: #ffffff;
    padding: 0 18px 18px 18px;
    color: #505050;
    border-radius: 0
}

.ahkams-card .accordion-body .ahkam-excerpt {
    margin: 0;
    padding: 12px 0 6px 0;
    line-height: 1.9;
    color: #333;
    white-space: pre-wrap;
}

.ahkams-card .accordion-body .ahkam-answer {
    margin: 0;
    padding-bottom: 6px;
    line-height: 1.9;
    color: #555;
    white-space: pre-wrap;
}

@media (max-width: 768px) {
    .ahkams-card .accordion-button .ahkam-title {
        font-size: 15px;
        padding-left: 120px;
        padding-right: 18px;
    }
    
    .ahkams-card .accordion-button .ahkam-date {
        font-size: 12px;
        left: 48px;
    }
    
    .ahkams-card .accordion-button .ahkam-icon {
        width: 44px;
    }
}

@media (max-width:576px) {
    .ahkams-container {
        padding: 0 12px
    }

    .ahkams-card {
        padding: 10px
    }

    .ahkams-card .accordion-button {
        padding: 0;
        font-size: 14px;
        min-height: 48px;
        height: auto;
        flex-wrap: wrap;
    }
    
    .ahkams-card .accordion-button .ahkam-title {
        font-size: 14px;
        padding-left: 12px;
        padding-right: 14px;
        white-space: normal;
        line-height: 1.5;
        padding-top: 8px;
        padding-bottom: 8px;
        height: auto;
        min-height: 48px;
    }

    .ahkams-card .accordion-button .ahkam-icon {
        width: 40px;
        height: 48px;
        font-size: 16px;
    }
    
    .ahkams-card .accordion-button .ahkam-date {
        position: static;
        transform: none;
        font-size: 11px;
        padding: 4px 14px 8px 14px;
        width: 100%;
        text-align: right;
        flex-basis: 100%;
        order: 3;
        margin-top: -4px;
    }
    
    .ahkams-card .accordion-body {
        padding: 0 14px 14px 14px;
        font-size: 14px;
    }
    
    .ahkams-card .accordion-body .ahkam-excerpt {
        font-size: 14px;
        padding: 10px 0 6px 0;
    }
    
    .ahkams-card .accordion-body .ahkam-answer {
        font-size: 14px;
        padding-bottom: 6px;
    }
}

.nav .nav-item.dropdown {
    position: relative;
}

.nav .nav-item.dropdown .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
    padding: 8px;
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    direction: rtl;
}

.nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    padding: 10px 18px;
    margin: 6px 0;
    border-radius: 6px;
}

.nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background: #f8f9fa;
    color: #183354;
}

#istiftaMobileMenu .nav-link {
    padding: 10px 0;
    text-align: right;
    display: block;
    margin-bottom: 6px;
}

#istiftaMobileMenu ul {
    padding-right: 8px;
}

@media (min-width: 992px) {
    body {
        font-size: 16px;
    }

    .nav .nav-item .nav-link {
        font-size: 16px;
    }

    .title-page h1 { font-size: 26px; }
    .news-title { font-size: 16px; }
    .referendum-title { font-size: 20px; }
    .ahkam-title { font-size: 16px; }
}

/* Publications Swiper Styles */
.publications-swiper-wrapper {
    position: relative;
    width: 100%;
}

.publicationsSwiper {
    width: 100%;
    padding-bottom: 50px;
    direction: rtl;
}

.publicationsSwiper .swiper-slide {
    height: auto;
}

.publicationsSwiper .card {
    border: none;
    background: transparent;
    box-shadow: none;
}

.publicationsSwiper .card img {
    max-width: 200px;
    width: 100%;
    height: 250px;
    object-fit: contain;
}

.publicationsSwiper .card .btn-download {
    margin-bottom: 10px;
}

.publicationsSwiper .swiper-pagination {
    bottom: 5px;
}

.publicationsSwiper .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
}

.publicationsSwiper .swiper-pagination-bullet-active {
    background: #e89b2c;
}

/* Referendums Swiper Styles */
.referendums-swiper-wrapper {
    position: relative;
    width: 100%;
}

.referendumsSwiper {
    width: 100%;
    padding-bottom: 50px;
    direction: rtl;
}

.referendumsSwiper .swiper-slide {
    height: auto;
}

.referendumsSwiper .card {
    border: none;
    background: transparent;
    box-shadow: none;
    margin-bottom: 10px;
}

.referendumsSwiper .card img {
    max-width: 100%;
    width: 100%;
    height: 250px;
    object-fit: contain;
}

.referendumsSwiper .referendum-title {
    font-size: 16px;
}

.referendumsSwiper .card .title {
    margin-bottom: 10px;
}

.referendumsSwiper .swiper-pagination {
    bottom: 5px;
}

.referendumsSwiper .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
}

.referendumsSwiper .swiper-pagination-bullet-active {
    background: #e89b2c;
}

@media (max-width: 768px) {
    .title-page .news-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .title-page .news-header .text-end {
        width: 100%;
        text-align: right !important;
    }
    
    .title-page h1 {
        font-size: 24px;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .publicationsSwiper .card img {
        max-width: 100%;
        height: 200px;
    }
    
    .referendumsSwiper .card img {
        height: 200px;
    }
    
    .news-item {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .news-content {
        width: 100%;
        order: 1;
    }
    
    .news-img {
        flex: none;
        width: 100%;
        height: auto;
        min-height: 200px;
        max-height: 250px;
        order: 2;
    }
    
    .news-action {
        display: block;
        width: 100%;
        order: 3;
        text-align: right;
        flex-basis: auto;
        margin-top: 0;
    }
    
    .news-title {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .news-excerpt {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 0;
    }
    
    .pagination {
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .pagination .page-item .page-link {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .title-page h1 {
        font-size: 20px;
    }
    
    .publicationsSwiper .card {
        padding: 8px;
    }
    
    .referendumsSwiper .card {
        padding: 8px;
    }
    
    .news-item {
        padding: 12px 0;
    }
    
    .news-img {
        min-height: 180px;
        max-height: 200px;
    }
    
    .btn-read {
        width: 100%;
        text-align: center;
    }
    
    .pagination {
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 8px;
        flex-wrap: nowrap;
        max-width: 100%;
    }
    
    .pagination::-webkit-scrollbar {
        height: 4px;
    }
    
    .pagination::-webkit-scrollbar-thumb {
        background: #bcc6d2;
        border-radius: 4px;
    }
    
    .pagination .page-item .page-link {
        width: 32px;
        height: 32px;
        font-size: 12px;
        border-radius: 6px;
        flex-shrink: 0;
    }
    
    nav[aria-label="Page navigation"] {
        width: 100%;
        overflow-x: auto;
    }
}