/* ==========================================================================
   LCDP PUBLIC SITE DESIGN SYSTEM
   Lucho's World V3
   ========================================================================== */


/* ==========================================================================
   THEME
   ========================================================================== */


html, 
body > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

:root {
    --lcdp-bg: #f5f6f8;
    --lcdp-surface: #ffffff;
    --lcdp-surface-soft: #f8fafc;

    --lcdp-dark: #0d1726;
    --lcdp-dark-soft: #182334;

    --lcdp-text: #172033;
    --lcdp-text-muted: #6c7480;

    --lcdp-border: #e6e9ee;

    --lcdp-primary: #2563eb;
    --lcdp-primary-hover: #1d4ed8;

    --lcdp-radius-sm: 12px;
    --lcdp-radius-md: 18px;
    --lcdp-radius-lg: 24px;
    --lcdp-radius-xl: 30px;

    --lcdp-shadow-sm:
        0 4px 14px rgba(15, 23, 42, 0.06);

    --lcdp-shadow-md:
        0 12px 32px rgba(15, 23, 42, 0.10);

    --lcdp-shadow-lg:
        0 20px 50px rgba(15, 23, 42, 0.14);

    --lcdp-container-width: 1280px;

    --lcdp-transition:
        180ms ease;
}


/* ==========================================================================
   GLOBAL
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--lcdp-bg);
    color: var(--lcdp-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    overflow: hidden;
}

img {
    max-width: 100%;
}

a {
    transition:
        color var(--lcdp-transition),
        background-color var(--lcdp-transition),
        opacity var(--lcdp-transition),
        transform var(--lcdp-transition);
}


/* ==========================================================================
   SHARED PUBLIC CONTAINER
   ========================================================================== */

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

    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   SHARED SECTIONS
   ========================================================================== */

.lcdp-section {
    position: relative;

    padding: 72px 0;
}

.lcdp-section-white {
    background: var(--lcdp-surface);
}

.lcdp-section-soft {
    background: var(--lcdp-surface-soft);
}

.lcdp-section-dark {
    background: var(--lcdp-dark);
    color: #ffffff;
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.lcdp-eyebrow {
    margin-bottom: 8px;

    color: var(--lcdp-primary);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.lcdp-section-title {
    margin: 0;

    color: var(--lcdp-text);

    font-size: clamp(1.8rem, 4vw, 2.65rem);
    font-weight: 750;

    line-height: 1.1;
}

.lcdp-section-subtitle {
    max-width: 680px;

    margin-top: 12px;
    margin-bottom: 0;

    color: var(--lcdp-text-muted);

    font-size: 1rem;

    line-height: 1.65;
}


/* ==========================================================================
   SHARED CARDS
   ========================================================================== */

.lcdp-card {
    position: relative;

    overflow: hidden;

    background: var(--lcdp-surface);

    border: 1px solid var(--lcdp-border);
    border-radius: var(--lcdp-radius-md);

    box-shadow: var(--lcdp-shadow-sm);

    transition:
        transform var(--lcdp-transition),
        box-shadow var(--lcdp-transition);
}

.lcdp-card:hover {
    transform: translateY(-2px);

    box-shadow: var(--lcdp-shadow-md);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.lcdp-btn {
    display: inline-flex;

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

    gap: 8px;

    min-height: 46px;

    padding: 10px 20px;

    border: 0;
    border-radius: 999px;

    font-size: 0.95rem;
    font-weight: 650;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform var(--lcdp-transition),
        background-color var(--lcdp-transition),
        color var(--lcdp-transition),
        box-shadow var(--lcdp-transition);
}

.lcdp-btn:hover {
    transform: translateY(-1px);
}

.lcdp-btn-primary {
    background: var(--lcdp-primary);
    color: #ffffff;
}

.lcdp-btn-primary:hover {
    background: var(--lcdp-primary-hover);
    color: #ffffff;
}

.lcdp-btn-light {
    background: #ffffff;
    color: var(--lcdp-text);
}

.lcdp-btn-dark {
    background: var(--lcdp-dark);
    color: #ffffff;
}


/* ==========================================================================
   GLOBAL PUBLIC FORM CONTROLS
   ========================================================================== */

.form-control,
.form-select {
    background:
        #f8fafc;

    color:
        var(--lcdp-text);

    border:
        1px solid #d8dee8;

    border-radius:
        11px;

    box-shadow:
        none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.form-control::placeholder {
    color:
        #7c8798;

    opacity:
        1;
}


.form-control:focus,
.form-select:focus {
    background:
        #ffffff;

    color:
        var(--lcdp-text);

    border-color:
        var(--lcdp-primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}


/*
 * Prevent iOS/mobile browsers from zooming when
 * the user taps into a public form field.
 */

@media (max-width: 767.98px) {

    .form-control,
    .form-select {
        font-size:
            16px;
    }

}


/* ==========================================================================
   PUBLIC NAVBAR BASE
   ========================================================================== */

.lcdp-public-navbar {
    background: rgba(13, 23, 38, 0.97) !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.lcdp-public-navbar .dropdown-menu {
    padding: 8px;

    border: 1px solid var(--lcdp-border);
    border-radius: var(--lcdp-radius-sm);

    box-shadow: var(--lcdp-shadow-md);
}

.lcdp-public-navbar .dropdown-item {
    padding: 9px 12px;

    border-radius: 8px;
}

.lcdp-public-navbar .dropdown-item:hover,
.lcdp-public-navbar .dropdown-item:focus {
    background: var(--lcdp-surface-soft);
}


/* ==========================================================================
   DESKTOP PUBLIC NAVIGATION
   ========================================================================== */

@media (min-width: 768px) {

.lcdp-public-navbar {
    min-height: 88px;

    padding-top: 0;
    padding-bottom: 0;
}


/*
 * The desktop navbar uses Bootstrap fixed-top.
 * Reserve its physical height so page content begins below it.
 */
body {
    padding-top: 88px;
}


    /* ----------------------------------------------------------------------
       INNER NAVBAR FRAME
       ---------------------------------------------------------------------- */

    .lcdp-public-navbar-inner {
        position: relative;

        display: flex;

        align-items: center;

        min-height: 88px;
    }


    /* ----------------------------------------------------------------------
       LOGO
       ---------------------------------------------------------------------- */

    .lcdp-public-navbar-brand {
        display: flex;

        align-items: center;

        flex: 0 0 auto;

        margin: 0 56px 0 0;

        padding: 0;
    }

    .lcdp-public-navbar-brand img {
        display: block;

        width: 300px;
        height: auto;

        max-height: 70px;

        object-fit: contain;
        object-position: left center;
    }


    /* ----------------------------------------------------------------------
       NAVIGATION COLLAPSE WRAPPER
       ---------------------------------------------------------------------- */

    .lcdp-public-navbar-collapse {
        position: static;

        display: flex !important;

        align-items: center;

        flex: 1;

        min-height: 88px;
    }


    /* ----------------------------------------------------------------------
       CENTER NAVIGATION LINKS
       ---------------------------------------------------------------------- */

    .lcdp-public-navbar-menu {
        position: absolute;

        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        display: flex;

        align-items: center;

        gap: 14px;

        margin: 0;
        padding: 0;

        white-space: nowrap;
    }


    /* ----------------------------------------------------------------------
       DESKTOP NAV LINKS
       ---------------------------------------------------------------------- */

    .lcdp-public-navbar-menu .nav-link {
        position: relative;

        display: flex;

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

        min-height: 44px;

        padding:
            0
            0.7rem !important;

        color:
            rgba(255, 255, 255, 0.78) !important;

        font-size: 1.1rem;

        /*
         * Larger, but intentionally not bulky.
         */
        font-weight: 500;

        line-height: 1;

        transition:
            color 0.18s ease;
    }


    /* ----------------------------------------------------------------------
       HOVER / FOCUS
       Bootstrap info = #0dcaf0
       ---------------------------------------------------------------------- */

    .lcdp-public-navbar-menu .nav-link:hover,
    .lcdp-public-navbar-menu .nav-link:focus {
        color: #0dcaf0 !important;
    }


    /* ----------------------------------------------------------------------
       ACTIVE LINK
       Supports normal links, aria-current and dropdown states.
       ---------------------------------------------------------------------- */

    .lcdp-public-navbar-menu .nav-link.active,
    .lcdp-public-navbar-menu .nav-link[aria-current="page"],
    .lcdp-public-navbar-menu .nav-link.show,
    .lcdp-public-navbar-menu .show > .nav-link {
        color: #0dcaf0 !important;
    }


    /* ----------------------------------------------------------------------
       ACCOUNT AREA
       ---------------------------------------------------------------------- */

    .lcdp-public-navbar-account {
        display: flex;

        align-items: center;

        flex: 0 0 auto;

        margin-left: auto;
    }


    /* ----------------------------------------------------------------------
       MI LCDP BUTTON
       ---------------------------------------------------------------------- */

    .lcdp-nav-account-btn {
        display: inline-flex;

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

        min-height: 42px;

        padding: 8px 17px;

        color: #ffffff;

        background: transparent;

        border: 1px solid rgba(255, 255, 255, 0.90);
        border-radius: 10px;

        font-size: 0.95rem;
        font-weight: 600;

        line-height: 1;
    }

    .lcdp-nav-account-btn:hover,
    .lcdp-nav-account-btn:focus,
    .lcdp-nav-account-btn.show {
        background: #ffffff;

        color: var(--lcdp-dark);

        border-color: #ffffff;
    }

}


/* ==========================================================================
   MOBILE NAVIGATION
   Temporary Bootstrap fallback.
   This will later be replaced by the app-style mobile navigation.
   ========================================================================== */

@media (max-width: 767.98px) {

    .lcdp-public-navbar-inner {
        position: relative;
    }

    .lcdp-public-navbar-collapse {
        padding-top: 12px;
        padding-bottom: 14px;
    }

    .lcdp-public-navbar-menu {
        margin: 0 0 14px;
    }

    .lcdp-public-navbar-account {
        padding-top: 12px;

        border-top:
            1px solid rgba(255, 255, 255, 0.12);
    }

}


/* ==========================================================================
   SHARED IMAGE TREATMENT
   ========================================================================== */

.lcdp-image-cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================================
   RESPONSIVE FOUNDATION
   ========================================================================== */

@media (max-width: 767.98px) {

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

    .lcdp-section {
        padding: 44px 0;
    }

    .lcdp-section-title {
        font-size: 1.8rem;
    }

}


/* ==========================================================================
   PUBLIC FOOTER
   ========================================================================== */

.lcdp-public-footer {
    background: var(--lcdp-dark);
    color: #ffffff;
}


body {
    background: var(--lcdp-dark);
}


/* ==========================================================================
   DESKTOP FOOTER
   ========================================================================== */

@media (min-width: 768px) {

    .lcdp-public-footer {
        padding:
            46px
            0
            24px;
    }


    /* ----------------------------------------------------------------------
       MAIN ROW
       ---------------------------------------------------------------------- */

    .lcdp-footer-main {
        display: grid;

        grid-template-columns:
            minmax(220px, 1fr)
            auto
            minmax(180px, 1fr);

        align-items: center;

        gap: 42px;

        padding-bottom: 34px;
    }


    /* ----------------------------------------------------------------------
       LOGO
       ---------------------------------------------------------------------- */

    .lcdp-footer-brand {
        display: flex;

        align-items: center;
        justify-content: flex-start;
    }

    .lcdp-footer-brand a {
        display: inline-flex;

        align-items: center;
    }

    .lcdp-footer-brand img {
        display: block;

        width: 230px;
        height: auto;

        max-height: 64px;

        object-fit: contain;
        object-position: left center;
    }


    /* ----------------------------------------------------------------------
       NAVIGATION LINKS
       ---------------------------------------------------------------------- */

.lcdp-footer-navigation {
    display: flex;

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

    gap: 42px;
}


/* Parent section */

.lcdp-footer-link-group {
    min-width: 120px;
}


/* Parent title */

.lcdp-footer-link-group-title {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* Child links */

.lcdp-footer-link-group-items {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
}


.lcdp-footer-link-group-items a {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.9rem;
    font-weight: 500;

    line-height: 1.35;

    text-decoration: none;

    white-space: nowrap;
}


.lcdp-footer-link-group-items a:hover,
.lcdp-footer-link-group-items a:focus {
    color: #0dcaf0;
}


    /* ----------------------------------------------------------------------
       SOCIAL MEDIA
       ---------------------------------------------------------------------- */

    .lcdp-footer-social {
        display: flex;

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

        gap: 10px;
    }

    .lcdp-footer-social-btn {
        display: inline-flex;

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

        width: 42px;
        height: 42px;

        color: #ffffff;

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

        border:
            1px solid rgba(255, 255, 255, 0.45);

        border-radius: 10px;

        text-decoration: none;

        transition:
            color 180ms ease,
            background-color 180ms ease,
            border-color 180ms ease,
            transform 180ms ease;
    }

    .lcdp-footer-social-btn svg {
        width: 20px;
        height: 20px;
    }

    .lcdp-footer-social-btn:hover,
    .lcdp-footer-social-btn:focus {
        color: #ffffff;

        transform:
            translateY(-2px);
    }



    /* ----------------------------------------------------------------------
       COPYRIGHT ROW
       ---------------------------------------------------------------------- */

    .lcdp-footer-bottom {
        display: flex;

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

        gap: 24px;

        padding-top: 22px;

        border-top:
            1px solid rgba(255, 255, 255, 0.10);
    }

    .lcdp-footer-copyright {
        color:
            rgba(255, 255, 255, 0.58);

        font-size: 0.82rem;

        line-height: 1.5;

        text-align: center;
    }

    .lcdp-footer-copyright p {
        margin: 0;
    }


    /* ----------------------------------------------------------------------
       LEGAL LINKS
       ---------------------------------------------------------------------- */

    .lcdp-footer-legal {
        display: flex;

        align-items: center;

        gap: 16px;
    }

    .lcdp-footer-legal a {
        color:
            rgba(255, 255, 255, 0.58);

        font-size: 0.82rem;

        text-decoration: none;
    }

    .lcdp-footer-legal a:hover,
    .lcdp-footer-legal a:focus {
        color: #ffffff;
    }

}


/* ==========================================================================
   MOBILE FOOTER
   ========================================================================== */

@media (max-width: 767.98px) {

    .lcdp-public-footer {
        padding:
            28px
            18px
            105px;

        background:
            var(--lcdp-dark);

        color:
            #ffffff;
    }


    /* ----------------------------------------------------------------------
       MAIN STACK
       ---------------------------------------------------------------------- */

    .lcdp-footer-main {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            28px;

        padding-bottom:
            26px;
    }


    /* ----------------------------------------------------------------------
       LOGO
       ---------------------------------------------------------------------- */

    .lcdp-footer-brand {
        display:
            flex;

        justify-content:
            center;
    }


    .lcdp-footer-brand img {
        display:
            block;

        width:
            min(220px, 70vw);

        height:
            auto;

        max-height:
            72px;

        object-fit:
            contain;
    }


    /* ----------------------------------------------------------------------
       FLEXIBLE LINK GROUP GRID
       Any future footer groups will flow automatically.
       ---------------------------------------------------------------------- */

    .lcdp-footer-navigation {
        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            26px
            20px;

        width:
            100%;

        margin:
            0;
    }


    .lcdp-footer-link-group {
        min-width:
            0;
    }


    .lcdp-footer-link-group-title {
        margin-bottom:
            10px;

        color:
            #ffffff;

        font-size:
            0.78rem;

        font-weight:
            750;

        letter-spacing:
            0.06em;

        text-transform:
            uppercase;
    }


    .lcdp-footer-link-group-items {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;
    }


    .lcdp-footer-link-group-items a {
        display:
            block;

        color:
            rgba(255, 255, 255, 0.72);

        font-size:
            0.88rem;

        font-weight:
            500;

        line-height:
            1.4;

        text-decoration:
            none;

        white-space:
            normal;
    }


    .lcdp-footer-link-group-items a:hover,
    .lcdp-footer-link-group-items a:focus {
        color:
            #0dcaf0;
    }


    /* ----------------------------------------------------------------------
       SOCIALS
       ---------------------------------------------------------------------- */

    .lcdp-footer-social {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            12px;

        margin-top:
            2px;
    }


    .lcdp-footer-social-btn {
        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            46px;

        height:
            46px;

        color:
            #ffffff;

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

        border:
            1px solid rgba(255, 255, 255, 0.35);

        border-radius:
            12px;

        text-decoration:
            none;
    }


    .lcdp-footer-social-btn svg {
        width:
            21px;

        height:
            21px;
    }


    /* ----------------------------------------------------------------------
       COPYRIGHT / BOTTOM
       ---------------------------------------------------------------------- */

    .lcdp-footer-bottom {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        gap:
            8px;

        padding-top:
            22px;

        border-top:
            1px solid rgba(255, 255, 255, 0.10);

        text-align:
            center;
    }


    .lcdp-footer-copyright {
        max-width:
            100%;

        color:
            rgba(255, 255, 255, 0.58);

        font-size:
            0.78rem;

        line-height:
            1.55;
    }


    .lcdp-footer-copyright p {
        margin:
            0;
    }


    .lcdp-footer-legal {
        display:
            flex;

        justify-content:
            center;

        flex-wrap:
            wrap;

        gap:
            8px
            14px;

        margin:
            0;
    }


    .lcdp-footer-legal a {
        color:
            rgba(255, 255, 255, 0.58);

        font-size:
            0.76rem;

        text-decoration:
            none;
    }

}


/* ========================================================================
   GLOBAL SOCIAL BRAND BUTTONS
   ======================================================================== */

.lcdp-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 10px;

    text-decoration: none !important;
    font-weight: 600;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.lcdp-social-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}


.lcdp-social-btn:hover {
    text-decoration: none !important;
    transform: translateY(-1px);
}


/* Facebook */

.lcdp-social-facebook {
    border-color: #1877f2;
    color: #1877f2 !important;
}


.lcdp-social-facebook:hover {
    background: #1877f2;
    color: #ffffff !important;
}


/* YouTube */

.lcdp-social-youtube {
    border-color: #ff0000;
    color: #ff0000 !important;
}


.lcdp-social-youtube:hover {
    background: #ff0000;
    color: #ffffff !important;
}


/* Instagram */

/* Instagram */

.lcdp-social-instagram {
    position: relative;

    background: transparent;

    border: 2px solid transparent;

    color: #d62976 !important;
}


.lcdp-social-instagram::before {
    content: "";

    position: absolute;

    inset: -2px;

    padding: 2px;

    border-radius: inherit;

    background:
        linear-gradient(
            45deg,
            #feda75 0%,
            #fa7e1e 25%,
            #d62976 50%,
            #962fbf 75%,
            #4f5bd5 100%
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}


.lcdp-social-instagram:hover,
.lcdp-social-instagram:focus {
    background:
        linear-gradient(
            45deg,
            #feda75 0%,
            #fa7e1e 25%,
            #d62976 50%,
            #962fbf 75%,
            #4f5bd5 100%
        );

    color: #ffffff !important;
}

/* ==========================================================================
   MOBILE BOTTOM NAV
   ========================================================================== */

.lcdp-mobile-bottom-nav {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1050;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    min-height: 68px;

    padding:
        6px
        8px
        calc(6px + env(safe-area-inset-bottom));

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

    border-top: 1px solid rgba(15, 23, 42, 0.10);

    box-shadow:
        0 -10px 30px rgba(15, 23, 42, 0.10);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.lcdp-mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;

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

    gap: 3px;

    min-width: 0;
    min-height: 52px;

    padding: 5px 3px;

    background: transparent;
    color: #6b7280;

    border: 0;

    text-decoration: none;

    font-size: 0.68rem;
    font-weight: 650;

    cursor: pointer;
}

.lcdp-mobile-bottom-nav-item:hover,
.lcdp-mobile-bottom-nav-item:focus {
    color: var(--lcdp-primary);
}


.lcdp-mobile-bottom-nav-item.is-active {
    color: var(--lcdp-primary);

    text-shadow:
        0 0 10px rgba(37, 99, 235, 0.35);
}

.lcdp-mobile-bottom-nav-item.is-active .lcdp-mobile-bottom-nav-icon {
    filter:
        drop-shadow(
            0 0 6px rgba(37, 99, 235, 0.45)
        );
}

.lcdp-mobile-bottom-nav-icon {
    display: flex;

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

    min-height: 24px;

    font-size: 1.25rem;
    line-height: 1;
}

@media (max-width: 767.98px) {

    body {
        padding-bottom: 82px;
    }

}


/* ==========================================================================
   MOBILE MORE DRAWER
   ========================================================================== */

@media (max-width: 767.98px) {

    .lcdp-mobile-more-panel {
        position: fixed;

        left: 0;
        right: 0;

        bottom: calc(68px + env(safe-area-inset-bottom));

        z-index: 1040;

        padding: 10px 14px 16px;

        background: #ffffff;

        border-radius: 22px 22px 0 0;

        box-shadow:
            0 -14px 35px rgba(15, 23, 42, 0.18);

        transform: translateY(calc(100% + 30px));
        opacity: 0;

        pointer-events: none;

        transition:
            transform 0.28s ease,
            opacity 0.22s ease;
    }

    .lcdp-mobile-more-panel.is-open {
        transform: translateY(0);
        opacity: 1;

        pointer-events: auto;
    }

    .lcdp-mobile-more-panel-handle {
        width: 42px;
        height: 5px;

        margin: 2px auto 12px;

        border-radius: 999px;

        background: #d1d5db;
    }

    .lcdp-mobile-more-panel-header {
        display: flex;

        align-items: center;
        justify-content: space-between;

        margin-bottom: 14px;
    }

    .lcdp-mobile-more-panel-header h2 {
        margin: 0;

        font-size: 1.15rem;
        font-weight: 750;

        color: #111827;
    }

    .lcdp-mobile-more-close {
        display: flex;

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

        width: 38px;
        height: 38px;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background: #f3f4f6;
        color: #374151;

        font-size: 1.4rem;
        line-height: 1;
    }

    .lcdp-mobile-more-grid {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 10px;
    }

    .lcdp-mobile-more-item {
        display: flex;

        flex-direction: column;

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

        gap: 8px;

        min-height: 92px;

        padding: 12px 8px;

        background: #f7f8fa;
        color: #374151;

        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;

        text-decoration: none;
        text-align: center;

        cursor: pointer;
    }

    .lcdp-mobile-more-item > span {
        font-size: 1.45rem;
        line-height: 1;
    }

    .lcdp-mobile-more-item strong {
        font-size: 0.78rem;
        font-weight: 700;
    }

}

/* ==========================================================================
   EVENTS
   ========================================================================== */

.lcdp-event-list {
    display: flex;
    flex-direction: column;
}

.lcdp-event-row {
    display: grid;

    grid-template-columns:
        68px
        minmax(0, 1fr)
        28px;

    align-items: center;

    gap: 16px;

    padding: 14px 0;

    color: var(--lcdp-text);

    text-decoration: none;

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

    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.lcdp-event-row:first-child {
    padding-top: 0;
}

.lcdp-event-row:last-child {
    border-bottom: 0;
}

.lcdp-event-row:hover {
    color: var(--lcdp-text);
}

.lcdp-event-calendar {
    width: 60px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--lcdp-border);
    border-radius: 11px;

    box-shadow: var(--lcdp-shadow-sm);

    text-align: center;
}

.lcdp-event-month {
    display: block;

    padding: 5px 4px;

    background: var(--lcdp-primary);

    color: #ffffff;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.06em;
}

.lcdp-event-day {
    display: block;

    padding: 7px 4px;

    color: var(--lcdp-text);

    font-size: 1.55rem;
    font-weight: 800;

    line-height: 1;
}

.lcdp-event-row-content {
    min-width: 0;
}

.lcdp-event-row-content h3 {
    margin: 0;

    color: var(--lcdp-text);

    font-size: 1.02rem;
    font-weight: 750;

    line-height: 1.25;
}

.lcdp-event-meta {
    margin-top: 4px;

    color: var(--lcdp-text-muted);

    font-size: 0.84rem;
}

.lcdp-event-chevron {
    color: var(--lcdp-text-muted);

    font-size: 1.8rem;
    font-weight: 300;

    line-height: 1;

    text-align: right;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.lcdp-event-row:hover .lcdp-event-chevron {
    color: var(--lcdp-primary);

    transform: translateX(3px);
}

.lcdp-event-more {
    padding-top: 18px;
}

.lcdp-event-more a {
    color: var(--lcdp-primary);

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;
}

.lcdp-event-more a:hover {
    color: var(--lcdp-primary-hover);
}

/* ==========================================================================
   MOBILE SHARED EVENTS
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ----------------------------------------------------------------------
       MOBILE EVENTS
       ---------------------------------------------------------------------- */

    .lcdp-event-row-desktop {
        display: none;
    }

    .lcdp-event-row {
        grid-template-columns:
            62px
            minmax(0, 1fr)
            24px;

        gap: 12px;

        padding: 0;

        border-bottom: 0;
    }

    .lcdp-event-calendar {
        width: 56px;
    }

    .lcdp-event-day {
        font-size: 1.45rem;
    }

    .lcdp-event-row-content h3 {
        font-size: 1rem;
    }

    .lcdp-event-meta {
        font-size: 0.82rem;
    }

    .lcdp-event-chevron {
        font-size: 1.65rem;
    }

    .lcdp-event-more {
        padding-top: 16px;

        text-align: left;
    }

}

/* ==========================================================================
   SHARED EVENT MODAL
   ========================================================================== */

.lcdp-event-modal {
    overflow: hidden;

    border: 0;
    border-radius: 20px;

    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.24),
        0 10px 28px rgba(15, 23, 42, 0.12);
}


/* --------------------------------------------------------------------------
   MODAL HEADER
   -------------------------------------------------------------------------- */

.lcdp-event-modal .modal-header {
    align-items: flex-start;

    padding: 24px 30px 20px;

    background: #ffffff;

    border-bottom: 1px solid var(--lcdp-border);
}

.lcdp-event-modal .modal-header > div {
    min-width: 0;
}

.lcdp-event-modal .modal-title {
    margin-top: 8px;

    color: var(--lcdp-text);

    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 780;

    line-height: 1.08;
}

.lcdp-event-modal-meta {
    margin-top: 8px;

    color: var(--lcdp-text-muted);

    font-size: 1rem;
    font-weight: 500;

    line-height: 1.4;
}

.lcdp-event-modal .btn-close {
    flex: 0 0 auto;

    margin-top: 10px;
}


/* --------------------------------------------------------------------------
   MODAL BODY
   -------------------------------------------------------------------------- */

.lcdp-event-modal .modal-body {
    padding: 26px 30px 30px;

    background: #ffffff;
}

.lcdp-event-modal-loading {
    padding: 30px 0;

    color: var(--lcdp-text-muted);

    font-size: 1rem;

    text-align: center;
}


/* --------------------------------------------------------------------------
   MODAL SECTIONS
   -------------------------------------------------------------------------- */

.lcdp-event-modal-section {
    padding: 28px 0;

    border-bottom: 1px solid var(--lcdp-border);
}

.lcdp-event-modal-section:first-child {
    padding-top: 4px;
}

.lcdp-event-modal-section:last-of-type {
    border-bottom: 0;
}

.lcdp-event-modal-section-label {
    margin-bottom: 16px;

    color: var(--lcdp-text);

    font-size: 1.45rem;
    font-weight: 780;

    line-height: 1.15;
}


/* --------------------------------------------------------------------------
   ANNOUNCEMENTS
   -------------------------------------------------------------------------- */

.lcdp-event-modal-announcements {
    color: var(--lcdp-text);

    font-size: 1rem;

    line-height: 1.55;
}

.lcdp-event-modal-announcements ul {
    margin: 0;

    padding-left: 1.4rem;
}

.lcdp-event-modal-announcements li {
    margin-bottom: 10px;
}

.lcdp-event-modal-announcements li:last-child {
    margin-bottom: 0;
}

.lcdp-event-modal-announcements a {
    color: var(--lcdp-primary);

    font-weight: 600;
}


/* --------------------------------------------------------------------------
   LOCATION
   -------------------------------------------------------------------------- */

.lcdp-event-location-card {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.lcdp-event-location-info {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.lcdp-event-location-info strong {
    color: var(--lcdp-text);

    font-size: 1.08rem;
    font-weight: 750;
}

.lcdp-event-location-info span {
    color: var(--lcdp-text-muted);

    font-size: 0.95rem;

    line-height: 1.4;
}


/* --------------------------------------------------------------------------
   MAP
   -------------------------------------------------------------------------- */

.lcdp-event-map {
    width: 100%;

    overflow: hidden;

    background: var(--lcdp-surface-soft);

    border: 1px solid var(--lcdp-border);
    border-radius: 16px;

    box-shadow: var(--lcdp-shadow-sm);
}

.lcdp-event-map iframe {
    display: block;

    width: 100%;
    height: 240px;

    border: 0;
}


/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */

.lcdp-event-contact {
    color: var(--lcdp-text);

    font-size: 1rem;

    line-height: 1.55;
}

.lcdp-event-contact p {
    margin: 0 0 14px;
}

.lcdp-event-contact ul {
    margin: 0;

    padding-left: 1.4rem;
}

.lcdp-event-contact li {
    margin-bottom: 8px;
}

.lcdp-event-contact li:last-child {
    margin-bottom: 0;
}

.lcdp-event-contact a {
    color: var(--lcdp-primary);

    font-weight: 600;
}


/* --------------------------------------------------------------------------
   SOCIAL MEDIA
   -------------------------------------------------------------------------- */

.lcdp-event-social-links {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}

.lcdp-event-social-link {
    display: inline-flex;

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

    gap: 8px;

    min-height: 44px;

    padding: 9px 16px;

    background: #ffffff;

    border: 1px solid currentColor;
    border-radius: 999px;

    text-decoration: none;

    font-size: 0.9rem;
    font-weight: 700;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.lcdp-event-social-link svg {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;
}

.lcdp-event-social-link:hover {
    transform: translateY(-1px);

    box-shadow: var(--lcdp-shadow-sm);
}




/* --------------------------------------------------------------------------
   MODAL FOOTER
   -------------------------------------------------------------------------- */

.lcdp-event-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 18px 30px 24px;

    background: #ffffff;

    border-top: 1px solid var(--lcdp-border);
}

.lcdp-event-modal-footer .btn {
    min-height: 44px;

    padding: 9px 18px;

    border-radius: 10px;

    font-size: 0.9rem;
    font-weight: 700;
}

.lcdp-event-modal-footer > div {
    margin-right: auto;
}


/* ==========================================================================
   MOBILE EVENT MODAL
   ========================================================================== */

@media (max-width: 767.98px) {

    .lcdp-event-modal {
        border-radius: 18px;
    }

    .lcdp-event-modal .modal-header {
        padding: 20px 20px 18px;
    }

    .lcdp-event-modal .modal-body {
        padding: 20px;
    }

    .lcdp-event-modal .modal-title {
        font-size: 1.75rem;
    }

    .lcdp-event-modal-meta {
        margin-top: 7px;

        font-size: 0.92rem;
    }

    .lcdp-event-modal-section {
        padding: 24px 0;
    }

    .lcdp-event-modal-section:first-child {
        padding-top: 2px;
    }

    .lcdp-event-modal-section-label {
        margin-bottom: 14px;

        font-size: 1.3rem;
    }

    .lcdp-event-modal-announcements,
    .lcdp-event-contact {
        font-size: 0.95rem;
    }

    .lcdp-event-map iframe {
        height: 210px;
    }

    .lcdp-event-social-links {
        gap: 10px;
    }

    .lcdp-event-social-link {
        min-height: 42px;

        padding: 8px 14px;

        font-size: 0.86rem;
    }

    .lcdp-event-social-link svg {
        width: 19px;
        height: 19px;

        flex-basis: 19px;
    }
	
	.lcdp-event-modal-footer {
    padding: 16px 20px 20px;
	}

}


/* ==========================================================================
   SMALL MOBILE EVENT MODAL
   ========================================================================== */

@media (max-width: 420px) {

    .lcdp-event-modal .modal-header {
        padding: 18px 16px 16px;
    }

    .lcdp-event-modal .modal-body {
        padding: 16px;
    }

    .lcdp-event-modal .modal-title {
        font-size: 1.55rem;
    }

    .lcdp-event-modal-section {
        padding: 22px 0;
    }

    .lcdp-event-modal-section-label {
        font-size: 1.25rem;
    }

    .lcdp-event-map iframe {
        height: 190px;
    }

    .lcdp-event-social-links {
        align-items: stretch;
    }

    .lcdp-event-social-link {
        flex: 1 1 auto;
    }

}


/* ==========================================================================
   EVENT MODAL
   ========================================================================== */


/* Hide "Más eventos" inside the modal on ALL screen sizes */

#lcdpEventModalList .lcdp-event-more {
    display: none !important;
}


/* ==========================================================================
   MOBILE EVENT MODAL
   ========================================================================== */

@media (max-width: 767.98px) {

    /* Show all available event rows inside modal */

    .lcdp-event-modal-all-events .lcdp-event-row-desktop {
        display: flex !important;
    }


    /* ----------------------------------------------------------------------
       Header
       ---------------------------------------------------------------------- */

    .lcdp-event-modal .modal-header {
        position: relative;

        display: block;

        min-height: 120px;

        padding:
            16px
            18px
            18px;
    }


    /* Regresar — top left */

    .lcdp-event-modal-back {
        position: absolute;

        top: 14px;
        left: 16px;

        margin: 0;

        min-height: 38px;

        padding:
            7px
            12px;

        border-radius: 10px;

        font-size: 0.85rem;
        font-weight: 700;

        white-space: nowrap;
    }


    /* X — top right */

    .lcdp-event-modal .btn-close {
        position: absolute;

        top: 18px;
        right: 18px;

        margin: 0;
    }


    /* Event title/date below buttons */

    .lcdp-event-modal .modal-header > div {
        padding-top: 54px;
    }


    .lcdp-event-modal .modal-title {
        margin: 0;

        font-size: 1.35rem;
        font-weight: 750;

        line-height: 1.2;
    }


    .lcdp-event-modal-meta {
        margin-top: 5px;

        font-size: 0.9rem;
    }


    /* ----------------------------------------------------------------------
       All-events list
       ---------------------------------------------------------------------- */

    #lcdpEventModalList {
        display: flex;

        flex-direction: column;

        gap: 12px;
    }


    #lcdpEventModalList .lcdp-event-row {
        display: flex !important;

        align-items: center;

        gap: 14px;

        padding:
            14px
            16px !important;

        background: #ffffff;

        border:
            1px solid var(--lcdp-border);

        border-radius: 14px;

        box-shadow:
            var(--lcdp-shadow-sm);

        cursor: pointer;
    }


    #lcdpEventModalList .lcdp-event-row +
    .lcdp-event-row {
        margin-top: 0;
    }


    #lcdpEventModalList .lcdp-event-row:hover,
    #lcdpEventModalList .lcdp-event-row:focus {
        background:
            var(--lcdp-surface-soft);
    }

}


/* ==========================================================================
   PRAYER REQUEST MODAL
   ========================================================================== */

#lcdpPrayerModal .modal-content {
    overflow: hidden;

    border: 0;
    border-radius: 20px;

    box-shadow:
        0 0 36px rgba(15, 23, 42, 0.18);
}


#lcdpPrayerModal .modal-header {
    align-items: flex-start;

    padding:
        22px
        24px
        18px;

    background:
        #ffffff;

    border-bottom:
        1px solid var(--lcdp-border);
}


#lcdpPrayerModal .modal-header > div {
    min-width: 0;
}


#lcdpPrayerModal .modal-title {
    margin: 0;

    color:
        var(--lcdp-text);

    font-size:
        1.65rem;

    font-weight:
        750;

    line-height:
        1.12;
}


#lcdpPrayerModal .btn-close {
    flex:
        0 0 auto;

    margin:
        2px
        0
        0
        16px;
}


#lcdpPrayerModal .modal-body {
    padding:
        22px
        24px
        24px;

    background:
        #ffffff;
}


/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */

#lcdpPrayerModal .prayer-request-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0;
}


#lcdpPrayerModal .prayer-request-form .mb-3 {
    margin-bottom:
        16px !important;
}


#lcdpPrayerModal .form-label {
    margin-bottom:
        7px;

    color:
        var(--lcdp-text);

    font-size:
        0.9rem;

    font-weight:
        650;
}


#lcdpPrayerModal .form-label .text-muted {
    font-size:
        0.8rem;

    font-weight:
        500;
}


#lcdpPrayerModal .form-control {
    width:
        100%;

    min-height:
        46px;

    padding:
        10px
        12px;

    background:
        #ffffff;

    color:
        var(--lcdp-text);

    border:
        1px solid #d9dee6;

    border-radius:
        10px;

    box-shadow:
        none;

    font-size:
        0.95rem;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}


#lcdpPrayerModal .form-control:focus {
    background:
        #ffffff;

    border-color:
        var(--lcdp-primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}


#lcdpPrayerModal textarea.form-control {
    min-height:
        140px;

    resize:
        vertical;
}


/* --------------------------------------------------------------------------
   RESPONSE
   -------------------------------------------------------------------------- */

#lcdpPrayerModal .prayer-form-response {
    margin:
        2px
        0
        16px;

    padding:
        14px
        16px;

    border-radius:
        10px;

    font-size:
        0.9rem;

    line-height:
        1.5;
}


#lcdpPrayerModal .prayer-form-response p {
    margin:
        0;
}


#lcdpPrayerModal .prayer-form-response.success {
    background:
        rgba(25, 135, 84, 0.10);

    color:
        #146c43;

    border:
        1px solid rgba(25, 135, 84, 0.18);
}


#lcdpPrayerModal .prayer-form-response.error {
    background:
        rgba(220, 53, 69, 0.08);

    color:
        #b02a37;

    border:
        1px solid rgba(220, 53, 69, 0.16);
}


/* --------------------------------------------------------------------------
   SUBMIT BUTTON
   -------------------------------------------------------------------------- */

#lcdpPrayerModal #prayerSubmitButton {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    margin-top:
        2px;

    padding:
        10px
        18px;

    background:
        var(--lcdp-dark);

    color:
        #ffffff;

    border:
        0;

    border-radius:
        10px;

    font-size:
        0.92rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background-color 180ms ease,
        transform 180ms ease;
}


#lcdpPrayerModal #prayerSubmitButton:hover,
#lcdpPrayerModal #prayerSubmitButton:focus {
    background:
        var(--lcdp-primary);

    color:
        #ffffff;

    transform:
        translateY(-1px);
}


/* ==========================================================================
   MOBILE PRAYER REQUEST MODAL
   ========================================================================== */

@media (max-width: 767.98px) {

    #lcdpPrayerModal .modal-dialog {
        margin:
            12px;
    }


    #lcdpPrayerModal .modal-content {
        border-radius:
            18px;
    }


    #lcdpPrayerModal .modal-header {
        padding:
            18px
            18px
            16px;
    }


    #lcdpPrayerModal .modal-title {
        font-size:
            1.4rem;
    }


    #lcdpPrayerModal .btn-close {
        margin-left:
            12px;
    }


    #lcdpPrayerModal .modal-body {
        padding:
            18px;
    }


    #lcdpPrayerModal .prayer-request-form .mb-3 {
        margin-bottom:
            14px !important;
    }


    #lcdpPrayerModal .form-control {
        min-height:
            44px;

        font-size:
            16px;
    }


    #lcdpPrayerModal textarea.form-control {
        min-height:
            125px;
    }


    #lcdpPrayerModal #prayerSubmitButton {
        min-height:
            46px;
    }

}


/* ==========================================================================
   PUBLIC AMBIENT PAGE BACKGROUND
   Secondary public pages
   ========================================================================== */

.lcdp-ambient-page {
    position:
        relative;

    min-height:
        100vh;

    isolation:
        isolate;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    background:
        radial-gradient(
            ellipse at 14% 22%,
            rgba(13, 202, 240, 0.08) 0%,
            rgba(37, 99, 235, 0.05) 18%,
            transparent 40%
        ),
        radial-gradient(
            ellipse at 82% 28%,
            rgba(37, 99, 235, 0.10) 0%,
            transparent 38%
        ),
        radial-gradient(
            ellipse at 48% 78%,
            rgba(13, 202, 240, 0.05) 0%,
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #050b13 0%,
            #091422 30%,
            #0d1726 55%,
            #091523 76%,
            #050d18 100%
        );

    background-size:
        145% 145%,
        155% 155%,
        165% 165%,
        100% 100%;

    animation:
        lcdpAmbientDarkFlow
        28s
        ease-in-out
        infinite
        alternate;
}


/* ==========================================================================
   DARK MOVING ATMOSPHERE
   ========================================================================== */

.lcdp-ambient-page::before {
    content:
        "";

    position:
        fixed;

    z-index:
        -2;

    width:
        150vw;

    height:
        130vh;

    left:
        -28vw;

    top:
        -20vh;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at 18% 34%,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(3, 10, 19, 0.20) 24%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 76% 20%,
            rgba(5, 14, 27, 0.64) 0%,
            rgba(7, 20, 35, 0.20) 28%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 52% 82%,
            rgba(0, 5, 12, 0.48) 0%,
            rgba(9, 23, 39, 0.18) 28%,
            transparent 54%
        );

    filter:
        blur(48px);

    animation:
        lcdpAmbientShadowFlow
        24s
        ease-in-out
        infinite;
}


/* ==========================================================================
   SMALL COLOR POCKETS + LIGHT FLASH
   ========================================================================== */

.lcdp-ambient-page::after {
    content:
        "";

    position:
        fixed;

    z-index:
        -1;

    width:
        125vw;

    height:
        105vh;

    left:
        -12vw;

    top:
        -6vh;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(125, 211, 252, 0.34) 0%,
            rgba(56, 189, 248, 0.16) 5%,
            rgba(37, 99, 235, 0.05) 11%,
            transparent 18%
        ),
        radial-gradient(
            circle at 72% 22%,
            rgba(191, 219, 254, 0.25) 0%,
            rgba(96, 165, 250, 0.12) 5%,
            transparent 15%
        ),
        radial-gradient(
            circle at 58% 76%,
            rgba(34, 211, 238, 0.24) 0%,
            rgba(13, 202, 240, 0.10) 6%,
            transparent 17%
        ),
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 42%,
            rgba(125, 211, 252, 0.00) 46%,
            rgba(125, 211, 252, 0.13) 49%,
            rgba(219, 234, 254, 0.24) 50%,
            rgba(96, 165, 250, 0.10) 52%,
            transparent 56%,
            transparent 100%
        );

    filter:
        blur(28px);

    opacity:
        0.18;

    animation:
        lcdpAmbientColorPulse
        18s
        ease-in-out
        infinite;
}


/* ==========================================================================
   DARK BASE FLOW
   ========================================================================== */

@keyframes lcdpAmbientDarkFlow {

    0% {
        background-position:
            0% 10%,
            100% 0%,
            48% 100%,
            center;
    }

    34% {
        background-position:
            22% 25%,
            72% 20%,
            34% 72%,
            center;
    }

    68% {
        background-position:
            35% 8%,
            58% 36%,
            68% 62%,
            center;
    }

    100% {
        background-position:
            8% 30%,
            94% 14%,
            42% 88%,
            center;
    }

}


/* ==========================================================================
   DARK CLOUD MOVEMENT
   ========================================================================== */

@keyframes lcdpAmbientShadowFlow {

    0% {
        transform:
            translate3d(-4vw, -3vh, 0)
            scale(1.02)
            rotate(0deg);
    }

    25% {
        transform:
            translate3d(8vw, 6vh, 0)
            scale(1.08)
            rotate(2deg);
    }

    52% {
        transform:
            translate3d(14vw, -4vh, 0)
            scale(0.98)
            rotate(-2deg);
    }

    76% {
        transform:
            translate3d(3vw, 13vh, 0)
            scale(1.10)
            rotate(1deg);
    }

    100% {
        transform:
            translate3d(-7vw, 4vh, 0)
            scale(1.03)
            rotate(-1deg);
    }

}


/* ==========================================================================
   COLOR POCKET / FLASH MOVEMENT
   ========================================================================== */

@keyframes lcdpAmbientColorPulse {

    0% {
        transform:
            translate3d(-12vw, 2vh, 0)
            rotate(-4deg)
            scale(0.95);

        opacity:
            0.10;
    }

    16% {
        opacity:
            0.18;
    }

    27% {
        transform:
            translate3d(4vw, 8vh, 0)
            rotate(2deg)
            scale(1.04);

        opacity:
            0.42;
    }

    34% {
        opacity:
            0.16;
    }

    48% {
        transform:
            translate3d(18vw, -6vh, 0)
            rotate(7deg)
            scale(1.08);

        opacity:
            0.12;
    }

    62% {
        opacity:
            0.26;
    }

    70% {
        transform:
            translate3d(6vw, 14vh, 0)
            rotate(-5deg)
            scale(1.12);

        opacity:
            0.55;
    }

    78% {
        opacity:
            0.14;
    }

    90% {
        transform:
            translate3d(-8vw, -5vh, 0)
            rotate(4deg)
            scale(1.02);

        opacity:
            0.30;
    }

    100% {
        transform:
            translate3d(-12vw, 2vh, 0)
            rotate(-4deg)
            scale(0.95);

        opacity:
            0.10;
    }

}


/* ==========================================================================
   SHARED GLASS PANEL
   ========================================================================== */

.lcdp-glass-panel {
    background:
        rgba(255, 255, 255, 0.30);

    border:
        1px solid rgba(255, 255, 255, 0.36);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);

    backdrop-filter:
        blur(22px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(140%);
}


/* ==========================================================================
   INNER GLASS PANEL
   ========================================================================== */

.lcdp-glass-panel-soft {
    background:
        rgba(255, 255, 255, 0.48);

    border:
        1px solid rgba(255, 255, 255, 0.40);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26);

    backdrop-filter:
        blur(16px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(130%);
}


/* ==========================================================================
   MOBILE AMBIENT BACKGROUND
   ========================================================================== */

@media (max-width: 767.98px) {

    .lcdp-ambient-page::before {
        width:
            170vw;

        height:
            125vh;

        left:
            -48vw;

        top:
            -12vh;

        filter:
            blur(38px);
    }


    .lcdp-ambient-page::after {
        width:
            220vw;

        height:
            36vh;

        left:
            -70vw;

        top:
            32vh;

        filter:
            blur(30px);
    }


    .lcdp-glass-panel {
        background:
            rgba(255, 255, 255, 0.30);

        backdrop-filter:
            blur(20px)
            saturate(140%);

        -webkit-backdrop-filter:
            blur(20px)
            saturate(140%);
    }


    .lcdp-glass-panel-soft {
        background:
            rgba(255, 255, 255, 0.50);
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .lcdp-ambient-page,
    .lcdp-ambient-page::before,
    .lcdp-ambient-page::after {
        animation:
            none;
    }

}





/* ==========================================================================
   MOBILE MORE PANEL — PUBLIC + ACCOUNT SECTIONS
   ========================================================================== */

.lcdp-mobile-more-primary-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;
}


.lcdp-mobile-more-primary-item {
    min-height:
        94px;

    padding:
        16px
        12px;
}


.lcdp-mobile-more-primary-item span {
    display:
        block;

    margin-bottom:
        7px;

    font-size:
        1.45rem;
}


.lcdp-mobile-more-primary-item strong {
    display:
        block;

    font-size:
        0.9rem;

    line-height:
        1.25;
}


/* ==========================================================================
   DIVIDER
   ========================================================================== */

.lcdp-mobile-more-divider {
    width:
        100%;

    height:
        1px;

    margin:
        18px
        0;

    background:
        rgba(15, 23, 42, 0.12);
}


/* ==========================================================================
   ACCOUNT ACTIONS
   ========================================================================== */

.lcdp-mobile-more-account-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(90px, 1fr)
        );

    gap:
        10px;
}


.lcdp-mobile-more-account-item {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        76px;

    padding:
        12px
        8px;

    background:
        #f8fafc;

    color:
        var(--lcdp-dark);

    border:
        1px solid #dbe2ea;

    border-radius:
        13px;

    text-align:
        center;

    text-decoration:
        none;

    transition:
        background-color 180ms ease,
        transform 180ms ease,
        border-color 180ms ease;
}


.lcdp-mobile-more-account-item:hover,
.lcdp-mobile-more-account-item:focus {
    background:
        #eef2f7;

    color:
        var(--lcdp-dark);

    border-color:
        #cbd5e1;

    transform:
        translateY(-1px);
}


.lcdp-mobile-more-account-item span {
    display:
        block;

    margin-bottom:
        5px;

    font-size:
        1.2rem;
}


.lcdp-mobile-more-account-item strong {
    display:
        block;

    font-size:
        0.78rem;

    line-height:
        1.25;
}


/* ==========================================================================
   LOGOUT
   ========================================================================== */

.lcdp-mobile-more-account-danger {
    background:
        #fffafa;

    color:
        #b91c1c;

    border-color:
        #fecaca;
}


.lcdp-mobile-more-account-danger:hover,
.lcdp-mobile-more-account-danger:focus {
    background:
        #fef2f2;

    color:
        #991b1b;

    border-color:
        #fca5a5;
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 360px) {

    .lcdp-mobile-more-primary-grid {
        gap:
            9px;
    }


    .lcdp-mobile-more-primary-item {
        min-height:
            88px;

        padding:
            13px
            8px;
    }


    .lcdp-mobile-more-primary-item strong {
        font-size:
            0.82rem;
    }


    .lcdp-mobile-more-account-grid {
        gap:
            8px;
    }


    .lcdp-mobile-more-account-item {
        min-height:
            72px;

        padding:
            10px
            6px;
    }


    .lcdp-mobile-more-account-item strong {
        font-size:
            0.73rem;
    }

}