/* /Pages/bible.razor.rz.scp.css */
/* 2026-04-16 */
/* For all textareas with the .notes-editor class */
.notes-editor[b-dlqumr1hc4]::placeholder {
    color: whitesmoke; /* Default to silver (for dark mode if no body class is set) */
    opacity: 1; /* Ensure full opacity */
}

/* Light mode: gray placeholder */
body.light-mode .notes-editor[b-dlqumr1hc4]::placeholder {
    color: gray;
}

/* Dark mode: silver placeholder */
body:not(.light-mode) .notes-editor[b-dlqumr1hc4]::placeholder {
    color: silver;
}


/* 2026-01-20 */
/* ===============================
   Verse Title – Elegant Emphasis
   =============================== */
.verse-title[b-dlqumr1hc4] {
    display: flex;
    align-items: center;
    justify-content: center; /* center horizontally */
    margin: 6px 0 10px;
    width: 100%;
    max-width: 100%;
    /* IMPORTANT: allow text selection */
    user-select: text;
    cursor: text;
    /* text rendering */
    color: #ffcc66;
    text-shadow: 0 0 4px rgba(255, 204, 102, 0.35), 0 1px 0 rgba(0, 0, 0, 0.6);
    /* wrapping safety */
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}





/* 2025-11-20 */
/* 2025-11-20 Responsive YouTube player wrapper */
/* Default — portrait: 1 per row */
.yt-container[b-dlqumr1hc4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each player: full width portrait */
.yt-wrapper[b-dlqumr1hc4] {
    position: relative;
    width: 100%;
    padding-bottom: 40%; /* reduce height as you like */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

    .yt-wrapper iframe[b-dlqumr1hc4] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 8px;
    }

/* Landscape — 2 per row */
@media (orientation: landscape) {
    .yt-container[b-dlqumr1hc4] {
        flex-direction: row;
        flex-wrap: wrap; /* allow wrapping into multiple rows */
        gap: 14px;
    }

    .yt-wrapper[b-dlqumr1hc4] {
        width: calc(50% - 10px); /* 2 per row, small gap adjustment */
        padding-bottom: 25%; /* reduce height for landscape */
    }
}




/*  2025-11-18 Moved From app.css */
/* Scrollable body adjustments */
.bible-container tbody[b-dlqumr1hc4] {
    max-height: 400px; /* Adjust based on desired height */
    overflow-y: auto;
}



/* Dark theme container background */
.bible-container[b-dlqumr1hc4] {
    width: 100%;
    overflow: hidden;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* or use: margin-inline: auto; */
    padding: 0 0.4em !important;
    /* 2026-02-04 background-color:  #1e1e2f;*/
    /* 2026-02-05 #040c22 */
    /* 2026-02-06 inherit*/
    background-color: inherit; /* black */


    color: var(--text-color, #E0E0E0);
}



/* Table styling for dark theme */
.bible-table[b-dlqumr1hc4] {
    table-layout: fixed;
    width: 100%;
}

    .bible-table th[b-dlqumr1hc4], .bible-table td[b-dlqumr1hc4] {
        padding: 10px;
        border: 1px solid #444; /* Subtle border color */
        overflow-wrap: break-word;
        word-break: break-word;
        vertical-align: top;
    }






.verse-text[b-dlqumr1hc4] {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: center;
}

ruby[b-dlqumr1hc4] {
    white-space: nowrap; /* Prevent ruby from breaking across lines, but allow wrapping in the cell */
    max-width: 100%;
    overflow-wrap: break-word;
}

rt[b-dlqumr1hc4] {
    font-size: 0.7em; /* Make furigana smaller so it doesn't force the cell wider */
    word-break: break-word;
}

    /* Header styling for dark theme */
.bible-table th[b-dlqumr1hc4] {
    background-color: inherit; /* #040C22  #3a3a4f Darker header background */
    font-weight: bold;
    color: #ffffff; /* White text */
}

    /* Row hover effect Grid Row Hover Dark Theme */
.bible-table tr:hover[b-dlqumr1hc4] {
    background-color: inherit; /* #3d3d5c Slightly lighter row highlight */
    /*2025-01-20*/
    xxx_outline: 3px solid #00ff00; /* Green outline to highlight the row */
    outline-offset: -2px; /* Optional: adjust outline offset to fine-tune positioning */
}



    /* Ensure hidden columns do not take up space */
    .bible-table td.hidden[b-dlqumr1hc4], .bible-table th.hidden[b-dlqumr1hc4] {
        display: none;
    }

/* Brighter Background for ReciteMode */
/* ReciteMode – brighten table background */
.bible-container.recite-mode .bible-table[b-dlqumr1hc4] {
    background-color: #3a4a6b ; /* brighter than #040c22 */
}

    /* Optional: keep header consistent */
    .bible-container.recite-mode .bible-table th[b-dlqumr1hc4] {
        background-color: #3a4a6b important!;
    }



.button-container[b-dlqumr1hc4] {
    display: flex;
    gap: 5px; /* Adjust spacing between buttons */
    /* 2025-09-08 Make It Wrap */
    flex-wrap: wrap;
    /* 2025-10-08 */
    justify-content: center;
    /* 2025-01-10 */
    vertical-align: middle;
}
/* 2025-11-18 End Moved from app.css */




/* 2025-11-14 */
/* Fixed width mode */
.bible-fixed[b-dlqumr1hc4] {
    table-layout: fixed;
    width: 100%;
}

    /* first (#) column width from CSS var */
    .bible-fixed th.first-col[b-dlqumr1hc4] {
        width: var(--first-col-width);
    }

    /* language columns share the rest */
    .bible-fixed th.lang-col[b-dlqumr1hc4] {
        width: calc((100% - var(--first-col-width)) / var(--lang-count));
    }

/* auto mode = your old behaviour */
.bible-auto[b-dlqumr1hc4] {
    table-layout: auto;
}



/* 2025-11-11 Flash Button */
.flash-btn[b-dlqumr1hc4] {
    position: relative;
    background-color: #444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
}

    /* Create a pseudo-element overlay that animates when button is clicked */
    .flash-btn[b-dlqumr1hc4]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
        opacity: 0;
        z-index: 0;
    }

    /* When button is clicked */
    .flash-btn:focus:not(:active)[b-dlqumr1hc4]::after {
        animation: rgbFlash-b-dlqumr1hc4 1s linear;
    }

/* animation keyframes */
@keyframes rgbFlash-b-dlqumr1hc4 {
    0% {
        opacity: 1;
        filter: hue-rotate(0deg);
    }

    100% {
        opacity: 0;
        filter: hue-rotate(360deg);
    }
}



/* 2025-10-10 */
/* Speaker Icon Button */
.outline-icon[b-dlqumr1hc4] {
    font-size: 1.2em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #e0e0e0; /* fallback color */
}

    /* Icon inside the button */
    .outline-icon i[b-dlqumr1hc4] {
        /* Outline color follows inherited color */
        color: inherit;
        /* Fill color is forced to black */
        -webkit-text-fill-color: black;
        -webkit-text-stroke: 0.5px currentColor;
        text-shadow: -1px -1px 0 currentColor, 1px -1px 0 currentColor, -1px 1px 0 currentColor, 1px 1px 0 currentColor;
        transition: transform 0.3s ease, color 0.3s ease;
    }

        /* Hover effect */
        .outline-icon i:hover[b-dlqumr1hc4] {
            transform: scale(1.2);
            /* Optional: change inherited color to affect outline */
            color: greenyellow;
        }






/* 2025-10-09 tint */
@keyframes tintPulse-b-dlqumr1hc4 {
    0% {
        filter: hue-rotate(0deg) brightness(1.5) saturate(1.2);
    }

    25% {
        filter: hue-rotate(60deg) brightness(1.5) saturate(1.2);
    }

    50% {
        filter: hue-rotate(120deg) brightness(1.5) saturate(1.2);
    }

    75% {
        filter: hue-rotate(180deg) brightness(1.5) saturate(1.2);
    }

    100% {
        filter: hue-rotate(360deg) brightness(1.5) saturate(1.2);
    }
}



.tintdance-icon[b-dlqumr1hc4] {
    display: inline-block;
    animation: dance-b-dlqumr1hc4 1s infinite ease-in-out,tintPulse-b-dlqumr1hc4 3s infinite ease-in-out;
}


/* 2025-10-09 dance */
@keyframes dance-b-dlqumr1hc4 {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-15deg) scale(1.1);
    }

    50% {
        transform: rotate(15deg) scale(1.1);
    }

    75% {
        transform: rotate(-10deg) scale(1.05);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

.dancing-icon[b-dlqumr1hc4] {
    animation: dance-b-dlqumr1hc4 1s infinite ease-in-out;
    display: inline-block;
}



/* 2025-10-09 flip */


.flip-icon[b-dlqumr1hc4] {
    display: inline-block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: flipY-b-dlqumr1hc4 2s infinite linear;
}

@keyframes flipY-b-dlqumr1hc4 {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}


/* End of Flipper */





/* 2025-10-09 */
/* Always enlarges to 120% and back */
.enlarge-loop[b-dlqumr1hc4] {
    display: inline-block;
    animation: enlarge-b-dlqumr1hc4 2s ease-in-out infinite;
}

/* Define the enlarge animation */
@keyframes enlarge-b-dlqumr1hc4 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}


/* 2025-09-27 rotating button */
.rotate-on-hover[b-dlqumr1hc4] {
    display: inline-block; /* important so rotation works correctly */
}

    /* When hovered, start a spinning animation */
    .rotate-on-hover:hover[b-dlqumr1hc4] {
        animation: spin-b-dlqumr1hc4 2s linear infinite;
    }

/* 2025-10-09 Always rotating version */
.rotate-always[b-dlqumr1hc4] {
    display: inline-block;
    animation: spin-b-dlqumr1hc4 2s linear infinite;
}

/* Define the spin animation */
@keyframes spin-b-dlqumr1hc4 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}








/* Style for the Favourite icon button */
.favourite-icon-button[b-dlqumr1hc4] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

    /* Style for the icon inside the button */
    .favourite-icon-button i[b-dlqumr1hc4] {
        font-size: 24px; /* Adjust the size of the icon */
        color: #ff0000; /* Default color for the favorite icon */
        transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition */
    }

        /* Change the color when hovered */
        .favourite-icon-button i:hover[b-dlqumr1hc4] {
            color: #cc0000; /* A darker red when hovered */
            transform: scale(1.2); /* Slightly enlarge the icon */
        }

/* Animation for adding to favorites */
@keyframes heartBeat-b-dlqumr1hc4 {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Apply animation when the icon is toggled */
.favourite-icon-button i.animated[b-dlqumr1hc4] {
    animation: heartBeat-b-dlqumr1hc4 0.5s ease;
}




/*Verse Container*/
.verse-container[b-dlqumr1hc4] {
    display: flex;
    flex-direction: column;
    align-items: center;
}






/* Speaker Icon ori */
.speaker-icon-button[b-dlqumr1hc4] {
    font-size: 1.02em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #e0e0e0; /* Light icon color */
}
    /* Style for the icon inside the button */
    .speaker-icon-button i[b-dlqumr1hc4] {
        color: #007bff; /* Icon color */
        transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition */
    }

        /* Change the color when hovered */
        .speaker-icon-button i:hover[b-dlqumr1hc4] {
            color: lawngreen; /* A darker red when hovered */
            transform: scale(1.2); /* Slightly enlarge the icon */
        }


.emoji-box[b-dlqumr1hc4] {
    display: inline-block;
    font-size: 1.0em;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.speaker-icon-button:hover .emoji-box[b-dlqumr1hc4] {
    filter: brightness(0.6) saturate(1.2) hue-rotate(60deg);
    transform: scale(1.2);
}


/* Circle container */
.furigana-circle[b-dlqumr1hc4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #0078D7;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.speaker-icon-button:hover .furigana-circle[b-dlqumr1hc4] {
    transform: scale(1.2);
    background-color: darkgreen;
}


/* 2025-09-23 */
@keyframes pulse-glow-b-dlqumr1hc4 {
    0% {
        box-shadow: 0 0 0.625em #00bfff, 0 0 1.25em #00bfff;
    }

    50% {
        box-shadow: 0 0 1.25em #00bfff, 0 0 3em #00bfff;
    }

    100% {
        box-shadow: 0 0 0.625em #00bfff, 0 0 1.25em #00bfff;
    }
}



/* Blue Pulse Glow */
.verse-frame2[b-dlqumr1hc4] {
    outline: 0.25em solid #00bfff;
    outline-offset: -2px;
    animation: pulse-glow-b-dlqumr1hc4 2.0s infinite ease-in-out;
    border-radius: 0.75em;
}

/* Static Blue */
.verse-frame3[b-dlqumr1hc4] {
    position: relative;
    margin: 0.5em;
    padding: 0.75em 1em;
    border-radius: 0.75em;
    background-color: inherit;
    outline: 0.28em solid #2196f3; /* thinner frame, uses em */
    outline-offset: -1px;
    box-shadow: 0 0 1.2em 0.4em #2196f3; /* blue glow, uses em */
    animation: none;
}



.verse-frame4[b-dlqumr1hc4] {
    position: relative;
    margin: 0.5em;
    padding: 0.75em 1em;
    border-radius: 0.75em;
    outline: 0.6em solid #2196f3;
    outline-offset: -0.3em;
    animation: none;
}


/* RGB COLOR */

/* =========================================================
   RGB CYCLING BORDER (ORIGINAL WORKING METHOD)
   - Only changes: thicker border + em sizing + (optional) faster speed
   ========================================================= */

.verse-frame1[b-dlqumr1hc4] {
    position: relative;
    margin: 0.5em;
    padding: 0.75em 1em;
    border-radius: 0.75em;
    outline: 0.4em solid transparent;
    outline-offset: -1px;
    animation: rgbOutlineFlow-b-dlqumr1hc4 18s linear infinite;
    box-shadow: 0 0 2.2em 0.6em rgb(255, 80, 80); /*Added for gradient outline glow effect*/
}

/*This version for non-outline (original)*/
/*@keyframes rgbOutlineFlowSolid {
    0% {
        outline-color: rgb(255, 80, 80);
    }

    20% {
        outline-color: rgb(255, 200, 80);
    }

    40% {
        outline-color: rgb(80, 255, 160);
    }

    60% {
        outline-color: rgb(80, 160, 255);
    }

    80% {
        outline-color: rgb(200, 80, 255);
    }

    100% {
        outline-color: rgb(255, 80, 160);
    }
}*/


@keyframes rgbOutlineFlow-b-dlqumr1hc4 {
    0% {
        outline-color: rgb(255, 80, 80);
        box-shadow: 0 0 1.2em 0.4em rgb(255, 80, 80);
    }

    20% {
        outline-color: rgb(255, 200, 80);
        box-shadow: 0 0 1.2em 0.4em rgb(255, 200, 80);
    }

    40% {
        outline-color: rgb(80, 255, 160);
        box-shadow: 0 0 1.2em 0.4em rgb(80, 255, 160);
    }

    60% {
        outline-color: rgb(80, 160, 255);
        box-shadow: 0 0 1.2em 0.4em rgb(80, 160, 255);
    }

    80% {
        outline-color: rgb(200, 80, 255);
        box-shadow: 0 0 1.2em 0.4em rgb(200, 80, 255);
    }

    100% {
        outline-color: rgb(255, 80, 160);
        box-shadow: 0 0 1.2em 0.4em rgb(255, 80, 160);
    }
}


.commentary-content *[b-dlqumr1hc4] {
    margin: 0;
    padding: 0;
}

.commentary-section[b-dlqumr1hc4] {
    margin-bottom: 4px;
    padding-top: 2px;
}


.commentary-content font[b-dlqumr1hc4] {
    color: #FFD700 !important; /* or white, or any vibrant color */
}

.commentary-frame-rgb[b-dlqumr1hc4] {
    position: relative;
    margin: 0.5em;
    padding: 0.75em 1em;
    border-radius: 0.75em;
    /*background-color: black;*/
    /*color: #fff;*/
    z-index: 0;
    border: none;
    outline: none;

}

    .commentary-frame-rgb[b-dlqumr1hc4]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 0.75em;
        padding: 0.4em;
        /* Repeat the gradient twice for seamless looping */
        background: linear-gradient( 90deg, red, orange, yellow, green, cyan, blue, violet, red, orange, yellow, green, cyan, blue, violet, red );
        background-size: 200% 100%;
        background-repeat: repeat-x;
        z-index: -1;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        animation: rainbowBorderMove-b-dlqumr1hc4 8s linear infinite;
    }

@keyframes rainbowBorderMove-b-dlqumr1hc4 {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.commentary-frame-static[b-dlqumr1hc4] {
    position: relative;
    margin: 0.5em;
    padding: 0.75em 1em;
    border-radius: 0.75em;
    /* inside must be real inherit */
    background: inherit;
    color: inherit;
}

    /* RGB border ring */
    .commentary-frame-static[b-dlqumr1hc4]::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 0.4em; /* border thickness */
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet );
        /* punch a hole so center is transparent (shows inherited bg) */
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        /* Firefox/standard */
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
    }




.Xcommentary-frame.rgb-cycle[b-dlqumr1hc4] {
    position: relative;
    /* Margin all 0.5em */
    margin: 0.5em;
    /* em-based sizing */
    padding: 0.75em 1em; /* was 12px 16px */
    border-radius: 0.75em; /* was 12px */
    /* thicker border (em) */
    border: 0.45em solid transparent; /* ~4px if 16px base font */
    /* Two-layer background:
       - inner = content
       - outer = animated gradient border */
    background: linear-gradient(#111, #111) padding-box, linear-gradient( 120deg, rgb(255, 80, 80), rgb(255, 200, 80), rgb(80, 255, 160), rgb(80, 160, 255), rgb(200, 80, 255), rgb(255, 80, 160), rgb(255, 80, 80) ) border-box;
    background-size: 100% 100%, 300% 300%;
    /* faster cycle (change this number) */
    animation: rgbBorderFlow-b-dlqumr1hc4 5s linear infinite; /* was 18s */
}


/* Motion: only background-position (cheap) */
@keyframes rgbBorderFlow-b-dlqumr1hc4 {
    0% {
        background-position: 0% 50%, 0% 50%;
    }

    50% {
        background-position: 0% 50%, 100% 50%;
    }

    100% {
        background-position: 0% 50%, 0% 50%;
    }
}

/* Optional: pause when not active */
.commentary-frame.rgb-cycle.paused[b-dlqumr1hc4] {
    animation: none !important;
}



/* COMMENTARY BUTTON START */

/* =========================================================
   2026-01-20 Commentary Button Animations – REDUCED GLOW
   FINAL: Hover ONLY on real mouse devices
   ========================================================= */

.commentary-buttons[b-dlqumr1hc4] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
}

    .commentary-buttons button[b-dlqumr1hc4] {
        
        padding: 2px 6px;
        /* 2026-02-06B font-size: 0.85em;*/
        /*font-size: 0.85em;*/
        white-space: nowrap;
        margin: 0;
        flex-shrink: 0;
        border: 1px solid #444;

        background-color: rgba(255, 255, 255, 0.15); /*  black tint */
        background-blend-mode: multiply;

        color: #e0e0e0;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        z-index: 1;
    }

        /* ---------- Ripple layers (base, inactive) ---------- */

        .commentary-buttons button[b-dlqumr1hc4]::before,
        .commentary-buttons button[b-dlqumr1hc4]::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.55s ease, height 0.55s ease;
            z-index: -1;
        }

        .commentary-buttons button[b-dlqumr1hc4]::before {
            background: radial-gradient(circle, rgba(0,191,255,0.28) 0%, transparent 70%);
        }

        .commentary-buttons button[b-dlqumr1hc4]::after {
            background: radial-gradient(circle, rgba(138,43,226,0.22) 0%, transparent 70%);
            transition-delay: 0.08s;
        }

       /* =========================================================
       ACTIVE (tap / click feedback – ALL devices)
       ========================================================= */

        .commentary-buttons button:active[b-dlqumr1hc4] {
            transform: translateY(-1px) scale(1.04);
            box-shadow: 0 4px 12px rgba(0,191,255,0.30), inset 0 3px 10px rgba(0,0,0,0.5);
            animation: none;
        }

        /* =========================================================
       SELECTED COMMENTARY – reduced glare gold highlight
       ========================================================= */

        .commentary-buttons button.highlighted[b-dlqumr1hc4] {
            background: linear-gradient( 135deg, #FFD700 0%, #FFB700 30%, #FFA500 50%, #FFB700 70%, #FFD700 100% );
            background-size: 200% 200%;
            color: #1a1a1a;
            /* 2026-02-02 font-weight: 700; */
            border: 2px solid #FF8C00;
            box-shadow: 0 0 14px rgba(255,215,0,0.55), 0 0 28px rgba(255,165,0,0.45), 0 6px 22px rgba(255,140,0,0.35), inset 0 0 8px rgba(255,255,255,0.35);
            animation: none; /* 2026-02-02  highlightShimmer 2.5s ease-in-out infinite, goldPulse 2s ease-in-out infinite, gradientShift 4s ease infinite; */
            
        }

/* =========================================================
   LOADING (rotation)
   ========================================================= */

.commentary-button.loading[b-dlqumr1hc4] {
    animation: spin-b-dlqumr1hc4 1.3s linear infinite;
    cursor: wait;
    opacity: 0.8;
}

.commentary-button.highlighted[b-dlqumr1hc4] {
    animation: none;
}

/* =========================================================
   HOVER EFFECTS — DESKTOP MOUSE ONLY
   THIS IS THE ONLY PLACE :hover EXISTS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .commentary-buttons button:hover[b-dlqumr1hc4]::before {
        width: 240%;
        height: 240%;
    }

    .commentary-buttons button:hover[b-dlqumr1hc4]::after {
        width: 200%;
        height: 200%;
    }

    .commentary-buttons button:hover[b-dlqumr1hc4] {
        background: linear-gradient( 135deg, #2a2a2a 0%, #1a3a5a 50%, #3a2a5a 100% );
        border-color: #00dada;
        color: #ffffff;
        transform: translateY(-3px) scale(1.08) rotate(0.6deg);
        box-shadow: 0 6px 18px rgba(0,191,255,0.35), 0 0 25px rgba(0,191,255,0.25), 0 0 35px rgba(138,43,226,0.20), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 6px rgba(0,191,255,0.18);
        animation: commentaryPulse-b-dlqumr1hc4 1.3s ease-in-out infinite, energyBurst-b-dlqumr1hc4 2.2s ease-in-out infinite;
    }

    .commentary-buttons button.highlighted:hover[b-dlqumr1hc4] {
        transform: translateY(-3px) scale(1.12);
        box-shadow: 0 0 22px rgba(255,215,0,0.65), 0 0 42px rgba(255,165,0,0.55), 0 10px 32px rgba(255,140,0,0.45), inset 0 0 12px rgba(255,255,255,0.45);
    }
}

/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes commentaryPulse-b-dlqumr1hc4 {
    0%,100% {
        box-shadow: 0 6px 18px rgba(0,191,255,0.35), 0 0 22px rgba(0,191,255,0.25), 0 0 32px rgba(138,43,226,0.20), inset 0 1px 0 rgba(255,255,255,0.25);
    }

    50% {
        box-shadow: 0 8px 22px rgba(0,255,255,0.45), 0 0 30px rgba(0,255,255,0.35), 0 0 42px rgba(138,43,226,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
    }
}

@keyframes energyBurst-b-dlqumr1hc4 {
    0%,100% {
        filter: brightness(1) saturate(1.05);
    }

    50% {
        filter: brightness(1.15) saturate(1.2);
    }
}

@keyframes highlightShimmer-b-dlqumr1hc4 {
    0%,100% {
        filter: brightness(1.15) saturate(1.2);
    }

    50% {
        filter: brightness(1.35) saturate(1.35);
    }
}

@keyframes goldPulse-b-dlqumr1hc4 {
    0%,100% {
        border-color: #FF8C00;
    }

    50% {
        border-color: #FFD700;
    }
}

@keyframes gradientShift-b-dlqumr1hc4 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes spin-b-dlqumr1hc4 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



/* 2026-02-01  moved from bible.razor - START */


#language-list[b-dlqumr1hc4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.language-item-wrapper[b-dlqumr1hc4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

    .language-item-wrapper button[b-dlqumr1hc4] {
        min-width: 40px;
        padding: 6px 10px !important;
        font-size: 14px !important;
    }

.language-item[b-dlqumr1hc4] {
    flex: 1;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    color: #333333;
    cursor: grab;
    user-select: none;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .language-item:hover[b-dlqumr1hc4] {
        background-color: #f0f0f0;
    }

    .language-item:active[b-dlqumr1hc4] {
        cursor: grabbing;
        transform: scale(1.02);
    }

    .language-item.dragging[b-dlqumr1hc4] {
        opacity: 0.7;
    }




.book-buttons[b-dlqumr1hc4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    overflow-y: auto;
    flex-grow: 1;
}

.book-button[b-dlqumr1hc4] {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
}




/* =========================================================
   COMMON BASE
   ========================================================= */
.old-testament[b-dlqumr1hc4],
.new-testament[b-dlqumr1hc4],
.book-torah[b-dlqumr1hc4],
.book-psalm[b-dlqumr1hc4],
.book-prophet[b-dlqumr1hc4],
.book-gospel[b-dlqumr1hc4],
.book-paul[b-dlqumr1hc4],
.book-general[b-dlqumr1hc4] {
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    font-weight: 600;
}

/* =========================================================
   OLD TESTAMENT – Warm Earth (BASE)
   ========================================================= */
.old-testament[b-dlqumr1hc4] {
    background-color: #8b5a2b; /* base brown */
    color: #fff4e6;
}

    .old-testament:hover[b-dlqumr1hc4] {
        background-color: #704214;
    }

/* Torah – LAW (darker parchment brown) */
.book-torah[b-dlqumr1hc4] {
    background: linear-gradient(135deg, #b17a45 0%, #6f3f17 100%);
    color: #fff1dc;
    border: 2px solid #6f3f17;
}

    .book-torah:hover[b-dlqumr1hc4] {
        background: linear-gradient(135deg, #6f3f17 0%, #b17a45 100%);
    }

/* Psalms – WORSHIP (golden-brown, darker than Torah) */
.book-psalm[b-dlqumr1hc4] {
    background: linear-gradient(135deg, #a33a1a 0%, #5b1f0c 100%);
    color: #ffe9dc;
    border: 2px solid #5b1f0c;
    box-shadow: 0 2px 10px rgba(91, 31, 12, 0.55);
}

    .book-psalm:hover[b-dlqumr1hc4] {
        background: linear-gradient(135deg, #5b1f0c 0%, #a33a1a 100%);
    }



/* Prophets – WARNING (dark olive-brown) */
.book-prophet[b-dlqumr1hc4] {
    background: linear-gradient(135deg, #6f7a2a 0%, #3b4212 100%);
    color: #f4f8dd;
    border: 2px solid #3b4212;
}

    .book-prophet:hover[b-dlqumr1hc4] {
        background: linear-gradient(135deg, #3b4212 0%, #6f7a2a 100%);
    }

/* =========================================================
   NEW TESTAMENT – Cool Revelation (BASE)
   ========================================================= */
.new-testament[b-dlqumr1hc4] {
    background-color: #4a7fb8; /* muted sky blue */
    color: #eef6ff;
}

    .new-testament:hover[b-dlqumr1hc4] {
        background-color: #3b6a9c;
    }


/* Gospels – LIFE OF CHRIST (deep sky blue) */
.book-gospel[b-dlqumr1hc4] {
    background: linear-gradient(135deg, #3a78c2 0%, #1e4f8f 100%);
    color: #eef6ff;
    border: 2px solid #1e4f8f;
}

    .book-gospel:hover[b-dlqumr1hc4] {
        background: linear-gradient(135deg, #1e4f8f 0%, #3a78c2 100%);
    }

/* Paul – DOCTRINE (royal blue, darker) */
.book-paul[b-dlqumr1hc4] {
    background: linear-gradient(135deg, #2f4fa3 0%, #1a2d6b 100%);
    color: #e8ecff;
    border: 2px solid #1a2d6b;
}

    .book-paul:hover[b-dlqumr1hc4] {
        background: linear-gradient(135deg, #1a2d6b 0%, #2f4fa3 100%);
    }

/* General / Revelation – AUTHORITY (dark indigo) */
.book-general[b-dlqumr1hc4] {
    background: linear-gradient(135deg, #2a2f7a 0%, #14173f 100%);
    color: #ececff;
    border: 2px solid #14173f;
}

    .book-general:hover[b-dlqumr1hc4] {
        background: linear-gradient(135deg, #14173f 0%, #2a2f7a 100%);
    }









.close-button[b-dlqumr1hc4] {
    align-self: center;
    padding: 5px 10px;
    background-color: #ff6347; /* Tomato color for close button */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


.selector-popup-content[b-dlqumr1hc4] {
    display: flex;
    flex-direction: column;
    max-height: min(80vh, 80%);
}

    .selector-popup-content h3[b-dlqumr1hc4] {
        flex-shrink: 0;
    }


.chapter-buttons[b-dlqumr1hc4],
.verse-buttons[b-dlqumr1hc4] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding-right: 6px;
}



.chapter-buttons button[b-dlqumr1hc4] {
    margin: 5px;
    padding: 10px;
    cursor: pointer;
    background-color: #3a3a3a; /* Dark button color */
    color: #e0e0e0; /* Light text */
    border: none;
    border-radius: 5px;
}

    .chapter-buttons button:hover[b-dlqumr1hc4] {
        background-color: #555; /* Hover effect */
    }

/*2025-02-18*/
/* Verse buttons - Dark Blue theme */
.verse-buttons button[b-dlqumr1hc4] {
    margin: 5px;
    padding: 10px;
    cursor: pointer;
    background-color: #2a3d66; /* Dark blue background */
    color: #e0e0e0; /* Light text */
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

    .verse-buttons button:hover[b-dlqumr1hc4] {
        background-color: #1f2d44; /* Darker blue on hover */
        border-color: #3b4e74; /* Subtle blue border on hover */
    }


/* 2026-02-01  moved from bible.razor - END */



/* Moved From bible.razor - Start */
#message[b-dlqumr1hc4] {
    display: none;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 36px 72px; /* 3x original padding */
    font-size: 3rem; /* 3x typical font size (~1rem default) */
    border-radius: 12px; /* Slightly larger rounding */
    z-index: 1000;
    opacity: 0.95;
}
        

/* LIght mode */




    body.light-mode .bible-table tr:hover[b-dlqumr1hc4] {
        background-color: inherit; /* #f5f5f5 Light highlight */
        /* 2026-02-06C color: #222;*/
    }



/*.light-mode .bible-table {
    background: red;*/ /* 2026-02-06 #fff */
    /*color: #222;
    border-color: red;*/ /* #ccc darker border */
/*}*/


/* Top command bar buttons and icons in light mode */

/* 2026-02-06D */
body.light-mode .bible-container[b-dlqumr1hc4] {
    color: var(--text-color-light, #E0E0E0) !important;
}

body.light-mode .bible-table th[b-dlqumr1hc4] {
    background-color: inherit; /* slightly darker for header contrast */
    /* 2026-02-06C color: #222 !important;*/
    color: var(--text-color-light, #E0E0E0) !important;
}

body.light-mode .bible-table[b-dlqumr1hc4],
body.light-mode .bible-table td[b-dlqumr1hc4] {
    background-color: inherit; /* #FFFDF0 !important color of the whole table */
    /* 2026-02-06C color: #222;*/
    color: var(--text-color-light, #E0E0E0) !important;
}

body.light-mode .bible-table th[b-dlqumr1hc4],
body.light-mode .bible-table td[b-dlqumr1hc4] {
    border-color: saddlebrown !important; /* or #e0e0e0 for even lighter lines */
}

/* Commentary buttons light mode override */
    body.light-mode .commentary-buttons button[b-dlqumr1hc4] {
        backgroundLight: inherit; /* 2026-02-06B #f7f3ef !important */
        color: #222 !important;
        border: 1px solid #bbb !important;
    }


    body.light-mode .commentary-buttons button.highlighted[b-dlqumr1hc4] {
        background: linear-gradient(135deg, #ffe066 0%, #ffd700 100%) !important;
        color: #222 !important;
        border: 2px solid #ffb700 !important;
    }

    body.light-mode .commentary-buttons button:hover[b-dlqumr1hc4] {
        background: linear-gradient(135deg, #e0e0e0 0%, #d0e6fa 100%) !important;
        color: #0074d9 !important;
        border-color: #0074d9 !important;
    }


body.light-mode .verse-title[b-dlqumr1hc4] {
    color: #d2691e !important; /* dark orange */
    text-shadow: none; /* optional: remove shadow for clarity in light mode */
}


/* Add this at the end of your CSS file */
[data-section="Introduction"][b-dlqumr1hc4] {
    background-color: inherit; 
    color: #eee;
    border: 3px solid #555;
}

body.light-mode [data-section="Introduction"][b-dlqumr1hc4] {
    background-color: #f7f3ef !important;
    color: #222 !important;
    border: 3px solid #ddd !important;
}



.bg-commandbutton[b-dlqumr1hc4] {
    /* add color */
    backdrop-filter: blur(10px) saturate(400%);

    /* At Tint with darken color*/
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    /*background-color: #8B6B3E;*/
    color: #FFFDF0 !important;
}





.active-verse[b-dlqumr1hc4] {
    background-color: var(--active-verse-bg) !important;
    /*background-color:yellow;*/
}

.bible-container.recite-mode .active-verse[b-dlqumr1hc4] {
    background-color : black !important;
}


body.light-mode .bible-container.recite-mode .active-verse[b-dlqumr1hc4] {
    background-color: var(--text-color-light, #E0E0E0) !important;
}




/* TopCommandBar Toggle */
/* site.css or Bible.razor.css */
.top-command-bar[b-dlqumr1hc4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: z-index 0.2s, opacity 0.2s;
}

    .top-command-bar.hidden[b-dlqumr1hc4] {
        z-index: -1;
        pointer-events: none;
        opacity: 0;
    }

    .top-command-bar.visible[b-dlqumr1hc4] {
        z-index: 999;
        pointer-events: auto;
        opacity: 1;
    }


/* BottomCommandBar */

.bottom-command-bar[b-dlqumr1hc4] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: var(--body-bg); /* Match topCommandBar */
    color: #e0e0e0; /* Match topCommandBar */
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    transition: opacity 0.2s, visibility 0.2s;
    opacity: 1;
    visibility: visible;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.8); /* Shadow at the top of the bar */
}

    .bottom-command-bar.hidden[b-dlqumr1hc4] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .bottom-command-bar.visible[b-dlqumr1hc4] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }



/* =========================================================
   2026-06-10 Theme Font Family + Font Weight
   Modified: same font family and weight in BOTH dark and light mode.
   ========================================================= */

/* Apply same readable font to verse/commentary in both dark and light mode */
.verse-text[b-dlqumr1hc4],
.commentary-content[b-dlqumr1hc4],
.commentary-content p[b-dlqumr1hc4],
.commentary-content div:not(.commentary-buttons):not(.button-container)[b-dlqumr1hc4],
.commentary-content span[b-dlqumr1hc4],
.commentary-content font[b-dlqumr1hc4],
.commentary-content td[b-dlqumr1hc4],
.commentary-content th[b-dlqumr1hc4],
.commentary-content li[b-dlqumr1hc4] {
    font-family: "Microsoft YaHei", "Microsoft YaHei UI", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
    font-weight: var(--body-font-weight, 700);
}

    /* Make ruby/furigana inherit the same font weight */
    .verse-text ruby[b-dlqumr1hc4],
    .verse-text rb[b-dlqumr1hc4],
    .verse-text rt[b-dlqumr1hc4],
    .verse-text rp[b-dlqumr1hc4] {
        font-family: inherit;
        font-weight: inherit;
    }

    /* Optional: furigana can be thinner if it looks too heavy */
    .verse-text rt[b-dlqumr1hc4] {
        font-weight: 400;
    }

/* 2026-06-10 Keep Font Awesome icons using icon font.
   Applies to BOTH dark mode and light mode. */
.fa[b-dlqumr1hc4],
.fas[b-dlqumr1hc4],
.fa-solid[b-dlqumr1hc4] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.far[b-dlqumr1hc4],
.fa-regular[b-dlqumr1hc4] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fab[b-dlqumr1hc4],
.fa-brands[b-dlqumr1hc4] {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}    
/* /Pages/Loading.razor.rz.scp.css */
/* PLoad */


/* =========================================================
   Popup Loading (pload-*) - isolated classes
   Transparent overlay + small centered card
   ========================================================= */

/* Fullscreen click-catcher + centering */
.pload-root[b-mj3vltsibt] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Transparent overlay (dim but still see-through) */
.pload-overlay[b-mj3vltsibt] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    pointer-events: none;
}

/* Small centered loading card */
.pload-card[b-mj3vltsibt] {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 18px;
    padding: 2.5rem 2.5rem 2rem 2.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 16.25em;
}

/* Spinner sizing tweak (optional) */
.pload-spinner[b-mj3vltsibt] {
    width: 2.6em;
    height: 2.6em;
}

.fun-spinner[b-mj3vltsibt] {
    width: 4em;
    height: 4em;
    margin-bottom: 0.75em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fun-spinner-inner[b-mj3vltsibt] {
    width: 100%;
    height: 100%;
    border: 0.5em solid #e0e0e0;
    border-top: 0.5em solid #0078d7;
    border-radius: 50%;
    animation: fun-spin-b-mj3vltsibt 1.1s linear infinite, fun-color-b-mj3vltsibt 2s linear infinite alternate;
}

@keyframes fun-spin-b-mj3vltsibt {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@keyframes fun-color-b-mj3vltsibt {
    0% { border-top-color: #0078d7;}
    25% { border-top-color: #e91e63;}
    50% { border-top-color: #ffeb3b;}
    75% { border-top-color: #4caf50;}
    100% { border-top-color: #0078d7;}
}

/* Message spacing */
.pload-message[b-mj3vltsibt] {
    margin-top: 0.5rem;
    text-align: center;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.02em;
    min-height: 2.5em;
}
/* /Pages/prayer.razor.rz.scp.css */
/* 2026-06-13 Prayer.razor.css
   Mobile-friendly version for high-PPI / narrow screens.
   Main fix: toolbar font size is separated from prayer content font size. */

/* Main prayer page container */
.prayer-page[b-mdp284peax] {
    min-height: 100vh;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    background-color: #040c22;
    color: #e0e0e0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Top prayer buttons */
.prayer-toolbar[b-mdp284peax] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45em;
    margin-bottom: 0.75em;
}

/* Similar to Bible.razor.css #message, but scoped to Prayer page */
.prayer-message[b-mdp284peax] {
    display: none;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 1em 1.8em;
    font-size: clamp(22px, 6vw, 48px);
    border-radius: 12px;
    z-index: 1000001;
    opacity: 0.95;
    text-align: center;
    max-width: 90vw;
    white-space: pre-wrap;
}

/* 2026-06-13 Compact toolbar buttons for mobile */
.prayer-toolbar-button[b-mdp284peax] {
    font-size: var(--prayer-toolbar-font-size, 18px) !important;
    padding: 0.42em 0.58em !important;
    min-width: 2.45em;
    min-height: 2.45em;
    line-height: 1.1;
    border-radius: 0.35em;
    white-space: nowrap;
    box-sizing: border-box;
}

.prayer-date-button[b-mdp284peax] {
    min-width: auto;
    max-width: 100%;
}

.prayer-copy-button[b-mdp284peax] {
    min-width: auto;
}

/* Repeat input should match the compact toolbar size */
.prayer-repeat-input[b-mdp284peax] {
    font-size: calc(var(--prayer-toolbar-font-size, 18px) * 0.95) !important;
    width: 2.8em;
    height: 2.45em;
    display: inline-block;
    vertical-align: middle;
    padding: 0.15em 0.3em;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    text-align: center;
    box-sizing: border-box;
    border-radius: 0;
}

/* Based on Bible.razor.css .commentary-frame-static */
.prayer-frame[b-mdp284peax] {
    position: relative;
    margin: 0.35em 0 0 0;
    padding: 0.7em 0.85em;
    border-radius: 0.75em;
    background: inherit;
    color: inherit;
    font-size: var(--prayer-content-font-size, 24px);
    box-sizing: border-box;
}

    /* RGB border ring copied from commentary-frame-static, but thinner for mobile */
    .prayer-frame[b-mdp284peax]::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 0.28em;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
    }

/* Prayer title, similar color style to verse-title / intro title */
.prayer-title[b-mdp284peax] {
    font-size: var(--prayer-title-font-size, 24px);
    line-height: 1.28;
    color: #ffcc66;
    text-shadow: 0 0 4px rgba(255, 204, 102, 0.35), 0 1px 0 rgba(0, 0, 0, 0.6);
    margin-top: 0;
    margin-bottom: 0.65em;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Prayer body text */
.prayer-content[b-mdp284peax] {
    font-size: var(--prayer-content-font-size, 24px);
    color: #e0e0e0;
    line-height: 1.58;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

    /* Remove default margin/padding inside prayer content, copied from commentary-content behavior */
    .prayer-content *[b-mdp284peax] {
        margin: 0;
        padding: 0;
    }

    /* Chinese-friendly font from Bible.razor.css */
    .prayer-content[b-mdp284peax],
    .prayer-content p[b-mdp284peax],
    .prayer-content div[b-mdp284peax],
    .prayer-content span[b-mdp284peax],
    .prayer-content font[b-mdp284peax],
    .prayer-content td[b-mdp284peax],
    .prayer-content th[b-mdp284peax],
    .prayer-content li[b-mdp284peax] {
        font-family: "Microsoft YaHei", "Microsoft YaHei UI", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
        font-weight: var(--body-font-weight, 100);
    }

/* Speaker Icon Button copied from Bible.razor.css */
.speaker-icon-button[b-mdp284peax] {
    font-size: 1.02em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #e0e0e0;
}

    .speaker-icon-button i[b-mdp284peax] {
        color: #007bff;
        transition: transform 0.3s ease, color 0.3s ease;
    }

        .speaker-icon-button i:hover[b-mdp284peax] {
            color: lawngreen;
            transform: scale(1.2);
        }

/* Prayer input */
.prayer-page input[b-mdp284peax] {
    background-color: transparent;
    color: inherit;
    border: 1px solid currentColor;
}

/* Keep Font Awesome icons using icon font */
.fa[b-mdp284peax],
.fas[b-mdp284peax],
.fa-solid[b-mdp284peax] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.far[b-mdp284peax],
.fa-regular[b-mdp284peax] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fab[b-mdp284peax],
.fa-brands[b-mdp284peax] {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.prayer-danger-icon i[b-mdp284peax] {
    color: #ff4444 !important;
}

/* 2026-06-13 Make Prayer page cover MainLayout nav completely.
   Use 100dvh for mobile browser URL-bar safe height, with 100vh fallback. */
.prayer-fullscreen[b-mdp284peax] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding-top: calc(0.6em + env(safe-area-inset-top)) !important;
    padding-right: calc(0.65em + env(safe-area-inset-right)) !important;
    padding-bottom: calc(0.6em + env(safe-area-inset-bottom)) !important;
    padding-left: calc(0.65em + env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #040c22 !important;
    color: #e0e0e0 !important;
}
/* /Pages/VirtualKeyboardModal.razor.rz.scp.css */
.vk-modal-bg[b-gnx4yzguii] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.vk-modal[b-gnx4yzguii] {
    background: #333;
    color: #fff;
    border-radius: 0;
    box-shadow: none;
    padding: 16px 0 16px 0;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    touch-action: manipulation; /* disables double-tap zoom and pinch-zoom */
    -ms-touch-action: manipulation;
    overscroll-behavior: contain; /* prevents scroll chaining */
}

.vk-modal *[b-gnx4yzguii] {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

.vk-input[b-gnx4yzguii] {
    width: 100%;
    font-size: 2.5em;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #bbb;
    box-sizing: border-box;
    margin-bottom: 0;
    background: #fff;
    color: #222;
}

.vk-keyboard[b-gnx4yzguii] {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vk-row[b-gnx4yzguii] {
    display: flex;
    gap: 8px;
    margin-bottom: 14px; /* Increased margin for more space between rows */
    width: 100%;
    justify-content: stretch;
}

.vk-btn[b-gnx4yzguii], .vk-btn-large[b-gnx4yzguii], .vk-ok[b-gnx4yzguii], .vk-cancel[b-gnx4yzguii] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    background: linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%);
    border: 1px solid #b0b8c1;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(60, 60, 90, 0.08), 0 1px 0 #fff inset;
    color: #2d3a4a;
    font-weight: 600;
    font-size: 2.5em;
    padding: 0.01em 0;
    margin: 0;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    cursor: pointer;
    outline: none;
    text-align: center;
}

.vk-btn:hover[b-gnx4yzguii], .vk-btn-large:hover[b-gnx4yzguii] {
    background: linear-gradient(180deg, #e2e6ee 0%, #a9b6c7 100%);
    box-shadow: 0 0 0 3px #2196f3, 0 0 12px 4px #2196f3;
    border-color: #2196f3;
    /* Remove transform for no enlargement */
    transform: none;
}

.vk-btn:active[b-gnx4yzguii], .vk-btn-large:active[b-gnx4yzguii] {
    background: linear-gradient(180deg, #c3cfe2 0%, #f5f7fa 100%);
    box-shadow: 0 1px 2px rgba(60, 60, 90, 0.07);
    transform: translateY(1px) scale(0.98);
}

.vk-btn-large[b-gnx4yzguii] {
    /*padding: 0.7em 0;*/
}

.vk-space[b-gnx4yzguii] {
    flex: 3 1 0%;
    min-width: 0;
}

.vk-back[b-gnx4yzguii] {
    flex: 1 1 0%;
    min-width: 0;
}

.vk-spacebar-label[b-gnx4yzguii] {
    letter-spacing: 0.03em;
}

.vk-display-row[b-gnx4yzguii] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 12px;
}

.vk-card[b-gnx4yzguii] {
    min-width: 70px;
    min-height: 8em; /* Increased to match the screenshot */
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.95em;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 10px 18px;
    position: relative;
    border: 2px solid #444;
    transition: box-shadow 0.2s;
}

.vk-card-book[b-gnx4yzguii] {
    background: linear-gradient(135deg, #3a6186 0%, #2c4f6e 100%);
}


.vk-card-chapter[b-gnx4yzguii] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.vk-card-verse[b-gnx4yzguii] {
    background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
}

.vk-match[b-gnx4yzguii] {
    font-size: 1.5em;
    color: #ffd700;
    margin-top: 6px;
    font-weight: 400;
    text-shadow: 0 1px 2px #222;
}

.vk-input-boxes-row[b-gnx4yzguii] {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 18px;
}

.vk-input-box[b-gnx4yzguii] {
    width: 38px;
    height: 44px;
    border: 2px solid #2196F3;
    border-radius: 7px;
    background: #fff;
    color: #222;
    font-size: 2.5em;
    font-family: 'Consolas', 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.2s;
    opacity: 1;
    animation: vk-box-fadein-b-gnx4yzguii 0.25s forwards;
}

.vk-input-box.vk-cursor[b-gnx4yzguii] {
    border-color: #111;
    animation: vk-blink 1s steps(1) infinite;
}

/* Match input box color to card */
.vk-input-box.vk-box-book[b-gnx4yzguii] {
    background: #3a6186;
    border: 2px solid #7da6ff;
    color: #fff;
}
.vk-input-box.vk-box-chapter[b-gnx4yzguii] {
    background: #11998e;
    border: 2px solid #38ef7d;
    color: #fff;
}
.vk-input-box.vk-box-verse[b-gnx4yzguii] {
    background: #fc4a1a;
    border: 2px solid #f7b733;
    color: #fff;
}

/* Dashes (spaces) remain white */
.vk-input-box[b-gnx4yzguii] {
    background: #fff;
    color: #222;
}

/* Glowing effect for the active input box */
.vk-input-box.vk-glow[b-gnx4yzguii] {
    box-shadow: 0 0 0 3px #fff, 0 0 12px 4px #2196f3;
    border-color: #2196f3;
    z-index: 1;
    position: relative;
    animation: vk-heartbeat-b-gnx4yzguii 1.1s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes vk-heartbeat-b-gnx4yzguii {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 3px #fff, 0 0 12px 4px #2196f3;
    }

    10% {
        transform: scale(1.06);
        box-shadow: 0 0 0 4px #fff, 0 0 16px 6px #2196f3;
    }

    20% {
        transform: scale(1.10);
        box-shadow: 0 0 0 5px #fff, 0 0 20px 8px #2196f3;
    }

    30% {
        transform: scale(1.06);
        box-shadow: 0 0 0 4px #fff, 0 0 16px 6px #2196f3;
    }

    40% {
        transform: scale(1);
        box-shadow: 0 0 0 3px #fff, 0 0 12px 4px #2196f3;
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px #fff, 0 0 12px 4px #2196f3;
    }
}

/* Remove blinking cursor animation */
.vk-cursor[b-gnx4yzguii], .vk-blink[b-gnx4yzguii] {
    border-bottom: none !important;
    animation: none !important;
}

.vk-frame-static[b-gnx4yzguii] {
    border: 5px solid #0078d7;
    box-shadow: 0 0 6px #0078d7;
    border-radius: 8px;
    transition: border 0.2s, box-shadow 0.2s;
}

.vk-card-header-row[b-gnx4yzguii] {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    justify-content: center;
}
.vk-card-header[b-gnx4yzguii] {
    flex: 1;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    opacity: 0.85;
}

.vk-anim[b-gnx4yzguii] {
    will-change: opacity, transform;
}

@keyframes vk-box-fadein-b-gnx4yzguii {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes vk-box-fadeout-b-gnx4yzguii {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.8); }
}

.vk-modal-actions[b-gnx4yzguii] {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

.vk-ok[b-gnx4yzguii], .vk-cancel[b-gnx4yzguii] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding: 12px 0;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #b0b8c1;
    background: linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #2d3a4a;
    box-shadow: 0 2px 6px rgba(60, 60, 90, 0.08);
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    cursor: pointer;
    outline: none;
    text-align: center;
}

@media (orientation: portrait) and (max-width: 500px) and 
       (-webkit-min-device-pixel-ratio: 2), 
       (orientation: portrait) and (max-width: 500px) and 
       (min-resolution: 2dppx) {
    .vk-btn[b-gnx4yzguii], .vk-btn-large[b-gnx4yzguii], .vk-space[b-gnx4yzguii], .vk-back[b-gnx4yzguii], .vk-ok[b-gnx4yzguii], .vk-cancel[b-gnx4yzguii] {
        height: 6em !important;
        font-size: 2.5em !important;
    }
}

.vk-btn.portrait[b-gnx4yzguii] {
    height: calc(100vw / 10) !important;
}


.vk-glow-green[b-gnx4yzguii] {
    border: 2px solid #2ecc40;
    box-shadow: 0 0 8px #2ecc40, 0 0 16px #2ecc40;
    transition: box-shadow 0.2s;
}

.vk-glow-orange[b-gnx4yzguii] {
    border: 2px solid #ff9800;
    box-shadow: 0 0 8px #ff9800, 0 0 16px #ff9800;
    transition: box-shadow 0.2s;
}

.vk-ok.vk-glow-green:hover[b-gnx4yzguii] {
    /* Combine green glow and blue hover glow */
    box-shadow: 0 0 8px #2ecc40, 0 0 16px #2ecc40, /* green glow */
    0 0 0 3px #2196f3, 0 0 12px 4px #2196f3; /* blue hover */
    border-color: #2ecc40;
}

.vk-ok.vk-glow-orange:hover[b-gnx4yzguii] {
    /* Combine orange glow and blue hover glow */
    box-shadow: 0 0 8px #ff9800, 0 0 16px #ff9800, /* orange glow */
    0 0 0 3px #2196f3, 0 0 12px 4px #2196f3; /* blue hover */
    border-color: #ff9800;
}

.vk-grayoff[b-gnx4yzguii] {
    border: 2px solid #aaa;
    background: #eee;
    color: #888;
    box-shadow: none;
    cursor: not-allowed;
}




.vk-flash-error[b-gnx4yzguii] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11000;
    width: 30vw;
    height: 30vw;
    max-width: 30vh;
    max-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.vk-flash-error .vk-error-icon[b-gnx4yzguii] {
    width: 100%;
    height: 100%;
    font-size: min(30vw, 30vh);
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}