/* Mozo-tema 1.1.0. Genereret af whmcs-tema/tools/build.php. Ret i whmcs-tema/src eller på mozo.dk, ikke her. */
/* ---- mozo.dk site.css (udvalg) ---- */
@layer reset, tokens, base, layout, components, sections, utilities;
@font-face {font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) h1, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) h2, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) h3, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) h4, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) p, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) ul, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) ol, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) dl, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) dd, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) figure, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) blockquote { margin: 0; }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) ul, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) ol { padding: 0; list-style: none; }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) img, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) svg, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) video { display: block; max-width: 100%; }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) button, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) input, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) textarea, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) select { font: inherit; color: inherit; letter-spacing: inherit; }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) button { cursor: pointer; }
}
@layer tokens {
  :root { color-scheme: light; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --text: #1d1d1f; --text-2: #6e6e73; --text-3: #86868b; --bg: #fff; --bg-2: #f5f5f7; --bg-3: #e8e8ed; --line: #d2d2d7; --blue: #0071e3; --blue-hover: #0076df; --link: #0066cc; --dark: #000; --dark-2: #161617; --dark-3: #1d1d1f; --dark-text: #f5f5f7; --dark-text-2: #86868b; --dark-link: #2997ff; --green: #03a10e; /* Mozos signaturgradient (grafik og udvalgte ord) */ --mozo-1: #0a7cff; --mozo-2: #6b5cf6; --mozo-3: #b45ef3; --mozo-4: #ff5c8a; --grad-mozo: linear-gradient(90deg, var(--mozo-1) 0%, var(--mozo-2) 38%, var(--mozo-3) 68%, var(--mozo-4) 100%); --grad-sky: linear-gradient(135deg, #2b8cff 0%, #6b5cf6 100%); --grad-fresh: linear-gradient(180deg, #5ee08a 0%, #2bc4c4 100%); --gutter: 22px; --content: 980px; --wide: 1260px; --tile-h: 580px; --promo-h: 580px; --radius-card: 18px; --radius-tile: 28px; --ease: cubic-bezier(.4, 0, .6, 1); --ease-out: cubic-bezier(0, 0, .5, 1); --ease-spring: cubic-bezier(.25, .1, .25, 1); }
  @media (min-width: 1069px) and (min-height: 776px) {
    :root { --tile-h: 692px; }
  }
  @media (max-width: 1068px) {
    :root { --tile-h: 570px; --promo-h: 490px; }
  }
  @media (min-width: 735px) and (max-width: 1068px) and (min-height: 734px) {
    :root { --tile-h: 650px; }
  }
  @media (max-width: 734px) {
    :root { --tile-h: 500px; --promo-h: 500px; --gutter: 6.25vw; }
  }
}
@layer base {
  html { background: var(--bg); scroll-padding-top: 64px; }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -.022em; font-synthesis: none; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: var(--link); text-decoration: none; }
  a:hover { text-decoration: underline; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
  ::selection { background: rgba(0, 113, 227, .2); }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip { position: fixed; top: 6px; left: 6px; z-index: 300; padding: 9px 15px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 14px; transform: translateY(-160%); transition: transform .2s var(--ease); }
  .skip:focus { transform: none; text-decoration: none; }
  .i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
}
@layer layout {
  .wrap { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .wrap--wide { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
  @media (max-width: 1068px) {
    .wrap { width: min(692px, 100% - 2 * var(--gutter)); }
  }
}
@layer components {
  .t-super { font-family: var(--font-display); font-size: 80px; line-height: 1.05; font-weight: 700; letter-spacing: -.015em; }
  .t-section { font-family: var(--font-display); font-size: 56px; line-height: 1.0714; font-weight: 700; letter-spacing: -.005em; }
  .t-headline { font-family: var(--font-display); font-size: 48px; line-height: 1.0835; font-weight: 600; letter-spacing: -.003em; }
  .t-tile { font-family: var(--font-display); font-size: 56px; line-height: 1.0714; font-weight: 600; letter-spacing: -.005em; }
  .t-tile-sub { font-family: var(--font-display); font-size: 28px; line-height: 1.1428; font-weight: 400; letter-spacing: .007em; }
  .t-promo { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0; }
  .t-promo-sub { font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 400; letter-spacing: .011em; }
  .t-eyebrow { font-family: var(--font-display); font-size: 28px; line-height: 1.1428; font-weight: 600; letter-spacing: .007em; }
  .t-intro { font-family: var(--font-display); font-size: 21px; line-height: 1.381; font-weight: 600; letter-spacing: .011em; color: var(--text-2); }
  .t-intro strong, .t-copy strong { color: var(--text); font-weight: 600; }
  .t-copy { font-family: var(--font-display); font-size: 19px; line-height: 1.4211; font-weight: 600; letter-spacing: .012em; color: var(--text-2); }
  .t-body { font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; }
  .t-small { font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  .t-caption { font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; }
  .grad { background: var(--grad-mozo); -webkit-background-clip: text; background-clip: text; color: transparent; }
  @media (max-width: 1068px) {
    .t-super { font-size: 64px; line-height: 1.0625; letter-spacing: -.009em; }
    .t-section { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; }
    .t-headline { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
    .t-tile { font-size: 48px; line-height: 1.0835; letter-spacing: -.002em; }
    .t-tile-sub { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; }
    .t-promo { font-size: 32px; line-height: 1.125; letter-spacing: .002em; }
    .t-promo-sub { font-size: 19px; line-height: 1.2105; letter-spacing: .012em; }
    .t-eyebrow { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; }
    .t-intro { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .t-copy { font-size: 17px; line-height: 1.4118; letter-spacing: -.022em; }
  }
  @media (max-width: 734px) {
    .t-super { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; }
    .t-section { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .t-headline { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .t-tile { font-size: 32px; line-height: 1.125; letter-spacing: .002em; }
    .t-tile-sub { font-size: 19px; line-height: 1.2105; letter-spacing: .012em; }
    .t-promo { font-size: 28px; line-height: 1.1428; letter-spacing: .007em; }
    .t-eyebrow { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; }
  }
  .btn { position: relative; display: inline-block; min-width: 28px; padding: 8px 15px; border: 1px solid var(--blue); border-radius: 980px; background: var(--blue); color: #fff; font-family: var(--font); font-size: 14px; line-height: 1.2857; font-weight: 400; letter-spacing: -.016em; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
  .btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); text-decoration: none; }
  .btn--lg { padding: 11px 21px; font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; }
  .btn--xs { padding: 3px 10px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; }
  .btn--secondary { background: transparent; color: var(--link); border-color: var(--link); }
  .btn--secondary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
  .btn--block { display: block; width: 100%; }
  .btn[disabled] { opacity: .42; pointer-events: none; }
  .theme-dark .btn--secondary { color: var(--dark-link); border-color: var(--dark-link); }
  .theme-dark .btn--secondary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
  .ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 17px; margin-top: 17px; }
  .ctas--start { justify-content: flex-start; }
  .more { display: inline-flex; align-items: baseline; gap: .15em; color: var(--link); }
  .more::after { content: ""; width: .52em; height: .52em; margin-left: .12em; border: solid currentColor; border-width: .1em .1em 0 0; transform: translateY(-.12em) rotate(45deg); }
  .theme-dark .more { color: var(--dark-link); }
  .seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--bg-3); isolation: isolate; }
  .seg button { position: relative; z-index: 1; min-height: 32px; padding: 0 18px; border: 0; border-radius: 7px; background: none; color: var(--text); font-size: 14px; letter-spacing: -.016em; white-space: nowrap; }
  .seg__thumb { position: absolute; z-index: 0; inset: 2px auto 2px 2px; width: calc(50% - 2px); border-radius: 7px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); transform: translateX(calc(var(--seg, 0) * 100%)); transition: transform .35s var(--ease); }
  .seg__save { margin-left: 4px; color: var(--green); font-weight: 600; }
}
@layer components {
  .gn { position: relative; z-index: 100; height: 44px; }
  .gn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(250, 250, 252, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .gn__in { display: flex; align-items: center; height: 100%; width: min(var(--wide), 100% - 2 * var(--gutter)); margin: 0 auto; }
  .gn__logo { display: flex; align-items: center; height: 44px; padding-right: 8px; color: var(--text); flex: none; }
  .gn__logo .logo { width: auto; height: 16px; }
  .gn__logo:hover { text-decoration: none; }
  .gn__menu { flex: 1; }
  .gn__list { display: flex; justify-content: center; gap: 0 26px; margin: 0 24px; }
  .gn__list a { display: block; padding: 0 8px; color: rgba(0, 0, 0, .8); font-size: 12px; line-height: 44px; letter-spacing: -.01em; transition: color .3s var(--ease); }
  .gn__list a:hover, .gn__list a[aria-current="page"] { color: #000; text-decoration: none; }
  .gn__extra { display: none; }
  .gn__icons { display: flex; align-items: center; gap: 6px; flex: none; }
  .gn__icon { display: grid; place-items: center; width: 32px; height: 44px; color: rgba(0, 0, 0, .8); }
  .gn__icon:hover { color: #000; }
  .gn__icon .i { width: 20px; height: 20px; stroke-width: 1.2; }
  .gn__toggle { display: none; }
  .gn--dark::before { background: rgba(22, 22, 23, .8); }
  .gn--dark .gn__logo, .gn--dark .gn__list a, .gn--dark .gn__icon { color: rgba(255, 255, 255, .8); }
  .gn--dark .gn__list a:hover, .gn--dark .gn__icon:hover { color: #fff; }
  @media (max-width: 833px) {
    .gn { height: 48px; }
    .gn__in { justify-content: space-between; }
    .gn__logo .logo { height: 16px; }
    .gn__toggle { position: relative; display: block; width: 44px; height: 48px; margin-right: -12px; border: 0; background: none; }
    .gn__toggle span { position: absolute; left: 14px; width: 17px; height: 1.2px; border-radius: 1px; background: var(--text); transition: transform .32s var(--ease), top .32s var(--ease); }
    .gn__toggle span:first-child { top: 20px; }
    .gn__toggle span:last-child { top: 27px; }
    .menu-open .gn__toggle span:first-child { top: 23.5px; transform: rotate(45deg); }
    .menu-open .gn__toggle span:last-child { top: 23.5px; transform: rotate(-45deg); }
    .gn__icon { height: 48px; }
    .gn__icon .i { width: 23px; height: 23px; stroke-width: 1.15; }
    .gn__menu { position: fixed; inset: 48px 0 0; z-index: 99; padding: 22px 48px 48px; overflow-y: auto; background: #fff; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s .3s; }
    .gn__list { display: block; margin: 0; }
    .gn__list li { opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
    .gn__list a { padding: 6px 0; color: var(--text); font-family: var(--font-display); font-size: 28px; line-height: 1.1428; font-weight: 600; letter-spacing: .007em; }
    .gn__extra { display: block; margin-top: 28px; }
    .gn__extra li { opacity: 0; transition: opacity .3s var(--ease); }
    .gn__extra a { display: block; padding: 5px 0; color: var(--text-2); font-size: 17px; }
    .menu-open .gn::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .menu-open .gn__menu { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
    .menu-open .gn__list li, .menu-open .gn__extra li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 25ms + 60ms); }
    .menu-open body { overflow: hidden; }
  }
  .ribbon { padding: 15px var(--gutter) 14px; background: var(--bg); text-align: center; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  .ribbon a { white-space: nowrap; }
  .ln { position: sticky; top: 0; z-index: 90; height: 52px; }
  .ln::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .16); }
  .ln__in { display: flex; align-items: center; gap: 22px; height: 100%; width: min(var(--wide), 100% - 2 * var(--gutter)); margin: 0 auto; }
  .ln__title { margin-right: auto; color: var(--text); font-family: var(--font-display); font-size: 21px; line-height: 1.1428; font-weight: 600; letter-spacing: .011em; white-space: nowrap; }
  .ln__title:hover { text-decoration: none; }
  .ln__links { display: flex; gap: 22px; }
  .ln__links a { color: var(--text); font-size: 12px; letter-spacing: -.01em; opacity: .88; }
  .ln__links a:hover { color: var(--link); opacity: 1; text-decoration: none; }
  @media (max-width: 734px) {
    .ln { height: 48px; }
    .ln__links { display: none; }
    .ln__title { font-size: 19px; }
  }
}
@layer sections {
  @keyframes note-rise {from { opacity: 0; transform: translateY(40px) scale(.94); }}
  @media (max-width: 734px) {
    .ctas { gap: 12px 14px; margin-top: 12px; }
  }
}
@layer sections {
  @keyframes caret {50% { opacity: 0; }}
  .spot { width: min(700px, 100%); text-align: left; }
  .spot__field { display: flex; align-items: center; gap: 14px; height: 76px; padding: 0 10px 0 26px; border-radius: 20px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 12px 40px -8px rgba(0, 0, 0, .16); transition: box-shadow .25s var(--ease); }
  .spot__field:focus-within { box-shadow: 0 0 0 4px rgba(0, 113, 227, .22), 0 12px 40px -8px rgba(0, 0, 0, .16); }
  .spot__icon { width: 26px; height: 26px; color: var(--text-3); stroke-width: 2; }
  .spot input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: .007em; }
  .spot input::placeholder { color: #aeaeb2; }
  .spot .btn { flex: none; }
  .tlds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
  .tlds li { display: flex; align-items: baseline; gap: 7px; padding: 9px 16px; border-radius: 980px; background: #fff; font-size: 14px; letter-spacing: -.016em; color: var(--text-2); }
  .tlds strong { color: var(--text); font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
  @media (max-width: 734px) {
    .spot__field { height: 60px; padding: 0 7px 0 18px; border-radius: 16px; gap: 10px; }
    .spot__icon { width: 20px; height: 20px; }
    .spot input { font-size: 19px; }
  }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 980px; background: #fff; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.016em; }
  .status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
  .status--open .status__dot { background: #30d158; box-shadow: 0 0 0 4px rgba(48, 209, 88, .2); }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .theme-dark .status { background: var(--dark-3); color: var(--dark-text); }
}
@layer components {
  .gf { background: var(--bg-2); color: var(--text-2); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; }
  .gf__in { width: min(var(--wide), 100% - 2 * var(--gutter)); margin: 0 auto; }
  .gf a { color: #424245; }
  .gf a:hover { color: var(--text); text-decoration: underline; }
  .gf__notes { padding: 17px 0 11px; border-bottom: 1px solid var(--line); }
  .gf__notes p + p { margin-top: 8px; }
  .gf__crumbs { display: flex; align-items: center; gap: 9px; padding-top: 17px; }
  .gf__crumbs .logo { height: 14px; width: auto; color: var(--text); }
  .gf__crumbs .i { width: 9px; height: 9px; color: var(--text-3); stroke-width: 2.4; }
  .gf__crumbs span { color: var(--text); }
  .gf__dir { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 20px 0 6px; }
  .gf__dir h3 { margin-bottom: 9px; color: var(--text); font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
  .gf__dir li { margin-bottom: 8px; }
  .gf__legal { padding: 16px 0 22px; }
  .gf__more { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .gf__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; padding-top: 10px; }
  .gf__bar ul { display: flex; flex-wrap: wrap; }
  .gf__bar li + li { margin-left: 7px; padding-left: 8px; border-left: 1px solid var(--line); }
  .gf__locale { margin-left: auto; }
  @media (max-width: 833px) {
    .gf__dir { grid-template-columns: repeat(2, 1fr); }
    .gf__locale { margin-left: 0; }
  }
  @media (max-width: 480px) {
    .gf__dir { grid-template-columns: 1fr; gap: 4px; }
  }
}
@layer utilities {
  .reveal { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
  .reveal-pending { opacity: 0; transform: translateY(24px); }
  @view-transition {navigation: auto;}
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
    .reveal-pending { opacity: 1; transform: none; }
  }
  @media print {
    .gn, .ln, .gf, .skip, .ribbon { display: none !important; }
    .reveal-pending { opacity: 1 !important; transform: none !important; }
  }
}
@layer sections {
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .price { display: flex; flex-direction: column; gap: 2px; }
  .price__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
  .price__from { color: var(--text-2); font-size: 14px; }
  .price__amount { font-family: var(--font-display); font-size: 24px; line-height: 1.1667; font-weight: 600; letter-spacing: .009em; font-variant-numeric: tabular-nums; transition: opacity .18s var(--ease); }
  .price__period { color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .price__note { color: var(--text-2); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; transition: opacity .18s var(--ease); }
  .price--m .price__amount { font-size: 21px; }
  .price--quote .price__amount { font-size: 17px; }
  .is-swapping .price__amount, .is-swapping .price__note { opacity: 0; }
  @keyframes fadein {from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; }}
  .results { margin-top: 18px; overflow: hidden; border-radius: var(--radius-card); background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 12px 40px -8px rgba(0, 0, 0, .14); text-align: left; }
  .results li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 14px 16px 14px 22px; border-bottom: 1px solid rgba(0, 0, 0, .07); animation: fadein .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .results li:last-child { border-bottom: 0; }
  .results__domain { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
  .results__status { margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
  .results__status--available { color: var(--green); }
  .results__status--taken { color: var(--text-2); }
  .results__status--unknown, .results__status--unsupported { color: #b64400; }
  .results__price { color: var(--text-2); font-size: 14px; white-space: nowrap; }
  .results__more { display: block !important; padding: 14px 22px !important; background: var(--bg-2); font-size: 14px; }
  .results__msg { padding: 18px 22px; color: var(--text-2); font-size: 14px; }
  @media (max-width: 560px) {
    .results li { grid-template-columns: 1fr auto; }
    .results__price { grid-column: 1; grid-row: 2; }
  }
  .bars { display: grid; gap: 14px; width: min(760px, 100%); text-align: left; }
  .bars__row { display: grid; grid-template-columns: 178px 1fr; align-items: center; gap: 18px; }
  .bars__label { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
  .bars__label small { display: block; color: var(--text-2); font-size: 14px; font-weight: 400; letter-spacing: -.016em; }
  .bars__track { position: relative; height: 44px; border-radius: 12px; background: var(--bg-3); overflow: hidden; }
  .bars__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 12px; background: var(--grad-mozo); background-size: calc(10000% / var(--v)) 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 16px; color: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; transition: width 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--n, 0) * 110ms); }
  .js .bars.is-pending .bars__fill { width: 0; }
  @media (max-width: 734px) {
    .bars__row { grid-template-columns: 1fr; gap: 8px; }
    .bars__track { height: 38px; }
  }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .form { position: relative; display: grid; gap: 14px; }
  .form__topics { margin: 0 0 8px; padding: 0; border: 0; }
  .form__topics legend { margin-bottom: 12px; font-size: 17px; font-weight: 600; }
  .pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .pill { position: relative; }
  .pill input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .pill span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 17px; border-radius: 980px; background: var(--bg-2); cursor: pointer; font-size: 14px; letter-spacing: -.016em; transition: background-color .2s var(--ease), color .2s var(--ease); }
  .pill span:hover { background: var(--bg-3); }
  .pill input:checked + span { background: var(--text); color: #fff; }
  .pill input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 600px) {
    .form__row { grid-template-columns: 1fr; }
  }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field { position: relative; }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field input, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field textarea { display: block; width: 100%; height: 56px; padding: 22px 16px 6px; border: 1px solid #86868b; border-radius: 12px; background: #fff; font-size: 17px; outline: 0; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field textarea { height: auto; min-height: 168px; padding-top: 28px; resize: vertical; line-height: 1.47059; }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field label { position: absolute; left: 17px; top: 17px; color: var(--text-2); font-size: 17px; pointer-events: none; transform-origin: 0 0; transition: transform .2s var(--ease); }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field label span { color: var(--text-3); }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field input:focus, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field input:focus + label, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field input:not(:placeholder-shown) + label, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field textarea:focus + label, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.705); }
  :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field.is-invalid input, :where(.gn, .ln, .gf, .mz, .acct, .ribbon, .mz-cart) .field.is-invalid textarea { border-color: #e30000; background: #fff2f4; }
  .field__error { margin-top: 6px; color: #e30000; font-size: 12px; }
  .field__error:empty { display: none; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 8px; }
  .form__foot .t-caption { max-width: 360px; color: var(--text-2); }
  .form__foot .t-caption a { color: inherit; text-decoration: underline; }
  .form__status { color: #e30000; font-size: 14px; }
  .form__status:empty { display: none; }
  [data-submit] { position: relative; }
  [data-submit].is-loading { pointer-events: none; color: transparent; }
  [data-submit].is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: rot .8s linear infinite; }
  @keyframes rot {to { transform: rotate(360deg); }}
  .form__done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: #fff; text-align: center; animation: fadein .5s var(--ease-out); }
  .form__done[hidden] { display: none; }
  .form__done h3 { font-size: 28px; letter-spacing: .007em; }
  .form__done p { color: var(--text-2); }
  .quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
  .quick a { display: inline-block; padding: 8px 16px; border-radius: 980px; background: var(--bg-2); color: var(--text); font-size: 14px; }
  .quick a:hover { background: var(--bg-3); text-decoration: none; }
}
@layer sections {
  @property --fx-a {syntax: '<angle>'; inherits: false; initial-value: 0deg;}
  @keyframes fx-spin {to { --fx-a: 360deg; }}
  @keyframes fx-ripple {0% { scale: .22; opacity: 0; } 12% { opacity: .85; } 100% { scale: 1; opacity: 0; }}
  .status--open .status__dot { position: relative; }
  .status--open .status__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #30d158; animation: fx-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
  @keyframes fx-ping {70%, 100% { transform: scale(3); opacity: 0; }}
  @media (prefers-reduced-motion: reduce) {
    .status__dot::after { animation: none !important; }
    .status__dot::after { display: none; }
  }
  .fx-still .status__dot::after { animation: none !important; }
  .fx-still .status__dot::after { display: none; }
}
/* ---- src/css/mozo-client.css ---- */
/* ==========================================================================
   Mozo – kundeområdet på client.mozo.dk (tema, fase 4)
   Bygger på mozo.dk's site.css (brand/css/site.css): tokens, typografi, knapper, .seg,
   .field, .pills, .status, .bars, .price, .quick, .ribbon, .gn, .ln og .gf.
   Her står kun det, kundeområdet har brug for ud over mozo.dk. Samme farver, skala og
   radier. Nye klasser har præfikset mz-, så de ikke støder sammen med Bootstrap og WHMCS.
   ========================================================================== */

@layer components {
  /* ---------- Global navigation: konto og kurv (tilstanden kommer fra WHMCS) ---------- */
  .gn__icon { position: relative; }
  .gn__avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: #fff;
    font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: 0; }
  .gn__count { position: absolute; top: 50%; left: 50%; min-width: 15px; height: 15px; margin: 0 0 0 2px; padding: 0 4px; border-radius: 980px;
    background: var(--text); color: #fff; font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; }

  /* Kontomenu under personikonet (som kurv-panelet på apple.com) */
  .acct { position: absolute; top: 100%; right: max(var(--gutter), (100% - var(--wide)) / 2); width: 320px; padding: 24px 28px 20px;
    border-radius: 0 0 var(--radius-card) var(--radius-card); background: #fafafc;
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .08); }
  .acct[hidden] { display: none; }
  .acct__name { font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; }
  .acct__org { margin-top: 2px; color: var(--text-2); font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  .acct__links { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
  .acct__links a { display: flex; align-items: center; gap: 12px; padding: 7px 0; color: var(--text); font-size: 14px; letter-spacing: -.016em; }
  .acct__links a:hover { color: var(--link); text-decoration: none; }
  .acct__links .i { width: 16px; height: 16px; color: var(--text-2); }
  .acct__foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; letter-spacing: -.016em; }
  @media (max-width: 833px) { .acct { left: 0; right: 0; width: auto; padding: 24px var(--gutter) 28px; border-radius: 0; } }

  /* ---------- Lokal navigation: aktuel side og menu på mobil ---------- */
  .ln__links a[aria-current="page"] { opacity: 1; font-weight: 600; }
  .ln__links a[aria-current="page"]:hover { color: var(--text); }
  .ln__toggle { display: none; }
  @media (max-width: 734px) {
    .ln__in { gap: 14px; }
    .ln__toggle { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -8px; padding: 0; border: 0; background: none; color: var(--text); }
    .ln__toggle .i { width: 13px; height: 13px; stroke-width: 2.2; transition: transform .3s var(--ease); }
    .ln.is-open .ln__toggle .i { transform: rotate(180deg); }
    .ln.is-open .ln__links { position: absolute; top: 100%; left: 0; right: 0; display: block; padding: 6px var(--gutter) 14px;
      background: var(--bg); border-bottom: 1px solid rgba(0, 0, 0, .16); box-shadow: 0 20px 32px -20px rgba(0, 0, 0, .22); }
    .ln.is-open .ln__links li + li { border-top: 1px solid rgba(0, 0, 0, .08); }
    .ln.is-open .ln__links a { display: block; padding: 12px 0; font-size: 17px; letter-spacing: -.022em; opacity: 1; }
  }

  /* ---------- Produktikoner: afrundet firkant i betydningsfarven med hvidt stregikon ----------
     Farverne er beskedikonernes (.note--web/-m365/-backup i site.css). Lilla følger samme
     regel (20 % lysere top). Sikkerhed er skjoldets gradient fra templates/partials/v3/shield.php. */
  .mz-icon { --tone: var(--text-2); display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--tone); color: #fff; }
  .mz-icon .i { width: 22px; height: 22px; stroke-width: 1.9; }
  .mz-icon--lg { width: 56px; height: 56px; border-radius: 14px; }
  .mz-icon--lg .i { width: 30px; height: 30px; stroke-width: 1.8; }
  .mz-icon--sm { width: 32px; height: 32px; border-radius: 8px; }
  .mz-icon--sm .i { width: 18px; height: 18px; stroke-width: 2; }
  .mz-icon--web { --tone: linear-gradient(180deg, #3d97ff, #0a7cff); }
  .mz-icon--m365 { --tone: linear-gradient(180deg, #887bf9, #6b5cf6); }
  .mz-icon--mozo { --tone: linear-gradient(180deg, #c37ef5, #b45ef3); }
  .mz-icon--backup { --tone: linear-gradient(180deg, #ff7fa3, #ff5c8a); }
  .mz-icon--secure { --tone: linear-gradient(160deg, #62e58d 0%, #2fc7b6 55%, #2a9ee6 100%); }
  .mz-icon--open { --tone: linear-gradient(180deg, #a1a1a6, #86868b); }

  /* ---------- Status: prik i fast farve + tekst (betydningen står altid i teksten) ---------- */
  .mz-state { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; white-space: nowrap; }
  .mz-state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--state, var(--text-3)); }
  .mz-state--ok { --state: var(--green); }   /* Aktiv, Betalt */
  .mz-state--wait { --state: var(--blue); }  /* Afventer, Åben, I gang */
  .mz-state--due { --state: #b64400; }       /* Ubetalt, Udløber snart, Besvaret */
  .mz-state--bad { --state: #e30000; }       /* Forfalden, Suspenderet */
  .mz-state--off { --state: var(--text-3); } /* Annulleret, Opsagt, Lukket, Udløbet */
  .status .mz-state { font-weight: 600; }

  /* ---------- Formularer: det, mozo.dk's kontaktformular ikke har ---------- */
  .field select { display: block; width: 100%; height: 56px; padding: 22px 44px 6px 16px; border: 1px solid #86868b; border-radius: 12px; outline: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 14px;
    font-size: 17px; appearance: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
  .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
  .field select + label { transform: translateY(-10px) scale(.705); }
  .field__hint { margin-top: 6px; color: var(--text-2); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; }
  .field__side { position: absolute; right: 14px; top: 17px; font-size: 14px; letter-spacing: -.016em; }
  .mz-check { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; cursor: pointer; }
  .mz-check input { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin: -1px 0 0; border: 1px solid #86868b; border-radius: 6px; background: #fff; appearance: none; cursor: pointer; }
  .mz-check input:checked { border-color: var(--blue); background: var(--blue); }
  .mz-check input:checked::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .mz-check input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .mz-check a { text-decoration: underline; }

  /* .seg med tre valg (mozo.dk's periodevælger har to) */
  .seg--3 .seg__thumb { width: calc((100% - 4px) / 3); }

  /* Formularer i én kolonne */
  .mz-form__fields { display: grid; gap: 14px; max-width: 640px; margin-top: 28px; }
  .mz-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

  /* Valg som store felter (emner, domæne, betalingsmetode) */
  .mz-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
  .mz-choices--rows { grid-template-columns: 1fr; }
  .mz-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 734px) {
    .mz-choices--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mz-choices--stack { grid-template-columns: 1fr; }
    .mz-choices--stack .mz-choice__box { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 76px; }
  }
  .mz-choice { position: relative; display: block; }
  .mz-choice input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .mz-choice__box { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; height: 100%; min-height: 128px; padding: 18px 20px;
    border: 1px solid transparent; border-radius: var(--radius-card); background: var(--bg-2); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
  .mz-choice__box:hover { background: var(--bg-3); }
  .mz-choice__label { font-size: 17px; line-height: 1.23; font-weight: 600; letter-spacing: -.022em; }
  .mz-choice__text { display: block; margin-top: 2px; color: var(--text-2); font-size: 14px; font-weight: 400; letter-spacing: -.016em; }
  .mz-choices--rows .mz-choice__box { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 76px; }
  .mz-choice input:checked + .mz-choice__box { border: 2px solid var(--blue); padding: 17px 19px; background: #fff; }
  .mz-choice input:focus-visible + .mz-choice__box { outline: 2px solid var(--blue); outline-offset: 3px; }
}

@layer sections {
  /* ---------- Siden ---------- */
  .mz { padding-block: 56px 120px; }
  .mz-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 14px; letter-spacing: -.016em; }
  .mz-back .i { width: 10px; height: 10px; stroke-width: 2.4; }
  .mz-head .t-intro { max-width: 36em; margin-top: 14px; }
  .mz-head > .status { margin-bottom: 16px; }
  .mz-head .ctas { margin-top: 26px; }
  .mz-head__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; color: var(--text-2); font-size: 17px; letter-spacing: -.022em; }
  .mz-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .mz-title { display: flex; align-items: center; gap: 22px; }
  .mz-sec { margin-top: 64px; }
  .mz-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; }
  .mz-sec__head .more { font-size: 17px; }
  .mz-sec__note { margin-top: 14px; color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .mz-endnote { color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .mz-h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; }
  @media (max-width: 734px) {
    .mz { padding-block: 32px 80px; }
    .mz-sec { margin-top: 48px; }
    .mz-sec__head { margin-bottom: 16px; }
    .mz-title { flex-direction: column; align-items: flex-start; gap: 16px; }
  }

  /* ---------- Paneler og lister ---------- */
  .mz-panel { border-radius: var(--radius-card); background: var(--bg-2); }
  .mz-panel--pad { padding: 28px 30px; }
  .mz-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 18px 24px; }
  .mz-list > li + li { border-top: 1px solid rgba(0, 0, 0, .08); }
  .mz-row__title { font-weight: 600; overflow-wrap: anywhere; }
  .mz-row__title a { color: inherit; }
  .mz-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 2px; color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .mz-row__end { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
  .mz-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (max-width: 734px) {
    .mz-list > li { padding: 16px 18px; column-gap: 14px; }
    .mz-list--stack > li { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
    .mz-list--stack .mz-row__end { grid-column: 2; justify-content: flex-start; }
  }

  .mz-unread { color: var(--blue); }
  .mz-list > li[hidden] { display: none; }

  /* Domæner: afkrydsning i rækken og massehandlinger nederst */
  .mz-pick { display: inline-flex; margin-right: 10px; vertical-align: -4px; }
  .mz-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
  .mz-bulk__label { color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .mz-bulk__btns { display: flex; flex-wrap: wrap; gap: 10px; }

  /* Fakturaer: kolonner på desktop, kort på mobil */
  .mz-inv > li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto 128px 92px; }
  .mz-inv .mz-num { text-align: right; }
  .mz-inv__act { justify-self: end; }
  @media (max-width: 734px) {
    .mz-inv > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
    .mz-inv__date { display: none; }
    .mz-inv .mz-state { grid-column: 1; }
    .mz-inv__act { grid-column: 2; grid-row: 2; }
  }

  /* ---------- Produktkort ---------- */
  .mz-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .mz-card { display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 26px; border-radius: var(--radius-card); background: var(--bg-2); }
  .mz-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mz-card__name { margin-top: 18px; font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; overflow-wrap: anywhere; }
  .mz-card__sub { margin-top: 4px; color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .mz-card__meta { margin-top: 14px; color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .mz-card__meta strong { color: var(--text); font-weight: 400; }
  .mz-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 22px; }
  @media (max-width: 734px) { .mz-cards { grid-template-columns: 1fr; gap: 14px; } .mz-card { padding: 24px 22px 22px; } }

  /* Variant B af oversigten: mozo.dk's bento-fliser i lavere udgave */
  .mz-bento { margin-top: 0; }
  .mz-bento .bento__tile { justify-content: space-between; gap: 14px; min-height: 236px; padding: 28px 30px 30px; }
  .mz-bento__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mz-bento .t-copy { margin-top: 0; }
  @media (max-width: 734px) { .mz-bento .bento__tile { min-height: 0; padding: 24px 22px 26px; } }

  /* Genveje (.quick fra mozo.dk's 404-side, venstrestillet og med ikon) */
  .quick--start { justify-content: flex-start; margin-top: 0; }
  .quick a { display: inline-flex; align-items: center; gap: 8px; }
  .quick .i { width: 15px; height: 15px; color: var(--text-2); }

  /* ---------- Detaljer (nøgle og værdi) ---------- */
  .mz-kv > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 4px 20px; padding: 16px 24px; }
  .mz-kv > div + div { border-top: 1px solid rgba(0, 0, 0, .08); }
  .mz-kv dt { color: var(--text-2); font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: -.016em; }
  .mz-kv dd { margin: 0; }
  .mz-kv dd small { display: block; color: var(--text-2); font-size: 12px; letter-spacing: -.01em; }
  @media (max-width: 734px) { .mz-kv > div { grid-template-columns: 1fr; padding: 14px 18px; } }

  /* Produktside: beskeder under overskriften, knapper under en sektion, modulets eget indhold */
  .mz-notes { display: grid; gap: 12px; margin-top: 32px; }
  .mz-notes .alert { margin: 0; }
  .mz-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
  .mz-sec__ctas { margin-top: 16px; }
  .module-client-area { text-align: center; }
  .module-client-area:empty { display: none; }
  .mz-pwform { display: grid; gap: 4px; max-width: 520px; }
  .mz-pwform .ctas { margin-top: 10px; }
  .mz-head__eyebrow .label.status { font-size: 17px; letter-spacing: -.022em; }

  /* Forbrug: mozo.dk's søjler (.bars) i et panel */
  .mz-panel .bars { width: 100%; padding: 26px 28px; }
  .mz-panel .bars__row { grid-template-columns: 150px 1fr; }
  @media (max-width: 734px) { .mz-panel .bars { padding: 22px 18px; } .mz-panel .bars__row { grid-template-columns: 1fr; } }

  /* ---------- Beløb (fakturaen) ---------- */
  .mz-summary__lines { display: grid; gap: 10px; margin-top: 18px; font-size: 14px; letter-spacing: -.016em; }
  .mz-summary__lines div { display: flex; justify-content: space-between; gap: 16px; }
  .mz-summary__lines dt { color: var(--text-2); }
  .mz-summary__lines dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mz-totals { width: min(340px, 100%); margin: 18px 0 0 auto; padding-inline: 24px; }
  .mz-totals__sum { padding-top: 12px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 600; }
  .mz-totals__sum dt { color: var(--text); }

  /* ---------- Tråd (supportsag) ---------- */
  .mz-thread { display: grid; gap: 14px; }
  .mz-msg { padding: 22px 26px 24px; border-radius: 20px; background: var(--bg-2); }
  .mz-msg--me { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .mz-msg__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .mz-msg__who { display: grid; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  .mz-msg__who strong { font-weight: 600; }
  .mz-msg__who span { color: var(--text-2); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; }
  .mz-msg__body { max-width: 40em; }
  .mz-msg__body p + p { margin-top: 12px; }
  .mz-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0; }
  .mz-avatar--mozo { background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
  .mz-avatar--mozo svg { width: 24px; height: auto; }
  .mz-reply { margin-top: 28px; }
  .mz-reply .form__foot { margin-top: 14px; }
  .mz-reply__form { max-width: none; margin-top: 18px; }
  .mz-msg__ip { margin-top: 12px; color: var(--text-2); font-size: 12px; }
  .mz-msg__files { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .08); }
  .mz-msg__fileshead { margin-bottom: 10px; color: var(--text-2); font-size: 14px; }
  .mz-msg__rating { margin-top: 14px; }
  .mz-file { display: inline-block; padding: 8px 16px; border-radius: 980px; background: var(--bg-3); color: var(--text-2); font-size: 14px; }
  .mz-msg .quick a { background: #fff; }
  .mz-msg--me .quick a { background: var(--bg-2); }

  /* Formularfelter fra WHMCS (editor, vedhæftninger, prioritet) i Mozos én-kolonne-formular */
  .mz-label { display: block; margin-bottom: 8px; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.016em; }
  .mz-editor .form-control { min-height: 200px; }
  .mz-prio { margin: 4px 0 0; padding: 0; border: 0; }
  .mz-attach-block .custom-file-label { border: 1px solid #86868b; border-radius: 12px; color: var(--text-2); }
  .mz-form legend.mz-label { float: none; width: auto; padding: 0; }
  @media (max-width: 734px) { .mz-msg { padding: 18px 18px 20px; } }

  /* ---------- Log ind og andre smalle sider ---------- */
  .mz-auth { width: min(460px, 100%); margin-inline: auto; padding-block: 24px 24px; }
  .mz-auth .t-headline { text-align: center; }
  .mz-auth__sub { margin-top: 14px; color: var(--text-2); text-align: center; }
  .mz-auth .form { margin-top: 36px; }
  .mz-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 14px; letter-spacing: -.016em; }
  .mz-auth__alt { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); text-align: center; }
  .mz-auth__help { margin-top: 18px; color: var(--text-2); font-size: 14px; text-align: center; letter-spacing: -.016em; }
  .mz-code { letter-spacing: .4em; font-variant-numeric: tabular-nums; }
  .mz-auth__msg:not(:empty) { margin-top: 24px; }
  .mz-auth .mz-auth__msg .alert { margin: 0; }
  .mz-2fa { margin-top: 32px; }
  .mz-2fa .form-control { height: 56px; font-size: 21px; letter-spacing: .3em; text-align: center; }
  .mz-2fa .btn { width: 100%; margin-top: 14px; padding: 11px 21px; font-size: 17px; }

  /* ---------- Tomme tilstande ---------- */
  .mz-empty { display: grid; justify-items: center; gap: 6px; padding: 56px 28px 52px; border-radius: var(--radius-card); background: var(--bg-2); text-align: center; }
  .mz-empty .mz-icon { margin-bottom: 14px; }
  .mz-empty p { max-width: 30em; color: var(--text-2); }
  .mz-empty .ctas { margin-top: 18px; }
  .mz-ok { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--radius-card); background: var(--bg-2); }
  .mz-ok p span { color: var(--text-2); }
  /* Flueben som "Tak for din besked" på mozo.dk (.form__done-icon, --grad-fresh) */
  .mz-okicon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--grad-fresh); color: #fff; }
  .mz-okicon .i { width: 16px; height: 16px; stroke-width: 3; }

  /* Forsiden: domænesøgning som på mozo.dk, links under hjælpen */
  .mz-spot { width: min(700px, 100%); }
  .mz-spot .spot__field { box-shadow: 0 0 0 1px var(--line), 0 12px 40px -8px rgba(0, 0, 0, .12); }
  .mz-spot + .mz-sec__note { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 18px; }
  .mz-help__more { margin-top: 16px; }
  @media (max-width: 734px) {
    .mz-spot .spot__field { height: 60px; padding: 0 7px 0 18px; border-radius: 16px; gap: 10px; }
    .mz-spot .spot__icon { width: 20px; height: 20px; }
    .mz-spot input { font-size: 19px; }
    .mz-spot .btn { padding: 8px 15px; font-size: 14px; }
  }

  /* Hjælp nederst på oversigten */
  .mz-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 30px 32px; border-radius: var(--radius-card); background: var(--bg-2); }
  .mz-help .t-copy { max-width: 30em; }
  .mz-help .status { margin-bottom: 12px; }
  .mz-help .ctas { margin-top: 0; }
  @media (max-width: 734px) { .mz-help { padding: 26px 22px; } }
}

@layer sections {
  /* Knap, der ligner et link (log ind) */
  .mz-link { padding: 0; border: 0; background: none; color: var(--link); font-size: 14px; letter-spacing: -.016em; }
  .mz-link:hover { text-decoration: underline; }
}

@layer sections {
  /* ---------- Faktura (viewinvoice.tpl) ---------- */
  .mz-invhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .mz-invlogo { flex: none; width: 150px; height: auto; margin-top: 8px; }
  .mz-pay__box { display: grid; gap: 20px; }
  .mz-pay__method { max-width: 420px; }
  .mz-pay__btn:empty { display: none; }
  .mz-pay__btn input[type="submit"], .mz-pay__btn input[type="button"], .mz-pay__btn button:not(.btn--secondary) {
    padding: 11px 21px; border: 1px solid var(--blue); border-radius: 980px; background: var(--blue); color: #fff; font-size: 17px; line-height: 1.1765; cursor: pointer; }
  .mz-pay__btn p, .mz-pay__btn div { font-size: 15px; }
  .mz-credit { display: grid; gap: 14px; margin-top: 12px; }
  .mz-credit__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  .mz-credit__row .field { flex: 1 1 220px; max-width: 320px; }
  .mz-lines > li { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
  .mz-lines__desc { font-size: 15px; line-height: 1.5; }
  .mz-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .mz-address { margin: 0; font-style: normal; font-size: 15px; line-height: 1.5; }
  .mz-parties p { font-size: 15px; }
  .mz-parties__next { margin-top: 16px; }
  .mz-ledger { padding: 6px 24px 8px; }
  .mz-ledger .table { margin: 0; }
  .mz-ledger__sum td { font-weight: 600; }
  @media (max-width: 734px) {
    .mz-parties { grid-template-columns: 1fr; }
    .mz-invlogo { width: 110px; }
    .mz-ledger { padding: 4px 14px; }
  }
  @media print {
    .mz-invoice-page .mz { padding-block: 0; }
    .mz-invoice-page .mz-panel { background: none; box-shadow: inset 0 0 0 1px var(--line); }
  }
}

@layer utilities {
  [hidden] { display: none !important; }
}
/* ---- src/css/mozo-bridge.css ---- */
/* ==========================================================================
   Mozo – bro mellem Twenty-One/Bootstrap 4 og mozo.dk's designsystem
   Twenty-Ones CSS ligger i laget "whmcs" (laveste, se includes/head.tpl). Lag vinder over hinanden uanset
   selektorernes styrke, men egenskaber, som Mozo ikke sætter, kommer stadig fra Bootstrap. Her sættes derfor
   Mozos udseende på de Bootstrap- og WHMCS-klasser, som de sider, vi ikke tegner om, og modulerne bruger.
   Samme tokens som mozo.dk (site.css). Ingen nye farver eller størrelser.
   ========================================================================== */

@layer components {
  /* ---------- Siden ---------- */
  body.mz-body { border-top: 0; background: var(--bg); }
  #main-body { padding: 0; background: transparent; }
  .mz-std__in { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: 48px 112px; }
  .mz-std__title { margin: 0 0 32px; font-family: var(--font-display); font-size: 48px; line-height: 1.0835; font-weight: 600; letter-spacing: -.003em; }
  .mz-std__grid.has-side { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
  .mz-std__main { min-width: 0; }
  .mz-std__side2 { margin-top: 32px; }
  @media (max-width: 1068px) {
    .mz-std__title { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
    .mz-std__grid.has-side { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  }
  @media (max-width: 734px) {
    .mz-std__in { padding-block: 32px 80px; }
    .mz-std__title { margin-bottom: 24px; font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  }

  /* Menu: tom kurv og sprogvalg i footeren */
  .gn__count.is-empty { display: none; }
  .gf__chooser { margin-left: auto; padding: 0; border: 0; background: none; color: #424245; font-size: 12px; letter-spacing: -.01em; cursor: pointer; }
  .gf__chooser:hover { color: var(--text); text-decoration: underline; }
  @media (max-width: 833px) { .gf__chooser { margin-left: 0; } }
  .mz-admin { background: var(--bg-2); }
  /* Brødkrummen i footeren kan have fire led i kundeområdet: hele led brydes til næste linje */
  .gf__crumbs { flex-wrap: wrap; row-gap: 6px; }
  .gf__crumbs > :is(a, span) { white-space: nowrap; }
  .gf__crumbs .logo { flex: none; }
  /* Afkrydsning og valg i WHMCS' formularer (fx mailpræferencer) i Mozos blå */
  .mz-std :is(input[type="checkbox"], input[type="radio"]):not(.custom-control-input, .form-check-input) { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--blue); }

  /* ---------- Knapper: alle .btn er Mozos pilleknapper ---------- */
  .btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-dark {
    background: transparent; color: var(--link); border-color: var(--link); }
  .btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline-dark:hover {
    background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
  .btn-danger, .btn-outline-danger { background: transparent; color: #e30000; border-color: #e30000; }
  .btn-danger:hover, .btn-outline-danger:hover { background: #e30000; border-color: #e30000; color: #fff; }
  .btn-link { background: transparent; border-color: transparent; color: var(--link); }
  .btn-link:hover { background: transparent; border-color: transparent; color: var(--link); text-decoration: underline; }
  .btn-sm, .btn-xs { padding: 3px 10px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; }
  .btn-lg { padding: 11px 21px; font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; }
  .btn-block { display: block; width: 100%; }
  .btn:focus, .btn.focus { box-shadow: none; }
  .btn.disabled, .btn:disabled { opacity: .42; }
  .input-group > .btn, .input-group-append > .btn, .input-group-prepend > .btn { border-radius: 12px; }

  /* ---------- Formularer ---------- */
  .form-control, .custom-select {
    height: 44px; padding: 10px 14px; border: 1px solid #86868b; border-radius: 12px; background-color: #fff; color: var(--text);
    font-size: 17px; line-height: 1.3; letter-spacing: -.022em; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
  .form-control:focus, .custom-select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
  textarea.form-control { height: auto; min-height: 120px; line-height: 1.47059; }
  .form-control[readonly], .form-control:disabled { background-color: var(--bg-2); }
  .form-control.is-invalid, .has-error .form-control { border-color: #e30000; background-color: #fff2f4; }
  .form-group label, .control-label, .col-form-label { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.016em; }
  .form-text, .help-block, small.text-muted { color: var(--text-2); font-size: 12px; letter-spacing: -.01em; }
  .input-group-text { border: 1px solid #86868b; border-radius: 12px; background: var(--bg-2); color: var(--text-2); font-size: 14px; }
  .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--blue); background-color: var(--blue); }
  /* Felter med klassen .field (registrering, betaling, rabatkode) som .form-control, ikon foran med plads til teksten */
  :is(input, select, textarea).field { height: 44px; padding: 10px 14px; border: 1px solid #86868b; border-radius: 12px; background-color: #fff; color: var(--text);
    font-size: 17px; line-height: 1.3; letter-spacing: -.022em; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
  textarea.field { height: auto; min-height: 120px; }
  :is(input, select, textarea).field:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
  .prepend-icon .field { padding-left: 42px; }
  .prepend-icon .field-icon { top: 0; left: 0; width: 42px; height: 44px; line-height: 44px; }
  .prepend-icon .field-icon i { color: var(--text-3); font-size: 14px; }
  /* Telefonfeltet: landekodens afstand fra Twenty-One (afhænger af kodens længde), ikke Mozos 14px */
  .intl-tel-input input.form-control { padding-left: revert-layer; }

  /* ---------- Kort, paneler og lister ---------- */
  .mz-std .card, :is(.sidebar, .cart-sidebar) .card { border: 0; border-radius: var(--radius-card); background: var(--bg-2); }
  .mz-std .card-header, :is(.sidebar, .cart-sidebar) .card-header { padding: 18px 22px 12px; border-bottom: 0; background: transparent; }
  .mz-std .card-title, :is(.sidebar, .cart-sidebar) :is(.card-title, .panel-title) { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
  .mz-std .card-body > .card-title { margin-bottom: 16px; }
  .mz-std .card-body { padding: 22px 24px; }
  .mz-std .card-footer, :is(.sidebar, .cart-sidebar) .card-footer { border-top: 1px solid rgba(0, 0, 0, .08); background: transparent; }
  :is(.sidebar, .cart-sidebar) .card { margin-bottom: 14px; overflow: hidden; }
  :is(.sidebar, .cart-sidebar) .card-minimise { display: none; }
  .list-group-item { border-color: rgba(0, 0, 0, .08); background: transparent; color: var(--text); font-size: 15px; letter-spacing: -.016em; }
  :is(.sidebar, .cart-sidebar) .list-group-item { margin: 0; padding: 10px 22px; border-width: 1px 0 0; border-radius: 0; }
  .list-group-item-action:hover, .list-group-item-action:focus { background: var(--bg-3); color: var(--text); }
  .list-group-item.active { border-color: rgba(0, 0, 0, .08); background: var(--bg-3); color: var(--text); font-weight: 600; }
  .sidebar-menu-item-icon { color: var(--text-2); }

  /* ---------- Tabeller (som prislisten på mozo.dk/domaener) ---------- */
  .table { color: var(--text); font-size: 15px; }
  .table th, .table td { padding: 14px 12px; border-top: 1px solid rgba(0, 0, 0, .08); vertical-align: middle; }
  .table thead th { border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 12px; font-weight: 400; letter-spacing: -.01em; }
  .table-striped tbody tr:nth-of-type(odd) { background: var(--bg-2); }
  .table-hover tbody tr:hover { background: var(--bg-2); }
  .table-container, .dataTables_wrapper, .table-responsive { max-width: 100%; overflow-x: auto; }
  .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { height: 36px; border: 1px solid #86868b; border-radius: 980px; padding: 0 14px; }

  /* ---------- Status: prik i fast farve + tekst (samme betydning som .mz-state) ---------- */
  .label.status, .label.label-success, .label.label-warning, .label.label-danger, .label.label-info, .label.label-default {
    display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none !important; color: var(--text);
    font-size: 14px; font-weight: 400; line-height: 1.42859; letter-spacing: -.016em; white-space: nowrap; text-transform: none; }
  .label.status::before, .label[class*="label-"]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--state, var(--text-3)); }
  .status-active, .status-paid, .status-completed, .status-accepted, .status-delivered, .label-success { --state: var(--green); }
  .status-pending, .status-open, .status-customer-reply, .status-inprogress, .status-onhold, .status-draft, .status-pending-registration, .status-pending-transfer, .status-payment-pending, .label-info { --state: var(--blue); }
  .status-unpaid, .status-answered, .status-grace, .label-warning { --state: #b64400; }
  .status-overdue, .status-suspended, .status-fraud, .status-redemption, .status-collections, .label-danger { --state: #e30000; }
  .status-cancelled, .status-terminated, .status-expired, .status-closed, .status-refunded, .status-transferred-away, .status-dead, .status-lost, .label-default { --state: var(--text-3); }
  .badge { padding: 3px 8px; border-radius: 980px; background: var(--bg-3); color: var(--text); font-size: 12px; font-weight: 600; }

  /* ---------- Beskeder ---------- */
  .alert { padding: 16px 20px; border: 0; border-radius: var(--radius-card); background: var(--bg-2); color: var(--text); font-size: 15px; letter-spacing: -.016em; }
  .alert-danger { background: #fff2f4; }
  .alert a, .alert .alert-link { color: var(--link); font-weight: 600; }
  .network-issue-alert, .verification-banner { border-radius: 0; }
  .verification-banner { padding: 14px 0; background: var(--bg-2); }

  /* ---------- Faner, menuer, modaler og sider ---------- */
  .nav-tabs { border-bottom: 1px solid var(--line); }
  .nav-tabs .nav-link { margin-bottom: -1px; border: 0; color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  .nav-tabs .nav-link:hover { color: var(--text); }
  .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
  .nav-pills .nav-link { border-radius: 980px; color: var(--text); font-size: 14px; }
  .nav-pills .nav-link.active { background: var(--text); color: #fff; }
  .dropdown-menu { padding: 6px; border: 0; border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .08); font-size: 14px; }
  .dropdown-item { border-radius: 8px; color: var(--text); }
  .dropdown-item:hover, .dropdown-item:focus { background: var(--bg-2); color: var(--text); }
  .modal-content { border: 0; border-radius: var(--radius-card); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35); }
  .modal-header, .modal-footer { border-color: rgba(0, 0, 0, .08); }
  .modal-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: .011em; }
  .modal-localisation .modal-content { background: var(--bg); color: var(--text); }
  .modal-localisation .item { color: var(--text); }
  .modal-localisation .item.active { font-weight: 600; }
  .page-link { margin: 0 2px; border: 0; border-radius: 980px; color: var(--text); font-size: 14px; }
  .page-item.active .page-link { background: var(--text); color: #fff; }
  .page-item.disabled .page-link { background: transparent; color: var(--text-3); }

  /* Butikken på mobil: kun kategorivælgeren (Handlinger findes i Shop-menuen og kurven, valuta i footeren) */
  .sidebar-collapsed { margin: 0 0 20px; padding: 0; }
  .sidebar-collapsed > .panel { margin: 0; border: 0; background: none; }
  .sidebar-collapsed > .panel:not(:first-child), .sidebar-collapsed > .float-right { display: none; }
  .sidebar-collapsed .panel-heading, .sidebar-collapsed .card-header { display: none; }
  .sidebar-collapsed .panel-body, .sidebar-collapsed .card-body { padding: 0; }

  /* Produktdetaljer (Twenty-One, indtil siden er tegnet om): etiketter som små grå overskrifter */
  .product-details .product-status { border-radius: var(--radius-card); overflow: hidden; }
  .product-details .product-icon h3, .product-details .product-icon h4 { font-size: 21px; line-height: 1.19; }
  .product-details h4 { margin: 14px 0 2px; color: var(--text-2); font-family: var(--font); font-size: 12px; font-weight: 400; letter-spacing: -.01em; }
  .product-details h4 + p, .product-details h4 + div { font-size: 17px; }
  .product-details .product-status-text { padding: 6px 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; }

  /* Domænedetaljer m.fl.: h5 som etiket over en værdi i en kolonne */
  .mz-std .card-body [class*="col-"] > h5:first-child { margin: 0 0 2px; color: var(--text-2); font-family: var(--font); font-size: 14px; font-weight: 400; letter-spacing: -.016em; }
  .mz-std .card-body .row.mb-3 { row-gap: 14px; }

  /* Markdown-editoren (sager): stille værktøjslinje */
  .md-editor { border: 1px solid #86868b; border-radius: 12px; overflow: hidden; }
  .md-editor > .md-header { padding: 6px 8px; border-bottom: 1px solid rgba(0, 0, 0, .08); background: var(--bg-2); }
  .md-editor .btn, .md-editor .btn-group .btn { padding: 4px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 13px; }
  .md-editor .btn:hover, .md-editor .btn.active { background: var(--bg-3); color: var(--text); }
  .md-editor > textarea, .md-editor > .md-preview { border: 0; border-radius: 0; box-shadow: none; }
  .md-editor .md-footer, .md-editor > .md-footer { background: var(--bg-2); color: var(--text-3); font-size: 12px; }
  .custom-file-label { height: 44px; padding: 10px 14px; border-color: #86868b; border-radius: 12px; font-size: 15px; }
  .custom-file-label::after { height: 42px; padding: 10px 14px; border-radius: 0 12px 12px 0; background: var(--bg-2); color: var(--text); font-size: 14px; content: attr(data-browse); }

  /* Lister i WHMCS' indhold beholder punkter (Mozos reset gælder kun Mozos egne områder) */
  .mz-std .text-muted { color: var(--text-2) !important; }
  .mz-std h1, .mz-std h2, .mz-std h3, .mz-std h4, .mz-std h5, .mz-std h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
}

@layer utilities {
  /* WHMCS' JavaScript minimerer sidebjælkens kort, når den første .container er smal (whmcs.js). Mozo viser altid indholdet. */
  .card-sidebar .collapsable-card-body { display: block !important; }
}
/* ---- src/css/mozo-cart.css ---- */
/* ==========================================================================
   Mozo – ordreformularen (orderforms/mozo, child af standard_cart)
   standard_carts CSS ligger i laget "whmcs" (orderforms/mozo/css/all.min.css), så reglerne her vinder uden
   !important. Bootstraps !important-hjælpeklasser (.bg-white, .float-right, .text-center …) vinder stadig;
   dér bruges en anden egenskab. Id'er, klasser og WHMCS' JavaScript er urørte. Samme tokens som mozo.dk.

   - Butik (products.tpl, egne pakkekort) og domænesøgning: kategorimenu til venstre.
   - Bestillingen (domænevalg, konfiguration, domæner, kurv, betaling, bekræftelse): ingen kategorimenu.
     Konfiguration og kurv har opsummeringen fast i højre side. På smalle skærme står den under indholdet,
     og en bjælke nederst viser beløbet og knappen (mozo.js, .mz-paybar).
   ========================================================================== */

@layer components {
  /* ---------- Layout ---------- */
  #order-standard_cart > .row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; margin: 0; }
  #order-standard_cart > .row > .cart-sidebar,
  #order-standard_cart > .row > .cart-body { float: none; width: auto; min-height: 0; padding: 0; }
  #order-standard_cart > .row > .cart-sidebar { display: block; }
  #order-standard_cart .sidebar-collapsed { display: none; }

  /* Bestillingen: uden kategorimenu (Shop-menuen øverst har kategorierne) */
  #order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout, .order-confirmation) > .row { grid-template-columns: minmax(0, 1fr); }
  #order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout, .order-confirmation) > .row > .cart-sidebar { display: none; }
  /* Én kolonne uden opsummering: smallere og i midten */
  #order-standard_cart:has(#frmProductDomain, #frmConfigureDomains, #frmCheckout, .order-confirmation) > .row > .cart-body { width: min(880px, 100%); margin-inline: auto; }

  /* Indhold | opsummering */
  #order-standard_cart .row:has(> .secondary-cart-sidebar) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; margin: 0; }
  #order-standard_cart .secondary-cart-body,
  #order-standard_cart .secondary-cart-sidebar { float: none; width: auto; min-height: 0; margin: 0; padding: 0; }
  #order-standard_cart .secondary-cart-sidebar { position: sticky; top: 76px; }

  @media (max-width: 1068px) {
    #order-standard_cart > .row { grid-template-columns: minmax(0, 1fr); }
    #order-standard_cart > .row > .cart-sidebar { display: none; }
    #order-standard_cart .sidebar-collapsed { display: block; }
    #order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout, .order-confirmation) .sidebar-collapsed { display: none; }
    #order-standard_cart .row:has(> .secondary-cart-sidebar) { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  }
  @media (max-width: 833px) {
    #order-standard_cart .row:has(> .secondary-cart-sidebar) { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    #order-standard_cart .secondary-cart-sidebar { position: static; }
  }

  /* ---------- Overskrifter og tekst ---------- */
  #order-standard_cart .header-lined { margin: 0 0 28px; padding: 0; border: 0; }
  #order-standard_cart .header-lined h1 { margin: 0; font-family: var(--font-display); font-size: 48px; line-height: 1.0835; font-weight: 600; letter-spacing: -.003em; }
  #order-standard_cart .secondary-cart-body > p:first-child,
  #order-standard_cart .already-registered p { margin: 0 0 28px; color: var(--text-2); font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; }
  #order-standard_cart .sub-heading,
  #order-standard_cart .sub-heading-borderless { height: auto; margin: 44px 0 18px; padding: 0; border: 0; text-align: left; }
  #order-standard_cart .sub-heading span,
  #order-standard_cart .sub-heading-borderless span { position: static; display: block; padding: 0; background: none; color: var(--text);
    font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; }
  #order-standard_cart .sub-heading i { font-style: normal; }
  #order-standard_cart .sub-heading small { display: block; margin-top: 4px; color: var(--text-2); font-family: var(--font); font-size: 12px; font-weight: 400; letter-spacing: -.01em; }
  #order-standard_cart h3:has(+ .mc-promos) { font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; }
  #order-standard_cart h3:has(+ .mc-promos)::first-letter { text-transform: uppercase; }
  @media (max-width: 1068px) { #order-standard_cart .header-lined h1 { font-size: 40px; line-height: 1.1; letter-spacing: 0; } }
  @media (max-width: 734px) {
    #order-standard_cart .header-lined { margin-bottom: 22px; }
    #order-standard_cart .header-lined h1 { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    #order-standard_cart .sub-heading, #order-standard_cart .sub-heading-borderless { margin-top: 36px; }
  }

  /* ---------- Felter ---------- */
  #order-standard_cart .field-container { margin: 0 0 32px; }
  #order-standard_cart .field-container .form-group > br { display: none; }
  #order-standard_cart .field-container .form-group > label { display: block; }
  #order-standard_cart .form-group label { margin-bottom: 8px; }
  #order-standard_cart .select-inline { width: auto; max-width: 100%; }
  #order-standard_cart .field-help-text { color: var(--text-2); font-size: 12px; letter-spacing: -.01em; }
  #order-standard_cart textarea.field { min-height: 120px; }
  #order-standard_cart .password-strength-meter .progress { height: 6px; margin-top: 6px; border-radius: 980px; background: var(--bg-3); }
  #order-standard_cart .password-strength-meter p { margin-top: 6px; color: var(--text-2); font-size: 12px; }

  /* Valg med WHMCS' iCheck-felter (rund = ét valg, firkant = flere) */
  .iradio_square-blue, .icheckbox_square-blue, .iradio_square-green, .icheckbox_square-green {
    flex: none; width: 22px; height: 22px; border: 1px solid #86868b; background: #fff; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
  .iradio_square-blue, .iradio_square-green { border-radius: 50%; }
  .icheckbox_square-blue, .icheckbox_square-green { border-radius: 6px; }
  .iradio_square-blue.hover, .icheckbox_square-blue.hover, .iradio_square-green.hover, .icheckbox_square-green.hover { border-color: var(--blue); }
  .iradio_square-blue.checked, .iradio_square-green.checked { border: 7px solid var(--blue); }
  .icheckbox_square-blue.checked, .icheckbox_square-green.checked { border-color: var(--blue);
    background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 14px; }
  .iradio_square-blue.disabled, .icheckbox_square-blue.disabled, .iradio_square-green.disabled, .icheckbox_square-green.disabled { opacity: .42; cursor: default; }
  #order-standard_cart label .iradio_square-blue { margin-right: 0; }

  /* ---------- Konfiguration ---------- */
  #order-standard_cart .product-info { margin: 0 0 32px; padding: 22px 24px; border: 0; border-radius: var(--radius-card); background: var(--bg-2);
    color: var(--text-2); font-size: 14px; line-height: 1.6; letter-spacing: -.016em; }
  #order-standard_cart .product-info .product-title { margin: 0 0 8px; color: var(--text); font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; }
  #order-standard_cart .product-info strong { color: var(--text); font-weight: 600; }
  #order-standard_cart .product-info small { font-size: 14px; }

  /* Periode som .seg (mozo.js bygger den ud fra WHMCS' vælger, som bliver i formularen) */
  .mz-cycle .seg__thumb { width: calc((100% - 4px) / var(--n, 2)); }
  .mz-cycle button { display: grid; justify-items: center; min-height: 50px; padding: 6px 20px; line-height: 1.25; }
  .mz-cycle button span { color: var(--text-2); font-size: 12px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .mz-cycle button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

  /* Tilvalg fra MarketConnect (SSL, Weebly, SiteLock …) */
  #order-standard_cart .addon-promo-container { margin: 0 0 14px; padding: 24px 28px 14px; border: 0; border-radius: var(--radius-card);
    background-image: linear-gradient(var(--bg-2), var(--bg-2)); font-size: 14px; }
  #order-standard_cart .addon-promo-container .description { margin: 0 0 14px; }
  #order-standard_cart .addon-promo-container .logo { margin: 0 0 12px 24px; line-height: normal; }
  #order-standard_cart .addon-promo-container img { max-width: 96px; height: auto; }
  #order-standard_cart .addon-promo-container h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; }
  #order-standard_cart .addon-promo-container p { max-width: 34em; margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  #order-standard_cart .addon-promo-container a { text-decoration: none; }
  #order-standard_cart .addon-promo-container > br { display: none; }
  /* text-indent udligner WHMCS' "&nbsp; " foran navnet, så navne over to linjer flugter */
  #order-standard_cart .addon-promo-container > label { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 11px 0;
    border-top: 1px solid rgba(0, 0, 0, .08); color: var(--text); font-size: 15px; font-weight: 400; letter-spacing: -.016em; text-indent: -.55em; cursor: pointer; }
  #order-standard_cart .addon-promo-container > label > span { margin-left: auto; color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; text-indent: 0; white-space: nowrap; }
  @media (max-width: 734px) {
    #order-standard_cart .addon-promo-container { padding: 22px 20px 12px; }
    #order-standard_cart .addon-promo-container .logo { float: none; margin: 0 0 14px; text-align: left; }
    #order-standard_cart .addon-promo-container img { max-width: 72px; }
  }

  /* Tilvalg (WHMCS-produkttilvalg) */
  #order-standard_cart .addon-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; margin: 0; }
  #order-standard_cart .addon-products > [class*="col-"] { width: auto; max-width: none; padding: 0; }
  #order-standard_cart .panel-addon { display: flex; flex-direction: column; height: 100%; margin: 0; border: 1px solid transparent; border-radius: var(--radius-card);
    background: var(--bg-2); text-align: left; font-size: 14px; overflow: hidden; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
  #order-standard_cart .panel-addon .panel-body { flex: 1; padding: 20px 22px 10px; color: var(--text-2); line-height: 1.42859; }
  #order-standard_cart .panel-addon .panel-body label { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
  #order-standard_cart .panel-addon .panel-price { padding: 0 22px 14px; background: none; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
  #order-standard_cart .panel-addon .panel-add { padding: 12px 22px; border-top: 1px solid rgba(0, 0, 0, .08); border-radius: 0; background: none; color: var(--link); }
  #order-standard_cart .panel-addon-selected { border-color: var(--blue); background: #fff; box-shadow: inset 0 0 0 1px var(--blue); }
  #order-standard_cart .panel-addon-selected .panel-add { background: none; color: var(--green); }

  #order-standard_cart .info-text-sm { margin: 32px 0 0; padding: 0; background: none; color: var(--text-2); font-size: 14px; text-align: left; }
  #order-standard_cart .info-text-sm .fa-question-circle { display: none; }

  /* ---------- Opsummering ---------- */
  #order-standard_cart .order-summary { position: relative; margin: 0; padding: 26px 26px 24px; border: 0; border-radius: var(--radius-card); background: var(--bg-2); }
  #order-standard_cart .order-summary h2 { margin: 0 0 18px; padding: 0 28px 0 0; color: var(--text); font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; text-align: left; }
  #order-standard_cart .order-summary .loader { position: absolute; top: 29px; right: 26px; height: auto; padding: 0; color: var(--text-3); font-size: 14px; line-height: 1; }
  #order-standard_cart .summary-container { min-height: 0; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--text); font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  #order-standard_cart .summary-container .clearfix { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 3px 0; }
  #order-standard_cart .summary-container .clearfix::after { content: none; }
  #order-standard_cart .summary-container .clearfix > :first-child { min-width: 0; }
  #order-standard_cart .summary-container .clearfix > :last-child { flex: none; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  #order-standard_cart .order-summary .product-name { font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
  #order-standard_cart .order-summary .product-group { margin: 0 0 12px; color: var(--text-2); font-style: normal; }
  #order-standard_cart .order-summary .summary-totals { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
  #order-standard_cart .order-summary :is(.summary-totals, .bordered-totals) .clearfix > :first-child,
  #order-standard_cart .order-summary .recurring-totals > :first-child { color: var(--text-2); }
  #order-standard_cart .order-summary .subtotal { margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
  #order-standard_cart .order-summary .bordered-totals { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
  #order-standard_cart .order-summary .recurring-totals { margin: 0; padding: 10px 0 0; }
  #order-standard_cart .order-summary .recurring-charges { color: var(--text); font-size: 14px; font-style: normal; }
  #order-standard_cart .order-summary .total-due-today { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
    margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
  #order-standard_cart .order-summary .total-due-today span { display: block; text-align: left; }
  #order-standard_cart .order-summary .total-due-today span:not(.amt) { font-weight: 600; }
  #order-standard_cart .order-summary .total-due-today .amt { font-family: var(--font-display); font-size: 28px; line-height: 1.1428; font-weight: 600; letter-spacing: .007em; font-variant-numeric: tabular-nums; }
  #order-standard_cart .order-summary .text-right { display: grid; justify-items: center; gap: 14px; margin-top: 22px; }
  #order-standard_cart .order-summary .text-right > br { display: none; }
  #order-standard_cart #orderSummary > .text-center { margin-top: 14px; }
  #order-standard_cart :is(#btnCompleteProductConfig, .btn-checkout) { display: block; width: 100%; padding: 11px 21px; font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; }
  #order-standard_cart .btn-continue-shopping { padding: 0; border: 0; color: var(--link); font-size: 14px; }
  #order-standard_cart :is(#btnCompleteProductConfig, .btn-checkout, #btnCompleteOrder, #btnDomainContinue, #btnConfigureDomains) :is(.fa-arrow-circle-right, .fa-arrow-right) { display: none; }

  /* Bjælke nederst på smalle skærme (mozo.js), når opsummeringen ikke er i billedet */
  .mz-paybar { display: none; }
  @media (max-width: 833px) {
    .mz-paybar { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
      border-top: 1px solid rgba(0, 0, 0, .16); background: rgba(250, 250, 252, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
      transition: transform .3s var(--ease), visibility .3s; }
    .mz-paybar.is-away { transform: translateY(100%); visibility: hidden; }
    .mz-paybar__sum { display: grid; min-width: 0; margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; }
    .mz-paybar__sum strong { color: var(--text); font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .mz-paybar .btn { flex: none; }
    .has-paybar .gf { padding-bottom: 76px; }
  }

  /* ---------- Kurven ---------- */
  #order-standard_cart .view-cart-items-header { margin: 0; padding: 0 24px 10px; border-radius: 0; background: none; color: var(--text-2); font-size: 12px; letter-spacing: -.01em; }
  #order-standard_cart .view-cart-items { margin: 0; border: 0; border-radius: var(--radius-card); background: var(--bg-2); overflow: hidden; }
  #order-standard_cart .view-cart-items .item { margin: 0; padding: 20px 24px; background: none; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  #order-standard_cart .view-cart-items .item + .item { border-top: 1px solid rgba(0, 0, 0, .08); }
  #order-standard_cart .view-cart-items .item-title { color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
  #order-standard_cart .view-cart-items .item-title .btn-link { padding: 0 0 0 8px; border: 0; font-size: 14px; font-weight: 400; letter-spacing: -.016em; vertical-align: baseline; }
  #order-standard_cart .view-cart-items .fa-pencil-alt { display: none; }
  #order-standard_cart .view-cart-items :is(.item-group, .item-domain) { color: var(--text-2); font-size: 14px; }
  #order-standard_cart .view-cart-items .item-price span { font-size: 17px; font-variant-numeric: tabular-nums; }
  #order-standard_cart .view-cart-items .item-price .cycle { color: var(--text-2); font-size: 12px; }
  #order-standard_cart .btn-remove-from-cart { color: var(--text-2); }
  #order-standard_cart .btn-remove-from-cart:hover { color: #e30000; }
  #order-standard_cart .view-cart-empty { padding: 40px 24px; color: var(--text-2); text-align: center; }
  #order-standard_cart .empty-cart { margin: 12px 0 0; text-align: right; }
  #order-standard_cart .empty-cart .btn { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--link); font-size: 14px; }
  #order-standard_cart .empty-cart .btn:hover { text-decoration: underline; }

  /* Rabatkode og moms */
  #order-standard_cart .view-cart-tabs { margin: 40px 0 0; }
  #order-standard_cart .view-cart-tabs .nav-tabs { padding-left: 0; font-size: 14px; }
  #order-standard_cart .view-cart-tabs .nav-tabs :is(a[aria-selected="true"], a[aria-expanded="true"]) { border-color: transparent; background: none; }
  #order-standard_cart .view-cart-tabs .tab-content { margin-top: 16px; padding: 22px 24px; border-radius: var(--radius-card); background: var(--bg-2); }
  #order-standard_cart .view-cart-tabs .promo form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  #order-standard_cart .view-cart-tabs .promo .form-group { flex: 1 1 240px; margin: 0; }
  #order-standard_cart .view-cart-tabs .promo .btn-block { flex: none; display: inline-block; width: auto; }

  /* Tilbud fra MarketConnect i kurven og ved betaling */
  #order-standard_cart .mc-promos { max-width: none; margin: 0 0 32px; border-radius: var(--radius-card); background: var(--bg-2); overflow: hidden; }
  #order-standard_cart .mc-promo { margin: 0; border: 0; background: none; }
  #order-standard_cart .mc-promo + .mc-promo { border-top: 1px solid rgba(0, 0, 0, .08); }
  #order-standard_cart .mc-promo .header { display: flex; align-items: center; gap: 14px; height: auto; min-height: 76px; padding: 14px 20px; overflow: visible; }
  #order-standard_cart .mc-promo .expander { order: 0; flex: none; width: 12px; margin: 0; color: var(--text-3); font-size: 12px; line-height: 1; text-align: center; transition: none; }
  #order-standard_cart .mc-promo .icon { order: 1; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; line-height: normal; }
  #order-standard_cart .mc-promo .content { order: 2; flex: 1; min-width: 0; }
  #order-standard_cart .mc-promo .headline { padding: 0; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -.016em; }
  #order-standard_cart .mc-promo .tagline { color: var(--text-2); font-size: 14px; font-weight: 400; letter-spacing: -.016em; }
  #order-standard_cart .mc-promo .cta { order: 3; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 0; text-align: right; }
  #order-standard_cart .mc-promo .price { padding: 0; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
  #order-standard_cart .mc-promo .btn-add { padding: 3px 12px; border: 1px solid var(--link); background: transparent; color: var(--link); font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; }
  #order-standard_cart .mc-promo .btn-add:hover { border-color: var(--blue-hover); background: var(--blue-hover); color: #fff; }
  #order-standard_cart .mc-promo .btn-add .text { padding: 0; font-size: 12px; }
  #order-standard_cart .mc-promo .btn-add .arrow { display: none; }
  #order-standard_cart .mc-promo .body { padding: 0 20px 18px 104px; border: 0; background: none; color: var(--text-2); font-size: 14px; }
  #order-standard_cart .mc-promo .body ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  #order-standard_cart .mc-promo .body li { width: auto; float: none; }
  #order-standard_cart .mc-promo .body i { padding-right: 6px; color: var(--green); }
  @media (max-width: 734px) {
    #order-standard_cart .mc-promo .header { flex-wrap: wrap; padding: 14px 16px; }
    #order-standard_cart .mc-promo .cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding-left: 26px; }
    #order-standard_cart .mc-promo .body { padding: 0 16px 16px; }
    #order-standard_cart .mc-promo .body ul { grid-template-columns: 1fr; }
  }

  /* ---------- Domænevalg til en pakke ---------- */
  #order-standard_cart .domain-selection-options { margin: 0; }
  #order-standard_cart .domain-selection-options .option { margin: 0 0 10px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
  #order-standard_cart .domain-selection-options .option-selected { border-color: var(--blue); background: #fff; box-shadow: inset 0 0 0 1px var(--blue); }
  #order-standard_cart .domain-selection-options .option > label { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--text); font-size: 17px; font-weight: 400; letter-spacing: -.022em; }
  #order-standard_cart .domain-selection-options .option-selected > label { font-weight: 600; }
  #order-standard_cart .domain-input-group { margin: 16px 0 2px; }
  #order-standard_cart .domain-input-group .row { row-gap: 10px; }
  #order-standard_cart .domain-checker-advanced textarea { height: 104px; padding: 12px 14px; border: 1px solid #86868b; border-radius: 12px; background: #fff; color: var(--text);
    font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
  #order-standard_cart .domain-checker-advanced textarea:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
  #order-standard_cart .domain-checker-advanced .multiselect.btn { margin: 4px 6px 0 0; padding: 3px 10px; font-size: 12px; }
  #order-standard_cart .domain-checker-advanced label { color: var(--text-2); font-size: 12px; }
  #order-standard_cart #frmProductDomainSelections .text-center { margin-top: 24px; }

  /* ---------- Domænesøgning (domainregister.tpl) ---------- */
  #order-standard_cart .header-lined + p { margin: -12px 0 24px; color: var(--text-2); font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; }
  #order-standard_cart .domain-checker-container { margin: 0 0 32px; border-radius: var(--radius-card); background: var(--bg-2); }
  #order-standard_cart .domain-checker-bg { padding: 24px 26px; background: none; }
  #order-standard_cart .domain-checker-container .row { margin: 0; }
  #order-standard_cart .domain-checker-container .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; padding: 0; }
  #order-standard_cart .domain-checker-container .input-group-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; padding: 0; border-radius: 0; background: none; }
  #order-standard_cart .domain-checker-container .input-group-box > textarea { flex: 1 1 100%; }
  #order-standard_cart .domain-checker-container.domain-checker-advanced #btnCheckAvailability { order: 9; position: static; margin: 0 0 0 auto; padding: 11px 24px;
    font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; }
  #order-standard_cart .domain-checker-container .input-group-box .form-control { flex: 1 1 260px; height: 56px; margin: 0; font-size: 19px; }
  #order-standard_cart .domain-checker-container .input-group-box .input-group-btn { display: block; width: auto; }
  #order-standard_cart .domain-checker-container .input-group-box .input-group-btn .btn { width: auto; padding: 11px 24px; font-size: 17px; line-height: 1.1765; }
  #order-standard_cart .domain-checker-advanced > label, #order-standard_cart .input-group-box > label { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 6px; }

  /* Resultat, forslag og fremhævede domæner (som domænesøgningen på mozo.dk) */
  #order-standard_cart #DomainSearchResults .primary-domain-header { padding: 0 0 10px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  #order-standard_cart .domain-checker-result-headline,
  #order-standard_cart .domain-lookup-primary-results .headline { font-family: var(--font-display); font-size: 24px; line-height: 1.1667; font-weight: 600; letter-spacing: .009em; }
  #order-standard_cart .domain-checker-available { color: var(--green); }
  #order-standard_cart :is(.domain-checker-unavailable, .domain-checker-invalid) { color: var(--text); }
  #order-standard_cart .spotlight-tlds { margin: 16px 0 28px; padding: 0; background: none; }
  #order-standard_cart .spotlight-tlds-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin: 0; }
  #order-standard_cart .spotlight-tld-container { float: none; width: auto; padding: 0; }
  #order-standard_cart .spotlight-tld { height: auto; min-height: 112px; padding: 16px 12px 14px; border: 0; border-radius: 12px; background: var(--bg-2); color: var(--text);
    font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
  #order-standard_cart .spotlight-tld span { padding: 2px 0 8px; color: var(--text-2); font-size: 14px; font-weight: 400; letter-spacing: -.016em; }
  #order-standard_cart .spotlight-tld .btn { width: auto; min-width: 76px; max-width: 100%; padding: 3px 12px; border-radius: 980px; font-size: 12px; line-height: 1.3334; }
  #order-standard_cart .spotlight-tld .btn span { padding: 0; color: inherit; font-size: inherit; }
  #order-standard_cart .spotlight-tld .btn:is(.invalid, .unavailable) { margin: 8px 0 0; border-color: transparent; background: none; color: var(--text-3); }
  #order-standard_cart .suggested-domains { margin: 0 0 20px; border: 0; border-radius: var(--radius-card); background: var(--bg-2); overflow: hidden; }
  #order-standard_cart .suggested-domains .card-header { padding: 18px 22px 12px; border-bottom: 1px solid rgba(0, 0, 0, .08); background: none; color: var(--text);
    font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
  #order-standard_cart .suggested-domains :is(.domain-lookup-suggestions-loader, .domain-lookup-suggestions-message) { background: none; color: var(--text-2); font-size: 14px; opacity: 1; }
  #order-standard_cart .suggested-domains .list-group-item { padding: 14px 22px; border-color: rgba(0, 0, 0, .08); background: none; font-size: 17px; letter-spacing: -.022em; }
  #order-standard_cart .suggested-domains .extension { font-weight: 600; }
  #order-standard_cart .suggested-domains .price { padding: 0 16px; color: var(--text-2); font-size: 14px; letter-spacing: -.016em; font-variant-numeric: tabular-nums; }
  #order-standard_cart .suggested-domains .btn { padding: 3px 12px; border-radius: 980px; font-size: 12px; line-height: 1.3334; }
  #order-standard_cart .suggested-domains .more-suggestions { border: 0; background: none; font-size: 14px; }
  #order-standard_cart .domain-suggestions-warning { padding: 0 0 16px; color: var(--text-2); font-size: 12px; }
  #order-standard_cart .featured-tlds-container { margin: 0 0 36px; }
  #order-standard_cart .featured-tlds-container .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; margin: 0; }
  #order-standard_cart .featured-tlds-container .row > [class*="col-"] { width: auto; max-width: none; padding: 0; }
  #order-standard_cart .featured-tlds-container .row > div:empty { display: none; }
  #order-standard_cart .featured-tld { margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--bg-2); box-shadow: none; }
  #order-standard_cart .featured-tld .img-container { height: 92px; padding: 22px 0 8px; line-height: 62px; }
  #order-standard_cart .featured-tld .img-container img { max-width: 62%; max-height: 100%; vertical-align: middle; }
  #order-standard_cart .featured-tld .price { padding: 0 12px 18px; border-radius: 0; background: none; color: var(--text); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.022em; }

  /* Prisliste (som prislisten på mozo.dk/domaener) */
  #order-standard_cart .domain-pricing h4 { margin: 0 0 12px; font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; }
  #order-standard_cart .tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
  #order-standard_cart .tld-filters a { margin: 0; padding: 6px 14px; border-radius: 980px; background: var(--bg-2); color: var(--text); font-size: 14px; font-weight: 400; letter-spacing: -.016em; }
  #order-standard_cart .tld-filters a:hover { background: var(--bg-3); text-decoration: none; }
  #order-standard_cart .tld-filters a.badge-success { background: var(--text); color: #fff; }
  #order-standard_cart .domain-pricing .tld-pricing-header div { height: auto; padding: 0; border: 0; border-radius: 0; background: none; }
  #order-standard_cart .domain-pricing .tld-pricing-header :is(.tld-column, .col-4) { padding: 0 0 10px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 12px; letter-spacing: -.01em; }
  #order-standard_cart .domain-pricing .tld-pricing-header .tld-column { padding-left: 24px; text-align: left; }
  #order-standard_cart .domain-pricing .tld-row { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); background: none; font-size: 15px; font-variant-numeric: tabular-nums; }
  #order-standard_cart .domain-pricing .tld-row small { color: var(--text-2); font-size: 12px; }
  #order-standard_cart .domain-pricing .two-row-center { margin: 0; border: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
  #order-standard_cart .domain-promo-box { margin: 20px 0; padding: 24px 26px; border: 0; border-radius: var(--radius-card); background: var(--bg-2); color: var(--text); }
  #order-standard_cart .domain-promo-box h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 21px; line-height: 1.1905; font-weight: 600; letter-spacing: .011em; }
  #order-standard_cart .domain-promo-box p { margin: 0 0 14px; color: var(--text-2); font-size: 14px; letter-spacing: -.016em; }
  /* Bootstraps .text-warning/.text-primary har !important; tekstens fyldfarve sættes i stedet */
  #order-standard_cart .domain-promo-box :is(.text-warning, .text-primary) { font-weight: 400; -webkit-text-fill-color: var(--text-2); }
  #order-standard_cart .domain-promo-box h3 { white-space: normal; }
  #order-standard_cart .domain-promo-box i { margin-left: 16px; color: var(--text-3); font-size: 40px; }
  #order-standard_cart .domain-promo-box .small { margin: 12px 0 0; color: var(--text-2); font-size: 12px; }

  /* ---------- Betaling ---------- */
  #order-standard_cart .already-registered { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 4px; }
  #order-standard_cart .already-registered::after { content: none; }
  #order-standard_cart .already-registered > div { order: 2; }
  #order-standard_cart .already-registered p { flex: 1 1 320px; margin: 0; }
  #order-standard_cart :is(#btnAlreadyRegistered, #btnNewUserSignup) { margin: 0; border-color: var(--link); background: transparent; color: var(--link); }
  #order-standard_cart :is(#btnAlreadyRegistered, #btnNewUserSignup):hover { border-color: var(--blue-hover); background: var(--blue-hover); color: #fff; }

  /* Konto (indlogget kunde med flere konti) */
  #order-standard_cart .account-select-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 0; border: 0; }
  #order-standard_cart .account-select-container > [class*="col-"] { width: auto; max-width: none; padding: 0; }
  #order-standard_cart .account-select-container > .col-sm-12 { grid-column: 1 / -1; }
  #order-standard_cart .account-select-container div.account { height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  #order-standard_cart .account-select-container div.account.active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
  #order-standard_cart .account-select-container label { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--text); font-size: 14px; font-weight: 400; cursor: pointer; }
  #order-standard_cart .account-select-container .address strong { font-size: 15px; font-weight: 600; }
  #order-standard_cart .account-select-container .small { color: var(--text-2); font-size: 14px; }

  /* Beløb, kredit og betalingsmåde */
  #order-standard_cart .alert#totalDueToday { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 24px; padding: 20px 24px; background: var(--bg-2); font-size: 17px; letter-spacing: -.022em; }
  #order-standard_cart #totalCartPrice { font-family: var(--font-display); font-size: 28px; line-height: 1.1428; font-weight: 600; letter-spacing: .007em; font-variant-numeric: tabular-nums; }
  #order-standard_cart .apply-credit-container { margin: 0 0 24px; padding: 18px 22px; border-radius: var(--radius-card); background: var(--bg-2); font-size: 14px; }
  #order-standard_cart .apply-credit-container .radio { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
  #order-standard_cart #paymentGatewaysContainer > p { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: -.016em; }
  #order-standard_cart #paymentGatewaysContainer > .text-center { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
  #order-standard_cart #paymentGatewaysContainer label { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -.016em; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
  #order-standard_cart #paymentGatewaysContainer label:has(.checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
  #order-standard_cart .cc-input-container { margin-top: 14px; padding: 18px 22px 8px; border: 0; border-radius: var(--radius-card); background: var(--bg-2); }
  #order-standard_cart .cc-input-container ul li label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  #order-standard_cart .cc-input-container .form-group label { font-size: 14px; }

  /* Bemærkninger, nyhedsbrev, betingelser og "Gennemfør bestilling" */
  #order-standard_cart .marketing-email-optin { margin: 36px 0 0; padding: 22px 24px; border-radius: var(--radius-card); background: var(--bg-2); }
  #order-standard_cart .marketing-email-optin h4 { margin: 0 0 6px; font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
  #order-standard_cart .marketing-email-optin p { margin: 0 0 14px; color: var(--text-2); font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  .bootstrap-switch { border: 1px solid var(--line); border-radius: 980px; }
  .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--green); color: #fff; }
  .bootstrap-switch .bootstrap-switch-handle-off { background: var(--bg-3); color: var(--text); }
  #order-standard_cart #frmCheckout > .text-center { margin-top: 36px; }
  #order-standard_cart .checkbox-inline { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; letter-spacing: -.016em; }
  #order-standard_cart #btnCompleteOrder { margin-top: 6px; padding: 11px 28px; font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; }
  #order-standard_cart .checkout-security-msg { margin: 28px 0 0; padding: 0; background: none; color: var(--text-2); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; text-align: center; }
  #order-standard_cart .checkout-security-msg i { float: none; margin: 0 6px 0 0; font-size: 12px; }

  /* Bekræftelse */
  #order-standard_cart .order-confirmation { padding: 26px 28px; font-size: 17px; }
}

@layer sections {
  /* ---------- Butik (orderforms/mozo/products.tpl): pakkekort som på mozo.dk ---------- */
  .mz-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
  .mz-plan { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 30px 30px 28px; border: 0; border-radius: var(--radius-card); background: var(--bg-2); box-shadow: none; }
  .mz-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .mz-plan__flag { color: #b64400; font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
  .mz-plan__name { font-family: var(--font-display); font-size: 24px; line-height: 1.1667; font-weight: 600; letter-spacing: .009em; overflow-wrap: anywhere; }
  .mz-plan__stock { margin-top: 4px; color: var(--text-2); font-size: 12px; }
  .mz-plan .price { margin-top: 12px; }
  .mz-plan .price__amount { font-size: 28px; line-height: 1.1428; }
  .mz-plan__text { margin-top: 14px; color: var(--text); font-size: 15px; line-height: 1.47; }
  .mz-plan__list { display: grid; gap: 6px; margin-top: 14px; color: var(--text-2); font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }
  .mz-plan__list li { font-size: 14px; line-height: 1.42859; }
  .mz-plan__list strong { color: var(--text); font-weight: 600; }
  .mz-cart .sidebar-collapsed { margin-top: 20px; }
  .mz-plan__foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 24px; }
  .mz-cart-head h1 { font-family: var(--font-display); font-size: 48px; line-height: 1.0835; font-weight: 600; letter-spacing: -.003em; }
  .mz-cart-head p { max-width: 36em; margin-top: 12px; color: var(--text-2); font-family: var(--font-display); font-size: 21px; line-height: 1.381; font-weight: 600; letter-spacing: .011em; }
  @media (max-width: 1068px) { .mz-cart-head h1 { font-size: 40px; line-height: 1.1; letter-spacing: 0; } }
  @media (max-width: 734px) {
    .mz-plans { grid-template-columns: 1fr; gap: 14px; }
    .mz-plan { padding: 26px 22px 24px; }
    .mz-cart-head h1 { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .mz-cart-head p { font-size: 19px; }
  }
}

@layer utilities {
  /* WHMCS skjuler elementer med .w-hidden (laget "whmcs"). Mozos regler sætter display på fx .btn og ville
     ellers vise dem. Her vinder .w-hidden igen, men WHMCS' JavaScript kan stadig vise dem (style="display: …"). */
  .w-hidden { display: none; }
}