@dnb/eufemia 10.74.0 → 10.75.0

package/extensions/payment-card/style/dnb-payment-card.css

@@ -1,6 +1,7 @@
 /*
- * PaymentCard component
- *
+ * PaymentCard component styles
+ * This file provides styling for the PaymentCard component, including general design tokens
+ * and variations for different card types (e.g., default, pluss, gold, etc.).
  */
 /*
  * Utilities
@@ -103,250 +104,259 @@
 }
 
 .dnb-payment-card {
+  /*
+   * Define custom CSS variables used throughout the PaymentCard component.
+   * These variables allow for reusable colors, border-radius, and overlay background transitions.
+   */
   --color-dark-cyan: #003b47;
-  --dnb-payment-bg-default: linear-gradient(
-    187.2deg,
-    #008484 6.31%,
-    var(--color-sea-green) 82.66%
-  );
-  --dnb-payment-bg-pluss: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
-  --dnb-payment-bg-white: linear-gradient(
-    184.55deg,
-    var(--color-black-background) 4.63%,
-    var(--color-white) 92.04%
-  );
-  --dnb-payment-bg-gold: linear-gradient(
-    184.55deg,
-    #bfa970 4.63%,
-    #d3bd83 84.57%
-  );
-  --dnb-payment-bg-saga: linear-gradient(
-    187.2deg,
-    #1c1c1c 6.31%,
-    #000 82.66%
-  );
-  --dnb-payment-bg-private: linear-gradient(
-    187.2deg,
-    #1c1c1c 6.31%,
-    #000 82.66%
-  );
-  --dnb-payment-bg-business-no-visa: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
-  --dnb-payment-bg-business-with-visa: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
+  --dnb-payment-bg-default: var(--color-sea-green);
+  --dnb-payment-bg-pluss: var(--color-ocean-green);
+  --dnb-payment-bg-white: var(--color-white);
+  --dnb-payment-bg-gold: #D8C583;
+  --dnb-payment-bg-black-gold: #1F1B10;
+  --dnb-payment-bg-black-grey: #1C1C1E;
+  --dnb-payment-overlay-bg-dark: rgba(0 0 0 / 60%);
+  --dnb-payment-overlay-bg-light: rgba(255 255 255 / 70%);
+  --dnb-payment-border-radius: 12px;
   margin: 0;
+  border-radius: var(--dnb-payment-border-radius);
+  /*
+   * Base styles for the card element including size, padding, color, and shadow.
+   * This serves as the core design for all PaymentCard variations.
+   */
+  /*
+   * Overlay styling used for additional content or status displayed over the card element.
+   * It centers the content and adapts the overlay design
+   * based on the card's background theme (light or dark).
+   */
+  /* Compact mode styling for PaymentCard component
+   * This defines the styles and visual appearance of the card in its compact variant.
+   * The compact variant is designed to be more concise, with reduced height and adjusted layouts.
+   */
 }
 .dnb-payment-card__card {
-  position: relative;
-  width: 343px;
-  height: 216px;
+  width: 100%;
+  height: 100%;
   padding: 16px;
-  border-radius: 12px;
-  border: 1px solid;
-  border-color: rgba(255, 255, 255, 0.1) transparent rgba(255, 255, 255, 0.1) transparent;
+  border-radius: inherit;
   color: var(--color-white);
   box-shadow: var(--shadow-default);
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  -webkit-user-select: none;
+          user-select: none;
+  /*
+   * Design variations for different card types.
+   * Each modifier represents a unique card style and contains
+   * specific background and text color configurations.
+   */
+  /*
+   * Primary container for card content (e.g., numbers, text, holder name).
+   * Ensures content stretches to fit the card while preserving relative positioning.
+   */
+  /* Provider Icons Container
+   * Flex container to house provider logos (e.g., Visa, Mastercard, BankAxept).
+   * Includes a visual separator if two providers are present. */
+}
+.dnb-payment-card__card__wrapper {
+  position: relative;
+  width: 343px;
+  height: 216px;
+  border-radius: inherit;
+  border: 1px solid var(--color-black-8);
+}
+.dnb-payment-card__card__wrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+.dnb-payment-card__card--blocked {
+  opacity: 0.5;
 }
 .dnb-payment-card__card--design-default {
-  background: var(--dnb-payment-bg-default);
+  background-color: var(--dnb-payment-bg-default);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-pluss {
-  background: var(--dnb-payment-bg-pluss);
+  background-color: var(--dnb-payment-bg-pluss);
   color: var(--color-white);
 }
-.dnb-payment-card__card--design-ung {
-  color: var(--color-black-80);
-}
-.dnb-payment-card__card--design-youth {
-  color: var(--color-black-80);
-}
-.dnb-payment-card__card--design-my-first {
-  color: var(--color-black-80);
+.dnb-payment-card__card--design-ung, .dnb-payment-card__card--design-youth, .dnb-payment-card__card--design-my-first {
+  background-color: var(--dnb-payment-bg-white);
+  color: var(--color-black);
 }
 .dnb-payment-card__card--design-gold {
-  background: var(--dnb-payment-bg-gold);
-  color: var(--color-white);
+  background-color: var(--dnb-payment-bg-gold);
+  color: var(--color-black);
 }
 .dnb-payment-card__card--design-saga {
-  background: var(--dnb-payment-bg-saga);
+  background-color: var(--dnb-payment-bg-black-gold);
   color: var(--color-white);
 }
-.dnb-payment-card__card--design-private {
-  background: var(--dnb-payment-bg-private);
+.dnb-payment-card__card--design-saga .provider--separator {
+  color: var(--dnb-payment-bg-gold);
+}
+.dnb-payment-card__card--design-saga-platinum, .dnb-payment-card__card--design-private {
+  background-color: var(--dnb-payment-bg-black-grey);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-black {
-  background: var(--color-black);
+  background-color: var(--color-black);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-business-no-visa {
-  background: var(--dnb-payment-bg-business-no-visa);
+  background-color: var(--dnb-payment-bg-business-no-visa);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-business-with-visa {
-  background: var(--dnb-payment-bg-business-with-visa);
+  background-color: var(--dnb-payment-bg-business-with-visa);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-sbanken-mastercard {
-  background: var(--sb-color-purple);
+  background-color: var(--sb-color-purple);
   color: var(--color-white);
 }
 .dnb-payment-card__card--design-sbanken-visa {
-  background: var(--color-white);
+  background-color: var(--color-white);
   color: var(--sb-color-text);
 }
-.dnb-payment-card__card::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(52.39% 52.39% at 50% 50%, rgba(247, 246, 230, 0.1215686275) 0%, rgba(6, 6, 6, 0) 100%);
-  border-radius: inherit;
-}
-.dnb-payment-card__card--design-sbanken-mastercard::after {
-  background: none;
-}
 .dnb-payment-card__card__content {
   display: flex;
   height: 100%;
   width: 100%;
   position: relative;
 }
-.dnb-payment-card__card__wrapper {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
 .dnb-spacing .dnb-payment-card__card .dnb-p {
   margin-bottom: 0 !important;
 }
-.dnb-payment-card__card__holder {
-  font-weight: var(--font-weight-medium);
-  text-transform: uppercase;
-  text-align: left;
+.dnb-payment-card__card__numbers.dnb-p {
+  font-size: 1.375rem;
+  line-height: 1.143rem;
+  font-weight: var(--font-weight-regular);
 }
-.dnb-payment-card__card__holder.dnb-p {
-  font-size: 0.625rem;
+.dnb-payment-card__card__type-text.dnb-p {
+  font-size: 0.938rem;
+  line-height: 1.188rem;
+  padding-top: 6px;
 }
-.dnb-payment-card__card__numbers {
-  font-size: 1.5rem !important;
-  font-weight: var(--font-weight-medium);
+.dnb-payment-card__card__providers {
+  display: flex;
+  align-items: center;
+  column-gap: 1rem;
 }
-.dnb-payment-card__card__credit-type {
-  position: absolute;
-  bottom: 0;
-  right: 0;
+.dnb-payment-card__card__providers .provider--separator {
+  width: 1px;
+  height: 26px;
+  background-color: currentcolor;
+  transform: scale(0.5, 1);
+}
+.dnb-payment-card__card__top {
+  /*
+   * Normal mode: Card Type Text (Credit / Debit)
+   * Compact mode: Provider Icons
+   */
 }
-.dnb-payment-card__card__bank-logo {
+.dnb-payment-card__card__top__left {
   position: absolute;
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
 }
-.dnb-payment-card__card__product-type {
-  height: 38px;
+.dnb-payment-card__card__top__right {
   position: absolute;
   top: 0;
-  left: 70px;
+  right: 0;
 }
-.dnb-payment-card__card__bank-axept {
-  height: 45px;
+.dnb-payment-card__card__bottom {
+  /*
+   * Normal mode: Card Number
+   * Compact mode: Hidden
+   */
+  /*
+   * Normal mode: Provider Icons
+   * Compact mode: Hidden
+   */
+}
+.dnb-payment-card__card__bottom__left {
   position: absolute;
-  top: 0;
-  right: 0;
+  bottom: 0;
+  left: 0;
 }
-.dnb-payment-card__card__credit {
+.dnb-payment-card__card__bottom__right {
   position: absolute;
-  top: 6px;
+  bottom: 0;
   right: 0;
 }
-.dnb-payment-card__blocking__overlay {
+.dnb-payment-card__overlay {
   position: absolute;
-  left: 0;
   top: 0;
-  right: 0;
-  bottom: 0;
+  width: 100%;
+  height: 100%;
   border-radius: inherit;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(184.55deg, rgba(204, 204, 204, 0.5) 4.63%, rgba(232, 232, 232, 0.5) 84.83%);
 }
-.dnb-payment-card__blocking__overlay svg path {
+.dnb-payment-card__overlay svg {
+  width: 2rem;
+  height: 2rem;
+  shape-rendering: geometricprecision;
+}
+.dnb-payment-card__overlay svg.icon--fill path {
+  fill: currentcolor;
+}
+.dnb-payment-card__overlay svg.icon--stroke path {
   stroke: currentcolor;
 }
-.dnb-payment-card__blocking__center {
+.dnb-payment-card__overlay__content {
+  min-width: 6rem;
+  height: 6rem;
   padding: 1rem;
   display: flex;
-  align-items: center;
-  justify-content: center;
   flex-direction: column;
-  background: var(--color-black-80);
-  color: var(--color-sand-yellow);
-  border-radius: 4px;
+  align-items: center;
+  gap: 0.667rem;
+  border-radius: inherit;
+  font-size: var(--font-size-basis);
+  line-height: var(--line-height-small);
 }
-.dnb-payment-card__blocking svg {
-  shape-rendering: geometricprecision;
+.dnb-payment-card__overlay__content--light {
+  background-color: var(--dnb-payment-overlay-bg-dark);
+  color: var(--color-white);
 }
-.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder {
-  opacity: 1;
+.dnb-payment-card__overlay__content--dark {
+  background-color: var(--dnb-payment-overlay-bg-light);
+  color: var(--color-black);
 }
 .dnb-payment-card--compact .dnb-payment-card__card {
-  padding: 0;
-  height: 32.8mm;
-  border-radius: 12px 12px 0 0;
-  box-shadow: var(--shadow-default);
+  height: 62px;
+  border-radius: var(--dnb-payment-border-radius) var(--dnb-payment-border-radius) 0 0;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__top {
-  position: absolute;
-  top: 4mm;
-  left: 6mm;
-  right: 6mm;
+.dnb-payment-card--compact .dnb-payment-card__card__wrapper {
+  height: auto;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__bottom {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 14mm;
-  background-color: var(--color-white);
+.dnb-payment-card--compact .dnb-payment-card__card__providers {
+  margin-top: 5px;
+  height: 1.375rem;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__wrapper {
-  padding: 6px 22px;
-  color: var(--color-black-80);
+.dnb-payment-card--compact .dnb-payment-card__card__providers div, .dnb-payment-card--compact .dnb-payment-card__card__providers svg {
+  height: 100%;
+  width: auto;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__numbers {
-  font-size: var(--font-size-basis);
+.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple {
+  margin-top: 7px;
+  height: 1rem;
+  column-gap: 0.5rem;
 }
-.dnb-payment-card--compact .dnb-payment-card__card__credit-type {
-  top: 10px;
-  right: 4px;
-  bottom: auto;
+.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple div, .dnb-payment-card--compact .dnb-payment-card__card__providers--multiple svg {
+  vertical-align: top;
 }
-.dnb-payment-card--compact .dnb-payment-card__blocking__center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  height: 100%;
-  width: 100%;
-  gap: var(--spacing-x-small);
-  background: rgba(0, 0, 0, 0.739);
-  border-radius: inherit;
+.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple .provider--separator {
+  width: 1px;
+}
+.dnb-payment-card--compact .dnb-payment-card__overlay__content {
+  display: none;
 }

package/extensions/payment-card/style/dnb-payment-card.min.css

@@ -1 +1 @@
-:root{--sb-font-family-default:"Roboto","Helvetica","Arial",sans-serif;--sb-font-family-heading:"MaisonNeueHeadings","Roboto","Helvetica","Arial",sans-serif;--sb-font-weight-default:normal;--sb-font-weight-basis:normal;--sb-font-weight-regular:normal;--sb-font-weight-medium:500;--sb-font-weight-bold:700;--sb-font-size-x-small:0.75rem;--sb-font-size-small:0.875rem;--sb-font-size-basis:1rem;--sb-font-size-basis--em:1em;--sb-font-size-lead:var(--font-size-medium);--sb-font-size-medium:1.25rem;--sb-font-size-medium--plus:1.625rem;--sb-font-size-large:2rem;--sb-font-size-x-large:2.375rem;--sb-font-size-xx-large:3rem;--sb-line-height-x-small:1.125rem;--sb-line-height-small:1.25rem;--sb-line-height-basis:1.5rem;--sb-line-height-basis--em:1.5em;--sb-line-height-lead:1.75rem;--sb-line-height-medium:2rem;--sb-line-height-large:2.375rem;--sb-line-height-x-large:2.75rem;--sb-line-height-xx-large:3.375rem;--sb-color-black:#000;--sb-color-text:#18172a;--sb-color-gray-dark-3:#3a3a4a;--sb-color-gray-dark-3-neutral:#3e3e4a;--sb-color-gray-dark-2:#4a4a5b;--sb-color-gray-dark-2-neutral:#656472;--sb-color-gray-dark:#666578;--sb-color-gray-dark-neutral:#9494a3;--sb-color-gray:#bbbbce;--sb-color-gray-neutral:#bdbdc6;--sb-color-gray-light:#d9d9e4;--sb-color-gray-light-2:#ebebf2;--sb-color-gray-light-3:#f9f9fd;--sb-color-purple:#1c1b4e;--sb-color-purple-alternative:#222163;--sb-color-green:#92eecd;--sb-color-white:#fff;--sb-color-red:#d8134b;--sb-color-magenta:#ff3c64;--sb-color-orange:#ff5b44;--sb-color-yellow-dark:#f7bf16;--sb-color-yellow:#ffef57;--sb-color-green-dark-3:#00785b;--sb-color-green-dark-2:#1e9f73;--sb-color-violet:#4e08bc;--sb-color-violet-light:#7129e2;--sb-color-blue-dark-2:#044ccc;--sb-color-blue-dark:#005cff;--sb-color-blue:#008eff;--sb-color-orange-light:#ff817b;--sb-color-orange-light-2:#ffd7d5;--sb-color-orange-light-3:#fff0ef;--sb-color-magenta-light:#ffb6d2;--sb-color-magenta-light-2:#ffdbe9;--sb-color-magenta-light-3:#fff5f9;--sb-color-yellow-light:#fff489;--sb-color-yellow-light-2:#fff9c4;--sb-color-yellow-light-3:#fffce5;--sb-color-green-dark:#64d7b4;--sb-color-green-light:#c8f6e5;--sb-color-green-light-2:#e5fff7;--sb-color-violet-light-2:#be99ff;--sb-color-violet-light-3:#e0d0ff;--sb-color-violet-light-4:#f1ebff;--sb-color-blue-light:#61b9ff;--sb-color-blue-light-2:#bfe3ff;--sb-color-blue-light-3:#ebf6ff;--sb-spacing-x-small:0.5rem;--sb-spacing-small:1rem;--sb-spacing-medium:1.5rem;--sb-spacing-large:2rem;--sb-spacing-x-large:3rem;--sb-spacing-xx-large:3.5rem;--sb-layout-small:40em;--sb-layout-medium:60em;--sb-layout-large:72em;--sb-layout-x-large:80em;--sb-layout-xx-large:90em;--sb-shadow-small:0 2px 4px rgba(38,35,66,.12);--sb-shadow-medium:0 5px 20px rgba(38,35,66,.1);--sb-shadow-large:0 5px 20px rgba(38,35,66,.2);--sb-shadow-hover:0 20px 40px rgba(38,35,66,.2);--sb-easing-default:cubic-bezier(0.42,0,0,1)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent;border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-mastercard{background:var(--sb-color-purple);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-visa{background:var(--color-white);color:var(--sb-color-text)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card--design-sbanken-mastercard:after{background:none}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__card__credit{position:absolute;right:0;top:6px}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}
+:root{--sb-font-family-default:"Roboto","Helvetica","Arial",sans-serif;--sb-font-family-heading:"MaisonNeueHeadings","Roboto","Helvetica","Arial",sans-serif;--sb-font-weight-default:normal;--sb-font-weight-basis:normal;--sb-font-weight-regular:normal;--sb-font-weight-medium:500;--sb-font-weight-bold:700;--sb-font-size-x-small:0.75rem;--sb-font-size-small:0.875rem;--sb-font-size-basis:1rem;--sb-font-size-basis--em:1em;--sb-font-size-lead:var(--font-size-medium);--sb-font-size-medium:1.25rem;--sb-font-size-medium--plus:1.625rem;--sb-font-size-large:2rem;--sb-font-size-x-large:2.375rem;--sb-font-size-xx-large:3rem;--sb-line-height-x-small:1.125rem;--sb-line-height-small:1.25rem;--sb-line-height-basis:1.5rem;--sb-line-height-basis--em:1.5em;--sb-line-height-lead:1.75rem;--sb-line-height-medium:2rem;--sb-line-height-large:2.375rem;--sb-line-height-x-large:2.75rem;--sb-line-height-xx-large:3.375rem;--sb-color-black:#000;--sb-color-text:#18172a;--sb-color-gray-dark-3:#3a3a4a;--sb-color-gray-dark-3-neutral:#3e3e4a;--sb-color-gray-dark-2:#4a4a5b;--sb-color-gray-dark-2-neutral:#656472;--sb-color-gray-dark:#666578;--sb-color-gray-dark-neutral:#9494a3;--sb-color-gray:#bbbbce;--sb-color-gray-neutral:#bdbdc6;--sb-color-gray-light:#d9d9e4;--sb-color-gray-light-2:#ebebf2;--sb-color-gray-light-3:#f9f9fd;--sb-color-purple:#1c1b4e;--sb-color-purple-alternative:#222163;--sb-color-green:#92eecd;--sb-color-white:#fff;--sb-color-red:#d8134b;--sb-color-magenta:#ff3c64;--sb-color-orange:#ff5b44;--sb-color-yellow-dark:#f7bf16;--sb-color-yellow:#ffef57;--sb-color-green-dark-3:#00785b;--sb-color-green-dark-2:#1e9f73;--sb-color-violet:#4e08bc;--sb-color-violet-light:#7129e2;--sb-color-blue-dark-2:#044ccc;--sb-color-blue-dark:#005cff;--sb-color-blue:#008eff;--sb-color-orange-light:#ff817b;--sb-color-orange-light-2:#ffd7d5;--sb-color-orange-light-3:#fff0ef;--sb-color-magenta-light:#ffb6d2;--sb-color-magenta-light-2:#ffdbe9;--sb-color-magenta-light-3:#fff5f9;--sb-color-yellow-light:#fff489;--sb-color-yellow-light-2:#fff9c4;--sb-color-yellow-light-3:#fffce5;--sb-color-green-dark:#64d7b4;--sb-color-green-light:#c8f6e5;--sb-color-green-light-2:#e5fff7;--sb-color-violet-light-2:#be99ff;--sb-color-violet-light-3:#e0d0ff;--sb-color-violet-light-4:#f1ebff;--sb-color-blue-light:#61b9ff;--sb-color-blue-light-2:#bfe3ff;--sb-color-blue-light-3:#ebf6ff;--sb-spacing-x-small:0.5rem;--sb-spacing-small:1rem;--sb-spacing-medium:1.5rem;--sb-spacing-large:2rem;--sb-spacing-x-large:3rem;--sb-spacing-xx-large:3.5rem;--sb-layout-small:40em;--sb-layout-medium:60em;--sb-layout-large:72em;--sb-layout-x-large:80em;--sb-layout-xx-large:90em;--sb-shadow-small:0 2px 4px rgba(38,35,66,.12);--sb-shadow-medium:0 5px 20px rgba(38,35,66,.1);--sb-shadow-large:0 5px 20px rgba(38,35,66,.2);--sb-shadow-hover:0 20px 40px rgba(38,35,66,.2);--sb-easing-default:cubic-bezier(0.42,0,0,1)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:var(--color-sea-green);--dnb-payment-bg-pluss:var(--color-ocean-green);--dnb-payment-bg-white:var(--color-white);--dnb-payment-bg-gold:#d8c583;--dnb-payment-bg-black-gold:#1f1b10;--dnb-payment-bg-black-grey:#1c1c1e;--dnb-payment-overlay-bg-dark:rgba(0,0,0,.6);--dnb-payment-overlay-bg-light:hsla(0,0%,100%,.7);--dnb-payment-border-radius:12px;border-radius:var(--dnb-payment-border-radius);margin:0}.dnb-payment-card__card{border-radius:inherit;box-shadow:var(--shadow-default);color:var(--color-white);height:100%;padding:16px;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;-webkit-user-select:none;user-select:none;width:100%}.dnb-payment-card__card__wrapper{border:1px solid var(--color-black-8);border-radius:inherit;height:216px;position:relative;width:343px}.dnb-payment-card__card__wrapper:after{border-radius:inherit;content:"";height:100%;position:absolute;top:0;width:100%}.dnb-payment-card__card--blocked{opacity:.5}.dnb-payment-card__card--design-default{background-color:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background-color:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{background-color:var(--dnb-payment-bg-white);color:var(--color-black)}.dnb-payment-card__card--design-gold{background-color:var(--dnb-payment-bg-gold);color:var(--color-black)}.dnb-payment-card__card--design-saga{background-color:var(--dnb-payment-bg-black-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga .provider--separator{color:var(--dnb-payment-bg-gold)}.dnb-payment-card__card--design-private,.dnb-payment-card__card--design-saga-platinum{background-color:var(--dnb-payment-bg-black-grey);color:var(--color-white)}.dnb-payment-card__card--design-black{background-color:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background-color:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background-color:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-mastercard{background-color:var(--sb-color-purple);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-visa{background-color:var(--color-white);color:var(--sb-color-text)}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__numbers.dnb-p{font-size:1.375rem;font-weight:var(--font-weight-regular);line-height:1.143rem}.dnb-payment-card__card__type-text.dnb-p{font-size:.938rem;line-height:1.188rem;padding-top:6px}.dnb-payment-card__card__providers{align-items:center;column-gap:1rem;display:flex}.dnb-payment-card__card__providers .provider--separator{background-color:currentcolor;height:26px;transform:scaleX(.5);width:1px}.dnb-payment-card__card__top__left{align-items:center;display:flex;left:0;position:absolute;top:0}.dnb-payment-card__card__top__right{position:absolute;right:0;top:0}.dnb-payment-card__card__bottom__left{bottom:0;left:0;position:absolute}.dnb-payment-card__card__bottom__right{bottom:0;position:absolute;right:0}.dnb-payment-card__overlay{align-items:center;border-radius:inherit;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%}.dnb-payment-card__overlay svg{shape-rendering:geometricprecision;height:2rem;width:2rem}.dnb-payment-card__overlay svg.icon--fill path{fill:currentcolor}.dnb-payment-card__overlay svg.icon--stroke path{stroke:currentcolor}.dnb-payment-card__overlay__content{align-items:center;border-radius:inherit;display:flex;flex-direction:column;font-size:var(--font-size-basis);gap:.667rem;height:6rem;line-height:var(--line-height-small);min-width:6rem;padding:1rem}.dnb-payment-card__overlay__content--light{background-color:var(--dnb-payment-overlay-bg-dark);color:var(--color-white)}.dnb-payment-card__overlay__content--dark{background-color:var(--dnb-payment-overlay-bg-light);color:var(--color-black)}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:var(--dnb-payment-border-radius) var(--dnb-payment-border-radius) 0 0;height:62px}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{height:auto}.dnb-payment-card--compact .dnb-payment-card__card__providers{height:1.375rem;margin-top:5px}.dnb-payment-card--compact .dnb-payment-card__card__providers div,.dnb-payment-card--compact .dnb-payment-card__card__providers svg{height:100%;width:auto}.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple{column-gap:.5rem;height:1rem;margin-top:7px}.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple div,.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple svg{vertical-align:top}.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple .provider--separator{width:1px}.dnb-payment-card--compact .dnb-payment-card__overlay__content{display:none}