/* ============================================================
   Create — WHMCS Theme "V16 Logo Colors"
   Brand layer loaded AFTER all.min.css + theme.min.css.
   Palette extracted from the actual Create logo:
   plum #360B3A · wine #5F1B45 · magenta #BB1F55 · pink #FF6FA5
   Warm light base · Baloo Bhaijaan 2 / Tajawal / IBM Plex Mono
   ============================================================ */

/* ==== Create identity — DUAL:
   default (:root)  = V16 original warm light (public/marketing/cart pages)
   body.cr-client   = Clean Light Lagom-style (client area only)        ==== */
:root {
  --cr-plum: #360B3A;
  --cr-plum-2: #4A163F;
  --cr-wine: #5F1B45;
  --cr-magenta: #BB1F55;
  --cr-magenta-d: #A81B4C;
  --cr-pink: #FF6FA5;
  --cr-lav: #B678E8;
  --cr-grad: linear-gradient(135deg, #360B3A 0%, #5F1B45 55%, #BB1F55 100%);
  --cr-grad-2: linear-gradient(120deg, #4A163F, #BB1F55);
  --cr-brand-t1: #F6EDF3;
  --cr-brand-t2: #F3E9F1;
  --cr-bg: #FBF6FA;
  --cr-surface: #FFFFFF;
  --cr-surface-2: #F6EDF3;
  --cr-tint: #F3E9F1;
  --cr-ink: #360B3A;
  --cr-heading: #2B0930;
  --cr-muted: #8A7C88;
  --cr-soft: #5C4E5A;
  --cr-line: #EEE1EB;
  --cr-line-2: #F4EBF1;
  --cr-green: #12A870;
  --cr-ease: cubic-bezier(.22, .61, .28, 1);
  --cr-f-disp: 'Baloo Bhaijaan 2', 'Tajawal', sans-serif;
  --cr-f-body: 'Tajawal', 'Open Sans', sans-serif;
  --cr-f-mono: 'Tajawal', sans-serif; /* client request: no mono font anywhere (Arabic renders badly in it) */
  --cr-shadow: 0 12px 34px -28px rgba(54, 11, 58, .4);
  --cr-shadow-lg: 0 26px 50px -30px rgba(187, 31, 85, .4);
}

/* Arabic-safe labels: no letter-spacing (it disconnects Arabic glyphs) */
.cr-eyebrow, .crc-eyebrow, .cr-b-hi, .cr-dash-hi,
#order-create_cart .crf-label, #order-create_cart .crc-eyebrow,
.cr-fact small, .cr-svc-meta small, .cr-svc-domain,
.cr-fgrid h5, .fg h5, .cr-sv-group, .cr-finder-note, .finder-note,
.crx-flow .sub-heading span, .cr-b-sum-group, .crb-os,
.cr-fbottom, .cr-ver, .cr-inbox-side small, .cr-inbox-main em,
.ticket-number, .cr-stat em, .cr-b-item small {
  letter-spacing: 0 !important;
  font-weight: 700;
}

/* client area only: neutral flat tokens (Lagom-style) */
body.cr-client {
  --cr-pink: #E85C8F;
  --cr-brand-t1: #FBEDF2;
  --cr-brand-t2: #F6DCE6;
  --cr-bg: #F7F8FA;
  --cr-surface-2: #F4F5F7;
  --cr-tint: #F0F2F5;
  --cr-ink: #1E2228;
  --cr-heading: #16181D;
  --cr-muted: #6D7482;
  --cr-soft: #4B4F58;
  --cr-line: #E8EAEE;
  --cr-line-2: #F0F2F5;
  --cr-f-disp: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  --cr-f-body: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  --cr-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --cr-shadow-lg: 0 12px 24px -8px rgba(16, 24, 40, .12);
}

/* ---------- base ---------- */
body.primary-bg-color,
body {
  font-family: var(--cr-f-body);
  background: var(--cr-bg) !important;
  color: var(--cr-soft);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4,
.card-title, legend {
  font-family: var(--cr-f-disp);
  color: var(--cr-heading);
  font-weight: 700;
}
a { color: var(--cr-magenta); }
a:hover { color: var(--cr-magenta-d); }
::selection { background: var(--cr-magenta); color: #fff; }
:focus-visible { outline: 2px solid var(--cr-magenta); outline-offset: 2px; }

/* mono accents */
.cr-eyebrow {
  font-family: var(--cr-f-mono);
  font-size: .74rem;
  letter-spacing: .13em;
  color: var(--cr-magenta);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
}
.cr-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--cr-magenta); }
.cr-gr {
  background: var(--cr-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- buttons ---------- */
.btn { font-family: var(--cr-f-disp); font-weight: 700; border-radius: 12px; transition: .25s var(--cr-ease); }
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--cr-magenta);
  border-color: var(--cr-magenta);
  box-shadow: 0 12px 28px -12px rgba(187, 31, 85, .5);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--cr-magenta-d) !important;
  border-color: var(--cr-magenta-d) !important;
  transform: translateY(-2px);
}
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgba(187, 31, 85, .25); }
.btn-outline-primary { color: var(--cr-magenta); border-color: var(--cr-magenta); border-radius: 12px; }
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--cr-magenta);
  border-color: var(--cr-magenta);
  color: #fff;
}
.btn-default { background: var(--cr-surface); border: 1px solid var(--cr-line); color: var(--cr-plum); }
.btn-default:hover { border-color: var(--cr-magenta); color: var(--cr-magenta); background: var(--cr-surface); }
.btn-success { background-color: var(--cr-green); border-color: var(--cr-green); }
.btn-link { color: var(--cr-magenta); }
.btn-link:hover { color: var(--cr-magenta-d); }

/* ---------- header / nav ---------- */
header.header { background: transparent; box-shadow: none; }
header.header .topbar {
  background-color: var(--cr-plum);
  color: rgba(234, 217, 230, .8);
}
header.header .topbar .btn { color: rgba(234, 217, 230, .85); }
header.header .topbar .active-client .input-group-text {
  background: transparent;
  color: rgba(234, 217, 230, .7);
  border: 0;
}
header.header .topbar .active-client .btn { color: #fff; }
header.header .navbar-light {
  background: rgba(251, 246, 250, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cr-line);
}
header.header .logo-img { max-height: 38px; width: auto; }
header.header .navbar-light .btn.nav-link { color: var(--cr-plum); }
header.header .navbar-light .btn.nav-link:hover { color: var(--cr-magenta); }
header.header .cart-btn { position: relative; }
header.header .cart-btn .badge-info {
  position: absolute;
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  inset-inline-end: 2px;
  background: var(--cr-magenta);
  width: auto !important;
  min-width: 17px;
  height: 17px !important;
  border-radius: 9px !important;
  padding: 0 4px !important;
  font-size: .62rem !important;
  font-weight: 800;
  line-height: 17px !important;
  text-align: center;
  display: inline-block;
  box-shadow: 0 3px 8px rgba(187, 31, 85, .4);
}
header.header .input-group.search .form-control { border-color: var(--cr-line); font-family: var(--cr-f-body); }
header.header .input-group.search .btn-default { border-color: var(--cr-line); }

/* main nav band — plum gradient */
header.header .main-navbar-wrapper,
.navbar.main-navbar-wrapper {
  background: var(--cr-grad) !important;
  padding-top: 0;
  padding-bottom: 0;
}
.main-navbar-wrapper .navbar-nav .nav-link,
.main-navbar-wrapper .navbar-nav > li > a {
  color: rgba(255, 255, 255, .88) !important;
  font-family: var(--cr-f-disp);
  font-weight: 600;
  font-size: .92rem;
  padding: 14px 16px;
  transition: .2s;
}
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-item.active .nav-link,
.main-navbar-wrapper .navbar-nav > li > a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .1);
}
.main-navbar-wrapper .dropdown-menu {
  border: 1px solid var(--cr-line);
  border-radius: 14px;
  box-shadow: var(--cr-shadow);
  overflow: hidden;
}
.main-navbar-wrapper .dropdown-menu .dropdown-item { color: var(--cr-soft); padding: 9px 18px; }
.main-navbar-wrapper .dropdown-menu .dropdown-item:hover {
  background: var(--cr-surface-2);
  color: var(--cr-plum);
}

/* breadcrumb */
.master-breadcrumb {
  background-color: var(--cr-tint);
  border-bottom: 1px solid var(--cr-line);
}
.master-breadcrumb .breadcrumb { background: transparent; font-size: .84rem; margin-bottom: 0; }
.master-breadcrumb .breadcrumb a { color: var(--cr-magenta); }
body.cr-home .master-breadcrumb { display: none; }

/* ---------- cards / panels / sidebar ---------- */
.card, .panel {
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  box-shadow: var(--cr-shadow);
}
.card .card-header, .panel .panel-heading {
  background: var(--cr-surface-2);
  border-bottom: 1px solid var(--cr-line-2);
  border-radius: 18px 18px 0 0 !important;
  font-family: var(--cr-f-disp);
  color: var(--cr-heading);
  font-weight: 700;
}
.card-columns.home .card:hover { transform: translateY(-5px); box-shadow: var(--cr-shadow-lg); border-color: rgba(187, 31, 85, .3); transition: .28s var(--cr-ease); }
.sidebar .card .card-header { background: var(--cr-grad); color: #fff; border: 0; }
.sidebar .card .card-header .card-title { color: #fff; }
.sidebar .list-group-item { color: var(--cr-soft); border-color: var(--cr-line-2); }
.sidebar .list-group-item:hover { background: var(--cr-surface-2); color: var(--cr-plum); }
.sidebar .list-group-item.active,
.list-group-item.active {
  background-color: rgba(187, 31, 85, .08);
  border-color: var(--cr-line-2);
  color: var(--cr-magenta);
  border-inline-start: 3px solid var(--cr-magenta);
}

/* tables */
.table thead th, .table-container.clearfix thead th {
  font-family: var(--cr-f-disp);
  color: var(--cr-heading);
  border-color: var(--cr-line);
  background: var(--cr-surface-2);
}
.table td { border-color: var(--cr-line-2); }
.table-hover tbody tr:hover { background-color: var(--cr-tint); }
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
.pagination .page-item.active .page-link {
  background: var(--cr-magenta);
  border-color: var(--cr-magenta);
  color: #fff;
}
.pagination .page-link { color: var(--cr-magenta); }

/* forms */
.form-control { border-color: var(--cr-line); border-radius: 10px; color: var(--cr-ink); }
.form-control:focus { border-color: var(--cr-magenta); box-shadow: 0 0 0 .2rem rgba(187, 31, 85, .12); }
label { color: var(--cr-soft); }

/* badges / status */
.badge-info { background: var(--cr-lav); }
.status-active, .label-success { background-color: var(--cr-green) !important; }
.tag { background: var(--cr-surface-2); color: var(--cr-plum); }

/* homepage action tiles (twenty-one .action-icon-btns) */
.action-icon-btns a {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  box-shadow: var(--cr-shadow);
  color: var(--cr-heading) !important;
  font-family: var(--cr-f-disp);
  font-weight: 700;
  transition: .28s var(--cr-ease);
}
.action-icon-btns a:hover {
  transform: translateY(-5px);
  box-shadow: var(--cr-shadow-lg);
  border-color: rgba(187, 31, 85, .3);
  text-decoration: none;
}
.action-icon-btns a .ico-container {
  background: var(--cr-grad);
  border-radius: 16px;
  box-shadow: 0 12px 26px -14px rgba(187, 31, 85, .5);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.action-icon-btns a .ico-container i { color: #fff !important; font-size: 1.4rem; }

/* ---------- CR homepage sections ---------- */
.cr-hero {
  background: var(--cr-bg);
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 7vh, 84px) 0 clamp(38px, 6vh, 64px);
}
.cr-hero::before {
  content: "";
  position: absolute;
  top: -160px;
  inset-inline-end: -120px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 31, 85, .1), transparent 65%);
  pointer-events: none;
}
.cr-hero .container { position: relative; }
.cr-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin-top: 16px;
}
.cr-hero .cr-sub {
  color: var(--cr-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 46ch;
  margin-top: 18px;
}
.cr-finder {
  display: flex;
  gap: 8px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 15px;
  padding: 8px;
  max-width: 520px;
  margin-top: 28px;
  box-shadow: 0 18px 44px -26px rgba(54, 11, 58, .4);
}
.cr-finder .form-control {
  flex: 1 1 140px;
  min-width: 0;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  font-size: 1rem;
}
.cr-finder .btn { white-space: nowrap; }
@media (max-width: 575px) {
  .cr-finder { flex-wrap: wrap; }
  .cr-finder .btn { flex: 1 1 auto; }
}
body { overflow-x: hidden; }
.cr-finder-note { font-family: var(--cr-f-mono); font-size: .74rem; color: var(--cr-muted); margin-top: 11px; }
.cr-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; padding: 0; list-style: none; }
.cr-trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--cr-soft); font-size: .88rem; }
.cr-trust li i { color: var(--cr-green); }

/* hero status card */
.cr-hcard {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 30px 70px -34px rgba(54, 11, 58, .5);
}
.cr-hcard .cr-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--cr-line-2); }
.cr-hcard .cr-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--cr-grad);
  display: grid; place-items: center; flex: none;
}
.cr-hcard .cr-top b { font-family: var(--cr-f-disp); color: var(--cr-heading); font-size: 1.05rem; display: block; }
.cr-hcard .cr-top span { font-family: var(--cr-f-mono); font-size: .72rem; color: var(--cr-green); }
.cr-hcard .cr-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.cr-hrow { display: flex; align-items: center; gap: 12px; }
.cr-hrow .l { color: var(--cr-muted); font-size: .84rem; min-width: 96px; }
.cr-hrow .track { flex: 1; height: 7px; border-radius: 6px; background: var(--cr-surface-2); overflow: hidden; }
.cr-hrow .track i { display: block; height: 100%; border-radius: 6px; background: var(--cr-grad); width: 0; animation: cr-fill 1.4s var(--cr-ease) forwards; }
@keyframes cr-fill { from { width: 0; } }
.cr-hrow .v { font-family: var(--cr-f-mono); font-size: .78rem; color: var(--cr-plum); min-width: 52px; text-align: end; }
.cr-uptime {
  margin-top: 18px; display: flex; align-items: center; gap: 8px;
  background: var(--cr-surface-2); border-radius: 12px; padding: 12px 16px; font-size: .86rem;
}
.cr-uptime i.dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cr-green);
  animation: cr-beat 2.6s var(--cr-ease) infinite;
}
@keyframes cr-beat {
  0% { box-shadow: 0 0 0 0 rgba(18, 168, 112, .5); }
  70% { box-shadow: 0 0 0 8px rgba(18, 168, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 168, 112, 0); }
}
.cr-uptime b { color: var(--cr-green); font-family: var(--cr-f-mono); margin-inline-start: auto; }

/* interactive logo mark (hero) */
.cr-logo-stage {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 1;
  perspective: 900px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.cr-logo-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 35%, rgba(255, 111, 165, .3), rgba(187, 31, 85, .14) 45%, transparent 70%);
  filter: blur(6px);
  animation: cr-glow 5s var(--cr-ease) infinite alternate;
}
@keyframes cr-glow {
  from { transform: scale(.94); opacity: .7; }
  to { transform: scale(1.06); opacity: 1; }
}
.cr-logo-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  animation: cr-bob 6s ease-in-out infinite;
}
@keyframes cr-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
.cr-logo-mark { width: 100%; height: 100%; display: block; filter: drop-shadow(0 26px 40px rgba(54, 11, 58, .3)); }

/* the C arcs — gap faces right like the real mark; draw in on load */
.cr-arc {
  stroke-dasharray: 78 22;
  stroke-dashoffset: -11;
  animation: cr-draw 1.3s var(--cr-ease) both;
}
.cr-arc.a2 { animation-delay: .18s; }
.cr-arc.a3 { animation-delay: .36s; }
@keyframes cr-draw {
  from { stroke-dasharray: 0 100; opacity: 0; }
  to { stroke-dasharray: 78 22; opacity: 1; }
}
.cr-lcore { animation: cr-core-in .5s .75s var(--cr-ease) both; }
@keyframes cr-core-in {
  from { opacity: 0; r: 0; }
  to { opacity: 1; r: 5.5; }
}

/* pulse rings */
.cr-lring {
  transform-box: fill-box;
  transform-origin: center;
  animation: cr-lring 4.5s var(--cr-ease) infinite;
}
.cr-lring.lr2 { animation-delay: 2.25s; }
@keyframes cr-lring {
  0% { transform: scale(.82); opacity: 0; }
  35% { opacity: .9; }
  100% { transform: scale(1.08); opacity: 0; }
}

/* orbiting satellite dot */
.cr-orbit {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: cr-orbit 5s linear infinite;
}
.cr-logo-stage:hover .cr-orbit { animation-duration: 2s; }
@keyframes cr-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.cr-sat { filter: drop-shadow(0 0 6px rgba(255, 111, 165, .8)); }
/* logo animation OFF (Theme Control toggle) — freeze in final drawn state */
.cr-logo-stage.cr-static .cr-arc,
.cr-logo-stage.cr-static .cr-orbit,
.cr-logo-stage.cr-static .cr-lring,
.cr-logo-stage.cr-static .cr-lcore,
.cr-logo-stage.cr-static .cr-logo-glow { animation: none !important; }
.cr-logo-stage.cr-static .cr-arc { stroke-dasharray: 78 22; opacity: 1; }
.cr-logo-stage.cr-static .cr-lring { opacity: .3; }

/* click pulse */
.cr-logo-stage.pop .cr-logo-mark { animation: cr-pop .55s var(--cr-ease); }
@keyframes cr-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* tech strip */
.cr-techstrip { border-block: 1px solid var(--cr-line); background: var(--cr-surface); }
.cr-techstrip .container { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; align-items: center; padding-top: 20px; padding-bottom: 20px; }
.cr-techstrip span { font-family: var(--cr-f-disp); font-weight: 700; color: var(--cr-muted); font-size: .95rem; }
.cr-techstrip span b { color: var(--cr-plum); }

/* section head */
.cr-head { max-width: 640px; margin: 0 auto clamp(30px, 5vh, 46px); text-align: center; }
.cr-head h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); font-weight: 800; margin-top: 12px; }
.cr-head p { color: var(--cr-soft); font-size: 1.04rem; margin-top: 12px; }
.cr-section { padding: clamp(48px, 8vh, 88px) 0; }
.cr-section.tint { background: var(--cr-tint); }

/* ---------- announcement bar (Theme Control panel) ---------- */
.cr-announce {
  background: var(--cr-grad);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  padding: 9px 0;
  position: relative;
  z-index: 5;
}
.cr-announce .container { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cr-announce i { color: #FFD08A; margin-inline-end: 6px; }
.cr-announce-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--cr-plum) !important;
  border-radius: 999px;
  padding: 4px 16px;
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none !important;
  transition: .2s var(--cr-ease);
}
.cr-announce-btn:hover { background: #FFE9F2; color: var(--cr-magenta) !important; }

/* ---------- offers / promos (Theme Control panel) ---------- */
.cr-offers-section { padding-top: clamp(24px, 4vh, 40px); }
.cr-offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) { .cr-offers { grid-template-columns: 1fr; } }
.cr-offer {
  --of-accent: var(--cr-magenta);
  position: relative;
  border-radius: 22px;
  padding: 30px 32px;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--cr-surface);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--cr-line);
  box-shadow: var(--cr-shadow);
  isolation: isolate;
}
.cr-offer-full { grid-column: 1 / -1; }
/* banner with no image → branded gradient wash tinted by the accent */
.cr-offer-banner:not([style*="background-image"]) {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--of-accent) 22%, transparent), transparent 60%),
    linear-gradient(135deg, var(--cr-plum), #5F1B45 60%, var(--of-accent));
  border: 0;
}
.cr-offer-countdown {
  background: linear-gradient(135deg, #1a0420, #3a0d33 55%, var(--of-accent));
  border: 0;
}
.cr-offer[style*="background-image"], .cr-offer-banner:not([style*="background-image"]), .cr-offer-countdown { color: #fff; }
.cr-offer-in { position: relative; z-index: 2; width: 100%; }
.cr-offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.cr-offer-tag i { color: #FFD08A; }
.cr-offer h3 {
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.5;
}
.cr-offer p { color: rgba(255, 255, 255, .82); font-size: .96rem; margin: 0 0 16px; max-width: 42ch; }
.cr-offer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--cr-plum);
  font-weight: 700;
  border-radius: 12px;
  padding: 11px 24px;
  text-decoration: none !important;
  transition: .2s var(--cr-ease);
}
.cr-offer-btn:hover { background: #FFE9F2; color: var(--cr-magenta); transform: translateY(-2px); }
.cr-offer-btn i { font-size: .82rem; }
/* countdown */
.cr-countdown { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.cr-cd-unit {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 13px;
  padding: 9px 4px 7px;
  min-width: 58px;
  text-align: center;
}
.cr-cd-unit b { display: block; font-family: var(--cr-f-disp); font-size: 1.5rem; font-weight: 800; color: #fff; direction: ltr; }
.cr-cd-unit small { display: block; font-size: .68rem; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.cr-countdown.cr-cd-done { opacity: .6; }

/* services grid (product groups) */
.cr-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 991px) { .cr-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .cr-svc-grid { grid-template-columns: 1fr; } }
.cr-svc {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: .28s var(--cr-ease);
  box-shadow: var(--cr-shadow);
  color: inherit;
  text-decoration: none;
}
.cr-svc:hover {
  transform: translateY(-5px);
  box-shadow: var(--cr-shadow-lg);
  border-color: rgba(187, 31, 85, .3);
  text-decoration: none;
  color: inherit;
}
.cr-svc .cr-ico {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--cr-grad);
  display: grid; place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 12px 26px -14px rgba(187, 31, 85, .5);
}
.cr-svc .cr-ico i { color: #fff; font-size: 1.35rem; }
.cr-svc h3 { font-size: 1.2rem; margin: 0 0 8px; }
.cr-svc p { color: var(--cr-soft); font-size: .9rem; flex: 1; line-height: 1.7; margin-bottom: 0; }
.cr-svc .cr-go {
  margin-top: 14px; color: var(--cr-magenta); font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.cr-svc .cr-go i { transition: .2s; }
.cr-svc:hover .cr-go i { transform: translateX(4px); }
[dir="rtl"] .cr-svc:hover .cr-go i { transform: translateX(-4px); }

/* CTA gradient band */
.cr-cta {
  background: var(--cr-grad);
  border-radius: 28px;
  color: #fff;
  text-align: center;
  padding: clamp(40px, 6vw, 64px) 30px;
  position: relative;
  overflow: hidden;
}
.cr-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 300px at 82% 88%, rgba(255, 111, 165, .3), transparent 60%);
}
.cr-cta > * { position: relative; }
.cr-cta img { height: 40px; margin: 0 auto 18px; display: block; filter: brightness(0) invert(1); }
.cr-cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.cr-cta p { color: rgba(255, 255, 255, .9); margin: 12px auto 24px; max-width: 46ch; font-size: 1.04rem; }
.cr-cta .btn-light { background: #fff; color: var(--cr-plum); font-family: var(--cr-f-disp); font-weight: 700; border-radius: 12px; }
.cr-cta .btn-light:hover { transform: translateY(-2px); }

/* ---------- footer ---------- */
footer#footer.footer,
footer.footer {
  background: var(--cr-plum) !important;
  color: #B99EB4;
  border-top: 0;
  padding: 56px 0 32px;
}
footer.footer a, footer.footer .nav-link { color: #B99EB4 !important; }
footer.footer a:hover, footer.footer .nav-link:hover { color: #fff !important; }
footer.footer .btn { color: #EAD9E6; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; }
footer.footer .copyright { color: #8E7389; font-family: var(--cr-f-mono); font-size: .78rem; }
.cr-fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 34px; }
@media (max-width: 800px) { .cr-fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cr-fgrid { grid-template-columns: 1fr; } }
.cr-fgrid h5 {
  font-family: var(--cr-f-mono);
  font-size: .72rem;
  color: var(--cr-pink);
  letter-spacing: .1em;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.cr-fgrid a { display: block; font-size: .88rem; color: #B99EB4 !important; padding: 5px 0; }
.cr-fgrid a:hover { color: #fff !important; text-decoration: none; }
.cr-fbrand img { height: 34px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.cr-fbrand p { font-size: .88rem; color: #A98BA4; max-width: 34ch; }
.cr-social { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; }
.cr-social .list-inline-item { margin: 0; }
.cr-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #EAD9E6;
  transition: .2s var(--cr-ease);
}
.cr-social a:hover { background: var(--cr-magenta); border-color: var(--cr-magenta); color: #fff; transform: translateY(-2px); }
.cr-fbottom {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 18px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem; color: #B79AB0; text-align: center;
}
.cr-fbottom .copyright { margin: 0; letter-spacing: .2px; }
.cr-fbottom .cr-floc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: .74rem; color: #EAD9E6;
}
.cr-fbottom .cr-floc::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cr-green); box-shadow: 0 0 0 3px rgba(46, 204, 113, .18);
}

/* ---------- login / auth ---------- */
.login-card, .logincontainer .card { border-radius: 22px; }
.providerLinkingFeedback { border-radius: 14px; }

/* modals */
.modal-content { border-radius: 18px; border: 1px solid var(--cr-line); }
.modal-header { background: var(--cr-surface-2); border-radius: 18px 18px 0 0; }
.modal-localisation .modal-content { background: var(--cr-plum); }
.modal-localisation .item-selector .item.active { border-color: var(--cr-pink); color: var(--cr-pink); }

/* alerts */
.alert { border-radius: 14px; }
.alert-info { background: rgba(182, 120, 232, .1); border-color: rgba(182, 120, 232, .35); color: var(--cr-plum-2); }
.alert-success { background: rgba(18, 168, 112, .08); border-color: rgba(18, 168, 112, .3); color: #0B7A51; }

/* reveal on scroll */
.cr-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--cr-ease), transform .8s var(--cr-ease); }
.cr-reveal.in { opacity: 1; transform: none; }

/* ---------- RTL layer ---------- */
[dir="rtl"] body, [dir="rtl"] { text-align: right; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .float-right, [dir="rtl"] .float-lg-right { float: left !important; }
[dir="rtl"] .float-left { float: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { transform: scaleX(-1); }
[dir="rtl"] .list-group { padding-right: 0; }
[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; }
[dir="rtl"] .custom-control { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .custom-control-label::before,
[dir="rtl"] .custom-control-label::after { left: auto; right: -1.5rem; }
[dir="rtl"] .navbar-nav { padding-right: 0; }
[dir="rtl"] .cr-hero::before { inset-inline-end: auto; inset-inline-start: -120px; }

/* ============================================================
   CLIENT AREA — internal pages (dashboard, lists, tickets)
   ============================================================ */

/* page-enter motion */
#main-body .primary-content { animation: cr-page-in .5s var(--cr-ease) both; }
@keyframes cr-page-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- dashboard welcome hero ---------- */
.cr-dash-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--cr-grad);
  border-radius: 24px;
  padding: 28px 30px;
  color: #fff;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 26px 56px -26px rgba(187, 31, 85, .55);
}
.cr-dash-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 260px at 85% 90%, rgba(255, 111, 165, .35), transparent 65%);
  pointer-events: none;
}
.cr-dash-mark { width: 74px; height: 74px; flex: none; position: relative; animation: cr-bob 6s ease-in-out infinite; }
.cr-dash-mark svg { width: 100%; height: 100%; }
.cr-dash-txt { position: relative; flex: 1; min-width: 0; }
.cr-dash-hi { font-family: var(--cr-f-mono); font-size: .72rem; letter-spacing: .1em; color: rgba(255, 255, 255, .8); text-transform: uppercase; }
.cr-dash-txt h2 {
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: #fff;
  margin: 3px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-dash-txt p { color: rgba(255, 255, 255, .85); margin: 0; font-size: .95rem; }
.cr-dash-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.cr-dash-btn-light {
  background: #fff !important;
  color: var(--cr-plum) !important;
  font-family: var(--cr-f-disp);
  font-weight: 700;
  border-radius: 12px;
  border: 0;
}
.cr-dash-btn-light:hover { color: var(--cr-magenta) !important; transform: translateY(-2px); }
.cr-dash-btn-ghost {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  font-family: var(--cr-f-disp);
  font-weight: 700;
  border-radius: 12px;
}
.cr-dash-btn-ghost:hover { background: rgba(255, 255, 255, .24) !important; transform: translateY(-2px); }
@media (max-width: 760px) {
  .cr-dash-hero { flex-direction: column; text-align: center; }
  .cr-dash-txt h2 { white-space: normal; }
}

/* ---------- dashboard stat tiles ---------- */
.tiles .tile {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line) !important;
  border-radius: 18px;
  margin: 6px;
  padding: 20px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: .28s var(--cr-ease);
  box-shadow: var(--cr-shadow);
  display: block;
}
.tiles .tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--cr-shadow-lg);
  border-color: rgba(187, 31, 85, .3) !important;
  text-decoration: none;
}
.tiles .tile i {
  position: static !important;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--cr-grad);
  color: #fff !important;
  display: grid;
  place-items: center;
  font-size: 1.15rem !important;
  float: none !important;
  margin-bottom: 10px;
  box-shadow: 0 10px 22px -10px rgba(187, 31, 85, .55);
  opacity: 1 !important;
}
.tiles .tile:hover { background: var(--cr-surface); }
.tiles .tile:hover i { font-size: 1.15rem !important; color: #fff !important; }
.tiles .tile .stat { position: static !important; }
.tiles .tile .stat {
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--cr-heading) !important;
  line-height: 1.1;
}
.tiles .tile .title {
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: .85rem;
  color: var(--cr-muted) !important;
  text-transform: none;
}
.tiles .tile .highlight { display: none; }

/* ---------- client home panels ---------- */
.badge:empty { display: none !important; }
div.dataTables_wrapper div.dataTables_length { margin-inline-end: 14px; }
.client-home-cards .card { margin-bottom: 20px; }
.client-home-cards .card .card-header { display: flex; align-items: center; }
.client-home-cards .card .card-header .card-title { flex: 1; font-size: 1rem; }
.client-home-cards .card .card-header i { color: var(--cr-magenta); }
/* header action buttons inside panel headers: readable on light header */
.client-home-cards .card-header .btn,
.sidebar .card-header .btn {
  background: var(--cr-surface) !important;
  color: var(--cr-magenta) !important;
  border: 1px solid rgba(187, 31, 85, .35) !important;
  border-radius: 9px;
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 12px;
}
.client-home-cards .card-header .btn:hover,
.sidebar .card-header .btn:hover { background: var(--cr-magenta) !important; color: #fff !important; }
.client-home-cards .list-group-item { border-inline: 0; }
.client-home-cards .card-footer { background: var(--cr-surface-2); border-top: 1px solid var(--cr-line-2); border-radius: 0 0 18px 18px; }

/* ---------- data tables → floating card rows ---------- */
.table-container { background: transparent; border: 0; box-shadow: none; }
table.table-list {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  background: transparent;
}
table.table-list thead th {
  background: transparent !important;
  border: 0 !important;
  font-family: var(--cr-f-mono);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cr-muted);
  padding: 2px 16px;
}
table.table-list tbody tr {
  cursor: pointer;
}
table.table-list tbody td {
  background: var(--cr-surface);
  border: 0 !important;
  border-top: 1px solid var(--cr-line) !important;
  border-bottom: 1px solid var(--cr-line) !important;
  padding: 16px;
  vertical-align: middle;
  transition: .22s var(--cr-ease);
}
table.table-list tbody td:first-child {
  border-inline-start: 1px solid var(--cr-line) !important;
  border-start-start-radius: 16px;
  border-end-start-radius: 16px;
}
table.table-list tbody td:last-child {
  border-inline-end: 1px solid var(--cr-line) !important;
  border-start-end-radius: 16px;
  border-end-end-radius: 16px;
}
table.table-list tbody tr:hover td {
  background: var(--cr-surface);
  box-shadow: 0 14px 30px -18px rgba(187, 31, 85, .35);
  border-color: rgba(187, 31, 85, .35) !important;
}
table.table-list tbody td strong { font-family: var(--cr-f-disp); color: var(--cr-heading); font-size: .98rem; }
table.table-list tbody td a { color: var(--cr-magenta); }

/* status pills with dot */
.label.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 5px 13px;
  line-height: 1;
}
.label.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.label.status.status-active { background: rgba(18, 168, 112, .12) !important; color: #0B7A51 !important; }
.label.status.status-pending, .label.status.status-pendingtransfer { background: rgba(240, 173, 78, .16) !important; color: #A76A00 !important; }
.label.status.status-suspended { background: rgba(217, 83, 79, .14) !important; color: #B03330 !important; }
.label.status.status-terminated, .label.status.status-cancelled, .label.status.status-expired, .label.status.status-closed { background: rgba(138, 124, 136, .16) !important; color: var(--cr-soft) !important; }
.label.status.status-open, .label.status.status-customer-reply { background: rgba(187, 31, 85, .12) !important; color: var(--cr-magenta) !important; }
.label.status.status-answered { background: rgba(182, 120, 232, .16) !important; color: #7A3FB8 !important; }
.label.status.status-fraud { background: rgba(217, 83, 79, .14) !important; color: #B03330 !important; }

/* DataTables chrome */
div.dataTables_wrapper div.dataTables_filter input {
  border: 1px solid var(--cr-line);
  border-radius: 10px;
  background: var(--cr-surface);
  padding: 7px 12px;
  margin-inline-start: 8px;
}
div.dataTables_wrapper div.dataTables_length select {
  border: 1px solid var(--cr-line);
  border-radius: 10px;
  background: var(--cr-surface);
  padding: 5px 8px;
}
div.dataTables_wrapper div.dataTables_info { color: var(--cr-muted); font-size: .82rem; }
div.dataTables_wrapper .paginate_button { border-radius: 10px !important; }

/* ticket replies / view */
.ticket-reply {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line) !important;
  border-radius: 18px;
  box-shadow: var(--cr-shadow);
  margin-bottom: 18px;
}
.ticket-reply .card-header, .ticket-reply .panel-heading { background: var(--cr-surface-2) !important; }
.ticket-reply.staff { border-inline-start: 3px solid var(--cr-magenta) !important; }
.ticket-number { font-family: var(--cr-f-mono); color: var(--cr-magenta); font-size: .8rem; }
.ticket-subject { font-family: var(--cr-f-disp); font-weight: 700; color: var(--cr-heading); }
.ticket-subject.unread::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cr-magenta);
  margin-inline-start: 7px;
}

/* view filter buttons (list pages side filters) */
.view-filter-btns .list-group-item.active {
  background: rgba(187, 31, 85, .08);
  color: var(--cr-magenta);
}

/* ============================================================
   RTL — comprehensive direction layer
   ============================================================ */

/* spacing utilities flip (bootstrap 4 LTR classes used in templates) */
[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }
[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }
[dir="rtl"] .pr-0 { padding-right: 0 !important; padding-left: 0 !important; }
[dir="rtl"] .pl-0 { padding-left: 0 !important; padding-right: 0 !important; }

/* directional arrows flip */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-circle-right,
[dir="rtl"] .fa-arrow-circle-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-long-arrow-alt-left {
  transform: scaleX(-1);
}

/* dropdowns */
[dir="rtl"] .dropdown-menu { right: 0; left: auto; }
[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; }
[dir="rtl"] .dropdown-menu .dropdown-item { text-align: right; }
[dir="rtl"] .dropdown-item i,
[dir="rtl"] .list-group-item i,
[dir="rtl"] .nav-link i.fa-fw { margin-left: 6px; margin-right: 0; }

/* input groups: keep visual order, flip radii */
[dir="rtl"] .input-group > .form-control:not(:last-child) { border-radius: 0 10px 10px 0; }
[dir="rtl"] .input-group > .form-control:not(:first-child) { border-radius: 10px 0 0 10px; }
[dir="rtl"] .input-group-prepend .btn,
[dir="rtl"] .input-group-prepend .input-group-text { border-radius: 0 10px 10px 0; }
[dir="rtl"] .input-group-append .btn,
[dir="rtl"] .input-group-append .input-group-text { border-radius: 10px 0 0 10px; }

/* selects: move caret to the left */
[dir="rtl"] .custom-select,
[dir="rtl"] select.form-control {
  background-position: left .75rem center;
  padding-right: .75rem;
  padding-left: 1.75rem;
}

/* tables & datatables in RTL */
[dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .table .text-center { text-align: center !important; }
[dir="rtl"] div.dataTables_wrapper div.dataTables_filter { text-align: left; }
[dir="rtl"] div.dataTables_wrapper div.dataTables_length { text-align: right; }
div.dataTables_wrapper div.dataTables_length select { margin: 0 8px; }
div.dataTables_wrapper div.dataTables_paginate { margin-bottom: 8px; }
[dir="rtl"] div.dataTables_wrapper div.dataTables_paginate { text-align: left; }

/* client area header/topbar icon gaps */
[dir="rtl"] .topbar .btn i,
[dir="rtl"] .navbar .btn i { margin-left: 4px; margin-right: 0; }

/* panels/cards floated header buttons */
[dir="rtl"] .card-header .float-right,
[dir="rtl"] .panel-heading .float-right { float: left !important; }

/* sidebar active accent on the correct side */
[dir="rtl"] .sidebar .list-group-item.active,
[dir="rtl"] .list-group-item.active {
  border-inline-start: 3px solid var(--cr-magenta);
}

/* misc */
[dir="rtl"] .alert i { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .btn i { margin-left: 6px; margin-right: 0; }
[dir="rtl"] .btn i:last-child:first-child { margin: 0; }
[dir="rtl"] .tiles .tile { text-align: right; }

/* plain checkboxes/radios inside labels: keep clear of the text */
[dir="rtl"] label > input[type="checkbox"],
[dir="rtl"] label > input[type="radio"],
[dir="rtl"] td > input[type="checkbox"],
[dir="rtl"] .checkbox input[type="checkbox"] {
  margin-left: .55rem;
  margin-right: 0;
  vertical-align: middle;
  position: static;
  float: none;
}
[dir="rtl"] .checkbox label, [dir="rtl"] .radio label { padding-right: 0; }

/* intl phone input keeps internal LTR everywhere */
[dir="rtl"] .iti { direction: ltr; width: 100%; }
[dir="rtl"] .iti input[type="tel"] { text-align: right; direction: ltr; }

/* ============================================================
   APP SHELL — SaaS-style client area (sidebar + topbar)
   ============================================================ */
body.cr-app {
  padding-top: 78px;
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(187, 31, 85, .05), transparent 60%),
    var(--cr-bg) !important;
}
body.cr-app .master-breadcrumb { background: transparent; border: 0; }
body.cr-app #main-body { padding-top: 4px; }
body.cr-app footer#footer .cr-fgrid { display: none; }
body.cr-app footer#footer { padding: 16px 0; margin-top: 26px; }
body.cr-app footer#footer .cr-fbottom {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  justify-content: center;
  gap: 20px;
}

/* top bar (brand + nav pills + tools) */
.cr-app-top {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 78px;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(14px, 2.5vw, 30px);
  background: rgba(251, 246, 250, .88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cr-line);
}
.cr-top-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  flex: none;
}
.cr-top-brand svg { width: 34px; height: 34px; }
.cr-top-brand b {
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--cr-heading);
}
.cr-topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 16px;
  padding: 5px;
  box-shadow: 0 10px 30px -22px rgba(54, 11, 58, .5);
}
.cr-topnav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 12px;
  color: var(--cr-soft) !important;
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: .84rem;
  text-decoration: none !important;
  transition: .2s var(--cr-ease);
  white-space: nowrap;
}
.cr-topnav a i { font-size: .88rem; }
.cr-topnav a:hover { color: var(--cr-magenta) !important; background: var(--cr-surface-2); }
.cr-topnav a.on {
  color: #fff !important;
  background: var(--cr-grad);
  box-shadow: 0 10px 24px -10px rgba(187, 31, 85, .6);
}

/* mobile bottom tab bar */
.cr-tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: 66px;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(180deg, #360B3A, #2B0930);
  box-shadow: 0 -10px 30px -18px rgba(43, 9, 48, .6);
  padding: 0 6px;
}
.cr-tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 10px;
  color: rgba(234, 217, 230, .75) !important;
  font-family: var(--cr-f-disp);
  font-weight: 600;
  font-size: .6rem;
  text-decoration: none !important;
  transition: .2s;
}
.cr-tabbar a i { font-size: 1.05rem; }
.cr-tabbar a.on {
  color: #fff !important;
  background: linear-gradient(120deg, rgba(187, 31, 85, .85), rgba(187, 31, 85, .45));
}
.cr-app-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 12px;
  padding: 9px 14px;
}
.cr-app-search i { color: var(--cr-muted); font-size: .9rem; }
.cr-app-search input { border: 0; outline: 0; background: transparent; flex: 1; font-family: var(--cr-f-body); color: var(--cr-ink); }
.cr-app-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.cr-app-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 12px;
  color: var(--cr-plum) !important;
  transition: .2s;
  cursor: pointer;
}
.cr-app-icon-btn:hover { border-color: var(--cr-magenta); color: var(--cr-magenta) !important; }
.cr-app-dot {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  background: var(--cr-magenta);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0 4px;
  box-shadow: 0 4px 10px rgba(187, 31, 85, .4);
}
.cr-app-avatar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 14px;
  padding: 5px 12px 5px 6px;
  cursor: pointer;
  transition: .2s;
}
[dir="rtl"] .cr-app-avatar-btn { padding: 5px 6px 5px 12px; }
.cr-app-avatar-btn:hover { border-color: var(--cr-magenta); }
.cr-app-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--cr-grad);
  color: #fff;
  font-family: var(--cr-f-disp);
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: .95rem;
}
.cr-app-avatar.lg { width: 42px; height: 42px; border-radius: 12px; font-size: 1.15rem; }
.cr-app-username { font-family: var(--cr-f-disp); font-weight: 700; font-size: .88rem; color: var(--cr-heading); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-app-avatar-btn .fa-chevron-down { font-size: .6rem; color: var(--cr-muted); }
.cr-app-user .dropdown-menu {
  border: 1px solid var(--cr-line);
  border-radius: 16px;
  box-shadow: 0 24px 50px -20px rgba(54, 11, 58, .35);
  padding: 8px;
  min-width: 240px;
}
.cr-app-user-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--cr-line-2);
  margin-bottom: 6px;
}
.cr-app-user-head b { display: block; font-family: var(--cr-f-disp); color: var(--cr-heading); font-size: .95rem; }
.cr-app-user-head small { color: var(--cr-muted); }
.cr-app-user .dropdown-item { border-radius: 10px; padding: 9px 12px; font-size: .9rem; color: var(--cr-soft); }
.cr-app-user .dropdown-item:hover { background: var(--cr-surface-2); color: var(--cr-plum); }
.cr-app-user .dropdown-item i { color: var(--cr-magenta); margin-inline-end: 6px; }
.cr-app-user .dropdown-item.text-danger i { color: inherit; }
/* app shell responsive */
@media (max-width: 991px) {
  body.cr-app { padding-bottom: 80px; }
}

/* services/home/tickets pages: custom layouts replace the WHMCS sidebar column */
body.cr-page-clientareaproducts #main-body .col-lg-4.col-xl-3,
body.cr-page-clientareahome #main-body .col-lg-4.col-xl-3,
body.cr-page-supportticketslist #main-body .col-lg-4.col-xl-3 { display: none; }
body.cr-page-clientareaproducts #main-body .primary-content,
body.cr-page-clientareahome #main-body .primary-content,
body.cr-page-supportticketslist #main-body .primary-content { flex: 0 0 100%; max-width: 100%; }

/* ---------- services as cards ---------- */
.cr-svc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cr-svc-head h2 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.cr-svc-head p { color: var(--cr-muted); margin: 2px 0 0; font-size: .85rem; }
.cr-svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cr-svc-chips button {
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: .8rem;
  color: var(--cr-soft);
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 30px;
  padding: 7px 16px;
  cursor: pointer;
  transition: .2s;
}
.cr-svc-chips button:hover { border-color: var(--cr-magenta); color: var(--cr-magenta); }
.cr-svc-chips button.on {
  background: var(--cr-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(187, 31, 85, .55);
}
.cr-svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
/* filters toggle .w-hidden, which theme.min.css defines BEFORE this file —
   our display rules would otherwise win and the card would stay visible */
.cr-svc-card.w-hidden,
.cr-inbox-row.w-hidden,
.cr-b.w-hidden { display: none !important; }

.cr-svc-card {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
  transition: .28s var(--cr-ease);
  box-shadow: var(--cr-shadow);
  position: relative;
  overflow: hidden;
}
.cr-svc-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--cr-grad);
  opacity: 0;
  transition: .25s;
}
.cr-svc-card:hover { transform: translateY(-5px); box-shadow: var(--cr-shadow-lg); border-color: rgba(187, 31, 85, .3); }
.cr-svc-card:hover::before { opacity: 1; }
.cr-svc-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.cr-svc-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--cr-grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  box-shadow: 0 12px 26px -14px rgba(187, 31, 85, .5);
}
.cr-svc-name { font-family: var(--cr-f-disp); font-weight: 800; font-size: 1.1rem; color: var(--cr-heading); }
.cr-svc-domain { font-family: var(--cr-f-mono); font-size: .76rem; color: var(--cr-muted); margin: 2px 0 16px; direction: ltr; text-align: start; }
.cr-svc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: var(--cr-surface-2);
  border: 1px solid var(--cr-line-2);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cr-svc-meta small { display: block; font-family: var(--cr-f-mono); font-size: .62rem; color: var(--cr-muted); text-transform: uppercase; letter-spacing: .06em; }
.cr-svc-meta span { font-family: var(--cr-f-disp); font-weight: 700; color: var(--cr-heading); font-size: .9rem; }
.cr-svc-meta em { font-style: normal; color: var(--cr-muted); font-size: .72rem; }
.cr-svc-manage {
  margin-top: auto;
  color: var(--cr-magenta);
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cr-svc-card:hover .cr-svc-manage i { transform: translateX(4px); }
[dir="rtl"] .cr-svc-card:hover .cr-svc-manage i { transform: scaleX(-1) translateX(4px); }
.cr-svc-manage i { transition: .2s; }
.cr-svc-card.st-suspended .cr-svc-ico { background: linear-gradient(135deg, #7a2c29, #D9534F); }
.cr-svc-card.st-terminated .cr-svc-ico, .cr-svc-card.st-cancelled .cr-svc-ico { background: linear-gradient(135deg, #6b5f69, #8A7C88); }
.cr-svc-empty {
  grid-column: 1 / -1;
  text-align: center;
  background: var(--cr-surface);
  border: 1px dashed var(--cr-line);
  border-radius: 20px;
  padding: 60px 20px;
  color: var(--cr-muted);
}
.cr-svc-empty i { font-size: 2.4rem; color: var(--cr-lav); margin-bottom: 12px; }

/* ============================================================
   BENTO DASHBOARD
   ============================================================ */
.cr-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.cr-b {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--cr-shadow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: .28s var(--cr-ease);
}
.cr-b:hover { box-shadow: var(--cr-shadow-lg); border-color: rgba(187, 31, 85, .25); }
.cr-b-hero { grid-column: span 8; }
@media (max-width: 1200px) { .cr-b-hero { grid-column: span 12; } }

/* panels area: two aligned columns, each cell exactly as tall as its own content */
.cr-panels {
  column-count: 2;
  column-gap: 18px;
  margin-top: 18px;
}
.cr-panels > .cr-b {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 18px;
  display: block;
}
/* second column always starts at the services cell (keeps the arrangement stable whatever the content height) */
@media (min-width: 901px) {
  .cr-panels > .cr-b-svc { break-before: column; -webkit-column-break-before: always; }
}
@media (max-width: 900px) { .cr-panels { column-count: 1; } }

/* hero cell */
.cr-b-hero {
  background: var(--cr-grad);
  border: 0;
  color: #fff;
  padding: 30px;
}
.cr-b-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(480px 300px at 85% 95%, rgba(255, 111, 165, .35), transparent 65%);
  pointer-events: none;
}
.cr-b-hero-mark {
  position: absolute;
  inset-inline-end: 26px;
  top: 24px;
  width: 84px;
  height: 84px;
  animation: cr-bob 6s ease-in-out infinite;
  opacity: .95;
}
.cr-b-hero-mark svg { width: 100%; height: 100%; }
.cr-b-hi { position: relative; font-family: var(--cr-f-mono); font-size: .72rem; letter-spacing: .1em; color: rgba(255, 255, 255, .8); text-transform: uppercase; }
.cr-b-hero h2 {
  position: relative;
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: #fff;
  margin: 4px 0 4px;
}
.cr-b-hero p { position: relative; color: rgba(255, 255, 255, .85); margin: 0 0 20px; }
.cr-b-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  max-width: 640px;
}
@media (max-width: 560px) { .cr-b-stats { grid-template-columns: 1fr 1fr; } }
.cr-b-stats a {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
  text-decoration: none !important;
  transition: .22s var(--cr-ease);
  backdrop-filter: blur(4px);
}
.cr-b-stats a:hover { background: rgba(255, 255, 255, .22); transform: translateY(-3px); }
.cr-b-stats b {
  display: block;
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: 1.7rem;
  color: #fff;
  line-height: 1.1;
}
.cr-b-stats span { color: rgba(255, 255, 255, .85); font-size: .78rem; font-family: var(--cr-f-disp); font-weight: 600; }
.cr-b-hero-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }

/* generic cell header */
.cr-b-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cr-b-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--cr-grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .95rem;
  flex: none;
  box-shadow: 0 10px 22px -10px rgba(187, 31, 85, .5);
}
.cr-b-head h3 {
  flex: 1;
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: 1.02rem;
  margin: 0;
  color: var(--cr-heading);
}
.cr-b-more {
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: .78rem;
  color: var(--cr-magenta) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
}
.cr-b-more i { transition: .2s; font-size: .7rem; }
.cr-b-more:hover i { transform: translateX(3px); }
[dir="rtl"] .cr-b-more:hover i { transform: scaleX(-1) translateX(3px); }
.cr-b-body { color: var(--cr-soft); font-size: .92rem; }
.cr-b-list { display: flex; flex-direction: column; gap: 8px; }
.cr-b-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cr-surface-2);
  border: 1px solid var(--cr-line-2);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--cr-soft) !important;
  font-size: .88rem;
  text-decoration: none !important;
  transition: .2s var(--cr-ease);
}
a.cr-b-item:hover { border-color: rgba(187, 31, 85, .35); transform: translateX(-3px); }
[dir="ltr"] a.cr-b-item:hover { transform: translateX(3px); }
.cr-b-item i { color: var(--cr-magenta); flex: none; }
.cr-b-item .badge { flex: none; }
.cr-b-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.cr-b-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cr-line-2); font-size: .85rem; }

/* unpaid invoices cell — dark, urgent */
.cr-b-pay {
  background: linear-gradient(160deg, #2B0930, #4A163F);
  border: 0;
  color: #EAD9E6;
}
.cr-b-pay .cr-b-head h3 { color: #fff; }
.cr-b-pay .cr-b-ico { background: rgba(255, 255, 255, .14); box-shadow: none; }
.cr-b-pay .cr-b-body { color: rgba(234, 217, 230, .9); }
.cr-b-pay .cr-b-body a { color: var(--cr-pink); font-weight: 700; }
.cr-b-pay .cr-b-more { color: var(--cr-pink) !important; }
.cr-b-pay::after {
  content: "\f53d";
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 300;
  position: absolute;
  inset-inline-end: -14px;
  bottom: -18px;
  font-size: 7rem;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
}

/* domain search cell */
.cr-b-domain {
  background:
    linear-gradient(var(--cr-surface), var(--cr-surface)) padding-box,
    var(--cr-grad) border-box;
  border: 2px solid transparent;
}
.cr-b-domain .cr-b-body form,
.cr-b-domain .cr-b-body .input-group { border-radius: 12px; }
.cr-b-domain .cr-b-body input.form-control { border-radius: 10px; }

/* news cell */
.cr-b-news .cr-b-ico { background: var(--cr-plum); }

/* domain-register cell: tidy the WHMCS panel form (real markup: .input-group > input + .input-group-btn > input[submit]) */
.cr-b-domain .cr-b-body form { margin: 0; }
.cr-b-domain .cr-b-body .input-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}
.cr-b-domain .cr-b-body .input-group > .form-control {
  flex: 1 1 150px;
  min-width: 0;
  width: auto;
  height: 46px;
  border-radius: 12px !important;
  padding: 10px 14px;
  border: 1px solid var(--cr-line);
}
.cr-b-domain .cr-b-body .input-group-btn,
.cr-b-domain .cr-b-body .input-group-append,
.cr-b-domain .cr-b-body .input-group-prepend {
  display: flex;
  gap: 8px;
  position: static;
  width: auto;
  flex: none;
}
.cr-b-domain .cr-b-body .input-group .btn {
  height: 46px;
  padding: 0 20px;
  border-radius: 12px !important;
  position: static;
  margin: 0;
  white-space: nowrap;
  font-family: var(--cr-f-disp);
  font-weight: 700;
  line-height: 44px;
}
.cr-b-domain .cr-b-body .btn-success {
  background: var(--cr-green);
  border: 1px solid var(--cr-green);
  color: #fff;
}
.cr-b-domain .cr-b-body .btn-success:hover { filter: brightness(1.06); }
/* domain input types LTR (domains are Latin) with a friendly placeholder */
.cr-b-domain .cr-b-body .input-group > .form-control {
  width: 100% !important;
  direction: ltr;
  text-align: left;
}
.cr-b-domain .cr-b-body .input-group > .form-control::placeholder { color: var(--cr-muted); opacity: .75; }
.cr-b-domain .cr-b-body .input-group > .form-control:focus {
  border-color: rgba(187, 31, 85, .55);
  box-shadow: 0 0 0 4px rgba(187, 31, 85, .12);
}
@media (max-width: 480px) {
  .cr-b-domain .cr-b-body .input-group { grid-template-columns: 1fr; }
  .cr-b-domain .cr-b-body .input-group-btn { width: 100%; }
  .cr-b-domain .cr-b-body .input-group .btn { flex: 1; }
}

/* language/currency modal: brand plum panel (V16) */
.modal-localisation .modal-content {
  background: var(--cr-plum) !important;
  color: #EAD9E6;
  border: 0;
}
.modal-localisation h5, .modal-localisation .h5, .modal-localisation p.h5 { color: #fff; }
.modal-localisation .item-selector .item {
  display: block;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  color: #EAD9E6 !important;
  margin-bottom: 10px;
  text-align: center;
  text-decoration: none !important;
  transition: .2s;
}
.modal-localisation .item-selector .item:hover { border-color: var(--cr-pink); color: #fff !important; }
.modal-localisation .item-selector .item.active { border-color: var(--cr-pink); color: var(--cr-pink) !important; background: rgba(255, 111, 165, .1); }
.modal-localisation .modal-footer { border-top-color: rgba(255, 255, 255, .15); }
.modal-localisation .close { color: #fff; opacity: .8; }

/* ============================================================
   TICKETS INBOX
   ============================================================ */
.cr-inbox { display: flex; flex-direction: column; gap: 12px; }
.cr-inbox-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  padding: 16px 20px;
  text-decoration: none !important;
  color: inherit !important;
  transition: .25s var(--cr-ease);
  box-shadow: var(--cr-shadow);
  position: relative;
}
.cr-inbox-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--cr-shadow-lg);
  border-color: rgba(187, 31, 85, .3);
}
.cr-inbox-ava {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cr-grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex: none;
  box-shadow: 0 10px 22px -10px rgba(187, 31, 85, .5);
}
.cr-inbox-main { flex: 1; min-width: 0; }
.cr-inbox-subject {
  display: block;
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cr-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-inbox-main small { color: var(--cr-muted); font-size: .78rem; }
.cr-inbox-main em { font-style: normal; font-family: var(--cr-f-mono); color: var(--cr-magenta); }
.cr-inbox-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.cr-inbox-side small { color: var(--cr-muted); font-size: .72rem; font-family: var(--cr-f-mono); }
.cr-inbox-row.unread .cr-inbox-subject::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cr-magenta);
  margin-inline-start: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(187, 31, 85, .15);
}
.cr-inbox-row.unread { border-inline-start: 3px solid var(--cr-magenta); }
@media (max-width: 620px) {
  .cr-inbox-row { flex-wrap: wrap; }
  .cr-inbox-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ============================================================
   Services card cover
   ============================================================ */
/* services card v2: gradient cover band */
.cr-svc-card { padding: 0; }
.cr-svc-card-top {
  background: var(--cr-grad);
  margin: 0;
  padding: 18px 20px;
  align-items: center;
}
.cr-svc-card-top::after {
  content: "";
  position: absolute;
  inset-inline-end: -30px;
  top: -46px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 111, 165, .35), transparent 65%);
  pointer-events: none;
}
.cr-svc-card-top { position: relative; overflow: hidden; }
.cr-svc-ico { background: rgba(255, 255, 255, .16); box-shadow: none; backdrop-filter: blur(4px); }
.cr-svc-card-top .label.status { position: relative; background: #fff !important; }
.cr-svc-name { padding: 16px 20px 0; }
.cr-svc-domain { padding: 0 20px; }
.cr-svc-meta { margin: 0 20px 14px; }
.cr-svc-manage { padding: 0 20px 18px; }
.cr-svc-card.st-suspended .cr-svc-card-top { background: linear-gradient(135deg, #5c1f1d, #a13f3b); }
.cr-svc-card.st-terminated .cr-svc-card-top,
.cr-svc-card.st-cancelled .cr-svc-card-top { background: linear-gradient(135deg, #514850, #7a6e78); }
.cr-svc-card.st-suspended .cr-svc-ico,
.cr-svc-card.st-terminated .cr-svc-ico,
.cr-svc-card.st-cancelled .cr-svc-ico { background: rgba(255, 255, 255, .16); }

/* ---------- ticket hero (view + open new) ---------- */
.cr-tk-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--cr-plum), #5F1B45 55%, var(--cr-magenta));
  border-radius: 22px;
  padding: 26px 28px;
  margin-bottom: 24px;
  color: #fff;
  box-shadow: 0 16px 38px rgba(54, 11, 58, .22);
}
.cr-tk-hero-ico {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  flex: none;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  color: #fff;
}
.cr-tk-hero-main { flex: 1; min-width: 240px; }
.cr-tk-hero-eyebrow {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 4px;
}
.cr-tk-hero-title {
  font-family: var(--cr-f-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cr-tk-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 600;
}
.cr-tk-chip i { font-size: .8rem; color: #FF9AC0; }
.cr-tk-chip-closed { background: rgba(0, 0, 0, .28); }
.cr-tk-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.cr-tk-btn-reply {
  background: #fff;
  color: var(--cr-plum);
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  padding: 10px 22px;
}
.btn.cr-tk-btn-reply:hover { background: #FFE9F2; color: var(--cr-magenta); }
.btn.cr-tk-btn-close {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 12px;
  font-weight: 600;
  padding: 10px 18px;
}
.btn.cr-tk-btn-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 640px) {
  .cr-tk-hero { padding: 20px; }
  .cr-tk-hero-actions { width: 100%; }
  .cr-tk-hero-actions .btn { flex: 1; }
}

/* ---------- ticket thread as real chat (oldest → newest) ---------- */
.cr-chat { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.cr-chat-row { display: flex; align-items: flex-start; gap: 10px; max-width: 84%; }
.cr-chat-row.is-staff { align-self: flex-start; }
.cr-chat-row.is-client { align-self: flex-end; flex-direction: row-reverse; }
.cr-chat-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  margin-top: 2px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .95rem;
  background: var(--cr-plum);
  box-shadow: 0 6px 14px rgba(54, 11, 58, .22);
}
.cr-chat-row.is-client .cr-chat-ava { background: var(--cr-grad); }
.cr-chat-bubble {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  border-start-start-radius: 6px;
  padding: 13px 18px 12px;
  box-shadow: var(--cr-shadow);
  min-width: 0;
  flex: 1;
}
.cr-chat-row.is-client .cr-chat-bubble {
  background: linear-gradient(135deg, #FDF0F6, #FBEFF8);
  border-color: rgba(187, 31, 85, .18);
  border-radius: 18px;
  border-start-end-radius: 6px;
}
.cr-chat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--cr-line-2);
}
.cr-chat-name { color: var(--cr-heading); font-weight: 700; font-size: .88rem; }
.cr-chat-role {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(54, 11, 58, .08);
  color: var(--cr-plum);
}
.cr-chat-row.is-staff .cr-chat-role { background: var(--cr-grad); color: #fff; }
.cr-chat-time { color: var(--cr-muted); font-size: .72rem; margin-inline-start: auto; padding-inline-start: 12px; }
.cr-msg-body { text-align: start; line-height: 1.95; overflow-wrap: anywhere; color: var(--cr-ink); }
.cr-msg-body > :last-child { margin-bottom: 0; }
.cr-chat-ip {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--cr-line-2);
  color: var(--cr-muted);
  font-size: .74rem;
}
.cr-chat-bubble .attachments { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--cr-line-2); font-size: .82rem; }
.cr-chat-bubble .rating,
.cr-chat-bubble .rating-done { margin-top: 8px; }
@media (max-width: 640px) {
  .cr-chat-row { max-width: 100%; }
  .cr-chat-ava { width: 34px; height: 34px; font-size: .85rem; }
}

/* reply form */
#ticketReplyContainer { border-radius: 22px; border: 1px solid var(--cr-line); }
.cr-tk-reply-title { display: flex; align-items: center; gap: 12px; }
.cr-tk-reply-ico {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(187, 31, 85, .12), rgba(74, 22, 63, .1));
  color: var(--cr-magenta);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex: none;
}

/* ---------- open-new-ticket page ---------- */
.cr-tk-new-card {
  border-radius: 22px;
  border: 1px solid var(--cr-line);
  box-shadow: var(--cr-shadow);
}
.cr-tk-new-card label {
  font-weight: 700;
  color: var(--cr-heading);
  font-size: .87rem;
  margin-bottom: 8px;
}
.cr-tk-new-card .form-control { border-radius: 12px; }
.cr-tk-new-card input.form-control,
.cr-tk-new-card select.form-control { height: 46px; }
.cr-tk-new-card textarea.form-control { border-radius: 14px; line-height: 1.9; }
.cr-tk-new-card .custom-file,
.cr-tk-new-card .custom-file-input,
.cr-tk-new-card .custom-file-label { height: 46px; }
.cr-tk-new-card .custom-file-label {
  border-radius: 12px;
  line-height: 32px;
  border-color: var(--cr-line-2);
  color: var(--cr-muted);
}
.cr-tk-new-card .custom-file-label::after { height: 44px; line-height: 30px; background: var(--cr-surface-2); color: var(--cr-soft); }
.cr-tk-new-card .attachment-group { gap: 8px; }
.cr-tk-new-card .attachment-group .input-group-append .btn,
#ticketReplyContainer .attachment-group .input-group-append .btn { border-radius: 12px !important; }
#openTicketSubmit,
#openTicketSubmit.btn-primary {
  background: var(--cr-grad);
  border: 0;
  border-radius: 14px;
  padding: 12px 36px;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(187, 31, 85, .28);
}
#openTicketSubmit:hover { filter: brightness(1.08); }

/* ---------- domains page: unified pill toolbar ---------- */
body.cr-page-clientareadomains #domainForm > .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px !important;
}
body.cr-page-clientareadomains #domainForm .btn-group .btn {
  border-radius: 12px !important;
  border: 1px solid var(--cr-line-2);
  background: var(--cr-surface);
  color: var(--cr-soft);
  font-weight: 600;
  font-size: .82rem;
  padding: 9px 16px;
  transition: .2s var(--cr-ease);
}
body.cr-page-clientareadomains #domainForm .btn-group .btn:hover,
body.cr-page-clientareadomains #domainForm .btn-group .btn:focus {
  border-color: rgba(187, 31, 85, .4);
  color: var(--cr-magenta);
  background: #FFF3F8;
}
body.cr-page-clientareadomains #domainForm .btn-group .btn i { color: var(--cr-magenta); margin-inline-end: 4px; }
body.cr-page-clientareadomains #domainForm .btn-group .btn-group { margin: 0; }
body.cr-page-clientareadomains .dropdown-menu { border-radius: 14px; border: 1px solid var(--cr-line); box-shadow: var(--cr-shadow-lg, 0 14px 34px rgba(54,11,58,.14)); }
body.cr-page-clientareadomains .dropdown-item { padding: 9px 16px; font-size: .84rem; }
body.cr-page-clientareadomains .dropdown-item i { color: var(--cr-magenta); margin-inline-end: 6px; }

/* sidebar: long labels must never escape the card */
.sidebar .list-group-item { white-space: normal; overflow-wrap: anywhere; }
.sidebar .sidebar-menu-item-wrapper,
.sidebar .sidebar-menu-item-label,
.sidebar .recent-ticket { min-width: 0; max-width: 100%; overflow: hidden; }
.sidebar .truncate,
.sidebar .recent-ticket .truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar .recent-ticket .pull-right,
.sidebar .recent-ticket .float-right { float: none !important; display: block; margin-top: 3px; font-size: .74rem; }

/* selects: never clip their label (RTL-safe) */
.cr-tk-new-card select.form-control,
#ticketReplyContainer select.form-control { text-overflow: ellipsis; padding-inline: 10px 26px; }

/* bento: domain cell fills its row like its neighbours; form sits right under the header like every other cell */
.cr-b-domain .cr-b-head { flex: none; }

/* DataTables footer bar: mirror floats in RTL so length + pagination never overlap */
[dir="rtl"] .dataTables_wrapper .dataTables_length { float: right; }
[dir="rtl"] .dataTables_wrapper .dataTables_paginate { float: left; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate { margin-top: 12px; }

/* ============================================================
   CLEAN LIGHT — flat Lagom-style layer (CLIENT AREA ONLY)
   ============================================================ */

/* header: pure white, flat */
body.cr-client header.header .navbar-light {
  background: #fff;
  backdrop-filter: none;
  border-bottom: 1px solid var(--cr-line);
}
body.cr-client header.header .input-group.search .form-control,
body.cr-client header.header .input-group.search .btn-default {
  background: var(--cr-surface-2);
  border-color: var(--cr-line);
  color: var(--cr-ink);
}

/* main nav: white with dark links, brand tint on hover/active */
body.cr-client header.header .main-navbar-wrapper,
body.cr-client .navbar.main-navbar-wrapper {
  background: #fff !important;
  border-bottom: 1px solid var(--cr-line);
}
body.cr-client .main-navbar-wrapper .navbar-nav .nav-link,
body.cr-client .main-navbar-wrapper .navbar-nav > li > a {
  color: var(--cr-soft) !important;
  font-weight: 600;
}
body.cr-client .main-navbar-wrapper .navbar-nav .nav-link:hover,
body.cr-client .main-navbar-wrapper .navbar-nav .nav-item.active .nav-link,
body.cr-client .main-navbar-wrapper .navbar-nav > li > a:hover {
  color: var(--cr-magenta) !important;
  background: var(--cr-brand-t1);
}

/* logged-in topbar: light neutral instead of plum */
body.cr-client header.header .topbar {
  background-color: var(--cr-surface-2);
  color: var(--cr-muted);
  border-bottom: 1px solid var(--cr-line);
}
body.cr-client header.header .topbar .btn { color: var(--cr-soft); }
body.cr-client header.header .topbar .active-client .input-group-text { color: var(--cr-muted); background: transparent; border: 0; }
body.cr-client header.header .topbar .active-client .btn { color: var(--cr-ink); }

/* flat cards */
body.cr-client .card, body.cr-client .panel, body.cr-client .modal-content,
body.cr-client .dropdown-menu, body.cr-client .list-group-item, body.cr-client .popover {
  background-color: var(--cr-surface);
  color: var(--cr-soft);
}
body.cr-client .card, body.cr-client .panel {
  border: 1px solid var(--cr-line);
  border-radius: 12px;
  box-shadow: var(--cr-shadow);
}
body.cr-client .card .card-header, body.cr-client .panel .panel-heading {
  background: var(--cr-surface);
  border-bottom: 1px solid var(--cr-line);
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
}
body.cr-client .sidebar .card .card-header { background: var(--cr-surface); color: var(--cr-heading); }
body.cr-client .sidebar .card .card-header .card-title { color: var(--cr-heading); font-weight: 600; }
body.cr-client .sidebar .card .card-header i { color: var(--cr-magenta); }
body.cr-client .list-group-item:hover { background-color: var(--cr-surface-2); color: var(--cr-ink); }
body.cr-client .sidebar .list-group-item.active,
body.cr-client .list-group-item.active {
  background-color: var(--cr-brand-t1);
  color: var(--cr-magenta);
}
body.cr-client .dropdown-item:hover, body.cr-client .dropdown-item:focus { background: var(--cr-brand-t1); color: var(--cr-magenta); }
body.cr-client .modal-header { background: var(--cr-surface); border-color: var(--cr-line); }

/* forms */
body.cr-client .form-control, body.cr-client .custom-select, body.cr-client select.form-control,
body.cr-client textarea.form-control, body.cr-client .field {
  background-color: #fff !important;
  color: var(--cr-ink) !important;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
}
body.cr-client .form-control:focus { border-color: var(--cr-magenta); box-shadow: 0 0 0 3px rgba(187, 31, 85, .08); }
body.cr-client .input-group-text { background: var(--cr-surface-2); border-color: var(--cr-line); color: var(--cr-muted); }

/* flat buttons */
body.cr-client .btn { border-radius: 8px; font-weight: 600; }
body.cr-client .btn-primary { box-shadow: none; }
body.cr-client .btn-primary:hover, body.cr-client .btn-primary:focus { transform: none; }
body.cr-client .btn-default { background: #fff; border: 1px solid var(--cr-line); color: var(--cr-soft); }
body.cr-client .btn-default:hover { border-color: var(--cr-magenta); color: var(--cr-magenta); background: #fff; transform: none; }

/* icon tiles: flat brand tint */
body.cr-client .cr-svc .cr-ico, body.cr-client .cr-b-ico, body.cr-client .cr-svc-ico,
body.cr-client .tiles .tile i, body.cr-client .action-icon-btns a .ico-container,
body.cr-client .cr-inbox-ava, body.cr-client .crf-recap-mark {
  background: var(--cr-brand-t1) !important;
  color: var(--cr-magenta) !important;
  box-shadow: none !important;
}
body.cr-client .action-icon-btns a .ico-container i { color: var(--cr-magenta) !important; }
body.cr-client .cr-svc-card-top { background: var(--cr-surface-2); }
body.cr-client .cr-svc-card-top::after { display: none; }
body.cr-client .cr-svc-card.st-suspended .cr-svc-card-top { background: #FDF1F0; }
body.cr-client .cr-svc-card.st-terminated .cr-svc-card-top,
body.cr-client .cr-svc-card.st-cancelled .cr-svc-card-top { background: var(--cr-tint); }
body.cr-client .cr-svc-card::before { display: none; }

/* bento cells: flat */
body.cr-client .cr-b { border-radius: 14px; box-shadow: var(--cr-shadow); }
body.cr-client .cr-b:hover { box-shadow: var(--cr-shadow-lg); border-color: var(--cr-line); }
body.cr-client .cr-b-pay {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  color: var(--cr-soft);
}
body.cr-client .cr-b-pay .cr-b-head h3 { color: var(--cr-heading); }
body.cr-client .cr-b-pay .cr-b-ico { background: #FDF1F0 !important; color: #C0392B !important; }
body.cr-client .cr-b-pay .cr-b-body { color: var(--cr-soft); }
body.cr-client .cr-b-pay .cr-b-more { color: var(--cr-magenta) !important; }
body.cr-client .cr-b-pay::after { display: none; }
body.cr-client .cr-b-domain { border: 1px solid var(--cr-line); background: var(--cr-surface); }
body.cr-client .cr-b-hero, body.cr-client .cr-dash-hero { box-shadow: var(--cr-shadow-lg); }

/* status pills: light tints */
body.cr-client .label.status.status-active { background: #E5F7F0 !important; color: #0B7A51 !important; }
body.cr-client .label.status.status-pending, body.cr-client .label.status.status-pendingtransfer { background: #FDF4E3 !important; color: #A76A00 !important; }
body.cr-client .label.status.status-suspended, body.cr-client .label.status.status-fraud { background: #FDECEB !important; color: #B03330 !important; }
body.cr-client .label.status.status-terminated, body.cr-client .label.status.status-cancelled,
body.cr-client .label.status.status-expired, body.cr-client .label.status.status-closed { background: var(--cr-tint) !important; color: var(--cr-muted) !important; }
body.cr-client .label.status.status-open, body.cr-client .label.status.status-customer-reply { background: var(--cr-brand-t1) !important; color: var(--cr-magenta) !important; }
body.cr-client .label.status.status-answered { background: #F1EAFD !important; color: #6D3FC4 !important; }

/* tables */
body.cr-client table.table-list tbody td { box-shadow: none; }
body.cr-client table.table-list tbody tr:hover td { box-shadow: var(--cr-shadow-lg); }
body.cr-client .table thead th { background: var(--cr-surface-2); font-weight: 600; }
body.cr-client .master-breadcrumb { background: transparent; border-bottom: 0; }

/* footer: neutral near-black */
body.cr-client footer#footer.footer, body.cr-client footer.footer { background: #16181D !important; color: #9BA1AC; border-top: 0; }
body.cr-client footer.footer a, body.cr-client footer.footer .nav-link, body.cr-client .cr-fgrid a { color: #9BA1AC !important; }
body.cr-client footer.footer a:hover, body.cr-client .cr-fgrid a:hover { color: #fff !important; }
body.cr-client .cr-fbrand p { color: #7C828D; }
body.cr-client .cr-fbottom { color: #6E747F; border-top-color: rgba(255, 255, 255, .08); }

/* neutral-font headings */
body.cr-client h1, body.cr-client h2, body.cr-client h3, body.cr-client h4, body.cr-client h5,
body.cr-client .h1, body.cr-client .h2, body.cr-client .h3, body.cr-client .h4,
body.cr-client .card-title { font-weight: 700; letter-spacing: -.01em; }

/* ============================================================
   MERGE PACK (from CooWHM comparison): illustrated banner ·
   pastel stat circles · dark-mode toggle
   ============================================================ */

/* illustrated banner */
.cr-b-banner {
  grid-column: span 12;
  flex-direction: row;
  align-items: center;
  gap: 26px;
  background: linear-gradient(120deg, #FFFFFF 0%, #FBEDF2 55%, #F3ECFB 100%);
  border: 1px solid var(--cr-line);
  padding: clamp(22px, 3vw, 38px);
}
.cr-banner-txt { flex: 1; min-width: 0; }
.cr-b-banner .cr-b-hi { color: var(--cr-magenta); }
.cr-banner-txt h2 {
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--cr-heading);
  margin: 4px 0 6px;
}
.cr-banner-txt p { color: var(--cr-muted); margin: 0 0 18px; }
.cr-banner-art { flex: 0 0 42%; max-width: 460px; }
.cr-banner-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .cr-b-banner { flex-direction: column-reverse; text-align: center; }
  .cr-banner-art { max-width: 340px; }
  .cr-b-hero-actions { justify-content: center; }
}

/* pastel stat circles row */
.cr-statrow {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 860px) { .cr-statrow { grid-template-columns: 1fr 1fr; } }
.cr-stat {
  position: relative;
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 16px;
  padding: 26px 14px 20px;
  text-align: center;
  text-decoration: none !important;
  box-shadow: var(--cr-shadow);
  transition: .25s var(--cr-ease);
}
.cr-stat:hover { transform: translateY(-4px); box-shadow: var(--cr-shadow-lg); border-color: rgba(187, 31, 85, .25); }
.cr-stat em {
  position: absolute;
  top: 12px;
  inset-inline-start: 14px;
  font-style: normal;
  font-family: var(--cr-f-mono);
  font-size: .74rem;
  font-weight: 700;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--cr-brand-t1);
  color: var(--cr-magenta);
}
.cr-stat-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  font-size: 1.7rem;
  transition: .25s var(--cr-ease);
}
.cr-stat:hover .cr-stat-circle { transform: scale(1.07); }
.cr-stat-circle.c1 { background: #F1EAFD; color: #7C4DD8; }
.cr-stat-circle.c2 { background: #E3F6F3; color: #0E9F86; }
.cr-stat-circle.c3 { background: #FDF4E3; color: #C98A00; }
.cr-stat-circle.c4 { background: #FBE9F0; color: #BB1F55; }
.cr-stat b { display: block; font-family: var(--cr-f-disp); font-weight: 700; font-size: .95rem; color: var(--cr-heading); }

/* dark-mode floating toggle */
.cr-dm-btn {
  position: fixed;
  bottom: 20px;
  inset-inline-end: 20px;
  z-index: 1040;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--cr-line);
  background: var(--cr-surface);
  color: var(--cr-heading);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(16, 24, 40, .3);
  transition: .25s var(--cr-ease);
}
.cr-dm-btn:hover { transform: translateY(-3px); color: var(--cr-magenta); border-color: var(--cr-magenta); }

/* ============================================================
   SERVICE COMMAND CENTER (clientareaproductdetails)
   ============================================================ */
.cr-sv-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  background: linear-gradient(120deg, #FFFFFF 0%, #FBEDF2 60%, #F3ECFB 100%);
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.cr-sv-hero::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--cr-grad);
}
.cr-sv-hero.st-suspended::before { background: #D9534F; }
.cr-sv-hero.st-terminated::before, .cr-sv-hero.st-cancelled::before { background: var(--cr-muted); }
.cr-sv-ico {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #FBE9F0;
  color: var(--cr-magenta);
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  flex: none;
}
.cr-sv-hero.st-suspended .cr-sv-ico { background: #FDECEB; color: #B03330; }
.cr-sv-hero.st-terminated .cr-sv-ico, .cr-sv-hero.st-cancelled .cr-sv-ico { background: var(--cr-tint); color: var(--cr-muted); }
.cr-sv-id { flex: 1; min-width: 0; }
.cr-sv-id h2 {
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--cr-heading);
  margin: 8px 0 2px;
}
.cr-sv-group { font-family: var(--cr-f-mono); font-size: .74rem; color: var(--cr-muted); display: block; margin-bottom: 8px; }
.cr-sv-domain {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cr-f-mono);
  font-size: .8rem;
  color: var(--cr-magenta) !important;
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 20px;
  padding: 5px 14px;
  direction: ltr;
  text-decoration: none !important;
}
.cr-sv-domain:hover { border-color: var(--cr-magenta); }
.cr-sv-actions { display: flex; flex-direction: column; gap: 8px; flex: none; align-items: stretch; }
.cr-sv-actions .btn { min-width: 170px; }
.cr-sv-cancel {
  text-align: center;
  font-size: .8rem;
  color: #B03330 !important;
  text-decoration: none !important;
  padding: 4px;
}
.cr-sv-cancel:hover { text-decoration: underline !important; }
.cr-sv-cancel.disabled { opacity: .5; pointer-events: none; }
@media (max-width: 760px) {
  .cr-sv-hero { flex-direction: column; text-align: center; }
  .cr-sv-actions { width: 100%; }
}

/* facts strip */
.cr-sv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.cr-fact {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--cr-shadow);
  position: relative;
}
.cr-fact small {
  display: block;
  font-family: var(--cr-f-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cr-muted);
  margin-bottom: 3px;
}
.cr-fact b { font-family: var(--cr-f-disp); font-weight: 700; font-size: 1.02rem; color: var(--cr-heading); display: block; }
.cr-fact em { font-style: normal; font-size: .74rem; color: var(--cr-muted); }
.cr-fact-ico {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: .95rem;
}
.cr-fact.f-pink .cr-fact-ico { background: #FBE9F0; color: #BB1F55; }
.cr-fact.f-amber .cr-fact-ico { background: #FDF4E3; color: #8A5700; }
.cr-fact.f-lav .cr-fact-ico { background: #F1EAFD; color: #6B3FC9; }
.cr-fact.f-teal .cr-fact-ico { background: #E3F6F3; color: #0B7A67; }

/* usage rings */
.cr-usage { display: flex; justify-content: center; gap: clamp(24px, 6vw, 70px); flex-wrap: wrap; padding: 10px 0 16px; }
.cr-ring-box h4 { margin: 10px 0 2px; font-size: 1rem; }
.cr-ring-box p { color: var(--cr-muted); font-family: var(--cr-f-mono); font-size: .78rem; }
.cr-ring { width: 132px; height: 132px; }
.cr-ring-fill { transition: stroke-dasharray 1s var(--cr-ease); }
.cr-ring-val { font-family: var(--cr-f-disp); font-weight: 800; font-size: 1.35rem; fill: var(--cr-heading); }

/* product details tabs polish */
.product-details-tab-container { border: 1px solid var(--cr-line); border-radius: 0 0 14px 14px; }
.nav-tabs .nav-link { color: var(--cr-soft); }
.nav-tabs .nav-link.active { color: var(--cr-magenta); font-weight: 700; }

/* dark-mode variants for service page */
body.cr-dark .cr-sv-hero { background: linear-gradient(120deg, #24102A 0%, #331226 60%, #2A1136 100%); }
body.cr-dark .cr-sv-ico { background: rgba(216, 41, 99, .16); color: #FF9DBF; }
body.cr-dark .cr-fact.f-pink .cr-fact-ico { background: rgba(216, 41, 99, .18); color: #FF9DBF; }
body.cr-dark .cr-fact.f-amber .cr-fact-ico { background: rgba(201, 138, 0, .16); color: #F5CD7E; }
body.cr-dark .cr-fact.f-lav .cr-fact-ico { background: rgba(124, 77, 216, .18); color: #C9AAF5; }
body.cr-dark .cr-fact.f-teal .cr-fact-ico { background: rgba(14, 159, 134, .16); color: #7DE8D2; }
body.cr-dark .cr-sv-domain { background: var(--cr-surface); }
body.cr-dark .product-details-tab-container { background: var(--cr-surface) !important; }

/* ---------- dark mode tokens & fixes ---------- */
body.cr-dark {
  --cr-brand-t1: rgba(216, 41, 99, .16);
  --cr-brand-t2: rgba(216, 41, 99, .24);
  --cr-bg: #150418;
  --cr-surface: #221026;
  --cr-surface-2: #2C1631;
  --cr-tint: #1C0920;
  --cr-ink: #F4E9F3;
  --cr-heading: #FFFFFF;
  --cr-muted: #A188A5;
  --cr-soft: #CDB9CF;
  --cr-line: #3B2441;
  --cr-line-2: #331E39;
  --cr-shadow: 0 14px 38px -26px rgba(0, 0, 0, .65);
  --cr-shadow-lg: 0 28px 60px -28px rgba(216, 41, 99, .35);
}
body.cr-dark header.header .navbar-light,
body.cr-dark.cr-client header.header .navbar-light {
  background: #1B0920;
  border-bottom-color: var(--cr-line);
}
body.cr-dark header.header .logo-img { filter: brightness(0) invert(1); }
body.cr-dark header.header .input-group.search .form-control,
body.cr-dark header.header .input-group.search .btn-default { background: var(--cr-surface); border-color: var(--cr-line); color: var(--cr-ink); }
body.cr-dark.cr-client .main-navbar-wrapper,
body.cr-dark.cr-client .navbar.main-navbar-wrapper { background: #1B0920 !important; border-bottom-color: var(--cr-line); }
body.cr-dark.cr-client header.header .topbar { background-color: #1B0920; border-bottom-color: var(--cr-line); }
body.cr-dark .card, body.cr-dark .panel, body.cr-dark .modal-content,
body.cr-dark .dropdown-menu, body.cr-dark .list-group-item, body.cr-dark .popover,
body.cr-dark.cr-client .card, body.cr-dark.cr-client .panel, body.cr-dark.cr-client .modal-content,
body.cr-dark.cr-client .dropdown-menu, body.cr-dark.cr-client .list-group-item {
  background-color: var(--cr-surface);
  color: var(--cr-soft);
  border-color: var(--cr-line);
}
body.cr-dark .card .card-header, body.cr-dark.cr-client .card .card-header { background: var(--cr-surface-2); border-color: var(--cr-line); color: var(--cr-heading); }
body.cr-dark .form-control, body.cr-dark .custom-select, body.cr-dark select.form-control,
body.cr-dark textarea.form-control, body.cr-dark .field,
body.cr-dark.cr-client .form-control, body.cr-dark.cr-client .custom-select,
body.cr-dark.cr-client select.form-control, body.cr-dark.cr-client textarea.form-control, body.cr-dark.cr-client .field {
  background-color: var(--cr-tint) !important;
  color: var(--cr-ink) !important;
  border-color: var(--cr-line);
}
body.cr-dark .input-group-text, body.cr-dark.cr-client .input-group-text { background: var(--cr-surface-2); border-color: var(--cr-line); color: var(--cr-muted); }
body.cr-dark .btn-default, body.cr-dark.cr-client .btn-default { background: var(--cr-surface); border-color: var(--cr-line); color: var(--cr-ink); }
body.cr-dark .table { color: var(--cr-soft); }
body.cr-dark .table td, body.cr-dark .table th { border-color: var(--cr-line-2); }
body.cr-dark .page-link { background: var(--cr-surface); border-color: var(--cr-line); }
body.cr-dark .text-muted { color: var(--cr-muted) !important; }
body.cr-dark .cr-b-banner { background: linear-gradient(120deg, #24102A 0%, #331226 55%, #2A1136 100%); }
body.cr-dark .cr-banner-art svg rect[fill="#fff"], body.cr-dark .cr-banner-art svg circle[fill="#fff"] { fill: #2C1631; }
body.cr-dark .cr-stat-circle.c1 { background: rgba(124, 77, 216, .18); color: #C9AAF5; }
body.cr-dark .cr-stat-circle.c2 { background: rgba(14, 159, 134, .16); color: #7DE8D2; }
body.cr-dark .cr-stat-circle.c3 { background: rgba(201, 138, 0, .16); color: #F5CD7E; }
body.cr-dark .cr-stat-circle.c4 { background: rgba(216, 41, 99, .18); color: #FF9DBF; }
body.cr-dark .label.status.status-active { background: rgba(31, 206, 143, .16) !important; color: #7DF0C4 !important; }
body.cr-dark .label.status.status-open, body.cr-dark .label.status.status-customer-reply { background: rgba(216, 41, 99, .22) !important; color: #FF9DBF !important; }
body.cr-dark .alert-info { background: rgba(182, 120, 232, .13); border-color: rgba(182, 120, 232, .38); color: #E2C8F7; }
body.cr-dark .alert-success { background: rgba(31, 206, 143, .12); border-color: rgba(31, 206, 143, .35); color: #9BF0D2; }
body.cr-dark .alert-danger { background: rgba(217, 83, 79, .14); border-color: rgba(217, 83, 79, .4); color: #FFB4B1; }
body.cr-dark .alert-warning { background: rgba(240, 173, 78, .13); border-color: rgba(240, 173, 78, .38); color: #FFD9A0; }
body.cr-dark footer#footer.footer, body.cr-dark footer.footer,
body.cr-dark.cr-client footer#footer.footer { background: #0F020F !important; }
body.cr-dark .cr-dm-btn { background: var(--cr-surface); color: #FFD9A0; }
body.cr-dark .cr-hcard, body.cr-dark .cr-finder { background: var(--cr-surface); border-color: var(--cr-line); }
body.cr-dark .cr-techstrip { background: var(--cr-surface); border-color: var(--cr-line); }
body.cr-dark .cr-techstrip span b { color: var(--cr-ink); }
body.cr-dark .cr-svc-card-top, body.cr-dark.cr-client .cr-svc-card-top { background: var(--cr-surface-2); }
body.cr-dark .crf-section, body.cr-dark .crb-panel, body.cr-dark .crc-plan { background: var(--cr-surface); border-color: var(--cr-line); }

/* dark: ticket + domains pieces */
body.cr-dark #ticketReplyContainer,
body.cr-dark .cr-tk-new-card { background: var(--cr-surface); border-color: var(--cr-line); }
body.cr-dark .cr-chat-bubble { background: var(--cr-surface-2); border-color: var(--cr-line); }
body.cr-dark .cr-chat-row.is-client .cr-chat-bubble { background: rgba(187, 31, 85, .16); border-color: rgba(187, 31, 85, .4); }
body.cr-dark .cr-chat-role { background: rgba(255, 255, 255, .12); color: #E2C8F7; }
body.cr-dark .cr-chat-row.is-staff .cr-chat-role { background: var(--cr-grad); color: #fff; }
body.cr-dark .btn.cr-tk-btn-reply { background: #fff; color: var(--cr-plum); }
body.cr-dark .btn.cr-tk-btn-reply:hover { background: #FFE9F2; }
body.cr-dark.cr-page-clientareadomains #domainForm .btn-group .btn { background: var(--cr-surface); color: var(--cr-soft); border-color: var(--cr-line); }
body.cr-dark.cr-page-clientareadomains #domainForm .btn-group .btn:hover { background: rgba(187, 31, 85, .18); color: #FF9AC0; }
body.cr-dark .cr-tk-new-card .custom-file-label { background: var(--cr-surface-2); border-color: var(--cr-line); }
body.cr-dark .cr-tk-new-card .custom-file-label::after { background: var(--cr-line); color: var(--cr-ink); }

/* ============================================================
   INVOICE — standalone branded document
   ============================================================ */
body.cr-inv-page {
  background: var(--cr-bg);
  font-family: var(--cr-f-body);
  color: var(--cr-ink);
  padding: 34px 18px 60px;
}
.cr-inv-wrap { max-width: 980px; margin: 0 auto; }

/* hero */
.cr-inv-hero {
  background: linear-gradient(135deg, var(--cr-plum), #5F1B45 55%, var(--cr-magenta));
  border-radius: 26px;
  padding: 28px 30px 30px;
  color: #fff;
  box-shadow: 0 20px 44px rgba(54, 11, 58, .26);
  margin-bottom: 22px;
}
.cr-inv-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.cr-inv-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cr-inv-brand img { max-height: 40px; width: auto; filter: brightness(0) invert(1); }
.cr-inv-brand-name {
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .9);
  padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(255, 255, 255, .28);
}
.cr-inv-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}
.cr-inv-status.st-paid { background: #1FCE8F; border-color: #1FCE8F; color: #04301F; }
.cr-inv-status.st-unpaid { background: #FFD9A0; border-color: #FFD9A0; color: #6B3D00; }
.cr-inv-status.st-refunded,
.cr-inv-status.st-cancelled { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .2); }

.cr-inv-hero-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 22px;
}
.cr-inv-eyebrow { display: block; font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.cr-inv-num {
  font-family: var(--cr-f-disp);
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  margin: 2px 0 12px;
  line-height: 1.2;
  direction: ltr;
  display: inline-block;
}
.cr-inv-dates { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; font-size: .84rem; color: rgba(255, 255, 255, .82); }
.cr-inv-dates i { color: #FF9AC0; margin-inline-end: 6px; }
.cr-inv-dates b { color: #fff; font-weight: 700; }
.cr-inv-totalbox {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 20px;
  padding: 18px 24px;
  min-width: 240px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.cr-inv-totalbox small { display: block; font-size: .78rem; color: rgba(255, 255, 255, .75); font-weight: 600; }
.cr-inv-totalbox b {
  display: block;
  font-family: var(--cr-f-disp);
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
  direction: ltr;
}
/* payment strip: works for both real gateway buttons and offline instructions */
.cr-inv-payrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.cr-inv-payrow-ico {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  display: grid;
  place-items: center;
  color: #fff;
}
.cr-inv-payrow-body {
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, .92);
  font-size: .92rem;
  line-height: 1.9;
}
.cr-inv-payrow-body p:last-child,
.cr-inv-payrow-body form { margin-bottom: 0; }
.cr-inv-payrow-body .btn,
.cr-inv-payrow-body input[type="submit"],
.cr-inv-payrow-body button {
  background: #fff !important;
  color: var(--cr-plum) !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 11px 30px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.cr-inv-payrow-body .btn:hover,
.cr-inv-payrow-body input[type="submit"]:hover { background: #FFE9F2 !important; color: var(--cr-magenta) !important; }

/* info cards */
.cr-inv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.cr-inv-card {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--cr-shadow);
}
.cr-inv-card > header,
.cr-inv-credit > header,
.cr-inv-notes > header {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: .92rem;
  color: var(--cr-heading);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--cr-line-2);
}
.cr-inv-card > header i,
.cr-inv-credit > header i,
.cr-inv-notes > header i { color: var(--cr-magenta); }
.cr-inv-card address { margin: 0; font-size: .87rem; line-height: 1.95; color: var(--cr-soft); font-style: normal; }
.cr-inv-card address b { color: var(--cr-heading); }
.cr-inv-paymethod { font-size: .9rem; color: var(--cr-soft); font-weight: 600; }
.cr-inv-paymethod select.form-control { height: 44px; border-radius: 12px; }

/* apply credit + notes */
.cr-inv-credit,
.cr-inv-notes {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: var(--cr-shadow);
}
.cr-inv-credit p { font-size: .88rem; color: var(--cr-soft); margin-bottom: 12px; }
.cr-inv-credit label { font-size: .84rem; font-weight: 700; color: var(--cr-heading); margin-bottom: 8px; display: block; }
.cr-inv-credit-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cr-inv-credit-row .form-control { flex: 1 1 160px; height: 46px; border-radius: 12px; }
.cr-inv-credit-row .btn {
  height: 46px;
  border-radius: 12px;
  padding: 0 24px;
  background: var(--cr-green);
  border: 0;
  color: #fff;
  font-weight: 700;
}
.cr-inv-notes div { font-size: .88rem; color: var(--cr-soft); line-height: 1.9; }

/* items + transactions */
.cr-inv-items {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 22px;
  box-shadow: var(--cr-shadow);
  overflow: hidden;
  margin-bottom: 22px;
  position: relative;
}
/* settled/void stamp */
.cr-inv-stamp {
  position: absolute;
  top: 46%;
  inset-inline-start: 8%;
  transform: rotate(-14deg);
  border: 4px double #B03330;
  color: #B03330;
  opacity: .16;
  border-radius: 12px;
  padding: 8px 26px;
  font-family: var(--cr-f-disp);
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: 2px;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
.cr-inv-stamp.st-paid { border-color: #0B7A51; color: #0B7A51; }
[dir="rtl"] .cr-inv-stamp { letter-spacing: 0; }
.cr-inv-items-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--cr-line-2);
  background: var(--cr-surface-2);
}
.cr-inv-items-head h2 {
  font-family: var(--cr-f-disp);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--cr-heading);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cr-inv-items-head h2 i { color: var(--cr-magenta); }
.cr-inv-count {
  margin-inline-start: auto;
  background: var(--cr-grad);
  color: #fff;
  border-radius: 999px;
  min-width: 26px;
  height: 26px;
  padding: 0 9px;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 700;
}
.cr-inv-table { width: 100%; margin: 0; border-collapse: collapse; }
.cr-inv-table th {
  text-align: start;
  padding: 13px 24px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--cr-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--cr-line-2);
}
.cr-inv-table td {
  padding: 15px 24px;
  font-size: .9rem;
  color: var(--cr-ink);
  border-bottom: 1px solid var(--cr-line-2);
  vertical-align: middle;
}
.cr-inv-table tbody tr:last-child td { border-bottom: 0; }
.cr-inv-table tbody tr:hover td { background: var(--cr-surface-2); }
.cr-inv-table .num { text-align: end; white-space: nowrap; font-weight: 700; direction: ltr; }
.cr-inv-table th.num { text-align: end; }
.cr-inv-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cr-grad);
  margin-inline-end: 10px;
  vertical-align: middle;
}
.cr-inv-empty { text-align: center !important; color: var(--cr-muted); font-size: .86rem; padding: 26px !important; }
.cr-inv-empty i { display: block; font-size: 1.6rem; color: var(--cr-lav); margin-bottom: 8px; }

/* totals */
.cr-inv-totals {
  padding: 18px 24px 22px;
  background: var(--cr-surface-2);
  border-top: 1px solid var(--cr-line-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.cr-inv-trow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: .9rem;
  color: var(--cr-soft);
  max-width: 420px;
  margin-inline-start: auto;
  width: 100%;
}
.cr-inv-trow b { font-weight: 700; color: var(--cr-heading); direction: ltr; }
.cr-inv-grand {
  background: var(--cr-grad);
  color: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  margin-top: 6px;
  font-size: 1rem;
}
.cr-inv-grand span { font-weight: 700; }
.cr-inv-grand b { color: #fff; font-size: 1.2rem; font-family: var(--cr-f-disp); }
.cr-inv-balance { font-weight: 700; color: var(--cr-heading); }
.cr-inv-taxnote { padding: 0 24px 18px; margin: 0; font-size: .8rem; color: var(--cr-muted); }

/* actions */
.cr-inv-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.cr-inv-back { color: var(--cr-plum); font-weight: 700; font-size: .9rem; text-decoration: none; }
.cr-inv-back:hover { color: var(--cr-magenta); }
.cr-inv-back i { margin-inline-end: 6px; }
[dir="ltr"] .cr-inv-back i { transform: scaleX(-1); }
.cr-inv-actions-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.cr-inv-btn {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line-2);
  color: var(--cr-soft);
  border-radius: 12px;
  padding: 10px 22px;
  font-weight: 600;
}
.btn.cr-inv-btn:hover { border-color: rgba(187, 31, 85, .4); color: var(--cr-magenta); }
.btn.cr-inv-btn-primary {
  background: var(--cr-grad);
  border: 0;
  color: #fff;
  box-shadow: 0 8px 20px rgba(187, 31, 85, .26);
}
.btn.cr-inv-btn-primary:hover { filter: brightness(1.07); color: #fff; }

/* footer */
.cr-inv-footer {
  margin-top: 34px;
  background: var(--cr-plum);
  border-radius: 24px;
  padding: 30px 32px 20px;
  color: #EAD9E6;
}
.cr-inv-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr;
  gap: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.cr-inv-footer-brand img { max-height: 40px; width: auto; margin-bottom: 12px; filter: brightness(0) invert(1); }
.cr-inv-footer-brand p { font-size: .85rem; line-height: 1.9; color: rgba(234, 217, 230, .78); margin: 0; }
.cr-inv-footer-col h5 {
  font-family: var(--cr-f-disp);
  font-size: .9rem;
  font-weight: 700;
  color: var(--cr-pink);
  margin: 0 0 12px;
}
.cr-inv-footer-col span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(234, 217, 230, .85);
  font-size: .85rem;
  padding: 5px 0;
}
.cr-inv-footer-col span i { color: var(--cr-pink); width: 16px; text-align: center; flex: none; }
.cr-inv-footer-col span b { font-weight: 600; color: #fff; }
.cr-inv-thanks {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cr-f-disp);
  font-weight: 700;
  font-size: .96rem;
  color: #fff;
  margin: 0 0 10px;
}
.cr-inv-thanks i { color: var(--cr-magenta); }
.cr-inv-legal { font-size: .78rem; line-height: 1.85; color: rgba(234, 217, 230, .6); margin: 0; }
.cr-inv-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 16px;
  font-size: .78rem;
  color: rgba(234, 217, 230, .62);
}
.cr-inv-ref { direction: ltr; }

@media (max-width: 860px) {
  .cr-inv-footer-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .cr-inv-hero { padding: 22px; }
  .cr-inv-num { font-size: 2rem; }
  .cr-inv-totalbox { width: 100%; }
  .cr-inv-table th, .cr-inv-table td { padding-inline: 14px; }
  .cr-inv-trow { max-width: none; }
  .cr-inv-brand-name { display: none; }
  .cr-inv-stamp { font-size: 1.5rem; }
}

/* dark */
body.cr-dark.cr-inv-page { background: var(--cr-bg); }
body.cr-dark .cr-inv-card,
body.cr-dark .cr-inv-items,
body.cr-dark .cr-inv-credit,
body.cr-dark .cr-inv-notes { background: var(--cr-surface); border-color: var(--cr-line); }
body.cr-dark .cr-inv-items-head,
body.cr-dark .cr-inv-totals { background: var(--cr-surface-2); }
body.cr-dark .cr-inv-table tbody tr:hover td { background: rgba(255, 255, 255, .04); }
body.cr-dark .btn.cr-inv-btn { background: var(--cr-surface); color: var(--cr-soft); border-color: var(--cr-line); }
body.cr-dark .cr-inv-back { color: #FF9AC0; }

/* print — flat, ink-friendly */
@media print {
  body.cr-inv-page { background: #fff !important; padding: 0; color: #000; }
  body.cr-inv-page.cr-dark { background: #fff !important; }
  .cr-inv-hero {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none;
    border: 2px solid #360B3A;
    border-radius: 14px;
  }
  .cr-inv-brand img { filter: none; }
  .cr-inv-num, .cr-inv-totalbox b, .cr-inv-dates b, .cr-inv-brand-name { color: #360B3A !important; }
  .cr-inv-eyebrow, .cr-inv-dates, .cr-inv-totalbox small { color: #444 !important; }
  .cr-inv-totalbox { background: #F6F1F6 !important; border: 1px solid #ccc; }
  .cr-inv-status { background: #fff !important; color: #360B3A !important; border: 1px solid #360B3A; }
  .cr-inv-card, .cr-inv-items, .cr-inv-notes { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .cr-inv-grand { background: #F6F1F6 !important; color: #360B3A !important; border: 1px solid #360B3A; }
  .cr-inv-grand b { color: #360B3A !important; }
  .cr-inv-items-head, .cr-inv-totals { background: #FAFAFA !important; }
  .cr-inv-brand-name { border-inline-start-color: #ccc; }
  .cr-inv-stamp { opacity: .28; }
  .cr-inv-footer {
    background: #fff !important;
    color: #444 !important;
    border-top: 2px solid #360B3A;
    border-radius: 0;
    padding-inline: 0;
    break-inside: avoid;
  }
  .cr-inv-footer-brand img { filter: none; }
  .cr-inv-footer-brand p, .cr-inv-legal, .cr-inv-footer-bottom { color: #666 !important; }
  .cr-inv-thanks { color: #360B3A !important; }
  .cr-inv-footer-grid { border-bottom-color: #ddd; }
  .cr-inv-footer-col h5 { color: #360B3A !important; }
  .cr-inv-footer-col span { color: #444 !important; }
  .cr-inv-footer-col span b { color: #360B3A !important; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cr-reveal { opacity: 1; transform: none; transition: none; }
  .cr-hrow .track i { animation: none; width: var(--w, 60%); }
  .cr-uptime i.dot { animation: none; }
  #main-body .primary-content, .cr-dash-mark { animation: none !important; }
  /* the hero logo is an explicit, owner-controlled brand animation — it keeps
     running under reduced-motion (toggle it off from the Theme Control panel).
     Only the one-shot draw-in is settled so it doesn't replay abruptly. */
  .cr-arc { animation-duration: .01s; }
}
/* logo OFF only when the panel toggle says so */
.cr-logo-stage.cr-static .cr-arc,
.cr-logo-stage.cr-static .cr-orbit,
.cr-logo-stage.cr-static .cr-lring,
.cr-logo-stage.cr-static .cr-lcore,
.cr-logo-stage.cr-static .cr-logo-glow { animation: none !important; }
.cr-logo-stage.cr-static .cr-arc { stroke-dasharray: 78 22; opacity: 1; }