@font-face {
    font-family: 'IndoPak';
    src: url('../fonts/IndoPak-QuranWBW.woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'urdu_mehr';
        src: url('../fonts/urdu_mehr.woff2'),
        url('../fonts/urdu_mehr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'Farsi';
    src: url('../fonts/persian.woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Pashto';
    src: url('../fonts/pashto.woff2');
    font-display: swap;
}
@font-face {
  font-family: 'sowar_names';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/aqf_bsml.woff2') format('woff2');
}
#translation-stats {
    padding-top: 30px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.label-home{   
    background: #6581AF;
    color: #fff;
    border-radius: 6px;
    padding-left: 6px;
    padding-right: 6px;
    margin-top: 5px;
    display: block;
    padding: 5px 10px;
}

body.dark_theme .label-home {
    background: #2c2c2c;
    color: #fff;
}
body.sepia_theme .label-home {
    background: #FFF7EA;
    color: #000;
}


.sura_native_title{
    font-family:serif; 
}

.surah_name{
    font-family: 'sowar_names', sans-serif;
    font-weight: normal;
}
.hidden{
    display: none;
}

.aya_text{
    font-family: Hafs;
    color:#5f7eb0;
    font-size:26px;
}
.trans_text{
    color:#000;
    font-family: sans-serif;
    font-size:18px;
}
.hamesh{
    font-family: 'Courier New', Courier, sans-serif;
    font-size:16px;
}
.aya_text{
    font-family: Hafs;
    color:#5f7eb0;
    font-size:26px;
}
body.dark_theme .aya_text{
    color: #76afe6;
}

body.dark_theme .trans_text{
    color: #fff;
}
.hamesh{
    font-family: 'Courier New', Courier, sans-serif;
    font-size:16px;
}
body.dark_theme .hamesh{
    color: #ccc;
}

.tafsir_bu{ 
    font-size: 12px;
}
label.page{
    background-color: #f3f7fc;
    padding: 10px !important;
    border-radius: 6px;
}
label.page a{
    color: #5f7eb0;
    text-decoration: none;
}
body.sepia_theme label.page{
    background-color: #f8eedf;
}
body.sepia_theme label.page a{
    color: #8B4513;
}
body.dark_theme label.page{
    background-color: #303030;
}
body.dark_theme label.page a{
    color: #76afe6;
}


.text_primary{
    color: #6a8fc9 !important;
}
.rtl{
    text-align: right;
    direction: rtl;
}
.ltr{
    text-align: left;
    direction: ltr;
}

.section_header{
    background:url(../img/section_header_bg_top.svg) no-repeat right top, url(../img/section_header_bg_bottom.svg) no-repeat left bottom, linear-gradient(249.11deg, #889ec1 -30.44%, #3d619b 130.09%);
}
body.dark_theme .section_header{
    background:url(../img/section_header_bg_top_dark.svg) no-repeat right top, url(../img/section_header_bg_bottom_dark.svg) no-repeat left bottom, linear-gradient(249.11deg, #1f242c -30.44%, #121c2d 130.09%);
}
.bc_bright_gray.border{
    border-color: #bbbbbb !important;
}
.section_header .btn.bg_primary {
    background-color:#5E7CAB;
}

.text-info {
    color: #76afe6 !important;
}
body.dark_theme .text-info {
    color: #76afe6 !important;
}
body.sepia_theme .text-info {
    color: #8B4513 !important;
}
.prevHolderTitle{
    background: #9ec3ff;
    color: #fff;
}
.prevHolderTitle:hover{
    color: #eeeeee;
}
body.dark_theme .prevHolderTitle{
    background: #6b6b6b;
    color: #fff;
}
body.dark_theme .prevHolderTitle:hover{
    color: #ccc;
}
body.sepia_theme .prevHolderTitle{
    background: #D2B48C;
    color: #000;
}
body.sepia_theme .prevHolderTitle:hover{
    color: #333;
}
.text_secondary {
    color: #8A9CB2 !important;
}
body.dark_theme .text_secondary {
    color: #b0b0b0 !important;
}
body.sepia_theme .text_secondary {
    color: #8A9CB2 !important;
}

.bc_gainsboro{
    border-color:#f1f4f8 !important;
}
body.dark_theme .bc_gainsboro{
    border-color:#3a3a3a !important;
}
body.sepia_theme .bc_gainsboro{
    border-color:#f8eedf !important;
}
.text-grey {
    color: #6c757d !important;
}
body.sepia_theme .tab_card img, body.sepia_theme .goals_card_header, body.sepia_theme .dev_card_header img{
    filter:none !important;
}
input.err{
    border: 1px dashed #dc3545 !important;
}
textarea.err{
    border: 1px dashed #dc3545 !important;
}

/* --- Cloned navbar/sidebar styles from template (minimal subset) --- */
#navbar {
  transition: transform .6s ease, background-color .6s ease;
}
#navbar:not(.scroll-down).nav-bg {
  box-shadow: 0px -1px 4px 3px rgba(189,189,189,0.27);
  background-color: var(--white);
}
#navbar.scroll-down {
  transform: translateY(-100%);
  box-shadow: none;
}
.navbar-toggler:after {
  content: '';
  position: fixed;
  top:0;right:0;bottom:0;left:0;
  opacity:0;
  z-index:0;
  visibility:hidden;
  background: linear-gradient(257.02deg, rgba(54,63,77,0.98) -42.29%, rgba(14,19,27,0.98) 45.67%);
  pointer-events:none;
  transition: all .7s ease;
}
.navbar-toggler.show:after {
  z-index:1032;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.sidebar_menu {
  z-index:1033;
}
.sidebar_menu,
.sidebar_menu.show {
  left:auto;
  display:block;
}
.sidebar_menu .dropdown-item {
  height:0;
  overflow:hidden;
}
.sidebar_menu.show .dropdown-item {
  height:57px;
  transition: height .6s ease;
}
.sidebar_menu .slide_top_nav {
  margin-top:-45px;
  transition: margin-top .6s ease;
}
.sidebar_menu.show .dropdown-item .slide_top_nav {
  margin-top:0;
  transition: margin-top .9s ease .4s;
}
.dropdown-toggle::after {
  content: url(../img/arrow-bottom-white.svg);
  border:none;
  margin-left:0;
  vertical-align:middle;
  height:14px;
  line-height:10px;
  transition: transform .4s ease;
}
.dropdown-toggle.show::after {
  transform: rotate(180deg);
}
/* Ensure dark/sepia themes keep overlay behavior */
body.dark_theme .navbar { background-color:#13181F!important; }
body.sepia_theme #navbar.nav-bg { background-color:#FFF7EA!important; }

/* Fallback if original style.css truncated */
.switch_mood_btn {
  height:24px;width:24px;
  background: url(../img/nav/light-mood-icon.svg) center no-repeat;
}
.switch_mood_btn.dark_mood { background-image:url(../img/nav/dark-mood-icon.svg); }
.switch_mood_btn.sepia_mood { background-image:url(../img/nav/sepia-mood-icon.svg); }
/* Scroll padding (fixed header) */
body { padding-top:76px; }


@media (max-width: 400px) {
    .navbar-brand img {
        height: 27px;
    }
}