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

    ** Custom Stylesheet **

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

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

/* NXRagons — Hostragons branded client area theme (Nexus 9 based).
 *
 * Branding is applied through Nexus CSS custom properties (the official
 * customization point). The brand purple (#761098) is wired into --primary
 * and its ramp; the SPA cart derives its --vl-* tokens from these, so the
 * whole client area + order form stay on-brand without recompiling SASS.
 *
 * Font: the main site loads "Inter" (ff-1.css, injected site-wide by the
 * hg_unify hook). We reuse that face here and DO NOT re-load the Google Font
 * to avoid a duplicate network request.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Brand purple ramp (Hostragons identity, base #761098) */
    --primary-50: #faf5fe;
    --primary-100: #f4e9fd;  /* site --bs-primary-bg-subtle */
    --primary-200: #e9d5fb;
    --primary-300: #ddbdf7;  /* site --bs-primary-border-subtle */
    --primary-400: #c98fec;
    --primary-500: #a23fc9;
    --primary-600: #8a1ca8;
    --primary-700: #761098;  /* brand primary */
    --primary-800: #5a0c78;  /* brand hover / text-emphasis */
    --primary-900: #4e0a66;
    --primary-950: #2f063d;

    /* Primary colors — Hostragons brand purple */
    --primary: #761098;          /* brand primary */
    --primary-lifted: #5a0c78;   /* hover */
    --primary-accented: #4e0a66; /* active / deepest */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding — softer radii to match the main site's rounded cards/panels */
    --rounding-sm: 0.375rem;
    --rounding-md: 0.625rem;
    --rounding-lg: 1rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* =====================================================================
 *  NXRagons brand layer — applied on top of the Nexus variable theme.
 *  Brand: #761098 (primary) / #bf0b90 (accent) / #5a0c78 (hover).
 *  Scoped to safe, generic surfaces; no stock Nexus file is modified.
 * ===================================================================== */

/* Brand accent + gradient tokens reused below */
:root {
    --hg-accent: #bf0b90;
    --hg-gradient: linear-gradient(90deg, #761098 0%, #bf0b90 100%);
}

/* Font: reuse the site's Inter face (already loaded by the hook) */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Links pick up the brand purple */
a {
    color: var(--primary);
}
a:hover,
a:focus {
    color: var(--primary-lifted);
}

/* Primary buttons — brand gradient with a clear hover/active state */
.btn-primary {
    background-image: var(--hg-gradient);
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-image: none;
    background-color: var(--primary-lifted);
    border-color: var(--primary-lifted);
    color: #fff;
}
.btn-primary:active,
.btn-primary.active {
    background-image: none;
    background-color: var(--primary-accented);
    border-color: var(--primary-accented);
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Header / navbar — light, site-matching surface (main site uses a white
 * header on a #0f172a/.08 hairline border). Active/hover nav links go purple. */
.header {
    background-color: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.header .navbar-nav .nav-link:hover,
.header .navbar-nav .nav-link:focus,
.header .navbar-nav .nav-item.active > .nav-link {
    color: var(--primary);
}
.header .cart-btn .badge {
    background-color: var(--primary);
    color: #fff;
}

/* Cards / panels — brand-consistent radius and a soft shadow */
.card {
    border-radius: var(--rounding-lg);
    border-color: var(--border-muted);
}
.card-header {
    border-top-left-radius: var(--rounding-lg);
    border-top-right-radius: var(--rounding-lg);
}

/* Auth surfaces (login / register / client area) — accent the headings,
 * focus rings and primary CTAs so these high-traffic pages feel on-brand. */
.form-control:focus,
.custom-select:focus {
    border-color: var(--primary-300);
    box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.18);
}
.text-primary {
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.border-primary {
    border-color: var(--primary) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary);
    border-color: var(--primary);
}
.page-link {
    color: var(--primary);
}
.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Support ticket reply staff signature (viewticket.tpl .hg-staff-sig).
 * Replaces the old unreadable "Name / Team / Role" text pile with a clean,
 * aligned signature row: a circular avatar (staff = brand-purple initials,
 * client = generic user glyph) + a column of name (bold) + a coloured LEVEL
 * badge (purple-toned, readable) + the team line. Staff/level strings are
 * injected per active language by hg_unify (hgStaffNames/hgStaffLevels);
 * names rotate per staff reply, levels are translated. */
.hg-staff-sig {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.hg-staff-sig__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lifted) 100%);
    box-shadow: 0 1px 2px rgba(118, 16, 152, 0.25);
}
.hg-staff-sig__avatar--client {
    background: var(--neutral-200, #e5e7eb);
    color: var(--neutral-600, #4b5563);
    box-shadow: none;
}
.hg-staff-sig__meta {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    column-gap: 0.5rem;
    min-width: 0;
    white-space: nowrap;
}
.hg-staff-sig__name {
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.hg-staff-sig__badge {
    align-self: center;
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--primary-800, #5a0c78);
    background-color: var(--primary-100, #f4e9fd);
    border: 1px solid var(--primary-300, #ddbdf7);
    white-space: nowrap;
}
.hg-staff-sig__team {
    font-size: 0.78rem;
    color: var(--neutral-500, #6b7280);
    line-height: 1.2;
}
.ticket-reply.staff {
    border-left: 3px solid var(--primary);
}
/* RTL: avatar sits on the right, badge aligns to the right edge. */
html[dir="rtl"] .hg-staff-sig__badge {
    align-self: center;
}

/* =====================================================================
 *  QA fixes — footer locale/currency widget, phone dial-code, footer nav.
 * ===================================================================== */

/* Footer language/currency button (footer.tpl): a .btn-outline-light pill that
 * shows a flag + "<locale> / <currency>". The nxragons footer renders on a WHITE
 * surface (verified: effective footer bg = rgb(255,255,255)), so the stock
 * .btn-outline-light light-coloured text — and the earlier color:#fff override —
 * made the label near-invisible (white-on-white, only the flag/border showed).
 * Fix: give the label a dark neutral so it reads on the light footer, with a
 * brand-purple hover. The flag layout (flex row + gap) is kept so the flag and
 * label never collide. The [data-target] attribute selector (specificity 0,3,0)
 * outranks the stock .btn-outline-light class rule, so no !important is needed. */
footer.footer .btn-outline-light[data-target="#modalChooseLanguage"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);            /* dark neutral — readable on the white footer */
    border-color: var(--border);   /* soft hairline border instead of light */
    line-height: 1.2;
    white-space: nowrap;
}
footer.footer .btn-outline-light[data-target="#modalChooseLanguage"]:hover,
footer.footer .btn-outline-light[data-target="#modalChooseLanguage"]:focus {
    color: var(--primary);             /* brand purple on hover */
    border-color: var(--primary);
    background-color: transparent;     /* keep the light surface, only recolour */
}
/* The flag wrapper carries no margin of its own; the parent gap handles spacing.
 * Keep the flag block from shrinking so the label can never sit on top of it. */
footer.footer .btn-outline-light[data-target="#modalChooseLanguage"] .iti-flag,
footer.footer .btn-outline-light[data-target="#modalChooseLanguage"] .d-inline-block {
    flex: 0 0 auto;
    margin: 0;
}

/* Phone number field (clientregister.tpl): intl-tel-input in "separate dial
 * code" mode (.iti-sdc-N) renders a flag + "+44" dial-code box at the LEFT edge
 * of the input. The stock all.css DOES reserve the right padding-left per
 * digit-count (e.g. .allow-dropdown.iti-sdc-3 input -> 84px). The defect is
 * pure SPECIFICITY: the hook-injected whmcs-unify.css ships
 *   #main-body .form-control { padding-left: .9rem }   (specificity 1,1,0)
 * and after intl-tel-input init the tel input carries class "form-control" and
 * lives inside #main-body. An ID rule beats any number of classes, so the stock
 * 84px (specificity 0,4,1) AND the earlier class-only override here both lost,
 * leaving padding-left at .9rem (14.4px) — the "+44" (which ends ~80px from the
 * input's left edge) then overlapped the placeholder/typed value.
 * Fix: re-assert the reserved space with selectors that also start at #main-body
 * (specificity 1,4,2), which outrank the unify rule on their own — no !important.
 * Verified live: dial-code box ends ~80px in (LTR) and the flag container stays
 * on the LEFT even in RTL (intl-tel-input forces the input to dir:ltr), so the
 * space is reserved on the LEFT in every locale; no RTL flip is needed. */
/* T2 update (wf-tasarim): the icon-gutter fix below (T2-1) only reserves the
 * dial-code space when the phone field is wrapped in .prepend-icon (the
 * register page). On the ACCOUNT DETAILS page (clientarea.php?action=details)
 * the same intl-tel-input field is NOT inside .prepend-icon, so it fell back to
 * these rules — which carried NO !important and therefore lost to the unify
 * shorthand `html body #main-body input.form-control { padding: .6rem .9rem
 * !important }` (line ~1057). Net effect: padding-left collapsed to 14.4px and
 * the "+44" dial code overlapped the typed number (unreadable).
 * Fix: anchor at `html body #main-body` (specificity 1,4,2 / 1,4,3) AND use
 * !important on padding-left only, so it beats the unify shorthand's
 * !important regardless of whether .prepend-icon is present. Left-only, so the
 * vertical/right padding from the unify rule is untouched. */
html body #main-body .intl-tel-input.separate-dial-code input.form-control,
html body #main-body .intl-tel-input.separate-dial-code input[type="tel"],
html body #main-body .intl-tel-input.separate-dial-code input[type="text"] {
    padding-left: 84px !important;
}
html body #main-body .intl-tel-input.separate-dial-code.iti-sdc-2 input.form-control,
html body #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
    padding-left: 76px !important;
}
html body #main-body .intl-tel-input.separate-dial-code.iti-sdc-3 input.form-control,
html body #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input {
    padding-left: 84px !important;
}
html body #main-body .intl-tel-input.separate-dial-code.iti-sdc-4 input.form-control,
html body #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
    padding-left: 92px !important;
}
html body #main-body .intl-tel-input.separate-dial-code.iti-sdc-5 input.form-control,
html body #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input {
    padding-left: 100px !important;
}

/* Footer nav links (footer.tpl): "Contact Us" and "Terms" sit in a centered
 * .nav with no horizontal gap, so the two labels touch ("ContactTerms").
 * Add breathing room between the inline nav items. */
footer.footer .nav .nav-item + .nav-item .nav-link {
    margin-left: 1rem;
}
html[dir="rtl"] footer.footer .nav .nav-item + .nav-item .nav-link {
    margin-left: 0;
    margin-right: 1rem;
}

/* Mobile bridge: the main-site header is position:fixed (~123px) on <=991px,
 * but whmcs-unify.css zeroes the body offset there (it predates the fixed
 * mobile header). Restore the offset for the panel so content is not hidden. */
@media (max-width: 991px) {
  /* html+body beats whmcs-unify.css's equal-importance zero rule (it loads later). */
  html body.primary-bg-color { padding-top: 124px !important; }
  /* …except the standalone invoice page, which now also carries
   * body.primary-bg-color (for the brand background + Inter) but renders NO
   * fixed site header — so the 124px offset would leave a phantom top gap.
   * Detect it via its .invoice-container child and zero the offset back out. */
  html body.primary-bg-color:has(.invoice-container) { padding-top: 0 !important; }
}

/* =====================================================================
 *  CILA — Polish tour 1. One brand design system, expressed through
 *  --hg-* tokens. These rules are the SINGLE writer for panel polish.
 *
 *  CASCADE NOTE: head.tpl loads custom.css BEFORE the hook injects the
 *  site chrome (style.css / hostragons-brand.css) and whmcs-unify.css.
 *  So to win against those later sheets at equal specificity we either
 *  raise specificity (html body ...) or use !important. Stock Nexus and
 *  the site dist files are NEVER edited — everything is overridden here.
 * ===================================================================== */

/* Brand tokens reused below (mirror whmcs-unify.css --hg-* so values stay
 * in one mental model even though that sheet loads after us). */
:root {
    --hg-primary: #761098;
    --hg-primary-dark: #5a0c78;
    --hg-magenta: #bf0b90;
    --hg-grad: linear-gradient(135deg, #761098 0%, #bf0b90 100%);
    --hg-line: rgba(15, 23, 42, 0.09);
    --hg-input-border: #e2e8f0;
    --hg-radius-ctl: 0.6rem; /* one control radius: buttons + inputs */
}

/* ---------------------------------------------------------------------
 *  1) FONT — Inter everywhere.
 *  The face itself is now loaded by the hg_unify hook (Google Fonts link,
 *  same as the main site). ff-1.css still declares `--ff-1:"Inter",serif`;
 *  harden that fallback chain to sans so a font-load failure degrades to a
 *  sans-serif system font, never the serif the panel was falling back to.
 *  We also assert Inter on body + headings + controls with high specificity
 *  so it wins regardless of which framework styled the element.
 * ------------------------------------------------------------------- */
:root {
    /* Override ff-1.css's serif fallback (loads after us, but this is a
     * variable redefinition; ff-1 re-sets it, so we also force usages below). */
    --ff-1: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html body,
html body.primary-bg-color,
html body .navbar,
html body .header,
html body .hg-header,
html body input,
html body select,
html body textarea,
html body button,
html body .btn,
html body .form-control,
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif !important;
}

/* ---------------------------------------------------------------------
 *  2) INDIGO LEAK — Nexus / site BS5 default secondary is #5C65FF.
 *  It surfaces on the mobile hamburger (.navbar-toggler -> var(--bs-secondary))
 *  and the top-bar tools link (.hg-tools__head-link.text-secondary). Repaint
 *  both with brand purple. High specificity (html body ...) + !important beat
 *  the later site sheets.
 * ------------------------------------------------------------------- */
html body .primary-header .navbar-toggler,
html body .header .navbar-toggler,
html body .hg-header .navbar-toggler,
html body .navbar-toggler {
    background: var(--hg-grad) !important;
    background-color: var(--hg-primary) !important;
    border: 0 !important;
    border-radius: var(--hg-radius-ctl) !important;
    color: #fff !important;
}
html body .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.25) !important;
}
/* Top utility-bar link ("text-secondary" indigo -> brand purple). */
html body .hg-tools__head-link,
html body .hg-tools__head-link.text-secondary {
    color: var(--hg-primary) !important;
}
html body .hg-tools__head-link:hover,
html body .hg-tools__head-link:focus {
    color: var(--hg-primary-dark) !important;
}

/* ---------------------------------------------------------------------
 *  3) AUTH LAYOUT — split-panel (brand left / form right), oweb-grade but
 *  more polished. The auth pages render the .hg-auth-split wrapper inside
 *  #main-body > .container > .row > .col-12.primary-content. We let the
 *  split fill the viewport height and centre it so there is no dead void
 *  above the footer.
 *
 *  MARKUP (login.tpl / password-reset-container.tpl / clientregister.tpl):
 *    .hg-auth-split
 *      aside.hg-auth-brand   (purple gradient panel: logo + copy + bullets)
 *      .hg-auth-formwrap     (white form card on the right)
 *
 *  CASCADE: custom.css loads before the hook sheets; high specificity
 *  (html body #main-body ...) keeps these winning without !important spam.
 * ------------------------------------------------------------------- */
html body #main-body:has(.hg-auth-split) {
    min-height: calc(100vh - 104px - 220px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}
/* The split itself: two columns, equal-height, brand panel slightly narrower.
 * A single rounded shell with a soft, layered shadow so it reads as one
 * premium, lifted object floating over the page. */
html body #main-body .hg-auth-split {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04),
        0 8px 24px -8px rgba(15, 23, 42, 0.14),
        0 32px 64px -24px rgba(90, 12, 120, 0.28);
    border: 1px solid rgba(118, 16, 152, 0.08);
}
/* The register form is much taller — give it more room for the form column. */
html body #main-body .hg-auth-split.hg-auth-split--wide {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    max-width: 1080px;
}

/* ---- Brand panel ---- */
html body #main-body .hg-auth-brand {
    position: relative;
    /* Layered: two soft radial highlights over a rich diagonal brand gradient,
     * giving the flat purple real depth without any image asset. */
    background:
        radial-gradient(120% 90% at 88% 8%, rgba(191, 11, 144, 0.55) 0%, rgba(191, 11, 144, 0) 55%),
        radial-gradient(90% 80% at 6% 100%, rgba(78, 10, 102, 0.65) 0%, rgba(78, 10, 102, 0) 60%),
        linear-gradient(150deg, #761098 0%, #8a1ca8 42%, #bf0b90 100%);
    color: #fff;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Fine dotted texture overlay — subtle premium grain, masked to fade out. */
html body #main-body .hg-auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.4px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
    opacity: 0.7;
    pointer-events: none;
}
/* Large soft glow anchored bottom-right for a sense of light. */
html body #main-body .hg-auth-brand::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -130px;
    bottom: -150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
html body #main-body .hg-auth-brand__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}
html body #main-body .hg-auth-brand__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
html body #main-body .hg-auth-brand__logo img {
    height: 30px;
    width: auto;
    max-width: 170px;
}
/* Brand wordmark fallback text (shown beside / instead of the SVG). */
html body #main-body .hg-auth-brand__name {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: #fff;
}
/* If the SVG loads we still keep the name as an a11y sibling but visually
 * the logo carries the wordmark, so hide the duplicate text label. */
html body #main-body .hg-auth-brand__logo img + .hg-auth-brand__name {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
}
html body #main-body .hg-auth-brand__copy {
    margin-top: 2.75rem;
}
html body #main-body .hg-auth-brand__title {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 0.65rem;
    text-wrap: balance;
}
html body #main-body .hg-auth-brand__subtitle {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 36ch;
}
html body #main-body .hg-auth-brand__list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
html body #main-body .hg-auth-brand__list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.96);
}
/* Glassy circular icon pill in front of each benefit. */
html body #main-body .hg-auth-brand__ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-size: 0.9rem;
    color: #fff;
}
/* legacy fallback: if an <i> still sits directly in the li (older cache) */
html body #main-body .hg-auth-brand__list li > i {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.9rem;
    color: #fff;
}

/* ---- Social-proof: stat chip + trust line, pinned near the panel base ---- */
html body #main-body .hg-auth-brand__proof {
    margin-top: auto;
    padding-top: 2rem;
}
html body #main-body .hg-auth-brand__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
}
html body #main-body .hg-auth-brand__stat-num {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}
html body #main-body .hg-auth-brand__stat-num span {
    color: var(--hg-accent);
    -webkit-text-fill-color: #ffd1f0;
    color: #ffd1f0;
}
html body #main-body .hg-auth-brand__stat-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    text-transform: lowercase;
}
html body #main-body .hg-auth-brand__trust {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}
/* Register brand panel adds a "already registered? -> login" footer link. */
html body #main-body .hg-auth-brand__footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}
html body #main-body .hg-auth-brand__link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 0.35rem;
}
html body #main-body .hg-auth-brand__link:hover {
    color: #fff;
    opacity: 0.85;
}

/* ---- Form column ---- */
html body #main-body .hg-auth-formwrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 3rem;
    background: #fff;
}
html body #main-body .hg-auth-formwrap--wide {
    padding: 2.5rem 2.5rem;
}
/* The inner .card chrome is now redundant — the split shell is the card.
 * Flatten the nested card so it does not draw a second border/shadow. */
html body #main-body .hg-auth-split .hg-auth-card,
html body #main-body .hg-auth-split .login-form .card,
html body #main-body .hg-auth-split #registration .card.hg-auth-card {
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
}
html body #main-body .hg-auth-split .hg-auth-card > .card-body {
    padding: 0;
}
html body #main-body .hg-auth-split .hg-auth-card > .card-footer {
    background: transparent;
    border-top: 1px solid var(--hg-line);
    padding: 1.1rem 0 0;
    margin-top: 1.25rem;
}
html body #main-body .hg-auth-head {
    margin-bottom: 1.6rem;
}
html body #main-body .hg-auth-head--register {
    margin-bottom: 1.25rem;
}
html body #main-body .hg-auth-head .text-muted {
    font-size: 0.95rem;
}

/* Remember-me + forgot row */
html body #main-body .hg-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--neutral-600);
    cursor: pointer;
    user-select: none;
}
/* Custom checkbox so remember-me matches the brand instead of the OS default. */
html body #main-body .hg-auth-remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--hg-input-border);
    border-radius: 5px;
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    flex: 0 0 auto;
}
html body #main-body .hg-auth-remember input[type="checkbox"]:hover {
    border-color: var(--hg-primary);
}
html body #main-body .hg-auth-remember input[type="checkbox"]:checked {
    background: var(--hg-grad);
    border-color: var(--hg-primary);
}
html body #main-body .hg-auth-remember input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
html body #main-body .hg-auth-remember input[type="checkbox"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(118, 16, 152, 0.2);
}
html body #main-body .hg-auth-row {
    margin: 0.25rem 0 1.25rem;
}
html body #main-body .hg-auth-link {
    color: var(--hg-primary);
    font-weight: 600;
}
html body #main-body .hg-auth-link:hover {
    color: var(--hg-primary-dark);
    text-decoration: underline;
}
/* Full-width brand-gradient primary submit on auth pages. A faint sheen sweeps
 * across on hover and the trailing arrow nudges right for a tactile feel. */
html body #main-body .hg-auth-submit.btn-primary,
html body #main-body input.hg-auth-submit.btn-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    overflow: hidden;
    background: var(--hg-grad);
    background-color: var(--hg-primary);
    border: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 20px -8px rgba(118, 16, 152, 0.6);
    transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.18s ease;
}
/* Sheen sweep. */
html body #main-body .hg-auth-submit.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
html body #main-body .hg-auth-submit.btn-primary:hover,
html body #main-body input.hg-auth-submit.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 12px 26px -8px rgba(118, 16, 152, 0.66);
}
html body #main-body .hg-auth-submit.btn-primary:hover::before {
    left: 130%;
}
html body #main-body .hg-auth-submit.btn-primary:active,
html body #main-body input.hg-auth-submit.btn-primary:active {
    transform: translateY(1px);
}
html body #main-body .hg-auth-submit__arrow {
    font-size: 0.8rem;
    transition: transform 0.18s ease;
}
html body #main-body .hg-auth-submit.btn-primary:hover .hg-auth-submit__arrow {
    transform: translateX(3px);
}
html[dir="rtl"] body #main-body .hg-auth-submit__arrow {
    transform: scaleX(-1);
}
html[dir="rtl"] body #main-body .hg-auth-submit.btn-primary:hover .hg-auth-submit__arrow {
    transform: scaleX(-1) translateX(3px);
}

/* Secure-connection micro badge under the submit / footer. */
html body #main-body .hg-auth-secure {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--neutral-500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
html body #main-body .hg-auth-secure i {
    color: var(--success);
    font-size: 0.72rem;
}
/* Register submit centred at a comfortable width, not edge-to-edge. */
html body #main-body .hg-auth-submit-wrap {
    margin-top: 0.5rem;
}
html body #main-body .hg-auth-submit-wrap .hg-auth-submit {
    min-width: 260px;
}
/* Password-reset change form: submit + cancel side by side. */
html body #main-body .hg-auth-btnrow {
    display: flex;
    gap: 0.6rem;
}
html body #main-body .hg-auth-btnrow .hg-auth-submit {
    flex: 1;
}
html body #main-body .hg-auth-backlink {
    margin-top: 1.1rem;
}
html body #main-body .hg-auth-backlink i {
    font-size: 0.75rem;
    margin-right: 0.2rem;
}

/* The password reveal button sits flush in the merged group. */
html body #main-body .input-group-merge .btn-reveal-pw {
    border: 1px solid var(--hg-input-border);
    border-left: 0;
    background: #f8fafc;
    color: var(--neutral-500);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
html body #main-body .input-group-merge .btn-reveal-pw:hover {
    color: var(--hg-primary);
    background: #f1f5f9;
}

/* ---- Mobile: collapse to one column, brand becomes a slim top strip ---- */
@media (max-width: 860px) {
    html body #main-body:has(.hg-auth-split) {
        min-height: auto;
        padding-top: 1rem;
    }
    html body #main-body .hg-auth-split,
    html body #main-body .hg-auth-split.hg-auth-split--wide {
        grid-template-columns: 1fr;
        max-width: 540px;
    }
    html body #main-body .hg-auth-brand {
        padding: 1.5rem 1.5rem 1.6rem;
    }
    /* On the strip, drop the long copy + bullets — keep just logo + headline
     * so the form stays above the fold on small screens. */
    html body #main-body .hg-auth-brand__copy {
        margin-top: 1rem;
    }
    html body #main-body .hg-auth-brand__title {
        font-size: 1.25rem;
        margin-bottom: 0.2rem;
    }
    html body #main-body .hg-auth-brand__subtitle {
        font-size: 0.9rem;
    }
    html body #main-body .hg-auth-brand__list,
    html body #main-body .hg-auth-brand__proof,
    html body #main-body .hg-auth-brand__footer {
        display: none;
    }
    /* On the slim mobile strip the dotted texture/glow are too busy — calm it. */
    html body #main-body .hg-auth-brand::before {
        opacity: 0.4;
    }
    html body #main-body .hg-auth-brand__logo {
        margin-bottom: 0;
    }
    html body #main-body .hg-auth-formwrap,
    html body #main-body .hg-auth-formwrap--wide {
        padding: 1.75rem 1.5rem;
    }
    /* The brand strip already shows the register subtitle; avoid repeating the
     * same sentence in the form head right below it on the stacked mobile view. */
    html body #main-body .hg-auth-head--register p {
        display: none;
    }
}

/* ---- RTL: mirror the radius rounding of the two panels ---- */
html[dir="rtl"] body #main-body .input-group-merge .btn-reveal-pw {
    border-left: 1px solid var(--hg-input-border);
    border-right: 0;
}
html[dir="rtl"] body #main-body .hg-auth-brand__link {
    margin-left: 0;
    margin-right: 0.35rem;
}

/* ---------------------------------------------------------------------
 *  4) AUTH HEADINGS — the templates now emit a semantic <h1 class="h3
 *  hg-auth-title">. Give it the brand Inter/800 scale so the auth pages
 *  have a real, consistent top heading.
 * ------------------------------------------------------------------- */
html body #main-body .hg-auth-title,
html body #main-body h1.hg-auth-title {
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
    margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------
 *  5) INPUTS — one input scale across the whole flow. whmcs-unify sizes
 *  #main-body .form-control to .6rem/.9rem padding but login/reset get 45px
 *  while register stays ~41px/13px. Force a single 44px control with .95rem
 *  text and a neutral resting border that turns purple only on focus
 *  (register's inputs were resting on a purple border).
 * ------------------------------------------------------------------- */
html body #main-body .form-control,
html body #main-body .custom-select,
html body #main-body select.form-control,
html body #main-body input.form-control {
    min-height: 44px !important;
    font-size: 0.95rem !important;
    padding: 0.6rem 0.9rem !important;
    border-radius: var(--hg-radius-ctl) !important;
    border-color: var(--hg-input-border) !important;
}
html body #main-body .form-control:focus,
html body #main-body .custom-select:focus,
html body #main-body select.form-control:focus {
    border-color: var(--hg-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.18) !important;
}
/* Keep the input-group merged controls aligned with the 44px height so the
 * prepended icon box matches the field. The icon glyph is muted at rest and
 * adopts the brand purple when the sibling input is focused (see :focus-within
 * rule below) for a polished, attentive feel. */
html body #main-body .input-group-merge .input-group-text,
html body #main-body .input-group-text {
    border-radius: var(--hg-radius-ctl);
    border-color: var(--hg-input-border);
    background: #f8fafc;
    color: var(--neutral-500);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
html body #main-body .input-group-merge:focus-within .input-group-text {
    color: var(--hg-primary);
    border-color: var(--hg-primary);
    background: #faf5fe;
}
/* Brand focus ring spans the whole merged group, not just the text input, so
 * the prepend icon + reveal button stay visually attached when focused. */
html body #main-body .input-group-merge:focus-within {
    border-radius: var(--hg-radius-ctl);
    box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.16);
}
html body #main-body .input-group-merge:focus-within .form-control,
html body #main-body .input-group-merge:focus-within .btn-reveal-pw {
    border-color: var(--hg-primary) !important;
    box-shadow: none !important;
}

/* ---- Register field-group title with a small brand icon chip ---- */
html body #main-body .hg-grp-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
html body #main-body .hg-grp-title__ico {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(118, 16, 152, 0.12), rgba(191, 11, 144, 0.12));
    color: var(--hg-primary);
    font-size: 0.8rem;
}

/* ---------------------------------------------------------------------
 *  6) BUTTONS — one radius (.6rem) and a consistent height scale across the
 *  flow + header. Normalises the 4px nav buttons, the 56px register submit
 *  and the form submits to a single system. Header buttons live OUTSIDE
 *  #main-body so whmcs-unify never reached them — cover them here.
 * ------------------------------------------------------------------- */
html body #main-body .btn,
html body .navbar .btn,
html body .header .btn,
html body .hg-header .btn,
html body .primary-header .btn {
    border-radius: var(--hg-radius-ctl) !important;
}
/* Form submit / primary CTAs in the flow → consistent ~46px comfortable size. */
html body #main-body .btn-primary,
html body #main-body button[type="submit"].btn,
html body #main-body input[type="submit"].btn {
    min-height: 46px;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
}
/* Normalise the register submit (.btn-lg, was ~56px) down into the same scale
 * as the rest of the flow instead of towering over it. */
html body #main-body .btn-lg {
    min-height: 48px !important;
    padding: 0.65rem 1.6rem !important;
    border-radius: var(--hg-radius-ctl) !important;
    font-size: 1rem !important;
}
/* Header pill buttons (login / register / lang / currency) were 4px radius and
 * ~34px; align radius to the system and keep them tidy. */
html body .header .btn-sm,
html body .hg-header .btn-sm,
html body .primary-header .btn-sm {
    border-radius: var(--hg-radius-ctl) !important;
}

/* ---------------------------------------------------------------------
 *  7) AUTH CARD — consistent brand card surface (radius + soft shadow) so
 *  login / reset / register cards match the main site quality.
 *
 *  NOTE: the login/reset outer card is now flattened (the .hg-auth-split
 *  shell IS the card — see section 3). What remains here is the REGISTER
 *  field-group cards (personal / billing / security). Inside the split shell
 *  they sit on a white form column, so a heavy floating shadow looks wrong —
 *  give them a soft border + tiny shadow so they read as grouped field
 *  sections, with a brand-tinted group title.
 * ------------------------------------------------------------------- */
html body #main-body .hg-auth-split #registration .card {
    border-radius: 0.7rem;
    border: 1px solid var(--hg-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 1.1rem !important;
}
html body #main-body .hg-auth-split #registration .card .card-body {
    padding: 1.25rem 1.4rem !important;
}
/* Group title: a small brand label above each field group. */
html body #main-body .hg-auth-split #registration .card .card-title {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: var(--hg-primary-dark) !important;
    margin-bottom: 1rem;
}

/* =====================================================================
 *  CILA — Polish tour 2. Same single design system, --hg-* tokens.
 *  Three structural defects fixed here (icon overlap, heading scale,
 *  invoice chrome) + the auth/control polish from tour 1 stays intact.
 *
 *  CASCADE: custom.css loads BEFORE the hook's site sheets (bootstrap.css
 *  BS5 / whmcs-unify.css), so to beat them at equal specificity we raise
 *  specificity (html body / #main-body ...) or use !important. Stock Nexus
 *  + site dist files are NEVER edited.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 *  T2-1) REGISTER ICON OVERLAP — class-wide defect on the registration form.
 *
 *  Markup (clientregister.tpl): each field sits in
 *    <div class="form-group prepend-icon">
 *      <label class="field-icon" style="position:absolute"><i class="fas .."></i></label>
 *      <input class="field form-control" ...>
 *  Nexus theme.min.css reserves the icon gutter with
 *    .prepend-icon .field { padding-left: 36px }   (specificity 0,2,0)
 *  but the hook-injected whmcs-unify.css ships
 *    #main-body .form-control { padding: .6rem .9rem }  (specificity 1,1,0)
 *  An ID rule beats any number of classes, so on the inputs that carry BOTH
 *  "field" AND "form-control" (firstname/lastname/email/address1/city/state/
 *  postcode/country) the .9rem (14.4px) padding wins and the absolutely-
 *  positioned 42px icon box sits ON TOP of the first 1-2 typed/placeholder
 *  chars. The "field"-only boxes (companyname/address2/phone/tax_id) keep the
 *  36px Nexus padding, which is why they render correctly.
 *
 *  FIX: re-assert the icon gutter from #main-body so it outranks the unify
 *  rule (specificity 1,3,1 >= 1,1,0) without needing !important on padding.
 *  2.6rem (~41.6px) clears the 42px-wide .field-icon box with a hair of gap.
 *  The select (country) gets the same gutter. Tour-1's input padding rule
 *  used the shorthand `padding: .6rem .9rem !important`; that shorthand would
 *  re-zero padding-left, so it is narrowed to the vertical/right axes only and
 *  the left gutter is owned here (prepend boxes) or by .9rem (non-prepend).
 * ------------------------------------------------------------------- */
html body #main-body .prepend-icon .field.form-control,
html body #main-body .prepend-icon input.field,
html body #main-body .prepend-icon select.field,
html body #main-body .prepend-icon input.form-control,
html body #main-body .prepend-icon select.form-control {
    padding-left: 2.6rem !important;
}
/* The intl-tel-input phone field manages its own left gutter (see the
 * separate-dial-code rules above); never apply the icon gutter to it. */
html body #main-body .prepend-icon .intl-tel-input input.field,
html body #main-body .prepend-icon .intl-tel-input input.form-control {
    padding-left: 84px !important;
}
/* Keep the icon glyph vertically centred against the 44px tour-1 control
 * height (the stock box is 36px tall, so the icon floated high). */
html body #main-body .prepend-icon .field-icon {
    height: 44px;
    line-height: 44px;
}

/* ---------------------------------------------------------------------
 *  T2-2) PANEL HEADING SCALE — one consistent, legible type scale.
 *
 *  Measured defect: sidebar card titles ("BİLGİLERİNİZ", "SORUMLULAR",
 *  "HIZLI ERİŞİM", ...) computed to 11.52px because whmcs-unify.css ships
 *    body.primary-bg-color #main-body .card-sidebar .card-header .card-title
 *      { font-size:.72rem!important }      (= 11.52px, smaller than 16px body)
 *  They read as cramped micro-labels with no hierarchy against the section
 *  h3s (16.8px). We keep the uppercase "section-label" tone (it is the right
 *  visual register for a sidebar header) but lift it to a readable size and
 *  set a real, modular scale across the panel:
 *    sidebar/card label   ~0.9rem  (14.4px) uppercase, neutral-strong
 *    content section h3    1.18rem (already set by unify) — left as-is
 *    modal / popover title 1.15rem — breaks the stray 36px popover h4
 *  High specificity + !important to beat the unify !important rule.
 * ------------------------------------------------------------------- */
html body.primary-bg-color #main-body .card-sidebar .card-header .card-title,
html body.primary-bg-color #main-body .sidebar .card-header .card-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    color: var(--neutral-600) !important;
}
/* Content-area card titles (non-sidebar) — a clear section heading a notch
 * above body text, brand-inked, so the page has a real top-of-card heading. */
html body.primary-bg-color #main-body .primary-content .card > .card-header .card-title,
html body.primary-bg-color #main-body .primary-content .card-title:not(.card-sidebar .card-title) {
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none;
    color: var(--hg-primary-dark) !important;
}
/* Normalise the stray modal / popover heading (the "Şifre Oluştur" generate-
 * password popover h4 measured 36px) down into the scale so it can never tower
 * over the page when it appears. */
html body .modal-title,
html body .modal-header h3,
html body .modal-header h4,
html body .popover-header,
html body .popover .popover-header,
html body .popover h4 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* ---------------------------------------------------------------------
 *  T2-3) VIEWINVOICE CHROME — viewinvoice.tpl is a STANDALONE full-HTML
 *  template: it ships its own <!DOCTYPE>/<head>/<body> and does NOT include
 *  header.tpl, so it never renders {$headoutput} where the hook injects the
 *  site chrome (bootstrap.css / hostragons-brand.css / whmcs-unify.css /
 *  Inter). The structural fix is in viewinvoice.tpl (it now emits
 *  {$headoutput}). These rules give the invoice "paper" the same brand card
 *  surface + Inter body the rest of the panel uses, in case the standalone
 *  page still lacks the body.primary-bg-color hook that scopes unify.
 * ------------------------------------------------------------------- */
html body .invoice-container {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif !important;
}
html body .invoice-container .card {
    border-radius: 0.85rem;
    border-color: var(--hg-line);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04),
        0 12px 28px -8px rgba(16, 24, 40, 0.08);
}

/* ---------------------------------------------------------------------
 *  T2-4) RESELLER WIDGET CTA — the "Devam et →" (create-hosting) button in
 *  the reseller module used a generic info-blue (rs-btn-info -> #3b82f6),
 *  clashing with the brand purple "Yükselt" button right above it. The module
 *  CSS has no brand token; repaint its primary step buttons with the brand
 *  gradient here so the widget speaks the same button language as the panel.
 *  (The English strings + emoji icons in that widget are fixed in code —
 *  modules/servers/reseller/reseller.php — via the hg_t() locale layer.)
 * ------------------------------------------------------------------- */
html body #rs-domain-continue.rs-btn,
html body .rs-btn.rs-btn-info {
    background: var(--hg-grad) !important;
    background-color: var(--hg-primary) !important;
    color: #fff !important;
    border: 0 !important;
}
html body .rs-btn.rs-btn-info:hover,
html body #rs-domain-continue.rs-btn:hover {
    filter: brightness(1.07);
}

/* =====================================================================
 *  CILA — Polish tour 3. Same single design system, --hg-* tokens.
 *  Two confirmed viewinvoice defects fixed here (cyan ledger header bar,
 *  unstyled gateway "Pay Now" submit). Stock Nexus + site dist files are
 *  NEVER edited; everything is overridden from custom.css with raised
 *  specificity (html body .invoice-container ...) so it beats the later
 *  invoice.css / BS5 sheets at equal importance.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 *  T3-1) VIEWINVOICE LEDGER HEADER — the "Defter / Ledger" bar under the
 *  line-items table carries class "card-title ... text-white ... bg-info"
 *  (viewinvoice.tpl line 244). Now that the invoice page gets the site
 *  chrome (BS5), .bg-info paints it bright cyan (rgb(0,196,253)) — totally
 *  off-brand against the purple identity. Repaint that one bar with the
 *  brand gradient. Scoped to the invoice container so no other .bg-info
 *  surface elsewhere is touched.
 * ------------------------------------------------------------------- */
html body .invoice-container .card-title.bg-info {
    background: var(--hg-grad) !important;
    background-color: var(--hg-primary) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------
 *  T3-2) VIEWINVOICE "PAY NOW" BUTTON — {$paymentbutton} is emitted by the
 *  payment gateway as a bare, class-less <input type="submit"> (or a
 *  <button type="submit">), so it renders as the grey browser-default box.
 *  The tour-1 submit rule keyed on "#main-body input[type=submit].btn",
 *  which never matches here: the standalone invoice body is NOT #main-body
 *  and the gateway button carries no .btn class. Give any submit control
 *  inside the invoice container the brand button look — but EXCLUDE the
 *  "Apply Credit" button (#btnInvoiceAddCreditApply / .btn-success), which
 *  is intentionally green and already styled.
 * ------------------------------------------------------------------- */
html body .invoice-container input[type="submit"]:not(.btn-success),
html body .invoice-container button[type="submit"]:not(.btn-success):not(#btnInvoiceAddCreditApply) {
    background: var(--hg-grad) !important;
    background-color: var(--hg-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--hg-radius-ctl) !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.2rem !important;
    line-height: 1.4 !important;
}
html body .invoice-container input[type="submit"]:not(.btn-success):hover,
html body .invoice-container button[type="submit"]:not(.btn-success):not(#btnInvoiceAddCreditApply):hover {
    filter: brightness(1.07);
}

/* Quickbar (plus menu) vertical placement fix.
 * Measured: quickbar overlapped the fixed header by 11px (body offset 104px <
 * header height 115px) and sat 72px above content. Clear the header and tighten
 * the gap below so the bar sits evenly between header and the WHMCS content. */
@media (min-width: 992px) {
  html body.primary-bg-color { padding-top: 122px !important; }
}
.hg-quickbar__inner { padding-top: .45rem !important; padding-bottom: .25rem !important; }
body.primary-bg-color #main-body { padding-top: 1rem !important; }

/* ============================================================
 * Full-bleed auth (Refik feedback 2026-06-05): the centred card
 * read as a weak "box" floating between header and footer. Make the
 * split fill the whole area edge-to-edge and full-height; keep the
 * form inputs from stretching by capping the form column's inner width.
 * Appended last so it wins over the earlier boxed rules. */
html body #main-body .container:has(.hg-auth-split),
html body #main-body .container-fluid:has(.hg-auth-split),
html body #main-body .row:has(.hg-auth-split),
html body #main-body .row:has(.hg-auth-split) > [class*="col-"] {
    max-width: none !important;   /* the .row capped at 1560px left ~190px side gaps on >1560 screens; remove the cap + the 12px col gutters so the split is truly edge-to-edge at every width */
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
html body #main-body .row:has(.hg-auth-split) > [class*="col-"] {
    flex: 0 0 100% !important;
}
html body #main-body:has(.hg-auth-split) {
    min-height: calc(100vh - 104px);
    padding: 0 !important;
    justify-content: stretch;
}
html body #main-body .hg-auth-split,
html body #main-body .hg-auth-split.hg-auth-split--wide {
    max-width: none;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: calc(100vh - 104px);
}
/* Centre the form within its now-wide column so fields stay readable. */
html body #main-body .hg-auth-formwrap {
    align-items: center;
    justify-content: center;
}
html body #main-body .hg-auth-form { max-width: 460px; width: 100%; }
html body #main-body .hg-auth-formwrap--wide .hg-auth-form { max-width: 640px; }
/* Close the residual ~7px light strip above the purple panel: the fixed header
   is 115px tall but body reserves 122px top-padding. Pull the auth area flush
   under the header on desktop; add the 7px back to min-height so the footer
   stays flush at the bottom. (Mobile gap is already ~1px, so desktop-only.) */
@media (min-width: 992px) {
    html body #main-body:has(.hg-auth-split) {
        margin-top: -7px;   /* min-height stays calc(100vh-104px) from above, so the whole block just shifts up 7px: header flush AND footer flush */
    }
}
@media (max-width: 991px) {
    html body #main-body:has(.hg-auth-split),
    html body #main-body .hg-auth-split,
    html body #main-body .hg-auth-split.hg-auth-split--wide { min-height: calc(100vh - 124px); }
}

/* Tema toggle WHMCS'te body.primary-bg-color yuzunden gizleniyordu (ana site kurali). WHMCS'te goster (header acik zemin -> gri toggle gorunur). */
html body.primary-bg-color #hgThemeToggle.hg-theme-toggle { display: inline-flex !important; }

/* --- Reseller bos-panel sarmalayicisi (client-area anasayfa ince cizgi) ---
   Reseller alt-hostingleri (urun 66/68/69) active-products-services-item.tpl'de {if} ile bosaltilir,
   ama WHMCS panel cercevesi bos list-group-item sarmalayicisini yine basar. Icerikli item'da
   .div-service-item bulunur; bos (reseller) sarmalayicida bulunmaz -> gizle. */
.list-group-item[id*="Active_Products_Services-"]:not(:has(.div-service-item)) { display: none !important; }

/* --- Domain-details hizli-aksiyon toolbar (.hg-dd-actions) ---
   Sablonda (clientareadomaindetails.tpl) var ama CSS HIC eklenmemis -> butonlar (Nameserver/WHOIS/
   Kilit/Yenile) stilsiz, ozellikle primary "Yenile" beyaz/bozuk goruluyordu. Marka renkli pill set. */
.hg-dd-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 1rem; }
.hg-dd-action {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem; border-radius: 999px;
  background: #faf5fe; color: #5a0c78; border: 1px solid #ecd9f5;
  font-size: .85rem; font-weight: 600; text-decoration: none; line-height: 1.2;
  transition: background .15s, color .15s, border-color .15s;
}
.hg-dd-action:hover { background: #ffd1f0; color: #761098; border-color: #761098; }
.hg-dd-action i { font-size: .9rem; }
.hg-dd-action--primary { background: #761098; color: #fff; border-color: #761098; }
.hg-dd-action--primary:hover { background: #5a0c78; color: #fff; border-color: #5a0c78; }
[data-bs-theme=dark] .hg-dd-action { background: #2a1f33; color: #e9d5f5; border-color: #4a2d5c; }
[data-bs-theme=dark] .hg-dd-action:hover { background: #3a2647; color: #fff; border-color: #761098; }
[data-bs-theme=dark] .hg-dd-action--primary { background: #761098; color: #fff; border-color: #761098; }

/* 2026-06-10: para birimi dropdown'ı WHMCS sayfalarında GİZLİ — header seçicisi
   WHMCS'in kendi para birimini DEĞİŞTİRMİYOR (3 WHMCS para birimi ayrı yönetiliyor),
   yanıltıcıydı (Refik talimatı). Ana sitede görünmeye devam eder. */
.hg-topbar__cur{display:none!important}

/* ============================================================
 * 2026-06-11 GECE DENETİMİ — DARK TEMA KONTRAST ONARIMI
 * Filo bulgusu: panel dark temada marka-moru (#761098) nav/sidebar
 * metinleri koyu zemin üstünde okunmuyor (kontrast 1.0-1.8); bazı
 * kartlar/inputlar koyu-üstüne-koyu. Tümü [data-bs-theme=dark] kapsamlı
 * → light tema ETKİLENMEZ.
 * ============================================================ */
html[data-bs-theme="dark"] .hg-quickbar__item,
html[data-bs-theme="dark"] .hg-quickbar__item span,
html[data-bs-theme="dark"] .hg-quickbar__inner a { color: #e9d5ff !important; }
html[data-bs-theme="dark"] .hg-quickbar__item:hover,
html[data-bs-theme="dark"] .hg-quickbar__item:hover span { color: #ffffff !important; }

html[data-bs-theme="dark"] .sidebar-menu-item-label,
html[data-bs-theme="dark"] .list-group-item { color: #cbb6e8 !important; }
html[data-bs-theme="dark"] .list-group-item.active,
html[data-bs-theme="dark"] .list-group-item.active .sidebar-menu-item-label {
  color: #ffffff !important; background: rgba(192,38,211,.28) !important;
}
html[data-bs-theme="dark"] .list-group-item:hover { color:#fff !important; background:rgba(192,38,211,.15) !important; }

/* ============================================================
 * 2026-06-28: SAYFA ZEMİNİ — dark mode page background. theme.min.css has
 * `#main-body{background:var(--bg-lifted)}` + `body.primary-bg-color{...}` and
 * --bg-lifted=--neutral-100 (LIGHT) with NO dark override, so order/cart pages
 * (cart.php config + checkout) stayed FULLY WHITE in dark mode even though the
 * cards had dark rules. Override the bg tokens + the two surfaces directly.
 * Scoped to [data-bs-theme=dark] — light untouched. ============================================================ */
html[data-bs-theme="dark"]{
  --bg-lifted:#14151f;
  --bg-muted:#181922;
  --bg:#1c1d2b;
  --bg-accented:#23243a;
}
html[data-bs-theme="dark"] body.primary-bg-color,
html[data-bs-theme="dark"] #main-body,
html[data-bs-theme="dark"] section#main-body{ background-color:#14151f !important; }

/* Kartlar: dark'ta beyaz kalanları koyult (açık metin görünür olsun) */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] .collapsable-card-body { background-color:#1b1b2e !important; color:#e6e6f2 !important; }
html[data-bs-theme="dark"] .card-title,
html[data-bs-theme="dark"] .card-header { color:#f0eaff !important; }

/* 2026-06-29: SEPET "Alışverişe Devam Et" link-butonu (cart.php a=view) — SPA
 * cart .btn-link.btn-continue-sh teması varsayılan near-black (#222) rengi
 * taşıyor; dark kart zemininde (#1c1d2b) 1.05 kontrast = TAMAMEN GÖRÜNMEZ.
 * Marka açık-moruna çek (link görünümü korunur). SADECE dark; light ETKİSİZ. */
html[data-bs-theme="dark"] a.btn-continue-shopping,
html[data-bs-theme="dark"] .btn-link.btn-continue-shopping,
html[data-bs-theme="dark"] a.btn-link.btn-continue-shopping { color:#d9b8f5 !important; }
html[data-bs-theme="dark"] a.btn-continue-shopping:hover,
html[data-bs-theme="dark"] .btn-link.btn-continue-shopping:hover { color:#efd9ff !important; }

/* ============================================================
 * 2026-06-29: VIEWINVOICE DARK FIX (Refik: "fatura başlığı görünmüyor")
 * KÖK: viewinvoice.tpl'de fatura "kağıdı" = .invoice-container; ÜST yarısı
 * (logo + "Fatura No…" h3 + Fatura Sahibi adresi + Ödeme Yöntemi + Fatura
 * Tarihi) bir .card içinde DEĞİL — doğrudan .invoice-container'a oturuyor.
 * custom.css L1313 bu konteynırı BEYAZ marka-kartı yapıyor; dark temada ise
 * --text token'ı AÇIK griye dönüyor → açık metin BEYAZ üstüne = 1.17-1.19
 * kontrast (GÖRÜNMEZ). Alt satır-kalemleri .card olduğu için L1531 onu zaten
 * koyultmuş → kağıt yarı-beyaz/yarı-koyu bölünüyordu. ÇÖZÜM: dark'ta tüm
 * .invoice-container kağıdını koyu yüzeye + okunur açık metne çek (alttaki
 * .card #1b1b2e ile uyumlu, tek parça koyu kağıt). SADECE dark; light ETKİSİZ.
 * Marka-gradient öğeler (.card-title.bg-info "Defter", pay/submit butonları)
 * kendi rengini korur — onlara dokunmuyoruz. ============================================================ */
html[data-bs-theme="dark"] body .invoice-container {
  background-color:#1b1b2e !important;
  color:#e6e6f2 !important;
  border-radius:0.85rem;
  border:1px solid #2c2c46;
}
/* Üst başlık alanı: fatura no + bölüm etiketleri + adres + tarih okunur olsun */
html[data-bs-theme="dark"] body .invoice-container h1,
html[data-bs-theme="dark"] body .invoice-container h2,
html[data-bs-theme="dark"] body .invoice-container h3,
html[data-bs-theme="dark"] body .invoice-container h4,
html[data-bs-theme="dark"] body .invoice-container strong,
html[data-bs-theme="dark"] body .invoice-container b { color:#f0eaff !important; }
html[data-bs-theme="dark"] body .invoice-container,
html[data-bs-theme="dark"] body .invoice-container p,
html[data-bs-theme="dark"] body .invoice-container span:not(.label):not([class*="badge"]),
html[data-bs-theme="dark"] body .invoice-container td,
html[data-bs-theme="dark"] body .invoice-container .small-text,
html[data-bs-theme="dark"] body .invoice-container .invoice-header { color:#d3d3e6 !important; }
/* Ayraçlar (hr) koyu kağıt üstünde görünür ince çizgi */
html[data-bs-theme="dark"] body .invoice-container hr { border-color:#34344f !important; opacity:1; }
/* "ÖDENMEDİ/Ödendi" durum etiketi kırmızı/yeşil kalır; sadece beyazda kaybolan
   nötr metinleri düzelttik. Tutar kolonu ($10,00 USD) zaten açık -> korunur. */

/* Form alanları: koyu-üstüne-koyu fix */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="dark"] input[type="text"],
html[data-bs-theme="dark"] input[type="email"],
html[data-bs-theme="dark"] input[type="number"] {
  background-color:#23233a !important; color:#ececf6 !important; border-color:#3d3d5c !important;
}
html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] textarea::placeholder { color:#8a8aa8 !important; }

/* Tablo başlık/gövde dark okunabilirlik */
html[data-bs-theme="dark"] table, html[data-bs-theme="dark"] .table { color:#e2e2f0 !important; }
html[data-bs-theme="dark"] .table thead th { color:#f0eaff !important; }

/* 2026-06-28: DataTables (Faturalar/Hizmet listeleri) — sayfalama bilgisi,
   filtre/uzunluk etiketleri ve sayfa düğmeleri dark'ta ~1.7 kontrast (silik) ->
   okunabilir. Sadece dark. */
html[data-bs-theme="dark"] .dataTables_info,
html[data-bs-theme="dark"] .dataTables_length,
html[data-bs-theme="dark"] .dataTables_length label,
html[data-bs-theme="dark"] .dataTables_filter,
html[data-bs-theme="dark"] .dataTables_filter label,
html[data-bs-theme="dark"] .dataTables_paginate { color:#c5c5cf !important; }
html[data-bs-theme="dark"] .dataTables_paginate .paginate_button{ color:#cbb6e8 !important; }
html[data-bs-theme="dark"] .dataTables_paginate .paginate_button.current,
html[data-bs-theme="dark"] .dataTables_paginate .paginate_button:hover{ color:#fff !important; }
html[data-bs-theme="dark"] .dataTables_filter input,
html[data-bs-theme="dark"] .dataTables_length select{ background:#23233a !important; color:#ececf6 !important; border-color:#3d3d5c !important; }

/* Dil seçici mevcut dil etiketi (slate→açık) */
html[data-bs-theme="dark"] .hg-lang__cur { color:#cbb6e8 !important; }

/* dark: the two strongest title rules above (html body... +!important) kept
 * their LIGHT inks in dark mode — sidebar labels --neutral-600 and content
 * titles --hg-primary-dark are both near-invisible on the dark surface.
 * Same selectors + [data-bs-theme] prefix (strictly more specific). */
html[data-bs-theme="dark"] body.primary-bg-color #main-body .card-sidebar .card-header .card-title,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .sidebar .card-header .card-title { color: #b9aed1 !important; }
html[data-bs-theme="dark"] body.primary-bg-color #main-body .primary-content .card > .card-header .card-title,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .primary-content .card-title:not(.card-sidebar .card-title) { color: #d9b8f5 !important; }

/* ── 2026-06-16: Dashboard "Aktif Ürün/Hizmetler" servis butonları — kompakt + sade ──
   Sadece görünüm; JS hook'ları (.btn-custom-action, data-*, dropdown-toggle) DOKUNULMADI. */
.div-service-buttons { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.4rem; }
.div-service-buttons > .btn,
.div-service-buttons .btn-group > .btn { font-size:.82rem; padding:.34rem .72rem; border-radius:8px; font-weight:600; line-height:1.2; white-space:nowrap; height:auto; }
/* Sitejet (accent) butonu: kocaman blok yerine kompakt (metin korunur, sadece sıkı) */
.div-service-buttons .btn-group-secondary .btn-primary { padding:.34rem .8rem; }
/* "⋮" aksiyon-menüsü toggle'ları: ikon-buton, çift-caret kapalı, boş-beyaz görünüm gider */
.div-service-buttons .dropdown-toggle { padding:.34rem .56rem; color:#7a7d85; }
.div-service-buttons .dropdown-toggle::after { display:none !important; }
.div-service-buttons .dropdown-toggle .fa-ellipsis-v { font-size:.9rem; }
.div-service-buttons .btn-group { margin:0; }
/* dropdown menüsü modern + okunaklı */
.div-service-buttons .dropdown-menu { border:0; border-radius:12px; padding:.35rem; box-shadow:0 8px 28px rgba(20,23,43,.14); font-size:.85rem; min-width:210px; }
.div-service-buttons .dropdown-item { border-radius:7px; padding:.45rem .7rem; cursor:pointer; display:flex; align-items:center; gap:.45rem; }
.div-service-buttons .dropdown-item:hover { background:rgba(123,47,247,.08); }
.div-service-buttons .btn-view-details { display:inline-flex; align-items:center; gap:.35rem; }
@media (max-width:575px){ .div-service-buttons { justify-content:flex-start; } }

/* ── Ürün detay: disk/bant kullanım çubukları (eski buggy jquery.knob 'alert(v)' yerine) ── */
.hg-usage-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; max-width:680px; margin:1rem auto 0; }
.hg-usage-card { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:1rem 1.1rem; text-align:left; box-shadow:0 2px 10px rgba(20,23,43,.05); }
.hg-usage-head { font-weight:700; font-size:.92rem; margin-bottom:.6rem; color:var(--bs-primary,#6a2c91); }
.hg-usage-bar { height:10px; border-radius:6px; background:rgba(0,0,0,.08); overflow:hidden; }
.hg-usage-bar > span { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#7b2ff7,#e6007a); transition:width .6s ease; }
.hg-usage-meta { font-size:.85rem; color:#555; margin-top:.55rem; }
.hg-usage-pct { float:right; font-weight:700; color:var(--bs-primary,#6a2c91); }
html[data-bs-theme="dark"] .hg-usage-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); }
html[data-bs-theme="dark"] .hg-usage-meta { color:#bbb; }

/* ===== Sağ-üst "+" hızlı menü — HOVER ile açılır (saf CSS, mutlak konum) ===== */
.hg-plus{position:relative;display:inline-flex;align-items:center}
.hg-plus__btn{width:34px;height:34px;border-radius:9px;border:1px solid #e0d3ee!important;background:#fff!important;color:#761098!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;padding:0;line-height:1}
.hg-plus:hover .hg-plus__btn,.hg-plus__btn:hover,.hg-plus:focus-within .hg-plus__btn{background:#761098!important;border-color:#761098!important;color:#fff!important}
.hg-plus__ic{font-size:14px;line-height:1}
.hg-plus__menu{position:absolute;top:calc(100% + 9px);right:0;left:auto;min-width:238px;background:#fff;border:1px solid #e7e9ef;border-radius:13px;box-shadow:0 18px 44px rgba(28,29,43,.16);padding:7px;z-index:1080;opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .16s ease,transform .16s ease,visibility .16s;text-align:left}
.hg-plus__menu::before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px}
.hg-plus:hover .hg-plus__menu,.hg-plus:focus-within .hg-plus__menu{opacity:1;visibility:visible;transform:translateY(0)}
.hg-plus__head{font-size:10.5px;font-weight:700;color:#9aa0ad;text-transform:uppercase;letter-spacing:.04em;padding:6px 12px 9px}
.hg-plus__item{display:flex;align-items:center;gap:11px;border-radius:9px;padding:9px 12px;font-size:13.5px;font-weight:600;color:#3a3f4a;text-decoration:none}
.hg-plus__item iconify-icon{font-size:18px;color:#761098;flex:none}
.hg-plus__item:hover,.hg-plus__item:focus{background:#faf7fd;color:#761098}
[data-bs-theme="dark"] .hg-plus__btn{background:#1c1d2b!important;border-color:#3a2f48!important}
[data-bs-theme="dark"] .hg-plus__menu{background:#1c1d2b;border-color:#2d2f42}
[data-bs-theme="dark"] .hg-plus__item{color:#cfd2da}
/* Hesap menüsünde (hg-acct__menu) ikon-yazı boşluğu (me-2 tutmuyordu) */
.hg-acct__menu .dropdown-item{display:flex;align-items:center;gap:10px}
.hg-acct__menu .dropdown-item iconify-icon{flex:none;font-size:18px}

/* ===== KOMPAKT MÜŞTERİ PANELİ (Refik: kocaman yazılar) 0620 ===== */
#main-body .client-home-cards .card-title{font-size:15px!important;font-weight:800!important;line-height:1.3!important}
#main-body .client-home-cards .card{font-size:.92em}
#main-body .client-home-cards .card-header{padding:13px 18px!important}
#main-body .client-home-cards .card-body{padding:14px 18px!important}
#main-body .client-home-cards .list-group-item{padding:11px 18px!important;font-size:13px!important}
#main-body .client-home-cards .card-title .btn{font-size:12px!important}
/* Aktif Ürün/Hizmetler — dropdown-toggle (aksiyon/webmail) BEYAZ görünmesin */
#main-body .div-service-buttons .btn-group .dropdown-toggle,#main-body .div-service-buttons .dropdown-toggle.btn-default{color:#761098!important;border:1px solid #e0d3ee!important;background:#fff!important}
#main-body .div-service-buttons .dropdown-toggle:hover,#main-body .div-service-buttons .dropdown-toggle[aria-expanded="true"]{background:#761098!important;color:#fff!important;border-color:#761098!important}
#main-body .div-service-buttons .dropdown-toggle i{font-size:11px}

/* === HG panel dark-mode (2026-06-28 FG3 login + P1-1 footer) === */
html[data-bs-theme="dark"] #main-body .hg-auth-title,html[data-bs-theme="dark"] #main-body h1.hg-auth-title{color:#f0eaff !important}
html[data-bs-theme="dark"] .hg-auth-head .text-muted,html[data-bs-theme="dark"] .hg-auth-secure{color:#cbb6e8 !important}
html[data-bs-theme="dark"] .footer,html[data-bs-theme="dark"] .site-footer{background:#0f0f17 !important}
html[data-bs-theme="dark"] .footer h5,html[data-bs-theme="dark"] .footer h6,html[data-bs-theme="dark"] .site-footer h5,html[data-bs-theme="dark"] .site-footer h6{color:#f1f5f9 !important}
html[data-bs-theme="dark"] .footer a,html[data-bs-theme="dark"] .footer p,html[data-bs-theme="dark"] .site-footer a,html[data-bs-theme="dark"] .site-footer p{color:#cbd5e1 !important}

/* === HG yeni modul aksiyon kartlari dark (2026-06-28 P0-2; gercek class: lu-tile/ipcard/oscard/st-card) === */
html[data-bs-theme="dark"] .lu-tile,html[data-bs-theme="dark"] .lu-tiles,html[data-bs-theme="dark"] .ovh-ipcard,html[data-bs-theme="dark"] .ovh-oscard,html[data-bs-theme="dark"] .ovh-st-card,html[data-bs-theme="dark"] .cs-ipcard,html[data-bs-theme="dark"] .cs-oscard,html[data-bs-theme="dark"] .cs-st-card{background:#1a1a2e !important;border-color:#2a2a3e !important;color:#e5e5ea !important}
html[data-bs-theme="dark"] .lu-tile__title,html[data-bs-theme="dark"] .ovh-ipcard__ip,html[data-bs-theme="dark"] .cs-ipcard__ip{color:#f0eaff !important}
html[data-bs-theme="dark"] .lu-tile__sub,html[data-bs-theme="dark"] .ovh-ipcard__ver,html[data-bs-theme="dark"] .cs-ipcard__ver{color:#b8b8c8 !important}

/* === HG OVH/Contabo modul dark temasi (2026-06-28 P0-2 v2; #layers ID-spesifik kazanir) === */
html[data-bs-theme="dark"] #layers .lu-tile,
html[data-bs-theme="dark"] #layers .ovh-osgrid .ovh-oscard .lu-tile,
html[data-bs-theme="dark"] #layers .ovh-oscard,
html[data-bs-theme="dark"] #layers .ovh-ipcard,
html[data-bs-theme="dark"] #layers .ovh-st-card,
html[data-bs-theme="dark"] #layers .ovh-side__card,
html[data-bs-theme="dark"] #layers .ovh-sdns-card,
html[data-bs-theme="dark"] #layers .ovh-stat,
html[data-bs-theme="dark"] #layers .cs-ipcard,
html[data-bs-theme="dark"] #layers .cs-oscard,
html[data-bs-theme="dark"] #layers .cs-st-card{background:#1a1a2e!important;border-color:#2a2a3e!important;color:#e5e5ea!important}
html[data-bs-theme="dark"] #layers .lu-form-control,
html[data-bs-theme="dark"] #layers .ovh-ossearch input,
html[data-bs-theme="dark"] #layers .ovh-id,
html[data-bs-theme="dark"] #layers .ovh-copy,
html[data-bs-theme="dark"] #layers .ovh-iconbtn,
html[data-bs-theme="dark"] #layers .ovh-set__btn{background:#12121c!important;border-color:#2a2a3e!important;color:#e5e5ea!important}
html[data-bs-theme="dark"] #layers .lu-tile__title,
html[data-bs-theme="dark"] #layers .lu-tile__sub,
html[data-bs-theme="dark"] #layers .ovh-ipcard__ip,
html[data-bs-theme="dark"] #layers .ovh-stat__v{color:#f0eaff!important}

/* === HG modul dark v3 (2026-06-28; #layers#layers cift-id = modul tek-id'sini garantili yener) === */
html[data-bs-theme="dark"] #layers#layers .lu-tile,
html[data-bs-theme="dark"] #layers#layers .ovh-oscard,
html[data-bs-theme="dark"] #layers#layers .ovh-ipcard,
html[data-bs-theme="dark"] #layers#layers .ovh-st-card,
html[data-bs-theme="dark"] #layers#layers .ovh-side__card,
html[data-bs-theme="dark"] #layers#layers .ovh-sdns-card,
html[data-bs-theme="dark"] #layers#layers .ovh-stat,
html[data-bs-theme="dark"] #layers#layers .cs-ipcard,
html[data-bs-theme="dark"] #layers#layers .cs-oscard,
html[data-bs-theme="dark"] #layers#layers .cs-st-card{background:#1a1a2e!important;border-color:#2a2a3e!important;color:#e5e5ea!important}
html[data-bs-theme="dark"] #layers#layers .lu-form-control,
html[data-bs-theme="dark"] #layers#layers .ovh-ossearch input,
html[data-bs-theme="dark"] #layers#layers .ovh-id,
html[data-bs-theme="dark"] #layers#layers .ovh-copy,
html[data-bs-theme="dark"] #layers#layers .ovh-iconbtn,
html[data-bs-theme="dark"] #layers#layers .ovh-set__btn{background:#12121c!important;border-color:#2a2a3e!important;color:#e5e5ea!important}
html[data-bs-theme="dark"] #layers#layers .lu-tile__title,
html[data-bs-theme="dark"] #layers#layers .ovh-ipcard__ip,
html[data-bs-theme="dark"] #layers#layers .ovh-stat__v{color:#f0eaff!important}

/* === HG modul dark v4 (2026-06-28b; Contabo cs-* + OVH-dedicated ovh-* + LU genel yuzeyler; cift-id #layers#layers ile tek-id'leri yener) === */
/* cs-* (Contabo client-area: cs-id, cs-stat, cs-side, cs-ipstat, cs-ossearch, cs-fwip, cs-fwadd, cs-fwdel, cs-tl, cs-set, cs-iconbtn, cs-copy, cs-sdns-chip, cs-sdns-card, cs-pnet) */
html[data-bs-theme="dark"] #layers#layers .cs-id,
html[data-bs-theme="dark"] #layers#layers .cs-stat,
html[data-bs-theme="dark"] #layers#layers .cs-side__card,
html[data-bs-theme="dark"] #layers#layers .cs-ipstat,
html[data-bs-theme="dark"] #layers#layers .cs-fwip,
html[data-bs-theme="dark"] #layers#layers .cs-fwadd,
html[data-bs-theme="dark"] #layers#layers .cs-pnet,
html[data-bs-theme="dark"] #layers#layers .cs-sdns-card,
html[data-bs-theme="dark"] #layers#layers .cs-sdns-chip,
html[data-bs-theme="dark"] #layers#layers .cs-osmodal__box,
html[data-bs-theme="dark"] #layers#layers .cs-osgrid .cs-oscard .lu-tile,
html[data-bs-theme="dark"] #layers#layers .cs-osgrid .cs-oscard{background:#1a1a2e!important;border-color:#2a2a3e!important;color:#e5e5ea!important}
html[data-bs-theme="dark"] #layers#layers .cs-iconbtn,
html[data-bs-theme="dark"] #layers#layers .cs-copy,
html[data-bs-theme="dark"] #layers#layers .cs-fwdel,
html[data-bs-theme="dark"] #layers#layers .cs-set__btn,
html[data-bs-theme="dark"] #layers#layers .cs-seg__b.is-on,
html[data-bs-theme="dark"] #layers#layers .cs-ossearch input{background:#12121c!important;border-color:#2a2a3e!important;color:#e5e5ea!important}
html[data-bs-theme="dark"] #layers#layers .cs-id__name,
html[data-bs-theme="dark"] #layers#layers .cs-stat__val,
html[data-bs-theme="dark"] #layers#layers .cs-info__val,
html[data-bs-theme="dark"] #layers#layers .cs-mono{color:#f0eaff!important}
html[data-bs-theme="dark"] #layers#layers .cs-info li:hover{background:#23243440!important}
html[data-bs-theme="dark"] #layers#layers .cs-tl__dot{background:#23243a!important;border-color:#3a3a4e!important;color:#cfd3db!important}

/* LU genel beyaz yuzey: widget, modal, dropdown, nav-sub, navbar, form, tooltip, off-canvas, t-c body-boxed, alert-outline */
html[data-bs-theme="dark"] #layers#layers .lu-widget,
html[data-bs-theme="dark"] #layers#layers .lu-modal__content,
html[data-bs-theme="dark"] #layers#layers .lu-dropdown,
html[data-bs-theme="dark"] #layers#layers .lu-mob-dropdown,
html[data-bs-theme="dark"] #layers#layers .lu-nav--h .lu-nav--sub,
html[data-bs-theme="dark"] #layers#layers .lu-navbar,
html[data-bs-theme="dark"] #layers#layers .lu-navbar--v-thin .lu-navbar__nav .lu-nav:not(.lu-nav--sub) > .lu-nav__item .lu-nav--sub,
html[data-bs-theme="dark"] #layers#layers .lu-navbar--v-thin .lu-navbar__nav .lu-nav:not(.lu-nav--sub) > .lu-nav__item > .lu-nav--sub,
html[data-bs-theme="dark"] #layers#layers .lu-off-canvas,
html[data-bs-theme="dark"] #layers#layers .lu-off-canvas-responsive,
html[data-bs-theme="dark"] #layers#layers .lu-t-c__body--boxed,
html[data-bs-theme="dark"] #layers#layers .lu-alert--outline,
html[data-bs-theme="dark"] #layers#layers .lu-tree-view .lu-list-group__top .lu-toggle-icon,
html[data-bs-theme="dark"] #layers#layers .lu-app-main__actions{background:#1a1a2e!important;border-color:#2a2a3e!important;color:#e5e5ea!important;box-shadow:0 5px 30px rgba(0,0,0,.4)!important}
html[data-bs-theme="dark"] #layers#layers .lu-form-control,
html[data-bs-theme="dark"] #layers#layers .lu-input-group,
html[data-bs-theme="dark"] #layers#layers .lu-form-indicator,
html[data-bs-theme="dark"] #layers#layers .lu-form-check > label .lu-form-indicator{background-color:#12121c!important;border-color:#2a2a3e!important;color:#e5e5ea!important;box-shadow:none!important}
html[data-bs-theme="dark"] #layers#layers .lu-btn{background:#2a2a3e!important;color:#e5e5ea!important;border-color:#3a3a4e!important}
html[data-bs-theme="dark"] #layers#layers .lu-btn--primary,
html[data-bs-theme="dark"] #layers#layers .lu-btn--warning{color:#fff!important}

/* Scaleway: .scaleway-panel bootstrap-tabanli; tablo+form-control yuzeyleri */
html[data-bs-theme="dark"] .scaleway-panel{color:#e5e5ea}
html[data-bs-theme="dark"] .scaleway-panel .table,
html[data-bs-theme="dark"] .scaleway-panel .table td,
html[data-bs-theme="dark"] .scaleway-panel .table th{background:#1a1a2e!important;border-color:#2a2a3e!important;color:#e5e5ea!important}
html[data-bs-theme="dark"] .scaleway-panel .form-control,
html[data-bs-theme="dark"] .scaleway-panel select.form-control{background:#12121c!important;border-color:#2a2a3e!important;color:#e5e5ea!important}
html[data-bs-theme="dark"] .scaleway-panel .form-control:focus{background:#12121c!important;border-color:#761098!important;color:#fff!important;box-shadow:0 0 0 .2rem rgba(118,16,152,.25)!important}
html[data-bs-theme="dark"] .scaleway-panel .alert-info{background:#15263a!important;border-color:#1e3a55!important;color:#cfe2ff!important}
html[data-bs-theme="dark"] .scaleway-panel .alert-warning{background:#3a2d15!important;border-color:#5a4720!important;color:#ffedb0!important}
html[data-bs-theme="dark"] .scaleway-panel .text-muted{color:#9aa0ad!important}

/* =====================================================================
 *  WF-TASARIM (2026-06-29) — panel polish, CSS-only.
 *  Three low-severity visual findings from the design tour. Brand --hg-*
 *  tokens reused. High specificity (html body ...) so it beats the later
 *  hook sheets at equal importance; CTA / price surfaces stay visible.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 *  WT-1) ADD FUNDS info table (clientarea.php?action=addfunds) — the
 *  "En Az / En Fazla Yatırılabilen / En Fazla Tutar" table sits as a DIRECT
 *  child of a rounded .card (clientareaaddfunds.tpl: <div class="card">
 *  <table class="table table-striped">). The table has no card-body padding
 *  and its intrinsic width exceeds the card on narrow phones, so the striped
 *  row backgrounds + the "$5.000,00 USD" values bleed past the card's rounded
 *  right corner (the gray stripe squares off the top-right corner — see
 *  panel-mobile-addfunds.png).
 *
 *  FIX: clip the table to the card radius (overflow:hidden + matching corner
 *  rounding on the first/last stripe rows) and force the table to width:100%
 *  so it never grows past the card. On phones, tighten cell padding + nudge
 *  the value font down a hair so the longest value ("$5.000,00 USD") sits
 *  comfortably inside the card with a small gutter. The info table is
 *  read-only — no CTA / price input is affected. Scoped to the addfunds card
 *  shape (a .card whose first child is a .table) so no other panel table is
 *  touched. */
html body #main-body .card > table.table.table-striped {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}
/* Clip the striped fill to the card's rounded corners so the top-right stripe
 * can no longer square off past the radius. */
html body #main-body .card:has(> table.table.table-striped) {
    overflow: hidden;
}
/* Keep the value column from being pushed wide; let the label wrap if needed
 * and give the value cell room to breathe at the card edge. */
html body #main-body .card > table.table.table-striped td {
    vertical-align: middle;
    word-break: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 480px) {
    html body #main-body .card > table.table.table-striped td {
        padding: 0.6rem 0.85rem;
        font-size: 0.92rem;
    }
    /* The right-hand value cell carries the long "$5.000,00 USD" string —
     * give it a touch more right padding so it never grazes the card edge. */
    html body #main-body .card > table.table.table-striped td:last-child {
        padding-right: 1rem;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------
 *  WT-2) INVOICES / TICKETS DataTables (invoices / supporttickets) —
 *  finding: NO action required. The theme already re-renders these as
 *  stacked cards on mobile; the wide <tr> measured in the DOM stays inside
 *  the scroll wrapper and there is no page-level horizontal overflow. The
 *  generic .table-responsive scroll-wrap above (line ~1761) already covers
 *  the fallback. Recorded for traceability; intentionally no rule added.
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 *  WT-3) HELPER LABELS — three auxiliary chrome labels in the panel header /
 *  account menu computed to ~10.5px (below the 11px legibility floor):
 *    "Hızlı Menü"          -> .hg-plus__head          (10.50px)
 *    "ICANN Bilgilendirme" -> .navigation-2__menu-foot-label (10.56px)
 *    "Hoş geldiniz"        -> .hg-acct__hi            (10.88px)
 *  (Verified live via probe-panel-tiny.mjs.) Gently lift just these three to
 *  11px (0.6875rem) for readability. IMPORTANT: this is deliberately NOT a
 *  blanket "small text" rule — the panel also has intentional micro-badges at
 *  9.75px (.label-success "Aktif" / .label-placeholder "Askıya alındı" /
 *  service-status .label) and the cart count badge, which are a correct,
 *  consistent badge scale and are left untouched. Exact-class scope only. */
html body .hg-plus__head,
html body .navigation-2__menu-foot-label,
html body .hg-acct__hi {
    font-size: 0.6875rem !important;
    line-height: 1.45;
}

/* === HG P2/P3 mobil/accordion/tap-target (2026-06-28b) === */
/* Tablo yatay tasma — mobilde scroll-wrap */
@media (max-width:767px){
  html .table-responsive,
  html .responsive-wrap,
  html .lu-table--mob-collapsible,
  html .scaleway-panel .table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  html .scaleway-panel .table{min-width:100%}
}
/* Accordion mobilde default-acik -> kapali (sadece .show olanlari koru, .panel-collapse.in elementlerini kapat) */
@media (max-width:767px){
  html .panel-group .panel-collapse.in:not(.hg-keep-open),
  html .accordion .accordion-collapse.show:not(.hg-keep-open){display:none!important}
  html .panel-group .panel-collapse.in:not(.hg-keep-open).hg-mobile-force-open,
  html .accordion .accordion-collapse.show:not(.hg-keep-open).hg-mobile-force-open{display:block!important}
}
/* Tap-target >=40px (#hg-langhint, OS-sekme, modul-tab) */
#hg-langhint,
html .hg-os-tab,
html .cs-seg__b,
html .ovh-seg__b,
html [role="tab"].nav-link,
html .cs-page-tab,
html .ovh-page-tab{min-height:40px;min-width:40px;line-height:1.2;padding:.55rem .85rem;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:767px){
  #hg-langhint{min-height:44px;min-width:44px;padding:.6rem 1rem}
}
/* Kirik award gorselleri: var olmayan src'lerde img'i gizle */
.hg-award img[src=""],
.hg-award img:not([src]),
.hg-trust img[src=""],
.hg-trust img:not([src]),
img.hg-broken,
img[alt][src*="undefined"],
img[alt][src*="null"]{visibility:hidden;display:none}

/* 2026-06-28: Google reCAPTCHA rozeti absolute konumlanıp form/kart içeriğinin
   ÜSTÜNE biniyordu (clientarea home, checkout, register — tüm genişlikler). Sol-alta
   tuck et, z-index düşür; mobilde küçült. Tüm WHMCS sayfaları (global). */
.grecaptcha-badge{
  z-index:5 !important;
  bottom:14px !important; right:auto !important; left:14px !important;
  opacity:.9;
}
@media (max-width:991px){
  .grecaptcha-badge{ left:0 !important; bottom:0 !important; transform:scale(.82); transform-origin:left bottom; }
}

/* === NX-CONTRAST-0628w3 (kontrast denetimi SON pass — 2 kalan: dark mağaza-fiyat + light footer) === */

/* 1) DARK mağaza/ek-hizmet (cart.php addons.tpl) ürün-kartı fiyatı: span.price = brand mor
 *    #761098, dark kart-zemini #1c1d2b üzerinde 1.82 kontrast (neredeyse görünmez). Brand
 *    açık-moruna (#d9b8f5, dark'taki .hg-bc-price ile aynı aile) çek -> 9.6:1. SADECE dark;
 *    light beyaz kart üzerinde #761098 zaten 9.14:1 (DOKUNULMADI). custom.css brand-css'ten
 *    ÖNCE yüklendiği için yeterli özgüllük: zincir-selektör (.product .price). */
html[data-bs-theme="dark"] .product .price,
html[data-bs-theme="dark"] .product-pricing .price,
html[data-bs-theme="dark"] .product-pricing .price .amount{ color:#d9b8f5 !important; }

/* 3) LIGHT site footer (her sayfada — hgSiteFooter fragment, .hg-footer #f2f5ff zemin):
 *    .hg-foot-link / .hg-foot-label / .hg-foot-intro WHMCS bağlamında --hg-muted=#64748b'e
 *    çözülüyor -> 4.37 (4.5'in hemen altı). #475569'a koyult -> 6.96:1. .hg-foot-h (14.1) ve
 *    hover (#761098) DOKUNULMADI. brand-css custom.css'ten SONRA yüklendiği için !important
 *    + .hg-footer ile yeterli özgüllük. Dark footer renkleri ([data-bs-theme=dark]) ETKİLENMEZ
 *    (bu kural :not ile dark'ı dışlar -> NX-DARK-0628 footer fix'i korunur). */
html:not([data-bs-theme="dark"]) .hg-footer .hg-foot-link,
html:not([data-bs-theme="dark"]) .hg-footer .hg-foot-label,
html:not([data-bs-theme="dark"]) .hg-footer .hg-foot-intro,
html:not([data-bs-theme="dark"]) .hg-footer p.mb-0.fs-14.hg-foot-copy{ color:#475569 !important; }

/* === AI-CHAT-0628w (WHMCS): site Base.astro widget'inin CSS aynasi ===
 * Trigger HTML'i ana-site header fragment'inden (hgSiteHeader) gelir; panel HTML'i + JS +
 * recaptcha-gate footer.tpl'e eklenir. Burada SADECE gorsel kurallar. data-bs-theme=dark uyumlu.
 * Site referansi: site/src/layouts/Base.astro ~764-852. */
.hg-aichat-ring { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; padding: 2px; isolation: isolate; flex: 0 0 auto; }
.hg-aichat-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #761098, #c084f5, #ff5fd2, #c084f5, #761098);
  animation: hgAichatSpin 3.2s linear infinite;
}
.hg-aichat-ring::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; z-index: -1;
  background: var(--bs-body-bg, #fff);
}
.hg-aichat-trigger {
  appearance: none; border: 0; padding: 0; cursor: pointer; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; color: #761098;
  background: transparent; transition: transform .15s ease, color .15s ease;
}
.hg-aichat-trigger:hover { transform: scale(1.06); color: #c084f5; }
.hg-aichat-trigger:focus-visible { outline: 2px solid #c084f5; outline-offset: 2px; }
.hg-aichat-trigger__icon { font-size: 19px; line-height: 1; }
html[data-bs-theme="dark"] .hg-aichat-trigger { color: #d8b4fe; }
html[data-bs-theme="dark"] .hg-aichat-trigger:hover { color: #c084f5; }
@keyframes hgAichatSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hg-aichat-ring::before { animation: none; } }

/* Gorunur "AI'ye Sor" yazi etiketi (footer JS, trigger'in YANINA enjekte eder). */
.hg-aichat-cta { display: inline-flex; align-items: center; gap: .45rem; }
.hg-aichat-cta__label {
  font-weight: 600; font-size: .82rem; line-height: 1; white-space: nowrap; cursor: pointer;
  color: #761098; user-select: none;
}
.hg-aichat-cta__label:hover { color: #c084f5; }
html[data-bs-theme="dark"] .hg-aichat-cta__label { color: #d8b4fe; }
html[data-bs-theme="dark"] .hg-aichat-cta__label:hover { color: #c084f5; }
@media (max-width: 575.98px) { .hg-aichat-cta__label { display: none; } }

/* === Panel — profesyonel (site Base.astro ile AYNI). Marka #761098 → #c084f5. === */
.hg-aichat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 1090; width: 384px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column;
  background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #1f2937);
  border: 1px solid rgba(118,16,152,.14); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 80px -12px rgba(76,10,99,.42), 0 8px 24px rgba(15,23,42,.14);
  opacity: 0; transform: translateY(24px) scale(.96); transform-origin: bottom right;
  transition: opacity .26s cubic-bezier(.16,1,.3,1), transform .26s cubic-bezier(.16,1,.3,1); pointer-events: none;
}
.hg-aichat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
html[data-bs-theme="dark"] .hg-aichat-panel { background: #14101c; border-color: rgba(192,132,245,.22); box-shadow: 0 30px 80px -12px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .hg-aichat-panel { transition: opacity .2s ease; transform: none !important; } }

/* Header */
.hg-aichat-panel__head {
  position: relative; display: flex; align-items: center; gap: .7rem; padding: .95rem 1.05rem; flex: 0 0 auto;
  background: linear-gradient(125deg, #5e0c7d 0%, #761098 45%, #a855f7 100%); color: #fff;
}
.hg-aichat-panel__head::after {
  content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none;
}
.hg-aichat-panel__avatar {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.hg-aichat-panel__avatar-ico { font-size: 21px; line-height: 1; color: #fff; }
.hg-aichat-panel__dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #761098; }
.hg-aichat-panel__head-txt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.hg-aichat-panel__title { font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: .1px; }
.hg-aichat-panel__status { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 500; color: rgba(255,255,255,.85); }
.hg-aichat-panel__status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: hgAichatPulse 2s infinite; }
@keyframes hgAichatPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); } 70% { box-shadow: 0 0 0 6px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.hg-aichat-panel__close {
  position: relative; appearance: none; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 19px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0; width: 30px; height: 30px; border-radius: 50%;
  flex: 0 0 auto; transition: background .15s ease, transform .15s ease;
}
.hg-aichat-panel__close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }

/* Mesaj alanı */
.hg-aichat-panel__body {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 1.1rem 1rem .6rem; display: flex; flex-direction: column; gap: .8rem;
  background: linear-gradient(180deg, rgba(118,16,152,.035), transparent 120px);
  scrollbar-width: thin; scrollbar-color: rgba(118,16,152,.3) transparent;
}
html[data-bs-theme="dark"] .hg-aichat-panel__body { background: linear-gradient(180deg, rgba(192,132,245,.06), transparent 120px); }
.hg-aichat-panel__body::-webkit-scrollbar { width: 6px; }
.hg-aichat-panel__body::-webkit-scrollbar-thumb { background: rgba(118,16,152,.28); border-radius: 999px; }
.hg-aichat-msg { display: flex; align-items: flex-end; gap: .5rem; max-width: 100%; animation: hgAichatMsgIn .3s cubic-bezier(.16,1,.3,1) both; }
.hg-aichat-msg--bot { align-self: flex-start; max-width: 92%; }
.hg-aichat-msg--user { align-self: flex-end; max-width: 88%; flex-direction: row-reverse; }
@keyframes hgAichatMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hg-aichat-msg { animation: none; } }
.hg-aichat-ava {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #761098, #c084f5); box-shadow: 0 2px 6px rgba(118,16,152,.3); margin-bottom: 1px;
}
.hg-aichat-msg--user .hg-aichat-ava { display: none; }
.hg-aichat-bubble {
  display: inline-block; padding: .6rem .85rem; border-radius: 16px; font-size: .9rem; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.hg-aichat-msg--bot .hg-aichat-bubble { background: #fff; color: #1f2937; border: 1px solid rgba(118,16,152,.1); border-bottom-left-radius: 5px; }
.hg-aichat-msg--user .hg-aichat-bubble { background: linear-gradient(125deg, #761098, #a855f7); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 3px 10px rgba(118,16,152,.28); }
html[data-bs-theme="dark"] .hg-aichat-msg--bot .hg-aichat-bubble { background: #221a30; color: #f3f4f6; border-color: rgba(192,132,245,.18); }
.hg-aichat-bubble a { color: #761098; font-weight: 600; text-decoration: underline; word-break: break-all; }
.hg-aichat-msg--user .hg-aichat-bubble a { color: #fff; }
html[data-bs-theme="dark"] .hg-aichat-bubble a { color: #d8b4fe; }
.hg-aichat-bubble strong { font-weight: 700; }

/* Önerilen link butonları */
.hg-aichat-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.hg-aichat-link {
  display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .8rem; font-size: .82rem; font-weight: 600;
  text-decoration: none; border-radius: 999px; border: 1px solid rgba(118,16,152,.3); color: #761098;
  background: rgba(118,16,152,.04); transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hg-aichat-link:hover { background: rgba(118,16,152,.12); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(118,16,152,.18); }
html[data-bs-theme="dark"] .hg-aichat-link { border-color: rgba(192,132,245,.4); color: #d8b4fe; background: rgba(192,132,245,.08); }
html[data-bs-theme="dark"] .hg-aichat-link:hover { background: rgba(192,132,245,.18); }

/* Öneri çipleri */
.hg-aichat-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .1rem 0 .2rem 36px; }
.hg-aichat-chips.is-hidden { display: none; }
.hg-aichat-chip {
  appearance: none; cursor: pointer; font-family: inherit; padding: .5rem .85rem; font-size: .83rem; font-weight: 600;
  border-radius: 999px; border: 1px solid rgba(118,16,152,.28); color: #761098; background: #fff;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease; line-height: 1.2;
}
.hg-aichat-chip:hover { background: linear-gradient(125deg, #761098, #a855f7); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(118,16,152,.28); }
.hg-aichat-chip:focus-visible { outline: 2px solid #c084f5; outline-offset: 2px; }
html[data-bs-theme="dark"] .hg-aichat-chip { background: #221a30; border-color: rgba(192,132,245,.32); color: #d8b4fe; }
html[data-bs-theme="dark"] .hg-aichat-chip:hover { background: linear-gradient(125deg, #761098, #a855f7); color: #fff; }

/* Yazıyor göstergesi */
.hg-aichat-typing { display: inline-flex; align-items: center; gap: 5px; padding: .7rem .9rem; }
.hg-aichat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #c084f5; opacity: .6; animation: hgAichatBlink 1.2s infinite both; }
.hg-aichat-typing span:nth-child(2) { animation-delay: .2s; }
.hg-aichat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes hgAichatBlink { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Input alanı */
.hg-aichat-panel__form { flex: 0 0 auto; display: flex; flex-direction: column; gap: .35rem; padding: .7rem .85rem .8rem; border-top: 1px solid rgba(118,16,152,.1); background: var(--bs-body-bg, #fff); }
html[data-bs-theme="dark"] .hg-aichat-panel__form { border-top-color: rgba(192,132,245,.16); background: #14101c; }
.hg-aichat-inputwrap {
  display: flex; align-items: center; gap: .4rem; border: 1.5px solid rgba(118,16,152,.22); border-radius: 999px;
  padding: .25rem .25rem .25rem .3rem; background: var(--bs-body-bg, #fff); transition: border-color .15s ease, box-shadow .15s ease;
}
.hg-aichat-inputwrap:focus-within { border-color: #c084f5; box-shadow: 0 0 0 4px rgba(192,132,245,.16); }
html[data-bs-theme="dark"] .hg-aichat-inputwrap { background: rgba(255,255,255,.03); border-color: rgba(192,132,245,.26); }
.hg-aichat-input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: .5rem .35rem .5rem .65rem;
  font-size: .92rem; color: var(--bs-body-color, #1f2937); outline: none; font-family: inherit;
}
html[data-bs-theme="dark"] .hg-aichat-input { color: #f3f4f6; }
.hg-aichat-input::placeholder { color: #9ca3af; }
.hg-aichat-send {
  flex: 0 0 auto; appearance: none; border: 0; cursor: pointer; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 17px;
  background: linear-gradient(125deg, #761098, #a855f7); transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(118,16,152,.32);
}
.hg-aichat-send:hover { transform: scale(1.08) rotate(8deg); box-shadow: 0 4px 14px rgba(118,16,152,.45); }
.hg-aichat-send:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.hg-aichat-send__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hg-aichat-foot { display: block; text-align: center; font-size: .68rem; color: #9ca3af; line-height: 1.2; }
html[data-bs-theme="dark"] .hg-aichat-foot { color: #6b7280; }

/* Responsive */
@media (max-width: 575.98px) {
  .hg-aichat-panel { right: 0; left: 0; bottom: 0; top: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; transform-origin: center bottom; }
  .hg-aichat-chips { margin-left: 36px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .hg-aichat-panel { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
}


/* === Refik 0628: bozuk AI-widget + reCAPTCHA rozeti KOMPLE GİZLE === */
.grecaptcha-badge{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
/* WHMCS AI-widget: temiz STATİK neon kenarlık (dönen-palet DEĞİL), açık iç */
.hg-aichat-ring--pill{position:relative;display:inline-grid!important;place-items:center;width:auto!important;height:34px!important;border-radius:999px!important;padding:1.5px!important;isolation:isolate;visibility:visible!important}
.hg-aichat-ring--pill::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;animation:none!important;background:linear-gradient(110deg,#761098,#c084f5,#ff5fd2,#c084f5,#761098)!important}
.hg-aichat-ring--pill::after{content:"";position:absolute;inset:1.5px;border-radius:inherit;z-index:-1;background:#fff}
[data-bs-theme=dark] .hg-aichat-ring--pill::after{background:#1a1a2e}
.hg-aichat-trigger--pill{display:inline-flex!important;align-items:center;gap:.4rem;padding:0 .8rem 0 .6rem;border:0;background:transparent;color:#761098;cursor:pointer;height:31px;border-radius:999px;white-space:nowrap;visibility:visible!important}
[data-bs-theme=dark] .hg-aichat-trigger--pill{color:#d8b4fe}
.hg-aichat-trigger__icon{font-size:15px}
.hg-aichat-trigger__label{font-size:.85rem;font-weight:700;line-height:1}
/* WHMCS AI pill = site ile AYNI: butonu width:auto yap (base width:34px daire kuralını yen) → text sığar */
.hg-aichat-ring--pill{width:auto!important;min-width:-moz-max-content!important;min-width:max-content!important;height:34px!important;border-radius:999px!important;display:inline-grid!important}
.hg-aichat-trigger--pill{width:auto!important;min-width:-moz-max-content!important;min-width:max-content!important;height:31px!important;border-radius:999px!important;display:inline-flex!important;align-items:center;gap:.4rem;padding:0 .8rem 0 .6rem!important;white-space:nowrap!important}
.hg-aichat-trigger--pill .hg-aichat-trigger__label{display:inline!important;white-space:nowrap!important;color:#761098}
[data-bs-theme=dark] .hg-aichat-trigger--pill .hg-aichat-trigger__label{color:#d8b4fe}

/* ============================================================
 * 2026-06-29 PANEL DENETİMİ (opus-4-8) — MÜŞTERİ PANELİ KONTRAST ONARIMI
 * Refik: "yazı belli olmuyor". Bulgular (computed renk + iki-tema screenshot,
 * masaüstü 1300 + mobil 390; supporttickets/submitticket/emails/announcements):
 *   1) .btn-info ("Mesajı Görüntüle" 7x e-postalar): beyaz metin (#fcfcfd)
 *      parlak camgöbeği zeminde (rgb(0,196,253)) -> kontrast 1.99 (HER TEMA).
 *   2) DARK .text-muted (submitticket departman açıklamaları): rgb(97,106,114)
 *      koyu kart üstünde -> kontrast 3.07 (silik gri-üstüne-koyu).
 *   3) LIGHT tablo başlıkları th (.sorting): rgb(138,147,165) beyaz üstünde
 *      -> 3.09 (küçük kalın uppercase, sınırda).
 * Yalnız müşteri-paneli kapsamı; markup/CTA'ya dokunulmadı. ============================================================ */

/* 1) Bilgi (info) butonları — beyaz-üstüne-parlak-camgöbeği okunmuyor.
 *    Zemini koyulaştır (#0a6e8f) -> beyaz metinle kontrast ~4.8 (AA).
 *    Hem light hem dark; .btn-info ve WHMCS .btn.btn-info varyantları. */
html body .btn-info,
html body a.btn-info,
html body button.btn-info,
html body input.btn-info {
  background-color:#0a7ea3 !important;
  border-color:#0a7ea3 !important;
  color:#ffffff !important;
}
html body .btn-info:hover,
html body .btn-info:focus,
html body a.btn-info:hover,
html body button.btn-info:hover {
  background-color:#086384 !important;
  border-color:#086384 !important;
  color:#ffffff !important;
}

/* 2) DARK .text-muted — silik gri açıklama metinleri okunabilir gri-mor.
 *    Sadece dark; light .text-muted (rs/scaleway dahil) etkilenmez. */
html[data-bs-theme="dark"] #main-body .text-muted,
html[data-bs-theme="dark"] .primary-content .text-muted,
html[data-bs-theme="dark"] .card .text-muted {
  color:#a9a9c2 !important;
}

/* 3) LIGHT tablo başlıkları (DataTables sorting th) — silik gri (#8a93a5=--mo-th,
 *    kontrast 3.09) -> koyu slate. Tema kuralı
 *    `body.primary-bg-color #main-body table.dataTable thead th{color:var(--mo-th)!important}`
 *    daha spesifik+!important; AYNI selector kalıbı + light-guard ile yenilir.
 *    Dark tema kendi #f0eaff kuralını korur (bu blok light-only). */
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .table:not(.invoice-items-table) thead th,
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .table-list thead th,
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body table.dataTable thead th {
  color:#4a5168 !important;
}

/* === NX-WELCOME-CONTRAST-0629 (Refik: "hoş geldiniz yazısı belli OLMUYOR") ===
 * KÖK: clientareahome.tpl .hg-dash-hero MOR/MAGENTA gradient zemin (#761098→#b13bd0)
 * üzerinde renk:#fff verir, AMA tema-genel `#main-body h2{color:var(--hg-ink)}`
 * (whmcs-unify.css, özgüllük 1,0,1) <h2.hg-dash-hero__t>'yi #0f172a (slate-900, neredeyse
 * SİYAH) yapıp inherited beyazı eziyor → başlık mor zeminde 1.95–3.75:1 kontrast = OKUNMUYOR.
 * Alt-satır (.hg-dash-hero__s) <div> olduğu için beyazı koruyordu, başlık (<h2>) eziliyordu.
 * FIX: hero başlığını + iconify ikonunu zorla BEYAZ. ID-kapsamlı seçici (#main-body) tema
 * kuralını yener; sadece bu gradient karta dokunur. Beyaz, dark gradient'te de yüksek
 * kontrast (9.14:1) olduğu için tema-koşulsuz. Light: 4.77–9.14:1, Dark: aynı (sorun yoktu). */
#main-body .hg-dash-hero .hg-dash-hero__t,
#main-body .hg-dash-hero .hg-dash-hero__t iconify-icon,
html[data-bs-theme="dark"] #main-body .hg-dash-hero .hg-dash-hero__t,
html[data-bs-theme="dark"] #main-body .hg-dash-hero .hg-dash-hero__t iconify-icon{
  color:#ffffff !important;
}

/* === NX-DARK-RESELLER-0629 (productdetails "Yönet" reseller modülü DARK uyumu) ===
 * Sorun: /clientarea.php?action=productdetails reseller modülü (modules/servers/reseller/
 * reseller.css) TÜM yüzeyleri hard-coded ACIK renkle kuruyor (#fff kart, #f7f8fc tablo-basligi,
 * #999/#666/#333 ink) ve [data-bs-theme=dark] override'i YOK -> koyu temada modul beyaz adacik
 * kalivor; OZELLIKLE "Mevcut Hosting Hesaplari" tablo-BASLIGI (#666 ink / #f7f8fc strip) koyu
 * panel icinde NEREDEYSE GORUNMEZ (Refik "yazi belli olmuyor" sinifi kontrast hatasi). reseller.css
 * head'den SONRA <body>'de enjekte edildigi icin html[data-bs-theme=dark] (0,1,1) + gereken yerde
 * !important ile guvenli override. Palet site dark token'lariyla ayni: #1c1d2b/#23243a/#2d2f42/
 * #fff/#b9bcca. Marka mor #d9b8f5. SADECE custom.css; reseller.css'e/markup'a DOKUNULMADI. */
html[data-bs-theme="dark"] .rs-card,
html[data-bs-theme="dark"] .rs-stat-card,
html[data-bs-theme="dark"] .rs-panel-card{
  background:#1c1d2b !important;
  border-color:#2d2f42 !important;
}
html[data-bs-theme="dark"] .rs-panel{
  background:#23243a !important;
  border-color:#2d2f42 !important;
}
html[data-bs-theme="dark"] .rs-card-header{
  background:linear-gradient(90deg,#23243a,#1f2033) !important;
  border-bottom-color:#2d2f42 !important;
  color:#f0eaff !important;
}
html[data-bs-theme="dark"] .rs-stat-value,
html[data-bs-theme="dark"] .rs-pkg-name,
html[data-bs-theme="dark"] .rs-domain-cell{ color:#fff !important; }
html[data-bs-theme="dark"] .rs-stat-label,
html[data-bs-theme="dark"] .rs-pkg-platform,
html[data-bs-theme="dark"] .rs-pkg-card-desc{ color:#b9bcca !important; }
html[data-bs-theme="dark"] .rs-pkg-card-desc{ border-top-color:#2d2f42 !important; }
html[data-bs-theme="dark"] .rs-label{ color:#d9b8f5 !important; }
html[data-bs-theme="dark"] .rs-input,
html[data-bs-theme="dark"] .rs-domain-input,
html[data-bs-theme="dark"] .rs-field-input{
  background:#23243a !important;
  border-color:#2d2f42 !important;
  color:#fff !important;
}
html[data-bs-theme="dark"] .rs-table thead tr{
  background:#23243a !important;
  border-bottom-color:#3a3c52 !important;
}
html[data-bs-theme="dark"] .rs-table thead th{ color:#cfd2da !important; }
html[data-bs-theme="dark"] .rs-table tbody tr{ border-bottom-color:#2d2f42 !important; }
html[data-bs-theme="dark"] .rs-table tbody tr:hover:not(.rs-detail-row){ background:#23243a !important; }
html[data-bs-theme="dark"] .rs-table tbody td{ color:#e6e8ef !important; }
html[data-bs-theme="dark"] .rs-id{ background:#2a2238 !important; color:#d9b8f5 !important; }
html[data-bs-theme="dark"] .rs-ip-box{ background:#16251c !important; border-color:#264a33 !important; }
html[data-bs-theme="dark"] .rs-copy-icon{ background:#23243a !important; border-color:#2d2f42 !important; }
html[data-bs-theme="dark"] .rs-modal{ background:#1c1d2b !important; }
html[data-bs-theme="dark"] .rs-pkg-card{ background:#1c1d2b !important; border-color:#2d2f42 !important; }

/* === NX-DOMAIN-STATUS-PILL-0630 (clientarea.php?action=domains "Aktif" rozeti) ===
 * Domain liste durum rozeti (.hg-dm-st.status-active) yesil metin rgb(22,163,74)
 * acik-yesil zemin rgb(220,252,231) uzerinde ~3.00:1 (AA 4.5 alti, kucuk 12px metin).
 * Ayrica KOYU temada rozet acik-yesil zeminini koruyup koyu satirda parlak ada gibi
 * duruyor (gorsel tutarsizlik). FIX: (a) LIGHT'ta yesil metni koyulastir (#0f7a37 ~
 * 4.6:1 acik-yesil zemin uzerinde) — zemin DEGISMEZ. (b) DARK'ta rozete koyu-temali
 * yuzey ver (~6:1), satirla uyumlu. Sadece active/yesil rozet; markup/CTA dokunulmadi.
 * NOT: tema kurali `body.primary-bg-color #main-body .status-active` (ozgulluk 1,3,1,
 * ID iceriyor) yesil metin+zemini kuruyor; o yuzden secici #main-body ile ID tasimali. */
html body.primary-bg-color #main-body .hg-dm-st.status-active,
html body.primary-bg-color #main-body .hg-dm-ar.status-active,
html body #main-body .hg-dm-st.status-active,
html body #main-body .hg-dm-ar.status-active{ color:#0f7a37 !important; }
html[data-bs-theme="dark"] body.primary-bg-color #main-body .hg-dm-st.status-active,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .hg-dm-ar.status-active,
html[data-bs-theme="dark"] #main-body .hg-dm-st.status-active,
html[data-bs-theme="dark"] #main-body .hg-dm-ar.status-active{
  background:#13361f !important;
  color:#5fdc8e !important;
  border-color:#1f5c36 !important;
}

/* === NX-ADDFUNDS-FOOTNOTE-0630 (clientarea.php?action=addfunds LIGHT dipnot) ===
 * Odeme formu altindaki "* Eklenen bakiye iade edilemez" dipnotu LIGHT temada
 * gri rgb(97,106,114), soluk-gri panel zemini uzerinde ~3.81:1 (AA 4.5 alti).
 * DARK zaten gecer (14.12:1) -> sadece LIGHT'i koyulastir (#55606b ~4.6:1).
 * GERCEK markup: bare <small> .card .card-footer icinde (class YOK), ayrica olasi
 * .text-muted varyantlari. Yalnizca odeme karti dipnotu; placeholder/CTA etkisiz. */
html:not([data-bs-theme="dark"]) body #main-body .card .card-footer small,
html:not([data-bs-theme="dark"]) body #main-body .card .card-footer,
html:not([data-bs-theme="dark"]) body #main-body .card .panel-footer,
html:not([data-bs-theme="dark"]) body #main-body .card .text-muted{ color:#55606b !important; }

/* === NX-ACCT-WELCOME-CONTRAST-0630 (Refik: "hoş geldiniz yazısı belli OLMUYOR") ===
 * KÖK (önceki pass'in kaçırdığı 2. "Hoş geldiniz"): site-geneli HEADER hesap açılır
 * menüsündeki (.hg-acct__menu) "HOŞ GELDİNİZ" üst-etiketi (.hg-acct__hi). Renk
 * rgb(148,163,184) = slate-400, beyaz menü zemini (#fff) üzerinde sadece 2.56:1 →
 * AA 4.5 ALTI, soluk/okunmuyor. Bu menü HER panel sayfasında var ve dropdown DARK
 * temada da beyaz kalıyor (probe + ekran-görüntüsü doğruladı) → tek koyu-slate her
 * iki temada da geçerli. Önceki WT-3 kuralı sadece font-size'ı düzeltmişti, RENGE
 * dokunmamıştı. FIX: slate-700 #475569 → beyaz üzerinde 7.58:1 (AA+AAA), panelde
 * zaten kullanılan slate ailesiyle uyumlu. Sadece bu hesap-menü etiketi; CTA/menü
 * linkleri (zaten 10.35:1) ve "George Turner" adı (17.85:1) DOKUNULMADI.
 * brand-css custom.css'ten SONRA yüklendiği için html body + !important ile yener. */
html body .hg-acct__hi,
html[data-bs-theme="dark"] body .hg-acct__hi{ color:#475569 !important; }

/* ============================================================================
 * NX-WHMCS-ALLPAGES-0630 — panel görsel denetimi düzeltmeleri (TEK YAZICI)
 * Probe (Playwright + SSO login, client_id=1) ile ÖNCE/SONRA kontrast ölçüldü.
 * Sadece custom.css; markup/.tpl/PHP DOKUNULMADI. Tema override'ları
 * [data-bs-theme=dark] ile scope'lu. CTA/fiyat display:none YAPILMADI.
 * ==========================================================================*/

/* --- HIGH-1: serverstatus.php DARK — beyaz-ada kartlar + görünmez etiket ----
 * KÖK: serverstatus kartları (.hg-ss-item/.hg-ss-server/.hg-ss-loc/.hg-ss-legend/
 * .hg-ss-empty) DARK temada beyaz zemin (rgb(255,255,255)) koruyor; içlerindeki
 * etiket (.hg-ss-item__name vb.) near-white rgb(233,236,239) -> KONTRAST 1.19:1
 * (probe doğruladı, 42 kart). #hg-status kapsamlı scoped serverstatus.css'in
 * dark-override'ı YOK; custom.css panelde sonra yüklendiğinden #hg-status ile
 * eşit/yüksek özgüllük + !important ile yenilir. FIX: kart yüzeyini koyu panel
 * rengine (#23243a, hg-dm-bulk dark ile aynı), kenarı #2d2f42, metni #e9ecef'e
 * çek (->14.6:1). Banner zaten yeşil; pill'lere dokunulmadı. */
html[data-bs-theme="dark"] #hg-status .hg-ss-item,
html[data-bs-theme="dark"] #hg-status .hg-ss-server,
html[data-bs-theme="dark"] #hg-status .hg-ss-loc,
html[data-bs-theme="dark"] #hg-status .hg-ss-legend,
html[data-bs-theme="dark"] #hg-status .hg-ss-empty{
  background:#23243a !important;
  border-color:#2d2f42 !important;
}
html[data-bs-theme="dark"] #hg-status .hg-ss-item__name,
html[data-bs-theme="dark"] #hg-status .hg-ss-server__name,
html[data-bs-theme="dark"] #hg-status .hg-ss-server__host,
html[data-bs-theme="dark"] #hg-status .hg-ss-server__id,
html[data-bs-theme="dark"] #hg-status .hg-ss-server__uptime,
html[data-bs-theme="dark"] #hg-status .hg-ss-loc__city,
html[data-bs-theme="dark"] #hg-status .hg-ss-loc__cc,
html[data-bs-theme="dark"] #hg-status .hg-ss-empty__title,
html[data-bs-theme="dark"] #hg-status .hg-ss-legend{
  color:#e9ecef !important;
}
html[data-bs-theme="dark"] #hg-status .hg-ss-empty__sub{ color:#b9bcca !important; }
/* server uptime bar trough koyu yüzeyde görünür kalsın */
html[data-bs-theme="dark"] #hg-status .hg-ss-server__meter{ background:#15161f !important; }

/* --- HIGH-2: viewinvoice.php DARK — siyah logo wordmark görünmez ------------
 * KÖK: fatura başlığındaki marka logosu logo-siyah.png (siyah wordmark) DARK
 * temada koyu kart (rgb(27,27,46)) üzerinde ~1.1:1 (probe + ekran-görüntüsü).
 * Dragon maskotu renkli görünüyor, sadece "HOSTRAGONS" wordmark'ı kayboluyor.
 * FIX: DARK'ta fatura logosuna invert+hue-rotate uygula -> siyah wordmark beyaza
 * döner, maskotun hue'su yaklaşık korunur (mor mor kalır). Yalnız fatura-başlık
 * <img>; light tema etkilenmez. Markup tek PNG olduğundan filtre en az-müdahale. */
html[data-bs-theme="dark"] .invoice-container .invoice-header img,
html[data-bs-theme="dark"] .invoice .invoice-header img{
  filter:invert(1) hue-rotate(180deg) !important;
}

/* --- HIGH-3: submitticket step2 DARK — markdown toolbar/footer beyaz-ada -----
 * KÖK: WHMCS bootstrap-markdown editörünün GÖVDESİ (.markdown-editor textarea)
 * theme ile koyuya geçiyor (13:1, OK) ama TOOLBAR (.md-header.btn-toolbar) beyaz
 * rgb(255,255,255), ALT-ÇUBUK (.md-footer) açık-gri rgb(245,245,245) kalıyor —
 * koyu kart içinde parlak ada. Ayrıca .markdown-save ("kaydedildi") açık-gri
 * çubukta rgb(149,150,148) -> 2.73:1. FIX: header/footer'a koyu yüzey, sınır ve
 * metin ver; içerideki ikon/buton metnini aç. Editör gövdesine dokunulmadı. */
html[data-bs-theme="dark"] .md-header.btn-toolbar,
html[data-bs-theme="dark"] .md-footer{
  background:#23243a !important;
  border-color:#2d2f42 !important;
  color:#cfd2da !important;
}
html[data-bs-theme="dark"] .md-header.btn-toolbar .btn,
html[data-bs-theme="dark"] .md-header.btn-toolbar a,
html[data-bs-theme="dark"] .md-header.btn-toolbar i,
html[data-bs-theme="dark"] .md-footer,
html[data-bs-theme="dark"] .md-footer .markdown-save{
  color:#cfd2da !important;
}
html[data-bs-theme="dark"] .md-header.btn-toolbar .btn{
  background:transparent !important;
  border-color:#3a3c52 !important;
}

/* Public registration: keep the form column and its controls on dark surfaces. */
html[data-bs-theme="dark"] body #main-body .hg-auth-split,
html[data-bs-theme="dark"] body #main-body .hg-auth-formwrap,
html[data-bs-theme="dark"] body #main-body .hg-auth-formwrap--wide{
  background:#14151f !important;
  border-color:#2d2f42 !important;
}
html[data-bs-theme="dark"] body #main-body .hg-auth-head .hg-auth-title,
html[data-bs-theme="dark"] body #main-body .hg-auth-split #registration .hg-grp-title{
  color:#f0eaff !important;
}
html[data-bs-theme="dark"] body #main-body .hg-auth-head .text-muted,
html[data-bs-theme="dark"] body #main-body .hg-auth-split .form-check,
html[data-bs-theme="dark"] body #main-body .hg-auth-split .hg-auth-secure{
  color:#cfd2da !important;
}
html[data-bs-theme="dark"] body #main-body .hg-auth-split input.field,
html[data-bs-theme="dark"] body #main-body .hg-auth-split select.field{
  background:#23243a !important;
  border-color:#4a4c68 !important;
  color:#ececf6 !important;
}
html[data-bs-theme="dark"] body #main-body .hg-auth-split input.field::placeholder{
  color:#aeb1c2 !important;
}
html[data-bs-theme="dark"] body #main-body .hg-auth-split .form-check a{
  color:#e2bdf7 !important;
}
html body #main-body .hg-auth-split .form-check a{
  text-decoration:underline !important;
  text-underline-offset:2px;
}

/* Bootstrap Markdown footer text was too light in the light theme. */
html:not([data-bs-theme="dark"]) .md-footer .small-font,
html:not([data-bs-theme="dark"]) .md-footer .markdown-save{
  color:#596170 !important;
}

/* --- HIGH-4: submitticket step2 DARK — "Dosya seç" file-input beyaz-ada ------
 * KÖK: Bootstrap custom-file-label DARK temada beyaz rgb(255,255,255) kalıyor,
 * içindeki "Dosya seç" placeholder açık-mor rgb(191,179,217) -> 1.97:1 (probe,
 * 2 adet). FIX: koyu yüzey + açık metin (#e6e8ef ~12:1); ::after "Gözat" butonu
 * da koyu yüzeye çekildi. Yalnız eklenti file-label'ları; light tema etkisiz. */
html[data-bs-theme="dark"] .custom-file-label,
html[data-bs-theme="dark"] .custom-file-label.text-truncate{
  background:#23243a !important;
  border-color:#2d2f42 !important;
  color:#e6e8ef !important;
}
html[data-bs-theme="dark"] .custom-file-label::after{
  background:#2d2f42 !important;
  border-left-color:#3a3c52 !important;
  color:#e6e8ef !important;
}

/* --- MEDIUM-1: clientarea.php?action=domains DARK — "0 seçili" sayaç ---------
 * KÖK: .hg-dm-selcount (id #hgDmSelCount) DARK temada marka-moru #761098,
 * koyu bulk-panel rgb(35,36,58) üzerinde 1.66:1 (probe). LIGHT'ta açık panelde
 * mor okunur -> sadece DARK'ı düzelt: açık-mor #c9a9de (~5.5:1). class+id ile
 * 0,0,1,0 inline kuralı yenilir. Markup/sayaç metni dokunulmadı. */
html[data-bs-theme="dark"] .hg-dm-selcount,
html[data-bs-theme="dark"] #hgDmSelCount{ color:#c9a9de !important; }

/* --- MEDIUM-2: serverstatus.php LIGHT — yeşil "Çalışıyor" banner rozeti ------
 * KÖK: .hg-ss-banner__badge beyaz metin solid yeşil rgb(22,163,74) üzerinde
 * 3.3:1 (12.8px/700, AA 4.5 altı; probe). FIX: rozet zeminini koyulaştır
 * (#157f3c) -> beyaz metinle ~4.6:1, yeşil kimlik korunur. Sadece bu badge. */
html:not([data-bs-theme="dark"]) #hg-status .hg-ss-banner__badge{
  background:#157f3c !important;
  color:#fff !important;
}

/* --- LOW-1: productdetails/services LIGHT — soluk-gri satır etiketleri --------
 * KÖK: .hg-svc__lbl (Yinelenen miktar/Fatura Kesim Döngüsü/Ödeme şekli vb.) ve
 * eski .hgc-bill__l/.hg-rc-- etiketleri LIGHT'ta rgb(154,160,173) beyaz üzerinde
 * 2.62:1 (probe). FIX: LIGHT'ta slate-600 #5a6072 (~6.4:1). DARK zaten geçiyor
 * (6.35:1) -> dokunulmaz. Sadece etiket; değer metinleri etkilenmez. */
html:not([data-bs-theme="dark"]) .hg-svc__lbl,
html:not([data-bs-theme="dark"]) .hgc-bill__l,
html:not([data-bs-theme="dark"]) .hg-rc--main,
html:not([data-bs-theme="dark"]) .hg-rc--st{ color:#5a6072 !important; }

/* --- LOW-2: dashboard LIGHT — KPI alt-etiketleri + zaman damgaları -----------
 * KÖK: .hg-kpi__l (Hizmetler/Alan Adı/Faturalar...) rgb(138,144,157) beyaz
 * üzerinde 3.20:1; ticket "Son Güncelleme" small'ları rgb(136,136,136) -> 3.54:1
 * (probe). FIX: LIGHT'ta #5a6072 (~6.4:1) / small için #5d646e (~5:1). DARK
 * dokunulmaz. Sadece sub-label/timestamp; KPI sayıları (.hg-kpi__n) etkisiz. */
html:not([data-bs-theme="dark"]) .hg-kpi__l{ color:#5a6072 !important; }

/* --- LOW-3: serverstatus.php LIGHT — bölüm alt-başlıkları sınırda ------------
 * KÖK: .hg-ss-section__sub / .hg-ss-updated rgb(100,116,139) açık zemin
 * rgb(244,245,247) üzerinde 4.36:1 (AA 4.5'in hemen altı, probe). FIX: bir tık
 * koyu slate #55606b (~4.7:1). DARK zaten 7+ -> dokunulmaz. */
html:not([data-bs-theme="dark"]) #hg-status .hg-ss-section__sub,
html:not([data-bs-theme="dark"]) #hg-status .hg-ss-updated{ color:#55606b !important; }

/* --- LOW-4: clientarea.php?action=security — SSO toggle "ON" etiketi ----------
 * KÖK: bootstrap-switch success handle "ON" beyaz metin yeşil rgb(92,184,92)
 * üzerinde 2.48:1 (stok WHMCS bileşeni, probe). Her iki temada. FIX: yeşil
 * handle'ı koyulaştır (#358035) -> beyaz metinle 4.89:1 (AA geçer). İşlev/konum
 * değişmez; yeşil kimlik korunur. */
html .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{
  background:#358035 !important;
  color:#fff !important;
}

/* --- LOW-5: dark .hgc-bill defansif override (eski markup için, görünmezse zarar yok)
 * KÖK-NOT: orijinal bulgu .hgc-bill beyaz-zemin/beyaz-değer (white-on-white)
 * diyordu; CANLI markup .hg-svc__* yapısına geçmiş ve DARK'ta DOĞRU render
 * ediyor (probe: .hgc-bill 0 adet, .hg-svc__val 16.67:1). Yine de sınıf başka
 * sayfada belirirse diye DARK'ta tabloyu koyu yüzeye + değerleri açık metne pin'le. */
html[data-bs-theme="dark"] .hgc-bill{ background:#1c1d2b !important; border-color:#2d2f42 !important; }
html[data-bs-theme="dark"] .hgc-bill__v{ color:#fff !important; }
html[data-bs-theme="dark"] .hgc-bill__l{ color:#b9bcca !important; }

/* Authenticated client-area accessibility contrast refinements. */
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .hg-aff-balance,
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .hg-dm-ar.on{
  color:#0f7a37 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .hg-dm-ar.on{
  color:#5fdc8e !important;
}
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .hg-rc--amt small{
  color:#5f6673 !important;
}
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .hg-sv-id a{
  color:#596170 !important;
}
html body.primary-bg-color #main-body .hg-sv-st.status-active{
  background:#dcfce7 !important;
  color:#0f6b32 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .hg-sv-st.status-active{
  background:#13361f !important;
  color:#5fdc8e !important;
}
html body.primary-bg-color #main-body .status-paid,
html body.primary-bg-color #main-body .status-paid .textgreen{
  color:#0f6b32 !important;
}
html body.primary-bg-color #main-body .status-unpaid,
html body.primary-bg-color #main-body .status-unpaid .textred{
  color:#991b1b !important;
}
html body.primary-bg-color #main-body .div-service-status .label-success{
  background:#087a35 !important;
  color:#fff !important;
}
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body [id^="ClientAreaHomePagePanels-Recent_Support_Tickets-"] > label{
  background:#596170 !important;
  color:#fff !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body [id^="ClientAreaHomePagePanels-Recent_Support_Tickets-"] > label{
  background:#4b5260 !important;
  color:#fff !important;
}
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body [id^="ClientAreaHomePagePanels-Recent_Support_Tickets-"] > small{
  color:#5f6673 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body [id^="ClientAreaHomePagePanels-Recent_Support_Tickets-"] > small{
  color:#cfd2da !important;
}
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .selected-dial-code{
  color:#3f4752 !important;
}

/* Detail-page accessibility: domain, service, invoice and ticket surfaces. */
html body.primary-bg-color #main-body .hg-dd-action .hg-dd-actlabel{
  color:inherit !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .hg-dd-action .hg-dd-actlabel{
  color:#e9d5f5 !important;
}
html body.primary-bg-color #main-body .hg-svc__badge.active{
  background:#dcfce7 !important;
  color:#0f6b32 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .hg-svc__badge.active{
  background:#13361f !important;
  color:#5fdc8e !important;
}
html body.primary-bg-color #main-body .hg-svc__btn--up{
  background:#0f7a37 !important;
  color:#fff !important;
}
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .rs-stat-label{
  color:#5f6673 !important;
}
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .rs-id{
  color:#4f5663 !important;
}
html body.primary-bg-color #main-body .rs-badge-success{
  background:#dcfce7 !important;
  color:#0f6b32 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .rs-badge-success{
  background:#13361f !important;
  color:#5fdc8e !important;
}
html:not([data-bs-theme="dark"]) body.primary-bg-color #main-body .rs-toggle-detail{
  color:#2859c5 !important;
  border-color:#2859c5 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .rs-toggle-detail{
  background:#23243a !important;
  color:#a9c1ff !important;
  border-color:#7899ef !important;
}
html body.primary-bg-color #main-body .requestor-type-owner{
  background:#358035 !important;
  color:#fff !important;
}
html body.primary-bg-color #main-body #Primary_Sidebar-Ticket_Information-Priority > .label{
  background:#596170 !important;
  color:#fff !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply.markdown-content{
  background:#1c1d2b !important;
  border-color:#3a3c52 !important;
  color:#e6e8ef !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply.markdown-content.staff{
  background:#2a2238 !important;
  border-color:#6e3a82 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .posted-by{
  background:#23243a !important;
  color:#e6e8ef !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .message,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .message p,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .message li,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .message div,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .message span:not(.star){
  color:#e6e8ef !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .message a{
  color:#e2bdf7 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .posted-on,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .posted-on__suffix,
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .hg-staff-sig__team{
  color:#cfd2da !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .hg-staff-sig__name{
  color:#f0eaff !important;
}
html[data-bs-theme="dark"] body.primary-bg-color #main-body .ticket-reply .hg-staff-sig__badge{
  background:#4a2d5c !important;
  color:#f0eaff !important;
}

/* WHMCS dark mode must remain continuous through the shared site footer. */
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer{
  --hg-ink:#f1f5f9;
  --hg-muted:#b8c2d4;
  --bs-body-color:#dbe3ef;
  background:
    radial-gradient(circle at 8% 15%,rgba(118,16,152,.16),transparent 30rem),
    radial-gradient(circle at 92% 85%,rgba(191,11,144,.10),transparent 28rem),
    #10111a !important;
  color:#dbe3ef !important;
  border-top:1px solid rgba(255,255,255,.08);
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .hg-foot-top,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .hg-foot-top{
  border-bottom-color:rgba(255,255,255,.10) !important;
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .border-top,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .border-top{
  border-color:rgba(255,255,255,.10) !important;
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .hg-foot-h,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .hg-foot-h{
  color:#f8fafc !important;
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .hg-foot-intro,
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .hg-foot-label,
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .hg-foot-copy,
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer p.mb-0.fs-14,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .hg-foot-intro,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .hg-foot-label,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .hg-foot-copy,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer p.mb-0.fs-14{
  color:#b8c2d4 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .hg-foot-link,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .hg-foot-link{
  color:#c5cedc !important;
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .hg-foot-link:hover,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .hg-foot-link:hover{
  color:#e4b9f6 !important;
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .link.text-body,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .link.text-body{
  color:#c5cedc !important;
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .footer-logo,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .footer-logo{
  filter:brightness(0) invert(1);
}
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .footer-shape-1,
html[data-bs-theme="dark"] body.primary-bg-color .hg-footer .footer-shape-2,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .footer-shape-1,
html[data-bs-theme="dark"] body.hg-invoice-page .hg-footer .footer-shape-2{
  opacity:.08;
}