/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* ===== Brand design tokens ===== */
:root {
    --kh-green: #33d693;
    --kh-green-dark: #063f32;
    --kh-green-soft: #eaf8f3;
    --kh-gold: #e8b71c;
    --kh-gold-dark: #dca400;
    --kh-gold-soft: #fff7d9;
    --kh-dark: #111a19;
    --kh-text: #16231f;
    --kh-muted: #697873;
    --kh-border: #e5ebe8;
    /* Single site-wide button corner radius - not a pill, not sharp.
       Every real button's border-radius should reference this token
       (not a hardcoded px value) so the whole site stays visually
       consistent from one place. */
    --kh-btn-radius: 10px;
}

/* ===== Font Awesome icon fix (site-wide) =====
   Several page-scope rules below (`.kh-xxx-page *`, `.kh-dash-wrap *`, etc.)
   reset font-family to "Urbanist" using the universal selector. That ties in
   CSS specificity with Font Awesome's own .fas/.far/.fal/.fad/.fab rules,
   and since this stylesheet loads after fontawesome-all.min.css, those page
   rules were winning the tie-break and silently overriding every icon's
   font-family - the icon glyph then has no matching character in the
   Urbanist font, so it shows as an empty box instead of the real icon.
   This restores the real icon fonts with !important so it always wins,
   regardless of which page wrapper an icon sits inside. */
.fas, .far, .fal, .fa {
    font-family: "Font Awesome 5 Pro" !important;
}

.fad {
    font-family: "Font Awesome 5 Duotone" !important;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
}

/* ===== Site footer redesign ===== */
footer.footer.khaleej-footer, .khaleej-footer * {
    font-family: "Urbanist", sans-serif;
}
footer.footer.khaleej-footer {
    background-color: var(--kh-dark);
    color: #ffffff;
    padding: 44px 0 18px 0;
}
.khaleej-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 30px;
}
.khaleej-footer .footer-logo {
    height: 32px;
    width: auto;
    margin-bottom: 14px;
}
.khaleej-footer .footer-about p {
    color: #aab6b2;
    font-size: 12.5px;
    line-height: 1.7;
    max-width: 260px;
    margin: 0 0 16px 0;
}
.khaleej-footer .footer-socials {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
}
.khaleej-footer .footer-socials .btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #273735;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.khaleej-footer .footer-socials .btn-icon:hover {
    background: var(--kh-gold);
    color: #111111;
}
.khaleej-footer .footer-col h4 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 16px 0;
}
.khaleej-footer .footer-col ul.nav {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}
.khaleej-footer .footer-col .nav-item {
    display: block !important;
}
.khaleej-footer .footer-col .nav-link {
    display: flex !important;
    align-items: center;
    gap: 7px;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 400;
    font-size: 13px;
    padding: 0 0 12px 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
}
.khaleej-footer .footer-col .nav-link::before {
    content: "\203A";
    color: var(--kh-gold);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
}
.khaleej-footer .footer-col .nav-link:hover {
    color: var(--kh-gold) !important;
    background: transparent !important;
}
.khaleej-footer .footer-contact-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aab6b2;
    font-size: 12.5px;
    margin-bottom: 10px;
}
.khaleej-footer .footer-contact-line svg {
    width: 14px;
    height: 14px;
    color: var(--kh-gold);
    flex-shrink: 0;
}
.khaleej-footer .footer-contact-line a {
    color: #aab6b2;
}
.khaleej-footer .footer-contact-line a:hover {
    color: var(--kh-gold);
}
.khaleej-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px solid #293533;
    color: #8e9b97;
    font-size: 12px;
}
.khaleej-footer .footer-powered .whmcs {
    color: #ffffff;
    font-weight: 800;
}

@media (max-width: 991px) {
    .khaleej-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .khaleej-footer .footer-grid {
        grid-template-columns: 1fr;
    }
    .khaleej-footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Currency switcher, moved from the sidebar into the top utility bar,
   between the cart icon and the Account dropdown. */
.top-bar-right-content .topbar-currency {
    display: flex;
    align-items: center;
}
.top-bar-right-content .topbar-currency form {
    margin: 0;
}
.top-bar-right-content .topbar-currency select {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12.5px;
    height: auto;
}
.top-bar-right-content .topbar-currency select option {
    color: #000000;
}
.top-bar-right-content .topbar-currency {
    position: relative;
}
.top-bar-right-content .topbar-currency .currency-toggle {
    display: inline-block;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12.5px;
}
.top-bar-right-content .topbar-currency .currency-toggle:after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    border-top: 4px solid currentColor;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.top-bar-right-content .topbar-currency .currency-dropdown-menu {
    min-width: 100px;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-top: 6px;
}
.top-bar-right-content .topbar-currency .currency-dropdown-menu .dropdown-item {
    color: #000000;
}
.top-bar-right-content .topbar-currency .currency-dropdown-menu .dropdown-item:hover,
.top-bar-right-content .topbar-currency .currency-dropdown-menu .dropdown-item.active {
    color: #000000;
    background-color: #f5f5f5;
    font-weight: 700;
}

/* Store nav item (and, in the top utility bar, the Account dropdown):
   open on hover instead of requiring a click. Not scoped to .navbar-nav
   specifically, since the Account dropdown lives in .top-bar-right-content. */
@media (min-width: 1200px) {
    li.dropdown-hover:hover > .dropdown-menu {
        display: block;
    }
}

/* Bridges the gap left by `.dropdown-menu`'s own top margin (Bootstrap's
   stock `margin:.125rem 0 0` = ~2px) with an invisible strip directly
   above the menu. Without this, moving the mouse straight down from the
   toggle into the menu crosses a dead zone where nothing is hovered, so
   `li:hover` is lost and the menu closes before the mouse ever reaches it
   - it takes a click to reopen it from there. The strip is a descendant
   of `.dropdown-menu` (itself a descendant of the hovered `<li>`), so
   hovering it keeps the whole chain "hovered" continuously from toggle to
   menu. Only exists while the menu is already `display:block` (i.e.
   while the `<li>` is hovered), and is sized to match each menu's real
   gap exactly (not oversized) so it can't spill into the toggle row above
   and block clicks/hover there. */
li.dropdown-hover > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 4px;
}

/* Account's dropdown-menu uses a taller 8px gap (`margin-top: 8px` below)
   instead of Bootstrap's stock ~2px, so its bridge needs to match. */
.kh-navbar-account-wrap > li.dropdown-hover > .dropdown-menu::before {
    top: -8px;
    height: 8px;
}

/* Sidebar panels (Categories, Actions, Choose Currency, etc.): a plain
   white card with a thin border and no shadow, per the reference layout.
   Colours are our own navy/gold, not the reference's navy/amber.
   `.kh-premium-sidebar .card-sidebar` extends this exact same look to the
   Announcements/Knowledgebase sidebar (a different real component -
   templates/twenty-one/includes/sidebar.tpl - with different real data,
   only the visual skin is shared), scoped to just those pages via the
   wrapper class added in header.tpl so nothing else site-wide changes. */
.card-sidebar.panel-sidebar,
.kh-premium-sidebar .card-sidebar {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
}

/* Plain heading: label + a light bottom divider, no coloured bar and no
   panel icon - overrides override90.css's `.card-header{background:#000000}`
   with a more specific selector. */
.card-sidebar.panel-sidebar .card-header,
.kh-premium-sidebar .card-sidebar .card-header {
    background-color: transparent;
    color: #000000;
    border-bottom: 1px solid #e5e5e5;
    padding: 14px 18px;
}

.card-sidebar.panel-sidebar .card-header .panel-title,
.kh-premium-sidebar .card-sidebar .card-header .card-title {
    font-size: 13px;
    font-weight: 700;
}

.card-sidebar.panel-sidebar .card-header .panel-title > i:first-child,
.kh-premium-sidebar .card-sidebar .card-header .card-title > i:first-child {
    display: none;
}

.card-sidebar.panel-sidebar .card-header .panel-minimise,
.kh-premium-sidebar .card-sidebar .card-header .card-minimise {
    color: #bbbbbb;
}

/* Rows: individually rounded, no divider lines between them, matching the
   reference's flat "pill row" list. */
.card-sidebar.panel-sidebar .list-group,
.kh-premium-sidebar .card-sidebar .list-group {
    background: transparent;
    padding: 6px;
}

.card-sidebar.panel-sidebar .list-group-item,
.kh-premium-sidebar .card-sidebar .list-group-item {
    background-color: transparent !important;
    color: #5B6B7A;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease, margin-left 0.15s ease;
}

.kh-premium-sidebar .card-sidebar .list-group-item .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hover/focus: light tint of our brand gold + gold text, plus the
   rightward nudge kept from an earlier round. */
.card-sidebar.panel-sidebar .list-group a.list-group-item:hover,
.card-sidebar.panel-sidebar .list-group a.list-group-item:focus,
.kh-premium-sidebar .card-sidebar .list-group a.list-group-item:hover,
.kh-premium-sidebar .card-sidebar .list-group a.list-group-item:focus {
    background-color: #fdf3d9 !important;
    color: #E8B71C;
    margin-left: 8px;
}

/* Active item: solid fill in our original brand gold, white text. */
.card-sidebar.panel-sidebar .list-group-item.active,
.kh-premium-sidebar .card-sidebar .list-group-item.active {
    background-color: #E8B71C !important;
    color: #ffffff;
    font-weight: 600;
}

.card-sidebar.panel-sidebar .list-group a.list-group-item.active:hover,
.card-sidebar.panel-sidebar .list-group a.list-group-item.active:focus,
.kh-premium-sidebar .card-sidebar .list-group a.list-group-item.active:hover,
.kh-premium-sidebar .card-sidebar .list-group a.list-group-item.active:focus {
    background-color: #E8B71C !important;
    color: #ffffff;
    margin-left: 8px;
}

/* Currency dropdown (and any other plain <select> in the sidebar panels) */
.card-sidebar.panel-sidebar select,
.kh-premium-sidebar .card-sidebar select {
    width: calc(100% - 24px);
    margin: 6px 12px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
    color: #000000;
}

/* ===== Announcements & Knowledgebase hero (replaces the old generic
   banner on these two pages only - see header.tpl) ===== */
.kh-section-hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background:
        radial-gradient(circle at 82% 18%, rgba(232, 183, 28, .16), transparent 30%),
        linear-gradient(135deg, #eaf8f3 0%, #f7fcfa 48%, #fff7df 100%);
    padding: 56px 24px 48px;
    border-bottom: 1px solid #e1eee9;
    overflow: hidden;
    font-family: "Urbanist", sans-serif;
}

body:has(.kh-section-hero) {
    overflow-x: hidden;
}

.kh-section-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.kh-section-hero-text .kh-dr-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    background: rgba(255, 255, 255, .75);
    color: var(--kh-green, #33d693);
    border: 1px solid rgba(51, 214, 147, .18);
    box-shadow: 0 8px 25px rgba(4, 60, 45, .04);
    padding: 9px 15px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.kh-section-hero-text .kh-dr-label svg {
    width: 15px;
    height: 15px;
}

.kh-section-hero-text .kh-dr-h1 {
    margin: 0 0 14px;
    color: var(--kh-dark, #111a19);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    font-weight: 800;
}

.kh-section-hero-text .kh-dr-h1 span {
    color: var(--kh-green, #33d693);
}

.kh-section-hero-text .kh-dr-sub {
    margin: 0;
    max-width: 460px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--kh-muted, #697873);
}

.kh-section-hero-illustration {
    position: relative;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dashboard hero: a real photo instead of the abstract mockup-panel used
   on the other hero pages - taller box, image bottom-aligned so the
   transparent-background subject reads like it's standing in the hero. */
.kh-section-hero-dash .kh-section-hero-illustration {
    height: 340px;
    align-items: flex-end;
    overflow: visible;
}

.kh-dash-hero-img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(16, 24, 32, .12));
}

.kh-section-hero-dash .kh-section-illus-badge {
    top: 6%;
    right: 2%;
}

@media (max-width: 900px) {
    .kh-section-hero-dash .kh-section-hero-illustration {
        height: 260px;
    }
}

.kh-section-illus-panel {
    width: 300px;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 20px 45px rgba(16, 24, 32, .15);
}

.kh-section-illus-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--kh-green-soft, #eaf8f3);
    border-radius: 30px;
    padding: 8px 14px;
    color: var(--kh-green-dark, #063f32);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
}

.kh-section-illus-topbar svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.kh-section-illus-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.kh-section-illus-row:last-child {
    margin-bottom: 0;
}

.kh-section-illus-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kh-section-illus-dot.gold {
    background: var(--kh-gold, #e8b71c);
}

.kh-section-illus-dot.green {
    background: var(--kh-green, #33d693);
}

.kh-section-illus-lines {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kh-section-illus-line {
    height: 8px;
    border-radius: 4px;
    background: #eef2f0;
}

.kh-section-illus-line.short {
    width: 55%;
}

.kh-section-illus-shield {
    position: absolute;
    left: 10%;
    bottom: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kh-green, #33d693);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 25px rgba(51, 214, 147, .35);
}

.kh-section-illus-shield svg {
    width: 26px;
    height: 26px;
}

.kh-section-illus-badge {
    position: absolute;
    top: 2%;
    right: 6%;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 11.5px;
    box-shadow: 0 10px 20px rgba(16, 24, 32, .12);
}

.kh-section-illus-badge.gold {
    background: var(--kh-gold, #e8b71c);
    color: #171200;
}

@media (max-width: 900px) {
    .kh-section-hero-inner {
        grid-template-columns: 1fr;
    }
    .kh-section-hero-illustration {
        display: none;
    }
}

/* ===== Standalone login page ===== */
.login-standalone {
    display: block;
    background: #ffffff;
}

.kh-login-page,
.kh-login-page * {
    box-sizing: border-box;
    font-family: "Urbanist", sans-serif;
}

.kh-login-page {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 54% 46%;
    background: #fff;
    color: #12201d;
}

.kh-login-page a {
    text-decoration: none;
    color: inherit;
}

.kh-login-page svg {
    width: 1em;
    height: 1em;
}

/* ----- Left: pinned visual side ----- */
.kh-login-visual {
    position: relative;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 42%, rgba(242, 185, 12, .20), transparent 28%),
        radial-gradient(circle at 25% 75%, rgba(8, 127, 91, .15), transparent 30%),
        linear-gradient(145deg, #f9fbf9 0%, #eef7f3 55%, #fdfbf5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.kh-login-visual::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(8, 127, 91, .10);
    border-radius: 50%;
    top: -170px;
    left: -170px;
}

.kh-login-visual::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(242, 185, 12, .12);
    border-radius: 50%;
    right: -330px;
    bottom: -330px;
}

.kh-login-visual-inner {
    position: relative;
    z-index: 2;
    width: min(680px, 100%);
}

.kh-login-mark {
    display: inline-block;
    margin-bottom: 40px;
}

.kh-login-mark img {
    height: 34px;
    width: auto;
}

.kh-login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(8, 127, 91, .12);
    border-radius: 100px;
    color: var(--kh-green, #07865f);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    box-shadow: 0 8px 25px rgba(4, 60, 45, .04);
}

.kh-login-eyebrow-dot {
    width: 7px;
    height: 7px;
    background: var(--kh-gold, #f2b90c);
    border-radius: 50%;
}

.kh-login-heading {
    margin-top: 28px;
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    font-size: clamp(38px, 3.6vw, 60px);
    line-height: 1.1;
    letter-spacing: -1px;
    color: #022c25;
    max-width: 650px;
}

.kh-login-heading span {
    color: var(--kh-green, #07865f);
    position: relative;
}

.kh-login-description {
    margin-top: 20px;
    max-width: 540px;
    font-size: 15px;
    line-height: 1.7;
    color: #61706b;
}

.kh-login-feature-row {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 600px;
    border-top: 1px solid rgba(8, 127, 91, .12);
    border-bottom: 1px solid rgba(8, 127, 91, .12);
}

.kh-login-feature {
    padding: 17px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid rgba(8, 127, 91, .10);
}

.kh-login-feature:last-child {
    border-right: none;
}

.kh-login-feature-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--kh-gold-soft, #fff5cf);
    color: var(--kh-green, #07865f);
    font-size: 15px;
}

.kh-login-feature strong {
    display: block;
    font-size: 11.5px;
    color: #022c25;
}

.kh-login-feature small {
    display: block;
    margin-top: 2px;
    color: #7c8985;
    font-size: 9.5px;
}

/* ----- Server illustration ----- */
.kh-login-server-scene {
    margin-top: 34px;
    height: 220px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kh-login-server-glow {
    position: absolute;
    width: 350px;
    height: 160px;
    background: radial-gradient(ellipse, rgba(8, 127, 91, .18), transparent 70%);
    filter: blur(10px);
}

.kh-login-server-platform {
    position: absolute;
    width: 430px;
    height: 40px;
    bottom: 12px;
    background: linear-gradient(90deg, #d7b54a, #f8df82, #d2a728);
    border-radius: 50%;
    box-shadow: 0 20px 45px rgba(4, 50, 40, .18);
}

.kh-login-server-stack {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.kh-login-server {
    width: 62px;
    border-radius: 8px 8px 5px 5px;
    background: linear-gradient(160deg, #173b35, #052d27);
    border: 1px solid rgba(242, 185, 12, .28);
    box-shadow: 0 20px 35px rgba(2, 45, 37, .25);
    padding: 11px 8px;
    position: relative;
}

.kh-login-server.large {
    width: 76px;
    height: 150px;
}

.kh-login-server.medium {
    height: 124px;
}

.kh-login-server.small {
    height: 100px;
}

.kh-login-server-lights {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.kh-login-server-lights i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #20c997;
    box-shadow: 0 0 8px #20c997;
}

.kh-login-server-line {
    height: 4px;
    margin: 6px 0;
    background: rgba(255, 255, 255, .12);
    border-radius: 5px;
}

.kh-login-server-line.gold {
    width: 65%;
    background: var(--kh-gold, #f2b90c);
}

.kh-login-domain-badges {
    position: absolute;
    right: 4%;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    z-index: 6;
}

.kh-login-domain {
    padding: 8px 13px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(8, 127, 91, .12);
    border-radius: 9px;
    font-weight: 700;
    font-size: 11px;
    color: #022c25;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}

.kh-login-domain.gold {
    background: var(--kh-gold, #f2b90c);
    border-color: var(--kh-gold, #f2b90c);
    color: #17140a;
}

/* ----- Right: scrollable form side ----- */
.kh-login-form-side {
    height: 100%;
    overflow-y: auto;
    padding: 55px clamp(35px, 6vw, 100px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.kh-login-form-container {
    width: min(440px, 100%);
    margin: auto 0;
}

.kh-login-welcome {
    color: var(--kh-green, #07865f);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.kh-login-title {
    font-size: 34px;
    line-height: 1.15;
    color: #022c25;
    letter-spacing: -1px;
    font-weight: 700;
}

.kh-login-subtitle {
    margin-top: 10px;
    color: #71807c;
    font-size: 13.5px;
    line-height: 1.6;
}

.kh-login-card {
    margin-top: 28px;
    padding: 36px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e8e6;
    box-shadow: 0 10px 30px rgba(2, 44, 37, .06);
}

.kh-login-input-group {
    margin-bottom: 18px;
}

.kh-login-input-group label {
    display: block;
    margin-bottom: 8px;
    color: #233631;
    font-size: 12.5px;
    font-weight: 700;
}

.kh-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kh-login-label-row label {
    margin-bottom: 0;
}

.kh-login-forgot {
    color: var(--kh-green, #07865f);
    font-size: 11.5px;
    font-weight: 700;
}

.kh-login-forgot:hover {
    color: #05573f;
}

.kh-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.kh-login-input-wrap .form-control {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1.5px solid #dde2e0;
    background: #ffffff;
    outline: none;
    color: #12201d;
    font-family: inherit;
    font-size: 14px;
    transition: .2s ease;
}

.kh-login-input-wrap .kh-pw-input {
    padding-right: 46px;
    /* Browsers size the password mask dots off the field's own font-size -
       at the shared 14px input size they read as tiny, barely-there specks.
       Bumped just for this field so the dots are clearly visible as dots. */
    font-size: 20px;
    letter-spacing: 2px;
}

.kh-login-input-wrap .form-control::placeholder {
    color: #a4aeaa;
}

/* Placeholder text itself isn't masked, so it shouldn't inherit the
   larger dot-sizing font-size above - keep it at the normal input size. */
.kh-login-input-wrap .kh-pw-input::placeholder {
    font-size: 14px;
}

.kh-login-input-wrap .form-control:focus {
    border-color: var(--kh-green, #07865f);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8, 127, 91, .10);
}

.kh-login-password-toggle {
    position: absolute;
    right: 16px;
    border: none;
    background: none;
    cursor: pointer;
    color: #8a9893;
    font-size: 16px;
    display: flex;
}

.kh-login-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 2px 0 20px;
}

.kh-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #66746f;
    font-weight: normal;
    margin-right: auto;
    cursor: pointer;
}

.kh-login-remember input {
    accent-color: var(--kh-green, #07865f);
}

.kh-login-btn {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.kh-login-btn:hover {
    background: #000;
    color: #fff;
}

/* Shared "premium button" icon badge - same treatment as the order-form
   pages' primary buttons, applied here since this stylesheet is separate.
   Purely decorative on top of each button's existing real <i> icon. */
.kh-login-btn i,
.kh-ann-readmore i,
.kh-kb-search-btn i,
.kh-reg-submit-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
}

.kh-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: #a0aaa6;
    font-size: 12.5px;
}

.kh-login-divider::before,
.kh-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e7ebe9;
}

.kh-login-card .social-signin-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kh-login-card .social-signin-btns .btn {
    width: 100%;
    height: 54px;
    border: 1.5px solid #dde2e0;
    border-radius: var(--kh-btn-radius);
    background: #ffffff;
    color: #12201d;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .2s ease;
}

.kh-login-card .social-signin-btns .btn:hover {
    border-color: var(--kh-green, #07865f);
    background: #f8fbf9;
}

.kh-login-register-text {
    text-align: center;
    margin-top: 22px;
    font-size: 12px;
    color: #7b8884;
}

.kh-login-register-text a {
    color: var(--kh-green, #07865f);
    font-weight: 800;
}

.kh-login-security-note {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: #8a9692;
    font-size: 10px;
}

.kh-login-security-note svg {
    color: var(--kh-green, #07865f);
}

@media (max-width: 1050px) {
    .kh-login-page {
        grid-template-columns: 48% 52%;
    }
    .kh-login-visual {
        padding: 40px;
    }
    .kh-login-heading {
        font-size: 40px;
    }
    .kh-login-feature-row {
        grid-template-columns: 1fr 1fr;
    }
    .kh-login-feature:nth-child(2) {
        border-right: none;
    }
    .kh-login-server-scene {
        transform: scale(.85);
    }
}

body:has(.kh-login-page) {
    overflow: hidden;
}

@media (max-width: 800px) {
    body:has(.kh-login-page) {
        overflow: auto;
    }
    .kh-login-page {
        display: block;
        height: auto;
    }
    .kh-login-visual {
        height: auto;
        min-height: 480px;
        padding: 45px 25px 30px;
    }
    .kh-login-heading {
        font-size: 36px;
    }
    .kh-login-server-scene {
        height: 170px;
    }
    .kh-login-form-side {
        height: auto;
        min-height: 100vh;
        padding: 45px 22px;
    }
}

@media (max-width: 500px) {
    .kh-login-feature-row {
        display: none;
    }
    .kh-login-server-scene {
        display: none;
    }
    .kh-login-visual {
        min-height: 340px;
    }
    .kh-login-heading {
        font-size: 32px;
    }
    .kh-login-card {
        padding: 22px;
    }
    .kh-login-title {
        font-size: 28px;
    }
}

/* ===== Announcements page body ===== */
.kh-announcements-page,
.kh-announcements-page * {
    font-family: "Urbanist", sans-serif;
}

.kh-ann-card {
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
    padding: 26px 28px;
}

.kh-ann-heading {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-ann-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.kh-ann-item {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
}

.kh-ann-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.kh-ann-item-title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800;
}

.kh-ann-item-title a {
    color: var(--kh-dark, #111a19);
    text-decoration: none;
}

.kh-ann-item-title a:hover {
    color: var(--kh-gold-dark, #dca400);
}

.kh-ann-meta {
    margin: 0 0 12px;
    font-size: 12.5px;
}

.kh-ann-item-body {
    color: var(--kh-text, #16231f);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 14px;
}

.kh-ann-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 26px;
    border-radius: 50px;
    background: var(--kh-gold, #e8b71c);
    color: #fff !important;
    border: none;
    font-weight: 700;
    font-size: 12.5px;
}

.kh-ann-readmore:hover {
    background: #000;
    color: #fff !important;
}

.kh-ann-pagination {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}

/* ===== Knowledgebase page body ===== */
.kh-kb-page,
.kh-kb-page * {
    font-family: "Urbanist", sans-serif;
}

.kh-kb-search-group .form-control {
    border-radius: 50px 0 0 50px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    padding-left: 22px;
}

.kh-kb-search-btn {
    border-radius: 0 50px 50px 0 !important;
    background: var(--kh-gold, #e8b71c) !important;
    border-color: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 0 26px !important;
}

.kh-kb-search-btn:hover {
    background: #000 !important;
    border-color: #000 !important;
}

.kh-kb-cat-card {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
    transition: .15s ease;
    overflow: hidden;
}

.kh-kb-cat-card:hover {
    border-color: var(--kh-gold, #e8b71c);
    transform: translateY(-2px);
}

.kh-kb-cat-link {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 20px 22px !important;
}

.kh-kb-cat-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #33d693);
    font-size: 19px;
}

.kh-kb-cat-text {
    flex: 1 1 auto;
    min-width: 0;
}

.kh-kb-cat-title {
    display: block;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-kb-cat-badge {
    flex-shrink: 0;
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
}

.kh-kb-popular-card {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
    overflow: hidden;
}

.kh-kb-popular-heading {
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-kb-article-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-color: var(--kh-border, #e5ebe8) !important;
}

.kh-kb-article-item:hover {
    background-color: var(--kh-green-soft, #eaf8f3) !important;
}

.kh-kb-article-text {
    flex: 1 1 auto;
    min-width: 0;
}

.kh-kb-article-title {
    display: block;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

@media (max-width: 700px) {
    .kh-ann-card {
        padding: 20px 18px;
    }
    .kh-kb-cat-link {
        flex-wrap: wrap;
    }
}

/* ===== Downloads page body ===== */
.kh-dl-page,
.kh-dl-page * {
    font-family: "Urbanist", sans-serif;
}

.kh-dl-search-group .form-control {
    border-radius: 50px 0 0 50px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    padding-left: 22px;
}

.kh-dl-search-btn {
    border-radius: 0 50px 50px 0 !important;
    background: var(--kh-gold, #e8b71c) !important;
    border-color: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 0 26px !important;
}

.kh-dl-search-btn:hover {
    background: #000 !important;
    border-color: #000 !important;
}

.kh-dl-cat-card {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
    transition: .15s ease;
    overflow: hidden;
}

.kh-dl-cat-card:hover {
    border-color: var(--kh-gold, #e8b71c);
    transform: translateY(-2px);
}

.kh-dl-cat-link {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 20px 22px !important;
}

.kh-dl-cat-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #33d693);
    font-size: 19px;
}

.kh-dl-cat-text {
    flex: 1 1 auto;
    min-width: 0;
}

.kh-dl-cat-title {
    display: block;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-dl-cat-badge {
    flex-shrink: 0;
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
}

.kh-dl-popular-card,
.kh-dl-files-card {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
    overflow: hidden;
}

.kh-dl-popular-heading {
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-dl-article-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-color: var(--kh-border, #e5ebe8) !important;
}

.kh-dl-article-item:hover {
    background-color: var(--kh-green-soft, #eaf8f3) !important;
}

.kh-dl-article-item > i.fa-fw {
    color: var(--kh-green, #33d693);
    font-size: 17px;
    flex-shrink: 0;
}

.kh-dl-article-text {
    flex: 1 1 auto;
    min-width: 0;
}

.kh-dl-article-title {
    display: block;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-dl-restricted-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
}

.kh-dl-back-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--kh-btn-radius) !important;
    border: 1px solid #dce2e7 !important;
    font-weight: 700;
    padding: 10px 26px !important;
    margin-top: 8px;
}

.kh-dl-back-btn:hover {
    border-color: var(--kh-green, #33d693) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

@media (max-width: 700px) {
    .kh-dl-cat-link {
        flex-wrap: wrap;
    }
    .kh-dl-article-item {
        flex-wrap: wrap;
    }
}

/* ===== Network Status page ===== */
.kh-ns-page,
.kh-ns-page * {
    font-family: "Urbanist", sans-serif;
}

.kh-ns-alert {
    border: none;
    border-radius: 14px;
    padding: 16px 20px;
    font-weight: 600;
}

.kh-ns-alert-success {
    background: var(--kh-green-soft, #eaf8f3) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-ns-alert-info {
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
}

.kh-ns-servers-intro {
    color: #5b6b67;
    margin-bottom: 18px;
}

.kh-ns-servers-table-wrap table {
    margin-bottom: 0;
}

.kh-ns-servers-table-wrap th {
    font-weight: 800;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kh-dark, #111a19);
    border-top: none;
    border-bottom: 1.5px solid var(--kh-border, #e5ebe8) !important;
}

.kh-ns-servers-table-wrap td {
    vertical-align: middle;
    border-color: var(--kh-border, #e5ebe8) !important;
}

.kh-ns-phpinfo-link {
    font-weight: 700;
    color: var(--kh-green-dark, #063f32);
}

.kh-ns-issue-card {
    padding: 0;
    overflow: hidden;
}

.kh-ns-issue-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fafbfa;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    padding: 16px 22px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-ns-issue-status {
    font-weight: 600;
    color: #5b6b67;
    font-size: 13px;
}

.kh-ns-priority-badge {
    flex-shrink: 0;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.kh-ns-priority-critical {
    background: #fdeaea !important;
    color: #c0392b !important;
}

.kh-ns-priority-high {
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
}

.kh-ns-priority-low {
    background: var(--kh-green-soft, #eaf8f3) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-ns-priority-info {
    background: #eaf2fd !important;
    color: #2265c9 !important;
}

.kh-ns-issue-card .card-body {
    padding: 22px;
}

.kh-ns-issue-affecting {
    color: var(--kh-dark, #111a19);
}

.kh-ns-issue-meta {
    color: #5b6b67;
    font-size: 13.5px;
    margin-bottom: 14px;
}

.kh-ns-affecting-you {
    border: none;
    border-radius: 10px;
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
    font-weight: 700;
}

.kh-ns-pagination-nav {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.kh-ns-pagination .page-link {
    border-radius: 8px;
    margin: 0 4px;
    border: 1px solid #dce2e7;
    color: var(--kh-text, #16231f);
    font-weight: 700;
}

.kh-ns-pagination .page-item.active .page-link {
    background: var(--kh-gold, #e8b71c) !important;
    border-color: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
}

.kh-ns-pagination .page-item.disabled .page-link {
    color: #b7c0bd;
}

@media (max-width: 700px) {
    .kh-ns-issue-header {
        flex-wrap: wrap;
    }
}

/* ===== Shared status pill (domain/product detail pages) ===== */
.kh-dd-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12.5px;
}

.kh-dd-status-active {
    background: var(--kh-green-soft, #eaf8f3) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-dd-status-bad {
    background: #fdeaea !important;
    color: #c0392b !important;
}

.kh-dd-status-neutral {
    background: #f1f3f2 !important;
    color: #5b6b67 !important;
}

/* ===== Domain Details page (My Domains -> single domain) ===== */
.kh-dd-page,
.kh-dd-page * {
    font-family: "Urbanist", sans-serif;
}

.kh-dd-alert {
    border-radius: 14px;
    border: none;
}

.kh-dd-card .card-title,
.kh-dd-card h5 {
    color: var(--kh-dark, #111a19);
}

.kh-dd-info-grid {
    row-gap: 14px;
}

.kh-dd-info-item h5 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 800;
    color: #8a958f;
    margin-bottom: 6px;
}

.kh-dd-info-item a {
    font-weight: 700;
    color: var(--kh-green-dark, #063f32);
}

.kh-dd-todo-label {
    margin-top: 10px;
}

.kh-dd-todo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kh-dd-todo-list li a {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #dce2e7;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--kh-text, #16231f);
}

.kh-dd-todo-list li a:hover {
    border-color: var(--kh-green, #33d693);
    color: var(--kh-green-dark, #063f32);
}

.kh-dd-tab-intro {
    color: #5b6b67;
}

.kh-dd-toggle-status {
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-dd-toggle-btn-on,
.kh-dd-toggle-btn-off {
    border-radius: var(--kh-btn-radius) !important;
    padding: 0 32px !important;
    font-weight: 700;
    border: none !important;
}

.kh-dd-inline-submit.kh-reg-submit-btn {
    width: auto;
    height: 44px;
    padding: 0 28px;
}

.kh-dd-addon-row {
    align-items: center;
}

.kh-dd-addon-icon {
    color: var(--kh-green, #33d693);
}

/* ===== Product Details page (My Services -> single service) ===== */
.kh-pd-page,
.kh-pd-page * {
    font-family: "Urbanist", sans-serif;
}

.kh-pd-status-block {
    background: #fff !important;
    border: 1px solid var(--kh-border, #e5ebe8) !important;
    border-radius: 16px !important;
    padding: 26px 20px !important;
    text-align: center;
}

.kh-pd-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 26px;
}

.kh-pd-brand-icon.kh-pd-brand-google {
    background: #eaf2fd;
    color: #4285f4;
}

.kh-pd-brand-icon.kh-pd-brand-microsoft {
    background: var(--kh-gold-soft, #fff7d9);
    color: #ea8a00;
}

.kh-pd-brand-icon.kh-pd-brand-wordpress {
    background: #eef1f3;
    color: var(--kh-dark, #111a19);
}

.kh-pd-brand-icon.kh-pd-brand-cpanel,
.kh-pd-brand-icon.kh-pd-brand-default {
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
}

.kh-pd-status-icon h3 {
    margin: 14px 0 0;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-pd-status-icon h4 {
    color: #5b6b67;
    font-weight: 600;
    margin-bottom: 0;
}

.kh-pd-status-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 7px 18px !important;
    border-radius: 20px !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.kh-pd-status-gold {
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
}

.kh-pd-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.kh-pd-actions {
    margin-top: 14px;
    row-gap: 10px;
}

.kh-pd-action-btn.kh-reg-submit-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.kh-pd-cancel-btn {
    border-radius: var(--kh-btn-radius) !important;
    font-weight: 700;
}

.kh-pd-info-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 800;
    color: #8a958f;
    margin: 14px 0 4px;
}

.kh-pd-info-col h4:first-child {
    margin-top: 0;
}

.kh-pd-tabs.nav-tabs .nav-link {
    border: none;
    color: #5b6b67;
    font-weight: 700;
}

.kh-pd-tabs.nav-tabs .nav-link.active {
    color: var(--kh-green-dark, #063f32);
    border-bottom: 2px solid var(--kh-gold, #e8b71c);
}

.kh-pd-tab-content {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 22px;
}

.kh-pd-download-card {
    padding: 20px 22px;
    margin-bottom: 16px;
}

.kh-pd-addon-card {
    border: 1px solid var(--kh-border, #e5ebe8) !important;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
}

.kh-pd-addon-header {
    background: #fafbfa;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    font-weight: 800;
    color: var(--kh-dark, #111a19);
    padding: 14px 20px;
}

.kh-pd-addon-status {
    font-weight: 700;
    border-radius: 20px;
    padding: 4px 12px;
}

.kh-pd-addon-footer {
    background: #fff;
    border-top: 1px solid var(--kh-border, #e5ebe8);
    padding: 14px 20px;
}

@media (max-width: 700px) {
    .kh-dd-todo-list {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Restyle raw hosting-module client-area output (cPanel/Plesk/etc "Package/Domain",
   "Usage Statistics", "Quick Shortcuts", "Quick Create Email Account", "Billing Overview"
   panels) on the Product Details page. This HTML comes straight from the module's own
   overview.tpl (getBodyHtml() style output), not from our own template, so it's restyled
   generically here rather than given classes directly - same technique used for the
   dashboard's stock "Register a New Domain" panel buttons. *!important* throughout since
   the module ships its own inline/base styles. ===== */
.kh-pd-tab-content .panel.card {
    border: 1px solid var(--kh-border, #e5ebe8) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
    overflow: hidden;
}

.kh-pd-tab-content .panel-heading.card-header {
    background: #fafbfa !important;
    border-bottom: 1px solid var(--kh-border, #e5ebe8) !important;
    padding: 14px 20px !important;
}

.kh-pd-tab-content .panel-title.card-title {
    color: var(--kh-dark, #111a19) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

.kh-pd-tab-content .panel-body.card-body {
    background: #fff !important;
}

.kh-pd-tab-content .cpanel-feature-row a {
    border-radius: 12px;
    padding: 14px 8px !important;
    transition: .15s ease;
}

.kh-pd-tab-content .cpanel-feature-row a:hover {
    background: var(--kh-green-soft, #eaf8f3);
}

.kh-pd-tab-content .cpanel-feature-row img {
    display: block;
    margin: 0 auto 8px;
}

.kh-pd-tab-content .btn-default {
    border-radius: var(--kh-btn-radius) !important;
    border: 1px solid #dce2e7 !important;
    background: #fff !important;
    color: var(--kh-text, #16231f) !important;
    font-weight: 700 !important;
}

.kh-pd-tab-content .btn-default:hover {
    border-color: var(--kh-green, #33d693) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-pd-tab-content .btn-success,
.kh-pd-tab-content .btn-primary {
    background: var(--kh-gold, #e8b71c) !important;
    border-color: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    border-radius: var(--kh-btn-radius) !important;
    font-weight: 700 !important;
}

.kh-pd-tab-content .btn-success:hover,
.kh-pd-tab-content .btn-primary:hover {
    background: #000 !important;
    border-color: #000 !important;
}

.kh-pd-tab-content .btn-danger,
.kh-pd-tab-content .btn-info {
    border-radius: var(--kh-btn-radius) !important;
    font-weight: 700 !important;
}

.kh-pd-tab-content .form-control {
    border-radius: 9px !important;
    border: 1.5px solid var(--kh-border, #e5ebe8) !important;
}

.kh-pd-tab-content #cPanelBillingOverviewPanel .row > div,
.kh-pd-tab-content #cPanelConfigurableOptionsPanel .row > div,
.kh-pd-tab-content #cPanelAdditionalInfoPanel .row > div {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ===== Register (create account) page ===== */
.kh-register-page,
.kh-register-page * {
    font-family: "Urbanist", sans-serif;
}

.kh-reg-wrap {
    max-width: 820px;
    margin: 0 auto;
}

.kh-reg-card {
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
    padding: 26px 28px;
    margin-bottom: 20px;
}

.kh-reg-section-label {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    font-size: 16px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-reg-btn-outline {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #dce2e7;
    border-radius: var(--kh-btn-radius);
    background: #fff;
    color: var(--kh-text, #16231f);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.kh-reg-btn-outline:hover {
    border-color: var(--kh-green, #33d693);
    color: var(--kh-green-dark, #063f32);
}

.kh-reg-final {
    text-align: center;
    margin-top: 8px;
}

.kh-reg-tos {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--kh-muted, #697873);
}

.kh-reg-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.kh-reg-submit-btn:hover {
    background: #000;
    color: #fff;
}

@media (max-width: 700px) {
    .kh-reg-card {
        padding: 20px 18px;
    }
}

/* ===== Support Ticket pages ===== */
.kh-tk-dept-intro {
    margin: -6px 0 18px;
}

.kh-tk-dept-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kh-tk-dept-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: .15s ease;
}

.kh-tk-dept-item:hover {
    border-color: var(--kh-gold, #e8b71c);
    background: var(--kh-gold-soft, #fff7d9);
    color: inherit;
    text-decoration: none;
}

.kh-tk-dept-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #33d693);
}

.kh-tk-dept-icon svg {
    width: 22px;
    height: 22px;
}

.kh-tk-dept-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kh-tk-dept-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--kh-dark, #111a19);
}

.kh-tk-dept-desc {
    font-size: 12.5px;
    color: var(--kh-muted, #697873);
}

.kh-tk-card {
    padding: 0;
    overflow: hidden;
}

.kh-tk-table {
    margin: 0;
}

.kh-tk-cancel {
    margin-top: 14px;
}

/* ===== Top bar contact info (phone/email on the left) ===== */
.topbar-contact-info {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 5px 0 10px;
    padding-left: 0;
}

.topbar-contact-info li {
    list-style: none;
    display: inline-block;
}

.topbar-contact-info li a {
    display: inline-flex;
    align-items: center;
    color: #fff;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 400;
    border-right: 1px solid rgba(255, 255, 255, .25);
}

.topbar-contact-info li:last-child a {
    border-right: none;
}

.topbar-contact-info li a:hover {
    color: var(--kh-gold, #e8b71c);
    text-decoration: none;
}

.topbar-contact-info li a i {
    font-size: 12px;
    margin-right: 2px;
}

/* Logged-in topbar variant sits inline with the notification/search block */
.header .topbar .topbar-contact-info {
    margin: 0 18px 0 0;
}

/* ===== Main navbar: Account icon dropdown (moved out of the top bar) =====
   The real "Contact Us" nav item (WHMCS-admin-managed) is hidden here
   rather than removed from the data, since a plain "Contact" link that
   goes to the support ticket page was added instead, in the main nav
   list itself. */
.navbar-nav.mr-auto li[menuitemname="Contact Us" i] {
    display: none !important;
}

.kh-navbar-account-wrap {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

/* `position:relative` here is what Bootstrap's dropdown-menu (absolutely
   positioned) actually anchors to - without it, the menu anchors to some
   other positioned ancestor further up the page and visibly "jumps" to
   the wrong spot on hover/open. Missing in the topbar's original spot
   too, but harmless there since nothing else was positioned nearby. */
.kh-navbar-account-wrap > li {
    list-style: none;
    position: relative !important;
}

/* The real WHMCS "Account" item has no icon configured (`hasIcon()` is
   false), so it only ever outputs its plain text label - hence the
   overflowing "Account" text seen before. Rather than depend on WHMCS
   providing an <i>, draw a real user icon via ::before (Font Awesome,
   already loaded site-wide) and fully clip away whatever real text
   content sits behind it - the link's href/click target is untouched. */
.kh-navbar-account-wrap .dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--kh-border, #e5ebe8);
    color: var(--kh-dark, #111a19);
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    white-space: nowrap;
}

.kh-navbar-account-wrap .dropdown-toggle::before {
    content: "\f007";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 15px !important;
    line-height: 1;
}

.kh-navbar-account-wrap .dropdown-toggle::after {
    display: none;
}

.kh-navbar-account-wrap .dropdown-toggle:hover {
    border-color: var(--kh-gold, #e8b71c);
    color: var(--kh-gold, #e8b71c);
}

/* Logged-in variant: shows the real WHMCS label ("My Account") next to the
   icon instead of the guest state's icon-only circle - same `<a>`, same
   `::before` icon, just no longer clipped to a 0-size circle. The label
   text itself is real (`{$item->getLabel()}` from navbar.tpl), not
   hardcoded here. */
.kh-navbar-account-wrap-loggedin .dropdown-toggle {
    width: auto !important;
    height: 38px !important;
    padding: 0 16px 0 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 8px;
}

.kh-navbar-account-wrap-loggedin .dropdown-toggle::before {
    font-size: 14px !important;
}

.kh-navbar-account-wrap-loggedin .dropdown-toggle::after {
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid currentColor;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .6;
}

/* Hover-to-open already works here via the existing `.dropdown-hover`
   class (see the shared `li.dropdown-hover:hover > .dropdown-menu` rule
   above) - the real "Account" item already carries that class from
   navbar_customization.php, regardless of which parent it now sits in. */
.kh-navbar-account-wrap .dropdown-menu {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 100% !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 8px;
    border-radius: 10px;
    border: 1px solid var(--kh-border, #e5ebe8);
    box-shadow: 0 12px 30px rgba(16, 24, 32, .12);
    padding: 6px;
    min-width: 180px;
}

/* Shared gold-on-hover style for every real dropdown menu in the main
   navbar - the Store dropdown (Browse All / Register / Transfer) and
   the Account dropdown (Login / Register / Forgot Password) alike.
   Scoped to `.navbar-light` (the true shared ancestor of both - Store's
   dropdown sits inside `.main-navbar-wrapper`, Account's is a sibling
   of it, `.kh-navbar-account-wrap`, so `.main-navbar-wrapper` alone
   would miss Account's items entirely). */
#header .navbar-light .dropdown-menu .dropdown-item {
    border-radius: 6px;
    padding: 0;
}

#header .navbar-light .dropdown-menu .dropdown-item a {
    display: block;
    border-radius: 6px;
    padding: 9px 12px !important;
    color: var(--kh-text, #16231f) !important;
    font-size: 13.5px;
}

/* `#header` prefix (matching override90.css's own `#header .main-navbar-wrapper
   .dropdown-menu a:hover{background-color:...!important}` ID-scoped rule) is
   required here - without it, that stock rule's higher specificity (ID beats
   any number of classes) wins the fight over `!important` background/color
   even though ours also carries `!important`, which is exactly why the Store
   dropdown kept showing stock's grey instead of our gold. */
#header .navbar-light .dropdown-menu .dropdown-item:hover,
#header .navbar-light .dropdown-menu .dropdown-item a:hover {
    background-color: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    text-decoration: none;
}

/* ===== Client area dashboard (clientareahome.tpl) =====
   Every number/name/list here is real, per-client data - the four stat
   tiles and the "Active Products/Services"/other panels come from WHMCS's
   own $clientsstats/$panels, the rest (Your Info/Account Status/services
   table/domains expiring/recent tickets/recent news) from a live DB query
   in includes/hooks/client_dashboard_data.php. Nothing here is hardcoded
   text standing in for real data - see brain/whmcs-redesign/Finding.md. */
.kh-dash-wrap,
.kh-dash-wrap * {
    font-family: "Urbanist", sans-serif;
    box-sizing: border-box;
}

/* --- Stat tiles --- */
.kh-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.kh-dash-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 6px 18px rgba(16, 24, 32, .04);
    color: inherit;
    text-decoration: none;
    transition: .15s ease;
}

/* Each stat tile's background is a soft gradient from its own icon's
   colour down to white - matches whichever icon badge (blue/green/
   gold/dark) that specific tile actually uses. */
.kh-dash-stat:has(.kh-dash-stat-icon-blue) {
    background: linear-gradient(180deg, #e8f1fd 0%, #ffffff 100%);
}

.kh-dash-stat:has(.kh-dash-stat-icon-green) {
    background: linear-gradient(180deg, var(--kh-green-soft, #eaf8f3) 0%, #ffffff 100%);
}

.kh-dash-stat:has(.kh-dash-stat-icon-gold) {
    background: linear-gradient(180deg, var(--kh-gold-soft, #fff7d9) 0%, #ffffff 100%);
}

.kh-dash-stat:has(.kh-dash-stat-icon-dark) {
    background: linear-gradient(180deg, #ecefee 0%, #ffffff 100%);
}

.kh-dash-stat:hover {
    border-color: var(--kh-gold, #e8b71c);
    box-shadow: 0 10px 24px rgba(16, 24, 32, .07);
    transform: translateY(-3px);
    color: inherit;
    text-decoration: none;
}

.kh-dash-stat-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kh-dash-stat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.kh-dash-stat-icon svg {
    width: 20px;
    height: 20px;
}

.kh-dash-stat-icon-blue { background: #e8f1fd; color: #2f7fe0; }
.kh-dash-stat-icon-green { background: var(--kh-green-soft, #eaf8f3); color: var(--kh-green, #33d693); }
.kh-dash-stat-icon-gold { background: var(--kh-gold-soft, #fff7d9); color: var(--kh-gold-dark, #dca400); }
.kh-dash-stat-icon-dark { background: #ecefee; color: var(--kh-dark, #111a19); }

.kh-dash-stat-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
    line-height: 1.2;
}

.kh-dash-stat-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--kh-muted, #697873);
}

/* Reference's stat cards carry no separate "view all" line - the whole
   card is already the link, so this stays available to assistive tech
   without adding visual clutter. */
.kh-dash-stat-link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* --- Two-column dashboard grid --- */
.kh-dash-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 22px;
    align-items: start;
}

.kh-dash-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 18px;
}

.kh-dash-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.kh-dash-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* kh-reg-card already gives the white/border/radius base (see the
   Register-page block above); dashboard cards reuse it and just add their
   own internal layout on top. Shadow is toned down here specifically -
   flatter, thin-border cards read calmer/more "elegant" for a page this
   information-dense than the deeper shadow used on lighter pages. */
.kh-dash-wrap .kh-reg-card {
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(16, 24, 32, .03);
}

/* Every main dashboard card shares the exact same soft green-to-white
   gradient (matching "Affordable Hosting for Your Next Big Idea") - no
   separate amber family, no plain-white cards - for one consistent look
   across the whole page. */
.kh-dash-wrap .kh-dash-services-card,
.kh-dash-wrap .kh-dash-panel-card,
.kh-dash-wrap .kh-dash-domains-card,
.kh-dash-wrap .kh-dash-tickets-card,
.kh-dash-wrap .kh-dash-news-card {
    background: linear-gradient(180deg, #ECFDF5 0%, #ffffff 100%);
}

.kh-dash-card-headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.kh-dash-card-headrow.kh-reg-section-label {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.kh-dash-card-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Small colour-badge icon in front of every dashboard card's title - the
   one bit of visual richness the flatter restyle (see the shadow note
   above) had traded away. Each card picks its own accent colour from the
   brand palette already used for the stat tiles/pills, not one colour
   repeated everywhere. */
.kh-dash-wrap .kh-reg-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kh-dash-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #33d693);
}

.kh-dash-title-icon svg {
    width: 15px;
    height: 15px;
}

.kh-dash-title-icon.gold { background: var(--kh-gold-soft, #fff7d9); color: var(--kh-gold-dark, #dca400); }
.kh-dash-title-icon.blue { background: #e8f1fd; color: #2f7fe0; }
.kh-dash-title-icon.dark { background: #ecefee; color: var(--kh-dark, #111a19); }

/* Used only where a title needs to sit alongside a sibling (e.g. a status
   pill) inside a `.kh-reg-section-label` that's already flexing those two
   as its own direct children - groups the icon+text pair into one unit
   first so `justify-content: space-between` still puts the pill on the
   right instead of spacing all three out evenly. */
.kh-dash-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* --- "Register a New Domain" (and any other real WHMCS panel with a raw
   HTML body) - generic button styling since this markup is rendered
   server-side by WHMCS itself (getBodyHtml()), not by our template, so we
   can't add our own classes to it directly. Scoped tightly to panel
   bodies on this page only. --- */
.kh-dash-panel-body .btn,
.kh-dash-panel-body button,
.kh-dash-panel-body input[type="submit"],
.kh-dash-panel-body input[type="button"] {
    height: 44px !important;
    padding: 0 22px !important;
    border-radius: var(--kh-btn-radius) !important;
    border: none !important;
    background: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

.kh-dash-panel-body .btn:hover,
.kh-dash-panel-body button:hover,
.kh-dash-panel-body input[type="submit"]:hover,
.kh-dash-panel-body input[type="button"]:hover {
    background: #000 !important;
    color: #fff !important;
}

/* Any button after another button (Transfer, sitting next to Register) -
   `~` matches on real DOM order rather than counting a specific tag, so it
   stays correct regardless of whether WHMCS renders these as <button>,
   <input type=submit> or <a class="btn">. */
.kh-dash-panel-body .btn ~ .btn,
.kh-dash-panel-body button ~ button,
.kh-dash-panel-body input[type="submit"] ~ input[type="submit"],
.kh-dash-panel-body input[type="button"] ~ input[type="button"] {
    margin-left: 10px !important;
    background: transparent !important;
    border: 1.5px solid var(--kh-dark, #111a19) !important;
    color: var(--kh-dark, #111a19) !important;
}

.kh-dash-panel-body .btn ~ .btn:hover,
.kh-dash-panel-body button ~ button:hover,
.kh-dash-panel-body input[type="submit"] ~ input[type="submit"]:hover,
.kh-dash-panel-body input[type="button"] ~ input[type="button"]:hover {
    background: var(--kh-dark, #111a19) !important;
    color: #fff !important;
}

.kh-dash-panel-body .form-control,
.kh-dash-panel-body input[type="text"] {
    height: 44px;
    border-radius: 10px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    font-size: 13.5px;
}

.kh-dash-panel-body .form-control:focus,
.kh-dash-panel-body input[type="text"]:focus {
    border-color: var(--kh-green, #33d693);
    box-shadow: none;
}

.kh-dash-services-card .kh-dash-card-headrow,
.kh-dash-domains-card .kh-dash-card-headrow,
.kh-dash-tickets-card .kh-dash-card-headrow,
.kh-dash-news-card .kh-dash-card-headrow,
.kh-dash-panel-card .kh-dash-card-headrow {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
}

/* --- Left sidebar: real primary nav (sidebar.tpl), restyled --- */
.kh-dash-nav-card {
    padding: 10px !important;
}

.kh-dash-nav-card .card-sidebar,
.kh-dash-nav-card .card {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0 !important;
}

.kh-dash-nav-card .card-header {
    display: none;
}

.kh-dash-nav-card .list-group {
    background: transparent;
    padding: 0;
}

.kh-dash-nav-card .list-group-item {
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    color: var(--kh-text, #16231f);
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.kh-dash-nav-card .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kh-dash-nav-card .sidebar-menu-item-icon {
    color: var(--kh-muted, #697873);
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.kh-dash-nav-card .list-group-item:hover {
    background: var(--kh-green-soft, #eaf8f3) !important;
    color: var(--kh-green-dark, #063f32);
}

.kh-dash-nav-card .list-group-item.active {
    background: var(--kh-dark, #111a19) !important;
    color: #fff !important;
}

.kh-dash-nav-card .list-group-item.active .sidebar-menu-item-icon {
    color: var(--kh-gold, #e8b71c);
}

/* Some real $primarySidebar panels (e.g. a client-details summary with an
   "Update"/"Confirm Manual Payment" panel) carry their own raw HTML body,
   same as the main-content panels do - restyled to match our own plain
   `.kh-reg-btn-outline` look (white, thin border, green on hover) instead
   of whatever stock black button style they'd otherwise keep, so the top
   of the sidebar reads consistently with the "Your Info" card right below
   it. */
.kh-dash-nav-card .card-body {
    padding: 4px 6px 14px;
    font-size: 12.5px;
    color: var(--kh-muted, #697873);
    line-height: 1.6;
}

.kh-dash-nav-card .card-body .btn,
.kh-dash-nav-card .card-body button,
.kh-dash-nav-card .card-body input[type="submit"],
.kh-dash-nav-card .card-body input[type="button"],
.kh-dash-nav-card .card-body a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px !important;
    padding: 0 16px !important;
    margin-top: 10px;
    border: 1px solid #dce2e7 !important;
    border-radius: var(--kh-btn-radius) !important;
    background: #fff !important;
    color: var(--kh-text, #16231f) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.kh-dash-nav-card .card-body .btn:hover,
.kh-dash-nav-card .card-body button:hover,
.kh-dash-nav-card .card-body input[type="submit"]:hover,
.kh-dash-nav-card .card-body input[type="button"]:hover,
.kh-dash-nav-card .card-body a.btn:hover {
    border-color: var(--kh-green, #33d693) !important;
    color: var(--kh-green-dark, #063f32) !important;
    background: #fff !important;
}

.kh-dash-nav-card .card-body a:not(.btn) {
    color: var(--kh-text, #16231f);
    font-size: 12px;
    font-weight: 600;
}

.kh-dash-nav-card .card-body a:not(.btn):hover {
    color: var(--kh-green-dark, #063f32);
}

/* Same treatment for a panel's footerHtml (e.g. "Confirm Manual Payment"),
   in case WHMCS puts it there instead of in the body. */
.kh-dash-nav-card .card-footer {
    padding: 10px 6px 4px;
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

.kh-dash-nav-card .card-footer .btn,
.kh-dash-nav-card .card-footer button,
.kh-dash-nav-card .card-footer a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px !important;
    border: 1px solid #dce2e7 !important;
    border-radius: var(--kh-btn-radius) !important;
    background: #fff !important;
    color: var(--kh-text, #16231f) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.kh-dash-nav-card .card-footer .btn:hover,
.kh-dash-nav-card .card-footer button:hover,
.kh-dash-nav-card .card-footer a.btn:hover {
    border-color: var(--kh-green, #33d693) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-dash-nav-card .card-footer a:not(.btn) {
    color: var(--kh-text, #16231f);
    font-size: 12px;
    font-weight: 600;
}

.kh-dash-nav-card .card-footer a:not(.btn):hover {
    color: var(--kh-green-dark, #063f32);
}

/* --- Your Info card --- */
.kh-dash-info-company {
    font-weight: 800;
    font-size: 14.5px;
    color: var(--kh-dark, #111a19);
}

.kh-dash-info-name {
    font-size: 13px;
    color: var(--kh-muted, #697873);
    margin-bottom: 10px;
}

.kh-dash-info-line {
    font-size: 12.5px;
    color: var(--kh-muted, #697873);
    line-height: 1.6;
}

.kh-dash-info-btn {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
}

/* --- Account Status card --- */
.kh-dash-status-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kh-dash-status-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
}

.kh-dash-status-list li span {
    color: var(--kh-muted, #697873);
}

.kh-dash-status-list li strong {
    color: var(--kh-text, #16231f);
    font-weight: 700;
    text-align: right;
}

.kh-dash-status-host {
    word-break: break-all;
    max-width: 140px;
}

.kh-dash-yes { color: var(--kh-green-dark, #063f32) !important; }
.kh-dash-no { color: #c0392b !important; }

/* --- Quick Links card --- */
.kh-dash-quicklinks-card .kh-reg-section-label {
    margin-bottom: 10px;
}

.kh-dash-quicklink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    color: var(--kh-text, #16231f);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.kh-dash-quicklink:last-child {
    border-bottom: none;
}

.kh-dash-quicklink svg {
    width: 16px;
    height: 16px;
    color: var(--kh-green, #33d693);
    flex-shrink: 0;
}

.kh-dash-quicklink:hover {
    color: var(--kh-gold-dark, #dca400);
    text-decoration: none;
}

.kh-dash-quicklink-danger svg {
    color: #c0392b;
}

.kh-dash-quicklink-danger:hover {
    color: #c0392b;
}

/* --- Active Products/Services table --- */
.kh-dash-table-wrap {
    overflow-x: auto;
}

.kh-dash-table {
    width: 100%;
    border-collapse: collapse;
}

.kh-dash-table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--kh-muted, #697873);
    font-weight: 700;
    padding: 0 12px 10px;
    white-space: nowrap;
}

.kh-dash-table td {
    padding: 14px 12px;
    border-top: 1px solid var(--kh-border, #e5ebe8);
    font-size: 13.5px;
    vertical-align: middle;
    white-space: nowrap;
}

.kh-dash-table-sub {
    color: var(--kh-muted, #697873);
    font-size: 12px;
    font-weight: 400;
}

.kh-dash-table-actions {
    text-align: right;
}

.kh-dash-table-btn {
    height: 32px;
    padding: 0 14px;
    font-size: 11.5px;
}

.kh-dash-empty {
    margin: 6px 0 0;
    font-size: 13px;
}

/* --- Status/ticket pills --- */
.kh-dash-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #eef1f0;
    color: var(--kh-muted, #697873);
}

.kh-dash-pill-active,
.kh-dash-pill-open,
.kh-dash-pill-paid {
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
}

.kh-dash-pill-pending,
.kh-dash-pill-answered,
.kh-dash-pill-pending-registration,
.kh-dash-pill-pending-transfer,
.kh-dash-pill-in-progress {
    background: var(--kh-gold-soft, #fff7d9);
    color: var(--kh-gold-dark, #dca400);
}

.kh-dash-pill-customer-reply,
.kh-dash-pill-on-hold,
.kh-dash-pill-grace {
    background: #e8f1fd;
    color: #2f7fe0;
}

.kh-dash-pill-suspended,
.kh-dash-pill-danger,
.kh-dash-pill-fraud,
.kh-dash-pill-cancelled,
.kh-dash-pill-expired {
    background: #fdecec;
    color: #c0392b;
}

.kh-dash-pill-closed,
.kh-dash-pill-terminated,
.kh-dash-pill-transferred-away {
    background: #eef1f0;
    color: var(--kh-muted, #697873);
}

/* --- Panel/list rows shared by domains-expiring, tickets, news, and any
   real WHMCS/addon panel rendered via outputHomePanels --- */
.kh-dash-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: .15s ease;
}

.kh-dash-list-row:hover {
    background: var(--kh-green-soft, #eaf8f3);
    color: inherit;
    text-decoration: none;
}

.kh-dash-panel-list .kh-dash-list-row {
    padding: 10px 12px;
}

.kh-dash-list-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-dash-list-sub {
    font-size: 11.5px;
    color: var(--kh-muted, #697873);
    margin-top: 2px;
}

.kh-dash-panel-body {
    font-size: 13.5px;
    color: var(--kh-text, #16231f);
}

.kh-dash-card-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

/* --- Promo card ---
   Light, bordered card with a colour-badge icon - matches the reference's
   flatter "Web Hosting"/"Marketplace" widget style instead of a heavy dark
   gradient panel, while keeping our own green/gold brand colours. */
.kh-dash-promo-card {
    background: linear-gradient(180deg, #ECFDF5 0%, #ffffff 100%);
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 6px 18px rgba(16, 24, 32, .04);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kh-dash-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #fff;
    color: var(--kh-green, #33d693);
}

.kh-dash-promo-eyebrow svg {
    width: 19px;
    height: 19px;
}

.kh-dash-promo-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--kh-dark, #111a19);
}

.kh-dash-promo-card p {
    margin: 0 0 18px;
    font-size: 12.5px;
    color: var(--kh-muted, #697873);
    line-height: 1.6;
}

.kh-dash-promo-btn {
    width: auto;
    align-self: flex-start;
    display: inline-flex;
    gap: 8px;
    padding: 0 22px;
    height: 44px;
}

.kh-dash-promo-btn svg {
    width: 14px;
    height: 14px;
}

/* --- Bottom "Need Assistance" CTA banner --- */
.kh-dash-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(180deg, #ECFDF5 0%, #ffffff 100%);
    border: 1px solid rgba(51, 214, 147, .25);
    border-radius: 16px;
    padding: 22px 26px;
}

.kh-dash-cta-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--kh-green, #33d693);
}

.kh-dash-cta-icon svg {
    width: 22px;
    height: 22px;
}

.kh-dash-cta-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kh-dash-cta-text strong {
    font-size: 15px;
    color: var(--kh-dark, #111a19);
}

.kh-dash-cta-text span {
    font-size: 12.5px;
    color: var(--kh-muted, #697873);
}

.kh-dash-cta-btn {
    width: auto;
    flex-shrink: 0;
    display: inline-flex;
    gap: 8px;
    padding: 0 22px;
    height: 46px;
}

.kh-dash-cta-btn svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 1100px) {
    .kh-dash-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .kh-dash-grid {
        grid-template-columns: 1fr;
    }
    .kh-dash-side {
        position: static;
    }
    .kh-dash-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .kh-dash-stats {
        grid-template-columns: 1fr;
    }
    .kh-dash-card-headrow {
        flex-wrap: wrap;
    }
}

/* ===== My Domains page (clientareadomains.tpl) =====
   Real functionality untouched - #tableDomainsList, #domainForm, every
   .setBulkAction id (nameservers/contactinfo/renewDomains/autorenew/
   reglock) that the page's own JS binds to, and the per-row
   clickableSafeRedirect() links - only new classes layered on top. */
.kh-domains-page,
.kh-domains-page * {
    font-family: "Urbanist", sans-serif;
}

.kh-domains-card {
    padding: 22px 24px;
}

/* --- Toolbar (Manage Nameservers / Edit Contact Info / Renew / More) --- */
.kh-domains-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px !important;
}

.kh-domains-toolbar .btn.btn-default {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px !important;
    border: 1px solid #dce2e7 !important;
    border-radius: var(--kh-btn-radius) !important;
    background: #fff !important;
    color: var(--kh-text, #16231f) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.kh-domains-toolbar .btn.btn-default:hover,
.kh-domains-toolbar .btn.btn-default:focus {
    border-color: var(--kh-green, #33d693) !important;
    color: var(--kh-green-dark, #063f32) !important;
    background: #fff !important;
}

.kh-domains-toolbar .dropdown-menu {
    border-radius: 10px;
    border: 1px solid var(--kh-border, #e5ebe8);
    box-shadow: 0 12px 30px rgba(16, 24, 32, .12);
    padding: 6px;
}

.kh-domains-toolbar .dropdown-item {
    border-radius: 6px;
    padding: 9px 12px !important;
    font-size: 13px;
}

.kh-domains-toolbar .dropdown-item:hover {
    background: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
}

/* --- Domains table --- */
.kh-domains-table-wrap {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 12px;
    overflow: hidden;
}

.kh-domains-table-wrap #tableDomainsList {
    margin: 0;
}

.kh-domains-table-wrap #tableDomainsList thead th {
    background: #f9fbfa;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--kh-muted, #697873);
    font-weight: 700;
}

.kh-domains-table-wrap #tableDomainsList tbody tr {
    cursor: pointer;
}

.kh-domains-table-wrap #tableDomainsList tbody tr:hover {
    background: var(--kh-green-soft, #eaf8f3);
}

.kh-domains-table-wrap #tableDomainsList tbody td {
    border-top: 1px solid var(--kh-border, #e5ebe8);
    vertical-align: middle;
    font-size: 13.5px;
}

.kh-domains-table-wrap .label.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #eef1f0;
    color: var(--kh-muted, #697873);
}

.kh-domains-table-wrap .status-active {
    background: var(--kh-green-soft, #eaf8f3) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-domains-table-wrap .status-expired,
.kh-domains-table-wrap .status-cancelled,
.kh-domains-table-wrap .status-transferredaway {
    background: #eef1f0 !important;
    color: var(--kh-muted, #697873) !important;
}

.kh-domains-table-wrap .status-pending,
.kh-domains-table-wrap .status-pendingtransfer,
.kh-domains-table-wrap .status-pendingregistration,
.kh-domains-table-wrap .status-graceperiod,
.kh-domains-table-wrap .status-redemptionperiod {
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
}

.kh-domains-table-wrap .status-fraud {
    background: #fdecec !important;
    color: #c0392b !important;
}

/* ===== My Invoices page (clientareainvoices.tpl) =====
   Real functionality untouched - #tableInvoicesList, the DataTable JS
   wiring, and every row's clickableSafeRedirect() link. Sidebar (0
   Invoices Due / Status filter / Payment Options / Billing nav) already
   gets the shared premium-sidebar treatment via header.tpl. */
.kh-invoices-card {
    padding: 22px 24px;
}

.kh-invoices-table-wrap {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 12px;
    overflow: hidden;
}

.kh-invoices-table-wrap #tableInvoicesList {
    margin: 0;
}

.kh-invoices-table-wrap #tableInvoicesList thead th {
    background: #f9fbfa;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--kh-muted, #697873);
    font-weight: 700;
}

.kh-invoices-table-wrap #tableInvoicesList tbody tr {
    cursor: pointer;
}

.kh-invoices-table-wrap #tableInvoicesList tbody tr:hover {
    background: var(--kh-green-soft, #eaf8f3);
}

.kh-invoices-table-wrap #tableInvoicesList tbody td {
    border-top: 1px solid var(--kh-border, #e5ebe8);
    vertical-align: middle;
    font-size: 13.5px;
}

.kh-invoices-table-wrap .label.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #eef1f0;
    color: var(--kh-muted, #697873);
}

.kh-invoices-table-wrap .status-paid {
    background: var(--kh-green-soft, #eaf8f3) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-invoices-table-wrap .status-unpaid {
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
}

.kh-invoices-table-wrap .status-overdue,
.kh-invoices-table-wrap .status-collections {
    background: #fdecec !important;
    color: #c0392b !important;
}

.kh-invoices-table-wrap .status-cancelled,
.kh-invoices-table-wrap .status-refunded,
.kh-invoices-table-wrap .status-draft {
    background: #eef1f0 !important;
    color: var(--kh-muted, #697873) !important;
}

.kh-invoices-table-wrap .status-paymentpending {
    background: #e8f1fd !important;
    color: #2f7fe0 !important;
}

/* ===== My Quotes page (clientareaquotes.tpl) =====
   Real functionality untouched - #tableQuotesList, its DataTable JS
   wiring, every row's clickableSafeRedirect() link, and the real
   dl.php download form/button per row. */
.kh-quotes-card {
    padding: 22px 24px;
}

.kh-quotes-table-wrap {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 12px;
    overflow: hidden;
}

.kh-quotes-table-wrap #tableQuotesList {
    margin: 0;
}

.kh-quotes-table-wrap #tableQuotesList thead th {
    background: #f9fbfa;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--kh-muted, #697873);
    font-weight: 700;
}

.kh-quotes-table-wrap #tableQuotesList tbody tr:hover {
    background: var(--kh-green-soft, #eaf8f3);
}

.kh-quotes-table-wrap #tableQuotesList tbody td {
    border-top: 1px solid var(--kh-border, #e5ebe8);
    vertical-align: middle;
    font-size: 13.5px;
}

.kh-quotes-table-wrap .label.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #eef1f0;
    color: var(--kh-muted, #697873);
}

.kh-quotes-table-wrap .status-accepted {
    background: var(--kh-green-soft, #eaf8f3) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-quotes-table-wrap .status-delivered,
.kh-quotes-table-wrap .status-sent {
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
}

.kh-quotes-table-wrap .status-declined,
.kh-quotes-table-wrap .status-lost,
.kh-quotes-table-wrap .status-expired {
    background: #fdecec !important;
    color: #c0392b !important;
}

.kh-quotes-table-wrap .status-draft {
    background: #eef1f0 !important;
    color: var(--kh-muted, #697873) !important;
}

.kh-quote-download-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px !important;
    border-radius: var(--kh-btn-radius) !important;
    border: 1px solid #dce2e7 !important;
    background: #fff !important;
    color: var(--kh-text, #16231f) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    white-space: nowrap;
}

.kh-quote-download-btn:hover {
    border-color: var(--kh-green, #33d693) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

/* ===== Payment Methods page (account-paymentmethods.tpl) =====
   Real functionality untouched - #payMethodList, every real routePath()
   link (setdefault/view/delete), the "disabled" state on default/expired
   methods, and the delete-confirmation modal + its JS. */
.kh-paymethods-card {
    padding: 22px 24px;
}

.kh-paymethods-intro {
    color: var(--kh-muted, #697873);
    font-size: 13.5px;
    margin-bottom: 18px;
}

.kh-paymethods-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* .kh-reg-submit-btn is normally a full-width, 54px-tall form button -
   sized back down to an inline action button for this context. */
.kh-paymethods-add-btn.kh-reg-submit-btn {
    width: auto;
    height: 44px;
    padding: 0 24px;
    font-size: 13px;
}

.kh-paymethods-table-wrap {
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 12px;
    overflow: hidden;
}

.kh-paymethods-table-wrap #payMethodList {
    margin: 0;
    width: 100%;
}

.kh-paymethods-table-wrap #payMethodList tr:first-child {
    background: #f9fbfa;
}

.kh-paymethods-table-wrap #payMethodList tr:first-child th {
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    padding: 12px 16px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--kh-muted, #697873);
    font-weight: 700;
}

.kh-paymethods-table-wrap #payMethodList tr:not(:first-child) td {
    padding: 14px 16px;
    border-top: 1px solid var(--kh-border, #e5ebe8);
    font-size: 13.5px;
    vertical-align: middle;
}

.kh-paymethods-action-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px !important;
    border-radius: var(--kh-btn-radius) !important;
    border: 1px solid #dce2e7 !important;
    background: #fff !important;
    color: var(--kh-text, #16231f) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    white-space: nowrap;
}

.kh-paymethods-action-btn:hover {
    border-color: var(--kh-green, #33d693) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-paymethods-action-btn.disabled {
    opacity: .5;
    pointer-events: none;
}

.kh-paymethods-delete-btn:hover {
    border-color: #c0392b !important;
    color: #c0392b !important;
}

/* =====================================================================
   Horizontal page menu (replaces the left sidebar)
   - .kh-sbar-wrap sits on the hero's bottom edge and sticks to the top of the screen on scroll
   ===================================================================== */
.kh-sbar-wrap {
    position: sticky;
    top: 10px;                       /* scroll pe screen ke bilkul upar */
    z-index: 1020;
    margin: 22px 0 6px;
    pointer-events: none;            /* only the bar itself is clickable */
    font-family: "Urbanist", sans-serif;
}
/* Bar #main-body ke andar hai (sticky poore page tak) */
#main-body.kh-has-sbar { padding-top: 0; overflow: clip; }   /* theme ka overflow:hidden sticky tod deta hai; clip wahi kaam karta hai bina todey */
#main-body.kh-has-sbar > .kh-sbar-wrap { margin: 22px 0 34px; }
#main-body.kh-has-sbar-hero > .kh-sbar-wrap { margin-top: -30px; }   /* aadha hero ke upar */
.kh-sbar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .08);
}
.kh-sbar-track {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.kh-sbar-track::-webkit-scrollbar { display: none; }
.kh-sbar-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin: 0;
}
.kh-sbar-sep {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 6px 6px;
    background: var(--kh-border, #e5ebe8);
}
.kh-sbar-track > .kh-sbar-sep:last-child { display: none; }
.kh-sbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--kh-dark, #111a19) !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, color .15s ease;
}
.kh-sbar-item i { font-size: 13px; color: var(--kh-muted, #697873); }
.kh-sbar-item:hover { background: #f3f5f4; }
.kh-sbar-item.active,
.kh-sbar-item.active:hover {
    background: var(--kh-gold, #e8b71c);
    color: #fff !important;
}
.kh-sbar-item.active i { color: #fff; }
.kh-sbar-item.disabled { opacity: .45; pointer-events: none; }
.kh-sbar-text { cursor: default; font-weight: 500; color: var(--kh-muted, #697873) !important; }
.kh-sbar-text:hover { background: transparent; }
.kh-sbar-badge {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.kh-sbar-item.active .kh-sbar-badge { background: rgba(255, 255, 255, .25); color: #fff; }

/* Panels with only HTML (client details, search...) -> dropdown */
.kh-sbar-drop { position: static; }
.kh-sbar-caret { font-size: 10px !important; transition: transform .15s ease; }
.kh-sbar-drop.open .kh-sbar-caret { transform: rotate(180deg); }
.kh-sbar-drop.open .kh-sbar-drop-btn { background: #f3f5f4; }
.kh-sbar-pop {
    display: none;
    position: fixed;
    z-index: 1040;
    min-width: 260px;
    max-width: min(360px, calc(100vw - 24px));
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 32, .14);
    font-size: 14px;
}
.kh-sbar-drop.open .kh-sbar-pop { display: block; }
.kh-sbar-pop-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kh-border, #e5ebe8); }

/* Back to top */
.kh-sbar-top {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.kh-sbar-top:hover { background: #111a19; }
.kh-sbar-wrap.kh-stuck .kh-sbar-top { display: inline-flex; }

@media (max-width: 767px) {
    #main-body.kh-has-sbar-hero > .kh-sbar-wrap { margin-top: -24px; margin-bottom: 26px; }
    .kh-sbar { width: 100%; }
    .kh-sbar-item { height: 34px; padding: 0 11px; font-size: 13px; }
}