/* ==========================================================================
   Go Hostorage — frontend redesign for the "six" template
   Loaded automatically after all.min.css (see includes/head.tpl assetExists).
   Arabic-first RTL + English LTR. Brand palette sampled from the live logo
   and gohostorage.com CSS variables (#6BA1BC / #274E5F family).
   ========================================================================== */

:root {
    --gh-navy-900: #10222e;
    --gh-navy-800: #1a3543;
    --gh-navy: #274E5F;
    --gh-blue: #6BA1BC;
    --gh-blue-600: #4b89ab;
    --gh-blue-700: #33708f;
    --gh-green: #0FC978;
    --gh-ink: #182430;
    --gh-text: #46586a;
    --gh-muted: #7d8f9e;
    --gh-bg: #ffffff;
    --gh-bg-tint: #f2f8fb;
    --gh-bg-deep: #eaf3f8;
    --gh-border: #dfeaf1;
    --gh-radius: 16px;
    --gh-radius-sm: 10px;
    --gh-shadow-sm: 0 2px 10px rgba(23, 48, 65, 0.06);
    --gh-shadow: 0 12px 32px rgba(23, 48, 65, 0.10);
    --gh-shadow-lg: 0 24px 60px rgba(23, 48, 65, 0.16);
    --gh-font: 'Tajawal', 'Open Sans', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
    background-color: var(--gh-bg);
    font-family: var(--gh-font);
    color: var(--gh-text);
    font-size: 15px;
}

#gh-pricing {
    scroll-margin-top: 90px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--gh-font);
    color: var(--gh-ink);
}

a {
    color: var(--gh-blue-700);
}
a:hover,
a:focus {
    color: var(--gh-navy);
}

/* Brand-align core Bootstrap components used across the client area & cart */
.btn-primary {
    background-color: var(--gh-blue-700);
    border-color: var(--gh-blue-700);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:active:focus {
    background-color: var(--gh-navy);
    border-color: var(--gh-navy);
}
.panel-primary > .panel-heading {
    background-color: var(--gh-navy);
    border-color: var(--gh-navy);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    background-color: var(--gh-blue-700);
    border-color: var(--gh-blue-700);
}
.label-info {
    background-color: var(--gh-blue-600);
}
div.header-lined h1 {
    color: var(--gh-navy);
}

:focus-visible {
    outline: 2px solid var(--gh-blue-600);
    outline-offset: 2px;
}

/* The sticky header (z-index 1030) must stay under the WHMCS blocking
   overlay; keep the overlay below Bootstrap modals (1050). */
#fullpage-overlay {
    z-index: 1040;
}

/* Flip directional arrows in RTL */
html[dir="rtl"] .gh-arrow {
    transform: scaleX(-1);
    display: inline-block;
}

/* --------------------------------------------------------------------------
   2. Top bar
   -------------------------------------------------------------------------- */

#gh-topbar {
    background: var(--gh-navy-900);
    color: #b9cedd;
    font-size: 13px;
}
.gh-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    flex-wrap: wrap;
}
.gh-topbar-links {
    display: flex;
    align-items: center;
    gap: 18px;
}
.gh-topbar-links a {
    color: #b9cedd;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gh-topbar-links a:hover,
.gh-topbar-links a:focus {
    color: #fff;
}

/* Neutralise six's floated top-nav and restyle for the dark strip */
#gh-topbar ul.top-nav {
    float: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
#gh-topbar ul.top-nav > li > a {
    color: #b9cedd;
    padding: 6px 10px;
    border-radius: 8px;
}
#gh-topbar ul.top-nav > li:hover > a,
#gh-topbar ul.top-nav > li > a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
#gh-topbar ul.top-nav > li.primary-action {
    padding: 0;
    margin: 0;
    border: 0;
}
#gh-topbar ul.top-nav > li.primary-action > a.btn {
    background-color: var(--gh-blue-600);
    color: #fff;
    border-radius: 999px;
    padding: 5px 16px;
    margin-inline-start: 8px;
    transition: background-color 0.2s ease;
}
#gh-topbar ul.top-nav > li.primary-action > a.btn:hover,
#gh-topbar ul.top-nav > li.primary-action > a.btn:focus {
    background-color: var(--gh-blue);
    color: var(--gh-navy-900);
}

/* --------------------------------------------------------------------------
   3. Header & navigation
   -------------------------------------------------------------------------- */

section#header {
    position: sticky;
    top: 0;
    z-index: 1030;
    margin: 0;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 0;
    border-bottom: 1px solid var(--gh-border);
    transition: box-shadow 0.25s ease;
}
section#header.gh-scrolled {
    box-shadow: var(--gh-shadow-sm);
}
.gh-header-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 72px;
    position: relative;
}
section#header .logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
section#header .logo img {
    max-height: 44px;
}
section#header .logo-text {
    font-family: var(--gh-font);
    font-weight: 800;
    font-size: 1.6em;
    color: var(--gh-navy);
    text-decoration: none;
}

#main-menu,
section#main-menu {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent; /* six paints this section teal (#006687) */
}
#main-menu .navbar,
#main-menu .navbar-default,
.navbar-main {
    background: transparent;
    border: 0;
    margin: 0;
    min-height: 0;
    border-radius: 0;
}
.navbar-main .navbar-header {
    float: none;
}
.navbar-main .navbar-toggle {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--gh-border);
    border-radius: 10px;
}
.navbar-main .navbar-toggle .icon-bar {
    background-color: var(--gh-navy);
}
.navbar-main .navbar-nav > li > a {
    color: var(--gh-ink);
    font-weight: 500;
    background: transparent;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > li.open > a,
.navbar-main .navbar-nav > li.open > a:hover,
.navbar-main .navbar-nav > li.open > a:focus,
.navbar-main .navbar-nav > li.active > a,
.navbar-main .navbar-nav > li.active > a:hover,
.navbar-main .navbar-nav > li.active > a:focus {
    color: var(--gh-blue-700);
    background: var(--gh-bg-tint);
}
.navbar-main .dropdown-menu {
    border: 1px solid var(--gh-border);
    border-radius: 12px;
    box-shadow: var(--gh-shadow);
    padding: 8px;
    min-width: 230px;
}
.navbar-main .dropdown-menu > li > a {
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--gh-text);
}
.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus {
    background: var(--gh-bg-tint);
    color: var(--gh-blue-700);
}
html[dir="rtl"] .navbar-main .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

.gh-nav-cta {
    flex-shrink: 0;
    background-image: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    color: #fff !important;
    font-weight: 700;
    border: 0;
    border-radius: 999px;
    padding: 10px 26px;
    box-shadow: 0 8px 20px rgba(39, 78, 95, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gh-nav-cta:hover,
.gh-nav-cta:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(39, 78, 95, 0.36);
    color: #fff;
}

/* Desktop navigation (custom breakpoint 1100px so 7 items + CTA fit) */
@media (min-width: 1100px) {
    .navbar-main .navbar-toggle {
        display: none;
    }
    #main-menu .navbar-collapse {
        display: flex !important;
        align-items: center;
        height: auto !important;
        padding: 0;
        overflow: visible;
        border: 0;
        box-shadow: none;
        background: transparent;
        position: static;
    }
    #main-menu .navbar-nav {
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
    }
    #main-menu .navbar-nav > li {
        float: none;
    }
    #main-menu .navbar-nav > li > a {
        padding: 12px 14px;
        border-radius: 10px;
    }
    #main-menu .navbar-nav.navbar-right {
        margin-inline-start: auto;
        float: none;
    }
}

/* Collapsed navigation (mobile + tablet, up to 1099px) */
@media (max-width: 1099px) {
    .navbar-main .navbar-toggle {
        display: block !important;
    }
    #main-menu {
        display: flex;
        justify-content: flex-end;
    }
    /* Anchor the flyout to .gh-header-row (position:relative), not the
       shrink-to-fit nav.navbar Bootstrap positions relatively. */
    .navbar-main,
    #main-menu .navbar {
        position: static;
    }
    #main-menu .navbar-collapse.collapse:not(.in) {
        display: none !important;
    }
    #main-menu .navbar-collapse.collapsing,
    #main-menu .navbar-collapse.collapse.in {
        display: block !important;
    }
    #main-menu .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1029;
        background: #fff;
        border: 1px solid var(--gh-border);
        border-top: 0;
        border-radius: 0 0 var(--gh-radius) var(--gh-radius);
        box-shadow: var(--gh-shadow);
        padding: 10px 14px 16px;
        max-height: 75vh;
        overflow-y: auto !important;
    }
    #main-menu .navbar-nav,
    #main-menu .navbar-nav.navbar-right {
        float: none !important;
        margin: 0;
    }
    #main-menu .navbar-nav > li {
        float: none !important;
        display: block;
    }
    #main-menu .navbar-nav > li > a {
        padding: 11px 12px;
        border-radius: 10px;
        display: block;
    }
    #main-menu .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        box-shadow: none;
        border: 0;
        background: var(--gh-bg-tint);
        margin: 4px 8px 8px;
    }
    .navbar-main > li.dropdown:hover > ul.dropdown-menu {
        display: none; /* disable six's hover-open in collapsed mode */
    }
    .navbar-main .open > ul.dropdown-menu {
        display: block !important;
    }
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

section#home-banner.gh-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1000px 480px at 85% -10%, rgba(107, 161, 188, 0.35), transparent 60%),
        radial-gradient(800px 420px at 10% 110%, rgba(15, 201, 120, 0.12), transparent 55%),
        linear-gradient(160deg, var(--gh-navy-900) 0%, var(--gh-navy) 60%, #2e6079 100%);
    color: #e8f1f7;
    padding: 84px 0 72px;
    text-align: center;
}
.gh-hero-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.gh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
}
.gh-orb-1 {
    width: 340px;
    height: 340px;
    top: -120px;
    inset-inline-end: -80px;
    background: var(--gh-blue);
}
.gh-orb-2 {
    width: 260px;
    height: 260px;
    bottom: -100px;
    inset-inline-start: -60px;
    background: var(--gh-green);
    opacity: 0.25;
}
.gh-cloud {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    font-size: 22px;
    animation: gh-float 7s ease-in-out infinite;
}
.gh-cloud-1 { top: 22%; inset-inline-start: 8%; }
.gh-cloud-2 { top: 55%; inset-inline-end: 7%; animation-delay: 1.6s; }
.gh-cloud-3 { bottom: 14%; inset-inline-start: 16%; animation-delay: 3.1s; }
@keyframes gh-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.gh-hero-inner {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
}
.gh-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #dcebf4;
    font-size: 13px;
    font-weight: 500;
}
.gh-hero-title {
    margin: 22px auto 14px;
    font-size: clamp(30px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    max-width: 18em;
}
.gh-hero-sub {
    margin: 0 auto 34px;
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.8;
    color: #c6d9e5;
    max-width: 40em;
}

.gh-domain-form {
    margin: 0 auto;
    max-width: 640px;
}
.gh-domain-box {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    box-shadow: var(--gh-shadow-lg);
}
.gh-domain-box .form-control {
    flex: 1 1 auto;
    border: 0;
    box-shadow: none;
    background: transparent;
    height: 48px;
    font-size: 16px;
    color: var(--gh-ink);
    padding: 0 18px;
}
.gh-domain-box .form-control:focus {
    outline: none;
    box-shadow: none;
}
.gh-domain-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
/* High specificity on purpose: stock six ships
   section#home-banner .btn { border-radius:0; font-weight:300 } +
   .btn.search{#4ab98b} / .btn.transfer{#bbb} which outrank plain classes. */
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-search,
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-transfer {
    border: 0;
    border-radius: 999px;
    height: 48px;
    padding: 0 28px;
    font-family: var(--gh-font);
    font-weight: 800;
    font-size: 15px;
    line-height: 48px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-search {
    background-image: linear-gradient(135deg, #14da85 0%, #0aa568 100%);
    color: #04331e;
    box-shadow: 0 8px 18px rgba(15, 201, 120, 0.35);
}
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-search:hover,
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-search:focus {
    color: #04331e;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 201, 120, 0.45);
}
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-search:active {
    transform: translateY(0);
}
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-transfer {
    background: transparent;
    color: var(--gh-blue-700);
    box-shadow: inset 0 0 0 2px var(--gh-blue-600);
}
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-transfer:hover,
section#home-banner.gh-hero .gh-domain-box .btn.gh-btn-transfer:focus {
    background: var(--gh-blue-700);
    color: #fff;
    box-shadow: inset 0 0 0 2px var(--gh-blue-700);
}
/* Stock six also flattens the input (border-radius:0, font-weight:300) */
section#home-banner.gh-hero .gh-domain-box .form-control {
    border-radius: 999px;
    font-weight: 500;
    color: var(--gh-ink);
}

/* Hero captcha: compact centred pill row (markup: captcha.tpl homepage branch).
   Normal flow only — no grid classes, no absolute positioning. */
section#home-banner.gh-hero .gh-domain-captcha {
    margin-top: 14px;
    text-align: center;
}
section#home-banner.gh-hero .gh-domain-captcha-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.gh-domain-captcha-help {
    margin: 0;
    font-size: 13px;
    color: #dcebf4;
}
.gh-domain-captcha-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* captcha code + image are Latin/LTR artifacts; never mirrored */
    direction: ltr;
}
.gh-domain-captcha-controls img {
    display: block;
    height: 40px;
    border-radius: 8px;
}
section#home-banner.gh-hero .gh-domain-captcha-controls .form-control {
    width: 112px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gh-ink);
}
section#home-banner.gh-hero .gh-domain-captcha .recaptcha-container {
    display: inline-block;
    margin: 0;
}
@media (max-width: 640px) {
    section#home-banner.gh-hero .gh-domain-captcha-inner {
        flex-direction: column;
        border-radius: var(--gh-radius);
        padding: 14px 20px;
        width: 100%;
    }
}

/* TLD price strip: separate row of LTR chips under the captcha */
section#home-banner.gh-hero .gh-tld-strip {
    margin-top: 26px;
    gap: 10px 12px;
}
.gh-tld-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.gh-tld-item bdi {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Hero CTA row: stock six's #home-banner .btn{border-radius:0;font-weight:300}
   outranks plain classes — reassert the design at matching specificity */
section#home-banner.gh-hero .gh-hero-ctas {
    margin-top: 30px;
}
section#home-banner.gh-hero .gh-hero-ctas .btn {
    border-radius: 999px;
    font-weight: 800;
    font-size: 15px;
    padding: 12px 34px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
section#home-banner.gh-hero .gh-hero-ctas .btn.gh-btn-primary {
    background-image: linear-gradient(120deg, var(--gh-blue-600), var(--gh-blue));
    color: #fff;
    box-shadow: 0 10px 26px rgba(9, 24, 34, 0.4);
}
section#home-banner.gh-hero .gh-hero-ctas .btn.gh-btn-primary:hover,
section#home-banner.gh-hero .gh-hero-ctas .btn.gh-btn-primary:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(9, 24, 34, 0.5);
}
section#home-banner.gh-hero .gh-hero-ctas .btn.gh-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
section#home-banner.gh-hero .gh-hero-ctas .btn.gh-btn-ghost:hover,
section#home-banner.gh-hero .gh-hero-ctas .btn.gh-btn-ghost:focus {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Trust points: compact icon chips on their own row */
section#home-banner.gh-hero .gh-hero-trust-row {
    margin-top: 28px;
    gap: 10px 14px;
}
section#home-banner.gh-hero .gh-hero-trust-row li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: #c6d9e5;
    font-size: 13px;
}
section#home-banner.gh-hero .gh-hero-trust-row i {
    margin: 0;
}

.gh-tld-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 22px;
    margin: 22px auto 0;
    padding: 0;
    font-size: 14px;
    color: #b7cedd;
}
.gh-tld-strip .gh-tld {
    font-weight: 700;
    color: #fff;
}
.gh-tld-strip .gh-tld-price {
    color: #7ee9b6;
    margin-inline-start: 5px;
    font-weight: 500;
}
.gh-tld-lead {
    color: #9fbdd0;
}

.gh-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}
.gh-hero-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 30px 0 0;
    padding: 0;
    font-size: 13.5px;
    color: #b7cedd;
}
.gh-hero-chips i {
    color: var(--gh-green);
    margin-inline-end: 5px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.gh-btn-primary,
.gh-btn-primary:visited {
    background-image: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 10px 24px rgba(23, 48, 65, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gh-btn-primary:hover,
.gh-btn-primary:focus,
.gh-btn-primary:active {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(23, 48, 65, 0.32);
}
.gh-btn-outline {
    background: transparent;
    color: var(--gh-blue-700);
    border: 2px solid var(--gh-blue-600);
    border-radius: 999px;
    padding: 10px 30px;
    font-weight: 700;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.gh-btn-outline:hover,
.gh-btn-outline:focus {
    background: var(--gh-blue-700);
    border-color: var(--gh-blue-700);
    color: #fff;
}
.gh-btn-ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    padding: 10px 30px;
    font-weight: 700;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.gh-btn-ghost:hover,
.gh-btn-ghost:focus {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.gh-btn-light {
    background: #fff;
    color: var(--gh-navy);
    border: 0;
    border-radius: 999px;
    padding: 12px 32px;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 10px 26px rgba(9, 24, 34, 0.35);
    transition: transform 0.2s ease;
}
.gh-btn-light:hover,
.gh-btn-light:focus {
    color: var(--gh-navy-900);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   6. Homepage shell + generic sections
   -------------------------------------------------------------------------- */

section#main-body.gh-home-main {
    padding: 0;
    background-color: var(--gh-bg);
}
.gh-home-main > .container,
.gh-home-main > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}
.gh-home-main .row {
    margin: 0;
}
.gh-home-main .main-content {
    padding: 0;
    margin: 0;
    min-height: 0;
    float: none;
    width: 100%;
}

.gh-section {
    padding: 84px 0;
}
.gh-section-head {
    max-width: 640px;
    margin: 0 auto 48px;
}
.gh-section-head h2 {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 800;
    margin: 0 0 12px;
}
.gh-section-head p {
    color: var(--gh-muted);
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */

.gh-trust {
    padding: 42px 0;
    background: var(--gh-bg);
    border-bottom: 1px solid var(--gh-border);
}
.gh-trust-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.gh-trust-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: var(--gh-radius-sm);
    transition: background-color 0.2s ease;
}
.gh-trust-grid li:hover {
    background: var(--gh-bg-tint);
}
.gh-trust-grid i {
    font-size: 24px;
    color: var(--gh-blue-600);
    margin-bottom: 6px;
}
.gh-trust-grid strong {
    color: var(--gh-ink);
    font-size: 14.5px;
    font-weight: 700;
}
.gh-trust-grid span {
    font-size: 12.5px;
    color: var(--gh-muted);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. Services cards
   -------------------------------------------------------------------------- */

.gh-services {
    background: var(--gh-bg-tint);
}
.gh-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.gh-service-card {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--gh-shadow-sm);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.gh-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--gh-shadow);
}
.gh-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gh-navy), var(--gh-blue-600));
    color: #fff;
    font-size: 22px;
    margin-bottom: 18px;
}
.gh-service-card h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 10px;
}
.gh-service-card p {
    color: var(--gh-text);
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 18px;
    flex: 1 1 auto;
}
.gh-service-link {
    font-weight: 700;
    font-size: 14px;
    color: var(--gh-blue-700);
    text-decoration: none;
}
.gh-service-link:hover,
.gh-service-link:focus {
    color: var(--gh-navy);
    text-decoration: none;
}
.gh-service-link i {
    font-size: 12px;
    margin-inline-start: 4px;
    transition: transform 0.2s ease;
}
.gh-service-link:hover i {
    transform: translateX(3px);
}
html[dir="rtl"] .gh-service-link:hover i {
    transform: translateX(-3px) scaleX(-1);
}

/* --------------------------------------------------------------------------
   9. Pricing
   -------------------------------------------------------------------------- */

.gh-pricing {
    background: var(--gh-bg);
}
.gh-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 auto 40px;
    padding: 6px;
    background: var(--gh-bg-deep);
    border-radius: 999px;
    width: fit-content;
}
.gh-tab {
    border: 0;
    background: transparent;
    padding: 10px 26px;
    border-radius: 999px;
    font-family: var(--gh-font);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--gh-navy);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.gh-tab:hover {
    color: var(--gh-blue-700);
}
.gh-tab.active {
    background: #fff;
    color: var(--gh-blue-700);
    box-shadow: var(--gh-shadow-sm);
}
.gh-hidden {
    display: none;
}
.gh-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
    align-items: stretch;
    max-width: 1140px;
    margin: 0 auto;
}
.gh-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    padding: 30px 26px 26px;
    box-shadow: var(--gh-shadow-sm);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.gh-plan:hover {
    transform: translateY(-5px);
    box-shadow: var(--gh-shadow);
}
.gh-plan-featured {
    border: 2px solid var(--gh-blue-600);
    box-shadow: var(--gh-shadow);
}
.gh-plan-badge {
    position: absolute;
    top: -14px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 999px;
    white-space: nowrap;
}
html[dir="rtl"] .gh-plan-badge {
    transform: translateX(50%);
}
.gh-plan-name {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 14px;
    text-align: center;
}
.gh-plan-price {
    text-align: center;
    margin-bottom: 4px;
}
.gh-plan-price .gh-price {
    font-size: 34px;
    font-weight: 800;
    color: var(--gh-navy);
}
.gh-plan-price .gh-cycle {
    font-size: 13px;
    color: var(--gh-muted);
}
.gh-plan-annual {
    text-align: center;
    font-size: 12.5px;
    color: var(--gh-muted);
    margin: 0 0 14px;
}
.gh-plan-features {
    list-style: none;
    margin: 14px 0 22px;
    padding: 14px 0 0;
    border-top: 1px dashed var(--gh-border);
    flex: 1 1 auto;
}
.gh-plan-features li {
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--gh-text);
    line-height: 1.6;
    unicode-bidi: plaintext;
    text-align: start;
}
.gh-plan-features i {
    color: var(--gh-green);
    margin-inline-end: 8px;
    font-size: 12px;
}
.gh-viewall {
    margin-top: 30px;
}
.gh-viewall a {
    font-weight: 700;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   10. Why us
   -------------------------------------------------------------------------- */

.gh-why {
    background: var(--gh-bg-tint);
}
.gh-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.gh-why-item {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    padding: 26px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.gh-why-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--gh-shadow-sm);
}
.gh-why-item i {
    font-size: 22px;
    color: var(--gh-blue-600);
    background: var(--gh-bg-tint);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 14px;
}
.gh-why-item h3 {
    font-size: 16.5px;
    font-weight: 800;
    margin: 0 0 8px;
}
.gh-why-item p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--gh-text);
    margin: 0;
}

/* --------------------------------------------------------------------------
   11. WordPress feature block
   -------------------------------------------------------------------------- */

.gh-wp {
    background:
        radial-gradient(700px 400px at 90% 0%, rgba(107, 161, 188, 0.28), transparent 60%),
        linear-gradient(150deg, var(--gh-navy-900), var(--gh-navy));
    color: #dbe9f2;
}
.gh-wp-inner {
    display: flex;
    align-items: center;
    gap: 56px;
}
.gh-wp-content {
    flex: 1 1 55%;
}
.gh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #9ed1ef;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 6px 16px;
    border-radius: 999px;
}
.gh-wp h2 {
    color: #fff;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    margin: 18px 0 12px;
}
.gh-wp p {
    color: #bdd4e2;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 22px;
}
.gh-wp-features {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.gh-wp-features li {
    padding: 6px 0;
    font-size: 14.5px;
}
.gh-wp-features i {
    color: var(--gh-green);
    margin-inline-end: 9px;
}
.gh-wp-visual {
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
}
.gh-wp-card {
    width: 100%;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    padding: 34px 30px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--gh-shadow-lg);
}
.gh-wp-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: #fff;
    color: #21759b;
    font-size: 42px;
}
.gh-wp-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
}
.gh-wp-bars span {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}
.gh-wp-bars span:nth-child(1) { width: 90%; }
.gh-wp-bars span:nth-child(2) { width: 70%; }
.gh-wp-bars span:nth-child(3) { width: 50%; }
.gh-wp-meter {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gh-green);
    font-size: 18px;
}
.gh-wp-meter-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.gh-wp-meter-fill {
    width: 86%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gh-green), #7ee9b6);
}

/* --------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------- */

.gh-steps {
    background: var(--gh-bg);
}
.gh-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 980px;
    margin: 0 auto;
}
.gh-step {
    position: relative;
    text-align: center;
    background: var(--gh-bg-tint);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    padding: 38px 26px 30px;
}
.gh-step-num {
    position: absolute;
    top: -18px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    color: #fff;
    font-weight: 800;
    box-shadow: var(--gh-shadow-sm);
}
html[dir="rtl"] .gh-step-num {
    transform: translateX(50%);
}
.gh-step i {
    font-size: 26px;
    color: var(--gh-blue-600);
    margin-bottom: 14px;
}
.gh-step h3 {
    font-size: 16.5px;
    font-weight: 800;
    margin: 0 0 8px;
}
.gh-step p {
    font-size: 14px;
    color: var(--gh-text);
    line-height: 1.7;
    margin: 0;
}

/* --------------------------------------------------------------------------
   13. News / announcements
   -------------------------------------------------------------------------- */

.gh-news {
    background: var(--gh-bg-tint);
    padding: 64px 0;
}
.gh-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 980px;
    margin: 0 auto;
}
.gh-news-card {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    padding: 24px 26px;
    box-shadow: var(--gh-shadow-sm);
}
.gh-news-card h3 {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 12px;
}
.gh-news-card h3 .label {
    font-size: 11px;
    vertical-align: middle;
    margin-inline-end: 8px;
    background: var(--gh-bg-deep);
    color: var(--gh-navy);
}
.gh-news-card h3 a {
    color: var(--gh-ink);
    text-decoration: none;
    font-weight: 700;
}
.gh-news-card h3 a:hover {
    color: var(--gh-blue-700);
}
.gh-news-card blockquote {
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: var(--gh-text);
    line-height: 1.75;
}

/* --------------------------------------------------------------------------
   14. Final CTA
   -------------------------------------------------------------------------- */

.gh-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(800px 400px at 15% -20%, rgba(107, 161, 188, 0.35), transparent 60%),
        linear-gradient(140deg, var(--gh-navy) 0%, var(--gh-navy-900) 100%);
    color: #cfe1ec;
    text-align: center;
    padding: 84px 0;
}
.gh-cta-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.gh-cta h2 {
    color: #fff;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    margin: 0 0 12px;
}
.gh-cta p {
    font-size: 16px;
    margin: 0 0 32px;
    color: #b7cedd;
}
.gh-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    position: relative;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

section#footer.gh-footer {
    background: var(--gh-navy-900);
    border-top: 0;
    color: #a8bfcf;
    padding: 64px 0 28px;
    font-size: 14px;
    line-height: 1.8;
}
.gh-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
    gap: 36px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.gh-footer-logo {
    display: inline-block;
    margin-bottom: 16px;
}
.gh-footer-logo img {
    max-height: 40px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.gh-footer-logo-text {
    font-size: 1.5em;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
}
.gh-footer-about {
    font-size: 13.5px;
    line-height: 1.9;
    color: #8fa9bb;
    max-width: 300px;
}
.gh-footer-payments {
    margin-top: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #8fa9bb;
    font-size: 13px;
}
.gh-footer-payments i {
    font-size: 26px;
    color: #c6d9e5;
}
.gh-pay-badge {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #c6d9e5;
}
.gh-footer-col h4 {
    color: #fff;
    font-size: 14.5px;
    font-weight: 800;
    margin: 0 0 16px;
}
.gh-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gh-footer-col ul li {
    margin-bottom: 9px;
}
.gh-footer-col ul a {
    color: #a8bfcf;
    text-decoration: none;
    transition: color 0.15s ease;
}
.gh-footer-col ul a:hover,
.gh-footer-col ul a:focus {
    color: #fff;
}
.gh-footer-contact-title {
    margin-top: 22px !important;
}
.gh-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gh-footer-contact i {
    color: var(--gh-blue);
}
.gh-footer-bottom {
    position: relative;
    padding: 24px 56px 0; /* side padding keeps copyright clear of back-to-top */
    text-align: center;
    font-size: 13px;
    color: #7d97a9;
}
.gh-footer-bottom p {
    margin: 0;
}
.gh-footer .back-to-top {
    float: none;
    position: absolute;
    inset-inline-end: 0;
    top: 16px;
}
.gh-footer .back-to-top i {
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.08);
    color: #c6d9e5;
    border-radius: 10px;
    opacity: 1;
    transition: background-color 0.2s ease;
}
.gh-footer .back-to-top:hover i {
    background-color: var(--gh-blue-600);
    color: #fff;
}

/* --------------------------------------------------------------------------
   16. RTL refinements (Bootstrap 3 ships LTR-only)
   -------------------------------------------------------------------------- */

html[dir="rtl"] body {
    text-align: right;
}
html[dir="rtl"] ul.top-nav {
    padding-right: 0;
}
html[dir="rtl"] .gh-footer-col ul,
html[dir="rtl"] .gh-trust-grid,
html[dir="rtl"] .gh-plan-features,
html[dir="rtl"] .gh-wp-features,
html[dir="rtl"] .gh-hero-chips,
html[dir="rtl"] .gh-tld-strip {
    padding-right: 0;
}
html[dir="rtl"] .navbar-main .navbar-nav > li > a {
    text-align: right;
}
html[dir="rtl"] .gh-news-card h3 .label {
    margin-left: 8px;
    margin-right: 0;
}
/* Keep prices/domains readable inside RTL text */
.gh-price,
.gh-tld,
.gh-tld-price {
    unicode-bidi: plaintext;
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .gh-trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .gh-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .gh-section {
        padding: 64px 0;
    }
    .gh-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gh-wp-inner {
        flex-direction: column;
        gap: 40px;
    }
    .gh-wp-content,
    .gh-wp-visual {
        flex: 1 1 100%;
        width: 100%;
    }
    .gh-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    section#home-banner.gh-hero {
        padding: 56px 0 52px;
    }
    .gh-cloud {
        display: none;
    }
    .gh-domain-box {
        flex-direction: column;
        border-radius: 22px;
        padding: 10px;
        gap: 8px;
    }
    .gh-domain-box .form-control {
        text-align: center;
        height: 44px;
    }
    .gh-domain-actions {
        flex-direction: column;
        width: 100%;
    }
    .gh-domain-actions .btn {
        width: 100%;
    }
    .gh-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .gh-services-grid,
    .gh-why-grid,
    .gh-steps-grid,
    .gh-news-grid {
        grid-template-columns: 1fr;
    }
    .gh-steps-grid {
        gap: 34px;
    }
    .gh-section {
        padding: 52px 0;
    }
    .gh-section-head {
        margin-bottom: 34px;
    }
    .gh-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .gh-footer-bottom {
        padding-bottom: 8px;
    }
    .gh-header-row {
        min-height: 62px;
        gap: 10px;
    }
    section#header .logo img {
        max-height: 36px;
    }
    .gh-nav-cta {
        display: none;
    }
    .gh-topbar-links {
        gap: 10px;
    }
}

@media (max-width: 479px) {
    .gh-trust-grid {
        grid-template-columns: 1fr 1fr;
    }
    .gh-tabs {
        width: 100%;
        border-radius: 18px;
    }
    .gh-tab {
        flex: 1 1 auto;
        padding: 10px 12px;
    }
}

/* --------------------------------------------------------------------------
   16b. RTL fixes from the 2026-07-05 translation audit
   (client area, cart order forms, tables, widgets — all gated on dir=rtl)
   -------------------------------------------------------------------------- */

/* Flip directional FontAwesome arrows/chevrons site-wide in RTL */
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-circle-right,
html[dir="rtl"] .fa-arrow-circle-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angle-double-right,
html[dir="rtl"] .fa-angle-double-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left {
    transform: scaleX(-1);
    display: inline-block;
}

/* Table headers follow the RTL text direction (Bootstrap hardcodes left) */
html[dir="rtl"] th {
    text-align: right;
}

/* Dropdown menus outside the navbar (category chooser, action menus) */
html[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

/* Panel chrome: minimise chevron and view-more mirror to the opposite corner */
html[dir="rtl"] .panel-minimise.pull-right,
html[dir="rtl"] .btn-view-more.pull-right {
    float: left !important;
}

/* Horizontal form labels mirror toward the field */
html[dir="rtl"] .form-horizontal .control-label {
    text-align: left;
}

/* legacy_modern store listing: price block and order button mirror */
html[dir="rtl"] #order-modern .product .pricing {
    float: left;
    text-align: left;
}
html[dir="rtl"] #order-modern .product .text-right {
    text-align: left;
}

/* standard_cart (config, domain register, view cart, checkout): mirror the
   float/text helpers inside the order form container only */
html[dir="rtl"] #order-standard_cart .pull-left {
    float: right !important;
}
html[dir="rtl"] #order-standard_cart .pull-right {
    float: left !important;
}
html[dir="rtl"] #order-standard_cart .text-right {
    text-align: left !important;
}
html[dir="rtl"] #order-standard_cart .text-left {
    text-align: right !important;
}
html[dir="rtl"] #order-standard_cart .text-center {
    text-align: center !important;
}
html[dir="rtl"] #order-standard_cart .order-summary .total-due-today span,
html[dir="rtl"] #order-standard_cart .order-summary .recurring-charges {
    text-align: left;
}
/* Isolate English tax labels / amounts so bidi doesn't reorder "VAT @ 14%" */
html[dir="rtl"] #order-standard_cart .order-summary span {
    unicode-bidi: plaintext;
}

/* Bootstrap input-group corner radii swap in RTL (search/domain boxes) */
html[dir="rtl"] .input-group .form-control:first-child {
    border-radius: 0 4px 4px 0;
}
html[dir="rtl"] .input-group .form-control:last-child {
    border-radius: 4px 0 0 4px;
}
html[dir="rtl"] .input-group-btn:last-child > .btn,
html[dir="rtl"] .input-group-btn:last-child > .btn-group > .btn {
    border-radius: 4px 0 0 4px;
}
html[dir="rtl"] .input-group-btn:first-child > .btn,
html[dir="rtl"] .input-group-btn:first-child > .btn-group > .btn {
    border-radius: 0 4px 4px 0;
}

/* Phone widget: keep intl-tel-input as a consistent LTR island in RTL */
html[dir="rtl"] .intl-tel-input {
    direction: ltr;
}
html[dir="rtl"] .intl-tel-input input[type="tel"] {
    direction: ltr;
    text-align: left;
}

/* Captcha codes are Latin characters everywhere */
#inputCaptcha {
    direction: ltr;
}
html[dir="rtl"] #inputCaptcha.pull-left {
    float: right;
}

/* dataTables info bar follows reading direction */
html[dir="rtl"] .dataTables_info {
    text-align: right !important;
}

/* --------------------------------------------------------------------------
   18. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gh-cloud {
        animation: none;
    }
    .gh-service-card,
    .gh-plan,
    .gh-why-item,
    .gh-nav-cta,
    .gh-btn-primary,
    .gh-btn-light {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   19. Support ticket submission page (submitticket.php step 2)
   Scoped under .gh-ticket-page / body.gh-ticket-body only.
   -------------------------------------------------------------------------- */

body.gh-ticket-body #main-body {
    background: var(--gh-bg-tint);
}
body.gh-ticket-body div.header-lined h1 {
    border-bottom: 0;
    margin-bottom: 2px;
    font-weight: 800;
    font-size: 26px;
}
body.gh-ticket-body div.header-lined {
    margin-bottom: 6px;
}
.gh-ticket-page {
    max-width: 960px;
    margin: 0 auto 30px;
}
.gh-ticket-subtitle {
    color: var(--gh-muted);
    font-size: 14.5px;
    margin: 0 0 18px;
}
.gh-ticket-card {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 34px 34px 28px;
}
@media (max-width: 767px) {
    .gh-ticket-card {
        padding: 22px 18px 20px;
    }
}

/* Field grid: 2 columns on desktop, 1 on mobile */
.gh-ticket-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px;
}
.gh-field {
    min-width: 0;
}
.gh-field-full {
    grid-column: 1 / -1;
}
@media (max-width: 640px) {
    .gh-ticket-grid {
        grid-template-columns: 1fr;
    }
    .gh-field-full {
        grid-column: auto;
    }
}

/* Consistent field skin */
.gh-ticket-card label {
    font-weight: 700;
    color: var(--gh-ink);
    font-size: 13.5px;
    margin-bottom: 6px;
}
.gh-ticket-card .form-control {
    height: 46px;
    border-radius: var(--gh-radius-sm);
    border: 1px solid var(--gh-border);
    box-shadow: none;
    color: var(--gh-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gh-ticket-card textarea.form-control {
    height: auto;
}
.gh-ticket-card .form-control:focus {
    border-color: var(--gh-blue-600);
    box-shadow: 0 0 0 3px rgba(75, 137, 171, 0.18);
    outline: none;
}
.gh-ticket-card .form-control[disabled] {
    background: var(--gh-bg-tint);
    color: var(--gh-muted);
}
.gh-ticket-card select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2346586a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-inline-end: 36px;
}
html[dir="rtl"] .gh-ticket-card select.form-control {
    background-position: left 14px center;
}
.gh-ticket-card .help-block {
    color: var(--gh-muted);
    font-size: 12.5px;
}

/* Markdown editor theming (WHMCS bootstrap-markdown) */
.gh-ticket-page .md-editor {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    box-shadow: none;
    overflow: hidden;
}
.gh-ticket-page .md-editor.active {
    border-color: var(--gh-blue-600);
    box-shadow: 0 0 0 3px rgba(75, 137, 171, 0.18);
}
.gh-ticket-page .md-editor .md-header {
    background: var(--gh-bg-tint);
    border-bottom: 1px solid var(--gh-border);
    padding: 6px 8px;
}
.gh-ticket-page .md-editor .md-header .btn {
    background: transparent;
    border: 0;
    color: var(--gh-navy);
    border-radius: 8px;
}
.gh-ticket-page .md-editor .md-header .btn:hover,
.gh-ticket-page .md-editor .md-header .btn:focus,
.gh-ticket-page .md-editor .md-header .btn.active {
    background: #fff;
    color: var(--gh-blue-700);
    box-shadow: var(--gh-shadow-sm);
}
.gh-ticket-page .md-editor .md-input,
.gh-ticket-page .md-editor textarea.md-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 14px;
}
.gh-ticket-page .md-editor .md-input:focus {
    box-shadow: none;
}
.gh-ticket-page .md-footer {
    background: var(--gh-bg-tint);
    border-top: 1px solid var(--gh-border);
    color: var(--gh-muted);
    padding: 5px 12px;
}
/* Editor content direction follows the page language */
html[dir="rtl"] .gh-ticket-page .md-editor .md-input,
html[dir="rtl"] .gh-ticket-page .md-editor .md-preview {
    direction: rtl;
    text-align: right;
}
html[dir="ltr"] .gh-ticket-page .md-editor .md-input,
html[dir="ltr"] .gh-ticket-page .md-editor .md-preview {
    direction: ltr;
    text-align: left;
}
.gh-ticket-page .md-editor .md-preview {
    padding: 12px 14px;
    min-height: 240px;
}

/* Branded attachment control (real inputs stay functional, visually hidden) */
.gh-ticket-attach-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.gh-attach-fields {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#fileUploadsContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gh-file-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gh-bg-tint);
    border: 1px dashed var(--gh-border);
    border-radius: var(--gh-radius-sm);
    padding: 7px 8px;
    position: relative;
}
.gh-file-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.gh-file-field:focus-within {
    border-color: var(--gh-blue-600);
    box-shadow: 0 0 0 3px rgba(75, 137, 171, 0.18);
}
.gh-file-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--gh-blue-600);
    color: var(--gh-blue-700);
    font-weight: 700;
    font-size: 13px;
    border-radius: 999px;
    padding: 7px 18px;
    cursor: pointer;
    margin: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.gh-file-btn:hover {
    background: var(--gh-blue-700);
    color: #fff;
}
.gh-file-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--gh-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* filenames are Latin-heavy; isolate them inside RTL text */
    unicode-bidi: plaintext;
    text-align: start;
}
.gh-file-name.gh-file-selected {
    color: var(--gh-ink);
    font-weight: 500;
}
.gh-attach-more {
    flex-shrink: 0;
    padding: 9px 22px;
    font-size: 13.5px;
}
.gh-ticket-attachments .ticket-attachments-message {
    margin-top: 10px;
    font-size: 12.5px;
}

/* Captcha block */
.gh-ticket-captcha {
    margin-top: 22px;
}
.gh-ticket-captcha > div {
    background: var(--gh-bg-tint);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    padding: 16px 14px;
    margin: 0;
}
.gh-ticket-captcha .captchaimage img {
    border-radius: 8px;
}
/* Captcha code is Latin characters — keep the input LTR in Arabic too */
.gh-ticket-page #inputCaptcha {
    direction: ltr;
    text-align: center;
}

/* Actions: primary at the logical start (right side in RTL, left in LTR) */
.gh-ticket-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin: 26px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--gh-border);
}
.gh-ticket-actions .gh-btn-primary {
    padding: 12px 38px;
}
.gh-ticket-actions .gh-btn-outline {
    padding: 10px 30px;
}

/* Vendor credit: keep visible (licensing), style discreetly */
body.gh-ticket-body .gh-vendor-credit {
    margin: 18px 0 0;
    font-size: 11.5px;
    color: var(--gh-muted);
    opacity: 0.75;
}
body.gh-ticket-body .gh-vendor-credit a {
    color: inherit;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   20. Phase 1 — Auth pages (login / register / password reset)
   Login + pwreset wrap in .logincontainer; register in #registration.
   Scoped so only these pages are affected; RTL-aware.
   -------------------------------------------------------------------------- */

/* Login + password reset card */
.logincontainer {
    max-width: 470px;
    margin: 30px auto;
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 34px 32px;
}
.logincontainer.with-social {
    max-width: 820px;
}
.logincontainer .header-lined h1,
.logincontainer div.header-lined h1 {
    border-bottom: 0;
    font-weight: 800;
    color: var(--gh-ink);
    margin-bottom: 4px;
}
.logincontainer div.header-lined small {
    color: var(--gh-muted);
}
.logincontainer .form-group {
    margin-bottom: 16px;
}
.logincontainer label {
    font-weight: 700;
    color: var(--gh-ink);
    font-size: 13.5px;
    margin-bottom: 6px;
}
.logincontainer .form-control {
    height: 46px;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    box-shadow: none;
    color: var(--gh-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.logincontainer .form-control:focus {
    border-color: var(--gh-blue-600);
    box-shadow: 0 0 0 3px rgba(75, 137, 171, 0.16);
    outline: none;
}
.logincontainer .btn-primary {
    background-image: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    background-color: var(--gh-blue-700);
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    padding: 11px 30px;
    box-shadow: 0 8px 20px rgba(23, 48, 65, 0.20);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.logincontainer .btn-primary:hover,
.logincontainer .btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(23, 48, 65, 0.28);
    color: #fff;
}
.logincontainer .btn-default {
    border-radius: 999px;
    border: 1px solid var(--gh-border);
    background: #fff;
    color: var(--gh-navy);
    font-weight: 600;
    padding: 10px 24px;
}
.logincontainer .btn-default:hover,
.logincontainer .btn-default:focus {
    background: var(--gh-bg-tint);
    border-color: var(--gh-blue-600);
    color: var(--gh-blue-700);
}

/* Register form card */
#registration {
    max-width: 860px;
    margin: 20px auto;
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 32px 30px;
}
#registration .sub-heading {
    border-top: 0;
    text-align: start;
    margin: 22px 0 16px;
}
#registration .sub-heading span {
    background: transparent;
    padding: 0 0 0 12px;
    color: var(--gh-ink);
    font-weight: 800;
    font-size: 16px;
    border-inline-start: 4px solid var(--gh-blue-600);
}
#registration .form-group {
    margin-bottom: 16px;
}
#registration .field,
#registration .form-control {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    box-shadow: none;
    color: var(--gh-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#registration .field:focus,
#registration .form-control:focus {
    border-color: var(--gh-blue-600);
    box-shadow: 0 0 0 3px rgba(75, 137, 171, 0.16);
    outline: none;
}
#registration .field-icon i {
    color: var(--gh-blue-600);
}
#registration .btn-primary {
    background-image: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    background-color: var(--gh-blue-700);
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    padding: 13px 44px;
    box-shadow: 0 10px 24px rgba(23, 48, 65, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#registration .btn-primary:hover,
#registration .btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(23, 48, 65, 0.3);
    color: #fff;
}
#registration .generate-password {
    border-radius: 999px;
}
/* Terms panel → neutral card (not alarming red) */
#registration .tospanel.panel-danger {
    border-color: var(--gh-border);
    border-radius: var(--gh-radius-sm);
    box-shadow: none;
}
#registration .tospanel.panel-danger > .panel-heading {
    background: var(--gh-bg-tint);
    color: var(--gh-ink);
    border-color: var(--gh-border);
}
#registration .tospanel .tosicon {
    color: var(--gh-blue-600);
}
/* Password strength meter */
#registration .password-strength-meter .progress {
    border-radius: 999px;
    height: 8px;
}

/* Icon-prefixed fields — flip icon side + padding in RTL (login & register) */
html[dir="rtl"] .logincontainer .prepend-icon .field,
html[dir="rtl"] #registration .prepend-icon .field {
    padding-left: 12px;
    padding-right: 36px;
}
html[dir="rtl"] .logincontainer .prepend-icon .field-icon,
html[dir="rtl"] #registration .prepend-icon .field-icon {
    left: auto;
    right: 0;
}

/* Auth responsive */
@media (max-width: 767px) {
    .logincontainer,
    #registration {
        padding: 24px 18px;
        margin: 16px auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .logincontainer .btn-primary,
    #registration .btn-primary {
        transition: none;
    }
}

/* ==========================================================================
   21. Phase 2 — Client area (dashboard, services, domains, invoices, details)
   Scoped under body.gh-clientarea (set in header.tpl by templatefile) so
   nothing bleeds to homepage / cart / auth. Invoice view is standalone and
   scoped separately under .invoice-container (section 25).
   ========================================================================== */

body.gh-clientarea #main-body {
    background: var(--gh-bg-tint);
}
body.gh-clientarea .main-content {
    margin-bottom: 40px;
}
body.gh-clientarea div.header-lined h1 {
    border-bottom: 0;
    font-weight: 800;
    color: var(--gh-ink);
}
body.gh-clientarea div.header-lined h1 small {
    color: var(--gh-muted);
}
/* Alerts — softer, rounded */
body.gh-clientarea .alert {
    border-radius: var(--gh-radius-sm);
    border-width: 1px;
}

/* Generic buttons inside the client area, brand-aligned */
body.gh-clientarea .btn-primary {
    background-image: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    background-color: var(--gh-blue-700);
    border: 0;
}
body.gh-clientarea .btn-primary:hover,
body.gh-clientarea .btn-primary:focus {
    background-color: var(--gh-navy);
}
body.gh-clientarea .btn-info {
    background-color: var(--gh-blue-600);
    border-color: var(--gh-blue-600);
}
body.gh-clientarea .btn-info:hover,
body.gh-clientarea .btn-info:focus {
    background-color: var(--gh-blue-700);
    border-color: var(--gh-blue-700);
}

/* RTL: flip pull-right + right-aligned form labels within client area */
html[dir="rtl"] body.gh-clientarea .pull-right {
    float: left !important;
}
html[dir="rtl"] body.gh-clientarea .form-horizontal .control-label {
    text-align: left;
}
html[dir="rtl"] body.gh-clientarea .dropdown-menu-right {
    right: auto;
    left: 0;
}

/* --------------------------------------------------------------------------
   22. Dashboard (clientareahome): tiles, KB search, panels
   -------------------------------------------------------------------------- */
.gh-clientarea .tiles {
    margin-bottom: 8px;
}
.gh-clientarea .tiles .tile {
    padding: 8px;
}
.gh-clientarea .tiles .tile > a {
    display: block;
    position: relative;
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 22px 18px 18px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gh-clientarea .tiles .tile > a:hover {
    transform: translateY(-4px);
    box-shadow: var(--gh-shadow);
}
.gh-clientarea .tiles .tile .icon {
    font-size: 26px;
    color: var(--gh-blue-600);
    margin-bottom: 8px;
}
.gh-clientarea .tiles .tile .stat {
    font-size: 34px;
    font-weight: 800;
    color: var(--gh-ink);
    line-height: 1.1;
}
.gh-clientarea .tiles .tile .title {
    color: var(--gh-muted);
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 2px;
}
.gh-clientarea .tiles .tile .highlight {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
}
.gh-clientarea .tiles .tile .highlight.bg-color-blue { background: var(--gh-blue-600); }
.gh-clientarea .tiles .tile .highlight.bg-color-green { background: var(--gh-green); }
.gh-clientarea .tiles .tile .highlight.bg-color-red { background: #e0575b; }
.gh-clientarea .tiles .tile .highlight.bg-color-gold { background: #eab53d; }

.gh-clientarea .home-kb-search {
    position: relative;
    margin: 18px 0 24px;
}
.gh-clientarea .home-kb-search .form-control {
    height: 52px;
    border-radius: 999px;
    border: 1px solid var(--gh-border);
    box-shadow: var(--gh-shadow-sm);
    padding-inline-start: 46px;
}
.gh-clientarea .home-kb-search .fa-search {
    position: absolute;
    top: 18px;
    inset-inline-start: 18px;
    color: var(--gh-muted);
}

.gh-clientarea .client-home-panels .panel {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    overflow: hidden;
}
.gh-clientarea .client-home-panels .panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--gh-border);
    padding: 16px 18px;
}
.gh-clientarea .client-home-panels .panel-title {
    font-weight: 800;
    color: var(--gh-ink);
    font-size: 15px;
}
.gh-clientarea .client-home-panels .panel-accent-blue { border-top: 3px solid var(--gh-blue-600); }
.gh-clientarea .client-home-panels .panel-accent-green { border-top: 3px solid var(--gh-green); }
.gh-clientarea .client-home-panels .panel-accent-red { border-top: 3px solid #e0575b; }
.gh-clientarea .client-home-panels .panel-accent-gold { border-top: 3px solid #eab53d; }
.gh-clientarea .client-home-panels .list-group-item {
    border-color: var(--gh-border);
}
.gh-clientarea .client-home-panels .list-group-item:hover {
    background: var(--gh-bg-tint);
}

/* --------------------------------------------------------------------------
   22b. Dashboard enhancements — welcome hero, widgets, domain form, sidebar.
   Dashboard-only rules use :has(.client-home-panels) so they don't affect
   other client-area pages that share .header-lined. The .panel-sidebar rules
   apply to the shared account sidebar site-wide (consistent, intentional).
   -------------------------------------------------------------------------- */
/* Welcome header as a clean hero strip (dashboard only) */
body.gh-clientarea:has(.client-home-panels) div.header-lined {
    background: linear-gradient(115deg, #ffffff 42%, var(--gh-bg-tint));
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 18px 24px;
    margin-bottom: 20px;
}
body.gh-clientarea:has(.client-home-panels) div.header-lined h1 {
    margin: 0;
    font-size: 26px;
    unicode-bidi: plaintext;   /* client name direction-safe */
}
body.gh-clientarea:has(.client-home-panels) div.header-lined .breadcrumb {
    background: transparent;
    padding: 6px 0 0;
    margin: 0;
    font-size: 12.5px;
}
/* Stat cards — larger icon medallion + hover accent */
.gh-clientarea .tiles .tile > a { padding: 24px 18px 20px; }
.gh-clientarea .tiles .tile .icon {
    font-size: 28px;
    width: 58px;
    height: 58px;
    line-height: 58px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--gh-bg-tint);
    color: var(--gh-blue-600);
}
.gh-clientarea .tiles .tile > a:hover { border-color: var(--gh-blue); }
.gh-clientarea .tiles .tile .highlight { height: 5px; }
/* Widget panels — polish + header action buttons + rows */
.gh-clientarea .client-home-panels .panel { background: #fff; margin-bottom: 24px; }
.gh-clientarea .client-home-panels .panel-heading .btn {
    border-radius: 999px;
    font-weight: 700;
    padding: 4px 13px;
}
.gh-clientarea .client-home-panels .list-group-item {
    padding: 12px 16px;
    unicode-bidi: plaintext;   /* announcement titles / service names direction-safe */
}
.gh-clientarea .client-home-panels .list-group-item small,
.gh-clientarea .client-home-panels .list-group-item .text-muted { color: var(--gh-muted); }
.gh-clientarea .client-home-panels .panel-body a { color: var(--gh-blue-700); font-weight: 700; }
.gh-clientarea .client-home-panels .panel-footer { background: #fff; border-top: 1px solid var(--gh-border); }
.gh-clientarea .client-home-panels .btn-view-more { font-weight: 700; }
/* Domain mini-form (Domain Search widget) */
.gh-clientarea .client-home-panels form[action="domainchecker.php"] .form-control {
    border-radius: var(--gh-radius-sm);
    height: 44px;
    unicode-bidi: plaintext;
    direction: ltr;
    text-align: start;
}
.gh-clientarea .client-home-panels form[action="domainchecker.php"] .btn {
    border-radius: 999px;
    font-weight: 700;
    margin-top: 8px;
}
/* Account sidebar cards (Your Info / Statuses / Shortcuts) — shared site-wide */
.gh-clientarea .panel-sidebar {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}
.gh-clientarea .panel-sidebar > .panel-heading {
    background: var(--gh-bg-tint);
    border-bottom: 1px solid var(--gh-border);
    padding: 13px 16px;
}
.gh-clientarea .panel-sidebar .panel-title { font-weight: 800; color: var(--gh-ink); font-size: 14.5px; }
.gh-clientarea .panel-sidebar .panel-minimise { color: var(--gh-muted); cursor: pointer; }
.gh-clientarea .panel-sidebar .list-group-item {
    border-color: var(--gh-border);
    color: var(--gh-navy);
    font-weight: 600;
    padding: 11px 16px;
}
.gh-clientarea .panel-sidebar .list-group-item:hover { background: var(--gh-bg-tint); color: var(--gh-blue-700); }
.gh-clientarea .panel-sidebar .list-group-item.active {
    background: var(--gh-blue-700);
    border-color: var(--gh-blue-700);
    color: #fff;
}
.gh-clientarea .panel-sidebar .sidebar-menu-item-icon {
    color: var(--gh-blue-600);
    width: 18px;
    text-align: center;
    margin-inline-end: 7px;
}
.gh-clientarea .panel-sidebar .list-group-item.active .sidebar-menu-item-icon { color: #fff; }
.gh-clientarea .panel-sidebar .panel-body { color: var(--gh-text); font-size: 13.5px; unicode-bidi: plaintext; }
.gh-clientarea .panel-sidebar .panel-footer { background: #fff; border-top: 1px solid var(--gh-border); }
.gh-clientarea .panel-sidebar .panel-footer .btn { border-radius: 999px; font-weight: 700; }
/* Email-verification banner (WHMCS renders it as an alert with a resend button) */
.gh-clientarea .alert.alert-warning { border-inline-start: 4px solid #eab53d; }
.gh-clientarea .alert .btn { border-radius: 999px; font-weight: 700; }
/* Dashboard responsive */
@media (max-width: 767px) {
    body.gh-clientarea:has(.client-home-panels) div.header-lined { padding: 14px 16px; }
    body.gh-clientarea:has(.client-home-panels) div.header-lined h1 { font-size: 22px; }
    .gh-clientarea .client-home-panels form[action="domainchecker.php"] .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   23. List tables (services / domains / invoices) + status badges
   -------------------------------------------------------------------------- */
.gh-clientarea .table-container {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 8px 12px 4px;
}
.gh-clientarea .table-list {
    margin-bottom: 0;
}
.gh-clientarea .table-list > thead > tr > th {
    border-bottom: 2px solid var(--gh-border);
    color: var(--gh-muted);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 10px;
}
.gh-clientarea .table-list > tbody > tr {
    transition: background-color 0.12s ease;
    cursor: pointer;
}
.gh-clientarea .table-list > tbody > tr:hover {
    background: var(--gh-bg-tint);
}
.gh-clientarea .table-list > tbody > tr > td {
    padding: 14px 10px;
    vertical-align: middle;
    border-top: 1px solid var(--gh-border);
}
/* Domain names / links stay LTR inside RTL tables */
.gh-clientarea .table-list a[href^="http"] {
    unicode-bidi: plaintext;
}

/* Status badges — filled pills with distinct semantic colors.
   Base: .label.status.status-{slug}. Covers services + domains + invoices. */
.gh-clientarea .label.status,
.gh-clientarea span.label.status {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    text-shadow: none;
}
.gh-clientarea .status-active,
.gh-clientarea .status-paid,
.gh-clientarea .status-completed,
.gh-clientarea .status-open,
.gh-clientarea .status-accepted { background: var(--gh-green); color: #04331e; }
.gh-clientarea .status-pending,
.gh-clientarea .status-pendingtransfer,
.gh-clientarea .status-pendingregistration,
.gh-clientarea .status-collections,
.gh-clientarea .status-draft { background: #f0ad4e; color: #4a2f00; }
.gh-clientarea .status-unpaid,
.gh-clientarea .status-overdue,
.gh-clientarea .status-expired { background: #e0575b; }
.gh-clientarea .status-suspended { background: #e8823a; }
.gh-clientarea .status-terminated,
.gh-clientarea .status-cancelled,
.gh-clientarea .status-closed,
.gh-clientarea .status-inactive,
.gh-clientarea .status-transferredaway { background: #8a99a6; }
.gh-clientarea .status-refunded { background: var(--gh-blue-600); }
.gh-clientarea .status-fraud { background: #2b2f36; }

/* Auto-renew icons */
.gh-clientarea .table-list .text-success { color: var(--gh-green) !important; }
.gh-clientarea .table-list .text-danger { color: #e0575b !important; }

/* DataTables chrome */
.gh-clientarea .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--gh-border);
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: none;
}
.gh-clientarea .dataTables_wrapper .dataTables_length select {
    border-radius: var(--gh-radius-sm);
    border: 1px solid var(--gh-border);
}
.gh-clientarea .dataTables_wrapper .dataTables_info {
    color: var(--gh-muted);
    font-size: 13px;
}
.gh-clientarea .dataTables_wrapper .pagination > li > a {
    color: var(--gh-blue-700);
    border-color: var(--gh-border);
}
.gh-clientarea .dataTables_wrapper .pagination > .active > a,
.gh-clientarea .dataTables_wrapper .pagination > .active > a:hover {
    background: var(--gh-blue-700);
    border-color: var(--gh-blue-700);
}
html[dir="rtl"] .gh-clientarea .dataTables_filter,
html[dir="rtl"] .gh-clientarea .dataTables_info {
    text-align: right;
}
/* Status filter chips (view-filter-btns, from sidebar) */
.gh-clientarea .view-filter-btns .list-group-item.active {
    background: var(--gh-blue-700);
    border-color: var(--gh-blue-700);
}

/* Domains list action group inline width override for RTL/dropdown */
.gh-clientarea .table-list .btn-group .dropdown-menu-right {
    min-width: 190px;
}

/* --------------------------------------------------------------------------
   24. Service details + Domain details (tabs, cards, forms)
   -------------------------------------------------------------------------- */
.gh-clientarea .tab-content {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 24px;
}
.gh-clientarea .tab-content.margin-bottom { margin-bottom: 30px; }

/* Inner overflow tabs */
.gh-clientarea .nav-tabs {
    border-bottom: 1px solid var(--gh-border);
}
.gh-clientarea .nav-tabs > li > a {
    color: var(--gh-muted);
    font-weight: 700;
    border: 0;
    border-radius: 0;
}
.gh-clientarea .nav-tabs > li.active > a,
.gh-clientarea .nav-tabs > li.active > a:hover,
.gh-clientarea .nav-tabs > li.active > a:focus {
    color: var(--gh-blue-700);
    border: 0;
    border-bottom: 2px solid var(--gh-blue-600);
    background: transparent;
}
.gh-clientarea .nav-tabs > li > a:hover {
    border: 0;
    border-bottom: 2px solid var(--gh-border);
    background: var(--gh-bg-tint);
}

/* Service overview status card (product-status-*) */
.gh-clientarea .product-status {
    border-radius: var(--gh-radius);
    padding: 24px 18px;
    color: #fff;
    box-shadow: var(--gh-shadow-sm);
}
.gh-clientarea .product-status .product-icon { font-size: 30px; margin-bottom: 8px; }
.gh-clientarea .product-status h3 { color: #fff; font-weight: 800; margin: 6px 0 2px; }
.gh-clientarea .product-status h4 { color: rgba(255,255,255,0.85); margin: 0 0 10px; }
.gh-clientarea .product-status-text {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.gh-clientarea .product-status-active { background: linear-gradient(135deg, #0aa568, var(--gh-green)); }
.gh-clientarea .product-status-pending { background: linear-gradient(135deg, #d98c1a, #f0ad4e); }
.gh-clientarea .product-status-suspended { background: linear-gradient(135deg, #c85a2a, #e8823a); }
.gh-clientarea .product-status-terminated,
.gh-clientarea .product-status-cancelled { background: linear-gradient(135deg, #6b7883, #8a99a6); }
.gh-clientarea .product-status-fraud { background: linear-gradient(135deg, #1a1d22, #2b2f36); }

/* Detail action buttons (btn-block) */
.gh-clientarea .product-actions-wrapper .btn,
.gh-clientarea .product-details .btn-block {
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 8px;
}
.gh-clientarea .btn-success {
    background-color: var(--gh-green);
    border-color: var(--gh-green);
    color: #04331e;
}
.gh-clientarea .btn-success:hover,
.gh-clientarea .btn-success:focus {
    background-color: #0bb069;
    border-color: #0bb069;
    color: #04331e;
}

/* Label/value info rows (details): flip alignment in RTL */
html[dir="rtl"] .gh-clientarea .product-details .col-sm-5.text-right,
html[dir="rtl"] .gh-clientarea .tab-content .col-sm-5.text-right { text-align: left; }
html[dir="rtl"] .gh-clientarea .product-details .col-sm-7.text-left,
html[dir="rtl"] .gh-clientarea .tab-content .col-sm-7.text-left { text-align: right; }

/* Domain/service detail: keep hostnames, IPs, nameservers LTR */
.gh-clientarea #domain a[href^="http"],
.gh-clientarea #tabOverview a[href^="http"],
.gh-clientarea input[name^="ns"],
.gh-clientarea input[name^="dnsrecord"],
.gh-clientarea input[name="ipaddress"],
.gh-clientarea input[name="newipaddress"],
.gh-clientarea input[name="currentipaddress"] {
    unicode-bidi: plaintext;
    direction: ltr;
    text-align: start;
}

/* Domain details status labels (bootstrap label-success/danger) */
.gh-clientarea .tab-pane .label-success {
    background: var(--gh-green);
    color: #04331e;
    border-radius: 999px;
    padding: 5px 14px;
}
.gh-clientarea .tab-pane .label-danger {
    background: #e0575b;
    border-radius: 999px;
    padding: 5px 14px;
}
/* Registrar module buttons re-classed to .btn */
.gh-clientarea .moduleoutput .btn {
    border-radius: 999px;
    margin: 3px;
}
/* Domain addon cards + service addon cards */
.gh-clientarea .panel-accent-blue {
    border: 1px solid var(--gh-border);
    border-top: 3px solid var(--gh-blue-600);
    border-radius: var(--gh-radius-sm);
    box-shadow: var(--gh-shadow-sm);
}
/* DNS records table */
.gh-clientarea .table-striped {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    overflow: hidden;
}
.gh-clientarea .table-striped > thead > tr > th {
    background: var(--gh-bg-tint);
    color: var(--gh-ink);
    border-bottom: 1px solid var(--gh-border);
}
/* IRTP + system modals inherit brand primary */
.gh-clientarea .modal-content.panel-primary > .panel-heading {
    background: var(--gh-navy);
    border-color: var(--gh-navy);
}

/* --------------------------------------------------------------------------
   25. Invoice view (viewinvoice.tpl — STANDALONE page, scoped to .invoice-container)
   custom.css is now linked from viewinvoice.tpl; :root --gh-* vars apply.
   -------------------------------------------------------------------------- */
.invoice-container {
    border: 1px solid var(--gh-border) !important;
    border-radius: var(--gh-radius) !important;
    box-shadow: var(--gh-shadow) !important;
    font-family: 'Tajawal', 'Open Sans', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
    color: var(--gh-text);
}
.invoice-container h2,
.invoice-container h3 { color: var(--gh-ink); font-weight: 800; }
.invoice-container hr { border-top-color: var(--gh-border); }
/* Status word → filled pill */
.invoice-container .invoice-status span {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 999px;
    color: #fff;
    font-size: 18px;
}
.invoice-container .invoice-status .paid { background: var(--gh-green); color: #04331e; }
.invoice-container .invoice-status .unpaid { background: #e0575b; }
.invoice-container .invoice-status .refunded { background: var(--gh-blue-600); }
.invoice-container .invoice-status .cancelled,
.invoice-container .invoice-status .draft { background: #8a99a6; }
.invoice-container .invoice-status .collections { background: #eab53d; color: #4a2f00; }
/* Line item + totals table */
.invoice-container .table > thead > tr > td {
    background: var(--gh-navy);
    color: #fff;
    border: 0;
}
.invoice-container td.total-row {
    background: var(--gh-bg-tint) !important;
}
.invoice-container .btn-group .btn {
    border-radius: 999px;
    margin-inline-start: 6px;
}
.invoice-container .btn-success {
    background: var(--gh-green);
    border-color: var(--gh-green);
    color: #04331e;
}
/* Keep invoice numbers, prices, dates, domains direction-safe */
.invoice-container address,
.invoice-container .total-row,
.invoice-container [data-role="paymethod-info"] {
    unicode-bidi: plaintext;
}
/* RTL: mirror the two invoice columns */
html[dir="rtl"] .invoice-container .invoice-col.right {
    float: left;
    text-align: left;
}
@media (min-width: 500px) {
    html[dir="rtl"] .invoice-container .invoice-col { float: right; }
    html[dir="rtl"] .invoice-container .invoice-col.right { float: left; }
}
html[dir="rtl"] .invoice-container .total-row.text-right { text-align: left; }

/* --------------------------------------------------------------------------
   26. Client area responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gh-clientarea .tab-content { padding: 16px; }
    .gh-clientarea .tiles .tile .stat { font-size: 28px; }
    .gh-clientarea .table-container { padding: 4px 6px; }
    .invoice-container { padding: 30px 20px 50px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .gh-clientarea .tiles .tile > a { transition: none; }
}

/* ==========================================================================
   27. Phase 3 — Support & content (tickets, KB, announcements, contact)
   Support/content pages carry BOTH body.gh-clientarea (shared shell + tables
   + status badges + alerts, from Phase 2) AND body.gh-support (the specifics
   below). Scoped so nothing leaks to homepage/cart/order-forms.
   ========================================================================== */

/* --- 27a. Ticket status badges (extend the .label.status pill system) --- */
.gh-clientarea .status-open { background: var(--gh-green); color: #04331e; }
.gh-clientarea .status-answered { background: var(--gh-blue-600); }
.gh-clientarea .status-customer-reply,
.gh-clientarea .status-customerreply { background: #f0ad4e; color: #4a2f00; }
.gh-clientarea .status-closed { background: #8a99a6; }
.gh-clientarea .status-onhold,
.gh-clientarea .status-on-hold { background: #e8823a; }
.gh-clientarea .status-inprogress,
.gh-clientarea .status-in-progress { background: var(--gh-blue-700); }
/* Custom (admin-defined) statuses carry inline border-color/color — render as
   an outlined pill and respect those inline values. */
.gh-clientarea .label.status.status-custom {
    background: #fff;
    border: 1.5px solid;
    font-weight: 700;
}

/* --- 27b. Ticket list: number + subject + unread --- */
.gh-clientarea .table-list .ticket-number {
    display: inline-block;
    font-weight: 800;
    color: var(--gh-blue-700);
    margin-inline-end: 8px;
    unicode-bidi: plaintext;
}
.gh-clientarea .table-list .ticket-subject {
    color: var(--gh-text);
}
.gh-clientarea .table-list .ticket-subject.unread {
    font-weight: 800;
    color: var(--gh-ink);
}
.gh-clientarea .table-list a.border-left {
    border-inline-start: 0;
}

/* --- 27c. Ticket view: reply panel + conversation --- */
.gh-clientarea .panel-collapsable {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    overflow: hidden;
}
.gh-clientarea .panel-collapsable .panel-heading {
    background: var(--gh-navy);
    border-color: var(--gh-navy);
    cursor: pointer;
    padding: 14px 18px;
}
.gh-clientarea .panel-collapsable .panel-heading .panel-title,
.gh-clientarea .panel-collapsable .panel-heading .panel-title i,
.gh-clientarea .panel-collapsable .collapse-icon {
    color: #fff;
    font-weight: 700;
}
/* Reply form (markdown editor consistent with the submit-ticket form) */
.gh-clientarea #frmReply .form-control {
    border-radius: var(--gh-radius-sm);
    border: 1px solid var(--gh-border);
}
.gh-clientarea #frmReply .form-control:focus {
    border-color: var(--gh-blue);
    box-shadow: 0 0 0 3px rgba(107, 161, 188, 0.18);
}
.gh-clientarea #frmReply .md-editor {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    overflow: hidden;
}
.gh-clientarea #frmReply .md-editor.active {
    border-color: var(--gh-blue);
    box-shadow: 0 0 0 3px rgba(107, 161, 188, 0.18);
}
.gh-clientarea #frmReply .md-editor > .md-header {
    background: var(--gh-bg-tint);
    border-bottom: 1px solid var(--gh-border);
    padding: 6px;
}

/* Conversation bubbles */
.gh-clientarea .ticket-reply {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-inline-start: 4px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    box-shadow: var(--gh-shadow-sm);
    padding: 18px 20px;
    margin: 14px 0;
}
/* Staff replies visually distinct (brand blue accent + tint) */
.gh-clientarea .ticket-reply.staff {
    border-inline-start: 4px solid var(--gh-blue-600);
    background: var(--gh-bg-tint);
}
.gh-clientarea .ticket-reply .date {
    color: var(--gh-muted);
    font-size: 12.5px;
    unicode-bidi: plaintext;
}
.gh-clientarea .ticket-reply .user {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--gh-border);
}
.gh-clientarea .ticket-reply .user > .fa-user {
    color: var(--gh-blue-600);
}
.gh-clientarea .ticket-reply.staff .user > .fa-user {
    color: var(--gh-navy);
}
.gh-clientarea .ticket-reply .user .name {
    font-weight: 800;
    color: var(--gh-ink);
}
.gh-clientarea .ticket-reply .user .type {
    color: var(--gh-muted);
    font-size: 13px;
    unicode-bidi: plaintext;
}
.gh-clientarea .ticket-reply .label[class*="requestor-type-"] {
    background: var(--gh-blue-600);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 700;
    font-size: 11px;
}
.gh-clientarea .ticket-reply .label.requestor-type-owner,
.gh-clientarea .ticket-reply .label.requestor-type-registereduser {
    background: var(--gh-green);
    color: #04331e;
}
.gh-clientarea .ticket-reply .message {
    color: var(--gh-text);
    line-height: 1.7;
}
.gh-clientarea .ticket-reply .attachments {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gh-border);
    font-size: 13.5px;
}
.gh-clientarea .ticket-reply .attachments ul { padding-inline-start: 18px; margin-top: 6px; }
.gh-clientarea .ticket-reply .attachments a { color: var(--gh-blue-700); unicode-bidi: plaintext; }
/* Rating stars (preserve JS behaviour, restyle appearance) */
.gh-clientarea .ticket-reply .rating .star,
.gh-clientarea .ticket-reply .rating-done .star {
    color: #d6a419;
}

/* --- 27d. Department selection (submit ticket step 1) --- */
.gh-clientarea .col-md-6 > p > strong > a[href*="step=2"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--gh-navy);
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   28. Knowledgebase (gh-support)
   -------------------------------------------------------------------------- */
.gh-support .kb-search {
    box-shadow: var(--gh-shadow-sm);
    border-radius: 999px;
    margin: 6px 0 26px;
    background: #fff;
}
.gh-support .kb-search .form-control {
    border: 1px solid var(--gh-border);
    border-radius: 999px 0 0 999px;
    height: 54px;
    padding-inline-start: 22px;
    box-shadow: none;
}
html[dir="rtl"] .gh-support .kb-search .form-control {
    border-radius: 0 999px 999px 0;
}
.gh-support .kb-search .btn {
    border-radius: 0 999px 999px 0;
    padding-inline: 28px;
    font-weight: 700;
}
html[dir="rtl"] .gh-support .kb-search .btn {
    border-radius: 999px 0 0 999px;
}
.gh-support h2 {
    font-weight: 800;
    color: var(--gh-ink);
    margin: 26px 0 16px;
    font-size: 22px;
}
/* Category cards */
.gh-support .kbcategories > [class*="col-"] {
    margin-bottom: 18px;
}
.gh-support .kbcategories > [class*="col-"] > a:first-child {
    display: block;
    background: #fff;
    border: 1px solid var(--gh-border);
    border-top: 3px solid var(--gh-blue-600);
    border-radius: var(--gh-radius-sm);
    box-shadow: var(--gh-shadow-sm);
    padding: 16px 18px;
    font-weight: 800;
    color: var(--gh-ink);
    font-size: 16px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gh-support .kbcategories > [class*="col-"] > a:first-child:hover {
    transform: translateY(-3px);
    box-shadow: var(--gh-shadow);
    text-decoration: none;
    color: var(--gh-blue-700);
}
.gh-support .kbcategories > [class*="col-"] > a:first-child i,
.gh-support .kbcategories > [class*="col-"] > a:first-child .glyphicon {
    color: var(--gh-blue-600);
    margin-inline-end: 6px;
}
.gh-support .kbcategories .badge {
    background: var(--gh-blue-600);
}
.gh-support .kbcategories p {
    color: var(--gh-muted);
    font-size: 13.5px;
    margin-top: 8px;
    padding-inline: 2px;
}
/* Article list rows */
.gh-support .kbarticles {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 6px 4px;
    margin-bottom: 22px;
}
.gh-support .kbarticles > a,
.gh-support .kbarticles > div {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gh-border);
}
.gh-support .kbarticles > div:last-child,
.gh-support .kbarticles > a:last-child { border-bottom: 0; }
.gh-support .kbarticles > a,
.gh-support .kbarticles > div > a:first-child {
    font-weight: 700;
    color: var(--gh-navy);
}
.gh-support .kbarticles > a:hover,
.gh-support .kbarticles > div > a:first-child:hover {
    color: var(--gh-blue-700);
    text-decoration: none;
}
.gh-support .kbarticles .glyphicon,
.gh-support .kbarticles .fa-file { color: var(--gh-blue); margin-inline-end: 4px; }
.gh-support .kbarticles p {
    color: var(--gh-muted);
    font-size: 13px;
    margin: 4px 0 0;
    padding-inline-start: 20px;
}
/* Article page */
.gh-support .kb-article-title {
    border-bottom: 2px solid var(--gh-border);
    padding-bottom: 14px;
    margin-bottom: 20px;
}
.gh-support .kb-article-title h2 {
    margin: 0;
    display: inline-block;
}
.gh-support .kb-article-title .btn-print {
    color: var(--gh-muted);
    float: right;
}
html[dir="rtl"] .gh-support .kb-article-title .btn-print { float: left; }
.gh-support .kb-article-content {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 26px 28px;
    line-height: 1.8;
    color: var(--gh-text);
    font-size: 15.5px;
}
.gh-support .kb-article-content h1,
.gh-support .kb-article-content h2,
.gh-support .kb-article-content h3 { color: var(--gh-ink); font-weight: 800; }
.gh-support .kb-article-content a { color: var(--gh-blue-700); }
.gh-support .kb-article-content img { max-width: 100%; height: auto; border-radius: var(--gh-radius-sm); }
.gh-support .kb-article-details {
    list-style: none;
    padding: 0;
    margin: 18px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--gh-muted);
    font-size: 13.5px;
}
.gh-support .kb-article-details i { color: var(--gh-blue-600); margin-inline-end: 4px; }
/* Vote / helpful */
.gh-support .kb-rate-article {
    background: var(--gh-bg-tint);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    padding: 18px 22px;
    text-align: center;
    font-weight: 700;
    color: var(--gh-ink);
    margin-bottom: 22px;
}
.gh-support .kb-rate-article .btn-link {
    color: var(--gh-blue-700);
    font-weight: 800;
}
.gh-support .kb-rate-article .fa-thumbs-up { color: var(--gh-green); }
.gh-support .kb-rate-article .fa-thumbs-down { color: #e0575b; }
.gh-support .kb-also-read h3 {
    font-weight: 800;
    color: var(--gh-ink);
    margin: 8px 0 14px;
}

/* --------------------------------------------------------------------------
   29. Announcements (gh-support)
   -------------------------------------------------------------------------- */
.gh-support .announcement-single {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 22px 24px;
    margin-bottom: 18px;
    transition: box-shadow 0.16s ease;
}
.gh-support .announcement-single:hover { box-shadow: var(--gh-shadow); }
.gh-support .announcement-single a.title {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--gh-ink);
    margin-bottom: 8px;
}
.gh-support .announcement-single a.title:hover { color: var(--gh-blue-700); text-decoration: none; }
.gh-support .announcement-single p { color: var(--gh-text); line-height: 1.7; }
.gh-support .announcement-single .label-warning {
    background: var(--gh-blue-600);
    border-radius: 999px;
    padding: 3px 12px;
    font-weight: 700;
}
.gh-support .announcement-single .article-items {
    color: var(--gh-muted);
    font-size: 13px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gh-border);
    unicode-bidi: plaintext;
}
.gh-support .announcement-single .article-items i { color: var(--gh-blue-600); }
/* Announcement detail (viewannouncement — raw {$text}) */
.gh-support .main-content > .pull-right + p,
.gh-support .main-content { line-height: 1.8; }
.gh-support .main-content img { max-width: 100%; height: auto; }
/* Pagination */
.gh-support .btn-group .btn.active {
    background: var(--gh-blue-700);
    border-color: var(--gh-blue-700);
    color: #fff;
}

/* --------------------------------------------------------------------------
   30. Contact form (gh-support) — also used when contact.php shows a form
   -------------------------------------------------------------------------- */
.gh-support form.form-horizontal {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 28px 26px;
    max-width: 760px;
    margin: 0 auto 30px;
}
.gh-support form.form-horizontal .control-label {
    font-weight: 700;
    color: var(--gh-ink);
}
.gh-support form.form-horizontal .form-control {
    border-radius: var(--gh-radius-sm);
    border: 1px solid var(--gh-border);
}
.gh-support form.form-horizontal .form-control:focus {
    border-color: var(--gh-blue);
    box-shadow: 0 0 0 3px rgba(107, 161, 188, 0.18);
}

/* --------------------------------------------------------------------------
   31. Shared alert / empty-state polish (both scopes)
   -------------------------------------------------------------------------- */
body.gh-support .alert,
body.gh-clientarea .alert {
    border-radius: var(--gh-radius-sm);
    border-inline-start-width: 4px;
    padding: 14px 18px;
}
body.gh-support .alert-info,
body.gh-clientarea .alert-info {
    background: var(--gh-bg-tint);
    border-color: var(--gh-blue-600);
    color: var(--gh-navy);
}
body.gh-support .alert.text-center {
    box-shadow: var(--gh-shadow-sm);
}

/* --------------------------------------------------------------------------
   32. Phase 3 responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gh-support .kb-article-content { padding: 18px 16px; }
    .gh-support form.form-horizontal { padding: 18px 14px; }
    .gh-clientarea .ticket-reply { padding: 14px 15px; }
    .gh-clientarea .ticket-reply .user { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .gh-support .kbcategories > [class*="col-"] > a:first-child,
    .gh-support .announcement-single { transition: none; }
}

/* ==========================================================================
   33. Phase 4 — Account settings & secondary pages
   Scoped under body.gh-account (details, change pw, contacts, sub-accounts,
   security/2FA, email history, downloads, network status, affiliates, quotes
   list). These pages also carry gh-clientarea (shared shell/tables/badges/
   alerts). Quote VIEW + password-reset reuse existing invoice/.logincontainer
   styling. Nothing here leaks to homepage/cart/Phases 1-3.
   ========================================================================== */

/* --- 33a. Consistent form controls across account pages --- */
.gh-account .form-group { margin-bottom: 18px; }
.gh-account .control-label,
.gh-account .col-form-label {
    font-weight: 700;
    color: var(--gh-ink);
    margin-bottom: 6px;
}
.gh-account .form-control {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    box-shadow: none;
}
.gh-account .form-control:focus {
    border-color: var(--gh-blue);
    box-shadow: 0 0 0 3px rgba(107, 161, 188, 0.18);
}
.gh-account select.form-control { cursor: pointer; }
.gh-account .btn-primary {
    background-image: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    background-color: var(--gh-blue-700);
    border: 0;
    font-weight: 700;
}
.gh-account .btn-primary:hover,
.gh-account .btn-primary:focus { background-color: var(--gh-navy); }

/* --- 33b. Card-wrap the real forms (those with actual field groups).
   :has() skips hidden/modal-only forms. --- */
.gh-account .main-content form:has(> .form-group),
.gh-account .main-content form:has(> .row .form-group),
.gh-account .main-content form:has(.checkbox-inline) {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 24px 26px;
    margin-bottom: 24px;
}
/* Focused single-form pages: center + narrow (change password) */
.gh-account .main-content form.using-password-strength {
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 24px;
}
/* Field-group two-column layouts keep their gutters inside the card */
.gh-account .main-content form .row { margin-inline: -10px; }

/* --- 33c. Section headings on bare account pages --- */
.gh-account .main-content > h2,
.gh-account .main-content > h3,
.gh-account .main-content > form > h3 {
    font-weight: 800;
    color: var(--gh-ink);
    margin: 8px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gh-border);
    font-size: 20px;
}

/* --- 33d. Permission checkboxes: readable stacked blocks (mobile-safe) --- */
.gh-account .checkbox-inline {
    display: block;
    width: 100%;
    margin-inline-start: 0;
    padding: 8px 10px 8px 24px;
    border-bottom: 1px solid var(--gh-border);
    line-height: 1.5;
}
html[dir="rtl"] .gh-account .checkbox-inline { padding: 8px 24px 8px 10px; }
.gh-account .checkbox-inline:last-child { border-bottom: 0; }
.gh-account .checkbox-inline + br { display: none; }
.gh-account .radio-inline { font-weight: 600; }
.gh-account #invitePermissions.well {
    background: var(--gh-bg-tint);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    box-shadow: none;
}

/* --- 33e. Tables (users list, commission, server status) as cards --- */
.gh-account .table-striped {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    overflow: hidden;
}
.gh-account .table-striped > thead > tr > th {
    background: var(--gh-bg-tint);
    color: var(--gh-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12.5px;
    border-bottom: 1px solid var(--gh-border);
}
.gh-account .table-striped > tbody > tr > td { vertical-align: middle; }
.gh-account .label.label-info { background: var(--gh-blue-600); border-radius: 999px; padding: 3px 10px; }
.gh-account .fa-shield.text-success { color: var(--gh-green); }
.gh-account .fa-shield.text-grey { color: var(--gh-muted); }
.gh-account .btn-manage-permissions,
.gh-account .btn-remove-user { border-radius: 999px; }

/* --- User Management page refinements + email-verification banner --- */
/* Header subtitle + users-found line */
.gh-account .gh-page-subtitle { color: var(--gh-muted); font-size: 15px; margin: 0 0 4px; }
.gh-account .gh-users-found { color: var(--gh-ink); font-weight: 700; margin: 0 0 12px; }
/* Users table has NO <thead>, so style the header row directly */
.gh-account .table-striped > tbody > tr:first-child > th,
.gh-account .table-striped > tr:first-child > th,
.gh-account .table-striped th {
    background: var(--gh-bg-tint);
    color: var(--gh-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--gh-border);
    padding: 13px 14px;
}
.gh-account .table-striped > tbody > tr > td { padding: 14px; }
/* Keep the email LTR-safe inside the RTL page; mute the last-login line */
.gh-account .table-striped td { unicode-bidi: plaintext; }
.gh-account .table-striped td small,
.gh-account .table-striped td .text-muted { color: var(--gh-muted); }
.gh-account .table-striped .label.label-info { margin-inline-start: 6px; font-weight: 700; }
.gh-account .table-striped .fa-shield { margin-inline-end: 4px; }
/* Invite: email input + permission radios */
.gh-account input[name="inviteemail"] {
    height: 46px;
    border-radius: var(--gh-radius-sm);
    unicode-bidi: plaintext;
}
.gh-account .btn-info { border-radius: 999px; font-weight: 700; }
.gh-account .radio-inline {
    margin-inline-start: 0;
    margin-inline-end: 18px;
    padding-inline-start: 22px;
    font-weight: 600;
}
.gh-account .radio-inline input[type="radio"] { margin-top: 3px; }

/* Email-verification banner (includes/verifyemail.tpl) — shows site-wide when a
   logged-in client's email is unverified. Premium amber warning strip. */
.verification-banner.email-verification {
    background: #fdf6e7;
    border-bottom: 1px solid #f0dca8;
    box-shadow: var(--gh-shadow-sm);
    padding: 12px 0;
}
.verification-banner .fa-exclamation-triangle { color: #d98c1a; font-size: 20px; }
.verification-banner .text { color: #6a4a12; font-weight: 600; }
.verification-banner #btnResendVerificationEmail,
.verification-banner .btn-resend-verify-email {
    background: linear-gradient(120deg, var(--gh-navy), var(--gh-blue-600));
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
}
.verification-banner .close { opacity: 0.6; }
html[dir="rtl"] .verification-banner .text,
html[dir="rtl"] .verification-banner .col-sm-7 { text-align: right; }

/* --- 33f. Security / 2FA / SSO --- */
.gh-account #frmSingleSignOn {
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 20px 22px;
    margin-bottom: 22px;
}
.gh-account .twofa-config-link.btn,
.gh-account a.open-modal.btn {
    border-radius: 999px;
    font-weight: 700;
    padding: 10px 22px;
}
.gh-account p.twofa-config-link {
    font-size: 15px;
    color: var(--gh-text);
}
.gh-account p.twofa-config-link strong { color: var(--gh-ink); }

/* --- 33g. Contacts selector (inside alert-info) --- */
.gh-account .alert-block.alert-info {
    background: var(--gh-bg-tint);
    border: 1px solid var(--gh-border);
    border-inline-start: 4px solid var(--gh-blue-600);
    border-radius: var(--gh-radius-sm);
}

/* --- 33h. Email detail popup (standalone #popup-backdrop, loads custom.css) --- */
#popup-backdrop { background: var(--gh-bg-tint); }
#popup-backdrop .panel {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow);
    overflow: hidden;
}
#popup-backdrop .panel-heading {
    background: var(--gh-navy);
    color: #fff;
    border-color: var(--gh-navy);
}
#popup-backdrop .panel-heading h2 { color: #fff; font-size: 18px; font-weight: 700; }

/* --- 33i. Downloads (search + category cards + file rows) --- */
.gh-account .kb-search {
    box-shadow: var(--gh-shadow-sm);
    border-radius: 999px;
}
.gh-account .kb-search .form-control {
    border-radius: 999px 0 0 999px;
    height: 52px;
    padding-inline-start: 22px;
}
html[dir="rtl"] .gh-account .kb-search .form-control { border-radius: 0 999px 999px 0; }
.gh-account .kb-search .btn { border-radius: 0 999px 999px 0; font-weight: 700; }
html[dir="rtl"] .gh-account .kb-search .btn { border-radius: 999px 0 0 999px; }
.gh-account .list-group-item {
    border-color: var(--gh-border);
    transition: background-color 0.12s ease;
}
.gh-account a.list-group-item:hover { background: var(--gh-bg-tint); }
.gh-account .list-group-item .fa-download { color: var(--gh-blue-600); margin-inline-end: 6px; }
.gh-account .list-group-item .fa-lock { color: var(--gh-muted); margin-inline-start: 6px; }
.gh-account .downloadscategories a[href], .gh-account .row > [class*="col-"] > a > .fa-folder-open {
    color: var(--gh-blue-600);
}

/* --- 33j. Network / server status --- */
.gh-account .panel-warning,
.gh-account .panel-info {
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    overflow: hidden;
    border-width: 1px;
}
.gh-account .panel-warning > .panel-heading {
    background: #fff5e6;
    color: #8a5a12;
    border-color: #f0d9b5;
    font-weight: 700;
}
.gh-account .panel-info > .panel-heading {
    background: var(--gh-bg-tint);
    color: var(--gh-navy);
    border-color: var(--gh-border);
    font-weight: 700;
}
.gh-account .list-group-item-danger { background: #fbeaea; color: #a23b3b; }
.gh-account .list-group-item-warning { background: #fdf3e3; color: #8a5a12; }
.gh-account .list-group-item-success { background: #e7f7ef; color: #0a7146; }
.gh-account .list-group-item-info { background: var(--gh-bg-tint); color: var(--gh-navy); }
.gh-account .btn-group .btn.disabled { opacity: 0.5; }

/* --- 33k. Affiliates --- */
.gh-account .affiliate-stat {
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
    padding: 22px 18px;
    text-align: center;
    border: 1px solid var(--gh-border);
    margin-bottom: 16px;
}
.gh-account .affiliate-stat i { font-size: 26px; margin-bottom: 8px; display: block; }
.gh-account .affiliate-stat span {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: var(--gh-ink);
    line-height: 1.1;
    unicode-bidi: plaintext;
}
.gh-account .affiliate-stat.alert-warning { background: #fdf3e3; border-color: #f0d9b5; }
.gh-account .affiliate-stat.alert-warning i { color: #d98c1a; }
.gh-account .affiliate-stat.alert-info { background: var(--gh-bg-tint); border-color: var(--gh-border); }
.gh-account .affiliate-stat.alert-info i { color: var(--gh-blue-600); }
.gh-account .affiliate-stat.alert-success { background: #e7f7ef; border-color: #bfe6d2; }
.gh-account .affiliate-stat.alert-success i { color: var(--gh-green); }
.gh-account .affiliate-referral-link {
    background: var(--gh-navy);
    color: #fff;
    border-radius: var(--gh-radius);
    padding: 22px;
    margin: 8px 0 24px;
}
.gh-account .affiliate-referral-link h3 { color: rgba(255,255,255,0.85); margin-top: 0; }
.gh-account .affiliate-referral-link span {
    display: inline-block;
    background: rgba(255,255,255,0.14);
    border-radius: var(--gh-radius-sm);
    padding: 8px 14px;
    font-family: 'Open Sans', monospace;
    word-break: break-all;
    unicode-bidi: plaintext;
    direction: ltr;
}
.gh-account .table-rounded { border-radius: var(--gh-radius); overflow: hidden; }
#activateAffiliate { border-radius: 999px; padding: 10px 26px; font-weight: 700; }

/* --- 33l. Quote stage + affiliate referral status badges (extend pills) --- */
.gh-clientarea .status-delivered { background: #f0ad4e; color: #4a2f00; }
.gh-clientarea .status-accepted { background: var(--gh-green); color: #04331e; }
.gh-clientarea .status-onhold { background: var(--gh-blue-600); }
.gh-clientarea .status-lost { background: #8a99a6; }
.gh-clientarea .status-dead { background: #2b2f36; }

/* --- 33m. Download-denied bare buttons --- */
.gh-account form[action*="cart.php"] .btn:not(.btn-primary):not(.btn-success) {
    background-image: linear-gradient(120deg, #0aa568, var(--gh-green));
    color: #04331e;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    padding: 10px 22px;
}

/* --- 33n. RTL + responsive --- */
html[dir="rtl"] .gh-account .affiliates .text-right,
html[dir="rtl"] .gh-account .table-rounded .text-right { text-align: left; }
@media (max-width: 767px) {
    .gh-account .main-content form:has(> .form-group),
    .gh-account .main-content form:has(.checkbox-inline) { padding: 16px 15px; }
    .gh-account .affiliate-stat span { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .gh-account a.list-group-item { transition: none; }
}

/* --------------------------------------------------------------------------
   34. English (LTR) parity
   Arabic (dir="rtl") cannot match these selectors and is unaffected.
   -------------------------------------------------------------------------- */

/* Tajawal is an Arabic face; its Latin glyphs sit on a much smaller x-height,
   so English rendered ~15% visually smaller than Arabic at identical px sizes.
   Open Sans is already served locally (head.tpl -> fontCssInclude). Sizes are
   deliberately NOT changed: they already match the approved Arabic layout. */
html[dir="ltr"] {
    --gh-font: 'Open Sans', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Open Sans runs slightly narrower than Tajawal at 13.5px; the plan feature
   lists were the one element below the readable floor. */
html[dir="ltr"] .gh-plan-features li {
    font-size: 14px;
}

/* Language chooser popover. Bootstrap sets .popover's background but never its
   colour, and the popover is injected inside #gh-topbar (background #10222e,
   colour #b9cedd) — so it inherited the dark strip's palette. Set both. */
html[dir="ltr"] #gh-topbar .popover {
    max-width: 220px;
    padding: 0;
    color: var(--gh-text);
    background-color: #fff;
    border: 1px solid var(--gh-border);
    border-radius: 12px;
    box-shadow: var(--gh-shadow);
    font-family: var(--gh-font);
    font-size: 14px;
    text-align: left;
}
html[dir="ltr"] #gh-topbar .popover-content {
    padding: 6px;
}
html[dir="ltr"] #gh-topbar .popover ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
html[dir="ltr"] #gh-topbar .popover a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--gh-text);
    text-decoration: none;
}
html[dir="ltr"] #gh-topbar .popover a:hover,
html[dir="ltr"] #gh-topbar .popover a:focus {
    background: var(--gh-bg-tint);
    color: var(--gh-blue-700);
}

/* --------------------------------------------------------------------------
   35. English (LTR) header + hero layout
   Arabic (dir="rtl") cannot match these selectors and is unaffected.
   -------------------------------------------------------------------------- */

/* ROOT CAUSE of the captcha/TLD overlap. Stock six ships:
     #default-captcha-domainchecker { margin-top:15px; margin-bottom:-63px }
   (base rule; the -25px variant is inside @media max-width:991px). The negative
   margin is six's way of pulling later content up over the captcha. Our redesign
   styled the CLASS (.gh-domain-captcha-inner) but never declared margin, so the
   ID rule stood unopposed. It then collapsed with .gh-tld-strip's margin-top:26px
   to -37px, dragging the TLD row up behind the captcha and hiding .net and .org.
   Zeroing the margin returns every row to normal document flow. */
html[dir="ltr"] section#home-banner.gh-hero .gh-domain-captcha-inner {
    margin-top: 0;
    margin-bottom: 0;
    /* Row 2 = helper text, Row 3 = controls. Drop the oversized translucent
       pill that used to wrap both; the compact pill moves to the controls. */
    display: block;
    padding: 0;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[dir="ltr"] section#home-banner.gh-hero .gh-domain-captcha-help {
    margin: 0 0 10px;
}
html[dir="ltr"] section#home-banner.gh-hero .gh-domain-captcha-controls {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Desktop nav: stop "Shared Hosting" / "WordPress Hosting" breaking onto two
   lines. Stock Bootstrap gives no white-space rule and 15px side padding;
   nowrap plus tighter padding keeps every item on one line without crowding.
   Below 1100px the mobile menu takes over, so this cannot cause overflow. */
@media (min-width: 1100px) {
    html[dir="ltr"] .navbar-main .navbar-nav > li > a {
        white-space: nowrap;
        padding-left: 12px;
        padding-right: 12px;
    }
}