/* ========================================================================== 
   APD Mobile UX 3.2.0
   Responsive layer shared by Homey, APD Marketplace and the host portal.
   Desktop structure is intentionally untouched.
   ========================================================================== */

:root {
    --apd-mobile-vh: 100dvh;
    --apd-safe-top: env(safe-area-inset-top, 0px);
    --apd-safe-right: env(safe-area-inset-right, 0px);
    --apd-safe-bottom: env(safe-area-inset-bottom, 0px);
    --apd-safe-left: env(safe-area-inset-left, 0px);
    --apd-mobile-navy: #0D2B6C;
    --apd-mobile-blue: #0868E8;
    --apd-mobile-green: #7CC70A;
    --apd-mobile-bg: #F4F7FB;
    --apd-mobile-line: #E1E7F0;
    --apd-mobile-text: #10264D;
    --apd-mobile-muted: #6B7890;
    --apd-mobile-shadow: 0 18px 55px rgba(13, 43, 108, .16);
}

html.apd-mobile-viewport,
html.apd-mobile-viewport body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.apd-mobile-keyboard-open {
    scroll-behavior: auto !important;
}

.apd-mobile-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    html,
    body {
        min-height: 100%;
    }

    body.apd-mobile-ux-ready {
        min-width: 320px;
        overflow-x: hidden !important;
        padding-left: var(--apd-safe-left);
        padding-right: var(--apd-safe-right);
    }

    body.apd-mobile-modal-open,
    body.modal-open {
        width: 100%;
        overflow: hidden !important;
        touch-action: none;
    }

    body.apd-mobile-modal-open > *:not(.modal):not(.apd-modal):not(.media-modal):not(script):not(style) {
        overscroll-behavior: none;
    }

    /* Avoid iOS form zoom and make every control comfortably tappable. */
    body.apd-mobile-ux-ready input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body.apd-mobile-ux-ready select,
    body.apd-mobile-ux-ready textarea {
        max-width: 100%;
        min-height: 48px;
        font-size: 16px !important;
        line-height: 1.35;
    }

    body.apd-mobile-ux-ready textarea {
        min-height: 118px;
    }

    body.apd-mobile-ux-ready button,
    body.apd-mobile-ux-ready .btn,
    body.apd-mobile-ux-ready [role="button"] {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    body.apd-mobile-ux-ready img,
    body.apd-mobile-ux-ready iframe,
    body.apd-mobile-ux-ready video,
    body.apd-mobile-ux-ready canvas {
        max-width: 100%;
    }

    /* ----------------------------------------------------------------------
       Homey login, registration and password modals
       ---------------------------------------------------------------------- */
    .custom-modal-login,
    #modal-login,
    #modal-register,
    #modal-login-forgot-password {
        padding: 0 !important;
        z-index: 2147483000 !important;
        overflow: hidden !important;
    }

    .custom-modal-login .modal-dialog,
    #modal-login .modal-dialog,
    #modal-register .modal-dialog,
    #modal-login-forgot-password .modal-dialog {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: min(94dvh, var(--apd-mobile-vh, 94dvh)) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        transform: translate3d(0, 0, 0) !important;
        box-shadow: 0 -18px 60px rgba(8, 25, 55, .24) !important;
        overflow: hidden !important;
    }

    .custom-modal-login .modal-body-left,
    #modal-login .modal-body-left,
    #modal-register .modal-body-left {
        display: none !important;
    }

    .custom-modal-login .modal-body-right,
    #modal-login .modal-body-right,
    #modal-register .modal-body-right,
    #modal-login-forgot-password .modal-body-right {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
    }

    .custom-modal-login .modal-content,
    #modal-login .modal-content,
    #modal-register .modal-content,
    #modal-login-forgot-password .modal-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-height: min(94dvh, var(--apd-mobile-vh, 94dvh)) !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .custom-modal-login .modal-header,
    #modal-login .modal-header,
    #modal-register .modal-header,
    #modal-login-forgot-password .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        flex: 0 0 auto !important;
        min-height: 72px !important;
        padding: 20px 22px 14px !important;
        border-bottom: 1px solid #EDF1F6 !important;
        background: rgba(255, 255, 255, .98) !important;
    }

    .custom-modal-login .modal-header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: #D8DEE8;
        transform: translateX(-50%);
    }

    .custom-modal-login .modal-title,
    #modal-login .modal-title,
    #modal-register .modal-title,
    #modal-login-forgot-password .modal-title {
        margin: 5px 42px 0 0 !important;
        color: var(--apd-mobile-navy) !important;
        font-size: 22px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        letter-spacing: -.025em !important;
        text-align: left !important;
    }

    .custom-modal-login .modal-header .close,
    #modal-login .modal-header .close,
    #modal-register .modal-header .close,
    #modal-login-forgot-password .modal-header .close {
        position: absolute !important;
        top: 17px !important;
        right: 16px !important;
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #F2F5F9 !important;
        color: var(--apd-mobile-text) !important;
        font-size: 27px !important;
        line-height: 1 !important;
        opacity: 1 !important;
    }

    .custom-modal-login .modal-body,
    #modal-login .modal-body,
    #modal-register .modal-body,
    #modal-login-forgot-password .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: calc(min(94dvh, var(--apd-mobile-vh, 94dvh)) - 72px) !important;
        padding: 20px 20px calc(24px + var(--apd-safe-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-login-form .form-group {
        margin: 0 0 12px !important;
    }

    .modal-login-form .form-control,
    .custom-modal-login .form-control,
    .custom-modal-login input[type="text"],
    .custom-modal-login input[type="email"],
    .custom-modal-login input[type="password"],
    .custom-modal-login input[type="tel"],
    .custom-modal-login select {
        width: 100% !important;
        min-height: 54px !important;
        padding: 0 15px !important;
        border: 1px solid #CCD5E2 !important;
        border-radius: 13px !important;
        background: #fff !important;
        color: var(--apd-mobile-text) !important;
        box-shadow: none !important;
    }

    .modal-login-form .form-control:focus,
    .custom-modal-login input:focus,
    .custom-modal-login select:focus {
        border-color: var(--apd-mobile-blue) !important;
        box-shadow: 0 0 0 4px rgba(8, 104, 232, .10) !important;
        outline: 0 !important;
    }

    .custom-modal-login .btn,
    .custom-modal-login button[type="submit"],
    .custom-modal-login .homey_login_button,
    .custom-modal-login .homey-register-button {
        width: 100% !important;
        min-height: 52px !important;
        margin-top: 10px !important;
        border-radius: 13px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
    }

    .custom-modal-login .btn-primary,
    .custom-modal-login button[type="submit"] {
        border-color: var(--apd-mobile-navy) !important;
        background: var(--apd-mobile-navy) !important;
        color: #fff !important;
    }

    .custom-modal-login .btn-google-lined,
    .custom-modal-login .btn-facebook-lined,
    .custom-modal-login .gsi-material-button {
        min-height: 50px !important;
        border: 1px solid #D6DDE7 !important;
        border-radius: 13px !important;
        background: #fff !important;
    }

    .custom-modal-login .checkbox,
    .custom-modal-login .forgot-password-text {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        margin: 5px 0 10px !important;
    }

    .custom-modal-login .forgot-password-text {
        float: right !important;
    }

    .custom-modal-login .homey_login_messages p,
    .custom-modal-login .homey_register_messages p {
        padding: 11px 13px !important;
        border-radius: 11px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* ----------------------------------------------------------------------
       Generic Bootstrap and APD dialogs
       ---------------------------------------------------------------------- */
    body.apd-mobile-ux-ready .modal:not(.custom-modal-login) {
        padding: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.apd-mobile-ux-ready .modal:not(.custom-modal-login) .modal-dialog {
        width: calc(100% - 8px) !important;
        max-width: 620px !important;
        min-height: calc(100% - 20px) !important;
        margin: 4px auto !important;
        display: flex !important;
        align-items: center !important;
    }

    body.apd-mobile-ux-ready .modal:not(.custom-modal-login) .modal-content {
        width: 100% !important;
        max-height: calc(var(--apd-mobile-vh, 100dvh) - 28px) !important;
        border: 0 !important;
        border-radius: 20px !important;
        box-shadow: var(--apd-mobile-shadow) !important;
        overflow: hidden !important;
    }

    body.apd-mobile-ux-ready .modal:not(.custom-modal-login) .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        padding: 17px 18px !important;
        background: #fff !important;
        border-bottom: 1px solid var(--apd-mobile-line) !important;
    }

    body.apd-mobile-ux-ready .modal:not(.custom-modal-login) .modal-body {
        max-height: calc(var(--apd-mobile-vh, 100dvh) - 155px) !important;
        padding: 18px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.apd-mobile-ux-ready .modal:not(.custom-modal-login) .modal-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 3 !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        gap: 9px !important;
        padding: 12px 16px calc(12px + var(--apd-safe-bottom)) !important;
        background: rgba(255,255,255,.98) !important;
        border-top: 1px solid var(--apd-mobile-line) !important;
    }

    body.apd-mobile-ux-ready .modal:not(.custom-modal-login) .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    .apd-modal {
        padding: 8px !important;
        align-items: flex-end !important;
        overflow: hidden !important;
    }

    .apd-modal.show {
        display: flex !important;
    }

    .apd-modal .apd-modal-box,
    .apd-modal .apd-modal-content {
        width: 100% !important;
        max-width: 720px !important;
        max-height: calc(var(--apd-mobile-vh, 100dvh) - 16px) !important;
        margin: auto auto 0 !important;
        border-radius: 22px 22px 0 0 !important;
        overflow: hidden !important;
    }

    .apd-modal .apd-modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        min-height: 68px !important;
        padding: 15px 16px !important;
        background: #fff !important;
    }

    .apd-modal .apd-modal-body,
    .apd-modal #apd-modal-contenido {
        max-height: calc(var(--apd-mobile-vh, 100dvh) - 150px) !important;
        padding: 16px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .apd-modal .apd-modal-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 5 !important;
        padding: 12px 14px calc(12px + var(--apd-safe-bottom)) !important;
        background: #fff !important;
    }

    /* WordPress media library used by photo uploaders. */
    .media-modal {
        position: fixed !important;
        inset: var(--apd-safe-top) 0 var(--apd-safe-bottom) 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .media-modal-content {
        border-radius: 0 !important;
    }

    .media-frame-menu {
        display: none !important;
    }

    .media-frame-title,
    .media-frame-router,
    .media-frame-content,
    .media-frame-toolbar {
        left: 0 !important;
    }

    .media-frame-content {
        bottom: 86px !important;
    }

    .media-frame-toolbar {
        height: calc(76px + var(--apd-safe-bottom)) !important;
    }

    .media-toolbar-primary,
    .media-toolbar-secondary {
        max-width: 100% !important;
    }

    /* ----------------------------------------------------------------------
       APD unified host portal
       ---------------------------------------------------------------------- */
    body.apd-host-body {
        min-height: var(--apd-mobile-vh, 100dvh) !important;
        padding-bottom: calc(68px + var(--apd-safe-bottom)) !important;
    }

    .apd-host-topbar {
        top: 0 !important;
        padding-top: var(--apd-safe-top) !important;
    }

    .apd-host-topbar-inner {
        min-height: 64px !important;
        padding: 7px 12px !important;
    }

    .apd-host-brand img {
        width: 82px !important;
        height: 34px !important;
    }

    .apd-host-actions {
        gap: 7px !important;
    }

    .apd-host-profile-menu summary {
        min-width: 58px !important;
        height: 42px !important;
    }

    .apd-host-profile-menu summary img {
        width: 34px !important;
        height: 34px !important;
    }

    .apd-host-profile-menu > div {
        position: fixed !important;
        top: calc(64px + var(--apd-safe-top)) !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-height: calc(var(--apd-mobile-vh, 100dvh) - 86px - var(--apd-safe-top)) !important;
        padding: 12px !important;
        border-radius: 18px !important;
        overflow-y: auto !important;
    }

    .apd-host-main {
        width: 100% !important;
        padding: 16px 12px calc(90px + var(--apd-safe-bottom)) !important;
    }

    .apd-host-nav {
        height: calc(64px + var(--apd-safe-bottom)) !important;
        padding-bottom: var(--apd-safe-bottom) !important;
    }

    .apd-host-nav a {
        height: 64px !important;
        min-width: 0 !important;
        font-size: 9px !important;
    }

    .apd-host-nav a i {
        font-size: 18px !important;
    }

    .apd-host-hero {
        min-height: 0 !important;
        padding: 24px 19px !important;
        border-radius: 22px !important;
    }

    .apd-host-hero h1,
    .apd-host-page-head h1 {
        font-size: clamp(30px, 10vw, 38px) !important;
    }

    .apd-host-kpis {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    .apd-host-kpis article {
        min-width: 0 !important;
        min-height: 98px !important;
        padding: 13px !important;
        border-radius: 16px !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .apd-host-kpis article > i {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }

    .apd-host-kpis strong {
        font-size: 21px !important;
    }

    .apd-host-card,
    .apd-host-listing-card,
    .apd-host-settings,
    .apd-host-calendar-card {
        border-radius: 18px !important;
    }

    .apd-host-calendar-layout {
        display: block !important;
    }

    .apd-host-calendar-main {
        min-width: 0 !important;
        padding: 8px 0 18px !important;
        overflow-x: hidden !important;
    }

    .apd-host-calendar-card {
        overflow-x: auto !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .apd-host-calendar-card #apd-calendar {
        min-width: 650px !important;
    }

    .apd-host-settings {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin-top: 14px !important;
        border: 1px solid var(--apd-mobile-line) !important;
        border-radius: 18px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .apd-host-settings > * {
        max-width: 100% !important;
    }

    .apd-host-settings input,
    .apd-host-settings select,
    .apd-host-settings textarea {
        width: 100% !important;
    }

    /* Host wizard created by APD Reservas. */
    .apd-host-main-wizard {
        padding: 0 0 calc(76px + var(--apd-safe-bottom)) !important;
    }

    .apd-wizard-stage {
        width: 100% !important;
        min-height: calc(var(--apd-mobile-vh, 100dvh) - 140px) !important;
        padding: 26px 14px calc(100px + var(--apd-safe-bottom)) !important;
    }

    .apd-wizard-topline {
        top: calc(64px + var(--apd-safe-top)) !important;
        padding: 9px 12px !important;
    }

    .apd-wizard-centered,
    .apd-wizard-centered.apd-wizard-wide,
    .apd-wizard-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .apd-wizard h1 {
        font-size: clamp(29px, 9vw, 37px) !important;
        line-height: 1.05 !important;
    }

    .apd-wizard-option-grid,
    .amenity-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    .apd-wizard-option {
        min-width: 0 !important;
        min-height: 105px !important;
        padding: 14px !important;
    }

    .apd-space-option {
        min-height: 88px !important;
        padding: 15px !important;
    }

    .apd-photo-dropzone {
        min-height: 245px !important;
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }

    .apd-photo-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .apd-wizard-footer {
        height: calc(72px + var(--apd-safe-bottom)) !important;
        padding: 0 10px var(--apd-safe-bottom) !important;
        grid-template-columns: 88px minmax(0, 1fr) 112px !important;
        gap: 8px !important;
    }

    /* ----------------------------------------------------------------------
       APD Marketplace 8 profile/account portal (.apd7-*)
       ---------------------------------------------------------------------- */
    body.apd7-host-portal {
        padding-bottom: calc(72px + var(--apd-safe-bottom)) !important;
    }

    .apd7-topbar {
        padding-top: var(--apd-safe-top) !important;
    }

    .apd7-topbar-inner {
        width: calc(100% - 20px) !important;
        height: 62px !important;
    }

    .apd7-profile-menu {
        top: calc(58px + var(--apd-safe-top)) !important;
        right: 8px !important;
        left: 8px !important;
        max-height: calc(var(--apd-mobile-vh, 100dvh) - 78px - var(--apd-safe-top)) !important;
        border-radius: 18px !important;
        overscroll-behavior: contain !important;
    }

    .apd7-main {
        width: calc(100% - 20px) !important;
        padding-top: 14px !important;
    }

    .apd7-account-rail nav {
        margin: 0 -2px !important;
        padding: 2px 2px 8px !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
    }

    .apd7-account-rail nav::-webkit-scrollbar {
        display: none !important;
    }

    .apd7-account-rail a {
        min-height: 42px !important;
        scroll-snap-align: start !important;
    }

    .apd7-profile-hero {
        gap: 17px !important;
    }

    .apd7-profile-card,
    .apd7-form-card {
        border-radius: 18px !important;
    }

    .apd7-profile-card {
        min-height: 0 !important;
        padding: 18px !important;
    }

    .apd7-form-card {
        padding: 17px !important;
    }

    .apd7-form-title {
        margin-bottom: 17px !important;
    }

    .apd7-form-grid {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .apd7-form-grid label.is-wide {
        grid-column: auto !important;
    }

    .apd7-sticky-form-footer {
        left: 0 !important;
        right: 0 !important;
        bottom: calc(68px + var(--apd-safe-bottom)) !important;
        padding: 9px 12px !important;
        border-radius: 0 !important;
    }

    .apd7-mobile-nav {
        height: calc(68px + var(--apd-safe-bottom)) !important;
        padding-bottom: max(7px, var(--apd-safe-bottom)) !important;
    }

    /* ----------------------------------------------------------------------
       APD Marketplace publication/start wizard (.apd6-*)
       ---------------------------------------------------------------------- */
    body.apd6-host-app {
        min-height: var(--apd-mobile-vh, 100dvh) !important;
    }

    .apd6-host-topbar {
        height: calc(64px + var(--apd-safe-top)) !important;
        padding: var(--apd-safe-top) 12px 0 !important;
    }

    .apd6-host-logo {
        width: 84px !important;
    }

    .apd6-host-topbar-actions {
        gap: 6px !important;
    }

    .apd6-host-topbar-actions a {
        min-height: 40px !important;
        padding: 0 11px !important;
        font-size: 11px !important;
    }

    .apd6-host-main {
        padding-top: calc(64px + var(--apd-safe-top)) !important;
    }

    .apd6-start-screen {
        width: calc(100% - 24px) !important;
        min-height: 0 !important;
        padding: 30px 0 22px !important;
        grid-template-columns: 1fr !important;
        gap: 27px !important;
    }

    .apd6-start-copy h1 {
        font-size: clamp(36px, 12vw, 48px) !important;
    }

    .apd6-start-copy > p {
        font-size: 15px !important;
    }

    .apd6-offer-grid {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .apd6-offer-card {
        min-height: 0 !important;
        padding: 14px !important;
        border-radius: 21px !important;
    }

    .apd6-offer-image {
        height: 205px !important;
        border-radius: 16px !important;
    }

    .apd6-offer-card > small {
        min-height: 0 !important;
    }

    .apd6-start-benefits {
        width: calc(100% - 24px) !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .apd6-wizard {
        min-height: calc(var(--apd-mobile-vh, 100dvh) - 64px) !important;
        padding-bottom: calc(82px + var(--apd-safe-bottom)) !important;
    }

    .apd6-save-indicator {
        top: calc(72px + var(--apd-safe-top)) !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
        text-align: center !important;
    }

    .apd6-step,
    .apd6-step-intro {
        width: calc(100% - 24px) !important;
        min-height: calc(var(--apd-mobile-vh, 100dvh) - 160px) !important;
        padding: 58px 0 30px !important;
    }

    .apd6-step-intro.is-active {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    .apd6-step-column,
    .apd6-step-column.apd6-narrow,
    .apd6-step-column.apd6-medium {
        width: 100% !important;
        max-width: 100% !important;
    }

    .apd6-step-copy h1,
    .apd6-step-column h1,
    .apd6-review-copy h1 {
        font-size: clamp(31px, 10vw, 41px) !important;
    }

    .apd6-term-grid,
    .apd6-photo-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    .apd6-choice-row {
        min-height: 92px !important;
        padding: 15px !important;
    }

    .apd6-map-card {
        width: 100% !important;
        min-height: 290px !important;
        margin-top: 18px !important;
    }

    .apd6-wizard-footer {
        height: calc(74px + var(--apd-safe-bottom)) !important;
        padding: 0 10px var(--apd-safe-bottom) !important;
    }

    /* Search/address and select dropdowns should stay inside the viewport. */
    .pac-container,
    .select2-container,
    .select2-dropdown,
    .bootstrap-select.open .dropdown-menu,
    .daterangepicker,
    .datepicker,
    .flatpickr-calendar.open {
        max-width: calc(100vw - 20px) !important;
        z-index: 2147483640 !important;
    }

    .pac-container {
        border-radius: 14px !important;
        box-shadow: var(--apd-mobile-shadow) !important;
        overflow: hidden !important;
    }

    .pac-item {
        min-height: 48px !important;
        padding: 9px 12px !important;
        white-space: normal !important;
    }

    /* Homey maps/search results and public cards. */
    .half-map-left-wrap,
    .half-map-right-wrap,
    .listing-map-wrap,
    .experience-map-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .half-map-right-wrap {
        min-height: 48dvh !important;
    }

    .item-wrap,
    .property-item,
    .item-card-view {
        max-width: 100% !important;
    }

    /* Toasts and processing messages remain readable above mobile navigation. */
    #homey_modal .modal-dialog {
        min-height: auto !important;
        margin-top: 20vh !important;
    }

    #homey_modal .homey_messages_modal {
        padding: 22px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
}

@media (max-width: 380px) {
    .apd-wizard-option-grid,
    .amenity-grid,
    .apd6-term-grid,
    .apd6-photo-grid {
        grid-template-columns: 1fr !important;
    }

    .apd-host-nav a span,
    .apd7-mobile-nav a span {
        font-size: 7.5px !important;
    }

    .apd-host-kpis {
        grid-template-columns: 1fr !important;
    }
}