@font-face {
    font-family: "Hanuun Hafs";
    src:
        url("assets/kfgqpc-hafs.otf")
        format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* ===== HANUUN AKHRISO APP STYLE ===== */

.hanuun-akhriso-shell {
    --akhriso-scale: 1;
    min-height: 100vh;
    padding: 24px 0 150px;
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(41, 85, 140, .15),
            transparent 34rem
        );
}

.hanuun-akhriso-app {
    width: min(
        1040px,
        calc(100% - 28px)
    );
    margin: 0 auto;
}

.hanuun-akhriso-nav {
    position: sticky;
    top: 0;
    z-index: 80;

    display: grid;
    grid-template-columns:
        54px
        minmax(110px, .8fr)
        minmax(90px, .65fr)
        minmax(180px, 1.4fr)
        54px;

    overflow: hidden;

    border: 1px solid
        rgba(242, 196, 92, .38);

    border-bottom-color:
        rgba(242, 196, 92, .68);

    border-radius: 22px 22px 0 0;

    background:
        linear-gradient(
            180deg,
            #254f8f,
            #183b72
        );

    box-shadow:
        0 18px 42px
        rgba(0, 6, 20, .28);
}

.hanuun-akhriso-nav-arrow {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}

.hanuun-akhriso-nav-arrow:hover,
.hanuun-akhriso-nav-arrow:focus-visible {
    background:
        rgba(255, 255, 255, .08);
    color: #ffd36b;
}

.hanuun-akhriso-select {
    display: grid;
    align-content: center;
    gap: 2px;

    min-width: 0;
    padding: 9px 10px;

    border-left:
        1px solid
        rgba(255, 255, 255, .10);
}

.hanuun-akhriso-select span {
    color:
        rgba(255, 255, 255, .60);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.hanuun-akhriso-select select {
    width: 100%;
    min-width: 0;

    padding: 2px 18px 2px 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #fff;

    font: inherit;
    font-size: 16px;
    font-weight: 750;

    cursor: pointer;
}

.hanuun-akhriso-select option {
    color: #071d35;
    background: #fff;
}

.hanuun-akhriso-mushaf {
    min-height: 78vh;

    padding:
        30px
        clamp(22px, 6vw, 72px)
        64px;

    border:
        1px solid
        rgba(242, 196, 92, .25);

    border-top: 0;

    border-radius:
        0 0 24px 24px;

    background:
        radial-gradient(
            circle at 50% 16%,
            rgba(255, 255, 255, .58),
            transparent 32rem
        ),
        #f5f0e4;

    color: #111;

    box-shadow:
        0 24px 60px
        rgba(0, 7, 20, .28);
}

.hanuun-akhriso-surah-head {
    position: relative;
    padding: 5px 55px 13px;
    text-align: center;
}

.hanuun-akhriso-surah-head h1 {
    margin: 0;

    color: #101010;

    font-family:
        "Hanuun Hafs",
        serif;

    font-size: 34px;
    font-weight: 400;
    line-height: 1.5;
}

.hanuun-akhriso-surah-head p {
    margin: 2px 0 0;

    color: #706b61;

    font-size: 12px;
    font-weight: 700;
}

.hanuun-akhriso-surah-number {
    position: absolute;
    left: 0;
    top: 15px;

    color: #315988;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
}

.hanuun-akhriso-rule {
    height: 1px;
    margin-bottom: 26px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(27, 39, 50, .25),
            transparent
        );
}

.hanuun-akhriso-quran {
    color: #111;
    text-align: center;

    font-family:
        "Hanuun Hafs",
        serif;

    font-size:
        calc(
            48px *
            var(--akhriso-scale)
        );

    font-weight: 400;
    line-height: 2.05;
    word-spacing: .08em;
}

.hanuun-akhriso-ayah {
    display: inline;

    padding: .05em .08em;

    border-radius: .18em;

    cursor: pointer;

    scroll-margin-top: 120px;

    transition:
        background .15s ease,
        box-shadow .15s ease;
}

.hanuun-akhriso-ayah:hover {
    background:
        rgba(35, 78, 133, .06);
}

.hanuun-akhriso-ayah.is-selected {
    background:
        rgba(242, 196, 92, .20);

    box-shadow:
        inset 0 -2px 0
        rgba(192, 139, 24, .46);
}

.hanuun-akhriso-toolbar {
    position: fixed;
    z-index: 99990;

    left: 50%;
    bottom: 12px;

    transform:
        translateX(-50%);

    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(78px, 1fr)
        );

    width: min(
        960px,
        calc(100% - 24px)
    );

    padding: 9px 10px 7px;

    border:
        1px solid
        rgba(242, 196, 92, .48);

    border-radius: 21px;

    background:
        linear-gradient(
            180deg,
            rgba(34, 72, 134, .985),
            rgba(21, 51, 101, .985)
        );

    box-shadow:
        0 22px 56px
        rgba(0, 5, 18, .44);

    backdrop-filter: blur(16px);
}

.hanuun-akhriso-tool {
    display: grid;
    justify-items: center;
    gap: 4px;

    min-width: 0;
    padding: 2px 3px;

    border: 0;
    background: transparent;
    color: #fff;

    cursor: pointer;
}

.hanuun-akhriso-tool b {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(255, 255, 255, .78);

    border-radius: 50%;

    background: #f7f5ed;
    color: #17376d;

    font-size: 24px;
    line-height: 1;

    transition:
        transform .15s ease,
        background .15s ease,
        color .15s ease;
}

.hanuun-akhriso-tool span {
    max-width: 100%;
    overflow: hidden;

    color:
        rgba(255, 255, 255, .92);

    font-size: 9px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.hanuun-akhriso-tool:hover b,
.hanuun-akhriso-tool:focus-visible b,
.hanuun-akhriso-tool.is-active b {
    transform: translateY(-1px);

    background: #ffd36b;
    color: #092546;

    border-color: #ffd36b;
}

.hanuun-akhriso-tool
.hanuun-akhriso-aa {
    font-size: 12px;
    letter-spacing: -.08em;
}

#hanuun-akhriso-audio {
    display: none;
}

.hanuun-akhriso-bookmarks {
    position: fixed;
    z-index: 99995;

    right: max(
        16px,
        calc((100vw - 960px) / 2)
    );

    bottom: 100px;

    width: min(
        350px,
        calc(100% - 32px)
    );

    max-height: 54vh;
    overflow: auto;

    padding: 14px;

    border:
        1px solid
        rgba(242, 196, 92, .40);

    border-radius: 18px;

    background:
        rgba(5, 29, 55, .99);

    color: #fff;

    box-shadow:
        0 22px 55px
        rgba(0, 5, 18, .45);
}

.hanuun-akhriso-bookmarks header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #ffd36b;
}

.hanuun-akhriso-bookmarks header button {
    width: 30px;
    height: 30px;

    border:
        1px solid
        rgba(242, 196, 92, .30);

    border-radius: 50%;

    background: transparent;
    color: #fff;

    cursor: pointer;
}

.hanuun-akhriso-bookmark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    padding: 9px 2px;

    border-top:
        1px solid
        rgba(255, 255, 255, .08);
}

.hanuun-akhriso-bookmark-row a {
    color: #f3f6fa;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}

.hanuun-akhriso-bookmark-row button {
    border: 0;
    background: transparent;
    color: #f2c45c;
    cursor: pointer;
}

.hanuun-akhriso-source {
    max-width: 760px;
    margin: 20px auto 0;

    color: #7f98b0;

    font-size: 10px;
    line-height: 1.55;
    text-align: center;
}

.hanuun-akhriso-live {
    position: fixed;
    left: -9999px;
}

@media (max-width: 720px) {

    .hanuun-akhriso-shell {
        padding:
            8px 0 122px;
    }

    .hanuun-akhriso-app {
        width:
            calc(100% - 10px);
    }

    .hanuun-akhriso-nav {
        grid-template-columns:
            40px
            minmax(72px, .8fr)
            minmax(58px, .55fr)
            minmax(108px, 1.35fr)
            40px;

        border-radius:
            16px 16px 0 0;
    }

    .hanuun-akhriso-nav-arrow {
        font-size: 32px;
    }

    .hanuun-akhriso-select {
        padding: 8px 5px;
    }

    .hanuun-akhriso-select span {
        display: none;
    }

    .hanuun-akhriso-select select {
        padding-right: 10px;
        font-size: 13px;
    }

    .hanuun-akhriso-mushaf {
        min-height: 82vh;

        padding:
            20px
            17px
            50px;

        border-radius:
            0 0 17px 17px;
    }

    .hanuun-akhriso-surah-head {
        padding:
            4px 34px
            12px;
    }

    .hanuun-akhriso-surah-head h1 {
        font-size: 28px;
    }

    .hanuun-akhriso-quran {
        font-size:
            calc(
                37px *
                var(--akhriso-scale)
            );

        line-height: 2;
    }

    .hanuun-akhriso-toolbar {
        bottom: 6px;

        grid-template-columns:
            repeat(
                7,
                minmax(58px, 1fr)
            );

        width:
            calc(100% - 8px);

        padding:
            7px 3px 5px;

        border-radius: 17px;

        overflow-x: auto;
    }

    .hanuun-akhriso-tool b {
        width: 34px;
        height: 34px;

        font-size: 20px;
    }

    .hanuun-akhriso-tool span {
        font-size: 8px;
    }

    .hanuun-akhriso-bookmarks {
        left: 10px;
        right: 10px;
        bottom: 88px;

        width: auto;
    }
}

@media (max-width: 480px) {

    .hanuun-akhriso-quran {
        font-size:
            calc(
                34px *
                var(--akhriso-scale)
            );
    }
}


/* =====================================================
   HANUUN AKHRISO V3 QAARI
   Title + Somali Surah labels + Hafs reciter chooser
   ===================================================== */

.hanuun-akhriso-page-head {
    width: min(
        1040px,
        calc(100% - 28px)
    );

    margin: 0 auto 20px;

    padding:
        12px 4px
        8px;
}

.hanuun-akhriso-page-kicker {
    display: block;

    margin-bottom: 7px;

    color: #f2c45c;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .14em;
}

.hanuun-akhriso-page-title {
    margin: 0;

    color: #ffd36b;

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    font-weight: 800;
    line-height: 1;
}

.hanuun-akhriso-page-head p {
    max-width: 720px;

    margin:
        11px 0 0;

    color: #b9c9d8;

    font-size: 15px;
    line-height: 1.6;
}


/* Qaari chooser */

.hanuun-akhriso-qaari {
    position: fixed;
    z-index: 99995;

    left: 50%;
    bottom: 100px;

    transform:
        translateX(-50%);

    width: min(
        440px,
        calc(100% - 24px)
    );

    max-height: min(
        640px,
        70vh
    );

    overflow: hidden;

    border:
        1px solid
        rgba(242, 196, 92, .50);

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(13, 45, 81, .995),
            rgba(4, 28, 53, .995)
        );

    color: #fff;

    box-shadow:
        0 24px 70px
        rgba(0, 4, 15, .58);

    backdrop-filter:
        blur(18px);
}

.hanuun-akhriso-qaari-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding:
        16px 17px
        13px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .09);
}

.hanuun-akhriso-qaari-head div {
    display: grid;
    gap: 2px;
}

.hanuun-akhriso-qaari-head span {
    color: #f2c45c;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.hanuun-akhriso-qaari-head strong {
    font-size: 20px;
}

.hanuun-akhriso-qaari-head button {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(242, 196, 92, .34);

    border-radius: 50%;

    background: transparent;
    color: #fff;

    font-size: 22px;

    cursor: pointer;
}

.hanuun-akhriso-qaari-current {
    display: grid;
    grid-template-columns:
        1fr auto;
    gap: 3px 12px;

    padding:
        14px 17px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .08);

    background:
        rgba(242, 196, 92, .045);
}

.hanuun-akhriso-qaari-current > span {
    grid-column: 1;

    color: #8fa8bf;

    font-size: 10px;
    font-weight: 750;
}

.hanuun-akhriso-qaari-current > strong {
    grid-column: 1;

    overflow: hidden;

    color: #fff;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.hanuun-akhriso-qaari-play {
    grid-column: 2;
    grid-row: 1 / span 2;

    align-self: center;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(242, 196, 92, .50);

    border-radius: 999px;

    background: transparent;
    color: #ffd36b;

    font: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.hanuun-akhriso-qaari-play.is-playing {
    background: #ffd36b;
    color: #082443;
}

.hanuun-akhriso-qaari-list {
    max-height: 380px;
    overflow-y: auto;

    padding: 7px;
}

.hanuun-akhriso-qaari-option {
    display: grid;
    grid-template-columns:
        32px
        minmax(0, 1fr)
        24px;

    align-items: center;
    gap: 7px;

    width: 100%;

    padding:
        11px 9px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    color: #edf3f8;

    text-align: left;
    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.hanuun-akhriso-qaari-option:hover,
.hanuun-akhriso-qaari-option:focus-visible {
    background:
        rgba(255, 255, 255, .055);
}

.hanuun-akhriso-qaari-option.is-selected {
    background:
        rgba(242, 196, 92, .12);

    color: #ffd36b;
}

.hanuun-akhriso-qaari-order {
    color: #7995ae;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
}

.hanuun-akhriso-qaari-check {
    opacity: 0;

    color: #ffd36b;

    text-align: center;
}

.hanuun-akhriso-qaari-option.is-selected
.hanuun-akhriso-qaari-check {
    opacity: 1;
}

.hanuun-akhriso-qaari-foot {
    margin: 0;

    padding:
        8px 17px
        12px;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);

    color: #718ca5;

    font-size: 9px;
    text-align: center;
}


/* Keep native Surah selector aligned with Hanuun names */

.hanuun-akhriso-surah-select select {
    font-weight: 800;
}


@media (max-width: 720px) {

    .hanuun-akhriso-page-head {
        width:
            calc(100% - 20px);

        margin-bottom: 12px;

        padding:
            9px 2px
            5px;
    }

    .hanuun-akhriso-page-kicker {
        font-size: 9px;
    }

    .hanuun-akhriso-page-title {
        font-size: 36px;
    }

    .hanuun-akhriso-page-head p {
        margin-top: 7px;

        font-size: 12px;
        line-height: 1.45;
    }

    .hanuun-akhriso-qaari {
        bottom: 88px;

        width:
            calc(100% - 16px);

        max-height:
            min(
                610px,
                68vh
            );

        border-radius: 19px;
    }

    .hanuun-akhriso-qaari-list {
        max-height: 330px;
    }

    .hanuun-akhriso-qaari-current {
        grid-template-columns: 1fr;
    }

    .hanuun-akhriso-qaari-play {
        grid-column: 1;
        grid-row: auto;

        justify-content: center;

        margin-top: 7px;
    }
}


/* ===== END HANUUN AKHRISO V3 QAARI ===== */



/* =====================================================
   HANUUN AKHRISO V4 AYAH AUDIO
   Tap an Ayah to play/share that individual Ayah.
   ===================================================== */

.hanuun-akhriso-ayah-actions {
    position: fixed;
    z-index: 99997;

    left: 50%;
    bottom: 100px;

    transform:
        translate(-50%, 10px);

    width: min(
        420px,
        calc(100% - 24px)
    );

    overflow: hidden;

    border:
        1px solid
        rgba(242, 196, 92, .44);

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(25, 45, 64, .985),
            rgba(14, 30, 46, .995)
        );

    color: #fff;

    box-shadow:
        0 26px 70px
        rgba(0, 4, 15, .56);

    backdrop-filter:
        blur(22px);

    opacity: 0;

    transition:
        opacity .16s ease,
        transform .16s ease;
}

.hanuun-akhriso-ayah-actions.is-open {
    opacity: 1;

    transform:
        translate(-50%, 0);
}

.hanuun-akhriso-ayah-actions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding:
        14px 16px
        11px;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}

.hanuun-akhriso-ayah-actions-head div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.hanuun-akhriso-ayah-actions-head span {
    color: #f2c45c;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.hanuun-akhriso-ayah-actions-head strong {
    overflow: hidden;

    font-size: 15px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.hanuun-akhriso-ayah-actions-head button {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    border:
        1px solid
        rgba(242,196,92,.32);

    border-radius: 50%;

    background: transparent;
    color: #fff;

    font-size: 21px;

    cursor: pointer;
}

.hanuun-akhriso-ayah-play,
.hanuun-akhriso-ayah-share {
    display: grid;
    grid-template-columns:
        48px
        minmax(0, 1fr);

    align-items: center;
    gap: 12px;

    width: calc(100% - 20px);

    margin: 10px;

    padding:
        12px 13px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 16px;

    background:
        rgba(255,255,255,.035);

    color: #fff;

    text-align: left;
    font: inherit;

    cursor: pointer;
}

.hanuun-akhriso-ayah-share {
    margin-top: -2px;
}

.hanuun-akhriso-ayah-play:hover,
.hanuun-akhriso-ayah-share:hover {
    border-color:
        rgba(242,196,92,.40);

    background:
        rgba(242,196,92,.07);
}

.hanuun-akhriso-ayah-play-icon,
.hanuun-akhriso-ayah-share > span {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #f5f0e4;
    color: #173b70;

    font-size: 20px;
}

.hanuun-akhriso-ayah-play-copy {
    display: grid;
    gap: 2px;
}

.hanuun-akhriso-ayah-play-copy strong,
.hanuun-akhriso-ayah-share strong {
    font-size: 15px;
}

.hanuun-akhriso-ayah-play-copy small {
    color: #abbccc;

    font-size: 11px;
    font-weight: 600;
}

.hanuun-akhriso-ayah-play.is-playing
.hanuun-akhriso-ayah-play-icon {
    background: #ffd36b;
    color: #092546;
}

.hanuun-akhriso-ayah-status {
    min-height: 28px;

    padding:
        0 16px
        12px;

    color: #8ea6bb;

    font-size: 10px;
    line-height: 1.4;
}

#hanuun-akhriso-ayah-audio {
    display: none;
}

.hanuun-akhriso-ayah.is-ayah-playing {
    background:
        rgba(242,196,92,.30);

    box-shadow:
        inset 0 -3px 0
        rgba(185,126,13,.72);

    color: #775000;
}

@media (max-width:720px) {

    .hanuun-akhriso-ayah-actions {
        bottom: 88px;

        width:
            calc(100% - 18px);

        border-radius: 20px;
    }

    .hanuun-akhriso-ayah-play,
    .hanuun-akhriso-ayah-share {
        grid-template-columns:
            44px
            minmax(0, 1fr);

        padding:
            11px 12px;
    }

    .hanuun-akhriso-ayah-play-icon,
    .hanuun-akhriso-ayah-share > span {
        width: 40px;
        height: 40px;
    }
}


/* ===== END HANUUN AKHRISO V4 AYAH AUDIO ===== */



/* =====================================================
   HANUUN AKHRISO V4.1 AYAH QAARI
   Explicit Ayah reference + verse-by-verse Qaari choice
   ===================================================== */

.hanuun-akhriso-ayah-reference {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-top: 4px;

    padding:
        3px 7px;

    border:
        1px solid
        rgba(242, 196, 92, .28);

    border-radius: 999px;

    color: #f2c45c;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
}

.hanuun-akhriso-ayah-qaari {
    padding:
        11px
        10px
        2px;
}

.hanuun-akhriso-ayah-qaari label {
    display: grid;
    gap: 6px;
}

.hanuun-akhriso-ayah-qaari label > span {
    padding-left: 4px;

    color: #f2c45c;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
}

.hanuun-akhriso-ayah-qaari select {
    width: 100%;

    padding:
        11px
        38px
        11px
        12px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 13px;

    outline: 0;

    background:
        rgba(255, 255, 255, .055);

    color: #fff;

    font: inherit;
    font-size: 13px;
    font-weight: 750;

    cursor: pointer;
}

.hanuun-akhriso-ayah-qaari select:focus {
    border-color:
        rgba(242, 196, 92, .58);
}

.hanuun-akhriso-ayah-qaari option {
    color: #071d35;
    background: #fff;
}


/*
 * Make the selected/playing Ayah marker remain
 * readable inside the highlighted verse.
 */
.hanuun-akhriso-ayah.is-selected,
.hanuun-akhriso-ayah.is-ayah-playing {
    position: relative;
}

.hanuun-akhriso-ayah.is-ayah-playing {
    color: #704a00;
}


@media (max-width: 720px) {

    .hanuun-akhriso-ayah-qaari {
        padding-top: 9px;
    }

    .hanuun-akhriso-ayah-qaari select {
        font-size: 12px;
    }
}


/* ===== END HANUUN AKHRISO V4.1 AYAH QAARI ===== */



/* =====================================================
   HANUUN AKHRISO V4.2 READER MODE
   Contained Mushaf scrolling + Full Screen reader
   ===================================================== */

.hanuun-akhriso-reader-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    min-height: 45px;

    padding:
        5px
        7px
        9px;
}

.hanuun-akhriso-reader-brand {
    display: none;

    margin-right: auto;

    color: #ffd36b;

    font-size: 18px;
    font-weight: 800;
}

.hanuun-akhriso-reader-state {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding:
        0
        10px;

    border:
        1px solid
        rgba(242, 196, 92, .20);

    border-radius: 999px;

    color: #8da6bc;

    background:
        rgba(4, 27, 51, .38);

    font-size: 9px;
    font-weight: 750;
}

.hanuun-akhriso-reader-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hanuun-akhriso-reader-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 32px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(242, 196, 92, .30);

    border-radius: 999px;

    background:
        rgba(4, 27, 51, .58);

    color: #d7e1ea;

    font: inherit;
    font-size: 10px;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.hanuun-akhriso-reader-button > span {
    color: #f2c45c;

    font-size: 15px;
    line-height: 1;
}

.hanuun-akhriso-reader-button strong {
    font-size: 10px;
    font-weight: 800;
}

.hanuun-akhriso-reader-button:hover,
.hanuun-akhriso-reader-button:focus-visible {
    transform: translateY(-1px);

    border-color:
        rgba(242, 196, 92, .60);

    color: #fff;
}

.hanuun-akhriso-reader-button.is-active {
    border-color: #f2c45c;

    background:
        rgba(242, 196, 92, .13);

    color: #ffd36b;
}


/*
 * Contained mode:
 *
 * Scroll/touch while the pointer is over the cream
 * Mushaf moves the Mushaf itself.
 *
 * Scroll/touch outside it continues moving the page.
 */
.hanuun-akhriso-app.is-contained-scroll
.hanuun-akhriso-mushaf {
    height:
        min(
            70dvh,
            760px
        );

    min-height: 460px;

    overflow-x: hidden;
    overflow-y: auto;

    scroll-behavior: smooth;

    /*
     * Keep normal scroll chaining rather than
     * trapping the entire webpage.
     */
    overscroll-behavior-y: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-gutter: stable;

    scroll-padding:
        105px
        0
        135px;
}


/* Subtle reader scrollbar */

.hanuun-akhriso-app.is-contained-scroll
.hanuun-akhriso-mushaf::-webkit-scrollbar {
    width: 9px;
}

.hanuun-akhriso-app.is-contained-scroll
.hanuun-akhriso-mushaf::-webkit-scrollbar-track {
    background:
        rgba(30, 44, 54, .04);
}

.hanuun-akhriso-app.is-contained-scroll
.hanuun-akhriso-mushaf::-webkit-scrollbar-thumb {
    border:
        2px solid
        #f5f0e4;

    border-radius: 999px;

    background:
        rgba(38, 77, 123, .30);
}


/* Fallback Full Screen */

body.hanuun-akhriso-body-lock {
    overflow: hidden !important;
}

.hanuun-akhriso-app.is-fullscreen-fallback {
    position: fixed;

    z-index: 2147483000;

    inset: 0;

    display: flex;
    flex-direction: column;

    width: 100vw;
    max-width: none;
    height: 100dvh;

    margin: 0;

    overflow: hidden;

    background: #03172c;
}


/*
 * Native Fullscreen + fallback share the same
 * reader layout.
 */

.hanuun-akhriso-app:fullscreen,
.hanuun-akhriso-app:-webkit-full-screen,
.hanuun-akhriso-app.is-fullscreen-fallback {
    display: flex;
    flex-direction: column;

    width: 100vw;
    max-width: none;

    height: 100dvh;
    max-height: none;

    margin: 0;

    overflow: hidden;

    background: #03172c;
}

.hanuun-akhriso-app:fullscreen
.hanuun-akhriso-reader-tools,
.hanuun-akhriso-app:-webkit-full-screen
.hanuun-akhriso-reader-tools,
.hanuun-akhriso-app.is-fullscreen-fallback
.hanuun-akhriso-reader-tools {
    flex: 0 0 auto;

    min-height: 48px;

    padding:
        7px
        12px;

    border-bottom:
        1px solid
        rgba(242, 196, 92, .18);

    background:
        #041a31;
}

.hanuun-akhriso-app:fullscreen
.hanuun-akhriso-reader-brand,
.hanuun-akhriso-app:-webkit-full-screen
.hanuun-akhriso-reader-brand,
.hanuun-akhriso-app.is-fullscreen-fallback
.hanuun-akhriso-reader-brand {
    display: inline-flex;
}

.hanuun-akhriso-app:fullscreen
.hanuun-akhriso-nav,
.hanuun-akhriso-app:-webkit-full-screen
.hanuun-akhriso-nav,
.hanuun-akhriso-app.is-fullscreen-fallback
.hanuun-akhriso-nav {
    position: relative;
    top: auto;

    flex: 0 0 auto;

    border-left: 0;
    border-right: 0;

    border-radius: 0;
}

.hanuun-akhriso-app:fullscreen
.hanuun-akhriso-mushaf,
.hanuun-akhriso-app:-webkit-full-screen
.hanuun-akhriso-mushaf,
.hanuun-akhriso-app.is-fullscreen-fallback
.hanuun-akhriso-mushaf {
    flex: 1 1 auto;

    width: 100%;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden;
    overflow-y: auto;

    margin: 0;

    padding-bottom: 145px;

    border-left: 0;
    border-right: 0;

    border-radius: 0;

    overscroll-behavior-y: contain;

    -webkit-overflow-scrolling: touch;
}

.hanuun-akhriso-app:fullscreen
.hanuun-akhriso-source,
.hanuun-akhriso-app:-webkit-full-screen
.hanuun-akhriso-source,
.hanuun-akhriso-app.is-fullscreen-fallback
.hanuun-akhriso-source {
    display: none;
}


/*
 * Keep bottom app controls safely inside
 * the Full Screen viewport.
 */

.hanuun-akhriso-app:fullscreen
.hanuun-akhriso-toolbar,
.hanuun-akhriso-app:-webkit-full-screen
.hanuun-akhriso-toolbar,
.hanuun-akhriso-app.is-fullscreen-fallback
.hanuun-akhriso-toolbar {
    bottom:
        max(
            8px,
            env(safe-area-inset-bottom)
        );
}


/* Mobile */

@media (max-width: 720px) {

    .hanuun-akhriso-reader-tools {
        min-height: 40px;

        padding:
            3px
            3px
            7px;
    }

    .hanuun-akhriso-reader-state {
        display: none;
    }

    .hanuun-akhriso-reader-button {
        min-height: 30px;

        padding:
            0
            9px;
    }

    .hanuun-akhriso-reader-button strong {
        font-size: 9px;
    }

    .hanuun-akhriso-app.is-contained-scroll
    .hanuun-akhriso-mushaf {
        height:
            min(
                74dvh,
                720px
            );

        min-height: 430px;

        scroll-padding:
            95px
            0
            125px;
    }

    .hanuun-akhriso-app:fullscreen
    .hanuun-akhriso-reader-tools,
    .hanuun-akhriso-app:-webkit-full-screen
    .hanuun-akhriso-reader-tools,
    .hanuun-akhriso-app.is-fullscreen-fallback
    .hanuun-akhriso-reader-tools {
        padding:
            max(
                6px,
                env(safe-area-inset-top)
            )
            9px
            6px;
    }

    .hanuun-akhriso-app:fullscreen
    .hanuun-akhriso-reader-brand,
    .hanuun-akhriso-app:-webkit-full-screen
    .hanuun-akhriso-reader-brand,
    .hanuun-akhriso-app.is-fullscreen-fallback
    .hanuun-akhriso-reader-brand {
        font-size: 15px;
    }

    .hanuun-akhriso-app:fullscreen
    .hanuun-akhriso-mushaf,
    .hanuun-akhriso-app:-webkit-full-screen
    .hanuun-akhriso-mushaf,
    .hanuun-akhriso-app.is-fullscreen-fallback
    .hanuun-akhriso-mushaf {
        padding-bottom:
            calc(
                120px +
                env(safe-area-inset-bottom)
            );
    }
}


/* ===== END HANUUN AKHRISO V4.2 READER MODE ===== */