/**
 * NouSupport Portal Frontend Styles
 *
 * Lightweight, responsive styles for the customer-facing support portal.
 * Uses ns- prefix to avoid conflicts with themes.
 */

/* Portal container */
.nousupport-portal {
	width: min(calc(100vw - 48px), 1100px);
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}

/* ==========================================================================
   THEME ISOLATION

   The portal renders from a shortcode inside post_content, so a block theme
   wraps it in whatever class it styles the page body with — nouthemes uses
   `.nou-catalog-prose`. Those prose rules are written as descendant selectors
   (`.prose h2`, `.prose ul > li::before`, `.prose a`), so they reach every
   element the portal prints.

   Specificity alone is not enough to fend them off. A class-scoped reset ties
   with `.nou-catalog-prose h3` at (0,1,1), and a tie is decided by load order —
   which the theme wins, because it enqueues from `render_block` while the
   template renders, so its stylesheet prints after this file. Hence the ID:
   `#nousupport-portal` is (1,0,1) and outranks any number of theme classes
   regardless of who prints last. The ID is on the wrapper in every one of the
   portal's three shortcode entry points, so it is always there to hook.

   Rather than name any one theme, restate the properties prose styling touches
   so the portal's own rules below have something to build on. Only
   inherited/element-level defaults belong here; component values stay with
   their component. Every component rule that these would otherwise clobber is
   scoped to `.nousupport-portal <class>` so it still wins on specificity — see
   `.ns-section-label h3` and friends below.
   ========================================================================== */

/* Headings: theme prose commonly swaps the family, scales with clamp(), and
   adds em-based top margin. Every portal heading sets its own size and margin,
   so neutralise all three and let the component decide. */
#nousupport-portal h1,
#nousupport-portal h2,
#nousupport-portal h3,
#nousupport-portal h4,
#nousupport-portal h5,
#nousupport-portal h6 {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

/* Lists: the portal nav and every list it prints are layout, not prose. Themes
   add generated markers (nouthemes prints an em dash via ::before), padding for
   the hanging indent, and margin between items. */
#nousupport-portal ul,
#nousupport-portal ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

#nousupport-portal li {
	margin: 0;
	padding: 0;
}

#nousupport-portal li::before,
#nousupport-portal li::marker {
	content: none;
}

/* Links: portal links carry their own colour and underline per component. */
#nousupport-portal a {
	text-decoration: none;
	text-decoration-color: currentColor;
}

/* Paragraphs and rules: prose sets vertical rhythm in ems off its own larger
   font size, which spreads the portal's compact panels apart. */
#nousupport-portal p {
	margin: 0;
}

#nousupport-portal hr {
	margin: 0;
}

/* Prose caps its measure (nouthemes: 68ch) and centres images; the portal is a
   full-width application layout. */
#nousupport-portal img,
#nousupport-portal figure {
	margin: 0;
	max-width: 100%;
}

/* Article body is the one place the portal *does* want prose-like flow, so it
   opts back in — these restore what the block above just cleared. */
#nousupport-portal .ns-article-content p {
	margin: 0 0 16px;
}

#nousupport-portal .ns-article-content ul,
#nousupport-portal .ns-article-content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

#nousupport-portal .ns-article-content ul {
	list-style: disc;
}

#nousupport-portal .ns-article-content ol {
	list-style: decimal;
}

#nousupport-portal .ns-article-content li {
	margin-bottom: 6px;
}

#nousupport-portal .ns-article-content li::marker {
	content: normal;
}

#nousupport-portal .ns-article-content a {
	color: var(--ns-brand-color, #0073aa);
	text-decoration: underline;
}

/* Reply bodies are user-authored HTML, so they need real list markers too. */
#nousupport-portal .ns-reply-body ul,
#nousupport-portal .ns-reply-body ol {
	margin: 0 0 12px;
	padding-left: 22px;
}

#nousupport-portal .ns-reply-body ul {
	list-style: disc;
}

#nousupport-portal .ns-reply-body ol {
	list-style: decimal;
}

#nousupport-portal .ns-reply-body li::marker {
	content: normal;
}

#nousupport-portal .ns-reply-body a {
	text-decoration: underline;
}

/* Navigation */
.nousupport-portal-nav {
	margin-bottom: 26px;
	border-bottom: 1px solid var(--ns-border, #dfe3e8);
}

.nousupport-portal-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
}

.nousupport-portal-nav li a {
	display: block;
	padding: 12px 20px 12px 0;
	margin-right: 28px;
	text-decoration: none;
	color: #666;
	font-size: 14px;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

@media (max-width: 800px) {
	.nousupport-portal {
		width: 100%;
	}
}

.nousupport-portal-nav li a:hover {
	color: #333;
}

.nousupport-portal-nav li.active a {
	color: var(--ns-brand-color, #0073aa);
	border-bottom-color: var(--ns-brand-color, #0073aa);
}

.nousupport-login-hint {
	font-size: 13px;
	color: var(--ns-text-muted, #6b7280);
	margin-top: 16px;
}

/* Buttons */
/* Sizing (height, horizontal padding, font-size) is set once in shared-ui.css
   so buttons line up with the fields they sit beside. */
.ns-btn,
.nousupport-btn {
	border: none;
	border-radius: var(--ns-radius-sm, 5px);
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, transform 0.1s;
}

.ns-btn-primary,
.nousupport-btn-primary,
a.ns-btn-primary,
a.nousupport-btn-primary {
	background: var(--ns-brand-color, #0073aa);
	color: #fff !important;
}

.ns-btn-primary:hover,
.nousupport-btn-primary:hover,
a.ns-btn-primary:hover,
a.nousupport-btn-primary:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	color: #fff !important;
}

.ns-btn-secondary {
	background: #f0f0f1;
	color: #333;
	border: 1px solid #ddd;
}

.ns-btn-secondary:hover {
	background: #e5e5e5;
}

/* Loading & Empty states */
.ns-loading {
	text-align: center;
	padding: 40px;
	color: var(--ns-text-muted, #6b7280);
}

/* Empty and error states are bounded cards rather than loose centred text, so a
   list with nothing in it still reads as a list that is simply empty. */
.ns-empty {
	text-align: center;
	padding: 34px 22px;
	border: 1px dashed var(--ns-border, #dfe3e8);
	border-radius: var(--ns-radius, 8px);
	background: var(--ns-surface-muted, #fafbfc);
	color: var(--ns-text-muted, #6b7280);
	font-size: 13px;
}

.ns-error {
	text-align: center;
	padding: 26px 22px;
	border: 1px solid #e6c9c7;
	border-radius: var(--ns-radius, 6px);
	background: #fdf3f2;
	color: #8d4b46;
	font-size: 13px;
}

/* Ticket list table */
/* separate, not collapse: border-radius is ignored on a collapsed table, so the
   card's rounded corners and outer border were never drawn. border-spacing 0
   keeps the grid tight, and the cells carry the row rules. */
.ns-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ns-surface, #fff);
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: var(--ns-radius, 8px);
	overflow: hidden;
}

.ns-table th {
	background: var(--ns-surface-muted, #f7f9fa);
	padding: 10px 14px;
	border-bottom: 1px solid var(--ns-border, #dfe3e8);
	text-align: left;
	font-size: 10px;
	font-weight: 700;
	color: var(--ns-text-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.ns-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ns-border-soft, #edf0f2);
	font-size: 13px;
	color: var(--ns-text-soft, #4b5563);
}

/* The card's own border closes the table, so the final row does not need one. */
.ns-table tbody tr:last-child td {
	border-bottom: 0;
}

.ns-clickable {
	cursor: pointer;
	transition: background 0.1s;
}

.ns-clickable:hover {
	background: #f8f9fa;
}

.ns-mono {
	font-family: "SF Mono", "Monaco", "Inconsolata", monospace;
	font-size: 12px;
	color: var(--ns-text-muted, #6b7280);
}

.ns-date {
	color: var(--ns-text-muted, #6b7280);
	font-size: 13px;
}

/* Status badges */
.ns-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

/* Ticket status badge colours live in a single place lower in this file
   (search ".ns-status--open"). A duplicate set that used to sit here was
   fully overridden by that later block, so it has been removed to keep one
   source of truth and avoid the two drifting apart. */

/* Priority */
.ns-priority { font-size: 12px; text-transform: capitalize; }
.ns-priority--urgent { color: #d32f2f; font-weight: 700; }
.ns-priority--high { color: #e65100; }
.ns-priority--normal { color: #666; }
.ns-priority--low { color: var(--ns-text-muted, #6b7280); }



.ns-submit-shell {
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #dfe3e8;
	border-radius: 6px;
	overflow: hidden;
}

/* A plain heading on the panel, as the wireframe shows. The old solid dark bar
   was the heaviest element on the page and competed with the theme's own page
   title directly above it. */
.ns-submit-header {
	padding: 18px 28px;
	border-bottom: 1px solid var(--ns-border-soft, #edf0f2);
	background: var(--ns-surface, #fff);
	color: var(--ns-text, #1f2933);
}

#nousupport-portal .ns-submit-header h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

/* No divider here: the rule under each section label already separates the
   groups. Having both drew two horizontal lines of different widths a few pixels
   apart, which read as a rendering fault rather than as structure. */
.ns-submit-section {
	padding: 18px 28px;
}

.ns-submit-section--compact {
	padding-top: 18px;
	padding-bottom: 18px;
}

/* Section header: a compact upper-case label with a rule under it, then the
   controls. Reads as a form section rather than a page heading, which is what
   made the old 17px headings compete with the ticket subject for attention. */
.ns-section-copy {
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ns-border-soft, #edf0f2);
}

#nousupport-portal .ns-section-copy h3 {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ns-accent-label, #5b6b7c);
}

.ns-section-copy p {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ns-text-muted, #6b7280);
}

.ns-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Height/padding come from the shared control layer so this sits flush with the
   purchase-code field above it. */
.ns-envato-verify {
	box-sizing: border-box;
	border-radius: var(--ns-radius-sm, 4px);
	background: #78b843;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
}

.ns-envato-verify:hover {
	background: #6aa33d;
	color: #fff;
}

.ns-or-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: #9aa4ad;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.ns-or-divider::before,
.ns-or-divider::after {
	content: "";
	height: 1px;
	flex: 1;
	background: #e5e9ec;
}

/* Rich-text editor (contenteditable) */
.ns-rte {
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
}

.ns-rte-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--ns-border, #dfe3e8);
	background: #f7f9fa;
}

.ns-rte-toolbar button {
	min-width: 30px;
	padding: 4px 9px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: #45525d;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
}

.ns-rte-toolbar button:hover {
	background: #fff;
	border-color: var(--ns-border, #dfe3e8);
}

.ns-rte-toolbar button:focus-visible {
	outline: 2px solid var(--ns-primary, #4aba70);
	outline-offset: 1px;
}

.ns-rte-area {
	min-height: 150px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ns-text, #1f2933);
	outline: none;
	overflow-wrap: anywhere;
}

.ns-rte-area:focus {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ns-brand-color, #0073aa) 25%, transparent);
}

.ns-rte-area.is-empty::before {
	content: attr(data-placeholder);
	color: #9aa5af;
	pointer-events: none;
}

.ns-rte-area img {
	max-width: 100%;
	height: auto;
}

.ns-reply-form .ns-rte {
	margin-bottom: 12px;
}

/* Drag & drop attachment zone */
.ns-dropzone {
	position: relative;
	border: 2px dashed var(--ns-border, #cfd7de);
	border-radius: 6px;
	background: #f8fafb;
	transition: border-color 0.15s, background 0.15s;
	/* Sized here because nothing else sets it: the block inherited the theme's
	   body size (~17px), so the upload hint came out larger than the field labels
	   and the reply text around it. The wireframe's `.drop` is small muted copy. */
	font-size: 13px;
	color: var(--ns-text-soft, #4b5563);
}

.ns-dropzone.is-dragover {
	border-color: var(--ns-brand-color, #0073aa);
	background: color-mix(in srgb, var(--ns-brand-color, #0073aa) 8%, #fff);
}

.ns-dropzone--compact {
	margin-top: 4px;
}

.ns-dropzone-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ns-dropzone-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 18px 14px;
	text-align: center;
	pointer-events: none;
}

/* Only the padding is compact. `.drop .sm` is a block in both wireframe
   dropzones, so the file limit stays on its own line under the prompt rather
   than trailing after "or drag & drop" as a third phrase on one line. */
.ns-dropzone--compact .ns-dropzone-inner {
	padding: 12px;
}

.ns-dropzone-icon {
	font-size: 22px;
	color: #8a97a3;
}

.ns-dropzone-link {
	color: var(--ns-brand-color, #0073aa);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	pointer-events: auto;
}

/* Upload progress bar */
.ns-upload-progress {
	margin-top: 12px;
	height: 6px;
	border-radius: 3px;
	background: #e5e9ec;
	overflow: hidden;
}

.ns-upload-progress-bar {
	width: 0;
	height: 100%;
	background: var(--ns-brand-color, #0073aa);
	transition: width 0.2s ease;
}

.ns-attachment-count,
.ns-muted-inline {
	color: var(--ns-text-muted, #6b7280);
	font-size: 13px;
}

.ns-privacy-note {
	margin: 18px 28px 0;
	color: var(--ns-text-muted, #6b7280);
	font-size: 12px;
	line-height: 1.5;
}

.ns-form-actions--submit {
	padding: 0 28px 28px;
}

/* Sentence case: the wireframe labels this button "Submit Ticket". */
.ns-form-actions--submit .ns-btn {
	font-weight: 700;
}

.ns-form-field {
	margin-bottom: 20px;
}

/* The section's own padding closes the group, so the last field does not add a
   second gap on top of it. */
.ns-form-field:last-child {
	margin-bottom: 0;
}

/* Kept lighter than the section label above it, so the hierarchy reads
   section → field → control rather than the field shouting loudest. */
.ns-form-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--ns-text-soft, #4b5563);
}

/* Size, border and radius come from the shared control layer (shared-ui.css)
   so these fields match the search boxes and buttons around them. Only the
   things specific to this form stay here. */
.ns-form-field input[type="text"],
.ns-form-field input[type="email"],
.ns-form-field input[type="password"],
.ns-form-field input[type="url"],
.ns-form-field select,
.ns-form-field textarea {
	width: 100%;
	font-family: inherit;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.ns-form-field input:focus,
.ns-form-field select:focus,
.ns-form-field textarea:focus {
	outline: none;
	border-color: var(--ns-brand-color, #0073aa);
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.ns-form-field textarea {
	resize: vertical;
	min-height: 150px;
}

.ns-hint {
	display: block;
	font-size: 12px;
	color: var(--ns-text-muted, #6b7280);
	margin-top: 4px;
}

/* Sized here because themes style bare labels at body size, which made these
   two options read as headings rather than as the controls they are. */
.ns-radio {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ns-text-soft, #4b5563);
	cursor: pointer;
}

.ns-radio input {
	flex: 0 0 auto;
	margin: 0;
}

.ns-form-actions {
	margin-top: 24px;
}

/* Messages — same shape and palette as the purchase callouts above, so a
   notice means the same thing wherever it appears in the portal. */
.ns-message {
	padding: 10px 12px;
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: var(--ns-radius, 6px);
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.5;
}

.ns-message--success {
	background: #f4faf5;
	color: #3f6b48;
	border-color: #c3ddc7;
}

.ns-message--error {
	background: #fdf3f2;
	color: #8d4b46;
	border-color: #e6c9c7;
}

/* Ticket detail */

.ns-ticket-header {
	margin-bottom: 24px;
}

.ns-back {
	display: inline-block;
	margin-bottom: 12px;
	color: var(--ns-brand-color, #0073aa);
	text-decoration: none;
	font-size: 13px;
}

.ns-back:hover {
	text-decoration: underline;
}

#nousupport-portal .ns-ticket-header h2 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
}

.ns-ticket-meta {
	display: flex;
	gap: 10px;
	align-items: center;
}

/* Replies */
.ns-replies {
	margin-bottom: 30px;
}

.ns-reply {
	padding: 16px 20px;
	margin-bottom: 12px;
	border-radius: 8px;
	border: 1px solid var(--ns-border, #dfe3e8);
}

.ns-reply--agent {
	background: #f0f7ff;
	border-color: #c8ddf5;
}

.ns-reply--customer {
	background: #fff;
}

.ns-reply--system {
	background: #f5f5f5;
	font-style: italic;
	font-size: 13px;
}

.ns-reply-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 13px;
}

.ns-reply-header time {
	margin-left: auto;
	color: var(--ns-text-muted, #6b7280);
	font-size: 12px;
}

.ns-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.ns-reply-body {
	font-size: 14px;
	line-height: 1.7;
}

.ns-reply-body p {
	margin: 0 0 10px;
}

.ns-reply-body p:last-child {
	margin-bottom: 0;
}

.ns-reply-files {
	margin-top: 10px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.ns-file {
	display: inline-block;
	padding: 4px 10px;
	background: #f0f0f1;
	border-radius: 4px;
	font-size: 12px;
	text-decoration: none;
	color: #333;
}

.ns-file:hover {
	background: #e0e0e0;
}

/* Reply form */
.ns-reply-form {
	background: #fff;
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: 8px;
	padding: 20px;
}

#nousupport-portal .ns-reply-form h3 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}

.ns-reply-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	min-height: 100px;
	box-sizing: border-box;
	margin-bottom: 12px;
}

.ns-reply-form textarea:focus {
	outline: none;
	border-color: var(--ns-brand-color, #0073aa);
}

.ns-closed-notice {
	text-align: center;
	padding: 20px;
	background: #f5f5f5;
	border-radius: 8px;
	color: #666;
}

/* Knowledge base */
/* Sized here rather than inherited: themes set h2 for article headings, which
   made the panel title compete with the page title above it. */
#nousupport-portal .ns-kb h2 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.ns-kb-hint {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--ns-text-muted, #6b7280);
}

.ns-kb-search input {
	width: 100%;
	box-sizing: border-box;
}

.ns-kb-search input:focus {
	outline: none;
	border-color: var(--ns-brand-color, #0073aa);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.ns-muted {
	color: var(--ns-text-muted, #6b7280);
	text-align: center;
	padding: 40px;
}

/* Responsive */
@media (max-width: 600px) {
	.nousupport-portal {
		padding: 10px;
	}

	.nousupport-portal-nav ul {
		flex-wrap: wrap;
	}

	.ns-table th:nth-child(3),
	.ns-table td:nth-child(3),
	.ns-table th:nth-child(4),
	.ns-table td:nth-child(4) {
		display: none;
	}

	.ns-ticket-meta {
		flex-wrap: wrap;
	}

	.ns-reply-header {
		flex-wrap: wrap;
	}

	.ns-reply-header time {
		margin-left: 0;
		width: 100%;
	}

	.ns-submit-shell {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}

	.ns-submit-header,
	.ns-submit-section,
	.ns-form-actions--submit {
		padding-left: 18px;
		padding-right: 18px;
	}

	.ns-form-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ns-privacy-note {
		margin-left: 18px;
		margin-right: 18px;
	}
}


/* Knowledge Base */
/* Categories are a filter, so they read as a row of chips (the wireframe's
   .chips) rather than a grid of large cards. The cards took a full screen of
   height before a single article title appeared. */
.ns-kb-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.ns-kb-category-chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: 999px;
	background: var(--ns-surface, #fff);
	color: var(--ns-text-soft, #4b5563);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ns-kb-category-chip:hover {
	border-color: var(--ns-primary, #0073aa);
	color: var(--ns-text, #1f2933);
}

.ns-kb-category-chip.is-active {
	background: var(--ns-primary, #0073aa);
	border-color: var(--ns-primary, #0073aa);
	color: #fff;
}

.ns-kb-category-chip:focus-visible {
	outline: 2px solid var(--ns-primary, #4aba70);
	outline-offset: 2px;
}

.ns-kb-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--ns-text-soft, #4b5563);
}

.ns-kb-clear-filter {
	color: var(--ns-brand-color, #0073aa);
	text-decoration: none;
	white-space: nowrap;
}

.ns-kb-clear-filter:hover {
	text-decoration: underline;
}

.ns-kb-articles {
	display: grid;
	gap: 1px;
	background: var(--ns-border-soft, #edf0f2);
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: var(--ns-radius, 8px);
	overflow: hidden;
}

.ns-kb-article-item {
	display: block;
	padding: 14px 16px;
	background: var(--ns-surface, #fff);
	text-decoration: none;
	color: var(--ns-text, #1f2933);
	transition: background 0.1s;
}

.ns-kb-article-item:hover {
	background: #f8f9fa;
}

.ns-kb-article-item:focus-visible {
	outline: 2px solid var(--ns-primary, #4aba70);
	outline-offset: -2px;
}

.ns-kb-article-item strong {
	display: block;
	margin-bottom: 4px;
	color: var(--ns-brand-color, #0073aa);
}

.ns-kb-article-item p {
	margin: 0 0 5px;
	font-size: 12px;
	color: var(--ns-text-muted, #6b7280);
}

.ns-kb-article-meta {
	font-size: 11px;
	color: var(--ns-text-muted, #6b7280);
}

/* KB Search suggestions */
.ns-kb-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	z-index: 10;
	max-height: 250px;
	overflow-y: auto;
}

.ns-kb-search {
	position: relative;
	margin-bottom: 24px;
}

.ns-kb-suggestion-item {
	display: block;
	padding: 10px 16px;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid var(--ns-border-soft, #edf0f2);
	font-size: 14px;
}

.ns-kb-suggestion-item:hover {
	background: #f8f9fa;
}

.ns-kb-suggestion-item:last-child {
	border-bottom: none;
}

/* Article detail */

/* Scoped to the container so it outranks the heading neutraliser at the top of
   this file, which is itself one class + element. */
#nousupport-portal .ns-article-title {
	font-size: 28px;
	font-weight: 700;
	margin: 12px 0 8px;
	line-height: 1.3;
}

/* Outlined tag rather than a filled pill: filled pills read as status badges,
   and this is a category label, not a state. */
.ns-article-category {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	background: var(--ns-surface, #fff);
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: var(--ns-radius-sm, 4px);
	color: var(--ns-text-soft, #4b5563);
	margin-bottom: 20px;
}

.ns-article-content {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 30px;
}

/* Article body is prose, so its headings need real heading sizes back — the
   neutraliser at the top of this file drops them to body text. */
#nousupport-portal .ns-article-content h2,
#nousupport-portal .ns-article-content h3 {
	margin: 24px 0 8px;
	font-weight: 700;
	line-height: 1.3;
}

#nousupport-portal .ns-article-content h2 {
	font-size: 21px;
}

#nousupport-portal .ns-article-content h3 {
	font-size: 17px;
}

.ns-article-content pre {
	background: #f5f5f5;
	padding: 16px;
	border-radius: 6px;
	overflow-x: auto;
}

.ns-article-content code {
	background: #f0f0f1;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 13px;
}

.ns-article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Helpful vote — the wireframe's dashed .empty box: prompt on its own line,
   then the two buttons and the running count on one row, left aligned. */
.ns-article-helpful {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	padding: 18px 20px;
	border: 1px dashed var(--ns-border, #dfe3e8);
	border-radius: var(--ns-radius, 8px);
	background: var(--ns-surface-muted, #fafbfc);
	text-align: left;
}

.ns-article-helpful p {
	flex: 0 0 100%;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--ns-text, #1f2933);
}

.ns-article-helpful .ns-btn {
	min-height: 32px;
	padding: 0 12px;
	font-size: 13px;
}

.ns-helpful-counts {
	font-size: 12px;
	color: var(--ns-text-muted, #6b7280);
}

/* Article suggestions on submit form */
.ns-article-suggestions {
	background: #fffde7;
	border: 1px solid #fff176;
	border-radius: 8px;
	margin-top: 8px;
	padding: 8px;
}

.ns-suggestions-header {
	font-size: 12px;
	font-weight: 600;
	color: #666;
	padding: 4px 8px;
	margin-bottom: 4px;
}

.ns-suggestion-item {
	display: block;
	padding: 8px 12px;
	text-decoration: none;
	color: #333;
	border-radius: 4px;
	font-size: 13px;
}

.ns-suggestion-item:hover {
	background: #fff9c4;
}


/* Purchase code verification */
/* Callouts share one shape (padding, radius, 1px border) and differ only in
   tint, so a success and a failure notice sit at the same visual weight. */
.ns-purchase-verify {
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: var(--ns-radius, 6px);
	font-size: 13px;
	line-height: 1.5;
}

.ns-verify-success {
	background: #f4faf5;
	color: #3f6b48;
	border-color: #c3ddc7;
}

.ns-verify-error {
	background: #fdf3f2;
	color: #8d4b46;
	border-color: #e6c9c7;
}

.ns-verifying {
	color: #666;
	font-style: italic;
}


/* Auth Forms */
.ns-auth-box {
	max-width: 420px;
	margin: 40px auto;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--ns-border, #dfe3e8);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Left aligned, as the wireframe shows: the heading and its lead line up with
   the labels and fields under them instead of floating over them. */
#nousupport-portal .ns-auth-box h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

.ns-auth-subtitle {
	text-align: left;
	color: var(--ns-text-muted, #6b7280);
	margin: 0 0 20px;
	font-size: 13px;
}

.ns-auth-form .ns-form-field {
	margin-bottom: 16px;
}

.ns-btn-block {
	display: block;
	width: 100%;
	text-align: center;
	padding: 12px;
}

.ns-btn-envato {
	background: #82b541;
	color: #fff;
	border: none;
	font-weight: 600;
}

.ns-btn-envato:hover {
	background: #6fa332;
}

.ns-auth-divider {
	text-align: center;
	margin: 20px 0;
	position: relative;
}

.ns-auth-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--ns-border-soft, #edf0f2);
}

.ns-auth-divider span {
	position: relative;
	background: #fff;
	padding: 0 12px;
	font-size: 12px;
	color: var(--ns-text-muted, #6b7280);
	text-transform: uppercase;
}

.ns-auth-links {
	margin-top: 16px;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
}

.ns-auth-links a,
.ns-auth-links .ns-linkish {
	font-size: 13px;
	color: var(--ns-brand-color, #0073aa);
	text-decoration: none;
}

/* A button that looks like a link — used to switch between the login,
   register and forgot-password forms without navigating anywhere. */
.ns-linkish {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.ns-auth-links a:hover,
.ns-auth-links .ns-linkish:hover {
	text-decoration: underline;
}

.ns-auth-links a:focus-visible,
.ns-auth-links .ns-linkish:focus-visible {
	outline: 2px solid var(--ns-primary, #4aba70);
	outline-offset: 2px;
	border-radius: 3px;
}

.ns-form-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}


/* Category hint for pre-sale */
#ns-category-hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 500;
	transition: color 0.2s;
}


/* === Shared Admin/Portal Alignment === */
.nousupport-portal {
  color: var(--ns-text);
}

.nousupport-portal-nav {
  border-bottom-color: var(--ns-border);
}

.nousupport-portal-nav li.active a {
  color: var(--ns-primary);
  border-bottom-color: var(--ns-primary);
}

.ns-submit-shell,
.ns-table,
.ns-reply-form,
.ns-kb-articles,
.ns-auth-box {
  border-color: var(--ns-border);
  border-radius: var(--ns-radius);
}

#nousupport-portal .ns-section-copy h3,
#nousupport-portal .ns-ticket-header h2,
#nousupport-portal .ns-kb h2,
#nousupport-portal .ns-auth-box h2 {
  color: var(--ns-text);
}

.ns-section-copy p,
.ns-hint,
.ns-date,
.ns-kb-hint,
.ns-auth-subtitle,
.ns-privacy-note {
  color: var(--ns-text-muted);
}

.ns-envato-verify,
.ns-btn-primary,
.nousupport-btn-primary {
  background: var(--ns-primary);
}

.ns-envato-verify:hover,
.ns-btn-primary:hover,
.nousupport-btn-primary:hover {
  background: var(--ns-primary-hover);
}

.ns-rte-toolbar,
.ns-reply-actions,
.ns-table th {
  background: var(--ns-surface-muted);
}

.ns-status--open { background: #fee2e2; color: #991b1b; }
.ns-status--in_progress { background: #dbeafe; color: #1e40af; }
.ns-status--waiting { background: #fff4d6; color: #975a16; }
.ns-status--resolved { background: #dcfce7; color: #166534; }
.ns-status--closed { background: #f3f4f6; color: #4b5563; }

/* --- Customer satisfaction rating --- */
.ns-rating {
  margin: 0 0 20px;
  padding: 18px 20px;
  background: var(--ns-surface-muted);
  border: 1px solid var(--ns-border-soft);
  border-radius: var(--ns-radius);
}

.ns-rating-title {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--ns-text);
}

.ns-rating-stars {
  display: flex;
  gap: 4px;
  font-size: 26px;
  line-height: 1;
}

.ns-star {
  color: #d1d5db;
}

.ns-star.is-filled {
  color: var(--ns-warning);
}

.ns-star-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #d1d5db;
  font-size: 26px;
  line-height: 1;
  transition: color 0.12s ease;
}

.ns-star-btn:hover {
  outline: none;
}

.ns-star-btn:focus-visible {
  outline: 2px solid var(--ns-primary, #0073aa);
  outline-offset: 2px;
  border-radius: 4px;
}

.ns-rating--form textarea {
  width: 100%;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius-sm);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

.ns-rating--form button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ns-rating-comment {
  margin: 10px 0 0;
  color: var(--ns-text-soft);
  font-style: italic;
}

/* ==========================================================================
   Ticket list: toolbar, status tabs, search, unread badge (#9)
   ========================================================================== */
.ns-ticket-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ns-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ns-status-tab {
  padding: 6px 14px;
  border: 1px solid var(--ns-border, #dfe3e8);
  border-radius: 999px;
  background: #fff;
  color: var(--ns-text-muted, #6b7280);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ns-status-tab:hover {
  border-color: var(--ns-primary, #0073aa);
  color: var(--ns-text, #1f2933);
}

.ns-status-tab.is-active {
  background: var(--ns-primary, #0073aa);
  border-color: var(--ns-primary, #0073aa);
  color: #fff;
}

.ns-status-tab:focus-visible {
  outline: 2px solid var(--ns-primary, #4aba70);
  outline-offset: 2px;
}

.ns-ticket-search {
  flex: 1 1 200px;
  max-width: 280px;
}

.ns-ticket-search-input {
  width: 100%;
  box-sizing: border-box;
}

.ns-ticket-search-input:focus {
  outline: none;
  border-color: var(--ns-primary, #0073aa);
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.ns-clickable:focus-visible {
  outline: 2px solid var(--ns-primary, #0073aa);
  outline-offset: -2px;
}

.ns-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ns-primary, #0073aa);
  vertical-align: middle;
}

/* The subject is the bold cell of the wireframe table row. Themes commonly reset
   `strong` to 500, which left it indistinguishable from the ticket number. */
.ns-table--tickets td strong {
  font-weight: 700;
  color: var(--ns-text, #1f2933);
}

.ns-empty--filtered {
  padding: 40px 20px;
}

/* ==========================================================================
   Knowledge base "search first" prompt (#12)
   ========================================================================== */
.ns-kb-prompt {
  margin: 20px auto;
  max-width: 480px;
  padding: 20px;
  background: var(--ns-surface-muted, #f7f9fa);
  border: 1px solid var(--ns-border-soft, #edf0f2);
  border-radius: var(--ns-radius, 8px);
  text-align: left;
}

#nousupport-portal .ns-kb-prompt h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ns-text, #1f2933);
}

.ns-kb-prompt p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ns-text-muted, #6b7280);
}

.ns-kb-prompt-form {
  display: flex;
  gap: 8px;
}

.ns-kb-prompt-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

.ns-kb-prompt-input:focus {
  outline: none;
  border-color: var(--ns-primary, #0073aa);
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.ns-kb-prompt-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ns-primary, #0073aa);
  text-decoration: none;
}

.ns-kb-prompt-link:hover {
  text-decoration: underline;
}

.ns-submit-kb-prompt {
  margin: 0;
  max-width: none;
  padding: 24px 28px;
  border: 0;
  border-bottom: 1px solid var(--ns-border-soft, #edf0f2);
  border-radius: 0;
}

/* ==========================================================================
   Section label — the small upper-case rule-under heading the wireframe uses
   to name a block ("Conversation", "Attachments", "Visibility"). Same shape as
   .ns-section-copy h3 so every group in the portal is labelled identically.
   ========================================================================== */
.ns-section-label {
  margin: 0;
  padding: 18px 24px 6px;
  border-bottom: 1px solid var(--ns-border-soft, #edf0f2);
}

#nousupport-portal .ns-section-label h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ns-accent-label, #5b6b7c);
}

/* ==========================================================================
   Ticket detail: priority / assigned agent facts + close button (#11, #16b)
   ========================================================================== */
.ns-ticket-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}

/* Priority / assignee read as outlined tags so they group visually and don't
   look like body copy trailing the subject. */
.ns-ticket-fact {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--ns-border, #dfe3e8);
  border-radius: var(--ns-radius-sm, 4px);
  background: var(--ns-surface, #fff);
  font-size: 11px;
  color: var(--ns-text-soft, #4b5563);
}

.ns-ticket-fact-label {
  font-weight: 600;
}

.ns-close-ticket-btn {
  margin-left: auto;
}

/* ==========================================================================
   Loading skeletons + shimmer (#15)
   ========================================================================== */
.ns-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.ns-skeleton-line {
  height: 16px;
  border-radius: 6px;
  background: #e9edf1;
  background-image: linear-gradient(90deg, #e9edf1 0px, #f3f6f8 60px, #e9edf1 120px);
  background-size: 240px 100%;
  background-repeat: no-repeat;
  animation: ns-skeleton-shimmer 1.2s ease-in-out infinite;
}

.ns-skeleton--rows .ns-skeleton-line {
  height: 44px;
}

.ns-skeleton--hero .ns-skeleton-line:first-child {
  height: 28px;
  width: 60%;
}

.ns-skeleton--replies .ns-skeleton-line {
  height: 60px;
}

@keyframes ns-skeleton-shimmer {
  0% { background-position: -120px 0; }
  100% { background-position: 240px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-skeleton-line { animation: none; }
}

/* Optimistic pending reply (#15) */
.ns-reply-item--pending {
  opacity: 0.6;
}

/* ==========================================================================
   Password show/hide toggle (#16a)
   ========================================================================== */
.ns-password-wrap {
  position: relative;
}

.ns-password-wrap input {
  padding-right: 42px !important;
}

.ns-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s;
}

.ns-password-toggle:hover,
.ns-password-toggle.is-visible {
  opacity: 1;
}

.ns-password-toggle:focus-visible {
  outline: 2px solid var(--ns-primary, #0073aa);
  outline-offset: 2px;
  border-radius: 4px;
}

.ns-password-toggle .ns-eye {
  font-size: 16px;
  line-height: 1;
}

/* ==========================================================================
   Mobile: ticket list card stack + reply toolbar wrap (#14)
   ========================================================================== */
@media (max-width: 600px) {
  .ns-ticket-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ns-ticket-search {
    max-width: none;
  }

  /* Turn the ticket table into a card stack. Override the desktop
     "hide columns 3/4" rule so every field shows on the card. */
  .ns-table--tickets,
  .ns-table--tickets thead,
  .ns-table--tickets tbody,
  .ns-table--tickets tr,
  .ns-table--tickets td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .ns-table--tickets {
    border: 0;
    background: transparent;
  }

  .ns-table--tickets thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ns-table--tickets tr {
    margin-bottom: 12px;
    padding: 4px 0;
    border: 1px solid var(--ns-border, #e8e8e8);
    border-radius: var(--ns-radius, 8px);
    background: #fff;
  }

  .ns-table--tickets td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 0;
    padding: 8px 16px;
    text-align: right;
  }

  .ns-table--tickets td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ns-text-muted, #888);
    text-align: left;
  }

  .ns-table--tickets td strong {
    text-align: right;
  }

  /* Reply/RTE toolbar wraps neatly on small screens. */
  .ns-rte-toolbar {
    gap: 2px;
  }

  .ns-reply-actions {
    flex-wrap: wrap;
  }

  .ns-customer-reply-launch-row {
    flex-wrap: wrap;
  }

  .ns-close-ticket-btn {
    margin-left: 0;
  }
}