/* ======================================================================
   APD 63.0.0 — mobile session / auth polish
   Mobile-only layer. Desktop/tablet are intentionally untouched.
   ====================================================================== */

@media (max-width: 767px) {
    :root{
        --apd63-nav-h:72px;
        --apd63-safe-bottom:env(safe-area-inset-bottom,0px);
        --apd63-ink:#222;
        --apd63-muted:#717171;
        --apd63-line:#ddd;
        --apd63-soft:#f7f7f7;
        --apd63-blue:#0d2b6c;
        --apd63-blue2:#18439f;
    }

    /* ---------------------------------------------------------------
       Signed-in navigation: 5 comfortable destinations like a native app.
       Guests keep the existing 3-button rail.
       --------------------------------------------------------------- */
    body.logged-in.apd141-manual-ui .apd10-mobile-nav,
    body.logged-in.apd-marketplace-ui .apd10-mobile-nav{
        height:calc(var(--apd63-nav-h) + var(--apd63-safe-bottom))!important;
        padding:6px 10px var(--apd63-safe-bottom)!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        align-items:start!important;
        gap:0!important;
    }
    body.logged-in .apd10-mobile-nav :where(a,button){
        min-height:60px!important;
        padding:4px 1px 2px!important;
        gap:3px!important;
        color:#6a6a6a!important;
    }
    body.logged-in .apd10-mobile-nav .apd5-icon{
        width:27px!important;
        height:27px!important;
        stroke-width:1.7!important;
    }
    body.logged-in .apd10-mobile-nav img{
        width:29px!important;
        height:29px!important;
        border:1.5px solid transparent!important;
        object-fit:cover!important;
    }
    body.logged-in .apd10-mobile-nav span{
        max-width:100%!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
        font-size:11px!important;
        line-height:13px!important;
        font-weight:500!important;
        letter-spacing:-.1px!important;
    }
    body.logged-in .apd10-mobile-nav :where(a,button).is-active,
    body.logged-in .apd10-mobile-nav :where(a,button)[aria-current="page"]{
        color:var(--apd63-blue)!important;
    }
    body.logged-in .apd10-mobile-nav a[data-apd-mobile-nav="profile"].is-active img,
    body.logged-in .apd10-mobile-nav a[data-apd-mobile-nav="profile"][aria-current="page"] img{
        border-color:var(--apd63-blue)!important;
    }

    /* Keep public content clear of the larger signed-in bar. */
    body.logged-in.apd-marketplace-ui:not(.single-listing){
        padding-bottom:calc(var(--apd63-nav-h) + var(--apd63-safe-bottom))!important;
    }

    /* ---------------------------------------------------------------
       Authentication: native-feeling mobile sheet with stable keyboard.
       --------------------------------------------------------------- */
    body #apd5-auth-modal.apd5-auth-modal,
    body.apd141-manual-ui #apd5-auth-modal{
        position:fixed!important;
        inset:0!important;
        z-index:100000!important;
        width:100vw!important;
        height:var(--apd-auth-visible-height,100dvh)!important;
        min-height:0!important;
        padding:8px 0 0!important;
        display:flex!important;
        align-items:flex-end!important;
        justify-content:center!important;
        background:rgba(0,0,0,.52)!important;
        overscroll-behavior:contain!important;
    }
    body #apd5-auth-modal[hidden]{display:none!important;}

    body #apd5-auth-modal .apd54-auth-dialog,
    body #apd5-auth-modal .apd5-auth-dialog,
    body.apd141-manual-ui #apd5-auth-modal .apd54-auth-dialog,
    body.apd141-manual-ui #apd5-auth-modal .apd5-auth-dialog{
        position:relative!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        height:min(760px,calc(var(--apd-auth-visible-height,100dvh) - 8px))!important;
        max-height:calc(var(--apd-auth-visible-height,100dvh) - 8px)!important;
        margin:0!important;
        padding:66px 24px calc(24px + env(safe-area-inset-bottom,0px))!important;
        border:0!important;
        border-radius:26px 26px 0 0!important;
        background:#fff!important;
        box-shadow:0 -8px 32px rgba(0,0,0,.18)!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior:contain!important;
        scrollbar-width:none!important;
    }
    body #apd5-auth-modal .apd54-auth-dialog::-webkit-scrollbar,
    body #apd5-auth-modal .apd5-auth-dialog::-webkit-scrollbar{display:none!important;}

    /* Keyboard open: use every available pixel and avoid jumping controls. */
    body #apd5-auth-modal.is-keyboard-open{
        padding-top:0!important;
        align-items:flex-start!important;
    }
    body #apd5-auth-modal.is-keyboard-open .apd54-auth-dialog,
    body #apd5-auth-modal.is-keyboard-open .apd5-auth-dialog{
        height:var(--apd-auth-visible-height,100dvh)!important;
        max-height:var(--apd-auth-visible-height,100dvh)!important;
        border-radius:0!important;
        padding-top:58px!important;
    }

    /* Header controls */
    body #apd5-auth-modal :where(.apd54-auth-back,.apd5-auth-close){
        position:absolute!important;
        top:16px!important;
        z-index:6!important;
        width:42px!important;
        min-width:42px!important;
        height:42px!important;
        min-height:42px!important;
        padding:0!important;
        display:grid!important;
        place-items:center!important;
        border:0!important;
        border-radius:50%!important;
        background:#f7f7f7!important;
        color:#222!important;
        box-shadow:none!important;
        font-size:26px!important;
        line-height:1!important;
    }
    body #apd5-auth-modal .apd54-auth-back{left:18px!important;}
    body #apd5-auth-modal .apd5-auth-close{right:18px!important;}

    /* Brand and heading */
    body #apd5-auth-modal:not(.apd56-profile-step) .apd54-auth-brand{
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:100%!important;
        min-height:46px!important;
        margin:0 auto 14px!important;
    }
    body #apd5-auth-modal:not(.apd56-profile-step) .apd54-auth-brand img{
        width:auto!important;
        height:42px!important;
        max-width:128px!important;
        object-fit:contain!important;
    }
    body #apd5-auth-modal .apd54-auth-dialog > h2,
    body #apd5-auth-modal .apd5-auth-dialog > h2,
    body.apd141-manual-ui #apd5-auth-modal h2{
        width:100%!important;
        margin:0 0 24px!important;
        color:#222!important;
        text-align:center!important;
        font-size:27px!important;
        line-height:33px!important;
        letter-spacing:-.65px!important;
        font-weight:750!important;
    }

    body #apd5-auth-modal .apd54-auth-subtitle,
    body #apd5-auth-modal #apd5-auth-subtitle{
        margin:-14px auto 22px!important;
        color:var(--apd63-muted)!important;
        text-align:center!important;
        font-size:14px!important;
        line-height:20px!important;
    }

    /* Identifier / OTP form */
    body #apd5-auth-modal .apd5-auth-step{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
    }
    body #apd5-auth-modal #apd5-auth-identifier-form,
    body #apd5-auth-modal #apd54-auth-otp-form{
        display:block!important;
    }
    body #apd5-auth-modal #apd5-auth-identifier-form[hidden],
    body #apd5-auth-modal #apd54-auth-otp-form[hidden],
    body #apd5-auth-modal #apd55-auth-identity-form[hidden]{display:none!important;}

    body #apd5-auth-modal .apd54-identifier-shell,
    body #apd5-auth-modal .apd5-auth-identifier-shell{
        width:100%!important;
        min-height:56px!important;
        border:1.5px solid #717171!important;
        border-radius:12px!important;
        background:#fff!important;
        overflow:hidden!important;
    }
    body #apd5-auth-modal #apd5-auth-identifier{
        width:100%!important;
        height:56px!important;
        min-height:56px!important;
        padding:0 16px!important;
        border:0!important;
        border-radius:0!important;
        background:#fff!important;
        color:#222!important;
        box-shadow:none!important;
        outline:0!important;
        font-size:16px!important;
        line-height:22px!important;
        -webkit-appearance:none!important;
        appearance:none!important;
    }
    body #apd5-auth-modal .apd54-identifier-shell:focus-within{
        border-color:#222!important;
        box-shadow:inset 0 0 0 1px #222!important;
    }
    body #apd5-auth-modal .apd54-country{
        min-width:74px!important;
        height:56px!important;
        display:flex!important;
        align-items:center!important;
        border-right:1px solid #ddd!important;
        background:#fff!important;
    }
    body #apd5-auth-modal .apd54-country[hidden]{display:none!important;}
    body #apd5-auth-modal #apd54-country-code{
        width:100%!important;
        height:56px!important;
        padding:0 10px!important;
        border:0!important;
        background:#fff!important;
        color:#222!important;
        font-size:16px!important;
        outline:0!important;
        appearance:none!important;
        -webkit-appearance:none!important;
    }
    body #apd5-auth-modal .apd54-identifier-shell:has(.apd54-country:not([hidden])){
        display:grid!important;
        grid-template-columns:74px minmax(0,1fr)!important;
        align-items:center!important;
    }
    body #apd5-auth-modal .apd54-code-input{
        width:100%!important;
        height:58px!important;
        min-height:58px!important;
        padding:0 16px!important;
        border:1.5px solid #717171!important;
        border-radius:12px!important;
        background:#fff!important;
        color:#222!important;
        box-shadow:none!important;
        outline:0!important;
        font-size:25px!important;
        line-height:22px!important;
        -webkit-appearance:none!important;
        appearance:none!important;
    }
    body #apd5-auth-modal .apd54-code-input:focus{
        border-color:#222!important;
        box-shadow:inset 0 0 0 1px #222!important;
    }
    body #apd5-auth-modal .apd54-code-input{
        text-align:center!important;
        font-size:25px!important;
        letter-spacing:10px!important;
        font-variant-numeric:tabular-nums!important;
    }
    body #apd5-auth-modal .apd54-otp-copy{
        margin:0 0 16px!important;
        color:#222!important;
        text-align:center!important;
        font-size:15px!important;
        line-height:21px!important;
    }
    body #apd5-auth-modal .apd54-resend-row{
        margin:14px 0 20px!important;
        text-align:center!important;
        color:#717171!important;
        font-size:14px!important;
    }
    body #apd5-auth-modal .apd54-resend-row button,
    body #apd5-auth-modal .apd54-other-method{
        color:#222!important;
        font-weight:650!important;
        text-decoration:underline!important;
        text-underline-offset:3px!important;
    }

    body #apd5-auth-modal .apd54-legal-copy{
        margin:10px 0 18px!important;
        color:#717171!important;
        font-size:12px!important;
        line-height:17px!important;
    }
    body #apd5-auth-modal .apd54-legal-copy a{color:#222!important;font-weight:600!important;}

    /* Primary action: large, reachable and APD branded. */
    body #apd5-auth-modal .apd5-auth-primary,
    body.apd141-manual-ui #apd5-auth-modal .apd5-auth-primary{
        width:100%!important;
        height:54px!important;
        min-height:54px!important;
        margin:0!important;
        padding:0 20px!important;
        border:0!important;
        border-radius:11px!important;
        background:linear-gradient(90deg,#18439f,#0d2b6c)!important;
        color:#fff!important;
        box-shadow:none!important;
        font-size:16px!important;
        line-height:54px!important;
        font-weight:750!important;
        text-align:center!important;
    }
    body #apd5-auth-modal .apd5-auth-primary:disabled{opacity:.55!important;}

    /* Divider */
    body #apd5-auth-modal .apd5-auth-divider{
        position:relative!important;
        height:24px!important;
        margin:18px 0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        color:#717171!important;
        font-size:13px!important;
    }
    body #apd5-auth-modal .apd5-auth-divider::before{
        content:""!important;
        position:absolute!important;
        left:0!important;right:0!important;top:50%!important;
        height:1px!important;
        background:#ddd!important;
    }
    body #apd5-auth-modal .apd5-auth-divider span{
        position:relative!important;
        z-index:1!important;
        padding:0 14px!important;
        background:#fff!important;
    }

    /* Google / Apple: full-width, icon left, label optically centered. */
    body #apd5-auth-modal .apd54-social-area .apd5-auth-socials{
        width:100%!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:11px!important;
    }
    body #apd5-auth-modal .apd54-social-area .apd5-auth-social.apd56-social-button{
        width:100%!important;
        min-width:0!important;
        height:54px!important;
        min-height:54px!important;
        padding:0 16px!important;
        display:grid!important;
        grid-template-columns:32px minmax(0,1fr) 32px!important;
        align-items:center!important;
        border:1.5px solid #222!important;
        border-radius:11px!important;
        background:#fff!important;
        color:#222!important;
        box-shadow:none!important;
        font-size:15px!important;
        font-weight:650!important;
    }
    body #apd5-auth-modal .apd54-social-area .apd5-auth-social-icon{
        grid-column:1!important;
        width:22px!important;
        height:22px!important;
        margin:0 auto!important;
    }
    body #apd5-auth-modal .apd54-social-area .apd56-social-label{
        grid-column:2!important;
        text-align:center!important;
        overflow:visible!important;
        text-overflow:clip!important;
    }
    body #apd5-auth-modal .apd54-social-area .apd56-social-spacer{grid-column:3!important;}

    /* ---------------------------------------------------------------
       Required account details step: full-height, scrollable, no clipped CTA.
       --------------------------------------------------------------- */
    body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog,
    body #apd5-auth-modal.apd56-profile-step .apd5-auth-dialog{
        height:calc(var(--apd-auth-visible-height,100dvh) - 8px)!important;
        max-height:calc(var(--apd-auth-visible-height,100dvh) - 8px)!important;
        padding:66px 20px calc(24px + env(safe-area-inset-bottom,0px))!important;
    }
    body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog > h2{
        margin:0 auto 7px!important;
        font-size:26px!important;
        line-height:32px!important;
    }
    body #apd5-auth-modal.apd56-profile-step #apd5-auth-subtitle{
        margin:0 auto 24px!important;
        max-width:330px!important;
        font-size:14px!important;
        line-height:20px!important;
    }
    body #apd5-auth-modal .apd56-field-block{margin:0 0 19px!important;}
    body #apd5-auth-modal .apd56-field-title{
        margin:0 0 8px!important;
        font-size:16px!important;
        line-height:20px!important;
        font-weight:700!important;
    }
    body #apd5-auth-modal .apd56-name-shell,
    body #apd5-auth-modal .apd56-field-input{
        border-radius:11px!important;
    }
    body #apd5-auth-modal .apd56-name-shell input,
    body #apd5-auth-modal .apd56-field-input{
        height:58px!important;
        min-height:58px!important;
        font-size:16px!important;
    }
    body #apd5-auth-modal .apd56-field-help,
    body #apd5-auth-modal .apd56-terms-copy,
    body #apd5-auth-modal .apd56-marketing-box > p{
        font-size:12px!important;
        line-height:16px!important;
    }
    body #apd5-auth-modal .apd56-marketing-box{
        padding:14px!important;
        margin:2px 0 16px!important;
    }
    body #apd5-auth-modal .apd56-accept{
        margin-bottom:4px!important;
    }

    /* Error message should not shift the whole modal excessively. */
    body #apd5-auth-modal .apd5-auth-message:not([hidden]){
        margin:0 0 12px!important;
        padding:10px 12px!important;
        border-radius:10px!important;
        font-size:13px!important;
        line-height:18px!important;
    }
}

@media (max-width: 390px) {
    body #apd5-auth-modal .apd54-auth-dialog,
    body #apd5-auth-modal .apd5-auth-dialog{
        padding-left:18px!important;
        padding-right:18px!important;
    }
    body #apd5-auth-modal .apd54-auth-dialog > h2,
    body #apd5-auth-modal .apd5-auth-dialog > h2{font-size:25px!important;}
    body.logged-in .apd10-mobile-nav span{font-size:10.5px!important;}
}