/* ==========================================================================
   JEF form redesign — dark, full-page skin for CiviCRM contribution/membership
   pages on crm.jef.eu. Loaded (with skin.js) only on contribute/transact pages
   via the jef-form-redesign mu-plugin, and only for preview/admins until go-live.
   Scoped to body.jef-skin. Injected chrome uses the jefx- prefix.
   Brand green #00CC66; Mulish web font (Proxima Nova fallback).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&display=swap');

body.jef-skin{
  --bg:#0b0e0c;
  --bg-soft:#10140f;
  --panel:#141a15;
  --panel-2:#171e18;
  --field:#0f140f;
  --field-line:#2a352b;
  --field-line-2:#33422f;
  --line:#232c23;
  --ink:#e9f0e8;
  --ink-2:#cdd6cb;
  --muted:#8f9c8d;
  --faint:#6f7c6e;
  --jef:#00CC66;
  --jef-bright:#22d47a;
  --jef-deep:#0a7d45;
  font-family:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg)!important;
  color:var(--ink);
}

/* ---- hide the WordPress theme chrome on these pages ---- */
body.jef-skin #header,
body.jef-skin .title-bar,
body.jef-skin #footer,
body.jef-skin #content-overlay,
body.jef-skin .rife-scroll-top,
body.jef-skin .scroll-top{ display:none!important; }

/* ---- dark-out every theme wrapper, strip their widths/boxes ---- */
body.jef-skin,
body.jef-skin .page-background,
body.jef-skin #mid,
body.jef-skin #content,
body.jef-skin #col-mask,
body.jef-skin .content-box,
body.jef-skin .content-limiter,
body.jef-skin .formatter{
  background:var(--bg)!important;
  max-width:none!important; width:auto!important;
  margin:0!important; border:0!important; box-shadow:none!important;
}
body.jef-skin #mid,
body.jef-skin #content,
body.jef-skin #col-mask,
body.jef-skin .content-box,
body.jef-skin .content-limiter,
body.jef-skin .formatter{ padding:0!important; }

/* the real content becomes our centered grid shell (hero / form / rail) */
body.jef-skin .real-content{
  background:transparent!important;
  max-width:1140px!important;
  margin:0 auto!important;
  padding:26px 24px 90px!important;
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-areas:"hero hero" "form rail";
  column-gap:34px; row-gap:6px;
  align-items:start;
}
body.jef-skin .jefx-hero{grid-area:hero}
body.jef-skin #crm-container{grid-area:form}
body.jef-skin .jefx-rail{grid-area:rail}
@media(max-width:880px){
  body.jef-skin .real-content{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "rail" "form";column-gap:0}
}

/* ======================= injected header ======================= */
body.jef-skin .jefx-header{
  background:rgba(11,14,12,.86);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
body.jef-skin .jefx-header-in{
  max-width:1140px;margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;gap:24px;
}
body.jef-skin .jefx-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
body.jef-skin .jefx-logo{width:34px;height:34px;flex:0 0 auto;display:block}
body.jef-skin .jefx-logo-img{width:auto;max-width:170px;height:36px;object-fit:contain}
body.jef-skin .jefx-brand b{font-weight:900;font-size:18px;letter-spacing:.02em;line-height:1}
body.jef-skin .jefx-brand span{display:block;font-weight:800;font-size:9.5px;letter-spacing:.16em;color:var(--jef-bright);text-transform:uppercase;margin-top:3px}
body.jef-skin .jefx-nav{display:flex;gap:22px;margin-left:8px}
body.jef-skin .jefx-nav a{color:var(--muted);text-decoration:none;font-weight:700;font-size:13.5px;transition:color .12s}
body.jef-skin .jefx-nav a:hover{color:var(--ink)}
body.jef-skin .jefx-steps{margin-left:auto;display:flex;align-items:center;gap:10px;font-weight:800;font-size:12.5px}
body.jef-skin .jefx-steps .on{color:var(--jef-bright)}
body.jef-skin .jefx-steps .next{color:var(--faint)}
body.jef-skin .jefx-steps .sep{color:var(--line)}
@media(max-width:880px){body.jef-skin .jefx-nav,body.jef-skin .jefx-steps{display:none}}

/* ========================= hero ========================= */
body.jef-skin .jefx-hero{padding:30px 2px 20px;max-width:760px}
body.jef-skin .jefx-eyebrow{font-weight:900;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--jef-bright);margin:0 0 12px}
body.jef-skin .jefx-title{font-weight:900;font-size:38px;line-height:1.05;letter-spacing:-.02em;margin:0 0 16px;color:#fff}
body.jef-skin .jefx-intro{color:var(--ink-2);font-size:16px;line-height:1.55;margin:0}
body.jef-skin .jefx-intro p{margin:0 0 10px}
@media(max-width:520px){body.jef-skin .jefx-title{font-size:29px}}

/* ========================= right rail ========================= */
body.jef-skin .jefx-rail{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px;padding-top:30px}
body.jef-skin .jefx-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:17px 18px}
body.jef-skin .jefx-card h4{margin:0 0 11px;font-weight:900;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
body.jef-skin .jefx-card p{margin:0 0 9px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
body.jef-skin .jefx-card p:last-child{margin-bottom:0}
body.jef-skin .jefx-card a{color:var(--jef-bright);text-decoration:none;font-weight:700}
body.jef-skin .jefx-card a:hover{text-decoration:underline}
body.jef-skin .jefx-secure{display:flex;gap:11px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--line);border-radius:15px;padding:15px 16px;color:var(--muted);font-size:12.5px;line-height:1.45}
body.jef-skin .jefx-secure svg{flex:0 0 auto;margin-top:1px}
body.jef-skin .jefx-secure b{color:var(--ink-2);font-weight:800}
@media(max-width:880px){body.jef-skin .jefx-rail{position:static;padding-top:4px}}

/* ========================= the CiviCRM form ========================= */
body.jef-skin #crm-container,
body.jef-skin .crm-container{
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:0!important;max-width:none!important;
  color:var(--ink)!important;font-family:inherit!important;
}
body.jef-skin .crm-container fieldset{border:0!important;margin:0!important;padding:0!important;min-width:0}
body.jef-skin .crm-container .crm-public-form-item{border:0!important}

/* the intro block is relocated into the hero by JS; hide the original once ready */
body.jef-skin.jefx-ready .crm-container .intro_text-section{display:none!important}

/* section legends / group titles */
body.jef-skin .crm-container legend,
body.jef-skin .crm-container .crm-group-title{
  display:block;width:100%;box-sizing:border-box;
  font-weight:900;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:32px 0 16px;padding:0 0 11px;border-bottom:1px solid var(--line);
}
body.jef-skin .crm-container fieldset:first-of-type legend,
body.jef-skin .crm-container .crm-group:first-of-type legend{margin-top:6px}

/* field rows: label over control */
body.jef-skin .crm-container .crm-section{display:flex;flex-direction:column;gap:7px;margin:0 0 16px;padding:0;border:0;float:none;width:auto}
body.jef-skin .crm-container .crm-section>.label,
body.jef-skin .crm-container .crm-section>.crm-label{float:none;width:auto;text-align:left;padding:0;margin:0}
body.jef-skin .crm-container .crm-section>.label label,
body.jef-skin .crm-container label{font-weight:700;font-size:13.5px;color:var(--ink-2)}
body.jef-skin .crm-container .crm-section>.content{margin-left:0;width:auto}
body.jef-skin .crm-container .crm-marker{color:var(--jef-bright);margin-left:3px;font-weight:800}
body.jef-skin .crm-container .description{color:var(--faint);font-size:12.5px;margin-top:3px}
body.jef-skin .crm-container .clear{clear:both}

/* two-up rows built by JS */
body.jef-skin .crm-container .jefx-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px}
body.jef-skin .crm-container .jefx-row2 .crm-section{margin:0}
@media(max-width:520px){body.jef-skin .crm-container .jefx-row2{grid-template-columns:1fr}}

/* inputs / selects / textareas */
body.jef-skin .crm-container input[type=text],
body.jef-skin .crm-container input[type=email],
body.jef-skin .crm-container input[type=tel],
body.jef-skin .crm-container input[type=number],
body.jef-skin .crm-container input[type=password],
body.jef-skin .crm-container input.crm-form-text,
body.jef-skin .crm-container select,
body.jef-skin .crm-container textarea,
body.jef-skin .crm-container .crm-form-select{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:15.5px;color:var(--ink);
  background:var(--field);border:1.5px solid var(--field-line);border-radius:10px;
  padding:11px 13px;line-height:1.3;transition:border-color .12s,box-shadow .12s;
  -webkit-appearance:none;appearance:none;
}
body.jef-skin .crm-container select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238f9c8d' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
body.jef-skin .crm-container textarea{min-height:104px;resize:vertical}
body.jef-skin .crm-container input:focus,
body.jef-skin .crm-container select:focus,
body.jef-skin .crm-container textarea:focus{outline:none;border-color:var(--jef);box-shadow:0 0 0 3px rgba(0,204,102,.2)}
body.jef-skin .crm-container input::placeholder,
body.jef-skin .crm-container textarea::placeholder{color:var(--faint)}
body.jef-skin .crm-container input[type=text]:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 40px var(--field) inset}

/* membership / price options as selectable cards */
body.jef-skin .crm-container .price-set-row,
body.jef-skin .crm-container #priceset{display:flex;flex-direction:column;gap:10px}
body.jef-skin .crm-container .crm-option-label-pair{
  display:flex;align-items:center;gap:13px;border:1.5px solid var(--field-line);border-radius:12px;
  padding:14px 16px;cursor:pointer;background:var(--field);transition:border-color .12s,background .12s;
}
body.jef-skin .crm-container .crm-option-label-pair:hover{border-color:var(--jef-deep)}
body.jef-skin .crm-container .crm-option-label-pair:has(input:checked){border-color:var(--jef);background:rgba(0,204,102,.1)}
body.jef-skin .crm-container .crm-option-label-pair input[type=radio]{width:19px;height:19px;flex:0 0 auto;margin:0}
body.jef-skin .crm-container .crm-option-label-pair label{margin:0;font-weight:700;font-size:15.5px;color:var(--ink);cursor:pointer;flex:1;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
body.jef-skin .crm-container .crm-price-amount-amount{font-weight:900;color:var(--jef-bright);font-variant-numeric:tabular-nums}

/* radios & checkboxes */
body.jef-skin .crm-container input[type=radio],
body.jef-skin .crm-container input[type=checkbox]{accent-color:var(--jef);width:16px;height:16px}
body.jef-skin .crm-container .crm-checkbox-list label,
body.jef-skin .crm-container .crm-radio-list label,
body.jef-skin .crm-container .crm-form-checkbox-inline label{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--ink-2);cursor:pointer}
body.jef-skin .crm-container .crm-section>.content>label{font-weight:500}

/* renew checkbox line spacing */
body.jef-skin .crm-container #is_recur,
body.jef-skin .crm-container .is_recur-section{margin-top:6px}

/* billing / Stripe payment block — flush so its fields line up with the rest */
body.jef-skin .crm-container #billing-payment-block,
body.jef-skin .crm-container .crm-payment-js-billing-form-container{
  background:transparent!important;border:0!important;border-radius:0!important;
  padding:0!important;margin:0!important;
}

/* submit button */
body.jef-skin .crm-container .crm-submit-buttons{display:flex;gap:12px;margin-top:30px;padding-top:0;border:0}
body.jef-skin .crm-container .crm-button,
body.jef-skin .crm-container button.crm-form-submit,
body.jef-skin .crm-container input.crm-form-submit{
  -webkit-appearance:none;appearance:none;font-family:inherit;font-weight:800;font-size:16px;width:100%;
  background:var(--jef)!important;color:#052012!important;border:0!important;border-radius:12px;
  padding:15px 26px;cursor:pointer;box-shadow:0 8px 22px -12px rgba(0,204,102,.5);
  transition:transform .12s,box-shadow .12s;text-shadow:none;line-height:1.1;height:auto;
}
body.jef-skin .crm-container .crm-submit-buttons .crm-button{flex:1}
/* the FA icon inside the button can render as a tofu box if the font isn't present */
body.jef-skin .crm-container .crm-submit-buttons .crm-i,
body.jef-skin .crm-container .crm-submit-buttons i{display:none}
body.jef-skin .crm-container .crm-button:hover,
body.jef-skin .crm-container button.crm-form-submit:hover,
body.jef-skin .crm-container input.crm-form-submit:hover{transform:translateY(-1px);box-shadow:0 16px 40px -14px rgba(0,204,102,.6)}
body.jef-skin .crm-container .crm-i{font-style:normal}

/* CiviCRM "empowered by" line + misc footer inside form */
body.jef-skin .crm-container .crm-public-footer,
body.jef-skin .crm-container #crm-container-footer{color:var(--faint)!important}
body.jef-skin .crm-container .crm-public-footer img{opacity:.5}

/* ========================= injected footer ========================= */
body.jef-skin .jefx-footer{
  grid-area:auto;border-top:1px solid var(--line);margin-top:20px;
  padding:22px 24px;max-width:1140px;margin-left:auto;margin-right:auto;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  color:var(--faint);font-size:12.5px;
}
body.jef-skin .jefx-footer b{color:var(--muted);font-weight:800}
body.jef-skin .jefx-footer .r{display:flex;gap:16px;align-items:center}

/* ============================================================
   iteration 3 fixes
   ============================================================ */

/* --- general text contrast: force light text everywhere except controls;
       the green marker/price rules above have higher specificity and win --- */
body.jef-skin .crm-container,
body.jef-skin .crm-container *:not(input):not(select):not(textarea):not(option):not(a):not(.crm-marker):not(.crm-price-amount-amount){
  color:var(--ink-2);
}
body.jef-skin .crm-container .crm-section>.label label,
body.jef-skin .crm-container legend{color:var(--muted)}
body.jef-skin .crm-container .crm-section>.label label{color:var(--ink-2)!important}

/* --- membership option + price contrast --- */
body.jef-skin .crm-container .crm-option-label-pair label{color:var(--ink)!important}
body.jef-skin .crm-container .crm-price-amount-amount,
body.jef-skin .crm-container .crm-price-amount-label{color:var(--jef-bright)!important;font-weight:900}
body.jef-skin .crm-container .crm-price-set-help,
body.jef-skin .crm-container .crm-public-more-info,
body.jef-skin .crm-container .description{color:var(--muted)!important}

/* --- gender: inline compact radios (not tall cards) --- */
body.jef-skin .crm-container .editrow_gender_id-section>.content{
  display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;padding-top:4px;
}
body.jef-skin .crm-container .editrow_gender_id-section .crm-option-label-pair,
body.jef-skin .crm-container .editrow_gender_id-section .crm-option-label-pair:hover,
body.jef-skin .crm-container .editrow_gender_id-section .crm-option-label-pair:has(input:checked){
  border:0!important;background:transparent!important;padding:2px 0!important;width:auto;flex:0 0 auto;gap:8px;box-shadow:none!important;
}
body.jef-skin .crm-container .editrow_gender_id-section .crm-option-label-pair label{font-weight:600!important;font-size:14.5px}

/* --- "add a donation" (other amount) reads as a small money field --- */
body.jef-skin .crm-container .crm-section:has(#price_23) .content{max-width:220px}
body.jef-skin .crm-container #price_23{max-width:220px}

/* --- spacing between the payment block and the member-registration profile --- */
body.jef-skin .crm-container fieldset.crm-profile{margin-top:30px!important}
body.jef-skin .crm-container fieldset.crm-profile>legend{margin-top:0}

/* ============================================================
   select2 widgets (Country / State / Preferred Language / tags)
   CiviCRM uses select2 v3; the real control is .select2-container,
   and the dropdown (.select2-drop) is appended to <body>.
   ============================================================ */
body.jef-skin .select2-container{max-width:100%}
body.jef-skin .select2-container .select2-choice{
  background:var(--field)!important;background-image:none!important;
  border:1.5px solid var(--field-line)!important;border-radius:10px!important;
  height:auto!important;line-height:1.3!important;padding:11px 13px!important;
  color:var(--ink)!important;box-shadow:none!important;display:flex;align-items:center;
}
body.jef-skin .select2-container .select2-choice>.select2-chosen{color:var(--ink)!important;font-size:15.5px;margin-right:auto}
body.jef-skin .select2-container .select2-default>.select2-chosen{color:var(--faint)!important}
body.jef-skin .select2-container.select2-container-active .select2-choice,
body.jef-skin .select2-container-active .select2-choice{
  border-color:var(--jef)!important;box-shadow:0 0 0 3px rgba(0,204,102,.2)!important;
}
body.jef-skin .select2-choice .select2-arrow{background:transparent!important;border:0!important;width:24px!important;position:relative}
body.jef-skin .select2-choice .select2-arrow b{display:none!important}
body.jef-skin .select2-choice .select2-arrow::after{
  content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;
  border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
}
body.jef-skin .select2-container .select2-choice abbr{top:14px!important}

/* multi-select (tags) */
body.jef-skin .select2-container-multi .select2-choices{
  background:var(--field)!important;border:1.5px solid var(--field-line)!important;border-radius:10px!important;
  min-height:44px;padding:5px 8px!important;box-shadow:none!important;
}
body.jef-skin .select2-container-multi .select2-choices .select2-search-choice{
  background:var(--panel-2)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:7px!important;
}
body.jef-skin .select2-container-multi .select2-choices .select2-search-field input{color:var(--ink)!important;background:transparent!important}

/* dropdown panel + results (child of body.jef-skin) */
body.jef-skin .select2-drop{
  background:var(--panel)!important;border:1px solid var(--line)!important;border-top:0!important;
  color:var(--ink)!important;box-shadow:0 14px 34px -12px rgba(0,0,0,.7)!important;
}
body.jef-skin .select2-drop.select2-drop-above{border-top:1px solid var(--line)!important;border-bottom:0!important}
body.jef-skin .select2-drop .select2-search{padding:6px}
body.jef-skin .select2-drop .select2-search input{
  background:var(--field)!important;border:1.5px solid var(--field-line)!important;border-radius:8px!important;color:var(--ink)!important;
}
body.jef-skin .select2-results{margin:4px!important;padding:0!important}
body.jef-skin .select2-results .select2-result-label{color:var(--ink-2)!important;padding:8px 10px}
body.jef-skin .select2-results .select2-highlighted{background:var(--jef)!important;border-radius:7px}
body.jef-skin .select2-results .select2-highlighted .select2-result-label{color:#052012!important}
body.jef-skin .select2-results .select2-no-results,
body.jef-skin .select2-results .select2-searching,
body.jef-skin .select2-results .select2-selection-limit{background:transparent!important;color:var(--muted)!important}

/* ============================================================
   iteration 4 — consistent field widths
   Membership + Fields-of-interest render in CiviCRM <table>s that
   shrink to content; force them (and their option rows) full width so
   every field is the same length. Gender stays inline (targeted above).
   ============================================================ */
body.jef-skin .crm-container *{box-sizing:border-box}

/* price-set / multi-option tables fill the column */
body.jef-skin .crm-container table{width:100%!important;max-width:100%!important;border-collapse:collapse}
body.jef-skin .crm-container td,
body.jef-skin .crm-container th{padding:0;vertical-align:top}

/* membership block + its option row: full width, no wrapping/cut-off */
body.jef-skin .crm-container #membership,
body.jef-skin .crm-container .membership-group,
body.jef-skin .crm-container .price_set-section,
body.jef-skin .crm-container .membership_amount-section,
body.jef-skin .crm-container .membership_amount-content{width:100%!important;max-width:100%!important}
body.jef-skin .crm-container .membership_amount-content .crm-option-label-pair,
body.jef-skin .crm-container .editrow_custom_16-section .crm-option-label-pair{width:100%!important}
body.jef-skin .crm-container .membership_amount-content .crm-option-label-pair label{white-space:nowrap}

/* fields of interest: full width, matching the text inputs */
body.jef-skin .crm-container .editrow_custom_16-section .content,
body.jef-skin .crm-container .crm-multiple-checkbox-radio-options{width:100%!important;display:block}

/* auto-renew line: don't let it wrap short */
body.jef-skin .crm-container .crm-section:has(#is_recur) .content,
body.jef-skin .crm-container [class*="is_recur"]{width:100%!important}

/* ============================================================
   iteration 5
   ============================================================ */

/* auto-renew: one full-width line (was in a narrow container) */
body.jef-skin .crm-container #allow_auto_renew{display:block!important;width:100%!important;max-width:100%!important}
body.jef-skin .crm-container .crm-section.auto-renew,
body.jef-skin .crm-container #auto_renew_section{width:100%!important;max-width:100%!important}
body.jef-skin .crm-container #auto_renew_section{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
body.jef-skin .crm-container #auto_renew_section label{white-space:nowrap;margin:0;font-weight:600}
body.jef-skin .crm-container .crm-section.auto-renew>.label{display:none}

/* fields of interest: clear gap between rows */
body.jef-skin .crm-container .editrow_custom_16-section .crm-option-label-pair{margin-bottom:9px}
body.jef-skin .crm-container .editrow_custom_16-section .crm-option-label-pair:last-child{margin-bottom:0}

/* remove the duplicated pre-help above "Preferred local section" */
body.jef-skin .crm-container #helprow-tag,
body.jef-skin .crm-container .helprow-tag-section{display:none!important}

/* clicking the word (not just the dot) selects a radio/checkbox */
body.jef-skin .crm-container .crm-option-label-pair label,
body.jef-skin .crm-container label[for]{cursor:pointer}

/* required-field validation messages readable on dark */
body.jef-skin .crm-container .crm-error,
body.jef-skin .crm-container label.crm-error,
body.jef-skin .crm-container span.crm-error,
body.jef-skin .crm-container .crm-inline-error,
body.jef-skin .crm-container label.error{
  background:transparent!important;color:#ff8080!important;font-weight:700;font-size:12.5px;
  border:0!important;box-shadow:none!important;padding:3px 0 0!important;
}
body.jef-skin .crm-container input.crm-error,
body.jef-skin .crm-container select.crm-error,
body.jef-skin .crm-container textarea.crm-error,
body.jef-skin .crm-container input.error{border-color:#ff8080!important;box-shadow:0 0 0 3px rgba(255,128,128,.15)!important}
body.jef-skin .qtip-default,
body.jef-skin .qtip-content,
body.jef-skin .ui-tooltip{
  background:var(--panel)!important;color:#ff8080!important;border:1px solid var(--line)!important;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7)!important;
}

/* defensive: keep text inputs interactive above any stray overlay */
body.jef-skin .crm-container input.crm-form-text{position:relative;z-index:2}

/* select2 clear "×": move clear of the arrow, make it visible on dark */
body.jef-skin .select2-container .select2-choice abbr,
body.jef-skin .select2-container .select2-choice abbr.select2-search-choice-close{
  background:none!important;width:14px;height:16px;right:30px!important;top:50%!important;margin-top:-8px!important;
}
body.jef-skin .select2-container .select2-choice abbr::before{
  content:"\00d7";position:absolute;right:0;top:-1px;font-size:16px;line-height:1;color:var(--muted);
}
body.jef-skin .select2-container .select2-choice abbr:hover::before{color:var(--ink)}

/* optional donation as a small money field with the € inside */
body.jef-skin .crm-container .jefx-money{position:relative;display:block;max-width:220px}
body.jef-skin .crm-container .jefx-money-cur{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;pointer-events:none}
body.jef-skin .crm-container .jefx-money>#price_23{padding-left:26px}

/* ============================================================
   iteration 6 — Playwright audit fixes
   ============================================================ */
/* Stripe card field (#card-element): the Stripe iframe needs a light bg for its
   dark card text, so keep it light but frame it like a real input instead of a bare slab */
body.jef-skin .crm-container #card-element{
  background:#fff!important;border:1.5px solid var(--field-line)!important;border-radius:10px!important;
  padding:14px 14px!important;min-height:50px!important;box-sizing:border-box;box-shadow:none!important;
}
body.jef-skin .crm-container #card-errors{background:transparent!important;color:#ff8080!important;border:0!important;padding:6px 0 0!important}

/* placeholder + empty-select text contrast >= 4.5 on dark */
body.jef-skin .select2-container .select2-default>.select2-chosen{color:var(--muted)!important}
body.jef-skin .crm-container input::placeholder,
body.jef-skin .crm-container textarea::placeholder{color:var(--muted)}

/* ============================================================
   iteration 7
   ============================================================ */
/* remove the " - " separator between price option name and amount (all pricing) */
body.jef-skin .crm-container .crm-price-amount-label-separator{display:none!important}

/* Billing postal code: the Stripe extension sets it readonly on purpose (the ZIP is
   entered in the Stripe card element and synced back). Its own code comments say the
   field should be HIDDEN — so hide ONLY that field's own section once Stripe marks it
   readonly. Target the postal field's specific section class (NOT a .crm-section
   ancestor, which would also match the billing_name_address wrapper and hide everything). */
body.jef-skin .crm-container .crm-section[class*="billing_postal_code"]:has(input[readonly]){display:none!important}

/* ============================================================
   profile-create pages (newsletter sign-ups): single column, no rail
   ============================================================ */
body.jef-skin.jef-profile .real-content{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"hero" "form"!important;
  max-width:760px!important;
}
body.jef-skin.jef-profile .jefx-hero{max-width:none;padding-bottom:8px}

/* CiviCRM help/description boxes (e.g. profile intro ".messages.help"): render as
   clean intro text on dark instead of a pale light alert box */
body.jef-skin .crm-container .messages.help,
body.jef-skin .crm-container .help{
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--ink-2)!important;padding:0!important;margin:0 0 26px!important;
  font-size:15px;line-height:1.55;
}
body.jef-skin .crm-container .messages.help p,
body.jef-skin .crm-container .help p{color:var(--ink-2)!important;margin:0 0 8px}
body.jef-skin .crm-container .messages.help p:last-child,
body.jef-skin .crm-container .help p:last-child{margin-bottom:0}

/* secondary / cancel button (profiles render Cancel as <a class="button cancel">) */
body.jef-skin .crm-container a.button.cancel,
body.jef-skin .crm-container .crm-submit-buttons a.cancel{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent!important;color:var(--ink-2)!important;border:1.5px solid var(--field-line)!important;
  border-radius:12px!important;padding:15px 22px!important;font-weight:800;font-size:15px;
  text-decoration:none!important;flex:0 0 auto;box-shadow:none!important;
}
body.jef-skin .crm-container a.button.cancel:hover,
body.jef-skin .crm-container .crm-submit-buttons a.cancel:hover{border-color:var(--muted)!important;color:var(--ink)!important}

/* ============================================================
   home page (crm.jef.eu hub) — dark landing
   ============================================================ */
body.jef-skin.jef-home .real-content{display:block!important;max-width:1080px!important;padding:22px 24px 72px!important}
body.jef-skin .jefx-hero-photo{
  position:relative;background:var(--panel);background-size:cover;background-position:center;
  border:1px solid var(--line);border-radius:20px;padding:66px 42px 56px;margin:6px 0 36px;overflow:hidden;
}
body.jef-skin .jefx-hero-photo .jefx-hero-in{position:relative;max-width:700px;padding:0}
body.jef-skin .jefx-hero-photo .jefx-eyebrow{color:var(--jef-bright)}
body.jef-skin .jefx-hero-photo .jefx-title{font-size:44px;color:#fff;margin:0 0 16px}
body.jef-skin .jefx-hero-photo .jefx-intro{color:#e6eee4;font-size:16.5px;max-width:640px}
@media(max-width:560px){body.jef-skin .jefx-hero-photo{padding:42px 22px 38px}body.jef-skin .jefx-hero-photo .jefx-title{font-size:29px}}

body.jef-skin .jefx-home{display:flex;flex-direction:column;gap:36px}
body.jef-skin .jefx-linkgroup h3{margin:0 0 15px;font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.jef-skin .jefx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
body.jef-skin .jefx-cardlink{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px 18px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;line-height:1.3;
  transition:border-color .12s,background .12s,transform .12s;
}
body.jef-skin .jefx-cardlink svg{color:var(--muted);flex:0 0 auto;transition:transform .12s,color .12s}
body.jef-skin .jefx-cardlink:hover{border-color:var(--jef);background:rgba(0,204,102,.07);transform:translateY(-1px)}
body.jef-skin .jefx-cardlink:hover svg{color:var(--jef-bright);transform:translateX(3px)}
body.jef-skin .jefx-home-note{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:4px}
body.jef-skin .jefx-home-note p{margin:0 0 8px}
body.jef-skin .jefx-home-note a{color:var(--jef-bright);text-decoration:none}
body.jef-skin .jefx-home-note a:hover{text-decoration:underline}