/* vestniktm.com -- 2026 redesign. Main site, homepage first. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* -- accent: clean, saturated blue (2026-08-16 repaint -- replaced the
     earlier soft/desaturated #3e6e92 read as "muddy"; #2563eb clears ~5.2:1
     against white) -- */
  --accent: #2563eb;
  --accent-soft: #93c5fd;
  --accent-tint: #eaf1fe;
  --accent-dark: #1d4ed8;

  /* -- warm: blue stays structural (header, nav, taxonomy); warm carries every
     action/attention moment -- CTAs, VIP signaling, price -- so the site
     doesn't read as flat and institutional. --warm is tuned to still clear
     4.5:1 against white text (buttons/badges); --warm-dark is for warm text
     on light backgrounds (price, hover), where contrast only improves.
     2026-08-16: repainted to a more saturated orange at the same lightness
     band (was reading as brownish/muddy) -- still ~4.6:1 against white. -- */
  --warm: #cb4c0e;
  --warm-dark: #a8410b;
  --warm-tint: #ffece0;

  /* -- neutrals -- */
  --ink: #1c2530;
  --ink-soft: #4b5563;
  --muted: #6b7684;
  --line: #e4e9ee;
  --paper: #ffffff;
  /* 2026-08-16: pale blue (was a neutral gray) -- this is the backdrop
     behind .rd-card/.rd-vip-card on .rd-listings (the homepage listing
     section) as well as the general secondary-surface tint used by
     .rd-panel/.rd-content/forms sitewide -- cascades everywhere on purpose. */
  --canvas: #eef4fb;

  /* -- state -- */
  --price: #c0392b;
  --new: #2f8f5b;
  /* Gold, distinct from --warm (already load-bearing for VIP/CTA
     emphasis) -- used only for the seller-profile star rating. */
  --rating: #f0a63a;

  --font-display: 'Manrope', 'Inter', Arial, sans-serif;
  --font-body: 'Inter', 'Manrope', Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(28, 37, 48, 0.06), 0 8px 24px -12px rgba(28, 37, 48, 0.16);
  --shadow-pop: 0 4px 10px -2px rgba(28, 37, 48, 0.14), 0 16px 40px -16px rgba(28, 37, 48, 0.22);
  --container: 1240px;
}

/* images/style.css (loaded sitewide, before this file) puts
   padding:0 10px on BOTH html and body -- 20px of dead gutter on each
   side stacked from the two nested elements. Old table-layout pages
   still expect that inset, so it's cleared only on the homepage.
   Keyed on .rd-hero specifically, not .rd-2026 -- the sitewide footer
   also carries .rd-2026 for its own scoped styles, so :has(.rd-2026)
   would have matched every page, not just this one. */
html:has(.rd-hero), body:has(.rd-hero) { padding: 0; margin: 0; }

.rd-2026 * { box-sizing: border-box; }
.rd-2026 {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
:where(.rd-2026) a { text-decoration: none; color: inherit; }
.rd-2026 img { max-width: 100%; display: block; }
.rd-2026 button { font-family: inherit; cursor: pointer; }

.rd-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Visually hidden but still reachable by screen readers -- used on the
   hero/search-bar <label>s that pair with a placeholder-only input
   (top_2026.inc.php, top.inc.php, list/inc/search_bar_2026.inc.php).
   Never had a real definition anywhere in the stylesheet chain, so these
   labels rendered as plain visible text stacked above the input --
   redundant with the placeholder and eating vertical space it wasn't
   designed to need. */
.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;
}

/* ---------- Header float: sticky glass panel, utility bar + nav. ----------- */
/* Was position:absolute (overlaying the hero photo, out of flow) -- meant   */
/* search/post-ad/login only existed in the first ~500px of the page and    */
/* vanished for the rest of the scroll. Now sticky + in-flow: it reserves   */
/* its own space above the hero (see the hero's reduced padding-top below)  */
/* and stays reachable the whole way down. The glass fill is a self-        */
/* sufficient dark tint (not a faint white tint relying on the hero photo   */
/* showing through) so it stays legible once it's stuck over light page    */
/* content -- matches the tint already proven at the <=900px breakpoint,   */
/* which had the same "must read regardless of what's behind it" need.     */
.rd-header-float {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 8px 16px;
}
.rd-header-glass {
  max-width: none;
  margin: 0;
  border-radius: 16px;
  background: rgba(16, 24, 33, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 32px -12px rgba(8, 12, 18, 0.35);
  overflow: hidden;
}

/* ---------- Top utility bar ---------- */
.rd-utility {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}
.rd-utility .rd-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
}
.rd-utility-links { display: flex; align-items: center; gap: 18px; }
.rd-utility-links a { display: inline-flex; align-items: center; gap: 5px; }
.rd-utility-links a:hover { color: #fff; }
.rd-utility-lang { display: flex; align-items: center; gap: 8px; }
.rd-utility-lang img { width: 16px; height: 16px; border-radius: 3px; opacity: 0.7; transition: opacity 0.15s; }
.rd-utility-lang a:hover img { opacity: 1; }

/* ---------- Main nav ---------- */
.rd-nav {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.rd-nav .rd-container {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}
.rd-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.01em;
  color: #fff;
  flex-shrink: 0;
}
.rd-logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.rd-logo-mark svg { width: 25px; height: 25px; }
.rd-logo .accent { color: var(--accent-soft); }

.rd-navlinks {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 1;
  min-width: 0;
  /* Between ~900px (mobile wrap breakpoint) and ~1200px (room for every
     link at full width), this row has less space than its nowrap links
     need. flex-shrink alone only shrinks the box, not its overflowing
     content -- without this, the overflow rendered straight through the
     next flex sibling (.rd-nav-post's CTA button), visually swallowing
     "Форум"/"Информеры". Scrolls instead of overlapping, same pattern
     the ≤900px breakpoint already uses once the row wraps to its own
     full-width line. */
  overflow-x: auto;
  scrollbar-width: none;
}
.rd-navlinks::-webkit-scrollbar { display: none; }
.rd-navlinks a {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.rd-navlinks a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Nav-row "Разместить объявление" -- takes the spot the quick search used
   to sit in; the hero's own search is now the site's primary search, so
   this nav slot went to the site's other primary action instead. Pushed to
   the right edge (margin-left:auto) since nothing else in the row grows to
   fill the space a flex:1 search input used to occupy. */
.rd-nav-post { margin-left: auto; flex-shrink: 0; }

.rd-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.rd-nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.rd-nav-icon:hover { background: rgba(255, 255, 255, 0.16); color: var(--accent-soft); }
.rd-nav-icon svg { width: 18px; height: 18px; }
/* Google's own button guidelines call for the "G" mark on a plain white
   chip regardless of surrounding theme -- kept separate from the other
   (currentColor, theme-tinted) nav icons for that reason. */
.rd-nav-google {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.7s ease-in-out, box-shadow 0.15s;
}
.rd-nav-google:hover { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transform: rotateY(360deg); }
.rd-nav-google svg { width: 17px; height: 17px; }
.rd-nav-icon .rd-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  /* Was --price (ad-detail price + error state only) -- this is an
     unread/new-items count, not an error. DESIGN.md's own Confirm Green
     entry already names "'new' badges" as one of its documented uses. */
  background: var(--new);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* A solid ring is what turns this into a "badge" at a glance instead of
     a same-size dot that blends into the icon behind it -- matches the
     iOS/Android convention of cutting a badge out from its host icon. */
  border: 2px solid rgba(16, 24, 33, 0.92);
}
/* Reserved for badges that should draw the eye on their own (unread
   notifications) rather than just report a count (favorites, in
   comparison, keeps the plain static badge above). Ripples outward from
   the badge itself so it reads as "new activity" without being a
   distracting permanent animation on the icon. */
@keyframes rd-badge-ping {
  0% { box-shadow: 0 0 0 0 rgba(47, 143, 91, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(47, 143, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 143, 91, 0); }
}
.rd-badge-notify { animation: rd-badge-ping 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .rd-badge-notify { animation: none; }
}
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  border: none;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.rd-btn:active { transform: translateY(1px); }
.rd-btn-primary { background: var(--warm); color: #fff; }
.rd-btn-primary:hover { background: var(--warm-dark); }
.rd-btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.rd-btn-ghost:hover { border-color: var(--accent-soft); color: var(--accent-dark); }
.rd-btn-danger { background: var(--price); color: #fff; }
.rd-btn-danger:hover { background: #a8321f; }
.rd-btn svg { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.rd-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  /* Scaling this with viewport width (as an earlier pass here did) fixed
     cropping but made the hero dominate the screen on wide monitors --
     wrong trade. Compact and flat instead: a short box unavoidably shows
     only a thin horizontal slice of the photo, so which slice matters
     more than how tall the box is -- see object-position below.

     380px was reported as taking up half a MacBook viewport on open --
     real, since min-height was actually the floor (badge+h1+search+link
     content totaled ~360px, just under it) rather than a cap being
     overridden by taller content. Content shrunk to match a ~200px
     floor (see badge/h1/search below); this is now mostly a safety
     minimum, not the primary driver of the box's real height. */
  min-height: 200px;
  display: flex;
  align-items: center;
}
.rd-hero-media {
  position: absolute;
  /* Was right:0/top:0/bottom:0 with a computed width cap, to stop
     object-fit:cover's crop from ever flipping onto the top/bottom edge
     (see git history) -- but cover fundamentally can't show 100% of a
     photo whose content span is taller than the box, at ANY crop offset:
     the source's mountains-to-dome-base span is ~750px, and no offset
     within a ~380-600px box can fit both the peaks (with sky) and the
     domes (with a base/margin) -- confirmed by generating and comparing
     several offsets, every one traded one for the other. Fixed properly
     instead of picking a lesser-evil crop: full-bleed the box, and let
     the img (below) size itself independent of this box's own dimensions
     -- see its own rule for the current sizing/crop tradeoffs, since
     that's evolved (a controlled crop was reintroduced for a differently
     -margined photo) since this box-level structure was first set up. */
  inset: 0;
}
.rd-hero-media img {
  /* Was width/height:100% + object-fit:contain -- contain's element box
     always stays 100% of the parent even though the *painted* content is
     narrower (letterboxed), which left no way to align the mask-image
     fade below to the content's real left edge. position:absolute here
     instead: a standard, unambiguous CSS2.1 replaced-element sizing case,
     right-anchored via top/right, and max-width:100% re-derives from
     width instead of height on narrow/mobile screens where width becomes
     the binding constraint -- so the img's own box always exactly
     matches its visible pixels, letting a mask align to it.

     height was 100% (of .rd-hero-media, itself always exactly matching
     .rd-hero's real content height) -- a strict never-crop guarantee,
     but it ties the image's rendered size directly to the box's height,
     so shrinking the box for the "hero too tall" fix also shrunk the
     photo into looking small/insignificant. Fixed height instead (with
     a max() floor so it can't render *smaller* than the box on the rare
     occasion box content pushes past it) lets the image stay a
     consistent, prominent size independent of how short the box is --
     deliberately reintroduces some crop risk, confirmed acceptable for
     this photo specifically (unlike the original source this whole
     approach was built to stop cropping).

     Sizing this took an actual pixel-grid measurement, not a guess from
     the downscaled preview -- eyeballing suggested generous sky-above /
     tight ground-below, which would justify a heavy top-biased crop, but
     the real photo has the left tower's antenna/roof-deck reaching up to
     about y=95-170 of 728, and the tree line at the bottom doesn't fully
     take over until about y=645 -- so the two safe margins (~70px top,
     ~90px bottom, before hitting the tower or the buildings/dome) are
     close to each other, not lopsided.

     400px + 78% top-bias here is a deliberate, requested trade past that
     safe budget -- confirmed via a pixel-accurate crop simulation that it
     slices through the tower's antenna and roof deck (only the tower's
     body below ~y170 survives). Explicitly asked for over the 280px/50%
     version that kept both landmarks intact, to see it directly rather
     than take that tradeoff on description alone -- if it doesn't look
     right, 280px/50% is the known-safe fallback, not a guess. */
  position: absolute;
  top: 78%;
  right: 0;
  transform: translateY(-78%);
  height: max(400px, 100%);
  width: auto;
  max-width: 100%;
  /* object-position isn't relevant any more -- top/right above already
     do the right-anchoring.

     A hard cut from the bright photo (sky especially) straight to the flat
     --ink panel read as a visible seam/border. Tried a few fixed-px mask
     widths first (160px read as a second haze stacked on the old, darker
     scrim; 32px was too narrow to register as a gradient at all, aliased
     back into the same hard edge; 110px was still a visibly separate
     "faded strip" next to a flat zone with no transition of its own --
     extending the scrim to reach the panel didn't help either, since a
     semi-transparent ink overlay on top of the SAME solid ink background
     is invisible no matter its opacity; the panel was always flat).

     Fixed properly: percentage-based instead of a fixed px amount, so
     the fade spans the image's ENTIRE own rendered width instead of a
     short edge strip. At the image's own left edge this is 0% opacity --
     which matches the flat ink panel exactly, so there's no seam to
     begin with, at any box size (the boundary itself was never the
     problem once both sides render the same color there). 42% keeps the
     right-hand landmarks (this photo's domes/buildings, composed to sit
     in the right half already) at full clarity, while the sky/tower on
     the left -- already the least essential part of the frame -- carry
     the entire visible transition. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}
.rd-hero-scrim {
  position: absolute;
  inset: 0;
  /* Was 0.92 opacity out to 78% across -- unchanged since the old
     purpose-cropped band, but the band was already a muted, mostly-grey
     mountain slice, so the darkening was less visible against it. Now
     that the image is the full photo (real blue sky, snow, saturated
     dome tile) the same gradient reads as a wide flat haze over most of
     the width. A prior session tried this exact fix (0ef3aa807) and it
     got reverted with no reason logged -- re-applying since nothing in
     this round's feedback was about text contrast, only the photo, and
     the underlying image has fundamentally changed since that attempt
     anyway. h1/badge/post-link pick up their own text-shadow below
     instead of leaning on a heavy panel for contrast.

     Stopped at 56% (0 opacity from there on) -- fine for the old
     full-bleed cover image, which had photo content at every point
     across the box. Now the photo only starts partway across (the flat
     --ink panel fills the rest, see .rd-hero-media img's own edge fade
     above), and that boundary moves with box height -- at a typical
     height it lands well past 56%, so the scrim ran out before reaching
     it, leaving a flat unfaded gap between "scrim gone" and "photo
     fading in". Stretched the last stop to 100% so it's always
     continuous no matter where the real boundary falls, instead of
     depending on a fixed percentage matching a variable edge. */
  background: linear-gradient(100deg, rgba(16, 26, 38, 0.55) 0%, rgba(16, 26, 38, 0.32) 35%, rgba(16, 26, 38, 0.12) 65%, rgba(16, 26, 38, 0) 100%);
}
.rd-hero .rd-container {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  /* Was 128px, clearing the old absolutely-positioned header float that
     overlaid this space. The header is sticky and in-flow now (see
     .rd-header-float above), so it already reserves its own space before
     the hero begins -- this only needs to match padding-bottom for a
     balanced band around the hero content. */
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: clamp(24px, 5vw, 96px);
}
.rd-hero-content { max-width: 760px; }
.rd-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  /* Picking up its own contrast now that the scrim behind it is much
     lighter -- the pill's blur+border still do most of the work, this
     just guards against a bright patch of sky/snow showing through. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.rd-hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.rd-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 8px;
  /* Was relying entirely on the scrim's dark panel for contrast; now
     that the scrim is much lighter/narrower, plain white text over the
     brighter parts of the photo (snow, sky) would wash out. */
  text-shadow: 0 2px 16px rgba(8, 12, 18, 0.55), 0 1px 4px rgba(8, 12, 18, 0.45);
}
.rd-hero h1 .accent { color: var(--accent-soft); }

/* ---------- Hero search: the dominant element, per explicit direction --
   this is a classifieds site, search comes before the photo. White,
   high-contrast, big touch targets; the photo is now background to this,
   not the other way around. Sized down along with the rest of the hero
   (see .rd-hero's min-height comment) but kept short of the other
   elements' ~40% cut -- this is the one thing on the whole page whose
   touch-target size was a deliberate earlier decision, not just
   incidental spacing. ---------- */
.rd-hero-search { max-width: 640px; margin: 12px 0 10px; }
.rd-hero-search-main {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(8, 12, 18, 0.5);
}
.rd-hero-search-icon {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}
.rd-hero-search-main input {
  width: 100%;
  height: 46px;
  border: none;
  background: transparent;
  border-radius: 14px;
  padding: 0 18px 0 46px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
}
.rd-hero-search-main input:focus { outline: 2px solid var(--warm); outline-offset: -2px; }
.rd-hero-search-main input::placeholder { color: var(--muted); }
.rd-hero-search-filters { display: flex; gap: 8px; margin-top: 8px; }
.rd-hero-search-select {
  flex: 1;
  min-width: 0;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 0 14px;
  font-size: 13.5px;
  font-family: inherit;
}
.rd-hero-search-select option { color: var(--ink); }
.rd-hero-search-submit { height: 40px; padding: 0 26px; font-size: 14px; flex-shrink: 0; }

.rd-hero-post-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s;
  text-shadow: 0 1px 4px rgba(8, 12, 18, 0.4);
}
.rd-hero-post-link:hover { color: #fff; }
.rd-hero-post-link svg { width: 15px; height: 15px; }

.rd-hero-links {
  /* Grid, not flex+gap: mirrors .rd-hero-search-filters's exact column
     shape (2 flex-1 selects + a fixed-width button eating into the
     remainder) so .rd-hero-stat's left edge lines up under the city
     select above it at any viewport width. A plain "1fr 1fr" split here
     was wider than the real select columns, since the filters row's
     two selects only split what's left AFTER the button's width --
     hence .rd-hero-links-spacer below, an invisible same-classed clone
     of the submit button that eats the same width from this row's
     "auto" column. */
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 6px 8px;
}
.rd-hero-links-spacer { visibility: hidden; pointer-events: none; }
.rd-hero-stat {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 4px rgba(8, 12, 18, 0.4);
}
.rd-hero-stat strong { color: #fff; font-weight: 700; }

/* ---------- /list search bar (list/inc/search_bar_2026.inc.php) ----------
   A standalone, light-background counterpart to .rd-hero-search above.
   /list's homepage has no photographic hero -- it's a business directory,
   not a "browse near you" classifieds board -- so this reuses the same
   field set (query/category/city/submit) and the same rounded white
   query-input row, but sits directly on --canvas instead of over a photo
   scrim: the category/city fields are plain .rd-input selects (already
   readable on a light background) instead of .rd-hero-search-select's
   translucent glass, which only reads correctly over a dark image. */
.rd-search-bar { padding: 28px 0; background: var(--canvas); }
.rd-search-bar-form { max-width: 760px; margin: 0 auto; }
.rd-search-bar-main {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 10px;
}
.rd-search-bar-icon { position: absolute; left: 20px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.rd-search-bar-main input {
  width: 100%;
  height: 54px;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 0 20px 0 50px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
}
.rd-search-bar-main input:focus { outline: 2px solid var(--warm); outline-offset: -2px; }
.rd-search-bar-main input::placeholder { color: var(--muted); }
.rd-search-bar-filters { display: flex; gap: 10px; }
.rd-search-bar-filters .rd-input { flex: 1; min-width: 0; }
.rd-search-bar-submit { height: 46px; padding: 0 28px; font-size: 14px; flex-shrink: 0; }

@media (max-width: 560px) {
  .rd-search-bar-filters { flex-direction: column; }
  .rd-search-bar-submit { width: 100%; }
}

/* ---------- Category strip ---------- */
.rd-categories { padding: 36px 0 8px; background: var(--paper); }
.rd-categories-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.rd-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px;
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--ink);
  transition: background 0.15s, transform 0.15s;
}
.rd-cat-tile:hover { background: var(--canvas); transform: translateY(-2px); }
.rd-cat-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--warm-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-dark);
  flex-shrink: 0;
}
.rd-cat-icon svg { width: 25px; height: 25px; }
/* Each tile gets its own tint instead of one repeated warm circle --
   reads as a friendlier, more scannable row (matches the reference
   screenshot's varied per-category colors). Same soft-tint-circle +
   solid-icon pattern as the base rule, just more hues. */
.rd-cat-icon--estate { background: var(--warm-tint); color: var(--warm-dark); }
.rd-cat-icon--job { background: var(--accent-tint); color: var(--accent-dark); }
.rd-cat-icon--services { background: #f1ecfb; color: #6d4fc2; }
.rd-cat-icon--goods { background: #fdf1db; color: #a3690a; }
/* Computers/repair got --price/--new (reserved for ad price + error, and
   success/"new" badges respectively) as decorative tints -- broke the
   Two Accents Rule's whole point: a shopper who's just learned "red near
   a price/error, green near success" now sees the same colors mean
   nothing in the category strip. Own literal pairs instead, same
   pattern as services/goods/transport above (none of those reuse a
   semantic token either). */
.rd-cat-icon--computers { background: #eef0fb; color: #4a55a8; }
.rd-cat-icon--repair { background: #f6efe6; color: #8a5c2e; }
.rd-cat-icon--transport { background: #e3f6f7; color: #1b7f88; }
/* /list's featured category tiles -- computers/repair/services/transport
   above are reused as-is (same concept, same site, same treatment); these
   three are new for categories the main site doesn't have. */
.rd-cat-icon--industry { background: #eef1f4; color: #4d6472; }
.rd-cat-icon--materials { background: #f3efe9; color: #8a7458; }
.rd-cat-icon--trade { background: #fceef3; color: #b3477a; }
.rd-cat-tile strong { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.rd-cat-count { font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* "Все категории" reveal -- pure CSS checkbox toggle, no JS. The input is a
   preceding sibling of both the tile (label) and the panel it controls. */
.rd-cat-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.rd-cat-more-tile { cursor: pointer; }
.rd-cat-more-tile .rd-cat-icon { background: var(--accent-tint); color: var(--accent-dark); }
.rd-cat-more-label { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.rd-cat-toggle-input:checked ~ .rd-categories-grid .rd-cat-more-tile .rd-cat-icon { background: var(--accent); color: #fff; }
.rd-cat-toggle-input:checked ~ .rd-categories-grid .rd-cat-more-label { visibility: hidden; }
.rd-cat-toggle-input:checked ~ .rd-categories-grid .rd-cat-more-label::before { content: attr(data-hide); visibility: visible; position: absolute; }

.rd-categories-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.rd-cat-toggle-input:checked ~ .rd-categories-more { grid-template-rows: 1fr; }
.rd-categories-more-grid {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.rd-cat-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--canvas);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.rd-cat-chip:hover { background: var(--warm-tint); color: var(--warm-dark); }
.rd-cat-chip-active { background: var(--accent); color: #fff; }
.rd-cat-chip-active:hover { background: var(--accent-dark); color: #fff; }
.rd-cat-chip .rd-cat-count { font-weight: 700; }

/* ---------- Category listing page (list_subcat.inc.php): a parent
   category's direct children, rendered as a chip cloud -- reuses
   .rd-cat-chip/.rd-cat-count from the homepage's "all categories" reveal.
   Children that themselves have children get their own labeled group
   instead of a chip (they're not directly browsable, same as the
   original markup's <span> vs <a> distinction). ---------- */
.rd-subcat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-subcat-group { margin-top: 22px; }
.rd-subcat-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
}
.rd-subcat-icon { width: 22px; height: 22px; object-fit: contain; }
.rd-cat-chip .rd-subcat-icon { width: 16px; height: 16px; }
.rd-subcat-all { margin-top: 24px; }

/* ---------- Full category sitemap (list/cat.html): every top-level
   category as its own card, reusing rd_subcat_render()'s existing
   group/chip markup inside each one. CSS multi-column masonry instead of
   stacking 21 full-width cards -- variable-height cards (a category with
   3 subcategories next to one with 20) waste far less space this way,
   and it reads as one organized sitemap instead of a long scroll of
   near-identical panels. ---------- */
.rd-sitemap { columns: 3; column-gap: 20px; }
.rd-sitemap-group {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin: 0 0 20px;
}
.rd-sitemap-group-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.rd-sitemap-group .rd-subcat-group:first-child { margin-top: 18px; }

@media (max-width: 900px) {
  .rd-sitemap { columns: 2; }
}
@media (max-width: 560px) {
  .rd-sitemap { columns: 1; }
  .rd-sitemap-group { padding: 18px 20px; }
}

/* ---------- Listing grid ---------- */
.rd-listings { padding: 20px 0 64px; background: var(--canvas); }
.rd-listings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.rd-listings-head h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.rd-listings-stats { margin: 0; font-size: 13.5px; color: var(--muted); }
.rd-listings-stats strong { color: var(--ink-soft); }

/* ---------- Highlight row: photo-only ads, right under VIP ----------
   Category tabs (real, server-rendered via ?hcat=) above a single row
   of compact cards -- separate from the full "Новые объявления" grid
   further down, which shows every new ad (photo or not) and carries
   the (still visual-only) Город/Цена/Сортировка filters. */
.rd-highlight-row { margin-bottom: 8px; }
.rd-highlight-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; }
.rd-highlight-tab {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.rd-highlight-tab:hover { background: var(--canvas); color: var(--ink); }
.rd-highlight-tab.is-active { background: var(--accent-tint); color: var(--accent-dark); font-weight: 700; }

/* Same 3-column width/gap as .rd-listing-grid below and the exact same
   .rd-card markup (no compact override) -- every ad card on the page
   is meant to read as one consistent size now, not a denser row of
   smaller ones. */
.rd-highlight-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: start; }

/* Real filter row (Вариант 4 reference): Категория/Город/Цена/Сортировка,
   wired to real GET params -- see the query-building block at this
   section's call site (inc/last_add_index_2026.inc.php). Each pill is a
   <label> wrapping a native, appearance:none <select> (or, for price, two
   plain number <input>s) so the control stays a single real form element
   -- keyboard- and screen-reader-usable, works with JS disabled -- while
   still reading as a select-look chip on the paper card background
   against the section's pale-blue backdrop. */
/* Now the first element of .rd-main-content (the heading moved up into
   the highlight row above) -- carries the same top separator
   .rd-listings-head used to provide. */
.rd-listings-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; padding-top: 24px; border-top: 1px solid var(--line); }
.rd-listings-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color 0.15s;
}
.rd-listings-filter svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.rd-listings-filter:hover { border-color: var(--accent-soft); }
.rd-listings-filter:focus-within { border-color: transparent; outline: 2px solid var(--warm); outline-offset: -2px; }
.rd-listings-filter-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  max-width: 160px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.rd-listings-filter-select:focus { outline: none; }
.rd-listings-filter-price { gap: 6px; color: var(--ink-soft); }
.rd-listings-filter-price > span { color: var(--muted); font-weight: 400; }
.rd-listings-filter-input {
  width: 64px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
}
.rd-listings-filter-input:focus { outline: none; }
.rd-listings-filter-input::placeholder { color: var(--muted); font-weight: 400; }
.rd-listings-filter-input::-webkit-inner-spin-button,
.rd-listings-filter-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rd-listings-filters-apply { height: 40px; padding: 0 18px; font-size: 13.5px; }
.rd-listings-filters-reset {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.rd-listings-filters-reset:hover { color: var(--accent-dark); text-decoration: underline; }
.rd-listings-empty { margin-bottom: 22px; }

/* ---------- Main layout: VIP rail + listings ---------- */
.rd-main-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 28px;
  align-items: start;
}
.rd-main-content { min-width: 0; }

/* ---------- VIP rail ---------- */
.rd-vip-rail {
  background: var(--canvas);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: sticky;
  top: 108px;
}
.rd-vip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rd-vip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); animation: rd-vip-pulse 1.8s infinite; flex-shrink: 0; }
.rd-vip-head h2 { font-size: 15px; font-weight: 800; margin: 0; font-family: var(--font-display); color: var(--ink); }
@keyframes rd-vip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Stack: fixed viewport tall enough for ~7 cards (only used once >7 VIP
   ads exist); clips the track. --rd-vip-card-h is an estimate matching a
   photo-topped card (4:3 media + category/title/city body) at the rail's
   ~244px content width -- real cards size themselves via flex; this
   constant only bounds the scrolling viewport's height. */
.rd-vip-stack {
  --rd-vip-card-h: 276px;
  --rd-vip-gap: 12px;
  overflow: hidden;
  position: relative;
}
.rd-vip-stack.is-scrolling {
  height: calc(var(--rd-vip-card-h) * 4 + var(--rd-vip-gap) * 3);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.rd-vip-track { display: flex; flex-direction: column; gap: var(--rd-vip-gap); }
.rd-vip-marquee { animation: rd-vip-scroll linear infinite; animation-duration: calc(var(--rd-vip-n, 7) * 3s); }
.rd-vip-stack:hover .rd-vip-marquee,
.rd-vip-stack.rd-vip-paused .rd-vip-marquee { animation-play-state: paused; }
@keyframes rd-vip-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Keyboard/touch-reachable pause control -- :hover alone (above) can't be
   reached without a pointer, and there was previously no way to stop the
   auto-scroll at all on touch devices. */
.rd-vip-pause-btn {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.rd-vip-pause-btn:hover { background: var(--canvas); color: var(--ink); }
.rd-vip-pause-btn svg { width: 12px; height: 12px; }

/* Card visual language matches the main .rd-card listing grid (photo on
   top, VIP badge over the image, category/title/meta below) -- the old
   version was a cramped 48px-thumbnail-plus-text row that read as a
   leftover from the pre-2026 design next to the modernized main content. */
/* Static gradient border -- built from the site's own --warm scale
   (VIP/CTA signaling color, see :root), just the padding revealing a
   gradient background underneath, same technique as any other
   padding-border card, no pseudo-element/filter/animation involved.
   (A previous version animated+blurred an oversized ::before behind
   the media/body panels for a spinning-ring effect; dropped after a
   real report of it rendering inconsistently between cards on some
   devices -- filter:blur() inside a clipped, animated, absolutely-
   positioned pseudo-element is a known flaky combination for GPU
   compositing. A static gradient can't fail to paint the same way.) */
.rd-vip-card {
  position: relative;
  flex-shrink: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 3px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--warm-dark), var(--warm), #e8935a);
  transition: box-shadow 0.15s, transform 0.15s;
}
.rd-vip-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .rd-vip-marquee { animation: none; }
}
.rd-vip-card-media { position: relative; z-index: 1; display: block; aspect-ratio: 4 / 3; background: var(--canvas); overflow: hidden; border-radius: calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px) 0 0; }
.rd-vip-card-media img { width: 100%; height: 100%; object-fit: cover; }
.rd-vip-badge { position: absolute; top: 8px; left: 8px; background: var(--warm); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; }
/* Body padding/type scale matches .rd-card-body/.rd-card-title/etc
   exactly -- every ad card on the page is the same compact size now. */
.rd-vip-card-body { position: relative; z-index: 1; padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--paper); border-radius: 0 0 calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px); }
.rd-vip-card-cat { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-vip-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

.rd-vip-empty { text-align: center; padding: 20px 6px; }
.rd-vip-empty-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--warm-tint); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--warm-dark); }
.rd-vip-empty-icon svg { width: 24px; height: 24px; }
.rd-vip-empty strong { display: block; font-size: 14px; margin-bottom: 8px; color: var(--ink); }
.rd-vip-empty p { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
.rd-vip-cta { width: 100%; height: 40px; font-size: 13px; }

/* ---------- Homepage-only VIP presentation ----------
   Reference layout puts VIP as its own full-width row above "Новые
   объявления", not the narrow sticky sidebar rail. inc/vip_2026.inc.php's
   markup/PHP stays untouched (it's also used on category pages and the
   single-ad page as the sticky rail) -- this only overrides descendants
   under the homepage's .rd-vip-wide wrapper. */
/* Same column count (5) and gap (14px) as .rd-highlight-grid -- both
   .rd-vip-wide and .rd-highlight-row are plain full-width children of
   .rd-container (neither shares its row with the sidebar the way
   .rd-listing-grid does further down), so matching column count alone
   is enough to guarantee identical card width here: no width-mirroring
   trick needed since they're already siblings in the same container
   context. (An earlier version mirrored .rd-main-grid's 1fr/240px
   split instead, sized to match .rd-listing-grid -- wrong target: the
   highlight row directly below VIP, not the deeper filtered grid, is
   what actually sits next to VIP and reads as "new ads" for comparison.) */
.rd-vip-wide { margin-bottom: 28px; }
.rd-vip-wide .rd-vip-rail { background: none; padding: 0; position: static; top: auto; min-width: 0; }
.rd-vip-wide .rd-vip-stack { overflow: visible; }
.rd-vip-wide .rd-vip-stack.is-scrolling { height: auto; -webkit-mask-image: none; mask-image: none; }
.rd-vip-wide .rd-vip-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: start; }
.rd-vip-wide .rd-vip-marquee { animation: none; }

/* ---------- Sidebar column: Популярное + Реклама (Вариант 4 reference) ---------- */
/* margin-top matches .rd-listings-filters' own top-border+padding+row
   height (measured: 87px, after the highlight row moved "Новые
   объявления"'s heading out of .rd-main-content) so Популярное/Реклама
   start level with the actual card grid, not the filters row above it.
   Desktop-only (see the
   900px breakpoint below) -- on the single-column mobile stack this
   column sits right after VIP, ahead of "Новые объявления" entirely,
   where this offset would just be a dead gap. */
.rd-sidebar-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin-top: 87px; }
.rd-popular {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 18px;
  /* Without a visible edge, a white card on the pale-blue .rd-listings
     backdrop is only as wide as its content reads -- a short numbered
     list doesn't reach the true right edge, so the card next to it
     (Реклама, whose inner .rd-banner-card has its own visible border)
     looked wider even though both containers are the same width. A flat
     1px border marks the true edge without box-shadow's blur/weight --
     the VIP row and category tiles are shadowless by default too (only
     .rd-vip-card gets one, on hover), so a shadow here read as these
     two blocks visually "popping" harder than everything else on the
     page, especially on narrow screens. */
  border: 1px solid var(--line);
}
.rd-popular-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-popular-item a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.rd-popular-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-popular-item a:hover .rd-popular-title { color: var(--accent-dark); }
.rd-popular-views {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.rd-popular-views svg { width: 13px; height: 13px; }

/* ---------- Homepage sidebar "recent comments" (inc/comments_side_2026.inc.php)
   -- reuses .rd-popular's own card chrome (border/radius/padding/background,
   see that class's comment for why it's a flat border and not a shadow)
   since it sits in the same .rd-sidebar-col, just with its own list/item
   layout: a comment carries more per row (author, excerpt) than
   Популярное's single title+views line. */
.rd-comments-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rd-comments-side-item + .rd-comments-side-item { padding-top: 14px; border-top: 1px solid var(--line); }
.rd-comments-side-item a {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-comments-side-item a:hover { color: var(--accent-dark); }
.rd-comments-side-item p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.rd-comments-side-item p strong { color: var(--ink); }

/* ---------- Banner rail ---------- */
/* Plain, ordinary grid item -- no sticky, no fixed. It sits in its slot
   (third column of .rd-main-grid) and scrolls normally with the page, same
   as the listing cards. Unlike the VIP rail, it never detaches from its
   neighbors or floats over other content as you scroll.
   Background is --paper, not --canvas -- .rd-listings itself sits on
   --canvas now (pale-blue backdrop), so a --canvas rail would blend
   invisibly into it; --paper keeps this reading as its own card. */
.rd-banner-rail {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: static;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
}
.rd-banner-head h2 { font-size: 15px; font-weight: 800; margin: 0 0 4px; font-family: var(--font-display); color: var(--ink); }
.rd-banner-stack { display: flex; flex-direction: column; gap: 12px; }
/* Plain bordered card, same treatment as the main .rd-card listing grid --
   no glow ring here, that's reserved for VIP's paid-promotion signaling. */
.rd-banner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: center;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
a.rd-banner-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); border-color: transparent; }
.rd-banner-card img { max-width: 100%; height: auto; border-radius: 6px; }
.rd-banner-label { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.rd-banner-card-code { width: 100%; }
.rd-banner-cta {
  display: block;
  text-align: center;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warm-dark);
  background: var(--warm-tint);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.rd-banner-cta:hover { background: var(--warm); color: #fff; }
/* Android app promo: own card at the top of the rail, above the rotating «Реклама» banners. */
.rd-app-promo { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rd-app-promo-card { display: block; border-radius: var(--radius-sm); overflow: hidden; align-self: center; transition: box-shadow 0.15s, transform 0.15s; }
.rd-app-promo-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.rd-app-promo-card img { display: block; max-width: 100%; height: auto; }
/* Google Play badge in the footer (official artwork, shown unmodified). */
.rd-footer-app { display: inline-flex; flex-shrink: 0; }
.rd-footer-app img { display: block; height: 56px; width: auto; }

.rd-listing-grid {
  display: grid;
  /* Was repeat(6, 1fr) -- reported as looking crowded at desktop widths,
     6 tiles packed edge to edge with only 14px gaps. 5 columns gives each
     card noticeably more width/breathing room without needing a taller
     page (same row count for a given ad total, just wider cards). Mobile
     breakpoints below (3, then 2 columns) are unaffected. */
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  /* Without this, grid's default align-items:stretch forces every card
     to the row's tallest natural height -- the shorter card's own flex
     children (media+body) don't grow to fill that extra space, so the
     leftover shows as a solid block of the card's own background at
     the bottom. Cards should size to their own content. */
  align-items: start;
}
.rd-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rd-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-3px); border-color: transparent; }
/* Second-tier "featured" promotion (checkbox_select, distinct from
   checkbox_top/VIP) -- old table view gave it a green dashed border; kept
   as a subtle accent tint here rather than a text badge since there's no
   current-day label for this tier in the ad-posting form to reuse. */
.rd-card-select { background: var(--accent-tint); border-color: var(--accent-soft); }
.rd-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--canvas);
  overflow: hidden;
}
.rd-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.rd-card:hover .rd-card-media img { transform: scale(1.05); }
/* /list's company cards: ~half of listings have no logo, and the site's
   own nophoto-N.jpg tiles are deliberately playful (watercolor splashes,
   hand-lettered "NO IMAGE") -- right tone for classifieds, wrong tone
   for a business directory. Plain centered icon on the media box's own
   --canvas background instead, no separate image file needed. */
.rd-card-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
}
.rd-card-media-empty svg { width: 42px; height: 42px; }
.rd-card-vip {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--warm);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
}
.rd-card-type {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(28, 37, 48, 0.72);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.rd-card-save {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.rd-card-save:hover { background: #fff; color: var(--price); }
.rd-card-save svg { width: 16px; height: 16px; }
/* Compact by default -- every ad card sitewide (VIP, highlight row,
   main grid, category-browse pages) shares this one .rd-card size now,
   dense enough for 6 per row instead of 3. */
.rd-card-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rd-card-cat { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}
.rd-card-excerpt {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-card-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rd-card-price { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--warm-dark); white-space: nowrap; }
.rd-card-price-nego { font-size: 12.5px; font-weight: 700; color: var(--warm-dark); }
.rd-card-meta {
  font-size: 10.5px;
  color: var(--muted);
  text-align: right;
  /* Flex items default to min-width:auto (won't shrink below their
     text's natural width even with flex-shrink:1) -- without this,
     price+meta combined not fitting the row pushed meta past the
     card's own right edge instead of truncating. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Tile / list switch for the ad grids ----------
   rd_view_toggle()/rd_view_class() in admin/conf.php. The grid carries
   rd-view-tiles, rd-view-list or rd-view-auto (no choice made yet: tiles
   here, list on phones -- see the max-width:560px block below). The list
   view reuses the same .rd-card markup, laid out as a row: first photo on
   the left, text in the middle, city/date and price along the bottom. */
.rd-view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  padding: 3px;
  gap: 2px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}
.rd-view-btn {
  width: 34px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rd-view-btn:hover { color: var(--ink); }
.rd-view-btn svg { width: 18px; height: 18px; }
.rd-view-toggle-tiles .rd-view-btn-tiles,
.rd-view-toggle-list .rd-view-btn-list,
.rd-view-toggle-auto .rd-view-btn-tiles { background: var(--accent-tint); color: var(--accent); }
.rd-subcat-chips .rd-view-toggle { margin-left: 0; }
/* Homepage filter bar: the four filters + Apply wrap onto a second line on
   most screens, which left the switch trailing at the end of that line.
   Pin it to the right end of the first line instead; the padding keeps the
   filters from running underneath it. */
.rd-listings-filters { position: relative; padding-right: 92px; }
.rd-listings-filters > .rd-view-toggle { position: absolute; right: 0; top: 24.5px; }
.rd-view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rd-view-head h2, .rd-view-head .rd-note { margin-bottom: 0; }
.rd-view-head + .rd-listing-grid { margin-top: 16px; }

/* Excerpt line that only the list view shows (the tile view stays compact). */
.rd-card-excerpt-list { display: none; }

.rd-listing-grid.rd-view-list { grid-template-columns: 1fr; gap: 10px; }
.rd-view-list .rd-card { flex-direction: row; }
.rd-view-list .rd-card:hover { transform: translateY(-1px); }
.rd-view-list .rd-card-media { flex: 0 0 210px; align-self: flex-start; }
.rd-view-list .rd-card:hover .rd-card-media img { transform: none; }
.rd-view-list .rd-card-body { padding: 12px 16px 12px 18px; gap: 4px; min-width: 0; }
.rd-view-list .rd-card-cat { font-size: 10.5px; }
.rd-view-list .rd-card-title { font-size: 16px; min-height: 0; }
.rd-view-list .rd-card-excerpt-list { display: -webkit-box; }
.rd-view-list .rd-card-excerpt { font-size: 13px; }
.rd-view-list .rd-card-foot { align-items: center; }
.rd-view-list .rd-card-meta { order: -1; margin-right: auto; text-align: left; font-size: 12px; }
.rd-view-list .rd-card-price { font-size: 17px; }
.rd-view-list .rd-card-price-nego { font-size: 13.5px; }

@media (max-width: 560px) {
  .rd-view-toggle-auto .rd-view-btn-tiles { background: transparent; color: var(--muted); }
  .rd-view-toggle-auto .rd-view-btn-list { background: var(--accent-tint); color: var(--accent); }

  .rd-listing-grid.rd-view-auto,
  .rd-listing-grid.rd-view-list { grid-template-columns: 1fr; gap: 8px; }
  .rd-view-auto .rd-card,
  .rd-view-list .rd-card { flex-direction: row; }
  .rd-view-auto .rd-card:hover,
  .rd-view-list .rd-card:hover { transform: none; }
  .rd-view-auto .rd-card-media,
  .rd-view-list .rd-card-media { flex: 0 0 116px; align-self: flex-start; }
  .rd-view-auto .rd-card-body,
  .rd-view-list .rd-card-body { padding: 8px 10px 9px 11px; gap: 2px; min-width: 0; }
  .rd-view-auto .rd-card-title,
  .rd-view-list .rd-card-title { font-size: 14px; min-height: 0; }
  /* The text excerpt would push the row well past the photo's height on a phone. */
  .rd-view-auto .rd-card-excerpt,
  .rd-view-list .rd-card-excerpt { display: none; }
  .rd-view-auto .rd-card-foot,
  .rd-view-list .rd-card-foot { padding-top: 6px; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
  .rd-view-auto .rd-card-meta,
  .rd-view-list .rd-card-meta { order: -1; flex-basis: 100%; text-align: left; font-size: 11px; white-space: normal; }
  .rd-view-auto .rd-card-price,
  .rd-view-list .rd-card-price { font-size: 15px; }
  .rd-view-auto .rd-card-price-nego,
  .rd-view-list .rd-card-price-nego { font-size: 13px; }
  /* The 116px photo is too small for the type badge plus the VIP badge and heart. */
  .rd-view-auto .rd-card-type,
  .rd-view-list .rd-card-type { display: none; }
  .rd-view-auto .rd-card-vip,
  .rd-view-list .rd-card-vip { top: 6px; left: 6px; padding: 3px 7px; font-size: 9.5px; }
  .rd-view-auto .rd-card-save,
  .rd-view-list .rd-card-save { top: 5px; right: 5px; width: 26px; height: 26px; }
}

.rd-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 36px; }
.rd-page {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rd-page:hover { background: var(--canvas); border-color: var(--accent-soft); color: var(--accent-dark); }
.rd-page-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.rd-page-nav { font-size: 15px; }

/* ---------- Footer ---------- */
.rd-footer { background: var(--ink); padding: 32px 0; margin-top: 8px; }
.rd-footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rd-footer-brand { display: flex; align-items: center; gap: 12px; }
.rd-footer-brand .rd-logo-mark { width: 34px; height: 34px; border-radius: 9px; }
.rd-footer-brand .rd-logo-mark svg { width: 18px; height: 18px; }
.rd-footer-brand strong { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; display: block; }
.rd-footer-brand strong .accent { color: var(--accent-soft); font-weight: 600; }
.rd-footer-brand p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); max-width: 480px; }
.rd-footer-brand p a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; }
.rd-footer-brand p a:hover { color: #fff; }

/* Visitor-counter odometer -- was hand-styled with the pre-2026 Arial/
   #2035fe tokens directly in inc/foot.inc.php, the last piece of the old
   system left on an otherwise-converted page (see DESIGN.md's Footer
   component note). Same digit-tile structure, reskinned onto the 2026
   token set; the light tiles-on-dark-footer read is intentional, kept
   from the original. */
.jbcounter-group { display: inline-flex; gap: 10px; vertical-align: middle; }
.jbcounter { display: inline-block; text-align: center; font-family: var(--font-body); }
.jbcounter .jbc-digits { display: inline-block; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); padding: 6px 5px; }
.jbcounter .jbc-digits span { display: inline-block; min-width: 14px; padding: 3px 4px; margin: 0 1px; background: var(--paper); border: 1px solid var(--line); color: var(--accent); font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; border-radius: 6px; text-align: center; }
.jbcounter .jbc-label { display: block; margin-top: 5px; font-size: 11px; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; }

/* ---------- Auth pages: login / register / forgot-password ----------
   One shared shell + card for all three, since they're one PHP template
   (inc/login.inc.php) dispatched by ?act=. Operate mode: familiar bordered
   form controls, not the hero's borderless search-pill treatment -- an
   auth form should look like a form, not a marketing search box. */
.rd-auth {
  min-height: 60vh;
  background: var(--canvas);
  display: flex;
  justify-content: center;
  padding: 56px 24px 72px;
}
.rd-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 36px 32px;
}
.rd-auth-card--wide { max-width: 560px; }
.rd-auth-card h1 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 22px;
}
.rd-auth-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

.rd-field { margin-bottom: 16px; }
.rd-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
/* Add/edit-ad forms only (both use name="add_form") -- field names here
   match the weight/size of the "+ Добавить еще одно поле" button
   (.rd-btn), not the lighter field labels used elsewhere sitewide. */
form[name="add_form"] .rd-field > label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.rd-required { color: var(--price); margin-left: 2px; }
.rd-field-note { display: block; font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.rd-field-tip { display: block; font-size: 12px; color: var(--accent-dark); background: var(--accent-tint); border: 1px solid var(--accent-soft); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 8px; line-height: 1.5; }

.rd-link-dashed { color: var(--accent-dark); text-decoration: none; border-bottom: 1px dashed var(--accent-soft); }
.rd-link-dashed:hover { color: var(--warm-dark); border-bottom-color: var(--warm); }
/* This class started out anchor-only -- reset browser chrome so a
   <button class="rd-link-dashed"> (the seller-review edit toggle) reads
   identically instead of showing default button padding/background. */
button.rd-link-dashed { background: none; padding: 0; font: inherit; cursor: pointer; border: none; border-bottom: 1px dashed var(--accent-soft); }

/* informers.html: embed-code snippet (JS/PHP) and its live-preview box.
   images/style.css (loaded sitewide, before this file) still targets
   #informer_code/#informer_preview by bare ID with an old yellow/green
   box treatment -- these ID+class compound selectors outrank that. */
#informer_code.rd-code {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 14px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
#informer_code.rd-code b { color: var(--warm-dark); }
#informer_preview.rd-preview-box {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-soft);
}
#informer_preview.rd-preview-box:empty { display: none; }
.rd-field-picker { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.rd-field-picker a { color: var(--accent); font-weight: 600; font-size: 12.5px; }
.rd-field-picker a:hover { color: var(--accent-dark); text-decoration: underline; }
.rd-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  transition: border-color 0.15s, outline-color 0.15s;
}
.rd-input:focus { outline: 2px solid var(--warm); outline-offset: -2px; border-color: transparent; }
.rd-input::placeholder { color: var(--muted); }
textarea.rd-input { height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.5; resize: vertical; }

.rd-field-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin: -4px 0 16px; }
.rd-field-check input { width: 16px; height: 16px; accent-color: var(--warm); }
.rd-field-hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.rd-radio-group { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13.5px; color: var(--ink-soft); }
.rd-radio-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.rd-radio-group input[type="radio"], .rd-radio-group input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--warm); }
.rd-field-row { display: flex; align-items: center; gap: 10px; }
.rd-field-row .rd-input { flex: 1; }
.rd-field-row span { color: var(--muted); font-size: 13px; }
.rd-panel-rules { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; background: var(--canvas); border-radius: var(--radius-sm); padding: 16px; margin: 4px 0 20px; }

.rd-auth-submit { width: 100%; margin-top: 4px; }

.rd-auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-size: 13px; }
.rd-auth-links a { color: var(--accent); font-weight: 600; }
.rd-auth-links a:hover { color: var(--accent-dark); text-decoration: underline; }

.rd-btn-google {
  width: 100%;
  height: 46px;
  margin-top: 22px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rd-btn-google:hover { border-color: var(--accent-soft); box-shadow: 0 1px 4px rgba(28, 37, 48, 0.1); }

.rd-alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; border: 1px solid transparent; }
.rd-alert-error { background: #fdf0ee; border-color: #f3c9c2; color: var(--price); }
.rd-alert-success { background: #eef8f1; border-color: #bfe3cb; color: var(--new); }
.rd-alert-info { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent-dark); }
.rd-alert-info a { color: var(--accent-dark); font-weight: 700; text-decoration: underline; }
.rd-alert h3 { font-family: var(--font-display); font-size: 14px; font-weight: 800; margin: 0 0 8px; }
.rd-alert ul { margin: 0; padding-left: 18px; }
.rd-alert li { margin-bottom: 4px; }
.rd-alert-notice { padding: 20px 22px; margin-bottom: 0; border-radius: var(--radius-lg); }

/* ---------- VIP payment tier picker (vip{id}.html) ----------
   Two tiers, same visual weight, differentiated only by role color --
   warm for "VIP" (top placement), green for "Выделение" (highlight),
   matching the Two Warms Rule / confirm-green convention already
   established sitewide. Payment-method icons (WebMoney/Interkassa/
   PayPal) are untouched placeholder markup from inc/vip_info.inc.php --
   only the button chrome around them is styled here. */
.rd-tier { border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; }
.rd-tier-vip { background: var(--warm-tint); border: 1px solid #f3d4bc; }
.rd-tier-select { background: #eef8f1; border: 1px solid #bfe3cb; }
.rd-tier h2 { font-family: var(--font-display); font-size: 16px; font-weight: 800; margin: 0 0 10px; }
.rd-tier-vip h2 { color: var(--warm-dark); }
.rd-tier-select h2 { color: var(--new); }
.rd-tier-active { font-size: 13px; font-weight: 700; color: var(--new); margin: 0 0 4px; }
.rd-tier-note, .rd-note { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
.rd-note strong { color: var(--ink); }
.rd-tier-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-tier-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rd-tier-method:hover { border-color: var(--accent-soft); box-shadow: 0 1px 4px rgba(28, 37, 48, 0.08); }
.rd-tier-methods form { display: contents; }
button.rd-tier-method { font-family: inherit; cursor: pointer; }

.rd-promo-block { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.rd-promo-block h3 { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 14px; }
.rd-promo-item { background: var(--canvas); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px; }
.rd-promo-item:last-child { margin-bottom: 0; }
.rd-promo-item h4 { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.rd-promo-item h4 .accent { color: var(--warm-dark); }
.rd-promo-item p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 6px; }
.rd-promo-item a { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.rd-promo-item a:hover { color: var(--accent-dark); text-decoration: underline; }


.rd-auth-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.rd-auth-back:hover { color: var(--ink-soft); }

.rd-captcha { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rd-captcha img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.rd-captcha-reload { font-size: 12.5px; color: var(--accent); }
.rd-captcha-reload:hover { color: var(--accent-dark); text-decoration: underline; }

@media (max-width: 560px) {
  .rd-auth { padding: 32px 16px 56px; }
  .rd-auth-card { padding: 28px 22px; }
}

.rd-photo-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.rd-photo-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; }
.rd-photo-item img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.rd-photo-item label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); text-align: center; cursor: pointer; }

/* One upload slot shown by default (was every one of count_images_for_users
   -- 10 -- dumped on the page at once); "+ Add another" grows the list up
   to that same limit instead. See rdAddPhotoSlot() in add_new_form.inc.php/
   user_edit_form.inc.php. */
.rd-photo-upload { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rd-photo-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--canvas);
  border-radius: var(--radius-sm);
}
.rd-photo-upload-input { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-soft); }
.rd-photo-upload-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--paper);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.rd-photo-upload-remove:hover { background: var(--warm-tint); color: var(--warm-dark); }
.rd-photo-upload-add { align-self: flex-start; margin-top: 4px; }

/* Client-side validation (images/main.js check_fields()) sets
   className="err" directly on invalid fields, REPLACING the class
   attribute wholesale -- rd-input included. Scoped so an err'd field
   gets a self-sufficient error treatment instead of falling back to the
   sitewide .err (3px red border, yellow fill) built for the old
   table-layout forms elsewhere on the site. */
.rd-2026 input.err, .rd-2026 select.err {
  display: block; width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--price); border-radius: var(--radius-sm);
  background: #fdf0ee; font-size: 14px; font-family: inherit; color: var(--ink);
}
.rd-2026 textarea.err {
  display: block; width: 100%; min-height: 120px; padding: 12px 14px;
  border: 1.5px solid var(--price); border-radius: var(--radius-sm);
  background: #fdf0ee; font-size: 14px; font-family: inherit; color: var(--ink); line-height: 1.5;
}

/* ---------- Account dashboard (cpanel.html) ----------
   A management surface, not a marketing one: Operate mode favors a real
   table over cards for many similar rows with per-row actions -- density
   and scanability outrank expression here. Shares the auth-card/field/
   button/alert vocabulary above for its narrower single-purpose forms
   (profile.html password change, accept_rules.html gate) so the same
   controls look and behave identically everywhere on the site. */
.rd-panel { min-height: 60vh; background: var(--canvas); padding: 40px 0 72px; }
.rd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd-panel-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.rd-panel-head-links { display: flex; gap: 10px; }

.rd-panel-section { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 26px; margin-top: 24px; }
.rd-panel-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rd-panel-section-head h2 { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }

.rd-panel-empty { text-align: center; padding: 40px 20px; }
.rd-panel-empty p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 18px; }

.rd-table-wrap { overflow-x: auto; }
.rd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rd-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 12px 10px;
  border-bottom: 1.5px solid var(--line);
}
.rd-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rd-table tr:last-child td { border-bottom: none; }
.rd-table th.rd-table-check, .rd-table td.rd-table-check { width: 36px; text-align: center; }
.rd-table th.rd-table-actions, .rd-table td.rd-table-actions { text-align: right; }
.rd-table tr.rd-row-vip td { background: var(--warm-tint); }
.rd-table tr.rd-row-selected td { background: #eef8f1; }
.rd-table-title { font-weight: 700; color: var(--ink); }
.rd-table-title:hover { color: var(--accent-dark); }
.rd-table-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.6; }

.rd-checkbox { width: 16px; height: 16px; accent-color: var(--warm); cursor: pointer; }

.rd-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.rd-row-action {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.rd-row-action:hover { background: var(--canvas); color: var(--accent-dark); }
.rd-row-action-danger:hover { background: #fdf0ee; color: var(--price); }
.rd-row-action svg { width: 16px; height: 16px; }

.rd-panel-bulk { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--ink-soft); }

@media (max-width: 700px) {
  .rd-panel-section { padding: 18px 14px; }
  .rd-table thead { display: none; }
  .rd-table, .rd-table tbody, .rd-table tr, .rd-table td { display: block; width: 100%; }
  .rd-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .rd-table tr:last-child { border-bottom: none; }
  .rd-table td { padding: 4px 0; border-bottom: none; }
  .rd-table td.rd-table-check { text-align: left; padding-bottom: 8px; }
  .rd-table td.rd-table-actions { margin-top: 8px; }
  .rd-row-actions { justify-content: flex-start; }
}

/* ---------- Ad detail page (c{cat}-{id}.html) ---------- */
.rd-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.rd-breadcrumb a { color: var(--muted); }
.rd-breadcrumb a:hover { color: var(--accent-dark); }
.rd-breadcrumb .rd-breadcrumb-current { color: var(--ink-soft); font-weight: 600; }

.rd-ad-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.rd-ad-main { min-width: 0; }

.rd-ad-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.rd-ad-meta img { width: 16px; height: 16px; }

.rd-ad-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--ink); margin: 0 0 16px; line-height: 1.25; }

.rd-ad-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.rd-ad-photos a { display: block; position: relative; width: 150px; height: 150px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; }
.rd-ad-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.rd-ad-photos a:hover img { transform: scale(1.06); }
.rd-ad-photos a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(28, 37, 48, 0.35), transparent 45%);
  opacity: 0;
  transition: opacity 0.2s;
}
.rd-ad-photos a:hover::after { opacity: 1; }

.rd-ad-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--canvas);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.rd-ad-fields { font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; margin-bottom: 20px; }
.rd-ad-fields b { color: var(--ink); }

.rd-ad-video { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 20px; border-radius: var(--radius-md); overflow: hidden; background: var(--ink); }
.rd-ad-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.rd-ad-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rd-ad-facts strong { color: var(--ink); }
.rd-ad-price { font-family: var(--font-display); font-weight: 800; color: var(--warm-dark); }

.rd-ad-author { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.rd-ad-author strong { color: var(--ink); }
.rd-ad-author a { font-size: 12px; color: var(--accent); }
.rd-ad-author a:hover { color: var(--accent-dark); }

/* Structured phone/messenger buttons (separate from the free-text
   contacts block below) -- brand-colored pills so a phone number posted
   as a real field reads as an obvious call-to-action, not just more text. */
.rd-ad-quickcontacts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.rd-ad-quickcontact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: filter 0.15s, transform 0.15s;
}
.rd-ad-quickcontact:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.rd-ad-quickcontact svg { width: 13px; height: 13px; flex-shrink: 0; }
.rd-ad-quickcontact-phone { background: var(--accent); }
.rd-ad-quickcontact-telegram { background: #229ed9; }
.rd-ad-quickcontact-whatsapp { background: #25d366; }
.rd-ad-contacts { font-size: 14px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 20px; }
.rd-ad-contacts strong { color: var(--ink); }
.rd-ad-contacts a { color: var(--accent); font-weight: 600; }
.rd-ad-contacts a:hover { color: var(--accent-dark); }

.rd-ad-actions { display: flex; flex-direction: column; gap: 2px; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--line); }
/* Leave comment is now a real button (was a plain text row like its
   neighbors, easy to miss) -- the shared 2px row gap above is too tight
   once one row is a full-height button instead of a text line. */
#add_comments { margin-top: 10px; }
.rd-ad-action { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; color: var(--ink-soft); }
.rd-ad-action svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.rd-ad-action-warm svg { color: var(--warm-dark); }
.rd-ad-action a { color: var(--accent); font-weight: 600; }
.rd-ad-action a:hover { color: var(--accent-dark); text-decoration: underline; }
.rd-ad-action-warm a { color: var(--warm-dark); }
.rd-ad-action-warm a:hover { color: var(--warm); }
.rd-ad-action-note { font-size: 12px; color: var(--muted); margin-left: 4px; }

.rd-ad-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

/* Was unstyled -- just border-bottom dividers sitting directly on the ad
   card's own --paper white, same as the plain bookmark/report/print link
   list above it, so visitor comments read as part of the ad itself
   instead of a separate section. Same --canvas sunken-panel treatment
   already used for .rd-panel-rules/.rd-promo-item/.rd-comments-feed. */
.rd-ad-comments { margin-top: 8px; background: var(--canvas); border-radius: var(--radius-md); padding: 4px 16px; }
.rd-ad-comment { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rd-ad-comment:last-child { border-bottom: none; }
.rd-ad-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.rd-ad-comment-head strong { color: var(--ink); }
.rd-ad-comment-head svg { width: 14px; height: 14px; flex-shrink: 0; vertical-align: middle; color: var(--muted); }
.rd-ad-comment-votes { display: flex; align-items: center; gap: 10px; }
.rd-ad-comment-votes a { font-size: 15px; text-decoration: none; }
.rd-ad-comment-votes span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.rd-ad-comment p { font-size: 13.5px; color: var(--ink); line-height: 1.6; margin: 0; }

.rd-ad-navpage { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.rd-ad-navpage a { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--warm-dark); }

/* ---------- Homepage "recent comments" feed (list/inc/last_comments_2026.inc.php)
   -- reuses .rd-ad-comment/.rd-ad-comment-head from the ad-detail page's own
   comments section (same visual language), just in a 2-column grid instead
   of one long single-column list, and with a title link to the commented
   listing (.rd-table-title, already shared) above the comment text. */
.rd-comments-feed { padding: 8px 0 48px; background: var(--canvas); }
.rd-comments-feed-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
.rd-comment-feed-item .rd-table-title { display: block; font-size: 13.5px; margin-bottom: 4px; }
@media (max-width: 700px) {
  .rd-comments-feed-grid { grid-template-columns: 1fr; }
}
.rd-ad-navpage a:hover { color: var(--warm); }

@media (max-width: 900px) {
  .rd-ad-grid { grid-template-columns: 1fr; }
}

/* ---------- Generic CMS content page (op=content / p{id}.html) ----------
   Read mode: the visitor's job is to understand something, not browse or
   act, so this gets its own single centered column (no VIP-rail sidebar)
   capped at a comfortable prose measure -- not the wide .rd-panel used for
   management surfaces. The body itself is raw admin-authored HTML from
   jb_page.text (18 pages: terms, FAQ, ad rates, VIP payment instructions,
   flight schedules, etc.) -- these rules style whatever tags show up in
   it, the same way a markdown-body/prose class would, since the exact
   shape can't be controlled from here. */
.rd-content { min-height: 60vh; background: var(--canvas); padding: 48px 24px 72px; display: flex; justify-content: center; }
.rd-content-card { width: 100%; max-width: 760px; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 40px 44px; }
.rd-content-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 24px; line-height: 1.25; }

.rd-content-body { font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.rd-content-body h1, .rd-content-body h2, .rd-content-body h3, .rd-content-body h4 { font-family: var(--font-display); font-weight: 800; color: var(--ink); margin: 24px 0 12px; line-height: 1.3; }
.rd-content-body h1 { font-size: 21px; }
.rd-content-body h2 { font-size: 18px; }
.rd-content-body h3 { font-size: 15.5px; }
.rd-content-body h4 { font-size: 14.5px; }
.rd-content-body p { margin: 0 0 14px; }
.rd-content-body a { color: var(--accent); font-weight: 600; }
.rd-content-body a:hover { color: var(--accent-dark); text-decoration: underline; }
.rd-content-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; margin: 0 0 14px; }
.rd-content-body ul, .rd-content-body ol { margin: 0 0 14px; padding-left: 22px; }
.rd-content-body li { margin-bottom: 6px; }
.rd-content-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13.5px; }
.rd-content-body th, .rd-content-body td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rd-content-body th { font-weight: 700; color: var(--ink-soft); background: var(--canvas); }
.rd-content-body strong, .rd-content-body b { color: var(--ink); }
.rd-content-body blockquote { border-left: 3px solid var(--warm); padding-left: 14px; color: var(--ink-soft); margin: 0 0 14px; }
.rd-content-body hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

@media (max-width: 560px) {
  .rd-content { padding: 28px 16px 56px; }
  .rd-content-card { padding: 26px 22px; }
}

@media (max-width: 900px) {
  /* Sticky like desktop (base rule), flush edge-to-edge here since the nav
     wraps to multiple rows -- the fill is already opaque enough (base rule)
     to stay legible over however many rows it wraps to, so only the shape
     changes at this breakpoint. */
  .rd-header-float { padding: 0; overflow-x: hidden; }
  .rd-header-glass {
    max-width: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  /* Was 180px, clearing the old absolutely-positioned overlay through
     however many rows the wrapped nav grew to. Sticky + in-flow now, so
     this only needs to be a small, fixed decorative gap. Halved along
     with the desktop base padding (see .rd-hero .rd-container above) --
     "takes up half the screen" applied here too, not just on Mac. */
  .rd-hero .rd-container { padding-top: 16px; }

  .rd-nav .rd-container { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .rd-navlinks { order: 3; width: 100%; overflow-x: auto; }
  .rd-nav-post { order: 2; margin-left: 0; }
  .rd-hero-badge { margin-bottom: 8px; }
  /* 28px, not a further shrink from desktop's 32px -- was 22px here with
     a separate ≤560px rule bumping back up to 28px for true phones, which
     made a phone's headline render LARGER than a tablet/small-laptop's
     (22px covered everything ≤900px, so a 700px-wide view got the
     smallest size on the whole scale). Unified on the one deliberately-
     chosen phone value across the entire ≤900px range instead. */
  .rd-hero h1 { font-size: 28px; margin-bottom: 6px; }
  .rd-hero-search { margin: 12px 0 10px; }
  .rd-hero-links { grid-template-columns: 1fr; }
  .rd-hero-links-spacer { display: none; }
  .rd-hero-search-filters { flex-direction: column; }
  .rd-hero-search-select { width: 100%; }
  .rd-hero-search-submit { width: 100%; }
  /* Was 400px, taller than desktop's floor because the 3 filter controls
     (category, city, submit) stack into 3 full-width rows here instead
     of one -- still true after the size pass, so this stays higher than
     desktop's 200px rather than matching it 1:1, just scaled down by
     the same proportion. */
  .rd-hero { min-height: 290px; }
  .rd-hero-scrim { background: linear-gradient(180deg, rgba(16,26,38,0.55) 0%, rgba(16,26,38,0.88) 55%, rgba(16,26,38,0.96) 100%); }
  .rd-hero-content { max-width: 100%; }

  .rd-categories-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .rd-listing-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .rd-highlight-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .rd-vip-wide .rd-vip-track { grid-template-columns: repeat(3, 1fr); }
  .rd-listings-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  .rd-main-grid { grid-template-columns: 1fr; }
  .rd-vip-rail { position: static; order: 1; }
  .rd-vip-stack { --rd-vip-card-h: 480px; }
  /* Single column here (grid-template-columns:1fr above). Mobile-only
     layout, deliberately different from desktop: Популярное hidden
     entirely, Реклама stays just under VIP (where the sidebar as a
     whole used to sit), and Последние комментарии moves to after the
     listings instead. display:contents on .rd-sidebar-col drops its own
     box so its children (.rd-popular/.rd-comments-side/.rd-banner-rail)
     become direct, independently-orderable items of .rd-main-grid --
     desktop's CSS (line ~1044) and DOM are untouched either way. */
  .rd-sidebar-col { display: contents; }
  /* .rd-comments-side also carries .rd-popular (shared card styling,
     see inc/comments_side_2026.inc.php) -- :not() here so this only
     hides the actual Популярное block, not comments too. */
  .rd-popular:not(.rd-comments-side) { display: none; }
  /* display:contents drops .rd-sidebar-col's own box, so its old
     min-width:0 (line ~1044) no longer applies to anything -- these are
     now direct .rd-main-grid items themselves and grid items default to
     min-width:auto, which lets wide intrinsic content (a fixed-width ad
     network banner in .rd-banner-rail, in particular) blow out the
     shared 1fr track width and drag .rd-main-content/the ad grid along
     with it. Restore the same shrink-to-fit each was implicitly getting
     before. */
  .rd-banner-rail, .rd-comments-side { min-width: 0; }
  .rd-banner-rail { order: 2; }
  .rd-main-content { order: 3; }
  .rd-comments-side { order: 4; }
}
@media (max-width: 560px) {
  /* Was display:none on the whole bar -- that took the RU/Turkmen
     language toggle down with it, since .rd-utility-lang is its only
     home anywhere on the page. Keep that half, drop the more skippable
     Home/Contacts/RSS/Моб. версия links; overflow-x:auto (same pattern
     .rd-navlinks already uses at 900px) covers the logged-in state's
     longer "Личный кабинет / Блокнот / Выйти" label set without wrapping
     the header onto an extra row. */
  .rd-utility-links { display: none; }
  .rd-utility .rd-container { justify-content: flex-end; }
  .rd-utility-lang { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }

  .rd-categories { padding: 24px 0 4px; }
  .rd-categories-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .rd-cat-tile { flex: 0 0 84px; scroll-snap-align: start; }
  .rd-listing-grid { grid-template-columns: repeat(2, 1fr); }
  .rd-highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .rd-vip-wide .rd-vip-track { grid-template-columns: repeat(2, 1fr); }

  .rd-footer-grid { flex-direction: column; align-items: flex-start; gap: 18px; }
  .jbcounter-group { align-self: flex-start; }
}

/* ---------- Flyer print popup (flaer_message.inc.php): a standalone,
   chrome-free document opened in a small window.print() popup -- no site
   header/nav here on purpose. Ends with a tear-off tab strip (ad title +
   contacts repeated 7x) meant to be printed and cut into strips; the old
   markup rotated it via an IE-only conditional-comment writing-mode
   style that no other browser has ever executed, so on every real browser
   the "strips" just rendered as one long stacked block. Rebuilt as real
   CSS writing-mode below so the tear-off effect actually now works
   cross-browser when printed. ----------------------------------------- */
.rd-flyer {
  background: var(--canvas);
  padding: 40px 20px 60px;
}
.rd-flyer-page {
  max-width: 640px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 36px 28px;
}
.rd-flyer-head { text-align: center; margin-bottom: 20px; }
.rd-flyer-head .rd-logo { display: inline-flex; color: var(--ink); }
.rd-flyer-submeta {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 18px;
}
.rd-flyer-type { width: 16px; height: 16px; vertical-align: middle; }
.rd-flyer-mail { margin-top: 10px; }
.rd-flyer-mail img { display: block; }
.rd-flyer-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.25;
  text-align: center;
  margin: 0 0 20px;
}
.rd-flyer-body { font-size: 15px; line-height: 1.65; }
.rd-flyer-facts:empty { display: none; }
.rd-flyer-facts { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.rd-flyer-meta { font-size: 15px; line-height: 1.7; margin-top: 6px; }
.rd-flyer-meta .orange { color: var(--warm-dark); }
.rd-flyer-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.rd-flyer-photo {
  width: 110px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.rd-flyer-photo img { width: 100%; height: auto; }
.rd-flyer-disclaimer {
  margin-top: 26px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.rd-flyer-disclaimer hr { border: none; border-top: 1px solid var(--line); margin: 0 0 14px; }
.rd-flyer-actions { text-align: center; margin-top: 28px; }

/* Tear-off tabs: on screen, a preview strip of repeated cut-tags stacked
   in a row; on print, each tab rotates 90deg so the strip can be sliced
   into vertical tear-off tabs along the bottom of the printed page. */
.rd-flyer-tabs {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 2px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.rd-flyer-tab {
  flex: 1 0 120px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  border-right: 1px dashed var(--line);
}
.rd-flyer-tab:last-child { border-right: none; }

@media print {
  .rd-flyer { background: none; padding: 0; }
  .rd-flyer-page { border: none; box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
  .no-print { display: none !important; }
  .rd-flyer-tabs {
    border-top: 1px solid #000;
    flex-wrap: nowrap;
  }
  .rd-flyer-tab {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-right: 1px dashed #000;
    padding: 12px 6px;
    white-space: normal;
  }
}

/* ---------- Ad photo lightbox (GLightbox, self-hosted js/css/glightbox.3.3.1.min.*)
   Vendor skin left as-is (already dark/minimal, matches this system's own
   dark-surface language); only re-pointing radius to the token scale and
   giving prev/next their Accent hover per the Two Accents Rule -- they're
   navigation (move between photos), not an action/CTA, so Warm is wrong
   here even though it's the closer-looking default. Close stays a plain
   neutral hover -- it isn't "go somewhere," it's "leave," no accent color
   applies. The slide counter is this site's own addition (upstream ships
   no counter); styled as the same dark pill badge as .rd-card-vip/.rd-card-type
   elsewhere on the 2026 cards, not a new shape. ---------- */
.gclose, .gnext, .gprev { border-radius: var(--radius-sm) !important; }
.gnext:hover, .gprev:hover { background-color: var(--accent) !important; }
.rd-lightbox-counter {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 99999;
  background: rgba(16, 24, 33, 0.82); /* same dark-glass tone as .rd-header-glass */
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}

/* ---------- Seller profile page (inc/seller.inc.php) ---------- */
.rd-seller { padding: 32px 0 60px; }
.rd-panel-section > h2 { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 18px; }

.rd-seller-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px;
}
.rd-seller-avatar {
  /* width/height/font-size come from admin/conf.php's rd_seller_avatar()
     inline style now (the $size param) -- reused at smaller sizes for
     ad-comment and seller-review avatars, not just the profile header. */
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}
.rd-seller-info { min-width: 0; flex: 1; }
.rd-seller-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.rd-seller-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--canvas);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}
.rd-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.rd-badge-verified { background: var(--accent-tint); color: var(--accent-dark); }
.rd-badge-rating { background: #fdf3e0; color: #93650f; }
.rd-badge-rating svg { color: var(--rating); }
.rd-badge-online { background: #e7f6ee; color: #1c7a45; }
.rd-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--new); flex-shrink: 0; }
.rd-seller-cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* #mailto itself is a plain block div (see inc/seller.inc.php's comment --
   sendFormMailToUser() replaces its entire innerHTML with the legacy
   contact form on click, so it must not carry button/flex styling of its
   own). Stays button-width in the CTA row until the form actually
   replaces it, then claims the full row width instead of staying
   squeezed to that button's width. */
.rd-seller-cta:has(#mailto form) .rd-seller-mailto { flex-basis: 100%; }
.rd-seller-mailto form { max-width: 420px; }

.rd-seller-reviews-avg { color: var(--rating); font-weight: 700; font-size: 14px; margin-left: 6px; }
.rd-review-list { display: flex; flex-direction: column; gap: 16px; }
.rd-review { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.rd-review:last-child { border-bottom: none; padding-bottom: 0; }
.rd-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13.5px; }
.rd-review-head strong { color: var(--ink); }
.rd-review-stars { color: var(--rating); letter-spacing: 1px; }
.rd-review-date { color: var(--muted); font-size: 12px; margin-left: auto; }
.rd-review p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.rd-review-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.rd-review-form h3 { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 14px; }
.rd-review-form-rating { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 12px; }
.rd-review-form textarea.rd-input { min-height: 90px; margin-bottom: 12px; }

@media (max-width: 640px) {
  .rd-seller-header { flex-direction: column; align-items: center; text-align: center; }
  .rd-seller-badges, .rd-seller-cta { justify-content: center; }
  .rd-review-date { margin-left: 0; }
}

/* ---------- Shared comment/review composer (ad comments + seller
   reviews) -- inc/message.inc.php, core/add_comments.php,
   inc/seller.inc.php, core/add_seller_review.php ---------- */
.rd-comment-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; }
.rd-comment-form-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.rd-comment-form-tip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: help; }
.rd-comment-form-tip svg { width: 14px; height: 14px; flex-shrink: 0; }
.rd-comment-form-identity { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--ink-soft); }
/* resize: both, not the sitewide textarea.rd-input default of vertical-
   only -- this box's fixed width feels cramped for a full comment/review,
   more so than the site's other (shorter) textarea.rd-input uses. */
.rd-comment-form textarea.rd-input { min-height: 90px; margin-bottom: 8px; resize: both; max-width: 100%; }
.rd-comment-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.rd-comment-form-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.rd-comment-form-tools button {
  background: none;
  border: none;
  font-size: 17px;
  line-height: 1;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.rd-comment-form-tools button:hover { background: var(--canvas); }
.rd-comment-form-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.rd-comment-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rd-comment-form-note { font-size: 11.5px; color: var(--muted); }
.rd-comment-form-guest { text-align: center; padding: 22px 16px; }
.rd-comment-form-guest p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; }

/* Comment-list avatar row -- added to the existing .rd-ad-comment /
   .rd-review markup (rating/vote sub-parts stay component-specific). */
.rd-comment-row { display: flex; gap: 10px; align-items: flex-start; }
.rd-comment-row-body { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .rd-comment-form-actions { flex-direction: column; align-items: stretch; }
  .rd-comment-form-actions .rd-btn { width: 100%; }
}

/* ---------- Price drop (admin/conf.php's rd_get_price_drop(), used by
   inc/message.inc.php, rd_ad_card(), inc/note.inc.php, and the 3 legacy
   card templates) ---------- */
.rd-price-old { color: var(--muted); text-decoration: line-through; font-weight: 500; margin-right: 6px; }
.rd-price-drop-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #eef8f1;
  color: var(--new);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}
.rd-price-drop-badge svg { width: 11px; height: 11px; flex-shrink: 0; }