/* Fair E Web Host Account Hub v15 — self-contained client-only presentation.
   Base portal CSS and all payment, service, domain and checkout logic remain in place. */
body.fwh-client {
  --fwh-sidebar: 280px;
  --fwh-hub-navy: #101d28;
  --fwh-hub-deep: #0b151e;
  --fwh-hub-green: #48d28a;
  --fwh-hub-ink: #162b39;
  --fwh-hub-line: #dfe8eb;
  background:#f5f8fa !important;
}
body.fwh-client .fwh-topbar {
  background:#101d28 !important;
  border-color:#23313b !important;
  box-shadow:0 2px 18px rgba(4,16,25,.08);
}
body.fwh-client .fwh-topbar-inner { min-height:70px; }
body.fwh-client .fwh-brand-link { flex:0 0 auto; min-width:0; width:auto; }
body.fwh-client .fwh-brand-context { color:#9cbbc4; font-weight:750; letter-spacing:.02em; }
/* The full functional navigation lives in the sidebar; avoid duplicate desktop mega-menus. */
body.fwh-client .fwh-global-tabs { display:none !important; }
body.fwh-client .fwh-topbar .fwh12-quicklinks a { color:#dbe9e9 !important; }
body.fwh-client .fwh-topbar .fwh12-quicklinks a:hover { background:#263c46 !important; color:#fff !important; }
body.fwh-client .fwh-topbar :is(.fwh-menu-button,.fwh-icon-button,.fwh-user-button) { color:#e1ecee !important; }
body.fwh-client .fwh-topbar .fwh-icon-button:hover,
body.fwh-client .fwh-topbar .fwh-user-button:hover { background:#263c46 !important; }
body.fwh-client .fwh-topbar .fwh-user-copy strong { color:#fff !important; }
body.fwh-client .fwh-topbar .fwh-user-copy span { color:#a4b7c0 !important; }
body.fwh-client .fwh-topbar .fwh-search-input { background:#192c38 !important; color:#f4fafb !important; border-color:#374a56 !important; }
body.fwh-client .fwh-topbar .fwh-search-input::placeholder { color:#b6c7cf; }
body.fwh-client .fwh-topbar .fwh-search-icon { color:#a8bbc7; }
body.fwh-client .fwh-search-kbd { color:#b1c1c8; }
body.fwh-client .fwh-sidebar.fwh-hub-sidebar {
  display:flex; flex-direction:column; width:var(--fwh-sidebar);
  padding:16px 12px 14px; background:var(--fwh-hub-navy); color:#e6eff0;
  border-right:1px solid #293944; box-shadow:none; scrollbar-width:thin;
  scrollbar-color:#48616a transparent; overflow-x:hidden;
}
body.fwh-client .fwh-hub-sidebar .fwh-hub-sidebar-top { padding:4px 6px 14px; border-bottom:1px solid #2a3a45; }
body.fwh-client .fwh-hub-sidebar-eyebrow { color:#7ba49c; font-size:.67rem; letter-spacing:.13em; font-weight:850; }
body.fwh-client .fwh-hub-sidebar-title { margin:4px 0 15px; font-size:1.22rem; line-height:1.25; font-weight:850; color:#fff; }
body.fwh-client .fwh-hub-filter-wrap {
  position:relative; display:block; margin:0; color:#8fa8b1;
}
body.fwh-client .fwh-hub-filter-wrap > i { position:absolute; z-index:1; left:12px; top:12px; font-size:12px; }
body.fwh-client .fwh-hub-filter-wrap input {
  display:block; width:100%; min-width:0; height:39px; border:1px solid #36505c;
  border-radius:10px; background:#1a2d39; color:#f6fbfc; padding:7px 32px 7px 34px; font-size:.79rem;
}
body.fwh-client .fwh-hub-filter-wrap input::placeholder { color:#b0c0c5; }
body.fwh-client .fwh-hub-filter-wrap input:focus { border-color:var(--fwh-hub-green); outline:2px solid #48d28a44; }
body.fwh-client .fwh-hub-filter-shortcut { position:absolute; right:11px; top:9px; font-size:.72rem; color:#9eb9bb; }
body.fwh-client .fwh-hub-side-nav { padding:10px 1px 0; display:block; }
body.fwh-client .fwh-hub-sidebar .fwh-side-link {
  min-height:38px; font-weight:610; padding:8px 10px; font-size:.8rem;
  color:#c6d8dc; display:flex; align-items:center; border-radius:9px;
  transition:color .14s ease, background .14s ease; text-decoration:none;
  margin:1px 0; line-height:1.22;
}
body.fwh-client .fwh-hub-sidebar .fwh-side-link > i { width:19px; flex:0 0 19px; color:#9fb4bd; font-size:13px; }
body.fwh-client .fwh-hub-sidebar .fwh-side-link > span { flex:1; min-width:0; }
body.fwh-client .fwh-hub-sidebar .fwh-side-link:hover,
body.fwh-client .fwh-hub-sidebar .fwh-side-link:focus-visible { background:#263e49; color:#fff; }
body.fwh-client .fwh-hub-sidebar .fwh-side-link.active {
  background:#1c5346; color:#f5fffa; box-shadow:inset 3px 0 0 #63e0a2; font-weight:775;
}
body.fwh-client .fwh-hub-sidebar .fwh-side-link.active > i { color:#7bf4b7; }
body.fwh-client .fwh-hub-home { margin-bottom:11px !important; }
body.fwh-client .fwh-hub-favourites { margin:4px 1px 11px; padding:10px 8px; background:#152833; border:1px solid #2a4350; border-radius:11px; }
body.fwh-client .fwh-hub-section-header { display:flex; gap:7px; align-items:center; justify-content:space-between; padding:1px 3px 5px; color:#d2e3e4; font-size:.73rem; font-weight:820; }
body.fwh-client .fwh-hub-section-header small { color:#92abb6; font-size:.62rem; font-weight:500; }
body.fwh-client .fwh-hub-favourite-list { display:grid; gap:2px; }
body.fwh-client .fwh-hub-favourite-list .fwh-side-link { min-height:32px; padding:6px 7px; }
body.fwh-client .fwh-hub-favourite-help { color:#9eb4bc; margin:2px 3px 0; font-size:.69rem; line-height:1.4; }
body.fwh-client .fwh-hub-group { margin:2px 0; border-radius:10px; }
body.fwh-client .fwh-hub-group-heading {
  display:flex; align-items:center; gap:9px; color:#a8c2c6; font-size:.73rem; font-weight:820;
  padding:10px 9px; margin:0; list-style:none; cursor:pointer; border-radius:9px;
  user-select:none;
}
body.fwh-client .fwh-hub-group-heading::-webkit-details-marker { display:none; }
body.fwh-client .fwh-hub-group-heading::marker { content:''; }
body.fwh-client .fwh-hub-group-heading:hover { background:#1d3340; color:#fff; }
body.fwh-client .fwh-hub-group-heading > i:first-child { font-size:12px; width:17px; text-align:center; }
body.fwh-client .fwh-hub-chevron { margin-left:auto; font-size:10px; transition:transform .17s ease; }
body.fwh-client .fwh-hub-group[open] .fwh-hub-chevron { transform:rotate(180deg); }
body.fwh-client .fwh-hub-group-items { padding:0 0 7px 10px; }
body.fwh-client .fwh-hub-entry { display:flex; gap:0; min-width:0; align-items:center; border-radius:9px; }
body.fwh-client .fwh-hub-entry[hidden], body.fwh-client .fwh-hub-group[hidden] { display:none !important; }
body.fwh-client .fwh-hub-entry > .fwh-side-link { flex:1; min-width:0; }
body.fwh-client .fwh-hub-star {
  flex:0 0 27px; width:27px; height:29px; margin-left:1px; padding:0; border:0;
  background:transparent; color:#91a8b1; border-radius:7px; opacity:.25; display:grid; place-items:center;
}
body.fwh-client .fwh-hub-star:hover, body.fwh-client .fwh-hub-star:focus-visible,
body.fwh-client .fwh-hub-star[aria-pressed="true"] { opacity:1; color:#99efc0; background:#254536; }
body.fwh-client .fwh-hub-entry:hover .fwh-hub-star,
body.fwh-client .fwh-hub-entry:focus-within .fwh-hub-star { opacity:1; }
body.fwh-client .fwh-hub-roadmap { margin-top:12px; border-top:1px solid #2b3d45; padding-top:6px; }
body.fwh-client .fwh-hub-planned-pill { font-size:.59rem; border:1px solid #4d6873; border-radius:99px; color:#a6c3ca; padding:1px 6px; font-weight:650; }
body.fwh-client .fwh-hub-roadmap-items { display:grid; gap:9px; padding:6px 10px 16px 34px; }
body.fwh-client .fwh-hub-roadmap-items > span { color:#a7b9c0; font-size:.72rem; line-height:1.3; }
body.fwh-client .fwh-hub-roadmap-items > p { margin:0; color:#89b0a7; font-size:.69rem; line-height:1.4; }
body.fwh-client .fwh-hub-sidebar .fwh-sidebar-footer { margin-top:14px; padding:14px 3px 0; border-color:#2b3c46; }
body.fwh-client .fwh-hub-help-card { display:flex; gap:11px; padding:13px 10px; background:#203b40; border:1px solid #36565b; border-radius:11px; }
body.fwh-client .fwh-hub-help-card > i { color:#78d6a3; font-size:17px; margin-top:2px; }
body.fwh-client .fwh-hub-help-card div { display:grid; gap:4px; }
body.fwh-client .fwh-hub-help-card strong { font-size:.78rem; color:#fff; }
body.fwh-client .fwh-hub-help-card span { font-size:.7rem; line-height:1.4; color:#bcd0d1; }
body.fwh-client .fwh-hub-help-card a { font-size:.73rem; color:#96e6b8; font-weight:730; text-decoration:none; }
body.fwh-client .fwh-hub-footer-link { display:flex; align-items:center; gap:9px; color:#b4c9cb; font-size:.75rem; text-decoration:none; margin:10px 7px; }
body.fwh-client .fwh-hub-footer-link > i:last-child { margin-left:auto; }
body.fwh-client .fwh-hub-footer-link:hover { color:#fff; }
body.fwh-client .fwh-hub-sidebar :is(a,button,summary,input):focus-visible { outline:2px solid #73eeaf; outline-offset:2px; }
/* Main Account Hub welcome and task summaries */
body.fwh-client .fwh-hub-welcome {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:clamp(22px,2.5vw,36px); margin-bottom:20px; color:#fff;
  background:linear-gradient(112deg,#10352d 0%,#123a46 70%,#124f44 100%);
  border-radius:19px; box-shadow:0 13px 36px rgba(19,57,52,.11);
}
body.fwh-client .fwh-hub-welcome .fwh-hub-eyebrow { font-size:.66rem; font-weight:850; letter-spacing:.15em; color:#98e3bd; margin-bottom:8px; text-transform:uppercase; }
body.fwh-client .fwh-hub-welcome h1 { font-size:clamp(1.55rem,2.8vw,2.2rem); font-weight:830; color:#fff; letter-spacing:-.04em; margin:0 0 10px; line-height:1.2; }
body.fwh-client .fwh-hub-welcome p { color:#d3e6e6; font-size:.87rem; max-width:60ch; margin:0; }
body.fwh-client .fwh-hub-welcome-actions { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px; }
body.fwh-client .fwh-hub-welcome-actions a { color:#fff; background:#ffffff13; text-decoration:none; border:1px solid #ffffff39; padding:10px 14px; border-radius:10px; font-size:.77rem; font-weight:750; white-space:nowrap; }
body.fwh-client .fwh-hub-welcome-actions a:first-child { background:#75e5aa; color:#102e27; border-color:#75e5aa; }
body.fwh-client .fwh-hub-welcome-actions a:hover { filter:brightness(1.1); }
body.fwh-client .fwh-hub-task-panel { background:#fff; border:1px solid var(--fwh-hub-line); border-radius:16px; padding:19px 21px; margin-bottom:21px; }
body.fwh-client .fwh-hub-task-heading { display:flex; gap:10px; justify-content:space-between; align-items:center; margin:0 0 12px; }
body.fwh-client .fwh-hub-task-heading h2 { font-weight:800; color:var(--fwh-hub-ink); font-size:1.01rem; margin:0; }
body.fwh-client .fwh-hub-task-heading span { font-size:.73rem; color:#536b77; }
body.fwh-client .fwh-hub-tasks { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:9px; }
body.fwh-client .fwh-hub-task { display:flex; gap:10px; align-items:flex-start; padding:12px; text-decoration:none; background:#f6faf9; border:1px solid #e1ebea; border-radius:11px; color:#153244; }
body.fwh-client .fwh-hub-task:hover { background:#eaf8f0; border-color:#abd8bd; }
body.fwh-client .fwh-hub-task > i { color:#0d9252; margin-top:2px; }
body.fwh-client .fwh-hub-task div { display:grid; gap:3px; }
body.fwh-client .fwh-hub-task strong { font-size:.78rem; font-weight:780; }
body.fwh-client .fwh-hub-task small { font-size:.71rem; color:#5c7180; line-height:1.35; }
/* Billing Centre: scoped, not re-theming shared invoice/payment views. */
body.fwh-client .fwh-hub-billing { width:100%; padding:4px 0 16px; }
body.fwh-client .fwh-hub-billing-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 29px; border-radius:17px; margin:0 0 20px; color:#fff; background:linear-gradient(115deg,#10382f,#144753); }
body.fwh-client .fwh-hub-billing-hero .fwh-hub-eyebrow { font-size:.67rem; color:#a4e9c2; font-weight:850; text-transform:uppercase; letter-spacing:.13em; margin:0 0 7px; }
body.fwh-client .fwh-hub-billing-hero h1 { color:#fff !important; font-size:clamp(1.55rem,2.7vw,2.2rem); line-height:1.23; font-weight:820; margin:0 0 8px; }
body.fwh-client .fwh-hub-billing-hero p { color:#d9e8e9 !important; margin:0; font-size:.87rem; }
body.fwh-client .fwh-hub-billing-actions { display:flex; flex-wrap:wrap; gap:8px; }
body.fwh-client .fwh-hub-billing-actions a { text-decoration:none; color:#fff; padding:9px 12px; border-radius:10px; border:1px solid #91b5ac70; font-size:.77rem; font-weight:770; }
body.fwh-client .fwh-hub-billing-actions a:first-child { background:#8cebba; color:#15372e; border-color:#8cebba; }
body.fwh-client .fwh-hub-billing-actions a:hover { filter:brightness(1.08); }
body.fwh-client .fwh-hub-finance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:18px; }
body.fwh-client .fwh-hub-finance-kpi { display:flex; gap:12px; min-width:0; border:1px solid var(--fwh-hub-line); border-radius:13px; background:#fff; padding:17px; }
body.fwh-client .fwh-hub-finance-kpi > i { background:#edf7f1; color:#158249; flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; font-size:16px; border-radius:11px; }
body.fwh-client .fwh-hub-finance-kpi.is-due > i { background:#fff3e8; color:#9c5b0a; }
body.fwh-client .fwh-hub-finance-kpi > div { min-width:0; }
body.fwh-client .fwh-hub-finance-kpi span { font-size:.74rem; color:#637785; font-weight:700; }
body.fwh-client .fwh-hub-finance-kpi strong { display:block; font-size:1.46rem; font-weight:820; line-height:1.27; color:#162d3d; margin:3px 0 2px; }
body.fwh-client .fwh-hub-finance-kpi small { display:block; font-size:.69rem; color:#6c808b; line-height:1.36; }
body.fwh-client .fwh-hub-billing-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:20px; }
body.fwh-client .fwh-hub-billing-links a { display:flex; flex-wrap:wrap; align-items:center; gap:9px; text-decoration:none; background:#fff; color:#163646; border:1px solid var(--fwh-hub-line); padding:15px 13px; border-radius:12px; font-size:.75rem; font-weight:780; }
body.fwh-client .fwh-hub-billing-links a i { color:#13824b; font-size:15px; }
body.fwh-client .fwh-hub-billing-links a:hover { border-color:#7dc69a; background:#f7fcf8; }
body.fwh-client .fwh-hub-billing-links a i:last-child { color:#7a9095; font-size:11px; margin-left:auto; }
body.fwh-client .fwh-hub-due-notice { display:flex; gap:11px; align-items:center; flex-wrap:wrap; background:#fff6e8; border:1px solid #edd5a7; color:#6d460f; border-radius:12px; padding:12px 15px; margin-bottom:17px; font-size:.78rem; }
body.fwh-client .fwh-hub-due-notice > a { margin-left:auto; font-weight:780; color:#724a0d; }
body.fwh-client .fwh-hub-finance-panel { border:1px solid var(--fwh-hub-line); border-radius:15px; background:#fff; overflow:hidden; margin-bottom:18px; }
body.fwh-client .fwh-hub-finance-panel-head { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--fwh-hub-line); }
body.fwh-client .fwh-hub-finance-panel-head h2 { font-size:.99rem; font-weight:830; color:#173343; margin:0; }
body.fwh-client .fwh-hub-finance-panel-head p { font-size:.73rem; color:#687b85; margin:4px 0 0; }
body.fwh-client .fwh-hub-finance-panel-head > a { font-weight:760; white-space:nowrap; font-size:.74rem; color:#136b45; text-decoration:none; }
body.fwh-client .fwh-hub-finance-panel .table { margin:0; }
body.fwh-client .fwh-hub-finance-panel .table th { background:#f8fbfb; color:#657b84; padding:12px 16px; font-size:.69rem; font-weight:820; border-color:#ecf1f2; white-space:nowrap; }
body.fwh-client .fwh-hub-finance-panel .table td { padding:15px 16px; font-size:.77rem; vertical-align:middle; color:#264050; border-color:#ecf1f2; }
body.fwh-client .fwh-hub-finance-panel .table td a { color:#096e45; font-weight:730; }
body.fwh-client .fwh-hub-status { display:inline-flex; border-radius:999px; padding:4px 8px; font-size:.66rem; font-weight:820; background:#fff1d9; color:#845000; }
body.fwh-client .fwh-hub-status.is-paid { background:#e5f8ed; color:#156b3f; }
body.fwh-client .fwh-hub-status.is-cancelled { background:#edf2f4; color:#59717d; }
body.fwh-client .fwh-hub-finance-bottom { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(245px,1fr); gap:17px; }
body.fwh-client .fwh-hub-pay-options { display:grid; gap:12px; padding:19px 20px; }
body.fwh-client .fwh-hub-pay-method { display:flex; gap:11px; align-items:flex-start; }
body.fwh-client .fwh-hub-pay-method > i { width:29px; color:#16784a; font-size:21px; text-align:center; }
body.fwh-client .fwh-hub-pay-method strong { display:block; font-size:.8rem; color:#1c3947; }
body.fwh-client .fwh-hub-pay-method small { display:block; color:#71858f; font-size:.71rem; line-height:1.42; }
body.fwh-client .fwh-hub-empty { padding:28px 20px; text-align:center; color:#72838c; font-size:.82rem; }
body.fwh-client .fwh-hub-payment-note { padding:13px 16px; font-size:.73rem; line-height:1.55; background:#f3f8f8; border:1px solid var(--fwh-hub-line); border-radius:11px; color:#536875; margin:0 0 13px; }
body.fwh-client .fwh-hub-scroll-target { position:relative; top:-88px; height:0; }
/* More visible scrollbars and reduced-motion support. */
@media(max-width:1220px) { body.fwh-client .fwh-topbar .fwh12-quicklinks { display:none !important; } }
@media(max-width:1180px) {
  body.fwh-client .fwh-sidebar.fwh-hub-sidebar { width:min(320px,calc(100vw - 44px)); }
  body.fwh-client .fwh-main { margin-left:0 !important; }
}
@media(max-width:820px) {
  body.fwh-client .fwh-hub-welcome, body.fwh-client .fwh-hub-billing-hero { flex-direction:column; align-items:stretch; }
  body.fwh-client .fwh-hub-finance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.fwh-client .fwh-hub-billing-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.fwh-client .fwh-hub-finance-bottom { grid-template-columns:1fr; }
}
@media(max-width:520px) {
  body.fwh-client .fwh-hub-welcome, body.fwh-client .fwh-hub-billing-hero { padding:20px 17px; border-radius:13px; }
  body.fwh-client .fwh-hub-task-panel { padding:15px; }
  body.fwh-client .fwh-hub-task-heading { align-items:flex-start; flex-direction:column; gap:3px; }
  body.fwh-client .fwh-hub-finance-grid { grid-template-columns:1fr; }
  body.fwh-client .fwh-hub-billing-links { grid-template-columns:1fr 1fr; }
  body.fwh-client .fwh-hub-billing-links a { min-height:60px; }
  body.fwh-client .fwh-hub-finance-panel-head { align-items:flex-start; }
  body.fwh-client .fwh-topbar .fwh-brand-context { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  body.fwh-client .fwh-hub-chevron, body.fwh-client .fwh-hub-star { transition:none; }
}