/* Global overrides on top of MudBlazor */
.mud-nav-link.active { font-weight: 600; }
.calc-result-card { border-left: 4px solid var(--mud-palette-primary); }
.positive { color: #2E7D32; }
.negative { color: #C62828; }
.mud-table-cell code { font-family: monospace; font-size: 0.85rem; }

/* DetailDrawer (Components/Subcomponents) - same shell as Helpdesk's, but colours come from the
   MudBlazor palette so it follows the dark-mode toggle instead of forcing white. */
.detail-drawer-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.detail-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-top: 6px solid var(--mud-palette-primary);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.detail-drawer-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
}

.detail-drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ---- Sign-in overlay (Components/Auth/SignInDialog) ------------------------------------------ */
.signin-dialog .mud-dialog-content { padding: 0; }
.signin-header {
    padding: 24px 24px 8px;
    border-top: 6px solid var(--mud-palette-primary);
    text-align: center;
}
.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}
.or-divider::before, .or-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--mud-palette-divider);
}
.google-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    margin-top: 16px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: 500 0.95rem Roboto, Helvetica, Arial, sans-serif;
    cursor: pointer;
}
.google-button:hover { background: var(--mud-palette-action-default-hover); }
.google-button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.persona-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: 0.85rem Roboto, Helvetica, Arial, sans-serif;
    cursor: pointer;
}
.persona-option span { color: var(--mud-palette-text-secondary); font-size: 0.75rem; }
.persona-option.selected {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}
.persona-option:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ---- Membership --------------------------------------------------------------------------- */
.trial-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 24px;
    background: var(--mud-palette-secondary);
    color: #212121;
    font-size: 0.9rem;
}
.trial-banner a { color: #1B5E20; font-weight: 600; }
.locked-card { border-left: 4px solid var(--mud-palette-secondary); }
.nav-lock { margin-left: 6px; opacity: 0.6; vertical-align: middle; }
.plan-card.current { border: 2px solid var(--mud-palette-primary); }

/* ---- Content ------------------------------------------------------------------------------ */
.stat-tile { text-align: center; }
.brand { white-space: nowrap; }
.teaser-blur { filter: blur(5px); user-select: none; pointer-events: none; }
.glossary dt { font-weight: 600; margin-top: 12px; }
.glossary dd { margin: 2px 0 0; color: var(--mud-palette-text-secondary); }
.checklist .mud-checkbox { align-items: flex-start; }
.listing-card { height: 100%; display: flex; flex-direction: column; }
.listing-card .mud-card-content { flex: 1; }

.verify-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 24px;
    background: var(--mud-palette-info-lighten, #E3F2FD);
    color: #0D47A1;
    font-size: 0.9rem;
}

/* ---- Listing photos ---------------------------------------------------------------------- */
.photo-thumb { position: relative; width: 96px; height: 72px; border-radius: 4px; overflow: hidden; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-remove { position: absolute !important; top: 0; right: 0; background: rgba(0,0,0,.55) !important; color: #fff !important; }
.photo-add {
    width: 96px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px dashed var(--mud-palette-lines-inputs); border-radius: 4px; cursor: pointer;
    font-size: .75rem; color: var(--mud-palette-text-secondary);
}
.photo-add:hover { background: var(--mud-palette-action-default-hover); }
.listing-photo { width: 100%; height: 180px; object-fit: cover; display: block; }
.listing-photo-placeholder {
    height: 180px; display: flex; align-items: center; justify-content: center;
    background: var(--mud-palette-background-gray, #eee); color: var(--mud-palette-text-disabled);
}
.gallery-photo { width: 100%; height: 380px; object-fit: cover; }

/* Children of the scrolling drawer body keep their natural height (a flex column would otherwise squash them, e.g. the sale/rent toggle). */
.detail-drawer-body > * { flex-shrink: 0; }

/* Sale / rent switch: two comfortable buttons, not the full page width. */
.kind-toggle { width: 100%; max-width: 320px; min-height: 40px; }

/* ---- Listing gallery (detail page) ---------------------------------------------------------- */
.gallery-main { position: relative; background: #000; }
.gallery-main .gallery-photo { object-fit: contain; display: block; }
.gallery-nav { position: absolute !important; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.5) !important; color: #fff !important; }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
.gallery-count { position: absolute; right: 12px; bottom: 10px; padding: 2px 8px; border-radius: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; }
.gallery-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; }
.gallery-thumb { flex: 0 0 auto; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; background: none; opacity: .7; }
.gallery-thumb.selected, .gallery-thumb:hover { border-color: var(--mud-palette-primary); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .gallery-main .gallery-photo { height: 260px; } }

/* Photos keep their shape (nothing cropped); the space around them is filled with a blurred copy instead of black. */
.gallery-main { height: 420px; overflow: hidden; background: var(--mud-palette-background-gray); }
.gallery-backdrop { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(28px) brightness(.85); transform: scale(1.1); }
.gallery-main .gallery-photo { position: relative; height: 100%; width: 100%; object-fit: contain; }
@media (max-width: 600px) { .gallery-main { height: 280px; } .gallery-main .gallery-photo { height: 100%; } }

/* ---- For agents page ----------------------------------------------------------------------- */
.agents-hero { background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%); color: var(--mud-palette-primary-text); border-radius: 12px; }
.agents-hero-kicker { opacity: .85; letter-spacing: .12em; }
.agents-benefit { height: 100%; }
.agent-stat { text-align: center; }
.lister-card .mud-avatar { flex-shrink: 0; }
@media (max-width: 600px) { .agents-hero .mud-typography-h3 { font-size: 1.8rem; } }