/* ==========================================================================
   CostGuard – Child Theme
   ──────────────────────────────────────────────────────────────────────────
   This file is the CostGuard child theme that sits on top of the Canvas
   source theme. It is loaded AFTER all Canvas stylesheets in App.razor so
   every rule here wins by natural cascade order — no !important required
   except where Bootstrap's CSS-variable chain forces it.

   Load order in App.razor:
     1. /themes/canvas/style.css          ← Canvas source (never edit)
     2. /themes/canvas/css/font-icons.css ← Canvas source (never edit)
     3. /themes/canvas/css/custom.css     ← Canvas placeholder (never edit)
     4. /css/costguard-theme.css          ← THIS FILE (all customisations here)

   Note: the Canvas Integro demo stylesheet (/themes/canvas/demos/integro/integro.css)
   was previously loaded between steps 2 and 3. Its required rules have been merged
   into this file (see "Canvas Integro rules" section immediately below) so the
   rendered HTML no longer references a demo-named path.

   When Canvas ships an update: replace files in /themes/canvas/ only.
   This file is unaffected by theme updates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Canvas Integro demo rules — merged from /themes/canvas/demos/integro/integro.css
   Originally a Canvas demo stylesheet. Rules required by CostGuard public pages
   (.bg-white-soft, .fbox-icon, .offcanvas, .stack-cards etc.) are preserved here
   so rendered HTML no longer references a demo-named stylesheet path.
   -------------------------------------------------------------------------- */

:root {
	--cnvs-themecolor: #FFE036;
	--cnvs-themecolor-rgb: 255, 224, 54;
	--cnvs-secondary-color: #040d1d;
	--cnvs-primary-font: 'Manrope', sans-serif;
	--cnvs-secondary-font: 'PT Serif', serif;
}

.dark,
body.dark {
	--cnvs-body-bg: var(--cnvs-secondary-color);
	--cnvs-body-bg-boxed: var(--cnvs-secondary-color);
	--cnvs-footer-bg: var(--cnvs-secondary-color);

	--cnvs-header-sticky-bg: var(--cnvs-body-bg);
}

#header,
.not-dark {
	--cnvs-header-bg: var(--cnvs-secondary-color);
	--cnvs-primary-menu-submenu-bg: var(--cnvs-themecolor);
	--cnvs-primary-menu-submenu-font-color: var(--cnvs-secondary-color);
	--cnvs-primary-menu-submenu-hover-color: var(--bs-gray-900);
}

* {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.offcanvas {
	opacity: 0;
	transform: translateX(50%);
	transition: transform 0.3s ease-in-out,
					opacity 0.3s ease-in-out;
	will-change: transform;
}

.offcanvas.show {
	opacity: 1;
}

.offcanvas-backdrop.show {
	opacity: .7;
}

.fbox-icon i,
.bg-white-soft {
	background-color: rgba(255, 255, 255, 0.07);
}

.owl-carousel.full-width-view .owl-stage {
	padding-left: 0 !important;
}

.owl-carousel.full-width-view .owl-stage-outer {
	overflow: visible;
}

.owl-carousel {
	--cnvs-owl-nav-sizes: 46px;
	--cnvs-owl-nav-background: rgba(0,0,0,0.5);
	--cnvs-owl-nav-bg: var(--cnvs-themecolor);
}

.dark .owl-carousel .owl-nav [class*=owl-] span {
	border-color: rgba(255,255,255,0.15);
	color: #CCC;
	line-height: 30px;
}

.stack-cards {
  position: relative;
  display: block;
}

.stack-cards-item {
	background: #19202B;
	border-radius: 0.25rem;
	box-shadow: -5px 0 16px 8px rgba(0, 0, 0, 0.2);
	text-align: left;
	margin-bottom: 10px;
}

@media (min-width: 992px) {

	.content-wrap {
		overflow:visible;
	}

	.stack-cards {
		position: relative;
		display: block;
	}

	.sticky-title {
		position: sticky;
		top: 8rem;
	}

	.stack-cards > .stack-cards-item + .stack-cards-item {
		margin-top: 40vh;
	}

	.stack-cards-item {
		--cnvs-stack-card-offset: 1.5em;
		max-width: 53rem;
		position: sticky;
		top: 20rem;
		margin-bottom: 0px;
	}

	.stack-cards-item:nth-of-type(0) {
		transform: translateY(calc((0 - 1) * var(--cnvs-stack-card-offset))) scale(0.85);
	}
	.stack-cards-item:nth-of-type(1) {
		transform: translateY(calc((1 - 1) * var(--cnvs-stack-card-offset))) scale(0.88);
	}
	.stack-cards-item:nth-of-type(2) {
		transform: translateY(calc((2 - 1) * var(--cnvs-stack-card-offset))) scale(0.91);
	}
	.stack-cards-item:nth-of-type(3) {
		transform: translateY(calc((3 - 1) * var(--cnvs-stack-card-offset))) scale(0.94);
	}
	.stack-cards-item:nth-of-type(4) {
		transform: translateY(calc((4 - 1) * var(--cnvs-stack-card-offset))) scale(0.97);
	}
	.stack-cards-item:nth-of-type(5) {
		transform: translateY(calc((5 - 1) * var(--cnvs-stack-card-offset))) scale(1);
	}
}

.promo h2 {
    color: #FFF;
    font-size: 34px;
    line-height: 135%;
    font-weight: 600;
    letter-spacing: -1px;
}

.offcanvas + #wrapper {
	transition: transform .3s ease;
}

.offcanvas.show + #wrapper {
	transform: scale(0.99);
}

.dark .primary-menu:not(.not-dark) .sub-menu-container .menu-item > .menu-link {
	border-radius: 8px;
}

/* --------------------------------------------------------------------------
   End of Canvas Integro merged rules
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   CostGuard design tokens live in /css/costguard-tokens.css, which App.razor
   loads before this file on every route. This file maps them onto Canvas and
   Bootstrap; a new colour is a new token there, never a literal here.
   -------------------------------------------------------------------------- */

/* ── Light theme: Bootstrap + Canvas token overrides ─────────────────── */
:root,
[data-bs-theme="light"] {
    /* Canvas */
    --cnvs-themecolor:     var(--cg-brand);
    --cnvs-themecolor-rgb: var(--cg-brand-rgb);
    --cnvs-section-bg:     var(--cg-bg);
    --cnvs-body-bg:        var(--cg-bg);

    /* Bootstrap */
    --bs-body-bg:           var(--cg-bg);
    --bs-body-color:        var(--cg-text-primary);
    --bs-secondary-color:   var(--cg-text-secondary);
    --bs-heading-color:     var(--cg-text-primary);
    --bs-border-color:      var(--cg-border);
    --bs-primary-rgb:       var(--cg-accent-rgb);
    --bs-link-color:        var(--cg-accent-text);
    --bs-link-hover-color:  var(--cg-accent-hover);
    --bs-card-bg:           var(--cg-bg-elevated);
    --bs-card-border-color: var(--cg-border);
}

/* ── Dark theme: Bootstrap + Canvas token overrides ─────────────────── */
[data-bs-theme="dark"] {
    /* Canvas */
    --cnvs-themecolor:     var(--cg-accent-text);
    --cnvs-themecolor-rgb: 147, 169, 255;
    --cnvs-section-bg:     var(--cg-bg);
    --cnvs-body-bg:        var(--cg-bg);
    --cnvs-footer-bg:      var(--cg-bg-subtle);

    /* Bootstrap */
    --bs-body-bg:           var(--cg-bg);
    --bs-body-color:        var(--cg-text-primary);
    --bs-secondary-color:   var(--cg-text-secondary);
    --bs-heading-color:     var(--cg-text-primary);
    --bs-border-color:      var(--cg-border);
    --bs-primary-rgb:       var(--cg-accent-rgb);
    --bs-link-color:        var(--cg-accent-text);
    --bs-link-hover-color:  var(--cg-text-primary);
    --bs-card-bg:           var(--cg-bg-elevated);
    --bs-card-border-color: var(--cg-border);
}

/* app-preferences.js writes --cnvs-themecolor inline on <html>, which no
   stylesheet rule on that element can outrank. Declaring it again on <body>
   shadows the inherited value for everything that actually renders. In the
   dark theme it is the accent in its TEXT role, because canvas mostly spends
   it on link and menu colours; filled buttons take --cg-accent explicitly. */
[data-bs-theme="light"] body {
    --cnvs-themecolor:     var(--cg-accent);
    --cnvs-themecolor-rgb: var(--cg-accent-rgb);
}

[data-bs-theme="dark"] body {
    --cnvs-themecolor:     var(--cg-accent-text);
    --cnvs-themecolor-rgb: 147, 169, 255;
}

/* The merged canvas rule `body.dark` re-declares the page surfaces on <body>
   itself, which shadows the values the theme blocks above set on <html>. */
[data-bs-theme] body {
    --cnvs-body-bg:          var(--cg-bg);
    --cnvs-body-bg-boxed:    var(--cg-bg);
    --cnvs-footer-bg:        var(--cg-bg-subtle);
    --cnvs-header-sticky-bg: transparent;
}

/* ── Apply body tokens to the document ───────────────────────────────── */
[data-bs-theme="light"] {
    background-color: var(--cg-bg);
    color:            var(--cg-text-primary);
}

[data-bs-theme="light"] .section {
    color: var(--cg-text-primary);
}

[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5,
[data-bs-theme="light"] h6 {
    color: var(--cg-text-primary);
}

[data-bs-theme="light"] .text-muted {
    color: var(--cg-text-secondary) !important;
}

/* Semantic utility classes */
.cg-text-success { color: var(--cg-success) !important; }
.cg-text-warning { color: var(--cg-warning) !important; }
.cg-text-error   { color: var(--cg-error)   !important; }
.cg-bg-success   { background-color: var(--cg-success-light) !important; }
.cg-bg-warning   { background-color: var(--cg-warning-light) !important; }
.cg-bg-error     { background-color: var(--cg-error-light)   !important; }

/* --------------------------------------------------------------------------
   .cg-section-dark  – theme-safe dark band
   Always renders as dark background with white text regardless of
   data-bs-theme. Resets the Canvas --cnvs-section-bg variable so the
   theme's own property chain can't override our background.
   -------------------------------------------------------------------------- */
.cg-section-dark {
    --cnvs-section-bg:    var(--cg-dark-bg);
    background-color:     var(--cg-dark-bg) !important;
    color:                var(--cg-dark-text) !important;
}

    .cg-section-dark h1,
    .cg-section-dark h2,
    .cg-section-dark h3,
    .cg-section-dark h4,
    .cg-section-dark h5,
    .cg-section-dark h6 {
        color: var(--cg-dark-text) !important;
    }

    .cg-section-dark p,
    .cg-section-dark .lead,
    .cg-section-dark .text-muted {
        color: var(--cg-dark-text-muted) !important;
    }

    .cg-section-dark .border {
        border-color: var(--cg-dark-border) !important;
    }

/* --------------------------------------------------------------------------
   Theme-aware card helper
   -------------------------------------------------------------------------- */
[data-bs-theme="light"] .cg-card {
    --cg-card-bg:      #ffffff;
    --cg-card-border:  var(--cg-card-border-light);
    --cg-card-shadow:  var(--cg-card-shadow-light);
}

[data-bs-theme="dark"] .cg-card {
    --cg-card-bg:      #1e2431;
    --cg-card-border:  var(--cg-card-border-dark);
    --cg-card-shadow:  var(--cg-card-shadow-dark);
}

.cg-card {
    background:    var(--cg-card-bg, #ffffff);
    border:        1px solid var(--cg-card-border, rgba(0,0,0,.08));
    box-shadow:    var(--cg-card-shadow, 0 8px 32px rgba(0,0,0,.07));
    transition:    transform 0.25s ease, box-shadow 0.25s ease;
}

    .cg-card:hover {
        transform:  translateY(-5px);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.13);
    }

/* --------------------------------------------------------------------------
   Public header – follows the theme

   The header used to carry the canvas .dark class and a fixed near-black
   background, so it stayed dark in the light theme. It now takes its colours
   from the semantic tokens: transparent while the page is at the top, so the
   hero reads straight through it, and a blurred solid surface with a hairline
   once the page has scrolled (html.cg-scrolled, set by /js/public-theme.js).
   -------------------------------------------------------------------------- */
/* Canvas boxes the page at 1400px with a drop shadow unless <body> carries
   .stretched, which drew a faint frame down both sides of every public page
   on a wide screen. The public site is full-bleed. */
body:not(.stretched) #wrapper {
    max-width:  none;
    margin:     0;
    box-shadow: none;
}

#header {
    --cnvs-header-bg:            transparent;
    --cnvs-header-sticky-bg:     transparent;
    --cnvs-header-border-color:  transparent;
    --cnvs-header-height:        76px;
    --cnvs-primary-menu-color:        var(--cg-text-secondary);
    --cnvs-primary-menu-hover-color:  var(--cg-text-primary);
    --cnvs-primary-menu-active-color: var(--cg-text-primary);
    --cnvs-primary-menu-font-size:    0.9375rem;
    --cnvs-primary-menu-font-weight:  500;
    --cnvs-primary-menu-tt:           none;
    --cnvs-primary-menu-ls:           0;
}

    #header #header-wrap {
        background-color: var(--cnvs-header-bg);
        border-bottom:    1px solid var(--cnvs-header-border-color);
        transition:       background-color 0.25s ease, border-color 0.25s ease,
                          box-shadow 0.25s ease;
    }

    #header .menu-link {
        color:          var(--cnvs-primary-menu-color);
        font-size:      var(--cnvs-primary-menu-font-size);
        font-weight:    var(--cnvs-primary-menu-font-weight);
        text-transform: none;
        letter-spacing: 0;
    }

    #header .menu-item:hover > .menu-link,
    #header .menu-item.current > .menu-link {
        color: var(--cg-text-primary);
    }

    #header #logo img {
        height: 2.75rem;
        width:  auto;
    }

html.cg-scrolled #header {
    --cnvs-header-bg:           var(--cg-header-bg-solid);
    --cnvs-header-border-color: var(--cg-border);
}

    html.cg-scrolled #header #header-wrap {
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter:         saturate(160%) blur(14px);
    }

/* Below the canvas desktop breakpoint the menu opens as a panel under the
   row, and a transparent panel over page content is unreadable. */
body:not(.is-expanded-menu) #header {
    --cnvs-header-bg:           var(--cg-bg);
    --cnvs-header-border-color: var(--cg-border);
}

.cnvs-hamburger .cnvs-hamburger-inner,
.cnvs-hamburger .cnvs-hamburger-inner::before,
.cnvs-hamburger .cnvs-hamburger-inner::after {
    background-color: var(--cg-text-primary);
}

/* --------------------------------------------------------------------------
   Back to top – every public page

   Visibility is html.cg-top-visible, set by /js/public-theme.js, which also
   owns the click. The canvas script toggles its own body class and binds the
   click to the element, and neither survives Blazor replacing the prerendered
   markup.
   -------------------------------------------------------------------------- */
#gotoTop {
    --cnvs-gotoTop-size:          2.75rem;
    --cnvs-gotoTop-icon-size:     1.125rem;
    --cnvs-gotoTop-border-radius: 50%;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          0;
    line-height:      1;
    background-color: var(--cg-bg-elevated);
    border:           1px solid var(--cg-border-strong);
    color:            var(--cg-text-primary);
    box-shadow:       var(--cg-shadow-md);
    transform:        translateY(0.5rem);
    pointer-events:   none;
    transition:       opacity 0.25s ease, transform 0.25s ease,
                      background-color 0.18s ease, color 0.18s ease,
                      border-color 0.18s ease;
}

    #gotoTop:hover,
    #gotoTop:focus-visible {
        background-color: var(--cg-accent);
        border-color:     var(--cg-accent);
        color:            var(--cg-on-accent);
    }

html.cg-top-visible #gotoTop {
    z-index:        599;
    opacity:        1;
    transform:      none;
    pointer-events: auto;
}

html[dir="rtl"] #gotoTop {
    right: auto;
    left:  var(--cnvs-gotoTop-position-boxed-right);
}

/* The live chat launcher sits in the same corner. html.cg-live-chat is set by
   costGuardLiveChat in /js/app-preferences.js while the chat box shows, and the
   button then rises above the launcher instead of covering it. */
html.cg-live-chat #gotoTop {
    bottom: calc(var(--cnvs-gotoTop-position-boxed-bottom) + 3rem);
}

@media (prefers-reduced-motion: reduce) {
    #gotoTop,
    #header #header-wrap,
    .cg-button,
    .cg-link-arrow i {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Public header – utility menu item (language selector + theme toggle)
   -------------------------------------------------------------------------- */

/* The utility li sits at the end of the primary nav and must not grow a
   hover underline or active indicator like a real page link. */
li.menu-item-utility {
    pointer-events: auto;
}

    li.menu-item-utility:hover > a,
    li.menu-item-utility::after,
    li.menu-item-utility::before {
        display: none !important;
    }

/* Public-page theme toggle button – always visible */
.public-theme-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           2.375rem;
    height:          2.375rem;
    border-radius:   0.625rem;
    background:      transparent;
    border:          1px solid var(--cg-border-strong);
    transition:      background 0.2s ease, border-color 0.2s ease;
    flex-shrink:     0;
}

    .public-theme-btn:hover {
        background:   var(--cg-accent-soft);
        border-color: var(--cg-accent-text);
    }

    /* The toggle markup sets fill inline through the canvas theme, hence the
       !important the original rule already carried. */
    .public-theme-btn svg path {
        fill: var(--cg-text-primary) !important;
    }

/* Keep the inner toggle track hidden – we rely on the sun/moon SVGs only */
.public-theme-btn .theme-toggle {
    display: none;
}

/* --------------------------------------------------------------------------
   Persian / Farsi – improved text rendering for both themes
   Vazirmatn renders thin strokes; bump weight and smoothing.
   -------------------------------------------------------------------------- */
html[lang="fa"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    --bs-body-font-family:    "Vazirmatn", sans-serif;
    --bs-font-sans-serif:     "Vazirmatn", sans-serif;
    --cnvs-primary-menu-font: "Vazirmatn", sans-serif;
    --cnvs-primary-font:      "Vazirmatn", sans-serif;
    letter-spacing: 0;

    /* No display cut exists for this script, and negative tracking breaks the joins in Arabic
       script, so headlines use the script's own family, heavier and untracked. */
    --cg-font-display:     "Vazirmatn", sans-serif;
    --cg-display-weight:   600;
    --cg-display-tracking: 0;
}

html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] h5,
html[lang="fa"] h6 {
    font-weight: 700;
    letter-spacing: 0;
}

html[lang="fa"] p,
html[lang="fa"] .text-muted,
html[lang="fa"] .lead,
html[lang="fa"] .small,
html[lang="fa"] li,
html[lang="fa"] a {
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.9;
}

/* Ensure Persian text on dark sections stays readable */
html[lang="fa"] .cg-section-dark p,
html[lang="fa"] .cg-section-dark .text-muted {
    color: #cbd5e1 !important;
}

html[lang="fa"] .cg-section-dark h1,
html[lang="fa"] .cg-section-dark h2,
html[lang="fa"] .cg-section-dark h3,
html[lang="fa"] .cg-section-dark h4,
html[lang="fa"] .cg-section-dark h5 {
    color: #f1f5f9 !important;
}

/* Light-theme Persian: slate body keeps enough contrast against white bg */
[data-bs-theme="light"] html[lang="fa"] .text-muted,
[data-bs-theme="light"] .text-muted:lang(fa) {
    color: #374151 !important;
}

/* --------------------------------------------------------------------------
   Language selector – polished pill-style dropdown
   -------------------------------------------------------------------------- */
.public-lang-select {
    appearance:        none;
    -webkit-appearance: none;
    background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff80'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-color:  transparent;
    border:            1px solid var(--cg-border-strong);
    border-radius:     0.625rem;
    color:             var(--cg-text-primary);
    font-size:         0.875rem;
    font-weight:       500;
    height:            2.375rem;
    padding:           0 1.8rem 0 0.75rem;
    cursor:            pointer;
    transition:        background 0.2s ease, border-color 0.2s ease;
    min-width:         0;
    max-width:         9rem;
    line-height:       1.4;
}

    .public-lang-select:hover {
        border-color: var(--cg-accent-text);
    }

    .public-lang-select option {
        background: var(--cg-bg-elevated);
        color:      var(--cg-text-primary);
    }

[data-bs-theme="light"] .public-lang-select {
    background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23475569'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Typography / Font stacks
   The per-script text and display families are declared once, in that script's
   own rule: Persian above, Arabic below, Chinese after them.
   -------------------------------------------------------------------------- */

    html[lang="fa"] .menu-link {
        font-family: "Vazirmatn", sans-serif;
    }

html[lang="fa"] body {
    font-family: "Vazirmatn", sans-serif;
    letter-spacing: 0;
}

.persian-font {
    font-family: "Vazirmatn", sans-serif;
    letter-spacing: 0;
}

html[lang="ar"] {
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;

    --bs-body-font-family:    "Cairo", sans-serif;
    --bs-font-sans-serif:     "Cairo", sans-serif;
    --cnvs-primary-menu-font: "Cairo", sans-serif;
    --cnvs-primary-font:      "Cairo", sans-serif;
    letter-spacing: 0;

    /* No display cut exists for this script, and negative tracking breaks the joins in Arabic
       script, so headlines use the script's own family, heavier and untracked. */
    --cg-font-display:     "Cairo", sans-serif;
    --cg-display-weight:   600;
    --cg-display-tracking: 0;
}

    html[lang="ar"] .menu-link {
        font-family: "Cairo", sans-serif;
    }

html[lang="ar"] body {
    font-family: "Cairo", sans-serif;
    letter-spacing: 0;
}

.arabic-font {
    font-family: "Cairo", sans-serif;
    letter-spacing: 0;
}

/* Han glyphs are missing from Instrument Sans, so the Chinese language name in
   the selector needs its own family on the public pages too. */
.chinese-font {
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Canvas reads --cnvs-body-font for the body and --cnvs-primary-font for
   headings and the menu, and declares them as Inter and Manrope. The Bootstrap
   variables alone never reached a single element, so the text face is assigned
   to the canvas variables too. */
html[lang="en"],
html[lang="fr"],
html[lang="de"] {
    --bs-body-font-family:    var(--cg-font-text);
    --bs-font-sans-serif:     var(--cg-font-text);
    --cnvs-body-font:         var(--cg-font-text);
    --cnvs-primary-font:      var(--cg-font-text);
    --cnvs-primary-menu-font: var(--cg-font-text);
}

/* Chinese keeps the Latin face first and appends a Han family, so Chinese text uses Noto Sans SC
   instead of whatever the browser happens to substitute. The Persian and Arabic equivalents sit in
   those scripts' own rules above, so each language is declared once. */
html[lang="zh"] {
    --cg-font-display:     "Instrument Serif", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --cg-display-weight:   500;
    --cg-display-tracking: 0;

    --bs-body-font-family:    "Instrument Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --bs-font-sans-serif:     "Instrument Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --cnvs-primary-menu-font: "Instrument Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --cnvs-primary-font:      "Instrument Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

    html[lang="zh"] .menu-link {
        font-family: "Instrument Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

html[lang="zh"] body,
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] h4,
html[lang="zh"] h5,
html[lang="zh"] h6 {
    font-family: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* --------------------------------------------------------------------------
   Public footer spacing

   The canvas footer reserves 80px above and below its widget row, which left a
   large empty band between the last section of a page and the footer links.
   -------------------------------------------------------------------------- */
#footer .footer-widgets-wrap {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* The footer and its copyright bar are one surface with a hairline between
   them; canvas gives the bar a cool grey of its own, which clashed with the
   warm paper. */
#footer {
    --cnvs-footer-bg: var(--cg-bg-subtle);
    background-color:  var(--cg-bg-subtle);
    border-top-color:  var(--cg-border);
}

#copyrights {
    background-color: transparent;
    border-top:       1px solid var(--cg-border);
    color:            var(--cg-text-secondary);
    font-size:        0.875rem;
}

#footer .widget h4 {
    font-size:      0.8125rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--cg-text-secondary);
}

html[lang="fa"] #footer .widget h4,
html[lang="ar"] #footer .widget h4 {
    letter-spacing: 0;
}

#footer .widget a {
    color: var(--cg-text-primary);
}

    #footer .widget a:hover {
        color: var(--cg-accent-text);
    }

    #footer .widget a.cg-button-primary,
    #footer .widget a.cg-button-primary:hover {
        color: var(--cg-on-accent);
    }

/* --------------------------------------------------------------------------
   Public header call-to-action labels

   The header row holds the logo, the primary nav, the language selector, the
   theme toggle and two call-to-action buttons. The marketplace button shows one
   word rather than its full sentence, which is over 40 characters in French and
   German. Even so, the French nav plus "Aller au tableau de bord" measures
   about 1140px, exactly the container width the canvas theme uses from 1200px,
   so the labels only appear at 1400px where the container steps up to 1320px.
   Below that both buttons are icon-only and their aria-label and title carry
   the name.
   -------------------------------------------------------------------------- */
.cg-header-cta-label {
    display: none;
}

@media (min-width: 1400px) {
    .cg-header-cta-label {
        display: inline;
    }
}

/* --------------------------------------------------------------------------
   Public header theme-toggle button sizing (app sidebar uses .theme-btn)
   -------------------------------------------------------------------------- */
.theme-btn {
    display:    inline-flex;
    align-items: center;
    gap:        0.35rem;
    opacity:    0.8;
    transition: opacity 0.2s ease;
}

    .theme-btn:hover {
        opacity: 1;
    }
.table > :not(caption) > * > * {
    padding-top:    1rem;
    padding-bottom: 1rem;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Why-section cards
   -------------------------------------------------------------------------- */
[data-bs-theme="light"] .why-card {
    --cg-card-bg:     #ffffff;
    --cg-card-border: rgba(0, 0, 0, 0.07);
    --cg-card-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .why-card {
    --cg-card-bg:     #1e2431;
    --cg-card-border: rgba(255, 255, 255, 0.07);
    --cg-card-shadow: 0 10px 35px rgba(0, 0, 0, 0.28);
}

.why-card {
    background:  var(--cg-card-bg, #ffffff);
    border:      1px solid var(--cg-card-border, rgba(0,0,0,.07));
    box-shadow:  var(--cg-card-shadow, 0 10px 35px rgba(0,0,0,.05));
    transition:  all 0.25s ease;
}

    .why-card:hover {
        transform:  translateY(-5px);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
    }

.why-icon {
    font-size: 1.8rem;
    color:     var(--cg-accent-text);
}

.why-highlight {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border:     1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   CostGuard button system
   Canvas .button uses white text on all filled buttons by default.
   We define explicit safe classes so each button context is always readable.
   -------------------------------------------------------------------------- */

/* .cg-btn-primary  – accent fill. --cg-accent carries --cg-on-accent at AA or
   better in both themes; the dark theme used to put white on a blue too light
   to hold it. */
.cg-btn-primary {
    background-color: var(--cg-accent) !important;
    color:            var(--cg-on-accent) !important;
    border:           none !important;
}

    .cg-btn-primary:hover {
        background-color: var(--cg-accent-hover) !important;
        color:            var(--cg-on-accent) !important;
    }

/* .cg-btn-outline  – transparent with accent border & text */
.cg-btn-outline {
    background:   transparent !important;
    border:       2px solid var(--cg-accent-text) !important;
    color:        var(--cg-accent-text) !important;
}

    .cg-btn-outline:hover {
        background-color: var(--cg-accent) !important;
        border-color:     var(--cg-accent) !important;
        color:            var(--cg-on-accent) !important;
    }

/* --------------------------------------------------------------------------
   .cg-button – the self-contained button

   One height, one radius, one weight, and no canvas .button underneath, so
   nothing here needs !important to win. Three looks: primary (accent fill),
   secondary (hairline), and on-ink for the always-dark closing band. -sm is
   the header size. The legacy .cg-btn-* classes above stay for the pages that
   still sit on canvas .button.
   -------------------------------------------------------------------------- */
.cg-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    height:          2.875rem;
    padding:         0 1.375rem;
    border:          1px solid transparent;
    border-radius:   0.75rem;
    font-family:     inherit;
    font-size:       0.9375rem;
    font-weight:     600;
    line-height:     1;
    letter-spacing:  0;
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    transition:      background-color 0.18s ease, border-color 0.18s ease,
                     color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .cg-button i {
        font-size:   1em;
        line-height: 1;
    }

    .cg-button:active {
        transform: translateY(1px);
    }

.cg-button-sm {
    height:        2.375rem;
    padding:       0 0.95rem;
    border-radius: 0.625rem;
    font-size:     0.875rem;
}

.cg-button-primary {
    background-color: var(--cg-accent);
    color:            var(--cg-on-accent);
    box-shadow:       0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 8px 20px -8px var(--cg-accent-glow);
}

    .cg-button-primary:hover,
    .cg-button-primary:focus-visible {
        background-color: var(--cg-accent-hover);
        color:            var(--cg-on-accent);
    }

.cg-button-secondary {
    background-color: transparent;
    border-color:     var(--cg-border-strong);
    color:            var(--cg-text-primary);
}

    .cg-button-secondary:hover,
    .cg-button-secondary:focus-visible {
        background-color: var(--cg-accent-soft);
        border-color:     var(--cg-accent-text);
        color:            var(--cg-text-primary);
    }

.cg-button-on-ink {
    background-color: transparent;
    border-color:     var(--cg-ink-border);
    color:            var(--cg-ink-text);
}

    .cg-button-on-ink:hover,
    .cg-button-on-ink:focus-visible {
        background-color: var(--cg-ink-border);
        color:            var(--cg-ink-text);
    }

/* A quiet text link with a travelling arrow, for the one secondary action that
   should not compete with a primary button. */
.cg-link-arrow {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    font-weight:     600;
    font-size:       0.9375rem;
    color:           var(--cg-text-primary);
    text-decoration: none;
}

    .cg-link-arrow i {
        transition: transform 0.18s ease;
    }

    .cg-link-arrow:hover {
        color: var(--cg-accent-text);
    }

    .cg-link-arrow:hover i {
        transform: translateX(3px);
    }

    html[dir="rtl"] .cg-link-arrow i {
        transform: scaleX(-1);
    }

    html[dir="rtl"] .cg-link-arrow:hover i {
        transform: scaleX(-1) translateX(3px);
    }

/* --------------------------------------------------------------------------
   Focus – one visible ring for every interactive element on the public site

   Canvas removes every focus outline with `:active, :focus { outline: none
   !important }`, and its source files are never edited, so the ring has to
   carry the same priority or it never renders.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
input[type="search"]:focus-visible,
.cg-button:focus-visible {
    outline:        2px solid var(--cg-focus-ring) !important;
    outline-offset: 3px;
    border-radius:  0.375rem;
}

.cg-button:focus-visible {
    border-radius: 0.75rem;
}

/* A header link is as tall as the header, so a ring drawn outside it runs off the top of the
   viewport. Drawn inside, it stays whole. */
#header .menu-link:focus-visible {
    outline-offset: -0.75rem;
}

/* .cg-btn-outline-white – white border & text for dark/coloured surfaces
   (bg-primary CTA bands, dark hero sections, dark footer).               */
.cg-btn-outline-white {
    background:   transparent !important;
    border:       2px solid rgba(255, 255, 255, 0.85) !important;
    color:        #ffffff !important;
}

    .cg-btn-outline-white:hover {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color:            #ffffff !important;
    }

/* .cg-btn-ghost-dark – light-theme cards: subtle dark border + dark text
   In dark theme automatically flips to a light border + light text so it
   remains readable on dark card backgrounds (#1e2431 etc.).              */
.cg-btn-ghost-dark {
    background:   transparent !important;
    border:       1.5px solid rgba(15, 23, 42, 0.25) !important;
    color:        #1e293b !important;
}

    .cg-btn-ghost-dark:hover {
        background-color: rgba(15, 23, 42, 0.06) !important;
        border-color:     rgba(15, 23, 42, 0.45) !important;
        color:            #0f172a !important;
    }

[data-bs-theme="dark"] .cg-btn-ghost-dark {
    border:  1.5px solid rgba(255, 255, 255, 0.30) !important;
    color:   #e2e8f0 !important;
}

    [data-bs-theme="dark"] .cg-btn-ghost-dark:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-color:     rgba(255, 255, 255, 0.55) !important;
        color:            #f1f5f9 !important;
    }

/* --------------------------------------------------------------------------
   Tables in RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .table > :not(caption) > * > * {
    text-align: right;
}

/* --------------------------------------------------------------------------
   Arabic text rendering improvements (mirrors Persian block). The script's own
   rule, with its smoothing and families, is in the typography section above.
   -------------------------------------------------------------------------- */

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-weight: 700;
    letter-spacing: 0;
}

html[lang="ar"] p,
html[lang="ar"] .text-muted,
html[lang="ar"] .lead,
html[lang="ar"] .small,
html[lang="ar"] li,
html[lang="ar"] a {
    font-weight: 500;
    letter-spacing: 0;
    line-height: 2;
}

html[lang="ar"] .cg-section-dark p,
html[lang="ar"] .cg-section-dark .text-muted {
    color: #cbd5e1 !important;
}

html[lang="ar"] .cg-section-dark h1,
html[lang="ar"] .cg-section-dark h2,
html[lang="ar"] .cg-section-dark h3,
html[lang="ar"] .cg-section-dark h4,
html[lang="ar"] .cg-section-dark h5 {
    color: #f1f5f9 !important;
}

[data-bs-theme="light"] .text-muted:lang(ar) {
    color: #374151 !important;
}

/* --------------------------------------------------------------------------
   RTL language selector chevron (arrow flips for RTL)
   -------------------------------------------------------------------------- */
[dir="rtl"] .public-lang-select {
    background-position: left 0.55rem center;
    padding:             0 0.75rem 0 1.8rem;
}

/* --------------------------------------------------------------------------
   Cookie consent banner
   Fixed to the bottom of the viewport, slides in above the footer.
   -------------------------------------------------------------------------- */
.cg-cookie-banner {
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    z-index:          9999;
    padding:          1rem 1.5rem;
    background:       var(--cg-surface-overlay, rgba(15, 23, 42, 0.97));
    border-top:       1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter:  blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:       0 -4px 24px rgba(0, 0, 0, 0.35);
    animation:        cgCookieSlideUp 0.3s ease-out;
}

[data-bs-theme="light"] .cg-cookie-banner {
    background:   rgba(255, 255, 255, 0.97);
    border-top:   1px solid rgba(0, 0, 0, 0.08);
    box-shadow:   0 -4px 24px rgba(0, 0, 0, 0.10);
}

.cg-cookie-banner__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.25rem;
    max-width:       1320px;
    margin:          0 auto;
    flex-wrap:       wrap;
}

.cg-cookie-banner__text {
    flex:      1 1 auto;
    font-size: 0.9rem;
    color:     var(--cg-text-secondary, rgba(255, 255, 255, 0.80));
}

[data-bs-theme="light"] .cg-cookie-banner__text {
    color: var(--cg-slate-700, #334155);
}

.cg-cookie-banner__learn-more {
    color:           var(--cg-blue-400, #60a5fa);
    text-decoration: underline;
    white-space:     nowrap;
}

[data-bs-theme="light"] .cg-cookie-banner__learn-more {
    color: var(--cg-blue-600, #2563eb);
}

.cg-cookie-banner__actions {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
    flex-shrink: 0;
}

.cg-cookie-banner__btn-accept,
.cg-cookie-banner__btn-decline {
    font-size:  0.85rem !important;
    padding:    0.4rem 1.1rem !important;
    min-width:  fit-content;
    white-space: nowrap;
}

/* RTL layout mirrors the inner flex row. */
.cg-cookie-banner--rtl .cg-cookie-banner__inner {
    flex-direction: row-reverse;
}

.cg-cookie-banner--rtl .cg-cookie-banner__text {
    text-align: right;
}

.cg-cookie-banner--rtl .cg-cookie-banner__actions {
    flex-direction: row-reverse;
}

@keyframes cgCookieSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   Cookie preferences modal
   Renders as a fixed centred dialog above the banner (z-index 10 000+).
   -------------------------------------------------------------------------- */
.cg-cookie-modal-backdrop {
    position:   fixed;
    inset:      0;
    z-index:    10000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation:  cgFadeIn 0.2s ease-out;
}

.cg-cookie-modal {
    position:      fixed;
    inset:         0;
    z-index:       10001;
    margin:        auto;
    width:         min(560px, calc(100vw - 2rem));
    max-height:    min(640px, calc(100vh - 2rem));
    height:        fit-content;
    display:       flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background:    var(--cg-surface-overlay, rgba(15, 23, 42, 0.98));
    border:        1px solid rgba(255, 255, 255, 0.10);
    box-shadow:    0 24px 64px rgba(0, 0, 0, 0.55);
    animation:     cgModalSlideIn 0.25s ease-out;
    overflow:      hidden;
}

[data-bs-theme="light"] .cg-cookie-modal {
    background: #ffffff;
    border:     1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.cg-cookie-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.1rem 1.4rem 0.9rem;
    border-bottom:   1px solid rgba(255, 255, 255, 0.08);
    flex-shrink:     0;
}

[data-bs-theme="light"] .cg-cookie-modal__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cg-cookie-modal__title {
    font-size:   1.05rem;
    font-weight: 600;
    margin:      0;
    color:       var(--cg-text-primary, #f1f5f9);
}

[data-bs-theme="light"] .cg-cookie-modal__title {
    color: var(--cg-slate-900, #0f172a);
}

.cg-cookie-modal__close {
    background:  transparent;
    border:      none;
    color:       var(--cg-text-secondary, rgba(255, 255, 255, 0.60));
    font-size:   1.4rem;
    line-height: 1;
    cursor:      pointer;
    padding:     0 0.25rem;
    transition:  color 0.15s;
}

.cg-cookie-modal__close:hover {
    color: var(--cg-text-primary, #f1f5f9);
}

[data-bs-theme="light"] .cg-cookie-modal__close {
    color: var(--cg-slate-500, #64748b);
}

[data-bs-theme="light"] .cg-cookie-modal__close:hover {
    color: var(--cg-slate-900, #0f172a);
}

.cg-cookie-modal__body {
    padding:    1.25rem 1.4rem;
    overflow-y: auto;
    flex:       1 1 auto;
    color:      var(--cg-text-secondary, rgba(255, 255, 255, 0.80));
    font-size:  0.9rem;
}

[data-bs-theme="light"] .cg-cookie-modal__body {
    color: var(--cg-slate-700, #334155);
}

.cg-cookie-modal__footer {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             0.625rem;
    padding:         0.9rem 1.4rem 1.1rem;
    border-top:      1px solid rgba(255, 255, 255, 0.08);
    flex-shrink:     0;
    flex-wrap:       wrap;
}

[data-bs-theme="light"] .cg-cookie-modal__footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Cookie category rows inside the modal */
.cg-cookie-category {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding:    0.85rem 0;
}

[data-bs-theme="light"] .cg-cookie-category {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.cg-cookie-category:first-of-type {
    border-top: none;
}

.cg-cookie-category__header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             1rem;
}

.cg-cookie-category__description {
    font-size: 0.82rem;
    margin-top: 0.2rem;
    opacity:   0.75;
}

.cg-cookie-category__status {
    font-size:   0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color:       var(--cg-green-400, #4ade80);
    flex-shrink: 0;
}

/* Toggle switch */
.cg-cookie-toggle {
    display:     inline-flex;
    align-items: center;
    cursor:      pointer;
    flex-shrink: 0;
}

.cg-cookie-toggle input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.cg-cookie-toggle__slider {
    position:      relative;
    display:       inline-block;
    width:         40px;
    height:        22px;
    border-radius: 11px;
    background:    rgba(255, 255, 255, 0.20);
    transition:    background 0.2s;
}

[data-bs-theme="light"] .cg-cookie-toggle__slider {
    background: rgba(0, 0, 0, 0.18);
}

.cg-cookie-toggle__slider::after {
    content:       "";
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    #ffffff;
    transition:    transform 0.2s;
}

.cg-cookie-toggle input:checked + .cg-cookie-toggle__slider {
    background: var(--cg-blue-500, #3b82f6);
}

.cg-cookie-toggle input:checked + .cg-cookie-toggle__slider::after {
    transform: translateX(18px);
}

@keyframes cgFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cgModalSlideIn {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@media (max-width: 575.98px) {
    .cg-cookie-modal {
        width:      calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }

    .cg-cookie-modal__footer {
        flex-direction: column;
    }

    .cg-cookie-modal__footer .button {
        width:      100%;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .cg-cookie-banner__inner {
        flex-direction: column;
        align-items:    flex-start;
    }

    .cg-cookie-banner--rtl .cg-cookie-banner__inner {
        align-items: flex-end;
    }

    .cg-cookie-banner__actions {
        width: 100%;
    }

    .cg-cookie-banner__btn-accept,
    .cg-cookie-banner__btn-decline {
        flex: 1;
        text-align: center;
    }
}