/* ==========================================================================
   Kidoclassic Mall, My Account
   --------------------------------------------------------------------------
   Built as a profile, not a settings panel: a warm greeting with a live points
   chip, a horizontal tab bar, then full-width content with designed dashboard
   cards and a rewards panel. There is no sidebar; the navigation is a flex row
   of pill tabs that scroll under the thumb on a phone and centre on desktop, so
   it can never collapse into a narrow column the way the old sidebar did.
   Everything inherits the tokens in global.css. Horizontal gutters come from
   the global container fix; this file owns the layout and the WooCommerce
   defaults inside it.
   ========================================================================== */

.kido-account { padding-top: 4px; }

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

.kido-account__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 28px;
	flex-wrap: wrap;
	margin: 0 0 26px;
}
.kido-account__head-text { min-width: 0; }
.kido-account__title {
	font-family: var(--kido-display);
	font-weight: 900;
	font-size: clamp(30px, 4.4vw, 48px);
	margin: 6px 0 8px;
}
.kido-account__sub {
	margin: 0;
	max-width: 54ch;
	color: var(--kido-ink-2);
	font-size: 15.5px;
}
/* The points chip sits to the right of the greeting; the plugin's own widget
   is already themed in plugin-overrides.css, so we only seat it here. */
.kido-account__head-chip { flex-shrink: 0; }
.kido-account__head-chip .kc-points-balance { margin: 0; }

/* Tab bar navigation ------------------------------------------------------ */
/* Kept on .woocommerce-MyAccount-navigation for compatibility, but we override
   the parent theme's float/width hard so it is always a full-width horizontal
   bar, then scroll it horizontally if the tabs do not fit. */

.woocommerce-MyAccount-navigation.kido-account-tabs {
	float: none !important;
	width: 100% !important;
	margin: 0 0 26px !important;
	padding: 6px;
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-pill);
	box-shadow: var(--kido-shadow-xs);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.kido-account-tabs::-webkit-scrollbar { display: none; }
.kido-account-tabs ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: max-content;
}
.kido-account-tabs li {
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
}
.kido-account-tabs li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding: 10px 18px;
	border-radius: var(--kido-r-pill);
	color: var(--kido-ink-2);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.2;
	transition: background var(--kido-t-fast), color var(--kido-t-fast), box-shadow var(--kido-t-fast);
}
.kido-account-tabs li a:hover {
	background: var(--kido-magenta-tint);
	color: var(--kido-magenta-deeper);
}
/* Icon and label share one optical baseline: the icon is a fixed 18px box that
   never stretches the row, and its svg is block-level so it sits centred. */
.kido-account-tab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--kido-magenta);
	transition: color var(--kido-t-fast);
}
.kido-account-tab__icon svg { display: block; width: 18px; height: 18px; }
.kido-account-tab__label { display: inline-block; line-height: 1.2; }
.kido-account-tabs li.is-active a {
	background: var(--kido-magenta);
	color: #fff;
	box-shadow: var(--kido-shadow-sm);
}
.kido-account-tabs li.is-active a:hover { color: #fff; }
.kido-account-tabs li.is-active a .kido-account-tab__icon { color: #fff; }
/* Log out reads as a quieter action, nudged to the end with a soft divider. */
.kido-account-tabs li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-left: auto !important;
}
.kido-account-tabs li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--kido-muted); }
.kido-account-tabs li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: var(--kido-surface-2);
	color: var(--kido-crimson);
}

/* Content area ------------------------------------------------------------ */

.woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	min-width: 0;
}
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content a:not(.kido-btn):not(.kido-account-card) { color: var(--kido-magenta); }

/* Dashboard --------------------------------------------------------------- */

.kido-account-dash__greeting {
	font-size: 17px;
	color: var(--kido-ink-2);
	margin: 0 0 22px;
}
.kido-account-dash__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 12px;
}
.kido-account-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 20px;
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-md);
	box-shadow: var(--kido-shadow-xs);
	color: var(--kido-ink) !important;
	transition: transform var(--kido-t), box-shadow var(--kido-t), border-color var(--kido-t);
}
.kido-account-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--kido-shadow-md);
	border-color: var(--kido-border-strong);
}
.kido-account-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 10px;
	border-radius: var(--kido-r-md);
	background: var(--kido-magenta-wash);
	color: var(--kido-magenta);
}
.kido-account-card strong { font-family: var(--kido-display); font-size: 18px; }
.kido-account-card span { font-size: 13.5px; color: var(--kido-muted); line-height: 1.5; }

.kido-account-dash__logout {
	margin: 26px 0 0;
	font-size: 14px;
	color: var(--kido-muted);
}

/* Rewards panel ----------------------------------------------------------- */

.kido-account-rewards {
	margin-top: 28px;
	padding: 26px;
	border-radius: var(--kido-r-lg);
	background:
		radial-gradient(120% 140% at 100% 0%, var(--kido-pink-soft) 0%, transparent 55%),
		var(--kido-surface);
	border: 1px solid var(--kido-border);
	box-shadow: var(--kido-shadow-xs);
}
.kido-account-rewards__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.kido-account-rewards__head h3 { font-family: var(--kido-display); font-size: 22px; margin: 4px 0 6px; }
.kido-account-rewards__head p { margin: 0; max-width: 46ch; color: var(--kido-ink-2); font-size: 14.5px; }
.kido-account-rewards__balance {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.kido-account-rewards__history { margin-top: 24px; }
.kido-account-rewards__history h4 {
	font-family: var(--kido-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kido-muted);
	margin: 0 0 12px;
}

/* Dashboard extras: wishlist, your points, recently viewed --------------- */

.kido-account-extras {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 28px;
}
/* The points panel leads the row and spans both columns. */
.kido-account-panel--points { grid-column: 1 / -1; order: -1; }

.kido-account-panel {
	padding: 24px;
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-lg);
	box-shadow: var(--kido-shadow-xs);
}
.kido-account-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.kido-account-panel__head h3 {
	font-family: var(--kido-display);
	font-size: 20px;
	margin: 0;
}
.kido-account-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: var(--kido-r-md);
	background: var(--kido-magenta-wash);
	color: var(--kido-magenta);
}
.kido-account-panel__empty p {
	color: var(--kido-ink-2);
	font-size: 14.5px;
	margin: 0 0 16px;
	max-width: 48ch;
}

/* Your points: the warm rewards gradient, balance large and prominent. */
.kido-account-panel--points {
	background:
		radial-gradient(120% 160% at 100% 0%, var(--kido-pink-soft) 0%, transparent 55%),
		var(--kido-surface);
}
.kido-points-display {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.kido-points-display__number {
	font-family: var(--kido-display);
	font-weight: 900;
	font-size: clamp(42px, 7vw, 58px);
	line-height: 1;
	color: var(--kido-magenta-deeper);
}
.kido-points-display__unit {
	font-size: 15px;
	font-weight: 600;
	color: var(--kido-magenta);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.kido-points-display__worth {
	margin: 12px 0 0;
	color: var(--kido-ink-2);
	font-size: 15px;
}
.kido-points-display__worth strong { color: var(--kido-ink); }

/* History disclosure */
.kido-points-history-toggle {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--kido-border);
}
.kido-points-history-toggle summary {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--kido-magenta);
	list-style: none;
}
.kido-points-history-toggle summary::-webkit-details-marker { display: none; }
.kido-points-history-toggle summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--kido-t-fast);
}
.kido-points-history-toggle[open] summary::after { transform: rotate(-135deg); }
.kido-points-history-toggle__body { margin-top: 16px; }

/* Recently viewed mini grid */
.kido-recent-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.kido-recent-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--kido-ink) !important;
}
.kido-recent-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--kido-r-sm);
	background: var(--kido-surface-2);
	aspect-ratio: 1 / 1;
}
.kido-recent-card__media img { width: 100%; height: 100%; object-fit: cover; }
.kido-recent-card__name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kido-recent-card__price,
.kido-recent-card__price .price { font-size: 14px; font-weight: 700; color: var(--kido-magenta-deeper); }
.kido-recent-card:hover .kido-recent-card__name { color: var(--kido-magenta); }

/* Orders table ------------------------------------------------------------ */

.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-md);
	overflow: hidden;
}
.woocommerce-MyAccount-content table.shop_table th {
	padding: 14px 16px;
	background: var(--kido-surface-2);
	font-family: var(--kido-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kido-ink-2);
	text-align: left;
	border: none;
}
.woocommerce-MyAccount-content table.shop_table td {
	padding: 16px;
	border-top: 1px solid var(--kido-border);
	font-size: 14.5px;
	vertical-align: middle;
}
.woocommerce-MyAccount-content table.shop_table .button {
	padding: 9px 16px !important;
	background: var(--kido-magenta) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--kido-r-pill) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}
.woocommerce-MyAccount-content table.shop_table .button.view {
	background: var(--kido-surface-2) !important;
	color: var(--kido-magenta-deeper) !important;
}

/* Addresses --------------------------------------------------------------- */

.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 8px;
}
.woocommerce-MyAccount-content .woocommerce-Address {
	padding: 22px;
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-md);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	font-family: var(--kido-display);
	font-size: 19px;
	margin: 0 0 12px;
}
.woocommerce-MyAccount-content address {
	font-style: normal;
	color: var(--kido-ink-2);
	line-height: 1.7;
	font-size: 14.5px;
}

/* Forms (login, register, edit account/address) --------------------------- */

.woocommerce-MyAccount-content form .woocommerce-form-row,
.woocommerce-MyAccount-content .form-row,
.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
	margin: 0 0 16px;
	padding: 0;
}
.woocommerce-account label,
.woocommerce-MyAccount-content label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--kido-ink);
}
.woocommerce-account .required { color: var(--kido-magenta); border: none; }
.woocommerce-account input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select,
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select {
	width: 100%;
	min-height: 50px;
	padding: 13px 15px;
	border: 1.5px solid var(--kido-border-strong);
	border-radius: var(--kido-r-sm);
	background: var(--kido-bg);
	font-family: var(--kido-body);
	font-size: 15px;
	color: var(--kido-ink);
	transition: border-color var(--kido-t-fast), box-shadow var(--kido-t-fast), background var(--kido-t-fast);
}
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus {
	outline: none;
	background: var(--kido-surface);
	border-color: var(--kido-magenta);
	box-shadow: 0 0 0 3px var(--kido-magenta-wash);
}
.woocommerce-account .woocommerce-form__label-for-checkbox,
.woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: var(--kido-ink-2);
}
.woocommerce-account button.button,
.woocommerce-account .woocommerce-Button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 28px !important;
	background: var(--kido-magenta) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--kido-r-pill) !important;
	font-family: var(--kido-body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background var(--kido-t-fast) !important;
}
.woocommerce-account button.button:hover,
.woocommerce-MyAccount-content button.button:hover { background: var(--kido-magenta-deep) !important; }

/* Login + register, two columns ------------------------------------------ */

.woocommerce-account:not(.logged-in) .u-columns,
.woocommerce-account .woocommerce > .u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	padding: clamp(24px, 3vw, 34px);
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-lg);
	box-shadow: var(--kido-shadow-xs);
}
.woocommerce-account .col-1 > h2,
.woocommerce-account .col-2 > h2 {
	font-family: var(--kido-display);
	font-size: 24px;
	margin: 0 0 6px;
}
.woocommerce-account .col-2 { background: var(--kido-surface-2); }
.woocommerce-account .woocommerce-form-login__rememberme { margin: 4px 0 16px; }
.woocommerce-account .lost_password { margin-top: 14px; font-size: 14px; }
.kido-account__head--login { text-align: left; }

/* Notices inside the account keep the global brand styling. */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info { margin-bottom: 20px !important; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 860px) {
	.kido-account-dash__cards { grid-template-columns: 1fr; }
	.kido-account-rewards__head { flex-direction: column; align-items: flex-start; }
	.kido-account-extras { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	/* Recently viewed steps down to two across so cards stay tappable. */
	.kido-recent-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	/* Tabs scroll horizontally, so the greeting and chip stack cleanly above. */
	.kido-account__head { align-items: flex-start; }
	.kido-account__head-chip { order: -1; }
	/* Log out keeps its place inline in the scrolling row on small screens. */
	.kido-account-tabs li.woocommerce-MyAccount-navigation-link--customer-logout { margin-left: 0 !important; }
}

@media (max-width: 720px) {
	.woocommerce-account .u-columns,
	.woocommerce-account .woocommerce > .u-columns { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; }
	/* Orders table collapses to stacked rows on small screens. */
	.woocommerce-MyAccount-content table.shop_table thead { display: none; }
	.woocommerce-MyAccount-content table.shop_table tr { display: block; border-top: 1px solid var(--kido-border); }
	.woocommerce-MyAccount-content table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border: none;
		padding: 8px 16px;
		text-align: right;
	}
	.woocommerce-MyAccount-content table.shop_table td::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--kido-ink-2);
		text-align: left;
	}
}