/* ==========================================================================
   Fabonic — client area design system
   --------------------------------------------------------------------------
   Loaded after Bootstrap 4 (all.min.css). This file owns the entire visual
   identity: colour, type, spacing, and every component. Twenty-One's
   theme.min.css sits underneath purely as a baseline for pages that have not
   been individually designed yet — everything here overrides it.

   Sections
     0. Tokens          7. Cards
     1. Reset & type    8. Domain search & results
     2. Layout          9. Tables & data
     3. Topbar         10. Alerts, badges, status
     4. Masthead & nav 11. Sidebar
     5. Hero           12. Modals, dropdowns, pagination
     6. Buttons & forms13. Footer / responsive / motion
   ========================================================================== */

/* ==========================================================================
   0. Tokens
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --fb-ink:        #0a1b33;   /* deep navy-black — headings, dark grounds */
  --fb-ink-soft:   #12294a;
  --fb-brand:      #003880;   /* logo navy */
  --fb-brand-lift: #1c5fb5;   /* interactive blue */
  --fb-brand-pale: #dfe9f7;
  --fb-brand-wash: #f0f5fc;

  --fb-gold:       #e9a63c;   /* accent — CTAs, active marks, highlights */
  --fb-gold-deep:  #c4802a;
  --fb-gold-wash:  #fdf4e6;

  /* Neutrals — biased toward the navy, not pure grey ---------------------- */
  --fb-canvas:     #f5f7fa;
  --fb-paper:      #ffffff;
  --fb-slate:      #57657e;   /* body text */
  --fb-slate-soft: #7d8aa1;   /* secondary text */
  --fb-rule:       #e2e8f1;
  --fb-rule-soft:  #eef2f7;

  /* Semantic — deliberately distinct from the gold accent ----------------- */
  --fb-ok:    #14795c;
  --fb-ok-bg: #e7f4ef;
  --fb-warn:    #b4690e;
  --fb-warn-bg: #fdf3e3;
  --fb-err:    #c0392b;
  --fb-err-bg: #fbecea;
  --fb-info:    #1c5fb5;
  --fb-info-bg: #eaf1fb;

  /* Type ----------------------------------------------------------------- */
  --fb-display: Sora, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --fb-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --fb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Elevation ------------------------------------------------------------ */
  --fb-e1: 0 1px 2px rgba(10,27,51,.06);
  --fb-e2: 0 2px 8px rgba(10,27,51,.07), 0 1px 2px rgba(10,27,51,.05);
  --fb-e3: 0 10px 30px rgba(10,27,51,.10), 0 2px 8px rgba(10,27,51,.05);
  --fb-e4: 0 24px 60px rgba(10,27,51,.16), 0 6px 18px rgba(10,27,51,.08);

  /* Geometry & motion ---------------------------------------------------- */
  --fb-r1: 8px;
  --fb-r2: 14px;
  --fb-r3: 22px;
  --fb-pill: 999px;
  --fb-ease: cubic-bezier(.22,.61,.36,1);
  --fb-t: .2s var(--fb-ease);
}

/* ==========================================================================
   1. Reset & typography
   ========================================================================== */

body,
body.primary-bg-color {
  background: var(--fb-canvas);
  color: var(--fb-slate);
  font-family: var(--fb-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fb-display);
  color: var(--fb-ink);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.22;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(1.9rem, 1.4rem + 2.1vw, 2.75rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.05rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.1rem + .6vw, 1.5rem); }
h4, .h4 { font-size: 1.12rem; }

p { margin-bottom: 1rem; }

a { color: var(--fb-brand-lift); text-decoration: none; transition: color var(--fb-t); }
a:hover, a:focus { color: var(--fb-brand); text-decoration: none; }

hr { border-top-color: var(--fb-rule); }
::selection { background: var(--fb-gold-wash); color: var(--fb-ink); }

/* Data — domain names, prices, invoice numbers, IDs. */
.fb-data,
.fb-price,
.domain-name,
.tld-row .price,
td.price,
code, kbd, pre, samp {
  font-family: var(--fb-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Small uppercase label — the one place letter-spacing is generous. */
.fb-eyebrow {
  font-family: var(--fb-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fb-slate-soft);
}

:focus-visible {
  outline: 3px solid rgba(28,95,181,.5);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */

#main-body { padding: 2.5rem 0 4rem; }

.fb-section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.35rem;
}
.fb-section-head h2 { margin: 0; }
.fb-section-head .fb-rule {
  flex: 1;
  height: 1px;
  background: var(--fb-rule);
}

/* ==========================================================================
   3. Utility topbar (logged in)
   ========================================================================== */

.fb-topbar,
#header .topbar {
  background: var(--fb-ink);
  color: rgba(255,255,255,.72);
  font-size: .8rem;
  padding: .4rem 0;
}
.fb-topbar a,
#header .topbar a,
#header .topbar .btn {
  color: rgba(255,255,255,.78);
  font-size: .8rem;
  font-weight: 500;
}
.fb-topbar a:hover,
#header .topbar a:hover,
#header .topbar .btn:hover { color: #fff; }

#header .topbar .input-group-text {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.5);
  font-size: .78rem;
}
#header .topbar .btn-active-client {
  background: rgba(255,255,255,.1);
  border-radius: var(--fb-r1);
  color: #fff;
  font-weight: 600;
}

/* ==========================================================================
   4. Masthead & navigation
   ========================================================================== */

#header,
#header .header { background: var(--fb-paper); border-bottom: 0; }

.fb-masthead,
#header .navbar-light {
  background: var(--fb-paper);
  padding: 1rem 0;
}

.navbar-brand img,
.logo-img { max-height: 44px; width: auto; }

/* Knowledgebase search in the masthead */
.input-group.search .form-control {
  background: var(--fb-canvas);
  border: 1px solid transparent;
  border-left: 0;
  border-radius: 0 var(--fb-pill) var(--fb-pill) 0;
  font-size: .88rem;
  height: 42px;
}
.input-group.search .form-control:focus {
  background: var(--fb-paper);
  border-color: var(--fb-brand-pale);
  box-shadow: none;
}
.input-group.search .input-group-prepend .btn {
  background: var(--fb-canvas);
  border: 1px solid transparent;
  border-right: 0;
  border-radius: var(--fb-pill) 0 0 var(--fb-pill);
  color: var(--fb-slate-soft);
  padding-left: 1.1rem;
}

/* Cart pill */
.cart-btn {
  background: var(--fb-brand-wash);
  border-radius: var(--fb-pill);
  color: var(--fb-brand);
  padding: .55rem .95rem;
}
.cart-btn:hover { background: var(--fb-brand-pale); color: var(--fb-brand); }
.cart-btn .badge {
  background: var(--fb-gold);
  color: var(--fb-ink);
  font-family: var(--fb-mono);
  font-weight: 600;
}

/* Primary nav */
.main-navbar-wrapper {
  background: var(--fb-paper);
  border-top: 1px solid var(--fb-rule-soft);
  box-shadow: 0 1px 0 var(--fb-rule), 0 4px 16px rgba(10,27,51,.04);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.main-navbar-wrapper .nav-link {
  color: var(--fb-slate);
  font-family: var(--fb-display);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 1rem .9rem;
  position: relative;
  transition: color var(--fb-t);
}
.main-navbar-wrapper .nav-link:hover,
.main-navbar-wrapper .nav-link:focus { color: var(--fb-ink); }

/* Gold underline marks the active section — the accent's main job in the UI. */
.main-navbar-wrapper .nav-item > .nav-link::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--fb-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fb-t);
}
.main-navbar-wrapper .nav-item > .nav-link:hover::after,
.main-navbar-wrapper .nav-item.active > .nav-link::after,
.main-navbar-wrapper .nav-item.open > .nav-link::after { transform: scaleX(1); }

.main-navbar-wrapper .nav-item.active > .nav-link {
  color: var(--fb-ink);
  font-weight: 600;
}

.navbar-toggler {
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r1);
  color: var(--fb-slate);
  padding: .45rem .65rem;
}

/* Breadcrumb */
.master-breadcrumb {
  background: transparent;
  padding: 1.1rem 0 0;
}
.master-breadcrumb .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: .8rem;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a { color: var(--fb-slate-soft); }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--fb-brand); }
.master-breadcrumb .breadcrumb-item.active { color: var(--fb-ink); font-weight: 500; }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--fb-rule); }

/* ==========================================================================
   5. Hero — the orbital motif is lifted from the Fabonic logo mark
   ========================================================================== */

.fb-hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(233,166,60,.20), transparent 62%),
    linear-gradient(150deg, var(--fb-ink) 0%, var(--fb-brand) 62%, #0b4a9c 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Concentric orbit rings, echoing the ring around the logo's "F". */
.fb-hero::before,
.fb-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13);
  pointer-events: none;
  z-index: -1;
}
.fb-hero::before {
  width: 620px; height: 620px;
  top: -220px; right: -140px;
  box-shadow: inset 0 0 0 60px rgba(255,255,255,.04);
}
.fb-hero::after {
  width: 380px; height: 380px;
  bottom: -190px; left: -90px;
  border-color: rgba(233,166,60,.22);
}

.fb-hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(2.75rem, 1.5rem + 5vw, 5rem) 0;
  text-align: center;
}

.fb-hero .fb-eyebrow { color: rgba(255,255,255,.62); }

.fb-hero h1,
.fb-hero h2 {
  color: #fff;
  margin: .5rem 0 .6rem;
}

.fb-hero-sub {
  color: rgba(255,255,255,.76);
  font-size: 1.03rem;
  margin: 0 auto 1.9rem;
  max-width: 46ch;
}

/* The search console — the most-used control on the site. */
.fb-console {
  background: var(--fb-paper);
  border-radius: var(--fb-r3);
  box-shadow: var(--fb-e4);
  display: flex;
  gap: .5rem;
  margin: 0 auto;
  max-width: 720px;
  padding: .5rem;
  transition: box-shadow var(--fb-t), transform var(--fb-t);
}
.fb-console:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 30px 70px rgba(0,0,0,.3);
}

.fb-console .form-control {
  background: transparent;
  border: 0;
  border-radius: var(--fb-pill);
  box-shadow: none;
  color: var(--fb-ink);
  flex: 1;
  font-family: var(--fb-mono);
  font-size: 1rem;
  height: 52px;
  min-width: 0;
  padding: 0 1.25rem;
}
.fb-console .form-control::placeholder {
  color: var(--fb-slate-soft);
  font-family: var(--fb-mono);
  opacity: .75;
}
.fb-console .form-control:focus { background: transparent; box-shadow: none; }

.fb-console-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.fb-console-actions .btn { border-radius: var(--fb-pill); padding: .75rem 1.6rem; }

/* Featured TLD chips */
.fb-tlds {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}
.fb-tlds li {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--fb-pill);
  color: rgba(255,255,255,.9);
  font-family: var(--fb-mono);
  font-size: .8rem;
  padding: .35rem .9rem;
}
.fb-tlds li b { color: var(--fb-gold); font-weight: 600; }
.fb-tlds img { height: 16px; margin-right: .35rem; vertical-align: -2px; }

.fb-hero-link {
  color: rgba(255,255,255,.7);
  display: inline-block;
  font-size: .84rem;
  margin-top: 1.2rem;
}
.fb-hero-link:hover { color: var(--fb-gold); }

/* ==========================================================================
   6. Buttons & forms
   ========================================================================== */

.btn {
  border-radius: var(--fb-r1);
  font-family: var(--fb-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: .62rem 1.3rem;
  transition: background var(--fb-t), border-color var(--fb-t),
              color var(--fb-t), box-shadow var(--fb-t), transform .15s var(--fb-ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--fb-brand);
  border-color: var(--fb-brand);
  box-shadow: 0 2px 8px rgba(0,56,128,.24);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--fb-ink-soft);
  border-color: var(--fb-ink-soft);
  box-shadow: 0 6px 18px rgba(0,56,128,.3);
  color: #fff;
  transform: translateY(-1px);
}
.btn-primary:not(:disabled):not(.disabled):active { background: var(--fb-ink); }

/* Gold is the "commit" action — search, order, pay. Used sparingly. */
.btn-accent,
.btn-success {
  background: var(--fb-gold);
  border-color: var(--fb-gold);
  box-shadow: 0 2px 8px rgba(233,166,60,.34);
  color: var(--fb-ink);
}
.btn-accent:hover,
.btn-success:hover,
.btn-accent:focus,
.btn-success:focus {
  background: var(--fb-gold-deep);
  border-color: var(--fb-gold-deep);
  box-shadow: 0 6px 18px rgba(233,166,60,.42);
  color: var(--fb-ink);
  transform: translateY(-1px);
}

.btn-default,
.btn-secondary {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  color: var(--fb-slate);
}
.btn-default:hover,
.btn-secondary:hover {
  background: var(--fb-brand-wash);
  border-color: var(--fb-brand-pale);
  color: var(--fb-brand);
}

.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--fb-rule);
  color: var(--fb-brand);
}
.btn-outline-primary:hover {
  background: var(--fb-brand);
  border-color: var(--fb-brand);
  color: #fff;
}

.btn-link { color: var(--fb-brand-lift); font-weight: 500; }
.btn-lg { padding: .85rem 2rem; font-size: .95rem; border-radius: var(--fb-r2); }
.btn-sm { padding: .35rem .8rem; font-size: .8rem; }

/* Forms */
.form-control,
.custom-select,
select.form-control {
  background-color: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r1);
  color: var(--fb-ink);
  font-family: var(--fb-body);
  font-size: .92rem;
  height: auto;
  padding: .62rem .9rem;
  transition: border-color var(--fb-t), box-shadow var(--fb-t);
}
.form-control::placeholder { color: var(--fb-slate-soft); opacity: 1; }
.form-control:focus,
.custom-select:focus {
  background-color: var(--fb-paper);
  border-color: var(--fb-brand-lift);
  box-shadow: 0 0 0 4px rgba(28,95,181,.13);
  color: var(--fb-ink);
}
.form-control.is-invalid,
.has-error .form-control {
  border-color: var(--fb-err);
  box-shadow: 0 0 0 4px rgba(192,57,43,.11);
}

.form-group { margin-bottom: 1.15rem; }

label,
.col-form-label {
  color: var(--fb-ink);
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .35rem;
}

.form-text, .help-block, small.text-muted {
  color: var(--fb-slate-soft) !important;
  font-size: .8rem;
}

.input-group-text {
  background: var(--fb-canvas);
  border-color: var(--fb-rule);
  border-radius: var(--fb-r1);
  color: var(--fb-slate-soft);
  font-size: .86rem;
}

.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background-color: var(--fb-brand);
  border-color: var(--fb-brand);
}

/* ==========================================================================
   7. Cards
   ========================================================================== */

.card {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  box-shadow: var(--fb-e1);
  transition: transform var(--fb-t), box-shadow var(--fb-t), border-color var(--fb-t);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--fb-rule-soft);
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: .95rem;
  font-weight: 600;
  padding: 1.05rem 1.35rem;
  border-radius: var(--fb-r2) var(--fb-r2) 0 0 !important;
}

.card-body { padding: 1.35rem; }

.card-footer {
  background: var(--fb-brand-wash);
  border-top: 1px solid var(--fb-rule-soft);
  border-radius: 0 0 var(--fb-r2) var(--fb-r2) !important;
}

/* Product tiles: a gold hairline draws across the top on hover. */
.fb-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.fb-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fb-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--fb-ease);
}
.fb-tile:hover::before { transform: scaleX(1); }
.fb-tile:hover {
  border-color: var(--fb-brand-pale);
  box-shadow: var(--fb-e3);
  transform: translateY(-3px);
}
.fb-tile .card-body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem; }
.fb-tile h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.fb-tile p { color: var(--fb-slate-soft); font-size: .88rem; flex: 1; }
.fb-tile .btn { margin-top: 1rem; }

/* Quick-action grid */
.fb-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fb-action {
  align-items: center;
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  color: var(--fb-slate);
  display: flex;
  flex-direction: column;
  font-family: var(--fb-display);
  font-size: .84rem;
  font-weight: 500;
  gap: .7rem;
  justify-content: center;
  min-height: 118px;
  padding: 1.1rem .75rem;
  text-align: center;
  transition: transform var(--fb-t), box-shadow var(--fb-t),
              border-color var(--fb-t), color var(--fb-t);
}
.fb-action i {
  color: var(--fb-brand);
  font-size: 1.45rem;
  transition: color var(--fb-t), transform var(--fb-t);
}
.fb-action:hover {
  border-color: var(--fb-brand-pale);
  box-shadow: var(--fb-e3);
  color: var(--fb-ink);
  transform: translateY(-3px);
}
.fb-action:hover i { color: var(--fb-gold-deep); transform: scale(1.1); }

/* Legacy Twenty-One icon buttons, kept consistent on inherited pages. */
.action-icon-btns .ico-container {
  background: var(--fb-brand-wash);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  color: var(--fb-brand);
  transition: all var(--fb-t);
}
.action-icon-btns a { color: var(--fb-slate); font-weight: 600; }
.action-icon-btns a:hover { color: var(--fb-ink); }
.action-icon-btns a:hover .ico-container {
  background: var(--fb-brand);
  border-color: var(--fb-brand);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--fb-e3);
}

/* ==========================================================================
   8. Domain search results
   ========================================================================== */

.domain-lookup-result,
.domain-checker-result {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-left: 4px solid var(--fb-rule);
  border-radius: var(--fb-r1);
  box-shadow: var(--fb-e1);
  margin-bottom: .6rem;
  padding: 1rem 1.25rem;
  transition: border-color var(--fb-t), box-shadow var(--fb-t);
}
.domain-lookup-result:hover { box-shadow: var(--fb-e2); }
.domain-lookup-result.available   { border-left-color: var(--fb-ok); }
.domain-lookup-result.unavailable { border-left-color: var(--fb-slate-soft); opacity: .78; }

.domain-lookup-result .domain,
.domain-lookup-result .domain-name { font-family: var(--fb-mono); font-weight: 500; }

.tld-row {
  align-items: center;
  border-bottom: 1px solid var(--fb-rule-soft);
  padding: .7rem 0;
  transition: background var(--fb-t);
}
.tld-row:last-child { border-bottom: 0; }
.tld-row:hover { background: var(--fb-brand-wash); }

.price,
.tld-row .price {
  color: var(--fb-ink);
  font-family: var(--fb-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.domain-lookup-loader, .loading { color: var(--fb-brand-lift); }

/* ==========================================================================
   9. Tables & data
   ========================================================================== */

.table {
  background: var(--fb-paper);
  color: var(--fb-slate);
  margin-bottom: 0;
}
.table thead th {
  background: var(--fb-brand-wash);
  border-bottom: 1px solid var(--fb-rule);
  border-top: 0;
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding: .8rem 1rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.table td {
  border-top-color: var(--fb-rule-soft);
  padding: .85rem 1rem;
  vertical-align: middle;
}
.table-hover tbody tr { transition: background var(--fb-t); }
.table-hover tbody tr:hover { background: var(--fb-brand-wash); }

/* Money and identifiers line up in columns. */
.table td.price,
.table td.amount,
.table .fb-data { font-family: var(--fb-mono); font-variant-numeric: tabular-nums; }

.fb-table-wrap {
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   10. Alerts, badges, status
   ========================================================================== */

.alert {
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--fb-r1);
  font-size: .89rem;
  padding: .95rem 1.2rem;
}
.alert-success { background: var(--fb-ok-bg);   border-color: var(--fb-ok);   color: #0d5a44; }
.alert-info    { background: var(--fb-info-bg); border-color: var(--fb-info); color: #14406f; }
.alert-warning { background: var(--fb-warn-bg); border-color: var(--fb-warn); color: #7c480a; }
.alert-danger  { background: var(--fb-err-bg);  border-color: var(--fb-err);  color: #8c2820; }

.badge {
  border-radius: var(--fb-pill);
  font-family: var(--fb-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .36em .78em;
}
.badge-primary { background: var(--fb-brand); }
.badge-success { background: var(--fb-ok); }
.badge-warning { background: var(--fb-warn); color: #fff; }
.badge-danger  { background: var(--fb-err); }
.badge-info    { background: var(--fb-info); }

/* Status pill — state readable as shape and colour, not colour alone. */
.fb-status {
  align-items: center;
  border-radius: var(--fb-pill);
  display: inline-flex;
  font-size: .74rem;
  font-weight: 600;
  gap: .4rem;
  padding: .25rem .7rem;
}
.fb-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fb-status-active    { background: var(--fb-ok-bg);   color: var(--fb-ok); }
.fb-status-pending   { background: var(--fb-warn-bg); color: var(--fb-warn); }
.fb-status-suspended { background: var(--fb-err-bg);  color: var(--fb-err); }

/* ==========================================================================
   11. Sidebar
   ========================================================================== */

.sidebar .card,
.panel.card.card-sidebar,
.card-sidebar {
  border-radius: var(--fb-r2);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.card-sidebar .panel-heading,
.card-sidebar .card-header {
  background: var(--fb-brand-wash);
  border-bottom: 1px solid var(--fb-rule-soft);
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding: .8rem 1.1rem;
  text-transform: uppercase;
}
.card-sidebar .list-group-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fb-rule-soft);
  color: var(--fb-slate);
  font-size: .875rem;
  padding: .68rem 1.1rem;
  position: relative;
  transition: background var(--fb-t), color var(--fb-t), padding-left var(--fb-t);
}
.card-sidebar .list-group-item:last-child { border-bottom: 0; }
.card-sidebar .list-group-item:hover {
  background: var(--fb-brand-wash);
  color: var(--fb-ink);
  padding-left: 1.3rem;
}
.card-sidebar .list-group-item.active {
  background: var(--fb-brand-wash);
  color: var(--fb-brand);
  font-weight: 600;
}
.card-sidebar .list-group-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--fb-gold);
}

/* ==========================================================================
   12. Modals, dropdowns, pagination, tabs
   ========================================================================== */

.modal-content {
  border: 0;
  border-radius: var(--fb-r3);
  box-shadow: var(--fb-e4);
  overflow: hidden;
}
.modal-header {
  background: var(--fb-brand-wash);
  border-bottom: 1px solid var(--fb-rule);
  padding: 1.1rem 1.5rem;
}
.modal-title { font-family: var(--fb-display); font-weight: 600; color: var(--fb-ink); }
.modal-body { padding: 1.5rem; }
.modal-footer { background: var(--fb-canvas); border-top: 1px solid var(--fb-rule); padding: 1rem 1.5rem; }
.modal-backdrop.show { opacity: .5; }

.dropdown-menu {
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  box-shadow: var(--fb-e3);
  margin-top: .3rem;
  padding: .45rem;
}
.dropdown-item {
  border-radius: var(--fb-r1);
  color: var(--fb-slate);
  font-size: .875rem;
  font-weight: 500;
  padding: .52rem .75rem;
  transition: background var(--fb-t), color var(--fb-t);
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--fb-brand-wash); color: var(--fb-brand); }
.dropdown-divider { border-top-color: var(--fb-rule-soft); }

.page-link {
  border-color: var(--fb-rule);
  color: var(--fb-slate);
  font-size: .86rem;
}
.page-item.active .page-link {
  background: var(--fb-brand);
  border-color: var(--fb-brand);
}

.nav-tabs { border-bottom: 1px solid var(--fb-rule); }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fb-slate-soft);
  font-family: var(--fb-display);
  font-weight: 500;
  padding: .7rem 1rem;
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--fb-rule); color: var(--fb-ink); }
.nav-tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--fb-gold);
  color: var(--fb-ink);
  font-weight: 600;
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

.fb-footer,
#footer,
#footer.footer {
  background: var(--fb-ink);
  color: rgba(255,255,255,.6);
  margin-top: 0;
  padding: 3rem 0 1.75rem;
}

.fb-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

#footer a,
#footer .nav-link,
.fb-footer a {
  color: rgba(255,255,255,.72);
  font-size: .875rem;
  font-weight: 500;
  transition: color var(--fb-t);
}
#footer a:hover,
#footer .nav-link:hover,
.fb-footer a:hover { color: var(--fb-gold); }

#footer .nav-link { padding: .3rem .85rem; }

#footer .btn,
.fb-footer .btn {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--fb-r1);
  color: rgba(255,255,255,.82);
  font-size: .82rem;
}
#footer .btn:hover,
.fb-footer .btn:hover { background: rgba(255,255,255,.14); color: #fff; }

#footer .copyright,
.fb-footer .copyright {
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45);
  font-size: .8rem;
  margin-top: 1.75rem !important;
  padding-top: 1.5rem;
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
  .main-navbar-wrapper { position: static; }
  .main-navbar-wrapper .nav-link { padding: .75rem .3rem; }
  .main-navbar-wrapper .nav-item > .nav-link::after { display: none; }
  .main-navbar-wrapper .nav-item.active > .nav-link {
    background: var(--fb-brand-wash);
    border-left: 3px solid var(--fb-gold);
    border-radius: 0 var(--fb-r1) var(--fb-r1) 0;
    padding-left: .75rem;
  }
}

@media (max-width: 767.98px) {
  body { font-size: 14.5px; }
  #main-body { padding: 1.5rem 0 2.5rem; }

  /* The console stacks: field on top, actions full-width beneath. */
  .fb-console {
    border-radius: var(--fb-r2);
    flex-direction: column;
    gap: .45rem;
    padding: .55rem;
  }
  .fb-console .form-control {
    font-size: .95rem;
    height: 48px;
    padding: 0 1rem;
    text-align: center;
  }
  .fb-console-actions { width: 100%; }
  .fb-console-actions .btn { flex: 1; padding: .7rem 1rem; }

  .fb-hero::before { width: 380px; height: 380px; top: -160px; right: -120px; }
  .fb-hero::after  { display: none; }

  .fb-actions { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .6rem; }
  .fb-action { min-height: 104px; font-size: .8rem; }

  .card-body { padding: 1.15rem; }
  .fb-tile .card-body { padding: 1.25rem; }

  .table-responsive, .fb-table-wrap { display: block; overflow-x: auto; }

  #footer { padding: 2.25rem 0 1.5rem; text-align: center; }
  .fb-footer-grid { flex-direction: column; gap: 1rem; }
  #footer .float-lg-right { float: none !important; }
}

@media (max-width: 575.98px) {
  .btn { padding: .58rem 1rem; }
  .fb-tlds { gap: .35rem; }
  .fb-tlds li { font-size: .75rem; padding: .3rem .7rem; }
}

/* Comfortable tap targets on touch devices (WCAG 2.5.5). */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-link, .dropdown-item, .list-group-item, .fb-action { min-height: 44px; }
}

/* ==========================================================================
   15. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fb-tile:hover,
  .fb-action:hover,
  .btn:hover,
  .fb-console:focus-within { transform: none !important; }
  .fb-tile::before { transition: none; }
}

@media print {
  #header, .main-navbar-wrapper, #footer, .fb-footer,
  .master-breadcrumb, .fb-hero, .sidebar { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .card { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   16. Order form — pure_comparison
   --------------------------------------------------------------------------
   The store/product-group pages render through templates/orderforms/, not
   through this theme, and that stylesheet loads AFTER this one. Every rule
   below is therefore prefixed with `#order-pure_comparison.page-container`
   (id + class on the same element) to outrank its
   `#order-pure_comparison .price-table-container …` selectors without
   resorting to !important.

   The original lays plans out as fixed 215px inline-blocks, which collapses
   into an unreadable strip past about four products. This replaces that with
   a wrapping grid.
   ========================================================================== */

#order-pure_comparison.page-container {
  padding-top: .5rem;
}

/* Headline above the plans */
#order-pure_comparison.page-container .txt-center h3,
#order-pure_comparison.page-container h3#headline {
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 1.75rem;
}

/* ---- The grid ---------------------------------------------------------- */

#order-pure_comparison.page-container .price-table-container {
  margin: 0;
  padding: 0;
}

#order-pure_comparison.page-container .price-table-container > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

#order-pure_comparison.page-container .price-table-container > ul > li {
  background: none;          /* drops the shadow-btm.png sprite */
  display: block;
  margin: 0;
  padding: 0;
}

/* ---- The card ---------------------------------------------------------- */

#order-pure_comparison.page-container .price-table-container .price-table {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  box-shadow: var(--fb-e1);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: transform var(--fb-t), box-shadow var(--fb-t), border-color var(--fb-t);
  width: auto;               /* was a fixed 215px */
}

/* Gold hairline draws across the top on hover — same language as .fb-tile. */
#order-pure_comparison.page-container .price-table-container .price-table::before {
  background: var(--fb-gold);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--fb-ease);
  z-index: 2;
}
#order-pure_comparison.page-container .price-table-container .price-table:hover::before {
  transform: scaleX(1);
}
#order-pure_comparison.page-container .price-table-container .price-table:hover {
  border-color: var(--fb-brand-pale);
  box-shadow: var(--fb-e3);
  transform: translateY(-3px);
}

/* ---- Card head --------------------------------------------------------- */

#order-pure_comparison.page-container .price-table-container .price-table .top-head {
  background: var(--fb-brand-wash);   /* was a cream gradient */
  border-bottom: 1px solid var(--fb-rule-soft);
  border-radius: 0;
  filter: none;                        /* clears the IE DXImageTransform */
  padding: 1.15rem 1.25rem .95rem;
}

#order-pure_comparison.page-container .price-table-container .price-table .top-head .top-area {
  border-bottom: 0;   /* clears pure_comparison's olive 1px #f1f1b6 rule */
  padding: 0;
}

#order-pure_comparison.page-container .price-table-container .price-table .top-head .top-area h4 {
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0;
  text-shadow: none;
  text-transform: none;
}

/* ---- Feature list ------------------------------------------------------
   The product description is entered in admin as plain lines, so WHMCS emits
   `<ul><br><li>text<br>…` with unclosed items. Browsers repair it into real
   <li> elements; these rules hide the stray <br>s and set the first line —
   the "good for …" tagline — apart from the specs beneath it.
   ------------------------------------------------------------------------ */

#order-pure_comparison.page-container .price-table-container .price-table > ul {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

#order-pure_comparison.page-container .price-table-container .price-table > ul > li {
  border: 0;
  display: block;
  padding: 0;
  text-align: left;
  width: auto;
}

#order-pure_comparison.page-container .price-table-container .price-table ul br {
  display: none;
}

#order-pure_comparison.page-container .price-table-container .price-table > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 1.1rem 1.25rem .25rem;
}

#order-pure_comparison.page-container .price-table-container .price-table > ul > li > ul > li {
  border: 0;
  color: var(--fb-slate);
  display: block;
  font-size: .875rem;
  line-height: 1.5;
  padding: .32rem 0 .32rem 1.5rem;
  position: relative;
  text-align: left;
  width: auto;
}

/* Spec rows get a check; the tagline does not. */
#order-pure_comparison.page-container .price-table-container .price-table > ul > li > ul > li::before {
  color: var(--fb-ok);
  content: "\f00c";                     /* fa-check */
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro";
  font-size: .72rem;
  font-weight: 900;
  left: 0;
  position: absolute;
  top: .45rem;
}

#order-pure_comparison.page-container .price-table-container .price-table > ul > li > ul > li:first-of-type {
  border-bottom: 1px solid var(--fb-rule-soft);
  color: var(--fb-slate-soft);
  font-size: .82rem;
  margin-bottom: .45rem;
  padding-bottom: .7rem;
  padding-left: 0;
}
#order-pure_comparison.page-container .price-table-container .price-table > ul > li > ul > li:first-of-type::before {
  content: none;
}

/* ---- Price & call to action -------------------------------------------- */

#order-pure_comparison.page-container .price-table-container .price-area {
  background: var(--fb-paper);          /* was a cream gradient */
  border-radius: 0;
  border-top: 1px solid var(--fb-rule-soft);
  filter: none;
  margin-top: auto;                     /* pins the CTA to the card foot */
  padding: 1.1rem 1.25rem 1.25rem;
}

#order-pure_comparison.page-container .price-table-container .price-area .price {
  color: var(--fb-ink);
  font-family: var(--fb-mono);
  font-size: .82rem;                    /* the "/yr" suffix */
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding: 0 0 .9rem;
}

#order-pure_comparison.page-container .price-table-container .price-area .price span {
  color: var(--fb-ink);
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
}

#order-pure_comparison.page-container .price-table-container .order-button {
  background: var(--fb-gold);
  border: 0;
  border-radius: var(--fb-r1);
  box-shadow: 0 2px 8px rgba(233,166,60,.32);
  color: var(--fb-ink);
  display: block;
  font-family: var(--fb-display);
  font-size: .875rem;
  font-weight: 600;
  margin: 0;
  padding: .7rem 1rem;
  text-align: center;
  text-shadow: none;
  transition: background var(--fb-t), box-shadow var(--fb-t), transform .15s var(--fb-ease);
}
#order-pure_comparison.page-container .price-table-container .order-button:hover,
#order-pure_comparison.page-container .price-table-container .order-button:focus {
  background: var(--fb-gold-deep);
  box-shadow: 0 6px 18px rgba(233,166,60,.42);
  color: var(--fb-ink);
  transform: translateY(-1px);
}

#order-pure_comparison.page-container .price-table-container .order-button.unavailable,
#order-pure_comparison.page-container .price-table-container .order-button.unavailable:hover {
  background: var(--fb-rule);
  box-shadow: none;
  color: var(--fb-slate-soft);
  cursor: not-allowed;
  transform: none;
}

/* ---- Featured plan ------------------------------------------------------ */

#order-pure_comparison.page-container .price-table-container .price-table.active {
  border-color: var(--fb-gold);
  box-shadow: var(--fb-e3);
  /* pure_comparison scales the featured card 1.08x and adds 15px side margins,
     which breaks it out of its grid cell and lets it cover the strapline
     above. The gold border, tinted head and badge carry the emphasis instead. */
  margin: 0;
  transform: none;
}

/* pure_comparison re-pads the featured card's head at (1,5), which ties with
   our rule and wins on order. This is (1,6), so the heads stay aligned. */
#order-pure_comparison.page-container .price-table-container .price-table.active .top-head .top-area {
  border-bottom: 0;
  padding: 0;
}

/* Its price foot keeps a pink gradient at (1,4); this rule is (1,5). */
#order-pure_comparison.page-container .price-table-container .price-table.active .price-area {
  background: var(--fb-gold-wash);
  filter: none;
}
#order-pure_comparison.page-container .price-table-container .price-table.active::before {
  transform: scaleX(1);
}
#order-pure_comparison.page-container .price-table-container .price-table.active .top-head {
  background: var(--fb-gold-wash);
}

/* ---- "Most popular" badge ----------------------------------------------
   The original is a red ribbon built from three nested divs: an absolutely
   positioned .plan-container inset to left:-5%/width:110% with a PNG shadow
   and a ::before tail, wrapping a red-gradient .txt-container. Because it is
   absolute and wider than its parent, it overhangs the card and collides with
   the heading above.

   The markup sits inside .top-area directly after the <h4>, so unwinding the
   positioning turns it back into a normal-flow element that can simply be a
   pill under the plan name. Specificity has to clear (1,3)/(1,4)/(1,5).
   ------------------------------------------------------------------------ */

#order-pure_comparison.page-container .price-table-container .price-table .popular-plan {
  height: auto;
  margin-top: .5rem;
  position: static;
  width: auto;
}

#order-pure_comparison.page-container .price-table-container .price-table .popular-plan .plan-container {
  background: none;          /* drops shadow-left.png */
  height: auto;
  left: auto;
  position: static;
  top: auto;
  width: auto;
}

/* Kills the ribbon's folded tail. */
#order-pure_comparison.page-container .price-table-container .price-table .popular-plan .plan-container::before,
#order-pure_comparison.page-container .price-table-container .price-table .popular-plan .plan-container::after {
  content: none;
  display: none;
}

#order-pure_comparison.page-container .price-table-container .price-table .popular-plan .plan-container .txt-container {
  background: var(--fb-gold);
  border-radius: var(--fb-pill);
  box-shadow: none;
  color: var(--fb-ink);
  display: inline-block;
  filter: none;              /* clears the IE gradient filter */
  font-family: var(--fb-display);
  font-size: .64rem;
  font-weight: 700;
  height: auto;
  letter-spacing: .12em;
  padding: .2rem .7rem;
  text-shadow: none;
  text-transform: uppercase;
  width: auto;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 991.98px) {
  #order-pure_comparison.page-container .price-table-container > ul {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
  }
}

@media (max-width: 575.98px) {
  #order-pure_comparison.page-container .price-table-container > ul {
    grid-template-columns: 1fr;
  }
  #order-pure_comparison.page-container .price-table-container .price-area .price span {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #order-pure_comparison.page-container .price-table-container .price-table:hover {
    transform: none;
  }
  #order-pure_comparison.page-container .price-table-container .price-table::before {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   16b. Product-selection drawer
   --------------------------------------------------------------------------
   pure_comparison reveals the category sidebar by sliding the WHOLE row 300px
   to the right:

       .row-product-selection      { position: relative; left: 0 }
       .product-selection-sidebar  { position: absolute; left: -300px }
       // and on click: jQuery('.row-product-selection').css('left','300px')

   The sidebar is out of flow and the content column is col-md-12, so nothing
   ever gives up width — opening the menu pushes the plan grid 300px past the
   right edge and the last card is clipped.

   Bootstrap already makes .row a flex container, so the repair is to put the
   sidebar back in flow as a flex item and let the content column take what is
   left. The inner grid is auto-fit, so it simply reflows to fewer columns.

   `left: 0 !important` is unavoidable: jQuery writes `left` as an inline
   style, which nothing but !important can outrank. It is the only place this
   stylesheet uses !important to beat ANOTHER stylesheet — every other
   cross-stylesheet override here wins on specificity alone. (The file's other
   !important declarations are Bootstrap utility overrides and the
   reduced-motion / print blocks, which compete with nothing.)
   -------------------------------------------------------------------------- */

.row-product-selection {
  flex-wrap: nowrap;
  left: 0 !important;
  position: relative;
}

.row-product-selection > .product-selection-sidebar {
  flex: 0 0 clamp(230px, 23%, 290px);
  left: auto;
  max-width: clamp(230px, 23%, 290px);
  padding-right: 1.25rem;
  position: static;
  top: auto;
}

.row-product-selection > .col-md-12 {
  flex: 1 1 auto;
  max-width: 100%;
  /* Flex items default to min-width:auto, which refuses to shrink below the
     grid's intrinsic width and reintroduces the overflow. */
  min-width: 0;
}

/* The toggle button reads as a control rather than a stray default button. */
#btnShowSidebar {
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r1);
  color: var(--fb-slate);
  font-family: var(--fb-display);
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}
#btnShowSidebar:hover {
  background: var(--fb-brand-wash);
  border-color: var(--fb-brand-pale);
  color: var(--fb-brand);
}

/* Below md the sidebar stacks above the plans instead of competing for width. */
@media (max-width: 767.98px) {
  .row-product-selection {
    flex-wrap: wrap;
  }
  .row-product-selection > .product-selection-sidebar,
  .row-product-selection > .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 15px;
  }
}

/* ==========================================================================
   17. Order form — standard_cart (domain search, cart, checkout, config)
   --------------------------------------------------------------------------
   standard_cart's stylesheet loads AFTER this file, so it wins ties. Unlike
   pure_comparison, its container `<div id="order-standard_cart">` carries no
   class, so the id+class trick is unavailable. It does sit inside
   `<section id="main-body">`, so every rule here is prefixed
   `#main-body #order-standard_cart` — two ids, which outranks the single-id
   selectors standard_cart uses throughout. No !important needed.

   Its own palette is amber #ffd960/#ffb201, green #9abb3a, blue #4687ff and a
   grey ramp; all of it is replaced with the theme's navy/amber system.

   CAUTION: .to-add / .loading / .added / .unavailable are state spans inside
   the add-to-cart button, shown one at a time by WHMCS's JS. Colour them, but
   never set `display` on them or the button state machine breaks.
   ========================================================================== */

/* ---- Page frame -------------------------------------------------------- */

#main-body #order-standard_cart {
  color: var(--fb-slate);
  font-family: var(--fb-body);
}

#main-body #order-standard_cart .header-lined {
  border-bottom: 1px solid var(--fb-rule);
  margin-bottom: 1.5rem;
  padding-bottom: .9rem;
}

#main-body #order-standard_cart .header-lined h1,
#main-body #order-standard_cart .font-size-36 {
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
}

#main-body #order-standard_cart .sub-heading,
#main-body #order-standard_cart .sub-heading span {
  color: var(--fb-slate-soft);
  font-family: var(--fb-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- Panels ------------------------------------------------------------ */

#main-body #order-standard_cart .panel,
#main-body #order-standard_cart .panel-default {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  box-shadow: var(--fb-e1);
  margin-bottom: 1.1rem;
  overflow: hidden;
}

#main-body #order-standard_cart .panel-heading,
#main-body #order-standard_cart .card-header {
  background: var(--fb-brand-wash);
  border-bottom: 1px solid var(--fb-rule-soft);
  color: var(--fb-ink);
  padding: .95rem 1.25rem;
}

#main-body #order-standard_cart .panel-title {
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}

#main-body #order-standard_cart .panel-body,
#main-body #order-standard_cart .card-body { padding: 1.25rem; }

#main-body #order-standard_cart .panel-footer {
  background: var(--fb-canvas);
  border-top: 1px solid var(--fb-rule-soft);
  padding: .9rem 1.25rem;
}

/* ---- Domain search ----------------------------------------------------- */

#main-body #order-standard_cart .domain-checker-container,
#main-body #order-standard_cart .domain-checker-bg {
  background: linear-gradient(150deg, var(--fb-ink) 0%, var(--fb-brand) 70%, #0b4a9c 100%);
  border: 0;
  border-radius: var(--fb-r2);
  color: #fff;
  padding: 2rem 1.25rem;
  position: relative;
  overflow: hidden;
}

/* Same orbital motif as the homepage hero, at a smaller scale. */
#main-body #order-standard_cart .domain-checker-bg::before {
  border: 1px solid rgba(233,166,60,.20);
  border-radius: 50%;
  content: "";
  height: 420px;
  position: absolute;
  right: -140px;
  top: -190px;
  width: 420px;
  pointer-events: none;
}

#main-body #order-standard_cart .domain-checker-container h1,
#main-body #order-standard_cart .domain-checker-container h2,
#main-body #order-standard_cart .domain-checker-bg h1,
#main-body #order-standard_cart .domain-checker-bg h2 { color: #fff; }

#main-body #order-standard_cart .domain-checker-bg p,
#main-body #order-standard_cart .domain-checker-bg label { color: rgba(255,255,255,.8); }

/* The search control itself */
#main-body #order-standard_cart .input-group-box {
  background: var(--fb-paper);
  border-radius: var(--fb-pill);
  box-shadow: var(--fb-e4);
  padding: .3rem;
  position: relative;
  z-index: 1;
}

#main-body #order-standard_cart .input-group-box .form-control,
#main-body #order-standard_cart .input-group-box .field {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--fb-ink);
  font-family: var(--fb-mono);
  font-size: 1rem;
  height: 50px;
  padding-left: 1.35rem;
}
#main-body #order-standard_cart .input-group-box .form-control:focus { box-shadow: none; }
#main-body #order-standard_cart .input-group-box .form-control::placeholder {
  color: var(--fb-slate-soft);
  font-family: var(--fb-mono);
}

#main-body #order-standard_cart .domain-check-availability,
#main-body #order-standard_cart .input-group-box .btn-primary {
  background: var(--fb-gold);
  border: 0;
  border-radius: var(--fb-pill);
  box-shadow: none;
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-weight: 600;
  padding: .72rem 1.8rem;
}
#main-body #order-standard_cart .domain-check-availability:hover,
#main-body #order-standard_cart .input-group-box .btn-primary:hover {
  background: var(--fb-gold-deep);
  color: var(--fb-ink);
}

/* ---- Search results ---------------------------------------------------- */

#main-body #order-standard_cart .domain-checker-result-headline,
#main-body #order-standard_cart .headline {
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: 1.05rem;
  font-weight: 600;
}

#main-body #order-standard_cart .domain-lookup-result {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-left: 4px solid var(--fb-rule);
  border-radius: var(--fb-r1);
  box-shadow: var(--fb-e1);
  margin-bottom: .6rem;
  padding: 1rem 1.25rem;
  transition: box-shadow var(--fb-t), border-color var(--fb-t);
}
#main-body #order-standard_cart .domain-lookup-result:hover { box-shadow: var(--fb-e2); }

/* Domain strings are data — set them in mono so they scan down the column. */
#main-body #order-standard_cart .domain-lookup-result .domain,
#main-body #order-standard_cart .product-domain,
#main-body #order-standard_cart .spotlight-tld .domain {
  font-family: var(--fb-mono);
  font-weight: 500;
  letter-spacing: -.01em;
  word-break: break-all;
}

#main-body #order-standard_cart .price,
#main-body #order-standard_cart .cost,
#main-body #order-standard_cart .panel-price {
  color: var(--fb-ink);
  font-family: var(--fb-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* State colours — semantic, and deliberately not the amber accent. */
#main-body #order-standard_cart .domain-checker-available,
#main-body #order-standard_cart .transfer-eligible {
  color: var(--fb-ok);
  font-weight: 600;
}
#main-body #order-standard_cart .domain-checker-unavailable,
#main-body #order-standard_cart .transfer-not-eligible {
  color: var(--fb-err);
  font-weight: 600;
}
#main-body #order-standard_cart .domain-checker-invalid,
#main-body #order-standard_cart .invalid { color: var(--fb-warn); }

/* Colour only — never display; WHMCS toggles these spans itself. */
#main-body #order-standard_cart .to-add { color: inherit; }
#main-body #order-standard_cart .added { color: var(--fb-ok); }
#main-body #order-standard_cart .unavailable { color: var(--fb-slate-soft); }
#main-body #order-standard_cart .loading,
#main-body #order-standard_cart .domain-lookup-loader { color: var(--fb-brand-lift); }

/* ---- Spotlight TLDs ---------------------------------------------------- */

#main-body #order-standard_cart .spotlight-tlds,
#main-body #order-standard_cart .spotlight-tlds-container {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

#main-body #order-standard_cart .spotlight-tld-container,
#main-body #order-standard_cart .spotlight-tld-container-6 {
  flex: 1 1 150px;
  max-width: none;
  padding: 0;
  width: auto;
}

#main-body #order-standard_cart .spotlight-tld {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  box-shadow: var(--fb-e1);
  height: 100%;
  padding: 1rem .9rem;
  text-align: center;
  transition: transform var(--fb-t), box-shadow var(--fb-t), border-color var(--fb-t);
}
#main-body #order-standard_cart .spotlight-tld:hover {
  border-color: var(--fb-brand-pale);
  box-shadow: var(--fb-e3);
  transform: translateY(-3px);
}

#main-body #order-standard_cart .spotlight-tld .btn,
#main-body #order-standard_cart .spotlight-tld .btn:not(.domain-contact-support) {
  background: var(--fb-gold);
  border: 0;
  border-radius: var(--fb-r1);
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: .8rem;
  font-weight: 600;
}
#main-body #order-standard_cart .spotlight-tld .btn:hover { background: var(--fb-gold-deep); }

/* ---- Add to cart / actions --------------------------------------------- */

#main-body #order-standard_cart .btn-add-to-cart,
#main-body #order-standard_cart .btn-primary {
  background: var(--fb-brand);
  border: 0;
  border-radius: var(--fb-r1);
  box-shadow: 0 2px 8px rgba(0,56,128,.22);
  color: #fff;
  font-family: var(--fb-display);
  font-weight: 600;
  transition: background var(--fb-t), box-shadow var(--fb-t), transform .15s var(--fb-ease);
}
#main-body #order-standard_cart .btn-add-to-cart:hover,
#main-body #order-standard_cart .btn-primary:hover {
  background: var(--fb-ink-soft);
  box-shadow: 0 6px 18px rgba(0,56,128,.3);
  color: #fff;
  transform: translateY(-1px);
}

/* The one gold button per screen: the actual checkout commit. */
#main-body #order-standard_cart .btn-checkout,
#main-body #order-standard_cart #btnCompleteOrder,
#main-body #order-standard_cart .checkout-button {
  background: var(--fb-gold);
  box-shadow: 0 2px 8px rgba(233,166,60,.32);
  color: var(--fb-ink);
}
#main-body #order-standard_cart .btn-checkout:hover,
#main-body #order-standard_cart #btnCompleteOrder:hover,
#main-body #order-standard_cart .checkout-button:hover {
  background: var(--fb-gold-deep);
  box-shadow: 0 6px 18px rgba(233,166,60,.42);
  color: var(--fb-ink);
}

#main-body #order-standard_cart .btn-default {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  color: var(--fb-slate);
}
#main-body #order-standard_cart .btn-default:hover {
  background: var(--fb-brand-wash);
  border-color: var(--fb-brand-pale);
  color: var(--fb-brand);
}

#main-body #order-standard_cart .btn-remove-from-cart {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--fb-slate-soft);
  transition: color var(--fb-t);
}
#main-body #order-standard_cart .btn-remove-from-cart:hover {
  background: transparent;
  color: var(--fb-err);
  transform: none;
}

#main-body #order-standard_cart .domain-contact-support {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  color: var(--fb-slate);
}

/* ---- Cart contents & summary ------------------------------------------- */

#main-body #order-standard_cart .view-cart-items-header {
  background: var(--fb-brand-wash);
  border-bottom: 1px solid var(--fb-rule);
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#main-body #order-standard_cart .products .product {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  margin-bottom: .8rem;
}
#main-body #order-standard_cart .products .product header {
  background: var(--fb-brand-wash);
  border-bottom: 1px solid var(--fb-rule-soft);
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-weight: 600;
}
#main-body #order-standard_cart .products .product header span { color: var(--fb-ink); }
#main-body #order-standard_cart .products .product header .qty {
  background: var(--fb-brand);
  border-radius: var(--fb-pill);
  color: #fff;
  font-family: var(--fb-mono);
  font-size: .78rem;
}

#main-body #order-standard_cart .order-summary,
#main-body #order-standard_cart .summary-container {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  box-shadow: var(--fb-e2);
}
#main-body #order-standard_cart .order-summary h2 {
  background: var(--fb-brand-wash);
  border-bottom: 1px solid var(--fb-rule-soft);
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: .95rem;
  font-weight: 600;
  margin: 0;
  padding: .95rem 1.25rem;
}
#main-body #order-standard_cart .order-summary .loader { color: var(--fb-brand-lift); }

#main-body #order-standard_cart .empty-cart .btn {
  background: var(--fb-brand);
  border: 0;
  color: #fff;
}

#main-body #order-standard_cart .product-info,
#main-body #order-standard_cart .apply-credit-container,
#main-body #order-standard_cart .cc-input-container {
  background: var(--fb-canvas);
  border: 1px solid var(--fb-rule-soft);
  border-radius: var(--fb-r1);
  color: var(--fb-slate);
}

/* ---- Add-ons ----------------------------------------------------------- */

#main-body #order-standard_cart .panel-addon {
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
}
#main-body #order-standard_cart .panel-addon .panel-body label { color: var(--fb-slate); }
#main-body #order-standard_cart .panel-addon .panel-add {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r1);
  color: var(--fb-brand);
  font-family: var(--fb-display);
  font-weight: 600;
}
#main-body #order-standard_cart .panel-addon-selected {
  border-color: var(--fb-gold);
  box-shadow: 0 0 0 1px var(--fb-gold);
}
#main-body #order-standard_cart .panel-addon-selected .panel-add {
  background: var(--fb-gold);
  border-color: var(--fb-gold);
  color: var(--fb-ink);
}

/* ---- Domain selection options ------------------------------------------ */

#main-body #order-standard_cart .domain-selection-options .option {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r1);
  color: var(--fb-slate);
  transition: border-color var(--fb-t), background var(--fb-t);
}
#main-body #order-standard_cart .domain-selection-options .option:hover {
  border-color: var(--fb-brand-pale);
}
#main-body #order-standard_cart .domain-selection-options .option-selected {
  background: var(--fb-brand-wash);
  border-color: var(--fb-brand);
  color: var(--fb-ink);
}

/* ---- Fields ------------------------------------------------------------ */

#main-body #order-standard_cart .field,
#main-body #order-standard_cart .form-control,
#main-body #order-standard_cart .custom-select {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r1);
  color: var(--fb-ink);
  font-family: var(--fb-body);
  font-size: .92rem;
  padding: .6rem .9rem;
}
#main-body #order-standard_cart .field:focus,
#main-body #order-standard_cart .form-control:focus {
  border-color: var(--fb-brand-lift);
  box-shadow: 0 0 0 4px rgba(28,95,181,.13);
}
#main-body #order-standard_cart .field[disabled],
#main-body #order-standard_cart .field[readonly] {
  background: var(--fb-canvas);
  color: var(--fb-slate-soft);
}

#main-body #order-standard_cart .prepend-icon .field-icon,
#main-body #order-standard_cart .field-icon i { color: var(--fb-slate-soft); }
#main-body #order-standard_cart .field-help-text { color: var(--fb-slate-soft); font-size: .8rem; }
#main-body #order-standard_cart .field-error-msg { color: var(--fb-err); font-size: .82rem; }

#main-body #order-standard_cart label { color: var(--fb-ink); font-weight: 600; }

/* ---- Sidebar & misc ---------------------------------------------------- */

#main-body #order-standard_cart .slim-alert {
  border-radius: var(--fb-r1);
  font-size: .85rem;
}

#main-body #order-standard_cart .card-minimise,
#main-body #order-standard_cart .panel-minimise { color: var(--fb-slate-soft); }

/* Domain results outside the cart container (domainchecker.php) */
#main-body div.domainresults div:not(.btn-group) { color: var(--fb-slate); }
#main-body div.domainresults .domain { font-family: var(--fb-mono); }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 767.98px) {
  #main-body #order-standard_cart .domain-checker-container,
  #main-body #order-standard_cart .domain-checker-bg { padding: 1.5rem 1rem; }

  #main-body #order-standard_cart .input-group-box {
    border-radius: var(--fb-r2);
    padding: .5rem;
  }
  #main-body #order-standard_cart .input-group-box .form-control {
    font-size: .95rem;
    height: 46px;
    padding-left: 1rem;
  }
  #main-body #order-standard_cart .domain-check-availability { width: 100%; }

  #main-body #order-standard_cart .spotlight-tld-container,
  #main-body #order-standard_cart .spotlight-tld-container-6 { flex: 1 1 132px; }

  #main-body #order-standard_cart .panel-body,
  #main-body #order-standard_cart .card-body { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  #main-body #order-standard_cart .spotlight-tld:hover,
  #main-body #order-standard_cart .btn-add-to-cart:hover,
  #main-body #order-standard_cart .btn-primary:hover { transform: none; }
}

/* ==========================================================================
   14. Legal pages (terms, privacy, AUP)
   --------------------------------------------------------------------------
   Long-form reading, so this deliberately breaks the client-area grid: a
   measure capped near 74ch, larger leading than the rest of the app, and
   numbered clauses that hang so the numbers form a scannable left edge.
   ========================================================================== */

.fb-legal {
  max-width: 74ch;
  margin: 0 auto;
  padding: 0 0 3rem;
  color: var(--fb-slate);
  font-size: 15px;
  line-height: 1.78;
}

.fb-legal-head { margin-bottom: 1.75rem; }
.fb-legal-head h1 { margin: .35rem 0 .5rem; }

.fb-legal-meta {
  color: var(--fb-slate-soft);
  font-size: .875rem;
  margin: 0;
}

.fb-legal-callout {
  background: var(--fb-gold-wash);
  border-left: 3px solid var(--fb-gold);
  border-radius: 0 var(--fb-r1) var(--fb-r1) 0;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: .93rem;
}

/* Contents — two columns where there is room; the ol numbers double as the
   clause numbers used throughout the document. */
.fb-legal-index {
  background: var(--fb-paper);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-r2);
  box-shadow: var(--fb-e1);
  padding: 1.35rem 1.5rem;
  margin-bottom: 2.5rem;
}

.fb-legal-index > b {
  display: block;
  font-family: var(--fb-display);
  color: var(--fb-ink);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.fb-legal-index ol {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  padding-left: 1.35rem;
  font-size: .9rem;
  line-height: 1.85;
}

.fb-legal-index li { break-inside: avoid; }
.fb-legal-index a { color: var(--fb-slate); }
.fb-legal-index a:hover { color: var(--fb-brand-lift); }

.fb-legal section {
  padding-top: 1.75rem;
  margin-top: 1.75rem;
  border-top: 1px solid var(--fb-rule-soft);
  /* Anchor jumps from the contents list must clear the sticky masthead. */
  scroll-margin-top: 90px;
}

.fb-legal section:first-of-type { border-top: 0; }

.fb-legal h2 {
  font-size: 1.18rem;
  margin-bottom: .9rem;
}

.fb-legal p { margin-bottom: .85rem; }
.fb-legal b { color: var(--fb-ink); font-weight: 600; }

.fb-legal ul {
  padding-left: 1.15rem;
  margin-bottom: .85rem;
}

.fb-legal ul li { margin-bottom: .4rem; }
.fb-legal ul li::marker { color: var(--fb-gold-deep); }

.fb-legal-foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fb-rule);
  color: var(--fb-ink);
  font-family: var(--fb-display);
  font-size: .95rem;
}

@media (max-width: 575.98px) {
  .fb-legal-index ol { columns: 1; }
}

/* Clients ask for signed PDFs of this page — make the print copy usable. */
@media print {
  .fb-legal { max-width: none; font-size: 10.5pt; line-height: 1.5; }
  .fb-legal-index, .fb-topbar, .fb-masthead, .fb-footer, .sidebar { display: none; }
  .fb-legal section { break-inside: auto; border-top: 0; padding-top: .75rem; margin-top: .75rem; }
  .fb-legal h2 { break-after: avoid; font-size: 12pt; }
  .fb-legal-callout { border: 1px solid #999; background: none; }
  .fb-legal a { color: inherit; text-decoration: none; }
}