/* ────────────────────────────────────────────
   DD:s designsystem — formulär i tredjepartsplugin.

   Fluent Forms (medlemsformulären) och Paid Memberships Pro (inloggning,
   konto) renderar sin egen markup och kan inte bära DD:s globala klasser.
   Den här filen mappar deras fält till designsystemets kantlösa fält:
   ljusgrå yta #E9EDF2, ingen kant, fokus och fel som INRE ring så att
   måtten inte ändras och raden inte hoppar.

   Reglerna är scopade till plugin-wrapparna, inte till #brx-* — formulären
   ligger både i Bricks och (tills vidare) i Breakdance.

   Sanningskälla för värdena: .claude/skills/dd-design/forms.css.
   Kopia i repo: docs/hemsida/bricks-child/dd-formular.css
   ──────────────────────────────────────────── */

/* ─── FÄLT ───────────────────────────────────────────────── */

.fluentform .ff-el-form-control,
.pmpro_form input[type="text"],
.pmpro_form input[type="email"],
.pmpro_form input[type="password"],
.pmpro_form input[type="tel"],
.pmpro_form select,
.pmpro_form textarea,
.pmpro_login_wrap input[type="text"],
.pmpro_login_wrap input[type="password"] {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--field-fg);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
  min-height: var(--field-height);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-sizing: border-box;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.fluentform textarea.ff-el-form-control,
.pmpro_form textarea { min-height: 132px; }

.fluentform .ff-el-form-control::placeholder,
.pmpro_form input::placeholder { color: var(--field-placeholder); }

.fluentform .ff-el-form-control:hover,
.pmpro_form input[type="text"]:hover,
.pmpro_form input[type="email"]:hover,
.pmpro_form input[type="password"]:hover,
.pmpro_login_wrap input:hover { background: var(--field-bg-hover); }

/* Fokus bärs av en INRE ring, aldrig av en kant — en kant som dyker upp
   vid fokus ändrar elementets mått och får hela raden att hoppa. */
.fluentform .ff-el-form-control:focus,
.pmpro_form input:focus,
.pmpro_form select:focus,
.pmpro_form textarea:focus,
.pmpro_login_wrap input:focus {
  outline: none;
  background: var(--field-bg);
  box-shadow: inset 0 0 0 2px var(--orange-500);
}

.fluentform .ff-el-form-control:disabled,
.pmpro_form input:disabled { background: var(--field-bg-disabled); cursor: not-allowed; }

/* Fel: röd inre ring som ligger kvar även vid fokus, annars försvinner
   markeringen i samma stund som användaren går dit för att rätta. */
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-is-error .ff-el-form-control:focus,
.pmpro_form .pmpro_error input,
.pmpro_form input.pmpro_error {
  box-shadow: inset 0 0 0 2px var(--status-destructive);
}

/* ─── ETIKETTER OCH HJÄLPTEXT ────────────────────────────── */

.fluentform .ff-el-input--label label,
.pmpro_form label,
.pmpro_login_wrap label {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--label-weight);
  line-height: var(--text-line-tight);
  color: var(--fg-primary);
  margin-bottom: var(--space-2);
  display: block;
}

.fluentform .ff-el-input--label.ff-el-is-required label:after { color: var(--status-destructive); }

.fluentform .ff-el-help-message,
.pmpro_form .lite,
.pmpro_form .pmpro_asterisk {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-top: var(--space-2);
}

.fluentform .error-text,
.fluentform .ff-el-is-error .error {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-xs);
  color: var(--status-destructive);
  margin-top: var(--space-2);
}

/* ─── RYTM ───────────────────────────────────────────────── */

.fluentform .ff-el-group { margin-bottom: var(--space-5); }
.fluentform .ff-t-container { gap: var(--space-5); }
.fluentform .ff-t-cell { padding-inline: 0; }
.pmpro_form .pmpro_form_field,
.pmpro_login_wrap .pmpro_form_field { margin-bottom: var(--space-5); }

/* ─── KRYSSRUTOR OCH RADIO ───────────────────────────────── */

.fluentform .ff-el-form-check-label,
.pmpro_login_wrap .pmpro_form_field-checkbox label {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--fg-primary);
  line-height: var(--text-line);
}

.fluentform input[type="checkbox"],
.fluentform input[type="radio"],
.pmpro_form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--orange-500);
  margin-right: var(--space-2);
}

/* ─── KNAPPAR ────────────────────────────────────────────── */

.fluentform .ff-btn-submit,
.fluentform .ff_btn_style,
.pmpro_form .pmpro_btn,
.pmpro_login_wrap input[type="submit"],
.pmpro_login_wrap .pmpro_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-btn);
  font-weight: var(--weight-semi);
  line-height: 1;
  letter-spacing: normal;
  color: var(--action-primary-fg);
  background: var(--action-primary-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  min-height: var(--field-height);
  padding: 0 var(--space-6);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}

.fluentform .ff-btn-submit:hover,
.pmpro_form .pmpro_btn:hover,
.pmpro_login_wrap input[type="submit"]:hover { background: var(--action-primary-bg-hover); }

/* Sekundär knapp i PMPro (t.ex. Avbryt) */
.pmpro_form .pmpro_btn-cancel,
.pmpro_login_wrap .pmpro_btn-cancel {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-fg);
}
.pmpro_form .pmpro_btn-cancel:hover { background: var(--action-secondary-bg-hover); }

/* ─── MEDDELANDEN ────────────────────────────────────────── */

.fluentform .ff-message-success,
.pmpro_message,
.pmpro_login_wrap .pmpro_message {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: var(--text-line);
  color: var(--fg-primary);
  background: var(--bg-plate);
  border: 0;
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}

.pmpro_error,
.pmpro_message.pmpro_error {
  background: var(--status-error-bg);
  box-shadow: inset 0 0 0 1px var(--status-error-border);
}

/* ─── PMPRO INLOGGNING ───────────────────────────────────── */

.pmpro_login_wrap,
.pmpro_lost_password_wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

.pmpro_login_wrap h2,
.pmpro_lost_password_wrap h2 {
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: var(--display-sm);
  font-weight: var(--heading-weight);
  line-height: var(--display-line-sm);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
}

.pmpro_login_wrap .pmpro_actions_nav,
.pmpro_lost_password_wrap .pmpro_actions_nav {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm);
  margin-top: var(--space-5);
}

.pmpro_login_wrap a,
.pmpro_lost_password_wrap a { color: var(--fg-accent); }

/* Träffytor minst 44px under 767px — gäller allt klickbart. */
@media (max-width: 767px) {
  .fluentform .ff-btn-submit,
  .pmpro_form .pmpro_btn,
  .pmpro_login_wrap input[type="submit"] { min-height: 44px; width: 100%; }
}

/* ─── SPECIFICITET ───────────────────────────────────────────
   WordPress egen inloggningsform (wp_login_form, som PMPro:s
   [pmpro_login] renderar) stylas av tema- och builder-CSS via
   ID-selektorer (#user_login, #wp-submit) och av WP:s .button-primary.
   En klass-selektor förlorar då. Reglerna nedan upprepar därför
   fältstilen på ID-nivå — inte snyggt, men det är enda sättet att
   vinna utan !important. Uppmätt 2026-08-22: utan detta renderade
   fälten vita med 1px kant och knappen i Breakdance-orange #F78B17.
   ──────────────────────────────────────────────────────────── */

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#user_login,
#user_pass,
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"] {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  color: var(--field-fg);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
  min-height: var(--field-height);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-sizing: border-box;
}

#loginform input[type="text"]:hover,
#loginform input[type="password"]:hover,
#user_login:hover,
#user_pass:hover { background: var(--field-bg-hover); }

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#user_login:focus,
#user_pass:focus,
#lostpasswordform input:focus {
  outline: none;
  background: var(--field-bg);
  box-shadow: inset 0 0 0 2px var(--orange-500);
}

#wp-submit,
#loginform .button,
#loginform .button-primary,
#lostpasswordform .button,
.pmpro_login_wrap .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-btn);
  font-weight: var(--weight-semi);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  color: var(--action-primary-fg);
  background: var(--action-primary-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  min-height: var(--field-height);
  height: auto;
  padding: 0 var(--space-6);
  box-shadow: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}

#wp-submit:hover,
#loginform .button-primary:hover { background: var(--action-primary-bg-hover); border-color: transparent; }

#loginform label,
#lostpasswordform label {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--label-weight);
  color: var(--fg-primary);
}

#loginform .login-remember label,
#loginform p.forgetmenot label {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

#loginform p { margin: 0 0 var(--space-5); }
#loginform p.submit,
#loginform .login-submit { margin-bottom: var(--space-3); }
#rememberme { width: 20px; height: 20px; min-height: 0; accent-color: var(--orange-500); }

/* Fluent Forms: samma sak — dubblad klass så builderns fältregler inte vinner. */
.fluentform .ff-el-form-control.ff-el-form-control {
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-lg);
  min-height: var(--field-height);
}
.fluentform .ff-el-form-control.ff-el-form-control:focus {
  box-shadow: inset 0 0 0 2px var(--orange-500);
  border: 0;
}
.fluentform .ff-btn-submit.ff-btn-submit {
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

/* ─── PMPRO 3.x: SÄTT DERAS EGNA VARIABLER ───────────────────
   PMPro 3 stylar allt genom sina egna CSS-variabler (base.css:
   --pmpro--color--base = fältets yta, --pmpro--color--border,
   --pmpro--base--border-radius, --pmpro--color--accent = knappar).
   Att slåss om specificiteten mot dem är fel väg — variablerna ÄR
   plugin-ets anpassningspunkt. Uppmätt 2026-08-22: utan detta
   renderade fälten vita med 1px #777 kant, oavsett hur specifik
   min egen regel var (även #id-selektorer och !important förlorade).
   ──────────────────────────────────────────────────────────── */

:root,
.pmpro_login_wrap,
.pmpro_lost_password_wrap,
.pmpro_form,
.pmpro {
  --pmpro--color--base: var(--field-bg);              /* fältyta = DD:s ljusgrå */
  --pmpro--color--base-2: var(--field-bg-hover);
  --pmpro--color--border: transparent;                /* kantlösa fält */
  --pmpro--color--border--variation: var(--border-default);
  --pmpro--color--contrast: var(--fg-primary);
  --pmpro--color--accent: var(--orange-500);          /* knappar och länkar */
  --pmpro--base--border-radius: var(--radius-lg);
  --pmpro--btn--border-radius: var(--radius-full);    /* piller, som resten av sajten */
  --pmpro--btn--top-bottom-padding: 14px;
  --pmpro--btn--left-right-padding: var(--space-6);
  --pmpro--base--spacing--small: var(--space-3);
  --pmpro--base--spacing--medium: var(--space-5);
  --pmpro--base--spacing--large: var(--space-8);
  --pmpro--box-shadow: none;
}

/* ─── INGA GRÅ PLATTOR BAKOM FORMULÄR ────────────────────────
   DD-regel (Thomas 2026-08-22): den ljusgrå ytan tillhör KORT och
   FÄLT. Bakgrundsplattor bakom innehåll används inte om det inte
   uttryckligen efterfrågas. PMPro lägger sina formulär i .pmpro_card,
   som annars ärver --pmpro--color--base (= fältfärgen) och blir en
   grå platta bakom hela formuläret. Kortet nollställs därför här —
   fälten behåller sin ljusgrå yta.
   ──────────────────────────────────────────────────────────── */

.pmpro_card,
.pmpro_login_wrap.pmpro_card,
.pmpro_lost_password_wrap.pmpro_card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.pmpro_card_content { padding: 0; }

/* Fokus: DD:s inre orange ring, inte Bootstraps blå kant. */
#loginform input:focus,
#lostpasswordform input:focus,
.pmpro_form input:focus,
.fluentform .ff-el-form-control:focus {
  border-color: transparent;
}

/* PMPro-kortets inre luft nollas — kortet är inte längre en platta, så paddingen skulle bara skjuta formuläret inåt och lämna tomrum under sista länken. Två klasser för att matcha plugin-ets egen specificitet. */
.pmpro_card .pmpro_card_content,
.pmpro_card .pmpro_card_actions { padding: 0; }
.pmpro_card .pmpro_actions_nav { margin-top: var(--space-5); gap: var(--space-5); }

/* ─── LÄNKRADEN UNDER INLOGGNINGEN (Thomas 2026-08-22) ───────
   PMPro lägger 'Gå med nu | Glömt lösenordet?' i .pmpro_card_actions med
   egen grå yta. Plattan bort (grått tillhör kort och fält) och länken i
   medium vikt. 'Gå med nu' tas bort i PHP — filtret
   pmpro_login_forms_handler_nav i Code Snippet "DD – inloggningens länkrad
   utan Gå med nu" (källa docs/medlemssystem/snippets/dd-pmpro-login-nav.php).
   Att dölja länken med display:none räcker inte: separatorn ' | ' är en
   textnod mellan länkarna och blir kvar som en ensam pinne. */
.pmpro_card .pmpro_card_actions { background: transparent; border: 0; }
.pmpro_card .pmpro_actions_nav { border: 0; }
.pmpro_card .pmpro_actions_nav a { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-sm); font-weight: var(--label-weight); color: var(--fg-accent); text-decoration: none; }
.pmpro_card .pmpro_actions_nav a:hover { text-decoration: underline; }

/* ─── RADIE PÅ FÄLT OCH KNAPPAR — BESLUT VÄNTAR ───────────
   Thomas 2026-08-22: radien är inkonsekvent — fälten 8 px (radius-lg) mot
   knapparnas piller (radius-full). Ett försök att sätta pillerradie via
   --pmpro--base--border-radius förvred formuläret (variabeln styr fler
   boxar än fälten) och återställdes samma dag. Fälten ligger därför på
   radius-lg tills Thomas valt bland alternativen i granskningsbilderna
   (v50): knapparna till 8 px, fälten till 12 px, eller fälten som äkta
   stadion med radie = halva fälthöjden. Ändra då bara fältens egen
   border-radius nedan — inte basvariabeln. */
:root, .pmpro_login_wrap, .pmpro_lost_password_wrap, .pmpro_form, .pmpro { --pmpro--base--border-radius: var(--radius-lg); }
#loginform input[type="text"], #loginform input[type="password"], #loginform input[type="email"], #user_login, #user_pass, #lostpasswordform input[type="text"], #lostpasswordform input[type="email"], .fluentform .ff-el-form-control.ff-el-form-control { border-radius: var(--radius-lg); }
.fluentform textarea.ff-el-form-control.ff-el-form-control { border-radius: var(--radius-2xl); }

/* Fältets sidoluft kommer från PMPro:s --pmpro--base--spacing--small, inte från min egen padding-regel (Bricks basstil vinner där). Variabeln sätter både lodrät och vågrät padding: 16 px ger 16 px sidoluft och 58 px fälthöjd. */
:root, .pmpro_login_wrap, .pmpro_lost_password_wrap, .pmpro_form, .pmpro { --pmpro--base--spacing--small: var(--space-4); }

/* ─── PMPRO variation_1.css: HÅRDKODAT SOM VARIABLERNA INTE NÅR ────
   Tre saker i PMPro:s stilvariation är hårdkodade och ligger nästlade
   under .pmpro, så de vinner på specificitet över reglerna ovan. Hittade
   2026-08-22 i granskningsbilden — inte i talen:
   1. Bootstraps blå fokus (#80BDFF + 0.2rem-skugga) på #loginform .input
      och på .pmpro_form_input-* — DD:s fokus är en INRE orange ring.
      Kryssrutor, radioknappar och "Visa lösenord" får i stället DD:s
      yttre ring (samma som dd-states.css), eftersom en inre ring inte
      syns på en native kryssruta.
   2. Knappskuggan 1px 2px 4px på .login-submit .button och .pmpro_btn —
      DD:s knappar är platta.
   3. Hårlinjen border-top på .pmpro_card_content + .pmpro_card_actions —
      kortet är nollställt, linjen ska bort.
   Samma selektorer som plugin-et (samma specificitet), laddade efter →
   DD vinner. Nästlade regler syns inte i en CSSOM-genomgång som bara
   kliver ner i regler utan selectorText — leta i filen. */
.pmpro .pmpro_section #loginform .input:focus,
.pmpro .pmpro_section #lostpasswordform .input:focus,
.pmpro .pmpro_form_input-text:focus,
.pmpro .pmpro_form_input-email:focus,
.pmpro .pmpro_form_input-url:focus,
.pmpro .pmpro_form_input-password:focus,
.pmpro .pmpro_form_input-search:focus,
.pmpro .pmpro_form_input-select:focus,
.pmpro .pmpro_form_input-multiselect:focus,
.pmpro .pmpro_form_input-number:focus,
.pmpro .pmpro_form_input-file:focus,
.pmpro .pmpro_form_input-date:focus,
.pmpro .pmpro_form_input-textarea:focus {
  background-color: var(--field-bg);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--orange-500);
  outline: none;
}

.pmpro .pmpro_form_input-checkbox:focus,
.pmpro .pmpro_form_input-radio:focus,
.pmpro .pmpro_form_field-password-toggle button:focus,
.pmpro .pmpro_form_field-password-toggle button:active {
  box-shadow: none;
  outline: none;
}
.pmpro .pmpro_form_input-checkbox:focus-visible,
.pmpro .pmpro_form_input-radio:focus-visible,
.pmpro .pmpro_form_field-password-toggle button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.pmpro .pmpro_section #loginform .login-submit .button,
.pmpro .pmpro_btn,
.pmpro .pmpro_btn-cancel { box-shadow: none; }

.pmpro .pmpro_card_content + .pmpro_card_actions,
.pmpro .pmpro_card_actions { border: 0; background: transparent; }

/* ═══════════════════════════════════════════════════════════════
   KASSORNA (2026-08-22, ATT_FIXA P0 12) — PMPro-kassan (kort) och
   Woo-kassan (Swish) i DD:s designsystem. Korrektur v55.
   Samma princip som ovan: plugin-ens egna variabler först, det som är
   hårdkodat möts med samma selektor laddad efter. Reglerna är scopade
   till plugin-wrapparna (.pmpro, .woocommerce-checkout) så de gäller
   oavsett vilken mall som bär sidan. Sidans H1 och luften under den
   fixerade headern hör till Bricks-mallen "Systemsida", inte hit.
   ═══════════════════════════════════════════════════════════════ */

/* ─── PMPRO-KASSAN ────────────────────────────────────────────
   variation_1.css nästlar allt under .pmpro (två klasser). Därför
   .pmpro .x här — samma specificitet, laddad efter. */

.pmpro {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: var(--text-line);
  color: var(--fg-primary);
}

/* Kassan är ett formulär: satsbredd 640 som designsystemets .dd-form. */
.pmpro form.pmpro_form { max-width: 640px; }
.pmpro .pmpro_section { margin: 0; }
.pmpro .pmpro_form_fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* Inga grå plattor bakom grupperna (DD-regel) — kortet är bara en grupp. */
.pmpro .pmpro_card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  overflow: visible;
}
.pmpro .pmpro_card_title,
.pmpro h2.pmpro_card_title {
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: var(--display-sm);
  line-height: var(--display-line-sm);
  font-weight: var(--heading-weight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
  padding: 0;
}
.pmpro .pmpro_card_content { padding: 0; }
.pmpro .pmpro_card_content p:not(.pmpro_form_hint) { margin: 0 0 var(--space-2); padding: 0; }
.pmpro .pmpro_card_content p:last-of-type { margin-bottom: 0; }

/* Medlemskapsinformationen är en sammanfattning — samma platta som
   kvittomailets tabell och Woo-kassans "Din beställning". PMPro:s egna
   id är den enda stabila kroken för just den gruppen. */
#pmpro_pricing_fields .pmpro_card_content {
  background: var(--bg-plate);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}
#pmpro_pricing_fields .pmpro_card_content strong { color: var(--fg-primary); font-weight: var(--weight-semi); }

/* Fält: 44 px (token), text centrerad av webbläsaren — ingen lodrät padding. */
.pmpro .pmpro_form input.pmpro_form_input,
.pmpro .pmpro_form select.pmpro_form_input,
.pmpro .pmpro_form input.pmpro_form_input-text,
.pmpro .pmpro_form input.pmpro_form_input-email,
.pmpro .pmpro_form input.pmpro_form_input-password,
.pmpro .pmpro_form select.pmpro_form_input-select {
  min-height: var(--field-height);
  padding: 0 var(--space-4);
  line-height: normal;
  width: 100%;
  box-sizing: border-box;
}
.pmpro .pmpro_form textarea.pmpro_form_input { min-height: 132px; padding: var(--space-3) var(--space-4); line-height: var(--text-line); }
.pmpro .pmpro_form_label { display: block; margin: 0 0 var(--space-2); }
.pmpro .pmpro_form_field { margin: 0 0 var(--space-5); }
.pmpro .pmpro_form_hint,
.pmpro .pmpro_form_field .lite {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--fg-muted);
  margin: var(--space-2) 0 0;
}

/* "Visa lösenord" och "Logga in här" — länkar i etikettvikt, orange. */
.pmpro .pmpro_btn-password-toggle,
.pmpro .pmpro_form_field-password-toggle button {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--label-weight);
  color: var(--fg-accent);
}
.pmpro .pmpro_card_actions {
  background: transparent;
  border: 0;
  padding: 0;
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  color: var(--fg-secondary);
}
.pmpro .pmpro_card_actions a { color: var(--fg-accent); font-weight: var(--label-weight); text-decoration: none; }
.pmpro .pmpro_card_actions a:hover { text-decoration: underline; }

/* Stripe: PMPro sätter 1px kant + padding på kortfältens behållare med en
   lång selektor. Samma selektor här → DD:s kantlösa fält, 44 px, inre
   fokusring. Texten inne i iframen styr Stripe. */
.pmpro .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#AccountNumber,
.pmpro .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#Expiry,
.pmpro .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#CVV,
.pmpro .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#AccountNumber,
.pmpro .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#Expiry,
.pmpro .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#CVV,
.pmpro .StripeElement {
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
  min-height: var(--field-height);
  padding: 12.5px var(--space-4);
  box-sizing: border-box;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pmpro .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div.StripeElement:hover { background: var(--field-bg-hover); }
.pmpro .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div.StripeElement--focus { background: var(--field-bg); box-shadow: var(--field-ring-focus); }
.pmpro .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div.StripeElement--invalid { box-shadow: var(--field-ring-error); }

/* "Betala med kreditkort" (Stripes knapprad) är en underrubrik, inte en sektionsrubrik. */
.pmpro .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-request-button h3,
.pmpro .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-request-button h3 {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  line-height: var(--text-line);
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
}

.pmpro .pmpro_form_submit { margin: 0; }
.pmpro #pmpro_processing_message { font-size: var(--text-sm); color: var(--fg-muted); margin-top: var(--space-3); }

/* ─── WOO-KASSAN (Swish) ──────────────────────────────────────
   Skrivet mot WooCommerces egna klasser (form.checkout, .form-row,
   .input-text, #order_review, #payment) så att det överlever
   Breakdance-avvecklingen. Det Breakdance-specifika står sist. */

.woocommerce-checkout .woocommerce {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: var(--text-line);
  color: var(--fg-primary);
}
.woocommerce-checkout .woocommerce a { color: var(--fg-accent); font-weight: var(--label-weight); text-decoration: none; }
.woocommerce-checkout .woocommerce a:hover { text-decoration: underline; }

/* Notiser (återkommande kund, fel, bekräftelser): DD:s meddelanderuta,
   inte Woos blå/röda/gröna band. Ikonen Woo lägger i ::before tas bort. */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-notice {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: var(--text-line);
  color: var(--fg-primary);
  background: var(--bg-plate);
  border: 0;
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-3);
  list-style: none;
}
.woocommerce-checkout .woocommerce-error {
  background: var(--status-error-bg);
  box-shadow: inset 0 0 0 1px var(--status-error-border);
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before { display: none; }
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-error a { color: var(--fg-accent); text-transform: none; }
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message { display: block; }
.woocommerce-checkout .woocommerce-info a::after,
.woocommerce-checkout .woocommerce-info::after { display: none; content: none; }
.woocommerce-checkout .woocommerce-form-coupon-toggle + .checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login { margin: 0 0 var(--space-5); }
.woocommerce-checkout .woocommerce-NoticeGroup { margin-bottom: var(--space-5); }

/* Layout: uppgifterna 640 px (formulärets satsbredd), beställningen till
   höger. Grid i stället för Woos floats/Breakdances flex. */
.woocommerce-checkout form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  column-gap: var(--space-16);
  row-gap: 0;
  align-items: start;
  margin-top: var(--space-10);
  padding: 0;
}
.woocommerce-checkout form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; width: 100%; float: none; }
.woocommerce-checkout form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
.woocommerce-checkout form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }
.woocommerce-checkout form.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout form.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
.woocommerce-checkout form.woocommerce-checkout .col2-set .col-2 { margin-top: var(--space-5); }

/* Sektionsrubriker: Barlow, display-sm, 700 — som PMPro-kassans. */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3#order_review_heading {
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: var(--display-sm);
  line-height: var(--display-line-sm);
  font-weight: var(--heading-weight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
  padding: 0;
}

/* Fältraderna: tvåspaltigt rutnät, 16 px mellan — som .dd-form__row.
   Rader utan -first/-last spänner hela bredden. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
.woocommerce-checkout .woocommerce-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: 0;
}
.woocommerce-checkout form .form-row { grid-column: 1 / -1; float: none; width: 100%; margin: 0 0 var(--space-5); padding: 0; }
.woocommerce-checkout form .form-row-first { grid-column: 1; }
.woocommerce-checkout form .form-row-last { grid-column: 2; }
.woocommerce-checkout form .form-row.form-row-first,
.woocommerce-checkout form .form-row.form-row-last { width: 100%; }

.woocommerce-checkout form .form-row label {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--label-weight);
  line-height: var(--text-line-tight);
  color: var(--fg-primary);
  display: block;
  margin: 0 0 var(--space-2);
}
.woocommerce-checkout form .form-row label .required { color: var(--status-destructive); text-decoration: none; }
.woocommerce-checkout form .form-row label .optional { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--fg-muted); }
.woocommerce-checkout form .form-row .woocommerce-input-wrapper { display: block; }

/* Fält: dubblad klass så Bricks/Breakdance-lagrets fältregler inte vinner. */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row .input-text.input-text,
.woocommerce-checkout form .form-row textarea.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row select.select {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: normal;
  color: var(--field-fg);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
  min-height: var(--field-height);
  padding: 0 var(--space-4);
  width: 100%;
  box-sizing: border-box;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.woocommerce-checkout form .form-row textarea.input-text {
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  line-height: var(--text-line);
  resize: vertical;
}
.woocommerce-checkout form .form-row .input-text::placeholder { color: var(--field-placeholder); }
.woocommerce-checkout form .form-row .input-text.input-text:hover { background: var(--field-bg-hover); }
.woocommerce-checkout form .form-row .input-text.input-text:focus,
.woocommerce-checkout form .form-row select:focus {
  outline: none;
  background: var(--field-bg);
  box-shadow: var(--field-ring-focus);
  border: 0;
}
/* Woos valideringsklasser: röd inre ring, ligger kvar vid fokus. */
.woocommerce-checkout form .form-row.woocommerce-invalid .input-text.input-text,
.woocommerce-checkout form .form-row.woocommerce-invalid .input-text.input-text:focus,
.woocommerce-checkout form .form-row.woocommerce-invalid .select2-container .select2-selection { box-shadow: var(--field-ring-error); }

/* Land-väljaren (select2): samma fält, Bricks chevron-mask behåller färgen. */
.woocommerce-checkout form .form-row .select2-container { min-width: 100%; }
.woocommerce-checkout .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container .select2-selection--single {
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-lg);
  height: var(--field-height);
  min-height: var(--field-height);
  padding: 0 var(--space-10) 0 var(--space-4);
  box-shadow: none;
  margin: 0;
  display: flex;
  align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: normal;
  color: var(--field-fg);
  padding: 0;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: var(--field-height);
  right: var(--space-3);
  background-color: var(--fg-primary);
}
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { box-shadow: var(--field-ring-focus); }

/* Beställningen: plattan, som kvittomailets tabell. */
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-plate);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin: 0 0 var(--space-5);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  color: var(--fg-primary);
}
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
  border: 0;
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-6);
  text-align: left;
  vertical-align: top;
  font-weight: var(--weight-regular);
  line-height: var(--text-line);
}
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot td { text-align: right; white-space: nowrap; }
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-top: var(--space-4);
}
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tbody td { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tbody td .product-quantity { font-weight: var(--weight-regular); color: var(--fg-secondary); }
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .woocommerce-Price-amount { font-weight: var(--weight-medium); color: var(--fg-primary); }
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot th { color: var(--fg-secondary); }
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child td { border-bottom: 0; padding-bottom: var(--space-4); }
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.order-total td {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  border-top: 0;
}
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.order-total td .woocommerce-Price-amount,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.order-total td strong {
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: var(--display-sm);
  line-height: var(--display-line-sm);
  font-weight: var(--heading-weight);
}

/* Betalningen: ett vitt kort med kant (ett objekt — det man agerar på). */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment.woocommerce-checkout-payment {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods li + li { margin-top: var(--space-4); }
.woocommerce-checkout #payment ul.payment_methods li > label {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  min-height: 24px;
}
.woocommerce-checkout #payment ul.payment_methods li > label img { max-height: 24px; width: auto; }
.woocommerce-checkout #payment ul.payment_methods li input.input-radio { width: 20px; height: 20px; accent-color: var(--orange-500); margin: 0 var(--space-2) 0 0; }
/* Betalsättets ruta: ingen grå platta — texten och Swish-fältet står fritt. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment ul.payment_methods li div.payment_box {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: var(--space-4) 0 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm);
  line-height: var(--text-line);
  color: var(--fg-secondary);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box p { margin: 0 0 var(--space-4); }
.woocommerce-checkout #payment div.payment_box fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.woocommerce-checkout #payment div.payment_box .form-row { margin: 0; }
.woocommerce-checkout #payment div.payment_box .form-row label { font-size: var(--text-sm); }

/* Integritetstexten, villkoren och knappen. */
.woocommerce-checkout #payment .place-order { padding: 0; margin: var(--space-6) 0 0; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 0 0 var(--space-5); }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
  font-size: var(--text-sm);
  line-height: var(--text-line);
  color: var(--fg-secondary);
  margin: 0 0 var(--space-4);
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--field-height);
  padding-block: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--text-line);
  color: var(--fg-primary);
  cursor: pointer;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input.input-checkbox {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--orange-500);
  position: static;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox .required { color: var(--status-destructive); text-decoration: none; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-checkbox-text { display: inline; }

.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #payment button.button.alt,
.woocommerce-checkout #payment .place-order .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-btn);
  font-weight: var(--weight-semi);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: var(--action-primary-fg);
  background: var(--action-primary-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  min-height: var(--field-height);
  padding: 0 var(--space-6);
  margin: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout #payment button.button.alt:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); border-color: transparent; }
/* Sekundära knappar i kassan (logga in, rabattkod): DD:s sekundärknapp. */
.woocommerce-checkout form.woocommerce-form-login .button,
.woocommerce-checkout form.checkout_coupon .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-btn);
  font-weight: var(--weight-semi);
  line-height: 1;
  color: var(--action-secondary-fg);
  background: var(--action-secondary-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  min-height: var(--field-height);
  padding: 0 var(--space-6);
}
.woocommerce-checkout form.woocommerce-form-login .button:hover,
.woocommerce-checkout form.checkout_coupon .button:hover { background: var(--action-secondary-bg-hover); }

@media (max-width: 991px) {
  .woocommerce-checkout form.woocommerce-checkout { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .woocommerce-checkout form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: auto; }
  .woocommerce-checkout form.woocommerce-checkout #order_review_heading { grid-column: 1; grid-row: auto; margin-top: var(--space-10); }
  .woocommerce-checkout form.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; }
}
@media (max-width: 767px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-account-fields { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout form .form-row-first,
  .woocommerce-checkout form .form-row-last { grid-column: 1; }
  .woocommerce-checkout #payment { padding: var(--space-5); }
  .pmpro .pmpro_cols-2 { grid-template-columns: minmax(0, 1fr); display: grid; }
  .pmpro .pmpro_form_submit,
  .pmpro .pmpro_form_submit #pmpro_submit_span { display: block; width: 100%; }
  .pmpro .pmpro_form_submit .pmpro_btn,
  .pmpro .pmpro_form_submit input.pmpro_btn-submit-checkout { width: 100%; }
}

/* ─── BREAKDANCE-ERAN — TA BORT NÄR BREAKDANCE ÄR AVAKTIVERAT (P0 13) ─
   breakdance-woocommerce.css laddas EFTER dd-formular.css och lindar
   kassan i .bde-woopagecheckout med egen flex-layout. Samma regler som
   ovan, med wrappern i selektorn så att de vinner tills dess. */
.woocommerce-checkout .bde-woopagecheckout form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  column-gap: var(--space-16);
  gap: var(--space-16);
  align-items: start;
}
.woocommerce-checkout .bde-woopagecheckout form.woocommerce-checkout #customer_details { width: 100%; max-width: none; flex: none; grid-column: 1; }
.woocommerce-checkout .bde-woopagecheckout form.woocommerce-checkout .bde-order-review-column { grid-column: 2; grid-row: 1; width: 100%; flex: none; }
.woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields.bde-global-css-vars h3,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-additional-fields.bde-global-css-vars h3,
.woocommerce-checkout .bde-woopagecheckout h3#order_review_heading {
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: var(--display-sm);
  line-height: var(--display-line-sm);
  font-weight: var(--heading-weight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
}
.woocommerce-checkout .bde-woopagecheckout .form-row .input-text.input-text,
.woocommerce-checkout .bde-woopagecheckout .form-row select {
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-lg);
  min-height: var(--field-height);
  padding: 0 var(--space-4);
  color: var(--field-fg);
}
.woocommerce-checkout .bde-woopagecheckout .form-row textarea.input-text.input-text { padding: var(--space-3) var(--space-4); min-height: 120px; line-height: var(--text-line); }
.woocommerce-checkout .bde-woopagecheckout form .form-row.form-row-first,
.woocommerce-checkout .bde-woopagecheckout form .form-row.form-row-last { width: 100%; float: none; }
/* Breakdance sätter fältradernas bredd med ID-selektorer (50 %/33 %, flex) — samma id:n med en klass till vinner. */
.woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: 0;
  flex-wrap: nowrap;
}
.woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields__field-wrapper p.form-row,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields__field-wrapper #billing_first_name_field,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields__field-wrapper #billing_last_name_field,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields__field-wrapper #billing_country_field,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields__field-wrapper #billing_postcode_field,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields__field-wrapper #billing_state_field,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-shipping-fields__field-wrapper p.form-row { width: 100%; min-width: 0; flex: none; margin: 0 0 var(--space-5); }
@media (max-width: 767px) {
  .woocommerce-checkout .bde-woopagecheckout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .bde-woopagecheckout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .bde-woopagecheckout .woocommerce-additional-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
}
.woocommerce-checkout .bde-woopagecheckout .form-row .input-text.input-text:focus { box-shadow: var(--field-ring-focus); border: 0; }
.woocommerce-checkout .bde-woopagecheckout #payment.woocommerce-checkout-payment { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-6); }
.woocommerce-checkout .bde-woopagecheckout #payment div.payment_box { background: transparent; border: 0; padding: 0; }
.woocommerce-checkout .bde-woopagecheckout #payment #place_order { background: var(--action-primary-bg); color: var(--action-primary-fg); border-color: transparent; border-radius: var(--radius-full); min-height: var(--field-height); padding: 0 var(--space-6); font-size: var(--text-btn); font-weight: var(--weight-semi); line-height: 1; }
.woocommerce-checkout .bde-woopagecheckout #payment #place_order:hover { background: var(--action-primary-bg-hover); }
.woocommerce-checkout .bde-woopagecheckout .woocommerce-info { background: var(--bg-plate); color: var(--fg-primary); border-radius: var(--radius-card); display: block; }
.woocommerce-checkout .bde-woopagecheckout .woocommerce-info a { color: var(--fg-accent); text-transform: none; }
/* Breakdance ger tabellen egen bakgrund per tbody och skuggkanter på thead — plattan ska vara en yta. */
.woocommerce-checkout .bde-woopagecheckout table.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .bde-woopagecheckout table.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .bde-woopagecheckout table.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout .bde-woopagecheckout table.woocommerce-checkout-review-order-table tr { background: transparent; box-shadow: none; border: 0; border-radius: 0; }
.woocommerce-checkout .bde-woopagecheckout table.woocommerce-checkout-review-order-table thead tr th { letter-spacing: var(--eyebrow-track); padding: var(--space-4) var(--space-6) var(--space-3); }
.woocommerce-checkout .bde-woopagecheckout table.woocommerce-checkout-review-order-table tbody tr td { padding: var(--space-4) var(--space-6); }
/* Breakdance staplar med gap på .woocommerce, .col2-set och kolumnerna — det adderas till DD:s marginaler. Nollas; rytmen bärs av marginalerna. */
.woocommerce-checkout .bde-woopagecheckout .woocommerce,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-checkout .col2-set,
.woocommerce-checkout .bde-woopagecheckout form[name=checkout] .col-1,
.woocommerce-checkout .bde-woopagecheckout form[name=checkout] .col-2,
.woocommerce-checkout .bde-woopagecheckout .woocommerce-additional-fields,
.woocommerce-checkout .bde-woopagecheckout .bde-order-review-column,
.woocommerce-checkout .bde-woopagecheckout .form-row.place-order,
.woocommerce-checkout .bde-woopagecheckout ul.wc_payment_methods,
.woocommerce-checkout .bde-woopagecheckout #payment .form-row { gap: 0; }
.woocommerce-checkout .bde-woopagecheckout form.woocommerce-checkout { margin-top: var(--space-10); padding: 0; }
.woocommerce-page.woocommerce-checkout .bde-woopagecheckout .woocommerce,
.woocommerce-page.woocommerce-checkout .breakdance-woocommerce .woocommerce { gap: 0; }
.woocommerce-checkout .bde-woopagecheckout form.woocommerce-checkout .col2-set .col-2 { margin-top: var(--space-5); }
@media (max-width: 991px) {
  .woocommerce-checkout .bde-woopagecheckout form.woocommerce-checkout { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout .bde-woopagecheckout form.woocommerce-checkout .bde-order-review-column { grid-column: 1; grid-row: auto; margin-top: var(--space-10); }
}

/* ─── SYSTEMSIDA-MALLEN (2026-08-22): Woo-kassans inre följer satsytan ───
   Bricks Woo-lager ger notisbehållaren (.brxe-container.before-checkout) och
   kassaformuläret temats containerbredd 1100 centrerat — inne i Systemsida-
   mallens 1280-container hamnar formuläret 90 px in från H1. Uppmätt live
   2026-08-22. Bricks skriver regeln med #brx-content, därför samma id här. */
#brx-content .dd-systemsida .woocommerce .brxe-container.before-checkout,
#brx-content .dd-systemsida .woocommerce form.woocommerce-checkout,
#brx-content .dd-systemsida .woocommerce form.checkout { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
/* Pilen Bricks lägger efter "Klicka här för att logga in" — DD:s länkar bär ingen pil. */
#brx-content .woocommerce-info a.showlogin::after,
#brx-content .woocommerce-info a.showcoupon::after,
#brx-content .woocommerce-info > a::after { content: none; display: none; }

/* ─── SYSTEMSIDA-MALLEN: formulär i sidinnehållet får formulärets satsbredd (2026-08-22) ───
   /gast-konto/ (Fluent Form 7) och /uppdatera-uppgifter/ (Fluent Form 8) renderas av Systemsida-mallen
   sedan Breakdance avaktiverades; utan detta spann formuläret hela 1280-satsytan. Samma 640 som .dd-form. */
.dd-systemsida .fluentform,
.dd-systemsida .pmpro_member_profile_edit_wrap { max-width: 640px; }


/* ═══════════════════════════════════════════════════════════════
   MITT KONTO (Woo) OCH FLUENT FORMS STYLER — applicerat 2026-08-23
   (Thomas 'bygg allt detta' på v65/v66). Källa: samma text som
   dd-formular-forslag-mitt-konto-ff7.css i repot (förslagsfilen tas bort).
   ═══════════════════════════════════════════════════════════════ */

/* ─── WOO MITT KONTO (/mitt-konto/, Systemsida-mallen) ────────────────
   Woos egna stilar ger kantade boxar runt inloggning/registrering (1px
   #dddedf, padding 30), vita fält med kant (42 px, radie 0), grå knappar
   (#e4e7e9, 40 px) och systemtypsnitt. Samma regler som PMPro-inloggningen:
   inga plattor bakom formulär, kantlösa ljusgrå fält, DD-knappar, Inter/
   Barlow. Skrivet mot Woos egna klasser och scopat till .woocommerce-account
   så att kassan (eget avsnitt ovan) inte påverkas. Två klasser där Woo
   själv använder två (.woocommerce form .form-row). */

.woocommerce-account .woocommerce {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: var(--text-line);
  color: var(--fg-primary);
}
.woocommerce-account .woocommerce a { color: var(--fg-accent); font-weight: var(--label-weight); text-decoration: none; }
.woocommerce-account .woocommerce a:hover { text-decoration: underline; }

/* Inga plattor/boxar bakom formulären */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Två spalter (logga in / registrera): systemets rutnätsluft */
.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.woocommerce-account .u-columns.col2-set .u-column1,
.woocommerce-account .u-columns.col2-set .u-column2 { width: auto; float: none; max-width: 640px; }
@media (max-width: 767px) { .woocommerce-account .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); } }

/* Spaltrubriker och avsnittsrubriker: Barlow 24/700 */
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-EditAccountForm legend {
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: var(--display-sm);
  font-weight: var(--heading-weight);
  line-height: var(--display-line-sm);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
}
.woocommerce-account .woocommerce-EditAccountForm fieldset { border: 0; padding: 0; margin: var(--space-8) 0 0; }

/* Etiketter */
.woocommerce-account .woocommerce form label {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--label-weight);
  line-height: var(--text-line-tight);
  color: var(--fg-primary);
  margin-bottom: var(--space-2);
  display: block;
}
.woocommerce-account .woocommerce form .required { color: var(--status-destructive); text-decoration: none; border: 0; }
.woocommerce-account .woocommerce form .form-row { margin: 0 0 var(--space-5); padding: 0; }
.woocommerce-account .woocommerce form .form-row-first,
.woocommerce-account .woocommerce form .form-row-last { width: calc(50% - var(--space-2)); }
.woocommerce-account .woocommerce form .form-row-last { float: right; }
@media (max-width: 767px) {
  .woocommerce-account .woocommerce form .form-row-first,
  .woocommerce-account .woocommerce form .form-row-last { width: 100%; float: none; }
}

/* Fält: kantlösa, ljusgrå, 44 hög — samma som PMPro och Fluent Forms */
.woocommerce-account .woocommerce form .input-text,
.woocommerce-account .woocommerce form select,
.woocommerce-account .woocommerce form textarea,
.woocommerce-account .woocommerce .select2-container .select2-selection--single {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--field-fg);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
  min-height: var(--field-height);
  height: auto;
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-sizing: border-box;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--field-fg); }
.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; }
.woocommerce-account .woocommerce form .input-text:hover,
.woocommerce-account .woocommerce form select:hover { background: var(--field-bg-hover); }
.woocommerce-account .woocommerce form .input-text:focus,
.woocommerce-account .woocommerce form select:focus,
.woocommerce-account .woocommerce form textarea:focus {
  outline: none;
  background: var(--field-bg);
  box-shadow: inset 0 0 0 2px var(--orange-500);
}
.woocommerce-account .woocommerce form .password-input .show-password-input { top: 50%; transform: translateY(-50%); right: var(--space-3); }
.woocommerce-account .woocommerce form .password-input .show-password-input::after { color: var(--fg-muted); }

/* Kryssruta "Kom ihåg mig" — Woo lägger den och knappen i samma <p>; egen rad här */
.woocommerce-account .woocommerce form .woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5);
  font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--text-line);
}
.woocommerce-account .woocommerce form .woocommerce-form__input-checkbox { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--orange-500); }

/* Knappar: DD:s primärknapp; registrera = sekundär (medlemsvägen är /skapa-konto/) */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce .woocommerce-Button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-btn); font-weight: var(--weight-semi); line-height: 1; letter-spacing: normal;
  color: var(--action-primary-fg); background: var(--action-primary-bg);
  border: 1px solid transparent; border-radius: var(--radius-full);
  min-height: var(--field-height); padding: 0 var(--space-6);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); }
.woocommerce-account .woocommerce button.woocommerce-form-register__submit { background: var(--action-secondary-bg); color: var(--action-secondary-fg); }
.woocommerce-account .woocommerce button.woocommerce-form-register__submit:hover { background: var(--action-secondary-bg-hover); color: var(--action-secondary-fg); }
.woocommerce-account .woocommerce form .form-row .button { margin-top: var(--space-2); }
@media (max-width: 767px) { .woocommerce-account .woocommerce button.button { width: 100%; } }

/* Länkrad och småtext */
.woocommerce-account .woocommerce-LostPassword { margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.woocommerce-account .woocommerce-privacy-policy-text p,
.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm); line-height: 1.55; color: var(--fg-secondary); margin: 0 0 var(--space-5);
}
.woocommerce-account .woocommerce-form-register > p:not(.form-row):not(.woocommerce-privacy-policy-text) { font-size: var(--text-sm); color: var(--fg-secondary); }

/* Inloggad: kontomenyn som listrader, innehållet i Inter, adresskorten utan Woo-dekor */
.woocommerce-account .woocommerce-MyAccount-navigation { width: calc((var(--container-max) - 2 * var(--grid-gap)) / 3); max-width: 30%; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border-default); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: var(--space-3) 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); font-weight: var(--label-weight);
  color: var(--fg-primary); text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--fg-accent); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: right; width: calc(100% - (var(--container-max) - 2 * var(--grid-gap)) / 3 - var(--grid-gap)); }
.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 var(--space-4); }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address { margin-bottom: var(--space-6); }
.woocommerce-account .woocommerce-Address-title .edit { font-size: var(--text-sm); }
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: var(--text-line); color: var(--fg-secondary); }
@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: 100%; max-width: none; float: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--space-8); }
}

/* ─── FLUENT FORMS STYLER (formulär 7 = ffs_custom) — DD:s värden vinner ──
   /gast-konto/ (FF 7) bär en egen Styler (_ff_selected_style = ffs_custom,
   4,8 kB i formulärets meta) som skriver .fluentform_wrapper_7.ffs_custom_wrap …
   före elementet: fältet rgba(221,227,233,.66), knappen 300×92 #F78918 29 px
   med blå kant (1px #1a7efb), etiketter #35332F, röd asterisk #F56C6C, egenritade
   kryssrutor som blir grå när de kryssas. Samma selektorvikt (två klasser på
   wrappern) + DD:s värden här, så att styler-CSS:en inte vinner på specificitet.
   Stylerns CSS skrivs INLINE vid formuläret (efter head), så lika specificitet
   förlorar på källordning — därför wrapperns tredje klass (.ff-default) i varje
   selektor: (0,4,1) mot Stylerns (0,3,1). Gäller alla FF-formulär med egen Styler.
   Bättre på sikt: byt formulärets stil till ffs_default i FF-admin (Formulär 7 →
   Styler) och ta bort detta avsnitt. */

.fluentform.ff-default.ffs_custom_wrap .ff-el-input--content input,
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--content textarea,
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--content select,
.fluentform.ff-default.ffs_custom_wrap .choices__list--single,
.fluentform.ff-default.ffs_custom_wrap .choices[data-type*='select-multiple'] {
  color: var(--field-fg);
  background-color: var(--field-bg);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  border-width: 0;
}
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--content input:hover,
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--content select:hover { background-color: var(--field-bg-hover); }
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--content input:focus,
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--content select:focus,
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--content textarea:focus { background-color: var(--field-bg); box-shadow: inset 0 0 0 2px var(--orange-500); }
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--label label { color: var(--fg-primary); }
.fluentform.ff-default.ffs_custom_wrap .ff-el-input--label.ff-el-is-required label:after { color: var(--status-destructive); }
.fluentform.ff-default.ffs_custom_wrap .ff-el-group.ff_submit_btn_wrapper { text-align: left; }
.fluentform.ff-default.ffs_custom_wrap .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) {
  color: var(--action-primary-fg);
  background-color: var(--action-primary-bg);
  height: auto;
  min-height: var(--field-height);
  width: auto;
  padding: 0 var(--space-6);
  margin: 0;
  font-size: var(--text-btn);
  font-weight: var(--weight-semi);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
}
.fluentform.ff-default.ffs_custom_wrap .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style):hover { background-color: var(--action-primary-bg-hover); }
@media (max-width: 767px) { .fluentform.ff-default.ffs_custom_wrap .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) { width: 100%; } }
.fluentform.ff-default.ffs_custom_wrap .ff-el-form-check,
.fluentform.ff-default.ffs_custom_wrap .ff_list_buttons .ff-el-form-check label > span { color: var(--fg-primary); }
.fluentform.ff-default.ffs_custom_wrap .ff-el-form-check-label { display: inline-flex; align-items: flex-start; gap: var(--space-2); }
.fluentform.ff-default.ffs_custom_wrap .ff-el-group input[type=checkbox],
.fluentform.ff-default.ffs_custom_wrap .ff-el-group input[type=radio]:not(.ff_list_buttons input[type=radio]) {
  -webkit-appearance: auto; appearance: auto;
  width: 20px; height: 20px; margin: 2px var(--space-2) 0 0; flex: none;
  accent-color: var(--orange-500); position: static; transform: none;
}
.fluentform.ff-default.ffs_custom_wrap .ff-el-group input[type=checkbox]:before,
.fluentform.ff-default.ffs_custom_wrap .ff-el-group input[type=checkbox]:after,
.fluentform.ff-default.ffs_custom_wrap .ff-el-group input[type=radio]:before,
.fluentform.ff-default.ffs_custom_wrap .ff-el-group input[type=radio]:after { content: none; display: none; }
.fluentform.ff-default.ffs_custom_wrap .ff-el-section-break div.ff-section_break_desk,
.fluentform.ff-default.ffs_custom_wrap .ff-custom_html { color: var(--fg-primary); }

/* ─── INLOGGNINGEN: kortets nedre marginal bort (2026-08-23) ──────────
   PMPro ger .pmpro_card 40 px margin-bottom; på /login/ gjorde den att
   textspalten (och därmed bilden, som följer spalten) slutade 40 px under
   "Glömt lösenordet?". Thomas: bilden ska linjera med länken i nederkant. */
.dd-splitsektion__text .pmpro_card.pmpro_login_wrap { margin-bottom: 0; }

/* ─── AKTIV MEDLEM (2026-08-23, Thomas): rutan "Ditt engagemang" i båda kassorna ──
   PMPro: användarfältets grupp (fieldset dd_engagemang) som ljusgrått kort; Woo:
   .dd-aktiv-block från snippet 24. Kryssrutan 20 px med orange accent — fältregeln
   (min-height 44 på .pmpro_form_input) får inte göra den till en 44-ruta. */
#pmpro_form_fieldset-dd_engagemang .pmpro_card { background: var(--bg-card-alt); border: 0; border-radius: var(--radius-card); padding: var(--space-8); box-shadow: none; margin-bottom: var(--space-8); }
#pmpro_form_fieldset-dd_engagemang .pmpro_form_fields-description { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); line-height: var(--text-line); color: var(--fg-secondary); margin: 0 0 var(--space-4); }
#pmpro_form_fieldset-dd_engagemang .pmpro_form_field-checkbox > .pmpro_form_label:not(.pmpro_form_label-inline) { display: none; }
.pmpro_form .pmpro_form_field-checkbox .pmpro_form_label-inline { display: flex; align-items: flex-start; gap: var(--space-3); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--text-line); color: var(--fg-primary); margin: 0; }
.pmpro_form .pmpro_form_field-checkbox input[type=checkbox].pmpro_form_input { width: 20px; height: 20px; min-height: 0; margin: 4px 0 0; padding: 0; flex: none; accent-color: var(--orange-500); background: transparent; border-radius: var(--radius-sm); }
.woocommerce-checkout .dd-aktiv-block { background: var(--bg-card-alt); border-radius: var(--radius-card); padding: var(--space-8); margin-top: var(--space-8); }
.woocommerce-checkout .dd-aktiv-block h3 { font-family: "Barlow", system-ui, -apple-system, sans-serif; font-size: var(--display-sm); font-weight: var(--heading-weight); line-height: var(--display-line-sm); color: var(--fg-primary); margin: 0 0 var(--space-3); }
.woocommerce-checkout .dd-aktiv-block .dd-aktiv__ingress { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); line-height: var(--text-line); color: var(--fg-secondary); margin: 0 0 var(--space-4); }
.woocommerce-checkout .dd-aktiv-block p.form-row { margin: 0; padding: 0; }
.woocommerce-checkout .dd-aktiv-block .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--text-line); color: var(--fg-primary); }
.woocommerce-checkout .dd-aktiv-block input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 4px 0 0; flex: none; accent-color: var(--orange-500); }
.woocommerce-checkout .dd-aktiv-block .optional { display: none; }
@media (max-width: 478px) { #pmpro_form_fieldset-dd_engagemang .pmpro_card, .woocommerce-checkout .dd-aktiv-block { padding: var(--space-5); } }
/* Woo-kassans etikett i Aktiv medlem-rutan: Woos/KASSORNAs label-regel (14/500) slår med två klasser — tre här. */
.woocommerce-checkout .dd-aktiv-block label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout .dd-aktiv-block label.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--text-line); color: var(--fg-primary); margin: 0; }
.woocommerce-checkout .dd-aktiv-block label.checkbox > span { font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--text-line); }

/* ─── KOMMUN (2026-08-23, Thomas): PMPro-kassans sökbara kommunfält (select2) i DD:s fältstil ──
   Samma regler som Woo-kassans landväljare; själva rutan 'Din kommun' är PMPro:s fältgrupp (vit, som övriga). */
.pmpro_form .select2-container { min-width: 100%; } /* select2 sätter bredd inline — min-width vinner, ingen !important */
.pmpro_form .select2-container--default .select2-selection--single,
.pmpro_form .select2-container .select2-selection--single { background: var(--field-bg); border: 0; border-radius: var(--radius-lg); height: var(--field-height); min-height: var(--field-height); padding: 0 var(--space-10) 0 var(--space-4); box-shadow: none; margin: 0; display: flex; align-items: center; }
.pmpro_form .select2-container--default .select2-selection--single .select2-selection__rendered { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); line-height: normal; color: var(--field-fg); padding: 0; }
.pmpro_form .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--field-placeholder); }
.pmpro_form .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--field-height); right: var(--space-3); }
.pmpro_form .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--fg-primary) transparent transparent; }
.pmpro_form .select2-container--default.select2-container--focus .select2-selection--single,
.pmpro_form .select2-container--default.select2-container--open .select2-selection--single { box-shadow: var(--field-ring-focus); }
.select2-container--default .select2-search--dropdown .select2-search__field { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); border: 0; border-radius: var(--radius-lg); background: var(--field-bg); min-height: 40px; padding: 0 var(--space-3); }
.select2-container--default .select2-results__option { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); padding: var(--space-2) var(--space-3); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--orange-500); color: var(--fg-on-brand); }
.select2-dropdown { border: 1px solid var(--border-default); border-radius: var(--radius-lg); }

/* ─── MINA SIDOR (2026-08-23, v71): shortcode-innehållet i korten (snippet 26) ──
   Korten är Bricks-element (dd-card dd-card--flat); här stylas det som shortcodes
   skriver ut: statuschip, faktalista, knapprad, tysta länkar, Aktiv medlem-formuläret. */
.dd-ms-status { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; margin: 0; font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-primary); background: var(--white); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); }
.dd-ms-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--status-success); flex: none; }
.dd-ms-status--ingen::before { background: var(--fg-muted); }
.dd-ms-fakta { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); line-height: var(--text-line); }
.dd-ms-fakta dt { color: var(--fg-muted); margin: 0; }
.dd-ms-fakta dd { color: var(--fg-primary); margin: 0; overflow-wrap: anywhere; }
.dd-ms-saknas { color: var(--fg-muted); }
.dd-ms-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: auto; padding-top: var(--space-3); }
.dd-ms-knappar .dd-btn { width: auto; }
.dd-ms-lank { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-sm); font-weight: var(--label-weight); color: var(--fg-secondary); text-decoration: underline; text-underline-offset: 0.15em; }
.dd-ms-lank:hover { color: var(--fg-accent); }
/* Aktiv medlem-formuläret ([dd_aktiv_medlem_val]) i kortet */
.dd-aktiv.dd-form { gap: var(--space-4); max-width: none; }
.dd-aktiv .dd-check { display: flex; align-items: flex-start; gap: var(--space-3); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-base); line-height: var(--text-line); color: var(--fg-primary); cursor: pointer; }
.dd-aktiv .dd-check__box { width: 20px; height: 20px; min-height: 0; margin: 3px 0 0; flex: none; accent-color: var(--orange-500); background: var(--white); }
.dd-aktiv .dd-btn { align-self: flex-start; width: auto; }
.dd-aktiv__sparat { margin: 0; font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-sm); color: var(--status-success); }
@media (max-width: 478px) { .dd-ms-fakta { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } .dd-ms-fakta dt { margin-top: var(--space-2); } }
/* Knappar som shortcodes skriver ut på Mina sidor: Bricks genererar dd-btn-CSS bara för sina egna
   element, så klassen i shortcode-HTML får stilen här (samma värden som dd-btn i Bricks). */
.dd-ms-knappar .dd-btn, .dd-aktiv .dd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--text-btn); font-weight: var(--weight-semi); line-height: 1; letter-spacing: normal; color: var(--action-primary-fg); background: var(--action-primary-bg); border: 1px solid transparent; border-radius: var(--radius-full); min-height: var(--field-height); padding: 0 var(--space-6); text-decoration: none; cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.dd-ms-knappar .dd-btn:hover, .dd-aktiv .dd-btn:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); }
.dd-ms-knappar .dd-btn--on-accent, .dd-aktiv .dd-btn--on-accent, .dd-ms-knappar .dd-btn--secondary, .dd-aktiv .dd-btn--secondary { background: var(--white); color: var(--grey-900); }
.dd-ms-knappar .dd-btn--on-accent:hover, .dd-aktiv .dd-btn--on-accent:hover, .dd-ms-knappar .dd-btn--secondary:hover, .dd-aktiv .dd-btn--secondary:hover { background: var(--grey-50); color: var(--grey-900); }
@media (max-width: 767px) { .dd-ms-knappar .dd-btn, .dd-aktiv .dd-btn { width: 100%; } }