/* 4Kids Account UI */
.woocommerce-account {
	--fkau-pink: #f379a7;
	--fkau-pink-soft: #fde8f0;
	--fkau-blue: #4a90e2;
	--fkau-blue-soft: #e8f2fd;
	--fkau-green: #2fa866;
	--fkau-green-soft: #e6f6ec;
	--fkau-navy: #0a1039;
	--fkau-text: #4b5563;
	--fkau-muted: #8a8fa3;
	--fkau-line: #eceef3;
	--fkau-card: #ffffff;
	--fkau-radius: 16px;
	--fkau-shadow: 0 6px 24px rgba(10, 16, 57, 0.06);
	--fkau-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	--fkau-i-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
	--fkau-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 21h16'/%3E%3C/svg%3E");
	--fkau-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
	--fkau-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
	--fkau-i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
	--fkau-i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
	--fkau-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	--fkau-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--fkau-i-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5' fill='black' stroke='none'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.woocommerce-account.logged-in .page-content-area { background: #f6f7fb; }

.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	font-family: "Rubik", sans-serif;
}
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after { display: none; }

.woocommerce-account .fkau-sidebar,
.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--fkau-card);
	border-radius: var(--fkau-radius);
	box-shadow: var(--fkau-shadow);
}

.woocommerce-account .fkau-sidebar { padding: 24px 16px; position: sticky; top: 24px; }

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content { padding: 32px; min-width: 0; color: var(--fkau-text); }

/* ---------- Profile ---------- */
.fkau-profile { padding: 0 8px 18px; }
.fkau-avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--fkau-pink-soft); color: var(--fkau-pink);
	font: 600 22px/1 "Rubik", sans-serif; letter-spacing: .5px;
}
.fkau-hello { margin: 14px 0 2px; font: 600 18px/1.3 "Rubik", sans-serif; color: var(--fkau-navy); }
.fkau-sub { margin: 0; font-size: 13px; color: var(--fkau-muted); }

/* ---------- Navigation ---------- */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0 0 4px; padding: 0; border: 0; }
.woocommerce-MyAccount-navigation li a {
	display: flex; align-items: center; gap: 14px;
	padding: 11px 14px; border-radius: 10px;
	color: var(--fkau-navy); font-size: 15px; font-weight: 400;
	text-decoration: none; transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li a::before {
	content: ""; flex: 0 0 20px; width: 20px; height: 20px;
	background: currentColor;
	-webkit-mask: var(--fkau-i-user) center / contain no-repeat;
	mask: var(--fkau-i-user) center / contain no-repeat;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before { -webkit-mask-image: var(--fkau-i-home); mask-image: var(--fkau-i-home); }
.woocommerce-MyAccount-navigation-link--orders a::before { -webkit-mask-image: var(--fkau-i-orders); mask-image: var(--fkau-i-orders); }
.woocommerce-MyAccount-navigation-link--downloads a::before { -webkit-mask-image: var(--fkau-i-download); mask-image: var(--fkau-i-download); }
.woocommerce-MyAccount-navigation-link--edit-address a::before { -webkit-mask-image: var(--fkau-i-pin); mask-image: var(--fkau-i-pin); }
.woocommerce-MyAccount-navigation-link--payment-methods a::before { -webkit-mask-image: var(--fkau-i-card); mask-image: var(--fkau-i-card); }
.woocommerce-MyAccount-navigation-link--edit-account a::before { -webkit-mask-image: var(--fkau-i-user); mask-image: var(--fkau-i-user); }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { -webkit-mask-image: var(--fkau-i-logout); mask-image: var(--fkau-i-logout); }

.woocommerce-MyAccount-navigation li a:hover { background: #f7f8fb; color: var(--fkau-pink); }
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--fkau-pink-soft); color: var(--fkau-pink); font-weight: 500;
}

/* ---------- Dashboard ---------- */
.fkau-title {
	margin: 0 0 10px; font-family: "Fredoka One", "Rubik", sans-serif;
	font-size: 32px; font-weight: 400; color: var(--fkau-navy); line-height: 1.2;
}
.fkau-intro { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--fkau-text); }
.fkau-intro a, .fkau-link-arrow { color: var(--fkau-pink); text-decoration: none; }
.fkau-intro a:hover { text-decoration: underline; }

.fkau-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.fkau-stat {
	display: flex; align-items: center; gap: 16px;
	padding: 20px; border-radius: 14px; text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.fkau-stat:hover { transform: translateY(-2px); box-shadow: var(--fkau-shadow); }
.fkau-stat--pink { background: var(--fkau-pink-soft); --fkau-accent: var(--fkau-pink); }
.fkau-stat--blue { background: var(--fkau-blue-soft); --fkau-accent: var(--fkau-blue); }
.fkau-stat--green { background: var(--fkau-green-soft); --fkau-accent: var(--fkau-green); }

.fkau-stat-icon {
	flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255, 255, 255, .7); position: relative;
}
.fkau-stat-icon::after {
	content: ""; position: absolute; inset: 12px; background: var(--fkau-accent);
	-webkit-mask: var(--fkau-i-bag) center / contain no-repeat;
	mask: var(--fkau-i-bag) center / contain no-repeat;
}
.fkau-icon-download::after { -webkit-mask-image: var(--fkau-i-download); mask-image: var(--fkau-i-download); }
.fkau-icon-pin::after { -webkit-mask-image: var(--fkau-i-pin); mask-image: var(--fkau-i-pin); }

.fkau-stat-text { display: flex; flex-direction: column; min-width: 0; }
.fkau-stat-label { font-size: 14px; color: var(--fkau-navy); }
.fkau-stat-value { font: 600 28px/1.2 "Rubik", sans-serif; color: var(--fkau-navy); }

/* ---------- Recent orders ---------- */
.fkau-recent-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding-top: 20px; border-top: 1px solid var(--fkau-line); margin-bottom: 14px;
}
.fkau-recent-head h3 { margin: 0; font: 600 20px/1.3 "Rubik", sans-serif; color: var(--fkau-navy); }

.fkau-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.fkau-link-arrow::after {
	content: ""; width: 14px; height: 14px; background: currentColor;
	-webkit-mask: var(--fkau-i-arrow) center / contain no-repeat;
	mask: var(--fkau-i-arrow) center / contain no-repeat;
	transition: transform .15s;
}
.fkau-link-arrow:hover::after { transform: translateX(3px); }

.fkau-table-wrap { border: 1px solid var(--fkau-line); border-radius: 12px; overflow-x: auto; }
.woocommerce .fkau-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; }
.fkau-table th {
	background: #f8f9fb; color: var(--fkau-navy); font-weight: 500; text-align: left;
	padding: 12px 16px; border: 0; border-bottom: 1px solid var(--fkau-line);
}
.fkau-table td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--fkau-line); color: var(--fkau-navy); vertical-align: middle; }
.fkau-table tbody tr:last-child td { border-bottom: 0; }
.fkau-table .woocommerce-Price-amount { font-weight: 400; }
.fkau-order-no { color: var(--fkau-pink); font-weight: 500; text-decoration: none; }
.fkau-col-action { text-align: right; }

.fkau-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
	background: #f1f2f6; color: #5b6070; white-space: nowrap;
}
.fkau-badge::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.fkau-badge--completed { background: #e3f6e9; color: #23914f; }
.fkau-badge--processing { background: #e5f0fd; color: #2f7ad6; }
.fkau-badge--on-hold, .fkau-badge--pending { background: #fff1dc; color: #c77700; }
.fkau-badge--cancelled, .fkau-badge--failed { background: #fde7e7; color: #d33c3c; }
.fkau-badge--refunded { background: #efe9fd; color: #6c4bd1; }

.fkau-empty { padding: 28px; text-align: center; border: 1px dashed var(--fkau-line); border-radius: 12px; }
.fkau-empty p { margin: 0 0 14px; }

/* ---------- Other account pages ---------- */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--fkau-navy); }

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table--order-downloads {
	border: 1px solid var(--fkau-line); border-radius: 12px; border-collapse: separate; overflow: hidden; font-size: 14px;
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-table--order-downloads th { background: #f8f9fb; color: var(--fkau-navy); font-weight: 500; padding: 12px 16px; }
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-table--order-downloads td { padding: 14px 16px; border-top: 1px solid var(--fkau-line); }

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	background: #f8f9fb; border-radius: 14px; padding: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
	border: 1px solid #dfe2ea; border-radius: 10px; padding: 10px 14px; background: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	border-color: var(--fkau-pink); outline: none; box-shadow: 0 0 0 3px rgba(243, 121, 167, .2);
}

.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
	background: var(--fkau-pink); color: #fff; border-radius: 999px; padding: 10px 22px; font-weight: 500; border: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover { background: #e9608f; color: #fff; }

/* Keyboard focus */
.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible,
.woocommerce-account .fkau-stat:focus-visible,
.woocommerce-account .fkau-link-arrow:focus-visible,
.woocommerce-account .fkau-intro a:focus-visible {
	outline: 2px solid var(--fkau-pink); outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: 20px; }
	.woocommerce-account .fkau-sidebar { position: static; }
	.fkau-profile { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
	.fkau-avatar { grid-row: span 2; width: 52px; height: 52px; font-size: 18px; }
	.fkau-hello { margin: 0; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 6px; }
	.woocommerce-MyAccount-navigation li { margin: 0; }
	.woocommerce-MyAccount-navigation li a { padding: 8px 12px; font-size: 14px; gap: 8px; }
}
@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-content { padding: 20px 16px; }
	.fkau-title { font-size: 26px; }
	.fkau-stats { grid-template-columns: 1fr; gap: 12px; }
	.fkau-table thead { display: none; }
	.fkau-table, .fkau-table tbody, .fkau-table tr, .fkau-table td { display: block; width: 100%; }
	.fkau-table tr { padding: 12px 16px; border-bottom: 1px solid var(--fkau-line); }
	.fkau-table tbody tr:last-child { border-bottom: 0; }
	.fkau-table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; }
	.fkau-table td[data-title]::before { content: attr(data-title); color: var(--fkau-muted); }
	.fkau-col-action { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
	.fkau-stat, .fkau-link-arrow::after { transition: none; }
	.fkau-stat:hover { transform: none; }
}
