/* campvoy shared design system */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&display=swap');
:root {
    --ink: #102d29;
    --teal: #0e7c6b;
    --teal-dark: #0a5d50;
    --sand: #f7f4ee;
    --amber: #e8a33d;
    --muted: #647570;
    --line: #e7e2d8;
    --card: #ffffff;
    --radius: 16px;
    --shadow-sm: 0 1px 2px rgba(16,45,41,0.04), 0 2px 8px rgba(16,45,41,0.05);
    --shadow-md: 0 8px 30px rgba(16,45,41,0.08);
    --shadow-lg: 0 18px 50px rgba(16,45,41,0.13);
    --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* The browser's own [hidden] rule is the WEAKEST there is, so any class that sets `display` beats it and the
   element stays on screen. That bit us twice: the map's "Tentar outra vez" and the sidebar's "Aplicar filtros"
   are both .btn (display:inline-block), so `el.hidden = true` did nothing and both were always visible.
   Enforcing it here means `hidden` can be trusted anywhere, instead of each case needing its own override. */
[hidden] { display: none !important; }
html { scroll-padding-top: 80px; }   /* keep anchored content clear of the sticky header */
body {
    font-family: var(--font);
    color: var(--ink); background: var(--sand); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 10px rgba(16,45,41,0.05); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.5rem; }
.brand { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); display: inline-flex; }
.brand span { color: var(--amber); }
.brand-logo { height: 34px; display: block; }
.brand-logo-sm { height: 26px; vertical-align: middle; }
.lang-select { border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.4rem; font-size: 0.8rem; font-weight: 600; background: #fff; color: var(--ink); cursor: pointer; }
nav { display: flex; gap: 1.2rem; align-items: center; }
.nav-link { font-weight: 500; color: var(--ink); opacity: 0.85; font-size: 0.95rem; }
.nav-link:hover { opacity: 1; }
.nav-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }

/* Account menu (collapses all "my account" items behind the name) */
.nav-menu { position: relative; }
.nav-account { display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: none;
    font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; padding: 0.25rem 0.35rem; }
.nav-account:hover { opacity: 0.85; }
.nav-caret { font-size: 0.7rem; opacity: 0.55; }
.nav-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; background: #fff;
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.4rem;
    display: none; flex-direction: column; z-index: 60; }
.nav-menu.open .nav-menu-panel { display: flex; }
.nav-menu-panel a, .nav-menu-panel button { text-align: left; background: none; border: none; font: inherit;
    font-size: 0.92rem; color: var(--ink); padding: 0.55rem 0.7rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.nav-menu-panel a:hover, .nav-menu-panel button:hover { background: var(--sand); }
.nav-menu-panel form { margin: 0; }
.nav-menu-panel form button { width: 100%; color: #9b1c1c; font-weight: 600; }
.nav-menu-sep { height: 1px; background: var(--line); margin: 0.3rem 0.25rem; }
.btn { border: none; border-radius: 999px; padding: 0.58rem 1.15rem; font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em; cursor: pointer; display: inline-block; transition: background .15s, transform .1s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #16413a; }
.btn-amber { background: var(--amber); color: var(--ink); box-shadow: 0 4px 14px rgba(232,163,61,0.35); }
.btn-amber:hover { background: #e29a2c; }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 0.9rem 1.4rem; font-size: 1rem; width: 100%; text-align: center; }

/* Search bar */
.searchbar { display: flex; gap: 0.5rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.4rem 0.4rem 1.2rem; max-width: 620px; margin: 2rem 0 1rem; box-shadow: 0 6px 20px rgba(15,46,42,0.05); }
.searchbar input { flex: 1; border: none; outline: none; font-size: 1rem; background: transparent; }
.searchbar button { flex: 0 0 auto; border-radius: 999px; }

.page-title { font-size: 1.8rem; letter-spacing: -0.02em; margin-top: 2rem; }
.results-count { color: var(--muted); margin-bottom: 1.5rem; }

/* Search filter bar */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 1.6rem 0 1.8rem;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0.7rem; box-shadow: var(--shadow-sm); }
.filters input, .filters select {
    padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px;
    font-size: 0.95rem; background: var(--sand); outline: none; font-family: inherit; color: var(--ink);
}
.filters input:focus, .filters select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.15); }
.filters input[type=text] { flex: 1; min-width: 200px; }
.filters input[type=number] { width: 120px; }

/* Vehicle grid + cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; padding-bottom: 3rem; }
.vcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; display: block; }
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.vcard-img { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #d9e2df; position: relative; }
/* Corner badge marking demonstration listings (slug demo-*). Sits in any position:relative image box. */
.demo-tag { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.32rem;
    background: rgba(16,45,41,0.82); color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 0.3rem 0.55rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.demo-tag::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--amber); }
/* A saved van whose listing is no longer published: dimmed, non-clickable, with a plain "Indisponível" tag. */
.rcard-off-tag { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; background: rgba(20,20,20,0.78); color: #fff;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.55rem;
    border-radius: 999px; }
.rcard-off .rcard-img { filter: grayscale(1); opacity: 0.55; }
.rcard-off .rcard-link { cursor: default; }
.rcard-off .rcard-body { opacity: 0.7; }
.vcard-body { padding: 1rem 1.1rem 1.2rem; }
.vcard-loc { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.vcard-body h3 { font-size: 1.08rem; margin: 0.25rem 0; letter-spacing: -0.01em; }
.vcard-supplier { color: var(--muted); font-size: 0.88rem; }
.vcard-price { margin-top: 0.7rem; font-size: 0.95rem; color: var(--muted); }
.vcard-price strong { color: var(--ink); font-size: 1.25rem; }
.empty { color: var(--muted); padding: 2rem 0 4rem; }

/* Vehicle detail */
.crumb { color: var(--muted); font-size: 0.9rem; margin: 1.5rem 0; display: inline-block; }
.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; padding-bottom: 3rem; }
.gallery .main-img { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius); background-size: cover; background-position: center; background-color: #d9e2df; }
.gallery .thumbs { display: flex; gap: 0.7rem; margin-top: 0.7rem; }
.gallery .thumbs div { width: 90px; height: 64px; border-radius: 10px; background-size: cover; background-position: center; background-color: #d9e2df; cursor: pointer; opacity: 0.7; transition: opacity .15s, outline-color .15s; outline: 2px solid transparent; outline-offset: 2px; }
.gallery .thumbs div:hover { opacity: 1; }
.gallery .thumbs div.active { opacity: 1; outline-color: var(--teal); }

/* Gallery "view all" button + full-screen lightbox */
.gallery-main { position: relative; }
.gallery-open {
    position: absolute; right: 0.9rem; bottom: 0.9rem;
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(15,46,42,0.08); color: var(--ink);
    font-weight: 600; font-size: 0.85rem; padding: 0.5rem 0.9rem; border-radius: 999px;
    cursor: pointer; box-shadow: 0 4px 14px rgba(15,46,42,0.18); transition: transform .12s, background .12s;
}
.gallery-open:hover { transform: translateY(-1px); background: #fff; }

.lightbox {
    position: fixed; inset: 0; z-index: 1000; display: none;
    grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto; align-items: center; gap: 0.5rem;
    padding: clamp(1rem, 3vw, 2.5rem);
    background: rgba(8,20,18,0.93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lightbox.open { display: grid; animation: lb-fade .2s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lb-stage { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; min-height: 0; }
.lb-img { max-width: min(90vw, 1200px); max-height: 76vh; object-fit: contain; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5); background: #0e1a18; animation: lb-zoom .22s ease; }
@keyframes lb-zoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.lb-counter { margin-top: 0.8rem; color: rgba(255,255,255,0.85); font-size: 0.85rem; font-weight: 600;
    background: rgba(255,255,255,0.12); padding: 0.25rem 0.85rem; border-radius: 999px; }
.lb-nav { grid-row: 1; align-self: center; width: 3rem; height: 3rem; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.14); color: #fff; font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: background .12s, transform .12s; }
.lb-nav:hover { background: rgba(255,255,255,0.28); transform: scale(1.06); }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-close { position: absolute; top: 1rem; right: 1.2rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.14); color: #fff; font-size: 1.7rem; line-height: 1; transition: background .12s; }
.lb-close:hover { background: rgba(255,255,255,0.3); }
.lb-strip { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: nowrap; overflow-x: auto; padding: 0.5rem; }
.lb-thumb { width: 84px; height: 58px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: 0.5; flex: 0 0 auto;
    outline: 2px solid transparent; outline-offset: 1px; transition: opacity .12s, outline-color .12s; }
.lb-thumb:hover { opacity: 0.85; }
.lb-thumb.active { opacity: 1; outline-color: var(--amber); }
@media (max-width: 700px) {
    .lb-nav { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }
    .lb-img { max-width: 94vw; max-height: 62vh; }
}
.detail-loc { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.detail-title { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0.3rem 0; }
.detail-supplier { color: var(--muted); margin-bottom: 1.5rem; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.5rem; margin: 1.5rem 0; }
.spec { display: flex; flex-direction: column; }
.spec .k { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.spec .v { font-weight: 600; }
.detail-desc { margin: 1.5rem 0; max-width: 60ch; }
.book-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-md); }
.book-box .price { font-size: 1.8rem; font-weight: 800; }
.book-box .price small { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.book-box .hint { color: var(--muted); font-size: 0.82rem; margin-top: 0.8rem; text-align: center; }
.book-box .demo-note { margin-top: 0.9rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--sand);
    border: 1px solid var(--line); color: var(--ink); font-size: 0.84rem; font-weight: 600; line-height: 1.35;
    display: flex; align-items: flex-start; gap: 0.5rem; }
.book-box .demo-note::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.34rem;
    border-radius: 50%; background: var(--amber); }

/* Operator public profile */
.op-cover { height: 220px; border-radius: var(--radius); background-size: cover; background-position: center; background-color: #d9e2df; margin-top: 1.5rem; }
.op-head { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 0.6rem; }
.op-logo { flex: none; width: 72px; height: 72px; border-radius: 14px; background-size: cover; background-position: center; background-color: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.op-contacts { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.op-contacts a { color: var(--teal-dark); font-weight: 600; }
.op-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin: 2rem 0; }
.op-info-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.op-info-item h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.op-info-item p { color: var(--muted); font-size: 0.9rem; white-space: pre-line; margin: 0; }

/* Messaging */
.nav-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--amber); color: var(--ink); font-size: 0.7rem; font-weight: 800; vertical-align: middle; }
/* Two-pane messages (list + open thread). Fills the viewport below the sticky header. */
.msg-shell { display: grid; grid-template-columns: 340px 1fr; gap: 0; max-width: 1180px; margin: 1.1rem auto; padding: 0 1rem;
    height: calc(100vh - 128px); min-height: 460px; }
.msg-shell > .msg-sidebar, .msg-shell > .msg-main { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.msg-sidebar { border-radius: var(--radius) 0 0 var(--radius); border-right: none; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.msg-main { border-radius: 0 var(--radius) var(--radius) 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* Sidebar: title, search, filter tabs, scrolling list */
.msg-sidebar-head { padding: 1.1rem 1.1rem 0.6rem; border-bottom: 1px solid var(--line); }
.msg-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.msg-search { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: 10px; padding: 0 0.7rem; color: var(--muted); background: var(--sand); }
.msg-search input { flex: 1; border: none; background: transparent; padding: 0.55rem 0; font: inherit; font-size: 0.9rem; color: var(--ink); outline: none; }
.msg-tabs { display: flex; gap: 0.3rem; margin: 0.7rem 0 0; }
.msg-tab { border: none; background: transparent; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; }
.msg-tab.is-active { background: var(--ink); color: #fff; }

.conv-list { flex: 1; overflow-y: auto; }
.msg-empty-list { color: var(--muted); padding: 1.2rem; font-size: 0.9rem; }
.conv { display: flex; gap: 0.7rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); position: relative; }
.conv:hover { background: var(--sand); }
.conv.is-active { background: #eef4f1; box-shadow: inset 3px 0 0 var(--teal); }
.conv-avatar { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #dfe6e2 center/cover no-repeat; }
.conv-avatar.is-blank { background: linear-gradient(135deg, #cfe0d8, #b9d0c6); }
.conv-body { flex: 1; min-width: 0; }
.conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.conv-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { flex: none; font-size: 0.74rem; color: var(--muted); }
.conv-veh { font-size: 0.8rem; color: var(--teal-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; }
.conv-snip { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-unread { position: absolute; top: 0.85rem; right: 1.1rem; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: var(--ink); font-size: 0.7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* Status badge — one look, coloured by real booking state. */
.conv-badge { flex: none; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: #eceae3; color: var(--muted); white-space: nowrap; }
.conv-badge.st-PENDING { background: #fbecd4; color: #9a6712; }
.conv-badge.st-PAID, .conv-badge.st-IN_PROGRESS { background: #dcefe6; color: var(--teal-dark); }
.conv-badge.st-COMPLETED { background: #e6ebe9; color: #4a5f59; }
.conv-badge.st-CANCELLED, .conv-badge.st-REJECTED, .conv-badge.st-EXPIRED { background: #f6e0da; color: #97402c; }
.conv-badge.st-inquiry { background: #eceae3; color: var(--muted); }

/* Thread pane */
.thread-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); }
.thread-back { display: none; color: var(--ink); }
.thread-avatar { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #dfe6e2 center/cover no-repeat; }
.thread-avatar.is-blank { background: linear-gradient(135deg, #cfe0d8, #b9d0c6); }
.thread-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thread-who strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-who span { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-details { flex: none; }
/* Kebab menu (native <details>, no JS) */
.thread-menu { flex: none; position: relative; }
.thread-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); }
.thread-menu summary::-webkit-details-marker { display: none; }
.thread-menu summary:hover { background: var(--sand); color: var(--ink); }
.thread-menu-panel { position: absolute; right: 0; top: 40px; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.35rem; min-width: 160px; display: flex; flex-direction: column; }
.thread-menu-panel a { font-size: 0.9rem; color: var(--ink); padding: 0.55rem 0.7rem; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.thread-menu-panel a:hover { background: var(--sand); }

.thread-booking { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; align-items: center; padding: 0.75rem 1.1rem; background: var(--sand); border-bottom: 1px solid var(--line); }
.tb-block { display: flex; flex-direction: column; gap: 0.1rem; }
.tb-right { text-align: right; }
.tb-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tb-value { font-size: 0.92rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 0.4rem; }
.tb-nights { color: var(--muted); font-weight: 500; }

.thread-scroll { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 0.4rem; display: flex; flex-direction: column; }
.day-sep { text-align: center; margin: 0.5rem 0; }
.day-sep span { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: #eceae3; padding: 0.2rem 0.7rem; border-radius: 999px; }
.bubble-row { display: flex; align-items: flex-end; gap: 0.45rem; margin: 0.25rem 0; }
.bubble-row.mine { justify-content: flex-end; }
.bubble-row.theirs { justify-content: flex-start; }
.bubble-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #cfe0d8 center/cover no-repeat; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: var(--teal-dark); }
.bubble-av.is-empty { background: none; }
/* Attachment inside a bubble: a download chip for documents */
.bubble-file { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.6rem; margin-bottom: 0.25rem; border-radius: 10px; background: rgba(0,0,0,0.06); color: inherit; text-decoration: none; max-width: 220px; }
.bubble.mine .bubble-file { background: rgba(255,255,255,0.14); }
.bubble-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.bubble { max-width: 72%; padding: 0.4rem 0.7rem; border-radius: 18px; font-size: 0.92rem; line-height: 1.35; }
.bubble.theirs { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.mine { background: #1d3b33; color: #fff; border-bottom-right-radius: 5px; }   /* forest green, lifted off --ink */
.bubble-text { white-space: pre-line; word-break: break-word; }
/* Timestamp tucked inline after the text — keeps short messages compact instead of tall pills. */
.bubble-time { font-size: 0.64rem; opacity: 0.55; margin-left: 0.45rem; white-space: nowrap; vertical-align: baseline; }
.bubble-status { text-align: right; font-size: 0.64rem; color: var(--muted); margin: 0.1rem 0.2rem 0.35rem 0; }

.thread-compose { padding: 0.7rem 1.1rem; border-top: 1px solid var(--line); }
.compose-row { display: flex; gap: 0.6rem; align-items: flex-end; }
.thread-compose textarea { flex: 1; padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 0.93rem; resize: none; max-height: 140px; background: var(--sand); }
.thread-compose .btn { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.compose-attach { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); cursor: pointer; background: #fff; }
.compose-attach:hover { color: var(--teal-dark); border-color: var(--teal); }
.compose-preview { position: relative; display: inline-block; margin-bottom: 0.6rem; }
.compose-preview img { max-height: 90px; max-width: 160px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.compose-preview button { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--ink); color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.compose-filechip { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; color: var(--teal-dark); font-size: 0.85rem; max-width: 280px; }
.compose-filechip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-filechip button { flex: none; margin-left: 0.2rem; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--line); color: var(--ink); font-size: 0.85rem; line-height: 1; cursor: pointer; }

/* An image inside a message bubble */
.bubble-img { display: block; margin: -0.1rem 0 0.3rem; }
.bubble-img img { max-width: 240px; max-height: 260px; border-radius: 12px; display: block; }
.bubble.mine .bubble-img img { border: 1px solid rgba(255,255,255,0.15); }

/* Empty right pane */
.msg-main-empty { align-items: center; justify-content: center; }
.msg-empty { text-align: center; max-width: 360px; padding: 2rem; }
.msg-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sand); color: var(--teal); margin-bottom: 0.9rem; }
.msg-empty h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.msg-empty p { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.3rem; }
.msg-assure { display: flex; gap: 0.6rem; text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.9rem; color: var(--teal-dark); }
.msg-assure div { display: flex; flex-direction: column; gap: 0.15rem; }
.msg-assure strong { font-size: 0.86rem; color: var(--ink); }
.msg-assure span { font-size: 0.8rem; color: var(--muted); }

/* Mobile: one pane at a time. The inbox shows the list; an open thread shows the thread with a back arrow. */
@media (max-width: 820px) {
    .msg-shell { grid-template-columns: 1fr; height: calc(100vh - 116px); margin: 0.5rem auto; }
    .msg-sidebar { border-radius: var(--radius); border-right: 1px solid var(--line); }
    .msg-main { border-radius: var(--radius); }
    .msg-shell-thread .msg-sidebar { display: none; }          /* thread open → hide the list */
    .msg-shell:not(.msg-shell-thread) .msg-main-empty { display: none; }  /* inbox → hide the empty pane */
    .thread-back { display: inline-flex; }
    .thread-details { display: none; }
}

.site-footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 2.6rem 0 2.2rem; font-size: 0.9rem; margin-top: 3rem; }
.site-footer .brand-sm { color: #fff; font-weight: 800; }
.site-footer .brand-sm span { color: var(--amber); }
/* Brand + blurb on the left, links + copyright on the right; stacks on narrow screens. */
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap; }
.footer-brand { max-width: 34ch; }
.footer-blurb { margin-top: 0.8rem; font-size: 0.86rem; line-height: 1.6; color: rgba(255,255,255,0.62); }
.footer-end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem; text-align: right; }
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.78); font-size: 0.86rem; font-weight: 600; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 0.8rem; color: rgba(255,255,255,0.45); }
.footer-social { display: flex; gap: 0.6rem; }
.footer-social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.08); transition: background .15s, color .15s, transform .12s; }
.footer-social a:hover { background: rgba(255,255,255,0.16); color: #fff; transform: translateY(-1px); }
@media (max-width: 640px) {
    .footer-end { align-items: flex-start; text-align: left; }
}

/* On-demand translation ("Traduzir" link under free-text content) */
.t-btn { background: none; border: none; padding: 0; margin-top: 0.45rem; color: var(--teal-dark); font-weight: 600; font-size: 0.88rem; cursor: pointer; display: inline-block; }
.t-btn:hover { text-decoration: underline; }
.t-btn:disabled { opacity: 0.6; cursor: default; text-decoration: none; }

/* Legal / policy pages */
.legal { max-width: 760px; margin: 2rem auto 4rem; line-height: 1.65; color: var(--ink); }
.legal h1 { font-size: 1.9rem; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
.legal .updated { color: var(--muted); font-size: 0.88rem; margin: 0.2rem 0 1.4rem; }
.legal h2 { font-size: 1.12rem; margin: 2rem 0 0.5rem; }
.legal p, .legal li { font-size: 0.97rem; }
.legal ul { padding-left: 1.2rem; margin: 0.4rem 0; }
.legal li { margin-bottom: 0.35rem; }
.legal a { color: var(--teal-dark); font-weight: 600; }
.legal .draft-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; padding: 0.8rem 1rem; border-radius: 10px; font-size: 0.9rem; margin: 1rem 0 1.6rem; font-weight: 500; }

@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } }

/* Booking form on the detail page */
.book-form { display: flex; flex-direction: column; gap: 0.7rem; margin: 1rem 0 0.4rem; }
/* flex-start, so a taller field (one carrying a hint) can't drag its neighbour's input off the line. */
.book-form .row { display: flex; gap: 0.6rem; align-items: flex-start; }
.book-form label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; flex: 1; }
/* textarea too — the booking form's "nota para o anfitrião" was the one control left looking raw. */
.book-form input, .book-form textarea { width: 100%; margin-top: 0.3rem; padding: 0.6rem 0.7rem;
    border: 1px solid var(--line); border-radius: 10px; font-size: 0.95rem; font-family: inherit; }
.book-form input:focus, .book-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.14); }
/* The host's rule, under its field. Resets the label's uppercase + tracking — it's a sentence, not a label. */
.book-form .hint { display: block; margin-top: 0.3rem; font-size: 0.72rem; text-transform: none;
    letter-spacing: 0; font-weight: 500; color: var(--muted); }
/* Date of birth: three selects instead of a calendar (a calendar is for nearby dates, not for 1985). */
.dob { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.dob select { flex: 1 1 0; min-width: 0; padding: 0.6rem 0.5rem; border: 1px solid var(--line);
    border-radius: 10px; font: inherit; font-size: 0.95rem; background: #fff; color: var(--ink);
    text-transform: none; letter-spacing: 0; font-weight: 500; cursor: pointer; }
.dob select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.14); }
/* The month name is the widest of the three and the day the narrowest. */
.dob select:nth-child(1) { flex: 0 1 22%; }
.dob select:nth-child(3) { flex: 0 1 30%; }
.dob.is-invalid select { border-color: #9b1c1c; }
/* On the account page the group sits in a .field, which styles its own controls. */
.field .dob select { width: auto; }

/* A field the browser has flagged, checked on blur against the same rules the server enforces. */
.book-form input.is-invalid { border-color: #9b1c1c; }
.book-form input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(155, 28, 28, 0.14); }
.book-form .field-error { display: block; margin-top: 0.3rem; font-size: 0.74rem; font-weight: 600;
    text-transform: none; letter-spacing: 0; color: #9b1c1c; }
/* The hint is redundant once the same field is showing a real error. */
.book-form label:has(.field-error) .hint { display: none; }

/* Reservation review + confirmation */
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; padding-bottom: 3rem; }
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.summary-card .ph { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: #d9e2df; }
.summary-card .b { padding: 1.1rem 1.2rem; }
.breakdown { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.breakdown td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.breakdown td:last-child { text-align: right; font-weight: 600; }
.breakdown tr.total td { border-bottom: none; font-size: 1.15rem; font-weight: 800; padding-top: 0.9rem; }
.note { color: var(--muted); font-size: 0.85rem; }
.alert-box { background: #fde8e8; color: #9b1c1c; padding: 0.8rem 1rem; border-radius: 10px; margin: 1rem 0; font-size: 0.92rem; }
/* Semantic variants so success/info notices aren't styled red (was faked with inline overrides everywhere). */
.alert-box.success { background: #e0f0e8; color: #0a5d50; }
.alert-box.info { background: #eef3f0; color: var(--ink); }
.alert-box.warning { background: #fdf0d8; color: #8a5a12; }
/* Visually hidden but available to screen readers (e.g. a page <h1> on the results page). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* Accessibility: a single visible keyboard-focus ring across all interactive elements. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .vcard:focus-visible,
select:focus-visible, .nav-account:focus-visible, summary:focus-visible {
    outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px;
}

.badge { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.badge.PENDING { background: #fdf0d8; color: #8a5a12; }
.badge.CONFIRMED, .badge.PAID, .badge.COMPLETED, .badge.IN_PROGRESS { background: #e0f0e8; color: var(--teal-dark); }
.badge.CANCELLED, .badge.REJECTED, .badge.EXPIRED { background: #f0e0e0; color: #9b1c1c; }

/* Trust "Verificado" pill — shown on profiles/listings whose owner passed identity review. */
.verified-chip { display: inline-flex; align-items: center; gap: 0.28rem; background: #e0f0e8; color: var(--teal-dark);
    border-radius: 999px; padding: 0.2rem 0.62rem; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.verified-chip::before { content: ""; width: 0.95em; height: 0.95em; flex: none; border-radius: 50%;
    background: var(--teal, #0a7d6e); -webkit-mask: no-repeat center/0.62em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
    mask: no-repeat center/0.62em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }

textarea { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 0.95rem; resize: vertical; }

/* Booking list */
.blist { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 3rem; }
.brow { display: flex; gap: 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; align-items: stretch; }
.brow .thumb { width: 160px; background-size: cover; background-position: center; background-color: #d9e2df; flex: 0 0 auto; }
.brow .body { padding: 1rem 1.2rem; flex: 1; }
.brow .body h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.brow .body .meta { color: var(--muted); font-size: 0.9rem; }
.brow .body .ref { font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } .brow .thumb { display: none; } }

/* Dashboard */
.dash-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 1.5rem; }
.dash-head h1 { font-size: 1.8rem; letter-spacing: -0.02em; }
.dash-head .sub { color: var(--muted); font-size: 0.95rem; }
.section-title { font-size: 1.2rem; margin: 2rem 0 1rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.stat .n { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.stat .k { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }

/* O preço, no resumo de publicar. Em destaque porque é o número que o viajante paga e o único do resumo
   que pode nunca ter sido escolhido pelo anfitrião. */
.pub-price { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0.9rem 0 0;
             padding:0.9rem 1.1rem; background:var(--sand); border:1px solid var(--line); border-radius:12px; }
.pub-price-k { display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:.05em;
               color:var(--muted); font-weight:700; }
.pub-price-v { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

/* ---- Disponibilidade ---- */
.av-wrap { max-width: 1000px; }
.av-head { margin: 0 0 1.4rem; }
.av-head .page-title { margin: 0 0 0.2rem; }
.av-van { color: var(--muted); margin: 0; font-size: 1rem; }
/* .form-card traz max-width:760px e aparece DEPOIS no ficheiro, por isso ganhava a uma regra de igual
   peso — daí a especificidade extra em vez de mudar a ordem. */
.av-wrap .form-card.av-card { max-width: none; padding: 1.4rem; }
.av-h2 { font-size: 1.1rem; margin: 0 0 0.3rem; }
.av-h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.av-lead { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 1rem; }
.av-section { margin-top: 1.8rem; }
.av-count { color: var(--muted); font-weight: 600; }
.av-arrow { color: var(--muted); margin: 0 0.2rem; }

/* De / Até / Motivo / botão numa linha, com os campos a caber. Estava no componente .filters, que é a
   barra de pesquisa: labels colados aos campos e o motivo a comer o espaço todo. */
.av-block-form { display: grid; grid-template-columns: repeat(2, minmax(150px, 200px)) 1fr auto;
                 gap: 0.9rem; align-items: end; }
.av-submit { justify-content: end; }
.av-submit .btn { white-space: nowrap; }
@media (max-width: 780px) { .av-block-form { grid-template-columns: 1fr 1fr; }
                            .av-submit { grid-column: 1 / -1; justify-content: start; } }

/* Exportar e importar lado a lado: configuram-se uma vez e não devem separar o bloqueio dos bloqueios. */
.av-sync { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .av-sync { grid-template-columns: 1fr; } }

/* O endereço tem de se conseguir LER — estava num campo estreito com scroll horizontal. */
.av-url input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: 0.8rem; background: var(--sand); }
.av-url-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.7rem; flex-wrap: wrap; }

.av-import { display: grid; gap: 0.9rem; }
.av-import .av-submit { justify-content: start; }

.av-subs { margin-top: 1rem; }
.av-suburl { word-break: break-all; font-size: 0.82rem; }
.av-substatus { margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.av-err { color: #9b1c1c; }
.av-syncnow { margin-top: 0.8rem; }

/* ---- Seguro do veículo ---- */
/* O .field label é uma coluna flex, por isso o asterisco de obrigatório caía para a linha de baixo e
   parecia texto solto. Só nos rótulos que o têm — os outros ficam como estavam. */
.field label:has(.req) { flex-direction: row; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }

.ins-wrap { max-width: 1000px; }
.ins-head { margin: 0 0 1.4rem; }
.ins-head .page-title { margin: 0 0 0.2rem; }
.ins-van { color: var(--muted); margin: 0; font-size: 1rem; }

/* Os três passos. A página é uma revisão feita por uma pessoa, e sem isto ninguém sabia que havia espera. */
.ins-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
             list-style: none; margin: 0 0 1.6rem; padding: 0; counter-reset: none; }
.ins-steps li { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem;
                background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.ins-steps .n { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 999px;
                display: grid; place-items: center; font-size: 0.8rem; font-weight: 800;
                background: var(--sand); color: var(--muted); }
.ins-steps .t { font-size: 0.88rem; line-height: 1.3; }
.ins-steps li.now { border-color: var(--teal); box-shadow: var(--ring); color: var(--ink); }
.ins-steps li.now .n { background: var(--teal); color: #fff; }
.ins-steps li.done { color: var(--ink); }
.ins-steps li.done .n { background: #e0f0e8; color: var(--teal-dark); }
@media (max-width: 720px) { .ins-steps { grid-template-columns: 1fr; } }

/* Formulário à esquerda, o "porquê" à direita — quem já sabe não tem de o ler para chegar aos campos. */
.ins-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4rem;
            align-items: start; }
.ins-wrap .form-card.ins-card { max-width: none; }
.ins-note { color: var(--muted); font-size: 0.92rem; margin: 0.8rem 0 0; line-height: 1.5; }
.ins-actions { margin-top: 1.2rem; }

.ins-facts { margin: 1.2rem 0 0; display: grid; gap: 0.55rem; }
.ins-facts > div { display: flex; justify-content: space-between; gap: 1rem;
                   padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
.ins-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ins-facts dt { color: var(--muted); font-size: 0.9rem; margin: 0; }
.ins-facts dd { margin: 0; font-weight: 600; text-align: right; }

.ins-aside { background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
             padding: 1.3rem; }
.ins-aside h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.ins-aside p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.9rem; }
.ins-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem;
            color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 860px) { .ins-grid { grid-template-columns: 1fr; } }

/* Pares de campos (cilindrada+potência, largura+comprimento, água limpa+suja). A classe era usada no
   formulário do anúncio e NUNCA tinha sido definida — os dois campos ficavam ao que o browser desse, tão
   estreitos que "Largura" aparecia "Largu" e "Comprimento" aparecia "Com". */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 420px) { .row-2 { grid-template-columns: 1fr; } }

/* Setas de spinner fora dos campos numéricos do anúncio. Num preço ou num peso não se sobe de um em um —
   ninguém carrega 3500 vezes para chegar ao PTAC — e as setas roubavam espaço ao próprio número. */
.field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Um KPI que leva a algum lado tem de o parecer. Estes cartões eram <a> sem cursor, sem hover e sem
   foco — indistinguíveis dos que não são links, por isso ninguém lhes tocava e quem tocava não via nada
   acontecer. */
a.stat { display: block; text-decoration: none; color: inherit; cursor: pointer;
         transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
a.stat:hover { border-color: var(--brand, #14532d); box-shadow: 0 4px 14px rgba(16, 45, 41, 0.10);
               transform: translateY(-2px); }
a.stat:focus-visible { outline: 2px solid var(--brand, #14532d); outline-offset: 2px; }

/* Rolar até uma secção que já estava à vista não se vê. Num painel vazio a página inteira cabe no ecrã,
   e o clique parecia morto. O destaque dá a confirmação que o scroll sozinho não consegue dar. */
.settings-card { scroll-margin-top: 1.5rem; }
.settings-card:target, .vrow:target { animation: kpi-target 1.6s ease-out; }
.vrow { scroll-margin-top: 1.5rem; }
@keyframes kpi-target {
    0%   { box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.45); }
    60%  { box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.30); }
    100% { box-shadow: 0 0 0 3px rgba(20, 83, 45, 0); }
}
@media (prefers-reduced-motion: reduce) {
    a.stat:hover { transform: none; }
    .settings-card:target, .vrow:target { animation: none; box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.35); }
}
.vrow { display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem; margin-bottom: 0.9rem; }
.vrow .thumb { width: 120px; height: 80px; border-radius: 10px; background-size: cover; background-position: center; background-color: #d9e2df; flex: 0 0 auto; }
.vrow .info { flex: 1; }
.vrow .info h3 { font-size: 1.05rem; }
.vrow .info .meta { color: var(--muted); font-size: 0.9rem; }
.vrow .actions { display: flex; gap: 0.5rem; align-items: center; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }

/* Forms */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; max-width: 760px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
.field { display: flex; flex-direction: column; margin-bottom: 0.2rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea { padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; font-size: 0.95rem; font-family: inherit; background: #fff; }

/* Drag & drop file picker (progressive enhancement over a native file input) */
.dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 1.3rem; text-align: center; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.dz-over { border-color: var(--teal); background: #f4faf8; }
.dropzone .dz-input { display: none; }
.dz-body { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--muted); pointer-events: none; }
.dz-ic { width: 28px; height: 28px; color: var(--teal); }
.dz-text { font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.dz-text u { color: var(--teal-dark); }
.dz-hint { font-size: 0.76rem; }
.dz-previews { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.dz-thumb { height: 76px; width: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.dz-thumb-file { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
    background: var(--sand); color: var(--muted); padding: 0.3rem; overflow: hidden; }
.dz-thumb-file svg { width: 22px; height: 22px; }
.dz-thumb-loading { display: inline-flex; align-items: center; justify-content: center; height: 76px; width: 76px;
    border-radius: 10px; border: 1px solid var(--line); background: var(--sand); }
.dz-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(0,0,0,0.12);
    border-top-color: var(--teal); animation: dz-spin .7s linear infinite; }
@keyframes dz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dz-spinner { animation-duration: 1.6s; } }
.dz-fname { font-size: 0.58rem; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-replace { display: none; font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }
.dz-existing { position: relative; display: inline-block; line-height: 0; }
.dz-remove-btn { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border: none; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,0.3); }
.dz-remove-btn:hover { background: #b3261e; }
.dropzone.has-file .dz-body { display: none; }
.dropzone.has-file .dz-replace { display: block; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.15); }
.field .field-error { color: #9b1c1c; font-size: 0.8rem; margin-top: 0.3rem; }
/* Required-field marker + optional tag + legend */
.req { color: #b3261e; font-weight: 700; }
.opt { color: var(--muted); font-weight: 400; font-size: 0.85em; }
.form-legend { color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; }
/* intl-tel-input: make the widget fill the field and match the app's inputs */
.field .iti { display: block; width: 100%; }
.field .iti input[type="tel"] { width: 100%; }
.iti__country-list { text-align: left; }
/* Pickup/delivery locations — card-based widget with a modern map */
.pickup { display: flex; flex-direction: column; gap: 0.7rem; }
/* Search / add bar */
.pickup-search { position: relative; }
/* scoped under .pickup so its padding beats the global `.field input` rule (which would hide the icon behind text) */
.pickup .pickup-search-input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 0.72rem 0.9rem 0.72rem 2.6rem; font-size: 0.95rem; background: #fff; }
.pickup .pickup-search-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.15); }
.pickup-search-ic { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; }
.pickup-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.35rem); list-style: none; margin: 0; padding: 0.3rem;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,0.16); max-height: 264px; overflow-y: auto; }
.pickup-result { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.55rem 0.6rem; border-radius: 9px; cursor: pointer; font-size: 0.88rem; line-height: 1.3; }
.pickup-result:hover, .pickup-result.hl { background: #f4faf8; }
.pickup-result .pin-ic { color: var(--teal); flex: none; margin-top: 1px; }
/* Quick chips */
.pickup-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-add { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid var(--line); background: #fff; color: var(--ink);
    border-radius: 999px; padding: 0.34rem 0.8rem; font-size: 0.85rem; cursor: pointer; }
.chip-add:hover { border-color: var(--teal); background: #f4faf8; }
/* Location cards */
.pickup-cards:empty { display: none; }
.pickup-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.pickup-card { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.pickup-card.active { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.12); }
.pickup-badge { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; }
.pickup-card:not(.pinned) .pickup-badge { background: var(--muted); }
.pickup-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pickup-name { border: none; padding: 0; font-size: 0.95rem; font-weight: 600; background: transparent; width: 100%; color: var(--ink); }
.pickup-name:focus { outline: none; }
.pickup-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.85rem; }
.pickup-map-btn { border: none; background: transparent; color: var(--teal-dark); font-size: 0.8rem; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 0.25rem; }
.pickup-card:not(.pinned) .pickup-map-btn { color: var(--muted); }
.pickup-appt { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.pickup-appt input { width: auto; margin: 0; }
.pickup-remove { flex: none; border: none; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 6px; line-height: 1; }
.pickup-remove:hover { color: #b3261e; background: #fbeaea; }
.pickup-appt-tag { color: var(--muted); font-size: 0.85rem; }
/* Map */
.pickup-map { height: 360px; border-radius: 14px; border: 1px solid var(--line); position: relative; z-index: 0; overflow: hidden; }
.pickup.placing .pickup-map .leaflet-container { cursor: crosshair; }
.pickup-map .leaflet-container { font: inherit; }
/* Numbered pins (divIcon) */
.pk-pin { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); border: 2px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.8rem; transition: transform .12s, background .12s; }
.pk-pin.active, .pk-pin.hover { background: var(--teal-dark); transform: scale(1.18); z-index: 500; }
/* Map / Satellite segmented toggle */
.pickup-basemaps { display: inline-flex; background: #fff; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.2); overflow: hidden; }
.pickup-basemaps button { border: none; background: #fff; color: var(--ink); font-size: 0.78rem; padding: 0.36rem 0.72rem; cursor: pointer; }
.pickup-basemaps button.active { background: var(--teal); color: #fff; }
/* Locate button */
.pickup-locate { width: 34px; height: 34px; border: none; border-radius: 8px; background: #fff; color: var(--teal-dark); font-size: 1.15rem; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,0.2); }
.pickup-locate:hover { background: #f4faf8; }
@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } }

/* Reviews */
.rating-line { color: var(--ink); font-weight: 600; margin: 0.3rem 0 1rem; }
.rating-line .stars { color: var(--amber); letter-spacing: 1px; }
.rating-line .count { color: var(--muted); font-weight: 500; }
.reviews { margin: 2rem 0; max-width: 60ch; }
.review { border-top: 1px solid var(--line); padding: 1rem 0; }
.review .who { font-weight: 600; }
.review .stars { color: var(--amber); letter-spacing: 1px; }
.review .when { color: var(--muted); font-size: 0.82rem; }
.review p { margin-top: 0.4rem; }
.star-select { display: flex; gap: 0.4rem; }
.star-select label { cursor: pointer; }
.star-select input { margin-right: 0.2rem; }

/* Search pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; margin: 2.5rem 0 1rem; }
.pagination .pg {
    min-width: 2.3rem; height: 2.3rem; padding: 0 0.7rem; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: border-color .15s, color .15s;
}
.pagination a.pg:hover { border-color: var(--teal); color: var(--teal-dark); }
.pagination .pg.active { background: var(--ink); color: #fff; border-color: var(--ink); cursor: default; }
.pagination .pg.disabled { opacity: 0.4; pointer-events: none; }
.pagination .pg.gap { border: none; background: none; min-width: 1rem; padding: 0; color: var(--muted); }

/* Vehicle detail: equipment, rules, includes */
.amenities { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 0.7rem 0 0; }
.amenities .amenity { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; }
.amenities .ck { color: var(--teal); font-weight: 800; }
.rules { list-style: none; padding: 0; margin: 0.7rem 0 0; max-width: 520px; }
.rules li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.rules li strong { color: var(--ink); font-weight: 600; }
.includes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; }
.includes .inc { background: #e4f0ec; color: var(--teal-dark); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600; }

/* Vehicle form: amenity checkbox grid */
/* Colunas mais largas para "Depósito de águas cinzentas" e "Sensores de estacionamento" caberem numa
   linha; e quando ainda assim quebram, a caixa alinha pelo TOPO. Com align-items:center a caixa descia
   para o meio das duas linhas e a grelha ficava com as caixas a alturas diferentes. */
.amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.55rem 1.2rem; margin-top: 0.4rem; }
.amenity-grid label { display: flex; align-items: flex-start; gap: 0.55rem; font-weight: 500; font-size: 0.92rem; cursor: pointer; line-height: 1.35; }
.amenity-grid input { width: auto; margin: 0; flex: 0 0 auto; margin-top: 0.15rem; }

/* ---- Detail page (rich layout) ---- */
.detail-head { padding: 0.4rem 0 1.2rem; }
.detail-head .detail-title { font-size: 1.9rem; margin: 0 0 0.4rem; }
.detail-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; color: var(--muted); font-size: 0.95rem; }
.detail-subline .loc { font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem; }
.detail-subline .rate { color: var(--ink); }
.detail-subline .rate .stars, .reviews .rate .stars { color: var(--amber); }
.chip-soft { background: #eef3f0; color: var(--teal-dark); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.78rem; font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 0; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.chip-style { background: rgba(14,124,107,0.10); border-color: rgba(14,124,107,0.30); color: var(--teal); }

.sec { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.gallery > .sec:first-of-type { border-top: none; }
.sec h2 { font-size: 1.2rem; margin: 0 0 0.9rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.7rem 1rem; }
.amenities .amenity { display: flex; align-items: center; gap: 0.55rem; font-size: 0.93rem; }
.amenities .amenity .ic-check { color: var(--teal); flex: 0 0 auto; }

.inc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 0.8rem; }
.inc-card { display: flex; align-items: center; gap: 0.65rem; background: #eef3f0; border-radius: 14px; padding: 0.9rem 1rem; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.inc-card svg { color: var(--teal); flex: 0 0 auto; }

.map-embed { width: 100%; height: 280px; border: 0; border-radius: var(--radius); display: block; }

.detail-side { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 1rem; }
.host-card { display: flex; align-items: center; gap: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.host-card .host-name { font-weight: 700; }
.host-card .host-type { color: var(--muted); font-size: 0.85rem; }
.avatar-lg { width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--sand); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.avatar-lg.avatar-lg-empty { font-weight: 800; font-size: 1.5rem; color: var(--teal-dark); border: 1px solid var(--line); }
.avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; text-transform: uppercase; }

.reviews .review { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.reviews .review:last-child { border-bottom: none; }
.review-head { display: flex; align-items: center; gap: 0.6rem; }
.review-head .avatar { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }
.review-head .who { font-weight: 600; }
.review-head .when { color: var(--muted); font-size: 0.82rem; }
.review-head .stars { margin-left: auto; color: var(--amber); font-weight: 700; font-size: 0.88rem; }
.review-title { font-weight: 600; margin-top: 0.4rem; }

.similar-wrap { border-top: 1px solid var(--line); }
@media (max-width: 760px) { .detail-side { position: static; } }

/* Login modal */
.modal-overlay { position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-start; justify-content: center;
    padding: 9vh 1rem; background: rgba(8,20,18,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-overlay.open { display: flex; }
.modal-card { background: #fff; border-radius: 18px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); position: relative; }
.modal-card h2 { font-size: 1.5rem; }
.modal-lead { color: var(--muted); margin: 0.3rem 0 1.3rem; font-size: 0.95rem; }
.modal-close { position: absolute; top: 0.7rem; right: 1rem; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer; }
.modal-card label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 1rem; }
.modal-card label span { display: block; margin-bottom: 0.35rem; }
.modal-card input { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; outline: none; font-family: inherit; color: var(--ink); }
.modal-card input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.15); }
.modal-submit { width: 100%; background: var(--ink); color: #fff; border: none; border-radius: 10px; padding: 0.85rem; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: 0.3rem; }
.modal-submit:hover { background: #16413a; }
.modal-meta { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 1rem; }
.modal-meta a { color: var(--teal-dark); font-weight: 600; }

/* Social login (Google now, Apple later) — shared button + "or" divider (modal + auth pages) */
.social-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%;
    padding: 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff;
    font-weight: 600; font-size: 0.95rem; color: var(--ink); cursor: pointer; text-decoration: none;
    transition: border-color .15s, box-shadow .18s, transform .12s; }
.social-btn:hover { border-color: #cfc8ba; box-shadow: 0 4px 14px rgba(16,45,41,0.08); transform: translateY(-1px); }
.divider { display: flex; align-items: center; gap: 0.8rem; text-align: center; color: var(--muted);
    font-size: 0.82rem; margin: 1rem 0 1.2rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- Mobile polish (≤700px): the shared header + dashboard rows were desktop-only ---- */
@media (max-width: 700px) {
    /* Header: tighten so brand + nav + account menu fit a phone without wrapping/clipping. */
    .header-inner { padding: 0.7rem 1rem; }
    nav { gap: 0.75rem; }
    .nav-link { font-size: 0.9rem; }
    .brand-logo { height: 28px; }

    /* Dashboard van/booking rows: let the action buttons drop to a full-width row instead of overflowing. */
    .vrow { flex-wrap: wrap; }
    .vrow .info { flex: 1 1 auto; min-width: 55%; }
    .vrow .actions { width: 100%; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
    .vrow .actions .btn { flex: 1 1 auto; text-align: center; }

    /* Confirmation / multi-button rows: wrap evenly instead of hard inline margins. */
    .btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .btn-row .btn { flex: 1 1 auto; text-align: center; }
}
/* The button-row helper also applies on desktop (replaces ad-hoc inline margins). */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ============================================================
   Host portal shell — sidebar + card sections + sticky actions
   ============================================================ */
.portal { display: flex; gap: 1.6rem; align-items: flex-start; max-width: 1140px; margin: 0 auto; padding: 1.4rem 1rem 2rem; }
.portal-side { flex: 0 0 224px; position: sticky; top: 1.2rem; }
.portal-side .portal-brand { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.portal-side .portal-brand-sub { color: var(--muted); font-size: 0.78rem; margin: 0.1rem 0 1.1rem; }
.portal-nav { display: flex; flex-direction: column; gap: 0.12rem; }
.portal-nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.58rem 0.75rem; border-radius: 10px;
    color: var(--ink); font-weight: 500; font-size: 0.92rem; text-decoration: none; transition: background .12s; }
.portal-nav a:hover { background: #f4faf8; }
.portal-nav a.active { background: #eef7f4; color: var(--teal-dark); font-weight: 700; }
.portal-nav a svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.portal-nav-sep { height: 1px; background: var(--line); margin: 0.7rem 0.2rem; }
.portal-side .btn-new { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.9rem 0 0.2rem; width: 100%; justify-content: center; }
.portal-main { flex: 1 1 auto; min-width: 0; }
.portal-title { font-size: 1.55rem; font-weight: 700; margin: 0 0 0.2rem; letter-spacing: -0.01em; }
.portal-lead { color: var(--muted); margin: 0 0 1.4rem; }
/* Card section */
.settings-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; }
.settings-card > h2, .settings-card > .card-head { display: flex; align-items: center; gap: 0.55rem; font-size: 1.05rem; font-weight: 700; margin: 0 0 1.1rem; }
.settings-card > h2 svg, .settings-card > .card-head svg { width: 20px; height: 20px; color: var(--teal); flex: none; }
.settings-card .card-sub { color: var(--muted); font-size: 0.9rem; font-weight: 400; margin: 0 0 1rem; }
/* Sticky action bar at the bottom of the main column */
.portal-actions { position: sticky; bottom: 0; z-index: 30; display: flex; justify-content: flex-end; align-items: center; gap: 1.1rem;
    margin-top: 0.4rem; padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: 14px;
    background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.4) blur(8px); box-shadow: 0 6px 22px rgba(16,45,41,0.08); }
.portal-actions .cancel { color: var(--muted); text-decoration: none; font-weight: 600; }
.portal-actions .cancel:hover { color: var(--ink); }
/* Reuse: forms inside cards shouldn't add their own card border */
.settings-card .form-card { border: none; padding: 0; margin: 0; max-width: none; box-shadow: none; background: transparent; }
@media (max-width: 860px) {
    .portal { flex-direction: column; gap: 0.8rem; padding: 1rem 0.8rem 2rem; }
    .portal-side { position: static; flex-basis: auto; width: 100%; }
    .portal-side .portal-brand, .portal-side .portal-brand-sub { display: none; }
    .portal-nav { flex-direction: row; overflow-x: auto; gap: 0.3rem; padding-bottom: 0.3rem; -webkit-overflow-scrolling: touch; }
    .portal-nav a { white-space: nowrap; }
    .portal-nav-sep, .portal-side .btn-new { display: none; }
    .settings-card { padding: 1.1rem 1rem; }
}

/* Dashboard cards: nice empty states + clean row lists inside cards */
.card-head .count { color: var(--muted); font-weight: 600; margin-left: 0.15rem; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 2.2rem 1rem; color: var(--muted); }
.empty-state svg { width: 40px; height: 40px; opacity: 0.4; stroke: var(--teal); }
.empty-state .es-title { font-weight: 600; color: var(--ink); font-size: 1rem; }
.empty-state .btn { margin-top: 0.4rem; }
.settings-card .vrow { background: transparent; border: none; border-radius: 0; padding: 0.85rem 0; margin: 0; border-top: 1px solid var(--line); }
.settings-card .vlist .vrow:first-child { border-top: none; padding-top: 0.2rem; }
.settings-card .stats { margin-bottom: 0.4rem; }

/* ══════════════════════════════════════════════════════════════════
   AESTHETIC LAYER — "warm editorial road-trip"
   Appended last: refines depth, type, motion & components. No structure change.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --shadow-sm: 0 1px 2px rgba(16,45,41,0.05), 0 3px 9px rgba(16,45,41,0.05);
    --shadow-md: 0 8px 26px rgba(16,45,41,0.08), 0 2px 6px rgba(16,45,41,0.05);
    --shadow-lg: 0 26px 64px rgba(16,45,41,0.15), 0 8px 20px rgba(16,45,41,0.08);
    --ring: 0 0 0 3px rgba(14,124,107,0.16);
}

/* Atmosphere — warm sand with soft teal + amber light instead of a flat fill */
body {
    background:
        radial-gradient(1100px 560px at 108% -8%, rgba(232,163,61,0.12), transparent 58%),
        radial-gradient(920px 520px at -12% 4%, rgba(14,124,107,0.08), transparent 55%),
        var(--sand);
    background-attachment: fixed;
}

/* Editorial display type for the headline moments (serif ↔ Manrope UI) */
.portal-title, .page-title, .hero h1, .home-hero h1, .detail-title,
.stat .n, .vcard-price strong, .empty-state .es-title, .portal-brand {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
}
.portal-title { font-size: clamp(1.65rem, 2.4vw, 2.1rem); line-height: 1.08; }
.stat .n { font-size: 1.8rem; font-weight: 600; }
.portal-lead { font-size: 1rem; }

/* Header — frosted glass */
.site-header { background: rgba(255,255,255,0.82); backdrop-filter: saturate(1.5) blur(12px); border-bottom-color: rgba(16,45,41,0.07); }

/* Sidebar — active item gets a teal wash + accent bar; icons nudge on hover */
.portal-side .portal-brand-sub { letter-spacing: 0.01em; }
.portal-nav a { position: relative; }
.portal-nav a.active { background: linear-gradient(90deg, rgba(14,124,107,0.15), rgba(14,124,107,0.05)); }
.portal-nav a.active::before { content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--teal); }
.portal-nav a svg { transition: transform .15s ease; }
.portal-nav a:hover svg { transform: translateX(1px); }

/* Cards — softer warm border + elevation; icon chips in section heads */
.settings-card { border-radius: 18px; border-color: rgba(16,45,41,0.08); box-shadow: var(--shadow-sm); }
.settings-card > h2 svg, .settings-card > .card-head svg {
    color: var(--teal-dark); background: rgba(14,124,107,0.10); border-radius: 9px; padding: 6px; box-sizing: content-box; }

/* Stat cards — subtle gradient + hover lift, big serif number */
.stat { border-radius: 16px; border-color: rgba(16,45,41,0.08); box-shadow: var(--shadow-sm);
    background: linear-gradient(180deg, #ffffff, #fffdf8); transition: transform .16s ease, box-shadow .16s ease; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat .k { color: var(--muted); }

/* Buttons — depth + tactile motion */
.btn { transition: transform .12s ease, box-shadow .18s ease, background .18s ease; }
.btn-dark { background: linear-gradient(180deg, #17433b, #102d29); box-shadow: 0 6px 18px rgba(16,45,41,0.22); }
.btn-dark:hover { transform: translateY(-1px); background: linear-gradient(180deg, #1c4c43, #123430); box-shadow: 0 11px 26px rgba(16,45,41,0.30); }
.btn-amber { box-shadow: 0 6px 18px rgba(232,163,61,0.40); }
.btn-amber:hover { transform: translateY(-1px); box-shadow: 0 11px 28px rgba(232,163,61,0.48); }
.btn-ghost { box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.portal-side .btn-new { box-shadow: 0 8px 22px rgba(16,45,41,0.24); }

/* Marketplace cards — lift + image zoom, teal price */
.vcard { border-radius: 18px; box-shadow: var(--shadow-sm); border-color: rgba(16,45,41,0.08); }
.vcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.vcard-img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.vcard:hover .vcard-img { transform: scale(1.045); }
.vcard-price strong { color: var(--teal-dark); }

/* Empty states — icon in a soft teal halo */
.empty-state { padding: 2.6rem 1rem; }
.empty-state svg { width: 30px; height: 30px; opacity: 1; stroke: var(--teal-dark);
    box-sizing: content-box; padding: 15px; border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, rgba(14,124,107,0.16), rgba(14,124,107,0.05)); }
.empty-state .es-title { font-size: 1.1rem; }

/* Inputs — warmer focus ring */
.field input:focus, .field select:focus, .field textarea:focus,
.pickup .pickup-search-input:focus, .pickup-name:focus { box-shadow: var(--ring); }

/* One orchestrated page-load reveal — staggered, respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .settings-card, .dash-head, .portal-main > .stats { animation: cvRise .55s cubic-bezier(.2,.7,.2,1) both; }
    .portal-main > .stats { animation-delay: .04s; }
    .settings-card:nth-of-type(1) { animation-delay: .08s; }
    .settings-card:nth-of-type(2) { animation-delay: .14s; }
    .settings-card:nth-of-type(3) { animation-delay: .20s; }
    .settings-card:nth-of-type(4) { animation-delay: .26s; }
    .settings-card:nth-of-type(5) { animation-delay: .32s; }
    .settings-card:nth-of-type(6) { animation-delay: .38s; }
}
@keyframes cvRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Destination suggestions — our list, not the browser's. A native datalist can't be styled at all, and on a
   dark-themed browser it rendered as a full-height black list covering the page. */
.ac-holder { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 200; margin: 0; padding: 0.35rem;
    list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; }
.ac-list li { padding: 0.6rem 0.75rem; border-radius: 9px; font-size: 0.95rem; color: var(--ink);
    cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.ac-list li:hover, .ac-list li.on { background: var(--sand); }
.ac-list li.on { box-shadow: inset 0 0 0 2px rgba(14,124,107,0.35); }

/* Range calendar (date-range.js) — selectors are scoped under .dr-panel because the search-bar and
   .book-form button rules also match these <button>s, and their padding (1.7rem) alone was wider than a
   day cell: with box-sizing:border-box a box never shrinks below its padding, so width:34px was ignored.
 — two months side by side, in our palette. Desktop only: on touch the OS
   picker is better than anything hand-built, so the native input is left alone there. */
.dr-holder { position: relative; }
/* `top` is set by the script, which decides whether the panel hangs below the field or flips above it. */
.dr-panel { position: absolute; left: 0; top: calc(100% + 10px); z-index: 300; background: #fff;
    border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 0.75rem 0.9rem 0.9rem; }
/* The panel replaces the browser's own picker, so its button on the field is a second way in that opens the
   thing we deliberately didn't want. Chromium ignores display:none here (proved by colouring it red), but it
   does honour opacity — scoped to our holders so ordinary date inputs keep their icon. */
.dr-holder input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; }

/* Header: what is chosen, what is still missing, and a way out. */
.dr-panel .dr-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-bottom: 0.7rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
/* align-items on BOTH rows: without it the chips stretched to the row box and came out ~143px tall — a
   header three times the height of its own text. */
.dr-panel .dr-chips { display: flex; align-items: center; gap: 0.4rem; }
.dr-panel .dr-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
    padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff;
    cursor: pointer; font-family: inherit; text-transform: none; letter-spacing: 0; }
.dr-panel .dr-chip.on { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.14); }
.dr-panel .dr-chip-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.dr-panel .dr-chip-value { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.dr-panel .dr-chip-value.dr-empty { color: #b9c2bf; }
.dr-panel .dr-head-right { display: flex; align-items: center; gap: 0.8rem; }
.dr-panel .dr-note { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.dr-panel .dr-note.hint { font-weight: 500; color: var(--muted); }
.dr-panel .dr-clear { border: none; background: none; font-family: inherit; font-size: 0.8rem; font-weight: 700;
    color: var(--teal-dark); cursor: pointer; text-decoration: underline; padding: 0; text-transform: none; letter-spacing: 0; }
/* The arrows sit over the month titles rather than above them: a row of their own added height to a panel
   that is already tall, and the ends of that row are exactly where the arrows belong anyway. */
.dr-panel .dr-months { position: relative; }
.dr-nav { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; }
.dr-nav > * { pointer-events: auto; }
.dr-panel .dr-arrow:disabled { color: #ccd4d1; cursor: default; background: none; }
.dr-panel .dr-arrow { border: none; background: none; font-size: 1.3rem; line-height: 1; color: var(--ink);
    cursor: pointer; padding: 0.1rem 0.55rem; border-radius: 8px; }
.dr-panel .dr-arrow:hover { background: var(--sand); }
.dr-months { display: flex; gap: 1.3rem; }
/* Fixed cell size, NOT aspect-ratio: an auto-height absolute panel has no height to derive the width from,
   so the squares grew to fill the viewport (a 1068px-wide "calendar"). 34px is the whole geometry here. */
.dr-panel .dr-month { width: 250px; }
.dr-panel .dr-month-name { text-align: center; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.55rem;
    letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.dr-panel .dr-grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
.dr-panel .dr-wd { width: 34px; text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--muted);
    padding-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; }
.dr-panel .dr-day { width: 34px; height: 34px; padding: 0; border: none; background: none; font: inherit;
    font-size: 0.85rem; font-weight: 500; color: var(--ink); border-radius: 9px; cursor: pointer;
    text-transform: none; letter-spacing: 0; }
.dr-panel .dr-day:hover:not(:disabled) { background: var(--sand); }
.dr-panel .dr-day:disabled { color: #c3ccc9; cursor: default; }
/* Já reservado ou bloqueado pelo anfitrião: riscado, para se distinguir de um dia simplesmente passado. */
.dr-panel .dr-day.busy { color: #b9c2bf; text-decoration: line-through; }
/* The range reads as one block: soft fill between, solid ends. */
.dr-panel .dr-day.in { background: #eef3f0; border-radius: 0; }
/* Today is worth marking — it's the anchor everyone counts from. */
.dr-panel .dr-day.today { box-shadow: inset 0 0 0 1px var(--line); }
.dr-panel .dr-day.today.sel { box-shadow: none; }
/* The range you are ABOUT to pick, drawn under the cursor before you commit to it. */
.dr-panel .dr-day.ghost { background: #f2f6f4; }
.dr-panel .dr-day.sel.ghost { background: rgba(14,124,107,0.55); color: #fff; }
.dr-panel .dr-day.sel { background: var(--teal); color: #fff; font-weight: 700; }
.dr-panel .dr-day.sel.start { border-radius: 9px 0 0 9px; }
.dr-panel .dr-day.sel.end { border-radius: 0 9px 9px 0; }
.dr-panel .dr-day.sel.start.end { border-radius: 9px; }
@media (max-width: 720px) { .dr-months { flex-direction: column; gap: 0.8rem; } }

/* ---- Confirmar e pagar (Stitch) ---- */
.pay-page .pay-lead { margin: -0.5rem 0 1.5rem; }
.pay-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem;
    box-shadow: var(--shadow-sm); }
.pay-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.pay-card-head svg { width: 20px; height: 20px; stroke: var(--teal); flex: 0 0 auto; }
.pay-card-head strong { font-size: 1.02rem; letter-spacing: -0.01em; }
#payment-element { margin-bottom: 1rem; min-height: 40px; }
.pay-terms { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1rem 0; font-size: 0.88rem;
    line-height: 1.5; cursor: pointer; }
.pay-terms input { width: 17px; height: 17px; margin-top: 0.15rem; accent-color: var(--teal); flex: 0 0 auto;
    cursor: pointer; }
.pay-terms a { color: var(--teal); font-weight: 600; }
.pay-submit { width: 100%; margin-top: 0.3rem; }
.pay-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.pay-secure { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem; font-size: 0.82rem; }
.pay-secure svg { width: 15px; height: 15px; stroke: var(--teal); flex: 0 0 auto; }
.summary-card .chip-soft { display: inline-block; margin: 0.35rem 0 0.2rem; }
.pay-protection { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1rem; padding: 0.85rem 0.9rem;
    background: #eef3f0; border-radius: 12px; }
.pay-protection svg { width: 20px; height: 20px; stroke: var(--teal); flex: 0 0 auto; margin-top: 0.1rem; }
.pay-protection strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.pay-protection .note { margin: 0; font-size: 0.82rem; }

/* ---- Explorar / search page (Stitch) ---------------------------------------------------------------
   A short image band with the search pill floating over it, then a 3/9 split: sticky filter rail | results.
   ---------------------------------------------------------------------------------------------------- */
.explore-hero { position: relative; height: 320px; display: flex; align-items: center; justify-content: center;
    padding: 0 1.5rem;
    background: linear-gradient(180deg, rgba(16,45,41,0.42), rgba(16,45,41,0.32)),
                url("/images/demo/hero-4d6cce80332e98e5b813f7e881361c74.jpg") center/cover no-repeat; }

/* The pill. Frosted rather than solid white, so the band still reads as a photograph behind it. */
.search-pill { width: 100%; max-width: 1000px; display: flex; align-items: center; gap: 0.4rem;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); color: var(--ink);
    border-radius: 999px; box-shadow: var(--shadow-lg); padding: 0.45rem 0.45rem 0.45rem 0.5rem;
    /* The blur above creates a stacking context, and an UNPOSITIONED one paints with the block layer — below
       every positioned element that follows. Its pop-ups (the calendar, the city suggestions) therefore fell
       under the result cards whatever z-index they carried. Lifting the pill itself is the fix; the pop-ups
       are then stacked inside it. */
    position: relative; z-index: 20; }
.sp-field { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 0.45rem 1.2rem; }
/* Same reason as the home bar: a message inside the pill doubled its height (71px → 145px) and shoved the
   Pesquisar button down. It hangs underneath instead, and the pill keeps its shape. */
/* On its own the white text landed on a photograph and could fall on a pale patch of sky, so it carries its
   own backing rather than depending on whatever image is behind it. */
.sp-field .js-date-err { position: absolute; top: 100%; left: 1.2rem; margin-top: 0.45rem; width: max-content;
    max-width: 22rem; font-size: 0.76rem; font-weight: 600; color: #fff;
    background: rgba(123,26,26,0.92); padding: 0.3rem 0.6rem; border-radius: 8px; }
.sp-field + .sp-field { border-left: 1px solid var(--line); }
.sp-field label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.1rem; }
.sp-field input, .sp-field select { border: none; outline: none; background: transparent; font: inherit;
    font-size: 0.95rem; font-weight: 600; color: var(--ink); padding: 0; width: 100%; min-width: 0; }
.sp-dates { flex: 1.4 1 0; }
.sp-dates-row { display: flex; align-items: center; gap: 0.3rem; }
.sp-dates-row input { flex: 1 1 auto; min-width: 0; }
.sp-dates-row span { color: var(--muted); }
.sp-travellers { flex: 0.9 1 0; }
.sp-submit { flex: 0 0 auto; border-radius: 999px; padding: 0.95rem 1.8rem; gap: 0.45rem; }
.sp-submit svg { width: 17px; height: 17px; }

.explore-layout { max-width: 1280px; margin: 0 auto; padding: 2.2rem 1.5rem 3rem;
    display: grid; grid-template-columns: minmax(210px, 3fr) 9fr; gap: 2rem; align-items: start; }

/* Filter rail */
.filters { position: sticky; top: 90px; }
.filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.filters-head h2 { font-size: 1.15rem; letter-spacing: -0.01em; }
.filters-clear { font-size: 0.82rem; font-weight: 700; color: var(--teal); text-decoration: none; }
.filters-clear:hover { text-decoration: underline; }
.fgroup { border: none; padding: 0 0 1.1rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--line); }
.fgroup:last-of-type { border-bottom: none; }
.fgroup legend { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted); margin-bottom: 0.55rem; padding: 0; }
.fopt { display: flex; align-items: center; gap: 0.6rem; padding: 0.34rem 0.4rem; border-radius: 9px;
    cursor: pointer; font-size: 0.92rem; }
.fopt:hover { background: var(--sand); }
.fopt input { width: 17px; height: 17px; accent-color: var(--teal); cursor: pointer; flex: 0 0 auto; }
.fprice { display: flex; gap: 0.5rem; }
.fprice label { flex: 1; font-size: 0.72rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em; }
.fprice input { width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.6rem; border: 1px solid var(--line);
    border-radius: 10px; font: inherit; font-size: 0.92rem; }
.fprice input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.14); }
.filters-apply { width: 100%; margin-top: 0.4rem; }

/* Results column */
.results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1.4rem; }
.results-head h1 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; }
.results-head .rh-count { font-weight: 500; color: var(--muted); font-size: 0.95rem; }
.sort-form { display: flex; align-items: center; gap: 0.45rem; }
.sort-form label { font-size: 0.82rem; color: var(--muted); }
.sort-form select { border: none; background: transparent; font: inherit; font-size: 0.9rem; font-weight: 700;
    color: var(--ink); cursor: pointer; padding: 0.25rem; border-radius: 8px; }
.sort-form select:focus-visible { outline: 2px solid var(--teal); }

.rgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.rcard { position: relative; background: var(--card); border: 1px solid rgba(16,45,41,0.08); border-radius: 18px;
    overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.rcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rcard-link { display: block; text-decoration: none; color: inherit; }

/* The heart floats over the photo — a sibling of the link, never inside it (a form nested in an <a> is
   invalid and browsers hoist it out, quietly breaking the button). */
.rcard-fav { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; line-height: 0; }
.rcard-fav button, .rcard-fav a { display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: none; border-radius: 50%; cursor: pointer; color: var(--ink);
    background: rgba(255,255,255,0.86); backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(16,45,41,0.18); transition: transform .12s, color .12s, background .12s; }
.rcard-fav svg { width: 18px; height: 18px; }
.rcard-fav button:hover, .rcard-fav a:hover { transform: scale(1.1); background: #fff; color: #c2413b; }
.rcard-fav button.on { color: #c2413b; }
.rcard-fav button:active { transform: scale(0.94); }
.rcard-img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: #d9e2df;
    position: relative; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.rcard:hover .rcard-img { transform: scale(1.045); }
.fav-lead { margin: -0.4rem 0 1.4rem; }
.fav-grid { margin-bottom: 2rem; }
.rcard-body { padding: 1rem 1.1rem 1.1rem; }
.rcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.rcard-top h3 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 0; }
.rcard-rating { flex: 0 0 auto; font-size: 0.88rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.rcard-specs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.rcard-specs .chip { padding: 0.28rem 0.6rem; font-size: 0.76rem; font-weight: 600; }
/* Same icons as the listing page, a size down: four chips have to fit a card, not a page. */
.rcard-specs .chip .chip-ic { flex: 0 0 auto; }
.rcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem;
    margin-top: 0.85rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.rcard-loc { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.rcard-loc svg { width: 13px; height: 13px; stroke: var(--teal); flex: 0 0 auto; }
.rcard-price { text-align: right; white-space: nowrap; }
.rcard-price strong { font-size: 1.2rem; color: var(--teal-dark); display: block; line-height: 1.1; }
.rcard-price span { font-size: 0.72rem; color: var(--muted); }

/* "Ver no mapa" — the mockup's floating pill, centred over the results. */
.map-open { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.8rem; z-index: 900;
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.4rem; border: none;
    border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 700;
    color: #fff; background: var(--ink); box-shadow: var(--shadow-lg); transition: transform .12s; }
.map-open:hover { transform: translateX(-50%) translateY(-2px); }
.map-open svg { width: 17px; height: 17px; }

.map-panel { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center;
    justify-content: center; padding: 1.5rem; background: rgba(16,45,41,0.6); backdrop-filter: blur(3px); }
.map-box { width: min(1000px, 100%); max-height: 88vh; display: flex; flex-direction: column;
    background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.2rem 0.5rem; }
.map-head strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.map-close { border: none; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer;
    color: var(--muted); padding: 0 0.3rem; }
.map-close:hover { color: var(--ink); }
.map-hint { margin: 0 1.2rem 0.7rem; font-size: 0.84rem; color: var(--muted); }
/* Canvas + status share one box: the status sits ON TOP of the map area, so the panel is never a blank
   white void while loading or after a failure. z-index clears Leaflet's own panes and controls (max 800). */
.map-area { position: relative; flex: 1; display: flex; min-height: 380px; }
.map-canvas { flex: 1; min-height: 380px; }
.map-status { position: absolute; inset: 0; z-index: 1000; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.8rem; padding: 1rem;
    background: var(--sand); color: var(--muted); font-size: 0.92rem; text-align: center; }
#mapNote { margin: 0.7rem 1.2rem 1rem; }

/* The count IS the pin — no separate label to drift out of sync with it. */
.map-pin { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800;
    background: var(--teal); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(16,45,41,0.35);
    cursor: pointer; transition: transform .12s; }
.map-pin:hover { transform: scale(1.12); background: var(--teal-dark); }
.map-pin span { font-size: 0.82rem; }

@media (max-width: 980px) {
    .explore-layout { grid-template-columns: 1fr; }
    .filters { position: static; }
    .rgrid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .explore-hero { height: auto; padding: 1.5rem; }
    .search-pill { flex-direction: column; align-items: stretch; border-radius: 20px; }
    .sp-field + .sp-field { border-left: none; border-top: 1px solid var(--line); }
    .sp-submit { border-radius: 14px; }
}

/* Rich marketplace card — location pin, title+price head row, spec chips */
.vcard-loc { display: flex; align-items: center; gap: 0.3rem; }
.vcard-loc svg { width: 13px; height: 13px; stroke: var(--teal); flex: 0 0 auto; }
.vcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0.25rem 0 0.1rem; }
.vcard-head h3 { margin: 0; }
.vcard-head .vcard-price { margin-top: 0; white-space: nowrap; text-align: right; }
.vcard-head .vcard-price strong { font-size: 1.15rem; display: block; line-height: 1.1; }
.vcard-head .vcard-price span { font-size: 0.72rem; color: var(--muted); }
.vcard-specs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.vcard-specs .chip { padding: 0.28rem 0.6rem; font-size: 0.76rem; font-weight: 600; }

/* Logout: full-screen "a terminar sessão…" veil shown for a beat so signing out feels processed. */
#logoutOverlay { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.1rem; color: #fff; opacity: 0;
    transition: opacity .2s ease; background: rgba(16, 45, 41, 0.88); backdrop-filter: blur(3px); }
#logoutOverlay.on { opacity: 1; }
#logoutOverlay .lo-spin { width: 44px; height: 44px; border: 3px solid rgba(255, 255, 255, 0.28);
    border-top-color: #e8a33d; border-radius: 50%; animation: cvSpin .7s linear infinite; }
#logoutOverlay .lo-txt { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
@keyframes cvSpin { to { transform: rotate(360deg); } }

/* Search: active preference filters (from "Ver sugestões") — visible and removable, never silent. */
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 1.1rem; }
.active-filters .af-label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.af-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.7rem; border-radius: 999px;
    background: #e7eeeb; color: var(--teal-dark); font-size: 0.82rem; font-weight: 600; border: 1px solid #d6e2dd; }
.af-chip:hover { background: #dbe7e2; }
.af-clear { color: #a12222; font-size: 0.82rem; font-weight: 700; }
.af-clear:hover { text-decoration: underline; }

/* Review categories — one row per part of the stay, scored 5→1 like the overall star row above it. */
.cat-select { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.45rem 0; }
.cat-select + .cat-select { border-top:1px solid var(--line); }
.cat-select .cat-name { font-size:.95rem; }
.cat-select .cat-stars { display:flex; gap:.35rem; }
.cat-select .cat-stars label { display:inline-flex; align-items:center; gap:.25rem; cursor:pointer; }

/* ---- Vehicle page: living specs, category bars, host card (Stitch "Detalhes da Autocaravana") ---- */

/* Specs as cards rather than a key/value list: each one is a decision someone is making. */
.spec-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:.7rem; margin:0 0 1.1rem; }
.spec-card { background:var(--surface-2, #f6f5f1); border:1px solid var(--line); border-radius:14px; padding:.75rem .9rem; }
.spec-card .sc-ic { display:block; color:var(--ink); margin-bottom:.5rem; }
.spec-card .sc-k { display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
.spec-card .sc-v { font-size:.95rem; }

/* Per-category ratings: the bar makes four numbers comparable at a glance. */
.cat-bars { display:grid; gap:.5rem; margin:0 0 1.2rem; max-width:520px; }
.cat-bar { display:grid; grid-template-columns:11rem 1fr auto; align-items:center; gap:.7rem; }
.cat-bar .cb-k { font-size:.9rem; }
.cat-bar .cb-track { height:5px; border-radius:3px; background:var(--line); overflow:hidden; }
.cat-bar .cb-fill { display:block; height:100%; background:var(--brand, #17443c); }
.cat-bar .cb-v { font-size:.85rem; white-space:nowrap; }

/* Meet your host. NOT .host-card — that name is already taken by the small host box in the booking
   column, and reusing it would have restyled a component on the other side of the page. */
.host-panel { border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.2rem; }
.host-id { display:flex; align-items:center; gap:.9rem; margin-bottom:.8rem; }
.host-avatar { width:56px; height:56px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 56px; }
.host-avatar-letter { display:grid; place-items:center; background:var(--brand, #17443c); color:#fff; font-size:1.4rem; }
.host-name { font-weight:600; font-size:1.05rem; }
.host-meta { color:var(--muted); font-size:.88rem; }
.host-facts { list-style:none; padding:0; margin:0 0 .8rem; display:grid; gap:.3rem; font-size:.92rem; }
.host-bio { white-space:pre-line; margin:0 0 .8rem; }
.host-more { font-size:.92rem; }

@media (max-width: 640px) {
    .cat-bar { grid-template-columns:8rem 1fr auto; }
}

/* A return that would be under the host's minimum stay: the DAY is free, the STAY is too short — so it is
   dimmed, not struck through like a day someone else already has. */
.dr-panel .dr-day.short { color: #c3cac7; text-decoration: none; }

/* The quick-facts chips carry a small icon now, like the spec cards — it is what tells "sleeps 4" apart
   from "4 seats" at a glance, when both are just a 4. */
.chips .chip { display:inline-flex; align-items:center; gap:.4rem; }
.chips .chip .chip-ic { flex:0 0 auto; color:var(--muted); }

/* ---- Booking confirmed (Stitch "Reserva Confirmada - Sucesso") ---- */
/* Only the PAID page gets this. A tick and a celebration over "esta reserva não seguiu em frente" would be
   the page laughing at somebody. */
.conf-hero { text-align:center; padding:2.4rem 1rem 1.6rem; }
.conf-check { display:inline-grid; place-items:center; width:88px; height:88px; border-radius:50%;
    background:var(--brand, #17443c); color:#fff; box-shadow:0 10px 30px rgba(23,68,60,.28); }
.conf-hero-title { font-size:2.1rem; margin:1rem 0 .3rem; }
.conf-hero-sub { color:var(--muted); max-width:34rem; margin:0 auto; }

.next-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:.9rem; margin:0 0 2rem; }
.next-card { display:flex; gap:.8rem; align-items:flex-start; border:1px solid var(--line); border-radius:16px;
    padding:1rem 1.1rem; background:var(--card, #fff); }
.next-card > svg { flex:0 0 auto; color:var(--teal, #0e7c6b); margin-top:.1rem; }
.next-card strong { display:block; margin-bottom:.15rem; }
.next-card span { color:var(--muted); font-size:.92rem; display:block; }
.btn.btn-sm { padding:.35rem .8rem; font-size:.85rem; }

@media (max-width: 640px) { .conf-hero-title { font-size:1.6rem; } }

/* ─────────────── Admin console shell (Stitch "Admin Center" layout, honest data only) ─────────────── */
.admin-body { background: var(--sand); }
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-sidebar { flex: 0 0 232px; background: #fff; border-right: 1px solid var(--line);
    padding: 1.2rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; position: sticky; top: 0;
    height: 100vh; overflow-y: auto; }
.admin-brand { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.5rem 1rem;
    font-weight: 800; color: var(--ink); text-decoration: none; }
.admin-brand img { height: 26px; }
.admin-navgroup { display: flex; flex-direction: column; gap: 0.12rem; }
.admin-navlabel { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
    color: var(--muted); padding: 1rem 0.7rem 0.4rem; }
.admin-navlink { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.7rem; border-radius: 9px;
    font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; border: none;
    background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.admin-navlink svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); }
.admin-navlink.is-active svg { color: var(--teal-dark); }
.admin-navlink:hover { background: #f2f5f3; }
.admin-navlink.is-active { background: rgba(14,124,107,0.12); color: var(--teal-dark); }
.admin-navfoot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.admin-logout { color: #9b1c1c; }
.admin-main { flex: 1 1 auto; padding: 2rem 2.4rem; min-width: 0; max-width: 1200px; }
.admin-main .page-title { margin-bottom: 0.3rem; }

/* KPI cards — real counts, deliberately plain (no sparklines/trend arrows, which would imply data we
   don't have on a fresh platform). */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem;
    margin: 1.4rem 0 2rem; }
.kpi-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-sm); }
.kpi-card .kpi-n { font-size: 1.8rem; font-weight: 800; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.kpi-card .kpi-k { font-size: 0.82rem; color: var(--muted); margin-top: 0.25rem; }
.kpi-card.kpi-attn { border-color: #e6c67a; background: #fdf9ef; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line);
    border-radius: 14px; overflow: hidden; }
.admin-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); font-weight: 700; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 1rem 0 1.2rem; }
.admin-filters input[type=search], .admin-filters select { border: 1px solid var(--line); border-radius: 9px;
    padding: 0.5rem 0.8rem; font-size: 0.9rem; font-family: inherit; background: #fff; color: var(--ink); }
.pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.pill-ok { background: rgba(14,124,107,0.14); color: var(--teal-dark); }
.pill-warn { background: rgba(232,163,61,0.18); color: #8a5b12; }
.pill-muted { background: #eef1ef; color: var(--muted); }
.pill-bad { background: #fbe6e6; color: #9b1c1c; }
@media (max-width: 780px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { flex-basis: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap;
        border-right: none; border-bottom: 1px solid var(--line); }
    .admin-main { padding: 1.2rem; }
}

/* Page header row (title + primary action) and a content column that keeps tables/headers the same width,
   so the action button doesn't drift to the far edge of the wide main area. */
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 0.2rem; }
.admin-content { max-width: 900px; }

/* Console top bar — a slim strip bled to the edges of the main area (cancels .admin-main padding). Real
   chrome only: the signed-in admin on the right. */
.admin-topbar { display: flex; align-items: center; justify-content: space-between;
    margin: -2rem -2.4rem 1.6rem; padding: 0.8rem 2.4rem; background: #fff;
    border-bottom: 1px solid var(--line); }
.admin-topbar-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
    font-weight: 700; color: var(--muted); }
.admin-topbar-user { display: flex; align-items: center; gap: 0.6rem; }
.admin-topbar-name { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.admin-topbar-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.admin-topbar-initial { display: inline-flex; align-items: center; justify-content: center;
    background: var(--teal); color: #fff; font-weight: 700; font-size: 0.85rem; }

/* KPI cards gain a Stitch-style leading icon tile. */
.kpi-card.has-ic { display: flex; align-items: flex-start; gap: 0.8rem; }
.kpi-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: rgba(14,124,107,0.1);
    color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; }
.kpi-ic svg { width: 20px; height: 20px; }

a.kpi-card { transition: box-shadow .15s ease, transform .15s ease; }
a.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-card.kpi-attn .kpi-ic { background: rgba(232,163,61,0.18); color: #8a5b12; }
@media (max-width: 780px) { .admin-topbar { margin: -1.2rem -1.2rem 1.2rem; padding: 0.7rem 1.2rem; } }

/* Top-bar search + notification bell. The search posts to /admin/search; the bell links to the attention
   overview with a live count badge (real, or hidden when zero). */
.admin-topbar-search { position: relative; flex: 1 1 auto; max-width: 460px; }
.admin-topbar-search svg { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.admin-topbar-search input { width: 100%; border: 1px solid var(--line); border-radius: 999px;
    padding: 0.5rem 1rem 0.5rem 2.3rem; font-size: 0.9rem; font-family: inherit; background: var(--sand);
    color: var(--ink); }
.admin-topbar-search input:focus { outline: none; border-color: var(--teal); background: #fff; }
.admin-topbar-right { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.admin-bell { position: relative; display: inline-flex; align-items: center; }
.admin-bell > summary { list-style: none; cursor: pointer; display: inline-flex; color: var(--muted); position: relative; }
.admin-bell > summary::-webkit-details-marker { display: none; }
.admin-bell > summary:hover { color: var(--ink); }
.admin-bell > summary svg { width: 22px; height: 22px; }
.admin-bell-badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: #c0392b; color: #fff; font-size: 0.68rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; }
.admin-bell-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 280px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
    padding: 0.5rem; }
.admin-bell-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
    color: var(--muted); padding: 0.4rem 0.6rem; }
.admin-bell-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.55rem 0.6rem; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 0.9rem;
    font-weight: 600; }
.admin-bell-row:hover { background: #f2f5f3; }
.admin-bell-n { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: rgba(232,163,61,0.2); color: #8a5b12; font-size: 0.76rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; }
.admin-bell-empty { padding: 0.6rem; color: var(--muted); font-size: 0.88rem; text-align: center; }
.admin-search-group { margin-bottom: 1.8rem; }
.admin-search-group h2 { font-size: 0.95rem; margin-bottom: 0.5rem; }
@media (max-width: 640px) { .admin-topbar-search { max-width: none; } .admin-topbar-name { display: none; } }

/* User identity dropdown in the top bar (same native <details> pattern as the bell). */
.admin-usermenu { position: relative; }
.admin-usermenu > summary { list-style: none; cursor: pointer; }
.admin-usermenu > summary::-webkit-details-marker { display: none; }
.admin-usermenu-caret { width: 14px; height: 14px; color: var(--muted); }
.admin-usermenu-panel { width: 200px; }

/* Clickable table rows + admin detail cards. */
.admin-table tr.row-link { cursor: pointer; }
.admin-table tr.row-link:hover td { background: #f7faf9; }
.detail-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.detail-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.3rem; }
.detail-card h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
    margin-bottom: 0.7rem; }
.detail-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; }
.detail-card dt { color: var(--muted); font-size: 0.85rem; }
.detail-card dd { margin: 0; font-weight: 600; font-size: 0.9rem; text-align: right; }

/* Table pager (bookings, and any future paginated admin list). */
.admin-pager { display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    margin-top: 1rem; }
.admin-pager-info { color: var(--muted); font-size: 0.85rem; }
.admin-pager-nav { display: flex; align-items: center; gap: 0.6rem; }
.admin-pager-page { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
/* Compact, brand-tinted pagination inside the admin console (the public search's chunky boxes and big
   margin don't suit a dense table). */
.admin-pager .pagination { margin: 0; gap: 0.3rem; justify-content: flex-start; }
.admin-pager .pagination .pg { min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; }
.admin-pager .pagination a.pg:hover { background: #f2f5f3; border-color: var(--line); color: var(--ink); }
.admin-pager .pagination .pg.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.admin-pager .pagination .pg.disabled { border: none; background: none; color: var(--muted); }
.admin-pager .pagination .pg.gap { height: auto; }

/* ── Import: styled CSV upload zone (replaces the raw browser file input) ── */
.import-card { max-width: 620px; }
.upload-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.55rem; padding: 2.2rem 1.4rem; text-align: center; cursor: pointer;
    border: 2px dashed var(--line); border-radius: 14px; background: #f6f8f6;
    transition: border-color .15s ease, background .15s ease;
}
.upload-drop:hover, .upload-drop.dragover { border-color: var(--teal); background: #eef4f0; }
.upload-drop.has-file { border-style: solid; border-color: var(--teal); background: #eef4f0; }
.upload-drop svg { width: 34px; height: 34px; color: var(--teal-dark); }
.upload-drop .upload-title { font-weight: 600; color: var(--ink); }
.upload-drop .upload-sub { font-size: 0.85rem; color: var(--muted); word-break: break-all; }
.upload-hint { font-size: 0.82rem; color: var(--muted); margin: 0.8rem 0 1.2rem; }

/* Insurance review: highlight a policy that expires within the month. */
.ins-card dd.ins-soon { color: #9b1c1c; font-weight: 600; }

/* Shared admin text field — matches the design system (replaces raw browser inputs across admin pages). */
.admin-input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 9px;
    font-size: 0.92rem; font-family: inherit; background: #fff; color: var(--ink); }
.admin-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.15); }
/* Insurance review — stack the "Nota" label above its field. */
.ins-card form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600;
    font-size: 0.85rem; color: var(--muted); }

/* Report action inside the conversation kebab menu — matches the menu links, in a danger tint. */
.thread-menu-panel .thread-menu-danger { display: block; width: 100%; text-align: left; background: none;
    border: none; cursor: pointer; font: inherit; padding: 0.55rem 0.9rem; color: #b42318; }
.thread-menu-panel .thread-menu-danger:hover { background: #fbeceb; }

/* My bookings — "próxima viagem" hero + section headers */
.next-trip { display: flex; gap: 1rem; align-items: stretch; text-decoration: none; color: inherit;
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff;
    box-shadow: var(--shadow-md); margin: 1rem 0 1.6rem; transition: box-shadow .15s ease, transform .15s ease; }
.next-trip:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: translateY(-2px); }
.next-trip .nt-thumb { flex: 0 0 34%; min-height: 170px; background: var(--sand) center/cover no-repeat; }
.next-trip .nt-body { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
.next-trip .nt-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--teal-dark); }
.next-trip .nt-body h2 { font-size: 1.3rem; margin: 0.1rem 0; }
.next-trip .nt-meta { color: var(--muted); font-size: 0.92rem; }
.next-trip .nt-countdown { align-self: flex-start; margin-top: 0.5rem; background: var(--teal); color: #fff;
    font-weight: 700; font-size: 0.9rem; padding: 0.35rem 0.8rem; border-radius: 999px; }
.mb-section { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; }
.brow-past { opacity: 0.8; }
@media (max-width: 640px) { .next-trip { flex-direction: column; } .next-trip .nt-thumb { min-height: 150px; } }

/* Home "sem inventário" (variante anfitrião): o .hero é flex-column e esticava o CTA à
   largura toda. Conter e centrar o botão (não afeta o hero do viajante, que tem a barra de pesquisa). */
.hero-owner .btn-amber { align-self: center; width: auto; min-width: 260px; margin-top: 0.4rem; }

/* KPIs dos painéis (anfitrião/operador) que ligam à secção que os explica. Como <a> herdariam o
   estilo de link (azul, sublinhado); o hover é a pista de que são clicáveis. Só afeta os que SÃO
   ligações — os do bloco "Rendimento" continuam <div> e ficam iguais. */
a.stat { display: block; color: inherit; text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.stat:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(0,0,0,0.07); transform: translateY(-1px); }
a.stat:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Salto sem colar a secção ao topo (o cabeçalho do site é fixo). O scroll suave respeita quem
   pediu menos movimento no sistema — para essas pessoas o salto é imediato. */
section[id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Declaração de veracidade dos dados (conta + publicação). Destacada porque é um compromisso, não uma
   opção de configuração — quem a marca fica responsável pelo que escreveu. */
.decl-box { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1.2rem; padding: 0.9rem 1rem;
    background: #fbf9f4; border: 1px solid #e6e1d5; border-radius: 12px; font-size: 0.88rem;
    line-height: 1.45; cursor: pointer; }
.decl-box input { width: auto; margin-top: 0.15rem; flex: 0 0 auto; }
/* A declaração como o revisor a vê, ao lado do documento. Monoespaçado porque é um registo a comparar
   campo a campo, não prosa. */
.decl-snapshot { margin-top: 0.5rem; padding: 0.5rem 0.7rem; background: #f7f6f2; border-radius: 8px;
    border: 1px solid #e6e1d5; max-width: 420px; }
.decl-when { display: block; color: var(--muted); font-size: 0.72rem; margin-bottom: 0.25rem; }
.decl-snapshot pre { margin: 0; font-size: 0.76rem; line-height: 1.5; white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.decl-none { margin: 0.5rem 0 0; color: #9b1c1c; font-size: 0.76rem; }

/* Consentimento de cookies (banner do Meta Pixel) — fixo em baixo, não bloqueia a navegação. */
.cv-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000; max-width: 720px;
    margin: 0 auto; background: #fff; border: 1px solid #e2e0d8; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 1rem 1.2rem; display: flex; flex-wrap: wrap;
    align-items: center; gap: 0.8rem 1rem; }
.cv-consent[hidden] { display: none; }
.cv-consent-text { margin: 0; flex: 1 1 260px; font-size: 0.9rem; color: #2f2f2b; line-height: 1.4; }
.cv-consent-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cv-consent-policy { font-size: 0.85rem; color: var(--teal-dark); text-decoration: underline; white-space: nowrap; }
.cv-consent-btn { padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.cv-consent-btn[data-cv-consent="rejected"] { background: transparent; border: 1px solid #cfccc2; color: #2f2f2b; }
@media (max-width: 560px) {
    .cv-consent { flex-direction: column; align-items: stretch; }
    .cv-consent-actions { justify-content: flex-end; }
}

/* Pedido de opt-in no fim do onboarding — separado das ações, para se ler como convite e não como
   mais um passo obrigatório. Não clicar é recusar. */
.hd-optin { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
    margin: 1.6rem 0 0; padding: 1rem 1.2rem; background: #fbf9f4; border: 1px solid #e6e1d5;
    border-radius: 14px; }
.hd-optin p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; max-width: 46ch; }

/* A caixa opcional distingue-se da obrigatória: fundo neutro, para não parecer mais um requisito. */
.decl-box.decl-optional { background: #fff; border-style: dashed; margin-top: 0.6rem; }

/* Marca de campo obrigatório. Os três da morada e o NIF do anfitrião eram exigidos pelo servidor sem
   nada no ecrã a dizê-lo — descobria-se ao falhar o guardar. */
.req { color: #9b1c1c; font-weight: 700; }