/* ============================================================
   EMD Shop, komponentlag oven på emd.css (1:1-designsystemet)
   Bygget efter docs/shop-brief/09-ui-kravmatrix.md
   Nye designbeslutninger er markeret [NY].
   ============================================================ */

/* ---------- Shop-lokale tokens ---------- */
:root {
  /* Single source for every sticky offset below the shop header.
     Shop pages now use .header--dark (padding-block 1rem, nav pill 43.2px -> 75.2px),
     rounded DOWN so the sticky layers overlap instead of leaving a 1px gap.
     (The white .shop-header fallback measures 67.19px; only non-shop system pages use it.) */
  --header-h: 75px;
  /* AA-safe muted text (>= 4.5:1 on #fff) for small print such as .price-hint. */
  --text-muted: #6c6d70;
}

/* ---------- Shop-header (hvid "sticky"-tilstand af site-headeren) ---------- */
.shop-header {
  position: sticky; top: 0; z-index: 6; background: #fff;
  box-shadow: 0 8px 16px rgba(34,35,38,.04), 0 4px 8px rgba(34,35,38,.07);
}
.shop-header .header__center { padding-block: .75rem; }
.shop-header .nav__link { color: var(--dark); }
.shop-header .site-search__open { color: var(--dark); }

/* ---------- Steps (købs-flowets trin) [NY: N-pips] ---------- */
.steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 24px; }
.steps__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .89rem; color: var(--text-muted); white-space: nowrap;
}
.steps__dot {
  width: 24px; height: 24px; border-radius: 100%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borders); font-size: .8rem; background: #fff; color: var(--dark);
}
.steps__item--done .steps__dot { background: var(--accent); border-color: var(--accent); color: #000; }
.steps__item--active { color: var(--headings); font-weight: 500; }
.steps__item--active .steps__dot { background: var(--dark); border-color: var(--dark); color: #fff; }
.steps__sep { color: var(--black-calm-black-60); }

/* ---------- Flader og paneler ---------- */
.panel { background: #fff; border: 1px solid var(--borders); border-radius: 16px; padding: 24px; }
.panel--soft { background: #f7f5ef; border-color: transparent; }        /* Easy beige 15 % (brandguide) */
.panel--light { background: var(--light); border-color: transparent; }
.panel--dark { background: var(--dark); border-color: transparent; color: hsla(0,0%,100%,.8); }
.panel--dark h2, .panel--dark h3, .panel--dark h4 { color: #fff; }

/* ---------- Notice-system [NY: on-brand fejl/info/succes] ---------- */
.notice { border-radius: 16px; padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
/* Text glyph, not an SVG: keep the line box so the arrow sits on the first text line. */
.notice__icon { flex-shrink: 0; line-height: 1.2; font-size: 1rem; color: var(--accent); }
.notice p { margin: 0; }
.notice--info    { background: #f7f5ef; color: var(--headings); }                       /* beige-tint */
.notice--error   { background: #faf0eb; color: #92482a; border: 1px solid var(--main-frontier-orange); }
.notice--warning { background: #faf0eb; color: #92482a; }
.notice--success { background: rgba(114,242,95,.12); color: var(--headings); }

/* Formular-fejl [NY: fejl-design fandtes ikke i temaet] */
.field { margin-bottom: 25px; }
.field label { display: block; margin-bottom: 2px; }
.field__error { display: none; color: #92482a; font-size: .89rem; margin-top: 6px; }
.field--error .hs-input { border-bottom: 2px solid var(--main-frontier-orange); }
.field--error .field__error { display: block; }
.field__hint { color: var(--text-muted); font-size: .89rem; margin-top: 6px; }
.hs-input:focus { border-bottom-color: var(--dark); }
.field--valid .hs-input { border-bottom-color: var(--accent); }

/* ---------- Licensmodel-kort (N1) ---------- */
.lcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.lcard {
  background: #fff; border: 1px solid var(--borders); border-radius: 16px; padding: 32px 24px 24px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
  transition: .2s ease-in-out;
  box-shadow: inset 0 0 0 1px transparent;
}
/* Clickability cues (pointer + lift) belong only to cards that really navigate, i.e. have data-href. */
.lcard[data-href] { cursor: pointer; }
.lcard[data-href]:hover { transform: scale(1.02); box-shadow: inset 0 0 0 1px transparent, 0 32px 64px rgba(34,35,38,.05), 0 16px 32px rgba(34,35,38,.05); }
/* The [data-href] variants are listed so the focus ring keeps winning over the hover rules above (same specificity, later in the file) when a card is both keyboard-focused and hovered. */
.lcard:focus-visible, .lcard[data-href]:focus-visible { outline: none; box-shadow: inset 0 0 0 1px transparent, 0 0 0 3px rgba(var(--accent-rgb),.25); }
/* Selected state uses an inset ring on top of the 1px border, so no 1px -> 2px layout jump. */
.lcard--active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px 0 rgba(var(--accent-rgb),.25); }
.lcard[data-href].lcard--active:hover { box-shadow: inset 0 0 0 1px var(--accent), 0 32px 64px rgba(34,35,38,.05), 0 16px 32px rgba(34,35,38,.05); }
.lcard--active:focus-visible, .lcard[data-href].lcard--active:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(var(--accent-rgb),.25); }
.lcard__title { margin: 0 0 4px; }
.lcard__model { color: var(--text); margin: 0 0 8px; }
.lcard__price-note { font-size: .89rem; color: var(--text-muted); margin: 0 0 16px; }
.lcard__cta { margin-top: auto; }
.lcard--contact { background: var(--light); border-style: dashed; }

/* ---------- Valutavælger (N4) + toggle-piller ---------- */
.pills { display: inline-flex; gap: 8px; }
.pill-btn {
  border: 1px solid var(--borders); background: #fff; color: var(--dark);
  border-radius: 999px; padding: .5rem 1.25rem; font-family: "Apfel Grotezk", sans-serif;
  font-size: 1rem; cursor: pointer; transition: .15s;
}
.pill-btn:hover { border-color: var(--black-calm-black-80); }
.pill-btn--active { background: var(--dark); border-color: var(--dark); color: #fff; }
.pill-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); }

/* ---------- Identifikations-gate (N3) ---------- */
.gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 767px) { .gate-grid { grid-template-columns: 1fr; } }
/* F6: ens (hvide) kort i samme højde; CTA'erne bundjusteres, så det tomme felt
   under Sign in-knappen udlignes i stedet for at hænge under den. */
.gate-grid .panel { display: flex; flex-direction: column; align-items: flex-start; }
.gate-grid .panel .btn { margin-top: auto; }

/* ---------- Katalog (S4) ---------- */
.catalog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1139px) { .catalog-layout { grid-template-columns: 1fr; } }

/* Sticky filterbjælke, flyttet hertil fra shop-03's sidelokale <style> */
.filter-bar {
  position: sticky; top: var(--header-h); z-index: 5; background: #fff;
  padding: 12px 0; margin-bottom: 24px; border-bottom: 1px solid var(--borders);
}
.filter-bar .cat-nav { margin-bottom: 0; }
.cat-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
/* Search + license language dropdown next to the category pills [NY] */
.filter-bar__tools { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }

.mod-group { margin-bottom: 40px; }
.mod-group__title { display: flex; align-items: baseline; gap: 8px; font-size: 1.1rem; font-weight: 500; color: var(--headings); margin: 0 0 12px; }
.mod-group__count { font-weight: 400; color: var(--text-muted); font-size: .89rem; }
/* Kompakte rækker i katalogets grupper (tidligere sidelokal <style> i shop-03) */
.mod-group .mod-row { padding: 12px 20px; margin-bottom: 8px; }
.mod-group .mod-row__meta { margin-top: 0; }

.mod-row {
  /* Third column is fixed so a stepper and an "Add" button share the same right edge. */
  display: grid; grid-template-columns: minmax(0,1fr) auto 116px; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--borders); border-radius: 16px;
  padding: 16px 20px; margin-bottom: 12px; transition: .2s ease-in-out;
  box-shadow: inset 0 0 0 1px transparent;
}
.mod-row > :last-child { justify-self: end; }
.mod-row:hover { box-shadow: inset 0 0 0 1px transparent, 0 16px 32px rgba(34,35,38,.05), 0 8px 16px rgba(34,35,38,.05); }
.mod-row__name { font-weight: 500; color: var(--headings); margin: 0; }
.mod-row__meta { font-size: .89rem; color: var(--text-muted); margin: 2px 0 0; }
.mod-row__price { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mod-row__price small { display: block; font-size: .8rem; color: var(--text-muted); }
.mod-row--in-cart { border-color: var(--accent); }
.mod-row--locked { background: var(--light); }
.mod-row--locked .mod-row__name { color: var(--text-muted); }
/* Same inset-ring trick as .lcard--active: 2 px optical ring, zero layout shift. */
.mod-row--basis { border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); }
.mod-row--basis:hover { box-shadow: inset 0 0 0 1px var(--dark), 0 16px 32px rgba(34,35,38,.05), 0 8px 16px rgba(34,35,38,.05); }

/* Rapportsprog-rækker (tidligere sidelokal <style> i shop-03) */
.lang-row { grid-template-columns: auto minmax(0,1fr) auto; }
.lang-row input[type=radio] { width: 20px; height: 20px; accent-color: var(--accent); }

/* Dependency-hint (N6) */
.dep-hint { display: flex; align-items: center; gap: 6px; font-size: .89rem; color: #92482a; margin-top: 4px; }
.dep-hint--ok { color: var(--headings); }

/* Antalsvælger (N7) */
.stepper {
  display: inline-flex; align-items: center; align-self: center; flex: 0 0 auto;
  border: 1px solid var(--borders); border-radius: 999px; overflow: hidden;
}
.stepper__btn {
  background: none; border: 0; width: 36px; height: 36px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--dark); font-family: "Apfel Grotezk", sans-serif; line-height: 1.2;
}
.stepper__btn:hover { background: var(--light); }
.stepper__btn:disabled { color: var(--black-calm-black-60); cursor: not-allowed; }
.stepper__val {
  min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-variant-numeric: tabular-nums;
}
.stepper--sm .stepper__btn { width: 30px; height: 30px; }
.stepper--sm .stepper__val { min-width: 30px; height: 30px; }

/* Tilføj-knap i katalogrækker */
.add-btn {
  border: 1px solid var(--dark); background: none; color: var(--dark);
  border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer;
  font-family: "Apfel Grotezk", sans-serif; font-size: 1rem; transition: .15s;
}
.add-btn:hover { background: var(--dark); color: #fff; }
.add-btn:disabled { border-color: var(--borders); color: var(--black-calm-black-60); cursor: not-allowed; background: none; }
.add-btn--added { background: var(--accent); border-color: var(--accent); color: #000; }

/* ---------- Guided buying (feature: "your selection unlocked ...") [NY] ---------- */
.guide-box {
  background: #f7f5ef; border: 1px solid var(--accent); border-radius: 16px;
  padding: 16px 20px; margin-bottom: 24px;
}
.guide-box__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.guide-box__title { font-weight: 500; color: var(--headings); margin: 0; }
.guide-box__dismiss {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-muted); font-size: .89rem; text-decoration: underline;
  font-family: "Apfel Grotezk", sans-serif;
}
.guide-box__dismiss:hover { color: var(--headings); }
.guide-box__dismiss:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.25); }
.guide-box__sub { font-size: .89rem; color: var(--text-muted); margin: 4px 0 0; }
.guide-box__items { list-style: none; margin: 8px 0 0; padding: 0; }
.guide-box__item {
  display: flex; align-items: center; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--borders);
}
.guide-box__item:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-box__name { flex: 1; min-width: 0; font-weight: 500; color: var(--headings); }
.guide-box__price { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Badges (udvidelser) ---------- */
.badge--info    { background: #f7f5ef; color: var(--headings); }
.badge--blocked { background: var(--light); color: var(--text-muted); border: 1px solid var(--borders); }
.badge--free    { background: var(--accent); color: #000; }
.badge--owned   { background: var(--dark); color: #fff; }
.badge--pending { background: #faf0eb; color: #92482a; }
/* Guided buying: freshly unlocked rows, cleared on the next interaction [NY] */
.badge--unlocked { background: var(--accent); color: #000; margin-left: 8px; vertical-align: middle; }

/* ---------- Kurv-panel (sticky, N10/N22, F7) ----------
   Sticky KUN i to-kolonne-layoutet (>= 1140px, samme breakpoint som
   .catalog-layout); i en-kolonne-layoutet er panelet sidste element og skal
   flyde normalt. Samme top-mønster som .filter-bar (var(--header-h) + afstand). */
@media (min-width: 1140px) {
  .cart-panel { position: sticky; top: calc(var(--header-h) + 22px); }
}
/* Two columns by default (text, price). Rows with a stepper get a third column. */
.cart-line {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--borders);
}
.cart-line--qty, .cart-line:has(.stepper) { grid-template-columns: minmax(0,1fr) auto auto; }
.cart-line__name { margin: 0; }
.cart-line__meta { font-size: .89rem; color: var(--text-muted); margin: 2px 0 0; }
.cart-line__price { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cart-line--free .cart-line__price { color: var(--headings); font-weight: 500; }
/* F8 (rapportens fund): ingen skillelinje/tom plads under SIDSTE linje i et
   kort hvor kurvlinjerne er de sidste born (Licenses-kortet). I .cart-panel
   folger .breakdown efter linjerne, sa den rammes ikke. */
.panel > .cart-line:last-child { border-bottom: 0; padding-bottom: 0; }
.price-hint { font-size: .8rem; color: var(--text-muted); margin: 4px 0 0; }   /* N8: den aktive prisregel */

/* Prisopdeling (N22) */
.breakdown { margin-top: 8px; }
.breakdown__row { display: flex; justify-content: space-between; padding: 8px 0; font-variant-numeric: tabular-nums; }
.breakdown__row--muted { color: var(--text-muted); font-size: .89rem; }
.breakdown__row--total {
  border-top: 1px solid var(--dark); margin-top: 8px; padding-top: 14px;
  font-weight: 500; font-size: 1.1rem; color: var(--headings);
}
.breakdown__row--discount { color: #92482a; }

/* ---------- Service-inkluderet-panel (N19/N20) ---------- */
.service-panel { display: flex; gap: 12px; align-items: flex-start; }
.service-panel__badge { flex-shrink: 0; }

/* ---------- Betalingsvalg (N35) ---------- */
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 767px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-option { position: relative; display: flex; cursor: pointer; }
.pay-option input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
/* Block-level flex box: a <span> holding block children fragments its border/radius. */
.pay-option__box {
  display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%;
  background: #fff; border: 1px solid var(--borders); border-radius: 16px; padding: 24px;
  box-shadow: inset 0 0 0 1px transparent; transition: .15s;
}
.pay-option input:checked + .pay-option__box {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px 0 rgba(var(--accent-rgb),.2);
}
.pay-option input:focus-visible + .pay-option__box { box-shadow: inset 0 0 0 1px transparent, 0 0 0 3px rgba(var(--accent-rgb),.15); }
.pay-option input:checked:focus-visible + .pay-option__box { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(var(--accent-rgb),.15); }
.pay-option__title { display: block; font-weight: 500; color: var(--headings); margin: 0; }
.pay-option__desc { display: block; margin: 0; font-size: .89rem; color: var(--text); }

/* ---------- Vilkårspanel (N32) ---------- */
.terms-list { list-style: none; margin: 0 0 24px; padding: 0; }
.terms-list li { padding: 10px 0 10px 24px; position: relative; border-bottom: 1px solid var(--borders); font-size: 1rem; }
.terms-list li:before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; }
.consent input[type=checkbox] {
  width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0;
  accent-color: var(--accent); border-radius: 4px;
}

/* ---------- Fornyelses-tabel (S8, N26) ---------- */
.renew-row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--borders); border-radius: 16px;
  padding: 14px 20px; margin-bottom: 12px;
}
.renew-row--off { opacity: .55; background: var(--light); }
.renew-row--blocked { background: var(--light); grid-template-columns: auto minmax(0,1fr) auto; }
.renew-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); border-radius: 4px; }
.renew-row__dates { font-size: .89rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Bekræftelse (S12) ---------- */
.confirm-hero { text-align: center; padding: 64px 24px; }
.confirm-hero__check {
  width: 72px; height: 72px; border-radius: 100%; background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px;
  box-shadow: 0 0 24px 0 rgba(var(--accent-rgb),.4);
}
.next-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.next-steps li { position: relative; padding: 0 0 24px 48px; }
.next-steps li:before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 100%;
  background: var(--dark); color: #fff; font-size: .89rem;
  display: flex; align-items: center; justify-content: center;
}
.next-steps li:after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 1px; background: var(--borders); }
.next-steps li:last-child:after { display: none; }
.next-steps__title { font-weight: 500; color: var(--headings); margin: 4px 0 4px; }
.next-steps p { margin: 0; }

/* ---------- Diverse ---------- */
.shop-main { padding: 48px 0 96px; }
.shop-title { margin-bottom: 8px; }
.shop-sub { color: var(--text); max-width: 640px; margin-bottom: 40px; }
.muted { color: var(--text-muted); }
.tnum { font-variant-numeric: tabular-nums; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-40{margin-bottom:40px}
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Knap-udvidelser (F5/F6 + F2-persist) [NY] ---------- */
/* F5: Back-knapper. Parent-temaets .btn--outline baerer en HOJREPEGENDE pil som
   baggrunds-SVG; pa en tilbage-navigation er den vildledende. Baggrundspilen
   fjernes, og markup'en saetter i stedet glyffen U+2190 (aria-hidden) FOER
   teksten. Hover glider mod venstre i stedet for hojre. */
.btn.btn--outline.btn--back { background-image: none; padding-right: 0; transition: padding .15s; }
.btn.btn--outline.btn--back:hover { padding-right: 0; padding-left: .5rem; }
.btn__back-arrow { margin-right: 8px; }

/* F6: sekundaer pilleknap (kant, samme hojde som .btn--fill i samme storrelse;
   1px kant modregnes i den lodrette padding). */
.btn--ghost { border: 1px solid var(--dark); color: var(--dark); background: #fff; }
.btn--ghost.btn--medium { padding-top: calc(.5875rem - 1px); padding-bottom: calc(.5875rem - 1px); }
.btn--ghost.btn--large { padding-top: calc(.91rem - 1px); padding-bottom: calc(.91rem - 1px); }
.btn--ghost:hover { background: var(--dark); color: #fff; }
.btn--ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.25); }

/* F2: en disabled .btn (fx "Continue to checkout" mens kurven ikke er
   persisteret) skal SE disabled ud og ikke reagere pa hover/active. */
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover, .btn:disabled:active { transform: scale(1); }

/* ---------- ShopIsland (T1) [NY] ---------- */
/* Fuldførte trin i .steps er nu knapper (naviger tilbage); samme udseende som spans. */
button.steps__item { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
button.steps__item:hover { color: var(--headings); }
button.steps__item:focus-visible { outline: none; border-radius: 8px; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.25); }
/* Trin-overskriften modtager programmatisk fokus ved trinskift (a11y); ingen ring. */
.shop-title:focus { outline: none; }

/* ---------- Membership-sider (fase 6) [NY] ----------
   Styler HubSpots systemgenererede markup fra member_login/member_register/
   password_reset_request/password_reset (hs-form-field, hs-input, hs-button,
   form-separator, hs-membership-*) saa siderne matcher shoppen: samme fonte
   (Apfel Grotezk via emd.css), samme accentknap og samme .panel/.notice-flader. */
.mem-main { background: #f7f5ef; padding: 64px 0 96px; min-height: 60vh; }
.mem-card { max-width: 480px; margin: 0 auto; padding: 40px 32px; }
.mem-card__title { margin: 0 0 8px; }
.mem-card__intro { color: var(--text); margin: 0 0 16px; }
.mem-card__notice { margin-bottom: 24px; font-size: .89rem; }
.mem-card__foot { margin: 24px 0 0; font-size: .89rem; color: var(--text-muted); }

/* Loebende tekstlinks paa membership-kortet: morke og understregede.
   Parent-temaets gronne link-farve (#72f25f) er ulaeselig paa hvid flade. */
.mem-card a { color: var(--dark); text-decoration: underline; }
.mem-card a:hover { color: var(--headings); }

/* Knapper paa access denied- og sign out-siderne er <a>, ikke input.hs-button.
   Reglen ovenfor understreger alle links paa kortet - den maa ikke ramme dem. */
.mem-card a.btn { text-decoration: none; }
.mem-card__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.mem-card__actions .btn { justify-content: center; text-align: center; }

/* Submit-knapperne (input.hs-button) efter temaets .btn--fill.btn--accent.btn--pill */
.mem-card .hs-button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Apfel Grotezk", sans-serif; font-size: 1rem; line-height: 1.2;
  background: var(--accent); color: #000; border: 0; border-radius: 999px;
  padding: .5875rem 1.5rem; cursor: pointer;
  box-shadow: 0 0 16px 0 rgba(var(--accent-rgb), .5);
  transition: box-shadow .1s ease-in-out, transform .1s ease-in-out;
}
.mem-card .hs-button:hover { transform: scale(1.04); }
.mem-card .hs-button:active { transform: scale(.96); }
.mem-card .hs-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.mem-card .hs-button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.mem-card .hs-submit { margin-top: 8px; }

/* Fejl- og statusbeskeder fra HubSpot-taggene */
.mem-card .hs-error-msgs { list-style: none; margin: 0 0 8px; padding: 0; }
.mem-card .hs-membership-global-error,
.mem-card .hs-error-msg { color: #92482a; font-size: .89rem; }
.mem-card .hs-membership-global-message { color: var(--headings); font-size: .89rem; }
.mem-card #hs-membership-password-requirements { margin: -16px 0 24px; }
.mem-card #hs-membership-password-requirements label { color: var(--text-muted); font-size: .89rem; }

/* "Remember me"-checkboks paa linje med label */
.mem-card input[type="checkbox"].hs-input {
  width: 20px; height: 20px; accent-color: var(--accent); border-radius: 4px;
  vertical-align: middle; margin-right: 8px;
}
.mem-card .hs-form-field input[type="checkbox"] + label { display: inline; vertical-align: middle; }

/* Show password + Forgot your password: sekundaere smaa links */
.mem-card .hs-login-widget-show-password,
.mem-card .hs-register-widget-show-password,
.mem-card .hs-reset-widget-show-password { float: right; font-size: .83rem; }
.mem-card #hs_login_reset { font-size: .89rem; }

/* Separatoren mellem password-login og passwordless ("or") */
.mem-card .form-separator {
  display: flex; align-items: center; gap: 16px; margin: 32px 0;
  color: var(--text-muted); font-size: .89rem; text-transform: uppercase;
}
.mem-card .form-separator::before,
.mem-card .form-separator::after { content: ""; flex: 1; border-top: 1px solid var(--borders); }

/* Passwordless-formularens intro-afsnit */
.mem-card #hs-membership-passwordless-auth-form p { color: var(--text); margin: 0 0 16px; }

/* Self-registration-linket under login-formularen */
.mem-card #hs-login-self-registration-link { margin-top: 24px; font-size: .89rem; color: var(--text-muted); }
.mem-card #hs-login-self-registration-link p { margin: 0; }