/* ===========================================================
   Modern Account & Tickets - Front-end Styles
   =========================================================== */

.mat-modern-account {
	--mat-primary: #6c5ce7;
	--mat-primary-dark: #5a4bd1;
	--mat-bg: #f5f6fb;
	--mat-card-bg: #ffffff;
	--mat-text: #2d2d3a;
	--mat-muted: #8a8ca3;
	--mat-border: #ecedf5;
	--mat-radius: 16px;
	--mat-shadow: 0 4px 20px rgba(30, 30, 60, 0.06);
}

.mat-modern-account .woocommerce-MyAccount-navigation,
.mat-modern-account .woocommerce-MyAccount-content {
	font-family: inherit;
}

.mat-modern-account .woocommerce {
	background: var(--mat-bg);
	padding: 24px;
	border-radius: 20px;
}

/* --- Account header (avatar + name + welcome), replaces default page title --- */
.mat-account-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 4px 16px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--mat-border);
}

.mat-account-avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.mat-account-userinfo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mat-account-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--mat-text);
}

.mat-account-welcome {
	font-size: 12.5px;
	color: var(--mat-muted);
}

/* --- Sidebar Navigation --- */
.mat-modern-account .woocommerce-MyAccount-navigation {
	background: var(--mat-card-bg);
	border-radius: var(--mat-radius);
	box-shadow: var(--mat-shadow);
	padding: 10px;
}

.mat-modern-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mat-modern-account .woocommerce-MyAccount-navigation li {
	margin: 0 0 4px 0;
}

.mat-modern-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 10px;
	color: var(--mat-text);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	transition: all .15s ease;
}

.mat-modern-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--mat-bg);
}

.mat-modern-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--mat-primary);
	color: #fff;
}

/* --- Content card --- */
.mat-modern-account .woocommerce-MyAccount-content {
	background: var(--mat-card-bg);
	border-radius: var(--mat-radius);
	box-shadow: var(--mat-shadow);
	padding: 28px;
}

/* --- Stat cards grid --- */
.mat-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

@media (max-width: 900px) {
	.mat-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.mat-stats-grid { grid-template-columns: 1fr; }
}

.mat-stat-card {
	background: var(--mat-card-bg);
	border: 1px solid var(--mat-border);
	border-radius: var(--mat-radius);
	padding: 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.mat-stat-icon {
	width: 46px;
	height: 46px;
	min-width: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mat-stat-icon svg { width: 22px; height: 22px; }

.mat-stat-blue .mat-stat-icon   { background: #eef1ff; color: #5865f2; }
.mat-stat-green .mat-stat-icon  { background: #e9f9f0; color: #12b76a; }
.mat-stat-orange .mat-stat-icon { background: #fff4e6; color: #f79009; }
.mat-stat-purple .mat-stat-icon { background: #f4ecff; color: #9b51e0; }

.mat-stat-value {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var(--mat-text);
}

.mat-stat-label {
	display: block;
	font-size: 12.5px;
	color: var(--mat-muted);
	margin-top: 2px;
}

/* --- Charts grid (order status donut + purchase trend line) --- */
.mat-charts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

@media (max-width: 800px) {
	.mat-charts-grid { grid-template-columns: 1fr; }
}

.mat-chart-panel { margin-bottom: 0; }

.mat-chart-canvas-wrap {
	position: relative;
	height: 240px;
	width: 100%;
}

.mat-chart-donut-wrap { height: 220px; }

.mat-chart-legend {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--mat-text);
}

.mat-legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-inline-end: 6px;
	vertical-align: middle;
}

/* --- Dynamic dashboard announcement box --- */
.mat-announcement {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	border-radius: var(--mat-radius);
	padding: 18px 20px;
	margin-bottom: 24px;
	border: 1px solid transparent;
}

.mat-announcement-icon {
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mat-announcement-icon svg { width: 20px; height: 20px; }

.mat-announcement-body h4 { margin: 0 0 4px; font-size: 15px; }
.mat-announcement-text { font-size: 13.5px; line-height: 1.9; }
.mat-announcement-text p:last-child { margin-bottom: 0; }

.mat-announcement-info    { background: #eef1ff; border-color: #dfe3ff; color: #3547c7; }
.mat-announcement-info .mat-announcement-icon       { background: #dfe3ff; color: #3547c7; }

.mat-announcement-success { background: #e9f9f0; border-color: #cdeed6; color: #0e8a4f; }
.mat-announcement-success .mat-announcement-icon    { background: #cdeed6; color: #0e8a4f; }

.mat-announcement-warning { background: #fff4e6; border-color: #ffe2b8; color: #a85c00; }
.mat-announcement-warning .mat-announcement-icon    { background: #ffe2b8; color: #a85c00; }

.mat-announcement-danger  { background: #fdecec; border-color: #f8cdcd; color: #b3261e; }
.mat-announcement-danger .mat-announcement-icon     { background: #f8cdcd; color: #b3261e; }

/* --- Recently purchased products --- */
.mat-products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 700px) { .mat-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .mat-products-grid { grid-template-columns: 1fr; } }

.mat-product-card {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--mat-border);
	border-radius: 12px;
	padding: 12px;
	text-decoration: none;
	color: var(--mat-text);
	transition: all .15s ease;
}
.mat-product-card:hover { border-color: var(--mat-primary); transform: translateY(-2px); box-shadow: var(--mat-shadow); }

.mat-product-thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
}

.mat-product-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mat-product-name {
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mat-product-price { font-size: 12.5px; color: var(--mat-muted); }

/* --- Latest blog articles --- */
.mat-articles-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 900px) { .mat-articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .mat-articles-grid { grid-template-columns: 1fr; } }

.mat-article-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mat-border);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: var(--mat-text);
	transition: all .15s ease;
}
.mat-article-card:hover { border-color: var(--mat-primary); transform: translateY(-2px); box-shadow: var(--mat-shadow); }

.mat-article-thumb { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--mat-bg); }
.mat-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-article-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; }

.mat-article-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.mat-article-title {
	font-size: 13px;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mat-article-date { font-size: 11.5px; color: var(--mat-muted); }

/* --- Panel (recent orders etc.) --- */
.mat-panel {
	background: var(--mat-card-bg);
	border: 1px solid var(--mat-border);
	border-radius: var(--mat-radius);
	padding: 20px;
	margin-bottom: 24px;
}

.mat-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.mat-panel-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.mat-link-more {
	font-size: 13px;
	color: var(--mat-primary);
	text-decoration: none;
}

.mat-table-responsive { overflow-x: auto; }

.mat-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.mat-orders-table th {
	text-align: right;
	font-size: 12.5px;
	color: var(--mat-muted);
	font-weight: 600;
	padding: 10px 8px;
	border-bottom: 1px solid var(--mat-border);
}

.mat-orders-table td {
	padding: 12px 8px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--mat-border);
	color: var(--mat-text);
}

.mat-orders-table a { color: var(--mat-primary); text-decoration: none; }

.mat-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 12px;
	background: #eef1ff;
	color: #5865f2;
}

.mat-badge-completed { background: #e9f9f0; color: #12b76a; }
.mat-badge-processing { background: #fff4e6; color: #f79009; }
.mat-badge-on-hold { background: #f4ecff; color: #9b51e0; }
.mat-badge-cancelled,
.mat-badge-failed { background: #fdecec; color: #e5484d; }
.mat-badge-refunded { background: #eceff1; color: #607d8b; }

.mat-btn-mini {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 8px;
	background: var(--mat-bg);
	color: var(--mat-text);
	font-size: 12.5px;
	text-decoration: none;
}

.mat-empty-state {
	color: var(--mat-muted);
	text-align: center;
	padding: 30px 0;
}

/* --- Voice recorder (front-end) --- */
.mat-voice-recorder {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.mat-btn-mic {
	background: var(--mat-bg);
	border: 1px solid var(--mat-border);
	color: var(--mat-text);
	padding: 9px 16px;
	border-radius: 10px;
	font-size: 13px;
	cursor: pointer;
}

.mat-btn-stop {
	background: #fdecec;
	border-color: #f8cdcd;
	color: #e5484d;
	animation: mat-pulse 1.4s infinite;
}

@keyframes mat-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(229,72,77,.35); }
	70%  { box-shadow: 0 0 0 8px rgba(229,72,77,0); }
	100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}

.mat-voice-preview {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mat-voice-preview audio {
	height: 34px;
	max-width: 220px;
}

.mat-btn-remove-voice {
	background: none;
	border: none;
	color: #e5484d;
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
}

.mat-voice-player { margin-top: 8px; }
.mat-voice-player audio { height: 34px; max-width: 100%; }

/* ===========================================================
   Tickets - Front-end
   =========================================================== */

.mat-tickets-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
}

.mat-btn-primary {
	background: var(--mat-primary);
	color: #fff !important;
	border: none;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.mat-btn-primary:hover { background: var(--mat-primary-dark); color: #fff; }

.mat-tickets-list {
	width: 100%;
	border-collapse: collapse;
}

.mat-tickets-list th {
	text-align: right;
	font-size: 12.5px;
	color: var(--mat-muted);
	padding: 10px 8px;
	border-bottom: 1px solid var(--mat-border);
}

.mat-tickets-list td {
	padding: 12px 8px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--mat-border);
}

.mat-status {
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 12px;
}
.mat-status-open { background: #eef1ff; color: #5865f2; }
.mat-status-answered { background: #e9f9f0; color: #12b76a; }
.mat-status-closed { background: #eceff1; color: #607d8b; }

/* --- New ticket form modal --- */
.mat-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20,20,30,.45);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.mat-modal-overlay.mat-open { display: flex; }

.mat-modal-box {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	width: 92%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
}

.mat-modal-box h3 { margin-top: 0; }

.mat-form-group { margin-bottom: 14px; }
.mat-form-group label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
.mat-form-group select,
.mat-form-group input[type="text"],
.mat-form-group textarea {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--mat-border);
	font-family: inherit;
	font-size: 13.5px;
}
.mat-form-group textarea { min-height: 120px; resize: vertical; }

.mat-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.mat-btn-secondary {
	background: var(--mat-bg);
	border: none;
	padding: 10px 18px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13.5px;
}

/* --- Ticket conversation thread --- */
.mat-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }

.mat-message {
	max-width: 80%;
	padding: 14px 16px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.8;
}

.mat-message-customer {
	align-self: flex-end;
	background: var(--mat-primary);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.mat-message-admin {
	align-self: flex-start;
	background: var(--mat-bg);
	color: var(--mat-text);
	border-bottom-left-radius: 4px;
}

.mat-message-meta {
	display: block;
	font-size: 11px;
	opacity: .75;
	margin-top: 6px;
}

.mat-reply-box textarea {
	width: 100%;
	min-height: 100px;
	border-radius: 12px;
	border: 1px solid var(--mat-border);
	padding: 12px;
	font-family: inherit;
	font-size: 13.5px;
	margin-bottom: 10px;
	resize: vertical;
}