/**
 * Fixes to the theme's own mobile header and bottom bar. Always loaded;
 * independent of the mobile navigation switch in inc/mobile-nav.php.
 */

/* Single-listing pages use the theme's mobile header, sized by the image
   itself; the square-ish Bajanlist logo rendered 94px tall in a ~70px bar. */
img.pacz-mobile-logo {
    width: auto !important;
    max-height: 48px;
}

/* Mobile header (template 11767): the page leaves a 68px gap for it, but the
   logo column's padding (10px top and bottom) plus the gap under the inline
   image made it 99px tall, so the top of every page sat under it. Trim the
   padding and size the logo to fit the 68px bar. */
.elementor-11767 .elementor-element.elementor-element-71752e3 > .elementor-widget-wrap {
    padding: 4px 0 !important;
}
.elementor-11767 .elementor-element.elementor-element-30ddfc7 img {
    display: block;
    width: auto !important;
    height: 50px !important;
    max-width: none !important;
}

/* Listing card titles: printed in full now (inc/listing-titles.php); one line
   with an ellipsis on larger screens, two lines on phones (below). The theme
   makes the h2 inline-block, which sizes it to the whole title and lets it run
   past the card's padding, so it is made a block to keep the title inside. */
.directorypress-listing-title h2 {
    display: block;
    max-width: 100%;
}
.directorypress-listing-title h2 a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {

    /* ------------------------------------------------------------------
     * Mobile header: sign in. The theme's icon rendered at 0x0 (and linked to
     * the theme demo site, fixed in the header template); show it in the
     * site's navy with a "Sign in" label and a 48px tap area. Only shown to
     * visitors who aren't logged in; logged-in users get the theme's menu.
     * ------------------------------------------------------------------ */
    html body .elementor-11767 .elementor-element.elementor-element-6fa48092 {
        width: auto !important;
        max-width: none !important;
    }
    html body .elementor-11767 .elementor-element.elementor-element-6fa48092 .hfb-login-menu-link {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 48px;
        min-height: 48px;
        padding: 0 !important;
        color: #1d1c72 !important;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    html body .elementor-11767 .elementor-element.elementor-element-6fa48092 .hfb-login-menu-link svg,
    html body .elementor-11767 .elementor-element.elementor-element-6fa48092 .hfb-login-menu-link svg path {
        fill: #1d1c72 !important;
    }
    html body .elementor-11767 .elementor-element.elementor-element-6fa48092 .hfb-login-menu-link svg {
        display: block;
        width: 26px !important;
        height: 26px !important;
    }
    html body .elementor-11767 .elementor-element.elementor-element-6fa48092 .hfb-login-menu-link::after {
        content: "Sign in";
        color: #1d1c72;
        font-size: 11px;
        font-weight: 600;
        line-height: 13px;
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------
     * Readable text without zooming.
     * ------------------------------------------------------------------ */
    .directorypress-listing-title h2 a {
        display: -webkit-box;
        min-height: 42px; /* two lines, so cards in a row stay level */
        max-height: 42px;
        line-height: 21px !important;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .directorypress-location,
    .directorypress-location span,
    .listing-location .directorypress-location {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    .field-content .price-options {
        font-size: 13px !important;
    }
    .listing-status-tag {
        font-size: 12px !important;
    }
    .directorypress-found-listings .badge,
    .directorypress-author .author-status {
        font-size: 13px !important;
    }
    .mobile-author-msg > a,
    .mobile-author-offer > a {
        font-size: 14px !important;
    }
    /* Anything under 16px makes iOS zoom into a field when it's tapped. */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ------------------------------------------------------------------
     * Bottom bar (Elementor template 11775, section 2661909b).
     * The five items were packed to the left at their label widths, the
     * "Sell Now" label sat higher than the others and the menu icon lower.
     * Give each item an equal slot and line icons and labels up.
     * ------------------------------------------------------------------ */
    html body .elementor-11775 .elementor-element.elementor-element-2661909b .elementor-widget-wrap {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        align-content: flex-end !important;
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom)) !important;
    }
    html body .elementor-11775 .elementor-element.elementor-element-2661909b .elementor-widget-wrap > .elementor-element {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0;
        max-width: none !important;
        margin: 0 !important;
        align-self: flex-end !important;
    }
    html body .elementor-11775 .elementor-element.elementor-element-2661909b .hfb-button-wraper {
        text-align: center;
    }
    html body .elementor-11775 .elementor-element.elementor-element-2661909b .hfb-button {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        width: 100%;
        min-height: 44px;
        font-size: 12px !important;
        line-height: 14px !important;
        white-space: nowrap;
    }
    html body .elementor-11775 .elementor-element.elementor-element-2661909b .hfb-button > svg {
        /* Font Awesome icons (the Favorites heart) render as inline SVG. */
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body .elementor-11775 .elementor-element.elementor-element-2661909b .hfb-button > i {
        display: block !important;
        width: auto !important;
        height: 24px;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 24px !important;
        line-height: 24px !important;
    }

    /* "Sell Now": the plus was drawn black at 10px inside the blue circle.
       Keep the raised circle, show a white plus, and let its label share the
       baseline with the other items. */
    html body .elementor-11775 .elementor-element.elementor-element-3a000493 .hfb-button > svg {
        box-sizing: content-box;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        max-width: none !important;
        margin: -30px 0 0 !important;
        padding: 13px !important;
        fill: #fff;
        box-shadow: 0 4px 12px rgba(58, 119, 255, .35);
    }
    html body .elementor-11775 .elementor-element.elementor-element-3a000493 .hfb-button > svg path {
        fill: #fff !important;
    }

    /* Menu (hamburger): same 24px icon row and a "Menu" label like the rest. */
    html body .elementor-11775 .elementor-element.elementor-element-1b68227f .hfb-nav-menu-open.hfb-nav-menu__toggle {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        min-height: 44px;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    html body .elementor-11775 .elementor-element.elementor-element-1b68227f .hfb-nav-menu-open .hfb-nav-menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        margin: 0 !important;
        font-size: 22px;
        line-height: 24px;
    }
    html body .elementor-11775 .elementor-element.elementor-element-1b68227f .hfb-nav-menu-open .hfb-nav-menu-icon svg {
        width: 22px;
        height: 22px;
        fill: #555;
    }
    html body .elementor-11775 .elementor-element.elementor-element-1b68227f .hfb-nav-menu-open::after {
        content: "Menu";
        color: #555;
        font-weight: 600;
        font-size: 12px;
        line-height: 14px;
    }
}