/* ===========================================================
   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; }