/* ================= Shared chrome (header extras, drawer, pop-ups, forms, banners) ================= */
.show-m { display: none !important; }
.lock { overflow: hidden; }
.dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.hdr__actions .btn--icon { position: relative; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: linear-gradient(135deg, #2a2a2e, #111113); border: 1px solid var(--line-2); color: #fff; }
.drawer { position: fixed; inset: 68px 0 0; z-index: 49; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.drawer__panel { margin: 8px 12px; padding: 10px; border-radius: 24px; background: color-mix(in srgb, var(--s2) 88%, transparent); border: 1px solid var(--line-2); display: grid; animation: pop .3s var(--ease); }
.drawer__panel > a { padding: 14px 12px; border-radius: 14px; font-weight: 600; font-size: 17px; }
@media (hover: hover) and (pointer: fine) { .drawer__panel > a:hover { background: var(--glass-hi); } }
.drawer__panel .stores { padding: 12px 4px 4px; }
.drawer__panel .store { flex: 1; }
.appbar__x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--glass-hi); display: grid; place-items: center; cursor: pointer; flex: none; }
.appbar__x svg { width: 16px; height: 16px; }
.ftr .stores { margin-top: 18px; }
/* SEO plan 22.10.2026 L2-6: Facebook and TikTok, a quiet line under the contact. */
.ftr__social { margin: 10px 0 0; }
.ftr__social a { color: var(--ink-2); }
.ftr .store { height: 50px; padding: 0 16px 0 12px; border-radius: 14px; }
.ftr .store strong { font-size: 16px; }
.ftr .store svg { width: 22px; height: 22px; }

/* Center glass pop-up (same as the app) */
.modal { position: fixed; inset: 0; z-index: 105; /* above the phone filters sheet (101), below the snack (130): the category list opened behind it, 30.09.2026 */ display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.modal__pane { position: relative; width: min(440px, 100%); max-height: calc(100svh - 40px); overflow: auto; padding: 28px 24px 24px; border-radius: 32px;
  background: var(--glass); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95); transform: scale(.7); opacity: 0; transition: transform .38s var(--ease), opacity .25s; }
.modal__pane--wide { width: min(720px, 100%); }
:root[data-theme="light"] .modal__pane { background: rgba(255, 255, 255, .72); border-color: rgba(16, 24, 40, .08); }
.modal.in .modal__bg { opacity: 1; }
.modal.in .modal__pane { transform: none; opacity: 1; }
.modal__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-hi); display: grid; place-items: center; cursor: pointer; }
.modal__x svg { width: 18px; height: 18px; }
.modal__t { margin: 0 0 8px; font: 700 24px/1.15 var(--font); letter-spacing: -.02em; text-align: center; padding: 0 30px; }
.modal__p { margin: 0 0 20px; color: var(--muted); text-align: center; text-wrap: pretty; }
.modal__s { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.modal__s a { color: var(--ink); font-weight: 600; }
.modal .stores { justify-content: center; }
.modal .store { flex: 1; min-width: 170px; }
.modal__mascot { width: 150px; aspect-ratio: 1; margin: -10px auto 4px; background: url(../img/mascot-strip.webp) 100% 0 / 1200% 100% no-repeat; }
.modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.modal__actions .btn { width: 100%; }
.modal__list { display: grid; gap: 8px; }
.modal__list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass-hi); cursor: pointer; font-weight: 600; text-align: left; }
.modal__list button[aria-pressed="true"] { border-color: var(--line-2); background: color-mix(in srgb, var(--ink) 9%, transparent); }
@media (hover: hover) and (pointer: fine) { .modal__list button:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--ink) 9%, transparent); } }

/* Switch */
.sw { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--glass-hi); border: 1px solid var(--line); margin-top: 10px; cursor: pointer; }
.sw span { flex: 1; display: grid; gap: 2px; }
.sw small { color: var(--muted); font-size: 13px; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw i { position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--s3); border: 1px solid var(--line-2); transition: background .25s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sw input:checked + i { background: var(--green); border-color: transparent; }
.sw input:checked + i::after { transform: translateX(20px); }
.sw input:disabled + i { opacity: .6; }
.sw input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }

/* Snackbar */
/* 13.10.2026 (admin audit A7): z-index 130, above the pop-ups and side sheets (.acm 120, the listing lightbox 120);
   it was 110 and every message given while one was open stayed under its dark, blurred backdrop (on a phone the
   Administrare sheet covers the whole screen, so nothing showed). As wide as the screen allows, never a thin column. */
.snack { position: fixed; left: 50%; bottom: 96px; z-index: 130; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 16px; font-weight: 500;
  width: max-content; max-width: min(560px, calc(100vw - 32px)); text-align: center; overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--s3) 88%, transparent); border: 1px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity .3s, transform .4s var(--ease); }
.snack.in { opacity: 1; transform: translate(-50%, 0); }
.snack.is-err { border-color: color-mix(in srgb, #ff6b6b 60%, transparent); }
:root[data-theme="light"] .snack.is-err { border-color: color-mix(in srgb, #d92d20 50%, transparent); }

/* Cookie banner */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(460px, calc(100% - 32px)); padding: 18px; border-radius: 24px;
  background: color-mix(in srgb, var(--s2) 82%, transparent); border: 1px solid var(--line-2); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--ease); }
.cookie[hidden] { display: none; }
.cookie.in { opacity: 1; transform: none; }
.cookie p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.cookie b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.cookie a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cookie__b { display: flex; gap: 8px; }
.cookie__b .btn { --h: 42px; flex: 1; padding: 0 12px; font-size: 14px; }

/* Forms (shared) */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13.5px; font-weight: 600; color: var(--muted); }
/* The "wow" box colours (same values as auth.css), so every page's plain boxes and ticks match the approved ones
   (owner 02.10.2026: "încă sunt locuri unde nu se vede ca în poză ... ar trebui să fie cu căsuțe și aici"). */
:root { --fx-a1: rgba(245, 245, 247, .5); --fx-glass: rgba(255, 255, 255, .04); --fx-glass-2: #111113; --fx-edge: rgba(255, 255, 255, .1); --fx-edge-2: rgba(255, 255, 255, .2); --fx-spot: rgba(255, 255, 255, .08); --fx-spring: cubic-bezier(.2, 1.25, .35, 1); }
:root[data-theme="light"] { --fx-a1: rgba(16, 24, 40, .38); --fx-glass: rgba(16, 24, 40, .03); --fx-glass-2: #fff; --fx-edge: #e4e7ec; --fx-edge-2: rgba(16, 24, 40, .2); --fx-spot: rgba(16, 24, 40, .05); }
.input { width: 100%; height: 56px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--fx-edge); background: var(--fx-glass); color: var(--ink); font: 500 16px var(--font); outline: 0; transition: border-color .25s, background .25s, box-shadow .35s, transform .35s var(--fx-spring); }
@media (hover: hover) and (pointer: fine) { .input:hover:not(:focus) { border-color: var(--fx-edge-2); } }
textarea.input { height: auto; min-height: 150px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; cursor: pointer; }
.input::placeholder { color: var(--faint); }
.input:focus { background: var(--fx-glass-2); border-color: transparent; box-shadow: 0 0 0 1.5px var(--fx-a1), 0 0 0 6px var(--fx-spot); transform: translateY(-1px); }
.input.is-err { border-color: var(--fav); }
.field .err { color: var(--fav); font-size: 13px; }
.field .hint { color: var(--faint); font-size: 13px; }
.pw { position: relative; }
.pw button { position: absolute; right: 8px; top: 7px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
/* A round tick that fills green with a small pop, like the confirmation on Publică. */
.check input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; border: 1.5px solid var(--fx-edge-2); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .25s, border-color .25s, box-shadow .35s; }
.check input:checked { background: var(--ok-ink); border-color: var(--ok-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok-ink) 16%, transparent); animation: chk-pop .45s cubic-bezier(.2, .9, .3, 1.45); }
.check input:checked::after { content: ""; width: 10px; height: 5px; border: 2.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input:focus-visible { outline: 2px solid var(--fx-a1); outline-offset: 3px; }
@keyframes chk-pop { 0% { transform: scale(.78); } 60% { transform: scale(1.14); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .check input:checked, .input:focus { animation: none; transform: none; } }
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.seg { display: flex; padding: 4px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); }
.seg button { flex: 1; height: 44px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 600; color: var(--muted); transition: background .25s, color .25s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Page scaffold for inner pages */
.page { padding: 28px 0 80px; min-height: 70vh; }
.crumbs { display: flex; gap: 8px; align-items: center; color: var(--faint); font-size: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
/* SEO plan 22.10.2026 L2-4: the page itself ends the crumbs (a listing's long title stays on one line). */
.crumbs [aria-current] { max-width: min(100%, 48ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); } }
.h1 { font: 700 clamp(30px, 4.6vw, 54px)/1.05 var(--display); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.panel { position: relative; border-radius: 24px; background: var(--s2); padding: 24px; }
.panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--line); pointer-events: none; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); font-size: 20px; margin: 0 0 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--glass-hi); border: 1px solid var(--line); white-space: nowrap; }
.tag--ok { color: var(--green); background: rgba(48, 209, 88, .1); border-color: rgba(48, 209, 88, .25); }
.tag--warn { color: #ffb340; background: rgba(255, 179, 64, .1); border-color: rgba(255, 179, 64, .25); }
.tag--bad { color: var(--fav); background: rgba(255, 55, 95, .1); border-color: rgba(255, 55, 95, .25); }

@media (max-width: 900px) {
  .show-m { display: inline-flex !important; }
  .hdr__actions .btn--pub span { display: none; }
  .hdr__actions .btn--pub { width: 46px; padding: 0; }
  .cookie { bottom: 96px; }
}
details.dd > summary { list-style: none; cursor: pointer; }
details.dd > summary::-webkit-details-marker { display: none; }
.dd__menu a { display: block; }
.iconbtn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--glass-hi); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.iconbtn svg { width: 19px; height: 19px; }
.linkbtn { border: 0; background: none; color: var(--muted); font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .linkbtn:hover { color: var(--ink); background: var(--glass-hi); } }

/* Phone fit (QA 28.09): grids never widen past the screen; header keeps 3 controls */
@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hdr__actions #theme { display: none; }
  .hdr__actions { gap: 6px; }
}
.drawer__theme { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border: 0; background: none; font-weight: 600; font-size: 17px; cursor: pointer; border-radius: 14px; }
@media (hover: hover) and (pointer: fine) { .drawer__theme:hover { background: var(--glass-hi); } }
/* Phone menu (01.10.2026, the check of every button on both themes): the theme button's moon had
   no size and filled the menu (163 px, its words squeezed onto two centred lines), and "Google
   Play" broke over two lines in the narrow store badges. */
.drawer__theme { width: 100%; color: inherit; font-family: inherit; text-align: left; }
.drawer__theme svg { width: 22px; height: 22px; flex: none; }
/* Deconectare at the end of the phone menu (every signed-in account); Administrare only for admins */
.drawer__out { display: flex; align-items: center; width: 100%; margin-top: 4px; padding: 14px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; background: none; color: var(--danger-ink); font-family: inherit; font-weight: 600; font-size: 17px; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .drawer__out:hover { background: var(--glass-hi); } }
.drawer__panel > [hidden] { display: none !important; }
.drawer__panel .store { height: 54px; padding: 0 14px 0 12px; gap: 10px; border-radius: 16px; }
.drawer__panel .store svg { width: 24px; height: 24px; }
.drawer__panel .store strong { font-size: 16px; white-space: nowrap; }
/* on a short phone the menu ran under the dock: it scrolls and ends above it */
@media (max-width: 900px) { body:has(#dock) .drawer { overflow-y: auto; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 900px) {
  .acc { grid-template-columns: minmax(0, 1fr) !important; }
  .pub { grid-template-columns: minmax(0, 1fr) !important; }
  .chat { grid-template-columns: minmax(0, 1fr) !important; }
  .ml__foot .ml__acts { width: 100%; }
  .ml__foot .ml__acts .btn { flex: 1; }
}
.card, .card__body { min-width: 0; } .card__body > * { min-width: 0; overflow-wrap: anywhere; }

/* header "Publică" on phones is a white circle with a "+"; iOS Safari drew it empty. Give the
   icon a fixed size and an explicit black stroke instead of relying on inherited currentColor. */
.hdr__actions .btn--pub { color: var(--bg); }
.hdr__actions .btn--pub svg { display: block; width: 20px; height: 20px; min-width: 20px; flex: 0 0 20px; stroke: var(--bg); color: var(--bg); overflow: visible; }

/* the logo: "vinde" always white, ".online" the only orange (header and footer, every page) */
.logo, .logo:visited, .logo span { color: var(--ink) !important; text-decoration: none !important; }
.logo b { color: var(--brand, #f97800) !important; }

/* ---- phone dock (like the app): glass bar, glass pill that slides to the current tab */
.dock { display: none; }
@media (max-width: 900px) {
  .dock { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 66px;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 6px; border-radius: 26px;
    background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9), inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent); }
  .dock__pill { position: absolute; left: 0; top: 7px; bottom: 7px; width: 0; border-radius: 19px; pointer-events: none;
    background: color-mix(in srgb, var(--ink) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
    transition: transform .42s cubic-bezier(.2, .9, .25, 1.15), width .42s cubic-bezier(.2, .9, .25, 1), opacity .2s; }
  .dock__t { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; color: var(--muted) !important; text-decoration: none !important;
    font: 600 11px/1 var(--font, "Onest", sans-serif); letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; transition: color .25s; }
  .dock__t.on { color: var(--ink) !important; }
  .dock__ic { position: relative; display: grid; place-items: center; }
  .dock__ic svg { width: 22px; height: 22px; transition: transform .35s cubic-bezier(.2, .9, .25, 1.3); }
  .dock__t.tap .dock__ic svg, .dock__t:active .dock__ic svg { transform: scale(.86); }
  /* -22px: the circle takes the 22px of the other icons, so "Publică" sits on the same line as
     "Acasă", "Caută"... (with -18px it was 2px lower, 01.10.2026) */
  .dock__t--pub .dock__ic { width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: var(--ink); color: var(--bg);
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .6); }
  .dock__t--pub .dock__ic svg { width: 22px; height: 22px; stroke: var(--bg); }
  .dock__t--pub { color: var(--ink) !important; }
  .dock__n { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b30; color: #fff; font: 700 11px/18px var(--font, sans-serif); text-align: center; box-shadow: 0 0 0 2px #000; }
  .dock__n[hidden] { display: none; }
  body:has(#dock) { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body:has(#dock) .appbar { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body:has(#dock) .cookie { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body:has(#dock) .snack { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .dock__pill, .dock__ic svg { transition: none; } }

/* search boxes: the field inside a rounded search bar never draws its own frame */
.search input, .hsearch input, [class*="search"] input, .fsearch input { outline: none !important; box-shadow: none !important; }
[class*="search"]:focus-within { border-color: rgba(255, 255, 255, .3); }

/* the app banner waits fully below the screen (it now sits above the dock) */
@media (max-width: 900px) { body:has(#dock) .appbar:not(.in) { transform: translateY(calc(100% + 130px)) !important; } }
@media (max-width: 900px) {
  .dock { transition: transform .28s cubic-bezier(.2, .9, .25, 1), opacity .2s; }
  .dock.dock--kb { transform: translateY(140%); opacity: 0; pointer-events: none; }
}

/* phones up to 400 px (audit 14.10.2026 #147: at 390 px, signed in, the language button covered the end of the logo;
   measured on LIVE at 390 and 375 px with the avatar: the logo now ends at 155 px, the buttons start at 184 / 169 px) */
@media (max-width: 400px) { .logo span { font-size: 19px !important; } .logo img { width: 30px !important; height: auto; } .hdr__actions { gap: 6px !important; } .hdr__actions .btn--pub, .hdr .avatar { width: 40px !important; height: 40px !important; } }

/* "Explorează" (server-rendered, 28.09.2026): categories and cities with listings as plain links,
   so people and search engines can reach them without scripts. Quiet, at the end of the page. */
.explore { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); }
/* 20.10.2026 (owner: „rândul mic, să nu mai fie acolo toate adunate”): one quiet line; the lists open when it is tapped. */
.explore__s { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: 600 14px var(--font); color: var(--muted); cursor: pointer; list-style: none; }
.explore__s::-webkit-details-marker { display: none; }
.explore__s::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .2s var(--ease, ease); }
.explore[open] > .explore__s::after { margin-top: 3px; transform: rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .explore__s:hover { color: var(--ink); } }
.explore__in { display: grid; gap: 22px; margin-top: 14px; }
.explore__t { margin: 0 0 12px; font: 700 15px var(--font); letter-spacing: -.01em; color: var(--muted); }
.explore__l { display: flex; flex-wrap: wrap; gap: 8px; }
.explore__l a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--ink);
  background: var(--glass-hi); border: 1px solid var(--line); transition: background .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) { .explore__l a:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--ink) 10%, transparent); } }
@media (min-width: 900px) { .explore__in { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 560px) { .explore { margin-top: 36px; } .explore__l a { height: 34px; padding: 0 12px; font-size: 13.5px; } }
/* 14.10.2026 (SEO audit): "Categorii în orașe" under the categories. */
.explore__t--next { margin-top: 22px; }
/* SEO plan 22.10.2026 L2-2: each category with its subcategories in one quiet line ("Garsoniere (14) · Birouri (17)"). */
.explore__cats { display: grid; gap: 12px; }
.explore__cat { display: grid; gap: 6px; justify-items: start; }
.explore__root { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--ink);
  background: var(--glass-hi); border: 1px solid var(--line); transition: background .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) { .explore__root:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--ink) 10%, transparent); } }
.explore__subs { margin: 0 0 0 14px; color: var(--faint); font-size: 13.5px; line-height: 1.75; text-wrap: pretty; }
.explore__subs a, .hub a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .explore__subs a:hover, .hub a:hover { color: var(--ink); text-decoration-color: currentColor; } }
@media (max-width: 560px) { .explore__root { height: 34px; padding: 0 12px; font-size: 13.5px; } .explore__subs { margin-left: 12px; } }
/* SEO plan 22.10.2026 L2-3: the related pages under a list or a listing ("Categorii în Oradea", "Vezi toate"), plain links. */
.hub { margin: 26px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; text-wrap: pretty; }
.hub__t { margin: 0 0 6px; font: 600 15px var(--font); color: var(--ink-2); }
.hub p { margin: 0 0 6px; }
.hub b { font-weight: 600; color: var(--ink-2); }

/* Initial-letter avatars keep their dark gradient in both themes, so the letter stays white. */
.avatar, .ch__av, .adm-av, .ach__av span, .mth__img i { color: #fff; }

/* Light theme, the "Publică" buttons (owner 01.10.2026: "butonul Publică ... scrisul arată ciudat",
   "atenție la detalii"). They wore the dark theme's light: a white glow under them and a lit top
   edge, which on the light page drew a grey line along the top of the dark pill and circle; and
   their light label at 600 read heavier and fuzzier than the header's other words (light text on a
   dark fill looks bolder), so 560 here. Same for the dock's circle; its badge ring was black. */
:root[data-theme="light"] .btn--pub { font-weight: 560; box-shadow: 0 8px 20px -12px rgba(16, 24, 40, .55); }
@media (hover: hover) and (pointer: fine) { :root[data-theme="light"] .btn--pub:hover { box-shadow: 0 12px 26px -12px rgba(16, 24, 40, .6); } }
@media (max-width: 900px) {
  :root[data-theme="light"] .dock__t--pub .dock__ic { box-shadow: 0 10px 22px -10px rgba(16, 24, 40, .6); }
  :root[data-theme="light"] .dock__n { box-shadow: 0 0 0 2px #fff; }
}
/* the search bar's focus frame was white on the light theme's white bar */
:root[data-theme="light"] [class*="search"]:focus-within { border-color: rgba(16, 24, 40, .28); }
/* the chosen item of a drop-down list and the hover of the phone menu were white on the light
   theme's white panels (no mark at all); a light ink tint instead */
:root[data-theme="light"] .dd__menu button[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="light"] .dd__menu button:hover, :root[data-theme="light"] .drawer__panel > a:hover, :root[data-theme="light"] .drawer__theme:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}

/* SAL badge in the footer (legal audit 01.10.2026, Ordinul ANPC 449/2022): links to ANPC's alternative dispute
   resolution page. The SOL/ODR platform closed on 20.07.2025 (Reg. EU 2024/3228), so only SAL is shown. */
.ftr__bottom { align-items: center; flex-wrap: wrap; gap: 12px; }
.ftr__sal { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--muted) !important; text-decoration: none !important; transition: border-color .25s, color .25s; }
.ftr__sal b { display: grid; place-items: center; height: 26px; padding: 0 7px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 800 12px/1 var(--font); letter-spacing: .06em; }
.ftr__sal span { font: 600 11px/1.15 var(--font); }
@media (hover: hover) and (pointer: fine) { .ftr__sal:hover { border-color: var(--ink); color: var(--ink) !important; } }

/* Language switch (owner 02.10.2026): a glass circle beside the theme button that grows a small glass menu. */
.lang { position: relative; display: inline-flex; }
.lang__btn { font: 800 12px/1 var(--font) !important; letter-spacing: .04em; border-radius: 999px !important; width: auto !important; padding: 0 6px 0 10px !important; gap: 2px; background: var(--fx-glass) !important; border: 1px solid var(--fx-edge) !important; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); transition: transform .3s var(--fx-spring), box-shadow .35s, border-color .3s !important; }
.lang__btn:active { transform: scale(.9); }
.lang__btn[aria-expanded="true"] { border-color: var(--fx-edge-2) !important; box-shadow: 0 0 0 4px var(--fx-spot), 0 0 18px -4px var(--fx-a1); }
@media (hover: hover) and (pointer: fine) { .lang__btn:hover { border-color: var(--fx-edge-2) !important; } }
.lang__code { position: relative; display: inline-grid; height: 16px; overflow: hidden; }
/* Owner 21.10.2026: the flag and a small caret, like the language button he showed. */
.lang .flag { width: 22px; height: auto; aspect-ratio: 3 / 2; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); display: block; }
.lang__code i { display: block; }
.lang__caret { width: 16px; height: 16px; fill: currentColor; opacity: .75; transition: transform .3s; }
.lang__btn[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }
.lang__code i { grid-area: 1 / 1; font-style: normal; line-height: 16px; transition: transform .38s cubic-bezier(.2, .9, .3, 1), opacity .3s; }
.lang__code i + i { transform: translateY(110%); opacity: 0; }
.lang__code.roll-up i:first-child { transform: translateY(-110%); opacity: 0; } .lang__code.roll-up i + i { transform: none; opacity: 1; }
.lang__code i.from-top { transform: translateY(-110%); }
.lang__code.roll-down i:first-child { transform: translateY(110%); opacity: 0; } .lang__code.roll-down i + i { transform: none; opacity: 1; }
.lang__menu button { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.2, .35, 1), background .2s; }
.lang__menu.open button { opacity: 1; transform: none; } .lang__menu.open button + button { transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) { .lang__code i, .lang__menu button { transition: none; } .lang__btn:active { transform: none; } }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 212px; padding: 6px; border-radius: 18px; background: color-mix(in srgb, var(--s2) 94%, transparent); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  transform-origin: top right; transform: scale(.6); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2, 1.25, .35, 1), opacity .25s; }
.lang__menu.open { transform: none; opacity: 1; pointer-events: auto; }
.lang__menu button { width: 100%; display: grid; grid-template-columns: 24px 1fr 20px; align-items: center; gap: 1px 10px; padding: 10px 12px; border: 0; border-radius: 13px; background: none; color: var(--ink); text-align: left; cursor: pointer; font-family: var(--font); }
.lang__menu button:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* 14.10.2026: hover only where a pointer hovers (owner rule: every :hover inside @media (hover: hover)). */
@media (hover: hover) and (pointer: fine) { .lang__menu button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } }
.lang__menu b { font: 650 15px var(--font); }
.lang__menu .flag { grid-row: 1 / span 2; grid-column: 1; }
.lang__menu b { grid-column: 2; }
.lang__menu small { grid-column: 2; color: var(--muted); font: 500 12.5px var(--font); }
.lang__menu svg:not(.flag) { grid-row: 1 / span 2; grid-column: 3; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s; }
.lang__menu button[aria-checked="true"] svg:not(.flag) { opacity: 1; }
html.i18n-wait body { opacity: 0; }
html.lang-swap body { opacity: .35; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .lang__menu { transition: none; } }
/* Core 1.9.44: founder member badge */
.tag--gold { color: #9a6b00; background: rgba(214, 166, 50, .12); border-color: rgba(214, 166, 50, .4); font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag--gold { color: #f0c75e; } }
:root[data-theme="dark"] .tag--gold { color: #f0c75e; }