/* ========================================================================
   00. IRANSANS FONT
======================================================================== */

@font-face {
	font-family: "iransans";
	src:
		url("../fonts/IRANSansWebFaNum_Bold.woff2") format("woff2"),
		url("../fonts/IRANSansWebFaNum_Bold.woff") format("woff"),
		url("../fonts/IRANSansWebFaNum_Bold.ttf") format("truetype"),
		url("../fonts/IRANSansWebFaNum_Bold.eot?#iefix") format("embedded-opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "iransans";
	src:
		url("../fonts/IRANSansWebFaNum.woff2") format("woff2"),
		url("../fonts/IRANSansWebFaNum.woff") format("woff"),
		url("../fonts/IRANSansWebFaNum.ttf") format("truetype"),
		url("../fonts/IRANSansWebFaNum.eot?#iefix") format("embedded-opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}












 html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 3 */ }

/* Sections
   ========================================================================== */
body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;

}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1, h2, h3, h4, h5, h6 {
  margin-top: .5rem;
  margin-bottom: 1rem;
  font-family: inherit;
  font-weight: bold;
  line-height: 1.2;
  color: inherit; }

h1 {
  font-size: 2rem; }

h2 {
  font-size: 1.8rem; }

h3 {
  font-size: 1.6rem; }

h4 {
  font-size: 1.5rem; }

h5 {
  font-size: 1.25rem; }

h6 {
  font-size: 1rem; }

p {
  margin-top: 0;
  margin-bottom: .9rem; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
  white-space: pre-wrap; }

/* Text-level semantics
   ========================================================================== */
a {
  background-color: transparent;
  text-decoration: none; }
  a:hover, a:active {
     }
  a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none; }
  a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none; }
  a:not([href]):not([tabindex]):focus {
    outline: 0; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
  height: auto;
  max-width: 100%; }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

figcaption {
  font-size: 16px;
  color: #333333;
  line-height: 1.4;
  font-style: italic;
  font-weight: 400; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

/* Print
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }
  pre {
    white-space: pre-wrap !important; }
  pre,
  blockquote {
    page-break-inside: avoid;
    border: 1px solid #cccccc; }
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }

/*
DO NOT CHANGE THIS FILE
to override any of the settings in this section, add your styling code in the custom directory.
 */
/* Forms
   ========================================================================== */

  label {
    display: inline-block;
    line-height: 1.8;
    vertical-align: middle;
    font-size: 0.9em;
  }



/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 1rem;
  /* 1 */
  line-height: 1.5;
  /* 1 */
  margin: 0;
  /* 2 */ }

input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s; }
  input[type="text"]:focus,
  input[type="date"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  select:focus,
  textarea:focus {
    border-color: #333333;
    outline: 0 none; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  width: auto;
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

  button:focus,
  [type="submit"]:focus,
  [type="button"]:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color; }
  button:not(:disabled),
  [type="submit"]:not(:disabled),
  [type="button"]:not(:disabled) {
    cursor: pointer; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
  resize: vertical; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

select {
  display: block; }

/*
DO NOT CHANGE THIS FILE
to override any of the settings in this section, add your styling code in the custom directory.
 */
/* Table
   ========================================================================== */
table {
  background-color: transparent;
  width: 100%;
  margin-bottom: 15px;
  font-size: 0.9em;
  border-spacing: 0;
  border-collapse: collapse; }
  table th,
  table td {
    padding: 15px;
    line-height: 1.5;
    vertical-align: top;
    border: 1px solid #ececec; }
  table th {
    font-weight: bold; }
  table thead th,
  table tfoot th {
    font-size: 1em; }
  table caption + thead tr:first-child th,
  table caption + thead tr:first-child td,
  table caption + thead tr:first-child th,
  table caption + thead tr:first-child td,
  table colgroup + thead tr:first-child th,
  table colgroup + thead tr:first-child td,
  table colgroup + thead tr:first-child th,
  table colgroup + thead tr:first-child td,
  table thead:first-child tr:first-child th,
  table thead:first-child tr:first-child td,
  table thead:first-child tr:first-child th,
  table thead:first-child tr:first-child td {
    border-top: 1px solid #ececec; }
  table tbody > tr:nth-child(odd) > td,
  table tbody > tr:nth-child(odd) > th {
    background-color: #eeeeee; }
  table tbody tr:hover > td,
  table tbody tr:hover > th {
    background-color: #e9e9e9; }
  table tbody + tbody {
    border-top: 2px solid #ececec; }
  @media (max-width: 767px) {
    table table {
      font-size: 0.8em; }
      table table th,
      table table td {
        padding: 7px;
        line-height: 1.3; }
      table table th {
        font-weight: 400; } }



		/*
DO NOT CHANGE THIS FILE
to override any of the settings in this section, add your styling code in the custom directory.
 */
/* Lists
   ========================================================================== */
dl,
dt,
dd,
ol,
ul,
li {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }



.woocommerce-variation-price{
	text-align: center;
}


ins .woocommerce-Price-amount.amount ,.woocommerce-Price-amount.amount {
	color: #D30C5C;
	font-size: 1em;
}

del .woocommerce-Price-amount.amount {
	color: #4d4d4d;
	margin: 20px;
}


.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	color: #fff;
	background-color: #D30C5C;
}
.woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text {
	width: 150px;
}
#wc-print-button {
	display: block !important;
	border-radius: 3px;
	float: none !important;
	max-width: 150px;
    margin:20px auto  !important;
}
.woocommerce .woocommerce-order{
	max-width: 1140px;
	margin: 50px auto;
	background: #fff;
	padding: 20px;
	border-radius: 9px;
	box-shadow: 0px 0px 25px 3px rgba(184.49999999999997, 184.49999999999997, 184.49999999999997, 0.5);
}



.woocommerce span.onsale {
	min-height: 3.236em;
	min-width: 3.236em;
	padding: .2em 0.3em;
	/* font-size: 1em; */
	font-weight: 700;
	position: absolute;
	text-align: center;
	line-height: 3.236;
	top: -.5em;
	right: -.5em;
	margin: 0;
	border-radius: 5px;
	background-color: #D30C5C;
	color: #fff;
	font-size: .857em;
	z-index: 9;
}

del .woocommerce-Price-amount.amount {
	color: #4d4d4d;
	font-size: 0.95em;
}





.top_content {
	background-color: transparent;
	background-image: linear-gradient(180deg, #6a6767 0%, #FFFFFF21 100%);
	position: relative;
}

.top_content .background-overlay {
	background-image: url("https://app.classinar.ir/wp-content/uploads/2021/06/pattern-classinar.png");
	opacity: 0.1;
	transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
.center {
	text-align: center;
	align-content: center;
	align-items: center;
}
.page-title {
	color: #FFFFFF;
	font-family: "iransans", Sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 2.5em;
	margin: 30px 0px 100px 0px;
	width: 100%;
}
.classinar-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	max-width: 1140px;
}
.boxshadow {
	background: #fff;
	box-shadow: 0px 0px 25px 3px rgba(184.49999999999997, 184.49999999999997, 184.49999999999997, 0.5);
	transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
	padding: 20px 20px 20px 20px;
	border-radius: 20px;
	margin: -50px 0px 50px 0px;
	padding: 30px;
	width: 100%;
	overflow: hidden;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image a {
	border-radius: 20px;
	overflow: hidden;
}














html,
body,
button,
input,
select,
textarea,
option,
optgroup,
table {
	font-family: "iransans", Tahoma, Arial, sans-serif;
}

body :where(
	a,
	p,
	span,
	small,
	strong,
	em,
	label,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	li,
	th,
	td,
	button,
	input,
	select,
	textarea,
	option
) {
	font-family: "iransans", Tahoma, Arial, sans-serif;
}

/**
 * CLASSINAR UI DESIGN SYSTEM
 * Version: 2.0.0
 *
 * Naming contract
 * ----------------
 * Visual components: .cui-*
 * State classes:      .is-*
 * JavaScript hooks:   .js-* or data-* attributes
 *
 * Important:
 * CSS must never depend on .js-* classes.
 * When a page is migrated, old JS-bound classes stay temporarily
 * until its JavaScript is migrated in the same step.
 */


/* ========================================================================
   01. DESIGN TOKENS
======================================================================== */

:root {
	/* Brand */
	--cui-navy-900: #0f2457;
	--cui-navy-800: #173876;
	--cui-blue-600: #1769e0;
	--cui-accent-600: #d30c5c;

	/* Semantic */
	--cui-success-600: #12a879;
	--cui-warning-600: #f3a72f;
	--cui-danger-600: #dc3158;
	--cui-purple-600: #7c58d6;
	--cui-cyan-600: #23b7e5;

	/* Surfaces */
	--cui-bg: #f4f7fb;
	--cui-surface: #ffffff;
	--cui-surface-soft: #f8faff;
	--cui-surface-muted: #f4f7fb;

	/* Text */
	--cui-text: #142342;
	--cui-text-strong: #0f2457;
	--cui-text-muted: #7d899f;
	--cui-text-faint: #9aa6b8;

	/* Border */
	--cui-border: #e6ebf2;
	--cui-border-strong: #d8e1ed;

	/* Soft semantic surfaces */
	--cui-blue-soft: #edf4ff;
	--cui-green-soft: #eaf9f4;
	--cui-red-soft: #fff0f3;
	--cui-purple-soft: #f2efff;
	--cui-orange-soft: #fff7e9;
	--cui-cyan-soft: #eaf8fd;

	/* Radius */
	--cui-radius-xs: 8px;
	--cui-radius-sm: 10px;
	--cui-radius-md: 12px;
	--cui-radius-lg: 14px;
	--cui-radius-xl: 18px;
	--cui-radius-2xl: 22px;
	--cui-radius-pill: 999px;

	/* Spacing */
	--cui-space-1: 4px;
	--cui-space-2: 8px;
	--cui-space-3: 12px;
	--cui-space-4: 16px;
	--cui-space-5: 20px;
	--cui-space-6: 24px;
	--cui-space-7: 32px;

	/* Shadows */
	--cui-shadow-sm: 0 7px 22px rgba(24, 42, 82, .05);
	--cui-shadow-md: 0 10px 30px rgba(24, 42, 82, .07);
	--cui-shadow-lg: 0 18px 42px rgba(24, 42, 82, .13);
	--cui-shadow-modal: 0 25px 70px rgba(14, 30, 65, .20);

	/* Controls */
	--cui-control-height: 46px;
	--cui-control-height-mobile: 44px;

	/* Layout */
	--cui-page-max: 1500px;
	--cui-dashboard-max: 1440px;
	--cui-dashboard-gutter: clamp(18px, 2vw, 30px);
	--cui-shell-sidebar: 15rem;
	--cui-shell-sidebar-collapsed: 5rem;
	--cui-shell-header: 72px;
	--cui-shell-mobile-header: 64px;
	--cui-shell-bottom-nav: 64px;

	/* Motion */
	--cui-transition-fast: .18s ease;
	--cui-transition: .22s ease;

	/* Compatibility aliases for current Classinar CSS.
	   These can be removed after all pages are migrated. */
	--cd-navy: var(--cui-navy-900);
	--cd-blue: var(--cui-blue-600);
	--cd-accent: var(--cui-accent-600);
	--cd-bg: var(--cui-bg);
	--cd-card: var(--cui-surface);
	--cd-text: var(--cui-text);
	--cd-muted: var(--cui-text-muted);
	--cd-border: var(--cui-border);
	--cd-radius: var(--cui-radius-xl);
	--cd-shadow: var(--cui-shadow-md);

	--bbb-modern-navy: var(--cui-navy-900);
	--bbb-modern-navy-2: var(--cui-navy-800);
	--bbb-modern-blue: var(--cui-blue-600);
	--bbb-modern-accent: var(--cui-accent-600);
	--bbb-modern-green: var(--cui-success-600);
	--bbb-modern-orange: var(--cui-warning-600);
	--bbb-modern-danger: var(--cui-danger-600);
	--bbb-modern-bg: var(--cui-bg);
	--bbb-modern-card: var(--cui-surface);
	--bbb-modern-text: var(--cui-text);
	--bbb-modern-muted: var(--cui-text-muted);
	--bbb-modern-border: var(--cui-border);
	--bbb-modern-soft-blue: var(--cui-blue-soft);
	--bbb-modern-soft-green: var(--cui-green-soft);
	--bbb-modern-soft-red: var(--cui-red-soft);
	--bbb-modern-soft-purple: var(--cui-purple-soft);
	--bbb-modern-radius: var(--cui-radius-xl);
	--bbb-modern-shadow: var(--cui-shadow-md);
	--bbb-modern-shadow-lg: var(--cui-shadow-modal);

	--bcl-navy: var(--cui-navy-900);
	--bcl-blue: var(--cui-blue-600);
	--bcl-accent: var(--cui-accent-600);
	--bcl-bg: var(--cui-bg);
	--bcl-card: var(--cui-surface);
	--bcl-text: var(--cui-text);
	--bcl-muted: var(--cui-text-muted);
	--bcl-border: var(--cui-border);
	--bcl-green: var(--cui-success-600);
	--bcl-orange: var(--cui-warning-600);
	--bcl-purple: var(--cui-purple-600);
	--bcl-danger: var(--cui-danger-600);
	--bcl-radius: var(--cui-radius-xl);
	--bcl-shadow: var(--cui-shadow-md);
	--bcl-shadow-hover: var(--cui-shadow-lg);

	--cd-shell-sidebar-width: var(--cui-shell-sidebar);
	--cd-shell-sidebar-collapsed: var(--cui-shell-sidebar-collapsed);
	--cd-shell-header-height: var(--cui-shell-header);
	--cd-shell-mobile-header-height: var(--cui-shell-mobile-header);
	--cd-shell-bottom-nav-height: var(--cui-shell-bottom-nav);
}


/* ========================================================================
   02. PAGE FOUNDATION
======================================================================== */

.cui-page,
.cui-page * {
	box-sizing: border-box;
}

.cui-page {
	width: 100%;
	max-width: var(--cui-page-max);
	margin: 0 auto;
	padding: 22px;
	direction: rtl;
	color: var(--cui-text);
	font-family: inherit;
}

.cui-page button,
.cui-page input,
.cui-page select,
.cui-page textarea {
	font-family: inherit;
}


/* ========================================================================
   03. LAYOUT PRIMITIVES
======================================================================== */

.cui-grid {
	display: grid;
	gap: var(--cui-space-4);
}

.cui-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cui-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cui-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cui-row {
	display: flex;
	align-items: center;
	gap: var(--cui-space-3);
}

.cui-row--between {
	justify-content: space-between;
}

.cui-stack {
	display: flex;
	flex-direction: column;
	gap: var(--cui-space-3);
}

.cui-full {
	width: 100%;
}


/* ========================================================================
   04. CARD / SECTION
======================================================================== */

.cui-card {
	width: 100%;
	padding: var(--cui-space-5);
	background: var(--cui-surface);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-xl);
	box-shadow: var(--cui-shadow-md);
}

.cui-card--flat {
	box-shadow: none;
}

.cui-card--soft {
	background: var(--cui-surface-soft);
	box-shadow: none;
}

.cui-section {
	width: 100%;
	padding: var(--cui-space-4);
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
}

.cui-section + .cui-section {
	margin-top: var(--cui-space-4);
}


/* ========================================================================
   05. SECTION HEADING
======================================================================== */

.cui-section-head {
	display: flex;
	align-items: center;
	gap: var(--cui-space-3);
	margin-bottom: var(--cui-space-4);
	padding-bottom: var(--cui-space-3);
	border-bottom: 1px solid var(--cui-border);
}

.cui-section-head__icon,
.cui-icon-box {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 11px;
	font-size: 14px;
}

.cui-section-head__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cui-section-head__copy strong {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.7;
}

.cui-section-head__copy small {
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}


/* ========================================================================
   06. FORM SYSTEM
======================================================================== */

.cui-form {
	width: 100%;
}

.cui-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top:20px;
}

.cui-field {
	min-width: 0;
	width: 100%;
	margin: 0;
}

.cui-field--full {
	grid-column: 1 / -1;
}

.cui-field > label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 7px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.7;
}

.cui-field__required {
	color: var(--cui-danger-600);
	font-style: normal;
}

.cui-control {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--cui-control-height);
}

.cui-control__icon {
	position: absolute;
	top: 50%;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 31px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 9px;
	font-size: 12px;
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
}

.cui-control__icon i {
	position: static;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: 1;
}

.cui-input,
.cui-select,
.cui-textarea {
	display: block;
	width: 100%;
	margin: 0;
	color: var(--cui-text);
	background: var(--cui-surface);
	border: 1px solid var(--cui-border-strong);
	border-radius: var(--cui-radius-md);
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	outline: none;
	transition:
		border-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast),
		background-color var(--cui-transition-fast);
}

.cui-input,
.cui-select {
	height: var(--cui-control-height);
	min-height: var(--cui-control-height);
	padding: 8px 58px 8px 42px;
	color: var(--cui-text-strong);
	background-color: #fff;
	border: 1px solid var(--cui-border-strong);
	border-radius: var(--cui-radius-md);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.65;
	text-align: right;
	text-indent: 0;
	direction: rtl;
	cursor: pointer;

}

.cui-textarea {
	min-height: 110px;
	padding: 12px;
	resize: vertical;
}

.cui-input:hover,
.cui-select:hover,
.cui-textarea:hover {
	border-color: #cbd8e8;
}

.cui-input:focus,
.cui-select:focus,
.cui-textarea:focus {
	background: #fff;
	border-color: rgba(23, 105, 224, .55);
	box-shadow: 0 0 0 4px rgba(23, 105, 224, .08);
}

.cui-input::placeholder,
.cui-textarea::placeholder {
	color: var(--cui-text-faint);
	font-weight: 500;
}

.cui-input:disabled,
.cui-select:disabled,
.cui-textarea:disabled {
	color: #8996aa;
	background: #f1f4f8;
	border-color: #e2e7ef;
	cursor: not-allowed;
	opacity: 1;
}

.cui-select {
	padding-left: 38px;
	direction: rtl;
	text-align: right;
	cursor: pointer;
}

.cui-select option {
	color: var(--cui-text);
	background: #fff;
	font-family: inherit;
}

.cui-field__help,
.cui-field__error {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.8;
}

.cui-field__help {
	color: var(--cui-text-muted);
}

.cui-field__error {
	color: var(--cui-danger-600);
}

.cui-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--cui-space-2);
	margin-top: var(--cui-space-5);
	padding-top: var(--cui-space-4);
	border-top: 1px solid var(--cui-border);
}



@media (max-width: 767px) {
.cui-form-grid {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
}




/* ========================================================================
   07. BUTTON SYSTEM
======================================================================== */

.cui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	margin: 0;
	padding: 8px 16px;
	color: var(--cui-text);
	background: var(--cui-surface);
	border: 1px solid var(--cui-border);
	border-radius: 11px;
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		border-color var(--cui-transition-fast),
		color var(--cui-transition-fast);
}

.cui-btn:hover {
	transform: translateY(-1px);
}

.cui-btn:focus-visible {
	outline: 3px solid rgba(23, 105, 224, .14);
	outline-offset: 2px;
}

.cui-btn:disabled,
.cui-btn.is-disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

.cui-btn--primary {
	color: #fff;
	background: linear-gradient(135deg, var(--cui-blue-600), #1257be);
	border-color: transparent;
	box-shadow: 0 7px 17px rgba(23, 105, 224, .20);
}

.cui-btn--primary:hover {
	color: #fff;
	box-shadow: 0 10px 23px rgba(23, 105, 224, .27);
}

.cui-btn--navy {
	color: #fff;
	background: linear-gradient(145deg, var(--cui-navy-800), var(--cui-navy-900));
	border-color: transparent;
}

.cui-btn--accent {
	color: #fff;
	background: linear-gradient(145deg, var(--cui-accent-600), #b3084d);
	border-color: transparent;
	box-shadow: 0 9px 22px rgba(211, 12, 92, .22);
}

.cui-btn--success {
	color: #087451;
	background: var(--cui-green-soft);
	border-color: #d5efe5;
}

.cui-btn--danger {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
	border-color: #ffd6df;
}

.cui-btn--soft {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-color: #dce9fb;
}

.cui-btn--ghost {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.cui-btn--block {
	width: 100%;
}

.cui-btn--icon {
	width: 42px;
	min-width: 42px;
	height: 42px;
	min-height: 42px;
	padding: 0;
}


/* ========================================================================
   08. BADGE / STATUS
======================================================================== */

.cui-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 28px;
	padding: 5px 9px;
	color: var(--cui-text-muted);
	background: var(--cui-surface-muted);
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
}

.cui-badge--blue {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
}

.cui-badge--green {
	color: #087b58;
	background: var(--cui-green-soft);
}

.cui-badge--purple {
	color: #6842c3;
	background: var(--cui-purple-soft);
}

.cui-badge--orange {
	color: #9c6509;
	background: var(--cui-orange-soft);
}

.cui-badge--red {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
}


/* ========================================================================
   09. ALERT / NOTICE
======================================================================== */

.cui-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	color: #526985;
	background: var(--cui-blue-soft);
	border: 1px solid #d9e7fb;
	border-radius: var(--cui-radius-md);
}

.cui-alert__icon {
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--cui-blue-600);
	background: #fff;
	border-radius: 9px;
}

.cui-alert__copy {
	min-width: 0;
}

.cui-alert__copy strong {
	display: block;
	margin-bottom: 2px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-alert__copy p {
	margin: 0;
	color: inherit;
	font-size: 12px;
	line-height: 1.9;
}

.cui-alert--success {
	color: #356c58;
	background: var(--cui-green-soft);
	border-color: #d4eee4;
}

.cui-alert--warning {
	color: #805f22;
	background: #fff9ec;
	border-color: #f4dfae;
}

.cui-alert--danger {
	color: #94364e;
	background: var(--cui-red-soft);
	border-color: #ffd6df;
}


/* ========================================================================
   10. SWITCH
======================================================================== */

.cui-switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cui-space-3);
	width: 100%;
	min-height: 68px;
	padding: 12px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
}

.cui-switch-row__copy {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.cui-switch-row__copy strong {
	display: block;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.7;
}

.cui-switch-row__copy small {
	display: block;
	margin-top: 2px;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.7;
}

.cui-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 44px;
	width: 44px;
	height: 24px;
	margin: 0;
}

.cui-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.cui-switch__track {
	position: absolute;
	inset: 0;
	width: 44px;
	height: 24px;
	background: #d7dde7;
	border-radius: var(--cui-radius-pill);
	box-shadow: inset 0 0 0 1px rgba(89, 105, 132, .06);
	cursor: pointer;
	transition:
		background-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast);
}

.cui-switch__track::before {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(28, 44, 71, .22);
	content: "";
	transform: translateX(0);
	transition: transform var(--cui-transition-fast);
}

.cui-switch__input:checked + .cui-switch__track {
	background: #2498ef;
}

.cui-switch__input:checked + .cui-switch__track::before {
	transform: translateX(20px);
}

.cui-switch__input:focus-visible + .cui-switch__track {
	box-shadow:
		0 0 0 4px rgba(36, 152, 239, .12),
		inset 0 0 0 1px rgba(18, 116, 190, .08);
}

.cui-switch__input:disabled + .cui-switch__track {
	opacity: .55;
	cursor: not-allowed;
}



.cui-switch-control {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-width: 0;
	min-height: 42px;
	margin: 0;
	padding: 6px 10px;
	color: var(--cui-text-strong);
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
	cursor: pointer;
}

.cui-switch-control__label {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.5;
	white-space: nowrap;
}

.cui-switch-control .cui-switch {
	flex: 0 0 auto;
	margin: 0;
}

@media (max-width: 767px) {
	.cui-switch-control {
		align-self: flex-start;
		min-height: 40px;
	}
}

/* ========================================================================
   11. ACCORDION
======================================================================== */

.cui-accordion {
	width: 100%;
}

.cui-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cui-space-3);
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 9px 12px;
	color: var(--cui-text-strong);
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
	font-family: inherit;
	text-align: right;
	cursor: pointer;
}

.cui-accordion__trigger-main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.cui-accordion__trigger-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
}

.cui-accordion__trigger-copy strong {
	font-size: 12px;
	font-weight: 900;
}

.cui-accordion__trigger-copy small {
	color: var(--cui-text-muted);
	font-size: 12px;
}

.cui-accordion__arrow {
	color: #8795aa;
	font-size: 12px;
	transition: transform var(--cui-transition-fast);
}

.cui-accordion__trigger[aria-expanded="true"] .cui-accordion__arrow,
.cui-accordion.is-open .cui-accordion__arrow {
	transform: rotate(180deg);
}

.cui-accordion__panel {
	display: none;
	margin-top: 10px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
}

.cui-accordion.is-open .cui-accordion__panel,
.cui-accordion__panel.is-open {
	display: block;
}


/* ========================================================================
   12. TOOLBAR / SEARCH
======================================================================== */

.cui-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cui-space-3);
	width: 100%;
	padding: 13px;
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
	box-shadow: var(--cui-shadow-sm);
	margin-bottom: 30px;
}

.cui-search {
	position: relative;
	flex: 1 1 420px;
	max-width: 720px;
}

.cui-search__icon {
	position: absolute;
	top: 50%;
	inset-inline-end: 9px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border: 1px solid #d9e7fb;
	border-radius: 10px;
	font-size: 12px;
	transform: translateY(-50%);
	pointer-events: none;
}

.cui-search .cui-input {
	height: 50px;
	padding-inline-start: 46px;
	padding-inline-end: 58px;
	border-color: #dbe4f0;
	border-radius: 14px;
	font-size: 11;
}


/* ========================================================================
   13. TABLE
======================================================================== */

.cui-table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cui-table {
	width: 100%;
	min-width: 680px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12px;
}

.cui-table th {
	padding: 11px 10px;
	color: #536078;
	background: #f5f7fb;
	border-bottom: 1px solid #e3e8ef;
	font-weight: 900;
	white-space: nowrap;
}

.cui-table td {
	padding: 11px 10px;
	color: #39455d;
	background: #fff;
	border-bottom: 1px solid #edf0f4;
	vertical-align: middle;
}

.cui-table tr:last-child td {
	border-bottom: 0;
}


/* ========================================================================
   14. EMPTY STATE
======================================================================== */

.cui-empty {
	width: 100%;
	padding: 42px 20px;
	text-align: center;
	background: #fff;
	border: 1px dashed #d8e0ec;
	border-radius: var(--cui-radius-xl);
}

.cui-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 12px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 18px;
	font-size: 21px;
}

.cui-empty strong {
	display: block;
	margin-bottom: 6px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-empty p {
	margin: 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.9;
}


/* ========================================================================
   15. MODAL
======================================================================== */

.cui-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100dvh;
	padding: 20px;
	background: rgba(8, 19, 43, .64);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: opacity .26s ease, visibility 0s linear .30s;
}

.cui-modal.is-open,
.cui-modal.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.cui-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: calc(100dvh - 40px);
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 20px;
	box-shadow: var(--cui-shadow-modal);
	opacity: 0;
	transform: translateY(34px) scale(.985);
	transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}


.cui-modal.is-open .cui-modal__dialog,
.cui-modal.active .cui-modal__dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cui-modal__head {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 74px;
	padding: 14px 18px;
	background: linear-gradient(135deg, #f5f8ff, #fff);
	border-bottom: 1px solid var(--cui-border);
}

.cui-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 18px;
	overflow-x: hidden;
	overflow-y: auto;
}

.cui-modal__close {
	position: absolute;
	top: 17px;
	left: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	color: #8995a8;
	background: #f1f4f8;
	border: 0;
	border-radius: 11px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding:10px;
}


/* ========================================================================
   16. RESPONSIVE RULES
======================================================================== */

@media (max-width: 1100px) {

	.cui-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cui-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 767px) {

	.cui-page {
		padding: 15px;
	}



	.cui-card {
		padding: 15px;
		border-radius: 15px;
	}

	.cui-section {
		padding: 14px;
	}

	.cui-field--full {
		grid-column: auto;
	}

	.cui-input,
	.cui-select {
		height: var(--cui-control-height-mobile);
		min-height: var(--cui-control-height-mobile);
	}

	.cui-form-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.cui-form-actions .cui-btn {
		width: 100%;
	}

	.cui-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.cui-search {
		flex: 0 0 auto;
		max-width: none;
	}

	.cui-modal {
		align-items: flex-end;
		padding: 8px;
	}

	.cui-modal__dialog {
		width: 100%;
		max-height: calc(100dvh - 16px);
		border-radius: 19px 19px 13px 13px;
	}

}



@media (max-width: 767px) {
	.cui-page-hero {
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
	}

	.cui-page-hero__actions {
		width: 100%;
		margin-inline-start: 0;
	}

	.cui-page-hero__actions > .cui-btn:only-child {
		width: 100%;
	}
}


/* ========================================================================
   17. ACCESSIBILITY
======================================================================== */

.cui-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.cui-page *,
	.cui-page *::before,
	.cui-page *::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}

}
/* ========================================================================
   18. APPLICATION SHELL
   Header / Sidebar / System Notice
======================================================================== */

:root {
	--cui-shell-notice-height: 60px;
	--cui-shell-sidebar-hover: 15rem;
	--cui-z-header: 10040;
	--cui-z-sidebar-backdrop: 100050;
	--cui-z-sidebar: 100060;
	--cui-z-notice: 100080;
}


/* ------------------------------------------------------------------------
   System notice
------------------------------------------------------------------------ */

.cui-system-notice {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--cui-z-notice);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cui-space-3);
	min-height: var(--cui-shell-notice-height);
	padding: 10px 18px;
	color: #285a4a;
	background: #edf9f4;
	border-bottom: 1px solid #d4eee4;
	box-shadow: 0 6px 20px rgba(20, 56, 45, .05);
}

.cui-system-notice__content {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.cui-system-notice__icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--cui-success-600);
	background: #fff;
	border-radius: 10px;
	font-size: 14px;
}

.cui-system-notice__content strong {
	display: block;
	margin-bottom: 1px;
	color: #174f3c;
	font-size: 12px;
	font-weight: 900;
}

.cui-system-notice__text {
	color: #537567;
	font-size: 12px;
	line-height: 1.8;
}

.cui-system-notice__text p {
	margin: 0;
}

.cui-system-notice__close {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: #678479;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(68, 118, 99, .12);
	border-radius: 10px;
	font-family: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition:
		color var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		transform var(--cui-transition-fast);
}

.cui-system-notice__close:hover {
	color: #174f3c;
	background: #fff;
	transform: translateY(-1px);
}


/* ------------------------------------------------------------------------
   Header
------------------------------------------------------------------------ */

.cui-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: var(--cui-shell-sidebar);
	inset-inline-end: 0;
	z-index: var(--cui-z-header);
	height: var(--cui-shell-header);
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid var(--cui-border);
	box-shadow: 0 5px 22px rgba(27, 50, 84, .055);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition:
		inset-inline-start var(--cui-transition),
		top var(--cui-transition);
}

.cui-header.has-notice {
	inset-block-start: var(--cui-shell-notice-height);
}

.cui-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cui-space-3);
	width: 100%;
	height: 100%;
	padding: 10px 20px;
}

.cui-header__primary,
.cui-header__actions,
.cui-header__menu,
.cui-header__action,
.cui-header__chip-wrap {
	display: flex;
	align-items: center;
}

.cui-header__primary,
.cui-header__actions {
	gap: 9px;
	min-width: 0;
}

.cui-header__actions {
	justify-content: flex-end;
}

.cui-header__mobile-toggle {
	display: none;
}

.cui-header__desktop-toggle {
	display: inline-flex;
}

.cui-header__action,
.cui-header__menu {
	flex: 0 0 auto;
}

.cui-header__action-btn {
	position: relative;
	color: var(--cui-navy-800);
	background: #fff;
	border-color: var(--cui-border);
	box-shadow: 0 5px 15px rgba(24, 42, 82, .04);
}

.cui-header__action-btn:hover,
.cui-header__desktop-toggle:hover,
.cui-header__mobile-toggle:hover {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-color: #dbe8fb;
}


/* ------------------------------------------------------------------------
   Header chips
------------------------------------------------------------------------ */

.cui-header-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 5px 10px;
	color: var(--cui-text);
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
	box-shadow: 0 5px 16px rgba(24, 42, 82, .035);
	text-decoration: none;
	transition:
		transform var(--cui-transition-fast),
		border-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast);
}

.cui-header-chip:hover {
	color: var(--cui-text);
	border-color: #d6e2f2;
	box-shadow: 0 8px 20px rgba(24, 42, 82, .07);
	transform: translateY(-1px);
}

.cui-header-chip__icon {
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 9px;
	font-size: 12px;
}

.cui-header-chip__copy {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.cui-header-chip__copy small {
	color: var(--cui-text-muted);
	font-size: 10px;;
	line-height: 1.5;
}

.cui-header-chip__value {
	max-width: 170px;
	overflow: hidden;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.6;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ------------------------------------------------------------------------
   Count badge
------------------------------------------------------------------------ */

.cui-count-badge {
	position: absolute;
	inset-block-start: -5px;
	inset-inline-end: -5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	color: #fff;
	background: var(--cui-accent-600);
	border: 2px solid #fff;
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

.cui-count-badge.is-wide {
	min-width: 23px;
}

.cui-count-badge--inline,
.cui-count-badge--sidebar {
	position: static;
	flex: 0 0 auto;
	min-width: 21px;
	height: 21px;
	margin-inline-start: auto;
	border: 0;
	font-size: 10px;;
}


/* ------------------------------------------------------------------------
   Support dropdown
------------------------------------------------------------------------ */

.cui-header-dropdown {
	position: fixed;
	z-index: calc(var(--cui-z-header) + 10);
	display: none;
	flex-direction: column;
	width: min(360px, calc(100vw - 24px));
	max-height: min(520px, calc(100dvh - 100px));
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: 16px;
	box-shadow: var(--cui-shadow-lg);
	overflow: hidden;
}

.cui-header-dropdown.is-open {
	display: flex;
}

.cui-header-dropdown__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px;
	background: linear-gradient(135deg, #f6f9ff, #fff);
	border-bottom: 1px solid var(--cui-border);
}

.cui-header-dropdown__header > div {
	min-width: 0;
}

.cui-header-dropdown__header strong {
	display: block;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-header-dropdown__header span {
	display: block;
	margin-top: 2px;
	color: var(--cui-text-muted);
	font-size: 12px;
}

.cui-header-dropdown__header span i{
	font-size: 36px;
}

.cui-header-dropdown__icon {
	flex-basis: 38px;
	width: 38px;
	height: 38px;
}

.cui-header-dropdown__list {
	flex: 1 1 auto;
	min-height: 0;
	padding: 7px;
	overflow-y: auto;
}

.cui-header-dropdown__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px;
	color: var(--cui-text);
	border-radius: 11px;
	text-decoration: none;
	transition: background-color var(--cui-transition-fast);
}

.cui-header-dropdown__item:hover {
	color: var(--cui-text);
	background: var(--cui-surface-soft);
}

.cui-header-dropdown__item-icon {
	flex-basis: 34px;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	font-size: 12px;
}

.cui-header-dropdown__item-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.cui-header-dropdown__item-copy strong {
	display: block;
	overflow: hidden;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-header-dropdown__item-copy small {
	display: block;
	margin-top: 2px;
	color: var(--cui-text-muted);
	font-size: 12px;
}

.cui-header-dropdown__empty {
	padding: 28px 18px;
	text-align: center;
}

.cui-header-dropdown__empty > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 9px;
	color: var(--cui-success-600);
	background: var(--cui-green-soft);
	border-radius: 14px;
	font-size: 17px;
}

.cui-header-dropdown__empty strong {
	display: block;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-header-dropdown__empty p {
	margin: 4px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-header-dropdown__footer {
	padding: 10px 13px;
	background: #fbfcfe;
	border-top: 1px solid var(--cui-border);
}

.cui-header-dropdown__footer a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
}


/* =========================================================
   Support dropdown mobile drawer
========================================================= */

@media (max-width: 768px) {

    .cui-header-dropdown {

        position: fixed;

        top: 70px;
        right: 12px;
        left: 12px;

        width: auto;

        max-height: calc(100dvh - 90px);

        border-radius: 20px;

        transform: translateY(-20px);

        opacity: 0;

        visibility: hidden;

        display: flex;

        transition:
            transform .25s ease,
            opacity .25s ease,
            visibility .25s ease;

        box-shadow:
            0 20px 50px rgba(0,0,0,.18);

    }


    .cui-header-dropdown.is-open {

        transform: translateY(0);

        opacity: 1;

        visibility: visible;

    }


    .cui-header-dropdown__header {

        padding: 16px;

    }


    .cui-header-dropdown__list {

        max-height: calc(100dvh - 230px);

        overflow-y: auto;

    }


    .cui-header-dropdown__item {

        padding: 13px 10px;

    }


    .cui-header-dropdown__footer {

        padding: 14px;

    }

}

/* ------------------------------------------------------------------------
   Header profile
------------------------------------------------------------------------ */

.cui-header-profile {
	flex: 0 0 auto;
}

.cui-header-profile__link {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 4px 8px;
	color: var(--cui-text);
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
	text-decoration: none;
}

.cui-header-profile__avatar {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	overflow: hidden;
	border-radius: 10px;
}

.cui-header-profile__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cui-header-profile__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cui-header-profile__copy small {
	color: var(--cui-text-muted);
	font-size: 10px;
}

.cui-header-profile__copy strong {
	max-width: 110px;
	overflow: hidden;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-header-profile__arrow {
	margin-inline-start: 2px;
	color: #8c99ac;
	font-size: 12px;
}

.cui-header-profile__mobile-icon {
	display: none;
}


/* ------------------------------------------------------------------------
   Sidebar — Navy Gradient
   همان زبان طراحی سرمه ای گرادینت نسخه قبلی، با کلاس های CUI
------------------------------------------------------------------------ */

.cui-sidebar {
	position: fixed;
	inset-block-start: 0;
	inset-block-end: 0;
	inset-inline-start: 0;
	z-index: var(--cui-z-sidebar);
	display: flex;
	flex-direction: column;
	width: var(--cui-shell-sidebar);
	direction: rtl;
	background:
		linear-gradient(
			180deg,
			#173a7a 0%,
			#102d68 42%,
			#0c2459 72%,
			#142454 100%
		);
	border: 0;
	border-inline-end: 1px solid rgba(255, 255, 255, .06);
	box-shadow: -12px 0 36px rgba(8, 23, 54, .16);
	overflow: hidden;
	transition:
		width var(--cui-transition),
		transform .28s ease,
		opacity var(--cui-transition);
}

.cui-sidebar.has-notice {
	inset-block-start: var(--cui-shell-notice-height);
}

.cui-sidebar::before,
.cui-sidebar::after {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
	content: "";
}

.cui-sidebar::before {
	top: 82px;
	right: -92px;
	width: 260px;
	height: 260px;
	background:
		radial-gradient(
			circle at center,
			rgba(79, 143, 255, .27) 0%,
			rgba(79, 143, 255, .10) 36%,
			rgba(79, 143, 255, 0) 72%
		);
}

.cui-sidebar::after {
	left: -120px;
	bottom: -96px;
	width: 300px;
	height: 300px;
	background:
		radial-gradient(
			circle at center,
			rgba(255, 255, 255, .12) 0%,
			rgba(255, 255, 255, .04) 40%,
			rgba(255, 255, 255, 0) 74%
		);
}


/* Brand */
.cui-sidebar__brand {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 0 0 var(--cui-shell-header);
	align-items: center;
	justify-content: center;
	min-height: var(--cui-shell-header);
	padding: 10px 16px;
	background: rgba(10, 31, 75, .18);
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.cui-sidebar__logo {
	display: flex;
	align-items: start;
	justify-content: start;
	width: 100%;
	height: 100%;
}

.cui-sidebar__logo img {
	width: auto;
	max-width: 145px;
	max-height: 42px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .96;
}

.cui-sidebar__logo-mini {
	display: none;
	width: 36px;
	height: 36px;
	object-fit: contain;
}


/* Body */
.cui-sidebar__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: 14px 10px 18px;
	background: transparent;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.cui-sidebar__body::-webkit-scrollbar {
	width: 5px;
}

.cui-sidebar__body::-webkit-scrollbar-track {
	background: transparent;
}

.cui-sidebar__body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .25);
	border-radius: 10px;
}


/* User card:
   در نسخه دسکتاپ مخفی است؛ همان رفتار طراحی قبلی.
   در موبایل پایین تر دوباره نمایش داده می شود. */
.cui-sidebar-user {
	display: none;
}


/* Navigation */
.cui-sidebar-nav,
.cui-sidebar-menu {
	width: 100%;
}

.cui-sidebar-menu,
.cui-sidebar-submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cui-sidebar-menu {
	padding-bottom: 18px;
}

.cui-sidebar-item {
	position: relative;
	width: 100%;
	margin: 2px 0;
	padding: 0;
}

.cui-sidebar-category {
	margin: 18px 10px 7px;
	padding: 0;
	color: rgba(228, 238, 255, .48);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
}


/* Main link */
.cui-sidebar-link {
	position: relative;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 6px 9px;
	direction: rtl;
	color: rgba(238, 245, 255, .90);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 14px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	text-align: right;
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		border-color var(--cui-transition-fast);
}



.cui-sidebar-link:hover {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .06);
}

.cui-sidebar-link.is-active,
.cui-sidebar-item.is-active > .cui-sidebar-link {
	color: #fff;
	background:
		linear-gradient(
			90deg,
			rgba(100, 163, 255, .16),
			rgba(255, 255, 255, .10)
		);
	border-color: rgba(255, 255, 255, .10);
}

.cui-sidebar-item.is-active > .cui-sidebar-link::before {
	position: absolute;
	top: 50%;
	right: -10px;
	width: 3px;
	height: 26px;
	background: #76aeff;
	border-radius: 0 4px 4px 0;
	content: "";
	transform: translateY(-50%);
}


/* Link icon */
.cui-sidebar-link__icon {
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	color: rgba(236, 244, 255, .92);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .055);
	border-radius: 13px;
	font-size: 15px;
}

.cui-sidebar-item.is-active > .cui-sidebar-link .cui-sidebar-link__icon,
.cui-sidebar-link:hover .cui-sidebar-link__icon {
	color: #fff;
	background: rgba(255, 255, 255, .14);
}

.cui-sidebar-link__icon i {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 15px;
	line-height: 1;
}

.cui-sidebar-link__icon--svg svg {
	display: block;
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* Text / side controls */
.cui-sidebar-link > span:not(.cui-sidebar-link__icon):not(.cui-count-badge):not(.cui-badge) {
	grid-column: 2;
	min-width: 0;
	color: inherit;
	text-align: right;
}

.cui-sidebar-link__side-icon,
.cui-sidebar-link__chevron,
.cui-count-badge--sidebar,
.cui-badge--purple {
	grid-column: 3;
	justify-self: end;
	margin: 0;
}

.cui-sidebar-link__side-icon,
.cui-sidebar-link__chevron {
	color: rgba(226, 237, 255, .68);
	font-size: 12px;
	transition: transform var(--cui-transition-fast);
}

.cui-sidebar-item--group.is-open > .cui-sidebar-group-toggle .cui-sidebar-link__chevron,
.cui-sidebar-item--group.is-active > .cui-sidebar-group-toggle .cui-sidebar-link__chevron {
	transform: rotate(-90deg);
}

.cui-sidebar .cui-badge--purple {
	color: #f0e8ff;
	background: rgba(197, 171, 255, .18);
	border: 1px solid rgba(216, 199, 255, .12);
}

.cui-sidebar .cui-count-badge--sidebar {
	min-width: 21px;
	height: 21px;
	color: #fff;
	background: #e64c64;
	border: 0;
}

/* ---------------------------------------------------------
   Sidebar badge
--------------------------------------------------------- */

.cui-sidebar-link__label {
	grid-column: 2;
	min-width: 0;
	overflow: hidden;
	color: inherit;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.cui-sidebar-link__badge {
	grid-column: 3;
	justify-self: end;
	align-self: center;

	width: auto;
	min-width: 0;
	min-height: 24px;

	margin: 0;
	padding: 4px 8px;

	white-space: nowrap;

	font-size: 12px;
	font-weight: 900;
	line-height: 1.4;
}


/* Badge قرمز داخل سایدبار */

.cui-sidebar .cui-sidebar-link__badge.cui-badge--red {
	color: #ffdce4;

	background:
		rgba(230, 76, 100, .17);

	border: 1px solid
		rgba(255, 190, 201, .13);

	border-radius: 999px;
}



/* Submenu */
.cui-sidebar-submenu {
	display: none;
	margin: 3px 0 7px;
	padding: 5px 46px 5px 5px;
	border-inline-start: 1px solid rgba(255, 255, 255, .13);
}

.cui-sidebar-item--group.is-open > .cui-sidebar-submenu,
.cui-sidebar-item--group.is-active > .cui-sidebar-submenu {
	display: block;
}

.cui-sidebar-sublink {
	position: relative;
	display: block;
	width: 100%;
	margin: 1px 0;
	padding: 8px 10px;
	color: rgba(232, 240, 255, .72);
	background: transparent;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	text-decoration: none;
	transition:
		color var(--cui-transition-fast),
		background-color var(--cui-transition-fast);
}

.cui-sidebar-sublink:hover,
.cui-sidebar-sublink.is-active {
	color: #fff;
	background: rgba(255, 255, 255, .07);
}

.cui-sidebar-sublink::before {
	position: absolute;
	top: 50%;
	right: -17px;
	width: 5px;
	height: 5px;
	background: rgba(255, 255, 255, .38);
	border-radius: 50%;
	content: "";
	transform: translateY(-50%);
}

.cui-sidebar-sublink:hover::before,
.cui-sidebar-sublink.is-active::before {
	background: #78afff;
}


/* Plans */
.cui-sidebar-link--plans {
	margin-top: 8px;
	color: #f3eaff;
	background:
		linear-gradient(
			90deg,
			rgba(135, 93, 214, .22),
			rgba(255, 255, 255, .07)
		);
	border-color: rgba(205, 185, 255, .13);
}

.cui-sidebar-link--plans:hover {
	color: #fff;
	background:
		linear-gradient(
			90deg,
			rgba(135, 93, 214, .30),
			rgba(255, 255, 255, .10)
		);
}

.cui-sidebar-link--plans .cui-sidebar-link__icon {
	color: #e0d1ff;
	background: rgba(255, 255, 255, .13);
}


/* Logout */
.cui-sidebar-item--logout {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .10);
}

.cui-sidebar-link--logout {
	color: #ffb3be;
}

.cui-sidebar-link--logout .cui-sidebar-link__icon {
	color: #ffc1c9;
	background: rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------------------------
   Desktop collapsed sidebar
------------------------------------------------------------------------ */

body.cui-sidebar-collapsed .cui-sidebar {
	width: var(--cui-shell-sidebar-collapsed);
}

body.cui-sidebar-collapsed .cui-header {
	inset-inline-start: var(--cui-shell-sidebar-collapsed);
}

body.cui-sidebar-collapsed .cui-shell-content {
	margin-inline-start: var(--cui-shell-sidebar-collapsed);
}

body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar__logo-full,
body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-user__copy,
body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-user__edit,
body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-category,
body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-submenu,
body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-link > span:not(.cui-sidebar-link__icon),
body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-link__side-icon,
body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-link__chevron,
body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-count-badge {
	display: none;
}

body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar__logo-mini {
	display: block;
}

body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-user {
	justify-content: center;
	padding: 8px 5px;
}

body.cui-sidebar-collapsed .cui-sidebar:not(:hover) .cui-sidebar-link {
	justify-content: center;
	padding-inline: 5px;
}

body.cui-sidebar-collapsed .cui-sidebar:hover {
	width: var(--cui-shell-sidebar-hover);
	box-shadow: -12px 0 36px rgba(8, 23, 54, .22);
}


/* ------------------------------------------------------------------------
   Sidebar backdrop
------------------------------------------------------------------------ */

.cui-sidebar-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--cui-z-sidebar-backdrop);
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background: rgba(12, 26, 53, .28);
	border: 0;
	opacity: 0;
	visibility: hidden;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
	transition:
		opacity var(--cui-transition),
		visibility var(--cui-transition);
}


/* ------------------------------------------------------------------------
   Main content offset
------------------------------------------------------------------------ */

.cui-shell-content {
	width: auto;
	min-height: calc(100dvh - var(--cui-shell-header));
	margin-block-start: var(--cui-shell-header);
	margin-inline-start: var(--cui-shell-sidebar);
	transition:
		margin-inline-start var(--cui-transition),
		margin-block-start var(--cui-transition);
}

.cui-shell-content.has-notice {
	margin-block-start: calc(
		var(--cui-shell-header) +
		var(--cui-shell-notice-height)
	);
}

.cui-shell-content--full {
	width: 100%;
	margin-inline: 0;
}


/* ------------------------------------------------------------------------
   Tablet / Mobile shell
------------------------------------------------------------------------ */

@media (max-width: 991px) {

	.cui-sidebar-user {
		display: flex;
		align-items: center;
		gap: 11px;
		flex: 0 0 auto;
		margin: 0 3px 15px;
		padding: 11px;
		background: rgba(255, 255, 255, .96);
		border: 1px solid rgba(220, 231, 247, .95);
		border-radius: 17px;
		box-shadow: 0 10px 24px rgba(8, 24, 58, .13);
	}

	.cui-sidebar-user__avatar,
	.cui-sidebar-user__avatar img {
		width: 40px;
		height: 40px;
		border-radius: 11px;
	}

	.cui-sidebar-user__copy {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-width: 0;
	}

	.cui-sidebar-user__copy strong {
		color: #173876;
		font-size: 12px;
		font-weight: 900;
	}

	.cui-sidebar-user__copy span {
		color: #8391a8;
		font-size: 12px;
	}

	.cui-sidebar-user__edit {
		display: inline-flex;
		flex: 0 0 34px;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		margin-inline-start: auto;
		color: #1769e0;
		background: #edf5ff;
		border: 1px solid #d7e6fb;
		border-radius: 11px;
		font-size: 12px;
		text-decoration: none;
	}


	.cui-header {
		inset-inline-start: 0;
		height: var(--cui-shell-mobile-header);
	}

	.cui-header.has-notice {
		inset-block-start: var(--cui-shell-notice-height);
	}

	.cui-header__inner {
		padding: 8px 12px;
	}

	.cui-header__primary,
	.cui-header__actions {
		gap: 6px;
	}

	.cui-header__desktop-toggle {
		display: none;
	}

	.cui-header__mobile-toggle {
		display: inline-flex;
	}

	.cui-header-chip {
		width: 42px;
		min-width: 42px;
		height: 42px;
		min-height: 42px;
		padding: 4px;
		justify-content: center;
	}

	.cui-header-chip__icon {
		flex-basis: 32px;
	}

	.cui-header-chip__copy {
		display: none;
	}

	.cui-header-profile__link {
		width: 42px;
		height: 42px;
		min-height: 42px;
		padding: 0;
		justify-content: center;
	}

	.cui-header-profile__avatar,
	.cui-header-profile__copy,
	.cui-header-profile__arrow {
		display: none;
	}

	.cui-header-profile__mobile-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--cui-navy-800);
		font-size: 12px;
	}

	.cui-sidebar {
		inset-block-start: 0;
		inset-inline-start: 0;
		width: min(86vw, 290px);
		height: 100dvh;
		opacity: 0;
		visibility: hidden;
		transform: translateX(105%);
		box-shadow: -14px 0 40px rgba(10, 28, 60, .18);
	}

	.cui-sidebar.has-notice {
		inset-block-start: var(--cui-shell-notice-height);
		height: calc(100dvh - var(--cui-shell-notice-height));
	}

	body.cui-sidebar-mobile-open {
		overflow: hidden;
	}

	body.cui-sidebar-mobile-open .cui-sidebar {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	body.cui-sidebar-mobile-open .cui-sidebar-backdrop {
		opacity: 1;
		visibility: visible;
	}

	body.cui-sidebar-collapsed .cui-sidebar {
		width: min(86vw, 290px);
	}

	body.cui-sidebar-collapsed .cui-header {
		inset-inline-start: 0;
	}

	body.cui-sidebar-collapsed .cui-shell-content {
		margin-inline-start: 0;
	}

	.cui-sidebar__brand {
		flex-basis: var(--cui-shell-mobile-header);
		min-height: var(--cui-shell-mobile-header);
	}

	.cui-sidebar__body {
		padding-bottom: 24px;
	}

	.cui-shell-content,
	.cui-shell-content--full {
		width: 100%;
		margin-inline-start: 0;
		margin-block-start: var(--cui-shell-mobile-header);
	}

	.cui-shell-content.has-notice,
	.cui-shell-content--full.has-notice {
		margin-block-start: calc(
			var(--cui-shell-mobile-header) +
			var(--cui-shell-notice-height)
		);
	}

}


/* ------------------------------------------------------------------------
   Small mobile
------------------------------------------------------------------------ */

@media (max-width: 575px) {

	.cui-system-notice {
		padding-inline: 12px;
	}

	.cui-system-notice__text {
		max-height: 34px;
		overflow: hidden;
	}

	.cui-header__actions {
		gap: 4px;
	}

	.cui-header__action-btn,
	.cui-header__mobile-toggle,
	.cui-header-profile__link {
		width: 40px;
		min-width: 40px;
		height: 40px;
		min-height: 40px;
		border-radius: 11px;
	}

	.cui-header__fullscreen {
		display: none;
	}

	.cui-header-chip {
		width: 40px;
		min-width: 40px;
		height: 40px;
		min-height: 40px;
	}

	.cui-header-dropdown {
		inset-inline: 10px;
		width: auto;
		max-height: calc(100dvh - 80px - env(safe-area-inset-bottom));
	}

}


/* ------------------------------------------------------------------------
   Shell reduced motion
------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.cui-header,
	.cui-sidebar,
	.cui-sidebar-backdrop,
	.cui-header *,
	.cui-sidebar * {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}
/* ========================================================================
   19. MOBILE BOTTOM NAVIGATION
======================================================================== */

.cui-mobile-nav {
	position: fixed;
	inset-inline: 12px;
	inset-block-end: calc(10px + env(safe-area-inset-bottom));
	z-index: 10080;
	display: none;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: center;
	gap: 4px;
	min-height: 64px;
	padding: 6px;
	direction: rtl;
	background: rgba(255, 255, 255, .97);
	border: 1px solid rgba(218, 226, 238, .94);
	border-radius: 18px;
	box-shadow:
		0 16px 38px rgba(17, 37, 73, .14),
		0 3px 10px rgba(17, 37, 73, .05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.cui-mobile-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	min-height: 50px;
	margin: 0;
	padding: 4px 3px;
	color: #8793a7;
	background: transparent;
	border: 0;
	border-radius: 13px;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		transform var(--cui-transition-fast);
}

.cui-mobile-nav__item:hover,
.cui-mobile-nav__item:focus-visible {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
}

.cui-mobile-nav__item.is-active {
	color: var(--cui-blue-600);
	background:
		linear-gradient(
			180deg,
			rgba(237, 245, 255, .95),
			rgba(246, 250, 255, .98)
		);
}

.cui-mobile-nav__item.is-active::before {
	position: absolute;
	inset-block-start: 0;
	left: 50%;
	width: 18px;
	height: 3px;
	background: var(--cui-blue-600);
	border-radius: 0 0 5px 5px;
	content: "";
	transform: translateX(-50%);
}

.cui-mobile-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	color: inherit;
}

.cui-mobile-nav__icon svg {
	display: block;
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cui-mobile-nav__icon circle {
	fill: currentColor;
	stroke: currentColor;
}

.cui-mobile-nav__item[data-section="more"] .cui-mobile-nav__icon circle {
	stroke-width: 0;
}

.cui-mobile-nav__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: inherit;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* Mobile content must stay above the navigation bar. */
@media (max-width: 991px) {

	.cui-mobile-nav {
		display: grid;
	}

	body {
		/*padding-bottom: calc(
			84px +
			env(safe-area-inset-bottom)
		);*/
	}

	.cui-sidebar-backdrop {
		inset-block-end: calc(
			74px +
			env(safe-area-inset-bottom)
		);
	}

}


/* Small phones */
@media (max-width: 420px) {

	.cui-mobile-nav {
		inset-inline: 8px;
		inset-block-end: calc(
			7px +
			env(safe-area-inset-bottom)
		);
		min-height: 60px;
		padding: 5px 4px;
		border-radius: 16px;
	}

	.cui-mobile-nav__item {
		min-height: 48px;
		padding-inline: 1px;
	}

	.cui-mobile-nav__icon {
		width: 25px;
		height: 25px;
	}

	.cui-mobile-nav__icon svg {
		width: 20px;
		height: 20px;
	}

	.cui-mobile-nav__label {
		font-size: 12px;
	}

}


/* Desktop */
@media (min-width: 992px) {

	.cui-mobile-nav {
		display: none;
	}

}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

	.cui-mobile-nav,
	.cui-mobile-nav * {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}

}
/* ========================================================================
   20. PAGE HERO / ARTICLE / READING CONTENT
   Shared for posts, news, notifications and content pages
======================================================================== */

.cui-reading-layout {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 1180px;
}


/* ------------------------------------------------------------------------
   Page hero
------------------------------------------------------------------------ */

.cui-page-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 18px 20px;
	margin-bottom: 30px;
	background: linear-gradient(135deg, rgba(244, 248, 255, .96), rgba(255, 255, 255, .98));
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-xl);
	box-shadow: var(--cui-shadow-sm);
}

.cui-page-hero__identity {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 13px;
	min-width: 0;
}

.cui-page-hero__icon {
	display: inline-flex;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 13px;
	font-size: 16px;
}

.cui-page-hero__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.cui-page-hero__eyebrow {
	display: block;
	margin-bottom: 4px;
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.5;
}

.cui-page-hero__title {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 900;
	line-height: 1.75;
}


/* ------------------------------------------------------------------------
   Metadata
------------------------------------------------------------------------ */

.cui-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
}

.cui-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 5px 9px;
	color: #74839d;
	background: rgba(255, 255, 255, .82);
	border: 1px solid #e6ecf4;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.cui-meta__item i {
	color: var(--cui-blue-600);
	font-size: 12px;
}


/* ------------------------------------------------------------------------
   Article card
------------------------------------------------------------------------ */

.cui-article {
	padding: 0;
	overflow: hidden;
	margin-bottom: 30px;
}

.cui-article__media {
	position: relative;
	width: auto;
	margin: 0;
	overflow: hidden;
	background: var(--cui-surface-muted);
	border-bottom: 1px solid var(--cui-border);
	margin:0 auto;
}

.cui-article__image.cui-single-article__image.wp-post-image {
	display: block;
	margin: 0 auto;
}


.cui-article__body {
	padding: 27px;
}
	.cui-article__body .cui-prose {
		font-size: 14px;
	}

/* ------------------------------------------------------------------------
   Rich text / prose
------------------------------------------------------------------------ */

.cui-prose {
	color: #53647e;
	font-size: 12px;
	font-weight: 400;
	line-height: 2.2;
}

.cui-prose > *:first-child {
	margin-top: 0;
}

.cui-prose > *:last-child {
	margin-bottom: 0;
}

.cui-prose p {
	margin: 0 0 18px;
}

.cui-prose h2,
.cui-prose h3,
.cui-prose h4,
.cui-prose h5,
.cui-prose h6 {
	margin: 28px 0 14px;
	color: var(--cui-text-strong);
	font-weight: 900;
	line-height: 1.8;
}

.cui-prose h2 {
	font-size: 19px;
}

.cui-prose h3 {
	font-size: 16px;
}

.cui-prose h4 {
	font-size: 14px;
}

.cui-prose h5,
.cui-prose h6 {
	font-size: 12px;
}

.cui-prose a {
	color: var(--cui-blue-600);
	font-weight: 700;
	text-decoration: none;
}

.cui-prose a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cui-prose img,
.cui-prose video,
.cui-prose iframe {
	max-width: 100%;
}

.cui-prose img {
	height: auto;
	border-radius: var(--cui-radius-md);
}

.cui-prose figure {
	max-width: 100%;
	margin: 22px 0;
}

.cui-prose figcaption {
	margin-top: 7px;
	color: var(--cui-text-muted);
	font-size: 12px;
	text-align: center;
}

.cui-prose blockquote {
	margin: 22px 0;
	padding: 15px 18px;
	color: #526581;
	background: #f6f9fd;
	border-inline-start: 4px solid var(--cui-blue-600);
	border-radius: 10px;
}

.cui-prose blockquote p:last-child {
	margin-bottom: 0;
}

.cui-prose ul,
.cui-prose ol {
	margin: 16px 0;
	padding-inline-start: 24px;
}

.cui-prose li {
	margin: 6px 0;
}

.cui-prose hr {
	height: 1px;
	margin: 26px 0;
	background: var(--cui-border);
	border: 0;
}

.cui-prose table {
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
}

.cui-prose th,
.cui-prose td {
	padding: 11px 13px;
	border: 1px solid #e5ebf3;
	text-align: right;
	vertical-align: middle;
}

.cui-prose th {
	color: var(--cui-text-strong);
	background: var(--cui-surface-muted);
	font-weight: 900;
}


/* ------------------------------------------------------------------------
   Page links
------------------------------------------------------------------------ */

.cui-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--cui-border);
}

.cui-page-links__label {
	margin-inline-end: 3px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 800;
}

.cui-page-links a,
.cui-page-links > span:not(.cui-page-links__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 31px;
	height: 31px;
	padding: 0 8px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border: 1px solid #dce8fb;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
}


/* ------------------------------------------------------------------------
   Information grid
------------------------------------------------------------------------ */

.cui-info-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}

.cui-info-item {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 14px 16px;
	background: var(--cui-surface);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
	box-shadow: var(--cui-shadow-sm);
}

.cui-info-item__icon {
	display: inline-flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 10px;
	font-size: 12px;
}

.cui-info-item__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cui-info-item__copy small {
	color: var(--cui-text-muted);
	font-size: 12px;
}

.cui-info-item__copy strong {
	overflow: hidden;
	color: var(--cui-text-strong);
	font-size: 10.5px;
	font-weight: 900;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ------------------------------------------------------------------------
   Comments
------------------------------------------------------------------------ */

.cui-comments {
	padding: 24px 27px;
}

.cui-comments__content {
	width: 100%;
	min-width: 0;
}

.cui-comments__content .comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cui-comments__content .comment-body {
	margin-bottom: 12px;
	padding: 14px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
}

.cui-comments__content input[type="text"],
.cui-comments__content input[type="email"],
.cui-comments__content input[type="url"],
.cui-comments__content textarea {
	width: 100%;
	color: var(--cui-text);
	background: #fff;
	border: 1px solid var(--cui-border-strong);
	border-radius: var(--cui-radius-md);
	font-family: inherit;
	font-size: 12px;
	outline: none;
}

.cui-comments__content input[type="text"],
.cui-comments__content input[type="email"],
.cui-comments__content input[type="url"] {
	min-height: var(--cui-control-height);
	padding: 8px 12px;
}

.cui-comments__content textarea {
	min-height: 120px;
	padding: 12px;
	resize: vertical;
}

.cui-comments__content input:focus,
.cui-comments__content textarea:focus {
	border-color: rgba(23, 105, 224, .55);
	box-shadow: 0 0 0 4px rgba(23, 105, 224, .08);
}

.cui-comments__content input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 16px;
	color: #fff;
	background: linear-gradient(135deg, var(--cui-blue-600), #1257be);
	border: 0;
	border-radius: 11px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}


	#reply-title {
	font-size: 20px;
}

#id{
	font-size: 0.9em;
}


/* ------------------------------------------------------------------------
   Responsive reading layout
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	#bbb_add_ticket_btn{
		width: 100%;
	}
	.cui-reading-layout {
		gap: 14px;
	}

	.cui-page-hero {
		padding: 15px;
		border-radius: 15px;
	}

	.cui-page-hero__identity {
		gap: 10px;
	}

	.cui-page-hero__icon {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		border-radius: 11px;
		font-size: 14px;
	}

	.cui-page-hero__title {
		font-size: 17px;
	}

	.cui-meta {
		gap: 5px;
	}

	.cui-meta__item {
		min-height: 28px;
		padding: 4px 7px;
		font-size: 12px;
	}

	.cui-article__media,
	.cui-article__image {
		max-height: 300px;
	}

	.cui-article__body {
		padding: 18px;
	}

	.cui-prose {
		line-height: 2.15;
	}



	.cui-info-grid {
		grid-template-columns: 1fr;
	}

	.cui-comments {
		padding: 18px;
		margin-bottom: 100px;
	}



}
/* ========================================================================
   21. CONTENT GRID / CONTENT CARD / PAGINATION
   Shared for blog archive, news, notifications and content listings
======================================================================== */

/* ------------------------------------------------------------------------
   Archive hero extensions
------------------------------------------------------------------------ */

.cui-page-hero__description {
	margin-top: 6px;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.9;
}

.cui-page-hero__description p {
	margin: 0;
}

.cui-page-hero__actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.cui-count-summary {
	gap: 5px;
	min-height: 34px;
	padding-inline: 11px;
}

.cui-count-summary strong {
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
}

.cui-count-summary span {
	font-size: 12px;
	font-weight: 800;
}


/* ------------------------------------------------------------------------
   Content grid
------------------------------------------------------------------------ */

.cui-content-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}


/* ------------------------------------------------------------------------
   Content card
------------------------------------------------------------------------ */

.cui-content-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	transition:
		transform var(--cui-transition),
		border-color var(--cui-transition),
		box-shadow var(--cui-transition);
}

.cui-content-card:hover {
	border-color: #d9e4f2;
	box-shadow: var(--cui-shadow-lg);
	transform: translateY(-3px);
}

.cui-content-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cui-surface-muted);
	border-bottom: 1px solid var(--cui-border);
	text-decoration: none;
}

.cui-content-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.cui-content-card:hover .cui-content-card__image {
	transform: scale(1.025);
}

.cui-content-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #9cabc0;
	background:
		linear-gradient(
			135deg,
			#f2f6fb,
			#eaf1f8
		);
	font-size: 24px;
}

.cui-content-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: 16px;
}

.cui-content-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 9px;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.6;
}

.cui-content-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.cui-content-card__meta i {
	color: var(--cui-blue-600);
	font-size: 12px;
}

.cui-content-card__meta a {
	color: inherit;
	text-decoration: none;
}

.cui-content-card__meta a:hover {
	color: var(--cui-blue-600);
}

.cui-content-card__title {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.9;
}

.cui-content-card__title a {
	display: -webkit-box;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.cui-content-card__title a:hover {
	color: var(--cui-blue-600);
}

.cui-content-card__excerpt {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	color: #6f7e94;
	font-size: 12px;
	line-height: 2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.cui-content-card__excerpt p {
	margin: 0;
}

.cui-content-card__action {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
}

.cui-content-card__action i {
	font-size: 12px;
	transition: transform var(--cui-transition-fast);
}

.cui-content-card__action:hover i {
	transform: translateX(-3px);
}


/* ------------------------------------------------------------------------
   Pagination
------------------------------------------------------------------------ */

.cui-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 22px;
}

.cui-pagination .page-numbers {
	margin-top:20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	color: #66758c;
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: 10px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	transition:
		color var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		border-color var(--cui-transition-fast),
		transform var(--cui-transition-fast);
}

.cui-pagination a.page-numbers:hover {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-color: #dce8fa;
	transform: translateY(-1px);
}

.cui-pagination .page-numbers.current {
	color: #fff;
	background: linear-gradient(135deg, var(--cui-blue-600), #1257be);
	border-color: transparent;
	box-shadow: 0 6px 15px rgba(23, 105, 224, .19);
}


/* ------------------------------------------------------------------------
   Responsive content listings
------------------------------------------------------------------------ */

@media (max-width: 1100px) {

	.cui-content-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 767px) {

.cui-page-hero__actions {
		width: 100%;
	}

	.cui-count-summary {
		width: 100%;
		justify-content: center;
	}

	.cui-content-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.cui-content-card__body {
		padding: 14px;
	}

	.cui-content-card__title {
		font-size: 12px;
	}

	.cui-pagination {
		margin-top: 17px;
	}

	.cui-pagination .page-numbers {
		min-width: 34px;
		height: 34px;
		padding-inline: 8px;
	}

}
/* ========================================================================
   22. BREADCRUMB / NOTIFICATION DETAIL
   Shared for detail pages and system notifications
======================================================================== */

/* ------------------------------------------------------------------------
   Breadcrumb
------------------------------------------------------------------------ */

.cui-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin-bottom: 14px;
	padding: 0 2px;
}

.cui-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	text-decoration: none;
}

a.cui-breadcrumb__item:hover {
	color: var(--cui-blue-600);
}

.cui-breadcrumb__item i {
	color: #a3afc0;
	font-size: 12px;
}

.cui-breadcrumb__item--current {
	color: var(--cui-text-strong);
	font-weight: 900;
}


/* ------------------------------------------------------------------------
   Compact metadata
------------------------------------------------------------------------ */

.cui-meta--compact {
	margin-top: 0;
	margin-bottom: 17px;
}


/* ------------------------------------------------------------------------
   Notification detail
------------------------------------------------------------------------ */

.cui-notice-detail {
	padding: 24px 26px;
}

.cui-notice-detail__author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--cui-border);
}

.cui-notice-detail__avatar {
	display: block;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 12px;
}

.cui-notice-detail__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cui-notice-detail__author-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cui-notice-detail__author-copy small {
	color: var(--cui-text-muted);
	font-size: 12px;
}

.cui-notice-detail__author-copy a {
	overflow: hidden;
	color: var(--cui-text-strong);
	font-size: 10.5px;
	font-weight: 900;
	line-height: 1.7;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-notice-detail__author-copy a:hover {
	color: var(--cui-blue-600);
}

.cui-notice-detail__content {
	width: 100%;
}


/* ------------------------------------------------------------------------
   Mobile
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.cui-breadcrumb {
		margin-bottom: 10px;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.cui-breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.cui-breadcrumb__item {
		flex: 0 0 auto;
	}

	.cui-notice-detail {
		padding: 18px;
	}

	.cui-notice-detail__author {
		margin-bottom: 16px;
		padding-bottom: 13px;
	}

}
/* ========================================================================
   23. SHARED FORM COMPOSITION
   Reused by add/edit class and add/edit webinar.
======================================================================== */

.cui-form-card {
	padding: 22px;
}

.cui-form-accordion {
	display: block;
	width: 100%;
	max-width: none;
	margin: 18px 0 0;
	clear: both;
}

.cui-form-accordion > .cui-accordion__trigger,
.cui-form-accordion > .cui-accordion__panel {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.cui-form-accordion > .cui-accordion__trigger {
	background: linear-gradient(135deg, #f8faff, #f3f7fd);
}

.cui-form-accordion > .cui-accordion__panel {
	margin-inline: 0;
	padding: 16px;
}

.cui-form-accordion .cui-form-grid {
	align-items: stretch;
}

.cui-form-accordion .cui-switch-row {
	height: 100%;
}

.cui-feature-panel {
	display: grid;
	grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	width: 100%;
	margin-top: 18px;
	padding: 17px;
	background: linear-gradient(135deg, #f2f7ff, #f8fbff);
	border: 1px solid #d9e7fb;
	border-radius: var(--cui-radius-lg);
	box-sizing: border-box;
}

.cui-feature-panel__head {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.cui-feature-panel__icon {
	display: inline-flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--cui-blue-600);
	background: #fff;
	border: 1px solid #d8e7fb;
	border-radius: 12px;
	box-shadow: var(--cui-shadow-sm);
	font-size: 14px;
}

.cui-feature-panel__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cui-feature-panel__copy strong {
	color: var(--cui-text-strong);
	font-size: 10.5px;
	font-weight: 900;
	line-height: 1.7;
}

.cui-feature-panel__copy small {
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-feature-panel__field {
	width: 100%;
	margin: 0;
}

@media (max-width: 767px) {
	.cui-form-card {
		padding: 15px;
	}

	.cui-form-accordion {
		margin-top: 14px;
	}

	.cui-form-accordion > .cui-accordion__panel {
		padding: 13px;
	}

	.cui-feature-panel {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 14px;
		padding: 14px;
	}

	.cui-feature-panel__icon {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
	}
}

/* ========================================================================
   24. STEPS / FILE TILE / FILE UPLOAD
   Shared for imports, attachments and multi-step upload flows
======================================================================== */

/* ------------------------------------------------------------------------
   Section heading helpers
------------------------------------------------------------------------ */

.cui-section-head__eyebrow {
	display: block;
	margin-bottom: 2px;
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.5;
}

.cui-section-head--compact {
	margin-bottom: 14px;
}


/* ------------------------------------------------------------------------
   Steps
------------------------------------------------------------------------ */

.cui-steps {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		auto
		minmax(0, 1fr)
		auto
		minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
}

.cui-step {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.cui-step__number {
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border: 1px solid #dce8fb;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 900;
}

.cui-step__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cui-step__copy strong {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.6;
}

.cui-step__copy small {
	color: var(--cui-text-muted);
	font-size: 10px;;
	line-height: 1.7;
}

.cui-steps__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #b2bdcc;
	font-size: 12px;
}


/* ------------------------------------------------------------------------
   File tile
------------------------------------------------------------------------ */

.cui-file-tile {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 36px;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 13px 14px;
	color: var(--cui-text);
	background:
		linear-gradient(
			135deg,
			#f6fbf8,
			#fff
		);
	border: 1px solid #dcebe3;
	border-radius: var(--cui-radius-lg);
	text-decoration: none;
	transition:
		transform var(--cui-transition-fast),
		border-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast);
}

.cui-file-tile:hover {
	color: var(--cui-text);
	border-color: #cde3d6;
	box-shadow: var(--cui-shadow-sm);
	transform: translateY(-1px);
}

.cui-file-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #1f8f58;
	background: #eaf8f0;
	border-radius: 12px;
	font-size: 17px;
}

.cui-file-tile__copy {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.cui-file-tile__copy small {
	color: #6d8d7b;
	font-size: 10px;;
}

.cui-file-tile__copy strong {
	color: #1d5f3e;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.6;
}

.cui-file-tile__copy > span {
	margin-top: 2px;
	color: var(--cui-text-muted);
	font-size: 10px;;
	line-height: 1.7;
}

.cui-file-tile__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: #1f8f58;
	background: #fff;
	border: 1px solid #dcebe3;
	border-radius: 10px;
	font-size: 12px;
}


/* ------------------------------------------------------------------------
   Upload field
------------------------------------------------------------------------ */

.cui-upload-field {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	padding: 18px;
	background:
		linear-gradient(
			180deg,
			#fbfcff,
			#f7f9fd
		);
	border: 1px dashed #cfd9e7;
	border-radius: var(--cui-radius-lg);
}

.cui-upload-field__intro {
	display: flex;
	align-items: center;
	gap: 11px;
}

.cui-upload-field__icon {
	display: inline-flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 12px;
	font-size: 15px;
}

.cui-upload-field__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cui-upload-field__copy label {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}

.cui-upload-field__copy small {
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.7;
}

.cui-file-input {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 6px;
	color: var(--cui-text-muted);
	background: #fff;
	border: 1px solid var(--cui-border-strong);
	border-radius: 11px;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
}

.cui-file-input::file-selector-button {
	min-height: 34px;
	margin-inline-end: 10px;
	padding: 6px 12px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}

.cui-file-input:hover {
	border-color: #c7d7eb;
}

.cui-file-input:focus {
	border-color: rgba(23, 105, 224, .55);
	box-shadow: 0 0 0 4px rgba(23, 105, 224, .08);
	outline: none;
}


/* ------------------------------------------------------------------------
   Inline hint
------------------------------------------------------------------------ */

.cui-inline-hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.7;
}

.cui-inline-hint i {
	flex: 0 0 auto;
	color: var(--cui-success-600);
	font-size: 12px;
}


/* ------------------------------------------------------------------------
   Bulk upload composition
------------------------------------------------------------------------ */

.cui-bulk-upload {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
}

.cui-bulk-upload__form {
	padding-top: 2px;
}

.cui-bulk-upload__actions {
	align-items: center;
	justify-content: space-between;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.cui-bulk-upload {
		gap: 13px;
		padding: 15px;
	}

	.cui-steps {
		grid-template-columns: 1fr;
		gap: 9px;
		padding: 12px;
	}

	.cui-steps__arrow {
		display: none;
	}

	.cui-step {
		padding: 3px 0;
	}

	.cui-file-tile {
		grid-template-columns: 40px minmax(0, 1fr) 34px;
		padding: 12px;
	}

	.cui-file-tile__icon {
		width: 40px;
		height: 40px;
	}

	.cui-upload-field {
		padding: 14px;
	}

	.cui-bulk-upload__actions {
		align-items: stretch;
	}

	.cui-bulk-upload__actions .cui-btn {
		width: 100%;
	}

}
/* ========================================================================
   25. DASHBOARD / STATS / QUICK LINKS / NEWS
   Shared dashboard components
======================================================================== */

/* ------------------------------------------------------------------------
   Alert info variant
------------------------------------------------------------------------ */

.cui-alert--info {
	color: #245b8f;
	background: #eef6ff;
	border-color: #d9e9fb;
}

.cui-alert--info .cui-alert__icon {
	color: var(--cui-blue-600);
	background: #fff;
}


/* ------------------------------------------------------------------------
   Dashboard foundation
------------------------------------------------------------------------ */

.cui-dashboard,
.cui-dashboard * {
	box-sizing: border-box;
}

.cui-dashboard {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: min(100%, var(--cui-dashboard-max));
	margin-inline: auto;
	padding: 24px var(--cui-dashboard-gutter) 32px;
}

.cui-dashboard-mobile-welcome {
	display: none;
}


/* ------------------------------------------------------------------------
   Stats
------------------------------------------------------------------------ */

.cui-dashboard-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
}

.cui-stat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 142px;
	padding: 16px;
	overflow: hidden;
}

.cui-stat-card__head {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 11px;
}

.cui-stat-card__icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	font-size: 15px;
}

.cui-stat-card__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.cui-stat-card__copy span {
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 700;
}

.cui-stat-card__copy strong {
	color: var(--cui-text-strong);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.35;
}

.cui-stat-card__link {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-top: auto;
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
}

.cui-stat-card__link i {
	font-size: 12px;
	transition: transform var(--cui-transition-fast);
}

.cui-stat-card__link:hover i {
	transform: translateX(-3px);
}

.cui-stat-card__spark {
	position: absolute;
	inset-inline-end: 13px;
	inset-block-end: 13px;
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 36px;
	opacity: .2;
}

.cui-stat-card__spark i {
	display: block;
	width: 4px;
	background: currentColor;
	border-radius: 6px 6px 2px 2px;
}

.cui-stat-card__spark i:nth-child(1) { height: 28%; }
.cui-stat-card__spark i:nth-child(2) { height: 48%; }
.cui-stat-card__spark i:nth-child(3) { height: 36%; }
.cui-stat-card__spark i:nth-child(4) { height: 70%; }
.cui-stat-card__spark i:nth-child(5) { height: 54%; }
.cui-stat-card__spark i:nth-child(6) { height: 82%; }
.cui-stat-card__spark i:nth-child(7) { height: 100%; }

.cui-stat-card--blue .cui-stat-card__icon {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
}

.cui-stat-card--blue .cui-stat-card__spark {
	color: var(--cui-blue-600);
}

.cui-stat-card--purple .cui-stat-card__icon {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-stat-card--purple .cui-stat-card__link,
.cui-stat-card--purple .cui-stat-card__spark {
	color: var(--cui-purple-600);
}


/* ------------------------------------------------------------------------
   Main dashboard grid
------------------------------------------------------------------------ */

.cui-dashboard-main {
	display: grid;
	grid-template-columns: minmax(360px, 38fr) minmax(0, 62fr);
	gap: 18px;
	align-items: stretch;
	width: 100%;
}


/* ------------------------------------------------------------------------
   Welcome / plan-style dashboard card
------------------------------------------------------------------------ */

.cui-dashboard-welcome {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	min-height: 315px;
	padding: 28px;
	color: #fff;
	background:
		radial-gradient(
			circle at 86% 12%,
			rgba(83, 147, 255, .32),
			transparent 33%
		),
		linear-gradient(
			135deg,
			#183f82 0%,
			#102e68 46%,
			#0c2459 100%
		);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: var(--cui-radius-xl);
	box-shadow: 0 16px 38px rgba(15, 43, 95, .15);
	overflow: hidden;
}

.cui-dashboard-welcome::after {
	position: absolute;
	inset-inline-end: -85px;
	inset-block-end: -95px;
	width: 260px;
	height: 260px;
	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, .11),
			rgba(255, 255, 255, 0) 68%
		);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.cui-dashboard-welcome__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.cui-dashboard-welcome__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	margin-bottom: 8px;
	padding: 4px 9px;
	color: #dbe9ff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 800;
}

.cui-dashboard-welcome h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(18px, 2vw, 25px);
	font-weight: 900;
	line-height: 1.7;
}

.cui-dashboard-welcome__copy > p {
	max-width: 610px;
	margin: 9px 0 0;
	color: rgba(234, 242, 255, .78);
	font-size: 11;
	line-height: 2;
}

.cui-dashboard-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	margin-top: auto;
	padding-top: 22px;
}

.cui-dashboard-summary-student {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	margin-top: auto;
	padding-top: 22px;
}

.cui-dashboard-summary__item {
	min-width: 0;
	padding: 10px 11px;
	background: rgba(255, 255, 255, .075);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 11px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.cui-dashboard-summary__item small,
.cui-dashboard-summary__item strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-dashboard-summary__item small {
	color: rgba(223, 235, 255, .66);
	font-size: 10px;;
}

.cui-dashboard-summary__item strong {
	margin-top: 3px;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
}

.cui-dashboard-welcome__visual {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cui-dashboard-welcome__visual > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	color: #fff;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 32px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
	font-size: 43px;
}


/* ------------------------------------------------------------------------
   Section head helpers
------------------------------------------------------------------------ */

.cui-section-head--between {
	align-items: center;
	justify-content: space-between;
}

.cui-section-head__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
}


/* ------------------------------------------------------------------------
   News list
------------------------------------------------------------------------ */

.cui-dashboard-news {
	display: flex;
	flex-direction: column;
	min-height: 330px;
	padding: 20px;
}

.cui-news-list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 5px;
	min-height: 0;
}

.cui-news-item {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 18px;
	align-items: center;
	gap: 9px;
	padding: 8px;
	color: var(--cui-text);
	border-radius: 10px;
	text-decoration: none;
	transition:
		background-color var(--cui-transition-fast),
		transform var(--cui-transition-fast);
}

.cui-news-item:hover {
	color: var(--cui-text);
	background: var(--cui-surface-soft);
	transform: translateX(-1px);
}

.cui-news-item__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	overflow: hidden;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 11px;
	font-size: 15px;
}

.cui-news-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cui-news-item__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cui-news-item__copy strong {
	display: block;
	overflow: hidden;
	color: var(--cui-text-strong);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.6;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-news-item__copy > span {
	display: -webkit-box;
	margin-top: 2px;
	overflow: hidden;
	color: var(--cui-text-muted);
	font-size: 12px;;
	line-height: 1.65;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.cui-news-item__copy time {
	margin-top: 3px;
	color: #a0aabd;
	font-size: 12px;
}

.cui-news-item__arrow {
	justify-self: end;
	color: #acb7c7;
	font-size: 12px;
}

.cui-empty--compact {
	min-height: 150px;
	padding: 18px;
}


/* ------------------------------------------------------------------------
   Responsive dashboard
------------------------------------------------------------------------ */

@media (max-width: 1100px) {

	.cui-dashboard-main {
		grid-template-columns: 1fr;
	}


}

@media (max-width: 767px) {

	.cui-dashboard {
		gap: 13px;
		width: 100%;
		padding: 14px 12px 24px;
	}

	.cui-dashboard-mobile-welcome {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 2px 3px;
	}

	.cui-dashboard-mobile-welcome__avatar {
		display: block;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		object-fit: cover;
	}

	.cui-dashboard-mobile-welcome__copy {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.cui-dashboard-mobile-welcome__copy strong {
		color: var(--cui-text-strong);
		font-size: 12px;
		font-weight: 900;
	}

	.cui-dashboard-mobile-welcome__copy span {
		margin-top: 2px;
		color: var(--cui-text-muted);
		font-size: 12px;
	}

	.cui-dashboard-stats {
		grid-template-columns: 1fr 1fr;
		gap: 9px;
	}

	.cui-stat-card {
		min-height: 130px;
		padding: 13px;
	}

	.cui-stat-card__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}

	.cui-stat-card__icon {
		width: 37px;
		height: 37px;
		flex-basis: 37px;
		border-radius: 11px;
		font-size: 12px;
	}

	.cui-stat-card__copy strong {
		font-size: 18px;
	}

	.cui-stat-card__spark {
		display: none;
	}

	.cui-dashboard-welcome {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 20px;
	}

	.cui-dashboard-welcome__visual {
		display: none;
	}

	.cui-dashboard-summary {
		grid-template-columns: 1fr;
		margin-top: 17px;
		padding-top: 0;
	}

	.cui-dashboard-news {
		min-height: 0;
		padding: 15px;
	}

	.cui-news-item {
		grid-template-columns: 42px minmax(0, 1fr) 14px;
		padding-inline: 5px;
	}

	.cui-news-item__media {
		width: 42px;
		height: 42px;
	}


}

/* ========================================================================
   26. OWNER DASHBOARD / PLAN STATUS
   Extends the shared dashboard introduced in section 25
======================================================================== */

/* ------------------------------------------------------------------------
   Four-column stats
------------------------------------------------------------------------ */

.cui-dashboard-stats--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cui-stat-card--green .cui-stat-card__icon {
	color: var(--cui-success-600);
	background: var(--cui-green-soft);
}

.cui-stat-card--green .cui-stat-card__link,
.cui-stat-card--green .cui-stat-card__spark {
	color: var(--cui-success-600);
}

.cui-stat-card--orange .cui-stat-card__icon {
	color: var(--cui-warning-600);
	background: var(--cui-orange-soft);
}

.cui-stat-card--orange .cui-stat-card__link,
.cui-stat-card--orange .cui-stat-card__spark {
	color: #d98912;
}


/* ------------------------------------------------------------------------
   Owner plan card
------------------------------------------------------------------------ */

.cui-dashboard-plan {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 128px;
	gap: 18px;
	align-items: center;
	min-height: 330px;
	padding: 24px;
	color: #fff;
	background:
		radial-gradient(
			circle at 88% 12%,
			rgba(84, 151, 255, .28),
			transparent 34%
		),
		linear-gradient(
			135deg,
			#183f82 0%,
			#102e68 48%,
			#0c2459 100%
		);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: var(--cui-radius-xl);
	box-shadow: 0 16px 38px rgba(15, 43, 95, .15);
	overflow: hidden;
}

.cui-dashboard-plan::after {
	position: absolute;
	inset-inline-end: -95px;
	inset-block-end: -105px;
	width: 285px;
	height: 285px;
	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, .12),
			rgba(255, 255, 255, 0) 70%
		);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.cui-dashboard-plan__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.cui-dashboard-plan__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	margin-bottom: 8px;
	padding: 4px 9px;
	color: #dceaff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 800;
}

.cui-dashboard-plan h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(18px, 2vw, 25px);
	font-weight: 900;
	line-height: 1.7;
}

.cui-dashboard-plan__copy > p {
	max-width: 620px;
	margin: 8px 0 0;
	color: rgba(234, 242, 255, .76);
	font-size: 12px;
	line-height: 1.9;
}

.cui-dashboard-plan__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	margin-top: auto;
	padding-top: 18px;
}

.cui-dashboard-plan__detail {
	min-width: 0;
	padding: 9px 10px;
	background: rgba(255, 255, 255, .075);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 11px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.cui-dashboard-plan__detail--wide {
	grid-column: span 2;
}

.cui-dashboard-plan__detail small,
.cui-dashboard-plan__detail strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-dashboard-plan__detail small {
	color: rgba(223, 235, 255, .63);
	font-size: 12px;
}

.cui-dashboard-plan__detail strong {
	margin-top: 3px;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
}


/* ------------------------------------------------------------------------
   Plan progress
------------------------------------------------------------------------ */

.cui-dashboard-plan__progress-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.cui-plan-progress {
	--cui-progress: 0%;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	background:
		conic-gradient(
			#72aaff var(--cui-progress),
			rgba(255, 255, 255, .11) 0
		);
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .06),
		0 12px 28px rgba(4, 18, 49, .15);
}

.cui-plan-progress::before {
	position: absolute;
	inset: 8px;
	background:
		linear-gradient(
			145deg,
			#153a78,
			#0d285f
		);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 50%;
	content: "";
}

.cui-plan-progress__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cui-plan-progress__inner strong {
	color: #fff;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.1;
}

.cui-plan-progress__inner span {
	margin-top: 2px;
	color: rgba(226, 237, 255, .70);
	font-size: 12px;
	font-weight: 800;
}

.cui-dashboard-plan__progress-label {
	color: rgba(226, 237, 255, .68);
	font-size: 10px;;
	font-weight: 700;
	text-align: center;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 1250px) {

	.cui-dashboard-stats--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 767px) {

.reply-from-admin .replay_style , .reply-from-user .replay_style {
	max-width: 100% !important;
}


	.cui-dashboard-plan {
		grid-template-columns: 1fr;
		gap: 20px;
		min-height: 0;
		padding: 20px;
	}

	.cui-dashboard-plan__progress-wrap {
		order: -1;
	}

	.cui-plan-progress {
		width: 105px;
		height: 105px;
	}

	.cui-plan-progress__inner strong {
		font-size: 23px;
	}

	.cui-dashboard-plan__details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 17px;
		padding-top: 0;
	}

	.cui-dashboard-plan__detail--wide {
		grid-column: 1 / -1;
	}

}

@media (max-width: 420px) {

	.cui-dashboard-stats--4 {
		/*grid-template-columns: 1fr;*/
	}

	.cui-dashboard-plan__details {
		grid-template-columns: 1fr;
	}

	.cui-dashboard-plan__detail--wide {
		grid-column: auto;
	}

}
/* ========================================================================
   27. RECORDING PAGE
   Standalone student recording view
======================================================================== */

.cui-recording-body {
	min-height: 100vh;
	margin: 0;
	color: var(--cui-text);
	background:
		radial-gradient(
			circle at 18% 10%,
			rgba(23, 105, 224, .06),
			transparent 28%
		),
		var(--cui-bg);
	font-family: inherit;
}

.cui-recording-page {
	width: 100%;
	max-width: 1320px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 38px 24px;
}

.cui-recording-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr);
	gap: 18px;
	align-items: stretch;
	width: 100%;
}

.cui-recording-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 540px;
	padding: 24px;
}

.cui-recording-content {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding-top: 2px;
}

.cui-recording-content > :first-child {
	margin-top: 0;
}


/* ------------------------------------------------------------------------
   Visual panel
------------------------------------------------------------------------ */

.cui-recording-visual {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 540px;
	padding: 30px;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(
			circle at 82% 10%,
			rgba(91, 155, 255, .30),
			transparent 32%
		),
		linear-gradient(
			145deg,
			#183f82 0%,
			#102f6a 45%,
			#0c2459 100%
		);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: var(--cui-radius-xl);
	box-shadow: 0 16px 38px rgba(15, 43, 95, .14);
}

.cui-recording-visual::before {
	position: absolute;
	inset-inline-start: -80px;
	inset-block-end: -100px;
	width: 260px;
	height: 260px;
	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, .10),
			transparent 70%
		);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.cui-recording-visual__glow {
	position: absolute;
	inset-inline-end: -75px;
	inset-block-start: -70px;
	width: 210px;
	height: 210px;
	background:
		radial-gradient(
			circle,
			rgba(92, 157, 255, .24),
			transparent 68%
		);
	border-radius: 50%;
	pointer-events: none;
}

.cui-recording-visual__copy {
	position: relative;
	z-index: 2;
	max-width: 430px;
}

.cui-recording-visual__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	margin-bottom: 9px;
	padding: 4px 9px;
	color: #dceaff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .06em;
}

.cui-recording-visual__copy strong {
	display: block;
	color: #fff;
	font-size: clamp(18px, 2vw, 25px);
	font-weight: 900;
	line-height: 1.8;
}

.cui-recording-visual__copy p {
	max-width: 430px;
	margin: 8px 0 0;
	color: rgba(230, 240, 255, .74);
	font-size: 12px;
	line-height: 2;
}

.cui-recording-visual__image {
	position: relative;
	z-index: 2;
	display: block;
	width: min(100%, 380px);
	max-height: 330px;
	margin: 24px auto 0;
	object-fit: contain;
	filter:
		drop-shadow(
			0 18px 28px rgba(3, 18, 48, .20)
		);
}


/* ------------------------------------------------------------------------
   Shortcode compatibility
------------------------------------------------------------------------ */

.cui-recording-content iframe,
.cui-recording-content video {
	max-width: 100%;
	border-radius: var(--cui-radius-md);
}

.cui-recording-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}

.cui-recording-content a {
	word-break: break-word;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 991px) {

	.cui-recording-page {
		padding: 24px 18px;
	}

	.cui-recording-layout {
		grid-template-columns: 1fr;
	}

	.cui-recording-card,
	.cui-recording-visual {
		min-height: 0;
	}

	.cui-recording-visual {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: 20px;
		align-items: center;
	}

	.cui-recording-visual__image {
		margin: 0;
	}

}

@media (max-width: 767px) {

	.cui-recording-page {
		padding: 15px;
	}

	.cui-recording-card {
		gap: 13px;
		padding: 16px;
	}

	.cui-recording-visual {
		display: flex;
		padding: 22px;
	}

	.cui-recording-visual__image {
		width: min(100%, 300px);
		margin: 18px auto 0;
	}

}
/* ========================================================================
   29. RECORDING MANAGEMENT
   Extends the shared recordings table from section 28
======================================================================== */

/* ------------------------------------------------------------------------
   Four-column manager table
------------------------------------------------------------------------ */

.cui-recordings-table--manager
.cui-recordings-table__head,
.cui-recordings-table--manager
.cui-recordings-table__row {
	grid-template-columns:
		minmax(220px, 1.20fr)
		minmax(135px, .62fr)
		minmax(135px, .52fr)
		minmax(190px, .72fr);
}


/* ------------------------------------------------------------------------
   Editable recording title
------------------------------------------------------------------------ */

.cui-recording-name__editable {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.7;
}

.cui-recording-name__editable strong {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-recording-name__editable > i {
	display: inline-flex;
	flex: 0 0 27px;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	margin: 0;
	padding: 0;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 8px;
	font-size: 12px;
	line-height: 27px;
	cursor: pointer;
	transition:
		transform var(--cui-transition-fast),
		background-color var(--cui-transition-fast);
}

.cui-recording-name__editable > i:hover {
	background: #e2eeff;
	transform: translateY(-1px);
}

.cui-recording-name__editable input {
	width: min(100%, 250px);
	min-height: 36px;
	padding: 6px 9px;
	color: var(--cui-text);
	background: #fff;
	border: 1px solid var(--cui-border-strong);
	border-radius: 9px;
	font-family: inherit;
	font-size: 12px;
	outline: 0;
}

.cui-recording-name__editable input:focus {
	border-color: rgba(23, 105, 224, .55);
	box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}


/* ------------------------------------------------------------------------
   Management actions
------------------------------------------------------------------------ */

.cui-recording-management {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.cui-recording-manage-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border-radius: 9px;
	font-size: 15px;
	line-height: 34px;
	cursor: pointer;
	transition:
		transform var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast),
		background-color var(--cui-transition-fast);
}

.cui-recording-manage-icon:hover {
	box-shadow: var(--cui-shadow-sm);
	transform: translateY(-2px);
}

.cui-recording-manage-icon--protect {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-recording-manage-icon--publish {
	color: var(--cui-success-600);
	background: var(--cui-green-soft);
}

.cui-recording-manage-icon--trash {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
}

.cui-recording-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 34px;
	padding: 6px 9px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border: 0;
	border-radius: 9px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
	transition:
		transform var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast),
		background-color var(--cui-transition-fast);
}

.cui-recording-share:hover {
	background: #e2eeff;
	box-shadow: var(--cui-shadow-sm);
	transform: translateY(-2px);
}


/* ------------------------------------------------------------------------
   Responsive manager view
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.cui-recordings-table--manager
	.cui-recordings-table__row {
		display: block;
	}

	.cui-recording-management {
		justify-content: flex-start;
	}

	.cui-recording-share {
		flex: 1 1 auto;
	}

}
/* ========================================================================
   30. API CONNECTIONS / CREDENTIALS / CODE BLOCK
   Shared integration and developer-facing components
======================================================================== */

.cui-api-section {
	padding: 22px;
}

.cui-inline-form {
	display: inline-flex;
	margin: 0;
}


/* ------------------------------------------------------------------------
   Credentials
------------------------------------------------------------------------ */

.cui-api-credentials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cui-api-credential {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	padding: 13px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
}

.cui-api-credential__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .02em;
}

.cui-api-credential__label i {
	color: var(--cui-blue-600);
	font-size: 12px;
}

.cui-api-credential__value {
	display: block;
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	padding: 10px 11px;
	color: #17345f;
	background: #fff;
	border: 1px solid #dde5ef;
	border-radius: 9px;
	font-family: "iransans", Tahoma, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.75;
	text-align: left;
	white-space: nowrap;
	direction: ltr;
}


/* ------------------------------------------------------------------------
   Integration plugins
------------------------------------------------------------------------ */

.cui-api-plugin {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 11px;
	align-items: start;
	min-height: 165px;
	padding: 15px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
}

.cui-api-plugin__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 12px;
	font-size: 15px;
}

.cui-api-plugin__copy {
	min-width: 0;
}

.cui-api-plugin__copy strong {
	display: block;
	color: var(--cui-text-strong);
	font-size: 11;
	font-weight: 900;
	line-height: 1.8;
}

.cui-api-plugin__copy p {
	margin: 4px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.9;
}

.cui-api-plugin .cui-btn {
	grid-column: 1 / -1;
	align-self: end;
	justify-self: start;
}


/* ------------------------------------------------------------------------
   Code block
------------------------------------------------------------------------ */

.cui-code-block {
	position: relative;
	width: 100%;
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			#112957,
			#0b1f48
		);
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: var(--cui-radius-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.cui-code-block pre {
	max-width: 100%;
	margin: 0;
	padding: 18px;
	overflow: auto;
	color: #d9e7ff;
	background: transparent;
	font-family: "iransans", Tahoma, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.9;
	text-align: left;
	white-space: pre;
	direction: ltr;
}

.cui-code-block code {
	color: inherit;
	background: transparent;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.cui-api-section {
		padding: 16px;
	}

	.cui-api-credentials {
		grid-template-columns: 1fr;
	}

	.cui-api-plugin {
		min-height: 0;
	}

	.cui-api-plugin .cui-btn {
		width: 100%;
	}

	.cui-code-block pre {
		padding: 14px;
	}

}
/* ========================================================================
   31. PLAN DETAILS / MODAL COMPATIBILITY
   Shared plan-detail components and temporary legacy modal-state support
======================================================================== */

/* ------------------------------------------------------------------------
   Modal shared helpers
------------------------------------------------------------------------ */

.cui-modal__heading {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding-inline-end: 46px;
}

.cui-modal__heading-copy {
	min-width: 0;
}

.cui-modal__heading-copy h2 {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.6;
}

.cui-modal__heading-copy p {
	margin: 3px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-section-head__icon--purple {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-modal-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 15px;
}


/* ------------------------------------------------------------------------
   Plan modal
------------------------------------------------------------------------ */

.cui-plan-modal__dialog {
	width: min(720px, 100%);
}


/* ------------------------------------------------------------------------
   Plan summary
------------------------------------------------------------------------ */

.cui-plan-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 108px;
	padding: 16px;
	background:
		linear-gradient(
			135deg,
			#eef5ff,
			#fff
		);
	border: 1px solid #dce7f7;
	border-radius: var(--cui-radius-lg);
}

.cui-plan-summary__main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cui-plan-summary__icon {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: #fff;
	background:
		linear-gradient(
			145deg,
			#8869e7,
			#6847c4
		);
	border-radius: 14px;
	box-shadow: 0 9px 20px rgba(118, 85, 213, .22);
	font-size: 18px;
}

.cui-plan-summary__copy {
	min-width: 0;
}

.cui-plan-summary__eyebrow {
	display: block;
	margin-bottom: 2px;
	color: var(--cui-text-muted);
	font-size: 10px;;
	font-weight: 800;
}

.cui-plan-summary__copy h3 {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.65;
}

.cui-plan-summary__copy p {
	margin: 3px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-plan-summary__status {
	flex: 0 0 auto;
}


/* ------------------------------------------------------------------------
   Plan features
------------------------------------------------------------------------ */

.cui-plan-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.cui-plan-feature {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 12px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
}

.cui-plan-feature__icon {
	display: inline-flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	font-size: 12px;
}

.cui-plan-feature__icon--users {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
}

.cui-plan-feature__icon--classes {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-plan-feature__icon--camera {
	color: var(--cui-success-600);
	background: var(--cui-green-soft);
}

.cui-plan-feature__icon--time {
	color: #d98912;
	background: var(--cui-orange-soft);
}

.cui-plan-feature__copy {
	min-width: 0;
}

.cui-plan-feature__copy small,
.cui-plan-feature__copy strong {
	display: block;
}

.cui-plan-feature__copy small {
	color: var(--cui-text-muted);
	font-size: 10px;;
}

.cui-plan-feature__copy strong {
	margin-top: 2px;
	color: var(--cui-text-strong);
	font-size: 11;
	font-weight: 900;
	line-height: 1.6;
}

.cui-plan-feature__copy strong span {
	color: var(--cui-text-muted);
	font-size: 10px;;
	font-weight: 700;
}


/* ------------------------------------------------------------------------
   Plan dates
------------------------------------------------------------------------ */

.cui-plan-date-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.cui-plan-date {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
}

.cui-plan-date__icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-size: 12px;
}

.cui-plan-date__icon--start {
	color: var(--cui-success-600);
	background: var(--cui-green-soft);
}

.cui-plan-date__icon--expire {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
}

.cui-plan-date__copy small,
.cui-plan-date__copy strong {
	display: block;
}

.cui-plan-date__copy small {
	color: var(--cui-text-muted);
	font-size: 10px;;
}

.cui-plan-date__copy strong {
	margin-top: 2px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}


/* ------------------------------------------------------------------------
   Horizontal progress
------------------------------------------------------------------------ */

.cui-plan-progress-card {
	margin-top: 10px;
	padding: 13px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
}

.cui-plan-progress-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.cui-plan-progress-card__head small,
.cui-plan-progress-card__head strong {
	display: block;
}

.cui-plan-progress-card__head small {
	color: var(--cui-text-muted);
	font-size: 10px;;
}

.cui-plan-progress-card__head strong {
	margin-top: 2px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-progress-bar {
	width: 100%;
	height: 8px;
	overflow: hidden;
	background: #e8edf5;
	border-radius: var(--cui-radius-pill);
}

.cui-progress-bar__value {
	--cui-progress-value: 0%;

	display: block;
	width: var(--cui-progress-value);
	height: 100%;
	border-radius: inherit;
	transition: width .35s ease;
}

.cui-progress-bar__value--green {
	background:
		linear-gradient(
			90deg,
			#0aa976,
			#3cc79d
		);
}

.cui-progress-bar__value--orange {
	background:
		linear-gradient(
			90deg,
			#e5a52d,
			#f3c967
		);
}

.cui-progress-bar__value--red {
	background:
		linear-gradient(
			90deg,
			#d30c5c,
			#f05288
		);
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.cui-modal-actions {
		align-items: stretch;
	}

	.cui-modal-actions .cui-btn {
		width: 100%;
	}

	.cui-plan-summary {
		align-items: flex-start;
		flex-direction: column;
		min-height: 0;
		padding: 14px;
	}

	.cui-plan-summary__status {
		margin-inline-start: 60px;
	}

	.cui-plan-feature-grid,
	.cui-plan-date-grid {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 420px) {

	.cui-plan-summary__main {
		align-items: flex-start;
	}

	.cui-plan-summary__copy p {
		display: none;
	}

	.cui-plan-summary__status {
		margin-inline-start: 0;
	}

	.cui-plan-progress-card__head {
		align-items: flex-start;
	}

}
/* ========================================================================
   32. ROOM DETAILS / COPY FIELD / DELETE CONFIRMATION
   Shared detail-page composition for class and webinar owner views
======================================================================== */

/* ------------------------------------------------------------------------
   Legacy behavioral notice compatibility
------------------------------------------------------------------------ */

.cui-alert.notice {
	margin: 0;
	box-shadow: none;
}


/* ------------------------------------------------------------------------
   Modal sizes
------------------------------------------------------------------------ */

.cui-modal__dialog--compact {
	width: min(520px, 100%);
}

.cui-modal__dialog--wide {
	width: min(900px, 100%);
}

.cui-modal__dialog--danger {
	width: min(440px, 100%);
}

.cui-modal__body--form {
	padding: 20px;
}


/* ------------------------------------------------------------------------
   Room hero
------------------------------------------------------------------------ */

.cui-room-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cui-room-hero__main {
	flex: 1 1 auto;
	min-width: 0;
}

.cui-room-hero__meta {
	margin-top: 11px;
}

.cui-room-hero__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}


/* ------------------------------------------------------------------------
   Join / access
------------------------------------------------------------------------ */

.cui-room-access-card {
	padding: 22px;
	margin-bottom: 30px;
}

.cui-room-join {
	display: grid;
	grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin-bottom: 14px;
}

.cui-room-join__form {
	width: 100%;
	margin: 0;
}

.cui-room-join .cui-alert {
	margin: 0;
}

.cui-room-access-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cui-room-secret {
	font-family: "iransans", Tahoma, Arial, sans-serif;
	text-align: left;
	direction: ltr;
}


/* ------------------------------------------------------------------------
   Copy field
------------------------------------------------------------------------ */

.cui-copy-field {
	width: 100%;
}

.cui-copy-field__label {
	display: block;
	margin-bottom: 7px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-copy-field__control {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

.cui-copy-field__input {
	min-width: 0;
	padding-inline-end: 126px;
	font-family: "iransans", Tahoma, Arial, sans-serif;
	font-size: 12px;
	text-align: left;
	direction: ltr;
}

.cui-copy-field__button {
	position: absolute;
	inset-inline-end: 5px;
	top: 5px;
	bottom: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 112px;
	margin: 0;
	padding: 0 10px;
	color: #fff;
	background:
		linear-gradient(
			135deg,
			var(--cui-blue-600),
			#155bc2
		);
	border: 0;
	border-radius: 9px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
	transition:
		transform var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast);
}

.cui-copy-field__button:hover {
	box-shadow: 0 8px 18px rgba(23, 105, 224, .18);
	transform: translateY(-1px);
}

.cui-copy-field__status {
	min-height: 16px;
	margin-top: 5px;
	color: var(--cui-success-600);
	font-size: 10px;
	position: absolute;
	right: 10px;
	top: 10px;
}

/* ------------------------------------------------------------------------
   Delete confirmation
------------------------------------------------------------------------ */

.cui-delete-confirmation {
	padding: 28px 24px 24px;
	text-align: center;
}

.cui-delete-confirmation__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 12px;
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
	border-radius: 18px;
	font-size: 20px;
}

.cui-delete-confirmation h2 {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.7;
}

.cui-delete-confirmation > p {
	max-width: 355px;
	margin: 7px auto 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.9;
}

.cui-delete-confirmation__form {
	margin: 18px 0 0;
}

.cui-delete-confirmation__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}


/* ------------------------------------------------------------------------
   Embedded legacy / child views
------------------------------------------------------------------------ */

.cui-room-embedded-card {
	padding: 22px;
}

.cui-embedded-content {
	width: 100%;
	min-width: 0;
	overflow-x: auto;
}

.cui-embedded-content > :first-child {
	margin-top: 0;
}

.cui-embedded-content table {
	width: 100%;
	max-width: 100%;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 1100px) {

	.cui-room-access-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 767px) {

.CopyIconBtn2 {
	max-width: 100%;
}
	.cui-room-hero {
		align-items: stretch;
		flex-direction: column;
	}

	.cui-room-hero__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.cui-room-hero__actions .cui-btn {
		width: 100%;
	}

	.cui-room-access-card,
	.cui-room-embedded-card {
		padding: 16px;
	}

	.cui-room-join {
		grid-template-columns: 1fr;
	}

	.cui-room-access-grid {
		grid-template-columns: 1fr;
	}

	.cui-copy-field__input {
		padding-inline-end: 48px;
	}

	.cui-copy-field__button {
		min-width: 40px;
		width: 40px;
		padding: 0;
	}

	.cui-copy-field__button span {
		display: none;
	}

}

@media (max-width: 420px) {

	.cui-room-hero__actions,
	.cui-delete-confirmation__actions {
		grid-template-columns: 1fr;
	}

}
/* ========================================================================
   33. PRICING / PLAN TABS / PRICE CARDS
   Shared pricing components for plan-selection pages
======================================================================== */

.cui-pricing-hero {
	margin-bottom: 0;
}


/* ------------------------------------------------------------------------
   Pricing tabs
------------------------------------------------------------------------ */

.cui-pricing-tabs {
	display: flex;
	gap: 7px;
	width: 100%;
	padding: 6px;
	overflow-x: auto;
	background: var(--cui-surface);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
	box-shadow: var(--cui-shadow-sm);
	scrollbar-width: thin;
	margin: 20px 0px;
}

.cui-pricing-tab {
	display: inline-flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 8px 13px;
	color: var(--cui-text-muted);
	background: #6a88cd1a;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast);
}

.cui-pricing-tab i {
	font-size: 12px;
}

.cui-pricing-tab:hover {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
}

.cui-pricing-tab.is-active {
	color: #fff;
	background:
		linear-gradient(
			135deg,
			var(--cui-blue-600),
			#1358bd
		);
	box-shadow: 0 7px 18px rgba(23, 105, 224, .17);
}


/* ------------------------------------------------------------------------
   Panels
------------------------------------------------------------------------ */

.cui-pricing-panel {
	display: none;
}

.cui-pricing-panel.is-active {
	display: block;
}

.cui-pricing-panel__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 3px 0 14px;
	padding: 5px 2px;
}

.cui-pricing-panel__icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 13px;
	font-size: 15px;
}

.cui-pricing-panel__head h2 {
	margin: 2px 0 0;
	color: var(--cui-text-strong);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.65;
}

.cui-pricing-panel__head p {
	max-width: 760px;
	margin: 4px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.9;
}


/* ------------------------------------------------------------------------
   Price cards
------------------------------------------------------------------------ */

.cui-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.cui-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-width: 0;
	min-height: 330px;
	padding: 18px;
	overflow: hidden;
	transition:
		transform var(--cui-transition),
		box-shadow var(--cui-transition),
		border-color var(--cui-transition);
}

.cui-price-card::before {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background:
		linear-gradient(
			90deg,
			var(--cui-blue-600),
			var(--cui-purple-600)
		);
	content: "";
	opacity: .85;
}

.cui-price-card:hover {
	border-color: #d7e3f3;
	box-shadow: var(--cui-shadow-md);
	transform: translateY(-3px);
}

.cui-price-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.cui-price-card__head h3 {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.6;
}

.cui-price-card__head > div > span {
	display: block;
	margin-top: 2px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 700;
}

.cui-price-card__mark {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
	border-radius: 10px;
	font-size: 12px;
}

.cui-price-card__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cui-border);
}

.cui-price-card__price strong {
	color: var(--cui-navy-900);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.cui-price-card__price span {
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 800;
}

.cui-price-card__features {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cui-price-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	color: #4d5c74;
	font-size: 12px;
	line-height: 1.85;
}

.cui-price-card__features li i {
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--cui-success-600);
	font-size: 12px;
}


/* ------------------------------------------------------------------------
   Pricing notes
------------------------------------------------------------------------ */

.cui-pricing-warning {
	margin-top: 14px;
}

.cui-pricing-notes {
	margin-top: 12px;
	padding: 20px;
}

.cui-pricing-notes__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px 18px;
	margin: 0;
	padding: 0;
	counter-reset: cui-pricing-note;
	list-style: none;
}

.cui-pricing-notes__list li {
	position: relative;
	min-height: 40px;
	padding: 9px 42px 9px 10px;
	color: #53617a;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.9;
	counter-increment: cui-pricing-note;
}

.cui-pricing-notes__list li::before {
	position: absolute;
	inset-inline-start: 9px;
	top: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 7px;
	font-size: 10px;;
	font-weight: 900;
	content: counter(cui-pricing-note);
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 1100px) {

	.cui-pricing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 767px) {

	.cui-pricing-tabs {
		padding: 5px;
	}

	.cui-pricing-tab {
		min-height: 40px;
		padding: 7px 11px;
	}

	.cui-pricing-panel__head {
		align-items: flex-start;
	}

	.cui-pricing-grid,
	.cui-pricing-notes__list {
		grid-template-columns: 1fr;
	}

	.cui-price-card {
		min-height: 0;
		padding: 16px;
	}

}

@media (max-width: 420px) {

	.cui-pricing-panel__icon {
		display: none;
	}

	.cui-price-card__price strong {
		font-size: 20px;
	}

}
/* ========================================================================
   34. FILTERABLE COLLECTION / NOTIFICATIONS
======================================================================== */

.cui-search__clear {
	position: absolute;
	top: 50%;
	inset-inline-start: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	color: var(--cui-text-muted);
	background: #fff;
	border: 1px solid #e4e9f1;
	border-radius: 9px;
	font-size: 12px;
	cursor: pointer;
	transform: translateY(-50%);
	transition: color var(--cui-transition-fast), background-color var(--cui-transition-fast);
}

.cui-search__clear:hover {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
}

.cui-search__clear[hidden] {
	display: none;
}

.cui-view-switch {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: var(--cui-surface-muted);
	border: 1px solid var(--cui-border);
	border-radius: 10px;
}

.cui-view-switch__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 32px;
	padding: 5px 9px;
	color: var(--cui-text-muted);
	background: transparent;
	border: 0;
	border-radius: 7px;
	font-family: inherit;
	font-size: 10px;;
	font-weight: 900;
	cursor: pointer;
}

.cui-view-switch__button:hover,
.cui-view-switch__button.is-active {
	color: var(--cui-blue-600);
}

.cui-view-switch__button.is-active {
	background: #fff;
	box-shadow: var(--cui-shadow-sm);
}

/* Notification card is a genuinely distinct content component. */
.cui-notification-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 230px;
	padding: 16px;
	overflow: hidden;
	transition: transform var(--cui-transition), border-color var(--cui-transition), box-shadow var(--cui-transition);
}

.cui-notification-card::before {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 3px;
	height: 100%;
	background: transparent;
	content: "";
}

.cui-notification-card.is-unread::before {
	background: linear-gradient(180deg, var(--cui-blue-600), var(--cui-purple-600));
}

.cui-notification-card:hover {
	border-color: #d9e4f2;
	box-shadow: var(--cui-shadow-md);
	transform: translateY(-2px);
}

.cui-notification-card__head,
.cui-notification-card__footer,
.cui-notification-author {
	display: flex;
	align-items: center;
}

.cui-notification-card__head,
.cui-notification-card__footer {
	justify-content: space-between;
	gap: 10px;
}

.cui-notification-card__head {
	align-items: flex-start;
}

.cui-notification-author {
	gap: 9px;
	min-width: 0;
}

.cui-notification-author__avatar,
.cui-notification-author__image {
	display: block;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 11px;
}

.cui-notification-author__avatar {
	overflow: hidden;
	background: var(--cui-surface-muted);
	border: 1px solid var(--cui-border);
}

.cui-notification-author__image {
	object-fit: cover;
}

.cui-notification-author__copy {
	min-width: 0;
}

.cui-notification-author__copy > span,
.cui-notification-author__copy > small {
	display: flex;
	align-items: center;
	gap: 5px;
}

.cui-notification-author__copy > span {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-notification-author__copy > small {
	margin-top: 3px;
	color: var(--cui-text-muted);
	font-size: 10px;;
}

.cui-notification-author__copy i {
	color: var(--cui-blue-600);
	font-size: 12px;
}

.cui-notification-new {
	flex: 0 0 auto;
}

.cui-notification-card__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 15px 0;
}

.cui-notification-card__title {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 12.5px;
	font-weight: 900;
	line-height: 1.85;
}

.cui-notification-card__title a,
.cui-notification-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.cui-notification-card__title a {
	color: inherit;
	text-decoration: none;
	-webkit-line-clamp: 2;
}

.cui-notification-card__title a:hover {
	color: var(--cui-blue-600);
}

.cui-notification-card__excerpt {
	margin: 7px 0 0;
	color: #71809a;
	font-size: 12px;
	line-height: 2;
	-webkit-line-clamp: 3;
}

.cui-notification-card__footer {
	padding-top: 12px;
	border-top: 1px solid var(--cui-border);
}

.cui-notification-card__status,
.cui-notification-card__action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;;
	font-weight: 800;
}

.cui-notification-card__status {
	color: var(--cui-text-muted);
}

.cui-notification-card__status i {
	color: var(--cui-purple-600);
}

.cui-notification-card__action {
	justify-content: center;
	min-height: 32px;
	padding: 5px 9px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 9px;
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
}

.cui-notification-card__action:hover {
	color: #fff;
	background: var(--cui-blue-600);
}

.cui-notification-collection.is-list-view {
	grid-template-columns: 1fr;
}

.cui-notification-collection.is-list-view .cui-notification-card {
	display: grid;
	grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	min-height: 108px;
	padding: 14px 16px;
}

.cui-notification-collection.is-list-view .cui-notification-card__body {
	padding: 0;
}

.cui-notification-collection.is-list-view .cui-notification-card__title a,
.cui-notification-collection.is-list-view .cui-notification-card__excerpt {
	-webkit-line-clamp: 1;
}

.cui-notification-collection.is-list-view .cui-notification-card__footer {
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	min-width: 118px;
	padding: 0;
	border-top: 0;
}

.cui-notification-search-empty,
.cui-notification-initial-empty,
.cui-notification-collection > .cui-pagination {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.cui-view-switch {
		display: none;
	}
}

@media (max-width: 767px) {
	.cui-notification-card {
		min-height: 0;
		padding: 14px;
	}

	.cui-notification-collection.is-list-view .cui-notification-card {
		display: flex;
		min-height: 0;
	}

	.cui-notification-collection.is-list-view .cui-notification-card__footer {
		flex-direction: row;
		align-items: center;
		min-width: 0;
		padding-top: 12px;
		border-top: 1px solid var(--cui-border);
	}
}

/* ========================================================================
   35. MY SERVICES / SERVICE PLAN CARDS
   Shared subscription cards for BBB, Jitsi and LMS services
======================================================================== */

.cui-services-count {
	min-height: 34px;
	padding-inline: 11px;
}

.cui-services-count strong {
	color: inherit;
	font-size: 12px;
}


/* ------------------------------------------------------------------------
   Services grid
------------------------------------------------------------------------ */

.cui-services-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
}


/* ------------------------------------------------------------------------
   Service card
------------------------------------------------------------------------ */

.cui-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px;
	overflow: hidden;
}

.cui-service-card::before {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background:
		linear-gradient(
			90deg,
			var(--cui-blue-600),
			var(--cui-purple-600)
		);
	content: "";
}

.cui-service-card--jitsi::before {
	background:
		linear-gradient(
			90deg,
			var(--cui-purple-600),
			#9c7cec
		);
}

.cui-service-card--lms::before {
	background:
		linear-gradient(
			90deg,
			var(--cui-success-600),
			var(--cui-cyan-600)
		);
}

.cui-service-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.cui-service-card__identity {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.cui-service-card__icon {
	display: inline-flex;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 13px;
	font-size: 16px;
}

.cui-service-card--jitsi
.cui-service-card__icon {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-service-card--lms
.cui-service-card__icon {
	color: var(--cui-success-600);
	background: var(--cui-green-soft);
}

.cui-service-card__copy {
	min-width: 0;
}

.cui-service-card__eyebrow {
	display: block;
	margin-bottom: 2px;
	color: var(--cui-text-muted);
	font-size: 10px;;
	font-weight: 800;
}

.cui-service-card__copy h2 {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.7;
}

.cui-service-card__copy p {
	margin: 3px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-service-card__copy p strong {
	color: var(--cui-blue-600);
	font-weight: 900;
}

.cui-service-card__status {
	flex: 0 0 auto;
}


/* ------------------------------------------------------------------------
   Extra plan-feature icon variants
------------------------------------------------------------------------ */

.cui-plan-feature__icon--record {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
}

.cui-plan-feature__icon--exam {
	color: var(--cui-cyan-600);
	background: var(--cui-cyan-soft);
}


/* ------------------------------------------------------------------------
   Service status / circular progress
------------------------------------------------------------------------ */

.cui-service-card__plan-status {
	display: grid;
	grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
	gap: 12px;
	align-items: stretch;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cui-border);
}

.cui-service-progress-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 12px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
}

.cui-service-progress {
	--cui-progress: 0%;
	--cui-service-progress-color: var(--cui-success-600);

	position: relative;
	display: flex;
	flex: 0 0 86px;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	background:
		conic-gradient(
			var(--cui-service-progress-color) var(--cui-progress),
			#e8edf4 0
		);
	border-radius: 50%;
}

.cui-service-progress::before {
	position: absolute;
	inset: 7px;
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: 50%;
	content: "";
}

.cui-service-progress--orange {
	--cui-service-progress-color: var(--cui-warning-600);
}

.cui-service-progress--red {
	--cui-service-progress-color: var(--cui-danger-600);
}

.cui-service-progress__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cui-service-progress__inner strong {
	color: var(--cui-text-strong);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.1;
}

.cui-service-progress__inner span {
	margin-top: 2px;
	color: var(--cui-text-muted);
	font-size: 10px;
	font-weight: 800;
}

.cui-service-progress__copy {
	min-width: 0;
}

.cui-service-progress__copy small,
.cui-service-progress__copy strong,
.cui-service-progress__copy span {
	display: block;
}

.cui-service-progress__copy small {
	color: var(--cui-text-muted);
	font-size: 12px;
}

.cui-service-progress__copy strong {
	margin-top: 3px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-service-progress__copy span {
	margin-top: 3px;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.7;
}

.cui-service-date-grid {
	grid-template-columns: 1fr;
	align-content: stretch;
	margin-top: 0;
}

.cui-service-date-grid
.cui-plan-date {
	height: 100%;
}


/* ------------------------------------------------------------------------
   Footer
------------------------------------------------------------------------ */

.cui-service-card__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--cui-border);
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 1100px) {

	.cui-services-grid {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 767px) {

	.cui-service-card {
		padding: 16px;
	}

	.cui-service-card__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.cui-service-card__status {
		margin-inline-start: 57px;
	}

	.cui-service-card__plan-status {
		grid-template-columns: 1fr;
	}

	.cui-service-date-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cui-service-card__footer .cui-btn {
		width: 100%;
	}

}

@media (max-width: 520px) {

	.cui-service-progress-wrap {
		align-items: flex-start;
	}

	.cui-service-date-grid {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 420px) {

	.cui-service-card__status {
		margin-inline-start: 0;
	}

	.cui-service-progress {
		flex-basis: 78px;
		width: 78px;
		height: 78px;
	}

}
/* ========================================================================
   36. WALLET / CUSTOMER CLUB
   Woo Wallet endpoint layout, transactions and loyalty rewards
======================================================================== */

/* ------------------------------------------------------------------------
   Hero balance
------------------------------------------------------------------------ */

.cui-wallet-hero-balance {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 150px;
	padding: 9px 12px;
	background: var(--cui-blue-soft);
	border: 1px solid #dbe8fb;
	border-radius: 11px;
}

.cui-wallet-hero-balance span {
	color: var(--cui-text-muted);
	font-size: 10px;;
	font-weight: 800;
}

.cui-wallet-hero-balance strong,
.cui-wallet-hero-balance .woocommerce-Price-amount {
	color: var(--cui-blue-600);
	font-size: 16px;
	font-weight: 900;
}


/* ------------------------------------------------------------------------
   Wallet shell
------------------------------------------------------------------------ */

.cui-wallet-shell {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	width: 100%;
}

.cui-wallet-sidebar,
.cui-wallet-content {
	min-width: 0;
}

.cui-wallet-sidebar {
	position: sticky;
	top: calc(var(--cui-shell-header) + 14px);
	padding: 10px;
	background: var(--cui-surface);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
	box-shadow: var(--cui-shadow-sm);
}

.cui-wallet-nav ul {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cui-wallet-nav__item a {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	gap: 9px;
	align-items: center;
	min-height: 56px;
	padding: 8px 9px;
	color: var(--cui-text-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	text-decoration: none;
	transition:
		color var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		border-color var(--cui-transition-fast),
		transform var(--cui-transition-fast);
}

.cui-wallet-nav__item a:hover {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-color: #dbe8fb;
	transform: translateX(-2px);
}

.cui-wallet-nav__item.is-active a {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-color: #d6e5fb;
	box-shadow: inset -3px 0 0 var(--cui-blue-600);
}

.cui-wallet-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--cui-blue-600);
	background: #fff;
	border: 1px solid #dbe8fb;
	border-radius: 9px;
	font-size: 12px;
}

.cui-wallet-nav__copy {
	min-width: 0;
}

.cui-wallet-nav__copy strong,
.cui-wallet-nav__copy small {
	display: block;
}

.cui-wallet-nav__copy strong {
	color: inherit;
	font-size: 12px;
	font-weight: 900;
}

.cui-wallet-nav__copy small {
	margin-top: 2px;
	overflow: hidden;
	color: var(--cui-text-muted);
	font-size: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-wallet-nav__arrow {
	color: var(--cui-text-faint);
	font-size: 12px;
}

.cui-wallet-security-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 10px;
	padding: 10px;
	color: #476151;
	background: var(--cui-green-soft);
	border: 1px solid #d8f0e6;
	border-radius: 10px;
}

.cui-wallet-security-note > span {
	display: inline-flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--cui-success-600);
	background: #fff;
	border-radius: 8px;
	font-size: 12px;
}

.cui-wallet-security-note strong,
.cui-wallet-security-note small {
	display: block;
}

.cui-wallet-security-note strong {
	font-size: 10px;;
	font-weight: 900;
}

.cui-wallet-security-note small {
	margin-top: 2px;
	font-size: 6.7px;
	line-height: 1.7;
}


/* ------------------------------------------------------------------------
   Main wallet area / balance
------------------------------------------------------------------------ */

.cui-wallet-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cui-wallet-balance-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 17px;
	background:
		linear-gradient(
			135deg,
			#f4f8ff,
			#eef5ff
		);
	border: 1px solid #dce8fa;
	border-radius: var(--cui-radius-lg);
	box-shadow: var(--cui-shadow-sm);
}

.cui-wallet-balance-card__icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cui-blue-600);
	background: #fff;
	border: 1px solid #dce8fa;
	border-radius: 12px;
	font-size: 14px;
}

.cui-wallet-balance-card__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.cui-wallet-balance-card__copy > span {
	display: block;
	color: var(--cui-text-muted);
	font-size: 10px;;
	font-weight: 800;
}

.cui-wallet-balance-card__copy .woo-wallet-price {
	margin: 3px 0 0;
	color: var(--cui-text-strong);
	font-size: 17px;
	font-weight: 900;
	line-height: 1.4;
}

.cui-wallet-balance-card__copy
.woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.cui-wallet-workspace {
	min-width: 0;
	padding: 18px;
	background: var(--cui-surface);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
	box-shadow: var(--cui-shadow-sm);
}


/* ------------------------------------------------------------------------
   Forms
------------------------------------------------------------------------ */

.cui-wallet-form {
	margin-top: 12px;
}

.cui-wallet-form-card {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 16px;
}

.cui-wallet-money-input {
	position: relative;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	min-height: var(--cui-control-height);
	background: #fff;
	border: 1px solid var(--cui-border-strong);
	border-radius: var(--cui-radius-sm);
	overflow: hidden;
	transition:
		border-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast);
}

.cui-wallet-money-input:focus-within {
	border-color: var(--cui-blue-600);
	box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.cui-wallet-money-input > i {
	color: var(--cui-blue-600);
	text-align: center;
	font-size: 12px;
}

.cui-wallet-money-input .cui-input {
	height: 44px;
	padding-inline: 4px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.cui-wallet-money-input > span {
	padding-inline: 9px;
	color: var(--cui-text-muted);
	font-size: 10px;;
	font-weight: 800;
}

.cui-wallet-form-actions {
	margin: 0;
}


.CopyIconBtn2 {
	max-width: 100px;
	width: 100% !important;
}
/* ------------------------------------------------------------------------
   Select2 compatibility
------------------------------------------------------------------------ */

.cui-wallet-form
.select2-container {
	width: 100%;
}

.cui-wallet-form
.select2-container
.select2-selection--single {
	min-height: var(--cui-control-height);
	border: 1px solid var(--cui-border-strong);
	border-radius: var(--cui-radius-sm);
}

.cui-wallet-form
.select2-container
.select2-selection--single
.select2-selection__rendered {
	line-height: calc(var(--cui-control-height) - 2px);
}

.cui-wallet-form
.select2-container
.select2-selection--single
.select2-selection__arrow {
	height: var(--cui-control-height);
}


/* ------------------------------------------------------------------------
   Transactions
------------------------------------------------------------------------ */

.cui-wallet-transactions {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.cui-wallet-transaction {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	min-height: 64px;
	padding: 10px 11px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 10px;
}

.cui-wallet-transaction__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
	border-radius: 9px;
	font-size: 12px;
}

.cui-wallet-transaction--credit
.cui-wallet-transaction__icon {
	color: var(--cui-success-600);
	background: var(--cui-green-soft);
}

.cui-wallet-transaction__copy {
	min-width: 0;
}

.cui-wallet-transaction__copy p {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.8;
}

.cui-wallet-transaction__copy small {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 3px;
	color: var(--cui-text-muted);
	font-size: 12px;
}

.cui-wallet-transaction__amount {
	display: flex;
	align-items: center;
	gap: 3px;
	color: var(--cui-danger-600);
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
}

.cui-wallet-transaction--credit
.cui-wallet-transaction__amount {
	color: var(--cui-success-600);
}

.cui-wallet-transaction__amount
.woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}


/* ------------------------------------------------------------------------
   Loyalty
------------------------------------------------------------------------ */

.cui-wallet-loyalty {
	padding: 18px;
}

.cui-wallet-loyalty__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.cui-wallet-loyalty__item {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	min-height: 70px;
	padding: 11px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 10px;
}

.cui-wallet-loyalty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
	border-radius: 10px;
	font-size: 12px;
}

.cui-wallet-loyalty__copy {
	min-width: 0;
}

.cui-wallet-loyalty__copy strong,
.cui-wallet-loyalty__copy small,
.cui-wallet-loyalty__copy a {
	display: block;
}

.cui-wallet-loyalty__copy strong {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.7;
}

.cui-wallet-loyalty__copy small,
.cui-wallet-loyalty__copy a {
	margin-top: 2px;
	color: var(--cui-text-muted);
	font-size: 10px;
	line-height: 1.7;
}

.cui-wallet-loyalty__copy a {
	color: var(--cui-blue-600);
	text-decoration: none;
}

.cui-wallet-loyalty__copy a:hover {
	text-decoration: underline;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 1050px) {

	.cui-wallet-shell {
		grid-template-columns: 210px minmax(0, 1fr);
	}

	.cui-wallet-loyalty__list {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 820px) {

	.cui-wallet-shell {
		grid-template-columns: 1fr;
	}

	.cui-wallet-sidebar {
		position: static;
	}

	.cui-wallet-nav ul {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cui-wallet-nav__item a {
		grid-template-columns: 32px minmax(0, 1fr);
		min-height: 52px;
	}

	.cui-wallet-nav__arrow {
		display: none;
	}

	.cui-wallet-security-note {
		display: none;
	}

}

@media (max-width: 620px) {

	.cui-wallet-nav ul {
		grid-template-columns: 1fr;
	}

	.cui-wallet-nav__copy small {
		white-space: normal;
	}

	.cui-wallet-workspace,
	.cui-wallet-loyalty {
		padding: 14px;
	}

	.cui-wallet-loyalty__item {
		grid-template-columns: 36px minmax(0, 1fr);
	}

	.cui-wallet-loyalty__item > .cui-badge {
		grid-column: 2;
		justify-self: start;
	}

}

@media (max-width: 480px) {

	.cui-wallet-hero-balance {
		align-items: flex-start;
		width: 100%;
		min-width: 0;
	}

	.cui-wallet-balance-card {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.cui-wallet-balance-card__copy {
		flex: 1 1 calc(100% - 60px);
	}

	.cui-wallet-transaction {
		grid-template-columns: 32px minmax(0, 1fr);
	}

	.cui-wallet-transaction__amount {
		grid-column: 2;
		justify-self: start;
	}

}
/* ========================================================================
   37. CHECKOUT / PARTIAL WALLET PAYMENT
   Woo Wallet partial-payment row inside WooCommerce order-review tables
======================================================================== */

.cui-wallet-partial-payment > th,
.cui-wallet-partial-payment > td {
	vertical-align: middle;
	background: var(--cui-blue-soft);
	border-top-color: #dce8fa;
	border-bottom-color: #dce8fa;
}

.cui-wallet-partial-payment > th {
	border-inline-start: 1px solid #dce8fa;
}

.cui-wallet-partial-payment > td {
	width: 74px;
	border-inline-end: 1px solid #dce8fa;
}

.cui-wallet-partial-payment__heading,
.cui-wallet-partial-payment__auto {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
}

.cui-wallet-partial-payment__auto {
	flex-wrap: wrap;
}

.cui-wallet-partial-payment__icon {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--cui-blue-600);
	background: #fff;
	border: 1px solid #dce8fa;
	border-radius: 9px;
	font-size: 12px;
}

.cui-wallet-partial-payment__copy {
	flex: 1 1 220px;
	min-width: 0;
}

.cui-wallet-partial-payment__copy strong,
.cui-wallet-partial-payment__copy span {
	display: block;
}

.cui-wallet-partial-payment__copy strong {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.7;
}

.cui-wallet-partial-payment__copy span {
	margin-top: 2px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.75;
}

.cui-wallet-partial-payment__info {
	flex: 0 0 auto;
	color: var(--cui-blue-600);
	cursor: help;
	outline: 0;
}

.cui-wallet-partial-payment__info:focus-visible {
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(23, 105, 224, .12);
}

.cui-wallet-partial-payment__switch {
	margin-inline: auto;
}

.cui-wallet-partial-payment__amounts {
	display: flex;
	flex: 0 1 auto;
	align-items: stretch;
	gap: 7px;
	margin-inline-start: auto;
}

.cui-wallet-partial-payment__amount {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 112px;
	padding: 7px 9px;
	background: #fff;
	border: 1px solid #dce8fa;
	border-radius: 9px;
}

.cui-wallet-partial-payment__amount small {
	color: var(--cui-text-muted);
	font-size: 10px;
	font-weight: 800;
}

.cui-wallet-partial-payment__amount strong,
.cui-wallet-partial-payment__amount .woocommerce-Price-amount {
	margin-top: 2px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-wallet-partial-payment__amount--wallet strong,
.cui-wallet-partial-payment__amount--wallet .woocommerce-Price-amount {
	color: var(--cui-success-600);
}


/* jQuery UI tooltip compatibility */

.ui-tooltip {
	z-index: 10020;
	max-width: 300px;
	padding: 8px 10px;
	color: #fff;
	background: var(--cui-navy-900);
	border: 0;
	border-radius: 8px;
	box-shadow: var(--cui-shadow-md);
	font-family: inherit;
	font-size: 12px;
	line-height: 1.8;
}


/* ------------------------------------------------------------------------
   Responsive checkout tables
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.cui-wallet-partial-payment > th,
	.cui-wallet-partial-payment > td {
		display: block;
		width: 100%;
		text-align: start;
	}

	.cui-wallet-partial-payment > th {
		border-inline-end: 1px solid #dce8fa;
		border-bottom: 0;
	}

	.cui-wallet-partial-payment > td {
		padding-top: 0;
		border-inline-start: 1px solid #dce8fa;
		border-top: 0;
	}

	.cui-wallet-partial-payment > td::before {
		display: none;
	}

	.cui-wallet-partial-payment__switch {
		margin-inline: 43px auto;
	}

	.cui-wallet-partial-payment__amounts {
		flex: 1 1 100%;
		width: 100%;
		margin-inline-start: 43px;
	}

	.cui-wallet-partial-payment__amount {
		flex: 1 1 0;
		min-width: 0;
	}

}

@media (max-width: 440px) {

	.cui-wallet-partial-payment__amounts {
		flex-direction: column;
	}

}

/* ========================================================================
   38. ACCOUNT / PROFILE MEDIA EDITOR
   Account summary, media uploaders and avatar/logo crop editor
======================================================================== */

/* ------------------------------------------------------------------------
   Email activation
------------------------------------------------------------------------ */

.cui-account-email-alert {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin-bottom:30px;
}

.cui-account-email-alert__action {
	margin: 0;
}


/* ------------------------------------------------------------------------
   Account card / summary
------------------------------------------------------------------------ */

.cui-account-card {
	padding: 20px;
}

.cui-account-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 17px;
	border-bottom: 1px solid var(--cui-border);
}

.cui-account-summary__profile {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cui-account-summary__avatar {
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	overflow: hidden;
	background: var(--cui-blue-soft);
	border: 4px solid var(--cui-blue-soft);
	border-radius: 18px;
	box-shadow: var(--cui-shadow-sm);
}

.cui-account-summary__avatar-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
}

.cui-account-summary__copy {
	min-width: 0;
}

.cui-account-summary__copy > span {
	display: block;
	margin-bottom: 2px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 800;
}

.cui-account-summary__copy h2 {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.6;
}

.cui-account-summary__copy p {
	margin: 2px 0 0;
	color: var(--cui-text-muted);
	font-size: 10px;;
}

.cui-account-summary__privacy {
	display: flex;
	align-items: center;
	gap: 7px;
	max-width: 310px;
	padding: 9px 10px;
	color: var(--cui-text-muted);
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.8;
}

.cui-account-summary__privacy i {
	color: var(--cui-blue-600);
}


/* ------------------------------------------------------------------------
   Fields
------------------------------------------------------------------------ */

.cui-account-fields {
	margin-bottom: 16px;
}

.cui-account-field-warning {
	color: var(--cui-danger-600);
}


/* ------------------------------------------------------------------------
   Media uploader
------------------------------------------------------------------------ */

.cui-account-uploader {
	margin-top: 12px;
	padding: 16px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
}

.cui-account-uploader--organization {
	background:
		linear-gradient(
			135deg,
			#fbfaff,
			var(--cui-surface-soft)
		);
}

.cui-account-uploader__layout {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
}

.cui-account-media-preview {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 172px;
	min-height: 145px;
	overflow: hidden;
	background:
		linear-gradient(
			45deg,
			#eef2f7 25%,
			transparent 25%
		),
		linear-gradient(
			-45deg,
			#eef2f7 25%,
			transparent 25%
		),
		linear-gradient(
			45deg,
			transparent 75%,
			#eef2f7 75%
		),
		linear-gradient(
			-45deg,
			transparent 75%,
			#eef2f7 75%
		);
	background-color: #fff;
	background-position:
		0 0,
		0 9px,
		9px -9px,
		-9px 0;
	background-size: 18px 18px;
	border: 1px solid var(--cui-border);
	border-radius: 13px;
}

.cui-account-media-preview--avatar {
	aspect-ratio: 1 / 1;
	min-height: 0;
}

.cui-account-media-preview--logo {
	aspect-ratio: 2 / 1;
	min-height: 86px;
}

.cui-account-media-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cui-account-media-preview--logo img {
	padding: 10px;
	background: rgba(255, 255, 255, .92);
	object-fit: contain;
}

.cui-account-media-placeholder {
	display: none;
	place-items: center;
	width: 56px;
	height: 56px;
	color: var(--cui-text-faint);
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--cui-border);
	border-radius: 15px;
	font-size: 20px;
}

.cui-account-media-preview.is-empty img,
.cui-account-media-preview img[hidden] {
	display: none;
}

.cui-account-media-preview.is-empty
.cui-account-media-placeholder {
	display: grid;
}

.cui-account-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 145px;
	padding: 17px;
	text-align: center;
	background: #fff;
	border: 1.5px dashed var(--cui-border-strong);
	border-radius: 13px;
	cursor: pointer;
	outline: none;
	transition:
		border-color var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast),
		transform var(--cui-transition-fast);
}

.cui-account-dropzone:hover,
.cui-account-dropzone:focus-visible,
.cui-account-dropzone.is-dragover {
	background: var(--cui-blue-soft);
	border-color: var(--cui-blue-600);
	box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
	transform: translateY(-1px);
}

.cui-account-dropzone__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 7px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 11px;
	font-size: 14px;
}

.cui-account-dropzone__icon--purple {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-account-dropzone strong {
	margin-bottom: 3px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-account-dropzone p,
.cui-account-dropzone small {
	margin: 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-account-dropzone small {
	margin-top: 3px;
	color: var(--cui-text-faint);
	font-size: 10px;
}

.cui-account-media-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}

.cui-account-media-actions
[data-bbb-remove-image][hidden],
.cui-account-media-actions
[data-cui-remove-image][hidden] {
	display: none;
}

.cui-account-media-status {
	min-height: 18px;
	margin: 7px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-account-media-status.is-success {
	color: var(--cui-success-600);
}

.cui-account-media-status.is-error {
	color: var(--cui-danger-600);
}

.cui-account-form-actions {
	margin-top: 17px;
	padding-top: 15px;
	border-top: 1px solid var(--cui-border);
}


/* ------------------------------------------------------------------------
   Screen-reader file inputs
------------------------------------------------------------------------ */

.cui-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ------------------------------------------------------------------------
   Shared account image editor
------------------------------------------------------------------------ */

body.bbb-image-editor-open,
body.cui-image-editor-open {
	overflow: hidden;
}

.cui-image-editor-modal {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(7, 18, 45, .72);
	backdrop-filter: blur(7px);
}

.cui-image-editor-modal[hidden] {
	display: none;
}

.cui-image-editor-dialog {
	width: min(100%, 920px);
	max-height: calc(100dvh - 36px);
	overflow: auto;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 20px;
	box-shadow: var(--cui-shadow-modal);
}

.cui-image-editor-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	padding: 17px 19px;
	border-bottom: 1px solid var(--cui-border);
}

.cui-image-editor-kicker {
	display: block;
	margin-bottom: 2px;
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
}

.cui-image-editor-header h2 {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.6;
}

.cui-image-editor-header p {
	margin: 2px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-image-editor-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 225px;
	gap: 15px;
	padding: 17px 19px;
}

.cui-image-editor-stage {
	position: relative;
	min-width: 0;
	min-height: 400px;
	overflow: hidden;
	background: #111827;
	border-radius: 15px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	touch-action: none;
	user-select: none;
}

.cui-image-editor-stage canvas {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	cursor: grab;
	touch-action: none;
}

.cui-image-editor-stage canvas.is-dragging {
	cursor: grabbing;
}

.cui-image-editor-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #fff;
	background: rgba(17, 24, 39, .82);
	font-size: 12px;
	font-weight: 900;
}

.cui-image-editor-loading[hidden] {
	display: none;
}

.cui-image-editor-controls {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cui-image-editor-control-card,
.cui-image-editor-tool-grid {
	padding: 11px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 11px;
}

.cui-image-editor-control-card > label {
	display: block;
	margin-bottom: 8px;
	color: var(--cui-text-strong);
	font-size: 10px;;
	font-weight: 900;
}

.cui-image-editor-zoom {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 32px;
	align-items: center;
	gap: 7px;
}

.cui-image-editor-zoom input[type="range"] {
	width: 100%;
	accent-color: var(--cui-blue-600);
}

.cui-image-editor-tool-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
}

.cui-image-editor-reset {
	grid-column: 1 / -1;
}

.cui-image-editor-help {
	margin: 0;
}

.cui-image-editor-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 19px 17px;
	border-top: 1px solid var(--cui-border);
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 800px) {

	.cui-account-email-alert {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.cui-account-email-alert__action {
		grid-column: 1 / -1;
	}

	.cui-account-summary {
		align-items: flex-start;
		flex-direction: column;
	}

	.cui-account-summary__privacy {
		width: 100%;
		max-width: none;
	}

	.cui-account-uploader__layout {
		grid-template-columns: 145px minmax(0, 1fr);
	}

	.cui-image-editor-body {
		grid-template-columns: 1fr;
	}

	.cui-image-editor-controls {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cui-image-editor-help {
		grid-column: 1 / -1;
	}

}

@media (max-width: 560px) {

	.cui-account-card {
		padding: 14px;
	}

	.cui-account-summary__avatar {
		flex-basis: 58px;
		width: 58px;
		height: 58px;
		border-radius: 15px;
	}

	.cui-account-uploader__layout {
		grid-template-columns: 1fr;
	}

	.cui-account-media-preview--avatar {
		width: min(100%, 190px);
		margin: 0 auto;
	}

	.cui-account-media-preview--logo {
		max-width: none;
		min-height: 118px;
	}

	.cui-account-media-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.cui-account-media-actions .cui-btn,
	.cui-account-form-actions .cui-btn {
		width: 100%;
	}

	.cui-image-editor-modal {
		align-items: flex-end;
		padding: 0;
	}

	.cui-image-editor-dialog {
		width: 100%;
		max-height: calc(100dvh - 10px);
		border-radius: 20px 20px 0 0;
	}

	.cui-image-editor-header,
	.cui-image-editor-body,
	.cui-image-editor-footer {
		padding-inline: 14px;
	}

	.cui-image-editor-stage {
		min-height: 280px;
	}

	.cui-image-editor-controls {
		display: flex;
	}

	.cui-image-editor-footer {
		flex-direction: column-reverse;
	}

	.cui-image-editor-footer .cui-btn {
		width: 100%;
	}

}

/* ========================================================================
   39. PUBLIC ROOM ENTRY
   Standalone class/webinar join page
======================================================================== */

.cui-room-entry-body {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(
			circle at 16% 12%,
			rgba(23, 105, 224, .12),
			transparent 28%
		),
		radial-gradient(
			circle at 85% 80%,
			rgba(124, 88, 214, .12),
			transparent 30%
		),
		linear-gradient(
			180deg,
			#f5f8fd,
			#edf3fb
		);
}

.cui-room-entry-page {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 28px 18px;
	overflow: hidden;
	direction: rtl;
	color: var(--cui-text);
}

.cui-room-entry-orb {
	position: fixed;
	border-radius: 50%;
	filter: blur(3px);
	pointer-events: none;
}

.cui-room-entry-orb--one {
	top: -110px;
	right: -90px;
	width: 320px;
	height: 320px;
	background: rgba(23, 105, 224, .09);
}

.cui-room-entry-orb--two {
	bottom: -130px;
	left: -100px;
	width: 360px;
	height: 360px;
	background: rgba(124, 88, 214, .08);
}

.cui-room-entry-shell {
	position: relative;
	z-index: 1;
	width: min(100%, 1040px);
}

.cui-room-entry-notice {
	position: relative;
	margin-bottom: 12px;
	padding-inline-end: 48px;
}

.cui-room-entry-notice__close {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}

.cui-room-entry-card {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
	overflow: hidden;
	background: rgba(255, 255, 255, .96);
	border: 1px solid rgba(216, 225, 237, .9);
	border-radius: 24px;
	box-shadow:
		0 28px 80px rgba(15, 36, 87, .13),
		0 4px 16px rgba(15, 36, 87, .04);
	backdrop-filter: blur(12px);
}

.cui-room-entry-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 34px;
}

.cui-room-entry-brand {
	display: flex;
	align-items: center;
	min-height: 48px;
	margin-bottom: 24px;
}

.cui-room-entry-brand__image {
	display: block;
	width: auto;
	max-width: 170px;
	height: auto;

	object-fit: contain;
}

.cui-room-entry-heading {
	margin-bottom: 20px;
}

.cui-room-entry-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 10px;
	color: var(--cui-blue-600);
	font-size: 12px;
	font-weight: 900;
}

.cui-room-entry-title {
	margin: 0;
	color: var(--cui-text-strong);
	font-size: clamp(20px, 2.5vw, 30px);
	font-weight: 950;
	line-height: 1.6;
	letter-spacing: -.02em;
}

.cui-room-entry-description {
	max-width: 570px;
	margin: 7px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.95;
}

.cui-room-entry-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 2px;
}

.cui-room-entry-form
.cui-control {
	background: #fff;
}

.cui-room-entry-role-switch {
	margin-top: 2px;
}

.cui-room-entry-actions {
	margin-top: 4px;
}

.cui-room-entry-submit {
	width: 100%;
	min-height: 48px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 900;
	box-shadow: 0 10px 22px rgba(23, 105, 224, .18);
}

.cui-room-entry-trust {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 18px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 750;
}

.cui-room-entry-trust span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.cui-room-entry-trust i {
	color: var(--cui-success-600);
}


/* ------------------------------------------------------------------------
   Status cards
------------------------------------------------------------------------ */

.cui-room-status {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 4px;
	padding: 15px;
	border: 1px solid;
	border-radius: 14px;
}

.cui-room-status--waiting {
	color: #7a5a18;
	background: var(--cui-orange-soft);
	border-color: #f1ddb4;
}

.cui-room-status--expired {
	color: #9c244b;
	background: var(--cui-red-soft);
	border-color: #f1cedb;
}

.cui-room-status__icon {
	display: inline-flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, .82);
	border-radius: 11px;
	font-size: 14px;
}

.cui-room-status--waiting
.cui-room-status__icon {
	color: var(--cui-warning-600);
}

.cui-room-status--expired
.cui-room-status__icon {
	color: var(--cui-danger-600);
}

.cui-room-status__copy {
	min-width: 0;
}

.cui-room-status__copy > span {
	display: block;
	color: inherit;
	opacity: .72;
	font-size: 12px;
	font-weight: 800;
}

.cui-room-status__copy strong {
	display: block;
	margin-top: 2px;
	color: inherit;
	font-size: 12px;
	font-weight: 950;
	line-height: 1.8;
}

.cui-room-status__copy p {
	margin: 6px 0 0;
	color: inherit;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.8;
}

.cui-room-status__copy small {
	display: block;
	margin-top: 3px;
	color: inherit;
	opacity: .76;
	font-size: 12px;
	line-height: 1.8;
}


/* ------------------------------------------------------------------------
   Visual side
------------------------------------------------------------------------ */

.cui-room-entry-visual {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 34px 30px;
	overflow: hidden;
	background:
		linear-gradient(
			155deg,
			#12377c 0%,
			#0f2c69 46%,
			#151f52 100%
		);
	color: #fff;
}

.cui-room-entry-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at 20% 20%,
			rgba(56, 143, 255, .24),
			transparent 31%
		),
		radial-gradient(
			circle at 85% 78%,
			rgba(142, 102, 255, .18),
			transparent 34%
		);
	pointer-events: none;
}

.cui-room-entry-visual__badge {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 900;
	backdrop-filter: blur(8px);
}

.cui-room-entry-visual__badge span {
	color: #55d69f;
	font-size: 5px;
}

.cui-room-entry-visual__image-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	margin-block: 16px;
}

.cui-room-entry-visual__glow {
	position: absolute;
	width: 230px;
	height: 230px;
	background: rgba(69, 145, 255, .18);
	border-radius: 50%;
	filter: blur(18px);
}

.cui-room-entry-visual__image {
	position: relative;
	z-index: 1;
	display: block;
	width: min(100%, 380px);
	max-height: 300px;
	object-fit: contain;
	filter: drop-shadow(0 18px 30px rgba(4, 13, 37, .22));
}

.cui-room-entry-feature-list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.cui-room-entry-feature {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 11px;
	backdrop-filter: blur(8px);
}

.cui-room-entry-feature > span {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #bcd8ff;
	background: rgba(255, 255, 255, .09);
	border-radius: 9px;
	font-size: 12px;
}

.cui-room-entry-feature strong,
.cui-room-entry-feature small {
	display: block;
}

.cui-room-entry-feature strong {
	color: #fff;
	font-size: 10px;;
	font-weight: 900;
}

.cui-room-entry-feature small {
	margin-top: 2px;
	color: rgba(255, 255, 255, .62);
	font-size: 10px;
	line-height: 1.6;
}


/* ------------------------------------------------------------------------
   Footer
------------------------------------------------------------------------ */

.cui-room-entry-footer {
	margin-top: 12px;
	color: var(--cui-text-muted);
	text-align: center;
	font-size: 12px;
	font-weight: 700;
}

.cui-room-entry-footer a {
	color: var(--cui-blue-600);
	font-weight: 900;
	text-decoration: none;
}

.cui-room-entry-footer a:hover {
	text-decoration: underline;
}



@media (max-width:768px) {

.cui-room-entry-visual {
display: none;
}

.cui-room-entry-shell {
	margin: auto 0;
}

}

/* ------------------------------------------------------------------------
   Standalone page compatibility
------------------------------------------------------------------------ */

.cui-room-entry-page
.bbb-join-room-input {
	box-sizing: border-box;
}

.cui-room-entry-page
[data-bbb-moderator-password][hidden],
.cui-room-entry-page
[data-cui-moderator-password][hidden] {
	display: none;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 900px) {

	.cui-room-entry-page {
		align-items: flex-start;
		padding: 18px 14px;
	}

	.cui-room-entry-card {
		grid-template-columns: 1fr;
	}

	.cui-room-entry-content {
		padding: 26px;
	}

	.cui-room-entry-visual {
		padding: 26px;
	}

	.cui-room-entry-visual__image-wrap {
		min-height: 220px;
	}

}

@media (max-width: 620px) {

	.cui-room-entry-card {
		border-radius: 18px;
	}

	.cui-room-entry-content,
	.cui-room-entry-visual {
		padding: 19px;
	}

	.cui-room-entry-brand {
		margin-bottom: 18px;
	}

	.cui-room-entry-brand__image {
		max-width: 145px;
		max-height: 42px;
	}

	.cui-room-entry-title {
		font-size: 20px;
	}

	.cui-room-entry-feature-list {
		grid-template-columns: 1fr;
	}

	.cui-room-entry-visual__image-wrap {
		min-height: 180px;
	}

	.cui-room-entry-visual__image {
		max-height: 220px;
	}

	.cui-room-status {
		flex-direction: column;
	}

}

@media (max-width: 420px) {

	.cui-room-entry-page {
		padding-inline: 10px;
	}

	.cui-room-entry-content,
	.cui-room-entry-visual {
		padding: 16px;
	}

	.cui-room-entry-notice {
		padding-inline-end: 42px;
	}

	.cui-room-entry-trust {
		align-items: flex-start;
		flex-direction: column;
	}

}
/* ========================================================================
   40. RESOURCE COLLECTION
   Shared by "My classes", "My webinars" and registered class/webinar lists.
======================================================================== */

.cui-collection-toolbar {
	gap: 12px;
	padding: 10px;
	background: linear-gradient(180deg, #fff, #fbfcff);
	border-color: #dfe6f0;
	box-shadow: 0 8px 24px rgba(24, 42, 82, .055);
}

.cui-collection-toolbar .cui-search {
	flex: 1 1 460px;
	max-width: 720px;
}

.cui-collection-toolbar__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-inline-start: auto;
}

.cui-visible-count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.cui-visible-count strong,
.cui-visible-count span {
	color: var(--cui-text-strong);
	font-weight: 900;
}

/* کالکشن پایه */
.cui-resource-collection {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	margin-bottom: 30px;
}

/* پشتیبانی استاندارد از شبکه ۴ ستونه بدون نیاز به !important */
.cui-resource-collection.cui-cards-grid--4,
.cui-cards-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cui-resource-collection.is-list-view {
	grid-template-columns: 1fr;
}

.cui-resource-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "identity join" "actions actions";
	gap: 14px 18px;
	align-items: center;
	min-width: 0;
	min-height: 188px;
	padding: 17px;
	overflow: hidden;
	transition: transform var(--cui-transition), border-color var(--cui-transition), box-shadow var(--cui-transition);
}

.cui-resource-card::before {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, var(--cui-blue-600), var(--cui-purple-600));
	content: "";
}

.cui-resource-card:hover {
	border-color: #d8e4f2;
	box-shadow: var(--cui-shadow-md);
	transform: translateY(-2px);
}

.cui-resource-card__identity {
	grid-area: identity;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	min-width: 0;
}

.cui-resource-card__icon {
	display: inline-flex;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border: 1px solid #dbe8fb;
	border-radius: 12px;
	font-size: 14px;
}

.cui-resource-card__copy {
	min-width: 0;
}

.cui-resource-card__eyebrow {
	display: block;
	margin-bottom: 3px;
	color: var(--cui-blue-600);
	font-size: 10px;
	font-weight: 900;
}

.cui-resource-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--cui-text-strong);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.8;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.cui-resource-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 10px;
	margin-top: 8px;
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 700;
}

.cui-resource-card__meta > span:not(.cui-badge) {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.cui-resource-card__meta i {
	color: var(--cui-blue-600);
}

.cui-resource-card__meta strong,
.cui-resource-card__meta .cui-badge strong {
	color: inherit;
	font-weight: 900;
}

.cui-resource-card__join {
	grid-area: join;
	align-self: center;
	min-width: 120px;
	white-space: nowrap;
}

.cui-resource-card__join-form {
	margin: 0;
}

.cui-resource-card__join .cui-btn,
.cui-btn.cui-resource-card__join {
	min-width: 120px;
	white-space: nowrap;
}

.cui-resource-card__actions {
	grid-area: actions;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7px;
	padding-top: 12px;
	border-top: 1px solid var(--cui-border);
}

.student .cui-resource-card__actions {
	grid-template-columns: repeat(3, 1fr);
}

.cui-resource-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 7px 9px;
	color: var(--cui-text-muted);
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 9px;
	font-family: inherit;
	font-size: 10px;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--cui-transition-fast);
}

.cui-resource-action:hover {
	transform: translateY(-1px);
}

.cui-resource-action--share {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
	border-color: #e3dcff;
}

.cui-resource-action--edit {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-color: #dae8fb;
}

.cui-resource-action--record {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
	border-color: #f3d5df;
}

.cui-resource-action--settings {
	color: #7a5a18;
	background: var(--cui-orange-soft);
	border-color: #f1ddb4;
}

/* آرایش داخلی کارت‌ها درون گرید ۴ ستونه برای تناسب ابعاد */
.cui-cards-grid--4:not(.is-list-view) .cui-resource-card {
	grid-template-columns: 1fr;
	grid-template-areas: "identity" "join" "actions";
	gap: 12px;
	min-height: 0;
	padding: 14px;
}

.cui-cards-grid--4:not(.is-list-view) .cui-resource-card__join,
.cui-cards-grid--4:not(.is-list-view) .cui-resource-card__join-form,
.cui-cards-grid--4:not(.is-list-view) .cui-resource-card__join .cui-btn,
.cui-cards-grid--4:not(.is-list-view) .cui-btn.cui-resource-card__join {
	width: 100%;
}

/* حالت لیستی */
.cui-resource-collection.is-list-view .cui-resource-card {
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas: "identity actions join";
	min-height: 96px;
	padding-block: 13px;
}

.cui-resource-collection.is-list-view .cui-resource-card__identity {
	align-items: center;
}

.cui-resource-collection.is-list-view .cui-resource-card__icon {
	flex-basis: 40px;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	font-size: 12px;
}

.cui-resource-collection.is-list-view .cui-resource-card__title {
	-webkit-line-clamp: 1;
}

.cui-resource-collection.is-list-view .cui-resource-card__actions {
	display: flex;
	gap: 5px;
	padding-top: 0;
	border-top: 0;
}

.cui-resource-collection.is-list-view .cui-resource-action {
	position: relative;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
}

.cui-resource-collection.is-list-view .cui-resource-action span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cui-resource-search-empty,
.cui-resource-empty,
.cui-resource-collection > .cui-pagination {
	grid-column: 1 / -1;
}

.cui-resource-empty {
	min-height: 230px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* ریسپانسیو ۴ ستونه و صفحات فشرده */
@media (max-width: 1400px) {
	.cui-cards-grid--4:not(.is-list-view) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1050px) {
	.cui-resource-collection,
	.cui-cards-grid--4:not(.is-list-view) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cui-resource-collection.is-list-view .cui-resource-card {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "identity join" "actions actions";
	}

	.cui-resource-collection.is-list-view .cui-resource-card__actions {
		padding-top: 10px;
		border-top: 1px solid var(--cui-border);
	}
}

@media (max-width: 767px) {
	.cui-resource-collection,
	.cui-cards-grid--4:not(.is-list-view) {
		grid-template-columns: 1fr;
	}

	.cui-collection-toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
		padding: 8px;
	}

	.cui-collection-toolbar .cui-search {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	.cui-collection-toolbar__meta {
		justify-content: space-between;
		width: 100%;
		margin-inline-start: 0;
	}

	.cui-resource-card,
	.cui-resource-collection.is-list-view .cui-resource-card {
		grid-template-columns: 1fr;
		grid-template-areas: "identity" "join" "actions";
		min-height: 0;
		padding: 14px;
	}

	.cui-resource-card__join,
	.cui-resource-card__join-form,
	.cui-resource-card__join .cui-btn,
	.cui-btn.cui-resource-card__join {
		width: 100%;
	}

	.cui-resource-collection.is-list-view .cui-resource-card__actions {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
	}

	.cui-resource-collection.is-list-view .cui-resource-action {
		width: auto;
		min-width: 0;
		height: auto;
		min-height: 38px;
		padding: 7px 9px;
	}

	.cui-resource-collection.is-list-view .cui-resource-action span {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.cui-resource-card__actions {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.student .cui-resource-card__actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.cui-collection-toolbar__meta {
		align-items: flex-start;
		flex-direction: column;
	}


	.student .cui-resource-card__actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* ========================================================================
   41. SHARED OWNER EXTRAS
   Facts, share modal, information panel and FAQ.
======================================================================== */

.cui-fact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 15px;
}

.cui-fact-card {
	padding: 10px 11px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 10px;
}

.cui-fact-card > span {
	display: block;
	margin-bottom: 3px;
	color: var(--cui-text-muted);
	font-size: 10px;
	font-weight: 800;
}

.cui-fact-card > strong {
	display: block;
	min-height: 18px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-share__title {
	display: block;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-share__description {
	margin: 3px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}

.cui-modal--share .cui-modal__dialog {
	width: min(680px, 100%);
}

.cui-modal--share .cui-modal__body {
	padding: 22px;
}

.cui-copy-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: stretch;
	padding: 8px;
	background: linear-gradient(135deg, #f7faff, #fff);
	border: 1px solid #dbe5f2;
	border-radius: 15px;
	box-shadow: 0 8px 24px rgba(24, 42, 82, .055);
}

.cui-modal--share .cui-copy-field__control {
	min-height: 50px;
}

.cui-modal--share .cui-copy-field__input {
	height: 50px;
	padding-inline: 48px;
	background: #fff;
	border: 1px solid #dce5ef;
	border-radius: 11px;
	font-size: 12px;
}

.cui-copy-field__icon {
	position: absolute;
	z-index: 2;
	top: 50%;
	inset-inline-end: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 9px;
	font-size: 12px;
	transform: translateY(-50%);
	pointer-events: none;
}

.cui-modal--share .CopyIconBtn {
	min-width: 118px;
	min-height: 50px;
	border-radius: 11px;
}

.cui-owner-plan-warning {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
	color: var(--cui-danger-600);
	font-size: 12px;;
	font-weight: 900;
}

.cui-owner-private-panel {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 17px;
}

.cui-owner-private-panel__icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
	border-radius: 12px;
	font-size: 14px;
}

.cui-owner-private-panel strong {
	display: block;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-owner-private-panel p {
	margin: 4px 0 0;
	color: var(--cui-text-muted);
	font-size: 10px;;
	line-height: 1.9;
}

.cui-faq-card {
	padding: 17px;
	margin-bottom: 100px;
}

.cui-faq-list {
	display: grid;
	gap: 7px;
	margin-top: 13px;
}

.cui-faq-item {
	overflow: hidden;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 11px;
}

.cui-faq-item summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 38px 10px 12px;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.8;
	cursor: pointer;
	list-style: none;
}

.cui-faq-item summary::-webkit-details-marker {
	display: none;
}

.cui-faq-item summary::before,
.cui-faq-item summary::after {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 12px;
	height: 2px;
	background: var(--cui-blue-600);
	border-radius: 999px;
	content: "";
	transform: translateY(-50%);
	transition: transform var(--cui-transition-fast);
}

.cui-faq-item summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.cui-faq-item[open] summary::after {
	transform: translateY(-50%);
}

.cui-faq-item > div {
	padding: 0 12px 11px;
}

.cui-faq-item p {
	margin: 0;
	color: var(--cui-text-muted);
	font-size: 13px;;
	line-height: 2;
}

@media (max-width: 767px) {
	.cui-modal--share .cui-modal__dialog {
		width: min(94vw, 680px);
	}

	 .cui-copy-field {
		grid-template-columns: 1fr;
	}

	.cui-modal--share .CopyIconBtn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.cui-fact-grid {
		grid-template-columns: 1fr;
	}
}


@media (max-width: 767px) {
.cui-grid.cui-grid--4.cui-dashboard-shortcuts {
	margin-bottom: 100px;
}
}

/* ========================================================================
   42. RECORDINGS ARCHIVE PAGE
   Shared shell for owner and student room-recording pages
======================================================================== */

/* ------------------------------------------------------------------------
   Room identity badge
------------------------------------------------------------------------ */

.cui-recordings-room-badge {
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: 320px;
	padding: 9px 11px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 11px;
}

.cui-recordings-room-badge__icon {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 9px;
	font-size: 12px;
}

.cui-recordings-room-badge > div {
	min-width: 0;
}

.cui-recordings-room-badge small {
	display: block;
	margin-bottom: 2px;
	color: var(--cui-text-muted);
	font-size: 10px;
	font-weight: 800;
}

.cui-recordings-room-badge strong {
	display: block;
	overflow: hidden;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 950;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ------------------------------------------------------------------------
   Archive content
------------------------------------------------------------------------ */

.cui-recordings-content-card {
	padding: 18px;
}

.cui-recordings-content-body {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--cui-border);
}

.cui-recordings-shortcode {
	width: 100%;
	min-width: 0;
}

.cui-recordings-shortcode iframe,
.cui-recordings-shortcode video {
	max-width: 100%;
	border-radius: var(--cui-radius-md);
}

.cui-recordings-shortcode table {
	width: 100%;
	max-width: 100%;
}

.cui-recordings-shortcode img {
	max-width: 100%;
	height: auto;
}

.cui-recordings-shortcode a {
	word-break: break-word;
}

.cui-recordings-status-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--cui-success-600);
	border-radius: 50%;
	box-shadow:
		0 0 0 3px rgba(18, 168, 121, .12);
}


/* ------------------------------------------------------------------------
   Recording share modal
------------------------------------------------------------------------ */

.cui-recording-share__title {
	display: block;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 950;
}

.cui-recording-share__description {
	margin: 3px 0 0;
	color: var(--cui-text-muted);
	font-size: 12px;
	line-height: 1.8;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.cui-recordings-content-card {
		padding: 14px;
	}

	.cui-recordings-room-badge {
		width: 100%;
		max-width: none;
	}

}

@media (max-width: 480px) {

	.cui-recordings-content-card
	.cui-section-head {
		align-items: flex-start;
		flex-direction: column;
	}

}

/* ========================================================================
   43. MONITORING
   BigBlueButton live monitoring, server health and active meetings
======================================================================== */

.cui-monitoring-server {
	display: grid;
	gap: 14px;
}


/* ------------------------------------------------------------------------
   AJAX toaster
------------------------------------------------------------------------ */

.cui-monitoring-toaster {
	position: fixed;
	z-index: 1200;
	right: 18px;
	bottom: 18px;
	display: none;
	width: min(360px, calc(100vw - 36px));
	padding: 12px 46px 12px 14px;
	color: var(--cui-text);
	background: rgba(255, 255, 255, .97);
	border: 1px solid var(--cui-border);
	border-radius: 12px;
	box-shadow: var(--cui-shadow-lg);
	backdrop-filter: blur(12px);
}

.cui-monitoring-toaster.is-open,
.cui-monitoring-toaster.show,
.cui-monitoring-toaster.active {
	display: block;
}

.cui-monitoring-toaster__close {
	position: absolute;
	top: 50%;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--cui-text-muted);
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transform: translateY(-50%);
}

.cui-monitoring-toaster__close:hover {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
}

.cui-monitoring-toaster__message {
	font-size: 12px;
	font-weight: 800;
	line-height: 1.9;
}


/* ------------------------------------------------------------------------
   Hero / server status
------------------------------------------------------------------------ */


.cui-monitoring-server-address {
	max-width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: #eee;
	padding: 5px 15px;
	border-radius: 5px;
	text-align: center;
	color: #505050;
	font-size:16px;
}


.cui-monitoring-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
	padding: 5px 8px;
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 900;
}

.cui-monitoring-status i {
	font-size: 5px;
}

.cui-monitoring-status.is-online {
	color: #087a57;
	background: var(--cui-green-soft);
}

.cui-monitoring-status.is-offline {
	color: #a6294f;
	background: var(--cui-red-soft);
}

.cui-monitoring-restart {
	white-space: nowrap;
}


/* ------------------------------------------------------------------------
   Sections
------------------------------------------------------------------------ */

.cui-monitoring-section {
	padding: 17px;
	margin-bottom: 30px;
}


/* ------------------------------------------------------------------------
   Live statistic cards
------------------------------------------------------------------------ */

.cui-monitoring-stats-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 9px;
	margin-top: 14px;
}

.cui-monitor-stat {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 12px;
	overflow: hidden;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 11px;
}

.cui-monitor-stat::after {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	width: 3px;
	height: 100%;
	background: currentColor;
	content: "";
	opacity: .72;
}

.cui-monitor-stat__icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, .78);
	border-radius: 9px;
	font-size: 17px;
}

.cui-monitor-stat > div {
	min-width: 0;
}

.cui-monitor-stat small {
	display: block;
	overflow: hidden;
	color: var(--cui-text-muted);
	font-size: 10px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-monitor-stat strong {
	display: block;
	margin-top: 2px;
	color: var(--cui-text-strong);
	font-size: 14px;
	font-weight: 950;
	line-height: 1.25;
}

.cui-monitor-stat--blue {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-color: #dbe8fb;
}

.cui-monitor-stat--green {
	color: var(--cui-success-600);
	background: var(--cui-green-soft);
	border-color: #d4eee5;
}

.cui-monitor-stat--purple {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
	border-color: #e2dcfa;
}

.cui-monitor-stat--orange {
	color: #b97b16;
	background: var(--cui-orange-soft);
	border-color: #f2dfbd;
}

.cui-monitor-stat--pink {
	color: var(--cui-accent-600);
	background: #fff0f7;
	border-color: #f1d5e2;
}

.cui-monitor-stat--navy {
	color: var(--cui-navy-800);
	background: #edf2fb;
	border-color: #d9e1ef;
}


/* ------------------------------------------------------------------------
   Server resource cards
------------------------------------------------------------------------ */

.cui-monitoring-resource-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 9px;
	margin-top: 14px;
}

.cui-monitor-resource {
	padding: 12px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: 11px;
}

.cui-monitor-resource__head {
	display: flex;
	align-items: center;
	gap: 7px;
}

.cui-monitor-resource__head > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
	border-radius: 8px;
	font-size: 12px;
}

.cui-monitor-resource__head small {
	color: var(--cui-text-muted);
	font-size: 12px;
	font-weight: 800;
}

.cui-monitor-resource > strong {
	display: block;
	margin-top: 9px;
	color: var(--cui-text-strong);
	font-size: 22px;
	font-weight: 950;
}

.cui-monitor-resource > em {
	display: block;
	margin-top: 3px;
	color: var(--cui-text-muted);
	font-size: 10px;
	font-style: normal;
	font-weight: 750;
}


/* ------------------------------------------------------------------------
   Active meetings table
------------------------------------------------------------------------ */

.cui-monitoring-table-wrap {
	margin-top: 14px;
}

.cui-monitoring-table {
	min-width: 840px;
}

.cui-monitoring-meeting-name {
	color: var(--cui-text-strong);
	font-weight: 900;
}

.cui-monitoring-table .cui-btn {
	white-space: nowrap;
}


/* ------------------------------------------------------------------------
   Hidden end-meeting bridge form
------------------------------------------------------------------------ */

.cui-monitoring-hidden-form {
	display: none;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 1180px) {

	.cui-monitoring-stats-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cui-monitoring-resource-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 767px) {

	

	

	

	.cui-monitoring-server-address {
		max-width: 100%;
		white-space: normal;
		word-break: break-all;
		
	}

	.cui-monitoring-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cui-monitoring-section {
		padding: 14px;
	}

	.cui-monitoring-table {
		min-width: 0;
	}

	.cui-monitoring-table thead {
		display: none;
	}

	.cui-monitoring-table,
	.cui-monitoring-table tbody,
	.cui-monitoring-table tr,
	.cui-monitoring-table td {
		display: block;
		width: 100%;
	}

	.cui-monitoring-table tbody {
		display: grid;
		gap: 10px;
	}

	.cui-monitoring-table tr {
		padding: 11px;
		background: var(--cui-surface-soft);
		border: 1px solid var(--cui-border);
		border-radius: 11px;
	}

	.cui-monitoring-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 7px 0;
		border: 0;
		border-bottom: 1px dashed var(--cui-border);
		font-size: 10px;;
	}

	.cui-monitoring-table td:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.cui-monitoring-table td::before {
		flex: 0 0 auto;
		color: var(--cui-text-muted);
		content: attr(data-label);
		font-size: 12px;
		font-weight: 850;
	}

	.cui-monitoring-table td .cui-btn {
		min-width: 118px;
	}

}

@media (max-width: 520px) {

	.cui-monitoring-stats-grid,
	.cui-monitoring-resource-grid {
		grid-template-columns: 1fr;
	}

	.cui-monitoring-toaster {
		right: 10px;
		bottom: 10px;
		width: calc(100vw - 20px);
	}

}

/* ========================================================================
   44. COMPLETED ORDERS
   WooCommerce My Account completed-order history
======================================================================== */

.cui-orders-count {
	min-height: 34px;
	padding-inline: 11px;
}

.cui-orders-count strong {
	color: inherit;
	font-size: 12px;
}


/* ------------------------------------------------------------------------
   Orders panel / table
------------------------------------------------------------------------ */

.cui-orders-panel {
	padding: 17px;
}

.cui-orders-table-wrap {
	margin-top: 14px;
}

.cui-orders-table {
	min-width: 860px;
}

.cui-orders-table th {
	white-space: nowrap;
}

.cui-orders-table td {
	vertical-align: middle;
}


/* ------------------------------------------------------------------------
   Order identity
------------------------------------------------------------------------ */

.cui-order-identity {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	min-width: 220px;
}

.cui-order-identity__icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 9px;
	font-size: 12px;
}

.cui-order-identity__content {
	min-width: 0;
}

.cui-order-number {
	display: block;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 950;
}

.cui-order-products {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 5px;
}

.cui-order-products span {
	display: inline-flex;
	max-width: 210px;
	padding: 3px 6px;
	overflow: hidden;
	color: var(--cui-text-muted);
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ------------------------------------------------------------------------
   Date / status / total
------------------------------------------------------------------------ */

.cui-order-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--cui-text);
	font-size: 10px;;
	font-weight: 800;
	white-space: nowrap;
}

.cui-order-date i {
	color: var(--cui-blue-600);
}

.cui-order-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	color: #087a57;
	background: var(--cui-green-soft);
	border: 1px solid #d4eee5;
	border-radius: var(--cui-radius-pill);
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
}

.cui-order-status i {
	font-size: 12px;
}

.cui-order-total strong,
.cui-order-total small {
	display: block;
}

.cui-order-total strong {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 950;
	white-space: nowrap;
}

.cui-order-total small {
	margin-top: 3px;
	color: var(--cui-text-muted);
	font-size: 10px;
	font-weight: 750;
}


/* ------------------------------------------------------------------------
   Actions
------------------------------------------------------------------------ */

.cui-order-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
}

.cui-order-action {
	white-space: nowrap;
}

.cui-order-no-action {
	color: var(--cui-text-faint);
	font-size: 12px;
	font-weight: 750;
}


/* ------------------------------------------------------------------------
   Pagination / empty
------------------------------------------------------------------------ */

.cui-orders-pagination {
	margin-top: 2px;
}

.cui-orders-empty {
	min-height: 210px;
}


/* ------------------------------------------------------------------------
   WooCommerce compatibility
------------------------------------------------------------------------ */

.cui-orders-page .woocommerce-orders-table a {
	text-decoration: none;
}

.cui-orders-page .woocommerce-orders-table .button {
	margin: 0;
}


/* ------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.cui-orders-panel {
		padding: 14px;
	}

	.cui-orders-table {
		min-width: 0;
	}

	.cui-orders-table thead {
		display: none;
	}

	.cui-orders-table,
	.cui-orders-table tbody,
	.cui-orders-table tr,
	.cui-orders-table td {
		display: block;
		width: 100%;
	}

	.cui-orders-table tbody {
		display: grid;
		gap: 10px;
	}

	.cui-orders-table tr.cui-order-row {
		padding: 12px;
		background: var(--cui-surface);
		border: 1px solid var(--cui-border);
		border-radius: 12px;
		box-shadow: var(--cui-shadow-sm);
	}

	.cui-orders-table td {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 10px;
		align-items: center;
		padding: 8px 0;
		border: 0;
		border-bottom: 1px dashed var(--cui-border);
	}

	.cui-orders-table td:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.cui-orders-table td::before {
		align-self: start;
		color: var(--cui-text-muted);
		content: attr(data-title);
		font-size: 12px;
		font-weight: 850;
		line-height: 1.8;
	}

	.cui-order-identity {
		min-width: 0;
	}

	.cui-order-products span {
		max-width: 100%;
		white-space: normal;
	}

	.cui-order-actions {
		justify-content: flex-start;
	}

}

@media (max-width: 430px) {

	.cui-orders-table td {
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.cui-orders-table td::before {
		padding-bottom: 2px;
		border-bottom: 1px solid var(--cui-border);
	}

	.cui-order-action {
		width: 100%;
	}

}

/* ========================================================================
   46. ARCHIVE PAGE SHELL ALIGNMENT
   Makes the archive use the same content geometry as dashboard/class pages.
======================================================================== */

/*
 * Archive.php is rendered outside .cui-shell-content in this theme.
 * Reserve the fixed sidebar width here, then center .cui-page inside
 * the remaining content area exactly like the regular shell pages.
 */
.cui-archive-layout {
	width: auto;
	min-width: 0;
	margin-inline-start: var(--cui-shell-sidebar);
	transition: margin-inline-start var(--cui-transition);
}

body.cui-sidebar-collapsed
.cui-archive-layout {
	margin-inline-start: var(--cui-shell-sidebar-collapsed);
}


/*
 * Do not create a second archive-specific max width.
 * Reuse the same global page width/padding as "کلاس های من".
 */
.cui-archive-layout
.cui-archive-page {
	width: 100%;
	max-width: var(--cui-page-max);
	margin-inline: auto;
	padding: 22px;
}


/* Archive spacing only; horizontal sizing comes from the shared page shell. */


.cui-archive-page
.cui-page-hero--archive {
	margin:80px 0 25px 0;
}

.cui-archive-page
.cui-content-grid {
	gap: 18px;
}


/*
 * Ensure cards never visually touch the fixed sidebar even when the
 * viewport is only slightly wider than desktop breakpoint.
 */
@media (min-width: 992px) {

	.cui-archive-layout
	.cui-archive-page {
		padding-inline: clamp(22px, 2vw, 34px);
	}

}


/* Mobile/tablet: sidebar becomes overlay, so remove the desktop reservation. */
@media (max-width: 991px) {

	.cui-archive-layout,
	body.cui-sidebar-collapsed
	.cui-archive-layout {
		width: 100%;
		margin-inline-start: 0;
	}

	.cui-archive-layout
	.cui-archive-page {
		width: 100%;
		max-width: var(--cui-page-max);
		margin-inline: auto;
		padding: 16px;
	}

}


/* Mobile cards keep a visible gutter from the screen edges. */
@media (max-width: 767px) {

	.cui-archive-layout
	.cui-archive-page {
		padding: 12px;
	}

	.cui-archive-page
	.cui-page-hero--archive {
		margin-bottom: 12px;
	}

	.cui-archive-page
	.cui-content-grid {
		gap: 12px;
	}

}

/* ========================================================================
   51. ROOM DETAIL COMPOSITIONS
   Shared class/webinar access panel and invitation row.
======================================================================== */

.cui-room-access-card--split {
	padding: 18px;
}

.cui-room-access-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 32%);
	grid-template-areas: "info join";
	gap: 16px;
	align-items: stretch;
	direction: ltr;
}

.cui-room-access-info {
	grid-area: info;
	min-width: 0;
	direction: rtl;
}

.cui-room-access-card--split .cui-room-access-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(96px, auto);
	align-content: start;
	gap: 12px;
}

.cui-room-access-card--split .cui-info-item {
	position: relative;
	min-height: 96px;
	max-height: 110px;
	padding: 16px;
	background: linear-gradient(180deg, #fff, #fbfcff);
	border-color: #dce5f0;
	box-shadow: 0 4px 14px rgba(24, 42, 82, .025);
}

.cui-room-access-card--split .cui-info-item__icon {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	width: 34px;
	height: 34px;
}

.cui-room-access-card--split .cui-info-item__copy {
	gap: 5px;
	padding-inline-end: 46px;
}

.cui-room-join-panel {
	grid-area: join;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: 220px;
	margin: 0;
	padding: 24px 20px;
	color: #fff;
	background: linear-gradient(145deg, #173876, #1b4f9a);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	box-shadow: 0 16px 34px rgba(15, 36, 87, .18);
	direction: rtl;
	text-align: center;
}

.cui-room-join-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: #fff;
	background: rgba(255, 255, 255, .13);
	border-radius: 13px;
	font-size: 16px;
}

.cui-room-join-panel__copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cui-room-join-panel__copy strong {
	color: #fff;
	font-size: 15px;
	font-weight: 900;
}

.cui-room-join-panel__copy small {
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
}

.cui-room-join-panel .cui-room-join__form {
	width: 100%;
	margin: 0;
}

.cui-room-join-panel__button {
	width: 100%;
	min-height: 48px;
	color: var(--cui-navy-900);
	background: #fff;
	border-color: transparent;
	box-shadow: 0 8px 20px rgba(6, 20, 50, .14);
}

.cui-room-join-panel__button:hover {
	color: var(--cui-navy-900);
	background: #f7faff;
}

.cui-room-join-panel__warning {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 8px 10px;
	color: #fff2bf;
	background: rgba(243, 167, 47, .13);
	border: 1px solid rgba(243, 167, 47, .24);
	border-radius: 9px;
	font-size: 10px;;
}

.cui-room-share-card--inline {
	padding: 17px 18px;
	margin-bottom: 30px;
}

.cui-room-share-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
	grid-template-areas: "field head";
	gap: 20px;
	align-items: center;
	direction: ltr;
}

.cui-room-share-card__head {
	grid-area: head;
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	direction: rtl;
}

.cui-room-share-card__icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
	border-radius: 12px;
	font-size: 15px;
}

.cui-room-share-card__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cui-room-share-card__copy strong {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-room-share-card__copy small {
	color: var(--cui-text-muted);
	font-size: 10px;;
}

.cui-room-share-copy {
	grid-area: field;
	min-width: 0;
	direction: ltr;
}

.cui-room-share-copy .cui-copy-field__control {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.cui-room-share-copy .cui-copy-field__input {
	position: static;
	flex: 1 1 auto;
	height: 48px;
	padding: 0 14px;
	background: #f8faff;
}

.cui-room-share-copy .cui-copy-field__button {
	position: static;
	order: -1;
	flex: 0 0 auto;
	height: 48px;
	padding: 0 15px;
}

.cui-room-share-copy .cui-copy-field__status {
	min-height: 0;
	margin: 5px 0 0;
	text-align: left;
}

@media (max-width: 980px) {
	.cui-room-access-layout {
		grid-template-columns: 1fr;
		grid-template-areas: "join" "info";
	}

	.cui-room-share-layout {
		grid-template-columns: 1fr;
		grid-template-areas: "head" "field";
		gap: 12px;
	}
}

@media (max-width: 767px) {
	.cui-room-access-card--split,
	.cui-room-share-card--inline {
		padding: 14px;
	}

	.cui-room-access-card--split .cui-room-access-grid {
		grid-template-columns: 1fr;
	}

	.cui-room-join-panel {
		min-height: 180px;
		padding: 20px 14px;
	}

	.cui-room-share-copy .cui-copy-field__control {
		flex-direction: column;
	}

	.cui-room-share-copy .cui-copy-field__button {
		order: 0;
		width: 100%;
	}
}

/* ========================================================================
   52. SUPPORT COMPONENTS
   Ticket shortcode adapters; shared CUI table/form components carry the base UI.
======================================================================== */

.cui-ticket-table-wrap {
	width: 100%;
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
}

.cui-ticket-list-title,
.cui-ticket-user,
.cui-ticket-date,
.cui-ticket-subject {
	display: flex;
	align-items: center;
	gap: 7px;
}

.cui-ticket-list-title {
	margin-bottom: 13px;
}

.cui-ticket-list-title__icon,
.cui-ticket-subject__icon,
.cui-ticket-user i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 9px;
}

.cui-ticket-list-title__icon {
	width: 36px;
	height: 36px;
}

.cui-ticket-subject__icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-ticket-user i {
	width: 27px;
	height: 27px;
}

.cui-ticket-table {
	min-width: 850px;
	margin: 0;
	border: 0;
}

.cui-ticket-table th,
.cui-ticket-table td {
	padding-inline: 14px;
	text-align: right;
}

.cui-ticket-table td {
	height: 66px;
}

.cui-ticket-number,
.cui-ticket-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 29px;
	padding: 5px 9px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
}

.cui-ticket-number {
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
}

.cui-ticket-status {
	color: #55708f;
	background: #f1f5fa;
	border: 1px solid #e3e9f1;
}

.cui-ticket-status__dot {
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
}

.cui-ticket-status[data-ticket-status="1"] {
	color: #0a815c;
	background: var(--cui-green-soft);
}

.cui-ticket-status[data-ticket-status="2"] {
	color: #a86d11;
	background: var(--cui-orange-soft);
}

.cui-ticket-status[data-ticket-status="3"] {
	color: var(--cui-danger-600);
	background: var(--cui-red-soft);
}

.cui-ticket-subject {
	min-width: 0;
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
}

.cui-ticket-subject > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cui-ticket-view {
	min-width: 82px;
}

/* Create ticket form uses the generic .cui-field/.cui-input/.cui-textarea system. */
.cui-ticket-create-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

.cui-ticket-form-title {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 18px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--cui-border);
}

.cui-ticket-form-title__icon,
.cui-ticket-form-label__icon,
.cui-ticket-attachment__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 10px;
}

.cui-ticket-form-title__icon {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
}

.cui-ticket-form-title__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cui-ticket-form-title__copy strong {
	color: var(--cui-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.cui-ticket-form-title__copy small {
	color: var(--cui-text-muted);
	font-size: 12px;
}

.cui-ticket-form-field,
.cui-ticket-attachment {
	padding: 17px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
}

.cui-ticket-form-label__icon {
	width: 27px;
	height: 27px;
	font-size: 12px;
}

.cui-ticket-create-form textarea.cui-textarea {
	min-height: 175px;
}

.cui-ticket-attachment {
	display: flex;
	flex-direction: column;
	gap: 13px;
	border-style: dashed;
}

.cui-ticket-attachment__head,
.cui-ticket-attachment__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cui-ticket-attachment__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-ticket-attachment__copy {
	display: flex;
	flex-direction: column;
}

.cui-ticket-attachment input[type="file"] {
	width: 100%;
	min-height: 46px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--cui-border-strong);
	border-radius: 11px;
	font-family: inherit;
}

.cui-ticket-attachment input[type="file"]::file-selector-button {
	min-height: 34px;
	margin-inline-end: 10px;
	padding: 6px 13px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 900;
}

.cui-ticket-form-actions {
	display: flex;
	justify-content: flex-end;
}

.cui-ticket-submit {
	min-width: 170px;
}

@media (max-width: 767px) {
	.cui-ticket-table-wrap {
		overflow: visible;
		background: transparent;
		border: 0;
	}

	.cui-ticket-table,
	.cui-ticket-table tbody {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.cui-ticket-table thead {
		display: none;
	}

	.cui-ticket-table tr {
		display: block;
		margin-bottom: 10px;
		padding: 6px 13px;
		background: #fff;
		border: 1px solid var(--cui-border);
		border-radius: var(--cui-radius-lg);
	}

	.cui-ticket-table td {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 10px;
		width: 100%;
		height: auto;
		padding: 11px;
		border-bottom: 1px solid #edf1f6;
	}

	.cui-ticket-table td::before {
		color: var(--cui-text-muted);
		font-size: 10px;;
		font-weight: 800;
		content: attr(data-label);
	}

	.cui-ticket-view,
	.cui-ticket-submit {
		width: 100%;
	}

	.cui-ticket-form-field,
	.cui-ticket-attachment {
		padding: 14px;
	}
}




/* ========================================================================
   MANAGED PARTICIPANT CARDS (Modern Flex Layout)
======================================================================== */

.cui-participant-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.cui-participant-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--cui-surface);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-lg);
	box-shadow: var(--cui-shadow-sm);
	transition: transform var(--cui-transition-fast), box-shadow var(--cui-transition-fast), border-color var(--cui-transition-fast);
}

.cui-participant-card:hover {
	border-color: #d7e2f0;
	box-shadow: var(--cui-shadow-md);
	transform: translateY(-1px);
}

.cui-participant-card__avatar {
	flex: 0 0 auto;
}

.cui-participant-avatar-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cui-blue-600);
	background: var(--cui-blue-soft);
	border-radius: 12px;
	font-size: 16px;
}

.cui-participant-avatar-badge--moderator {
	color: var(--cui-purple-600);
	background: var(--cui-purple-soft);
}

.cui-participant-card__content {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	flex-wrap: wrap;
}

.cui-participant-card__primary {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cui-participant-card__name {
	color: var(--cui-text-strong);
	font-size: 13px;
	font-weight: 900;
}

.cui-participant-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cui-participant-card__phone {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	color: var(--cui-text-muted);
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-sm);
	font-size: 12px;
	font-weight: 800;
}

.cui-participant-card__phone i {
	color: var(--cui-blue-600);
	font-size: 11px;
}

.cui-participant-card__actions {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

@media (max-width: 767px) {
	.cui-participant-card {
		align-items: flex-start;
		padding: 14px;
	}

	.cui-participant-card__content {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.cui-participant-card__actions {
		align-self: flex-start;
	}
}



/* ========================================================================
   PARTICIPANT CARD MOBILE RESPONSIVE
======================================================================== */

@media (max-width: 767px) {

	/* کانتینر اصلی کارت شرکت کننده در موبایل */
	.table-partici tr,
	.cui-participant-card,
	[data-cui-participant-row] {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"avatar copy actions"
			"meta   meta meta";
		gap: 8px 10px;
		align-items: center;
		padding: 12px;
		background: #fff;
		border: 1px solid var(--cui-border);
		border-radius: var(--cui-radius-lg);
		margin-bottom: 8px;
	}

	/* بخش آواتار / تصویر کاربر */
	.cui-participant-card__avatar,
	[data-cui-participant-row] .avatar,
	[data-cui-participant-row] > td:first-child:has(.avatar) {
		grid-area: avatar;
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	/* عنوان و مشخصات اصلی */
	.cui-participant-card__identity,
	[data-cui-participant-row] .cui-participant-info {
		grid-area: copy;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.cui-participant-card__title,
	[data-cui-participant-row] strong {
		font-size: 13px;
		font-weight: 900;
		color: var(--cui-text-strong);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* دکمه های عملیات (ویرایش و حذف) سمت چپ هدر کارت */
	.cui-participant-card__actions,
	[data-cui-participant-row] .cui-resource-card__actions,
	[data-cui-participant-row] > td:last-child {
		grid-area: actions;
		display: flex;
		align-items: center;
		gap: 6px;
		justify-self: end;
	}

	.cui-participant-card__actions .cui-btn,
	[data-cui-participant-row] .cui-btn,
	[data-cui-participant-row] .cui-resource-action {
		width: 32px;
		min-width: 32px;
		height: 32px;
		min-height: 32px;
		padding: 0;
		border-radius: 8px;
	}

	/* ردیف نشان ها و وضعیت (نقش، انتظار ثبت نام، شماره تماس) */
	.cui-participant-card__badges,
	[data-cui-participant-row] .cui-meta,
	[data-cui-participant-row] .cui-participant-meta {
		grid-area: meta;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		padding-top: 8px;
		border-top: 1px dashed var(--cui-border);
		width: 100%;
	}

	.cui-participant-card__badges .cui-badge,
	[data-cui-participant-row] .cui-badge {
		font-size: 11px;
		padding: 3px 8px;
		min-height: 24px;
		line-height: 1.4;
	}

	/* کپسول شماره موبایل */
	[data-cui-participant-row] .cui-participant-phone,
	[data-cui-participant-row] span[dir="ltr"] {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		direction: ltr;
		font-size: 11px;
		color: #4b5563;
		background: #f8fafc;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		padding: 2px 7px;
	}
}


/* ========================================================================
   ROOM ACCESS CARDS (FLEXBOX LAYOUT)
======================================================================== */

.cui-room-access-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	align-content: flex-start;
}

/* در دسکتاپ: هر کارت دقیقاً نصف عرض (با کسر فاصله) را اشغال می کند */
.cui-room-access-flex .cui-info-item {
	flex: 0 0 calc(50% - 6px);
	max-width: calc(50% - 6px);
	min-height: 96px;
	max-height: 104px;
	box-sizing: border-box;
}

/* در موبایل و تبلت: کارت ها تمام عرض و منظم می شوند */
@media (max-width: 767px) {
	.cui-room-access-flex {
		gap: 8px;
	}

	.cui-room-access-flex .cui-info-item {
		flex: 1 1 100%;
		max-width: 100%;
		min-height: 80px;
		padding: 12px;
	}
}



/* ========================================================================
   LEARNING DASHBOARD HISTORY (FLEXBOX LIST)
======================================================================== */

.cui-learning-history-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.cui-learning-history-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
	transition: background-color var(--cui-transition-fast), border-color var(--cui-transition-fast);
}

.cui-learning-history-item:hover {
	background: #fff;
	border-color: #dce5f0;
	box-shadow: 0 4px 14px rgba(24, 42, 82, .03);
}

.cui-learning-history-item__info {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cui-learning-history-item__icon {
	display: inline-flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--cui-blue-600);
	background: #fff;
	border: 1px solid #dce8fa;
	border-radius: 10px;
	font-size: 14px;
}

.cui-learning-history-item__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cui-learning-history-item__copy small {
	color: var(--cui-text-muted);
	font-size: 11px;
	font-weight: 700;
}

.cui-learning-history-item__copy strong {
	color: var(--cui-text-strong);
	font-size: 13px;
	font-weight: 900;
	text-align: right;
}

.cui-learning-history-item__action {
	flex: 0 0 auto;
}

@media (max-width: 576px) {
	.cui-learning-history-item {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px;
	}

	.cui-learning-history-item__action .cui-btn {
		width: 100%;
	}
}


/* ایجاد فاصله مناسب بین سکشن‌ها و کارت‌های متوالی در صفحات جزئیات */
.cui-room-details-page .cui-card + .cui-card,
.cui-room-details-page .cui-room-embedded-card + .cui-room-embedded-card,
.cui-room-embedded-card {
	margin-bottom: 24px;
}

/* فاصله استاندارد بین کارت‌های داخلی (مثل سوابق برگزاری داخل جزئیات کلاس) */
.cui-embedded-content .cui-card {
	margin-top: 16px;
	margin-bottom: 0;
}





/* ========================================================================
   ACTIVE MEETINGS (FLEXBOX LIST)
======================================================================== */

.cui-monitoring-meetings-flex {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 14px;
}

.cui-meeting-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: 14px 18px;
	background: var(--cui-surface-soft);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
	transition: 
		background-color var(--cui-transition-fast), 
		border-color var(--cui-transition-fast), 
		box-shadow var(--cui-transition-fast);
}

.cui-meeting-item:hover {
	background: #fff;
	border-color: #dce5f0;
	box-shadow: 0 4px 14px rgba(24, 42, 82, .04);
}

/* عنوان و آیکون جلسه (سمت راست) */
.cui-meeting-item__info {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 0 1 auto;
}

.cui-meeting-item__icon {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--cui-blue-600);
	background: #fff;
	border: 1px solid #dce8fa;
	border-radius: 11px;
	font-size: 15px;
}

.cui-meeting-item__title {
	min-width: 0;
}

.cui-meeting-item__title strong {
	color: var(--cui-text-strong);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* نشان‌های اطلاعاتی (چسبیده به انتهای چپ کنار دکمه) */
.cui-meeting-item__badges {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 auto;
	margin-inline-start: auto;
}

.cui-meeting-item__badges .cui-badge {
	font-size: 11.5px;
	padding: 4px 9px;
	min-height: 26px;
	white-space: nowrap;
}

/* دکمه عملیات پایان جلسه */
.cui-meeting-item__action {
	flex: 0 0 auto;
	margin-inline-start: 10px;
}

.cui-meeting-item__action .cui-btn {
	white-space: nowrap;
}

/* تبلت و موبایل */
@media (max-width: 991px) {
	.cui-meeting-item {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.cui-meeting-item__badges {
		justify-content: flex-start;
		margin-inline-start: 0;
		padding: 10px 0;
		border-top: 1px dashed var(--cui-border);
		border-bottom: 1px dashed var(--cui-border);
	}

	.cui-meeting-item__action {
		margin-inline-start: 0;
	}

	.cui-meeting-item__action .cui-btn {
		width: 100%;
	}
}


/* ========================================================================
   MODERN FLEXBOX TICKET CARDS ARCHITECTURE
======================================================================== */

.cui-ticket-flex-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.cui-ticket-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--cui-surface);
    border: 1px solid var(--cui-border);
    border-radius: var(--cui-radius-lg);
    box-shadow: var(--cui-shadow-sm);
    transition: transform var(--cui-transition-fast), box-shadow var(--cui-transition-fast), border-color var(--cui-transition-fast);
}

.cui-ticket-card:hover {
    border-color: #d7e2f0;
    box-shadow: var(--cui-shadow-md);
    transform: translateY(-1px);
}

.cui-ticket-card__main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.cui-ticket-card__icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--cui-purple-600);
    background: var(--cui-purple-soft);
    border-radius: 12px;
    font-size: 16px;
}

.cui-ticket-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.cui-ticket-card__header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cui-ticket-subject {
    color: var(--cui-text-strong);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cui-ticket-subject:hover {
    color: var(--cui-blue-600);
}

.cui-ticket-card__details {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
    color: var(--cui-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.cui-ticket-user,
.cui-ticket-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cui-ticket-user i,
.cui-ticket-date i {
    color: var(--cui-blue-600);
}

.cui-ticket-card__action {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

@media (max-width: 991px) {
    .cui-ticket-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .cui-ticket-card__details {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 0;
        border-top: 1px dashed var(--cui-border);
        border-bottom: 1px dashed var(--cui-border);
    }

    .cui-ticket-card__action {
        width: 100%;
        margin-inline-start: 0;
    }

    .cui-ticket-card__action .cui-btn {
        width: 100%;
        justify-content: center;
        height: 42px;
    }
}



/* ========================================================================
   MODERN PAGINATION STYLING FOR SUPPORT TICKETS
======================================================================== */
/* اصلاح کامل استایل پجینیشن و صفحه‌بندی تیکت‌ها */
.cui-page .cui-pagination a.page-numbers,
.cui-page .cui-pagination span.page-numbers,
.cui-page .pagination a.page-numbers,
.cui-page .pagination span.page-numbers,
.cui-page .nav-links a.page-numbers,
.cui-page .nav-links span.page-numbers,
.cui-page .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    color: var(--cui-text-muted, #7d899f) !important;
    background: #fff !important;
    border: 1px solid var(--cui-border, #e6ebf2) !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: var(--cui-shadow-sm, 0 7px 22px rgba(24, 42, 82, .05)) !important;
    margin: 0 3px !important;
}

.cui-page .cui-pagination a.page-numbers:hover,
.cui-page .pagination a.page-numbers:hover,
.cui-page .page-numbers:hover {
    color: var(--cui-blue-600, #1769e0) !important;
    background: var(--cui-blue-soft, #edf4ff) !important;
    border-color: #dce8fa !important;
}

.cui-page .cui-pagination span.page-numbers.current,
.cui-page .cui-pagination [aria-current="page"],
.cui-page .pagination span.page-numbers.current,
.cui-page .page-numbers.current,
.cui-page [aria-current="page"] {
    color: #fff !important;
    background: linear-gradient(135deg, var(--cui-blue-600, #1769e0), #1257be) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 15px rgba(23, 105, 224, .19) !important;
}




/* ========================================================================
   VIDEO LIST
======================================================================== */

.cui-recordings-content-body{
padding: 20px;
}

/* تبلت و موبایل */
@media (max-width: 767px) {
.cui-recordings-content-body{
padding:0px;
}
}
















/* =========================================================
   Classinar WooCommerce Product Redesign
   مخصوص بخش summary محصول متغیر ووکامرس
   ========================================================= */



.rtl .summary.entry-summary,
.summary.entry-summary {
    direction: rtl;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    border: 1px solid #e8eaf4;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(18, 37, 88, 0.08);
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.rtl .summary.entry-summary::before,
.summary.entry-summary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 8px;
    background: linear-gradient(90deg, #d70a67 0%, #ef3c8b 50%, #ff6da9 100%);
}

/* قیمت بالای باکس */
.summary.entry-summary > p.price {
    margin: 0 0 22px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fff4f8 0%, #fff 100%);
    border: 1px solid #ffd5e6;
    border-radius: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 14px !important;
    color: #6c7893;
    box-shadow: 0 8px 25px rgba(18, 37, 88, 0.06);
}

.summary.entry-summary > p.price .amount,
.summary.entry-summary > p.price bdi {
    font-size: 18px;
    font-weight: 800;
    color: #d70a67;
}

.summary.entry-summary > p.price del .amount,
.summary.entry-summary > p.price del bdi {
    color: #97a0b8;
    font-size: 15px;
    font-weight: 600;
}

.summary.entry-summary > p.price ins {
    text-decoration: none;
}

.summary.entry-summary > p.price .woocommerce-Price-currencySymbol {
    font-size: 0.95em;
    font-weight: 700;
}

/* فرم متغیرها */
.summary.entry-summary .variations_form.cart {
    margin: 0;
}

.summary.entry-summary table.variations {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 14px;
    margin: 0 0 16px;
}

.summary.entry-summary table.variations tbody,
.summary.entry-summary table.variations tr {
    width: 100%;
}

.summary.entry-summary table.variations tr {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 10px;
}

.summary.entry-summary table.variations th,
.summary.entry-summary table.variations td {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

.summary.entry-summary table.variations th.label label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 18px;
    background: linear-gradient(135deg, #f6f1ff 0%, #f7faff 100%);
    border: 1px solid #ebe7ff;
    border-radius: 14px;
    color: #1f2a44;
    font-size: 14px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.summary.entry-summary table.variations th.label label::before {
    content: "";
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-left: 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(215,10,103,0.12), rgba(124,77,255,0.10));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

.summary.entry-summary table.variations tr:nth-child(1) th.label label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d70a67' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.summary.entry-summary table.variations tr:nth-child(2) th.label label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237c4dff' stroke-width='2'%3E%3Cpath d='M4 6h12l4 4v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Z'/%3E%3Cpath d='M8 6v5h8'/%3E%3C/svg%3E");
}

.summary.entry-summary table.variations tr:nth-child(3) th.label label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230b2454' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.summary.entry-summary table.variations td.value {
    position: relative;
}

.summary.entry-summary table.variations select {
    width: 100%;
    min-height: 48px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #e8eaf4;
    border-radius: 14px;
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, transparent 50%, #d70a67 50%),
        linear-gradient(135deg, #d70a67 50%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    background-position:
        calc(18px) calc(50% - 3px),
        calc(12px) calc(50% - 3px),
        0 0;
    background-size:
        6px 6px,
        6px 6px,
        100% 100%;
    background-repeat: no-repeat;
    padding: 0 18px 0 42px;
    color: #1f2a44;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 25px rgba(18, 37, 88, 0.06);
    transition: all .25s ease;
}

.summary.entry-summary table.variations select:hover,
.summary.entry-summary table.variations select:focus {
    border-color: #ffc0da;
    box-shadow: 0 0 0 4px rgba(215, 10, 103, 0.08);
    outline: none;
}

.summary.entry-summary .reset_variations {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    color: #d70a67 !important;
    font-weight: 700;
    text-decoration: none !important;
    padding: 0;
}

.summary.entry-summary .reset_variations::before {
    content: "↺";
    font-size: 14px;
    line-height: 1;
}

/* بخش وارییشن */
.summary.entry-summary .single_variation_wrap {
    margin-top: 10px;
    padding: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid #e8eaf4;
    border-radius: 22px;
    box-shadow: 0 8px 25px rgba(18, 37, 88, 0.06);
}

.summary.entry-summary .woocommerce-variation {
    margin-bottom: 18px;
}

.summary.entry-summary .woocommerce-variation-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, #fff5fa 0%, #fff 100%);
    border: 1px solid #ffdbe9;
    border-radius: 18px;
    padding: 16px 18px;
}

.summary.entry-summary .woocommerce-variation-price::before {
    content: "مبلغ قابل پرداخت";
    color: #6c7893;
    font-size: 14px;
    font-weight: 700;
}

.summary.entry-summary .woocommerce-variation-price .price,
.summary.entry-summary .woocommerce-variation-price .amount,
.summary.entry-summary .woocommerce-variation-price bdi {
    color: #d70a67;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
}

.summary.entry-summary .woocommerce-variation-description:empty,
.summary.entry-summary .woocommerce-variation-availability:empty {
    display: none;
}

.summary.entry-summary .woocommerce-variation-availability {
    margin-top: 14px;
}

.summary.entry-summary .woocommerce-variation-availability p {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
}

.summary.entry-summary .woocommerce-variation-availability .stock.out-of-stock,
.summary.entry-summary .woocommerce-variation-availability .stock {
    background: #fff3f4;
    color: #d92550;
    border: 1px solid #ffd0d8;
}

.summary.entry-summary .variations_button {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.summary.entry-summary .quantity,
.summary.entry-summary .quantity.hidden {
    display: none !important;
}

.summary.entry-summary .single_add_to_cart_button,
.summary.entry-summary button.single_add_to_cart_button.button.alt,
.summary.entry-summary button.single_add_to_cart_button.alt {
    width: 100%;
    min-height: 60px;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(90deg, #d70a67 0%, #ef3c8b 100%) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    box-shadow: 0 16px 28px rgba(215, 10, 103, 0.24);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    position: relative;
    padding: 14px 18px !important;
}

.summary.entry-summary .single_add_to_cart_button::before {
    content: "🛒";
    margin-left: 10px;
    font-size: 18px;
    vertical-align: middle;
}

.summary.entry-summary .single_add_to_cart_button:hover,
.summary.entry-summary .single_add_to_cart_button:focus {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(215, 10, 103, 0.3);
    filter: saturate(108%);
}

.summary.entry-summary .single_add_to_cart_button:disabled,
.summary.entry-summary .single_add_to_cart_button.disabled,
.summary.entry-summary .single_add_to_cart_button[disabled] {
    opacity: .55;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* فرم کلی */
.summary.entry-summary .woocommerce-variation-add-to-cart {
    border-top: 1px solid #e8eaf4;
    padding-top: 16px;
}

.summary.entry-summary .screen-reader-text {
    position: absolute !important;
}

/* بهبود برای موجودی / توضیحات */
.summary.entry-summary .woocommerce-variation-description,
.summary.entry-summary .woocommerce-variation-availability,
.summary.entry-summary .woocommerce-variation-price {
    width: 100%;
}

/* ریسپانسیو */
@media (max-width: 991px) {
    .summary.entry-summary {
        padding: 22px;
        border-radius: 20px;
    }

    .summary.entry-summary .woocommerce-variation-price .price,
    .summary.entry-summary .woocommerce-variation-price .amount,
    .summary.entry-summary .woocommerce-variation-price bdi {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .summary.entry-summary {
        padding: 18px;
        border-radius: 18px;
    }

    .summary.entry-summary > p.price {
        padding: 14px;
        gap: 6px 10px;
    }

    .summary.entry-summary table.variations {
        border-spacing: 0 10px;
    }

    .summary.entry-summary table.variations tr {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .summary.entry-summary table.variations th.label label,
    .summary.entry-summary table.variations select {
        min-height: 52px;
    }

    .summary.entry-summary .single_variation_wrap {
        padding: 16px;
        border-radius: 18px;
    }

    .summary.entry-summary .woocommerce-variation-price {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary.entry-summary .woocommerce-variation-price::before {
        margin-bottom: 2px;
    }

    .summary.entry-summary .woocommerce-variation-price .price,
    .summary.entry-summary .woocommerce-variation-price .amount,
    .summary.entry-summary .woocommerce-variation-price bdi {
        font-size: 24px;
    }

    .summary.entry-summary .single_add_to_cart_button,
    .summary.entry-summary button.single_add_to_cart_button.button.alt,
    .summary.entry-summary button.single_add_to_cart_button.alt {
        min-height: 56px;
        font-size: 16px !important;
    }
}



/* ========================================================================
   CLASSINAR LEARNING ANALYTICS TIMELINE
======================================================================== */

.cui-learning-timeline {
	width: 100%;
}


/* ------------------------------------------------------------------------
   Header
------------------------------------------------------------------------ */

.cui-learning-timeline__header {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 240px;
	align-items: center;
	gap: 16px;

	margin-bottom: 6px;
	padding: 0 14px;

	color: var(--cui-text-muted);

	font-size: 11px;
	font-weight: 800;
	line-height: 1.5;
}


/*
 * ستون اول Header عمدا خالی می ماند
 * تا Labelها دقیقا با Track هم راستا باشند.
 */
.cui-learning-timeline__header::before {
	content: "";
}


/*
 * هر دو Label روی ستون Track قرار می گیرند.
 */
.cui-learning-timeline__header span {
	grid-column: 2;
	grid-row: 1;
}


/*
 * RTL:
 *
 * شروع = سمت راست Track
 * پایان = سمت چپ Track
 */
.cui-learning-timeline__header span:first-child {
	justify-self: end;
}

.cui-learning-timeline__header span:last-child {
	justify-self: start;
}


/* ------------------------------------------------------------------------
   Timeline list
------------------------------------------------------------------------ */

.cui-learning-timeline__list {
	display: flex;
	flex-direction: column;
	gap: 10px;

	width: 100%;
}


/* ------------------------------------------------------------------------
   Timeline row
------------------------------------------------------------------------ */

.cui-learning-timeline__row {
	display: grid;

	grid-template-columns:
		190px
		minmax(0, 1fr)
		240px;

	align-items: center;

	gap: 16px;

	width: 100%;
	min-height: 72px;

	padding: 12px 14px;

	background: var(--cui-surface-soft);

	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);

	transition:
		background-color var(--cui-transition-fast),
		border-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast);
}


.cui-learning-timeline__row:hover {
	background: #fff;

	border-color: #dce5f0;

	box-shadow:
		0 4px 14px rgba(24, 42, 82, .035);
}


/* ------------------------------------------------------------------------
   User
------------------------------------------------------------------------ */

.cui-learning-timeline__user {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 9px;

	min-width: 0;
}


.cui-learning-timeline__user strong {
	max-width: 135px;

	overflow: hidden;

	color: var(--cui-text-strong);

	font-size: 12px;
	font-weight: 900;
	line-height: 1.7;

	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ------------------------------------------------------------------------
   Track
------------------------------------------------------------------------ */

.cui-learning-timeline__track {
	position: relative;

	width: 100%;
	height: 30px;
}


/*
 * Base line
 */
.cui-learning-timeline__line {
	position: absolute;

	top: 50%;
	right: 0;
	left: 0;

	height: 4px;

	background: #e5ebf3;

	border-radius: 999px;

	transform: translateY(-50%);
}


/*
 * Start point
 */
.cui-learning-timeline__track::before {
	position: absolute;

	top: 50%;
	right: -1px;

	z-index: 2;

	width: 8px;
	height: 8px;

	background: #fff;

	border: 2px solid var(--cui-blue-600);
	border-radius: 50%;

	content: "";

	transform: translateY(-50%);
}


/*
 * End point
 */
.cui-learning-timeline__track::after {
	position: absolute;

	top: 50%;
	left: -1px;

	z-index: 2;

	width: 8px;
	height: 8px;

	background: #fff;

	border: 2px solid #aeb9ca;
	border-radius: 50%;

	content: "";

	transform: translateY(-50%);
}


/* ------------------------------------------------------------------------
   Presence segment
------------------------------------------------------------------------ */

.cui-learning-timeline__segment {
	position: absolute;

	top: 50%;

	z-index: 3;

	height: 10px;

	background:
		linear-gradient(
			90deg,
			var(--cui-blue-600),
			#4d91ef
		);

	border-radius: 999px;

	box-shadow:
		0 3px 8px rgba(23, 105, 224, .18);

	transform: translateY(-50%);

	cursor: help;

	transition:
		transform var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast),
		filter var(--cui-transition-fast);
}


.cui-learning-timeline__segment:hover {
	filter: brightness(1.03);

	box-shadow:
		0 5px 14px rgba(23, 105, 224, .28);

	transform:
		translateY(-50%)
		scaleY(1.14);
}


/* ------------------------------------------------------------------------
   Join / Leave times
------------------------------------------------------------------------ */

.cui-learning-timeline__times {
	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 4px;

	min-width: 0;

	padding-inline-start: 6px;

	color: var(--cui-text-muted);

	font-size: 11px;
	line-height: 1.7;
}


.cui-learning-timeline__times span {
	display: flex;
	align-items: center;

	gap: 5px;

	width: 100%;

	white-space: nowrap;
}


.cui-learning-timeline__times strong {
	display: inline-block;

	min-width: 64px;

	color: var(--cui-text-strong);

	font-size: 11px;
	font-weight: 900;

	text-align: left;

	direction: ltr;
}


/* ------------------------------------------------------------------------
   Badge inside timeline
------------------------------------------------------------------------ */

.cui-learning-timeline__user .cui-badge {
	flex: 0 0 auto;

	min-height: 24px;

	padding: 4px 8px;

	font-size: 10px;
}


/* ------------------------------------------------------------------------
   Tablet
------------------------------------------------------------------------ */

@media (max-width: 900px) {

	.cui-learning-timeline__header {
		display: none;
	}


	.cui-learning-timeline__row {
		grid-template-columns:
			150px
			minmax(0, 1fr);

		gap: 12px;
	}


	.cui-learning-timeline__times {
		grid-column: 1 / -1;

		flex-direction: row;
		flex-wrap: wrap;

		align-items: center;

		gap: 18px;

		padding-top: 8px;
		padding-inline-start: 0;

		border-top: 1px solid var(--cui-border);
	}


	.cui-learning-timeline__times span {
		width: auto;
	}

}


/* ------------------------------------------------------------------------
   Mobile
------------------------------------------------------------------------ */

@media (max-width: 576px) {

	.cui-learning-timeline__row {
		grid-template-columns: 1fr;

		gap: 10px;

		min-height: 0;

		padding: 12px;
	}


	.cui-learning-timeline__user {
		width: 100%;
	}


	.cui-learning-timeline__user strong {
		max-width: calc(100% - 80px);
	}


	.cui-learning-timeline__track {
		width: 100%;
		height: 34px;
	}


	.cui-learning-timeline__times {
		grid-column: auto;

		flex-direction: row;
		flex-wrap: wrap;

		align-items: center;
		justify-content: space-between;

		gap: 8px 14px;

		padding-top: 8px;
	}


	.cui-learning-timeline__times span {
		width: auto;

		font-size: 10px;
	}


	.cui-learning-timeline__times strong {
		min-width: 58px;

		font-size: 10px;
	}

}


/* ------------------------------------------------------------------------
   Very small mobile
------------------------------------------------------------------------ */

@media (max-width: 400px) {

	.cui-learning-timeline__times {
		flex-direction: column;

		align-items: flex-start;

		justify-content: flex-start;
	}


	.cui-learning-timeline__times span {
		width: 100%;
	}

}



/* ========================================================================
   LEARNING ANALYTICS TABS
======================================================================== */

.cui-learning-tabs {
	width: 100%;
	margin-top: 18px;
}


/* ------------------------------------------------------------------------
   Navigation
------------------------------------------------------------------------ */

.cui-learning-tabs__nav {
	display: flex;
	align-items: center;
	gap: 6px;

	width: 100%;

	margin-bottom: 14px;
	padding: 5px;

	background: var(--cui-surface-soft);

	border: 1px solid var(--cui-border);
	border-radius: 12px;
}


.cui-learning-tabs__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	min-height: 40px;

	padding: 8px 15px;

	color: var(--cui-text-muted);

	background: transparent;

	border: 0;
	border-radius: 9px;

	font-family: inherit;
	font-size: 12px;
	font-weight: 900;

	cursor: pointer;

	transition:
		color var(--cui-transition-fast),
		background-color var(--cui-transition-fast),
		box-shadow var(--cui-transition-fast);
}


.cui-learning-tabs__button:hover {
	color: var(--cui-blue-600);

	background: rgba(255,255,255,.65);
}


.cui-learning-tabs__button.is-active {
	color: var(--cui-blue-600);

	background: #fff;

	box-shadow:
		0 3px 10px rgba(24,42,82,.07);
}


.cui-learning-tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 22px;
	height: 22px;

	padding: 0 6px;

	color: var(--cui-blue-600);

	background: var(--cui-blue-soft);

	border-radius: 999px;

	font-size: 10px;
	font-weight: 900;
}


/* ------------------------------------------------------------------------
   Panels
------------------------------------------------------------------------ */

.cui-learning-tabs__panel {
	display: none;
}


.cui-learning-tabs__panel.is-active {
	display: block;
}


/* ========================================================================
   LEARNING ACTIVITIES
======================================================================== */

.cui-learning-activities {
	display: flex;
	flex-direction: column;
	gap: 12px;
}


.cui-learning-activity-item {
	padding: 15px;

	background: var(--cui-surface-soft);

	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius-md);
}


.cui-learning-activity-item__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 18px;

	margin-bottom: 12px;
}


.cui-learning-activity-item__title {
	display: flex;
	align-items: flex-start;

	gap: 10px;

	min-width: 0;
}


.cui-learning-activity-item__icon {
	display: inline-flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	color: var(--cui-blue-600);

	background: #fff;

	border: 1px solid #dce8fa;
	border-radius: 10px;
}


.cui-learning-activity-item__title > div {
	display: flex;
	flex-direction: column;
	gap: 7px;

	min-width: 0;
}


.cui-learning-activity-item__title strong {
	color: var(--cui-text-strong);

	font-size: 13px;
	font-weight: 900;
	line-height: 1.8;
}


.cui-learning-activity-item__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}


.cui-learning-activity-item__meta {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;

	gap: 4px;

	color: var(--cui-text-muted);

	font-size: 11px;
}


.cui-learning-activity-item__meta span {
	display: flex;
	align-items: center;
	gap: 5px;
}


.cui-learning-activity-options {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;

	margin: 0 0 12px;
}


.cui-learning-activity-option {
	display: inline-flex;
	align-items: center;

	min-height: 30px;

	padding: 5px 10px;

	color: var(--cui-text);

	background: #fff;

	border: 1px solid var(--cui-border);
	border-radius: 8px;

	font-size: 11px;
	font-weight: 700;
}


.cui-learning-activity-item__empty {
	padding: 12px;

	color: var(--cui-text-muted);

	background: #fff;

	border: 1px dashed var(--cui-border);
	border-radius: 9px;

	font-size: 11px;
	text-align: center;
}


/* ------------------------------------------------------------------------
   Mobile
------------------------------------------------------------------------ */

@media (max-width: 576px) {

	.cui-learning-tabs__nav {
		align-items: stretch;
	}


	.cui-learning-tabs__button {
		flex: 1 1 50%;

		padding-inline: 8px;
	}


	.cui-learning-activity-item {
		padding: 12px;
	}


	.cui-learning-activity-item__head {
		flex-direction: column;

		gap: 10px;
	}


	.cui-learning-activity-item__meta {
		flex-direction: row;
		flex-wrap: wrap;

		width: 100%;

		padding-top: 8px;

		border-top: 1px solid var(--cui-border);
	}

}