/* LyraHosting client area: the website's design on top of the WHMCS template.

   Loads last, after all.min.css, theme.min.css, custom/custom.css and the two generated colour layers
   (lyra-skin.css for the client area, lyra-skin-cart.css for the cart and checkout).
   This file holds the design rules written by hand: the typeface, the website's header and footer, and the shape
   of buttons, cards, forms and tables. It changes how things look, never what a page contains.

   Dark is the default. The light theme applies when <html> carries data-theme="light" (set by the switch in the
   header and remembered on the visitor's device).

   To go back to the studio's look, put back the studio's header.tpl, footer.tpl and includes/head.tpl. Removing only
   the lyra-*.css lines from includes/head.tpl is not a way back: the website header and footer would stay,
   without their styling.

   Contents: 1 colours and type  2 base  3 website header  4 client area bars  5 page frame
             6 cards and lists  7 tables  8 forms  9 buttons  10 labels and alerts  11 dialogs and menus
             12 pages  13 website footer  14 cart and checkout  15 small screens and motion */

/* ------------------------------------------------------------------ 1 colours and type */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-greek-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-greek-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-vietnamese-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
  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; }
/* The studio stylesheet names Poppins in many rules; that font is no longer fetched from Google, so the name
   points at the same Inter files and those rules show the website's typeface too. */
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-greek-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-greek-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-vietnamese-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
  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; }

/* The website's colours (its .lx block in concept.css). Dark first, as on the website. */
:root {
  color-scheme: dark;
  --lx-bg: #0b1020; --lx-card: #121a2f; --lx-ink: #e6e9f2; --lx-muted: #939cb3;
  --lx-accent: #7590ff; --lx-fill: #2b4bea; --lx-deep: #1c34ad; --lx-aink: #eef1ff; --lx-sky: #8fa8ff; --lx-band: #151d38;
  --lx-line: rgba(230, 233, 242, .11); --lx-edge: rgba(230, 233, 242, .24); --lx-control: rgba(230, 233, 242, .4); --lx-soft: rgba(230, 233, 242, .82);
  --lx-tint: rgba(117, 144, 255, .1); --lx-shadow: rgba(0, 0, 0, .6); --lx-field: #0b1020;
  /* five tones for states: good, waiting, problem, note, idle (text colour and its faint background) */
  --lx-ok: #5fd08f; --lx-ok-bg: rgba(95, 208, 143, .13); --lx-warn: #f2c35b; --lx-warn-bg: rgba(242, 195, 91, .13);
  --lx-bad: #ff8a98; --lx-bad-bg: rgba(255, 138, 152, .13); --lx-note: #8fa8ff; --lx-note-bg: rgba(117, 144, 255, .14);
  --lx-idle: #aab2c8; --lx-idle-bg: rgba(170, 178, 200, .11);
  --lx-sans: 'Inter Variable', Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --lx-mono: ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --lx-ease: cubic-bezier(.2, .8, .2, 1); --lx-snap: cubic-bezier(.7, 0, .2, 1);
}
/* The second selector: the box where a server module (Virtualizor) prints its own control panel. Its colours are not
   this template's, so the box always takes the light values and its contents stay readable in the dark theme too.
   The same for the pages of WHMCS's MarketConnect store (.landing-page, .wp-toolkit, .social-bee, .promo-wrapper), which
   their own stylesheet (css/store.css) paints for a white page. LyraHosting does not use that store. And the white invoice
   sheet (.invoice-container) that a reseller module's page shows inside the client area (2026-11-13). */
:root[data-theme='light'], .module-client-area, .landing-page, .wp-toolkit, .social-bee, .promo-wrapper, .invoice-container {
  color-scheme: light;
  --lx-bg: #eef0f5; --lx-card: #f8f9fc; --lx-ink: #0a0f1f; --lx-muted: #5b6475;
  --lx-accent: #2b4bea; --lx-sky: #7c9bff; --lx-band: #0a0f1f;
  --lx-line: rgba(10, 15, 31, .11); --lx-edge: rgba(10, 15, 31, .24); --lx-control: rgba(10, 15, 31, .4); --lx-soft: rgba(10, 15, 31, .82);
  --lx-tint: rgba(43, 75, 234, .08); --lx-shadow: rgba(10, 15, 31, .35); --lx-field: #ffffff;
  --lx-ok: #136c41; --lx-ok-bg: rgba(21, 115, 71, .1); --lx-warn: #7d5200; --lx-warn-bg: rgba(160, 105, 0, .12);
  --lx-bad: #ab2033; --lx-bad-bg: rgba(180, 35, 54, .09); --lx-note: #2340d0; --lx-note-bg: rgba(43, 75, 234, .09);
  --lx-idle: #535c6e; --lx-idle-bg: rgba(91, 100, 117, .1);
}

/* On paper the page is white, whatever theme is on the screen (lyra-skin.css does the same for its own colours). */
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --lx-bg: #ffffff; --lx-card: #ffffff; --lx-ink: #0a0f1f; --lx-muted: #5b6475; --lx-accent: #2b4bea; --lx-sky: #7c9bff; --lx-band: #0a0f1f;
    --lx-line: rgba(10, 15, 31, .11); --lx-edge: rgba(10, 15, 31, .24); --lx-control: rgba(10, 15, 31, .4); --lx-soft: rgba(10, 15, 31, .82);
    --lx-tint: rgba(43, 75, 234, .08); --lx-shadow: rgba(10, 15, 31, .35); --lx-field: #ffffff;
    --lx-ok: #136c41; --lx-ok-bg: rgba(21, 115, 71, .1); --lx-warn: #7d5200; --lx-warn-bg: rgba(160, 105, 0, .12);
    --lx-bad: #ab2033; --lx-bad-bg: rgba(180, 35, 54, .09); --lx-note: #2340d0; --lx-note-bg: rgba(43, 75, 234, .09);
    --lx-idle: #535c6e; --lx-idle-bg: rgba(91, 100, 117, .1);
  }
  .lx-logo-l { display: block !important; } .lx-logo-d { display: none !important; }
}

/* ------------------------------------------------------------------ 2 base */
html { background: var(--lx-bg); }
body, body.primary-bg-color { background: var(--lx-bg); color: var(--lx-ink); border-top: 0; font-family: var(--lx-sans);
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body, a, p, ul, ol, li, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, button, input, select, textarea, label, table,
.btn, .form-control, .dropdown-menu, .popover, .tooltip, .list-group-item, .card, .modal-content { font-family: var(--lx-sans); }
code, kbd, pre, samp { font-family: var(--lx-mono); }
code { color: var(--lx-note); background: var(--lx-note-bg); padding: .1em .35em; }
pre code { background: none; padding: 0; }
a { color: var(--lx-accent); }
a:hover { color: var(--lx-accent); text-decoration: underline; }
p { font-size: 15px; line-height: 1.6; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--lx-ink); }
h1, .h1, h2, .h2 { font-weight: 300; letter-spacing: -.03em; line-height: 1.15; }
h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
hr { border-top-color: var(--lx-line); }
.text-muted, small.text-muted { color: var(--lx-muted) !important; }
::selection { background: var(--lx-fill); color: #fff; }
/* the studio stylesheet removes every focus outline; the keyboard needs one */
:focus-visible { outline: 2px solid var(--lx-accent) !important; outline-offset: 2px; }
.container, #header .container, .master-breadcrumb .container { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }

/* ------------------------------------------------------------------ 3 website header */
header.header, #header.header { padding: 0; }
header.header { position: relative; z-index: 20; max-width: 1440px; margin: 0 auto; background: var(--lx-bg); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--lx-line); }
header.header > * { grid-column: 1 / -1; }
header.header > .lx-hdr { grid-row: 1; }
header.header > .topbar { grid-row: 2; }
.lx-hdr, .lx-foot { font-family: var(--lx-sans); -webkit-font-smoothing: antialiased; }
.lx-hdr *, .lx-hdr *::before, .lx-hdr *::after, .lx-foot *, .lx-foot *::before, .lx-foot *::after { box-sizing: border-box; }
.lx-hdr ul, .lx-hdr p, .lx-foot ul, .lx-foot p { margin: 0; padding: 0; list-style: none; }
.lx-hdr a, .lx-foot a { color: inherit; text-decoration: none; line-height: inherit; }
.lx-hdr button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; border-radius: 0; }
.lx-hdr svg, .lx-foot svg { display: block; max-width: none; }
.lx-hdr { position: relative; z-index: 30; height: 64px; border-bottom: 1px solid var(--lx-line); color: var(--lx-ink); }
.lx-hdr-in { display: flex; align-items: center; gap: 32px; height: 100%; padding: 0 32px; }
.lx-logo { display: flex; align-items: center; min-height: 44px; flex: none; padding-left: 6px; }
.lx-logo img { height: 24px; width: auto; display: block; }
.lx-logo-d { display: none !important; }
/* on screen the dark theme shows the white logo; on paper the dark logo stays (the print block near the top) */
@media screen {
  :root:not([data-theme='light']) .lx-logo-l { display: none !important; }
  :root:not([data-theme='light']) .lx-logo-d { display: block !important; }
}
.lx-nav { height: 100%; margin-right: auto; }
.lx-menu { display: flex; height: 100%; }
.lx-menu > li { position: relative; display: flex; }
.lx-menu > li > a, .lx-menu > li > button { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; font-size: 13px;
  font-weight: 400; color: var(--lx-soft); transition: color .2s; }
.lx-menu > li:hover > :first-child, .lx-menu > li:focus-within > :first-child { color: var(--lx-accent); }
.lx-chev svg { width: 7px; height: 7px; transition: transform .35s var(--lx-ease); }
.lx-menu > li:hover .lx-chev svg, .lx-menu > li:focus-within .lx-chev svg { transform: rotate(45deg); }
.lx-drop { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 40; display: grid; gap: 2px; width: max-content; min-width: 260px; padding: 8px !important;
  background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 14px; box-shadow: 0 24px 48px -22px var(--lx-shadow), 0 6px 16px -10px var(--lx-shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity .2s, transform .3s var(--lx-ease), visibility 0s .3s; }
.lx-drop::before { content: ''; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; background: var(--lx-card);
  border: 1px solid var(--lx-line); border-right: 0; border-bottom: 0; border-radius: 3px 0 0; transform: rotate(45deg); }
/* the gap between a menu word and its panel stays part of the hover area */
.lx-drop::after { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.lx-menu > li:hover .lx-drop, .lx-menu > li:focus-within .lx-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .3s var(--lx-ease); }
.lx-drop a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; gap: 12px; padding: 7px 10px 7px 7px; border-radius: 10px;
  font-size: 14px; color: var(--lx-ink); white-space: nowrap; transition: color .2s, background-color .2s; }
.lx-dico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--lx-tint); color: var(--lx-accent);
  transition: background-color .25s, color .25s, transform .35s var(--lx-ease); }
.lx-dico svg { width: 18px; height: 18px; }
.lx-darr svg { width: 12px; height: 12px; color: var(--lx-accent); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--lx-ease); }
.lx-drop a:hover, .lx-drop a:focus-visible { background: var(--lx-tint); }
.lx-drop a:hover .lx-dico, .lx-drop a:focus-visible .lx-dico { background: var(--lx-fill); color: #fff; transform: scale(1.05); }
.lx-drop a:hover .lx-darr svg, .lx-drop a:focus-visible .lx-darr svg { opacity: 1; transform: none; }
.lx-hdr-act { display: flex; align-items: center; gap: 20px; margin-top: -1px; }
.lx-ghost { font-size: 13px; color: var(--lx-soft); }
.lx-hdr a.lx-ghost:hover { color: var(--lx-accent); }

/* The website's button: ink, a blue wipe on hover, one cut corner */
.lx-cta { --cta-bg: var(--lx-ink); --cta-fg: var(--lx-bg); --cta-fill: var(--lx-fill); --cta-fill-fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: min(100%, 300px); height: 48px; padding: 0 28px;
  background: var(--cta-bg); color: var(--cta-fg) !important; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; overflow: hidden;
  transition: transform .2s, color .3s; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.lx-cta::before { content: ''; position: absolute; inset: 0; background: var(--cta-fill); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--lx-snap); }
.lx-cta:hover, .lx-cta:focus-visible { color: var(--cta-fill-fg) !important; text-decoration: none; }
.lx-cta:hover::before, .lx-cta:focus-visible::before { transform: scaleX(1); }
.lx-cta:active { transform: translateY(1px); }
.lx-cta > span { position: relative; }
.lx-cta svg { position: relative; width: 14px; height: 14px; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .45s var(--lx-ease); }
.lx-cta:hover svg, .lx-cta:focus-visible svg { opacity: 1; transform: none; }
.lx-cta-sm { min-width: 0; height: 44px; padding: 0 18px; font-size: 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.lx-tlink { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.lx-tlink svg { width: 13px; height: 13px; transition: transform .35s var(--lx-ease); }
.lx-tlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .45s var(--lx-snap); }
.lx-tlink:hover::after { transform: scaleX(1); }
.lx-tlink:hover svg { transform: translateX(4px); }

/* the dark/light switch */
.lx-theme { position: relative; display: grid !important; place-items: center; width: 44px; height: 44px; flex: none; color: var(--lx-ink) !important; transition: color .2s; }
.lx-theme svg.lx-theme-frame { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--lx-line); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; transition: stroke .2s; }
.lx-theme:hover svg.lx-theme-frame, .lx-theme:focus-visible svg.lx-theme-frame { stroke: var(--lx-accent); }
.lx-theme:hover, .lx-theme:focus-visible { color: var(--lx-accent) !important; }
.lx-theme svg { grid-area: 1 / 1; width: 15px; height: 15px; transition: opacity .3s, transform .5s var(--lx-ease); }
.lx-theme svg path[stroke] { stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lx-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
.lx-sun { opacity: 1; }
:root[data-theme='light'] .lx-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme='light'] .lx-moon { opacity: 1; transform: none; }
:root:not(.js) .lx-theme { display: none !important; }

/* the website menu on phones */
.lx-mobile { display: none; }
.lx-mobile > summary { list-style: none; }
.lx-mobile > summary::-webkit-details-marker, .lx-mgrp > summary::-webkit-details-marker { display: none; }
.lx-burger { display: block; width: 44px; height: 44px; position: relative; cursor: pointer; }
.lx-burger span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--lx-ink); transition: transform .3s var(--lx-ease); }
.lx-burger span:nth-child(1) { top: 18.5px; } .lx-burger span:nth-child(2) { top: 25.5px; }
.lx-mobile[open] > .lx-burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.lx-mobile[open] > .lx-burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.lx-mnav { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; max-height: calc(100vh - 64px); overflow: auto; padding: 8px 32px 24px; background: var(--lx-bg);
  border-bottom: 1px solid var(--lx-line); box-shadow: 0 24px 48px -22px var(--lx-shadow); }
.lx-mgrp, .lx-mnav .lx-mone { border-bottom: 1px solid var(--lx-line); }
.lx-mgrp > summary, .lx-mnav .lx-mone { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-size: 17px; font-weight: 500;
  letter-spacing: -.01em; list-style: none; cursor: pointer; color: var(--lx-ink); transition: color .2s; }
.lx-mgrp > summary .lx-chev svg { width: 9px; height: 9px; color: var(--lx-accent); }
.lx-mone .lx-chev svg { width: 13px; height: 13px; color: var(--lx-accent); }
.lx-mgrp[open] > summary { color: var(--lx-accent); }
.lx-mgrp[open] > summary .lx-chev svg { transform: rotate(45deg); }
.lx-mgrp ul { display: grid; gap: 2px; padding: 0 0 12px !important; }
.lx-mgrp a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px 6px 6px; border-radius: 10px; font-size: 16px; color: var(--lx-ink); }
.lx-mgrp a:hover, .lx-mgrp a:focus-visible { background: var(--lx-tint); }
.lx-mnav > .lx-cta { width: 100%; margin-top: 20px; }

/* ------------------------------------------------------------------ 4 client area bars */
#header.header .container { max-width: none; }
/* logged in: notifications on the left, the account on the right */
header.header .topbar { padding: 0; background: var(--lx-card); color: var(--lx-muted); border-bottom: 1px solid var(--lx-line); font-size: 13px; }
header.header .topbar .d-flex { align-items: center; min-height: 40px; }
header.header .topbar .btn, header.header .topbar .active-client .btn { color: var(--lx-soft); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; padding: 6px 8px; clip-path: none; }
header.header .topbar .btn:hover { color: var(--lx-accent); background: none; }
header.header .topbar .active-client .input-group-text { color: var(--lx-muted); font-size: 13px; }
header.header .topbar .active-client .btn.btn-active-client span { border-bottom: 1px dashed var(--lx-control); }
/* the client menu and, on its right, the knowledgebase search and the cart */
header.header > .main-navbar-wrapper { grid-row: 3; grid-column: 1; padding: 0; }
header.header > .navbar.navbar-light { grid-row: 3; grid-column: 2; padding: 0; }
#header.header > .navbar.navbar-light > .container { padding-left: 16px; min-height: 56px; }
#header.header > .main-navbar-wrapper > .container { padding-right: 0; min-height: 56px; }
/* WHMCS folds menu entries into "More" as soon as the menu is 30px high or more, so the links carry no vertical
   padding: the row gets its height from the bar around them */
#header.header .main-navbar-wrapper .navbar-collapse { padding: 0 !important; }
#header.header .navbar a, #header.header .navbar-nav a { color: var(--lx-soft); font-size: 14px; line-height: 1.5; }
#header.header .navbar-nav > li > a { display: block; padding: 0 14px 0 0; }
#header.header .navbar-nav > li > a.pr-4 { padding-right: 22px !important; }
#header.header .navbar-nav > li > a:hover, #header.header .navbar-nav > li.show > a { color: var(--lx-accent); text-decoration: none; }
header.header .search { width: 240px; border: 1px solid var(--lx-line); border-radius: 0; background: var(--lx-card); }
header.header .search:focus-within { border-color: var(--lx-accent); }
header.header .search .form-control { min-height: 38px; height: 38px; padding: 0 12px 0 0; background: transparent; border: 0 !important; color: var(--lx-ink); font-size: 13px; box-shadow: none; }
header.header .search .btn, header.header .search .btn:hover { height: 38px; padding: 0 12px !important; color: var(--lx-muted) !important; background: transparent !important; border: 0 !important; clip-path: none; }
#header.header .toolbar .nav-link { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; font-size: 14px; border: 1px solid var(--lx-line); border-radius: 0; color: var(--lx-ink); background: transparent; clip-path: none; }
#header.header .toolbar .nav-link:hover { border-color: var(--lx-accent); color: var(--lx-accent); }
header.header .toolbar .nav-link { overflow: visible; }
header.header .toolbar .nav-link .badge { top: -7px; right: -7px; opacity: 1; font-family: var(--lx-sans); letter-spacing: 0; background: var(--lx-fill); color: #fff; border-radius: 50%; font-size: 10px; padding: 3px 5px; }
.lx-ca-label { margin-right: auto; font-family: var(--lx-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-accent) !important; }

/* ------------------------------------------------------------------ 5 page frame */
.master-breadcrumb { max-width: 1440px; margin: 0 auto; background: transparent; border-bottom: 1px solid var(--lx-line); }
.master-breadcrumb .breadcrumb { margin: 0; padding: 14px 0; background: transparent; font-family: var(--lx-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.master-breadcrumb .breadcrumb a { font-family: var(--lx-mono); color: var(--lx-accent); }
.breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before { color: var(--lx-muted); }
section#main-body { padding: 48px 0 72px; background: transparent; }

/* ------------------------------------------------------------------ 6 cards and lists */
.card, .panel { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 0 !important; box-shadow: none; color: var(--lx-ink); }
.card-header, .card-footer, .panel-heading, .panel-footer { background: transparent; background-image: none; border-color: var(--lx-line); border-radius: 0 !important; }
.card-header { padding: 14px 20px; }
.card-body { padding: 20px; border: 0; }
.card-footer { padding: 14px 20px; }
.card-title { color: var(--lx-ink); font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.card-header .card-title i { color: var(--lx-accent); }
.list-group-item { background: transparent; border-color: var(--lx-line); color: var(--lx-ink); }
.list-group-item:first-child, .list-group-item:last-child { border-radius: 0; }
a.list-group-item, .list-group-item-action { color: var(--lx-ink); }
a.list-group-item:hover, a.list-group-item:focus, .list-group-item-action:hover, .list-group-item-action:focus { background: var(--lx-tint); color: var(--lx-ink); text-decoration: none; }
.list-group-item.active, a.list-group-item.active, a.list-group-item.active:hover { background: var(--lx-fill); border-color: var(--lx-fill); color: #fff; }
.list-group-item.active i, .list-group-item.active .badge { color: #fff; }
.list-group-item.disabled, .list-group-item:disabled { background: transparent; color: var(--lx-muted); }
.list-group-item .badge { background: var(--lx-tint); color: var(--lx-accent); border-radius: 0; font-family: var(--lx-mono); font-weight: 400; }
.list-group-item.active .badge { background: rgba(255, 255, 255, .18); }
/* side panels: a small mono title, as the footer columns of the website */
.sidebar .card-sidebar, .cart-sidebar .card-sidebar { border: 1px solid var(--lx-line); }
.sidebar .card-sidebar .card-header, .cart-sidebar .card-sidebar .card-header { padding: 14px 20px; }
.sidebar .card-sidebar .card-title, .cart-sidebar .card-sidebar .card-title { font-family: var(--lx-mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-accent); }
.sidebar .card-sidebar .card-title i, .cart-sidebar .card-sidebar .card-title i { color: var(--lx-accent); }
.sidebar .card-sidebar .card-minimise, .cart-sidebar .card-sidebar .card-minimise { color: var(--lx-muted); }
.sidebar .card-sidebar .card-body, .cart-sidebar .card-sidebar .card-body { background: transparent; border: 0; color: var(--lx-ink); }
.sidebar .list-group-item, .cart-sidebar .list-group-item { padding: 11px 20px; font-size: 14px; }
.sidebar .list-group-item i, .cart-sidebar .list-group-item i { color: var(--lx-accent); }
.sidebar .list-group-item.active i, .cart-sidebar .list-group-item.active i { color: #fff; }
/* dashboard: the four counters and the panels */
.tiles .row > div:nth-child(n) > .tile { background: var(--lx-card); border: 1px solid var(--lx-line); border-left-width: 0; color: var(--lx-ink); }
.tiles .row > div:first-child > .tile { border-left-width: 1px; }
.tiles .tile:hover { background: var(--lx-tint); text-decoration: none; }
.tiles .tile i { color: var(--lx-accent); opacity: .9; }
.tiles .tile .stat { color: var(--lx-ink); font-weight: 300; letter-spacing: -.03em; }
.tiles .tile .title { font-family: var(--lx-mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; color: var(--lx-muted); }
.tiles .tile .highlight { background: var(--lx-fill) !important; height: 2px; }
.client-home-cards .card { border-top: 2px solid var(--lx-fill); }
.client-home-cards .card.card-accent-red, .client-home-cards .card.card-accent-pomegranate { border-top-color: #d32f45; }
.client-home-cards .card-header .card-title .btn { clip-path: none; padding: 5px 10px; font-size: 11px; border-radius: 0 !important; }
.client-home-cards .list-group { border-radius: 0; }
.client-home-cards .list-group-item { border-left: 0; border-right: 0; padding: 12px 20px; }
/* a panel's footer is printed even when it is empty: it takes room only when it holds something */
.client-home-cards .card-footer { padding: 0; border: 0; }
.client-home-cards .card-footer > * { margin: 14px 20px; }
.client-home-cards .card-body { border: 0; background: transparent; }
.client-home-cards .card .list-group, .client-home-cards .card .list-group-item:last-child { border-bottom: 0; }
/* WHMCS's script writes a light grey line under the last visible entry of a panel */
.client-home-cards .list-group-item[style*='border-bottom'] { border-bottom-color: var(--lx-line) !important; }
.text-domain, .text-last-updated { color: var(--lx-muted); }

/* ------------------------------------------------------------------ 7 tables */
.table { color: var(--lx-ink); }
.table th, .table td { border-top-color: var(--lx-line); vertical-align: middle; }
.table thead th { border-bottom: 1px solid var(--lx-line); border-top: 0; font-family: var(--lx-mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--lx-muted); background: transparent; }
.table-hover tbody tr:hover, .table-list tbody tr:hover, table.table-list tbody tr:hover td { background: var(--lx-tint); color: var(--lx-ink); }
/* a wide table scrolls sideways inside its own box instead of making the whole page wider than a phone screen */
.table-container { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 0; padding: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-container .table { margin: 0; }
.table-container .table td, .table-container .table th { padding: 14px 20px; }
table.table-list, table.table-list thead th, table.table-list tbody td { border-left: 0; border-right: 0; background: transparent; background-image: none; }
table.table-list, table.dataTable { border: 0; border-radius: 0; margin: 0 !important; }
table.table-list thead th, table.dataTable thead th { background-color: transparent !important; background-image: none !important; border-bottom: 1px solid var(--lx-line) !important; }
.dataTables_wrapper .dataTables_info { background: transparent; border-bottom: 1px solid var(--lx-line); border-radius: 0; color: var(--lx-muted); font-size: 13px; padding: 12px 20px; }
.dataTables_wrapper .dataTables_filter { padding: 0; }
.dataTables_wrapper .dataTables_filter label .form-control { min-height: 36px; height: 36px; margin: 6px 12px 6px 0; background: var(--lx-field); border-color: var(--lx-line); }
.dataTables_wrapper .dataTables_length { color: var(--lx-muted); font-size: 13px; padding: 12px 20px; }
.dataTables_wrapper .dataTables_paginate { padding: 8px 12px; }
.pagination .page-link, .dataTables_wrapper .dataTables_paginate .pagination > li > a { background: transparent; border: 1px solid var(--lx-line); border-radius: 0 !important; color: var(--lx-ink); }
.pagination .page-item.active .page-link { background: var(--lx-fill); border-color: var(--lx-fill); color: #fff; }
.pagination .page-item.disabled .page-link { background: transparent; color: var(--lx-muted); }
.pagination .page-link:hover { background: var(--lx-tint); color: var(--lx-accent); }

/* ------------------------------------------------------------------ 8 forms */
label, .form-control-label { color: var(--lx-ink); font-size: 14px; font-weight: 500; }
.form-control, .custom-select, .custom-file-label, .field, input.field { min-height: 44px; background-color: var(--lx-field); border: 1px solid var(--lx-edge) !important; border-radius: 0 !important; color: var(--lx-ink); font-size: 15px; box-shadow: none; }
.form-control-sm { min-height: 36px; }
textarea.form-control { min-height: 120px; }
.form-control::placeholder, .field::placeholder { color: var(--lx-muted); opacity: 1; }
/* the arrow of a styled select, in the text colour of each theme */
/* one arrow for every drop-down: WHMCS marks some with "custom-select" and leaves others to the browser's own arrow.
   The registration page needs its own line: a repeated studio rule there takes every background picture off its fields. */
select.form-control:not([multiple]):not([size]), select.field:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 2rem; }
.custom-select, select.form-control:not([multiple]):not([size]), select.field:not([multiple]):not([size]),
html #registration select.form-control:not([multiple]):not([size]), html #registration select.field:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%23e6e9f2' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 8px 10px; }
:root[data-theme='light'] .custom-select, .module-client-area .custom-select, .landing-page .custom-select, .wp-toolkit .custom-select, .social-bee .custom-select, .promo-wrapper .custom-select, :root[data-theme='light'] select.form-control:not([multiple]):not([size]), :root[data-theme='light'] select.field:not([multiple]):not([size]), .module-client-area select.form-control:not([multiple]):not([size]), .module-client-area select.field:not([multiple]):not([size]), .landing-page select.form-control:not([multiple]):not([size]), .landing-page select.field:not([multiple]):not([size]), .wp-toolkit select.form-control:not([multiple]):not([size]), .wp-toolkit select.field:not([multiple]):not([size]), .social-bee select.form-control:not([multiple]):not([size]), .social-bee select.field:not([multiple]):not([size]), .promo-wrapper select.form-control:not([multiple]):not([size]), .promo-wrapper select.field:not([multiple]):not([size]), :root[data-theme='light'] #registration select.form-control:not([multiple]):not([size]), :root[data-theme='light'] #registration select.field:not([multiple]):not([size]), .invoice-container .custom-select, .invoice-container select.form-control:not([multiple]):not([size]), .invoice-container select.field:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%230a0f1f' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); }
/* a field that failed or passed a check keeps its coloured edge */
.form-control.is-invalid, .custom-select.is-invalid, .was-validated .form-control:invalid, .field.is-invalid { border-color: var(--lx-bad) !important; }
.form-control.is-valid, .custom-select.is-valid, .was-validated .form-control:valid, .field.is-valid { border-color: var(--lx-ok) !important; }
.form-control.is-warning, .field.is-warning { border-color: var(--lx-warn) !important; }
.form-control:focus, .custom-select:focus, .field:focus { background-color: var(--lx-field); border-color: var(--lx-accent) !important; color: var(--lx-ink); box-shadow: 0 0 0 3px var(--lx-tint); }
.form-control:disabled, .form-control[readonly] { background-color: var(--lx-tint); color: var(--lx-muted); }
select.form-control, .custom-select { color: var(--lx-ink); }
select.form-control option, .custom-select option { background: var(--lx-card); color: var(--lx-ink); }
.input-group-text { background: var(--lx-card); border: 1px solid var(--lx-edge); border-radius: 0; color: var(--lx-muted); }
.input-group > .form-control:not(:first-child), .input-group > .input-group-append > .btn, .input-group > .input-group-prepend > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend > .input-group-text { border-radius: 0; }
.input-group-merge .form-control, .input-group-merge .input-group-text { border-radius: 0 !important; }
.custom-file-label::after { background: var(--lx-card); color: var(--lx-ink); border-left: 1px solid var(--lx-control); border-radius: 0; height: auto; top: 0; bottom: 0; display: flex; align-items: center; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--lx-fill); }
/* Radio buttons and checkboxes that WHMCS wraps in a box of its own (in the cart, and on a few client area pages).
   They are drawn here, so that the chosen one shows in both themes. The studio stylesheet shows one ticked picture
   for every state, chosen or not; that picture is switched off. */
html .icheckbox_square-blue, html .iradio_square-blue { position: relative; box-sizing: border-box; width: 22px; height: 22px; background: var(--lx-field) !important;
  border: 1px solid var(--lx-control) !important; border-radius: 0; transition: border-color .2s, background-color .2s; }
html .iradio_square-blue { border-radius: 50%; }
html .icheckbox_square-blue::before, html .iradio_square-blue::before { content: ''; position: absolute; left: auto; top: auto; width: auto; height: auto; background-image: none; }
html .icheckbox_square-blue.hover, html .iradio_square-blue.hover, html .icheckbox_square-blue.focus, html .iradio_square-blue.focus { border-color: var(--lx-accent) !important; }
html .iradio_square-blue.checked { border-color: var(--lx-fill) !important; }
html .iradio_square-blue.checked::before { left: 5px; top: 5px; right: 5px; bottom: 5px; border-radius: 50%; background: var(--lx-fill); }
html .icheckbox_square-blue.checked { background: var(--lx-fill) !important; border-color: var(--lx-fill) !important; }
html .icheckbox_square-blue.checked::before { left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
html .icheckbox_square-blue.disabled, html .iradio_square-blue.disabled { opacity: .5; cursor: default; }
/* keyboard focus: a ring around the control, also when it is the chosen one */
html .icheckbox_square-blue.focus, html .iradio_square-blue.focus { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.form-text, .help-block, .field-help-text { color: var(--lx-muted); }
.intl-tel-input .selected-flag { background: var(--lx-card) !important; border-right: 1px solid var(--lx-control); }
.intl-tel-input .country-list { background: var(--lx-card); border-color: var(--lx-line); color: var(--lx-ink); }
.intl-tel-input .country-list .country.highlight { background: var(--lx-tint); }
.intl-tel-input .selected-dial-code { color: var(--lx-ink); }

/* ------------------------------------------------------------------ 9 buttons */
.btn { border-radius: 0 !important; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; box-shadow: none !important; transition: background-color .25s, border-color .25s, color .25s; }
.btn:not(.btn-sm):not(.btn-xs):not(.btn-link) { padding: 10px 20px; }
.btn-sm, .btn-xs { font-size: 12px; }
.btn-link { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--lx-accent); }
/* main action: the website's ink button, blue on hover */
.btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: var(--lx-ink) !important; background-image: none !important; border: 1px solid var(--lx-ink) !important; color: var(--lx-bg) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background: var(--lx-fill) !important; border-color: var(--lx-fill) !important; color: #fff !important; }
/* confirming action (Update, Pay, Register): the website's blue */
.btn-success, .btn-success.disabled, .btn-success:disabled, .btn-info, .btn-warning { background: var(--lx-fill) !important; background-image: none !important; border: 1px solid var(--lx-fill) !important; color: #fff !important; }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle, .btn-info:hover, .btn-info:focus, .btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active { background: var(--lx-deep) !important; border-color: var(--lx-deep) !important; color: #fff !important; }
/* second action: an outline */
.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary { background: transparent !important; border: 1px solid var(--lx-control) !important; color: var(--lx-ink) !important; }
.input-group .btn-default, .input-group .btn-secondary { border-color: var(--lx-edge) !important; }
.btn-default:hover, .btn-default:focus, .btn-default.active, .btn-default:not(:disabled):not(.disabled):active, .btn-secondary:hover, .btn-secondary:focus, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover,
.show > .btn-default.dropdown-toggle { background: var(--lx-tint) !important; border-color: var(--lx-accent) !important; color: var(--lx-accent) !important; }
.btn-danger { border: 1px solid transparent; }
.btn.disabled, .btn:disabled { opacity: .5; pointer-events: none; }
/* one cut corner on the main buttons that stand alone, as on the website */
.btn-primary:not(.btn-sm):not(.btn-xs):not(.btn-block):not(.dropdown-toggle), .btn-success:not(.btn-sm):not(.btn-xs):not(.btn-block):not(.dropdown-toggle) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.input-group .btn, .btn-group .btn, .btn-group-vertical .btn { clip-path: none !important; }
/* the keyboard ring sits inside these buttons (a ring outside would be cut with the corner) and is white on their blue */
.btn-primary:focus-visible, .btn-success:focus-visible, .btn-info:focus-visible, .btn-warning:focus-visible, .btn-danger:focus-visible { outline-color: #fff !important; outline-offset: -4px; }
.btn-default.bg-color-gold, .btn-default.bg-color-blue, .btn-default.bg-color-red, .btn-default.bg-color-emerald, .btn-default.bg-color-asbestos, .btn-default[class*='bg-color-'] { background: transparent !important; border: 1px solid var(--lx-control) !important; color: var(--lx-ink) !important; }
.btn-default[class*='bg-color-']:hover { border-color: var(--lx-accent) !important; color: var(--lx-accent) !important; background: var(--lx-tint) !important; }

/* ------------------------------------------------------------------ 10 labels and alerts */
/* A state is a small tag: coloured text on a faint background of the same tone. */
.badge { border-radius: 0; font-family: var(--lx-mono); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.label, .label.status, .view-ticket .requestor-badge { --tone: var(--lx-idle); --tone-bg: var(--lx-idle-bg); display: inline-block; padding: 4px 9px; border-radius: 0;
  background-color: var(--tone-bg); color: var(--tone); box-shadow: inset 0 0 0 1px var(--tone-bg); font-family: var(--lx-mono); font-size: 11px; font-weight: 400;
  line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; text-shadow: none; }
.label.status-active, .label.status-completed, .label.status-open, .label.status-paid, .label.status-accepted, .label.label-success, .label.requestor-type-owner { --tone: var(--lx-ok); --tone-bg: var(--lx-ok-bg); }
.label.status-pending, .label.status-pending-transfer, .label.status-suspended, .label.status-customer-reply, .label.status-grace, .label.status-pending-registration,
.label.status-redemption, .label.status-refunded, .label.status-inprogress, .label.label-warning, .label.requestor-type-registereduser { --tone: var(--lx-warn); --tone-bg: var(--lx-warn-bg); }
.label.status-unpaid, .label.status-overdue, .label.status-fraud, .label.status-collections, .label.status-dead, .label.status-lost, .label.label-danger { --tone: var(--lx-bad); --tone-bg: var(--lx-bad-bg); }
.label.status-answered, .label.status-onhold, .label.status-payment-pending, .label.status-delivered, .label.label-info, .label.label-primary, .label.requestor-type-operator { --tone: var(--lx-note); --tone-bg: var(--lx-note-bg); }
/* a ticket status carries the colour set in WHMCS (Support > Ticket Statuses) as an inline background: it shows as a strip
   on the left of the tag, so the text stays readable whatever colour was chosen */
.label.status.status-custom { padding-left: 15px; color: var(--lx-ink); background-image: linear-gradient(to right, transparent 0, transparent 5px, var(--lx-card) 5px);
  box-shadow: inset 0 0 0 1px var(--lx-line); }
.alert { --tone: var(--lx-note); --tone-bg: var(--lx-note-bg); border-radius: 0; border: 0 !important; border-left: 2px solid var(--tone) !important; background: var(--tone-bg) !important; color: var(--lx-ink) !important; }
.alert-success { --tone: var(--lx-ok); --tone-bg: var(--lx-ok-bg); }
.alert-warning { --tone: var(--lx-warn); --tone-bg: var(--lx-warn-bg); }
.alert-danger, .alert-error { --tone: var(--lx-bad); --tone-bg: var(--lx-bad-bg); }
/* the ticket number in the "ticket created" notice takes the notice's text colour (the studio paints it white by its id) */
html .alert #ticket-number { color: inherit; }
.alert a, .alert .alert-link { color: inherit; text-decoration: underline; }
.alert h1, .alert h2, .alert h3, .alert h4, .alert strong, .alert i { color: inherit; }
.text-success { color: var(--lx-ok) !important; } .text-danger { color: var(--lx-bad) !important; } .text-warning { color: var(--lx-warn) !important; } .text-info, .text-primary { color: var(--lx-note) !important; }
.close { color: var(--lx-ink); text-shadow: none; opacity: .7; }
.close:hover { color: var(--lx-accent); opacity: 1; }
.progress { background: var(--lx-line); border-radius: 0; }
.progress-bar { background-color: var(--lx-fill); }

/* ------------------------------------------------------------------ 11 dialogs and menus */
.modal-content { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 0; color: var(--lx-ink); box-shadow: 0 24px 48px -22px var(--lx-shadow); }
.modal-header, .modal-footer { border-color: var(--lx-line); border-radius: 0; background: transparent; }
.modal-title { color: var(--lx-ink); font-weight: 500; }
.modal-backdrop { background: #05080f; }
/* WHMCS's dialog for the language and currency chooser: the theme's colours in place of the stock dark panel with a map */
html .modal-localisation .modal-content { background: var(--lx-card); }
html .modal-localisation .modal-body { padding: 24px; background-image: none; }
html .modal-localisation .h5 { color: var(--lx-ink); }
html .modal-localisation .close { color: var(--lx-ink) !important; text-shadow: none; opacity: .8; }
html .modal-localisation .item-selector .item { margin: 4px 0; padding: 6px 4px; border: 1px solid var(--lx-edge); border-radius: 0; color: var(--lx-ink); overflow-wrap: anywhere; }
html .modal-localisation .item-selector .item:hover { background: var(--lx-tint); border-color: var(--lx-accent); color: var(--lx-ink); }
html .modal-localisation .item-selector .item.active { background: var(--lx-fill); border-color: var(--lx-fill); color: #fff; }
html .modal-localisation .modal-footer { border: 0; }
.dropdown-menu { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 10px; box-shadow: 0 24px 48px -22px var(--lx-shadow), 0 6px 16px -10px var(--lx-shadow); color: var(--lx-ink); padding: 8px; }
.dropdown-menu .dropdown-item, header.header .dropdown-menu a.dropdown-item { color: var(--lx-ink); border-radius: 6px; font-size: 14px; }
.dropdown-menu li.dropdown-item { padding: 0; background: transparent; }
.dropdown-menu li.dropdown-item > a.dropdown-item { padding: 8px 12px !important; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, header.header .dropdown-item.active, header.header .dropdown-item:active { background: var(--lx-tint); color: var(--lx-accent); text-decoration: none; }
.dropdown-menu li.dropdown-item:hover { background: transparent; }
.dropdown-divider { border-top-color: var(--lx-line); }
.popover { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 0; box-shadow: 0 24px 48px -22px var(--lx-shadow); }
.popover-body { color: var(--lx-ink); }
.popover-header { background: transparent; border-bottom-color: var(--lx-line); color: var(--lx-ink); }
.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^='bottom'] > .arrow::before { border-bottom-color: var(--lx-line); }
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^='bottom'] > .arrow::after { border-bottom-color: var(--lx-card); }
.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^='top'] > .arrow::before { border-top-color: var(--lx-line); }
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^='top'] > .arrow::after { border-top-color: var(--lx-card); }
.client-alerts li a { color: var(--lx-ink); }
.client-alerts li a:hover { background: var(--lx-tint); }
.tooltip-inner { background: var(--lx-band); color: #fff; border-radius: 0; font-size: 12px; }
:root[data-theme='light'] .tooltip-inner { background: #0a0f1f; }
.nav-tabs { border-bottom: 1px solid var(--lx-line); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--lx-muted); }
.nav-tabs .nav-link:hover { border-color: transparent; color: var(--lx-accent); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: transparent; border-bottom-color: var(--lx-fill); color: var(--lx-ink); }

/* ------------------------------------------------------------------ 12 pages */
/* sign in, register, password reset */
.login-form .card, .card.mw-540 { border: 1px solid var(--lx-line); }
.login-form .card-footer { background: transparent; }
/* tickets */
.card.view-ticket { border: 1px solid var(--lx-line); }
.view-ticket .ticket-reply { border: 1px solid var(--lx-line); border-radius: 0; background: var(--lx-bg); }
.view-ticket .ticket-reply .posted-by { background: transparent; border-bottom: 1px solid var(--lx-line); color: var(--lx-muted); font-size: 13px; }
.view-ticket .ticket-reply .posted-by-name { color: var(--lx-ink); font-weight: 500; }
.view-ticket .ticket-reply.staff { border-left: 2px solid var(--lx-fill); }
.view-ticket .ticket-reply.staff .posted-by { background: var(--lx-tint); }
.ticket-reply .message { color: var(--lx-ink); }
.requestor-badge { border-radius: 0; }
/* the pop-up that shows a sent email: the message keeps its own white paper */
#popup-backdrop { background: var(--lx-bg); }
#popup-backdrop iframe { background: #fff; }
/* knowledgebase and portal home */
.kb-search .form-control { min-height: 52px; }
.card.kb-category, .kb-category a { color: var(--lx-ink); }
.home-domain-search, .home-domain-search.bg-white { background-color: var(--lx-band) !important; background-image: repeating-linear-gradient(135deg, rgba(238, 241, 255, .04) 0 1px, transparent 1px 6px); border-bottom: 1px solid var(--lx-line); max-width: 1440px; margin: 0 auto; }
.home-domain-search h2, .home-domain-search .h2, .home-domain-search p, .home-domain-search a { color: #fff; }
.home-domain-search h2 span, .home-domain-search .h2 span { color: #8fa8ff; }
.home-domain-search .input-group-wrapper { border-radius: 0; }
.home-domain-search .input-group-wrapper .btn { border-radius: 0 !important; }
.home-domain-search h2, .home-domain-search .h2 { font-weight: 300; letter-spacing: -.035em; }
.card-columns.home .card, .action-icon-btns a { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 0; color: var(--lx-ink); }
.action-icon-btns a:hover { background: var(--lx-tint); text-decoration: none; }
.action-icon-btns a i, .action-icon-btns a .ico-container { color: var(--lx-accent); }
/* product details */
.module-client-area { padding: 20px; background: var(--lx-card); color: var(--lx-ink); border: 1px solid var(--lx-line); }
.module-client-area:empty { display: none; }
/* ---- the pages of WHMCS's MarketConnect store (LyraHosting does not use the store). They keep the light look their own
   stylesheet (css/store.css, loaded in the page body) gives them, in both themes (see section 1). The rules below only
   keep this template's own rules out of them and make the store's texts readable where its colours are too faint. */
.landing-page, .wp-toolkit, .social-bee { background-color: var(--lx-bg); color: var(--lx-ink); }
/* a store page that is a little wider than a small screen is cut at the screen edge instead of making the whole page scroll sideways */
.landing-page, .wp-toolkit, .social-bee { overflow-x: clip; }
.promo-wrapper, .invoice-container { color: var(--lx-ink); }
.landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4, .landing-page h5, .landing-page h6,
.wp-toolkit h1, .wp-toolkit h2, .wp-toolkit h3, .wp-toolkit h4, .wp-toolkit h5, .wp-toolkit h6,
.social-bee h1, .social-bee h2, .social-bee h3, .social-bee h4, .social-bee h5, .social-bee h6,
.promo-wrapper h1, .promo-wrapper h2, .promo-wrapper h3, .promo-wrapper h4, .promo-wrapper h5, .promo-wrapper h6,
.invoice-container h1, .invoice-container h2, .invoice-container h3, .invoice-container h4, .invoice-container h5, .invoice-container h6 { color: inherit; }
/* the plain button as the store expects it: a white button with dark text, also on the store's dark bands */
html .landing-page .btn-default, html .wp-toolkit .btn-default, html .social-bee .btn-default, html .promo-wrapper .btn-default { background: #fff !important; border: 1px solid rgba(10, 15, 31, .4) !important; color: #0a0f1f !important; }
html .landing-page .btn-group .btn-default.active { background: #0a0f1f !important; border-color: #0a0f1f !important; color: #fff !important; }
html .landing-page .navbar .nav-link { color: #4a5263; }
/* the store's own texts that are too faint on its own backgrounds: white on a bright fill becomes dark, pale grey darker */
html .landing-page .strong-green, html .landing-page .strong-green span { color: #4c7a12 !important; }
html .landing-page.codeguard li span, html .landing-page .help-me-choose .ideal, html .landing-page .tplname, html .landing-page .trusted-by .text-right { color: #5b6475 !important; }
html .landing-page.sitebuilder .nav-tabs .nav-link.active { color: #b3003b !important; }
html .landing-page .emergency .text-danger { color: #ff9aa5 !important; }
html .landing-page .btn-start, html .landing-page .btn-buy, html .landing-page .btn-learn-more,
html .landing-page.mail-services .product-options, html .landing-page.mail-services .product-options h2, html .landing-page.mail-services .product-options h4,
html .landing-page.mail-services .product-options .powered-by, html .landing-page .get-started, html .landing-page .get-started h2, html .landing-page .get-started h4,
html .landing-page .get-started .option, html .landing-page .get-started .price,
html .landing-page.ssl .certificate-options > .container > h3, html .landing-page.ssl .standout-1 h3,
html .landing-page .row-revenue .col-12, html .landing-page.codeguard .price-calc-container .price, html .landing-page.codeguard .col-md-9 > h2 { color: #0a0f1f !important; }
html .landing-page.mail-services .item .price { color: #006f8a !important; }
html .landing-page .row-revenue > div:last-child .col-12 { color: #fff !important; }
html .landing-page.ox table th { background-color: #2d6a9c !important; }
html .wp-toolkit .product-name { color: #2d6a9c !important; }
.product-details .product-icon, .product-status { border-radius: 0 !important; }
.product-details .product-icon { background: var(--lx-tint); }
.product-details .product-icon .fa-circle { color: var(--lx-fill); }

/* found by rendering the parts of pages alone (the sweep's part pass) */
/* the status tag of a service in the dashboard's list: a stock rule paints its text white on every tone */
html .div-service-status .label { color: var(--tone); }
/* a dialog with a blue title bar (the password generator): white title and close button in both themes */
html .modal-header.bg-primary, html .modal-header.bg-primary .modal-title, html .modal-header.bg-primary .close { color: #fff !important; text-shadow: none; }
/* the prices under the featured domain endings on the dark search band of the portal home: light text in both themes */
html .tld-logos li { color: rgba(230, 233, 242, .86); }
/* the usage-billing table of a service can be moved sideways on a small screen instead of widening the page */
@media (max-width: 767px) { html table.table-solid-bottom-border-light-gray { display: block; max-width: 100%; overflow-x: auto; } }
/* the close button of the two verification banners (email address, documents): the stock half-grey is under 4.5:1 on
   the banner in both themes; the page's muted text colour, and the full text colour on hover and keyboard focus */
html .verification-banner .btn.close { color: var(--lx-muted); }
html .verification-banner .btn.close:hover, html .verification-banner .btn.close:focus { color: var(--lx-ink); }
/* two more of WHMCS's own blocks that are wider than a small phone (stock Twenty-One too): the saved cards at the checkout
   and the table of linked sign-in accounts; like the usage-billing table, each can be moved sideways on its own */
@media (max-width: 767px) {
  html #order-standard_cart .cc-input-container .existing-cc-grid { max-width: 100%; overflow-x: auto; }
  html table#tableLinkedAccounts { display: block; max-width: 100% !important; overflow-x: auto; } /* DataTables sets max-width: none !important */
}

/* found in the release-day trial on the live WHMCS (2026-11-13) */
/* portal home: the studio set the product-group cards in one row that never wraps (custom.css, from 991px); with the
   live site's 10 visible product groups and the 2 domain cards they became slivers with vertical text. A grid instead,
   with stock Twenty-One's counts: two cards per row from 576px, three from 992px; below 576px the stock layout (one card
   per row) is left as it was */
@media (min-width: 576px) {
  html .card-columns.home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; column-count: auto; }
  html .card-columns.home .card { display: flex; flex: none; width: auto; margin-bottom: 0 !important; }
  html .card-columns.home .card-body { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
}
@media (min-width: 992px) { html .card-columns.home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* LyraHosting's own customer feedback page (feedback.tpl, taken over from the live Twenty-One): its two boxes hold
   HostAdvice's white widgets, so they stay white in both themes, with dark text */
html .feedback-col-form, html .feedback-col-list { background: #fff; color: #0a0f1f; border-color: #e5e5e5; border-radius: 0; }
html .feedback-col-title { color: #0a0f1f; border-bottom-color: #e5e5e5; }
/* the feedback page's own rule gives each box at least 320px plus padding, wider than a 320px phone */
@media (max-width: 400px) { html .feedback-col-form, html .feedback-col-list { min-width: 0; } }
/* the reseller invoice page loads WHMCS's invoice.css, whose breadcrumb grey is under 4.5:1 on the page */
html .master-breadcrumb .breadcrumb-item.active { color: var(--lx-muted); }
/* and its "Back to Client Area" link, outside the white sheet, keeps invoice.css's blue (3.2:1 on the dark page) */
html .primary-content > p.hidden-print > a { color: var(--lx-accent); }
/* the quantity slider of the order form's configure page (WHMCS's ion.rangeSlider with its "Modern" skin, loaded from
   /assets/css after this file): its green bar, green value label, grey sprite track and handle in the site's colours.
   The selectors carry #order-standard_cart so they win over the skin, which the page loads later. */
html #order-standard_cart .irs-line { background: var(--lx-edge); border-radius: 0; }
html #order-standard_cart .irs-line-left, html #order-standard_cart .irs-line-mid, html #order-standard_cart .irs-line-right { background: none; }
html #order-standard_cart .irs-bar, html #order-standard_cart .irs-bar-edge { background: var(--lx-fill); background-image: none; border: 0; border-radius: 0; }
html #order-standard_cart .irs-slider { background: var(--lx-card); background-image: none; border: 2px solid var(--lx-fill); border-radius: 0; box-shadow: none; }
html #order-standard_cart .irs-slider.state_hover, html #order-standard_cart .irs-slider:hover { background: var(--lx-fill); }
html #order-standard_cart .irs-from, html #order-standard_cart .irs-to, html #order-standard_cart .irs-single { background: var(--lx-fill); color: #fff; border-radius: 0; }
html #order-standard_cart .irs-from::after, html #order-standard_cart .irs-to::after, html #order-standard_cart .irs-single::after { border-top-color: var(--lx-fill); }
html #order-standard_cart .irs-min, html #order-standard_cart .irs-max { background: var(--lx-card); color: var(--lx-muted); border: 1px solid var(--lx-line); border-radius: 0; }
html #order-standard_cart .irs-grid-pol { background: var(--lx-control); }
html #order-standard_cart .irs-grid-text { color: var(--lx-muted); }

/* the upgrade page's price boxes: the studio's rules for its own site footer (class "footer": a tall padding and a
   background picture) also reach the box's lower part, which uses the same class name; back to the stock 20px */
html .product .footer, html .plan .footer { width: auto; padding: 20px !important; background-image: none; }
html .upgrade .products .product .header, html .upgrade .products .product .header h4 { color: #fff; }
/* the row of buttons above the domain list wraps on a narrow screen instead of widening the page */
#domainForm > .btn-group { flex-wrap: wrap; }
/* the figure boxes of the affiliates page: the icon stays inside the box */
.affiliate-stat { overflow: hidden; }
@media (max-width: 520px) {
  .display-1 { font-size: 3.5rem; }
  .primary-content > .container > .p-5, .primary-content > .text-center.p-5 { padding: 2rem 0 !important; }
}

/* square corners where a stock rule still rounded them: list tables, on/off switches, the search buttons joined to a
   field, the last list in a card, the message editor */
html .dataTables_wrapper table.table-list, html table.dataTable, html table.dataTable th, html table.dataTable td,
html .bootstrap-switch, html .bootstrap-switch span, html .bootstrap-switch div,
html .input-group-btn > .btn, html .client-home-cards .card .input-group-btn.input-group-append .btn.btn-success,
html .btn.btn-input-padded-responsive, html .card > .list-group-flush, html .md-editor,
html .nav-tabs.responsive-tabs-sm, html .nav-tabs.responsive-tabs-sm .nav-item, html .nav-tabs.responsive-tabs-sm .nav-link, html .breadcrumb { border-radius: 0 !important; }
/* the affiliates page: air between the withdrawal button and the heading that follows */
.primary-content > .text-center + h2 { margin-top: 28px; }
/* a list table wider than a small screen can be moved sideways; a shade at the edge shows that more follows */
@media (max-width: 767px) {
  .table-container { background: linear-gradient(to right, var(--lx-card) 40%, transparent) left center / 36px 100% no-repeat local, linear-gradient(to left, var(--lx-card) 40%, transparent) right center / 36px 100% no-repeat local, linear-gradient(to right, var(--lx-edge), transparent) left center / 12px 100% no-repeat scroll, linear-gradient(to left, var(--lx-edge), transparent) right center / 12px 100% no-repeat scroll, var(--lx-card); }
  /* buttons that wrap under each other keep a gap (a button that stands alone in its place, or fills the whole width, is left as it is) */
  td > .btn:not(:only-child):not(.btn-block) { margin-top: 3px; margin-bottom: 3px; }
}
@media (max-width: 520px) {
  .primary-content .text-center > .btn:not(:only-child):not(.btn-block), .primary-content .form-group > .btn:not(:only-child):not(.btn-block) { margin-top: 4px; margin-bottom: 4px; }
}

/* ------------------------------------------------------------------ 13 website footer */
.lx-foot { max-width: 1440px; margin: 0 auto; padding: 64px 32px 0; border-top: 1px solid var(--lx-line); background: var(--lx-bg); color: var(--lx-ink); font-size: 15px; line-height: 1.6; }
.lx-fcta { --cta-bg: var(--lx-aink); --cta-fg: var(--lx-deep); --cta-fill: #0a0f1f; --cta-fill-fg: var(--lx-aink);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 64px; padding: 64px 32px; background: var(--lx-fill); color: var(--lx-aink);
  background-image: repeating-linear-gradient(135deg, rgba(238, 241, 255, .06) 0 1px, transparent 1px 6px);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.lx-fcta .lx-cta { --cta-bg: var(--lx-aink); --cta-fg: var(--lx-deep); }
.lx-foot p.lx-fcta-h { font-weight: 300; font-size: clamp(28px, 2.5vw, 36px); letter-spacing: -.035em; line-height: 1.15; color: var(--lx-aink); }
.lx-fcta-h span { font-weight: 500; }
.lx-foot p.lx-fcta-p { margin-top: 12px; font-size: 16px; color: rgba(238, 241, 255, .9); }
.lx-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.lx-fcta .lx-tlink { color: var(--lx-aink); }
.lx-fgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px 24px; padding: 64px 32px; }
.lx-fgrid nav ul { display: grid; gap: 12px; }
.lx-fbrand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lx-foot .lx-fbrand > p { max-width: 26em; font-size: 14px; color: var(--lx-muted); line-height: 1.6; }
.lx-flogo { padding-block: 6px; }
.lx-flogo img { width: 160px; height: auto; display: block; }
.lx-fcontact { display: grid; gap: 12px; font-size: 14px; }
.lx-fcontact a { display: inline-flex; align-items: center; gap: 10px; overflow-wrap: anywhere; transition: color .2s; }
.lx-foot .lx-fcontact a:hover { color: var(--lx-accent); }
.lx-fcontact svg, .lx-socials svg { width: 16px; height: 16px; color: var(--lx-accent); flex: none; }
.lx-socials { display: flex; gap: 8px; }
.lx-socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--lx-line); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: background-color .3s, border-color .3s; }
.lx-socials a:hover, .lx-socials a:focus-visible { background: var(--lx-fill); border-color: var(--lx-fill); }
.lx-socials a:hover svg, .lx-socials a:focus-visible svg { color: #fff; }
.lx-foot p.lx-ftitle { margin-bottom: 16px; font-family: var(--lx-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-accent); }
.lx-foot a.lx-link { position: relative; display: inline-flex; align-items: center; font-size: 14px; line-height: 1.45; color: var(--lx-muted); transition: color .25s, transform .35s var(--lx-ease); }
.lx-link::before { content: ''; position: absolute; top: 50%; left: -12px; width: 5px; height: 5px; margin-top: -2.5px; background: var(--lx-accent); transform: rotate(45deg) scale(0); transition: transform .3s var(--lx-ease); }
.lx-foot a.lx-link:hover, .lx-foot a.lx-link:focus-visible { color: var(--lx-ink); transform: translateX(12px); }
.lx-link:hover::before, .lx-link:focus-visible::before { transform: rotate(45deg) scale(1); }
.lx-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 24px 32px 32px; border-top: 1px solid var(--lx-line); font-size: 13px; }
.lx-foot p.lx-copy { color: var(--lx-muted); font-size: 13px; }
.lx-legal { display: flex; flex-wrap: wrap; flex: 1; gap: 8px 24px; }
.lx-foot .lx-legal a:hover { color: var(--lx-accent); }
.lx-pay-img { width: 260px; height: auto; display: block; }
.lx-top { position: relative; display: grid; place-items: center; width: 14px; height: 14px; color: var(--lx-accent) !important; transition: transform .6s cubic-bezier(.3, 1.5, .4, 1); }
.lx-top::after { content: ''; position: absolute; inset: -15px; }
.lx-top svg { width: 14px; height: 14px; }
.lx-top:hover { transform: rotate(-90deg) scale(1.25); }
/* WHMCS's button for the language and currency chooser, in the footer's bottom row */
html .lx-foot .btn.lx-locale { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; background: transparent; border: 1px solid var(--lx-edge); border-radius: 0; box-shadow: none; clip-path: none; color: var(--lx-ink); font-family: var(--lx-sans); font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; }
html .lx-foot .btn.lx-locale:hover, html .lx-foot .btn.lx-locale:focus-visible { border-color: var(--lx-accent); color: var(--lx-accent); }
.lx-locale > div { display: block !important; line-height: 0; }
.lx-locale .iti-flag { position: static; display: block; margin: 0; }

/* ------------------------------------------------------------------ 14 cart and checkout */
/* The order form (templates/orderforms/standard_cart) loads its own stylesheet in the page body, after this file, so
   every rule here starts with "html" to win over it. Most colours come from lyra-skin-cart.css; these rules give the
   shapes and set the colours of the parts that were redrawn (title bars, boxes, tags). The rules for the domain
   endings and their tags carry no order-form name in front on purpose: the client area's Domain Pricing page
   prints the same boxes and takes the same look. */
html #order-standard_cart .header-lined { border-bottom: 1px solid var(--lx-line); }
html #order-standard_cart .header-lined h1 { font-weight: 300; letter-spacing: -.03em; color: var(--lx-ink); }
html #order-standard_cart .cart-sidebar .card-title, html #order-standard_cart .cart-sidebar .panel-title { font-family: var(--lx-mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-accent); }
html #order-standard_cart .cart-sidebar .card-title i, html #order-standard_cart .cart-sidebar .panel-title i { color: var(--lx-accent); }
html #order-standard_cart .cart-sidebar .list-group-item { border-color: var(--lx-line); }
html #order-standard_cart .cart-sidebar .list-group-item:first-child, html #order-standard_cart .sidebar-collapsed { border-radius: 0; }
/* section labels on a line: small mono capitals, as the website's section labels */
html #order-standard_cart .sub-heading { border-top: 1px solid var(--lx-line); }
html #order-standard_cart .sub-heading span, html #order-standard_cart .sub-heading-borderless span { top: -10px; padding: 0 14px; background: var(--lx-bg); color: var(--lx-accent);
  font-family: var(--lx-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
html .card #order-standard_cart .sub-heading span { background: var(--lx-card); }
/* product boxes */
html #order-standard_cart .products .product { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 0; }
html #order-standard_cart .products .product header { background: transparent; background-image: none; border-bottom: 1px solid var(--lx-line); border-radius: 0; }
html #order-standard_cart .products .product header span { color: var(--lx-ink); font-weight: 500; letter-spacing: -.01em; }
html #order-standard_cart .products .product header .qty { color: var(--lx-muted); font-family: var(--lx-mono); font-size: 11px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
html #order-standard_cart .products .product div.product-pricing span.price { color: var(--lx-ink); font-weight: 500; }
html #order-standard_cart .products .product .product-desc, html #order-standard_cart .products .product .product-desc li { color: var(--lx-muted); }
html #order-standard_cart .products .product .product-desc .feature-value { color: var(--lx-ink); }
/* the summary box: a blue title bar, the totals on the card colour */
html #order-standard_cart .order-summary { background: var(--lx-fill); border: 0; border-radius: 0; }
html #order-standard_cart .order-summary h2 { color: #fff; font-family: var(--lx-mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; padding: 14px 16px; }
html #order-standard_cart .order-summary .summary-container, html #order-standard_cart .summary-container { background: var(--lx-card) !important; color: var(--lx-ink); border: 1px solid var(--lx-line); border-top: 0; border-radius: 0; }
html #order-standard_cart .order-summary .subtotal, html #order-standard_cart .order-summary .bordered-totals, html #order-standard_cart .order-summary .summary-totals { border-color: var(--lx-line); }
html #order-standard_cart .order-summary .total-due-today .amt { color: var(--lx-ink); font-weight: 300; letter-spacing: -.03em; }
html #order-standard_cart .order-summary .recurring-charges { color: var(--lx-muted); }
html #order-standard_cart .order-summary .btn-continue-shopping { color: var(--lx-accent) !important; text-transform: none; letter-spacing: 0; }
/* the cart's list of items */
html #order-standard_cart .view-cart-items-header { background: var(--lx-fill); color: #fff; border-radius: 0; font-family: var(--lx-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
html #order-standard_cart .view-cart-items { border-color: var(--lx-line); }
html #order-standard_cart .view-cart-items .item { background: var(--lx-card); border-color: var(--lx-line); }
html #order-standard_cart .view-cart-items .item:nth-child(even) { background: var(--lx-card); }
html #order-standard_cart .view-cart-items .item-title { color: var(--lx-ink); font-weight: 500; }
html #order-standard_cart .view-cart-items .item-group, html #order-standard_cart .view-cart-items .item-domain, html #order-standard_cart .view-cart-items small { color: var(--lx-muted); }
html #order-standard_cart .view-cart-items .item-price span { color: var(--lx-ink); }
html #order-standard_cart .view-cart-items .item-price .cycle { color: var(--lx-muted); }
html #order-standard_cart .empty-cart .btn { border-radius: 0 !important; }
html #order-standard_cart .view-cart-tabs .nav-tabs { border-bottom: 1px solid var(--lx-line); }
html #order-standard_cart .view-cart-tabs .tab-content { background: var(--lx-card); border: 1px solid var(--lx-line); border-top: 0; }
html #order-standard_cart .view-cart-gateway-checkout { border-radius: 0; }
/* add-ons and options */
html #order-standard_cart .panel-addon { border: 1px solid var(--lx-line); border-radius: 0; background: var(--lx-card); }
html #order-standard_cart .panel-addon .panel-body { border-radius: 0; }
html #order-standard_cart .panel-addon .panel-body label { color: var(--lx-ink); }
html #order-standard_cart .panel-addon .panel-price { background: var(--lx-tint); color: var(--lx-ink); }
html #order-standard_cart .panel-addon .panel-add, html #order-standard_cart .panel-addon-selected .panel-add { background: var(--lx-fill); color: #fff; border-radius: 0; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
html #order-standard_cart .panel-addon-selected { border-color: var(--lx-accent); }
html #order-standard_cart .domain-selection-options .option { border-radius: 0; border-color: var(--lx-line); }
html #order-standard_cart .domain-selection-options .option-selected { border-color: var(--lx-accent); }
html #order-standard_cart .product-info { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 0; }
html #order-standard_cart .product-info .product-title { color: var(--lx-ink); font-weight: 500; }
/* fields: the order form's own field class */
html #order-standard_cart .field, html #order-standard_cart .form-control, html #order-standard_cart .input-group-lg > .form-control { border-radius: 0; }
html #order-standard_cart .prepend-icon .field-icon i { color: var(--lx-muted); }
html #order-standard_cart .cc-input-container { border-radius: 0; border: 1px solid var(--lx-line); }
html #order-standard_cart .default-captcha { border-radius: 0; }
html #order-standard_cart .total-due-today { color: var(--lx-ink); }
/* domain search and price list */
html .domain-checker-container, html .domain-checker-container .input-group-box, html .domain-checker-container .input-group-box .form-control,
html .domain-checker-container .input-group-box .input-group-btn .btn, html .spotlight-tld, html .domain-promo-box, html div.domainresults div:not(.btn-group) { border-radius: 0 !important; }
/* the search band: the website's dark band with its fine stripes; the stock globe picture is not shown */
html .domain-checker-container { background-color: var(--lx-band) !important; background-image: repeating-linear-gradient(135deg, rgba(238, 241, 255, .04) 0 1px, transparent 1px 6px) !important; border: 1px solid var(--lx-line); }
html .domain-checker-bg { background-image: none !important; }
html .featured-tld { border: 1px solid var(--lx-line); border-radius: 0; box-shadow: none; background: var(--lx-card); }
html .featured-tld .price { background: var(--lx-fill) !important; color: #fff !important; border-radius: 0; }
html .tld-filters .badge { border-radius: 0 !important; padding: 6px 10px; }
html .spotlight-tld .btn:not(.domain-contact-support), html .spotlight-tld .btn.domain-contact-support, html .suggested-domains .btn:not(.domain-contact-support),
html .suggested-domains .btn.domain-contact-support { border-radius: 0 !important; }
html .domain-pricing .tld-pricing-header .tld-column, html .domain-pricing .tld-pricing-header .col-sm-2, html .domain-pricing .tld-pricing-header .col-sm-4,
html .domain-pricing .tld-pricing-header .col-xs-2, html .domain-pricing .tld-pricing-header .col-xs-4 { border-radius: 0; }
html .domain-pricing .tld-row { border-color: var(--lx-line); }
/* small state tags of the domain lists, in the five tones */
html .spotlight-tld-hot, html .spotlight-tld-new, html .spotlight-tld-sale, html .tld-sale-group, html .domain-renewals .domain-renewal .label, html .service-renewals .service-renewal .label {
  --tone: var(--lx-note); --tone-bg: var(--lx-note-bg); background-color: var(--lx-card); background-image: linear-gradient(var(--tone-bg), var(--tone-bg)); color: var(--tone);
  border-radius: 0; font-family: var(--lx-mono); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; text-shadow: none; }
html .spotlight-tld-hot, html .tld-sale-group-hot { --tone: var(--lx-bad); --tone-bg: var(--lx-bad-bg); }
html .spotlight-tld-sale, html .tld-sale-group-sale { --tone: var(--lx-warn); --tone-bg: var(--lx-warn-bg); }
html .spotlight-tld-new, html .tld-sale-group-new { --tone: var(--lx-ok); --tone-bg: var(--lx-ok-bg); }
/* the line shown while a domain lookup runs, and two notes the order form colours inline */
html #order-standard_cart .domain-lookup-loader, html .suggested-domains .domain-lookup-suggestions-loader { color: var(--lx-muted); opacity: 1; }
html #order-standard_cart [style*='color:#cc0000'] { color: var(--lx-bad) !important; }
html #order-standard_cart [style*='color:#009900'] { color: var(--lx-ok) !important; }
/* order confirmation */
html #order-standard_cart .order-confirmation span { color: var(--lx-ink); font-family: var(--lx-mono); }

/* the domain search button: the stock rule fixes its width at 100px, too narrow for the label in this type */
html #order-standard_cart .domain-checker-container .btn.domain-check-availability { width: auto; min-width: 0; padding: 0 22px; font-size: 14px; }
html #order-standard_cart .marketing-email-optin { margin-bottom: 18px; }

/* ------------------------------------------------------------------ 15 small screens and motion */
@media (max-width: 1199.98px) {
  /* the client menu folds behind its own button: the label, the cart and the button on one row, the menu below */
  header.header > .navbar.navbar-light { grid-row: 3; grid-column: 1 / -1; }
  header.header > .main-navbar-wrapper { grid-row: 4; grid-column: 1 / -1; }
  #header.header > .navbar.navbar-light > .container { padding-left: 32px; }
  #header.header > .main-navbar-wrapper > .container { padding-right: 32px; min-height: 0; }
  #header.header .main-navbar-wrapper .navbar-collapse { padding: 8px 0 16px !important; border-top: 1px solid var(--lx-line); }
  #header.header .navbar-nav > li > a { padding: 10px 0; }
  #header.header .main-navbar-wrapper .search { width: 100%; }
  header.header > .navbar.navbar-light form.form-inline { display: none; }
  /* the counters stand two by two */
  .tiles .row > div:nth-child(odd) > .tile { border-left-width: 1px; }
  .tiles .row > div:nth-child(n + 3) > .tile { border-top-width: 0; }
}
@media (max-width: 1180px) {
  .lx-nav, .lx-hdr-act > .lx-ghost, .lx-hdr-act > .lx-cta { display: none; }
  .lx-hdr-in { justify-content: space-between; }
  .lx-mobile { display: block; }
  .lx-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lx-fbrand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .container, #header .container, .master-breadcrumb .container, .lx-hdr-in { padding-left: 20px; padding-right: 20px; }
  #header.header > .navbar.navbar-light > .container { padding-left: 20px; }
  #header.header > .main-navbar-wrapper > .container { padding-right: 20px; }
  .lx-mnav { padding-left: 20px; padding-right: 20px; }
  .lx-foot { padding: 48px 20px 0; }
  .lx-fcta { padding: 40px 24px; }
  .lx-fgrid { padding: 48px 0; }
  .lx-bottom { padding: 24px 0 32px; }
  section#main-body { padding: 32px 0 56px; }
}
@media (max-width: 639px) {
  .lx-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-container .table td, .table-container .table th { padding: 12px 12px; }
  .lx-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
  .lx-legal { grid-column: 1 / -1; gap: 0 24px; }
  .lx-legal a { display: inline-flex; align-items: center; min-height: 36px; }
  html .lx-foot .btn.lx-locale { grid-column: 1 / -1; justify-self: start; }
  .lx-pay-img { order: 1; grid-column: 1 / -1; max-width: 100%; }
  .modal-localisation .item-selector > .col-4 { flex: 0 0 50%; max-width: 50%; }
  .lx-top { order: 2; justify-self: end; margin-right: 15px; }
}
@media (max-width: 520px) {
  .container, #header .container, .master-breadcrumb .container, .lx-hdr-in { padding-left: 16px; padding-right: 16px; }
  #header.header > .navbar.navbar-light > .container { padding-left: 16px; }
  #header.header > .main-navbar-wrapper > .container { padding-right: 16px; }
  .lx-mnav { padding-left: 16px; padding-right: 16px; }
  .lx-foot { padding: 40px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-hdr *, .lx-hdr *::before, .lx-foot *, .lx-foot *::before, .lx-foot *::after, .btn { transition: none !important; }
}

/* The sales and billing chat bubble, as on the website (its concept.css .lx-talk; owner, 2026-11-13). lyra-theme.js adds it
   to every page with the website header, and Tawk.to loads only when it is clicked. While Tawk.to loads, a ring turns
   around the bubble; while the chat is open the bubble steps aside; a dot marks a reply that came in while it was closed.
   z-index 15: under header.header (20), so the open phone menus of the website and of WHMCS cover the bubble, as on the website. */
.lx-talk { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 15;
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--lx-fill); color: #fff; box-shadow: 0 8px 24px var(--lx-shadow); transition: background-color .2s, transform .2s var(--lx-ease); }
.lx-talk svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lx-talk:hover, .lx-talk:focus-visible { background: var(--lx-deep); transform: translateY(-2px); }
.lx-talk:focus:not(:focus-visible) { outline: none; }
.lx-talk:focus-visible { outline: 2px solid var(--lx-sky); outline-offset: 3px; }
.lx-talk::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; }
.lx-talk-wait .lx-talk { cursor: progress; }
.lx-talk-wait .lx-talk::before { border-top-color: var(--lx-fill); border-right-color: var(--lx-fill); animation: lx-talk-turn .8s linear infinite; }
@keyframes lx-talk-turn { to { transform: rotate(360deg); } }
.lx-talk::after { content: ''; position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--lx-fill); display: none; }
.lx-talk-new .lx-talk::after { display: block; }
.lx-talk-on .lx-talk { display: none; }
@media (max-width: 600px) { .lx-talk { width: 52px; height: 52px; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .lx-talk { transition: none; } .lx-talk:hover, .lx-talk:focus-visible { transform: none; }
  .lx-talk-wait .lx-talk::before { animation: none; border-color: var(--lx-fill); } }
@media print { .lx-talk { display: none; } }