/* ─────────────────────────────────────────────────────────────────
   hp-ui.css — HePays design system (2026-11-02)
   Same system as NeedSugarDaddy (aubergine ink, champagne gold, Gilda
   Display + Figtree), in HePays magenta. Loaded after hepays.css on every
   page via metas2.php, so legacy pages pick it up without markup changes.
   Visual only: no text, URL or link changes come from this file.
   ───────────────────────────────────────────────────────────────── */
@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 {
  --hp-ink: #23112F;
  --hp-on-ink: #D9CDE2;
  --hp-brand: #B0177A;
  --hp-brand-deep: #8E1262;
  --hp-brand-wash: #FBEAF4;
  --hp-brand-ring: rgba(176, 23, 122, .25);
  --hp-gold: #D9B26A;
  --hp-gold-deep: #C99D4F;
  --hp-gold-ink: #2A1A05;
  --hp-gold-wash: #F7EEDC;
  --hp-paper: #FAF8FC;
  --hp-text: #261C2E;
  --hp-muted: #6C6177;
  --hp-line: #E8E2EE;
  --hp-line-strong: #D3CADC;
  --hp-alert: #D6336C;
  --hp-ok: #18794E;
  --hp-live: #4ADE80;
  --hp-display: 'Gilda Display', 'Didot', 'Bodoni 72', Georgia, serif;
  --hp-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hp-wrap: 1200px;
  --hp-r: 12px;
}

/* ─── Base ───────────────────────────────────────────────────────── */
html { background: var(--hp-paper); }
body {
  margin-top: 0 !important;
  background: var(--hp-paper) !important;
  font-family: var(--hp-body) !important;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hp-text);
  -webkit-font-smoothing: antialiased;
}
body, h4, h5, h6 { font-family: var(--hp-body); }
h1, h2, h3 { font-family: var(--hp-display); font-weight: 400; letter-spacing: -.005em; }   /* colour stays per page (some sit on dark heroes) */
a, a:visited { color: var(--hp-brand); }
a:hover { color: var(--hp-brand-deep); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hp-brand-ring); border-radius: 6px; }
.container.custcontain, .custcontain { background: transparent; }
.hp-wrap { max-width: var(--hp-wrap); margin: 0 auto; padding: 0 16px; }

/* ─── Header ─────────────────────────────────────────────────────── */
.hp-hdr { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hp-line); font-family: var(--hp-body); }
.hp-hdr__bar { display: flex; align-items: center; gap: 10px; height: 62px; }
.hp-logo { display: inline-flex; align-items: center; flex: none; }
.hp-logo img { height: 22px; width: auto; display: block; }
.hp-links { display: none; gap: 2px; margin-left: 18px; }
.hp-links a, .hp-links a:visited { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: .95rem; color: var(--hp-muted); white-space: nowrap; text-decoration: none; }
.hp-links a:hover { color: var(--hp-ink); background: var(--hp-brand-wash); }
.hp-links a[aria-current="page"] { color: var(--hp-ink); }
.hp-links .hp-live { width: 8px; height: 8px; border-radius: 50%; background: var(--hp-live); box-shadow: 0 0 0 3px rgba(74,222,128,.22); }
@media (min-width: 900px) { .hp-links { display: flex; } .hp-hdr__bar { height: 68px; } }
.hp-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hp-icon, .hp-icon:visited { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--hp-muted); font-size: 1.05rem; text-decoration: none; }
.hp-icon:hover { background: var(--hp-brand-wash); color: var(--hp-ink); }
.hp-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hp-alert); color: #fff; font: 700 .68rem/18px var(--hp-body); text-align: center; box-shadow: 0 0 0 2px #fff; }
.hp-btn, .hp-btn:visited { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 10px; font: 700 .92rem/1.2 var(--hp-body); border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; }
.hp-btn--primary, .hp-btn--primary:visited { background: var(--hp-brand); color: #fff; }
.hp-btn--primary:hover { background: var(--hp-brand-deep); color: #fff; }
.hp-btn--text, .hp-btn--text:visited { background: none; color: var(--hp-ink); }
.hp-btn--text:hover { background: var(--hp-brand-wash); color: var(--hp-ink); }
.hp-btn--gold, .hp-btn--gold:visited { background: var(--hp-gold); color: var(--hp-gold-ink); }
.hp-btn--gold:hover { background: var(--hp-gold-deep); color: var(--hp-gold-ink); }

/* credit balance pill — always visible to logged-in members */
.hp-credit, .hp-credit:visited { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 20px; background: var(--hp-gold-wash); border: 1px solid #ecd9b3; color: var(--hp-gold-ink); text-decoration: none; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.hp-credit:hover { background: #f2e3c4; color: var(--hp-gold-ink); }
.hp-credit__coin { width: 26px; height: 26px; border-radius: 50%; background: var(--hp-gold); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--hp-gold-ink); }
.hp-credit__sub { font-weight: 600; font-size: .76rem; color: #7a5a1f; padding-left: 8px; border-left: 1px solid #e3cc9d; }
.hp-credit.is-empty { background: #fff; border-color: var(--hp-line-strong); }
.hp-credit.is-empty .hp-credit__coin { background: var(--hp-brand-wash); color: var(--hp-brand); }
@media (max-width: 560px) { .hp-credit__sub { display: none; } .hp-credit { padding-right: 10px; } }
@media (max-width: 380px) { .hp-icon { width: 34px; } .hp-hdr__bar { gap: 6px; } .hp-logo img { height: 17px; } }

/* account menu */
.hp-acct { position: relative; }
.hp-acct__btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 2px 4px 2px 2px; border-radius: 22px; cursor: pointer; color: var(--hp-muted); }
.hp-acct__btn:hover { background: var(--hp-brand-wash); }
.hp-acct__btn img, .hp-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hp-line); background: var(--hp-brand-wash); }
.hp-acct__menu { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; box-shadow: 0 18px 48px rgba(20,10,30,.16); padding: 6px; display: none; z-index: 1100; max-height: calc(100vh - 90px); overflow-y: auto; }
.hp-acct.is-open .hp-acct__menu { display: block; }
.hp-acct__head { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--hp-line); margin-bottom: 4px; }
.hp-acct__head strong { display: block; color: var(--hp-ink); font-size: .95rem; }
.hp-acct__head span { font-size: .8rem; color: var(--hp-muted); }
.hp-acct__bal { margin: 4px 4px 8px; padding: 12px; border-radius: 12px; background: var(--hp-ink); color: var(--hp-on-ink); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.hp-acct__bal b { color: #fff; font-family: var(--hp-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.hp-acct__bal small { grid-column: 1; font-size: .78rem; }
.hp-acct__bal a, .hp-acct__bal a:visited { grid-row: 1 / span 2; grid-column: 2; background: var(--hp-gold); color: var(--hp-gold-ink); font-weight: 800; font-size: .82rem; padding: 7px 12px; border-radius: 9px; text-decoration: none; }
.hp-acct__menu > a, .hp-acct__menu > a:visited { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--hp-text); font-size: .92rem; text-decoration: none; }
.hp-acct__menu > a i { width: 18px; text-align: center; color: var(--hp-muted); }
.hp-acct__menu > a:hover { background: var(--hp-brand-wash); color: var(--hp-ink); }
.hp-acct__menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--hp-line); }
.hp-pill { margin-left: auto; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: var(--hp-alert); color: #fff; }

/* secondary nav (members) — one scrollable row */
.hp-subnav { background: #fff; border-bottom: 1px solid var(--hp-line); }
.hp-subnav__inner { max-width: var(--hp-wrap); margin: 0 auto; padding: 0 12px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hp-subnav__inner::-webkit-scrollbar { display: none; }
.hp-subnav a, .hp-subnav a:visited { display: inline-flex; align-items: center; gap: 6px; padding: 10px 11px; font-size: .88rem; font-weight: 600; color: var(--hp-muted); white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none; }
.hp-subnav a:hover { color: var(--hp-ink); }
.hp-subnav a[aria-current="page"] { color: var(--hp-ink); border-bottom-color: var(--hp-brand); }
.hp-subnav .hp-nag { background: var(--hp-alert); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: .74rem; }
.hp-subnav .hp-sep { width: 1px; background: var(--hp-line); margin: 10px 4px; flex: none; }

/* ─── Member cards (showmember) ──────────────────────────────────── */
.showmem.hpc { float: left; width: calc(50% - 10px); height: auto !important; margin: 5px; font-family: var(--hp-body); font-size: 13px; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-r); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.showmem.hpc:hover { border-color: var(--hp-line-strong); box-shadow: 0 10px 26px -14px rgba(35,17,47,.35); }
@media (min-width: 560px) { .showmem.hpc { width: calc(33.333% - 10px); } }
@media (min-width: 820px) { .showmem.hpc { width: calc(25% - 10px); } }
@media (min-width: 1080px) { .showmem.hpc { width: 172px; } }
.hpc__photo { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--hp-brand-wash); overflow: hidden; }
.showmem.hpc .hpc__photo img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center 25%; display: block; border-radius: 0; transition: transform .4s ease; }
.showmem.hpc:hover .hpc__photo img { transform: scale(1.03); }
.hpc__chips { position: absolute; top: 7px; left: 7px; right: 7px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; }
.hpc__chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font: 700 .68rem/1 var(--hp-body); white-space: nowrap; background: rgba(255,255,255,.95); color: var(--hp-ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.hpc__chip--coin { background: var(--hp-gold); color: var(--hp-gold-ink); }
.hpc__chip--sec { color: #fff; }
.hpc__badges { position: absolute; right: 7px; bottom: 7px; display: flex; gap: 4px; }
.hpc__badges span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; color: #fff; box-shadow: 0 0 0 1.5px #fff; }
.hpc__b-id { background: #1d6fd8; } .hpc__b-photo { background: var(--hp-ok); } .hpc__b-vid { background: #dc2626; } .hpc__b-btc { background: #F7931A; }
.hpc__body { padding: 9px 10px 10px; }
.hpc__name, .hpc__name:visited { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--hp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.hpc__name .hpc__g { font-size: .8rem; font-weight: 600; }
.hpc__loc { font-size: .8rem; color: var(--hp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpc__loc a, .hpc__loc a:visited { color: var(--hp-muted); font-weight: 600; text-decoration: none; }
.hpc__loc a:hover { color: var(--hp-brand); }
.hpc__meta { font-size: .78rem; color: var(--hp-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpc__meta b { color: var(--hp-text); }
.hpc__extra { font-size: .76rem; color: #9a834e; margin-top: 2px; }
.hpc__extra a { font-weight: 600; }
.hpc__icons { display: inline-flex; gap: 6px; margin-left: 4px; vertical-align: -2px; }
.hpc__icons img { width: 14px !important; height: 14px !important; }
.hpc__chat, .hpc__chat:visited { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; height: 34px; border-radius: 9px; background: var(--hp-brand-wash); color: var(--hp-brand-deep); font-weight: 700; font-size: .85rem; text-decoration: none; }
.hpc__chat:hover { background: var(--hp-brand); color: #fff; }
.hp-admin-frame .showmem.hpc { margin: 0; width: 172px; }

/* ─── Buttons & forms (bootstrap + legacy) ───────────────────────── */
.btn { border-radius: 10px; font-family: var(--hp-body); font-weight: 600; }
.btn-primary, .btn-success { background: var(--hp-brand) !important; border-color: var(--hp-brand) !important; color: #fff !important; }
.btn-primary:hover, .btn-success:hover { background: var(--hp-brand-deep) !important; border-color: var(--hp-brand-deep) !important; }
.button.orange, input.orange { background: var(--hp-brand) !important; border: 0 !important; color: #fff !important; border-radius: 10px !important; padding: 9px 18px !important; font-weight: 700 !important; text-shadow: none !important; box-shadow: none !important; }
.form-control { border-radius: 10px; border-color: var(--hp-line-strong); }
.form-control:focus { border-color: var(--hp-brand); box-shadow: 0 0 0 3px var(--hp-brand-ring); }
.dropdown-menu { border: 1px solid var(--hp-line); border-radius: 12px; box-shadow: 0 18px 48px rgba(20,10,30,.14); padding: 6px; }
.dropdown-item { border-radius: 8px; }
.dropdown-item:hover { background: var(--hp-brand-wash); }

/* ─── Footer ─────────────────────────────────────────────────────── */
footer.footer { background: var(--hp-ink) !important; color: var(--hp-on-ink); padding: 48px 0 40px !important; margin-top: 40px; font-size: .9rem !important; line-height: 2; font-family: var(--hp-body); }
footer.footer b { color: #fff; font-size: .95rem !important; font-family: var(--hp-display); font-weight: 400; letter-spacing: .01em; }
footer.footer a, footer.footer a:visited { color: var(--hp-on-ink) !important; text-decoration: none; }
footer.footer a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
footer.footer .row > div { margin-bottom: 18px; }

/* floating feedback button */
a[href="/feedback.php"][style*="position: fixed"] { background: #fff !important; border: 1px solid var(--hp-line) !important; color: var(--hp-ink) !important; box-shadow: 0 8px 24px rgba(35,17,47,.18) !important; padding: .45rem 1rem !important; font-family: var(--hp-body); font-size: .85rem; }

/* ─── Homepage → NeedSugarDaddy look (visual only, scoped to the homepage) ── */
.hero-section[role="banner"] { background: var(--hp-ink) !important; }
.hero-section[role="banner"] .floating-shape { opacity: .55; }
.hero-section[role="banner"] h1, .hero-section[role="banner"] .hero-title { font-family: var(--hp-display) !important; font-weight: 400 !important; letter-spacing: -.01em; }
.hero-section[role="banner"] .highlight, body:has(.hero-section[role="banner"]) .gradient-text { background: none !important; -webkit-text-fill-color: var(--hp-gold) !important; color: var(--hp-gold) !important; }
body:has(.hero-section[role="banner"]) .stat-number { background: none !important; -webkit-text-fill-color: var(--hp-gold) !important; color: var(--hp-gold) !important; font-family: var(--hp-display); font-weight: 400 !important; }
body:has(.hero-section[role="banner"]) .signup-card { border-radius: 18px !important; border: 1px solid rgba(255,255,255,.1) !important; }
body:has(.hero-section[role="banner"]) .signup-card-header { background: var(--hp-brand) !important; }
body:has(.hero-section[role="banner"]) .btn-register, body:has(.hero-section[role="banner"]) .register-btn, body:has(.hero-section[role="banner"]) .btn-hero-primary { background: var(--hp-gold) !important; color: var(--hp-gold-ink) !important; box-shadow: 0 14px 30px -14px rgba(217,178,106,.8) !important; }
body:has(.hero-section[role="banner"]) .section-title, body:has(.hero-section[role="banner"]) .section-header h2 { font-family: var(--hp-display) !important; font-weight: 400 !important; color: var(--hp-ink); }

/* ─── Announcements on the stream ────────────────────────────────── */
.sc-pinbar .sc-pin-x { margin-left: 8px; border: 0; background: rgba(0,0,0,.05); color: var(--hp-muted); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.sc-pinbar .sc-pin-x:hover { background: var(--hp-brand-wash); color: var(--hp-ink); }
.sc-pinbar .sc-unpin-admin { margin-left: 8px; border: 1px solid #e7b9da; background: #fff; color: var(--hp-brand-deep); border-radius: 8px; padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0; text-transform: none; }
.sc-hidden-note { font-size: 12.5px; color: var(--hp-muted); margin: 0 0 12px; }
.sc-hidden-note button { border: 0; background: none; color: var(--hp-brand); font-weight: 700; cursor: pointer; padding: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* fixes after first visual pass */
.showmem.hpc, .showmem.hpc * { text-align: left; }
.showmem.hpc .hpc__chat { text-align: center; }
.hp-admin-frame { border-radius: 14px !important; padding: 3px !important; }
.hp-admin-frame .showmem.hpc { background: #f0f6ff; border-radius: 11px; min-height: 0; width: 166px; }
@media (max-width: 1079px) { .hp-admin-frame { width: calc(50% - 10px); } .hp-admin-frame .showmem.hpc { width: 100%; } }
@media (min-width: 560px) and (max-width: 1079px) { .hp-admin-frame { width: calc(33.333% - 10px); } }
@media (min-width: 820px) and (max-width: 1079px) { .hp-admin-frame { width: calc(25% - 10px); } }
@media (max-width: 480px) { .hp-icon--vis { display: none; } .hp-actions { gap: 2px; } }
.hp-promo-wrap:empty { display: none; }
.hp-admin-frame { box-sizing: border-box; margin: 5px !important; }

/* profile page header → ink + gold like NeedSugarDaddy */
.profile-header { background: var(--hp-ink) !important; box-shadow: 0 18px 40px -24px rgba(35,17,47,.6) !important; }
.profile-header::before, .profile-header::after { opacity: .25; }
.profile-header h1 { font-family: var(--hp-display) !important; font-weight: 400 !important; color: #fff !important; text-shadow: none !important; }
.profile-header .stat-value, .profile-header .stat-number { font-family: var(--hp-display); font-weight: 400; color: var(--hp-gold) !important; }

/* legacy member pop-ups, restyled */
#dailysearch { background: #fff !important; border: 1px solid var(--hp-line) !important; border-radius: 16px !important; box-shadow: 0 24px 60px rgba(35,17,47,.25) !important; font-family: var(--hp-body); }

/* ─────────────────────────────────────────────────────────────────
   Round 2 (2026-11-02): legacy landing + member pages, visual only.
   No text, headings, links or URLs change — only how they look.
   ───────────────────────────────────────────────────────────────── */
.container, body .container.custcontain, body .custcontain { font-family: var(--hp-body) !important; }
.container.custcontain { font-size: 15px; line-height: 1.6; color: var(--hp-text); padding-top: 18px; padding-bottom: 28px; }
.custcontain h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem) !important; line-height: 1.15; margin: 8px 0 12px !important; }
.custcontain h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin: 22px 0 10px; }
.custcontain h3 { font-size: 1.2rem; margin: 18px 0 8px; }
.custcontain p { max-width: 75ch; }
.custcontain > hr, .custcontain hr { border: 0; border-top: 1px solid var(--hp-line); opacity: 1; }

/* primary call-to-action on landing pages */
a.regbutton, a.regbutton:visited { display: inline-flex; align-items: center; gap: 8px; background: var(--hp-brand) !important; color: #fff !important; padding: 11px 20px; border-radius: 12px; margin: 10px 0; font-weight: 700; font-size: .98rem; text-decoration: none; box-shadow: 0 12px 26px -14px rgba(176,23,122,.75); }
a.regbutton::before { content: '\2665'; font-size: .9em; opacity: .9; }
a.regbutton:hover { background: var(--hp-brand-deep) !important; color: #fff !important; }

/* pagination (Previous / Next) */
#pagination-flickr { display: flex !important; gap: 8px; align-items: center; margin: 14px 0 !important; padding: 0 !important; }
#pagination-flickr li { float: none !important; }
#pagination-flickr li a, #pagination-flickr .previous-off, #pagination-flickr .next-off, #pagination-flickr a:link, #pagination-flickr a:visited {
  float: none !important; display: inline-flex !important; align-items: center; min-height: 40px; padding: 8px 16px !important; border-radius: 10px; font-size: .9rem !important; font-weight: 700; text-decoration: none; }
#pagination-flickr .next a, #pagination-flickr .previous a { background: var(--hp-ink) !important; color: #fff !important; }
#pagination-flickr .next a:hover, #pagination-flickr .previous a:hover { background: var(--hp-brand) !important; }
#pagination-flickr .previous-off, #pagination-flickr .next-off { background: #fff !important; color: var(--hp-line-strong) !important; border: 1px solid var(--hp-line); }

/* breadcrumbs */
.custcontain .breadcrumb, .breadcrumb-bar { background: transparent !important; padding: 4px 0 !important; margin: 0 0 6px !important; font-size: .86rem; color: var(--hp-muted); border: 0 !important; }
.custcontain .breadcrumb a, .breadcrumb-bar a { color: var(--hp-muted) !important; font-weight: 600; }
.custcontain .breadcrumb a:hover, .breadcrumb-bar a:hover { color: var(--hp-brand) !important; }

/* keyword tags + related links */
.keyword-box { background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; padding: 16px; }
.keyword-tag, a.keyword-tag, .keyword-tags a, .city-links a, .country-link, a.country-link { display: inline-flex; align-items: center; padding: 6px 13px; margin: 3px; border-radius: 999px; border: 1px solid var(--hp-line-strong); background: #fff; color: var(--hp-ink) !important; font-weight: 600; font-size: .86rem; text-decoration: none; }
.keyword-tag:hover, .keyword-tags a:hover, .city-links a:hover, .country-link:hover { border-color: var(--hp-ink); background: #fff; }

/* FAQ blocks */
.faq-item { background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; margin: 10px 0; padding: 14px 18px; box-shadow: none; }
.faq-question { font-family: var(--hp-body); font-weight: 700; color: var(--hp-ink); font-size: 1.02rem; }
.faq-answer { color: var(--hp-muted); line-height: 1.65; }

/* content cards used on hubs / landing pages */
.highlight-box, .seo-content, .content-section, .members-section, .benefit-card, .step, .trust-item, .stat-item { border-radius: 14px; }
.highlight-box { background: #fff !important; border: 1px solid var(--hp-line) !important; border-left: 4px solid var(--hp-brand) !important; }
.benefit-card, .step { background: #fff !important; border: 1px solid var(--hp-line) !important; box-shadow: none !important; }
.step-number { background: var(--hp-ink) !important; color: #fff !important; font-family: var(--hp-display); font-weight: 400 !important; }
.benefit-card h3, .step h3 { font-family: var(--hp-body) !important; font-weight: 700 !important; font-size: 1.05rem; color: var(--hp-ink); }

/* country/city heroes on the newer landing templates */
.country-hero { background: var(--hp-ink) !important; }
.country-hero h1 { font-family: var(--hp-display) !important; font-weight: 400 !important; }
.btn-hero-primary { background: var(--hp-gold) !important; color: var(--hp-gold-ink) !important; border: 0 !important; box-shadow: 0 14px 30px -14px rgba(217,178,106,.8) !important; }
.btn-hero-secondary { border-color: rgba(255,255,255,.45) !important; }
.filter-bar { border-radius: 14px !important; border: 1px solid var(--hp-line) !important; box-shadow: none !important; }
.filter-select, .searchopt { border: 1px solid var(--hp-line-strong) !important; border-radius: 10px !important; padding: 8px 12px !important; font-family: var(--hp-body); font-size: .95rem !important; background-color: #fff !important; min-height: 40px; max-width: 100%; }
.load-more-btn, .pagination-btn { border-radius: 12px !important; }

/* the "N members in country · top cities" box */
.custcontain > div[style*="fbf6ec"], .country-stats, .hp-countrystats { border-radius: 14px !important; }

/* member grid: keep the floating cards tidy and centred on wide screens */
.article-feed::after, .members-grid::after, .custcontain::after { content: ''; display: table; clear: both; }

/* ─── Member pages (inbox, visitors, search) ─────────────────────── */
.custcontain .btn-group .btn, .msgtabs a { border-radius: 999px !important; }
.custcontain img[src*="load"][src$=".gif"] { display: none; }   /* stray "loading…" spinners */
.custcontain a.btn, .custcontain .btn { font-family: var(--hp-body); }
.custcontain input[type=text], .custcontain input[type=email], .custcontain input[type=password], .custcontain select, .custcontain textarea { border: 1px solid var(--hp-line-strong); border-radius: 10px; padding: 8px 12px; font-family: var(--hp-body); }
.custcontain input[type=submit], .custcontain button[type=submit] { background: var(--hp-brand); color: #fff; border: 0; border-radius: 10px; padding: 9px 18px; font-weight: 700; }

/* post-footer SEO links strip (kept, just styled) */
footer.footer + * , footer.footer ~ .container { font-family: var(--hp-body); }

/* small screens: comfortable side gutters for legacy containers */
@media (max-width: 575px) {
  .container.custcontain { padding-left: 14px; padding-right: 14px; }
  #pagination-flickr { justify-content: space-between; }
}
body .custcontain { border-top-color: transparent !important; border-bottom-color: var(--hp-line) !important; }
#pwa-install-banner { background: var(--hp-ink) !important; }
#pwa-install-banner button { border-color: var(--hp-gold) !important; color: var(--hp-gold) !important; }
/* infinite-scroll status text: the library is never loaded, so these messages were always visible */
.scroller-status { display: none !important; }
/* cards placed inside a page's own CSS grid: let the grid size them */
[class*="grid"] > .showmem.hpc, [class*="grid"] > .hp-admin-frame { width: auto !important; float: none !important; margin: 0 !important; }
[class*="grid"] > .hp-admin-frame .showmem.hpc { width: 100% !important; }
/* legacy hepays.css makes body text bold (font-weight:700 on body) — normal weight on the new pages */
.hp-blog, .wf, .fb, .bc { font-weight: 400; }
.hp-blog b, .hp-blog strong, .wf b, .wf strong, .wf th, .wf td { font-weight: 700; }
/* pages that wrap each card in <article class="article"> (Online, New members…): size the wrapper, not the card */
article.article:has(> .showmem.hpc), article.article:has(> .hp-admin-frame) { display: inline-block; vertical-align: top; float: none; width: calc(50% - 10px) !important; margin: 5px !important; padding: 0 !important; }
@media (min-width: 560px)  { article.article:has(> .showmem.hpc), article.article:has(> .hp-admin-frame) { width: calc(33.333% - 10px) !important; } }
@media (min-width: 820px)  { article.article:has(> .showmem.hpc), article.article:has(> .hp-admin-frame) { width: calc(25% - 10px) !important; } }
@media (min-width: 1080px) { article.article:has(> .showmem.hpc), article.article:has(> .hp-admin-frame) { width: 172px !important; } }
article.article > .showmem.hpc { width: 100% !important; float: none !important; margin: 0 !important; }
article.article > .hp-admin-frame { width: 100% !important; margin: 0 !important; }
article.article > .hp-admin-frame .showmem.hpc { width: 100% !important; }

/* ─────────────────────────────────────────────────────────────────
   Round 3 polish (2026-11-02): calmer member pages
   ───────────────────────────────────────────────────────────────── */
/* partner links row: quiet white chips instead of four loud gradients */
.hp-promo-wrap { padding-top: 14px !important; padding-bottom: 4px !important; }
.hp-promo-wrap .hp-promo { gap: 8px; }
.hp-promo-wrap .hp-promo a { background: #fff !important; color: var(--hp-ink) !important; border: 1px solid var(--hp-line); box-shadow: none; padding: 6px 12px 6px 6px; font-size: 13px; font-weight: 600; }
.hp-promo-wrap .hp-promo a:hover { border-color: var(--hp-line-strong); box-shadow: 0 6px 16px -10px rgba(35,17,47,.35); }
.hp-promo-wrap .hp-promo .hp-ic { width: 24px; height: 24px; }
.hp-promo-wrap .hp-promo .hp-tg .hp-ic { background: #2AABEE; }
.hp-promo-wrap .hp-promo .hp-kp .hp-ic { background: #22c55e; }
.hp-promo-wrap .hp-promo .hp-mc .hp-ic { background: var(--hp-brand); }
.hp-promo-wrap .hp-promo .hp-dp .hp-ic { background: #f59e0b; }

/* "latest post" teaser at the top of the Online page */
#tophide { background: #fff !important; border: 1px solid var(--hp-line) !important; border-left: 4px solid var(--hp-gold) !important; border-radius: 14px; margin: 12px 0 6px !important; padding: 12px 14px !important; font-family: var(--hp-body) !important; box-shadow: 0 8px 24px -18px rgba(35,17,47,.4); }
#tophide img { border-radius: 10px !important; object-fit: cover; }
#tophide a { font-family: var(--hp-body); }

/* section links above member grids */
a[href="/gallery"][style*="font-size:16px"] { font-family: var(--hp-display) !important; font-weight: 400 !important; font-size: 1.35rem !important; color: var(--hp-ink) !important; text-decoration: none; }
a[href="/gallery"][style*="font-size:16px"] i { color: var(--hp-brand); font-size: .8em; }

/* member grid spacing + gentle lift on hover */
.article-feed { margin-top: 10px !important; }
.showmem.hpc { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.showmem.hpc:hover { transform: translateY(-2px); }
.hpc__chip--coin { box-shadow: 0 2px 6px rgba(42,26,5,.18); }
.hpc__name, .hpc__name:visited { font-size: 1rem; }

/* page canvas: soft paper background, white content surfaces */
body { background: var(--hp-paper) !important; }
.container.custcontain[style*="padding:0px"] { padding: 0 12px !important; }

/* links in body copy: underline on hover only */
.custcontain a { text-underline-offset: 3px; }
.custcontain a:hover { text-decoration: underline; }
.custcontain a.hpc__name:hover, .custcontain a.hpc__chat:hover, .custcontain a.hpc__photo:hover, .custcontain .hp-promo a:hover { text-decoration: none; }

/* feedback pill: smaller on phones so it never covers cards */
@media (max-width: 560px) { a[href="/feedback.php"][style*="position: fixed"] { padding: .35rem .8rem !important; font-size: .8rem; bottom: 10px !important; right: 10px !important; } }
/* narrow phones: keep the whole header on screen */
@media (max-width: 420px) {
  .hp-hdr .hp-hdr__bar { gap: 6px; }
  .hp-hdr .hp-logo img { height: 18px; }
  .hp-hdr .hp-credit { height: 34px; padding: 0 9px 0 4px; gap: 6px; font-size: .85rem; }
  .hp-hdr .hp-credit__coin { width: 24px; height: 24px; }
  .hp-hdr .hp-icon { width: 34px; height: 36px; }
  .hp-hdr .hp-acct__btn .fa-chevron-down { display: none; }
  .hp-hdr .hp-acct__btn img { width: 32px; height: 32px; }
}
@media (max-width: 350px) { .hp-hdr .hp-icon[href^="/notifications.php"] { display: none; } }
@media (max-width: 480px) { .hp-hdr .hp-icon--vis { display: none; } .hp-hdr .hp-actions { gap: 2px; } }
@media (max-width: 560px) { .hp-hdr .hp-credit__sub { display: none; } }

/* ===== round 4 (2026-11-02): sections polish ===== */
/* phones: the 4 promo chips become one swipeable row instead of eating half the screen */
@media (max-width: 640px) {
  .hp-promo-wrap { padding: 8px 0 2px !important; }
  .hp-promo-wrap .hp-promo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 12px 4px; -webkit-overflow-scrolling: touch; }
  .hp-promo-wrap .hp-promo::-webkit-scrollbar { display: none; }
  .hp-promo-wrap .hp-promo a { flex: 0 0 auto; }
}
/* daily "what are you looking for" prompt: compact card, proper buttons */
#dailysearch { width: 330px; max-width: calc(100vw - 24px); padding: 16px 16px 14px !important; font-size: 14px !important; line-height: 1.45; color: var(--hp-ink) !important; }
#dailysearch textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; border: 1px solid var(--hp-line) !important; border-radius: 10px !important; padding: 9px 11px !important; font: inherit !important; background: #faf7fc !important; min-height: 64px; }
#dailysearch input[type=button] { font: 700 13px var(--hp-body) !important; border: 0 !important; border-radius: 999px !important; padding: 8px 16px !important; margin-top: 8px; cursor: pointer; background: var(--hp-brand) !important; color: #fff !important; box-shadow: none !important; }
#dailysearch input[type=button] + input[type=button] { background: #f1ebf5 !important; color: var(--hp-ink) !important; }
/* simple page titles (visitors, notifications, likes …) */
.custcontain > h6:first-of-type, .custcontain > h5:first-of-type { font: 700 1.45rem/1.2 var(--hp-body) !important; color: var(--hp-ink) !important; margin: 8px 0 6px !important; letter-spacing: -.01em; }
.custcontain > hr { border: 0; border-top: 1px solid var(--hp-line); margin: 14px 0; }
/* old-style buttons that still appear on some pages */
.custcontain .btn-success { background: var(--hp-brand) !important; border-color: var(--hp-brand) !important; border-radius: 999px !important; font-weight: 700; padding: 9px 20px; }