:root { --transition-default: all 0.2s ease; --ar-color: #005430; --ph-color: #1B3A57; }

/* GLOBAL */
.h1, .h2, .h3, .h4, h1, h2, h3, h4 { letter-spacing: normal !important; }
.h1, h1:not(.lightweight):not(.home-h1) { font-size: calc(1.425rem + 2.1vw) !important; }
h1.lightweight { font-size: calc(1rem + 1.0vw) !important; }
h1.lightweight span { font-weight: 100; color: #737373; font-size: 0.5em; }
.s-prop-name { font-style: italic; color: #000; font-weight: 500; }
.bg-header, main .header-2 { background-color: #fff !important; }
main .header-2 { padding-bottom: 3rem; }
.btn-as-link { border: solid 1px #000; padding: 5px 15px; border-radius: 20px; color: #fff; background-color: #000; letter-spacing: 0.5px; transition: var(--transition-default); }
.btn-as-link-reverse { background-color: #fff !important; color: #000 !important; }
.btn-ar-reverse { background-color: #fff !important; border-color: var(--ar-color) !important; color: var(--ar-color); }
.btn-as-link-outline { border: solid 1px #000; padding: 5px 15px; border-radius: 20px; color: #000; background-color: #fff; letter-spacing: 0.5px; transition: var(--transition-default); }
.btn-as-link span { font-size: 13px; color: #7f7f7f; margin-left: 5px; }
.btn-as-link:hover, .btn-as-link-outline:hover, .btn-as-social:hover { opacity: 0.7; }
.btn-as-info { border: solid 1px #999; padding: 3px 10px; border-radius: 20px; color: #999; background-color: #fff; transition: var(--transition-default); font-size: 12px; }
.btn-as-info span { font-size: 11px; color: #000; margin-left: 2px; }
.btn-as-social { display: inline-flex; align-items: center; justify-content: center; padding: 3px 12px; border-radius: 20px; transition: all 0.3s ease; font-size: 14px; text-decoration: none; overflow: hidden; }
.btn-as-social i { opacity: 0; transform: translateX(-6px); margin-left: -18px; transition: all 0.3s ease; font-size: 18px; vertical-align: middle; }
.btn-as-social:hover i { opacity: 1; transform: translateX(0); margin-left: 6px; color: #fff; }
.btn-as-facebook { border: solid 1px #0866FF; color: #0866FF; background-color: #fff; font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; }
.btn-as-facebook:hover { background-color: #0866FF; color: #fff; }
.btn-as-x { border: solid 1px #000; color: #000; background-color: #fff; font-family: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; }
.btn-as-x:hover { background-color: #000; color: #fff; }
.btn-as-whatsapp { border: solid 1px #25D366; color: #25D366; background-color: #fff; font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }
.btn-as-whatsapp:hover { background-color: #25D366; color: #fff; }
.small-h2 { font-size: 1.85rem; }

.ar-zone { color: var(--ar-color); border-color: var(--ar-color); }
.breadcrumb-flex { display: flex; }
.breadcrumb-item+.breadcrumb-item:before { content: '>' !important; }
.c-white { color: #fff !important; margin-left: 0px !important; }

/* MENU */
header.bg-header { border: solid 1px #f3f3f3; }
main .page-header { overflow: inherit !important; display: inherit !important; }
nav:not(.shadow) { box-shadow: none !important; }
.navbar .navbar-brand { font-family: 'Pacifico', Helvetica, Arial, sans-serif !important; font-size: 24px !important; text-transform: capitalize; font-style: italic; }
.container-search-menu { width: 50%; transition: var(--transition-default); }
#search-menu > .choices { width: 100%; }
#search-menu .choices .choices__list.choices__list--single, #search-menu .choices .choices__list.choices__list--single:focus { background-image: none !important; }
#search-menu .choices .choices__list.choices__list--single .choices__item--selectable { margin-bottom: 0 !important; }
#search-menu .choices__inner { border: solid 1px #f7f7f7 !important; font-size: 17px !important; border-radius: 12px ; padding: 12px !important; background: #f7f7f7 !important; color: #000; font-weight: 500; transition: var(--transition-default); }
#search-menu .choices.is-open .choices__inner { border-radius: 12px 12px 0 0; }
#search-menu .choices[data-type*=select-one]::after { display: none; }
#search-menu .choices[data-type*=select-one] { position: relative; }
#search-menu .choices[data-type*=select-one]::before { content: "search"; font-family: "Material Symbols Rounded"; font-size: 27px; color: #888; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#search-menu .choices .choices__list.choices__list--dropdown { border-color: #f7f7f7; border-radius: 0 0 12px 12px; }
#search-menu .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { color: #000; }
#search-menu .choices[data-type*=select-one] .choices__input { border-bottom: solid 1px #ccc !important; }
#search-menu .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { font-size: 17px !important; }
.mobile-menu { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: #fff; transition: right .35s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 9999; }
.mobile-menu.active { right: 0; }
.mobile-close { position: absolute; top: 0; right: 20px; background: none; border: none; font-size: 34px; cursor: pointer; }
.mobile-menu ul { list-style: none; padding: 0 15px; margin: 75px 0 0; }
.mobile-menu li a { display: block; text-decoration: none; }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 998 !important; }
.mobile-logo { position: absolute; left: 50%; transform: translateX(-50%); }

/* HOME */
.home-h1 { font-size: 25px; margin-top: 20px; }
#search-global > .choices { width: 50%; margin-bottom: 5px; }
#search-global .choices .choices__list.choices__list--single, #search-global .choices .choices__list.choices__list--single:focus { background-image: none !important; }
#search-global .choices .choices__list.choices__list--single .choices__item--selectable { margin-bottom: 0 !important; }
#search-global .choices__inner { border: solid 1px #f7f7f7 !important; font-size: 17px !important; border-radius: 12px; padding: 12px !important; background: #f7f7f7 !important; color: #000; font-weight: 500; transition: var(--transition-default); }
#search-global .choices.is-open .choices__inner { border-radius: 12px 12px 0 0; }
#search-global .choices[data-type*=select-one]::after { display: none; }
#search-global .choices[data-type*=select-one] { position: relative; }
#search-global .choices[data-type*=select-one]::before { content: "search"; font-family: "Material Symbols Rounded"; font-size: 27px; color: #888; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#search-global .choices .choices__list.choices__list--dropdown { border-color: #f7f7f7; border-radius: 0 0 12px 12px; }
#search-global .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { color: #000; }
#search-global .choices[data-type*=select-one] .choices__input { border-bottom: solid 1px #ccc !important; }
#search-global .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { font-size: 17px !important; }
.shadow-blur-full{ box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.7),0 3px 12px 0 rgba(0,0,0,.05), 0 -3px 12px 0 rgba(0, 0, 0, .05)!important; }
.card-soft { border: 1px solid #f5f5f5 !important; }
.section-presentation { border-radius: var(--bs-card-border-radius); }
.section-presentation .icon-shape { border-radius: 2rem !important; margin-top: 5px; }

/* SOURATES */
.surah-informations, .surah-related { display: flex; flex-direction: row; gap: 0.5em; }
.surah-informations .btn-as-info, .surah-related .btn-as-info { font-size: 14px; }
.surah-informations .btn-as-info span, .surah-related .btn-as-info span { font-size: 13px; }
.surah-context h2, .surah-context h3, .surah-context h4, .surah-context h5, .surah-context h6 { font-size: 1.5rem !important; }
.surah-context p, .surah-context li { font-size: 0.9rem !important; }
.surah-content p.verse { color: #000; display: block; margin-bottom: 0; }
.surah-content p.verse .verse-number { font-size: 10px; margin-right: 5px; }
.surah-content audio { width: 100%; margin-bottom: 20px; }
.surah-navigation { display: flex; justify-content: normal; }
.surah-navigation-bottom { justify-content: center; }
.surah-navigation a { font-size: 14px; }
.surah-content .verse-introduction { color: #333; font-style: italic; }
.surah-context .bg-light.py-1 { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.surah-content p.verse.lang-ar { text-align: right; direction: rtl; }
.surah-content p.verse.lang-ar span:not(.verse-number) { direction: rtl; unicode-bidi: isolate; font-family: 'Amiri', 'Scheherazade', serif; font-size: 1.8em; line-height: 1.8em; color: var(--ar-color); }
.surah-content p.verse.lang-ar span.verse-number { margin-left: 5px; color: var(--ar-color); }
article.verse { margin-bottom: 1rem; }
.btn-ar { border-color: var(--ar-color) !important; background-color: var(--ar-color) !important; color: #fff; }
.btn-fr { border-color: #0055A4 !important; background-color: #0055A4 !important; color: #fff; }
.btn-en { border-color: #B22234 !important; background-color: #B22234 !important; color: #fff; }
i.material-symbols-rounded.mark-verse { vertical-align: middle; cursor: pointer; transition: var(--transition-default); position: relative; }
i.material-symbols-rounded.mark-verse:hover, i.material-symbols-rounded.mark-verse.bookmarked { color: #f7d002; }
i.material-symbols-rounded.mark-verse::after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%) scale(0.9); background: rgba(33, 33, 33, 0.8); color: #fff; padding: 6px 14px; font-weight: 100; border-radius: 12px; opacity: 0; pointer-events: none; white-space: nowrap; transition: var(--transition-default); z-index: 30; font-family: var(--bs-font-sans-serif); font-size: 12px; }
i.material-symbols-rounded.mark-verse::before { content: ""; position: absolute; bottom: 80%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: rgba(33,33,33,0.95) transparent transparent transparent; opacity: 0; transition: opacity .15s ease-out; }
i.material-symbols-rounded.mark-verse:hover::after, i.material-symbols-rounded.mark-verse:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }
article.verse.resume-highlight { border-radius: 8px; animation: blinkHighlight 1.2s ease-in-out 3; transition: var(--transition-default); }
.link-all-suhras { font-size: 12px; }
.articles-connexes h3 { text-align: left; font-size: 12px; font-style: italic; margin-bottom: 0; }
.articles-connexes ul { list-style: inside; text-align: left; padding-left: 0; font-size: 12px; }
.articles-connexes ul li a { font-style: italic; }
body#surah-index footer.footer { margin-bottom: 10rem; }
@keyframes blinkHighlight { 0% { background-color: rgba(255, 236, 138, 0.9); } 50% { background-color: rgba(255, 236, 138, 0); } 100% { background-color: rgba(255, 236, 138, 0.9); } }

/* POP RESUME READING */
.resume-popup { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; justify-content: center; align-items: center; z-index: 99999; padding: 20px; }
.resume-popup .resume-popup-content { background: #fff; padding: 25px 30px; border-radius: 12px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,0.2); animation: popupFadeIn .25s ease-out; }
.resume-popup .resume-popup-buttons { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
.resume-popup .btn-link { background: transparent; border: none; color: #555; font-size: 14px; text-decoration: underline; padding: 4px; }
.resume-popup .resume-popup-head { font-size: 1.45rem; font-weight: 500; color: #000; }
@keyframes popupFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ARTICLES */
.article h2 { font-size: 1.8rem; }
.article h3 { font-size: 1.2rem; }
.article a, .article a strong { text-decoration: underline; color: var(--ar-color) !important; }
.article strong, .article em { color: #262626; }
#faq h2, #faq h3, #faq h4, #faq h5, #faq h6 { color: #666 !important; }

/* PLAYER */
.player-container { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #B22234; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 9999; padding-bottom: env(safe-area-inset-bottom); transition: transform 0.3s ease-in-out; }
.player-container .player-content { display: flex; justify-content: center; align-items: center; padding: 35px 15px 10px 15px; height: 70px; gap: 30px; }
.player-container .track-info { display: flex; flex-direction: column; max-width: 60%; }
.player-container .track-title { font-weight: 100; color: #fff; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-container .player-controls { display: flex; align-items: center; gap: 15px; }
.player-container .btn-control { background: none; border: none; cursor: pointer; color: #fff; padding: 0; }
.player-container .btn-control.play-pause { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background-color: #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.player-container .btn-control.play-pause i::before { color: #B22234; }
.player-container .btn-control.sm { font-size: 1rem; color: #888; }
.player-container .progress-container { width: 100%; height: 10px; border-top: solid 1px #B22234; background-color: rgba(255, 255, 255, 0.7); cursor: pointer; position: relative; box-sizing: content-box; --thumb-position: 0%; }
.player-container .progress-bar { height: 100%; background: var(--ar-color); width: 0%; transition: width 0.1s linear; border-radius: 0px !important; }
.player-container .time-display { display: flex; justify-content: space-between; padding: 2px 15px; font-size: 0.75em; }
.player-container .time-display span { color: #fff; }
.player-container .player-source { display: none; }
.player-container .icon-stack { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; }
.player-container .icon-stack i { font-size: 1.8em; color: #fff; }
.player-container .icon-text { position: absolute; font-size: 0.55em; font-weight: 100; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -40%); }

/* FOOTER */
footer p.footer-text, footer ul.list-unstyled li { font-size: 0.8rem; }

/* TABLETTES */
@media (max-width: 992px) {
    #search-global > .choices { width: 70%; }
}

/* MOBILES */
@media (max-width: 768px) {
    #search-global > .choices { width: 100%; }
    #count-stats hr.vertical { display: none; }
    h1.lightweight { font-size: calc(1.425rem) !important; }
    h1.lightweight span { display: block; font-size: 0.7em; margin-top: 5px; }
    .surah-related { flex-direction: column; }
    .surah-navigation { display: inline-block; justify-content: none; }
    .surah-navigation > a { margin-bottom: 5px; }
    body:not(#home-index) .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
    body#home-index .navbar-expand-lg .navbar-collapse { display: none !important; }
    .container-search-menu { width: 100%; }
    .navbar .nav-link { padding: .5rem .1rem; }
    #search-global .choices__inner, #search-menu .choices__inner { padding: 5px 10px !important; font-size: 13px !important; }
    #search-global .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item, #search-menu .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { font-size: 12px !important; }
    .navbar .navbar-brand { z-index: 2; }
    .btn-as-social i { display: none !important; }
    .mark-verse::after { bottom: 132% !important; white-space: normal !important; text-align: center; width: 100px; }
    .btn-as-social.btn-as-facebook.ms-auto { margin-left: inherit !important; }
    ul.surah-anchors .nav-item { line-height: 3rem !important; }
    ul.surah-anchors a { font-size: 13px !important; }
    .breadcrumb-item { width: 100%; }
    .lang-switcher { display: none; }
    .mobile-lang-switcher { display: flex; flex-direction: row; justify-content: space-evenly; margin-bottom: 50px; }
    .mobile-lang-switcher a { width: 40%; }
    .mobile-menu-link { display: flex; flex-direction: column; gap: 15px; }
}

/* SCREEN */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse { min-height: 62px; }
}

/* LARGE SCREEN */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1600px !important; }
}