/* ==========================================================================
   MeuVizinho Web — Design System
   Espelha fielmente o app Flutter (br.app.meuvizinho)
   Mobile-first / PWA-ready
   ========================================================================== */

:root {
    --primary:        #25D366;
    --primary-dark:   #1da851;
    --primary-light:  #e8f5e9;
    --bg:             #F5F5F5;
    --card-bg:        #FFFFFF;
    --text:           #1A1A1A;
    --text-muted:     #9E9E9E;
    --border:         #E8E8E8;
    --shadow-sm:      0 2px 6px rgba(0,0,0,.10);
    --shadow-md:      0 4px 14px rgba(0,0,0,.13);
    --radius:         14px;
    --radius-sm:      8px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; }
img { display: block; }

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.app-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.header-top {
    background: var(--primary);
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    text-decoration: none;
}
.logo-icon { font-size: 20px; }
.logo-text  { font-size: 18px; font-weight: 700; color: #fff; line-height: 1; }

.search-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.search-input {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 20px;
    padding: 0 42px 0 18px;
    font-size: 14px;
    background: rgba(255,255,255,.22);
    color: #fff;
    outline: none;
    transition: background .2s;
}
.search-input::placeholder  { color: rgba(255,255,255,.75); }
.search-input:focus         { background: rgba(255,255,255,.32); }
.search-icon {
    position: absolute;
    right: 14px;
    width: 18px; height: 18px;
    stroke: rgba(255,255,255,.8);
    pointer-events: none;
}

.localizacao-row {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.loc-item { flex: 1; min-width: 0; }
.loc-select {
    width: 100%;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 28px 0 10px;
    font-size: 13px;
    color: var(--text);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239E9E9E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    cursor: pointer;
}
.loc-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.loc-fixed {
    display: flex;
    align-items: center;
    height: 34px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loc-loading { font-size: 12px; color: var(--text-muted); height: 34px; display: flex; align-items: center; }

.filtros-row {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filtros-row::-webkit-scrollbar { display: none; }
.filtro-btn {
    flex-shrink: 0;
    height: 34px;
    padding: 0 16px;
    border: 1.5px solid var(--border);
    border-radius: 17px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
    user-select: none;
}
.filtro-btn.ativo { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.filtro-btn:not(.ativo):hover { border-color: var(--primary); color: var(--primary); }

/* ==========================================================================
   MAIN / ESTADOS
   ========================================================================== */
.app-main {
    flex: 1;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
}
.state-box p { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.state-sub   { font-size: 13px !important; color: #BDBDBD !important; }
.state-icon  { font-size: 52px; opacity: .45; }

.spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-retry {
    padding: 10px 28px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    transition: background .15s;
}
.btn-retry:hover { background: var(--primary-dark); }

.section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    padding: 16px 16px 8px;
}

/* ==========================================================================
   DESTAQUES
   ========================================================================== */
.destaques-section {
    background: #fff;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.destaques-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.destaques-carousel::-webkit-scrollbar { display: none; }

.destaque-card {
    flex-shrink: 0;
    width: 150px;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.destaque-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.destaque-card:active { transform: scale(.97); }

.destaque-img-wrap {
    position: relative;
    width: 100%;
    height: 110px;
    background: #F0F0F0;
    overflow: hidden;
}
.destaque-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.destaque-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; background: #F0F0F0;
}

.badge-patrocinado {
    position: absolute;
    top: 6px; left: 6px;
    background: #FFB800;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
    pointer-events: none;
}

.destaque-info { padding: 8px; }
.destaque-nome {
    font-size: 13px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.destaque-bairro {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   LISTA DE ANÚNCIOS
   ========================================================================== */
.anuncios-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px;
}

.anuncio-card {
    display: flex;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    color: inherit;
}
.anuncio-card:hover  { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.anuncio-card:active { transform: scale(.99); }

.card-img-wrap {
    flex-shrink: 0;
    width: 110px;
    min-height: 90px;
    background: #F0F0F0;
    overflow: hidden;
}
.card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    min-height: 90px;
}
.card-img-placeholder {
    width: 110px; min-height: 90px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; background: #F0F0F0;
}

.card-info {
    flex: 1;
    min-width: 0;
    padding: 12px 14px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.card-nome {
    font-size: 15px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-tipo-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(37,211,102,.15);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 600;
    align-self: flex-start;
}
.card-categoria { font-size: 12px; color: var(--primary-dark); font-weight: 600; }
.card-local, .card-endereco {
    font-size: 12px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.btn-load-more {
    padding: 12px 36px;
    background: #fff;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-load-more:hover { background: var(--primary); color: #fff; }

/* ==========================================================================
   DETALHE
   ========================================================================== */
.detalhe-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
}

.detalhe-hero {
    position: relative;
    width: 100%;
    height: 280px;
    background: #E0E0E0;
    overflow: hidden;
}
.detalhe-hero img { width: 100%; height: 100%; object-fit: cover; }
.detalhe-hero.sem-foto {
    display: flex; align-items: center; justify-content: center;
    font-size: 72px; color: #ccc;
}

.btn-back {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: 14px;
    width: 40px; height: 40px;
    background: rgba(0,0,0,.45);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.btn-back:hover { background: rgba(0,0,0,.65); }
.btn-back svg   { stroke: #fff; }

.detalhe-body {
    background: #fff;
    padding: 20px 18px;
    margin-bottom: 82px;
}

/* Badges — tipo, categoria, subCategoria */
.detalhe-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.detalhe-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(37,211,102,.12);
    color: var(--primary-dark);
    letter-spacing: .2px;
}

.detalhe-nome { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.detalhe-categoria { font-size: 14px; color: var(--text-muted); }
.detalhe-divider { height: 1px; background: var(--border); margin: 14px 0; }
.detalhe-info-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.detalhe-info-icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.detalhe-info-text { font-size: 14px; color: var(--text); line-height: 1.5; }
.detalhe-desc-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.detalhe-desc { font-size: 14px; color: #444; line-height: 1.7; white-space: pre-wrap; }

.detalhe-wa-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--border);
    z-index: 50;
}
.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    transition: background .15s;
    border: none;
    cursor: pointer;
}
.btn-whatsapp:hover  { background: var(--primary-dark); color: #fff; }
.btn-whatsapp:active { transform: scale(.98); }

/* ==========================================================================
   DESKTOP >= 768px
   ========================================================================== */
@media (min-width: 768px) {

    .header-top     { padding-left: 24px; padding-right: 24px; }
    .localizacao-row,
    .filtros-row    { padding-left: 24px; padding-right: 24px; }

    .app-main {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        padding: 24px 24px max(16px, env(safe-area-inset-bottom));
    }

    .destaques-section { background: transparent; border: none; }
    .destaques-carousel { padding: 0 0 4px; }
    .destaque-card  { width: 175px; }
    .section-title  { padding: 12px 0 8px; }

    .anuncios-lista {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
    }

    /* Detalhe — split layout */
    .detalhe-container {
        max-width: 920px;
        margin: 28px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #fff;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }
    .detalhe-hero   { height: 100%; min-height: 480px; border-radius: 0; }
    .detalhe-body   {
        margin-bottom: 0;
        padding: 32px 28px;
        overflow-y: auto;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }
    .detalhe-wa-bar {
        position: static;
        padding: 24px 0 0;
        border: none;
        background: transparent;
        margin-top: auto;
    }
}

@media (min-width: 1024px) {
    .anuncios-lista { grid-template-columns: repeat(3, 1fr); }
    .destaque-card  { width: 200px; }
}
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}