@media screen and (max-width: 1180px){
    .layout::-webkit-scrollbar {
        display: none;
    }
    
    .layout main.section-active, .layout.arabic-layout main.section-active {
        margin-top: 0;
        padding-top: 0;
    }
    .layout aside {
        position: relative;
        height: 70px;
        background-color: transparent;
    }
    .layout.arabic-layout aside {
        position: relative;
        height: 70px;
        background-color: transparent;
    }
    .layout,
    .layout.arabic-layout  {
        display: flex;
        width: 100%;
    }
    
    
    .layout aside .popup,
    .layout.arabic-layout aside .popup {
        bottom: 70px;
        right: 65%;
    }
    .layout main ,
    .layout.arabic-layout main {
        width: 100%;
        margin: 0;
        border-radius:0; 
        box-shadow:none;
        margin-top: 80px;
        z-index: 160;
        border: none;
    }
    .layout main {
        padding-top: 80px;
    }
    .layout.arabic-layout main {
        padding-top: 0px;
        
    }
    .layout main.section-active .content.active ,
    .layout.arabic-layout main.section-active .content.active {
        padding-top:130px ;
        padding-bottom: 60px;
    }
    .layout main .content ,
    .layout.arabic-layout main .content {
        padding-bottom: 130px;
    }
    .layout main .content .modeify,
    .layout.arabic-layout main .content .modeify {
        top: 59px;
        box-shadow: none;
        border-bottom: none;
        width: 100%;
        border-radius: 0;
        left: 0;
        z-index: 180;
        padding: 0px 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #00000012;
        box-shadow: 10px 0px 7px 1px #00000025;
    }
    .layout main .content .modeify .filter,
    .layout.arabic-layout main .content .modeify .filter {
        font-size: clamp(0.5rem, 0.5vw + 1rem, 0.85rem);
    }
    .layout main .content .cards,
    .layout.arabic-layout main .content .cards {
        margin-top: 0;
    }
    .layout aside,
    .layout.arabic-layout aside {
        position: fixed;
        width: 100%;
        height: 64px;
        bottom: 0;
        left: 0;
        margin: 0;
        z-index: 10004;
        background-color: transparent;
    }
    
    .layout aside .content,
    .layout.arabic-layout aside .content {
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        width: 100%;
        height: 100% !important;
        margin: 0;
        padding: 0 24px;
        position: relative;
        left: auto;
        border-radius: 0;
        flex-direction: row;
        overflow: hidden;
    }
    
    .layout aside .logo {
        background-color: transparent;
        display: none;
    }
    .layout aside .separator {
        height: 95%;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        
    }
    .layout aside .icons {
        display: contents;
        
    }
    .layout aside .settings {
        display: contents;
        
    }
    .layout aside .icons > li,
    .layout aside .settings  .card {
        margin: 0;
        padding: 8px 0px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.72em;
        min-width: 80px;
        
    }

    .layout aside .content .icons > li svg, .layout aside .content .settings > .card svg,
    .layout.arabic-layout aside .content .icons > li svg, .layout.arabic-layout aside .content .settings > .card svg{
        margin-left: 0;
    }
    .layout aside .icons > li svg,
    .layout aside .settings > .card svg {
        width: 21px;
        height: 21px;
        margin: 0;
        margin-left: 0;
    }
    .layout aside .settings {
        display: flex;
        align-items: center;
    }
    .layout .player {
        position: fixed;
        bottom: 64px;
        width: 100%;
        z-index: 10003;
        height: 75px;
        padding-top: 5px;
    }
    .layout main {
        margin: 0px 0px 50px;
        height: calc(100vh - 106px);
    }
    main > .content .modeify {
        width: calc(100% - 20px);
        left: 10px;
    }
    .layout main > .content .cards{

        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
    .layout.arabic-layout main > .content .cards {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
        scroll-behavior: smooth;
    }
    header {
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        min-height: 60px;
        background-color: var(--dominant-bg);
        z-index: 10002;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;

    }
    .layout.arabic-layout header .logo,
    header .logo {
        
        height: 60px;
        width: 100px;
        background-image: url("../../images/mobile-dark-logo.png");
        background-size: contain;
        background-repeat: no-repeat;
        scale: 2.5;
    }
    .layout.arabic-layout.dark header .logo,
    .layout.dark header .logo {
        background-image: url("../../images/mobile-dark-logo.png");
    }
    .layout.arabic-layout.light header .logo,
    .layout.light header .logo { 
        background-image: url("../../images/mobile-light-logo.webp");
    }
    header .logo {
        margin-left: 70px;
    }
    header .settings,
    .layout.arabic-layout header .settings {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        flex-direction: row-reverse;
        background-color: #038553aa;
        padding: 4px 12px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        cursor: pointer;
    }
    .layout.light header .settings,
    .layout.light .arabic-layout header .settings {
        background-color: #0a3323aa;
    }
    header .settings {
        margin-left: 0;
        margin-right: 20px;
    }
    header .settings svg {
        width: 25px;
        height: 25px;
        color: var(--main-color);
        transition: 0.3s;
        
        margin-right: 0px;
        margin-left: 10px;

    }
    .layout.arabic-layout header .settings svg {
        margin-left: 0px;
        margin-right: 10px;
    }
    header .settings span {
        color: #FFF;
        font-size: 0.9em;
    }
    header .settings:hover svg{
        color: var(--main-color);
    }
    .layout .overlay.disaple {
        z-index: 9998 !important;
    }
    .layout .modeify.reciter-open {
        z-index: 9997 !important;
        filter: brightness(0.99);
    }
    main > .content .modeify #reciter-menu {
        display: none;
    }
    main > .content .reciter {
        visibility: hidden;
    }
    
    .compact-opening-menu.active {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        width: 80%;
        height: calc(100vh - 90px);
        max-height: calc(100vh - 120px);
        background-color: var(--dominant-bg);
        border-radius: 0;
        transform: translate(0, 0) !important;
        z-index: 10002 !important;
    }
    .compact-opening-menu.active .box {
        display: grid;
        background-color: var(--secondery-color);
        width: 100%;
        height: 100%;
        max-height: none;
        min-height: 0;
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
        align-content: start;
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        padding: 10px  ;
        padding-bottom: 90px;
    }
    .compact-opening-menu.active .box::-webkit-scrollbar {
        display: none;
    }
    .compact-opening-menu.active .box > div {
        display: flex;
        align-items: center;
        background-color: var(--dominant-bg);
        padding: 5px;
        padding-right: 15px;
        border: 1px solid var(--border-color);
        border-radius: 15px;
        transition: 0.3s;
    }
    .compact-opening-menu.active .box > div:hover,
    .compact-opening-menu.active .box > div.active {
        background-color: var(--main-color);
    }
    .compact-opening-menu.active .box > div .details .reciter-name,
    .compact-opening-menu.active .box > div .details .reciter-arabic-name {
        color: var(--text-color);
    }
    .compact-opening-menu.active .box > div:hover .details .reciter-name,
    .compact-opening-menu.active .box > div.active .details .reciter-name,
    .compact-opening-menu.active .box > div:hover .details .reciter-arabic-name,
    .compact-opening-menu.active .box > div.active .details .reciter-arabic-name,
    .compact-opening-menu.active .box > div:hover .details .reading-type,
    .compact-opening-menu.active .box > div.active .details .reading-type {
        color: var(--text-color);
    }
    .compact-opening-menu.active .box > div .details .reading-type{
        color: var(--secondery-text-color);
    }
    .compact-opening-menu.active .box > div .details .reciter-arabic-name {
        display: none;
    }
    .compact-opening-menu.active .box > div .image {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        border-radius: 50%;
        margin-right: 10px;
        border: 1px solid #0000003f;
        overflow: hidden;
    }
    .compact-opening-menu.active .box > div .image img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .layout.arabic-layout .compact-opening-menu.active .box > div {
        padding-right: 5px;
        padding-left: 10px;
    }
    .layout.arabic-layout .compact-opening-menu.active .box > div .image {
        margin-right: 0;
        margin-left: 10px;
    }
    .layout.arabic-layout .compact-opening-menu.active .box > div .details .reciter-name {
        display: none;
    }
    .layout.arabic-layout .compact-opening-menu.active .box > div .details .reciter-arabic-name {
        display: block;
    }
    .layout.arabic-layout .player {
        border-radius: 10px;
        margin: 0 5px;
        width: calc(100% - 10px);
        padding-top: 0;
        border:1px solid var(--border-color);
        background-color: var(--dominant-bg);
        bottom: 64px;
    }
    .layout.arabic-layout .player .inner {
        padding-right: 0px;
    }
    .layout .player .inner .main-controll .prograss {
        width: calc(100% - 180px);
    }
    .layout.arabic-layout .player .reciter-image {
        height: 50px;
        width: 50px;
        overflow: hidden;
        border-radius: 50%;
    }
    .layout.arabic-layout .player .reciter-image img{
        height: 50px;
        width: 100%;
    }
    .layout:not(.arabic-layout) aside .popup {
        right: 3%;
        
    }
}
@media (prefers-color-scheme: dark){
    header .logo {
        background-image: url("../../images/mobile-dark-logo.png");
    }
    
}
@media (prefers-color-scheme: light){
    header .logo {
        background-image: url("../../images/mobile-light-logo.webp");
        
    }
    
}

/* Tablet: keep the reading area wide and move navigation below it. */
@media screen and (max-width: 1000px){
    .layout main #cards {
        grid-template-columns: repeat(2,1fr);
    }
    .layout.arabic-layout main #cards {
        grid-template-columns: repeat(3,1fr);
    }
    .layout .player .inner .activity {
        position: absolute;
        background-color: var(--dominant-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 0 7px 1px #00000030;
        border-radius: 15px;
        padding: 10px;
        top: -50px;
        right: 45%;
        transform: translateX(50%);
        display: none;
    }
    .layout .player .inner .activity.active {
        display: flex;
    }
    .layout .player .inner .mob-menu  {
        display: flex;
    }
}
@media screen and (max-width: 870px) {
    .layout.arabic-layout aside .popup {
        right: 100%;
        transform: translateX(101%);
        margin-left: 200px;

    }
    .layout:not(.arabic-layout) aside .popup {
        right: 3%;
    }
    .juz-container {
        grid-template-columns: repeat(2,1fr);
    }
    .compact-opening-menu.active .box {
        grid-template-columns: 1fr;
    }
    .layout .player .inner .main-controll .controller .like.liked svg {
        fill: var(--main-color);
    }
}
/* Mobile: use the compact list and a two-row control bar. */
@media screen and (max-width: 720px) {
    .layout.arabic-layout main #cards {
        grid-template-columns: repeat(2,1fr);
    }
}