/* ============================================================
   SANKOHOST — Six Theme Brand Layer v3.0
   File: /public_html/whmcs/templates/six/css/custom.css

   CHANGES IN v3:
   - All blues/teals → green (#1A8C3A family)
   - Adinkra texture on store page body
   - Footer: explanation + branded footer via WHMCS Footer Text
   - Sankofa logo below "Powered by" text
   - Feature list items 20% more compact
   - White text on all sidebar panel headings (confirmed fix)
   ============================================================ */

/* ── BRAND TOKENS ─────────────────────────────────────────── */
:root {
  --sk-gold:         #D4860A;
  --sk-gold-bright:  #F5A623;
  --sk-gold-soft:    rgba(212,134,10,0.10);
  --sk-dark:         #141728;
  --sk-dark2:        #0E1220;
  --sk-dark-border:  #1E2845;
  --sk-green:        #1A8C3A;   /* primary green — Order Now */
  --sk-green-dark:   #145f2c;   /* hover state */
  --sk-green-mid:    #1d7a33;   /* replaces #006687 nav */
  --sk-green-light:  #2da34f;   /* replaces #25a2c7 action bar */
  --sk-green-deep:   #0d4a20;   /* replaces #043d5f dark banner */
  --sk-green-teal:   #1e9e45;   /* replaces #319FC3 sidebar active */
  --sk-red:          #C0323E;
}

/* ============================================================
   KENTE STRIP — fixed top bar
   ============================================================ */
body::before {
  content: '';
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 99999;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    #F5A623 0,    #F5A623 10px,
    #E63946 10px, #E63946 18px,
    #D4C5A9 18px, #D4C5A9 22px,
    #2DC653 22px, #2DC653 30px,
    #D4C5A9 30px, #D4C5A9 34px,
    #38BDF8 34px, #38BDF8 42px,
    #D4C5A9 42px, #D4C5A9 46px
  );
}
section#header { margin-top: 4px; }

/* ============================================================
   HEADER
   ============================================================ */
section#header {
  background-color: var(--sk-dark) !important;
  border-bottom: 1px solid var(--sk-dark-border) !important;
  padding: 10px 0 !important;
}
section#header .logo img {
  max-height: 44px !important;
  filter: drop-shadow(0 0 8px rgba(245,166,35,0.18));
}
section#header, section#header a { color: #94A3B8 !important; }
section#header a:hover { color: #F5A623 !important; }
section#header .search .form-control {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--sk-dark-border) !important;
  color: #F8FAFC !important;
}
section#header .search .btn {
  background-color: rgba(255,255,255,0.07) !important;
  border-color: var(--sk-dark-border) !important;
  color: #94A3B8 !important;
}
section#header .btn-default {
  border-color: var(--sk-dark-border) !important;
  color: #94A3B8 !important;
  background: transparent !important;
}
section#header .btn-default:hover {
  color: #F5A623 !important;
  border-color: var(--sk-gold) !important;
}
section#header .btn-primary,
section#header .btn-info {
  background-color: var(--sk-gold) !important;
  border-color: var(--sk-gold) !important;
  color: #fff !important;
}
section#header .btn-primary:hover { background-color: var(--sk-gold-bright) !important; }

/* ============================================================
   MAIN NAV — dark, gold hover
   ============================================================ */
section#main-menu {
  background-color: var(--sk-dark) !important;
  border-bottom: 1px solid var(--sk-dark-border) !important;
}
section#main-menu .navbar-nav > li > a {
  color: #94A3B8 !important;
  transition: color 0.2s, background 0.2s;
}
section#main-menu .navbar-nav > li > a:hover,
section#main-menu .navbar-nav > li > a:focus,
section#main-menu .navbar-nav > li.active > a,
section#main-menu .navbar-nav > li.open > a {
  color: #F5A623 !important;
  background-color: rgba(255,255,255,0.07) !important;
}
section#main-menu .dropdown-menu {
  background-color: var(--sk-dark2) !important;
  border: 1px solid var(--sk-dark-border) !important;
  border-top: none !important;
}
section#main-menu .navbar-nav .dropdown-menu > li > a {
  color: #CBD5E1 !important;
}
section#main-menu .navbar-nav .dropdown-menu > li > a:hover,
section#main-menu .navbar-nav .dropdown-menu > li > a:focus {
  color: #F5A623 !important;
  background-color: rgba(255,255,255,0.07) !important;
}

/* ============================================================
   REPLACE ALL BLUES WITH GREEN
   Targeting every blue/teal class in Six's styles.css
   ============================================================ */

/* --- Nav bar blue #006687 → green --- */
.navbar-main {
  background-color: var(--sk-dark) !important;
}
.navbar-main li.account {
  background-color: var(--sk-dark2) !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .open > a {
  background-color: var(--sk-green-dark) !important;
}

/* --- Home banner #043d5f → dark green --- */
section#home-banner {
  background-color: var(--sk-dark) !important;
  position: relative;
  overflow: hidden;
}

/* Adinkra texture on banner */
section#home-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='28' fill='none' stroke='%23F5A623' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='40' r='18' fill='none' stroke='%23F5A623' stroke-width='1'/%3E%3Cline x1='40' y1='12' x2='40' y2='68' stroke='%23F5A623' stroke-width='1'/%3E%3Cline x1='12' y1='40' x2='68' y2='40' stroke='%23F5A623' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%23F5A623'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* --- Home shortcuts bar #25a2c7 → green --- */
.home-shortcuts {
  background: var(--sk-green) !important;
}
.home-shortcuts li {
  border-right-color: var(--sk-green-dark) !important;
}
.home-shortcuts li:first-child {
  border-left-color: var(--sk-green-dark) !important;
}
@media (max-width: 767px) {
  .home-shortcuts li {
    border-bottom-color: var(--sk-green-dark) !important;
  }
}

/* --- text-domain teal #006687 → gold --- */
.text-domain { color: var(--sk-gold) !important; }

/* --- Tooltips teal → green --- */
section#home-banner .tooltip-inner { background-color: var(--sk-green) !important; }
section#home-banner .tooltip.left .tooltip-arrow { border-left-color: var(--sk-green) !important; }
section#home-banner .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--sk-green) !important; }
section#home-banner .tooltip.right .tooltip-arrow { border-right-color: var(--sk-green) !important; }

/* --- Info colours Bootstrap → green --- */
.text-info { color: var(--sk-green) !important; }
.bg-info    { background-color: var(--sk-green) !important; }
.label-info, .badge-info { background-color: var(--sk-green) !important; }
.alert-info {
  background-color: rgba(26,140,58,0.08) !important;
  border-color: rgba(26,140,58,0.25) !important;
  color: #145A2A !important;
}

/* --- Bootstrap primary → gold --- */
.text-primary { color: var(--sk-gold) !important; }
.bg-primary    { background-color: var(--sk-gold) !important; }
.label-primary, .badge-primary { background-color: var(--sk-gold) !important; }

/* --- Pagination teal → gold --- */
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--sk-gold) !important;
  border-color: var(--sk-gold) !important;
  color: #fff !important;
}
.pagination > li > a:hover,
.pagination > li > a:focus {
  color: var(--sk-gold) !important;
  border-color: var(--sk-gold) !important;
}
/* overrides.css pagination */
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--sk-gold) !important;
  border-color: var(--sk-gold) !important;
}

/* --- Navbar dropdown hover → green --- */
.navbar-main .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--sk-green) !important;
  color: #fff !important;
}

/* --- upgrade product header #2b5580 → dark --- */
.upgrade .products .product .header {
  background-color: var(--sk-dark) !important;
}
.upgrade .products .product .btn {
  background-color: var(--sk-green) !important;
  border-color: var(--sk-green) !important;
}

/* --- Global links --- */
a { color: var(--sk-gold) !important; }
a:hover { color: var(--sk-gold-bright) !important; }

/* ============================================================
   SIDEBAR — gold panel headers with WHITE text
   ============================================================ */
.panel-sidebar > .panel-heading {
  background-color: var(--sk-gold) !important;
  border-bottom: none !important;
}
.panel-sidebar .panel-title,
.panel-sidebar > .panel-heading,
.panel-sidebar > .panel-heading * {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.panel-sidebar .panel-minimise {
  color: rgba(255,255,255,0.55) !important;
}

/* Sidebar selected — gold replaces #319FC3 */
div.sidebar .list-group-item-selected {
  background-color: var(--sk-gold) !important;
  color: #FFFFFF !important;
  border-color: var(--sk-gold) !important;
  font-weight: 600 !important;
}
div.sidebar .list-group-item-selected .badge {
  background-color: rgba(0,0,0,0.25) !important;
  color: #FFFFFF !important;
}
/* overrides.css active list-group-item #465054 → gold */
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background-color: var(--sk-gold) !important;
  border-color: var(--sk-gold) !important;
  color: #FFFFFF !important;
}
.panel-sidebar a.list-group-item:hover {
  background-color: var(--sk-gold-soft) !important;
  color: var(--sk-gold) !important;
}
.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active:hover {
  background-color: var(--sk-gold) !important;
  border-color: var(--sk-gold) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background-color: var(--sk-gold) !important;
  border-color: var(--sk-gold) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--sk-gold-bright) !important;
  border-color: var(--sk-gold-bright) !important;
  color: var(--sk-dark) !important;
}
/* Order Now stays green */
.btn-success {
  background-color: var(--sk-green) !important;
  border-color: var(--sk-green) !important;
  color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--sk-green-dark) !important;
  border-color: var(--sk-green-dark) !important;
}

/* ============================================================
   ADINKRA TEXTURE — store/content pages body
   The texture appears on section#main-body which wraps all
   content pages including the store. Opacity kept very low
   so it's visible in the white areas between product cards.
   ============================================================ */
section#main-body {
  position: relative;
}
section#main-body::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='21' fill='none' stroke='%23D4860A' stroke-width='1'/%3E%3Ccircle cx='30' cy='30' r='13' fill='none' stroke='%23D4860A' stroke-width='0.8'/%3E%3Cline x1='30' y1='9' x2='30' y2='51' stroke='%23D4860A' stroke-width='0.8'/%3E%3Cline x1='9' y1='30' x2='51' y2='30' stroke='%23D4860A' stroke-width='0.8'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23D4860A'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
section#main-body > * { position: relative; z-index: 1; }

/* ============================================================
   PRODUCT FEATURE LIST — 20% more compact
   Six's store renders product descriptions as plain <ul><li>
   inside .store-order-container. Bootstrap gives li a 
   line-height of ~1.428 with no margin. The visual gap comes
   from the <li> padding set via overrides + the Bootstrap
   base font-size. We tighten line-height and reduce padding.
   ============================================================ */

/* Main product listing feature items */
.store-order-container ul li,
.store-order-container ul li p,
.product-features li,
div[class*="product"] ul li {
  line-height: 1.22 !important;
  margin-bottom: 2px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  font-size: 1.04em !important;
}

/* Tighten the entire feature list block */
.store-order-container ul {
  margin-bottom: 8px !important;
  margin-top: 6px !important;
}

/* Store product card — reduce internal padding */
.store-order-container {
  padding: 16px 20px !important;
}

/* store-promoted-product feature list */
.store-promoted-product ul.features li {
  margin-bottom: 3px !important;
  line-height: 1.35 !important;
}

/* Reduce gap between the main plan description and the feature list */
.store-order-container h2 {
  margin-bottom: 4px !important;
}
.store-order-container p {
  margin-bottom: 6px !important;
}

/* The "Included on every plan" / Extras block */
.store-order-container ul li p,
.store-order-container ul li small {
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* Remove excess space between product cards */
.store-order-container + .store-order-container {
  margin-top: 12px !important;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.product-status-active, .status-active, .text-success { color: var(--sk-green) !important; }
.label-success, .badge-success { background-color: var(--sk-green) !important; }

/* ============================================================
   INVOICE — kente + adinkra watermark + sankofa proverb
   ============================================================ */
.invoice-container { position: relative; overflow: hidden; }
.invoice-container::before {
  content: '';
  display: block;
  width: calc(100% + 140px);
  height: 5px;
  margin: -70px -70px 24px -70px;
  background: repeating-linear-gradient(
    90deg,
    #F5A623 0,    #F5A623 10px,
    #E63946 10px, #E63946 18px,
    #D4C5A9 18px, #D4C5A9 22px,
    #2DC653 22px, #2DC653 30px,
    #D4C5A9 30px, #D4C5A9 34px,
    #38BDF8 34px, #38BDF8 42px,
    #D4C5A9 42px, #D4C5A9 46px
  );
}
.invoice-container::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='85' fill='none' stroke='%23D4860A' stroke-width='3'/%3E%3Ccircle cx='100' cy='100' r='55' fill='none' stroke='%23D4860A' stroke-width='2'/%3E%3Ccircle cx='100' cy='100' r='25' fill='none' stroke='%23D4860A' stroke-width='2'/%3E%3Cline x1='100' y1='15' x2='100' y2='185' stroke='%23D4860A' stroke-width='2'/%3E%3Cline x1='15' y1='100' x2='185' y2='100' stroke='%23D4860A' stroke-width='2'/%3E%3Cline x1='40' y1='40' x2='160' y2='160' stroke='%23D4860A' stroke-width='1.5'/%3E%3Cline x1='160' y1='40' x2='40' y2='160' stroke='%23D4860A' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='100' r='8' fill='%23D4860A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.invoice-container > * { position: relative; z-index: 1; }
.invoice-container .invoice-status.unpaid { color: var(--sk-red) !important; }
.invoice-container .invoice-status.paid   { color: var(--sk-green) !important; }
.invoice-container .payment-btn-container::after {
  content: '"Se wo were fi na wosankofa a yenkyi." — It is not wrong to go back for what you forgot. · Akan Proverb';
  display: block;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: #aaa;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  letter-spacing: 0.02em;
}

/* ============================================================
   FOOTER — dark, kente strips, branded content
   ============================================================ */
section#footer {
  background-color: var(--sk-dark) !important;
  border-top: none !important;
  color: #64748B !important;
  padding: 0 !important;
}

/* Kente strip top of footer */
section#footer::before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #F5A623 0,    #F5A623 10px,
    #E63946 10px, #E63946 18px,
    #D4C5A9 18px, #D4C5A9 22px,
    #2DC653 22px, #2DC653 30px,
    #D4C5A9 30px, #D4C5A9 34px,
    #38BDF8 34px, #38BDF8 42px,
    #D4C5A9 42px, #D4C5A9 46px
  );
  margin-bottom: 0;
}

/* Kente strip bottom of footer */
section#footer::after {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #F5A623 0,    #F5A623 10px,
    #E63946 10px, #E63946 18px,
    #D4C5A9 18px, #D4C5A9 22px,
    #2DC653 22px, #2DC653 30px,
    #D4C5A9 30px, #D4C5A9 34px,
    #38BDF8 34px, #38BDF8 42px,
    #D4C5A9 42px, #D4C5A9 46px
  );
}

section#footer a { color: #64748B !important; transition: color 0.2s; }
section#footer a:hover { color: var(--sk-gold-bright) !important; }
section#footer .back-to-top i {
  background-color: var(--sk-dark-border) !important;
  color: #94A3B8 !important;
}

/* ── Hide default Six footer paragraphs ─────────────────────
   Six outputs: <p>Powered by <a href="whmcs.com">...</a></p>
   and: <p>Copyright...</p>
   We hide both — our branded footer (injected via WHMCS Footer
   Text field) replaces them completely. */
section#footer > .container > p,
section#footer > .container > div > p,
section#footer .container p {
  display: none !important;
}
section#footer a[href*="whmcs"],
a[href*="whmcs.com"],
.powered-by { display: none !important; }

/* ============================================================
   BRANDED FOOTER — #sk-footer
   Injected via WHMCS Admin → Setup → General Settings →
   "Footer Text" field. Paste footer_snippet.html content there.
   ============================================================ */
#sk-footer {
  background-color: var(--sk-dark);
  padding: 0;
  font-family: "Segoe UI", Arial, sans-serif;
}
#sk-footer .sk-kente { height: 4px; background: repeating-linear-gradient(90deg,#F5A623 0,#F5A623 10px,#E63946 10px,#E63946 18px,#D4C5A9 18px,#D4C5A9 22px,#2DC653 22px,#2DC653 30px,#D4C5A9 30px,#D4C5A9 34px,#38BDF8 34px,#38BDF8 42px,#D4C5A9 42px,#D4C5A9 46px); }
#sk-footer .sk-footer-inner { max-width: 1170px; margin: 0 auto; padding: 36px 20px 24px; display: flex; flex-wrap: wrap; gap: 28px; }
#sk-footer .sk-col-brand { flex: 0 1 240px; min-width: 200px; }
#sk-footer .sk-col-brand img { height: 32px; width: auto; filter: drop-shadow(0 0 8px rgba(245,166,35,0.20)); margin-bottom: 12px; display: block; }
#sk-footer .sk-col-brand p { font-size: 12px; line-height: 1.7; color: #64748B; margin: 0 0 14px; max-width: 240px; }
#sk-footer .sk-contact-btns { display: flex; gap: 8px; flex-wrap: wrap; }
#sk-footer .sk-btn-wa { display: inline-flex; align-items: center; gap: 5px; background: rgba(37,211,102,0.10); border: 1px solid rgba(37,211,102,0.20); border-radius: 7px; padding: 6px 11px; color: #25D366 !important; font-size: 12px; font-weight: 600; text-decoration: none !important; }
#sk-footer .sk-btn-email { display: inline-flex; align-items: center; gap: 5px; background: rgba(212,134,10,0.08); border: 1px solid rgba(212,134,10,0.18); border-radius: 7px; padding: 6px 11px; color: #D4860A !important; font-size: 12px; font-weight: 600; text-decoration: none !important; }
#sk-footer .sk-col-links { flex: 0 1 130px; min-width: 110px; }
#sk-footer .sk-col-links h6 { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94A3B8; margin: 0 0 12px; }
#sk-footer .sk-col-links ul { list-style: none; padding: 0; margin: 0; }
#sk-footer .sk-col-links ul li { margin-bottom: 7px; }
#sk-footer .sk-col-links ul li a { color: #64748B !important; font-size: 12px; text-decoration: none !important; transition: color 0.2s; }
#sk-footer .sk-col-links ul li a:hover { color: #F5A623 !important; }
#sk-footer .sk-footer-bottom { border-top: 1px solid #1E2845; padding: 12px 20px; max-width: 1170px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
#sk-footer .sk-footer-bottom p { font-size: 11px; color: #475569; margin: 0; }
#sk-footer .sk-status-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #475569; }
#sk-footer .sk-status-dot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1A8C3A; box-shadow: 0 0 0 2px rgba(26,140,58,0.25); }
@media (max-width: 767px) {
  #sk-footer .sk-footer-inner { flex-direction: column; gap: 20px; }
  #sk-footer .sk-col-links { flex: 0 1 100%; display: flex; flex-wrap: wrap; gap: 20px; }
}

/* ============================================================
   SANKOFA LOGO BELOW "POWERED BY"
   Since "Powered by" text is hidden, we show the logo
   as a subtle brand mark in the footer bottom area instead.
   It links back to sankohost.com.
   ============================================================ */
section#footer .container::after {
  content: '';
  display: block;
  width: 80px;
  height: 28px;
  margin: 8px auto 4px;
  background-image: url('https://sankohost.com/assets/img/sankofalogo.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.35;
  filter: brightness(0) invert(1);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f4f4f4; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sk-gold); }

/* ============================================================
   END — SankoHost Six theme brand layer v3.0
   Deploy: /public_html/whmcs/templates/six/css/custom.css
   ============================================================ */

/* ============================================================
   v4 FIXES — May 2026
   1. Green shortcuts bar: white icons + better contrast
   2. Adinkra texture fix: apply to body/primary-bg-color
      so it shows on ALL pages including white content areas
   3. News section: branded with proverb strip above it
   ============================================================ */

/* ── FIX 1: GREEN BAR — white icons, better contrast ────────
   The .home-shortcuts bar icons and text are gold on green
   which has poor contrast. Making them white with a dark
   hover state reads much better.
   ──────────────────────────────────────────────────────────── */
.home-shortcuts {
  background: var(--sk-green) !important;
  border-top: 3px solid var(--sk-green-dark) !important;
}

/* White text and icons instead of gold */
.home-shortcuts .lead {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 1em !important;
  letter-spacing: 0.02em !important;
}

.home-shortcuts li {
  border-right-color: rgba(0,0,0,0.18) !important;
  border-left-color: rgba(0,0,0,0.18) !important;
  transition: background 0.2s !important;
}

.home-shortcuts li:hover {
  background: var(--sk-green-dark) !important;
}

.home-shortcuts li a {
  color: #FFFFFF !important;
}

.home-shortcuts li a:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* Icons — white, larger, drop-shadow for legibility */
.home-shortcuts li i,
.home-shortcuts li i.fas,
.home-shortcuts li i.far,
.home-shortcuts li i.fab {
  color: #FFFFFF !important;
  font-size: 24px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* Label text under icons */
.home-shortcuts li p {
  color: rgba(255,255,255,0.90) !important;
  font-size: 0.78em !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* "How can we help today?" left label */
.home-shortcuts .lead {
  color: #FFFFFF !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
}

/* Gold accent line at bottom of shortcuts bar */
.home-shortcuts::after {
  content: '';
  display: block;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #F5A623 0,    #F5A623 10px,
    rgba(0,0,0,0.2) 10px, rgba(0,0,0,0.2) 18px,
    #F5A623 18px, #F5A623 22px
  );
}

/* ── FIX 2: TEXTURE — apply to body so it shows everywhere ──
   The previous ::before on section#main-body was hidden by
   section#main-body's own background-color: #fff.
   Fix: apply the texture pattern directly to body and
   .primary-bg-color (the wrapper Six puts on <body>).
   White content panels sit on top but the texture shows
   in the gaps between cards, in margins, and on any
   transparent surface.
   ──────────────────────────────────────────────────────────── */

/* Override the ::before approach — remove it */
section#main-body::before {
  display: none !important;
}

/* Apply texture directly to body */
body,
.primary-bg-color {
  background-color: #FAFAF7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='21' fill='none' stroke='%23D4860A' stroke-width='0.9' stroke-opacity='0.38'/%3E%3Ccircle cx='30' cy='30' r='13' fill='none' stroke='%23D4860A' stroke-width='0.7' stroke-opacity='0.38'/%3E%3Cline x1='30' y1='9' x2='30' y2='51' stroke='%23D4860A' stroke-width='0.7' stroke-opacity='0.38'/%3E%3Cline x1='9' y1='30' x2='51' y2='30' stroke='%23D4860A' stroke-width='0.7' stroke-opacity='0.38'/%3E%3Ccircle cx='30' cy='30' r='2.5' fill='%23D4860A' fill-opacity='0.38'/%3E%3C/svg%3E") !important;
  background-size: 60px 60px !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
}

/* Override section#main-body white bg to transparent
   so the body texture shows through */
section#main-body {
  background-color: transparent !important;
}

/* Keep cards/panels white — they sit on top of the texture */
.panel,
.panel-default,
.panel-body,
section#home-banner {
  position: relative;
  z-index: 1;
}

/* ── FIX 3: NEWS SECTION — branded Sankofa proverb strip ────
   The "News" section is WHMCS announcements — it can't be
   replaced via CSS. But we can:
   a) Style the news heading to match our brand
   b) Add a proverb strip above news via the section wrapper
   c) Style announcement cards to look clean and branded
   d) The actual proverb rotation needs proverb-engine.js
      (already on sankohost.com — we reference it here)
   ──────────────────────────────────────────────────────────── */

/* Style the "News" heading */
section#main-body h2:first-of-type,
.news-container h2,
#news h2,
section#main-body > .container > h2 {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #8A8278 !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #EDE9E0 !important;
}

/* Announcement date badge */
.list-group-item .label,
.announce-date,
.date-label {
  background-color: var(--sk-dark) !important;
  color: #CBD5E1 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
}

/* Announcement title links */
.announce-title a,
.announcement h3 a,
section#main-body .panel-body h3 a,
section#main-body .panel-body h4 a {
  color: var(--sk-gold) !important;
  font-weight: 600 !important;
}

/* Announcement panel cards */
section#main-body .panel {
  border: 1.5px solid #EDE9E0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
}

/* Proverb strip — injected above the news section
   This uses CSS to display a static proverb.
   For rotation, the footer_snippet.html and proverb-engine.js
   handle it on the client portal pages.
   We add a decorative Sankofa wisdom strip here. */
/* Static CSS proverb removed — JS wisdom section handles this */

/* ── NOTE ON DYNAMIC PROVERBS ────────────────────────────────
   To make the proverb strip rotate dynamically (like on the
   main website), add this script to the Six footer.tpl
   just before </body>:

   <div id="sk-proverb-bar"></div>
   <script src="https://sankohost.com/assets/js/proverb-engine.js"></script>

   The proverb-engine.js will populate any .proverb-inner
   element. For the homepage specifically, a custom inline
   script in clientareahome.tpl can target the news section
   and prepend a rotating proverb block above it.
   ──────────────────────────────────────────────────────────── */

/* ============================================================
   END v4 additions
   ============================================================ */

/* ============================================================
   v5 ADDITIONS — May 2026

   1. Feature list readability — larger text, tighter gaps
   2. Proverb below "Powered by" above footer logo
   3. Text colour system — warm gold/earth tones, no black
   4. Segoe UI preserved, colours blended with brand
   ============================================================ */

/* ── 1. FEATURE LIST — bigger and tighter ───────────────────
   Six inherits Bootstrap's base font. The store feature list
   items were getting compressed. These rules override:
   - Plan name: larger, warm dark
   - Plan tagline: gold
   - Feature items: readable size, tight gap, warm text
   ──────────────────────────────────────────────────────────── */

/* Plan heading on product cards */
.store-order-container h2,
.store-order-container h3 {
  font-size: 1.35em !important;
  font-weight: 700 !important;
  color: #2D2922 !important;
  margin-bottom: 3px !important;
  letter-spacing: -0.01em !important;
}

/* Plan tagline — gold, not grey */
.store-order-container > p:first-of-type,
.store-order-container .product-tagline {
  color: var(--sk-gold) !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

/* Feature list container — tighter */
.store-order-container ul {
  margin: 6px 0 8px !important;
  padding-left: 14px !important;
}

/* Each feature item */
.store-order-container ul li {
  font-size: 1.04em !important;
  line-height: 1.22 !important;
  margin-bottom: 2px !important;
  padding: 1px 0 !important;
  color: #453F38 !important;
}

/* "Included on every plan" bold label */
.store-order-container ul li strong,
.store-order-container ul li b {
  color: #2D2922 !important;
  font-weight: 700 !important;
}

/* Extras / overage lines — slightly muted */
.store-order-container ul li:last-child,
.store-order-container ul li.extras-line {
  color: #78716C !important;
  font-size: 0.96em !important;
}

/* Price — larger, gold */
.store-order-container .product-pricing,
.store-order-container .price {
  font-size: 1.55em !important;
  font-weight: 800 !important;
  color: var(--sk-gold) !important;
  letter-spacing: -0.02em !important;
}

/* Billing period label */
.store-order-container .product-pricing + small,
.store-order-container .billing-term {
  font-size: 0.75em !important;
  color: #8A8278 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── 2. PROVERB — below "Powered by", above footer logo ─────
   The footer structure in Six is:
   section#footer > .container > [p: "Powered by..."] [p: copyright]
   We add the proverb strip between the powered-by area and the
   Sankofa logo mark at the very bottom.

   Since we're hiding "Powered by" text but keeping the logo
   watermark (section#footer .container::after), we place
   the proverb using section#footer > .container::before
   which renders just inside the footer container, above
   everything else including the logo watermark.

   For DYNAMIC proverb rotation: paste this in WHMCS Admin
   → System Settings → Footer Text (or add to Six footer.tpl):
   <script>
   document.addEventListener('DOMContentLoaded', function() {
     var el = document.getElementById('sk-proverb-footer');
     if (!el) return;
     var proverbs = [
       '"Se wo were fi na wosankofa a yenkyi." — It is not wrong to go back for what you forgot. · Akan',
       '"Xexeame me doa ŋuti o." — The world does not end at the edge of your village. · Ewe',
       '"Umuntu ngumuntu ngabantu." — A person is a person through other people. · Zulu',
       '"Haraka haraka haina baraka." — Hurry hurry has no blessing. · Kiswahili',
       '"Indlela ibuzwa kwabaphambili." — The road is asked of those who went ahead. · Zulu',
       '"Dze le nu sia nu me." — There is something in everything. · Ewe',
       '"Woforo dua pa a, na yepia wo." — When you climb a good tree, you are given a push. · Akan',
       '"Motho ke motho ka batho ba bangwe." — A person is a person because of other people. · Sesotho',
       '"Muthu ndi muthu nga vhathu." — A person is a person because of people. · Tshivenda',
       '"Mmogo re aga, re ntsha molora." — Together we build; together we remove the ash. · Sepedi',
       '"Umntu akalahlwa." — A person is not thrown away. · Xhosa',
       '"Nu si mele nu me o, avlekpe de eŋu." — What has nothing inside it, the wind blows away. · Ewe'
     ];
     var idx = Math.floor(Math.random() * proverbs.length);
     el.textContent = proverbs[idx];
   });
   </script>
   ──────────────────────────────────────────────────────────── */

/* Proverb container in footer — above the logo watermark */
section#footer > .container {
  padding-bottom: 40px !important;
  position: relative !important;
}

/* Override previous static proverb in ::before — replace with dynamic version */
section#footer > .container::before {
  content: none !important;
}

/* The proverb element injected via JS (id="sk-proverb-footer")
   or falls back to static CSS content as backup */
#sk-proverb-footer {
  display: block !important;
  text-align: center !important;
  font-size: 11.5px !important;
  font-style: italic !important;
  color: rgba(148,163,184,0.55) !important;
  padding: 16px 24px 8px !important;
  letter-spacing: 0.025em !important;
  line-height: 1.6 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

/* Static fallback via CSS if JS doesn't inject */
section#footer .container > .sk-footer-bottom::before {
  content: '"Se wo were fi na wosankofa a yenkyi." — It is not wrong to go back for what you forgot. · Akan Proverb';
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  font-style: italic !important;
  color: rgba(148,163,184,0.50) !important;
  padding: 14px 20px 6px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.6 !important;
}

/* ── 3. TEXT COLOUR SYSTEM — warm, blended, no pure black ───
   Philosophy: no #000 or #333 — use warm dark earth tones.
   Text hierarchy uses the golden-brown spectrum:
   #2D2922 — deepest (replaces black/dark grey)
   #453F38 — primary body text
   #635D55 — secondary text  
   #8A8278 — muted/caption text
   #D4860A — accent/label gold
   All compatible with Segoe UI — no font changes.
   ──────────────────────────────────────────────────────────── */

/* Base body text — warm dark, not black */
body,
.primary-bg-color {
  color: #453F38 !important;
}

/* Page headings — warm deepest */
h1, h2, h3, h4, h5, h6 {
  color: #2D2922 !important;
}

/* Main page title (Fast, Secure South African Hosting) */
section#main-body h1,
section#main-body .page-title,
.store-page-title {
  color: #2D2922 !important;
}

/* Subtitle / taglines */
section#main-body .lead,
section#main-body .subtitle,
.page-subtitle {
  color: #635D55 !important;
}

/* Navigation links — kept lighter for dark bg */
section#main-menu .navbar-nav > li > a {
  color: #B8C4CE !important;
}

/* Sidebar category labels — warm medium */
.panel-sidebar .list-group-item {
  color: #635D55 !important;
}

/* Table text */
.table td, .table th {
  color: #453F38 !important;
}

/* Form labels */
label, .control-label {
  color: #635D55 !important;
  font-weight: 600 !important;
}

/* Form inputs */
.form-control {
  color: #2D2922 !important;
  border-color: #DDD8CE !important;
}
.form-control::placeholder {
  color: #B5AFA5 !important;
}
.form-control:focus {
  border-color: var(--sk-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,134,10,0.12) !important;
}

/* Panel headings on content panels (not sidebar) */
.panel-default > .panel-heading {
  background-color: #F9F6F1 !important;
  color: #2D2922 !important;
  border-bottom-color: #EDE9E0 !important;
}

/* Muted / small text */
small, .text-muted, .help-block {
  color: #8A8278 !important;
}

/* Date labels on announcements */
.label-default {
  background-color: #453F38 !important;
  color: #F9F6F1 !important;
}

/* Announcement title links */
section#main-body h3 a,
section#main-body h4 a,
.announcement-title a {
  color: var(--sk-gold) !important;
  font-weight: 600 !important;
}
section#main-body h3 a:hover,
section#main-body h4 a:hover {
  color: var(--sk-gold-bright) !important;
}

/* "Read More" button */
section#main-body .btn-default {
  border-color: var(--sk-gold) !important;
  color: var(--sk-gold) !important;
  background: transparent !important;
  font-weight: 600 !important;
}
section#main-body .btn-default:hover {
  background: var(--sk-gold-soft) !important;
}

/* News section heading "News" — warm label style */
section#main-body h2 {
  color: #8A8278 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid #EDE9E0 !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* Breadcrumb */
.breadcrumb > li { color: #8A8278 !important; }
.breadcrumb > li + li::before { color: #B5AFA5 !important; }
.breadcrumb > .active { color: #453F38 !important; font-weight: 600 !important; }

/* Footer copyright text */
section#footer { color: #64748B !important; }

/* Category / action links in sidebar — gold accent on hover */
.panel-sidebar a.list-group-item {
  color: #635D55 !important;
  transition: color 0.15s, background 0.15s !important;
}

/* Store page - "Available" badge text */
.badge, .label {
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ── SEGOE UI PRESERVATION ───────────────────────────────────
   All rules above use colour only — never font-family.
   Segoe UI remains the system font throughout.
   Only headings get no explicit font override (Six's
   overrides.css uses Raleway for h1-h6 — we keep that too
   since Raleway is a clean complement to Segoe UI).
   ──────────────────────────────────────────────────────────── */

/* ── DYNAMIC PROVERB INJECTION SCRIPT ───────────────────────
   Add the following HTML to WHMCS Admin → System Settings →
   General Settings → Mail tab → Footer Text field
   (or paste directly into Six's footer.tpl before </body>):

   <div id="sk-proverb-footer" style="display:block;text-align:center;
   font-size:11.5px;font-style:italic;color:rgba(148,163,184,0.55);
   padding:16px 24px 8px;letter-spacing:.025em;line-height:1.6;
   max-width:680px;margin:0 auto;"></div>
   <script>
   (function(){
     var p=[
       '"Se wo were fi na wosankofa a yenkyi." — It is not wrong to go back for what you forgot. · Akan',
       '"Xexeame me doa ŋuti o." — The world does not end at the edge of your village. · Ewe',
       '"Umuntu ngumuntu ngabantu." — A person is a person through other people. · Zulu',
       '"Haraka haraka haina baraka." — Hurry hurry has no blessing. · Kiswahili',
       '"Indlela ibuzwa kwabaphambili." — The road is asked of those who went ahead. · Zulu',
       '"Motho ke motho ka batho ba bangwe." — A person is a person because of other people. · Sesotho',
       '"Woforo dua pa a, na yepia wo." — When you climb a good tree, you are given a push. · Akan',
       '"Umntu akalahlwa." — A person is not thrown away. · Xhosa',
       '"Nu si mele nu me o, avlekpe de eŋu." — What has nothing inside, the wind blows away. · Ewe',
       '"Muthu ndi muthu nga vhathu." — A person is a person because of people. · Tshivenda'
     ];
     var el=document.getElementById('sk-proverb-footer');
     if(el) el.textContent=p[Math.floor(Math.random()*p.length)];
   })();
   </script>
   ──────────────────────────────────────────────────────────── */

/* ============================================================
   END v5 additions
   ============================================================ */

/* ============================================================
   PRODUCT DESCRIPTION STYLING — v5.1
   Targets safe HTML tags inside .store-order-container
   since WHMCS strips all inline styles from descriptions.
   Structure: <em> tagline, <p><strong> headline + specs,
   <ul><li> features, <p><strong> overage
   ============================================================ */

/* Italic tagline — first element */
.store-order-container > em:first-child,
.store-order-container em {
  display: block !important;
  color: #8A8278 !important;
  font-size: 0.83em !important;
  font-style: italic !important;
  margin: 0 0 5px !important;
  line-height: 1.4 !important;
}

/* Headline paragraph — <p><strong>headline</strong><br>specs</p> */
.store-order-container > p:first-of-type {
  margin: 0 0 8px !important;
  line-height: 1.45 !important;
}

.store-order-container > p:first-of-type strong {
  display: block !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  color: #2D2922 !important;
  margin-bottom: 2px !important;
}

/* Spec summary line (the <br>-separated text after <strong>) */
.store-order-container > p:first-of-type {
  color: #635D55 !important;
  font-size: 0.88em !important;
}

/* Feature list — tight, no default ul margin */
.store-order-container > ul {
  margin: 0 0 8px !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.store-order-container > ul > li {
  position: relative !important;
  padding: 1px 0 1px 16px !important;
  margin: 0 0 2px !important;
  font-size: 0.88em !important;
  color: #453F38 !important;
  line-height: 1.3 !important;
}

/* Gold check bullet */
.store-order-container > ul > li::before {
  content: '\2713' !important;
  position: absolute !important;
  left: 0 !important;
  color: #1A8C3A !important;
  font-weight: 700 !important;
  font-size: 0.9em !important;
}

/* Last li — addon domains, differentiator — gold */
.store-order-container > ul > li:last-child {
  color: #D4860A !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
  border-top: 1px solid #EDE9E0 !important;
}

/* Overage / launch offer paragraph */
.store-order-container > p:last-of-type {
  margin: 0 !important;
  padding-top: 6px !important;
  border-top: 1px solid #EDE9E0 !important;
  font-size: 0.8em !important;
  color: #8A8278 !important;
  line-height: 1.5 !important;
}

.store-order-container > p:last-of-type strong {
  color: #635D55 !important;
}

/* ============================================================
   END product description styling v5.1
   ============================================================ */

/* ============================================================
   v5.2 — THREE ADDITIONAL FIXES
   1. Sidebar always open (CSS-forced, no collapse)
   2. Order form teal highlight → green
   3. Slider/Storage VPS page styling
   ============================================================ */

/* ── FIX: SIDEBAR ALWAYS OPEN ───────────────────────────────
   Six collapses .panel-sidebar sections by default via
   Bootstrap's collapse plugin. The + Categories / + Actions
   headers toggle .panel-collapse visibility.
   Fix: force all panel-sidebar collapse elements to display:block
   and hide the toggle chevron to remove the hint it's clickable.
   ──────────────────────────────────────────────────────────── */

/* Force all sidebar panel bodies open always */
.panel-sidebar .panel-collapse,
.panel-sidebar .collapse,
.panel-sidebar .collapsing {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  transition: none !important;
}

/* Remove the +/- toggle indicator from panel headings
   since it's misleading when panels are always open */
.panel-sidebar .panel-minimise,
.panel-sidebar .panel-heading .fa-chevron-up,
.panel-sidebar .panel-heading .fa-chevron-down,
.panel-sidebar .panel-heading [data-toggle="collapse"] .fa {
  display: none !important;
}

/* Keep the heading itself still gold but remove cursor:pointer
   appearance since it no longer toggles anything */
.panel-sidebar .panel-heading[data-toggle="collapse"],
.panel-sidebar .panel-heading a[data-toggle="collapse"] {
  cursor: default !important;
  pointer-events: none !important;
}

/* Also force the show-menu button (Storage VPS page) to hide
   since menu should be auto-open */
.btn-show-menu,
button[data-target*="sidebar"],
.sidebar-toggle-btn {
  display: none !important;
}

/* ── FIX: ORDER FORM — teal highlight → green ───────────────
   The VPS order form (image 2) has a teal/blue highlighted
   selected option row and teal top/bottom borders.
   These are in Six's store.css order form styles.
   ──────────────────────────────────────────────────────────── */

/* Selected product row highlight */
.order-standard .products .product.selected,
.order-standard .products .product.highlight,
.store-order-container .product.selected,
.configproduct.selected,
input[type="radio"]:checked + label,
.product-list .product.selected {
  background-color: rgba(26,140,58,0.07) !important;
  border-color: var(--sk-green) !important;
}

/* The teal top and bottom border lines on the order form */
.order-standard .products,
.order-standard form,
.store-order-container form,
.order-form-container {
  border-color: var(--sk-green) !important;
}

/* Order form header/footer bar (teal in screenshot) */
.order-standard .products::before,
.order-standard .products::after,
.configoptions::before,
.configoptions::after {
  background-color: var(--sk-green) !important;
}

/* Specific Six order form border classes */
.order-standard_config .panel,
.order-standard_config .well {
  border-top: 3px solid var(--sk-green) !important;
  border-bottom: 3px solid var(--sk-green) !important;
}

/* "Continue" button — already handled by btn-primary → gold
   but the order form uses a specific orange btn, ensure gold */
.order-standard .btn-primary,
.order-standard .btn-cart,
.btn-cart {
  background-color: var(--sk-gold) !important;
  border-color: var(--sk-gold) !important;
  color: #FFFFFF !important;
}
.order-standard .btn-primary:hover,
.btn-cart:hover {
  background-color: var(--sk-gold-bright) !important;
  border-color: var(--sk-gold-bright) !important;
}

/* Radio button accent — replace teal with green */
input[type="radio"]:checked {
  accent-color: var(--sk-green) !important;
}

/* Security notice bar (image 2 bottom) */
.order-standard .alert-info,
.secure-notice,
.fraud-notice {
  background-color: rgba(26,140,58,0.06) !important;
  border-color: rgba(26,140,58,0.20) !important;
  color: #2D4A2F !important;
}

/* ── FIX: STORAGE VPS SLIDER PAGE ───────────────────────────
   Image 3 shows a product comparison slider.
   The slider left (green) and right (teal/blue) track colours
   need to both be brand colours.
   The content card is grey-background — should match body.
   ──────────────────────────────────────────────────────────── */

/* Slider track */
input[type="range"] {
  accent-color: var(--sk-green) !important;
}

/* The filled left portion of the slider */
.noUi-connect,
.slider-connect,
.range-slider-fill {
  background-color: var(--sk-green) !important;
}

/* The unfilled right portion */
.noUi-base,
.noUi-background,
.range-slider-track {
  background-color: rgba(26,140,58,0.20) !important;
}

/* Slider handle */
.noUi-handle,
.slider-handle {
  border-color: var(--sk-green) !important;
  box-shadow: 0 0 0 3px rgba(26,140,58,0.20) !important;
}

/* Product detail card on slider page */
.slider-product-card,
.promoted-product-card,
.store-promoted-product {
  background: #FFFFFF !important;
  border: 1.5px solid #EDE9E0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(28,25,23,0.06) !important;
}

/* Banner/tagline text on Storage VPS ("BULK STORAGE...") */
.store-promoted-product .tagline,
.product-group-tagline,
section[class*="banner"] p,
.promoted-tagline {
  color: #635D55 !important;
  font-size: 0.85em !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ============================================================
   END v5.2
   ============================================================ */

/* ============================================================
   v5.3 — DOMAIN BANNER HEADING + NEWS REPLACEMENT + PROVERBS
   
   Fixes:
   1. "Begin the search..." heading invisible → white on dark
   2. Banner heading replaced with captivating custom text
   3. News section hidden → replaced with proverb showcase via JS
   4. Proverb font size increased 50%
   5. Proverb below "Powered by" becomes full wisdom display
   ============================================================ */

/* ── FIX 1 + 2: DOMAIN BANNER HEADING ───────────────────────
   Root cause: h1,h2,h3 { color: #2D2922 !important } in our
   own v5 text-colour system overrides Six's banner color:#fff.
   Dark warm text on dark navy bg = invisible.
   Fix: explicitly restore white on section#home-banner h2.
   ──────────────────────────────────────────────────────────── */
section#home-banner h2 {
  color: #FFFFFF !important;
  font-size: 2.4em !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
}

@media (max-width: 992px) {
  section#home-banner h2 { font-size: 1.8em !important; }
}
@media (max-width: 767px) {
  section#home-banner h2 { font-size: 1.4em !important; }
}

/* Also ensure all text inside the banner stays white */
section#home-banner,
section#home-banner p,
section#home-banner label,
section#home-banner .lead {
  color: #FFFFFF !important;
}

/* Banner search buttons — green Search, muted Transfer */
section#home-banner .btn.search {
  background-color: var(--sk-green) !important;
  font-weight: 600 !important;
}
section#home-banner .btn.transfer {
  background-color: rgba(255,255,255,0.18) !important;
  font-weight: 600 !important;
}
section#home-banner .btn.search:hover {
  background-color: var(--sk-green-dark) !important;
}

/* ── FIX 3: HIDE DEFAULT NEWS CONTENT ───────────────────────
   Hides the WHMCS "NEWS" heading and announcement panel.
   Our JS-injected proverb section takes their place.
   ──────────────────────────────────────────────────────────── */

/* Hide "NEWS" heading */
section#main-body > .container > h2,
section#main-body .home-news-heading {
  display: none !important;
}

/* Hide all announcement panels on the homepage */
section#main-body .announcement-single,
section#main-body div.announcement-single {
  display: none !important;
}

/* ── FIX 4 + 5: PROVERB SHOWCASE STYLES ─────────────────────
   #sk-wisdom-section is injected by JS (paste into WHMCS
   Footer Text). It appears where the news section was.
   Proverb font size is 50% larger than previous.
   ──────────────────────────────────────────────────────────── */

#sk-wisdom-section {
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 0 20px;
  font-family: "Segoe UI", Arial, sans-serif;
  text-align: center;
}

/* "WISDOM FROM AFRICA" label */
#sk-wisdom-section .sk-w-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A8278;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

#sk-wisdom-section .sk-w-label::before,
#sk-wisdom-section .sk-w-label::after {
  content: '';
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #D4860A, transparent);
}

/* Adinkra symbol */
#sk-wisdom-section .sk-w-symbol {
  font-size: 32px;
  color: #D4860A;
  opacity: 0.6;
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}

/* Main proverb text — 50% bigger than before (was ~12.5px, now ~19px) */
#sk-wisdom-section .sk-w-proverb {
  font-size: 19px;
  font-style: italic;
  color: #2D2922;
  line-height: 1.6;
  font-weight: 400;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

/* Translation line */
#sk-wisdom-section .sk-w-translation {
  font-size: 14px;
  color: #635D55;
  font-style: normal;
  margin: 0 0 8px;
  font-weight: 400;
}

/* Attribution — language + region */
#sk-wisdom-section .sk-w-attr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D4860A;
  margin: 0 0 20px;
}

/* Cultural meaning */
#sk-wisdom-section .sk-w-meaning {
  font-size: 13px;
  color: #8A8278;
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto 20px;
  font-style: italic;
}

/* Cycle button */
#sk-wisdom-section .sk-w-btn {
  background: transparent;
  border: 1px solid rgba(212,134,10,0.3);
  border-radius: 999px;
  padding: 7px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8278;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "Segoe UI", Arial, sans-serif;
}

#sk-wisdom-section .sk-w-btn:hover {
  background: rgba(212,134,10,0.08);
  border-color: #D4860A;
  color: #D4860A;
}

/* Kente mini divider below proverb section */
#sk-wisdom-section .sk-w-kente {
  height: 3px;
  width: 120px;
  margin: 24px auto 0;
  background: repeating-linear-gradient(
    90deg,
    #F5A623 0, #F5A623 8px, #E63946 8px, #E63946 14px,
    #D4C5A9 14px, #D4C5A9 17px, #2DC653 17px, #2DC653 23px,
    #D4C5A9 23px, #D4C5A9 26px, #38BDF8 26px, #38BDF8 32px
  );
  border-radius: 2px;
}

/* ── "POWERED BY" AREA — full proverb showcase ───────────────
   The "Powered by" text is hidden but the surrounding area
   is still there. We turn it into a wisdom/brand statement.
   ──────────────────────────────────────────────────────────── */

/* The footer-adjacent "Powered by" paragraph on homepage */
section#main-body > .container > p:last-of-type,
section#main-body .powered-by-container {
  margin-top: 40px !important;
  text-align: center !important;
}

/* #sk-proverb-footer removed — below-footer proverb disabled */

/* ============================================================
   END v5.3
   ============================================================ */


/* ── HIDE below-footer proverb element ──────────────────────── */
#sk-proverb-footer { display: none !important; }

/* ── NAV BAR GREEN ACCENT STRIP ─────────────────────────────
   A thin green line under the main nav — separates the dark
   nav from the content below. Distinctive without being loud.
   Uses the brand green to tie the nav to the action buttons.
   ──────────────────────────────────────────────────────────── */
section#main-menu {
  border-bottom: 3px solid var(--sk-green) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 3px 0 var(--sk-green) !important;
}

/* Also add a very subtle green glow under the nav */
section#main-menu::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26,140,58,0.4) 20%,
    rgba(26,140,58,0.6) 50%,
    rgba(26,140,58,0.4) 80%,
    transparent 100%
  );
  margin-top: -1px;
}

/* ── ALSO: Hide NEWS label that's still showing ─────────────── */
/* Belt + suspenders — multiple selectors to catch it */
section#main-body h2,
section#main-body > .container > h2,
section#main-body .container h2:first-child,
.home-main h2, .home-page h2 {
  display: none !important;
}

/* But restore h2 inside product cards and other content panels */
.store-order-container h2,
.panel h2, .panel-body h2,
.panel-heading h2, .panel-title h2,
.order-standard h2,
section#main-body .panel h2,
section#main-body .store-order-container h2 {
  display: block !important;
}
/* ============================================================
   END v5.4 additions
   ============================================================ */