:root {
  --bg: #14161a;
  --card-bg: #1e2125;
  --text: #eae8e3;
  --muted: #9b9890;
  /* Brand gold — same hue as the star rating, so links/buttons/stars all
     read as one accent instead of the old green-vs-gold clash. */
  --accent: #e3b155;
  --accent-dark: #c2933c;
  --accent-ink: #241a08;
  --border: #33373d;
  --star: #e3b155;
  --danger: #e0685c;
  /* Kept separate from --accent: used only for genuine "success" status
     (paid/active/approved), never for plain links or button fills. */
  --success: #6fcf97;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* 16px prevents iOS Safari from auto-zooming the page when a field is
   focused — anything smaller than that triggers it. More specific rules
   below (e.g. small admin action buttons) can still override this. */
input, select, textarea, button {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

header.site-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.age-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.age-gate-overlay.hidden {
  display: none;
}

body.age-gate-active {
  overflow: hidden;
}

.age-gate-box {
  max-width: 420px;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
}

.age-gate-box h2 {
  margin-top: 0;
}

.age-gate-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* Generic "type to confirm" modal for irreversible admin actions — a
   plain confirm() is too easy to blow past out of habit on something as
   destructive as deleting an account, so this requires actually typing
   the target's identifier before the real delete button enables. */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
}

.confirm-modal-overlay.hidden {
  display: none;
}

.confirm-modal-box {
  max-width: 440px;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.confirm-modal-box h2 {
  margin-top: 0;
}

.confirm-modal-box input[type="text"] {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: inherit;
  margin-top: 8px;
}

.confirm-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.site-footer {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.site-footer a {
  color: var(--text-muted, inherit);
  font-size: 0.9rem;
}

.site-footer .footer-sep {
  color: var(--border);
  margin: 0 10px;
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
}

.site-header .logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  /* Flexbox align-items:center centers by box height, but text glyphs sit
     visually lower than their line-box center (descender space above the
     baseline is smaller than below it for this font) — nudge the icon down
     a couple px so it reads as centered against the actual letterforms,
     not just the invisible line box. */
  margin-top: 3px;
}

.admin-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(227, 177, 85, 0.15);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
}

.site-header nav > a.active {
  color: var(--text);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

.admin-identity {
  color: var(--muted);
  font-size: 0.85rem;
}

.site-header .langs {
  display: flex;
  gap: 8px;
  margin-left: 8px;
}

.site-header .langs a {
  padding: 8px 9px;
  border-radius: 4px;
  color: var(--muted);
  display: inline-block;
  line-height: 1;
}

.site-header nav > a {
  padding: 8px 2px;
  display: inline-block;
}

.site-header .langs a.active {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

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

.btn:hover {
  background: var(--accent-dark);
  text-decoration: none;
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn.secondary:hover {
  background: rgba(255, 255, 255, 0.11);
}

.btn.danger {
  background: var(--danger);
  color: #fff;
}

.btn.danger:hover {
  background: #c85448;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.page-title {
  margin: 28px 0 16px;
  font-size: 1.6rem;
}

.filters {
  margin-bottom: 20px;
}

.filters select,
.filters input[type="text"] {
  display: block;
  margin-top: 4px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
}

.filters label {
  font-size: 0.85rem;
  color: var(--muted);
}

.grid {
  display: grid;
  /* Four cards per row inside .container's 1100px cap (the 2026-10-04 home
     redesign keeps the 4-across layout from 2026-09-12), three on tablets,
     two on phones -- see the media queries at the end of the home block. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.card:hover {
  text-decoration: none;
  border-color: rgba(227, 177, 85, 0.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.card-photo {
  position: relative;
  background: #2a2d32;
}

.card .photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* cover, with the focus nudged up so a portrait photo keeps the face; the
     portrait box (4:5) is what keeps the crop small. */
  object-fit: cover;
  object-position: center 25%;
  background: #2a2d32;
  display: block;
}

.card .photo.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

.card .photo.placeholder svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  opacity: 0.6;
}

/* Category (the gender label) over the photo's lower-left corner. */
.card-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(20, 22, 26, 0.78);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.card .body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.card .name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.card .city {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.card .rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.rating-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 800;
}

.rating-count {
  color: var(--muted);
  font-size: 0.88rem;
}

.card .card-age {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.85rem;
}

.card .card-source {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 0.88rem;
}

.card-source-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-icon {
  display: inline-flex;
  flex: none;
  width: 15px;
  height: 15px;
}

.inline-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.card-source .inline-icon {
  border-radius: 5px;
  width: 20px;
  height: 20px;
}


/* review-new-candidates.ejs -- "is this her?" picker shown when a
   submitted ad link matches one or more existing therapists. Deliberately
   its own small grid/card pair rather than reusing .grid/.card: those
   are sized for a full listing page, this is a handful of comparison
   candidates the user is meant to scan quickly, not browse. */
.match-candidates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.match-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 12px;
  text-align: center;
}

.match-name {
  font-weight: 600;
  margin: 10px 0;
}

.mini-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #2a2d32;
}

.mini-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.mini-carousel-slide.active {
  display: block;
}

.mini-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}

.mini-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.mini-carousel-arrow.left {
  left: 6px;
}

.mini-carousel-arrow.right {
  right: 6px;
}

.stars {
  color: var(--star);
  letter-spacing: 1px;
}

.stars .empty {
  color: #454850;
}

.therapist-header {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Only used now for the zero-photos-and-zero-videos placeholder (the
   carousel itself sits in this slot otherwise -- see therapist.ejs) --
   sized to match .carousel's own footprint below so the page doesn't
   jump depending on whether a therapist has any media yet. */
.therapist-header .photo {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #2a2d32;
}

.therapist-header h1 {
  margin: 0 0 6px;
}

.therapist-header .city {
  color: var(--muted);
  margin-bottom: 10px;
}

.therapist-facts {
  margin: 4px 0 12px;
}

.therapist-facts > div {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.therapist-facts dt {
  color: var(--muted);
  font-weight: 600;
}

.therapist-facts dd {
  margin: 0;
}

.therapist-header .description {
  max-width: 700px;
  color: #cfcdc7;
  /* The stored text already has the reviewer's own line breaks intact
     (confirmed 2026-09-13, reported: paragraph spacing was getting lost)
     -- plain <p> text collapses all whitespace, including newlines, per
     normal HTML rules, so a multi-paragraph comment was rendering as one
     dense run-on block. pre-wrap keeps blank-line breaks (and any
     genuine multiple-space runs) exactly as typed while still wrapping
     normally at the container edge -- unlike plain `pre`, this doesn't
     force a wide unwrapped line or horizontal overflow. */
  white-space: pre-wrap;
}

.carousel-wrap {
  width: 100%;
  max-width: 420px;
  /* No standalone top/bottom margin -- lives inside .therapist-header's
     flex row now (its own margin-top and gap already handle spacing),
     not as a following block on its own line. */
}

.carousel {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #2a2d32;
}

.carousel-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  /* Centered so a partial last row (e.g. 2 left over from 7 photos at 5
     per row) sits in the middle of the empty space instead of hugging the
     left edge with a big gap trailing off to the right. */
  justify-content: center;
}

.carousel-thumb {
  /* Fixed size, same as every other thumbnail regardless of how many
     end up on the last row -- a previous version let a short last row
     grow to fill the width, but that made those thumbnails visibly
     bigger than the rows above them, which read as inconsistent rather
     than intentional. A partial last row just ends early now instead. */
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
  background: #2a2d32;
  border: 2px solid transparent;
  opacity: 0.7;
}

.carousel-thumb:hover {
  opacity: 1;
}

.carousel-thumb.active {
  border-color: var(--accent);
  opacity: 1;
}

.carousel-thumb-video {
  position: relative;
}

.carousel-thumb-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

.carousel-thumb-video .play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.carousel-track {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover: a portrait photo (very common here -- a person
     standing) was getting its head and feet cropped off to fill this
     fixed 4:3 box. contain letterboxes instead (dark bars on the sides
     for a tall photo) -- less "full-bleed," but it matches what the
     lightbox's own enlarged view already does, which never cropped. */
  object-fit: contain;
  display: none;
  cursor: zoom-in;
}

.carousel-slide.active {
  display: block;
}

.carousel-slide-video img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.carousel-arrow.left {
  left: 10px;
}

.carousel-arrow.right {
  right: 10px;
}

.carousel-counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 9px;
  border-radius: 20px;
}

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

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

.lightbox-arrow,
.lightbox-close {
  position: fixed;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  z-index: 1001;
}

.lightbox-arrow:hover,
.lightbox-close:hover {
  background: rgba(0, 0, 0, 0.65);
}

.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-arrow.left {
  left: 16px;
}

.lightbox-arrow.right {
  right: 16px;
}

/* Only way to close the lightbox now -- clicking the backdrop or the
   photo itself used to close it too, which made it too easy to lose
   your place while just looking at a photo. */
.lightbox-close {
  top: 16px;
  right: 16px;
  font-size: 1.8rem;
  font-weight: bold;
}

/* Which photo/video you're on while maximized -- the carousel's own
   counter sits inside the carousel itself, so it's hidden behind this
   overlay once it's open; this is the same count shown in the lightbox
   instead. Also used for a review's own photo group (see showGroupItem),
   not just the main carousel. */
.lightbox-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  padding: 4px 14px;
  border-radius: 20px;
  z-index: 1001;
}

.lightbox-overlay.single-item .lightbox-counter {
  display: none;
}

.lightbox-overlay img,
.lightbox-overlay video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
}

/* Custom confirm modal (public/js/confirm-delete.js) -- replaces native
   confirm() for destructive form submits, e.g. deleting a review. */
.confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 24px;
}

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

.confirm-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
}

.confirm-message {
  margin: 0 0 20px;
  color: var(--text);
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.field-hint {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.source-attribution {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 8px;
}

.admin-photo-tools-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 16px;
}

.admin-photo-tools-row > div {
  flex: 1 1 300px;
  min-width: 280px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.admin-photo-tools-row h3 {
  margin-top: 0;
}

.photo-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.photo-manager-item {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.photo-manager-item img,
.photo-manager-item video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #000;
  display: block;
}

.video-thumb {
  position: relative;
}

.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  pointer-events: none;
}

.photo-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
}

.photo-manager-actions .btn,
.photo-manager-actions .btn.secondary,
.photo-manager-actions .btn.danger {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.photo-provenance {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 8px 8px;
  margin: 0;
}

section.reviews {
  margin-top: 36px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 32px;
}

.pagination .btn.secondary {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.pagination-page,
.pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 0 4px;
}

.pagination-page {
  color: var(--muted);
}

.pagination-page:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.pagination-current {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.home-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.per-page-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.per-page-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  padding: 0 4px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
}

.per-page-option:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.per-page-option.active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.review-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 20px;
}

.review-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.review-card .meta .stars {
  font-size: 1.15rem;
}

.review-card .comment {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  margin: 14px 0 0;
  /* Same fix as .therapist-header .description above, same reason --
     additional reviews lost their paragraph spacing too. */
  white-space: pre-wrap;
}

.review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.review-photo-thumb {
  width: 84px;
  height: 84px;
  border-radius: 6px;
  object-fit: cover;
  cursor: zoom-in;
  background: #2a2d32;
}

.review-video-thumb {
  position: relative;
}

.review-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.review-video-thumb .play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.2rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.lightbox-overlay.single-item .lightbox-arrow {
  display: none;
}

.review-card summary {
  cursor: pointer;
  list-style: none;
  display: block;
}

.review-card summary::-webkit-details-marker {
  display: none;
}

.review-card summary::marker {
  content: '';
}

.review-card[open] .meta {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.review-preview {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-card[open] .review-preview {
  display: none;
}

.accordion-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s, color 0.15s;
}

.review-summary:hover .accordion-chevron,
.review-summary:focus-visible .accordion-chevron {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.review-card[open] .accordion-chevron {
  transform: rotate(180deg);
}

.review-body {
  padding-top: 4px;
}

.review-meta-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.review-author {
  font-weight: 600;
  color: var(--text);
}

/* Admin/manager-only (see adminRole check in therapist.ejs) -- moderators
   don't see this, matching the existing admin/users detail page's own
   requireManagerOrAbove gate on the same field. */
.telegram-tag {
  color: var(--accent);
  font-weight: 400;
  margin-left: 4px;
}

.review-status-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #4a3c1f;
  color: #e3b155;
  font-size: 0.7rem;
}

.review-card-actions {
  display: flex;
  gap: 4px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

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

.icon-btn-inline {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-left: 2px;
}

.icon-btn-inline svg {
  width: 15px;
  height: 15px;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.icon-btn-danger:hover,
.icon-btn-danger:focus-visible {
  background: #3a2422;
  color: var(--danger);
}

.sub-ratings {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.sub-ratings span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  /* Was var(--muted) (#9b9890) on a near-black pill -- close to unreadable,
     per feedback. var(--text) is the same brightness the rest of a
     review's body copy already uses. */
  color: var(--text);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
}

.review-form {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  max-width: 480px;
}

.review-form-details summary {
  cursor: pointer;
  list-style: none;
}

.review-form-details summary::-webkit-details-marker {
  display: none;
}

.review-form-details summary::marker {
  content: '';
}

.review-form-summary {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.review-form-summary:hover {
  background: var(--accent-dark);
}

.review-form label {
  display: block;
  margin: 12px 0 4px;
  font-weight: 600;
  font-size: 0.9rem;
}

.review-form-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0 4px;
}

.review-form select,
.review-form textarea,
.review-form input[type=text] {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: inherit;
}

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

.review-form .radio-row {
  display: flex;
  gap: 16px;
}

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  background: var(--card-bg);
  transition: border-color 0.15s, background 0.15s;
}

.dropzone.dragover {
  border-color: var(--accent);
  background: #2b2211;
}

.dropzone-hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.dropzone input[type=file] {
  /* Hidden but still keyboard/screen-reader accessible via the <label for>
     that opens it — this is what makes tapping it open the native picker
     on mobile, same as a plain button would. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.dropzone-filelist {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: left;
}

.notice {
  background: #17271e;
  border: 1px solid #2d5240;
  color: var(--success);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 16px 0;
}

.error {
  background: #2b1917;
  border: 1px solid #5c332e;
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 12px 0;
}

.auth-form {
  max-width: 380px;
  margin: 40px auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
}

.auth-form h1 {
  margin-top: 0;
  font-size: 1.3rem;
}

.auth-form label {
  display: block;
  margin: 12px 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
}

.auth-form input:not([type="checkbox"]) {
  width: 100%;
  padding: 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.auth-form .btn {
  width: 100%;
  margin-top: 16px;
}

.auth-form .switch {
  margin-top: 14px;
  font-size: 0.9rem;
  text-align: center;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 30px;
}

table.admin-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  margin-bottom: 0;
}

table.admin-table th,
table.admin-table td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

table.admin-table th {
  color: var(--muted);
  font-weight: 600;
}

/* Denser variant for the admin users table specifically (2026-09-12,
   reported: needed horizontal scrolling to fit on screen) -- nine
   columns of mostly-short values (pills, an @handle, a date) don't need
   the same breathing room as a simpler table like moderators.ejs, so
   this tightens padding/font-size rather than touching table.admin-table
   itself and shrinking every admin list page along with it. */
table.users-table th,
table.users-table td {
  padding: 6px 8px;
  font-size: 0.8rem;
}

table.users-table .pill {
  padding: 1px 6px;
  font-size: 0.7rem;
}

/* Keeps a long email on one line instead of forcing the column (and so
   the whole table) wider -- the full address is still one hover away via
   the link's own title attribute. */
.truncate-cell {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.75rem;
  background: #2a2d32;
}

.pill.active {
  background: #1d3327;
  color: var(--success);
}

.pill.inactive {
  background: #33251a;
  color: #d9a05a;
}

form.inline {
  display: inline;
}

/* =========================================================
   ADMIN ACTION CARDS (e.g. user-detail.ejs)
   Equal-height cards in a grid, each with its form/button
   pinned to the bottom via margin-top:auto — keeps buttons on
   one visual baseline even when cards hold different amounts
   of text above them (a hint line, a ban-reason input, etc).
========================================================= */

.admin-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.admin-action-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}

.admin-action-card h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.admin-action-card .field-hint {
  margin-bottom: 12px;
}

.admin-action-card form {
  margin-top: auto;
}

.admin-action-card form .field-hint {
  margin-bottom: 4px;
}

/* =========================================================
   ADMIN PHOTO UPLOAD
========================================================= */

.admin-photo-upload-section {
  margin-top: 24px;
}

.admin-photo-upload-section h3 {
  margin-bottom: 10px;
}

.admin-photo-upload-section input[type="file"] {
  display: block;
  max-width: 100%;
}

/* =========================================================
   SKELBIU IMPORTER
========================================================= */

.admin-skelbiu-importer {
  margin-top: 30px;
  padding: 22px;
  max-width: 760px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.admin-skelbiu-importer h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.admin-skelbiu-importer > label {
  display: block;
  margin: 16px 0 5px;
  font-weight: 600;
  font-size: 0.9rem;
}

.admin-skelbiu-importer > input[type="text"] {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--card-bg);
  color: var(--text);
}

#adminSkelbiuDiscover {
  margin-top: 10px;
}

.skelbiu-status {
  min-height: 20px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.skelbiu-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.skelbiu-controls .btn {
  padding: 7px 12px;
  font-size: 0.82rem;
}

.skelbiu-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.skelbiu-photo-option {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: #2a2d32;
  transition:
    opacity 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}

.skelbiu-photo-option:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.skelbiu-photo-option img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.skelbiu-photo-option input[type="checkbox"] {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  width: 21px;
  height: 21px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.skelbiu-photo-number {
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 7px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.2;
  pointer-events: none;
}

.skelbiu-photo-option:has(input:not(:checked)) img {
  opacity: 0.35;
}

.skelbiu-photo-option:has(input:not(:checked)) {
  opacity: 0.7;
}

.skelbiu-photo-option:has(input:checked) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#adminSkelbiuImport {
  margin-top: 2px;
}

/* Review-side importer, if retained */

.skelbiu-importer {
  margin-top: 12px;
}

.skelbiu-import-button {
  margin-top: 6px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {
  .site-header .bar {
    align-items: flex-start;
    gap: 12px;
  }

  .site-header nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .admin-skelbiu-importer {
    padding: 16px;
  }

  .skelbiu-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 450px) {
  .container {
    padding: 0 14px;
  }

  .site-header .bar {
    display: block;
  }

  .site-header nav {
    margin-top: 12px;
    justify-content: flex-start;
  }

  .skelbiu-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-skelbiu-importer {
    padding: 14px;
  }

  .skelbiu-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .skelbiu-controls .btn {
    width: 100%;
  }
}

/* =========================================================================
   Leaderboard ("TOP vartotojai") -- redesigned 2026-10-04 from the owner's
   mockup: header with a period filter, a three-card podium (#2 | #1 | #3 on
   wide screens, #1 first when stacked), then a table for rank 4 and below.
   Each podium card sets --rank-color; the crown, rank number and avatar ring
   all read from it (gold / silver / bronze).
   ========================================================================= */

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin: 28px 0 10px;
}

.leaderboard-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.leaderboard-header-crown {
  display: inline-flex;
  flex: none;
  width: 46px;
  height: 46px;
  color: var(--accent);
}

.leaderboard-header-crown svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.leaderboard-title {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.leaderboard-title-rest {
  color: var(--accent);
}

.leaderboard-tagline {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.leaderboard-rule {
  margin: 0 0 4px;
}

/* Segmented period filter: two plain links, the current one filled gold. */
.leaderboard-filter {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.leaderboard-filter a {
  padding: 9px 18px;
  border-radius: 9px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.leaderboard-filter a:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.leaderboard-filter a.active,
.leaderboard-filter a.active:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---- Podium ---- */

.leaderboard-top3 {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 16px;
  align-items: center;
  margin: 24px 0 28px;
}

.leaderboard-top3 .leaderboard-card-1 { order: 2; }
.leaderboard-top3 .leaderboard-card-2 { order: 1; }
.leaderboard-top3 .leaderboard-card-3 { order: 3; }

.leaderboard-card {
  --rank-color: var(--muted);
  min-width: 0;
  padding: 20px 18px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  position: relative;
}

.leaderboard-card-1 { --rank-color: var(--accent); }
.leaderboard-card-2 { --rank-color: #c5cbd3; }
.leaderboard-card-3 { --rank-color: #cd8a5b; }

.leaderboard-card-first {
  padding-top: 24px;
  padding-bottom: 24px;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 28px rgba(227, 177, 85, 0.18);
}

/* The crown and rank number live INSIDE the card, in normal flow (the old
   crown was absolutely positioned on the top border, which on a phone read
   as a glyph cut in half by the card's outline). All three cards stack them
   the same way -- crown above, rank number under it, same crown size -- and
   only the colour differs (gold / silver / bronze, via --rank-color). */
.leaderboard-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 14px;
  color: var(--rank-color);
}

.leaderboard-crown {
  display: inline-flex;
  width: 32px;
  height: 32px;
}

.leaderboard-crown svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.leaderboard-rank-badge {
  display: inline-block;
  color: var(--rank-color);
  font-size: 1rem;
  font-weight: 700;
}

.leaderboard-avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--rank-color);
  background: #272b31;
  color: var(--rank-color);
  font-size: 1.15rem;
  font-weight: 700;
}

.leaderboard-card-first .leaderboard-avatar {
  width: 78px;
  height: 78px;
  font-size: 1.35rem;
  box-shadow: 0 0 0 4px rgba(227, 177, 85, 0.15);
}

.leaderboard-name {
  margin-bottom: 4px;
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.leaderboard-points {
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 800;
}

.leaderboard-card-first .leaderboard-points {
  font-size: 1.75rem;
}

.leaderboard-bar,
.leaderboard-bar-inline {
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.leaderboard-bar {
  margin: 0 auto 16px;
}

.leaderboard-bar-inline {
  width: 100%;
  min-width: 90px;
}

.leaderboard-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 20px;
}

.leaderboard-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.leaderboard-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
}

.leaderboard-chip-icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
  color: var(--muted);
}

.leaderboard-card-first .leaderboard-chip {
  border-color: rgba(227, 177, 85, 0.4);
}

.leaderboard-card-first .leaderboard-chip-icon {
  color: var(--accent);
}

/* ---- Table (rank 4 and below) ---- */

.leaderboard-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}

table.admin-table.leaderboard-table {
  min-width: 640px;
}

table.leaderboard-table th,
table.leaderboard-table td {
  padding: 13px 16px;
  vertical-align: middle;
}

table.leaderboard-table th {
  font-size: 0.8rem;
}

table.leaderboard-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Numbers (points, founding, additional, total, bar) are centred under
   their headers; rank and name stay left-aligned. */
table.leaderboard-table th:nth-child(n + 3),
table.leaderboard-table td:nth-child(n + 3) {
  text-align: center;
}

.leaderboard-rank-cell {
  font-weight: 700;
}

.leaderboard-points-cell {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 800;
}

.leaderboard-user {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.leaderboard-avatar-mini {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #272b31;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.leaderboard-user-name {
  font-weight: 600;
  overflow-wrap: break-word;
}

.leaderboard-bar-cell {
  width: 160px;
}

/* ---- Phones / narrow screens ---- */

@media (max-width: 760px) {
  .leaderboard-title {
    font-size: 1.5rem;
  }

  .leaderboard-header-crown {
    width: 38px;
    height: 38px;
  }

  .leaderboard-filter {
    width: 100%;
  }

  .leaderboard-filter a {
    flex: 1;
    text-align: center;
  }

  /* One column, in rank order: #1 first. */
  .leaderboard-top3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .leaderboard-top3 .leaderboard-card-1,
  .leaderboard-top3 .leaderboard-card-2,
  .leaderboard-top3 .leaderboard-card-3 {
    order: 0;
  }

  /* The table keeps rank / name / points / total; the breakdown and the
     progress bar (already on the podium cards) drop off rather than forcing
     a sideways scroll. */
  table.admin-table.leaderboard-table {
    min-width: 0;
  }

  .leaderboard-col-detail,
  .leaderboard-avatar-mini {
    display: none;
  }

  table.leaderboard-table th,
  table.leaderboard-table td {
    padding: 11px 10px;
  }
}


/* =========================================================================
   Home page -- redesigned 2026-10-04 from the owner's mockup: a hero with the
   search bar and category / city pills (optional cover photo), a row of
   stats, then the card grid (the card rules live next to .grid above).
   The hero photo is the file public/img/hero-cover.(jpg|webp|png) if present;
   without it the hero is a plain dark panel with a soft gold glow.
   ========================================================================= */

.hero {
  position: relative;
  margin: 24px 0 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(760px 320px at 88% 0%, rgba(227, 177, 85, 0.16), transparent 62%),
    linear-gradient(135deg, #1d2025 0%, #14161a 72%);
}

.hero-has-image {
  background:
    linear-gradient(90deg, rgba(20, 22, 26, 0.97) 0%, rgba(20, 22, 26, 0.88) 38%, rgba(20, 22, 26, 0.3) 66%, rgba(20, 22, 26, 0) 100%),
    var(--hero-image) right -140px center / auto 100% no-repeat,
    #14161a;
}

.hero-inner {
  position: relative;
  max-width: 700px;
  padding: 40px 36px 32px;
}

.hero-title {
  margin: 0 0 10px;
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 1.1;
}

.hero-title-accent {
  color: var(--accent);
}

.hero-subtitle {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1.1rem;
}

.home-search {
  margin: 0;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  background: rgba(20, 22, 26, 0.88);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.search-bar:focus-within {
  border-color: var(--accent);
}

.search-bar-icon {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

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

.home-search .search-bar input[type="text"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  outline: none;
}

.search-bar .btn {
  flex: none;
  padding: 12px 26px;
  border-radius: 10px;
}

.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 14px;
}

.filter-row-label {
  flex: none;
  min-width: 78px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* Scoped to the home search area: the admin pages already use a small status
   badge called .pill (yes/no, VIP, cover) that these buttons must not restyle. */
.home-search .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(20, 22, 26, 0.72);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.home-search .pill:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.home-search .pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.home-search .pill.active:hover {
  background: var(--accent-dark);
}

.home-search .pill-category {
  padding: 10px 20px;
  border-radius: 12px;
}

.pill-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.pill-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ---- Stats ---- */

.home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.stat-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(227, 177, 85, 0.12);
  color: var(--accent);
}

.stat-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-text strong {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-text span {
  color: var(--muted);
  font-size: 0.88rem;
}

.section-head {
  margin: 0 0 16px;
}

.section-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
}

/* ---- Tablets and phones ---- */

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-has-image {
    background:
      linear-gradient(90deg, rgba(20, 22, 26, 0.97) 0%, rgba(20, 22, 26, 0.9) 40%, rgba(20, 22, 26, 0.5) 72%, rgba(20, 22, 26, 0.15) 100%),
      var(--hero-image) right -200px center / auto 100% no-repeat,
      #14161a;
  }

  .hero-title {
    font-size: 2.3rem;
  }

  .hero-inner {
    max-width: 560px;
  }
}

/* Four stat cards need roughly 800px to fit the longest one-word labels
   ("Atsiliepimai", "участников"); below that they go two by two. */
@media (max-width: 820px) {
  .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-card {
    gap: 10px;
    padding: 12px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
  }

  .stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .stat-text strong {
    font-size: 1.2rem;
  }

  .stat-text span {
    font-size: 0.8rem;
  }

  .hero {
    margin-top: 16px;
  }

  .hero-has-image {
    background:
      linear-gradient(180deg, rgba(20, 22, 26, 0.42) 0%, rgba(20, 22, 26, 0.9) 100%),
      var(--hero-image) left 150px center / auto 100% no-repeat,
      #14161a;
  }

  .hero-inner {
    padding: 26px 16px 22px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    margin-bottom: 18px;
    font-size: 1rem;
  }

  .search-bar {
    padding-left: 12px;
  }

  .search-bar .btn {
    padding: 12px 16px;
  }

  .filter-row-label {
    width: 100%;
    min-width: 0;
  }

  .card .body {
    padding: 12px;
  }

  .card .name {
    font-size: 1.05rem;
  }
}


/* =========================================================================
   Blog -- added 2026-10-05. Public list (/blog), one article (/blog/<slug>)
   and the admin editor (/admin/blog). Everything is namespaced "blog-" so it
   cannot restyle another page.
   ========================================================================= */

.blog-header {
  margin: 28px 0 22px;
}

.blog-title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
}

.blog-tagline {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.blog-empty {
  color: var(--muted);
}

/* ---- List ---- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.blog-card:hover {
  text-decoration: none;
  border-color: rgba(227, 177, 85, 0.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.blog-card-cover {
  aspect-ratio: 16 / 9;
  background: #2a2d32;
}

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

.blog-card-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
}

.blog-card-cover-empty svg {
  width: 44px;
  height: 44px;
  fill: currentColor;
  opacity: 0.45;
}

.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}

.blog-card-date {
  color: var(--muted);
  font-size: 0.82rem;
}

.blog-card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.blog-card-excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.blog-card-more {
  margin-top: auto;
  padding-top: 6px;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
}

/* ---- One article ---- */

.blog-post {
  max-width: 760px;
  margin: 0 auto;
}

.blog-post-back {
  margin: 24px 0 8px;
  font-size: 0.92rem;
}

.blog-post-back-bottom {
  margin: 36px 0 8px;
}

.blog-post-title {
  margin: 0 0 8px;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.blog-post-meta {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.92rem;
}

.blog-post-cover {
  display: block;
  width: 100%;
  max-height: 460px;
  margin: 0 0 26px;
  object-fit: cover;
  border-radius: 14px;
}

.blog-draft-banner {
  margin-top: 20px;
}

.blog-body {
  font-size: 1.08rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.blog-body p {
  margin: 0 0 1.15em;
}

.blog-body h2,
.blog-body h3 {
  margin: 1.8em 0 0.6em;
  line-height: 1.3;
}

.blog-body h2 { font-size: 1.55rem; }
.blog-body h3 { font-size: 1.25rem; }

.blog-body ul,
.blog-body ol {
  margin: 0 0 1.15em;
  padding-left: 1.5em;
}

.blog-body li {
  margin-bottom: 0.4em;
}

.blog-body blockquote {
  margin: 0 0 1.15em;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.blog-body blockquote p {
  margin: 0;
}

.blog-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Admin ---- */

.blog-admin-title a {
  font-weight: 600;
}

.blog-admin-actions {
  white-space: nowrap;
}

.blog-admin-actions .btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.blog-form {
  max-width: 860px;
  margin-bottom: 40px;
}

.blog-form label {
  display: block;
  margin: 20px 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.blog-form input[type="text"],
.blog-form textarea,
.blog-form select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
}

.blog-form input[type="text"]:focus,
.blog-form textarea:focus,
.blog-form select:focus {
  border-color: var(--accent);
  outline: none;
}

.blog-form textarea {
  min-height: 90px;
  line-height: 1.55;
  resize: vertical;
}

.blog-form .blog-form-body {
  min-height: 340px;
}

.blog-form select {
  width: auto;
  min-width: 200px;
}

.blog-form input[type="file"] {
  display: block;
  max-width: 100%;
  color: var(--muted);
}

.blog-form-cover {
  margin-bottom: 10px;
}

.blog-form-cover img {
  display: block;
  max-width: 260px;
  max-height: 160px;
  margin-bottom: 6px;
  object-fit: cover;
  border-radius: 8px;
}

.blog-form .blog-form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
}

.blog-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* ---- Tablets and phones ---- */

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-title,
  .blog-post-title {
    font-size: 1.8rem;
  }

  .blog-body {
    font-size: 1.02rem;
  }

  .blog-admin-actions {
    white-space: normal;
  }
}

/* A small arrow after links that leave the site (blog posts only). */
.blog-body a[target="_blank"]::after {
  content: "\2197"; /* north-east arrow */
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.85em;
  text-decoration: none;
}


/* =========================================================================
   Latest comments -- /latest-comments, added 2026-10-15: the 10 newest
   additional reviews, one linked row each. Namespaced "comment(s)-" so it
   cannot restyle another page.
   ========================================================================= */

.comments-header {
  margin: 28px 0 22px;
}

.comments-title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
}

.comments-tagline {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.comments-empty {
  color: var(--muted);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin-bottom: 32px;
}

.comment-row {
  display: block;
  min-width: 0;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.comment-row:hover {
  text-decoration: none;
  border-color: rgba(227, 177, 85, 0.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.comment-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.comment-row-name {
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.comment-row-city {
  color: var(--muted);
  font-size: 0.9rem;
}

.comment-row-age {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.comment-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 6px;
}

.comment-row-author {
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.comment-row-text {
  margin: 10px 0 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.comment-row-open {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
}

@media (max-width: 600px) {
  .comments-title {
    font-size: 1.8rem;
  }

  .comment-row {
    padding: 14px;
  }

  .comment-row-age {
    margin-left: 0;
  }
}


/* =========================================================================
   Review text counter ("1234 / 4000", public/js/char-counter.js) and the
   "Install app" button + iPhone instruction (public/js/pwa-install.js),
   added 2026-10-16.
   ========================================================================= */

.char-counter {
  margin-top: 4px;
  text-align: right;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.char-counter-near {
  color: var(--accent);
}

.char-counter-full {
  color: var(--danger);
  font-weight: 600;
}

/* A .btn is display:flex-ish, which would beat the hidden attribute. */
.pwa-install[hidden],
.pwa-hint[hidden] {
  display: none;
}

.pwa-install {
  white-space: nowrap;
}

.pwa-hint {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 9000; /* above the page, below the 18+ gate (9999) */
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

.pwa-hint p {
  flex: 1;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}