/* =========================================================================
   "Get the app" dialog — home page.

   Inner pages style this same markup (template-parts/inner/app-dialog.php)
   from css/inner-pages.css. That file's :root also fixes --ll-fs-* to pixel
   values for its own layouts, and loading it here would resize every heading
   on the home page — see ll_enqueue_assets(). This is the dialog's rules
   alone, copied from css/inner-pages.css / css/inner-responsive.css, the same
   "own pair of files" approach already used for css/request-form.css.
   ========================================================================= */

.ll-modal,
.ll-modal *,
.ll-modal *::before,
.ll-modal *::after {
    box-sizing: border-box;
}

/*
 * A dialog locks the page's scroll (body overflow: hidden), which used to take
 * the scrollbar away and slide the whole page sideways by its width — twice,
 * when one dialog replaced another. Reserving the scrollbar's gutter keeps the
 * page exactly where it is.
 */
html {
    scrollbar-gutter: stable;
}

.ll-modal {
    /* Spacing/surface tokens the ported rules below are authored in. */
    --ll-s2: 6px;
    --ll-s3: 10px;
    --ll-s4: 12px;
    --ll-s5: 16px;
    --ll-s6: 20px;
    --ll-s7: 24px;
    --ll-s10: 40px;
    --ll-r-full: 999px;
    --ll-r-promo: 30px;
    --ll-surface-raised: #0B0B0B;
    --ll-surface-inset: #111111;
    --ll-border-card: #232323;
    --ll-text-secondary: #8E8E93;
    --ll-hairline-card: inset 0 0 0 1px var(--ll-border-card);
    --ll-hairline-accent: inset 0 0 0 1px var(--ll-red);

    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--ll-s6);
    background-color: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

.ll-modal[hidden] {
    display: none;
}

.ll-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ll-s5);
    width: 100%;
    max-width: 500px;
    padding: var(--ll-s10);
    border-radius: var(--ll-r-promo);
    background-color: var(--ll-surface-raised);
    box-shadow: var(--ll-hairline-card);
}

.ll-modal__panel .ll-store {
    justify-content: center;
}

/*
 * The dialog is printed by footer.php, outside .ll-page and outside any home
 * section, so nothing overrides the parent theme's `h1..h6 { font-family:
 * 'Proxima Nova Lt' }` for its heading — a font that never loads, which left
 * "Get the app to start lending" in the browser's serif. Set it here instead.
 */
.ll-modal__panel,
.ll-modal__panel h2,
.ll-modal__panel button {
    font-family: var(--ll-font);
}

.ll-modal__panel .ll-modal__qr {
    margin-top: var(--ll-s2);
    margin-bottom: 0;
}

.ll-modal__close {
    position: absolute;
    top: var(--ll-s5);
    right: var(--ll-s5);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background-color: var(--ll-surface-inset);
    color: var(--ll-white);
    cursor: pointer;
}

.ll-modal__close:hover {
    background-color: var(--ll-red);
}

.ll-modal__qr {
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    margin: var(--ll-s7) auto var(--ll-s2);
    padding: var(--ll-s3);
    border-radius: 16px;
    background-color: var(--ll-white);
}

.ll-modal__qr img {
    display: block;
    width: 100%;
    height: 100%;
    /* Hard edges: a QR must never be smoothed into un-scannability. */
    image-rendering: pixelated;
}

.ll-modal__scanline {
    margin-bottom: var(--ll-s5);
    text-align: center;
}

.ll-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ll-s2);
    padding: var(--ll-s2) var(--ll-s5);
    border-radius: var(--ll-r-full);
    box-shadow: var(--ll-hairline-accent);
    background-color: rgba(237, 28, 36, 0.1);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ll-red);
}

.ll-pill--accent {
    padding: var(--ll-s3) var(--ll-s6);
    background-color: transparent;
    box-shadow: var(--ll-hairline-accent);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ll-red);
}

.ll-page__h3 {
    margin: 0;
    font-weight: 600;
    font-size: var(--ll-fs-h3);
    line-height: 1.25;
    color: var(--ll-white);
}

.ll-meta {
    margin-bottom: 0;
    font-size: var(--ll-fs-meta);
    line-height: 1.5;
    color: var(--ll-text-secondary);
}

.ll-caption {
    margin: 0;
    font-size: var(--ll-fs-small);
    line-height: 1.5;
    color: var(--ll-text-secondary);
}

.ll-store {
    display: flex;
    align-items: center;
    gap: var(--ll-s4);
    flex-wrap: wrap;
}

.ll-store__btn img {
    display: block;
    height: 46px;
    width: auto;
}

@media (max-width: 480px) {
    .ll-modal__panel {
        padding: var(--ll-s7) var(--ll-s6);
    }

    .ll-store__btn img {
        height: 40px;
    }
}