/* ======================================================================
   ocaracol — estilos da plataforma
   Paleta inspirada em mar profundo + areia + coral.
   ====================================================================== */

:root {
    --bs-primary:        #0b3d5c;
    --bs-primary-rgb:    11, 61, 92;
    --bs-link-color:     #0b3d5c;
    --bs-link-hover-color: #062a41;
    --bs-body-color:     #000000;
    --bs-secondary-color:#000000;
    --bs-tertiary-color: #000000;
    --bs-emphasis-color: #000000;
    --bs-body-bg:        #fbfaf6;
    --bs-font-sans-serif: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --oc-accent:         #f6a96b;
    --oc-accent-strong:  #e8884a;
    --oc-deep:           #062a41;
    --oc-sand:           #f7efe3;
    --oc-shell:          #fff8ef;
    --oc-radius-lg:      18px;
    --oc-shadow-soft:    0 10px 40px -10px rgba(11, 61, 92, .18);
}

html, body { height: 100%; }
body { font-family: var(--bs-font-sans-serif); }
.text-accent { color: var(--oc-accent) !important; }
.text-white-75 { color: rgba(255,255,255,.78) !important; }
.bg-white-10 { background: rgba(255,255,255,.12) !important; backdrop-filter: blur(6px); }

/* ===== Botões ===== */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--oc-deep);
    --bs-btn-hover-border-color: var(--oc-deep);
    --bs-btn-active-bg: var(--oc-deep);
    --bs-btn-active-border-color: var(--oc-deep);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

/* ===== Navbar ===== */
.navbar { padding-top: .65rem; padding-bottom: .65rem; }
.navbar-brand .brand-text { letter-spacing: -0.02em; font-size: 1.3rem; color: var(--bs-primary); }
.navbar .nav-link {
    color: var(--bs-body-color); font-weight: 500;
    font-size: .9rem;
    padding-left: .65rem; padding-right: .65rem;
    white-space: nowrap;
}
.navbar .nav-link:hover { color: var(--bs-primary); }
@media (min-width: 1200px) {
    .navbar .nav-link { font-size: .95rem; padding-left: .75rem; padding-right: .75rem; }
}
.avatar-circle {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), var(--oc-accent));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* ===== Hero ===== */
.hero {
    background: radial-gradient(ellipse at top right, #155778 0%, #0b3d5c 35%, #062a41 100%);
    color: #fff;
    min-height: 620px;
}
.hero.hero-compact {
    min-height: 0;
}
.hero-glow {
    position: absolute; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(246,169,107,.35), transparent 60%);
    filter: blur(20px); pointer-events: none;
}

.search-card {
    background: #fff;
    border-radius: var(--oc-radius-lg);
}
.search-card .form-control,
.search-card .input-group-text { background: #fff; }
.search-card .form-control:focus { box-shadow: none; }

.hero-stack { position: relative; height: 460px; }
.hero-card {
    position: absolute; background: #fff; color: #1f2937;
    border-radius: var(--oc-radius-lg); padding: 18px 20px; min-width: 280px;
    box-shadow: var(--oc-shadow-soft);
}
.hero-card-1 { top: 10px; right: 10px; transform: rotate(-2deg); width: 320px; }
.hero-card-2 { top: 180px; left: -10px; transform: rotate(1deg); width: 320px; }
.hero-card-3 { bottom: 10px; right: 20px; transform: rotate(-1deg); width: 300px; }

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-online { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }

.icon-bubble {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.icon-bubble-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 1.5rem; }

/* ===== Cards de feature ===== */
.feature-card {
    background: #fff; border: 1px solid rgba(11,61,92,.06);
    border-radius: var(--oc-radius-lg); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--oc-shadow-soft);
    border-color: rgba(11,61,92,.12);
}
.bg-light-subtle { background: var(--oc-shell) !important; }

.dashboard-mock {
    background: linear-gradient(135deg, #155778 0%, #0b3d5c 100%);
    border: 1px solid rgba(255,255,255,.08);
}

.cta-banner {
    background: linear-gradient(110deg, var(--bs-primary), #155778 60%, var(--oc-accent));
    color: #fff;
}

/* ===== Footer ===== */
.site-footer {
    background: var(--oc-deep);
    color: rgba(255,255,255,.72);
}
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* ===== Auth ===== */
.auth-section {
    min-height: calc(100vh - 76px);
    background:
        radial-gradient(ellipse at bottom right, rgba(246,169,107,.12), transparent 35%),
        linear-gradient(180deg, #fff8ef, #fbfaf6);
    display: flex; align-items: center;
}
.auth-card { border: 1px solid rgba(11,61,92,.06); }

/* Login: fundo com imagem leve (turismo/hospedagem) */
body.page-login{
    background:
        linear-gradient(180deg, rgba(11,61,92,.45), rgba(255,248,239,.78)),
        radial-gradient(ellipse at top left, rgba(11,61,92,.28), transparent 55%),
        url("../img/login-bg.png");
    background-size: cover;
    background-position: center;
}
body.page-login .auth-section{
    background: transparent;
}
body.page-login .auth-card{
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(6px);
}

/* Toggle de senha (ícone olho) */
.oc-password-input{ padding-right: 3rem; }
.oc-password-toggle{
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #64748b;
    padding: .35rem .45rem;
    border-radius: 10px;
    line-height: 1;
}
.oc-password-toggle:hover{ color: var(--bs-primary); background: rgba(11,61,92,.06); }
.oc-password-toggle:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(11,61,92,.18);
}

/* ===== Role picker (registro) ===== */
.role-picker .role-card {
    display: block; padding: 16px 14px; border: 2px solid #e7eaf0; border-radius: 14px;
    cursor: pointer; transition: all .2s; background: #fff;
    text-align: center;
}
.role-picker .btn-check:checked + .role-card {
    border-color: var(--bs-primary);
    background: rgba(11,61,92,.04);
    box-shadow: 0 0 0 4px rgba(11,61,92,.08);
}
.role-picker .role-card:hover { border-color: var(--bs-primary); }

/* ===== Dashboard ===== */
.dashboard-hero {
    background: linear-gradient(135deg, var(--bs-primary), var(--oc-deep));
}
.avatar-lg {
    width: 64px; height: 64px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; box-shadow: var(--oc-shadow-soft);
}
.stat-card {
    background: #fff; border: 1px solid rgba(11,61,92,.06);
    border-radius: var(--oc-radius-lg);
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--oc-shadow-soft); }

/* ===== Tabs da conta do hospede ===== */
#guest-account-tabs .nav-link {
    border: 1px solid transparent;
    color: var(--bs-body-color);
}
#guest-account-tabs .nav-link:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: var(--bs-body-color);
}
#guest-account-tabs .nav-link.active,
#guest-account-tabs .nav-link.active:focus,
#guest-account-tabs .nav-link.active:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #1f2937;
}

.guest-account-sidebar {
    position: sticky;
    /* Navbar usa sticky-top (~72–76px); folga para não encostar sob ela */
    top: 5.5rem;
    max-height: calc(100vh - 6rem);
    overflow: auto;
    z-index: 1015;
}

/* Resumo de atividades do hóspede (painel) — destaque leve */
.guest-activity-summary {
    padding: 1.25rem 1.35rem;
    border-radius: var(--oc-radius-lg);
    background: linear-gradient(
        145deg,
        rgba(11, 61, 92, 0.05) 0%,
        rgba(255, 255, 255, 0.92) 42%,
        rgba(246, 169, 107, 0.08) 100%
    );
    border: 1px solid rgba(11, 61, 92, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 4px 18px -12px rgba(11, 61, 92, 0.18);
}
.guest-activity-stat {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(11, 61, 92, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.guest-activity-stat:hover {
    border-color: rgba(11, 61, 92, 0.14);
    box-shadow: 0 6px 16px -14px rgba(11, 61, 92, 0.25);
}

@media (max-width: 575.98px) {
    .hero { min-height: auto; }
    .display-4 { font-size: 2.4rem; }
}

/* ===== Property cards (lista) ===== */
.property-card {
    background: #fff; border: 1px solid rgba(11,61,92,.08);
    border-radius: var(--oc-radius-lg); overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.property-card:hover { transform: translateY(-3px); box-shadow: var(--oc-shadow-soft); }
.property-card-cover {
    position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, #eef2f7, #f7efe3);
    overflow: hidden;
}
.property-card-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.property-card-placeholder {
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    color: #94a3b8;
}
.property-card-placeholder i { font-size: 2.4rem; }
.property-status {
    position:absolute; top:10px; right:10px; font-size:.75rem;
}
.search-card-link { display:block; }

/* ===== Form do imóvel ===== */
.amenity-grid .amenity-pill {
    border: 2px solid #e7eaf0; border-radius: 999px; padding: 8px 14px; cursor:pointer;
    background:#fff; transition: all .15s; display:block; text-align:center;
}
.amenity-grid .btn-check:checked + .amenity-pill {
    border-color: var(--bs-primary);
    background: rgba(11,61,92,.06);
    color: var(--bs-primary); font-weight:600;
}

/* ===== Galeria de fotos no form ===== */
.photo-thumb {
    position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
    background: #f3f4f6; border:1px solid #e7eaf0;
}
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.btn-photo-remove {
    position:absolute; top:6px; right:6px;
    width:28px; height:28px; border-radius:50%; border:0;
    background: rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: background .15s;
}
.btn-photo-remove:hover { background: #dc3545; }

/* ===== Calendário do anfitrião ===== */
.cal-month {
    background: #fff; border:1px solid rgba(11,61,92,.08);
    border-radius: var(--oc-radius-lg); padding: 16px;
}
.cal-month-header {
    text-align:center; font-weight:700; text-transform:capitalize; margin-bottom:12px;
    color: var(--bs-primary);
}
.cal-grid {
    display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-dow {
    text-align:center; font-size:.7rem; font-weight:700; text-transform:uppercase;
    color:#94a3b8; padding-bottom:4px;
}
.cal-day {
    aspect-ratio: 1; border:1px solid #e7eaf0; border-radius:8px;
    background:#fff; color:#1f2937; cursor:pointer; padding:4px 2px;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    font-size:.7rem; transition: all .12s;
}
.cal-day:hover:not(:disabled) { border-color: var(--bs-primary); transform: scale(1.04); }
.cal-day-empty { border:0; background:transparent; cursor:default; }
.cal-day-num   { font-weight:700; font-size:.85rem; }
.cal-day-price { color:#64748b; font-size:.6rem; }
.cal-day-past  { opacity:.4; pointer-events:none; }
.cal-status-blocked  { background:#f1f5f9; color:#94a3b8; border-color:#cbd5e1; }
.cal-status-blocked .cal-day-price { display:none; }
.cal-status-booked   { background:rgba(220,53,69,.12); color:#dc3545; border-color:rgba(220,53,69,.3); cursor:not-allowed; }
.cal-status-booked .cal-day-price { display:none; }
.cal-status-available { background:rgba(34,197,94,.06); border-color:rgba(34,197,94,.25); }

.legend-item { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:#475569; }
.legend-dot { width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid #cbd5e1; }
.legend-available { background:rgba(34,197,94,.2); border-color:rgba(34,197,94,.5); }
.legend-blocked   { background:#f1f5f9; }
.legend-booked    { background:rgba(220,53,69,.2); border-color:rgba(220,53,69,.4); }

/* ===== Página pública da propriedade ===== */
.property-gallery {
    display:grid; grid-template-columns: 2fr 1fr; gap: 8px;
    height: clamp(320px, 48vw, 520px);
    background:#f3f4f6;
}
.property-gallery-main,
.property-gallery-cell {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
    background:#e2e8f0;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.property-gallery-main img,
.property-gallery-cell img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .35s ease;
}
.property-gallery-main:hover img,
.property-gallery-cell:hover img { transform: scale(1.03); }
.property-gallery-grid {
    display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
    height: 100%;
    min-height: 0;
}
.property-gallery-empty {
    width:100%; height:100%; min-height:0;
    background:#e2e8f0; color:#94a3b8;
    display:flex; align-items:center; justify-content:center;
}
.property-gallery-more {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.15rem; font-weight: 700; letter-spacing: .01em;
    pointer-events: none;
    transition: background .15s;
}
.property-gallery-cell:hover .property-gallery-more { background: rgba(0,0,0,.65); }
.property-gallery-empty-full {
    width:100%; aspect-ratio: 16/6; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#f3f4f6; color:#94a3b8;
}
@media (max-width: 767.98px) {
    .property-gallery { grid-template-columns: 1fr; height: auto; }
    .property-gallery-main { height: 56vw; min-height: 240px; }
    .property-gallery-grid { display:none; }
}

/* Descrição "Sobre este espaço" */
.oc-property-desc-wrap { position: relative; }
.oc-property-desc { line-height: 1.6; }
.oc-property-desc .oc-property-desc-p { margin: 0 0 1.1rem; }
.oc-property-desc .oc-property-desc-p:last-child { margin-bottom: 0.4rem; }
/* Subtítulos a partir de linha "Cozinha:" (sem texto após os dois-pontos) */
.oc-property-desc .oc-property-desc-h {
    margin: 1.4rem 0 0.6rem 0;
    line-height: 1.3;
    color: var(--bs-body-color, #212529);
}
.oc-property-desc > .oc-property-desc-h:first-child,
.oc-property-desc > :first-child.oc-property-desc-h { margin-top: 0; }
/* Colapso "Ver mais" */
[data-oc-property-desc] .oc-property-desc-toggle {
    color: #0a3a57;
    font-size: 0.95rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}
[data-oc-property-desc] .oc-property-desc-toggle:hover,
[data-oc-property-desc] .oc-property-desc-toggle:focus-visible {
    color: var(--bs-primary, #0a3a57);
    text-decoration: underline;
    outline: none;
}
[data-oc-property-desc] .oc-property-desc-toggle-wrap { margin-top: 0.4rem; }
[data-oc-property-desc].is-collapsed:not(.is-expanded) .oc-property-desc-body {
    max-height: 12.5rem;
    overflow: hidden;
    position: relative;
}
[data-oc-property-desc].is-collapsed:not(.is-expanded) .oc-property-desc-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5rem;
    background: linear-gradient(
        to top,
        var(--bs-body-bg, #fff) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}
[data-oc-property-desc].is-expanded .oc-property-desc-body { max-height: none; overflow: visible; }
[data-oc-property-desc].is-expanded .oc-property-desc-body::after { content: none; }
@media (max-width: 575.98px) {
    [data-oc-property-desc].is-collapsed:not(.is-expanded) .oc-property-desc-body { max-height: 10.5rem; }
}

/* Comodidades "O que este lugar oferece" — colapso com degradê */
[data-oc-amenities].is-collapsed:not(.is-expanded) .row {
    position: relative;
}
[data-oc-amenities].is-collapsed:not(.is-expanded) .row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5rem;
    background: linear-gradient(
        to top,
        var(--bs-body-bg, #fff) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}
[data-oc-amenities].is-expanded .row::after { content: none; }

/* Modal "todas as fotos" */
.oc-photos-modal .modal-content { background:#fff; }
.oc-photos-modal .modal-body { background:#fff; }
.oc-photos-grid {
    display:grid; gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 576px) { .oc-photos-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .oc-photos-grid { grid-template-columns: 1fr 1fr 1fr; } }
.oc-photo-item {
    border: 0; padding: 0; background:#f3f4f6;
    border-radius: 12px; overflow: hidden; cursor: pointer;
    aspect-ratio: 4/3;
    transition: transform .15s ease, box-shadow .15s ease;
}
.oc-photo-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.oc-photo-item img {
    width:100%; height:100%; object-fit: cover; display:block;
    transition: transform .35s ease;
}
.oc-photo-item:hover img { transform: scale(1.04); }

/* Lightbox */
.oc-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.94);
    display: none; align-items: center; justify-content: center;
    z-index: 2000; padding: 56px 64px;
    opacity: 0; transition: opacity .18s ease;
}
.oc-lightbox.is-open { display: flex; opacity: 1; }
.oc-lightbox-stage {
    position: relative;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.oc-lightbox-img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    border-radius: 6px;
    user-select: none;
}
.oc-lightbox-btn {
    position: absolute;
    background: rgba(255,255,255,.12); color:#fff;
    border: 0; width: 48px; height: 48px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s, transform .15s;
}
.oc-lightbox-btn:hover { background: rgba(255,255,255,.25); transform: scale(1.05); }
.oc-lightbox-close { top: 18px; right: 18px; }
.oc-lightbox-prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.oc-lightbox-next  { right: 18px; top: 50%; transform: translateY(-50%); }
.oc-lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.oc-lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
.oc-lightbox-counter {
    position: absolute; top: 24px; left: 24px;
    color:#fff; font-size: .9rem; font-weight: 600;
    background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 999px;
}
@media (max-width: 575.98px) {
    .oc-lightbox { padding: 40px 12px; }
    .oc-lightbox-btn { width: 40px; height: 40px; font-size: 1.1rem; }
    .oc-lightbox-prev { left: 8px; }
    .oc-lightbox-next { right: 8px; }
}

.prop-spec {
    display:flex; align-items:center; gap:10px; padding:14px; border:1px solid #e7eaf0;
    border-radius:14px; background:#fff;
}
.avatar-circle-lg {
    width:48px; height:48px; border-radius:50%;
    background: linear-gradient(135deg, var(--bs-primary), var(--oc-accent));
    color:#fff; display:inline-flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1.2rem;
}

/* ===== Search results ===== */
.search-page { background: var(--bs-body-bg); min-height: calc(100vh - 76px); }
.search-card-compact { border:1px solid rgba(11,61,92,.06); }

/* Tipografia dos cards de resultado alinhada aos cards da home (oc-discover-card). */
.search-page .property-card .js-type {
    font-size: .72rem;
    letter-spacing: .02em;
}
.search-page .property-card h5.js-title {
    font-size: .95rem;
    line-height: 1.25;
    margin-bottom: .15rem !important;
}
.search-page .property-card .js-loc,
.search-page .property-card .js-specs { font-size: .82rem; }
.search-page .property-card .js-price { font-size: 1rem; }
.search-page .property-card .js-price + small,
.search-page .property-card .fw-bold.text-primary > small { font-size: .78rem; }

/* ===== Checkout ===== */
.checkout-page { background: linear-gradient(180deg, var(--oc-shell), #fff); min-height: calc(100vh - 76px); }
.gateway-card {
    display:block; padding:14px 16px; border:2px solid #e7eaf0; border-radius:14px;
    cursor:pointer; transition: all .2s; background:#fff; position:relative;
}
.gateway-card:hover { border-color: var(--bs-primary); }
.gateway-card.is-selected {
    border-color: var(--bs-primary);
    background: rgba(11,61,92,.04);
    box-shadow: 0 0 0 4px rgba(11,61,92,.08);
}
.gateway-card .gateway-check { display:none; }
.gateway-card.is-selected .gateway-check { display:inline-block; }
.gateway-card-sandbox { background: repeating-linear-gradient(45deg, #fff, #fff 8px, #fff8ef 8px, #fff8ef 16px); }
.gateway-logo {
    width:54px; height:54px; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.5rem; color:#fff;
}
.gateway-mp     { background: linear-gradient(135deg, #00b1ea, #0084c8); }
.gateway-stripe { background: linear-gradient(135deg, #635bff, #3a31cc); }

.checkout-cover {
    width:84px; height:84px; border-radius:12px; overflow:hidden; flex-shrink:0;
    background:#f3f4f6; display:flex; align-items:center; justify-content:center;
    color:#94a3b8; font-size:1.6rem;
}
.checkout-cover img { width:100%; height:100%; object-fit:cover; }

/* ===== Reservas (lista) ===== */
.reservation-row { background:#fff; border:1px solid rgba(11,61,92,.06); transition: transform .15s, box-shadow .15s; }
.reservation-row:hover { transform: translateY(-2px); box-shadow: var(--oc-shadow-soft); }
.reservation-cover {
    width:80px; height:60px; border-radius:10px; overflow:hidden;
    background:#f3f4f6; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.reservation-cover img { width:100%; height:100%; object-fit:cover; }

/* ===== Painel de tarefas (mobile-first) ===== */
.task-tabs .nav-link {
    border-radius: 999px; font-weight: 600; color: var(--bs-body-color);
    background: #fff; border: 1px solid rgba(11,61,92,.08);
}
.task-tabs .nav-link.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.task-tabs .nav-link .badge { font-weight: 600; }

.task-card { background:#fff; border:1px solid rgba(11,61,92,.06); transition: transform .15s, box-shadow .15s; }
.task-card:hover { transform: translateY(-2px); box-shadow: var(--oc-shadow-soft); }
.task-icon {
    width:48px; height:48px; border-radius:14px;
    background: linear-gradient(135deg, var(--bs-primary), var(--oc-accent));
    color:#fff; display:inline-flex; align-items:center; justify-content:center;
    font-size:1.4rem; flex-shrink:0;
}
.task-icon-sm {
    width:34px; height:34px; border-radius:10px;
    background: rgba(11,61,92,.08); color: var(--bs-primary);
    display:inline-flex; align-items:center; justify-content:center;
}
.task-link { transition: all .15s; }
.task-link:hover { background: rgba(11,61,92,.04); }

.checklist-item {
    background:#fff; border:1px solid #e7eaf0;
    transition: all .15s; cursor:pointer;
}
.checklist-item.done {
    background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.4);
    text-decoration: line-through; color: #166534;
}
.checklist-item:hover:not(.done) { border-color: var(--bs-primary); }

.evidence-thumb {
    border-radius: 12px; overflow: hidden;
    background: #f3f4f6; border: 1px solid #e7eaf0;
}
.evidence-thumb img { width:100%; height:140px; object-fit:cover; display:block; }

/* ===== Linha do tempo (task) ===== */
.timeline { position: relative; padding-left: 8px; }
.timeline li { position: relative; padding: 4px 0 4px 20px; }
.timeline li i { position: absolute; left: 0; top: 7px; font-size:.6rem; }

/* ===== Seção de avaliações (estilo Airbnb/Booking) ===== */
.oc-reviews-section { scroll-margin-top: 90px; }

.oc-review-score-big {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.oc-review-score-big > .bi-star-fill {
    font-size: 1.8rem;
    color: #f5b301;
}
.oc-review-label {
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.oc-review-stars {
    color: #f5b301;
    font-size: .95rem;
    letter-spacing: 1px;
    white-space: nowrap;
}
.oc-review-stars .bi-star { color: #d1d5db; }

.oc-review-card {
    border: 1px solid rgba(11, 61, 92, .1);
    border-radius: 16px;
    padding: 20px 22px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.oc-review-card:hover {
    border-color: rgba(11, 61, 92, .22);
    box-shadow: 0 10px 30px -18px rgba(11, 61, 92, .22);
}
.oc-review-card-score {
    font-weight: 700;
    color: var(--bs-primary);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.oc-review-excerpt {
    color: #374151;
    font-size: .95rem;
    line-height: 1.55;
    margin: 8px 0 0;
    min-height: 48px;
}
.oc-review-more-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--bs-primary);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: underline;
}
.oc-review-more-btn:hover { color: var(--oc-deep); }
.oc-review-meta { border-top: 1px dashed #e7eaf0; padding-top: 12px; }

.oc-review-cats-preview .oc-review-cat {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    text-align: left;
    height: 100%;
}
.oc-review-cats-preview .oc-review-cat-value {
    font-weight: 700;
    font-size: 1rem;
    color: #0b3d5c;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
}
.oc-review-cats-preview .oc-review-cat-value .bi-star-fill {
    font-size: .85rem;
    vertical-align: -1px;
}
.oc-review-cats-preview .oc-review-cat-label {
    color: #6b7280;
    font-size: .8rem;
    line-height: 1.1;
}

/* Modal de todas as avaliações */
.oc-reviews-modal .modal-content { background: #fff; }
.oc-reviews-modal .modal-dialog {
    height: min(92vh, 900px);
    max-height: 92vh;
}
.oc-reviews-modal .modal-content {
    height: 100%;
    overflow: hidden;
}
.oc-reviews-modal .modal-body { padding: 0; overflow: hidden; height: 100%; }
.oc-reviews-modal-body { height: 100%; }

.oc-reviews-modal-aside {
    border-bottom: 1px solid #e7eaf0;
}
.oc-reviews-modal-list {
    overflow-y: auto;
    max-height: 100%;
}
@media (min-width: 992px) {
    .oc-reviews-modal-aside {
        border-bottom: 0;
        border-right: 1px solid #e7eaf0;
        position: sticky;
        top: 0;
        align-self: stretch;
    }
    .oc-reviews-modal-body { display: flex; min-height: 100%; }
    .oc-reviews-modal-list { max-height: min(92vh, 900px); }
}

.oc-review-item {
    padding: 22px 0;
    border-bottom: 1px solid #e7eaf0;
}
.oc-review-item:first-child { padding-top: 0; }
.oc-review-item:last-child { border-bottom: 0; padding-bottom: 4px; }

.oc-review-search {
    position: relative;
    max-width: 320px;
    flex-grow: 1;
}
.oc-review-search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.oc-review-search > input.form-control {
    border-radius: 999px;
    padding-left: 36px;
    background: #f8fafc;
    border: 1px solid #e7eaf0;
}
.oc-review-search > input.form-control:focus {
    box-shadow: 0 0 0 3px rgba(11, 61, 92, .12);
    border-color: var(--bs-primary);
    background: #fff;
}

/* ===== Estrelas (avaliação) ===== */
.rating-stars {
    display: inline-flex; flex-direction: row-reverse; gap: 4px;
    font-size: 2rem; line-height: 1;
}
.rating-stars-sm { font-size: 1.2rem; }
.rating-stars input[type="radio"] { display: none; }
.rating-stars label {
    cursor: pointer; color: #d1d5db; transition: color .15s, transform .1s;
}
.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input[type="radio"]:checked ~ label {
    color: #f59e0b;
}
.rating-stars label:hover { transform: scale(1.15); }

@media (max-width: 575.98px) {
    .task-tabs { gap: .25rem; }
    .task-tabs .nav-link { font-size: .82rem; padding: .5rem .75rem; }
    .reservation-row { flex-direction: column; align-items: flex-start !important; }
    .reservation-row .reservation-cover { width:100%; height:140px; }
    .reservation-row .text-end { text-align: left !important; }
}

/* ===========================================================================
   Discover (home): "Vistos recentemente", "Destinos perto de você" e
   "Disponível em datas semelhantes" — carrossel horizontal (estilo marketplace).
   ========================================================================= */
.oc-discover-section { background: transparent; }

.oc-discover-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .25rem;
    padding: .25rem .25rem .5rem;
    margin: 0 -.25rem;

    /* Esconde a scrollbar — a navegação acontece pelas setas laterais. */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge legado */
}
.oc-discover-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

.oc-discover-card {
    /* Largura FIXA por breakpoint para nunca esticar quando só há 1 card.
       flex: 0 0 auto evita encolher/esticar e respeita a width definida.   */
    flex: 0 0 auto;
    width: 78vw;
    max-width: 280px;
    scroll-snap-align: start;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(11, 61, 92, .08);
    overflow: hidden;
    color: inherit;
    transition: box-shadow .2s ease, border-color .2s ease;
    text-decoration: none;
}
@media (min-width: 576px) { .oc-discover-card { width: 240px; max-width: none; } }
@media (min-width: 768px) { .oc-discover-card { width: calc((100% - 2rem) / 3); } }
@media (min-width: 992px) { .oc-discover-card { width: calc((100% - 3rem) / 4); } }

.oc-discover-card:hover {
    /* Hover sem animação de movimento — só uma sombra cinza, suave e baixa. */
    box-shadow: 0 8px 22px -14px rgba(15, 23, 42, .18);
    border-color: rgba(11, 61, 92, .14);
}

.oc-discover-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f3f5;
}
.oc-discover-card-cover img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

.oc-discover-card-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 2rem;
}

.oc-discover-card-fav {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.85);
    color: #1f2937; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer; backdrop-filter: blur(4px);
    transition: background .15s, color .15s, transform .1s;
}
.oc-discover-card-fav:hover { background: #fff; transform: scale(1.06); }
.oc-discover-card-fav.is-active { color: #e11d48; }

.oc-discover-card-body {
    padding: .9rem 1rem 1rem;
}
.oc-discover-card-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--bs-body-color);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.oc-discover-card-loc {
    color: #6b7280;
    font-size: .82rem;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-discover-card-price {
    margin-top: .35rem;
    font-weight: 700;
    color: var(--bs-body-color);
    font-size: 1rem;
}
.oc-discover-card-price small { font-weight: 400; margin-left: 4px; }
.oc-discover-card-tag { margin-top: 2px; font-size: .78rem; }

.oc-discover-nav .btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}

/* ======================================================================
   Galeria de fotos dos cards (estilo Airbnb)
   Usada nos cards da busca (grade), busca no mapa e popup do Leaflet.
   ====================================================================== */
.oc-card-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--oc-sand);
    /* No mobile o swipe horizontal navega a galeria; mantemos pan-y para
       que o scroll vertical da página continue funcionando.              */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
/* Impede o drag nativo das <img> (o card inteiro é um <a>, a ausência
   disso faria o navegador entrar em modo "arrastar URL" no desktop).   */
.oc-card-gallery, .oc-card-gallery * { -webkit-user-drag: none; user-drag: none; }
.oc-card-gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translate3d(0,0,0);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.oc-card-gallery-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}
.oc-card-gallery-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; font-size: 1.8rem;
}

/* Setas de navegação — ocultas até hover / foco do card */
.oc-card-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    color: #1f2937;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s ease, transform .15s ease, background .15s ease;
    z-index: 2;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.oc-card-gallery-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.oc-card-gallery-nav.oc-prev { left: 8px; }
.oc-card-gallery-nav.oc-next { right: 8px; }
.oc-card-gallery-nav i { font-size: 1rem; line-height: 1; }

/* Aparece no hover do card OU ao focar com teclado */
.property-card:hover .oc-card-gallery-nav,
.oc-map-card:hover  .oc-card-gallery-nav,
.oc-card-gallery:focus-within .oc-card-gallery-nav,
.oc-map-popup .oc-card-gallery-nav {
    opacity: 1;
}

/* Em dispositivos de toque (celular/tablet) não há hover — deixamos as
   setas sempre visíveis, seguindo o padrão de apps mobile. */
@media (hover: none), (pointer: coarse) {
    .oc-card-gallery-nav { opacity: 1; }
}

/* Dots indicadores */
.oc-card-gallery-dots {
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    display: flex; justify-content: center; gap: 4px;
    z-index: 2;
    pointer-events: none;
}
.oc-card-gallery-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.65);
    box-shadow: 0 0 2px rgba(0,0,0,.35);
    transition: transform .15s ease, background .15s ease;
}
.oc-card-gallery-dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

/* Quando a galeria está dentro de um card existente, ela ocupa o cover inteiro */
.property-card-cover .oc-card-gallery,
.oc-map-card-cover  .oc-card-gallery { position: absolute; inset: 0; }

/* ======================================================================
   Busca por mapa (estilo Airbnb)
   ====================================================================== */
.page-search-map { background: #fff; }
.page-search-map #main { padding: 0; }

.oc-map-search {
    display: flex;
    flex-direction: column;
    /* Ocupa toda a altura abaixo da navbar; 68px ≈ altura da navbar sticky. */
    height: calc(100vh - 68px);
    min-height: 560px;
    overflow: hidden;
}

.oc-map-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid #eceae3;
    flex-wrap: wrap;
}
.oc-map-filters .oc-search-widget { flex: 1 1 auto; max-width: 1100px; min-width: 0; margin: 0 auto; }
.oc-map-filters .oc-search-widget .oc-search-bar { width: 100%; }

/* Link "Ver em grade" dentro da barra flutuante — posicionamento é
   feito por .oc-map-topbar (flex), não por position:absolute.         */
.oc-map-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    background: #fff;
    color: var(--bs-body-color);
    border: 1px solid rgba(11, 61, 92, .14);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.oc-map-view-toggle:hover {
    background: #f7f5ee;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    color: var(--bs-body-color);
}
.oc-map-view-toggle i { font-size: 1rem; line-height: 1; }

.oc-map-body {
    flex: 1 1 auto;
    display: grid;
    /* Desktop: mapa primeiro (direita depois), lista à esquerda */
    grid-template-columns: minmax(500px, 52%) 1fr;
    grid-template-areas: "list map";
    min-height: 0;
}
@media (max-width: 1399.98px) {
    .oc-map-body { grid-template-columns: minmax(360px, 46%) 1fr; }
}

/* Desktop: posicionamento por grid-area */
.oc-map-body .oc-map-canvas { grid-area: map; }
.oc-map-body .oc-map-list   { grid-area: list; }

/* ------- Lista de cards (desktop) ------- */
.oc-map-list {
    overflow-y: auto;
    padding: 1rem 1rem 2rem;
    transition: opacity .15s ease;
    scrollbar-width: thin;
}
.oc-map-list.is-loading { opacity: .55; }
.oc-map-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .75rem;
}

/* ------- Alça de arraste (só no mobile) ------- */
.oc-sheet-handle { display: none; }

/* ======================================================================
   Bottom sheet móvel (≤ 767.98px)
   Usa position:fixed para evitar dependência da altura do containing block
   e problemas de overflow:hidden do ancestral.
   3 posições de snap (translateY como % da própria altura do sheet):
     PEEK  → 78%  só alça + cabeçalho visíveis
     MID   → 52%  equilibrado (posição inicial)
     FULL  →  4%  resultados dominam
   --sheet-top é calculado pelo JS após medir a barra de filtros.
   ====================================================================== */
@media (max-width: 767.98px) {
    /* Garante que o body do mapa preenche o espaço do flex container */
    .oc-map-body {
        display: block;
        position: relative;
        min-height: 0;
    }
    /* Mapa ocupa todo o espaço disponível */
    .oc-map-canvas {
        position: absolute;
        inset: 0;
    }

    /* Sheet fixo na tela, começa logo abaixo dos filtros.
       z-index 1050 garante que fica acima dos controles internos do
       Leaflet (zoom +/-, atribuição, toggles flutuantes custom etc.). */
    .oc-map-list {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: var(--sheet-top, 130px);
        height: auto;
        max-height: none;
        transform: translateY(var(--sheet-y, 52%));
        background: #fff;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -6px 28px rgba(0,0,0,.18);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 1rem 2rem;
        transition: transform .32s cubic-bezier(.22,.61,.36,1);
        will-change: transform;
        z-index: 1050;
    }
    .oc-map-list.is-dragging {
        transition: none;
    }

    /* Área de arraste: alça + cabeçalho inteiro reagem ao drag (como
       no Airbnb). Todos com touch-action: none para que o browser não
       interprete o gesto vertical como scroll da página/sheet.          */
    .oc-sheet-handle,
    .oc-sheet-handle *,
    .oc-map-list .oc-map-list-head,
    .oc-map-list .oc-map-list-head * {
        touch-action: none;
    }

    .oc-sheet-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 0 8px;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }
    .oc-sheet-handle-bar {
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: #cbd5e1;
    }

    /* Topo sticky: alça + cabeçalho juntos permanecem fixos enquanto
       o usuário rola os cards. Antes só o header era sticky e a
       alça sumia ao rolar — agora ambos se mantêm à mostra.          */
    .oc-sheet-sticky {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 3;
    }
    .oc-map-list-head {
        position: static;
        background: #fff;
        padding: 6px 0 10px;
        margin-bottom: .5rem;
        border-bottom: 1px solid #f1f1ef;
    }

    /* Cards em coluna única */
    .oc-map-cards {
        grid-template-columns: 1fr !important;
    }
}

.oc-map-cards {
    display: grid;
    /* 3 colunas no desktop ≥1400px */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* Estado vazio ("Nada por aqui"): ocupa toda a grid e centraliza
   o conteúdo vertical e horizontalmente dentro da área de resultados. */
.oc-map-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50vh;
    padding: 2rem 1rem;
}
/* 2 colunas em telas médias-grandes (tablet landscape / notebook 13"). */
@media (max-width: 1399.98px) {
    .oc-map-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.oc-map-card {
    display: block;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.oc-map-card:hover,
.oc-map-card.is-active {
    transform: translateY(-2px);
    box-shadow: var(--oc-shadow-soft);
    border-color: #e4e0d5;
}
.oc-map-card-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--oc-sand);
    overflow: hidden;
}
.oc-map-card-cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.oc-map-card:hover .oc-map-card-cover img { transform: scale(1.04); }
.oc-map-card-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; font-size: 1.8rem;
}
.oc-map-card-body { padding: .75rem .85rem 1rem; }
.oc-map-card-body .js-type {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
}
.oc-map-card-body .js-title { margin-top: .15rem; font-size: .98rem; }
.oc-map-card-body .js-loc   { margin-bottom: .2rem; }

/* ------- Canvas do mapa ------- */
.oc-map-canvas {
    position: relative;
    min-height: 0;
    background: #e9edf2;
}
.oc-map { width: 100%; height: 100%; }
.leaflet-container { font-family: inherit; }

/* Barra flutuante no canto superior direito do mapa que agrupa o
   switch "Buscar ao mover o mapa" e o link "Ver em grade", mantendo
   ambos longe dos controles de zoom (top-left) do Leaflet.          */
.oc-map-topbar {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.oc-map-floating-toggle {
    background: #fff;
    border-radius: 999px;
    padding: .4rem .85rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    display: flex; align-items: center;
}
.oc-map-research {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* ------- Marcador de preço (divIcon) ------- */
.oc-price-pin {
    background: transparent !important;
    border: 0 !important;
    display: inline-flex !important;
    transform: translate(-50%, -100%);
}
.oc-price-pin span {
    display: inline-block;
    background: #fff;
    color: #1f2937;
    font-weight: 700;
    font-size: .78rem;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #e4e0d5;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.oc-price-pin:hover span {
    transform: scale(1.06);
    border-color: var(--bs-primary);
}
.oc-price-pin.is-active span {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    transform: scale(1.08);
}

/* ------- Popup Leaflet estilizado (sem padding do Leaflet) ------- */
.leaflet-popup-content-wrapper {
    border-radius: 14px;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.leaflet-popup-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 240px !important;
    line-height: 1.35;
}
/* Leaflet força azul em qualquer <a> dentro do mapa — sobrescrevemos
   pra manter o texto do popup em preto como no Airbnb. */
.leaflet-container a.oc-map-popup,
.leaflet-container a.oc-map-popup:hover,
.leaflet-container a.oc-map-popup:focus {
    color: var(--bs-body-color);
    text-decoration: none;
}
.oc-map-popup {
    display: block;
    background: #fff;
}
.oc-map-popup img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}
.oc-map-popup-noimg {
    height: 150px; background: var(--oc-sand);
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; font-size: 2rem;
}
/* Quando a galeria é renderizada dentro do popup, ela substitui o <img> */
.oc-map-popup .oc-card-gallery {
    position: relative;
    height: 150px;
    overflow: hidden;
}
.oc-map-popup-body {
    padding: .55rem .7rem .7rem;
    color: var(--bs-body-color);
}
.oc-map-popup-body .small { color: #6b7280; }
.leaflet-popup-tip { background: #fff; }
.leaflet-popup-close-button {
    top: 6px !important; right: 6px !important;
    width: 24px !important; height: 24px !important;
    background: rgba(255,255,255,.92) !important;
    border-radius: 50%;
    color: #1f2937 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* ------- Responsivo ------- */
/* Tablet portrait (768–991px): layout empilhado — mapa em cima, lista
   abaixo. Mantém o visual original. */
@media (max-width: 991px) {
    .oc-map-search { height: auto; }
    .oc-map-body { grid-template-columns: 1fr; }
    .oc-map-canvas { order: -1; height: 58vh; min-height: 360px; }
    .oc-map-list { max-height: none; }
    .oc-map-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile (≤767.98px): mapa fullscreen + bottom sheet.
   - Body com overflow hidden e footer oculto para evitar que o rodapé
     azul apareça ao "puxar" a página por cima.
   - .oc-map-search ocupa toda a altura abaixo da navbar.
   - .oc-map-canvas preenche o .oc-map-body (que cresce via flex).    */
@media (max-width: 767.98px) {
    body.page-search-map { overflow: hidden; }
    body.page-search-map .site-footer { display: none; }

    .oc-map-search {
        height: calc(100vh - 68px);        /* fallback */
        height: calc(100dvh - 68px);
        min-height: 0;
        position: relative;
    }

    /* Barra de filtros flutuante: sai do fluxo e passa a sobrepor o
       mapa no topo. IMPORTANTE: o container é totalmente transparente
       e NÃO tem backdrop-filter/transform/filter, pois qualquer uma
       dessas propriedades transforma o container em "containing block"
       de descendentes position:fixed — o que faria o modal da busca
       (form.is-open, fixed inset:0) ficar preso dentro da barra.
       O efeito glass vai direto na pill (mais abaixo).               */
    .oc-map-filters {
        position: absolute;
        top: 0; left: 0; right: 0;
        z-index: 1100;
        background: transparent;
        border-bottom: none;
        padding: 10px 12px;
    }

    /* Efeito "glass" vai apenas no pill da busca — sem afetar o
       posicionamento de descendentes fixed.                        */
    .page-search-map .oc-search-pill {
        background: rgba(255, 255, 255, .72);
        -webkit-backdrop-filter: blur(14px) saturate(180%);
        backdrop-filter: blur(14px) saturate(180%);
        border-color: rgba(255, 255, 255, .6);
        box-shadow: 0 10px 28px -10px rgba(11, 61, 92, .35);
    }

    .oc-map-body {
        min-height: 0;
    }
    /* Sobrescreve as regras do bloco 767.98 anterior: em vez de
       position:absolute + inset:0 (que requer parent com altura já
       resolvida — frágil em alguns layouts flex no mobile), usamos
       position:relative + height:100% para o canvas preencher o
       .oc-map-body de forma confiável. Leaflet precisa de altura
       explícita no container para renderizar os tiles.
       `isolation: isolate` cria um stacking context local, isolando
       os z-indexes internos do Leaflet (200–1000) para que nada
       vaze para fora e sobreponha a barra de filtros.                */
    .oc-map-canvas {
        position: relative;
        inset: auto;
        height: 100%;
        min-height: 0;
        isolation: isolate;
    }

    /* Os controles de zoom do Leaflet (top-left), a barra flutuante
       com "Buscar ao mover o mapa" + "Ver em grade" (top-right) e o
       botão central "Buscar nesta área" são deslocados para baixo
       da barra translúcida, para não ficarem por trás dela.         */
    .page-search-map .leaflet-top.leaflet-left { top: 80px; }
    .oc-map-topbar   { top: 80px; }
    .oc-map-research { top: 90px; }

    /* No mobile a topbar tem pouco espaço horizontal. Deixamos o
       "Ver em grade" só com ícone e reduzimos ligeiramente o padding
       do switch para caber em telas estreitas.                      */
    .oc-map-view-toggle {
        padding: .45rem .55rem;
        font-size: 0;
    }
    .oc-map-view-toggle i { font-size: 1.05rem; }
    .oc-map-view-toggle span { display: none; }

    .oc-map-floating-toggle {
        padding: .35rem .65rem;
    }
    .oc-map-floating-toggle .form-check-label {
        font-size: .78rem;
    }
}

@media (max-width: 600px) {
    .oc-map-cards { grid-template-columns: 1fr; }
    .oc-map-filters { padding: .6rem .75rem; }
}