/* galaxy-brand.css (F-BRAND-FB 2026-10-20; v2 F-BRAND-FB2: every order route; v3 F-BRAND-CLIENT: the whole client area; v4 F-CLIENT-SIDEMENU: the sidebar on phones).
   Puts the client pages on the homepage brand via /brand/brand.css. Colors, fonts and the logo mark only: every rule
   below sets a color, a font, a background, a shadow or the logo, never size or position.
   Scope: body:has(> .gcs-head) = every layout_public page (login, signup, password reset, set new password, /orderbutton,
   maintenance; .gcs-head is the header only layout_public carries); body:not(:has(> .gcs-head)) = every layout_default
   page (order pages, VM page / dashboard, services, invoices, profile, wallet, support). galaxy-dark.css stays loaded
   underneath; this file re-points its --gcs-* variables and overrides its fixed colors.

   brand.css is imported into a cascade layer: Bootstrap, huraga.css and galaxy-dark.css are unlayered and win every
   conflict, and the `all: revert` rule (id-weighted) turns the layer's own visual rules off, so only its tokens (--bg, --teal,
   --font-display, ...) and its web fonts come through. */
@import url("/brand/brand.css") layer(brand);
@layer brand {
  /* two :not(#id) give this rule id weight, so it outranks every rule brand.css has (it has no ids) */
  /* SVG content is left alone: reverting it would also drop its geometry (d, r, cx...) and the icons would vanish */
  :not(#gcs-x1):not(#gcs-x2):not(svg, svg *), :not(#gcs-x1):not(#gcs-x2):not(svg, svg *)::before,
  :not(#gcs-x1):not(#gcs-x2):not(svg, svg *)::after { all: revert; }
}

/* ---- public pages (layout_public): Bootstrap dark theme -> brand, through Bootstrap's own variables ---------------- */
body:has(> .gcs-head) {
  --gcs-surface: var(--surface); --gcs-border: var(--line-2); --gcs-accent: var(--teal); --gcs-text: var(--text);
  --gcs-muted: var(--muted);   /* read by the pay tiles inside /orderbutton (this layout has no galaxy-dark.css) */
  --bs-body-bg: var(--bg); --bs-body-bg-rgb: 6,6,26;
  --bs-body-color: var(--text); --bs-body-color-rgb: 236,235,250;
  --bs-emphasis-color: var(--text); --bs-heading-color: var(--text);
  --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--faint);
  --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface);
  --bs-border-color: var(--line-2); --bs-border-color-translucent: var(--line);
  --bs-link-color: var(--teal); --bs-link-color-rgb: 70,234,208;
  --bs-link-hover-color: #62f2dc; --bs-link-hover-color-rgb: 98,242,220;
  --bs-focus-ring-color: rgba(70,234,208,.25);
  --bs-body-font-family: var(--font-body);
}
body:has(> .gcs-head) .card {
  --bs-card-bg: var(--surface); --bs-card-border-color: var(--line-2); --bs-card-color: var(--text);
}
body:has(> .gcs-head) :is(h1, h2, h3, h4, h5, h6, .btn) { font-family: var(--font-display); }
body:has(> .gcs-head) .btn-primary {
  --bs-btn-color: #042b25; --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal);
  --bs-btn-hover-color: #042b25; --bs-btn-hover-bg: #62f2dc; --bs-btn-hover-border-color: #62f2dc;
  --bs-btn-active-color: #042b25; --bs-btn-active-bg: var(--teal-dim); --bs-btn-active-border-color: var(--teal-dim);
  --bs-btn-disabled-color: #042b25; --bs-btn-disabled-bg: var(--teal); --bs-btn-disabled-border-color: var(--teal);
  --bs-btn-focus-shadow-rgb: 70,234,208;
}
body:has(> .gcs-head) .btn-outline-primary {
  --bs-btn-color: var(--teal); --bs-btn-border-color: var(--teal-dim);
  --bs-btn-hover-color: #042b25; --bs-btn-hover-bg: var(--teal); --bs-btn-hover-border-color: var(--teal);
  --bs-btn-active-color: #042b25; --bs-btn-active-bg: var(--teal-dim); --bs-btn-active-border-color: var(--teal-dim);
  --bs-btn-focus-shadow-rgb: 70,234,208;
}
body:has(> .gcs-head) .form-control,
body:has(> .gcs-head) .form-select { background-color: var(--bg-2); }
body:has(> .gcs-head) .form-control:focus,
body:has(> .gcs-head) .form-select:focus,
body:has(> .gcs-head) .form-check-input:focus {
  border-color: var(--teal-dim); box-shadow: 0 0 0 .25rem rgba(70,234,208,.2);
}
body:has(> .gcs-head) .form-check-input:checked { background-color: var(--teal-dim); border-color: var(--teal-dim); }
/* order widget on the public layout (/orderbutton): accordion + badges, which /order gets from galaxy-dark.css */
body:has(> .gcs-head) .accordion {
  --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--line-2); --bs-accordion-color: var(--text);
  --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-active-color: var(--teal); --bs-accordion-active-bg: var(--surface-2);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(70,234,208,.2);
}
body:has(> .gcs-head) .accordion-button { font-family: var(--font-display); }
body:has(> .gcs-head) .badge:is(.bg-success, .text-bg-success, .bg-info, .text-bg-info) { background: rgba(70,234,208,.18) !important; color: var(--teal) !important; }

/* ---- order page (layout_default + galaxy-dark.css): galaxy-dark's own variables -> brand tokens ------------------- */
body:not(:has(> .gcs-head)) {
  --gcs-bg: var(--bg); --gcs-surface: var(--surface); --gcs-surface2: var(--surface-2); --gcs-border: var(--line-2);
  --gcs-accent: var(--teal); --gcs-text: var(--text); --gcs-muted: var(--muted);
  --bs-body-color: var(--text); --bs-body-color-rgb: 236,235,250; --bs-secondary-color: var(--muted);
  --bs-link-color: var(--teal); --bs-link-color-rgb: 70,234,208; --bs-link-hover-color-rgb: 98,242,220;
  --bs-focus-ring-color: rgba(70,234,208,.25);
  font-family: var(--font-body) !important;
}
body:not(:has(> .gcs-head)) :is(h1, h2, h3, h4, h5, h6, .accordion-button, .btn) { font-family: var(--font-display) !important; }
body:not(:has(> .gcs-head)) .navbar { background: rgba(6,6,26,.95) !important; }
body:not(:has(> .gcs-head)) .navbar-brand { font-family: var(--font-display) !important; font-weight: 600 !important; }
body:not(:has(> .gcs-head)) .btn-primary { color: #042b25 !important; }
body:not(:has(> .gcs-head)) .btn-outline-primary:hover { color: #042b25 !important; }
body:not(:has(> .gcs-head)) .form-control:focus, body:not(:has(> .gcs-head)) .form-select:focus { box-shadow: 0 0 0 2px rgba(70,234,208,.2) !important; }
body:not(:has(> .gcs-head)) .dropdown-item:hover { background-color: rgba(70,234,208,.12) !important; }
body:not(:has(> .gcs-head)) :is(.modal-content, .modal-header, .modal-body, .modal-footer) { background-color: var(--surface) !important; }
body:not(:has(> .gcs-head)) .badge:is(.bg-success, .text-bg-success) { background: rgba(70,234,208,.18) !important; color: var(--teal) !important; }
body:not(:has(> .gcs-head)) .badge.bg-info { background: rgba(70,234,208,.18) !important; }
body:not(:has(> .gcs-head))::before {
  background:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 8%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 55%, rgba(70,234,208,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 45%, rgba(157,139,255,0.2) 0%, transparent 100%);
}
body:not(:has(> .gcs-head))::after { background: radial-gradient(circle, rgba(70,234,208,0.04) 0%, transparent 65%); }

/* checkout payment tiles (gcs_pay_tiles reads the --gcs-* variables above; these are its fixed colors) */
body .gcs-pay-card:hover { border-color: rgba(70,234,208,.55); }
body :is(.gcs-pay-input:checked + .gcs-pay-card, .gcs-pay-card.is-selected) { background: rgba(70,234,208,.10); box-shadow: 0 0 0 3px rgba(70,234,208,.18); }
body :is(.gcs-pay-input:checked + .gcs-pay-card, .gcs-pay-card.is-selected) .gcs-pay-check { color: #042b25; }
body .gcs-pay-wallet { color: var(--teal); }

/* ---- logo: the homepage orbit mark ------------------------------------------------------------------------------- */
/* order page: in front of the navbar's company name (no markup change) */
body:not(:has(> .gcs-head)) .navbar-brand > span::before {
  content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 10px; vertical-align: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd27a' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%23ffd27a'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(-28 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(28 12 12)' opacity='.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
/* public pages: the header layout_public now carries (mark + wordmark, links home) */
.gcs-head { display: flex; align-items: center; height: 66px; padding: 0 28px; border-bottom: 1px solid var(--line); }
.gcs-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.gcs-brand:hover { color: var(--text); }
.gcs-mark { width: 28px; height: 28px; display: grid; place-items: center; color: var(--gold); }
.gcs-mark svg { width: 24px; height: 24px; }

/* ---- client area (4b): the rest of layout_default, beyond the --gcs-* variables above ------------------------------ */
/* galaxy-dark.css hardcodes the sidebar / offcanvas link colors (#e8f0fe, #3b9eff) with ids + !important */
body:not(:has(> .gcs-head)) :is(#sidebarMenu, .offcanvas-md, .offcanvas-body) {
  --bs-nav-link-color: var(--text) !important; --bs-nav-link-hover-color: var(--teal) !important;
}
body:not(:has(> .gcs-head)) :is(#sidebarMenu a, #sidebarMenu span, .offcanvas-body a, .offcanvas-body span) { color: var(--text) !important; }
body:not(:has(> .gcs-head)) :is(#sidebarMenu a:hover, .offcanvas-body a:hover) { color: var(--teal) !important; }
/* support ticket editor (CKEditor), hardcoded #07070f / #0f0f1a in galaxy-dark.css */
body:not(:has(> .gcs-head)) :is(.ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable) { background: var(--bg-2) !important; }
body:not(:has(> .gcs-head)) .ck.ck-toolbar { background: var(--surface) !important; }

/* ---- accordion arrows, both layouts: Bootstrap's own chevron, muted when closed, teal when open ------------------- */
/* (galaxy-dark.css inverted Bootstrap's blue arrow into orange; /orderbutton showed Bootstrap's blue) */
/* set on the button's ::after, where Bootstrap's dark theme defines them ([data-bs-theme=dark] .accordion-button::after) */
html[data-bs-theme] .accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239591bd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2346ead0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); }
body:not(:has(> .gcs-head)) .accordion-button::after { filter: none !important; }

/* ---- Bootstrap "primary" -> teal, both layouts: huraga.css colors active nav links (`.nav-link.active` = invoice tabs,
   navbar), the active sidebar item (`.offcanvas-item.active`) and other primary accents from these variables ----------- */
body { --bs-primary: var(--teal); --bs-primary-rgb: 70,234,208; --bs-primary-text-emphasis: var(--teal);
  --bs-primary-bg-subtle: rgba(70,234,208,.12); --bs-primary-border-subtle: rgba(70,234,208,.35); }
/* Bootstrap info buttons (e.g. "Open Ticket"): cyan -> violet with dark text */
body .btn-info { --bs-btn-color: #0b0a24; --bs-btn-bg: var(--violet); --bs-btn-border-color: var(--violet);
  --bs-btn-hover-color: #0b0a24; --bs-btn-hover-bg: #b3a5ff; --bs-btn-hover-border-color: #b3a5ff;
  --bs-btn-active-color: #0b0a24; --bs-btn-active-bg: #8a76f5; --bs-btn-active-border-color: #8a76f5;
  --bs-btn-disabled-color: #0b0a24; --bs-btn-disabled-bg: var(--violet); --bs-btn-disabled-border-color: var(--violet);
  --bs-btn-focus-shadow-rgb: 157,139,255; }
/* huraga.css paints a near-white #fafafa hover on sidebar items; on the dark theme that hid the light link text */
body:not(:has(> .gcs-head)) .offcanvas-item:hover { background: var(--surface-2); }

/* ---- client area on phones (F-CLIENT-SIDEMENU, v4): the sidebar (#sidebarMenu, Bootstrap .offcanvas-md) opens from the
   "Account menu" item in the navbar's menu. galaxy-dark.css makes it transparent for the desktop column; below 768px it is a panel
   over the page, so it gets the brand surface. Nothing here applies at 768px and up. -------------------------------- */
@media (max-width: 767.98px) {
  body:not(:has(> .gcs-head)) #sidebarMenu.offcanvas-md { background-color: var(--surface) !important; --bs-offcanvas-width: 280px;
    border-left: 1px solid var(--line-2) !important; }
  body:not(:has(> .gcs-head)) #sidebarMenu .offcanvas-body { padding: 18px 14px; }
  .gcs-side-toggler { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; }
  .gcs-side-toggler svg { width: 18px; height: 18px; }
}