/* ============================================================
   WisdomCybernetics — Modern AWBS Theme Stylesheet
   ============================================================
   Brand:    WisdomCybernetics
   Palette:  bg/header #050814 (near-black navy)
             accent     #11C5A1 (teal)
             text       #FFFFFF (on dark) / #0F172A (on light)
   Author:   Computer (Perplexity)
   Notes:    Hybrid dark/light layout, Bootstrap-4 compatible,
             AWBS legacy class names preserved for variables.
   ============================================================ */

/* ---------- 1. CSS Variables ---------- */
:root{
  --wc-bg:            #050814;
  --wc-bg-2:          #0a0f1f;
  --wc-bg-3:          #111a30;
  --wc-accent:        #11C5A1;
  --wc-accent-dark:   #0e9d80;
  --wc-accent-light:  #2cd9b6;
  --wc-text:          #FFFFFF;
  --wc-text-dim:      rgba(255,255,255,.78);
  --wc-text-muted:    rgba(255,255,255,.55);
  --wc-ink:           #0F172A;
  --wc-ink-2:         #334155;
  --wc-ink-mute:      #64748B;
  --wc-line:          rgba(255,255,255,.10);
  --wc-line-light:    #E5E7EB;
  --wc-card:          #ffffff;
  --wc-card-soft:     #F8FAFC;
  --wc-danger:        #ef4444;
  --wc-warn:          #f59e0b;
  --wc-success:       #10b981;
  --wc-radius:        12px;
  --wc-radius-sm:     8px;
  --wc-radius-lg:     20px;
  --wc-shadow-sm:     0 1px 2px rgba(2,6,23,.08);
  --wc-shadow:        0 8px 24px rgba(2,6,23,.10);
  --wc-shadow-lg:     0 24px 60px rgba(2,6,23,.18);
  --wc-shadow-glow:   0 0 0 4px rgba(17,197,161,.18);
  --wc-font:          'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wc-font-mono:     'JetBrains Mono','Fira Code',Consolas,monospace;
  --wc-container:     1200px;
}

/* ---------- 2. Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;
  font-family:var(--wc-font);
  font-size:16px;line-height:1.6;
  color:var(--wc-ink);
  background:#EEF2F7;          /* soft cool-gray canvas so white #mainTD card stands out */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;border:0}
a{color:var(--wc-accent-dark);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--wc-accent);text-decoration:underline}

h1,h2,h3,h4,h5,h6{
  font-family:var(--wc-font);
  color:var(--wc-ink);
  margin:0 0 .6em;
  line-height:1.25;font-weight:700;letter-spacing:-.01em;
}
h1{font-size:2.25rem}
h2{font-size:1.75rem}
h3{font-size:1.4rem}
h4{font-size:1.15rem}
h5{font-size:1rem}
h6{font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--wc-line-light);margin:2rem 0}

/* ---------- 3. Layout Wrappers ---------- */
.wrapper{
  background:var(--wc-card-soft);
  min-height:100vh;
  display:flex;flex-direction:column;
}
table#doc{
  width:100%;
  max-width:none;
  border-collapse:collapse;
  background:transparent;
}
table#doc > tbody > tr > td,
table#doc > tr > td{
  vertical-align:top;
}
/* Reset padding ONLY on layout-chrome cells (sidebar/spacer/empty cells)
   so that the actual content cell #mainTD can keep its own padding rules. */
table#doc > tbody > tr > td:not(#mainTD):not(.wci-portal-content-cell),
table#doc > tr > td:not(#mainTD):not(.wci-portal-content-cell){
  padding:0;
}

/* ============================================================
   4. Top / Header Bar  (sticky, glass-blur, gradient logo mark,
      pill action buttons — matches the design demo)
   ============================================================ */
#header.wci-site-header,
#header{
  position:sticky;top:0;z-index:60;
  background:rgba(5,8,20,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  color:var(--wc-text);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:0;
}
/* Hide the legacy AWBS table scaffold that may still be present */
#headerTableLayout{display:none}

.wci-headerbar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--wc-container);
  margin:0 auto;
  padding:14px 24px;
  gap:20px;
}

/* ---- Brand: gradient mark + wordmark ---- */
.wci-brand{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--wc-text);
  flex-shrink:0;
}
.wci-brand:hover{text-decoration:none;color:var(--wc-text)}
.wci-brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg, var(--wc-accent) 0%, #5fe3ff 60%, #2cd9b6 100%);
  display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(17,197,161,.32),
             inset 0 1px 0 rgba(255,255,255,.25);
  flex-shrink:0;
  transition:transform .25s ease, box-shadow .25s ease;
}
.wci-brand:hover .wci-brand-mark{
  transform:rotate(-6deg) scale(1.05);
  box-shadow:0 10px 24px rgba(17,197,161,.45),
             inset 0 1px 0 rgba(255,255,255,.3);
}
.wci-brand-mark svg{width:24px;height:24px;display:block}
.wci-brand-text{display:flex;flex-direction:column;line-height:1.15}
.wci-brand-text strong{
  font-family:var(--wc-font);
  font-size:1.05rem;font-weight:800;
  color:var(--wc-text);
  letter-spacing:-.018em;
}
.wci-brand-text > span{
  font-size:.74rem;
  color:var(--wc-text-muted);
  font-weight:500;
  letter-spacing:.005em;
}

/* Legacy #logo div (kept for any non-template page that still emits it) */
#logo,#logoPortal{display:none}
.wci-brand img{height:36px;width:auto;display:block}

/* ---- Header tools cluster ---- */
.wci-header-tools{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;justify-content:flex-end;
}
.wci-header-pill,
.wci-header-tools #currency_select select,
.wci-header-tools select{
  background:rgba(255,255,255,.06);
  color:var(--wc-text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:8px 14px;font-size:.82rem;font-weight:500;
  height:40px;line-height:1;
  appearance:none;-webkit-appearance:none;
}

/* Pill buttons (Order now / Client login / etc.) */
.wci-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 18px;border-radius:999px;
  font-size:.85rem;font-weight:700;letter-spacing:.005em;
  text-decoration:none;border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.wci-btn:hover{text-decoration:none;transform:translateY(-1px)}
.wci-btn-primary{
  background:linear-gradient(135deg, var(--wc-accent) 0%, #5fe3ff 100%);
  color:#03101d;
  box-shadow:0 6px 16px rgba(17,197,161,.3);
}
.wci-btn-primary:hover{
  color:#03101d;
  box-shadow:0 10px 22px rgba(17,197,161,.45);
}
.wci-btn-ghost{
  background:rgba(255,255,255,.06);
  color:var(--wc-text);
  border-color:rgba(255,255,255,.16);
}
.wci-btn-ghost:hover{
  background:rgba(255,255,255,.12);
  color:var(--wc-text);
}

/* Cart pill */
.wci-topcart a, #topcart a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--wc-text);
  transition:background .15s ease,transform .15s ease,color .15s ease;
}
.wci-topcart a:hover, #topcart a:hover{
  background:var(--wc-accent);border-color:var(--wc-accent);
  color:#03101d;transform:translateY(-1px);
}
.wci-topcart i, #topcart i{font-size:.95rem}
#topcart img{filter:brightness(0) invert(1);width:18px;height:18px}

/* Responsive: hide non-essential pill labels on small screens */
@media (max-width:720px){
  .wci-hide-sm{display:none !important}
  .wci-headerbar{padding:12px 16px;gap:12px}
  .wci-brand-text > span{display:none}
  .wci-brand-text strong{font-size:.98rem}
}

/* ============================================================
   4b. Hero shell  (rounded card that wraps the slider)
   ============================================================ */
.wci-hero-shell-wrap{
  max-width:var(--wc-container);
  margin:0 auto;
  padding:20px 40px 0;  /* was 24px — bumped for breathing room */
}
@media (max-width:1280px){
  .wci-hero-shell-wrap{padding:20px 32px 0}
}
.wci-hero-shell{
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 60px rgba(2,6,23,.18),
             0 6px 16px rgba(2,6,23,.10);
  background:#020410;
}
.wci-hero-shell .wci-hero-slider{
  border-radius:0;
}
@media (max-width:720px){
  .wci-hero-shell-wrap{padding:14px 14px 0}
  .wci-hero-shell{border-radius:20px}
}

/* ---------- 5. Navigation ---------- */
.wci-nav-wrap{
  background:var(--wc-bg-2);
  border-bottom:1px solid rgba(255,255,255,.06);
  width:100%;
}
#menu{
  max-width:var(--wc-container);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px;
  padding:0 24px;
  list-style:none;
}
#menu > li{
  position:relative;
  list-style:none;
}
#menu > li > a,
#menu li a.selectedMenu,
.wci-nav a{
  display:block;
  color:var(--wc-text-dim) !important;
  padding:14px 16px;
  font-size:.92rem;
  font-weight:500;
  text-decoration:none;
  position:relative;
  transition:color .15s ease;
  background:transparent;
}
#menu > li > a:hover,
#menu li a.selectedMenu:hover,
.wci-nav a:hover{
  color:var(--wc-text) !important;
  text-decoration:none;
  background:rgba(255,255,255,.04);
}
#menu li a.selectedMenu,
.wci-nav a.active,
#menu > li > a.active{
  color:var(--wc-accent) !important;
}
#menu li a.selectedMenu::after,
.wci-nav a.active::after,
#menu > li > a.active::after,
#menu > li > a:hover::after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:0;
  height:2px;
  background:var(--wc-accent);
  border-radius:2px;
}
/* Submenus */
#menu li ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:var(--wc-bg-2);
  border:1px solid rgba(255,255,255,.08);
  border-top:2px solid var(--wc-accent);
  border-radius:0 0 10px 10px;
  padding:6px 0;
  margin:0;
  list-style:none;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  z-index:1100;
}
#menu li:hover > ul,
#menu li:focus-within > ul{
  display:block;
}
#menu li ul li{
  list-style:none;
}
#menu li ul li a{
  display:block;
  padding:10px 16px;
  color:var(--wc-text-dim) !important;
  font-size:.88rem;
  text-decoration:none;
  white-space:nowrap;
}
#menu li ul li a:hover{
  color:var(--wc-text) !important;
  background:rgba(17,197,161,.12);
}
/* Strip AWBS legacy width/alignment helpers inside menu */
#menu a.w-100{ width:auto !important }
#menu a.ac{ text-align:left !important }
#line{display:none}

/* ---------- 6. Main Content Area ---------- */
#mainData{
  width:100%;
  max-width:var(--wc-container);
  margin:0 auto;
  background:transparent;
  border-collapse:separate;
  border-spacing:0;
}
/* Reset padding only on layout-chrome cells inside #mainData (NOT on
   #mainTD itself — #mainTD owns its own padding rule below). */
#mainData > tbody > tr > td:not(#mainTD),
#mainData > tr > td:not(#mainTD){padding:0}
#tablehead{
  background:transparent;
  padding:32px 24px 8px;
  font-size:1.5rem;font-weight:700;
  color:var(--wc-ink);
}
/* Use td#mainTD (specificity 0,1,1) so we beat any broad td reset rule
   that sits in 'common' theme/base styles. */
td#mainTD{
  background:#ffffff;
  padding:28px 36px !important;        /* was 28 32 — bumped !important to win
                                          against any later AWBS-shared rule */
  border-radius:var(--wc-radius-lg);
  margin:16px 40px 24px !important;    /* was 16 24 24 — wider gutters */
  display:block;
  box-shadow:0 4px 16px rgba(5,8,20,.08), 0 2px 4px rgba(5,8,20,.04);  /* lifted card on gray canvas */
  border:1px solid var(--wc-line-light);
}
@media (max-width:1280px){
  td#mainTD{margin:16px 32px 24px !important;padding:28px 32px !important}
}
@media (max-width:991px){
  td#mainTD{margin:12px !important;padding:20px !important}
}
@media (max-width:600px){
  td#mainTD{margin:8px !important;padding:16px !important;border-radius:var(--wc-radius)}
}
#contact td#mainTD{padding:28px 32px !important}

/* Welcome client portal layout */
#mainData[align="center"]{margin-left:auto;margin-right:auto}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--wc-font);font-weight:600;
  border-radius:var(--wc-radius-sm);
  padding:10px 18px;font-size:.92rem;
  border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
  line-height:1.2;text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:focus{outline:none;box-shadow:var(--wc-shadow-glow)}
.btn-sm{padding:7px 14px;font-size:.82rem}
.btn-lg{padding:14px 24px;font-size:1rem}

.btn-primary{background:var(--wc-accent);color:#fff;border-color:var(--wc-accent)}
.btn-primary:hover{background:var(--wc-accent-dark);border-color:var(--wc-accent-dark);color:#fff}

.btn-secondary{background:var(--wc-ink);color:#fff;border-color:var(--wc-ink)}
.btn-secondary:hover{background:#1f2a44;border-color:#1f2a44;color:#fff}

.btn-outline{background:transparent;color:var(--wc-accent-dark);border-color:var(--wc-accent)}
.btn-outline:hover{background:var(--wc-accent);color:#fff}

.btn-info{background:#0ea5e9;color:#fff;border-color:#0ea5e9}
.btn-info:hover{background:#0284c7;border-color:#0284c7;color:#fff}

.btn-light{background:#fff;color:var(--wc-ink);border-color:var(--wc-line-light)}
.btn-light:hover{background:var(--wc-card-soft);color:var(--wc-ink)}

/* ---------- 8. Forms ---------- */
input[type="text"],input[type="email"],input[type="password"],
input[type="search"],input[type="tel"],input[type="url"],
input[type="number"],input[type="date"],input[type="datetime-local"],
input[type="time"],textarea,select{
  font-family:var(--wc-font);font-size:.95rem;
  line-height:1.5;
  padding:10px 14px;
  border:1px solid var(--wc-line-light);
  border-radius:var(--wc-radius-sm);
  background:#fff;color:var(--wc-ink);
  transition:border-color .15s ease,box-shadow .15s ease;
  width:100%;max-width:100%;
  box-sizing:border-box;
  min-height:42px;
  height:auto;
  vertical-align:middle;
}
textarea{min-height:120px;resize:vertical;height:auto}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--wc-accent);box-shadow:var(--wc-shadow-glow);
}
input[type="submit"],input[type="button"]{
  display:inline-block;width:auto;
  background:var(--wc-accent);color:#fff;border:1px solid var(--wc-accent);
  padding:10px 18px;border-radius:var(--wc-radius-sm);
  font-weight:600;cursor:pointer;
  transition:background .15s ease,transform .12s ease;
}
input[type="submit"]:hover,input[type="button"]:hover{
  background:var(--wc-accent-dark);transform:translateY(-1px);
}

/* Form validation styling (FormCheck) */
.formError .formErrorContent{
  background:var(--wc-danger);color:#fff;
  border-radius:var(--wc-radius-sm);font-size:.82rem;padding:6px 10px;
}
.red{color:var(--wc-danger)}
.green{color:var(--wc-success)}
.blue{color:#2563eb}

/* ---------- 9. Cards ---------- */
.card{
  background:var(--wc-card);
  border:1px solid var(--wc-line-light);
  border-radius:var(--wc-radius);
  box-shadow:var(--wc-shadow-sm);
  overflow:hidden;
  margin-bottom:1rem;
  transition:box-shadow .2s ease,transform .2s ease;
}
.card:hover{box-shadow:var(--wc-shadow);transform:translateY(-1px)}
.card-header{
  padding:14px 18px;
  font-weight:600;font-size:.95rem;
  border-bottom:1px solid var(--wc-line-light);
  background:var(--wc-card-soft);color:var(--wc-ink);
  display:flex;align-items:center;gap:10px;
}
.card-header i{color:var(--wc-accent-dark)}
.card-header.bgheadi{
  background:linear-gradient(135deg,var(--wc-bg) 0%,var(--wc-bg-3) 100%);
  color:#fff;border-bottom:0;
}
.card-header.bgheadi i{color:var(--wc-accent)}
.card-header.bgddd{
  background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
  color:#fff;border-bottom:0;
}
.card-header.bgddd i{color:var(--wc-accent)}
/* Force white text on dark card headers — defeats AWBS legacy <font color>, <b>, inline styles */
.card-header.bgddd,
.card-header.bgddd *,
.card-header.bgddd b,
.card-header.bgddd strong,
.card-header.bgddd font,
.card-header.bgddd span,
.card-header.bgddd a,
.card-header.bgheadi,
.card-header.bgheadi *,
.card-header.bgheadi b,
.card-header.bgheadi strong,
.card-header.bgheadi font,
.card-header.bgheadi span,
.card-header.bgheadi a{color:#fff !important}
.card-header.bgddd i,
.card-header.bgheadi i{color:var(--wc-accent) !important}
.card-header.bgddd a:hover,
.card-header.bgheadi a:hover{color:var(--wc-accent) !important}
.card-body{padding:18px}
.card-body.p-2{padding:1rem}
.card-text{margin:0}
.card .panelContents,
.card .panelContents2{padding:.5rem}

/* ---------- 10. Tables ---------- */
table.wci-table,
.wci-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:#fff;border:1px solid var(--wc-line-light);
  border-radius:var(--wc-radius);overflow:hidden;
  font-size:.92rem;margin-bottom:1.25rem;
}
.wci-table th,.wci-table td{
  padding:12px 14px;text-align:left;
  border-bottom:1px solid var(--wc-line-light);
}
.wci-table thead th{
  background:var(--wc-bg);color:#fff;font-weight:600;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
}
.wci-table tbody tr:hover{background:var(--wc-card-soft)}
.wci-table tbody tr:last-child td{border-bottom:0}

/* Legacy AWBS pricing table support */
table[bordercolor="#99CCCC"],
.t1_head,.t1_even,.t1_odd,.t1_option_2,
.formfield,.formtextarea,.swHilight,.title,.texttitle,.redtitle{
  font-family:var(--wc-font);
}
table[bordercolor="#99CCCC"]{
  border:1px solid var(--wc-line-light) !important;
  border-radius:var(--wc-radius);overflow:hidden;background:#fff;
  width:100%;border-collapse:separate;border-spacing:0;
  box-shadow:var(--wc-shadow-sm);margin:1rem 0;
}
table[bordercolor="#99CCCC"] td{
  border:0;border-bottom:1px solid var(--wc-line-light) !important;
  padding:11px 14px;font-size:.9rem;color:var(--wc-ink);
}
.swHilight,.t1_head{
  background:linear-gradient(135deg,var(--wc-bg) 0%,var(--wc-bg-3) 100%) !important;
  color:#fff !important;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.swHilight *,.t1_head *{color:#fff !important}
.title,.title strong{
  background:#0f172a !important;color:#fff !important;
  font-weight:600;font-size:.85rem;
}
.t1_even{background:#fff !important}
.t1_odd{background:var(--wc-card-soft) !important}
.formfield{background:#0f172a !important;color:#fff !important}
.formfield td{color:#fff !important}
.formtextarea{font-size:.9rem}
.t1_option_2{color:var(--wc-success);font-weight:600}
.redtitle{color:#fff !important}

/* ---------- 11. Breadcrumb ---------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;
  list-style:none;padding:8px 0;margin:6px 0 14px;
  font-size:.85rem;color:var(--wc-ink-mute);
  background:transparent;
}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li + li::before{
  content:"›";margin:0 .5rem;color:var(--wc-ink-mute);
}
.breadcrumb a{color:var(--wc-accent-dark)}
.breadcrumb a:hover{color:var(--wc-accent)}

/* ---------- 12. Hero / Slider (layered: bg image + LEDs + gradient + copy) ---------- */
.wci-hero-slider{
  position:relative;width:100%;
  aspect-ratio: 21/8;
  min-height:380px;max-height:600px;
  background:#020410;overflow:hidden;
}
.wci-slider-track{
  position:relative;width:100%;height:100%;
}
.wci-slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity 1.1s ease-in-out;
  display:flex;align-items:center;
  pointer-events:none;
}
.wci-slide.active{opacity:1;z-index:2;pointer-events:auto}

/* Photographic background — slow Ken Burns zoom while active */
.wci-slide-bg{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transform:scale(1.02);
  transition:transform 8s ease-out;
  will-change:transform;
}
.wci-slide.active .wci-slide-bg{ transform:scale(1.08); }

/* Left-to-right legibility gradient */
.wci-slide-grad{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg, rgba(5,8,20,.92) 0%, rgba(5,8,20,.55) 50%, rgba(5,8,20,.10) 100%),
    linear-gradient(180deg, rgba(5,8,20,.30) 0%, transparent 35%, rgba(5,8,20,.45) 100%);
}

/* Subtle scanline / atmosphere on top of everything */
.wci-hero-slider::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0) 0px,
    rgba(255,255,255,0) 2px,
    rgba(255,255,255,.018) 3px,
    rgba(255,255,255,0) 4px
  );
  mix-blend-mode:overlay;opacity:.6;
}

/* ---------- Animated LED rack overlay ---------- */
.wci-slide-leds{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.wci-led{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:var(--wc-accent-light);
  box-shadow:
    0 0 6px var(--wc-accent-light),
    0 0 14px rgba(44,217,182,.7),
    0 0 22px rgba(44,217,182,.35);
  opacity:.85;
  animation:wci-led-blink 1.6s ease-in-out infinite;
}
/* Each LED gets its own position, color tint, size and timing */
/* Default LED positions — used by slides 4 & 5 */
.wci-led-1 { top:18%; right: 6%; animation-duration:.9s;  animation-delay:.05s; }
.wci-led-2 { top:24%; right:11%; width:5px;height:5px; animation-duration:1.3s; animation-delay:.4s;
  background:#7cffd6; box-shadow:0 0 6px #7cffd6, 0 0 14px rgba(124,255,214,.7); }
.wci-led-3 { top:31%; right: 4%; width:4px;height:4px; animation-duration:.7s; animation-delay:.15s; }
.wci-led-4 { top:38%; right:14%; animation-duration:1.1s; animation-delay:.6s; }
.wci-led-5 { top:45%; right: 8%; width:5px;height:5px; animation-duration:.55s; animation-delay:.0s;
  background:#fff; box-shadow:0 0 6px #fff,0 0 14px rgba(255,255,255,.6); }
.wci-led-6 { top:52%; right:18%; animation-duration:1.7s; animation-delay:.25s; }
.wci-led-7 { top:60%; right: 5%; width:4px;height:4px; animation-duration:.85s; animation-delay:.5s;
  background:#5fe3ff; box-shadow:0 0 6px #5fe3ff,0 0 14px rgba(95,227,255,.7); }
.wci-led-8 { top:67%; right:11%; animation-duration:1.0s; animation-delay:.7s; }
.wci-led-9 { top:74%; right:16%; width:5px;height:5px; animation-duration:.6s; animation-delay:.1s; }
.wci-led-10{ top:22%; right:22%; width:3px;height:3px; animation-duration:.45s; animation-delay:.3s;
  background:#fff; box-shadow:0 0 5px #fff,0 0 10px rgba(255,255,255,.55); }
.wci-led-11{ top:48%; right:24%; width:4px;height:4px; animation-duration:1.4s; animation-delay:.55s; }
.wci-led-12{ top:80%; right: 9%; width:5px;height:5px; animation-duration:.75s; animation-delay:.2s; }

/* ============================================================
   Slide-specific LED positions (slides 1–3)
   Each slide's racks are in different zones; LEDs land only on rack
   faces, never on people, walls, ceiling, or glass.
   ============================================================ */

/* --- Slide 1 (Hosting): woman with tablet center-right.
   Front rack at right ~30%–10% (image space), far rack at right 5%–0%.
   Avoid the woman zone (~right 35%–55%). */
.wci-leds-1 .wci-led-1 { top:14%;  right:  3%; animation-duration:.9s;  animation-delay:.05s; }
.wci-leds-1 .wci-led-2 { top:22%;  right:  8%; width:5px;height:5px; animation-duration:1.3s; animation-delay:.4s; }
.wci-leds-1 .wci-led-3 { top:30%;  right:  1%; width:4px;height:4px; animation-duration:.7s;  animation-delay:.15s; }
.wci-leds-1 .wci-led-4 { top:38%;  right:  6%; animation-duration:1.1s; animation-delay:.6s; }
.wci-leds-1 .wci-led-5 { top:46%;  right: 11%; width:5px;height:5px; animation-duration:.55s; animation-delay:.0s; }
.wci-leds-1 .wci-led-6 { top:54%;  right:  2%; animation-duration:1.7s; animation-delay:.25s; }
.wci-leds-1 .wci-led-7 { top:62%;  right:  9%; width:4px;height:4px; animation-duration:.85s; animation-delay:.5s; }
.wci-leds-1 .wci-led-8 { top:70%;  right: 12%; animation-duration:1.0s; animation-delay:.7s; }
.wci-leds-1 .wci-led-9 { top:78%;  right:  4%; width:5px;height:5px; animation-duration:.6s;  animation-delay:.1s; }
.wci-leds-1 .wci-led-10{ top:26%;  right: 13%; width:3px;height:3px; animation-duration:.45s; animation-delay:.3s; }
.wci-leds-1 .wci-led-11{ top:50%;  right:  7%; width:4px;height:4px; animation-duration:1.4s; animation-delay:.55s; }
.wci-leds-1 .wci-led-12{ top:84%;  right: 10%; width:5px;height:5px; animation-duration:.75s; animation-delay:.2s; }

/* --- Slide 2 (Linux NOC): rack hall behind glass on the right (right 0–25%, top 25–70%).
   Operators sit at the desk center & right — keep LEDs only in the glass-rack band. */
.wci-leds-2 .wci-led-1 { top:30%;  right:  4%; animation-duration:.9s;  animation-delay:.05s; }
.wci-leds-2 .wci-led-2 { top:36%;  right: 10%; width:5px;height:5px; animation-duration:1.3s; animation-delay:.4s; }
.wci-leds-2 .wci-led-3 { top:42%;  right:  2%; width:4px;height:4px; animation-duration:.7s;  animation-delay:.15s; }
.wci-leds-2 .wci-led-4 { top:34%;  right: 16%; animation-duration:1.1s; animation-delay:.6s; }
.wci-leds-2 .wci-led-5 { top:48%;  right:  7%; width:5px;height:5px; animation-duration:.55s; animation-delay:.0s; }
.wci-leds-2 .wci-led-6 { top:54%;  right: 13%; animation-duration:1.7s; animation-delay:.25s; }
.wci-leds-2 .wci-led-7 { top:60%;  right:  3%; width:4px;height:4px; animation-duration:.85s; animation-delay:.5s; }
.wci-leds-2 .wci-led-8 { top:46%;  right: 19%; animation-duration:1.0s; animation-delay:.7s; }
.wci-leds-2 .wci-led-9 { top:38%;  right: 22%; width:5px;height:5px; animation-duration:.6s;  animation-delay:.1s; }
.wci-leds-2 .wci-led-10{ top:32%;  right:  8%; width:3px;height:3px; animation-duration:.45s; animation-delay:.3s; }
.wci-leds-2 .wci-led-11{ top:50%;  right: 16%; width:4px;height:4px; animation-duration:1.4s; animation-delay:.55s; }
.wci-leds-2 .wci-led-12{ top:62%;  right: 11%; width:5px;height:5px; animation-duration:.75s; animation-delay:.2s; }

/* --- Slide 3 (Reseller): tall rack at far right (right 0–20%, vertical 0–100%).
   Technician is center (right 35–55%). Cluster LEDs in the right rack column only. */
.wci-leds-3 .wci-led-1 { top: 8%;  right:  3%; animation-duration:.9s;  animation-delay:.05s; }
.wci-leds-3 .wci-led-2 { top:18%;  right: 10%; width:5px;height:5px; animation-duration:1.3s; animation-delay:.4s; }
.wci-leds-3 .wci-led-3 { top:26%;  right:  6%; width:4px;height:4px; animation-duration:.7s;  animation-delay:.15s; }
.wci-leds-3 .wci-led-4 { top:34%;  right: 14%; animation-duration:1.1s; animation-delay:.6s; }
.wci-leds-3 .wci-led-5 { top:42%;  right:  2%; width:5px;height:5px; animation-duration:.55s; animation-delay:.0s; }
.wci-leds-3 .wci-led-6 { top:50%;  right:  8%; animation-duration:1.7s; animation-delay:.25s; }
.wci-leds-3 .wci-led-7 { top:58%;  right: 12%; width:4px;height:4px; animation-duration:.85s; animation-delay:.5s; }
.wci-leds-3 .wci-led-8 { top:66%;  right:  4%; animation-duration:1.0s; animation-delay:.7s; }
.wci-leds-3 .wci-led-9 { top:74%;  right: 10%; width:5px;height:5px; animation-duration:.6s;  animation-delay:.1s; }
.wci-leds-3 .wci-led-10{ top:82%;  right:  6%; width:3px;height:3px; animation-duration:.45s; animation-delay:.3s; }
.wci-leds-3 .wci-led-11{ top:90%;  right: 14%; width:4px;height:4px; animation-duration:1.4s; animation-delay:.55s; }
.wci-leds-3 .wci-led-12{ top:14%;  right: 16%; width:5px;height:5px; animation-duration:.75s; animation-delay:.2s; }

@keyframes wci-led-blink{
  0%   { opacity:.95; transform:scale(1.0); }
  18%  { opacity:.18; transform:scale(.85); }
  32%  { opacity:1.0; transform:scale(1.15); }
  55%  { opacity:.45; transform:scale(.95); }
  72%  { opacity:.95; transform:scale(1.05); }
  85%  { opacity:.30; transform:scale(.9);  }
  100% { opacity:.95; transform:scale(1.0); }
}
@media (prefers-reduced-motion: reduce){
  .wci-led{ animation:none; opacity:.9 }
  .wci-slide-bg{ transition:none }
  .wci-slide.active .wci-slide-bg{ transform:scale(1.02) }
}
.wci-slide-inner{
  position:relative;z-index:5;
  max-width:var(--wc-container);width:100%;
  margin:0 auto;padding:48px;
  color:#fff;
}
.wci-slide-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(17,197,161,.16);
  color:var(--wc-accent-light);
  padding:6px 14px;border-radius:999px;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:18px;
  border:1px solid rgba(44,217,182,.28);
  backdrop-filter:blur(4px);
}
/* Live status pulse dot inside eyebrow */
.wci-pulse-dot{
  width:8px;height:8px;border-radius:50%;
  background:#7cffd6;
  box-shadow:0 0 0 0 rgba(124,255,214,.65);
  animation:wci-pulse-dot 1.6s ease-out infinite;
}
@keyframes wci-pulse-dot{
  0%   { box-shadow:0 0 0 0 rgba(124,255,214,.7);  transform:scale(1)   }
  70%  { box-shadow:0 0 0 8px rgba(124,255,214,0); transform:scale(1.05) }
  100% { box-shadow:0 0 0 0 rgba(124,255,214,0);  transform:scale(1)   }
}
@media (prefers-reduced-motion: reduce){
  .wci-pulse-dot{ animation:none }
}
.wci-slide-inner{
  position:relative;z-index:5;
}
.wci-slide-title{
  font-size:clamp(1.7rem, 3.4vw, 3rem);
  font-weight:800;color:#fff;
  line-height:1.15;letter-spacing:-.02em;
  margin:0 0 14px;max-width:680px;
}
.wci-slide-subtitle{
  font-size:clamp(.95rem,1.3vw,1.12rem);
  color:rgba(255,255,255,.85);
  margin:0 0 26px;max-width:560px;line-height:1.55;
}
.wci-slide-cta{display:flex;gap:12px;flex-wrap:wrap}
.wci-slide-cta .btn-primary{padding:13px 26px;font-size:.95rem}
.wci-slider-dots{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:7;display:flex;gap:10px;
}
.wci-slider-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.35);cursor:pointer;
  border:0;padding:0;
  transition:background .2s ease,transform .2s ease;
}
.wci-slider-dot.active,.wci-slider-dot:hover{
  background:var(--wc-accent);transform:scale(1.2);
}
/* Arrows moved to bottom-right cluster so they never overlap the slide title/subtitle */
.wci-slider-arrows{
  position:absolute;
  right:20px;
  bottom:14px;
  top:auto;
  left:auto;
  transform:none;
  width:auto;
  display:flex;
  gap:10px;
  z-index:7;
  padding:0;
  pointer-events:none;
}
.wci-slider-arrow{
  pointer-events:auto;
  width:38px;height:38px;border-radius:50%;
  background:rgba(5,8,20,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.wci-slider-arrow:hover{
  background:var(--wc-accent);
  border-color:var(--wc-accent);
  transform:translateY(-1px);
}
.wci-slider-arrow:focus-visible{
  outline:2px solid var(--wc-accent);
  outline-offset:2px;
}
@media (max-width:768px){
  .wci-slider-arrows{ right:12px; bottom:10px; gap:8px; }
  .wci-slider-arrow{ width:34px; height:34px; }
}

/* ---------- 13. Feature Grid ---------- */
.wci-features{
  background:var(--wc-card-soft);
  padding:48px 0;
}
.wci-features-inner{
  max-width:var(--wc-container);margin:0 auto;padding:0 40px;  /* was 24 */
}
@media (max-width:1280px){
  .wci-features-inner{padding:0 32px}
}
@media (max-width:768px){
  .wci-features-inner{padding:0 16px}
}
.wci-features-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.wci-feature{
  background:#fff;border:1px solid var(--wc-line-light);
  border-radius:var(--wc-radius);padding:22px;
  text-align:center;transition:transform .2s ease,box-shadow .2s ease;
}
.wci-feature:hover{transform:translateY(-3px);box-shadow:var(--wc-shadow)}
.wci-feature-icon{
  width:56px;height:56px;
  background:linear-gradient(135deg,var(--wc-accent),var(--wc-accent-light));
  color:#fff;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:14px;
}
.wci-feature h3{font-size:1.05rem;margin:0 0 6px}
.wci-feature p{color:var(--wc-ink-mute);font-size:.92rem;margin:0}

/* ---------- 14. Pricing Cards ---------- */
.wci-pricing-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:1.5rem 0 2rem;
}
.wci-plan{
  background:#fff;border:1px solid var(--wc-line-light);
  border-radius:var(--wc-radius-lg);padding:24px;
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.wci-plan:hover{transform:translateY(-4px);box-shadow:var(--wc-shadow-lg);border-color:var(--wc-accent)}
.wci-plan.featured{
  border-color:var(--wc-accent);
  box-shadow:0 18px 40px rgba(17,197,161,.22);
  position:relative;
}
.wci-plan.featured::before{
  content:"Most Popular";
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--wc-accent);color:#fff;
  padding:4px 14px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.wci-plan-name{
  font-size:.85rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--wc-accent-dark);
  margin-bottom:6px;
}
.wci-plan-price{
  font-size:2.2rem;font-weight:800;color:var(--wc-ink);
  line-height:1;margin:6px 0 4px;
}
.wci-plan-price small{font-size:.85rem;color:var(--wc-ink-mute);font-weight:500}
.wci-plan-period{font-size:.85rem;color:var(--wc-ink-mute);margin-bottom:14px}
.wci-plan ul{list-style:none;padding:0;margin:0 0 18px;flex:1}
.wci-plan ul li{
  padding:7px 0;font-size:.9rem;color:var(--wc-ink);
  border-bottom:1px dashed var(--wc-line-light);
  display:flex;align-items:flex-start;gap:8px;
}
.wci-plan ul li:last-child{border-bottom:0}
.wci-plan ul li::before{
  content:"✓";color:var(--wc-accent);font-weight:700;
  flex-shrink:0;
}

/* ---------- 15. Footer ---------- */
#footer, .wci-footer{
  background:linear-gradient(180deg, var(--wc-bg) 0%, #02060f 100%);
  color:var(--wc-text-dim);
  padding:0;margin-top:48px;
  border-top:1px solid rgba(17,197,161,.12);
  position:relative;
}
#footer::before, .wci-footer::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:160px;height:2px;
  background:linear-gradient(90deg, transparent, var(--wc-accent), transparent);
  border-radius:2px;
}
.wci-footer-main{
  max-width:var(--wc-container);margin:0 auto;
  padding:56px 24px 28px;
  display:grid;gap:32px;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
}
@media (max-width:980px){
  .wci-footer-main{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:560px){
  .wci-footer-main{grid-template-columns:1fr;gap:24px;padding:40px 18px 20px}
}
.wci-footer-col h4{
  color:#fff;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  margin:0 0 16px;
}
.wci-footer-col ul{list-style:none;padding:0;margin:0}
.wci-footer-col li{margin-bottom:10px}
.wci-footer-col a{
  color:var(--wc-text-dim);font-size:.9rem;
  text-decoration:none;transition:color .15s ease;
}
.wci-footer-col a:hover{color:var(--wc-accent-light);text-decoration:none}
.wci-footer-col p{color:var(--wc-text-dim);font-size:.9rem;margin:0 0 1em;line-height:1.6}

/* Footer brand block (gradient mark + wordmark, mirrors header) */
.wci-footer-brand{display:flex;flex-direction:column;gap:14px}
.wci-brand-footer{margin:0 0 4px}
.wci-brand-footer .wci-brand-mark{
  width:38px;height:38px;border-radius:12px;
}
.wci-brand-footer .wci-brand-text strong{font-size:1rem}
.wci-brand-footer .wci-brand-text > span{font-size:.72rem;color:var(--wc-text-muted)}

/* Legacy <img> fallback if used */
.wci-footer-brand > img{
  height:38px;width:auto;margin-bottom:6px;
  filter:brightness(0) invert(1);opacity:.92;
}

/* Footer social icons */
.wci-footer-social{
  list-style:none;padding:0;margin:8px 0 0;
  display:flex;gap:10px;
}
.wci-footer-social li{margin:0}
.wci-footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--wc-text-dim);
  font-size:.85rem;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}
.wci-footer-social a:hover{
  background:var(--wc-accent);border-color:var(--wc-accent);
  color:#03101d;transform:translateY(-2px);
}

/* Bottom bar */
.wci-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 24px;
  font-size:.82rem;color:var(--wc-text-muted);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  max-width:var(--wc-container);margin:0 auto;
}
.wci-footer-bottom small{font-size:.82rem;color:var(--wc-text-muted)}
.wci-footer-bottom-links{display:inline-flex;gap:18px;flex-wrap:wrap}
.wci-footer-bottom a{color:var(--wc-text-dim);margin:0;text-decoration:none}
.wci-footer-bottom a:hover{color:var(--wc-accent-light)}
@media (max-width:560px){
  .wci-footer-bottom{justify-content:center;text-align:center;flex-direction:column;gap:8px;padding:16px}
}

/* Legacy footer (when modern .wci-footer isn't used) */
#footer{
  padding:24px;text-align:center;
  background:var(--wc-bg);color:var(--wc-text-dim);
}
#footer a{color:var(--wc-text-dim);margin:0 6px}
#footer a:hover{color:var(--wc-accent);text-decoration:none}
#footer small{display:block;margin-top:10px;color:var(--wc-text-muted)}

/* ---------- 16. Misc Helpers (legacy AWBS) ---------- */
.ac{text-align:center}
.al{text-align:left}
.ar{text-align:right}
.bold{font-weight:700}
.vlt{vertical-align:top}
.vlb{vertical-align:bottom}
.vlm{vertical-align:middle}
.small{font-size:.85rem}
.width-100{width:100%}
.width-99{width:99%}
.width-95{width:95%}
.width-90{width:90%}
.width-85{width:85%}
.width-80{width:80%}
.width-75{width:75%}
.width-70{width:70%}
.width-65{width:65%}
.width-60{width:60%}
.width-55{width:55%}
.width-50{width:50%}
.width-45{width:45%}
.width-40{width:40%}
.width-35{width:35%}
.width-30{width:30%}
.width-25{width:25%}
.width-22{width:22%}
.width-20{width:20%}
/* Sidebar cell variant: keep the umenu wide enough to be usable */
td.wci-portal-sidebar-cell{min-width:220px}
.width-15{width:15%}
.width-10{width:10%}
.width-5{width:5%}
.width-1{width:1%}
.alc{margin-left:auto;margin-right:auto}
.al{text-align:left}
.ar{text-align:right}
@media (max-width: 768px){
  /* Only stack the SIDEBAR cell on mobile, NOT every .width-20 utility cell
     (AWBS uses .width-20 on data-table cells in pricingfull, invoices, etc.) */
  td.wci-portal-sidebar-cell{width:100%;min-width:0;display:block}
  td.width-1{display:none}
  td.width-100.wci-portal-content-cell{width:100%;display:block}
}
.p-15{padding:15px}
.p-2{padding:1rem}
.mb-3{margin-bottom:1rem}
.no-gutters > [class*="col-"]{padding-left:0;padding-right:0}
.justify-content-center{justify-content:center}

/* ---------- 17. Welcome / Portal ---------- */
.wci-portal-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin:1rem 0;
}
.wci-stat{
  background:linear-gradient(135deg,var(--wc-bg) 0%,var(--wc-bg-3) 100%);
  color:#fff;border-radius:var(--wc-radius);
  padding:22px;
}
.wci-stat-label{font-size:.78rem;color:var(--wc-text-dim);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.wci-stat-value{font-size:1.6rem;font-weight:800;color:#fff}
.wci-stat-value .accent{color:var(--wc-accent-light)}

/* ============================================================
   AWBS portal sidebar ($umenu) used on welcome.php and the
   logged-in member area.

   IMPORTANT: AWBS uses `width-20` as a generic 20%-width utility
   class, applied to MANY data-table cells (e.g. pricingfull.php,
   manage.php?ca=invoices, spincheck.php). DO NOT scope sidebar
   menu styling to bare `td.width-20` — it will hijack data tables
   and force every cell into a vertical stack.

   These rules are scoped to .wci-portal-sidebar-cell, which we
   add explicitly to the sidebar <td> in top.php and welcome.php.
   ============================================================ */
td.wci-portal-sidebar-cell{
  vertical-align:top;
  padding:0 16px 0 0;
}
/* Whatever AWBS injects inside (ul, nav, table, div), give it a
   clean white card + readable spacing so menu items don't squash. */
td.wci-portal-sidebar-cell > *{
  width:100% !important;
}
td.wci-portal-sidebar-cell ul{
  list-style:none;
  margin:0;
  padding:0;
  background:#fff;
  border:1px solid var(--wc-line-light, #e6ebf2);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(5,8,20,.04);
}
/* Section header rows (AWBS often uses <li class="head"> or
   bold-text-only items, or wrapped <h3>/<h4>) */
td.wci-portal-sidebar-cell ul li.head,
td.wci-portal-sidebar-cell ul li.heading,
td.wci-portal-sidebar-cell ul li.title,
td.wci-portal-sidebar-cell ul li b:only-child,
td.wci-portal-sidebar-cell h3,
td.wci-portal-sidebar-cell h4{
  background:linear-gradient(180deg, rgba(17,197,161,.10), rgba(17,197,161,.04));
  color:#0b1525;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:10px 14px;
  margin:0;
  border-bottom:1px solid rgba(17,197,161,.18);
  border-top:1px solid rgba(17,197,161,.10);
  display:block;
}
td.wci-portal-sidebar-cell ul li{
  list-style:none;
  margin:0;
  padding:0;
  border-bottom:1px solid rgba(5,8,20,.05);
  background:transparent;
  height:auto !important;
  white-space:normal;
  display:block;
}
td.wci-portal-sidebar-cell ul li:last-child{ border-bottom:0 }
td.wci-portal-sidebar-cell ul li a{
  display:block;
  padding:10px 14px;
  color:#1a2332;
  font-size:.88rem;
  font-weight:500;
  text-decoration:none;
  border-left:3px solid transparent;
  background:transparent;
  white-space:normal;
  line-height:1.35;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
td.wci-portal-sidebar-cell ul li a:hover,
td.wci-portal-sidebar-cell ul li a:focus,
td.wci-portal-sidebar-cell ul li.active > a,
td.wci-portal-sidebar-cell ul li a.active,
td.wci-portal-sidebar-cell ul li a.selectedMenu{
  background:rgba(17,197,161,.08);
  color:#0b1525;
  border-left-color:var(--wc-accent, #11C5A1);
  font-weight:600;
  text-decoration:none;
}
/* Bootstrap nav-pills variant if AWBS emits one */
td.wci-portal-sidebar-cell .nav.nav-pills,
td.wci-portal-sidebar-cell .nav-stacked{
  flex-direction:column;
  background:#fff;
  border:1px solid var(--wc-line-light, #e6ebf2);
  border-radius:10px;
  overflow:hidden;
  padding:0;
}
td.wci-portal-sidebar-cell .nav-pills .nav-link,
td.wci-portal-sidebar-cell .nav-pills > li > a{
  display:block;
  padding:10px 14px;
  color:#1a2332;
  border-radius:0;
  border-left:3px solid transparent;
  font-size:.88rem;
  font-weight:500;
  background:transparent;
  white-space:normal;
}
td.wci-portal-sidebar-cell .nav-pills .nav-link:hover,
td.wci-portal-sidebar-cell .nav-pills .nav-link.active,
td.wci-portal-sidebar-cell .nav-pills > li.active > a{
  background:rgba(17,197,161,.10) !important;
  color:#0b1525 !important;
  border-left:3px solid var(--wc-accent, #11C5A1) !important;
}
/* Make sure the right-side content cell (AWBS width-100 utility) breathes */
td.width-100{ vertical-align:top }

/* ----------------------------------------------------------------
   Global portal layout (AWBS clientportal pages: updatecc, manage,
   billing, etc.). top.php injects sidebar + content cells into
   #doc when $clientportal && $umenu. The content cell needs left
   padding so it doesn't crash into the sidebar.
   ---------------------------------------------------------------- */
table#doc{ width:100%; max-width:1200px; margin:0 auto; }
table#doc > tbody > tr > td.wci-portal-sidebar-cell{
  width:20%;
  min-width:220px;
  vertical-align:top;
  padding:18px 0 24px 18px;
}
table#doc > tbody > tr > td.wci-portal-content-cell{
  vertical-align:top;
  padding:18px 24px 24px 18px;
}
@media (max-width:768px){
  table#doc{ display:block; }
  table#doc > tbody,
  table#doc > tbody > tr{ display:block; }
  table#doc > tbody > tr > td.wci-portal-sidebar-cell,
  table#doc > tbody > tr > td.wci-portal-content-cell{
    display:block;
    width:100%;
    min-width:0;
    padding:12px;
  }
  table#doc > tbody > tr > td.width-1{ display:none; }
}

/* Side menu (welcome.php $left) */
#left, .left-menu{
  background:var(--wc-card-soft);
  border:1px solid var(--wc-line-light);
  border-radius:var(--wc-radius);padding:14px;
}

/* ---------- 18. Cookies banner overrides (cookies-message lib) ---------- */
.cookies-message-container{
  background:var(--wc-bg) !important;color:#fff !important;
  border-top:2px solid var(--wc-accent) !important;
}
.cookies-message-container a{color:var(--wc-accent-light) !important}
.cookies-message-container .cookies-message-button-accept{
  background:var(--wc-accent) !important;color:#fff !important;
  border:0 !important;border-radius:6px !important;padding:8px 16px !important;
}

/* ---------- 19. Watermark / Util (preserve AWBS) ---------- */
#watermarklogo{opacity:.05;pointer-events:none}
#blockDiv{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(5,8,20,.85);align-items:center;justify-content:center;
}
#blockDivText{color:#fff;font-weight:600;margin-bottom:14px}

/* ---------- 20. Responsive ---------- */
@media (max-width: 991px){
  .wci-headerbar{padding:14px 16px;gap:14px}
  .wci-brand img{height:36px}
  .wci-nav{padding:0 14px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .wci-nav a, #menu a{padding:12px 14px;font-size:.88rem;white-space:nowrap}
  /* #mainTD responsive padding handled by the td#mainTD rules above */
  .wci-slide-inner{padding:32px 24px}
  .wci-hero-slider{aspect-ratio: 4/3;min-height:380px}
  table[bordercolor="#99CCCC"]{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width: 600px){
  h1{font-size:1.6rem}
  h2{font-size:1.35rem}
  #tablehead{padding:20px 16px 4px;font-size:1.2rem}
  /* #mainTD responsive padding handled by the td#mainTD rules above */
  .wci-slide-title{font-size:1.45rem}
  .wci-slide-subtitle{font-size:.92rem}
  .wci-features{padding:32px 0}
  .wci-footer-main{padding:36px 18px 18px;gap:24px}
}

/* ============================================================
   AWBS divTable (used on imanage.php / manage.php / journal.php
   and other portal listings). AWBS emits a CSS-table built from
   <div> elements that REQUIRE explicit display:table-* values —
   without these the rows and cells collapse to plain blocks.
   ============================================================ */
.divTable{
  display:table;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--wc-line-light, #e6ebf2);
  border-radius:var(--wc-radius, 10px);
  overflow:hidden;
  box-shadow:var(--wc-shadow-sm, 0 1px 2px rgba(5,8,20,.04));
  margin:.6rem 0 1rem;
  font-size:.9rem;
  color:var(--wc-ink, #1a2332);
}
.divTableBody  { display:table-row-group }
.divTableHeading{ display:table-header-group; font-weight:700 }
.divTableFoot   { display:table-footer-group; font-weight:700; background:#f5f7fa }
.divTableRow    { display:table-row }
.divTableCell,
.divTableHead{
  display:table-cell;
  padding:10px 12px;
  vertical-align:middle;
  border-bottom:1px solid var(--wc-line-light, #e6ebf2);
}
/* Last row removes the bottom border */
.divTableRow:last-child > .divTableCell{ border-bottom:0 }

/* Header row (AWBS uses .boxtitle on every header cell) */
.divTableRow > .divTableCell.boxtitle,
.divTableHeading .divTableCell{
  background:#0f172a;
  color:#fff;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:11px 12px;
  border-bottom:0;
  white-space:nowrap;
}
.divTableRow > .divTableCell.boxtitle a,
.divTableRow > .divTableCell.boxtitle a:visited,
.divTableRow > .divTableCell.boxtitle a.boxlink,
.divTableRow > .divTableCell.boxtitle a.boxlink:visited,
.divTableHeading a,
.divTableHeading a:visited{
  color:#fff !important;
  text-decoration:none;
}
.divTableRow > .divTableCell.boxtitle a:hover,
.divTableRow > .divTableCell.boxtitle a.boxlink:hover,
.divTableHeading a:hover{
  color:var(--wc-accent-light, #5eead4) !important;
}
.divTableRow > .divTableCell.boxtitle .fa-sort,
.divTableRow > .divTableCell.boxtitle .fas{
  color:rgba(255,255,255,.55);
  font-size:.7rem;
  margin-left:2px;
}

/* Zebra striping for data rows (AWBS toggles row1_0 / row1_1) */
.divTableRow.row1_0 > .divTableCell,
.divTableRow.row_0  > .divTableCell{ background:#ffffff }
.divTableRow.row1_1 > .divTableCell,
.divTableRow.row_1  > .divTableCell{ background:var(--wc-card-soft, #f5f8fb) }
.divTableRow.row1_0:hover > .divTableCell,
.divTableRow.row1_1:hover > .divTableCell,
.divTableRow.row_0:hover  > .divTableCell,
.divTableRow.row_1:hover  > .divTableCell{
  background:rgba(17,197,161,.08);
}

/* Status pill (AWBS emits <span class="status nbtn status-XYZ">) */
.status,
span.status{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.4;
  background:#888;
  color:#fff;
  white-space:nowrap;
}
.status-pending             { background:#D9534F }
.status-pending.transfer    { background:#A68500 }
.status-active,
.status-open                { background:#3fad46 }
.status-suspended           { background:#F0AD4E }
.status-customer-reply      { background:#ff6600 }
.status-fraud,
.status-answered            { background:#000 }
.status-expired             { background:#004258 }
.status-cancelled,
.status-terminated          { background:#87939F }
.status-onhold,
.status-delivered           { background:#224488 }
.status-inprogress          { background:#cc0000 }
.status-closed              { background:#888 }
.status-paid,
.status-accepted            { background:#498302 }
.status-unpaid              { background:#ED3E48 }
.status-collections         { background:#9A141E; color:#fff }
.status-refunded            { background:#319FC3 }
.status-lost,
.status-dead                { background:#fff; color:#000; border:1px solid #ccc }
.status-custom              { background:#fff; color:#000; border:1px solid #000 }

/* Action buttons inside data rows */
.divTableCell .btn-sm{ padding:6px 10px; font-size:.78rem; border-radius:6px }
.divTableCell .btn-outline-secondary{
  background:#fff;
  border:1px solid var(--wc-line-light, #d0d7e0);
  color:var(--wc-ink, #1a2332);
}
.divTableCell .btn-outline-secondary:hover{
  background:var(--wc-card-soft, #f0f4f8);
  border-color:var(--wc-ink-mute, #94a3b8);
}
.divTableCell .btn-outline-secondary img{
  height:14px; width:auto; vertical-align:middle;
  filter:grayscale(.2);
}
.divTableCell .btn-danger{
  background:#dc3545; border-color:#dc3545; color:#fff;
  font-weight:600;
}
.divTableCell .btn-danger:hover{
  background:#c82333; border-color:#bd2130; color:#fff;
}
.divTableCell font[color="red"]{ color:#c0392b !important; font-weight:600 }

/* Boxlink (sortable header link) outside divTable headers (e.g. legacy <td.boxtitle>) */
.boxtitle a.boxlink,
a.boxlink,
a.boxlink:visited{ color:#A10707; text-decoration:none }
.boxtitle a.boxlink:hover,
a.boxlink:hover{ color:#060606; text-decoration:none }

/* Responsive: instead of collapsing each cell to its own block (which loses
   the columnar structure entirely), let the divTable scroll horizontally
   when the content can't fit. Wrap it so tooltips don't get clipped. */
@media (max-width: 768px){
  .divTable{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* re-enable internal table layout via a child element so the rows still
       align as columns inside the scroller. */
  }
  .divTable > .divTableBody{ display:table; width:100%; min-width:640px }
  .divTableRow > .divTableCell.boxtitle{
    font-size:.7rem; padding:9px 10px;
  }
  .divTableCell{ padding:9px 10px; font-size:.85rem }
}

/* ---------- 21. Print ---------- */
@media print{
  #header,#menu,.wci-nav-wrap,.wci-hero-slider,#footer,.wci-footer{display:none}
  body{background:#fff;color:#000}
  #mainTD{box-shadow:none;border:0;padding:0;margin:0}
}

/* ---------- 22. Cookie Banner (AWBS + fallback) ---------- */
.wci-cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9998;
  background:rgba(5,8,20,.97);color:#fff;
  border:1px solid rgba(17,197,161,.35);
  border-radius:var(--wc-radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  animation:wciCookieIn .35s ease-out both;
  max-width:var(--wc-container);margin:0 auto;
}
.wci-cookie-banner.is-hiding{animation:wciCookieOut .3s ease-in both}
@keyframes wciCookieIn{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes wciCookieOut{
  from{opacity:1;transform:translateY(0)}
  to  {opacity:0;transform:translateY(20px)}
}
.wci-cookie-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding:18px 22px;
}
.wci-cookie-text{
  flex:1 1 320px;margin:0;
  font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.9);
}
.wci-cookie-actions{
  display:flex;gap:10px;flex-shrink:0;align-items:center;
}
.wci-cookie-info{
  color:var(--wc-accent-light);font-size:.88rem;font-weight:500;
  text-decoration:none;padding:8px 12px;border-radius:var(--wc-radius-sm);
  transition:color .15s ease,background .15s ease;
}
.wci-cookie-info:hover{
  color:#fff;background:rgba(255,255,255,.06);text-decoration:none;
}
.wci-cookie-accept{
  background:var(--wc-accent);color:#fff;
  border:0;border-radius:var(--wc-radius-sm);
  padding:10px 22px;font-weight:600;font-size:.9rem;
  cursor:pointer;transition:background .15s ease,transform .12s ease;
  font-family:var(--wc-font);
}
.wci-cookie-accept:hover{background:var(--wc-accent-dark);transform:translateY(-1px)}
.wci-cookie-accept:focus{outline:none;box-shadow:var(--wc-shadow-glow)}
@media (max-width:600px){
  .wci-cookie-banner{left:8px;right:8px;bottom:8px;border-radius:var(--wc-radius)}
  .wci-cookie-inner{padding:14px 16px;gap:12px}
  .wci-cookie-text{font-size:.85rem;flex-basis:100%}
  .wci-cookie-actions{width:100%;justify-content:flex-end}
}

/* ---------- 23. Page Hero (interior pages) ---------- */
.wci-page-hero{
  background:linear-gradient(135deg,var(--wc-bg) 0%,var(--wc-bg-3) 100%);
  color:#fff;padding:48px 0 56px;
  position:relative;overflow:hidden;
}
.wci-page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 20%, rgba(17,197,161,.18), transparent 60%);
  pointer-events:none;
}
.wci-page-hero-inner{
  max-width:var(--wc-container);margin:0 auto;padding:0 24px;
  position:relative;z-index:2;
}
.wci-page-title{
  font-size:clamp(1.6rem,3vw,2.5rem);
  color:#fff;margin:6px 0 12px;
  letter-spacing:-.02em;font-weight:800;
}
.wci-page-lede{
  font-size:clamp(.95rem,1.2vw,1.1rem);
  color:rgba(255,255,255,.82);
  max-width:720px;margin:0 0 18px;line-height:1.6;
}
.wci-feature-pills{
  list-style:none;padding:0;margin:18px 0 0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.wci-feature-pills li{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  padding:8px 14px;border-radius:999px;
  font-size:.85rem;font-weight:500;
}
.wci-feature-pills i{color:var(--wc-accent-light)}
@media(max-width:600px){
  .wci-page-hero{padding:32px 0 36px}
  .wci-feature-pills li{font-size:.8rem;padding:6px 10px}
}

/* ---------- 24. Legal / policy pages ---------- */
.wci-legal-body{
  line-height:1.7;color:var(--wc-ink);font-size:.96rem;
}
.wci-legal-body h1,.wci-legal-body h2,.wci-legal-body h3,
.wci-legal-body h4,.wci-legal-body h5{
  margin-top:1.6em;margin-bottom:.5em;
}
.wci-legal-body strong, .wci-legal-body b{color:var(--wc-ink);font-weight:700}
.wci-legal-body ul,.wci-legal-body ol{padding-left:1.6em;margin:0 0 1em}
.wci-legal-body li{margin-bottom:.4em}
.wci-legal-body p, .wci-legal-body div[align="justify"]{
  margin-bottom:1em;text-align:justify;
}
.wci-legal-body a{color:var(--wc-accent-dark)}

/* ---------- 25. Portfolio grid (webdesigns.php) ---------- */
.wci-portfolio{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.wci-portfolio-item{
  background:#fff;border:1px solid var(--wc-line-light);
  border-radius:var(--wc-radius);overflow:hidden;
  display:flex;flex-direction:column;
  padding:10px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.wci-portfolio-item:hover{transform:translateY(-3px);box-shadow:var(--wc-shadow)}
.wci-portfolio-item > a{
  display:block;background:var(--wc-card-soft);
  height:160px;overflow:hidden;
  border-radius:calc(var(--wc-radius) - 4px);
}
.wci-portfolio-item > a img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.wci-portfolio-item:hover > a img{transform:scale(1.04)}
.wci-portfolio-body{padding:14px 8px 6px}
.wci-portfolio-body h3{
  font-size:1.05rem;margin:0 0 8px;
}
.wci-portfolio-body h3 a{color:var(--wc-ink);text-decoration:none}
.wci-portfolio-body h3 a:hover{color:var(--wc-accent-dark)}
.wci-portfolio-body p{
  font-size:.9rem;color:var(--wc-ink-mute);margin:0;line-height:1.55;
}

/* ---------- 26. Bootstrap helpers we use ---------- */
.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
.row > [class*="col-"]{padding-right:15px;padding-left:15px}
.col-md-3,.col-md-5,.col-md-6,.col-md-7,.col-sm-3{
  position:relative;width:100%;
}
@media(min-width:768px){
  .col-md-3{flex:0 0 25%;max-width:25%}
  .col-md-5{flex:0 0 41.66%;max-width:41.66%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-7{flex:0 0 58.33%;max-width:58.33%}
  .order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}
}
@media(min-width:576px){
  .col-sm-3{flex:0 0 50%;max-width:50%}
}
@media(min-width:992px){
  .col-sm-3{flex:0 0 25%;max-width:25%}
}
.d-flex{display:flex}
.flex-grow-1{flex-grow:1}
.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.form-control{
  display:block;width:100%;
  padding:10px 14px;border:1px solid var(--wc-line-light);
  border-radius:var(--wc-radius-sm);background:#fff;
  font-size:.95rem;line-height:1.5;
  min-height:42px;height:auto;
  box-sizing:border-box;
}
/* Bootstrap 4 .form-control sets explicit height that clips text — override */
input.form-control,
select.form-control,
textarea.form-control{
  height:auto;
  min-height:42px;
  line-height:1.5;
}
textarea.form-control{ min-height:120px }
.form-group label{
  display:block;font-weight:600;margin-bottom:6px;font-size:.9rem;color:var(--wc-ink-2);
}

/* ============================================================
   27. Modern page layout (rewritten product/legal pages)
   ============================================================ */

/* Wraps everything below the hero on rewritten pages.
   Styled as a white card to match #mainTD on AWBS-rendered pages,
   so theme pages (linux_hosting, refunds, etc.) get the same white
   content panel sitting on the gray body canvas. */
.wci-page-body{
  max-width: var(--wc-container);
  margin: 24px auto 32px;
  padding: 32px 36px 40px;
  background: #ffffff;
  border-radius: var(--wc-radius-lg);
  box-shadow: 0 4px 16px rgba(5,8,20,.08), 0 2px 4px rgba(5,8,20,.04);
  border: 1px solid var(--wc-line-light);
}
@media(max-width:1280px){
  .wci-page-body{ margin: 20px 32px 28px; padding: 28px 32px 36px; max-width: none; }
}
@media(max-width:991px){
  .wci-page-body{ margin: 16px 16px 24px; padding: 22px 20px 28px; }
}
@media(max-width:600px){
  .wci-page-body{ margin: 12px 12px 20px; padding: 18px 16px 24px; border-radius: var(--wc-radius); }
}

/* Intro paragraph block above pricing */
.wci-intro{
  max-width: 920px;
  margin: 0 auto 28px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--wc-ink-2);
}
.wci-intro p{ margin: 0 0 .8em }
.wci-intro-cross{
  margin-top: 1em;
  font-size: .95rem;
  color: var(--wc-ink-mute);
}

/* Inline accent text link */
.wci-textlink{
  color: var(--wc-accent-dark);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.wci-textlink:hover{
  color: var(--wc-accent);
  border-bottom-color: var(--wc-accent);
  text-decoration: none;
}

/* Section titles inside white content area */
.wci-section-title{
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wc-ink);
  margin: 0 0 18px;
  text-align: center;
  position: relative;
}
.wci-section-title::after{
  content:"";
  display:block;
  width: 56px; height: 3px;
  background: var(--wc-accent);
  border-radius: 3px;
  margin: 10px auto 0;
}
/* When a section title sits on a dark band */
.wci-section-title-light{
  color: #fff;
}
.wci-section-title-light::after{
  background: var(--wc-accent-light);
}

/* ---------- Pricing section wrapper ---------- */
.wci-pricing{
  margin: 12px 0 36px;
}

/* ---------- Pricing cards (extended) ---------- */
.wci-plan-head{
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--wc-line-light);
}
.wci-plan-head h3{
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wc-accent-dark);
}
/* New price markup using nested spans */
.wci-plan .wci-plan-price{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--wc-ink);
  line-height: 1;
  margin: 4px 0 6px;
}
.wci-plan-currency{
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wc-ink-mute);
  align-self: flex-start;
  margin-top: .35em;
}
.wci-plan-amount{
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--wc-ink);
  line-height: 1;
}
.wci-plan .wci-plan-period{
  font-size: .9rem;
  font-weight: 500;
  color: var(--wc-ink-mute);
  margin: 0 0 0 4px;
  align-self: flex-end;
  padding-bottom: .35em;
}
.wci-plan-tagline{
  font-size: .82rem;
  color: var(--wc-ink-mute);
  margin: 4px 0 0;
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Featured/highlighted plan */
.wci-plan-featured{
  border-color: var(--wc-accent);
  box-shadow: 0 18px 40px rgba(17,197,161,.22);
  position: relative;
  transform: translateY(-4px);
}
.wci-plan-featured:hover{
  transform: translateY(-8px);
}
.wci-plan-badge{
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wc-accent);
  color: #fff;
  padding: 5px 16px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(17,197,161,.35);
}
/* Plan features list (newer markup) */
.wci-plan-features{
  list-style: none;
  padding: 0;
  margin: 6px 0 18px;
  flex: 1;
}
.wci-plan-features li{
  padding: 8px 0;
  font-size: .9rem;
  color: var(--wc-ink-2);
  border-bottom: 1px dashed var(--wc-line-light);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wci-plan-features li:last-child{ border-bottom: 0 }
.wci-plan-features li i{
  color: var(--wc-accent);
  font-size: .85rem;
  margin-top: 4px;
  flex-shrink: 0;
}
/* Suppress legacy ::before checkmark when explicit <i> is present */
.wci-plan-features li::before{ content: none }

/* Block button used inside pricing cards */
.btn-block{
  display: block;
  width: 100%;
  text-align: center;
}
.wci-plan .btn{
  margin-top: auto;
  padding: 12px 20px;
  font-size: .95rem;
  font-weight: 700;
}

/* ---------- Dark "Every plan includes" band ---------- */
.wci-features-band{
  background: linear-gradient(160deg, var(--wc-bg) 0%, var(--wc-bg-3) 100%);
  color: var(--wc-text-dim);
  border-radius: var(--wc-radius-lg);
  padding: 40px 24px 32px;
  margin: 32px 0 0;
}
.wci-features-band-inner{
  max-width: 1080px;
  margin: 0 auto;
}
.wci-includes-grid{
  list-style: none;
  padding: 0;
  margin: 24px 0 18px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.wci-includes-grid li{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--wc-radius);
  font-size: .9rem;
  color: var(--wc-text-dim);
  transition: background .2s ease, border-color .2s ease;
}
.wci-includes-grid li:hover{
  background: rgba(17,197,161,.08);
  border-color: rgba(17,197,161,.3);
}
.wci-includes-grid li i{
  color: var(--wc-accent-light);
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.wci-band-cta{
  margin: 18px 0 0;
  text-align: center;
  font-size: .95rem;
}
.wci-band-cta .wci-textlink{
  color: var(--wc-accent-light);
}
.wci-band-cta .wci-textlink:hover{
  color: #fff;
  border-bottom-color: var(--wc-accent-light);
}

/* ============================================================
   28. Generic content cards (legal/policy/text pages)
   ============================================================ */
.wci-card{
  background: #fff;
  border: 1px solid var(--wc-line-light);
  border-radius: var(--wc-radius-lg);
  padding: 32px 36px;
  box-shadow: var(--wc-shadow-sm);
  margin: 0 auto 24px;
  max-width: 980px;
}
.wci-card.wci-legal{
  padding: 36px 44px;
}
.wci-legal-foot{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--wc-line-light);
  font-size: .88rem;
  color: var(--wc-ink-mute);
}
.wci-legal-foot a{ color: var(--wc-accent-dark) }
@media(max-width:600px){
  .wci-card{ padding: 22px 18px }
  .wci-card.wci-legal{ padding: 24px 20px }
  .wci-page-body{ padding: 22px 14px 36px }
  .wci-section-title{ font-size: 1.35rem }
}

/* ============================================================
   29. AWBS-rendered pages without our hero (CSS-only safety net)
   Pages: support.php, aLogIn.php, check.php, whois.php,
          transcheck.php, welcome.php, kb.php, helpdesk.php,
          cart.php, createacct.php, manage.php, hosting.php,
          dnhosting.php, hsignup.php, packages.php, pricingfull.php,
          forsale.php, templates.php
   ============================================================ */
/* Body wrapper that AWBS injects content into.
   Note: do NOT touch #mainTD here — its padding/margin are owned by the
   #mainTD rule near line 370 (the white card container). Only #mainData
   (the outer AWBS table wrapper) needs the centering + padding. */
#mainData{
  max-width: var(--wc-container);
  margin: 0 auto;
  padding: 28px 24px 40px;
  background: transparent;
}
/* Make AWBS native tables breathe */
#mainData table, #mainTD table{
  max-width: 100%;
}
/* Top hero substitute injected via :before for AWBS pages with no hero */
body.awbs-page #mainData::before{
  content: "";
  display: block;
  height: 4px;
  background: var(--wc-accent);
  margin-bottom: 24px;
  border-radius: 2px;
}
/* AWBS form/table headings */
.t1_head, #tablehead{
  background: var(--wc-bg) !important;
  color: #fff !important;
  font-weight: 700;
}
.t1_head td, #tablehead td{
  color: #fff !important;
  padding: 10px 12px;
}
/* Style native AWBS form fields globally */
.formfield, .formtextarea,
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=url], input[type=number],
input[type=search], input[type=date], input[type=datetime-local],
input[type=time], select, textarea{
  font-family: var(--wc-font);
  font-size: .95rem;
  line-height: 1.5;
  border: 1px solid var(--wc-line-light);
  border-radius: var(--wc-radius-sm);
  padding: 10px 14px;
  background: #fff;
  color: var(--wc-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  height: auto;
  vertical-align: middle;
}
/* AWBS legacy formfield class — force adequate height even when AWBS sets size attribute */
.formfield{ min-height:42px !important; height:auto !important; line-height:1.5 !important; padding:10px 14px !important; }
.formtextarea{ min-height:120px !important; height:auto !important; line-height:1.5 !important; padding:10px 14px !important; }
.formfield:focus, .formtextarea:focus,
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--wc-accent);
  box-shadow: var(--wc-shadow-glow);
}
.formtextarea, textarea{ min-height: 120px }
input[type=submit], input[type=button], button[type=submit], button[type=button]{
  background: var(--wc-accent);
  color: #fff;
  border: 1px solid var(--wc-accent);
  border-radius: var(--wc-radius-sm);
  padding: 9px 18px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
input[type=submit]:hover, input[type=button]:hover,
button[type=submit]:hover, button[type=button]:hover{
  background: var(--wc-accent-dark);
  transform: translateY(-1px);
}
input[type=reset]{
  background: #fff;
  color: var(--wc-ink-2);
  border: 1px solid var(--wc-line-light);
  border-radius: var(--wc-radius-sm);
  padding: 9px 18px;
  cursor: pointer;
}
/* Style native checkboxes/radios globally */
input[type=checkbox], input[type=radio]{
  width: 16px;
  height: 16px;
  accent-color: var(--wc-accent);
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}
/* Hide the legacy capslock indicator by default — JS toggles .cl-on */
.cl-on, #capslock, #capslock_indicator, .capslock-indicator,
[id*="caps_lock"], [class*="capslock"]{
  display: none;
}
.cl-on.show, .cl-on.active,
#capslock.show, #capslock_indicator.show{
  display: inline-block;
  background: var(--wc-warn);
  color: #fff;
  font-size: .78rem;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
}

/* Bi-annual / billing tables: prevent ugly mid-word wrap */
td.t1_even strong, td.t1_odd strong,
td.t1_even b, td.t1_odd b{
  white-space: nowrap;
}
/* Legal pages: kill text-align:justify (causes river/gap issues) */
.wci-legal-body, .wci-legal-body p, .wci-legal-body div{
  text-align: left !important;
}

/* Strip emojis that snuck into AWBS click-here labels */
a[href*=".php"]::after, a[href*="aLogIn"]::after{ content: none }

/* Portfolio image standardization */
.wci-portfolio-item > a{ height: 220px }

/* ============================================================
   30. Services.php popup-only page minimal styling
   ============================================================ */
body.awbs-popup{
  font-family: var(--wc-font);
  background: #fff;
  color: var(--wc-ink);
  padding: 24px 28px;
  margin: 0;
}
body.awbs-popup h1, body.awbs-popup h2, body.awbs-popup h3{
  color: var(--wc-ink);
  margin-top: 1em;
}
body.awbs-popup a{ color: var(--wc-accent-dark) }

/* Hide empty header pills (AWBS may inject empty currency/lang widgets) */
.wci-header-pill:empty,
#currency_select:empty,
.wci-lang-switch:empty{ display:none !important }

/* Welcome bar directly under the slider */
.wci-welcome-bar{
  max-width:var(--wc-container);
  margin:18px auto 8px;
  padding:0 40px;  /* was 24 */
}
@media (max-width:1280px){
  .wci-welcome-bar{ padding:0 32px }
}
.wci-welcome-title{
  font-family:var(--wc-font);
  font-size:1.75rem;
  font-weight:700;
  color:var(--wc-ink);
  letter-spacing:-.015em;
  margin:0 0 6px;
  line-height:1.25;
}
.wci-welcome-title::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:linear-gradient(90deg, var(--wc-accent), #5fe3ff);
  border-radius:2px;
  margin-top:10px;
}
@media (max-width:768px){
  .wci-welcome-bar{ padding:0 16px }
  .wci-welcome-title{ font-size:1.4rem }
}
/* Hide the now-unused tablehead cell on the homepage */
#tablehead{ display:none }

/* ============================================================
   31. Testimonial card (homepage)
   ============================================================ */
.wci-testimonial-card{
  background: #ffffff;
  border-radius: 18px;
  padding: 32px 34px;
  box-shadow: 0 12px 40px rgba(5,8,20,.08), 0 2px 8px rgba(5,8,20,.04);
  border: 1px solid rgba(17,197,161,.12);
  position: relative;
  overflow: hidden;
}
.wci-testimonial-card::before{
  content: "\201C";
  position: absolute;
  top: -18px;
  left: 18px;
  font-family: Georgia, serif;
  font-size: 120px;
  line-height: 1;
  color: rgba(17,197,161,.14);
  font-weight: 700;
  pointer-events: none;
}
.wci-testimonial{
  position: relative;
  z-index: 1;
}
.wci-testimonial-text{
  font-size: 16px;
  line-height: 1.7;
  color: #1a2332;
  font-style: italic;
  margin: 0 0 22px 0;
  font-weight: 400;
}
.wci-testimonial-meta{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(5,8,20,.06);
}
.wci-testimonial-avatar{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #11C5A1 0%, #5fe3ff 60%, #2cd9b6 100%);
  color: #03101d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  font-family: var(--wc-font);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(17,197,161,.28);
  text-transform: uppercase;
}
.wci-testimonial-author{
  font-size: 14px;
  color: #4a5568;
  line-height: 1.4;
  font-style: normal;
}
.wci-testimonial-author strong{
  display: block;
  color: #050814;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}
@media (max-width: 576px){
  .wci-testimonial-card{ padding: 24px 22px }
  .wci-testimonial-text{ font-size: 15px }
}

/* ============================================================
   31. AWBS data-table safety net
   AWBS emits data tables (pricingfull.php, manage.php?ca=invoices,
   spincheck.php, whois.php, transcheck.php, etc.) using the same
   .width-XX utility classes as the layout chrome. Force any <td>
   that combines a width utility with another AWBS data-cell class
   (vlt = vertical-align top, ac = align center, al/ar = align L/R,
   bold, head) back to a proper table-cell, regardless of any
   higher-up rule that might try to display:block them.
   ============================================================ */
table td.width-1.vlt, table td.width-1.ac,
table td.width-5.vlt, table td.width-5.ac,
table td.width-10.vlt, table td.width-10.ac,
table td.width-15.vlt, table td.width-15.ac,
table td.width-20.vlt, table td.width-20.ac, table td.width-20.bold,
table td.width-22.vlt, table td.width-22.ac,
table td.width-25.vlt, table td.width-25.ac,
table td.width-30.vlt, table td.width-30.ac,
table td.width-35.vlt, table td.width-35.ac,
table td.width-40.vlt, table td.width-40.ac,
table td.width-45.vlt, table td.width-45.ac,
table td.width-50.vlt, table td.width-50.ac,
table td.width-55.vlt, table td.width-55.ac,
table td.width-60.vlt, table td.width-60.ac,
table td.width-65.vlt, table td.width-65.ac,
table td.width-70.vlt, table td.width-70.ac,
table td.width-75.vlt, table td.width-75.ac,
table td.width-80.vlt, table td.width-80.ac,
table td.width-85.vlt, table td.width-85.ac,
table td.width-90.vlt, table td.width-90.ac,
table td.width-95.vlt, table td.width-95.ac,
table td.width-96.vlt, table td.width-96.ac,
table td.width-97.vlt, table td.width-97.ac,
table td.width-98.vlt, table td.width-98.ac,
table td.width-99.vlt, table td.width-99.ac,
table td.boxtitle, table td.t1_head, table td.t1_even, table td.t1_odd{
  display: table-cell !important;
  width: auto;
  min-width: 0;
}
/* Ensure AWBS data tables (#mainData inner data tables) honor
   table-layout:auto so cells size to content rather than collapsing. */
#mainTD table, #mainData table, table.data, table#spincheck, table#domainPrices{
  table-layout: auto;
  border-collapse: collapse;
  width: 100%;
}

/* ============================================================
   32. spincheck.php WHOIS-error row safety
   AWBS puts a status indicator <img> (g_yellow_on.gif / g_red_on.gif /
   g_green_on.gif) inside the very narrow Select-column cell
   (<td class="bold al width-1">). If the image is ever missing, the
   browser falls back to alt text "Whois Server Error - please try
   again later" and renders it inside the 1%-width cell, breaking
   each word onto its own line and distorting the table.

   These rules ensure the cell never overflows into a vertical word
   stack, even when the image fails to load. */
table#spincheck td.width-1{
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  font-size: 0;          /* hide any text/alt fallback */
  line-height: 0;
  vertical-align: middle;
}
table#spincheck td.width-1 > *{
  font-size: .9rem;       /* restore size for real children */
  line-height: 1.4;
}
table#spincheck td.width-1 img{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}
table#spincheck td.width-1 input[type=checkbox]{
  margin: 0;
}
/* Equal-thirds layout for the data columns so Status sits true-center
   regardless of how short or long the domain names are. */
table#spincheck{ table-layout: fixed; width: 100%; }
table#spincheck td.boxtitle{ width: auto; }
/* Domain column: ~33% — plenty of room, no wrap */
table#spincheck td:nth-child(2){
  width: 33%;
  white-space: nowrap;
  text-align: left;
  padding-left: 4px;
}
/* Status column: ~33% center — pill sits centered under the header */
table#spincheck td:nth-child(3){
  width: 33%;
  text-align: center;
  white-space: nowrap;
  padding: 0 12px;
}
/* Price column: ~28% right-aligned so price sits at the right side */
table#spincheck td:nth-child(4){
  width: 28%;
  white-space: nowrap;
  text-align: right;
  padding-right: 14px;
}
/* Header row uses the same alignment as body cells */
table#spincheck tr:first-child td.boxtitle:nth-child(2){ text-align: left; padding-left: 4px; }
table#spincheck tr:first-child td.boxtitle:nth-child(3){ text-align: center; }
table#spincheck tr:first-child td.boxtitle:nth-child(4){ text-align: right; padding-right: 14px; }


/* ============================================================
   28. Scroll helper (floating back-to-top / scroll-to-bottom)
   ============================================================ */
.wci-scroll-helper{
  position:fixed; right:20px; bottom:24px; z-index:9999;
  width:46px; height:46px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wc-accent); color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:0 6px 18px rgba(5,8,20,.22), 0 2px 4px rgba(5,8,20,.14);
  cursor:pointer;
  opacity:0; transform:translateY(8px) scale(.92);
  transition:opacity .2s ease, transform .2s ease, background .15s ease;
}
.wci-scroll-helper:not([hidden]){ opacity:.95; transform:translateY(0) scale(1); }
.wci-scroll-helper:hover{ background:var(--wc-accent-dark); opacity:1; }
.wci-scroll-helper:focus-visible{ outline:2px solid #ffffff; outline-offset:2px }
.wci-scroll-helper .wci-scroll-arrow{ display:block; transition:transform .2s ease }
.wci-scroll-helper.is-down .wci-scroll-arrow{ transform:rotate(180deg) }
.wci-scroll-helper.is-up   .wci-scroll-arrow{ transform:rotate(0deg) }
@media(max-width:600px){
  .wci-scroll-helper{ right:14px; bottom:16px; width:42px; height:42px; }
}
@media print{ .wci-scroll-helper{ display:none !important } }