/* Join form (self contained). Colours follow the site's tokens when present, with fallbacks. */
.jf {
  --jf-primary: var(--color-primary, #cc0000);
  --jf-primary-dark: var(--color-primary-dark, #a30000);
  --jf-soft: var(--color-primary-light, #fbe9e7);
  --jf-text: var(--color-text, #2b2a29);
  --jf-muted: var(--color-text-soft, #5e5853);
  --jf-line: #d9cec5;
  --jf-radius: 0.75rem;
  color: var(--jf-text);
  max-width: 34rem;
}
.jf *, .jf *::before, .jf *::after { box-sizing: border-box; }

.jf-form {
  background: #fff;
  border-radius: var(--jf-radius);
  border-top: 4px solid var(--jf-primary);
  box-shadow: 0 16px 40px rgba(35, 35, 35, 0.14);
  padding: 1.5rem;
}

/* Progress */
.jf-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--jf-muted); }
.jf-count { white-space: nowrap; font-weight: 600; }
.jf-bar { flex: 1; height: 6px; border-radius: 99px; background: #efe7e1; overflow: hidden; }
.jf-bar span { display: block; height: 100%; width: 20%; background: var(--jf-primary); border-radius: 99px; transition: width 220ms ease; }
.jf:not(.jf--js) .jf-top { display: none; }

/* Steps (without JavaScript every step shows; with it, one at a time) */
.jf-step { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.jf--js .jf-step { display: none; margin-bottom: 0; }
.jf--js .jf-step.is-current { display: block; }
.jf-q { font-family: var(--font-heading, Georgia, serif); font-size: 1.35rem; font-weight: 700; margin: 0 0 0.75rem; padding: 0; color: var(--color-heading, #232323); }
.jf-q--2 { margin-top: 1.25rem; margin-bottom: 0.25rem; }
.jf-hint { margin: 0 0 0.75rem; color: var(--jf-muted); font-size: 0.92rem; }

/* Highlight buttons: the input sits inside the label, the span is the visible button */
.jf-opts { display: grid; gap: 0.6rem; }
.jf-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jf-opts--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.jf-opts--tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jf-btn { position: relative; display: block; cursor: pointer; }
.jf-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jf-btn span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3.2rem; padding: 0.6rem 1rem;
  border: 2px solid var(--jf-line); border-radius: var(--jf-radius);
  background: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.2;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.jf-btn--tag span { min-height: 2.6rem; padding: 0.45rem 0.95rem; border-radius: 99px; font-weight: 600; font-size: 0.95rem; }
.jf-btn:hover span { border-color: var(--jf-primary); }
.jf-btn input:checked + span { background: var(--jf-primary); border-color: var(--jf-primary); color: #fff; }
.jf-btn input:focus-visible + span { outline: 3px solid var(--color-focus, #2f6f62); outline-offset: 2px; }

/* See all */
.jf-more { margin-top: 0.6rem; }
.jf-more summary { cursor: pointer; color: var(--color-accent, #2f6f62); font-weight: 600; font-size: 0.92rem; list-style: none; display: inline-block; padding: 0.25rem 0; text-decoration: underline; text-underline-offset: 3px; }
.jf-more summary::-webkit-details-marker { display: none; }
.jf-more[open] summary { margin-bottom: 0.6rem; }

/* Date of birth */
.jf-dob { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 0.6rem; }
.jf-dob select, .jf-field input {
  width: 100%; min-height: 3.2rem; padding: 0.6rem 0.8rem;
  border: 2px solid var(--jf-line); border-radius: var(--jf-radius);
  background: #fff; color: var(--jf-text); font: inherit; font-size: 1.02rem;
}
.jf-dob select:focus, .jf-field input:focus { outline: none; border-color: var(--jf-primary); }

/* Last bit */
.jf-field { display: block; margin-bottom: 0.9rem; }
.jf-field > span { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.jf-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--jf-muted); cursor: pointer; }
.jf-consent input { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; accent-color: var(--jf-primary); flex: none; }
.jf-consent a { color: inherit; text-decoration: underline; }

/* Errors and navigation */
.jf-error { min-height: 1.2rem; margin: 0.75rem 0 0; color: var(--jf-primary-dark); font-weight: 600; font-size: 0.92rem; }
.jf-error:empty { min-height: 0; margin: 0; }
.jf-nav { display: flex; gap: 0.6rem; margin-top: 1rem; }
.jf .jf-nav button {
  min-height: 3.2rem; padding: 0.8rem 1.4rem; border-radius: 99px; border: 0;
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
}
.jf .jf-next, .jf .jf-submit { flex: 1; background: var(--jf-primary); color: #fff; }
.jf .jf-next:hover, .jf .jf-submit:hover { background: var(--jf-primary-dark); }
.jf .jf-back { background: transparent; color: var(--jf-text); border: 2px solid var(--jf-line) !important; }
.jf:not(.jf--js) .jf-back, .jf:not(.jf--js) .jf-next { display: none; }
.jf--js .jf-submit { display: none; }
.jf--js.jf--last .jf-submit { display: block; }
.jf--js.jf--last .jf-next { display: none; }
.jf.jf--js.jf--first .jf-back { display: none; }
.jf-login { text-align: center; margin: 1rem 0 0; font-size: 0.9rem; color: var(--jf-muted); }
.jf-login a { color: var(--jf-primary-dark); font-weight: 700; }

/* Member preview (photos are CSS backgrounds, which Google does not index) */
.jf-feed { margin-top: 1rem; }
.jf-feed-head { margin: 0 0 0.6rem; font-weight: 700; font-size: 0.95rem; }
.jf-feed-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jf-card { min-width: 0; }
.jf-pic { display: block; aspect-ratio: 1 / 1; border-radius: var(--jf-radius); background: #efe7e1 center top / cover no-repeat; }
.jf-name { display: block; margin-top: 0.35rem; font-weight: 700; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-place { display: block; font-size: 0.78rem; color: var(--jf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .jf-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jf-form { padding: 1.15rem; } }

.jf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Consent box highlighted when someone tries to finish without ticking it */
.jf-consent { border: 2px solid transparent; border-radius: var(--jf-radius); padding: 0.6rem; margin: 0 -0.6rem; transition: border-color 150ms ease, background 150ms ease; }
.jf-consent--error { border-color: var(--jf-primary); background: var(--jf-soft); color: var(--jf-text); animation: jf-shake 360ms ease; }
.jf-consent--error input { outline: 2px solid var(--jf-primary); outline-offset: 2px; }
@keyframes jf-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .jf-consent--error { animation: none; } }

/* ===== Compact theme (theme "compact"): narrow columns, plainer look, as on the SinglesOver60 sites ===== */
.jf--compact { --jf-primary: #cc0000; --jf-primary-dark: #a30000; --jf-soft: #fdecec; --jf-text: #333; --jf-muted: #666; --jf-line: #a8a8a8; --jf-radius: 4px; max-width: 100%; text-align: left; font-family: Arial, Helvetica, sans-serif; }
.jf--compact .jf-form { box-shadow: none; border-top: 0; padding: 0; background: transparent; }
.jf--compact .jf-top { margin-bottom: 0.6rem; font-size: 12px; }
.jf--compact .jf-bar { height: 4px; }
.jf--compact .jf-q { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 20px; color: #3c5286; margin-bottom: 0.5rem; text-align: center; width: 100%; }
.jf--compact .jf-q--2 { margin-top: 0.9rem; }
.jf--compact .jf-hint { font-size: 13px; margin-bottom: 0.5rem; text-align: center; }
.jf--compact .jf-opts { gap: 0.4rem; }
.jf--compact .jf-opts--tags { gap: 0.35rem; justify-content: center; }
.jf--compact .jf-btn span { min-height: 2.6rem; padding: 0.4rem 0.6rem; border-width: 1px; font-size: 15px; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); }
.jf--compact .jf-btn--tag span { min-height: 2.1rem; padding: 0.3rem 0.7rem; font-size: 13px; border-radius: 99px; }
.jf--compact .jf-more { text-align: center; margin-top: 0.4rem; }
.jf--compact .jf-more summary { font-size: 13px; color: #3c5286; }
.jf--compact .jf-dob select, .jf--compact .jf-field input { min-height: 2.6rem; padding: 0.4rem 0.5rem; border-width: 1px; font-size: 15px; width: 100%; max-width: none; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); }
.jf--compact .jf-field { margin-bottom: 0.6rem; }
.jf--compact .jf-field > span { font-size: 14px; color: #3c5286; }
.jf--compact .jf-consent { font-size: 12px; line-height: 1.35; }
.jf--compact .jf-error { font-size: 13px; text-align: center; }
.jf--compact .jf-nav { margin-top: 0.7rem; gap: 0.4rem; }
.jf.jf--compact .jf-nav button { min-height: 2.9rem; padding: 0.6rem 1rem; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; text-transform: uppercase; margin: 0; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); }
.jf.jf--compact .jf-back { flex: 0 0 auto; font-size: 14px; text-transform: none; background: #fff; color: #333; border: 1px solid #a8a8a8 !important; }
.jf--compact .jf-feed { margin-top: 0.7rem; }
.jf--compact .jf-feed-head { font-size: 13px; text-align: center; margin-bottom: 0.4rem; color: #3c5286; }
.jf--compact .jf-feed-grid { gap: 0.4rem; }
.jf--compact .jf-pic { border-radius: 3px; }
.jf--compact .jf-name { font-size: 11px; margin-top: 0.2rem; }
.jf--compact .jf-place { font-size: 10px; }

/* Guard against host site rules such as ".form-main input { width: 240px }" */
.jf .jf-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; box-shadow: none; }
.jf .jf-consent input { width: 1.25rem; height: 1.25rem; padding: 0; box-shadow: none; }

/* Host page guard (ids): some host pages style every p or legend by id (e.g. #splash p) */
#join p.jf-q, #join legend.jf-q, #join p.jf-hint, #join p.jf-feed-head, #join p.jf-error, #join p.jf-login { padding: 0; clear: none; }
#join.jf--compact p.jf-q, #join.jf--compact legend.jf-q { color: #3c5286; }
#join.jf--compact p.jf-hint { color: #666; }

/* Singles Over 60 layout: on desktop let the home splash columns grow together when a step
   is taller, and stretch the photo to fill. Only matches pages with #splash.homePage. */
@media (min-width: 824px) {
  #splash.homePage { display: flex; align-items: stretch; }
  #splash.homePage > #splashLeft, #splash.homePage > #splashRight { height: auto; min-height: 560px; }
  #splash.homePage > #splashRight { background-size: cover; background-position: right bottom; }
}
#join.jf--compact p.jf-q { font-size: 20px; }

/* Step count in the Next button: switched off for now (top bar used instead) */
.jf .jf-btn-step { display: none; }
/* Singles Over 60 layout: hide the old "Join Singles Over 60 Dating Today" heading above our form */
.form-main.reg:has(#join) > div:first-child { display: none; }
/* Feed grid full width (some host pages set ul widths, e.g. #splashLeft ul 80%) */
#join ul.jf-feed-grid { width: 100%; margin: 0; }
/* Compact theme: a little narrower */
#join.jf--compact { max-width: 400px; margin-left: auto; margin-right: auto; }
/* Compact theme: keep three choices on one row */
.jf--compact .jf-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#join.jf--compact .jf-q, #join.jf--compact .jf-q--2 { text-align: center; display: block; width: 100%; }
/* Compact theme: more breathing room, square photos, name then "age - town" */
.jf--compact .jf-top { margin-bottom: 1rem; }
#join.jf--compact .jf-q { margin-bottom: 0.75rem; }
#join.jf--compact .jf-q--2 { margin-top: 1.4rem; }
.jf--compact .jf-opts { gap: 0.6rem; }
.jf--compact .jf-more { margin-top: 0.6rem; }
.jf--compact .jf-feed { margin-top: 1.4rem; }
#join.jf--compact p.jf-feed-head { margin-bottom: 0.6rem; }
.jf--compact .jf-feed-grid { gap: 0.6rem; }
.jf--compact .jf-pic { border-radius: 0; }
.jf--compact .jf-name { font-size: 12px; margin-top: 0.3rem; }
.jf--compact .jf-place { font-size: 11px; }
.jf--compact .jf-nav { margin-top: 1.4rem; }
/* Undo host p widths (e.g. #splashLeft p 90%) */
#join p.jf-q, #join p.jf-hint, #join p.jf-feed-head, #join p.jf-error { width: auto; }
/* Compact theme: centre name and age line under each photo */
.jf--compact .jf-name, .jf--compact .jf-place { text-align: center; }
/* Step 1 dropdown version */
.jf-select { display: block; }
#join .jf-select select { display: block; width: 100%; max-width: none; min-height: 3.4rem; padding: 0.5rem 1rem; font-size: 16px; color: #555; background: #fff; border: 1px solid #a8a8a8; border-radius: 0; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); box-sizing: border-box; }
/* Error message in red */
#join p.jf-error { color: #cc0000; font-weight: 700; text-align: center; }
/* Box that needs fixing */
#join .jf-bad { border-color: #cc0000 !important; box-shadow: 0 0 0 1px #cc0000 !important; background-color: #fff6f6; }
/* Page asked for no member preview on desktop ($joinHideFeedDesktop) */
@media (min-width: 824px) { #join.jf--nofeed-desktop .jf-feed { display: none !important; } }