/* Easy Rent Pro mobile header + direct contact refinement v29 */

/* Keep the top contact area clean on desktop. */
.erp-direct-contact[data-erp-direct-contact="topbar"] {
    justify-content: flex-end !important;
    font-size: 13px;
}

.erp-direct-contact[data-erp-direct-contact="topbar"] a {
    color: inherit;
    text-decoration: none;
}

.erp-direct-contact[data-erp-direct-contact="topbar"] a:hover {
    text-decoration: underline;
}

/* Mobile/tablet header */
@media (max-width: 900px) {
    /* Phone and WhatsApp remain visible above the primary header. */
    .topbar {
        display: block !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .topbar .container,
    .topbar .topbar-inner {
        width: 100% !important;
        max-width: none !important;
    }

    .topbar-inner {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 5px 14px !important;
    }

    /* Product taglines are useful on desktop but consume too much mobile room. */
    .topbar-list {
        display: none !important;
    }

    .erp-direct-contact[data-erp-direct-contact="topbar"] {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 18px !important;
        flex-wrap: nowrap !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .erp-direct-contact[data-erp-direct-contact="topbar"] .erp-contact-intro {
        display: none !important;
    }

    .erp-direct-contact[data-erp-direct-contact="topbar"] a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }

    .erp-direct-contact[data-erp-direct-contact="topbar"] a span[aria-hidden="true"] {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .site-header {
        position: relative;
    }

    .site-header .nav-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px auto !important;
        grid-template-areas:
            "logo menu language"
            "nav nav nav" !important;
        align-items: center !important;
        column-gap: 9px !important;
        row-gap: 0 !important;
        min-height: 68px !important;
        padding: 9px 14px !important;
    }

    .site-header .logo {
        grid-area: logo !important;
        min-width: 0 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .site-header .logo-mark {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 14px !important;
        font-size: 17px !important;
        line-height: 46px !important;
    }

    .site-header .logo-copy {
        min-width: 0 !important;
    }

    .site-header .logo-copy strong {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 18px !important;
        line-height: 1.05 !important;
    }

    .site-header .logo-copy small {
        display: block !important;
        margin-top: 3px !important;
        font-size: 9px !important;
        letter-spacing: .08em !important;
        white-space: nowrap !important;
    }

    .site-header .menu-toggle {
        grid-area: menu !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        margin: 0 !important;
        border-radius: 13px !important;
    }

    .site-header .header-actions {
        grid-area: language !important;
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    /* Trial CTA remains in the mobile menu; don't force it into the top row. */
    .site-header .header-actions > .btn {
        display: none !important;
    }

    .site-header .language-switcher {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        max-width: 118px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .site-header .language-switcher select {
        width: 112px !important;
        min-width: 0 !important;
        max-width: 112px !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 28px 0 13px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        line-height: 44px !important;
    }

    .site-header .primary-nav {
        grid-area: nav !important;
        width: 100% !important;
    }

    /* If the navigation opens as a flex/block menu, let it use the full row. */
    .site-header .primary-nav.is-open,
    .site-header .primary-nav.open,
    .site-header .primary-nav.active {
        margin-top: 10px !important;
    }
}

@media (max-width: 520px) {
    .topbar-inner {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .erp-direct-contact[data-erp-direct-contact="topbar"] {
        gap: 11px !important;
        font-size: 11px !important;
    }

    .site-header .nav-wrap {
        grid-template-columns: minmax(0, 1fr) 42px 96px !important;
        column-gap: 7px !important;
        min-height: 62px !important;
        padding: 8px 10px !important;
    }

    .site-header .logo {
        gap: 8px !important;
    }

    .site-header .logo-mark {
        flex-basis: 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        line-height: 42px !important;
    }

    .site-header .logo-copy strong {
        font-size: 16px !important;
    }

    .site-header .logo-copy small {
        font-size: 8px !important;
    }

    .site-header .menu-toggle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .site-header .language-switcher {
        max-width: 96px !important;
    }

    .site-header .language-switcher select {
        width: 96px !important;
        max-width: 96px !important;
        min-height: 42px !important;
        height: 42px !important;
        padding-left: 11px !important;
        padding-right: 24px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    .erp-direct-contact[data-erp-direct-contact="topbar"] {
        gap: 8px !important;
        font-size: 10px !important;
    }

    .site-header .nav-wrap {
        grid-template-columns: minmax(0, 1fr) 40px 88px !important;
        column-gap: 5px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .site-header .logo-mark {
        flex-basis: 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        line-height: 40px !important;
    }

    .site-header .logo-copy strong {
        font-size: 15px !important;
    }

    .site-header .logo-copy small {
        display: none !important;
    }

    .site-header .menu-toggle {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }

    .site-header .language-switcher,
    .site-header .language-switcher select {
        width: 88px !important;
        max-width: 88px !important;
    }
}