/* ═══════════════════════════════════════════════════════════════════
   ZYONERA IMÓVEIS — LUXURY STYLESHEET v3
   Riviera de São Lourenço · Bertioga
   ═══════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables ──────────────────────────────────────────────── */
:root {
    --gold:         #c9a96e;
    --gold-dark:    #a88550;
    --bg-page:      #f8f6f1;
    --bg-card:      #ffffff;
    --text-main:    #1a1a1a;
    --text-sub:     #6b6b6b;
    --text-faint:   #999999;
    --shadow-card:  0 2px 18px rgba(0,0,0,0.07), 0 0 0 1px rgba(201,169,110,0.06);
    --shadow-hover: 0 10px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(201,169,110,0.13);
    --serif:        'Playfair Display', Georgia, serif;
    --sans:         'Inter', 'Helvetica Neue', Arial, sans-serif;
    --nav-h:        70px;
}

/* ─── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
    font-family: var(--sans);
    font-size: 16px;
    background: var(--bg-page);
    color: var(--text-main);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-main);
    margin: 0;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }
h1:focus { outline: none; }

/* ─── Bootstrap overrides ────────────────────────────────────────── */
.btn-primary { background-color: var(--gold); border-color: var(--gold); color: #1a1a1a; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--gold-dark); border-color: var(--gold-dark); color: #1a1a1a; }

.btn:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.15rem rgba(201,169,110,0.3);
    border-color: var(--gold);
    outline: none;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }
.blazor-error-boundary::after { content: "Ocorreu um erro."; }

/* ═══════════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════════ */
.luxury-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-h);
    background: rgba(10,10,10,0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(201,169,110,0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.luxury-nav.scrolled {
    background: rgba(10,10,10,0.97);
    box-shadow: 0 4px 28px rgba(0,0,0,0.4);
    border-bottom-color: rgba(201,169,110,0.18);
}
.luxury-nav-container {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}
.luxury-nav-logo {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold) !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    flex-shrink: 0;
}
.luxury-nav-logo:hover { opacity: 0.85; }

.luxury-nav-menu {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}
.luxury-nav-link {
    color: rgba(255,255,255,0.78) !important;
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    border-radius: 3px;
    text-decoration: none !important;
    transition: color 0.2s ease, background 0.2s ease;
}
.luxury-nav-link:hover { color: var(--gold) !important; background: rgba(201,169,110,0.08); }

.luxury-nav-cta {
    color: var(--gold) !important;
    border: 1px solid var(--gold);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.43rem 1rem;
    border-radius: 3px;
    margin-left: 0.7rem;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
}
.luxury-nav-cta:hover { background: var(--gold); color: #1a1a1a !important; }

/* Hamburger */
.luxury-nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}
.luxury-nav-hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: rgba(255,255,255,0.8);
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease;
    transform-origin: center;
}
.luxury-nav-hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--gold); }
.luxury-nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.luxury-nav-hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.luxury-main { min-height: 100vh; padding-top: var(--nav-h); }

/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════ */
.luxury-hero {
    background: linear-gradient(155deg, #0c0b09 0%, #1c1812 55%, #0e0c09 100%);
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem 5rem;
    position: relative;
    overflow: hidden;
}
.luxury-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 55% at 50% 65%, rgba(201,169,110,0.09) 0%, transparent 70%);
    pointer-events: none;
}
.luxury-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to top, var(--bg-page), transparent);
    pointer-events: none;
}
.luxury-hero-content { position: relative; z-index: 1; max-width: 780px; }

.luxury-hero-eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
}
.luxury-hero-title {
    font-family: var(--serif);
    font-size: clamp(2.3rem, 5.5vw, 4rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.08;
    margin-bottom: 1.2rem;
    letter-spacing: -0.01em;
}
.luxury-hero-title em { font-style: italic; color: var(--gold); }

.luxury-hero-subtitle {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255,255,255,0.58);
    margin-bottom: 2.75rem;
    line-height: 1.65;
}

/* Hero search bar */
.luxury-hero-search {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(201,169,110,0.22);
    border-radius: 5px;
    padding: 0.4rem;
    max-width: 600px;
    margin: 0 auto;
    gap: 0;
}
.luxury-hero-search select {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.82);
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 400;
    padding: 0.6rem 0.9rem;
    outline: none;
    cursor: pointer;
}
.luxury-hero-search select option { background: #1a1a1a; color: #fff; }

.luxury-hero-search-divider {
    width: 1px;
    height: 26px;
    background: rgba(201,169,110,0.22);
    flex-shrink: 0;
    margin: 0 0.1rem;
}
.luxury-hero-search-btn {
    background: var(--gold);
    color: #1a1a1a;
    border: none;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.65rem 1.4rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.luxury-hero-search-btn:hover { background: var(--gold-dark); }

/* Filtros avançados — toggle link */
.luxury-hero-filtro-toggle {
    display: block;
    background: none;
    border: none;
    color: rgba(255,255,255,0.42);
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
    margin: 0.55rem auto 0;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s;
}
.luxury-hero-filtro-toggle:hover { color: var(--gold); }

/* Filtros avançados — painel colapsável */
.hero-filtro-avancado {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    max-width: 600px;
    margin: 0 auto;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.hero-filtro-avancado.aberto {
    max-height: 520px;
    opacity: 1;
}

/* Grid 4 colunas */
.hero-avancado-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    padding: 1rem 0 0.5rem;
}
.hero-avancado-field label {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    margin-bottom: 0.28rem;
    font-weight: 500;
}
.hero-avancado-field input {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: rgba(255,255,255,0.88);
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    font-family: var(--sans);
    outline: none;
    transition: border-color 0.2s;
}
.hero-avancado-field input::placeholder { color: rgba(255,255,255,0.22); }
.hero-avancado-field input:focus { border-color: var(--gold); }

/* Linha de características */
.hero-avancado-caracts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    padding: 0.4rem 0 0.6rem;
}
.hero-avancado-caracts .luxury-check {
    color: rgba(255,255,255,0.68);
    font-size: 0.74rem;
}
.hero-avancado-caracts .luxury-check input[type="checkbox"] {
    accent-color: var(--gold);
    width: 13px;
    height: 13px;
}

/* Botão limpar */
.hero-avancado-limpar {
    display: inline-block;
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    font-family: var(--sans);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.15);
    transition: color 0.2s;
}
.hero-avancado-limpar:hover { color: rgba(255,255,255,0.72); }

/* ═══════════════════════════════════════════════════════════════════
   CATALOG SECTION
   ═══════════════════════════════════════════════════════════════════ */
.luxury-catalog-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}
.luxury-results-count {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-sub);
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}
.luxury-results-count strong { color: var(--gold); font-weight: 600; }

.luxury-debug-btn {
    background: none;
    border: none;
    font-size: 0.7rem;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.04em;
    text-decoration: underline;
}
.luxury-debug-btn:hover { color: var(--text-sub); }

/* ─── Loading / Empty ────────────────────────────────────────────── */
.luxury-loading {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-sub);
}
.luxury-loading .spinner-border { color: var(--gold) !important; width: 2rem; height: 2rem; border-width: 2px; }
.luxury-empty { text-align: center; padding: 5rem 2rem; color: var(--text-sub); font-size: 0.95rem; }

/* ─── Pagination ─────────────────────────────────────────────────── */
.luxury-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 3rem;
}
.luxury-pagination .btn {
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-color: rgba(0,0,0,0.12);
    color: var(--text-sub);
    padding: 0.48rem 1.2rem;
    border-radius: 3px;
    font-family: var(--sans);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.luxury-pagination .btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.luxury-pagination .btn:disabled { opacity: 0.3; }
.luxury-pagination-info { font-size: 0.78rem; color: var(--text-sub); letter-spacing: 0.04em; }

/* ═══════════════════════════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════════════════════════ */
.luxury-filters {
    background: var(--bg-card);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 6px;
    padding: 1.5rem 1.75rem 1.25rem;
    margin-bottom: 2.25rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.luxury-filters .form-label {
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-sub);
    margin-bottom: 0.35rem;
    display: block;
}
.luxury-filters .form-select,
.luxury-filters .form-control {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    font-size: 0.855rem;
    font-family: var(--sans);
    color: var(--text-main);
    background-color: #faf9f7;
    padding: 0.42rem 0.7rem;
    height: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.luxury-filters .form-select:focus,
.luxury-filters .form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.1);
    background: #fff;
}
.luxury-filters .form-select-sm,
.luxury-filters .form-control-sm { font-size: 0.855rem !important; padding: 0.42rem 0.7rem; }

.btn-buscar {
    background: var(--gold);
    border: none;
    color: #1a1a1a;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 0.48rem 1.1rem;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-buscar:hover { background: var(--gold-dark); }

.btn-limpar {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);
    color: var(--text-sub);
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    border-radius: 3px;
    padding: 0.48rem 1rem;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-limpar:hover { border-color: var(--gold); color: var(--gold); }

/* Custom checkboxes */
.luxury-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.78rem;
    color: var(--text-sub);
    font-family: var(--sans);
}
.luxury-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border: 1.5px solid rgba(0,0,0,0.18);
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background: #fff;
    transition: background 0.18s ease, border-color 0.18s ease;
    flex-shrink: 0;
    position: relative;
    top: -0.5px;
}
.luxury-check input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.luxury-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3.5px; top: 0.5px;
    width: 5px; height: 9px;
    border: 1.5px solid #1a1a1a;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED BADGE STYLES
   ═══════════════════════════════════════════════════════════════════ */
.luxury-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.52rem;
    border-radius: 2px;
    border: 1px solid;
    font-family: var(--sans);
    white-space: nowrap;
}
.luxury-badge-sea     { color: #1a6b9a; border-color: rgba(26,107,154,0.3);  background: rgba(26,107,154,0.07);  }
.luxury-badge-green   { color: #2d6a4f; border-color: rgba(45,106,79,0.3);   background: rgba(45,106,79,0.07);   }
.luxury-badge-neutral { color: #777;    border-color: rgba(120,120,120,0.3); background: rgba(120,120,120,0.06); }
.luxury-badge-dark    { color: #555;    border-color: rgba(85,85,85,0.28);   background: rgba(85,85,85,0.05);    }

/* ═══════════════════════════════════════════════════════════════════
   CATALOG ROW CARDS
   ═══════════════════════════════════════════════════════════════════ */
.imovel-list { display: flex; flex-direction: column; gap: 0; }

.imovel-row-card {
    display: flex;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0,0,0,0.04);
    transition: box-shadow 0.32s ease, transform 0.32s ease;
}
.imovel-row-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}
.imovel-row-card:hover .imovel-row-photo img { transform: scale(1.04); }

/* Photo side */
.imovel-row-photo {
    width: 60%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: #e8e4dc;
}
.imovel-row-photo::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 ratio */
}
.imovel-row-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}
.imovel-row-no-photo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #aaa5a0;
    letter-spacing: 0.05em;
    font-family: var(--sans);
}
.imovel-row-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.07) 0%, transparent 55%);
    pointer-events: none;
    z-index: 1;
}
.imovel-row-tipo-tag {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(5px);
    color: rgba(255,255,255,0.9);
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 0.28rem 0.62rem;
    border-radius: 2px;
}
.imovel-row-destaque-tag {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    background: var(--gold);
    color: #1a1a1a;
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 0.28rem 0.62rem;
    border-radius: 2px;
}

/* Info side */
.imovel-row-info {
    flex: 1;
    padding: 1.75rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid rgba(0,0,0,0.05);
}
.imovel-row-condominio {
    display: block;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.3rem;
}
.imovel-row-titulo {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 0.3rem;
}
.imovel-row-local {
    font-size: 1.2rem;
    color: var(--text-sub);
    margin-bottom: 0;
}
.imovel-row-divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.07);
    margin: 1rem 0;
}
.imovel-row-preco {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.18rem;
}
.imovel-row-preco-unit {
    font-size: 0.52em;
    font-weight: 400;
    font-family: var(--sans);
    color: var(--gold);
}
.imovel-row-preco-label {
    font-size: 0.67rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-family: var(--sans);
    margin: 0;
}
.imovel-row-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 1.23rem;
    color: var(--text-sub);
}
.imovel-row-spec strong { color: var(--text-main); font-weight: 600; }

.imovel-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.imovel-row-footer {
    margin-top: auto;
    padding-top: 1.25rem;
}
.imovel-row-cta {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold) !important;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 0.6rem 1.75rem;
    border-radius: 3px;
    text-decoration: none !important;
    transition: background 0.22s ease, color 0.22s ease;
}
.imovel-row-cta:hover { background: var(--gold); color: #1a1a1a !important; }

/* ═══════════════════════════════════════════════════════════════════
   DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════ */
.detalhe-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2.25rem 2rem 5rem;
}

/* Breadcrumb */
.detalhe-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-sub);
    margin-bottom: 1.75rem;
    font-family: var(--sans);
    flex-wrap: wrap;
}
.detalhe-breadcrumb a { color: var(--text-sub); text-decoration: none; }
.detalhe-breadcrumb a:hover { color: var(--gold); }
.detalhe-breadcrumb .sep { color: var(--text-faint); font-size: 0.68rem; }

/* Main gallery */
.detalhe-gallery-wrap {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    background: #e8e4dc;
    height: clamp(320px, 60vh, 620px);
}
.detalhe-gallery-wrap .carousel,
.detalhe-gallery-wrap .carousel-inner,
.detalhe-gallery-wrap .carousel-item { height: 100%; }
.detalhe-gallery-wrap .carousel-item img,
.detalhe-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.detalhe-gallery-wrap .carousel-control-prev,
.detalhe-gallery-wrap .carousel-control-next { width: 50px; opacity: 0.65; transition: opacity 0.2s; }
.detalhe-gallery-wrap:hover .carousel-control-prev,
.detalhe-gallery-wrap:hover .carousel-control-next { opacity: 1; }

.detalhe-no-foto {
    height: clamp(320px, 60vh, 620px);
    background: #e8e4dc;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    color: #aaa5a0;
    letter-spacing: 0.05em;
    font-family: var(--sans);
}

/* Thumbnail strip */
.detalhe-thumb-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.65rem 0 0;
    margin-bottom: 2.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) rgba(0,0,0,0.05);
}
.detalhe-thumb-strip::-webkit-scrollbar { height: 3px; }
.detalhe-thumb-strip::-webkit-scrollbar-track { background: transparent; }
.detalhe-thumb-strip::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

.detalhe-thumb {
    flex-shrink: 0;
    width: 84px;
    height: 56px;
    border: 3px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.4;
    background: none;
    padding: 0;
    transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.detalhe-thumb.active { 
    opacity: 1 !important; 
    border-color: var(--gold) !important; 
    border-width: 4px !important;
    transform: scale(1.08) !important;
    box-shadow: 0 3px 12px rgba(201,169,110,0.6) !important;
}
.detalhe-thumb:hover { 
    opacity: 0.7; 
    border-color: rgba(201,169,110,0.5); 
}
.detalhe-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    pointer-events: none;
}

/* Header (full-width above 2 cols) */
.detalhe-header {
    margin-bottom: 2rem;
}
.detalhe-badges-row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.85rem; }

.detalhe-tipo-badge {
    display: inline-block;
    background: rgba(201,169,110,0.1);
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.28rem 0.65rem;
    border-radius: 2px;
    border: 1px solid rgba(201,169,110,0.28);
    font-family: var(--sans);
}
.detalhe-destaque-badge {
    display: inline-block;
    background: var(--gold);
    color: #1a1a1a;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.28rem 0.65rem;
    border-radius: 2px;
    font-family: var(--sans);
}
.detalhe-condominio {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.4rem;
    font-family: var(--sans);
}
.detalhe-titulo {
    font-family: var(--serif);
    font-size: clamp(2.3rem, 4.2vw, 3.4rem);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    margin-bottom: 0.4rem;
}
.detalhe-localizacao {
    font-size: 1.26rem;
    color: var(--text-sub);
    margin: 0;
}

/* Two-column info layout */
.detalhe-info-cols {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 3.5rem;
    align-items: start;
}

.detalhe-sep {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 1.25rem 0;
}

/* Left col: price, specs, CTA */
.detalhe-preco-venda {
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.2rem;
}
.detalhe-preco-aluguel {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.2rem;
}
.detalhe-preco-temporada {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--gold);
    opacity: 0.88;
    margin-bottom: 0.2rem;
}
.detalhe-preco-label {
    font-size: 0.67rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--sans);
    font-weight: 500;
    margin-bottom: 0;
}

.detalhe-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0;
}
.detalhe-spec-item {
    text-align: center;
    padding: 0.65rem 0.35rem;
    background: #faf9f7;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.055);
}
.detalhe-spec-value {
    display: block;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.1;
}
.detalhe-spec-label {
    display: block;
    font-size: 0.63rem;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.18rem;
    font-weight: 500;
    font-family: var(--sans);
}

.detalhe-feature-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.detalhe-custos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.78rem;
    color: var(--text-sub);
    font-family: var(--sans);
}

.detalhe-cta-primary {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--gold);
    color: #1a1a1a !important;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 1rem;
    border-radius: 3px;
    text-decoration: none !important;
    transition: background 0.2s ease;
    margin-bottom: 0.65rem;
    border: none;
    cursor: pointer;
}
.detalhe-cta-primary:hover { background: var(--gold-dark); }

.detalhe-cta-secondary {
    display: block;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.12);
    color: var(--text-sub) !important;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.72rem;
    border-radius: 3px;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.detalhe-cta-secondary:hover { border-color: var(--gold); color: var(--gold) !important; }

/* Right col: description */
.detalhe-desc-titulo {
    font-family: var(--sans);
    font-size: 1.37rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sub);
    margin-bottom: 0.6rem;
}
.detalhe-desc-texto {
    font-size: 1.35rem;
    color: var(--text-sub);
    line-height: 1.78;
    white-space: pre-line;
    font-family: var(--sans);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.luxury-footer {
    background: #0a0a0a;
    border-top: 1px solid rgba(201,169,110,0.14);
    padding: 3.5rem 2rem 2.25rem;
    text-align: center;
}
.luxury-footer-inner { max-width: 960px; margin: 0 auto; }
.luxury-footer-logo { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 0.45rem; }
.luxury-footer-tagline { font-size: 0.7rem; color: rgba(255,255,255,0.38); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.75rem; font-family: var(--sans); }
.luxury-footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.luxury-footer-links a { font-size: 0.74rem; color: rgba(255,255,255,0.4) !important; text-decoration: none !important; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s ease; font-family: var(--sans); }
.luxury-footer-links a:hover { color: var(--gold) !important; }
.luxury-footer-copy { font-size: 0.7rem; color: rgba(255,255,255,0.2); font-family: var(--sans); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   BLAZOR ERROR UI
   ═══════════════════════════════════════════════════════════════════ */
#blazor-error-ui {
    background: #111;
    border-top: 1px solid var(--gold);
    bottom: 0; left: 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
    display: none;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    font-family: var(--sans);
}
#blazor-error-ui .reload { color: var(--gold); text-decoration: underline; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.75rem; color: rgba(255,255,255,0.45); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .luxury-nav-hamburger { display: flex; }
    .luxury-nav-menu {
        position: fixed;
        top: 0; right: -100%;
        width: min(290px, 84vw);
        height: 100vh;
        background: rgba(10,10,10,0.97);
        flex-direction: column;
        align-items: flex-start;
        padding: calc(var(--nav-h) + 1.5rem) 1.75rem 2rem;
        gap: 0.1rem;
        transition: right 0.32s ease;
        border-left: 1px solid rgba(201,169,110,0.12);
        z-index: 999;
    }
    .luxury-nav-menu.open { right: 0; }
    .luxury-nav-link { width: 100%; padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); border-radius: 0; font-size: 0.85rem; }
    .luxury-nav-cta { margin-left: 0; margin-top: 1.5rem; width: 100%; text-align: center; padding: 0.7rem 1.25rem; }

    .detalhe-info-cols { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 767.98px) {
    .luxury-hero { min-height: 430px; padding: 4rem 1.25rem 4rem; }
    .luxury-hero-search { flex-direction: column; align-items: stretch; gap: 0.4rem; padding: 0.5rem; }
    .luxury-hero-search select { width: 100%; }
    .luxury-hero-search-divider { display: none; }
    .luxury-hero-search-btn { width: 100%; padding: 0.75rem; }
    .hero-avancado-grid { grid-template-columns: repeat(2, 1fr); }
    .luxury-catalog-section { padding: 2rem 1rem 3rem; }
    .luxury-filters { padding: 1.25rem 1rem 1rem; }

    .imovel-row-card { flex-direction: column; }
    .imovel-row-photo { width: 100%; min-height: 240px; }
    .imovel-row-info { border-left: none; border-top: 1px solid rgba(0,0,0,0.05); padding: 1.25rem 1.25rem 1rem; }

    .detalhe-container { padding: 1.75rem 1rem 3rem; }
    .detalhe-thumb { width: 68px; height: 46px; }
}

@media (max-width: 575.98px) {
    .luxury-hero-title { font-size: 2.1rem; }
    .imovel-row-titulo { font-size: 1.15rem; }
    .detalhe-preco-venda { font-size: 1.8rem; }
    .detalhe-specs-grid { grid-template-columns: repeat(3, 1fr); }
}