/* ============================================================
   surah.css  –  Surah / Verses page
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --pad-x: 12.5%;
    --primary: #775347;
    --primaryHover: rgba(119,83,71,.08);
    --secondery: #fdeedb;
    --seconderyHover: #e4d6c5;
    --thirdly: #c79c78;
    --thirdlyHover: #b38c6c;
    --transformBG: #fffaf6;
    --white: #fff;
    --black: #000;
    --border: rgba(0,0,0,.15);
    --lightGrey: #f8f8f8;
    --radius: 10px;
    --transition: .38s;
    --margin: 15px;
}

/* ---------- Font Faces ---------- */
@font-face { font-family:'ITCHandelGothicArabic'; src:url('../font/Tajawal-Regular.ttf') format('truetype'); }
@font-face { font-family:'Yuzarsif'; src:url('../font/Yuzarsif-Regular.ttf') format('truetype'); }
@font-face { font-family:'Amiri'; src:url('../font/Amiri-Regular.ttf') format('truetype'); }
@font-face { font-family:'ReemKufi'; src:url('../font/ReemKufiFun-Regular.ttf') format('truetype'); }

*, *::before, *::after {
    font-family: 'ITCHandelGothicArabic', serif;
    margin: 0; padding: 0; box-sizing: border-box;
}

body {
    background-color: var(--transformBG);
    display: grid;
    grid-template-areas: "header" "main" "footer";
    gap: 0;
}

body main {
    grid-area: main;
    margin: 0;
    padding: 0;
}

/* ============================================================
   SURAH HERO BANNER
   ============================================================ */
.surah-hero {
    position: relative;
    min-height: 280px;
    background: linear-gradient(135deg, var(--primary) 0%, #4a2f27 60%, #2c1a15 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 40px var(--pad-x);
}

.surah-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../images/banners/quran.jpg') center/cover no-repeat;
    opacity: .12;
}

.surah-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(199,156,120,.18) 0%, transparent 60%);
}

.sh-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.sh-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sh-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-nav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: 13px;
    transition: color .2s;
}
.sh-nav a:hover { color: var(--thirdly); }
.sh-nav .sep { color: rgba(255,255,255,.35); font-size: 12px; }
.sh-nav .cur { color: rgba(255,255,255,.95); font-size: 13px; }

.sh-arabic {
    font-family: 'Amiri', serif;
    font-size: clamp(36px, 5vw, 64px);
    color: var(--white);
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}

.sh-phonetic {
    font-family: 'Yuzarsif', serif;
    font-size: clamp(16px, 2.2vw, 22px);
    color: var(--thirdly);
    letter-spacing: .5px;
}

.sh-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.sh-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
}

.sh-badge.verses {
    background: rgba(255,255,255,.15);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.25);
}

.sh-badge.mecque {
    background: rgba(199,156,120,.25);
    color: #fdd9a0;
    border: 1px solid rgba(199,156,120,.4);
}

.sh-badge.medine {
    background: rgba(119,83,71,.35);
    color: #f0c8a0;
    border: 1px solid rgba(119,83,71,.5);
}

.sh-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.sh-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-family: 'ITCHandelGothicArabic', serif;
    transition: all .25s;
}

.sh-btn.primary {
    background: var(--thirdly);
    color: var(--white);
    box-shadow: 0 2px 12px rgba(199,156,120,.35);
}
.sh-btn.primary:hover { background: var(--thirdlyHover); transform: translateY(-1px); }

.sh-btn.ghost {
    background: rgba(255,255,255,.12);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(4px);
}
.sh-btn.ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }

.sh-btn.danger {
    background: rgba(220,80,60,.2);
    color: #ffb3aa;
    border: 1px solid rgba(220,80,60,.3);
}
.sh-btn.danger:hover { background: rgba(220,80,60,.32); }

.sh-btn.admin-btn {
    background: rgba(100,100,200,.2);
    color: #c0c8ff;
    border: 1px solid rgba(100,100,200,.3);
}
.sh-btn.admin-btn:hover { background: rgba(100,100,200,.32); }

.sh-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-img-wrap {
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 3px solid rgba(199,156,120,.4);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

.sh-img-wrap img {
    width: 90px; height: 90px;
    object-fit: contain;
    filter: brightness(1.4) saturate(.8);
}

/* ============================================================
   SURAH NAVIGATION (Prev / Next)
   ============================================================ */
.surah-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px var(--pad-x);
    background: var(--white);
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.sn-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--primary);
    font-size: 13px;
    font-family: 'ITCHandelGothicArabic', serif;
    text-decoration: none;
    cursor: pointer;
    transition: all .22s;
}
.sn-btn:hover {
    background: var(--secondery);
    border-color: var(--thirdly);
    transform: translateY(-1px);
}
.sn-btn.disabled {
    opacity: .35;
    pointer-events: none;
}

.sn-center {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
}

.sn-num {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

/* ============================================================
   VERSES SECTION
   ============================================================ */
.verses-section {
    padding: 32px var(--pad-x) 64px;
}

.vs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--secondery);
}

.vs-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.vs-title-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--secondery);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--thirdly);
}

.vs-count-badge {
    padding: 3px 10px;
    background: var(--secondery);
    color: var(--primary);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   VERSE CARD
   ============================================================ */
.verse {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.06);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow .25s, border-color .25s;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.verse:hover {
    box-shadow: 0 6px 24px rgba(119,83,71,.1);
    border-color: rgba(199,156,120,.3);
}

/* Playing state */
.verse.playing-verse {
    background: linear-gradient(135deg, rgba(199,156,120,.10), rgba(119,83,71,.05));
    border-left: 4px solid var(--thirdly);
    box-shadow: 0 4px 20px rgba(119,83,71,.15);
}

/* Verse header bar */
.verse .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(to right, rgba(253,238,219,.7), rgba(253,238,219,.3));
    border-bottom: 1px solid rgba(199,156,120,.18);
    flex-wrap: wrap;
    gap: 8px;
}

.verse .count {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(119,83,71,.25);
}

.verse .options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* Verse text area */
.verse .text {
    padding: 24px 20px 20px;
    cursor: pointer;
    transition: background .2s;
}
.verse .text:hover {
    background: rgba(253,238,219,.35);
}

.verse .arabic {
    font-family: 'Amiri', serif;
    font-size: 26px;
    line-height: 70px;
    text-align: center;
    color: #2a1a14;
    margin-bottom: 16px;
    direction: rtl;
}

.verse .translation {
    font-size: 16px;
    color: #555;
    line-height: 1.75;
    text-align: center;
    padding: 12px 16px;
    background: var(--lightGrey);
    border-radius: 8px;
    border-left: 3px solid var(--thirdly);
}

/* ============================================================
   FLOATING VERSE PLAYER
   ============================================================ */
#versePlayer {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: var(--white);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 60px;
    padding: 10px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 300px;
    backdrop-filter: blur(8px);
}

#versePlayer button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s, transform .15s;
}
#versePlayer button:hover { color: var(--thirdly); transform: scale(1.1); }

#playerLabel {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .5px;
}

#playerVerse {
    font-weight: 700;
    color: var(--primary);
    font-size: 14px;
}

#playerPlayBtn {
    background: var(--primary) !important;
    color: var(--white) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    box-shadow: 0 2px 8px rgba(119,83,71,.3);
}
#playerPlayBtn:hover { background: var(--thirdly) !important; transform: scale(1.08) !important; }

/* ============================================================
   OPT-BTN (action pill buttons)
   ============================================================ */
.opt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--primary);
    font-family: 'ITCHandelGothicArabic', serif;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
    white-space: nowrap;
}

.opt-btn:hover {
    background: var(--secondery);
    border-color: var(--thirdly);
    transform: translateY(-1px);
}

.opt-btn i { font-size: 13px; }

.opt-btn.report { color: #c0392b; border-color: rgba(192,57,43,.25); }
.opt-btn.report:hover { background: rgba(192,57,43,.07); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
    :root { --pad-x: 5%; }
}

@media (max-width: 768px) {
    :root { --pad-x: var(--margin); }

    .surah-hero {
        min-height: 220px;
        padding: 28px var(--pad-x);
    }

    .sh-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sh-right { display: none; }

    .sh-arabic { font-size: 36px; }

    .sh-actions { gap: 6px; }
    .sh-btn { padding: 7px 14px; font-size: 12px; }

    .surah-nav { padding: 10px var(--pad-x); }
    .sn-btn { padding: 7px 12px; font-size: 12px; }
    .sn-btn span { display: none; }

    .verses-section { padding: 20px var(--pad-x) 48px; }

    .verse .arabic { font-size: 22px; line-height: 58px; }
    .verse .translation { font-size: 14.5px; }

    .opt-btn span { display: none; }
    .opt-btn { padding: 7px 10px; }

    #versePlayer {
        min-width: 260px;
        bottom: 70px;
        padding: 8px 14px;
    }
}

@media (max-width: 480px) {
    .sh-badges { gap: 6px; }
    .sh-badge { font-size: 11px; padding: 4px 10px; }

    .surah-nav { padding: 8px var(--pad-x); }

    .verse .text { padding: 16px 14px 14px; }
    .verse .arabic { font-size: 20px; line-height: 52px; }
    .verse .header { padding: 8px 12px; }
    .verse .count { width: 32px; height: 32px; font-size: 12px; }
}

/* ============================================================
   FOOTER (reuse default pattern)
   ============================================================ */
body footer {
    grid-area: footer;
    background: var(--primary);
    color: var(--white);
    padding: var(--margin);
    font-size: 16px;
}

body footer .guide {
    margin: 0 var(--pad-x) 20px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--margin);
}

body footer .guide div { flex-grow: 1; }
body footer .guide div p { font-size: 16px; }
body footer .guide div h4 { font-size: 17px; margin: 6px 0; }
body footer .guide .links { margin-left: 6px; display: grid; gap: 3.5px; }
body footer .guide .links a { text-decoration: none; font-size: 15px; color: var(--white); }

body footer hr { margin: 30px var(--pad-x) 10px; height: .001rem; color: grey; }

body footer .copyright {
    margin: 0 var(--pad-x);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--margin);
}

body footer .copyright .social {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--margin);
    font-size: 22px;
}

body footer .copyright .social a { text-decoration: none; color: var(--white); transition: color .3s; }
body footer .copyright .social a:hover { color: var(--thirdly); }

@media (max-width: 768px) {
    body footer .guide,
    body footer hr,
    body footer .copyright { margin: var(--margin) var(--margin) 0; }
}