/* ==================================================================
   fcs-pro.css — FreeCouchSurf "pro" theme (2026-11-05)
   Loaded LAST on every page. Same system as NeedSugarDaddy:
   - Figtree for text, Gilda Display (serif) for big headings
   - deep pine bands for page heads, warm paper background, one green
     for actions and a sand/gold accent for the main call to action
   - quiet header with text navigation (underline = current page)
   - flat cards: thin line, soft radius, almost no shadow
   - phones: bottom tab bar (Home · Hosts · Feed · Messages · Me)
   Old class names are restyled so every page follows along.
   ================================================================== */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Gilda Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/gilda-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Gilda Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/gilda-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Gilda Display', Georgia, 'Times New Roman', serif;

  --ink:       #10221A;
  --ink-2:     #3B4B43;
  --ink-3:     #6A786F;
  --pine:      #0B3B2B;   /* page-head bands */
  --pine-2:    #0F4A36;
  --forest:    #0E6B4A;   /* actions */
  --forest-dark: #0A5239;
  --brand-wash:#E8F2EC;
  --sand:      #D8AA4E;   /* main CTA accent (like NSD gold) */
  --sand-dark: #C2933A;
  --paper:     #F7F6F1;
  --line:      #E4E7E1;
  --moss:      var(--brand-wash);
  --sage:      #F1F4EF;

  --primary: var(--forest);
  --primary-hover: var(--forest-dark);
  --primary-light: var(--brand-wash);
  --bg: var(--paper);
  --border: var(--line);
  --text-primary: var(--ink);
  --text-secondary: #4F5E56;
  --text-muted: #7B887F;

  --wrap: 1180px;
  --gutter: 24px;
  --r: 14px;
  --shadow-1: 0 1px 2px rgba(16,34,26,.04), 0 2px 8px rgba(16,34,26,.04);
  --shadow-2: 0 4px 12px rgba(16,34,26,.06), 0 18px 40px rgba(16,34,26,.10);
}
@media (max-width: 800px) { :root { --gutter: 16px; } }

html { background: var(--paper) !important; }
body { font-family: var(--font) !important; background: var(--paper) !important; color: var(--ink); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
input, button, select, textarea { font-family: inherit !important; }

/* Big headings: serif, regular weight, tight */
h1, .fx-h1, .gp-h1, .ux-display, .search-hero h1, .hg-hero h1, .xp-hero h1, .photos-hero h1, .fm-hero h1,
.leaderboard-hero-title, .sc-hero h1, .fcs-blocked-panel h1 {
  font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; line-height: 1.08 !important;
}
h2, .fx-h2, .gp-h2 { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.005em !important; }
h3, h4, h5, h6, .card-clean h2, .ux-h3, .sc-card h2, .fcs-safety-card h3, .fm-card h2, .dm-side-head h1 {
  font-family: var(--font) !important; font-weight: 800 !important; letter-spacing: -0.01em !important;
}
.dm-side-head h1 { font-size: 1.35rem !important; }
a { color: var(--forest); }
a:hover { color: var(--forest-dark); }

/* ── Top bar: slim, calm ────────────────────────────────────────── */
.fx-topbar { background: var(--pine) !important; font-size: .78rem !important; padding: 6px 44px !important; }
.fx-topbar i { color: var(--sand) !important; }

/* ── Header ─────────────────────────────────────────────────────── */
.navbar { background: #fff !important; border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }
.fx-bar { max-width: var(--wrap) !important; min-height: 68px; gap: 18px !important; }
.navbar-brand { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 1.55rem !important; letter-spacing: -0.01em !important; color: var(--ink) !important; gap: 10px !important; }
.navbar-brand .brand-icon { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: var(--pine) !important; color: var(--sand) !important; font-size: .95rem !important; }
.navbar-brand .bn-c { color: var(--forest); }
.navbar-search .search-wrap input, #nav-search-input { background: var(--sage) !important; border: 1px solid transparent !important; height: 42px !important; border-radius: 999px !important; font-size: .9rem !important; }
.navbar-search .search-wrap input:focus { background: #fff !important; border-color: var(--line) !important; }
.nav-icon-btn { width: 40px !important; height: 40px !important; color: var(--ink-2) !important; }
.nav-icon-btn:hover { background: var(--sage) !important; }
.navbar .btn-primary, .navbar a.btn-primary { background: var(--forest) !important; border-radius: 10px !important; padding: 9px 18px !important; font-weight: 700 !important; }
.invite-pill-btn { background: #FBF3E2 !important; color: #7A5413 !important; border: 1px solid #F0DDB4 !important; }

/* Category row → quiet text navigation with an underline, like NSD */
.category-nav { background: #fff !important; border-bottom: 1px solid var(--line) !important; backdrop-filter: none !important; }
.category-nav-inner { max-width: var(--wrap); margin: 0 auto !important; padding: 0 var(--gutter) !important; height: 48px !important; gap: 4px !important; }
.cat-pill {
  height: 48px !important; padding: 0 12px !important; border-radius: 0 !important; background: transparent !important;
  color: var(--ink-3) !important; font-weight: 600 !important; font-size: .9rem !important;
  border-bottom: 2px solid transparent !important; gap: 7px !important;
}
.cat-pill i { color: currentColor !important; opacity: .75; font-size: .82rem !important; }
.cat-pill:hover { color: var(--ink) !important; background: transparent !important; }
.cat-pill.active { color: var(--ink) !important; background: transparent !important; border-bottom-color: var(--forest) !important; }
.cat-pill.active i { color: var(--forest) !important; opacity: 1; }
.cat-pill.is-feed { color: var(--ink) !important; font-weight: 700 !important; }
.cat-pill.is-feed i { color: var(--forest) !important; opacity: 1; }
.cat-new { background: var(--sand) !important; color: #3A2A08 !important; }

/* ── Page-head bands (search, hangouts, experiences, photos, forum, feed…) ── */
.search-hero, .hg-hero, .xp-hero, .photos-hero, .leaderboard-hero, .ux-band {
  background: radial-gradient(1200px 400px at 85% -10%, rgba(216,170,78,.16), transparent 60%), var(--pine) !important;
  color: #fff !important; text-align: left !important;
  padding: 56px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 48px !important;
  border: 0 !important;
}
.search-hero h1, .hg-hero h1, .xp-hero h1, .photos-hero h1, .leaderboard-hero-title, .ux-band h1 {
  color: #fff !important; font-size: clamp(2.1rem, 4.4vw, 3.3rem) !important; margin: 0 0 10px !important;
}
.search-hero h1 i, .hg-hero h1 i, .xp-hero h1 i, .photos-hero h1 i { display: none !important; }
.search-hero p, .hg-hero p, .xp-hero p, .photos-hero p, .ux-band p { color: rgba(255,255,255,.78) !important; font-weight: 500 !important; font-size: 1.05rem !important; max-width: 640px; margin-left: 0 !important; }
.search-big-bar { margin: 24px 0 0 !important; max-width: 680px !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,.25) !important; padding: 6px 6px 6px 18px !important; }
.search-big-bar .btn-search { background: var(--sand) !important; color: #2E2006 !important; border-radius: 9px !important; padding: 11px 22px !important; font-weight: 800 !important; }
.search-big-bar .btn-search:hover { background: var(--sand-dark) !important; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn { border-radius: 10px !important; font-weight: 700 !important; }
.btn-primary { background: var(--forest) !important; border-color: var(--forest) !important; border-radius: 10px !important; }
.btn-primary:hover { background: var(--forest-dark) !important; border-color: var(--forest-dark) !important; }
.btn-outline-primary { color: var(--forest) !important; border-color: var(--line) !important; background: #fff !important; }
.btn-outline-primary:hover { border-color: var(--forest) !important; background: var(--brand-wash) !important; }

/* ── Cards everywhere ───────────────────────────────────────────── */
.card-clean, .review-card, .experience-card, .hg-card, .fm-card, .fm-post, .sc-card, .fcs-safety-card, .event-card, .ux-card {
  background: #fff !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; box-shadow: var(--shadow-1) !important;
}
.host-card { border-radius: var(--r) !important; border: 1px solid var(--line) !important; box-shadow: none !important; background: #fff !important; }
.host-card:hover { box-shadow: var(--shadow-2) !important; border-color: #D5DCD4 !important; }
.host-card-cover.no-photo { background: linear-gradient(160deg, #EEF3EC, #F5EFE3) !important; }
.badge-hosting { background: rgba(14,107,74,.92) !important; }
.badge-hosting.maybe { background: rgba(216,170,78,.95) !important; color: #2E2006 !important; }
.badge-hosting.no { background: rgba(16,34,26,.7) !important; }
.filter-bar { background: #fff !important; border-bottom: 1px solid var(--line) !important; }
.filter-chip { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 999px !important; font-weight: 600 !important; }
.filter-chip:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.filter-chip.active { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }

/* ── Profile hero: calmer, deeper overlay ───────────────────────── */
.profile-hero { background: var(--pine) !important; }
.profile-hero::before { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; left: 0 !important; top: 0 !important; background: linear-gradient(180deg, rgba(11,59,43,.55), rgba(11,59,43,.9)) !important; }
.profile-hero::after { display: none !important; }
.profile-hero h1, .profile-name { font-family: var(--font-display) !important; font-weight: 400 !important; }
.hero-btn { border-radius: 10px !important; height: 44px !important; }
.hero-btn-solid { background: var(--sand) !important; color: #2E2006 !important; box-shadow: none !important; }
.profile-stats-row { border-radius: var(--r) !important; box-shadow: var(--shadow-2) !important; }
.profile-stat-val { font-family: var(--font-display) !important; font-weight: 400 !important; color: var(--ink) !important; }
.profile-stat-label { letter-spacing: .06em; font-size: .68rem !important; color: var(--ink-3) !important; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer, .site-footer, .footer { background: var(--pine) !important; }

/* ── Feed page (.ux-*) and shared pieces ────────────────────────── */
.ux-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.ux-band .ux-wrap { padding: 0; }
.ux-eyebrow { color: var(--sand) !important; font-weight: 700; font-size: .8rem !important; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px !important; }
.ux-lede { margin-bottom: 18px !important; }
.ux-place { display: flex; gap: 6px; align-items: center; background: #fff; border-radius: 12px; padding: 6px 6px 6px 14px; max-width: 560px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ux-place i { color: var(--ink-3); }
.ux-place input { flex: 1; min-width: 0; border: 0; outline: none; font-size: .95rem; padding: 8px 4px; color: var(--ink); }
.ux-place input + input { border-left: 1px solid var(--line); padding-left: 10px; }
.ux-place button { border: 0; background: var(--sand); color: #2E2006; font-weight: 800; border-radius: 9px; padding: 10px 18px; cursor: pointer; }
.ux-tabs { display: flex; gap: 6px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.ux-tabs::-webkit-scrollbar { display: none; }
.ux-tabs a { flex-shrink: 0; color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; font-size: .86rem; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); white-space: nowrap; }
.ux-tabs a:hover { background: rgba(255,255,255,.1); color: #fff; }
.ux-tabs a.is-on { background: #fff; color: var(--pine); border-color: #fff; }
.ux-tabs a i { margin-right: 4px; font-size: .78rem; }
.ux-feed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding-top: 28px; padding-bottom: 60px; align-items: start; }
@media (max-width: 960px) { .ux-feed-grid { grid-template-columns: 1fr; } .ux-feed-side { order: 2; } }
.ux-feed-side { display: grid; gap: 16px; position: sticky; top: 130px; }
@media (max-width: 960px) { .ux-feed-side { position: static; } }
.ux-card { padding: 18px; margin-bottom: 14px; }
.ux-feed-side .ux-card { margin: 0; }
.ux-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--sage); }
.ux-composer { display: flex; gap: 12px; }
.ux-composer-main { flex: 1; min-width: 0; }
.ux-composer textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: .95rem; resize: vertical; min-height: 64px; }
.ux-composer textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(14,107,74,.12); }
.ux-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ux-composer-where { font-size: .82rem; color: var(--ink-3); font-weight: 600; }
.ux-composer-msg { color: #B42318; font-weight: 700; font-size: .85rem; margin: 8px 0 0; }
.ux-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink) !important; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; }
.ux-btn:hover { border-color: var(--ink); }
.ux-btn.is-primary { background: var(--forest); border-color: var(--forest); color: #fff !important; }
.ux-btn.is-primary:hover { background: var(--forest-dark); }
.ux-btn.is-sm { min-height: 34px; font-size: .84rem; padding: 0 12px; }
.ux-btn.is-block { width: 100%; margin-top: 12px; }
.ux-btn[disabled] { opacity: .6; }
.ux-cta-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ux-cta-card b { font-size: 1rem; width: 100%; }
.ux-cta-card span { color: var(--ink-3); width: 100%; font-size: .9rem; margin-bottom: 4px; }
.ux-post-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ux-post-who { flex: 1; min-width: 0; }
.ux-post-name { font-weight: 800; color: var(--ink) !important; text-decoration: none; }
.ux-post-meta { font-size: .8rem; color: var(--ink-3); }
.ux-chip-link { color: var(--forest) !important; font-weight: 700; text-decoration: none; border-radius: 6px; }
.ux-chip-link:hover { text-decoration: underline; }
.ux-post-body { font-size: 1rem; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.ux-post-photo { width: 100%; max-height: 480px; object-fit: cover; border-radius: 12px; margin-top: 12px; }
.ux-post-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.ux-empty { text-align: center; color: var(--ink-3); padding: 34px 18px; }
.ux-empty i { font-size: 2rem; opacity: .5; display: block; margin-bottom: 8px; }
.ux-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ux-h3 { font-size: 1rem !important; margin: 0 0 10px !important; display: flex; gap: 8px; align-items: center; }
.ux-h3 i { color: var(--forest); }
.ux-muted { color: var(--ink-3); font-size: .88rem; margin: 0; }
.ux-mini { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink) !important; text-decoration: none; }
.ux-mini:first-of-type { border-top: 0; }
.ux-mini img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ux-mini b { display: block; font-size: .9rem; }
.ux-mini small { color: var(--ink-3); font-size: .78rem; }
.ux-link { font-weight: 700; font-size: .88rem; text-decoration: none; }
.ux-safe-card { background: #FBF7EE !important; border-color: #EFE2C4 !important; }
.ux-safe-card .ux-h3 i { color: #B07D1F; }

/* ── Mobile bottom tab bar ──────────────────────────────────────── */
.ux-tabbar { display: none; }
@media (max-width: 860px) {
  .ux-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .ux-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; color: var(--ink-3); text-decoration: none; font-size: .7rem; font-weight: 700; position: relative; }
  .ux-tabbar a i { font-size: 1.15rem; }
  .ux-tabbar a.is-on { color: var(--forest); }
  .ux-tabbar a.is-cta { color: var(--forest); }
  .ux-tabbar .ux-tb-n { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 999px; background: #C62845; color: #fff; font-size: .62rem; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; }
  body.has-tabbar { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.has-tabbar .ios-app-cta, body.has-tabbar .app-fab, body.has-tabbar #appFab, body.has-tabbar .get-app-fab { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  /* chat page has its own composer at the bottom: hide the tab bar there */
  body.dm-page .ux-tabbar { display: none; }
  body.dm-page.has-tabbar { padding-bottom: 0; }
}

/* App promo pieces in the new colours, never on top of the tab bar */
#app-download-fab { background: var(--pine) !important; box-shadow: 0 8px 24px rgba(11,59,43,.35) !important; font-family: var(--font) !important; }
#ios-app-cta { background: var(--pine) !important; font-family: var(--font) !important; }
#ios-app-cta .ios-app-cta-btn { background: var(--sand) !important; color: #2E2006 !important; }
#pwa-install-banner, #pwa-ios-instructions { background: var(--pine) !important; font-family: var(--font) !important; }
@media (max-width: 860px) {
  #app-download-fab { display: none !important; }
  #ios-app-cta { bottom: calc(58px + env(safe-area-inset-bottom)) !important; padding-bottom: 10px !important; }
  #pwa-install-banner, #pwa-ios-instructions { bottom: calc(58px + env(safe-area-inset-bottom)) !important; }
  body.dm-page #ios-app-cta { display: none !important; }
}

/* Phone header: compact wordmark; Log in lives in the tab bar */
@media (max-width: 600px) {
  .navbar-brand { font-size: 1.22rem !important; gap: 8px !important; }
  .navbar-brand .brand-icon { width: 30px !important; height: 30px !important; }
  .fx-bar { min-height: 58px; gap: 8px !important; }
  body.has-tabbar .navbar a[href="/login.php"] { display: none !important; }
  .navbar a.btn-primary { padding: 8px 14px !important; font-size: .88rem !important; }
}
/* Search page body lines up with the header width */
.filter-bar { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) !important; padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) !important; }
.search-hero ~ .container-fluid, .search-hero ~ div > .row.g-0, body .row.g-0:has(> .col-lg-2) { max-width: calc(var(--wrap) + 120px); margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 600px) {
  .search-hero, .hg-hero, .xp-hero, .photos-hero, .leaderboard-hero, .ux-band { padding-top: 34px !important; padding-bottom: 28px !important; }
  .search-hero h1, .hg-hero h1, .xp-hero h1, .photos-hero h1, .leaderboard-hero-title, .ux-band h1 { font-size: 2rem !important; }
  .search-hero p, .hg-hero p, .xp-hero p, .photos-hero p, .ux-band p { font-size: .95rem !important; }
  .ux-place { flex-wrap: wrap; }
  .ux-place input { flex: 1 1 40%; }
  .ux-place button { flex: 1 1 100%; }
  .fx-topbar { font-size: .74rem !important; }
}