/* ==========================================================================
   Bodekoti — Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET & CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Core palette — warmer earth tones with deeper accents.
     Naming kept so nothing breaks; values tightened for hierarchy. */
  --clay: #F4EFE8;          /* surfaces, hover background */
  --clay2: #EAE4D9;
  --sand: #FAF7F2;          /* page background — warmer off-white */
  --white: #FFFFFF;
  --ink: #1C1614;           /* primary text — slightly warmer black */
  --muted: #7B746A;         /* muted text */
  --border: #E8E1D6;
  --tag: #EAE4D9;

  /* Brand */
  --warm: #C8763A;          /* primary CTA — terracotta, slightly more saturated */
  --warm2: #DA8A4D;
  --warm-tint: rgba(200,118,58,0.10);
  --forest: #2D5645;        /* secondary accent — actual forest green now */
  --forest2: #3A6B57;

  /* Semantic */
  --red: #B83A2C;
  --blue: #2563B7;
  --green: #2D8758;

  /* Surface tokens — layered shadows for real depth */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(28,22,20,0.06);
  --shadow: 0 1px 3px rgba(28,22,20,0.06), 0 4px 12px rgba(28,22,20,0.04);
  --shadow-lg: 0 4px 16px rgba(28,22,20,0.08), 0 12px 32px rgba(28,22,20,0.06);
  --shadow-hover: 0 8px 24px rgba(28,22,20,0.10), 0 16px 48px rgba(28,22,20,0.08);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Heebo', sans-serif;
  background: var(--sand);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   LANGUAGE OVERRIDES
   -------------------------------------------------------------------------- */

[lang="en"] body,
[lang="en"] * {
  font-family: 'Lora', serif;
}

[lang="en"] .he-only {
  display: none !important;
}

[lang="en"] .en-only {
  display: inline !important;
}

.en-only {
  display: none;
}

/* --------------------------------------------------------------------------
   PAGE TRANSITIONS
   -------------------------------------------------------------------------- */

.page {
  display: none;
  min-height: 100vh;
  animation: fadeIn 0.3s ease;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */

nav {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 200;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 12px;
  box-shadow: 0 1px 0 var(--border);
}

.nav-logo {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--warm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo .badge {
  background: var(--warm);
  color: #fff;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 17px;
}

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-btn {
  background: none;
  border: none;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 8px;
  transition: background 0.15s;
  white-space: nowrap;
}

.nav-btn:hover,
.nav-btn.active {
  background: var(--clay);
  color: var(--warm);
}

.nav-cta {
  background: var(--warm);
  color: #fff;
  border-radius: 8px;
  padding: 7px 16px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}

.nav-cta:hover {
  background: var(--warm2);
}

.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

/* LinkedIn-style nav button: icon on top, small caption below.
   Emojis are forced to a monochrome dark-grey via filter so the
   whole row reads as one structural color, not a rainbow of icons. */
.nav-icon-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  padding: 6px 8px 4px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--muted);
  transition: color 0.12s, background 0.12s;
}
.nav-icon-btn .nav-icon {
  position: relative;
  line-height: 0; /* sit the SVG flush with the caption below */
  color: #5E6770; /* base icon color — dark slate grey, LinkedIn-ish */
  transition: color 0.12s;
}
.nav-icon-btn .nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke-width: 1.75;
}
.nav-icon-btn .nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-icon-btn:hover {
  background: transparent;
  color: var(--ink);
}
.nav-icon-btn:hover .nav-icon {
  color: var(--ink);
}
.nav-icon-btn.active {
  background: transparent;
  color: var(--ink);
}
.nav-icon-btn.active .nav-icon {
  filter: grayscale(1);
}
.nav-icon-btn.active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -10px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}

/* Tablet + mobile: hide nav button captions so the logo and the
   signed-in user's avatar stay on-screen. The title attribute on
   each button still provides the label on hover/long-press, and
   the bottom mobile-nav below 700px keeps full labels visible. */
@media (max-width: 1024px) {
  .nav-icon-btn {
    min-width: 0;
    padding: 6px 6px;
  }
  .nav-icon-btn .nav-label { display: none; }
  .nav-icon-btn .nav-icon { font-size: 20px; }
  .nav-icon-btn.active::after {
    bottom: -6px;
    left: 4px;
    right: 4px;
  }
  .nav-links { gap: 4px; flex-wrap: nowrap; }
  nav { padding: 0 14px; gap: 10px; }
}
@media (max-width: 720px) {
  nav { padding: 0 10px; gap: 6px; }
  .nav-links { gap: 2px; }
}

.nav-icon-btn:hover {
  background: var(--clay);
}

.nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  padding: 0 3px;
}

.notif-dot {
  position: relative;
}

.notif-dot::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--white);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  background: linear-gradient(135deg, #1A3A2E 0%, #2B5A48 50%, #1A3A2E 100%);
  color: #fff;
  padding: 80px 24px 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  display: none;
}

.hero-tag {
  display: inline-block;
  background: rgba(200, 135, 58, 0.25);
  border: 1px solid rgba(200, 135, 58, 0.5);
  color: var(--warm2);
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
}

.hero h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(32px, 5.5vw, 56px);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 14px;
  max-width: 660px;
  margin-inline: auto;
}

.hero h1 em {
  color: var(--warm2);
  font-style: normal;
}

.hero p {
  font-size: 18px;
  opacity: 0.82;
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.hero-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-main {
  background: var(--warm);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 32px;
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(212,135,58,0.3);
}

.btn-main:hover {
  background: var(--warm2);
  transform: translateY(-2px);
}

.btn-sec {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 14px 32px;
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-sec:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  flex-wrap: wrap;
}

.stat-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 34px;
  font-weight: 900;
  color: var(--warm2);
}

.stat-label {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   HOME PAGE (Pinterest-style)
   -------------------------------------------------------------------------- */

.home-hero {
  background: var(--white);
  color: var(--ink);
  padding: 24px 24px 20px;
  text-align: center;
  border-bottom: none;
  box-shadow: var(--shadow);
}

.home-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.home-hero-logo {
  height: 300px;
  margin-bottom: 16px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
}

@media (max-width: 640px) {
  .home-hero-logo {
    height: 220px;
  }
}

/* face.png hero — large, framed in soft-rounded black to embrace
   the image's own black background. Centered, dramatic. If the
   image is later replaced with a transparent-background PNG,
   removing `background: #000` is enough to drop the frame. */
.home-hero-face {
  display: block;
  width: min(480px, 90vw);
  aspect-ratio: 1;
  margin: 0 auto 28px;
  border-radius: 24px;
  object-fit: cover;
  background: #000;
  box-shadow: 0 16px 56px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.12);
}
@media (max-width: 640px) {
  .home-hero-face {
    width: min(320px, 80vw);
    border-radius: 20px;
  }
}

/* face.png nav mark — small circular framed version of the same image. */
.nav-face {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
@media (max-width: 640px) {
  .nav-face { width: 52px; height: 52px; }
}

.home-hero h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  color: var(--ink);
}

/* Emphasized phrase inside the hero h1. Earlier this used a bright
   warm color, but flipping mid-sentence to a different color broke
   the typography rhythm. Now: keep the text in the same ink, just
   add a thick brand-warm underline so emphasis is visual but
   subtler. font-style: normal kills the browser default italic
   (Hebrew italics render badly). */
.home-hero h1 em {
  color: inherit;
  font-style: normal;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.home-hero h1 em::after {
  content: '';
  position: absolute;
  inset-inline-start: 6%;
  inset-inline-end: 6%;
  bottom: -2px;
  height: 4px;
  background: var(--warm);
  border-radius: 4px;
  opacity: 0.9;
}

.home-search-row {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto 16px;
}

.home-search {
  flex: 1;
  background: var(--clay);
  border: none;
  border-radius: 20px;
  padding: 12px 16px;
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  direction: rtl;
  transition: all 0.15s;
}

.home-search::placeholder {
  color: var(--muted);
}

.home-search:focus {
  background: var(--white);
  border: none;
  box-shadow: 0 0 0 2px var(--warm);
}

/* City input had a tight 140px cap that made the search row look
   lopsided next to the wider main search. Let it share width with
   the main search instead — both wrappers already have flex:1
   inline, so this just removes the artificial cap. */
.home-search-city {
  width: 100%;
}

.home-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.home-chips .chip {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 20px;
}

.home-chips .chip:hover {
  background: var(--clay);
}

.home-chips .chip.active {
  background: var(--warm);
  border-color: var(--warm);
  color: #fff;
}

/* ─── LINKEDIN-STYLE 3-COL HOME (signed-in only) ─────────
   Right sidebar = profile + my projects. Left sidebar =
   suggested projects + pros. Center = personal feed.
   Hidden by default; revealed when body.signed-in. */
.home-3col {
  display: none;
  max-width: 1240px;
  margin: 18px auto 0;
  padding: 0 16px;
  gap: 22px;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  align-items: start;
}
body.signed-in .home-3col { display: grid; }
body.signed-in #home-top-pros { display: none; }

.home-3col-main { min-width: 0; }
.home-3col-side {
  position: sticky;
  top: 110px;
  align-self: start;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.home-3col-side::-webkit-scrollbar { width: 6px; }
.home-3col-side::-webkit-scrollbar-thumb {
  background: var(--clay2);
  border-radius: 3px;
}

.home-3col-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-bottom: 14px;
}
.home-side-card-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}

/* ─── Profile card (right sidebar) ─── */
.home-side-profile-card {
  padding: 0;
  overflow: hidden;
  text-align: center;
}
.home-side-cover {
  height: 70px;
  background-size: cover;
  background-position: center;
}
.home-side-av {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: -36px auto 8px;
  border: 4px solid var(--white);
  background: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  overflow: hidden;
}
.home-side-av img { width: 100%; height: 100%; object-fit: cover; }
.home-side-name {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 18px;
  font-weight: 800;
  padding: 0 14px;
}
.home-side-spec {
  font-size: 12px;
  color: var(--warm);
  font-weight: 600;
  padding: 2px 14px 0;
}
.home-side-bio {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 14px 4px;
  line-height: 1.5;
}
.home-side-btn {
  display: block;
  margin: 12px 14px 16px;
  background: var(--warm);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: calc(100% - 28px);
  transition: background 0.15s;
}
.home-side-btn:hover { background: var(--warm2); }
.home-side-btn-secondary {
  display: block;
  margin-top: 10px;
  background: transparent;
  color: var(--warm);
  border: 1.5px solid var(--warm);
  border-radius: 10px;
  padding: 8px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.home-side-btn-secondary:hover { background: var(--warm-tint); }

/* ─── List items inside sidebar cards ─── */
.home-side-proj, .home-side-pro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 8px;
  margin: 0 -6px;
  padding-inline: 6px;
  transition: background 0.15s;
}
.home-side-proj:hover, .home-side-pro:hover { background: var(--clay); }
.home-side-proj-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--clay2);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.home-side-proj-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-side-proj-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-side-pro-emoji, .home-side-pro img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  object-fit: cover;
}
.home-side-pro-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-side-pro-spec {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stack everything on tablet/mobile */
@media (max-width: 1024px) {
  .home-3col {
    grid-template-columns: 1fr;
    margin-top: 8px;
  }
  .home-3col-side {
    display: none;
  }
  /* Don't reserve space for an empty 3-col container — when both
     sidebars are gone and the personal feed isn't populated yet,
     the wrapper collapses to its natural height instead of pushing
     the discover section halfway down the screen. */
  body.signed-in .home-3col {
    gap: 0;
    padding: 0;
  }
  body.signed-in #personal-feed-section { padding: 0 12px; }
}

/* ─── NAV SEARCH (signed-in only) ────────────────────────
   A live search input that sits inside the sticky nav so it
   stays visible while scrolling the feed. Hidden for signed-out
   users, who get the big hero search instead. */
.nav-search-wrap {
  display: none;
  flex: 1;
  min-width: 0;
  max-width: 420px;
  position: relative;
}

/* Typeahead dropdown — appears under the nav search input. */
.nav-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(28,22,20,0.14), 0 4px 12px rgba(28,22,20,0.06);
  max-height: 420px;
  overflow-y: auto;
  z-index: 250;
  display: none;
  padding: 6px;
}
.nav-search-dropdown.open { display: block; }
.nav-search-section-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 10px 4px;
}
.nav-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.nav-search-result:hover { background: var(--clay); }
.nav-search-result-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.nav-search-result-av img { width: 100%; height: 100%; object-fit: cover; }
.nav-search-result-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-search-result-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.nav-search-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
body.signed-in .nav-search-wrap {
  display: block;
}
.nav-search {
  width: 100%;
  background: var(--clay);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 8px 16px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  direction: rtl;
  transition: all 0.15s;
}
.nav-search::placeholder { color: var(--muted); }
.nav-search:focus {
  background: var(--white);
  border-color: var(--warm);
  box-shadow: 0 0 0 2px rgba(192,115,58,0.15);
}
@media (max-width: 640px) {
  .nav-search-wrap { max-width: 180px; }
  .nav-search { padding: 7px 12px; font-size: 13px; }
}

/* ─── SIGNED-IN COMPACT HOME ─────────────────────────────
   When a user is logged in we don't need the big hero pitch.
   Hide the logo, headline, hero search, and construction banner
   so the personal feed is the first thing they see. The category
   chips stay as a slim sticky row below the nav. */
body.signed-in .home-hero {
  padding: 8px 16px;
  text-align: right;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: sticky;
  top: 90px;
  z-index: 49;
  background: var(--white);
}
body.signed-in .home-hero-content {
  max-width: 1200px;
  display: flex;
  align-items: center;
}
body.signed-in .home-hero-logo,
body.signed-in .home-hero-face,
body.signed-in .home-hero h1,
body.signed-in .home-search-row {
  display: none;
}
body.signed-in .home-chips {
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 2px;
  scrollbar-width: none;
}
body.signed-in .home-chips::-webkit-scrollbar { display: none; }
body.signed-in .home-chips .chip {
  padding: 5px 12px;
  font-size: 12px;
  flex-shrink: 0;
}
/* MASONRY GRID */
/* Discover grid — uses CSS Grid auto-fill instead of CSS multi-column
   so that with a small number of projects the layout doesn't leave
   ugly empty columns (the old `columns: 3` parked a single item in
   one narrow column and left two-thirds of the row blank). The
   `align-items: start` prevents row-stretching so cards keep their
   natural height (no fake "masonry", but cleaner with few items). */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px 16px;
  align-items: start;
}

.masonry-item {
  margin-bottom: 0;
  background: var(--white);
  border-radius: var(--radius);
  border: none;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: none;
}

.masonry-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.masonry-img {
  width: 100%;
  display: block;
}

.masonry-img video {
  width: 100%;
  display: block;
}

.masonry-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--clay2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.masonry-body {
  padding: 10px 12px 6px;
}

.masonry-title {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.masonry-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.masonry-pros {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.masonry-pro-tag {
  background: var(--clay);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
  transition: background 0.15s;
}

.masonry-pro-tag:hover {
  background: var(--warm);
  color: #fff;
}

.masonry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 10px;
  border-top: none;
  font-size: 11px;
  color: var(--muted);
}

.masonry-author {
  display: flex;
  align-items: center;
  gap: 6px;
}

.masonry-author-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.masonry-author-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.masonry-save {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 2px;
  transition: transform 0.15s;
}

.masonry-save:hover {
  transform: scale(1.2);
}

.masonry-media-count {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 500px) {
  /* Single-column grid for phone-sized viewports — Grid auto-fill
     already collapses to one column when the viewport is narrower
     than 280px, but force it earlier so cards aren't cramped. */
  .masonry-grid { grid-template-columns: 1fr; }
  .home-search-row { flex-direction: column; }
  .home-search-city { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   FILTERS BAR
   -------------------------------------------------------------------------- */

.filters-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 64px;
  z-index: 100;
}

.chip {
  background: var(--clay);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: all 0.15s;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--warm);
  color: var(--warm);
}

.chip.active {
  background: var(--warm);
  color: #fff;
  border-color: var(--warm);
  box-shadow: 0 2px 8px rgba(212,135,58,0.2);
}

.search-box {
  flex: 1;
  min-width: 160px;
  max-width: 260px;
  background: var(--clay);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 8px 13px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  direction: rtl;
}

.search-box:focus {
  border-color: var(--warm);
  background: #fff;
}

/* --------------------------------------------------------------------------
   SECTION LAYOUT
   -------------------------------------------------------------------------- */

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

.sec-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec-title::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: var(--border);
}

/* --------------------------------------------------------------------------
   GRIDS
   -------------------------------------------------------------------------- */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

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

/* --------------------------------------------------------------------------
   PROJECT CARD
   -------------------------------------------------------------------------- */

.proj-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.proj-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card-media {
  aspect-ratio: 4/3;
  background: var(--clay2);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-media img,
.card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-media .placeholder {
  font-size: 56px;
}

.card-cat-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(26, 18, 8, 0.7);
  color: #fff;
  border-radius: 16px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
}

.card-save-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 253, 249, 0.92);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: transform 0.15s;
}

.card-save-btn:hover {
  transform: scale(1.15);
}

.card-body {
  padding: 14px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.4;
}

.card-loc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.pro-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pro-tag {
  background: var(--tag);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--forest);
  transition: background 0.15s;
}

.pro-tag:hover {
  background: var(--clay2);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.card-client-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.mini-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.card-nums {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.media-count-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(26, 18, 8, 0.65);
  color: #fff;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   PROFESSIONAL CARD
   -------------------------------------------------------------------------- */

.pro-card {
  background: var(--white);
  border-radius: 12px;
  border: none;
  box-shadow: var(--shadow);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.pro-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.pro-av {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--border);
}

.pro-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

.pro-role {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.pro-stars {
  color: var(--warm);
  font-size: 13px;
  margin-bottom: 7px;
}

.skills-row {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.skill-pill {
  background: var(--clay);
  border-radius: 16px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
}

.pro-cta {
  background: var(--forest);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}

.pro-cta:hover {
  background: var(--forest2);
}

.verified-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #E8F4EE;
  color: var(--forest);
  border-radius: 16px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
}

.pro-save-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 17px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   MODAL / OVERLAY
   -------------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.overlay.open {
  display: flex;
}

.modal {
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  max-width: 700px;
  position: relative;
  animation: slideUp 0.3s ease;
  margin: auto;
  box-shadow: var(--shadow-lg);
}

@keyframes slideUp {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.modal-x {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--clay);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--ink);
}

.modal-media {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--clay2);
  position: relative;
}

.modal-media img,
.modal-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-body {
  padding: 22px;
}

.modal-cat-tag {
  display: inline-block;
  background: var(--clay);
  border-radius: 16px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--forest);
}

.modal-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
}

.modal-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.modal-desc {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 18px;
}

.sub-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* Modal — professional row */

.pro-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sand);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}

.pro-row-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.pro-row-info {
  flex: 1;
}

.pro-row-name {
  font-size: 14px;
  font-weight: 700;
}

.pro-row-role {
  font-size: 12px;
  color: var(--muted);
}

.pro-row-btn {
  background: var(--warm);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   MEDIA GALLERY STRIP
   -------------------------------------------------------------------------- */

.media-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: none;
}

.media-strip::-webkit-scrollbar {
  display: none;
}

.media-thumb {
  width: 72px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: border-color 0.15s;
}

.media-thumb.active,
.media-thumb:hover {
  border-color: var(--warm);
}

.media-thumb-vid {
  position: relative;
  width: 72px;
  height: 54px;
  flex-shrink: 0;
}

.media-thumb-vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
}

.media-thumb-vid::after {
  content: '\25B6';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   REVIEWS
   -------------------------------------------------------------------------- */

.review-card {
  background: var(--sand);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}

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

.review-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.review-name {
  font-size: 13px;
  font-weight: 700;
}

.review-date {
  font-size: 11px;
  color: var(--muted);
}

.review-stars {
  color: var(--warm);
  font-size: 13px;
  margin-bottom: 4px;
}

.review-text {
  font-size: 13px;
  line-height: 1.6;
}

/* Review form */

.add-review-form {
  background: var(--clay);
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
}

.star-selector {
  display: flex;
  gap: 4px;
  font-size: 22px;
  cursor: pointer;
  margin-bottom: 10px;
  direction: ltr;
  justify-content: flex-end;
}

.star-selector span {
  transition: transform 0.1s;
  color: #ccc;
}

.star-selector span.lit {
  color: var(--warm);
}

.star-selector span:hover {
  transform: scale(1.2);
}

/* --------------------------------------------------------------------------
   MESSAGING
   -------------------------------------------------------------------------- */

.msg-layout {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.msg-sidebar {
  width: 300px;
  border-left: 1.5px solid var(--border);
  background: var(--white);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.msg-sidebar-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 16px;
}

.conv-list {
  flex: 1;
  overflow-y: auto;
}

.conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

.conv-item:hover,
.conv-item.active {
  background: var(--clay);
}

.conv-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.conv-item:hover .conv-delete-btn { opacity: 0.55; }
.conv-delete-btn:hover {
  opacity: 1 !important;
  background: rgba(184,58,44,0.10);
  color: var(--red);
}

.conv-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.conv-name {
  font-size: 14px;
  font-weight: 600;
}

.conv-preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.conv-unread {
  background: var(--warm);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
}

.msg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--sand);
}

.msg-main-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}

.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg-bubble {
  position: relative;
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.msg-bubble.mine {
  background: var(--warm);
  color: #fff;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.msg-bubble.theirs {
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.msg-time {
  font-size: 10px;
  opacity: 0.65;
  margin-top: 4px;
}

/* Floating menu shown when the ✕ on a message is clicked.
   "Delete for me" + (own messages only) "Delete for everyone". */
.msg-del-menu {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(28,22,20,0.18), 0 2px 8px rgba(28,22,20,0.06);
  padding: 4px;
  z-index: 1000;
  min-width: 170px;
  border: 1px solid var(--border);
}
.msg-del-menu button {
  display: block;
  width: 100%;
  text-align: right;
  background: none;
  border: none;
  padding: 9px 14px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}
.msg-del-menu button:hover { background: var(--clay); }

/* Subtle delete button on own messages — visible always but faint,
   bumped to full opacity on hover so it doesn't compete with the
   message content. Sits in the bubble's near corner (top-left for
   "mine" since RTL flips the alignment, top-right for "theirs"). */
.msg-delete-btn {
  position: absolute;
  top: 4px;
  left: 6px;
  background: none;
  border: none;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s;
}
.msg-delete-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.2);
}
.msg-bubble.theirs .msg-delete-btn:hover {
  background: rgba(0,0,0,0.08);
}

/* Structured "join request" messages — project chip + inline actions */
.msg-proj-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.08);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}
.msg-bubble.mine .msg-proj-chip {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.msg-proj-chip:hover { filter: brightness(1.05); }
.msg-proj-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.msg-req-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.msg-req-btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 7px 10px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.msg-req-btn.approve {
  background: #16a34a;
  color: #fff;
}
.msg-req-btn.approve:hover { background: #15803d; }
.msg-req-btn.reject {
  background: rgba(0,0,0,0.08);
  color: var(--ink);
}
.msg-bubble.mine .msg-req-btn.reject {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.msg-req-btn.reject:hover { background: rgba(0,0,0,0.15); }

.msg-req-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.msg-req-pill.approved {
  background: rgba(22,163,74,0.15);
  color: #15803d;
}
.msg-req-pill.rejected {
  background: rgba(220,38,38,0.12);
  color: #b91c1c;
}
.msg-req-pill.pending {
  background: rgba(0,0,0,0.08);
  color: var(--muted);
}
.msg-bubble.mine .msg-req-pill.pending {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.msg-input-row {
  padding: 12px 16px;
  background: var(--white);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
}

.msg-input {
  flex: 1;
  background: var(--clay);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 9px 13px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  direction: rtl;
}

.msg-input:focus {
  border-color: var(--warm);
  background: var(--white);
}

.msg-send-btn {
  background: var(--warm);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.msg-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 15px;
  flex-direction: column;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   SAVED PAGE
   -------------------------------------------------------------------------- */

.saved-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 20px;
}

.saved-tab {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2.5px solid transparent;
  transition: all 0.15s;
}

.saved-tab.active {
  color: var(--warm);
  border-bottom-color: var(--warm);
}

/* --------------------------------------------------------------------------
   AUTH (LOGIN / REGISTER)
   -------------------------------------------------------------------------- */

/* Pill-style auth tabs (login / register switcher) */
.auth-tabs {
  display: flex;
  background: var(--clay);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 22px;
  position: relative;
}

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

.auth-tab:hover { color: var(--ink); }

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

/* User type cards (client / pro / visitor) — larger, more delightful */
.user-type-sel {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.uts {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  background: var(--white);
  transition: all 0.18s var(--ease);
  position: relative;
}

.uts:hover {
  border-color: var(--warm);
  background: var(--warm-tint);
  transform: translateY(-1px);
}

.uts.active {
  border-color: var(--warm);
  background: var(--warm-tint);
  box-shadow: 0 0 0 3px rgba(200,118,58,0.15);
}

.uts.active::after {
  content: '✓';
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  background: var(--warm);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.uts-icon {
  font-size: 26px;
  margin-bottom: 5px;
}

.uts-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.uts-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ─── POST ACTIONS ROW (likes + comment count) ────────── */
.post-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.post-action-btn:hover {
  background: var(--clay);
  color: var(--ink);
}
.post-action-btn:active { transform: scale(0.96); }
.post-action-btn.liked { color: var(--red); }
.post-action-btn.liked:hover { background: rgba(184,58,44,0.08); }
.post-action-icon { font-size: 16px; line-height: 1; }
.post-action-count {
  background: var(--clay2);
  color: var(--ink);
  border-radius: 9px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  margin-inline-start: 2px;
}
.post-action-btn.liked .post-action-count {
  background: rgba(184,58,44,0.12);
  color: var(--red);
}
.post-action-stat {
  font-size: 12px;
  color: var(--muted);
  margin-inline-start: auto;
  padding: 0 6px;
}

/* ─── ONBOARDING MODAL ─────────────────────────────────────
   Shown to new users after first sign-in. Friendlier hero,
   step list, single CTA. */
.onboard-modal {
  max-width: 460px;
  overflow: hidden;
}
.onboard-hero {
  height: 120px;
  background: linear-gradient(135deg, var(--warm) 0%, var(--warm2) 50%, var(--forest) 130%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.onboard-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.18) 0, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.12) 0, transparent 35%);
  pointer-events: none;
}
.onboard-emoji {
  font-size: 56px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
  z-index: 1;
}
.onboard-body { padding: 28px 28px 24px; }
.onboard-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.015em;
  text-align: center;
  margin-bottom: 6px;
}
.onboard-sub {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.onboard-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.onboard-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--clay);
  border-radius: 12px;
  transition: background 0.15s;
}
.onboard-step:hover { background: var(--clay2); }
.onboard-step-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.onboard-step-title {
  font-size: 14px;
  font-weight: 700;
}
.onboard-step-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.onboard-cta {
  width: 100%;
}
.onboard-skip {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  margin-top: 10px;
  padding: 6px;
  transition: color 0.15s;
}
.onboard-skip:hover { color: var(--ink); }

/* Password show/hide toggle wrapper */
.fg-pass {
  position: relative;
}
.fg-pass input {
  padding-inline-end: 44px;
}
.pass-toggle {
  position: absolute;
  inset-inline-end: 12px;
  bottom: 9px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  color: var(--muted);
  font-size: 16px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.pass-toggle svg { width: 18px; height: 18px; display: block; }
.pass-toggle:hover {
  color: var(--ink);
  background: var(--clay);
}

/* --------------------------------------------------------------------------
   UPLOAD / FORM
   -------------------------------------------------------------------------- */

.form-wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 28px 20px;
}

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  padding: 26px;
}

.form-ttl {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.form-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}

.fg {
  margin-bottom: 18px;
}

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

.fg input,
.fg select,
.fg textarea {
  width: 100%;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 13px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  direction: rtl;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--warm);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(212,135,58,0.1);
}

.fg textarea {
  resize: vertical;
  min-height: 80px;
}

.upload-zone {
  border: 2.5px dashed var(--border);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--muted);
}

.upload-zone:hover {
  border-color: var(--warm);
  background: var(--clay);
  color: var(--warm);
}

.upload-zone input[type=file] {
  display: none;
}

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

.media-prev-thumb {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  position: relative;
  border: 1.5px solid var(--border);
}

.media-prev-thumb video {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.rm-media {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tags */

.tag-area {
  background: var(--sand);
  border-radius: 10px;
  padding: 12px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.tag-item {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tag-item:hover,
.tag-item.tagged {
  border-color: var(--warm);
  background: var(--warm);
  color: #fff;
}

/* Submit button */

.btn-submit {
  background: var(--warm);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 13px 26px;
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 16px rgba(200,118,58,0.20);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  transition: background 0.15s;
  position: relative;
}

.btn-submit:hover {
  background: var(--warm2);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 10px 22px rgba(200,118,58,0.28);
}
.btn-submit:active { transform: translateY(0); }

/* Inline icons inside buttons/links — sized 16px, flush with the
   surrounding text, inheriting color via currentColor. */
.btn-submit, .btn-main, .btn-sec, .camera-btn, .wa-share-bar,
.pro-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-submit svg, .btn-main svg, .btn-sec svg, .camera-btn svg,
.wa-share-bar svg, .pro-action-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Larger icons inside the avatar edit hint, empty states, and the
   upload zone hero. */
.av-edit-hint svg { width: 16px; height: 16px; }
.upload-zone-icon { margin-bottom: 8px; color: var(--muted); }
.upload-zone-icon svg { width: 36px; height: 36px; }
.empty-state-icon { margin-bottom: 14px; color: var(--muted); display: flex; justify-content: center; }
.empty-state-icon svg { width: 40px; height: 40px; }
.feature-icon { margin-bottom: 10px; color: var(--warm); display: flex; justify-content: center; }
.feature-icon svg { width: 32px; height: 32px; }

/* Section titles get a small leading icon. */
.sec-title svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); }

/* Inline-icon wrappers used inside meta lines / badges / chips
   to keep the SVG baseline-aligned with the surrounding Hebrew
   text. */
.meta-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.meta-with-icon svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Badges and pills that now host icon+text */
.verified-badge, .pro-cert-badge, .pro-identity-verified,
.msg-req-pill, .post-action-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.verified-badge svg, .pro-cert-badge svg,
.pro-identity-verified svg, .msg-req-pill svg,
.post-action-stat svg { flex-shrink: 0; }

/* Inline icons in text flows (meta lines, post action stats, etc.).
   Wrap a Lucide SVG in <span class="inl-ic">...</span> to get the
   correct vertical alignment without breaking the surrounding text. */
.inl-ic {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-inline-end: 4px;
}
.inl-ic svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Generic icon-only square buttons (remove ✕, edit ✏️, etc.) — keep
   the SVG centered within the existing tap target. */
button > svg { vertical-align: middle; }
button.msg-delete-btn svg, button.conv-delete-btn svg,
button.sidebar-edit-btn svg, button.modal-x svg { width: 14px; height: 14px; }
.fv-btn svg { width: 16px; height: 16px; }
.pro-tag svg { width: 14px; height: 14px; vertical-align: middle; }
.pro-save-icon svg, .masonry-save svg, .feed-save-btn svg { width: 18px; height: 18px; }
.feed-action-btn svg { width: 14px; height: 14px; }
.post-media-btn svg { width: 14px; height: 14px; }
.review-stars svg { width: 14px; height: 14px; vertical-align: middle; }
.post-action-icon svg { width: 18px; height: 18px; }
.masonry-media-count svg { width: 12px; height: 12px; }

.btn-submit.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   PROFESSIONAL PROFILE PAGE
   -------------------------------------------------------------------------- */

/* ─── PRO PROFILE PAGE (LinkedIn/Facebook style) ─── */

/* Cover photo */
.pro-cover {
  position: relative;
  height: 280px;
  background: linear-gradient(135deg, #1A3A2E 0%, #2B5A48 40%, #1A3A2E 100%);
  overflow: hidden;
}

.pro-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pro-cover-edit {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s;
}

.pro-cover-edit:hover {
  background: rgba(0,0,0,0.7);
}

.pro-cover-back {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s;
}

.pro-cover-back:hover {
  background: rgba(0,0,0,0.6);
}

/* Identity card (overlaps cover) */
.pro-identity {
  max-width: 900px;
  margin: -60px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

.pro-identity-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 0 24px 24px;
}

.pro-identity-top {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.pro-identity-av {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 5px solid var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  overflow: hidden;
  flex-shrink: 0;
  margin-top: -65px;
  background: var(--clay2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 700;
  color: #fff;
}

.pro-identity-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pro-identity-info {
  flex: 1;
  padding-top: 12px;
  min-width: 0;
}

.pro-identity-name {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 4px;
}

.pro-identity-headline {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 4px;
  line-height: 1.4;
}

.pro-identity-location {
  font-size: 13px;
  color: var(--muted);
}

.pro-identity-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #E8F4EE;
  color: #1B5E3B;
  border-radius: 16px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
}

/* Stats bar */
.pro-stats-bar {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 16px -24px;
  padding: 0 24px;
}

.pro-stat-item {
  flex: 1;
  text-align: center;
  padding: 16px 8px;
  border-left: 1px solid var(--border);
}

.pro-stat-item:last-child {
  border-left: none;
}

.pro-stat-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
}

.pro-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
}

/* Action buttons row */
.pro-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pro-action-btn {
  flex: 1;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  text-align: center;
  border: none;
}

.pro-action-btn.primary {
  background: var(--warm);
  color: #fff;
  box-shadow: 0 2px 8px rgba(212,135,58,0.3);
}

.pro-action-btn.primary:hover {
  background: var(--warm2);
  transform: translateY(-1px);
}

.pro-action-btn.phone {
  background: #27AE60;
  color: #fff;
}

.pro-action-btn.phone:hover {
  background: #219653;
}

.pro-action-btn.secondary {
  background: var(--clay);
  color: var(--ink);
  border: 1px solid var(--border);
}

.pro-action-btn.secondary:hover {
  border-color: var(--warm);
  color: var(--warm);
}

/* Body layout: main + sidebar */
.pro-body-layout {
  max-width: 900px;
  margin: 20px auto;
  padding: 0 20px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.pro-body-main {
  flex: 1;
  min-width: 0;
}

.pro-body-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
}

/* Section cards */
.pro-section-card {
  background: var(--white);
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 16px;
}

.pro-section-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Skills badges */
.pro-skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--clay);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  transition: all 0.15s;
}

.pro-skill-badge:hover {
  border-color: var(--warm);
  background: var(--sand);
}

.pro-skill-badge.secondary {
  background: var(--sand);
  color: var(--ink);
  border-color: transparent;
}

/* Cert badges */
.pro-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #E8F4EE;
  border: 1px solid #B7D6C4;
  border-radius: 24px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #1B5E3B;
}

/* Rating summary */
.pro-rating-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.pro-rating-big {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 52px;
  font-weight: 900;
  color: var(--warm);
  line-height: 1;
}

.pro-rating-stars {
  font-size: 22px;
  color: var(--warm);
  letter-spacing: 2px;
}

.pro-rating-count {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* Rating bars (LinkedIn style) */
.pro-rating-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.pro-rating-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.pro-rating-bar-label {
  width: 16px;
  text-align: center;
  font-weight: 600;
}

.pro-rating-bar {
  flex: 1;
  height: 8px;
  background: var(--clay);
  border-radius: 4px;
  overflow: hidden;
}

.pro-rating-bar-fill {
  height: 100%;
  background: var(--warm);
  border-radius: 4px;
  transition: width 0.3s;
}

.pro-rating-bar-count {
  width: 24px;
  text-align: left;
  font-size: 11px;
}

/* Gallery grid */
.pro-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
}

.pro-gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.pro-gallery-item img,
.pro-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.pro-gallery-item:hover img,
.pro-gallery-item:hover video {
  transform: scale(1.05);
}

.pro-gallery-item.more {
  background: var(--clay2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
}

/* Tab navigation */
.pro-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  gap: 0;
}

.pro-tab {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  white-space: nowrap;
}

.pro-tab:hover {
  color: var(--ink);
  background: var(--sand);
}

.pro-tab.active {
  color: var(--warm);
  border-bottom-color: var(--warm);
}

/* Contact sidebar card */
.pro-contact-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 22px;
  text-align: center;
}

.pro-contact-card-name {
  font-weight: 700;
  font-size: 16px;
  margin: 10px 0 4px;
}

.pro-contact-card-role {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.pro-contact-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 800px) {
  .pro-cover {
    height: 180px;
  }
  .pro-identity-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pro-identity-av {
    margin-top: -50px;
    width: 100px;
    height: 100px;
    font-size: 44px;
  }
  .pro-identity-info {
    padding-top: 0;
  }
  .pro-identity-name {
    font-size: 24px;
  }
  .pro-stats-bar {
    flex-wrap: wrap;
  }
  .pro-stat-item {
    min-width: 33%;
  }
  .pro-body-layout {
    flex-direction: column;
  }
  .pro-body-sidebar {
    width: 100%;
    position: static;
  }
  .pro-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .pro-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pro-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* Keep old info-box for backward compat */
.info-box {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px;
  margin-bottom: 18px;
}

.info-box-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   TOAST NOTIFICATION
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 24px;
  right: 50%;
  transform: translateX(50%) translateY(80px);
  background: var(--ink);
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.3s;
  z-index: 999;
  pointer-events: none;
}

.toast.show {
  transform: translateX(50%) translateY(0);
}

/* --------------------------------------------------------------------------
   UPLOAD PROGRESS BAR
   -------------------------------------------------------------------------- */

.upload-bar {
  background: var(--clay2);
  border-radius: 20px;
  height: 6px;
  overflow: hidden;
  margin-top: 10px;
  display: none;
}

.upload-bar-fill {
  height: 100%;
  background: var(--warm);
  border-radius: 20px;
  transition: width 0.3s;
  width: 0;
}

/* --------------------------------------------------------------------------
   LOADING SKELETON
   -------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg, var(--clay2) 25%, var(--clay) 50%, var(--clay2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* --------------------------------------------------------------------------
   MOBILE BOTTOM NAVIGATION
   -------------------------------------------------------------------------- */

.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.06);
  z-index: 200;
  padding: 6px 0 10px;
  justify-content: space-around;
  align-items: center;
}

.mn-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 8px;
  color: var(--muted);
  transition: color 0.15s;
  position: relative;
}

.mn-btn.active {
  color: var(--warm);
}

.mn-icon {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mn-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}
.mn-plus .mn-icon svg {
  width: 26px;
  height: 26px;
}

.mn-lbl {
  font-size: 9px;
  font-weight: 600;
}

.mn-plus {
  background: var(--warm);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 12px;
  color: #fff;
  margin-bottom: 2px;
}

.mn-dot {
  position: absolute;
  top: 0;
  right: 5px;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--white);
  display: none;
}

/* --------------------------------------------------------------------------
   WHATSAPP SHARING
   -------------------------------------------------------------------------- */

.wa-share-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-bottom: 6px;
}

.wa-share-bar:hover {
  opacity: 0.88;
}

.wa-instructions-box {
  background: #E8F9EF;
  border: 1px solid #B7EED1;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 12px;
  line-height: 1.65;
  color: #1B5E3B;
  margin-top: 6px;
  display: none;
}

.wa-instructions-box.open {
  display: block;
}

.wa-qr-box {
  background: #F0FFF4;
  border: 1px solid #B7EED1;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 12px;
  color: #1B5E3B;
  margin-top: 6px;
  display: none;
}

.wa-qr-box.open {
  display: block;
  text-align: center;
}

.qr-canvas {
  border: 4px solid #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .mobile-nav {
    display: flex;
  }

  body {
    padding-bottom: 68px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 44px 14px 52px;
  }

  .msg-sidebar {
    width: 100%;
    height: auto;
    max-height: 240px;
  }

  .msg-layout {
    flex-direction: column;
  }

  nav {
    padding: 0 10px;
  }

  .nav-btn {
    padding: 6px 8px;
    font-size: 13px;
  }
}

/* ─── GOOGLE LOGIN ─── */
.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 20px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  box-shadow: var(--shadow-sm);
}

.google-login-btn:hover {
  border-color: #4285F4;
  background: #F8F9FA;
  box-shadow: 0 2px 12px rgba(66, 133, 244, 0.18);
  transform: translateY(-1px);
}
.google-login-btn:active { transform: translateY(0); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ─── FEED LAYOUT ─── */
.feed {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}

.feed-post {
  background: var(--white);
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 12px;
}

.feed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 12px;
}

.feed-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

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

.feed-user-name {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.feed-user-name:hover {
  color: var(--warm);
}

.feed-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.feed-save-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.15s;
}

.feed-save-btn:hover {
  transform: scale(1.15);
}

.feed-content {
  padding: 0 16px 10px;
}

.feed-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.3;
}

.feed-desc {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-desc.expanded {
  -webkit-line-clamp: unset;
}

.feed-read-more {
  color: var(--warm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin-bottom: 6px;
}

.feed-pros {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* ─── FEED MEDIA CAROUSEL ─── */
.feed-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--clay2);
  overflow: hidden;
}

.feed-media img,
.feed-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-media .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
}

.feed-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 253, 249, 0.9);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.15s;
  z-index: 2;
}

.feed-media-nav:hover {
  background: #fff;
}

.feed-media-nav.prev {
  right: 8px;
}

.feed-media-nav.next {
  left: 8px;
}

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

.feed-media-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: background 0.15s;
}

.feed-media-dot.active {
  background: #fff;
}

.feed-media-counter {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(26, 18, 8, 0.65);
  color: #fff;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  z-index: 2;
}

/* ─── FEED ACTIONS BAR ─── */
.feed-actions {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
}

.feed-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.15s;
  flex: 1;
  justify-content: center;
}

.feed-action-btn:hover {
  background: var(--clay);
  color: var(--warm);
}

.feed-action-btn.liked {
  color: var(--red);
}

/* ─── FEED on pro profile ─── */
.pp-feed {
  max-width: 620px;
  margin: 0 auto;
}

/* ─── BACK BUTTON ─── */
.back-btn {
  background: var(--clay);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 18px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.15s;
}

.back-btn:hover {
  border-color: var(--warm);
  color: var(--warm);
}

/* ─── PROJECT PAGE ─── */
.project-media-item {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: none;
  overflow: hidden;
  margin-bottom: 14px;
}

.project-media-item img,
.project-media-item video {
  width: 100%;
  display: block;
}

/* Feed videos: cap the height like LinkedIn so portrait phone
   videos don't sprawl down forever. Anything taller than ~540px
   gets letterboxed inside a black box at its natural aspect ratio. */
video.feed-video {
  width: 100%;
  display: block;
  max-height: 540px;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

/* Wrapper for the video + small corner controls (mute, fullscreen). */
.feed-video-wrap {
  position: relative;
  display: block;
}
.fv-btn {
  position: absolute;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  z-index: 2;
  padding: 0;
  transition: opacity 0.18s, background 0.15s, transform 0.12s;
}
.fv-btn:hover {
  opacity: 1;
  background: rgba(0,0,0,0.75);
  transform: scale(1.06);
}
.fv-mute { bottom: 10px; inset-inline-start: 10px; }
.fv-full { bottom: 10px; inset-inline-end: 10px; }

/* Override for the project modal's main media — fills the 16:9
   frame with object-fit: cover, no height cap. */
.modal-media .feed-video-wrap { width: 100%; height: 100%; }
.modal-media .feed-video-wrap video.feed-video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  background: transparent;
}

.project-media-item-footer {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ─── AVATAR UPLOAD ─── */
.av-edit-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 2px 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.pp-big-av:hover .av-edit-hint {
  opacity: 1;
}

.pp-big-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.edit-avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clay2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.edit-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── PROFESSION SELECTOR ─── */
.profession-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profession-chip {
  background: var(--clay);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.profession-chip:hover {
  border-color: var(--warm);
  color: var(--warm);
}

.profession-chip.selected {
  background: var(--warm);
  color: #fff;
  border-color: var(--warm);
}

.listed-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.listed-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--warm);
  cursor: pointer;
}

.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.project-page-header {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 14px;
}

.project-page-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 6px;
}

.project-page-meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.project-page-desc {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 14px;
}

.project-page-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 18px 0 10px;
}

/* ─── POST COMPOSER ─── */
.post-composer {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: none;
  padding: 14px;
  margin-bottom: 14px;
}

.post-composer-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.post-composer-header textarea {
  flex: 1;
  background: var(--sand);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 44px;
  direction: rtl;
  transition: border-color 0.15s;
}

.post-composer-header textarea:focus {
  border-color: var(--warm);
  background: #fff;
}

.post-composer-media {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.post-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.post-media-btn {
  background: var(--clay);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}

.post-media-btn:hover {
  border-color: var(--warm);
  color: var(--warm);
}

/* ─── POST TAG PRO ─── */
.post-tag-pro-item {
  background: var(--sand);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 6px;
  transition: all 0.15s;
}

.post-tag-pro-item.selected {
  border-color: var(--warm);
  background: var(--clay);
}

/* ─── PROJECT PAGE LAYOUT ─── */
.project-page-layout {
  max-width: 1000px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.project-page-main {
  flex: 1;
  max-width: 620px;
  min-width: 0;
}

.project-page-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
}

.sidebar-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}

.sidebar-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.sidebar-pro {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  margin: 0 -8px;
  padding-left: 8px;
  position: relative;
}
.sidebar-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.12s, background 0.12s;
}
.sidebar-edit-btn:hover {
  opacity: 1;
  background: var(--clay);
}
.sidebar-pro {
  padding-right: 8px;
  border-radius: 8px;
}

.sidebar-pro:last-child {
  border-bottom: none;
}

.sidebar-pro:hover {
  background: var(--clay);
}

.sidebar-pro-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.sidebar-pro-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.sidebar-pro-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.sidebar-pro-role {
  font-size: 12px;
  color: var(--muted);
}

.sidebar-pro-phone {
  font-size: 12px;
  color: var(--forest);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.sidebar-pro-phone a {
  color: var(--forest);
  text-decoration: none;
}

.sidebar-pro-phone a:hover {
  color: var(--warm);
}

@media (max-width: 800px) {
  .project-page-layout {
    flex-direction: column;
  }
  .project-page-sidebar {
    width: 100%;
    position: static;
    order: -1;
  }
  .project-page-main {
    max-width: 100%;
  }
}

.project-add-media-wrap {
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px dashed var(--border);
  padding: 16px;
  margin-bottom: 14px;
  text-align: center;
}

/* ─── CITY AUTOCOMPLETE ─── */
.city-autocomplete-wrap {
  position: relative;
}

.city-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  z-index: 300;
  display: none;
}

.city-autocomplete-dropdown.open {
  display: block;
}

.city-autocomplete-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.city-autocomplete-item:hover,
.city-autocomplete-item.highlighted {
  background: var(--clay);
}

/* ─── CAMERA BUTTONS ─── */
.camera-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.camera-btn {
  flex: 1;
  padding: 12px;
  background: var(--forest);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.camera-btn:hover {
  background: var(--forest2);
}

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

/* --------------------------------------------------------------------------
   CUSTOM SCROLLBAR
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--sand);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--sand);
}

/* --------------------------------------------------------------------------
   SMOOTH TRANSITIONS ON INTERACTIVE ELEMENTS
   -------------------------------------------------------------------------- */

a, button, input, select, textarea, .chip, .proj-card, .pro-card, .feed-post, .nav-btn, .nav-icon-btn {
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s;
}

/* --------------------------------------------------------------------------
   ADMIN "MANAGE-AS" MODE
   Sticky warning banner pinned to the bottom (above mobile nav) while an
   admin is acting on behalf of a pro, plus the manage-as entry button.
   -------------------------------------------------------------------------- */
#manage-as-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #b45309;            /* amber-700 — unmissable but not alarming red */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
}
#manage-as-banner span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#manage-as-banner svg { width: 16px; height: 16px; }
#manage-as-banner strong { font-weight: 800; }
#manage-as-banner button {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#manage-as-banner button:hover { background: rgba(255,255,255,0.3); }
/* Keep page content clear of the fixed banner. */
body.manage-as-active { padding-bottom: 56px; }
@media (max-width: 700px) {
  body.manage-as-active { padding-bottom: 120px; } /* banner + mobile nav */
}

.pro-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.pro-action-btn.admin {
  background: #fffbe6;
  border: 1.5px solid #f0c542;
  color: #92660a;
}
.pro-action-btn.admin:hover { background: #fff3c4; }

/* --------------------------------------------------------------------------
   SUBSCRIBE-TO-PROJECT BUTTON
   Promoted out of the project-header icon row into a labeled pill so users
   actually understand what clicking does. YouTube-style: warm filled CTA
   when not subscribed → outlined "subscribed ✓" once active.
   -------------------------------------------------------------------------- */
.subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  background: var(--warm);
  color: #fff;
  border: 1.5px solid var(--warm);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.subscribe-btn:hover { filter: brightness(1.05); }
.subscribe-btn.is-subscribed {
  background: var(--white);
  color: var(--ink);
  border-color: var(--border);
}
.subscribe-btn.is-subscribed:hover {
  background: var(--clay);
  color: var(--warm);
  border-color: var(--warm);
}
.subscribe-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — IS 5568 / WCAG 2.0 AA
   - Skip-to-content link (off-screen until focused)
   - Visible focus ring on every interactive element
   - Site footer with legal/contact links
   -------------------------------------------------------------------------- */

/* Skip link — hidden off-screen until it receives keyboard focus.
   First Tab on page lands here, letting users bypass the whole nav. */
.skip-link {
  position: fixed;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--warm);
  color: #fff;
  padding: 10px 18px;
  text-decoration: none;
  font-weight: 700;
  z-index: 9999;
  border-radius: 0 0 8px 8px;
}
.skip-link:focus,
.skip-link:focus-visible {
  inset-inline-start: 8px;
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Universal focus ring — visible but unobtrusive. Browsers strip the
   default outline on click; :focus-visible restores it for keyboard
   navigation only. Required by WCAG 2.4.7. */
:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 2px;
}

/* Site footer */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 28px 20px 80px; /* extra bottom padding so it clears mobile nav */
  margin-top: 40px;
  font-size: 13px;
  color: var(--muted);
}
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.site-footer-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.site-footer-brand strong {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 18px;
  color: var(--ink);
  font-weight: 800;
}
.site-footer-tagline { color: var(--muted); }
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.site-footer-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.site-footer-links a:hover { color: var(--warm); }
.site-footer-meta {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  width: 100%;
}
.site-footer-meta a { color: var(--muted); }
.site-footer-meta a:hover { color: var(--warm); }
@media (max-width: 640px) {
  .site-footer { padding-bottom: 100px; } /* room for taller mobile nav */
}

/* --------------------------------------------------------------------------
   HERO PROOF CARD (unauth visitors only)
   First-screen trust artifact: cover photo + tagged pros + location + CTA.
   Hidden once the user signs in (body.signed-in toggles it off).
   -------------------------------------------------------------------------- */
body:not(.signed-in) .home-hero-content {
  max-width: 980px;
}
.hero-proof-card {
  margin: 28px auto 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  overflow: hidden;
  text-align: right;
  direction: rtl;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 280px;
  cursor: pointer;
}
.hero-proof-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.hero-proof-photo {
  background-size: cover;
  background-position: center;
  background-color: var(--clay);
  min-height: 280px;
}
.hero-proof-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-proof-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm);
}
.hero-proof-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.hero-proof-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  align-items: center;
}
.hero-proof-meta .meta-with-icon svg {
  width: 14px;
  height: 14px;
}
.hero-proof-pros-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}
.hero-proof-pros {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-proof-pro {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.hero-proof-pro-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.hero-proof-pro-name {
  color: var(--ink);
  font-weight: 600;
}
.hero-proof-pro-role {
  color: var(--muted);
  font-size: 12px;
}
.hero-proof-review {
  background: var(--sand);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.hero-proof-review-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--warm);
  margin-left: 6px;
  vertical-align: middle;
}
.hero-proof-cta {
  margin-top: auto;
  align-self: flex-start;
  background: var(--warm);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.hero-proof-cta:hover { filter: brightness(1.05); }

@media (max-width: 720px) {
  .hero-proof-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-proof-photo {
    min-height: 200px;
    aspect-ratio: 16 / 10;
  }
  .hero-proof-title { font-size: 20px; }
}

/* Hide the proof card the moment the user signs in. */
body.signed-in #hero-proof-card { display: none !important; }

/* --------------------------------------------------------------------------
   HOME CATEGORIES STRIP (unauth visitors only)
   -------------------------------------------------------------------------- */
body.signed-in #home-categories-wrap { display: none !important; }
.home-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-categories .cat-chip {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-categories .cat-chip:hover {
  border-color: var(--warm);
  color: var(--warm);
}
.home-categories .cat-chip svg {
  width: 14px;
  height: 14px;
}