/* Mushaf Reader - Clean & Modern Design */

/* Remove tap highlight on all interactive elements */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

button, select, input, a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Override body background for read page - Light teal consistent with content */
/* No vertical scroll - pages fit screen */
html, body {
    background: linear-gradient(180deg, #f0fdf9 0%, #e6f7f5 100%) !important;
    height: 100vh;
    height: 100svh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    overflow-x: hidden !important;
    overscroll-behavior: none;
    /* No padding here - Android fitsSystemWindows handles it, fixed elements use CSS var */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Islamic Geometric Pattern for read page */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, #f0fdf9 0%, #e6f7f5 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%230d9488' stroke-width='1.5' opacity='0.12'%3E%3Cpath d='M40 10 L50 20 L50 30 L60 30 L70 40 L60 50 L50 50 L50 60 L40 70 L30 60 L30 50 L20 50 L10 40 L20 30 L30 30 L30 20 Z'/%3E%3Cpath d='M0 0 L10 10 M80 0 L70 10 M0 80 L10 70 M80 80 L70 70'/%3E%3Cpath d='M40 0 L40 10 M0 40 L10 40 M80 40 L70 40 M40 80 L40 70'/%3E%3Cpath d='M0 20 L10 10 L20 20 L10 30 Z M60 0 L70 10 L80 0 M60 80 L70 70 L80 80 M0 60 L10 70 L0 80'/%3E%3Cpath d='M60 20 L70 10 L80 20 L70 30 Z M0 60 L10 50 L20 60 L10 70 Z M60 60 L70 50 L80 60 L70 70 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* Fullscreen Read Layout - No vertical scroll, each page fits screen */
.read-fullscreen {
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f0fdf9 0%, #e6f7f5 100%);
    box-sizing: border-box;
}

/* ===================== */
/* FLOATING NAVIGATION CHIP */
/* ===================== */

.floating-nav-chip {
    position: fixed;
    /* Use safe area or fallback for app compatibility */
    top: max(8px, env(safe-area-inset-top, 8px));
    right: max(12px, env(safe-area-inset-right, 12px));
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1000;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    border: none;
    color: white;
    padding: 8px 12px 8px 10px;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4);
    transition: all 0.2s ease;
}

/* Android app - ensure nav chip is visible below status bar */
html.android-app .floating-nav-chip {
    top: calc(8px + var(--android-safe-top, 0px));
}

/* Android app - use CSS variables injected from Java for safe areas */
html.android-app {
    --android-safe-top: 0px;
    --android-safe-right: 0px;
    --android-safe-bottom: 0px;
    --android-safe-left: 0px;
}

.floating-nav-chip:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.5);
}

.floating-nav-chip:active {
    transform: scale(0.98);
}

.nav-chip-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav-chip-label {
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
    font-family: 'Amiri Quran', 'Traditional Arabic', serif;
}

/* ===================== */
/* NAVIGATION POPUP */
/* ===================== */

.nav-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: none;
    animation: fadeIn 0.2s ease;
}

.nav-popup-overlay.show {
    display: block;
}

.nav-popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    width: 85%;
    max-width: 340px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: popupSlide 0.3s ease;
    overflow: hidden;
}

@keyframes popupSlide {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.nav-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
}

.nav-popup-header h3 {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
}

.nav-popup-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
}

.nav-popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.nav-popup-close svg {
    width: 18px;
    height: 18px;
}

.nav-popup-content {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

.nav-popup-section {
    margin-bottom: 16px;
}

.nav-popup-section:last-child {
    margin-bottom: 0;
}

.nav-popup-label {
    display: block;
    font-size: 0.75em;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mode/Qari Tabs */
.nav-popup-tabs {
    display: flex;
    gap: 8px;
}

.nav-tab {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-tab:hover {
    border-color: #14b8a6;
    color: #0d9488;
}

.nav-tab.active {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    border-color: #14b8a6;
    color: white;
}

/* Navigation List (Juz & Surah) - Vertical List */
.nav-popup-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
}

.nav-list-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 1px solid #f0f0f0;
}

.nav-list-item:last-child {
    border-bottom: none;
}

.nav-list-item:hover {
    background: #f0fdfa;
}

.nav-list-item.active {
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.15), rgba(13, 148, 136, 0.05));
}

.nav-list-item.active .nav-list-number {
    background: linear-gradient(135deg, #0d9488, #047857);
}

.nav-list-number {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 600;
    flex-shrink: 0;
}

.nav-list-text {
    font-size: 0.95em;
    font-weight: 500;
    color: #333;
    margin-left: 12px;
}

.nav-list-item.active .nav-list-text {
    color: #0d9488;
    font-weight: 600;
}

/* Hide old top bar and all select dropdowns */
.top-bar-fixed {
    display: none !important;
}

/* Force hide all select elements - navigation is via floating popup */
#readModeSelect,
#surahSelect,
#juzSelect,
#qariSelect {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Fullscreen mode - hide top bar, bottom nav, but keep floating nav visible */
/* No vertical scrolling in fullscreen */
body.fullscreen-mode {
    overflow: hidden !important;
    height: 100vh;
    height: 100svh;
}

body.fullscreen-mode .top-bar-fixed {
    display: none !important;
}

/* Keep floating nav chip visible in fullscreen mode */
body.fullscreen-mode .floating-nav-chip {
    /* stays visible */
}

/* Override bottom nav on read page - match grey theme like other pages */
.bottom-nav {
    border-top: none !important;
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
}

body.fullscreen-mode .bottom-nav-popup,
body.fullscreen-mode .bottom-nav,
body.fullscreen-mode nav.bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.fullscreen-mode .bottom-control-bar {
    bottom: 0;
    border-radius: 0;
    padding: 8px 10px calc(8px + var(--android-safe-bottom, env(safe-area-inset-bottom, 0px))) 10px;
}

/* Hide pattern background in fullscreen mode */
body.fullscreen-mode::before {
    display: none !important;
}

body.fullscreen-mode .mushaf-display-fullscreen {
    margin-bottom: 0;
    margin-top: 0;
}

body.fullscreen-mode .mushaf-page-horizontal {
    height: calc(100svh - var(--quran-ui-space, 100px));
    min-height: calc(100svh - var(--quran-ui-space, 100px));
    max-height: calc(100svh - var(--quran-ui-space, 100px));
    overflow: hidden;
}

/* Fullscreen mode inherits normal mode styles - no overrides needed */

/* ===================== */
/* MAIN CONTENT AREA */
/* ===================== */

.read-main-fullscreen {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Loading */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    flex: 1;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f0f0f0;
    border-top: 4px solid #0891b2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-state p {
    margin-top: 20px;
    font-size: 1.1em;
    color: #666;
}

/* Mushaf Display Fullscreen */
.mushaf-display-fullscreen {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-top: 50px;
    padding-bottom: 0;
    height: 100svh;
    box-sizing: border-box;
}

/* Fullscreen mode - keep same top margin as non-fullscreen */
body.fullscreen-mode .mushaf-display-fullscreen {
    padding-top: 50px;
}

/* Mushaf Container Fullscreen */
.mushaf-container-fullscreen {
    flex: 1;
    font-family: 'Amiri Quran', 'Traditional Arabic', 'Arabic Typesetting', 'Scheherazade', serif;
    font-size: 1.5em;
    line-height: 2.6;
    text-align: justify;
    direction: ltr;
    color: #2c2c2c;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Removed smooth scroll for heavier snap feel */
    display: flex;
    flex-direction: row-reverse;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100svh - var(--quran-ui-space, 190px));
}

/* Hide horizontal scrollbar */
.mushaf-container-fullscreen::-webkit-scrollbar {
    display: none;
    height: 0;
}

.mushaf-container-fullscreen {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ===================== */
/* QURAN PAGE STYLING */
/* ===================== */

.mushaf-page-horizontal {
    display: inline-block;
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    height: calc(100svh - var(--quran-ui-space, 190px));
    min-height: calc(100svh - var(--quran-ui-space, 190px));
    max-height: calc(100svh - var(--quran-ui-space, 190px));
    vertical-align: top;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* Heavier snap - must stop at each page */
    flex-shrink: 0;
    padding: 0;
    background: linear-gradient(180deg, #f0fdf9 0%, #e6f7f5 100%);
    white-space: normal;
    overflow: hidden;
}

.mushaf-page-horizontal .page-inner {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background: linear-gradient(180deg, #f0fdf9 0%, #e6f7f5 100%);
    border: none;
    border-radius: 0;
    position: relative;
    overflow: visible;
    box-shadow: none;
    padding: 5px 3%; /* fallback for older WebViews */
    padding: 5px max(3%, env(safe-area-inset-right, 3%)) 5px max(3%, env(safe-area-inset-left, 3%));
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    direction: rtl;
    /* Font size set by JS to fit exactly 15 lines */
    line-height: var(--quran-line-height, 1.7);
    font-size: var(--quran-font-size, 24px);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Last line justification fix will be handled via JavaScript */


/* First page has surah header - extra top padding for centered look */
.mushaf-page-horizontal.first-page .page-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    /* Keep flex layout, don't override to block */
}

.mushaf-page-horizontal .page-inner > *:not(.qpc-ayah-line):not(.bismillah-ornament) {
    background: linear-gradient(180deg, #f0fdf9 0%, #e6f7f5 100%);
}

/* Decorative corner flourishes - removed */
.mushaf-page-horizontal .page-inner::before {
    display: none;
}
/* Note: ::after is used for text justification, don't hide it */

/* Surah Header - Mushaf style with calligraphy corners */
/* FIXED: Consistent height, calligraphy ornaments like real Quran */
.surah-header-ornament {
    display: block;
    width: 100%;
    flex: 0 0 auto;
    text-align: center;
    padding: 2px 0;
    margin: 0;
    direction: rtl;
}

.surah-header-frame {
    display: block;
    background: url('assets/surah-ornament.png') center/100% 100% no-repeat;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 60px;
    position: relative;
}

/* No pseudo-elements needed - using full frame image */
.surah-header-frame::before,
.surah-header-frame::after {
    display: none;
}

.surah-header-inner {
    display: flex;
    background: transparent;
    padding: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
}

.surah-name-arabic-ornament {
    display: block;
    font-family: 'Amiri Quran', 'Traditional Arabic', serif;
    font-size: 26px;
    font-weight: 400;
    color: #0d9488;
    direction: rtl;
    text-align: center;
    line-height: 1;
}

.surah-info-ornament {
    display: none;
}

/* Bismillah - Stretched wide style like real Quran mushaf */
/* Uses kashida characters + scaleX for dramatic horizontal stretch */
.bismillah-ornament {
    display: block;
    width: 100%;
    flex: 0 0 auto;
    text-align: center !important;
    padding: 4px 0;
    font-family: 'Amiri Quran', 'Traditional Arabic', serif;
    font-size: inherit;
    color: #134e4a;
    background: transparent;
    margin: 0;
    direction: rtl;
    line-height: 1.4;
    letter-spacing: 0.15em;
    word-spacing: 0.3em;
    transform: scaleX(1.15);
    transform-origin: center;
}

/* QPC Bismillah - uses actual glyph words like Al-Fatihah ayah 1 */
.bismillah-ornament.qpc-bismillah {
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl;
}

.bismillah-ornament.qpc-bismillah .qpc-word {
    display: inline-block;
}

/* Ayah Content Area - Inline text flow for proper justify (rata kiri-kanan) */
.ayah-content-area {
    display: block !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    padding: 10px 12px;
    direction: rtl;
    line-height: var(--quran-line-height, 2.2);
    text-align: justify !important;
    -webkit-text-align: justify !important;
    text-justify: inter-word !important;
    text-align-last: right !important;
    -webkit-text-align-last: right !important;
    -moz-text-align-last: right !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Each ayah as inline text */
.ayah-content-area .mushaf-ayah {
    display: inline;
}

/* Ayah numbers - part of the text flow */
.ayah-content-area .ayah-number-mark {
    display: inline;
}

/* First Page Layout - Bismillah same as ayahs */
.mushaf-page-horizontal.first-page .bismillah-ornament {
    text-align: center;
    margin: 0;
    padding: 2px 0;
}

/* First page ayah content - same justified text, no grow */
.mushaf-page-horizontal.first-page .ayah-content-area {
    flex: 0 0 auto;
    position: relative;
}

/* Short surahs - keep diamond shape but center vertically */
.mushaf-page-horizontal.first-page.short-surah .ayah-content-area {
    padding-top: 10vh;
    min-height: 50vh;
}

.mushaf-page-horizontal.first-page.short-surah .ayah-content-area .mushaf-ayah {
    display: inline;
}

/* Ayah Styling */
.mushaf-ayah {
    display: inline;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: rgba(20, 184, 166, 0.3);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    padding: 2px 0;
    color: #134e4a;
}

/* Ayah Number Mark - Simple number without border */
.ayah-number-mark {
    display: inline;
    background: transparent;
    color: #0d9488;
    border: none;
    font-family: 'Amiri Quran', 'Traditional Arabic', serif;
    font-size: 0.55em;
    font-weight: 600;
    vertical-align: baseline;
}

/* Selected Ayah Highlight */
.mushaf-ayah.selected-ayah {
    background: linear-gradient(to bottom,
        transparent 10%,
        rgba(20, 184, 166, 0.25) 10%,
        rgba(20, 184, 166, 0.25) 90%,
        transparent 90%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Hidden Ayah Mode */
.mushaf-ayah.hidden-ayah {
    color: transparent;
    text-shadow: 0 0 12px rgba(44, 44, 44, 0.15);
    user-select: none;
}

.mushaf-ayah.hidden-ayah .ayah-number-mark {
    color: #0d9488 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* QPC mode: keep ayah end markers visible in hidden mode */
.mushaf-ayah.qpc-word.qpc-ayah-end.hidden-ayah {
    color: #0d9488 !important;
    text-shadow: none !important;
}

/* Bookmarked Ayah */
.mushaf-ayah.bookmarked {
    position: relative;
}

/* ===================== */
/* BOTTOM CONTROL BAR - FULL WIDTH FIXED */
/* ===================== */

.bottom-control-bar {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    padding: 8px 10px;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15);
    border-bottom: none;
}

.control-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 10px;
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.control-item:hover,
.control-item:active {
    background: rgba(255, 255, 255, 0.15);
}

.control-item.active {
    background: rgba(255, 255, 255, 0.25);
}

.control-item.recording {
    background: #ef4444 !important;
    animation: recordingPulse 1.5s ease-in-out infinite;
}

@keyframes recordingPulse {
    0%, 100% {
        background: #ef4444;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        background: #dc2626;
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.control-item svg {
    width: 20px;
    height: 20px;
}

.control-item span {
    font-size: 0.6em;
    font-weight: 600;
    white-space: nowrap;
}

/* ===================== */
/* BOTTOM NAV - LIKE BERANDA */
/* ===================== */

.bottom-nav-toggle {
    display: none !important;
}

.bottom-nav-popup {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 6px 8px 8px 8px;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15), 0 -2px 10px rgba(0, 0, 0, 0.1);
    border-top: 2px solid rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 800px;
}

.bottom-nav-popup.show {
    transform: translateX(-50%);
}

.nav-item-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    transition: all 0.3s ease;
    flex: 1;
    max-width: 80px;
    min-height: 58px;
}

.nav-item-popup:hover {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.05);
}

.nav-item-popup.active {
    color: #ffffff;
    background: linear-gradient(135deg, #14b8a6, #2dd4bf);
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.5);
}

.nav-item-popup svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.nav-item-popup.active svg {
    filter: none;
}

.nav-item-popup span {
    font-size: 0.6em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    margin-top: 3px;
    line-height: 1.2;
}

/* ===================== */
/* AYAH ACTION POPUP - HIDDEN (now in control bar) */
/* ===================== */

.ayah-action-popup {
    display: none !important;
}

/* ===================== */
/* FAVORIT MENU POPUP */
/* ===================== */

.favorit-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

.favorit-menu-overlay.show {
    display: block;
}

.favorit-menu-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #065f46, #047857);
    border-radius: 16px;
    width: 90%;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 2001;
    animation: fadeInCenter 0.3s ease;
}

.favorit-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.favorit-menu-header h3 {
    margin: 0;
    font-size: 1.3em;
    color: white;
    font-weight: 600;
}

.close-favorit-menu-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    border-radius: 50%;
    transition: all 0.2s;
}

.close-favorit-menu-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.close-favorit-menu-btn svg {
    width: 20px;
    height: 20px;
}

.favorit-menu-content {
    padding: 12px;
}

.favorit-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
    text-align: left;
}

.favorit-menu-item:last-child {
    margin-bottom: 0;
}

.favorit-menu-item:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.favorit-menu-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.favorit-menu-icon.add {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.favorit-menu-icon.view {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.favorit-menu-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.favorit-menu-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.favorit-menu-title {
    font-size: 1em;
    font-weight: 600;
    color: #333;
}

.favorit-menu-desc {
    font-size: 0.8em;
    color: #666;
}

/* ===================== */
/* PRACTICE MODE */
/* ===================== */

.practice-word {
    display: inline;
    transition: all 0.3s ease;
    padding: 2px 0;
}

.practice-word.word-highlighted {
    background: linear-gradient(to bottom,
        transparent 10%,
        rgba(20, 184, 166, 0.5) 10%,
        rgba(20, 184, 166, 0.5) 90%,
        transparent 90%);
    color: #0f766e;
    font-weight: 600;
    animation: wordGlow 0.5s ease-in-out;
}

/* QPC mode practice word highlighting - YELLOW (75% height) */
.qpc-word.practice-word.word-highlighted {
    background: linear-gradient(to bottom,
        transparent 12.5%,
        rgba(255, 215, 0, 0.6) 12.5%,
        rgba(255, 215, 0, 0.6) 87.5%,
        transparent 87.5%) !important;
}

/* Error word comparison in popup */
.error-word-comparison {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.error-word-expected,
.error-word-spoken {
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-word-label {
    font-size: 11px;
    color: #94a3b8;
    min-width: 70px;
}

.error-word-text {
    font-size: 18px;
    color: #e2e8f0;
}

.error-word-expected .error-word-text {
    color: #4ade80;
}

.error-word-spoken .error-word-text {
    color: #f87171;
}

@keyframes wordGlow {
    0% {
        background: transparent;
        transform: scale(1);
    }
    50% {
        background: rgba(20, 184, 166, 0.8);
        transform: scale(1.05);
    }
    100% {
        background: rgba(20, 184, 166, 0.5);
        transform: scale(1);
    }
}

/* Practice Instructions Popup */
.practice-instructions {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #475569, #64748b);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 2001;
    text-align: center;
    animation: slideDown 0.3s ease;
    max-width: 90vw;
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.practice-instructions-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.practice-mic-icon {
    font-size: 2.5em;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.practice-instructions p {
    margin: 0;
    font-size: 0.85em;
    font-weight: 500;
}

/* ===================== */
/* ERROR DETAILS POPUP - Like Favorites Style */
/* ===================== */

.error-list-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

.error-list-overlay.show {
    display: block;
}

.error-details-popup-bottom {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 70vh;
    display: none;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 2001;
    animation: fadeInCenter 0.3s ease;
}

.error-details-popup-bottom.show {
    display: flex;
}

.error-details-header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.error-details-header-bottom h3 {
    margin: 0;
    font-size: 1.5em;
    color: white;
    font-weight: 600;
}

.close-error-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    border-radius: 50%;
    transition: all 0.2s;
}

.close-error-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.close-error-btn svg {
    width: 24px;
    height: 24px;
}

.error-details-content-bottom {
    overflow-y: auto;
    padding: 12px;
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
}

.error-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin: 8px 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border-left: 4px solid #ef4444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-item-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.error-item-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.error-item-info {
    flex: 1;
    min-width: 0;
}

.error-item-label {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 4px;
}

.error-item-value {
    font-size: 1.3em;
    font-weight: 700;
    color: #dc2626;
}

.error-stat-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.95);
    padding: 16px;
    border-radius: 12px;
    margin: 8px 0;
    border-left: 4px solid #ef4444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-stat-icon-bottom {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5em;
}

.error-stat-info-bottom {
    flex: 1;
}

.error-stat-label-bottom {
    font-size: 0.85em;
    color: #666;
    font-weight: 500;
    margin-bottom: 4px;
}

.error-stat-value-bottom {
    font-size: 1.3em;
    font-weight: 700;
    color: #dc2626;
}

.error-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.7);
}

.error-empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
    fill: white;
}

.error-empty-state p {
    font-size: 1em;
    font-weight: 600;
    color: white;
    margin: 0 0 4px 0;
}

.error-empty-state small {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
}

/* ===================== */
/* FAVORITES LIST POPUP */
/* ===================== */

.favorites-list-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

.favorites-list-overlay.show {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.favorites-list-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #065f46, #047857);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 2001;
    animation: fadeInCenter 0.3s ease;
}

@keyframes fadeInCenter {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.favorites-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.favorites-list-header h3 {
    margin: 0;
    font-size: 1.5em;
    color: white;
    font-weight: 600;
}

.close-favorites-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    border-radius: 50%;
    transition: all 0.2s;
}

.close-favorites-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.close-favorites-btn svg {
    width: 24px;
    height: 24px;
}

.favorites-list-content {
    overflow-y: auto;
    padding: 12px;
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
}

.favorite-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin: 8px 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border-left: 4px solid #14b8a6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.favorite-item:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.favorite-item-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.favorite-item-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.favorite-item-info {
    flex: 1;
    min-width: 0;
}

.favorite-item-surah-name {
    font-size: 1.3em;
    font-weight: 700;
    color: #0f766e;
    font-family: 'Amiri Quran', 'Traditional Arabic', serif;
    direction: rtl;
    line-height: 1.4;
    margin-bottom: 4px;
}

.favorite-item-ayah {
    font-size: 0.85em;
    color: #666;
}

.favorite-item-actions {
    display: flex;
    gap: 8px;
}

.favorite-action-btn {
    background: white;
    border: 2px solid #e0e0e0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.favorite-action-btn:hover {
    transform: scale(1.1);
}

.favorite-action-btn.play {
    color: #0891b2;
    border-color: #0891b2;
}

.favorite-action-btn.play:hover {
    background: rgba(8, 145, 178, 0.1);
}

.favorite-action-btn.delete {
    color: #f44336;
    border-color: #f44336;
}

.favorite-action-btn.delete:hover {
    background: #ffebee;
}

.favorite-action-btn svg {
    width: 18px;
    height: 18px;
}

.empty-favorites {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.7);
}

.empty-favorites svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
    fill: white;
}

.empty-favorites p {
    font-size: 1em;
    line-height: 1.6;
}

/* ===================== */
/* PREMIUM MODAL */
/* ===================== */

.premium-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.premium-modal-content {
    background: white;
    border-radius: 20px;
    padding: 30px 25px;
    max-width: 350px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 3px solid #0891b2;
}

.premium-modal-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.premium-modal-icon svg {
    color: white;
}

.premium-modal-content h3 {
    margin: 0 0 10px;
    font-size: 1.4em;
    color: #475569;
}

.premium-modal-content p {
    margin: 0 0 8px;
    color: #666;
    font-size: 0.95em;
}

.premium-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.premium-btn-subscribe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.4);
    transition: all 0.3s ease;
}

.premium-btn-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.6);
}

.premium-btn-close {
    padding: 12px 24px;
    background: #e0e0e0;
    color: #666;
    border: none;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.premium-btn-close:hover {
    background: #d0d0d0;
}

/* ===================== */
/* FAVORITE ICON POPUP (HIDDEN) */
/* ===================== */

.favorite-icon-popup {
    display: none !important;
}

/* ===================== */
/* MOBILE RESPONSIVE */
/* ===================== */

@media (max-width: 600px) {
    .mushaf-container-fullscreen {
        font-size: 1.3em;
        line-height: 2.5;
    }

    .mushaf-page-horizontal {
        padding: 0;
        height: calc(100svh - var(--quran-ui-space, 160px));
        min-height: calc(100svh - var(--quran-ui-space, 160px));
        max-height: calc(100svh - var(--quran-ui-space, 160px));
        overflow: hidden;
    }

    .mushaf-page-horizontal .page-inner {
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        padding: 15px 5% !important; /* fallback */
        padding: 15px max(5%, env(safe-area-inset-right, 5%)) 15px max(5%, env(safe-area-inset-left, 5%)) !important;
        overflow: visible;
    }

    .mushaf-page-horizontal .page-inner::before,
    .mushaf-page-horizontal .page-inner::after {
        font-size: 1.2em;
        top: 5px;
    }

    .surah-header-ornament {
        padding: 2px 0;
        margin: 0;
    }

    .surah-header-frame {
        width: 100%;
        height: 60px;
    }

    .surah-name-arabic-ornament {
        font-size: 26px;
        line-height: 1;
    }

    .surah-info-ornament {
        display: none;
    }

    .bismillah-ornament {
        font-size: inherit;
        padding: 3px 0;
        margin: 0;
        line-height: 1.4;
        letter-spacing: 0.05em;
    }

    .ayah-content-area {
        padding: 12px 15px;
    }

    .ayah-number-mark {
        width: auto;
        min-width: 16px;
        font-size: 0.5em;
        margin: 0 2px;
    }

    .bottom-control-bar {
        bottom: 60px;
        padding: 6px 8px;
        border-bottom: none;
    }

    .control-item {
        padding: 5px 5px;
    }

    .control-item svg {
        width: 18px;
        height: 18px;
    }

    .control-item span {
        font-size: 0.55em;
    }

    .mushaf-display-fullscreen {
        padding-top: 45px;
        padding-bottom: 0;
    }

    .floating-nav-chip {
        top: calc(8px + var(--android-safe-top, 0px));
        right: 8px;
        padding: 6px 10px 6px 8px;
        gap: 5px;
    }

    .nav-chip-icon {
        width: 16px;
        height: 16px;
    }

    .nav-chip-label {
        font-size: 0.8em;
    }

    .nav-popup-container {
        width: 90%;
        max-width: 320px;
    }

    .bottom-nav-popup {
        padding: 5px 6px 6px 6px;
    }

    .nav-item-popup {
        padding: 6px 8px;
        min-height: 52px;
    }

    .nav-item-popup svg {
        width: 20px;
        height: 20px;
    }

    .nav-item-popup span {
        font-size: 0.55em;
    }

}

/* Hidden elements from old design */
.mushaf-controls,
.fixed-action-popup,
.audio-control-popup,
.read-main,
.mushaf-display,
.mushaf-header {
    display: none !important;
}

/* Override dashboard container for fullscreen */
.dashboard-container.read-fullscreen {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   QPC Mode - Word-by-Word Tajweed Styles
   ============================================ */

/* QPC Lines Container - distributes ayah lines evenly across available height */
.qpc-lines-container {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    width: 100%;
    min-height: 0;
}

/* Mid-page headers inside lines container - FIXED: consistent thin height */
.qpc-lines-container .surah-header-ornament {
    padding: 2px 0;
    flex-shrink: 0;
}
.qpc-lines-container .surah-header-frame {
    width: 100%;
    height: 60px;
}
.qpc-lines-container .surah-name-arabic-ornament {
    font-size: 26px;
    line-height: 1;
}
.qpc-lines-container .bismillah-ornament {
    padding: 3px 0;
    flex-shrink: 0;
    line-height: 1.4;
    letter-spacing: 0.05em;
}
.qpc-lines-container .qpc-ayah-line {
    flex-shrink: 1;
}

/* First page (Surah 1 & 2) - don't stretch, let page-inner center everything */
.mushaf-page-horizontal.first-page .qpc-lines-container {
    flex: 0 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px;
}

/* QPC Ayah Line - Justified (space-between), no gap/padding (QPC glyphs have built-in spacing) */
.qpc-ayah-line {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    direction: rtl;
    padding: 0;
    margin: 0 !important;
    box-sizing: border-box;
    gap: 0;
}

/* Last ayah line before surah header - don't stretch */
.qpc-ayah-line.qpc-line-last {
    justify-content: flex-start !important;
    gap: 0;
}
/* Very last ayah line on the page - right-aligned (RTL flex-start = right) */
.qpc-ayah-line.qpc-line-last-centered {
    justify-content: flex-start !important;
    gap: 0;
}

/* QPC Word - inline-block for flex children */
.qpc-word {
    display: inline-block !important;
    flex-shrink: 0;
}

/* First page in QPC/Juz mode - centered text */
.mushaf-page-horizontal.first-page .page-inner .qpc-ayah-line {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 0 0 auto;
    direction: rtl;
}

/* First page keeps flex layout but centers lines vertically (accounting for control bar) */
.mushaf-page-horizontal.first-page .page-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 5% 120px 5% !important;
    gap: 0 !important;
}

/* Ayah number in QPC line - no extra spacing */
.qpc-ayah-line .ayah-number-mark {
    margin: 0 1px;
    padding: 0 2px;
}

/* QPC Word styling - inline-block for flex layout */
.qpc-word {
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-block !important;
    flex-shrink: 0;
}

/* When ayah is selected/playing - teal highlight on all words (75% height) */
.qpc-word.selected-ayah {
    background: linear-gradient(to bottom,
        transparent 12.5%,
        rgba(20, 184, 166, 0.25) 12.5%,
        rgba(20, 184, 166, 0.25) 87.5%,
        transparent 87.5%);
}

/* ============================================
   Responsive Styles for Small Screens
   ============================================ */

/* All screen sizes use 5% padding - no need for breakpoints */
/* Font size adjustments for very small screens only */

/* Extra small screens (360px and below) */
@media (max-width: 360px) {
    .mushaf-page-horizontal .page-inner {
        font-size: calc(var(--quran-font-size, 24px) * 0.9) !important;
    }
}

/* Very small screens (320px like iPhone SE, Galaxy S) */
@media (max-width: 320px) {
    .mushaf-page-horizontal .page-inner {
        font-size: calc(var(--quran-font-size, 24px) * 0.8) !important;
    }

    .ayah-number-mark {
        font-size: 0.45em;
    }
}

/* ============================================
   Translation Popup Styles
   ============================================ */

.translation-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

.translation-popup-overlay.show {
    display: flex;
}

.translation-popup {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.3s ease;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.translation-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
}

.translation-popup-ref {
    font-weight: 600;
    font-size: 1rem;
}

.translation-popup-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.translation-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.translation-popup-content {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(70vh - 60px);
}

.translation-arabic {
    font-family: 'Amiri Quran', 'Traditional Arabic', serif;
    font-size: 1.5rem;
    line-height: 2;
    text-align: right;
    direction: rtl;
    color: #134e4a;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}

.translation-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

.translation-play-btn:active {
    transform: scale(0.97);
    background: linear-gradient(135deg, #0d9488, #0f766e);
}

.translation-play-btn svg {
    flex-shrink: 0;
}

.translation-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #374151;
    text-align: left;
}

/* Dark mode support for translation popup */
html.dark-mode .translation-popup {
    background: #1f2937;
}

html.dark-mode .translation-arabic {
    color: #10b981;
    border-bottom-color: #374151;
}

html.dark-mode .translation-text {
    color: #d1d5db;
}