@media (max-width: 1120px) {

    .ivf-nav {
        gap: 14px;
    }

    .ivf-nav-link {
        font-size: 0.82rem;
    }

    .ivf-header-live {
        display: none;
    }
}

@media (max-width: 920px) {

    :root {
        --ivf-header-height: 72px;
    }

    .ivf-header {
        position: relative;
    }

    .ivf-header-inner {
        justify-content: space-between;
    }

    .ivf-brand {
        position: relative;
        z-index: 104;
    }

    .ivf-header-actions {
        display: none;
    }

    .ivf-menu-toggle {
        position: relative;
        z-index: 104;

        display: block;

        margin-left: auto;
    }

    .ivf-nav {
        position: fixed;
        z-index: 103;

        top: 0;
        right: 0;

        width: min(86vw, 380px);
        height: 100dvh;

        margin: 0;
        padding:
            calc(var(--ivf-header-height) + 28px)
            28px
            40px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        background: var(--ivf-white);

        box-shadow:
            -20px 0 50px rgba(15, 23, 42, 0.16);

        transform: translateX(110%);

        transition:
            transform 220ms ease;
    }

    .ivf-nav.is-open {
        transform: translateX(0);
    }

    .ivf-nav-link {
        padding: 15px 4px;

        border-bottom: 1px solid var(--ivf-border);

        font-size: 1rem;
    }

    .ivf-nav-link.is-active::after {
        display: none;
    }

    .ivf-menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .ivf-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .ivf-menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }

    .ivf-hero {
        min-height: 570px;
    }

    .ivf-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 23, 43, 0.80) 0%,
                rgba(8, 33, 59, 0.62) 60%,
                rgba(8, 33, 59, 0.35) 100%
            );
    }
}

@media (max-width: 640px) {

    .ivf-container {
        width: min(
            calc(100% - 32px),
            var(--ivf-container)
        );
    }

    .ivf-brand-mark {
        width: 32px;
        height: 36px;
        flex-basis: 32px;
    }

    .ivf-cross-v {
        height: 34px;
        left: 13px;
    }

    .ivf-cross-h {
        width: 27px;
        left: 3px;
    }

    .ivf-brand-text strong {
        font-size: 0.88rem;
    }

    .ivf-brand-text small {
        font-size: 0.65rem;
    }

    .ivf-hero {
        min-height:
            calc(100svh - var(--ivf-header-height));

        align-items: flex-end;
    }

    .ivf-hero-background {
        background-position: center center;
    }

    .ivf-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 23, 43, 0.26) 0%,
                rgba(5, 23, 43, 0.52) 36%,
                rgba(5, 23, 43, 0.90) 100%
            );
    }

    .ivf-hero-inner {
        padding-top: 120px;
        padding-bottom: 48px;
    }

    .ivf-hero h1 {
        font-size: clamp(2.45rem, 13vw, 3.55rem);
        line-height: 0.98;
    }

    .ivf-hero-subtitle {
        font-size: 1.13rem;
    }

    .ivf-hero-verse {
        margin-top: 23px;
    }

    .ivf-hero-verse p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .ivf-hero-actions {
        align-items: stretch;
        flex-direction: column;

        margin-top: 27px;
    }

    .ivf-hero-actions .ivf-button {
        width: 100%;
    }
}

@media (max-width: 390px) {

    .ivf-brand-text small {
        display: none;
    }

    .ivf-brand-text strong {
        max-width: 190px;
    }
}


/* ==========================================================
   IVF V1.0.3 ACCESOS RESPONSIVE
   ========================================================== */

@media (max-width: 920px) {

    .ivf-access-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .ivf-quick-access {
        padding:
            52px 0 58px;
    }

    .ivf-section-heading {
        margin-bottom: 28px;
    }

    .ivf-section-heading p {
        font-size: 0.94rem;
    }

    .ivf-access-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ivf-access-card {
        min-height: 118px;

        grid-template-columns:
            52px minmax(0, 1fr) 20px;

        gap: 14px;

        padding: 18px 16px;
    }

    .ivf-access-icon {
        width: 52px;
        height: 52px;

        border-radius: 14px;
    }

    .ivf-access-icon svg {
        width: 28px;
        height: 28px;
    }
}


/* ==========================================================
   IVF V1.0.4 LIVE RESPONSIVE
   ========================================================== */

@media (max-width: 920px) {

    .ivf-live-card {
        grid-template-columns: 1fr;
    }

    .ivf-live-info {
        padding: 32px;
    }
}

@media (max-width: 640px) {

    .ivf-live-section {
        padding: 58px 0 64px;
    }

    .ivf-live-heading {
        margin-bottom: 28px;
    }

    .ivf-live-card {
        border-radius: 16px;
    }

    .ivf-live-info {
        padding: 25px 20px;
    }

    .ivf-live-play {
        width: 66px;
        height: 66px;

        font-size: 1.3rem;
    }

    .ivf-live-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ivf-live-actions .ivf-button {
        width: 100%;
    }

    .ivf-live-note {
        align-items: flex-start;
    }
}


/* ==========================================================
   IVF V1.0.5 PREDICACIONES RESPONSIVE
   ========================================================== */

@media (max-width: 920px) {

    .ivf-sermons-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .ivf-sermons-section {
        padding: 58px 0 64px;
    }

    .ivf-sermons-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .ivf-sermons-empty {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 26px 21px;

        text-align: center;
    }

    .ivf-sermons-empty-icon {
        width: 88px;
        height: 88px;

        margin: 0 auto;

        border-radius: 20px;
    }

    .ivf-sermons-empty-icon svg {
        width: 44px;
        height: 44px;
    }

    .ivf-sermon-content {
        padding: 19px;
    }
}


/* ==========================================================
   IVF V1.0.6 RADIO RESPONSIVE
   ========================================================== */

@media (max-width: 920px) {

    .ivf-radio-shell {
        grid-template-columns: 1fr;
    }

    .ivf-radio-visual {
        min-height: 320px;
    }

    .ivf-radio-content {
        padding: 38px 34px;
    }
}

@media (max-width: 640px) {

    .ivf-radio-section {
        padding: 60px 0 64px;
    }

    .ivf-radio-shell {
        border-radius: 16px;
    }

    .ivf-radio-visual {
        min-height: 270px;
    }

    .ivf-radio-logo {
        width: 100px;
        height: 100px;
    }

    .ivf-radio-logo svg {
        width: 54px;
        height: 54px;
    }

    .ivf-radio-content {
        padding: 28px 21px;
    }

    .ivf-radio-player {
        grid-template-columns:
            52px minmax(0, 1fr);
    }

    .ivf-radio-bars {
        display: none;
    }

    .ivf-radio-actions {
        flex-direction: column;
    }

    .ivf-radio-actions .ivf-button {
        width: 100%;
    }
}


/* ==========================================================
   IVF V1.0.7 DONATIONS RESPONSIVE
   ========================================================== */

@media (max-width: 1050px) {

    .ivf-donation-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .ivf-donations-section {
        padding: 62px 0 66px;
    }

    .ivf-donations-intro {
        margin-bottom: 30px;
    }

    .ivf-donation-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .ivf-donation-method {
        padding: 20px;
    }

    .ivf-donation-message {
        align-items: flex-start;

        padding: 17px;
    }
}


/* ==========================================================
   IVF DONATION MOBILE ICON FIX 1.0.10D.1
   Scope: solo iconos de métodos de donación en móvil.
   ========================================================== */

@media (max-width: 640px) {

    .ivf-donation-method .ivf-donation-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 48px !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        overflow: hidden;
    }

    .ivf-donation-method .ivf-donation-icon svg {
        display: block !important;

        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;

        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;

        flex: 0 0 26px !important;
    }
}



/* ==========================================================
   IVF MOBILE DONATIONS + FORM FIX 1.0.10E.1

   Scope:
   - Donaciones móvil
   - Formulario móvil
   - Prevención de overflow horizontal local
   - NO header / NO hamburger
   ========================================================== */

@media (max-width: 640px) {

    /* ------------------------------------------------------
       DONACIONES
       ------------------------------------------------------ */

    .ivf-donation-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
    }

    .ivf-donation-method {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-donation-method-copy,
    .ivf-donation-name-row {
        min-width: 0;
        max-width: 100%;
    }

    .ivf-donation-method .ivf-donation-icon {
        box-sizing: border-box;

        flex: 0 0 48px !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        padding: 0 !important;

        overflow: hidden;
    }

    .ivf-donation-method .ivf-donation-icon svg {
        display: block !important;

        flex: 0 0 26px !important;

        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;

        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;

        margin: 0 !important;
    }

    .ivf-donation-name-row h3,
    .ivf-donation-method-copy p,
    .ivf-donation-pending,
    .ivf-donation-link,
    .ivf-zelle-details,
    .ivf-zelle-details strong {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* ------------------------------------------------------
       FORMULARIO
       ------------------------------------------------------ */

    .ivf-form,
    .ivf-form-grid,
    .ivf-form-field,
    .ivf-form-group,
    .ivf-form-row {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ivf-form input,
    .ivf-form select,
    .ivf-form textarea {
        box-sizing: border-box;

        display: block;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .ivf-form textarea {
        resize: vertical;
    }


    /* ------------------------------------------------------
       CONSENTIMIENTOS
       ------------------------------------------------------ */

    .ivf-consent,
    .ivf-form-consent {
        box-sizing: border-box;

        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-consent label,
    .ivf-form-consent label {
        min-width: 0;
        max-width: 100%;

        overflow-wrap: anywhere;
    }

    .ivf-consent input[type="checkbox"],
    .ivf-form-consent input[type="checkbox"] {
        display: inline-block;

        width: auto !important;
        min-width: auto !important;
        max-width: none !important;

        flex: 0 0 auto;
    }

    .ivf-consent a,
    .ivf-form-consent a {
        overflow-wrap: anywhere;
    }
}


/* ==========================================================
   IVF VISITOR MOBILE ROOT FIX 1.0.10E.4

   SCOPE:
   - SOLO formulario visitante móvil.
   - Corrige el grid PADRE .ivf-visitor-layout.
   - NO donaciones.
   - NO iconos.
   - NO header.
   - NO hamburger.
   ========================================================== */

@media (max-width: 900px) {

    /*
     * El layout desktop usa:
     *
     * minmax(0, .85fr)
     * minmax(420px, 1.15fr)
     *
     * En móvil/tablet debe convertirse en una sola columna.
     */
    .ivf-visitor-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;

        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-visitor-copy,
    .ivf-form-card,
    .ivf-visitor-form {
        box-sizing: border-box;

        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-visitor-copy,
    .ivf-form-card {
        justify-self: stretch;
    }
}


@media (max-width: 700px) {

    .ivf-form-card {
        padding: 18px;
        border-radius: 14px;
    }

    /*
     * País + Cómo nos conociste
     * pasan definitivamente a una columna.
     */
    .ivf-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-form-field {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-form-field input,
    .ivf-form-field select,
    .ivf-form-field textarea {
        box-sizing: border-box;

        display: block;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        /*
         * Mejora móvil:
         * evita zoom automático de controles
         * en navegadores que lo aplican.
         */
        font-size: 16px;
    }

    .ivf-form-submit {
        box-sizing: border-box;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        justify-content: center;
    }

    /*
     * Consentimientos:
     * permitir que todo el texto se adapte
     * al ancho disponible.
     */
    .ivf-consent-group,
    .ivf-consent,
    .ivf-consent > span,
    .ivf-family-note {
        min-width: 0;
        max-width: 100%;
    }

    .ivf-consent > span,
    .ivf-family-note {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .ivf-consent input[type="checkbox"] {
        flex: 0 0 auto;

        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
    }
}


/* ==========================================================
   IVF DONATION MOBILE SLIDER CSS 1.0.10F.1

   Desktop:
   - conserva el grid actual.

   Mobile <=640px:
   - una tarjeta por vista.
   - swipe horizontal nativo.
   - scroll snap.
   - flechas + indicadores.

   IMPORTANTE:
   - NO modifica tamaños de iconos.
   ========================================================== */

.ivf-donation-slider {
    position: relative;
    z-index: 1;
}

.ivf-donation-slider-viewport {
    min-width: 0;
}

.ivf-donation-slider-controls {
    display: none;
}


@media (max-width: 640px) {

    .ivf-donation-slider {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-donation-slider-viewport {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        overflow: hidden;
    }

    /*
     * Sobrescribe únicamente el layout del grid.
     * Las tarjetas y sus iconos conservan su diseño actual.
     */
    .ivf-donation-slider .ivf-donation-grid {
        display: flex;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        overscroll-behavior-x: contain;
    }

    .ivf-donation-slider .ivf-donation-grid::-webkit-scrollbar {
        display: none;
    }

    .ivf-donation-slider .ivf-donation-method {
        /*
         * Una tarjeta ocupa exactamente el viewport
         * interno del slider.
         */
        flex: 0 0 100%;

        width: 100%;
        min-width: 100%;
        max-width: 100%;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .ivf-donation-slider-controls {
        margin-top: 16px;

        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;

        gap: 12px;
    }

    .ivf-donation-slider-arrow {
        appearance: none;
        -webkit-appearance: none;

        width: 42px;
        height: 42px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        color: #fff;
        background: rgba(255, 255, 255, 0.10);

        border:
            1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;

        cursor: pointer;

        transition:
            opacity var(--ivf-transition),
            background var(--ivf-transition),
            transform var(--ivf-transition);
    }

    .ivf-donation-slider-arrow span {
        display: block;

        font-size: 2rem;
        line-height: 1;

        transform: translateY(-1px);
    }

    .ivf-donation-slider-arrow:active {
        transform: scale(0.94);
    }

    .ivf-donation-slider-arrow:disabled {
        opacity: 0.32;
        cursor: default;
    }

    .ivf-donation-slider-dots {
        min-width: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 8px;
    }

    .ivf-donation-slider-dot {
        appearance: none;
        -webkit-appearance: none;

        width: 8px;
        height: 8px;

        flex: 0 0 8px;

        padding: 0;

        background:
            rgba(255, 255, 255, 0.30);

        border: 0;
        border-radius: 999px;

        cursor: pointer;

        transition:
            width var(--ivf-transition),
            background var(--ivf-transition),
            opacity var(--ivf-transition);
    }

    .ivf-donation-slider-dot.is-active {
        width: 22px;
        flex-basis: 22px;

        background: #8fc5ff;
    }

    .ivf-donation-slider-dot:focus-visible,
    .ivf-donation-slider-arrow:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }
}


/* ==========================================================
   IVF ACCESS MOBILE SLIDER CSS 1.0.10G.1

   Desktop >640px:
   - conserva grid existente.
   - 3 columnas desktop.
   - 2 columnas tablet.

   Mobile <=640px:
   - una tarjeta por vista.
   - swipe horizontal.
   - scroll snap.
   - flechas.
   - indicadores.
   - sin autoplay.

   NO modifica:
   - iconos.
   - contenido.
   - enlaces.
   ========================================================== */

.ivf-access-slider {
    min-width: 0;
}

.ivf-access-slider-viewport {
    min-width: 0;
}

.ivf-access-slider-controls {
    display: none;
}


@media (max-width: 640px) {

    .ivf-access-slider {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ivf-access-slider-viewport {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        overflow: hidden;
    }

    /*
     * Sobrescribe el grid de una columna únicamente
     * dentro del slider móvil.
     */
    .ivf-access-slider .ivf-access-grid {
        display: flex;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        overscroll-behavior-x: contain;
    }

    .ivf-access-slider .ivf-access-grid::-webkit-scrollbar {
        display: none;
    }

    .ivf-access-slider .ivf-access-card {
        flex: 0 0 100%;

        width: 100%;
        min-width: 100%;
        max-width: 100%;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .ivf-access-slider-controls {
        margin-top: 16px;

        display: grid;
        grid-template-columns:
            42px minmax(0, 1fr) 42px;

        align-items: center;

        gap: 12px;
    }

    .ivf-access-slider-arrow {
        appearance: none;
        -webkit-appearance: none;

        width: 42px;
        height: 42px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        color: var(--ivf-blue);
        background: var(--ivf-white);

        border: 1px solid var(--ivf-border);
        border-radius: 999px;

        box-shadow:
            0 6px 18px rgba(15, 23, 42, 0.07);

        cursor: pointer;

        transition:
            opacity var(--ivf-transition),
            transform var(--ivf-transition),
            border-color var(--ivf-transition);
    }

    .ivf-access-slider-arrow span {
        display: block;

        font-size: 2rem;
        line-height: 1;

        transform: translateY(-1px);
    }

    .ivf-access-slider-arrow:active {
        transform: scale(0.94);
    }

    .ivf-access-slider-arrow:disabled {
        opacity: 0.32;
        cursor: default;
    }

    .ivf-access-slider-dots {
        min-width: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 7px;
    }

    .ivf-access-slider-dot {
        appearance: none;
        -webkit-appearance: none;

        width: 8px;
        height: 8px;

        flex: 0 0 8px;

        padding: 0;

        background: #cbd5e1;

        border: 0;
        border-radius: 999px;

        cursor: pointer;

        transition:
            width var(--ivf-transition),
            background var(--ivf-transition);
    }

    .ivf-access-slider-dot.is-active {
        width: 22px;
        flex-basis: 22px;

        background: var(--ivf-blue);
    }

    .ivf-access-slider-dot:focus-visible,
    .ivf-access-slider-arrow:focus-visible {
        outline:
            2px solid var(--ivf-blue);
        outline-offset: 3px;
    }
}


/* ==========================================================
   IVF ACCESS CARD VISUAL POLISH 1.0.10G.2

   Scope:
   - SOLO móvil <=640px.
   - SOLO apariencia de las tarjetas de Encuentra tu lugar.
   - NO modifica dimensiones del slider.
   - NO modifica iconos.
   - NO modifica enlaces.
   - NO modifica JS.
   ========================================================== */

@media (max-width: 640px) {

    .ivf-access-slider .ivf-access-card {
        background:
            linear-gradient(
                145deg,
                #ffffff 0%,
                #f7fbff 100%
            );

        border-color:
            rgba(13, 110, 253, 0.14);

        box-shadow:
            0 14px 34px rgba(15, 23, 42, 0.085),
            0 3px 9px rgba(13, 110, 253, 0.055);
    }

    /*
     * La tarjeta ya tenía este ::before.
     * En escritorio continúa respondiendo al hover.
     * En móvil queda visible como acento permanente.
     */
    .ivf-access-slider .ivf-access-card::before {
        opacity: 1;

        background:
            linear-gradient(
                180deg,
                var(--ivf-blue) 0%,
                #60a5fa 100%
            );
    }

    /*
     * Un poco más de separación visual del icono
     * sin cambiar sus dimensiones actuales.
     */
    .ivf-access-slider .ivf-access-icon {
        background:
            linear-gradient(
                145deg,
                #eaf4ff 0%,
                #f7fbff 100%
            );

        box-shadow:
            inset 0 0 0 1px
            rgba(13, 110, 253, 0.055);
    }

    /*
     * Flecha interna de la tarjeta:
     * más integrada con la identidad azul.
     */
    .ivf-access-slider .ivf-access-arrow {
        color:
            rgba(13, 110, 253, 0.52);
    }
}


/* ==========================================================
   IVF_SERMON_CAROUSEL_13B
   Mobile only
   Desktop remains original grid.
   ========================================================== */

@media (max-width: 640px) {

    .ivf-sermons-grid[data-sermons-carousel] {
        display: flex;

        width: 100%;

        gap: 14px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        padding: 3px 1px 10px;
    }

    .ivf-sermons-grid[data-sermons-carousel]::-webkit-scrollbar {
        display: none;
    }

    .ivf-sermons-grid[data-sermons-carousel]
    .ivf-sermon-card {
        flex:
            0 0
            calc(100% - 2px);

        width:
            calc(100% - 2px);

        max-width:
            calc(100% - 2px);

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .ivf-sermons-carousel-controls {
        margin-top: 17px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 15px;
    }

    .ivf-sermons-carousel-arrow {
        width: 38px;
        height: 38px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        color: var(--ivf-blue);
        background: #fff;

        border:
            1px solid
            rgba(13, 110, 253, 0.16);

        border-radius: 50%;

        box-shadow:
            0 6px 18px
            rgba(15, 23, 42, 0.07);

        font-size: 1.55rem;
        line-height: 1;

        cursor: pointer;
    }

    .ivf-sermons-carousel-arrow:disabled {
        opacity: 0.38;
        cursor: default;
    }

    .ivf-sermons-carousel-dots {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 7px;
    }

    .ivf-sermons-carousel-dot {
        width: 7px;
        height: 7px;

        padding: 0;

        background: #cbd5e1;
        border: 0;
        border-radius: 50%;

        cursor: pointer;

        transition:
            width 180ms ease,
            background 180ms ease;
    }

    .ivf-sermons-carousel-dot.is-active {
        width: 20px;

        background: var(--ivf-blue);

        border-radius: 999px;
    }


    /* Social widget mobile */

    .ivf-social-widget {
        top: auto;
        right: 10px;
        bottom: 18px;

        transform: none;

        align-items: flex-end;
    }

    .ivf-social-toggle {
        min-width: 52px;
        min-height: 52px;

        width: 52px;
        height: 52px;

        padding: 0;

        border-radius: 50%;

        box-shadow:
            0 10px 28px
            rgba(13, 110, 253, 0.28);
    }

    .ivf-social-toggle-text {
        display: none;
    }

    .ivf-social-panel {
        width: min(
            220px,
            calc(100vw - 82px)
        );

        margin-right: 9px;
        margin-bottom: 0;

        padding: 13px;

        border-radius: 16px;
    }

    .ivf-social-panel-head {
        margin-bottom: 10px;
    }

    .ivf-social-link {
        min-height: 45px;
    }
}



/* ==========================================================
   IVF_MOBILE_VISUAL_REPAIR_13B3

   Scope:
   - Social widget mobile only
   - Sermon carousel controls mobile only
   - Desktop untouched
   ========================================================== */

@media (max-width: 640px) {

    /* ======================================================
       SOCIAL FLOATING WIDGET
       ====================================================== */

    body .ivf-social-widget {
        position: fixed !important;

        top: auto !important;
        left: auto !important;
        right: 14px !important;
        bottom: 18px !important;

        z-index: 999 !important;

        width: auto !important;
        height: auto !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body .ivf-social-widget
    .ivf-social-toggle {
        appearance: none !important;
        -webkit-appearance: none !important;

        position: relative !important;

        flex: 0 0 54px !important;

        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;

        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #fff !important;

        background:
            linear-gradient(
                145deg,
                #1976ff 0%,
                #0758cf 100%
            ) !important;

        border: 0 !important;
        border-radius: 50% !important;

        box-shadow:
            0 10px 28px
            rgba(13, 110, 253, .30) !important;

        cursor: pointer !important;
    }

    body .ivf-social-widget
    .ivf-social-toggle svg {
        display: block !important;

        flex: 0 0 23px !important;

        width: 23px !important;
        min-width: 23px !important;
        max-width: 23px !important;

        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;

        margin: 0 !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.9 !important;

        overflow: visible !important;
    }

    body .ivf-social-widget
    .ivf-social-toggle-text {
        display: none !important;
    }

    body .ivf-social-widget:not(.is-open)
    .ivf-social-toggle-close {
        display: none !important;
    }

    body .ivf-social-widget:not(.is-open)
    .ivf-social-toggle-share {
        display: block !important;
    }

    body .ivf-social-widget.is-open
    .ivf-social-toggle-share {
        display: none !important;
    }

    body .ivf-social-widget.is-open
    .ivf-social-toggle-close {
        display: block !important;
    }


    /* ------------------------------------------------------
       SOCIAL OPEN PANEL
       ------------------------------------------------------ */

    body .ivf-social-widget
    .ivf-social-panel {
        position: absolute !important;

        right: 0 !important;
        bottom: 66px !important;

        width: 218px !important;
        min-width: 0 !important;
        max-width:
            calc(100vw - 28px) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height:
            calc(100vh - 110px) !important;

        overflow: auto !important;

        margin: 0 !important;
        padding: 14px !important;

        color: #172033 !important;
        background: #fff !important;

        border:
            1px solid
            rgba(15, 23, 42, .09) !important;

        border-radius: 17px !important;

        box-shadow:
            0 18px 46px
            rgba(15, 23, 42, .20) !important;
    }

    body .ivf-social-widget
    .ivf-social-panel[hidden] {
        display: none !important;
    }

    body .ivf-social-widget
    .ivf-social-panel-head {
        display: block !important;

        margin: 0 0 11px !important;
        padding: 0 !important;
    }

    body .ivf-social-widget
    .ivf-social-panel-head strong {
        display: block !important;

        margin: 0 !important;

        font-size: .94rem !important;
        line-height: 1.25 !important;
        font-weight: 850 !important;
    }

    body .ivf-social-widget
    .ivf-social-panel-head span {
        display: block !important;

        margin: 3px 0 0 !important;

        color: #718096 !important;

        font-size: .72rem !important;
        line-height: 1.35 !important;
    }

    body .ivf-social-widget
    .ivf-social-links {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body .ivf-social-widget
    .ivf-social-link {
        appearance: none !important;
        -webkit-appearance: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;

        gap: 10px !important;

        margin: 0 !important;
        padding: 7px 10px !important;

        color: #172033 !important;
        background: #f8fafc !important;

        border:
            1px solid
            #e7edf5 !important;

        border-radius: 12px !important;

        font-size: .80rem !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;

        text-decoration: none !important;
    }

    body .ivf-social-widget
    .ivf-social-icon {
        flex: 0 0 31px !important;

        width: 31px !important;
        min-width: 31px !important;
        max-width: 31px !important;

        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 9px !important;

        overflow: hidden !important;
    }

    body .ivf-social-widget
    .ivf-social-icon svg {
        display: block !important;

        flex: 0 0 19px !important;

        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;

        height: 19px !important;
        min-height: 19px !important;
        max-height: 19px !important;

        margin: 0 !important;
    }


    /* ======================================================
       SERMON MOBILE CAROUSEL
       ====================================================== */

    body .ivf-sermons-section
    .ivf-sermons-grid[data-sermons-carousel] {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        margin: 0 !important;

        padding:
            2px
            1px
            10px !important;

        scroll-snap-type:
            x mandatory !important;

        scroll-behavior:
            smooth !important;

        scrollbar-width:
            none !important;

        -webkit-overflow-scrolling:
            touch;
    }

    body .ivf-sermons-section
    .ivf-sermons-grid[data-sermons-carousel]
    .ivf-sermon-card {
        flex:
            0 0
            calc(100% - 2px) !important;

        width:
            calc(100% - 2px) !important;

        min-width:
            calc(100% - 2px) !important;

        max-width:
            calc(100% - 2px) !important;

        margin: 0 !important;

        scroll-snap-align:
            start !important;

        scroll-snap-stop:
            always !important;
    }


    /* ------------------------------------------------------
       CAROUSEL CONTROLS
       ------------------------------------------------------ */

    body .ivf-sermons-section
    .ivf-sermons-carousel-controls {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 14px !important;

        margin: 18px 0 0 !important;
        padding: 0 !important;
    }

    body .ivf-sermons-section
    .ivf-sermons-carousel-arrow {
        appearance: none !important;
        -webkit-appearance: none !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 0 3px !important;

        color: #0d6efd !important;
        background: #fff !important;

        border:
            1px solid
            rgba(13, 110, 253, .20) !important;

        border-radius: 50% !important;

        box-shadow:
            0 6px 18px
            rgba(15, 23, 42, .08) !important;

        font-family:
            Arial,
            sans-serif !important;

        font-size: 1.55rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;

        cursor: pointer !important;
    }

    body .ivf-sermons-section
    .ivf-sermons-carousel-arrow:disabled {
        opacity: .34 !important;
    }

    body .ivf-sermons-section
    .ivf-sermons-carousel-dots {
        min-height: 40px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body .ivf-sermons-section
    .ivf-sermons-carousel-dot {
        appearance: none !important;
        -webkit-appearance: none !important;

        flex: 0 0 8px !important;

        width: 8px !important;
        min-width: 8px !important;
        max-width: 8px !important;

        height: 8px !important;
        min-height: 8px !important;
        max-height: 8px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #cbd5e1 !important;

        border: 0 !important;
        border-radius: 999px !important;

        box-shadow: none !important;

        cursor: pointer !important;
    }

    body .ivf-sermons-section
    .ivf-sermons-carousel-dot.is-active {
        flex-basis: 22px !important;

        width: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;

        background:
            #0d6efd !important;
    }

}



/* ==========================================================
   IVF_SOCIAL_MOBILE_RAISE_13B6
   Visual position adjustment only.
   Desktop untouched.
   ========================================================== */

@media (max-width: 640px) {

    body .ivf-social-widget {
        bottom: 240px !important;
    }

}