/*
 * Fix 009 - the sticky Apply Now bar on phones.
 *
 * This file is loaded with media="(max-width: 767px)", so none of it applies on
 * tablet or desktop. Sizes and colours are from the Figma (New LD Redesign Export,
 * node 37-6713). The purple is see-through with a blur behind it, which is why
 * the tab and the panel each carry their own background and blur: a blur nested
 * inside another blur would have nothing to blur.
 */

.ld-sticky-apply {
    position: fixed;
    left: 13.5px;
    right: 13.5px;
    bottom: 0;
    /* The officer bar's layer: under the menu popup and the OneTrust banner. */
    z-index: 9990;
    transition: transform .25s ease, visibility .25s;
}

.ld-sticky-apply__panel {
    display: flex;
    justify-content: center;
    padding: 14px 0 calc(11px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    background: rgba(69, 3, 122, .8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: visibility .25s;
}

/* Collapsed: the panel drops below the screen and only the tab stays above it. */
.ld-sticky-apply.is-collapsed {
    transform: translateY(100%);
}

.ld-sticky-apply.is-collapsed .ld-sticky-apply__panel {
    visibility: hidden;
}

/* Away: the visitor is not far enough down yet, or is typing in a form field. */
.ld-sticky-apply.is-away {
    transform: translateY(calc(100% + 22px));
    visibility: hidden;
}

.ld-sticky-apply.is-dragging,
.ld-sticky-apply.is-dragging .ld-sticky-apply__panel {
    transition: none;
    visibility: visible;
}

/* Theme and Elementor style every button and link state, so each state is set. */
.ld-sticky-apply .ld-sticky-apply__tab,
.ld-sticky-apply .ld-sticky-apply__tab:hover,
.ld-sticky-apply .ld-sticky-apply__tab:focus,
.ld-sticky-apply .ld-sticky-apply__tab:active {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 79px;
    height: 22px;
    min-width: 0;
    min-height: 0;
    margin: 0 0 0 -39.5px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 8px 8px 0 0;
    background: rgba(69, 3, 122, .8) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: none !important;
    color: #c3aed5 !important;
    cursor: grab;
    line-height: 1;
    /* The finger drags the bar here, it does not scroll the page. */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* A bigger target for a thumb than the 79 x 22 tab that shows. */
.ld-sticky-apply__tab::before {
    content: "";
    position: absolute;
    top: -22px;
    right: -16px;
    bottom: 0;
    left: -16px;
}

.ld-sticky-apply .ld-sticky-apply__tab:focus-visible,
.ld-sticky-apply .ld-sticky-apply__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ld-sticky-apply__tab svg {
    display: block;
    transition: transform .25s ease;
}

.ld-sticky-apply.is-collapsed .ld-sticky-apply__tab svg {
    transform: rotate(180deg);
}

.ld-sticky-apply .ld-sticky-apply__btn,
.ld-sticky-apply .ld-sticky-apply__btn:link,
.ld-sticky-apply .ld-sticky-apply__btn:visited,
.ld-sticky-apply .ld-sticky-apply__btn:hover,
.ld-sticky-apply .ld-sticky-apply__btn:focus,
.ld-sticky-apply .ld-sticky-apply__btn:active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 198px;
    height: 51px;
    border-radius: 128px;
    background: #afe321;
    color: #222;
    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

/*
 * Room at the foot of the page, so the NMLS and copyright lines can be read.
 * The site's own rule for the cookie banner sets this padding with an id in its
 * selector, so this has to be !important. The max() keeps the banner's room.
 */
body:has(.ld-sticky-apply:not(.is-away)) {
    padding-bottom: max(var(--ld-bottom-overlay, 0px), var(--ld-sticky-apply-height, 0px)) !important;
}

/* Keeps a link reached with the keyboard from landing behind the bar. */
html:has(.ld-sticky-apply:not(.is-away)) {
    scroll-padding-bottom: max(var(--ld-bottom-overlay, 0px), var(--ld-sticky-apply-height, 0px)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .ld-sticky-apply,
    .ld-sticky-apply__panel,
    .ld-sticky-apply__tab svg {
        transition: none;
    }
}