
/* ================================================================
   MTAA FRONTEND V2 — HOMEPAGE POLISH
   Loaded last so it safely layers over the existing styles.
================================================================ */

:root {
    --mtaa-green: #198754;
    --mtaa-green-dark: #116b43;
    --mtaa-ink: #10251b;
    --mtaa-muted: #64748b;
    --mtaa-surface: #ffffff;
    --mtaa-soft: #f5faf7;
    --mtaa-line: rgba(15, 23, 42, .08);
    --mtaa-shadow: 0 16px 45px rgba(15, 23, 42, .08);
    --mtaa-shadow-hover: 0 24px 55px rgba(15, 23, 42, .13);
}

/* ---------- Global public-page polish ---------- */

body {
    background: #f8faf9;
    color: var(--mtaa-ink);
}

.navbar {
    min-height: 76px;
    border-bottom: 1px solid rgba(25, 135, 84, .08) !important;
    box-shadow: 0 6px 25px rgba(15, 23, 42, .055) !important;
}

.navbar .container {
    min-height: 76px;
}

.navbar-brand {
    gap: 10px;
    font-size: 1.42rem;
}

.navbar-brand img {
    height: 40px !important;
}

.navbar .nav-link {
    font-weight: 650;
}

.navbar .btn-primary {
    border: 0;
    background: var(--mtaa-green);
    box-shadow: 0 8px 20px rgba(25, 135, 84, .16);
}

.navbar .btn-primary:hover {
    background: var(--mtaa-green-dark);
    transform: translateY(-1px);
}

/* ---------- Hero ---------- */

.hero {
    padding: 122px 0 94px;
    background:
        radial-gradient(circle at 12% 18%, rgba(32, 201, 151, .30), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(255, 193, 7, .17), transparent 24%),
        linear-gradient(135deg, #083c28 0%, #0f5132 48%, #198754 100%);
}

.hero-overlay {
    background:
        radial-gradient(circle at 75% 70%, rgba(255,255,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.10));
}

.hero-content {
    max-width: 1040px;
}

.hero-tagline {
    padding: 8px 15px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    letter-spacing: .01em;
}

.hero-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 2px;
    padding: 8px 13px 8px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
}

.hero-location-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #ffe082;
}

.hero-location-chip small,
.hero-location-chip strong {
    display: block;
    line-height: 1.1;
}

.hero-location-chip small {
    font-size: 10px;
    opacity: .75;
    margin-bottom: 3px;
}

.hero-location-chip strong {
    font-size: 13px;
}

.hero-location-chevron {
    margin-left: 3px;
    font-size: 10px;
    opacity: .65;
}

.hero h1 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    font-size: clamp(2.45rem, 5vw, 4.35rem);
    letter-spacing: -.045em;
    line-height: 1.02;
    text-shadow: 0 5px 30px rgba(0,0,0,.12);
}

.hero h1 .text-warning {
    color: #ffe082 !important;
}

.hero-subtitle {
    max-width: 690px;
    margin-bottom: 30px;
    color: rgba(255,255,255,.88);
    font-size: 17px;
}

/* ---------- Search ---------- */

.hero-search {
    width: min(960px, 100%);
    padding: 7px;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 22px 60px rgba(0,0,0,.23);
}

.hero-search-input input {
    font-size: 15px;
}

.hero-search-category {
    border-left-color: #e7ece9;
}

.hero-search-button {
    min-width: 124px;
    background: var(--mtaa-green) !important;
    box-shadow: 0 8px 20px rgba(25,135,84,.22);
}

.hero-search-button:hover {
    background: var(--mtaa-green-dark) !important;
    transform: translateY(-1px);
}

/* ---------- Popular searches ---------- */

.popular-searches {
    gap: 8px;
    margin-top: 17px !important;
}

.popular-searches span {
    margin-right: 4px;
    opacity: .82;
}

.popular-searches a {
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: 12px;
    transition: .2s ease;
}

.popular-searches a:hover {
    background: rgba(255,255,255,.18);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ---------- Hero stats ---------- */

.hero-stats {
    margin-top: 42px;
    gap: 0;
    width: min(760px, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.14);
}

.hero-stat {
    flex: 1 1 150px;
    position: relative;
    padding: 0 22px;
}

.hero-stat + .hero-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 1px;
    height: 35px;
    background: rgba(255,255,255,.16);
}

.hero-stat strong {
    font-size: 29px;
    letter-spacing: -.02em;
}

.hero-stat span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .70;
}

/* ---------- Sections ---------- */

.category-section,
.trending-section,
.business-week-section,
section.py-5 {
    position: relative;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e9f7ef;
    color: var(--mtaa-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.category-section {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
    background: #fff;
}

.category-section h2,
.trending-section h2 {
    color: var(--mtaa-ink);
    letter-spacing: -.035em;
}

.category-section .lead,
.trending-section .lead {
    font-size: 15px;
}

/* ---------- Category cards ---------- */

.category-section .row {
    row-gap: 20px !important;
}

.category-card {
    position: relative;
    display: block;
    min-height: 205px;
    padding: 28px 24px 23px;
    background: #fff;
    border: 1px solid var(--mtaa-line);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(15,23,42,.045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.category-card:hover {
    transform: translateY(-6px);
    border-color: rgba(25,135,84,.20);
    box-shadow: var(--mtaa-shadow-hover);
}

.category-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 16px;
    background: #edf9f2;
    color: var(--mtaa-green);
    font-size: 21px;
    transition: transform .25s ease;
}

.category-card:hover .category-icon {
    transform: scale(1.06) rotate(-2deg);
}

.category-card h4 {
    margin-bottom: 7px;
    color: var(--mtaa-ink);
    font-size: 17px;
    font-weight: 800;
}

.category-card p {
    margin-bottom: 18px;
    color: var(--mtaa-muted);
    font-size: 12px;
}

.category-link {
    color: var(--mtaa-green);
    font-size: 12px;
    font-weight: 800;
}

/* ---------- Nearby / generic section ---------- */

.trending-section,
.business-week-section {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
}

.trending-section {
    background: #f8faf9;
}

/* ---------- Business cards ---------- */

.business-card,
.business-card-wrapper {
    transition: transform .25s ease, box-shadow .25s ease;
}

.business-card:hover,
.business-card-wrapper:hover {
    transform: translateY(-5px);
}

/* ---------- Footer ---------- */

footer.bg-dark {
    background: #09251a !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    .hero {
        padding: 94px 0 70px;
    }

    .hero h1 {
        font-size: clamp(2.25rem, 10vw, 3.1rem);
        letter-spacing: -.04em;
    }

    .hero-subtitle {
        font-size: 15px;
    }

    .hero-location-chip {
        margin-top: 12px;
    }

    .hero-stats {
        margin-top: 32px;
        padding-top: 18px;
    }

    .hero-stat {
        flex-basis: 50%;
        padding: 8px 10px;
    }

    .hero-stat + .hero-stat::before {
        display: none;
    }

    .hero-stat strong {
        font-size: 25px;
    }

    .category-section,
    .trending-section,
    .business-week-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .category-card {
        min-height: 180px;
        padding: 22px 20px;
    }
}

@media (max-width: 575px) {
    .navbar,
    .navbar .container {
        min-height: 64px;
    }

    .navbar-brand {
        font-size: 1.25rem;
    }

    .hero {
        padding-top: 82px;
    }

    .hero-search {
        border-radius: 22px;
    }

    .popular-searches {
        justify-content: flex-start;
        text-align: left;
    }

    .popular-searches span {
        width: 100%;
    }
}

/* ================================================================
   SEARCH RESULTS — MARKETPLACE / DIRECTORY EXPERIENCE
================================================================ */
.search-page { background: #f6f8f7; min-height: 70vh; }
.search-results-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 0 42px;
    background: linear-gradient(135deg, #073b27 0%, #0e5b3a 58%, #198754 100%);
    color: #fff;
}
.search-results-hero::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; right:-130px; top:-210px; background:rgba(255,255,255,.07); }
.search-results-hero::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; left:-140px; bottom:-170px; background:rgba(32,201,151,.12); }
.search-results-hero-inner { position:relative; z-index:1; }
.search-breadcrumb { display:flex; gap:9px; align-items:center; font-size:12px; color:rgba(255,255,255,.66); margin-bottom:25px; }
.search-breadcrumb a { color:#fff; text-decoration:none; }
.search-breadcrumb i { font-size:9px; }
.search-heading-row h1 { margin:0 0 8px; font-size:clamp(1.8rem,3.5vw,2.7rem); font-weight:800; letter-spacing:-.04em; }
.search-heading-row p { margin:0; color:rgba(255,255,255,.76); }
.search-eyebrow { display:inline-flex; gap:7px; align-items:center; margin-bottom:10px; padding:6px 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.08); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.results-searchbar { display:flex; align-items:center; gap:6px; margin-top:27px; padding:6px; background:#fff; border:1px solid rgba(255,255,255,.55); border-radius:16px; box-shadow:0 18px 45px rgba(0,0,0,.18); }
.results-search-field { display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding:0 14px; color:#94a3b8; }
.results-search-field input { width:100%; border:0; outline:0; background:transparent; color:#10251b; font-size:14px; padding:13px 0; }
.results-location-field { display:flex; align-items:center; gap:8px; min-width:170px; padding:0 16px; border-left:1px solid #e8eeeb; color:#52645b; font-size:13px; font-weight:600; }
.results-location-field i { color:#198754; }
.results-searchbar button { border:0; border-radius:11px; padding:12px 21px; background:#198754; color:#fff; font-weight:700; white-space:nowrap; transition:.2s ease; }
.results-searchbar button:hover { background:#116b43; transform:translateY(-1px); }
.search-query-pills { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:13px; font-size:12px; color:rgba(255,255,255,.65); }
.search-query-pills strong { color:#fff; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.10); }
.search-query-pills .understood { opacity:.8; }
.search-results-section { padding:30px 0 80px; }
.search-location-banner { display:flex; align-items:center; gap:13px; padding:14px 17px; margin-bottom:24px; border:1px solid rgba(25,135,84,.14); border-radius:14px; background:#effaf4; color:#174d35; }
.search-location-banner.search-location-warning { background:#fffaf0; border-color:#f4dfac; color:#684d13; }
.banner-icon { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:11px; background:rgba(25,135,84,.10); color:#198754; font-size:18px; }
.search-location-warning .banner-icon { background:#fff0c9; color:#b77900; }
.banner-copy { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.banner-copy strong { font-size:13px; }
.banner-copy span { font-size:12px; color:#6b7b72; }
.search-location-warning .banner-copy span { color:#806d42; }
.location-allow-button { border:0; border-radius:9px; padding:9px 14px; background:#198754; color:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
.location-active { font-size:12px; font-weight:700; color:#198754; white-space:nowrap; }
.results-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:19px; }
.results-count-block { display:flex; align-items:center; gap:12px; }
.results-count { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:#e5f5ec; color:#147344; font-size:16px; font-weight:800; }
.results-count-block h2 { margin:0; font-size:17px; font-weight:800; color:#10251b; }
.results-count-block p { margin:2px 0 0; font-size:12px; color:#7b8b83; }
.results-toolbar-actions { display:flex; align-items:center; gap:7px; }
.nearby-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:999px; background:#fff; border:1px solid #e1e9e4; color:#39745a; font-size:11px; font-weight:700; }
.view-toggle { width:34px; height:34px; display:grid; place-items:center; border:1px solid #dfe7e2; border-radius:8px; background:#fff; color:#7a8982; }
.view-toggle.active { background:#eaf7ef; color:#198754; border-color:#bfe3cd; }
.search-result-list { display:grid; grid-template-columns:1fr; gap:14px; }
.directory-result-card { display:grid; grid-template-columns:285px 1fr; min-height:245px; overflow:hidden; background:#fff; border:1px solid #e1e8e4; border-radius:17px; box-shadow:0 5px 18px rgba(15,23,42,.045); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.directory-result-card:hover { transform:translateY(-2px); border-color:#c9ddd1; box-shadow:0 14px 32px rgba(15,23,42,.09); }
.result-card-image { position:relative; display:block; min-height:245px; overflow:hidden; background:#e8eeea; text-decoration:none; }
.result-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.directory-result-card:hover .result-card-image img { transform:scale(1.035); }
.result-image-gradient { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.25)); pointer-events:none; }
.result-image-placeholder { width:100%; height:100%; display:grid; place-items:center; color:#7f9187; font-size:42px; background:linear-gradient(135deg,#eaf2ed,#dfeae3); }
.result-badge,.result-verified { position:absolute; top:13px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:8px; font-size:10px; font-weight:800; color:#fff; }
.result-featured { left:13px; background:#d99000; }
.result-verified { right:13px; background:#16804d; }
.result-card-content { min-width:0; display:flex; flex-direction:column; padding:20px 23px 18px; }
.result-card-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.result-category-label { color:#718078; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.result-distance { display:inline-flex; align-items:center; gap:4px; color:#198754; font-size:11px; font-weight:700; white-space:nowrap; }
.result-business-name { margin:0 0 7px; font-size:20px; line-height:1.25; font-weight:800; letter-spacing:-.02em; }
.result-business-name a { color:#10251b; text-decoration:none; }
.result-business-name a:hover { color:#198754; }
.result-rating-row { display:flex; align-items:center; gap:5px; margin-bottom:9px; font-size:12px; color:#27382f; }
.result-stars { color:#f2a900; display:inline-flex; gap:1px; font-size:13px; }
.result-review-count { color:#829087; }
.result-location { display:flex; align-items:flex-start; gap:7px; color:#65756d; font-size:12px; }
.result-location i { color:#198754; margin-top:1px; }
.result-description { max-width:650px; margin:9px 0 0; color:#738179; font-size:12px; line-height:1.55; }
.result-ai-match { display:inline-flex; align-items:center; gap:6px; width:max-content; margin-top:9px; padding:5px 8px; border-radius:7px; background:#eef8f2; color:#197346; font-size:10px; font-weight:700; }
.result-ai-match.related { background:#f4f5f5; color:#697770; }
.result-card-actions { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:13px; }
.result-view-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:9px 15px; border-radius:9px; background:#198754; color:#fff; text-decoration:none; font-size:12px; font-weight:700; transition:.2s ease; }
.result-view-btn:hover { background:#116b43; color:#fff; transform:translateY(-1px); }
.result-icon-btn { width:38px; height:38px; display:grid; place-items:center; border:1px solid #dce6e0; border-radius:9px; color:#198754; background:#fff; text-decoration:none; }
.result-icon-btn:hover { background:#eef8f2; color:#116b43; }
.search-empty-state { padding:62px 20px; text-align:center; background:#fff; border:1px dashed #ccd9d1; border-radius:18px; }
.empty-icon { width:64px; height:64px; margin:0 auto 17px; display:grid; place-items:center; border-radius:18px; background:#edf7f1; color:#198754; font-size:25px; }
.search-empty-state h2 { margin:0 0 7px; font-size:21px; font-weight:800; color:#10251b; }
.search-empty-state p { max-width:500px; margin:0 auto; color:#77857e; font-size:13px; }
.empty-suggestions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:20px; }
.empty-suggestions a { padding:8px 12px; border:1px solid #dce7e0; border-radius:999px; color:#39745a; background:#fff; text-decoration:none; font-size:11px; font-weight:700; }
.empty-suggestions a:hover { background:#eef8f2; }

@media (max-width: 767px) {
    .search-results-hero { padding:25px 0 28px; }
    .search-heading-row h1 { font-size:1.8rem; }
    .results-searchbar { flex-wrap:wrap; border-radius:14px; }
    .results-search-field { flex:1 1 100%; }
    .results-location-field { flex:1; min-width:0; border-left:0; border-top:1px solid #e8eeeb; padding:10px 14px 6px; }
    .results-searchbar button { flex:0 0 auto; }
    .search-query-pills { font-size:11px; }
    .search-results-section { padding-top:22px; }
    .search-location-banner { align-items:flex-start; flex-wrap:wrap; }
    .banner-copy { flex:1 1 calc(100% - 60px); }
    .location-allow-button { margin-left:53px; }
    .location-active { margin-left:53px; }
    .results-toolbar { align-items:flex-start; }
    .nearby-chip { display:none; }
    .directory-result-card { grid-template-columns:1fr; min-height:0; }
    .result-card-image { min-height:190px; aspect-ratio:16/9; }
    .result-card-content { padding:16px; }
    .result-business-name { font-size:18px; }
    .result-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .results-toolbar-actions .view-toggle { display:none; }
}
