/* Metromize public site — JustDial-style directory components.
   Layered on top of templatemo-first-portfolio-style.css; reuses + overrides its CSS variables
   with the brand palette sampled from the app logo (Setting::app_logo) and the Nunito font
   already used by the backend admin theme, so the public site matches the brand. */

:root {
    --primary-color: #0B877D;
    --secondary-color: #0B877D;
    --body-font-family: 'Nunito', sans-serif;

    /* Tighter corners than the templatemo defaults (10px/20px/100px) — those made
       cards, banners and buttons look like oversized rounded blobs/pills across
       the whole site. Every component below reads these three variables, so this
       single override reduces the corner radius everywhere at once. */
    --border-radius-small: 6px;
    --border-radius-medium: 12px;
    --border-radius-large: 18px;

    /* templatemo's --p-color (#717275) and the various hardcoded #6c757d/#8a8a8a/
       #9ca3af grays scattered across this file all sit around the same washed-out
       mid-gray, giving body text, labels and hours/address rows too little contrast
       against the white background. Darken the shared variables here and route the
       hardcoded grays to --p-color below so secondary text reads clearly everywhere,
       without touching layout, headings, or brand colors. */
    --p-color: #45464a;
    --text-muted-color: #45464a;
    --body-color: #45464a;
}

html, body {
    max-width: 100%;
    /* overflow-x: hidden here (rather than overflow-x: clip) would make the UA
       promote html/body to an auto-overflow scroll container per the CSS overflow
       spec's visible->auto pairing rule, which breaks position: sticky on every
       descendant — including .home-sidebar, which is why it wasn't tracking down
       to the bottom of the taller .home-main column. clip blocks the horizontal
       overflow the same way without creating that scroll container. */
    overflow-x: clip;
}

body {
    font-family: var(--body-font-family);
}

.brand-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.brand-logo-img {
    height: 42px;
    width: auto;
}

.brand-name {
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    color: var(--dark-color);
    letter-spacing: normal;
}

/* The templatemo template was built as a single-page portfolio with the navbar
   floating transparently over one big hero image. This site has many pages with
   plain white content, so the nav needs to be a normal solid bar in flow. */
.navbar {
    position: relative;
    background: var(--white-color);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
    /* padding-top: 14px;
    padding-bottom: 14px; */
}

/* templatemo's .navbar .custom-btn assumed a transparent navbar over a dark
   hero, so it styled these buttons white-on-transparent — invisible against
   the solid white navbar above. Re-style for visibility on a light bar. */
.navbar .custom-btn {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.navbar .custom-btn:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

.navbar .custom-btn.custom-border-btn {
    background: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.navbar .custom-btn.custom-border-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

/* templatemo's global `h2-h6 { color: dark }` and `p { color: gray }` rules
   override inherited white text — re-assert white for anything inside a
   brand-colored section so headings/copy stay legible. */
.search-hero h1,
.search-hero h2,
.search-hero h3,
.search-hero p,
.cta-banner h1,
.cta-banner h2,
.cta-banner h3,
.cta-banner p {
    color: var(--white-color);
}

/* Two-tier "JustDial style" site header: a thin dark utility bar (real
   contact info + account links) above a bold main bar whose centerpiece is
   the category+search combo — replaces the old single-row nav-links header. */
.utility-bar-top {
    background: var(--dark-color);
    padding: 8px 0;
    font-size: 13px;
}

.utility-bar-top a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    margin-right: 18px;
}

.utility-bar-top a:last-child {
    margin-right: 0;
}

.utility-bar-top a:hover {
    color: var(--secondary-color);
}

.utility-links button {
    background: none;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
}

.utility-links button:hover {
    color: var(--secondary-color);
}

.utility-promo a {
    color: rgba(255, 255, 255, .85);
    margin-right: 0;
}

.utility-promo a:hover {
    color: var(--secondary-color);
}

.utility-promo strong {
    color: var(--secondary-color);
}

.navbar.main-bar-jd {
    background: var(--white-color);
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .1);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 20;
}

.main-bar-jd .brand-logo-img {
    height: 48px;
}

.main-bar-jd .container {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.main-bar-jd .brand-name {
    color: var(--dark-color);
}

/* Once jquery.sticky.js (custom.js) pins `.navbar` on scroll, templatemo's
   `.is-sticky .navbar .container` rule forces a plain white container
   background — the bar is already white/logo-matched, so keep it consistent
   in the sticky state too instead of templatemo's forced white differing in shadow. */
.is-sticky .navbar.main-bar-jd,
.is-sticky .navbar.main-bar-jd .container {
    background: var(--white-color);
}

.jd-location-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    background: none;
    padding: 6px 10px;
    margin: -6px 0;
    max-width: 220px;
    border-radius: var(--border-radius-small);
    color: var(--dark-color);
    transition: background-color .2s ease, border-color .2s ease;
}

.jd-location-btn:hover {
    color: var(--dark-color);
    background: var(--section-bg-color);
    border-color: var(--border-color);
}

.jd-location-btn:hover .jd-location-line2 {
    color: var(--primary-color);
}

.jd-location-icon {
    font-size: 20px;
    line-height: 1;
    color: var(--primary-color);
}

.jd-location-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.25;
}

.jd-location-line1 {
    font-size: 12px;
    color: var(--p-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 190px;
}

.jd-location-line2 {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

/* Location picker modal */
.location-section-label {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--p-color);
    margin-bottom: 8px;
}

.location-city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.location-city-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--border-radius-large);
    background: var(--section-bg-color);
    color: var(--dark-color);
    font-size: 13px;
    text-decoration: none;
}

.location-city-chip:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

/* Google Places Autocomplete appends its dropdown (.pac-container) to <body>
   with a low default z-index — inside a Bootstrap modal (z-index: 1055) it
   renders invisibly behind the modal unless raised above it here. */
.pac-container {
    z-index: 10000 !important;
}

.location-use-gps-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: var(--border-radius-large);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    margin-top: 12px;
}

.location-use-gps-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.location-picker-map {
    height: 280px;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    z-index: 1;
}

/* Active-location chip on the search results page */
.search-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--section-bg-color);
    border-radius: var(--border-radius-large);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--dark-color);
}

.search-location-chip-clear {
    color: var(--p-color);
    margin-left: 4px;
}

.search-location-chip-clear:hover {
    color: var(--primary-color);
}

.jd-search-form {
    display: flex;
    align-items: stretch;
    flex: 1 1 480px;
    max-width: 700px;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    transition: box-shadow .2s ease;
}

.jd-search-form:focus-within {
    box-shadow: 0 0 0 3px rgba(253, 99, 1, .35), 0 2px 10px rgba(0, 0, 0, .12);
}

.jd-search-category {
    border: none;
    background: var(--section-bg-color);
    padding: 0 16px;
    font-size: 14px;
    max-width: 170px;
    min-width: 0;
    height: 46px;
    color: var(--p-color);
}

.jd-search-divider {
    width: 1px;
    background: var(--border-color);
}

.jd-search-input {
    flex: 1;
    border: none;
    padding: 0 18px;
    font-size: 14px;
    height: 46px;
    min-width: 0;
    background: var(--white-color);
}

.jd-search-category:focus,
.jd-search-input:focus {
    outline: none;
    box-shadow: none;
}

.jd-search-btn {
    background: var(--secondary-color);
    color: var(--white-color);
    border: none;
    padding: 0 24px;
    height: 46px;
    font-size: 18px;
    transition: background-color .2s ease;
}

.jd-search-btn:hover {
    background: var(--primary-color);
}

.jd-account-area {
    flex-shrink: 0;
}

.jd-signin-btn {
    color: var(--white-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    padding: 9px 20px;
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: var(--border-radius-small);
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.jd-signin-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-1px);
}

.jd-account-dropdown {
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid var(--border-color);
}

.jd-account-avatar-link {
    display: inline-flex;
}

.jd-account-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    transition: border-color .2s ease;
}

.jd-account-avatar-link:hover .jd-account-avatar {
    border-color: var(--secondary-color);
}

.jd-account-menu {
    min-width: 220px;
    padding: 8px 0;
    border: none;
    border-radius: var(--border-radius-small);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

.jd-account-menu-name {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.jd-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--dark-color);
    transition: background-color .15s ease, color .15s ease;
}

.jd-account-menu .dropdown-item i {
    font-size: 15px;
    color: var(--p-color);
    width: 16px;
    text-align: center;
}


.jd-account-menu .dropdown-item:hover {
    background: var(--section-bg-color);
    color: var(--primary-color);
}

.jd-account-menu .dropdown-item:hover i {
    color: var(--primary-color);
}

/* Mobile-only header controls — hidden on desktop, where the full search bar,
   text sign-in button and address are always shown inline instead. Kept as
   dedicated classes (not sharing .header-icon-btn) with !important on the
   display toggles so a later same-specificity rule can never re-show them
   outside their intended breakpoint. */
.jd-search-toggle-btn,
.jd-mobile-login-btn {
    display: none !important;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
}

/* Search toggle — a secondary affordance: outlined by default, filled solid
   while the search row is expanded (driven off the button's own aria-expanded
   state, so no extra JS-managed class is needed). */
.jd-search-toggle-btn {
    border: 1.5px solid var(--border-color);
    background: var(--white-color);
    color: var(--primary-color);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.jd-search-toggle-btn:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(11, 135, 125, .18);
}

.jd-search-toggle-btn[aria-expanded="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 4px 12px rgba(11, 135, 125, .3);
}

.jd-search-toggle-btn:active {
    transform: scale(.94);
}

/* Mobile login icon — the primary action, so it mirrors the desktop
   "Sign in / Sign up" pill's prominence: solid brand gradient with the same
   elevated shadow + hover lift used site-wide for primary CTAs. */
.jd-mobile-login-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(11, 135, 125, .32);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.jd-mobile-login-btn:hover {
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 135, 125, .4);
    filter: brightness(1.05);
}

.jd-mobile-login-btn:active {
    transform: translateY(0) scale(.96);
}

@media (max-width: 767.98px) {
    .navbar.main-bar-jd {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .main-bar-jd .container {
        gap: 8px;
    }

    .main-bar-jd .brand-logo-img {
        height: 34px;
    }

    /* Row 1: logo, then the search-toggle + account/login icons pushed to the
       far right via the auto left-margin on the toggle button (a flex item
       with `margin-left: auto` consumes all remaining space on its line,
       shoving itself and everything after it to the end — the location and
       search rows below are unaffected since flex-wrap gives them their own
       lines). Row 2: address. Row 3: full search form, opened on demand. */
    .jd-search-toggle-btn {
        display: inline-flex !important;
        order: 2;
        margin-left: auto;
    }

    .jd-account-area {
        order: 3;
    }

    .jd-location-btn {
        order: 4;
        flex-basis: 100%;
        max-width: none;
        padding: 4px 8px;
        margin: 0;
    }

    .jd-location-line1 {
        display: none;
    }

    .jd-location-line2 {
        font-size: 13px;
    }

    .jd-search-form {
        order: 5;
        flex-basis: 100%;
        max-width: 100%;
        display: none;
    }

    .jd-search-form.is-open {
        display: flex;
    }

    .jd-signin-btn {
        display: none;
    }

    .jd-mobile-login-btn {
        display: inline-flex !important;
    }

    /* One horizontally scrolling row instead of wrapping onto 2-3 lines —
       the biggest single contributor to the header eating the viewport on
       small screens. */
    .categories-bar {
        padding: 6px 0;
    }

    /* !important is required here: the container carries Bootstrap's
       .flex-wrap / .justify-content-between utility classes (themselves
       !important), and .categories-bar-links has its own unconditional
       flex-wrap:wrap rule defined later in this file — plain overrides here
       would lose to both. */
    .categories-bar .container {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .categories-bar .container::-webkit-scrollbar {
        display: none;
    }

    .categories-bar-links {
        flex-wrap: nowrap !important;
    }

    .categories-bar-link {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 13px;
    }

    .categories-bar-recent {
        flex-shrink: 0;
        white-space: nowrap;
        margin-left: 4px;
    }
}

@media (max-width: 575px) {
    .main-bar-jd .brand-logo-img {
        height: 35px;
    }

    .jd-search-category {
        max-width: 100px;
    }

    .jd-search-input {
        padding: 0 10px;
        font-size: 13px;
    }

    .jd-search-btn {
        padding: 0 16px;
    }
}

.header-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: none;
    color: var(--dark-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color .2s ease, color .2s ease;
}

.header-icon-btn:hover {
    background: var(--section-bg-color);
    color: var(--primary-color);
}

.header-icon-btn.header-account-btn {
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 16px;
}

.icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--border-radius-large);
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bar 3 — categories + quick-link nav, sits below the sticky main bar so it
   scrolls away with the page (only .main-bar-jd is wrapped by jquery.sticky.js). */
.categories-bar {
    background: var(--primary-color);
    padding: 8px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    position: relative;
    z-index: 10;
}

.categories-bar-btn {
    background: rgba(255, 255, 255, .15);
    border: none;
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: var(--border-radius-small);
}

.categories-bar-btn:hover,
.categories-bar-btn:focus {
    background: rgba(255, 255, 255, .25);
    color: var(--white-color);
}

.categories-bar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.categories-bar-link {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    padding: 8px 14px;
    border-radius: var(--border-radius-large);
    transition: background-color .2s ease, color .2s ease;
}

.categories-bar-link:hover {
    background: rgba(255, 255, 255, .14);
    color: var(--white-color);
}

.categories-bar-link.is-active {
    background: var(--white-color);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

.categories-bar-recent {
    font-weight: var(--font-weight-bold);
}

/* Categories dropdown menu (triggered from the "Browse All Categories" button) */
.dropdown-categories {
    border: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    border-radius: var(--border-radius-medium);
    padding: 10px;
    min-width: 220px;
}

.dropdown-categories .dropdown-item {
    border-radius: var(--border-radius-small);
    padding: 8px 12px;
    font-size: 14px;
}

.dropdown-categories .dropdown-item:hover {
    background: var(--section-bg-color);
    color: var(--primary-color);
}

.site-section {
    padding: 30px 0;
}

/* Every section on the home page alternates strictly between white and this
   gray so the page reads as one consistent white/gray/white/gray rhythm —
   .hiw-section, .app-promo-section and .partners-section also plug into this
   same two-color cycle (their own background rules were removed) rather than
   each carrying its own one-off gradient. */
.site-section-alt {
    background: #f7f7f7; 
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.section-eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--secondary-color);
    display: inline-block;
}

.site-section-title {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    letter-spacing: normal;
    line-height: 1.3;
    color: var(--dark-color);
    margin-bottom: 6px;
}

.site-section-subtitle {
    font-size: 14px;
    color: var(--p-color);
    margin-bottom: 24px;
}

/* These three classes head every section on every page (home, search, blood
   donation, about, business pages...), so this single mobile override is the
   highest-leverage fix for section headings running oversized/wrapping to
   3 lines and eating the viewport on small screens. */
@media (max-width: 767.98px) {
    .site-section {
        padding: 32px 0;
    }

    .section-eyebrow {
        font-size: 11px;
    }

    .site-section-title {
        font-size: 21px;
        line-height: 1.25;
        letter-spacing: -0.01em;
        margin-bottom: 4px;
    }

    .site-section-subtitle {
        font-size: 12px;
        margin-bottom: 16px;
    }
}

@media (max-width: 380px) {
    .site-section-title {
        font-size: 18px;
    }

    .site-section-subtitle {
        font-size: 11px;
    }
}

/* Hero / search */
.search-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 90px 0 70px;
    color: var(--white-color);
}

.search-hero h1 {
    font-weight: var(--font-weight-bold);
    font-size: 42px;
}

.search-hero p.lead {
    opacity: .9;
}

.search-box {
    background: var(--white-color);
    border-radius: var(--border-radius-medium);
    padding: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

.search-box select,
.search-box input {
    border: none;
    height: 48px;
}

.search-box select:focus,
.search-box input:focus {
    box-shadow: none;
}

/* Primary action button — used site-wide (hero search, filters, forms, CTAs),
   not just inside .search-box. */
.btn-search {
    background: var(--secondary-color);
    color: var(--white-color);
    border: none;
    height: 48px;
    padding: 0 20px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-small);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-search:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.search-box .btn-search {
    height: 48px;
}

/* Category grid */
.category-card {
    display: block;
    text-align: center;
    padding: 28px 12px;
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    border: 1px solid var(--border-color);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
    color: var(--dark-color);
    height: 100%;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    color: var(--primary-color);
}

.category-card .category-icon {
    font-size: 34px;
    color: var(--primary-color);
    margin-bottom: 12px;
    display: block;
}

.category-card .category-name {
    font-weight: var(--font-weight-bold);
    font-size: 15px;
}


/* Swiper's CSS defaults to align-items:stretch on the flex wrapper, which forces
   every slide (including off-screen ones) to match the tallest slide's height —
   blowing up short business cards into mostly-empty boxes. Slides should size to
   their own content instead. */
.swiper-wrapper {
    align-items: flex-start;
}

/* Business card */
.business-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    height: 100%;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.business-card:hover {
    box-shadow: 0 20px 36px rgba(0,0,0,.12);
    transform: translateY(-4px);
    border-color: rgba(11,135,125,.25);
}

.business-card .business-card-img {
    height: 140px;
    width: 100%;
    object-fit: cover;
    background: var(--section-bg-color);
    display: block;
    transition: transform .4s ease;
}

.business-card:hover .business-card-img {
    transform: scale(1.07);
}

.business-card .business-card-body {
    padding: 16px 18px 18px;
}

.business-card .business-card-name {
    display: -webkit-box;
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    /* margin-bottom: 8px; */
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--dark-color);
    transition: color .15s ease;
}

.business-card:hover .business-card-name {
    color: var(--primary-color);
}

.business-card .business-card-category {
    font-size: 13px;
    color: var(--p-color);
}

.business-card .business-card-rating-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.business-card .business-card-rating-inline-value {
    font-size: 12.5px;
    font-weight: var(--font-weight-bold);
    color: var(--p-color);
}

.business-card .business-card-subcategory {
    font-size: 12.5px;
    color: var(--p-color);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-card .business-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--p-color);
    margin-bottom: 0;
}

.business-card .business-card-location span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-card .business-card-location i {
    color: var(--primary-color);
    font-size: 12px;
    flex-shrink: 0;
}

.business-card .business-card-hours {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: var(--font-weight-bold);
    margin-top: 6px;
}

.business-card .business-card-hours i {
    font-size: 12px;
    flex-shrink: 0;
}

.business-card .business-card-hours .is-open {
    color: #1e7e34;
}

.business-card .business-card-hours .is-closed {
    color: var(--p-color);
}

.business-card .business-card-hours-time {
    color: var(--p-color);
    font-weight: var(--font-weight-normal);
}

.business-card-bottom-right {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.business-card-distance {
    flex-shrink: 0;
    background: rgba(0, 0, 0, .6);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 4px 9px;
    border-radius: var(--border-radius-small);
    backdrop-filter: blur(2px);
}

.business-card-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}

.business-card-icon-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.business-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-color);
    color: var(--white-color) !important;
    font-weight: var(--font-weight-bold);
    font-size: 12.5px;
    padding: 7px 14px;
    border-radius: var(--border-radius-large);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, gap .15s ease;
}

.business-card-cta:hover {
    background: var(--secondary-color);
    gap: 7px;
}

.business-card .follow-btn {
    background: rgba(255,255,255,.92);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
    transition: transform .15s ease, background .15s ease;
}

.business-card .follow-btn:hover {
    transform: scale(1.08);
    background: var(--white-color);
}

.business-card-img-wrap {
    position: relative;
    overflow: hidden;
}

.business-card-img-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
    pointer-events: none;
    z-index: 1;
}

.business-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.business-card-badges .business-card-badge {
    position: static;
    top: auto;
    left: auto;
}

.business-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    padding: 4px 10px;
    border-radius: var(--border-radius-small);
    z-index: 2;
}

.business-card-badge.badge-premium {
    background: linear-gradient(135deg, #f7c548, #d6900f);
    color: #2b1a00;
}

.business-card-offer-corner {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #28a745;
    color: var(--white-color);
    font-size: 12px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.business-card-category-chip {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-block;
    background: rgba(255, 255, 255, .92);
    color: var(--p-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    padding: 4px 10px;
    border-radius: var(--border-radius-small);
}

.business-card-avatar {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-small);
    object-fit: cover;
    background: var(--white-color);
    border: 2px solid var(--white-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.business-card-rating-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 12.5px;
    font-weight: var(--font-weight-bold);
    padding: 5px 10px;
    border-radius: var(--border-radius-small);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.business-card-rating-count {
    font-weight: normal;
    opacity: .85;
    font-size: 11px;
}

/* Premium business highlight */
.business-card.business-card-premium {
    border-color: #f0c14b;
    box-shadow: 0 6px 20px rgba(240,193,75,.22);
}

.business-card.business-card-premium:hover {
    box-shadow: 0 22px 38px rgba(240,193,75,.3);
}

.business-card-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    text-decoration: none;
    padding: 7px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    transition: background .15s ease, color .15s ease, border-color .15s ease, gap .15s ease;
}

.business-card-view:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    gap: 9px;
}

.add-business-card {
    border: 2px dashed var(--border-color);
    min-height: 220px;
}

.add-business-card:hover {
    border-color: var(--primary-color);
}

.business-card-badge.status-approved {
    background: #28a745;
}

.business-card-badge.status-rejected {
    background: #dc3545;
}

.business-card-badge.status-blocked {
    background: #343a40;
}

.mb-status-badge {
    position: static;
    flex-shrink: 0;
    margin-left: 12px;
}

/* Star rating */
.star-rating {
    color: #f5a623;
    font-size: 14px;
    white-space: nowrap;
}

.star-rating .bi-star-fill,
.star-rating .bi-star-half,
.star-rating .bi-star {
    margin-right: 1px;
}

.star-rating-input {
    display: inline-flex;
    gap: 4px;
    font-size: 22px;
    color: #f5a623;
}

.star-rating-input i {
    cursor: pointer;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--secondary-color);
    color: var(--white-color);
    border-radius: var(--border-radius-small);
    padding: 2px 8px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
}

.rating-badge-count {
    font-weight: normal;
    opacity: .85;
    font-size: 11.5px;
}

/* How it works — legacy circle (about page) */
.step-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
}

/* How it works — home page (4-step flow + trust strip + business CTA).
   Background comes from the strict white/gray section alternation in the
   blade template (.site-section-alt), not a rule of its own. */
.hiw-header {
    max-width: 640px;
    margin: 0 auto 36px;
}

.hiw-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.hiw-eyebrow::before,
.hiw-eyebrow::after {
    content: "";
    width: 36px;
    height: 1px;
    background: rgba(11, 135, 125, .35);
}

.hiw-eyebrow span {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--primary-color);
}

.hiw-title {
    font-size: 34px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    line-height: 1.25;
    margin-bottom: 10px;
}

.hiw-title span {
    color: var(--primary-color);
}

.hiw-subtitle {
    font-size: 15px;
    color: var(--p-color);
    margin: 0;
}

.hiw-steps-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
}

.hiw-step {
    text-align: center;
    padding: 0 6px;
}

.hiw-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 16px;
}

.hiw-step-visual {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--white-color);
    box-shadow: 0 10px 28px rgba(11, 135, 125, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hiw-step h3 {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 8px;
}

.hiw-step p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--p-color);
    margin: 0 auto 14px;
    max-width: 220px;
}

.hiw-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--border-radius-large);
    background: rgba(253, 99, 1, .12);
    color: var(--primary-color);
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}

.hiw-step-pill:hover {
    background: rgba(253, 99, 1, .2);
    color: var(--primary-color);
    transform: translateY(-1px);
}

.hiw-step-pill i {
    font-size: 13px;
}

.hiw-step-connector {
    display: none;
}

.hiw-connector-line {
    flex: 1;
    height: 0;
    border-top: 2px dotted rgba(11, 135, 125, .35);
}

.hiw-connector-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 14px;
    flex-shrink: 0;
}

/* Step 01 — search visual */
.hiw-visual-search .hiw-visual-map {
    position: absolute;
    width: 52px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #b8e6df 0%, #7fd4c8 100%);
    transform: rotate(-8deg);
    bottom: 28px;
    left: 22px;
}

.hiw-visual-search-icon {
    position: relative;
    z-index: 2;
    font-size: 34px;
    color: var(--primary-color);
    margin-top: -8px;
    margin-left: 8px;
}

.hiw-visual-pin {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 16px;
    color: #e74c3c;
}

/* Step 02 — compare visual */
.hiw-visual-phone {
    position: relative;
    width: 52px;
    height: 78px;
    border-radius: 10px;
    border: 2px solid #d8dee6;
    background: var(--white-color);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hiw-visual-phone-notch {
    width: 18px;
    height: 3px;
    border-radius: 3px;
    background: #d8dee6;
    margin: 0 auto 2px;
}

.hiw-visual-stars {
    display: flex;
    justify-content: center;
    gap: 1px;
    color: #f5b301;
    font-size: 7px;
}

.hiw-visual-lines span {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #e8edf2;
    margin-bottom: 4px;
}

.hiw-visual-lines span:last-child {
    width: 70%;
    margin-bottom: 0;
}

/* Step 03 — connect visual */
.hiw-visual-connect {
    overflow: visible;
}

.hiw-visual-bubble {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(11, 135, 125, .18);
}

.hiw-visual-bubble-main {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-size: 22px;
    top: 50%;
    left: 50%;
    transform: translate(-58%, -52%);
}

.hiw-visual-bubble-mini {
    width: 28px;
    height: 28px;
    background: #eef2f6;
    color: var(--p-color);
    font-size: 12px;
    bottom: 18px;
    right: 16px;
}

/* Step 04 — done visual */
.hiw-visual-done {
    overflow: visible;
}

.hiw-visual-store {
    position: relative;
    width: 58px;
    height: 48px;
}

.hiw-visual-store-roof {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 16px solid var(--primary-color);
}

.hiw-visual-store-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 32px;
    border-radius: 4px 4px 6px 6px;
    background: linear-gradient(180deg, #dff5f2 0%, #b8e8e2 100%);
    border: 2px solid rgba(11, 135, 125, .25);
}

.hiw-visual-store-door {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 18px;
    border-radius: 2px 2px 4px 4px;
    background: rgba(11, 135, 125, .35);
}

.hiw-visual-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #22c55e;
    color: var(--white-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(34, 197, 94, .35);
}

/* Trust strip */
.hiw-trust-strip {
    display: flex;
    flex-wrap: wrap;
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 24px rgba(11, 135, 125, .08);
    padding: 8px 0;
    margin-bottom: 28px;
}

.hiw-trust-item {
    flex: 1 1 0;
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-left: 1px solid var(--border-color);
}

.hiw-trust-item:first-child {
    border-left: none;
}

.hiw-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(253, 99, 1, .12);
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
}

.hiw-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.hiw-trust-text strong {
    font-size: 14px;
    color: var(--dark-color);
}

.hiw-trust-text span {
    font-size: 12px;
    color: var(--p-color);
    line-height: 1.4;
}

/* Business CTA banner */
.hiw-business-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    background: rgba(11, 135, 125, .08);
    border: 1px solid rgba(11, 135, 125, .12);
    border-radius: var(--border-radius-large);
    padding: 28px 32px;
}

.hiw-business-art {
    flex: 0 0 auto;
}

.hiw-business-shop {
    position: relative;
    display: block;
    width: 92px;
    height: 78px;
}

.hiw-business-shop-roof {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 48px solid transparent;
    border-right: 48px solid transparent;
    border-bottom: 22px solid var(--primary-color);
}

.hiw-business-shop-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 52px;
    border-radius: 6px 6px 8px 8px;
    background: linear-gradient(180deg, #fff 0%, #e8f7f5 100%);
    border: 2px solid rgba(11, 135, 125, .2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 4px;
}

.hiw-business-shop-sign {
    font-size: 8px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .04em;
    color: var(--primary-color);
    background: rgba(253, 99, 1, .15);
    padding: 2px 6px;
    border-radius: 3px;
}

.hiw-business-shop-window {
    width: 22px;
    height: 14px;
    border-radius: 2px;
    background: rgba(11, 135, 125, .2);
}

.hiw-business-copy {
    flex: 1 1 240px;
    min-width: 0;
}

.hiw-business-copy h3 {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 6px;
}

.hiw-business-copy p {
    font-size: 14px;
    color: var(--p-color);
    margin: 0;
    line-height: 1.55;
    /* max-width: 520px; */
}

.hiw-business-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.hiw-business-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--border-radius-large);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(11, 135, 125, .25);
    transition: transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.hiw-business-btn:hover {
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(11, 135, 125, .32);
}

.hiw-business-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.hiw-business-link:hover {
    color: var(--secondary-color);
}

@media (min-width: 992px) {
    .hiw-steps-row {
        display: flex;
        align-items: flex-start;
        gap: 0;
    }

    .hiw-step {
        flex: 1;
        min-width: 0;
    }

    .hiw-step-connector {
        display: flex;
        align-items: center;
        flex: 0 0 52px;
        padding-top: 72px;
        gap: 0;
    }
}

@media (max-width: 991.98px) {
    .hiw-title {
        font-size: 26px;
    }

    .hiw-steps-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
    }

    .hiw-step {
        padding: 0 4px;
    }

    .hiw-step-visual {
        width: 92px;
        height: 92px;
        margin-bottom: 14px;
    }

    .hiw-step-num {
        width: 28px;
        height: 28px;
        font-size: 11px;
        margin-bottom: 12px;
    }

    .hiw-step h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .hiw-step p {
        font-size: 12px;
        margin-bottom: 10px;
        max-width: 100%;
    }

    .hiw-step-pill {
        padding: 6px 10px;
        font-size: 11px;
    }

    .hiw-step-pill i {
        font-size: 11px;
    }

    .hiw-trust-item {
        flex: 1 1 50%;
        min-width: 0;
    }

    .hiw-trust-item:nth-child(odd) {
        border-left: none;
    }

    .hiw-trust-item:nth-child(n+3) {
        border-top: 1px solid var(--border-color);
    }

    .hiw-business-banner {
        padding: 24px 20px;
    }

    .hiw-business-actions {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .hiw-trust-item {
        flex: 1 1 100%;
        border-left: none !important;
        border-top: 1px solid var(--border-color);
    }

    .hiw-trust-item:first-child {
        border-top: none;
    }
}

/* CTA banner */
.cta-banner {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    border-radius: var(--border-radius-medium);
    padding: 50px;
}

.cta-banner .btn-cta {
    background: var(--white-color);
    color: var(--primary-color);
    border-radius: var(--border-radius-large);
    padding: 12px 30px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    display: inline-block;
}

.cta-banner .btn-cta:hover {
    background: var(--dark-color);
    color: var(--white-color);
}

/* Filter sidebar */
.filter-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 20px;
}

.filter-card h6 {
    font-weight: var(--font-weight-bold);
    letter-spacing: normal;
    margin-bottom: 14px;
}

/* Mobile-only "Filters" toggle (search + jobs listing pages) — the filter
   body is a Bootstrap .collapse, collapsed by default on small screens and
   forced permanently open on lg+ via the .d-lg-block also on that element,
   so desktop keeps the always-visible sidebar it already had. */
.filter-card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 14px;
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    color: var(--dark-color);
}

.filter-card-toggle span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-card-toggle span i {
    color: var(--primary-color);
}

.filter-toggle-icon {
    color: var(--p-color);
    transition: transform .2s ease;
}

.filter-card-toggle:not(.collapsed) .filter-toggle-icon {
    transform: rotate(180deg);
}

/* Search / Jobs listing page header — reuses the .home-hero-search family
   (search field + location button + submit button) at full width instead
   of the home hero's 560px cap. Doubled-up selector so its specificity beats
   .home-hero-search's max-width rule regardless of source order. */
.home-hero-search.search-page-bar {
    max-width: none;
    width: 100%;
}

/* min-width gated: flex-basis:320px is a row-layout width hint. Left
   ungated it also wins (by specificity) over the mobile rule that flips
   .home-hero-search to flex-direction:column, where flex-basis instead
   sets a 320px *height* on the search field. */
@media (min-width: 576px) {
    .search-page-bar .home-hero-search-field {
        flex: 1 1 320px;
    }
}

/* Pill filter toolbar (Search + Jobs listing pages) */
.search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.toolbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.toolbar-pill i {
    color: var(--primary-color);
}

a.toolbar-pill:hover,
button.toolbar-pill:hover {
    border-color: var(--primary-color);
    color: var(--dark-color);
}

.toolbar-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.toolbar-pill.active i {
    color: var(--white-color);
}

.toolbar-pill-static {
    background: var(--section-bg-color);
    color: var(--p-color);
}

.toolbar-pill-dropdown .dropdown-menu {
    border-radius: var(--border-radius-medium);
    border-color: var(--border-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
}

.toolbar-pill-dropdown .dropdown-item.active,
.toolbar-pill-dropdown .dropdown-item:active {
    background: var(--primary-color);
    color: var(--white-color);
}

/* Sidebar category / location link lists (Search + Jobs listing pages) */
.sidebar-filter-list .sidebar-filter-items {
    margin: 0;
}

.sidebar-filter-items li {
    margin-bottom: 2px;
}

.sidebar-filter-items a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--border-radius-small);
    color: var(--p-color);
    font-size: 14px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-filter-items a:hover {
    background: var(--section-bg-color);
    color: var(--dark-color);
}

.sidebar-filter-items a.active {
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
}

.sidebar-filter-items a.active .sidebar-filter-count {
    color: var(--white-color);
}

.sidebar-filter-count {
    color: var(--p-color);
    font-size: 12px;
}

.sidebar-filter-showmore {
    display: block;
    background: none;
    border: none;
    padding: 6px 8px;
    margin-top: 2px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
}

.sidebar-filter-showmore[aria-expanded="true"] .show-more-text,
.sidebar-filter-showmore:not([aria-expanded="true"]) .show-less-text {
    display: none;
}

@media (max-width: 575.98px) {
    .search-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* Business profile page */
.business-banner-img {
    height: 360px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-medium);
}

.business-header {
    background: var(--white-color);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--border-color);
    padding: 24px;
}

.contact-action-btn {
    border-radius: var(--border-radius-large);
    padding: 10px 22px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact-action-btn.call {
    background: var(--primary-color);
    color: var(--white-color);
}

.contact-action-btn.whatsapp {
    background: #25D366;
    color: var(--white-color);
}

.contact-action-btn.save {
    background: var(--section-bg-color);
    color: var(--dark-color);
    border: 1px solid var(--border-color);
}

.contact-action-btn.save.is-saved {
    background: var(--primary-color);
    color: var(--white-color);
}

.service-card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    background: var(--white-color);
    height: 100%;
    transition: box-shadow .15s ease;
}

.service-card img {
    height: 140px;
    width: 100%;
    object-fit: cover;
}

.service-card .price-strike {
    text-decoration: line-through;
    color: var(--p-color);
    font-size: 13px;
}

.service-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.service-card-img {
    height: 180px !important;
}

.service-card-pill {
    display: inline-block;
    background: var(--section-bg-color);
    color: var(--p-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    padding: 3px 10px;
    border-radius: var(--border-radius-large);
}

.service-card-name {
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-card-price-now {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.service-card-price-was {
    display: block;
    font-size: 12px;
    color: var(--p-color);
    text-decoration: line-through;
}

.service-card-clickable {
    cursor: pointer;
}

.service-card-clickable:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.service-detail-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--border-radius-medium);
}

.service-detail-static-badge {
    position: static;
}

.service-detail-price {
    font-size: 16px;
}

.service-detail-price .service-card-price-was {
    margin-right: 8px;
}

.sale-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
}

/* ==========================================================================
   Sales/Service cards — 2-up compact cards on mobile instead of one
   full-width card per row, with smaller type to match the tighter card.
   Shared by the home page "Sales & Offers" row, the Sales/Service search
   results, and the business profile's Sales/Service overview + tab
   (".sales-offers-row" is added alongside ".service-grid" there).
   ========================================================================== */
@media (max-width: 767.98px) {
    .sales-offers-row {
        --bs-gutter-x: 10px;
        row-gap: 10px;
    }

    .sales-offers-row > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .service-grid.sales-offers-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sales-offers-row .business-card .business-card-img {
        height: 100px;
    }

    .sales-offers-row .business-card .business-card-body {
        padding: 10px 12px 12px;
    }

    .sales-offers-row .business-card .business-card-name {
        font-size: 13px;
    }

    .sales-offers-row .business-card .business-card-subcategory {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .sales-offers-row .business-card .business-card-rating-inline {
        margin-bottom: 3px;
    }

    .sales-offers-row .business-card .review-stars-sm {
        font-size: 10px;
    }

    .sales-offers-row .business-card .business-card-rating-inline-value {
        font-size: 10.5px;
    }

    .sales-offers-row .business-card .business-card-location {
        font-size: 11px;
        gap: 4px;
    }

    .sales-offers-row .business-card .business-card-location i {
        font-size: 10px;
    }

    .sales-offers-row .business-card-badge {
        font-size: 9px;
        padding: 3px 7px;
    }

    .sales-offers-row .business-card-offer-corner {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .sales-offers-row .service-card-price-now {
        font-size: 14px;
    }

    .sales-offers-row .service-card-price-was {
        font-size: 10px;
    }
}

#serviceDetailModal .modal-content {
    border: none;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

#serviceDetailModal .btn-contact-gradient {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.service-detail-content {
    position: relative;
}

.service-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    color: var(--dark-color);
    border: none;
    border-radius: 50%;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
    transition: background .15s ease, transform .15s ease;
}

.service-detail-close:hover {
    background: var(--section-bg-color);
    transform: scale(1.06);
}

.service-detail-body {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    max-height: 85vh;
    overflow-y: auto;
}

.service-detail-visual {
    position: relative;
    flex: 1 1 280px;
    max-width: 280px;
    padding: 28px 22px;
    background: var(--section-bg-color);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.service-detail-media {
    line-height: 0;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

#serviceDetailModal .service-detail-image {
    height: 190px;
}

.service-detail-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-detail-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    opacity: .6;
    border: 2px solid transparent;
    transition: opacity .15s ease, border-color .15s ease;
}

.service-detail-thumb:hover {
    opacity: .9;
}

.service-detail-thumb-active {
    opacity: 1;
    border-color: var(--primary-color);
}

.service-detail-floating-badge {
    align-self: flex-start;
}

.service-detail-info {
    flex: 1 1 320px;
    min-width: 280px;
    padding: 28px 26px;
}

.service-detail-title {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    letter-spacing: normal;
    margin-bottom: 10px;
}

.service-detail-description {
    color: var(--p-color);
    font-size: 14px;
    margin: 12px 0 18px;
}

/* The saved HTML already carries its own <br> line breaks for blank lines
   (see MyHelpers::normalizeRichTextHtml), so the browser's default <p> margin
   would double up the spacing between paragraphs — reset it to 0. */
.service-detail-description p {
    margin: 0;
}

.service-detail-description ul,
.service-detail-description ol {
    margin: 0;
    padding-left: 20px;
}

.service-detail-price-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--section-bg-color);
    border-radius: var(--border-radius-medium);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.service-detail-price-note {
    display: block;
    font-size: 12px;
    color: var(--p-color);
    margin-top: 2px;
}

.service-detail-save-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.service-detail-save-badge {
    display: inline-flex;
    align-items: center;
    background: #e9f7f0;
    color: #1a9c5b;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    padding: 4px 10px;
    border-radius: var(--border-radius-small);
    white-space: nowrap;
}

.service-detail-save-amount {
    font-size: 12px;
    color: var(--p-color);
    white-space: nowrap;
}

.service-detail-included {
    margin-bottom: 18px;
}

.service-detail-included h6 {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 10px;
}

.service-detail-included ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-detail-included li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--p-color);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.service-detail-included li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.service-detail-included li i {
    color: var(--primary-color);
    font-size: 14px;
}

.service-detail-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    background: var(--white-color);
    border-radius: var(--border-radius-medium);
    padding: 14px 16px;
    margin-bottom: 22px;
}

.service-detail-perk {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--p-color);
    font-weight: var(--font-weight-bold);
}

.service-detail-perk i {
    color: var(--primary-color);
}

.service-detail-cta .btn-contact-gradient {
    padding: 12px 20px;
}

.service-detail-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--p-color);
    margin: 10px 0 0;
}

.service-detail-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--p-color);
    background: var(--section-bg-color);
    border-radius: var(--border-radius-medium);
    padding: 10px 12px;
    margin: 12px 0 0;
}

.service-detail-disclaimer i {
    flex-shrink: 0;
    margin-top: 2px;
}

.service-detail-disclaimer a {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.service-detail-business-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--section-bg-color);
    border-radius: var(--border-radius-medium);
    padding: 12px 16px;
    margin-top: 18px;
}

.service-detail-business-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.service-detail-business-info i {
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
}

.service-detail-business-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-detail-business-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    white-space: nowrap;
}

.service-detail-business-btn i {
    transition: transform .2s ease;
}

.service-detail-business-btn:hover {
    color: var(--primary-color);
}

.service-detail-business-btn:hover i {
    transform: translateX(3px);
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Sales / service grid — business profile (responsive card grid) */
.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.service-grid-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    overflow: hidden;
    text-align: left;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.service-grid-item:hover {
    transform: translateY(-3px);
    border-color: rgba(11, 135, 125, .25);
    box-shadow: 0 12px 28px rgba(11, 135, 125, .12);
}

.service-grid-media {
    position: relative;
}

.service-grid-type-badge {
    top: 10px;
    left: 10px;
    right: auto;
}

.service-grid-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.service-grid-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
    min-width: 0;
}

.service-grid-category {
    align-self: flex-start;
    margin-bottom: 8px;
}

.service-grid-name {
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    color: var(--dark-color);
    margin-bottom: 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-grid-item:hover .service-grid-name {
    color: var(--primary-color);
}

.service-grid-desc {
    font-size: 13px;
    color: var(--p-color);
    line-height: 1.45;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-grid-price {
    margin-top: auto;
    padding-top: 12px;
}

.service-grid-price .service-card-price-now {
    font-size: 16px;
}

@media (min-width: 576px) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.service-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    transition: box-shadow .15s ease;
}

.service-list-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.service-list-main:hover .service-list-name {
    color: var(--primary-color);
}

.service-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.service-list-img {
    width: 84px;
    height: 84px;
    border-radius: var(--border-radius-small);
    object-fit: cover;
    flex-shrink: 0;
}

.service-list-body {
    flex: 1;
    min-width: 0;
}

.service-list-badge-row {
    flex-wrap: wrap;
    row-gap: 4px;
}

.service-list-name {
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    white-space: nowrap;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-list-price {
    flex-shrink: 0;
    text-align: right;
}

.service-list-item-inactive {
    opacity: .6;
}

.service-list-item-inactive .service-list-img {
    filter: grayscale(.4);
}

.service-status-badge {
    display: inline-flex;
    align-items: center;
    background: #f1f1f1;
    color: var(--p-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    padding: 3px 10px;
    border-radius: var(--border-radius-large);
}

.js-sale-status-toggle i {
    font-size: 16px;
}

.service-detail-status-row {
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

#saleDetailStatusToggle i {
    margin-right: 4px;
}

.service-list-date {
    display: block;
    font-size: 12px;
    color: var(--p-color);
    margin-top: 2px;
}

.service-list-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.mb-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--p-color);
}

.mb-status-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
}

.mb-status-dot.is-active {
    color: #1a7f37;
}

.mb-status-dot.is-active::before {
    background: #28a745;
}

.service-list-chevron-btn {
    color: var(--p-color);
}

/* My Business list filter bar — category/search/sort row above a .service-list
   (or similar) listing, with a collapsible advanced-filters row underneath. */
.mb-filter-bar {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 14px;
    margin-bottom: 20px;
}

.mb-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mb-filter-row-advanced {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.mb-filter-select {
    width: auto;
    min-width: 160px;
    height: 44px;
    border-color: var(--border-color);
    font-size: 14px;
}

.mb-filter-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(11, 135, 125, .12);
}

.mb-filter-search {
    position: relative;
    flex: 1 1 220px;
}

.mb-filter-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--p-color);
    font-size: 14px;
}

.mb-filter-search input {
    width: 100%;
    height: 44px;
    padding-left: 38px;
    border-color: var(--border-color);
    border-radius: var(--border-radius-small);
    font-size: 14px;
}

.mb-filter-search input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(11, 135, 125, .12);
}

.mb-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    white-space: nowrap;
}

.mb-filter-toggle-btn:hover,
.mb-filter-toggle-btn[aria-expanded="true"] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.mb-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
}

.mb-filter-clear:hover {
    color: var(--secondary-color);
}

.mb-empty-panel-compact {
    padding: 32px 24px;
}

.mb-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.mb-list-footer-info {
    color: var(--p-color);
    font-size: 13px;
    margin-bottom: 0;
}

.mb-list-footer .business-pagination {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    .mb-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .mb-filter-select,
    .mb-filter-toggle-btn {
        width: 100%;
    }

    .mb-list-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .service-list-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .service-list-main {
        flex-wrap: wrap;
        width: 100%;
    }

    .service-list-price {
        width: 100%;
        text-align: left;
    }

    .service-list-actions {
        width: 100%;
        margin-top: 10px;
    }

    .service-detail-visual,
    .service-detail-info {
        max-width: 100%;
        flex-basis: 100%;
        padding: 20px;
    }

    .service-detail-perks {
        gap: 8px 14px;
    }
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    transition: box-shadow .15s ease, transform .15s ease;
}

.blog-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
    color: inherit;
}

.blog-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: #ff5a7a;
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 6px 14px rgba(255, 90, 122, .4);
}

.blog-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.blog-card-title {
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    letter-spacing: normal;
    line-height: 1.3;
    color: var(--dark-color);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--p-color);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.blog-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.blog-card-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.blog-card-author {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-card-role {
    font-size: 11.5px;
    color: var(--p-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-card-date {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--p-color);
}

.blog-detail-card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    overflow: hidden;
}

.blog-detail-cover {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.blog-detail-title {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    letter-spacing: normal;
    line-height: 1.3;
    color: var(--dark-color);
}

.blog-detail-date {
    font-size: 13px;
    color: var(--p-color);
}

.blog-detail-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--p-color);
}

/* The saved HTML already carries its own <br> line breaks for blank lines
   (see MyHelpers::normalizeRichTextHtml), so the browser's default <p> margin
   would double up the spacing between paragraphs — reset it to 0. */
.blog-detail-content p {
    margin: 0;
}

.blog-detail-content ul,
.blog-detail-content ol {
    margin: 0;
    padding-left: 20px;
}

.blog-detail-content a {
    color: var(--primary-color);
    word-break: break-word;
}

.blog-detail-content img {
    max-width: 100%;
    border-radius: var(--border-radius-small);
}

@media (max-width: 575.98px) {
    .blog-detail-cover {
        height: 200px;
    }

    .blog-detail-title {
        font-size: 20px;
    }
}

.ad-detail-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 5px 10px;
    border-radius: var(--border-radius-small);
}

.ad-detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.ad-detail-gallery-item {
    display: block;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.ad-detail-gallery-item img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: cover;
    transition: transform .2s ease;
}

.ad-detail-gallery-item:hover img {
    transform: scale(1.06);
}

/* Business ad detail page */
.ad-hero-media {
    position: relative;
}

.ad-hero-media .blog-detail-cover {
    height: 380px;
}

.ad-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .65) 100%);
}

.ad-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 32px 34px;
}

.ad-hero-title {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    color: var(--white-color);
    margin-bottom: 8px;
}

.ad-hero-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    max-width: 460px;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .ad-hero-media .blog-detail-cover {
        height: 260px;
    }

    .ad-hero-title {
        font-size: 22px;
    }

    .ad-hero-overlay {
        padding: 20px;
    }
}

.ad-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ad-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--dark-color);
}

.ad-meta-chip i {
    font-size: 13px;
    color: var(--p-color);
}

.ad-meta-chip.chip-trusted {
    background: rgba(25, 135, 84, .1);
    border-color: transparent;
    color: #198754;
    font-weight: var(--font-weight-bold);
}

.ad-meta-chip.chip-trusted i {
    color: #198754;
}

.ad-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-ad-primary,
.btn-ad-outline {
    flex: 1 1 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: var(--border-radius-large);
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    text-decoration: none;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.btn-ad-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    border: none;
}

.btn-ad-primary:hover {
    color: var(--white-color);
    opacity: .92;
}

.btn-ad-outline {
    background: var(--white-color);
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
}

.btn-ad-outline:hover {
    background: rgba(11, 135, 125, .06);
    color: var(--primary-color);
}

.ad-sidebar-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

.ad-sidebar-rating i {
    color: #ffb400;
}

.ad-sidebar-rating span {
    font-weight: normal;
    color: var(--p-color);
}

.ad-sidebar-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.ad-sidebar-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 12px;
    color: var(--dark-color);
    text-decoration: none;
    cursor: pointer;
}

.ad-sidebar-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color .15s ease, color .15s ease;
}

.ad-sidebar-action:hover .ad-sidebar-action-icon {
    background: var(--primary-color);
    color: var(--white-color);
}

.ad-sidebar-panel {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 20px;
}

.ad-sidebar-panel.panel-about {
    background: rgba(11, 135, 125, .06);
    border-color: transparent;
}

.ad-sidebar-panel-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: rgba(11, 135, 125, .12);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ad-sidebar-panel-link {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ad-sidebar-panel-link:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

.ad-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ad-share-icon {
    width: 38px;
    height: 38px;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 16px;
    border: none;
    text-decoration: none;
}

.ad-share-icon.share-whatsapp { background: #25D366; }
.ad-share-icon.share-facebook { background: #1877F2; }
.ad-share-icon.share-twitter { background: #000000; }
.ad-share-icon.share-linkedin { background: #0A66C2; }
.ad-share-icon.share-copy { background: var(--section-bg-color); color: var(--dark-color); }

.ad-share-icon:hover {
    opacity: .85;
    color: var(--white-color);
}

.ad-share-icon.share-copy:hover {
    color: var(--dark-color);
}

/* Business blog detail page */
.blog-hero-section {
    padding: 24px 0 0;
}

.blog-hero-banner {
    position: relative;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 34px 34px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #072823 100%);
}

.blog-hero-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .65) 100%);
}

.blog-hero-breadcrumb {
    position: relative;
    z-index: 2;
    margin-bottom: auto;
}

.blog-hero-breadcrumb .breadcrumb-item,
.blog-hero-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, .75);
}

.blog-hero-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, .95);
}

.blog-hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .5);
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin-top: 40px;
}

.blog-hero-title {
    font-size: 34px;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    color: var(--white-color);
    margin-bottom: 10px;
}

.blog-hero-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 0;
}

.blog-hero-subtitle i {
    margin-right: 4px;
}

.blog-hero-business-card {
    position: absolute;
    z-index: 2;
    top: 24px;
    right: 24px;
    width: 300px;
    max-width: calc(100% - 48px);
    background: rgba(4, 28, 25, .55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    color: var(--white-color);
}

.blog-hero-business-card h6 {
    color: var(--white-color);
}

.blog-hero-business-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .5);
}

.blog-hero-business-meta {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .7);
}

.blog-hero-business-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
    margin-top: 2px;
}

.blog-hero-business-rating i {
    color: #ffb400;
}

.blog-hero-business-rating span {
    font-weight: normal;
    color: rgba(255, 255, 255, .7);
}

.blog-hero-business-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.blog-hero-business-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 2px 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    cursor: pointer;
}

.blog-hero-business-action span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color .15s ease;
}

.blog-hero-business-action:hover span {
    background: rgba(255, 255, 255, .28);
}

@media (max-width: 991.98px) {
    .blog-hero-business-card {
        position: static;
        width: auto;
        max-width: none;
        margin-top: 20px;
    }

    .blog-hero-content {
        margin-top: 20px;
    }
}

@media (max-width: 575.98px) {
    .blog-hero-banner {
        min-height: unset;
        padding: 16px 18px 24px;
    }

    .blog-hero-title {
        font-size: 22px;
    }
}

.blog-meta-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    padding: 18px 34px;
    margin-bottom: 24px;
}

.blog-meta-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.blog-meta-stat i {
    font-size: 18px;
    color: var(--primary-color);
}

.blog-meta-stat span {
    display: block;
    color: var(--p-color);
    font-size: 14px;
}

.blog-meta-stat strong {
    display: block;
    color: var(--dark-color);
    font-size: 16px;
}

.blog-overview-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 28px;
}

.blog-section-title {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    padding-left: 14px;
    border-left: 4px solid var(--primary-color);
    margin-bottom: 16px;
}

.blog-cta-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(11, 135, 125, .06);
    border-radius: var(--border-radius-medium);
    padding: 24px;
    margin-top: 28px;
}

.blog-cta-box h5 {
    color: var(--dark-color);
}

.blog-cta-box p {
    color: var(--p-color);
    font-size: 14px;
}

.blog-cta-box .btn-ad-primary {
    flex: 0 0 auto;
}

.blog-related-card {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    text-decoration: none;
    background: var(--white-color);
    transition: box-shadow .15s ease, transform .15s ease;
}

.blog-related-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.blog-related-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.blog-related-card-body {
    padding: 14px 16px;
}

.blog-related-card-body h6 {
    color: var(--dark-color);
    margin-bottom: 6px;
}

.blog-related-card-body span {
    font-size: 12.5px;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

/* My Business gallery */
.gallery-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--section-bg-color);
}

.gallery-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform .2s ease;
}

.gallery-tile:hover .gallery-tile-img {
    transform: scale(1.05);
}

.gallery-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 22px;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background .15s ease;
}

.gallery-tile:hover .gallery-tile-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, .25);
}

.gallery-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #dc3545;
}

.gallery-delete-btn:hover {
    background: #dc3545;
    color: var(--white-color);
}

/* Multi-file picker preview (image-preview.js) */
.multi-file-native-input {
    display: none;
}

.multi-file-tile {
    position: relative;
    width: 72px;
    height: 72px;
}

.multi-file-tile img {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-medium);
}

.multi-file-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #dc3545;
    color: var(--white-color);
    font-size: 12px;
    line-height: 1;
}

.multi-file-remove-btn:hover {
    background: #b02a37;
}

.multi-file-add-btn {
    order: 1;
    width: 72px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-size: 10.5px;
    line-height: 1.15;
    text-align: center;
}

.multi-file-add-btn i {
    font-size: 16px;
}

.multi-file-add-btn:hover {
    background: var(--border-color);
}

.multi-file-add-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    color: var(--dark-color);
}

.gallery-empty-state {
    padding: 48px 20px 32px;
}

.gallery-empty-illustration {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto 24px;
}

.gallery-empty-illustration-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
}

.gallery-empty-illustration-badge {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 3px solid var(--white-color);
}

.gallery-empty-title {
    font-weight: var(--font-weight-bold);
    font-size: 19px;
    color: var(--dark-color);
    margin-bottom: 8px;
}

.gallery-empty-text {
    color: var(--p-color);
    font-size: 14.5px;
    max-width: 460px;
    margin: 0 auto 24px;
}

.gallery-feature-row {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.mb-feature-item {
    text-align: left;
}

.mb-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 12px;
}

.mb-feature-item h6 {
    font-weight: var(--font-weight-bold);
    font-size: 14.5px;
    color: var(--dark-color);
    margin-bottom: 4px;
}

.mb-feature-item p {
    color: var(--p-color);
    font-size: 13px;
    margin-bottom: 0;
}

/* Search / listing empty state */
.search-empty-state {
    padding: 56px 20px;
}

.search-empty-illustration {
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
}

.search-empty-title {
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    color: var(--dark-color);
    margin-bottom: 8px;
}

.search-empty-text {
    color: var(--p-color);
    font-size: 14.5px;
    margin-bottom: 24px;
}

.btn-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.btn-clear-filters:hover {
    background: var(--primary-color);
    color: var(--white-color);
    text-decoration: none;
}

/* Notifications empty state */
.notif-empty-state {
    padding: 64px 20px;
}

.notif-empty-illustration {
    width: 88px;
    height: 88px;
    margin: 0 auto 22px;
    border-radius: 50%;
    border: 2px dashed rgba(11, 135, 125, .35);
    background: rgba(11, 135, 125, .06);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.notif-empty-title {
    font-weight: var(--font-weight-bold);
    font-size: 19px;
    color: var(--dark-color);
    margin-bottom: 8px;
}

.notif-empty-text {
    color: var(--p-color);
    font-size: 14.5px;
    margin-bottom: 0;
    line-height: 1.6;
}

/* My Business search tags */
.tag-stat-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 14px 20px;
}

.tag-stat-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.tag-stat-number {
    font-weight: var(--font-weight-bold);
    font-size: 20px;
    line-height: 1.2;
    color: var(--dark-color);
}

.tag-stat-label {
    font-size: 12px;
    color: var(--p-color);
    white-space: nowrap;
}

.tag-stat-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border-color);
}

.mb-alert-success,
.mb-alert-error {
    border-radius: var(--border-radius-medium);
    padding: 16px 18px;
    border: 1px solid;
}

.mb-alert-success {
    background: #e6f7ec;
    border-color: #b8ead0;
}

.mb-alert-error {
    background: #fde8e8;
    border-color: #f6c7c7;
}

.mb-alert-icon {
    flex-shrink: 0;
    font-size: 22px;
    color: #1e9e4d;
}

.mb-alert-error .mb-alert-icon {
    color: #dc3545;
}

.mb-alert-title {
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    font-size: 14.5px;
}

.mb-alert-text {
    color: var(--p-color);
    font-size: 13.5px;
}

.mb-icon-circle-md {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.tag-tips-card {
    background: rgba(11, 135, 125, .05);
    border: 1px solid rgba(11, 135, 125, .15);
    border-radius: var(--border-radius-medium);
    padding: 18px;
}

.tag-tips-card i {
    color: var(--primary-color);
    font-size: 16px;
}

.tag-tips-card h6 {
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.tag-tips-card p {
    color: var(--p-color);
    font-size: 13px;
}

.tag-pill-removable {
    padding: 7px 12px 7px 16px;
    font-size: 13px;
    border: 1px solid rgba(11, 135, 125, .18);
}

.tag-feature-panel {
    background: var(--section-bg-color);
    border-radius: var(--border-radius-medium);
    padding: 24px;
}

/* Outline button — pairs with .btn-search as the secondary action */
.btn-outline-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-small);
    text-decoration: none;
}

.btn-outline-soft:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Gallery toolbar (album filter + grid/list toggle) */
.gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.gallery-filter-select {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--white-color);
    padding: 9px 14px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.gallery-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.gallery-view-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    color: var(--p-color);
    border: 0;
}

.gallery-view-btn + .gallery-view-btn {
    border-left: 1px solid var(--border-color);
}

.gallery-view-btn.active {
    background: var(--primary-color);
    color: var(--white-color);
}

/* Gallery grid/list */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.gallery-grid.is-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery-tile-card {
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

.gallery-tile-card .gallery-tile {
    border: 0;
    border-radius: 0;
}

.gallery-grid.is-list .gallery-tile-card {
    flex-direction: row;
    align-items: center;
}

.gallery-grid.is-list .gallery-tile {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.gallery-grid.is-list .gallery-tile-caption {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gallery-tile-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dark-color);
}

.gallery-tile-menu-btn:hover {
    background: var(--white-color);
}

.gallery-tile-caption {
    padding: 12px 14px;
}

.gallery-tile-name {
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    color: var(--dark-color);
    margin-bottom: 2px;
}

.gallery-tile-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gallery-tile-meta {
    font-size: 12px;
    color: var(--p-color);
}

.gallery-primary-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    background: rgba(11, 135, 125, .1);
    padding: 2px 10px;
    border-radius: var(--border-radius-large);
}

/* Tips panel (icon + text on the left, checklist on the right) */
.gallery-tips-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    background: var(--section-bg-color);
    border-radius: var(--border-radius-medium);
    padding: 22px 24px;
}

.gallery-tips-checklist {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px 32px;
}

.gallery-tips-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--dark-color);
}

.gallery-tips-checklist li i {
    color: #1e9e4d;
}

/* Rich-text editor (Quill) — used for every rich-text field site-wide (blog
   content, job description/responsibilities/requirements, ad description,
   business description) so all editors share the same compact height. */
.rich-text-editor {
    background: var(--white-color);
    font-family: var(--body-font-family);
}

.rich-text-editor .ql-toolbar.ql-snow {
    border-color: var(--border-color);
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}

.rich-text-editor .ql-container.ql-snow {
    border-color: var(--border-color);
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    min-height: 150px;
    font-size: 14px;
}

.rich-text-char-count {
    margin-top: 6px;
    font-size: 12px;
    color: var(--body-color, #6c757d);
    text-align: right;
}

.rich-text-char-count.text-danger {
    color: #dc3545;
}

/* Renders the HTML saved by .rich-text-editor (job description / responsibilities
   / requirements) — same reset as .blog-detail-content. */
.job-rich-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--p-color);
}

.job-rich-content img {
    max-width: 100%;
    border-radius: var(--border-radius-small);
}

/* The saved HTML already carries its own <br> line breaks for blank lines
   (see MyHelpers::normalizeRichTextHtml), so the browser's default <p> margin
   would double up the spacing between paragraphs — reset it to 0. */
.job-rich-content p {
    margin: 0;
}

.job-rich-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.job-rich-content ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--dark-color);
}

.job-rich-content ul li:last-child {
    margin-bottom: 0;
}

.job-rich-content ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #198754;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Pill-style multi-select checkboxes (Job Type / Work Mode) */
.pill-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill-checkbox {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.pill-checkbox input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.pill-checkbox span {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--p-color);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    user-select: none;
}

.pill-checkbox:hover span {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pill-checkbox input:checked + span {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.review-item {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 0;
}

.review-item:last-child {
    border-bottom: none;
}

.enquiry-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.enquiry-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    transition: box-shadow .15s ease;
}

.enquiry-card:hover {
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.enquiry-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.enquiry-card-body {
    flex: 1;
    min-width: 0;
}

.enquiry-card-name {
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    color: var(--dark-color);
}

.enquiry-card-ref {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--p-color);
}

.enquiry-card-date {
    font-size: 12px;
    color: var(--p-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.enquiry-card-title {
    display: inline-flex;
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    padding: 3px 10px;
    border-radius: var(--border-radius-large);
    margin-bottom: 8px;
}

.enquiry-card-message {
    font-size: 14px;
    color: var(--dark-color);
}

.enquiry-card-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.thread-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--border-radius-large);
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

/* Chat inbox (messages.index) — a flat conversation list, not boxed cards */
.chat-inbox-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    overflow: hidden;
}

.chat-inbox-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    color: var(--dark-color);
    transition: background .15s ease;
}

.chat-inbox-item:last-child {
    border-bottom: none;
}

.chat-inbox-item:hover {
    background: var(--section-bg-color);
    color: var(--dark-color);
}

.chat-inbox-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-inbox-item-unread .chat-inbox-avatar {
    background: var(--primary-color);
    color: var(--white-color);
}

.chat-inbox-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.chat-inbox-body {
    flex: 1;
    min-width: 0;
}

.chat-inbox-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.chat-inbox-name {
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    color: var(--dark-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-inbox-time {
    font-size: 12px;
    color: var(--p-color);
    flex-shrink: 0;
}

.chat-inbox-item-unread .chat-inbox-time {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

.chat-inbox-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

.chat-inbox-preview {
    font-size: 13.5px;
    color: var(--p-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-inbox-item-unread .chat-inbox-preview {
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

.chat-inbox-preview-you {
    color: var(--p-color);
    font-weight: var(--font-weight-normal);
}

/* Chat thread (messages.show) */
.chat-thread-container {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.chat-thread-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    overflow: hidden;
}

.chat-thread-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--white-color);
}

.chat-thread-header-info {
    min-width: 0;
}

.chat-thread-verified-badge {
    font-size: 11px;
    padding: 2px 9px;
}

.chat-thread-subject {
    font-size: 12px;
    color: var(--p-color);
}

.chat-thread-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.chat-thread-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--primary-color);
    font-size: 14px;
    transition: background .15s ease, border-color .15s ease;
}

.chat-thread-action-btn:hover {
    background: var(--section-bg-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.chat-thread-action-btn-text {
    width: auto;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--border-radius-large);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.chat-thread-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    min-height: 360px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--white-color);
}

.chat-date-divider {
    display: flex;
    justify-content: center;
    margin: 6px 0 14px;
}

.chat-date-divider span {
    background: var(--section-bg-color);
    color: var(--p-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 4px 14px;
    border-radius: var(--border-radius-large);
}

.chat-bubble-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.chat-bubble-row-mine {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: var(--border-radius-medium);
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.chat-bubble-theirs {
    background: #eef0f2;
    color: var(--dark-color);
    border-bottom-left-radius: 4px;
}

.chat-bubble-mine {
    background: var(--primary-color);
    color: var(--white-color);
    border-bottom-right-radius: 4px;
}

.chat-bubble-text {
    margin: 0;
    color: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble-time {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .7;
}

.chat-bubble-time i {
    margin-left: 3px;
}

.chat-bubble-read {
    color: #6fd3ff;
}

.chat-thread-info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--section-bg-color);
}

.chat-thread-info-item {
    flex: 1 1 160px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.chat-thread-info-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    color: var(--primary-color);
    border-radius: 50%;
    font-size: 13px;
}

.chat-thread-info-item strong {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.chat-thread-info-item span {
    display: block;
    font-size: 11px;
    color: var(--p-color);
    line-height: 1.4;
}

.chat-thread-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--p-color);
    text-align: center;
    padding: 10px 16px 16px;
    margin: 0;
    background: var(--white-color);
}

.chat-reply-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--white-color);
}

.chat-reply-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 10px 18px;
    font-size: 14px;
    background: #eef0f2;
}

.chat-reply-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--white-color);
}

.chat-reply-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: var(--white-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s ease;
}

.chat-reply-send-btn:hover {
    background: var(--secondary-color);
}

.chat-reply-send-btn:disabled {
    opacity: .6;
}

@media (max-width: 575.98px) {
    .chat-thread-header {
        flex-wrap: wrap;
    }

    .chat-thread-actions {
        flex-basis: 100%;
        margin-top: 10px;
        padding-left: 60px;
    }

    .chat-thread-info-strip {
        gap: 14px 10px;
    }
}

.review-card-flex {
    display: flex;
    gap: 14px;
}

.review-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    flex-shrink: 0;
}

.review-card-body {
    flex: 1;
    min-width: 0;
}

.review-card-name {
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    color: var(--dark-color);
}

.review-card-date {
    font-size: 12px;
    color: var(--p-color);
    margin-top: 2px;
}

.review-card-text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.reviews-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.reviews-tab-title {
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.reviews-tab-header .btn-contact-gradient {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    padding: 10px 22px;
    font-size: 14px;
}

.review-modal .modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
}

.review-modal-dialog {
    max-width: 620px;
}

.review-modal-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 22px;
    border: none;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.72) 0%, transparent 38%),
        radial-gradient(circle at 82% 18%, rgba(253, 99, 1, 0.16) 0%, transparent 34%),
        linear-gradient(135deg, #e7f7f5 0%, #f2fbfb 52%, #edf8f7 100%);
    overflow: hidden;
}

.review-modal-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background:
        radial-gradient(circle at 12% 100%, rgba(11, 135, 125, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 88% 100%, rgba(253, 99, 1, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.review-modal-header-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.review-modal-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    flex: 0 0 auto;
    font-size: 20px;
    box-shadow: 0 10px 20px rgba(11, 135, 125, 0.22);
}

.review-modal-header .modal-title {
    color: #102a43;
    letter-spacing: normal;
    font-weight: var(--font-weight-bold);
    font-size: 22px;
}

.review-modal-subtitle {
    color: #6b7280;
    font-size: 13px;
}

.review-modal-header-art {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 92px;
    flex: 0 0 auto;
    margin-right: 28px;
}

.review-modal-art-clipboard {
    position: absolute;
    right: 8px;
    top: 10px;
    width: 58px;
    height: 72px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(11, 135, 125, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 28px;
    box-shadow: 0 10px 24px rgba(11, 135, 125, 0.12);
    transform: rotate(8deg);
}

.review-modal-art-heart {
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid rgba(11, 135, 125, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(11, 135, 125, 0.12);
}

.review-modal-art-leaf {
    position: absolute;
    color: #7ecfc7;
    font-size: 22px;
}

.review-modal-art-leaf-1 {
    left: 0;
    bottom: 8px;
}

.review-modal-art-leaf-2 {
    left: 24px;
    bottom: 0;
    font-size: 18px;
}

.review-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.review-modal-close:hover {
    color: var(--primary-color);
}

.review-modal-body {
    padding: 28px 28px 22px;
}

.review-modal-guest-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #eef8ff;
    border: 1px solid rgba(59, 130, 246, 0.14);
    color: #2563eb;
    font-size: 13px;
    line-height: 1.5;
}

.review-modal-guest-note i {
    margin-top: 2px;
}

.review-modal-rating-block {
    text-align: center;
}

.review-modal-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
    color: #102a43;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
}

.review-modal-feedback-block .review-modal-section-title {
    justify-content: flex-start;
}

.review-modal-feedback-block .review-modal-section-title i {
    color: var(--primary-color);
}

.review-modal-stars {
    text-align: center;
}

.review-modal .star-rating-input-lg {
    justify-content: center;
    font-size: 38px;
    gap: 10px;
    color: var(--primary-color);
}

.review-modal .star-rating-input-lg i {
    transition: transform .12s ease, color .12s ease;
}

.review-modal .star-rating-input-lg i:hover {
    transform: scale(1.08);
}

.review-modal .star-rating-input-lg i.bi-star {
    color: var(--primary-color);
    -webkit-text-stroke: 0.4px var(--primary-color);
}

.review-modal .star-rating-input-lg i.bi-star-fill {
    color: var(--primary-color);
}

.review-modal-stars-label {
    margin-top: 10px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--p-color);
}

.review-modal-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 24px 0;
}

.review-modal-feedback-copy {
    margin: -8px 0 14px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.55;
}

.review-modal-textarea-wrap {
    position: relative;
}

.review-modal-textarea {
    width: 100%;
    min-height: 132px;
    border: 1px solid #d8dee6;
    border-radius: 16px;
    background: #f8fafb;
    padding: 16px 16px 34px;
    font-size: 14px;
    line-height: 1.55;
    color: #102a43;
    resize: vertical;
}

.review-modal-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--white-color);
    box-shadow: 0 0 0 3px rgba(11, 135, 125, 0.08);
}

.review-modal-char-count {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 12px;
    color: var(--p-color);
}

.review-modal-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #edf9f1;
    border: 1px solid rgba(34, 197, 94, 0.16);
    color: #15803d;
    font-size: 13px;
    line-height: 1.5;
}

.review-modal-privacy i {
    margin-top: 2px;
    color: #22c55e;
}

.review-modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 18px 24px 22px;
    justify-content: flex-end;
    gap: 12px;
}

.review-modal-cancel-btn {
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid #d8dee6;
    border-radius: 999px;
    background: var(--white-color);
    color: #6b7280;
    font-weight: var(--font-weight-bold);
    font-size: 14px;
}

.review-modal-cancel-btn:hover {
    border-color: #cbd5e1;
    color: #374151;
}

.review-modal-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #08756d 100%);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    box-shadow: 0 10px 22px rgba(11, 135, 125, 0.22);
}

.review-modal-submit-btn:hover {
    color: var(--white-color);
    background: linear-gradient(135deg, #08756d 0%, var(--primary-color) 100%);
}

@media (max-width: 575.98px) {
    .review-modal-dialog {
        margin: 12px;
    }

    .review-modal-header {
        padding: 20px 18px 18px;
    }

    .review-modal-header-art {
        display: none;
    }

    .review-modal-body {
        padding: 22px 18px 18px;
    }

    .review-modal-footer {
        padding: 16px 18px 18px;
        flex-direction: column-reverse;
    }

    .review-modal-cancel-btn,
    .review-modal-submit-btn {
        width: 100%;
    }

    .review-modal .star-rating-input-lg {
        font-size: 32px;
        gap: 8px;
    }
}

.enquiry-modal .modal-content {
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.enquiry-modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    border: none;
    align-items: flex-start;
    padding: 22px 24px;
}

.enquiry-modal-header .modal-title {
    color: var(--white-color);
    letter-spacing: normal;
    font-weight: var(--font-weight-bold);
}

.enquiry-modal-subtitle {
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
}

.enquiry-modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.enquiry-modal .modal-body {
    padding: 28px 24px;
}

.enquiry-modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
}

.enquiry-modal-footer .btn-contact-gradient {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    padding: 10px 22px;
    font-size: 14px;
}

.star-rating-input-lg {
    justify-content: center;
    font-size: 34px;
    gap: 8px;
}

.star-rating-input-lg i {
    transition: transform .12s ease;
}

.star-rating-input-lg i:hover {
    transform: scale(1.15);
}

.btn-cancel-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--p-color);
    border-radius: var(--border-radius-small);
    padding: 10px 22px;
    font-weight: var(--font-weight-bold);
}

.btn-cancel-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.contact-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.contact-tab-header .btn-contact-gradient {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    padding: 10px 22px;
    font-size: 14px;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.contact-details-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.contact-details-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.contact-details-label {
    font-size: 12px;
    color: var(--p-color);
    margin-bottom: 2px;
}

.contact-details-value {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.contact-details-value a {
    color: var(--dark-color);
    text-decoration: none;
}

.contact-details-value a:hover {
    color: var(--primary-color);
}

.rating-badge-high {
    background-color: #1ea672 !important;
}

.rating-badge-mid {
    background-color: #f1a542 !important;
}

.rating-badge-low {
    background-color: #e6483a !important;
}

.review-empty {
    text-align: center;
    padding: 36px 0;
}

.business-pagination {
    margin-top: 16px;
}

.business-pagination .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}

.business-pagination .page-link {
    border-radius: var(--border-radius-small) !important;
    border: 1px solid var(--border-color);
    color: var(--dark-color);
    font-size: 13px;
    padding: 6px 12px;
}

.business-pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.business-pagination .page-item.disabled .page-link {
    color: #ccc;
}

/* My Business dashboard — denser, app-like spacing than the marketing
   .site-section/.site-section-title (which are sized for full-page hero
   sections, not a sidebar-bound dashboard content area). */
.mb-section {
    padding: 32px 0;
}

.mb-page-title {
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--dark-color);
    margin-bottom: 4px;
}

.mb-page-subtitle {
    color: var(--p-color);
    font-size: 14px;
    margin-bottom: 20px;
}

@media (max-width: 767.98px) {
    .mb-section {
        padding: 20px 0;
    }

    .mb-page-title {
        font-size: 19px;
    }

    .mb-page-subtitle {
        font-size: 13px;
        margin-bottom: 14px;
    }
}

.apply-review-modal-dialog {
    max-width: 520px;
}

.apply-review-modal .modal-content {
    position: relative;
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
}

.apply-review-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.apply-review-modal-close:hover {
    color: var(--primary-color);
}

.apply-review-modal-hero {
    text-align: center;
    padding: 28px 28px 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.85) 0%, transparent 52%),
        linear-gradient(180deg, #edf9f7 0%, #f8fdfc 100%);
}

.apply-review-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(11, 135, 125, 0.12);
    color: var(--primary-color);
    font-size: 26px;
}

.apply-review-modal-title {
    margin: 0 0 8px;
    color: #102a43;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
}

.apply-review-modal-subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.55;
}

.apply-review-modal-body {
    padding: 18px 24px 24px;
}

.apply-review-checklist {
    display: grid;
    gap: 12px;
}

.apply-review-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: var(--white-color);
}

.apply-review-item-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: 0 0 auto;
    font-size: 12px;
}

.apply-review-item.is-complete .apply-review-item-status {
    background: #dcfce7;
    color: #16a34a;
}

.apply-review-item.is-missing .apply-review-item-status {
    background: #fee2e2;
    color: #ef4444;
}

.apply-review-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
    font-size: 18px;
}

.apply-review-item.is-complete .apply-review-item-icon {
    background: rgba(11, 135, 125, 0.1);
    color: var(--primary-color);
}

.apply-review-item.is-missing .apply-review-item-icon {
    background: #fff1f2;
    color: #f43f5e;
}

.apply-review-item-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.apply-review-item-copy strong {
    display: block;
    color: #102a43;
    font-size: 14px;
    line-height: 1.35;
}

.apply-review-item-copy small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
}

.apply-review-item.is-complete .apply-review-item-copy small {
    color: #16a34a;
}

.apply-review-item.is-missing .apply-review-item-copy small {
    color: #ef4444;
}

.apply-review-item-add {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1px solid rgba(11, 135, 125, 0.22);
    border-radius: 999px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    background: var(--white-color);
}

.apply-review-item-add:hover {
    background: rgba(11, 135, 125, 0.06);
    color: #08756d;
}

.apply-review-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff8e8;
    border: 1px solid rgba(245, 158, 11, 0.18);
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
}

.apply-review-tip i {
    margin-top: 2px;
    color: #f59e0b;
}

.apply-review-form {
    margin-top: 18px;
}

.apply-review-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #08756d 100%);
    color: var(--white-color);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    box-shadow: 0 12px 24px rgba(11, 135, 125, 0.22);
}

.apply-review-submit-btn:hover:not(:disabled) {
    color: var(--white-color);
    background: linear-gradient(135deg, #08756d 0%, var(--primary-color) 100%);
}

.apply-review-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .apply-review-modal-body {
        padding: 16px 18px 20px;
    }

    .apply-review-modal-hero {
        padding: 24px 20px 8px;
    }

    .apply-review-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .apply-review-item-add {
        margin-left: 74px;
    }
}

.mb-sidebar {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 18px;
}

.mb-sidebar a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--border-radius-small);
    color: var(--dark-color);
    text-decoration: none;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.mb-sidebar a.active,
.mb-sidebar a:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.mb-sidebar hr {
    margin: 12px 0;
    border-color: var(--border-color);
    opacity: 1;
}

.mb-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 8px;
}

.mb-sidebar-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mb-sidebar-user-info {
    min-width: 0;
}

.mb-sidebar-user-name {
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    color: var(--dark-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-sidebar-user-email {
    font-size: 12px;
    color: var(--p-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-sidebar-logout-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border-radius: var(--border-radius-small);
    color: var(--primary-color);
    background: none;
    border: none;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.mb-sidebar-logout-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

@media (max-width: 991.98px) {
    .mb-sidebar-business {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding: 10px;
    }

    .mb-sidebar-business::-webkit-scrollbar {
        height: 4px;
    }

    .mb-sidebar-business::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: var(--border-radius-large);
    }

    .mb-sidebar-business hr {
        display: none;
    }

    .mb-sidebar-business a {
        flex-shrink: 0;
        white-space: nowrap;
        margin-bottom: 0;
    }
}

/* The base template's generic `.form-check-input[type=checkbox]` rule (built
   for its big icon-tile checkboxes) sets width:100%/padding:40px 50px, which
   blows up an ordinary Bootstrap checkbox into a giant blob. Restore the
   normal checkbox sizing here. */
.working-hours-table .form-check-input[type="checkbox"],
.business-form .form-check-input[type="checkbox"] {
    width: 1em;
    height: 1em;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.25em;
}

/* The same base rule also nukes the checked state (background-image:none
   plus background-color:transparent on :checked), so a checked box shows no
   checkmark at all — looks like clicking does nothing. Restore it here. */
.working-hours-table .form-check-input[type="checkbox"]:checked,
.business-form .form-check-input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.working-hours-table .form-check,
.business-form .form-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding-left: 0;
}

.working-hours-table .form-check-label,
.business-form .form-check-label {
    margin: 0;
}

.mb-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 18px;
    height: 100%;
    color: inherit;
}

.mb-stat-card .stat-number {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--dark-color);
}

.mb-stat-card .stat-label {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.mb-stat-card .stat-sub {
    font-size: 12px;
    color: var(--p-color);
}

a.mb-stat-card:hover {
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

.mb-stat-card-single {
    width: 230px;
    max-width: 100%;
    flex-shrink: 0;
    height: auto;
}

.mb-stat-badge {
    position: absolute;
    top: -8px;
    right: -8px;
}

.mb-stat-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.mb-stat-icon.bg-green,
.mb-tip-icon.bg-green,
.mb-stat-card .stat-number.text-green { color: #1e9e4d; }
.mb-stat-icon.bg-green,
.mb-tip-icon.bg-green { background: #e6f7ec; }

.mb-stat-icon.bg-blue,
.mb-tip-icon.bg-blue,
.mb-stat-card .stat-number.text-blue { color: #2563eb; }
.mb-stat-icon.bg-blue,
.mb-tip-icon.bg-blue { background: #e8f1ff; }

.mb-stat-icon.bg-purple,
.mb-tip-icon.bg-purple,
.mb-stat-card .stat-number.text-purple { color: #7c3aed; }
.mb-stat-icon.bg-purple,
.mb-tip-icon.bg-purple { background: #f1eaff; }

.mb-stat-icon.bg-red,
.mb-tip-icon.bg-red,
.mb-stat-card .stat-number.text-red { color: #e0405a; }
.mb-stat-icon.bg-red,
.mb-tip-icon.bg-red { background: #fde8ea; }

.mb-stat-icon.bg-orange,
.mb-tip-icon.bg-orange,
.mb-stat-card .stat-number.text-orange { color: #e07a1f; }
.mb-stat-icon.bg-orange,
.mb-tip-icon.bg-orange { background: #fdf0e2; }

/* Status pill + verified check next to the "My Business" page title */
.mb-page-title-check {
    color: var(--primary-color);
    font-size: 17px;
    margin-left: 6px;
    vertical-align: middle;
}

.mb-dashboard-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .02em;
    border: 1px solid transparent;
}

.mb-dashboard-status-pill.is-approved { background: #e6f7ec; color: #1e9e4d; border-color: #b8ead0; }
.mb-dashboard-status-pill.is-pending  { background: #fff6e0; color: #b8860b; border-color: #f3e2a8; }
.mb-dashboard-status-pill.is-new      { background: #e8f1ff; color: #2563eb; border-color: #c6dcff; }
.mb-dashboard-status-pill.is-rejected { background: #fde8e8; color: #dc3545; border-color: #f6c7c7; }
.mb-dashboard-status-pill.is-blocked  { background: #ececec; color: #343a40; border-color: #d8d8d8; }

/* Panel headers (Recent Enquiries / Reviews / Jobs / Ads) */
.mb-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: var(--font-weight-bold);
}

.mb-panel-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.mb-panel-link {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap .15s ease;
}

.mb-panel-link:hover {
    gap: 7px;
    color: var(--primary-color);
}

/* Empty states inside dashboard panels */
.mb-empty-state {
    text-align: center;
    padding: 26px 10px;
}

.mb-empty-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f1f3f6;
    color: #b9c0cb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 10px;
}

.mb-empty-state p {
    margin-bottom: 2px;
    color: var(--dark-color);
}

.mb-empty-state small {
    color: var(--p-color);
}

/* Sidebar unread badge + upsell promo card */
.mb-sidebar a.has-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mb-sidebar-badge {
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

.mb-sidebar a.active .mb-sidebar-badge,
.mb-sidebar a:hover .mb-sidebar-badge {
    background: var(--white-color);
    color: var(--primary-color);
}

.mb-sidebar-promo {
    margin-top: 14px;
    background: linear-gradient(135deg, #eafbf3, #f5fef9);
    border: 1px solid #cdeedd;
    border-radius: var(--border-radius-medium);
    padding: 14px;
}

.mb-sidebar-promo-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #28a745;
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.mb-sidebar-promo strong {
    display: block;
    font-size: 14px;
    color: var(--dark-color);
    margin-bottom: 2px;
}

.mb-sidebar-promo p {
    font-size: 12px;
    color: var(--p-color);
    margin-bottom: 8px;
}

.mb-sidebar-promo a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: #1e9e4d;
    text-decoration: none;
    padding: 0;
}

.mb-sidebar-promo a:hover {
    gap: 7px;
}

/* Header "+ New" quick action next to the status pill / apply-for-review button */
.mb-header-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 18px;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
}

.mb-header-btn-outline:hover {
    background: #f3faf8;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Pending / under-review dashboard state */
.mb-pending-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 48px 24px 0;
    text-align: center;
}

.mb-pending-illustration {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
}

.mb-pending-illu-board {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 84px;
    color: rgba(11, 135, 125, .16);
}

.mb-pending-illustration-rejected .mb-pending-illu-board {
    color: rgba(220, 53, 69, .18);
}

.mb-pending-illustration-new .mb-pending-illu-board {
    color: rgba(37, 99, 235, .18);
}

.mb-pending-illustration-blocked .mb-pending-illu-board {
    color: rgba(52, 58, 64, .18);
}

.mb-pending-illu-clock {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 28px;
    color: rgba(11, 135, 125, .4);
}

.mb-pending-illu-search {
    position: absolute;
    bottom: 22px;
    right: 0;
    font-size: 38px;
    color: var(--primary-color);
}

.mb-pending-title {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 8px;
}

.mb-pending-subtitle {
    color: var(--p-color);
    max-width: 520px;
    margin: 0 auto;
}

.mb-pending-divider {
    border-top: 1px solid var(--border-color);
    margin: 32px 0 0;
    opacity: 1;
}

.mb-pending-info-strip {
    background: #f5f9f8;
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    margin: 0 -24px;
    padding: 28px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.mb-pending-info-item {
    flex: 1 1 200px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.mb-pending-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mb-pending-info-item strong {
    display: block;
    font-size: 14px;
    color: var(--dark-color);
    margin-bottom: 2px;
}

.mb-pending-info-item span {
    font-size: 13px;
    color: var(--p-color);
}

.mb-pending-footer {
    padding: 24px 0;
    font-size: 14px;
    color: var(--p-color);
    margin-bottom: 0;
}

.mb-pending-footer a {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mb-pending-footer a:hover {
    gap: 7px;
}

@media (max-width: 767.98px) {
    .mb-pending-card {
        padding: 32px 16px 0;
    }

    .mb-pending-illustration {
        width: 110px;
        height: 110px;
        margin-bottom: 14px;
    }

    .mb-pending-illu-board {
        font-size: 62px;
    }

    .mb-pending-title {
        font-size: 20px;
    }

    .mb-pending-subtitle {
        font-size: 13.5px;
    }

    .mb-pending-info-strip {
        flex-direction: column;
        margin: 0 -16px;
        padding: 20px 16px;
        gap: 16px;
    }
}

/* Sidebar business profile card + completion progress (dashboard page only) */
.mb-sidebar-profile-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 18px;
    margin-bottom: 16px;
}

.mb-sidebar-profile-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.mb-sidebar-profile-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(11, 135, 125, .1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.mb-sidebar-profile-title {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 2px;
}

.mb-sidebar-profile-subtitle {
    font-size: 12px;
    color: var(--p-color);
    line-height: 1.4;
}

.mb-sidebar-profile-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: 6px;
}

.mb-sidebar-profile-progress-track {
    height: 6px;
    border-radius: 999px;
    background: #eef1f0;
    overflow: hidden;
}

.mb-sidebar-profile-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), #08756d);
}

/* "Complete these steps" section title + icon badge overlay */
.mb-steps-title {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    text-align: left;
    margin: 28px 0 14px;
}

.apply-review-item-icon-wrap {
    position: relative;
    flex: 0 0 auto;
}

.apply-review-item-icon-wrap .apply-review-item-status {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    border: 2px solid var(--white-color);
}

/* Submit-for-review footer bar */
.mb-review-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #eafbf6, #f3fdfb);
    border: 1px solid rgba(11, 135, 125, .16);
    border-radius: var(--border-radius-medium);
    text-align: left;
}

.mb-review-footer-copy {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mb-review-footer-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mb-review-footer-copy strong {
    display: block;
    font-size: 14px;
    color: var(--dark-color);
}

.mb-review-footer-copy span {
    font-size: 12px;
    color: var(--p-color);
}

.mb-review-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #08756d 100%);
    color: var(--white-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.mb-review-submit-btn:hover:not(:disabled) {
    color: var(--white-color);
    background: linear-gradient(135deg, #08756d 0%, var(--primary-color) 100%);
}

.mb-review-submit-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Right column: Listing Tips + Need Help cards (NEW status only) */
.mb-side-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 18px;
}

.mb-side-card + .mb-side-card {
    margin-top: 16px;
}

.mb-side-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 14px;
}

.mb-side-card-title-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.mb-side-card-title-icon.is-tips { background: #fff6e0; color: #b8860b; }
.mb-side-card-title-icon.is-help { background: #e8f1ff; color: #2563eb; }

.mb-tip-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mb-tip-item + .mb-tip-item {
    margin-top: 14px;
}

.mb-tip-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.mb-tip-item strong {
    display: block;
    font-size: 13px;
    color: var(--dark-color);
    margin-bottom: 2px;
}

.mb-tip-item span {
    font-size: 12px;
    color: var(--p-color);
    line-height: 1.4;
}

.mb-help-card-desc {
    font-size: 13px;
    color: var(--p-color);
    line-height: 1.5;
    margin: 0 0 14px;
}

/* Generic "empty list" panel — used by Jobs/Sales/Gallery/Ads style pages
   with no items yet. Reuses .mb-pending-info-item/-icon for the benefits row. */
.mb-empty-panel {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 40px 24px;
    text-align: center;
}

.mb-empty-illustration {
    position: relative;
    width: 150px;
    height: 130px;
    margin: 0 auto 22px;
}

.mb-empty-illustration::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 2px;
    width: 26px;
    height: 26px;
    border: 1.5px dashed rgba(11, 135, 125, .3);
    border-radius: 50%;
}

.mb-empty-illu-doc {
    position: absolute;
    top: 4px;
    right: 14px;
    width: 76px;
    height: 92px;
    background: #eef8f5;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(11, 135, 125, .1);
}

.mb-empty-illu-doc::before,
.mb-empty-illu-doc::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    height: 7px;
    background: #cfe9e2;
    border-radius: 4px;
}

.mb-empty-illu-doc::before {
    top: 16px;
}

.mb-empty-illu-doc::after {
    top: 30px;
    right: 34px;
}

.mb-empty-illu-briefcase {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 72px;
    color: var(--primary-color);
}

.mb-empty-illu-plane {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 20px;
    color: rgba(11, 135, 125, .45);
}

.mb-empty-panel-title {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 6px;
}

.mb-empty-panel-subtitle {
    color: var(--p-color);
    max-width: 460px;
    margin: 0 auto 20px;
}

.mb-empty-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: var(--white-color);
    border: none;
    height: 52px;
    padding: 0 26px;
    border-radius: var(--border-radius-small);
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    text-decoration: none;
}

.mb-empty-panel-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.mb-empty-panel-secondary {
    display: block;
    margin-top: 12px;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
}

.mb-empty-panel-secondary i {
    margin-right: 4px;
}

.mb-empty-panel-strip {
    margin-top: 32px;
    background: #f5f9f8;
    border-radius: var(--border-radius-medium);
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

@media (max-width: 767.98px) {
    .mb-empty-panel-strip {
        flex-direction: column;
    }
}

/* Services/Products empty-state illustration — an open box with floating
   category chips, sharing the .mb-empty-illustration container from the
   Jobs empty state above. */
.mb-empty-illustration-services {
    height: 150px;
}

.mb-empty-illu-box {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 68px;
    color: var(--primary-color);
}

.mb-empty-illu-chip {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef8f5;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 8px 16px rgba(11, 135, 125, .1);
}

.mb-empty-illu-chip-1 {
    top: 34px;
    left: 4px;
    transform: rotate(-8deg);
}

.mb-empty-illu-chip-2 {
    top: 0;
    left: 50%;
    margin-left: -20px;
}

.mb-empty-illu-chip-3 {
    top: 34px;
    right: 4px;
    transform: rotate(8deg);
}

/* Ads empty-state illustration — a phone mockup with an "AD" chip plus a
   megaphone/paper-plane, reusing the .mb-empty-illustration container and
   the .mb-empty-illu-plane placement from the Jobs empty state above. */
.mb-empty-illustration-ads {
    width: 170px;
    height: 150px;
}

.mb-empty-illu-phone {
    position: absolute;
    top: 0;
    left: 44px;
    width: 78px;
    height: 138px;
    background: var(--white-color);
    border: 3px solid #d7ece7;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(11, 135, 125, .12);
}

.mb-empty-illu-phone-adchip {
    position: absolute;
    top: 14px;
    left: 8px;
    right: 8px;
    height: 26px;
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .05em;
}

.mb-empty-illu-phone-line {
    position: absolute;
    left: 8px;
    height: 6px;
    width: 70%;
    background: #e4f2ef;
    border-radius: 3px;
}

.mb-empty-illu-phone-square {
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: 26px;
    height: 26px;
    background: #e4f2ef;
    border-radius: 6px;
}

.mb-empty-illu-megaphone {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 54px;
    color: var(--primary-color);
    transform: rotate(-10deg);
}

/* Blog empty-state illustration — a browser/article card with an image
   placeholder and text lines, plus a pencil and a comment bubble overlapping
   its corners. Shares the .mb-empty-illustration container. */
.mb-empty-illustration-blog {
    width: 210px;
    height: 170px;
}

.mb-empty-illu-browser {
    position: absolute;
    top: 0;
    left: 40px;
    width: 150px;
    height: 150px;
    background: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(11, 135, 125, .12);
    padding: 12px;
}

.mb-empty-illu-browser-dots {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.mb-empty-illu-browser-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d7ece7;
    display: inline-block;
}

.mb-empty-illu-browser-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mb-empty-illu-browser-image {
    flex-shrink: 0;
    width: 44px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef8f5;
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 16px;
}

.mb-empty-illu-browser-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.mb-empty-illu-browser-line {
    height: 6px;
    background: #e4f2ef;
    border-radius: 3px;
}

.mb-empty-illu-browser-line.short {
    width: 60%;
}

.mb-empty-illu-browser-line.full {
    width: 100%;
    margin-bottom: 8px;
}

.mb-empty-illu-pencil {
    position: absolute;
    bottom: 2px;
    right: 0;
    font-size: 42px;
    color: var(--primary-color);
    transform: rotate(45deg);
}

.mb-empty-illu-bubble {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 8px 16px rgba(11, 135, 125, .2);
}

/* Reviews empty-state illustration — a review card with a star row and a
   speech-bubble tail, sharing the .mb-empty-illustration container. */
.mb-empty-illustration-reviews {
    width: 220px;
    height: 150px;
}

.mb-empty-illu-review-card {
    position: absolute;
    top: 6px;
    left: 45px;
    width: 130px;
    background: var(--white-color);
    border: 2px solid #cdeee7;
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow: 0 14px 30px rgba(11, 135, 125, .12);
}

.mb-empty-illu-review-card::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 24px;
    width: 18px;
    height: 18px;
    background: var(--white-color);
    border-right: 2px solid #cdeee7;
    border-bottom: 2px solid #cdeee7;
    border-radius: 0 0 4px;
    transform: rotate(45deg);
}

.mb-empty-illu-review-stars {
    display: flex;
    gap: 4px;
    color: var(--primary-color);
    font-size: 15px;
    margin-bottom: 10px;
}

.mb-empty-illu-review-line {
    display: block;
    height: 6px;
    width: 70%;
    background: #e4f2ef;
    border-radius: 3px;
}

/* Followers empty-state illustration — a circular person icon with a "+"
   badge, flanked by leaves and a paper plane, sharing the
   .mb-empty-illustration container from the Jobs empty state above. */
.mb-empty-illustration-followers {
    width: 150px;
    height: 150px;
}

.mb-empty-illu-follow-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
}

.mb-empty-illu-follow-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 3px solid var(--white-color);
}

.mb-empty-illu-leaf {
    position: absolute;
    color: #7ecfc7;
    font-size: 22px;
}

.mb-empty-illu-leaf-1 {
    left: -6px;
    bottom: 10px;
}

.mb-empty-illu-leaf-2 {
    right: -6px;
    bottom: 10px;
    font-size: 18px;
}

/* Reviews toolbar — rating filter + search */
.mb-reviews-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.mb-reviews-select {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    color: var(--dark-color);
    min-width: 160px;
}

.mb-reviews-toolbar-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mb-reviews-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--white-color);
    min-width: 240px;
    color: var(--p-color);
}

.mb-reviews-search input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: var(--dark-color);
    background: transparent;
}

.mb-reviews-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--white-color);
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
}

.mb-reviews-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* "Why advertise" / "Recent Campaigns" info cards on the Ads page */
.mb-info-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 22px;
}

.mb-info-card-title {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 16px;
}

.mb-info-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.mb-info-card-grid .mb-pending-info-item {
    flex: 1 1 160px;
}

.mb-ad-mini-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.mb-ad-mini-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mb-ad-mini-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.mb-ad-mini-body {
    min-width: 0;
    flex-grow: 1;
}

.mb-ad-mini-title {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-ad-mini-meta {
    font-size: 11px;
    color: var(--p-color);
}

/* Denser variant of .enquiry-card for the dashboard's recent-activity list,
   where several other cards compete for the same row. */
.enquiry-card-compact {
    padding: 12px;
    gap: 10px;
}

.enquiry-card-compact .enquiry-card-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.pending-banner {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: var(--border-radius-medium);
    padding: 24px;
}

.auth-card {
    max-width: 480px;
    margin: 60px auto;
    background: var(--white-color);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .06);
    padding: 40px;
}

/* Auth pages — split layout matching the MetroMize login mockup. */
.login-section {
    padding: 48px 0 64px;
    min-height: calc(100vh - 250px);
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 12% 18%, rgba(11, 135, 125, 0.1) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(253, 99, 1, 0.08) 0%, transparent 42%),
        linear-gradient(180deg, #f7fbfb 0%, #f3f8f8 100%);
}

.login-section > .container {
    width: 100%;
}

.login-split {
    display: flex;
    max-width: 1080px;
    margin: 0 auto;
    background: var(--white-color);
    border-radius: 24px;
    border: 1px solid rgba(11, 135, 125, 0.08);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.auth-split-visual {
    flex: 0 0 46%;
    position: relative;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.85) 0%, transparent 42%),
        radial-gradient(circle at 82% 72%, rgba(253, 99, 1, 0.18) 0%, transparent 36%),
        linear-gradient(160deg, #e8f7f5 0%, #f4fbfb 48%, #eef8f7 100%);
    padding: 42px 38px 28px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}

.auth-split-visual::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 86px;
    width: min(210px, 44%);
    height: 170px;
    background-image: var(--auth-split-bg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.auth-split-visual > * {
    position: relative;
    z-index: 1;
}

.auth-split-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: #0a5850;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(11, 135, 125, 0.12);
    border-radius: 999px;
    padding: 7px 14px;
    margin-bottom: 22px;
    width: fit-content;
}

.auth-split-badge i {
    color: var(--primary-color);
}

.auth-split-visual h2 {
    color: #102a43;
    font-size: 34px;
    line-height: 1.18;
    font-weight: var(--font-weight-bold);
    margin-bottom: 12px;
    max-width: none;
}

.auth-split-lead {
    color: #5f6b7a;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: none;
}

.auth-split-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 14px;
    max-width: 250px;
}

.auth-split-features li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-split-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    flex: 0 0 auto;
    font-size: 15px;
}

.auth-split-features strong {
    display: block;
    color: #102a43;
    font-size: 14px;
    line-height: 1.3;
}

.auth-split-features small {
    display: block;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.35;
}

.auth-split-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(11, 135, 125, 0.1);
    margin-top: auto;
}

.auth-split-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 11px;
    line-height: 1.35;
}

.auth-split-trust-item i {
    color: var(--primary-color);
    font-size: 14px;
}

.login-split-form,
.auth-split-form {
    flex: 1;
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form-head {
    margin-bottom: 28px;
}

.auth-form-head h2 {
    color: #102a43;
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 8px;
}

.auth-form-head p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.auth-form-head p strong,
.auth-form-head .auth-brand-name {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

.auth-field {
    margin-bottom: 18px;
}

.auth-field-label {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: #374151;
    margin-bottom: 8px;
}

.auth-phone-field,
.auth-password-field,
.auth-input-field {
    display: flex;
    align-items: center;
    min-height: 52px;
    border: 1px solid #d8dee6;
    border-radius: 14px;
    background: #f8fafb;
    overflow: hidden;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.auth-phone-field:focus-within,
.auth-password-field:focus-within,
.auth-input-field:focus-within {
    border-color: var(--primary-color);
    background: var(--white-color);
    box-shadow: 0 0 0 3px rgba(11, 135, 125, 0.08);
}

/* form-validation.js toggles `is-invalid` on the wrapper (the visible
   bordered box) rather than the borderless <input> inside it. */
.auth-phone-field.is-invalid,
.auth-password-field.is-invalid,
.auth-input-field.is-invalid {
    border-color: #dc3545;
}

.auth-phone-field.is-invalid:focus-within,
.auth-password-field.is-invalid:focus-within,
.auth-input-field.is-invalid:focus-within {
    border-color: #dc3545;
    background: var(--white-color);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

.auth-phone-prefix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-right: 1px solid #d8dee6;
    color: #374151;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.72);
}

.auth-phone-prefix-flag {
    font-size: 16px;
    line-height: 1;
}

.auth-phone-field input,
.auth-password-field input,
.auth-input-field input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 50px;
    border: 0;
    background: transparent;
    padding: 0 16px;
    font-size: 14px;
    color: #102a43;
}

.auth-phone-field input:focus,
.auth-password-field input:focus,
.auth-input-field input:focus {
    outline: none;
}

.auth-password-field .auth-field-icon,
.auth-input-field .auth-field-icon {
    padding-left: 16px;
    color: var(--p-color);
    font-size: 16px;
}

.auth-toggle-password {
    border: 0;
    background: transparent;
    color: var(--p-color);
    width: 46px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.auth-toggle-password:hover {
    color: var(--primary-color);
}

.auth-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.auth-form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-input-field select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 50px;
    border: 0;
    background: transparent;
    padding: 0 16px;
    font-size: 14px;
    color: #102a43;
}

.auth-input-field select:focus {
    outline: none;
}

.auth-input-field-textarea {
    align-items: flex-start;
}

.auth-input-field-textarea .auth-field-icon {
    padding-top: 14px;
}

.auth-input-field-textarea textarea {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 14px 16px 12px;
    font-size: 14px;
    color: #102a43;
    resize: vertical;
    min-height: 84px;
}

.auth-input-field-textarea textarea:focus {
    outline: none;
}

.otp-single-input {
    display: block;
    width: 100%;
    height: 64px;
    border: 1.5px solid var(--primary-color);
    border-radius: 14px;
    background: #f8fafb;
    text-align: center;
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 16px;
    color: #102a43;
    box-shadow: 0 0 0 3px rgba(11, 135, 125, 0.08);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.otp-single-input::placeholder {
    letter-spacing: 16px;
    color: #b7c1cc;
}

.otp-single-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--white-color);
    box-shadow: 0 0 0 3px rgba(11, 135, 125, 0.14);
}

.otp-single-input.is-invalid {
    border-color: #dc3545;
}

.otp-single-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

.auth-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 18px;
}

.auth-form-link {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-decoration: none;
}

.auth-form-link:hover {
    color: var(--secondary-color);
}

.auth-submit-btn,
.login-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #08756d 100%);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    padding: 0 20px;
    box-shadow: 0 12px 24px rgba(11, 135, 125, 0.22);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.auth-submit-btn:hover,
.login-submit-btn:hover {
    background: linear-gradient(135deg, #08756d 0%, var(--primary-color) 100%);
    color: var(--white-color);
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(11, 135, 125, 0.26);
}

.auth-secondary-btn,
.login-secondary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    min-height: 52px;
    border: 1px solid rgba(11, 135, 125, 0.18);
    border-radius: 14px;
    background: var(--white-color);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.auth-secondary-btn:hover,
.login-secondary-btn:hover {
    background: rgba(11, 135, 125, 0.06);
    color: #08756d;
    border-color: rgba(11, 135, 125, 0.28);
}

.auth-social-divider,
.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0 18px;
    color: var(--p-color);
    font-size: 13px;
}

.auth-social-divider::before,
.auth-social-divider::after,
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.auth-social-divider span,
.login-divider span {
    padding: 0 12px;
    white-space: nowrap;
}

.auth-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.auth-social-btn {
    min-height: 52px;
    border: 1px solid #d8dee6;
    border-radius: 14px;
    background: var(--white-color);
    color: #374151;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, background .2s ease;
}

.auth-social-btn:not(:disabled):hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.auth-social-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.auth-form-switch {
    margin: 22px 0 10px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.auth-form-switch a {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.auth-form-switch a:hover {
    color: var(--secondary-color);
}

.auth-form-terms {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    text-align: center;
    color: var(--p-color);
    font-size: 12px;
    line-height: 1.5;
}

.auth-form-terms i {
    color: var(--primary-color);
    font-size: 14px;
    margin-top: 1px;
}

.auth-form-terms a {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.auth-form-terms a:hover {
    color: var(--secondary-color);
}

/* Legacy aliases kept for business auth screens still using old class names. */
.login-split-visual {
    flex: 0 0 46%;
}

.login-split-badge,
.login-split-image,
.login-split-visual h2,
.login-split-visual p {
    display: none;
}

.login-input-group {
    position: relative;
    margin-bottom: 18px;
}

.login-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p-color);
    font-size: 16px;
}

.login-input {
    width: 100%;
    height: 50px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--section-bg-color);
    padding: 0 16px 0 44px;
    font-size: 14px;
    color: var(--dark-color);
}

.login-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--white-color);
}

.login-link {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
}

.login-split-form h2 {
    color: var(--dark-color);
}

/* Business registration — wide multi-section form card, reuses the .login-*
   buttons/divider but with plain Bootstrap form-control/select fields since
   this form mixes text, select and textarea inputs. */
.business-form-card {
    max-width: 880px;
    margin: 0 auto;
    background: var(--white-color);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.business-form-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 36px 40px;
    color: var(--white-color);
}

.business-form-hero h2 {
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 26px;
    letter-spacing: normal;
    margin: 14px 0 6px;
}

.business-form-hero p {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 0;
}

.business-form-body {
    padding: 40px;
}

.business-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

/* .business-form-section-title:not(:first-child) {
    margin-top: 32px;
} */

.business-form-section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-size: 14px;
}

.business-form .form-label {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 6px;
}

.business-form .form-control,
.business-form .form-select {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background-color: var(--section-bg-color);
    padding: 10px 14px;
    font-size: 14px;
}

.business-form .form-control:focus,
.business-form .form-select:focus {
    border-color: var(--primary-color);
    background-color: var(--white-color);
    box-shadow: none;
}

.business-form .form-control.is-invalid,
.business-form .form-select.is-invalid {
    border-color: #dc3545;
}

.business-form .form-control.is-invalid:focus,
.business-form .form-select.is-invalid:focus {
    border-color: #dc3545;
    background-color: var(--white-color);
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .18);
}

.login-split-business {
    max-width: 1180px;
}

@media (max-width: 991.98px) {
    .login-split {
        max-width: 760px;
    }

    .auth-split-visual {
        flex: none;
        padding: 34px 28px 24px;
    }

    .auth-split-visual h2 {
        font-size: 28px;
        max-width: none;
    }

    .auth-split-visual::after {
        width: min(180px, 42%);
        height: 140px;
        bottom: 82px;
    }

    .login-split-form,
    .auth-split-form {
        padding: 36px 32px;
    }
}

@media (max-width: 767px) {
    .business-form-hero,
    .business-form-body {
        padding: 28px 24px;
    }

    .login-section {
        padding: 28px 0 40px;
    }

    .login-split {
        flex-direction: column;
    }

    .auth-split-visual {
        display: none;
    }

    .login-split-form,
    .auth-split-form {
        padding: 28px 24px 32px;
    }

    .auth-form-head h2 {
        font-size: 26px;
    }

    .auth-form-row,
    .auth-form-row-3 {
        grid-template-columns: 1fr;
    }
}

.auth-card h2 {
    color: var(--dark-color);
}

/* "Join Metromize" registration chooser page */
.join-page {
    position: relative;
    padding: 48px 0 56px;
    background: var(--section-bg-color);
    overflow: hidden;
}

.join-page-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.join-bg-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(11, 135, 125, .12);
    background: rgba(253, 99, 1, .04);
}

.join-bg-circle-1 {
    width: 220px;
    height: 220px;
    top: -60px;
    left: -70px;
}

.join-bg-circle-2 {
    width: 180px;
    height: 180px;
    bottom: 80px;
    right: -50px;
}

.join-bg-dots {
    position: absolute;
    width: 90px;
    height: 90px;
    opacity: .35;
    background-image: radial-gradient(rgba(11, 135, 125, .45) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}

.join-bg-dots-1 {
    top: 120px;
    right: 8%;
}

.join-bg-dots-2 {
    bottom: 140px;
    left: 6%;
}

.join-header {
    position: relative;
    z-index: 1;
    margin-bottom: 36px;
}

.join-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}

.join-sparkle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(253, 99, 1, .12);
    color: var(--primary-color);
    font-size: 16px;
}

.join-title {
    font-size: 38px;
    font-weight: var(--font-weight-bold);
    /* color: var(--primary-color); */
    margin: 0;
    line-height: 1.2;
}
.join-title span {
    color: var(--primary-color);
}

.join-subtitle {
    font-size: 16px;
    color: var(--p-color);
    margin: 0;
}

.join-cards-row {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.join-choice-card {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 32px 28px 28px;
    text-align: center;
    height: 100%;
    background: var(--white-color);
    box-shadow: 0 12px 32px rgba(11, 135, 125, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.join-choice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11, 135, 125, .14);
}

.join-choice-card-business {
    border-color: rgba(11, 135, 125, .18);
}

.join-choice-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 5px 12px;
    border-radius: var(--border-radius-large);
}

.join-choice-art {
    position: relative;
    height: 150px;
    margin: 0 auto 22px;
    max-width: 240px;
}

.join-art-float {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(253, 99, 1, .12);
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(11, 135, 125, .1);
}

.join-art-float-heart {
    width: 34px;
    height: 34px;
    font-size: 14px;
    top: 18px;
    left: 8px;
}

.join-art-float-chat {
    width: 34px;
    height: 34px;
    font-size: 14px;
    top: 12px;
    right: 10px;
}

.join-art-float-user {
    width: 32px;
    height: 32px;
    font-size: 14px;
    top: 16px;
    left: 6px;
}

.join-art-float-megaphone {
    width: 32px;
    height: 32px;
    font-size: 13px;
    top: 10px;
    right: 8px;
}

.join-art-float-chart {
    width: 32px;
    height: 32px;
    font-size: 13px;
    bottom: 24px;
    right: 18px;
}

.join-art-person {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 110px;
    height: 118px;
}

.join-art-person-head {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f4c9a8;
    border: 2px solid #e8b995;
}

.join-art-person-head::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 28px;
    border-radius: 24px 24px 0 0;
    background: #2d2d2d;
}

.join-art-person-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 58px;
    border-radius: 36px 36px 12px 12px;
    background: linear-gradient(180deg, var(--primary-color) 0%, #087a72 100%);
}

.join-art-person-phone {
    position: absolute;
    bottom: 18px;
    right: -4px;
    width: 28px;
    height: 44px;
    border-radius: 6px;
    border: 2px solid #d8dee6;
    background: var(--white-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}

.join-art-person-phone::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 24px;
    border-radius: 3px;
    background: rgba(253, 99, 1, .25);
}

.join-art-store {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 108px;
    height: 92px;
}

.join-art-store-roof {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 56px solid transparent;
    border-right: 56px solid transparent;
    border-bottom: 26px solid var(--primary-color);
}

.join-art-store-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 62px;
    border-radius: 6px 6px 8px 8px;
    background: linear-gradient(180deg, #fff 0%, #e8f7f5 100%);
    border: 2px solid rgba(11, 135, 125, .2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 4px;
}

.join-art-store-sign {
    font-size: 8px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .04em;
    color: var(--primary-color);
    background: rgba(253, 99, 1, .15);
    padding: 2px 6px;
    border-radius: 3px;
}

.join-art-store-window {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    background: rgba(11, 135, 125, .2);
}

.join-choice-card h2 {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 8px;
}

.join-choice-lead {
    font-size: 14px;
    color: var(--p-color);
    margin-bottom: 0;
}

.join-choice-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 24px;
    text-align: left;
}

.join-choice-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--dark-color);
    margin-bottom: 10px;
}

.join-choice-list li:last-child {
    margin-bottom: 0;
}

.join-choice-list li i {
    color: var(--primary-color);
    margin-top: 2px;
    font-size: 15px;
}

.join-choice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--border-radius-large);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(11, 135, 125, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.join-choice-btn:hover {
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(11, 135, 125, .3);
}

.join-trust-strip {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 24px rgba(11, 135, 125, .08);
    padding: 8px 0;
    margin-bottom: 32px;
}

.join-trust-item {
    flex: 1 1 0;
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-left: 1px solid var(--border-color);
}

.join-trust-item:first-child {
    border-left: none;
}

.join-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(253, 99, 1, .12);
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
}

.join-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.join-trust-text strong {
    font-size: 14px;
    color: var(--dark-color);
}

.join-trust-text span {
    font-size: 12px;
    color: var(--p-color);
    line-height: 1.4;
}

.join-login-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.join-login-footer p {
    color: var(--p-color);
    font-size: 15px;
    margin: 0;
}

.join-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 28px;
    border-radius: var(--border-radius-large);
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
    background: var(--white-color);
    transition: background-color .2s ease, color .2s ease;
}

.join-login-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

@media (max-width: 991.98px) {
    .join-title {
        font-size: 30px;
    }

    .join-trust-item {
        flex: 1 1 50%;
        min-width: 0;
    }

    .join-trust-item:nth-child(odd) {
        border-left: none;
    }

    .join-trust-item:nth-child(n+3) {
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 767.98px) {
    .join-page {
        padding: 32px 0 40px;
    }

    .join-title-wrap {
        gap: 10px;
    }

    .join-sparkle {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .join-title {
        font-size: 26px;
    }

    .join-subtitle {
        font-size: 14px;
    }

    .join-choice-card {
        padding: 28px 20px 24px;
    }
}

@media (max-width: 575.98px) {
    .join-trust-item {
        flex: 1 1 100%;
        border-left: none !important;
        border-top: 1px solid var(--border-color);
    }

    .join-trust-item:first-child {
        border-top: none;
    }
}

/* Multi-column dark footer — overrides templatemo's original centered,
   single-row footer (text-align:center, inline-pill .footer-menu-link). */
.site-footer {
    background: var(--primary-color);
    text-align: left;
    border-top: none;
    padding-top: 60px;
    padding-bottom: 30px;
}

/* The logo has teal elements that vanish against the teal footer background
   (transparent PNG), so it sits on its own white badge for contrast. */
.footer-logo-badge {
    display: inline-flex;
    align-items: center;
    background: var(--white-color);
    border-radius: var(--border-radius-medium);
    padding: 10px 16px;
}

.site-footer .brand-name {
    color: var(--white-color);
}

.site-footer .footer-about {
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    line-height: 1.7;
    max-width: 360px;
}

.site-footer .site-footer-title {
    color: var(--white-color);
    font-size: 14px;
    letter-spacing: normal;
}

.site-footer .footer-menu-item {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
}

.site-footer .footer-menu-link {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    color: rgba(255, 255, 255, .6);
    font-weight: var(--font-weight-normal);
}

.site-footer .footer-menu-link:hover {
    background: none;
    color: var(--secondary-color);
}

.footer-divider {
    border-color: rgba(255, 255, 255, .15);
    margin: 10px 0 20px;
}

.site-footer .copyright-text-wrap .copyright-text {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
    color: rgba(255, 255, 255, .5);
}

.site-footer .copyright-text-wrap a {
    color: var(--white-color);
}

.footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom-row .copyright-text {
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.footer-bottom-row .copyright-text a {
    color: var(--white-color);
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    text-decoration: none;
}

.footer-bottom-links a:hover {
    color: var(--secondary-color);
}

@media (max-width: 575.98px) {
    .footer-bottom-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Contact page */
.contact-page {
    padding: 40px 0 56px;
    background: var(--white-color);
}

.contact-hero {
    margin-bottom: 36px;
}

.contact-hero-title {
    font-size: 42px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    line-height: 1.2;
    margin-bottom: 14px;
}
.contact-hero-title span {
    color: var(--primary-color);
}

.contact-hero-subtitle {
    font-size: 16px;
    line-height: 1.65;
    color: var(--p-color);
    margin: 0;
    max-width: 520px;
}

.contact-hero-art {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.contact-hero-art img {
    width: 100%;
    max-width: 420px;
    height: auto;
}

.contact-cards-row {
    margin-bottom: 28px;
}

.contact-channel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 14px;
    min-height: 210px;
    height: 100%; */
    padding: 24px 22px 24px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 28px rgba(11, 135, 125, .08);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.contact-channel-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 135, 125, .22);
    box-shadow: 0 16px 36px rgba(11, 135, 125, .14);
}

.contact-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    color: var(--white-color);
}

.contact-channel-icon-phone {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.contact-channel-icon-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.contact-channel-icon-email {
    background: linear-gradient(135deg, #3b82c6 0%, #2563eb 100%);
}

.contact-channel-body h2 {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 6px;
}

.contact-channel-body p {
    font-size: 13.5px;
    color: var(--p-color);
    margin-bottom: 10px;
    line-height: 1.5;
}

.contact-channel-body strong {
    display: block;
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    word-break: break-word;
}

.contact-channel-arrow {
    position: absolute;
    right: 18px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(253, 99, 1, .12);
    color: var(--primary-color);
    font-size: 16px;
    transition: background-color .2s ease, color .2s ease;
}

.contact-channel-card:hover .contact-channel-arrow {
    background: var(--primary-color);
    color: var(--white-color);
}

.contact-business-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    background: var(--section-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 5px 32px;
}

.contact-business-art {
    flex: 0 0 auto;
}

.contact-business-shop {
    position: relative;
    display: block;
    width: 92px;
    height: 78px;
}

.contact-business-shop-roof {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 48px solid transparent;
    border-right: 48px solid transparent;
    border-bottom: 22px solid var(--primary-color);
}

.contact-business-shop-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 52px;
    border-radius: 6px 6px 8px 8px;
    background: linear-gradient(180deg, #fff 0%, #e8f7f5 100%);
    border: 2px solid rgba(11, 135, 125, .2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 4px;
}

.contact-business-shop-sign {
    font-size: 8px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .04em;
    color: var(--primary-color);
    background: rgba(253, 99, 1, .15);
    padding: 2px 6px;
    border-radius: 3px;
}

.contact-business-shop-window {
    width: 22px;
    height: 14px;
    border-radius: 2px;
    background: rgba(11, 135, 125, .2);
}

.contact-business-copy {
    flex: 1 1 240px;
    min-width: 0;
}

.contact-business-copy h3 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 8px;
}

.contact-business-copy h3 span {
    color: var(--primary-color);
}

.contact-business-copy p {
    font-size: 14px;
    color: var(--p-color);
    margin: 0;
    line-height: 1.55;
    max-width: 520px;
}

.contact-business-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.contact-business-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--border-radius-large);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(11, 135, 125, .22);
    transition: transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.contact-business-btn:hover {
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(11, 135, 125, .3);
}

.contact-business-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--p-color);
}

.contact-business-note i {
    color: #22c55e;
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .contact-hero-title {
        font-size: 34px;
    }

    .contact-business-banner {
        padding: 24px 20px;
    }

    .contact-business-actions {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .contact-page {
        padding: 28px 0 40px;
    }

    .contact-hero-title {
        font-size: 28px;
    }

    .contact-hero-subtitle {
        font-size: 14px;
    }

    .contact-hero-art {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* Legacy contact-card — kept for any older references */
.contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: 100%;
    padding: 22px 20px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    border-color: var(--primary-color);
}

.contact-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-size: 20px;
    margin-bottom: 4px;
}

.contact-card-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--p-color);
}

.contact-card-value {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

/* Privacy Policy / Terms & Conditions — long-form legal copy */
.legal-content h5 {
    margin-top: 22px;
    margin-bottom: 10px;
    font-size: 16px;
}

.legal-content h5:first-child {
    margin-top: 0;
}

.legal-content p {
    color: var(--p-color);
    line-height: 1.7;
    font-size: 16px;
}

.legal-content ul {
    margin-bottom: 16px;
    padding-left: 20px;
}

.legal-content li {
    color: var(--p-color);
    line-height: 1.7;
    margin-bottom: 6px;
    font-size: 15px;
}

/* Smaller page title/subtitle for the legal pages specifically (long-form
   copy reads better at a smaller scale) — scoped to .legal-page so it
   doesn't affect .site-section-title/.site-section-subtitle everywhere
   else they're used (home, search, blood donation, business pages...). */
.legal-page .site-section-title {
    font-size: 22px;
}

.legal-page .site-section-subtitle {
    font-size: 13px;
}

/* Hero trust/stats strip */
.stats-strip {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.stats-strip .stat-item {
    text-align: center;
}

.stats-strip .stat-item .stat-value {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
    display: block;
}

.stats-strip .stat-item .stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
}

/* Category card business-count caption */
.category-card .category-count {
    font-size: 12px;
    color: var(--p-color);
    display: block;
    margin-top: 2px;
}

/* Promo banner cards */
.promo-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-medium);
    padding: 36px;
    color: var(--white-color);
    height: 100%;
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 16px;
    align-content: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.promo-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,.18);
}

.promo-banner::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.promo-banner h3,
.promo-banner p {
    color: var(--white-color) !important;
}

.promo-banner h3 {
    grid-column: 2;
    font-size: 20px;
    margin-bottom: 4px !important;
}

.promo-banner p {
    grid-column: 2;
    font-size: 14px;
}

.promo-banner .promo-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    position: relative;
    z-index: 1;
}

.promo-banner.promo-1 {
    background: linear-gradient(135deg, var(--primary-color) 0%, #075E56 100%);
}

.promo-banner.promo-2 {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #027A72 100%);
}

.promo-banner .promo-link {
    grid-column: 1 / 3;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
    font-size: 14px;
    transition: background .2s ease, gap .2s ease;
    position: relative;
    z-index: 1;
}

.promo-banner:hover .promo-link {
    background: rgba(255,255,255,.28);
    gap: 10px;
}

/* These stack full-width on mobile, and the desktop sizing (36px padding,
   52px icon, 20px heading) makes each card ~280px tall — two of them alone
   push everything else below the fold. Shrink proportionally instead. */
@media (max-width: 767.98px) {
    .promo-banner {
        padding: 20px;
        grid-template-columns: 40px 1fr;
        column-gap: 12px;
    }

    .promo-banner .promo-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .promo-banner h3 {
        font-size: 16px;
    }

    .promo-banner p {
        font-size: 13px;
        line-height: 1.4;
    }

    .promo-banner .promo-link {
        margin-top: 12px;
        padding: 6px 14px;
        font-size: 13px;
    }

    .promo-banner::after {
        width: 100px;
        height: 100px;
        top: -20px;
        right: -20px;
    }
}

/* Business gallery showcase */
.gallery-thumb {
    position: relative;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    display: block;
    height: 180px;
    cursor: pointer;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.gallery-thumb:hover img {
    transform: scale(1.06);
}

.gallery-thumb .gallery-thumb-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
    color: var(--white-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
}

/* "Authorized Partners" showcase (home page) — a distinct, badge-driven
   treatment so it reads as a trust/credibility panel rather than another
   plain photo grid like the standalone gallery page. */
.partners-section {
    padding: 50px 0;
}

.partners-header {
    max-width: 720px;
    margin: 0 auto 32px;
}

.partners-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 7px 16px;
    border-radius: var(--border-radius-large);
    margin-bottom: 16px;
}

.partners-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.partners-laurel {
    width: 34px;
    height: 62px;
    color: var(--secondary-color);
    opacity: .55;
    flex-shrink: 0;
    display: none;
}

.partners-laurel-right {
    transform: scaleX(-1);
}

.partners-title {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--dark-color);
    margin: 0;
}

.partners-title span {
    color: var(--primary-color);
}

.partners-header .site-section-subtitle {
    margin: 10px 0 0;
}

.partners-trust-strip {
    display: flex;
    flex-wrap: wrap;
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 30px rgba(16, 72, 70, .08);
    padding: 10px 0;
    margin-bottom: 36px;
}

.partners-trust-item {
    flex: 1 1 0;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-left: 1px solid var(--border-color);
}

.partners-trust-item:first-child {
    border-left: none;
}

.partners-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
}

.partners-trust-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.partners-trust-text strong {
    font-size: 14.5px;
    color: var(--dark-color);
}

.partners-trust-text span {
    font-size: 12.5px;
    color: var(--p-color);
}

.partners-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.partners-swiper {
    flex: 1;
    overflow: hidden;
    padding-bottom: 40px;
}

.partners-nav-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--white-color);
    color: var(--primary-color);
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    transition: background .15s ease, color .15s ease;
}

.partners-nav-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.partners-swiper-pagination.swiper-pagination-bullets {
    bottom: 0;
}

.partners-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--border-color);
    opacity: 1;
}

.partners-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
    width: 22px;
    border-radius: 5px;
}

.partners-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    padding: 13px 30px;
    border-radius: var(--border-radius-large);
    text-decoration: none;
    transition: background .15s ease;
}

.partners-cta-btn:hover {
    background: var(--dark-color);
    color: var(--white-color);
}

.partners-stats-strip {
    display: flex;
    flex-wrap: wrap;
    background: var(--section-bg-color);
    border-radius: var(--border-radius-large);
    padding: 28px 10px;
    margin-top: 36px;
}

.partners-stat-item {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.partners-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white-color);
    color: var(--primary-color);
    font-size: 19px;
    margin-bottom: 6px;
}

.partners-stat-item strong {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.partners-stat-item span {
    font-size: 13px;
    color: var(--p-color);
}

.partner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
    border-color: var(--primary-color);
}

.partner-card-photo {
    position: relative;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
}

.partner-card-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.partner-card:hover .partner-card-photo-img {
    transform: scale(1.06);
}

.partner-card-trustmark {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 10px;
    line-height: 1.35;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 6px 10px;
    border-radius: var(--border-radius-small);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.partner-card-trustmark i {
    margin-right: 3px;
}

.partner-card-follow {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--p-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.partner-card-follow:hover,
.partner-card-follow .bi-person-check-fill {
    color: #e6483a;
}

.partner-card-photo-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
    pointer-events: none;
    z-index: 1;
}

.partner-card-avatar {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: var(--border-radius-small);
    object-fit: cover;
    background: var(--white-color);
    border: 2px solid var(--white-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.partner-card-category-badge {
    align-self: flex-start;
    display: inline-block;
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-size: 11.5px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: var(--border-radius-small);
}

.partner-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    flex: 1;
}

.partner-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.partner-card-name {
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.partner-card-rating {
    /* display: inline-flex;
    flex-direction: column;
    align-items: center; */
    gap: 5px;
    background: #FFF6E5;
    border: 1px solid #F5DFAE;
    color: #B8860B;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    padding: 1px 12px;
    border-radius: var(--border-radius-small);
    flex-shrink: 0;
    white-space: nowrap;
}

.partner-card-rating i {
    color: #f5a623;
    margin-right: 3px;
}
/* .partner-card-rating-value {
    display: inline-flex;
    align-items: center;
} */

.partner-card-rating small {
    font-weight: normal;
    font-size: 11px;
    color: var(--p-color);
}

.partner-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--p-color);
}

.partner-card-location i {
    color: var(--primary-color);
}

.partner-card-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.partner-card-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    color: var(--primary-color);
    font-size: 15px;
    flex-shrink: 0;
}

.partner-card-icon-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.partner-card-cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.partner-card-cta:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.partner-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
}

.partner-card-since {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--p-color);
}

.partner-card-since i {
    color: #1ea672;
}

.partner-card-why {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-color);
    cursor: help;
}

@media (min-width: 992px) {
    .partners-laurel {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .partners-section {
        padding: 36px 0;
    }

    .partners-title {
        font-size: 28px;
    }

    .partners-trust-strip {
        flex-wrap: wrap;
        gap: 2px;
        background: var(--border-color);
        box-shadow: 0 6px 20px rgba(16, 72, 70, .08);
        padding: 0;
        overflow: hidden;
    }

    .partners-trust-item {
        flex: 1 1 50%;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 18px 10px;
        background: var(--white-color);
        border-left: none;
    }

    .partners-trust-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .partners-trust-text {
        align-items: center;
    }

    .partners-trust-text strong {
        font-size: 13px;
    }

    .partners-trust-text span {
        font-size: 11.5px;
        line-height: 1.35;
    }

    .partners-nav-btn {
        display: none;
    }

    .partners-stat-item {
        flex: 1 1 50%;
    }
}

/* Feature icon strip */
.feature-strip {
    background: var(--section-bg-color);
    border-radius: var(--border-radius-medium);
    padding: 36px;
}

.feature-strip .feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feature-strip .feature-icon {
    font-size: 30px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.feature-strip .feature-text strong {
    display: block;
}

.feature-strip .feature-text span {
    font-size: 14px;
    color: var(--p-color);
}

/* FAQ accordion */
.faq-accordion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.faq-accordion .accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium) !important;
    align-self: start;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--section-bg-color);
    color: var(--primary-color);
    box-shadow: none;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: var(--border-color);
}

.faq-accordion .accordion-body {
    font-size: 14px;
    color: var(--p-color);
}

/* The saved HTML already carries its own <br> line breaks for blank lines
   (see MyHelpers::normalizeRichTextHtml), so the browser's default <p> margin
   would double up the spacing between paragraphs — reset it to 0. */
.faq-accordion .accordion-body p {
    margin: 0;
}

.faq-accordion .accordion-body ul,
.faq-accordion .accordion-body ol {
    margin: 0;
    padding-left: 20px;
}

@media (max-width: 767.98px) {
    .faq-accordion {
        grid-template-columns: 1fr;
    }

    .faq-accordion .accordion-button {
        font-size: 14px;
    }

    .faq-accordion .accordion-body {
        font-size: 13px;
    }
}

/* Dedicated /faq page */
.faq-page {
    padding: 40px 0 64px;
    background: var(--white-color);
}

.faq-hero {
    max-width: 720px;
    margin: 0 auto 40px;
}

.faq-hero-title {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    line-height: 1.2;
    margin: 14px 0;
}

.faq-hero-subtitle {
    font-size: 16px;
    line-height: 1.65;
    color: var(--p-color);
    margin: 0 0 28px;
}

.faq-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--section-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 8px 10px 8px 20px;
    max-width: 520px;
    margin: 0 auto;
}

.faq-search-form i.bi-search {
    color: var(--p-color);
    font-size: 16px;
}

.faq-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--dark-color);
    min-width: 0;
}

.faq-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--p-color);
    flex-shrink: 0;
}

.faq-search-clear:hover {
    background: var(--border-color);
}

.faq-search-submit {
    border: none;
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    padding: 10px 20px;
    border-radius: var(--border-radius-medium);
    flex-shrink: 0;
}

.faq-search-submit:hover {
    opacity: .92;
}

.faq-layout {
    max-width: 900px;
    margin: 0 auto;
}

.faq-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    border-bottom: none;
    padding-bottom: 14px;
    margin-bottom: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.faq-tabs::-webkit-scrollbar {
    display: none;
}

.faq-tabs .nav-link {
    white-space: nowrap;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    color: var(--dark-color);
    background: var(--white-color);
}

.faq-tabs .nav-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.faq-tab-count {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    opacity: .75;
}

.faq-empty {
    max-width: 520px;
    margin: 0 auto 40px;
    padding: 40px 20px;
}

.faq-empty i {
    font-size: 34px;
    color: var(--p-color);
    margin-bottom: 12px;
    display: inline-block;
}

.faq-empty p {
    color: var(--p-color);
    margin: 0;
}

.faq-support-banner {
    max-width: 900px;
    margin: 48px auto 0;
    background: var(--section-bg-color);
    border-radius: var(--border-radius-large);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.faq-support-copy h3 {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 4px;
}

.faq-support-copy p {
    color: var(--p-color);
    margin: 0;
}

.faq-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    padding: 12px 22px;
    border-radius: var(--border-radius-medium);
    flex-shrink: 0;
}

.faq-support-btn:hover {
    opacity: .92;
    color: var(--white-color);
}

@media (max-width: 767px) {
    .faq-hero-title {
        font-size: 30px;
    }

    .faq-search-form {
        flex-wrap: wrap;
        border-radius: var(--border-radius-medium);
    }

    .faq-search-submit {
        width: 100%;
        order: 3;
    }

    .faq-support-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* Business detail page — minimal page-local header (logo, search, account) */
.navbar-minimal {
    position: relative;
    background: var(--white-color);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
    padding-top: 14px;
    padding-bottom: 14px;
}

.navbar-minimal .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-search-minimal {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.header-search-minimal i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p-color);
}

.header-search-minimal .form-control {
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-color);
    background: var(--section-bg-color);
    padding: 10px 16px 10px 40px;
}

.account-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    font-size: 18px;
}

.account-logout-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--p-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.account-logout-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Business detail page — sidebar cards */
.business-detail-sidebar {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 24px;
}

.business-detail-avatar-wrap {
    position: relative;
    width: 96px;
    margin: 0 auto 16px;
}

.business-detail-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--section-bg-color);
}

.business-detail-fav {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.business-detail-name {
    font-size: 22px;
    color: var(--dark-color);
    letter-spacing: normal;
    margin-bottom: 6px;
    text-align: center;
}

.business-top-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: auto;
    margin-right: auto;
    color: var(--secondary-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
}

.business-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.business-tag-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--border-radius-large);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    background: var(--section-bg-color);
    color: var(--p-color);
}

.business-tag-pill.pill-category {
    background: rgba(11, 135, 125, .1);
    color: var(--primary-color);
}

.business-tag-pill.pill-premium {
    background: rgba(253, 99, 1, .12);
    color: var(--secondary-color);
}

.business-tag-pill.pill-rated {
    background: rgba(0, 0, 0, .06);
    color: var(--dark-color);
}

.business-tag-pill.pill-open,
.business-tag-pill.pill-closed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--section-bg-color);
    color: var(--p-color);
}

.business-tag-pill.pill-open .is-open,
.business-tag-pill.pill-closed .is-open {
    color: #1e7e34;
}

.business-tag-pill.pill-open .is-closed,
.business-tag-pill.pill-closed .is-closed {
    color: var(--p-color);
}

.business-tag-pill-time {
    color: var(--p-color);
    font-weight: var(--font-weight-normal);
}

.business-detail-description {
    color: var(--p-color);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 14px;
    margin-bottom: 4px;
}

/* The saved HTML already carries its own <br> line breaks for blank lines
   (see MyHelpers::normalizeRichTextHtml), so the browser's default <p> margin
   would double up the spacing between paragraphs — reset it to 0. */
.business-detail-description p {
    margin: 0;
}

.business-detail-description ul,
.business-detail-description ol {
    margin: 0;
    padding-left: 20px;
}

.business-detail-description a {
    color: var(--primary-color);
    word-break: break-word;
}

.business-detail-description img {
    max-width: 100%;
    border-radius: var(--border-radius-small);
}

.read-more-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    margin-bottom: 16px;
}

.business-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.business-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
}

.business-action-link:hover {
    color: var(--primary-color);
}

.business-social-links {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.business-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--dark-color);
    font-size: 16px;
    text-decoration: none;
    flex-shrink: 0;
}

.business-social-link:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.btn-contact-gradient {
    display: block;
    text-align: center;
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: var(--border-radius-large);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    margin-bottom: 20px;
}

.btn-contact-gradient:hover {
    color: var(--white-color);
    opacity: .92;
}

.business-detail-info-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    font-size: 13px;
}

.business-detail-info-row:last-child {
    margin-bottom: 0;
}

.business-detail-info-row .info-label {
    color: var(--p-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.business-detail-info-row .info-value {
    font-weight: var(--font-weight-bold);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.business-detail-info-row .info-value-link {
    color: var(--primary-color);
    text-decoration: none;
}

.business-detail-info-row .info-value-link:hover {
    text-decoration: underline;
}

/* Business detail page — tabs
   flex-nowrap + horizontal scroll instead of Bootstrap's default flex-wrap,
   since the tab count varies per business (Jobs tab only shows when a business
   has active postings) and wrapping to a second row looks broken. */
.business-detail-tabs {
    border-bottom: 1px solid var(--border-color);
    gap: 2px;
    margin-bottom: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.business-detail-tabs::-webkit-scrollbar {
    height: 4px;
}

.business-detail-tabs::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--border-radius-large);
}

.business-detail-tabs .nav-item {
    flex-shrink: 0;
}

.business-detail-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
    color: var(--p-color);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 16px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s ease, background .15s ease;
}

.business-detail-tabs .nav-link i {
    font-size: 14px;
    opacity: .75;
}

.business-detail-tabs .nav-link:hover {
    color: var(--dark-color);
    background: var(--section-bg-color);
}

.business-detail-tabs .nav-link.active {
    color: var(--primary-color);
    box-shadow: inset 0 -2px 0 var(--primary-color);
    background: rgba(11, 135, 125, .06);
    font-weight: var(--font-weight-bold);
}

.business-detail-tabs .nav-link.active i {
    opacity: 1;
}

.business-tab-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
}

.gallery-preview-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 90px;
    border: none;
    padding: 0;
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.gallery-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: 13px;
}

/* Business detail page — reviews summary + similar businesses sidebar */
.review-summary-score {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

/* Business reviews — redesigned listing UI */
.business-reviews-panel {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 24px;
}

.business-reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.business-reviews-title {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.business-reviews-write-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid var(--primary-color);
    border-radius: 999px;
    background: transparent;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.business-reviews-write-btn:hover {
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
}

.business-reviews-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 20px;
    margin-bottom: 20px;
    background: var(--section-bg-color);
    border-radius: var(--border-radius-medium);
}

.business-reviews-summary-score {
    flex: 0 0 180px;
    text-align: center;
}

.business-reviews-score {
    display: block;
    font-size: 42px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 8px;
}

.business-reviews-count {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--p-color);
}

.business-reviews-distribution {
    flex: 1 1 260px;
    min-width: 0;
}

.business-reviews-dist-row {
    display: grid;
    grid-template-columns: 52px 1fr 28px;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--p-color);
}

.business-reviews-dist-row:last-child {
    margin-bottom: 0;
}

.business-reviews-dist-star {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.business-reviews-dist-star i {
    color: #f5a623;
    font-size: 11px;
}

.business-reviews-dist-bar {
    height: 8px;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.business-reviews-dist-bar span {
    display: block;
    height: 100%;
    background: var(--primary-color);
    border-radius: 999px;
}

.business-reviews-dist-count {
    text-align: right;
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

.business-reviews-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}

.business-reviews-select {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--dark-color);
    background: var(--white-color);
    min-width: 140px;
}

.business-reviews-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--p-color);
}

.business-reviews-list {
    display: flex;
    flex-direction: column;
}

.business-review-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
}

.business-review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.business-review-item-main {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.business-review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.business-review-avatar-tone-1 {
    background: rgba(11, 135, 125, .15);
    color: var(--primary-color);
}

.business-review-avatar-tone-2 {
    background: rgba(124, 58, 237, .15);
    color: #7c3aed;
}

.business-review-avatar-tone-3 {
    background: rgba(245, 166, 35, .18);
    color: #c27803;
}

.business-review-avatar-tone-4 {
    background: rgba(59, 130, 246, .15);
    color: #2563eb;
}

.business-review-content {
    flex: 1;
    min-width: 0;
}

.business-review-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.business-review-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.business-review-name {
    font-size: 15px;
    color: var(--dark-color);
}

.business-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: #16a34a;
}

.business-review-rating-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.business-review-time {
    font-size: 12px;
    color: var(--p-color);
}

.business-review-text {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--p-color);
}

.business-review-menu-btn {
    border: none;
    background: transparent;
    color: var(--p-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.business-review-menu-btn:hover {
    background: var(--section-bg-color);
    color: var(--dark-color);
}

.review-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #f5a623;
}

.review-stars-sm {
    font-size: 12px;
}

.review-stars-md {
    font-size: 16px;
}

.business-reviews-sidebar-gauge {
    text-align: center;
}

.business-reviews-sidebar-title {
    text-align: center;
}

.business-reviews-sidebar-gauge .review-stars {
    justify-content: center;
}

.business-reviews-gauge-wrap {
    position: relative;
    width: 200px;
    height: 118px;
    margin: 0 auto 10px;
}

.business-reviews-gauge-svg {
    display: block;
    width: 100%;
    height: auto;
}

.business-reviews-gauge-track,
.business-reviews-gauge-fill {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
}

.business-reviews-gauge-track {
    stroke: #e9ecef;
}

.business-reviews-gauge-fill {
    stroke: var(--primary-color);
    stroke-dasharray: 239;
    transition: stroke-dashoffset .35s ease;
}

.business-reviews-gauge-score {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.business-reviews-gauge-score strong {
    display: block;
    font-size: 34px;
    line-height: 1;
    color: var(--primary-color);
}

.business-reviews-gauge-score span {
    display: block;
    font-size: 12px;
    color: var(--p-color);
    margin-top: 2px;
}

.business-reviews-gauge-meta {
    font-size: 13px;
    color: var(--p-color);
    margin: 8px 0 0;
}

.business-reviews-recommend {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--border-radius-medium);
    background: rgba(11, 135, 125, .08);
    font-size: 12px;
    line-height: 1.45;
    color: var(--primary-color);
    text-align: left;
}

.business-reviews-recommend i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 14px;
}

.business-reviews-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.business-reviews-highlight {
    border-radius: var(--border-radius-medium);
    padding: 12px;
}

.business-reviews-highlight-label {
    display: block;
    font-size: 12px;
    color: var(--p-color);
    margin-bottom: 4px;
}

.business-reviews-highlight strong {
    font-size: 18px;
    color: var(--dark-color);
}

.business-reviews-highlight strong i {
    color: #f5a623;
    font-size: 12px;
}

.business-reviews-highlight-green { background: rgba(22, 163, 74, .1); }
.business-reviews-highlight-blue { background: rgba(59, 130, 246, .1); }
.business-reviews-highlight-purple { background: rgba(124, 58, 237, .1); }
.business-reviews-highlight-orange { background: rgba(245, 166, 35, .14); }

.business-reviews-cta-sub {
    font-size: 13px;
    color: var(--p-color);
    margin-bottom: 14px;
}

.business-reviews-sidebar-cta .btn-contact-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .business-reviews-panel {
        padding: 18px 16px;
    }

    .business-reviews-summary {
        flex-direction: column;
    }

    .business-reviews-summary-score {
        flex-basis: auto;
    }

    .business-reviews-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .business-reviews-sort {
        justify-content: space-between;
    }
}

.rating-distribution-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--p-color);
}

.rating-distribution-bar {
    flex: 1;
    height: 8px;
    border-radius: var(--border-radius-large);
    background: var(--section-bg-color);
    overflow: hidden;
}

.rating-distribution-bar span {
    display: block;
    height: 100%;
    background: var(--secondary-color);
    border-radius: var(--border-radius-large);
}

.similar-business-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.similar-business-mini:last-child {
    border-bottom: none;
}

.similar-business-mini img {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-small);
    object-fit: cover;
    flex-shrink: 0;
}

.similar-business-name {
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    color: var(--dark-color);
}

.similar-business-meta {
    font-size: 12px;
    color: var(--p-color);
}

.business-cover-wrap {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: var(--section-bg-color);
}

.business-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-breadcrumb {
    font-size: 13px;
}

.business-section-title {
    font-size: 16px !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    color: var(--dark-color) !important;
    margin-bottom: 16px;
}

@media (max-width: 991.98px) {
    .business-cover-wrap {
        height: 160px;
    }

    .business-detail-sidebar {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 575.98px) {
    .business-cover-wrap {
        height: 120px;
    }
}

.business-hours-table {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.business-hours-table .info-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

.business-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
    color: var(--p-color);
}

.business-hours-row.is-today {
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

.business-hours-row.is-today .business-hours-time {
    color: var(--primary-color);
}

.business-hours-day {
    text-transform: capitalize;
}

.text-muted {
    font-size: 14px;
    color: var(--p-color) !important;
}

/* Browse on Map page */
.map-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.map-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--section-bg-color);
}

.map-toolbar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.map-toolbar-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    background: rgba(11, 135, 125, .08);
    padding: 6px 14px;
    border-radius: var(--border-radius-large);
}

.map-card-canvas {
    height: 560px;
    width: 100%;
}

@media (max-width: 767.98px) {
    .map-card-canvas {
        height: 360px;
    }
}

.map-card-empty {
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--p-color);
}

.map-card-empty i {
    font-size: 32px;
    color: var(--border-color);
}

.business-map-popup {
    font-size: 13px;
    line-height: 1.5;
    min-width: 220px;
    max-width: min(290px, calc(100vw - 64px));
    padding: 6px 2px 2px;
    box-sizing: border-box;
}

.business-map-popup-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.business-map-popup-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: 17px;
}

.business-map-popup-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-right: 16px;
}

.business-map-popup-name {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.business-map-popup-verified {
    font-size: 12px;
    color: var(--primary-color);
}

.business-map-popup-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    background: rgba(11, 135, 125, .08);
    padding: 2px 8px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.business-map-popup-city {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--p-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.business-map-popup-actions {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.business-map-popup-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--dark-color);
    text-decoration: none;
}

.business-map-popup-action-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-size: 14px;
    transition: background-color .15s ease, color .15s ease;
}

.business-map-popup-action:hover .business-map-popup-action-icon {
    background: var(--primary-color);
    color: #fff;
}

.business-map-popup-action-label {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.business-map-popup-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.business-map-popup-rating-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 184, 0, .12);
    color: #ffb800;
    font-size: 13px;
    flex-shrink: 0;
}

.business-map-popup-rating-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.business-map-popup-rating-text strong {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.business-map-popup-rating-sub {
    font-size: 11px;
    color: var(--p-color);
}

.business-map-popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    background: var(--primary-color);
    padding: 8px 12px;
    margin-top: 12px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
    transition: background .2s ease;
}

.business-map-popup-btn:hover {
    background: var(--dark-color);
    color: #fff;
}

.gm-style .gm-style-iw-c {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15) !important;
    max-width: calc(100vw - 48px) !important;
}

@media (max-width: 480px) {
    .business-map-popup {
        min-width: 0;
        max-width: calc(100vw - 80px);
    }

    .business-map-popup-avatar {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .business-map-popup-actions {
        gap: 2px;
    }

    .business-map-popup-action-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .business-map-popup-action-label {
        font-size: 9px;
    }
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
}

.map-toolbar-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: #1a73e8;
    background: rgba(26, 115, 232, .08);
    padding: 5px 12px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.map-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--border-color);
    flex-shrink: 0;
}

.map-toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 6px 14px;
    min-width: 220px;
}

.map-toolbar-search i {
    color: var(--p-color);
    font-size: 14px;
}

.map-toolbar-search input {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    width: 100%;
    color: var(--dark-color);
}

@media (max-width: 767.98px) {
    .map-toolbar-search {
        min-width: 0;
        width: 100%;
    }
}

/* Business subscription page */
.business-card-badge.status-pending {
    background: #f0ad4e;
    color: #2b1a00;
}

.business-card-badge.status-created {
    background: #6c757d;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.section-heading i {
    color: var(--primary-color);
    font-size: 18px;
}

.section-heading h6 {
    margin: 0;
}

/* Current plan hero */
.subscription-hero {
    border-radius: var(--border-radius-medium);
    padding: 26px 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.subscription-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.subscription-hero.brand-gradient {
    color: var(--white-color);
}

.subscription-hero-muted {
    background: var(--white-color);
    border: 1px dashed var(--border-color);
    color: var(--dark-color);
}

.subscription-hero-left {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.subscription-hero-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255, 255, 255, .18);
}

.subscription-hero-muted .subscription-hero-icon {
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
}

.subscription-hero-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: normal;
    font-weight: var(--font-weight-bold);
    opacity: .85;
}

.subscription-hero-plan {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.subscription-hero-meta {
    font-size: 13px;
    opacity: .9;
}

.subscription-hero-progress {
    width: 220px;
    height: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
    margin-top: 10px;
}

.subscription-hero-progress-bar {
    height: 100%;
    background: var(--white-color);
    border-radius: 10px;
}

.subscription-hero-right {
    position: relative;
    z-index: 1;
    text-align: right;
}

/* Plan cards */
.pricing-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.pricing-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, .08);
    transform: translateY(-3px);
}

.pricing-card.pricing-card-current {
    border-color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(11, 135, 125, .12);
}

.pricing-card-badge-best {
    position: absolute;
    top: -11px;
    right: 20px;
    background: linear-gradient(135deg, #f7c548, #d6900f);
    color: #2b1a00;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    padding: 4px 11px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(214, 144, 15, .35);
}

.pricing-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    margin-bottom: 14px;
}

.pricing-card-title {
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    margin-bottom: 4px;
}

.pricing-card-desc {
    color: var(--p-color);
    font-size: 13px;
    margin-bottom: 14px;
}

.pricing-card-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    flex-grow: 1;
}

.pricing-card-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--dark-color);
}

.pricing-card-benefits li i {
    color: #28a745;
    margin-top: 2px;
}

.pricing-card-price-was {
    text-decoration: line-through;
    color: var(--p-color);
    font-size: 13px;
    margin-right: 6px;
}

.pricing-card-price-now {
    font-weight: var(--font-weight-bold);
    font-size: 20px;
    color: var(--primary-color);
}

.savings-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(40, 167, 69, .1);
    color: #1e7e34;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.duration-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.duration-pill {
    border: 1px solid var(--border-color);
    background: var(--white-color);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    cursor: pointer;
    transition: all .15s ease;
}

.duration-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.duration-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.pricing-card-footer-btn {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

/* History / transaction tables */
.mb-table-card thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--p-color);
    font-weight: var(--font-weight-bold);
    background: rgba(0, 0, 0, .015);
    border-bottom-width: 1px;
}

.mb-table-card tbody tr:hover {
    background: rgba(11, 135, 125, .03);
}

.payment-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--p-color);
}

/* Public gallery grid + reels-style viewer */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    gap: 14px;
}

.gallery-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.gallery-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.gallery-grid-item:hover img {
    transform: scale(1.06);
}

.gallery-grid-item::after {
    content: '\F52A';
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    color: var(--white-color);
    border-radius: 50%;
    font-size: 14px;
    opacity: 0;
    transition: opacity .25s ease;
}

.gallery-grid-item:hover::after {
    opacity: 1;
}

.reels-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    flex-direction: column;
}

.reels-overlay.is-open {
    display: flex;
}

.reels-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: var(--white-color);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reels-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 60px 70px;
}

.reels-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
}

.reels-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: var(--white-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.reels-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.reels-prev {
    left: 16px;
}

.reels-next {
    right: 16px;
}

.reels-business-info {
    flex-shrink: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .6) 100%);
    color: var(--white-color);
    padding: 18px 24px 26px;
}

.reels-business-name {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 6px;
}

.reels-business-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 12px;
}

.reels-business-meta i {
    color: var(--secondary-color);
    margin-right: 4px;
}

.reels-business-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reels-business-cta {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.reels-business-call {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .reels-stage {
        padding: 60px 16px;
    }

    .reels-nav {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   Job Portal — dedicated, in-flow classes (deliberately NOT reusing
   .business-card-badge / .business-card-category-chip, which are position:absolute
   and rely on the .business-card-img-wrap positioning context business cards have.
   Job cards have no cover photo, so those classes would escape to the nearest
   positioned ancestor and overlap unrelated content on the page.)
   ========================================================================== */

.job-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.job-card:hover {
    box-shadow: 0 20px 36px rgba(0, 0, 0, .12);
    transform: translateY(-4px);
    border-color: rgba(11, 135, 125, .25);
}

.job-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.job-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--border-radius-small);
    background: linear-gradient(135deg, rgba(11, 135, 125, .12), rgba(253, 99, 1, .12));
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.job-card-new-flag {
    margin-left: auto;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f7c548, #d6900f);
    color: #2b1a00;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    padding: 3px 9px;
    border-radius: var(--border-radius-large);
}

.job-card-title {
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    color: var(--dark-color);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.job-card-title:hover {
    color: var(--primary-color);
}

.job-card-company {
    font-size: 13px;
    color: var(--p-color);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.job-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 4px 10px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
}

.job-card-badge.job-type {
    background: var(--primary-color);
    color: var(--white-color);
}

.job-card-badge.work-mode {
    background: var(--section-bg-color);
    color: var(--dark-color);
    border: 1px solid var(--border-color);
}

.job-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--p-color);
    margin-bottom: 4px;
}

.job-card-meta i {
    color: var(--primary-color);
    font-size: 12px;
    flex-shrink: 0;
}

.job-card-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-card-divider {
    height: 1px;
    background: var(--border-color);
    margin: 14px 0 12px;
}

.job-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.job-card-salary {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.job-card-salary.is-negotiable {
    color: var(--p-color);
    font-weight: 600;
}

.service-grid .job-card {
    min-height: 100%;
}

.service-grid .job-card-salary:not(.is-negotiable) {
    color: var(--primary-color);
}

.service-grid .job-card-salary:not(.is-negotiable) i {
    color: var(--primary-color);
}

/* Job detail page */
/* Job details — hero banner */
.job-hero-banner {
    display: flex;
    align-items: stretch;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-color) 0%, #072823 100%);
    min-height: 320px;
}

.job-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--white-color);
}

.job-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .28);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--border-radius-large);
    margin-bottom: 16px;
}

.job-hero-title {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
    margin-bottom: 16px;
    line-height: 1.2;
}

.job-hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 16px;
}

.job-hero-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.job-hero-meta-row i {
    color: rgba(255, 255, 255, .6);
}

.job-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.job-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--border-radius-large);
}

.job-hero-stats {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.job-hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.job-hero-stat i {
    font-size: 18px;
    color: rgba(255, 255, 255, .65);
}

.job-hero-stat strong {
    display: block;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
    line-height: 1.2;
}

.job-hero-stat span {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .65);
}

.job-hero-stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, .18);
}

.job-hero-media {
    position: relative;
    flex: 0 0 34%;
    min-width: 240px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .15));
}

.job-hero-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.job-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(3, 20, 18, .1) 0%, rgba(3, 20, 18, .55) 100%);
}

.job-hero-media-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
    z-index: 1;
}

/* Job details — content section cards */
.job-section-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 24px;
}

.job-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.job-section-heading + .job-section-heading {
    margin-top: 26px;
}

.job-section-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-small);
    background: var(--section-bg-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.job-section-title {
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    color: var(--dark-color);
    margin: 0;
}

.job-skill-pill {
    display: inline-block;
    background: var(--section-bg-color);
    color: var(--dark-color);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-color);
}

/* Job details — sidebar: overview, apply, company */
.job-overview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.job-overview-row:first-child {
    padding-top: 0;
}

.job-overview-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.job-overview-row-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--p-color);
}

.job-overview-row-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-small);
    background: var(--section-bg-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.job-overview-row-value {
    font-size: 13.5px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    text-align: right;
}

.job-apply-sticky-wrap {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.job-apply-card {
    background: rgba(11, 135, 125, .06);
    border: 1px solid rgba(11, 135, 125, .15);
    border-radius: var(--border-radius-medium);
    padding: 22px;
}

.job-apply-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.job-apply-card-head h6 {
    font-weight: var(--font-weight-bold);
    margin-bottom: 4px;
}

.job-apply-subtext {
    font-size: 13px;
    color: var(--p-color);
    margin: 0;
}

.job-apply-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-small);
    background: var(--white-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.job-apply-resume-note {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white-color);
    border-radius: var(--border-radius-small);
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--p-color);
    margin-bottom: 14px;
}

.job-apply-resume-note i {
    color: var(--primary-color);
    font-size: 15px;
}

.job-company-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 20px;
}

.job-company-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.job-company-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--section-bg-color);
    flex-shrink: 0;
}

.job-company-card-top h6 {
    font-weight: var(--font-weight-bold);
    margin-bottom: 4px;
}

.job-company-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #198754;
    background: rgba(25, 135, 84, .1);
    padding: 3px 9px;
    border-radius: var(--border-radius-large);
}

.job-company-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-color);
}

.job-company-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Job details — related jobs carousel */
.job-related-viewall {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.job-related-viewall:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.job-related-carousel {
    position: relative;
}

.job-related-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.job-related-track::-webkit-scrollbar {
    display: none;
}

.job-related-item {
    flex: 0 0 calc(25% - 15px);
    min-width: 240px;
    scroll-snap-align: start;
}

.job-related-nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    z-index: 2;
}

.job-related-nav.prev {
    left: -14px;
}

.job-related-nav.next {
    right: -14px;
}

@media (max-width: 991.98px) {
    .job-hero-banner {
        flex-direction: column;
    }

    .job-hero-media {
        flex-basis: auto;
        min-height: 160px;
    }

    .job-related-item {
        flex-basis: calc(50% - 10px);
    }
}

@media (max-width: 767.98px) {
    .job-apply-sticky-wrap {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .job-related-item {
        flex-basis: 85%;
    }

    .job-related-nav {
        display: none;
    }
}

/* Home page nudge banner prompting a logged-in user with no saved category
   preferences to set them, and the "Choose Your Interests" checkbox-chip
   picker used both here and on the Preferences account page. */
.preferences-nudge {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 12px 0;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

.preferences-nudge-btn {
    background: var(--white-color);
    color: var(--primary-color);
    border: none;
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    padding: 8px 18px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
    transition: transform .15s ease;
}

.preferences-nudge-btn:hover {
    transform: translateY(-1px);
}

.category-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding: 2px;
}

.category-picker-chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.category-picker-chip input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.category-picker-chip span {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--dark-color);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.category-picker-chip input:checked + span {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.category-picker-chip input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(11, 135, 125, .25);
}

.category-picker-chips-readonly {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preference-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--border-radius-large);
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
}

/* Blood donation module — home page nudge banner (mirrors .preferences-nudge
   in shape, red-tinted to read as an urgent/community-health call to action),
   the compact "highlighted, not full detail" request card, and the detail
   page's status badges. */
.blood-donor-nudge {
    background: var(--blood-color, #C62828);
    color: var(--white-color);
    padding: 12px 0;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

.blood-donor-nudge-btn {
    background: var(--white-color);
    color: var(--blood-color, #C62828);
    border: none;
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    padding: 8px 18px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
    transition: transform .15s ease;
}

.blood-donor-nudge-btn:hover {
    transform: translateY(-1px);
}

/* Home-screen banner for METROMIZE-owned businesses matching the logged-in
   user's mobile number — mirrors .preferences-nudge/.blood-donor-nudge in
   placement, but holds a list of claim cards instead of a single CTA. */
.pending-claim-banner {
    background: var(--section-bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 14px 0;
}

.pending-claim-banner-title {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 10px;
}

.pending-claim-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.pending-claim-card:last-child {
    margin-bottom: 0;
}

.pending-claim-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: var(--p-color);
}

.pending-claim-info strong {
    font-size: 14px;
    color: var(--dark-color);
}

.pending-claim-actions {
    display: flex;
    gap: 8px;
}

.pending-claim-btn {
    display: inline-block;
    border: none;
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    padding: 8px 18px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
    text-decoration: none;
    transition: transform .15s ease;
}

.pending-claim-btn:hover {
    transform: translateY(-1px);
}

.pending-claim-btn-accept {
    background: var(--primary-color);
    color: var(--white-color);
}

.pending-claim-btn-reject {
    background: transparent;
    color: var(--p-color);
    border: 1px solid var(--border-color);
}

.pending-claim-btn-view {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.pending-claim-btn-view:hover {
    color: var(--primary-color);
}

/* Blood donation request card — circular type badge + pill footer, instead
   of a full-width gradient header banner (kept visually distinct from the
   generic .business-card / .service-list-item patterns used elsewhere). */
.blood-card {
    position: relative;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 18px 16px 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.blood-card:hover {
    box-shadow: 0 14px 28px rgba(198, 40, 40, .14);
    transform: translateY(-3px);
    border-color: rgba(198, 40, 40, .35);
    color: inherit;
}

.blood-card-type-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blood-color, #C62828) 0%, #8E1B1B 100%);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(198, 40, 40, .3);
}

.blood-card-urgent {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #FFF4E0;
    color: #B45300;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 9px;
    border-radius: var(--border-radius-large);
}

.blood-card-urgent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF9800;
    animation: bloodCardPulse 1.4s ease-in-out infinite;
}

@keyframes bloodCardPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(1.4); }
}

.blood-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blood-card-hospital {
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    font-size: 13.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blood-card-location,
.blood-card-distance {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted-color, #6c757d);
}

.blood-card-distance {
    color: var(--blood-color, #C62828);
    font-weight: var(--font-weight-bold);
}

.blood-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

.blood-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--section-bg-color);
    color: var(--dark-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 5px 10px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
}

.blood-card-pill i {
    color: var(--blood-color, #C62828);
    font-size: 11px;
}

.blood-card-arrow {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--blood-color, #C62828);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.blood-card:hover .blood-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Blood donation listing pagination — same numbered/prev-next markup as
   pagination::bootstrap-5, themed in the blood-color palette instead of the
   generic teal .business-pagination used on other listing pages. */
.blood-pagination {
    margin-top: 24px;
}

.blood-pagination p.small {
    margin: 0;
    font-size: 12.5px;
}

.blood-pagination .pagination {
    gap: 6px;
    margin: 0;
    flex-wrap: wrap;
}

.blood-pagination .page-link {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    color: var(--dark-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    padding: 0 6px;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.blood-pagination .page-item:not(.disabled):not(.active) .page-link:hover {
    border-color: var(--blood-color, #C62828);
    color: var(--blood-color, #C62828);
    background: rgba(198, 40, 40, .06);
}

.blood-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--blood-color, #C62828) 0%, #8E1B1B 100%);
    border-color: transparent;
    color: var(--white-color);
    box-shadow: 0 4px 12px rgba(198, 40, 40, .28);
}

.blood-pagination .page-item.disabled .page-link {
    color: #ccc;
    border-color: var(--border-color);
    background: none;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .blood-pagination .page-link {
        min-width: 34px;
        height: 34px;
        font-size: 12px;
    }
}

.blood-group-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--white-color);
    color: var(--blood-color, #C62828);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    padding: 4px 12px;
    border-radius: var(--border-radius-large);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    flex-shrink: 0;
}

.blood-group-badge-lg {
    font-size: 18px;
    padding: 6px 16px;
    margin-right: 10px;
}

/* Standalone variant (e.g. the request detail page) where the badge isn't
   sitting on the card's red gradient header, so it needs its own background. */
.blood-group-badge-solid {
    background: var(--blood-color, #C62828);
    color: var(--white-color);
}

.blood-request-urgent-badge {
    background: #FFC107;
    color: #4A2E00;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: var(--border-radius-large);
    white-space: nowrap;
}


.blood-status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    padding: 4px 12px;
    border-radius: var(--border-radius-large);
    text-transform: uppercase;
}

.badge-status-active {
    background: #FFEBEE;
    color: var(--blood-color, #C62828);
}

.badge-status-fulfilled {
    background: #E8F5E9;
    color: #2E7D32;
}

.badge-status-closed {
    background: var(--section-bg-color);
    color: var(--text-muted-color, #6c757d);
}

/* Blood donor preference popup — segmented "chip card" toggle for
   interested/not_interested, same hidden-input + styled-sibling pattern as
   .category-picker-chip (proven clickable there) instead of plain Bootstrap
   radios, which had a very small/unreliable hit target here. */
.blood-interest-options {
    display: flex;
    gap: 12px;
}

.blood-interest-option {
    flex: 1;
    position: relative;
    cursor: pointer;
    margin: 0;
}

.blood-interest-option input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.blood-interest-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 16px 12px;
    border-radius: var(--border-radius-large);
    border: 2px solid var(--border-color);
    background: var(--white-color);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.blood-interest-option:hover .blood-interest-option-card {
    transform: translateY(-1px);
    border-color: var(--blood-color, #C62828);
}

.blood-interest-option input:checked + .blood-interest-option-card {
    border-color: var(--blood-color, #C62828);
    background: #FFF5F5;
}

.blood-interest-option input:focus-visible + .blood-interest-option-card {
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .25);
}

/* form-validation.js toggles `is-invalid` on the group wrapper — the radio
   itself is visually hidden, so the visible cards carry the highlight. */
.blood-interest-options.is-invalid .blood-interest-option-card {
    border-color: #dc3545;
}

.blood-interest-option-icon {
    font-size: 22px;
    color: var(--text-muted-color, #6c757d);
}

.blood-interest-option input:checked + .blood-interest-option-card .blood-interest-option-icon {
    color: var(--blood-color, #C62828);
}

.blood-interest-option-title {
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    color: var(--dark-color);
}

.blood-interest-option-desc {
    font-size: 12px;
    color: var(--text-muted-color, #6c757d);
}

/* Blood donation request detail page — gradient hero with a decorative dot
   pattern and stat chips, icon-heading content cards, a contact panel with
   brand-colored Call/WhatsApp buttons, an eligibility callout, quick actions,
   and a related-requests carousel — mirrors the job/ad detail page language. */
.blood-detail-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 24px;
    background: linear-gradient(135deg, #C62828 0%, #8E1B1B 100%);
    border-radius: var(--border-radius-medium);
    padding: 28px 32px;
    color: var(--white-color);
    overflow: hidden;
}

.blood-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 2px, transparent 2px);
    background-size: 26px 26px;
    opacity: .5;
    pointer-events: none;
}

.blood-detail-hero-left {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blood-detail-hero-top {
    display: flex;
    align-items: center;
    gap: 20px;
}

.blood-detail-hero-group {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
}

.blood-detail-hero-main {
    min-width: 0;
}

.blood-detail-hero-name {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
    margin: 4px 0 8px;
}

.blood-detail-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .85);
}

.blood-detail-hero-meta i {
    margin-right: 6px;
    color: rgba(255, 255, 255, .7);
}

.blood-status-badge-onhero {
    background: rgba(255, 255, 255, .18);
    color: var(--white-color);
}

.blood-detail-hero-stats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.blood-detail-hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--border-radius-small);
    padding: 10px 16px;
    flex: 1 1 150px;
}

.blood-detail-hero-stat-icon {
    font-size: 18px;
    color: rgba(255, 255, 255, .8);
}

.blood-detail-hero-stat-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .7);
}

.blood-detail-hero-stat-value {
    display: block;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
}

.blood-detail-hero-illustration {
    position: relative;
    z-index: 1;
    flex: 0 0 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blood-detail-hero-illustration-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    color: rgba(255, 255, 255, .92);
}

@media (max-width: 767.98px) {
    .blood-detail-hero {
        flex-direction: column;
    }

    .blood-detail-hero-illustration {
        flex-basis: auto;
    }
}

@media (max-width: 576px) {
    .blood-detail-hero-top {
        flex-direction: column;
        text-align: center;
    }

    .blood-detail-hero-meta {
        align-items: center;
    }
}

/* Content cards — "About the Request" / "Request Details" */
.blood-section-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 24px;
}

.blood-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.blood-section-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFEBEE;
    color: var(--blood-color, #C62828);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.blood-section-title {
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    color: var(--dark-color);
    margin: 0;
}

.blood-detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.blood-detail-list-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.blood-detail-list-row-wide {
    grid-column: 1 / -1;
}

.blood-detail-list-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.blood-detail-list-icon {
    flex-shrink: 0;
    color: var(--blood-color, #C62828);
    font-size: 13px;
    margin-top: 3px;
}

.blood-detail-list-label {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted-color, #6c757d);
    margin-bottom: 2px;
}

.blood-detail-list-value {
    font-size: 13.5px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

@media (max-width: 575.98px) {
    .blood-detail-list {
        grid-template-columns: 1fr;
    }
}

/* Sidebar — contact card, eligibility callout, quick actions */
.blood-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.blood-contact-row:last-of-type {
    margin-bottom: 0;
}

.blood-contact-row-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 15px;
}

.blood-contact-row-icon.is-call {
    background: var(--blood-color, #C62828);
}

.blood-contact-row-icon.is-whatsapp {
    background: #25D366;
}

.blood-contact-row-value {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dark-color);
}

.blood-contact-row-value a {
    color: inherit;
    text-decoration: none;
}

.blood-contact-icon {
    background: linear-gradient(135deg, #C62828, #8E1B1B);
}

.blood-contact-icon-whatsapp {
    background: #25D366;
}

.blood-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border-radius: var(--border-radius-small, 10px);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
    transition: filter .15s ease;
}

.blood-contact-btn:hover {
    filter: brightness(0.92);
}

.blood-contact-btn-call {
    background: var(--blood-color, #C62828);
    color: var(--white-color);
}

.blood-contact-btn-whatsapp {
    background: #25D366;
    color: var(--white-color);
}

.blood-contact-locked {
    text-align: center;
    color: var(--text-muted-color, #6c757d);
    padding: 12px 0;
}

.blood-contact-locked i {
    font-size: 28px;
    color: var(--blood-color, #C62828);
    display: block;
    margin-bottom: 10px;
}

.blood-important-panel {
    display: flex;
    gap: 14px;
    background: #FDECEA;
    border: 1px solid rgba(198, 40, 40, .12);
    border-radius: var(--border-radius-medium);
    padding: 20px;
}

.blood-important-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--border-radius-small);
    background: var(--blood-color, #C62828);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.blood-important-panel h6 {
    font-weight: var(--font-weight-bold);
    margin-bottom: 6px;
}

.blood-important-panel p {
    font-size: 13.5px;
    color: var(--p-color, #6c757d);
    margin-bottom: 8px;
}

.blood-important-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--blood-color, #C62828);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blood-important-link:hover {
    color: var(--blood-color, #C62828);
    text-decoration: underline;
}

.blood-hero-share-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .28);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background-color .15s ease;
}

.blood-hero-share-btn:hover {
    background: rgba(255, 255, 255, .28);
}

/* Related requests carousel */
.blood-related-viewall {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blood-color, #C62828);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blood-related-viewall:hover {
    color: var(--blood-color, #C62828);
    text-decoration: underline;
}

.blood-related-carousel {
    position: relative;
}

.blood-related-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.blood-related-track::-webkit-scrollbar {
    display: none;
}

.blood-related-item {
    flex: 0 0 calc(25% - 12px);
    min-width: 220px;
    scroll-snap-align: start;
}

@media (max-width: 991.98px) {
    .blood-related-item {
        flex-basis: calc(50% - 8px);
    }
}

@media (max-width: 767.98px) {
    .blood-related-item {
        flex-basis: 85%;
    }
}

/* ==========================================================================
   Offers listing page (/offers)
   ========================================================================== */
.offers-page {
    padding: 36px 0 56px;
    background: var(--white-color);
}

.offers-hero {
    margin-bottom: 28px;
}

.offers-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(253, 99, 1, .12);
    color: var(--primary-color);
    font-size: 18px;
    margin-bottom: 12px;
}

.offers-hero-title {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    line-height: 1.2;
    margin-bottom: 10px;
}

.offers-hero-subtitle {
    font-size: 16px;
    color: var(--p-color);
    margin: 0;
    max-width: 560px;
}

.offers-hero-art {
    position: relative;
    width: 200px;
    height: 180px;
}

.offers-hero-gift {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 120px;
    height: 120px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(11, 135, 125, .12) 0%, rgba(253, 99, 1, .18) 100%);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    box-shadow: 0 16px 36px rgba(11, 135, 125, .12);
}

.offers-hero-spark {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(247, 197, 72, .2);
    color: #d6900f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.offers-hero-spark-1 {
    top: 20px;
    left: 20px;
}

.offers-hero-spark-2 {
    top: 60px;
    right: 10px;
}

.offers-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}

.offers-toolbar-left {
    flex: 1 1 420px;
    min-width: 0;
}

.offers-location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dark-color);
    margin-bottom: 14px;
}

.offers-location i {
    color: var(--primary-color);
}

.offers-change-location {
    border: none;
    background: none;
    padding: 0;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    cursor: pointer;
}

.offers-change-location:hover {
    text-decoration: underline;
}

.offers-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.offers-category-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--dark-color);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.offers-category-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.offers-category-tab.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.offers-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.offers-sort-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offers-sort-label {
    font-size: 13px;
    color: var(--p-color);
    margin: 0;
    white-space: nowrap;
}

.offers-sort-select {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    padding: 7px 30px 7px 12px;
    font-size: 13px;
    color: var(--dark-color);
    background: var(--white-color);
}

.offers-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--border-radius-large);
    background: rgba(253, 99, 1, .12);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.offers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.offers-grid-compact {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .offers-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.offer-page-card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    background: var(--white-color);
    overflow: hidden;
    text-decoration: none;
    color: var(--dark-color);
    box-shadow: 0 8px 24px rgba(11, 135, 125, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.offer-page-card:hover {
    transform: translateY(-3px);
    border-color: rgba(11, 135, 125, .22);
    box-shadow: 0 14px 32px rgba(11, 135, 125, .12);
    color: var(--dark-color);
}

.offer-page-card-media {
    position: relative;
    flex: 0 0 168px;
    width: 168px;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
    background: var(--section-bg-color);
    overflow: hidden;
}

.offer-page-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.offer-page-ad-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, .55);
    color: var(--white-color);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 8px;
    border-radius: var(--border-radius-small);
}

.offer-page-media-tags {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.offer-page-distance-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, .6);
    color: var(--white-color);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 4px 9px;
    border-radius: var(--border-radius-small);
    backdrop-filter: blur(2px);
}

.offer-page-strip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--white-color);
    border-radius: var(--border-radius-small);
    max-width: 100%;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-strip-green { background: linear-gradient(90deg, #22c55e, #16a34a); }
.offer-strip-orange { background: linear-gradient(90deg, #f97316, #ea580c); }
.offer-strip-purple { background: linear-gradient(90deg, #a855f7, #7c3aed); }
.offer-strip-pink { background: linear-gradient(90deg, #ec4899, #db2777); }
.offer-strip-blue { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.offer-strip-teal { background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); }

.offer-page-card-body {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
}

.offer-page-business {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--p-color);
}

.offer-page-business-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.offer-page-business span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer-page-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: var(--border-radius-large);
    color: var(--white-color);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer-tag-featured { background: #16a34a; }
.offer-tag-weekend { background: #ea580c; }
.offer-tag-new { background: #7c3aed; }
.offer-tag-festival { background: #db2777; }
.offer-tag-slot { background: #2563eb; }
.offer-tag-open { background: #16a34a; }

.offer-page-title {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin: 0 0 8px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.offer-page-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--p-color);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.offer-page-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.offer-page-card:hover .offer-page-cta {
    text-decoration: underline;
}

.offers-empty {
    text-align: center;
    background: var(--section-bg-color);
    border-radius: var(--border-radius-large);
}

.offers-pagination {
    margin-top: 32px;
}

@media (min-width: 768px) {
    .offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .offers-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* .offers-grid's column-count breakpoints react to viewport width, not
   available space — fine on /offers or a full-width section, but wrong
   inside a ~350px sidebar column, where it still tries to go 2-3 up on a
   normal desktop viewport and squishes every card. Force single column
   regardless of viewport; unconditional + same specificity + declared after
   the media queries above, so it wins the cascade at every width without
   needing !important. */
.offers-grid-sidebar {
    grid-template-columns: 1fr;
}

/* Business page's Offers tab should stay a steady 2-up grid; without this the
   1200px .offers-grid rule above wins the cascade and bumps it to 3-up. */
.offers-grid-compact {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .offers-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .offers-hero-title {
        font-size: 30px;
    }

    /* Image on the left, content on the right — same shape as the desktop
       card — instead of one full-width stacked card per offer. Applies to
       every .offer-page-card (offers page, business offers tab, home). */
    .offer-page-card {
        flex-direction: row;
    }

    .offer-page-card-media {
        flex: 0 0 110px;
        width: 110px;
        aspect-ratio: 1 / 1;
    }

    .offer-page-ad-badge {
        top: 6px;
        left: 6px;
        font-size: 8px;
        padding: 2px 5px;
    }

    .offer-page-distance-badge {
        top: 6px;
        right: 6px;
        font-size: 9px;
        padding: 2px 6px;
    }

    .offer-page-media-tags {
        left: 6px;
        right: 6px;
        bottom: 6px;
        gap: 3px;
    }

    .offer-page-strip,
    .offer-page-tag {
        font-size: 8px;
        padding: 3px 6px;
    }

    .offer-page-card-body {
        padding: 10px 12px;
    }

    .offer-page-title {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .offer-page-desc {
        -webkit-line-clamp: 1;
    }

    .offers-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    /* Home page's Exclusive Offers section keeps rows extra tight. */
    .offers-grid-home .offer-page-business {
        margin-bottom: 4px;
    }
}

/* Business "My Business" ad manager list */
.ad-manage-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ad-manage-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
}

.ad-manage-img {
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius-small);
    object-fit: cover;
    flex-shrink: 0;
}

.ad-manage-body {
    flex: 1;
    min-width: 0;
}

.ad-manage-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--p-color);
}

.ad-manage-stats i {
    margin-right: 3px;
}

.ad-manage-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ad-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 3px 10px;
    border-radius: var(--border-radius-small);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ad-status-badge.ad-status-pending {
    background: #FFF3CD;
    color: #8A6D0B;
}

.ad-status-badge.ad-status-approved {
    background: #D9F4E9;
    color: var(--primary-color);
}

.ad-status-badge.ad-status-rejected {
    background: #FBE1E1;
    color: #B3261E;
}

.ad-rejection-note {
    font-size: 12px;
    color: #B3261E;
}

/* Ad audience/category picker (create/edit ad form) */
.ad-category-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ad-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ad-category-chip:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(11, 135, 125, .08);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

.ad-category-chip input {
    accent-color: var(--primary-color);
}

/* Ad gallery manager (create/edit ad form) */
.ad-gallery-manage {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ad-gallery-manage-item {
    position: relative;
    width: 100px;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.ad-gallery-manage-item img {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.ad-gallery-manage-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: var(--font-weight-bold);
    color: #B3261E;
    background: var(--section-bg-color);
    padding: 4px 2px;
}

.ad-gallery-manage-item:has(input:checked) img {
    opacity: .35;
}

.ad-gallery-manage-item:has(input:checked) .ad-gallery-manage-remove {
    background: #B3261E;
    color: var(--white-color);
}

/* Blood Donation — listing page */
.blood-page {
    background: var(--section-bg-color);
}

.blood-hero {
    position: relative;
    padding: 40px 0 88px;
    background: linear-gradient(135deg, #d12328 0%, #a8181d 100%);
    color: var(--white-color);
    overflow: hidden;
}

.blood-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.blood-hero-heart {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 120px;
    color: rgba(255, 255, 255, .08);
}

.blood-hero-drop {
    position: absolute;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: rgba(255, 255, 255, .08);
}

.blood-hero-drop-1 {
    width: 28px;
    height: 28px;
    top: 18%;
    right: 22%;
}

.blood-hero-drop-2 {
    width: 18px;
    height: 18px;
    top: 28%;
    right: 12%;
}

.blood-hero-drop-3 {
    width: 22px;
    height: 22px;
    bottom: 22%;
    right: 18%;
}

.blood-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(255, 255, 255, .14);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.blood-hero-title {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    line-height: 1.22;
    margin-bottom: 14px;
    color: var(--white-color);
}

.blood-hero-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
    max-width: 560px;
    margin-bottom: 24px;
    line-height: 1.6;
}

.blood-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.blood-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.blood-hero-btn-solid {
    background: var(--white-color);
    color: #d12328;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.blood-hero-btn-solid:hover {
    transform: translateY(-2px);
    color: #d12328;
}

.blood-hero-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .75);
    color: var(--white-color);
}

.blood-hero-btn-outline:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--white-color);
}

.blood-search-card {
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    color: var(--dark-color);
}

.blood-search-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 18px;
    color: var(--dark-color);
}

.blood-search-card-title i {
    color: #d12328;
    font-size: 20px;
}

.blood-search-label {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 6px;
}

.blood-search-select {
    border-radius: var(--border-radius-medium);
    border-color: var(--border-color);
    font-size: 14px;
}

.blood-search-location-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: var(--section-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 11px 14px;
    font-size: 14px;
    color: var(--p-color);
}

.blood-search-location-btn i {
    color: #d12328;
}

.blood-search-submit-btn {
    display: block;
    text-align: center;
    background: #d12328;
    color: var(--white-color);
    border: none;
    border-radius: var(--border-radius-large);
    padding: 13px;
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    transition: filter .2s ease, transform .2s ease;
}

.blood-search-submit-btn:hover {
    filter: brightness(.94);
    transform: translateY(-1px);
}

.blood-stats-panel {
    display: flex;
    flex-wrap: wrap;
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .08);
    margin-top: -48px;
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.blood-stat-item {
    flex: 1 1 0;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-left: 1px solid var(--border-color);
}

.blood-stat-item:first-child {
    border-left: none;
}

.blood-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    flex-shrink: 0;
}

.blood-stat-icon-active {
    background: rgba(209, 35, 40, .12);
    color: #d12328;
}

.blood-stat-icon-fulfilled {
    background: rgba(11, 135, 125, .12);
    color: var(--primary-color);
}

.blood-stat-icon-donors {
    background: rgba(124, 58, 237, .12);
    color: #7c3aed;
}

.blood-stat-value {
    display: block;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    margin-bottom: 2px;
}

.blood-stat-value-active { color: #d12328; }
.blood-stat-value-fulfilled { color: var(--primary-color); }
.blood-stat-value-donors { color: #7c3aed; }

.blood-stat-label {
    font-size: 13px;
    color: var(--p-color);
}

.blood-page-content {
    padding: 8px 0 48px;
}

.blood-group-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.blood-group-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    background: var(--white-color);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.blood-group-chip:hover {
    border-color: #d12328;
    color: #d12328;
}

.blood-group-chip.is-active {
    background: #d12328;
    border-color: #d12328;
    color: var(--white-color);
    box-shadow: 0 4px 12px rgba(209, 35, 40, .25);
}

.blood-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.blood-list-title {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 4px;
}

.blood-list-subtitle {
    font-size: 14px;
    color: var(--p-color);
    margin: 0;
}

.blood-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blood-requests-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.blood-empty-state {
    text-align: center;
    padding: 56px 20px;
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-color);
}

.blood-empty-state i {
    font-size: 42px;
    color: var(--p-color);
    display: block;
    margin-bottom: 12px;
}

.blood-empty-state p {
    margin: 0;
    color: var(--p-color);
}

.blood-stats-strip {
    display: none;
}

.blood-stat-value:only-child,
.blood-stat .blood-stat-value {
    display: block;
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: var(--blood-color, #C62828);
}

.blood-change-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    white-space: nowrap;
}

.blood-change-location-btn:hover {
    border-color: var(--blood-color, #C62828);
    color: var(--blood-color, #C62828);
}

.blood-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 15px;
    color: var(--blood-color, #C62828);
}

.blood-info-btn:hover {
    background: var(--blood-color, #C62828);
    border-color: var(--blood-color, #C62828);
    color: var(--white-color);
}

.blood-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blood-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--p-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}

.blood-info-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.blood-info-list li i {
    color: var(--primary-color);
    margin-top: 2px;
}

.blood-compat-grid {
    display: flex;
    flex-direction: column;
}

.blood-compat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.blood-compat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

@media (max-width: 991.98px) {
    .blood-stat-item {
        flex: 1 1 50%;
        min-width: 0;
    }

    .blood-stat-item:nth-child(odd) {
        border-left: none;
    }

    .blood-stat-item:nth-child(n+3) {
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 767px) {
    .blood-hero {
        padding: 40px 0 72px;
    }

    .blood-hero-eyebrow {
        font-size: 10px;
        padding: 6px 12px;
        margin-bottom: 14px;
    }

    .blood-hero-title {
        font-size: 26px;
    }

    .blood-hero-subtitle {
        font-size: 13.5px;
        margin-bottom: 20px;
    }

    .blood-hero-btn {
        padding: 11px 18px;
        font-size: 13px;
    }

    .blood-search-card {
        padding: 18px;
    }

    .blood-search-card-title {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .blood-hero-heart {
        font-size: 80px;
        right: 4%;
        opacity: .5;
    }

    .blood-stats-panel {
        margin-top: -36px;
    }

    .blood-stat-item {
        flex: 1 1 100%;
        border-left: none !important;
        border-top: 1px solid var(--border-color);
    }

    .blood-stat-item:first-child {
        border-top: none;
    }

    .blood-requests-grid {
        grid-template-columns: 1fr;
    }

    .blood-card-hospital {
        font-size: 12.5px;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 575.98px) {
    .blood-hero {
        padding: 32px 0 56px;
    }

    .blood-hero-title {
        font-size: 22px;
    }

    .blood-hero-eyebrow {
        font-size: 9.5px;
        padding: 5px 11px;
    }

    .blood-hero-heart {
        font-size: 60px;
        right: 2%;
    }

    .blood-hero-actions {
        flex-direction: column;
    }

    .blood-hero-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 992px) {
    .blood-requests-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .blood-requests-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Unified button look & feel — every solid/primary CTA button on the public
   site gets the same "elevated" treatment: a soft resting shadow, a lift +
   deeper shadow on hover, and a settle-down on press. This is layered on top
   of each button class's own background/color rules defined above — it only
   adds shadow/motion, so per-button colors are untouched. Buttons embedded in
   an `overflow: hidden` group (the header's fused search bar) are excluded
   since a lift would just get clipped there.
   ========================================================================== */
.btn-search,
.jd-signin-btn,
.login-submit-btn,
.btn-contact-gradient,
.blood-hero-btn-solid,
.blood-search-submit-btn,
.preferences-nudge-btn,
.blood-donor-nudge-btn,
.cta-banner .btn-cta {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease;
}

.btn-search:hover,
.jd-signin-btn:hover,
.login-submit-btn:hover,
.btn-contact-gradient:hover,
.blood-hero-btn-solid:hover,
.blood-search-submit-btn:hover,
.preferences-nudge-btn:hover,
.blood-donor-nudge-btn:hover,
.cta-banner .btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

.btn-search:active,
.jd-signin-btn:active,
.login-submit-btn:active,
.btn-contact-gradient:active,
.blood-hero-btn-solid:active,
.blood-search-submit-btn:active,
.preferences-nudge-btn:active,
.blood-donor-nudge-btn:active,
.cta-banner .btn-cta:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .16);
}

/* Secondary / outline / ghost buttons stay flat by design — no shadow or
   lift, just a smooth color transition — so the elevated buttons above still
   read clearly as the primary action on any given screen. */
.btn-cancel-outline,
.blood-hero-btn-outline,
.location-use-gps-btn,
.blood-change-location-btn,
.blood-search-location-btn,
.blood-group-chip {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}

/* Small action-icon buttons (edit/pause/delete rows in the business "My
   Business" panel) get a lighter version of the same lift, so dense button
   rows feel consistent with the rest of the site without being overbearing. */
.service-list-actions .btn,
.ad-manage-actions .btn,
.js-sale-status-toggle,
.js-ad-status-toggle {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.service-list-actions .btn:hover,
.ad-manage-actions .btn:hover,
.js-sale-status-toggle:hover,
.js-ad-status-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
}

/* About Us page */
.about-hero {
    padding: 60px 0 50px;
    color: var(--white-color);
}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .15);
    color: var(--white-color);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.about-hero-title {
    color: var(--white-color);
    margin-bottom: 12px;
    /* Unstyled <h1> otherwise inherits the theme's raw --h1-font-size (62px) —
       far bigger than every other hero on the site (.search-hero h1 is 42px). */
    font-size: 42px;
}

.about-hero-subtitle {
    color: var(--white-color);
    opacity: .9;
    font-size: 16px;
    max-width: 560px;
}

.about-story-text p {
    font-size: 15px;
}

.about-mission-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    height: 100%;
}

.about-mission-card p {
    font-size: 15px;
}

.about-mission-icon {
    font-size: 30px;
    color: var(--primary-color);
    margin-bottom: 5px;
    display: block;
}

.about-credit-strip {
    text-align: center;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--border-color);
}

.about-credit-text {
    font-size: 13px;
    color: var(--p-color);
}

.about-credit-text strong {
    color: var(--dark-color);
}

@media (max-width: 767px) {
    .about-hero-title {
        font-size: 28px;
    }
}

.contact-method-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 30px 24px;
    height: 100%;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.contact-method-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
    border-color: transparent;
}

.contact-method-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.contact-method-icon-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.contact-method-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-weight-bold);
    color: var(--p-color);
    margin-bottom: 6px;
}

.contact-method-value {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 14px;
}

.contact-method-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-decoration: none;
}

.contact-method-cta:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

/* ==========================================================================
   "Download the App" home-page promo
   ========================================================================== */
.app-promo-section {
    padding: 30px 0 48px;
    background: var(--section-bg-color);
    overflow: hidden;
}

.app-promo-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.app-promo-eyebrow span {
    width: 28px;
    height: 2px;
    background: var(--secondary-color);
    display: inline-block;
}

.app-promo-title {
    font-size: 40px;
    line-height: 1.18;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 14px;
}

.app-promo-title span {
    color: var(--primary-color);
}

.app-promo-subtitle {
    font-size: 15px;
    line-height: 1.65;
    color: var(--p-color);
    max-width: 520px;
    margin-bottom: 26px;
}

.app-promo-feature-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.app-promo-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.app-promo-feature-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(11, 135, 125, .1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 4px 14px rgba(11, 135, 125, .08);
}

.app-promo-feature strong {
    display: block;
    color: var(--dark-color);
    font-size: 15px;
    margin-bottom: 2px;
}

.app-promo-feature span {
    font-size: 13px;
    color: var(--primary-color);
    line-height: 1.45;
}

.app-promo-download-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.app-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #111;
    color: var(--white-color);
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
    transition: transform .15s ease, box-shadow .15s ease;
}

.app-store-btn:hover {
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}

.app-store-btn i {
    font-size: 24px;
}

.app-store-btn span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: 0.65rem;
}

.app-store-btn small {
    font-size: 10px;
    opacity: .85;
}

.app-store-btn strong {
    font-size: 15px;
}

.app-promo-scan-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 8px;
    border-radius: var(--border-radius-medium);
    background: var(--white-color);
    border: 1px solid var(--border-color);
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}

.app-promo-scan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .1);
}

.app-promo-scan-qr {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    background: var(--white-color);
}

.app-promo-scan-qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-promo-scan-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.app-promo-scan-text strong {
    font-size: 14px;
    color: var(--dark-color);
}

.app-promo-scan-text span {
    font-size: 12px;
    color: var(--p-color);
}

/* Phone mockup */
.app-promo-phone-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 8px 24px;
}

.app-promo-phone {
    position: relative;
    width: 290px;
    background: #121417;
    border-radius: 42px;
    padding: 12px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .22);
}

.app-promo-phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 20px;
    background: #121417;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}

.app-promo-phone-screen {
    background: #f8fafb;
    border-radius: 32px;
    padding: 34px 14px 18px;
    min-height: 540px;
    overflow: hidden;
}

.app-promo-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--p-color);
}

.app-promo-search i {
    color: var(--primary-color);
}

.app-promo-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 14px;
}

.app-promo-location i {
    color: var(--primary-color);
}

.app-promo-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}

.app-promo-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 15px;
}

.app-promo-cat-labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 14px;
    text-align: center;
    font-size: 8px;
    color: var(--p-color);
    line-height: 1.2;
}

.app-promo-section-label {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 10px;
}

.app-promo-business-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
    margin-bottom: 10px;
}

.app-promo-business-thumb {
    width: 42px;
    height: 42px;
    border-radius: var(--border-radius-small);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    flex-shrink: 0;
}

.app-promo-business-thumb.is-alt {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.app-promo-business-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.app-promo-business-info strong {
    font-size: 12px;
    color: var(--dark-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-promo-business-rating {
    font-size: 10px;
    color: var(--p-color);
}

.app-promo-business-rating i {
    color: #f5a623;
}

.app-promo-business-meta {
    font-size: 9px;
    color: var(--p-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-promo-business-follow {
    color: #cbd5e1;
    font-size: 14px;
    flex-shrink: 0;
}

.app-promo-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white-color);
    border-radius: var(--border-radius-medium);
    padding: 10px 12px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .14);
    max-width: 210px;
    z-index: 3;
}

.app-promo-float-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(11, 135, 125, .12);
    color: var(--primary-color);
    font-size: 15px;
    flex-shrink: 0;
}

.app-promo-float-icon.is-success {
    background: rgba(34, 197, 94, .15);
    color: #16a34a;
}

.app-promo-float-icon.is-star {
    background: rgba(245, 166, 35, .18);
    color: #d97706;
}

.app-promo-float strong {
    display: block;
    font-size: 11px;
    color: var(--dark-color);
}

.app-promo-float span {
    font-size: 10px;
    color: var(--p-color);
}

.app-promo-float-1 {
    top: 28%;
    left: -36px;
}

.app-promo-float-2 {
    top: 8%;
    right: -28px;
}

.app-promo-float-3 {
    bottom: 10%;
    right: -24px;
}

.app-promo-trust {
    margin-top: 36px;
}

.app-promo-trust-heading {
    text-align: center;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary-color);
    margin-bottom: 14px;
}

.app-promo-trust-strip {
    display: flex;
    flex-wrap: wrap;
    background: var(--white-color);
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 28px rgba(11, 135, 125, .08);
    overflow: hidden;
}

.app-promo-trust-item {
    flex: 1 1 0;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-left: 1px solid var(--border-color);
}

.app-promo-trust-item:first-child {
    border-left: none;
}

.app-promo-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(11, 135, 125, .1);
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
}

.app-promo-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.app-promo-trust-text strong {
    font-size: 14px;
    color: var(--dark-color);
}

.app-promo-trust-text span {
    font-size: 12px;
    color: var(--p-color);
}

@media (max-width: 991.98px) {
    .app-promo-float {
        max-width: 170px;
    }

    .app-promo-float-1 {
        left: -12px;
    }

    .app-promo-float-2 {
        right: -8px;
    }

    .app-promo-float-3 {
        right: -6px;
    }

    .app-promo-trust-item {
        flex: 1 1 50%;
        min-width: 0;
    }

    .app-promo-trust-item:nth-child(odd) {
        border-left: none;
    }

    .app-promo-trust-item:nth-child(n+3) {
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 767.98px) {
    .app-promo-section {
        padding: 40px 0 32px;
    }

    .app-promo-title {
        font-size: 30px;
    }

    .app-promo-phone {
        width: 250px;
    }

    .app-promo-phone-screen {
        min-height: 480px;
    }

    .app-promo-float {
        display: none;
    }

    .app-promo-trust-item {
        flex: 1 1 100%;
        border-left: none !important;
        border-top: 1px solid var(--border-color);
    }

    .app-promo-trust-item:first-child {
        border-top: none;
    }
}

/* ==========================================================================
   Home Hero — boxed card with search, sits at the top of the 2-column
   homepage layout (main content + sidebar).
   ========================================================================== */
.home-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    border-radius: var(--border-radius-large);
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(120deg, var(--white-color) 0%, var(--section-bg-color) 100%);
    box-shadow: 0 10px 30px rgba(16, 72, 70, .08);
}

.home-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--white-color) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 75%);
    pointer-events: none;
}

.home-hero-title,
.home-hero-subtitle,
.home-hero-search,
.home-hero-popular {
    position: relative;
    z-index: 2;
}

.home-hero-title {
    font-size: 44px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--dark-color);
    margin-bottom: 18px;
}

.home-hero-title span {
    color: var(--primary-color);
}

.home-hero-subtitle {
    font-size: 16px;
    color: var(--p-color);
    max-width: 480px;
    margin-bottom: 28px;
}

.home-hero-search {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    max-width: 560px;
}

.home-hero-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 0;
    padding: 0 12px;
    color: var(--p-color);
}

.home-hero-search-field i {
    color: var(--primary-color);
}

.home-hero-search-field input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    height: 44px;
    font-size: 14px;
    background: transparent;
}

.home-hero-location-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    background: var(--section-bg-color);
    border-radius: var(--border-radius-small);
    padding: 0 14px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    max-width: 190px;
}

.home-hero-location-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-hero-location-btn i {
    color: var(--primary-color);
}

.home-hero-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    border: none;
    border-radius: var(--border-radius-small);
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    padding: 0 22px;
    transition: background-color .2s ease;
}

.home-hero-search-btn:hover {
    background: var(--secondary-color);
}

.home-hero-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--p-color);
}

.home-hero-popular a {
    padding: 5px 14px;
    border-radius: var(--border-radius-large);
    background: var(--white-color);
    border: 1px solid var(--border-color);
    color: var(--dark-color);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.home-hero-popular a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

@media (max-width: 991.98px) {
    .home-hero-card {
        padding: 20px 16px;
        min-height: auto;
        text-align: center;
    }

    .home-hero-title {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .home-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    .home-hero-search {
        margin: 0 auto;
    }

    .home-hero-popular {
        justify-content: center;
        margin-top: 14px;
    }
}

@media (max-width: 575.98px) {
    .home-hero-card {
        padding: 16px 14px;
    }

    .home-hero-title {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .home-hero-subtitle {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .home-hero-search {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .home-hero-search-field {
        flex: 1 1 auto;
        width: 100%;
    }

    .home-hero-location-btn,
    .home-hero-search-btn {
        max-width: none;
        justify-content: center;
        padding: 10px;
    }

    .home-hero-popular {
        gap: 8px;
        margin-top: 12px;
    }

    .home-hero-popular a {
        padding: 4px 12px;
        font-size: 12px;
    }
}

/* ==========================================================================
   Home feature icons row — 7-up strip under the hero.
   ========================================================================== */
.home-features-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 10px 10px;
    margin-top: 20px;
}

.home-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 120px;
    max-width: 150px;
    padding: 8px 7px;
    border-right: 1px solid var(--border-color);
}

.home-feature-item:last-child {
    border-right: none;
}

.home-feature-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--section-bg-color);
    color: var(--primary-color);
    font-size: 20px;
    margin-bottom: 10px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.home-feature-item:hover .home-feature-icon {
    background: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-3px);
}

.home-feature-item strong {
    font-size: 14px;
    color: var(--dark-color);
    margin-bottom: 4px;
}

.home-feature-item p {
    font-size: 12px;
    color: var(--p-color);
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 767.98px) {
    .home-features-card {
        display: none;
    }
}

/* ==========================================================================
   Category tile grid — single row of 5 bordered cards, matching the same
   border/hover treatment as .business-card (Top Rated Businesses) for a
   consistent card language across the homepage. No expand/collapse — the
   controller already caps this to 5 categories (ordered by sort_order).
   ========================================================================== */
.category-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 576px) {
    .category-tile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .category-tile-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) {
    .category-tile-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1200px) {
    .category-tile-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

.category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* padding: 18px 12px; */
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--border-color);
    background: var(--white-color);
    text-decoration: none;
    color: var(--dark-color);
    text-align: center;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.category-tile:hover {
    box-shadow: 0 20px 36px rgba(0, 0, 0, .12);
    transform: translateY(-4px);
    border-color: rgba(11, 135, 125, .25);
}

.category-tile-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-medium);
    object-fit: cover;
}

.category-tile-name {
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    line-height: 1.3;
}

@media (max-width: 767.98px) {
    .category-tile-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .category-tile-grid::-webkit-scrollbar {
        display: none;
    }

    .category-tile {
        flex: 0 0 90px;
        width: 90px;
        gap: 8px;
        scroll-snap-align: start;
    }

    .category-tile-name {
        font-size: 11px;
    }
}

/* ==========================================================================
   Home page "Top Rated Businesses" row — horizontal scroll on mobile
   instead of stacking full-width cards.
   ========================================================================== */
@media (max-width: 767.98px) {
    .home-top-rated-row {
        --bs-gutter-x: 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
        scrollbar-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .home-top-rated-row::-webkit-scrollbar {
        display: none;
    }

    .home-top-rated-row > .col {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }

    .home-top-rated-row .business-card .business-card-img {
        height: 130px;
    }

    .home-top-rated-row .business-card .business-card-body {
        padding: 12px 14px 14px;
    }

    .home-top-rated-row .business-card .business-card-name {
        font-size: 15px;
    }

    .home-top-rated-row .business-card .business-card-category,
    .home-top-rated-row .business-card .business-card-subcategory {
        font-size: 12px;
    }

    .home-top-rated-row .business-card .business-card-location {
        font-size: 12px;
    }

    .home-top-rated-row .business-card .business-card-hours {
        font-size: 12px;
    }
}

/* ==========================================================================
   Home promo grid — 3 cards (Exclusive Offers / Top Rated / Newly Joined)
   between the features card and the categories section.
   ========================================================================== */
.home-promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
    align-items: start;
}

@media (min-width: 768px) {
    .home-promo-grid {
        grid-template-columns: 1.45fr 1fr 1fr;
        align-items: stretch;
    }

    .home-promo-card {
        height: 100%;
    }
}

.home-promo-card {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    min-height: 160px;
    border-radius: 18px;
    padding: 16px 14px 8px 22px;
    overflow: hidden;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--dark-color);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .1);
    color: var(--dark-color);
}

.home-promo-card.is-dark {
    background-color: #085f58;
    background-image: var(--home-promo-bg), linear-gradient(135deg, #0b877d 0%, #085f58 100%);
    background-repeat: no-repeat;
    background-position: calc(100% + 8px) calc(100% - 6px), center;
    background-size: 180px auto, cover;
    border-color: transparent;
    color: var(--white-color);
    box-shadow: 0 14px 32px rgba(11, 135, 125, .28);
    padding: 16px 10px 10px 16px;
    min-height: 0;
    align-items: flex-start;
}

.home-promo-card.is-dark h3 {
    color: var(--white-color);
    margin-top: 0;
    margin-bottom: 6px;
}

.home-promo-card.is-dark .home-promo-card-body {
    flex: 0 1 auto;
    max-width: 62%;
    padding-right: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.home-promo-card.is-rated {
    background-color: #f6fbff;
    background-image: var(--home-promo-bg), linear-gradient(180deg, #e7f3fb 0%, #f6fbff 100%);
    background-repeat: no-repeat;
    background-position: calc(100% + 8px) calc(100% + 8px), center;
    background-size: 120px auto, cover;
    border-color: rgba(96, 165, 250, .22);
    padding: 16px 14px 10px 22px;
    min-height: 0;
    align-items: flex-start;
}

.home-promo-card.is-new {
    background-color: #f0fbf8;
    background-image: var(--home-promo-bg), linear-gradient(180deg, #dff5f1 0%, #f0fbf8 100%);
    background-repeat: no-repeat;
    background-position: calc(100% + 8px) calc(100% + 8px), center;
    background-size: 210px auto, cover;
    border-color: rgba(11, 135, 125, .18);
    padding: 16px 14px 10px 22px;
    min-height: 0;
    align-items: flex-start;
}

.home-promo-card-body {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
}

.home-promo-card.is-rated .home-promo-card-body,
.home-promo-card.is-new .home-promo-card-body,
.home-promo-card.is-dark .home-promo-card-body {
    justify-content: flex-start;
    flex: 0 1 auto;
}

.home-promo-card h3 {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 1.28;
    margin-bottom: 8px;
    color: inherit;
}

.home-promo-card.is-rated h3,
.home-promo-card.is-new h3 {
    color: #0a5850;
    margin-top: 0;
    margin-bottom: 6px;
}

.home-promo-card p {
    font-size: 13px;
    line-height: 1.5;
    max-width: 158px;
    color: inherit;
    opacity: .88;
    margin: 0;
}

.home-promo-card.is-rated p,
.home-promo-card.is-new p {
    color: #5f6b7a;
    opacity: 1;
}

.home-promo-card.is-dark p {
    color: rgba(255, 255, 255, .92);
    opacity: 1;
    max-width: none;
    margin: 0;
}

.home-promo-card.is-dark .home-promo-btn {
    margin-top: 6px;
    margin-bottom: 0;
    padding: 8px 18px 6px;
}

.home-promo-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 16px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--white-color);
    color: #0a5850;
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.home-promo-card-art {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    align-self: flex-end;
    width: 46%;
    max-width: 150px;
    margin-right: -8px;
    margin-bottom: -12px;
    pointer-events: none;
}

.home-promo-card-art img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 136px;
    object-fit: contain;
    object-position: bottom right;
}

.home-promo-card.is-dark .home-promo-card-art {
    width: 50%;
    max-width: 168px;
    margin-bottom: -16px;
}

.home-promo-card.is-dark .home-promo-card-art img {
    max-height: 148px;
}

.home-promo-art {
    position: absolute;
    right: 15px;
    bottom: -8px;
    font-size: 60px;
    color: rgba(11, 135, 125, .18);
}

.home-promo-card.is-dark .home-promo-art {
    color: rgba(255, 255, 255, .3);
}

@media (max-width: 767.98px) {
    .home-promo-card {
        min-height: 124px;
        padding: 14px 16px 8px;
    }

    .home-promo-card h3 {
        font-size: 15px;
    }

    .home-promo-card p {
        font-size: 12px;
    }

    .home-promo-card-art {
        max-width: 38%;
    }

    .home-promo-card-art img {
        max-height: 88px;
    }

    .home-promo-card.is-rated {
        background-size: 95px auto, cover;
        background-position: calc(100% + 6px) calc(100% + 6px), center;
    }

    .home-promo-card.is-dark {
        background-size: 150px auto, cover;
        background-position: calc(100% + 6px) calc(100% - 4px), center;
        min-height: 0;
        padding-bottom: 0;
    }

    .home-promo-card.is-dark .home-promo-btn {
        margin-bottom: 12px;
    }

    .home-promo-card.is-new {
        background-size: 170px auto, cover;
        background-position: calc(100% + 6px) calc(100% + 6px), center;
    }

    .sidebar-list-business-card {
        background-size: 170px auto, cover;
        background-position: calc(100% + 6px) calc(100% + 8px), center;
    }
}

@media (max-width: 380px) {
    .home-promo-card h3 {
        font-size: 14px;
    }

    .home-promo-card p {
        font-size: 11px;
    }

    .home-promo-btn {
        font-size: 12px;
        padding: 8px 16px;
    }
}

/* ==========================================================================
   Footer — brand callout, social links, newsletter (matches reference design).
   ========================================================================== */
.footer-callout-title {
    color: var(--white-color);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin-bottom: 10px;
}

.footer-social-links {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--white-color);
    transition: background-color .2s ease, color .2s ease;
}

.footer-social-links a:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.footer-newsletter-form {
    display: flex;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
}

.footer-newsletter-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: rgba(255, 255, 255, .08);
    color: var(--white-color);
    padding: 12px 14px;
    font-size: 13px;
}

.footer-newsletter-input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.footer-newsletter-input:focus {
    outline: none;
    background: rgba(255, 255, 255, .14);
}

.footer-newsletter-btn {
    border: none;
    background: var(--secondary-color);
    color: var(--white-color);
    padding: 0 18px;
    transition: background-color .2s ease;
}

.footer-newsletter-btn:hover {
    background: var(--primary-color);
}

/* ==========================================================================
   Header v2 — slim utility bar + main nav (logo/tagline, centered links,
   List Your Business CTA), matching the reference header design.
   ========================================================================== */
.topbar-utility {
    background: var(--primary-color);
    padding: 8px 0;
}

.topbar-utility .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.topbar-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    padding: 2px 0;
}

.topbar-location-btn:hover {
    color: var(--white-color);
}

.topbar-location-btn i.bi-chevron-down {
    font-size: 11px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-link {
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.topbar-link:hover {
    color: var(--white-color);
}

.topbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--white-color);
    font-size: 15px;
    background: rgba(255, 255, 255, .12);
    transition: background-color .15s ease;
}

.topbar-icon-btn:hover {
    background: rgba(255, 255, 255, .22);
    color: var(--white-color);
}

.topbar-icon-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 50%;
    background: #ff5c5c;
    color: var(--white-color);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--primary-color);
}

.topbar-avatar-link {
    display: inline-flex;
}

.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .5);
}

.topbar-login-btn {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid rgba(255, 255, 255, .7);
    color: var(--white-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    padding: 6px 18px;
    border-radius: var(--border-radius-large);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.topbar-login-btn:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--white-color);
    color: var(--white-color);
}

.main-bar-jd .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand-block-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-block-text .brand-name {
    font-weight: var(--font-weight-bold);
    font-size: 21px;
    color: var(--dark-color);
}

.brand-tagline {
    font-size: 11px;
    color: var(--p-color);
    white-space: nowrap;
}

.main-nav-toggle-btn {
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--dark-color);
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-small);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-nav-collapse {
    flex: 1;
    align-items: center;
    justify-content: center;
}

.main-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--border-radius-large);
    color: var(--dark-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.main-nav-link:hover {
    color: var(--primary-color);
    background: var(--section-bg-color);
}

.main-nav-link.is-active {
    background: var(--section-bg-color);
    color: var(--primary-color);
}

.main-nav-link.dropdown-toggle::after {
    margin-left: 2px;
}

.main-nav-dropdown-menu {
    min-width: 200px;
    padding: 8px 0;
    border: none;
    border-radius: var(--border-radius-small);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

@media (min-width: 992px) {
    /* Bootstrap's dropdown-menu is display:none until .show is toggled by the
       hover handlers in custom.js, which snaps it open/closed with no
       transition. Keeping it in the layout (invisible via opacity/visibility
       instead) lets the fade actually animate; Popper still positions it via
       its own inline transform, so we don't touch transform here to avoid
       fighting that. visibility:hidden also keeps its links out of the tab
       order while closed. */
    .main-nav-dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: opacity .16s ease, visibility .16s ease;
    }

    .main-nav-dropdown-menu.show {
        opacity: 1;
        visibility: visible;
    }
}

.main-nav-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--dark-color);
    transition: background-color .15s ease, color .15s ease;
}

.main-nav-dropdown-menu .dropdown-item i {
    font-size: 15px;
    color: var(--p-color);
    width: 16px;
    text-align: center;
}

.main-nav-dropdown-menu .dropdown-item:hover {
    background: var(--section-bg-color);
    color: var(--primary-color);
}

.main-nav-dropdown-menu .dropdown-item:hover i {
    color: var(--primary-color);
}

.btn-list-business {
    display: inline-flex;
    align-items: center;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    padding: 10px 22px;
    border-radius: var(--border-radius-small);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.btn-list-business:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

@media (max-width: 991.98px) {
    .topbar-links a:not(.d-md-inline) {
        display: none;
    }

    .main-bar-jd .container {
        flex-wrap: wrap;
    }

    .brand-tagline {
        display: none;
    }

    .main-nav-collapse {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .main-nav-links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 2px;
        padding: 12px 0;
    }

    .main-nav-link {
        border-radius: var(--border-radius-small);
        width: 100%;
    }

    .main-nav-dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none;
        border: 1px solid var(--border-color);
        margin: 4px 0 8px;
    }

    .btn-list-business.d-lg-none {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .topbar-location-btn span {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-logo-img {
        height: 34px;
    }

    .topbar-utility .container {
        gap: 8px;
    }

    .topbar-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
    }
}

@media (max-width: 575.98px) {
    .topbar-link {
        display: none;
    }

    .topbar-location-btn span {
        max-width: 90px;
    }

    .topbar-icon-btn,
    .topbar-avatar {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
}

/* ==========================================================================
   Compact section header — left-aligned title + right-aligned "View all"
   link, used in place of the old centered eyebrow/title/subtitle blocks.
   ========================================================================== */
.section-header-link {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap;
}

.section-header-link:hover {
    color: var(--secondary-color);
}

/* ==========================================================================
   Home page 2-column layout — main content + a persistent right sidebar
   (Near You, List Your Business, Exclusive Offers, Featured Businesses,
   App download), running the full height of the above-the-fold content.
   ========================================================================== */
.home-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
    padding: 24px 0;
}

.home-main {
    min-width: 0;
}

.home-page-section {
    margin-top: 28px;
}

.home-stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: var(--border-radius-medium);
    padding: 18px;
    margin-top: 28px;
}

@media (min-width: 576px) {
    .home-stats-bar {
        grid-template-columns: repeat(4, 1fr);
    }
}

.home-stat {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--border-radius-small);
}

.home-stat:last-child {
    border-right: none;
}

.home-stat strong {
    display: block;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
}

.home-stat strong i {
    color: var(--white-color);
    font-size: 22px;
    display: inline-block;
}

.home-stat span {
    font-size: 12px;
    color: var(--white-color);
}

@media (max-width: 575.98px) {
    .home-stats-bar {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 6px 20px;
    }

    .home-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
        padding: 14px 0;
    }

    .home-stat:last-child {
        border-bottom: none;
    }

    .home-stat strong {
        font-size: 26px;
    }

    .home-stat span {
        font-size: 13px;
    }
}

.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 20px;
    align-self: start;
    min-width: 0;
}

.sidebar-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
    min-width: 0;
}

.sidebar-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.sidebar-card-head h3 {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin: 0;
}

.sidebar-near-you-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.sidebar-near-you-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--dark-color);
    text-align: center;
}

.sidebar-near-you-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--section-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--primary-color);
    overflow: hidden;
    transition: background-color .15s ease, transform .15s ease;
}

.sidebar-near-you-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    padding: 7px;
}

.sidebar-near-you-item:hover .sidebar-near-you-icon {
    background: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-2px);
}

.sidebar-near-you-item:hover .sidebar-near-you-icon img {
    filter: brightness(0) invert(1);
}

.sidebar-near-you-item span:last-child {
    font-size: 10px;
    line-height: 1.2;
}

.sidebar-list-business-card {
    position: relative;
    overflow: hidden;
    min-height: 164px;
    padding: 16px 18px 4px;
    background-color: #f4fbfb;
    background-image: var(--home-promo-bg), linear-gradient(165deg, #e3f5f3 0%, #f4fbfb 52%, var(--white-color) 100%);
    background-repeat: no-repeat;
    background-position: calc(100% + 8px) calc(100% + 12px), center;
    background-size: 210px auto, cover;
    border-color: rgba(11, 135, 125, .14);
    text-align: left;
}

.sidebar-list-business-content {
    position: relative;
    z-index: 1;
    max-width: 68%;
    min-width: 0;
    padding-right: 8px;
}

.sidebar-list-business-card h3 {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: #0a5850;
    margin-bottom: 8px;
}

.sidebar-list-business-card p {
    font-size: 13px;
    color: #5f6b7a;
    margin-bottom: 18px;
    line-height: 1.5;
}

.sidebar-list-business-card .sidebar-card-btn {
    border-radius: 999px;
    padding: 10px 20px;
    box-shadow: 0 6px 16px rgba(11, 135, 125, .18);
}

.sidebar-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    padding: 9px 20px;
    border-radius: var(--border-radius-small);
    text-decoration: none;
    transition: background-color .15s ease;
}

.sidebar-card-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.sidebar-offer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    padding: 12px;
    text-decoration: none;
    color: var(--dark-color);
    margin-bottom: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sidebar-offer-item:last-child {
    margin-bottom: 0;
}

.sidebar-offer-item:hover {
    border-color: rgba(11, 135, 125, .3);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    color: var(--dark-color);
}

.sidebar-offer-item strong {
    display: block;
    font-size: 15px;
    color: var(--primary-color);
    margin-bottom: 2px;
}

.sidebar-offer-item h4 {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 2px;
}

.sidebar-offer-item p {
    font-size: 11px;
    color: var(--p-color);
    margin: 0;
}

.sidebar-offer-image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    background: var(--section-bg-color);
}

.sidebar-offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-featured-item {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--dark-color);
}

.sidebar-featured-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-featured-item:first-child {
    padding-top: 0;
}

.sidebar-featured-image {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    background: var(--section-bg-color);
}

.sidebar-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-featured-item h4 {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 2px;
}

.sidebar-featured-item p {
    font-size: 11px;
    color: var(--p-color);
    margin-bottom: 4px;
}

.sidebar-featured-star {
    font-size: 11px;
    color: #D99300;
    font-weight: var(--font-weight-bold);
}

.sidebar-blood-card {
    text-align: left;
    background: linear-gradient(160deg, rgba(198, 40, 40, .05) 0%, var(--white-color) 45%);
    border-color: rgba(198, 40, 40, .16);
}

.sidebar-blood-card .sidebar-card-head {
    margin-bottom: 12px;
}

.sidebar-blood-card .sidebar-card-head h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--blood-color, #C62828);
}

.sidebar-blood-card .sidebar-card-head h3 i {
    font-size: 14px;
}

.sidebar-blood-empty {
    font-size: 13px;
    color: var(--p-color);
    margin-bottom: 16px;
}

.sidebar-blood-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.sidebar-blood-item {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--dark-color);
    position: relative;
    padding: 9px 6px;
    margin: 0 -6px;
    border-radius: var(--border-radius-small);
    border-bottom: 1px dashed rgba(198, 40, 40, .14);
    transition: background-color .15s ease;
}

.sidebar-blood-list .sidebar-blood-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-blood-list .sidebar-blood-item:first-child {
    padding-top: 0;
}

.sidebar-blood-item:hover {
    background: rgba(198, 40, 40, .05);
    color: var(--dark-color);
}

.sidebar-blood-item-group {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(198, 40, 40, .09);
    color: var(--blood-color, #C62828);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    border: 1px solid rgba(198, 40, 40, .14);
}

.sidebar-blood-item-body {
    flex: 1;
    min-width: 0;
}

.sidebar-blood-item-body h4 {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-blood-item-body p {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--p-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-blood-item-urgent {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--blood-color, #C62828);
    background: rgba(198, 40, 40, .1);
    padding: 4px 8px;
    border-radius: 999px;
}

.sidebar-card-btn-blood {
    background: var(--blood-color, #C62828);
    width: 100%;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(198, 40, 40, .18);
}

.sidebar-card-btn-blood:hover {
    background: #8E1B1B;
}

.sidebar-app-card {
    background: linear-gradient(160deg, var(--section-bg-color) 0%, var(--white-color) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-app-card h3 {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    line-height: 1.3;
    margin-bottom: 6px;
}

.sidebar-app-card p {
    font-size: 12px;
    color: var(--p-color);
    margin-bottom: 12px;
}

.sidebar-app-icon {
    flex-shrink: 0;
    font-size: 46px;
    color: var(--primary-color);
    opacity: .8;
}

@media (max-width: 1199.98px) {
    .home-page-layout {
        grid-template-columns: 1fr;
    }

    .home-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .home-sidebar {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Blood Donation Requests — homepage teaser panel (bordered card with a
   tinted header bar and a plain grid of compact request cards).
   ========================================================================== */
.blood-request-panel {
    background: var(--white-color);
    border: 1px solid rgba(198, 40, 40, .16);
    border-radius: var(--border-radius-large);
    overflow: hidden;
}

.blood-request-panel-head {
    background: rgba(198, 40, 40, .05);
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.blood-request-panel-head h2 {
    font-size: 21px;
    font-weight: var(--font-weight-bold);
    color: var(--blood-color, #C62828);
    margin-bottom: 2px;
}

.blood-request-panel-head p {
    font-size: 13px;
    color: var(--p-color);
    margin: 0;
}

.btn-blood-view-all {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--blood-color, #C62828);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    padding: 10px 18px;
    border-radius: var(--border-radius-small);
    text-decoration: none;
    transition: background-color .15s ease;
}

.btn-blood-view-all:hover {
    background: #8E1F1F;
    color: var(--white-color);
}

.blood-request-panel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 16px;
}

@media (max-width: 991.98px) {
    .blood-request-panel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .blood-request-panel-grid {
        grid-template-columns: 1fr;
    }
}

.blood-request-mini-card {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(198, 40, 40, .12);
    border-radius: var(--border-radius-medium);
    padding: 15px;
    text-decoration: none;
    color: var(--dark-color);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    min-width: 0;
}

.blood-request-mini-card:hover {
    border-color: rgba(198, 40, 40, .3);
    box-shadow: 0 10px 24px rgba(198, 40, 40, .12);
    transform: translateY(-2px);
    color: var(--dark-color);
}

.blood-request-mini-group {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(198, 40, 40, .08);
    color: var(--blood-color, #C62828);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: 17px;
}

.blood-request-mini-body {
    min-width: 0;
}

.blood-request-mini-urgent {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    background: rgba(198, 40, 40, .1);
    color: var(--blood-color, #C62828);
    padding: 3px 8px;
    border-radius: var(--border-radius-large);
    margin-bottom: 4px;
}

.blood-request-mini-body h4 {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blood-request-mini-body p {
    font-size: 11px;
    color: var(--p-color);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Categories index page — every category with its subcategories, each
   subcategory linking straight into Search pre-filtered.
   ========================================================================== */
.categories-index-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    margin-top: 20px;
    padding: 0 14px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
}

.categories-index-search i {
    color: var(--primary-color);
}

.categories-index-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    height: 46px;
    font-size: 14px;
    background: transparent;
}

.categories-index-empty {
    margin-top: 24px;
    color: var(--p-color);
    text-align: center;
}

.categories-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.categories-index-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.categories-index-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, .08);
    transform: translateY(-3px);
    border-color: rgba(11, 135, 125, .25);
}

.categories-index-card-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    text-decoration: none;
    color: var(--dark-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}


.categories-index-card-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), #0b877d);
    box-shadow: 0 8px 16px rgba(11, 135, 125, .25);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.categories-index-card-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.categories-index-card-icon i {
    font-size: 20px;
    color: var(--white-color);
}

.categories-index-card-name {
    position: relative;
    z-index: 1;
    font-weight: var(--font-weight-bold);
    font-size: 15px;
}

.categories-index-subchips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
}

.categories-index-subchip {
    font-size: 12px;
    padding: 5px 11px;
    border-radius: var(--border-radius-large);
    background: var(--section-bg-color);
    color: var(--dark-color);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.categories-index-subchip:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.know-category-link {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--primary-color);
    text-decoration: none;
}

.know-category-link:hover {
    text-decoration: underline;
}

.know-category-list {
    max-height: 360px;
    overflow-y: auto;
    margin-top: 16px;
}

.know-category-item {
    border-bottom: 1px solid var(--border-color);
    padding: 8px 0;
}

.know-category-item:last-child {
    border-bottom: none;
}

.know-category-name {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 6px 4px;
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    color: var(--dark-color);
    border-radius: var(--border-radius-medium);
}

.know-category-name:hover {
    background: var(--section-bg-color);
    color: var(--primary-color);
}

.know-category-name i {
    color: var(--primary-color);
}

.know-category-subchips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 4px 4px 28px;
}

.know-category-subchip {
    font-size: 12px;
    padding: 5px 11px;
    border: none;
    border-radius: var(--border-radius-large);
    background: var(--section-bg-color);
    color: var(--dark-color);
    transition: background-color .15s ease, color .15s ease;
}

.know-category-subchip:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.know-category-empty {
    margin-top: 20px;
    text-align: center;
}

/* Business detail page — Overview tab content grouped into distinct card panels
   instead of an undifferentiated wall of text/sections. */
.business-overview-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    margin-bottom: 20px;
}

.business-overview-card .business-detail-description {
    margin-top: 0;
}

/* Business detail page — banner (business_gallery_image) with the business's
   profile image (business_image) overlapping its bottom-left corner. */
.business-banner-wrap {
    position: relative;
    width: 100%;
    height: 280px;
    background: var(--section-bg-color);
}

.business-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-banner-avatar-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    display: flex;
    pointer-events: none;
}

.business-banner-avatar {
    width: 110px;
    height: 110px;
    border-radius: var(--border-radius-medium);
    object-fit: cover;
    border: 4px solid var(--white-color);
    background: var(--white-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    pointer-events: auto;
}

@media (max-width: 991.98px) {
    .business-banner-wrap {
        height: 160px;
    }
}

@media (max-width: 575.98px) {
    .business-banner-wrap {
        height: 120px;
    }

    .business-banner-avatar-row {
        bottom: -32px;
    }

    .business-banner-avatar {
        width: 84px;
        height: 84px;
        border-width: 3px;
    }
}

/* Business detail page — header block (name, meta row, action pills) */
.business-detail-header-name {
    font-size: 26px;
    color: var(--dark-color);
    letter-spacing: normal;
    margin-bottom: 0;
}

.business-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(25, 135, 84, .1);
    color: #198754;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    padding: 4px 12px;
    border-radius: var(--border-radius-large);
}

.business-detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--p-color);
    font-size: 14px;
}

.business-detail-meta-dot {
    color: var(--border-color);
}

.business-detail-meta-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

.business-detail-meta-rating i {
    color: #ffb400;
}

.business-top-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--secondary-color);
    font-weight: var(--font-weight-bold);
    font-size: 13px;
}

.business-detail-meta-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--p-color);
    font-size: 14px;
    text-decoration: underline;
}

.business-detail-meta-link:hover {
    color: var(--primary-color);
}

.business-detail-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.business-detail-actions-left,
.business-detail-actions-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.business-followers-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--p-color);
}

.business-action-pill.is-following {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(11, 135, 125, .06);
}

.business-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    color: var(--dark-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    padding: 9px 16px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.business-action-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(11, 135, 125, .06);
}

.business-action-pill i {
    font-size: 14px;
}

.business-suggest-edit-link {
    color: var(--p-color);
    font-size: 13px;
    text-decoration: underline;
}

.business-suggest-edit-link:hover {
    color: var(--primary-color);
}

/* Business detail page — compact map card in the right sidebar */
.business-map-sidebar-card {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

.business-map-sidebar-address {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--p-color);
    border-top: 1px solid var(--border-color);
}

.business-map-sidebar-address i {
    color: var(--primary-color);
    margin-top: 2px;
}
.discover_bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    object-fit: contain;
    object-position: right center;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .discover_bg {
        display: none;
    }
}
.dropdown-menu .dropdown-item {
    font-size: 14px;
}

/* Business registration pending / success screen */
.register-pending-section {
    position: relative;
    padding: 56px 0 72px;
    min-height: calc(100vh - 250px);
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 10% 14%, rgba(11, 135, 125, 0.1) 0%, transparent 38%),
        radial-gradient(circle at 90% 86%, rgba(253, 99, 1, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #f7fbfb 0%, #f3f8f8 100%);
    overflow: hidden;
}

.register-pending-section::before,
.register-pending-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.register-pending-section::before {
    width: 220px;
    height: 220px;
    top: 8%;
    left: 4%;
    border: 2px dashed rgba(11, 135, 125, 0.12);
}

.register-pending-section::after {
    width: 140px;
    height: 140px;
    right: 6%;
    bottom: 10%;
    background: radial-gradient(circle, rgba(253, 99, 1, 0.12) 0%, transparent 70%);
}

.register-pending-section > .container {
    width: 100%;
}

.register-pending-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 2.75rem 2.5rem 2.5rem;
    text-align: center;
    background: var(--white-color);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.register-pending-icon-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem;
}

.register-pending-icon-ring {
    position: absolute;
    inset: -10px;
    border: 2px dashed rgba(11, 135, 125, 0.28);
    border-radius: 50%;
}

.register-pending-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-size: 2.35rem;
    line-height: 1;
    box-shadow: 0 12px 28px rgba(11, 135, 125, 0.28);
}

.register-pending-confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.register-pending-confetti.is-1 {
    top: 4px;
    left: 8px;
    background: #f59e0b;
}

.register-pending-confetti.is-2 {
    top: 0;
    right: 18px;
    background: #3b82f6;
}

.register-pending-confetti.is-3 {
    bottom: 10px;
    left: 0;
    background: #ec4899;
}

.register-pending-confetti.is-4 {
    bottom: 0;
    right: 8px;
    background: #8b5cf6;
}

.register-pending-confetti.is-5 {
    top: 50%;
    right: -4px;
    width: 6px;
    height: 6px;
    background: #22c55e;
}

.register-pending-title {
    margin: 0 0 0.85rem;
    color: var(--dark-color);
    font-size: clamp(1.65rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
}

.register-pending-lead {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.65;
}

.register-pending-lead strong {
    color: var(--primary-color);
    font-weight: 800;
}

.register-pending-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(11, 135, 125, 0.06) 0%, rgba(253, 99, 1, 0.04) 100%);
    border: 1px solid rgba(11, 135, 125, 0.1);
}

.register-pending-step {
    padding: 0.35rem 0.5rem;
}

.register-pending-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.65rem;
    border-radius: 50%;
    background: rgba(11, 135, 125, 0.12);
    color: var(--primary-color);
    font-size: 1.1rem;
}

.register-pending-step h3 {
    margin: 0 0 0.35rem;
    color: var(--dark-color);
    font-size: 0.95rem;
    font-weight: 800;
}

.register-pending-step p {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.5;
}

.register-pending-actions {
    display: flex;
    justify-content: center;
}

.register-pending-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 52px;
    padding: 0 1.65rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-color);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(11, 135, 125, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.register-pending-btn:hover {
    color: var(--white-color);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(11, 135, 125, 0.28);
}

.register-pending-btn i {
    font-size: 1.1rem;
}

@media (max-width: 767.98px) {
    .register-pending-section {
        padding: 36px 0 48px;
    }

    .register-pending-card {
        padding: 2rem 1.25rem 1.75rem;
        border-radius: 20px;
    }

    .register-pending-steps {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .register-pending-step {
        display: grid;
        grid-template-columns: 2.5rem 1fr;
        column-gap: 0.85rem;
        align-items: start;
    }

    .register-pending-step-icon {
        grid-row: span 2;
        margin-bottom: 0;
    }

    .register-pending-btn {
        width: 100%;
    }
}