/* MyWhiteHost theme: loaded automatically by Twenty-One's includes/head.tpl after theme.min.css.
   Colours live only in the tokens below; everything else uses var(--name). */

/* ---------- Fonts (self-hosted, variable WOFF2; licences in ../fonts) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  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;
}
/* Latin Extended: needed for the rupee sign (U+20B9). Downloaded only when a page uses it. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  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;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette (CLAUDE.md) */
  --ink: #0E1B2E;
  --white: #FFFFFF;
  --mist: #F3F5F8;
  --sky: #87CEEB;      /* fills and tints only, never text on white */
  --lal: #C62828;      /* stripe, plan highlight, button hover. Never a primary action or a form field */
  --go: #178A5C;       /* fills and icons. 4.35:1 on white, so not for small text */
  --signal: #1E4FD8;   /* links, focus rings */

  /* Derived from the palette */
  --ink-soft: #4A576B;     /* secondary text: 7.3:1 on white, 6.7:1 on mist */
  --line: #D5DBE4;         /* decorative rules */
  --line-strong: #8A94A6;  /* form field and control borders: 3:1 on white */
  --sky-tint: #EAF6FC;     /* light section tint */
  --signal-dark: #1740AA;  /* link hover: 8.9:1 on white */
  --go-text: #0F6B47;      /* success text: 6.5:1 on white */
  --go-tint: #E7F5EE;      /* success background */
  --danger-text: #9B1C1C;  /* error text and destructive buttons: 8.2:1 on white */
  --danger-tint: #FCEBEB;  /* error background */
  --amber-fill: #F2C14E;   /* warning status fill; always with ink text */
  --amber-line: #8A5700;   /* warning border and text: 6.2:1 on white */
  --amber-tint: #FFF5D6;   /* warning background */

  /* Type */
  --font-display: "Bricolage Grotesque", "Noto Sans Bengali", "Nirmala UI", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Figtree", "Noto Sans Bengali", "Nirmala UI", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-h1: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.1875rem;
  --fs-h5: 1.0625rem;
  --fs-display: clamp(2.75rem, 1.2rem + 6vw, 6rem); /* hero domain name */
  --measure: 68ch;

  /* Space and shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --radius: 4px;

  /* Focus ring: blue ring with a white gap, so it shows on light and dark surfaces */
  --focus-ring: 3px solid var(--signal);
  --focus-gap: 0 0 0 2px var(--white);
}

/* ---------- Base elements ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--white);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); font-weight: 600; }
h6, .h6 { font-size: var(--fs-body); font-weight: 600; }

p { text-wrap: pretty; }
small, .small { font-size: var(--fs-small); }
.text-muted { color: var(--ink-soft) !important; }
strong, b { font-weight: 600; }

a { color: var(--signal); text-underline-offset: 0.15em; }
a:hover { color: var(--signal-dark); }

hr { border-top-color: var(--line); }
::selection { background: var(--sky); color: var(--ink); }
img, svg { max-width: 100%; }

/* Helpers for the homepage and inner pages */
.mwh-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.mwh-measure { max-width: var(--measure); }
.mwh-num { font-variant-numeric: tabular-nums; }

/* ---------- Red double stripe (lal-par border) ----------
   Two 2px lines with a 3px gap. Used above the header and as a section divider. */
.mwh-stripe {
  display: block;
  box-sizing: border-box;
  block-size: 7px;
  border-block: 2px solid var(--lal);
  background: none;
}

/* ---------- Keyboard focus ---------- */
.btn:focus, .form-control:focus, .custom-select:focus, .page-link:focus,
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}
.form-control:focus, .custom-select:focus { border-color: var(--signal); }

:focus-visible,
.btn:focus-visible, .form-control:focus-visible, .custom-select:focus-visible,
.page-link:focus-visible, .dropdown-item:focus-visible, .nav-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  box-shadow: var(--focus-gap);
}

/* ---------- Page surface, header, footer ---------- */
.primary-bg-color { background-color: var(--white); }

/* The stripe sits above the header on every page */
header.header { border-bottom: 1px solid var(--line); }
header.header::before {
  content: "";
  display: block;
  box-sizing: border-box;
  block-size: 7px;
  border-block: 2px solid var(--lal);
}
header.header .navbar-brand {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
header.header .navbar a,
header.header .navbar-light .navbar-nav .nav-link { color: var(--ink); }
header.header .navbar a:hover { color: var(--signal-dark); }
header.header .navbar-nav a { font-size: 1rem; }
header.header .toolbar .nav-link { color: var(--ink); border-color: var(--line-strong); }
header.header .toolbar .nav-link:hover { color: var(--signal-dark); }
header.header .search { border-color: var(--line-strong); }
header.header .search .btn { color: var(--ink-soft); }
header.header .main-navbar-wrapper { border-top: 1px solid var(--line); }
header.header .topbar { background-color: var(--ink); }

.master-breadcrumb { background-color: var(--mist); }
.master-breadcrumb .breadcrumb { background: none; }
.breadcrumb-item.active { color: var(--ink-soft); }

/* The homepage has no breadcrumb bar and starts straight under the header */
body:has(.mwh-hero) .master-breadcrumb { display: none; }
body:has(.mwh-hero) section#main-body { padding-top: 0; padding-bottom: 0; }

footer.footer { background-color: var(--ink); color: var(--white); padding-bottom: var(--space-5); }
footer.footer .nav-link, footer.footer a { color: var(--white); }
footer.footer a:hover { color: var(--sky); }
footer.footer .copyright { text-align: left; color: var(--line); }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--radius); }
.btn-primary { color: var(--white); background-color: var(--ink); border-color: var(--ink); }
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  color: var(--white);
  background-color: var(--lal);
  border-color: var(--lal);
}
.btn-primary:focus, .btn-primary.focus { color: var(--white); background-color: var(--ink); border-color: var(--ink); }
.btn-primary:hover:focus { background-color: var(--lal); border-color: var(--lal); }
.btn-outline-primary { color: var(--ink); border-color: var(--ink); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: var(--white);
  background-color: var(--ink);
  border-color: var(--ink);
}

/* ---------- Form fields ---------- */
.form-control, .custom-select {
  color: var(--ink);
  border-color: var(--line-strong);
  border-radius: var(--radius);
}
.form-control::placeholder { color: var(--ink-soft); opacity: 1; }
label, .col-form-label { font-weight: 600; }

/* ---------- Homepage: bands and sections ---------- */
/* A tinted band runs edge to edge even though the template sits inside Twenty-One's container */
.mwh-hero, .mwh-included, .mwh-about {
  box-shadow: 0 0 0 100vmax var(--band, var(--sky-tint));
  clip-path: inset(0 -100vmax);
  background: var(--band, var(--sky-tint));
}
.mwh-included, .mwh-about { --band: var(--mist); }
.mwh-section { padding-block: var(--space-6); }
.mwh-section h2 { margin-bottom: var(--space-3); }
.mwh-section > p:last-child { margin-bottom: 0; }
.mwh-measure a { text-decoration: underline; }

/* ---------- Homepage: hero ---------- */
.mwh-hero { padding-block: var(--space-6) var(--space-5); }
.mwh-hero__title {
  max-width: 28ch;
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mwh-hero__domain {
  margin: 0 0 var(--space-4);
  overflow-wrap: anywhere;
}
.mwh-hero__tld {
  color: var(--signal);
  transition: opacity 180ms ease;
}
.mwh-hero__tld.is-swapping { opacity: 0; }

.mwh-search { max-width: 44rem; }
.mwh-search__label { display: block; margin-bottom: var(--space-2); }
.mwh-search__row { display: flex; gap: var(--space-2); }
.mwh-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3.5rem;
  font-size: 1.1875rem;
  border: 2px solid var(--ink);
  background: var(--white);
}
.mwh-search__button { flex: 0 0 auto; height: 3.5rem; padding-inline: var(--space-4); white-space: nowrap; font-size: 1.0625rem; }
@media (max-width: 575.98px) {
  .mwh-search__row { flex-direction: column; }
  .mwh-search__button { width: 100%; }
}

.mwh-tlds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 var(--space-3);
  padding: var(--space-3) 0;
  list-style: none;
  border-block: 1px solid var(--line-strong);
}
.mwh-tlds__name { display: block; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.mwh-tlds__price { display: block; color: var(--ink); }
.mwh-tlds__per { color: var(--ink-soft); font-size: var(--fs-small); }
.mwh-hero__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; font-weight: 600; }

.mwh-stripe { margin: 0; }

/* ---------- Homepage: plan ladder ---------- */
/* One ruled block. The 1px grid gap shows the ladder background, which draws every divider. */
.mwh-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line-strong);
  border-block: 2px solid var(--ink);
}
.mwh-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--white);
}
.mwh-plan--recommended { box-shadow: inset 0 5px 0 var(--lal); }
.mwh-plan__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-2); }
.mwh-plan__flag { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }
.mwh-plan__price { margin: 0 0 var(--space-3); }
.mwh-plan__amount { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; }
.mwh-plan__period { color: var(--ink-soft); }
.mwh-plan__specs { margin: 0 0 var(--space-4); }
.mwh-plan__spec { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.mwh-plan__spec dt { margin: 0; font-weight: 400; color: var(--ink-soft); }
.mwh-plan__spec dd { margin: 0; font-weight: 600; text-align: right; }
.mwh-plan__order { display: block; width: 100%; margin-top: auto; padding-block: 0.7rem; }

/* ---------- Homepage: included, steps, about, moving ---------- */
.mwh-included__list { margin: 0; padding: 0; list-style: none; }
.mwh-included__list li { padding: var(--space-2) 0; border-top: 1px solid var(--line-strong); }
.mwh-included__list li:last-child { border-bottom: 1px solid var(--line-strong); }

.mwh-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.mwh-steps__item { padding-top: var(--space-3); border-top: 2px solid var(--ink); counter-increment: step; }
.mwh-steps__item::before {
  content: counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.mwh-steps__item h3 { margin-bottom: var(--space-2); }
.mwh-steps__note { color: var(--ink-soft); }

.mwh-about__contact { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-weight: 600; }
.mwh-moving .btn { margin-top: var(--space-2); }
/* Logo image (set in WHMCS, see README). Twenty-One caps it at 60px high. */
header.header .logo-img { width: auto; max-height: 52px; }
@media (max-width: 575.98px) {
  header.header .navbar-brand { font-size: 1.375rem; margin-right: var(--space-2) !important; }
  header.header .logo-img { max-height: 40px; }
  header.header .navbar.navbar-light { padding-inline: 0; } /* Twenty-One adds 1rem on top of the container's 15px, so the logo sat right of the page text */
  header.header .toolbar .nav-item { margin-left: var(--space-2) !important; }
}

/* =====================================================================
   Inner pages (Step 5). Twenty-One hard-codes its blue (#336699), greys and
   Bootstrap colours, so each component is re-coloured here from the tokens.
   ===================================================================== */

/* ---------- Page body ---------- */
section#main-body { padding: var(--space-5) 0 var(--space-6); }
.primary-content .card-title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }

/* ---------- Links, text colours, badges ---------- */
.btn-link { color: var(--signal); }
.btn-link:hover { color: var(--signal-dark); }
.text-primary { color: var(--signal-dark) !important; }
.text-success { color: var(--go-text) !important; }
.text-danger { color: var(--danger-text) !important; }
.text-warning { color: var(--amber-line) !important; }
.text-info { color: var(--signal-dark) !important; }
.bg-primary { background-color: var(--ink) !important; }
.border-primary { border-color: var(--ink) !important; }
.badge { font-weight: 600; }
.badge-primary { background-color: var(--ink); }
.badge-secondary { background-color: var(--ink-soft); }
.badge-info { background-color: var(--signal); }
.badge-success { background-color: var(--go-text); }
.badge-danger { background-color: var(--danger-text); }
.badge-warning { background-color: var(--amber-fill); color: var(--ink); }
header.header .toolbar .nav-link .badge { opacity: 1; }
.progress-bar { background-color: var(--signal); }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-color: var(--line);
  border-radius: var(--radius);
}
.card-header { background: var(--white); border-bottom: 1px solid var(--line); }
.card-footer { background: var(--mist); border-top: 1px solid var(--line); }
.card-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
/* Twenty-One colours each card's top edge by topic. One ink rule keeps the page calm. */
.card[class*="card-accent-"] { border-top: 2px solid var(--ink); }
.card .show-on-card-hover { transition: none; }
.card:focus-within .show-on-card-hover { opacity: 1; }
.promo-container, .invite-box, .continue-container { border-color: var(--line); background: var(--mist); border-radius: var(--radius); }

/* ---------- Sidebar ---------- */
.sidebar .card-sidebar .card-header { background: var(--mist); }
.sidebar .card-title { font-size: 1rem; margin-bottom: 0; }
.sidebar .list-group-item { border-color: var(--line); color: var(--ink); }
.sidebar .list-group-item-action:hover,
.sidebar .list-group-item-action:focus { background-color: var(--sky-tint); color: var(--ink); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus { background-color: var(--ink); border-color: var(--ink); color: var(--white); }
.sidebar .list-group-item .badge { background-color: var(--mist); color: var(--ink); }
.sidebar .list-group-item.active .badge { background-color: var(--white); color: var(--ink); }
.sidebar .list-group-item > i.far.fa-circle { color: var(--ink-soft); }

/* ---------- Dropdowns, tabs, pagination, modals ---------- */
.dropdown-menu { border-color: var(--line); border-radius: var(--radius); }
.dropdown-item { color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus,
header.header .dropdown-item:hover { background-color: var(--sky-tint); color: var(--ink); }
.dropdown-item.active, .dropdown-item:active,
header.header .dropdown-item.active, header.header .dropdown-item:active { background-color: var(--ink); color: var(--white); }

.nav-tabs { border-bottom-color: var(--line-strong); }
.nav-tabs .nav-link { color: var(--signal); border-radius: var(--radius) var(--radius) 0 0; }
.nav-tabs .nav-link:hover { border-color: var(--line) var(--line) var(--line-strong); color: var(--signal-dark); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--ink);
  font-weight: 600;
  border-color: var(--line-strong) var(--line-strong) var(--white);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ink); color: var(--white); }

.page-link { color: var(--ink); border-color: var(--line); }
.page-link:hover { color: var(--ink); background-color: var(--sky-tint); border-color: var(--line); }
.page-item.active .page-link,
.pagination > .active > a, .pagination > .active > span { background-color: var(--ink); border-color: var(--ink); color: var(--white); }
.page-item.disabled .page-link { color: var(--ink-soft); }

.modal-content { border-radius: var(--radius); border-color: var(--line); }
.modal .modal-header { background-color: var(--mist); border-bottom-color: var(--line); }
.modal-title { font-family: var(--font-display); font-weight: 700; }

/* ---------- Buttons: every action is ink, hover is lal (approved in Step 4) ---------- */
.btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-link):not(.close) { padding-block: 0.55rem; }
.btn-success { color: var(--white); background-color: var(--ink); border-color: var(--ink); }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active {
  color: var(--white);
  background-color: var(--lal);
  border-color: var(--lal);
}
.btn-default, .btn-secondary, .btn-info, .btn-warning {
  color: var(--ink);
  background-color: var(--white);
  border-color: var(--line-strong);
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.btn-secondary:hover, .btn-info:hover, .btn-warning:hover,
.btn-info:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled):active {
  color: var(--ink);
  background-color: var(--sky-tint);
  border-color: var(--ink);
}
/* Destructive actions: outlined dark red, never filled, never the main button on a page */
.btn-danger { color: var(--danger-text); background-color: var(--white); border-color: var(--danger-text); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active {
  color: var(--white);
  background-color: var(--danger-text);
  border-color: var(--danger-text);
}
.btn.disabled, .btn:disabled { opacity: 0.55; }
.input-group .btn-reveal-pw:hover, .input-group .btn-reveal-pw:active { background-color: var(--sky-tint); color: var(--ink); border-color: var(--line-strong); }

/* ---------- Forms ---------- */
.form-control:not(.form-control-sm):not(textarea):not(.form-control-lg),
.custom-select:not(.custom-select-sm) { min-height: 2.75rem; font-size: 1rem; }
.form-control:disabled, .form-control[readonly], .custom-select:disabled { background-color: var(--mist); color: var(--ink-soft); }
.input-group-text { color: var(--ink-soft); background-color: var(--mist); border-color: var(--line-strong); }
.form-text, .help-block, .field-help-text { color: var(--ink-soft); }
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--ink); border-color: var(--ink); }
.custom-control-label::before { border-color: var(--line-strong); }
.custom-file-label, .custom-file-input { min-height: 2.75rem; }
.form-group .field-error-msg { color: var(--danger-text); }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger-text); }
.invalid-feedback { color: var(--danger-text); }
.valid-feedback { color: var(--go-text); }
fieldset legend, legend { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; }

/* ---------- Alerts: left rule carries the meaning, text stays ink ---------- */
.alert {
  color: var(--ink);
  background-color: var(--mist);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-soft);
  border-radius: var(--radius);
}
.alert a, .alert-link { color: inherit; font-weight: 600; text-decoration: underline; }
.alert-info { background-color: var(--sky-tint); border-color: var(--line); border-left-color: var(--signal); }
.alert-success { background-color: var(--go-tint); border-color: var(--line); border-left-color: var(--go-text); }
.alert-warning { background-color: var(--amber-tint); border-color: var(--line); border-left-color: var(--amber-line); }
.alert-danger { background-color: var(--danger-tint); border-color: var(--line); border-left-color: var(--danger-text); }
.alert h2 { font-size: var(--fs-h4); }
.alert .close { color: var(--ink); opacity: 0.7; }

/* ---------- Status labels: white on a dark fill, or ink on amber, all at least 4.5:1 ---------- */
.label {
  padding: 0.3em 0.65em;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  background-color: var(--ink-soft);
  color: var(--white);
}
.label-success, .status-active, .status-open, .status-completed, .status-paid, .status-accepted, .requestor-type-owner { background-color: var(--go-text); }
.label-danger, .status-pending, .status-unpaid, .status-fraud { background-color: var(--danger-text); }
.label-info, .status-onhold, .status-payment-pending, .status-delivered, .status-answered, .requestor-type-operator { background-color: var(--signal); }
.label-warning, .status-suspended, .status-pending-transfer, .status-refunded, .status-customer-reply,
.status-pending-registration, .status-redemption, .status-grace, .status-inprogress, .requestor-type-registereduser {
  background-color: var(--amber-fill);
  color: var(--ink);
}
.label-default, .status-closed, .status-cancelled, .status-terminated, .status-expired, .status-transferred-away,
.status-collections, .status-lost, .status-dead, .requestor-type-authorizeduser, .requestor-type-subaccount, .requestor-type-guest { background-color: var(--ink-soft); }
.product-status-text { text-transform: none; }
.div-service-status .label { color: var(--white); }
.div-service-status .label.label-warning, .div-service-status .label.status-suspended, .div-service-status .label.status-pending-transfer,
.div-service-status .label.status-refunded, .div-service-status .label-placeholder { color: var(--ink); }

/* ---------- Tables ---------- */
.table { color: var(--ink); }
.table thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-weight: 600; background: none; }
.table td, .table th { border-top-color: var(--line); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--mist); }
.table-hover tbody tr:hover, .table-list > tbody > tr:hover > td { background-color: var(--sky-tint); }
.table-list > tbody > tr > td { background-color: var(--white); vertical-align: middle; }
table.table-list thead th, .dataTables_wrapper table.table-list thead th {
  padding: var(--space-2);
  background: none;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: left;
}
.dataTables_wrapper table.table-list { border-color: var(--line); }
.dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: var(--mist); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--ink-soft); font-size: var(--fs-small); }
.dataTables_wrapper .dataTables_filter input { margin-left: var(--space-2); }
.dataTables_wrapper .dataTables_length select { margin-inline: var(--space-2); }

/* ---------- Client area home ---------- */
.tiles { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.tiles .tile { background: var(--mist); border-right-color: var(--line); color: var(--ink); transition: none; }
.tiles .tile:hover { background-color: var(--sky-tint); }
.tiles .tile .stat { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; }
.tiles .tile .title { color: var(--ink-soft); font-size: var(--fs-small); font-weight: 600; text-transform: none; }
.tiles .tile .highlight { background-color: var(--ink); border-radius: 0; }
.tiles .tile i { display: none; }
@media (max-width: 1199.98px) {
  .tiles div:nth-child(1) > .tile, .tiles div:nth-child(2) > .tile { border-bottom-color: var(--line); }
}
.client-home-cards .card, .client-home-cards .card-header { font-size: var(--fs-small); }
.client-home-cards .card-header { border-bottom: 1px solid var(--line); }
.client-home-cards .card-header .btn { color: var(--ink); background-color: var(--white); border: 1px solid var(--line-strong); }
.client-home-cards .card-header .btn:hover { color: var(--ink); background-color: var(--sky-tint); }
.client-home-cards .list-group { border-color: var(--line) !important; }
.client-home-cards .list-group .list-group-item { border-bottom-color: var(--line); }
.client-home-cards small { color: var(--ink-soft); }
.div-service-name .text-domain { color: var(--ink-soft); }
.div-service-status .label:not(.label-placeholder) { width: auto; max-width: 6rem; }

/* ---------- Sign-in, registration, password reset ---------- */
.login-form .card, .primary-content .card.mw-540, .primary-content .card.mw-750 { border-top: 2px solid var(--ink); }
.login-form .card-footer a, .card-footer a { font-weight: 600; }
#registration label, #registration .info-text-sm { color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
#registration .field, #registration .form-control { border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius); }
#registration .form-control { font-size: 1rem; }
#registration .form-control:focus { border-color: var(--signal); }
#registration .form-control.is-invalid, #registration .has-error .form-control, body #order-standard_cart .form-control.is-invalid, body #order-standard_cart .has-error .form-control { border-color: var(--danger-text); }
#registration .field-icon i { color: var(--ink-soft); }
#registration .sub-heading { border-top-color: var(--line); }
#registration .sub-heading span { color: var(--ink); background: var(--white); font-family: var(--font-display); font-weight: 700; }
#registration .field-help-text { color: var(--ink-soft); font-size: var(--fs-small); }
.password-strength-meter .progress { background-color: var(--mist); }

/* ---------- Domains, knowledgebase, announcements, tickets ---------- */
.tld-filters a { color: var(--ink); background: var(--mist); }
.tld-filters a:hover, .tld-filters a.active { background: var(--ink); color: var(--white); text-decoration: none; }
.domain-pricing .tld-row { border-bottom-color: var(--line); }
.domain-pricing .tld-row.highlighted { background: var(--sky-tint); }
.domain-pricing .tld-pricing-header .col-xs-2, .domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4, .domain-pricing .tld-pricing-header .col-sm-4 { background-color: var(--mist); border-bottom: 2px solid var(--ink); border-radius: 0; }
.domain-pricing .tld-pricing-header div:nth-child(odd) { border-color: var(--ink); background-color: var(--mist); }
.domain-pricing .two-row-center { border-right-color: var(--line); }
.tld-sale-group, .tld-sale-group-hot, .tld-sale-group-sale, .tld-sale-group-new { text-transform: none; font-size: 0.8125rem; color: var(--ink); background: var(--amber-fill); }

.announcements .announcement article { background-color: var(--mist); border-left-color: var(--ink); }
.kb-category a:hover, .kb-article-item:hover { background-color: var(--sky-tint); }
.kb-article-item small { color: var(--ink-soft); }
.ticket-subject.unread { font-weight: 700; }
.view-ticket .card-body { border-bottom-color: var(--line); }
.view-ticket .posted-by { color: var(--ink-soft); background-color: var(--mist); font-size: var(--fs-small); }
.view-ticket .posted-by .posted-by-name { color: var(--ink); }
.view-ticket .ticket-reply.staff .posted-by { border-left: 4px solid var(--ink); }
.view-ticket .attachments { border-top-color: var(--line-strong); }
.view-ticket .attachment-list li span { border-color: var(--line); }
.view-ticket .attachment-list li figure { background-color: var(--mist); }
.md-editor { border-color: var(--line-strong); }
.markdown-editor-status { color: var(--ink-soft); }
.ticketfeedbackstaffcont { background-color: var(--mist); }

/* ---------- Footer ---------- */
footer.footer .btn { background-color: transparent; border: 1px solid var(--line-strong); color: var(--white); }
footer.footer .btn:hover { background-color: var(--white); color: var(--ink); border-color: var(--white); }
footer.footer .copyright, footer.footer .notices { color: var(--line); }

/* =====================================================================
   Order form (cart, domain options, checkout, order complete).
   The order form's own all.min.css is linked inside the page body, after this file,
   so every rule here is prefixed with body #order-standard_cart to win on specificity.
   ===================================================================== */
body #order-standard_cart { font-size: 1rem; color: var(--ink); }
body #order-standard_cart label,
body #order-standard_cart p.domain-renewal-desc {
  margin-right: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
body #order-standard_cart .header-lined h1 { font-size: var(--fs-h1); }
body #order-standard_cart .info-text-sm { color: var(--ink-soft); }

body #order-standard_cart .cart-sidebar .card-sidebar { margin-bottom: var(--space-3); }
body #order-standard_cart .cart-sidebar .list-group-item { border-bottom: 1px solid var(--line); }
body #order-standard_cart .sidebar-collapsed { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius); }

body #order-standard_cart .sub-heading { border-top-color: var(--line); }
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span { color: var(--ink); background: var(--white); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; top: -0.8rem; }

body #order-standard_cart .field,
body #order-standard_cart .form-control { border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius); }
body #order-standard_cart .form-control:focus { border-color: var(--signal); }
body #order-standard_cart .field-icon i { color: var(--ink-soft); }
body #order-standard_cart .field-help-text { color: var(--ink-soft); font-size: var(--fs-small); }
body #order-standard_cart .field[disabled], body #order-standard_cart .field[readonly],
body #order-standard_cart .form-control[disabled], body #order-standard_cart .form-control[readonly] { background-color: var(--mist); }

/* Product list */
body #order-standard_cart .products .product { border-color: var(--line); border-radius: var(--radius); }
body #order-standard_cart .products .product header { background: var(--mist); border-bottom: 2px solid var(--ink); border-radius: 0; margin: 0; }
body #order-standard_cart .products .product header span { color: var(--ink); font-family: var(--font-display); font-weight: 700; }
body #order-standard_cart .products .product header .qty { color: var(--ink-soft); }
body #order-standard_cart .products .product div.product-desc { font-size: var(--fs-small); }
body #order-standard_cart .products .product footer { font-size: var(--fs-small); }
body #order-standard_cart .products .product div.product-pricing span.price { font-family: var(--font-display); font-weight: 800; }

/* Add-on tiles */
body #order-standard_cart .panel-addon .panel-body label { color: var(--ink); }
body #order-standard_cart .panel-addon .panel-price { background-color: var(--mist); }
body #order-standard_cart .panel-addon .panel-add,
body #order-standard_cart .panel-addon-selected .panel-add { background-color: var(--ink); color: var(--white); }
body #order-standard_cart .panel-addon-selected { border-color: var(--ink); }

/* Domain options */
body #order-standard_cart .domain-selection-options .option { background-color: var(--mist); border: 1px solid transparent; border-radius: var(--radius); }
body #order-standard_cart .domain-selection-options .option:hover { border-color: var(--line-strong); }
body #order-standard_cart .domain-selection-options .option-selected { background-color: var(--sky-tint); border-color: var(--ink); }
body #order-standard_cart .domain-checker-available { color: var(--go-text); }
body #order-standard_cart .domain-checker-unavailable,
body #order-standard_cart .domain-checker-invalid { color: var(--danger-text); }
body #order-standard_cart .transfer-eligible { color: var(--ink); background-color: var(--go-tint); border: 1px solid var(--line); border-left: 4px solid var(--go-text); }
body #order-standard_cart .transfer-not-eligible { color: var(--ink); background-color: var(--mist); border: 1px solid var(--line); border-left: 4px solid var(--ink-soft); }
body #order-standard_cart .domain-suggestions { font-size: var(--fs-small); }

/* Domain search panel: plain sky tint, no gradient, no globe */
body #order-standard_cart .domain-checker-container { background: var(--sky-tint); border: 1px solid var(--line); border-radius: var(--radius); }
body #order-standard_cart .domain-checker-bg { background-image: none; padding: var(--space-5) 0; }
body #order-standard_cart .domain-checker-container .input-group-box { background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius); }
body #order-standard_cart .domain-check-availability { width: auto; min-width: 8rem; height: auto; }
body #order-standard_cart div.domainresults div:not(.btn-group) { background-color: var(--mist); color: var(--ink); border-radius: 0; }
body #order-standard_cart div.domainresults div:not(.btn-group) span { color: var(--ink-soft); }
body #order-standard_cart .spotlight-tlds { background-color: var(--mist); }
body #order-standard_cart .spotlight-tld { border-color: var(--line); border-radius: var(--radius); color: var(--ink); }
body #order-standard_cart .spotlight-tld .btn:not(.domain-contact-support) { background-color: var(--ink); border-color: var(--ink); color: var(--white); }
body #order-standard_cart .spotlight-tld .btn:not(.domain-contact-support):hover { background-color: var(--lal); border-color: var(--lal); }
body #order-standard_cart .spotlight-tld .unavailable,
body #order-standard_cart .spotlight-tld .invalid { background-color: var(--mist); border-color: var(--line); color: var(--ink-soft); }
body #order-standard_cart .spotlight-tld-new,
body #order-standard_cart .spotlight-tld-sale,
body #order-standard_cart .spotlight-tld-hot { background-color: var(--amber-fill); color: var(--ink); text-transform: none; letter-spacing: 0; }
body #order-standard_cart .suggested-domains .promo.hot,
body #order-standard_cart .suggested-domains .promo.sale,
body #order-standard_cart .suggested-domains .promo.new { background-color: var(--amber-fill); color: var(--ink); text-transform: none; }
body #order-standard_cart .suggested-domains .btn:not(.domain-contact-support) { background-color: var(--ink); border-color: var(--ink); color: var(--white); }
body #order-standard_cart .suggested-domains .btn:not(.domain-contact-support):hover { background-color: var(--lal); border-color: var(--lal); }
body #order-standard_cart .suggested-domains .panel-heading,
body #order-standard_cart .suggested-domains .card-header { border-bottom-color: var(--ink); }
body #order-standard_cart .domain-promo-box { background: var(--mist); border-color: var(--line); }
body #order-standard_cart .domain-promo-box .small { color: var(--ink-soft); }
body #order-standard_cart .domain-searching { color: var(--ink-soft); }

/* Product configuration and order summary */
body #order-standard_cart .product-info { background-color: var(--mist); border-color: var(--line); font-size: var(--fs-small); }
body #order-standard_cart .order-summary { background-color: var(--ink); border-bottom-color: var(--ink); border-radius: var(--radius); }
body #order-standard_cart .order-summary h2 { color: var(--white); font-family: var(--font-display); font-weight: 700; text-align: left; }
body #order-standard_cart .summary-container { background-color: var(--mist); font-size: var(--fs-small); }
body #order-standard_cart .order-summary .summary-totals { border-color: var(--line-strong); }
body #order-standard_cart .order-summary .total-due-today .amt { font-family: var(--font-display); font-weight: 800; }
body #order-standard_cart .order-summary .recurring-charges { color: var(--ink-soft); }
body #order-standard_cart .order-summary .subtotal, body #order-standard_cart .order-summary .bordered-totals { border-bottom-color: var(--line-strong); }
body #order-standard_cart .order-summary .btn-continue-shopping { color: var(--signal); }

/* Cart review */
body #order-standard_cart .view-cart-items-header { background-color: var(--ink); font-size: var(--fs-small); }
body #order-standard_cart .view-cart-items { border-bottom-color: var(--ink); }
body #order-standard_cart .view-cart-items .item { font-size: var(--fs-small); }
body #order-standard_cart .view-cart-items .item:nth-child(even) { background-color: var(--mist); }
body #order-standard_cart .view-cart-items .item-title { font-family: var(--font-display); font-weight: 700; }
body #order-standard_cart .view-cart-items .item-domain { color: var(--signal-dark); }
body #order-standard_cart .btn-remove-from-cart { color: var(--ink-soft); }
body #order-standard_cart .btn-remove-from-cart:hover { color: var(--danger-text); }
body #order-standard_cart .empty-cart .btn { background-color: var(--ink); color: var(--white); }
body #order-standard_cart .btn-checkout { padding: 0.9rem 2rem; }
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] { border-color: var(--line-strong) var(--line-strong) var(--mist); background-color: var(--mist); }
body #order-standard_cart .view-cart-tabs .tab-content { background-color: var(--mist); }
body #order-standard_cart .view-cart-promotion-code { border-color: var(--line-strong); }
body #order-standard_cart .view-cart-gateway-checkout { background-color: var(--mist); }

/* Checkout */
body #order-standard_cart .apply-credit-container { background-color: var(--mist); border: 1px solid var(--line); }
body #order-standard_cart .cc-input-container { background-color: var(--mist); border-color: var(--line); }
body #order-standard_cart .cc-input-container .existing-cc-grid { color: var(--ink); }
body #order-standard_cart .checkout-security-msg { padding: var(--space-2) var(--space-3); font-size: var(--fs-small); background: var(--mist); border-left-color: var(--ink-soft); }
body #order-standard_cart .checkout-security-msg i { display: none; }
body #order-standard_cart .account-select-container div.account { background: var(--mist); border-color: var(--line); }
body #order-standard_cart .account-select-container div.account.active { background: var(--white); }
body #order-standard_cart .default-captcha { background-color: var(--mist); border-color: var(--line-strong); color: var(--ink); box-shadow: none; }

/* Order complete */
body #order-standard_cart .order-confirmation { text-align: left; }
body #order-standard_cart .order-confirmation span { font-family: var(--font-display); font-weight: 800; }

/* Renewals and error page */
body .domain-renewals, body .service-renewals { border-top-color: var(--line-strong); background-color: var(--mist); }
body .domain-renewals .domain-renewal, body .service-renewals .service-renewal { border-bottom-color: var(--line); }
body .domain-renewals .domain-renewal:nth-child(even), body .service-renewals .service-renewal:nth-child(even) { background-color: var(--white); }
body .service-renewals .div-renewal-ineligible { color: var(--ink-soft); }
body .error-heading { font-family: var(--font-display); text-align: left; }

/* Checkbox, radio and file inputs are visually hidden, so the ring goes on their visible label */
.custom-control-input:focus-visible ~ .custom-control-label::before,
.custom-file-input:focus-visible ~ .custom-file-label { outline: var(--focus-ring); outline-offset: 2px; }

/* The order form and registration page switch the outline off on :focus; put the ring back for keyboard users */
body #order-standard_cart .form-control:focus-visible, body #order-standard_cart .field:focus-visible, body #order-standard_cart .btn:focus-visible,
body #registration .form-control:focus-visible, body #registration .field:focus-visible { outline: var(--focus-ring); outline-offset: 2px; box-shadow: var(--focus-gap); }

/* ---------- Mobile: cart and tables never push the page sideways ---------- */
@media (max-width: 767.98px) {
  body #order-standard_cart .products .product div.product-desc { float: none; width: auto; }
  body #order-standard_cart .products .product footer { float: none; width: auto; margin: var(--space-3); }
  .table-container, .table-responsive { overflow-x: auto; }
}

/* =====================================================================
   Invoice page. viewinvoice.tpl is a standalone page (no site header), so the
   mywhitehost/viewinvoice.tpl override links this file to it.
   ===================================================================== */
body:has(.invoice-container) { background-color: var(--mist); }
.invoice-container {
  width: auto;
  max-width: 54rem;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.invoice-container::before {
  content: "";
  display: block;
  box-sizing: border-box;
  block-size: 7px;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  border-block: 2px solid var(--lal);
}
.invoice-container .invoice-header h2 { font-size: var(--fs-h2); }
.invoice-container .invoice-header h3 { font-size: var(--fs-h4); color: var(--ink-soft); font-weight: 600; }
.invoice-container .invoice-status { font-family: var(--font-display); font-size: var(--fs-h2); text-transform: none; }
.invoice-container .invoice-status .draft, .invoice-container .invoice-status .cancelled { color: var(--ink-soft); }
.invoice-container .invoice-status .unpaid { color: var(--danger-text); }
.invoice-container .invoice-status .paid { color: var(--go-text); }
.invoice-container .invoice-status .refunded { color: var(--signal-dark); }
.invoice-container .invoice-status .collections { color: var(--amber-line); }
.invoice-container td.total-row { background-color: var(--mist); }
.invoice-container .card { border-color: var(--line-strong); }
.invoice-container .card-header { background: var(--mist); }
.invoice-container .card-header.bg-success { background: var(--go-text) !important; color: var(--white); }
.invoice-container address { font-style: normal; }
/* The invoice page's full-page spinner: its id rule would beat .w-hidden if the script that hides it did not run. */
#fullpage-overlay.w-hidden { display: none; }
/* How to pay (viewinvoice.tpl). The instructions text comes from the WHMCS payment method. */
.mwh-pay {
  margin-block: var(--space-4);
  padding: var(--space-4);
  background: var(--mist);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  break-inside: avoid;
}
.mwh-pay__title { margin: 0 0 var(--space-3); font-size: var(--fs-h3); }
.mwh-pay__facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-3); }
.mwh-pay__fact { min-width: 0; }
.mwh-pay__fact dt { font-weight: 600; color: var(--ink-soft); font-size: var(--fs-small); }
.mwh-pay__fact dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mwh-pay__instructions {
  padding: var(--space-3) 0;
  border-block: 1px solid var(--line-strong);
  line-height: 1.7;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.mwh-pay__instructions:empty { display: none; }
.mwh-pay__instructions > :last-child { margin-bottom: 0; }
.mwh-pay__instructions img { max-width: 12rem; height: auto; }
.mwh-pay__note { margin: var(--space-3) 0 0; font-size: var(--fs-small); }
@media (max-width: 575.98px) {
  .invoice-container { margin: 0; padding: var(--space-4); border-radius: 0; border-inline: 0; }
  .invoice-container::before { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); }
}
@media print {
  body:has(.invoice-container) { background: none; }
  .invoice-container { max-width: none; margin: 0; padding: 0; border: 0; }
  .invoice-container::before { margin: 0 0 var(--space-3); }
  .invoice-container .table td, .invoice-container .table th { background: none !important; }
  .invoice-container td.total-row { background-color: var(--mist) !important; }
  .mwh-pay { background: none; border-color: var(--ink); }
  .mwh-pay__instructions form, .mwh-pay__instructions button, .mwh-pay__instructions input[type=submit] { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}