:root {
  --bg: #ffffff;
  --ink: #222222;
  --ink-soft: #717171;
  --border: #dddddd;
  --border-light: #ebebeb;
  --accent: #EE6F44;
  --accent-dark: #A74E30;
  --accent-soft: #FDEEE9;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.18);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 6px 16px rgba(0,0,0,0.08);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* ---------- Top bar ---------- */

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 1200;
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  flex-wrap: wrap;
  row-gap: 10px;
}

/* On the map page the search pill must stay visually centered on the page
   no matter how wide the logo/nav group on the left or the CTA button on
   the right happen to be — a 3-column grid (1fr / auto / 1fr) guarantees
   that regardless of the side content's widths, unlike flex + margin:auto
   which only centers within the leftover space between unequal siblings. */
.topbar-inner--3col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.topbar-inner--3col .topbar-right {
  justify-self: end;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.topbar-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-org-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-grey {
  border: none;
  background: var(--border-light);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}

.btn-grey:hover { background: var(--border); }
.btn-grey:active { transform: scale(0.97); }

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-logo {
  height: 52px;
  width: auto;
  flex-shrink: 0;
}

.brand-name {
  font-size: 21px;
  font-weight: 800;
  color: #000;
  letter-spacing: -0.02em;
}

.brand-dot { color: #000; }

/* Pill the same height as the org-logo circles next to it (.topbar-org-btn). */
.apie-link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 0 0 1px var(--border-light);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.apie-link:hover { transform: scale(1.04); }

.apie-link-mobile { display: none; }

.search-pill {
  width: 100%;
  max-width: 560px;
  justify-self: center;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
  background: #fff;
}

.search-pill:hover, .search-pill:focus-within {
  box-shadow: var(--shadow-md);
}

.search-seg {
  flex: 1;
  padding: 8px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.seg-what {
  border-right: 1px solid var(--border);
}

.search-seg label {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 1px;
}

.search-seg input {
  border: none;
  outline: none;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  width: 100%;
  padding: 0;
}

.search-seg input::placeholder { color: var(--ink-soft); }

.seg-placeholder {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.city-select {
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 400;
  color: var(--ink);
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23717171'><path d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23717171' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right center / 14px;
  width: 100%;
  padding: 0 18px 0 0;
  cursor: pointer;
}

.search-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 6px 6px 6px 0;
  align-self: center;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

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

.add-listing-btn {
  border: none;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
  display: inline-block;
}

.add-listing-btn:hover { background: #262626; }
.add-listing-btn:active { transform: scale(0.97); }

.add-listing-btn-round {
  width: 40px;
  height: 40px;
  border: none;
  background: #000;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}

.add-listing-btn-round:hover { background: #262626; }
.add-listing-btn-round:active { transform: scale(0.94); }

/* ---------- Generic buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: #000;
  color: #fff;
}

.btn-primary:hover { background: #262626; }

.btn-outline {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline:hover { background: #f7f7f7; }

/* ---------- Secondary page shell ---------- */

.page-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Typography for the "Apie" modal's content (see apie-modal.js) — kept in
   the DOM at page load (not injected only on click) so it's still crawlable
   for SEO/GEO, just out of the way of normal browsing. */
.seo-intro h1 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.seo-intro h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 32px 0 8px;
}

.seo-intro p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.page-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.page-subtitle {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 28px;
  line-height: 1.5;
}

.info-banner {
  background: #fff6e0;
  color: #7a5c14;
  border: 1px solid #f0dfa8;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 28px;
  line-height: 1.5;
}

.promo-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(15, 106, 117, 0.08);
  border: 1px solid rgba(15, 106, 117, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 28px;
}

.promo-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}

.promo-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.promo-card-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---------- Forms ---------- */

.form-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.form-group .hint {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 4px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23717171'><path d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23717171' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
  padding-right: 32px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.form-note {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 6px;
}

.form-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.form-success {
  display: none;
  background: #eefaf1;
  border: 1px solid #bfe8cb;
  color: #1e6b34;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-top: 16px;
}

.form-success.show { display: block; }

.form-group input[type="file"] {
  width: 100%;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}

.file-hint {
  font-size: 12px;
  color: var(--accent-dark);
  font-weight: 600;
  margin-top: 6px;
}

.photo-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.photo-preview-thumb {
  position: relative;
  width: 64px;
  height: 64px;
}

.photo-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.photo-preview-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ---------- Full-screen photo gallery (shared: map popups, item sheet,
   admin pending queue + edit modal) ---------- */

.gallery-trigger { cursor: pointer; }

.photo-count-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.vinted-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.open { display: flex; }

.lightbox-track {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.lightbox-track.zoom-active { overflow-x: hidden; }

.lightbox-track::-webkit-scrollbar { display: none; }

.lightbox-img-wrap {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.lightbox-img-wrap.zoomed {
  overflow: auto;
  cursor: zoom-out;
  align-items: flex-start;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
}

.lightbox-img-wrap::-webkit-scrollbar { display: none; }

.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.lightbox-img-wrap.zoomed .lightbox-img {
  width: 250%;
  height: 250%;
  max-width: none;
}

.lightbox-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.lightbox-track.zoom-active ~ .lightbox-hint { display: none; }

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
}

.lightbox-close:hover { background: rgba(255,255,255,0.25); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(0,0,0,0.4);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

@media (max-width: 640px) {
  .lightbox-nav { display: none !important; }
}

/* ---------- Listing submission modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
}

.modal-overlay.open {
  display: flex;
}

.modal-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  width: 760px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-body {
  padding: 26px;
}

.ml-validation-error {
  margin: 16px 0 20px;
  padding: 14px 16px;
  border: 1px solid #e5aaa1;
  border-radius: 12px;
  background: #fff1ef;
  color: #8b3028;
  font-size: 14px;
  line-height: 1.5;
}

.ml-validation-error[hidden] { display: none; }
.ml-validation-error ul { margin: 6px 0 0; padding-left: 20px; }
.ml-validation-error li + li { margin-top: 3px; }

/* Keep the first heading clear of the floating ✕ button (.modal-close). */
.modal-body > h1:first-child,
.modal-body > h2:first-child {
  padding-right: 40px;
}

.modal-close {
  position: sticky;
  top: 16px;
  float: right;
  margin: 16px 16px -36px 0;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  box-shadow: var(--shadow-md);
  z-index: 5;
}

@media (max-width: 640px) {
  .modal-overlay { padding: 0; }
  .modal-card {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .modal-body { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .modal-card input:not([type="checkbox"]):not([type="file"]),
  .modal-card select,
  .modal-card textarea,
  .modal-card .city-picker-input {
    font-size: 16px !important;
  }
  .modal-card .form-actions { justify-content: center; }
  .modal-card .form-actions .btn-primary { width: 100%; min-height: 52px; }
}

/* ---------- Competitions page ---------- */

.comp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comp-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.comp-date {
  flex-shrink: 0;
  width: 62px;
  text-align: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 10px;
  padding: 8px 4px;
}

.comp-date .day { font-size: 19px; font-weight: 800; line-height: 1.1; }
.comp-date .month { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }

.comp-info { flex: 1; min-width: 0; }

.comp-name { font-size: 15px; font-weight: 700; margin-bottom: 3px; }

.comp-meta { font-size: 12.5px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 10px; }

.comp-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  white-space: nowrap;
}

/* ---------- Links page ---------- */

.link-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 32px 0 12px;
}

.link-section-title:first-of-type { margin-top: 0; }

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.link-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.link-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}

.link-card-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

.link-card-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 8px;
}

.link-card-url {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
}

.link-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.link-card-social {
  font-size: 15px;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.link-card-social:hover {
  opacity: 1;
}

/* ---------- Noticeboard ---------- */

.board-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.board-tab {
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.board-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.board-post {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.board-post-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.board-post-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; }

.board-post-city {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}

.board-post-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 8px;
}

.board-post-date {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.board-post-contact {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
}

.section-heading {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 4px;
}

.section-subheading {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border-light);
  padding: 28px 32px 36px;
  text-align: center;
}

.site-footer-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.site-footer-nav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.site-footer-nav a:hover { color: var(--ink); }

.site-footer-note {
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* Every tab is the same width with the same gap, so icons sit evenly
   spaced whatever the label length. */
.category-bar {
  display: flex;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 32px 0;
  scrollbar-width: none;
}

.category-bar::-webkit-scrollbar { display: none; }

.category-add-button {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0 8px 8px 12px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #171717;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.category-add-button::before { content: "+"; margin-right: 7px; font-size: 20px; line-height: 1; }
.category-add-button:hover { background: #3f6847; transform: translateY(-1px); }
.category-add-button:focus-visible { outline: 3px solid #a4855a; outline-offset: 3px; }
.topbar-right .category-add-button { min-width: 0; height: 34px; min-height: 34px; margin: 0; padding: 0 14px; font-size: 12.5px; }
.topbar-right .category-add-button::before { margin-right: 4px; font-size: 16px; }

.game-entry-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 165px;
  height: 52px;
  margin: 0 8px 8px 10px;
  padding: 0 4px 0 14px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: linear-gradient(#f5ede2, #f5ede2) padding-box,
    linear-gradient(180deg, #ffffff 0%, #e8d2c7 100%) border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.08);
  color: #17130f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-entry-label { padding-left: 2px; }
.game-entry-link img { display: block; width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; transition: transform .18s ease; }
.game-entry-link:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07), 0 10px 24px rgba(0, 0, 0, 0.12); }
.game-entry-link:hover img { transform: translateX(2px) scale(1.05); }
.game-entry-link:focus-visible { outline: 3px solid #a4855a; outline-offset: 5px; }

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  width: 68px;
  padding: 6px 2px 10px;
  cursor: pointer;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

/* Only the emoji + label dim for an inactive tab — the icon photos stay at
   full opacity always, since dimming them (as a side effect of opacity on
   the whole button) made them look washed out. */
.cat-btn .cat-icon,
.cat-btn .cat-label {
  opacity: 0.75;
  transition: opacity 0.15s;
}

.cat-btn .cat-icon {
  font-size: 20px;
  line-height: 1;
}

.cat-btn .cat-icon-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  transition: transform 0.15s;
}

.cat-btn:hover .cat-icon-img {
  transform: scale(1.35);
}

.cat-btn .cat-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.cat-btn:hover {
  color: var(--ink);
}

.cat-btn:hover .cat-icon,
.cat-btn:hover .cat-label {
  opacity: 1;
}

.cat-btn.active {
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 700;
}

.cat-btn.active .cat-icon,
.cat-btn.active .cat-label {
  opacity: 1;
}

/* Category tabs are clustered into named groups (e.g. "Sportininkams",
   "Mėgėjams") — each group is its own flex item so the tighter internal
   gap (between a group's label and its buttons) reads differently from
   the wider gap the category-bar itself puts between groups. */
.cat-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* ---------- Layout ---------- */

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  flex: 1 1 50%;
  max-width: 50%;
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Stays pinned at the top while results-count/subtitle and the list scroll
   underneath — only the drag handle (mobile) and the varžybos filters. */
.sidebar-pinned {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  flex-shrink: 0;
}

#resultsCountText {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.results-count-num {
  color: var(--ink-soft);
  font-weight: 500;
}

.results-count-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.results-count {
  padding: 18px 24px 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.results-subtitle {
  padding: 2px 24px 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Competition timeline (Varžybos tab) ---------- */

.comp-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 24px 0;
}

.comp-filter-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23717171' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center / 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 30px 9px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.comp-filter-select.active {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* .comp-timeline replaces the normal card grid inside #listingList for the
   Varžybos category — but #listingList is itself a CSS grid
   (repeat(auto-fill, minmax(...,1fr))) sized for many small cards. Without
   this, a single .comp-timeline element becomes one grid item and gets
   squeezed to a single auto-fill column's width (as narrow as ~140px on
   mobile) instead of spanning the full sidebar — same fix already used for
   .no-results/.other-cat-notice. */
/* "Patikrinta … pagal …" line on a listing (provenanceHtml in app.js). */
.provenance {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-soft);
}

.provenance a { color: var(--ink-soft); text-decoration: underline; }

/* Monthly events newsletter banner under the list (newsletter.js). */
.newsletter-banner {
  margin: 24px 24px 0;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: #fdf1ea;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.newsletter-text strong { font-size: 14.5px; color: var(--ink); }

.newsletter-form {
  display: flex;
  gap: 8px;
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
}

.newsletter-form button {
  flex-shrink: 0;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.newsletter-page-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.newsletter-page-link:hover { filter: brightness(.95); }

.newsletter-note { font-size: 11.5px; color: var(--ink-soft); }

.newsletter-done { display: none; font-size: 14px; font-weight: 700; color: var(--ink); }
.newsletter-banner.done .newsletter-form,
.newsletter-banner.done .newsletter-note { display: none; }
.newsletter-banner.done .newsletter-done { display: block; }

/* "Parašykite mums" line under the list (contact-modal.js). */
.contact-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 24px 24px 4px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  font-size: 13.5px;
  color: var(--ink-soft);
}

.contact-cta-btn {
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.contact-cta-btn:hover { background: var(--ink); color: #fff; }

.newsletter-note a { color: inherit; text-decoration: underline; }

/* Legal links under the list, consent lines in forms, and the
   privatumo-politika / naudojimosi-taisykles pages. */
.legal-footer {
  padding: 12px 24px 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.legal-footer a,
.form-legal a,
.owner-confirm a { color: inherit; text-decoration: underline; }

.form-legal {
  margin: 4px 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.legal-page { max-width: 760px; }
.legal-page ul { padding-left: 20px; }
.legal-page li { margin-bottom: 10px; line-height: 1.6; }
.legal-page p { line-height: 1.6; }
.legal-page a { color: var(--ink); text-decoration: underline; }
.legal-updated { font-size: 13px; color: var(--ink-soft); margin-top: -8px; }
.legal-links { margin-top: 32px; font-weight: 600; }

/* Plain category links under the list (index.html). Visually hidden but
   kept in the page (not display:none), so crawlers and AI readers still
   follow them to the per-category pages. */
.seo-catalog {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Vinted link at the top of "Savo prekė" (listing-modal.js autofill). */
.ml-vinted {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: #eef7f7;
}

.ml-vinted .field-note.error { color: #b54040; }
#mlMapsNote.error { color: #b54040; }
.ml-vinted .field-note.info {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  line-height: 1.5;
}

/* Add form, step 1: "Ką norite įkelti?" (listing-modal.js). */
.ml-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ml-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.ml-choice:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.ml-choice img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.ml-choice strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
}

.ml-choice span span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Add form, step 2. */
.ml-back {
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ml-back:hover { color: var(--ink); }

.ml-guide {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-soft, #f6f3ee);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.ml-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 18px;
  font-size: 13.5px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .ml-choices { grid-template-columns: 1fr; }
}

/* "Organizuojate renginį?" invite at the end of the events list. */
.event-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--ink-soft);
}

.event-cta strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--ink);
}

/* Varžybos / Kitas renginys switch at the top of the event form. */
.event-type-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.event-type-toggle label {
  margin: 0;
  cursor: pointer;
}

.event-type-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.event-type-toggle span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
}

.event-type-toggle input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.event-type-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "↑ Rodyti ankstesnius renginius (N)" at the top of the events timeline. */
.past-events-toggle {
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.past-events-toggle:hover { color: var(--ink); }

/* The month heading right under the link doesn't need its usual top gap. */
.past-events-toggle + .comp-month-header { margin-top: 4px; }

.comp-timeline {
  grid-column: 1 / -1;
  width: 100%;
  padding: 4px 0 32px;
  display: flex;
  flex-direction: column;
}

.comp-month-header {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: 20px 0 10px;
}

/* Wide single-row-per-event layout (not a card grid) — closer to a real
   timeline/agenda list. Date sits inline at the left of each row rather
   than in a separate shared per-day column, so rows stay robust at any
   sidebar width instead of relying on a fixed-width neighbor column. */
.comp-row {
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.comp-row:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* Past events: greyed out but still present (sorted chronologically, so
   they naturally end up above the upcoming ones — scroll up to find them).
   They deliberately don't get an auto-added map marker (see app.js); tapping
   one still adds/opens its marker on demand. */
.comp-row.past {
  border-left-color: var(--border);
  opacity: 0.5;
}

.comp-row.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-sm);
}

/* Reused inside the map popup / mobile item sheet for competitions so the
   info + layout matches the sidebar row exactly — not a real list row there. */
.comp-popup-row {
  cursor: default;
  border: none;
  border-radius: 0;
  /* Extra right padding so the title/badges never run under the Leaflet
     popup's floating close button (absolutely positioned, not part of flow). */
  padding: 16px 40px 16px 16px;
}
.comp-popup-row:hover { box-shadow: none; }

.comp-row-date {
  flex-shrink: 0;
  width: 42px;
  text-align: center;
}

.comp-row-day {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
}

.comp-row-month {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.comp-row-body {
  flex: 1;
  min-width: 0;
}

.comp-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.comp-row-name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

.comp-row-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.comp-event-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  white-space: nowrap;
}

/* Discipline colours (see DISCIPLINE_CLASS in app.js); level stays neutral. */
.comp-event-badge.disc-jump { background: #e1f5ee; color: #085041; }
.comp-event-badge.disc-dressage { background: #eeedfe; color: #3c3489; }
.comp-event-badge.disc-eventing { background: #faeeda; color: #633806; }
.comp-event-badge.disc-endurance { background: #e6f1fb; color: #0c447c; }
.comp-event-badge.disc-driving { background: #fbeaf0; color: #72243e; }
.comp-event-badge.disc-other { background: #f1efe8; color: #444441; }
.comp-event-badge.comp-level-badge { background: #fff; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--border); }

.comp-row-meta {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.4;
}

.comp-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}


a.comp-website-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  transition: background 0.15s, transform 0.15s;
}

a.comp-website-btn:hover { background: #000; transform: translateY(-1px); }

.listing-list {
  display: grid;
  /* Never fewer than two cards side by side: a card's minimum width is
     230px, or half the list width if that's narrower. */
  grid-template-columns: repeat(auto-fill, minmax(min(230px, calc((100% - 24px) / 2)), 1fr));
  column-gap: 24px;
  row-gap: 24px;
  padding: 16px 24px 32px;
  align-content: start;
}

.listing-card {
  cursor: pointer;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.listing-card:hover {
  transform: translateY(-2px);
}

/* Real listings read as cards: white, rounded, soft shadow, the photo
   flush along the top and the text padded inside. (The dashed "Pridėti
   skelbimą" tile keeps its own look.) */
.listing-card:not(.add-listing-card) {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.08);
}

.listing-card:not(.add-listing-card):hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.07), 0 10px 24px rgba(0,0,0,0.12);
}

.listing-card:not(.add-listing-card) .lc-photo {
  border-radius: 0;
  box-shadow: none;
}

/* Fixed-size cards: photo (4:3) + a fixed-height text area. Title max 2
   lines, location 1 line, price/date pinned to the bottom; the description
   fills what's left and anything too long fades out instead of growing
   the card. */
.listing-card:not(.add-listing-card) .lc-body {
  display: flex;
  flex-direction: column;
  height: 168px;
  padding: 12px 14px 14px;
  overflow: hidden;
}

.listing-card:not(.add-listing-card) .lc-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-card:not(.add-listing-card) .lc-city {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.listing-card:not(.add-listing-card) .lc-desc {
  display: block;
  -webkit-line-clamp: unset;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Faded edge only where the text really is cut (markClippedText in app.js). */
.listing-card .lc-desc.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.listing-card:not(.add-listing-card) .lc-price {
  margin-top: auto;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Event card in mixed lists (createEventCard): the photo area becomes a
   big date block in the discipline's colour (.disc-* colours below). */
.ec-date {
  flex-direction: column;
  gap: 2px;
}

.ec-date.disc-jump { background: #e1f5ee; color: #085041; }
.ec-date.disc-dressage { background: #eeedfe; color: #3c3489; }
.ec-date.disc-eventing { background: #faeeda; color: #633806; }
.ec-date.disc-endurance { background: #e6f1fb; color: #0c447c; }
.ec-date.disc-driving { background: #fbeaf0; color: #72243e; }
.ec-date.disc-other { background: #f1efe8; color: #444441; }

.ec-day {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ec-month {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.ec-weekday {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}

.ec-badges {
  display: flex;
  gap: 6px;
  align-items: center;
}

.event-card.past { opacity: 0.55; }

.lc-price-amount {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.lc-price-date {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  opacity: 0.85;
}

.lc-price-date:first-child { margin-left: 0; }

.listing-card .lc-price.is-clipped {
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
  mask-image: linear-gradient(to right, #000 82%, transparent);
}

.listing-card:hover .lc-photo img,
.listing-card:hover .lc-photo {
  filter: brightness(1.02);
}

.lc-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  background: var(--border-light);
}

.lc-photo img:not(.vinted-badge) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Category default (a generic transparent illustration, not a real photo of
   this specific place) — shown smaller and inset instead of stretched to
   fill the frame, so it doesn't look like a real photo of the listing. */
.lc-photo img.default-photo {
  position: static;
  width: 65%;
  height: 65%;
  object-fit: contain;
}

.map-card-photo img:not(.vinted-badge) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lc-photo-icon {
  font-size: 46px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}


.lc-body {
  padding: 10px 2px 0;
}

.lc-top-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.lc-name {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
}

.lc-city {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.lc-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lc-price {
  font-size: 13.5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

.lc-price strong {
  font-weight: 700;
}

.no-results {
  grid-column: 1 / -1;
  padding: 60px 12px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

/* Sub-filters row above the list. Not sticky — it scrolls with the list. */
.filter-chips-row {
  display: flex;
  flex-shrink: 0; /* the sidebar is a flex column — don't get squashed on long lists */
  align-items: center;
  gap: 8px;
  padding: 16px 24px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-chips-row::-webkit-scrollbar { display: none; }

.filter-chips-row > .sub-filter-bar {
  padding: 0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.city-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  pointer-events: auto;
}

.city-chip-x:hover { background: rgba(255,255,255,0.4); }

/* Chosen city (renderCityChip in app.js): the Miestas segment becomes an
   orange chip. The chip lets clicks through to the dropdown underneath, so
   tapping the name changes the city; only the ✕ catches clicks (reset). */
.seg-where { position: relative; }
.seg-where.city-set { flex: 1.35; } /* room for longer names like Marijampolė */

.seg-city-chip {
  position: absolute;
  inset: 6px 4px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 6px 0 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

.seg-city-chip[hidden] { display: none; }

.seg-city-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-seg.city-set .city-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.empty-city {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 12px;
}

.other-cat-notice {
  grid-column: 1 / -1;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* "Add a listing" card — same shape as a real listing-card, styled grey
   so it reads as an invite rather than actual content. */
.add-listing-card {
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
  text-align: left;
  font-family: inherit;
  display: block;
  width: 100%;
}

.add-listing-photo {
  background: none;
  border: 2px dashed var(--border);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}

.add-listing-card:hover .add-listing-photo {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.add-listing-photo .add-listing-plus {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--border-light);
  color: var(--ink-soft);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.add-listing-card:hover .add-listing-plus {
  background: var(--accent);
  color: #fff;
}

.add-listing-card .lc-name { color: var(--ink-soft); }
.add-listing-card:hover .lc-name { color: var(--ink); }

.minor-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.minor-link:hover { color: var(--ink); }

.map-wrap {
  flex: 1 1 50%;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

.map-org-extra-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-dark);
}

/* ---------- Topbar org-logo buttons (top-right, replaces Nuorodos/+) ---------- */

.topbar-org-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0 0 1px var(--border-light);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.topbar-org-btn:hover { transform: scale(1.08); }

.topbar-org-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topbar-org-card {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1199;
  width: 280px;
  max-width: 90vw;
  margin-top: 8px;
}

.topbar-org-card .link-card {
  box-shadow: var(--shadow-lg);
}

/* Mobile: sits as a footer at the end of the scrollable list/detail
   content instead of in the topbar (see .topbar-right { display:none }
   inside the mobile media query). */
/* One row: org logos on the left, Instagram + "Apie" on the right. */
.mobile-footer {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 16px 28px;
}

.mobile-org-buttons,
.mobile-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Instagram: same circle as the org logos, with a line icon inside. */
.ig-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.ig-btn svg {
  width: 18px;
  height: 18px;
}

.mobile-footer .ig-btn svg {
  width: 22px;
  height: 22px;
}

.mobile-footer .topbar-org-btn {
  width: 44px;
  height: 44px;
}

.mobile-org-card {
  position: relative;
  width: calc(100% - 48px);
  max-width: 320px;
  margin: 0 auto 20px;
}

.mobile-org-card .link-card {
  box-shadow: var(--shadow-lg);
}

.price-pill-wrapper {
  background: transparent;
  border: none;
}

.price-pill {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font-size: 16px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.price-pill:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 10000 !important;
}

.price-pill-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.price-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.price-pill .pill-icon {
  font-size: 12px;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
}

/* ---------- Zoom control — restyled to match the site's flat,
   token-based look instead of Leaflet's default boxy black-bordered
   buttons. ---------- */
.leaflet-control-zoom {
  border: none !important;
  border-radius: var(--radius-md) !important;
  /* !important: Leaflet's own .leaflet-touch .leaflet-bar rule (higher
     specificity, applied whenever a touch-capable browser is detected)
     otherwise zeroes this out. */
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}

.leaflet-control-zoom a,
.leaflet-control-zoom a:link {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  background: #fff !important;
  color: var(--ink) !important;
  border: none !important;
  font-family: "Inter", sans-serif;
  font-size: 18px !important;
  font-weight: 600;
}

.leaflet-control-zoom a:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.leaflet-control-zoom a:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--border-light) !important;
}

/* ---------- On-map listing card (popup) ---------- */

.map-card-popup .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.map-card-popup .leaflet-popup-content {
  margin: 0;
  width: 380px !important;
}

.map-card-popup .leaflet-popup-close-button {
  top: 10px !important;
  right: 10px !important;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 15px !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-md);
}

.map-card-photo {
  position: relative;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-light);
}

.map-card-photo-icon {
  font-size: 46px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.map-card-body {
  padding: 14px 16px 16px;
}

.map-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}

.map-card-city {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.map-card-price {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
}

.map-card-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 4px;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.detail-badges .detail-badge { margin-bottom: 0; }

.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* ---------- Full listing detail view (desktop sidebar) — replaces the
   list when a listing is selected (list click or marker click); "← Atgal"
   restores the list via closeListingDetail(). ---------- */

.listing-detail {
  padding: 0 24px 40px;
}

.detail-back-btn {
  position: sticky;
  top: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--border-light);
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  margin: 16px 0 14px;
}

.detail-back-btn:hover { background: var(--border); }

.detail-photo-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
  scroll-snap-type: x proximity;
}

.detail-photo-item {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 150px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--border-light);
  box-shadow: var(--shadow-card);
}

.detail-photo-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.detail-photo-empty {
  width: 150px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

.listing-detail-title {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  margin: 4px 0 4px;
}

.listing-detail-city {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.listing-detail-price {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
}

.listing-detail-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-line;
  margin-bottom: 4px;
}

/* Contact info is shown as plain (but clickable) text, not a button —
   only the "learn more elsewhere" links (website/social) get icon
   buttons. Keeps the card from needing 4-5 equal-width pill buttons
   crammed into ~300px, which used to clip/overflow. */
.contact-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border-light);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}

.contact-line svg {
  flex-shrink: 0;
  color: var(--ink-soft);
}

.contact-line--cta {
  width: fit-content;
  max-width: 100%;
  margin-top: 14px;
  padding: 11px 16px;
  border: 1px solid #d8c8b7;
  border-radius: var(--radius-pill);
  background: #f7eee2;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.contact-line--cta:hover {
  background: #efe1d0;
  border-color: #bba58d;
  transform: translateY(-1px);
}

.contact-line--cta > span { display: grid; gap: 2px; }
.contact-line--cta strong { font-size: 14px; }
.contact-line--cta small { color: var(--ink-soft); font-size: 12px; font-weight: 500; }

.contact-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.external-listing-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, background 0.15s;
}

.external-listing-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.external-listing-icon { font-size: 18px; }

.external-listing-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.external-listing-url {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
}

/* Vinted brand teal (#007782) with white text and their app logo. */
.external-listing-card--vinted {
  background: #007782;
  border-color: #007782;
}

.external-listing-card--vinted:hover {
  background: #00636c;
  border-color: #00636c;
}

.external-listing-card--vinted .external-listing-title { color: #fff; }
.external-listing-card--vinted .external-listing-url { color: rgba(255,255,255,0.85); }

/* Warm, compact listing detail presentation that matches the rest of the site. */
.listing-detail { padding: 0 24px 36px; }
.listing-detail .detail-top-row { margin-bottom: 8px; }
.listing-detail .sheet-gallery { margin: 8px 0 14px; }
.listing-detail .sheet-gallery-track { height: clamp(220px, 34vh, 380px); }
.listing-detail .sheet-gallery-track img.default-photo { object-fit: contain; padding: 28px; }
.listing-detail-title { font-size: clamp(23px, 2vw, 29px); letter-spacing: -0.025em; }
.listing-detail-city { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.listing-detail-price {
  margin: 12px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}
.listing-detail-price:empty { display: none; }
.listing-detail-desc { font-size: 15px; line-height: 1.7; margin: 14px 0; }
.detail-badges { gap: 7px; }
.detail-badges .detail-badge { padding: 5px 12px 5px 6px; }
.image-load-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5f4a36;
  background: #f5efe8;
  font-size: 38px;
}
.detail-badges .detail-badge { position: relative; }
.detail-badges .detail-badge .image-load-fallback { font-size: 17px; background: #fff; }
.gallery-thumb { position: relative; }

/* Make the add flow feel like a deliberate site dialog rather than a long
   default form. The compact mobile bottom sheet behavior stays intact. */
#listingModalOverlay .modal-card {
  width: min(820px, calc(100vw - 48px));
  max-height: min(90vh, 980px);
  border: 1px solid #eadfd2;
  border-radius: 24px;
  background: #fffdf9;
}
#listingModalOverlay .modal-body { padding: 30px 34px 34px; }
#listingModalOverlay #listingModalForm .page-title { font-size: 29px !important; line-height: 1.18; letter-spacing: -0.03em; }
#listingModalOverlay .ml-back { margin: 0 0 14px; padding: 0; }
#listingModalOverlay .ml-guide {
  padding: 13px 16px;
  border: 1px solid #eee2d4;
  background: #f8f2e9;
  color: #625b53;
  border-radius: 14px;
}
#listingModalOverlay .form-group { margin-bottom: 15px; }
#listingModalOverlay .form-group label,
#listingModalOverlay .ml-label { font-size: 14px; }
#listingModalOverlay .form-group input[type="text"],
#listingModalOverlay .form-group input[type="email"],
#listingModalOverlay .form-group input[type="tel"],
#listingModalOverlay .form-group input[type="url"],
#listingModalOverlay .form-group select,
#listingModalOverlay .form-group textarea {
  min-height: 48px;
  border-color: #ded5ca;
  border-radius: 13px;
  padding: 12px 14px;
  background: #fff;
}
#listingModalOverlay .form-group input:focus,
#listingModalOverlay .form-group select:focus,
#listingModalOverlay .form-group textarea:focus { outline-offset: 0; }
#listingModalOverlay .ml-vinted {
  padding: 17px;
  border: 1px solid #d8e9e6;
  border-radius: 17px;
  background: #eff8f6;
}
#listingModalOverlay .ml-dropzone {
  min-height: 148px;
  border-radius: 16px;
  background: #faf8f4;
}
#listingModalOverlay .owner-confirm { margin-top: 18px; }
#listingModalOverlay .form-actions .btn-primary { min-height: 50px; border-radius: 999px; }

@media (max-width: 640px) {
  #listingModalOverlay .modal-card {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: #fffdf9;
  }
  #listingModalOverlay .modal-body { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  #listingModalOverlay #listingModalForm .page-title { font-size: 25px !important; }
  #listingModalOverlay .ml-reshare-head { align-items: flex-start; gap: 10px; }
  #listingModalOverlay .ml-reshare-logos > * { width: 30px; height: 30px; }
  #listingModalOverlay .ml-vinted { padding: 14px; }
  #listingModalOverlay .ml-dropzone { min-height: 126px; }
  .listing-detail { padding: 0 16px 32px; }
  .listing-detail .sheet-gallery-track { height: min(78vw, 340px); }
}

.external-listing-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9);
  flex-shrink: 0;
}

.contact-icon-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  background: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.contact-icon-btn:hover {
  background: var(--border-light);
  color: var(--ink);
  border-color: var(--border);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .sidebar { max-width: 100%; flex-basis: 100%; }
}

.item-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
}

.item-sheet-overlay.open {
  display: flex;
}

.item-sheet {
  position: relative;
  background: #fff;
  width: 400px;
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-lg);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

/* Swipeable photos in the phone bottom sheet (sheetPhotosHtml in app.js):
   every photo whole at full width, snapping one per swipe. */
.sheet-gallery {
  position: relative;
  background: #f4f2ef;
}

/* Fixed square frame (capped at 60% of the screen height): photos of any
   shape fit inside whole, so the text below always starts at the same place. */
.sheet-gallery-track {
  display: flex;
  align-items: center;
  height: min(100vw, 60vh);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sheet-gallery-track::-webkit-scrollbar { display: none; }

.sheet-gallery-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
  cursor: zoom-in;
}

/* ‹ › arrows over the photos (wired in app.js; hidden at the ends). */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.gallery-arrow svg { width: 18px; height: 18px; }
.gallery-arrow-prev { left: 10px; }
.gallery-arrow-next { right: 10px; }
.gallery-arrow[hidden] { display: none; }

.sheet-gallery-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

/* Desktop item page: the same gallery, as a rounded fixed-height frame
   (photos shown whole inside it) with a thumbnail strip below. */
.listing-detail .sheet-gallery {
  margin: 14px 0 10px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Scales with the window height so the title, price and description stay
   in view in smaller browser windows too. */
.listing-detail .sheet-gallery-track {
  height: clamp(180px, 36vh, 320px);
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar { display: none; }

.gallery-thumb {
  flex: 0 0 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f2ef;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s;
}

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

.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { opacity: 1; border-color: var(--ink); }

/* Sub-filters inside a grouped tab (Renginiai, Paslaugos raiteliams,
   Pramogos) — see renderSubFilters in app.js. */
.sub-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 24px 4px;
}

.sub-chip {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sub-chip:hover { border-color: var(--ink-soft); }

.sub-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* "✓ Patvirtinta" — owner-confirmed listing (see verifiedBadgeHtml). */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 2px 7px 2px 4px;
  border-radius: var(--radius-pill);
  background: #e7f0fb;
  color: #1d5fae;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

.verified-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Stable owners' "edit / verify this info" link under the listing. */
.owner-edit-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.owner-edit-btn:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}

/* Opened from the phone bottom sheet (z-index 2100), so it sits above it. */
#ownerModalOverlay { z-index: 2200; }

.owner-form-heading {
  margin: 22px 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.owner-form-heading:first-child { margin-top: 0; }

.owner-confirm {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 4px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}

.owner-confirm input { margin-top: 2px; }

/* Neutral helper line under a form field (.file-hint is for errors). */
.field-note {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* Desktop: the map is already big; the expand/collapse buttons are
   phone-only (shown again in the mobile media query below). */
.map-expand-btn,
.map-collapse-btn { display: none; }

@media (max-width: 860px) {
  /* Touch devices zoom the map with a pinch gesture — the on-screen +/-
     buttons just take up space in the short preview band. */
  .leaflet-control-zoom { display: none; }

  /* The topbar's hairline border reads as a stark, always-visible divider
     now that the topbar is sticky and content scrolls underneath it. */
  .topbar { border-bottom: none; }

  .topbar-inner { padding: 10px 16px; gap: 10px; }
  .category-bar { padding: 4px 16px 0; gap: 4px; justify-content: flex-start; }
  /* Centred when the tabs fit, still scrollable from the first tab when
     they don't: two growable spacers (unlike justify-content: center, they
     never push tabs off the left edge). Works with the hidden Išsaugoti tab. */
  .category-bar::before,
  .category-bar::after { content: ""; flex: 1 0 0; }
  .cat-btn { width: 68px; }
  .topbar-right { display: none; }
  .mobile-footer { display: flex; margin-top: auto; }
  /* Sub-filters scroll sideways in one row, like the category bar. */
  .filter-chips-row { padding: 14px 16px 0; }
  .sub-chip { flex-shrink: 0; }
  /* Smaller category heading on phones, kept on one line. */
  .results-count { font-size: 16px; padding: 16px 16px 4px; }
  .results-subtitle { padding-left: 16px; padding-right: 16px; }
  /* Varžybos filters: one swipeable row, aligned with the sub-filters. */
  .comp-filter-bar { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 10px 16px 0; scrollbar-width: none; }
  .comp-filter-bar::-webkit-scrollbar { display: none; }
  .comp-filter-select { flex-shrink: 0; font-size: 12.5px; padding: 8px 28px 8px 14px; background-position: right 10px center; }
  .results-count-icon { width: 30px; height: 30px; }
  #resultsCountText { gap: 8px; min-width: 0; white-space: nowrap; }
  #resultsCountText > span { overflow: hidden; text-overflow: ellipsis; }
  .apie-link-mobile { display: flex; height: 44px; padding: 0 18px; }
  .search-seg { padding: 8px 14px; }
  .add-listing-btn { padding: 10px 14px; font-size: 12.5px; }
  .btn-grey { padding: 10px 14px; font-size: 12.5px; }

  /* The 3-column grid (logo / search / buttons) only has room to breathe
     on wide screens. Below this breakpoint, stack it: the brand name gets
     its own centered row, then the search pill underneath. */
  .topbar-inner--3col {
    display: flex;
    flex-wrap: wrap;
  }
  /* No site title on phones — the search bar sits at the very top. */
  .topbar-inner--3col .topbar-left { display: none; }
  .topbar-inner--3col .topbar-right { order: 2; justify-self: initial; margin-left: auto; }
  .topbar-inner--3col .search-pill {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }

  .page-shell { padding: 28px 16px 60px; }
  .page-title { font-size: 24px; }

  .form-card { padding: 18px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .link-grid, .board-grid { grid-template-columns: 1fr; }

  /* The whole page scrolls together now (map preview + list), so .app-shell
     needs to grow past one viewport height instead of clipping to it —
     a fixed height:100vh here would also cap how far .topbar below can
     stick (its containing block can't stick past its parent's own box). */
  .app-shell {
    height: auto;
    min-height: 100vh;
  }

  /* Category bar stays pinned to the top of the screen while the map
     preview and results list scroll underneath. */
  /* Sticky with a negative offset equal to the search row's height
     (--search-h, measured in app.js): the search row scrolls away and only
     the category bar stays pinned to the top. */
  .topbar {
    position: sticky;
    top: calc(-1 * var(--search-h, 0px));
  }

  /* A small live map preview card sits above the results list. Tapping it
     (see the map's own "click" handler in app.js) expands it to fill all
     the space below the search/category bar — those stay put and reachable
     — with an explicit "← Sąrašas" button (and tapping the background
     again) to collapse it back. Tapping a marker always opens the item
     sheet, in either state. */
  .layout {
    position: relative;
    flex-direction: column;
  }

  .map-wrap {
    order: -1;
    flex: 0 0 200px;
    height: 200px;
    /* Gap under the category bar at first; it scrolls away under the
       sticky bar as soon as you scroll. */
    margin: 12px 16px 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
  }

  /* .app-shell has no fixed height on mobile (see above), so flex:1 alone
     would resolve to 0 here — size it to the screen minus the sticky
     topbar instead (--topbar-h is measured in app.js setMapExpanded). */
  .layout.map-expanded .map-wrap {
    flex: 0 0 auto;
    height: calc(100dvh - var(--topbar-h, 180px));
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .layout.map-expanded .sidebar {
    display: none;
  }

  .map-collapse-btn {
    display: none;
  }

  /* Expand icon in the preview card's top-right corner — same action as
     tapping the map; hidden once expanded ("← Sąrašas" takes over). */
  .map-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }

  .map-expand-btn svg {
    width: 17px;
    height: 17px;
  }

  .layout.map-expanded .map-expand-btn {
    display: none;
  }

  /* Top-right, where the expand button sits in the small preview. */
  .layout.map-expanded .map-collapse-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500;
    background: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-md);
  }

  .map-collapse-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

  /* Grows to fill the screen when the list is short, so the footer row
     (logos · Apie · Instagram, margin-top:auto) sits at the very bottom. */
  .sidebar {
    flex: 1 0 auto;
    height: auto;
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
  }

  .listing-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 12px; row-gap: 16px; padding: 12px 16px 24px; }
  .listing-card:not(.add-listing-card) .lc-body { padding: 10px 10px 12px; height: 160px; }

  .map-card-popup .leaflet-popup-content { width: 300px !important; }

  .listing-detail { padding: 0 16px 32px; }


  .detail-photo-item,
  .detail-photo-empty { width: 100%; }

  /* ---------- Mobile item-detail bottom sheet ---------- */
  .item-sheet-overlay {
    align-items: flex-end;
  }

  .item-sheet {
    width: 100%;
    max-width: 100%;
    max-height: 94vh;
    border-radius: 18px 18px 0 0;
    animation: sheet-slide-up 0.22s ease;
  }

  /* Bottom sheet: a real photo fills a taller frame; the category
     illustration (.default-photo) stays centred and smaller. The corner
     Vinted badge is hidden here — it sat under the ✕, and the sheet shows
     the full Vinted link card instead. */
  .item-sheet .map-card-photo { border-radius: 0; background: transparent; height: 200px; }
  .item-sheet .map-card-photo img.default-photo { inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
  .item-sheet .vinted-badge { display: none; }
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Floats over the top of the photo (no white strip above it); white with a
   soft shadow so it shows on light and dark photos alike. */
.item-sheet-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 40px;
  height: 5px;
  background: rgba(255,255,255,0.95);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.25);
  cursor: grab;
  touch-action: none;
}

.item-sheet-close {
  position: sticky;
  top: 10px;
  float: right;
  margin: 10px 12px -42px 0;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  box-shadow: var(--shadow-md);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  z-index: 5;
}

.item-sheet-body {
  padding: 0 0 20px;
}

/* No photo at the top (events, category illustration): keep the handle and
   ✕ clear of the content. */
.item-sheet-body:not(:has(.sheet-gallery)) {
  padding-top: 22px;
}

.apie-credits {
  margin-top: 28px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- Toast notification ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  max-width: min(90vw, 420px);
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* "Kas tai?" picture cards in the add form (listing-modal.js). */
.ml-type-cards { margin-top: 2px; }

.ml-type-card { padding: 12px 14px; }
.ml-type-card img { width: 44px; height: 44px; }
.ml-type-card strong { font-size: 14px; }

.ml-type-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  background: #fff8f4;
}

/* Edit / remove choice at the top of the owner form (owner-edit-modal.js). */
.om-kind-toggle { margin-bottom: 18px; }

/* Address + "Google Maps" button on a listing's own view (app.js mapsLinkHtml). */
.address-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

a.maps-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color 0.15s;
}

a.maps-link:hover { border-color: var(--ink); }
a.maps-link svg { width: 14px; height: 14px; flex-shrink: 0; color: #ea4335; }

.comp-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Category pills on a listing's own view: grey outline + picture icon
   (app.js categoryBadgesHtml). */
.detail-badges .detail-badge {
  gap: 6px;
  padding: 3px 11px 3px 5px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.detail-badges .detail-badge img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ---------- "Savo prekė" form: reshare box, location, price, photos ---------- */
.ml-reshare { padding: 16px; }

.ml-reshare-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.ml-reshare-logos {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ml-reshare-logos > * {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #eef7f7;
  margin-left: -8px;
  background: #fff;
}

.ml-reshare-logos > :first-child { margin-left: 0; }
.ml-reshare-logos img { object-fit: cover; }

.ml-logo-skelbiu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #2b2b2b;
}

.ml-reshare-text strong { display: block; font-size: 14.5px; color: var(--ink); }
.ml-reshare-text span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-soft); }

.ml-price-input { max-width: 220px; }
.ml-city-price-row .ml-price-input { max-width: none; }
.ml-half { max-width: calc(50% - 7px); }
@media (max-width: 640px) { .ml-half { max-width: none; } }

.ml-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
}

.form-group .ml-dropzone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 400;
  align-items: center;
  gap: 4px;
  padding: 20px 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: #fafaf8;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ml-dropzone:hover,
.ml-dropzone.dragging { border-color: var(--accent); background: #fff8f4; }

.ml-dropzone svg { width: 30px; height: 30px; color: var(--ink-soft); margin-bottom: 2px; }
.ml-dropzone strong { font-size: 14px; color: var(--ink); }
.ml-dropzone span { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.ml-dropzone.full { opacity: 0.5; cursor: not-allowed; }

/* Skelbiu / Facebook marks on an ad's "Parduodama ir …" card. */
.external-listing-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #fff;
  font-weight: 800;
}

.external-listing-mark--skelbiu { font-size: 9px; color: #2b2b2b; }
.external-listing-mark--fb { background: #1877f2; border-color: #1877f2; color: #fff; font-size: 20px; font-family: Arial, sans-serif; }

/* Medium-width windows (between phone layout and wide desktop): the site
   title and the right-hand buttons would crowd the search bar, so hide both
   and keep just the normal-size search bar in the middle. The logos, Apie
   and Instagram move to the bottom of the list (.mobile-footer) instead. */
@media (min-width: 861px) and (max-width: 1080px) {
  .topbar-inner--3col {
    display: flex;
    justify-content: center;
  }
  .topbar-inner--3col .topbar-left,
  .topbar-inner--3col .topbar-right { display: none; }
  .topbar-inner--3col .search-pill {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
  .mobile-footer { display: flex; }
  .apie-link-mobile { display: flex; height: 44px; padding: 0 18px; }
}

/* Upcoming-events strip on top of Visos (app.js upcomingEventsBanner):
   the next two events + a "Visi renginiai" button; tapping opens Renginiai. */
.next-events-banner {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.08); /* same as the listing cards */
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.next-events-banner:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 22px rgba(0,0,0,0.12); }

.neb-list {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 14px;
}

.neb-event { display: flex; align-items: center; gap: 10px; min-width: 0; }

.neb-date {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  line-height: 1;
}

.neb-day { font-size: 16px; font-weight: 800; }
.neb-month { font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; }

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

.neb-name,
.neb-place {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neb-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.neb-place { font-size: 11.5px; color: var(--ink-soft); }

/* Right column: link on top, calendar under it — a real column (not
   overlaid), so the two can never overlap whatever the banner's height. */
.neb-side {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}

.neb-all {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.next-events-banner:hover .neb-all { color: var(--ink); }

.neb-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  pointer-events: none;
}

/* "Naujas" badge on cards added in the last week (app.js isNewItem). */
.lc-photo { position: relative; }

.new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* ---------- Saved listings (app.js "Išsaugoti") ---------- */
.save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.save-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: transform 0.15s;
}

.save-btn:hover svg { transform: scale(1.12); }
.save-btn.saved svg { fill: #e0245e; stroke: #e0245e; }

/* On a card's photo, top-right corner (the Vinted mark moves bottom-left). */
.save-btn--card {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* On a listing's own view, next to the category badges. */
.save-btn--pill {
  padding: 4px 12px 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.save-btn--pill svg { width: 16px; height: 16px; }
.save-btn--pill.saved { border-color: #f3b6c8; background: #fff3f6; }

/* "Išsaugoti" tab — same size as the picture icons. */
.cat-btn .saved-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  transition: transform 0.15s;
}

.cat-btn .saved-tab-icon svg { width: 38px; height: 38px; fill: #e0245e; stroke: #b81d4c; stroke-width: 1; }
.cat-btn:hover .saved-tab-icon { transform: scale(1.2); }

.saved-heading-icon svg { width: 26px; height: 26px; fill: #e0245e; vertical-align: -5px; }

.saved-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 16px;
  text-align: center;
}

.saved-empty svg { width: 40px; height: 40px; fill: none; stroke: #e0245e; stroke-width: 1.6; }
.saved-empty strong { font-size: 15px; color: var(--ink); }
.saved-empty span { font-size: 13px; color: var(--ink-soft); max-width: 320px; }

/* Map pins that would overlap shrink to small dots (app.js declutterPins);
   hovering one shows it in full again. */
.price-pill.mini {
  width: 22px;
  height: 14px;
  padding: 0;
  gap: 0;
  font-size: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.price-pill.mini > * { display: none; }

.price-pill.mini:hover {
  width: auto;
  height: auto;
  padding: 6px 10px;
  font-size: 16px;
}

.price-pill.mini:hover > * { display: initial; }

.lc-photo .vinted-badge { top: auto; right: auto; bottom: 10px; left: 10px; }

/* Number of saved listings on the Išsaugoti tab's heart. */
.cat-btn .saved-tab-icon { position: relative; }
.saved-count {
  position: absolute;
  top: 4px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.saved-count:empty { display: none; }

/* Listing page: "Atgal" left, save button right, on one line. */
.detail-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.detail-top-row .detail-back-btn { margin-bottom: 0; }
.detail-top-row { margin-bottom: 16px; }

/* Slot above the "N skelbimai · Lietuvoje" heading for the events banner. */
.next-events-slot { padding: 18px 24px 0; }
.next-events-slot:empty { display: none; }
@media (max-width: 860px) { .next-events-slot { padding: 14px 16px 0; } }

/* Game invitation below the upcoming events banner. */
.horse-game-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  aspect-ratio: 857 / 259;
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 12px 5%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #526548 url("images/game-horse-banner.png") center / cover no-repeat;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.08);
}
.horse-game-banner__button { align-self: center; margin: 0; }
.horse-game-banner:focus-visible { outline: 3px solid #536f47; outline-offset: 3px; }
@media (max-width: 600px) {
  .horse-game-banner { aspect-ratio: 857 / 259; margin-top: 10px; margin-bottom: 12px; padding: 8px 5%; border-radius: 16px; }
}

/* Bottom sheet: heart top-left, ✕ top-right (both stay put while scrolling). */
.item-sheet-save {
  position: sticky;
  top: 10px;
  float: left;
  margin: 10px 0 -42px 12px;
  z-index: 5;
}

.save-btn--sheet {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

.save-btn--sheet svg { width: 17px; height: 17px; }

/* Events have no photo at the top of the sheet — keep the buttons in their
   own row so they don't sit on the date and title. */
.item-sheet--no-photo .item-sheet-close,
.item-sheet--no-photo .item-sheet-save { margin-bottom: 0; }
.item-sheet--no-photo .item-sheet-body { clear: both; }

/* Searchable city field (city-picker.js). */
.city-picker { position: relative; }

.city-picker-input {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717171' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}

.city-picker-input:focus { outline: none; border-color: var(--ink); }

.city-picker-list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.city-picker-list.open { display: block; }

.city-picker-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

.city-picker-option span { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.city-picker-option.active,
.city-picker-option:hover { background: #f4f2ee; }
.city-picker-empty { padding: 10px; font-size: 13px; color: var(--ink-soft); }

/* Marketplace logo (Vinted / Skelbiu / Facebook) next to a card's title. */
.lc-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lc-market { flex-shrink: 0; display: inline-flex; margin-top: 2px; }
.lc-market img,
.lc-market-fb { width: 24px; height: 24px; border-radius: 6px; }
.lc-market-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1877f2;
  color: #fff;
  font: 800 16px Arial, sans-serif;
}