/* /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/Admin/ScramblePhotos.razor.rz.scp.css */
.admin-photo-thumb[b-6y2kua3kb5] {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.admin-photo-card[b-6y2kua3kb5] {
    cursor: grab;
}

.admin-photo-card.is-dragging[b-6y2kua3kb5] {
    opacity: .4;
}
/* /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: 0.75rem;
}

.start-giving-mission[b-19it3s5x5q] {
    text-align: center;
    font-size: 1.05rem;
    color: #374151;
    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-year[b-y4nbcoswa9] {
    margin-top: 2rem;
    margin-bottom: 0;
}

.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).
   The sidebar is pinned to the viewport and scrolls its series list on its own, so
   finding a series never means scrolling past the whole editor. */

.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;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

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

.series-search[b-mxehnffkcw] {
    margin-bottom: 0.75rem;
    flex: 0 0 auto;
}

.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.3rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Room for the drop-target outline, which overflow would otherwise clip. */
    padding: 3px;
}

.series-item[b-mxehnffkcw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    flex: 0 0 auto;
    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.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 .move-top-btn[b-mxehnffkcw] {
    color: rgba(255, 255, 255, 0.8);
}

.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-title[b-mxehnffkcw] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.move-top-btn[b-mxehnffkcw],
.move-top-spacer[b-mxehnffkcw] {
    flex: 0 0 1.75rem;
    width: 1.75rem;
}

.move-top-btn[b-mxehnffkcw] {
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6c757d;
    line-height: 1;
}

.move-top-btn:hover[b-mxehnffkcw],
.move-top-btn:focus-visible[b-mxehnffkcw] {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.series-item.selected .move-top-btn:hover[b-mxehnffkcw] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.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;
        position: static;
        height: auto;
    }

    .series-list[b-mxehnffkcw] {
        max-height: 40vh;
    }

    .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 */
/* Stock Bootstrap 5 classes, recolored from Bootstrap blue to the church site's
   navy (wwwroot/css/church.css) so the page sits inside that design rather than
   looking like the separate app it was first embedded from. */

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

/* app.css gives the body the scramble pages' sand color; the church pages are white. */
.sermons-page[b-pqr0xw692a] {
    background: #fff;
}

/* The page title in the church site's heading style, on a faint navy band that
   sets it apart from the tabs and cards below. */
.sermons-heading[b-pqr0xw692a] {
    padding: clamp(40px, 6vw, 80px) 16px clamp(32px, 5vw, 56px);
    margin-bottom: clamp(24px, 4vw, 40px);
    text-align: center;
    background: linear-gradient(180deg, #eef1f9 0%, #f5f6fb 100%);
    border-bottom: 1px solid #dfe2ec;
}

.sermons-heading h1[b-pqr0xw692a] {
    font-family: "Bodoni Moda", Didot, "Times New Roman", serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.3rem, 5.5vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #0a1445;
    margin: 0;
}

/* app.css sets a green serif h1/h2/h3 and green .btn-primary/.text-primary
   site-wide for the scramble pages; the rest of this page keeps a plain sans-serif. */
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: #0b1b6b;
    border-color: #0b1b6b;
}

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

.btn:focus[b-pqr0xw692a], .btn:active:focus[b-pqr0xw692a] {
    box-shadow: 0 0 0 .25rem rgba(11, 27, 107, .25);
}

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

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

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

.page-link[b-pqr0xw692a] {
    color: #0b1b6b;
}

.page-item.active .page-link[b-pqr0xw692a] {
    color: #fff;
    background-color: #0b1b6b;
    border-color: #0b1b6b;
}

.nav-tabs .nav-link[b-pqr0xw692a] {
    color: #4a5280;
}

.nav-tabs .nav-link:hover[b-pqr0xw692a] {
    color: #0b1b6b;
}

.nav-tabs .nav-link.active[b-pqr0xw692a] {
    color: #0b1b6b;
    font-weight: 600;
}

.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);
}

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

/* Square art on series and sermon cards, so every card in a grid row lines up.
   Without a thumbnail, the tile shows the brand monogram over the navy gradient. */
.card-art[b-pqr0xw692a] {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
}

.card-art-placeholder[b-pqr0xw692a] {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(160deg, #0b1b6b, #0a1445);
    color: #fff;
    text-align: center;
}

.card-art-logo[b-pqr0xw692a] {
    width: 35%;
    opacity: 0.9;
}

.card-art-title[b-pqr0xw692a] {
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Expanded player panel ------------------------------------------------ */

/* Sits just above the site-wide bar (wwwroot/css/sermon-player.css), which owns
   the audio, so collapsing or leaving the panel never stops playback. */
.player-panel[b-pqr0xw692a] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 4.5rem;
    z-index: 1000;
    height: calc(100dvh - 4.5rem);
    color: #fff;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    overflow: hidden;
}

.player-panel.collapsed[b-pqr0xw692a] {
    display: none;
}

.player-panel-main[b-pqr0xw692a] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 1rem;
    text-align: center;
}

.player-panel-transcript[b-pqr0xw692a] {
    min-height: 0;
    display: none;
}

/* Phones: the transcript slides up as a sheet over the player. */
.player-panel-transcript.open[b-pqr0xw692a] {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    border-radius: 1rem 1rem 0 0;
    background: #0b1224;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45);
    animation: sheet-up-b-pqr0xw692a 0.25s ease-out;
}

@keyframes sheet-up-b-pqr0xw692a {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* Desktop: the player fills the screen like it does on mobile, and the transcript
   is a side column next to the audio controls. */
@media (min-width: 992px) {
    .player-panel[b-pqr0xw692a] {
        flex-direction: row;
    }

    .player-panel-transcript.open[b-pqr0xw692a] {
        position: static;
        width: 40%;
        height: auto;
        border-radius: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-panel-transcript.open[b-pqr0xw692a] {
        animation: none;
    }
}

/* Player contents ------------------------------------------------------ */

.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);
}

.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-scrubber[b-pqr0xw692a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 30rem;
    margin: 1.5rem auto 0;
}

.player-seek[b-pqr0xw692a] {
    flex: 1 1 auto;
    accent-color: #2563eb;
}

.player-time[b-pqr0xw692a] {
    flex: 0 0 auto;
    min-width: 3.25rem;
    color: #94a3b8;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.player-controls[b-pqr0xw692a] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    max-width: 30rem;
    margin: 1.25rem auto 0;
}

.player-share[b-pqr0xw692a] {
    margin-top: 1rem;
}

.player-share-start[b-pqr0xw692a] {
    display: inline-block;
    margin: 0.5rem 0 0 1rem;
    color: #cbd5e1;
}

.player-play-prompt[b-pqr0xw692a] {
    display: block;
    width: 100%;
    max-width: 30rem;
    margin: 1.5rem auto 0;
    border-radius: 999px;
    font-weight: 600;
}

.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;
}

.play-btn[b-pqr0xw692a] {
    padding: 0.5rem 1.1rem;
    background: #2563eb;
    border-color: #2563eb;
    font-size: 1.25rem;
    line-height: 1;
}

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

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

/* /Components/Pages/Sermons/TranscriptPanel.razor.rz.scp.css */
/* Fills the transcript slot in the docked player (Listen.razor sizes that slot for
   the side panel on desktop and the sheet on mobile). This element is the scroll
   container, so the controls below can stick to its top. */
.transcript-panel[b-nmzd1tz25m] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 1rem 1.25rem 2rem;
    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;
}

/* Sticky to the top of the transcript's scroll container, so both controls stay
   reachable regardless of scroll position without floating over the page. */
.transcript-controls[b-nmzd1tz25m] {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0 0.75rem;
    background: #0f172a;
    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 sticky control bar stays just Play/Resume/More wide. Resume Following stays
   on .transcript-controls itself rather than in here, since it needs to be
   reachable the instant the user scrolls away. Expanded by toggling .open (the
   More button's click handler, in TranscriptPanel.razor.js). Sticky just under
   the control bar, and wraps onto a second line (flex-wrap) on narrow screens. */
.transcript-extra-controls[b-nmzd1tz25m] {
    display: none;
    flex-wrap: wrap;
    position: sticky;
    top: 3.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    z-index: 4;
    background: rgba(15, 23, 42, 0.95);
    padding: 0.5rem;
    border-radius: 1.25rem;
    margin: 0 auto 0.5rem;
    max-width: 100%;
}

.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;
}