/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ortdo0jtyt],
.components-reconnect-repeated-attempt-visible[b-ortdo0jtyt],
.components-reconnect-failed-visible[b-ortdo0jtyt],
.components-pause-visible[b-ortdo0jtyt],
.components-resume-failed-visible[b-ortdo0jtyt],
.components-rejoining-animation[b-ortdo0jtyt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ortdo0jtyt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ortdo0jtyt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ortdo0jtyt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ortdo0jtyt],
#components-reconnect-modal.components-reconnect-retrying[b-ortdo0jtyt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ortdo0jtyt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ortdo0jtyt],
#components-reconnect-modal.components-reconnect-failed[b-ortdo0jtyt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ortdo0jtyt] {
    display: block;
}


#components-reconnect-modal[b-ortdo0jtyt] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ortdo0jtyt 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ortdo0jtyt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ortdo0jtyt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ortdo0jtyt]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ortdo0jtyt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ortdo0jtyt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ortdo0jtyt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ortdo0jtyt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ortdo0jtyt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ortdo0jtyt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ortdo0jtyt] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ortdo0jtyt] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ortdo0jtyt] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ortdo0jtyt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ortdo0jtyt] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ortdo0jtyt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ortdo0jtyt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ortdo0jtyt {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SermonsLayout.razor.rz.scp.css */
.header-bg[b-bua3i4ybhs] {
    background-color: #1a365d;
}
/* /Components/Pages/Giving/Giving.razor.rz.scp.css */
p[b-19it3s5x5q] {
    color: black;
}

img[b-19it3s5x5q] {
    height: 15rem;
    width: 15rem;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.start-giving-container[b-19it3s5x5q] {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(221, 220, 221);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.start-giving-title[b-19it3s5x5q] {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2rem;
}

.form-group[b-19it3s5x5q] {
    margin-bottom: 1.75rem;
}

.label[b-19it3s5x5q] {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.amount-wrapper[b-19it3s5x5q] {
    position: relative;
   
}

.amount-prefix[b-19it3s5x5q] {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: #64748b;
    pointer-events: none;
    font-weight: bold;
}

.amount-input[b-19it3s5x5q] {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
}

.amount-input:focus[b-19it3s5x5q],
.form-control:focus[b-19it3s5x5q] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.form-control[b-19it3s5x5q] {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
}

.frequency-grid[b-19it3s5x5q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.frequency-option[b-19it3s5x5q] {
    position: relative;
    cursor: pointer;
}

.frequency-input[b-19it3s5x5q] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.frequency-label[b-19it3s5x5q] {
    display: block;
    padding: 1.25rem 0.5rem;
    text-align: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
    user-select: none;
}

.frequency-label strong[b-19it3s5x5q] {
    display: block;
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.frequency-label small[b-19it3s5x5q] {
    color: #64748b;
    font-size: 0.9rem;
}

.frequency-input:checked + .frequency-label[b-19it3s5x5q] {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    transform: scale(1.02);
}

.email-input[b-19it3s5x5q] {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
}

.email-input:focus[b-19it3s5x5q] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.submit-btn[b-19it3s5x5q] {
    width: 100%;
    padding: 1.25rem;
    margin-top: 1.5rem;
    background: #3b82f6;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
}

.submit-btn:hover:not(:disabled)[b-19it3s5x5q] {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(59, 130, 246, 0.35);
}

.submit-btn:disabled[b-19it3s5x5q] {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
}

.manage-giving-btn[b-19it3s5x5q] {
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
    background-color: #10b981;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.trust-footer[b-19it3s5x5q] {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #64748b;
}

.trust-footer strong[b-19it3s5x5q] {
    color: #1e293b;
}

.cover-fees[b-19it3s5x5q] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.cover-fees input[type="checkbox"][b-19it3s5x5q] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.cover-fees .checkmark[b-19it3s5x5q] {
    width: 24px;
    height: 24px;
    border: 2px solid #94a3b8;
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.cover-fees input:checked ~ .checkmark[b-19it3s5x5q] {
    background: #3b82f6;
    border-color: #3b82f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.cover-fees .label-text strong[b-19it3s5x5q] {
    color: #1e293b;
}

.cover-fees .label-text small[b-19it3s5x5q] {
    color: #64748b;
    line-height: 1.5;
}

.alert-danger[b-19it3s5x5q] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
/* /Components/Pages/Giving/GivingManage.razor.rz.scp.css */
hr[b-fspauj3s0q] {
    border-color: black;
}

p[b-fspauj3s0q] {
    color: black;
    font-size: 16px;
}

img[b-fspauj3s0q] {
    height: 15rem;
    width: 15rem;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.manage-giving-container[b-fspauj3s0q] {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(221, 220, 221);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-align: center;
}

h2[b-fspauj3s0q] {
    font-size: 1.5rem;
    font-weight: 700;
    color: black;
    margin-bottom: 0.5rem;
}

.email-input[b-fspauj3s0q] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.send-btn[b-fspauj3s0q] {
    width: 100%;
    padding: 0.75rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

.send-btn:hover:not(:disabled)[b-fspauj3s0q] {
    background: #1d4ed8;
}

.send-btn:disabled[b-fspauj3s0q] {
    background: #94a3b8;
    cursor: not-allowed;
}

.alert-danger[b-fspauj3s0q] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.success[b-fspauj3s0q] {
    color: #16a34a;
    text-align: center;
}

.success .message[b-fspauj3s0q] {
    color: black;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
/* /Components/Pages/Giving/GivingThankYou.razor.rz.scp.css */
.thank-you-container[b-ush86qa3dv] {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(221, 220, 221);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-align: center;
}

h1[b-ush86qa3dv] {
    color: #1e293b;
}

p[b-ush86qa3dv] {
    color: black;
}

.confirmation[b-ush86qa3dv] {
    font-size: 0.85rem;
    color: #64748b;
}

.give-again-link[b-ush86qa3dv] {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: #3b82f6;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}
/* /Components/Pages/Photos.razor.rz.scp.css */
.photo-grid[b-y4nbcoswa9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.photo-thumb[b-y4nbcoswa9] {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius, 8px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.photo-thumb img[b-y4nbcoswa9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.photo-thumb:hover img[b-y4nbcoswa9] {
    transform: scale(1.05);
}

.photo-modal[b-y4nbcoswa9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    outline: none;
}

.photo-modal-image[b-y4nbcoswa9] {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.photo-modal-close[b-y4nbcoswa9] {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

.photo-modal-nav[b-y4nbcoswa9] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-modal-nav:hover[b-y4nbcoswa9] {
    background: rgba(255, 255, 255, 0.25);
}

.photo-modal-prev[b-y4nbcoswa9] {
    left: 1rem;
}

.photo-modal-next[b-y4nbcoswa9] {
    right: 1rem;
}

@media (max-width: 575px) {
    .photo-modal-nav[b-y4nbcoswa9] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 2rem;
    }
}
/* /Components/Pages/Sermons/Admin/Index.razor.rz.scp.css */
/* Matches the original sermon admin's own layout: a full-width split view (no
   site nav at all — Log Out / the series title / + New Series are the only chrome),
   sidebar and content scrolling together as one page so there's as much room as
   possible for editing. */

.admin-shell[b-mxehnffkcw] {
    align-items: flex-start;
    min-height: 100vh;
    background: #f1f3f5;
}

/* Sidebar --------------------------------------------------------------- */

.admin-sidebar[b-mxehnffkcw] {
    width: 24rem;
    flex: 0 0 24rem;
    background: #fff;
    border-right: 1px solid #e9ecef;
    padding: 1.5rem 1rem;
    align-self: stretch;
}

.sidebar-header[b-mxehnffkcw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.sidebar-title[b-mxehnffkcw] {
    flex: 1;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d6efd;
}

.add-btn[b-mxehnffkcw] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.series-list[b-mxehnffkcw] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.series-item[b-mxehnffkcw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, filter 0.12s ease, transform 0.12s ease;
}

/* While something is being dragged, every card dims except the one being carried
   and the one currently under the pointer — makes both immediately obvious at a
   glance instead of having to track the cursor. */
.series-list.is-dragging .series-item:not(.dragging):not(.drop-target)[b-mxehnffkcw] {
    filter: brightness(0.82);
}

.series-item.dragging[b-mxehnffkcw] {
    background: #cfe2ff;
    border-color: #0d6efd;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
    transform: scale(1.02);
}

.series-item.dragging .series-item-subtitle[b-mxehnffkcw] {
    color: #0a58ca;
}

.series-item.drop-target[b-mxehnffkcw] {
    border-color: #0d6efd;
    outline: 2px solid #0d6efd;
    outline-offset: -1px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.drag-handle[b-mxehnffkcw] {
    cursor: grab;
}

.series-item.selected[b-mxehnffkcw] {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.series-item.selected .series-item-subtitle[b-mxehnffkcw] {
    color: rgba(255, 255, 255, 0.75);
}

.drag-handle[b-mxehnffkcw] {
    color: #adb5bd;
    flex: 0 0 auto;
}

.series-item.selected .drag-handle[b-mxehnffkcw] {
    color: rgba(255, 255, 255, 0.6);
}

.series-item-text[b-mxehnffkcw] {
    flex: 1;
    min-width: 0;
}

.series-item-subtitle[b-mxehnffkcw] {
    font-size: 0.82rem;
    color: #6c757d;
}

.series-count[b-mxehnffkcw] {
    background: #0d6efd;
    color: #fff;
    flex: 0 0 auto;
}

/* Content ----------------------------------------------------------------*/

.admin-content[b-mxehnffkcw] {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem;
}

.admin-input[b-mxehnffkcw] {
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-size: 1.05rem;
    border-color: #dee2e6;
}

.asset-link[b-mxehnffkcw] {
    display: inline-block;
    color: #198754;
    word-break: break-all;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.download-link[b-mxehnffkcw] {
    color: #0d6efd;
    text-decoration: underline;
}

.series-thumb-preview[b-mxehnffkcw] {
    display: block;
    max-width: 30rem;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.sermon-thumb-preview[b-mxehnffkcw] {
    width: 8rem;
    border-radius: 8px;
}

/* Individual sermon card */

.sermon-card[b-mxehnffkcw] {
    display: flex;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sermon-card-fields[b-mxehnffkcw] {
    flex: 1;
    min-width: 0;
}

.sermon-card-media[b-mxehnffkcw] {
    flex: 0 0 18rem;
    min-width: 0;
}

@media (max-width: 900px) {
    .admin-shell[b-mxehnffkcw] {
        flex-direction: column;
    }

    .admin-sidebar[b-mxehnffkcw] {
        width: 100%;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
    }

    .sermon-card[b-mxehnffkcw] {
        flex-direction: column;
    }

    .sermon-card-media[b-mxehnffkcw] {
        flex: 1 1 auto;
    }
}

/* Toasts ------------------------------------------------------------------
   Matches the Angular admin's ngx-toastr config (toast-top-right, 10s
   auto-dismiss, close button, progress bar — see app.config.ts) rather than
   an inline alert banner in the page flow. */

.toast-container[b-mxehnffkcw] {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 20rem;
    max-width: calc(100vw - 1.5rem);
}

.toast-item[b-mxehnffkcw] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.9rem 1.75rem 1.1rem 1rem;
    border-radius: 6px;
    color: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: toast-in-b-mxehnffkcw 0.25s ease-out both;
}

@keyframes toast-in-b-mxehnffkcw {
    from { opacity: 0; transform: translateX(2rem); }
    to { opacity: 1; transform: translateX(0); }
}

.toast-success[b-mxehnffkcw] { background: #51a351; }
.toast-warning[b-mxehnffkcw] { background: #f89406; }
.toast-error[b-mxehnffkcw]   { background: #bd362f; }
.toast-info[b-mxehnffkcw]    { background: #2f96b4; }

.toast-icon[b-mxehnffkcw] {
    flex: 0 0 auto;
    font-size: 1.15rem;
    margin-top: 0.1rem;
}

.toast-message[b-mxehnffkcw] {
    flex: 1;
    font-size: 0.92rem;
    line-height: 1.35;
    word-break: break-word;
}

.toast-close[b-mxehnffkcw] {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
}

.toast-close:hover[b-mxehnffkcw] {
    color: #fff;
}

.toast-progress[b-mxehnffkcw] {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.65);
    animation: toast-progress-b-mxehnffkcw 10s linear forwards;
}

@keyframes toast-progress-b-mxehnffkcw {
    from { width: 100%; }
    to { width: 0%; }
}
/* /Components/Pages/Sermons/Listen.razor.rz.scp.css */
/* Matches the church site's own deployed sermon listing
   (https://cbcspencer.duckdns.org/cbc/listen, embedded on
   covenantbaptistchurchspencer.org/media-2): stock Bootstrap 5 classes and colors,
   plus the handful of custom rules below that page also carries. */

.cursor-pointer[b-pqr0xw692a] {
    cursor: pointer;
}

.header-bg[b-pqr0xw692a] {
    background-color: #1a365d;
}

/* app.css sets a green serif h1/h2/h3 and green .btn-primary/.text-primary
   site-wide for the scramble pages; this page matches the church site's own
   plain Bootstrap look (default Bootstrap blue, sans-serif) instead. */
h1[b-pqr0xw692a], h2[b-pqr0xw692a], h3[b-pqr0xw692a] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: inherit;
}

.btn[b-pqr0xw692a] {
    border-radius: 0.375rem;
    padding-inline: 0.75rem;
    font-weight: 400;
}

.btn-primary[b-pqr0xw692a] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-pqr0xw692a], .btn-primary:focus[b-pqr0xw692a], .btn-primary:active[b-pqr0xw692a] {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

.btn:focus[b-pqr0xw692a], .btn:active:focus[b-pqr0xw692a] {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.text-primary[b-pqr0xw692a] {
    color: #0d6efd !important;
}

.card[b-pqr0xw692a] {
    border: none;
    border-radius: 0.375rem;
}

.card-title[b-pqr0xw692a] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: inherit;
}

.hover-lift[b-pqr0xw692a] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover[b-pqr0xw692a] {
    transform: translateY(-4px);
}

.thumb-placeholder[b-pqr0xw692a] {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a365d, #0f172a);
    color: rgba(255, 255, 255, 0.75);
    font-size: 2rem;
}

.tile-card[b-pqr0xw692a] {
    background: linear-gradient(135deg, #0d6efd, #1a365d);
}

/* Fullscreen player ---------------------------------------------------- */

.fullscreen-player[b-pqr0xw692a] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #fff;
}

.close-btn[b-pqr0xw692a] {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    /* Above the transcript panel (auto z-index, but can render taller than the
       visible screen on mobile — see .transcript-panel's dvh comment — and
       otherwise paints over this button since it comes later in the DOM) and
       its own controls (z-index 5), so Exit is never swallowed by a tap. */
    z-index: 10;
    background: #dc143c;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
}

.close-btn:hover[b-pqr0xw692a] {
    background: #c01236;
    color: #fff;
}

.player-container[b-pqr0xw692a] {
    width: 95%;
    max-width: 30rem;
    text-align: center;
}

.sermon-thumb[b-pqr0xw692a] {
    width: 12rem;
    height: 12rem;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 auto 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.sermon-thumb.thumb-placeholder[b-pqr0xw692a] {
    aspect-ratio: auto;
    font-size: 2.5rem;
}

.player-title[b-pqr0xw692a] {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0.2rem;
}

.player-subtitle[b-pqr0xw692a] {
    color: #cbd5e1;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.player-preacher[b-pqr0xw692a] {
    color: #93c5fd;
    margin-bottom: 0.2rem;
}

.player-meta[b-pqr0xw692a] {
    color: #94a3b8;
    margin-bottom: 0.1rem;
}

.player-audio[b-pqr0xw692a] {
    width: 100%;
    margin-top: 1.5rem;
    accent-color: #2563eb;
}

.player-controls[b-pqr0xw692a] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.control-btn[b-pqr0xw692a] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
}

.control-btn:hover:not(:disabled)[b-pqr0xw692a] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.control-btn:disabled[b-pqr0xw692a] {
    opacity: 0.35;
}

.skip-btn[b-pqr0xw692a] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.skip-btn span[b-pqr0xw692a] {
    font-size: 0.8rem;
    font-weight: 700;
}

/* Transcript panel ------------------------------------------------------ */

.transcript-toggle-btn[b-pqr0xw692a] {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    /* See .close-btn's comment — same reason. */
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
}

.transcript-toggle-btn:hover[b-pqr0xw692a] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
/* /Components/Pages/Sermons/TranscriptPanel.razor.rz.scp.css */
.transcript-panel[b-nmzd1tz25m] {
    position: relative;
    width: 95%;
    max-width: 40rem;
    /* dvh (dynamic viewport height), not vh: mobile browsers size vh against
       the layout viewport, which includes room the address-bar toolbar can
       reclaim, so vh can measure taller than what's actually visible. Centered
       in the fullscreen player, an oversized box like that overflows upward
       past the fixed Exit/Hide-Transcript buttons and — sharing their default
       z-index — paints over them, swallowing taps meant for those buttons.
       dvh tracks the real visible height instead; the vh rule stays first as
       a fallback for browsers that don't support dvh. */
    height: 80vh;
    height: 80dvh;
    overflow-y: auto;
    padding: 2.5rem 1.5rem;
    text-align: left;
}

.transcript-line[b-nmzd1tz25m] {
    color: #94a3b8;
    font-size: 1.15rem;
    line-height: 1.9;
    padding: 0.4rem 0.75rem 0.4rem 1rem;
    border-radius: 6px;
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.transcript-line:hover[b-nmzd1tz25m] {
    background: rgba(255, 255, 255, 0.06);
}

.transcript-line.active[b-nmzd1tz25m] {
    color: #fff;
    background: rgba(37, 99, 235, 0.35);
    border-left-color: #60a5fa;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #60a5fa;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* Fixed to the viewport (not sticky within the scrolling panel) so both
   controls are visible immediately regardless of scroll position, rather
   than only appearing once scrolled past their place in the content. */
.transcript-controls[b-nmzd1tz25m] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 5;
}

.transcript-play-btn[b-nmzd1tz25m],
.transcript-resume-btn[b-nmzd1tz25m] {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.transcript-play-btn:hover[b-nmzd1tz25m],
.transcript-resume-btn:hover:not(:disabled)[b-nmzd1tz25m] {
    background: #1d4ed8;
}

.transcript-resume-btn[b-nmzd1tz25m] {
    padding: 0.5rem 1.25rem;
}

.transcript-resume-btn:disabled[b-nmzd1tz25m] {
    opacity: 0.4;
    cursor: default;
}

.transcript-play-btn[b-nmzd1tz25m] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.transcript-skip-btn[b-nmzd1tz25m] {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background 0.15s ease;
}

.transcript-skip-btn:hover[b-nmzd1tz25m] {
    background: #1d4ed8;
}

.transcript-skip-btn span[b-nmzd1tz25m] {
    font-size: 0.75rem;
    font-weight: 700;
}

.transcript-more-toggle-btn[b-nmzd1tz25m] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 999px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background 0.15s ease;
}

.transcript-more-toggle-btn:hover[b-nmzd1tz25m] {
    background: rgba(255, 255, 255, 0.22);
}

/* Skip back/forward and speed presets — collapsed by default (display: none)
   so the fixed bottom bar stays just Play/Resume/More wide and never wraps
   or overlaps on a phone screen. Resume Following stays on .transcript-controls
   itself rather than in here, since it needs to be reachable the instant the
   user scrolls away, not hidden behind a tap. Expanded by toggling .open (the
   More button's click handler, in TranscriptPanel.razor.js). Fixed and
   centered like .transcript-controls, stacked just above it rather than
   inline, and wraps onto a second line itself (flex-wrap) rather than
   overflowing off-screen if it's ever too wide for a narrow viewport. */
.transcript-extra-controls[b-nmzd1tz25m] {
    display: none;
    flex-wrap: wrap;
    position: fixed;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    z-index: 5;
    max-width: min(92vw, 24rem);
    background: rgba(15, 23, 42, 0.9);
    padding: 0.5rem;
    border-radius: 1.25rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.transcript-extra-controls.open[b-nmzd1tz25m] {
    display: flex;
}

.transcript-speed-btn[b-nmzd1tz25m] {
    background: transparent;
    color: #cbd5e1;
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.transcript-speed-btn:hover[b-nmzd1tz25m] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.transcript-speed-btn.active[b-nmzd1tz25m] {
    background: #2563eb;
    color: #fff;
}