/**
 * Yuki Kado User System - Front-end Dashboard Stylesheet (Production Hardened & Fully Scoped)
 * Strict Namespace: .ykc-user-dashboard
 * 0 Unscoped Global Rules | 100% Theme / Elementor / WooCommerce / Checkout Isolated
 * Font: Pinar FD / Pinar (Font Weight <= 500)
 *
 * @package YukiKadoUserSystem
 * @version 2.8.7
 */

/* ==========================================================================
   PINAR FD & PINAR EMBEDDED WEBFONTS (BUNDLED IN PLUGIN)
   ========================================================================== */
@font-face {
	font-family: 'Pinar FD';
	src: url('../fonts/Pinar-FD-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pinar FD';
	src: url('../fonts/Pinar-FD-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pinar FD';
	src: url('../fonts/Pinar-FD-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pinar';
	src: url('../fonts/Pinar-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pinar';
	src: url('../fonts/Pinar-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pinar';
	src: url('../fonts/Pinar-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   STRICT SVG & ICON BORDER-RADIUS RESET (PER USER INSTRUCTION & YK-DESIGN-SYSTEM)
   All icons must strictly have border-radius: 0 !important; with 0 border/outline.
   ========================================================================== */
.ykc-user-dashboard svg,
.ykc-user-dashboard svg *,
.ykc-user-dashboard i,
.ykc-user-dashboard .dashicons,
.yuki-modal-backdrop svg,
.yuki-modal-backdrop svg *,
.yuki-address-modal svg,
.yuki-address-modal svg *,
div[id$="-modal"] svg,
div[id$="-modal"] svg *,
.yk-orders-panel svg,
.yk-orders-panel svg *,
.yk-header-auth-btn svg,
.yk-header-auth-btn svg *,
.md-nav-item svg,
.md-title svg,
.md-title-text svg,
.md-btn svg,
.btn svg,
.actions svg,
.title-icon svg,
.yk-timeline-node svg,
.yk-pill-btn svg {
	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* --- BASE DASHBOARD STYLES --- */
		
.ykc-user-dashboard, .ykc-user-dashboard *, .ykc-user-dashboard input, .ykc-user-dashboard button, .ykc-user-dashboard select, .ykc-user-dashboard textarea {
 
			box-sizing: border-box !important; 
			font-family: inherit !important;
		
}

		/* WordPress Full Width Breakout for Block Themes */
		

		

		
.ykc-user-dashboard :where(.is-layout-constrained) > .md-dashboard-wrapper, .ykc-user-dashboard .is-layout-constrained > .md-dashboard-wrapper, .ykc-user-dashboard .wp-block-post-content > .md-dashboard-wrapper, .ykc-user-dashboard .entry-content > .md-dashboard-wrapper {

			max-width: 1240px !important;
			width: 100% !important;
			margin-left: auto !important;
			margin-right: auto !important;
			box-sizing: border-box !important;
			overflow-x: hidden !important;
		
}

		
:root,
.ykc-user-dashboard,
.yuki-modal-backdrop,
.yuki-address-modal {

			/* Official YukiKado Design Tokens (Strict YK-DESIGN-SYSTEM.md) */
			--yk-primary: #066787;
			--yk-primary-hover: #05546d;
			--yk-primary-dark: #044357;
			--yk-primary-light: #e6f3f6;
			--yk-primary-subtle: rgba(6, 103, 135, 0.08);

			--yk-secondary: #88D4E8;
			--yk-secondary-light: #e6f7fa;

			--yk-accent: #FCB216;
			--yk-accent-hover: #e59f0f;
			--yk-accent-soft: rgba(252, 178, 22, 0.15);

			--yk-text-main: #334155;
			--yk-text-muted: #64748B;
			--yk-text-subtle: #94A3B8;

			--yk-bg-card: #FFFFFF;
			--yk-bg-alt: #F8FAFC;
			--yk-border-light: #E2E8F0;
			--yk-border-brand: rgba(6, 103, 135, 0.16);

			--yk-success: #10B981;
			--yk-warning: #FCB216;
			--yk-warning-bg: #FFFBEB;
			--yk-danger: #D3191C;
			--yk-danger-bg: #FEF2F2;

			/* Backward-compatible mapped aliases */
			--md-primary: #066787;
			--md-primary-light: #88D4E8;
			--md-primary-soft: #e6f3f6;
			--md-accent: #FCB216;
			--md-surface: #FFFFFF;
			--md-bg: #F8FAFC;
			--md-text: #334155;
			--md-text-muted: #64748B;
			--md-border: #E2E8F0;
			--md-radius-xl: 8px;
			--md-radius-lg: 8px;
			--md-radius-md: 8px;
			--md-shadow: 0 4px 20px rgba(6, 103, 135, 0.06);
			--md-transition: all 0.25s ease;
}

#ykc-user-dashboard,
.ykc-user-dashboard.md-dashboard-wrapper,
#ykc-user-dashboard.alignwide,
#ykc-user-dashboard.alignfull {

			box-sizing: border-box !important;
			width: 100% !important;
			max-width: 1240px !important;
			margin: 20px auto !important;
			display: flex !important;
			flex-direction: row !important;
			flex-wrap: nowrap !important;
			align-items: flex-start !important;
			gap: 24px !important;
			background-color: transparent;
			direction: rtl;
			color: var(--md-text);
			animation: mdPanelIn 0.5s ease both;
			position: relative !important;
		
}

		
.ykc-user-dashboard *, .ykc-user-dashboard *::before, .ykc-user-dashboard *::after {

			box-sizing: border-box !important;
		
}

		@keyframes mdPanelIn {
			from { opacity: 0; transform: translateY(14px); }
			to   { opacity: 1; transform: translateY(0); }
		}

		
.ykc-user-dashboard .md-sidebar {

			flex: 0 0 270px !important;
			width: 270px !important;
			min-width: 270px !important;
			max-width: 270px !important;
			background: var(--md-surface);
			border-radius: var(--md-radius-xl);
			box-shadow: var(--md-shadow);
			overflow: hidden;
			align-self: flex-start;
			position: sticky !important;
			top: 0px !important;
			border: 1px solid var(--md-border);
			z-index: 5 !important;
			box-sizing: border-box !important;
		
}

		
.ykc-user-dashboard .md-user-info {

			padding: 28px 24px;
			text-align: center;
			border-bottom: 1px solid var(--md-border);
			background: var(--md-bg);
			display: flex;
			flex-direction: column;
			align-items: center;
		
}

		
.ykc-user-dashboard .md-avatar {

			width: 80px;
			height: 80px;
			border-radius: 16px !important;
			margin-bottom: 14px;
			background-color: #dcecef;
			transition: var(--md-transition);
			object-fit: cover;
		
}

		
.ykc-user-dashboard .md-user-name {

			font-size: 1.15rem !important;
			font-weight: 500 !important;
			margin: 0 0 6px !important;
			color: var(--md-text) !important;
		
}

		
		
.ykc-user-dashboard .md-user-email {
 font-size: 0.8rem; color: var(--md-text-muted); 
}

		
.ykc-user-dashboard .md-mobile-nav-toggle {

			display: none;
			width: 100%;
			padding: 16px 20px;
			background: #fff;
			color: var(--md-primary);
			font-weight: 500;
			font-size: 14px;
			border-bottom: 1px solid var(--md-border);
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
			user-select: none;
		
}

		
.ykc-user-dashboard .md-mobile-nav-toggle .chevron {

			width: 20px;
			height: 20px;
			transition: transform 0.4s ease;
		
}

		
.ykc-user-dashboard .md-nav-list {
 list-style: none; padding: 10px; margin: 0; 
}

		
.ykc-user-dashboard .md-nav-item {

			padding: 12px 16px;
			margin-bottom: 4px;
			border-radius: var(--md-radius-md);
			cursor: pointer;
			color: var(--md-text-muted);
			transition: background 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
			font-weight: 500;
			font-size: 13.5px;
			display: flex;
			align-items: center;
			gap: 10px;
			outline: none !important;
			-webkit-tap-highlight-color: transparent !important;
		
}

		
.ykc-user-dashboard .md-nav-item svg {
 width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; outline: none !important; border: none !important; 
}

		
.ykc-user-dashboard .md-nav-item:hover {
 background-color: var(--md-primary-soft); color: var(--md-primary); 
}

		
.ykc-user-dashboard .md-nav-item.active {

			background: var(--md-primary);
			color: #ffffff;
			font-weight: 500;
			box-shadow: 0 8px 16px rgba(6, 103, 135, 0.16);
		
}

		
.ykc-user-dashboard .md-nav-item.active svg {
 opacity: 1; 
}

		
.ykc-user-dashboard .md-nav-item.logout {
 
			color: #d32f2f; 
			margin-top: 8px; 
			border-top: 1px dashed var(--md-border); 
			border-radius: 0; 
			padding-top: 18px; 
		
}

		
.ykc-user-dashboard .yuki-avatar-wrap {

			position: relative;
			display: inline-block;
			margin-bottom: 10px;
		
}

		
.ykc-user-dashboard .yuki-avatar-upload-trigger {

			position: absolute;
			bottom: 2px;
			left: 2px;
			background: var(--md-primary);
			color: #fff;
			border: 2px solid #fff;
			border-radius: 50%;
			width: 30px;
			height: 30px;
			font-size: 13px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 8px rgba(0,0,0,0.18);
			transition: transform 0.2s ease;
		
}

		
.ykc-user-dashboard .yuki-avatar-upload-trigger:hover {

			transform: none;
		
}

		
.ykc-user-dashboard .md-content-area {

			flex: 1 1 auto !important;
			min-width: 0 !important;
			width: calc(100% - 294px) !important;
			max-width: calc(100% - 294px) !important;
			background: var(--md-surface);
			border-radius: var(--md-radius-xl);
			box-shadow: var(--md-shadow);
			padding: 32px;
			border: 1px solid var(--md-border);
			box-sizing: border-box !important;
			overflow: hidden !important;
		
}

		
.ykc-user-dashboard .md-tab-content {
 display: none; 
}

		
.ykc-user-dashboard .md-tab-content.active {
 display: block; animation: mdFadeIn 0.4s ease both; 
}

		
.ykc-user-dashboard .md-title {

			font-size: 1.25rem !important;
			font-weight: 500 !important;
			color: var(--md-text) !important;
			margin-top: 0 !important;
			margin-bottom: 24px !important;
			padding-bottom: 14px;
			border-bottom: 1px solid var(--md-border);
			display: flex;
			justify-content: space-between;
			align-items: center;
			direction: rtl;
			text-align: right;
			gap: 12px;
			flex-wrap: wrap;
		
}

		
.ykc-user-dashboard .md-stats-grid {
 display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; margin-top: 20px !important; margin-bottom: 24px !important;
}

		
.ykc-user-dashboard .md-stat-card {
 background: #ffffff !important; border: 1px solid #eef2f6 !important; border-radius: 12px !important; padding: 16px 14px !important; display: flex !important; align-items: center !important; gap: 14px !important; min-height: 90px !important; box-sizing: border-box !important; transition: var(--md-transition); 
}

		
.ykc-user-dashboard .md-stat-card:hover {
 transform: none; box-shadow: 0 12px 30px rgba(29, 70, 82, 0.08); border-color: var(--md-primary-light); 
}

		
.ykc-user-dashboard .md-stat-icon {
 width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
}

		
.ykc-user-dashboard .md-stat-icon svg {
 width: 24px; height: 24px; 
}

		
.ykc-user-dashboard .icon-blue {
 background: var(--md-primary-soft); color: var(--md-primary); 
}

		
.ykc-user-dashboard .icon-green {
 background: #f4f8e1; color: #8e9e1c; 
}

		
.ykc-user-dashboard .icon-orange {
 background: #fff3e0; color: #ef6c00; 
}

		
.ykc-user-dashboard .icon-purple {
 background: #f3e5f5; color: #7b1fa2; 
}

		
.ykc-user-dashboard .md-stat-info {
 display: flex; flex-direction: column; min-width: 0; 
}

		
.ykc-user-dashboard .md-stat-title {
 font-size: 0.8rem; color: var(--md-text-muted); margin-bottom: 4px; font-weight: 500; 
}

		
.ykc-user-dashboard .md-stat-value {
 font-size: 1.15rem; font-weight: 500; color: var(--md-text); 
}

		
.ykc-user-dashboard .md-charts-grid {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; 
}

		
.ykc-user-dashboard .md-chart-card {
 background: #fff; border: 1px solid var(--md-border); border-radius: var(--md-radius-lg); padding: 20px; 
}

		
.ykc-user-dashboard .md-chart-header h4 {
 margin: 0 0 14px; font-size: 0.95rem; font-weight: 500; color: var(--md-text) !important; 
}
     
		
.ykc-user-dashboard .md-chart-wrap {
 position: relative; height: 220px; 
}

		
.ykc-user-dashboard .md-empty-note {
 text-align: center; padding: 40px 20px; color: var(--md-text-muted); font-size: 0.9rem; background: var(--md-bg); border-radius: var(--md-radius-lg); border: 1px dashed #dcecef; 
}

		
.ykc-user-dashboard .md-btn {

			background: var(--md-primary) !important;
			color: #ffffff !important;
			border: none !important;
			padding: 10px 20px;
			border-radius: 10px;
			cursor: pointer;
			transition: var(--md-transition);
			font-size: 0.85rem;
			font-weight: 500;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		
}

		
.ykc-user-dashboard .md-btn:hover {
 background: #0b748d !important; transform: none; 
}

		
.ykc-user-dashboard .md-btn-outline {

			background: #fff !important;
			color: var(--md-primary) !important;
			border: 1px solid var(--md-primary) !important;
			padding: 8px 16px;
			border-radius: 10px;
			cursor: pointer;
			transition: var(--md-transition);
			text-decoration: none !important;
			font-size: 0.85rem;
			font-weight: 500;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		
}

		
.ykc-user-dashboard .md-btn-outline:hover {
 background: var(--md-primary-soft) !important; 
}

		
.ykc-user-dashboard .md-form-group {
 margin-bottom: 16px; 
}

		
.ykc-user-dashboard .md-form-group label {
 display: block; margin-bottom: 8px; color: var(--md-text-muted); font-size: 0.85rem; font-weight: 500; 
}

		
.ykc-user-dashboard .md-input {

			width: 100%;
			padding: 12px 14px;
			border: 1px solid var(--md-border);
			border-radius: 12px !important;
			background: var(--md-bg) !important;
			color: var(--md-text);
			font-size: 14px !important;
			transition: var(--md-transition);
			appearance: none;
		
}

		
.ykc-user-dashboard .md-input:focus {
 outline: none; border-color: var(--md-primary); background: #ffffff !important; box-shadow: 0 0 0 3px rgba(101,201,223,.14); 
}

		
.ykc-user-dashboard .md-table-wrapper {
	width: 100% !important;
	background: #ffffff !important;
	border: 1px solid #f1f5f9 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(6, 103, 135, 0.04) !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	margin-bottom: 24px !important;
}

.ykc-user-dashboard .md-table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	direction: rtl !important;
	text-align: right !important;
	border: none !important;
	font-size: 13px !important;
}

.ykc-user-dashboard .md-table th {
	background: #f8fafc !important;
	color: #64748b !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	padding: 14px 18px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	white-space: nowrap !important;
	letter-spacing: normal !important;
}

.ykc-user-dashboard .md-table tbody tr {
	background: #ffffff !important;
	transition: background-color 0.15s ease !important;
}

.ykc-user-dashboard .md-table tbody tr:hover {
	background: #f8fafc !important;
}

.ykc-user-dashboard .md-table td {
	padding: 14px 18px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	color: #334155 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	vertical-align: middle !important;
	line-height: 1.5 !important;
}

.ykc-user-dashboard .md-table tbody tr:last-child td {
	border-bottom: none !important;
}

/* ==========================================================================
   MODERN SAAS ORDERS PANEL & TABLE REDESIGN (MATCHING DEMO & YK-DESIGN-SYSTEM)
   ========================================================================== */
.ykc-user-dashboard .yk-orders-panel,
.yk-orders-panel {
	background: #ffffff !important;
	border: 1px solid var(--yk-border, #E1E8ED) !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 20px rgba(6, 103, 135, 0.05) !important;
	overflow: hidden !important;
	margin-bottom: 24px !important;
	box-sizing: border-box !important;
}
.ykc-user-dashboard .yk-orders-panel .panel-head,
.yk-orders-panel .panel-head {
	padding: 22px 24px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
	background: #ffffff !important;
	border-bottom: 1px solid #EDF1F4 !important;
}
.ykc-user-dashboard .yk-orders-panel .title-wrap,
.yk-orders-panel .title-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}
.ykc-user-dashboard .yk-orders-panel .title-icon,
.yk-orders-panel .title-icon {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	border-radius: 8px !important;
	background: #EAF8FC !important;
	display: grid !important;
	place-items: center !important;
	color: var(--yk-primary, #066787) !important;
	flex-shrink: 0 !important;
}
.ykc-user-dashboard .yk-orders-panel .panel-title,
.yk-orders-panel .panel-title {
	font-size: 18px !important;
	font-weight: 500 !important;
	color: var(--yk-primary, #066787) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}
.ykc-user-dashboard .yk-orders-panel .subtitle,
.yk-orders-panel .subtitle {
	font-size: 12px !important;
	color: var(--yk-muted, #82909D) !important;
	margin-top: 3px !important;
	font-weight: 400 !important;
}
.ykc-user-dashboard .yk-orders-panel .head-actions,
.yk-orders-panel .head-actions {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}
.ykc-user-dashboard .yk-orders-panel .search,
.yk-orders-panel .search {
	height: 40px !important;
	width: 210px !important;
	border: 1px solid var(--yk-border, #E1E8ED) !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	padding: 0 12px !important;
	color: var(--yk-text, #34495A) !important;
	outline: none !important;
	font-size: 12.5px !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
	direction: rtl !important;
	font-family: inherit !important;
}
.ykc-user-dashboard .yk-orders-panel .search:focus,
.yk-orders-panel .search:focus,
.ykc-user-dashboard .yk-orders-panel .filter:focus,
.yk-orders-panel .filter:focus {
	border-color: var(--yk-sky, #88D4E8) !important;
	box-shadow: 0 0 0 3px rgba(136, 212, 232, 0.22) !important;
}
.ykc-user-dashboard .yk-orders-panel .filter,
.yk-orders-panel .filter {
	height: 40px !important;
	border: 1px solid var(--yk-border, #E1E8ED) !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	padding: 0 12px !important;
	color: var(--yk-primary, #066787) !important;
	outline: none !important;
	min-width: 135px !important;
	font-size: 12.5px !important;
	box-sizing: border-box !important;
	direction: rtl !important;
	font-family: inherit !important;
}
.ykc-user-dashboard .yk-orders-panel .table-wrap,
.yk-orders-panel .table-wrap {
	width: 100% !important;
	overflow-x: auto !important;
	border-top: 1px solid #EDF1F4 !important;
	-webkit-overflow-scrolling: touch !important;
}
.ykc-user-dashboard .yk-orders-panel .yk-orders-table,
.yk-orders-panel .yk-orders-table {
	width: 100% !important;
	min-width: 760px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	table-layout: auto !important;
	margin: 0 !important;
	direction: rtl !important;
}
.ykc-user-dashboard .yk-orders-panel .yk-orders-table thead th,
.yk-orders-panel .yk-orders-table thead th {
	background: #F8FAFC !important;
	color: #718392 !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	padding: 14px 18px !important;
	text-align: right !important;
	white-space: nowrap !important;
	border-bottom: 1px solid var(--yk-border, #E1E8ED) !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}
.ykc-user-dashboard .yk-orders-panel .yk-orders-table tbody td,
.yk-orders-panel .yk-orders-table tbody td {
	padding: 14px 18px !important;
	background: #ffffff !important;
	border-bottom: 1px solid #F0F3F6 !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	color: var(--yk-text, #34495A) !important;
	font-size: 13px !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
	transition: background 0.18s ease !important;
}
.ykc-user-dashboard .yk-orders-panel .yk-orders-table tbody tr:nth-child(even) td,
.yk-orders-panel .yk-orders-table tbody tr:nth-child(even) td {
	background: #FBFCFD !important;
}
.ykc-user-dashboard .yk-orders-panel .yk-orders-table tbody tr:hover td,
.yk-orders-panel .yk-orders-table tbody tr:hover td {
	background: var(--yk-hover, #F0FAFD) !important;
}
.ykc-user-dashboard .yk-orders-panel .yk-orders-table tbody tr:last-child td,
.yk-orders-panel .yk-orders-table tbody tr:last-child td {
	border-bottom: 0 !important;
}
.ykc-user-dashboard .yk-orders-panel .order-id,
.yk-orders-panel .order-id {
	font-weight: 500 !important;
	color: var(--yk-primary, #066787) !important;
	direction: ltr !important;
	display: inline-block !important;
}
.ykc-user-dashboard .yk-orders-panel .date,
.yk-orders-panel .date {
	color: #6F7E8C !important;
	font-size: 12.5px !important;
}

/* Price Column: Unit Strictly on the LEFT of the Number */
.ykc-user-dashboard .yk-orders-panel .yk-table-price,
.yk-orders-panel .yk-table-price {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: baseline !important;
	justify-content: flex-start !important;
	gap: 4px !important;
	direction: rtl !important;
}
.ykc-user-dashboard .yk-orders-panel .yk-price-val,
.yk-orders-panel .yk-price-val {
	order: 1 !important;
	font-weight: 500 !important;
	color: #405565 !important;
	font-size: 13.5px !important;
}
.ykc-user-dashboard .yk-orders-panel .yk-price-unit,
.yk-orders-panel .yk-price-unit {
	order: 2 !important;
	font-size: 11px !important;
	font-weight: 300 !important;
	color: var(--yk-muted, #82909D) !important;
}

/* Status Pill Badge with Dot */
.ykc-user-dashboard .yk-orders-panel .status,
.yk-orders-panel .status {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	min-width: 74px !important;
	padding: 4px 11px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}
.ykc-user-dashboard .yk-orders-panel .status:before,
.yk-orders-panel .status:before {
	content: "" !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: currentColor !important;
	opacity: 0.75 !important;
	flex-shrink: 0 !important;
}
.ykc-user-dashboard .yk-orders-panel .status--paid,
.yk-orders-panel .status--paid {
	background: #E5F8EE !important;
	color: #218052 !important;
}
.ykc-user-dashboard .yk-orders-panel .status--pending,
.yk-orders-panel .status--pending {
	background: #FFF4D9 !important;
	color: #956B08 !important;
}
.ykc-user-dashboard .yk-orders-panel .status--failed,
.yk-orders-panel .status--failed {
	background: #FDEBEC !important;
	color: #B4232D !important;
}
.ykc-user-dashboard .yk-orders-panel .status--processing,
.yk-orders-panel .status--processing {
	background: #E8F2FF !important;
	color: #2763B8 !important;
}

/* Action Buttons */
.ykc-user-dashboard .yk-orders-panel .actions,
.yk-orders-panel .actions {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	justify-content: flex-start !important;
}
.ykc-user-dashboard .yk-orders-panel .btn,
.yk-orders-panel .btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	min-height: 34px !important;
	padding: 6px 12px !important;
	border-radius: 8px !important;
	border: 1px solid transparent !important;
	text-decoration: none !important;
	cursor: pointer !important;
	font-size: 11.5px !important;
	font-weight: 400 !important;
	transition: background 0.2s, color 0.2s, border-color 0.2s !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}
.ykc-user-dashboard .yk-orders-panel .btn svg,
.yk-orders-panel .btn svg {
	width: 14px !important;
	height: 14px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 1.8 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	border-radius: 0 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
}
.ykc-user-dashboard .yk-orders-panel .btn--primary,
.yk-orders-panel .btn--primary {
	background: var(--yk-primary, #066787) !important;
	color: #ffffff !important;
	border-color: var(--yk-sky, #88D4E8) !important;
}
.ykc-user-dashboard .yk-orders-panel .btn--primary:hover,
.yk-orders-panel .btn--primary:hover {
	background: #04536C !important;
	color: #ffffff !important;
}
.ykc-user-dashboard .yk-orders-panel .btn--soft,
.yk-orders-panel .btn--soft {
	background: var(--yk-sky, #6EC1E4) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.ykc-user-dashboard .yk-orders-panel .btn--soft:hover,
.yk-orders-panel .btn--soft:hover {
	background: #066787 !important;
	color: #ffffff !important;
}
.ykc-user-dashboard .yk-orders-panel .btn--soft span,
.yk-orders-panel .btn--soft span,
.ykc-user-dashboard .yk-orders-panel .btn--soft svg,
.yk-orders-panel .btn--soft svg,
.ykc-user-dashboard .yk-orders-panel .btn--soft:hover span,
.yk-orders-panel .btn--soft:hover span,
.ykc-user-dashboard .yk-orders-panel .btn--soft:hover svg,
.yk-orders-panel .btn--soft:hover svg {
	background: transparent !important;
	color: #ffffff !important;
	stroke: #ffffff !important;
}
.ykc-user-dashboard .yk-orders-panel .panel-foot,
.yk-orders-panel .panel-foot {
	padding: 14px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	color: var(--yk-muted, #82909D) !important;
	font-size: 12px !important;
	flex-wrap: wrap !important;
	border-top: 1px solid #EDF1F4 !important;
	background: #ffffff !important;
}

@media (max-width: 768px) {
	.ykc-user-dashboard .yk-orders-panel .panel-head,
	.yk-orders-panel .panel-head {
		padding: 16px 14px 14px !important;
	}
	.ykc-user-dashboard .yk-orders-panel .head-actions,
	.yk-orders-panel .head-actions {
		width: 100% !important;
	}
	.ykc-user-dashboard .yk-orders-panel .search,
	.yk-orders-panel .search {
		width: 100% !important;
		flex: 1 !important;
	}
	.ykc-user-dashboard .yk-orders-panel .filter,
	.yk-orders-panel .filter {
		flex: 1 !important;
	}
	.ykc-user-dashboard .yk-orders-panel .panel-foot,
	.yk-orders-panel .panel-foot {
		padding: 12px 14px !important;
	}
}

.ykc-user-dashboard .md-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4px 12px !important;
	border-radius: 9999px !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
	border: none !important;
}

.ykc-user-dashboard .badge-success {
	background: #dcfce7 !important;
	color: #15803d !important;
}

.ykc-user-dashboard .badge-info {
	background: #e0f2fe !important;
	color: #0369a1 !important;
}

.ykc-user-dashboard .badge-warning {
	background: #fef3c7 !important;
	color: #b45309 !important;
}

.ykc-user-dashboard .badge-danger {
	background: #fee2e2 !important;
	color: #b91c1c !important;
}

		
.ykc-user-dashboard .badge-info {
 background: #f0f9fb !important; color: #066787 !important; border: 1px solid #88D4E8 !important; 
}

		
.ykc-user-dashboard .badge-warning {
 background: #f0f9fb !important; color: #066787 !important; border: 1px solid #88D4E8 !important; 
}

		
.ykc-user-dashboard .badge-danger {
 background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; 
}

		/* Card Action Buttons & Pill Badges (Matching Soft Pill Style) */
		
.ykc-user-dashboard .yuki-btn-open-gift-modal, .ykc-user-dashboard .md-btn-sm.yuki-btn-open-gift-modal {

			background: #f0f9fb !important;
			color: #066787 !important;
			border: 1px solid #88D4E8 !important;
			border-radius: 8px !important;
			padding: 5px 14px !important;
			font-size: 11.5px !important;
			font-weight: 400 !important;
			cursor: pointer !important;
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			gap: 6px !important;
			box-shadow: 0 1px 3px rgba(6, 103, 135, 0.08) !important;
			transition: all 0.25s ease !important;
			outline: none !important;
			text-decoration: none !important;
			font-family: inherit !important;
			line-height: 1.4 !important;
			white-space: nowrap !important;
		
}

		
.ykc-user-dashboard .yuki-btn-open-gift-modal:hover, .ykc-user-dashboard .md-btn-sm.yuki-btn-open-gift-modal:hover {

			background: #066787 !important;
			color: #ffffff !important;
			border-color: #066787 !important;
			box-shadow: 0 3px 10px rgba(6, 103, 135, 0.28) !important;
			transform: translateY(-1px) !important;
		
}

		
.ykc-user-dashboard .yuki-btn-open-gift-modal:active, .ykc-user-dashboard .md-btn-sm.yuki-btn-open-gift-modal:active {

			transform: translateY(0) !important;
			box-shadow: 0 1px 3px rgba(6, 103, 135, 0.15) !important;
		
}

		
.ykc-user-dashboard .yuki-btn-unlink-gift, .ykc-user-dashboard .md-btn-outline-sm.yuki-btn-unlink-gift {

			background: #fff5f5 !important;
			color: #ef4444 !important;
			border: 1px solid #fca5a5 !important;
			border-radius: 20px !important;
			padding: 5px 14px !important;
			font-size: 11.5px !important;
			font-weight: 600 !important;
			cursor: pointer !important;
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			gap: 5px !important;
			box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08) !important;
			transition: all 0.25s ease !important;
			outline: none !important;
			text-decoration: none !important;
			font-family: inherit !important;
			line-height: 1.4 !important;
			white-space: nowrap !important;
		
}

		
.ykc-user-dashboard .yuki-btn-unlink-gift:hover, .ykc-user-dashboard .md-btn-outline-sm.yuki-btn-unlink-gift:hover {

			background: #ef4444 !important;
			color: #ffffff !important;
			border-color: #ef4444 !important;
			box-shadow: 0 3px 10px rgba(239, 68, 68, 0.28) !important;
			transform: translateY(-1px) !important;
		
}

		
.ykc-user-dashboard .yuki-btn-unlink-gift:active, .ykc-user-dashboard .md-btn-outline-sm.yuki-btn-unlink-gift:active {

			transform: translateY(0) !important;
			box-shadow: 0 1px 3px rgba(239, 68, 68, 0.15) !important;
		
}

		
.ykc-user-dashboard .md-btn-sm {

			background: #eaf8fb !important;
			color: #066787 !important;
			border: 1px solid #99d5e3 !important;
			border-radius: 20px !important;
			padding: 5px 14px !important;
			cursor: pointer !important;
			transition: all 0.25s ease !important;
			font-size: 11.5px !important;
			font-weight: 600 !important;
			text-decoration: none !important;
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			gap: 5px !important;
			font-family: inherit !important;
			line-height: 1.4 !important;
			outline: none !important;
			white-space: nowrap !important;
			box-shadow: 0 1px 3px rgba(6, 103, 135, 0.08) !important;
		
}

		
.ykc-user-dashboard .md-btn-sm:hover {

			background: #066787 !important;
			color: #ffffff !important;
			border-color: #066787 !important;
			box-shadow: 0 3px 10px rgba(6, 103, 135, 0.25) !important;
			transform: translateY(-1px) !important;
		
}

		
.ykc-user-dashboard .md-btn-outline-sm {

			background: #ffffff !important;
			color: var(--md-primary, #066787) !important;
			border: 1px solid var(--md-primary, #066787) !important;
			border-radius: 20px !important;
			padding: 5px 14px !important;
			cursor: pointer !important;
			transition: all 0.25s ease !important;
			font-size: 11.5px !important;
			font-weight: 600 !important;
			text-decoration: none !important;
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			gap: 5px !important;
			font-family: inherit !important;
			line-height: 1.4 !important;
			outline: none !important;
			white-space: nowrap !important;
		
}

		
.ykc-user-dashboard .md-btn-outline-sm:hover {

			background: var(--md-primary-soft, #eaf8fb) !important;
		
}

		
@media (max-width: 960px) {

			
#ykc-user-dashboard,
.ykc-user-dashboard.md-dashboard-wrapper {

				flex-direction: column !important;
				flex-wrap: wrap !important;
				gap: 16px !important;
				width: 100% !important;
				max-width: 100% !important;
				margin: 10px auto !important;
				padding: 0 6px !important;
				overflow-x: hidden !important;
				box-sizing: border-box !important;
			
}

			
.ykc-user-dashboard .md-sidebar {

				position: static !important;
				width: 100% !important;
				min-width: 0 !important;
				max-width: 100% !important;
				flex: none !important;
				border-radius: var(--md-radius-xl);
				box-sizing: border-box !important;
				margin-bottom: 8px !important;
			
}

			
.ykc-user-dashboard .md-content-area {

				width: 100% !important;
				min-width: 0 !important;
				max-width: 100% !important;
				flex: none !important;
				padding: 20px 14px !important;
				border-radius: var(--md-radius-xl);
				box-sizing: border-box !important;
				overflow-x: hidden !important;
			
}

			
.ykc-user-dashboard .md-user-info {
 padding: 20px 16px; display: flex; flex-direction: column !important; align-items: center; text-align: center !important; 
}

			
.ykc-user-dashboard .md-mobile-nav-toggle {
 display: none !important; 
}

			
.ykc-user-dashboard .md-nav-list {

				display: grid !important;
				grid-template-columns: repeat(2, 1fr) !important;
				gap: 6px 8px !important;
				padding: 12px 10px !important;
				background: #ffffff !important;
				border: 1px solid #eef2f6 !important;
				border-radius: 12px !important;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
				list-style: none !important;
				margin: 10px 0 16px 0 !important;
				box-sizing: border-box !important;
				max-height: none !important;
				opacity: 1 !important;
				overflow: visible !important;
				direction: rtl !important;
			
}

			
.ykc-user-dashboard .md-nav-list > * {

				box-sizing: border-box !important;
				margin: 0 !important;
				min-width: 0 !important;
			
}

			
.ykc-user-dashboard .md-nav-list > a {

				display: block !important;
				text-decoration: none !important;
				width: 100% !important;
				height: 100% !important;
			
}

			
.ykc-user-dashboard .md-nav-list > a > .md-nav-item {

				width: 100% !important;
				height: 100% !important;
				margin: 0 !important;
			
}

			
.ykc-user-dashboard .md-nav-item {

				display: flex !important;
				flex-direction: row !important;
				align-items: center !important;
				justify-content: flex-start !important;
				gap: 8px !important;
				padding: 8px 10px !important;
				border-radius: 8px !important;
				font-size: 12px !important;
				font-weight: 500 !important;
				color: #334155 !important;
				background: transparent !important;
				border: none !important;
				outline: none !important;
				box-shadow: none !important;
				cursor: pointer !important;
				transition: all 0.2s ease !important;
				min-height: 40px !important;
				font-family: inherit !important;
				box-sizing: border-box !important;
				-webkit-tap-highlight-color: transparent !important;
			
}

			
.ykc-user-dashboard .md-nav-item:focus, .ykc-user-dashboard .md-nav-item:active, .ykc-user-dashboard .md-nav-item:focus-visible {

				outline: none !important;
				box-shadow: none !important;
			
}

			
.ykc-user-dashboard .md-nav-item svg {

				order: 1 !important;
				width: 17px !important;
				height: 17px !important;
				min-width: 17px !important;
				min-height: 17px !important;
				flex-shrink: 0 !important;
				color: #64748b !important;
				fill: none !important;
				stroke: currentColor !important;
				stroke-width: 2 !important;
				margin: 0 !important;
				opacity: 0.85 !important;
				outline: none !important;
				border: none !important;
				box-shadow: none !important;
				-webkit-tap-highlight-color: transparent !important;
			
}

			
.ykc-user-dashboard .md-nav-item svg:focus, .ykc-user-dashboard .md-nav-item svg:active, .ykc-user-dashboard .md-nav-item svg:focus-visible {

				outline: none !important;
				box-shadow: none !important;
			
}

			
.ykc-user-dashboard .md-nav-item span {

				order: 2 !important;
				text-align: right !important;
				font-size: 12px !important;
				font-weight: 500 !important;
				color: inherit !important;
				white-space: nowrap !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				font-family: inherit !important;
				flex: 1 1 auto !important;
				outline: none !important;
			
}

			
.ykc-user-dashboard .md-nav-item:hover {

				background: #e6f3f6 !important;
				color: #066787 !important;
			
}

			
.ykc-user-dashboard .md-nav-item:hover svg {

				color: #066787 !important;
			
}

			
.ykc-user-dashboard .md-nav-item.active {

				background: var(--md-primary, #066787) !important;
				color: #ffffff !important;
				border-radius: 8px !important;
				box-shadow: 0 4px 14px rgba(6, 103, 135, 0.28) !important;
			
}

			
.ykc-user-dashboard .md-nav-item.active span {

				color: #ffffff !important;
				font-weight: 600 !important;
			
}

			
.ykc-user-dashboard .md-nav-item.active svg {

				color: #ffffff !important;
				stroke: #ffffff !important;
				fill: none !important;
				stroke-width: 2 !important;
				opacity: 1 !important;
			
}

			
.ykc-user-dashboard .md-nav-item.logout, .ykc-user-dashboard .md-nav-item.logout span {

				color: #dc2626 !important;

}

.ykc-user-dashboard .md-nav-item.logout svg {

				color: #dc2626 !important;
				stroke: #dc2626 !important;
				fill: none !important;
				stroke-width: 2 !important;
			
}

			
.ykc-user-dashboard .md-nav-item.logout:hover {

				background: #fef2f2 !important;
			
}

			
.ykc-user-dashboard .md-stats-grid {
 grid-template-columns: repeat(2, 1fr) !important; gap: 12px; 
}

			
.ykc-user-dashboard .md-charts-grid {
 grid-template-columns: 1fr; 
}

		
}

		
@media (max-width: 768px) {

			
.ykc-user-dashboard .md-content-area {

				padding: 16px 10px !important;
			
}

			
.ykc-user-dashboard .md-stats-grid {

				grid-template-columns: 1fr !important;
			
}

			
.ykc-user-dashboard .md-table-wrapper {
	width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	margin-bottom: 20px !important;
	border-radius: 8px !important;
	border: 1px solid var(--md-border) !important;
}

.ykc-user-dashboard .md-table {
	min-width: 620px !important;
	width: 100% !important;
}

		
}

		
@media (max-width: 480px) {

			
.ykc-user-dashboard {

				padding: 0 !important;
				margin: 6px auto !important;
			
}

			
.ykc-user-dashboard .md-content-area {

				padding: 14px 10px !important;
				border-radius: 12px !important;
			
}

			
.ykc-user-dashboard .md-sidebar {

				border-radius: 12px !important;
			
}

			
.ykc-user-dashboard .md-nav-list {

				padding: 10px 8px !important;
				gap: 5px 6px !important;
			
}

			
.ykc-user-dashboard .md-nav-item {

				padding: 7px 8px !important;
				min-height: 38px !important;
				gap: 6px !important;
				outline: none !important;
			
}

			
.ykc-user-dashboard .md-nav-item span {

				font-size: 11px !important;
				outline: none !important;
			
}

			
.ykc-user-dashboard .md-nav-item svg {

				width: 15px !important;
				height: 15px !important;
				min-width: 15px !important;
				outline: none !important;
			
}

			
.ykc-user-dashboard .md-stats-grid {
 grid-template-columns: 1fr !important; 
}

			
.ykc-user-dashboard .md-title {
 font-size: 1.15rem !important; flex-direction: column; align-items: stretch; gap: 14px; text-align:center; max-width: 100% !important; overflow-wrap: break-word !important; 
}

			
.ykc-user-dashboard .md-title .md-btn, .ykc-user-dashboard .md-title .md-btn-outline {
 width: 100%; text-align: center; 
}

			
.ykc-user-dashboard .md-chart-wrap {
 height: 200px; max-width: 100%; 
}

		
}

/* --- EXTENDED EXTENSIONS --- */
/**
 * Yuki Kado User System - Dashboard Extensions CSS
 * Seamless Material Design with existing theme palette
 * Strictly Enforced Font: Pinar FD / Pinar
 * Strictly Enforced Font Weight: <= 500
 */

/* ====================================================
   Layout Breakout & Theme Reset
   ==================================================== */

.ykc-user-dashboard :where(.is-layout-constrained) > .md-dashboard-wrapper, .ykc-user-dashboard .is-layout-constrained > .md-dashboard-wrapper, .ykc-user-dashboard .wp-block-post-content > .md-dashboard-wrapper, .ykc-user-dashboard .entry-content > .md-dashboard-wrapper {

    max-width: 1240px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;

}

#ykc-user-dashboard,
.ykc-user-dashboard.md-dashboard-wrapper,
#ykc-user-dashboard.alignwide,
#ykc-user-dashboard.alignfull {

    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 20px auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 24px !important;
    overflow-x: hidden !important;
    position: relative !important;
    direction: rtl !important;
    text-align: right !important;
    font-family: inherit !important;

}

.ykc-user-dashboard *, .ykc-user-dashboard *::before, .ykc-user-dashboard *::after {

    box-sizing: border-box !important;
    font-family: inherit !important;

}

/* ====================================================
   Strict Font Weight Enforcements (<= 500)
   ==================================================== */

.ykc-user-dashboard h1, .ykc-user-dashboard h2, .ykc-user-dashboard h3, .ykc-user-dashboard h4, .ykc-user-dashboard h5, .ykc-user-dashboard h6, .ykc-user-dashboard strong, .ykc-user-dashboard b, .ykc-user-dashboard .md-title, .ykc-user-dashboard .md-btn, .ykc-user-dashboard .md-btn-outline, .ykc-user-dashboard .md-nav-item, .ykc-user-dashboard .md-stat-value, .ykc-user-dashboard .yuki-coupon-code, .ykc-user-dashboard .points-huge, .ykc-user-dashboard .md-badge, .ykc-user-dashboard .p-title, .ykc-user-dashboard .p-price {

    font-weight: 500 !important;

}

/* ====================================================
   Section Titles & RTL Icon Placement
   Text on Right, Icon/Action on Far Left
   ==================================================== */

.ykc-user-dashboard .md-title {

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    direction: rtl !important;
    text-align: right !important;
    font-weight: 500 !important;

}

.ykc-user-dashboard .md-title > span:first-child, .ykc-user-dashboard .md-title > div:first-child {

    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: right;

}

/* Sidebar Styling */

.ykc-user-dashboard .md-sidebar {

    flex: 0 0 270px !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0px !important;
    z-index: 5 !important;

}

aside.md-sidebar#md-sidebar-nav,
.md-sidebar#md-sidebar-nav,
#md-sidebar-nav {
    top: 0px !important;
}

.ykc-user-dashboard .md-content-area {

    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 294px) !important;
    max-width: calc(100% - 294px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

}

/* Avatar Container */

.ykc-user-dashboard .yuki-avatar-wrap {

    position: relative;
    display: inline-block;
    margin-bottom: 10px;

}

/* ====================================================
   Gift Planning & Occasions Styles
   ==================================================== */

.ykc-user-dashboard .yuki-plan-grid {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 20px;

}

.ykc-user-dashboard .yuki-plan-card {

    background: #ffffff;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--md-transition);
    position: relative;

}

.ykc-user-dashboard .yuki-plan-card:hover {

    border-color: var(--md-primary-light);
    box-shadow: 0 10px 25px rgba(6, 103, 135, 0.08);
    transform: none;

}

.ykc-user-dashboard .yuki-plan-header {

    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;

}

.ykc-user-dashboard .yuki-plan-thumb {

    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--md-bg);
    border: 1px solid var(--md-border);

}

.ykc-user-dashboard .yuki-plan-info h4 {

    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--md-text);

}

.ykc-user-dashboard .yuki-plan-date-row {

    background: var(--md-bg);
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 6px;

}

.ykc-user-dashboard .yuki-date-item {

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.ykc-user-dashboard .yuki-date-item.highlight {

    color: var(--md-primary);
    font-weight: 500;

}

.ykc-user-dashboard .yuki-plan-actions {

    display: flex;
    gap: 10px;
    margin-top: 14px;
    align-items: center;

}

/* Persian 3-Select Datepicker */

.ykc-user-dashboard .yuki-jalali-picker-wrap {

    display: flex;
    gap: 8px;
    direction: rtl;
    width: 100%;

}

.ykc-user-dashboard .yuki-jalali-picker-wrap select {

    background: var(--md-bg, #f7fafb) !important;
    border: 1px solid var(--md-border, #e6edf0);
    border-radius: 10px !important;
    padding: 10px 8px;
    font-size: 13px !important;
    color: var(--md-text, #172a31);
    font-family: inherit !important;
    cursor: pointer;
    font-weight: 500;

}

.ykc-user-dashboard .yuki-jalali-picker-wrap select:focus {

    border-color: var(--md-primary, #066787);
    background: #ffffff !important;
    outline: none;

}

/* AJAX Product Search Dropdown */

.ykc-user-dashboard .yuki-product-search-wrap {

    position: relative;
    width: 100%;

}

.ykc-user-dashboard .yuki-product-results {

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--md-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
    display: none;
    margin-top: 4px;

}

.ykc-user-dashboard .yuki-product-item {

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.18s ease;
    direction: rtl;
    text-align: right;

}

.ykc-user-dashboard .yuki-product-item:last-child {

    border-bottom: none;

}

.ykc-user-dashboard .yuki-product-item:hover {

    background: #f0f9ff;

}

.ykc-user-dashboard .yuki-product-item img {

    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;

}

.ykc-user-dashboard .yuki-product-item .p-title {

    font-size: 13.5px;
    font-weight: 500;
    color: #1e293b;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.ykc-user-dashboard .yuki-product-item .p-price {

    font-size: 12.5px;
    color: #059669;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;

}

/* Selected Product Preview */

.ykc-user-dashboard .yuki-selected-product-box {

    display: none;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 12px;
    padding: 12px 16px;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    direction: rtl;

}

.ykc-user-dashboard .yuki-selected-product-box img {

    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #bbf7d0;

}

/* ====================================================
   Smart Reminder & Gift Modal Styles
   ==================================================== */

.ykc-user-dashboard .yuki-timing-pill {

    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 20px;
    background: #ffffff;
    font-size: 12.5px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;

}

.ykc-user-dashboard .yuki-timing-pill:hover {

    border-color: #94a3b8;
    background: #f8fafc;

}

.ykc-user-dashboard .yuki-timing-pill.is-checked {

    border-color: var(--md-primary, #066787) !important;
    background: #eaf8fb !important;
    color: var(--md-primary, #066787) !important;
    font-weight: 600 !important;

}

.ykc-user-dashboard .yuki-timing-pill input {

    accent-color: var(--md-primary, #066787);
    cursor: pointer;

}

.ykc-user-dashboard .yuki-reminder-card:hover {

    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(6, 103, 135, 0.08) !important;
    transform: none;

}

.yuki-modal-backdrop,
.ykc-user-dashboard .yuki-modal-backdrop,
div[id$="-modal"]:not(.yuki-address-modal) {

    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(6, 103, 135, 0.45) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    box-sizing: border-box !important;

}

.yuki-modal-backdrop.is-open,
.ykc-user-dashboard .yuki-modal-backdrop.is-open,
div[id$="-modal"].is-open {

    display: flex !important;

}

.ykc-user-dashboard .yuki-modal-content {

    background: #ffffff;
    border-radius: 8px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
    animation: yukiModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes yukiModalPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.ykc-user-dashboard .yuki-modal-tab-btn.active {

    background: #eaf8fb !important;
    color: var(--md-primary, #066787) !important;
    border-bottom: 2px solid var(--md-primary, #066787) !important;

}

.ykc-user-dashboard .yuki-purchased-order-item {

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.18s ease;
    cursor: pointer;

}

.ykc-user-dashboard .yuki-purchased-order-item:last-child {

    border-bottom: none;

}

.ykc-user-dashboard .yuki-purchased-order-item:hover {

    background: #f8fafc;

}

.ykc-user-dashboard .yuki-purchased-order-item.is-selected {

    background: #f0fdf4 !important;
    border-right: 3px solid #16a34a;

}

.ykc-user-dashboard .yuki-purchased-order-item img {

    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;

}

/* ====================================================
   Games Styles (Wheel & Scratch)
   ==================================================== */

.ykc-user-dashboard .yuki-games-tab-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
    width: 100%;

}

.ykc-user-dashboard .yuki-reset-test-btn {

    font-size: 12px;
    padding: 6px 14px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    transition: var(--md-transition);
    font-family: inherit;
    font-weight: 500;

}

.ykc-user-dashboard .yuki-reset-test-btn:hover {

    background: #e2e8f0;
    color: #0f172a;

}

.ykc-user-dashboard .yuki-game-container {

    background: #ffffff;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-xl);
    padding: 24px;
    text-align: center;
    box-shadow: var(--md-shadow);
    box-sizing: border-box;
    width: 100%;

}

.ykc-user-dashboard .yuki-game-header h3 {

    font-size: 1.15rem;
    font-weight: 500;
    margin: 0 0 8px;
    color: var(--md-text);

}

.ykc-user-dashboard .yuki-game-header p {

    font-size: 0.85rem;
    color: var(--md-text-muted);
    margin: 0 0 20px;
    line-height: 1.6;

}

/* Lucky Wheel UI - High-End Luxury Edition */

.ykc-user-dashboard .yuki-wheel-wrapper {

    position: relative;
    width: 330px;
    height: 330px;
    margin: 20px auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(110, 193, 228, 0.12) 0%, rgba(6, 103, 135, 0.04) 50%, transparent 70%);
    border-radius: 50%;
    padding: 10px;

}

.ykc-user-dashboard .yuki-wheel-pointer {

    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.ykc-user-dashboard .yuki-wheel-wrapper:hover .yuki-wheel-pointer {

    transform: translateX(-50%) translateY(-2px);

}

.ykc-user-dashboard .yuki-wheel-disc {

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 4.8s cubic-bezier(0.12, 0.95, 0.2, 1);
    position: relative;

}

.ykc-user-dashboard .yuki-wheel {

    width: 100% !important;
    height: 100% !important;
    max-width: 320px;
    max-height: 320px;
    border-radius: 50%;
    display: block;
    box-shadow: 0 14px 34px rgba(6, 103, 135, 0.22), 0 0 0 6px #ffffff, 0 0 0 10px #e2e8f0, 0 0 25px rgba(252, 178, 22, 0.2);

}

.ykc-user-dashboard .yuki-wheel-center-btn {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    background: linear-gradient(145deg, #0e83aa, #066787) !important;
    color: #ffffff !important;
    border: 3.5px solid #ffffff !important;
    box-shadow: 0 0 0 4px rgba(6, 103, 135, 0.18), 0 6px 20px rgba(6, 103, 135, 0.35);
    font-weight: 600 !important;
    font-size: 13.5px;
    cursor: pointer;
    z-index: 15;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    font-family: inherit !important;
    outline: none;

}

.ykc-user-dashboard .yuki-wheel-center-btn span {

    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    letter-spacing: -0.2px;

}

.ykc-user-dashboard .yuki-wheel-center-btn:hover:not(:disabled) {

    background: linear-gradient(145deg, #1195c2, #087d9f);
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 6px rgba(110, 193, 228, 0.3), 0 8px 24px rgba(6, 103, 135, 0.45);

}

.ykc-user-dashboard .yuki-wheel-center-btn:active:not(:disabled) {

    transform: translate(-50%, -50%) scale(0.97);

}

.ykc-user-dashboard .yuki-wheel-pulse {

    animation: yukiWheelPulseAnim 2.2s infinite ease-in-out;

}

@keyframes yukiWheelPulseAnim {
    0% {
        box-shadow: 0 0 0 0 rgba(110, 193, 228, 0.6), 0 6px 20px rgba(6, 103, 135, 0.35);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(110, 193, 228, 0), 0 6px 20px rgba(6, 103, 135, 0.35);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(110, 193, 228, 0), 0 6px 20px rgba(6, 103, 135, 0.35);
    }
}

.ykc-user-dashboard .yuki-wheel-center-btn:disabled {

    background: linear-gradient(145deg, #64748b, #475569) !important;
    color: #ffffff !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed;
    opacity: 0.95;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    animation: none;

}

.ykc-user-dashboard .yuki-wheel-center-btn:disabled span {

    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

}

/* Reward Win Card */

.ykc-user-dashboard .yuki-reward-win-card {

    background: #ffffff;
    border: 1.5px solid #6ec1e4;
    border-radius: 16px;
    padding: 18px 20px;
    margin-top: 16px;
    box-shadow: 0 8px 24px rgba(6, 103, 135, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: yukiFadeSlideUp 0.4s ease-out;

}

.ykc-user-dashboard .yuki-reward-win-icon {

    font-size: 38px;
    margin-bottom: 8px;
    line-height: 1;

}

.ykc-user-dashboard .yuki-reward-win-title {

    font-size: 15px;
    font-weight: 500;
    color: #172a31;
    margin-bottom: 6px;

}

.ykc-user-dashboard .yuki-reward-win-desc {

    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 12px;

}

.ykc-user-dashboard .yuki-reward-coupon-box {

    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1.5px dashed #066787;
    border-radius: 10px;
    padding: 6px 14px;
    margin-top: 4px;

}

.ykc-user-dashboard .yuki-reward-coupon-code {

    font-family: monospace, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #066787;
    direction: ltr;

}

.ykc-user-dashboard .yuki-reward-copy-btn {

    background: #066787;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;

}

.ykc-user-dashboard .yuki-reward-copy-btn:hover {

    background: #0e83aa;

}

@keyframes yukiFadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scratch Card UI */

.ykc-user-dashboard .yuki-scratch-card-wrapper {

    position: relative;
    width: 280px;
    height: 140px;
    margin: 20px auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);

}

.ykc-user-dashboard .yuki-scratch-prize {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fbfcfd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #bedfe6;
    border-radius: 14px;

}

.ykc-user-dashboard .yuki-scratch-prize .yuki-prize-icon {

    font-size: 36px;
    margin-bottom: 4px;

}

.ykc-user-dashboard .yuki-scratch-prize .yuki-prize-text {

    font-size: 1.1rem;
    font-weight: 500;
    color: var(--md-primary);

}

.ykc-user-dashboard #yuki-scratch-canvas {

    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    touch-action: none;

}

.ykc-user-dashboard .yuki-alert {

    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 12px;

}

.ykc-user-dashboard .yuki-alert-info,
.ykc-user-dashboard .yuki-alert-success {

    background: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;

}

.ykc-user-dashboard .yuki-alert-info *,
.ykc-user-dashboard .yuki-alert-success * {

    color: #ffffff !important;

}

.ykc-user-dashboard .yuki-alert-hint {

    background: var(--md-bg);
    color: var(--md-text-muted);
    border: 1px dashed var(--md-border);
    border-radius: 8px !important;

}

/* ====================================================
   Points & Club Styles
   ==================================================== */

.ykc-user-dashboard .yuki-points-hero {

    background: linear-gradient(135deg, var(--md-primary, #066787) 0%, #0b748d 100%) !important;
    color: #ffffff !important;
    border-radius: var(--md-radius-xl);
    padding: 30px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;

}

.ykc-user-dashboard .yuki-points-hero,
.ykc-user-dashboard .yuki-points-hero * {

    color: #ffffff !important;

}

.ykc-user-dashboard .yuki-points-hero h3 {

    margin: 0 0 10px;
    font-size: 1.18rem;
    font-weight: 600;
    color: #ffffff !important;
    line-height: 1.4;

}

.ykc-user-dashboard .yuki-points-hero .points-huge {

    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -1px;
    color: #ffffff !important;

}

.ykc-user-dashboard .yuki-redeem-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 28px;

}

.ykc-user-dashboard .yuki-redeem-card {

    background: #ffffff;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;

}

.ykc-user-dashboard .yuki-redeem-card h4 {

    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--md-text);

}

.ykc-user-dashboard .yuki-redeem-card p {

    margin: 0;
    font-size: 0.85rem;
    color: var(--md-text-muted);
    line-height: 1.6;

}

/* Coupon Chips with Pinar FD font */

.ykc-user-dashboard .yuki-coupons-list {

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;

}

.ykc-user-dashboard .yuki-coupon-chip {

    background: var(--md-primary-soft);
    border: 1px dashed var(--md-primary);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;

}

.ykc-user-dashboard .yuki-coupon-code {

    font-family: inherit !important;
    font-size: 1rem;
    font-weight: 500 !important;
    color: var(--md-primary);
    letter-spacing: 0.5px;

}

/* ====================================================
   Referral Styles
   ==================================================== */

.ykc-user-dashboard .yuki-referral-box {

    background: var(--md-bg);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-xl);
    padding: 24px;
    margin-bottom: 24px;

}

.ykc-user-dashboard .yuki-copy-input-wrap {

    display: flex;
    gap: 10px;
    margin-top: 12px;

}

.ykc-user-dashboard .yuki-copy-input-wrap input {

    flex: 1;
    direction: ltr;
    text-align: left;
    font-family: inherit !important;
    font-weight: 500;

}

/* ====================================================
   VIP Membership Card Styles
   ==================================================== */

.ykc-user-dashboard .yuki-membership-card {

    transition: var(--md-transition);

}

.ykc-user-dashboard .yuki-membership-card:hover {

    transform: none;
    box-shadow: 0 14px 34px rgba(6, 103, 135, 0.22) !important;

}

.ykc-user-dashboard .yuki-membership-card h3, .ykc-user-dashboard .yuki-membership-card span, .ykc-user-dashboard .yuki-membership-card strong {

    font-weight: 500 !important;

}

/* ====================================================
   Profile Completion Widget
   ==================================================== */

.ykc-user-dashboard .yuki-profile-completion-box {

    transition: var(--md-transition);

}

.ykc-user-dashboard .yuki-profile-completion-box:hover {

    border-color: var(--md-primary-light);
    box-shadow: 0 4px 14px rgba(6, 103, 135, 0.06);

}

.ykc-user-dashboard .yuki-profile-completion-box span, .ykc-user-dashboard .yuki-profile-completion-box strong {

    font-weight: 500 !important;

}

/* ====================================================
   Reward Catalog & Points Redeem Cards
   ==================================================== */

.ykc-user-dashboard .yuki-redeem-card {

    background: #ffffff;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--md-transition);

}

.ykc-user-dashboard .yuki-redeem-card:hover {

    border-color: var(--md-primary);
    box-shadow: 0 6px 20px rgba(6, 103, 135, 0.08);
    transform: none;

}

.ykc-user-dashboard .yuki-redeem-card h4 {

    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 500 !important;
    color: var(--md-primary);

}

.ykc-user-dashboard .yuki-redeem-card p {

    font-size: 0.85rem;
    color: var(--md-text-muted);
    margin: 0 0 14px;
    line-height: 1.6;

}

.ykc-user-dashboard .yuki-btn-redeem-catalog-item {

    background: var(--md-primary);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500 !important;
    cursor: pointer;
    transition: var(--md-transition);
    width: 100%;

}

.ykc-user-dashboard .yuki-btn-redeem-catalog-item:hover:not(:disabled) {

    background: #0e83aa;

}

/* ====================================================
   Comprehensive Mobile & Tablet Responsiveness
   Breakpoints: 960px, 768px, 600px, 480px, 360px
   Strictly Enforced Font: Pinar FD / Pinar (<= 500)
   ==================================================== */

/* --- 1. Tablet & Below (<= 960px) --- */

@media (max-width: 960px) {

    
#ykc-user-dashboard,
.ykc-user-dashboard.md-dashboard-wrapper {

        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
        margin: 10px auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 6px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    
}

    
.ykc-user-dashboard .md-sidebar {

        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        border-radius: 16px !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    
}

    
.ykc-user-dashboard .md-content-area {

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 20px 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    
}

    
.ykc-user-dashboard .md-user-info {

        padding: 20px 16px !important;
    
}

    
.ykc-user-dashboard .md-mobile-nav-toggle {

        display: none !important;
    
}

    
.ykc-user-dashboard .md-nav-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px 8px !important;
        padding: 12px 10px !important;
        background: #ffffff !important;
        border: 1px solid #eef2f6 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        list-style: none !important;
        margin: 10px 0 16px 0 !important;
        box-sizing: border-box !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        direction: rtl !important;
}

    
.ykc-user-dashboard .md-nav-list > * {

        box-sizing: border-box !important;
        margin: 0 !important;
        min-width: 0 !important;
    
}

    
.ykc-user-dashboard .md-nav-list > a {

        display: block !important;
        text-decoration: none !important;
        width: 100% !important;
        height: 100% !important;
    
}

    
.ykc-user-dashboard .md-nav-list > a > .md-nav-item {

        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    
}

    
.ykc-user-dashboard .md-nav-item {

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #334155 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        min-height: 40px !important;
        font-family: inherit !important;
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
    
}

    
.ykc-user-dashboard .md-nav-item:focus, .ykc-user-dashboard .md-nav-item:active, .ykc-user-dashboard .md-nav-item:focus-visible {

        outline: none !important;
        box-shadow: none !important;
    
}

    
.ykc-user-dashboard .md-nav-item svg {

        order: 1 !important;
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        min-height: 17px !important;
        flex-shrink: 0 !important;
        color: #64748b !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        margin: 0 !important;
        opacity: 0.85 !important;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    
}

    
.ykc-user-dashboard .md-nav-item svg:focus, .ykc-user-dashboard .md-nav-item svg:active, .ykc-user-dashboard .md-nav-item svg:focus-visible {

        outline: none !important;
        box-shadow: none !important;
    
}

    
.ykc-user-dashboard .md-nav-item span {

        order: 2 !important;
        text-align: right !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: inherit !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-family: inherit !important;
        flex: 1 1 auto !important;
        outline: none !important;
        line-height: 1.6 !important;
        padding: 2px 0 !important;
    
}

    
.ykc-user-dashboard .md-nav-item:hover {

        background: #e6f3f6 !important;
        color: #066787 !important;
    
}

    
.ykc-user-dashboard .md-nav-item:hover svg {

        color: #066787 !important;
    
}

    
.ykc-user-dashboard .md-nav-item.active {

        background: #066787 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 6px rgba(6, 103, 135, 0.25) !important;
    
}

    
.ykc-user-dashboard .md-nav-item.active span {

        color: #ffffff !important;
        font-weight: 500 !important;
    
}

    
.ykc-user-dashboard .md-nav-item.active svg {

        color: #ffffff !important;
        stroke: #ffffff !important;
        fill: none !important;
        stroke-width: 2 !important;
        opacity: 1 !important;
    
}

    
.ykc-user-dashboard .md-nav-item.logout, .ykc-user-dashboard .md-nav-item.logout span {

        color: #dc2626 !important;

}

.ykc-user-dashboard .md-nav-item.logout svg {

        color: #dc2626 !important;
        stroke: #dc2626 !important;
        fill: none !important;
        stroke-width: 2 !important;
    
}

    
.ykc-user-dashboard .md-nav-item.logout:hover {

        background: #fef2f2 !important;
    
}

}

/* --- 2. Mobile Landscape & Small Tablet (<= 768px) --- */

@media (max-width: 768px) {

    /* Responsive Table to Cards Transformation */
    
    /* Clean Table Responsiveness */
    .ykc-user-dashboard .md-table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 18px !important;
        border-radius: 8px !important;
        border: 1px solid var(--md-border) !important;
    }

    .ykc-user-dashboard .md-table {
        min-width: 620px !important;
        width: 100% !important;
    }

    /* Stats Grid */
    
.ykc-user-dashboard .md-stats-grid {

        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-top: 18px !important;
    
}

    
.ykc-user-dashboard .md-stat-card {

        padding: 14px 12px !important;
        gap: 12px !important;
        border-radius: 12px !important;
    
}

    
.ykc-user-dashboard .md-stat-icon {

        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    
}

    
.ykc-user-dashboard .md-stat-icon svg {

        width: 22px !important;
        height: 22px !important;
    
}

    
.ykc-user-dashboard .md-stat-title {

        font-size: 0.75rem !important;
    
}

    
.ykc-user-dashboard .md-stat-value {

        font-size: 1.05rem !important;
        font-weight: 500 !important;
    
}

    /* Charts */
    
.ykc-user-dashboard .md-charts-grid {

        grid-template-columns: 1fr !important;
        gap: 16px !important;
    
}

    /* Games Tab Grid */
    
.ykc-user-dashboard .yuki-games-tab-grid {

        grid-template-columns: 1fr !important;
        gap: 18px !important;
    
}

}

/* --- 3. Mobile Portrait (<= 600px) --- */

@media (max-width: 600px) {

    /* Titles & Action Buttons */
    
.ykc-user-dashboard .md-title {

        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        text-align: right !important;
    
}

    
.ykc-user-dashboard .md-title > div:last-child, .ykc-user-dashboard .md-title > div {

        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    
}

    
.ykc-user-dashboard .md-title .md-btn, .ykc-user-dashboard .md-title .md-btn-outline {

        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        font-size: 12.5px !important;
        padding: 8px 12px !important;
    
}

    /* Membership VIP Card */
    
.ykc-user-dashboard .yuki-membership-card {

        padding: 18px 16px !important;
        border-radius: 14px !important;
    
}

    
.ykc-user-dashboard .yuki-membership-card > div:first-child {

        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: right !important;
        gap: 10px !important;
        width: 100% !important;
    
}

    
.ykc-user-dashboard .yuki-membership-card > div:first-child > div:last-child {

        text-align: right !important;
        margin-top: 6px !important;
    
}

    /* Profile Completion */
    
.ykc-user-dashboard .yuki-profile-completion-box {

        padding: 14px !important;
        border-radius: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        text-align: right !important;
    
}

    /* Grids: Occasions, Contacts, Plans, Redeem Cards, Coupons */
    
.ykc-user-dashboard #yuki-people-grid-container, .ykc-user-dashboard #yuki-occasions-container, .ykc-user-dashboard #yuki-plans-grid-container, .ykc-user-dashboard .yuki-redeem-grid, .ykc-user-dashboard .yuki-coupon-grid {

        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    
}

    /* Forms on Mobile */
    
.ykc-user-dashboard #yuki-form-new-person, .ykc-user-dashboard #yuki-form-new-occasion, .ykc-user-dashboard #yuki-form-new-plan, .ykc-user-dashboard #new-ticket-form, .ykc-user-dashboard #yuki-form-edit-account {

        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 18px !important;
    
}

    
.ykc-user-dashboard #yuki-form-new-person > div[style*="display:flex"], .ykc-user-dashboard #yuki-form-new-occasion > div[style*="display:flex"], .ykc-user-dashboard #yuki-form-new-plan > div[style*="display:flex"], .ykc-user-dashboard #yuki-form-edit-account > div[style*="display:flex"] {

        flex-direction: column !important;
        gap: 10px !important;
    
}

    
.ykc-user-dashboard .md-form-group {

        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    
}

    
.ykc-user-dashboard .md-input {

        font-size: 13.5px !important;
        padding: 10px 12px !important;
    
}

    /* Jalali Datepicker */
    
.ykc-user-dashboard .yuki-jalali-picker-wrap {

        display: flex !important;
        gap: 6px !important;
        width: 100% !important;
    
}

    
.ykc-user-dashboard .yuki-j-day {

        flex: 1 1 60px !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        text-align: center !important;
    
}

    
.ykc-user-dashboard .yuki-j-month {

        flex: 1.4 1 95px !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        text-align: center !important;
    
}

    
.ykc-user-dashboard .yuki-j-year {

        flex: 1 1 70px !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        text-align: center !important;
    
}

    /* Wheel of Fortune Scaling */
    
.ykc-user-dashboard .yuki-wheel-wrapper {

        width: min(280px, 84vw) !important;
        height: min(280px, 84vw) !important;
        margin: 12px auto 20px !important;
        padding: 6px !important;
    
}

    
.ykc-user-dashboard .yuki-wheel-center-btn {

        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
        font-size: 12px !important;
    
}

    
.ykc-user-dashboard .yuki-wheel-pointer {

        top: -14px !important;
    
}

    
.ykc-user-dashboard .yuki-wheel-pointer svg {

        width: 36px !important;
        height: 42px !important;
    
}

    /* Points Hero */
    
.ykc-user-dashboard .yuki-points-hero {

        padding: 20px 16px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        border-radius: 14px !important;
    
}

    
.ykc-user-dashboard .yuki-points-hero .points-huge {

        font-size: 2rem !important;
    
}

    /* Referral Box & Copy Wrap */
    
.ykc-user-dashboard .yuki-referral-box {

        padding: 16px 14px !important;
        border-radius: 14px !important;
    
}

    
.ykc-user-dashboard .yuki-copy-input-wrap {

        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    
}

    
.ykc-user-dashboard .yuki-copy-input-wrap input {

        width: 100% !important;
        font-size: 13px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    
}

    
.ykc-user-dashboard .yuki-copy-input-wrap button {

        width: 100% !important;
        justify-content: center !important;
    
}

    /* Ticket Filters */
    
.ykc-user-dashboard .ticket-filters-wrapper {

        padding: 14px !important;
        border-radius: 14px !important;
        flex-direction: column !important;
        gap: 12px !important;
    
}

}

/* --- 4. Small Phones (<= 480px) --- */

@media (max-width: 480px) {

    
.ykc-user-dashboard {

        padding: 0 8px !important;
        margin: 6px auto !important;
    
}

    
.ykc-user-dashboard .md-content-area {

        padding: 16px 12px !important;
        border-radius: 14px !important;
    
}

    
.ykc-user-dashboard .md-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
}

    
.ykc-user-dashboard .md-nav-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 10px 8px !important;
        gap: 5px 6px !important;
}

    
.ykc-user-dashboard .md-nav-item {
        padding: 10px 14px !important;
        min-height: 42px !important;
        gap: 10px !important;
        border-radius: 8px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        outline: none !important;
}

    
.ykc-user-dashboard .md-nav-item span {
        font-size: 13.5px !important;
        font-weight: 500 !important;
        outline: none !important;
}

    
.ykc-user-dashboard .md-nav-item svg {

        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        outline: none !important;
    
}

    
.ykc-user-dashboard .yuki-plan-card {

        padding: 12px !important;
    
}

    
.ykc-user-dashboard .yuki-plan-date-row {

        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;
        margin: 8px 0 !important;
    
}

    
.ykc-user-dashboard .yuki-plan-footer {

        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    
}

    
.ykc-user-dashboard .yuki-plan-footer > div {

        display: flex !important;
        gap: 6px !important;
        width: 100% !important;
    
}

    
.ykc-user-dashboard .yuki-plan-footer button {

        flex: 1 !important;
        justify-content: center !important;
        font-size: 11.5px !important;
        padding: 6px 10px !important;
    
}

    
.ykc-user-dashboard .yuki-coupon-chip {

        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        text-align: center !important;
    
}

    
.ykc-user-dashboard .yuki-coupon-code {

        font-size: 0.95rem !important;
        text-align: center !important;
    
}

    
.ykc-user-dashboard .yuki-coupon-chip .md-badge {

        align-self: center !important;
    
}

    
.ykc-user-dashboard .yuki-scratch-card-wrapper {

        width: min(250px, 90vw) !important;
        height: 125px !important;
    
}

    
.ykc-user-dashboard .yuki-game-container {

        padding: 16px 10px !important;
    
}

}

/* --- 5. Ultra-Small Screens / Galaxy Fold Cover / iPhone SE (<= 360px) --- */

@media (max-width: 360px) {

    
.ykc-user-dashboard .md-content-area {

        padding: 12px 8px !important;
    
}

    
.ykc-user-dashboard .md-user-info {

        padding: 14px 10px !important;
    
}

    
.ykc-user-dashboard .md-avatar {

        width: 60px !important;
        height: 60px !important;
    
}

    
.ykc-user-dashboard .md-user-name {

        font-size: 0.95rem !important;
    
}

    
.ykc-user-dashboard .yuki-wheel-wrapper {

        width: min(230px, 80vw) !important;
        height: min(230px, 80vw) !important;
        margin: 8px auto 14px !important;
        padding: 4px !important;
    
}

    
.ykc-user-dashboard .yuki-wheel-center-btn {

        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
        font-size: 11px !important;
    
}

    
.ykc-user-dashboard .yuki-wheel-pointer {

        top: -10px !important;
    
}

    
.ykc-user-dashboard .yuki-wheel-pointer svg {

        width: 30px !important;
        height: 36px !important;
    
}

    
.ykc-user-dashboard .md-table td {

        padding: 8px 10px !important;
        font-size: 12px !important;
    
}

    
.ykc-user-dashboard .md-table td::before {

        font-size: 11.5px !important;
    
}

}

/* ==========================================================================
   YUKI KADO: USER SAVED ADDRESSES & MODAL (SYNCED WITH REFERENCE 2 CHECKOUT)
   ========================================================================== */

.ykc-user-dashboard .yuki-addr-grid {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 24px;

}

.ykc-user-dashboard .yuki-addr-card {

    background: #ffffff;
    border: 1.5px solid var(--md-border, #e2e8f0);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;

}

.ykc-user-dashboard .yuki-addr-card:hover {

    transform: none;
    box-shadow: 0 8px 24px rgba(6, 103, 135, 0.08);
    border-color: #99d5e3;

}

.ykc-user-dashboard .yuki-addr-card.is-default {

    border-color: #066787;
    background: #fbfdfd;
    box-shadow: 0 4px 16px rgba(6, 103, 135, 0.09);

}

.ykc-user-dashboard .addr-card-header-badge {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;

}

.ykc-user-dashboard .addr-card-title {

    font-size: 14.5px;
    font-weight: 700;
    color: #066787;

}

.ykc-user-dashboard .addr-default-pill {

    background: #eaf8fb;
    color: #066787;
    border: 1px solid #99d5e3;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;

}

.ykc-user-dashboard .addr-check-circle {

    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #066787;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(6, 103, 135, 0.25);

}

.ykc-user-dashboard .addr-card-body-txt {

    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    line-height: 1.6;

}

.ykc-user-dashboard .addr-card-person {

    font-weight: 600;
    color: #0f172a;
    font-size: 13.5px;

}

.ykc-user-dashboard .addr-card-address {

    color: #475569;

}

.ykc-user-dashboard .addr-card-postcode {

    color: #64748b;
    font-size: 12px;

}

.ykc-user-dashboard .addr-card-actions-bar {

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    gap: 8px;
    flex-wrap: wrap;

}

.ykc-user-dashboard .btn-addr-set-default {

    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;

}

.ykc-user-dashboard .btn-addr-set-default:hover {

    background: #eaf8fb;
    border-color: #066787;
    color: #066787;

}

.ykc-user-dashboard .btn-addr-edit {

    background: #88D4E8 !important;
    border: 1px solid #88D4E8 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;

}

.ykc-user-dashboard .btn-addr-edit:hover {

    background: #066787 !important;
    border-color: #066787 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(6, 103, 135, 0.25);

}

.ykc-user-dashboard .btn-addr-delete {

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ef4444;

}

.ykc-user-dashboard .btn-addr-delete:hover {

    background: #fff5f5;
    border-color: #fca5a5;
    color: #dc2626;

}

/* Modal for Adding / Editing Address */

.yuki-address-modal,
.ykc-user-dashboard .yuki-address-modal,
#yuki-address-form-modal {

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;

}

.yuki-address-modal.is-open,
.ykc-user-dashboard .yuki-address-modal.is-open,
#yuki-address-form-modal.is-open {

    display: flex !important;

}

.ykc-user-dashboard .yuki-address-modal-overlay {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

}

.ykc-user-dashboard .yuki-address-modal-dialog {

    position: relative;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: yukiModalSlideIn 0.25s ease-out;
    z-index: 10;

}

@keyframes yukiModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ykc-user-dashboard .yuki-address-modal-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;

}

.ykc-user-dashboard .yuki-address-modal-close {

    background: transparent;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
    transition: all 0.2s ease;

}

.ykc-user-dashboard .yuki-address-modal-close:hover {

    background: #fee2e2;
    color: #ef4444;

}

.ykc-user-dashboard .yuki-address-modal-body {

    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;

}

/* Invoice Button Style in Orders Tab */

.ykc-user-dashboard .yuki-btn-invoice-link:hover {

    background: #066787 !important;
    color: #ffffff !important;
    border-color: #066787 !important;
    box-shadow: 0 3px 8px rgba(6, 103, 135, 0.25) !important;
    transform: none;

}

/* Card Action Buttons & Pill Badges (Matching Soft Pill Style) */

.ykc-user-dashboard .yuki-btn-open-gift-modal, .ykc-user-dashboard .md-btn-sm.yuki-btn-open-gift-modal {

    background: #eaf8fb !important;
    color: #066787 !important;
    border: 1px solid #99d5e3 !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 3px rgba(6, 103, 135, 0.08) !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;

}

.ykc-user-dashboard .yuki-btn-open-gift-modal:hover, .ykc-user-dashboard .md-btn-sm.yuki-btn-open-gift-modal:hover {

    background: #066787 !important;
    color: #ffffff !important;
    border-color: #066787 !important;
    box-shadow: 0 3px 10px rgba(6, 103, 135, 0.28) !important;
    transform: translateY(-1px) !important;

}

.ykc-user-dashboard .yuki-btn-open-gift-modal:active, .ykc-user-dashboard .md-btn-sm.yuki-btn-open-gift-modal:active {

    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(6, 103, 135, 0.15) !important;

}

.ykc-user-dashboard .yuki-btn-unlink-gift, .ykc-user-dashboard .md-btn-outline-sm.yuki-btn-unlink-gift {

    background: #fff5f5 !important;
    color: #ef4444 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08) !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;

}

.ykc-user-dashboard .yuki-btn-unlink-gift:hover, .ykc-user-dashboard .md-btn-outline-sm.yuki-btn-unlink-gift:hover {

    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.28) !important;
    transform: translateY(-1px) !important;

}

.ykc-user-dashboard .yuki-btn-unlink-gift:active, .ykc-user-dashboard .md-btn-outline-sm.yuki-btn-unlink-gift:active {

    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.15) !important;

}

.ykc-user-dashboard .md-btn-sm {

    background: #eaf8fb !important;
    color: #066787 !important;
    border: 1px solid #99d5e3 !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    outline: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(6, 103, 135, 0.08) !important;

}

.ykc-user-dashboard .md-btn-sm:hover {

    background: #066787 !important;
    color: #ffffff !important;
    border-color: #066787 !important;
    box-shadow: 0 3px 10px rgba(6, 103, 135, 0.25) !important;
    transform: translateY(-1px) !important;

}

.ykc-user-dashboard .md-btn-outline-sm {

    background: #ffffff !important;
    color: var(--md-primary, #066787) !important;
    border: 1px solid var(--md-primary, #066787) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    outline: none !important;
    white-space: nowrap !important;

}

.ykc-user-dashboard .md-btn-outline-sm:hover {

    background: var(--md-primary-soft, #eaf8fb) !important;

}

/* YUKI FONT INHERITANCE */

.ykc-user-dashboard, .ykc-user-dashboard *, .ykc-user-dashboard input, .ykc-user-dashboard button, .ykc-user-dashboard select, .ykc-user-dashboard textarea, .ykc-user-dashboard .yuki-modal, .ykc-user-dashboard .yuki-modal * {
 font-family: inherit !important; 
}

/* mdFadeIn: restored verbatim from the legacy dashboard (index.php) */
@keyframes mdFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   YUKIKADO OFFICIAL STYLE GUIDE - ENHANCED COMPONENTS & ORDER TRACKING
   Strictly Scoped to .ykc-user-dashboard | High Contrast | RTL | Zero Horizontal Scroll
========================================================================== */

/* 1. Headings with clean vertical teal indicator */
.ykc-user-dashboard .panel-section-title,
.ykc-user-dashboard .yuki-section-heading {
    position: relative !important;
    border-right: 4px solid var(--yk-primary, #066787) !important;
    padding-right: 12px !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--yk-text-main, #334155) !important;
    line-height: 1.4 !important;
}

.ykc-user-dashboard .md-title {
    position: relative !important;
    border-right: none !important;
    padding-right: 14px !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--yk-text-main, #334155) !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.ykc-user-dashboard .md-title::before {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 20px !important;
    border-radius: 2px !important;
    background: var(--yk-primary, #066787) !important;
}

/* 2. High-Contrast Pill Buttons */
.ykc-user-dashboard .yk-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    font-family: inherit !important;
    outline: none !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* Primary Button: Deep Teal background with white text */
.ykc-user-dashboard .yk-pill-btn--primary {
    background-color: var(--yk-primary, #066787) !important;
    color: #ffffff !important;
    border: 1px solid var(--yk-primary, #066787) !important;
    box-shadow: 0 2px 8px rgba(6, 103, 135, 0.2) !important;
}
.ykc-user-dashboard .yk-pill-btn--primary * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.ykc-user-dashboard .yk-pill-btn--primary:hover {
    background-color: var(--yk-primary-hover, #05546d) !important;
    border-color: var(--yk-primary-hover, #05546d) !important;
    transform: none !important;
}

/* Accent Button: Warm Gold background with white text */
.ykc-user-dashboard .yk-pill-btn--accent {
    background-color: var(--yk-accent, #FCB216) !important;
    color: #ffffff !important;
    border: 1px solid var(--yk-accent, #FCB216) !important;
    box-shadow: 0 2px 8px rgba(252, 178, 22, 0.2) !important;
}
.ykc-user-dashboard .yk-pill-btn--accent * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.ykc-user-dashboard .yk-pill-btn--accent:hover {
    background-color: var(--yk-accent-hover, #e59f0f) !important;
    border-color: var(--yk-accent-hover, #e59f0f) !important;
    transform: none !important;
}

/* Secondary Button: White/Teal soft background */
.ykc-user-dashboard .yk-pill-btn--secondary {
    background-color: #FFFFFF !important;
    color: var(--yk-primary, #066787) !important;
    border: 1.5px solid #88D4E8 !important;
}
.ykc-user-dashboard .yk-pill-btn--secondary * {
    color: var(--yk-primary, #066787) !important;
    stroke: var(--yk-primary, #066787) !important;
}
.ykc-user-dashboard .yk-pill-btn--secondary:hover {
    background-color: #e6f3f6 !important;
    color: var(--yk-primary-hover, #05546d) !important;
    transform: none !important;
}

/* 3. Status Badges */
.ykc-user-dashboard .yk-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: 1px solid transparent !important;
}
.ykc-user-dashboard .yk-badge-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}
.ykc-user-dashboard .yk-status-badge.status-completed {
    background-color: #F0FDF4 !important;
    color: #15803D !important;
    border-color: #BBF7D0 !important;
}
.ykc-user-dashboard .yk-status-badge.status-completed .yk-badge-dot { background-color: #22C55E !important; }
.ykc-user-dashboard .yk-status-badge.status-processing {
    background-color: var(--yk-primary-light, #E6F3F6) !important;
    color: var(--yk-primary, #087A98) !important;
    border-color: rgba(8, 122, 152, 0.25) !important;
}
.ykc-user-dashboard .yk-status-badge.status-processing .yk-badge-dot { background-color: var(--yk-primary, #087A98) !important; }
.ykc-user-dashboard .yk-status-badge.status-pending,
.ykc-user-dashboard .yk-status-badge.status-on-hold {
    background-color: #FFFBEB !important;
    color: #B45309 !important;
    border-color: #FDE68A !important;
}
.ykc-user-dashboard .yk-status-badge.status-pending .yk-badge-dot,
.ykc-user-dashboard .yk-status-badge.status-on-hold .yk-badge-dot { background-color: #F59E0B !important; }
.ykc-user-dashboard .yk-status-badge.status-failed,
.ykc-user-dashboard .yk-status-badge.status-cancelled {
    background-color: #FEF2F2 !important;
    color: #DC2626 !important;
    border-color: #FECDD3 !important;
}
.ykc-user-dashboard .yk-status-badge.status-failed .yk-badge-dot,
.ykc-user-dashboard .yk-status-badge.status-cancelled .yk-badge-dot { background-color: #EF4444 !important; }

/* 4. Order Tracking Stepper Timeline Card */
.ykc-user-dashboard .yk-order-tracking-wrap {
    width: 100% !important;
    margin-top: 6px !important;
}
.ykc-user-dashboard .yk-tracking-cards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
.ykc-user-dashboard .yk-order-tracking-card {
    background: #FFFFFF !important;
    border: 1px solid var(--yk-border-light, #E2E8F0) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(8, 122, 152, 0.05) !important;
    transition: all 0.25s ease !important;
}
.ykc-user-dashboard .yk-order-tracking-card:hover {
    border-color: var(--yk-border-brand, rgba(8, 122, 152, 0.16)) !important;
    box-shadow: 0 10px 28px rgba(8, 122, 152, 0.12) !important;
    transform: translateY(-2px) !important;
}
.ykc-user-dashboard .yk-tracking-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--yk-border-light, #E2E8F0) !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.ykc-user-dashboard .yk-tracking-card-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.ykc-user-dashboard .yk-tracking-order-badge {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: var(--yk-primary, #087A98) !important;
    background: var(--yk-primary-light, #E6F3F6) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
}
.ykc-user-dashboard .yk-tracking-date-txt {
    font-size: 12.5px !important;
    color: var(--yk-text-muted, #64748B) !important;
}

/* Stepper Bar */
.ykc-user-dashboard .yk-timeline-stepper {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    max-width: 650px !important;
    margin: 28px auto 20px !important;
    direction: rtl !important;
}
.ykc-user-dashboard .yk-timeline-track {
    position: absolute !important;
    top: 22px !important;
    right: 15% !important;
    left: 15% !important;
    height: 3.5px !important;
    background: #E2E8F0 !important;
    border-radius: 2px !important;
    z-index: 1 !important;
}
.ykc-user-dashboard .yk-timeline-track-progress {
    height: 100% !important;
    background: var(--yk-primary, #087A98) !important;
    border-radius: 2px !important;
    transition: width 0.4s ease !important;
}
.ykc-user-dashboard .yk-timeline-step {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.ykc-user-dashboard .yk-timeline-node {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 2.5px solid #CBD5E1 !important;
    color: #94A3B8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 3 !important;
}
.ykc-user-dashboard .yk-timeline-step.is-done .yk-timeline-node {
    background: var(--yk-primary, #087A98) !important;
    border-color: var(--yk-primary, #087A98) !important;
    color: #FFFFFF !important;
}
.ykc-user-dashboard .yk-timeline-step.is-current .yk-timeline-node {
    background: #b9d532 !important;
    border-color: #a4be26 !important;
    color: #FFFFFF !important;
    position: relative !important;
    animation: ykPulseWave 2.4s infinite ease-in-out !important;
}
.ykc-user-dashboard .yk-timeline-step.is-current .yk-timeline-node svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none !important;
}
@keyframes ykPulseWave {
    0% {
        box-shadow: 0 0 0 0 rgba(185, 213, 50, 0.65), 0 0 10px rgba(185, 213, 50, 0.35);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(185, 213, 50, 0.15), 0 0 16px rgba(185, 213, 50, 0.25);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 18px rgba(185, 213, 50, 0), 0 0 8px rgba(185, 213, 50, 0);
        transform: scale(1);
    }
}
@keyframes ykBeaconGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(185, 213, 50, 0.7);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(185, 213, 50, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(185, 213, 50, 0);
    }
}
.ykc-user-dashboard .yk-timeline-label {
    margin-top: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--yk-text-muted, #64748B) !important;
    line-height: 1.4 !important;
}
.ykc-user-dashboard .yk-timeline-step.is-done .yk-timeline-label,
.ykc-user-dashboard .yk-timeline-step.is-current .yk-timeline-label {
    color: var(--yk-text-main, #1E293B) !important;
    font-weight: 600 !important;
}
.ykc-user-dashboard .yk-timeline-sub {
    font-size: 11px !important;
    color: var(--yk-text-subtle, #94A3B8) !important;
    margin-top: 3px !important;
}
.ykc-user-dashboard .yk-tracking-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px dashed var(--yk-border-light, #E2E8F0) !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.ykc-user-dashboard .yk-tracking-actions-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.ykc-user-dashboard .yk-tracking-cancelled-alert {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
    border: 1px solid #FECDD3 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    margin: 12px 0 16px 0 !important;
}
.ykc-user-dashboard .yk-tracking-empty-card {
    text-align: center !important;
    padding: 48px 20px !important;
    background: #FFFFFF !important;
    border: 1.5px dashed var(--yk-border-light, #E2E8F0) !important;
    border-radius: 12px !important;
}
.ykc-user-dashboard .yk-tracking-empty-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: var(--yk-primary-light, #E6F3F6) !important;
    color: var(--yk-primary, #087A98) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px auto !important;
}

/* 5. Mobile Adjustments (<860px) for Stepper Timeline */
@media (max-width: 860px) {
    .ykc-user-dashboard .yk-order-tracking-card {
        padding: 18px 14px !important;
    }
    .ykc-user-dashboard .yk-timeline-stepper {
        margin: 20px auto 14px !important;
        max-width: 100% !important;
    }
    .ykc-user-dashboard .yk-timeline-node {
        width: 38px !important;
        height: 38px !important;
    }
    .ykc-user-dashboard .yk-timeline-node svg {
        width: 16px !important;
        height: 16px !important;
    }
    .ykc-user-dashboard .yk-timeline-track {
        top: 19px !important;
        right: 14% !important;
        left: 14% !important;
        height: 2.5px !important;
    }
    .ykc-user-dashboard .yk-timeline-label {
        font-size: 11px !important;
    }
    .ykc-user-dashboard .yk-tracking-card-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .ykc-user-dashboard .yk-tracking-actions-wrap {
        width: 100% !important;
        justify-content: stretch !important;
    }
    .ykc-user-dashboard .yk-tracking-actions-wrap .yk-pill-btn {
        flex: 1 !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   6. Yuki Jalali Calendar Card Component - Strictly Synced with Reference Image 4
   (media_1791440281102.png) | 100% Theme / Elementor Button Override Immune
   ========================================================================== */
.ykc-user-dashboard .yuki-jalali-picker-wrap,
.yuki-jalali-picker-wrap {
    position: relative !important;
    width: 100% !important;
}

.ykc-user-dashboard .yuki-cal-trigger,
.yuki-cal-trigger {
    position: relative !important;
    cursor: pointer !important;
    width: 100% !important;
}

.ykc-user-dashboard .yuki-cal-display-input,
.yuki-cal-display-input {
    cursor: pointer !important;
    background: #ffffff !important;
    border: 1.5px solid var(--md-border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 10px 38px 10px 14px !important;
    font-size: 13px !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    direction: rtl !important;
    text-align: right !important;
}

.ykc-user-dashboard .yuki-cal-display-input:focus,
.ykc-user-dashboard .yuki-cal-display-input:hover,
.yuki-cal-display-input:focus,
.yuki-cal-display-input:hover {
    border-color: #066787 !important;
    box-shadow: 0 0 0 3px rgba(6, 103, 135, 0.12) !important;
}

.ykc-user-dashboard .yuki-cal-icon-btn,
.yuki-cal-icon-btn {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: #066787 !important;
    pointer-events: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Floating Calendar Popover Card */
.ykc-user-dashboard .yuki-calendar-card,
.yuki-calendar-card,
.yuki-modal-backdrop .yuki-calendar-card {
    display: none;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 999999 !important;
    width: 320px !important;
    max-width: calc(100vw - 28px) !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(6, 103, 135, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    direction: rtl !important;
    text-align: right !important;
    animation: yukiCalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes yukiCalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aggressive Button Reset inside Calendar Card to destroy Theme / Elementor pink borders */
.ykc-user-dashboard .yuki-calendar-card button,
.yuki-calendar-card button,
.yuki-modal-backdrop .yuki-calendar-card button {
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-image: none !important;
    transform: none !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
}

/* Header Navigation & Month/Year Pills */
.ykc-user-dashboard .yuki-cal-header,
.yuki-calendar-card .yuki-cal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    padding: 0 2px !important;
    direction: rtl !important;
}

.ykc-user-dashboard .yuki-cal-nav-btn,
.yuki-calendar-card .yuki-cal-nav-btn {
    border-radius: 8px !important;
    border: 1px solid #88D4E8 !important;
    background: #ffffff !important;
    color: #066787 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
    transition: all 0.18s ease !important;
    white-space: nowrap !important;
}

.ykc-user-dashboard .yuki-cal-nav-btn:hover,
.yuki-calendar-card .yuki-cal-nav-btn:hover {
    background: #e6f3f6 !important;
    color: #066787 !important;
}

.ykc-user-dashboard .yuki-cal-title-wrap,
.yuki-calendar-card .yuki-cal-title-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ykc-user-dashboard .yuki-cal-month-btn,
.yuki-calendar-card .yuki-cal-month-btn {
    background: #066787 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.18s ease !important;
}

.ykc-user-dashboard .yuki-cal-month-btn:hover,
.yuki-calendar-card .yuki-cal-month-btn:hover {
    background: #05546d !important;
}

.ykc-user-dashboard .yuki-cal-year-btn,
.yuki-calendar-card .yuki-cal-year-btn {
    background: #ffffff !important;
    color: #066787 !important;
    border: 1px solid #88D4E8 !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.18s ease !important;
}

.ykc-user-dashboard .yuki-cal-year-btn:hover,
.yuki-calendar-card .yuki-cal-year-btn:hover {
    background: #e6f3f6 !important;
}

/* Weekday Strip: Solid Dark Teal Bar with Soft Coral Friday */
.ykc-user-dashboard .yuki-cal-weekdays,
.yuki-calendar-card .yuki-cal-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: #066787 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 7px 0 !important;
    margin: 10px 0 8px 0 !important;
    user-select: none !important;
    direction: rtl !important;
}

.ykc-user-dashboard .yuki-cal-weekdays .holiday,
.yuki-calendar-card .yuki-cal-weekdays .holiday {
    color: #f87171 !important;
    font-weight: 600 !important;
}

/* Days Grid */
.ykc-user-dashboard .yuki-cal-days-grid,
.yuki-calendar-card .yuki-cal-days-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    text-align: center !important;
    direction: rtl !important;
}

.ykc-user-dashboard .yuki-cal-cell.empty,
.yuki-calendar-card .yuki-cal-cell.empty {
    height: 34px !important;
    width: 34px !important;
    margin: auto !important;
}

.ykc-user-dashboard .yuki-cal-day-btn,
.yuki-calendar-card .yuki-cal-day-btn {
    height: 34px !important;
    width: 34px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

.ykc-user-dashboard .yuki-cal-day-btn.holiday:not(.disabled):not(.selected),
.yuki-calendar-card .yuki-cal-day-btn.holiday:not(.disabled):not(.selected) {
    color: #ef4444 !important;
    background: #fef2f2 !important;
}

.ykc-user-dashboard .yuki-cal-day-btn:hover:not(.disabled):not(.selected),
.yuki-calendar-card .yuki-cal-day-btn:hover:not(.disabled):not(.selected) {
    background: #e6f3f6 !important;
    color: #066787 !important;
}

.ykc-user-dashboard .yuki-cal-day-btn.today:not(.selected),
.yuki-calendar-card .yuki-cal-day-btn.today:not(.selected) {
    border: 1.5px solid #066787 !important;
    color: #066787 !important;
    font-weight: 600 !important;
}

.ykc-user-dashboard .yuki-cal-day-btn.selected,
.yuki-calendar-card .yuki-cal-day-btn.selected {
    background: #066787 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(6, 103, 135, 0.25) !important;
}

.ykc-user-dashboard .yuki-cal-day-btn.disabled,
.yuki-calendar-card .yuki-cal-day-btn.disabled {
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.28 !important;
    pointer-events: none !important;
    text-decoration: line-through !important;
    background: transparent !important;
}

/* Month Selection Popup View */
.ykc-user-dashboard .yuki-cal-view-header,
.yuki-calendar-card .yuki-cal-view-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding: 4px 2px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #066787 !important;
    direction: rtl !important;
}

.ykc-user-dashboard .yuki-cal-view-back-btn,
.yuki-calendar-card .yuki-cal-view-back-btn {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    font-size: 12px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.ykc-user-dashboard .yuki-cal-view-back-btn:hover,
.yuki-calendar-card .yuki-cal-view-back-btn:hover {
    color: #066787 !important;
    background: #e6f3f6 !important;
}

.ykc-user-dashboard .yuki-cal-months-grid,
.ykc-user-dashboard .yuki-cal-years-grid,
.yuki-calendar-card .yuki-cal-months-grid,
.yuki-calendar-card .yuki-cal-years-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    direction: rtl !important;
}

.ykc-user-dashboard .yuki-cal-grid-item,
.yuki-calendar-card .yuki-cal-grid-item {
    padding: 10px 4px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.ykc-user-dashboard .yuki-cal-grid-item:hover:not(.disabled):not(.selected),
.yuki-calendar-card .yuki-cal-grid-item:hover:not(.disabled):not(.selected) {
    background: #e6f3f6 !important;
    border-color: #88D4E8 !important;
    color: #066787 !important;
}

.ykc-user-dashboard .yuki-cal-grid-item.selected,
.yuki-calendar-card .yuki-cal-grid-item.selected {
    background: #066787 !important;
    border-color: #066787 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.ykc-user-dashboard .yuki-cal-grid-item.disabled,
.yuki-calendar-card .yuki-cal-grid-item.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    color: #94a3b8 !important;
    background: #f8fafc !important;
}

.ykc-user-dashboard .yuki-cal-year-page-btn,
.yuki-calendar-card .yuki-cal-year-page-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: 1px solid #88D4E8 !important;
    background: #ffffff !important;
    color: #066787 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.ykc-user-dashboard .yuki-cal-year-page-btn:hover,
.yuki-calendar-card .yuki-cal-year-page-btn:hover {
    background: #e6f3f6 !important;
}

/* Footer with "برو به امروز" (solid teal, flex: 1) and "تأیید" (outline, width: 75px) strictly matching Image 4 */
.ykc-user-dashboard .yuki-cal-footer,
.yuki-calendar-card .yuki-cal-footer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    direction: rtl !important;
}

.ykc-user-dashboard .yuki-cal-btn-today,
.yuki-calendar-card .yuki-cal-btn-today {
    flex: 1 !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: #066787 !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    transform: none !important;
}

.ykc-user-dashboard .yuki-cal-btn-today:hover,
.yuki-calendar-card .yuki-cal-btn-today:hover {
    background: #05546d !important;
    transform: none !important;
}

.ykc-user-dashboard .yuki-cal-btn-confirm,
.yuki-calendar-card .yuki-cal-btn-confirm {
    width: 75px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #066787 !important;
    border: 1.5px solid #88D4E8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    transform: none !important;
}

.ykc-user-dashboard .yuki-cal-btn-confirm:hover,
.yuki-calendar-card .yuki-cal-btn-confirm:hover {
    background: #e6f3f6 !important;
    transform: none !important;
}

/* Mobile responsive adjustments for Datepicker (Inline & Inside Modals) */
@media (max-width: 480px) {
    .ykc-user-dashboard .yuki-calendar-card,
    .yuki-calendar-card,
    .yuki-modal-backdrop .yuki-calendar-card {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
        left: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    .ykc-user-dashboard .yuki-cal-days-grid,
    .yuki-calendar-card .yuki-cal-days-grid {
        gap: 2px !important;
    }
    .ykc-user-dashboard .yuki-cal-day-btn,
    .yuki-calendar-card .yuki-cal-day-btn,
    .ykc-user-dashboard .yuki-cal-cell.empty,
    .yuki-calendar-card .yuki-cal-cell.empty {
        width: 29px !important;
        height: 29px !important;
        font-size: 12px !important;
    }
    .ykc-user-dashboard .yuki-cal-weekdays,
    .yuki-calendar-card .yuki-cal-weekdays {
        font-size: 11px !important;
        padding: 5px 0 !important;
        margin: 6px 0 !important;
    }
    .ykc-user-dashboard .yuki-cal-header,
    .yuki-calendar-card .yuki-cal-header {
        margin-bottom: 6px !important;
    }
    .ykc-user-dashboard .yuki-cal-nav-btn,
    .yuki-calendar-card .yuki-cal-nav-btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }
    .ykc-user-dashboard .yuki-cal-month-btn,
    .yuki-calendar-card .yuki-cal-month-btn,
    .ykc-user-dashboard .yuki-cal-year-btn,
    .yuki-calendar-card .yuki-cal-year-btn {
        font-size: 11.5px !important;
        padding: 4px 8px !important;
    }
}

/* --- UNIFIED CLEAN CROSS DELETE BUTTON FOR ALL CARDS --- */
.ykc-user-dashboard .yuki-card-delete-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #ef4444 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

.ykc-user-dashboard .yuki-card-delete-btn:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    transform: none !important;
}

/* --- UNIFIED CARD EDIT & ACTION BUTTONS --- */
.ykc-user-dashboard .yuki-card-edit-btn {
    background: #f0f9fb !important;
    border: 1px solid #88D4E8 !important;
    color: #066787 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    text-decoration: none !important;
}

.ykc-user-dashboard .yuki-card-edit-btn:hover {
    background: #066787 !important;
    border-color: #066787 !important;
    color: #ffffff !important;
}

.ykc-user-dashboard .yuki-btn-delete {
    display: none !important; /* Hide old delete button style with text and trash */
}

.ykc-user-dashboard .yuki-occ-type-card {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ykc-user-dashboard .yuki-occ-type-card:hover {
    background: #eaf8fb !important;
    border-color: #88D4E8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(6, 103, 135, 0.08) !important;
}

.ykc-user-dashboard .yuki-occ-type-card.selected {
    background: #eaf8fb !important;
    border-color: #066787 !important;
    box-shadow: 0 0 0 2px rgba(6, 103, 135, 0.2) !important;
}

.ykc-user-dashboard .yuki-addr-select-card {
    transition: all 0.2s ease !important;
}

.ykc-user-dashboard .yuki-addr-select-card:hover {
    border-color: #88D4E8 !important;
    background: #f8fafc !important;
}

.ykc-user-dashboard .yuki-addr-select-card.selected {
    border-color: #066787 !important;
    background: #f0f9fb !important;
    box-shadow: 0 0 0 1.5px #066787 !important;
}

.ykc-user-dashboard .yuki-btn-shop-gift {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f0f9fb !important;
    color: #066787 !important;
    border: 1px solid #88D4E8 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ykc-user-dashboard .yuki-btn-shop-gift:hover {
    background: #066787 !important;
    color: #ffffff !important;
    border-color: #066787 !important;
}

/* ==========================================================================
   Responsive Horizontal Product Cards & Modal UX Improvements (Mobile + Desktop)
   ========================================================================== */

/* Horizontal Product Card in Modal */
.ykc-user-dashboard .yuki-horizontal-product-card,
.yuki-horizontal-product-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.ykc-user-dashboard .yuki-horizontal-product-card:hover,
.yuki-horizontal-product-card:hover {
    border-color: #88D4E8 !important;
    background: #f0f9fb !important;
}

.ykc-user-dashboard .yuki-hcard-thumb,
.yuki-hcard-thumb {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ykc-user-dashboard .yuki-hcard-thumb img,
.yuki-hcard-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.ykc-user-dashboard .yuki-hcard-details,
.yuki-hcard-details {
    flex: 1 !important;
    min-width: 0 !important;
}

.ykc-user-dashboard .yuki-hcard-title,
.yuki-hcard-title {
    margin: 0 0 4px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ykc-user-dashboard .yuki-hcard-meta,
.yuki-hcard-meta {
    font-size: 11.5px !important;
    color: #64748b !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.ykc-user-dashboard .yuki-hcard-action,
.yuki-hcard-action {
    flex-shrink: 0 !important;
}

.ykc-user-dashboard .yuki-choose-product-btn,
.yuki-choose-product-btn {
    border-radius: 8px !important;
    background: #6EC1E4 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 8px 18px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
    font-family: inherit !important;
}

.ykc-user-dashboard .yuki-choose-product-btn:hover,
.yuki-choose-product-btn:hover {
    background: #066787 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Calendar Year Selection Header Layout (Arrow pointing Left on Left, Right on Right) */
.ykc-user-dashboard .yuki-cal-years-view .yuki-cal-view-header {
    direction: ltr !important;
}
.ykc-user-dashboard .yuki-cal-years-view .yuki-cal-year-prev-page {
    order: 1 !important;
}
.ykc-user-dashboard .yuki-cal-years-view .yuki-cal-years-range-label {
    order: 2 !important;
}
.ykc-user-dashboard .yuki-cal-years-view .yuki-cal-year-next-page {
    order: 3 !important;
}

/* Address Modal Sticky Actions & Scroll Optimization */
.ykc-user-dashboard .yuki-address-modal-dialog {
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    border-radius: 8px !important;
}

.ykc-user-dashboard .yuki-address-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 75px !important;
    position: relative !important;
}

.ykc-user-dashboard .yuki-address-modal-actions {
    position: sticky !important;
    bottom: -20px !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #eef2f6 !important;
    padding: 12px 20px !important;
    margin: 16px -24px -20px -24px !important;
    z-index: 50 !important;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* Edit Delivery Modal Layout */
#yuki-edit-delivery-modal .yuki-modal-content {
    border-radius: 8px !important;
}

/* Responsive Overrides for Mobile (<= 640px) */
@media (max-width: 640px) {
    /* Responsive Horizontal Product Card: Stack on Mobile */
    .ykc-user-dashboard .yuki-horizontal-product-card,
    .yuki-horizontal-product-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .ykc-user-dashboard .yuki-horizontal-product-card .yuki-hcard-thumb,
    .yuki-horizontal-product-card .yuki-hcard-thumb {
        width: 60px !important;
        height: 60px !important;
    }

    .ykc-user-dashboard .yuki-horizontal-product-card .yuki-hcard-title,
    .yuki-horizontal-product-card .yuki-hcard-title {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
    }

    .ykc-user-dashboard .yuki-horizontal-product-card .yuki-hcard-action,
    .yuki-horizontal-product-card .yuki-hcard-action {
        width: 100% !important;
    }

    .ykc-user-dashboard .yuki-horizontal-product-card .yuki-hcard-action .yuki-choose-product-btn,
    .yuki-horizontal-product-card .yuki-hcard-action .yuki-choose-product-btn {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
    }

    /* Modal Height and Overflow Adjustments on Mobile */
    .ykc-user-dashboard .yuki-address-modal-dialog,
    #yuki-select-order-modal .yuki-modal-content,
    #yuki-edit-delivery-modal .yuki-modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 94vh !important;
        margin: auto !important;
        border-radius: 8px !important;
    }

    .ykc-user-dashboard .yuki-address-modal-header {
        padding: 12px 16px !important;
    }

    .ykc-user-dashboard .yuki-address-modal-body {
        padding: 14px 16px 65px !important;
    }

    /* Map container: compact height on mobile so user sees form without deep scrolling */
    .ykc-user-dashboard #yuki-neshan-map,
    #yuki-neshan-map {
        height: 165px !important;
    }

    .ykc-user-dashboard .yuki-map-wrapper {
        margin-bottom: 12px !important;
    }

    .ykc-user-dashboard .yuki-address-modal-actions {
        bottom: -14px !important;
        padding: 10px 16px !important;
        margin: 12px -16px -14px -16px !important;
    }
}

/* ==========================================================================
   YukiKado Strict Typography, 8px Radius & Truncation Rules
   ========================================================================== */
.yuki-truncate-name,
.yuki-truncate-title {
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.ykc-user-dashboard,
.ykc-user-dashboard * {
    border-radius: 8px;
    box-sizing: border-box;
}

.ykc-user-dashboard .md-badge,
.ykc-user-dashboard .badge-info,
.ykc-user-dashboard .badge-success,
.ykc-user-dashboard .badge-warning,
.ykc-user-dashboard .badge-danger {
    border-radius: 9999px !important;
}

.ykc-user-dashboard p,
.ykc-user-dashboard label,
.ykc-user-dashboard span,
.ykc-user-dashboard input,
.ykc-user-dashboard select,
.ykc-user-dashboard textarea {
    font-weight: 400 !important;
    line-height: 1.8 !important;
}

.ykc-user-dashboard h1,
.ykc-user-dashboard h2,
.ykc-user-dashboard h3,
.ykc-user-dashboard h4,
.ykc-user-dashboard h5,
.ykc-user-dashboard .md-title {
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

/* Modal Backdrops & Overlays - Detached to Body */
body > .yuki-modal-backdrop,
.yuki-modal-backdrop,
body > .yuki-address-modal,
.yuki-address-modal,
div[id$="-modal"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(6, 103, 135, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

body > .yuki-modal-backdrop.is-open,
.yuki-modal-backdrop.is-open,
body > .yuki-address-modal.is-open,
.yuki-address-modal.is-open,
div[id$="-modal"].is-open {
    display: flex !important;
}

.yuki-modal-backdrop .yuki-modal-content,
.yuki-address-modal .yuki-address-modal-dialog {
    border-radius: 8px !important;
    box-shadow: 0 20px 50px rgba(6, 103, 135, 0.2) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
}

/* Card Delete Buttons - Pure ✕ Icon */
.yuki-card-delete-btn,
.yuki-btn-delete-person,
.yuki-btn-delete-occ {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid #fecaca !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.yuki-card-delete-btn:hover,
.yuki-btn-delete-person:hover,
.yuki-btn-delete-occ:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* Mobile Typography & Layout Refinements */
@media (max-width: 640px) {
    .ykc-user-dashboard {
        font-size: 13px !important;
    }

    .ykc-user-dashboard .md-title {
        font-size: 1.05rem !important;
    }

    .ykc-user-dashboard .yuki-truncate-name {
        max-width: 110px !important;
    }

    .ykc-user-dashboard .yuki-truncate-title {
        max-width: 140px !important;
    }

    .ykc-user-dashboard .md-nav-item span {
        font-size: 12.5px !important;
    }
}



/* ==========================================================================
   GLOBAL HARDENED UX OVERRIDES (Zero-Scale, Cache-Immune Turquoise, Reference 3)
   ========================================================================== */

/* Universal Zero-Scale on Hover Across Dashboard */
.ykc-user-dashboard button,
.ykc-user-dashboard button:hover,
.ykc-user-dashboard .md-btn,
.ykc-user-dashboard .md-btn:hover,
.ykc-user-dashboard .md-btn-outline,
.ykc-user-dashboard .md-btn-outline:hover,
.ykc-user-dashboard .yk-pill-btn,
.ykc-user-dashboard .yk-pill-btn:hover,
.ykc-user-dashboard .yuki-card-edit-btn,
.ykc-user-dashboard .yuki-card-edit-btn:hover,
.ykc-user-dashboard .yuki-card-delete-btn,
.ykc-user-dashboard .yuki-card-delete-btn:hover,
.ykc-user-dashboard .md-nav-item,
.ykc-user-dashboard .md-nav-item:hover,
.ykc-user-dashboard a,
.ykc-user-dashboard a:hover {
    transform: none !important;
    font-size: inherit;
    letter-spacing: normal !important;
}

/* Strict Mobile Navigation Colors */
@media (max-width: 768px) {
    .ykc-user-dashboard .md-nav-item.active,
    #ykc-user-dashboard .md-nav-item.active {
        background: #066787 !important;
        background-color: #066787 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 14px rgba(6, 103, 135, 0.28) !important;
    }
    .ykc-user-dashboard .md-nav-item.active span,
    #ykc-user-dashboard .md-nav-item.active span {
        color: #ffffff !important;
        font-weight: 500 !important;
    }
    .ykc-user-dashboard .md-nav-item.active svg,
    #ykc-user-dashboard .md-nav-item.active svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
        fill: none !important;
        stroke-width: 2 !important;
        opacity: 1 !important;
    }
    .ykc-user-dashboard .md-nav-item:hover:not(.active):not(.logout),
    #ykc-user-dashboard .md-nav-item:hover:not(.active):not(.logout) {
        background: #e6f3f6 !important;
        background-color: #e6f3f6 !important;
        color: #066787 !important;
    }
    .ykc-user-dashboard .md-nav-item:hover:not(.active):not(.logout) span,
    #ykc-user-dashboard .md-nav-item:hover:not(.active):not(.logout) span {
        color: #066787 !important;
    }
    .ykc-user-dashboard .md-nav-item:hover:not(.active):not(.logout) svg,
    #ykc-user-dashboard .md-nav-item:hover:not(.active):not(.logout) svg {
        color: #066787 !important;
        stroke: #066787 !important;
        fill: none !important;
        stroke-width: 2 !important;
    }
}

/* Mobile Profile Completion Section Responsiveness */
@media (max-width: 600px) {
    .ykc-user-dashboard .yuki-profile-completion-box {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 16px !important;
        gap: 12px !important;
    }
    .ykc-user-dashboard .yuki-profile-progress-wrap {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .ykc-user-dashboard .yuki-profile-completion-msg {
        width: 100% !important;
    }
}

/* Title Alignment: Text & Icon grouped on Right (Bulletproof RTL Anchor) */
.ykc-user-dashboard .md-title,
#ykc-user-dashboard .md-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    direction: rtl !important;
    text-align: right !important;
    width: 100% !important;
}
.ykc-user-dashboard .md-title-text,
#ykc-user-dashboard .md-title-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}
.ykc-user-dashboard .md-title-text svg {
    width: 20px !important;
    height: 20px !important;
    color: #066787 !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   SOLID WHITE MODAL PROTECTION (PREVENT TRANSPARENT BLEED-THROUGH)
   ========================================================================== */
.yuki-modal-content,
.yuki-address-modal-dialog,
#yuki-address-form-modal .yuki-address-modal-dialog,
.yuki-address-modal-body,
#yuki-address-form-modal .yuki-address-modal-body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-radius: 8px !important;
    border: 1px solid #dfe9ee !important;
    box-shadow: 0 20px 50px rgba(6, 103, 135, 0.22) !important;
}
.yuki-address-modal-header,
#yuki-address-form-modal .yuki-address-modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #edf2f7 !important;
}

/* ==========================================================================
   GLOBAL COMPACT BUTTON STANDARDIZATION & STRICT 0PX ICON BORDER-RADIUS
   ========================================================================== */
#ykc-user-dashboard .md-btn,
.ykc-user-dashboard .md-btn,
#ykc-user-dashboard .md-btn-outline,
.ykc-user-dashboard .md-btn-outline,
.yk-header-action-btn,
#yuki-btn-toggle-occasion,
#yuki-btn-toggle-person,
#yuki-btn-show-new-address {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

/* Strict 0px Border-Radius on all Dashboard SVGs & Icons */
#ykc-user-dashboard svg,
.ykc-user-dashboard svg,
.yuki-wheel-container svg,
.yuki-address-modal svg,
div[id$="-modal"] svg {
    border-radius: 0 !important;
}

/* ==========================================================================
   ADDRESS CARDS COMPACT SAAS TYPOGRAPHY & SCALING
   ========================================================================== */
#ykc-user-dashboard .yuki-addr-card,
.ykc-user-dashboard .yuki-addr-card {
    background: #ffffff !important;
    border: 1px solid #dfe9ee !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 8px rgba(6, 103, 135, 0.04) !important;
    transition: all 0.2s ease !important;
}
#ykc-user-dashboard .yuki-addr-card:hover,
.ykc-user-dashboard .yuki-addr-card:hover {
    border-color: #88D4E8 !important;
    box-shadow: 0 4px 16px rgba(6, 103, 135, 0.08) !important;
}
#ykc-user-dashboard .yuki-addr-card.is-default,
.ykc-user-dashboard .yuki-addr-card.is-default {
    border-color: #066787 !important;
    background: #fbfdfd !important;
}
#ykc-user-dashboard .addr-card-title,
.ykc-user-dashboard .addr-card-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #066787 !important;
}
#ykc-user-dashboard .addr-default-pill,
.ykc-user-dashboard .addr-default-pill {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    padding: 2px 7px !important;
    border-radius: 8px !important;
    background: #eaf8fb !important;
    color: #066787 !important;
    border: 1px solid #88D4E8 !important;
}
#ykc-user-dashboard .addr-card-body-txt,
.ykc-user-dashboard .addr-card-body-txt {
    gap: 6px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #315264 !important;
}
#ykc-user-dashboard .addr-card-person,
.ykc-user-dashboard .addr-card-person {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #315264 !important;
}
#ykc-user-dashboard .addr-card-address,
.ykc-user-dashboard .addr-card-address {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: #5D7481 !important;
    line-height: 1.5 !important;
}
#ykc-user-dashboard .addr-card-postcode,
.ykc-user-dashboard .addr-card-postcode {
    font-size: 11px !important;
    color: #7C929E !important;
}
#ykc-user-dashboard .addr-card-actions-bar,
.ykc-user-dashboard .addr-card-actions-bar {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e2e8f0 !important;
    gap: 6px !important;
}
#ykc-user-dashboard .btn-addr-set-default,
.ykc-user-dashboard .btn-addr-set-default {
    font-size: 11px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 10px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid #cbd5e1 !important;
    color: #5D7481 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
#ykc-user-dashboard .btn-addr-set-default:hover,
.ykc-user-dashboard .btn-addr-set-default:hover {
    background: #eaf8fb !important;
    border-color: #066787 !important;
    color: #066787 !important;
}
#ykc-user-dashboard .btn-addr-edit,
.ykc-user-dashboard .btn-addr-edit {
    font-size: 11px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 10px !important;
    border-radius: 8px !important;
    background: #88D4E8 !important;
    border: 1px solid #88D4E8 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
}
#ykc-user-dashboard .btn-addr-edit:hover,
.ykc-user-dashboard .btn-addr-edit:hover {
    background: #066787 !important;
    border-color: #066787 !important;
    color: #ffffff !important;
}
#ykc-user-dashboard .btn-addr-delete,
.ykc-user-dashboard .btn-addr-delete {
    font-size: 11px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 10px !important;
    border-radius: 8px !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
}
#ykc-user-dashboard .btn-addr-delete:hover,
.ykc-user-dashboard .btn-addr-delete:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   LUCKY WHEEL SAAS STYLING (DEMO FILE YK-CADO-LUCKY-WHEEL-DEMO.HTML)
   ========================================================================== */
.yuki-wheel-container {
    max-width: 950px;
    margin: 0 auto 30px;
    position: relative;
}
.yuki-wheel-card {
    background: #ffffff !important;
    border: 1px solid #DFE9EE !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 32px rgba(6, 72, 96, 0.05) !important;
}
.yuki-wheel-topline {
    height: 4px !important;
    background: linear-gradient(90deg, #066787, #88D4E8, #FCB216) !important;
}
.yuki-wheel-header {
    text-align: center !important;
    padding: 22px 20px 8px !important;
}
.yuki-wheel-tag {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 30px !important;
    background: #EAF8FC !important;
    color: #066787 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
.yuki-wheel-title {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #066787 !important;
    margin: 10px 0 4px !important;
    line-height: 1.4 !important;
}
.yuki-wheel-lead {
    color: #7C929E !important;
    font-size: 12.5px !important;
    margin: 0 !important;
    font-weight: 400 !important;
}
.yuki-wheel-main {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 20px 26px 26px !important;
}
.yuki-wheel-area {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    min-width: 0 !important;
}
.yuki-wheel-frame {
    position: relative !important;
    width: min(100%, 430px) !important;
    aspect-ratio: 1 !important;
    padding: 11px !important;
    border-radius: 50% !important;
    background: #F0F8FB !important;
    border: 1px solid #DFE9EE !important;
    box-shadow: 0 10px 28px rgba(6, 103, 135, 0.09) !important;
    box-sizing: border-box !important;
}
.yuki-wheel-pointer {
    position: absolute !important;
    z-index: 3 !important;
    top: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 17px solid transparent !important;
    border-right: 17px solid transparent !important;
    border-top: 35px solid #D3191C !important;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.15)) !important;
}
#yuki-wheel-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 50% !important;
}
.yuki-wheel-cap {
    position: absolute !important;
    z-index: 2 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24% !important;
    aspect-ratio: 1 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #ffffff !important;
    border: 5px solid #ffffff !important;
    box-shadow: 0 0 0 2px #066787, 0 4px 14px rgba(6, 103, 135, 0.2) !important;
    color: #066787 !important;
    pointer-events: none !important;
}
.yuki-wheel-cap svg {
    width: 42% !important;
    height: 42% !important;
}
.yuki-wheel-caption {
    margin-top: 13px !important;
    color: #7C929E !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.yuki-wheel-caption::before {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    background: #25A66A !important;
    border-radius: 50% !important;
    margin-left: 7px !important;
    box-shadow: 0 0 0 2px rgba(37, 166, 106, 0.2) !important;
}
.yuki-wheel-controls {
    padding: 22px !important;
    border: 1px solid #DFE9EE !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}
.yuki-wheel-points-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    background: #F5FAFC !important;
    border: 1px solid #E8F1F5 !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}
.yuki-wheel-muted {
    font-size: 11px !important;
    color: #7C929E !important;
}
.yuki-wheel-points-box strong {
    font-size: 20px !important;
    color: #066787 !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 2px 0 !important;
}
.yuki-wheel-points-box small {
    display: block !important;
    color: #7C929E !important;
    font-size: 11px !important;
}
.yuki-wheel-coin {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #E3F6FB !important;
    color: #066787 !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
}
.yuki-wheel-controls-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #066787 !important;
    margin: 0 0 4px !important;
}
.yuki-wheel-controls-desc {
    font-size: 12px !important;
    color: #7C929E !important;
    margin: 0 0 16px !important;
    line-height: 1.5 !important;
}
.yuki-wheel-spin-btn {
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid #88D4E8 !important;
    border-radius: 8px !important;
    background: #066787 !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.yuki-wheel-spin-btn:hover:not(:disabled) {
    background: #04536C !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(6, 103, 135, 0.25) !important;
}
.yuki-wheel-spin-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}
.yuki-wheel-spin-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
}
.yuki-wheel-fine {
    font-size: 11px !important;
    color: #7C929E !important;
    text-align: center !important;
    margin: 10px 0 0 !important;
}
.yuki-wheel-prizes-box {
    border-top: 1px solid #EDF2F5 !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
}
.yuki-wheel-prizes-box h3 {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #066787 !important;
    margin: 0 0 10px !important;
}
.yuki-wheel-legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
.yuki-wheel-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11px !important;
    color: #5D7481 !important;
}
.yuki-wheel-swatch {
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}
.yuki-wheel-terms {
    margin: 0 26px 22px !important;
    padding: 10px 14px !important;
    background: #F8FBFC !important;
    border: 1px solid #EAF1F4 !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    color: #7C929E !important;
    line-height: 1.6 !important;
}
.yuki-wheel-terms strong {
    color: #066787 !important;
    font-weight: 500 !important;
}
/* Lucky Wheel Result Modal */
.yuki-wheel-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000002 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(12, 45, 58, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
.yuki-wheel-modal-backdrop.is-open,
.yuki-wheel-modal-backdrop.show {
    display: flex !important;
}
.yuki-wheel-modal {
    width: min(100%, 380px) !important;
    padding: 24px 20px 18px !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #DFE9EE !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.2) !important;
    animation: yukiModalSlideIn 0.25s ease-out !important;
    box-sizing: border-box !important;
}
.yuki-wheel-medal {
    width: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto 12px !important;
    border-radius: 14px !important;
    background: #E7F8EF !important;
    color: #218052 !important;
}
.yuki-wheel-modal h2 {
    margin: 0 0 4px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #066787 !important;
}
.yuki-wheel-reward {
    background: #F1FAFC !important;
    color: #066787 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin: 8px 0 14px !important;
    border: 1px dashed #88D4E8 !important;
}
.yuki-wheel-modal-actions {
    display: flex !important;
    gap: 8px !important;
}
.yuki-wheel-btn-secondary {
    flex: 1 !important;
    min-height: 38px !important;
    padding: 6px 12px !important;
    border: 1px solid #DFE9EE !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #066787 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}
.yuki-wheel-btn-secondary:hover {
    background: #F5FAFC !important;
}
@media (max-width: 768px) {
    .yuki-wheel-main {
        grid-template-columns: 1fr !important;
        padding: 16px 14px 22px !important;
        gap: 20px !important;
    }
    .yuki-wheel-frame {
        width: min(100%, 360px) !important;
    }
    .yuki-wheel-controls {
        padding: 16px !important;
    }
}
}

/* ==========================================================================
   GLOBAL HARDENED STANDARDIZATION & FIXES (2.8.1)
   - Zero rounded borders on table cells (prevents bubble/pill rows)
   - Strict 2x2 squarish grid for dashboard overview stat cards
   - Mobile active order header text wrapping fix
   - Referral tab copy button height alignment
   - Standardized table styling matching yk-cado-orders-table-demo.html
   ========================================================================== */

/* 1. Strict Table Reset: Zero border-radius on TR, TH, TD across all dashboard tables */
.ykc-user-dashboard table,
#ykc-user-dashboard table,
.ykc-user-dashboard table thead,
#ykc-user-dashboard table thead,
.ykc-user-dashboard table tbody,
#ykc-user-dashboard table tbody,
.ykc-user-dashboard table tr,
#ykc-user-dashboard table tr,
.ykc-user-dashboard table th,
#ykc-user-dashboard table th,
.ykc-user-dashboard table td,
#ykc-user-dashboard table td,
.ykc-user-dashboard .md-table td,
#ykc-user-dashboard .md-table td,
.ykc-user-dashboard .md-table th,
#ykc-user-dashboard .md-table th,
.ykc-user-dashboard .yk-orders-table td,
#ykc-user-dashboard .yk-orders-table td,
.ykc-user-dashboard .yk-orders-table th,
#ykc-user-dashboard .yk-orders-table th {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

.ykc-user-dashboard table,
#ykc-user-dashboard table,
.ykc-user-dashboard .md-table,
#ykc-user-dashboard .md-table,
.ykc-user-dashboard .yk-orders-table,
#ykc-user-dashboard .yk-orders-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* 2. Standardized Table Wrapping & Borders */
.ykc-user-dashboard .md-table-wrapper,
#ykc-user-dashboard .md-table-wrapper {
    background: #ffffff !important;
    border: 1px solid #E1E8ED !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(21, 57, 75, 0.03) !important;
    overflow-x: auto !important;
    margin-bottom: 24px !important;
}

.ykc-user-dashboard .md-table th,
#ykc-user-dashboard .md-table th {
    background: #F8FAFC !important;
    color: #718392 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #E1E8ED !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap !important;
    text-align: right !important;
}

.ykc-user-dashboard .md-table td,
#ykc-user-dashboard .md-table td {
    padding: 14px 18px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #F0F3F6 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #34495A !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    transition: background 0.18s ease !important;
    text-align: right !important;
}

.ykc-user-dashboard .md-table tbody tr:nth-child(even) td,
#ykc-user-dashboard .md-table tbody tr:nth-child(even) td {
    background: #FBFCFD !important;
}

.ykc-user-dashboard .md-table tbody tr:hover td,
#ykc-user-dashboard .md-table tbody tr:hover td {
    background: #F0FAFD !important;
}

.ykc-user-dashboard .md-table tbody tr:last-child td,
#ykc-user-dashboard .md-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* 3. Strict 2x2 Grid for Dashboard Overview Cards (Reference 1) */
.ykc-user-dashboard .md-stats-grid,
#ykc-user-dashboard .md-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-top: 18px !important;
    margin-bottom: 24px !important;
}

.ykc-user-dashboard .md-stat-card,
#ykc-user-dashboard .md-stat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 14px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    min-height: 90px !important;
    transition: var(--md-transition);
}
.ykc-user-dashboard .md-stat-card .md-stat-icon,
#ykc-user-dashboard .md-stat-card .md-stat-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}
.ykc-user-dashboard .md-stat-card .md-stat-info,
#ykc-user-dashboard .md-stat-card .md-stat-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* 4. Mobile Header & "مشاهده همه سفارشات" Alignment */
@media (max-width: 640px) {
    .yk-dashboard-active-order-box .yk-dashboard-order-header-flex,
    .ykc-user-dashboard .yk-dashboard-order-header-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .yk-dashboard-active-order-box .yk-dashboard-order-header-flex .md-title,
    .ykc-user-dashboard .yk-dashboard-order-header-flex .md-title {
        width: 100% !important;
    }
    .yk-dashboard-active-order-box .yk-dashboard-order-header-flex .js-switch-tab-order-tracking,
    .ykc-user-dashboard .yk-dashboard-order-header-flex .js-switch-tab-order-tracking {
        align-self: flex-start !important;
        display: inline-flex !important;
        margin-top: 2px !important;
    }
}

/* 5. Referral Tab Copy Button Height Alignment */
.ykc-user-dashboard .yuki-copy-input-wrap,
#ykc-user-dashboard .yuki-copy-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.ykc-user-dashboard .yuki-copy-input-wrap #yuki-ref-link-input,
#ykc-user-dashboard .yuki-copy-input-wrap #yuki-ref-link-input,
.ykc-user-dashboard .yuki-copy-input-wrap input,
#ykc-user-dashboard .yuki-copy-input-wrap input {
    height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    font-size: 13.5px !important;
}

.ykc-user-dashboard .yuki-copy-input-wrap #yuki-copy-ref-btn,
#ykc-user-dashboard .yuki-copy-input-wrap #yuki-copy-ref-btn,
.ykc-user-dashboard .yuki-copy-input-wrap button,
#ykc-user-dashboard .yuki-copy-input-wrap button {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 42px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}




/* ====================================================
   Yuki Kado v2.8.5 - Support Tickets & Helpdesk System
   Strictly Scoped under .ykc-ticket-ui and .ykc-user-dashboard
   ==================================================== */

.ykc-ticket-ui {
    direction: rtl;
    font-family: inherit;
    color: #345362;
    box-sizing: border-box;
}

.ykc-ticket-ui *,
.ykc-ticket-ui *::before,
.ykc-ticket-ui *::after {
    box-sizing: border-box;
}

/* Universal SVG sizing lock to prevent any SVG blowout */
.ykc-ticket-ui svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Header & Top Bar */
.ykc-ticket-ui__top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
}

.ykc-ticket-ui__top-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ykc-ticket-ui__top-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    background: #EAF0F5 !important;
    color: #066787 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ykc-ticket-ui__top-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: #066787 !important;
}

.ykc-ticket-ui__heading {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #066787 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
}

.ykc-ticket-ui__subheading {
    font-size: 12.5px !important;
    color: #80919B !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.ykc-ticket-ui__btn-create {
    background: #066787 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    box-shadow: 0 2px 6px rgba(6, 103, 135, 0.15) !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

.ykc-ticket-ui__btn-create svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #ffffff !important;
}

.ykc-ticket-ui__btn-create:hover {
    background: #05536d !important;
    transform: translateY(-1px) !important;
}

/* New Ticket Collapsible Form Panel */
.ykc-ticket-ui__form-panel {
    background: #ffffff !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 10px rgba(6, 103, 135, 0.05) !important;
}

.ykc-ticket-ui__form-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #F0F4F7 !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.ykc-ticket-ui__form-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #066787 !important;
}

.ykc-ticket-ui__form-title h4 {
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #066787 !important;
}

.ykc-ticket-ui__form-title svg {
    width: 18px !important;
    height: 18px !important;
    color: #066787 !important;
}

.ykc-ticket-ui__form-close {
    background: transparent !important;
    border: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #80919B !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.ykc-ticket-ui__form-close:hover {
    color: #E53935 !important;
    background: #FEECEB !important;
}

.ykc-ticket-ui__form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.ykc-ticket-ui__form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

@media (max-width: 640px) {
    .ykc-ticket-ui__form-row {
        grid-template-columns: 1fr !important;
    }
}

.ykc-ticket-ui__form-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.ykc-ticket-ui__label {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #345362 !important;
}

.ykc-ticket-ui__required {
    color: #E53935 !important;
}

.ykc-ticket-ui__input,
.ykc-ticket-ui__select,
.ykc-ticket-ui__textarea {
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: #345362 !important;
    background: #ffffff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.ykc-ticket-ui__input:focus,
.ykc-ticket-ui__select:focus,
.ykc-ticket-ui__textarea:focus {
    border-color: #066787 !important;
    box-shadow: 0 0 0 2px rgba(6, 103, 135, 0.1) !important;
}

.ykc-ticket-ui__textarea {
    min-height: 90px !important;
    line-height: 1.7 !important;
    resize: vertical !important;
}

.ykc-ticket-ui__file-picker {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.ykc-ticket-ui__file-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: #F5F8FA !important;
    border: 1px dashed #88D4E8 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 12.5px !important;
    color: #066787 !important;
    transition: background 0.2s !important;
}

.ykc-ticket-ui__file-label:hover {
    background: #EAF0F5 !important;
}

.ykc-ticket-ui__file-label svg {
    width: 15px !important;
    height: 15px !important;
    color: #066787 !important;
}

.ykc-ticket-ui__file-input {
    display: none !important;
}

.ykc-ticket-ui__file-name {
    font-size: 12px !important;
    color: #345362 !important;
}

.ykc-ticket-ui__file-hint {
    font-size: 11px !important;
    color: #80919B !important;
    margin-top: 2px !important;
}

.ykc-ticket-ui__form-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
}

.ykc-ticket-ui__btn-submit {
    background: #066787 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.2s !important;
}

.ykc-ticket-ui__btn-submit svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #ffffff !important;
}

.ykc-ticket-ui__btn-submit:hover {
    background: #05536d !important;
}

.ykc-ticket-ui__btn-cancel {
    background: #F5F8FA !important;
    color: #80919B !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.ykc-ticket-ui__btn-cancel:hover {
    background: #EAF0F5 !important;
    color: #345362 !important;
}

/* Controls: Clean Segmented Status Bar + Design-System Search Box (8px radius) */
.ykc-ticket-ui__controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.ykc-ticket-ui__filter-pills {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    white-space: nowrap !important;
    background: #F4F8FA !important;
    border: 1px solid #DCE7EE !important;
    border-radius: 8px !important;
    padding: 4px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ykc-ticket-ui__filter-pills::-webkit-scrollbar {
    display: none !important;
}

.ykc-ticket-ui__pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    height: 34px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #476575 !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.ykc-ticket-ui__pill:hover {
    color: #066787 !important;
    background: #ffffff !important;
    border-color: #DCE7EE !important;
}

.ykc-ticket-ui__pill.is-active {
    background: #066787 !important;
    border-color: #066787 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(6, 103, 135, 0.18) !important;
}

.ykc-ticket-ui__pill-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    background: #E2ECF2 !important;
    color: #345362 !important;
}

.ykc-ticket-ui__pill.is-active .ykc-ticket-ui__pill-count {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.ykc-ticket-ui__search-form {
    margin: 0 !important;
    flex: 0 1 290px !important;
    min-width: 240px !important;
}

.ykc-ticket-ui__search-box {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #DCE7EE !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    height: 42px !important;
    padding: 0 5px 0 5px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

.ykc-ticket-ui__search-box:focus-within {
    border-color: #066787 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(136, 212, 232, 0.22) !important;
}

.ykc-ticket-ui__search-box svg {
    width: 15px !important;
    height: 15px !important;
    color: #066787 !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
}

.ykc-ticket-ui__search-input {
    border: none !important;
    outline: none !important;
    font-size: 12.5px !important;
    padding: 0 4px !important;
    height: 100% !important;
    font-family: inherit !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: transparent !important;
    color: #172a31 !important;
    box-shadow: none !important;
}

.ykc-ticket-ui__search-btn {
    background: #066787 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    height: 32px !important;
    font-size: 12px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background-color 0.2s ease !important;
    flex-shrink: 0 !important;
}

.ykc-ticket-ui__search-btn:hover {
    background: #044f68 !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .ykc-ticket-ui__controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .ykc-ticket-ui__filter-pills {
        width: 100% !important;
    }
    .ykc-ticket-ui__search-form {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* Ticket Cards Grid -> Full Width Clean Row Layout (8px radius) */
.ykc-ticket-ui__cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
}

.ykc-ticket-ui__card {
    background: #ffffff !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.ykc-ticket-ui__card:hover {
    border-color: #88D4E8 !important;
    box-shadow: 0 4px 16px rgba(6, 103, 135, 0.08) !important;
    transform: translateY(-1px) !important;
}

.ykc-ticket-ui__card-top,
.ykc-ticket-ui__card-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.ykc-ticket-ui__card-id-group,
.ykc-ticket-ui__card-header-right {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.ykc-ticket-ui__card-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-right: auto !important;
}

.ykc-ticket-ui__card-id {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #066787 !important;
    background: #EAF4F8 !important;
    border: 1px solid #D0E8F2 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.ykc-ticket-ui__card-cat {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #476575 !important;
    background: #F4F8FA !important;
    border: 1px solid #E2ECF2 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.ykc-ticket-ui__card-prio {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.ykc-ticket-ui__prio--urgent,
.ykc-ticket-ui__prio-urgent {
    background: #FEECEB !important;
    color: #C62828 !important;
    border: 1px solid #F8C9C7 !important;
}

.ykc-ticket-ui__prio--high,
.ykc-ticket-ui__prio-high {
    background: #FFF4E5 !important;
    color: #D84315 !important;
    border: 1px solid #FFE0B2 !important;
}

.ykc-ticket-ui__prio--medium,
.ykc-ticket-ui__prio-medium {
    background: #F4F8FA !important;
    color: #345362 !important;
    border: 1px solid #DCE7EE !important;
}

.ykc-ticket-ui__prio--low,
.ykc-ticket-ui__prio-low {
    background: #E8F5E9 !important;
    color: #2E7D32 !important;
    border: 1px solid #C8E6C9 !important;
}

.ykc-ticket-ui__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.ykc-ticket-ui__badge--pending {
    background: #FFF4E5 !important;
    color: #B76E00 !important;
    border: 1px solid #FFE2B8 !important;
}

.ykc-ticket-ui__badge--open {
    background: #E8F5E9 !important;
    color: #2E7D32 !important;
    border: 1px solid #C8E6C9 !important;
}

.ykc-ticket-ui__badge--answered {
    background: #E1F5FE !important;
    color: #0277BD !important;
    border: 1px solid #B3E5FC !important;
}

.ykc-ticket-ui__badge--closed {
    background: #ECEFF1 !important;
    color: #546E7A !important;
    border: 1px solid #CFD8DC !important;
}

.ykc-ticket-ui__card-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.ykc-ticket-ui__card-subject {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #345362 !important;
    text-decoration: none !important;
    line-height: 1.45 !important;
}

.ykc-ticket-ui__card-subject:hover {
    color: #066787 !important;
}

.ykc-ticket-ui__card-snippet {
    font-size: 12px !important;
    color: #80919B !important;
    line-height: 1.6 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.ykc-ticket-ui__card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid #F5F8FA !important;
    padding-top: 10px !important;
}

.ykc-ticket-ui__card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 11.5px !important;
    color: #80919B !important;
}

.ykc-ticket-ui__card-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.ykc-ticket-ui__card-meta svg {
    width: 13px !important;
    height: 13px !important;
    color: #80919B !important;
}

.ykc-ticket-ui__card-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #066787 !important;
    text-decoration: none !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    background: #F4F8FA !important;
    border: 1px solid #E2ECF2 !important;
    transition: all 0.2s !important;
}

.ykc-ticket-ui__card-btn svg {
    width: 13px !important;
    height: 13px !important;
}

.ykc-ticket-ui__card-btn:hover {
    background: #EAF4F8 !important;
    border-color: #88D4E8 !important;
    color: #05536d !important;
}

/* Pagination */
.ykc-ticket-ui__pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 24px !important;
}

.ykc-ticket-ui__page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background: #F5F8FA !important;
    border: 1px solid #E0E8ED !important;
    color: #345362 !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

.ykc-ticket-ui__page-link.is-active {
    background: #066787 !important;
    color: #ffffff !important;
    border-color: #066787 !important;
}

/* Empty State */
.ykc-ticket-ui__empty-state {
    text-align: center !important;
    padding: 40px 20px !important;
    background: #ffffff !important;
    border: 1px dashed #E0E8ED !important;
    border-radius: 8px !important;
}

.ykc-ticket-ui__empty-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    background: #EAF0F5 !important;
    color: #066787 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ykc-ticket-ui__empty-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.ykc-ticket-ui__empty-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #345362 !important;
    margin: 0 0 6px 0 !important;
}

.ykc-ticket-ui__empty-desc {
    font-size: 12.5px !important;
    color: #80919B !important;
    margin: 0 auto !important;
    max-width: 380px !important;
}

/* Single Ticket View & Timeline */
.ykc-ticket-ui__view-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.ykc-ticket-ui__btn-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #066787 !important;
    text-decoration: none !important;
    background: #F5F8FA !important;
    border: 1px solid #E0E8ED !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}

.ykc-ticket-ui__btn-back svg {
    width: 15px !important;
    height: 15px !important;
}

.ykc-ticket-ui__btn-back:hover {
    background: #EAF0F5 !important;
}

.ykc-ticket-ui__view-badges {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ykc-ticket-ui__badge--neutral {
    background: #F5F8FA !important;
    color: #345362 !important;
    border: 1px solid #E0E8ED !important;
}

.ykc-ticket-ui__badge--replies {
    background: #EAF0F5 !important;
    color: #066787 !important;
    border: 1px solid #D5E4EC !important;
}

.ykc-ticket-ui__badge--replies svg {
    width: 13px !important;
    height: 13px !important;
}

.ykc-ticket-ui__subject-card {
    background: #ffffff !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 6px rgba(6, 103, 135, 0.04) !important;
}

.ykc-ticket-ui__subject-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.ykc-ticket-ui__id-tag {
    background: #EAF0F5 !important;
    color: #066787 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}

.ykc-ticket-ui__subject-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #345362 !important;
}

.ykc-ticket-ui__subject-meta {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    font-size: 12px !important;
    color: #80919B !important;
    flex-wrap: wrap !important;
}

.ykc-ticket-ui__meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.ykc-ticket-ui__meta-item svg {
    width: 14px !important;
    height: 14px !important;
}

.ykc-ticket-ui__timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.ykc-ticket-ui__msg {
    background: #ffffff !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 18px !important;
    position: relative !important;
    transition: border-color 0.2s !important;
}

.ykc-ticket-ui__msg--admin {
    background: #F0F8FA !important;
    border: 1px solid #88D4E8 !important;
    border-right: 4px solid #066787 !important;
}

.ykc-ticket-ui__msg--customer {
    background: #ffffff !important;
    border: 1px solid #E0E8ED !important;
}

.ykc-ticket-ui__msg-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.ykc-ticket-ui__msg-author {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ykc-ticket-ui__avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ykc-ticket-ui__avatar--customer {
    background: #EAF0F5 !important;
    color: #345362 !important;
}

.ykc-ticket-ui__avatar--admin {
    background: #066787 !important;
    color: #ffffff !important;
}

.ykc-ticket-ui__avatar svg {
    width: 18px !important;
    height: 18px !important;
}

.ykc-ticket-ui__author-details {
    display: flex !important;
    flex-direction: column !important;
}

.ykc-ticket-ui__author-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #345362 !important;
}

.ykc-ticket-ui__msg--admin .ykc-ticket-ui__author-name {
    color: #066787 !important;
}

.ykc-ticket-ui__author-role {
    font-size: 11px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    width: fit-content !important;
    margin-top: 2px !important;
}

.ykc-ticket-ui__author-role--user {
    background: #EAF0F5 !important;
    color: #80919B !important;
}

.ykc-ticket-ui__author-role--admin {
    background: #88D4E8 !important;
    color: #064E66 !important;
    font-weight: 500 !important;
}

.ykc-ticket-ui__msg-time {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    color: #80919B !important;
}

.ykc-ticket-ui__msg-time svg {
    width: 13px !important;
    height: 13px !important;
}

.ykc-ticket-ui__msg-body {
    font-size: 13.5px !important;
    line-height: 1.75 !important;
    color: #345362 !important;
    word-break: break-word !important;
}

.ykc-ticket-ui__attachment-box {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #E0E8ED !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.ykc-ticket-ui__attachment-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #066787 !important;
}

.ykc-ticket-ui__attachment-label svg {
    width: 14px !important;
    height: 14px !important;
}

.ykc-ticket-ui__img-preview {
    display: inline-block !important;
}

.ykc-ticket-ui__img-preview img {
    max-width: 280px !important;
    max-height: 180px !important;
    border-radius: 6px !important;
    border: 1px solid #E0E8ED !important;
    object-fit: cover !important;
    display: block !important;
}

.ykc-ticket-ui__img-hint {
    font-size: 11px !important;
    color: #80919B !important;
    margin-top: 4px !important;
    display: block !important;
}

.ykc-ticket-ui__file-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: #F5F8FA !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: #066787 !important;
    text-decoration: none !important;
}

.ykc-ticket-ui__file-link svg {
    width: 14px !important;
    height: 14px !important;
}

/* Response Composer */
.ykc-ticket-ui__composer {
    background: #ffffff !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: 0 2px 10px rgba(6, 103, 135, 0.05) !important;
}

.ykc-ticket-ui__composer-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    color: #066787 !important;
}

.ykc-ticket-ui__composer-header h4 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #066787 !important;
}

.ykc-ticket-ui__composer-header svg {
    width: 16px !important;
    height: 16px !important;
}

.ykc-ticket-ui__composer-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 12px !important;
    flex-wrap: wrap !important;
}

.ykc-ticket-ui__file-field {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ykc-ticket-ui__closed-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #F5F8FA !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 18px !important;
}

.ykc-ticket-ui__closed-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #E0E8ED !important;
    color: #80919B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ykc-ticket-ui__closed-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.ykc-ticket-ui__closed-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #345362 !important;
    margin-bottom: 4px !important;
}

.ykc-ticket-ui__closed-desc {
    font-size: 12px !important;
    color: #80919B !important;
    line-height: 1.5 !important;
}

.ykc-ticket-ui__alert {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
}

.ykc-ticket-ui__alert--success {
    background: #E8F5E9 !important;
    color: #2E7D32 !important;
    border: 1px solid #C8E6C9 !important;
}

.ykc-ticket-ui__alert--danger {
    background: #FEECEB !important;
    color: #C62828 !important;
    border: 1px solid #FFCDD2 !important;
}

.ykc-ticket-ui__alert-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* Coupon Copy Button in Wheel Modal */
.yk-copy-coupon-btn,
.yuki-wheel-coupon-box .yk-copy-coupon-btn {
    background: #066787 !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: background 0.2s ease !important;
    height: 32px !important;
    line-height: normal !important;
}

.yk-copy-coupon-btn:hover,
.yuki-wheel-coupon-box .yk-copy-coupon-btn:hover {
    background: #05536d !important;
    color: #ffffff !important;
}

/* ====================================================
   Yuki Unified Bottom Toast Notification (Strict Brand Pill)
   ==================================================== */
.yuki-bottom-toast,
#yuki-global-toast,
#yuki-global-bottom-toast {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(120px) !important;
    background: #ffffff !important;
    border: 1.5px solid #88D4E8 !important;
    color: #066787 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(6, 103, 135, 0.14) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    direction: rtl !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    box-sizing: border-box !important;
    max-width: 90vw !important;
    text-align: right !important;
}

.yuki-bottom-toast.is-visible,
#yuki-global-toast.is-visible,
#yuki-global-bottom-toast.is-visible {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.yuki-bottom-toast svg,
#yuki-global-toast svg,
#yuki-global-bottom-toast svg {
    width: 20px !important;
    height: 20px !important;
    color: #066787 !important;
    stroke: #066787 !important;
    fill: none !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
}

/* Sidebar Nav Top 0 Rule */
#md-sidebar-nav,
.md-sidebar {
    top: 0px !important;
}

/* Fix Order Tracking Header and Card Borders & Border-Radius (8px per YK-DESIGN-SYSTEM.md) */
.yk-dashboard-order-header-flex,
.ykc-user-dashboard .yk-dashboard-order-header-flex {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.yk-dashboard-active-order-box,
.ykc-user-dashboard .yk-dashboard-active-order-box {
    border-radius: 8px !important;
}

.yk-dashboard-active-order-box .md-title,
.ykc-user-dashboard .yk-dashboard-order-header-flex .md-title,
.yk-dashboard-order-header-flex .md-title {
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}

.yk-order-tracking-card,
.ykc-user-dashboard .yk-order-tracking-card,
.ykc-user-dashboard .md-card,
.ykc-user-dashboard .yuki-plan-card,
.ykc-user-dashboard .yuki-redeem-card,
.ykc-user-dashboard .yuki-addr-card,
.ykc-user-dashboard .ykc-ticket-ui__card,
.ykc-user-dashboard .yuki-person-card,
.ykc-user-dashboard .yuki-occasion-card {
    border-radius: 8px !important;
}