/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #F7F7F9;
  --white: #FFFFFF;
  --text-primary: #1A1A2E;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --border: #E5E7EB;
  --border-light: #F3F4F6;

  --accent: #2858FF;
  --accent-hover: #1E4AE6;
  --accent-light: #EBF0FF;
  --pink: #FF5C7C;
  --green: #22C55E;
  --green-light: #F0FDF4;
  --green-dark: #16A34A;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --container: 1280px;
  --header-h: 64px;
  --topbar-h: 36px;
  --mobile-nav-h: 64px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===========================
   DARK THEME
   =========================== */
[data-theme="dark"] {
  --bg: #0f0f14;
  --white: #1a1a24;
  --text-primary: #e8e8ed;
  --text-secondary: #9a9aaf;
  --text-muted: #6b6b80;
  --border: #2a2a3a;
  --border-light: #22222e;

  --accent-light: #1a1f3d;
  --green-light: #0d2818;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.35);

  color-scheme: dark;
}

/* Dark theme overrides */
[data-theme="dark"] body { background: var(--bg); color: var(--text-primary); }
[data-theme="dark"] .header { background: #12121a; border-bottom: 1px solid var(--border); }
[data-theme="dark"] .header--scrolled { background: #12121a; }
[data-theme="dark"] .header--scrolled .search-box { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .header--scrolled .search-box__input { color: var(--text-primary); }
[data-theme="dark"] .top-bar { background: #0a0a10; }
[data-theme="dark"] .footer { background: #0a0a10; }
[data-theme="dark"] .mobile-nav { background: #12121a; border-top: 1px solid var(--border); }
[data-theme="dark"] .mobile-menu { background: var(--bg); }
[data-theme="dark"] .modal { background: var(--bg); }
[data-theme="dark"] .modal__header { background: var(--white); border-bottom: 1px solid var(--border); }
[data-theme="dark"] .modal__body { background: var(--bg); }
[data-theme="dark"] .modal--center .modal__body { background: var(--white); }
[data-theme="dark"] .dropdown__menu { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .dropdown__menu::before { background: var(--white); }
[data-theme="dark"] .profile-dropdown { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .search-dropdown { background: var(--white); }
[data-theme="dark"] .breadcrumb { background: var(--white); border-bottom: 1px solid var(--border); }
[data-theme="dark"] img { opacity: 0.92; }
[data-theme="dark"] .auto-card__gallery img { opacity: 1; }
[data-theme="dark"] .skeleton, [data-theme="dark"] .skeleton-shimmer { background: linear-gradient(90deg, #1a1a24 25%, #22222e 37%, #1a1a24 63%); background-size: 800px 100%; }
[data-theme="dark"] .auto-card__gallery::after { background: linear-gradient(90deg, #1a1a24 25%, #22222e 37%, #1a1a24 63%); background-size: 800px 100%; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--white); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .modal__input { background: #12121a; color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .btn--outline { border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .btn--outline:hover { border-color: var(--accent); }
[data-theme="dark"] .auth-field__input { background: #12121a; color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .listing-page__info-divider { border-color: var(--border); }

/* Dark logo: show white, hide color */
[data-theme="dark"] .header__logo img.header__logo-white { display: block !important; }
[data-theme="dark"] .header__logo img.header__logo-color { display: none !important; }
[data-theme="dark"] .footer__logo img { filter: brightness(0) invert(1); }
[data-theme="dark"] .mobile-menu__logo img { filter: brightness(0) invert(1); }

/* Search box */
[data-theme="dark"] .search-box { background: #22222e; border-color: var(--border); }
[data-theme="dark"] .search-box__input { color: var(--text-primary); }
[data-theme="dark"] .search-box__input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .search-box__btn { background: var(--accent); color: #fff; }
[data-theme="dark"] .search-box__location { color: var(--text-secondary); border-left-color: var(--border); }
[data-theme="dark"] .search-box__icon { color: var(--text-muted); }

/* Breadcrumb — blend with bg */
[data-theme="dark"] .breadcrumb { background: var(--bg); border-bottom: none; }

/* Category icons */
[data-theme="dark"] .categories-alt__icon svg { opacity: 0.85; }
[data-theme="dark"] .categories-alt__item { background: var(--white); }
[data-theme="dark"] .categories-alt__item:hover { background: #22222e; }

/* Buttons & chips — white text on colored backgrounds */
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .btn--danger,
[data-theme="dark"] .auth-submit,
[data-theme="dark"] .modal__chip--active,
[data-theme="dark"] .search-filter-btn--main,
[data-theme="dark"] .listing-card__badge--vip,
[data-theme="dark"] .listing-card__badge--new,
[data-theme="dark"] .listing-card__badge--used,
[data-theme="dark"] .search-filter-btn__count,
[data-theme="dark"] .ref-balance__btn,
[data-theme="dark"] .promote-plan__btn,
[data-theme="dark"] .wallet-balance-btn--desktop,
[data-theme="dark"] .wallet-balance-btn--mobile,
[data-theme="dark"] .report-form__submit,
[data-theme="dark"] .chat-window__send,
[data-theme="dark"] .create-form__submit,
[data-theme="dark"] .search-filter-btn--save,
[data-theme="dark"] .notif-badge,
[data-theme="dark"] .pagination__page--active,
[data-theme="dark"] .mobile-nav__create-btn,
[data-theme="dark"] .mobile-nav__create-btn svg { color: #fff !important; }

/* Pink counters */
[data-theme="dark"] .header__action .notif-badge,
[data-theme="dark"] .mobile-nav__badge { color: #fff !important; }

/* Mobile header — fix var(--white) used as white text color */
[data-theme="dark"] .listing-mobile-back { color: #e8e8ed; }
[data-theme="dark"] .listing-mobile-back svg { color: #e8e8ed; }
[data-theme="dark"] .listing-mobile-action { color: #e8e8ed; }
[data-theme="dark"] .listing-mobile-action svg { color: #e8e8ed; }
[data-theme="dark"] .header__back-btn { color: #e8e8ed; }
[data-theme="dark"] .header--scrolled .listing-mobile-back { color: var(--text-primary); }
[data-theme="dark"] .header--scrolled .listing-mobile-action { color: var(--text-primary); }

/* Header actions — fix white icons */
[data-theme="dark"] .header__action svg { color: #e8e8ed; }
[data-theme="dark"] .header--scrolled .header__action svg { color: var(--text-primary); }
[data-theme="dark"] .header__fav-search svg { color: #e8e8ed; }
[data-theme="dark"] .header--scrolled .header__fav-search svg { color: var(--text-primary); }

/* Search box on header (not scrolled) */
[data-theme="dark"] .search-box__input { color: #e8e8ed; }
[data-theme="dark"] .search-box__location { color: rgba(232,232,237,0.7); }
[data-theme="dark"] .search-box__btn { color: #fff; }

/* Mobile search */
[data-theme="dark"] .header.search-active .search-box { background: var(--white); }
[data-theme="dark"] .header.search-active .search-box__input { color: var(--text-primary); }

/* Pagination */
[data-theme="dark"] .pagination__page { color: var(--text-primary); background: var(--white); border-color: var(--border); }
[data-theme="dark"] .pagination__btn { color: var(--text-primary); background: var(--white); border-color: var(--border); }
[data-theme="dark"] .pagination__page--active { background: var(--accent); color: #fff !important; border-color: var(--accent); }

/* Mobile bottom nav */
[data-theme="dark"] .mobile-nav__create-btn { color: #fff !important; }

/* Fix all elements using var(--white) as text color */
[data-theme="dark"] .search-box__icon { color: rgba(232,232,237,0.5); }
[data-theme="dark"] .mobile-location-btn { color: #e8e8ed; }
[data-theme="dark"] .mobile-location-btn__icon { color: var(--accent); }

/* All .btn elements with inline colored bg */
[data-theme="dark"] .btn { color: var(--text-primary); }
[data-theme="dark"] .btn--primary { color: #fff !important; }

/* Fav button */
[data-theme="dark"] .listing-card__fav { background: rgba(0,0,0,0.5); color: var(--text-primary); }
[data-theme="dark"] .auto-card .listing-card__fav { background: rgba(0,0,0,0.5); color: #fff; }

/* Slider arrows */
[data-theme="dark"] .scroll-section__arrow { background: var(--white); color: var(--text-primary); border: 1px solid var(--border); }
[data-theme="dark"] .hero-slider__arrow { background: rgba(0,0,0,0.6); color: #fff; }

/* Header hover effects */
[data-theme="dark"] .header__action:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .header__action { color: var(--text-primary); }
[data-theme="dark"] .header--scrolled .header__action { color: var(--text-primary); }
[data-theme="dark"] .header--scrolled .header__action:hover { color: var(--accent); }
[data-theme="dark"] .mobile-nav__item { color: var(--text-muted); }
[data-theme="dark"] .mobile-nav__item--active { color: var(--accent); }
[data-theme="dark"] .top-bar__link { color: var(--text-muted); }
[data-theme="dark"] .top-bar__link:hover { color: var(--text-primary); }

/* Notification badge */
[data-theme="dark"] .notif-badge { background: var(--pink); color: #fff; }

/* Profile dropdown */
[data-theme="dark"] .profile-dropdown__item:hover { background: #22222e; }
[data-theme="dark"] .profile-dropdown__balance { background: #22222e; }

/* Mobile menu */
[data-theme="dark"] .mobile-menu__card { background: var(--white); }
[data-theme="dark"] .mobile-menu__row:hover { background: #22222e; }
[data-theme="dark"] .mobile-menu__section-label { color: var(--text-muted); }

/* Cards */
[data-theme="dark"] .auto-card { background: var(--white); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
[data-theme="dark"] .auto-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

/* Listing page */
[data-theme="dark"] .listing-page__main-photo-wrap { background: #12121a; }
[data-theme="dark"] .listing-page__thumb { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .listing-page__thumb--active { border-color: var(--accent); }

/* Chat */
[data-theme="dark"] .chat-window__input-area { background: var(--white); box-shadow: 0 -2px 8px rgba(0,0,0,0.3); }
[data-theme="dark"] .chat-msg__bubble { background: var(--white); }
[data-theme="dark"] .chat-msg--own .chat-msg__bubble { background: var(--accent); color: #fff; }

/* Wallet */
[data-theme="dark"] .wallet-card { background: var(--white); }

/* ===========================
   UTILITY CLASSES
   =========================== */
/* SVG category icon stroke colors */
.svg-stroke-blue { fill: none; stroke: #2858FF; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }
.svg-stroke-pink { fill: none; stroke: #FF5C7C; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }
.svg-stroke-gray { fill: none; stroke: #6B7280; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }

/* Green referral badge in mobile menu */
.badge-ref { font-size: 11px; font-weight: 600; color: var(--green); background: rgba(34,197,94,0.1); padding: 2px 8px; border-radius: 4px; }

/* Collapsible container */
.collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }

/* Hidden utility */
.u-hidden { display: none; }
.u-mt-10 { margin-top: 10px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-ml-auto { margin-left: auto; }
.u-w-full { width: 100%; }
.u-cursor { cursor: pointer; }
.u-flex-center { display: flex; align-items: center; }
.u-flex-center-gap8 { display: flex; align-items: center; gap: 8px; }
.u-text-muted { color: var(--text-muted); }
.u-text-green { color: var(--green); }
.u-no-resize { resize: none; }
.u-justify-center { justify-content: center; }
.u-btn-reset { box-shadow: none; padding: 0; background: transparent; margin: 0; border: none; }
.modal__chips.modal__chips--plain { box-shadow: none; padding: 0; background: transparent; margin: 0; border: none; }
.u-section-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.u-section-title-lg { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.u-sub-text { font-size: 12px; color: var(--text-muted); }
.u-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.svg-stroke-muted { fill: none; stroke: #9CA3AF; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }
.u-cover { width: 100%; height: 100%; object-fit: cover; }
.u-transition-arrow { transition: transform 0.2s; }

/* Language selector in top bar */
.lang-select,
.theme-select {
  position: relative;
}

.lang-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: inherit;
  transition: color 0.15s;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  line-height: 1;
}

.lang-select__trigger:hover {
  color: var(--accent);
}

.lang-select__trigger img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
}

.lang-select__trigger span {
  line-height: 13px;
}

.lang-select__trigger svg {
  width: 10px;
  height: 10px;
  transition: transform 0.2s;
}

.lang-select__trigger.open svg:last-child {
  transform: rotate(180deg);
}

.lang-select__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  min-width: 180px;
  background: #1a1a2e;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 1000;
  overflow: visible;
  padding: 4px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}

.lang-select__dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  animation: rubberPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lang-select__arrow {
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: #1a1a2e;
  transform: rotate(45deg);
  border-radius: 2px;
}

.lang-select__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background 0.1s;
}

.lang-select__item:hover {
  background: rgba(255,255,255,0.08);
}

.lang-select__item img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

.lang-select__item span {
  line-height: 14px;
}

.lang-select__item svg {
  margin-left: auto;
  color: var(--accent);
  display: none;
  flex-shrink: 0;
}

.lang-select__item--active svg {
  display: block;
}

.lang-select__item--active {
  color: #fff;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.15s;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

ul { list-style: none; }
img { max-width: 100%; display: block; }

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

/* ===========================
   BUTTONS
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  height: 42px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent);
  color: var(--white);
  border: 1px solid var(--accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.header .btn--primary {
  background: var(--white);
  color: var(--accent);
  transition: background 0.3s, color 0.3s;
}

.header .btn--primary:hover {
  background: rgba(255,255,255,0.9);
}

.header--scrolled .btn--primary {
  background: var(--accent);
  color: var(--white);
}

.header--scrolled .btn--primary:hover {
  background: var(--accent-hover);
}

.btn--white {
  background: var(--white);
  color: var(--text-primary);
}
.btn--white:hover {
  background: rgba(255,255,255,0.9);
}

.btn--outline {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===========================
   TOP BAR
   =========================== */
.top-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-muted);
}

.top-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--topbar-h);
}

.top-bar__links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 13px;
  transition: color 0.15s;
}

.top-bar__link:hover {
  color: var(--accent);
}

.top-bar__link svg {
  flex-shrink: 0;
}

.top-bar__sep {
  width: 1px;
  height: 12px;
  background: var(--border);
}

/* ===========================
   HEADER
   =========================== */
.header {
  background: var(--accent);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: none;
  transition: background 0.3s, box-shadow 0.3s;
}

.header.header--scrolled {
  background: var(--white);
  border-bottom: none;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo img {
  height: 32px;
  width: auto;
}

.header__logo img.header__logo-white {
  display: block;
}

.header__logo img.header__logo-color {
  display: none;
}

.header--scrolled .header__logo img.header__logo-white {
  display: none;
}

.header--scrolled .header__logo img.header__logo-color {
  display: block;
}

/* Search */
.header__search {
  flex: 1;
  max-width: 820px;
}

.search-box {
  display: flex;
  align-items: center;
  height: 42px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s;
}

.header--scrolled .search-box {
  background: var(--bg);
  border-color: var(--border);
}

.search-box:focus-within {
  box-shadow: none;
}

.header.search-active .search-box:focus-within {
  box-shadow: none;
}

.search-box__icon {
  margin-left: 12px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
  transition: color 0.3s;
}

.header--scrolled .search-box__icon {
  color: var(--text-muted);
}

.search-box__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 7px;
  height: 100%;
  font-size: 16px;
  outline: none;
  font-family: var(--font);
  min-width: 0;
  color: var(--white);
  transition: color 0.3s;
}

.header--scrolled .search-box__input {
  color: var(--text-primary);
}

.search-box__input::placeholder {
  color: rgba(255,255,255,0.5);
  transition: color 0.3s;
}

.header--scrolled .search-box__input::placeholder {
  color: var(--text-muted);
}

.search-box__location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 100%;
  border-left: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  line-height: 14px;
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
  cursor: pointer;
}

.header--scrolled .search-box__location {
  border-left-color: var(--border);
  color: var(--text-secondary);
}

.search-box__location:hover {
  color: var(--white);
}

.header--scrolled .search-box__location:hover {
  color: var(--accent);
}

.search-box__btn {
  background: rgba(255,255,255,0.2);
  color: var(--white);
  padding: 0;
  width: 80px;
  height: 100%;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
  white-space: nowrap;
  text-align: center;
}

.search-box__btn:hover {
  background: rgba(255,255,255,0.3);
}

.header--scrolled .search-box__btn {
  background: var(--accent);
}

.header--scrolled .search-box__btn:hover {
  background: var(--accent-hover);
}

/* Header actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header__action-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  min-width: 80px;
  width: 80px;
  border-radius: var(--radius);
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  transition: all 0.3s;
  position: relative;
}

.header--scrolled .header__action-link {
  color: var(--text-secondary);
}

.header__action-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}

.header--scrolled .header__action-link:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.header__icon-wrap {
  position: relative;
  display: flex;
}

.header__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--pink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 4px;
}

/* Notification dropdown */
.header__notif-wrap {
  position: relative;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 50%;
  width: 360px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateX(50%) scaleY(0.95);
  transform-origin: top center;
  transition: opacity 0.15s ease, visibility 0.15s, transform 0.15s ease;
  pointer-events: none;
}

.notif-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) scaleY(1);
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notif-dropdown__arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: none;
  transform: rotate(45deg);
  z-index: 1;
}

.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: none;
}

.notif-dropdown__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.notif-dropdown__mark-all {
  font-size: 12px;
  color: var(--accent);
}

.notif-dropdown__mark-all:hover {
  text-decoration: underline;
}

.notif-dropdown__section-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px 6px;
}

.notif-dropdown__list {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 12px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.notif-dropdown__list::-webkit-scrollbar {
  display: none;
}

.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-light);
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: var(--bg);
}

.notif-item--unread {
  background: transparent;
}

.notif-item__text {
  transition: font-weight 0.4s ease;
}

.notif-item--unread .notif-item__text::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.notif-item--unread .notif-item__text {
  font-weight: 600;
}

.notif-item--unread:hover {
  background: var(--bg);
}

.notif-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-item__icon--price {
  background: var(--green-light);
  color: var(--green);
}

.notif-item__icon--msg {
  background: var(--accent-light);
  color: var(--accent);
}

.notif-item__icon--fav {
  background: #FFF1F3;
  color: var(--pink);
}

.notif-item__icon--system {
  background: var(--bg);
  color: var(--text-muted);
}

.notif-item__icon--bell {
  background: var(--accent-light);
  color: var(--accent);
}

.notif-item__body {
  flex: 1;
  min-width: 0;
}

.notif-item__text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 2px;
}

.notif-item__text strong {
  font-weight: 600;
}

.notif-item__time {
  font-size: 11px;
  color: var(--text-muted);
}

.notif-dropdown { padding-bottom: 10px; }

.notif-dropdown__footer {
  display: block;
  text-align: center;
  padding: 10px 14px;
  margin: 10px 12px 12px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-top: none;
  transition: color 0.15s;
}

.notif-dropdown__footer:hover {
  color: var(--accent-hover, #4338ca);
}

/* Profile dropdown */
.header__profile-wrap {
  position: relative;
}

.profile-dropdown {
  width: 280px;
  background: var(--bg) !important;
  border: none !important;
}

.profile-dropdown .notif-dropdown__arrow {
  background: var(--bg);
  border: none;
}

.profile-dropdown__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  margin: 12px 12px 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-bottom: none;
}

.profile-dropdown__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.profile-dropdown__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-dropdown__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.profile-dropdown__email {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dropdown__balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin: 10px 12px 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-bottom: none;
}

.profile-dropdown__balance-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.profile-dropdown__balance-label {
  font-size: 11px;
  color: var(--text-muted);
}

.profile-dropdown__balance-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 16px;
}

.profile-dropdown__balance-btn {
  padding: 6px 14px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}

.profile-dropdown__balance-btn:hover {
  background: var(--accent-hover);
}

.profile-dropdown__menu {
  padding: 0;
  margin: 10px 12px 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

.profile-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.15s;
  line-height: 16px;
  border-bottom: 1px solid var(--border-light);
}

.profile-dropdown__item:last-child {
  border-bottom: none;
}

.profile-dropdown__item:hover {
  background: var(--bg);
}

.profile-dropdown__item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.profile-dropdown__footer {
  border-top: none;
  padding: 0;
  margin: 10px 12px 12px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

.profile-dropdown__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: #ef4444;
  transition: background 0.15s;
  line-height: 16px;
}

.profile-dropdown__logout:hover {
  background: #FEF2F2;
}

.profile-dropdown__logout svg {
  flex-shrink: 0;
}

.header__post-btn {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.header__login-btn {
  margin-left: 4px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
}

.header__login-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}

.header--scrolled .header__login-btn {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-primary);
}

.header--scrolled .header__login-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Mobile header row (search + filter + cart) */
.header__mobile-row {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.header__mobile-row .search-box--mobile {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.25);
}

.header--scrolled .header__mobile-row .search-box--mobile {
  background: var(--bg);
  border-color: var(--border);
}

.header__mobile-row .search-box__icon {
  color: var(--text-muted);
}

.header__mobile-row .search-box__input {
  color: var(--text-primary);
}

.header__mobile-row .search-box__input::placeholder {
  color: var(--text-muted);
}

.header__mobile-row .mobile-filter-btn {
  border-left-color: var(--border-light);
  color: var(--text-muted);
}

.header__mobile-cart {
  position: relative;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  transition: all 0.3s;
}

.header--scrolled .header__mobile-cart {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-primary);
}

.header__mobile-cart svg {
  width: 20px;
  height: 20px;
}

.header__mobile-cart:active {
  border-color: var(--accent);
}

.header__cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--pink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 4px;
}

.search-box--mobile {
  border-radius: 12px;
}

.mobile-filter-btn {
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--border-light);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s;
}

.mobile-filter-btn:active {
  color: var(--accent);
}

/* Search cancel button (mobile) */
.search-cancel-btn {
  display: none;
  font-size: 14px;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 4px;
  font-weight: 500;
}

/* ===========================
   SEARCH OVERLAY & DROPDOWN
   =========================== */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}

.search-overlay.active {
  display: block;
}

.search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  z-index: 100;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.search-dropdown::-webkit-scrollbar {
  display: none;
}

.search-dropdown.active {
  display: block;
}

/* Chips row */
.search-dropdown__chips {
  display: none;
  gap: 8px;
  padding: 12px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-light);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.search-dropdown__chips::-webkit-scrollbar {
  display: none;
}

.search-dropdown__chips.active {
  display: flex;
}

.search-dropdown__chip {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}

.search-dropdown__chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Section title */
.search-dropdown__section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 20px 0px;
}

/* Category list in dropdown */
.search-dropdown__cat-grid {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Saved searches */
.search-dropdown__saved-list {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 4px;
}

.search-dropdown__saved-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-light);
}

.search-dropdown__saved-item:last-child {
  border-bottom: none;
}

.search-dropdown__saved-item:hover {
  background: var(--bg);
}

.search-dropdown__saved-item svg {
  color: var(--accent);
  flex-shrink: 0;
}

.search-dropdown__cat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  transition: background 0.15s;
}

.search-dropdown__cat-item:hover {
  background: var(--bg);
}

.search-dropdown__cat-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.search-dropdown__cat-icon svg {
  width: 100%;
  height: 100%;
}

.search-dropdown__cat-name {
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
}

.search-dropdown__cat-item::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--text-muted);
  border-right: 1.5px solid var(--text-muted);
  transform: translateY(-50%) rotate(45deg);
}

/* Dividers between sections */
.search-dropdown__categories {
  border-top: 1px solid var(--border-light);
}

.search-dropdown__cat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--border-light);
}

.search-dropdown__cat-item {
  position: relative;
}

.search-dropdown__query-list li:not(:last-child) a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--border-light);
}

.search-dropdown__query-list li a {
  position: relative;
}

/* Empty state */
.search-dropdown__empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
}

.search-dropdown__empty.active {
  display: flex;
}

.search-dropdown__empty svg {
  color: var(--border);
}

.search-dropdown__empty span {
  font-size: 15px;
}

/* Cities list in dropdown */
.search-dropdown__cities {
  display: none;
}

.search-dropdown__cities.active {
  display: block;
}

.search-dropdown__city-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: background 0.15s;
  position: relative;
}

.search-dropdown__city-item:hover {
  background: var(--bg);
}

.search-dropdown__city-item::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--text-muted);
  border-right: 1.5px solid var(--text-muted);
  transform: translateY(-50%) rotate(45deg);
}

.search-dropdown__city-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--border-light);
}

.search-dropdown__city-item--all {
  font-weight: 500;
  border-bottom: 1px solid var(--border-light);
}

.search-dropdown__city-item--all svg {
  color: var(--accent);
}

.search-dropdown__city-item--selected::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

.search-dropdown__city-list {
  padding-bottom: 8px;
}

/* Category match (when typing) */
.search-dropdown__cat-match {
  display: none;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
  gap: 12px;
}

.search-dropdown__cat-match.active {
  display: flex;
}

.search-dropdown__cat-match-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.search-dropdown__cat-match-icon svg {
  width: 100%;
  height: 100%;
}

.search-dropdown__cat-match-info {
  flex: 1;
}

.search-dropdown__cat-match-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.search-dropdown__cat-match-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* Query list */
.search-dropdown__query-list {
  list-style: none;
  padding: 0 0 8px;
}

.search-dropdown__query-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.15s;
  position: relative;
}

#locationCities li a {
  justify-content: space-between;
}

.search-dropdown__query-list li a:hover {
  background: var(--bg);
}

/* Search suggestions with categories */
.search-suggestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.search-suggestion__main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1;
}

.search-suggestion__main svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.search-suggestion__cats {
  font-size: 12px;
  color: var(--accent);
  padding-left: 26px;
  line-height: 1;
}

.search-dropdown__query-list li a > svg:last-child {
  flex-shrink: 0;
  color: var(--text-muted);
}

.search-dropdown__query-list li a svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Desktop: search focus state */
.header.search-active::before,
.header.location-active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 0;
  pointer-events: none;
}

.header.search-active .header__search,
.header.location-active .header__search {
  position: relative;
  z-index: 1;
}

.header.search-active .search-box,
.header.location-active .search-box {
  background: var(--white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-color: transparent;
}

.header.search-active:not(.location-mode) .search-box__location,
.header.search-active:not(.location-mode) .mobile-location-btn {
  display: none;
}

.header.search-active .header__back-btn {
  display: none !important;
}

.header.search-active .search-box__input,
.header.location-active .search-box__input {
  color: var(--text-primary);
}

.header.search-active .search-box__input::placeholder,
.header.location-active .search-box__input::placeholder {
  color: var(--text-muted);
}

.header.search-active .search-box__icon,
.header.location-active .search-box__icon {
  color: var(--text-muted);
}

.header.search-active .search-box__location,
.header.location-active .search-box__location {
  border-left-color: var(--border);
  color: var(--text-secondary);
}

.header.search-active .search-box__btn,
.header.location-active .search-box__btn {
  background: var(--accent);
  color: var(--white);
}

.header.search-active .search-dropdown {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border-top: 1px solid var(--border-light);
}

.header.location-mode .search-box {
  border-bottom: 1px solid var(--border-light);
}

.search-box__location svg:last-child {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.header.location-mode .search-box__location svg:last-child {
  transform: rotate(180deg);
}

/* ===========================
   LOCATION PICKER
   =========================== */
.location-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}

.location-overlay.active {
  display: block;
}

.location-dropdown {
  display: none;
  position: fixed;
  background: var(--white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 100;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--border-light);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.location-dropdown::-webkit-scrollbar {
  display: none;
}

.location-dropdown.active {
  display: block;
}

.location-dropdown__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 1;
}

.location-dropdown__search svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.location-dropdown__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-primary);
  font-family: var(--font);
}

.location-dropdown__input::placeholder {
  color: var(--text-muted);
}

.location-dropdown__section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 16px 6px;
}

.location-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: background 0.15s;
  position: relative;
}

.location-dropdown__item:hover {
  background: var(--bg);
}

.location-dropdown__item--all {
  font-weight: 500;
  border-bottom: 1px solid var(--border-light);
}

.location-dropdown__item--all svg {
  color: var(--accent);
}

.location-dropdown__item--selected::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

.location-dropdown__list {
  padding-bottom: 8px;
}

/* Mobile location button */
.mobile-location-btn {
  max-width: 84px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
  border-left: 1px solid var(--border);
  padding: 0 8px;
  overflow: hidden;
}

.mobile-location-btn:active {
  color: var(--accent);
}

.mobile-location-btn__icon {
  flex-shrink: 0;
  color: var(--accent);
}

.mobile-location-btn__text {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  flex: 1;
  min-width: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.mobile-location-btn__text span {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  color: var(--text-secondary);
  padding-right: 12px;
  vertical-align: middle;
}

.mobile-location-btn__text--overflow {
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.mobile-location-btn__text--overflow span {
  animation: locationSlide 4s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes locationSlide {
  0%, 15% { transform: translateX(0); }
  45%, 55% { transform: translateX(var(--slide-offset)); }
  85%, 100% { transform: translateX(0); }
}

/* ===========================
   SEARCH PAGE
   =========================== */
.search-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: var(--container);
  margin: 0 auto;
}
.search-filters::-webkit-scrollbar { display: none; }

.search-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 14px;
  color: var(--text-secondary);
  background: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.search-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.search-filter-btn--main {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  font-weight: 500;
}
.search-filter-btn--main:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--white);
}
.search-filter-btn__count {
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

.search-filter-chip {
  text-decoration: none;
  gap: 6px;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
.search-filter-chip:hover {
  background: var(--accent-light);
}
.search-filter-chip svg {
  opacity: 0.6;
  transition: opacity 0.15s;
}
.search-filter-chip:hover svg {
  opacity: 1;
}
.search-filter-btn__remove {
  display: flex;
  align-items: center;
  margin-left: -2px;
  color: var(--text-muted);
  transition: color 0.15s;
  line-height: 1;
}

.search-filter-btn__remove svg {
  display: block;
}

.search-filter-btn svg {
  flex-shrink: 0;
  display: block;
}
.search-filter-btn__remove:hover {
  color: var(--text-primary);
}
.search-filter-btn--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.search-filter-btn--active .search-filter-btn__remove {
  color: var(--accent);
}

.search-filter-btn--save {
  margin-left: auto;
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
}

.search-filter-btn--save:hover {
  background: #e8506e;
  border-color: #e8506e;
  color: var(--white);
}

@media (max-width: 767px) {
  .search-filter-btn--save {
    display: none;
  }
}

/* Subcategory chips */
.subcategories-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.subcategory-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}
.subcategory-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.subcategory-chip--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Draft preview in modal */


.draft-preview { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--bg-secondary); border-radius: var(--radius); }
.draft-preview__photo { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.draft-preview__info { min-width: 0; }
.draft-preview__title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-preview__price { color: var(--accent-green); font-weight: 600; margin-top: 2px; }
.draft-preview__cat { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.subcategory-chip--more {
  background: none;
  border: 1px dashed var(--border);
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
}

.search-results__title {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
}
.search-results__title strong {
  color: var(--text-primary);
  font-weight: 600;
}

.page-search .section__header {
  flex-wrap: nowrap;
}

@media (max-width: 767px) {
  .search-results__title {
    font-size: 13px;
  }
}

/* Search page: back button */
.header__back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--white);
  border-radius: 50%;
  transition: background 0.15s;
  margin-left: -6px;
  margin-right: -2px;
}
.header__back-btn:active {
  background: rgba(255,255,255,0.15);
}
.header--scrolled .header__back-btn {
  color: var(--text-primary);
}
.header--scrolled .header__back-btn:active {
  background: var(--border-light);
}

/* Search page: fav-search button */
.header__fav-search {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  color: var(--text-muted);
  border-radius: 50%;
  transition: color 0.15s;
}
.header__fav-search:active {
  color: var(--pink);
}

/* Category suggest link */
.categories-suggest {
  text-align: center;
  padding: 8px 0 0;
}

.categories-suggest__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.15s;
}

.categories-suggest__link:hover {
  color: var(--accent);
}

/* ===========================
   SCROLL SECTIONS (Обрані, Недавно переглянуті)
   =========================== */
.scroll-section__track {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}

.scroll-section__track::-webkit-scrollbar {
  display: none;
}

.listing-card--scroll {
  flex: 0 0 calc((100% - 48px) / 4);
  scroll-snap-align: start;
}

.scroll-section__arrows {
  display: flex;
  gap: 4px;
}

.scroll-section__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.scroll-section__arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.scroll-section__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 767px) {
  .scroll-section__arrows {
    display: none;
  }
  .listing-card--scroll {
    flex: 0 0 calc(44vw - 16px);
  }
  .scroll-section__track {
    gap: 2px;
  }
}

/* ===========================
   CATEGORIES NAV
   =========================== */
/* Old categories-nav removed */

/* ===========================
   CATEGORIES ALT (icon-top)
   =========================== */
.categories-alt {
  background: var(--bg);
  padding: 20px 0;
  overflow: hidden;
}

.categories-alt__list {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.categories-alt__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 14px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  flex: 0 0 auto;
  transition: box-shadow 0.15s, color 0.15s;
}

.categories-alt__item:hover {
  box-shadow: var(--shadow-md);
  color: var(--accent);
}

.categories-alt__item:active {
  opacity: 0.7;
}

.categories-alt__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.categories-alt__icon svg {
  width: 100%;
  height: 100%;
}

.categories-alt__item span {
  white-space: nowrap;
}

.categories-alt__item--all {
  flex: 0 0 auto;
  min-width: auto;
}

.categories-alt__item--hidden {
  display: none;
}

.categories-alt__item--all span {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ===========================
   MAIN
   =========================== */
.main {
  padding: 0 0 16px;
}

/* ===========================
   HERO SLIDER
   =========================== */
.hero-slider {
  position: relative;
  margin-bottom: 14px;
  overflow: hidden;
}

.hero-slider__track {
  display: flex;
  gap: 16px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hero-slide {
  min-width: calc(50% - 8px);
  flex-shrink: 0;
}

.hero-slide__card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.hero-slide__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slider arrows */
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  z-index: 10;
  transition: all 0.15s;
}

.hero-slider__arrow:hover {
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: translateY(-50%) scale(1.05);
}

.hero-slider__arrow--prev { left: 12px; }
.hero-slider__arrow--next { right: 12px; }

/* Slider dots */
.hero-slider__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.hero-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.2s;
}

.hero-slider__dot--active {
  background: var(--white);
  width: 24px;
  border-radius: 4px;
}

/* ===========================
   SECTIONS
   =========================== */
.section {
  margin-bottom: 10px;
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.section__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Section controls */
.section__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.dropdown__trigger svg {
  color: var(--text-muted);
}

.dropdown__trigger:hover {
  box-shadow: var(--shadow-md);
}

.dropdown__trigger svg:last-child {
  transition: transform 0.2s;
}

.dropdown--open .dropdown__trigger {
  box-shadow: var(--shadow-md);
}

.dropdown--open .dropdown__trigger svg:last-child {
  transform: rotate(180deg);
}

.dropdown__menu {
  position: absolute;
  right: 0;
  min-width: 160px;
  background: var(--white);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 50;
  padding: 4px;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.dropdown__menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--white);
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
}

.dropdown--open .dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown--up .dropdown__menu {
  bottom: 100%;
  top: auto;
  margin-bottom: 4px;
}
.dropdown--up .dropdown__menu::before {
  top: auto;
  bottom: -6px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.04);
}

.dropdown--down .dropdown__menu {
  top: 100%;
  bottom: auto;
  margin-top: 10px;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  white-space: nowrap;
}

.dropdown__item:hover {
  background: var(--border-light);
}

.dropdown__item--active {
  color: var(--accent);
  font-weight: 500;
}

.dropdown__view-icon {
  flex-shrink: 0;
}

.dropdown__item--mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .dropdown__item--mobile-only { display: flex; }
  .dropdown__item--desktop-only { display: none; }
}

/* Gallery view */
.listings-grid--gallery {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.listings-grid--gallery .listing-card {
  display: block;
  overflow: hidden;
}

.listings-grid--gallery .listing-card__img {
  height: 0;
  padding-bottom: 75%;
  position: relative;
  overflow: hidden;
}

.listings-grid--gallery .listing-card {
  position: relative;
}

.listings-grid--gallery .listing-card__badge--vip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  pointer-events: none;
}

.listings-grid--gallery .listing-card__gallery {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  will-change: transform;
}

.listings-grid--gallery .listing-card__gallery-slide {
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  background: var(--border-light);
  overflow: hidden;
}

.listings-grid--gallery .listing-card__gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listings-grid--gallery .listing-card__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-card__gallery-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}

.listing-card__gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s;
}

.listing-card__gallery-dot--active {
  background: var(--white);
}

/* Empty state */
.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 12px;
}
.search-empty__icon { color: var(--border); }
.search-empty__title { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.search-empty__text { font-size: 14px; color: var(--text-muted); max-width: 360px; line-height: 1.5; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
  padding: 16px 0;
}

.pagination__btn,
.pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.pagination__btn:hover:not(:disabled),
.pagination__page:hover:not(.pagination__page--active) {
  background: var(--border-light);
  border-color: var(--text-muted);
}

.pagination__page--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.pagination__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination__dots {
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 14px;
}

/* List view */
.listings-grid--list {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.listings-grid--list .listing-card {
  display: flex;
  flex-direction: row;
  overflow: visible;
}

.listings-grid--list .listing-card__img {
  width: 180px;
  min-width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  margin: 6px 0 6px 6px;
}

.listings-grid--list .listing-card__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  padding: 14px 16px;
  gap: 0;
}

.listings-grid--list .listing-card__title {
  grid-column: 1;
  grid-row: 1;
  font-size: 15px;
  -webkit-line-clamp: 1;
  align-self: start;
  margin-bottom: 2px;
}

.listings-grid--list .listing-card__badge--used,
.listings-grid--list .listing-card__badge--new {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  margin-top: 0;
  margin-bottom: 0;
}

.listings-grid--list .listing-card__price {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  font-size: 18px;
  text-align: right;
  margin-bottom: 0;
  white-space: nowrap;
  padding-left: 16px;
}

.listings-grid--list .listing-card__meta {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
}

.listings-grid--list .listing-card__fav {
  position: static;
  grid-column: 2;
  grid-row: 4;
  align-self: center;
  justify-self: end;
  background: var(--bg);
  width: 36px;
  height: 36px;
}

.section__more {
  text-align: center;
  margin-top: 24px;
}

/* ===========================
   CATEGORIES GRID
   =========================== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.category-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
}

.category-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.category-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.category-card__count {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===========================
   LISTINGS GRID
   =========================== */
.listings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}


/* ===========================
   LISTING CARD
   =========================== */
.listing-card {
  display: block;
  position: relative;
  background: var(--white);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: none;
  transition: all 0.2s;
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .listing-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .listing-card:hover .listing-card__title {
    color: var(--accent);
    text-decoration: underline;
  }
}


.listing-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Media badges (video, 3D) on card */
.listing-card__media-badges {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.listing-card__media-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  background: var(--pink);
  border-radius: 4px;
  color: var(--white);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.listing-card__media-badge svg {
  flex-shrink: 0;
}

.listing-card__media-badge--3d {
  background: rgba(40, 88, 255, 0.8);
}

/* Ad card */
.listing-card--ad {
  position: relative;
}

.listing-card--ad .listing-card__ad-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.listing-card--ad .listing-card__ad-label svg {
  flex-shrink: 0;
}

.listing-card--ad .listing-card__title {
  color: var(--text-primary);
}

.listing-card--ad .listing-card__ad-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ad in list — desc bigger, under title */
.listings-grid--list .listing-card--ad .listing-card__ad-desc {
  font-size: 14px;
  -webkit-line-clamp: 3;
  grid-column: 2;
  grid-row: 2;
}

/* Ad list view overrides handled by existing list grid */
.listings-grid--list .listing-card--ad .listing-card__ad-desc {
  font-size: 14px;
  -webkit-line-clamp: 3;
}

.listings-grid--list .listing-card--ad .listing-card__ad-label {
  margin-top: 0;
}

.listings-grid--list .listing-card--ad .listing-card__fav {
  display: none;
}

.listings-grid--list .listing-card--ad .listing-card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  gap: 4px;
}

.listings-grid--list .listing-card--ad .listing-card__title {
  grid-column: 1 / -1;
  grid-row: 1;
}

.listings-grid--list .listing-card--ad .listing-card__ad-desc {
  grid-column: 1 / -1;
  grid-row: 2;
}

.listings-grid--list .listing-card--ad .listing-card__meta {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
}

.listings-grid--list .listing-card--ad .listing-card__ad-label {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
}

/* Ad in list view */
.listings-grid--list .listing-card--ad .listing-card__ad-label {
  grid-column: 2;
  grid-row: 4;
  justify-self: end;
  align-self: center;
}

/* Ad body order: title, desc, ad-label, meta */
.listing-card--ad {
  display: flex;
  flex-direction: column;
}

.listing-card--ad .listing-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.listing-card--ad .listing-card__title { order: 1; }
.listing-card--ad .listing-card__ad-desc { order: 2; }
.listing-card--ad .listing-card__meta { order: 3; flex: 1; }
.listing-card--ad .listing-card__ad-label { order: 4; margin-top: auto; }

/* Ad in gallery view — label on photo */
.listings-grid--gallery .listing-card--ad .listing-card__ad-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 4px;
  order: 0;
}

/* Initial loading state */
.listing-card--loading .listing-card__body > * {
  visibility: hidden;
}

.listing-card--loading .listing-card__body {
  background: linear-gradient(180deg,
    transparent 11px, #f0f0f0 11px, #f0f0f0 25px,
    transparent 25px, transparent 33px,
    #f0f0f0 33px, #f0f0f0 49px, transparent 49px);
}

.listing-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listing-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.listing-card__badge--vip {
  background: var(--green);
  color: var(--white);
}

.listing-card__badge--used,
.listing-card__badge--new {
  position: static;
  display: inline-block;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  order: 2;
  align-self: flex-start;
}

.listing-card__badge--used {
  background: var(--border-light);
  color: var(--text-secondary);
}

.listing-card__badge--new {
  background: var(--green-light);
  color: var(--green-dark);
}

.listing-card__badge--company,
.listing-card__badge--fop {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  order: 3;
  align-self: flex-start;
}

.listing-card__badge--company {
  background: var(--accent-light);
  color: var(--accent);
}

.listing-card__badge--fop {
  background: #FFF3E0;
  color: #E65100;
}

.listing-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s;
  z-index: 2;
}

.listing-card__fav:hover {
  color: var(--pink);
  background: var(--bg);
}

.listing-card__fav.active {
  color: var(--pink);
}

.listing-card__fav.active svg {
  fill: var(--pink);
}

.listing-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.listing-card__title { order: 1; }
/* badge--used/new has order: 2 */
.listing-card__price { order: 3; }
.listing-card__meta { order: 4; }

.listing-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}

.listing-card__price {
  font-size: 17px;
  font-weight: 700;
  color: var(--green, #22c55e);
}

.listing-card__price span {
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}

.listing-card__price--green {
  color: var(--green-dark);
}

.listing-card__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text-muted);
}

.listing-card__meta span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.listing-card__meta span:first-child {
  color: var(--text-secondary);
}

.listing-card__meta-sep {
  color: var(--border);
}

/* ===========================
   SKELETON PRELOADER
   =========================== */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.listing-card--skeleton {
  pointer-events: none;
}

.listing-card--skeleton .listing-card__img {
  background: none;
  aspect-ratio: 4 / 3;
}

.listing-card--skeleton .skeleton-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.listings-grid--gallery .listing-card--skeleton .listing-card__img {
  aspect-ratio: auto;
  height: 0;
  padding-bottom: 75%;
  position: relative;
}

.listings-grid--gallery .listing-card--skeleton .skeleton-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.skeleton-line {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.listing-card--skeleton .skeleton-line {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.listing-card--skeleton .skeleton-line--title {
  width: 85%;
}

.listing-card--skeleton .skeleton-line--price {
  width: 45%;
  height: 18px;
}

.listing-card--skeleton .skeleton-line--meta {
  width: 65%;
  height: 12px;
  margin-bottom: 0;
}

/* ===========================
   SAVE SEARCH (bookmark page)
   =========================== */
.search-filter-btn--save.active {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
}

.search-filter-btn--save.active svg {
  fill: var(--white);
  stroke: var(--white);
}

.header__mobile-cart--saved {
  color: var(--accent);
}

.header__mobile-cart--saved svg {
  fill: var(--accent);
  stroke: var(--accent);
}

.save-bounce {
  animation: saveBounce 0.6s ease;
}

@keyframes saveBounce {
  0% { transform: scale(1); }
  20% { transform: scale(1.12); }
  40% { transform: scale(0.96); }
  60% { transform: scale(1.04); }
  80% { transform: scale(0.99); }
  100% { transform: scale(1); }
}

/* ===========================
   CATEGORY TREE DROPDOWN (shared)
   =========================== */
.ml-cat-menu { min-width: 260px !important; max-height: 320px; overflow-y: auto; padding: 4px !important; }
.ml-cat-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 10px; border: none; background: none; font-size: 13px; color: var(--text-primary); cursor: pointer; border-radius: var(--radius-sm); font-family: inherit; line-height: 1; transition: background 0.1s; }
.ml-cat-item:hover { background: var(--bg); }
.ml-cat-item--active { color: var(--accent); font-weight: 500; }
.ml-cat-count { font-size: 11px; color: var(--text-muted); background: var(--border-light); border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center; font-weight: 500; }
.ml-cat-item--active .ml-cat-count { background: rgba(40, 88, 255, 0.1); color: var(--accent); }
.ml-cat-sub { padding-left: 16px; }
.ml-cat-parent { font-weight: 600; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; padding: 8px 10px 4px; cursor: default; }
.ml-cat-parent:first-child { padding-top: 4px; }

/* ===========================
   FILTER DROPDOWN (shared)
   =========================== */
.ml-filter-menu { padding: 10px 12px !important; min-width: 220px !important; right: auto; left: 0; max-width: calc(100vw - 24px); box-sizing: border-box; }
.ml-filter-dates { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.ml-filter-label { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: block; }
.ml-filter-row { display: flex; align-items: center; gap: 6px; }
.ml-filter-date { flex: 1 1 0; min-width: 0; width: 0; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 8px; font-size: 12px; font-family: inherit; color: var(--text-primary); background: var(--white); box-sizing: border-box; }
.ml-filter-sep { color: var(--text-muted); font-size: 12px; }

/* ===========================
   RUBBER ANIMATIONS
   =========================== */

/* Dropdown menus — rubber pop */
.dropdown--open .dropdown__menu {
  animation: rubberPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rubberPop {
  0% { opacity: 0; transform: translateY(-6px) scale(0.96); }
  50% { transform: translateY(2px) scale(1.01); }
  70% { transform: translateY(-1px) scale(0.998); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* Mobile search — rubber stretch */
@media (max-width: 767px) {
  .header.search-active .search-box--mobile {
    animation: rubberStretch 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }
}

@keyframes rubberStretch {
  0% { transform: scaleX(0.85); opacity: 0.7; }
  40% { transform: scaleX(1.02); }
  60% { transform: scaleX(0.99); }
  80% { transform: scaleX(1.005); }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Fav button — confetti burst */
.listing-card__fav.active {
  color: var(--pink);
}

.listing-card__fav.active svg {
  fill: var(--pink);
  animation: favPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes favPop {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.25); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Confetti particles */
.listing-card__fav-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
}

.listing-card__fav-confetti span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: confettiBurst 0.7s ease-out forwards;
}

.listing-card__fav-confetti span:nth-child(1) { background: var(--pink); animation-delay: 0s; --cx: -14px; --cy: -18px; }
.listing-card__fav-confetti span:nth-child(2) { background: var(--accent); animation-delay: 0.03s; --cx: 16px; --cy: -14px; }
.listing-card__fav-confetti span:nth-child(3) { background: #FBBF24; animation-delay: 0.06s; --cx: -18px; --cy: 8px; }
.listing-card__fav-confetti span:nth-child(4) { background: var(--green); animation-delay: 0.02s; --cx: 12px; --cy: 16px; }
.listing-card__fav-confetti span:nth-child(5) { background: var(--pink); animation-delay: 0.05s; --cx: -8px; --cy: -20px; }
.listing-card__fav-confetti span:nth-child(6) { background: var(--accent); animation-delay: 0.04s; --cx: 20px; --cy: 4px; }
.listing-card__fav-confetti span:nth-child(7) { background: #FBBF24; width: 4px; height: 4px; animation-delay: 0.07s; --cx: -20px; --cy: -6px; }
.listing-card__fav-confetti span:nth-child(8) { background: var(--green); width: 4px; height: 4px; animation-delay: 0.01s; --cx: 6px; --cy: -22px; }

@keyframes confettiBurst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--cx), var(--cy)) scale(0); opacity: 0; }
}

/* ===========================
   MODAL SYSTEM
   =========================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 400;
}

.modal-overlay.active {
  display: block;
}

.modal {
  position: fixed;
  z-index: 401;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.modal.active {
  pointer-events: auto;
}

/* Desktop: right panel */
@media (min-width: 768px) {
  .modal {
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    transform: translateX(100%);
    border-radius: 0;
    box-shadow: none;
  }
  .modal.active {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  }
}

/* Mobile: bottom sheet */
@media (max-width: 767px) {
  .modal {
    bottom: 0;
    left: 0;
    right: 0;
    height: 92vh;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
  }
  .modal.active {
    transform: translateY(0);
  }
}

/* Modal header */
.modal__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  position: relative;
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  transition: background 0.15s;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 0;
  position: relative;
  z-index: 1;
}

.modal__close svg {
  width: 14px;
  height: 14px;
}

.modal__close:hover {
  background: #d6e0ff;
}

.modal__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  transition: background 0.15s;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.modal__back svg {
  width: 16px;
  height: 16px;
}

.modal__back:hover {
  background: #d6e0ff;
}

.modal__title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 16px;
}

@media (min-width: 768px) {
  .modal__title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
  }
}

.modal__reset {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background 0.15s;
  position: relative;
  z-index: 1;
  margin-left: auto;
}

.modal__reset:hover {
  background: var(--accent-light);
}

/* Modal body */
.modal__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
  background: var(--bg);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal__body::-webkit-scrollbar {
  display: none;
}

/* Modal footer */
.modal__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--accent-light);
}

.modal__footer-count {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.modal__footer-count strong {
  color: var(--text-primary);
}

.modal__footer-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
}

.modal__footer-btn:hover {
  background: var(--accent-hover);
}

/* Modal form elements */
.modal__group {
  margin-bottom: 0;
}

.modal__group:last-child {
  margin-bottom: 0;
}

.modal__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.modal__select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 14px;
  color: var(--text-primary);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s;
}

.modal__select-btn:hover {
  border-color: var(--accent);
}

.modal__select-btn svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.modal__select-btn--placeholder {
  color: var(--text-muted);
}

.modal__input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-primary);
  font-family: var(--font);
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.modal__input:focus {
  outline: none;
  border-color: var(--accent);
}

.modal__row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.modal__row .modal__input {
  flex: 1;
  min-width: 0;
}

.modal__row-sep {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Tab init — hide tab chips until JS adds .ready (only for tab navigation, not filter chips) */
.modal__chips.tabs-init:not(.ready) .modal__chip { opacity: 0; }
.modal__chips.tabs-init.ready .modal__chip { opacity: 1; transition: opacity 0.15s; }

/* Modal chips */
.modal__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .modal__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-right: -16px;
    padding-right: 16px;
  }
  .modal__chips::-webkit-scrollbar { display: none; }
  .modal__chip {
    flex-shrink: 0;
  }
}

.modal__chip {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}

.modal__chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modal__chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.modal__chip--active:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--white);
}

/* Modal list (for category/city selection) */
.modal__list {
  list-style: none;
}

.modal__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: color 0.15s;
}

.modal__list-item:last-child {
  border-bottom: none;
}

.modal__list-item:hover {
  color: var(--accent);
}

.modal__list-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.modal__section-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0px 0 4px;
}

.modal__list-item--selected {
  color: var(--accent);
  font-weight: 500;
}

.modal__list-item--selected svg {
  color: var(--accent);
}

/* Location back item in city list */
.search-dropdown__back-item a {
  color: var(--accent) !important;
  font-weight: 500;
  justify-content: flex-start !important;
}

.search-dropdown__back-item a svg {
  color: var(--accent);
}

.modal__list-item--has-children {
  cursor: pointer;
}

.modal__list-item--has-children > svg {
  color: var(--text-muted);
  transition: transform 0.15s;
}

.modal__list-item--has-children:hover > svg {
  transform: translateX(2px);
}

/* Modal search */
.modal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.modal__search svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.modal__search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
}

.modal__search-input::placeholder {
  color: var(--text-muted);
}

/* Dynamic filters by category */
.modal__dynamic-filters {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.modal__dynamic-group {
  display: flex;
  flex-direction: column;
}

/* Modal center variant (auth) */
@media (min-width: 768px) {
  .modal--center {
    top: 50%;
    left: 50%;
    right: auto;
    width: 420px;
    height: auto;
    max-height: 90vh;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    pointer-events: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,0.15);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .modal--center.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
}

/* Auth toggle tabs */
.auth-tabs {
  display: flex;
  background: var(--accent-light);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 6px;
}

.auth-tab {
  flex: 1;
  padding: 9px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius);
  transition: all 0.2s;
  cursor: pointer;
  font-family: var(--font);
}

.auth-tab--active {
  background: var(--white);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Auth form */
.auth-form {
  display: none;
  flex-direction: column;
  gap: 7px;
}

.auth-form.active {
  display: flex;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.auth-field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 7px;
}

.auth-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-field__input {
  width: 100%;
  padding: 10px 14px 10px 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 16px;
  color: var(--text-primary);
  font-family: var(--font);
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.auth-field__icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-field__icon::after {
  content: '';
  width: 1px;
  height: 18px;
  background: var(--border);
}

.auth-field__icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Phone field with country code */
.auth-field__phone-wrap {
  display: flex;
  gap: 0;
  position: relative;
}

.auth-field__country-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--bg);
  font-size: 14px;
  line-height: 1;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition: border-color 0.15s;
  flex-shrink: 0;
  overflow: hidden;
}

.auth-field__country-code img {
  border-radius: 2px;
  flex-shrink: 0;
}

.auth-field__country-code svg {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  max-width: 12px;
  max-height: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.auth-field__phone-wrap .auth-field__input {
  padding-left: 14px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.auth-field__phone-wrap .auth-field__input.phone-active {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.auth-field__sep {
  width: 1px;
  background: var(--border);
  margin: 8px 0;
  flex-shrink: 0;
}

.auth-field__input:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-field__input--error {
  border-color: #ef4444;
}

.auth-field__input--error:focus {
  border-color: #ef4444;
}

.auth-field__error {
  font-size: 12px;
  color: #ef4444;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.auth-field__error.visible {
  max-height: 20px;
  opacity: 1;
}

.auth-field__toggle-pw {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.auth-field__toggle-pw:hover {
  color: var(--text-primary);
}

/* Auth submit */
.auth-submit {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.auth-submit:hover {
  background: var(--accent-hover);
}

/* Auth divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-divider span {
  font-size: 12px;
  color: var(--text-muted);
}

/* Auth social */
.auth-socials {
  display: flex;
  gap: 10px;
}

.auth-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  font-family: var(--font);
  transition: opacity 0.15s;
}

.auth-social:hover {
  opacity: 0.9;
}

.auth-social--google {
  background: #4285F4;
}

.auth-social--telegram {
  background: #0088cc;
}

.auth-social svg {
  flex-shrink: 0;
}

.auth-social svg {
  flex-shrink: 0;
}

/* Auth footer link */
.auth-forgot {
  text-align: right;
  font-size: 13px;
  color: var(--accent);
  margin-top: -6px;
}

.auth-forgot-icon {
  text-align: center;
  margin: 10px 0 16px;
}

.auth-forgot-text {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 20px;
}

.auth-forgot-success {
  text-align: center;
}

.auth-forgot:hover {
  text-decoration: underline;
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--border-light);
  color: var(--text-muted);
  z-index: 5;
  transition: background 0.15s, color 0.15s;
}

.auth-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

/* Auth welcome */
.auth-welcome {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 16px;
}

.auth-welcome__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.auth-welcome__sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle__slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 22px; transition: background 0.2s; }
.toggle__slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: var(--white); border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.toggle input:checked + .toggle__slider { background: var(--accent); }
.toggle input:checked + .toggle__slider::before { transform: translateX(18px); }

/* Auth remember me */
.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
}

.auth-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  position: relative;
  transition: all 0.15s;
  flex-shrink: 0;
}

.auth-remember input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.auth-remember input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 8px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}

.auth-remember label {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Auth legal */
.auth-legal {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

.auth-legal a {
  color: var(--accent);
}

.auth-legal a:hover {
  text-decoration: underline;
}

/* Auth benefits */
.auth-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.auth-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.auth-benefit__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
}

.auth-benefit__icon svg {
  width: 14px;
  height: 14px;
}

.auth-benefit__text {
  font-size: 11px;
  color: var(--text-muted);
}

/* Modal page transitions */
.modal__page {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal__page.active {
  display: flex;
}

/* ===========================
   FOOTER
   =========================== */
.footer {
  background: var(--white);
  border-top: 1px solid var(--border-light);
  padding: 48px 0 24px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.footer__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.footer__heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.footer__list li {
  margin-bottom: 10px;
}

.footer__list a {
  font-size: 14px;
  color: var(--text-secondary);
}

.footer__list a:hover {
  color: var(--accent);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
  color: var(--text-muted);
}

.footer__bottom-links {
  display: flex;
  gap: 20px;
}

.footer__bottom-links a {
  color: var(--text-muted);
}

.footer__bottom-links a:hover {
  color: var(--accent);
}

/* ===========================
   MOBILE NAV (bottom)
   =========================== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--border-light);
  z-index: 200;
  padding: 6px 0;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

.mobile-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--text-muted);
  transition: color 0.15s;
}

.mobile-nav__item--active {
  color: var(--accent);
}

.mobile-nav__add-btn {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin-top: -18px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

/* ===========================
   MOBILE MENU
   =========================== */
.mobile-menu-overlay {
  display: none;
}

.mobile-menu-overlay.active {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 300;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  z-index: 301;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 1;
}

.mobile-menu__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  transition: background 0.15s;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.mobile-menu__back svg {
  width: 16px;
  height: 16px;
}

.mobile-menu__back:hover {
  background: #d6e0ff;
}

.mobile-menu__reset {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background 0.15s, opacity 0.4s;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.mobile-menu__reset:hover {
  background: var(--accent-light);
}

.mobile-menu__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 16px;
  pointer-events: none;
}

.mobile-menu__body {
  padding: 0px 12px 100px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu__section-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 4px 12px;
}

.mobile-menu__card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mobile-menu__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  color: var(--text-primary);
  transition: background 0.15s;
}

.mobile-menu__row-value {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted);
}
.mobile-menu__row--option {
  cursor: pointer;
}
.mobile-menu__row--option .mobile-menu__check {
  margin-left: auto;
  display: none;
  flex-shrink: 0;
}
.mobile-menu__row--option.mobile-menu__row--active .mobile-menu__check {
  display: block;
}
.mobile-menu__row--option.mobile-menu__row--active span {
  color: var(--accent);
  font-weight: 500;
}
.mobile-menu__theme-options .mobile-menu__row {
  padding: 10px 10px;
  font-size: 14px;
  background: var(--white);
}
.mobile-menu__theme-options .mobile-menu__row:first-child {
  border-top: none;
}
.mobile-menu__theme-options .mobile-menu__row svg:first-child {
  color: var(--accent);
}
.mobile-menu__theme-options .mobile-menu__row[data-mtheme="dark"] svg:first-child {
  color: #6366f1;
}
.mobile-menu__theme-options .mobile-menu__row[data-mtheme="auto"] svg:first-child {
  color: #f59e0b;
}
.mobile-menu__row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.mobile-menu__row:active {
  background: var(--bg);
}

.mobile-menu__row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mobile-menu__row-text {
  flex: 1;
  font-size: 15px;
}

.mobile-menu__row-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  background: var(--accent);
  border-radius: 10px;
  padding: 2px 8px;
  min-width: 20px;
  text-align: center;
}

.mobile-menu__row-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Profile block in mobile menu */
.mobile-menu__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  margin-top: 12px;
  margin-bottom: 12px;
  border-radius: var(--radius);
}

.mobile-menu__profile-edit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  margin-left: auto;
  transition: background 0.15s, color 0.15s;
}

.mobile-menu__profile-edit:active {
  background: var(--border);
  color: var(--text-primary);
}

.mobile-menu__profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  overflow: hidden;
}

.mobile-menu__profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-menu__profile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mobile-menu__profile-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-menu__profile-email {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Balance block */
.mobile-menu__balance {
  margin-bottom: 4px;
}

.mobile-menu__balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}

.mobile-menu__balance-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-menu__balance-label {
  font-size: 12px;
  color: var(--text-muted);
}

.mobile-menu__balance-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.mobile-menu__balance-btn {
  padding: 8px 16px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}

.mobile-menu__balance-btn:hover {
  background: var(--accent-hover);
}

.mobile-menu__copyright {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 20px 0 0;
}

/* ===========================
   FILTER MODAL (mobile)
   =========================== */
.filter-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 400;
}

.filter-modal-overlay.active {
  display: block;
}

.filter-modal {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: var(--white);
  z-index: 401;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
  transition: bottom 0.3s ease;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.filter-modal.active {
  bottom: 0;
}

.filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.filter-modal__header h3 {
  font-size: 18px;
  font-weight: 600;
}

.filter-modal__close {
  color: var(--text-secondary);
}

.filter-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.filter-modal__group {
  margin-bottom: 20px;
}

.filter-modal__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-modal__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 14px;
  background: var(--white);
  color: var(--text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.filter-modal__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-modal__input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
}

.filter-modal__input:focus {
  border-color: var(--accent);
}

.filter-modal__footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
}

.filter-modal__reset {
  flex: 1;
}

.filter-modal__apply {
  flex: 2;
}

/* ===========================
   RESPONSIVE — LARGE TABLET / SMALL DESKTOP (< 1024px)
   =========================== */
@media (max-width: 1024px) {
  .top-bar { display: none; }
  .header__inner { gap: 12px; }
  .header__actions { gap: 2px; }
  .header__action-link span:not(.header__badge) { display: none; }
  .header__action-link { padding: 8px; min-width: auto; }
  .header__post-btn span { display: none; }

  .listings-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }

  .listing-card--scroll {
    flex: 0 0 calc((100% - 24px) / 3);
  }
  .scroll-section__track {
    gap: 2px;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .hero-slide__card { height: 180px; }
}

/* ===========================
   RESPONSIVE — TABLET (< 768px)
   =========================== */
@media (max-width: 767px) {
  :root { --header-h: 56px; }
  .top-bar { display: none; }

  /* Header: mobile layout */
  .header__logo { display: none; }
  .header__search { display: none; }
  .header__actions { display: none; }
  .header__mobile-row { display: flex; }
  .header__inner { gap: 10px; }

  /* Search page mobile */
  .header__back-btn { display: flex; }
  .header__fav-search { display: flex; }
  .page-search .mobile-location-btn { display: none; }

  /* Search: mobile fullscreen overlay */
  .header.search-active {
    background: var(--white) !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    box-shadow: none;
    border-bottom: 1px solid var(--border-light);
  }

  .header.search-active .header__mobile-cart {
    display: none;
  }

  .header.location-mode .mobile-location-btn {
    display: none;
  }

  .header.location-mode + .search-overlay + .search-dropdown {
    border-top: 1px solid var(--border-light);
  }

  .header.search-active .search-cancel-btn {
    display: block;
  }

  .header.search-active::before,
  .header.location-active::before {
    display: none;
  }

  .header.search-active .search-box--mobile {
    background: var(--white);
    border-color: var(--border);
  }

  .header.search-active + .search-overlay + .search-dropdown {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 201;
    background: var(--white);
  }

  .header.search-active .search-box--mobile {
    border-radius: 12px;
  }

  .search-box--mobile .search-box__input {
    font-size: 14px;
  }

  .search-box--mobile .search-box__icon {
    width: 16px;
    height: 16px;
  }

  .mobile-location-btn__icon {
    width: 16px;
    height: 16px;
  }

  .mobile-location-btn__text span {
    font-size: 12px;
  }

  /* Location picker mobile — fullscreen */
  .location-dropdown.active {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    border-radius: 0;
    z-index: 201;
  }

  .search-dropdown__cat-item {
    padding: 10px 16px;
  }

  .search-dropdown__section-title {
    padding: 8px 16px 0px;
  }

  .search-dropdown__query-list li a {
    padding: 10px 16px;
  }

  .search-dropdown__chips {
    padding: 10px 16px;
  }

  /* Categories alt: single row scroll on mobile */
  .categories-alt {
    padding: 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .categories-alt::-webkit-scrollbar { display: none; }
  .categories-alt__list {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: visible;
    padding: 0 16px;
    max-width: none;
  }
  .categories-alt__item {
    max-width: none;
    min-width: 80px;
    width: auto;
    flex: 0 0 auto;
    padding: 10px 10px 8px;
    font-size: 11px;
    gap: 6px;
  }
  .categories-alt__item span {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    max-width: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .categories-alt__item:last-child {
    margin-right: 16px;
  }
  .categories-alt__icon {
    width: 32px;
    height: 32px;
  }

  /* Main */
  .main { padding: 0 0 calc(var(--mobile-nav-h) + 0px); }
  .container { padding: 0 16px; }

  /* Slider */
  .hero-slider { margin-bottom: 14px; }
  .section { margin-bottom: 10px; }
  .hero-slider__track { gap: 0; }
  .hero-slide {
    min-width: calc(100vw - 32px);
    width: calc(100vw - 32px);
  }
  .hero-slide__card {
    height: 140px;
    border-radius: var(--radius-md);
  }
  .hero-slider__arrow { display: none; }
  .hero-slider__dots { display: flex; bottom: 8px; }

  /* Sections */
  .section__title { font-size: 18px; }
  .section__header { margin-bottom: 12px; }
  .section__controls { flex-wrap: wrap; }
  .dropdown__trigger { font-size: 14px; padding: 5px 10px; }
  .dropdown__trigger span { display: none; }

  /* Gallery mobile */
  .listings-grid--gallery .listing-card__img { padding-bottom: 80%; }
  .listings-grid--gallery .listing-card--skeleton .listing-card__img { padding-bottom: 80%; }
  .pagination { gap: 2px; }
  .pagination__btn, .pagination__page { min-width: 32px; height: 32px; font-size: 14px; }

  /* Listings: 2 columns */
  .listings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
  .listing-card--scroll {
    flex: 0 0 calc(44vw - 16px);
  }
  .listing-card__body { padding: 10px; }
  .listing-card__title { font-size: 14px; }
  .listing-card__price { font-size: 16px; }
  .listing-card__meta {
    font-size: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .listing-card__meta .listing-card__meta-sep { display: none; }

  /* List view mobile */
  .listings-grid--list .listing-card__img {
    width: 140px;
    min-width: 140px;
  }
  .listings-grid--list .listing-card__body {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto 1fr;
    padding: 10px 12px;
    min-width: 0;
    overflow: hidden;
  }
  .listings-grid--list .listing-card__title {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 14px;
  }
  .listings-grid--list .listing-card__badge--used,
  .listings-grid--list .listing-card__badge--new {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .listings-grid--list .listing-card__price {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 15px;
    text-align: left;
    padding-left: 0;
    margin-top: 4px;
  }
  .listings-grid--list .listing-card__meta .listing-card__meta-sep { display: inline; }
  .listings-grid--gallery .listing-card__meta .listing-card__meta-sep { display: inline; }
  .listings-grid--gallery .listing-card__meta {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .listings-grid--list .listing-card__meta {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 14px;
  }
  .listings-grid--list .listing-card__meta span { white-space: nowrap; }
  .listings-grid--list .listing-card__fav {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    justify-self: end;
    width: 30px;
    height: 30px;
  }
  .listings-grid--list .listing-card__fav svg { width: 16px; height: 16px; }


  /* Mobile nav */
  .mobile-nav {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }

  /* Footer */
  .footer { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ===========================
   RESPONSIVE — SMALL TABLET (< 600px)
   =========================== */
@media (max-width: 599px) {
  .hero-slide__card { height: 120px; }

  .categories-alt__item { min-width: 68px; }

  .listing-card__title { font-size: 14px; }
  .listing-card__price { font-size: 15px; }

  .listings-grid--list .listing-card__img {
    width: 110px;
    min-width: 110px;
  }
  .listings-grid--list .listing-card__title { font-size: 14px; }
  .listings-grid--list .listing-card__price { font-size: 14px; }
  .listings-grid--list .listing-card__meta { font-size: 14px; }
  .listings-grid--list .listing-card__fav { width: 28px; height: 28px; }
}

/* ===========================
   RESPONSIVE — SMALL MOBILE (< 380px)
   =========================== */
@media (max-width: 379px) {
  .hero-slide__card { height: 110px; }

  .categories-alt__item { min-width: 64px; padding: 8px 4px 6px; }
  .categories-alt__icon { width: 28px; height: 28px; }

  .listing-card__body { padding: 8px; }
  .listing-card__title { font-size: 14px; }
  .listing-card__price { font-size: 14px; margin-bottom: 4px; }
  .listing-card__meta { font-size: 14px; }

  .section__title { font-size: 16px; }
}

/* ===========================
   RESPONSIVE — TINY MOBILE (< 320px)
   =========================== */
@media (max-width: 319px) {
  .container { padding: 0 10px; }
  .hero-slide {
    min-width: calc(100vw - 20px);
    width: calc(100vw - 20px);
  }
  .hero-slide__card { height: 100px; }

  .header__mobile-row { gap: 6px; }
  .header__mobile-cart { width: 38px; height: 38px; }
  .header__mobile-row .search-box--mobile { height: 38px; }

  .categories-alt__item { min-width: 60px; padding: 6px 3px 5px; }
  .categories-alt__icon { width: 26px; height: 26px; }
}

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.listing-card {
  animation: fadeInUp 0.3s ease forwards;
}

.listing-card:nth-child(1) { animation-delay: 0s; }
.listing-card:nth-child(2) { animation-delay: 0.04s; }
.listing-card:nth-child(3) { animation-delay: 0.08s; }
.listing-card:nth-child(4) { animation-delay: 0.12s; }
.listing-card:nth-child(5) { animation-delay: 0.16s; }
.listing-card:nth-child(6) { animation-delay: 0.20s; }
.listing-card:nth-child(7) { animation-delay: 0.24s; }
.listing-card:nth-child(8) { animation-delay: 0.28s; }

/* ========================================
   Card-style dropdowns & modals (all screens)
   ======================================== */

/* ---- Search Dropdown ---- */
.search-dropdown {
  background: var(--bg) !important;
  padding: 0 12px !important;
}

.search-dropdown .search-dropdown__section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 4px 10px;
  background: transparent !important;
  margin: 0;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.search-dropdown__categories {
  background: transparent !important;
  margin: 0;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}

.search-dropdown__cat-grid {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  padding: 0 !important;
}

.search-dropdown__cat-item {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border-light);
}

.search-dropdown__cat-item:last-child {
  border-bottom: none;
}

.search-dropdown__cat-item:not(:last-child)::after {
  display: none !important;
}

.search-dropdown__queries {
  background: transparent !important;
  margin: 0;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}

.search-dropdown__query-list {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  padding: 0 !important;
  margin-bottom: 12px;
}

.search-dropdown__query-list li a {
  padding: 10px 14px !important;
}

.search-dropdown__query-list li:not(:last-child) a::after {
  display: none !important;
}

.search-dropdown__query-list li:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.search-dropdown__cities {
  background: transparent !important;
  margin: 0;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}

.search-dropdown__cities .search-dropdown__query-list {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  padding: 0 !important;
  margin-bottom: 12px;
}

.search-dropdown__cities .search-dropdown__query-list li a {
  padding: 10px 14px !important;
}

.search-dropdown__chips {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0 !important;
  margin: 0;
  border-bottom: none;
}

.search-dropdown__cat-match {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 12px 14px;
  margin: 0 0 4px;
}

.search-dropdown__empty {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 0;
}


.modal--center .modal__body {
  background: var(--white);
  padding: 5px 15px 30px !important;
}

.modal--confirm .modal__body { text-align: center; background: var(--bg) !important; }
.modal--confirm .modal__header { background: var(--white); }
.modal--confirm__icon { margin-bottom: 16px; }
.modal--confirm__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.modal--confirm__text { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }
.modal--confirm__btns { display: flex; gap: 10px; }
.modal--confirm__btns .btn { flex: 1; justify-content: center; }
.modal--confirm__btns .btn--danger { background: var(--pink); border-color: var(--pink); }


#templatesModal .modal__suggest-item {
  margin-top: 10px;
}

.chat-template-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-template-edit,
.chat-template-del {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
}

.chat-template-edit:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.chat-template-del:hover {
  color: var(--pink);
  background: rgba(239,68,68,0.08);
}

.modal__search {
  margin: 10px 0 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.modal__section-label {
  padding: 10px 4px 10px !important;
  background: transparent;
  margin: 0;
}

.modal__list {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0;
}

.modal__list .modal__list-item {
  padding: 12px 14px;
}

.modal__group {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

.modal__group .modal__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 4px 10px;
  margin-bottom: 0;
}

.modal__group .modal__select-btn {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-color: transparent;
}

.modal__group .modal__chips {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.modal__chips--subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.modal__chips--subcats a.modal__chip {
  text-decoration: none;
  font-size: 12px;
  padding: 5px 10px;
}

.modal__group .modal__row {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.modal__chips {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 10px 14px;
  margin-bottom: 0;
}

.search-dropdown__back-item,
.modal__back-item {
  margin-top: 10px;
  margin-bottom: 10px;
}

.search-dropdown__back-item a,
.modal__back-item a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
}

.search-dropdown__back-item a svg,
.modal__back-item a svg {
  color: var(--accent);
}

/* Suggest category button */
.modal__suggest-item {
  margin-top: 10px;
  margin-bottom: 10px;
}
.modal__suggest-block {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
  line-height: 1;
  width: 100%;
}
.modal__suggest-block:hover { color: var(--accent); }
.modal__suggest-block svg { flex-shrink: 0; }
.modal__suggest-block span { line-height: 14px; font-size: 13px; }

.modal__back-item + .modal__suggest-item,
.search-dropdown__back-item + .modal__suggest-item {
  margin-top: 0;
  padding-top: 0;
}

.modal__suggest-item a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.15s;
}

.modal__suggest-item a:hover {
  color: var(--accent);
}

.modal__suggest-item a svg {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s;
}

.modal__suggest-item a:hover svg {
  color: var(--accent);
}

@media (max-width: 767px) {
  .modal__suggest-item {
    margin-top: auto;
  }

  .modal__back-item + .modal__suggest-item,
  .search-dropdown__back-item + .modal__suggest-item {
    padding-top: 0;
  }
}

.modal__footer {
  background: var(--white);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

/* Listing action bar (mobile) */
.listing-action-bar {
  display: none;
}

@media (max-width: 767px) {
  .listing-action-bar {
    display: flex;
    gap: 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--white);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    z-index: 200;
  }

  .listing-action-bar__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    transition: background 0.15s;
  }

  .listing-action-bar__btn--primary {
    background: var(--accent);
    color: var(--white);
  }

  .listing-action-bar__btn--primary:hover {
    background: var(--accent-hover);
  }

  .listing-action-bar__btn--outline {
    background: var(--bg);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
  }

  .listing-action-bar__btn--outline:hover {
    background: var(--border-light);
  }

  /* Hide seller buttons on mobile (action bar replaces them) */
  .listing-page__seller-btn,
  .listing-page__subscribe-btn {
    display: none;
  }

}

/* Mobile-only adjustments */
@media (max-width: 767px) {
  .header.search-active .search-box--mobile {
    margin: 0 0 4px;
  }
}

/* ========================================
   BREADCRUMB
   ======================================== */
.breadcrumb {
  padding: 12px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.page-create .breadcrumb {
  padding-bottom: 0;
}

.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--text-muted);
  transition: color 0.15s;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.breadcrumb span {
  color: var(--text-primary);
}

/* ========================================
   LISTING PAGE
   ======================================== */
.listing-page {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  margin-bottom: 24px;
}

.listing-page__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.listing-page__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
  align-self: start;
}

.listing-page__info-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.listing-page__seller-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.listing-page__seller-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-light);
  color: var(--accent);
  vertical-align: middle;
  margin-left: 4px;
}

/* Seller level badge inline */
.seller-level-svg {
  flex-shrink: 0;
}

.seller-level-svg--starter { stroke: #9ca3af; }
.seller-level-svg--silver { stroke: #8a8a8a; }
.seller-level-svg--gold { stroke: #d97706; }
.seller-level-svg--platinum { stroke: #6366f1; }
.seller-level-svg--diamond { stroke: #3b82f6; }

.seller-level-badge {
  font-weight: 600 !important;
}

.seller-level-badge--starter { color: #9ca3af !important; }
.seller-level-badge--silver { color: #6b7280 !important; }
.seller-level-badge--gold { color: #b45309 !important; }
.seller-level-badge--platinum { color: #6366f1 !important; }
.seller-level-badge--diamond { color: #2563eb !important; }

/* Seller level block (unused, kept for reference) */
.seller-level {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.seller-level__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.seller-level__badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.seller-level__badge--starter {
  background: #f3f4f6;
  color: #9ca3af;
}

.seller-level__badge--silver {
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  color: #6b7280;
}

.seller-level__badge--gold {
  background: linear-gradient(135deg, #fef3c7, #fcd34d);
  color: #b45309;
}

.seller-level__badge--platinum {
  background: linear-gradient(135deg, #e0e7ff, #a5b4fc);
  color: #4338ca;
}

.seller-level__badge--diamond {
  background: linear-gradient(135deg, #dbeafe, #60a5fa);
  color: #1d4ed8;
}

.seller-level__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.seller-level__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.seller-level__desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1;
}

.seller-level__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seller-level__bar {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}

.seller-level__fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #a5b4fc, #6366f1);
  transition: width 0.5s ease;
}

.seller-level__next {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1;
}

.listing-page__seller-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 14px -14px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.listing-page__seller-stat {
  display: contents;
}

.listing-page__seller-stat-label,
.listing-page__seller-stat-value {
  padding: 8px 14px;
  font-size: 13px;
  line-height: 16px;
}

.listing-page__seller-stat-label {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 20px;
}

.listing-page__seller-stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.listing-page__seller-stat:nth-child(2) .listing-page__seller-stat-label svg { color: #f59e0b; }
.listing-page__seller-stat:nth-child(3) .listing-page__seller-stat-label svg { color: #6366f1; }
.listing-page__seller-stat:nth-child(4) .listing-page__seller-stat-label svg { color: #10b981; }

.listing-page__seller-stat-label svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


.listing-page__card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.listing-page__desc-block {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px;
}

.listing-page__desc-divider {
  height: 1px;
  background: var(--border-light);
  margin: 12px -14px;
}

.listing-page__subsection-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.listing-page__desc-block .listing-page__specs {
  margin: 0 -14px;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.listing-page__desc-block .listing-page__specs + .listing-page__desc-divider {
  margin-top: 5px;
}

.listing-page__desc-block .listing-page__footer-info {
  margin: 0;
  padding: 0;
}

.listing-page__location-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.listing-page__mobile-bar {
  display: none;
}

.listing-page__price-old {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: line-through;
  align-self: flex-end;
  padding-bottom: 4px;
}

.listing-page__published-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.listing-page__published {
  font-size: 12px;
  color: var(--text-muted);
}

.listing-page__fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s;
}

.listing-page__fav-btn:hover {
  color: var(--pink);
  background: rgba(236, 72, 153, 0.08);
}

.listing-page__seller-btn.btn--outline {
  background: var(--bg);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.listing-page__seller-btn.btn--outline:hover {
  background: var(--border-light);
}

.gallery-modal__action-btn.btn--outline {
  background: var(--bg);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.gallery-modal__action-btn.btn--outline:hover {
  background: var(--border-light);
}

.listing-page__seller-info {
  flex: 1;
  min-width: 0;
}

.listing-page__seller-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Seller follow button */
.listing-page__seller-follow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--white);
  background: var(--accent);
  transition: all 0.15s;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  line-height: 1;
}

.listing-page__seller-follow svg {
  flex-shrink: 0;
}

.listing-page__seller-follow span {
  line-height: 1;
}

.listing-page__seller-follow:hover {
  background: var(--accent-hover);
}

.listing-page__seller-follow.active {
  background: var(--accent-light);
  color: var(--accent);
}

.listing-page__seller-follow.active:hover {
  background: var(--border-light);
}

/* All listings button */
.listing-page__all-listings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.listing-page__all-listings-count {
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1;
}

.listing-page__fav-btn.active {
  color: var(--pink);
}

.listing-page__fav-btn.active svg {
  fill: var(--pink);
}

.listing-mobile-action.active {
  color: var(--pink);
}

.listing-mobile-action.active svg {
  fill: var(--pink);
}

.gallery-modal__header .listing-mobile-action.active {
  color: var(--pink);
}

/* Share toast */
/* Report form */
.report-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}

.report-form__reason {
  background: var(--white);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-top: 10px;
}

.report-form__reason-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.report-form__reason-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.report-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-form__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.report-form__req {
  color: var(--pink);
  margin-left: 2px;
}

.report-form__hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.report-form__textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s;
  background: var(--white);
}

.report-form__textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.report-form__counter {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.report-form__block-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-primary);
}

.report-form__block-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.15s;
}

.report-form__block-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.report-form__block-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.report-form__block-check label {
  cursor: pointer;
}

.report-form__legal {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.report-form__submit {
  width: 100%;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.report-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toast notifications */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  color: var(--white);
  padding: 12px 32px;
  cursor: pointer;
  border-radius: var(--radius-md);
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: var(--text-primary);
}

.toast.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast--success { background: #16a34a; }
.toast--info { background: var(--accent); }
.toast--warning { background: #f59e0b; }
.toast--error { background: var(--pink); }

.toast svg { flex-shrink: 0; }

@media (max-width: 767px) {
  .toast {
    max-width: none;
    min-width: 80vw;
  }
}

.listing-page__info-divider {
  height: 1px;
  background: var(--border-light);
  margin: 10px -14px;
}

.listing-page__action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 3px 0;
  transition: color 0.15s;
  line-height: 1;
}

.listing-page__action-btn:hover {
  color: var(--accent);
}

.listing-page__action-btn svg {
  flex-shrink: 0;
}

.listing-page__actions {
  display: flex;
  justify-content: space-between;
}

.listing-page__action-btn--report {
  color: var(--pink);
}

.listing-page__action-btn--report:hover {
  color: #be185d;
}

.listing-page__location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.listing-page__location-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 16px;
}

.listing-page__location-info svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.listing-page__map-mini {
  width: 56px;
  height: 56px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.listing-page__map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 180px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
}

.listing-page__seller-btns {
  display: flex;
  gap: 8px;
}

.listing-page__seller-btns .listing-page__seller-btn {
  flex: 1;
}

/* Breadcrumb back button */
.breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breadcrumb__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
  transition: background 0.15s;
}

.breadcrumb__back:hover {
  background: var(--border-light);
}

.breadcrumb__links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Gallery */
.listing-page__gallery {
  min-width: 0;
}

.listing-page__main-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  aspect-ratio: 4/3;
}

.listing-page__main-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.2);
  opacity: 0.7;
  z-index: 0;
}

.listing-page__main-photo.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.listing-page__thumb.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.listing-page__thumb.skeleton img { opacity: 0; }

.listing-page__main-photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s;
  z-index: 1;
}

.listing-page__photo-nav-unused {
  display: none;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  padding: 4px 12px;
}

.listing-page__photo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}

.listing-page__photo-arrow:hover {
  background: rgba(0,0,0,0.6);
}

.listing-page__photo-arrow--prev { left: 12px; }
.listing-page__photo-arrow--next { right: 12px; }

.listing-page__photo-counter {
  position: absolute;
  bottom: 12px;
  left: 12px;
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  background: rgba(0,0,0,0.4);
  padding: 4px 10px;
  border-radius: 12px;
  z-index: 2;
}

.listing-page__photo-fullscreen {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}

.listing-page__photo-fullscreen:hover {
  background: rgba(0,0,0,0.6);
}

/* Thumbs wrapper with arrows */
.listing-page__thumbs-wrap {
  position: relative;
  margin-top: 8px;
}

.listing-page__thumbs-arrow {
  display: none;
}

/* More photos overlay */
.listing-page__thumbs:not(.listing-page__thumbs--ready) .listing-page__thumb:nth-child(n+5) {
  display: none;
}

/* Video thumb */
.listing-page__thumb--video {
  position: relative;
}

.listing-page__thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  pointer-events: none;
}

/* 3D thumb */
.listing-page__thumb--3d {
  position: relative;
}
.listing-page__thumb-3d-badge {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
  letter-spacing: 0.5px;
}

/* Video player in main photo */
.listing-page__video-player {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1;
}

.gallery-modal__thumb--video {
  position: relative;
}

.gallery-modal__thumb--video .listing-page__thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 3px;
  pointer-events: none;
}

.listing-page__video-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.listing-page__video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: var(--white);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.listing-page__video-player:hover .listing-page__video-controls,
.listing-page__video-controls.visible {
  opacity: 1;
}

.listing-page__video-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--white);
  flex-shrink: 0;
}

.listing-page__video-progress {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.listing-page__video-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s;
}

.listing-page__video-time {
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
}

.listing-page__video-fullscreen {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--white);
}

/* Big play button overlay */
.listing-page__video-big-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.listing-page__video-big-play:hover {
  background: rgba(0,0,0,0.7);
}

.listing-page__video-big-play svg {
  margin-left: 3px;
}

.listing-page__thumb--hidden {
  display: none !important;
}


.listing-page__thumb--more {
  position: relative;
  cursor: pointer;
}

.listing-page__thumb--more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* Desktop: hide +N overlay, enable smooth scroll for thumbs */
@media (min-width: 768px) {
  .listing-page__thumb--more::after { display: none !important; }
  .listing-page__thumbs {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .listing-page__thumbs::-webkit-scrollbar { display: none; }
}

/* ===== AUTO CARD (list view) ===== */
.auto-cards-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.auto-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; text-decoration: none; color: inherit; position: relative; }
.auto-card__gallery { width: 220px; min-width: 220px; align-self: stretch; position: relative; overflow: hidden; }
.auto-card__gallery img { position: absolute; top: 0; left: 0; }
.auto-card__gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auto-card__badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 1; }
.auto-card__media-badges { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 4px; z-index: 1; }
.auto-card__body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.auto-card__title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.auto-card__subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.auto-card__price { font-size: 18px; font-weight: 700; color: var(--green, #22c55e); margin-bottom: 6px; }
.auto-card__price span { font-size: 14px; font-weight: 500; }
.auto-card__specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
.auto-card__spec { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.auto-card__spec svg { color: var(--text-muted); flex-shrink: 0; }
.auto-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.auto-card__tag { padding: 3px 8px; border-radius: 4px; font-size: 11px; background: var(--border-light); color: var(--text-secondary); }
.auto-card__tag--drop { background: #fff7ed; color: #ea580c; }
.auto-card__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auto-card__meta { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); margin-top: auto; line-height: 1; }
.auto-card__meta svg { flex-shrink: 0; }
.auto-card__meta-sep { color: var(--border); }
.auto-card__gallery-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 2; }
.auto-card__gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background 0.15s; }
.auto-card__gallery-dot--active { background: #fff; }
.auto-cards-list--grid .auto-card__gallery-dots,
.auto-cards-list .auto-card__gallery-dots { display: none; }
.auto-cards-list--gallery .auto-card__gallery-dots { display: flex; }
.auto-card .listing-card__fav { position: absolute; top: 12px; right: 12px; z-index: 3; }
.auto-card--skeleton .auto-card__gallery { min-height: 120px; }
.skeleton-shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%); background-size: 800px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
@keyframes skeleton-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.auto-card__gallery { position: relative; }
.auto-card__gallery::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  transition: opacity 0.3s;
}
.auto-card__gallery.loaded::after { opacity: 0; pointer-events: none; }

/* Auto card - grid/tile view */
.auto-cards-list--grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.auto-cards-list--grid .auto-card { flex-direction: column; border-radius: 0; box-shadow: none; }
.auto-cards-list--grid .auto-card__gallery { width: 100%; min-width: auto; aspect-ratio: 4/3; align-self: auto; }
.auto-cards-list--grid .auto-card__gallery img { position: static; }
.auto-cards-list--grid .auto-card__body { padding: 12px; }
.auto-cards-list--grid .auto-card__title { font-size: 14px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.auto-cards-list--grid .auto-card__price { font-size: 17px; }
.auto-cards-list--grid .auto-card__subtitle,
.auto-cards-list--grid .auto-card__specs,
.auto-cards-list--grid .auto-card__desc { display: none; }
.auto-cards-list--grid .auto-card__price-old { display: none; }
.auto-cards-list--grid .auto-card__tags {
  flex-wrap: nowrap;
  overflow: hidden;
}
.auto-cards-list--grid .auto-card__tag { flex-shrink: 0; }
.auto-cards-list--grid .auto-card__tag--drop {
  overflow: hidden;
}
@media (max-width: 767px) {
  .auto-cards-list--grid .auto-card__tag--drop { max-width: 80px; }
}
.auto-cards-list--grid .auto-card__tag--drop.has-overflow {
  -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, black 88%, transparent 100%);
}
.auto-cards-list--grid .auto-card__tag--drop span {
  display: inline-block;
  white-space: nowrap;
}
.auto-cards-list--grid .auto-card__tag--drop span.tag-drop-animate {
  animation: tagTextSlide 4s ease-in-out infinite 1s;
}
@keyframes tagTextSlide {
  0%, 15% { transform: translateX(0); }
  45%, 55% { transform: translateX(var(--tag-offset)); }
  85%, 100% { transform: translateX(0); }
}
.auto-cards-list--grid .auto-card .listing-card__fav { top: 8px; right: 8px; }
.auto-cards-list--grid .auto-card__meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; }
.auto-cards-list--grid .auto-card__meta svg { display: inline-block; }
.auto-cards-list--grid .auto-card--ad .listing-card__ad-desc { display: none; }

/* Auto card - gallery view (mobile-like full width) */
.auto-cards-list--gallery { display: flex; flex-direction: column; gap: 10px; }
.auto-cards-list--gallery .auto-card { flex-direction: column; }
.auto-cards-list--gallery .auto-card__gallery { width: 100%; min-width: auto; aspect-ratio: 16/10; align-self: auto; }
.auto-cards-list--gallery .auto-card__gallery img { position: static; }
.auto-cards-list--gallery .auto-card__body { padding: 12px; }
.auto-cards-list--gallery .auto-card__title { font-size: 16px; }
.auto-cards-list--gallery .auto-card__price { font-size: 17px; }

/* Auto card - horizontal scroll variant */
.auto-card--scroll { flex-direction: column; width: calc(25% - 2px); min-width: calc(25% - 2px); flex-shrink: 0; border-radius: 0; box-shadow: none; scroll-snap-align: start; }
.auto-card--scroll .auto-card__gallery { width: 100%; min-width: auto; aspect-ratio: 4/3; align-self: auto; }
.auto-card--scroll .auto-card__gallery img { position: static; }
.auto-card--scroll .auto-card__body { padding: 10px; }
.auto-card--scroll .auto-card__title { font-size: 14px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.auto-card--scroll .auto-card__price { font-size: 16px; }
.auto-card--scroll .auto-card__tags { margin-bottom: 4px; }
.auto-card--scroll .auto-card__meta { font-size: 11px; }
.auto-card--scroll .auto-card__meta svg { display: none; }

@media (max-width: 767px) {
  .auto-cards-list { gap: 10px; }
  .auto-card { flex-direction: column; }
  .auto-card__gallery { width: 100%; min-width: auto; aspect-ratio: 16/10; align-self: auto; }
  .auto-card__gallery img { position: static !important; }
  .auto-card__body { padding: 12px; }
  .auto-card__title { font-size: 16px; }
  .auto-card__price { font-size: 17px; }
  .auto-cards-list--grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .auto-card--scroll { width: calc(44% - 2px); min-width: calc(44% - 2px); }
}

/* ===== GALLERY MODAL ===== */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.gallery-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.gallery-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.95);
}

/* Inner container */
.gallery-modal__inner {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 1100px;
  height: 90vh;
  margin: 5vh auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Header */
.gallery-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: var(--header-h);
  background: var(--accent);
  flex-shrink: 0;
}

.gallery-modal__back {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--white);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 20px 0 16px;
  margin: 0 0 0 -16px;
  align-self: stretch;
}

.gallery-modal__back svg {
  flex-shrink: 0;
}

.gallery-modal__header .listing-mobile-actions {
  display: flex;
  gap: 8px;
}

.gallery-modal__header .listing-mobile-action {
  width: 42px;
  height: 42px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
}

.gallery-modal__header .listing-mobile-action:hover {
  background: var(--accent-light);
}

.gallery-modal__header .listing-mobile-action svg {
  width: 20px;
  height: 20px;
}

.gallery-modal__back:hover { background: rgba(255,255,255,0.15); }



/* Body: desktop = row with thumbs-col | photo | info */
.gallery-modal__body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Vertical thumbs (desktop) */
.gallery-modal__thumbs-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 8px 4px;
  gap: 4px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-light);
}

.gallery-modal__thumbs--vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  scrollbar-width: none;
  flex: 1;
}

.gallery-modal__thumbs--vertical::-webkit-scrollbar { display: none; }

/* Photo area */
.gallery-modal__photo-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
}

.gallery-modal__photo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.gallery-modal__main-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.2);
  opacity: 0.5;
}

.gallery-modal__photo {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 1;
}

.gallery-modal__counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-size: 12px;
  z-index: 3;
  background: rgba(0,0,0,0.5);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.gallery-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.15s;
  cursor: pointer;
}

.gallery-modal__arrow:hover:not(:active) { background: rgba(255,255,255,0.8); color: var(--accent); }
.gallery-modal__arrow--prev { left: 12px; }
.gallery-modal__arrow--next { right: 12px; }

/* Right info panel (desktop) */
.gallery-modal__info {
  width: 300px;
  flex-shrink: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.gallery-modal__info-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.gallery-modal__published {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.gallery-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.gallery-modal__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery-modal__price {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.gallery-modal__price small {
  font-size: 14px;
  font-weight: 500;
}

.gallery-modal__price-old {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.gallery-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.gallery-modal__btn {
  width: 100%;
  justify-content: center;
}

/* Thumbs shared */
.gallery-modal__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s;
  cursor: pointer;
}

.gallery-modal__thumb:hover { opacity: 0.8; }
.gallery-modal__thumb--active { border-color: var(--accent); opacity: 1; }
.gallery-modal__thumb img { width: 100%; height: 100%; object-fit: cover; }

.gallery-modal__thumbs-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.15s;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.gallery-modal__thumbs-arrow:hover { color: var(--text-primary); background: var(--bg); }

/* Horizontal thumbs row (mobile only) */
.gallery-modal__thumbs-row {
  display: none;
}

.gallery-modal__thumbs--horizontal {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 12px;
}

.gallery-modal__thumbs--horizontal::-webkit-scrollbar { display: none; }

@media (max-width: 767px) {
  .gallery-modal__inner {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  .gallery-modal__body {
    flex-direction: column;
  }

  .gallery-modal__thumbs-col { display: none; }

  .gallery-modal__info {
    width: 100%;
    padding: 0;
    gap: 0;
    flex-shrink: 0;
    order: 3;
  }

  .gallery-modal__info-card { display: none; }

  .gallery-modal__actions {
    flex-direction: row;
    width: 100%;
    margin-top: 0;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-light);
    background: var(--white);
    gap: 8px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  }

  .gallery-modal__actions .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius);
    height: auto;
  }

  .gallery-modal__thumbs-row {
    display: block;
    flex-shrink: 0;
    order: 2;
    background: var(--white);
    border-top: 1px solid var(--border-light);
  }

  .gallery-modal__photo-area { order: 1; }

  .gallery-modal__thumb {
    width: 48px;
    height: 48px;
  }

  .gallery-modal__arrow {
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.3);
    color: var(--white);
  }

  .gallery-modal__arrow--prev { left: 8px; }
  .gallery-modal__arrow--next { right: 8px; }
}

.listing-page__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}

.listing-page__thumbs::-webkit-scrollbar {
  display: none;
}

.listing-page__thumb {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.15s;
  cursor: pointer;
}

.listing-page__thumb--active {
  border-color: var(--accent);
}

.listing-page__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info */
.listing-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.listing-page__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.listing-page__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.listing-page__action {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}

.listing-page__action:hover {
  background: var(--bg);
  color: var(--accent);
}

.listing-page__action.active {
  color: var(--accent);
}

.listing-page__price-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.listing-page__price-row .listing-card__badge {
  margin-top: 9px;
}

.listing-page__price {
  font-size: 26px;
  font-weight: 700;
  color: var(--green, #22c55e);
}

.listing-page__price span {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-secondary);
}

.listing-page__badges {
  display: flex;
  gap: 6px;
}

.listing-page__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.listing-page__meta svg {
  vertical-align: -2px;
}

/* Seller */
.listing-page__seller {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 16px;
  margin-bottom: 20px;
}

.listing-page__seller-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.listing-page__seller-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.listing-page__seller-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.listing-page__seller-since {
  font-size: 13px;
  color: var(--text-muted);
}

.listing-page__seller-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.listing-page__seller-btn {
  justify-content: center;
  gap: 8px;
}

.listing-page__seller-btn--disabled,
.listing-action-bar__btn--disabled {
  opacity: 0.5;
}

.listing-page__subscribe-btn {
  justify-content: center;
  gap: 8px;
  font-size: 13px;
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}

.btn--ghost:hover {
  background: var(--bg);
  color: var(--text-primary);
}

/* Sections */
.listing-page__section {
  margin-bottom: 20px;
}

.listing-page__section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.listing-page__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.listing-page__description p {
  margin-bottom: 8px;
}

.listing-page__description p:last-child {
  margin-bottom: 0;
}

/* Specs */
.listing-page__specs {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
}

.listing-page__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
}

.listing-page__spec {
  display: contents;
}

.listing-page__spec-label,
.listing-page__spec-value {
  padding: 8px 14px;
  font-size: 14px;
}

.listing-page__spec-label {
  color: var(--text-muted);
  padding-right: 20px;
}

.listing-page__spec-value {
  color: var(--accent);
  font-weight: 500;
}

.listing-page__specs--collapsed .listing-page__spec:nth-child(n+4) .listing-page__spec-label,
.listing-page__specs--collapsed .listing-page__spec:nth-child(n+4) .listing-page__spec-value {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s, opacity 0.3s;
}

.listing-page__specs--collapsed .listing-page__spec:nth-child(3) .listing-page__spec-label,
.listing-page__specs--collapsed .listing-page__spec:nth-child(3) .listing-page__spec-value {
  opacity: 0.4;
  transition: opacity 0.3s;
}

.listing-page__spec-label,
.listing-page__spec-value {
  max-height: 100px;
  opacity: 1;
  transition: max-height 0.3s, padding 0.3s, opacity 0.3s;
}

/* expanded handled by removing --collapsed class */

.listing-page__specs-toggle {
  grid-column: 1 / -1;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 14px;
  transition: color 0.15s;
}

.listing-page__specs-toggle svg {
  flex-shrink: 0;
  transition: transform 0.3s;
}

.listing-page__specs--expanded .listing-page__specs-toggle svg {
  transform: rotate(180deg);
}

.listing-page__specs-toggle:hover {
  color: var(--accent);
}

/* Listing page specific overrides */
.main--listing .listing-page__section-title { margin-bottom: 0; }
.main--listing .listing-page { margin-bottom: 10px; }
.main--listing .section__header { margin-bottom: 10px; }
.main--listing .section { margin-bottom: 5px; }

/* Details (legacy - not used) */

.listing-page__footer-info {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listing-page__footer-views {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.listing-page__footer-views svg {
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 767px) {
  .breadcrumb {
    padding: 8px 0;
    font-size: 12px;
  }

  .listing-page {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .listing-page__right {
    position: static;
  }

  .listing-page__gallery {
    position: static;
  }

  .listing-page__photo-arrow,
  .listing-page__photo-fullscreen {
    display: none;
  }

  /* Listing mobile header */
  .header__mobile-row--listing {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .listing-mobile-back {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--white);
    transition: color 0.15s;
    line-height: 14px;
    padding: 0 20px 0 16px;
    margin: 0 0 0 -16px;
    align-self: stretch;
  }

  .page-listing .header__mobile-row,
  .page-chat .header__mobile-row {
    height: 100%;
  }

  .listing-mobile-back svg {
    flex-shrink: 0;
  }

  .listing-mobile-actions {
    display: flex;
    gap: 8px;
  }

  .listing-mobile-action {
    position: relative;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
  }

  .listing-mobile-action svg {
    width: 20px;
    height: 20px;
  }

  .header--scrolled .listing-mobile-action {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text-primary);
  }

  .header--scrolled .listing-mobile-action.active {
    color: var(--pink);
    border-color: var(--border);
    background: var(--white);
  }

  /* Hide breadcrumb on mobile listing */
  .page-listing .breadcrumb {
    display: none;
  }

  /* Reorder: gallery → info-card → desc → seller → location */
  .page-listing .listing-page {
    display: flex;
    flex-direction: column;
  }

  .page-listing .listing-page__left {
    display: contents;
  }

  .page-listing .listing-page__right {
    display: contents;
  }

  .page-listing .listing-page__gallery { order: 1; }
  .page-listing .listing-page__info-card { order: 2; }
  .page-listing .listing-page__desc-block { order: 3; min-width: 0; }
  .page-listing .listing-page__section-title { order: 3; }
  .page-listing .listing-page__seller-card { order: 4; }
  .page-listing .listing-page__location-card { order: 5; }

  /* Photo full width, flush to header */
  .page-listing .listing-page__gallery {
    margin: 0 -16px;
  }

  .page-listing .listing-page__main-photo {
    border-radius: 0;
  }

  /* Thumbs scroll horizontally */
  .page-listing .listing-page__thumbs-wrap {
    margin-top: 0;
  }

  .page-listing .listing-page__thumbs-arrow {
    display: none;
  }

  .page-listing .listing-page__thumbs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 8px 16px;
    gap: 6px;
  }
  .page-listing .listing-page__thumbs::-webkit-scrollbar { display: none; }

  .page-listing .listing-page__thumb {
    flex: 0 0 calc((100% - 24px) / 5);
    height: auto;
    aspect-ratio: 1;
  }

  /* Hide fav button from info card on mobile */
  .page-listing .listing-page__published-row .listing-page__fav-btn {
    display: none;
  }

  /* Scrolled header — change back button color */
  .header--scrolled .listing-mobile-back {
    color: var(--text-primary);
  }

  .page-listing .listing-page__price-row .listing-card__badge {
    margin-top: 6px;
  }

  .page-listing .listing-page__seller-actions {
    gap: 0;
  }

  .page-listing .listing-page__seller-stats {
    border-bottom: none;
    margin-bottom: 0;
  }

  .page-listing .listing-page__seller-btns {
    margin-top: 5px;
  }

  /* Main padding for mobile bar */
  .page-listing .main {
    padding-bottom: 70px;
  }

  /* Mobile bottom bar: Write / Call */
  .listing-page__mobile-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--white);
    border-top: 1px solid var(--border-light);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  }

  .listing-page__mobile-bar .btn {
    flex: 1;
    justify-content: center;
  }

  .listing-page__title {
    font-size: 18px;
  }

  .listing-page__price {
    font-size: 22px;
  }

  .listing-page__price span {
    font-size: 16px;
  }

  .listing-page__thumb {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1;
  }

  .listing-page__details {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ===========================
   CHAT PAGE
   =========================== */
.chat-page {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: calc(100vh - 130px);
  margin-top: 14px;
  background: #e8eaed;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.chat-sidebar {
  border-right: 1px solid #d1d5db;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #e8eaed;
}

.chat-sidebar__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--white);
}

.chat-sidebar__back {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.15s;
}

.chat-sidebar__back:hover { color: var(--text-primary); }

.chat-sidebar__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.chat-sidebar__title--mobile { display: none; }

.chat-sidebar__header-actions {
  display: flex;
  gap: 4px;
}

.chat-sidebar__header-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s;
}

.chat-sidebar__header-btn:hover {
  background: var(--bg);
  color: var(--text-primary);
}

.chat-sidebar__header-btn.active {
  background: var(--accent-light);
  color: var(--accent);
}

.chat-sidebar__header-btn {
  position: relative;
}

.chat-sidebar__header-btn .header__badge {
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  padding: 0 4px;
  text-align: center;
  border-radius: 7px;
  padding: 0 3px;
}

.chat-sidebar--saved .chat-sidebar__list { padding-top: 10px; }

/* Toggle: Купую / Продаю */
.chat-sidebar__toggle {
  display: flex;
  margin: 10px 10px 0;
  background: #dde0e4;
  border-radius: var(--radius-md);
  padding: 3px;
}

.chat-sidebar__toggle-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.2s;
  text-align: center;
}

.chat-sidebar__toggle-btn--active {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 2px 4px rgba(99,102,241,0.2);
}

.toggle-badge {
  background: var(--pink);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: 4px;
  display: inline-grid;
  place-items: center;
  line-height: 0;
  letter-spacing: 0;
  text-indent: 0;
}

.chat-sidebar__toggle-btn--active .toggle-badge {
  background: var(--white);
  color: var(--accent);
}

/* Section labels */
.chat-sidebar .modal__search {
  margin: 10px 10px 5px;
}

.chat-sidebar__section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px 10px;
}

.chat-sidebar__count {
  background: var(--accent);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.chat-sidebar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px;
  padding: 8px 12px;
  background: var(--accent-light);
  border-radius: var(--radius);
  color: var(--text-muted);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.chat-sidebar__search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font);
}

.chat-sidebar__search-input::placeholder { color: var(--text-muted); }

.chat-sidebar__list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}

.chat-sidebar__list::-webkit-scrollbar { display: none; }

/* Chat group (unified white block) */
.chat-sidebar__group {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin: 0 10px 6px;
  overflow: hidden;
}

.chat-sidebar__group:only-child,
.chat-sidebar__group + .chat-sidebar__group:last-child {
  margin-bottom: 6px;
}

.chat-sidebar__tab-content {
  padding-top: 4px;
}

/* Chat skeleton */
.chat-skeleton {
  padding: 4px 0;
}

.chat-skeleton__toggle {
  margin: 10px 10px 0;
}

.chat-skeleton__search-skel {
  margin: 10px 10px 0;
}

.chat-skeleton__label {
  height: 10px;
  width: 80px;
  border-radius: 4px;
  margin: 10px 14px 6px;
}

.chat-skeleton__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.chat-skeleton__item:last-child { border-bottom: none; }

.chat-skeleton__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-skeleton__body {
  flex: 1;
  min-width: 0;
}

.chat-skeleton__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chat-skeleton__line {
  height: 10px;
  border-radius: 4px;
}

/* Message skeletons */
.chat-skeleton--messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: #e8eaed;
}

.chat-skeleton__msg {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  align-self: flex-start;
}

.chat-skeleton__msg--out {
  align-self: flex-end;
}

.chat-skeleton__msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-skeleton__msg-bubble {
  height: 36px;
  border-radius: 12px;
  min-width: 100px;
}

.chat-skeleton__msg--out .chat-skeleton__msg-bubble {
  border-bottom-right-radius: 4px;
}

.chat-skeleton__msg:not(.chat-skeleton__msg--out) .chat-skeleton__msg-bubble {
  border-bottom-left-radius: 4px;
}

.chat-skeleton__input {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px;
  background: var(--white);
  border-radius: var(--radius);
  margin-top: auto;
}

.chat-skeleton__input-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-skeleton__input-bar {
  flex: 1;
  height: 34px;
  border-radius: 20px;
}

.chat-sidebar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-light);
}

.chat-item:last-child { border-bottom: none; }

.chat-item:hover { background: var(--bg); }
.chat-item--active { background: var(--accent-light); }
.chat-item--active:hover { background: var(--accent-light); }

.chat-item--inactive { opacity: 0.6; }

.chat-item__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-item__avatar-img {
  border-radius: 50%;
}

.chat-item__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-item__online {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border: 2px solid var(--white);
  border-radius: 50%;
}

.chat-item__body { flex: 1; min-width: 0; }

.chat-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

/* Row layout */
.chat-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.chat-item__product {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.chat-item__save {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.15s;
  padding: 2px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.chat-item__save:hover { color: #f59e0b; }
.chat-item__save.active { color: #f59e0b; }
.chat-item__save.active svg { fill: #f59e0b; }

.chat-item__status-badge {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.chat-item__sender {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.chat-item__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item--unread { background: var(--accent-light); }
.chat-item--unread .chat-item__name { font-weight: 600; }

.chat-item__time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

.chat-item__bottom { display: flex; align-items: center; gap: 6px; }

.chat-item__last-msg {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.chat-item--unread .chat-item__last-msg { color: var(--text-primary); }

.chat-item__badge {
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-item__product {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-window {
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.chat-window--active {
  display: flex;
}

.chat-window--active + .chat-empty {
  display: none;
}

.chat-window__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  flex-shrink: 0;
  background: var(--white);
}

.chat-window__back { display: none; color: var(--text-muted); }

.chat-window__user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }

.chat-window__avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.chat-window__online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border: 2px solid var(--white);
  border-radius: 50%;
}

.chat-window__user-info { display: flex; flex-direction: column; min-width: 0; }

.chat-window__name { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.chat-window__status { font-size: 12px; color: #22c55e; line-height: 1.2; }

.chat-window__actions { display: flex; gap: 4px; }

.chat-window__action {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s;
}

.chat-window__action:hover { background: var(--bg); color: var(--text-primary); }
.chat-window__action.active { color: var(--pink); }

.chat-window__product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--accent-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-window__product:hover {
  background: #dbeafe;
}

.chat-window__product-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #fff;
}

.chat-window__product-info { flex: 1; min-width: 0; }

.chat-window__product-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-window__product-price { font-size: 13px; font-weight: 600; color: var(--accent); }

.chat-window__product-link { color: var(--text-muted); flex-shrink: 0; transition: color 0.15s; }
.chat-window__product-link:hover { color: var(--accent); }

.chat-window__product-badge {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.chat-window__messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: none;
  background: #e8eaed;
}

.chat-window__messages::-webkit-scrollbar { display: none; }

.chat-msg__date { text-align: center; font-size: 12px; color: var(--text-muted); padding: 8px 0; }

.chat-msg { display: flex; max-width: 75%; gap: 6px; }
.chat-msg--incoming { align-self: flex-start; }
.chat-msg--outgoing { align-self: flex-end; }
.chat-msg--highlight { animation: msgHighlight 2.5s ease; }
@keyframes msgHighlight {
  0%, 30% { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
  100% { outline-color: transparent; }
}

.chat-msg__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
  align-self: flex-end;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.chat-msg--outgoing .chat-msg__avatar { display: none; }

.chat-msg__bubble {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
}

.chat-msg--incoming .chat-msg__bubble {
  background: var(--bg);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.chat-msg--outgoing .chat-msg__bubble {
  background: var(--accent);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.chat-msg__time {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 2px;
  float: right;
  margin-top: 3px;
  line-height: 10px;
}

.chat-msg__status {
  margin-left: 2px;
  opacity: 0.5;
  float: right;
  margin-top: 4px;
}

.chat-msg__status svg {
  display: block;
}

.chat-msg__status--read { opacity: 1; color: #60a5fa; }
.chat-msg--outgoing .chat-msg__status--read { color: rgba(255,255,255,0.85); }

.chat-msg__img {
  max-width: 240px;
  border-radius: 8px;
  display: block;
  cursor: pointer;
}

.chat-msg__file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 4px;
  max-width: 240px;
  word-break: break-all;
}
.chat-msg__file svg { flex-shrink: 0; }
.chat-msg--outgoing .chat-msg__file {
  background: rgba(255,255,255,0.15);
  color: var(--white);
}

.chat-attach-preview__loader {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-attach-preview__loader::after {
  content: '';
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
}
.chat-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-lightbox__close:hover { background: rgba(255,255,255,0.3); }
  margin-bottom: 4px;
}

/* Message actions popup */
.chat-msg-actions {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: flex;
  gap: 2px;
  padding: 4px;
  z-index: 10;
  animation: chatMsgActionsIn 0.15s ease;
}

@keyframes chatMsgActionsIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.chat-msg-actions__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  transition: background 0.15s;
}

.chat-msg-actions__btn:hover {
  background: var(--bg);
}

.chat-msg-actions__btn svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Fav indicator on message */
.chat-msg {
  position: relative;
}
.chat-msg__fav {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  z-index: 5;
}
.chat-msg__fav svg { width: 10px; height: 10px; fill: var(--pink); stroke: var(--pink); }
.chat-msg--outgoing .chat-msg__fav {
  right: auto;
  left: -6px;
}
.chat-msg__bubble {
  position: relative;
}

.chat-msg__typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}

.chat-msg__typing span {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: chatTyping 1.4s infinite;
}

.chat-msg__typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg__typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatTyping {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.chat-window__templates {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid #d1d5db;
}

.chat-window__templates::-webkit-scrollbar { display: none; }

.chat-window__template {
  white-space: nowrap;
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 16px;
  font-size: 12px;
  color: var(--text-primary);
  transition: all 0.15s;
  flex-shrink: 0;
}

.chat-window__template:hover { background: var(--accent-light); color: var(--accent); }

.chat-window__input-area {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 10px;
  background: var(--white);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
}

.chat-window__emoji {
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.chat-window__emoji:hover { background: var(--border-light); color: var(--text-secondary); }
.chat-window__emoji.active { background: var(--accent-light); color: var(--accent); }

.chat-window__input-area.emoji-open {
  border-bottom: 1px solid var(--border-light);
}

.chat-emoji-panel {
  background: var(--white);
  padding: 0 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out, padding 0.25s ease-out;
  scrollbar-width: none;
}
.chat-emoji-panel::-webkit-scrollbar { display: none; }
.chat-emoji-panel.active {
  max-height: 160px;
  padding: 10px;
  overflow-y: auto;
}
.chat-emoji-panel__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-emoji-panel__item {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 4px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.chat-emoji-panel__item:hover {
  background: var(--border-light);
}
.chat-emoji-panel__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.chat-emoji-panel__empty,
.chat-emoji-panel__loading {
  padding: 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

img.chat-emoji {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  object-fit: contain;
}

.chat-window__attach {
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.chat-window__attach:hover { color: var(--accent); background: var(--accent-light); }

.chat-window__attach.active {
  background: var(--accent);
  color: var(--white);
  transform: rotate(45deg);
}

.chat-window__attach.active:hover {
  background: var(--accent-hover);
}

.chat-window__input-wrap { flex: 1; display: flex; align-items: center; }

.chat-window__textarea {
  width: 100%;
  border: none;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 14px;
  font-family: var(--font);
  max-height: 120px;
  line-height: 20px;
  color: var(--text-primary);
  background: var(--bg);
  min-height: 34px;
  box-sizing: border-box;
  display: block;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-window__textarea:focus { outline: none; }
.chat-window__textarea:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
.chat-window__textarea img.chat-emoji {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  display: inline-block;
}

.chat-item__last-msg img.chat-emoji {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.chat-window__send {
  color: var(--white);
  flex-shrink: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.chat-window__send svg {
  display: block;
  transform: translate(-1px, 1px);
  transition: all 0.15s;
}

.chat-window__send:disabled { opacity: 0.3; cursor: not-allowed; }
.chat-window__send:not(:disabled):hover { background: var(--accent-hover); }

/* Attach menu */
.chat-attach-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--white);
  border-top: 1px solid var(--border-light);
}

.chat-attach-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: var(--radius);
  transition: background 0.15s;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
}

.chat-attach-menu__item:hover {
  background: var(--bg);
  color: var(--text-primary);
}

.chat-attach-menu__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s;
}

.chat-attach-menu__item:hover .chat-attach-menu__icon {
  background: var(--accent-light);
  color: var(--accent);
}

/* Attach preview */
.chat-attach-preview {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  background: var(--white);
  border-top: 1px solid var(--border-light);
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-attach-preview::-webkit-scrollbar { display: none; }

.chat-attach-preview__item {
  position: relative;
  flex-shrink: 0;
}

.chat-attach-preview__img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
}

.chat-attach-preview__file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-primary);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 56px;
  box-sizing: border-box;
}

.chat-attach-preview__remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-attach-preview__remove:hover { background: var(--pink); }

.chat-item__unarchive {
  color: var(--accent);
  transition: color 0.15s;
}
.chat-item__unarchive:hover { color: var(--accent-hover); }
.chat-attach-preview__remove svg { width: 10px; height: 10px; }

/* Three-dot more menu */
.chat-more-wrap {
  position: relative;
}

.chat-more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 180px;
  z-index: 20;
  overflow: hidden;
  animation: chatMsgActionsIn 0.15s ease;
}

.chat-more-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  width: 100%;
  transition: background 0.15s;
  line-height: 1;
}

.chat-more-menu__item:hover {
  background: var(--bg);
}

.chat-more-menu__item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.chat-more-menu__item:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

/* Blocked user message */
.chat-blocked-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--white);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  color: var(--text-muted);
  font-size: 13px;
  z-index: 2;
  position: relative;
}

.chat-blocked-msg svg { flex-shrink: 0; color: var(--pink); }

.chat-blocked-msg__unblock {
  color: var(--accent);
  font-weight: 500;
  font-size: 13px;
  margin-left: 4px;
  transition: color 0.15s;
}

.chat-blocked-msg__unblock:hover { text-decoration: underline; }

/* Message actions popup */
.chat-msg-actions {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: flex;
  gap: 2px;
  padding: 4px;
  z-index: 10;
  animation: chatMsgActionsIn 0.15s ease;
}

@keyframes chatMsgActionsIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.chat-msg-actions__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  transition: background 0.15s;
}

.chat-msg-actions__btn:hover {
  background: var(--bg);
}

.chat-msg-actions__btn svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Fav indicator on message */
.chat-msg__fav {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.chat-msg__fav svg { width: 10px; height: 10px; fill: var(--pink); stroke: var(--pink); }

/* Quote/Reply in bubble */
.chat-msg__quote {
  padding: 6px 10px;
  margin-bottom: 6px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12px;
  line-height: 1.4;
}

.chat-msg--outgoing .chat-msg__quote {
  background: rgba(255,255,255,0.15);
  border-left-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.85);
}

.chat-msg--incoming .chat-msg__quote {
  background: var(--white);
  color: var(--text-muted);
}

.chat-msg__quote-name {
  font-weight: 600;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 2px;
  display: block;
}

.chat-msg--outgoing .chat-msg__quote-name {
  color: rgba(255,255,255,0.9);
}

/* Reply preview above input */
.chat-reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--white);
  border-top: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
}

.chat-reply-preview__body {
  flex: 1;
  min-width: 0;
}

.chat-reply-preview__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.chat-reply-preview__text {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-reply-preview__close {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s;
}

.chat-reply-preview__close:hover { color: var(--text-primary); }

/* Saved messages list */
.saved-msg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}

.saved-msg-item {
  padding: 8px 14px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 8px;
}

.saved-msg-item__body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.saved-msg-item__body:hover .saved-msg-item__text {
  color: var(--accent);
}

.saved-msg-item__text {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
  transition: color 0.15s;
}

.saved-msg-item__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.saved-msg-item__delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  transition: all 0.15s;
}

.saved-msg-item__delete:hover {
  color: var(--pink);
  background: #fce4ec;
}

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 767px) {
  .chat-page {
    grid-template-columns: 1fr;
    height: calc(100vh - 60px);
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .main--chat { padding: 0; background: #e8eaed; }
  .main--chat .container { padding: 0; max-width: 100%; }

  .chat-sidebar__toggle { margin-top: 14px; }

  .chat-sidebar { border-right: none; }
  .chat-sidebar--hidden { display: none; }
  .chat-sidebar__list { padding-bottom: 70px; }

  .chat-sidebar__header { display: none; }

  .chat-sidebar__title--desktop { display: none; }
  .chat-sidebar__title--mobile { display: block; }

  .chat-window { display: none; }
  .chat-window--active,
  .chat-window--visible { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; background: #e8eaed; padding-top: 56px; }
  .chat-window__back { display: flex; }
  .chat-window__header { display: none; }
  .chat-window__input-area { position: sticky; bottom: 0; flex-shrink: 0; }

  .chat-empty { display: none !important; }

  /* Mobile chat header */
  .header__mobile-row--chat,
  .header__mobile-row--chat-dialog {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .chat-mobile-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
  }

  .header--scrolled .chat-mobile-title {
    color: var(--text-primary);
  }

  .chat-mobile-actions {
    display: flex;
    gap: 4px;
  }

  .chat-mobile-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
  }

  .header--scrolled .chat-mobile-action {
    color: var(--text-primary);
  }

  .chat-mobile-action:hover {
    color: var(--white);
  }

  .chat-mobile-user {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
  }

  .chat-mobile-user__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
  }

  .header--scrolled .chat-mobile-user__avatar {
    background: var(--bg);
    color: var(--text-muted);
  }

  .chat-mobile-user__online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border: 2px solid var(--accent);
    border-radius: 50%;
  }

  .header--scrolled .chat-mobile-user__online {
    border-color: var(--white);
  }

  .header__mobile-row--chat-dialog .listing-mobile-back {
    padding: 0 2px 0 16px;
  }

  .chat-mobile-user__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .chat-mobile-user__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.2;
  }

  .chat-mobile-user__status {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.2;
  }

  .header--scrolled .chat-mobile-user__name {
    color: var(--text-primary);
  }

  .header--scrolled .chat-mobile-user__status {
    color: #22c55e;
  }

  .header__mobile-row--chat .listing-mobile-actions,
  .header__mobile-row--chat-dialog .listing-mobile-actions {
    display: flex;
    gap: 6px;
  }
  .header__mobile-row--chat .listing-mobile-action,
  .header__mobile-row--chat-dialog .listing-mobile-action {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    color: var(--accent);
    border: none;
    cursor: pointer;
  }
  .header--scrolled .header__mobile-row--chat .listing-mobile-action,
  .header--scrolled .header__mobile-row--chat-dialog .listing-mobile-action {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }
  .header__mobile-row--chat .listing-mobile-action.active,
  .header--scrolled .header__mobile-row--chat .listing-mobile-action.active {
    color: var(--pink);
  }
  .header__mobile-row--chat .listing-mobile-action.active svg {
    fill: var(--pink);
    stroke: var(--pink);
  }
}

/* ===========================
   CREATE LISTING PAGE
   =========================== */
.main--create {
  padding-top: 0;
}

.create-page {
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 767px) {
  .create-page {
    gap: 0;
  }
}

.create-page__left {
  display: flex;
  flex-direction: column;
}

.create-page__right {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
  padding: 2px 4px;
  margin: -2px -4px;
}

.create-page__right::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1024px) {
  .create-page {
    grid-template-columns: 1fr;
  }
  .create-page__right {
    display: none;
  }
}

.create-form__card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px;
}

.create-form__field {
  margin-bottom: 10px;
}

.create-form__field:last-child {
  margin-bottom: 0;
}

.create-form__field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.create-form__field-divider {
  height: 1px;
  background: var(--border-light);
  margin: 10px 0;
}

/* Validation */
.create-form__error {
  font-size: 12px;
  color: #ef4444;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
  display: block;
}

.create-form__error.visible {
  max-height: 20px;
  opacity: 1;
  margin-top: 4px;
}

.modal__input--error {
  border-color: #ef4444 !important;
}

.modal__input--error:focus {
  border-color: #ef4444 !important;
}

.modal__select-btn--error {
  border-color: #ef4444 !important;
}

.create-form__counter {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.create-form__hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

.create-form__hints {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.create-form__hint-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 14px;
}

.create-form__hint-item svg {
  color: var(--accent);
  flex-shrink: 0;
  vertical-align: middle;
  margin-top: -1px;
}

.create-form__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 10px;
}

.create-form__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* Photo upload */
.create-form__photos-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px;
}

/* 3D View */
.create-form__optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 767px) {
  .create-form__photo-add.create-form__photo-add--3d {
    display: flex;
  }
}

.create-form__photo-item--3d {
  position: relative;
}

.create-form__photo-3d-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 5px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  border-radius: 3px;
  line-height: 1;
  letter-spacing: 0.5px;
}

.create-form__3d-drop {
  position: relative;
  cursor: pointer;
}

.create-form__3d-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 30px 14px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: all 0.2s;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.create-form__3d-drop:hover .create-form__3d-empty,
.create-form__3d-card--drag .create-form__3d-empty {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

.create-form__3d-empty-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.create-form__3d-empty-sub {
  font-size: 12px;
  line-height: 1;
}

.create-form__3d-preview {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.create-form__3d-preview canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  cursor: grab;
}

.create-form__3d-preview canvas:active {
  cursor: grabbing;
}

@media (max-width: 767px) {
  .create-form__3d-preview canvas {
    aspect-ratio: auto;
  }
}

/* 3D modal — fullscreen preview when captured */
.modal3d__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
}

#modal3d.has-3d {
  overflow: hidden;
}

.modal3d__body.has-3d {
  padding: 0;
  flex: 1;
  overflow: hidden;
  padding-bottom: 0;
}

.modal3d__body.has-3d .create-form__3d-drop {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modal3d__body.has-3d .create-form__3d-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  min-height: 0;
}

.modal3d__body.has-3d .create-form__3d-preview canvas {
  flex: 1;
  aspect-ratio: auto;
  width: 100%;
  min-height: 0;
}

.modal3d__body.has-3d .create-form__3d-footer {
  margin-top: 0;
  border-radius: 0;
  border-top: 1px solid var(--border);
  box-shadow: none;
  flex-shrink: 0;
}

.modal3d__body.has-3d .create-form__3d-tips {
  display: none;
}

.create-form__3d-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-top: 12px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.create-form__3d-counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}

.create-form__3d-tips {
  margin-top: 12px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px;
}

.create-form__3d-tips-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1;
}

.create-form__3d-tips-title svg {
  color: var(--accent);
  flex-shrink: 0;
}

.create-form__3d-tips-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.create-form__3d-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.create-form__3d-tip:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.create-form__3d-tip:first-child {
  padding-top: 0;
}

.create-form__3d-tip-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.create-form__3d-tip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.create-form__3d-tip-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

.create-form__3d-tip-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.2;
}

.create-form__3d-btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius);
  background: #fef2f2;
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}

.create-form__3d-btn-delete:active {
  background: #fee2e2;
}

/* 3D Fullscreen button */
.create-form__3d-fullscreen {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}

.create-form__3d-fullscreen:active {
  background: rgba(0,0,0,0.7);
}

/* 3D Fullscreen Viewer */
.view3d-fs {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
}

.view3d-fs.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.view3d-fs__canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.view3d-fs__canvas:active {
  cursor: grabbing;
}

.view3d-fs__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.view3d-fs__close:active {
  background: rgba(255,255,255,0.3);
}

.view3d-fs__hint {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  border-radius: 30px;
  line-height: 1;
  pointer-events: none;
}

.view3d-fs__counter {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1;
}

.create-form__3d-done {
  color: var(--green) !important;
  font-weight: 600 !important;
}

.create-form__3d-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}

.create-form__3d-clear:hover {
  background: #fee2e2;
  color: #ef4444;
}

.create-form__3d-hint-drag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  color: var(--white);
  font-size: 12px;
  border-radius: var(--radius);
  pointer-events: none;
  opacity: 0.9;
  line-height: 1;
  transition: opacity 0.3s;
}

.create-form__3d-preview:active .create-form__3d-hint-drag {
  opacity: 0;
}

.create-form__3d-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.create-form__3d-btn {
  font-size: 12px;
  padding: 8px 14px;
  white-space: nowrap;
}

/* 3D Camera Fullscreen */
.cam3d {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
}

.cam3d.active {
  display: block;
}

.cam3d__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cam3d__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Ring progress */
.cam3d__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(60vw, 60vh, 280px);
  height: min(60vw, 60vh, 280px);
  transform: translate(-50%, -50%);
}

.cam3d__ring-progress {
  transition: stroke-dashoffset 0.3s ease;
}

/* Center target */
.cam3d__target {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Hints */
.cam3d__hint {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.cam3d__hint-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border-radius: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

/* Info bar */
.cam3d__info {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.cam3d__angle {
  color: var(--accent);
}

/* Level indicator */
.cam3d__level {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cam3d__level-bar {
  width: 4px;
  height: 80px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  position: relative;
}

.cam3d__level-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.1s, background 0.2s;
  box-shadow: 0 0 6px rgba(34,197,94,0.5);
}

.cam3d__level-dot--warn {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245,158,11,0.5);
}

.cam3d__level-text {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  line-height: 1;
}

/* Controls */
.cam3d__controls {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.cam3d__btn-close,
.cam3d__btn-done {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.cam3d__btn-close:active,
.cam3d__btn-done:active {
  background: rgba(255,255,255,0.3);
}

.cam3d__btn-done {
  background: var(--accent);
}

.cam3d__btn-done:active {
  background: var(--accent-hover);
}

.cam3d__btn-capture {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.15s;
}

.cam3d__btn-capture:active {
  transform: scale(0.9);
}

.cam3d__btn-capture-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transition: background 0.15s;
}

.cam3d__btn-capture--recording .cam3d__btn-capture-inner {
  background: #ef4444;
  border-radius: 8px;
  width: 60%;
  height: 60%;
  margin: 20%;
}

/* Flash effect */
.cam3d__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: cam3d-flash 0.2s ease-out;
}

@keyframes cam3d-flash {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* Ring arrow */
.cam3d__ring-arrow {
  transition: transform 0.3s ease;
}

/* Speed warning */
.cam3d__speed-warn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background: rgba(239,68,68,0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 30px;
  white-space: nowrap;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 10;
}

.cam3d__speed-warn.active {
  opacity: 1;
}

/* Tutorial */
.cam3d__tutorial {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  z-index: 20;
  transition: opacity 0.3s;
}

.cam3d__tutorial--fade {
  opacity: 0;
}

.cam3d__tutorial-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 0 30px;
  animation: cam3d-tut-in 0.4s ease;
}

@keyframes cam3d-tut-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cam3d__tutorial-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cam3d__tutorial-icon--spin svg {
  animation: cam3d-spin 2s linear infinite;
}

@keyframes cam3d-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cam3d__tutorial-dots {
  display: flex;
  gap: 8px;
}

.cam3d__tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.3s;
}

.cam3d__tutorial-dot.active {
  background: #fff;
}

.cam3d__tutorial-skip {
  padding: 10px 24px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.3);
  background: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1;
}

.cam3d__tutorial-skip:active {
  background: rgba(255,255,255,0.15);
}

.create-form__photos-card--drag {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: var(--accent-light) !important;
}

.create-form__photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

.create-form__photo-add {
  aspect-ratio: 1;
  width: 100%;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.create-form__photo-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.create-form__photo-add--3d {
  display: none;
}
.create-form__hint-3d-only {
  display: none;
}
@media (max-width: 767px) {
  .create-form__hint-3d-only { display: inline; }
}

.create-form__photo-item {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.create-form__photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-form__photo-item--first::after {
  content: 'Обкладинка';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 9px;
  text-align: center;
  padding: 2px;
}

.create-form__photo-item[draggable="true"] { cursor: grab; }
.create-form__photo-item[draggable="true"]:active { cursor: grabbing; }
.create-form__photo-item--dragover { outline: 2px solid var(--accent); outline-offset: -2px; }

.create-form__photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
}

/* City search results */
.create-form__city-results { max-height: 200px; overflow-y: auto; }
.create-form__city-results .modal__list-item { padding: 8px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--border-light); }
.create-form__city-results .modal__list-item:hover { background: var(--border-light); }
.create-form__city-results .modal__list-item:last-child { border-bottom: 0; }

/* Photo upload loader */
.create-form__photo-item--uploading { opacity: 0.6; pointer-events: none; }
.create-form__photo-loader {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3); border-radius: 10px; z-index: 2;
}
.create-form__photo-spinner {
  width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%; animation: photoSpin 0.7s linear infinite;
}
@keyframes photoSpin { to { transform: rotate(360deg); } }

/* AI Description Generator */
.create-form__field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ai-gen__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  white-space: nowrap;
}

.ai-gen__trigger:hover {
  background: var(--accent);
  color: var(--white);
}

.ai-gen__trigger:hover svg {
  stroke: var(--white);
}

.ai-gen__trigger:active {
  transform: scale(0.97);
}

.ai-gen__trigger--loading {
  pointer-events: none;
  opacity: 0.7;
}

.create-form__counter-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.create-form__counter-row .create-form__counter {
  margin-left: auto;
  margin-top: 0;
}

.ai-gen__dots-wrap {
  display: inline-block;
  text-align: left;
  min-width: 58px;
}

.ai-gen__dots::after {
  content: '...';
  animation: ai-typing-dots 1.5s step-end infinite;
}

@keyframes ai-typing-dots {
  0%      { content: '.'; }
  33%     { content: '..'; }
  66%     { content: '...'; }
}

.ai-gen__clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}

.ai-gen__clear:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Footer */
.create-form__footer {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}

.create-form__btn {
  justify-content: center;
}

.create-form__btn--submit {
}

.create-form__currency-dropdown {
  flex-shrink: 0;
}

.create-form__currency-trigger {
  padding: 10px 12px !important;
  height: auto !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--white) !important;
  font-size: 14px !important;
  font-family: var(--font);
  white-space: nowrap;
  box-sizing: border-box;
}

.create-form__location-row {
  display: flex;
  gap: 14px;
}

/* Phone code dropdown */
.create-phone-code {
  position: relative;
}

.create-phone-code .auth-field__country-code {
  height: 100%;
}

.create-phone-code__dropdown {
  display: none;
  position: absolute;
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: none;
}

.create-phone-code__dropdown::-webkit-scrollbar {
  display: none;
}

.create-phone-code__dropdown--up {
  bottom: 100%;
  margin-bottom: 4px;
}

.create-phone-code__dropdown--down {
  top: 100%;
  margin-top: 4px;
}

.create-phone-code__dropdown.active {
  display: block;
}

.create-phone-code__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1;
  text-align: left;
}

.create-phone-code__item:hover {
  background: var(--bg);
}

.create-phone-code__item--active {
  background: var(--accent-light);
  color: var(--accent);
}

.create-phone-code__item img {
  border-radius: 2px;
  flex-shrink: 0;
}

.create-phone-code__item span {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
}

.create-form__preview-btn {
  display: none;
}

.create-form__location-city {
  flex: 1;
}

.create-form__location-map {
  flex: 1;
}

@media (max-width: 767px) {
  .create-form__location-row {
    flex-direction: column;
    gap: 0;
  }
}

/* Preview in create page */
.create-preview__gallery {
  margin-bottom: 10px;
}

.create-preview__gallery .listing-page__main-photo {
  aspect-ratio: 4/3;
  background: var(--bg);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.create-preview__gallery .listing-page__main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-page__right .listing-page__info-card,
.create-page__right .listing-page__desc-block,
.create-page__right .listing-page__location-card {
  margin-bottom: 10px;
}

.create-page__right .listing-page__title {
  word-break: break-word;
}

.create-page__right .listing-page__price-row .listing-card__badge {
  margin-top: 12px;
}

.create-preview__desc-empty {
  font-size: 13px;
  color: var(--text-muted);
}

/* Footer sticky */
.create-form__footer--sticky {
  position: sticky;
  top: calc(80px + 450px);
  margin-top: 10px;
}

/* Progress bar */
.create-progress {
  margin-top: 10px;
}

.create-progress__bar {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}

.create-progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.create-progress__text {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
}

/* Category inline dropdown */
.create-form__cat-wrap {
  position: relative;
}

.create-form__mobile-footer {
  display: none;
}

@media (max-width: 767px) {
  .main--create {
    padding-top: 10px;
  }

  .page-create .modal__section-label {
    padding: 10px 4px 10px;
    background: transparent;
    margin: 0;
  }

  .page-create .modal__section-label:first-child {
    padding-top: 0;
  }

  .create-form__preview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1;
    margin-top: 10px;
  }

  .create-form__preview-btn:active {
    background: var(--border-light);
  }

  .create-page {
    max-width: 100%;
    overflow-x: hidden;
  }

  .create-page .modal__chips {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-right: 0;
    padding-right: 0;
  }

  .create-page .modal__row {
    flex-wrap: wrap;
  }

  .create-form__footer {
    display: none;
  }

  .create-form__mobile-footer {
    display: flex;
    gap: 10px;
    flex-direction: row;
    margin-top: 16px;
  }

  .create-form__mobile-footer .create-form__btn--submit {
    flex: 1;
  }
}

/* Profile/Seller shared styles */
.page-profile { overflow-y: scroll; }
.page-profile .modal:not(.active) { box-shadow: none !important; }
/* Profile card */
.profile-card { background: var(--white); border-radius: var(--radius); padding: 15px; display: flex; gap: 20px; align-items: flex-start; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.profile-card__action { padding: 7px 14px 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--white); font-size: 13px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1; transition: all 0.15s; font-family: inherit; white-space: nowrap; flex-shrink: 0; }
.profile-card__action svg { display: block; flex-shrink: 0; }
.profile-card__action:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 768px) { .profile-card .profile-card__action { display: none; } }
.profile-card__avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--border-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); overflow: hidden; position: relative; }
.profile-card__avatar-edit { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); color: #fff; font-size: 10px; text-align: center; padding: 2px 0; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.profile-card__avatar:hover .profile-card__avatar-edit { opacity: 1; }
.profile-card__info { flex: 1; min-width: 0; }
.profile-card__name { font-size: 20px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.profile-card__since { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.profile-card__stats-list { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.profile-card__stats-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-secondary); line-height: 1; }
.profile-card__stats-item svg { color: var(--text-muted); flex-shrink: 0; display: block; }
.profile-card__stats-item span { display: flex; align-items: center; gap: 4px; line-height: 1; }
.profile-card__stats-item strong { color: var(--text-primary); font-weight: 600; }
#plToolbar { overflow: visible !important; }
.page-profile .listing-page__spec-value { color: var(--text-primary); }
.page-profile .listing-page__spec-label::after { content: ':'; }
/* Level badge in profile card */
.profile-card__level { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px 3px; border-radius: 10px; line-height: 12px; }
.profile-card__level svg { display: block; flex-shrink: 0; }
.profile-card__level--starter { background: #f3f4f6; color: #6b7280; }
.profile-card__level--silver { background: #f1f5f9; color: #64748b; }
.profile-card__level--gold { background: #fef3c7; color: #b45309; }
.profile-card__level--platinum { background: #ede9fe; color: #7c3aed; }
.profile-card__level--diamond { background: #e0f2fe; color: #0284c7; }
.profile-level-current { background: var(--white); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.profile-level-current__header { display: flex; align-items: center; gap: 12px; }
.profile-level-current__badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profile-level-current__badge--starter { background: #f3f4f6; color: #6b7280; }
.profile-level-current__badge--diamond { background: #e0f2fe; color: #0ea5e9; }
.profile-level-current__title { font-size: 15px; color: var(--text-primary); }
.profile-level-current__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.profile-level-progress { margin-top: 14px; }
.profile-level-progress__bar { height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.profile-level-progress__labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.profile-levels-list { display: flex; flex-direction: column; gap: 8px; }
.profile-level-item { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.profile-level-item--locked { opacity: 0.6; }
.profile-level-item__header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.profile-level-item__icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profile-level-item__icon--starter { background: #f3f4f6; color: #6b7280; }
.profile-level-item__icon--diamond { background: #e0f2fe; color: #0ea5e9; }
.profile-level-item__info { flex: 1; min-width: 0; }
.profile-level-item__name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; line-height: 1; }
.profile-level-item__desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.profile-level-item__status { color: var(--text-muted); flex-shrink: 0; }
.profile-level-item__status--done { color: var(--green); }
.profile-level-item__details { padding: 0 16px 14px; display: none; }
.profile-level-item.open .profile-level-item__details { display: block; }
.profile-level-item__section { margin-top: 10px; }
.profile-level-item__section-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.profile-level-item__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.profile-level-item__list li { font-size: 13px; color: var(--text-secondary); padding-left: 16px; position: relative; line-height: 1.4; }
.profile-level-item__list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
/* Rating */
.profile-rating { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.profile-rating__stars { display: flex; gap: 2px; color: #f59e0b; }
.profile-rating__text { font-size: 13px; color: var(--text-muted); }
/* Tabs */
.page-profile #profileTabs { margin-bottom: 12px; background: none; padding: 0; box-shadow: none; border: none; }
#profileTabs .modal__chip { opacity: 0; }
#profileTabs.ready .modal__chip { opacity: 1; transition: opacity 0.15s; }
.page-profile #profileTabs .modal__chip .search-filter-btn__count { background: var(--border); color: var(--text-muted); }
.page-profile #profileTabs .modal__chip--active .search-filter-btn__count { background: rgba(255,255,255,0.3); color: var(--white); }
.profile-tab-content { display: none; }
/* Review item */
.profile-review { display: flex; gap: 12px; padding: 16px; background: var(--white); border-bottom: 1px solid var(--border-light); }
.profile-review:last-child { border-bottom: none; }
.profile-review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--border-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
.profile-review__content { flex: 1; min-width: 0; }
.profile-review__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.profile-review__author { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.profile-review__date { font-size: 12px; color: var(--text-muted); }
.profile-review__stars { display: flex; gap: 2px; color: #f59e0b; margin: 4px 0; }
.profile-review__text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.profile-review__listing { font-size: 12px; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 4px; line-height: 1; }
.profile-reviews-wrap { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
/* Info items */
/* Empty state */
.profile-empty { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 12px; color: var(--text-muted); text-align: center; }
.profile-empty.active { display: flex; }
.profile-empty__title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.profile-empty__sub { font-size: 13px; color: var(--text-muted); }
/* Toolbar (reuse my-listings patterns) */
.page-profile .search-filters { padding: 0 0 10px; max-width: none; }
.page-profile .search-filters .dropdown__menu { min-width: 100%; }
@media (min-width: 769px) {
  .page-profile .search-filters { display: flex; gap: 8px; }
  .page-profile .search-filters .dropdown,
  .page-profile .search-filters .ml-search-wrap,
  .page-profile .search-filters .search-filter-btn { flex: 1; }
  .page-profile .search-filters .ml-search-wrap { flex: 2; display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px; height: 42px; transition: border-color 0.15s; }
  .page-profile .search-filters .ml-search-wrap:focus-within { border-color: var(--accent); }
  .page-profile .search-filters .ml-search-wrap svg { color: var(--text-muted); flex-shrink: 0; }
  .page-profile .search-filters .ml-search-wrap input { border: none; outline: none; background: none; font-size: 13px; color: var(--text-primary); flex: 1; min-width: 0; font-family: inherit; box-shadow: none; }
  .page-profile .search-filters .ml-search-wrap input::placeholder { color: var(--text-muted); opacity: 1; }
  .page-profile .search-filters .dropdown .dropdown__trigger { width: 100%; height: 42px; padding: 0 12px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; line-height: 1; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s; font-family: inherit; }
  .page-profile .search-filters .dropdown .dropdown__trigger:hover { border-color: var(--accent); }
  .page-profile .search-filters .dropdown .dropdown__trigger svg { flex-shrink: 0; }
  .page-profile .search-filters .dropdown .dropdown__trigger svg:last-child { margin-left: auto; }
}
@media (max-width: 768px) {
  .page-profile #profileTabs { margin: 10px 0; }
  .profile-card { flex-direction: row; align-items: center; padding: 14px; margin-top: 10px; gap: 12px; }
  .profile-card__avatar { width: 56px; height: 56px; }
  .profile-card__avatar svg { width: 28px; height: 28px; }
  .profile-card__name { font-size: 16px; }
  .page-profile .search-filters { display: flex; gap: 6px; flex-wrap: wrap; }
  .page-profile .search-filters .ml-search-wrap { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 10px; height: 36px; }
  .page-profile .search-filters .ml-search-wrap svg { color: var(--text-muted); flex-shrink: 0; }
  .page-profile .search-filters .ml-search-wrap input { border: none; outline: none; background: none; font-size: 13px; color: var(--text-primary); flex: 1; min-width: 0; font-family: inherit; box-shadow: none; }
  .page-profile .search-filters .ml-search-wrap input::placeholder { color: var(--text-muted); opacity: 1; }
  .page-profile .search-filters .dropdown .dropdown__trigger span,
  .page-profile .search-filters .dropdown .dropdown__trigger svg:last-child { display: none; }
  .page-profile .search-filters .dropdown .dropdown__trigger { padding: 0; width: 36px; height: 36px; min-width: 36px; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text-muted); }
}

/* ===========================  MY LISTINGS PAGE  =========================== */
    /* Tabs are now server-side — no client-side hiding */

    /* ===== MY LISTINGS: TOOLBAR OVERRIDE ===== */
    .page-my-listings .search-filters {
      padding: 0 0 10px;
      overflow: visible;
    }
    .page-my-listings .search-filters .dropdown__menu {
      min-width: 100%;
    }

    /* ===== ML: CATEGORY TREE DROPDOWN ===== */
    .ml-cat-toggle {
      color: var(--text-muted);
      transition: transform 0.2s;
    }
    .ml-cat-toggle.open {
      transform: rotate(180deg);
    }
    @media (min-width: 769px) {
      .page-my-listings .search-filters {
        display: flex;
        gap: 8px;
      }
      .page-my-listings .search-filters .dropdown,
      .page-my-listings .search-filters .ml-search-wrap,
      .page-my-listings .search-filters .search-filter-btn {
        flex: 1;
      }
      .page-my-listings .ml-search-wrap {
        flex: 2;
        height: 42px;
      }
      .page-my-listings .search-filters .dropdown .dropdown__trigger {
        width: 100%;
        height: 42px;
        padding: 0 14px;
        font-size: 13px;
        line-height: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--text-muted);
      }
      .page-my-listings .search-filters .dropdown .dropdown__trigger svg:last-child {
        margin-left: auto;
      }
      .page-my-listings #mlFilterBtn {
        height: 42px;
        padding: 0 14px;
        font-size: 13px;
        flex: 0 0 auto;
      }
    }

    /* ===== MY LISTINGS: BALANCE IN BREADCRUMB ===== */
    .my-listings__balance {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 14px;
    }
    .my-listings__balance svg {
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .my-listings__balance strong {
      color: var(--text-primary);
    }
    .my-listings__balance-btn {
      display: inline-flex;
      align-items: center;
      font-size: 13px;
      color: var(--white) !important;
      font-weight: 500;
      text-decoration: none;
      padding: 8px 18px;
      border-radius: var(--radius);
      background: var(--accent);
      transition: background 0.15s;
      line-height: 1;
    }
    .my-listings__balance-btn:hover {
      background: var(--accent-hover);
      color: var(--white) !important;
    }

    /* ===== ML: SEARCH IN TOOLBAR ===== */
    .ml-search-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0 10px;
      height: 36px;
      min-width: 200px;
      transition: border-color 0.15s;
    }
    .ml-search-wrap:focus-within {
      border-color: var(--accent);
    }
    .ml-search-wrap svg {
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .ml-search-wrap .search-box__input {
      padding: 0;
      height: auto;
      border: none;
      font-size: 13px;
      color: var(--text-primary);
      background: transparent;
      flex: 1;
      min-width: 0;
      outline: none;
      box-shadow: none;
    }
    .ml-search-wrap .search-box__input::placeholder {
      color: var(--text-muted);
      opacity: 1;
    }

    /* ===== ML: CARD EXTENDED ===== */
    .ml-card {
      display: flex;
      gap: 16px;
      background: var(--white);
      border-radius: var(--radius);
      border: 1px solid var(--border-light);
      padding: 14px;
      transition: box-shadow 0.2s;
    }
    .ml-card:hover {
      box-shadow: var(--shadow-md);
    }
    .ml-card__photo {
      width: 160px;
      min-width: 160px;
      height: 120px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      position: relative;
    }
    .ml-card__photo::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
      background-size: 800px 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
    }
    .ml-card__photo.loaded::after { display: none; }
    .ml-card__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .ml-card__photo-id {
      position: absolute;
      bottom: 4px;
      left: 4px;
      font-size: 10px;
      color: var(--white);
      background: rgba(0,0,0,0.5);
      padding: 1px 5px;
      border-radius: 3px;
      line-height: 1;
    }
    .ml-card__content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .ml-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .ml-card__title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ml-card__title a {
      color: inherit;
      text-decoration: none;
    }
    .ml-card__title a:hover {
      color: var(--accent);
    }
    .ml-card__price {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ml-card__cat {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ml-card__cat-sep::before {
      content: '•';
    }
    .ml-card__location {
      font-size: 12px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 4px;
      line-height: 1;
    }
    .ml-card__location svg {
      flex-shrink: 0;
      color: var(--text-muted);
    }
    .ml-card__row {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .ml-card__date {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 4px;
      line-height: 1;
    }
    .ml-card__date svg {
      flex-shrink: 0;
    }
    .ml-card__stats {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .ml-card__stats-btns {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }
    .ml-card__stat {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1;
    }
    .ml-card__stat svg {
      flex-shrink: 0;
    }
    .ml-card__stat-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--white);
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      font-family: inherit;
      line-height: 1;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .ml-card__stat-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .ml-card__stat-btn svg {
      flex-shrink: 0;
    }
    .ml-card__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 5px;
      gap: 8px;
    }
    .ml-card__actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ml-card__action {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 8px 18px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--white);
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
      line-height: 1;
      white-space: nowrap;
    }
    .ml-card__action:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .ml-card__action--danger {
      color: var(--text-muted);
    }
    .ml-card__action--danger:hover {
      border-color: #ef4444;
      color: #ef4444;
    }
    .ml-card__action--primary {
      background: var(--accent);
      color: var(--white);
      border-color: var(--accent);
    }
    .ml-card__action--primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      color: var(--white);
    }
    .ml-card__action--raise {
      background: #f0fdf4;
      color: #16a34a;
      border-color: #bbf7d0;
    }
    .ml-card__action--raise:hover {
      background: #dcfce7;
      border-color: #86efac;
      color: #16a34a;
    }
    .ml-card__action--promote {
      background: #FFF3E0;
      color: #E65100;
      border-color: #FFE0B2;
    }
    .ml-card__action--promote:hover {
      background: #FFE0B2;
      border-color: #FFB74D;
      color: #E65100;
    }
    .ml-card__promoted {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #E65100;
      background: #FFF3E0;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      line-height: 1;
    }

    .ml-card__boost {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 500;
      color: var(--green);
      background: rgba(34,197,94,0.1);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      line-height: 1;
      margin-left: 8px;
    }
    .ml-card__boost svg { flex-shrink: 0; }
    .ml-card__boost span { line-height: 12px; }

    /* ===== MY LISTINGS: TABS ===== */
    .page-my-listings #myListingsTabs {
      margin-bottom: 10px;
      background: none;
      padding: 0;
      box-shadow: none;
      border: none;
    }
    .page-my-listings #myListingsTabs .search-filter-btn__count {
      background: var(--border-light);
      color: var(--text-muted);
    }
    .page-my-listings #myListingsTabs .modal__chip--active .search-filter-btn__count {
      background: rgba(255,255,255,0.3);
      color: var(--white);
    }
    @media (max-width: 768px) {
      .page-my-listings #myListingsTabs {
        margin-top: 10px;
      }
    }

    /* ===== MY LISTINGS: EMPTY STATE ===== */
    .my-listings__empty {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      gap: 12px;
      color: var(--text-muted);
      text-align: center;
    }
    .my-listings__empty.active {
      display: flex;
    }
    .my-listings__empty-icon svg {
      width: 48px;
      height: 48px;
      stroke: var(--border);
    }
    .my-listings__empty-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .my-listings__empty-sub {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* ===== CARD STATUS BADGES ===== */
    .listing-card__status-badge {
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      z-index: 2;
    }
    .listing-card__status-badge--pending { background: #f59e0b; }
    .listing-card__status-badge--draft { background: #6b7280; }
    .listing-card__status-badge--rejected { background: #ef4444; }

    /* Archived card style */
    .listing-card[data-status="archived"] .listing-card__img img { opacity: 0.6; }
    .listing-card[data-status="archived"] .listing-card__price { color: var(--text-muted); }

    /* ===== MOBILE RESPONSIVE ===== */
    @media (max-width: 768px) {
      .my-listings__balance {
        display: none;
      }
      .page-my-listings .search-filters {
        display: flex;
        flex-wrap: nowrap;
      }
      .page-my-listings #mlFilterBtn span,
      .page-my-listings #mlFilterBtn svg:last-child {
        display: none;
      }
      .page-my-listings #mlFilterBtn {
        padding: 0;
        width: 36px;
        height: 36px;
        min-width: 36px;
        justify-content: center;
      }
      .page-my-listings .ml-search-wrap {
        flex: 1;
        display: flex;
        min-width: 0;
      }
      .page-my-listings .search-filters .dropdown .dropdown__trigger span,
      .page-my-listings .search-filters .dropdown .dropdown__trigger svg:last-child {
        display: none;
      }
      .page-my-listings .search-filters .dropdown .dropdown__trigger {
        padding: 0;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
      }
      .ml-card {
        flex-direction: column;
        gap: 10px;
        padding: 0;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--border-light);
        padding-bottom: 14px;
      }
      .ml-card__photo {
        width: 100%;
        min-width: 0;
        height: 0;
        padding-bottom: 65%;
        position: relative;
      }
      .ml-card__photo img {
        position: absolute;
        top: 0;
        left: 0;
      }
      .ml-card__content {
        padding: 0 10px;
      }
      .ml-card__bottom {
        flex-direction: column;
        gap: 5px;
      }
      .ml-card__stats {
        flex-wrap: wrap;
      }
      .ml-card__stats-btns {
        margin-left: 0;
        width: 100%;
        margin-top: 4px;
        display: flex;
      }
      .ml-card__stats-btns .ml-card__stat-btn {
        padding: 10px 14px;
        font-size: 13px;
      }
      .ml-card__stats-btns .ml-card__stat-btn:first-child {
        flex: 3;
        justify-content: center;
      }
      .ml-card__stats-btns .ml-card__stat-btn:last-child {
        flex: 1;
        justify-content: center;
        min-width: 0;
      }
      .ml-card__actions {
        width: 100%;
        flex-wrap: wrap;
      }
      .ml-card__action {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 6px;
        font-size: 13px;
      }
      .ml-card__promo-btns { width: 100%; }
      .ml-card__promo-btns .ml-card__action { flex: 1; justify-content: center; }
    }

/* ===========================
   SEARCH-AUTO PAGE
   =========================== */
/* Auto card - search-auto page specific */
.page-search-auto .auto-card { margin-bottom: 10px; display: block; }
/* Search-auto unique styles (plate, price-uah) — rest inherits from global auto-card */
.auto-card__plate { position: absolute; bottom: 8px; left: 8px; display: flex; align-items: center; gap: 6px; }
.auto-card__plate-item { display: flex; align-items: center; gap: 0; background: #fff; border: 2px solid #1a1a2e; border-radius: 3px; font-size: 13px; font-weight: 700; color: #1a1a2e; letter-spacing: 1.5px; overflow: hidden; font-family: 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; }
.auto-card__plate-flag-wrap { background: #0057b8; padding: 3px 4px; display: flex; align-items: center; justify-content: center; align-self: stretch; }
.auto-card__plate-flag { width: 14px; height: 10px; display: block; }
.auto-card__plate-ua { color: #fff; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.auto-card__plate-text { padding: 2px 8px; }
.auto-card__price-uah { font-size: 13px; font-weight: 400; color: var(--text-muted); }

/* Desktop - list view */
@media (min-width: 768px) {
  .page-search-auto .auto-card { display: flex; gap: 0; }
  .page-search-auto .auto-card__gallery { width: 260px; min-width: 260px; align-self: stretch; }
  .page-search-auto .auto-card__gallery-dots { display: none; }
  .page-search-auto .auto-card__body { flex: 1; padding: 14px; display: flex; flex-direction: column; }
  .page-search-auto .auto-card__title { font-size: 17px; }
  .page-search-auto .auto-card__price { font-size: 17px; margin-bottom: 8px; }
  .page-search-auto .auto-card__meta { margin-top: auto; }
  .page-search-auto .listing-card__fav { position: absolute; top: 12px; right: 12px; z-index: 3; }
}

/* Skeleton for auto cards */
.auto-card.skeleton .auto-card__gallery { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%); background-size: 800px 100%; animation: shimmer 1.5s ease-in-out infinite; }
.auto-card.skeleton .auto-card__gallery img { opacity: 0; }
.auto-card.skeleton .auto-card__title,
.auto-card.skeleton .auto-card__subtitle,
.auto-card.skeleton .auto-card__price,
.auto-card.skeleton .auto-card__specs,
.auto-card.skeleton .auto-card__tags,
.auto-card.skeleton .auto-card__desc,
.auto-card.skeleton .auto-card__meta { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%); background-size: 800px 100%; animation: shimmer 1.5s ease-in-out infinite; color: transparent !important; border-radius: 4px; height: 14px; overflow: hidden; }
.auto-card.skeleton .auto-card__meta svg { display: none; }
.auto-card.skeleton .auto-card__title { height: 18px; width: 70%; }
.auto-card.skeleton .auto-card__subtitle { height: 14px; width: 50%; }
.auto-card.skeleton .auto-card__price { height: 20px; width: 40%; }
.auto-card.skeleton .auto-card__specs { height: 16px; width: 80%; }
.auto-card.skeleton .auto-card__tags { height: 0; margin: 0; }
.auto-card.skeleton .auto-card__desc { height: 0; margin: 0; }
.auto-card.skeleton .auto-card__badges,
.auto-card.skeleton .auto-card__plate,
.auto-card.skeleton .listing-card__fav,
.auto-card.skeleton .auto-card__gallery-dots { display: none; }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* Sticky bottom bar mobile */
.page-search-auto #viewDropdown { display: none !important; }
.page-search-auto .pagination { margin-top: 14px; padding: 16px 0; }
@media (max-width: 767px) {
  .page-search-auto .listings-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .page-search-auto .auto-card { display: block; }
  .page-search-auto .auto-card__gallery { width: 100%; aspect-ratio: 16/10; height: auto; }
}
@media (min-width: 768px) {
  .page-search-auto .listings-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}
.page-search-auto .breadcrumb { display: none !important; }

/* Breadcrumb */

/* ===========================
   REFERRAL PAGE
   =========================== */
.ref-card { background: var(--white); border-radius: var(--radius); padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 10px; }
.ref-card__title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.ref-link { display: flex; gap: 8px; margin-bottom: 10px; }
.ref-link__input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text-primary); background: var(--bg); font-family: inherit; }
.ref-link__copy { padding: 10px 16px; border: none; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.ref-share { display: flex; gap: 8px; margin-top: 10px; }
.ref-share__btn { width: 36px; height: 36px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
.ref-share__btn--tg { background: #26a5e4; }
.ref-share__btn--viber { background: #7360f2; }
.ref-share__btn--wa { background: #25d366; }
.ref-share__btn--fb { background: #1877f2; }

.ref-balance { background: linear-gradient(135deg, var(--accent) 0%, #6366f1 100%); border-radius: var(--radius); padding: 20px; margin-bottom: 10px; color: #fff; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ref-balance__amount { font-size: 32px; font-weight: 700; }
.ref-balance__label { font-size: 13px; opacity: 0.8; }
.ref-balance__btn { padding: 8px 16px; background: rgba(255,255,255,0.2); color: #fff; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; backdrop-filter: blur(4px); }
.ref-balance__btn:hover { background: rgba(255,255,255,0.3); }

.ref-level { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-left: 3px solid; margin-bottom: 6px; border-radius: 0 var(--radius) var(--radius) 0; background: var(--white); }
.ref-level--1 { border-color: var(--green, #22c55e); background: rgba(34,197,94,0.04); }
.ref-level--2 { border-color: #3b82f6; background: rgba(59,130,246,0.04); }
.ref-level--3 { border-color: #8b5cf6; background: rgba(139,92,246,0.04); }
.ref-level__info { flex: 1; }
.ref-level__name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.ref-level__sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.ref-level__people { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ref-level__bonus { font-size: 13px; font-weight: 600; flex-shrink: 0; }
.ref-level--1 .ref-level__bonus { color: var(--green, #22c55e); }
.ref-level--2 .ref-level__bonus { color: #3b82f6; }
.ref-level--3 .ref-level__bonus { color: #8b5cf6; }
.ref-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border-light); margin: 6px -15px -15px; }
.ref-total strong { color: var(--text-primary); }

.ref-steps { display: flex; gap: 12px; }
.ref-step { flex: 1; text-align: center; padding: 14px 10px; background: var(--bg); border-radius: var(--radius); }
.ref-step__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.ref-step__title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.ref-step__sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.ref-rates { display: flex; flex-direction: column; gap: 6px; }
.ref-rate { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; }
.ref-rate--1 { background: rgba(34,197,94,0.08); color: var(--green, #22c55e); }
.ref-rate--2 { background: rgba(59,130,246,0.08); color: #3b82f6; }
.ref-rate--3 { background: rgba(139,92,246,0.08); color: #8b5cf6; }

.ref-spend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ref-spend__item { padding: 12px; border-radius: var(--radius); background: var(--bg); text-align: center; }
.ref-spend__name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.ref-spend__price { font-size: 15px; font-weight: 700; color: var(--accent); }

.ref-user { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-light); }
.ref-user:last-child { border-bottom: none; }
.ref-user__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--border-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
.ref-user__info { flex: 1; min-width: 0; }
.ref-user__name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.ref-user__date { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.ref-user__level { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.ref-user__level--1 { background: rgba(34,197,94,0.1); color: var(--green); }
.ref-user__level--2 { background: rgba(59,130,246,0.1); color: #3b82f6; }
.ref-user__level--3 { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.ref-user__bonus { font-size: 13px; font-weight: 600; color: var(--green); flex-shrink: 0; margin-left: 6px; }

@media (max-width: 767px) {
  .ref-card:first-child { margin-top: 10px; }
  .ref-steps { flex-direction: column; }
  .ref-balance { flex-direction: column; align-items: flex-start; }
  .ref-balance__btn { width: 100%; text-align: center; }
  .ref-spend { grid-template-columns: 1fr 1fr; }
}

/* ===========================
   BUSINESS PAGE
   =========================== */
.biz-tab-content { display: none; }
.page-business { overflow-y: scroll; }
.page-business .modal:not(.active) { box-shadow: none !important; }
.page-business #bizTabs { margin-bottom: 10px; background: none; padding: 0; box-shadow: none; border: none; }
.biz-card { background: var(--white); border-radius: var(--radius); padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 10px; overflow: hidden; }
.biz-numbered { list-style: none; padding: 0; margin: 0; counter-reset: biz-num; display: flex; flex-direction: column; gap: 12px; }
.biz-numbered li { counter-increment: biz-num; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-primary); line-height: 1.5; }
.biz-numbered li::before { content: counter(biz-num); min-width: 22px; height: 22px; border-radius: 4px; background: var(--border-light); color: var(--text-muted); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 4px; }
.biz-sub-list { list-style: none; padding: 0; margin: 10px 0 0 0; counter-reset: biz-sub; display: flex; flex-direction: column; gap: 8px; }
.biz-sub-list li { counter-increment: biz-sub; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.biz-sub-list li::before { content: counter(biz-num) "." counter(biz-sub); min-width: 22px; height: 22px; border-radius: 4px; background: var(--border-light); color: var(--text-muted); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 4px; }
.biz-link, .biz-numbered a, .biz-sub-list a { display: inline !important; padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; color: var(--accent) !important; text-decoration: none !important; font-size: inherit !important; font-weight: inherit !important; }
.biz-link:hover, .biz-numbered a:hover, .biz-sub-list a:hover { text-decoration: underline !important; }

/* Plan cards (selectable) */
.biz-plans { display: flex; flex-direction: column; gap: 8px; }
.biz-plan { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--border-light); border-radius: var(--radius); cursor: pointer; transition: all 0.15s; }
.biz-plan:hover:not(.biz-plan--active) { border-color: var(--border); }
.biz-plan--active, .biz-plan--active:hover { border-color: var(--accent); background: var(--accent-light, #ebf0ff); }
.biz-plan__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.biz-plan__info { flex: 1; min-width: 0; }
.biz-plan__name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.biz-plan__desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.biz-plan__price { font-size: 15px; font-weight: 600; color: var(--text-primary); flex-shrink: 0; }

/* Feature row */
.biz-feature { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.biz-feature__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.biz-feature__text { flex: 1; min-width: 0; }
.biz-feature__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.biz-feature__desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* FAQ accordion */
.biz-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.15s; }
.biz-item:last-child { border-bottom: none; }
.biz-item:hover { background: var(--bg); }
.biz-item__left { display: flex; align-items: center; gap: 10px; }
.biz-item__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
.biz-item__title { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.biz-answer { padding: 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; display: none; border-bottom: 1px solid var(--border-light); background: var(--bg); border-top: 1px solid var(--border-light); }
.biz-item.open + .biz-answer { display: block; }
.biz-item.open { border-bottom: none; }
.biz-item__chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s; }
.biz-item.open .biz-item__chevron { transform: rotate(180deg); }

/* Code block */
.biz-code { background: #1e1e2e; color: #cdd6f4; border-radius: var(--radius); padding: 14px; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; margin: 10px 0; }

@media (max-width: 768px) {
  .page-business #bizTabs { margin-top: 10px; }
  .page-business #bizTabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .page-business #bizTabs::-webkit-scrollbar { display: none; }
  .page-business #bizTabs .modal__chip { white-space: nowrap; flex-shrink: 0; }
  .biz-plan { padding: 12px; }
}

/* ===========================
   WALLET PAGE
   =========================== */
.wallet-card { background: var(--white); border-radius: var(--radius); padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 10px; }
.wallet-balances { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.wallet-balances .wallet-card { flex: 1; margin-bottom: 0; min-width: 0; }
.wallet-balance-btns { display: none; }
@media (max-width: 767px) {
  .wallet-balances .wallet-card { padding: 12px; }
  .wallet-balances .wallet-balance__amount { font-size: 22px; }
  .wallet-balance-btn--desktop { display: none !important; }
  .wallet-balance-btns { display: flex; gap: 8px; width: 100%; }
  .wallet-balance-btns .btn,
  .wallet-balance-btns a.btn { flex: 1; display: inline-flex; justify-content: center; align-items: center; font-size: 13px; line-height: 1; }
  .wallet-balance-btns .btn span,
  .wallet-balance-btns a.btn span { line-height: 14px; }
}
.wallet-balance { display: flex; align-items: center; justify-content: space-between; }
.wallet-balance__amount { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.wallet-balance__currency { font-size: 16px; color: var(--text-muted); margin-left: 4px; }
.wallet-balance__actions { display: flex; gap: 8px; }
#walletTxList.wallet-card { padding: 0; overflow: hidden; }
.wallet-tx { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-light); transition: background 0.15s; }
.wallet-tx:last-child { border-bottom: none; }
.wallet-tx:hover { background: var(--bg); cursor: pointer; }
.wallet-tx__icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wallet-tx__icon--in { background: var(--green-light, #dcfce7); color: var(--green, #22c55e); }
.wallet-tx__icon--out { background: #fee2e2; color: #ef4444; }
.wallet-tx__icon--promo { background: var(--accent-light); color: var(--accent); }
.wallet-tx__info { flex: 1; min-width: 0; }
.wallet-tx__title { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.wallet-tx__date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.wallet-tx__amount { font-size: 14px; font-weight: 600; flex-shrink: 0; }
.wallet-tx__amount--plus { color: var(--green, #22c55e); }
.wallet-tx__amount--minus { color: #ef4444; }
.wallet-promo { display: flex; gap: 8px; }
.wallet-promo input { flex: 1; }
.wallet-empty { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 8px; color: var(--text-muted); text-align: center; }
.wallet-empty.active { display: flex; }
.page-wallet .modal--center .modal__body { padding: 0 !important; }
.page-wallet .modal--center .modal__body > * { padding: 0 10px; }
.page-wallet .modal--center .modal__body > *:last-child { padding: 0 10px 10px; }
.page-wallet .modal .modal__body { overflow-x: hidden; }
.topup-method--active { border-color: var(--accent) !important; background: var(--accent-light, #ebf0ff) !important; }
.topup-method .topup-check { display: none; }
.topup-method--active .topup-check { display: block; }
.page-wallet { overflow-y: scroll; }
.page-wallet .modal:not(.active) { box-shadow: none !important; }
.page-wallet #walletTabs { margin-bottom: 12px; background: none; padding: 0; box-shadow: none; border: none; }
@media (max-width: 768px) {
  #walletBalanceCard { margin-top: 10px; }
  .page-wallet .wallet-balance { flex-direction: row; align-items: center; gap: 12px; }
  .page-wallet .wallet-balance__actions { width: auto; }
  .page-wallet .wallet-balance__actions .btn { flex: 1; }
  .page-wallet #walletTabs { margin: 10px 0; }
}

/* ===========================
   FAVORITES PAGE
   =========================== */
.fav-tab-content { display: none; }
.page-favorites { overflow-y: scroll; }
.page-favorites .modal:not(.active) { box-shadow: none !important; }
.page-favorites #favTabs { margin-bottom: 12px; background: none; padding: 0; box-shadow: none; border: none; }
.page-favorites #favTabs .modal__chip .search-filter-btn__count { background: var(--border); color: var(--text-muted); }
.page-favorites #favTabs .modal__chip--active .search-filter-btn__count { background: rgba(255,255,255,0.3); color: var(--white); }
.page-favorites .fav-search-item__delete,
.page-favorites .fav-author-item__delete { background: var(--border-light); }
@media (max-width: 768px) {
  .page-favorites #favTabs { margin: 10px 0; }
  .fav-search-item__count { display: none !important; }
  .fav-search-item__count-mobile { display: inline !important; color: var(--green) !important; font-weight: 500; }
}
.fav-empty { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 12px; color: var(--text-muted); text-align: center; }
.fav-empty.active { display: flex; }
.fav-empty__title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.fav-empty__sub { font-size: 13px; color: var(--text-muted); }
/* Saved search item */
.fav-search-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--white); border-bottom: 1px solid var(--border-light); transition: background 0.15s; }
.fav-search-item:last-child { border-bottom: none; }
.fav-search-item:hover { background: var(--border-light); }
#favTabSearches { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.fav-search-item__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.fav-search-item__info { flex: 1; min-width: 0; }
.fav-search-item__title { font-size: 14px; font-weight: 500; color: var(--text-primary); display: block; }
.fav-search-item__sub { font-size: 12px; color: var(--text-muted); display: block; margin-top: 2px; }
.fav-search-item__new-badge { display: inline-block; font-size: 12px; color: var(--white); background: var(--green); font-weight: 500; white-space: nowrap; padding: 4px 10px; border-radius: 6px; line-height: 1; margin-top: 6px; }
.fav-search-item__new-badge--empty { background: var(--border-light); color: var(--text-muted); }
.auto-card__price-old { font-size: 13px; color: var(--text-muted); text-decoration: line-through; font-weight: 400; margin-left: 8px; }
.fav-search-item, .fav-author-item { text-decoration: none; color: inherit; }
.fav-search-item__delete { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.fav-search-item__delete:hover { background: #fef2f2; color: var(--pink); }
/* Saved author item */
.fav-author-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--white); border-bottom: 1px solid var(--border-light); transition: background 0.15s; }
.fav-author-item:last-child { border-bottom: none; }
.fav-author-item:hover { background: var(--border-light); }
#favTabAuthors { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.fav-author-item__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--border-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); overflow: hidden; }
.fav-author-item__info { flex: 1; min-width: 0; }
.fav-author-item__name { font-size: 14px; font-weight: 500; color: var(--text-primary); display: block; }
.fav-author-item__sub { font-size: 12px; color: var(--text-muted); display: block; margin-top: 2px; }
.fav-author-item__delete { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.fav-author-item__delete:hover { background: #fef2f2; color: var(--pink); }
/* History card overlay delete */
.listing-card__delete { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); border-radius: 50%; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 0; transition: opacity 0.15s; }
.auto-card:hover .listing-card__delete { opacity: 1; }
@media (max-width: 768px) { .listing-card__delete { opacity: 1; } }

/* ===========================
   HELP PAGE
   =========================== */
.help-tab-content { display: none; }
.page-help { overflow-y: scroll; }
.page-help .modal:not(.active) { box-shadow: none !important; }
.page-help #helpTabs { margin-bottom: 10px; background: none; padding: 0; box-shadow: none; border: none; }
.help-card { background: var(--white); border-radius: var(--radius); padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 10px; overflow: hidden; }
.help-search { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px; height: 42px; margin-bottom: 10px; }
.help-search:focus-within { border-color: var(--accent); }
.help-search svg { color: var(--text-muted); flex-shrink: 0; }
.help-search input { border: none; outline: none; background: none; font-size: 13px; color: var(--text-primary); flex: 1; font-family: inherit; }
.help-search input::placeholder { color: var(--text-muted); }
.help-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.15s; }
.help-item:last-child { border-bottom: none; }
.help-item:hover { background: var(--bg); }
.help-item__left { display: flex; align-items: center; gap: 10px; }
.help-item__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
.help-item__title { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.help-answer { padding: 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; display: none; border-bottom: 1px solid var(--border-light); background: var(--bg); border-top: 1px solid var(--border-light); }
.help-item.open + .help-answer { display: block; }
.help-item.open { border-bottom: none; }
.help-item__chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s; }
.help-item.open .help-item__chevron { transform: rotate(180deg); }
.help-numbered { list-style: none; padding: 0; margin: 0; counter-reset: help-num; display: flex; flex-direction: column; gap: 12px; }
.help-numbered li { counter-increment: help-num; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-primary); line-height: 1.5; }
.help-numbered li::before { content: counter(help-num); min-width: 22px; height: 22px; border-radius: 4px; background: var(--border-light); color: var(--text-muted); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 4px; }
.help-link, .help-numbered a, .help-sub-list a { display: inline !important; padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; color: var(--accent) !important; text-decoration: none !important; font-size: inherit !important; font-weight: inherit !important; }
.help-link:hover, .help-numbered a:hover, .help-sub-list a:hover { text-decoration: underline !important; }
.help-sub-list { list-style: none; padding: 0; margin: 10px 0 0 0; counter-reset: help-sub; display: flex; flex-direction: column; gap: 8px; }
.help-sub-list li { counter-increment: help-sub; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.help-sub-list li::before { content: counter(help-num) "." counter(help-sub); min-width: 22px; height: 22px; border-radius: 4px; background: var(--border-light); color: var(--text-muted); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 4px; }
.help-contact { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-light); transition: background 0.15s; text-decoration: none; color: inherit; }
.help-contact:last-child { border-bottom: none; }
.help-contact:hover { background: var(--bg); }
@media (max-width: 768px) {
  .help-search { margin-top: 10px; }
  .page-help #helpTabs { margin-top: 10px; }
  .page-help #helpTabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .page-help #helpTabs::-webkit-scrollbar { display: none; }
  .page-help #helpTabs .modal__chip { white-space: nowrap; flex-shrink: 0; }
}

/* ===========================
   SETTINGS PAGE
   =========================== */
.settings-card { background: var(--white); border-radius: var(--radius); padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 10px; }
.settings-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-light); transition: background 0.15s; }
.settings-item:last-child { border-bottom: none; }
.settings-item:hover { background: var(--bg); }
.settings-item__left { display: flex; align-items: center; gap: 10px; }
.settings-item__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
.settings-item__info { }
.settings-item__title { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.settings-item__sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.settings-item__right { flex-shrink: 0; }
.settings-toggle { position: relative; width: 44px; min-width: 44px; height: 24px; border-radius: 12px; background: var(--border); cursor: pointer; transition: background 0.2s; border: none; padding: 0; }
.settings-toggle.active { background: var(--accent); }
.settings-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.settings-toggle.active::after { transform: translateX(20px); }
.settings-link { font-size: 13px; color: var(--accent); font-weight: 500; text-decoration: none; }
.settings-danger { color: #ef4444; }
.settings-toggle[disabled] { opacity: 0.4; cursor: not-allowed; }
.page-settings .modal__body .create-form__field:first-child { margin-top: 10px; }
.page-settings .modal__list-item svg { visibility: hidden; }
.page-settings .modal__list-item--selected svg { visibility: visible; }
.page-settings { overflow-y: scroll; }
/* Tab flash fix */
#settingsTabs .modal__chip { opacity: 0; }
#settingsTabs.ready .modal__chip { opacity: 1; transition: opacity 0.15s; }
.page-settings #settingsTabs { margin-bottom: 10px; background: none; padding: 0; box-shadow: none; border: none; }
@media (max-width: 768px) {
  .page-settings #settingsTabs { margin-top: 10px; }
}

/* ===========================
   PROMOTE PAGE
   =========================== */
.promote-card { background: var(--white); border-radius: var(--radius); padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 10px; }
.promote-listing { display: flex; gap: 12px; align-items: center; }
.promote-listing__img { width: 60px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.promote-listing__info { flex: 1; min-width: 0; }
.promote-listing__title { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promote-listing__price { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.promote-plans { display: flex; flex-direction: column; gap: 8px; }
.promote-plan { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--border-light); border-radius: var(--radius); cursor: pointer; transition: all 0.15s; }
.promote-plan:hover:not(.promote-plan--active) { border-color: var(--border); }
.promote-plan--active, .promote-plan--active:hover { border-color: var(--accent); background: var(--accent-light, #ebf0ff); }
.promote-plan__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.promote-plan__info { flex: 1; min-width: 0; }
.promote-plan__name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.promote-plan__desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.promote-plan__price { font-size: 15px; font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.promote-duration { display: flex; gap: 6px; margin-top: 10px; }
.promote-summary { display: flex; align-items: center; justify-content: space-between; }
.promote-summary__total { font-size: 18px; font-weight: 700; color: var(--text-primary); }
@media (max-width: 768px) {
  .promote-plan { padding: 12px; }
}

/* ===========================
   404 PAGE
   =========================== */
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 200px); text-align: center; padding: 40px 20px; }
.error-page__code { font-size: 120px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -4px; }
.error-page__title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-top: 10px; }
.error-page__desc { font-size: 14px; color: var(--text-muted); margin-top: 8px; max-width: 400px; line-height: 1.5; }
.error-page__btn { margin-top: 20px; }
.error-page__links { display: flex; gap: 16px; margin-top: 16px; font-size: 13px; }
.error-page__links a { color: var(--accent); text-decoration: none; }
.error-page__links a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .error-page__code { font-size: 80px; }
  .error-page__title { font-size: 18px; }
}