/* ==========================================================================
   Homepower WooCommerce User Administration Page Stylesheet (Vanilla CSS)
   ========================================================================== */

:root {
	--hp-primary: #009EE3;
	--hp-primary-hover: #0082b9;
	--hp-primary-light: #e6f4ff;
	--hp-primary-glow: rgba(0, 158, 227, 0.15);
	
	--hp-slate-50: #f8fafc;
	--hp-slate-100: #f1f5f9;
	--hp-slate-200: #e2e8f0;
	--hp-slate-300: #cbd5e1;
	--hp-slate-400: #94a3b8;
	--hp-slate-500: #64748b;
	--hp-slate-650: #475569;
	--hp-slate-800: #1e293b;
	--hp-slate-900: #0f172a;
	
	--hp-success: #10b981;
	--hp-success-light: #ecfdf5;
	--hp-warning: #f59e0b;
	--hp-warning-light: #fffbeb;
	--hp-danger: #ef4444;
	--hp-danger-light: #fef2f2;
}

/* ==========================================================================
   1. Layout Grid
   ========================================================================== */
/* Giải phóng giới hạn chiều rộng của dòng cha/container trong Flatsome cho riêng trang My Account */
body.woocommerce-account .container,
body.woocommerce-account .row-main,
body.woocommerce-account #content .row {
	max-width: 1400px !important;
}

.hp-myaccount-grid {
	width: 100% !important;
	max-width: 1400px !important;
	margin: 2rem auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	box-sizing: border-box !important;
}

@media (min-width: 1024px) {
	.hp-myaccount-grid {
		display: flex;
		flex-direction: row;
		gap: 2rem;
		align-items: start;
	}
	.hp-myaccount-sidebar {
		width: 250px !important;
		flex-shrink: 0;
	}
	.hp-myaccount-content-wrapper {
		flex: 1 !important;
		min-width: 0 !important;
		background: #ffffff;
		border-radius: 1.5rem;
		border: 1px solid var(--hp-slate-100);
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
		padding: 1.75rem;
		position: relative;
		box-sizing: border-box !important;
	}
}


@media (max-width: 1023px) {
	.hp-myaccount-content-wrapper {
		background: #ffffff;
		border-radius: 1.5rem;
		border: 1px solid var(--hp-slate-100);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
		padding: 1.5rem;
		min-height: auto;
	}
}

/* ==========================================================================
   2. Desktop Sidebar Navigation
   ========================================================================== */
.hp-navigation-sidebar-container {
	background-color: #ffffff;
	border-radius: 1.5rem;
	border: 1px solid var(--hp-slate-100);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	user-select: none;
	display: none;
}

@media (min-width: 1024px) {
	.hp-navigation-sidebar-container {
		display: block;
	}
}

/* Profile Summary inside Sidebar */
.hp-profile-summary {
	padding: 1.5rem;
	text-align: center;
	background: linear-gradient(180deg, var(--hp-slate-50) 0%, #ffffff 100%);
	border-bottom: 1px solid var(--hp-slate-100);
}

.hp-avatar-container {
	position: relative;
	display: inline-block;
	margin-bottom: 0.75rem;
}

.hp-avatar-image {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	border: 4px solid var(--hp-primary-light);
}

.hp-avatar-badge {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 14px;
	height: 14px;
	background-color: var(--hp-success);
	border: 2px solid #ffffff;
	border-radius: 50%;
}

.hp-profile-name {
	font-size: 1rem;
	font-weight: 800;
	color: var(--hp-slate-800);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hp-profile-email {
	font-size: 0.75rem;
	color: var(--hp-slate-400);
	margin: 0.25rem 0 0 0;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Navigation Menu */
.hp-navigation-menu {
	padding: 1rem;
}

.hp-menu-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.hp-menu-list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hp-menu-item-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0.875rem;
	border-radius: 1rem;
	text-decoration: none !important;
	transition: all 0.2s ease;
	color: var(--hp-slate-800);
	font-weight: 600;
	font-size: 0.875rem;
}

.hp-menu-item-link:hover {
	background-color: var(--hp-slate-50);
	color: #000000;
}

.hp-menu-item-link.is-active {
	background-color: var(--hp-slate-100);
	color: #000000;
	font-weight: 800;
}

.hp-menu-item-left {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.hp-menu-label {
	white-space: nowrap !important;
}

.hp-menu-icon-badge {
	width: 2rem;
	height: 2rem;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--hp-slate-50);
	color: var(--hp-slate-650);
	border: 1px solid transparent;
	transition: all 0.2s ease;
}

.hp-menu-icon-badge svg {
	width: 1.125rem !important;
	height: 1.125rem !important;
}

.hp-menu-item-link:hover .hp-menu-icon-badge {
	background-color: #ffffff;
	color: #000000;
	border-color: var(--hp-slate-200);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.hp-menu-item-link.is-active .hp-menu-icon-badge {
	background-color: #ffffff;
	color: #000000;
	border-color: var(--hp-slate-200);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.hp-menu-chevron {
	color: var(--hp-slate-400);
	transition: transform 0.2s ease, color 0.2s ease;
}

.hp-menu-item-link:hover .hp-menu-chevron {
	color: var(--hp-slate-800);
	transform: translateX(2px);
}

.hp-menu-item-link.is-active .hp-menu-chevron {
	color: #000000;
	transform: translateX(2px);
}

/* ==========================================================================
   3. Mobile Navigation Menu
   ========================================================================== */
.hp-navigation-mobile-container {
	display: block;
	user-select: none;
	margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
	.hp-navigation-mobile-container {
		display: none;
	}
}

.hp-mobile-profile-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: linear-gradient(90deg, var(--hp-primary-light) 0%, #ffffff 100%);
	border-radius: 1.5rem;
	border: 1px solid var(--hp-slate-100);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
	margin-bottom: 1rem;
	text-align: left;
}

.hp-mobile-avatar-image {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	border: 3px solid var(--hp-primary-light);
}

.hp-mobile-avatar-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-color: var(--hp-success);
	border: 1.5px solid #ffffff;
	border-radius: 50%;
}

.hp-mobile-profile-info {
	min-width: 0;
	flex: 1;
}

.hp-mobile-profile-name {
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--hp-slate-800);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hp-mobile-profile-subtitle {
	font-size: 0.625rem;
	color: var(--hp-slate-400);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0.125rem 0 0 0;
}

.hp-mobile-logout-col {
	flex-shrink: 0;
}

.hp-mobile-logout-btn {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 800;
	color: var(--hp-danger);
	background-color: var(--hp-danger-light);
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.hp-mobile-logout-btn:hover {
	background-color: rgba(239, 68, 68, 0.15);
}

/* Horizontal Scroll Tabs for Mobile */
.hp-mobile-navigation-tabs {
	overflow-x: auto;
	margin-left: -1rem;
	margin-right: -1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 0.5rem;
}

/* Hide scrollbars but keep functionality */
.hp-mobile-navigation-tabs::-webkit-scrollbar {
	display: none;
}
.hp-mobile-navigation-tabs {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.hp-mobile-tabs-container {
	display: flex;
	gap: 0.5rem;
	width: max-content;
}

.hp-mobile-tab-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 800;
	text-decoration: none !important;
	transition: all 0.2s ease;
	background-color: #ffffff;
	border: 1px solid var(--hp-slate-200);
	color: var(--hp-slate-500);
}

.hp-mobile-tab-btn:hover {
	background-color: var(--hp-slate-50);
	color: var(--hp-slate-800);
}

.hp-mobile-tab-btn.is-active {
	background-color: var(--hp-primary);
	border-color: var(--hp-primary);
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(0, 158, 227, 0.2);
}

.hp-mobile-tab-btn .hp-menu-icon-badge {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	color: inherit;
}

.hp-mobile-tab-btn .hp-menu-icon-badge svg {
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   4. Dashboard Widgets & Stats
   ========================================================================== */
.hp-myaccount-dashboard-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Welcome Card */
.hp-dashboard-welcome-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
	color: #ffffff;
	border-radius: 1.5rem;
	box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.2);
}

.hp-welcome-bg-circle-1 {
	position: absolute;
	width: 15rem;
	height: 15rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	top: -5rem;
	right: -3rem;
}

.hp-welcome-bg-circle-2 {
	position: absolute;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	bottom: -2rem;
	right: 5rem;
}

.hp-welcome-inner {
	position: relative;
	z-index: 2;
	padding: 1.75rem;
	text-align: left;
}

.hp-welcome-text-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hp-welcome-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 800;
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hp-welcome-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #34d399; /* emerald-400 */
	box-shadow: 0 0 8px #34d399;
}

.hp-welcome-title {
	font-size: 1.25rem;
	font-weight: 900;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.hp-welcome-subtitle {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	margin: 0.5rem 0 0 0;
	line-height: 1.4;
}

/* Stats Cards Grid */
.hp-dashboard-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 640px) {
	.hp-dashboard-stats-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hp-stats-card {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1.25rem;
	background-color: #ffffff;
	border: 1px solid var(--hp-slate-100);
	border-radius: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
	transition: all 0.25s ease;
	text-align: left;
}

.hp-stats-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.05);
	border-color: var(--hp-slate-200);
}

.hp-stats-icon-wrapper {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hp-stats-icon-wrapper.blue {
	background-color: var(--hp-primary-light);
	color: var(--hp-primary);
}

.hp-stats-icon-wrapper.emerald {
	background-color: var(--hp-success-light);
	color: var(--hp-success);
}

.hp-stats-icon-wrapper.amber {
	background-color: var(--hp-warning-light);
	color: var(--hp-warning);
}

.hp-stats-icon-wrapper svg {
	width: 1.25rem;
	height: 1.25rem;
}

.hp-stats-info {
	min-width: 0;
}

.hp-stats-value {
	display: block;
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--hp-slate-800);
	line-height: 1.2;
}

.hp-stats-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--hp-slate-500);
	margin-top: 0.125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dashboard Shortcuts List */
.hp-dashboard-shortcuts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.hp-shortcut-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background-color: #ffffff;
	border: 1px solid var(--hp-slate-100);
	border-radius: 1.25rem;
	text-decoration: none !important;
	transition: all 0.2s ease;
	text-align: left;
}

.hp-shortcut-card:hover {
	background-color: var(--hp-slate-50);
	border-color: var(--hp-slate-200);
}

.hp-shortcut-icon-wrapper {
	width: 2rem;
	height: 2rem;
	border-radius: 0.75rem;
	background-color: var(--hp-slate-50);
	color: var(--hp-slate-500);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.hp-shortcut-card:hover .hp-shortcut-icon-wrapper {
	background-color: #ffffff;
	color: var(--hp-primary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.hp-shortcut-icon-wrapper svg {
	width: 1rem;
	height: 1rem;
}

.hp-shortcut-label {
	flex: 1;
	margin-left: 0.875rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--hp-slate-800);
}

.hp-shortcut-chevron {
	color: var(--hp-slate-300);
	transition: transform 0.2s ease, color 0.2s ease;
}

.hp-shortcut-card:hover .hp-shortcut-chevron {
	color: var(--hp-slate-500);
	transform: translateX(3px);
}

/* ==========================================================================
   5. Order History Table & Cards
   ========================================================================== */
.hp-orders-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.hp-orders-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--hp-slate-100);
	padding-bottom: 1rem;
}

.hp-orders-title-main {
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--hp-slate-800);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.025em;
}

.hp-orders-count-badge {
	padding: 0.375rem 0.75rem;
	background-color: var(--hp-slate-50);
	border: 1px solid var(--hp-slate-200);
	color: var(--hp-slate-500);
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
}

/* Desktop Order Table */
.hp-desktop-table-container {
	display: none;
}

@media (min-width: 768px) {
	.hp-desktop-table-container {
		display: block;
	}
}

.hp-desktop-table-border {
	overflow: hidden;
	border: 1px solid var(--hp-slate-100);
	border-radius: 1.25rem;
}

.hp-orders-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 0.875rem;
	margin: 0 !important;
}

.hp-orders-table th {
	background-color: var(--hp-slate-50);
	padding: 1rem 1.5rem;
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--hp-slate-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--hp-slate-100);
	white-space: nowrap !important;
}

.hp-orders-table td {
	padding: 0.75rem 1.5rem !important;
	vertical-align: middle;
	border-bottom: 1px solid var(--hp-slate-100);
}

.hp-orders-table tbody tr {
	transition: background-color 0.2s ease;
}

.hp-orders-table tbody tr:hover {
	background-color: rgba(248, 250, 252, 0.5);
}

.hp-orders-table a {
	color: var(--hp-primary);
	font-weight: 800;
	text-decoration: none !important;
}

.hp-orders-table a:hover {
	text-decoration: underline !important;
}

.hp-align-right {
	text-align: right;
}

/* Status Pill Badges */
.hp-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	border-width: 1px;
	border-style: solid;
	white-space: nowrap;
	position: relative;
}

/* Block Flatsome/WooCommerce pseudo-element loading spinners */
.hp-status-pill::after,
.hp-status-pill::before {
	display: none !important;
	content: none !important;
}

.hp-status-pill .hp-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.hp-status-pill.hp-completed {
	background-color: var(--hp-success-light);
	color: #065f46;
	border-color: rgba(167, 243, 208, 0.4);
}
.hp-status-pill.hp-completed .hp-status-dot {
	background-color: var(--hp-success);
}

.hp-status-pill.hp-processing {
	background-color: var(--hp-primary-light);
	color: #075985;
	border-color: rgba(186, 230, 253, 0.4);
}
.hp-status-pill.hp-processing .hp-status-dot {
	background-color: var(--hp-primary);
}

.hp-status-pill.hp-shipping {
	background-color: #eef2ff;
	color: #3730a3;
	border-color: rgba(199, 210, 254, 0.4);
}
.hp-status-pill.hp-shipping .hp-status-dot {
	background-color: #4f46e5;
}

.hp-status-pill.hp-on-hold {
	background-color: var(--hp-warning-light);
	color: #92400e;
	border-color: rgba(253, 230, 138, 0.4);
}
.hp-status-pill.hp-on-hold .hp-status-dot {
	background-color: var(--hp-warning);
}

.hp-status-pill.hp-pending {
	background-color: #fff7ed;
	color: #9a3412;
	border-color: rgba(254, 215, 170, 0.4);
}
.hp-status-pill.hp-pending .hp-status-dot {
	background-color: #f97316;
}

.hp-status-pill.hp-cancelled,
.hp-status-pill.hp-failed {
	background-color: var(--hp-danger-light);
	color: #991b1b;
	border-color: rgba(254, 226, 226, 0.4);
}
.hp-status-pill.hp-cancelled .hp-status-dot,
.hp-status-pill.hp-failed .hp-status-dot {
	background-color: var(--hp-danger);
}

/* Table Cells Custom Styling */
.hp-order-number-link {
	font-weight: 700 !important;
	color: var(--hp-primary) !important;
	text-decoration: none !important;
}

.hp-order-number-link:hover {
	text-decoration: underline !important;
}

.hp-order-date {
	color: var(--hp-slate-650) !important;
	font-size: 0.875rem !important;
}

.hp-order-total-amount {
	font-weight: 700 !important;
	color: var(--hp-slate-800) !important;
}

/* Action Buttons */
.hp-order-actions-wrapper {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.hp-order-btn-view,
.hp-order-btn-pay,
.hp-order-btn-other {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.375rem !important;
	padding: 0.4375rem 1rem !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 900 !important;
	border-radius: 9999px !important;
	text-decoration: none !important;
	height: 32px !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer !important;
}

.hp-order-btn-view {
	background-color: var(--hp-slate-50) !important;
	color: var(--hp-slate-650) !important;
	border: 1px solid var(--hp-slate-200) !important;
}

.hp-order-btn-view:hover {
	background-color: var(--hp-slate-100) !important;
	color: var(--hp-slate-800) !important;
	border-color: var(--hp-slate-300) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.hp-order-btn-pay {
	background: var(--hp-primary) !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
	box-shadow: 0 2px 8px var(--hp-primary-glow) !important;
}

.hp-order-btn-pay:hover {
	background: var(--hp-primary-hover) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px var(--hp-primary-glow) !important;
}

.hp-order-btn-other {
	background-color: var(--hp-slate-50) !important;
	color: var(--hp-slate-650) !important;
	border: 1px solid var(--hp-slate-200) !important;
}

.hp-order-btn-other:hover {
	background-color: var(--hp-slate-100) !important;
	color: var(--hp-slate-800) !important;
	border-color: var(--hp-slate-300) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.hp-order-btn-view:active,
.hp-order-btn-pay:active,
.hp-order-btn-other:active {
	transform: translateY(-2px) scale(0.96) !important;
}

.hp-order-btn-view svg,
.hp-order-btn-pay svg,
.hp-order-btn-other svg {
	width: 0.875rem !important;
	height: 0.875rem !important;
	color: inherit !important;
}

.hp-order-actions-wrapper > :only-child {
	background: var(--hp-primary) !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
	box-shadow: 0 2px 8px var(--hp-primary-glow) !important;
}

.hp-order-actions-wrapper > :only-child:hover {
	background: var(--hp-primary-hover) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px var(--hp-primary-glow) !important;
}

/* Pulse Animation for Processing Status Dot */
@keyframes hp-pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 158, 227, 0.5);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 5px rgba(0, 158, 227, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 158, 227, 0);
	}
}

.hp-status-pill .hp-status-dot.pulse {
	animation: hp-pulse 2s infinite !important;
}

/* Mobile Order Cards List */
.hp-mobile-card-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 1rem !important;
}

@media (min-width: 768px) {
	.hp-mobile-card-list {
		display: none !important;
	}
}

.hp-mobile-order-card {
	background-color: #ffffff !important;
	border: 1px solid var(--hp-slate-100) !important;
	border-radius: 1.25rem !important;
	padding: 1.25rem !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1rem !important;
	text-align: left !important;
}

.hp-mobile-card-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	border-bottom: 1px solid var(--hp-slate-50) !important;
	padding-bottom: 0.75rem !important;
}

.hp-mobile-order-id-group,
.hp-mobile-order-date-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.125rem !important;
}

.hp-mobile-order-date-group {
	align-items: flex-end !important;
}

.hp-mobile-card-label {
	font-size: 0.625rem !important;
	color: var(--hp-slate-400) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.hp-mobile-order-number {
	font-size: 0.8125rem !important;
	font-weight: 800 !important;
	color: var(--hp-primary) !important;
	text-decoration: none !important;
}

.hp-mobile-order-date {
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	color: var(--hp-slate-800) !important;
}

.hp-mobile-card-body {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.hp-mobile-status-group,
.hp-mobile-total-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.125rem !important;
}

.hp-mobile-total-group {
	align-items: flex-end !important;
}

.hp-mobile-order-total {
	font-size: 0.875rem !important;
	font-weight: 800 !important;
	color: var(--hp-slate-900) !important;
}

.hp-mobile-card-footer {
	border-top: 1px solid var(--hp-slate-50) !important;
	padding-top: 0.75rem !important;
	display: flex !important;
	gap: 0.5rem !important;
}

.hp-mobile-btn-view,
.hp-mobile-btn-pay,
.hp-mobile-btn-other {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.375rem !important;
	padding: 0.5rem 1rem !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	border-radius: 0.75rem !important;
	text-decoration: none !important;
	height: 36px !important;
	box-sizing: border-box !important;
	flex: 1 !important;
	white-space: nowrap !important;
	transition: all 0.2s ease !important;
}

.hp-mobile-btn-view {
	background-color: var(--hp-slate-50) !important;
	color: var(--hp-slate-650) !important;
	border: 1px solid var(--hp-slate-200) !important;
}

.hp-mobile-btn-view:hover {
	background-color: var(--hp-slate-100) !important;
	color: var(--hp-slate-800) !important;
}

.hp-mobile-btn-pay {
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
}

.hp-mobile-btn-pay:hover {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
	color: #ffffff !important;
}

.hp-mobile-btn-other {
	background-color: var(--hp-slate-50) !important;
	color: var(--hp-slate-650) !important;
	border: 1px solid var(--hp-slate-200) !important;
}

.hp-mobile-btn-other:hover {
	background-color: var(--hp-slate-100) !important;
	color: var(--hp-slate-800) !important;
}

.hp-mobile-btn-view svg,
.hp-mobile-btn-pay svg,
.hp-mobile-btn-other svg {
	width: 0.875rem !important;
	height: 0.875rem !important;
	color: inherit !important;
}

.hp-mobile-card-footer > :only-child {
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
}

.hp-mobile-card-footer > :only-child:hover {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
	color: #ffffff !important;
}

/* Pagination Section */
.hp-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1rem !important;
	margin-top: 1.5rem !important;
	padding-top: 1.5rem !important;
	border-top: 1px solid var(--hp-slate-100) !important;
}

.hp-pagination-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.5rem 1rem !important;
	height: 36px !important;
	background-color: #ffffff !important;
	border: 1px solid var(--hp-slate-200) !important;
	border-radius: 0.75rem !important;
	color: var(--hp-slate-650) !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.hp-pagination-btn:hover {
	background-color: var(--hp-slate-50) !important;
	border-color: var(--hp-slate-300) !important;
	color: var(--hp-slate-900) !important;
}

.hp-pagination-current {
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	color: var(--hp-slate-500) !important;
}

/* Empty State Layout */
.hp-empty-state {
	text-align: center;
	padding: 3.5rem 1.5rem;
	background-color: rgba(248, 250, 252, 0.4);
	border: 2px dashed var(--hp-slate-200);
	border-radius: 1.5rem;
	max-width: 480px;
	margin: 2rem auto;
}

.hp-empty-icon {
	width: 4rem;
	height: 4rem;
	border-radius: 1.25rem;
	background-color: var(--hp-primary-light);
	border: 1px solid rgba(0, 158, 227, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hp-primary);
	margin: 0 auto 1.5rem auto;
	box-shadow: 0 4px 6px -1px rgba(0, 158, 227, 0.05);
}

.hp-empty-title {
	font-size: 1rem;
	font-weight: 800;
	color: var(--hp-slate-800);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.025em;
}

.hp-empty-desc {
	font-size: 0.8125rem;
	color: var(--hp-slate-500);
	margin: 0.5rem auto 1.5rem auto;
	font-weight: 600;
	max-width: 320px;
	line-height: 1.5;
}

.hp-empty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
	color: #ffffff !important;
	font-weight: 800;
	font-size: 0.8125rem;
	border-radius: 0.75rem;
	text-decoration: none !important;
	transition: all 0.2s ease;
	box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15);
	cursor: pointer;
}

.hp-empty-btn:hover {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
	box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25);
}

/* ==========================================================================
   6. View Order Detail & Track Stepper & Timeline
   ========================================================================== */
.hp-view-order-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.hp-view-order-header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-bottom: 1px solid var(--hp-slate-100);
	padding-bottom: 1rem;
	text-align: left;
}

.hp-view-order-header-main {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.hp-header-info-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hp-back-link {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--hp-slate-500);
	text-decoration: none !important;
	transition: color 0.2s ease;
	margin-bottom: 0.25rem;
}

.hp-back-link:hover {
	color: var(--hp-primary);
}

.hp-view-order-title {
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--hp-slate-800);
	margin: 0;
	line-height: 1.2;
}

.hp-view-order-meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.25rem !important;
	font-size: 0.8125rem !important;
	color: var(--hp-slate-500) !important;
	margin: 0.5rem 0 0 0 !important;
	font-weight: 500 !important;
	text-align: left !important;
}

.hp-meta-separator {
	margin: 0 0.5rem !important;
	color: var(--hp-slate-300) !important;
}

.hp-status-text {
	font-weight: 800 !important;
	position: relative !important;
}

/* Block Flatsome/WooCommerce pseudo-element loading spinners on status texts */
.hp-status-text::before,
.hp-status-text::after {
	display: none !important;
	content: none !important;
	animation: none !important;
}

.hp-status-text.completed,
.hp-status-text.hp-completed {
	color: var(--hp-success) !important;
}

.hp-status-text.processing,
.hp-status-text.hp-processing {
	color: var(--hp-primary) !important;
}

.hp-status-text.shipping,
.hp-status-text.hp-shipping {
	color: #4f46e5 !important;
}

.hp-status-text.on-hold,
.hp-status-text.hp-on-hold {
	color: var(--hp-warning) !important;
}

.hp-status-text.pending,
.hp-status-text.hp-pending {
	color: #f97316 !important;
}

.hp-status-text.cancelled,
.hp-status-text.failed,
.hp-status-text.hp-cancelled,
.hp-status-text.hp-failed {
	color: var(--hp-danger) !important;
}

/* Minimalist notice block */
.hp-minimal-notice {
	padding: 1rem 1.25rem !important;
	border-radius: 0.75rem !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	border: 1px solid transparent !important;
	text-align: left !important;
}

.hp-minimal-notice.info {
	background-color: var(--hp-primary-light) !important;
	color: #0369a1 !important;
	border-color: rgba(3, 105, 161, 0.1) !important;
}

.hp-minimal-notice.success {
	background-color: var(--hp-success-light) !important;
	color: #065f46 !important;
	border-color: rgba(6, 95, 70, 0.1) !important;
}

.hp-minimal-notice.cancelled {
	background-color: var(--hp-danger-light) !important;
	color: #991b1b !important;
	border-color: rgba(153, 27, 27, 0.1) !important;
}

/* Minimalist timeline styling */
.hp-minimal-timeline {
	margin-top: 1.5rem !important;
	padding-top: 1.5rem !important;
	border-top: 1px solid var(--hp-slate-100) !important;
	text-align: left !important;
}

.hp-timeline-title {
	font-size: 0.875rem !important;
	font-weight: 800 !important;
	color: var(--hp-slate-800) !important;
	text-transform: uppercase !important;
	margin-bottom: 1rem !important;
	letter-spacing: 0.025em !important;
}

.hp-timeline-list-simple {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
}

.hp-timeline-item-simple {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.25rem !important;
	padding-bottom: 0.75rem !important;
	border-bottom: 1px dashed var(--hp-slate-100) !important;
}

.hp-timeline-item-simple:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

@media (min-width: 640px) {
	.hp-timeline-item-simple {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 1.5rem !important;
	}
}

.hp-timeline-time-simple {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	color: var(--hp-slate-400) !important;
	white-space: nowrap !important;
	width: 120px !important;
	flex-shrink: 0 !important;
}

.hp-timeline-content-simple {
	font-size: 0.8125rem !important;
	color: var(--hp-slate-650) !important;
}

.hp-timeline-content-simple p {
	margin: 0 !important;
}

/* Order Products List Card */
.hp-order-table-card {
	background-color: #ffffff;
	border: 1px solid var(--hp-slate-200) !important;
	border-radius: 0.5rem !important;
	padding: 1.5rem !important;
	box-shadow: none !important;
	text-align: left;
}

.hp-order-table-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--hp-slate-800) !important;
	margin-top: 0 !important;
	margin-bottom: 1rem !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 1px solid var(--hp-slate-100) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.025em;
}

.hp-view-order-table-scroll {
	overflow-x: auto;
}

/* Standard WooCommerce table overrides for order details */
.hp-view-order-table-scroll table.shop_table {
	width: 100% !important;
	border-collapse: collapse !important;
	border: none !important;
	font-size: 0.875rem !important;
	margin: 0 !important;
}

.hp-view-order-table-scroll table.shop_table th {
	background-color: var(--hp-slate-50) !important;
	color: var(--hp-slate-500) !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	padding: 1rem !important;
	border: none !important;
	border-bottom: 1px solid var(--hp-slate-100) !important;
}

.hp-view-order-table-scroll table.shop_table td {
	padding: 1rem !important;
	border: none !important;
	border-bottom: 1px solid var(--hp-slate-100) !important;
	color: var(--hp-slate-800) !important;
}

.hp-view-order-table-scroll table.shop_table tfoot th {
	text-transform: none !important;
	font-weight: 700 !important;
	color: var(--hp-slate-500) !important;
	font-size: 0.875rem !important;
	letter-spacing: normal !important;
}

.hp-view-order-table-scroll table.shop_table tfoot th,
.hp-view-order-table-scroll table.shop_table tfoot td {
	background-color: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--hp-slate-100) !important;
	padding: 0.875rem 1rem !important;
}

.hp-view-order-table-scroll table.shop_table tfoot tr:last-child th,
.hp-view-order-table-scroll table.shop_table tfoot tr:last-child td {
	border-bottom: none !important;
	font-weight: 800 !important;
}

.hp-view-order-table-scroll table.shop_table tfoot tr:last-child th {
	color: var(--hp-slate-800) !important;
}

/* Timeline updates notes */
.hp-timeline-card {
	background-color: #ffffff;
	border: 1px solid var(--hp-slate-100);
	border-radius: 1.5rem;
	padding: 1.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
	text-align: left;
}

.hp-timeline-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: relative;
	padding-left: 1rem;
}

.hp-timeline-list::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 4.5px;
	width: 2px;
	background-color: var(--hp-slate-100);
}

.hp-timeline-item {
	position: relative;
	display: flex;
	gap: 1.25rem;
}

.hp-timeline-dot {
	position: absolute;
	left: -1rem;
	top: 0.375rem;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 3px solid var(--hp-primary);
	z-index: 2;
}

.hp-timeline-text-wrapper {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.hp-timeline-date {
	font-size: 0.6875rem;
	color: var(--hp-slate-400);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hp-timeline-content {
	font-size: 0.8125rem;
	color: var(--hp-slate-650);
	margin-top: 0.25rem;
	line-height: 1.5;
	font-weight: 600;
}

.hp-timeline-content p {
	margin: 0 !important;
}

/* ==========================================================================
   7. Sổ Địa Chỉ Nhận Hàng (Address Book)
   ========================================================================== */
.hp-address-book-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.hp-address-book-header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-bottom: 1px solid var(--hp-slate-100);
	padding-bottom: 1rem;
}

@media (min-width: 640px) {
	.hp-address-book-header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.hp-address-book-title-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-align: left;
}

.hp-address-book-title-main {
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--hp-slate-800);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.025em;
}

.hp-address-book-desc {
	font-size: 0.75rem;
	color: var(--hp-slate-400);
	margin: 0;
	font-weight: 600;
}

.hp-address-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	font-size: 0.75rem;
	font-weight: 900;
	background-color: var(--hp-primary-light);
	color: var(--hp-primary) !important;
	border: 1px solid rgba(0, 158, 227, 0.15);
	border-radius: 0.75rem;
	text-decoration: none !important;
	transition: all 0.2s ease;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.hp-address-add-btn:hover {
	background-color: var(--hp-primary);
	color: #ffffff !important;
	border-color: var(--hp-primary);
	box-shadow: 0 4px 10px rgba(0, 158, 227, 0.15);
}

.hp-address-add-btn svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* Grid layout for cards */
.hp-addresses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.hp-address-card {
	background-color: #ffffff;
	border: 1px solid var(--hp-slate-100);
	border-radius: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	transition: all 0.25s ease;
}

.hp-address-card:hover {
	border-color: var(--hp-slate-200);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04);
}

.hp-address-card.is-default {
	border-color: rgba(0, 158, 227, 0.3);
	box-shadow: 0 4px 10px rgba(0, 158, 227, 0.03);
}

.hp-address-card-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-align: left;
}

.hp-address-card-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.hp-address-card-label-title {
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--hp-slate-800);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hp-address-card-indicator {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--hp-slate-300);
}

.hp-address-card.is-default .hp-address-card-indicator {
	background-color: var(--hp-primary);
}

.hp-address-card-default-badge {
	font-size: 0.625rem;
	font-weight: 800;
	color: var(--hp-primary);
	background-color: var(--hp-primary-light);
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 1px solid rgba(0, 158, 227, 0.1);
}

.hp-address-info-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hp-address-info-item {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.hp-address-info-label {
	font-size: 0.625rem;
	color: var(--hp-slate-400);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hp-address-info-val {
	font-size: 0.8125rem;
	color: var(--hp-slate-650);
	font-weight: 600;
	line-height: 1.4;
}

.hp-address-card-actions {
	background-color: var(--hp-slate-50);
	border-top: 1px solid var(--hp-slate-100);
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hp-address-actions-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hp-address-btn-edit {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--hp-slate-500);
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.hp-address-btn-edit:hover {
	color: var(--hp-primary);
}

.hp-address-btn-delete {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--hp-slate-400);
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.hp-address-btn-delete:hover {
	color: var(--hp-danger);
}

.hp-address-btn-default {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--hp-primary);
	text-decoration: none !important;
	transition: opacity 0.2s ease;
}

.hp-address-btn-default:hover {
	opacity: 0.85;
}

/* ==========================================================================
   8. Form Styling & CRUD Forms
   ========================================================================== */
.hp-form-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.hp-form-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	border-bottom: 1px solid var(--hp-slate-100);
	padding-bottom: 1rem;
}

.hp-form-title {
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--hp-slate-800);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.025em;
	text-align: left;
}

.hp-form-subtitle {
	font-size: 0.75rem;
	color: var(--hp-slate-400);
	font-weight: 600;
}

.hp-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.woocommerce-EditAccountForm.edit-account {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.hp-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
}

@media (min-width: 640px) {
	.hp-form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.875rem;
	}
}

.hp-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

.group\/field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

.hp-form-label {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--hp-slate-650);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	margin: 0 !important;
}

.hp-required-star,
.hp-required {
	color: var(--hp-danger);
	font-weight: 900;
	margin-left: 0.125rem;
}

/* Premium Form Inputs Override */
.hp-form-input,
.hp-form-select,
.hp-form-select option {
	width: 100%;
	height: 2.5rem !important;
	padding: 0 1rem !important;
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 0.5rem !important;
	color: #1e293b !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	outline: none !important;
	box-shadow: none !important;
	transition: all 0.2s ease-in-out !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.hp-form-input[type="date"] {
	line-height: normal !important;
	display: flex;
	align-items: center;
}

.hp-form-input:focus,
.hp-form-select:focus {
	outline: none !important;
	background-color: #ffffff !important;
	border-color: #009EE3 !important;
	box-shadow: 0 0 0 1px #009EE3 !important;
}

.hp-form-input::placeholder {
	color: #94a3b8 !important;
	font-weight: 400 !important;
}

.hp-select-wrapper {
	position: relative;
	width: 100%;
}

.hp-select-wrapper::after {
	content: "" !important;
	position: absolute !important;
	right: 1.25rem !important;
	top: 50% !important;
	width: 0.5rem !important;
	height: 0.5rem !important;
	border-right: 2px solid #94a3b8 !important;
	border-bottom: 2px solid #94a3b8 !important;
	transform: translateY(-50%) rotate(45deg) !important;
	transform-origin: center !important;
	pointer-events: none !important;
	transition: all 0.2s ease-in-out !important;
}

.hp-select-wrapper:focus-within::after {
	border-color: #009EE3 !important;
}

.hp-form-select {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	cursor: pointer;
	padding-right: 3rem !important;
}

html body .hp-select-wrapper .select2-container,
html body .group\/field .select2-container {
	width: 100% !important;
	height: 2.5rem !important;
}

html body .hp-select-wrapper .select2-container--default .select2-selection--single,
html body .group\/field .select2-container--default .select2-selection--single {
	height: 2.5rem !important;
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 0.5rem !important;
	display: flex !important;
	align-items: center !important;
	padding-left: 0.75rem !important;
	outline: none !important;
	transition: all 0.2s ease-in-out !important;
	background-image: none !important;
}

html body .hp-select-wrapper .select2-container--default.select2-container--focus .select2-selection--single,
html body .hp-select-wrapper .select2-container--default.select2-container--open .select2-selection--single,
html body .group\/field .select2-container--default.select2-container--focus .select2-selection--single,
html body .group\/field .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #009EE3 !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 1px #009EE3 !important;
	border-radius: 0.5rem !important; /* Force retain fully rounded corners when open */
}

html body .hp-select-wrapper .select2-container--default .select2-selection--single:focus,
html body .hp-select-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
html body .group\/field .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #1e293b !important;
	font-weight: 400 !important;
}

/* Style Select2 placeholder text color (options containing '-- Chọn') */
html body .hp-select-wrapper .select2-selection__rendered[title^="-- Chọn"],
html body .group\/field .select2-selection__rendered[title^="-- Chọn"] {
	color: #94a3b8 !important;
}

html body .hp-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow,
html body .group\/field .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px !important;
	right: 0.75rem !important;
	background-image: none !important;
}

/* Hide Select2 default solid triangle arrow and all pseudo-element/background arrows */
html body .hp-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b,
html body .group\/field .select2-container--default .select2-selection--single .select2-selection__arrow b,
html body .select2-selection--single::after,
html body .select2-selection--single::before,
html body .select2-selection__arrow::after,
html body .select2-selection__arrow::before,
html body .select2-container::after,
html body .select2-container::before {
	display: none !important;
	content: none !important;
}

/* Style active chevron when select2 is open */
html body .hp-select-wrapper:has(.select2-container--open)::after {
	transform: translateY(-30%) rotate(225deg) !important;
	border-color: #009EE3 !important;
}

/* Select2 Dropdown Options List Panel */
html body .select2-dropdown {
	border: 1px solid #e2e8f0 !important;
	border-radius: 0.5rem !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
	background-color: #ffffff !important;
	z-index: 99999 !important;
	padding: 0.25rem !important;
}

/* TRƯỜNG HỢP 1: Dropdown được append trực tiếp vào body (Default) */
html body > .select2-container--open {
	height: 40px !important; /* Force matching height of the 2.5rem (40px) select box on My Account */
}
html body > .select2-container--open .select2-dropdown--below {
	top: 0 !important;
	margin-top: 40px !important;
}
html body > .select2-container--open .select2-dropdown--above {
	top: 0 !important;
	margin-top: -6px !important;
}

/* TRƯỜNG HỢP 2: Dropdown nested trong wrapper của ô select */
html body .hp-select-wrapper .select2-dropdown--below,
html body .group\/field .select2-dropdown--below {
	top: 100% !important;
	margin-top: 6px !important;
}
html body .hp-select-wrapper .select2-dropdown--above,
html body .group\/field .select2-dropdown--above {
	top: auto !important;
	bottom: 100% !important;
	margin-top: 0 !important;
	margin-bottom: 6px !important;
}

html body .select2-container--default .select2-results__option {
	padding: 0.5rem 0.75rem !important;
	margin: 0 0 2px 0 !important;
	font-size: 0.875rem !important;
	color: #334155 !important;
	font-weight: 500 !important;
	border-radius: 0.375rem !important;
	text-align: left !important;
	transition: all 0.15s ease-in-out !important;
}

html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: #f1f5f9 !important;
	color: #0f172a !important;
}

html body .select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: #e6f4ff !important;
	color: #009EE3 !important;
	font-weight: 600 !important;
}

html body .select2-container--default .select2-search--dropdown {
	padding: 0.5rem !important;
}

html body .select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid #e2e8f0 !important;
	border-radius: 0.375rem !important;
	padding: 0.375rem 0.75rem !important;
	font-size: 0.875rem !important;
	outline: none !important;
}

html body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: #009EE3 !important;
	box-shadow: 0 0 0 1px #009EE3 !important;
}

.hp-form-input.hp-validation-error,
.hp-form-select.hp-validation-error {
	border-color: var(--hp-danger) !important;
	background-color: rgba(239, 68, 68, 0.03) !important;
}

.hp-form-input.hp-validation-error:focus,
.hp-form-select.hp-validation-error:focus {
	box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

.hp-field-error-msg {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hp-danger);
	margin-top: -0.25rem !important;
	margin-bottom: 0 !important;
	text-align: left;
}

.hp-form-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 1rem !important;
	border-top: 1px solid var(--hp-slate-100) !important;
	padding-top: 1.5rem !important;
	margin-top: 1rem !important;
}

.hp-form-actions input[type="hidden"] {
	display: none !important;
}

.hp-form-actions .hp-form-btn-submit,
.hp-form-actions .hp-form-btn-cancel {
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
	line-height: 1 !important;
	position: relative !important;
	top: 0 !important;
	transform: none !important;
	float: none !important;
}

.hp-form-actions .hp-form-btn-submit {
	padding-left: 2rem !important;
	padding-right: 2rem !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 900 !important;
	background: var(--hp-primary) !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
	border-radius: 9999px !important;
	box-shadow: 0 4px 12px var(--hp-primary-glow) !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.hp-form-actions .hp-form-btn-submit:hover {
	background: var(--hp-primary-hover) !important;
	box-shadow: 0 8px 16px var(--hp-primary-glow) !important;
	transform: translateY(-2px) !important;
}

.hp-form-actions .hp-form-btn-submit:active {
	transform: translateY(-2px) scale(0.97) !important;
}

.hp-form-actions .hp-form-btn-cancel {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 900 !important;
	background-color: var(--hp-slate-50) !important;
	color: var(--hp-slate-500) !important;
	border: 1px solid var(--hp-slate-200) !important;
	border-radius: 9999px !important;
	text-decoration: none !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.hp-form-actions .hp-form-btn-cancel:hover {
	background-color: var(--hp-slate-100) !important;
	color: var(--hp-slate-800) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.hp-form-actions .hp-form-btn-cancel:active {
	transform: translateY(-2px) scale(0.97) !important;
}

/* ==========================================================================
   9. Ví Voucher (Voucher Wallet)
   ========================================================================== */
.hp-voucher-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.hp-voucher-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--hp-slate-100);
	padding-bottom: 1rem;
}

.hp-voucher-title-main {
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--hp-slate-800);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.025em;
}

.hp-voucher-badge {
	padding: 0.375rem 0.75rem;
	background-color: var(--hp-primary-light);
	border: 1px solid rgba(0, 158, 227, 0.15);
	color: var(--hp-primary);
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap !important;
}

.hp-voucher-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.hp-voucher-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hp-voucher-card:hover {
	box-shadow: 0 10px 25px -5px rgba(0, 95, 163, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
	transform: translateY(-2px) !important;
}

.hp-voucher-empty-state {
	text-align: center;
	padding: 3rem 1.5rem;
	background-color: rgba(248, 250, 252, 0.4);
	border: 2px dashed var(--hp-slate-200);
	border-radius: 1rem;
	max-width: 400px;
	margin: 2rem auto;
}

.hp-voucher-empty-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1rem;
	background-color: var(--hp-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hp-primary);
	margin: 0 auto 1.25rem auto;
}

.hp-voucher-empty-icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.hp-voucher-empty-title {
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--hp-slate-800);
	text-transform: uppercase;
	margin: 0;
}

.hp-voucher-empty-desc {
	font-size: 0.75rem;
	color: var(--hp-slate-500);
	margin: 0.375rem 0 0 0;
	font-weight: 600;
	line-height: 1.4;
}

/* ==========================================================================
   10. WooCommerce Login & Registration Page Override
   ========================================================================== */
/* Hide Page Title on Account / Login Page */
.woocommerce-account .page-title,
.woocommerce-account .page-header,
.woocommerce-account .page-title-inner,
.woocommerce-account .page-title-bar {
	display: none !important;
}

.hp-login-container {
	max-width: 500px;
	margin: 1.5rem auto;
	padding: 0 1rem;
}

@media (max-width: 480px) {
	.hp-login-container {
		margin: 1.5rem auto;
		padding: 0 0.5rem;
	}
}

.hp-login-card {
	background-color: #ffffff;
	border-radius: 2rem;
	border: 1px solid var(--hp-slate-100);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
	padding: 1.75rem;
}

@media (max-width: 480px) {
	.hp-login-card {
		padding: 1.25rem;
	}
}

.hp-login-logo-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.25rem;
}

.hp-login-logo-link {
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--hp-primary) !important;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	letter-spacing: 0.05em;
	transition: opacity 0.2s ease;
}

.hp-login-logo-link:hover {
	opacity: 0.9;
}

.hp-login-logo-icon {
	font-weight: 800;
	background-color: var(--hp-primary);
	color: #ffffff;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	box-shadow: 0 2px 4px rgba(0, 158, 227, 0.2);
}

.hp-login-logo-text {
	font-weight: 900;
	letter-spacing: 0.05em;
}

/* Tabs Switcher */
.hp-login-tabs-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.hp-login-tabs-pill {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
	border: none;
	border-bottom: 2px solid var(--hp-slate-100);
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 320px;
	box-shadow: none;
}

.hp-login-tab-btn {
	flex: 1;
	padding: 0.75rem 1rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 800;
	border-radius: 0;
	border: none;
	background-color: transparent;
	color: var(--hp-slate-500);
	cursor: pointer;
	outline: none;
	transition: all 0.25s ease;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap !important;
}

.hp-login-tab-btn:hover {
	color: var(--hp-slate-800);
}

.hp-login-tab-btn.is-active {
	background-color: transparent;
	color: var(--hp-primary);
	border-bottom: 2px solid var(--hp-primary);
	box-shadow: none;
}

/* Switch Form Visibility */
.hp-login-form-card.is-hidden {
	display: none;
}
.hp-login-form-card.is-visible {
	display: block;
}

.hp-login-card-header {
	margin-bottom: 1.5rem;
	text-align: center;
}

.hp-login-card-title {
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--hp-slate-800);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.025em;
}

.hp-login-card-desc {
	font-size: 0.8125rem;
	color: var(--hp-slate-400);
	font-weight: 600;
	margin: 0.375rem 0 0 0;
}

.hp-login-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Password Eye Toggle */
.hp-password-wrapper {
	position: relative;
	margin: 0 !important;
}

.hp-password-wrapper .hp-form-input {
	padding-right: 3rem !important;
}

.hp-password-toggle {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--hp-slate-400);
	cursor: pointer;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	z-index: 10;
	transition: color 0.2s ease;
}

.hp-password-toggle:hover {
	color: var(--hp-slate-650);
}

.hp-icon-eye {
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
}

/* Form Options (Remember me & Forgot Password) */
.hp-form-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0.5rem 0;
}

.hp-rememberme-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--hp-slate-500);
	cursor: pointer;
	margin: 0;
}

.hp-custom-checkbox {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	border: 2px solid var(--hp-slate-300) !important;
	border-radius: 4px !important;
	outline: none !important;
	cursor: pointer !important;
	background-color: #ffffff !important;
	display: inline-grid !important;
	place-content: center !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
}

.hp-rememberme-label:hover .hp-custom-checkbox {
	border-color: var(--hp-primary) !important;
}

.hp-custom-checkbox:checked {
	background-color: var(--hp-primary) !important;
	border-color: var(--hp-primary) !important;
}

.hp-custom-checkbox:checked::before {
	content: "" !important;
	width: 8px !important;
	height: 4px !important;
	border-left: 2px solid #ffffff !important;
	border-bottom: 2px solid #ffffff !important;
	transform: rotate(-45deg) translate(0.5px, -0.5px) !important;
}

/* Edit Address Checkbox Wrapper and Label */
.hp-checkbox-field {
	margin: 1.25rem 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.hp-checkbox-label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.625rem !important;
	font-size: 0.875rem !important;
	color: var(--hp-slate-800) !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	margin: 0 !important;
	margin-right: auto !important; /* Force align left in flex parent */
	user-select: none !important;
	text-align: left !important;
}

.hp-checkbox-label span {
	line-height: 1 !important;
	display: inline-block !important;
}

.hp-checkbox-label:hover .hp-custom-checkbox {
	border-color: var(--hp-primary) !important;
}

.hp-lostpassword-link {
	color: var(--hp-primary);
	text-decoration: none !important;
}

.hp-lostpassword-link:hover {
	text-decoration: underline !important;
}

/* Large Submit Buttons */
.hp-submit-btn {
	width: 100%;
	height: 52px !important;
	background: var(--hp-primary) !important;
	color: #ffffff !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 900 !important;
	border-radius: 9999px !important;
	border: none !important;
	box-shadow: 0 4px 12px var(--hp-primary-glow) !important;
	cursor: pointer !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	line-height: 52px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.hp-submit-btn:hover {
	background: var(--hp-primary-hover) !important;
	box-shadow: 0 8px 16px var(--hp-primary-glow) !important;
	transform: translateY(-2px) !important;
}

.hp-submit-btn:active {
	transform: translateY(-2px) scale(0.97) !important;
}

/* Radio Button Groups inside Forms */
.hp-gender-radio-group {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 0.25rem;
}

.hp-gender-radio-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hp-slate-500);
	cursor: pointer;
	margin: 0;
}

.hp-gender-radio-label:hover {
	color: var(--hp-slate-800);
}

.hp-gender-radio {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--hp-slate-300);
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	background-color: #ffffff;
	display: inline-grid;
	place-content: center;
	transition: all 0.2s ease;
	margin: 0;
}

.hp-gender-radio-label:hover .hp-gender-radio {
	border-color: var(--hp-primary);
}

.hp-gender-radio:checked {
	border-color: var(--hp-primary);
}

.hp-gender-radio:checked::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--hp-primary);
}

/* Social Login */
.hp-social-login-section {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--hp-slate-100);
	text-align: center;
}

.hp-social-login-title {
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--hp-slate-400);
	letter-spacing: 0.1em;
	margin-bottom: 0.75rem;
}

.hp-google-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 48px;
	background-color: #ffffff;
	border: 1px solid var(--hp-slate-200);
	border-radius: 9999px !important;
	color: var(--hp-slate-650);
	font-family: 'Inter', sans-serif !important;
	font-size: 0.875rem;
	font-weight: 900 !important;
	text-decoration: none !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.hp-google-login-btn:hover {
	background-color: var(--hp-slate-50);
	border-color: var(--hp-slate-300);
	color: var(--hp-slate-800);
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.hp-google-login-btn:active {
	transform: translateY(-2px) scale(0.97) !important;
}

.hp-social-login-disclaimer {
	font-size: 0.6875rem;
	color: var(--hp-slate-400);
	font-weight: 600;
	margin-top: 0.75rem;
	margin-bottom: 0;
	line-height: 1.4;
}

/* ==========================================================================
   11. Translucent Glassmorphism Notices
   ========================================================================== */
.hp-notice-wrapper {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: 1rem;
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-width: 1px;
	border-style: solid;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all 0.3s ease;
	text-align: left;
}

/* Success Alert (woocommerce-message) */
.hp-glass-success {
	background-color: rgba(236, 253, 245, 0.85);
	border-color: rgba(167, 243, 208, 0.5);
	color: #065f46;
}
.hp-notice-icon-success {
	color: #10b981;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}
.hp-notice-icon-success svg {
	width: 100%;
	height: 100%;
}

/* Error Alert (woocommerce-error) */
.hp-glass-error {
	background-color: rgba(254, 242, 242, 0.85);
	border-color: rgba(254, 226, 226, 0.5);
	color: #991b1b;
	list-style: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.hp-notice-icon-error {
	color: #ef4444;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}
.hp-notice-icon-error svg {
	width: 100%;
	height: 100%;
}

/* Info Alert (woocommerce-info) */
.hp-glass-info {
	background-color: rgba(240, 249, 255, 0.85);
	border-color: rgba(186, 230, 253, 0.5);
	color: #075985;
}
.hp-notice-icon-info {
	color: var(--hp-primary);
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}
.hp-notice-icon-info svg {
	width: 100%;
	height: 100%;
}

.hp-notice-wrapper ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.hp-notice-wrapper li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Animations helper */
@keyframes hp-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 158, 227, 0.4);
	}
	70% {
		box-shadow: 0 0 0 6px rgba(0, 158, 227, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 158, 227, 0);
	}
}

.animate-pulse {
	animation: hp-pulse 2s infinite;
}

/* ==========================================================================
   12. Customer Details Card (Normal Style)
   ========================================================================== */
.hp-customer-details-section {
	margin-bottom: 1.25rem !important;
}

/* Grid Layout for Columns */
.hp-addresses-columns-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (min-width: 768px) {
	.hp-addresses-columns-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Float Clearances Resets for Flatsome grid compatibility */
.hp-addresses-columns-grid::before,
.hp-addresses-columns-grid::after {
	display: none !important;
	content: none !important;
}

.hp-address-card-wrap {
	background: #ffffff;
	border: 1px solid var(--hp-slate-200);
	border-radius: 0.5rem;
	padding: 1.5rem !important;
	position: relative;
	overflow: hidden;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

.hp-address-card-single {
	max-width: none !important;
	margin: 0 !important;
}

/* Card Title styling */
.hp-address-card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--hp-slate-800) !important;
	margin-top: 0 !important;
	margin-bottom: 1rem !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 1px solid var(--hp-slate-100) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.025em;
}

.hp-address-title-icon {
	color: var(--hp-slate-500);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hp-address-title-icon svg {
	width: 1.15rem !important;
	height: 1.15rem !important;
}

/* Content & Address fields spacing */
.hp-address-card-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hp-address-field {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.hp-field-icon {
	color: var(--hp-slate-400);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.25rem;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.hp-field-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.hp-address-val {
	font-style: normal !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	color: var(--hp-slate-800) !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
}

/* Label details */
.hp-address-val .hp-label {
	font-weight: 700;
	color: var(--hp-slate-500);
	margin-right: 0.25rem;
}

.hp-address-text .hp-address-val {
	font-weight: 500;
}

/* Specific details colors */
.woocommerce-customer-details--phone {
	color: var(--hp-slate-800) !important;
}

.woocommerce-customer-details--email {
	color: var(--hp-slate-800) !important;
}

.woocommerce-customer-details--shipping-phone {
	color: var(--hp-slate-800) !important;
	font-weight: 600;
}

/* Custom Order Details Table Typography Simplification */
.woocommerce-table--order-details th {
	text-transform: none !important;
	font-weight: 600 !important;
	color: var(--hp-slate-500) !important;
	font-size: 0.875rem !important;
	letter-spacing: normal !important;
}
.woocommerce-table--order-details th.woocommerce-table__product-name,
.woocommerce-table--order-details th.woocommerce-table__product-table,
.woocommerce-table--order-details th.order-actions--heading {
	color: var(--hp-slate-800) !important;
	font-weight: 700 !important;
}
.woocommerce-table--order-details td {
	font-size: 0.875rem !important;
	color: var(--hp-slate-800) !important;
}
.woocommerce-table--order-details td strong {
	font-weight: 700 !important;
	color: var(--hp-slate-900) !important;
}

/* Order Actions Buttons Unification */
.hp-order-table-card .woocommerce-table--order-details .button.order-actions-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.5rem 1.25rem !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 850 !important;
	border-radius: 9999px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	height: 32px !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	transition: all 0.3s ease !important;
	margin: 0 4px !important;
}

/* Pay Button (Filled Primary) */
.hp-order-table-card .woocommerce-table--order-details .button.pay,
.hp-order-table-card .woocommerce-table--order-details a.button.pay {
	background-color: var(--hp-primary, #009EE3) !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
	box-shadow: 0 2px 6px var(--hp-primary-glow, rgba(0, 158, 227, 0.2)) !important;
}

.hp-order-table-card .woocommerce-table--order-details .button.pay:hover,
.hp-order-table-card .woocommerce-table--order-details a.button.pay:hover {
	background-color: var(--hp-primary-hover, #0082ba) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px var(--hp-primary-glow, rgba(0, 158, 227, 0.3)) !important;
}

/* Cancel Button (Muted Secondary) */
.hp-order-table-card .woocommerce-table--order-details .button.cancel,
.hp-order-table-card .woocommerce-table--order-details a.button.cancel {
	background-color: var(--hp-slate-50, #f8fafc) !important;
	color: var(--hp-slate-650, #475569) !important;
	border: 1px solid var(--hp-slate-200, #e2e8f0) !important;
	box-shadow: none !important;
}

.hp-order-table-card .woocommerce-table--order-details .button.cancel:hover,
.hp-order-table-card .woocommerce-table--order-details a.button.cancel:hover {
	background-color: var(--hp-slate-100, #f1f5f9) !important;
	color: var(--hp-slate-850, #1e293b) !important;
	border-color: var(--hp-slate-300, #cbd5e1) !important;
	transform: translateY(-1px) !important;
}