/* Mobile-only account form fixed to the bottom edge of the homepage. */
.mobile-sticky-lead { display: none; }

@media (max-width: 767px) {
    body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

    .mobile-sticky-lead {
        display: block;
        position: fixed;
        z-index: 1000;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 12px 14px calc(20px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -4px 18px rgb(17 24 39 / 14%);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .mobile-sticky-form {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .mobile-sticky-form__fields {
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .mobile-sticky-form__otp[hidden] { display: none; }
    .mobile-sticky-form__otp-fields {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .mobile-sticky-form__otp-digit {
        box-sizing: border-box;
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        height: 32px;
        border: 1px solid #d8dde5;
        border-radius: 8px;
        padding: 0;
        background: #fff;
        color: #202020;
        font: inherit;
        font-size: 16px;
        text-align: center;
    }

    .mobile-sticky-form__otp-digit.otp-next-digit {
        border-color: #0868f7;
        box-shadow: 0 0 0 1px #0868f7;
    }

    .mobile-sticky-form__otp-digit:focus:not(.otp-next-digit) {
        caret-color: transparent;
    }

    .mobile-sticky-form__verify {
        flex: 0 0 100px;
        width: 100px;
        min-height: 32px;
        border-radius: 7px;
        font-size: 12px;
    }

    .mobile-sticky-form__verify:disabled {
        color: #383D47;
        background-color: #bfcdd9;
        cursor: not-allowed;
    }

    .mobile-sticky-form__verify:not(:disabled) { background: #0868f7; color: #fff; }
    .mobile-sticky-form__otp.is-verifying .mobile-sticky-form__verify {
        background: #e8ebf0;
        color: #5e646e;
        cursor: not-allowed;
    }
    .ld-classic {
        --loader-size: 16px;
        --loader-color: #202020;
        display: inline-flex;
        width: var(--loader-size);
        height: var(--loader-size);
        margin-left: 4px;
        color: var(--loader-color);
        vertical-align: middle;
    }

    .ld-classic-inner {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .ld-classic-bar {
        position: absolute;
        top: 1px;
        left: calc(50% - 0.75px);
        width: 1.5px;
        height: 3px;
        border-radius: 2px;
        background: currentColor;
        transform-origin: 50% calc(var(--loader-size) / 2 - 1px);
        opacity: .25;
        animation: ld-classic-fade 1.2s linear infinite !important;
        transition: auto !important;
    }

    .ld-classic-bar:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
    .ld-classic-bar:nth-child(2) { transform: rotate(30deg); animation-delay: -.1s; }
    .ld-classic-bar:nth-child(3) { transform: rotate(60deg); animation-delay: -.2s; }
    .ld-classic-bar:nth-child(4) { transform: rotate(90deg); animation-delay: -.3s; }
    .ld-classic-bar:nth-child(5) { transform: rotate(120deg); animation-delay: -.4s; }
    .ld-classic-bar:nth-child(6) { transform: rotate(150deg); animation-delay: -.5s; }
    .ld-classic-bar:nth-child(7) { transform: rotate(180deg); animation-delay: -.6s; }
    .ld-classic-bar:nth-child(8) { transform: rotate(210deg); animation-delay: -.7s; }
    .ld-classic-bar:nth-child(9) { transform: rotate(240deg); animation-delay: -.8s; }
    .ld-classic-bar:nth-child(10) { transform: rotate(270deg); animation-delay: -.9s; }
    .ld-classic-bar:nth-child(11) { transform: rotate(300deg); animation-delay: -1s; }
    .ld-classic-bar:nth-child(12) { transform: rotate(330deg); animation-delay: -1.1s; }

    @keyframes ld-classic-fade {
        0%, 100% { opacity: .2; }
        10% { opacity: 1; }
    }

    .mobile-sticky-form__otp-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
        color: #202020;
        font-size: 12px;
        line-height: 1.3;
    }

    .mobile-sticky-form__otp-meta p {
        display: flex;
        align-items: center;
        gap: 3px;
        min-width: 0;
        margin: 0;
        color: #202020;
        white-space: nowrap;
    }

    .mobile-sticky-form__otp-meta [data-otp-mobile] {
        color: #0868f7;
        width: 75px !important;
    }

    .mobile-sticky-form__otp-meta .mobile-edit {
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .mobile-sticky-form__otp-mobile {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 24px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #0868f7 !important;
        font-size: 12px !important;
        line-height: 1.3;
    }

    .mobile-sticky-form__otp.is-verifying [data-otp-mobile],
    .mobile-sticky-form__otp.is-verifying .mobile-sticky-form__edit,
    .mobile-sticky-form__otp.is-verifying .mobile-sticky-form__resend {
        color: rgba(29, 87, 229, 0.5);
    }

    .mobile-sticky-form__edit,
    .mobile-sticky-form__resend {
        border: 0;
        padding: 2px;
        background: transparent;
        color: #0868f7;
        font: inherit;
        font-size: 12px;
        white-space: nowrap;
        text-decoration: underline;
        cursor: pointer;
    }

    .mobile-sticky-form__edit { display: inline-flex; align-items: center; }
    .mobile-sticky-form__edit:focus-visible,
    .mobile-sticky-form__resend:focus-visible { outline: 2px solid #0868f7; outline-offset: 1px; }
    .mobile-sticky-form__resend:disabled {
        color: #64748b;
        text-decoration: none;
        cursor: not-allowed;
    }
    .mobile-sticky-form__resend:enabled {
        color: #0868f7;
        text-decoration: underline;
    }
    .mobile-sticky-form__error[hidden] { display: none; }

    .mobile-sticky-form .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .mobile-sticky-form__prefix {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        height: 44px;
        padding-left: 12px;
        color: #202020;
        font-size: 14px;
        pointer-events: none;
    }

    .mobile-sticky-form input {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        min-height: 32px;
        border: 1px solid #E6E9EF;
        border-radius: 8px;
        padding: 0 12px 0 48px;
        background-color: #fff;
        color: #202020;
        font-size: 14px;
        outline: none;
    }

    #mobileNumbersticky {
        color: #202020;
    }

    #mobileNumbersticky::placeholder {
        color: #5E646E;
        opacity: 1;
    }

    .mobile-sticky-form input[aria-invalid="true"] { border-color: #b42318; }

    .mobile-sticky-form__submit {
        flex: 0 0 102px;
        width: 102px;
        min-height: 44px;
        border: 0;
        border-radius: 8px;
        padding: 0 8px;
        background: #0868f7;
        color: #fff;
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .mobile-sticky-form input.mobile-sticky-form__otp-digit {
        min-height: 0;
        height: 32px;
        padding: 0;
        font-size: 16px;
        text-align: center;
    }

    .mobile-sticky-form__submit.mobile-sticky-form__verify {
        flex: 0 0 100px;
        width: 100px;
        min-height: 32px;
        font-size: 12px;
    }

    .mobile-sticky-form__submit:not(:disabled):hover { background: #0758d1; }

    .sticky-tc {
        margin-top: 10px;
        color: #5E646E;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
    }

    .sticky-tc a {
        color: #0868f7;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .sticky-tc a:focus-visible {
        outline: 2px solid #0868f7;
        outline-offset: 2px;
    }

    .mobile-sticky-form__error {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 5px 0 0;
        color: #b42318;
        font-size: 11px;
        line-height: 1.4;
    }

    .mobile-sticky-form__error svg { flex: 0 0 14px; }
}

@media (max-width: 360px) {
    .mobile-sticky-form__fields { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-sticky-form__submit { transition: none; }
    .ld-classic-bar { animation-duration: 1.8s; }
}
