/**
 * KalaAfzaar Support Center — Frontend styles
 *
 * IMPORTANT: everything is scoped under #kasc-app (an ID, not just a class).
 * WooCommerce themes frequently ship their own high-specificity / !important
 * rules for generic buttons, divs and forms inside the My Account area, and
 * those stylesheets can print after ours. An ID selector outranks any normal
 * chain of theme classes regardless of load order, so scoping every rule
 * under #kasc-app is what actually guarantees our conversation bubbles and
 * buttons render correctly on every theme — class-only scoping is not
 * enough. Do not change #kasc-app back to a plain class.
 */

:root {
	--kasc-primary: #2c6ecb;
	--kasc-primary-hover: #1f5bb0;
	--kasc-bg: #ffffff;
	--kasc-bg-soft: #f7f8fa;
	--kasc-border: #e5e7eb;
	--kasc-text: #1f2328;
	--kasc-text-muted: #6b7280;
	--kasc-radius: 14px;
	--kasc-radius-sm: 8px;
	--kasc-shadow: 0 4px 16px rgba(15, 23, 42, .06);
	--kasc-success: #1a9e5c;
	--kasc-success-bg: #e6f6ee;
	--kasc-warning: #b3790a;
	--kasc-warning-bg: #fdf3e0;
	--kasc-danger: #c62828;
	--kasc-danger-bg: #fbe9e9;
	--kasc-info-bg: #e7f0fc;
	--kasc-customer-accent: #6b7280;
	--kasc-admin-accent: #2c6ecb;
	--kasc-font: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--kasc-bg: #1c1f26;
		--kasc-bg-soft: #23272f;
		--kasc-border: #343943;
		--kasc-text: #e7e9ec;
		--kasc-text-muted: #9aa0aa;
		--kasc-shadow: 0 4px 16px rgba(0, 0, 0, .35);
	}
}

body.dark-mode #kasc-app,
.dark-mode #kasc-app {
	--kasc-bg: #1c1f26;
	--kasc-bg-soft: #23272f;
	--kasc-border: #343943;
	--kasc-text: #e7e9ec;
	--kasc-text-muted: #9aa0aa;
}

#kasc-app {
	direction: rtl;
	font-family: var(--kasc-font);
	color: var(--kasc-text) !important;
	max-width: 900px;
	margin: 0 auto;
	background: transparent !important;
}

#kasc-app,
#kasc-app * {
	box-sizing: border-box;
}

#kasc-app p {
	margin: 0 0 1em;
}

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

#kasc-app .kasc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

#kasc-app .kasc-header h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--kasc-text);
}

/* -------------------------------------------------------------------- */
/* Buttons — hardened against theme resets (no-appearance, no-shadow-    */
/* replacement, no background-image tricks, explicit everything).       */
/* -------------------------------------------------------------------- */

#kasc-app .kasc-btn {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 11px 24px !important;
	border-radius: var(--kasc-radius-sm) !important;
	font-family: var(--kasc-font) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border: 2px solid transparent !important;
	cursor: pointer !important;
	background-image: none !important;
	box-shadow: none !important;
	vertical-align: middle !important;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

#kasc-app .kasc-btn-primary {
	background: var(--kasc-primary) !important;
	border-color: var(--kasc-primary) !important;
	color: #ffffff !important;
}

#kasc-app .kasc-btn-primary:hover,
#kasc-app .kasc-btn-primary:focus {
	background: var(--kasc-primary-hover) !important;
	border-color: var(--kasc-primary-hover) !important;
	color: #ffffff !important;
}

#kasc-app .kasc-btn-outline {
	background: var(--kasc-bg) !important;
	border-color: var(--kasc-primary) !important;
	color: var(--kasc-primary) !important;
}

#kasc-app .kasc-btn-outline:hover,
#kasc-app .kasc-btn-outline:focus {
	background: var(--kasc-primary) !important;
	color: #ffffff !important;
}

#kasc-app .kasc-btn-sm {
	padding: 6px 16px !important;
	font-size: 13px !important;
}

#kasc-app .kasc-btn-block {
	width: 100% !important;
}

#kasc-app .kasc-btn[disabled],
#kasc-app .kasc-btn.kasc-btn-loading {
	opacity: .65 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

#kasc-app .kasc-btn.kasc-btn-loading {
	position: relative;
	color: transparent !important;
}

#kasc-app .kasc-btn.kasc-btn-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .55);
	border-top-color: #ffffff;
	animation: kasc-spin .7s linear infinite;
}

#kasc-app .kasc-btn-outline.kasc-btn-loading::after {
	border-color: rgba(44, 110, 203, .35);
	border-top-color: var(--kasc-primary);
}

@keyframes kasc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* -------------------------------------------------------------------- */
/* Cards / notices                                                       */
/* -------------------------------------------------------------------- */

#kasc-app .kasc-card {
	background: var(--kasc-bg) !important;
	border: 1px solid var(--kasc-border) !important;
	border-radius: var(--kasc-radius) !important;
	box-shadow: var(--kasc-shadow) !important;
	padding: 24px !important;
	margin-bottom: 20px !important;
}

#kasc-app .kasc-empty {
	background: var(--kasc-bg-soft);
	border: 1px dashed var(--kasc-border);
	border-radius: var(--kasc-radius);
	padding: 40px 20px;
	text-align: center;
	color: var(--kasc-text-muted);
}

#kasc-app .kasc-notice {
	padding: 14px 18px;
	border-radius: var(--kasc-radius-sm);
	margin-bottom: 18px;
	font-size: 14px;
}

#kasc-app .kasc-notice-success {
	background: var(--kasc-success-bg);
	color: var(--kasc-success);
}

#kasc-app .kasc-notice-error {
	background: var(--kasc-danger-bg);
	color: var(--kasc-danger);
}

#kasc-app .kasc-notice-info {
	background: var(--kasc-info-bg);
	color: var(--kasc-primary);
}

/* -------------------------------------------------------------------- */
/* Tickets table                                                         */
/* -------------------------------------------------------------------- */

#kasc-app .kasc-table-wrap {
	background: var(--kasc-bg);
	border: 1px solid var(--kasc-border);
	border-radius: var(--kasc-radius);
	box-shadow: var(--kasc-shadow);
	overflow: hidden;
}

#kasc-app .kasc-table {
	width: 100%;
	border-collapse: collapse;
}

#kasc-app .kasc-table th,
#kasc-app .kasc-table td {
	padding: 14px 16px;
	text-align: right;
	border-bottom: 1px solid var(--kasc-border);
	font-size: 14px;
}

#kasc-app .kasc-table th {
	background: var(--kasc-bg-soft);
	font-weight: 600;
	color: var(--kasc-text-muted);
}

#kasc-app .kasc-table tr:last-child td {
	border-bottom: none;
}

#kasc-app .kasc-row-unread {
	background: var(--kasc-info-bg);
}

#kasc-app .kasc-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

#kasc-app .kasc-badge-new {
	background: var(--kasc-info-bg);
	color: var(--kasc-primary);
}

#kasc-app .kasc-badge-in_progress {
	background: var(--kasc-warning-bg);
	color: var(--kasc-warning);
}

#kasc-app .kasc-badge-closed {
	background: var(--kasc-success-bg);
	color: var(--kasc-success);
}

#kasc-app .kasc-new-reply-badge {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: var(--kasc-success);
	color: #ffffff;
	vertical-align: middle;
}

/* -------------------------------------------------------------------- */
/* Form fields                                                           */
/* -------------------------------------------------------------------- */

#kasc-app .kasc-form .kasc-field {
	margin-bottom: 18px;
}

#kasc-app .kasc-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 14px;
	color: var(--kasc-text);
}

#kasc-app .kasc-form input[type="text"],
#kasc-app .kasc-form input[type="date"],
#kasc-app .kasc-form input[type="file"],
#kasc-app .kasc-form select,
#kasc-app .kasc-form textarea {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1px solid var(--kasc-border) !important;
	border-radius: var(--kasc-radius-sm) !important;
	background: var(--kasc-bg) !important;
	color: var(--kasc-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	box-shadow: none !important;
	transition: border-color .15s ease;
}

#kasc-app .kasc-form input:focus,
#kasc-app .kasc-form select:focus,
#kasc-app .kasc-form textarea:focus {
	outline: none !important;
	border-color: var(--kasc-primary) !important;
}

#kasc-app .kasc-form textarea {
	resize: vertical;
	min-height: 120px;
}

#kasc-app .kasc-hint {
	font-size: 12px;
	color: var(--kasc-text-muted);
	margin: 6px 0 0;
}

#kasc-app .kasc-meta-card {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

#kasc-app .kasc-muted {
	color: var(--kasc-text-muted);
	font-size: 13px;
}

/* -------------------------------------------------------------------- */
/* Conversation — customer vs. support, made unmistakably distinct via   */
/* side, avatar colour, bubble colour and a left/right accent bar.       */
/* -------------------------------------------------------------------- */

#kasc-app .kasc-conversation {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px;
	margin-bottom: 20px;
}

#kasc-app .kasc-bubble-row {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
}

#kasc-app .kasc-bubble-row-customer {
	flex-direction: row !important;
	justify-content: flex-start;
}

#kasc-app .kasc-bubble-row-admin {
	flex-direction: row-reverse !important;
	justify-content: flex-start;
}

#kasc-app .kasc-avatar {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff !important;
}

#kasc-app .kasc-avatar-customer {
	background: var(--kasc-customer-accent) !important;
}

#kasc-app .kasc-avatar-admin {
	background: var(--kasc-admin-accent) !important;
}

#kasc-app .kasc-bubble {
	display: block;
	border-radius: var(--kasc-radius);
	padding: 16px 18px;
	max-width: 78%;
	width: fit-content;
	border: 1px solid var(--kasc-border);
	box-shadow: var(--kasc-shadow);
}

#kasc-app .kasc-bubble-customer {
	background: var(--kasc-bg-soft) !important;
	border-inline-start: 4px solid var(--kasc-customer-accent) !important;
}

#kasc-app .kasc-bubble-admin {
	background: var(--kasc-info-bg) !important;
	border-inline-end: 4px solid var(--kasc-admin-accent) !important;
	border-inline-start-color: var(--kasc-border) !important;
}

#kasc-app .kasc-bubble-new {
	outline: 2px solid var(--kasc-success);
	outline-offset: 2px;
}

#kasc-app .kasc-bubble-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 13px;
	flex-wrap: wrap;
}

#kasc-app .kasc-chip {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

#kasc-app .kasc-chip-customer {
	background: #e4e6eb !important;
	color: #3a3f47 !important;
}

#kasc-app .kasc-chip-admin {
	background: var(--kasc-admin-accent) !important;
	color: #ffffff !important;
}

#kasc-app .kasc-new-tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: var(--kasc-success);
	color: #ffffff;
}

#kasc-app .kasc-bubble-body {
	font-size: 14px;
	line-height: 1.9;
	color: var(--kasc-text) !important;
	word-break: break-word;
}

#kasc-app .kasc-attachment {
	margin-top: 10px;
	font-size: 13px;
}

#kasc-app .kasc-attachment a {
	color: var(--kasc-primary) !important;
	text-decoration: none !important;
}

#kasc-app .kasc-attachment a:hover {
	text-decoration: underline !important;
}

@media (max-width: 680px) {
	#kasc-app .kasc-table thead {
		display: none;
	}

	#kasc-app .kasc-table,
	#kasc-app .kasc-table tbody,
	#kasc-app .kasc-table tr,
	#kasc-app .kasc-table td {
		display: block;
		width: 100%;
	}

	#kasc-app .kasc-table tr {
		border-bottom: 1px solid var(--kasc-border);
		padding: 10px 0;
	}

	#kasc-app .kasc-table td {
		border: none;
		display: flex;
		justify-content: space-between;
		padding: 6px 16px;
	}

	#kasc-app .kasc-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--kasc-text-muted);
	}

	#kasc-app .kasc-bubble {
		max-width: 100%;
	}

	#kasc-app .kasc-avatar {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	#kasc-app .kasc-header {
		align-items: stretch;
	}

	#kasc-app .kasc-header .kasc-btn {
		width: 100%;
	}
}