/* ==========================================================================
   Portal chrome: design tokens, shared buttons, header and footer.
   Loaded by admin/layouts/portal_layout and binshopsblog/single_post, so it
   applies to every public portal page. Rules are scoped to .hb-header,
   .hb-footer and .hb-btn so page bodies are not affected.
   ========================================================================== */

:root {
    --hb-red: #dc2b25;
    --hb-red-dark: #b8211c;
    --hb-red-soft: #fdecec;
    --hb-ink: #1b1f27;
    --hb-text: #4a5160;
    --hb-muted: #6b7280;
    --hb-line: #e6e8ec;
    --hb-soft: #f6f7f9;
    --hb-dark: #16191e;
    --hb-dark-2: #1f2329;
    --hb-dark-line: rgba(255, 255, 255, .08);
    --hb-on-dark: #aab0b9;
    --hb-radius: 12px;
    --hb-radius-sm: 8px;
    --hb-shadow: 0 6px 24px rgba(17, 24, 39, .08);
    --hb-shadow-lg: 0 14px 40px rgba(17, 24, 39, .14);
    --hb-font: "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Buttons ---------- */
.hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--hb-radius-sm);
    font-family: var(--hb-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.hb-btn-primary,
.hb-btn-primary:visited {
    background: var(--hb-red);
    border-color: var(--hb-red);
    color: #fff !important;
}
.hb-btn-primary:hover,
.hb-btn-primary:focus {
    background: var(--hb-red-dark);
    border-color: var(--hb-red-dark);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(220, 43, 37, .28);
}
.hb-btn:focus-visible {
    outline: 2px solid var(--hb-ink);
    outline-offset: 2px;
}
.hb-btn-sm {
    padding: 9px 16px;
    font-size: 14px;
}
.hb-btn-block {
    width: 100%;
}

/* ---------- Header ---------- */
.hb-header {
    font-family: var(--hb-font);
    box-shadow: 0 2px 18px rgba(17, 24, 39, .08);
}
/* main.js also runs jQuery Sticky on this header. The layout has no doctype (quirks mode), so the
   plugin misreads the window height and flips the header between fixed and absolute while
   scrolling, which shows as flashing. The header is meant to stay fixed, so pin it here. */
.hb-header {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    left: 0;
    transition: none !important;
}

/* Top information bar: dark charcoal with light text, red icons */
.hb-header .menutop-wrap {
    background: var(--hb-dark-2);
}
.hb-header .menutop-wrap .menu-top .list li {
    color: var(--hb-on-dark);
}
.hb-header .menutop-wrap .menu-top .list li i {
    color: var(--hb-red);
}
.hb-header .menutop-wrap .menu-top .list li a {
    color: #e3e6ea;
}
/* !important needed to beat main.css's .menu-top a:hover rule, which also uses !important */
.hb-header .menutop-wrap .menu-top a:hover {
    color: #ff6b65 !important;
}
.hb-header .menutop-wrap .menu-top .list {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.hb-header .menutop-wrap .menu-top .col-lg-7 .list {
    justify-content: flex-end;
}
.hb-header .menutop-wrap .menu-top .list li {
    padding: 8px 0 8px 22px;
    font-size: 13px;
}
.hb-header .menutop-wrap .menu-top .col-lg-5 .list li {
    padding: 8px 22px 8px 0;
}
.hb-header .menutop-wrap .menu-top .list li i {
    margin-right: 6px;
}
.hb-header .menutop-wrap .menu-top .list li a {
    font-size: 13px;
    font-weight: 500;
}
.hb-header .menutop-wrap .btn-post-property .dots {
    width: 7px;
    height: 7px;
}

/* Main navigation bar */
.hb-header .main-menu {
    background: #fff;
    border-bottom: 1px solid var(--hb-line);
}
.hb-header .main-menu .row {
    flex-wrap: nowrap;
}
.hb-header #nav-menu-container {
    margin-left: auto;
}
.hb-header .nav-menu > li {
    margin-left: 22px;
}
.hb-header .nav-menu a {
    position: relative;
    padding: 29px 2px;
    color: var(--hb-ink);
    font-family: var(--hb-font);
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: .1px;
}
.hb-header .nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--hb-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s ease;
}
.hb-header .nav-menu > li:hover > a,
.hb-header .nav-menu > .menu-active > a {
    color: var(--hb-red);
}
.hb-header .nav-menu > li:hover > a::after,
.hb-header .nav-menu > .menu-active > a::after {
    transform: scaleX(1);
}
.hb-header .hb-nav-cta {
    margin-left: 26px;
    padding: 11px 20px;
    white-space: nowrap;
}

/* Dropdown groups (Properties / CRM Solutions / Resources) */
.hb-header .nav-menu > .menu-has-children > a {
    padding-right: 16px;
}
.hb-header .nav-menu > .menu-has-children > a::before {
    content: "\f107";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: normal;
}
.hb-header .nav-menu > .menu-has-children > a::after {
    right: 16px;
}
.hb-header .nav-menu ul {
    left: 0;
    right: auto;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    background: #fff;
    box-shadow: var(--hb-shadow-lg);
}
.hb-header .nav-menu ul li {
    min-width: 0;
}
.hb-header .nav-menu ul li a {
    display: block;
    padding: 9px 14px;
    border-radius: var(--hb-radius-sm);
    color: var(--hb-ink);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
}
.hb-header .nav-menu ul li a:hover,
.hb-header .nav-menu ul li a:focus {
    background: var(--hb-soft);
    color: var(--hb-red);
}
/* Keyboard users: open the group while focus is inside it */
.hb-header .nav-menu li:focus-within > ul {
    display: block;
}

/* Grouped menu needs the full desktop width; use the hamburger menu below 1200px */
@media (max-width: 1199px) {
    #nav-menu-container {
        display: none;
    }
    #mobile-nav-toggle {
        display: inline;
    }
}

/* ---------- Footer ---------- */
.hb-footer {
    font-family: var(--hb-font);
}
.hb-footer .hb-footer-main {
    background: var(--hb-dark);
    color: var(--hb-on-dark);
    padding: 56px 0 0;
}
/* The footer used Bootstrap's .container (1140px cap, 1200px on the home page),
   which left wide empty sides. Use ~94% of the viewport instead, capped for very
   large screens. Main grid, Popular Search and copyright all share this container. */
.hb-footer .hb-footer-container {
    width: 94%;
    max-width: 1800px;
    padding-left: 0;
    padding-right: 0;
}
.hb-footer p {
    color: var(--hb-on-dark);
}
.hb-footer .hb-footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(150px, 1fr));
    gap: 32px 40px;
    padding-bottom: 36px;
}
.hb-footer .hb-footer-logo {
    display: inline-block;
    padding: 10px 14px;
    border-radius: var(--hb-radius-sm);
    background: #fff;
}
.hb-footer .hb-footer-logo img {
    display: block;
    width: auto;
    max-width: 200px;
    max-height: 56px;
}
.hb-footer .hb-footer-company {
    margin: 10px 0 0;
    color: #fff;
    font-weight: 600;
}
.hb-footer .hb-footer-title {
    position: relative;
    margin: 0 0 16px;
    padding-bottom: 10px;
    color: #fff;
    font-family: var(--hb-font);
    font-size: 15px;
    font-weight: 600;
}
/* Company column: compact spacing between logo, name, address and social row */
.hb-footer .hb-footer-brand .hb-footer-title {
    margin: 18px 0 10px;
    padding-bottom: 8px;
    font-size: 14px;
}
.hb-footer .hb-footer-brand .hb-footer-text {
    line-height: 1.6;
}
.hb-footer .hb-footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--hb-red);
}
.hb-footer .hb-footer-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}
.hb-footer .hb-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hb-footer .hb-footer-links li {
    margin-bottom: 10px;
}
.hb-footer .hb-footer-links a {
    color: var(--hb-on-dark);
    font-size: 14px;
    transition: color .2s ease;
}
.hb-footer .hb-footer-links a:hover,
.hb-footer .hb-footer-links a:focus {
    color: #fff;
}
.hb-footer .hb-footer-social {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
.hb-footer .hb-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: var(--hb-dark-2);
    border: 1px solid var(--hb-dark-line);
}
.hb-footer .hb-footer-social a i {
    color: #e3e6ea;
    font-size: 16px;
}
.hb-footer .hb-footer-social a:hover {
    background: var(--hb-red);
    border-color: var(--hb-red);
}
.hb-footer .hb-footer-social a:hover i {
    color: #fff;
}
.hb-footer .contact-info {
    margin-bottom: 16px;
}
.hb-footer .contact-info .info-title {
    margin: 0 0 4px;
    color: var(--hb-on-dark);
    font-size: 13px;
}
.hb-footer .contact-info .info-phone,
.hb-footer .contact-info .info-mail {
    margin: 0;
    word-break: break-word;
}
.hb-footer .contact-info .info-phone a,
.hb-footer .contact-info .info-mail a {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.hb-footer .contact-info a:hover {
    color: #ff6b65;
}
/* Popular Search: divider and links span the same container as the columns above */
.hb-footer .hb-footer-popular {
    padding: 24px 0 28px;
    border-top: 1px solid var(--hb-dark-line);
}
.hb-footer .popular-search {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 32px;
    margin: 0;
}
.hb-footer .popular-search > div {
    width: auto;
    max-width: none;
    padding: 0;
}
.hb-footer .popular-link {
    padding: 3px 0;
    color: var(--hb-on-dark);
    font-size: 13px;
}
.hb-footer .popular-link:hover {
    color: #fff;
}
/* Copyright row: full-width background with a subtle top border. The extra
   height keeps the text clear of the fixed WhatsApp / chat buttons at the
   bottom corners when the page is scrolled to the end. */
.hb-footer .hb-footer-bottom {
    padding: 28px 0;
    border-top: 1px solid var(--hb-dark-line);
}
.hb-footer .hb-footer-bottom .copyright-text {
    margin: 0;
    color: #8a919c;
    font-size: 13px;
    text-align: center;
}

/* Tablet: company and contact on their own rows, three link columns between */
@media (max-width: 1199px) {
    .hb-footer .hb-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .hb-footer .hb-footer-brand,
    .hb-footer .hb-footer-contact {
        grid-column: 1 / -1;
    }
}
/* Mobile: two columns, full-width padding instead of the 94% width */
@media (max-width: 767px) {
    .hb-footer .hb-footer-main {
        padding-top: 44px;
    }
    .hb-footer .hb-footer-container {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    .hb-footer .hb-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }
    .hb-footer .hb-footer-social {
        flex-wrap: wrap;
    }
    /* Keep the copyright text above the fixed bottom-corner buttons */
    .hb-footer .hb-footer-bottom {
        padding: 18px 0 96px;
    }
}