/* ─────────────────────────────────────────────────────────────────────────
   Știu eu un Băiat — minimalistic, high-contrast, large touch targets.
   Designed for professionals 40+: big fonts, clear buttons, simple layout.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --brand:      #1f6feb;
    --brand-dark: #1a5fd0;
    --ink:        #1a1f26;
    --muted:      #5b6675;
    --line:       #e3e8ef;
    --bg:         #f6f8fb;
    --card:       #ffffff;
    --ok:         #1a9e5c;
    --warn:       #c9820a;
    --danger:     #d23b3b;
    --radius:     14px;
    --shadow:     0 1px 3px rgba(20,30,50,.08), 0 6px 20px rgba(20,30,50,.06);
    --font:       system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    /* No blue "selecting" box flashing when a button/link/text is tapped (item 2). */
    -webkit-tap-highlight-color: transparent;
}
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    font-size: 17px;            /* larger base for readability */
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;         /* never let a stray wide element zoom the page out */
    /* UI text is not selectable (item 1): avoids accidental highlight on tap/long-press.
       Real text fields opt back in below so typing/copy still works. */
    -webkit-user-select: none;
    user-select: none;
}
/* Inputs and anything explicitly marked .selectable stay selectable (so users can
   still select/copy their own text, chat messages, etc.). */
input, textarea, select, [contenteditable], .selectable, .selectable * {
    -webkit-user-select: text;
    user-select: text;
}
/* Admins moderate content, so they can select/copy any text on the page (item 3). */
body.is-admin, body.is-admin * {
    -webkit-user-select: text;
    user-select: text;
}

/* When the sidebar or a modal is open, freeze the page behind it. JS adds .scroll-lock
   and pins the body so mobile browsers don't hide/show the URL bar mid-scroll, which
   used to shift the whole interface up by the address-bar height (item 3). */
body.scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}
img { max-width: 100%; height: auto; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 18px; background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 30;
    flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; }
.brand-logo { font-size: 26px; }
img.brand-logo { height: 30px; width: auto; display: block; }

/* Wordmark on the landing hero */
.hero-logo { display: block; margin: 0 auto 14px; width: min(240px, 60vw); height: auto; }
.brand-name { font-size: 19px; }
.topnav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.topnav a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 600; }
.topnav a:hover, .topnav a.active { background: #eef3fe; color: var(--brand); }
.nav-badge {
    display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center;
    background: var(--danger); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800;
    padding: 0 5px; margin-left: 4px; vertical-align: middle;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
.lang-switch {
    border: 1px solid var(--line); background: #fff; border-radius: 10px;
    padding: 8px 12px; font-weight: 700; cursor: pointer; color: var(--muted);
}
.auth-slot { display: flex; gap: 8px; align-items: center; }
.hamburger { display: none; background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer; padding: 6px 10px; color: var(--ink); border-radius: 8px; }
.hamburger:hover { background: #f0f3f8; }
.nav-backdrop { display: none; }

@media (max-width: 760px) {
    .hamburger { display: block; order: -1; }
    .topbar { flex-wrap: nowrap; gap: 8px; }
    .topnav {
        position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 82vw;
        background: #fff; flex-direction: column; align-items: stretch; gap: 4px;
        padding: 64px 12px 16px; transform: translateX(-100%); transition: transform .22s ease;
        z-index: 60; box-shadow: 2px 0 22px rgba(15,24,37,.18); overflow-y: auto; flex: none;
    }
    body.nav-open .topnav { transform: translateX(0); }
    /* The sidebar lives inside .topbar's stacking context (sticky + z-index). Without
       this, the backdrop (a sibling of .topbar) paints OVER the whole topbar context
       and swallows taps on the menu. Lifting the open topbar above the backdrop fixes it. */
    body.nav-open .topbar { z-index: 70; }
    .topnav a { padding: 13px 12px; border-radius: 10px; font-size: 16px; }
    .nav-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(15,24,37,.45);
        z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.app { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 22px 18px 48px; }
/* Permanent footer: legal/help links always reachable (EU/RO information duties). */
.footer { background: #0f1825; color: #aeb9c9; padding: 14px 18px 16px; text-align: center; font-size: 12.5px; }
.footer small { max-width: 820px; display: block; margin: 0 auto; line-height: 1.5; }
.footer-links { font-size: 14px; margin-bottom: 6px; }
.footer-links a { color: #9fc1ff; text-decoration: underline; white-space: nowrap; }
.footer-copy { margin-top: 6px; color: #7d8a9c; }

/* Legal pages (Terms / Privacy) */
.legal { max-width: 820px; }
.legal h1 { font-size: 26px; margin: 0 0 6px; }
.legal h2 { font-size: 19px; margin: 22px 0 8px; }
.legal p, .legal li { line-height: 1.6; color: #2b3340; }
.legal .draft-banner {
    background: #fff5e0; border: 1px solid #f0c772; color: #8a5a00;
    padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; font-size: 14px;
}
.legal .updated { color: var(--muted); font-size: 13px; margin-bottom: 18px; }

.page-title { font-size: 26px; margin: 4px 0 18px; }
.section { margin-bottom: 26px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid.cats { grid-template-columns: repeat(4, 1fr); }   /* desktop: 4 columns */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 12px; cursor: pointer;
    font: inherit; font-weight: 700; padding: 13px 18px; min-height: 48px;
    background: var(--brand); color: #fff; text-decoration: none; transition: .15s;
    white-space: nowrap;        /* never break a label mid-word (e.g. "Înscrie-te") */
}
.btn:hover { background: var(--brand-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: #f0f3f8; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.danger { background: var(--danger); }
.btn.ok { background: var(--ok); }
.btn.small { min-height: 38px; padding: 8px 12px; font-size: 15px; border-radius: 10px; }
.btn.block { width: 100%; }
/* Compact labelled action buttons (admin tables) — smaller, but keep the text. */
.btn.mini { min-height: 28px; padding: 4px 9px; font-size: 12.5px; font-weight: 600; gap: 4px; border-radius: 8px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 5px; max-width: 340px; }
table.data.compact th, table.data.compact td { padding: 7px 10px; font-size: 14px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px;
}
.cat-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 22px 14px; cursor: pointer; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    text-decoration: none; color: var(--ink); transition: .15s;
}
.cat-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.cat-icon { font-size: 38px; }
.cat-name { font-weight: 700; font-size: 16px; }

/* Inline SVG category icons: size follows the surrounding font, brand-coloured. */
.cat-svg { display: inline-flex; vertical-align: -0.15em; color: var(--brand); }
.cat-svg svg { width: 1em; height: 1em; }
.cat-icon .cat-svg { vertical-align: baseline; }
.tag .cat-svg { font-size: 14px; }
.choice .cat-svg { font-size: 17px; margin-right: 2px; }

.pro-card { display: flex; flex-direction: column; gap: 10px; }
.pro-head { display: flex; gap: 12px; align-items: center; }
.avatar {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    background: #e9eef6 center/cover; display: grid; place-items: center;
    font-size: 22px; color: var(--brand); font-weight: 800; flex: none;
}
.pro-name { font-weight: 700; font-size: 18px; }
.pro-company { color: var(--muted); font-size: 14px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { background: #eef3fe; color: var(--brand); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.tag.gray { background: #eef1f5; color: var(--muted); }

.stars { color: #f4b400; letter-spacing: 1px; }
.rating-line { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.badge-ok { color: var(--ok); font-weight: 700; }
.badge-off { color: var(--muted); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form { max-width: 560px; }
.form.wide { max-width: 720px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field label .req { color: var(--danger); font-weight: 700; }
.field .hint { font-size: 13px; color: var(--muted); margin-top: 4px; }
.input, .select, .textarea {
    width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px;
    font: inherit; background: #fff; min-height: 48px;
}
.input:focus, .select:focus, .textarea:focus { outline: 2px solid #cfe0ff; border-color: var(--brand); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.eye-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; cursor: pointer; font-size: 18px; opacity: .5; padding: 4px 6px;
}
.eye-toggle.on, .eye-toggle:hover { opacity: 1; }
.textarea { min-height: 110px; resize: vertical; }
.field.error .input, .field.error .select, .field.error .textarea { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: 13px; margin-top: 4px; display: none; }
.field.error .err { display: block; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; }
.checkbox input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.choice {
    display: flex; gap: 8px; align-items: center; border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 12px; cursor: pointer;
}
.choice.checked { border-color: var(--brand); background: #eef3fe; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.segmented button { border: none; background: #fff; padding: 12px 18px; font: inherit; font-weight: 700; cursor: pointer; color: var(--muted); }
.segmented button.active { background: var(--brand); color: #fff; }

/* ── Filters bar ─────────────────────────────────────────────────────────── */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; margin-bottom: 18px; }

/* ── Chat ────────────────────────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; height: 60vh; min-height: 360px; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; border-radius: 12px; }
.bubble { max-width: 75%; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.bubble.mine { align-self: flex-end; background: var(--brand); color: #fff; border-color: var(--brand); }
.bubble .meta { font-size: 11px; opacity: .7; margin-top: 4px; }
.chat-input { display: flex; gap: 8px; margin-top: 10px; }
.chat-attach { flex: none; padding: 0 14px; }
.bubble .chat-photo { display: block; max-width: 220px; max-height: 240px; width: auto; border-radius: 10px; margin: 2px 0 4px; cursor: zoom-in; }
.chat-note { font-size: 12.5px; color: var(--muted); margin: 4px 2px 0; }

/* ── Photo attachments (job requests, chat, reports) ─────────────────────────── */
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-thumb {
    position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--line); background: #f0f3f8; flex: none;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photo-thumb .photo-remove {
    position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border: 0; border-radius: 50%;
    background: rgba(15,24,37,.7); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.photo-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.photo-disclaimer {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin: 10px 0;
    background: #fff5e0; border: 1px solid #f0c772; color: #8a5a00; border-radius: 10px; font-size: 13.5px;
}
.photo-disclaimer span { flex: none; }

/* Full-screen image viewer (lightbox) */
.lightbox {
    position: fixed; inset: 0; z-index: 300; background: rgba(8,12,20,.92);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; }
/* Only give up height when there is actually a caption/counter strip to clear. */
.lightbox.with-foot img { max-height: 84vh; }
.lightbox .lb-close {
    position: absolute; top: 12px; right: 16px; background: transparent; border: 0;
    color: #fff; font-size: 36px; line-height: 1; cursor: pointer; z-index: 2;
}
/* Step through a gallery. Also swipeable and ← → on a keyboard; the arrows are the
   discoverable version of both. Disabled (not hidden) at the ends, so the controls
   don't jump around as you move through the set. */
.lightbox .lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 66px; padding: 0; border: 0; border-radius: 10px;
    background: rgba(255,255,255,.14); color: #fff; font-size: 32px; line-height: 1;
    cursor: pointer; z-index: 2;
}
.lightbox .lb-nav:disabled { opacity: .25; cursor: default; }
.lightbox .lb-prev { left: 10px; }
.lightbox .lb-next { right: 10px; }
.lightbox .lb-foot {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 64px 14px;
    text-align: center; color: #fff; pointer-events: none;
    background: linear-gradient(to top, rgba(8,12,20,.85), rgba(8,12,20,0));
}
.lightbox .lb-caption { font-size: 14.5px; overflow-wrap: anywhere; }
.lightbox .lb-counter { font-size: 13px; opacity: .75; margin-top: 3px; }
@media (max-width: 620px) {
    .lightbox .lb-nav { width: 38px; height: 56px; font-size: 26px; }
    .lightbox .lb-foot { padding: 22px 46px 12px; }
    .lightbox .lb-caption { font-size: 13.5px; }
}

/* ── Misc ────────────────────────────────────────────────────────────────── */
.hero { text-align: center; padding: 28px 12px 8px; }
.hero h1 { font-size: 34px; margin: 0 0 8px; }
.hero p { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 20px; }
.list { display: flex; flex-direction: column; gap: 10px; }
/* flex-wrap so an action group that no longer fits beside the text drops onto its
   own line instead of overflowing the rounded frame (buttons used to spill out of
   the card on phones — the reminders list was the worst case). */
.list-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
/* Let long unbreakable strings (e.g. an email address) wrap inside the box
   instead of overflowing it. Text may break; the frame stays intact. */
.list-item > div { min-width: 0; overflow-wrap: anywhere; }
/* My Works row: the work title and the professional's name are separate click targets
   (open the work vs. open the pro's public profile) — items 7, 10. */
.match-row .match-main { flex: 1; min-width: 0; }
.match-row .match-title { display: block; text-decoration: none; color: inherit; }
.match-row .match-pill { text-decoration: none; flex-shrink: 0; }
.cp-link { color: var(--brand); font-weight: 600; text-decoration: none; }
.cp-link:hover { text-decoration: underline; }
.pill { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pill.requested { background: #fff5e0; color: var(--warn); }
.pill.accepted { background: #e3f6ec; color: var(--ok); }
.pill.completed { background: #eef3fe; color: var(--brand); }
.pill.declined, .pill.cancelled { background: #fbe9e9; color: var(--danger); }
.pill.blocked { background: #fbe9e9; color: var(--danger); }
.pill.active { background: #e3f6ec; color: var(--ok); }
.pill.pending { background: #fff5e0; color: var(--warn); }
table.data { width: 100%; border-collapse: collapse; background: #fff; }
table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
table.data th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.spinner { text-align: center; padding: 40px; color: var(--muted); }
.empty { text-align: center; padding: 36px; color: var(--muted); }

/* A review's text in the moderation list: keep the author's line breaks and let
   long words wrap, so nothing hides outside the row. */
.review-comment {
    margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere;
    background: #f6f8fb; border-radius: 8px; padding: 8px 10px;
}

/* Saved GPS coordinates under the location block (no embedded map on purpose —
   third-party tiles would mean extra requests and a CSP exception). */
.coords-box {
    margin-top: 6px; font-size: 13px; color: var(--muted);
    background: #f0f3f8; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.coords-box .coords-val { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink); }

/* Photos attached to a public review — small square thumbs, tap to enlarge.
   Admins get a ✕ overlay to remove an inappropriate photo in place. */
.review-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.review-photo { position: relative; display: inline-block; line-height: 0; }
.review-photos img {
    width: 72px; height: 72px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--line); cursor: zoom-in;
}
.photo-del {
    position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
    border: 0; border-radius: 999px; background: var(--danger); color: #fff;
    font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── Professional profile: tab strip + stacked sections ──────────────────────
   The strip sticks UNDER the topbar; its `top` is set in JS from the topbar's
   measured height, because that bar wraps to two rows on narrow phones and a
   hard-coded offset would either overlap it or leave a gap. Scroll-snapping is
   deliberately absent: the sections are a continuous read, and a tap on a tab
   just scrolls there. */
.pro-tabs {
    position: sticky; z-index: 20; top: 0;
    display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
    margin: 14px 0 0; padding: 8px 2px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pro-tabs::-webkit-scrollbar { display: none; }
.pro-tab {
    flex: none; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--muted); font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.pro-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* scroll-margin gives the browser's own anchoring the same clearance the JS uses. */
.pro-tabsec { scroll-margin-top: 120px; }
/* The description is free text the pro typed: keep their line breaks, and break
   long unspaced strings rather than letting them stretch the card. */
.pro-description { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Portfolio grid (public profile + the pro's own editor) ───────────────────
   A gallery, not a list: a fixed 4 columns on desktop and 2 on phones. Fixed
   counts rather than auto-fill because the point is a predictable, compact block
   on the profile — auto-fill widened the tiles on big screens and stretched ten
   photos down the page. Square tiles also mean the grid doesn't reflow as the
   images arrive one by one.
   The `src` is always the server's 400px thumbnail; the full-size copy is only
   fetched when someone taps a tile open.
   minmax(0, 1fr) rather than 1fr: a track's automatic minimum is its content's
   min-width, and the editor's caption <input> carries an intrinsic ~20-character
   width — with plain 1fr that pushes the columns wider than the card on a phone. */
.portfolio-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px; margin-top: 12px;
}
.portfolio-item {
    position: relative; margin: 0; min-width: 0; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--line); background: #f0f3f8;
}
.portfolio-item img {
    display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: zoom-in;
}
/* On the public profile the caption floats over the bottom of the photo instead of
   adding a row under it — keeps every tile a pure square, so the whole gallery is
   exactly as tall as its rows. One line, ellipsised; the full text is the img alt. */
.portfolio-grid:not(.editable) .portfolio-item figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px 9px 6px; font-size: 12.5px; color: #fff;
    background: linear-gradient(to top, rgba(10,15,25,.8), rgba(10,15,25,0));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;      /* the tap belongs to the photo underneath */
}
/* Placeholder tiles held in place while the photos are still being fetched, so the
   page doesn't jump when they land. */
.portfolio-item.skeleton { aspect-ratio: 1 / 1; animation: pf-pulse 1.4s ease-in-out infinite; }
@keyframes pf-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }

/* Editing variant on the pro's dashboard: caption field + remove button per tile. */
.portfolio-grid.editable .portfolio-item .photo-remove {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: rgba(15,24,37,.72); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
}
.pf-caption {
    width: 100%; min-width: 0; border: 0; border-top: 1px solid var(--line); background: var(--card);
    padding: 8px 9px; font: inherit; font-size: 13.5px; color: var(--ink);
    -webkit-user-select: text; user-select: text;
}
.pf-caption:focus { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Phones: two columns. Deliberately not one — a single column reads as a list and
   makes a 10-photo portfolio scroll forever, which is what this layout replaced. */
@media (max-width: 620px) {
    .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .portfolio-grid:not(.editable) .portfolio-item figcaption { font-size: 11.5px; padding: 14px 7px 5px; }
    .pf-caption { font-size: 12.5px; padding: 7px; }
}

/* Foot of an endless list: shown once the API has no further page. Replaces the old
   "N professionals" count, which read like a limit rather than a running list. */
.list-end { text-align: center; padding: 18px 10px 26px; color: var(--muted); font-size: 14px; }

/* Social targets in the share sheet — two per row on phones, wider on desktop. */
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.share-grid .btn { width: 100%; }

/* "A new version is available" bar — pinned bottom-centre, above the toasts.
   Only appears when version.json reports a newer build than the loaded page. */
.update-bar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60;
    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
    background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: 14px; font-weight: 600;
}
.update-bar[hidden] { display: none; }
.update-bar .btn { min-height: 34px; padding: 6px 12px; }
.update-bar .btn.ghost { color: #fff; }

/* Locality hint under the location fields. Muted on purpose: a city outside the
   suggestion list is valid (communes aren't in it), so this must not read as an
   error. It sits outside a .field, which is why .field .hint doesn't reach it. */
#locWarn { font-size: 13px; color: var(--muted); margin: 2px 0 0; }

/* Pagination under a results grid (professionals list). Wraps on narrow phones. */
.pager {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 12px; margin: 18px 0 6px; text-align: center;
}
.pager .btn { min-width: 110px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.stat .n { font-size: 28px; font-weight: 800; }
.stat .l { color: var(--muted); font-size: 14px; }

/* ── Push opt-in soft-ask bar ────────────────────────────────────────────── */
.push-prompt { background: #eef3fe; border-bottom: 1px solid #cfe0ff; }
.push-prompt[hidden] { display: none; }
.push-prompt-inner {
    max-width: 1080px; margin: 0 auto; padding: 10px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.push-prompt-msg { font-weight: 600; color: var(--brand); font-size: 15px; }
.push-prompt-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.push-prompt-close {
    background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer;
    color: var(--muted); padding: 2px 8px; border-radius: 8px;
}
.push-prompt-close:hover { background: #dce8ff; color: var(--ink); }
@media (max-width: 620px) {
    .push-prompt-inner { padding: 10px 12px; }
    .push-prompt-msg { font-size: 14px; }
}

/* ── Notification bell ───────────────────────────────────────────────────── */
.notif-bell {
    position: relative; border: 1px solid var(--line); background: #fff; border-radius: 10px;
    padding: 8px 10px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink);
}
.notif-bell:hover { background: #f0f3f8; }
.notif-bell .nav-badge { position: absolute; top: -6px; right: -6px; margin: 0; }

/* Notification center (inside the modal) */
#notifList { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
.notif-item { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.notif-item.unread { background: #eef3fe; border-color: #cfe0ff; }
.notif-item[data-nmatch] { cursor: pointer; }
.notif-item[data-nmatch]:hover { border-color: var(--brand); }
.notif-ico { font-size: 22px; flex: none; line-height: 1.3; }
.notif-main { flex: 1; min-width: 0; }
.notif-time { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Message body: keep the sender's line breaks, break long unbroken strings (URLs),
   and collapse anything long to 3 lines until "vezi mai mult" is tapped. */
.notif-body {
    color: var(--muted); margin-top: 2px;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.notif-body.clamped {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* .btn.notif-more, not .notif-more: it must out-specify .btn.small's min-height. */
.btn.notif-more { padding: 2px 0; min-height: 0; font-size: 13px; font-weight: 700; }

/* ── Dashboard: full-width, more breathing room (req. #2) ─────────────────── */
.dashboard .card { width: 100%; max-width: none; padding: 22px; }
.dashboard .section { margin-bottom: 20px; }
.dashboard .card h3 { margin-top: 0; margin-bottom: 16px; }

/* Styled hint near upload buttons (instead of bare grey text) */
.upload-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.upload-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.file-hint {
    display: inline-flex; align-items: flex-start; gap: 8px; padding: 10px 12px; max-width: 440px;
    background: #f4f7fc; border: 1px solid var(--line); border-radius: 10px;
    font-size: 13.5px; color: var(--muted); line-height: 1.45;
}
.file-hint span { flex: none; }

/* ── Home search bar (req. #6) ───────────────────────────────────────────── */
.hero-search { display: flex; gap: 8px; max-width: 580px; margin: 4px auto 8px; }
.hero-search .input { flex: 1; }
.hero-search-hint { font-size: 14px; max-width: 580px; margin: 0 auto; }

/* ── Professional home stats (req. #3) ───────────────────────────────────── */
.stat-grid.big { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.stat-grid.big .stat { text-align: center; padding: 20px 14px; }
.stat-grid.big .n { font-size: 26px; }
.stat-ico { font-size: 28px; margin-bottom: 6px; }

/* ── Status banners (completion flow, nudges) ────────────────────────────── */
.banner-info, .banner-warn {
    border-radius: 12px; padding: 12px 14px; margin: 10px 0; font-weight: 600;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.banner-info { background: #eef3fe; color: var(--brand); border: 1px solid #cfe0ff; }
.banner-warn { background: #fff5e0; color: var(--warn); border: 1px solid #f0c772; }

/* ── List controls: filter chips + search + sort (req. #5) ───────────────── */
.list-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px;
    font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer;
}
.chip:hover { background: #f0f3f8; }
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Hand-picked broadcast recipients: a chip per person with a remove button. */
.chip.picked {
    display: inline-flex; align-items: center; gap: 6px; cursor: default;
    color: var(--ink); background: #eef3fe; border-color: #cfe0ff;
}
.chip.picked .chip-x {
    border: 0; background: none; cursor: pointer; font: inherit; line-height: 1;
    color: var(--muted); padding: 0 2px;
}
.chip.picked .chip-x:hover { color: var(--danger); }
.picked-list .banner-info { display: block; }
.list-tools { display: flex; gap: 8px; align-items: center; }
.list-tools .input { min-height: 42px; }
.list-tools .select { min-height: 42px; width: auto; }

/* ── Cookie / local-storage consent banner ───────────────────────────────── */
.cookie-banner {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 150;
    width: min(94vw, 720px); background: #0f1825; color: #e7edf6;
    border: 1px solid #2a3a52; border-radius: 14px; box-shadow: 0 8px 30px rgba(8,12,20,.4);
    padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner .cookie-msg { flex: 1; min-width: 220px; font-size: 14px; line-height: 1.5; }
.cookie-banner .cookie-msg a { color: #9fc1ff; text-decoration: underline; }
.cookie-banner .cookie-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 620px) {
    .cookie-banner { bottom: 8px; padding: 12px 14px; gap: 10px; }
    .cookie-banner .cookie-actions { width: 100%; }
    .cookie-banner .cookie-actions .btn { flex: 1; }
}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.toast-host { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
.toast { padding: 13px 16px; border-radius: 12px; color: #fff; box-shadow: var(--shadow); font-weight: 600; }
.toast.info { background: #2d3a4d; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--danger); }

/* ── Modal / popup (legal texts during registration, etc.) ───────────────── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15,24,37,.55); z-index: 200;
    display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto;
}
.modal { position: relative; background: #fff; border-radius: 14px; max-width: 640px; width: 100%; margin: auto; box-shadow: var(--shadow); }
.modal-close {
    position: absolute; top: 8px; right: 12px; background: transparent; border: 0;
    font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 8px;
}
.modal-close:hover { background: #f0f3f8; color: var(--ink); }
.modal-body { padding: 24px; max-height: 82vh; overflow-y: auto; }

/* ── Weekly availability day chips ───────────────────────────────────────── */
.daychips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.daychip {
    border: 1px solid var(--line); background: #f3f5f9; border-radius: 999px;
    padding: 9px 14px; font-weight: 700; cursor: pointer; min-width: 46px; color: var(--muted);
}
.daychip.on { background: #e3f6ec; border-color: #1a9e5c; color: #1a9e5c; }

@media (max-width: 620px) {
    .brand-name { display: none; }
    .hero h1 { font-size: 27px; }
    .hero p { font-size: 16px; }
    .app { padding: 16px 12px 40px; }
    .page-title { font-size: 22px; }

    /* Stack side-by-side form fields so inputs are full-width and legible */
    .row { flex-direction: column; gap: 10px; }
    .row > .field, .row > div { width: 100%; }

    /* ...but a list row's action buttons are not form fields: keep them side by
       side on their own full-width line under the text, sharing the space. */
    .list-item > .row { width: 100%; flex-direction: row; gap: 8px; }
    .list-item > .row > .btn { flex: 1; min-width: 0; }
    .filters { grid-template-columns: 1fr; }
    .choices { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr 1fr; }

    /* Category cards: two compact columns instead of one tall list */
    .grid.cats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .grid.cats .cat-card { padding: 14px 8px; gap: 6px; }
    .grid.cats .cat-icon { font-size: 30px; }
    .grid.cats .cat-name { font-size: 14px; }

    /* Keep the top bar tidy on small screens */
    .topbar { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
    .topbar-right { gap: 6px; margin-left: auto; }
    .auth-slot { gap: 6px; }
    .topnav a { padding: 8px 10px; }
    .auth-slot .muted { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Compact, flexible top-bar buttons so two of them + the language switch never
       overflow the screen width (which caused horizontal scroll / a zoomed look). */
    .auth-slot .btn.small { padding: 8px 10px; font-size: 13px; min-height: 40px; }
    .lang-switch { padding: 8px 10px; font-size: 14px; }

    /* Bigger touch targets, comfortable chat height */
    .btn { min-height: 50px; }
    .chat { height: 55vh; }
    .bubble { max-width: 88%; }

    /* New controls stack full-width on phones */
    .hero-search { flex-direction: column; }
    .list-controls { flex-direction: column; align-items: stretch; }
    .list-tools { width: 100%; }
    .list-tools .input { flex: 1; }
    .list-tools .select { flex: none; }
    .dashboard .card { padding: 18px; }
    .upload-row { gap: 14px; }
}