/* =========================================================================
   SarvCloud — Client Area Child Theme
   templates/sarvcloud/css/custom.css

   Phase 2A: Visual foundation only.
   Parent theme: twenty-one
   This file is the global override stylesheet automatically loaded by the
   WHMCS child-theme mechanism for templates/sarvcloud.

   Scope of this phase: design tokens, RTL foundation, local font wiring,
   conservative typography, and light global styling for buttons/surfaces/
   forms/links. No page-specific templates are overridden here, no
   navigation restructuring, no component hiding.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. SarvCloud Design Tokens
   ------------------------------------------------------------------------- */

/*
 * Color-system rebuild (post visual review): the previous single dark
 * palette was applied unevenly — some elements lost CSS specificity
 * battles against Twenty-One's own rules (see the "SARVCLOUD HEADER" and
 * "SARVCLOUD FOOTER" section comments below for the confirmed specifics),
 * producing a disconnected white-header / near-black-content /
 * gray-footer result instead of one coherent product. This is now a
 * light-first SaaS palette for the page/header/content, with a single
 * deliberate deep-navy zone reserved for the footer only.
 */
:root {
    /* Page & light surfaces (header, content, cards, dropdowns, modals) */
    --sarv-page-bg: #F5F7FB;
    --sarv-surface: #FFFFFF;
    --sarv-surface-soft: #F8FAFD;

    /* Deep navy — footer only, not used for header/content */
    --sarv-navy-950: #050A14;
    --sarv-navy-900: #08101F;
    --sarv-navy-800: #0D1830;

    /* Accents */
    --sarv-blue: #2563EB;
    --sarv-blue-hover: #1D4ED8;
    --sarv-cyan: #22D3EE;
    --sarv-teal: #14B8A6;

    /* Text — on light surfaces */
    --sarv-text: #172033;
    --sarv-text-secondary: #667085;
    --sarv-text-muted: #98A2B3;

    /* Borders — on light surfaces */
    --sarv-border: #E4EAF3;
    --sarv-border-soft: #EEF2F7;
    /* Resting border for INTERACTIVE controls. --sarv-border is a
       divider tone: it measures 1.13:1 against the page background and
       1.21:1 against a card, far below the 3:1 WCAG asks for a non-text
       UI boundary, so a button drawn with it has no visible edge until
       hover. This is the lightest blue-tint that clears 3:1 on every
       surface the theme uses (page 3.21, card 3.45, soft 3.30). */
    --sarv-border-interactive: #7D8BA3;

    /* Text — on the dark navy footer only */
    --sarv-footer-text: #EAF0FA;
    --sarv-footer-text-secondary: #94A3B8;
    --sarv-footer-link: #CBD5E1;
    --sarv-footer-link-hover: #FFFFFF;

    /* Radii */
    --sarv-radius-sm: 10px;
    --sarv-radius-md: 14px;
    --sarv-radius-lg: 18px;
}


/* -------------------------------------------------------------------------
   2. Local Font: IRANYekanX
   ------------------------------------------------------------------------- */

/*
 * Local font files, self-hosted under templates/sarvcloud/fonts/:
 *   IRANYekanXFaNum-Regular.woff2  (weight 400)
 *   IRANYekanXFaNum-Bold.woff2     (weight 700)
 *
 * No Google Fonts, no external CDN, no other font files referenced here.
 *
 * Intermediate weights (500, 600, 800) are mapped onto these same two
 * files via additional @font-face weight ranges below, so that any UI
 * element requesting one of those weights resolves to the correct real
 * file instead of the browser synthesizing a fake bold/oblique. No new
 * font files or synthesized weights are introduced.
 */

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanXFaNum-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanXFaNum-Regular.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanXFaNum-Bold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanXFaNum-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanXFaNum-Bold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Primary Persian font stack. IRANYekanX now resolves to the local
       self-hosted files declared above; Tahoma/Arial only apply if the
       local font fails to load for some reason. */
    --sarv-font-fa: "IRANYekanX", Tahoma, Arial, sans-serif;

    /* Kept as an alias for continuity with earlier Phase 2A styling below,
       which references --sarv-font-sans. */
    --sarv-font-sans: var(--sarv-font-fa);

    --sarv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}


/* -------------------------------------------------------------------------
   3. RTL Base
   ------------------------------------------------------------------------- */

html[dir="rtl"],
html[lang="fa"] {
    direction: rtl;
}

html[dir="rtl"] body,
html[lang="fa"] body {
    text-align: right;
}

/* Utility classes for technical content that must remain LTR regardless of
   surrounding RTL context. Not yet applied to any Smarty template in this
   phase — reserved for future use once page templates are touched.
   Intended future use: email addresses, domain names, URLs, IP addresses,
   usernames, ticket IDs, invoice IDs, technical codes, phone numbers. */

.sarv-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

.sarv-code {
    direction: ltr;
    unicode-bidi: isolate;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;
}

.sarv-phone {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}


/* -------------------------------------------------------------------------
   4. Conservative Global Typography
   ------------------------------------------------------------------------- */

/* Applied only under RTL / Persian-language context — English/default
   pages are unaffected. Covers common UI content surfaces without
   touching icon fonts or technical/monospace content. */
html[dir="rtl"] body,
html[lang="fa"] body,
html[dir="rtl"] .btn,
html[lang="fa"] .btn,
html[dir="rtl"] input,
html[lang="fa"] input,
html[dir="rtl"] select,
html[lang="fa"] select,
html[dir="rtl"] textarea,
html[lang="fa"] textarea,
html[dir="rtl"] .navbar,
html[lang="fa"] .navbar,
html[dir="rtl"] .nav,
html[lang="fa"] .nav,
html[dir="rtl"] h1,
html[lang="fa"] h1,
html[dir="rtl"] h2,
html[lang="fa"] h2,
html[dir="rtl"] h3,
html[lang="fa"] h3,
html[dir="rtl"] h4,
html[lang="fa"] h4,
html[dir="rtl"] h5,
html[lang="fa"] h5,
html[dir="rtl"] h6,
html[lang="fa"] h6,
html[dir="rtl"] .panel,
html[lang="fa"] .panel,
html[dir="rtl"] .card,
html[lang="fa"] .card,
html[dir="rtl"] .alert,
html[lang="fa"] .alert,
html[dir="rtl"] table,
html[lang="fa"] table,
html[dir="rtl"] .modal-content,
html[lang="fa"] .modal-content {
    font-family: var(--sarv-font-fa);
}

/* Bug fix (post Phase 2B-1 review): this rule previously forced
   font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important
   on icon elements. This WHMCS 9.0.6 install actually loads Font Awesome
   6 (confirmed by inspecting assets/fonts/css/fontawesome*.min.css —
   family names are "Font Awesome 6 Pro", "Font Awesome 6 Brands", "Font
   Awesome 6 Duotone", "Font Awesome 6 Sharp", "Font Awesome 6 Sharp
   Duotone"). Since "Font Awesome 5 Free" is never loaded anywhere in this
   install, that !important rule made every icon under html[lang="fa"]
   unresolvable, rendering as an empty "tofu" glyph — a bug introduced by
   this stylesheet itself, not a WHMCS/Twenty-One issue.
   The fix is to not fight the cascade at all: FontAwesome's own
   .fa/.fas/.far/.fab/etc. rules (loaded earlier, in includes/head.tpl)
   already set the correct font-family directly on icon elements, and a
   direct rule targeting an element always wins over an inherited value
   from an ancestor (body's font-family here) — no override was ever
   needed. This selector list is kept only to explicitly document and
   guarantee that icon classes are never assigned the SarvCloud sans
   stack by any current or future rule in this file — it intentionally
   contains no font-family declaration. */
html[dir="rtl"] [class*="fa-"],
html[lang="fa"] [class*="fa-"],
html[dir="rtl"] .fa,
html[lang="fa"] .fa,
html[dir="rtl"] .fas,
html[lang="fa"] .fas,
html[dir="rtl"] .far,
html[lang="fa"] .far,
html[dir="rtl"] .fab,
html[lang="fa"] .fab {
    /* Deliberately no font-family rule here — see comment above. */
}

html[dir="rtl"] code,
html[lang="fa"] code,
html[dir="rtl"] pre,
html[lang="fa"] pre,
html[dir="rtl"] kbd,
html[lang="fa"] kbd,
html[dir="rtl"] samp,
html[lang="fa"] samp {
    font-family: var(--sarv-font-mono);
    direction: ltr;
    unicode-bidi: isolate;
}


/* -------------------------------------------------------------------------
   5. Basic Buttons, Surfaces, Forms, Links (light global styling only)
   ------------------------------------------------------------------------- */

/* Primary buttons */
.btn-primary {
    background-color: var(--sarv-blue);
    border-color: var(--sarv-blue);
    border-radius: var(--sarv-radius-sm);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--sarv-blue-hover);
    border-color: var(--sarv-blue-hover);
}

/* Secondary / default buttons — light surface, dark text, since content
   pages are light now (not the dark surface used in the earlier pass). */
.btn-default,
.btn-secondary {
    background-color: var(--sarv-surface);
    /* Interactive tone, not the divider tone: the label was always readable
       at 16:1, but the button SHAPE was not, so a default button read as
       plain text until hover raised the border to the accent. */
    border-color: var(--sarv-border-interactive);
    color: var(--sarv-text);
    border-radius: var(--sarv-radius-sm);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-secondary:focus {
    border-color: var(--sarv-blue);
    color: var(--sarv-text);
}

/* Cards / panels */
.panel,
.card {
    border-color: var(--sarv-border);
    border-radius: var(--sarv-radius-md);
}

.panel-heading,
.card-header {
    border-color: var(--sarv-border);
    border-top-left-radius: var(--sarv-radius-md);
    border-top-right-radius: var(--sarv-radius-md);
}

/* Form controls */
.form-control {
    border-color: var(--sarv-border);
    border-radius: var(--sarv-radius-sm);
}

.form-control:focus {
    border-color: var(--sarv-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Basic links — hover uses the darker blue, not cyan: cyan reads clearly
   against the dark footer but doesn't have enough contrast for body text
   on the new light page background. */
a {
    color: var(--sarv-blue);
}

a:hover,
a:focus {
    color: var(--sarv-blue-hover);
}



/* =========================================================================
   PHASE 2B-1 (COLOR SYSTEM CORRECTION) — SARVCLOUD CLIENT AREA SHELL
   Full color-system rebuild after visual review of an actual browser
   screenshot rejected the previous result: white header, near-black
   content background, and a "muddy medium gray" footer reading as three
   unrelated zones instead of one product.

   ROOT CAUSE FOUND (not guessed): several rules in the previous pass used
   a single SarvCloud class (e.g. `.sarv-header { background-color: ... }`,
   `.sarv-footer { background-color: ... }`) on elements that ALSO carry a
   stock Twenty-One class. Twenty-One's own theme.css sets those same
   elements via compound selectors of HIGHER specificity —
   `header.header { background-color: #fff; }` (element+class beats a
   plain class) and `footer.footer { background-color: #404040; }` — so
   the stock white header and stock gray footer were winning regardless of
   source order, no matter what color this stylesheet intended. Confirmed
   by reading templates/twenty-one/css/theme.css directly (lines ~9564 and
   ~9702), not assumed.

   FIX: every header-scoped rule below is anchored to `#header` and every
   footer-scoped rule to `#footer` — an ID always outranks Twenty-One's
   `element.class` selectors, so this stylesheet's intended colors now
   reliably win. This also happens to be the right fix for the *new*
   design direction anyway: light header, light content, and ONE
   deliberate deep-navy footer zone — see the design tokens above (:root)
   for the full palette. No WHMCS dynamic content, hook output, or
   Bootstrap/FontAwesome dependency is touched by any of this — this is a
   pure color/layout correction on top of the same markup structure from
   the prior shell rebuild.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SARVCLOUD SHELL
   Shared light page background for header/content/public+login pages.
   The footer is the one deliberate dark zone — see SARVCLOUD FOOTER.
   ------------------------------------------------------------------------- */

body.primary-bg-color {
    background-color: var(--sarv-page-bg);
    background-image: linear-gradient(180deg, #F8FAFD 0%, #F3F6FB 100%);
}

#main-body {
    padding-top: 1.75rem;
    padding-bottom: 3rem;
}

.sarv-breadcrumb {
    background-color: transparent;
    border-bottom: 1px solid var(--sarv-border);
    padding: 0.6rem 0;
}

.sarv-breadcrumb .breadcrumb {
    background-color: transparent;
    margin: 0;
    padding: 0;
    color: var(--sarv-text-muted);
}

/* Soft, non-exaggerated shadow on cards/panels site-wide (includes the
   stock Twenty-One login card, which is not overridden by any SarvCloud
   template — this rule alone is what gives it the white/bordered/
   shadowed/rounded "floating card" look requested for the login page,
   with no login.tpl override needed). */
.panel,
.card {
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04), 0 4px 16px rgba(23, 32, 51, .05);
}


/* -------------------------------------------------------------------------
   SARVCLOUD HEADER
   White, ~72px, subtle bottom border. Every rule in this section is
   anchored to #header specifically to beat Twenty-One's own
   `header.header { background-color: #fff; }` and related compound
   selectors — see the root-cause note above. (The end result color here
   happens to already match Twenty-One's own white default — the fix is
   about making that reliable/intentional, and about correcting
   everything Twenty-One does NOT already handle: nav colors, dropdowns,
   the search control, utility buttons.)
   ------------------------------------------------------------------------- */

#header {
    background-color: var(--sarv-surface);
    border-bottom: 1px solid var(--sarv-border);
}

#header .sarv-navbar {
    background-color: transparent;
    padding: 0;
}

#header .sarv-navbar-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 72px;
    max-width: 1200px;
    margin-inline: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    flex-wrap: nowrap;
}

.sarv-navbar-brand {
    display: flex;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
}

.sarv-logo-img {
    /* CSS sizing only — the source PNG itself is never resized. Slightly
       larger than the previous pass (40px) for a more confident mark on
       a white background. */
    height: 42px;
    width: auto;
}

#header .sarv-navbar-toggler {
    border-color: var(--sarv-border);
    border-radius: var(--sarv-radius-sm);
    padding: 0.35rem 0.6rem;
    color: var(--sarv-text-secondary);
    flex-shrink: 0;
    margin-inline-start: auto;
}

#header .sarv-navbar-toggler:hover,
#header .sarv-navbar-toggler:focus {
    color: var(--sarv-blue);
    border-color: var(--sarv-blue);
}

.sarv-navbar-collapse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    flex-wrap: wrap;
    /* wrap, not nowrap: overflow safety net for a long WHMCS menu (this
       install renders 10 top-level items) — drops to a second line
       instead of ever causing page-level horizontal scroll. */
    row-gap: 0.5rem;
    gap: 1.5rem;
}

/* Utility cluster: search, cart, notifications, support, account. Compact
   icon-first controls — not a second navigation row. */
#header .sarv-header-utilities {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* Separates the "activity" utilities (search/cart/notifications) from
   the "people" ones (support/account) — purely visual, aria-hidden. */
.sarv-utility-divider {
    display: inline-block;
    width: 1px;
    height: 24px;
    background-color: var(--sarv-border);
    margin: 0 0.4rem;
    flex-shrink: 0;
}

#header .sarv-utility-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    height: 40px;
    padding: 0 0.6rem;
    border-radius: var(--sarv-radius-sm);
    color: var(--sarv-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    line-height: 1;
}

#header .sarv-utility-btn:hover,
#header .sarv-utility-btn:focus {
    color: var(--sarv-blue);
    background-color: var(--sarv-surface-soft);
    text-decoration: none;
}

/* Labels (notification text, support label/number) are hidden in the
   compact desktop utility bar and revealed inside the mobile panel.
   Nothing is removed from the DOM; this is a pure visibility reflow of
   WHMCS's own existing text/lang-key output. */
.sarv-utility-label,
.sarv-support-number {
    display: none;
}

#header .sarv-notif-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--sarv-blue);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
}

#header .sarv-notif-zero {
    background-color: transparent;
    color: var(--sarv-text-muted);
}

#header .sarv-support-btn {
    color: var(--sarv-text-secondary);
}

.sarv-support-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--sarv-teal);
    flex-shrink: 0;
}

/* Compact search — one unified light control, icon integrated inside it
   (not a separate dark square button). Deliberately smaller than the
   40px utility buttons and visually quiet until focused, so it reads as
   secondary to navigation. Same underlying WHMCS search form/route. */
#header .sarv-search-form {
    margin: 0;
}

#header .sarv-search-group {
    max-width: 220px;
    height: 38px;
    background-color: var(--sarv-page-bg);
    border: 1px solid var(--sarv-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

#header .sarv-search-group .input-group-prepend,
#header .sarv-search-group .btn-default {
    background-color: transparent;
    border: none;
    color: var(--sarv-text-muted);
    height: 36px;
    padding: 0 0.5rem;
    box-shadow: none;
}

#header .sarv-search-group .form-control {
    background-color: transparent;
    border: none;
    color: var(--sarv-text);
    height: 36px;
    font-size: 0.85rem;
    box-shadow: none;
}

#header .sarv-search-group .form-control::placeholder {
    color: var(--sarv-text-muted);
}

#header .sarv-search-group:focus-within {
    background-color: var(--sarv-surface);
    border-color: var(--sarv-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

#header .sarv-cart-btn {
    color: var(--sarv-text-secondary);
}

#header .sarv-cart-btn .badge {
    position: relative;
    top: -1px;
    background-color: var(--sarv-blue);
}

/* Active-client / switch-account / admin-return chip (only rendered when
   $loggedin — logic untouched in header.tpl, this is styling only).

   Width-budget note (authenticated header, real-browser-reported as
   "two rows"): logo + 10 primary-nav items + (when logged in) search,
   cart, notifications, this active-client chip (label + company-name
   badge + switch-account button), and the account-nav dropdown chip do
   not fit in one row at common desktop widths — a rough sum of each
   element's own CSS-defined width already exceeds 1900px before
   counting gaps. .sarv-navbar-collapse's flex-wrap: wrap (a deliberate
   overflow-safety net, not a bug) is very likely what's visually
   producing the "second row" reported. Hiding the redundant
   "Logged in as:" label below (it repeats information the company-name
   badge right next to it already shows) recovers some width, but a full
   fix — most likely an authenticated-utility overflow menu mirroring
   the primary nav's own "بیشتر" pattern — is a larger change than a
   safe CSS-only pass and is left for a dedicated future phase rather
   than forced here. */
#header .sarv-active-client .input-group-prepend {
    display: none !important;
}

#header .sarv-active-client .input-group-text {
    background-color: transparent;
    border: none;
    color: var(--sarv-text-muted);
    font-size: 0.8rem;
    padding-inline-end: 0.4rem;
}


#header .sarv-active-client .btn-active-client {
    display: inline-flex;
    align-items: center;
    max-width: 160px;
    height: 40px;
    padding: 0 0.75rem;
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-sm);
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#header .sarv-active-client .btn-group > .btn:not(.btn-active-client) {
    height: 40px;
    width: 40px;
    padding: 0;
    border: 1px solid var(--sarv-border);
    border-inline-start: none;
    color: var(--sarv-text-secondary);
    background-color: var(--sarv-surface-soft);
}

#header .sarv-active-client .btn-group > .btn:not(.btn-active-client):hover,
#header .sarv-active-client .btn-group > .btn:not(.btn-active-client):focus {
    color: var(--sarv-blue);
    border-color: var(--sarv-blue);
}

.sarv-active-client .btn-return-to-admin span {
    display: none;
}


/* -------------------------------------------------------------------------
   SARVCLOUD NAVIGATION
   Primary nav items and the account dropdown — styling only, no
   restructuring of includes/navbar.tpl's dynamic $primaryNavbar /
   $secondaryNavbar rendering. Dark text on white, muted inactive, blue
   active/hover — no underline/glow effects.
   ------------------------------------------------------------------------- */

.sarv-primary-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    row-gap: 0.25rem;
    /* wrap, not nowrap — overflow-safety, same reasoning as
       .sarv-navbar-collapse above. */
}

#header .sarv-primary-nav > li > a,
#header .sarv-account-nav > li > a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 0.85rem;
    border-radius: var(--sarv-radius-sm);
    color: var(--sarv-text-secondary);
}

#header .sarv-primary-nav > li > a:hover,
#header .sarv-primary-nav > li > a:focus,
#header .sarv-primary-nav > li.active > a,
#header .sarv-account-nav > li > a:hover,
#header .sarv-account-nav > li > a:focus {
    color: var(--sarv-blue);
    background-color: var(--sarv-surface-soft);
    text-decoration: none;
}

/* Account/user control — the secondaryNavbar's top-level dropdown trigger
   styled as a compact modern chip rather than a raw Bootstrap link. */
#header .sarv-account-nav > li > a.dropdown-toggle {
    border: 1px solid var(--sarv-border);
    background-color: var(--sarv-surface-soft);
}

#header .sarv-account-nav > li > a.dropdown-toggle:hover,
#header .sarv-account-nav > li > a.dropdown-toggle:focus {
    border-color: var(--sarv-blue);
}

#header .dropdown-menu {
    background-color: var(--sarv-surface);
    border-color: var(--sarv-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(23, 32, 51, .12);
    padding: 0.4rem;
    margin-top: 0.5rem;
    min-width: 200px;
    /* Explicit, above the header's own stacking context — Bootstrap's
       default z-index:1000 on .dropdown-menu was already sufficient (no
       competing z-index exists anywhere in this stylesheet), but this is
       stated explicitly so it isn't left implicit. */
    z-index: 1050;
}

#header .dropdown-item {
    color: var(--sarv-text-secondary);
    border-radius: var(--sarv-radius-sm);
    padding: 0.55rem 0.75rem;
}

#header .dropdown-item:hover,
#header .dropdown-item:focus {
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-blue);
}

#header .dropdown-divider {
    border-color: var(--sarv-border);
    margin: 0.3rem 0.2rem;
}


/* -------------------------------------------------------------------------
   SARVCLOUD MOBILE NAV
   Below 1200px, .sarv-navbar-collapse becomes Bootstrap's collapsible
   full-width panel. Top mobile bar shows only the logo and the toggler
   (both are outside the collapse); everything else — primary nav,
   search, cart, notifications, support (now with full label + number),
   account chip, account dropdown — lives inside the panel. Light surface,
   matching the rest of the header (not the dark navy panel from the
   previous pass).
   ------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    #header .sarv-navbar-container {
        flex-wrap: wrap;
        min-height: 64px;
    }

    #header .sarv-navbar-collapse {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.25rem;
        background-color: var(--sarv-surface-soft);
        border: 1px solid var(--sarv-border);
        border-radius: var(--sarv-radius-md);
        margin-top: 0.5rem;
        padding: 0.75rem;
    }

    .sarv-primary-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.15rem;
    }

    #header .sarv-primary-nav > li > a {
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 0.6rem 0.75rem;
    }

    #header .sarv-header-utilities {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.4rem;
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px solid var(--sarv-border);
    }

    #header .sarv-search-group {
        max-width: 100%;
        width: 100%;
    }

    #header .sarv-utility-btn {
        width: 100%;
        height: auto;
        min-height: 44px;
        justify-content: flex-start;
        padding: 0.6rem 0.75rem;
    }

    /* Reveal full labels/number inside the mobile panel — same elements,
       just no longer compacted to icon-only. */
    .sarv-utility-label,
    .sarv-support-number {
        display: inline;
    }

    #header .sarv-support-btn {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    #header .sarv-active-client .input-group.active-client {
        flex-wrap: wrap;
        width: 100%;
    }

    #header .sarv-active-client .btn-active-client {
        max-width: none;
        flex-grow: 1;
    }

    .sarv-active-client .btn-return-to-admin span {
        display: inline-block;
    }

    #header .sarv-account-nav {
        width: 100%;
    }

    #header .sarv-account-nav > li > a {
        width: 100%;
        height: auto;
        min-height: 44px;
    }

    /* The activity/people divider only makes sense as a thin vertical
       rule in the compact inline desktop bar; the mobile panel already
       has a border-top separator serving the same grouping purpose. */
    .sarv-utility-divider {
        display: none;
    }
}


/* -------------------------------------------------------------------------
   SARVCLOUD FOOTER
   The one deliberate dark zone. Every rule here is anchored to #footer to
   beat Twenty-One's `footer.footer { background-color: #404040; }` (the
   confirmed "muddy gray" root cause — see the section comment at the top
   of this block). CSS Grid, three columns (brand / support+links / trust
   badges), shared max-width matching the header, thin bottom bar for
   copyright. All required WHMCS footer output preserved in footer.tpl:
   {$footeroutput}, language/currency modal, TOS/contact links,
   generate-password include, admin-return control.
   ------------------------------------------------------------------------- */

#footer {
    background-color: var(--sarv-navy-950);
    color: var(--sarv-footer-text-secondary);
    border-top: none;
}

#footer .container {
    max-width: 1200px;
}

#footer .sarv-footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2rem;
    padding-block: 2rem;
    align-items: start;
}

.sarv-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sarv-footer-mark {
    /* Full logo (not just the icon mark) — reads as intentional branding
       rather than a stray small glyph. CSS-sized only; source PNG
       untouched. */
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

.sarv-footer-tagline {
    margin: 0;
    color: var(--sarv-footer-text-secondary);
    font-size: 0.85rem;
    max-width: 220px;
}

.sarv-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.sarv-footer-support {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.sarv-footer-support-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

#footer .sarv-footer-support-text .sarv-utility-label {
    display: block;
    color: var(--sarv-footer-text-secondary);
    font-size: 0.8rem;
}

#footer .sarv-footer-support-number {
    color: var(--sarv-footer-text);
    font-weight: 500;
}

.sarv-footer-social {
    margin: 0;
    padding: 0;
}

.sarv-footer-nav {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

#footer .sarv-footer-nav .nav-link,
#footer .sarv-footer-lang-btn {
    padding: 0.25rem 0.6rem;
    color: var(--sarv-footer-link);
    font-size: 0.85rem;
}

#footer .sarv-footer-nav .nav-link:hover,
#footer .sarv-footer-nav .nav-link:focus,
#footer .sarv-footer-lang-btn:hover,
#footer .sarv-footer-lang-btn:focus {
    color: var(--sarv-footer-link-hover);
}

/* Trust / license badges — own column, contained cells, never stretched.
   Subtle on the dark surface, deliberately not visually dominant. */
.sarv-footer-badges {
    min-width: 0;
}

#footer .sarv-footer-badges-heading {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sarv-footer-text-secondary);
}

.sarv-badges-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.sarv-badge-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    min-width: 90px;
    max-width: 110px;
    padding: 0.4rem;
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    /* Contains a provider's alt text if its image fails to load (see the
       CUSTOMIZATION-MAP.md badge-status note) so a broken image degrades
       to a clipped label instead of visibly stretching the footer — the
       external markup itself is never altered to achieve this. */
    overflow: hidden;
}

.sarv-badge-item:hover {
    background-color: rgba(255, 255, 255, .08);
}

/* Provider images: natural aspect ratio, never stretched or distorted.
   max-width/max-height + width/height:auto + object-fit — never a fixed
   width AND fixed height together. Applies generically to whatever
   markup each provider's embed produces (a plain <img>, or — for
   Zarinpal — whatever its document.write call injects), since none of
   that markup is modified here. */
.sarv-badge-item img {
    max-width: 100%;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (min-width: 1400px) {
    .sarv-badges-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

#footer .sarv-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 0.9rem 0;
}

#footer .sarv-copyright {
    color: var(--sarv-footer-text-secondary);
    font-size: 0.8rem;
    text-align: center;
}


/* -------------------------------------------------------------------------
   SARVCLOUD RESPONSIVE
   Overflow guards and narrow-width refinements.
   ------------------------------------------------------------------------- */

.sarv-header-utilities,
.sarv-footer-brand,
.sarv-footer-links,
.sarv-footer-badges {
    max-width: 100%;
}

/* The always-inline desktop range (>= 1200px) is the tightest fit: logo,
   full primary nav, and the whole utility cluster all share one row.
   Tighten gaps and shrink the search further here so nothing crowds
   before the layout would otherwise wrap (the flex-wrap: wrap above
   remains the hard backstop against overflow either way). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #header .sarv-navbar-container {
        gap: 1.25rem;
    }

    .sarv-navbar-collapse {
        gap: 1rem;
    }

    .sarv-primary-nav {
        gap: 0.1rem;
    }

    #header .sarv-primary-nav > li > a,
    #header .sarv-account-nav > li > a {
        padding: 0 0.6rem;
    }

    #header .sarv-header-utilities {
        gap: 0.15rem;
    }

    #header .sarv-search-group {
        max-width: 160px;
    }

    .sarv-utility-divider {
        margin: 0 0.25rem;
    }
}

/* Footer: three columns collapse to one on narrow viewports. Document
   order already gives the requested mobile order (brand, support+links,
   badges, copyright) with no extra CSS ordering needed. */
@media (max-width: 767.98px) {
    #footer .sarv-footer-top {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .sarv-footer-tagline {
        max-width: 100%;
    }
}


/* -------------------------------------------------------------------------
   SARVCLOUD RTL SHELL
   The header/footer use flexbox and CSS Grid with no mr-auto/ml-auto/
   float utility classes, so document order + `dir="rtl"` reversal
   (native browser behavior for both flexbox and grid track placement) —
   confirmed by inspection of the markup — already produces correct RTL
   layout without manual overrides for the layout itself. The remaining
   overrides below are Bootstrap-component-internal concerns (which edge
   a dropdown menu hangs from), not layout-flow concerns, so they still
   need an explicit flip. No icon is mirrored.
   ------------------------------------------------------------------------- */

html[dir="rtl"] .dropdown-menu-right,
html[lang="fa"] .dropdown-menu-right {
    right: auto;
    left: 0;
}

/* --- RTL PRIMARY-NAVIGATION DROPDOWN POSITIONING ------------------------
 *
 * CORRECTION TO A PREVIOUS DIAGNOSIS IN THIS FILE: an earlier revision
 * claimed Popper.js was injecting an inline `transform`/`left` that only
 * `!important` could beat, and shipped a `transform: none !important`
 * rule on that basis. That was WRONG. Popper *is* bundled, but the
 * bundled Bootstrap only instantiates it when the dropdown is NOT inside
 * a navbar — the minified source reads:
 *
 *     e.show = function(e){ ... if(!this._inNavbar && e){ ...
 *         this._popper = new o(n, this._menu, this._getPopperConfig()) } ... }
 *
 * Every menu here lives inside <nav class="navbar navbar-expand-xl ...">,
 * so `_inNavbar` is true, Popper never runs, and there is NO inline
 * transform/left on these menus at all. Positioning is therefore 100%
 * plain CSS, and `!important` is NOT warranted — so it has been removed.
 *
 * The real positioning inputs are only these stock Bootstrap rules:
 *   .dropdown-menu                              { position:absolute; top:100%; left:0; float:left }
 *   .navbar-nav .dropdown-menu                  { position:static; float:none }   <- mobile
 *   @media(min-width:1200px) .navbar-expand-xl .navbar-nav .dropdown-menu { position:absolute }
 *   .dropup,.dropright,.dropdown,.dropleft      { position:relative }             <- the anchor
 *
 * So under RTL the menus stayed pinned by `left: 0` (a physical LTR
 * value that never flips) instead of hanging from the trigger's right
 * edge. The rules below flip that, scoped to the SarvCloud primary nav
 * only — the account menu (.sarv-account-nav, which renders with
 * .dropdown-menu-right and is reported as behaving correctly) is
 * deliberately left to the separate .dropdown-menu-right rule above and
 * is NOT touched here.
 *
 * Everything positional is wrapped in @media (min-width: 1200px) on
 * purpose: below the navbar-expand-xl breakpoint Bootstrap switches
 * these menus to `position: static` so they render inline inside the
 * collapsed mobile panel, and offset properties must not interfere.
 * ------------------------------------------------------------------- */

/* Bootstrap ships `.dropdown-menu { text-align: left; }`, a physical
   value that never flips. Override the text alignment only — no
   positioning — scoped to the header menus. Verified by the project
   owner in browser DevTools. */
html[dir="rtl"] #header .dropdown-menu,
html[lang="fa"] #header .dropdown-menu {
    text-align: right;
}

@media (min-width: 1200px) {
    /* FIRST LEVEL — every primary-nav dropdown, including "بیشتر" (whose
       .collapsable-dropdown <li> is also a direct child of
       .sarv-primary-nav). Anchors to the trigger's own <li>, which is the
       containing block via Bootstrap's `.dropdown { position: relative }`.
       Right edges align; 6px vertical gap. */
    html[dir="rtl"] #header .sarv-primary-nav > li > .dropdown-menu,
    html[lang="fa"] #header .sarv-primary-nav > li > .dropdown-menu {
        top: 100%;
        right: 0;
        left: auto;
        margin-top: 6px;
    }

    /* NESTED SUBMENUS — these exist only inside "بیشتر", and only at
       widths where the nav actually overflows. autoCollapse() in
       scripts.min.js relocates overflowing items with:
           s.removeClass().addClass("dropdown-item").prependTo(".collapsable-dropdown-menu")
       removeClass() with no argument strips EVERY class, so an item that
       had children arrives as <li class="dropdown-item"> — it has lost
       the `.dropdown` class and therefore lost `position: relative`,
       while still carrying its own child <ul class="dropdown-menu">.
       That child then resolved its offsets against the outer
       .collapsable-dropdown-menu instead of against its own row. Restore
       the anchor, then open the child panel on the RIGHT of its parent
       row per the explicit SarvCloud design requirement (`left: 100%`
       places the child's left edge at the parent's right edge; `left`
       and `right` are physical properties and do not flip under
       direction: rtl). Opening rightward here also happens to open back
       toward page centre — "بیشتر" is the last DOM child of the nav, so
       under RTL it sits at the row's left end — which keeps the panel
       inside the viewport rather than pushing it off-screen. */
    html[dir="rtl"] #header .collapsable-dropdown-menu > li,
    html[lang="fa"] #header .collapsable-dropdown-menu > li {
        position: relative;
    }

    html[dir="rtl"] #header .collapsable-dropdown-menu > li > .dropdown-menu,
    html[lang="fa"] #header .collapsable-dropdown-menu > li > .dropdown-menu {
        top: 0;
        left: 100%;
        right: auto;
        margin: 0 0 0 6px;
    }
}


/* =========================================================================
   CONTENT PAGE POLISH — register page and other .primary-content /
   .sidebar pages
   Targeted CSS-only spacing refinement, not a redesign. Scoped to the
   shared shell layout (sidebar + primary-content columns, card sections,
   form groups) used by clientregister.tpl and other content pages — no
   template file touched, no business logic/field set altered.
   ========================================================================= */

/* Breathing room below the header before content starts, without adding
   large empty space — a small, deliberate bump (1.75rem -> 2rem). */
#main-body {
    padding-top: 2rem;
}

/* Gap between stacked section cards (personal info / billing address /
   etc. on the register page). Bootstrap's .mb-4 utility is !important,
   so matching !important is required to adjust it here — documented per
   project convention. */
.primary-content .card.mb-4 {
    margin-bottom: 1.75rem !important;
}

/* Section titles get more breathing room and a subtle separator from
   their fields, instead of sitting flush against the first input —
   overrides theme.css's `.primary-content .card-title { margin: 0 0
   20px 0; }`, which has no !important, so a plain override is enough. */
.primary-content .card-title {
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--sarv-border-soft);
    font-weight: 600;
    color: var(--sarv-text);
}

/* Slightly more room between form fields within a section. */
.primary-content .form-group {
    margin-bottom: 1.25rem;
}

/* Register-field icon overlap (RTL). clientregister.tpl wraps each field
   as:
     <div class="form-group prepend-icon">
       <label class="field-icon"><i class="fas fa-user"></i></label>
       <input class="field form-control" ...>
     </div>
   Stock theme.css pairs the absolutely-positioned .field-icon with
     #registration .prepend-icon .field { padding-left: 36px; }
   That padding-left is a physical property, so it never flips under
   direction: rtl — the input kept clearing space on its LEFT while the
   icon and the right-aligned Persian text both occupied the RIGHT.
   Fix: move the same 36px of clearance to the right for RTL only.
   Verified by the project owner in browser DevTools; the icon needs no
   positioning override of its own, so none is applied here. Covers the
   country <select> too, which uses this identical markup. */
html[dir="rtl"] #registration .prepend-icon .field,
html[lang="fa"] #registration .prepend-icon .field {
    padding-left: 0;
    padding-right: 36px;
}

/* On mobile/tablet, Bootstrap's grid already stacks the sidebar above
   .primary-content (col-lg-4/col-lg-8 only apply at the lg breakpoint) —
   this just adds clean spacing between them once stacked, so the side
   card doesn't sit flush against the main content below it. */
@media (max-width: 991.98px) {
    .sidebar {
        margin-bottom: 1.5rem;
    }
}


/* =========================================================================
   PHASE 2B-2 — SARVCLOUD AUTHENTICATION UI
   Login, register, password reset (all states), 2FA, email verification.

   Scoping: Twenty-One's <body> carries no page identifier, so header.tpl
   appends `sarv-page-{$templatefile}` (an additive class only). Every
   rule below is scoped either to those page classes or to an auth-only
   hook class, so nothing here leaks into the dashboard, services,
   billing, tickets or the order form.

   Only two templates were overridden (login.tpl, clientregister.tpl);
   every other auth page is styled from here against stock markup.
   FontAwesome font-family is never touched — see the icon-font note
   earlier in this file.
   ========================================================================= */

/* Page classes that make up the authentication surface. */
.sarv-page-login,
.sarv-page-clientregister,
.sarv-page-password-reset-container,
.sarv-page-twofactorauth,
.sarv-page-user-verify-email {
    --sarv-auth-card-max: 480px;
}

/* ---- Auth card shell ---------------------------------------------------
   Stock auth pages already render `.card.mw-540`; Twenty-One caps that at
   540px. Tighten to the 420–520px target and apply the approved card
   treatment. .mw-540 is Twenty-One's own class, so this is scoped to auth
   pages only to avoid touching any other page that uses it. */
.sarv-page-login .mw-540,
.sarv-page-password-reset-container .mw-540,
.sarv-page-twofactorauth .mw-540,
.sarv-page-user-verify-email .mw-540 {
    max-width: var(--sarv-auth-card-max);
    width: 100%;
    margin-inline: auto;
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04), 0 8px 28px rgba(23, 32, 51, .06);
}

/* The reset flow nests its states inside a .row wrapper. */
.sarv-page-password-reset-container #main-body > .container > .row {
    justify-content: center;
}

/* Heading + helper text block shared by every auth page. */
.sarv-page-login .card-body > .mb-4 > .h3,
.sarv-page-password-reset-container .card-body .h3,
.sarv-page-twofactorauth .card-title {
    font-weight: 700;
    color: var(--sarv-text);
    margin-bottom: 0.35rem;
}

.sarv-page-login .card-body > .mb-4 > .text-muted,
.sarv-page-password-reset-container .card-body > p:first-of-type {
    color: var(--sarv-text-secondary);
    font-size: 0.9rem;
}

/* Card footer ("not registered? create account") */
.sarv-page-login .card-footer,
.sarv-page-twofactorauth .card-footer {
    background-color: var(--sarv-surface-soft);
    border-top: 1px solid var(--sarv-border-soft);
    border-radius: 0 0 16px 16px;
    padding-block: 1rem;
    text-align: center;
}

/* ---- Auth form controls ------------------------------------------------
   Consistent 42px control height across inputs, selects and input-groups
   on auth pages. Kept inside the auth scope so the shared dashboard form
   styling from the approved design system is untouched. */
.sarv-page-login .form-control,
.sarv-page-password-reset-container .form-control,
.sarv-page-twofactorauth .form-control,
.sarv-page-clientregister .form-control,
.sarv-page-clientregister #registration .field {
    height: 42px;
    border-radius: 10px;
    border-color: var(--sarv-border);
    color: var(--sarv-text);
    font-size: 0.9rem;
}

.sarv-page-clientregister #registration textarea.field,
.sarv-page-clientregister textarea.form-control {
    height: auto;
    min-height: 90px;
}

.sarv-page-login .form-control:focus,
.sarv-page-password-reset-container .form-control:focus,
.sarv-page-twofactorauth .form-control:focus,
.sarv-page-clientregister .form-control:focus,
.sarv-page-clientregister #registration .field:focus {
    border-color: var(--sarv-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Labels */
.sarv-page-login .form-control-label,
.sarv-page-password-reset-container label,
.sarv-page-clientregister label:not(.field-icon):not(.form-check):not(.sarv-auth-remember) {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sarv-text);
    margin-bottom: 0.4rem;
}

/* Input-group (icon + field) used by login and the reset email prompt.
   The icon addon is a real flex item, never an overlay. */
.sarv-page-login .input-group-merge .input-group-text,
.sarv-page-password-reset-container .input-group-merge .input-group-text {
    background-color: var(--sarv-surface-soft);
    border-color: var(--sarv-border);
    color: var(--sarv-text-muted);
    height: 42px;
}

.sarv-page-login .input-group-merge .btn-reveal-pw {
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border);
    color: var(--sarv-text-muted);
    height: 42px;
}

.sarv-page-login .input-group-merge .btn-reveal-pw:hover,
.sarv-page-login .input-group-merge .btn-reveal-pw:focus {
    color: var(--sarv-blue);
    border-color: var(--sarv-blue);
}

/* Bootstrap 4's input-group radii are physical; under RTL the rounded
   corners land on the wrong ends. Fix for auth input-groups only. */
html[dir="rtl"] .sarv-page-login .input-group-merge > .input-group-prepend > .input-group-text,
html[lang="fa"] .sarv-page-login .input-group-merge > .input-group-prepend > .input-group-text,
html[dir="rtl"] .sarv-page-password-reset-container .input-group-merge > .input-group-prepend > .input-group-text,
html[lang="fa"] .sarv-page-password-reset-container .input-group-merge > .input-group-prepend > .input-group-text {
    border-radius: 0 10px 10px 0;
}

html[dir="rtl"] .sarv-page-login .input-group-merge > .form-control,
html[lang="fa"] .sarv-page-login .input-group-merge > .form-control,
html[dir="rtl"] .sarv-page-password-reset-container .input-group-merge > .form-control,
html[lang="fa"] .sarv-page-password-reset-container .input-group-merge > .form-control {
    border-radius: 10px 0 0 10px;
}

html[dir="rtl"] .sarv-page-login .input-group-merge > .input-group-append > .btn-reveal-pw,
html[lang="fa"] .sarv-page-login .input-group-merge > .input-group-append > .btn-reveal-pw {
    border-radius: 10px 0 0 10px;
}

html[dir="rtl"] .sarv-page-login .input-group-merge > .input-group-prepend ~ .form-control,
html[lang="fa"] .sarv-page-login .input-group-merge > .input-group-prepend ~ .form-control {
    border-inline-start: 0;
}

/* ---- Login: remember-me / forgot row + CTA (markup from login.tpl) ---- */
.sarv-auth-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sarv-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--sarv-text-secondary);
    cursor: pointer;
}

/* Bootstrap's .form-check-input is absolutely positioned for its own
   layout; inside this flex row it must behave as a normal flex item. */
.sarv-auth-remember .form-check-input {
    position: static;
    margin: 0;
}

.sarv-auth-meta a {
    font-size: 0.85rem;
    color: var(--sarv-blue);
}

.sarv-auth-submit {
    height: 44px;
    font-weight: 600;
    border-radius: 10px;
}

/* ---- Buttons on auth pages -------------------------------------------- */
.sarv-page-password-reset-container .btn,
.sarv-page-twofactorauth .btn,
.sarv-page-user-verify-email .btn,
.sarv-page-clientregister .btn-lg[type="submit"] {
    border-radius: 10px;
    font-weight: 600;
}

.sarv-page-clientregister .btn-lg[type="submit"] {
    min-height: 46px;
    padding-inline: 2rem;
}

/* ---- Registration layout (markup from clientregister.tpl) ------------- */
.sarv-register-layout {
    align-items: flex-start;
}

.sarv-page-clientregister .card {
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
}

.sarv-page-clientregister .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sarv-text);
}

/* Aside sticks alongside the long form on desktop, and drops below it on
   tablet/mobile via Bootstrap's own col-lg stacking. */
@media (min-width: 992px) {
    .sarv-register-aside {
        position: sticky;
        top: 1.5rem;
    }
}

.sarv-register-help .card-title {
    margin-bottom: 0.5rem;
}

.sarv-register-help p {
    font-size: 0.85rem;
    line-height: 1.8;
}

.sarv-register-help .btn {
    border-radius: 10px;
    font-weight: 600;
}

/* Registration helper/description text under custom fields. */
.sarv-page-clientregister .field-help-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--sarv-text-muted);
}

/* Password strength meter */
.sarv-page-clientregister #passwdFeedback,
.sarv-page-password-reset-container #passwdFeedback {
    border-radius: 10px;
    font-size: 0.85rem;
}

.sarv-page-clientregister .progress,
.sarv-page-password-reset-container .progress {
    height: 6px;
    border-radius: 999px;
    background-color: var(--sarv-border-soft);
}

/* Terms / marketing checkboxes */
.sarv-page-clientregister .form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}

.sarv-page-clientregister .form-check .form-check-input {
    position: static;
    margin: 0;
}

/* Captcha container — centred and never wider than its column. */
.sarv-page-login .recaptcha-container,
.sarv-page-clientregister .recaptcha-container,
.sarv-page-password-reset-container .recaptcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.sarv-page-clientregister #inputCaptcha,
.sarv-page-login #inputCaptcha,
.sarv-page-password-reset-container #inputCaptcha {
    max-width: 180px;
}

/* Stock captcha.tpl puts a physical `float-left` on the register captcha
   input, which lands on the wrong side under RTL. */
html[dir="rtl"] .sarv-page-clientregister #inputCaptcha.float-left,
html[lang="fa"] .sarv-page-clientregister #inputCaptcha.float-left {
    float: right !important;
    /* !important required: Bootstrap's .float-left utility is itself
       declared !important, so a plain override cannot win. */
}

/* ---- Two-factor authentication ----------------------------------------
   The challenge itself ({$challenge}) is server-rendered HTML from the
   active 2FA module, so only its container is styled — nothing about the
   2FA logic or markup is altered. Codes stay LTR-isolated even on a
   Persian page. */
.sarv-page-twofactorauth input[name="twofabackupcode"],
.sarv-page-twofactorauth #frmTwoFactorChallenge input[type="text"],
.sarv-page-twofactorauth #frmTwoFactorChallenge input[type="tel"],
.sarv-page-twofactorauth #frmTwoFactorChallenge input[type="number"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: center;
    letter-spacing: 0.18em;
    font-variant-numeric: tabular-nums;
    height: 48px;
    border-radius: 10px;
}

/* ---- Email verification ------------------------------------------------ */
.sarv-page-user-verify-email .card-body h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 2;
    color: var(--sarv-text);
}

/* The "continue" CTA carries a physically-right arrow; flip it under RTL
   so it points along the reading direction. Scoped to this one button —
   no icon is mirrored anywhere else. */
html[dir="rtl"] .sarv-page-user-verify-email .btn .fa-arrow-right,
html[lang="fa"] .sarv-page-user-verify-email .btn .fa-arrow-right {
    transform: scaleX(-1);
}

/* ---- Alerts / validation ----------------------------------------------
   Restrained tinted alerts rather than large saturated blocks. Scoped to
   auth pages; no WHMCS message is hidden or suppressed. */
.sarv-page-login .alert,
.sarv-page-clientregister .alert,
.sarv-page-password-reset-container .alert,
.sarv-page-twofactorauth .alert,
.sarv-page-user-verify-email .alert {
    border-radius: 10px;
    border-width: 1px;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
}

.sarv-page-login .alert-danger,
.sarv-page-clientregister .alert-danger,
.sarv-page-password-reset-container .alert-danger,
.sarv-page-twofactorauth .alert-danger {
    background-color: #FEF3F2;
    border-color: #FDA29B;
    color: #B42318;
}

.sarv-page-login .alert-warning,
.sarv-page-clientregister .alert-warning,
.sarv-page-password-reset-container .alert-warning,
.sarv-page-twofactorauth .alert-warning {
    background-color: #FFFAEB;
    border-color: #FEC84B;
    color: #B54708;
}

.sarv-page-login .alert-success,
.sarv-page-clientregister .alert-success,
.sarv-page-password-reset-container .alert-success,
.sarv-page-twofactorauth .alert-success {
    background-color: #ECFDF3;
    border-color: #6CE9A6;
    color: #027A48;
}

.sarv-page-login .alert-info,
.sarv-page-clientregister .alert-info,
.sarv-page-password-reset-container .alert-info,
.sarv-page-twofactorauth .alert-info {
    background-color: #EFF8FF;
    border-color: #B2DDFF;
    color: #175CD3;
}

/* Alert list (registration validation errors) */
.sarv-page-clientregister .alert ul {
    margin: 0.4rem 0 0;
    padding-inline-start: 1.1rem;
}

/* ---- Technical values stay LTR inside Persian auth pages -------------- */
html[dir="rtl"] .sarv-page-login input[type="email"],
html[lang="fa"] .sarv-page-login input[type="email"],
html[dir="rtl"] .sarv-page-password-reset-container input[type="email"],
html[lang="fa"] .sarv-page-password-reset-container input[type="email"],
html[dir="rtl"] .sarv-page-clientregister input[type="email"],
html[lang="fa"] .sarv-page-clientregister input[type="email"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 575.98px) {
    .sarv-page-login .card-body,
    .sarv-page-password-reset-container .card-body,
    .sarv-page-twofactorauth .card-body,
    .sarv-page-user-verify-email .card-body {
        padding-inline: 1.25rem;
    }

    .sarv-page-clientregister .card-body {
        padding: 1.25rem;
    }

    .sarv-auth-meta {
        gap: 0.5rem;
    }

    .sarv-page-clientregister .btn-lg[type="submit"] {
        width: 100%;
    }
}


/* =========================================================================
   PHASE 2B-2 — SHELL POLISH PASS (post real-browser review)
   Three targeted corrections only: registration tel field, mobile header,
   footer (desktop + mobile). No auth redesign, no dashboard, no order
   form. Desktop header is deliberately untouched.
   ========================================================================= */

/* ---- 1. Registration telephone field (RTL) -----------------------------
   Root cause: the LTR-isolation rule added for auth pages covered
   input[type="email"] but not input[type="tel"], so the phone field alone
   fell through to the browser's own UA direction for tel inputs and
   rendered left-aligned while every neighbouring field sat right-aligned.
   The field is a plain input[type="tel"] (id=inputPhone, name=phonenumber)
   — `data-phone-cc-input="0"` confirms WHMCS's country-code dropdown
   enhancement is disabled here, so there is no widget to work around.
   Digits stay logically LTR so +989123456789 reads correctly, while the
   box and its Persian placeholder align right like the rest of the form.
   Field name, id, type and validation are untouched. */
html[dir="rtl"] .sarv-page-clientregister #registration input[type="tel"],
html[lang="fa"] .sarv-page-clientregister #registration input[type="tel"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

html[dir="rtl"] .sarv-page-clientregister #registration input[type="tel"]::placeholder,
html[lang="fa"] .sarv-page-clientregister #registration input[type="tel"]::placeholder {
    direction: rtl;
    text-align: right;
}


/* ---- 2. Mobile header (<= 767.98px) ------------------------------------
   Sits below the existing <= 1199.98px collapse rules and overrides only
   what needs to be tighter at phone widths, so the 768–1199 tablet range
   and the approved desktop header are both left as they are. */
@media (max-width: 767.98px) {
    /* Compact top row: [hamburger] [logo] ~62px tall. */
    #header .sarv-navbar-container {
        min-height: 62px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        gap: 0.75rem;
    }

    /* 36px tall on a 1024x335 source ≈ 110px wide — inside the 110–135px
       target, sized in CSS only. */
    .sarv-logo-img {
        height: 36px;
    }

    #header .sarv-navbar-toggler {
        width: 42px;
        height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* One flat panel, not a floating card: drop the border/radius/fill and
       use a single separator rule instead. */
    #header .sarv-navbar-collapse {
        background-color: transparent;
        border: 0;
        border-top: 1px solid var(--sarv-border);
        border-radius: 0;
        margin-top: 0.5rem;
        padding: 0.5rem 0 0.25rem;
        gap: 0;
        row-gap: 0;
    }

    /* Nav rows separated by hairlines rather than spacing. */
    .sarv-primary-nav {
        gap: 0;
        row-gap: 0;
    }

    #header .sarv-primary-nav > li {
        border-bottom: 1px solid var(--sarv-border-soft);
    }

    #header .sarv-primary-nav > li > a {
        min-height: 44px;
        padding: 0.55rem 0.25rem;
        border-radius: 0;
    }

    /* Nested menus expand inline inside the panel (Bootstrap already sets
       position: static below the expand breakpoint) — just flatten them so
       they don't read as a floating box within the panel. */
    #header .sarv-primary-nav .dropdown-menu {
        border: 0;
        box-shadow: none;
        background-color: var(--sarv-surface-soft);
        border-radius: 0;
        margin: 0;
        padding: 0.25rem 0;
    }

    #header .sarv-primary-nav .dropdown-menu .dropdown-item {
        padding-inline-start: 1.25rem;
    }

    /* Utilities become a wrapping row so cart + notifications share one
       line instead of each taking a full-width block. */
    #header .sarv-header-utilities {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.6rem;
        padding-top: 0.6rem;
    }

    #header .sarv-search-form {
        flex: 1 1 100%;
    }

    #header .sarv-search-group {
        width: 100%;
        max-width: 100%;
        height: 42px;
    }

    #header .sarv-cart-btn {
        flex: 0 0 auto;
        width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--sarv-border);
    }

    #header .sarv-notifications {
        flex: 0 0 auto;
    }

    #header .sarv-notifications .sarv-utility-btn {
        width: auto;
        min-height: 44px;
        padding-inline: 0.7rem;
        border: 1px solid var(--sarv-border);
    }

    #header .sarv-support-btn {
        flex: 1 1 100%;
        min-height: 44px;
        border: 1px solid var(--sarv-border);
        justify-content: flex-start;
        gap: 0.5rem;
    }

    #header .sarv-active-client,
    #header .sarv-account-nav {
        flex: 1 1 100%;
    }
}


/* ---- 3. Footer — desktop composition ----------------------------------- */
#footer .sarv-footer-top {
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 2.5rem;
    padding-block: 2.75rem;
}

.sarv-footer-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.85rem;
}

.sarv-footer-mark {
    height: 34px;
}

.sarv-footer-tagline {
    color: var(--sarv-footer-text-secondary);
    font-size: 0.86rem;
    line-height: 2;
    max-width: 260px;
}

/* Support column: label, prominent number, then quick links. */
.sarv-footer-links {
    gap: 0.85rem;
}

.sarv-footer-support {
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0;
}

#footer .sarv-footer-support-text .sarv-utility-label {
    font-size: 0.78rem;
    letter-spacing: .01em;
}

#footer .sarv-footer-support-number {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sarv-footer-text);
    line-height: 1.6;
}

.sarv-footer-nav {
    flex-direction: column;
    gap: 0.15rem;
}

#footer .sarv-footer-nav .nav-link,
#footer .sarv-footer-lang-btn {
    padding-inline: 0;
    padding-block: 0.2rem;
}

/* Badges: consistent slots, subtle on navy, never dominant. */
.sarv-badges-grid {
    gap: 0.6rem;
    max-width: 260px;
}

.sarv-badge-item {
    height: 76px;
    min-width: 0;
    max-width: none;
}

/* Keep the 2x2 grid at every desktop width — the earlier 4-across rule at
   >=1400px made the badge row visually dominate the other two columns. */
@media (min-width: 1400px) {
    .sarv-badges-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#footer .sarv-footer-bottom {
    padding-block: 1rem;
}


/* ---- 3b. Footer — mobile (<= 767.98px) ---------------------------------
   Document order already gives brand -> support+links -> badges ->
   copyright, which is the requested order. One intentional alignment:
   everything follows the page reading direction (RTL on Persian pages),
   not centred, so the columns stay visually consistent with each other. */
@media (max-width: 767.98px) {
    #footer .sarv-footer-top {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-block: 1.75rem;
    }

    .sarv-footer-brand,
    .sarv-footer-links,
    .sarv-footer-badges {
        align-items: flex-start;
        text-align: start;
    }

    .sarv-footer-tagline {
        max-width: 100%;
    }

    .sarv-badges-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        max-width: 100%;
    }

    .sarv-badge-item {
        height: 68px;
    }

    #footer .sarv-footer-bottom {
        padding-block: 0.85rem;
    }

    #footer .sarv-copyright {
        text-align: start;
    }
}


/* ---- Mobile header: final compression pass (<= 767.98px) ---------------
   Top row is unchanged (still ~62px, 42px hamburger, 36px logo). Only the
   EXPANDED panel is compressed: row heights 44px -> 40px, and the stacked
   margin/padding/gap between each block cut back so the open menu lands
   around ~315px instead of ~420px. Nothing here touches desktop, footer,
   or auth content. */
@media (max-width: 767.98px) {
    #header .sarv-navbar-collapse {
        margin-top: 0.4rem;
        padding: 0.35rem 0 0.25rem;
    }

    /* Primary nav: compact 40px menu rows. */
    #header .sarv-primary-nav > li > a {
        min-height: 40px;
        padding: 0.4rem 0.25rem;
    }

    /* Nested children expand inline, slightly indented and tighter than
       their parent rows — never a floating desktop-style panel. */
    #header .sarv-primary-nav .dropdown-menu {
        padding: 0.15rem 0;
    }

    #header .sarv-primary-nav .dropdown-menu .dropdown-item {
        min-height: 38px;
        display: flex;
        align-items: center;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        font-size: 0.9rem;
    }

    /* Utility block: less separation from the nav above it. */
    #header .sarv-header-utilities {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        gap: 0.3rem;
    }

    #header .sarv-search-group {
        height: 40px;
    }

    #header .sarv-search-group .btn-default,
    #header .sarv-search-group .form-control {
        height: 38px;
    }

    /* Cart + notifications stay on one row, 40px each. */
    #header .sarv-cart-btn {
        width: 40px;
        min-height: 40px;
    }

    #header .sarv-notifications .sarv-utility-btn {
        min-height: 40px;
        padding-inline: 0.6rem;
    }

    /* Support: one compact row, not a tall card. Number stays LTR via the
       existing .sarv-phone utility. */
    #header .sarv-support-btn {
        min-height: 40px;
        padding-block: 0.35rem;
        gap: 0.45rem;
    }

    /* Account: one final compact row. */
    #header .sarv-account-nav > li > a {
        min-height: 40px;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    #header .sarv-active-client .btn-active-client,
    #header .sarv-active-client .btn-group > .btn:not(.btn-active-client) {
        height: 40px;
    }
}


/* =========================================================================
   PHASE 3 — SARVCLOUD CLIENT DASHBOARD
   Scoped to `.sarv-page-clientareahome` (the body hook added in 2B-2) so
   none of this leaks into services, domains, billing, tickets or the
   order form. Restyles the stock tiles + the dynamic HomePanels
   collection; no WHMCS data, route or hook is altered.
   ========================================================================= */

.sarv-page-clientareahome .sarv-dash-head {
    margin-bottom: 1.25rem;
}

.sarv-dash-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sarv-text);
    margin: 0;
}

.sarv-dash-sub {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--sarv-text-secondary);
}

/* ---- Summary cards ----------------------------------------------------- */
.sarv-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.sarv-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    color: var(--sarv-text);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sarv-stat-card:hover,
.sarv-stat-card:focus {
    text-decoration: none;
    color: var(--sarv-text);
    border-color: var(--sarv-blue);
    box-shadow: 0 4px 14px rgba(23, 32, 51, .08);
}

.sarv-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 1.05rem;
    background-color: rgba(37, 99, 235, .08);
    color: var(--sarv-blue);
}

/* One restrained accent per card type — cyan/teal used sparingly. */
.sarv-stat-domains .sarv-stat-icon { background-color: rgba(20, 184, 166, .10); color: var(--sarv-teal); }
.sarv-stat-tickets .sarv-stat-icon { background-color: rgba(34, 211, 238, .12); color: #0E7490; }
.sarv-stat-invoices .sarv-stat-icon { background-color: rgba(37, 99, 235, .08); color: var(--sarv-blue); }

.sarv-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sarv-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sarv-text);
}

.sarv-stat-label {
    font-size: 0.82rem;
    color: var(--sarv-text-secondary);
}

/* Zero-count cards are *slightly* de-emphasised — never shrunk, hidden or
   turned into a dot. This selector previously used --sarv-text-muted
   (#98A2B3), which was light enough on white that a `0` read as an
   insignificant speck; it now uses the readable secondary tone. Size and
   weight are deliberately NOT changed here, so zero and non-zero counts
   share identical dimensions. */
.sarv-stat-zero .sarv-stat-value {
    color: var(--sarv-text-secondary);
}

.sarv-stat-zero .sarv-stat-icon {
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-text-muted);
}

/* ---- Quick actions ----------------------------------------------------- */
.sarv-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.sarv-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0 0.95rem;
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sarv-text-secondary);
}

.sarv-quick-action:hover,
.sarv-quick-action:focus {
    text-decoration: none;
    color: var(--sarv-blue);
    border-color: var(--sarv-blue);
    background-color: var(--sarv-surface-soft);
}

.sarv-quick-action i {
    color: var(--sarv-blue);
    font-size: 0.95rem;
}

/* ---- Dynamic HomePanels ------------------------------------------------
   Stock renders each panel as .card.card-accent-{color}; the accent bar and
   panel structure are WHMCS's, so only surface/typography is restyled. */
.sarv-page-clientareahome .sarv-panel {
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.sarv-page-clientareahome .sarv-panel .card-header {
    background-color: var(--sarv-surface-soft);
    border-bottom: 1px solid var(--sarv-border-soft);
    padding: 0.85rem 1rem;
}

.sarv-page-clientareahome .sarv-panel .card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sarv-text);
}

.sarv-page-clientareahome .sarv-panel .card-body {
    padding: 1rem;
    font-size: 0.9rem;
}

.sarv-page-clientareahome .sarv-panel .list-group-item {
    border-color: var(--sarv-border-soft);
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareahome .sarv-panel a.list-group-item:hover,
.sarv-page-clientareahome .sarv-panel a.list-group-item:focus {
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-blue);
}

/* Panels with no footer content collapse instead of leaving a blank strip. */
.sarv-page-clientareahome .sarv-panel .card-footer:empty {
    display: none;
}

.sarv-page-clientareahome .sarv-panel .card-footer {
    background-color: var(--sarv-surface-soft);
    border-top: 1px solid var(--sarv-border-soft);
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
}

/* Status badges inside panels — restrained, not loud blocks. */
.sarv-page-clientareahome .sarv-panel .badge {
    font-weight: 600;
    border-radius: 999px;
    padding: 0.28em 0.6em;
}

/* Stock uses .float-right for the panel header button; physical under RTL. */
html[dir="rtl"] .sarv-page-clientareahome .sarv-panel .card-title .float-right,
html[lang="fa"] .sarv-page-clientareahome .sarv-panel .card-title .float-right {
    float: left !important;
    /* !important required: Bootstrap's .float-right utility is itself
       declared !important. */
}

/* Technical values inside dashboard panels (domains, invoice numbers,
   amounts) stay LTR-readable on a Persian page without forcing the whole
   panel out of RTL. */
html[dir="rtl"] .sarv-page-clientareahome .sarv-panel .list-group-item .badge,
html[lang="fa"] .sarv-page-clientareahome .sarv-panel .list-group-item .badge {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .sarv-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .sarv-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .sarv-stat-card {
        padding: 0.8rem;
        gap: 0.6rem;
    }

    .sarv-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    /* NOTE: the mobile count-size override that used to live here
       (font-size: 1.25rem) was dead code — the unconditional
       .sarv-stat-value rule in the polish block further down the file has
       equal specificity and later source order, so it always won. The
       mobile size is now declared after that rule instead. */

    .sarv-quick-action {
        flex: 1 1 calc(50% - 0.3rem);
        justify-content: center;
        min-height: 40px;
        padding-inline: 0.6rem;
    }

    .sarv-dash-title {
        font-size: 1.15rem;
    }
}


/* =========================================================================
   PHASE 3 — DASHBOARD POLISH PASS (post real-browser review)
   Banner, summary cards, empty panels, sidebar, authenticated header.
   CSS-only. Dashboard architecture, $panels and all WHMCS logic untouched.
   ========================================================================= */

/* ---- 1. Email verification banner -------------------------------------
   Stock markup is .verification-banner > .container > .row with three
   Bootstrap columns and a btn-block resend button, which makes the banner
   unnecessarily tall. Compacted into one horizontal notification row;
   verification logic, routes and data-uri attributes untouched. */
.verification-banner.email-verification {
    background-color: #FFFAEB;
    border-bottom: 1px solid #FEC84B;
    color: #B54708;
    padding: 0.55rem 0;
}

.verification-banner.email-verification .row {
    align-items: center;
    flex-wrap: nowrap;
    margin-inline: 0;
}

.verification-banner.email-verification .fa-exclamation-triangle {
    margin-inline-end: 0.5rem;
}

.verification-banner.email-verification .text {
    font-size: 0.88rem;
    line-height: 1.7;
}

/* Resend button: compact auto-width instead of full-column block. */
.verification-banner.email-verification .btn-resend-verify-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: auto;
    min-height: 34px;
    padding: 0 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    background-color: var(--sarv-surface);
    border: 1px solid #FEC84B;
    color: #B54708;
    white-space: nowrap;
}

.verification-banner.email-verification .btn-resend-verify-email:hover,
.verification-banner.email-verification .btn-resend-verify-email:focus {
    background-color: #FEF0C7;
    color: #93370D;
}

.verification-banner.email-verification .close {
    opacity: .6;
    font-size: 1.3rem;
    line-height: 1;
    color: #B54708;
    padding: 0;
}

.verification-banner.email-verification .close:hover {
    opacity: 1;
}

/* Close-button placement.
   Cause: stock markup order is [close] [message] [resend], carrying
   Bootstrap utilities order-3 / order-1 / order-md-last(13). Rendered
   order therefore became message(1) -> CLOSE(3) -> resend(13), dropping
   the "x" into the MIDDLE of the banner, detached from either end.
   Fix: re-order with flex so the dismiss control sits at the banner's end
   (visual left under RTL, right under LTR), and let the columns size to
   content instead of Bootstrap's fixed percentage widths. Bootstrap's
   order/col utilities are not !important, so plain higher-specificity
   selectors are enough — no absolute positioning needed, and the button's
   id, classes, data-uri and behaviour are untouched. */
.verification-banner.email-verification .row > [class*="col-"] {
    padding-inline: 0.5rem;
    max-width: none;
}

/* DOM child 1 = close, 2 = message, 3 = resend. */
.verification-banner.email-verification .row > [class*="col-"]:nth-child(1) {
    order: 3;
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verification-banner.email-verification .row > [class*="col-"]:nth-child(2) {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    display: flex;
    align-items: center;
}

.verification-banner.email-verification .row > [class*="col-"]:nth-child(3) {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 34px dismiss target, subtle by default with a clear hover. */
.verification-banner.email-verification .close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.verification-banner.email-verification .close:hover,
.verification-banner.email-verification .close:focus {
    background-color: #FEF0C7;
}

/* Mobile: the banner may wrap, but the dismiss control stays inside the
   notification on the message row — never detached, never overlapping. */
@media (max-width: 575.98px) {
    .verification-banner.email-verification .row {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .verification-banner.email-verification .row > [class*="col-"]:nth-child(1) {
        order: 2;
    }

    .verification-banner.email-verification .row > [class*="col-"]:nth-child(2) {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
    }

    .verification-banner.email-verification .row > [class*="col-"]:nth-child(3) {
        order: 3;
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .verification-banner.email-verification .btn-resend-verify-email {
        width: 100%;
    }
}


/* ---- 2. Summary cards: stronger hierarchy, tighter box -----------------
   Two-row grid: [icon .... count] over [label], matching the approved
   sketch. `display: contents` lets the existing .sarv-stat-body wrapper
   hand its children straight to the grid, so no markup change is needed. */
.sarv-stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon  value"
        "label label";
    align-items: center;
    gap: 0.45rem 0.5rem;
    padding: 0.9rem 1rem;
}

.sarv-stat-card .sarv-stat-icon {
    grid-area: icon;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.sarv-stat-body {
    display: contents;
}

.sarv-stat-value {
    grid-area: value;
    justify-self: end;
    font-size: 1.75rem;      /* 28px — top of the approved 24–28px range */
    font-weight: 800;
    line-height: 1;
    color: var(--sarv-text); /* explicit, so the count never inherits a
                                muted tone from an ancestor */
}

/* Mobile: still well inside the 24–28px target, and applied to zero and
   non-zero counts alike. Declared after the base rule so it actually
   takes effect (see the note in the earlier mobile block). */
@media (max-width: 575.98px) {
    .sarv-stat-value {
        font-size: 1.5rem;   /* 24px */
    }
}

.sarv-stat-label {
    grid-area: label;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sarv-text-secondary);
}

.sarv-stat-card:hover .sarv-stat-icon {
    transform: translateY(-1px);
}


/* ---- 3. Quick actions: consistent height + hierarchy ------------------- */
.sarv-quick-actions {
    gap: 0.5rem;
}

.sarv-quick-action {
    min-height: 40px;
    gap: 0.45rem;
    padding: 0 0.85rem;
}

/* First action reads as the primary one. */
.sarv-quick-action:first-child {
    background-color: var(--sarv-blue);
    border-color: var(--sarv-blue);
    color: #fff;
}

.sarv-quick-action:first-child i {
    color: #fff;
}

.sarv-quick-action:first-child:hover,
.sarv-quick-action:first-child:focus {
    background-color: var(--sarv-blue-hover);
    border-color: var(--sarv-blue-hover);
    color: #fff;
}


/* ---- 4. Empty panel states --------------------------------------------
   WHMCS supplies the empty-state text itself; only the surrounding
   whitespace is reduced. No panel logic touched, no fake rows added. */
.sarv-page-clientareahome .sarv-panel .card-body {
    padding: 0.85rem 1rem;
}

.sarv-page-clientareahome .sarv-panel .card-body > p:only-child,
.sarv-page-clientareahome .sarv-panel .card-body > .text-center:only-child {
    margin: 0;
    padding: 0.35rem 0;
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareahome .sarv-panel .card-body .btn {
    border-radius: 8px;
    font-weight: 600;
}

.sarv-page-clientareahome .sarv-panel .list-group-item {
    padding: 0.6rem 1rem;
}


/* ---- 5. Sidebar restyle (CSS only — sidebar.tpl NOT overridden) --------
   Same radius/border/shadow language as the dashboard cards. All sidebar
   menu objects, contacts, shortcuts and hooks remain untouched. */
.sidebar .card-sidebar,
.sidebar .card {
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.sidebar .card-sidebar .card-header,
.sidebar .card .card-header {
    background-color: var(--sarv-surface-soft);
    border-bottom: 1px solid var(--sarv-border-soft);
    padding: 0.75rem 1rem;
}

.sidebar .card-sidebar .card-title,
.sidebar .card .card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sarv-text);
}

.sidebar .list-group-item {
    border-color: var(--sarv-border-soft);
    padding: 0.6rem 1rem;
    font-size: 0.87rem;
    color: var(--sarv-text-secondary);
}

.sidebar a.list-group-item:hover,
.sidebar a.list-group-item:focus {
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-blue);
}

.sidebar .list-group-item.active {
    background-color: rgba(37, 99, 235, .07);
    border-color: var(--sarv-border-soft);
    color: var(--sarv-blue);
    font-weight: 600;
}

.sidebar .card-body {
    padding: 0.85rem 1rem;
    font-size: 0.87rem;
}

.sidebar .card-footer {
    background-color: var(--sarv-surface-soft);
    border-top: 1px solid var(--sarv-border-soft);
    padding: 0.6rem 1rem;
}

.sidebar .card-footer .btn,
.sidebar .card-body .btn {
    border-radius: 8px;
    font-weight: 600;
}

/* The collapse chevron is a physical float in stock markup. */
html[dir="rtl"] .sidebar .card-minimise,
html[lang="fa"] .sidebar .card-minimise {
    float: left !important;
    /* !important required: Bootstrap's .float-right utility on this icon
       is itself declared !important. */
}

.sidebar .card-minimise {
    color: var(--sarv-text-muted);
    font-size: 0.8rem;
}


/* ---- 6. Authenticated header: deliberate two rows (desktop only) -------
   The logged-in header carries logo + full nav + search + cart +
   notifications + active-client chip + account menu, which genuinely does
   not fit one row. Rather than shrinking controls or hiding utilities,
   the wrap is made deliberate: row 1 = logo + primary nav, row 2 =
   utilities, separated by a hairline.

   Gated on :has(.sarv-active-client) — that chip only renders when
   $loggedin, so the anonymous/public header is untouched. If a browser
   lacks :has() support the rules simply don't apply and the header falls
   back to today's natural wrapping, so nothing breaks. */
@media (min-width: 1200px) {
    #header:has(.sarv-active-client) .sarv-navbar-collapse {
        flex-wrap: wrap;
        row-gap: 0;
        align-items: center;
    }

    #header:has(.sarv-active-client) .sarv-primary-nav {
        flex: 1 1 auto;
    }

    #header:has(.sarv-active-client) .sarv-header-utilities {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 0.4rem;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--sarv-border-soft);
    }

    /* Row heights stay compact on the utilities row. */
    #header:has(.sarv-active-client) .sarv-header-utilities .sarv-utility-btn,
    #header:has(.sarv-active-client) .sarv-active-client .btn-active-client,
    #header:has(.sarv-active-client) .sarv-active-client .btn-group > .btn:not(.btn-active-client),
    #header:has(.sarv-active-client) .sarv-account-nav > li > a {
        height: 36px;
        min-height: 36px;
    }

    #header:has(.sarv-active-client) .sarv-search-group {
        height: 36px;
    }

    #header:has(.sarv-active-client) .sarv-search-group .btn-default,
    #header:has(.sarv-active-client) .sarv-search-group .form-control {
        height: 34px;
    }

    #header:has(.sarv-active-client) .sarv-navbar-container {
        padding-bottom: 0.5rem;
    }
}


/* ---- 7. Responsive check ----------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .sarv-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    /* Sidebar stacks below main content — Bootstrap's col-lg already does
       the stacking; this just keeps the spacing consistent. */
    .sidebar .card-sidebar,
    .sidebar .card {
        margin-bottom: 1rem;
    }
}


/* =========================================================================
   PHASE 4 — SARVCLOUD SERVICES / PRODUCT MANAGEMENT
   Scoped to the services list and service-details pages via the
   sarv-page-{$templatefile} body hook. The services LIST is styled
   CSS-only on purpose (see note below); only the details hero was
   restructured in markup.
   ========================================================================= */

/* ---- Status badges -----------------------------------------------------
   Restrained tinted badges replacing the stock solid fills. The class
   names are WHMCS's own (.status-active, .status-suspended, ... produced
   from {$service.status|strtolower}); no status string, mapping or logic
   is changed — only colour. Any status without a rule below keeps a
   neutral default rather than being mis-mapped. */
.sarv-page-clientareaproducts .label.status,
.sarv-page-clientareaproductdetails .product-status-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border);
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareaproducts .label.status-active,
.sarv-page-clientareaproducts .label.status-completed,
.sarv-page-clientareaproducts .label.status-open {
    background-color: #ECFDF3; border-color: #A6F4C5; color: #027A48;
}

.sarv-page-clientareaproducts .label.status-pending,
.sarv-page-clientareaproducts .label.status-pending-registration {
    background-color: #EFF8FF; border-color: #B2DDFF; color: #175CD3;
}

.sarv-page-clientareaproducts .label.status-suspended,
.sarv-page-clientareaproducts .label.status-pending-transfer,
.sarv-page-clientareaproducts .label.status-grace,
.sarv-page-clientareaproducts .label.status-redemption {
    background-color: #FFFAEB; border-color: #FEC84B; color: #B54708;
}

.sarv-page-clientareaproducts .label.status-terminated,
.sarv-page-clientareaproducts .label.status-cancelled,
.sarv-page-clientareaproducts .label.status-expired,
.sarv-page-clientareaproducts .label.status-transferred-away {
    background-color: #F2F4F7; border-color: #D0D5DD; color: #475467;
}

.sarv-page-clientareaproducts .label.status-fraud {
    background-color: #FEF3F2; border-color: #FDA29B; color: #B42318;
}

/* ---- Services list -----------------------------------------------------
   CSS-ONLY BY DESIGN — clientareaproducts.tpl is NOT overridden. The list
   is a DataTable (#tableServicesList) with column-index-based ordering,
   stateSave, the Responsive extension, and a sidebar status filter whose
   regex ('[~>]\s*STATUS\s*[<~]') matches against the raw HTML of the
   status cell. Restructuring those rows into cards would break sorting,
   filtering and the saved state, so the table keeps its markup and is
   restyled instead. DataTables Responsive continues to handle mobile. */
.sarv-page-clientareaproducts .table-container {
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    padding: 0.5rem 1rem 1rem;
}

.sarv-page-clientareaproducts table.table-list {
    margin-bottom: 0;
}

.sarv-page-clientareaproducts table.table-list thead th {
    border-top: 0;
    border-bottom: 1px solid var(--sarv-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sarv-text-muted);
    text-transform: none;
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.sarv-page-clientareaproducts table.table-list tbody td {
    border-top: 1px solid var(--sarv-border-soft);
    padding: 0.85rem 0.5rem;
    vertical-align: middle;
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareaproducts table.table-list tbody tr {
    cursor: pointer;
    transition: background-color .12s ease;
}

.sarv-page-clientareaproducts table.table-list tbody tr:hover {
    background-color: var(--sarv-surface-soft);
}

/* Product name is the primary column. */
.sarv-page-clientareaproducts table.table-list tbody td strong {
    color: var(--sarv-text);
    font-weight: 700;
    font-size: 0.93rem;
}

/* The domain under the product name is a technical value: keep it LTR so
   it never reorders inside a Persian page. */
.sarv-page-clientareaproducts table.table-list tbody td a[href^="http"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-size: 0.82rem;
    color: var(--sarv-blue);
}

/* DataTables chrome (search box, length menu, pagination). */
.sarv-page-clientareaproducts .dataTables_filter input,
.sarv-page-clientareaproducts .dataTables_length select {
    border: 1px solid var(--sarv-border);
    border-radius: 8px;
    height: 36px;
    padding-inline: 0.6rem;
    background-color: var(--sarv-surface);
    color: var(--sarv-text);
}

.sarv-page-clientareaproducts .dataTables_filter input:focus,
.sarv-page-clientareaproducts .dataTables_length select:focus {
    border-color: var(--sarv-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.sarv-page-clientareaproducts .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    /* !important required: DataTables' own stylesheet sets border-radius
       on .paginate_button with !important. */
    border-color: var(--sarv-border) !important;
}

.sarv-page-clientareaproducts .dataTables_info,
.sarv-page-clientareaproducts .dataTables_length,
.sarv-page-clientareaproducts .dataTables_paginate {
    font-size: 0.82rem;
    color: var(--sarv-text-secondary);
}

/* Empty state — WHMCS supplies the text via DataTables' sEmptyTable
   ("norecordsfound"); only spacing/tone is set. No fake service rows. */
.sarv-page-clientareaproducts td.dataTables_empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sarv-text-secondary);
    font-size: 0.9rem;
}

/* ---- Service details: hero ---------------------------------------------
   Markup for this block comes from the SarvCloud override of
   clientareaproductdetails.tpl (hero only; the rest of the file is
   byte-identical to Twenty-One). */
.sarv-service-details {
    display: block;
}

.sarv-page-clientareaproductdetails .card {
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
}

.sarv-service-hero {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sarv-service-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.sarv-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background-color: rgba(37, 99, 235, .08);
    color: var(--sarv-blue);
    font-size: 1.15rem;
}

.sarv-service-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-inline-end: auto;
}

.sarv-service-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sarv-text);
    line-height: 1.5;
}

.sarv-service-group {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sarv-text-secondary);
}

/* Status pill in the hero. Stock ships colour rules on
   .product-status-{status}; the neutral base above is intentionally
   overridden per state here. */
.sarv-service-state {
    flex-shrink: 0;
}

.product-status-active .sarv-service-state    { background-color: #ECFDF3; border-color: #A6F4C5; color: #027A48; }
.product-status-pending .sarv-service-state   { background-color: #EFF8FF; border-color: #B2DDFF; color: #175CD3; }
.product-status-suspended .sarv-service-state { background-color: #FFFAEB; border-color: #FEC84B; color: #B54708; }
.product-status-terminated .sarv-service-state,
.product-status-cancelled .sarv-service-state { background-color: #F2F4F7; border-color: #D0D5DD; color: #475467; }
.product-status-fraud .sarv-service-state     { background-color: #FEF3F2; border-color: #FDA29B; color: #B42318; }

/* ---- Service details: facts grid --------------------------------------- */
.sarv-service-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 1rem;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border-soft);
    border-radius: 12px;
}

.sarv-fact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sarv-fact-wide {
    grid-column: 1 / -1;
}

.sarv-fact dt {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sarv-text-muted);
}

.sarv-fact dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sarv-text);
    overflow-wrap: anywhere;
}

/* ---- Service details: actions ------------------------------------------
   Upgrade / renew / cancel keep their existing destinations and gating.
   Cancel is deliberately secondary-destructive, not dominant. */
.sarv-service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sarv-service-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
}

.sarv-service-action.btn-danger,
.sarv-service-action-danger {
    background-color: transparent;
    border: 1px solid #FDA29B;
    color: #B42318;
}

.sarv-service-action.btn-danger:hover,
.sarv-service-action-danger:hover {
    background-color: #FEF3F2;
    border-color: #F97066;
    color: #912018;
}

.sarv-service-action.disabled {
    opacity: .55;
    pointer-events: none;
}

/* Push cancel to the end of the action row so it never leads. */
.sarv-service-actions .sarv-service-action-danger {
    margin-inline-start: auto;
}

/* ---- Service details: module area, options, custom fields, server data --
   All of this markup is stock/module-provided and untouched; only
   surfaces and technical-value direction are set here. */
.sarv-page-clientareaproductdetails .card-title,
.sarv-page-clientareaproductdetails .card-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sarv-text);
}

.sarv-page-clientareaproductdetails table td,
.sarv-page-clientareaproductdetails table th {
    font-size: 0.88rem;
    border-color: var(--sarv-border-soft);
    vertical-align: middle;
}

.sarv-page-clientareaproductdetails .list-group-item {
    border-color: var(--sarv-border-soft);
    font-size: 0.88rem;
    padding: 0.7rem 1rem;
}

/* Technical values must stay LTR-readable inside a Persian page:
   hostnames, IPs, nameservers, usernames and any explicitly-marked
   technical string. Scoped so ordinary Persian prose is unaffected. */
html[dir="rtl"] .sarv-page-clientareaproductdetails .sarv-ltr,
html[lang="fa"] .sarv-page-clientareaproductdetails .sarv-ltr,
html[dir="rtl"] .sarv-page-clientareaproductdetails a[href^="http"],
html[lang="fa"] .sarv-page-clientareaproductdetails a[href^="http"],
html[dir="rtl"] .sarv-page-clientareaproductdetails code,
html[lang="fa"] .sarv-page-clientareaproductdetails code {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Module action buttons (Login to cPanel/Plesk, webmail, custom module
   commands) — rendered by WHMCS/the module, never hardcoded here. */
.sarv-page-clientareaproductdetails .btn {
    border-radius: 10px;
    font-weight: 600;
}

/* Usage/metric bars are only styled when the module actually supplies
   them; nothing is fabricated when $metricStats is absent. */
.sarv-page-clientareaproductdetails .progress {
    height: 8px;
    border-radius: 999px;
    background-color: var(--sarv-border-soft);
}

.sarv-page-clientareaproductdetails .progress-bar {
    background-color: var(--sarv-blue);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sarv-page-clientareaproducts .table-container {
        padding: 0.5rem;
    }

    .sarv-service-identity {
        gap: 0.6rem;
    }

    .sarv-service-titles {
        flex: 1 1 100%;
        order: 3;
        margin-inline-end: 0;
    }

    .sarv-service-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.85rem;
    }

    .sarv-service-actions .sarv-service-action {
        flex: 1 1 100%;
        justify-content: center;
    }

    .sarv-service-actions .sarv-service-action-danger {
        margin-inline-start: 0;
    }
}

@media (max-width: 400px) {
    .sarv-service-facts {
        grid-template-columns: 1fr;
    }
}


/* =========================================================================
   PHASE 5 — SARVCLOUD DOMAIN MANAGEMENT
   Domain list + details + the domain sub-pages (nameservers, contacts,
   DNS, email forwarding, EPP, addons). The LIST is CSS-only by design;
   only the details overview block was restructured in markup.
   ========================================================================= */

/* Shared scope for every domain sub-page. */
.sarv-page-clientareadomains,
.sarv-page-clientareadomaindetails,
.sarv-page-clientareadomainregisterns,
.sarv-page-clientareadomaincontactinfo,
.sarv-page-clientareadomaindns,
.sarv-page-clientareadomainemailforwarding,
.sarv-page-clientareadomaingetepp,
.sarv-page-clientareadomainaddons {
    --sarv-domain-scope: 1;
}

/* ---- Domain list -------------------------------------------------------
   CSS-ONLY BY DESIGN — clientareadomains.tpl is NOT overridden. Like the
   services list it is a DataTable (#tableDomainsList) with column-index
   ordering, stateSave, the Responsive extension and a status filter whose
   regex matches the raw HTML of the status cell. It ALSO wraps the table
   in a bulk-action form (#domainForm) with domids[] checkboxes driving
   nameserver / contact / renew / autorenew / reglock mass actions.
   Restructuring the rows would break sorting, filtering and every bulk
   action, so the markup is left intact and restyled. */
.sarv-page-clientareadomains .table-container {
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    padding: 0.5rem 1rem 1rem;
}

.sarv-page-clientareadomains table.table-list thead th {
    border-top: 0;
    border-bottom: 1px solid var(--sarv-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sarv-text-muted);
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.sarv-page-clientareadomains table.table-list tbody td {
    border-top: 1px solid var(--sarv-border-soft);
    padding: 0.85rem 0.5rem;
    vertical-align: middle;
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareadomains table.table-list tbody tr {
    cursor: pointer;
    transition: background-color .12s ease;
}

.sarv-page-clientareadomains table.table-list tbody tr:hover {
    background-color: var(--sarv-surface-soft);
}

/* Domain name is the primary value and is technical — always LTR. */
.sarv-page-clientareadomains table.table-list tbody td a[href^="http"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--sarv-text);
}

.sarv-page-clientareadomains table.table-list tbody td a[href^="http"]:hover {
    color: var(--sarv-blue);
}

/* Auto-renew indicator under the domain name (stock markup, restyled). */
.sarv-page-clientareadomains table.table-list tbody td small {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    color: var(--sarv-text-muted);
}

/* Bulk-action toolbar. */
.sarv-page-clientareadomains .btn-group .btn-default {
    background-color: var(--sarv-surface);
    border-color: var(--sarv-border-interactive);
    color: var(--sarv-text-secondary);
    font-size: 0.83rem;
    font-weight: 600;
    min-height: 36px;
}

.sarv-page-clientareadomains .btn-group .btn-default:hover,
.sarv-page-clientareadomains .btn-group .btn-default:focus {
    color: var(--sarv-blue);
    border-color: var(--sarv-blue);
    background-color: var(--sarv-surface-soft);
}

.sarv-page-clientareadomains input.domids {
    width: 16px;
    height: 16px;
    accent-color: var(--sarv-blue);
    cursor: pointer;
}

/* DataTables chrome + empty state (text supplied by WHMCS). */
.sarv-page-clientareadomains .dataTables_filter input,
.sarv-page-clientareadomains .dataTables_length select {
    border: 1px solid var(--sarv-border);
    border-radius: 8px;
    height: 36px;
    padding-inline: 0.6rem;
    background-color: var(--sarv-surface);
    color: var(--sarv-text);
}

.sarv-page-clientareadomains .dataTables_filter input:focus,
.sarv-page-clientareadomains .dataTables_length select:focus {
    border-color: var(--sarv-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.sarv-page-clientareadomains .dataTables_info,
.sarv-page-clientareadomains .dataTables_length,
.sarv-page-clientareadomains .dataTables_paginate {
    font-size: 0.82rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareadomains td.dataTables_empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sarv-text-secondary);
    font-size: 0.9rem;
}

/* Status badges — same restrained system as Services, reusing WHMCS's own
   .status-{$domain.statusClass} classes. No status is remapped. */
.sarv-page-clientareadomains .label.status {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border);
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareadomains .label.status-active {
    background-color: #ECFDF3; border-color: #A6F4C5; color: #027A48;
}

.sarv-page-clientareadomains .label.status-pending,
.sarv-page-clientareadomains .label.status-pending-registration,
.sarv-page-clientareadomains .label.status-pending-transfer {
    background-color: #EFF8FF; border-color: #B2DDFF; color: #175CD3;
}

.sarv-page-clientareadomains .label.status-grace,
.sarv-page-clientareadomains .label.status-redemption {
    background-color: #FFFAEB; border-color: #FEC84B; color: #B54708;
}

.sarv-page-clientareadomains .label.status-expired,
.sarv-page-clientareadomains .label.status-cancelled,
.sarv-page-clientareadomains .label.status-transferred-away {
    background-color: #F2F4F7; border-color: #D0D5DD; color: #475467;
}

.sarv-page-clientareadomains .label.status-fraud {
    background-color: #FEF3F2; border-color: #FDA29B; color: #B42318;
}

/* ---- Domain details: hero ----------------------------------------------
   Markup from the SarvCloud override of clientareadomaindetails.tpl
   (overview block only; the rest of the file is byte-identical). */
.sarv-domain-hero {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.sarv-domain-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.sarv-domain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background-color: rgba(20, 184, 166, .10);
    color: var(--sarv-teal);
    font-size: 1.15rem;
}

.sarv-domain-titles {
    min-width: 0;
    margin-inline-end: auto;
}

.sarv-domain-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Domain name is technical — LTR-isolated even on a Persian page. */
.sarv-domain-name a {
    color: var(--sarv-text);
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

.sarv-domain-name a:hover {
    color: var(--sarv-blue);
}

/* Status pill, coloured from WHMCS's own $systemStatus value. */
.sarv-domain-state {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border);
    color: var(--sarv-text-secondary);
}

.sarv-domain-status-active .sarv-domain-state    { background-color: #ECFDF3; border-color: #A6F4C5; color: #027A48; }
.sarv-domain-status-pending .sarv-domain-state   { background-color: #EFF8FF; border-color: #B2DDFF; color: #175CD3; }
.sarv-domain-status-expired .sarv-domain-state,
.sarv-domain-status-cancelled .sarv-domain-state { background-color: #F2F4F7; border-color: #D0D5DD; color: #475467; }
.sarv-domain-status-fraud .sarv-domain-state     { background-color: #FEF3F2; border-color: #FDA29B; color: #B42318; }

.sarv-domain-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 1rem;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border-soft);
    border-radius: 12px;
}

/* ---- Domain sub-pages: shared surfaces --------------------------------
   Covers nameservers, contact info, DNS, email forwarding, EPP and
   addons. All forms, fields, tokens and routes are stock — only surfaces,
   spacing and technical-value direction are set. */
.sarv-page-clientareadomaindetails .card,
.sarv-page-clientareadomainregisterns .card,
.sarv-page-clientareadomaincontactinfo .card,
.sarv-page-clientareadomaindns .card,
.sarv-page-clientareadomainemailforwarding .card,
.sarv-page-clientareadomaingetepp .card,
.sarv-page-clientareadomainaddons .card {
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
}

.sarv-page-clientareadomaindetails .card-title,
.sarv-page-clientareadomainregisterns .card-title,
.sarv-page-clientareadomaincontactinfo .card-title,
.sarv-page-clientareadomaindns .card-title,
.sarv-page-clientareadomainemailforwarding .card-title,
.sarv-page-clientareadomaingetepp .card-title,
.sarv-page-clientareadomainaddons .card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sarv-text);
}

.sarv-page-clientareadomaindetails .btn,
.sarv-page-clientareadomainregisterns .btn,
.sarv-page-clientareadomaincontactinfo .btn,
.sarv-page-clientareadomaindns .btn,
.sarv-page-clientareadomainemailforwarding .btn,
.sarv-page-clientareadomaingetepp .btn,
.sarv-page-clientareadomainaddons .btn {
    border-radius: 10px;
    font-weight: 600;
}

.sarv-page-clientareadomaindetails .form-control,
.sarv-page-clientareadomainregisterns .form-control,
.sarv-page-clientareadomaincontactinfo .form-control,
.sarv-page-clientareadomaindns .form-control,
.sarv-page-clientareadomainemailforwarding .form-control,
.sarv-page-clientareadomaingetepp .form-control {
    height: 42px;
    border-radius: 10px;
    border-color: var(--sarv-border);
    font-size: 0.9rem;
}

.sarv-page-clientareadomaincontactinfo textarea.form-control,
.sarv-page-clientareadomaindns textarea.form-control {
    height: auto;
    min-height: 80px;
}

.sarv-page-clientareadomaindetails .form-control:focus,
.sarv-page-clientareadomainregisterns .form-control:focus,
.sarv-page-clientareadomaincontactinfo .form-control:focus,
.sarv-page-clientareadomaindns .form-control:focus,
.sarv-page-clientareadomainemailforwarding .form-control:focus,
.sarv-page-clientareadomaingetepp .form-control:focus {
    border-color: var(--sarv-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Technical values stay LTR under RTL: nameservers, DNS record hosts and
   values, forwarding addresses, EPP codes, IPs. These inputs hold
   machine-readable strings, never Persian prose. */
html[dir="rtl"] .sarv-page-clientareadomainregisterns input[type="text"],
html[lang="fa"] .sarv-page-clientareadomainregisterns input[type="text"],
html[dir="rtl"] .sarv-page-clientareadomaindns input[type="text"],
html[lang="fa"] .sarv-page-clientareadomaindns input[type="text"],
html[dir="rtl"] .sarv-page-clientareadomainemailforwarding input[type="text"],
html[lang="fa"] .sarv-page-clientareadomainemailforwarding input[type="text"],
html[dir="rtl"] .sarv-page-clientareadomaingetepp input,
html[lang="fa"] .sarv-page-clientareadomaingetepp input,
html[dir="rtl"] .sarv-page-clientareadomaingetepp code,
html[lang="fa"] .sarv-page-clientareadomaingetepp code {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* Tables on DNS / forwarding / addons pages. */
.sarv-page-clientareadomaindns table td,
.sarv-page-clientareadomaindns table th,
.sarv-page-clientareadomainemailforwarding table td,
.sarv-page-clientareadomainemailforwarding table th,
.sarv-page-clientareadomainaddons table td,
.sarv-page-clientareadomainaddons table th {
    font-size: 0.88rem;
    border-color: var(--sarv-border-soft);
    vertical-align: middle;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sarv-page-clientareadomains .table-container {
        padding: 0.5rem;
    }

    .sarv-page-clientareadomains .btn-group {
        flex-wrap: wrap;
    }

    .sarv-domain-titles {
        flex: 1 1 100%;
        order: 3;
        margin-inline-end: 0;
    }

    .sarv-domain-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.85rem;
    }
}

@media (max-width: 400px) {
    .sarv-domain-facts {
        grid-template-columns: 1fr;
    }
}


/* =========================================================================
   PHASE 6 — SARVCLOUD BILLING / INVOICES
   Invoice list, invoice view, transactions, quotes, add-funds, mass pay.
   PAYMENT SAFETY: no payment form, hidden field, token, gateway loop or
   monetary value is touched anywhere below — this is presentation only.
   Monetary amounts are rendered exactly as WHMCS formats them; nothing is
   recalculated, reformatted or converted.
   ========================================================================= */

/* ---- Invoice list ------------------------------------------------------
   CSS-ONLY BY DESIGN — clientareainvoices.tpl is NOT overridden. Same
   DataTable pattern as services/domains (#tableInvoicesList, column-index
   ordering, stateSave, Responsive, regex status filter on column 4). */
.sarv-page-clientareainvoices .table-container,
.sarv-page-clientareaquotes .table-container {
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    padding: 0.5rem 1rem 1rem;
}

.sarv-page-clientareainvoices table.table-list thead th,
.sarv-page-clientareaquotes table.table-list thead th {
    border-top: 0;
    border-bottom: 1px solid var(--sarv-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sarv-text-muted);
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.sarv-page-clientareainvoices table.table-list tbody td,
.sarv-page-clientareaquotes table.table-list tbody td {
    border-top: 1px solid var(--sarv-border-soft);
    padding: 0.85rem 0.5rem;
    vertical-align: middle;
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareainvoices table.table-list tbody tr,
.sarv-page-clientareaquotes table.table-list tbody tr {
    cursor: pointer;
    transition: background-color .12s ease;
}

.sarv-page-clientareainvoices table.table-list tbody tr:hover,
.sarv-page-clientareaquotes table.table-list tbody tr:hover {
    background-color: var(--sarv-surface-soft);
}

/* Invoice number (col 1) and total (col 4) are the scannable values.
   Both are technical/financial — kept LTR-stable under RTL. */
.sarv-page-clientareainvoices table.table-list tbody td:first-child,
.sarv-page-clientareainvoices table.table-list tbody td:nth-child(4) {
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: 700;
    color: var(--sarv-text);
}

html[dir="rtl"] .sarv-page-clientareainvoices table.table-list tbody td:first-child,
html[lang="fa"] .sarv-page-clientareainvoices table.table-list tbody td:first-child,
html[dir="rtl"] .sarv-page-clientareainvoices table.table-list tbody td:nth-child(4),
html[lang="fa"] .sarv-page-clientareainvoices table.table-list tbody td:nth-child(4) {
    text-align: right;
}

.sarv-page-clientareainvoices .dataTables_filter input,
.sarv-page-clientareainvoices .dataTables_length select,
.sarv-page-clientareaquotes .dataTables_filter input,
.sarv-page-clientareaquotes .dataTables_length select {
    border: 1px solid var(--sarv-border);
    border-radius: 8px;
    height: 36px;
    padding-inline: 0.6rem;
    background-color: var(--sarv-surface);
    color: var(--sarv-text);
}

.sarv-page-clientareainvoices .dataTables_filter input:focus,
.sarv-page-clientareaquotes .dataTables_filter input:focus {
    border-color: var(--sarv-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.sarv-page-clientareainvoices .dataTables_info,
.sarv-page-clientareainvoices .dataTables_length,
.sarv-page-clientareainvoices .dataTables_paginate,
.sarv-page-clientareaquotes .dataTables_info,
.sarv-page-clientareaquotes .dataTables_length,
.sarv-page-clientareaquotes .dataTables_paginate {
    font-size: 0.82rem;
    color: var(--sarv-text-secondary);
}

/* Empty state text comes from WHMCS (sEmptyTable / norecordsfound). */
.sarv-page-clientareainvoices td.dataTables_empty,
.sarv-page-clientareaquotes td.dataTables_empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sarv-text-secondary);
    font-size: 0.9rem;
}

/* ---- Invoice status badges (list) --------------------------------------
   Uses WHMCS's own .status-{$invoice.statusClass}. No state is inferred
   from dates and no mapping is changed — colour only. */
.sarv-page-clientareainvoices .label.status,
.sarv-page-clientareaquotes .label.status {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border);
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareainvoices .label.status-paid {
    background-color: #ECFDF3; border-color: #A6F4C5; color: #027A48;
}

.sarv-page-clientareainvoices .label.status-unpaid,
.sarv-page-clientareainvoices .label.status-payment-pending {
    background-color: #EFF8FF; border-color: #B2DDFF; color: #175CD3;
}

.sarv-page-clientareainvoices .label.status-overdue,
.sarv-page-clientareainvoices .label.status-collections {
    background-color: #FEF3F2; border-color: #FDA29B; color: #B42318;
}

.sarv-page-clientareainvoices .label.status-cancelled,
.sarv-page-clientareainvoices .label.status-refunded,
.sarv-page-clientareainvoices .label.status-draft {
    background-color: #F2F4F7; border-color: #D0D5DD; color: #475467;
}

/* =========================================================================
   INVOICE VIEW (viewinvoice.tpl — standalone page)
   That template is a full standalone document: it does not include
   header.tpl, never loaded custom.css, and hardcoded lang="en". The
   SarvCloud override fixes only those three things (stylesheet, lang/dir,
   body class) — every payment form, token, gateway loop and total is
   byte-identical to Twenty-One.
   ========================================================================= */

.sarv-page-viewinvoice {
    background-color: var(--sarv-page-bg);
    color: var(--sarv-text);
    font-family: var(--sarv-font-fa);
}

.sarv-page-viewinvoice .invoice-container {
    max-width: 900px;
    margin-inline: auto;
    padding: 1.5rem;
    margin-block: 1.5rem;
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04), 0 8px 28px rgba(23, 32, 51, .05);
}

.sarv-page-viewinvoice .invoice-header h2,
.sarv-page-viewinvoice .invoice-header h3 {
    font-weight: 700;
    color: var(--sarv-text);
}

.sarv-page-viewinvoice .invoice-header img {
    max-height: 42px;
    width: auto;
}

/* Status pill — stock renders .invoice-status > span.{draft|unpaid|paid|
   refunded|cancelled|collections}. Colour only; the conditional chain
   that picks the class is untouched. */
.sarv-page-viewinvoice .invoice-status span {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border);
    color: var(--sarv-text-secondary);
}

.sarv-page-viewinvoice .invoice-status .paid {
    background-color: #ECFDF3; border-color: #A6F4C5; color: #027A48;
}

.sarv-page-viewinvoice .invoice-status .unpaid {
    background-color: #EFF8FF; border-color: #B2DDFF; color: #175CD3;
}

.sarv-page-viewinvoice .invoice-status .collections {
    background-color: #FEF3F2; border-color: #FDA29B; color: #B42318;
}

.sarv-page-viewinvoice .invoice-status .draft,
.sarv-page-viewinvoice .invoice-status .cancelled,
.sarv-page-viewinvoice .invoice-status .refunded {
    background-color: #F2F4F7; border-color: #D0D5DD; color: #475467;
}

.sarv-page-viewinvoice .small-text {
    font-size: 0.85rem;
    color: var(--sarv-text-secondary);
    margin-top: 0.4rem;
}

/* Payment CTA container — clear but not alarming. The button itself is
   {$paymentbutton}, generated by the active gateway; only the wrapper is
   styled, never the gateway's own markup. */
.sarv-page-viewinvoice .payment-btn-container {
    margin-top: 0.85rem;
}

.sarv-page-viewinvoice .payment-btn-container .btn,
.sarv-page-viewinvoice .payment-btn-container input[type="submit"],
.sarv-page-viewinvoice .payment-btn-container button {
    border-radius: 10px;
    font-weight: 700;
    min-height: 44px;
    padding-inline: 1.5rem;
}

/* Generic safety net for gateway-injected output: keep whatever the
   gateway renders inside the card and scrollable rather than overflowing.
   Deliberately generic — no gateway (Zarinpal or otherwise) is targeted
   by name, and no injected markup is altered. */
.sarv-page-viewinvoice .payment-btn-container > * {
    max-width: 100%;
}

.sarv-page-viewinvoice .payment-btn-container iframe,
.sarv-page-viewinvoice .payment-btn-container img {
    max-width: 100%;
    height: auto;
}

/* Parties / addresses */
.sarv-page-viewinvoice .invoice-col {
    font-size: 0.9rem;
    line-height: 2;
}

/* Gateway selector + apply-credit forms — layout only. Form action,
   method, {$tokenInput}, hidden inputs, select name and the
   onchange="submit()" behaviour are all untouched. */
.sarv-page-viewinvoice .custom-select,
.sarv-page-viewinvoice select.form-control {
    height: 40px;
    border-radius: 10px;
    border-color: var(--sarv-border);
    font-size: 0.9rem;
    max-width: 100%;
}

/* Invoice items table */
.sarv-page-viewinvoice table {
    width: 100%;
}

.sarv-page-viewinvoice table th {
    background-color: var(--sarv-surface-soft);
    border-color: var(--sarv-border) !important;
    /* !important required: invoice.min.css sets td/th borders with
       !important on this page. */
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sarv-text-muted);
    padding: 0.7rem 0.75rem;
}

.sarv-page-viewinvoice table td {
    border-color: var(--sarv-border-soft) !important;
    font-size: 0.88rem;
    padding: 0.7rem 0.75rem;
    vertical-align: middle;
}

/* Monetary cells: WHMCS's formatted string is printed verbatim; only
   direction/emphasis is set so amounts never reorder under RTL. */
.sarv-page-viewinvoice table td:last-child,
.sarv-page-viewinvoice table th:last-child {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

html[dir="rtl"] .sarv-page-viewinvoice table td:last-child,
html[lang="fa"] .sarv-page-viewinvoice table td:last-child,
html[dir="rtl"] .sarv-page-viewinvoice table th:last-child,
html[lang="fa"] .sarv-page-viewinvoice table th:last-child {
    text-align: left;
}

/* Totals rows — the final row (balance/total) carries the emphasis.
   Only the rows WHMCS actually outputs are shown; none are fabricated. */
.sarv-page-viewinvoice table tr:last-child td {
    font-weight: 700;
    color: var(--sarv-text);
    font-size: 0.95rem;
}

/* Transactions: IDs and gateway names are technical values. */
.sarv-page-viewinvoice .transactions-table td,
.sarv-page-viewinvoice table td code {
    direction: ltr;
    unicode-bidi: isolate;
}

.sarv-page-viewinvoice hr {
    border-color: var(--sarv-border-soft);
}

/* Print: strip the card chrome so the printed invoice stays clean. Stock
   uses .d-print-none for the payment CTA, which continues to apply. */
@media print {
    .sarv-page-viewinvoice {
        background-color: #fff;
    }

    .sarv-page-viewinvoice .invoice-container {
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }
}

/* ---- Add funds / mass pay ---------------------------------------------- */
.sarv-page-clientareaaddfunds .card,
.sarv-page-masspay .card {
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
}

.sarv-page-clientareaaddfunds .form-control,
.sarv-page-masspay .form-control {
    height: 42px;
    border-radius: 10px;
    border-color: var(--sarv-border);
}

.sarv-page-clientareaaddfunds .btn,
.sarv-page-masspay .btn {
    border-radius: 10px;
    font-weight: 600;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sarv-page-clientareainvoices .table-container,
    .sarv-page-clientareaquotes .table-container {
        padding: 0.5rem;
    }

    .sarv-page-viewinvoice .invoice-container {
        padding: 1rem;
        margin-block: 0.75rem;
        border-radius: 12px;
    }

    /* Item/total tables must stay readable rather than squeeze. */
    .sarv-page-viewinvoice .table-responsive,
    .sarv-page-viewinvoice table {
        overflow-x: auto;
    }

    .sarv-page-viewinvoice table td,
    .sarv-page-viewinvoice table th {
        padding: 0.55rem 0.5rem;
        font-size: 0.84rem;
    }

    .sarv-page-viewinvoice .payment-btn-container .btn {
        width: 100%;
    }
}


/* =========================================================================
   PHASE 6B — FORMAL INVOICE DOCUMENT + A4 PRINT
   Screen: make viewinvoice read as a financial document, not a panel.
   Print: fix the 2-page overflow. No payment markup, form, token or
   monetary value is touched — presentation only.
   ========================================================================= */

/* ---- Formal document surface ------------------------------------------- */
.sarv-page-viewinvoice .invoice-container {
    max-width: 820px;
    padding: 2.25rem 2.5rem;
    border-radius: 10px;          /* squarer = more document-like */
    box-shadow: 0 1px 3px rgba(23, 32, 51, .06);
}

/* Header: logo/company on one side, invoice meta on the other. */
.sarv-page-viewinvoice .invoice-header {
    align-items: flex-start;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--sarv-text);
    margin-bottom: 1.5rem;
}

.sarv-page-viewinvoice .invoice-header h2 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.sarv-page-viewinvoice .invoice-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sarv-text-secondary);
    margin: 0;
}

/* Status: modest, not an oversized badge. */
.sarv-page-viewinvoice .invoice-status span {
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    border-radius: 4px;
    letter-spacing: 0.01em;
}

/* Party blocks ("invoiced to" / issuer). */
.sarv-page-viewinvoice .invoice-col {
    font-size: 0.875rem;
    line-height: 1.9;
}

.sarv-page-viewinvoice .invoice-col strong,
.sarv-page-viewinvoice .invoice-col b {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sarv-text-muted);
    margin-bottom: 0.2rem;
}

/* Latin address fragments / URLs stay readable inside RTL blocks. */
html[dir="rtl"] .sarv-page-viewinvoice .invoice-col a,
html[lang="fa"] .sarv-page-viewinvoice .invoice-col a {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Financial tables: ruled, compact, accounting-like. */
.sarv-page-viewinvoice table {
    border-collapse: collapse;
}

.sarv-page-viewinvoice table th {
    background-color: transparent;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1.5px solid var(--sarv-text) !important;
    /* !important required: invoice.min.css sets td/th borders with
       !important on this standalone page. */
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sarv-text-muted);
    padding: 0.55rem 0.6rem;
}

.sarv-page-viewinvoice table td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--sarv-border-soft) !important;
    padding: 0.65rem 0.6rem;
    font-size: 0.875rem;
}

/* Totals: the last rows carry the weight; balance strongest. */
.sarv-page-viewinvoice table tr:last-child td {
    border-bottom: 0 !important;
    border-top: 1.5px solid var(--sarv-text) !important;
    font-size: 1rem;
    font-weight: 800;
}

/* Payment CTA — clear, but not a checkout page. */
.sarv-page-viewinvoice .payment-btn-container .btn,
.sarv-page-viewinvoice .payment-btn-container input[type="submit"],
.sarv-page-viewinvoice .payment-btn-container button {
    border-radius: 6px;
    min-height: 40px;
}

/* ---- PRINT: A4, single page for short invoices -------------------------
   ROOT CAUSE of the previous 2-page output (all three are stock rules):
     1. Bootstrap's print reboot sets `@page { size: a3 }`
     2. `body{min-width:992px!important}` + `.container{min-width:992px!important}`
     3. invoice.min.css adds `@media print{body,html{width:750px}}`
   A forced 992px min-width laid out on A3 and then printed to A4
   overflows horizontally, which the browser resolves by spilling onto a
   second page. custom.css is loaded last on this page, so the @page and
   the !important width resets below win the cascade. */
@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    html,
    body {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .sarv-page-viewinvoice .container,
    .sarv-page-viewinvoice .container-fluid,
    .sarv-page-viewinvoice .invoice-container {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    /* Interactive-only controls. Stock already marks the payment CTA,
       print/download group and back link with .d-print-none; this simply
       guarantees it if that class is ever dropped. Financial content —
       status, parties, items, totals, ledger — is all retained. */
    .sarv-page-viewinvoice .payment-btn-container,
    .sarv-page-viewinvoice .btn-group,
    .sarv-page-viewinvoice a[href*="clientarea.php"] {
        display: none !important;
    }

    /* Keep the gateway selector's chosen value visible as text rather
       than an interactive control. */
    .sarv-page-viewinvoice select {
        border: 0 !important;
        appearance: none;
        -webkit-appearance: none;
        padding: 0 !important;
    }

    /* Tighten for paper without shrinking legibility. */
    .sarv-page-viewinvoice .invoice-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .sarv-page-viewinvoice table td,
    .sarv-page-viewinvoice table th {
        padding: 0.4rem 0.5rem;
        font-size: 10pt;
    }

    .sarv-page-viewinvoice .invoice-col {
        font-size: 10pt;
        line-height: 1.6;
    }

    .sarv-page-viewinvoice hr {
        margin: 0.6rem 0;
    }

    /* Page-break behaviour: keep logical blocks together where it is
       cheap to do so, but never force long invoices onto one page. */
    .sarv-page-viewinvoice .invoice-header,
    .sarv-page-viewinvoice .invoice-status {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .sarv-page-viewinvoice table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .sarv-page-viewinvoice thead {
        display: table-header-group;
    }

    /* Nothing after the ledger should generate an empty trailing page. */
    .sarv-page-viewinvoice .invoice-container > *:last-child {
        margin-bottom: 0 !important;
    }
}

/* ---- Responsive (screen) ------------------------------------------------ */
@media (max-width: 767.98px) {
    .sarv-page-viewinvoice .invoice-container {
        padding: 1.1rem;
    }

    .sarv-page-viewinvoice .invoice-header {
        margin-bottom: 1rem;
    }
}


/* =========================================================================
   PHASE 7 — SARVCLOUD TICKETS / SUPPORT
   CSS-ONLY. No support template is overridden — every page below already
   exposes sufficient class hooks, and styling-only keeps WHMCS's message
   rendering/escaping, attachment URLs, rating JS, captcha and CSRF
   completely untouched.
   Scoped to the support page classes so nothing leaks into dashboard,
   services, domains, billing, auth or the order form.
   ========================================================================= */

/* ---- Ticket list -------------------------------------------------------
   Same DataTable pattern as services/domains/invoices (#tableTicketsList,
   column-index ordering, stateSave, Responsive extension, regex status
   filter on column 2), so the table markup is restyled rather than
   replaced. DataTables Responsive continues to collapse columns on small
   screens, which is what keeps mobile from becoming a horizontally
   scrolling Bootstrap table. */
.sarv-page-supportticketslist .table-container {
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    padding: 0.5rem 1rem 1rem;
}

.sarv-page-supportticketslist table.table-list thead th {
    border-top: 0;
    border-bottom: 1px solid var(--sarv-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sarv-text-muted);
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.sarv-page-supportticketslist table.table-list tbody td {
    border-top: 1px solid var(--sarv-border-soft);
    padding: 0.85rem 0.5rem;
    vertical-align: middle;
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-supportticketslist table.table-list tbody tr {
    cursor: pointer;
    transition: background-color .12s ease;
}

.sarv-page-supportticketslist table.table-list tbody tr:hover {
    background-color: var(--sarv-surface-soft);
}

/* Ticket number is a technical identifier — stays LTR under RTL. */
.sarv-page-supportticketslist .ticket-number {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sarv-text-muted);
    margin-inline-end: 0.45rem;
}

.sarv-page-supportticketslist .ticket-subject {
    color: var(--sarv-text);
    font-weight: 600;
}

/* WHMCS marks unread tickets with .unread — keep that meaning visible
   through weight as well as colour, not colour alone. */
.sarv-page-supportticketslist .ticket-subject.unread {
    font-weight: 800;
    color: var(--sarv-blue);
}

.sarv-page-supportticketslist table.table-list tbody td a {
    text-decoration: none;
}

.sarv-page-supportticketslist .dataTables_filter input,
.sarv-page-supportticketslist .dataTables_length select {
    border: 1px solid var(--sarv-border);
    border-radius: 8px;
    height: 36px;
    padding-inline: 0.6rem;
    background-color: var(--sarv-surface);
    color: var(--sarv-text);
}

.sarv-page-supportticketslist .dataTables_filter input:focus,
.sarv-page-supportticketslist .dataTables_length select:focus {
    border-color: var(--sarv-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.sarv-page-supportticketslist .dataTables_info,
.sarv-page-supportticketslist .dataTables_length,
.sarv-page-supportticketslist .dataTables_paginate {
    font-size: 0.82rem;
    color: var(--sarv-text-secondary);
}

/* Empty state text is supplied by WHMCS (sEmptyTable / norecordsfound). */
.sarv-page-supportticketslist td.dataTables_empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sarv-text-secondary);
    font-size: 0.9rem;
}

/* ---- Ticket status badges ---------------------------------------------
   Uses WHMCS's own .status-{$ticket.statusClass}; the translated status
   text comes straight from WHMCS and is never hardcoded here.
   IMPORTANT: .status-custom carries an inline background-color set by
   WHMCS from the department's configured colour, so it deliberately gets
   no background rule — only shape/typography — and that inline colour is
   left to win. */
.sarv-page-supportticketslist .label.status,
.sarv-page-viewticket .label.status {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border);
    color: var(--sarv-text-secondary);
    white-space: nowrap;
}

.sarv-page-supportticketslist .label.status-custom {
    /* background-color intentionally omitted — WHMCS sets it inline. */
    border-color: transparent;
    color: #fff;
}

.sarv-page-supportticketslist .label.status-open {
    background-color: #EFF8FF; border-color: #B2DDFF; color: #175CD3;
}

.sarv-page-supportticketslist .label.status-answered {
    background-color: #ECFDF3; border-color: #A6F4C5; color: #027A48;
}

.sarv-page-supportticketslist .label.status-customer-reply {
    background-color: #FFFAEB; border-color: #FEC84B; color: #B54708;
}

.sarv-page-supportticketslist .label.status-closed {
    background-color: #F2F4F7; border-color: #D0D5DD; color: #475467;
}

/* ---- Ticket conversation ----------------------------------------------
   Stock already emits .ticket-reply (+ .staff for admin replies),
   .posted-by, .message, .attachments — enough to build the thread without
   touching the markup, so {$reply.message} keeps WHMCS's own rendering
   and escaping untouched. */
.sarv-page-viewticket .card.view-ticket,
.sarv-page-viewticket #ticketReplyContainer {
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    margin-bottom: 1.25rem;
}

.sarv-page-viewticket .card.view-ticket > .card-body:first-child {
    border-bottom: 1px solid var(--sarv-border);
    background-color: var(--sarv-surface-soft);
    border-radius: 14px 14px 0 0;
}

.sarv-page-viewticket .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sarv-text);
}

/* Ticket id in the heading is technical. */
.sarv-page-viewticket .ticket-actions {
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sarv-page-viewticket .ticket-actions .btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.82rem;
}

/* Close is terminal — kept clearly secondary to replying. */
.sarv-page-viewticket .ticket-actions .btn-danger {
    background-color: transparent;
    border: 1px solid #FDA29B;
    color: #B42318;
}

.sarv-page-viewticket .ticket-actions .btn-danger:hover:not([disabled]),
.sarv-page-viewticket .ticket-actions .btn-danger:focus:not([disabled]) {
    background-color: #FEF3F2;
    border-color: #F97066;
    color: #912018;
}

/* Each reply becomes a distinct thread entry. */
.sarv-page-viewticket .ticket-reply {
    border: 1px solid var(--sarv-border-soft);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--sarv-surface);
}

/* Staff replies: restrained blue-tinted treatment. The distinction is
   carried by BOTH the tint and the requestor badge WHMCS already
   renders, so it never depends on colour alone. */
.sarv-page-viewticket .ticket-reply.staff {
    border-color: #B2DDFF;
    background-color: #FBFDFF;
}

.sarv-page-viewticket .ticket-reply.staff .posted-by {
    background-color: #EFF8FF;
    border-bottom-color: #B2DDFF;
}

.sarv-page-viewticket .posted-by {
    padding: 0.65rem 1rem;
    background-color: var(--sarv-surface-soft);
    border-bottom: 1px solid var(--sarv-border-soft);
    font-size: 0.82rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-viewticket .posted-by-name {
    font-weight: 700;
    color: var(--sarv-text);
}

.sarv-page-viewticket .posted-on {
    color: var(--sarv-text-muted);
}

.sarv-page-viewticket .requestor-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    color: var(--sarv-text-secondary);
}

/* Message body: long technical strings must wrap instead of overflowing,
   but the text direction of the message itself is left to the document /
   WHMCS output — it is never globally forced to LTR. */
.sarv-page-viewticket .message {
    font-size: 0.9rem;
    line-height: 2;
    color: var(--sarv-text);
    overflow-wrap: anywhere;
}

.sarv-page-viewticket .message pre,
.sarv-page-viewticket .message code {
    direction: ltr;
    unicode-bidi: isolate;
    background-color: var(--sarv-surface-soft);
    border: 1px solid var(--sarv-border-soft);
    border-radius: 8px;
    padding: 0.15rem 0.4rem;
    font-size: 0.85em;
}

.sarv-page-viewticket .message pre {
    padding: 0.75rem;
    overflow-x: auto;
    white-space: pre-wrap;
}

.sarv-page-viewticket .message img {
    max-width: 100%;
    height: auto;
}

.sarv-page-viewticket .message a {
    overflow-wrap: anywhere;
}

/* Attachments — presentation only. The dl.php URLs, attachment ids and
   the removed-attachment branch are all WHMCS's and untouched. */
.sarv-page-viewticket .attachments {
    border-top: 1px dashed var(--sarv-border);
    font-size: 0.85rem;
}

.sarv-page-viewticket .attachment-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sarv-page-viewticket .attachment-list li a,
.sarv-page-viewticket .attachment-list li > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--sarv-border);
    border-radius: 8px;
    background-color: var(--sarv-surface);
    font-size: 0.82rem;
    color: var(--sarv-text-secondary);
    text-decoration: none;
}

.sarv-page-viewticket .attachment-list li a:hover {
    border-color: var(--sarv-blue);
    color: var(--sarv-blue);
}

/* Filenames are technical values. */
.sarv-page-viewticket .attachment-list .caption {
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

.sarv-page-viewticket .attachment-list figure {
    margin: 0;
}

/* ---- Reply composer + submit form (shared with the new-ticket form) ---- */
.sarv-page-viewticket #ticketReplyContainer .card-title,
.sarv-page-supportticketsubmit-steptwo .card-title,
.sarv-page-supportticketsubmit-stepone .card-title {
    font-size: 0.98rem;
    font-weight: 700;
}

.sarv-page-viewticket label,
.sarv-page-supportticketsubmit-steptwo label:not(.custom-file-label) {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sarv-text);
    margin-bottom: 0.4rem;
}

.sarv-page-viewticket .form-control,
.sarv-page-supportticketsubmit-steptwo .form-control {
    border-radius: 10px;
    border-color: var(--sarv-border);
    font-size: 0.9rem;
}

.sarv-page-viewticket input.form-control,
.sarv-page-viewticket select.form-control,
.sarv-page-supportticketsubmit-steptwo input.form-control,
.sarv-page-supportticketsubmit-steptwo select.form-control {
    height: 42px;
}

.sarv-page-viewticket .form-control:focus,
.sarv-page-supportticketsubmit-steptwo .form-control:focus {
    border-color: var(--sarv-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Markdown editor textarea — the editor behaviour, auto-save hook and
   sanitisation are WHMCS's; only the box is styled. */
.sarv-page-viewticket textarea.markdown-editor,
.sarv-page-supportticketsubmit-steptwo textarea.markdown-editor {
    min-height: 180px;
    line-height: 1.9;
}

/* Attachment controls. The dynamic "add more" behaviour is driven by
   WHMCS JS via #btnTicketAttachmentsAdd / .file-upload /
   #fileUploadsContainer / .attachment-group — those hooks are only
   styled, never restructured, so multi-attachment support keeps working. */
.sarv-page-viewticket .attachment-group .custom-file-label,
.sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label {
    height: 42px;
    line-height: 30px;
    border-radius: 10px 0 0 10px;
    border-color: var(--sarv-border);
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-viewticket .attachment-group .custom-file,
.sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file {
    height: 42px;
}

.sarv-page-viewticket .attachment-group .btn,
.sarv-page-supportticketsubmit-steptwo .attachment-group .btn {
    height: 42px;
    border-radius: 0 10px 10px 0;
    font-weight: 600;
    font-size: 0.85rem;
}

/* RTL: the file-input pill's rounded ends must follow reading direction. */
html[dir="rtl"] .sarv-page-viewticket .attachment-group .custom-file-label,
html[lang="fa"] .sarv-page-viewticket .attachment-group .custom-file-label,
html[dir="rtl"] .sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label,
html[lang="fa"] .sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label {
    border-radius: 0 10px 10px 0;
}

html[dir="rtl"] .sarv-page-viewticket .attachment-group .btn,
html[lang="fa"] .sarv-page-viewticket .attachment-group .btn,
html[dir="rtl"] .sarv-page-supportticketsubmit-steptwo .attachment-group .btn,
html[lang="fa"] .sarv-page-supportticketsubmit-steptwo .attachment-group .btn {
    border-radius: 10px 0 0 10px;
}

/* The allowed-extensions / max-size hint is WHMCS-supplied text. */
.sarv-page-viewticket .form-group .text-muted small,
.sarv-page-supportticketsubmit-steptwo .form-group .text-muted small {
    font-size: 0.78rem;
    color: var(--sarv-text-muted);
}

.sarv-page-viewticket .btn-primary,
.sarv-page-supportticketsubmit-steptwo .btn-primary {
    min-height: 44px;
    padding-inline: 1.5rem;
    border-radius: 10px;
    font-weight: 700;
}

.sarv-page-viewticket .btn-default,
.sarv-page-supportticketsubmit-steptwo .btn-default {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 600;
}

/* ---- New-ticket page: cards, KB suggestions, captcha ------------------- */
.sarv-page-supportticketsubmit-steptwo .card,
.sarv-page-supportticketsubmit-stepone .card,
.sarv-page-supportticketsubmit-confirm .card,
.sarv-page-ticketfeedback .card {
    border: 1px solid var(--sarv-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
}

/* Department links on the (currently unreachable, single-department)
   step-one page: given a row treatment without needing markup changes. */
.sarv-page-supportticketsubmit-stepone .h5 a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--sarv-border);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sarv-text);
    text-decoration: none;
}

.sarv-page-supportticketsubmit-stepone .h5 a:hover {
    border-color: var(--sarv-blue);
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-blue);
}

/* KB suggestions stay visually secondary to the ticket form. */
.sarv-page-supportticketsubmit-steptwo #kbsuggestions,
.sarv-page-supportticketsubmit-steptwo .kbsuggestions {
    margin-top: 1.25rem;
    font-size: 0.88rem;
}

.sarv-page-supportticketsubmit-steptwo .recaptcha-container,
.sarv-page-viewticket .recaptcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

/* ---- Ticket rating ------------------------------------------------------
   The .star markup, rating attributes and its JS are WHMCS's. Font-family
   is deliberately NOT touched here — the stars are FontAwesome glyphs and
   overriding it would reintroduce the tofu bug fixed earlier. */
.sarv-page-viewticket .rating,
.sarv-page-viewticket .rating-done {
    margin-top: 0.5rem;
}

.sarv-page-viewticket .rated {
    font-size: 0.78rem;
    color: var(--sarv-text-muted);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sarv-page-supportticketslist .table-container {
        padding: 0.5rem;
    }

    .sarv-page-viewticket .card.view-ticket > .card-body:first-child .card-title {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .sarv-page-viewticket .ticket-actions {
        width: 100%;
    }

    .sarv-page-viewticket .ticket-actions .btn {
        flex: 1 1 auto;
        min-height: 40px;
    }

    .sarv-page-viewticket .posted-by {
        padding: 0.6rem 0.75rem;
    }

    /* Stock floats the requestor badge on md+; on mobile let it sit on its
       own line rather than colliding with the name/date. */
    .sarv-page-viewticket .requestor-badge {
        margin-top: 0.35rem;
    }

    .sarv-page-viewticket .message {
        padding: 0.85rem !important;
        /* !important required: stock applies Bootstrap's .p-3 utility
           directly on .message, and those utilities are !important. */
    }

    .sarv-page-viewticket .attachments {
        padding: 0.85rem !important;
    }

    .sarv-page-viewticket .attachment-list li a,
    .sarv-page-viewticket .attachment-list li > span {
        width: 100%;
    }

    .sarv-page-viewticket .btn-primary,
    .sarv-page-viewticket .btn-default,
    .sarv-page-supportticketsubmit-steptwo .btn-primary {
        width: 100%;
        margin-bottom: 0.4rem;
    }
}


/* =========================================================================
   PHASE 7 — POST-COMMIT RTL/LAYOUT FIXES
   Two confirmed bugs from authenticated screenshots. CSS only; no ticket
   markup, JS, form action, token or attachment handling is touched.
   ========================================================================= */

/* ---- FIX 1: ticket header actions escaping the card --------------------
   ROOT CAUSE (from stock markup + computed CSS):
   viewticket.tpl nests the action buttons INSIDE the heading:
       <h3 class="card-title">  … #{$tid}
           <div class="ticket-actions float-sm-right mt-3 mt-sm-0"> … </div>
       </h3>
   `.float-sm-right` resolves to `float: right !important`, and
   `.card-title` has no clearfix, no `overflow` and no BFC — so the
   floated action group is removed from normal flow, the <h3> never grows
   to contain it, and the buttons escape the card body. `float: right` is
   also a PHYSICAL value: under RTL it lands on the same side the title
   text starts from, so the two collide as well as overflow.

   FIX: turn the heading into a flex row and neutralise the float. The
   `!important` is required only to beat Bootstrap's own `!important`
   float utility. Direction-agnostic — correct in both LTR and RTL — and
   the existing <=767.98px rule further up the file still switches this to
   a column at narrow widths (it sets flex-direction, which is not
   re-declared here). No negative margins, no absolute positioning, no
   overflow clipping. */
.sarv-page-viewticket .card.view-ticket > .card-body:first-child .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sarv-page-viewticket .ticket-actions {
    float: none !important;
    flex: 0 0 auto;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Let the ticket title/ID shrink and wrap rather than push the actions
   out of the card. */
.sarv-page-viewticket .card.view-ticket > .card-body:first-child .card-title > * {
    min-width: 0;
}


/* ---- FIX 2: attachment "Browse" overlapping the filename in RTL -------
   ROOT CAUSE (from the resolved Bootstrap rules in theme.min.css):
       .custom-file-label        { position:absolute; top:0; right:0; left:0;
                                   padding:.375rem .75rem; }
       .custom-file-label::after { position:absolute; top:0; right:0; bottom:0;
                                   content:"Browse"; }
   The Browse button IS the label's ::after, pinned to `right: 0` — a
   physical value that never flips — while the label reserves no padding
   for it at all. Under LTR the text starts at the left and `text-truncate`
   hides the collision. Under RTL the label text is right-aligned and
   therefore *starts underneath* the Browse button, which is the overlap
   in the screenshot. There is no RTL handling for `.custom-file` anywhere
   in the stock CSS (verified: zero matches).

   FIX: give the Browse pseudo-element a deterministic width and, in RTL,
   move it to the logical end (left) while reserving matching padding on
   that side. Scoped to the support pages and to the attachment groups
   only. The <input type="file" name="attachments[]">, its ids, the
   dynamic add-more JS, the label element and the Browse text itself are
   all untouched — this is purely where the box sits and how much room the
   text gets. */
.sarv-page-viewticket .attachment-group .custom-file-label::after,
.sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label::after {
    width: 6rem;
    height: 40px;
    line-height: 28px;
    text-align: center;
    padding-inline: 0.5rem;
}

/* LTR: reserve room on the right so a long filename can never slide under
   the button (stock relies on truncation alone). */
.sarv-page-viewticket .attachment-group .custom-file-label,
.sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label {
    padding-right: 6.5rem;
    padding-left: 0.75rem;
}

/* RTL: Browse moves to the left edge, padding reserved on the left, and
   the filename reads from the right. */
html[dir="rtl"] .sarv-page-viewticket .attachment-group .custom-file-label::after,
html[lang="fa"] .sarv-page-viewticket .attachment-group .custom-file-label::after,
html[dir="rtl"] .sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label::after,
html[lang="fa"] .sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label::after {
    right: auto;
    left: 0;
    border-radius: 10px 0 0 10px;
}

html[dir="rtl"] .sarv-page-viewticket .attachment-group .custom-file-label,
html[lang="fa"] .sarv-page-viewticket .attachment-group .custom-file-label,
html[dir="rtl"] .sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label,
html[lang="fa"] .sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label {
    padding-right: 0.75rem;
    padding-left: 6.5rem;
    text-align: right;
}

/* Long filenames truncate instead of overflowing. Stock already adds
   .text-truncate on the label; this keeps that working once the label is
   also a flex-sibling of the Add More addon. */
.sarv-page-viewticket .attachment-group .custom-file-label,
.sarv-page-supportticketsubmit-steptwo .attachment-group .custom-file-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dynamically added rows use the same .attachment-group markup, so every
   rule above applies to them automatically — nothing extra is needed for
   the "Add More" clones. */


/* =========================================================================
   PHASE 8 — SARVCLOUD PROFILE / ACCOUNT
   CSS-ONLY. No account template is overridden. Audit of the installed
   WHMCS 9.0.6 Twenty-One templates confirmed every screen in this phase is
   plain Smarty (no SPA/React component), already card-based, and already
   exposes enough class hooks to be restyled safely:

     clientareadetails.tpl              Update Details (?action=details)
     clientareasecurity.tpl             Security Settings (SSO toggle)
     clientareaemails.tpl               Email History (DataTable)
     account-contacts-manage.tpl        Contacts
     account-contacts-new.tpl           Add Contact
     account-user-management.tpl        Users / sub-accounts + invites
     account-user-permissions.tpl       Per-user permissions
     account-paymentmethods.tpl         Payment Methods list
     account-paymentmethods-manage.tpl  Add/edit pay method
     user-profile.tpl                   Profile name + email change
     user-password.tpl                  Change Password
     user-security.tpl                  Security: linked accounts, security
                                        question, Two-Factor Authentication
     user-switch-account.tpl            Switch account

   Everything security-sensitive is left completely alone: CSRF tokens,
   {routePath} form actions, password fields and autocomplete="off", the
   password-strength include, the 2FA enable/disable modal triggers and
   their data-modal-* attributes, iCheck/toggle-switch initialisation, the
   remove-user / cancel-invite confirmation modals, and every field's name
   attribute. No field is hidden, added, reordered or re-labelled.

   Account sidebar/menu objects need no work here — the Phase 3 sidebar
   restyle (`.sidebar .card` / `.list-group-item`, ~line 2665) is global and
   already covers the account menu on all of these pages.

   Scope hook: `body.sarv-account`, emitted by header.tpl for the explicit
   template list above, so none of this leaks into dashboard, services,
   domains, billing, support, auth or the order form.
   ========================================================================= */

/* ---- 1. Shared account card language -----------------------------------
   Same radius/border/shadow/title treatment already used by the dashboard,
   services and support cards, so the account area reads as the same
   product rather than as stock Twenty-One. */
.sarv-account .primary-content .card {
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-md);
    background-color: var(--sarv-surface);
    margin-bottom: 1.5rem;
}

.sarv-account .primary-content .card:last-child {
    margin-bottom: 0;
}

.sarv-account .primary-content .card-body {
    padding: 1.5rem;
}

/* The CONTENT PAGE POLISH block above already gives `.primary-content
   .card-title` a rule; this only adjusts size/tracking for the account
   family and keeps the same underline separator. */
.sarv-account .primary-content .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Intro/help paragraphs that sit directly under a section title. */
.sarv-account .primary-content .card-body > p {
    color: var(--sarv-text-secondary);
    font-size: 0.9rem;
}

.sarv-account .primary-content .card-body > p.text-muted {
    font-size: 0.82rem;
}


/* ---- 2. Account forms --------------------------------------------------
   Field labels are currently near-invisible against the inputs; give them
   a real hierarchy (small, medium-weight, muted) and tighten the label ->
   input gap. `.col-form-label` is Bootstrap's vertically-centred variant
   and carries its own padding, which is what makes the stock spacing look
   loose in a stacked (non-horizontal) form. */
.sarv-account .primary-content .form-group > label,
.sarv-account .primary-content .form-group > .col-form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sarv-text-secondary);
    margin-bottom: 0.35rem;
    padding-bottom: 0;
}

.sarv-account .primary-content .form-control,
.sarv-account .primary-content .custom-select {
    height: auto;
    min-height: 42px;
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
    color: var(--sarv-text);
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sarv-account .primary-content .form-control:focus,
.sarv-account .primary-content .custom-select:focus {
    border-color: var(--sarv-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.sarv-account .primary-content .form-control::placeholder {
    color: var(--sarv-text-muted);
}

/* Uneditable fields (WHMCS renders them `disabled`, e.g. when a field is
   in $uneditablefields) must READ as unavailable, not just be inert. */
.sarv-account .primary-content .form-control[disabled],
.sarv-account .primary-content .custom-select[disabled] {
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-text-muted);
    cursor: not-allowed;
}

/* Email / phone / postcode / tax-id are latin-or-numeric identifiers.
   Under a Persian RTL page they must still be entered and displayed
   left-to-right, otherwise punctuation (@ . + -) reorders visually.
   Scoped by input type + the known WHMCS field ids so no free-text field
   (name, company, address, city) is forced out of RTL. */
html[dir="rtl"] .sarv-account input[type="email"],
html[lang="fa"] .sarv-account input[type="email"],
html[dir="rtl"] .sarv-account input[type="tel"],
html[lang="fa"] .sarv-account input[type="tel"],
html[dir="rtl"] .sarv-account input[type="password"],
html[lang="fa"] .sarv-account input[type="password"],
html[dir="rtl"] .sarv-account #inputPostcode,
html[lang="fa"] .sarv-account #inputPostcode,
html[dir="rtl"] .sarv-account #inputTaxId,
html[lang="fa"] .sarv-account #inputTaxId {
    direction: ltr;
    text-align: right;
}

/* ---- 2b. Two-column detail layout under RTL ---------------------------
   clientareadetails.tpl lays its columns out with `d-md-block` +
   `float-md-left` / `float-md-right`. Those Bootstrap 4 float utilities are
   PHYSICAL (`float: left` / `float: right`), so they do not flip under
   `direction: rtl`: the first column (name/company/email) was rendering on
   the visual LEFT and the address column on the RIGHT, i.e. the reading
   order was reversed for Persian. Swapping the floats for RTL only
   restores first-column-first reading order. The stock LTR result is
   untouched. */
@media (min-width: 768px) {
    html[dir="rtl"] .sarv-page-clientareadetails .primary-content .float-md-left,
    html[lang="fa"] .sarv-page-clientareadetails .primary-content .float-md-left {
        float: right !important;
    }

    html[dir="rtl"] .sarv-page-clientareadetails .primary-content .float-md-right,
    html[lang="fa"] .sarv-page-clientareadetails .primary-content .float-md-right {
        float: left !important;
    }
}

/* The float layout leaves the card body without a clearing context, so the
   last column can overhang the card. Same class of fix as the Phase 7
   ticket-actions correction. */
.sarv-page-clientareadetails .primary-content .card-body > form > .card .row,
.sarv-page-clientareadetails .primary-content .row.d-md-block {
    overflow: hidden;
}


/* ---- 3. Checkbox / radio option rows ------------------------------------
   Used by email preferences (clientareadetails), user permissions, the
   invite-permission list and the billing-contact chooser. Stock renders
   them as bare inline labels with a <br> between, which reads as a wall of
   text. Turn each into a padded, bordered option row without touching the
   inputs themselves (iCheck/toggle-switch JS binds to the input, not the
   label box). */
.sarv-account .primary-content .form-check,
.sarv-account .primary-content .controls.form-check > label {
    display: block;
    position: relative;
    margin: 0 0 0.5rem 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-sm);
    background-color: var(--sarv-surface-soft);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--sarv-text);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.sarv-account .primary-content .form-check:hover,
.sarv-account .primary-content .controls.form-check > label:hover {
    border-color: var(--sarv-blue);
    background-color: var(--sarv-surface);
}

/* Stock uses `.form-check-inline`, which Bootstrap sets to inline-flex;
   the block treatment above is the intent here, so re-assert display for
   that variant too. */
.sarv-account .primary-content .form-check.form-check-inline {
    display: block;
    margin-inline-end: 0;
}

/* The description half of a permission row is secondary information. */
.sarv-account .primary-content .form-check .text-muted {
    display: inline;
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--sarv-text-secondary);
}

.sarv-account .primary-content .form-check .form-check-input,
.sarv-account .primary-content .controls.form-check .form-check-input {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
    position: static;
    vertical-align: middle;
}

/* Stock separates option rows with a bare <br>, which now double-spaces
   them next to the padded rows above. Collapse only those. */
.sarv-account .primary-content .form-check + br,
.sarv-account .primary-content .controls.form-check br {
    display: none;
}

/* The invite "choose permissions" panel (`.well`) — Bootstrap 4 dropped
   `.well`, so it renders unstyled. */
.sarv-account .primary-content .well {
    padding: 1rem;
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-md);
    background-color: var(--sarv-surface-soft);
}

/* Billing-contact chooser rows (account-paymentmethods-billing-contacts):
   the name should lead, the address read as one muted line. */
.sarv-account #innerBillingContactsContainer .form-check .name {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--sarv-text);
}

.sarv-account #innerBillingContactsContainer .form-check {
    font-size: 0.85rem;
    color: var(--sarv-text-secondary);
}


/* ---- 4. Form action rows ------------------------------------------------
   Every account form ends with a submit + reset pair (and
   clientareadetails wraps them in `.form-group.text-center`). Give them one
   consistent, start-aligned action row separated from the fields above. */
.sarv-account .primary-content form > .btn,
.sarv-account .primary-content form > input[type="submit"],
.sarv-account .primary-content form > input[type="reset"],
.sarv-account .primary-content form > button[type="submit"],
.sarv-account .primary-content form > p > .btn,
.sarv-account .primary-content form > p > input[type="submit"],
.sarv-account .primary-content form > p > input[type="reset"] {
    margin-top: 0.25rem;
    margin-inline-end: 0.5rem;
}

.sarv-account .primary-content .btn {
    border-radius: var(--sarv-radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
}

.sarv-account .primary-content .btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

.sarv-account .primary-content .btn-primary {
    background-color: var(--sarv-blue);
    border-color: var(--sarv-blue);
    color: #fff;
}

.sarv-account .primary-content .btn-primary:hover,
.sarv-account .primary-content .btn-primary:focus {
    background-color: var(--sarv-blue-hover);
    border-color: var(--sarv-blue-hover);
}

.sarv-account .primary-content .btn-default {
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border-interactive);
    color: var(--sarv-text-secondary);
}

.sarv-account .primary-content .btn-default:hover,
.sarv-account .primary-content .btn-default:focus {
    border-color: var(--sarv-blue);
    color: var(--sarv-text);
}

/* WHMCS marks unavailable row actions with the `disabled` CLASS on an <a>
   (not the attribute), e.g. "Manage Permissions" for the account owner and
   "Set as Default" for the current default pay method. Bootstrap 4 styles
   `.btn.disabled`, but make it unmistakable and non-clickable-looking. */
.sarv-account .primary-content .btn.disabled,
.sarv-account .primary-content a.btn.disabled {
    opacity: .5;
    pointer-events: none;
}

/* The stock detail-page action row is centred; the rest of the account area
   is start-aligned, so align it with everything else. */
.sarv-page-clientareadetails .primary-content form > .form-group.text-center {
    text-align: start !important;
    margin-top: 0.5rem;
    margin-bottom: 0;
}


/* ---- 5. Account tables (users, invites, payment methods) ----------------
   These are plain Bootstrap `.table.table-striped` (NOT DataTables), so
   they are restyled in place and wrapped in a horizontal scroll context for
   small screens rather than converted to cards. Row markup, the action
   links, their routePaths and the modal triggers are untouched. */
.sarv-account .primary-content .card-body > .table,
.sarv-account .primary-content .card-body > form .table {
    margin-bottom: 1rem;
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background-color: var(--sarv-surface);
}

.sarv-account .primary-content .table th {
    border-top: 0;
    border-bottom: 1px solid var(--sarv-border);
    background-color: var(--sarv-surface-soft);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sarv-text-muted);
    padding: 0.75rem 0.9rem;
    white-space: nowrap;
    text-align: start;
}

.sarv-account .primary-content .table td {
    border-top: 1px solid var(--sarv-border-soft);
    padding: 0.85rem 0.9rem;
    vertical-align: middle;
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

/* Zebra striping fights the soft borders above; a hover state carries the
   row affordance better and keeps the surface calm. */
.sarv-account .primary-content .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.sarv-account .primary-content .table tbody tr:hover {
    background-color: var(--sarv-surface-soft);
}

/* Email addresses and usernames are latin identifiers — keep them LTR
   inside an otherwise RTL table cell. */
html[dir="rtl"] .sarv-account .primary-content .table td,
html[lang="fa"] .sarv-account .primary-content .table td {
    unicode-bidi: plaintext;
}

/* Row action buttons wrap instead of stretching the table on narrow
   viewports. */
.sarv-account .primary-content .table td .btn {
    margin-bottom: 0.25rem;
    margin-inline-end: 0.25rem;
}

@media (max-width: 767.98px) {
    .sarv-account .primary-content .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Status/role chips: `.label` is a Bootstrap 3 class Twenty-One still
   emits (client owner, verified/not-verified, closed account). */
.sarv-account .primary-content .label {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
}

.sarv-account .primary-content .label-info {
    background-color: rgba(37, 99, 235, .1);
    color: var(--sarv-blue);
}

.sarv-account .primary-content .label-success {
    background-color: rgba(20, 184, 166, .12);
    color: #0F766E;
}

.sarv-account .primary-content .label-default {
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-text-secondary);
    border: 1px solid var(--sarv-border);
}


/* ---- 6. Email history (clientareaemails.tpl) ----------------------------
   This one IS a DataTable (#tableEmailsList). Same treatment as the
   services/domains/invoices/tickets lists — markup and the DataTables init
   are left exactly as WHMCS ships them. */
.sarv-page-clientareaemails .table-container {
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-md);
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04);
    padding: 0.5rem 1rem 1rem;
}

.sarv-page-clientareaemails table.table-list thead th {
    border-top: 0;
    border-bottom: 1px solid var(--sarv-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sarv-text-muted);
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.sarv-page-clientareaemails table.table-list tbody td {
    border-top: 1px solid var(--sarv-border-soft);
    padding: 0.85rem 0.5rem;
    vertical-align: middle;
    font-size: 0.88rem;
    color: var(--sarv-text-secondary);
}

.sarv-page-clientareaemails table.table-list tbody tr {
    cursor: pointer;
    transition: background-color .12s ease;
}

.sarv-page-clientareaemails table.table-list tbody tr:hover {
    background-color: var(--sarv-surface-soft);
}

.sarv-page-clientareaemails .dataTables_filter input,
.sarv-page-clientareaemails .dataTables_length select {
    border: 1px solid var(--sarv-border);
    border-radius: 8px;
    height: 36px;
    padding-inline: 0.6rem;
    background-color: var(--sarv-surface);
    color: var(--sarv-text);
}

.sarv-page-clientareaemails .dataTables_filter input:focus,
.sarv-page-clientareaemails .dataTables_length select:focus {
    border-color: var(--sarv-blue);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}


/* ---- 7. Contacts: the contact chooser bar -------------------------------
   account-contacts-manage.tpl puts the "choose contact" <select> inside an
   `.alert.alert-block.alert-info`, which reads as a warning banner rather
   than a control. Restyle it as a neutral toolbar. The form, its select and
   its onchange="submit()" are untouched. */
.sarv-page-account-contacts-manage .primary-content .alert.alert-info,
.sarv-page-account-contacts-new .primary-content .alert.alert-info {
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-md);
    color: var(--sarv-text);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.sarv-page-account-contacts-manage .primary-content .alert.alert-info .col-form-label,
.sarv-page-account-contacts-new .primary-content .alert.alert-info .col-form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sarv-text-secondary);
    align-self: center;
    margin-bottom: 0;
}

/* Bootstrap's `.row` inside the alert has negative margins that pull the
   control to the edge of the padded toolbar. */
.sarv-page-account-contacts-manage .primary-content .alert.alert-info .row,
.sarv-page-account-contacts-new .primary-content .alert.alert-info .row {
    align-items: center;
    margin-inline: 0;
}


/* ---- 8. Change Password (user-password.tpl) -----------------------------
   Stock uses a horizontal `.form-group.row` with `col-xl-4` labels and a
   `col-xl-3` "generate password" button. At xl the label column is a
   vertically-centred right-hand gutter in LTR — under RTL the same
   `text-align` is inherited from the page, so only alignment and the
   strength meter need attention here. */
.sarv-page-user-password .primary-content .form-group.row {
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.sarv-page-user-password .primary-content .form-group.row > .col-form-label {
    padding-top: 0.6rem;
    text-align: start;
}

/* The generate-password button sits in its own grid column and stretches
   full-width via `.btn-block`; on stacked (sub-xl) layouts that leaves it
   glued to the confirm field above. */
.sarv-page-user-password .primary-content .generate-password {
    margin-top: 0.35rem;
}

@media (min-width: 1200px) {
    .sarv-page-user-password .primary-content .generate-password {
        margin-top: 0;
    }
}

/* Password strength meter (includes/pwstrength.tpl) — the bar itself is
   driven by WHMCS's own JS classes; only the container is softened. */
.sarv-account .primary-content .progress {
    height: 6px;
    margin-top: 0.5rem;
    border-radius: 999px;
    background-color: var(--sarv-border-soft);
}

.sarv-account .primary-content .progress-bar {
    border-radius: 999px;
}

/* Confirm-password mismatch/match feedback text. */
.sarv-account .primary-content #inputNewPassword2Msg {
    font-size: 0.8rem;
    margin-top: 0.35rem;
}


/* ---- 9. Security: 2FA, security question, linked accounts ---------------
   user-security.tpl / clientareasecurity.tpl. The 2FA enable/disable links
   are `.open-modal` anchors carrying data-modal-* attributes that WHMCS's
   own JS reads to build the setup modal — they are styled as buttons only;
   href, classes required by the JS (`open-modal`, `twofa-config-link`,
   `enable`/`disable`, `w-hidden`) and every data attribute are preserved. */
.sarv-account .primary-content .twofa-config-link {
    font-size: 0.9rem;
    color: var(--sarv-text-secondary);
}

.sarv-account .primary-content p.twofa-config-link strong {
    color: var(--sarv-text);
}

.sarv-account .primary-content .btn-success {
    background-color: var(--sarv-teal);
    border-color: var(--sarv-teal);
    color: #fff;
}

.sarv-account .primary-content .btn-success:hover,
.sarv-account .primary-content .btn-success:focus {
    background-color: #0F9E8E;
    border-color: #0F9E8E;
}

/* Recommendation/requirement notices rendered by includes/alert.tpl. */
.sarv-account .primary-content .alert {
    border-radius: var(--sarv-radius-md);
    font-size: 0.88rem;
    border-width: 1px;
}

.sarv-account .primary-content .alert-warning {
    background-color: #FFF8EB;
    border-color: #F5D9A0;
    color: #7A5312;
}

.sarv-account .primary-content .alert-success {
    background-color: #ECFDF6;
    border-color: #A7E8D2;
    color: #0F766E;
}

.sarv-account .primary-content .alert-danger,
.sarv-account .primary-content .alert-error {
    background-color: #FEF2F2;
    border-color: #F6C2C2;
    color: #9B2C2C;
}

/* Inline field validation lists produced by WHMCS ($errormessage /
   $errorMessageHtml are rendered as a <ul> inside the alert). */
.sarv-account .primary-content .alert ul {
    margin: 0;
    padding-inline-start: 1.25rem;
}

/* The SSO toggle row on clientareasecurity.tpl — the `.toggle-switch-success`
   checkbox is initialised by WHMCS JS; only the row around it is spaced. */
.sarv-page-clientareasecurity .primary-content #frmSingleSignOn .p-2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0 !important;
    font-size: 0.9rem;
}


/* ---- 10. Switch account (user-switch-account.tpl) -----------------------
   `.select-account a` is a bare stacked link list; make each entry a real
   selectable row. The click handler binds to `.select-account a`, so the
   element and its data-id are untouched. */
.sarv-page-user-switch-account .select-account a,
.sarv-page-user-switch-account-forced .select-account a {
    display: block;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--sarv-border);
    border-radius: var(--sarv-radius-sm);
    background-color: var(--sarv-surface-soft);
    color: var(--sarv-text);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color .12s ease, background-color .12s ease;
}

.sarv-page-user-switch-account .select-account a:hover,
.sarv-page-user-switch-account-forced .select-account a:hover {
    border-color: var(--sarv-blue);
    background-color: var(--sarv-surface);
}

.sarv-page-user-switch-account .select-account a.disabled,
.sarv-page-user-switch-account-forced .select-account a.disabled {
    opacity: .55;
    pointer-events: none;
}


/* ---- 11. Payment methods ------------------------------------------------
   account-paymentmethods.tpl + account-paymentmethods-manage.tpl. Gateway
   selection, the remote/tokenised card iframes and every gateway route are
   left untouched — this is card-surface and list styling only. */
.sarv-page-account-paymentmethods .primary-content #payMethodList td:first-child {
    width: 2.5rem;
    color: var(--sarv-text-muted);
    font-size: 1.1rem;
    text-align: center;
}

/* Card numbers / expiry / sort codes are latin+numeric, always LTR. */
html[dir="rtl"] .sarv-account .primary-content .cc-number,
html[lang="fa"] .sarv-account .primary-content .cc-number,
html[dir="rtl"] .sarv-account .primary-content input[name="cardnum"],
html[lang="fa"] .sarv-account .primary-content input[name="cardnum"],
html[dir="rtl"] .sarv-account .primary-content input[name="cardexp"],
html[lang="fa"] .sarv-account .primary-content input[name="cardexp"] {
    direction: ltr;
    text-align: right;
}


/* ---- 12. Responsive ----------------------------------------------------
   The sidebar/primary-content stacking is already handled globally by the
   CONTENT PAGE POLISH block. This tightens the account cards themselves on
   phones so the forms don't lose usable width to padding. */
@media (max-width: 575.98px) {
    .sarv-account .primary-content .card-body {
        padding: 1.15rem;
    }

    .sarv-account .primary-content .card-title {
        font-size: 1rem;
    }

    /* The password form's horizontal grid is already stacked below xl;
       remove the leftover label gutter padding on phones. */
    .sarv-page-user-password .primary-content .form-group.row > .col-form-label {
        padding-top: 0;
    }

    /* Action rows: full-width, stacked buttons are easier to hit than a
       wrapped inline pair. */
    .sarv-account .primary-content form > input[type="submit"],
    .sarv-account .primary-content form > input[type="reset"],
    .sarv-account .primary-content form > .btn,
    .sarv-account .primary-content form > p > input[type="submit"],
    .sarv-account .primary-content form > p > input[type="reset"],
    .sarv-account .primary-content form > p > .btn {
        display: block;
        width: 100%;
        margin-inline-end: 0;
        margin-bottom: 0.5rem;
    }
}


/* =========================================================================
   PHASE 9 — JALALI DATE DISPLAY (RTL / RESPONSIVE SUPPORT ONLY)
   The conversion itself lives in includes/hooks/sarvcloud_jalali.php and
   emits values already wrapped in U+2066/U+2069 bidi isolates, so ordering
   is correct without any CSS. These few rules only stop a slightly longer
   date+time string from wrapping mid-value or widening a table column.
   Nothing here converts, parses or reformats anything.
   ========================================================================= */

/* A Jalali date+time (`1405/06/01 14:30`) is one atomic value — it must
   never break across two lines between the date and the time. The bidi
   isolates already guarantee the ORDER; this guarantees the LINE. Applied
   to the date columns of the list pages and the ticket byline. */
html[dir="rtl"] .sarv-page-clientareainvoices table.table-list tbody td,
html[lang="fa"] .sarv-page-clientareainvoices table.table-list tbody td,
html[dir="rtl"] .sarv-page-clientareaquotes table.table-list tbody td,
html[lang="fa"] .sarv-page-clientareaquotes table.table-list tbody td,
html[dir="rtl"] .sarv-page-clientareaproducts table.table-list tbody td,
html[lang="fa"] .sarv-page-clientareaproducts table.table-list tbody td,
html[dir="rtl"] .sarv-page-clientareadomains table.table-list tbody td,
html[lang="fa"] .sarv-page-clientareadomains table.table-list tbody td,
html[dir="rtl"] .sarv-page-supportticketslist table.table-list tbody td,
html[lang="fa"] .sarv-page-supportticketslist table.table-list tbody td,
html[dir="rtl"] .sarv-page-clientareaemails table.table-list tbody td,
html[lang="fa"] .sarv-page-clientareaemails table.table-list tbody td {
    white-space: nowrap;
}

/* …but only where there is room. Below the DataTables Responsive
   breakpoint the columns collapse anyway, and forcing nowrap there is what
   would cause the horizontal overflow this is meant to prevent. Checked at
   390 / 768 / 1024 / 1366px. */
@media (max-width: 767.98px) {
    html[dir="rtl"] .sarv-account .primary-content .table td,
    html[lang="fa"] .sarv-account .primary-content .table td,
    html[dir="rtl"] table.table-list tbody td,
    html[lang="fa"] table.table-list tbody td {
        white-space: normal;
    }
}

/* Ticket byline: "posted by <name> on <date>" — keep the date atomic
   without stopping the sentence around it from wrapping. */
html[dir="rtl"] .posted-on,
html[lang="fa"] .posted-on {
    white-space: nowrap;
}

/* ---- Home panel header buttons ----------------------------------------
   Stock twenty-one sets `.client-home-cards .card-header .btn { color:#fff;
   border:0 }`, correct there because that header carries a solid bg-color-*
   background. This child theme lightens the header to --sarv-surface-soft,
   so the inherited rule left a white label with no border on a near-white
   surface: invisible until hover.

   Only the two properties the parent broke are restored -- colour and
   border -- plus the surface they sit on. Spacing, typography, radius and
   layout are left to the inherited button styles. Specificity (0,4,0) beats
   the inherited (0,3,0), so no !important is needed. */
.sarv-page-clientareahome .sarv-panel .card-header .btn {
    background-color: var(--sarv-surface);
    border: 1px solid var(--sarv-blue);
    color: var(--sarv-blue);
}

/* custom.css loads after theme.min.css, so the rule above ties with the
   inherited :hover on specificity and wins on source order -- which would
   leave the button with no hover feedback at all. These two declarations
   restore it. */
.sarv-page-clientareahome .sarv-panel .card-header .btn:hover,
.sarv-page-clientareahome .sarv-panel .card-header .btn:focus {
    background-color: var(--sarv-blue);
    color: #FFFFFF;
}