/* ===========================================================
   VistaLån theme for the AXO / LendMe loan-application widget.

   The widget renders straight into our page (no iframe), so it can be
   restyled — but only in a few safe ways:

   1. Design tokens. AXO themes everything through CSS custom properties
      set on its [data-theme] element inside `@layer axo`. Our rules are
      unlayered, so redefining the tokens here wins over AXO's values and
      every screen of the flow (also steps 2+) picks up the new look.
      We remap AXO's two green scales to the site's gold, swap the font
      tokens to Roboto Condensed and tighten the radii.
   2. Plain wrapper elements (div/span). AXO protects button, input,
      label, select, textarea, form, section and footer with
      `revert-layer !important`, so those are styled via tokens only —
      never with direct !important overrides.

   AXO's class names are hashed (e.g. _card_lp0p2_2) and change between
   releases, so selectors match only the stable prefix
   ([class*="_card_"]). If a future release renames a block, that one
   detail falls back to AXO's default look — the form keeps working.
   The price example (ved 9% deb. rente ...) is left fully visible: it is
   a legal requirement for credit marketing.
   =========================================================== */

#axo-embed-target [data-theme]{
  /* AXO "green" -> VistaLån gold (#EDC661 = 500) */
  --color-green-50:#FDF9EE;  --color-green-100:#FBF1D8; --color-green-200:#F7E4B5;
  --color-green-300:#F2D68E; --color-green-400:#EFCD76; --color-green-500:#EDC661;
  --color-green-600:#D9AF45; --color-green-700:#B38D2E; --color-green-800:#7E6320;
  --color-green-900:#4A3A13;
  --color-light-green-50:#FDF9EE;  --color-light-green-100:#FBF1D8; --color-light-green-200:#F7E4B5;
  --color-light-green-300:#F2D68E; --color-light-green-400:#E3B94E; --color-light-green-500:#D9AF45;
  --color-light-green-600:#B38D2E; --color-light-green-700:#9A7826; --color-light-green-800:#7E6320;
  --color-light-green-900:#4A3A13;

  /* warm neutral borders instead of AXO grey */
  --input-color-border-default:#ddd3c4;
  --input-radio-color-border-unselected-neutral:#b9ab95;
  --action-color-border-tertiary:#ddd3c4;
  --action-color-border-tertiary-hover:#EDC661;

  /* radii: 18px card, 6px controls (was 40px / 30px pills) */
  --radius-xlg:1.125rem; --radius-lg:.375rem; --radius-s:.375rem;

  /* fonts: the site's Roboto Condensed instead of Open Sans / Recoleta */
  --font-family-open-sans:"Roboto Condensed", Arial, sans-serif;
  --font-family-recoleta:"Roboto Condensed", Arial, sans-serif;
  --font-body-lg:normal 400 1.125rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-lg-bold-button:normal 700 1.125rem / 1.333 "Roboto Condensed", Arial, sans-serif;
  --font-body-lg-link:normal 400 1.125rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-lg-semibold:normal 700 1.125rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-md:normal 400 1rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-md-bold-button:normal 700 1rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-md-link:normal 400 1rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-md-semibold:normal 700 1rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-s:normal 400 .875rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-s-link:normal 400 .875rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-s-semibold:normal 700 .875rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-xlg:normal 400 1.25rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-xlg-bold-button:normal 700 1.25rem / 1.2 "Roboto Condensed", Arial, sans-serif;
  --font-body-xlg-semibold:normal 700 1.25rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-xs:normal 400 .75rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-xs-semibold:normal 700 .75rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-xxlg:normal 400 1.5rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-xxlg-bold:normal 700 1.5rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-body-xxlg-semibold:normal 700 1.5rem / 1.5 "Roboto Condensed", Arial, sans-serif;
  --font-heading-hero-lg:italic 700 3.75rem / 1.2 "Roboto Condensed", Arial, sans-serif;
  --font-heading-hero-md:italic 700 3rem / 1.208 "Roboto Condensed", Arial, sans-serif;
  --font-heading-hero-s:italic 700 2.5rem / 1.2 "Roboto Condensed", Arial, sans-serif;
  --font-heading-lg:italic 700 2rem / 1.188 "Roboto Condensed", Arial, sans-serif;
  --font-heading-md:italic 700 1.5rem / 1.208 "Roboto Condensed", Arial, sans-serif;
  --font-heading-s:italic 700 1.125rem / 1.222 "Roboto Condensed", Arial, sans-serif;
  --font-heading-xs:italic 700 1rem / 1.188 "Roboto Condensed", Arial, sans-serif;
  --font-heading-xxs:italic 700 .875rem / 1.214 "Roboto Condensed", Arial, sans-serif;
}

#axo-embed-target [data-theme],
#axo-embed-target [data-theme] *{ font-family:"Roboto Condensed", Arial, sans-serif; }

/* white card with the site's soft card shadow */
#axo-embed-target [class*="_card_"]{
  background:#fff; border-radius:18px; padding:22px 22px 18px;
  box-shadow:0 10px 30px rgba(38,40,51,.06);
}

/* step header: "OM LÅNET" + small uppercase sub-line */
#axo-embed-target [class*="_title_"]{
  font-weight:700; font-style:italic; font-size:20px; line-height:24px;
  text-transform:uppercase; color:#262833;
}
#axo-embed-target [class*="_nextTitle_"]{
  font-size:11px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:#4a4c57;
}

/* field boxes on a white card need an outline */
#axo-embed-target [class*="_textInput_"],
#axo-embed-target [class*="_valueHolder_"]{ background:#fff; border:1px solid #eee7de; border-radius:6px; }

/* "NÆSTE": italic uppercase like the site's other gold buttons */
#axo-embed-target button[class*="_button_"] span{ text-transform:uppercase; font-style:italic; letter-spacing:.02em; }

/* More air above "NÆSTE" (4px -> 20px). The button itself ignores margins
   (AXO protects it), so the space is added under the field just before it.
   Matches whatever field precedes the primary button on every step. */
#axo-embed-target form > [class*="_stack_"] > :has(+ button[class*="_button_"]){ margin-bottom:16px; }

/* Amount slider. AXO draws the rail 20px past the slider on the right and a
   30px gold cap 20px past it on the left, so out of the box the bar sticks
   out on one side and is short on the other. Inset the slider by the knob
   radius (20px) on both sides and let the rail reach back out by the same
   amount: rail and gold cap now line up exactly with the input above, and
   the knob stays inside the field edges at min and max. */
#axo-embed-target .rc-slider{ width:calc(100% - 40px); margin-left:20px; margin-right:20px; }
#axo-embed-target .rc-slider-rail{ left:-20px; right:-20px; width:auto; }

/* Knob + pulse. The handle is 40px with a 36px knob (::after) and the pulse
   ring (::before). AXO centres both via the handle's 2px border, which the
   scoped reset removes, so they drifted 2px up/left and the pulse looked
   lopsided. Offset them back by 2px and give the knob a white ring. */
#axo-embed-target .rc-slider-handle{ background:#fff; box-shadow:0 1px 4px rgba(38,40,51,.18); }
#axo-embed-target .rc-slider-handle::before,
#axo-embed-target .rc-slider-handle::after{ top:2px; left:2px; }

/* A little more space between the step title and "Næste: …" (+4px). */
#axo-embed-target [class*="_nextTitle_"]{ margin-top:4px; }

/* Loan example under "NÆSTE": same font size as the loan amount in the
   field ("250 000 kr", 14px) and further below the button (4px -> 18px). */
#axo-embed-target [class*="_disclaimer_"]{ font-size:14px; line-height:1.45; margin-top:14px; }

/* Løbetid stepper: AXO's 40px round -/+ buttons filled the 42px box edge to
   edge, so their rings touched/overlapped its border. Shrink them to 30px,
   centre them vertically and give them 6px breathing room from the edges.
   Size properties are set !important inside AXO's layer, hence !important. */
#axo-embed-target [class*="_valueHolder_"]{ align-items:center; }
#axo-embed-target [class*="_valueHolder_"] > button[class*="_button_"]{
  width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important;
  flex:0 0 30px !important; margin:0 6px !important; align-self:center !important;
}

/* Message boxes (step 1 "En længere løbetid…" warning, step 2 e-skat info).
   Our scoped reset stripped AXO's padding + border, so the text sat loose in
   the form. revert-layer hands those two back to AXO (12px padding, 1px
   border in the variant's colour — same box as on lendme.dk), plus a 10px
   radius, airier line spacing and room above/below. */
#axo-embed-target [class*="_message_"]{ padding:revert-layer; border:revert-layer; border-radius:10px; line-height:1.45; margin:8px 0 10px; }
#axo-embed-target [class*="_message_"] [class*="_icon_"]{ padding-top:1px; }
/* The info variant is AXO-blue by default; give it the gold theme. */
#axo-embed-target [class*="_message_"][data-variant="info"]{ background:#FDF9EE; border-color:#EDC661; color:#4A3A13; }

/* Låneformål dropdown: the border lives on the wrapper span, which the
   reset cleared. Same white field + border as the text inputs. */
#axo-embed-target [class*="_select_"]{ background:#fff; border:1px solid #eee7de; border-radius:6px; }

/* More air above the "Ja tak, jeg vil gerne …" consent checkbox. */
#axo-embed-target [class*="_consent_"]{ margin-top:14px; }

/* Pop-ups (e.g. "Din e-skat information"). AXO renders its <dialog> inside
   #axo-embed-target, so the scoped Meyer reset in style.css stripped all
   padding/borders/fonts from it and the content ran edge to edge. Hand
   those properties back to AXO inside dialogs only — the form itself
   keeps the reset that makes it match the live layout. */
#axo-embed-target dialog :where(div,span,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,footer,header,section,small){
  margin:revert-layer; padding:revert-layer; border:revert-layer; font:revert-layer; vertical-align:revert-layer;
}
/* e-skat info blocks (income, person, debt) were white-on-white: give them
   the same thin warm border as the form fields. */
#axo-embed-target dialog [class*="_detailsInfo_"]{ border:1px solid #eee7de; border-radius:10px; padding:12px 14px; }
#axo-embed-target dialog [class*="_card_"]{ border:1px solid #eee7de; border-radius:10px; box-shadow:none; padding:14px; }
/* Pop-up layout: gold header bleeds to the dialog edges (cancels the 24px
   content padding), 20px air below it, and 20px under the last block so
   the sticky "LUK" footer no longer covers the bottom border of the last
   card when scrolled to the end. */
#axo-embed-target dialog [class*="_modal__header_"]{ margin-left:-24px; margin-right:-24px; padding-left:48px; padding-right:48px; padding-bottom:18px; }
#axo-embed-target dialog [class*="_modal__header_"] + div{ margin-top:20px; margin-bottom:20px; }

/* "Jeg er dansk statsborger" checkbox: 12px above / 16px below, matching
   the rhythm between the other questions. AXO sets these margins with
   !important in its layer, hence !important. */
#axo-embed-target [class*="_isDanish_"]{ margin-top:8px !important; margin-bottom:12px !important; }
/* …and its one-line text vertically centred on the box. */
#axo-embed-target [class*="_isDanish_"] > [class*="_stack_"]{ align-items:center; }
#axo-embed-target [class*="_isDanish_"] [class*="_column_"]{ align-self:center; }

/* "Dit forbrug" step: push "Din andel af husstandens samlede udgifter"
   20px down from the expense list, and show its value (e.g. "50 %") bold
   at label size, vertically centred on the label. */
#axo-embed-target [class*="_list_kqdoz"] + [class*="_headline_kqdoz"]{ margin-top:20px; }
#axo-embed-target [class*="_headline_kqdoz"] [class*="_header_"]{ align-items:center; }
#axo-embed-target [class*="_headline_kqdoz"] [class*="_header_"] > span[class*="_text_"]{ font-weight:700; font-size:16px; line-height:24px; }
/* "Dine månedlige husholdningsudgifter" heading: bold, same size as the
   other field labels. */
#axo-embed-target h4[class*="_heading_kqdoz"]{ font-weight:700; font-size:16px; line-height:24px; }

/* Slider min/max legend ("0 % / 100 %", "10 000 kr / 500 000 kr"): pull it
   10px closer to the rail; the extra 10px below keeps the spacing to the
   next field unchanged. */
#axo-embed-target [class*="_sliderLegend_"]{ margin-top:-10px; margin-bottom:10px; }

/* Two-column field rows (Registreringsnummer | Kontonummer): let the help
   text under the left field ("Bruges kun til betalingsservice, …") run on
   one line across both columns instead of wrapping in the narrow column.
   Only when the right field has no caption of its own (e.g. a validation
   message), so the two can never overlap. Desktop only — on phones the
   line is too long for the card anyway. */
@media (min-width:768px){
  #axo-embed-target [class*="_grid_"] > [class*="_formControl_"]{ min-width:0; }
  #axo-embed-target [class*="_grid_"]:not(:has(> :nth-child(2) [class*="_formControlCaption_"])) > :first-child [class*="_formControlCaption_"]{ white-space:nowrap; overflow:visible; }
}

/* Links inside the form ("andre tjenesteydelser", "samarbejdspartnere",
   "brugervilkår", "privatlivspolitik"): same grey as the consent text,
   underline kept. AXO colours them via this token (the buttons themselves
   are colour-protected), so we set the token rather than the elements. */
#axo-embed-target [data-theme]{ --action-color-foreground-link:#474747; }

/* Vistalån's own extra permission (Modstrøm + TELMORE), injected by
   assets/js/vl-extras.js directly above AXO's marketing checkbox. It takes
   over the 14px gap above the consent area; AXO's checkbox then follows
   8px below it. */
#axo-embed-target .vl-partner{ margin-top:14px; color:#474747; }
#axo-embed-target .vl-partner + [class*="_consent_"]{ margin-top:8px; }
#axo-embed-target .vl-partner a{ color:inherit; text-decoration:underline; }
#axo-embed-target .vl-partner__info{ margin:8px 0 0 32px; padding:10px 12px; border:1px solid #eee7de; border-radius:8px; background:#FDF9EE; font-size:13px; line-height:1.45; }
#axo-embed-target .vl-partner__info p + p{ margin-top:8px; }