/* ============================================================
   Tricasol Client Panel — core stylesheet
   Extracted from the inline-styled design source into reusable
   classes, with hover/focus states and mobile responsiveness.
   All classes are prefixed .tsl- to avoid collisions.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --tsl-primary:        #1E0EAF;
  --tsl-primary-hover:  #150a80;
  --tsl-primary-soft:   #EEEBFF;   /* light purple pill/active bg */
  --tsl-accent:         #FFC318;   /* yellow */
  --tsl-success:        #00B77B;
  --tsl-success-soft:   #E6F8F2;
  --tsl-success-text:   #009263;

  --tsl-bg:             #F5F6FB;   /* page background */
  --tsl-card:           #ffffff;
  --tsl-border:         #ECEEF6;   /* card / divider border */
  --tsl-border-strong:  #E1E4F0;   /* input / button border */
  --tsl-divider:        #F2F3F9;   /* row divider */

  --tsl-text:           #0E1020;   /* primary text */
  --tsl-text-2:         #3A3F58;
  --tsl-text-3:         #4A4F68;
  --tsl-muted:          #6B6F86;
  --tsl-muted-2:        #9095AC;
  --tsl-nav-idle:       #4A4F68;
  --tsl-nav-sub:        #6B7089;

  --tsl-sidebar-w:      224px;
  --tsl-topbar-h:       68px;

  --tsl-radius-sm:      8px;
  --tsl-radius:         11px;
  --tsl-radius-lg:      16px;
  --tsl-radius-xl:      18px;

  --tsl-font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---------- Base resets (from the original tricasol-ui.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--tsl-font);
  background: var(--tsl-bg);
  color: var(--tsl-text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tsl-primary); text-decoration: none; }
a:hover { color: var(--tsl-primary-hover); }
input, button, select, textarea { font: inherit; color: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }
::placeholder { color: var(--tsl-muted-2); }
[data-href] { cursor: pointer; }

/* Custom scrollbar for the main scroll area */
.tsl-scroll::-webkit-scrollbar { width: 10px; }
.tsl-scroll::-webkit-scrollbar-thumb {
  background: #DFE2ED;
  border-radius: 99px;
  border: 3px solid var(--tsl-bg);
}

/* ============================================================
   App shell layout
   ============================================================ */
.tsl-app        { min-height: 100vh; background: var(--tsl-bg); }
.tsl-shell      { display: flex; min-height: 100vh; }
.tsl-main-col   { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tsl-main {
  flex: 1;
  overflow-y: auto;
  padding: 34px 32px 96px;
}
.tsl-page {
  /* No width cap. This was 1180px, which on anything wider than a laptop left
     a dead band down the right of every list while the table itself stayed
     cramped. These are data tables — invoice numbers, dates, amounts — and
     they read better with the room. Long-form pages (knowledge base articles)
     set their own measure and are unaffected. */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ---------- Sidebar ---------- */
.tsl-sidebar {
  width: var(--tsl-sidebar-w);
  flex: none;
  background: var(--tsl-card);
  border-right: 1px solid var(--tsl-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.tsl-sidebar__logo { padding: 26px 22px 20px; }
.tsl-sidebar__logo img { width: 132px; height: auto; display: block; }

.tsl-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 14px;
  overflow-y: auto;
}
.tsl-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--tsl-radius);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tsl-nav-idle);
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.tsl-nav-item svg { flex: none; stroke: #8A8FA6; transition: stroke .15s ease; }
.tsl-nav-item:hover { background: var(--tsl-bg); color: var(--tsl-text); }
.tsl-nav-item.is-active {
  color: var(--tsl-primary);
  background: var(--tsl-primary-soft);
}
.tsl-nav-item.is-active svg { stroke: var(--tsl-primary); }

.tsl-nav-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px 34px;
}
.tsl-nav-sub a {
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tsl-nav-sub);
  transition: background .15s ease, color .15s ease;
}
.tsl-nav-sub a:hover { background: var(--tsl-bg); color: var(--tsl-primary); }
.tsl-nav-sub a.is-active { color: var(--tsl-primary); }

.tsl-sidebar__footer {
  margin-top: auto;
  padding: 18px 20px;
  border-top: 1px solid var(--tsl-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tsl-refer {
  border-radius: 14px;
  background: var(--tsl-primary);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tsl-refer__title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.35; }
.tsl-refer__desc  { font-size: 12.5px; color: rgba(255,255,255,0.66); line-height: 1.5; }
.tsl-refer__btn {
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: var(--tsl-radius-sm);
  background: var(--tsl-accent);
  color: var(--tsl-primary);
  font-size: 12.5px;
  font-weight: 700;
}
.tsl-refer__btn:hover { color: var(--tsl-primary); filter: brightness(0.97); }
.tsl-kb-link { font-size: 13.5px; font-weight: 500; color: var(--tsl-muted); padding: 4px 2px; }

/* ---------- Topbar ---------- */
.tsl-topbar {
  height: var(--tsl-topbar-h);
  flex: none;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tsl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.tsl-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tsl-muted-2);
  font-weight: 500;
}
.tsl-crumbs__current { color: var(--tsl-text); font-weight: 600; }
/* Hidden on phones: it only ever reads "Client area / <this page>", which the
   page heading already says, and it competes for the topbar with the menu
   button, cart and account. */
@media (max-width: 640px) {
  .tsl-crumbs { display: none; }
}

.tsl-topbar__actions { display: flex; align-items: center; gap: 10px; }

.tsl-status-btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--tsl-border-strong);
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tsl-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tsl-status-btn:hover { filter: brightness(0.98); }
.tsl-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tsl-success); }

.tsl-icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--tsl-border-strong);
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.tsl-icon-btn:hover { filter: brightness(0.98); }
.tsl-icon-btn__badge {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tsl-accent);
  border: 1.5px solid #fff;
}

.tsl-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--tsl-border);
  cursor: pointer;
}
.tsl-user__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tsl-primary-soft);
  color: var(--tsl-primary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsl-user__meta { display: flex; flex-direction: column; line-height: 1.25; }
.tsl-user__name { font-size: 13.5px; font-weight: 600; }
.tsl-user__id   { font-size: 12px; color: var(--tsl-muted-2); }

/* ============================================================
   Reusable UI atoms (buttons, cards, badges, inputs)
   Extend these as we convert each page.
   ============================================================ */
.tsl-btn {
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: var(--tsl-radius);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.tsl-btn--primary {
  background: var(--tsl-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(30,14,175,0.24);
}
.tsl-btn--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(30,14,175,0.30); }
.tsl-btn--light {
  background: #fff;
  color: var(--tsl-primary);
}
.tsl-btn--light:hover { color: var(--tsl-primary); filter: brightness(0.97); }

.tsl-card {
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-lg);
  padding: 20px;
}

.tsl-input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--tsl-border-strong);
  border-radius: 12px;
  background: #FBFBFE;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
}
.tsl-input:focus { border-color: var(--tsl-primary); }

.tsl-badge {
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-block;
}
.tsl-badge--warn   { background: #FFF6DE; color: #8A6400; }
.tsl-badge--ok     { background: var(--tsl-success-soft); color: #00805A; }
.tsl-badge--muted  { background: var(--tsl-divider); color: var(--tsl-text-3); }

/* ============================================================
   WHMCS system messages (validation / errors / success)
   These are injected by WHMCS; give them a look consistent
   with the theme instead of relying on Bootstrap alerts.
   ============================================================ */
.tsl-sysmsg { margin-bottom: 18px; }
.tsl-sysmsg .alert {
  border-radius: 12px;
  border: 1px solid var(--tsl-border);
  padding: 14px 16px;
  font-size: 14px;
}
.tsl-sysmsg .alert-success { background: var(--tsl-success-soft); border-color: #BFE9DA; color: #00674A; }
.tsl-sysmsg .alert-danger,
.tsl-sysmsg .alert-error   { background: #FDECEC; border-color: #F6C9C9; color: #9B1C1C; }
.tsl-sysmsg .alert-warning { background: #FFF6DE; border-color: #F3E1AE; color: #8A6400; }
.tsl-sysmsg .alert-info    { background: var(--tsl-primary-soft); border-color: #D9D2FF; color: var(--tsl-primary); }

/* ============================================================
   Login / register split-screen layout
   ============================================================ */
.tsl-auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}
.tsl-auth__brand {
  position: relative;
  overflow: hidden;
  background: var(--tsl-primary);
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tsl-auth__form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #fff;
}
.tsl-auth__form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 26px; }

/* ============================================================
   Responsive — collapse the sidebar on smaller screens.
   The original design was desktop-only; this adds a mobile mode.
   ============================================================ */
@media (max-width: 992px) {
  .tsl-sidebar {
    position: fixed;
    left: 0; top: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 20px 60px rgba(16,20,60,0.18);
  }
  body.tsl-nav-open .tsl-sidebar { transform: translateX(0); }
  body.tsl-nav-open .tsl-scrim {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(16,20,60,0.4);
  }
  .tsl-topbar__hamburger { display: inline-flex; }
}
.tsl-topbar__hamburger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--tsl-border-strong);
  border-radius: 10px;
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 6px;
}

@media (max-width: 992px) {
  .tsl-main { padding: 24px 18px 80px; }
  .tsl-topbar { padding: 0 18px; }
  .tsl-auth { grid-template-columns: 1fr; }
  .tsl-auth__brand { display: none; }   /* hide brand panel on mobile, show only the form */
}

/* ============================================================
   Auth pages: login, register, password reset
   All three share the .tsl-login two-column grid via
   includes/auth-brand.tpl. The grid is written INLINE in those
   templates and had no stylesheet rules at all, so nothing
   collapsed it on a phone — the brand panel kept its column and
   sat on top of the form, which is what made login unusable on
   mobile. The .tsl-auth rules above target a different class
   these pages never use.

   !important is needed here and only here: an inline style
   outranks any selector, and the alternative is editing the
   inline grid out of three templates plus the shared include.
   ============================================================ */
/* Logo above the form. Desktop already has it in the brand panel, so it only
   appears once that panel is hidden. */
.tsl-auth-logo { display: none; }
.tsl-auth-logo img { height: 34px; width: auto; display: block; }

@media (max-width: 900px) {
  .tsl-login { grid-template-columns: 1fr !important; }
  /* Decorative only — the form is the whole point of these pages. */
  .tsl-login__brand { display: none !important; }
  .tsl-login__form-col { padding: 36px 20px !important; }
  .tsl-auth-logo { display: flex; justify-content: center; margin-bottom: 4px; }
}
@media (max-width: 480px) {
  .tsl-login__form-col { padding: 28px 16px !important; }
}

@media (max-width: 640px) {
  .tsl-user__meta { display: none; }     /* avatar only on small screens */
  .tsl-status-btn span:last-child { display: none; } /* dot only */
}

/* ============================================================
   Dashboard (clientareahome)
   ============================================================ */
.tsl-h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.025em; }
.tsl-h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.tsl-link-sm { font-size: 13.5px; font-weight: 600; }

.tsl-dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.tsl-dash-head__text { display: flex; flex-direction: column; gap: 7px; }
.tsl-dash-head__sub { margin: 0; font-size: 15px; color: var(--tsl-muted); }

/* Domain search */
.tsl-domain-search {
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(16,20,60,0.04);
}
.tsl-domain-search__icon { margin-left: 12px; flex: none; }
.tsl-domain-search__input {
  flex: 1;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 15.5px;
  font-weight: 500;
}
.tsl-domain-search__btn { height: 44px; padding: 0 26px; border-radius: 12px; }

/* ============================================================
   Mobile fixes — three bugs found on real devices
   ============================================================ */

/* 1. The hamburger never appeared, so the sidebar was unreachable on a
   phone. The @media block above turns it on, but the base rule declaring
   display:none sits AFTER it with the same specificity, so the base rule
   always won. Re-applying it here, after both, settles it. */
@media (max-width: 992px) {
  .tsl-topbar__hamburger { display: inline-flex !important; }
}

/* 2. The dashboard domain search ran off the right edge: the field and the
   Search button sat on one line with nothing allowing them to wrap. */
@media (max-width: 620px) {
  .tsl-domain-search { flex-wrap: wrap; height: auto; padding: 10px; gap: 10px; }
  .tsl-domain-search__input { flex: 1 1 100%; font-size: 16px; }
  .tsl-domain-search__btn { flex: 1 1 100%; width: 100%; }
  .tsl-domain-search__icon { display: none; }
}

/* 3. Knowledge base cards overflowed the screen. A category description is
   white-space:nowrap so it can ellipsis, but a grid or flex child defaults
   to min-width:auto — it refuses to shrink below its content, so the whole
   card grew to the width of the longest description instead of clipping it.
   min-width:0 lets them shrink and the ellipsis do its job. */
.tsl-kbx-cols > *,
.tsl-kbx-card,
.tsl-kbx-cat,
.tsl-kbx-art { min-width: 0; }

/* ============================================================
   MOBILE SAFETY NET
   Applies to every page, including ones not individually styled.
   ============================================================ */

/* Nothing may be wider than its container. Covers editor HTML in knowledge
   base articles and ticket replies, where the markup is not ours. */
img, svg, video, iframe, canvas, table { max-width: 100%; }

/* A grid or flex child will not shrink below its content unless told to.
   That single default is behind most horizontal overflow on this theme:
   one long unbroken string — a domain, an invoice number, a URL — and the
   whole row grows past the screen. */
.tsl-page > *,
.tsl-card,
.tsl-table,
.tsl-table__body > *,
.tsl-svc-meta,
.tsl-tkt-meta,
.tsl-kba-grid > *,
.tsl-kbc > * { min-width: 0; }

/* Long unbroken strings (a long domain, a session token in a ticket) have
   nowhere to wrap and push the layout sideways. */
.tsl-svc-name, .tsl-tkt-title, .tsl-kbc-item__title,
.tsl-kba-title, .tsl-inv-num { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* THE systemic fix. 18 templates set grid-template-columns in a style
     attribute — account details, contacts, service details, affiliates,
     register, security. An inline style outranks every selector, so no media
     query could ever stack them and each was a two-column layout squeezed
     into a phone. This collapses all of them, and anything added later. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Header rows that put a title beside buttons: let the buttons drop. */
  .tsl-dash-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tsl-dash-head__actions { width: 100%; flex-wrap: wrap; }
  .tsl-dash-head__actions .tsl-btn { flex: 1 1 auto; justify-content: center; }

  /* Filter tabs scroll rather than wrapping into a tall block. */
  .tsl-svc-tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tsl-svc-tabs::-webkit-scrollbar { display: none; }
  .tsl-svc-tab { flex: none; }
}

/* Stat cards */
.tsl-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tsl-stat { display: flex; flex-direction: column; gap: 10px; }
.tsl-stat__label { font-size: 13px; font-weight: 600; color: var(--tsl-muted); }
.tsl-stat__value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.tsl-stat__link { font-size: 13px; font-weight: 600; }
.tsl-stat__link--ok { color: var(--tsl-success); }
.tsl-stat__link--ok:hover { color: #00805A; }

/* Promo banner */
.tsl-promo {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--tsl-primary);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.tsl-promo__glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,195,24,0.32), rgba(30,14,175,0) 68%);
  top: -160px; right: 120px;
}
.tsl-promo__body { position: relative; max-width: 500px; display: flex; flex-direction: column; gap: 14px; }
.tsl-promo__tag {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255,255,255,0.14);
  color: var(--tsl-accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.tsl-promo__title { margin: 0; font-size: 27px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.25; }
.tsl-promo__desc  { margin: 0; font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.55; }
.tsl-promo__btn   { align-self: flex-start; margin-top: 6px; }
.tsl-promo__stat {
  position: relative;
  width: 190px; height: 190px;
  flex: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.tsl-promo__stat-num { font-size: 44px; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.tsl-promo__stat-cap { font-size: 13px; color: rgba(255,255,255,0.66); font-weight: 600; }

/* Quick actions */
.tsl-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tsl-quick {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  color: var(--tsl-text);
  font-size: 14.5px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tsl-quick:hover { color: var(--tsl-text); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,20,60,0.08); }
.tsl-quick__icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.tsl-quick__icon--purple { background: var(--tsl-primary-soft); }
.tsl-quick__icon--green  { background: var(--tsl-success-soft); }
.tsl-quick__icon--amber  { background: #FFF6DE; }
.tsl-quick__icon--slate  { background: #EEF0FA; }

/* Renewals */
.tsl-renewals { padding: 0; overflow: hidden; }
.tsl-renewals__head {
  padding: 20px 22px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.tsl-renewals__list { display: flex; flex-direction: column; }
.tsl-renewal-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-top: 1px solid var(--tsl-divider);
}
.tsl-renewal-row__icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.tsl-renewal-row__icon--hosting { background: var(--tsl-primary-soft); }
.tsl-renewal-row__icon--domain  { background: var(--tsl-success-soft); }
.tsl-renewal-row__icon--addon,
.tsl-renewal-row__icon--other   { background: #EEF0FA; }
.tsl-renewal-row__meta { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.tsl-renewal-row__name { font-size: 14.5px; font-weight: 700; }
.tsl-renewal-row__sub  { font-size: 13px; color: var(--tsl-muted-2); }
.tsl-renewal-row__date { font-size: 13.5px; color: var(--tsl-muted); font-weight: 500; }
.tsl-renewal-row__cta  { font-size: 13px; font-weight: 700; color: var(--tsl-primary); }
.tsl-renewals__empty   { padding: 22px; font-size: 14px; color: var(--tsl-muted); }

/* Dashboard responsive */
@media (max-width: 992px) {
  .tsl-stat-grid  { grid-template-columns: 1fr; }
  .tsl-quick-grid { grid-template-columns: 1fr 1fr; }
  .tsl-promo { flex-direction: column; text-align: center; padding: 32px 24px; }
  .tsl-promo__stat { width: 150px; height: 150px; }
  .tsl-h1 { font-size: 26px; }
}
@media (max-width: 560px) {
  .tsl-quick-grid { grid-template-columns: 1fr; }
  .tsl-dash-head { flex-direction: column; align-items: flex-start; }
  .tsl-renewal-row { flex-wrap: wrap; }
}

/* ============================================================
   Products & Services (clientareaproducts)
   ============================================================ */
.tsl-svc-toolbar { display: flex; gap: 12px; }
.tsl-svc-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: 13px;
}
.tsl-svc-tab {
  height: 36px;
  padding: 0 15px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--tsl-nav-idle);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tsl-svc-tab:hover { background: var(--tsl-bg); }
.tsl-svc-tab.is-active { background: var(--tsl-primary); color: #fff; }

.tsl-svc-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: 13px;
}
.tsl-svc-search input {
  flex: 1;
  height: 46px;
  border: none;
  background: transparent;
  font-size: 14.5px;
}

/* Generic table shell (reused by other list pages later) */
.tsl-table {
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl);
  overflow: hidden;
}
.tsl-table__head {
  padding: 14px 24px;
  background: #FAFBFE;
  border-bottom: 1px solid var(--tsl-border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tsl-muted);
  letter-spacing: 0.03em;
}
.tsl-table__body { display: flex; flex-direction: column; }
.tsl-table__empty { padding: 40px 24px; text-align: center; color: var(--tsl-muted); font-size: 14px; }
.tsl-table__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 24px;
  background: #FAFBFE;
  border-top: 1px solid var(--tsl-border);
}
.tsl-table__count { font-size: 13.5px; color: var(--tsl-muted); }

/* Pagination — shared by services, domains, invoices and tickets.
   Controls are a mix of <a> (an available page) and <span> (a disabled one),
   so every rule below has to apply regardless of element: an inline <span>
   ignores height and sits on its own baseline, which is what pushed the
   Prev/Next text out of line with its neighbours. */
.tsl-pager { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tsl-pager[hidden] { display: none; }

.tsl-pager__btn,
.tsl-pager__page {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; line-height: 1; vertical-align: middle;
  font-family: inherit; font-size: 13px; font-weight: 600;
  box-sizing: border-box;
}
.tsl-pager__btn {
  min-width: 38px; padding: 0 14px; margin: 0;
  border: 1px solid var(--tsl-border-strong); border-radius: 10px;
  background: var(--tsl-card); color: var(--tsl-text-2);
  text-decoration: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tsl-pager__btn:hover:not(:disabled):not(.is-disabled):not(.is-current) {
  border-color: var(--tsl-primary); color: var(--tsl-primary); background: var(--tsl-primary-soft);
}
.tsl-pager__btn.is-current,
a.tsl-pager__btn.is-current {
  background: var(--tsl-primary); border-color: var(--tsl-primary);
  color: #fff; cursor: default;
}
.tsl-pager__btn:disabled,
.tsl-pager__btn.is-disabled {
  color: var(--tsl-muted-2); border-color: var(--tsl-border);
  background: var(--tsl-card); cursor: not-allowed; pointer-events: none;
}
.tsl-pager__gap { display: inline-flex; align-items: center; height: 36px; padding: 0 2px; color: var(--tsl-muted-2); font-size: 13px; }
.tsl-pager__page { padding: 0 10px; color: var(--tsl-muted); white-space: nowrap; }

@media (max-width: 620px) {
  .tsl-table__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Services row grid */
.tsl-svc-row {
  display: grid;
  grid-template-columns: 2.3fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--tsl-divider);
}
.tsl-table__head.tsl-svc-row { padding: 14px 24px; align-items: center; }
.tsl-svc-row__action-h { width: 92px; }
.tsl-svc-item:last-child { border-bottom: none; }

.tsl-svc-cell-service { display: flex; align-items: center; gap: 13px; min-width: 0; }
.tsl-svc-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: #EEF0FA;
  display: flex; align-items: center; justify-content: center;
}
.tsl-svc-icon svg { stroke: #9095AC; }
.tsl-svc-icon--active { background: var(--tsl-primary-soft); }
.tsl-svc-icon--active svg { stroke: var(--tsl-primary); }
.tsl-svc-icon--dead { background: var(--tsl-divider); }

.tsl-svc-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.tsl-svc-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsl-svc-domain { font-size: 13px; color: var(--tsl-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tsl-svc-plan,
.tsl-svc-due { font-size: 14px; color: var(--tsl-text-3); font-weight: 500; }
.tsl-svc-status { justify-self: start; }
.tsl-badge--danger { background: #FDECEC; color: #C0392B; }

.tsl-svc-manage {
  width: 92px; height: 38px;
  border: 1px solid var(--tsl-border-strong);
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tsl-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.tsl-svc-manage:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }

/* Services responsive — collapse the grid into stacked cards */
@media (max-width: 900px) {
  .tsl-svc-toolbar { flex-direction: column; }
  .tsl-table__head { display: none; }

  /* Plan, Due and Status were all given grid-area:meta — three items in ONE
     cell, so they rendered on top of each other ("Active" sitting over the
     date). Grid cannot lay siblings out side by side within a single area;
     flex-wrap can. The service cell grows to fill the first line, which
     pushes the three meta items onto a line of their own. */
  .tsl-svc-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 12px;
  }
  .tsl-svc-cell-service { flex: 1 1 60%; min-width: 0; }
  .tsl-svc-manage { flex: none; margin-left: auto; }
  .tsl-svc-plan, .tsl-svc-due, .tsl-svc-status { flex: none; display: inline-flex; }
  .tsl-svc-plan::before { content: "Plan: "; color: var(--tsl-muted-2); margin-right: 4px; }
  .tsl-svc-due::before  { content: "Due: ";  color: var(--tsl-muted-2); margin-right: 4px; }
}

/* ============================================================
   My Domains (clientareadomains) — reuses .tsl-table + .tsl-svc-*
   ============================================================ */
.tsl-dash-head__actions { display: flex; gap: 10px; }

.tsl-btn--outline {
  background: #fff;
  color: var(--tsl-text-2);
  border: 1px solid var(--tsl-border-strong);
  box-shadow: none;
}
.tsl-btn--outline:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); transform: none; }

.tsl-badge--info { background: var(--tsl-primary-soft); color: var(--tsl-primary); }

/* Domain row grid (slightly different column ratios than services) */
.tsl-dom-row {
  display: grid;
  grid-template-columns: 2.2fr 1.1fr 1.1fr 0.9fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--tsl-divider);
}
.tsl-table__head.tsl-dom-row { padding: 14px 24px; }
.tsl-dom-row.tsl-svc-item:last-child { border-bottom: none; }

.tsl-dom-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.tsl-dom-icon--active  { background: var(--tsl-success-soft); }
.tsl-dom-icon--active svg  { stroke: var(--tsl-success-text); }
.tsl-dom-icon--pending { background: #EEF0FA; }
.tsl-dom-icon--expired { background: var(--tsl-divider); }
.tsl-dom-icon--expired svg { stroke: #9095AC; }
.tsl-dom-icon--other   { background: var(--tsl-primary-soft); }
.tsl-dom-icon--other svg   { stroke: var(--tsl-primary); }

/* Domains responsive */
@media (max-width: 900px) {
  /* Same overlap as the services rows: three items sharing one grid area
     stack on top of each other. Flex-wrap instead. */
  .tsl-dom-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 12px;
  }
  .tsl-dom-row .tsl-svc-cell-service { flex: 1 1 60%; min-width: 0; }
  .tsl-dom-row .tsl-svc-manage { flex: none; margin-left: auto; }
  .tsl-dom-row .tsl-svc-plan,
  .tsl-dom-row .tsl-svc-due,
  .tsl-dom-row .tsl-svc-status { flex: none; display: inline-flex; }
  .tsl-dom-row .tsl-svc-plan::before { content: "Reg: "; color: var(--tsl-muted-2); margin-right: 4px; }
  .tsl-dom-row .tsl-svc-due::before  { content: "Exp: "; color: var(--tsl-muted-2); margin-right: 4px; }
  .tsl-dash-head__actions { flex-direction: column; width: 100%; }
}

/* ============================================================
   Order forms (Transfer / Renew / Register)
   These render inside the client-area shell, so they inherit
   all tokens. Scoped under .tsl-order.
   ============================================================ */
.tsl-order { padding: 34px 32px 96px; }
.tsl-order__wrap {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tsl-order__wrap--wide { max-width: 1100px; }
.tsl-order-page-title { margin: 0; }

.tsl-order-card {
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl);
  padding: 26px 28px;
}
.tsl-order-card--hero {
  border-radius: 22px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.tsl-order-card__title { margin: 0 0 18px; font-size: 17px; font-weight: 700; }

.tsl-order-hero__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}
.tsl-order-hero__icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--tsl-primary-soft);
  display: flex; align-items: center; justify-content: center;
}
.tsl-order-hero__title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.025em; }
.tsl-order-hero__sub { margin: 0; font-size: 15.5px; color: var(--tsl-muted); max-width: 520px; line-height: 1.6; }

/* Field label pattern */
.tsl-field { display: flex; flex-direction: column; gap: 7px; }
.tsl-field__label { font-size: 13px; font-weight: 600; color: var(--tsl-text-2); }

/* Transfer form */
.tsl-transfer-fields {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: flex-end;
}
.tsl-transfer-btn { height: 48px; padding: 0 28px; }

.tsl-order-notice {
  padding: 16px 20px;
  border-radius: 14px;
  background: #FFF6DE;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tsl-order-notice__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tsl-accent); flex: none; }
.tsl-order-notice__text { font-size: 14px; color: #6B5300; line-height: 1.55; }
.tsl-order-notice__text strong { font-weight: 700; color: #4A3C00; }

.tsl-order-alert { border-radius: 12px; }
.tsl-order-captcha { margin-top: 8px; }
.tsl-order-captcha img { border: 1px solid var(--tsl-border-strong); border-radius: 10px; margin-bottom: 8px; }
/* NOTE: no !important — WHMCS reveals elements with jQuery .show(), which
   sets an inline display style. !important here would beat that inline
   style and permanently hide domain-search results. */
.w-hidden { display: none; }

/* Bootstrap's .hidden, which six inherits from all.css and this standalone
   theme never defined. WHMCS's own markup relies on it — includes/
   linkedaccounts.tpl hides its whole message bank with it, and without this
   rule every "Link Initiated!" and "Error" variant renders at once on the
   security page. Same no-!important reasoning as .w-hidden above. */
.hidden { display: none; }

/* ---- Linked accounts (includes/linkedaccounts.tpl) -------------------
   The provider buttons and the accounts table are emitted by WHMCS, so
   they arrive with Bootstrap classes and no styling of our own. */
.social-signin-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}
.social-signin-btns > * { margin: 0 !important; }
.social-signin-btns a,
.social-signin-btns button,
.social-signin-btns .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px !important;
  border: 1px solid var(--tsl-border-strong) !important;
  border-radius: 11px !important;
  background: #fff !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--tsl-text-2, #3A3F58) !important;
  text-decoration: none;
  box-shadow: none !important;
}
.social-signin-btns a:hover,
.social-signin-btns .btn:hover { border-color: #C9CEE4 !important; }

/* Google draws its own bordered button (its branding terms require it, and it
   sits in an iframe/shadow root we cannot reach into). Our wrapper border then
   shows as a second box around it, so strip the wrapper for that one only.
   :has() covers whatever element WHMCS nests it in; the explicit selectors
   below are the fallback for browsers without :has(). */
.social-signin-btns > *:has(iframe),
.social-signin-btns > *:has([class*="g_id"]),
.social-signin-btns > *:has([class*="abcRio"]),
.social-signin-btns [class*="g_id_signin"],
.social-signin-btns [class*="abcRioButton"] {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.social-signin-btns iframe { border: none !important; }

#tableLinkedAccounts { width: 100%; border-collapse: collapse; }
#tableLinkedAccounts th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--tsl-border);
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9095AC;
}
#tableLinkedAccounts td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--tsl-border);
  font-size: 14.5px;
  color: var(--tsl-text-2, #3A3F58);
}
#tableLinkedAccounts tr:last-child td { border-bottom: none; }

/* Transfer checklist */
.tsl-transfer-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.tsl-check-item { display: flex; align-items: flex-start; gap: 11px; }
.tsl-check-item svg { flex: none; margin-top: 1px; }
.tsl-check-item span { font-size: 14.5px; color: var(--tsl-text-2); line-height: 1.55; }
.tsl-check-item strong { font-weight: 700; }

/* Renew empty state */
.tsl-renew-empty {
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  border-radius: 20px;
}
.tsl-renew-empty__icon {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: #FFF6DE;
  display: flex; align-items: center; justify-content: center;
}
.tsl-renew-empty__title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.tsl-renew-empty__text { margin: 0; font-size: 15px; color: var(--tsl-muted); max-width: 420px; line-height: 1.6; }
.tsl-renew-empty__actions { display: flex; gap: 10px; margin-top: 8px; }

/* Renew populated */
.tsl-renew-showing { text-align: center; font-size: 14px; color: var(--tsl-muted); }
.tsl-renew-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.tsl-renew-list { display: flex; flex-direction: column; gap: 14px; }
.tsl-renew-card { padding: 22px 24px; }
.tsl-renew-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tsl-renew-card__name { margin: 0; font-size: 18px; font-weight: 800; }
.tsl-renew-card__expiry { margin: 8px 0 0; font-size: 14px; color: var(--tsl-muted); }
.tsl-renew-card__desc { margin: 6px 0 0; font-size: 13.5px; color: var(--tsl-success-text); }
.tsl-renew-card__form { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.tsl-renew-card__foot { margin-top: 16px; display: flex; justify-content: flex-end; }
.tsl-renew-grace-note { text-align: center; font-size: 12.5px; color: var(--tsl-muted-2); margin-top: 4px; }
.tsl-renew-summary-col { position: sticky; top: 88px; }
.tsl-renew-cart-btn { width: 100%; margin-top: 16px; }

/* Order-form responsive */
@media (max-width: 860px) {
  .tsl-order { padding: 24px 18px 80px; }
  .tsl-order-card--hero { padding: 28px 22px; }
  .tsl-transfer-fields { grid-template-columns: 1fr; }
  .tsl-transfer-checklist { grid-template-columns: 1fr; }
  .tsl-renew-layout { grid-template-columns: 1fr; }
  .tsl-renew-summary-col { position: static; }
  .tsl-order-hero__title { font-size: 24px; }
}

/* ============================================================
   Register domain (order form) — styles WHMCS's checker scaffold
   Preserves .w-hidden toggling done by WHMCS JS.
   ============================================================ */
.tsl-order--register .tsl-order__wrap { max-width: 1000px; }

/* Hero search card */
.tsl-reg-hero {
  border-radius: 22px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.tsl-reg-hero__title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.tsl-reg-hero__sub { margin: 0; font-size: 15.5px; color: var(--tsl-muted); max-width: 520px; line-height: 1.6; }

.tsl-reg-searchwrap { width: 100%; max-width: 640px; }
.tsl-reg-search {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1.5px solid var(--tsl-primary);
  border-radius: 15px;
  box-shadow: 0 0 0 4px rgba(30,14,175,0.08);
}
.tsl-reg-search__icon { margin-left: 12px; flex: none; }
.tsl-reg-search__input {
  flex: 1;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
}
.tsl-reg-search .tsl-btn { height: 44px; padding: 0 26px; }
.tsl-reg-captcha { margin-top: 14px; }
.tsl-reg-captcha img { border: 1px solid var(--tsl-border-strong); border-radius: 10px; margin-bottom: 8px; }

/* Quick price pills */
.tsl-reg-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tsl-reg-pill {
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--tsl-bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tsl-text-3);
}

/* Results container */
.tsl-reg-results { display: flex; flex-direction: column; gap: 22px; }
.tsl-reg-searching {
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: 18px;
  padding: 22px 26px;
  margin: 0;
  font-size: 15px;
  color: var(--tsl-muted);
}

/* Primary result — the available/unavailable banner */

/* Spotlight per-TLD result: JS reveals children by removing w-hidden.
   Our .tsl-reg-* styling handles layout; ensure the loader hides once done. */
.domain-lookup-loader.w-hidden,
.domain-lookup-result.w-hidden,
.domain-searching.w-hidden { display: none; }

/* Alerts WHMCS emits (transfer unavailable, etc.) */
.alert { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin: 10px 0; }
.alert-warning { background: #FFF6DE; border: 1px solid #F3E1AE; color: #8A6400; }
.alert-danger, .alert-error { background: #FDECEC; border: 1px solid #F6C9C9; color: #9B1C1C; }
.alert-success { background: var(--tsl-success-soft); border: 1px solid #BFE9DA; color: #00674A; }
.slim-alert { padding: 8px 12px; text-align: center; }

/* Loading spinner icon spacing */
.fa-spin { margin-right: 4px; }

/* ============================================================
   Order complete
   ============================================================ */
.tsl-order__wrap--narrow { max-width: 760px; }

.tsl-complete-hero {
  border-radius: 22px;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.tsl-complete-hero__icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--tsl-success-soft);
  display: flex; align-items: center; justify-content: center;
}
.tsl-complete-hero__title { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.025em; }
.tsl-complete-hero__sub { margin: 0; font-size: 15.5px; color: var(--tsl-muted); max-width: 460px; line-height: 1.6; }
.tsl-complete-hero__actions { display: flex; gap: 10px; padding-top: 6px; flex-wrap: wrap; justify-content: center; }

.tsl-complete-order__head { display: flex; align-items: center; justify-content: space-between; }

.tsl-next-steps { display: flex; flex-direction: column; gap: 14px; }
.tsl-next-step { display: flex; align-items: flex-start; gap: 13px; }
.tsl-next-step__num {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--tsl-divider);
  color: var(--tsl-muted);
  font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tsl-next-step__num--active { background: var(--tsl-success-soft); color: #00805A; }
.tsl-next-step__text { font-size: 14.5px; color: var(--tsl-text-2); line-height: 1.55; }

/* ============================================================
   Cart / viewcart  (Review & Checkout)
   Design: empty-cart.html + panel design language.
   Left column = line items + promo/tax; right = order summary.
   Functional WHMCS markup is restyled here (no Bootstrap).
   ============================================================ */
.tsl-cart__title {
  margin: 0 0 22px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.tsl-cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}
.tsl-cart-main-col { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ---- items card ---- */
.tsl-cart-card {
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: 20px;
  padding: 8px 26px;
}
.tsl-cart-headrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px 12px;
  border-bottom: 1px solid var(--tsl-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tsl-muted-2);
}
.tsl-cart-headrow__desc  { flex: 1 1 auto; min-width: 0; }
.tsl-cart-headrow__qty   { flex: none; width: 92px; text-align: center; }
.tsl-cart-headrow__price { flex: none; width: 150px; text-align: right; }
.tsl-cart-headrow__x     { flex: none; width: 30px; }

.tsl-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--tsl-divider);
}
.tsl-cart-item:last-child { border-bottom: none; }
.tsl-cart-item--addon { padding-top: 10px; }
.tsl-cart-item--addon .tsl-cart-item__name,
.tsl-cart-item--credit .tsl-cart-item__group { font-weight: 600; }
.tsl-cart-item--credit { padding-top: 6px; opacity: .95; }

.tsl-cart-item__main { flex: 1 1 auto; min-width: 0; }
.tsl-cart-item__name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tsl-text);
  line-height: 1.35;
}
.tsl-cart-item__group {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tsl-muted);
}
.tsl-cart-item__domain {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tsl-primary);
  word-break: break-all;
}
.tsl-cart-item__opts {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--tsl-muted-2);
  line-height: 1.5;
}
.tsl-cart-edit {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tsl-primary);
  white-space: nowrap;
}
.tsl-cart-edit:hover { text-decoration: underline; }
.tsl-cart-edit i { font-size: 11px; }

.tsl-cart-item__qty { flex: none; width: 92px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.tsl-cart-qtyinput {
  width: 72px; height: 38px;
  border: 1px solid var(--tsl-border-strong);
  border-radius: 9px;
  background: #FBFBFE;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.tsl-cart-qtyinput:focus { border-color: var(--tsl-primary); outline: none; }
.tsl-cart-qtybtn {
  border: none; background: var(--tsl-primary-soft);
  color: var(--tsl-primary);
  font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
}
.tsl-cart-qtybtn:hover { filter: brightness(0.97); }

.tsl-cart-item__price {
  flex: none;
  width: 150px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tsl-cart-item__amt { font-size: 15.5px; font-weight: 800; color: var(--tsl-text); }
.tsl-cart-item__amt--credit { color: var(--tsl-success-text); }
.tsl-cart-item__cycle { font-size: 12.5px; font-weight: 600; color: var(--tsl-muted); }
.tsl-cart-item__note  { font-size: 11.5px; color: var(--tsl-muted-2); line-height: 1.45; }
.tsl-cart-item__note .renewal-price { font-weight: 700; }

/* period selector (multi-year domains) */
.tsl-cart-perioddd { position: relative; display: inline-block; margin: 2px 0; }
.tsl-cart-periodbtn {
  border: 1px solid var(--tsl-border-strong);
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--tsl-text-2);
  cursor: pointer;
}
.tsl-cart-perioddd .dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 190px; z-index: 20;
  background: #fff; border: 1px solid var(--tsl-border);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(16,20,60,0.16);
  padding: 6px; list-style: none; margin: 0;
  display: none; text-align: left;
}
.tsl-cart-perioddd.open .dropdown-menu,
.tsl-cart-perioddd .dropdown-menu.show { display: block; }
.tsl-cart-perioddd .dropdown-item { list-style: none; }
.tsl-cart-perioddd .dropdown-menu a {
  display: block; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--tsl-text-2);
}
.tsl-cart-perioddd .dropdown-menu a:hover { background: var(--tsl-primary-soft); color: var(--tsl-primary); }

.tsl-cart-item__x { flex: none; width: 30px; display: flex; justify-content: flex-end; padding-top: 2px; }
.tsl-cart-remove {
  width: 30px; height: 30px;
  border: none; border-radius: 8px;
  background: transparent; color: var(--tsl-muted-2);
  cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.tsl-cart-remove:hover { background: #FDECEC; color: #C0392B; }

/* ---- empty state ---- */
.tsl-cart-empty {
  padding: 64px 40px;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
}
.tsl-cart-empty__icon {
  width: 64px; height: 64px; border-radius: 20px;
  background: var(--tsl-bg);
  display: flex; align-items: center; justify-content: center;
}
.tsl-cart-empty__title { margin: 4px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.tsl-cart-empty__text  { margin: 0; font-size: 15px; color: var(--tsl-muted); max-width: 380px; line-height: 1.6; }
.tsl-cart-empty__btn   { margin-top: 8px; text-decoration: none; }

/* ---- clear-cart ---- */
.tsl-cart-clear { padding: 6px 4px 16px; }
.tsl-cart-clearbtn {
  border: none; background: transparent;
  color: var(--tsl-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 4px;
}
.tsl-cart-clearbtn:hover { color: #C0392B; }

/* ---- hook / gateway output ---- */
.tsl-cart-hookoutput { margin-top: 4px; }

/* ---- promo + tax card ---- */
.tsl-cart-extra {
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: 18px;
  overflow: hidden;
}
.tsl-cart-extra-tabs {
  display: flex; gap: 4px; list-style: none; margin: 0;
  padding: 8px 8px 0; border-bottom: 1px solid var(--tsl-border);
}
.tsl-cart-extra-tabs .nav-item { list-style: none; }
.tsl-cart-extra-tab {
  display: block; padding: 12px 16px;
  font-size: 13.5px; font-weight: 700; color: var(--tsl-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tsl-cart-extra-tab.active { color: var(--tsl-primary); border-bottom-color: var(--tsl-primary); }
.tsl-cart-extra-body { padding: 20px; }
.tsl-cart-extra-body .tab-pane { display: none; }
.tsl-cart-extra-body .tab-pane.active { display: block; }

.tsl-cart-promo-form { display: flex; gap: 10px; align-items: stretch; }
.tsl-cart-promo-input { position: relative; flex: 1 1 auto; }
.tsl-cart-promo-input i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--tsl-muted-2); font-size: 14px;
}
.tsl-cart-promo-input input {
  width: 100%; height: 48px; padding: 0 14px 0 38px;
  border: 1px solid var(--tsl-border-strong); border-radius: 12px;
  background: #FBFBFE; font-size: 14.5px; font-weight: 500;
}
.tsl-cart-promo-input input:focus { border-color: var(--tsl-primary); outline: none; }
.tsl-cart-promo-form .tsl-btn { flex: none; }
.tsl-cart-promo-applied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 600; color: var(--tsl-text-2); flex-wrap: wrap;
}
.tsl-cart-promo-remove { font-size: 13px; font-weight: 700; color: #C0392B; }
.tsl-cart-promo-remove:hover { text-decoration: underline; }
.tsl-cart-tax-form { display: flex; flex-direction: column; gap: 14px; }
.tsl-cart-tax-form .tsl-btn { align-self: flex-start; }

/* ---- order summary ---- */
.tsl-cart-summary-col { position: sticky; top: 20px; }
.tsl-cart-summary {
  background: var(--tsl-card);
  border: 1px solid var(--tsl-border);
  border-radius: 18px;
  padding: 24px 26px;
}
.tsl-cart-summary__title { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.tsl-cart-summary .summary-container { font-size: 14px; }
.tsl-cart-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 7px 0; color: var(--tsl-text-3);
}
.tsl-cart-summary__row .float-right,
.tsl-cart-summary__row .pull-right { float: none; font-weight: 700; color: var(--tsl-text); text-align: right; }
.tsl-cart-summary__row .float-left,
.tsl-cart-summary__row .pull-left { float: none; }
.tsl-cart-summary__group {
  border-top: 1px solid var(--tsl-divider);
  border-bottom: 1px solid var(--tsl-divider);
  margin: 4px 0; padding: 4px 0;
}
.tsl-cart-summary__group .tsl-cart-summary__row { padding: 5px 0; font-size: 13.5px; }
.recurring-charges { font-size: 12.5px; color: var(--tsl-muted); line-height: 1.6; }
.recurring-charges .cost { font-weight: 700; color: var(--tsl-text-2); }
.tsl-cart-summary__divider { height: 1px; background: var(--tsl-border); margin: 12px 0; }
.tsl-cart-summary__due {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 2px 0 4px;
}
.tsl-cart-summary__due-label { font-size: 15px; font-weight: 700; color: var(--tsl-text); }
.tsl-cart-summary__due-amt {
  font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--tsl-text);
}

.tsl-cart-express { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.tsl-cart-express__sep { text-align: center; font-size: 12px; font-weight: 700; color: var(--tsl-muted-2); }
.tsl-cart-express .separator:last-child { display: none; }

.tsl-cart-checkout { width: 100%; margin-top: 16px; text-decoration: none; }
.tsl-cart-checkout.disabled {
  background: #DDD9F5; color: #fff; cursor: not-allowed;
  box-shadow: none; pointer-events: none;
}
.tsl-cart-checkout.disabled:hover { transform: none; box-shadow: none; }
.tsl-cart-continue {
  display: block; text-align: center; margin-top: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--tsl-muted);
}
.tsl-cart-continue:hover { color: var(--tsl-primary); }

/* ---- responsive ---- */
@media (max-width: 1040px) {
  .tsl-cart-layout { grid-template-columns: 1fr; }
  .tsl-cart-summary-col { position: static; }
}
@media (max-width: 640px) {
  .tsl-cart__title { font-size: 26px; }
  .tsl-cart-card { padding: 6px 16px; }
  .tsl-cart-headrow { display: none; }
  .tsl-cart-item { flex-wrap: wrap; gap: 10px; }
  .tsl-cart-item__main { flex: 1 1 100%; }
  .tsl-cart-item__qty { width: auto; flex-direction: row; align-items: center; }
  .tsl-cart-item__price { width: auto; text-align: left; align-items: flex-start; flex: 1 1 auto; }
  .tsl-cart-item__x { width: auto; }
  .tsl-cart-promo-form { flex-direction: column; }
}

/* Lock body scroll while a modal is open (set by tricasol.js) */
body.tsl-modal-open { overflow: hidden; }

/* ============================================================
   Checkout  (design: checkout.html)
   WHMCS's account / gateway / card markup is kept verbatim;
   these rules give it the panel look. Scoped to .tsl-checkout
   / #frmCheckout so nothing leaks to other pages.
   ============================================================ */
.tsl-co-switch {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.tsl-co-switch__hint { margin: 0; font-size: 14px; color: var(--tsl-muted); }
.tsl-co-switch__btns { display: flex; gap: 10px; }
.tsl-co-switch .tsl-btn { height: 40px; padding: 0 16px; }

.tsl-checkout-layout {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 18px; align-items: start;
}
.tsl-co-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* section cards */
.tsl-co-main .sub-heading {
  margin: 6px 0 2px; padding: 0;
  border: none; background: none;
}
.tsl-co-main .sub-heading .primary-bg-color {
  display: block; padding: 0; background: none !important; color: var(--tsl-text) !important;
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
}
.tsl-co-main .sub-heading .primary-bg-color small,
.tsl-co-main .sub-heading .primary-bg-color i { font-weight: 500; font-size: 12.5px; color: var(--tsl-muted); }

.tsl-co-card {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 22px 26px;
}
.tsl-co-card__title { margin: 0 0 16px; font-size: 17px; font-weight: 800; }

/* Reconstruct Bootstrap grid (no Bootstrap loaded) — scoped to the form */
#frmCheckout .row { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
#frmCheckout .row + .sub-heading { margin-top: 14px; }
#frmCheckout [class^="col-sm-"], #frmCheckout [class*=" col-sm-"],
#frmCheckout [class^="col-md-"], #frmCheckout [class*=" col-md-"] { flex: 1 1 100%; min-width: 0; padding: 0; }
#frmCheckout .col-sm-6 { flex: 1 1 calc(50% - 8px); }
#frmCheckout .col-sm-5 { flex: 1 1 calc(42% - 8px); }
#frmCheckout .col-sm-4, #frmCheckout .col-md-6 { flex: 1 1 calc(50% - 8px); }
#frmCheckout .col-sm-3 { flex: 1 1 calc(25% - 12px); }

/* Inputs / selects / textarea */
#frmCheckout .form-group { margin: 0 0 2px; }
#frmCheckout .prepend-icon { position: relative; }
#frmCheckout .field-icon {
  position: absolute; left: 14px; top: 0; height: 48px;
  display: flex; align-items: center; margin: 0;
  color: var(--tsl-muted-2); font-size: 14px; z-index: 2; pointer-events: none;
}
#frmCheckout input.field, #frmCheckout input.form-control,
#frmCheckout select.form-control, #frmCheckout textarea.form-control {
  width: 100%; min-height: 48px;
  border: 1px solid var(--tsl-border-strong); border-radius: 12px;
  background: #FBFBFE; font-size: 15px; font-weight: 500; color: var(--tsl-text);
  padding: 0 14px; font-family: var(--tsl-font);
}
#frmCheckout .prepend-icon input.field,
#frmCheckout .prepend-icon input.form-control,
#frmCheckout .prepend-icon select.form-control { padding-left: 40px; }
#frmCheckout textarea.form-control { padding: 12px 14px; line-height: 1.5; min-height: 96px; }
#frmCheckout input.field:focus, #frmCheckout input.form-control:focus,
#frmCheckout select.form-control:focus, #frmCheckout textarea.form-control:focus {
  border-color: var(--tsl-primary); outline: none;
}
#frmCheckout label:not(.field-icon):not(.radio-inline):not(.checkbox-inline) {
  font-size: 13px; font-weight: 600; color: var(--tsl-text-2); margin: 0 0 6px; display: block;
}
#frmCheckout .field-help-text { font-size: 12px; color: var(--tsl-muted-2); }

/* Existing-account chooser + login button */
#frmCheckout .account {
  border: 1px solid var(--tsl-border-strong); border-radius: 14px;
  padding: 14px 16px; background: #fff;
}
#frmCheckout .account.active { border-color: var(--tsl-primary); background: #F7F5FF; }
#frmCheckout .account .radio-inline { display: block; margin: 0; font-weight: 600; }
#frmCheckout .account .small { font-size: 12.5px; color: var(--tsl-muted); font-weight: 500; }
#frmCheckout .btn-primary, #frmCheckout .generate-password {
  height: 40px; padding: 0 16px; border: none; border-radius: 10px;
  background: var(--tsl-primary); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
#frmCheckout .generate-password { background: var(--tsl-primary-soft); color: var(--tsl-primary); }

/* Payment-method selector -> cards */
#paymentGatewaysContainer { display: flex; flex-direction: column; gap: 10px; }
#paymentGatewaysContainer .small.text-muted { font-size: 13px; color: var(--tsl-muted); margin: 0 0 4px; }
#paymentGatewaysContainer .text-center { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; text-align: left; }
#paymentGatewaysContainer .radio-inline {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 16px 18px; border: 1px solid var(--tsl-border-strong);
  border-radius: 14px; background: #fff; cursor: pointer; font-weight: 700; font-size: 14.5px;
}
#paymentGatewaysContainer .radio-inline:has(input:checked) {
  border: 1.5px solid var(--tsl-primary); background: #F7F5FF; color: var(--tsl-primary);
}
#paymentGatewaysContainer input[type="radio"] { accent-color: var(--tsl-primary); width: 16px; height: 16px; }

.tsl-co-pay .cc-input-container { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.tsl-co-pay .cvv-input, .tsl-co-pay #newCardInfo, .tsl-co-pay #newCardSaveSettings .row { margin-top: 4px; }
.tsl-co-pay .existing-cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

/* ---- right summary column ---- */
.tsl-co-summary-col { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.tsl-co-summary #totalDueToday.alert {
  background: none; border: none; padding: 0; margin: 0 0 4px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 15px; font-weight: 700; color: var(--tsl-text); text-align: left;
}
.tsl-co-summary #totalDueToday #totalCartPrice {
  font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--tsl-text);
}
.tsl-co-summary .apply-credit-container {
  border-top: 1px solid var(--tsl-divider); margin-top: 8px; padding-top: 12px;
  font-size: 13px; color: var(--tsl-text-3);
}
.tsl-co-summary .apply-credit-container .radio { display: block; margin: 6px 0; }
.tsl-co-summary .text-center { text-align: left; }
.tsl-co-summary .checkbox-inline { font-size: 13px; color: var(--tsl-text-3); display: block; margin: 10px 0; }
.tsl-co-summary #btnCompleteOrder {
  width: 100%; height: 50px; margin-top: 14px;
  border: none; border-radius: 12px; background: var(--tsl-primary); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 20px rgba(30,14,175,0.28);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tsl-co-summary #btnCompleteOrder[disabled] { background: #DDD9F5; box-shadow: none; cursor: not-allowed; }
.tsl-co-summary .checkout-security-msg,
.checkout-security-msg {
  margin-top: 14px; background: none; border: none; padding: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--tsl-success-text);
}
.tsl-co-trust {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
}
.tsl-co-trust__title { font-size: 14px; font-weight: 700; }
.tsl-co-trust__desc { font-size: 13.5px; color: var(--tsl-muted); line-height: 1.55; }

@media (max-width: 1040px) {
  .tsl-checkout-layout { grid-template-columns: 1fr; }
  .tsl-co-summary-col { position: static; }
}
@media (max-width: 640px) {
  #frmCheckout .col-sm-6, #frmCheckout .col-sm-5, #frmCheckout .col-sm-4,
  #frmCheckout .col-sm-3, #frmCheckout .col-md-6 { flex: 1 1 100%; }
}


/* ============================================================
   Domain checker — result-state machine
   WHMCS scripts.js reveals ONE state via inline .show(); the
   default hiding normally comes from the order form's all.min.css
   (which we don't load). Without these, every state renders at
   once after a search. Plain display:none (no !important) so the
   JS inline styles can reveal.
   ============================================================ */
#DomainSearchResults .domain-lookup-result .domain-invalid,
#DomainSearchResults .domain-lookup-result .domain-unavailable,
#DomainSearchResults .domain-lookup-result .domain-tld-unavailable,
#DomainSearchResults .domain-lookup-result .domain-available,
#DomainSearchResults .domain-lookup-result .domain-error,
#DomainSearchResults .domain-lookup-result .domain-contact-support,
#DomainSearchResults .domain-lookup-result .domain-price,
#DomainSearchResults .idn-language-selector {
  display: none;
}

/* Add-to-cart button states: only the "Add to cart" label by default;
   JS swaps to loading / added / taken. */
#order-standard_cart .btn-add-to-cart span.loading,
#order-standard_cart .btn-add-to-cart span.added,
#order-standard_cart .btn-add-to-cart span.unavailable {
  display: none;
}

/* Revealed-state look (register-domain.html) */
#primaryLookupResult .domain-available { color: var(--tsl-success-text); font-weight: 800; font-size: 19px; margin: 4px 0; }
#primaryLookupResult .domain-unavailable,
#primaryLookupResult .domain-tld-unavailable,
#primaryLookupResult .domain-invalid,
#primaryLookupResult .domain-error { color: #C0392B; font-weight: 700; font-size: 15.5px; margin: 4px 0; }
#primaryLookupResult .domain-price { align-items: center; gap: 14px; margin: 10px 0 0; }
#primaryLookupResult .domain-price[style*="block"] { display: flex !important; } /* jQuery .show() sets block; keep flex layout */
#primaryLookupResult .domain-price .price { font-size: 22px; font-weight: 800; }
#DomainSearchResults .idn-language-selector select { max-width: 420px; }

/* ============================================================
   Invoices  (design: invoices.html)
   Grid matches the mock: 1.1fr 1fr 1fr 0.9fr 0.9fr auto
   ============================================================ */
.tsl-inv-row {
  display: grid;
  /* INVOICE / ISSUED / DUE / TOTAL / STATUS / action.
     The invoice number is only ever four or five digits, so it was taking the
     widest share for no reason while the two long date strings wrapped onto
     three lines. Narrowed to what a number needs; the space goes to the dates. */
  grid-template-columns: 0.55fr 1.35fr 1.35fr 0.85fr 0.85fr auto;
  gap: 16px;
  align-items: center;
  padding: 17px 24px;
  border-bottom: 1px solid var(--tsl-divider);
}
.tsl-table__body .tsl-inv-row:last-child { border-bottom: none; }
.tsl-table__head.tsl-inv-row {
  padding: 14px 24px;
  background: #FAFBFE;
  border-bottom: 1px solid var(--tsl-border);
  font-size: 12.5px; font-weight: 700; color: var(--tsl-muted);
  letter-spacing: 0.03em;
}
.tsl-inv-row__action-h { width: 82px; }

.tsl-inv-num   { font-size: 14.5px; font-weight: 700; color: var(--tsl-text); }
.tsl-inv-date  { font-size: 14px; color: var(--tsl-text-3); }
.tsl-inv-total { font-size: 14.5px; font-weight: 700; color: var(--tsl-text); }

/* muted (cancelled) row per the mock */
.tsl-inv-row--muted .tsl-inv-num,
.tsl-inv-row--muted .tsl-inv-total { color: var(--tsl-muted); }
.tsl-inv-row--muted .tsl-inv-date  { color: var(--tsl-muted-2); }

/* status pills */
.tsl-inv-status {
  justify-self: start;
  padding: 5px 12px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700;
}
.tsl-inv-status--unpaid    { background: #FFF6DE; color: #8A6400; }
.tsl-inv-status--overdue   { background: #FDECEC; color: #C0392B; }
.tsl-inv-status--paid      { background: var(--tsl-success-soft); color: #00805A; }
.tsl-inv-status--cancelled,
.tsl-inv-status--refunded,
.tsl-inv-status--collections { background: var(--tsl-divider); color: var(--tsl-muted); }
.tsl-inv-status--draft,
.tsl-inv-status--payment.pending { background: var(--tsl-divider); color: var(--tsl-muted); }

/* row action button */
.tsl-inv-action {
  width: 82px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tsl-border-strong); border-radius: 10px;
  background: #fff; color: var(--tsl-text-2);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.tsl-inv-action:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }
.tsl-inv-action--pay {
  border: none; background: var(--tsl-primary); color: #fff; font-weight: 700;
}
.tsl-inv-action--pay:hover { background: var(--tsl-primary-hover); color: #fff; }

@media (max-width: 900px) {
  .tsl-inv-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .tsl-table__head.tsl-inv-row { display: none; }
  .tsl-inv-row .tsl-inv-date { font-size: 13px; }
  .tsl-inv-action { grid-row: span 2; }
}

/* ============================================================
   Support tickets  (design: support-tickets.html)
   ============================================================ */
.tsl-sup-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tsl-sup-link {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 7px;
  color: var(--tsl-text); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tsl-sup-link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,20,60,0.08); color: var(--tsl-text); }
.tsl-sup-link__title { font-size: 15px; font-weight: 700; }
.tsl-sup-link__desc  { font-size: 13.5px; color: var(--tsl-muted); line-height: 1.5; }

.tsl-sup-toolbar {
  padding: 20px 24px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.tsl-sup-toolbar__title { margin: 0; font-size: 16.5px; font-weight: 700; }
.tsl-sup-search {
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: #FAFBFE; border: 1px solid var(--tsl-border);
  border-radius: 11px; width: 300px; max-width: 100%;
}
.tsl-sup-search input {
  flex: 1; height: 40px; border: none; background: transparent;
  font-size: 14px; font-family: var(--tsl-font); color: var(--tsl-text);
}
.tsl-sup-search input:focus { outline: none; }

.tsl-tkt-row {
  display: grid;
  grid-template-columns: 2.6fr 1fr 1fr 1fr auto;
  gap: 16px; align-items: center;
  padding: 17px 24px;
  border-bottom: 1px solid var(--tsl-divider);
}
.tsl-table__body .tsl-tkt-row:last-child { border-bottom: none; }
.tsl-table__head.tsl-tkt-row {
  padding: 13px 24px; background: #FAFBFE;
  border-top: 1px solid var(--tsl-border); border-bottom: 1px solid var(--tsl-border);
  font-size: 12.5px; font-weight: 700; color: var(--tsl-muted); letter-spacing: 0.03em;
}
.tsl-tkt-row__action-h { width: 82px; }

.tsl-tkt-subject { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tsl-tkt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tsl-success); flex: none; }
.tsl-tkt-dot--closed { background: #C9CEE4; }
.tsl-tkt-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.tsl-tkt-title { font-size: 14.5px; font-weight: 700; color: var(--tsl-text); }
.tsl-tkt-row--closed .tsl-tkt-title { color: var(--tsl-text-3); }
.tsl-tkt-sub { font-size: 13px; color: var(--tsl-muted-2); }
.tsl-tkt-dept, .tsl-tkt-updated { font-size: 14px; color: var(--tsl-text-3); }

.tsl-tkt-prio {
  justify-self: start; padding: 4px 11px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700;
}
.tsl-tkt-prio--high   { background: #FDECEC; color: #C0392B; }
.tsl-tkt-prio--medium { background: #FFF6DE; color: #8A6400; }
.tsl-tkt-prio--low    { background: var(--tsl-divider); color: var(--tsl-muted); }
/* Placeholder when WHMCS gives the list no urgency, so the column keeps its
   alignment instead of showing an empty pill. */
.tsl-tkt-prio-empty   { justify-self: start; font-size: 13px; color: var(--tsl-muted-2); }

/* A ticket with a reply the customer has not read yet. */
.tsl-tkt-row--unread .tsl-tkt-title { color: var(--tsl-text); }
.tsl-tkt-new {
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 99px;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; vertical-align: middle;
}

.tsl-tkt-action {
  width: 82px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tsl-border-strong); border-radius: 10px;
  background: #fff; color: var(--tsl-text-2);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.tsl-tkt-action:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }
.tsl-tkt-action--open {
  border: none; background: var(--tsl-primary); color: #fff; font-weight: 700;
}
.tsl-tkt-action--open:hover { background: var(--tsl-primary-hover); color: #fff; }

@media (max-width: 900px) {
  .tsl-sup-links { grid-template-columns: 1fr; }
  .tsl-sup-toolbar { flex-direction: column; align-items: stretch; }
  .tsl-sup-search { width: 100%; }
  .tsl-tkt-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .tsl-table__head.tsl-tkt-row { display: none; }
}

/* ============================================================
   Invoice detail  (design: invoice-detail.html)
   ============================================================ */
.tsl-invd { max-width: 1180px; margin: 0 auto; }
.tsl-invd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tsl-invd-head__text { display: flex; flex-direction: column; gap: 7px; }
.tsl-invd-back { font-size: 13.5px; font-weight: 600; color: var(--tsl-muted); width: fit-content; }
.tsl-invd-back:hover { color: var(--tsl-primary); }
.tsl-invd-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tsl-invd-head__actions .tsl-btn { height: 42px; text-decoration: none; }

.tsl-invd-doc {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 20px; overflow: hidden;
}
.tsl-invd-doc__top {
  padding: 26px 32px; border-bottom: 1px solid var(--tsl-border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.tsl-invd-logo { width: 124px; height: auto; }
.tsl-invd-statuswrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tsl-invd-due { font-size: 13.5px; color: var(--tsl-muted-2); }

.tsl-invd-parties {
  padding: 26px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  border-bottom: 1px solid var(--tsl-border);
}
.tsl-invd-party { display: flex; flex-direction: column; gap: 8px; }
.tsl-invd-party--right { text-align: right; }
.tsl-invd-party__label { font-size: 12.5px; font-weight: 700; color: var(--tsl-muted-2); letter-spacing: 0.05em; }
.tsl-invd-party__name  { font-size: 15px; font-weight: 700; }
.tsl-invd-party__addr  { font-size: 14px; color: var(--tsl-muted); line-height: 1.65; }

.tsl-invd-items { padding: 8px 32px 0; }
.tsl-invd-itemhead,
.tsl-invd-item {
  display: grid; grid-template-columns: 3fr 0.8fr 1fr 1fr; gap: 16px; align-items: center;
}
.tsl-invd-itemhead {
  padding: 16px 0; font-size: 12.5px; font-weight: 700; color: var(--tsl-muted-2);
  letter-spacing: 0.05em; border-bottom: 1px solid var(--tsl-border);
}
.tsl-invd-item { padding: 17px 0; border-bottom: 1px solid var(--tsl-divider); }
.tsl-invd-items .tsl-invd-item:last-child { border-bottom: none; }
.tsl-invd-c { text-align: center; }
.tsl-invd-r { text-align: right; }
.tsl-invd-item__desc { font-size: 14.5px; font-weight: 600; color: var(--tsl-text); line-height: 1.5; }
.tsl-invd-item__desc br + * { color: var(--tsl-muted-2); }
.tsl-invd-item__qty, .tsl-invd-item__rate { font-size: 14px; color: var(--tsl-text-3); }
.tsl-invd-item__amt { font-size: 14.5px; font-weight: 600; }

.tsl-invd-totals { padding: 20px 32px 28px; display: flex; justify-content: flex-end; }
.tsl-invd-totals__box { width: 280px; display: flex; flex-direction: column; gap: 10px; }
.tsl-invd-trow { display: flex; justify-content: space-between; font-size: 14px; color: var(--tsl-text-3); }
.tsl-invd-tdiv { height: 1px; background: var(--tsl-border); }
.tsl-invd-trow--due { align-items: baseline; }
.tsl-invd-duelabel { font-size: 15px; font-weight: 700; color: var(--tsl-text); }
.tsl-invd-dueamt { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--tsl-text); }

.tsl-invd-pay {
  background: var(--tsl-card); border: 1px solid var(--tsl-border); border-radius: 18px;
  padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.tsl-invd-pay__text { display: flex; flex-direction: column; gap: 4px; }
.tsl-invd-pay__title { font-size: 15px; font-weight: 700; }
.tsl-invd-pay__desc  { font-size: 13.5px; color: var(--tsl-muted); }
.tsl-invd-pay__form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tsl-invd-pay__form select,
.tsl-invd-pay__form .form-control {
  height: 44px; padding: 0 14px; border: 1px solid var(--tsl-border-strong);
  border-radius: 11px; background: #FBFBFE; font-size: 14px; font-family: var(--tsl-font);
}
.tsl-invd-pay__form input[type="submit"],
.tsl-invd-pay__form button,
.tsl-invd-pay__form .btn {
  height: 44px; padding: 0 22px; border: none; border-radius: 11px;
  background: var(--tsl-primary); color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--tsl-font);
}

.tsl-invd-trans {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 20px 24px;
}
.tsl-invd-trans__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.tsl-invd-trans__row {
  display: grid; grid-template-columns: 1fr 1fr 1.4fr 0.8fr; gap: 16px;
  padding: 10px 0; border-top: 1px solid var(--tsl-divider); font-size: 13.5px; color: var(--tsl-text-3);
}

/* ============================================================
   New ticket  (design: new-ticket.html)
   ============================================================ */
.tsl-newtkt { max-width: 900px; margin: 0 auto; }
.tsl-newtkt-head { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.tsl-newtkt-card {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 20px; padding: 32px;
}
.tsl-newtkt-intro { margin: 0 0 22px; font-size: 15px; color: var(--tsl-muted); line-height: 1.6; }
.tsl-newtkt-card form { display: flex; flex-direction: column; gap: 22px; }

/* Ticket submitted confirmation (supportticketsubmit-confirm.tpl) */
.tsl-tktdone { text-align: center; }
.tsl-tktdone__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--tsl-success-soft); color: #00805A; margin-bottom: 16px;
}
.tsl-tktdone__title { margin: 0 0 8px; font-size: 21px; font-weight: 800; color: var(--tsl-text); }
.tsl-tktdone__ref { margin: 0 0 14px; font-size: 15px; color: var(--tsl-text-2); }
.tsl-tktdone__ref a { font-weight: 800; color: var(--tsl-primary); text-decoration: none; }
.tsl-tktdone__ref a:hover { text-decoration: underline; }
.tsl-tktdone__desc { margin: 0 auto 22px; max-width: 520px; font-size: 14.5px; line-height: 1.65; color: var(--tsl-muted); }
.tsl-tktdone__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tsl-newtkt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tsl-newtkt-custom { display: flex; flex-direction: column; gap: 18px; }
.tsl-field { display: flex; flex-direction: column; gap: 7px; }
.tsl-field__label { font-size: 13px; font-weight: 600; color: var(--tsl-text-2); }
.tsl-field__help  { font-size: 12.5px; color: var(--tsl-muted-2); }
.tsl-textarea { height: auto; padding: 14px; line-height: 1.6; resize: vertical; font-family: var(--tsl-font); }

.tsl-newtkt-drop {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  border: 1.5px dashed #DDE1EF; border-radius: 14px; background: #FBFBFE;
}
.tsl-newtkt-drop__icon {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: var(--tsl-primary-soft); display: flex; align-items: center; justify-content: center;
}
.tsl-newtkt-drop__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tsl-newtkt-drop__title { font-size: 14px; font-weight: 600; }
.tsl-newtkt-drop__sub { font-size: 13px; color: var(--tsl-muted-2); word-break: break-word; }
.tsl-newtkt-browse {
  height: 38px; padding: 0 16px; border: 1px solid var(--tsl-border-strong);
  border-radius: 10px; background: #fff; font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; margin: 0; flex: none;
}
.tsl-newtkt-browse:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }
.tsl-newtkt-browse input[type="file"] { display: none; }
.tsl-newtkt-files { display: flex; flex-wrap: wrap; gap: 8px; }
.tsl-newtkt-file {
  padding: 5px 11px; border-radius: 8px; background: var(--tsl-divider);
  font-size: 12.5px; font-weight: 600; color: var(--tsl-text-3);
}
.tsl-newtkt-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 4px; flex-wrap: wrap;
}
.tsl-newtkt-foot__note { font-size: 13.5px; color: var(--tsl-muted-2); }
.tsl-newtkt-foot__actions { display: flex; gap: 10px; }
.tsl-newtkt-foot__actions .tsl-btn { height: 46px; text-decoration: none; }

/* ============================================================
   View ticket  (design: view-ticket.html)
   ============================================================ */
.tsl-vtkt-head { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.tsl-vtkt-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.tsl-vtkt-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.tsl-vtkt-msg {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.tsl-vtkt-msg--staff { background: #F7F5FF; border-color: #E3DEFF; }
.tsl-vtkt-msg__head { display: flex; align-items: center; gap: 12px; }
.tsl-vtkt-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tsl-vtkt-avatar--staff { background: var(--tsl-primary); color: #fff; }
.tsl-vtkt-msg__meta { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tsl-vtkt-msg__name { font-size: 14.5px; font-weight: 700; }
.tsl-vtkt-msg__date { font-size: 12.5px; color: var(--tsl-muted-2); }
.tsl-vtkt-msg--staff .tsl-vtkt-msg__date { color: #7A7FA0; }
.tsl-vtkt-staffbadge {
  padding: 4px 10px; border-radius: 99px; background: var(--tsl-primary-soft);
  color: var(--tsl-primary); font-size: 11.5px; font-weight: 700;
}
.tsl-vtkt-msg__body { font-size: 14.5px; color: var(--tsl-text-2); line-height: 1.7; word-wrap: break-word; }
.tsl-vtkt-msg__files { display: flex; flex-wrap: wrap; gap: 8px; }
.tsl-vtkt-file {
  padding: 6px 12px; border: 1px solid var(--tsl-border-strong); border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--tsl-text-2); text-decoration: none;
}
.tsl-vtkt-file:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }

.tsl-vtkt-reply {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.tsl-vtkt-reply__title { font-size: 15px; font-weight: 700; }
.tsl-vtkt-reply form { display: flex; flex-direction: column; gap: 14px; }
/* Image attachments render as thumbnails in the thread and open full size on
   click, so the chip styling has to come off the link entirely. */
.tsl-vtkt-file.is-image {
  padding: 0; border: none; background: none;
  display: inline-block; line-height: 0; cursor: zoom-in;
}
/* Attachment whose file has since been pruned: listed, but not fetchable. */
.tsl-vtkt-file.is-gone { opacity: .55; text-decoration: line-through; cursor: default; }
.tsl-vtkt-thumb {
  /* 100% keeps it inside the message bubble on a narrow phone; the px cap
     stops a big screenshot dominating the thread on desktop. */
  max-width: min(260px, 100%); max-height: 180px;
  border: 1px solid var(--tsl-border); border-radius: 12px;
  display: block; object-fit: cover;
  transition: border-color .15s ease;
}
.tsl-vtkt-file.is-image:hover .tsl-vtkt-thumb { border-color: var(--tsl-primary); }

.tsl-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: rgba(14, 16, 32, .78);
}
.tsl-lightbox[hidden] { display: none; }
.tsl-lightbox__inner {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 100%; max-height: 100%;
}
.tsl-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.tsl-lightbox__name {
  font-size: 14px; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsl-lightbox__close {
  flex: none; width: 34px; height: 34px; border: none; border-radius: 10px;
  background: rgba(255,255,255,.18); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.tsl-lightbox__close:hover { background: rgba(255,255,255,.3); }
.tsl-lightbox__img {
  max-width: 100%; max-height: calc(100vh - 120px);
  border-radius: 14px; background: #fff; object-fit: contain;
}

@media (max-width: 620px) {
  /* Reclaim the generous desktop padding — on a phone it costs more than a
     third of the width the image could use. */
  .tsl-lightbox { padding: 14px; }
  .tsl-lightbox__img { max-height: calc(100vh - 100px); }
  .tsl-lightbox__name { font-size: 13px; }

  /* Prev / Page 1 of 2 / Next fits on one line at 360px, but the label is the
     first thing worth losing if a translation makes it longer. */
  .tsl-pager { width: 100%; justify-content: space-between; }
}

.tsl-vtkt-reply__types { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--tsl-muted-2); }
.tsl-vtkt-reply .tsl-newtkt-files:empty { display: none; }
.tsl-vtkt-reply__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tsl-vtkt-reply__actions { display: flex; gap: 10px; }
.tsl-vtkt-reply__actions .tsl-btn { height: 44px; text-decoration: none; }
.tsl-vtkt-closed {
  background: var(--tsl-card); border: 1px solid var(--tsl-border); border-radius: 18px;
  padding: 22px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: 14.5px; color: var(--tsl-muted); flex-wrap: wrap;
}

.tsl-vtkt-side { display: flex; flex-direction: column; gap: 16px; }
.tsl-vtkt-card {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.tsl-vtkt-card__title { font-size: 15px; font-weight: 700; }
.tsl-vtkt-drow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.tsl-vtkt-dlabel { color: var(--tsl-muted-2); }
.tsl-vtkt-dval { font-weight: 600; }
.tsl-vtkt-reply__note { margin: -4px 0 0; font-size: 13.5px; color: var(--tsl-muted); }
.tsl-vtkt-status { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.tsl-vtkt-status--open,
.tsl-vtkt-status--in-progress,
.tsl-vtkt-status--answered { background: var(--tsl-success-soft); color: #00805A; }
.tsl-vtkt-status--customer-reply { background: #FFF6DE; color: #8A6400; }
.tsl-vtkt-status--closed { background: var(--tsl-divider); color: var(--tsl-muted); }
.tsl-vtkt-empty { font-size: 13.5px; color: var(--tsl-muted-2); }

@media (max-width: 1040px) {
  .tsl-vtkt-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tsl-invd-parties { grid-template-columns: 1fr; gap: 20px; }
  .tsl-invd-party--right { text-align: left; }
  .tsl-invd-itemhead { display: none; }
  .tsl-invd-item { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .tsl-invd-totals__box { width: 100%; }
  .tsl-newtkt-grid2 { grid-template-columns: 1fr; }
  .tsl-newtkt-card { padding: 22px 18px; }
  .tsl-invd-doc__top, .tsl-invd-parties, .tsl-invd-items, .tsl-invd-totals { padding-left: 18px; padding-right: 18px; }
}

/* Department chooser (submit ticket, step 1) */
.tsl-dept-list { display: flex; flex-direction: column; gap: 12px; }
.tsl-dept {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border: 1px solid var(--tsl-border-strong); border-radius: 14px;
  background: #fff; text-decoration: none; color: var(--tsl-text);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tsl-dept:hover {
  border-color: var(--tsl-primary); color: var(--tsl-text);
  transform: translateY(-1px); box-shadow: 0 8px 20px rgba(30,14,175,0.10);
}
.tsl-dept__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tsl-dept__name { font-size: 15px; font-weight: 700; }
.tsl-dept__desc { font-size: 13.5px; color: var(--tsl-muted); line-height: 1.5; }
.tsl-dept__go { color: var(--tsl-primary); flex: none; display: flex; }

/* Invoice page: if it renders outside the app shell, keep it presentable
   (page background, font, sane page padding, and cap the logo size). */
.tsl-invd { font-family: var(--tsl-font); }
.tsl-invd .tsl-invd-logo { max-width: 124px; height: auto; }
body:not(.tsl-nav-open) .tsl-invd:only-child,
.tsl-invd.tsl-invd--standalone { padding: 34px 32px 96px; }

/* Invoice payment block: style WHMCS's own gateway dropdown + pay button */
.tsl-invd-pay__form #frmPayment { margin: 0; }
.tsl-invd-pay__form select,
.tsl-invd-pay__form .form-control {
  height: 44px; padding: 0 14px; border: 1px solid var(--tsl-border-strong);
  border-radius: 11px; background: #FBFBFE; font-size: 14px;
  font-family: var(--tsl-font); color: var(--tsl-text); cursor: pointer;
}
.tsl-invd-pay__method { font-size: 14px; font-weight: 600; color: var(--tsl-text-2); }
.tsl-invd-pay__buttons input[type="submit"],
.tsl-invd-pay__buttons button,
.tsl-invd-pay__buttons .btn {
  height: 44px; padding: 0 22px; border: none; border-radius: 11px;
  background: var(--tsl-primary); color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--tsl-font);
  box-shadow: 0 6px 16px rgba(30,14,175,0.24);
}
.tsl-invd-pay__buttons input[type="submit"]:hover,
.tsl-invd-pay__buttons button:hover { background: var(--tsl-primary-hover); }

/* Print: drop the app chrome so the invoice prints clean */
@media print {
  .tsl-sidebar, .tsl-topbar, .tsl-invd-head__actions, .tsl-invd-pay { display: none !important; }
  .tsl-invd-doc { border: none; }
  body { background: #fff; }

  /* On screen these keep the layout full-height. When printing, 1vh is one
     PAGE height, so each of these forces its container to be at least a whole
     page tall no matter how short the content is — which leaves a band of
     white after the article and can push a nearly-empty extra page. */
  .tsl-app, .tsl-shell, .tsl-auth { min-height: 0 !important; }
  .tsl-sidebar { height: auto !important; }

  /* The main column carries screen padding that pushes content down the first
     printed page for no reason. */
  .tsl-main-col, .tsl-app, .tsl-shell { display: block !important; }
}

/* ============================================================
   Invoice payment: method cards + CTA / offline instructions
   ============================================================ */
.tsl-pay {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 24px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.tsl-pay__head { display: flex; flex-direction: column; gap: 4px; }
.tsl-pay__title { font-size: 16px; font-weight: 800; }
.tsl-pay__desc  { font-size: 13.5px; color: var(--tsl-muted); }

/* WHMCS's own <select> stays in the DOM (it carries the value we submit) */
.tsl-pay__native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tsl-pay__methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tsl-pay-method {
  padding: 16px 18px; border: 1px solid var(--tsl-border-strong); border-radius: 14px;
  background: #fff; color: var(--tsl-text);
  font-size: 14.5px; font-weight: 700; font-family: var(--tsl-font);
  text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tsl-pay-method:hover { border-color: var(--tsl-primary); transform: translateY(-1px); }
.tsl-pay-method.is-active {
  border: 1.5px solid var(--tsl-primary); background: #F7F5FF; color: var(--tsl-primary);
}
.tsl-pay__methods--fixed .tsl-pay-method { cursor: default; }

/* CTA state: gateway supplies a real submit button */
.tsl-pay__action--cta { display: flex; justify-content: flex-end; }
.tsl-pay__action--cta input[type="submit"],
.tsl-pay__action--cta button,
.tsl-pay__action--cta .btn {
  height: 48px; padding: 0 26px; border: none; border-radius: 12px;
  background: var(--tsl-primary); color: #fff;
  font-size: 15px; font-weight: 700; font-family: var(--tsl-font);
  cursor: pointer; box-shadow: 0 8px 20px rgba(30,14,175,0.28);
}
.tsl-pay__action--cta input[type="submit"]:hover,
.tsl-pay__action--cta button:hover { background: var(--tsl-primary-hover); }

/* Instructions state: offline gateway (e.g. Bank Transfer) — no pay button */
.tsl-pay__action--info {
  border: 1px solid var(--tsl-border); border-radius: 14px;
  background: #FBFBFE; padding: 20px 22px;
  font-size: 14.5px; color: var(--tsl-text-2); line-height: 1.8;
}
.tsl-pay__action--info br + br { line-height: 2.4; }
.tsl-pay__action--info strong { font-weight: 700; color: var(--tsl-text); }
.tsl-pay__action--info p { margin: 0 0 10px; }
.tsl-pay__action--info p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .tsl-pay__methods { grid-template-columns: 1fr; }
  .tsl-pay__action--cta { justify-content: stretch; }
  .tsl-pay__action--cta input[type="submit"],
  .tsl-pay__action--cta button { width: 100%; }
}

/* ============================================================
   Invoice pay bar: gateway dropdown + CTA in the header actions
   ============================================================ */
.tsl-invd-head__actions { align-items: center; }
.tsl-paybar__form { margin: 0; }
.tsl-paybar__select select,
.tsl-paybar__select .form-control {
  height: 42px; padding: 0 38px 0 16px;
  border: 1px solid var(--tsl-border-strong); border-radius: 11px;
  background: #fff; color: var(--tsl-text);
  font-size: 14px; font-weight: 600; font-family: var(--tsl-font);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239095AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.tsl-paybar__select select:focus { border-color: var(--tsl-primary); outline: none; }
.tsl-paybar__method {
  height: 42px; padding: 0 16px; display: inline-flex; align-items: center;
  border: 1px solid var(--tsl-border-strong); border-radius: 11px;
  background: #fff; font-size: 14px; font-weight: 600; color: var(--tsl-text-2);
}
.tsl-paybar__cta:empty { display: none; }
.tsl-paybar__cta form { margin: 0; }
.tsl-paybar__cta input[type="submit"],
.tsl-paybar__cta button,
.tsl-paybar__cta .btn {
  height: 42px; padding: 0 22px; border: none; border-radius: 11px;
  background: var(--tsl-primary); color: #fff;
  font-size: 14px; font-weight: 700; font-family: var(--tsl-font);
  cursor: pointer; box-shadow: 0 6px 16px rgba(30,14,175,0.24);
}
.tsl-paybar__cta input[type="submit"]:hover,
.tsl-paybar__cta button:hover { background: var(--tsl-primary-hover); }

/* Staged gateway output below the header */
.tsl-pay-out--empty { display: none; }
.tsl-pay-out--info {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 22px 26px;
  font-size: 14.5px; color: var(--tsl-text-2); line-height: 1.8;
}
.tsl-pay-out--info strong { font-weight: 700; color: var(--tsl-text); }
.tsl-pay-out--info p { margin: 0 0 10px; }
.tsl-pay-out--info p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .tsl-invd-head__actions { width: 100%; }
  .tsl-paybar__form, .tsl-paybar__select select { width: 100%; }
  .tsl-paybar__cta, .tsl-paybar__cta input[type="submit"], .tsl-paybar__cta button { width: 100%; }
}

/* ---- Pay method dropdown: make it read as changeable ---- */
.tsl-paybar__select { position: relative; }
.tsl-paybar__select select,
.tsl-paybar__select .form-control {
  border: 1.5px solid var(--tsl-primary);
  background-color: var(--tsl-primary-soft);
  color: var(--tsl-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231E0EAF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.tsl-paybar__select select:hover { filter: brightness(0.98); }

/* loading feedback while WHMCS reloads with the chosen gateway */
.tsl-paybar__form.is-loading { position: relative; opacity: .75; pointer-events: none; }
.tsl-paybar__form.is-loading::after {
  content: ""; position: absolute; top: 50%; right: 14px;
  width: 15px; height: 15px; margin-top: -8px;
  border: 2px solid rgba(30,14,175,0.25); border-top-color: var(--tsl-primary);
  border-radius: 50%; animation: tsl-spin .7s linear infinite;
}
.tsl-paybar__form.is-loading select { background-image: none; }
.tsl-paybar__cta.is-loading { opacity: .5; pointer-events: none; }
@keyframes tsl-spin { to { transform: rotate(360deg); } }

/* ---- Bank / offline instructions split into columns ---- */
.tsl-pay-out--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  line-height: 1.7;
}
.tsl-pay-out--split .tsl-bank {
  border: 1px solid var(--tsl-border); border-radius: 14px;
  background: #FBFBFE; padding: 18px 20px;
  font-size: 14px; color: var(--tsl-text-2);
}
.tsl-pay-out--split .tsl-bank strong { color: var(--tsl-text); }

/* ============================================================
   Domain search — result states to match register-domain.html
   ============================================================ */

/* Search button busy state */
.tsl-reg-search .tsl-btn.is-busy { opacity: .85; cursor: progress; gap: 9px; }
.tsl-spinner {
  width: 14px; height: 14px; display: inline-block; flex: none;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 50%; animation: tsl-spin .7s linear infinite;
}

/* Searching skeleton: shown while WHMCS is checking */
/* No skeleton block: WHMCS's own "Searching..." line is the loading state,
   and it hides itself when the result arrives. A CSS skeleton kept showing
   after results because nothing reliably cleared it. */
.tsl-reg-searching { font-size: 15px; color: var(--tsl-muted); font-weight: 600; }

/* --- Primary result card (available / taken) --- */
.tsl-reg-price { display: flex; align-items: center; gap: 16px; margin: 0; }
.tsl-reg-price .price { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--tsl-text); }
.tsl-reg-addbtn {
  height: 44px; padding: 0 22px; border: none; border-radius: 11px;
  background: var(--tsl-success); color: #fff; font-size: 14.5px; font-weight: 700;
}
.tsl-reg-addbtn:hover { background: #00a06c; color: #fff; }
.tsl-reg-addbtn.is-added { background: var(--tsl-primary); }
.btn-add-to-cart.is-working { opacity: .7; pointer-events: none; }

/* --- Other extensions list --- */
.tsl-reg-others { margin-top: 18px; background: var(--tsl-card); border: 1px solid var(--tsl-border); border-radius: 18px; overflow: hidden; }
.tsl-reg-others__head {
  padding: 18px 24px; border-bottom: 1px solid var(--tsl-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tsl-reg-others__note { font-size: 13px; color: var(--tsl-muted-2); }
.tsl-reg-others__list { display: block; }
.tsl-reg-other-row { border-bottom: 1px solid var(--tsl-divider); }
.tsl-reg-other-row:last-child { border-bottom: none; }
.spotlight-tld {
  display: flex; align-items: center; gap: 14px; padding: 16px 24px;
}
.tsl-reg-other-tld { flex: 1; font-size: 15.5px; font-weight: 700; color: var(--tsl-text); }
.tsl-reg-other-result { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.tsl-reg-other-result .price { font-size: 15.5px; font-weight: 700; color: var(--tsl-text); }
.tsl-reg-other-add {
  height: 38px; padding: 0 18px; border: 1px solid var(--tsl-border-strong);
  border-radius: 10px; background: #fff; color: var(--tsl-text-2);
  font-size: 13.5px; font-weight: 600;
}
.tsl-reg-other-add:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }
.tsl-reg-other-result .unavailable,
.tsl-reg-other-result .invalid {
  height: 38px; padding: 0 18px; border: 1px solid #F0F1F8; border-radius: 10px;
  background: #FAFBFE; color: #C4C8DA; font-size: 13.5px; font-weight: 600; cursor: not-allowed;
}
.domain-lookup-spotlight-loader { color: var(--tsl-muted-2); }

/* Suggestions rows */
.tsl-reg-sugg-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 24px;
  border-bottom: 1px solid var(--tsl-divider);
}
.tsl-reg-sugg-row .domain, .tsl-reg-sugg-row .extension { font-size: 15px; font-weight: 700; }
.tsl-reg-sugg-row .actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* DiscountCenter's footer-wide savings banner is disabled in the module;
   this also hides it if an older module build is still installed. */
.dc-savings-banner { display: none; }

/* ============================================================
   Domain results — final look (design: register-domain.html)
   ============================================================ */
.tsl-reg-primary {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 26px; border-radius: 18px;
  border: 1.5px solid var(--tsl-border); background: var(--tsl-card);
}
.tsl-reg-primary.is-available { border-color: var(--tsl-success); }
.tsl-reg-primary.is-taken     { border-color: #F0C9C9; }

/* state icon (tick / cross) */
.tsl-reg-ico {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--tsl-success-soft);
}
.tsl-reg-primary.is-available .tsl-reg-ico,
.tsl-reg-primary.is-taken .tsl-reg-ico { display: flex; }
.tsl-reg-primary.is-taken .tsl-reg-ico { background: #FDECEC; }
.tsl-reg-ico::before {
  content: ""; width: 19px; height: 19px;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23009263' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
}
.tsl-reg-primary.is-taken .tsl-reg-ico::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12' fill='none' stroke='%23C0392B' stroke-width='2.2' stroke-linecap='round'><path d='M3 3l6 6M9 3l-6 6'/></svg>");
}

.tsl-reg-primary__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tsl-reg-primary__text .domain-available,
.tsl-reg-primary__text .domain-unavailable,
.tsl-reg-primary__text .domain-tld-unavailable,
.tsl-reg-primary__text .domain-invalid,
.tsl-reg-primary__text .domain-error { margin: 0; font-size: 18px; font-weight: 800; color: var(--tsl-text); }
.tsl-reg-primary__text .domain-unavailable,
.tsl-reg-primary__text .domain-tld-unavailable,
.tsl-reg-primary__text .domain-invalid,
.tsl-reg-primary__text .domain-error { color: #C0392B; font-size: 16px; }
.tsl-reg-primary__sub { font-size: 13.5px; color: var(--tsl-muted); }
.tsl-reg-primary.is-taken .tsl-reg-primary__sub { display: none; }
.tsl-reg-primary:not(.is-available):not(.is-taken) .tsl-reg-primary__sub { display: none; }

.tsl-reg-price { margin: 0; display: flex; align-items: center; gap: 16px; flex: none; }
.tsl-reg-price .price { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--tsl-text); }
.tsl-reg-addbtn { height: 44px; padding: 0 22px; border-radius: 11px; background: var(--tsl-success); color: #fff; border: none; font-weight: 700; }
.tsl-reg-addbtn:hover { background: #00a06c; color: #fff; }

/* --- Other extensions rows: icon + full domain + price + Add --- */
.spotlight-tld { display: flex; align-items: center; gap: 14px; padding: 16px 24px; }
.tsl-reg-other-ico { width: 18px; height: 18px; flex: none; display: inline-block; background-repeat: no-repeat; background-position: center; }
.spotlight-tld.is-available .tsl-reg-other-ico {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23009263' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
}
.spotlight-tld.is-taken .tsl-reg-other-ico {
  border-radius: 50%; background-color: #FDECEC;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round'><path d='M3 3l6 6M9 3l-6 6'/></svg>");
  background-size: 10px 10px;
}
.spotlight-tld.is-taken .tsl-reg-other-tld { color: var(--tsl-muted-2); }

/* jQuery .show() writes an inline `display:block` on the result card, which
   beats our `display:flex` and stacks the children. Re-assert flex ONLY for
   that inline-block state so jQuery can still hide it with display:none. */
#primaryLookupResult[style*="block"] {
  display: flex !important;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
#primaryLookupResult .tsl-reg-primary__text { flex: 1 1 260px; }
#primaryLookupResult .tsl-reg-price { margin-left: auto; }
/* keep the empty error paragraph from taking a row of its own */
#primaryLookupResult .domain-error:empty { display: none; }
#primaryLookupResult .domain-contact-support:not([style*="block"]):not([style*="inline"]) { display: none; }

/* ---- Price suffix: design shows "$12.90/yr" ---- */
.tsl-reg-price .price::after {
  content: "/yr";
  font-size: 13.5px; font-weight: 600; color: var(--tsl-muted-2);
  letter-spacing: 0;
}
.tsl-reg-price .price:empty::after { content: ""; }

/* ---- Other extensions rows: exact design match ---- */
.tsl-reg-others__list .spotlight-tld-container { border-bottom: 1px solid var(--tsl-divider); }
.tsl-reg-others__list .spotlight-tld-container:last-child { border-bottom: none; }
.spotlight-tld { display: flex; align-items: center; gap: 14px; padding: 16px 24px; }
.tsl-reg-other-tld { flex: 1; font-size: 15.5px; font-weight: 700; color: var(--tsl-text); }

/* "Taken" label (design) */
.tsl-reg-other-status { font-size: 13.5px; font-weight: 600; color: var(--tsl-muted-2); }
.tsl-reg-other-status:empty { display: none; }

.tsl-reg-other-result { display: flex; align-items: center; gap: 14px; margin-left: 0; }
.tsl-reg-other-result .price,
.tsl-reg-other-result .available.price {
  font-size: 15.5px; font-weight: 700; color: var(--tsl-text);
}
.tsl-reg-other-add {
  height: 38px; padding: 0 18px;
  border: 1px solid var(--tsl-border-strong); border-radius: 10px;
  background: #fff; color: var(--tsl-text-2);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tsl-reg-other-add:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }

/* WHMCS's unavailable/invalid buttons -> the design's greyed "Add" */
.tsl-reg-other-result .unavailable,
.tsl-reg-other-result .invalid {
  height: 38px; padding: 0 18px;
  border: 1px solid #F0F1F8; border-radius: 10px;
  background: #FAFBFE; color: transparent;
  font-size: 0; cursor: not-allowed;
  display: inline-flex; align-items: center; justify-content: center;
}
.tsl-reg-other-result .unavailable::after,
.tsl-reg-other-result .invalid::after {
  content: "Add"; font-size: 13.5px; font-weight: 600; color: #C4C8DA;
}
/* spotlight loader stays subtle */
.domain-lookup-spotlight-loader { color: var(--tsl-muted-2); font-size: 13px; }

/* Icon/status are injected by tricasol.js when the order-form template
   predates them — make sure the row order and sizing still hold. */
.spotlight-tld .tsl-reg-other-ico { order: -1; }
.spotlight-tld.is-available .tsl-reg-other-ico,
.spotlight-tld.is-taken .tsl-reg-other-ico { display: inline-block; }
.spotlight-tld .tsl-reg-other-status { margin-left: auto; }
.spotlight-tld .tsl-reg-other-result { margin-left: 0; }
.spotlight-tld.is-available .tsl-reg-other-status { display: none; }

/* ============================================================
   Domain management  (design: domain-management.html)
   ============================================================ */
.tsl-dom-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.tsl-dom-head__text { display: flex; flex-direction: column; gap: 7px; }
.tsl-dom-head__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tsl-dom-head__title .tsl-h1 { margin: 0; }
.tsl-dom-head__sub { margin: 0; font-size: 15px; color: var(--tsl-muted); }
.tsl-dom-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tsl-dom-head__actions .tsl-btn { height: 42px; text-decoration: none; }
.tsl-dom-autorenew { cursor: default; }

.tsl-dom-status { padding: 5px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; }
.tsl-dom-status--active    { background: var(--tsl-success-soft); color: #00805A; }
.tsl-dom-status--pending,
.tsl-dom-status--pendingtransfer { background: #FFF6DE; color: #8A6400; }
.tsl-dom-status--expired,
.tsl-dom-status--cancelled { background: #FDECEC; color: #C0392B; }

/* tabs */
.tsl-dom-tabs {
  display: flex; border-bottom: 1px solid var(--tsl-border);
  overflow-x: auto; margin-bottom: 22px;
}
.tsl-dom-tab {
  height: 44px; padding: 0 4px; margin-right: 22px;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; color: var(--tsl-nav-sub);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.tsl-dom-tab:hover { color: var(--tsl-primary); }
.tsl-dom-tab.is-active { color: var(--tsl-primary); font-weight: 700; border-bottom-color: var(--tsl-primary); }

/* layout */
.tsl-dom-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.tsl-dom-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.tsl-dom-side { display: flex; flex-direction: column; gap: 18px; }

.tsl-dom-card {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: 18px; padding: 24px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.tsl-dom-card--tight { padding: 22px 24px; gap: 14px; }
.tsl-dom-card--narrow { max-width: 640px; }
.tsl-dom-card__title { margin: 0; font-size: 17px; font-weight: 800; }
.tsl-dom-card__title--sm { font-size: 16.5px; font-weight: 700; }

.tsl-dom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.tsl-dom-field { display: flex; flex-direction: column; gap: 4px; }
.tsl-dom-field__label { font-size: 12.5px; font-weight: 700; color: var(--tsl-muted-2); letter-spacing: 0.04em; }
.tsl-dom-field__value { font-size: 15px; font-weight: 600; color: var(--tsl-text); }
.tsl-dom-divider { height: 1px; background: var(--tsl-border); }

.tsl-dom-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tsl-dom-row__text { display: flex; flex-direction: column; gap: 3px; }
.tsl-dom-row__title { font-size: 14.5px; font-weight: 700; }
.tsl-dom-row__desc { font-size: 13.5px; color: var(--tsl-muted); }
.tsl-dom-mini { height: 34px; padding: 0 14px; font-size: 13px; text-decoration: none; }

/* quick actions */
.tsl-dom-links { display: flex; flex-direction: column; gap: 2px; }
.tsl-dom-links a {
  padding: 10px 12px; margin: 0 -12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--tsl-text-2); text-decoration: none;
}
.tsl-dom-links a:hover { background: var(--tsl-primary-soft); color: var(--tsl-primary); }

/* renewal notice */
.tsl-dom-notice {
  border-radius: 18px; background: #FFF6DE; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.tsl-dom-notice__title { font-size: 14.5px; font-weight: 700; color: #4A3C00; }
.tsl-dom-notice__text  { font-size: 13.5px; color: #6B5300; line-height: 1.55; }
.tsl-dom-notice__link  { font-size: 13.5px; font-weight: 700; color: #6B5300; text-decoration: underline; margin-top: 2px; }

/* nameservers */
.tsl-dom-nsform { display: flex; flex-direction: column; gap: 14px; }
.tsl-dom-nschoice { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--tsl-text-2); }
.tsl-dom-nschoice input { accent-color: var(--tsl-primary); }
.tsl-dom-nsfields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tsl-dom-nsform .tsl-btn { align-self: flex-start; }
/* The house nameservers, listed under the "default" radio so the choice is
   not a blind one. Indented to sit under the radio's label text. */
.tsl-dom-nsdefaults { list-style: none; margin: -6px 0 2px; padding: 0 0 0 26px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.tsl-dom-nsdefaults li { font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tsl-muted); background: var(--tsl-bg-2, #F5F5F8); border-radius: 6px; padding: 3px 8px; }

/* "Use default nameservers" greys the five inputs (six does this with
   disableFields), so it is clear the typed values will not be saved. */
.tsl-input.is-disabled { background: var(--tsl-bg-2, #F5F5F8); color: var(--tsl-muted); cursor: not-allowed; }
.tsl-dom-nsform .tsl-field:has(.is-disabled) .tsl-field__label { opacity: .55; }

/* DNS + forwarders tables */
.tsl-dom-dns__head, .tsl-dom-fwd__head {
  display: grid; gap: 12px; padding: 0 0 10px;
  font-size: 12.5px; font-weight: 700; color: var(--tsl-muted-2); letter-spacing: 0.03em;
  border-bottom: 1px solid var(--tsl-border);
}
.tsl-dom-dns__head, .tsl-dom-dns__row { grid-template-columns: 1.4fr 0.8fr 1.8fr 0.7fr; }
.tsl-dom-fwd__head, .tsl-dom-fwd__row { grid-template-columns: 1fr 1.6fr; }
.tsl-dom-dns__row, .tsl-dom-fwd__row { display: grid; gap: 12px; padding: 10px 0; align-items: center; }
.tsl-dom-dns .tsl-input, .tsl-dom-fwd .tsl-input { height: 44px; }
.tsl-dom-table-form { display: flex; flex-direction: column; gap: 16px; }
.tsl-dom-table-form .tsl-btn { align-self: flex-start; }

/* EPP */
.tsl-dom-note { margin: 0; font-size: 14.5px; color: var(--tsl-muted); line-height: 1.6; }
.tsl-dom-epp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
  padding: 16px 18px; border-radius: 12px;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
  word-break: break-all;
}

/* contacts */
.tsl-dom-contacts { display: flex; flex-direction: column; gap: 22px; }
.tsl-dom-contact__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; text-transform: capitalize; }
.tsl-dom-contacts .tsl-btn { align-self: flex-start; }

@media (max-width: 1040px) {
  .tsl-dom-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tsl-dom-grid, .tsl-dom-nsfields { grid-template-columns: 1fr; }
  .tsl-dom-dns__head, .tsl-dom-fwd__head { display: none; }
  .tsl-dom-dns__row, .tsl-dom-fwd__row { grid-template-columns: 1fr; }
  .tsl-dom-card { padding: 20px 18px; }
}

/* Domain tabs: in-page panels */
.tsl-dom-panel { display: none; }
.tsl-dom-panel.is-active { display: block; }
.tsl-dom-single { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
button.tsl-dom-tab {
  background: none;
  border: none;                       /* kill the default button border */
  border-bottom: 2px solid transparent;
  font-family: var(--tsl-font);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border-radius: 0;
  outline: none;
}
button.tsl-dom-tab.is-active { border-bottom-color: var(--tsl-primary); }
button.tsl-dom-tab:focus-visible { outline: 2px solid var(--tsl-primary); outline-offset: 2px; }

/* Configure page: free-domain banner terms + non-qualifying warning */
.tsl-cfg-freebanner__terms { display: block; margin-top: 3px; font-size: 13px; color: #5A4FA3; }
.tsl-cfg-freebanner.is-muted { opacity: .55; }
.tsl-cfg-freewarn {
  padding: 14px 18px; border-radius: 13px;
  background: #FFF6DE; color: #6B5300;
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
.tsl-cfg-freewarn[hidden] { display: none; }
.tsl-cfg-domain__use { height: 44px; padding: 0 22px; }


/* ============================================================
   Configure product — built to configure-order.html values
   ============================================================ */
.tsl-cfg { max-width: 1180px; display: flex; flex-direction: column; gap: 22px; }
.tsl-cfg-head { display: flex; flex-direction: column; gap: 7px; }
.tsl-cfg-back { font-size: 13.5px; font-weight: 600; color: #6B6F86; width: fit-content; text-decoration: none; }
.tsl-cfg-back:hover { color: var(--tsl-primary); }
.tsl-cfg-title { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.025em; }

.tsl-cfg-layout { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.tsl-cfg-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tsl-cfg-main > form { display: flex; flex-direction: column; gap: 16px; }

.tsl-cfg-card {
  background: #fff; border: 1px solid #ECEEF6; border-radius: 18px;
  padding: 26px 28px; display: flex; flex-direction: column; gap: 20px;
}
.tsl-cfg-rule { height: 1px; background: #ECEEF6; }
.tsl-cfg-cardhead { display: flex; flex-direction: column; gap: 4px; }
.tsl-cfg-cardtitle { margin: 0; font-size: 17px; font-weight: 800; }
.tsl-cfg-cardsub { font-size: 14px; color: #6B6F86; }

/* plan */
.tsl-cfg-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tsl-cfg-plan__name { margin: 0; font-size: 19px; font-weight: 800; }
.tsl-cfg-plan__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tsl-cfg-price { display: flex; align-items: baseline; gap: 10px; }
.tsl-cfg-renews { font-size: 13.5px; color: #9095AC; }
.tsl-cfg-renews:empty, .tsl-cfg-price:empty { display: none; }
.tsl-cfg-onetime { font-size: 22px; font-weight: 800; }

/* labels + fields (design values) */
.tsl-cfg-label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; font-weight: 600; color: #3A3F58;
}
.tsl-cfg-label--wide { grid-column: 1 / -1; }
.tsl-cfg-select, .tsl-cfg-input,
.tsl-cfg-custom input[type="text"], .tsl-cfg-custom input[type="password"],
.tsl-cfg-custom select, .tsl-cfg-custom textarea {
  height: 48px; padding: 0 12px;
  border: 1px solid #E1E4F0; border-radius: 12px; background: #FBFBFE;
  font-size: 15px; font-weight: 500; color: var(--tsl-text);
  font-family: var(--tsl-font); width: 100%;
}
.tsl-cfg-select { width: 250px; font-weight: 600; cursor: pointer; }
.tsl-cfg-select--full { width: 100%; font-weight: 500; }
.tsl-cfg-custom textarea { height: auto; padding: 12px; }
.tsl-cfg-select:focus, .tsl-cfg-input:focus { border-color: var(--tsl-primary); outline: none; }
.tsl-cfg-help { font-size: 12.5px; font-weight: 500; color: #9095AC; }
.tsl-cfg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* radio / checkbox options */
.tsl-cfg-radios { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tsl-cfg-radio { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--tsl-text-2); }
.tsl-cfg-radio input { accent-color: var(--tsl-primary); width: 16px; height: 16px; }
.tsl-cfg-qty { display: flex; align-items: center; gap: 10px; }
.tsl-cfg-input--qty { width: 110px; }
.tsl-cfg-qtylabel { font-size: 14px; color: #6B6F86; }

/* free-domain banner (design colours) */
.tsl-cfg-freebanner {
  padding: 16px 18px; border-radius: 14px; background: #F7F5FF;
  display: flex; align-items: center; gap: 12px;
}
.tsl-cfg-freebanner__icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px; background: #1E0EAF;
  display: flex; align-items: center; justify-content: center;
}
.tsl-cfg-freebanner span { font-size: 14.5px; color: #2D2166; line-height: 1.5; }
.tsl-cfg-freebanner__terms { display: block; margin-top: 3px; font-size: 13px; color: #5A4FA3; }
.tsl-cfg-freebanner.is-muted { opacity: .5; }
.tsl-cfg-freewarn {
  padding: 14px 18px; border-radius: 13px; background: #FFF6DE;
  font-size: 13.5px; font-weight: 600; color: #6B5300;
}
.tsl-cfg-freewarn[hidden] { display: none; }

/* yellow note */
.tsl-cfg-note {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 13px; background: #FFF6DE;
}
.tsl-cfg-note__dot { width: 8px; height: 8px; border-radius: 50%; background: #FFC318; flex: none; }
.tsl-cfg-note span:last-child { font-size: 14px; color: #6B5300; line-height: 1.5; }
.tsl-cfg-note a { font-weight: 700; color: #6B5300; text-decoration: underline; }

/* addons */
.tsl-cfg-addons { display: flex; flex-direction: column; gap: 12px; }
.tsl-cfg-addon {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid #E1E4F0; border-radius: 14px; cursor: pointer;
}
.tsl-cfg-addon:has(input:checked) { border-color: var(--tsl-primary); background: #F7F5FF; }
.tsl-cfg-addon input { accent-color: var(--tsl-primary); width: 17px; height: 17px; flex: none; }
.tsl-cfg-addon__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tsl-cfg-addon__name { font-size: 15px; font-weight: 700; }
.tsl-cfg-addon__desc { font-size: 13.5px; color: #6B6F86; line-height: 1.5; }
.tsl-cfg-addon__price { font-size: 14.5px; font-weight: 700; white-space: nowrap; }

/* domain search (design values) */
.tsl-cfg-search {
  display: flex; align-items: center; gap: 10px; padding: 6px;
  border: 1.5px solid #1E0EAF; border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(30,14,175,0.07); background: #fff;
}
.tsl-cfg-search__icon { margin-left: 12px; flex: none; }
.tsl-cfg-search__input { flex: 1; height: 42px; border: none; background: transparent; font-size: 15.5px; font-weight: 600; }
.tsl-cfg-search__input:focus { outline: none; }
.tsl-cfg-search__btn {
  height: 42px; padding: 0 22px; border: none; border-radius: 11px;
  background: #1E0EAF; color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--tsl-font); flex: none;
}
.tsl-cfg-searching { margin: 14px 0 0; font-size: 14px; color: #6B6F86; }
.tsl-cfg-domrow {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border: 1px solid #ECEEF6; border-radius: 14px; margin-top: 14px;
}
.tsl-cfg-domrow__ico { width: 18px; height: 18px; flex: none; display: none; background-repeat: no-repeat; background-position: center; }
.tsl-cfg-domrow.is-available .tsl-cfg-domrow__ico,
.tsl-cfg-domrow.is-taken .tsl-cfg-domrow__ico { display: inline-block; }
.tsl-cfg-domrow.is-available .tsl-cfg-domrow__ico {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23009263' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
}
.tsl-cfg-domrow.is-taken .tsl-cfg-domrow__ico {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round'><path d='M3 3l6 6M9 3l-6 6'/></svg>");
}
.tsl-cfg-domrow__name { flex: 1; margin: 0; font-size: 15px; font-weight: 700; }
.tsl-cfg-domrow__msg { margin: 0; font-size: 14.5px; font-weight: 600; color: #C0392B; }
.tsl-cfg-domrow__price { margin: 0; font-size: 15px; font-weight: 800; }
.tsl-cfg-domrow__use {
  height: 36px; padding: 0 15px; border: 1px solid #E1E4F0; border-radius: 10px;
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--tsl-text-2);
  cursor: pointer; font-family: var(--tsl-font);
}
.tsl-cfg-domrow__use:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }

/* summary (design values) */
.tsl-cfg-summary {
  background: #fff; border: 1px solid #ECEEF6; border-radius: 18px;
  padding: 24px 26px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 20px;
}
.tsl-cfg-summary__title { margin: 0; font-size: 18px; font-weight: 800; }
.tsl-cfg-summary #producttotal { font-size: 14px; color: #4A4F68; }
.tsl-cfg-continue {
  height: 50px; border: none; border-radius: 12px;
  background: #1E0EAF; color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: var(--tsl-font);
  box-shadow: 0 8px 20px rgba(30,14,175,0.28);
}
.tsl-cfg-continue:hover { background: var(--tsl-primary-hover); }
.tsl-cfg-guarantee {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; color: #00805A; font-weight: 600;
}

@media (max-width: 1040px) {
  .tsl-cfg-layout { grid-template-columns: 1fr; }
  .tsl-cfg-summary { position: static; }
}
@media (max-width: 640px) {
  .tsl-cfg-grid2 { grid-template-columns: 1fr; }
  .tsl-cfg-select { width: 100%; }
  .tsl-cfg-card { padding: 20px 18px; }
  .tsl-cfg-title { font-size: 26px; }
}

/* Summary: hide WHMCS's per-option lines — design shows product + totals only */
.tsl-cfg-summary .tsl-cfg-sumhide { display: none !important; }
/* DiscountCenter nodes inside the plan card, styled to the design */
.tsl-cfg-plan .dc-price-row { display: flex; align-items: baseline; gap: 10px; }
.tsl-cfg-plan .dc-price-old { font-size: 15px; color: #9095AC; text-decoration: line-through; }
.tsl-cfg-plan .dc-price-new { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; color: var(--tsl-text); }
.tsl-cfg-plan__head .dc-save-badge {
  padding: 5px 12px; border-radius: 99px; background: #E6F8F2; color: #00805A;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.tsl-cfg-plan .dc-renewal-note { font-size: 13.5px; color: #9095AC; }

/* ---- Plan card + summary aligned to cart.html ---- */
.tsl-cfg-layout { align-items: start; }
.tsl-cfg-summary { position: sticky; top: 20px; margin-top: 0; align-self: start; }

/* head: name left, product group right (cart.html) */
.tsl-cfg-plan__group { font-size: 14.5px; font-weight: 500; color: #9095AC; }

/* duration row: select left, price cluster right */
.tsl-cfg-plan__row { align-items: center; }
.tsl-cfg-plan .field-container { flex: 1 1 320px; }
.tsl-cfg-select { width: 100%; max-width: 460px; }
.tsl-cfg-price { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

/* DiscountCenter cluster ordered like cart.html: struck, Save pill, big price */
.tsl-cfg-price .dc-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.tsl-cfg-price .dc-price-old { order: 1; font-size: 15px; color: #9095AC; text-decoration: line-through; }
.tsl-cfg-price .dc-save-badge {
  order: 2; padding: 6px 13px; border-radius: 99px;
  background: #E6F8F2; color: #00805A; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.tsl-cfg-price .dc-price-new { order: 3; font-size: 30px; font-weight: 800; letter-spacing: -0.025em; color: var(--tsl-text); }

/* summary: line items styled like cart.html */
.tsl-cfg-summary #producttotal { display: flex; flex-direction: column; gap: 10px; }
.tsl-cfg-summary #producttotal .clearfix,
.tsl-cfg-summary #producttotal > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.tsl-cfg-summary #producttotal .pull-left,
.tsl-cfg-summary #producttotal .float-left { float: none; color: #4A4F68; }
.tsl-cfg-summary #producttotal .pull-right,
.tsl-cfg-summary #producttotal .float-right { float: none; font-weight: 700; color: var(--tsl-text); text-align: right; }
.tsl-cfg-summary .total-due-today .amt,
.tsl-cfg-summary #producttotal .amt { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--tsl-text); }
.tsl-cfg-summary .dc-original-total { color: #9095AC; text-decoration: line-through; font-weight: 500; margin-right: 8px; }
.tsl-cfg-summary .dc-summary-discount .pull-right { color: #00805A; }

@media (max-width: 700px) {
  .tsl-cfg-plan__row { align-items: flex-start; }
  .tsl-cfg-price { margin-left: 0; justify-content: flex-start; }
}

/* "/mo" suffix on the headline price (design: $2.49/mo) */
.tsl-cfg-price .tsl-cfg-permo { font-size: 15px; font-weight: 600; color: #6B6F86; margin-left: 2px; }

/* ============================================================
   Plan Duration — custom dropdown (design: cart.html)
   Native <select> is kept for WHMCS but hidden.
   ============================================================ */
.tsl-cfg-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.tsl-dd { position: relative; width: 100%; max-width: 460px; }
.tsl-dd__btn {
  width: 100%; height: 56px; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1.5px solid #E1E4F0; border-radius: 14px; background: #fff;
  font-family: var(--tsl-font); font-size: 16px; font-weight: 700; color: var(--tsl-text);
  cursor: pointer; text-align: left;
}
.tsl-dd.is-open .tsl-dd__btn { border-color: #1E0EAF; box-shadow: 0 0 0 4px rgba(30,14,175,0.07); }
.tsl-dd__chev { color: #6B6F86; flex: none; transition: transform .15s ease; }
.tsl-dd.is-open .tsl-dd__chev { transform: rotate(180deg); }

.tsl-dd__menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid #ECEEF6; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(16,20,60,0.14);
  display: none;
}
.tsl-dd.is-open .tsl-dd__menu { display: block; }
.tsl-dd__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: 11px; cursor: pointer;
}
.tsl-dd__item:hover { background: #F7F8FC; }
.tsl-dd__item.is-selected { background: #F1EEFF; }
.tsl-dd__term  { font-size: 16px; font-weight: 700; color: var(--tsl-text); }
.tsl-dd__price { font-size: 15px; font-weight: 500; color: #6B6F86; }
.tsl-dd__item.is-selected .tsl-dd__term,
.tsl-dd__item.is-selected .tsl-dd__price { color: #1E0EAF; }

/* price block rendered by tricasol.js (always shows a price) */
.tsl-cfg-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.tsl-cfg-was  { font-size: 15px; color: #9095AC; text-decoration: line-through; }
.tsl-cfg-save {
  padding: 6px 13px; border-radius: 99px; background: #E6F8F2; color: #00805A;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.tsl-cfg-now  { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; color: var(--tsl-text); }
.tsl-cfg-permo { font-size: 15px; font-weight: 600; color: #6B6F86; margin-left: 2px; }
/* the module's own nodes are no longer used in the card */
.tsl-cfg-plan .dc-price-row, .tsl-cfg-plan .dc-base-row { display: none !important; }

/* Continue button — force brand colour over any inherited button styling */
.tsl-cfg-continue, #btnCompleteProductConfig {
  background: #1E0EAF !important; color: #fff !important; border: none !important;
}
.tsl-cfg-continue:hover, #btnCompleteProductConfig:hover { background: #170A8C !important; }

/* ---- Configure fixes: duplicate renews line, one-line duration row,
        summary sizing/overflow ---- */
/* the module's own renewal note duplicated ours — ours (#tslPlanRenews) wins */
.tsl-cfg-plan .dc-renewal-note { display: none !important; }

/* duration + price on ONE line (design) */
.tsl-cfg-plan__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tsl-cfg-plan__row .tsl-cfg-label { flex: 0 1 340px; min-width: 240px; }
.tsl-dd { max-width: 340px; }
.tsl-cfg-price { margin-left: auto; }

/* summary: fit the card, design sizes */
.tsl-cfg-summary { overflow: hidden; }
.tsl-cfg-summary #producttotal { font-size: 13.5px; color: #4A4F68; }
.tsl-cfg-summary #producttotal * { max-width: 100%; }
.tsl-cfg-summary #producttotal .pull-right,
.tsl-cfg-summary #producttotal .float-right { white-space: nowrap; }
.tsl-cfg-summary #producttotal .amt,
.tsl-cfg-summary .total-due-today .amt {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  white-space: nowrap;
}
.tsl-cfg-summary .dc-original-total { font-size: 13.5px; }

/* Save badge in the card head (dynamic); price cluster is struck + price only */
.tsl-cfg-plan__head { display: flex; align-items: center; gap: 12px; }
.tsl-cfg-plan__head .tsl-cfg-plan__group { margin-right: auto; }
.tsl-cfg-plan__name + .tsl-cfg-save--head { margin-left: auto; }
.tsl-cfg-save--head[hidden] { display: none; }
/* any module badge remnants in the card stay hidden */
.tsl-cfg-plan .dc-save-badge { display: none !important; }

/* summary: static, per request */
.tsl-cfg-summary { position: static; }

/* Wider page, narrower summary — fields fit one line */
.tsl-cfg { max-width: 1320px; }
.tsl-cfg-layout { grid-template-columns: 1fr 320px; }
.tsl-cfg-summary { padding: 22px 22px; }



/* Sidebar narrower + content wider (design proportions).
   Layout is flex — only the width variable needs changing; .tsl-main-col
   already flexes to fill the rest. */
:root { --tsl-sidebar-w: 224px; }
.tsl-cfg { max-width: 1360px; margin: 0 auto; }

/* Configure page: the app shell (.tsl-main) already pads the page. The order
   wrapper (.tsl-order) was adding the SAME padding again -> double gap the
   design doesn't have. Remove it on configure so the layout matches the HTML. */
#order-standard_cart.tsl-configure { padding: 0; }
.tsl-configure .tsl-cfg { max-width: 100%; margin: 0; }

/* ============================================================
   Configure summary — remove WHMCS/module price duplicates
   ============================================================ */
/* 1. base "Plan Name .... price" row duplicates the term line -> hide */
.tsl-cfg-summary #producttotal .dc-base-row { display: none !important; }

/* 2. term row: keep struck original + discounted price on ONE line */
.tsl-cfg-summary #producttotal .summary-totals > .clearfix {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.tsl-cfg-summary #producttotal .pull-left,
.tsl-cfg-summary #producttotal .float-left { float: none; color: #6B6F86; white-space: nowrap; }
.tsl-cfg-summary #producttotal .pull-right,
.tsl-cfg-summary #producttotal .float-right {
  float: none; display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap; text-align: right; margin-left: auto;
}
.tsl-cfg-summary #producttotal .pull-right .dc-original-total,
.tsl-cfg-summary #producttotal .float-right .dc-original-total {
  order: 0; font-size: 13px; color: #9095AC; text-decoration: line-through; font-weight: 500;
}
.tsl-cfg-summary #producttotal .pull-right > span:not(.dc-original-total) { order: 1; font-weight: 700; color: var(--tsl-text); }

/* 3. Total row: show ONLY the final amount — hide the struck original there */
.tsl-cfg-summary .total-due-today .dc-original-total { display: none !important; }

/* Summary term line (design):
     struck original on its OWN line, above
     then: plan label (left)  ...  final price (right)  on one line     */
.tsl-cfg-summary #producttotal .summary-totals > .clearfix {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px; row-gap: 2px;
}
/* the struck original spans the full width and sits first (top) */
.tsl-cfg-summary #producttotal .summary-totals > .clearfix .pull-right .dc-original-total,
.tsl-cfg-summary #producttotal .summary-totals > .clearfix .float-right .dc-original-total {
  grid-column: 1 / -1;
  font-size: 13px; color: #9095AC; text-decoration: line-through; font-weight: 500;
  order: -1;
}
.tsl-cfg-summary #producttotal .summary-totals > .clearfix .pull-left,
.tsl-cfg-summary #producttotal .summary-totals > .clearfix .float-left {
  grid-column: 1; color: #6B6F86; white-space: normal;
}
.tsl-cfg-summary #producttotal .summary-totals > .clearfix .pull-right,
.tsl-cfg-summary #producttotal .summary-totals > .clearfix .float-right {
  grid-column: 2; display: contents;
}
/* the final (discounted) amount goes in the right column, next to the label */
.tsl-cfg-summary #producttotal .summary-totals > .clearfix .pull-right > span:not(.dc-original-total),
.tsl-cfg-summary #producttotal .summary-totals > .clearfix .float-right > span:not(.dc-original-total) {
  grid-column: 2; grid-row: 2; text-align: right; font-weight: 700; color: var(--tsl-text); white-space: nowrap;
}


/* Total block (final): amount on top, "Total" label below, both left-aligned */
.tsl-cfg-summary .total-due-today,
.tsl-cfg-summary #producttotal .total-due-today {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 2px; padding-top: 6px; flex-wrap: nowrap;
}
.tsl-cfg-summary .total-due-today .amt { order: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--tsl-text); }
.tsl-cfg-summary .total-due-today .pull-left,
.tsl-cfg-summary .total-due-today .float-left { order: 1; float: none; font-size: 14px; color: #6B6F86; }

/* Order summary: static (do not follow scroll) */
.tsl-cfg-summary { position: static !important; top: auto !important; }

/* Product-addons cross-sell/promo (WHMCS raw output) — contain + tidy it */
.tsl-cfg-promo { display: flex; flex-direction: column; gap: 12px; }
.tsl-cfg-promo .product-addon,
.tsl-cfg-promo .addon-product,
.tsl-cfg-promo > div {
  border: 1px solid #E1E4F0; border-radius: 14px; padding: 16px 18px; background: #fff;
}
.tsl-cfg-promo img { max-width: 72px; height: auto; border-radius: 8px; float: left; margin: 0 14px 6px 0; }
.tsl-cfg-promo h3, .tsl-cfg-promo h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; }
.tsl-cfg-promo p { margin: 0 0 8px; font-size: 14px; color: #6B6F86; line-height: 1.55; }
.tsl-cfg-promo a { color: var(--tsl-primary); font-weight: 600; }
/* the SSL cert list -> compact styled select */
.tsl-cfg-promo select {
  clear: both; width: 100%; max-width: 460px; height: 46px; padding: 0 12px;
  border: 1px solid #E1E4F0; border-radius: 12px; background: #FBFBFE;
  font-family: var(--tsl-font); font-size: 14.5px; color: var(--tsl-text);
}
.tsl-cfg-promo label { display: block; font-size: 13px; font-weight: 600; color: #3A3F58; margin: 8px 0 6px; }

/* ============================================================
   View cart — rich review (design: cart.html)
   ============================================================ */
.tsl-cart .tsl-order__wrap--wide { max-width: 1180px; }
.tsl-cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
.tsl-cart-main-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.tsl-ct-card {
  background: #fff; border: 1px solid #ECEEF6; border-radius: 20px;
  padding: 26px 28px; display: flex; flex-direction: column; gap: 18px;
}
.tsl-ct-rule { height: 1px; background: #ECEEF6; }
.tsl-ct-rule--soft { background: #F1F2F8; }
.tsl-ct-label { font-size: 13px; font-weight: 600; color: #9095AC; }

/* plan card */
.tsl-ct-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tsl-ct-plan__name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.tsl-ct-plan__group { font-size: 13px; font-weight: 600; color: #9095AC; }
.tsl-ct-plan__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tsl-ct-plan__term { display: flex; flex-direction: column; gap: 8px; }
.tsl-ct-term { font-size: 17px; font-weight: 700; color: var(--tsl-text); }
.tsl-ct-plan__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tsl-ct-price-now { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
.tsl-ct-price-cycle { font-size: 13px; color: #9095AC; }
.tsl-ct-plan__setup { font-size: 13px; color: #9095AC; }
.tsl-ct-plan__actions { display: flex; align-items: center; gap: 16px; }
.tsl-ct-editlink { font-size: 13.5px; font-weight: 700; color: var(--tsl-primary); text-decoration: none; }
.tsl-ct-removelink { border: none; background: none; padding: 0; font-size: 13.5px; font-weight: 600; color: #9095AC; cursor: pointer; font-family: var(--tsl-font); }
.tsl-ct-removelink:hover { color: #C0392B; }

/* free-domain banner */
.tsl-ct-freebanner { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 14px; background: #EEEBFF; }
.tsl-ct-freebanner__icon { width: 38px; height: 38px; flex: none; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; }
.tsl-ct-freebanner__text { margin: 0; font-size: 14px; color: #3A3F58; line-height: 1.5; }
.tsl-ct-freebanner__text strong { font-weight: 800; }

/* free-domain card */
.tsl-ct-domain__head { display: flex; align-items: flex-start; gap: 13px; }
.tsl-ct-domain__icon { width: 38px; height: 38px; flex: none; border-radius: 11px; background: #E8F7F0; display: flex; align-items: center; justify-content: center; }
.tsl-ct-domain__titles { display: flex; flex-direction: column; gap: 3px; }
.tsl-ct-domain__title { font-size: 16px; font-weight: 800; }
.tsl-ct-domain__sub { font-size: 13.5px; color: #9095AC; }
.tsl-ct-search { display: flex; align-items: center; gap: 10px; padding: 7px; border: 1px solid #E1E4F0; border-radius: 14px; background: #FBFBFE; }
.tsl-ct-search__icon { margin-left: 12px; flex: none; }
.tsl-ct-search__input { flex: 1; height: 44px; border: none; background: transparent; font-size: 15px; font-weight: 500; }
.tsl-ct-search__input:focus { outline: none; }
.tsl-ct-search__btn { height: 44px; padding: 0 24px; border: none; border-radius: 11px; background: #1E0EAF; color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer; flex: none; font-family: var(--tsl-font); }
.tsl-ct-searching { margin: 14px 0 0; font-size: 14px; color: #6B6F86; }
.tsl-ct-domrow { display: flex; align-items: center; gap: 14px; padding-top: 16px; margin-top: 4px; border-top: 1px solid #F1F2F8; }
.tsl-ct-domrow__ico { width: 18px; height: 18px; flex: none; display: none; background-repeat: no-repeat; background-position: center; }
.tsl-ct-domrow.is-available .tsl-ct-domrow__ico, .tsl-ct-domrow.is-taken .tsl-ct-domrow__ico { display: inline-block; }
.tsl-ct-domrow.is-available .tsl-ct-domrow__ico { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23009263' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>"); }
.tsl-ct-domrow.is-taken .tsl-ct-domrow__ico { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round'><path d='M3 3l6 6M9 3l-6 6'/></svg>"); }
.tsl-ct-domrow__name { flex: 1; margin: 0; font-size: 16px; font-weight: 800; }
.tsl-ct-domrow__msg { margin: 0; font-size: 14.5px; font-weight: 600; color: #C0392B; }
.tsl-ct-domrow__price { margin: 0; font-size: 15px; font-weight: 700; }
.tsl-ct-domrow__use { height: 44px; padding: 0 20px; border: 1px solid #1E0EAF; border-radius: 11px; background: #fff; font-size: 14px; font-weight: 700; color: #1E0EAF; cursor: pointer; font-family: var(--tsl-font); }

/* config review */
.tsl-ct-config__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tsl-ct-config__title { font-size: 16px; font-weight: 800; }
.tsl-ct-config__edit { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border: 1px solid #E1E4F0; border-radius: 10px; font-size: 13px; font-weight: 600; color: #3A3F58; text-decoration: none; }
.tsl-ct-config__edit:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }
.tsl-ct-config__opts { display: flex; flex-direction: column; gap: 10px; }
.tsl-ct-config__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.tsl-ct-config__k { color: #6B6F86; }
.tsl-ct-config__v { font-weight: 700; text-align: right; }

/* addons / recommended / standalone */
.tsl-ct-addons__head { display: flex; align-items: center; gap: 9px; }
.tsl-ct-addons__title { margin: 0; font-size: 16px; font-weight: 800; }
.tsl-ct-standalone__title { margin-bottom: 4px; }
.tsl-ct-addon-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid #F1F2F8; }
.tsl-ct-card > .tsl-ct-addon-row:first-of-type { border-top: none; padding-top: 0; }
.tsl-ct-addon-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tsl-ct-addon-row__name { font-size: 14.5px; font-weight: 700; }
.tsl-ct-addon-row__desc { font-size: 13px; color: #9095AC; }
.tsl-ct-addon-row__right { display: flex; align-items: center; gap: 14px; }
.tsl-ct-addon-row__price { font-size: 14px; font-weight: 800; white-space: nowrap; }
.tsl-ct-addon-row__remove { border: none; background: none; font-size: 13px; font-weight: 600; color: #9095AC; cursor: pointer; font-family: var(--tsl-font); }
.tsl-ct-addon-row__remove:hover { color: #C0392B; }

/* clear cart */
.tsl-ct-clear { display: flex; }
.tsl-cart-clearbtn { border: none; background: none; font-size: 13.5px; font-weight: 600; color: #9095AC; cursor: pointer; font-family: var(--tsl-font); display: inline-flex; align-items: center; gap: 7px; }
.tsl-cart-clearbtn:hover { color: #C0392B; }

/* summary column: sticky (matches mock) */
.tsl-cart-summary-col { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }
.tsl-cart-summary { background: #fff; border: 1px solid #ECEEF6; border-radius: 20px; padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; }
.tsl-cart-summary__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.tsl-cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.tsl-cart-summary__row .pull-left, .tsl-cart-summary__row .float-left { float: none; color: #4A4F68; }
.tsl-cart-summary__row .pull-right, .tsl-cart-summary__row .float-right { float: none; font-weight: 700; text-align: right; }
.tsl-cart-summary__group { display: flex; flex-direction: column; gap: 10px; }
.tsl-cart-summary__divider { height: 1px; background: #ECEEF6; }
.tsl-cart-summary__due { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tsl-cart-summary__due-label { font-size: 18px; font-weight: 800; }
.tsl-cart-summary__due-amt { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.tsl-cart-checkout { height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; background: #1E0EAF; color: #fff; font-size: 15.5px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px rgba(30,14,175,0.28); }
.tsl-cart-checkout.disabled { opacity: .5; pointer-events: none; }
.tsl-cart-continue { display: block; text-align: center; font-size: 13.5px; font-weight: 600; color: #6B6F86; text-decoration: none; }

/* promo / tax */
.tsl-cart-extra { background: #fff; border: 1px solid #ECEEF6; border-radius: 20px; padding: 8px 8px 0; }
.tsl-cart-extra-tabs { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 18px; border-bottom: 1px solid #ECEEF6; }
.tsl-cart-extra-tab { display: inline-block; padding: 16px 4px; margin-right: 18px; font-size: 14px; font-weight: 600; color: #6B6F86; text-decoration: none; border-bottom: 2px solid transparent; }
.tsl-cart-extra-tab.active { color: var(--tsl-primary); font-weight: 700; border-bottom-color: var(--tsl-primary); }
.tsl-cart-extra-body { padding: 20px 26px 24px; }
.tsl-cart-promo-form { display: flex; gap: 10px; }
.tsl-cart-promo-input { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #E1E4F0; border-radius: 12px; background: #FBFBFE; }
.tsl-cart-promo-input i { color: #9095AC; }
.tsl-cart-promo-input input { flex: 1; height: 46px; border: none; background: transparent; font-size: 14.5px; font-family: var(--tsl-font); }
.tsl-cart-promo-input input:focus { outline: none; }
.tsl-cart-promo-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.tsl-cart-promo-remove { font-size: 13px; font-weight: 600; color: #C0392B; text-decoration: none; }
.tsl-cart-tax-form { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 1040px) {
  .tsl-cart-layout { grid-template-columns: 1fr; }
  .tsl-cart-summary-col { position: static; }
}
@media (max-width: 640px) {
  .tsl-ct-card { padding: 20px 18px; }
  .tsl-ct-plan__row { flex-direction: column; }
  .tsl-ct-plan__price { align-items: flex-start; }
}

/* ============================================================
   Modals — WHMCS uses Bootstrap markup; we don't load Bootstrap
   CSS, so without these the dialogs render inline at page bottom.
   Hidden by default; the JS engine (tricasol.js) adds .show/.in.
   ============================================================ */
.modal {
  display: none; position: fixed; inset: 0; z-index: 1050;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(14,16,32,0.45);
  padding: 40px 16px;
}
.modal.show, .modal.in { display: block; }
.modal-dialog {
  max-width: 460px; margin: 40px auto;
  background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(14,16,32,0.28);
  overflow: hidden;
}
.modal-content { display: flex; flex-direction: column; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid #ECEEF6;
}
.modal-title { margin: 0; font-size: 17px; font-weight: 800; }
.modal-header .close {
  border: none; background: none; font-size: 22px; line-height: 1;
  color: #9095AC; cursor: pointer; padding: 0;
}
.modal-body { padding: 22px 24px; font-size: 14.5px; color: #4A4F68; line-height: 1.6; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px 20px;
}
.modal-footer .tsl-btn { height: 42px; }
/* Recommendations modal image/list tidy */
.modal-body img { max-width: 96px; height: auto; border-radius: 8px; }
body.tsl-modal-open { overflow: hidden; }

/* ---- Checkout: payment gateway cards ---- */
.tsl-co-gateways { display: flex; gap: 12px; flex-wrap: wrap; }
.tsl-co-gateway {
  flex: 1 1 160px; min-width: 150px;
  display: flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 18px;
  border: 1.5px solid #E1E4F0; border-radius: 13px; background: #fff;
  cursor: pointer; text-align: center;
}
.tsl-co-gateway:hover { border-color: #C9CEE4; }
.tsl-co-gateway.is-active { border-color: #1E0EAF; background: #F7F5FF; }
.tsl-co-gateway input { position: absolute; opacity: 0; width: 0; height: 0; }
.tsl-co-gateway__name { font-size: 15px; font-weight: 700; color: var(--tsl-text); }
.tsl-co-gateway.is-active .tsl-co-gateway__name { color: #1E0EAF; }

/* validation text only shows once WHMCS/jquery.payment marks a field invalid */
#creditCardInputFields .field-icon + .help-block:not(.has-error *) { }
#creditCardInputFields .validate.text-danger:empty { display: none; }

/* ============================================================
   Checkout — style WHMCS's field markup to checkout.html
   (CSS-only over WHMCS inputs: zero risk to payment field names)
   ============================================================ */
.tsl-checkout .tsl-order__wrap--wide { max-width: 1180px; }
.tsl-checkout .tsl-cart__title { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 6px; }
.tsl-checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.tsl-co-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* each WHMCS "container" becomes a card */
#checkoutContainer, .tsl-co-main > div[id^="container"],
.tsl-co-account, .tsl-co-card {
  background: #fff; border: 1px solid #ECEEF6; border-radius: 18px; padding: 26px 28px;
}
.tsl-co-main > div[id^="container"] { display: flex; flex-direction: column; gap: 4px; }

/* section headings (WHMCS .sub-heading) -> card titles */
.tsl-checkout .sub-heading { margin: 0 0 16px; padding: 0; border: none; background: none; }
.tsl-checkout .sub-heading .primary-bg-color,
.tsl-checkout .sub-heading span {
  display: block; padding: 0; background: none !important; color: var(--tsl-text) !important;
  font-size: 17px; font-weight: 800;
}

/* rows/cols -> responsive grid */
.tsl-checkout .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.tsl-checkout .row > [class^="col-sm-"], .tsl-checkout .row > [class*=" col-sm-"] { padding: 0; width: auto; }
.tsl-checkout .col-sm-12 { grid-column: 1 / -1; }
.tsl-checkout .form-group { margin: 0; position: relative; }

/* inputs -> design fields */
.tsl-checkout .form-control,
.tsl-checkout input.field, .tsl-checkout select.field {
  height: 48px; padding: 0 14px; width: 100%;
  border: 1px solid #E1E4F0; border-radius: 12px; background: #FBFBFE;
  font-size: 15px; font-weight: 500; color: var(--tsl-text); font-family: var(--tsl-font);
  box-shadow: none;
}
.tsl-checkout textarea.form-control { height: auto; padding: 14px; min-height: 110px; }
.tsl-checkout .form-control:focus { border-color: #1E0EAF; outline: none; box-shadow: none; }
.tsl-checkout select.form-control { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239095AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
/* hide WHMCS's prepend icons (design has none) */
.tsl-checkout .prepend-icon .field-icon { display: none; }
.tsl-checkout .prepend-icon .form-control { padding-left: 14px; }

/* account selector cards */
.tsl-checkout .account-selection-option, .tsl-checkout .radio-tile,
.tsl-checkout #containerExistingAccountSelect label {
  display: block; border: 1.5px solid #E1E4F0; border-radius: 14px; padding: 16px 18px; margin: 0 0 12px; cursor: pointer;
}
.tsl-checkout #containerExistingAccountSelect input:checked + *,
.tsl-checkout .radio-tile.active { border-color: #1E0EAF; }

/* password strength chips (client-side) */
.tsl-co-pwchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tsl-co-pwchip { padding: 5px 10px; border-radius: 7px; background: #F5F6FB; font-size: 12px; font-weight: 600; color: #6B6F86; }
.tsl-co-pwchip.is-met { background: #E6F8F2; color: #00805A; }
/* hide WHMCS's own strength meter (design uses chips) */
.tsl-checkout #passwordStrengthMeterBar, .tsl-checkout .password-strength-meter { display: none; }

/* the raw green secure-environment IP notice -> tidy single line */
.tsl-checkout .checkout-security-msg {
  border: none; background: #E8F7F0; color: #00694A; border-radius: 12px;
  padding: 12px 16px; font-size: 13px; line-height: 1.5; margin-top: 14px;
}
.tsl-checkout .checkout-security-msg i { margin-right: 6px; }

/* ---- Checkout payment: clean card-field grid (design) ---- */
.tsl-checkout #creditCardInputFields { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.tsl-checkout #creditCardInputFields .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tsl-checkout #creditCardInputFields .col-sm-12,
.tsl-checkout #creditCardInputFields #card-number-container,
.tsl-checkout #creditCardInputFields .cc-number-field { grid-column: 1 / -1; }
/* hide the duplicate saved-card CVV row when entering a NEW card, and the
   "Enter new card information below" bullet heading + inline validation text */
.tsl-checkout #existingCardInfo:not(.active) { }
.tsl-checkout .cc-fields-container .text-danger:empty,
.tsl-checkout .validate:empty { display: none; }
.tsl-checkout #creditCardInputFields ul,
.tsl-checkout #creditCardInputFields li { list-style: none; margin: 0; padding: 0; }
.tsl-checkout #creditCardInputFields .new-card-heading { font-size: 13px; font-weight: 700; color: #3A3F58; }
/* the small "?" cvv helper button -> subtle */
.tsl-checkout .cvv-help, .tsl-checkout [data-toggle="popover"] { color: #9095AC; }

/* payment gateway cards: title + subtitle layout from mock */
.tsl-co-gateways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tsl-co-gateway { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; min-height: 64px; padding: 16px 18px; gap: 4px; }
.tsl-co-gateway__name { font-size: 14.5px; }
.tsl-co-gateway__sub { font-size: 12.5px; color: #6B6F86; font-weight: 500; }

/* ToS row in summary */
.tsl-checkout .tsl-co-summary .accepttos-row,
.tsl-checkout #accepttos { accent-color: #1E0EAF; }

/* ============================================================
   Checkout field styling — AUTHORITATIVE (placed last so it wins)
   ============================================================ */
/* kill WHMCS's inside-input icons entirely */
.tsl-checkout .prepend-icon .field-icon,
.tsl-checkout .append-icon .field-icon,
.tsl-checkout label.field-icon { display: none !important; }
.tsl-checkout .prepend-icon > .form-control,
.tsl-checkout .prepend-icon > input.field { padding-left: 14px !important; }

/* uniform inputs */
.tsl-checkout input.form-control,
.tsl-checkout input.field,
.tsl-checkout select.form-control,
.tsl-checkout textarea.form-control {
  height: 50px; padding: 0 14px; width: 100%;
  border: 1px solid #E6E8F2; border-radius: 12px; background: #fff;
  font-size: 15px; color: var(--tsl-text); font-family: var(--tsl-font); box-shadow: none;
}
.tsl-checkout textarea.form-control { height: auto; min-height: 120px; padding: 14px; }
.tsl-checkout .form-control:focus { border-color: #1E0EAF; box-shadow: 0 0 0 3px rgba(30,14,175,0.08); outline: none; }

/* spacing between stacked fields */
.tsl-checkout .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.tsl-checkout .form-group { margin: 0 0 14px; }
.tsl-checkout .row .form-group { margin: 0; }

/* hide field-level validation until user interacts (avoids errors on load) */
.tsl-checkout .field-validation-text,
.tsl-checkout .validate,
.tsl-checkout .text-danger,
.tsl-checkout .help-block { display: none !important; }
.tsl-checkout .has-error .field-validation-text.force-show { display: block !important; color: #C0392B; }

/* CVV help "?" toggles -> hidden (clutter) */
.tsl-checkout .cc-cvv-help, .tsl-checkout a[data-toggle="popover"],
.tsl-checkout .input-group-addon { display: none !important; }

/* card fields: card number full width, expiry + cvv side by side */
.tsl-checkout #creditCardInputFields .row { grid-template-columns: 1fr 1fr; }
.tsl-checkout #ccinfo-container .form-group:first-child,
.tsl-checkout .cc-number-row { grid-column: 1 / -1; }

/* Secure-environment IP notice -> compact one-liner */
.tsl-checkout .checkout-security-msg {
  border: none !important; background: #E8F7F0 !important; color: #00694A !important;
  border-radius: 12px; padding: 11px 14px; font-size: 12.5px; line-height: 1.5;
  margin-top: 12px; text-align: left;
}

/* Saved-card CVV block (#existingCardInfo) only when a saved card is chosen.
   WHMCS's JS normally toggles it; we don't load that JS, so hide by default
   and reveal via .tsl-show-savedcvv set by tricasol.js when a saved card is active. */
.tsl-checkout #existingCardInfo { display: none; }
.tsl-checkout.tsl-show-savedcvv #existingCardInfo { display: grid; }

/* ============================================================
   Plans (product group) — design: plans.html
   ============================================================ */
#order-standard_cart.tsl-plans { padding: 0; }
.tsl-plans-wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.tsl-plans-head { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.tsl-plans-back { align-self: flex-start; font-size: 13.5px; font-weight: 600; color: #6B6F86; text-decoration: none; }
.tsl-plans-back:hover { color: var(--tsl-primary); }
.tsl-plans-title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.tsl-plans-sub { margin: 0; font-size: 15.5px; color: #6B6F86; }

.tsl-plans-controls { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.tsl-plans-ctrl { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: #6B6F86; }
.tsl-plans-select {
  height: 46px; min-width: 200px; padding: 0 12px;
  border: 1px solid #E1E4F0; border-radius: 12px; background: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--tsl-font);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239095AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}

.tsl-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.tsl-plan-card {
  position: relative; background: #fff; border: 1px solid #ECEEF6; border-radius: 20px;
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.tsl-plan-card.is-featured { border: 2px solid #1E0EAF; box-shadow: 0 18px 44px rgba(30,14,175,0.12); }
.tsl-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 99px; background: #1E0EAF; color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.tsl-plan-card__head { display: flex; flex-direction: column; gap: 5px; }
.tsl-plan-card__name { margin: 0; font-size: 20px; font-weight: 800; }
.tsl-plan-card__tag { font-size: 14px; color: #6B6F86; }
.tsl-plan-card__was { display: flex; align-items: center; gap: 10px; }
.tsl-plan-strike { font-size: 14px; color: #9095AC; text-decoration: line-through; }
.tsl-plan-save { padding: 4px 10px; border-radius: 7px; background: #E6F8F2; color: #00805A; font-size: 12px; font-weight: 700; }
.tsl-plan-card__price { display: flex; align-items: baseline; gap: 4px; }
.tsl-plan-cur { font-size: 20px; font-weight: 700; }
.tsl-plan-amt { font-size: 44px; font-weight: 800; letter-spacing: -0.035em; }
.tsl-plan-per { font-size: 15px; color: #6B6F86; font-weight: 600; }
.tsl-plan-setup { font-size: 12.5px; color: #9095AC; }
.tsl-plan-card__btn {
  height: 48px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #1E0EAF; border-radius: 12px; background: #fff; color: #1E0EAF;
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.tsl-plan-card__btn:hover { background: #F5F3FF; }
.tsl-plan-card__btn.is-solid { background: #1E0EAF; color: #fff; box-shadow: 0 8px 20px rgba(30,14,175,0.28); }
.tsl-plan-card__btn.is-solid:hover { background: #170A8C; }
.tsl-plan-rule { height: 1px; background: #ECEEF6; }
.tsl-plan-card__features { display: flex; flex-direction: column; gap: 11px; }
.tsl-plan-feat { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #3A3F58; }
.tsl-plan-feat strong { font-weight: 700; }
.tsl-plan-featdesc { font-size: 14px; color: #3A3F58; line-height: 1.7; }

@media (max-width: 940px) { .tsl-plans-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* Store landing — category cards (design: buy-hosting.html) */
.tsl-buy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tsl-buy-card {
  background: #fff; border: 1px solid #ECEEF6; border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px; color: #0E1020; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tsl-buy-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(16,20,60,0.10); }
.tsl-buy-card__icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.tsl-buy-card__icon--0, .tsl-buy-card__icon--1 { background: #EEEBFF; }
.tsl-buy-card__icon--2 { background: #E6F8F2; }
.tsl-buy-card__icon--3 { background: #EEF0FA; }
.tsl-buy-card__icon--4 { background: #FFF6DE; }
.tsl-buy-card__title { margin: 0; font-size: 18px; font-weight: 800; }
.tsl-buy-card__desc { margin: 0; font-size: 14px; color: #6B6F86; line-height: 1.6; }
.tsl-buy-card__meta { font-size: 13.5px; color: #9095AC; margin-top: auto; }
@media (max-width: 940px) { .tsl-buy-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* Buy-hosting standalone landing accents (icon colour per family) */
.tsl-buy-head { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.tsl-buy-headsub { margin: 0; font-size: 15px; color: #6B6F86; }
.tsl-buy-card__icon--violet { background: #EEEBFF; color: #1E0EAF; }
.tsl-buy-card__icon--green  { background: #E6F8F2; color: #00805A; }
.tsl-buy-card__icon--slate  { background: #EEF0FA; color: #3A4a6B; }
.tsl-buy-card__icon--amber  { background: #FFF6DE; color: #8A6400; }

/* Plans: product unavailable on the selected billing cycle */
.tsl-plan-card--na { opacity: .5; }
.tsl-plan-card--na .tsl-plan-card__btn { pointer-events: none; opacity: .6; }
.tsl-plan-card--na .tsl-plan-amt::after { content: " —"; }
.tsl-buy-card__meta { font-size: 13.5px; color: #9095AC; margin-top: auto; }

/* ---------- captcha on auth forms ----------
   WHMCS renders its own captcha markup (Bootstrap grid classes from the
   default themes). These rules neutralise that grid inside our auth cards so
   the widget sits flush in the single-column form. */
.tsl-captcha { width: 100%; margin: 0; }
.tsl-captcha .col-md-8,
.tsl-captcha .col-md-offset-2,
.tsl-captcha .col-xs-10,
.tsl-captcha .col-xs-offset-1,
.tsl-captcha .col-xs-6 {
  width: 100%; margin: 0; padding: 0; float: none;
}
.tsl-captcha .recaptcha-container { display: flex; justify-content: center; }
.tsl-captcha #default-captcha-domainchecker {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
.tsl-captcha .captchaimage img { max-width: 100%; border-radius: 10px; }
.tsl-captcha input[type="text"] {
  height: 48px; padding: 0 14px; width: 100%;
  border: 1px solid #E1E4F0; border-radius: 12px; background: #FBFBFE;
  font-size: 15px; font-weight: 500;
}
.tsl-captcha p { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #3A3F58; }

/* ---------- account menu ----------
   The avatar previously linked straight to the profile, which left NO way to
   log out anywhere in the client area. It is now a dropdown. */
.tsl-user-wrap { position: relative; }
.tsl-user {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px; border: none; border-radius: 12px;
  background: transparent; cursor: pointer; font-family: inherit;
}
.tsl-user:hover { background: #F5F6FB; }
.tsl-user__chev { flex: none; transition: transform .15s ease; }
.tsl-user-wrap.is-open .tsl-user__chev { transform: rotate(180deg); }

.tsl-user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 216px; padding: 6px;
  background: #fff; border: 1px solid #ECEEF6; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(14,16,32,0.12);
  display: flex; flex-direction: column; gap: 2px;
}
.tsl-user-menu[hidden] { display: none; }
.tsl-user-menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #3A3F58; text-decoration: none;
}
.tsl-user-menu__item:hover { background: #F5F6FB; color: #1E0EAF; }
.tsl-user-menu__item--danger { color: #C0392B; }
.tsl-user-menu__item--danger:hover { background: #FDECEC; color: #C0392B; }
.tsl-user-menu__rule { height: 1px; background: #ECEEF6; margin: 4px 0; }

@media (max-width: 767px) {
  .tsl-user__meta { display: none; }   /* avatar only on phones */
  .tsl-user-menu { min-width: 200px; }
}

/* ============================================================
   Knowledge base index (knowledgebase.tpl)
   Hero band with search, then Categories beside Most popular.
   ============================================================ */
.tsl-kbx { display: flex; flex-direction: column; gap: 22px; max-width: 1180px; margin: 0 auto; }

.tsl-kbx-hero {
  border-radius: 24px; padding: 44px 48px;
  /* Brand blue only. This started as a bespoke brighter gradient, which read
     as a different colour next to the referral card and the sidebar icons —
     both of which are var(--tsl-primary). Keep every blue on the tokens. */
  background: linear-gradient(112deg, var(--tsl-primary-hover) 0%, var(--tsl-primary) 100%);
  color: #fff;
}
.tsl-kbx-hero__eyebrow {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.tsl-kbx-hero__title {
  margin: 0 0 8px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
.tsl-kbx-hero__sub { margin: 0 0 26px; font-size: 16px; color: rgba(255,255,255,.8); }

.tsl-kbx-search { display: flex; gap: 12px; max-width: 780px; }
.tsl-kbx-search__field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  height: 56px; padding: 0 18px; border-radius: 14px; background: #fff;
}
.tsl-kbx-search__field svg { flex: none; }
.tsl-kbx-search__input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none;
  font-family: inherit; font-size: 15.5px; font-weight: 500; color: var(--tsl-text);
}
.tsl-kbx-search__input::placeholder { color: var(--tsl-muted-2); font-weight: 500; }
/* Near-black rather than another blue: it has to stay legible sitting on the
   brand-blue hero, and a second blue there would muddy it. */
.tsl-kbx-search__btn {
  flex: none; height: 56px; padding: 0 30px; border: none; border-radius: 14px;
  background: var(--tsl-text); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity .15s ease;
}
.tsl-kbx-search__btn:hover { opacity: .88; }

.tsl-kbx-pop { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tsl-kbx-pop__label { font-size: 14px; color: rgba(255,255,255,.72); }
.tsl-kbx-pop__form { display: inline; }
.tsl-kbx-chip {
  height: 34px; padding: 0 16px; border: none; border-radius: 99px;
  background: rgba(255,255,255,.16); color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
.tsl-kbx-chip:hover { background: rgba(255,255,255,.28); }

/* ---- Two-column body ---- */
.tsl-kbx-cols { display: grid; grid-template-columns: 400px 1fr; gap: 22px; align-items: start; }

.tsl-kbx-card {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl); padding: 22px 24px;
}
.tsl-kbx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tsl-kbx-card__title { margin: 0; font-size: 17px; font-weight: 800; color: var(--tsl-text); }
.tsl-kbx-card__count { font-size: 13.5px; font-weight: 700; color: var(--tsl-muted-2); }
.tsl-kbx-empty { margin: 0; padding: 26px 0; text-align: center; font-size: 14px; color: var(--tsl-muted); }

.tsl-kbx-list { display: flex; flex-direction: column; gap: 6px; }

/* ---- Category row ---- */
.tsl-kbx-cat {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: 14px; border: 1px solid transparent;
  color: var(--tsl-text); text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.tsl-kbx-cat:hover { background: var(--tsl-bg); border-color: var(--tsl-border); }
.tsl-kbx-cat__icon {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
}
.tsl-kbx-cat__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tsl-kbx-cat__name { font-size: 14.5px; font-weight: 800; }
/* Descriptions are free text from admin and can be any length; keep rows even. */
.tsl-kbx-cat__desc {
  font-size: 13px; color: var(--tsl-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsl-kbx-cat__count {
  flex: none; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
  font-size: 12.5px; font-weight: 800;
}

/* ---- Popular article row ---- */
.tsl-kbx-art {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 14px; border-radius: 14px; border: 1px solid transparent;
  color: var(--tsl-text); text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.tsl-kbx-art:hover { background: var(--tsl-bg); border-color: var(--tsl-border); }
.tsl-kbx-art__num {
  flex: none; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tsl-divider); color: var(--tsl-muted);
  font-size: 12.5px; font-weight: 800;
}
.tsl-kbx-art:hover .tsl-kbx-art__num { background: var(--tsl-primary-soft); color: var(--tsl-primary); }
.tsl-kbx-art__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tsl-kbx-art__title { font-size: 15px; font-weight: 700; }
.tsl-kbx-art__excerpt { font-size: 13.5px; line-height: 1.55; color: var(--tsl-muted); }

@media (max-width: 1000px) {
  .tsl-kbx-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tsl-kbx-hero { padding: 30px 22px; border-radius: 20px; }
  .tsl-kbx-hero__title { font-size: 30px; }
  .tsl-kbx-search { flex-direction: column; }
  .tsl-kbx-search__btn { height: 50px; width: 100%; }
  /* 16px stops iOS zooming the page when the field is focused. */
  .tsl-kbx-search__input { font-size: 16px; }
}

/* ============================================================
   Knowledge base category / search results (knowledgebasecat.tpl)
   Header card with search and category chips, then article rows.
   Tokens only — no fonts or colours beyond the ones already in use.
   ============================================================ */
.tsl-kbc { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; margin: 0 auto; }

.tsl-kbc-head {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl); padding: 28px 30px;
}
.tsl-kbc-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.tsl-kbc-title { margin: 0 0 5px; font-size: 27px; font-weight: 800; letter-spacing: -.03em; color: var(--tsl-text); }
.tsl-kbc-sub { margin: 0; font-size: 14.5px; color: var(--tsl-muted); }
.tsl-kbc-count {
  flex: none; padding: 6px 14px; border-radius: 99px;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
  font-size: 13px; font-weight: 700;
}

.tsl-kbc-search { display: flex; gap: 10px; }
.tsl-kbc-search__field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 16px;
  border: 1px solid var(--tsl-border-strong); border-radius: 12px; background: #FBFBFE;
}
.tsl-kbc-search__field svg { flex: none; }
.tsl-kbc-search__input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--tsl-text);
}
.tsl-kbc-search__input::placeholder { color: var(--tsl-muted-2); font-weight: 500; }
.tsl-kbc-search__btn {
  flex: none; height: 50px; padding: 0 26px; border: none; border-radius: 12px;
  background: var(--tsl-primary); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
.tsl-kbc-search__btn:hover { background: var(--tsl-primary-hover); }

.tsl-kbc-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.tsl-kbc-chip {
  height: 36px; padding: 0 18px; border-radius: 99px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--tsl-border-strong); background: var(--tsl-card);
  font-size: 13.5px; font-weight: 600; color: var(--tsl-text-2); text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tsl-kbc-chip:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); background: var(--tsl-primary-soft); }

/* ---- Article rows ---- */
.tsl-kbc-list { display: flex; flex-direction: column; gap: 12px; }
.tsl-kbc-item {
  display: flex; align-items: flex-start; gap: 15px;
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl); padding: 20px 22px;
  color: var(--tsl-text); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tsl-kbc-item:hover { border-color: #C9CEE4; box-shadow: 0 2px 10px rgba(14,16,32,.05); }
.tsl-kbc-item__icon {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
}
.tsl-kbc-item__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tsl-kbc-item__title { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.tsl-kbc-item__desc { font-size: 14px; line-height: 1.6; color: var(--tsl-muted); }
.tsl-kbc-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13px; color: var(--tsl-muted-2); }

.tsl-kbc-empty {
  display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center;
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl); padding: 46px 26px;
}
.tsl-kbc-empty__title { font-size: 15.5px; font-weight: 700; color: var(--tsl-text-2); }
.tsl-kbc-empty__desc { font-size: 14px; color: var(--tsl-muted); }

/* ---- Bottom CTA. Plain card, not the blue banner: the blue one belongs to
   the article page, and two of them in a row reads as a duplicate. ---- */
.tsl-kbc-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl); padding: 22px 26px;
}
.tsl-kbc-cta__text { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.tsl-kbc-cta__title { font-size: 16px; font-weight: 800; color: var(--tsl-text); }
.tsl-kbc-cta__desc { font-size: 14px; color: var(--tsl-muted); }

@media (max-width: 620px) {
  .tsl-kbc-head { padding: 22px 18px; }
  .tsl-kbc-title { font-size: 23px; }
  .tsl-kbc-search { flex-direction: column; }
  .tsl-kbc-search__btn { width: 100%; }
  /* 16px stops iOS zooming the page when the field is focused. */
  .tsl-kbc-search__input { font-size: 16px; }
}

/* ============================================================
   Knowledge base article (knowledgebasearticle.tpl)
   Article card + sticky rail. The body styles apply to editor
   HTML, so they only use plain tags an admin can actually produce.
   ============================================================ */
.tsl-kba { display: flex; flex-direction: column; gap: 16px; max-width: 1240px; margin: 0 auto; }

.tsl-kba-crumbs { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tsl-muted-2); }
.tsl-kba-crumbs a { color: var(--tsl-primary); font-weight: 600; text-decoration: none; }
.tsl-kba-crumbs a:hover { text-decoration: underline; }
.tsl-kba-crumbs__here {
  color: var(--tsl-muted); max-width: 420px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tsl-kba-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }

.tsl-kba-doc {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl); padding: 34px 38px;
}
.tsl-kba-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.tsl-kba-title { margin: 0; font-size: 31px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.tsl-kba-print {
  flex: none; height: 40px; padding: 0 18px;
  border: 1px solid var(--tsl-border-strong); border-radius: 10px; background: var(--tsl-card);
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--tsl-text-2); cursor: pointer;
}
.tsl-kba-print:hover { background: var(--tsl-bg); }

.tsl-kba-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--tsl-muted); }
.tsl-kba-tag {
  padding: 4px 11px; border-radius: 99px;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
  font-size: 12.5px; font-weight: 700;
}
.tsl-kba-dot { color: var(--tsl-muted-2); }
.tsl-kba-thanks {
  margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: var(--tsl-success-soft); color: var(--tsl-success-text); font-size: 14px;
}
.tsl-kba-rule { height: 1px; background: var(--tsl-border); margin: 22px 0 26px; }

/* ---- Was this helpful ---- */
.tsl-kba-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--tsl-border);
}
.tsl-kba-vote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tsl-kba-vote__q { font-size: 14.5px; font-weight: 700; color: var(--tsl-text); }
.tsl-kba-vote__btn {
  height: 38px; padding: 0 20px;
  border: 1px solid var(--tsl-border-strong); border-radius: 10px; background: var(--tsl-card);
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--tsl-text-2); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tsl-kba-vote__btn:hover { border-color: var(--tsl-primary); color: var(--tsl-primary); }
.tsl-kba-useful { font-size: 13.5px; color: var(--tsl-muted-2); }

/* ---- Rail ---- */
.tsl-kba-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
.tsl-kba-card {
  background: var(--tsl-card); border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-xl); padding: 20px 22px;
}
.tsl-kba-card__label {
  display: block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tsl-muted-2);
}
.tsl-kba-toc, .tsl-kba-more { display: flex; flex-direction: column; }
.tsl-kba-toc a, .tsl-kba-more a {
  padding: 8px 0 8px 12px; margin-left: -12px;
  border-left: 2px solid transparent;
  font-size: 14px; font-weight: 500; color: var(--tsl-text-2); text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.tsl-kba-toc a:hover, .tsl-kba-more a:hover { color: var(--tsl-primary); }
/* Sub-headings sit in from their parent so the outline is readable. */
.tsl-kba-toc a.is-sub { padding-left: 26px; font-size: 13.5px; color: var(--tsl-muted); }
.tsl-kba-toc a.is-current { color: var(--tsl-primary); font-weight: 700; border-left-color: var(--tsl-primary); }

.tsl-kba-cta {
  border-radius: var(--tsl-radius-xl); padding: 22px;
  background: linear-gradient(112deg, var(--tsl-primary-hover) 0%, var(--tsl-primary) 100%);
  color: #fff;
}
.tsl-kba-cta__title { display: block; font-size: 16.5px; font-weight: 800; margin-bottom: 6px; }
.tsl-kba-cta__desc { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.78); }

/* Rail holds only the support card: centre the article at the width it had
   in the two-column layout and drop the support card underneath it. Widening
   the card to fill the page instead just leaves the text hugging the left. */
.tsl-kba.is-bare { max-width: 900px; margin-left: auto; margin-right: auto; }
.tsl-kba.is-bare .tsl-kba-grid { grid-template-columns: minmax(0, 1fr); }
.tsl-kba.is-bare .tsl-kba-side { position: static; }
.tsl-kba.is-bare .tsl-kba-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; padding: 22px 26px;
}
.tsl-kba.is-bare .tsl-kba-cta__text { flex: 1; min-width: 240px; }
.tsl-kba.is-bare .tsl-kba-cta__desc { margin: 0; }
.tsl-kba.is-bare .tsl-kba-cta__btn { flex: none; }
.tsl-kba-cta__btn {
  display: inline-block; padding: 10px 18px; border-radius: 10px;
  background: #fff; color: var(--tsl-primary);
  font-size: 13.5px; font-weight: 800; text-decoration: none;
}
.tsl-kba-cta__btn:hover { background: rgba(255,255,255,.9); color: var(--tsl-primary); }

/* ============================================================
   Article body — styles editor HTML, so every rule targets a
   plain tag the WHMCS editor can actually produce.
   ============================================================ */
.tsl-kb-body { font-size: 16px; line-height: 1.75; color: var(--tsl-text-2); }
.tsl-kb-body > p:first-child { font-size: 17.5px; line-height: 1.7; color: var(--tsl-text-3); }
.tsl-kb-body h1, .tsl-kb-body h2, .tsl-kb-body h3 {
  margin: 34px 0 12px; font-weight: 800; color: var(--tsl-text); letter-spacing: -.02em; scroll-margin-top: 90px;
}
.tsl-kb-body h2 { font-size: 22px; }
.tsl-kb-body h3 { font-size: 17.5px; }
.tsl-kb-body p { margin: 0 0 16px; }
.tsl-kb-body ul { margin: 0 0 16px; padding-left: 20px; }
.tsl-kb-body li { margin-bottom: 9px; }
.tsl-kb-body a { color: var(--tsl-primary); font-weight: 600; }

/* Numbered steps get badges instead of default markers, so a step that wraps
   over several lines still reads as one step. */
.tsl-kb-body ol { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: tslstep; }
.tsl-kb-body ol > li {
  position: relative; counter-increment: tslstep;
  padding-left: 42px; margin-bottom: 14px;
}
.tsl-kb-body ol > li::before {
  content: counter(tslstep);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tsl-primary-soft); color: var(--tsl-primary);
  font-size: 12.5px; font-weight: 800;
}

/* blockquote is the only callout the editor offers a button for, so it is
   styled as the note. For an amber warning, add class="warning" to a
   blockquote in the source view. */
.tsl-kb-body blockquote {
  margin: 0 0 18px; padding: 16px 20px;
  border-left: 3px solid var(--tsl-primary); border-radius: 0 12px 12px 0;
  background: var(--tsl-primary-soft); color: var(--tsl-text-2);
}
.tsl-kb-body blockquote > :last-child { margin-bottom: 0; }
.tsl-kb-body blockquote.warning {
  border-left-color: #E0A400; background: #FFF6DE; color: #6E5100;
}

.tsl-kb-body code {
  padding: 2px 6px; border-radius: 6px; background: var(--tsl-divider);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px;
}
.tsl-kb-body pre {
  margin: 0 0 18px; padding: 18px 20px; border-radius: 14px;
  background: #14103A; color: #E8E6FF; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7;
}
.tsl-kb-body pre code { padding: 0; background: none; color: inherit; font-size: inherit; }

.tsl-kb-body img { max-width: 100%; height: auto; border-radius: 14px; }

.tsl-kb-body table {
  width: 100%; margin: 0 0 18px; border-collapse: collapse;
  border: 1px solid var(--tsl-border); border-radius: 14px; overflow: hidden;
  font-size: 14.5px;
}
.tsl-kb-body thead th {
  padding: 13px 16px; text-align: left; background: var(--tsl-bg);
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tsl-muted);
}
.tsl-kb-body td { padding: 14px 16px; border-top: 1px solid var(--tsl-border); }

@media (max-width: 1080px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr track still has min-width:auto, so a
     wide code block or table in the article body would push the column past
     the screen instead of scrolling inside itself. */
  .tsl-kba-grid { grid-template-columns: minmax(0, 1fr); }
  .tsl-kba-side { position: static; }
}
@media (max-width: 620px) {
  .tsl-kba-doc { padding: 24px 20px; }
  .tsl-kba-title { font-size: 25px; }
  .tsl-kb-body { font-size: 15.5px; }
  /* Wide tables scroll inside themselves rather than pushing the page sideways. */
  .tsl-kb-body table { display: block; overflow-x: auto; }
}

@media print {
  .tsl-kba-grid { display: block; }
  .tsl-kba-doc { border: none; padding: 0; }
  .tsl-kb-body { font-size: 11.5pt; color: #000; }
  .tsl-kb-body h1, .tsl-kb-body h2, .tsl-kb-body h3 { color: #000; break-after: avoid; page-break-after: avoid; }
  .tsl-kb-body pre, .tsl-kb-body table, .tsl-kb-body li, .tsl-kb-body img { break-inside: avoid; page-break-inside: avoid; }
  /* Browsers drop backgrounds when printing, so the dark code block would
     otherwise print as invisible light text. */
  .tsl-kb-body pre { background: none !important; color: #000 !important; border: 1px solid #999; }
  .tsl-kb-body blockquote { background: none !important; border-left: 3px solid #999; }
  .tsl-kb-body a { color: #000; text-decoration: underline; }
}