/* WEBHOST SOLUTIONS — Knowledgebase V2
   Presentation only. Native WHMCS knowledgebase search, category/article routes,
   print, tags, ratings, admin edit links, Tag Cloud and Support panels stay intact. */

html.whs-knowledgebase-page,
html.whs-knowledgebase-page body,
body.whs-knowledgebase-page,
body.whs-knowledgebase-page #main-body,
body.whs-knowledgebase-page #main-body > .container,
body.whs-knowledgebase-page #main-body > .container-fluid,
body.whs-knowledgebase-page .main-content,
body.whs-knowledgebase-page .primary-content {
    background:#07111f !important;
    color:#dfe5f6;
}

body.whs-knowledgebase-page #main-body { padding-top:18px; padding-bottom:14px; }
body.whs-knowledgebase-page #main-body,
body.whs-knowledgebase-page #main-body > .container,
body.whs-knowledgebase-page #main-body > .container-fluid,
body.whs-knowledgebase-page #main-body > .container > .row,
body.whs-knowledgebase-page #main-body > .container-fluid > .row,
body.whs-knowledgebase-page #main-body .main-content,
body.whs-knowledgebase-page #main-body .primary-content {
    min-height:0 !important;
    height:auto !important;
    margin-bottom:0 !important;
}
body.whs-knowledgebase-page #footer { margin-top:0 !important; }

/* Hero */
body.whs-knowledgebase-page .header-lined {
    position:relative;
    overflow:hidden;
    margin:0 0 18px !important;
    padding:19px 26px 18px !important;
    border:1px solid rgba(142,154,212,.17) !important;
    border-radius:20px !important;
    background:radial-gradient(circle at 94% 6%,rgba(134,82,226,.18),transparent 38%),linear-gradient(145deg,#11192f,#0c1427) !important;
    box-shadow:0 16px 38px rgba(0,0,0,.12) !important;
}
body.whs-knowledgebase-page .header-lined::before {
    content:"HELP CENTER";
    position:relative;
    z-index:1;
    display:block;
    margin-bottom:6px;
    color:#aeb7ff;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.22em;
}
body.whs-knowledgebase-page .header-lined::after {
    content:"Find answers, guides and helpful information.";
    position:relative;
    z-index:1;
    display:block;
    margin-top:8px;
    color:#98a5c2;
    font-size:14px;
    line-height:1.55;
}
body.whs-knowledgebase-page .header-lined h1 {
    position:relative;
    z-index:1;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    color:#f7f9ff !important;
    font-size:34px !important;
    line-height:1.14 !important;
    font-weight:800 !important;
    letter-spacing:-.025em;
    overflow-wrap:anywhere;
}
body.whs-knowledgebase-page .header-lined h1 small,
body.whs-knowledgebase-page .header-lined .breadcrumb,
body.whs-knowledgebase-page .header-lined ol.breadcrumb { display:none !important; }

/* Native Categories / Tag Cloud / Support panels */
body.whs-knowledgebase-page .sidebar .panel,
body.whs-knowledgebase-page .sidebar .panel-sidebar,
body.whs-knowledgebase-page .sidebar-primary .panel,
body.whs-knowledgebase-page .sidebar-secondary .panel {
    overflow:hidden;
    margin:0 0 18px !important;
    border:1px solid rgba(142,154,212,.16) !important;
    border-radius:18px !important;
    background:radial-gradient(circle at 100% 0,rgba(129,81,218,.10),transparent 42%),linear-gradient(145deg,#11192f,#0c1427) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.10) !important;
}
body.whs-knowledgebase-page .sidebar .panel-heading,
body.whs-knowledgebase-page .sidebar .panel-sidebar > .panel-heading,
body.whs-knowledgebase-page .sidebar-primary .panel-heading,
body.whs-knowledgebase-page .sidebar-secondary .panel-heading {
    min-height:64px;
    padding:0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(142,154,212,.10) !important;
    color:#eef1fb !important;
    background:linear-gradient(135deg,rgba(17,25,47,.96),rgba(20,26,54,.96)) !important;
}
body.whs-knowledgebase-page .sidebar .panel-title,
body.whs-knowledgebase-page .sidebar-primary .panel-title,
body.whs-knowledgebase-page .sidebar-secondary .panel-title {
    display:flex;
    align-items:center;
    min-height:64px;
    margin:0 !important;
    padding:16px 18px !important;
    color:#eef1fb !important;
    font-size:17px !important;
    line-height:1.35;
    font-weight:800 !important;
}
body.whs-knowledgebase-page .sidebar .panel-title > i:not(.panel-minimise),
body.whs-knowledgebase-page .sidebar-primary .panel-title > i:not(.panel-minimise),
body.whs-knowledgebase-page .sidebar-secondary .panel-title > i:not(.panel-minimise) {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 40px;
    width:40px;
    height:40px;
    margin:0 12px 0 0 !important;
    border:1px solid rgba(169,145,255,.25);
    border-radius:11px;
    color:#c5b5ff !important;
    background:linear-gradient(145deg,rgba(117,91,225,.26),rgba(142,82,205,.18));
    font-size:15px !important;
}
body.whs-knowledgebase-page .sidebar .panel-minimise,
body.whs-knowledgebase-page .sidebar-primary .panel-minimise,
body.whs-knowledgebase-page .sidebar-secondary .panel-minimise {
    margin-left:auto !important;
    color:#8290ae !important;
}
body.whs-knowledgebase-page .sidebar .panel-body,
body.whs-knowledgebase-page .sidebar .list-group,
body.whs-knowledgebase-page .sidebar-primary .panel-body,
body.whs-knowledgebase-page .sidebar-secondary .panel-body {
    border:0 !important;
    color:#dbe2f4;
    background:#0b1427 !important;
}
body.whs-knowledgebase-page .sidebar select,
body.whs-knowledgebase-page .sidebar .form-control,
body.whs-knowledgebase-page .sidebar-primary select,
body.whs-knowledgebase-page .sidebar-primary .form-control {
    width:100%;
    min-height:50px;
    padding:0 42px 0 14px !important;
    border:1px solid rgba(142,154,212,.24) !important;
    border-radius:12px !important;
    color:#eef2ff !important;
    -webkit-text-fill-color:#eef2ff;
    background:#081225 !important;
    box-shadow:none !important;
    font-size:15px;
}
body.whs-knowledgebase-page .sidebar select option,
body.whs-knowledgebase-page .sidebar-primary select option { color:#111827; background:#fff; }

body.whs-knowledgebase-page .sidebar .list-group-item {
    padding:12px 16px !important;
    border-color:rgba(142,154,212,.09) !important;
    color:#b7c0d8 !important;
    background:#0b1427 !important;
}
body.whs-knowledgebase-page .sidebar .list-group-item a { color:#c8d0e6 !important; }
body.whs-knowledgebase-page .sidebar .list-group-item:hover,
body.whs-knowledgebase-page .sidebar .list-group-item.active { color:#fff !important; background:#121d34 !important; }
body.whs-knowledgebase-page .sidebar .list-group-item i { color:#b9aaff !important; }

/* Support navigation grid */
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Support"] .list-group,
body.whs-knowledgebase-page .sidebar-secondary .panel[menuItemName="Support"] .list-group {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    width:100%;
    margin:0 !important;
    padding:12px !important;
    background:#0b1427 !important;
}
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Support"] .list-group-item,
body.whs-knowledgebase-page .sidebar-secondary .panel[menuItemName="Support"] .list-group-item {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    min-width:0 !important;
    width:100% !important;
    min-height:52px;
    margin:0 !important;
    padding:11px 12px !important;
    border:1px solid rgba(142,154,212,.13) !important;
    border-radius:10px !important;
    white-space:normal !important;
    overflow:hidden !important;
    color:#c4cce0 !important;
    background:#0e182c !important;
    text-decoration:none !important;
}
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Support"] .list-group-item.active,
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Support"] .list-group-item:hover,
body.whs-knowledgebase-page .sidebar-secondary .panel[menuItemName="Support"] .list-group-item.active,
body.whs-knowledgebase-page .sidebar-secondary .panel[menuItemName="Support"] .list-group-item:hover {
    color:#fff !important;
    border-color:rgba(169,145,255,.34) !important;
    background:#111d35 !important;
}

/* Main Knowledgebase area */
body.whs-knowledgebase-page .whs-kb { width:100%; color:#dfe5f6; }

/* Search */
body.whs-knowledgebase-page .whs-kb-search-form { margin:0 0 18px; }
body.whs-knowledgebase-page .whs-kb-search {
    position:relative;
    display:flex;
    align-items:stretch;
    width:100%;
    min-height:52px;
    margin:0;
    border:1px solid rgba(142,154,212,.20);
    border-radius:14px;
    background:#081225;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    overflow:hidden;
}
body.whs-knowledgebase-page .whs-kb-search-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 48px;
    width:48px;
    color:#a997ff;
    background:#081225;
}
body.whs-knowledgebase-page .whs-kb-search .form-control {
    flex:1 1 auto;
    width:1%;
    min-width:0;
    height:52px;
    margin:0 !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:0 !important;
    color:#eef2ff !important;
    -webkit-text-fill-color:#eef2ff;
    background:#081225 !important;
    box-shadow:none !important;
    font-size:15px;
}
body.whs-knowledgebase-page .whs-kb-search .form-control::placeholder { color:#74809d; -webkit-text-fill-color:#74809d; opacity:1; }
body.whs-knowledgebase-page .whs-kb-search .input-group-btn { display:flex; flex:0 0 auto; }
body.whs-knowledgebase-page .whs-kb-search #btnKnowledgebaseSearch {
    min-width:112px;
    height:52px;
    margin:0;
    padding:0 18px !important;
    border:0 !important;
    border-left:1px solid rgba(175,145,255,.25) !important;
    border-radius:0 !important;
    color:#fff !important;
    background:linear-gradient(135deg,#6756e9 0%,#a54bd8 100%) !important;
    font-size:14px;
    font-weight:800;
    box-shadow:none !important;
}

/* Section cards */
body.whs-knowledgebase-page .whs-kb-section,
body.whs-knowledgebase-page .whs-kb-article-card,
body.whs-knowledgebase-page .whs-kb-rate-card {
    overflow:hidden;
    margin:0 0 18px;
    border:1px solid rgba(142,154,212,.17);
    border-radius:20px;
    background:radial-gradient(circle at 100% 0,rgba(129,81,218,.10),transparent 38%),linear-gradient(145deg,#11192f,#0c1427);
    box-shadow:0 16px 36px rgba(0,0,0,.12);
}
body.whs-knowledgebase-page .whs-kb-section-heading {
    display:flex;
    align-items:center;
    gap:13px;
    padding:20px 22px 17px;
    border-bottom:1px solid rgba(142,154,212,.11);
}
body.whs-knowledgebase-page .whs-kb-section-icon,
body.whs-knowledgebase-page .whs-kb-item-icon,
body.whs-knowledgebase-page .whs-kb-rate-icon,
body.whs-knowledgebase-page .whs-kb-empty-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:1px solid rgba(169,145,255,.25);
    color:#c5b5ff;
    background:linear-gradient(145deg,rgba(117,91,225,.26),rgba(142,82,205,.18));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
body.whs-knowledgebase-page .whs-kb-section-icon {
    width:42px;
    height:42px;
    border-radius:12px;
    font-size:17px;
}
body.whs-knowledgebase-page .whs-kb-section-heading h2,
body.whs-knowledgebase-page .whs-kb-section-heading h3 {
    margin:0;
    color:#f5f7ff;
    font-size:19px;
    line-height:1.3;
    font-weight:800;
}
body.whs-knowledgebase-page .whs-kb-section-heading p {
    margin:4px 0 0;
    color:#929fbd;
    font-size:13px;
    line-height:1.5;
}
body.whs-knowledgebase-page .whs-kb-section-body { padding:18px 20px 20px; }

/* Category cards */
body.whs-knowledgebase-page .whs-kb-category-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
body.whs-knowledgebase-page .whs-kb-category-card,
body.whs-knowledgebase-page .whs-kb-list-item {
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-width:0;
    border:1px solid rgba(142,154,212,.14);
    border-radius:14px;
    background:#0b1528;
}
body.whs-knowledgebase-page .whs-kb-category-card { padding:16px; }
body.whs-knowledgebase-page .whs-kb-item-icon {
    width:40px;
    height:40px;
    border-radius:11px;
    font-size:15px;
}
body.whs-knowledgebase-page .whs-kb-item-content { min-width:0; flex:1 1 auto; }
body.whs-knowledgebase-page .whs-kb-item-title {
    color:#f0f3ff !important;
    font-size:15px;
    line-height:1.45;
    font-weight:800;
    text-decoration:none !important;
    overflow-wrap:anywhere;
}
body.whs-knowledgebase-page .whs-kb-item-title:hover { color:#d8d0ff !important; }
body.whs-knowledgebase-page .whs-kb-count {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    min-height:24px;
    margin-left:5px;
    padding:3px 8px;
    border:1px solid rgba(160,137,255,.28);
    border-radius:999px;
    color:#cfc5ff;
    background:rgba(111,87,218,.14);
    font-size:11px;
    font-weight:800;
}
body.whs-knowledgebase-page .whs-kb-item-content p {
    margin:6px 0 0;
    color:#909dbc;
    font-size:13px;
    line-height:1.55;
    overflow-wrap:anywhere;
}
body.whs-knowledgebase-page .whs-kb-admin-edit {
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-left:8px;
    color:#9ea9c2 !important;
    font-size:12px;
    font-weight:700;
    text-decoration:none !important;
}

/* Article lists */
body.whs-knowledgebase-page .whs-kb-article-list { display:grid; gap:10px; }
body.whs-knowledgebase-page .whs-kb-list-item {
    align-items:center;
    padding:14px 15px;
    transition:border-color .15s,background-color .15s;
}
body.whs-knowledgebase-page .whs-kb-list-item:hover { border-color:rgba(159,137,255,.30); background:#101b31; }
body.whs-knowledgebase-page .whs-kb-item-arrow { flex:0 0 auto; margin-left:auto; color:#7f8aa8; font-size:12px; }

/* Empty / alerts */
body.whs-knowledgebase-page .whs-kb-empty { text-align:center; }
body.whs-knowledgebase-page .whs-kb-empty-icon { width:58px; height:58px; margin:0 auto 14px; border-radius:16px; font-size:22px; }
body.whs-knowledgebase-page .alert {
    border:1px solid rgba(142,154,212,.18) !important;
    border-radius:12px !important;
    color:#c8d2e8 !important;
    background:#0c172b !important;
}

/* Article */
body.whs-knowledgebase-page .whs-kb-article-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:20px 22px 17px;
    border-bottom:1px solid rgba(142,154,212,.11);
}
body.whs-knowledgebase-page .whs-kb-article-heading { display:flex; align-items:center; gap:13px; min-width:0; }
body.whs-knowledgebase-page .whs-kb-article-heading h2 {
    margin:0;
    color:#f5f7ff;
    font-size:22px;
    line-height:1.3;
    font-weight:800;
    overflow-wrap:anywhere;
}
body.whs-knowledgebase-page .whs-kb-print {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(142,154,212,.20) !important;
    border-radius:12px !important;
    color:#c8c0ff !important;
    background:#101b31 !important;
    text-decoration:none !important;
}
body.whs-knowledgebase-page .whs-kb-article-content {
    padding:22px;
    color:#cbd3e6;
    font-size:15px;
    line-height:1.78;
    overflow-wrap:anywhere;
}
body.whs-knowledgebase-page .whs-kb-article-content > :first-child { margin-top:0; }
body.whs-knowledgebase-page .whs-kb-article-content > :last-child { margin-bottom:0; }
body.whs-knowledgebase-page .whs-kb-article-content h1,
body.whs-knowledgebase-page .whs-kb-article-content h2,
body.whs-knowledgebase-page .whs-kb-article-content h3,
body.whs-knowledgebase-page .whs-kb-article-content h4 { color:#f3f6ff !important; }
body.whs-knowledgebase-page .whs-kb-article-content a { color:#bba9ff !important; }
body.whs-knowledgebase-page .whs-kb-article-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 20px 20px;
    border-top:1px solid rgba(142,154,212,.10);
}
body.whs-knowledgebase-page .whs-kb-article-details {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 !important;
    padding:0 !important;
    list-style:none;
}
body.whs-knowledgebase-page .whs-kb-article-details li {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    padding:7px 10px;
    border:1px solid rgba(142,154,212,.14);
    border-radius:999px;
    color:#9da9c4;
    background:#0c172b;
    font-size:12px;
}
body.whs-knowledgebase-page .whs-kb-article-details i { color:#b8a7ff; }
body.whs-knowledgebase-page .whs-kb-article-details a { color:#bba9ff !important; }
body.whs-knowledgebase-page .whs-kb-article-edit {
    flex:0 0 auto;
    min-height:40px;
    margin:0 !important;
    padding:9px 13px !important;
    border:1px solid rgba(142,154,212,.20) !important;
    border-radius:10px !important;
    color:#dce2f4 !important;
    background:#111c33 !important;
}

/* Helpful rating */
body.whs-knowledgebase-page .whs-kb-rate-card {
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 20px;
}
body.whs-knowledgebase-page .whs-kb-rate-icon {
    width:46px;
    height:46px;
    border-radius:13px;
    font-size:18px;
}
body.whs-knowledgebase-page .whs-kb-rate-card form {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    margin:0;
}
body.whs-knowledgebase-page .whs-kb-rate-copy { min-width:0; }
body.whs-knowledgebase-page .whs-kb-rate-copy h3 {
    margin:0;
    color:#f4f6ff;
    font-size:17px;
    line-height:1.35;
    font-weight:800;
}
body.whs-knowledgebase-page .whs-kb-rate-copy p { margin:4px 0 0; color:#95a2bd; font-size:13px; }
body.whs-knowledgebase-page .whs-kb-rate-actions { display:flex; gap:9px; flex:0 0 auto; }
body.whs-knowledgebase-page .whs-kb-rate-actions .btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:88px;
    min-height:44px;
    margin:0;
    padding:10px 14px !important;
    border:1px solid rgba(142,154,212,.20) !important;
    border-radius:11px !important;
    color:#dfe5f6 !important;
    background:#101b31 !important;
    font-size:14px;
    font-weight:800;
    text-decoration:none !important;
}
body.whs-knowledgebase-page .whs-kb-rate-actions .whs-kb-vote-yes { border-color:rgba(109,217,166,.28) !important; color:#aee9cc !important; }
body.whs-knowledgebase-page .whs-kb-rate-actions .whs-kb-vote-no { border-color:rgba(239,104,112,.26) !important; color:#f0b3bc !important; }
body.whs-knowledgebase-page .whs-kb-vote-thanks { padding:18px 20px 0; }

@media (max-width:991px) {
    body.whs-knowledgebase-page #main-body > .container > .row > [class*="col-md-"] { float:none; width:100%; }
}

@media (max-width:767px) {
    body.whs-knowledgebase-page #main-body { padding-top:14px; padding-bottom:12px; }
    body.whs-knowledgebase-page .header-lined { margin-bottom:16px !important; padding:18px 20px 17px !important; border-radius:18px !important; }
    body.whs-knowledgebase-page .header-lined h1 { font-size:28px !important; }

    body.whs-knowledgebase-page .sidebar .panel,
    body.whs-knowledgebase-page .sidebar .panel-sidebar,
    body.whs-knowledgebase-page .whs-kb-section,
    body.whs-knowledgebase-page .whs-kb-article-card,
    body.whs-knowledgebase-page .whs-kb-rate-card { border-radius:18px !important; }

    body.whs-knowledgebase-page .whs-kb-search { min-height:50px; }
    body.whs-knowledgebase-page .whs-kb-search .form-control { height:50px; font-size:14px; }
    body.whs-knowledgebase-page .whs-kb-search-icon { flex-basis:44px; width:44px; }
    body.whs-knowledgebase-page .whs-kb-search #btnKnowledgebaseSearch { min-width:92px; height:50px; padding:0 13px !important; }

    body.whs-knowledgebase-page .whs-kb-section-heading { padding:17px 16px 14px; }
    body.whs-knowledgebase-page .whs-kb-section-body { padding:14px 16px 16px; }
    body.whs-knowledgebase-page .whs-kb-category-grid { grid-template-columns:1fr; gap:10px; }
    body.whs-knowledgebase-page .whs-kb-category-card { padding:14px; }
    body.whs-knowledgebase-page .whs-kb-list-item { padding:13px; }

    body.whs-knowledgebase-page .whs-kb-article-header { padding:17px 16px 14px; }
    body.whs-knowledgebase-page .whs-kb-article-heading h2 { font-size:20px; }
    body.whs-knowledgebase-page .whs-kb-article-content { padding:18px 16px; }
    body.whs-knowledgebase-page .whs-kb-article-footer { align-items:flex-start; flex-direction:column; padding:15px 16px 17px; }
    body.whs-knowledgebase-page .whs-kb-article-edit { width:100%; justify-content:center; }

    body.whs-knowledgebase-page .whs-kb-rate-card { align-items:flex-start; padding:17px 16px; }
    body.whs-knowledgebase-page .whs-kb-rate-card form { align-items:stretch; flex-direction:column; gap:12px; }
    body.whs-knowledgebase-page .whs-kb-rate-actions { width:100%; }
    body.whs-knowledgebase-page .whs-kb-rate-actions .btn { flex:1 1 0; }

    body.whs-knowledgebase-page .sidebar .panel[menuItemName="Support"] .list-group,
    body.whs-knowledgebase-page .sidebar-secondary .panel[menuItemName="Support"] .list-group { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:380px) {
    body.whs-knowledgebase-page .whs-kb-search { flex-wrap:wrap; overflow:visible; border:0; background:transparent; gap:9px; }
    body.whs-knowledgebase-page .whs-kb-search-icon { position:absolute; z-index:2; left:0; top:0; height:50px; border:1px solid rgba(142,154,212,.20); border-right:0; border-radius:12px 0 0 12px; }
    body.whs-knowledgebase-page .whs-kb-search .form-control {
        flex:1 1 calc(100% - 44px);
        width:calc(100% - 44px);
        margin-left:44px !important;
        border:1px solid rgba(142,154,212,.20) !important;
        border-left:0 !important;
        border-radius:0 12px 12px 0 !important;
    }
    body.whs-knowledgebase-page .whs-kb-search .input-group-btn { flex:1 1 100%; width:100%; }
    body.whs-knowledgebase-page .whs-kb-search #btnKnowledgebaseSearch { width:100%; border:1px solid rgba(175,145,255,.35) !important; border-radius:12px !important; }
    body.whs-knowledgebase-page .sidebar .panel[menuItemName="Support"] .list-group,
    body.whs-knowledgebase-page .sidebar-secondary .panel[menuItemName="Support"] .list-group { grid-template-columns:1fr; }
}

@media print {
    body.whs-knowledgebase-page .whs-kb-print,
    body.whs-knowledgebase-page .sidebar,
    body.whs-knowledgebase-page .header-lined,
    body.whs-knowledgebase-page #header,
    body.whs-knowledgebase-page #footer,
    body.whs-knowledgebase-page .whs-kb-rate-card,
    body.whs-knowledgebase-page .whs-kb-related-section { display:none !important; }
    body.whs-knowledgebase-page .whs-kb-article-card { border:0 !important; box-shadow:none !important; background:#fff !important; color:#111 !important; }
    body.whs-knowledgebase-page .whs-kb-article-content { color:#111 !important; }
}

@media (prefers-reduced-motion:reduce) {
    body.whs-knowledgebase-page * { scroll-behavior:auto !important; transition:none !important; }
}


/* V2 — mobile/search/clickability polish.
   Keep native WHMCS routes and forms; only enlarge the real article link target
   and neutralise Bootstrap input-group sizing that collapsed the Search button. */
body.whs-knowledgebase-page .whs-kb-search {
    display:grid !important;
    grid-template-columns:48px minmax(0,1fr) 112px;
    align-items:stretch;
}
body.whs-knowledgebase-page .whs-kb-search .whs-kb-search-icon {
    width:48px !important;
    min-width:48px !important;
}
body.whs-knowledgebase-page .whs-kb-search .form-control {
    width:100% !important;
    min-width:0 !important;
}
body.whs-knowledgebase-page .whs-kb-search .input-group-btn {
    display:block !important;
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    white-space:normal !important;
}
body.whs-knowledgebase-page .whs-kb-search #btnKnowledgebaseSearch {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
}

/* Give native category selects a visible WEBHOST chevron instead of Safari's black arrow. */
body.whs-knowledgebase-page .sidebar select,
body.whs-knowledgebase-page .sidebar-primary select {
    -webkit-appearance:none !important;
    appearance:none !important;
    background-color:#081225 !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bba9ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    background-size:18px 18px !important;
}

/* Tag Cloud links use the established WEBHOST purple instead of stock Six blue. */
body.whs-knowledgebase-page .sidebar .panel-body a,
body.whs-knowledgebase-page .sidebar-primary .panel-body a,
body.whs-knowledgebase-page .sidebar-secondary .panel-body a {
    color:#bba9ff !important;
    text-decoration:none !important;
}
body.whs-knowledgebase-page .sidebar .panel-body a:hover,
body.whs-knowledgebase-page .sidebar-primary .panel-body a:hover,
body.whs-knowledgebase-page .sidebar-secondary .panel-body a:hover {
    color:#ded6ff !important;
}

/* The article itself is now the genuine full-card link — no fake JS click handler. */
body.whs-knowledgebase-page .whs-kb-list-item {
    position:relative;
    display:block;
    padding:0;
}
body.whs-knowledgebase-page .whs-kb-list-item-link {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-width:0;
    padding:14px 15px;
    color:inherit !important;
    text-decoration:none !important;
    border-radius:13px;
}
body.whs-knowledgebase-page .whs-kb-list-item-link:hover,
body.whs-knowledgebase-page .whs-kb-list-item-link:focus {
    color:inherit !important;
    text-decoration:none !important;
    outline:0;
}
body.whs-knowledgebase-page .whs-kb-list-item-link:focus-visible {
    outline:2px solid #bba9ff;
    outline-offset:-3px;
}
body.whs-knowledgebase-page .whs-kb-list-item-link .whs-kb-item-arrow {
    margin-left:auto;
}
body.whs-knowledgebase-page .whs-kb-list-admin-edit {
    position:absolute;
    top:12px;
    right:38px;
    z-index:2;
    margin:0 !important;
    padding:5px 7px;
    border-radius:7px;
    background:#0b1528;
}

@media (max-width:767px) {
    body.whs-knowledgebase-page .whs-kb-search {
        grid-template-columns:44px minmax(0,1fr) 98px !important;
        min-height:50px !important;
        overflow:hidden !important;
        border:1px solid rgba(142,154,212,.20) !important;
        background:#081225 !important;
        gap:0 !important;
    }
    body.whs-knowledgebase-page .whs-kb-search .whs-kb-search-icon {
        position:static !important;
        width:44px !important;
        min-width:44px !important;
        height:50px !important;
        border:0 !important;
        border-radius:0 !important;
    }
    body.whs-knowledgebase-page .whs-kb-search .form-control {
        height:50px !important;
        padding:0 8px !important;
    }
    body.whs-knowledgebase-page .whs-kb-search .input-group-btn {
        display:block !important;
        width:98px !important;
        min-width:98px !important;
        max-width:98px !important;
    }
    body.whs-knowledgebase-page .whs-kb-search #btnKnowledgebaseSearch {
        width:100% !important;
        height:50px !important;
        padding:0 10px !important;
        border:0 !important;
        border-left:1px solid rgba(175,145,255,.25) !important;
        border-radius:0 !important;
    }
}

@media (max-width:360px) {
    body.whs-knowledgebase-page .whs-kb-search {
        grid-template-columns:40px minmax(0,1fr) 88px !important;
    }
    body.whs-knowledgebase-page .whs-kb-search .whs-kb-search-icon {
        width:40px !important;
        min-width:40px !important;
    }
    body.whs-knowledgebase-page .whs-kb-search .input-group-btn {
        width:88px !important;
        min-width:88px !important;
        max-width:88px !important;
    }
}

/* V4 — Tag Cloud: turn native tag links into obvious full-card click targets.
   Keep WHMCS' real tag URLs intact; this is presentation only. */
body.whs-knowledgebase-page .sidebar .panel-body > a,
body.whs-knowledgebase-page .sidebar-primary .panel-body > a,
body.whs-knowledgebase-page .sidebar-secondary .panel-body > a {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    box-sizing:border-box !important;
    width:calc(100% - 32px) !important;
    min-height:52px !important;
    margin:12px 16px !important;
    padding:13px 15px !important;
    border:1px solid rgba(142,154,212,.18) !important;
    border-radius:12px !important;
    color:#d8d2ff !important;
    background:#0e182c !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.01) !important;
    font-weight:700 !important;
    text-decoration:none !important;
    transition:border-color .15s ease,background-color .15s ease,transform .15s ease !important;
}
body.whs-knowledgebase-page .sidebar .panel-body > a::after,
body.whs-knowledgebase-page .sidebar-primary .panel-body > a::after,
body.whs-knowledgebase-page .sidebar-secondary .panel-body > a::after {
    content:"›";
    flex:0 0 auto;
    color:#9f93c8;
    font-size:25px;
    line-height:1;
    font-weight:400;
}
body.whs-knowledgebase-page .sidebar .panel-body > a:hover,
body.whs-knowledgebase-page .sidebar .panel-body > a:focus,
body.whs-knowledgebase-page .sidebar-primary .panel-body > a:hover,
body.whs-knowledgebase-page .sidebar-primary .panel-body > a:focus,
body.whs-knowledgebase-page .sidebar-secondary .panel-body > a:hover,
body.whs-knowledgebase-page .sidebar-secondary .panel-body > a:focus {
    border-color:rgba(168,145,255,.38) !important;
    color:#fff !important;
    background:#121d34 !important;
    text-decoration:none !important;
}
body.whs-knowledgebase-page .sidebar .panel-body > a:focus-visible,
body.whs-knowledgebase-page .sidebar-primary .panel-body > a:focus-visible,
body.whs-knowledgebase-page .sidebar-secondary .panel-body > a:focus-visible {
    outline:2px solid #bba9ff !important;
    outline-offset:2px !important;
}

/* V5 — Categories selector chevron.
   Safari can suppress/ignore a select background-image after native form-control
   styling is applied. Draw the WEBHOST chevron on the real Categories panel body
   instead, so it remains visible on the index, category and article pages while
   the native WHMCS <select> stays fully functional. */
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Categories"] > .panel-body,
body.whs-knowledgebase-page .sidebar-primary .panel[menuItemName="Categories"] > .panel-body,
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Knowledgebase Categories"] > .panel-body,
body.whs-knowledgebase-page .sidebar-primary .panel[menuItemName="Knowledgebase Categories"] > .panel-body,
body.whs-knowledgebase-page .sidebar-primary > .panel:first-child > .panel-body {
    position:relative !important;
}

body.whs-knowledgebase-page .sidebar .panel[menuItemName="Categories"] > .panel-body::after,
body.whs-knowledgebase-page .sidebar-primary .panel[menuItemName="Categories"] > .panel-body::after,
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Knowledgebase Categories"] > .panel-body::after,
body.whs-knowledgebase-page .sidebar-primary .panel[menuItemName="Knowledgebase Categories"] > .panel-body::after,
body.whs-knowledgebase-page .sidebar-primary > .panel:first-child > .panel-body::after {
    content:"" !important;
    position:absolute !important;
    z-index:5 !important;
    top:50% !important;
    right:25px !important;
    width:9px !important;
    height:9px !important;
    margin-top:-6px !important;
    border-right:2px solid #bba9ff !important;
    border-bottom:2px solid #bba9ff !important;
    transform:rotate(45deg) !important;
    pointer-events:none !important;
    box-sizing:border-box !important;
}

/* Prevent Safari's black native arrow or the older SVG background from competing
   with the new CSS-drawn chevron. Keep enough right padding for the indicator. */
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Categories"] select,
body.whs-knowledgebase-page .sidebar-primary .panel[menuItemName="Categories"] select,
body.whs-knowledgebase-page .sidebar .panel[menuItemName="Knowledgebase Categories"] select,
body.whs-knowledgebase-page .sidebar-primary .panel[menuItemName="Knowledgebase Categories"] select,
body.whs-knowledgebase-page .sidebar-primary > .panel:first-child select {
    -webkit-appearance:none !important;
    appearance:none !important;
    background-image:none !important;
    padding-right:48px !important;
}

/* V6 — Categories selector chevron: DOM-inserted indicator for iPhone Safari.
   V5's pseudo-element depended on the exact WHMCS sidebar wrapper. This version
   places a dedicated, non-interactive chevron beside the real native <select>,
   so it remains visible on the Knowledgebase home, tag/category and article pages. */
body.whs-knowledgebase-page .whs-kb-category-select-host {
    position:relative !important;
}
body.whs-knowledgebase-page .whs-kb-category-select-host > select {
    position:relative !important;
    z-index:1 !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    background-image:none !important;
    padding-right:50px !important;
}
body.whs-knowledgebase-page .whs-kb-category-chevron {
    display:block !important;
    position:absolute !important;
    z-index:20 !important;
    top:50% !important;
    right:20px !important;
    width:10px !important;
    height:10px !important;
    margin:0 !important;
    border-right:2px solid #bba9ff !important;
    border-bottom:2px solid #bba9ff !important;
    transform:translateY(-65%) rotate(45deg) !important;
    transform-origin:center !important;
    pointer-events:none !important;
    box-sizing:border-box !important;
}