/* =====================================================================
   Toranj theme for WHMCS (child of Twenty-One)
   Medallion line work on a wool or night-indigo field.
   Saffron draws lines and figures; madder red means order or pay.
   ===================================================================== */

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations"), url("../fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/vazirmatn-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
    --tj-field: #f5f1e8;        /* wool */
    --tj-surface: #fbf9f4;
    --tj-sunk: #ece5d6;
    --tj-ink: #1a2350;          /* indigo */
    --tj-ink-2: #4a5378;
    --tj-ink-3: #5c6383;
    --tj-rule: #dcd2bd;
    --tj-rule-2: #c9bc9f;
    --tj-saffron: #b07a22;      /* lines, figures */
    --tj-saffron-text: #8a5c12; /* saffron that passes 4.5:1 on wool */
    --tj-saffron-soft: rgba(176, 122, 34, .14);
    --tj-madder: #a8322a;       /* order and pay only */
    --tj-madder-ink: #ffffff;
    --tj-ok: #2f6b4f;
    --tj-ok-soft: rgba(47, 107, 79, .12);
    --tj-warn: #8f5b0a;
    --tj-warn-soft: rgba(176, 122, 34, .14);
    --tj-bad: #9b2c25;
    --tj-bad-soft: rgba(168, 50, 42, .1);
    --tj-info-soft: rgba(26, 35, 80, .07);
    --tj-shadow: 0 1px 2px rgba(26, 35, 80, .06), 0 8px 24px -12px rgba(26, 35, 80, .18);
    --tj-radius: 10px;
    --tj-radius-sm: 7px;
    --tj-ease: cubic-bezier(.4, 1.3, .5, 1);
    --tj-out: cubic-bezier(.16, 1, .3, 1);
    --tj-font: "Figtree", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tj-gutter: max(16px, env(safe-area-inset-left, 0px));
    --tj-max: 1180px;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --tj-field: #11173a;        /* night indigo */
    --tj-surface: #171f4a;
    --tj-sunk: #0d1230;
    --tj-ink: #efe9dc;
    --tj-ink-2: #b6bbd3;
    --tj-ink-3: #8f95b3;
    --tj-rule: #28326a;
    --tj-rule-2: #3a4580;
    --tj-saffron: #d9a84e;
    --tj-saffron-text: #e2b764;
    --tj-saffron-soft: rgba(217, 168, 78, .14);
    --tj-madder: #c0453a;
    --tj-ok: #7cc4a0;
    --tj-ok-soft: rgba(124, 196, 160, .12);
    --tj-warn: #e2b764;
    --tj-warn-soft: rgba(217, 168, 78, .14);
    --tj-bad: #f0948b;
    --tj-bad-soft: rgba(240, 148, 139, .12);
    --tj-info-soft: rgba(239, 233, 220, .06);
    --tj-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -14px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
html[lang="fa"] { --tj-font: "Vazirmatn", system-ui, Tahoma, sans-serif; }

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body.tj,
body.tj .primary-bg-color {
    background: var(--tj-field);
    color: var(--tj-ink);
    font-family: var(--tj-font);
    font-size: 16px;
    line-height: 1.6;
    transition: background-color .35s, color .35s;
}
html[lang="fa"] body.tj { line-height: 1.85; }
body.tj h1, body.tj h2, body.tj h3, body.tj h4, body.tj h5, body.tj h6,
body.tj .h1, body.tj .h2, body.tj .h3, body.tj .h4, body.tj .h5, body.tj .h6 {
    color: var(--tj-ink);
    font-family: var(--tj-font);
    font-weight: 750;
    letter-spacing: -.01em;
    text-wrap: balance;
}
html[lang="fa"] body.tj h1, html[lang="fa"] body.tj h2, html[lang="fa"] body.tj h3,
html[lang="fa"] body.tj h4, html[lang="fa"] body.tj h5, html[lang="fa"] body.tj h6 { letter-spacing: 0; line-height: 1.5; }
body.tj a { color: var(--tj-ink); text-decoration-color: var(--tj-saffron); text-underline-offset: .22em; }
body.tj a:hover { color: var(--tj-saffron-text); }
body.tj ::selection { background: var(--tj-saffron); color: #fff; }
body.tj :focus-visible { outline: 2px solid var(--tj-saffron); outline-offset: 2px; }
body.tj .text-muted, body.tj small.text-muted { color: var(--tj-ink-3) !important; }
body.tj hr { border-color: var(--tj-rule); }
body.tj code { color: var(--tj-saffron-text); }
body.tj { scrollbar-color: var(--tj-rule-2) var(--tj-field); caret-color: var(--tj-saffron); }
body.tj .tj-num, body.tj table { font-variant-numeric: tabular-nums; }
body.tj .container { max-width: var(--tj-max); padding-left: var(--tj-gutter); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
[hidden] { display: none !important; }

/* ---------- admin bar ---------- */
.tj-adminbar { background: var(--tj-ink); text-align: center; font-size: 13px; }
.tj-adminbar a { display: inline-flex; gap: 8px; align-items: center; padding: 6px 16px; color: var(--tj-field) !important; text-decoration: none; }
.tj-adminbar svg { width: 16px; height: 16px; }

/* ---------- header ---------- */
.tj-head {
    position: sticky; top: 0; z-index: 1030;
    background: var(--tj-field);
    border-bottom: 1px solid var(--tj-rule);
    transition: background-color .35s, border-color .35s;
}
.tj-head__in {
    max-width: var(--tj-max); margin: 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px var(--tj-gutter);
    min-height: 64px;
}
.tj-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important; color: var(--tj-ink) !important; font-weight: 800; font-size: 21px; letter-spacing: .005em; flex: none; }
html[lang="fa"] .tj-logo { font-size: 23px; letter-spacing: 0; }
.tj-mark { width: 26px; height: 26px; color: var(--tj-saffron); transition: transform .9s var(--tj-ease); }
.tj-logo:hover .tj-mark { transform: rotate(45deg); }

.tj-nav { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.tj-nav__list { display: flex; flex-direction: row; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tj-nav__secondary { margin-inline-start: auto; }
.tj-nav__guest { display: none; }
.tj-scrim { display: none; }
@media (min-width: 1100px) { .tj-nav__secondary { display: none; } }
.tj-acct .dropdown-menu { margin-top: 8px; }
.tj-acct .tj-acct__home { font-weight: 700; color: var(--tj-ink) !important; }
.tj-nav .collapsable-dropdown { display: none !important; }
.tj-nav li > a {
    display: block; padding: 8px 12px !important; border-radius: var(--tj-radius-sm);
    color: var(--tj-ink-2) !important; font-weight: 600; font-size: 15px; text-decoration: none !important;
    transition: color .2s, background-color .2s;
}
.tj-nav li > a:hover, .tj-nav li.show > a { color: var(--tj-ink) !important; background: var(--tj-sunk); }
.tj-nav .dropdown-toggle::after { border: 0; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-inline-start: 8px; vertical-align: middle; transition: transform .25s; }
.tj-nav .show > .dropdown-toggle::after { transform: translateY(0) rotate(225deg); }

.tj-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex: none; }
.tj-ctl {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; min-width: 40px; padding: 0 10px;
    border: 1px solid var(--tj-rule); border-radius: var(--tj-radius-sm);
    background: var(--tj-surface); color: var(--tj-ink) !important;
    font: 700 14px/1 var(--tj-font); text-decoration: none !important; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s, background-color .35s, transform .15s;
}
.tj-ctl:hover { border-color: var(--tj-saffron); }
.tj-ctl:active { transform: scale(.95); }
.tj-ctl svg { width: 19px; height: 19px; flex: none; }

/* language: two buttons with a sliding marker */
.tj-lang { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 40px; width: 84px; padding: 3px; border: 1px solid var(--tj-rule); border-radius: var(--tj-radius-sm); background: var(--tj-surface); direction: ltr; flex: none; }
.tj-lang a { position: relative; z-index: 1; display: grid; place-items: center; font: 700 12.5px/1 "Figtree", system-ui, sans-serif; letter-spacing: .06em; color: var(--tj-ink-2) !important; text-decoration: none !important; border-radius: 5px; transition: color .3s; }
.tj-lang a[aria-current="true"] { color: var(--tj-field) !important; }
.tj-lang i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 5px; background: var(--tj-ink); transition: transform .42s var(--tj-ease); }
.tj-lang[data-cur="en"] i { transform: translateX(100%); }
.tj-lang:hover { border-color: var(--tj-saffron); }

/* colour scheme: sun, moon, auto */
.tj-mode { width: 40px; padding: 0; }
.tj-mode svg { overflow: visible; }
.tj-mode .rays { transform-origin: 12px 12px; transition: transform .55s var(--tj-ease), opacity .3s; }
.tj-mode .core { transition: r .45s var(--tj-ease), opacity .3s; }
.tj-mode .bite { transition: cx .5s var(--tj-ease), cy .5s var(--tj-ease); }
.tj-mode .rays-spin { transform-origin: 12px 12px; animation: tj-turn 30s linear infinite; }
.tj-mode .auto { opacity: 0; transform-origin: 12px 12px; transform: scale(.6) rotate(-90deg); transition: opacity .3s, transform .5s var(--tj-ease); }
.tj-mode .auto-badge { fill: var(--tj-surface); stroke: currentColor; stroke-width: 1.3; }
.tj-mode .auto text { fill: currentColor; font: 800 7px/1 "Figtree", system-ui, sans-serif; }
.tj-mode .star { opacity: 0; transition: opacity .3s .2s; }
[data-theme-pref="light"] .tj-mode .rays { animation: tj-rays-in .6s var(--tj-ease); }
[data-theme-pref="dark"] .tj-mode .rays { transform: rotate(90deg) scale(0); opacity: 0; }
[data-theme-pref="dark"] .tj-mode .core { r: 9; }
[data-theme-pref="dark"] .tj-mode .bite { cx: 17; cy: 7; }
[data-theme-pref="dark"] .tj-mode .star { opacity: 1; animation: tj-twinkle 3.2s 1s infinite; }
[data-theme-pref="dark"] .tj-mode .star + .star { animation-delay: 2.4s; }
[data-theme-pref="auto"] .tj-mode .rays { transform: rotate(-45deg) scale(0); opacity: 0; }
[data-theme-pref="auto"] .tj-mode .core { opacity: 0; }
[data-theme-pref="auto"] .tj-mode .auto { opacity: 1; transform: none; }
@keyframes tj-rays-in { from { transform: scale(.3) rotate(-60deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tj-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

@keyframes tj-turn { to { transform: rotate(360deg); } }
.tj-cart__n { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--tj-madder); color: #fff; font: 700 11px/19px var(--tj-font); text-align: center; }
.tj-login span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tj-burger { display: none; width: 40px; padding: 0; }
.tj-burger path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .35s var(--tj-ease), opacity .2s; }
.tj-burger[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.tj-burger[aria-expanded="true"] .l2 { opacity: 0; }
.tj-burger[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }

/* dropdowns everywhere */
body.tj .dropdown-menu {
    background: var(--tj-surface); border: 1px solid var(--tj-rule); border-radius: var(--tj-radius);
    box-shadow: var(--tj-shadow); padding: 6px; min-width: 14rem; font-size: 15px;
}
body.tj .dropdown-menu li.dropdown-item { padding: 0; background: none; }
body.tj .dropdown-menu a.dropdown-item, body.tj .dropdown-item > a { display: block; padding: 8px 12px !important; border-radius: var(--tj-radius-sm); color: var(--tj-ink-2) !important; white-space: normal; }
body.tj .dropdown-menu a.dropdown-item:hover, body.tj .dropdown-item.active > a, body.tj a.dropdown-item.active { background: var(--tj-sunk); color: var(--tj-ink) !important; }
body.tj .dropdown-divider { border-color: var(--tj-rule); margin: 6px 4px; }

@media (max-width: 1099.98px) {
    .tj-burger { display: inline-flex; }
    .tj-nav {
        position: fixed; top: var(--tj-drawer-top, 64px); inset-inline: 0; z-index: 2;
        display: block; max-height: calc(100vh - var(--tj-drawer-top, 64px)); max-height: calc(100dvh - var(--tj-drawer-top, 64px));
        overflow-y: auto; overscroll-behavior: contain;
        padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) var(--tj-gutter);
        background: var(--tj-surface); border-bottom: 1px solid var(--tj-rule);
        border-radius: 0 0 18px 18px; box-shadow: var(--tj-shadow);
        visibility: hidden; opacity: 0; transform: translateY(-10px);
        transition: opacity .2s, transform .35s var(--tj-out), visibility 0s .35s;
    }
    .tj-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .35s var(--tj-out); }
    .tj-scrim { display: block; position: fixed; inset: var(--tj-drawer-top, 64px) 0 0 0; z-index: 1; background: rgba(10, 14, 36, .42); opacity: 0; transition: opacity .25s; }
    .tj-scrim.is-open { opacity: 1; }
    .tj-nav__list { flex-direction: column; gap: 0; }
    .tj-nav__list > li + li { border-top: 1px solid var(--tj-rule); }
    .tj-nav__list > li > a { display: flex !important; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 2px !important; border-radius: 0; font-size: 16.5px; color: var(--tj-ink) !important; }
    .tj-nav__list > li > a:hover, .tj-nav li.show > a { background: none; }
    .tj-nav__list > li > a:not(.dropdown-toggle)::after { content: ""; width: 7px; height: 7px; border-top: 1.6px solid var(--tj-ink-3); border-inline-end: 1.6px solid var(--tj-ink-3); transform: rotate(45deg); }
    [dir="rtl"] .tj-nav__list > li > a:not(.dropdown-toggle)::after { transform: rotate(-45deg); }
    .tj-nav .dropdown-toggle::after { margin-inline-start: 0; border-color: var(--tj-ink-3); }
    .tj-nav .dropdown-menu { position: static !important; inset: auto !important; transform: none !important; float: none; min-width: 0; margin: 0 0 12px; padding: 4px; border: 0; border-radius: 12px; background: var(--tj-sunk); box-shadow: none; }
    .tj-nav .dropdown-menu a.dropdown-item { padding: 11px 12px !important; font-size: 15.5px; }
    .tj-nav__secondary { margin-top: 8px; border-top: 1px solid var(--tj-rule); }
    .tj-nav__guest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
    .tj-nav__guest .tj-btn { min-height: 46px; font-size: 15.5px; }
    body.tj-menu-open { overflow: hidden; }
}
@media (max-width: 560px) {
    .tj-head__in { gap: 6px; min-height: 60px; }
    .tj-login span { display: none; }
    .tj-login { width: 40px; padding: 0; }
    .tj-cart { display: none; }
    .tj-logo { font-size: 19px; }
    html[lang="fa"] .tj-logo { font-size: 21px; }
    .tj-lang { width: 78px; }
}
@media (max-width: 359.98px) {
    .tj-logo span { display: none; }
}

/* ---------- breadcrumb ---------- */
body.tj .master-breadcrumb { background: transparent; border: 0; padding: 18px 0 0; }
body.tj .master-breadcrumb .breadcrumb { background: none; padding: 0; margin: 0; font-size: 14px; }
body.tj .breadcrumb-item, body.tj .breadcrumb-item a { color: var(--tj-ink-3); }
body.tj .breadcrumb-item.active { color: var(--tj-ink-2); }
body.tj .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--tj-rule-2); }

/* ---------- main ---------- */
body.tj #main-body { background: transparent; padding: 24px 0 64px; min-height: 50vh; }
body.tj #main-body.tj-main--home { padding: 0; }

/* ---------- buttons ---------- */
.tj-btn, body.tj .btn {
    border-radius: var(--tj-radius-sm); font-family: var(--tj-font); font-weight: 700;
    transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.tj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; font-size: 16px; text-decoration: none !important; border: 1px solid transparent; }
.tj-btn:active, body.tj .btn:active { transform: scale(.98); }
.tj-btn--order { background: var(--tj-madder); color: var(--tj-madder-ink) !important; }
.tj-btn--order:hover { background: color-mix(in srgb, var(--tj-madder) 88%, #000); }
.tj-btn--ink { background: var(--tj-ink); color: var(--tj-field) !important; }
.tj-btn--ink:hover { background: color-mix(in srgb, var(--tj-ink) 86%, var(--tj-saffron)); }
.tj-btn--quiet { border-color: var(--tj-rule-2); color: var(--tj-ink) !important; background: transparent; }
.tj-btn--quiet:hover { border-color: var(--tj-saffron); }

body.tj .btn-primary, body.tj .btn-info { background: var(--tj-ink); border-color: var(--tj-ink); color: var(--tj-field); }
body.tj .btn-primary:hover, body.tj .btn-primary:focus, body.tj .btn-info:hover { background: color-mix(in srgb, var(--tj-ink) 86%, var(--tj-saffron)); border-color: transparent; color: var(--tj-field); }
body.tj .btn-success { background: var(--tj-madder); border-color: var(--tj-madder); color: #fff; }
body.tj .btn-success:hover { background: color-mix(in srgb, var(--tj-madder) 88%, #000); border-color: transparent; color: #fff; }
body.tj .btn-default, body.tj .btn-secondary, body.tj .btn-light, body.tj .btn-outline-primary, body.tj .btn-outline-secondary {
    background: var(--tj-surface); border: 1px solid var(--tj-rule-2); color: var(--tj-ink);
}
body.tj .btn-default:hover, body.tj .btn-secondary:hover, body.tj .btn-light:hover, body.tj .btn-outline-primary:hover, body.tj .btn-outline-secondary:hover { border-color: var(--tj-saffron); background: var(--tj-surface); color: var(--tj-ink); }
body.tj .btn-danger { background: transparent; border: 1px solid var(--tj-bad); color: var(--tj-bad); }
body.tj .btn-danger:hover { background: var(--tj-bad-soft); color: var(--tj-bad); }
body.tj .btn-warning { background: var(--tj-saffron); border-color: var(--tj-saffron); color: #1a1405; }
body.tj .btn-link { color: var(--tj-ink); }
body.tj .btn:focus, body.tj .btn.focus { box-shadow: 0 0 0 3px var(--tj-saffron-soft); }
body.tj .btn:disabled, body.tj .btn.disabled { opacity: .5; }

/* ---------- forms ---------- */
body.tj .form-control, body.tj .custom-select, body.tj select.form-control, body.tj .input-group-text {
    background-color: var(--tj-surface); border: 1px solid var(--tj-rule-2); color: var(--tj-ink);
    border-radius: var(--tj-radius-sm); min-height: 44px; font-family: var(--tj-font);
}
body.tj .input-group-text { background: var(--tj-sunk); color: var(--tj-ink-2); }
body.tj .form-control:focus, body.tj .custom-select:focus { border-color: var(--tj-saffron); box-shadow: 0 0 0 3px var(--tj-saffron-soft); background: var(--tj-surface); color: var(--tj-ink); }
body.tj .form-control::placeholder { color: var(--tj-ink-3); opacity: 1; }
body.tj .form-control:disabled, body.tj .form-control[readonly] { background: var(--tj-sunk); color: var(--tj-ink-2); }
body.tj label { color: var(--tj-ink-2); font-weight: 600; }
body.tj .form-check-input, body.tj input[type="checkbox"], body.tj input[type="radio"] { accent-color: var(--tj-ink); }
body.tj .invalid-feedback, body.tj .text-danger { color: var(--tj-bad) !important; }

/* phone number field (intl-tel-input) */
body.tj .iti__selected-dial-code, body.tj .intl-tel-input .selected-dial-code { color: var(--tj-ink); }
body.tj .intl-tel-input.separate-dial-code .selected-flag, body.tj .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag { background: var(--tj-sunk); }
body.tj .intl-tel-input .country-list { background: var(--tj-surface); border-color: var(--tj-rule); color: var(--tj-ink); box-shadow: var(--tj-shadow); }
body.tj .intl-tel-input .country-list .country.highlight { background: var(--tj-sunk); }
body.tj .intl-tel-input .country-list .dial-code { color: var(--tj-ink-3); }
body.tj .intl-tel-input .country-list .divider { border-color: var(--tj-rule); }
body.tj .iti__flag-container .iti__selected-flag { background: var(--tj-sunk); border-radius: var(--tj-radius-sm) 0 0 var(--tj-radius-sm); }
body.tj .iti__country-list { background: var(--tj-surface); border-color: var(--tj-rule); color: var(--tj-ink); }
body.tj .iti__country.iti__highlight { background: var(--tj-sunk); }
body.tj .iti__dial-code { color: var(--tj-ink-3); }

/* ---------- cards, panels, lists ---------- */
body.tj .card, body.tj .panel, body.tj .tile, body.tj .modal-content, body.tj .list-group-item, body.tj .well {
    background: var(--tj-surface); border: 1px solid var(--tj-rule); color: var(--tj-ink);
}
body.tj .card { border-radius: var(--tj-radius); box-shadow: none; }
body.tj .card-header, body.tj .card-footer { background: transparent; border-color: var(--tj-rule); }
body.tj .card-title, body.tj .card-header h3, body.tj .card-header .card-title { color: var(--tj-ink); font-weight: 750; }
body.tj .list-group-item { border-color: var(--tj-rule); }
body.tj .list-group-item-action:hover, body.tj .list-group-item-action:focus { background: var(--tj-sunk); color: var(--tj-ink); }
body.tj .list-group-item.active { background: var(--tj-ink); border-color: var(--tj-ink); color: var(--tj-field); }
body.tj .sidebar .card-header { padding: 14px 16px; }
body.tj .sidebar .card-title { font-size: 15px; }
body.tj .sidebar .list-group-item { background: transparent; border-inline: 0; font-size: 15px; color: var(--tj-ink-2); }
body.tj .sidebar .list-group-item.active { background: var(--tj-sunk); color: var(--tj-ink); border-color: var(--tj-rule); box-shadow: inset 2px 0 0 var(--tj-saffron); }
body.tj .sidebar .badge { background: var(--tj-sunk); color: var(--tj-ink-2); }

/* ---------- tables ---------- */
body.tj .table { color: var(--tj-ink); }
body.tj .table th, body.tj .table td { border-color: var(--tj-rule); vertical-align: middle; }
body.tj .table thead th { border-bottom: 1px solid var(--tj-rule-2); color: var(--tj-ink-3); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
body.tj .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
body.tj .table-hover tbody tr:hover, body.tj table.table-list tbody tr:hover { background: var(--tj-sunk); color: var(--tj-ink); }
body.tj table.table-list { background: var(--tj-surface); }
body.tj .dataTables_wrapper .dataTables_info, body.tj .dataTables_wrapper .dataTables_length { color: var(--tj-ink-3); }
body.tj .table-container { background: var(--tj-surface); border: 1px solid var(--tj-rule); border-radius: var(--tj-radius); }

/* ---------- alerts, badges, status ---------- */
body.tj .alert { border: 1px solid var(--tj-rule); border-radius: var(--tj-radius); background: var(--tj-surface); color: var(--tj-ink); }
body.tj .alert-success { background: var(--tj-ok-soft); border-color: transparent; color: var(--tj-ink); }
body.tj .alert-info { background: var(--tj-info-soft); border-color: transparent; color: var(--tj-ink); }
body.tj .alert-warning { background: var(--tj-warn-soft); border-color: transparent; color: var(--tj-ink); }
body.tj .alert-danger { background: var(--tj-bad-soft); border-color: transparent; color: var(--tj-ink); }
body.tj .alert a { color: inherit; text-decoration: underline; }
body.tj .badge { border-radius: 999px; font-weight: 700; padding: .35em .7em; }
body.tj .badge-info, body.tj .badge-primary { background: var(--tj-ink); color: var(--tj-field); }
body.tj .badge-success, body.tj .label-success, body.tj .status-active, body.tj .status-paid, body.tj .status-open { background: var(--tj-ok-soft) !important; color: var(--tj-ok) !important; }
body.tj .badge-warning, body.tj .status-pending, body.tj .status-unpaid, body.tj .status-answered, body.tj .status-customer-reply { background: var(--tj-warn-soft) !important; color: var(--tj-warn) !important; }
body.tj .badge-danger, body.tj .status-suspended, body.tj .status-cancelled, body.tj .status-terminated, body.tj .status-overdue, body.tj .status-fraud { background: var(--tj-bad-soft) !important; color: var(--tj-bad) !important; }
body.tj .badge-secondary, body.tj .badge-default, body.tj .status-closed, body.tj .status-refunded, body.tj .status-draft { background: var(--tj-sunk) !important; color: var(--tj-ink-2) !important; }
body.tj .label { border-radius: 999px; font-weight: 700; }

/* ---------- tabs, pagination ---------- */
body.tj .nav-tabs { border-color: var(--tj-rule); }
body.tj .nav-tabs .nav-link { color: var(--tj-ink-2); border: 0; border-bottom: 2px solid transparent; font-weight: 600; }
body.tj .nav-tabs .nav-link.active, body.tj .nav-tabs .nav-item.show .nav-link { background: transparent; color: var(--tj-ink); border-color: var(--tj-saffron); }
body.tj .nav-pills .nav-link.active { background: var(--tj-ink); color: var(--tj-field); }
body.tj .page-link { background: var(--tj-surface); border-color: var(--tj-rule); color: var(--tj-ink); }
body.tj .page-item.active .page-link { background: var(--tj-ink); border-color: var(--tj-ink); color: var(--tj-field); }
body.tj .page-item.disabled .page-link { background: var(--tj-sunk); color: var(--tj-ink-3); }

/* ---------- modals ---------- */
body.tj .modal-content { border-radius: 14px; box-shadow: var(--tj-shadow); }
body.tj .modal-header, body.tj .modal-footer { border-color: var(--tj-rule); }
body.tj .modal-backdrop.show { opacity: .55; }
body.tj .modal-backdrop { background: #0a0e24; }
body.tj .close { color: var(--tj-ink); text-shadow: none; opacity: .7; }
body.tj #fullpage-overlay { background: color-mix(in srgb, var(--tj-field) 80%, transparent); color: var(--tj-ink); }
.tj-spin { width: 44px; height: 44px; color: var(--tj-saffron); animation: tj-turn 2.4s var(--tj-ease) infinite; }

/* ---------- popovers, tooltips ---------- */
body.tj .popover { background: var(--tj-surface); border-color: var(--tj-rule); }
body.tj .popover-body { color: var(--tj-ink); }
body.tj .tooltip-inner { background: var(--tj-ink); color: var(--tj-field); font-family: var(--tj-font); }

/* =====================================================================
   Sign in, password reset, registration
   ===================================================================== */
.tj-auth { max-width: 440px; margin: clamp(8px, 4vw, 40px) auto 0; }
.tj-auth__card {
    position: relative; padding: clamp(24px, 5vw, 40px);
    background: var(--tj-surface); border: 1px solid var(--tj-rule); border-radius: 18px; box-shadow: var(--tj-shadow);
}
.tj-auth__mark { display: block; width: 52px; height: 52px; margin: 0 0 18px; color: var(--tj-saffron); animation: tj-turn 60s linear infinite; }
.tj-auth h1, .tj-auth .h3 { font-size: 28px; margin: 0 0 4px; }
.tj-auth__lede, .tj-auth .text-muted { margin: 0 0 24px; color: var(--tj-ink-2) !important; }
.tj-auth .form-group { margin-bottom: 18px; }
.tj-auth label { font-size: 14.5px; }
.tj-auth .form-control { min-height: 48px; font-size: 16px; }
.tj-auth__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
body.tj .tj-auth__small { font-size: 14px; color: var(--tj-ink-2); }
.tj-auth .input-group > .form-control { border-start-end-radius: 0; border-end-end-radius: 0; }
.tj-auth .btn-reveal-pw { min-height: 48px; width: 48px; border-start-start-radius: 0; border-end-start-radius: 0; color: var(--tj-ink-3); }
.tj-check { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 22px; cursor: pointer; font-weight: 600; color: var(--tj-ink-2); }
.tj-check input { width: 18px; height: 18px; margin: 0; }
.tj-auth__submit, .tj-auth form .btn-primary { width: 100%; min-height: 50px; font-size: 16.5px; }
.tj-auth__alt { margin: 18px 0 0; text-align: center; color: var(--tj-ink-3); }
body.tj .tj-auth__alt a { font-weight: 700; color: var(--tj-ink); }
.tj-auth .alert { font-size: 15px; }
.tj-auth .social-signin-btns, .tj-auth .sub-heading { margin-top: 20px; }

.tj-pagehead { margin: 4px 0 24px; }
.tj-pagehead h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 6px; line-height: 1.2; }
.tj-pagehead p { margin: 0; color: var(--tj-ink-2); }
body.tj .tj-pagehead a { font-weight: 700; }
.tj-pagehead--narrow, .tj-page-clientregister #registration, .tj-page-clientregister .primary-content > .alert { max-width: 820px; margin-inline: auto; }
.tj-page-clientregister #registration .card { border-radius: 14px; }
.tj-page-clientregister #registration .card-body { padding: clamp(20px, 4vw, 32px) !important; }
.tj-page-clientregister #registration .card-title { font-size: 19px; margin-bottom: 18px; }
.tj-page-clientregister #registration .text-center:last-child .btn-primary,
.tj-page-clientregister #registration input[type="submit"] { min-height: 52px; padding: 0 40px; font-size: 17px; }
body.tj .prepend-icon { position: relative; }
body.tj .prepend-icon .field-icon { position: absolute; top: 0; inset-inline-start: 0; z-index: 3; display: grid; place-items: center; width: 42px; height: 44px; margin: 0; color: var(--tj-ink-3); font-size: 14px; }
body.tj .prepend-icon .field, body.tj .prepend-icon .form-control, body.tj input.field, body.tj select.field, body.tj #registration .field, body.tj #registration .form-control { background-color: var(--tj-surface); color: var(--tj-ink); border-color: var(--tj-rule-2); }
[dir="ltr"] body.tj .prepend-icon .field, [dir="ltr"] body.tj .prepend-icon .form-control { padding-left: 42px !important; padding-right: 12px !important; }
[dir="rtl"] body.tj .prepend-icon .field, [dir="rtl"] body.tj .prepend-icon .form-control { padding-right: 42px !important; padding-left: 12px !important; }
body.tj .intl-tel-input { direction: ltr; width: 100%; }
[dir="rtl"] body.tj .intl-tel-input input { text-align: right; }
body.tj .bootstrap-switch { border-color: var(--tj-rule-2); background: var(--tj-surface); }
body.tj .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, body.tj .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--tj-ok); color: #fff; }
body.tj .bootstrap-switch .bootstrap-switch-label { background: var(--tj-surface); }
body.tj .bootstrap-switch .bootstrap-switch-handle-off { background: var(--tj-sunk); color: var(--tj-ink-2); }
body.tj .progress { background: var(--tj-sunk); }

/* =====================================================================
   Client area
   ===================================================================== */
body.tj .verification-banner { background: var(--tj-warn-soft); border-bottom: 1px solid var(--tj-rule); color: var(--tj-ink); padding: 12px 0; }
body.tj .verification-banner .container { display: flex; }
body.tj .verification-banner .text { color: var(--tj-ink) !important; font-size: 15px; }
body.tj .verification-banner .fas { color: var(--tj-warn); }
body.tj .verification-banner .btn-resend-verify-email { background: var(--tj-ink); border-color: var(--tj-ink); color: var(--tj-field); }
body.tj .verification-banner .close { color: var(--tj-ink-2); }

.tj-dash__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 4px 0 26px; }
.tj-dash__head h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 4px; line-height: 1.2; }
.tj-dash__head p { margin: 0; color: var(--tj-ink-3); font-size: 15px; overflow-wrap: anywhere; }
body.tj .tj-dash__head p a { color: var(--tj-ink-2); font-weight: 600; }
.tj-dash__head .tj-btn { min-height: 44px; }

.tj-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 32px; padding: 0; list-style: none; border-block: 1px solid var(--tj-rule-2); }
.tj-stats li + li { border-inline-start: 1px solid var(--tj-rule); }
.tj-stats a { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; height: 100%; text-decoration: none !important; color: var(--tj-ink) !important; transition: background-color .2s; }
.tj-stats a:hover { background: var(--tj-surface); }
.tj-stats__n { font-size: clamp(30px, 4vw, 40px); font-weight: 800; line-height: 1.1; }
.tj-stats__l { color: var(--tj-ink-3); font-size: 14.5px; font-weight: 600; }
.tj-stats .is-due .tj-stats__n { color: var(--tj-madder); }
.tj-stats .is-due .tj-stats__l::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 7px; border-radius: 50%; background: var(--tj-madder); vertical-align: middle; }
@media (max-width: 700px) {
    .tj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tj-stats li:nth-child(3) { border-inline-start: 0; }
    .tj-stats li:nth-child(n+3) { border-top: 1px solid var(--tj-rule); }
    .tj-stats a { padding: 14px 14px; }
}

.tj-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.tj-panel { min-width: 0; background: var(--tj-surface); border: 1px solid var(--tj-rule); border-radius: 14px; overflow: hidden; }
.tj-panel--wide { grid-column: 1 / -1; }
.tj-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--tj-rule); }
.tj-panel__head h2 { margin: 0; font-size: 17px; font-weight: 750; }
.tj-panel__head .badge { margin-inline-start: 6px; background: var(--tj-sunk); color: var(--tj-ink-2); font-size: 12px; }
body.tj .tj-panel__act { flex: none; font-size: 14px; font-weight: 700; color: var(--tj-saffron-text) !important; text-decoration: none; }
body.tj .tj-panel__act:hover { text-decoration: underline; }
.tj-panel__body { padding: 16px 20px; color: var(--tj-ink-2); font-size: 15px; }
.tj-panel__body p:last-child { margin-bottom: 0; }
.tj-panel__list.list-group { border-radius: 0; }
body.tj .tj-panel__list .list-group-item { border-inline: 0; border-top: 0; border-bottom: 1px solid var(--tj-rule); background: transparent; padding: 14px 20px; font-size: 15px; color: var(--tj-ink); }
body.tj .tj-panel__list .list-group-item:last-child { border-bottom: 0; }
.tj-panel__list .list-group-item small, .tj-panel__list .list-group-item .text-muted { color: var(--tj-ink-3) !important; }
.tj-panel__foot { padding: 10px 20px; border-top: 1px solid var(--tj-rule); font-size: 14px; color: var(--tj-ink-3); }
.tj-panel__foot:empty { display: none; }
body.tj .tj-panel .btn-default, body.tj .tj-panel .btn-xs, body.tj .tj-panel .btn-sm { min-height: 34px; padding: 4px 12px; font-size: 14px; }
body.tj .tj-panel .label, body.tj .tj-panel .status-label { font-size: 12px; }
/* the domain search box inside a home panel */
body.tj .tj-panel .input-group { padding: 0; }
body.tj .tj-panel .input-group .form-control { border-radius: var(--tj-radius-sm) 0 0 var(--tj-radius-sm); }
[dir="rtl"] body.tj .tj-panel .input-group .form-control { border-radius: 0 var(--tj-radius-sm) var(--tj-radius-sm) 0; }
/* MarketConnect promotion panels arrive on white; bring them onto the theme */
body.tj .tj-panel .promo-container, body.tj .client-home-cards .promo-container,
body.tj .tj-panel [class*="promo"] { background: transparent !important; color: var(--tj-ink); }
@media (max-width: 860px) { .tj-panels { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Homepage
   ===================================================================== */
.tj-hero { border-bottom: 1px solid var(--tj-rule); overflow: hidden; }
.tj-hero__in {
    max-width: var(--tj-max); margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) max(16px, env(safe-area-inset-right, 0px)) clamp(28px, 5vw, 72px) var(--tj-gutter);
    display: grid; gap: 8px 56px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "copy art" "pick art";
    align-items: start;
}
.tj-hero__copy { grid-area: copy; align-self: end; }
.tj-hero__art { grid-area: art; align-self: center; }
.tj-hero__pick { grid-area: pick; align-self: start; display: grid; gap: 16px; }
.tj-hero h1 { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.08; margin: 0 0 14px; font-weight: 800; letter-spacing: -.025em; max-width: 14ch; }
html[lang="fa"] .tj-hero h1 { line-height: 1.4; letter-spacing: 0; max-width: 13ch; }
.tj-hero h1 .tj-num { color: var(--tj-saffron-text); }
.tj-lede { margin: 0; color: var(--tj-ink-2); font-size: clamp(16px, 1.5vw, 18px); max-width: 46ch; }

/* medallion */
.tj-med { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.tj-med svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tj-med__spokes line { stroke: var(--tj-saffron); stroke-width: 1; stroke-opacity: .12; transition: stroke-opacity .5s; }
.tj-med__spokes line.on { stroke-opacity: .7; }
.tj-med__orbit { fill: none; stroke: var(--tj-rule-2); stroke-width: 1; stroke-dasharray: 2 5; }
.tj-med__rose { fill: none; stroke: var(--tj-saffron); stroke-width: 1.3; transform-box: view-box; transform-origin: 200px 200px; transition: transform 1s var(--tj-ease); }
.tj-med__rose .faint { stroke-opacity: .45; }
.tj-med__rose .bead { fill: var(--tj-saffron); stroke: none; }
.tj-med__hub { fill: var(--tj-field); stroke: var(--tj-saffron); stroke-width: 1.3; transition: fill .35s; }
.tj-med__nodes .node { cursor: pointer; }
.tj-med__nodes circle { fill: var(--tj-field); stroke: var(--tj-saffron); stroke-width: 1.4; transition: fill .35s, r .35s var(--tj-ease); r: 4; }
.tj-med__nodes text { fill: var(--tj-ink-3); font: 700 11px/1 "Figtree", system-ui, sans-serif; letter-spacing: .06em; transition: fill .35s; }
.tj-med__nodes .on circle { fill: var(--tj-saffron); r: 6; }
.tj-med__nodes .on text { fill: var(--tj-ink); }
.tj-med__core { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; }
.tj-med__fig { line-height: 1.1; animation: tj-rise .5s var(--tj-out); }
.tj-med__fig b { display: block; font-size: clamp(40px, 7vw, 64px); font-weight: 800; color: var(--tj-saffron-text); }
.tj-med__fig small { display: block; margin-top: 4px; font-size: 14px; color: var(--tj-ink-2); font-weight: 600; }
@keyframes tj-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* region picker */
.tj-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--tj-rule-2); border-radius: var(--tj-radius); overflow: hidden; background: var(--tj-surface); }
.tj-seg button { min-height: 46px; padding: 8px 6px; border: 0; background: transparent; color: var(--tj-ink-2); font: 700 14.5px/1.25 var(--tj-font); cursor: pointer; transition: background-color .3s, color .3s; }
.tj-seg button + button { border-inline-start: 1px solid var(--tj-rule-2); }
.tj-seg button[aria-selected="true"] { background: var(--tj-ink); color: var(--tj-field); }
.tj-seg button:hover:not([aria-selected="true"]) { background: var(--tj-sunk); }
.tj-seg button:focus-visible { outline-offset: -3px; }

.tj-region { display: grid; gap: 16px; animation: tj-rise .45s var(--tj-out); }
.tj-countries { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tj-countries li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border: 1px solid var(--tj-rule); border-radius: 999px; font-size: 14.5px; font-weight: 600; background: var(--tj-surface); }
.tj-iso { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 4px; border-radius: 999px; background: var(--tj-saffron-soft); color: var(--tj-saffron-text); font: 800 10.5px/1 "Figtree", system-ui, sans-serif; letter-spacing: .05em; direction: ltr; }
.tj-plan { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 14px; border-top: 1px solid var(--tj-rule); }
.tj-plan__name { display: block; font-weight: 750; font-size: 16px; }
.tj-plan__spec { display: block; color: var(--tj-ink-3); font-size: 14px; direction: ltr; unicode-bidi: isolate; text-align: start; }
.tj-plan__price { text-align: end; line-height: 1.2; white-space: nowrap; }
.tj-plan__price small { display: block; font-size: 12.5px; color: var(--tj-ink-3); font-weight: 600; }
.tj-plan__price b { display: block; font-size: 24px; font-weight: 800; }
.tj-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tj-actions .tj-btn--order { flex: 1 1 200px; }

/* bands below the hero */
.tj-band { border-bottom: 1px solid var(--tj-rule); }
.tj-band__in { max-width: var(--tj-max); margin: 0 auto; padding: clamp(40px, 6vw, 88px) max(16px, env(safe-area-inset-right, 0px)) clamp(40px, 6vw, 88px) var(--tj-gutter); }
.tj-band h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 10px; line-height: 1.2; }
.tj-band__head { margin-bottom: 28px; }
.tj-band__head p, .tj-control__copy > p { color: var(--tj-ink-2); margin: 0; max-width: 58ch; }

.tj-control { background: var(--tj-sunk); }
.tj-control .tj-band__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.tj-states { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 26px 0 30px; padding: 0; list-style: none; }
.tj-states li { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; }
.tj-state { width: 40px; height: 40px; fill: none; stroke: var(--tj-saffron); stroke-width: 1.5; }
.tj-state .dot { fill: var(--tj-saffron); stroke: none; }
.tj-state--off { stroke: var(--tj-ink-3); }
.tj-state--boot .spin { transform-origin: 20px 20px; animation: tj-turn 1.6s linear infinite; }
.tj-bot { padding: 26px; border: 1px solid var(--tj-rule-2); border-radius: 14px; background: var(--tj-surface); }
.tj-bot svg { width: 30px; height: 30px; color: var(--tj-saffron); }
.tj-bot h3 { font-size: 20px; margin: 12px 0 6px; }
.tj-bot p { color: var(--tj-ink-2); margin: 0 0 14px; }
.tj-bot__handle { font: 700 17px/1 "Figtree", system-ui, sans-serif; color: var(--tj-ink) !important; text-decoration: underline; text-decoration-color: var(--tj-saffron); }

.tj-groups { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tj-rule-2); }
.tj-groups li { border-bottom: 1px solid var(--tj-rule); }
.tj-groups a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name arrow" "tag arrow"; column-gap: 16px; padding: 18px 4px; text-decoration: none !important; color: var(--tj-ink) !important; transition: background-color .2s, padding .35s var(--tj-out); }
.tj-groups a:hover { background: var(--tj-surface); padding-inline: 14px; }
.tj-groups__name { grid-area: name; font-size: 18px; font-weight: 700; }
.tj-groups__tag { grid-area: tag; color: var(--tj-ink-3); font-size: 14.5px; }
.tj-arrow { grid-area: arrow; align-self: center; width: 22px; height: 22px; color: var(--tj-saffron); transition: transform .35s var(--tj-ease); }
.tj-groups a:hover .tj-arrow { transform: translateX(4px); }
[dir="rtl"] .tj-arrow { transform: scaleX(-1); }
[dir="rtl"] .tj-groups a:hover .tj-arrow { transform: scaleX(-1) translateX(4px); }

@media (max-width: 900px) {
    .tj-hero__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art" "pick"; gap: 14px; }
    .tj-hero h1, html[lang="fa"] .tj-hero h1 { max-width: none; }
    .tj-med { width: min(100%, 400px); }
    .tj-control .tj-band__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .tj-hero__in { padding-top: 22px; }
    .tj-med { width: min(86%, 320px); }
    .tj-med__nodes text { font-size: 13px; }
    .tj-actions { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--tj-gutter)); padding: 10px var(--tj-gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--tj-field); border-top: 1px solid var(--tj-rule); flex-wrap: nowrap; }
    .tj-actions .tj-btn--order { flex: 1 1 auto; }
    .tj-actions .tj-btn--quiet { flex: none; padding: 0 16px; }
    .tj-seg button { font-size: 13.5px; }
}

/* ---------- footer: a night-indigo band in both colour schemes ---------- */
:root { --tj-foot-bg: #1a2350; --tj-foot-ink: #f5f1e8; --tj-foot-ink-2: #c3c8de; --tj-foot-ink-3: #9aa0bd; --tj-foot-rule: rgba(245, 241, 232, .14); --tj-foot-gold: #d9a84e; }
:root[data-theme="dark"] { --tj-foot-bg: #0b1030; }
.tj-foot { position: relative; margin-top: 24px; background: var(--tj-foot-bg); color: var(--tj-foot-ink-2); font-size: 15px; }
.tj-foot__band { display: block; width: 100%; height: 24px; color: var(--tj-foot-gold); background: var(--tj-foot-bg); border-top: 1px solid var(--tj-foot-rule); }
.tj-foot__band rect { opacity: .5; }
.tj-foot__in {
    max-width: var(--tj-max); margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) max(16px, env(safe-area-inset-right, 0px)) 36px var(--tj-gutter);
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 40px 64px;
}
.tj-foot__logo { color: var(--tj-foot-ink) !important; font-size: 26px; }
.tj-foot__logo .tj-mark { width: 34px; height: 34px; color: var(--tj-foot-gold); }
.tj-foot__brand p { margin: 16px 0 22px; max-width: 34ch; color: var(--tj-foot-ink-2); line-height: 1.8; }
.tj-foot__bot { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid var(--tj-foot-rule); border-radius: 12px; color: var(--tj-foot-ink) !important; text-decoration: none !important; transition: border-color .2s, background-color .2s; }
[dir="rtl"] .tj-foot__bot { padding: 10px 12px 10px 16px; }
.tj-foot__bot:hover { border-color: var(--tj-foot-gold); background: rgba(245, 241, 232, .05); }
.tj-foot__bot svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--tj-foot-gold); color: var(--tj-foot-bg); flex: none; }
.tj-foot__bot b { display: block; font: 700 15px/1.2 "Figtree", system-ui, sans-serif; direction: ltr; text-align: start; }
.tj-foot__bot small { display: block; color: var(--tj-foot-ink-3); font-size: 13px; }
.tj-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tj-foot__cols h2 { margin: 4px 0 14px; color: var(--tj-foot-gold) !important; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[lang="fa"] .tj-foot__cols h2 { letter-spacing: 0; font-size: 15px; }
.tj-foot__cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
body.tj .tj-foot__cols a { color: var(--tj-foot-ink-2) !important; text-decoration: none; transition: color .2s; }
body.tj .tj-foot__cols a:hover { color: var(--tj-foot-ink) !important; text-decoration: underline; text-decoration-color: var(--tj-foot-gold); }
.tj-foot__base {
    max-width: var(--tj-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
    padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) var(--tj-gutter);
    border-top: 1px solid var(--tj-foot-rule); color: var(--tj-foot-ink-3); font-size: 13.5px;
}
.tj-foot__copy { margin: 0; }
body.tj .tj-foot__base a { color: var(--tj-foot-ink-2) !important; }
body.tj .tj-foot__base a:hover { color: var(--tj-foot-ink) !important; }
.tj-foot__legal { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.tj-foot__cur { display: inline-flex; gap: 2px; margin-inline-start: auto; padding: 3px; border: 1px solid var(--tj-foot-rule); border-radius: var(--tj-radius-sm); }
body.tj .tj-foot__cur a { padding: 4px 10px; border-radius: 5px; text-decoration: none; font-weight: 700; color: var(--tj-foot-ink-2) !important; }
body.tj .tj-foot__cur a[aria-current="true"] { background: var(--tj-foot-ink); color: var(--tj-foot-bg) !important; }
@media (max-width: 860px) {
    .tj-foot__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .tj-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tj-foot__cols > div:first-child { grid-column: 1 / -1; }
    .tj-foot__cols > div:first-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .tj-foot__cur { margin-inline-start: 0; } .tj-foot__base { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* back to top: ring fills as you scroll */
.tj-top {
    position: fixed; z-index: 1020; inset-inline-end: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; background: var(--tj-surface); color: var(--tj-ink); box-shadow: var(--tj-shadow);
    opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .3s, transform .4s var(--tj-ease), background-color .3s;
    -webkit-tap-highlight-color: transparent;
}
.tj-top.is-on { opacity: 1; transform: none; }
.tj-top:hover { background: var(--tj-sunk); }
.tj-top:hover .tj-top__icon { transform: translateY(-2px); }
.tj-top:focus-visible { outline: 2px solid var(--tj-saffron); outline-offset: 3px; }
.tj-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tj-top__ring circle { fill: none; stroke-width: 3; }
.tj-top__ring .track { stroke: var(--tj-rule); }
.tj-top__ring .bar { stroke: var(--tj-saffron); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .12s linear; }
.tj-top__icon { position: relative; width: 22px; height: 22px; transition: transform .3s var(--tj-ease); }
body.tj-lift-top .tj-top { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
    body.tj *, body.tj *::before, body.tj *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* MarketConnect promotion on the dashboard */
.tj-dash__addon { margin: 0 0 24px; }
.tj-dash__addon > h3 { font-size: 15px !important; font-weight: 700; color: var(--tj-ink-3); margin: 0 0 10px !important; }
.tj-dash__addon .carousel-item { display: block; float: none; margin: 0; transform: none !important; }
body.tj .promo-banner { background: var(--tj-surface) !important; border: 1px solid var(--tj-rule) !important; border-inline-start: 3px solid var(--tj-saffron) !important; border-top: 1px solid var(--tj-rule) !important; border-radius: 14px !important; color: var(--tj-ink); box-shadow: none; }
body.tj .promo-banner .card-body { display: flex; gap: 24px; align-items: center; padding: 20px 24px; }
body.tj .promo-banner .icon-left { flex: none; float: none; width: 96px; margin: 0; }
body.tj .promo-banner .icon-left img { max-width: 100%; }
body.tj .promo-banner .content { float: none; margin: 0; padding: 0; min-width: 0; }
body.tj .promo-banner h3 { margin: 0 0 2px; font-size: 19px; color: var(--tj-ink) !important; }
body.tj .promo-banner h3 small a { font-size: 14px; color: var(--tj-saffron-text) !important; }
body.tj .promo-banner h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--tj-ink-3) !important; }
body.tj .promo-banner ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; margin: 0 0 14px; padding: 0; list-style: none; }
body.tj .promo-banner li { float: none; width: auto; color: var(--tj-ink-2) !important; font-size: 14.5px; }
body.tj .promo-banner li i { color: var(--tj-ok); }
body.tj .promo-banner .btn { background: var(--tj-ink) !important; border-color: var(--tj-ink) !important; color: var(--tj-field) !important; }
@media (max-width: 600px) { body.tj .promo-banner .icon-left { display: none; } body.tj .promo-banner .card-body { padding: 16px; } }
.tj-panel .google-recaptcha-align { height: 0; overflow: hidden; }
.tj-panel .input-group.margin-10 { padding: 16px 0 0 !important; }

/* WHMCS list tables (services, invoices, tickets...) */
body.tj .dataTables_wrapper table.table-list { border: 0; border-radius: 0; margin: 0 !important; }
body.tj table.table-list thead th { background-color: transparent; color: var(--tj-ink-3); border-bottom: 1px solid var(--tj-rule-2); font-size: 13px; font-weight: 700; }
body.tj .dataTables_wrapper table.table-list thead th.sorting_asc,
body.tj .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: var(--tj-sunk); color: var(--tj-ink-2); }
body.tj .table-list > tbody > tr > td { background-color: transparent; color: var(--tj-ink); border-color: var(--tj-rule); }
body.tj .table-list > tbody > tr:hover > td { background-color: var(--tj-sunk); }
body.tj .table-list > tbody > tr > td.sorting_1 { background-color: transparent; }
body.tj .table-list .text-muted, body.tj .table-list small { color: var(--tj-ink-3) !important; }
body.tj .dataTables_wrapper .dataTables_filter label .form-control { background: var(--tj-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3Cpath d='m13 13 4 4' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px 50% / 18px; color: var(--tj-ink); border-color: var(--tj-rule-2); }
[dir="rtl"] body.tj .dataTables_wrapper .dataTables_filter label .form-control { background-position: calc(100% - 12px) 50%; padding: 7px 42px 7px 10px !important; }
body.tj .dataTables_wrapper .dataTables_info { color: var(--tj-ink-3); }
body.tj .dataTables_wrapper .dataTables_paginate .paginate_button, body.tj .dataTables_wrapper .pagination .page-link { background: var(--tj-surface); border-color: var(--tj-rule); color: var(--tj-ink-2) !important; }
body.tj .dataTables_wrapper .pagination .active .page-link, body.tj .dataTables_wrapper .paginate_button.current { background: var(--tj-ink); border-color: var(--tj-ink); color: var(--tj-field) !important; }
body.tj .dataTables_wrapper .dataTables_length select { background-color: var(--tj-surface); color: var(--tj-ink); border-color: var(--tj-rule-2); }
/* wide tables scroll inside their box instead of widening the page */
body.tj .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.tj .table-container table { min-width: 560px; }
body.tj .table-responsive { border: 0; }

/* service overview (product details) */
.tj-svc { margin: 0 0 24px; padding: clamp(18px, 3vw, 28px); background: var(--tj-surface); border: 1px solid var(--tj-rule); border-radius: 14px; }
.tj-svc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--tj-rule); }
.tj-svc__name { min-width: 0; }
.tj-svc__group { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--tj-saffron-text); }
.tj-svc h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); line-height: 1.3; overflow-wrap: anywhere; }
.tj-svc__host { margin: 6px 0 0; color: var(--tj-ink-3); font: 600 14.5px/1.4 "Figtree", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; text-align: start; overflow-wrap: anywhere; }
.tj-pill { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: var(--tj-sunk); color: var(--tj-ink-2); }
.tj-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tj-pill--active { background: var(--tj-ok-soft); color: var(--tj-ok); }
.tj-pill--pending { background: var(--tj-warn-soft); color: var(--tj-warn); }
.tj-pill--suspended, .tj-pill--terminated, .tj-pill--fraud { background: var(--tj-bad-soft); color: var(--tj-bad); }
.tj-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 40%), 1fr)); gap: 18px 24px; margin: 18px 0 0; }
.tj-facts > div { min-width: 0; }
.tj-facts dt { font-size: 13px; font-weight: 600; color: var(--tj-ink-3); margin: 0 0 2px; }
.tj-facts dd { margin: 0; font-size: 16px; font-weight: 650; color: var(--tj-ink); }
.tj-facts__warn { grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--tj-radius-sm); background: var(--tj-bad-soft); }
.tj-svc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tj-rule); }
.tj-svc__actions .tj-btn { min-height: 44px; font-size: 15px; }
body.tj .tj-svc__cancel { color: var(--tj-bad) !important; margin-inline-start: auto; }
body.tj .tj-svc__cancel.disabled { pointer-events: none; opacity: .6; }
@media (max-width: 560px) { .tj-svc__actions .tj-btn { flex: 1 1 100%; } body.tj .tj-svc__cancel { margin-inline-start: 0; } }

body.tj .product-details-tab-container { background: var(--tj-surface); border: 1px solid var(--tj-rule); border-top: 0; border-radius: 0 0 14px 14px; padding: 20px; color: var(--tj-ink); }
body.tj .product-details-tab-container strong { color: var(--tj-ink-2); }
body.tj .responsive-tabs-sm-connector { display: none; }
@media (max-width: 575px) {
    body.tj .product-details-tab-container .text-right, body.tj .product-details-tab-container .text-left { text-align: start !important; }
    body.tj .product-details-tab-container .row + .row { margin-top: 8px; }
}
body.tj .nav-tabs.responsive-tabs-sm .nav-link { background: transparent; }
@media (max-width: 767px) {
    body.tj .nav-tabs.responsive-tabs-sm { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; border-bottom: 1px solid var(--tj-rule); }
    body.tj .nav-tabs.responsive-tabs-sm .nav-item { flex: none; width: auto; margin: 0; border: 0; }
    body.tj .nav-tabs.responsive-tabs-sm .nav-link { display: block; padding: 10px 14px; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
    body.tj .nav-tabs.responsive-tabs-sm .nav-link.active { border-color: var(--tj-saffron); }
    body.tj .product-details-tab-container { border-top: 0; }
}

/* ticket editor (bootstrap-markdown) and file inputs */
body.tj .md-editor { border: 1px solid var(--tj-rule-2); border-radius: var(--tj-radius-sm); overflow: hidden; background: var(--tj-surface); }
body.tj .md-editor > .md-header { background: var(--tj-sunk) !important; padding: 6px; border-bottom: 1px solid var(--tj-rule); }
body.tj .md-editor .btn-group .btn, body.tj .md-editor .md-header .btn { background: transparent; border: 0; color: var(--tj-ink-2); min-height: 34px; }
body.tj .md-editor .md-header .btn:hover, body.tj .md-editor .md-header .btn.active { background: var(--tj-surface); color: var(--tj-ink); }
body.tj .md-editor > textarea, body.tj .md-editor .md-preview { background: var(--tj-surface) !important; color: var(--tj-ink); border: 0; padding: 14px; font-family: var(--tj-font); font-size: 16px; }
body.tj .md-editor.active { border-color: var(--tj-saffron); box-shadow: 0 0 0 3px var(--tj-saffron-soft); }
body.tj .md-editor .md-footer, body.tj .markdown-editor-status, body.tj .md-editor + .small, body.tj .md-editor .statusbar { background: var(--tj-sunk); color: var(--tj-ink-3); border-top: 1px solid var(--tj-rule); }
body.tj .custom-file-label { background: var(--tj-surface); border-color: var(--tj-rule-2); color: var(--tj-ink-3); min-height: 44px; line-height: 30px; }
body.tj .custom-file-label::after { background: var(--tj-sunk); color: var(--tj-ink); border-color: var(--tj-rule-2); height: 42px; line-height: 30px; }
body.tj .custom-file-input:focus ~ .custom-file-label { border-color: var(--tj-saffron); box-shadow: 0 0 0 3px var(--tj-saffron-soft); }

/* plain on/off switch (newsletter opt-in) */
.tj-switch { -webkit-appearance: none; appearance: none; position: relative; width: 52px; height: 30px; margin: 4px 0 0; border-radius: 999px; background: var(--tj-sunk); border: 1px solid var(--tj-rule-2); cursor: pointer; transition: background-color .25s, border-color .25s; flex: none; }
.tj-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--tj-ink-3); transition: transform .3s var(--tj-ease), background-color .25s; }
.tj-switch:checked { background: var(--tj-ok); border-color: var(--tj-ok); }
.tj-switch:checked::after { background: #fff; transform: translateX(22px); }
[dir="rtl"] .tj-switch:checked::after { transform: translateX(-22px); }
.tj-switch:focus-visible { outline: 2px solid var(--tj-saffron); outline-offset: 2px; }

/* error pages */
.tj-err { max-width: 520px; margin: clamp(16px, 5vw, 56px) auto; text-align: center; }
.tj-err__art { width: min(220px, 60vw); height: auto; margin: 0 auto 20px; display: block; overflow: visible; }
.tj-err__art .orbit { fill: none; stroke: var(--tj-rule-2); stroke-dasharray: 2 5; }
.tj-err__art .rose rect { fill: none; stroke: var(--tj-saffron); stroke-width: 1.4; stroke-opacity: .7; }
.tj-err__art .rose { transform-origin: 100px 100px; animation: tj-turn 80s linear infinite; }
.tj-err__art .hub { fill: var(--tj-field); stroke: var(--tj-saffron); stroke-width: 1.4; }
.tj-err__art .nodes circle { fill: var(--tj-saffron); }
.tj-err__art .lost { fill: none; stroke: var(--tj-madder); stroke-width: 1.6; stroke-dasharray: 3 3; animation: tj-twinkle 2.4s infinite; }
.tj-err__art text { fill: var(--tj-ink); font: 800 22px/1 "Figtree", system-ui, sans-serif; }
.tj-err h1 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 10px; }
.tj-err__sub, .tj-err__desc { color: var(--tj-ink-2); margin: 0 auto 8px; max-width: 46ch; }
.tj-err__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.tj-err__actions .tj-btn { min-height: 46px; }

/* knowledgebase: category picker card and search */
body.tj .card-header, body.tj .card-header.bg-white { background: transparent !important; }
body.tj .kb-search .form-control, body.tj .input-group-lg .form-control { min-height: 48px; }

/* Bootstrap's light utilities hard-code white; route them through the tokens */
body.tj .bg-light, body.tj .bg-white, body.tj .bg-default { background-color: var(--tj-surface) !important; color: var(--tj-ink); }
body.tj .bg-light .card-title, body.tj .bg-light .card-header, body.tj .bg-light h3 { color: var(--tj-ink) !important; }
body.tj .text-dark { color: var(--tj-ink) !important; }
body.tj .sidebar .card.d-md-none { margin-bottom: 20px; }

/* ---------- audit round 1 ---------- */
/* status labels (Twenty-One .label-*) */
body.tj .label { display: inline-block; padding: .3em .75em; font-size: 12px; line-height: 1.2; }
body.tj .label-success, body.tj .label-active { background: var(--tj-ok-soft) !important; color: var(--tj-ok) !important; }
body.tj .label-warning, body.tj .label-pending, body.tj .label-suspended { background: var(--tj-warn-soft) !important; color: var(--tj-warn) !important; }
body.tj .label-danger, body.tj .label-terminated, body.tj .label-cancelled, body.tj .label-fraud { background: var(--tj-bad-soft) !important; color: var(--tj-bad) !important; }
body.tj .label-info, body.tj .label-primary { background: var(--tj-info-soft) !important; color: var(--tj-ink) !important; }
body.tj .label-default, body.tj .label-closed { background: var(--tj-sunk) !important; color: var(--tj-ink-2) !important; }
/* tabs never paint white */
body.tj .nav-tabs, body.tj .nav-tabs .nav-link, body.tj .nav-tabs .nav-link.active { background-color: transparent !important; }
body.tj .nav-tabs .nav-link { color: var(--tj-ink-2) !important; }
body.tj .nav-tabs .nav-link.active { color: var(--tj-ink) !important; }
/* Bootstrap Switch (e.g. SSO setting): keep it in one row in RTL, readable handles */
body.tj .bootstrap-switch { direction: ltr; }
body.tj .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, body.tj .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { color: var(--tj-field) !important; }
/* knowledgebase and announcements */
body.tj .kb-article-item small, body.tj .list-group-item small { color: var(--tj-ink-3) !important; }
body.tj .announcement article, body.tj .announcements .announcement article { background: transparent !important; color: var(--tj-ink); }
body.tj pre, body.tj pre.prettyprint { background: var(--tj-sunk) !important; border: 1px solid var(--tj-rule) !important; border-radius: var(--tj-radius-sm); padding: 14px 16px; color: var(--tj-ink); direction: ltr; text-align: left; overflow-x: auto; }
body.tj pre.prettyprint span { color: var(--tj-ink) !important; }
body.tj pre.prettyprint .tag, body.tj pre.prettyprint .kwd { color: var(--tj-saffron-text) !important; }
body.tj pre.prettyprint .str, body.tj pre.prettyprint .atv { color: var(--tj-ok) !important; }
body.tj pre.prettyprint .com { color: var(--tj-ink-3) !important; }
body.tj .md-editor .markdown-editor-status, body.tj .md-editor .small-font { color: var(--tj-ink-2) !important; }

/* MarketConnect landing pages (Weebly): same field, tokens, no white blocks */
body.tj .landing-page, body.tj .landing-page .hero, body.tj .landing-page .content-block { background: transparent !important; color: var(--tj-ink); }
body.tj .landing-page .content-block { border-top: 1px solid var(--tj-rule); padding-block: clamp(32px, 5vw, 64px); }
body.tj .landing-page .content-block.features, body.tj .landing-page .content-block.faq { background: var(--tj-sunk) !important; }
body.tj .landing-page h1, body.tj .landing-page h2, body.tj .landing-page h3, body.tj .landing-page h4, body.tj .landing-page h5 { color: var(--tj-ink) !important; }
body.tj .landing-page p, body.tj .landing-page .lead, body.tj .landing-page li { color: var(--tj-ink-2) !important; }
body.tj .landing-page .hero .logo-container img { max-width: min(320px, 70vw); height: auto; }
body.tj .landing-page .navbar { background: var(--tj-surface) !important; border: 1px solid var(--tj-rule); border-radius: var(--tj-radius); padding: 4px !important; margin-top: 18px; }
body.tj .landing-page .navbar .nav-link { color: var(--tj-ink-2) !important; font-weight: 650; padding: 10px 14px !important; border: 0 !important; }
body.tj .landing-page .navbar .nav-link:hover { color: var(--tj-ink) !important; }
body.tj .landing-page .navbar .navbar-toggler { border-color: var(--tj-rule-2); }
body.tj .landing-page .feature .icon img, body.tj .landing-page .features img { filter: none; opacity: .9; }
body.tj .landing-page .features h4, body.tj .landing-page .feature h4 { color: var(--tj-saffron-text) !important; }
body.tj .landing-page .weebly-lite-plan { background: var(--tj-surface) !important; border: 1px solid var(--tj-rule); border-inline-start: 3px solid var(--tj-saffron); border-radius: var(--tj-radius); color: var(--tj-ink) !important; }
body.tj .landing-page .weebly-lite-plan * { color: var(--tj-ink) !important; }
body.tj .landing-page .pricing-item { background: var(--tj-surface) !important; border: 1px solid var(--tj-rule) !important; border-radius: 14px; overflow: hidden; color: var(--tj-ink); }
body.tj .landing-page .pricing-item .header { background: transparent !important; color: var(--tj-ink) !important; border-bottom: 1px solid var(--tj-rule); }
body.tj .landing-page .pricing-item .price { color: var(--tj-ink) !important; font-weight: 800; }
body.tj .landing-page .pricing-item .feature-heading { background: var(--tj-sunk) !important; color: var(--tj-ink-3) !important; border: 0; font-weight: 700; }
body.tj .landing-page .pricing-item ul li { background: transparent !important; border-color: var(--tj-rule) !important; color: var(--tj-ink-2) !important; }
body.tj .landing-page .btn-signup { background: var(--tj-madder) !important; border-color: var(--tj-madder) !important; color: #fff !important; min-height: 46px; }
body.tj .landing-page .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
body.tj .landing-page .btn-group > .btn { flex: 0 1 auto; margin: 0 !important; border-radius: 999px !important; border: 1px solid var(--tj-rule-2); background: var(--tj-surface); color: var(--tj-ink-2); font-size: 14px; }
body.tj .landing-page .btn-group > .btn.active { background: var(--tj-ink) !important; color: var(--tj-field) !important; border-color: var(--tj-ink); }
body.tj .landing-page .pricing.float-right, body.tj .landing-page .currency-selector { max-width: 100%; }
body.tj .landing-page .trusted-by .row { margin-inline: 0; }
body.tj .landing-page .trusted-by .col-sm-7, body.tj .landing-page .trusted-by .col-sm-5 { text-align: center !important; }
body.tj .landing-page .faq h4 { color: var(--tj-ink) !important; }
@media (max-width: 767px) { body.tj .landing-page .container { padding-inline: 16px; } body.tj .landing-page .pricing.float-right { float: none !important; margin-top: 12px; } }
body.tj .landing-page, body.tj .landing-page h1, body.tj .landing-page h2, body.tj .landing-page h3, body.tj .landing-page h4, body.tj .landing-page p, body.tj .landing-page .btn { font-family: var(--tj-font) !important; }
body.tj .landing-page .weebly-plans > [class*="col-"] { margin-bottom: 28px; }
@media (max-width: 767px) { body.tj .landing-page .navbar { display: none !important; } }
body.tj .landing-page .navbar { max-width: calc(var(--tj-max) - 32px); margin-inline: auto; }

/* domain pages: featured TLD boxes, promo boxes, Bootstrap text colours */
body.tj .featured-tlds-container .featured-tld, body.tj div.featured-tld { background: var(--tj-surface) !important; border: 1px solid var(--tj-rule) !important; border-radius: var(--tj-radius); color: var(--tj-ink); }
body.tj .featured-tlds-container .featured-tld .price, body.tj div.featured-tld div.price { background: var(--tj-sunk) !important; color: var(--tj-ink) !important; font-weight: 700; }
body.tj .domain-promo-box { background: var(--tj-surface) !important; border: 1px solid var(--tj-rule) !important; border-radius: var(--tj-radius); color: var(--tj-ink); }
body.tj .domain-promo-box p.small { color: var(--tj-ink-3) !important; }
body.tj .text-warning { color: var(--tj-warn) !important; }
body.tj .text-primary, body.tj .text-info { color: var(--tj-ink) !important; }
body.tj .text-success { color: var(--tj-ok) !important; }
body.tj .domain-pricing .tld-pricing-header, body.tj .tld-pricing-header { background: var(--tj-sunk) !important; color: var(--tj-ink-2) !important; }
body.tj .domain-pricing .bg-white .row, body.tj .domain-pricing [class*="col-"] { background-color: transparent !important; }
body.tj .featured-tld .img-container { background: #fbf9f4; border-radius: var(--tj-radius) var(--tj-radius) 0 0; }
body.tj .verification-banner .btn.btn-resend-verify-email { background: var(--tj-ink) !important; border-color: var(--tj-ink) !important; color: var(--tj-field) !important; }
body.tj .verification-banner { background: color-mix(in srgb, var(--tj-saffron) 12%, var(--tj-field)) !important; }
/* modals: no blue header bars */
body.tj .modal-header, body.tj .modal-header.bg-primary, body.tj .modal-header.panel-heading { background: transparent !important; color: var(--tj-ink) !important; }
body.tj .modal-header .modal-title, body.tj .modal-header h4, body.tj .modal-header h5 { color: var(--tj-ink) !important; }
body.tj .modal-header .close { color: var(--tj-ink-2) !important; opacity: 1; }
/* resend-verification button: full label */
body.tj .verification-banner .btn-resend-verify-email { white-space: nowrap; overflow: visible; text-overflow: clip; width: auto !important; min-width: max-content; padding-inline: 16px; }
@media (max-width: 767px) { body.tj .verification-banner .btn-resend-verify-email { width: 100% !important; min-width: 0; white-space: normal; } }
/* mobile sheet always leaves a strip of page to tap */
@media (max-width: 1099.98px) {
    .tj-nav { max-height: calc(100vh - var(--tj-drawer-top, 64px) - 56px); max-height: calc(100dvh - var(--tj-drawer-top, 64px) - 56px); }
}

/* ---------- hover, focus and active states (WHMCS paints these light grey) ---------- */
body.tj .kb-category a:hover, body.tj .kb-article-item:hover, body.tj .kb-category a:focus, body.tj .kb-article-item:focus,
body.tj .tiles .tile:hover, body.tj .select-account a:hover, body.tj .popover-user-notifications ul li a:hover,
body.tj .list-group-item-action:hover, body.tj .list-group-item-action:focus,
body.tj .dropdown-item:hover, body.tj .dropdown-item:focus,
body.tj .responsive-tabs-sm .nav-item a:hover, body.tj .table-list > tbody > tr:hover > td, body.tj .table-hover tbody tr:hover,
body.tj .modal-localisation .item-selector .item:hover, body.tj div.dtr-modal div.dtr-modal-close:hover {
    background-color: var(--tj-sunk) !important; color: var(--tj-ink) !important;
}
body.tj .kb-category a:hover .text-muted, body.tj .kb-article-item:hover small, body.tj .kb-category a:hover small { color: var(--tj-ink-3) !important; }
body.tj .modal-localisation .item-selector .item.active { background: var(--tj-ink) !important; color: var(--tj-field) !important; border-color: var(--tj-ink) !important; }
body.tj .responsive-tabs-sm .nav-item a.active, body.tj .store-order-container .store-domain-tabs li.active a { background-color: transparent !important; color: var(--tj-ink) !important; }
body.tj .page-link:hover { background: var(--tj-sunk); color: var(--tj-ink); border-color: var(--tj-rule); }
body.tj .btn-default:hover, body.tj .btn-default:focus, body.tj .btn-default.active, body.tj .btn-default:active,
body.tj .btn-light:hover, body.tj .btn-light:focus, body.tj .btn-outline-light:hover {
    background-color: var(--tj-sunk) !important; color: var(--tj-ink) !important; border-color: var(--tj-saffron) !important;
}
body.tj .input-group .btn-reveal-pw:hover, body.tj .input-group .btn-reveal-pw:active { background: var(--tj-sunk); color: var(--tj-ink); border-color: var(--tj-rule-2); }
body.tj .form-control:focus, body.tj .custom-select:focus, body.tj select.form-control:focus, body.tj textarea.form-control:focus,
body.tj .md-editor > textarea:focus, body.tj .md-editor.md-fullscreen-mode .md-input:focus, body.tj .md-editor.md-fullscreen-mode .md-input:hover {
    background-color: var(--tj-surface) !important; color: var(--tj-ink) !important;
}
body.tj #order-standard_cart .account-select-container div.account.active { background: var(--tj-sunk) !important; color: var(--tj-ink); }
body.tj a.badge-light:hover, body.tj a.bg-light:hover, body.tj button.bg-light:hover { background-color: var(--tj-sunk) !important; color: var(--tj-ink) !important; }
body.tj .bootstrap-switch .bootstrap-switch-handle-off:hover, body.tj .bootstrap-switch .bootstrap-switch-handle-on:hover { filter: brightness(1.08); }
/* placeholders never get cut: shorter text plus ellipsis as a last resort */
body.tj .form-control::placeholder { text-overflow: ellipsis; }
body.tj .verification-banner .btn.btn-resend-verify-email:hover, body.tj .verification-banner .btn.btn-resend-verify-email:focus { background: color-mix(in srgb, var(--tj-ink) 86%, var(--tj-saffron)) !important; color: var(--tj-field) !important; border-color: transparent !important; }
body.tj .page-item.active .page-link:hover { background: var(--tj-ink) !important; color: var(--tj-field) !important; }
body.tj .btn-warning:hover, body.tj .btn-warning:focus, body.tj a.btn-warning:hover { background: color-mix(in srgb, var(--tj-saffron) 85%, #000) !important; border-color: transparent !important; color: #1a1405 !important; }
body.tj .kb-category a { border-radius: inherit; }
body.tj .kb-category .card, body.tj .kb-category a { overflow: hidden; }
body.tj .badge-info, body.tj .badge-primary, body.tj .kb-category .badge, body.tj a:hover .badge-info, body.tj a:hover .badge-primary { background: var(--tj-ink) !important; color: var(--tj-field) !important; }