/*
 * KosherShop My Account redesign.
 * Scoped entirely under .ks-account so it cannot leak into header/footer
 * or any other page template. Colors/type pulled from the site's own
 * Elementor Kit (Primary #6EC1E4, Secondary #54595F, Accent #61CE70,
 * custom cyan #0CC0DF) — no new brand colors introduced.
 */

/*
 * WooCommerce's own core woocommerce-layout.css ships a legacy structural
 * rule — .woocommerce-account .woocommerce-MyAccount-content { float:
 * right; width: 68%; } — meant for classic themes with no layout of their
 * own. Our flex-based layout replaces it entirely, so it's neutralized
 * here rather than edited in the plugin file itself (would be overwritten
 * on the next WooCommerce update).
 */
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
}

.ks-account {
	--ks-primary: #6EC1E4;
	--ks-primary-dark: #00A5BB;
	--ks-cyan: #0CC0DF;
	--ks-cta: #00BCD4;
	--ks-cta-hover: #00A5BB;
	--ks-secondary: #54595F;
	--ks-text: #7A7A7A;
	--ks-heading: #333333;
	--ks-bg: #F5F5F5;
	--ks-white: #FFFFFF;
	--ks-border: #E1E5E8;
	--ks-error: #D6483F;
	--ks-success: #61CE70;
	--ks-radius: 14px;
	--ks-radius-sm: 8px;
	--ks-shadow: 0 20px 45px rgba(84, 89, 95, 0.10), 0 2px 8px rgba(84, 89, 95, 0.06);

	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 64px) 20px clamp(40px, 6vw, 80px);
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--ks-text);
	box-sizing: border-box;
}

.ks-account *,
.ks-account *::before,
.ks-account *::after {
	box-sizing: border-box;
}

.ks-account__intro {
	text-align: center;
	max-width: 620px;
	margin: 0 auto clamp(28px, 4vw, 44px);
}

.ks-account__eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ks-primary-dark);
	background: rgba(110, 193, 228, 0.12);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.ks-account__title {
	font-family: Roboto, sans-serif;
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--ks-heading);
	margin: 0 0 10px;
	line-height: 1.25;
}

.ks-account__subtitle {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ks-text);
}

/* Panels layout */

.ks-account__panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
}

.ks-account__panels--single,
.ks-account--narrow .ks-account__panels {
	grid-template-columns: minmax(0, 480px);
	justify-content: center;
}

.ks-panel {
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
	padding: clamp(24px, 4vw, 36px);
	display: flex;
	flex-direction: column;
}

.ks-panel--register {
	background: linear-gradient(180deg, rgba(110, 193, 228, 0.05) 0%, rgba(255, 255, 255, 1) 140px);
}

.ks-panel__head {
	margin-bottom: 22px;
}

.ks-panel__title {
	font-family: Roboto, sans-serif;
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--ks-heading);
	margin: 0 0 4px;
}

.ks-panel__hint {
	margin: 0;
	font-size: 0.9rem;
	color: var(--ks-text);
}

.ks-panel__hint--body {
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 20px;
}

/* Forms */

.ks-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ks-field {
	margin: 0 0 16px !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ks-field label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ks-heading);
}

.ks-field .required {
	color: var(--ks-error);
}

.ks-account .woocommerce-Input,
.ks-account input[type="text"],
.ks-account input[type="email"],
.ks-account input[type="password"],
.ks-account input[type="tel"],
.ks-account select {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1.5px solid var(--ks-border);
	border-radius: var(--ks-radius-sm);
	font-size: 1rem;
	font-family: inherit;
	color: var(--ks-heading);
	background: var(--ks-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.ks-account .woocommerce-Input:hover,
.ks-account select:hover {
	border-color: #C7CDD2;
}

.ks-account .woocommerce-Input:focus,
.ks-account select:focus {
	outline: none;
	border-color: var(--ks-primary);
	box-shadow: 0 0 0 3px rgba(110, 193, 228, 0.25);
}

.ks-account .woocommerce-Input:invalid:not(:placeholder-shown) {
	border-color: var(--ks-error);
}

.ks-account .woocommerce-Input:disabled,
.ks-account select:disabled {
	background: var(--ks-bg);
	color: #B3B3B3;
	cursor: not-allowed;
}

/*
 * <select> elements (e.g. the State dropdown) keep a native browser focus
 * ring/appearance (green in Chrome on macOS) even with outline:none — only
 * appearance:none fully hands control to our own cyan focus style above.
 * Targets any <select> in the account area directly (WooCommerce renders
 * the state dropdown as `<select class="state_select">` — it never
 * actually carries the "woocommerce-Input" class the old selector here
 * required, which is why it had no custom styling at all before).
 */
.ks-account select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 42px;
	cursor: pointer;
}

/*
 * WooCommerce enhances the State dropdown with select2/selectWoo on page
 * load: JS hides the real <select> and renders its own widget
 * (.select2-container > .select2-selection--single) in its place, with
 * hardcoded default styling (border:1px solid #aaa, ~30px tall via
 * line-height:28px) that has nothing to do with the <select> CSS above —
 * that's why the State field still looked thinner/lighter than every
 * other field even after styling the underlying <select> element.
 */
.ks-account .select2-container {
	width: 100% !important;
}

/*
 * select2's own default CSS centers the arrow triangle with
 * `position: absolute; top: 50%; margin-top: -2px` — a fixed offset
 * calibrated to select2's original ~26px-tall, 5px-triangle arrow. The
 * previous version of this fix changed the arrow's height/triangle size
 * but kept that same absolute-position math, which is exactly why the
 * arrow drifted toward the bottom instead of staying centered. Fixing
 * the underlying layout instead: the selection box becomes a flex
 * container, and the text + arrow become normal flex children that
 * center themselves — no absolute positioning or magic-number offsets
 * left to get out of sync.
 */
.ks-account .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 16px;
	border: 1.5px solid var(--ks-border);
	border-radius: var(--ks-radius-sm);
	background: var(--ks-white);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ks-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	flex: 1 1 auto;
	min-width: 0;
	line-height: normal;
	padding: 0;
	margin: 0;
	color: var(--ks-heading);
	font-size: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ks-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	position: static;
	flex: 0 0 auto;
	height: auto;
	width: auto;
	margin-left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ks-account .select2-container--default .select2-selection--single .select2-selection__arrow b {
	position: static;
	top: auto;
	left: auto;
	margin: 0;
	display: block;
	border-color: #7A7A7A transparent transparent transparent;
	border-style: solid;
	border-width: 6px 5px 0 5px;
	height: 0;
	width: 0;
}

.ks-account .select2-container--default:hover .select2-selection--single {
	border-color: #C7CDD2;
}

.ks-account .select2-container--default.select2-container--open .select2-selection--single,
.ks-account .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--ks-primary);
	box-shadow: 0 0 0 3px rgba(110, 193, 228, 0.25);
	outline: none;
}

/*
 * Password visibility toggle: WooCommerce's own frontend JS
 * (assets/js/frontend/woocommerce.js) already wraps every
 * `.woocommerce-Input[type=password]` in a `.password-input` span and
 * appends a fully-functional `.show-password-input` button (eye/eye-off
 * SVG swapped via a `.display-password` class, positioned with
 * top:50%/transform:translateY(-50%) — already correctly centered). A
 * custom second toggle used to be layered on top of this, which is what
 * caused two overlapping icons. Removed that entirely; this just
 * restyles WooCommerce's own existing button/icon to match our colors
 * instead of adding another one.
 */
.ks-account .password-input {
	position: relative;
}

.ks-account .password-input .woocommerce-Input {
	padding-right: 46px;
}

.ks-account .show-password-input {
	width: 34px;
	height: 34px;
	right: 6px;
	border-radius: 999px;
	transition: background 0.15s ease;
}

.ks-account .show-password-input:hover {
	background: var(--ks-bg);
}

.ks-account .show-password-input:focus-visible {
	outline: 2px solid var(--ks-primary);
	outline-offset: 2px;
}

.ks-account .show-password-input::before {
	/* Recolor WooCommerce's black (#111) eye/eye-off SVGs to our neutral
	   text color via filter, since they're baked-in data-URI backgrounds
	   we can't reach with `color`/`fill`. */
	filter: brightness(0) saturate(100%) invert(53%) sepia(6%) saturate(384%) hue-rotate(314deg) brightness(94%) contrast(87%);
}

.ks-account .show-password-input.display-password::before {
	filter: brightness(0) saturate(100%) invert(63%) sepia(45%) saturate(453%) hue-rotate(152deg) brightness(93%) contrast(93%);
}

.ks-field-note {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ks-text);
	background: var(--ks-bg);
	border-radius: var(--ks-radius-sm);
	padding: 12px 14px;
	margin: 0 0 16px;
}

.ks-field--actions {
	margin-top: 6px !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ks-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: var(--ks-text);
	cursor: pointer;
}

.ks-remember input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--ks-primary);
	cursor: pointer;
}

/* Buttons */

.ks-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 50px;
	padding: 0 20px;
	border-radius: var(--ks-radius-sm);
	border: none;
	font-family: Roboto, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ks-btn--primary {
	/* Solid #00bcd4 / hover #00a5bb — the exact CTA colors already used
	   site-wide on the YITH Quick View "Add to cart" button, so the
	   account UI's primary action reads as the same button everywhere. */
	background: var(--ks-cta);
	color: #fff;
	box-shadow: 0 8px 20px rgba(0, 188, 212, 0.28);
}

.ks-btn--primary:hover {
	background: var(--ks-cta-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 165, 187, 0.36);
}

.ks-btn--primary:active {
	transform: translateY(0);
}

.ks-btn:focus-visible {
	outline: 2px solid var(--ks-secondary);
	outline-offset: 2px;
}

.ks-btn:disabled,
.ks-btn.is-loading {
	cursor: not-allowed;
	opacity: 0.85;
	transform: none;
}

.ks-btn__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
}

.ks-btn.is-loading .ks-btn__label {
	opacity: 0.85;
}

.ks-btn.is-loading .ks-btn__spinner {
	display: inline-block;
	animation: ks-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.ks-btn.is-loading .ks-btn__spinner {
		animation: none;
	}
	.ks-btn--primary:hover {
		transform: none;
	}
}

@keyframes ks-spin {
	to { transform: rotate(360deg); }
}

.ks-lost-password {
	margin: 4px 0 0 !important;
	text-align: right;
}

.ks-lost-password a,
.ks-back-to-login a {
	color: var(--ks-primary-dark);
	font-size: 0.88rem;
	font-weight: 500;
	text-decoration: none;
}

.ks-lost-password a:hover,
.ks-back-to-login a:hover {
	text-decoration: underline;
}

.ks-back-to-login {
	text-align: center;
	margin: 18px 0 0;
}

/*
 * Notices: covers both the top-of-page notices (login errors, register
 * success) inside .woocommerce-notices-wrapper AND standalone notices WC
 * core prints directly into a tab's content — e.g. "No downloads
 * available yet", the "your account is using a temporary password" resend
 * notice. Those aren't wrapped in anything we control, and WooCommerce's
 * own core CSS was winning the cascade on them (a plain top-border box),
 * which is why they looked inconsistent with the fully custom empty
 * states on Orders/Addresses. !important + a broad selector fixes both.
 */
.ks-account .woocommerce-error,
.ks-account .woocommerce-message,
.ks-account .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
	list-style: none !important;
	max-width: 1100px;
	margin: 0 auto 20px !important;
	padding: 14px 18px !important;
	border-radius: var(--ks-radius-sm) !important;
	font-size: 0.92rem;
	line-height: 1.5;
	/*
	 * Row + wrap + space-between, not column: some of these notices are a
	 * single WC-generated string like `<a class="button">Resend</a> Your
	 * account is using a temporary password...` — a bare inline link
	 * followed by text, not separate blocks. Column direction defaults to
	 * align-items: stretch, which turned that inline button into a
	 * full-width solid bar sitting above the message instead of beside
	 * it. Row + wrap keeps the message and button on one line on wide
	 * screens and lets the button drop below the text (not stretch) on
	 * narrow ones.
	 */
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	border-top-width: 1px !important;
}

.ks-account .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error {
	background: #FCEAE8 !important;
	color: #A6362E !important;
	border: 1px solid #F2C2BD !important;
}

.ks-account .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message {
	background: rgba(97, 206, 112, 0.12) !important;
	color: #2F7A3B !important;
	border: 1px solid rgba(97, 206, 112, 0.4) !important;
}

.ks-account .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info {
	background: rgba(110, 193, 228, 0.12) !important;
	color: var(--ks-primary-dark) !important;
	border: 1px solid rgba(110, 193, 228, 0.4) !important;
}

/* Standalone notice INSIDE a tab's content (not the top-of-page wrapper)
   is the whole tab body — give it the same card treatment as .ks-empty
   so Downloads/Payment-methods empty states match Orders/Addresses. */
.ks-account__content > .woocommerce-error,
.ks-account__content > .woocommerce-message,
.ks-account__content > .woocommerce-info {
	background: var(--ks-white) !important;
	color: var(--ks-heading) !important;
	border: 1px solid var(--ks-border) !important;
	border-radius: var(--ks-radius) !important;
	box-shadow: var(--ks-shadow);
	padding: clamp(28px, 5vw, 48px) 24px !important;
	text-align: center;
	align-items: center;
}

.ks-account .woocommerce-error .button,
.ks-account .woocommerce-message .button,
.ks-account .woocommerce-info .button,
.ks-account .woocommerce-error a.button,
.ks-account .woocommerce-message a.button,
.ks-account .woocommerce-info a.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	flex: 0 0 auto !important;
	min-height: 40px;
	padding: 0 20px !important;
	border-radius: var(--ks-radius-sm) !important;
	background: var(--ks-cta) !important;
	color: #fff !important;
	border: none !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 0.88rem;
	margin: 0 !important;
	/* WC's source order is button-then-text for these notices; visually
	   push the button after the message so it reads left-message,
	   right-button as specified. */
	order: 2;
}

.ks-account .woocommerce-error .button:hover,
.ks-account .woocommerce-message .button:hover,
.ks-account .woocommerce-info .button:hover,
.ks-account .woocommerce-error a.button:hover,
.ks-account .woocommerce-message a.button:hover,
.ks-account .woocommerce-info a.button:hover {
	background: var(--ks-cta-hover) !important;
}

/* WooCommerce core renders a bullet/icon glyph from its own icon font
   before these notices; hide it so a font-loading race never shows a
   fallback "tofu" box glyph instead. */
.ks-account .woocommerce-error::before,
.ks-account .woocommerce-message::before,
.ks-account .woocommerce-info::before {
	content: none !important;
}

/* Entrance animation */

@media (prefers-reduced-motion: no-preference) {
	.ks-panel {
		animation: ks-fade-up 0.4s ease both;
	}
	.ks-panel--register {
		animation-delay: 0.08s;
	}
	@keyframes ks-fade-up {
		from { opacity: 0; transform: translateY(10px); }
		to { opacity: 1; transform: translateY(0); }
	}
}

/* Responsive */

@media (max-width: 900px) {
	.ks-account__panels {
		grid-template-columns: minmax(0, 1fr);
		max-width: 520px;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.ks-account {
		padding-left: 14px;
		padding-right: 14px;
	}
	.ks-panel {
		padding: 20px;
		border-radius: 12px;
	}
	.ks-btn {
		min-height: 46px;
	}
}

@media (max-width: 340px) {
	.ks-account__title {
		font-size: 1.4rem;
	}
}

/* ==================================================================
 * Logged-in account app (dashboard / orders / addresses / details)
 * ================================================================== */

.ks-account--app {
	max-width: 1180px;
	text-align: left;
	/* The base .ks-account clamp(24px, 5vw, 64px) top padding, stacked on
	   top of this page's own header/section spacing, left a much bigger
	   gap above "My Account" than any other page on the site. Cut it down
	   for the logged-in app view specifically. */
	padding-top: 12px !important;
}

.ks-account__header {
	text-align: left;
	max-width: none;
	margin: 0 0 clamp(24px, 3vw, 36px);
}

.ks-account__name {
	color: var(--ks-primary-dark);
}

/*
 * Layout (display/flex-basis/width) for .ks-account__shell, .ks-account__nav
 * and .ks-account__panel is set via inline `style` attributes directly in
 * my-account.php — see the comment there for why. The rules below are a
 * backup layer plus all the non-layout (visual) styling; !important here
 * matches the inline styles' own specificity so this file's intentional
 * overrides (e.g. the mobile breakpoint further down) still win.
 */
.ks-account__shell {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 28px;
	align-items: flex-start !important;
	width: 100%;
}

.ks-account__nav {
	flex: 0 0 240px !important;
	width: 240px !important;
	max-width: 240px !important;
}

.ks-account__panel {
	flex: 1 1 0% !important;
	min-width: 0 !important;
}

/* Sidebar / mobile nav */

.ks-nav__list {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
}

.ks-nav__item {
	margin: 0;
}

/*
 * !important on the layout-critical properties below is intentional and
 * scoped to .ks-nav__link only: this account UI is assembled inside a
 * page full of third-party plugin/theme CSS (Elementor, Royal addons,
 * WooCommerce, chatbot widgets) whose generic `nav a` / `.button` style
 * resets can otherwise win the cascade on specificity and silently
 * collapse this flex row into a stacked/centered layout.
 */
.ks-nav__link {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--ks-radius-sm);
	color: var(--ks-secondary);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
}

.ks-nav__icon {
	display: flex !important;
	width: 20px !important;
	height: 20px !important;
	flex: none;
	color: var(--ks-text);
}

.ks-nav__icon svg {
	width: 100%;
	height: 100%;
}

.ks-nav__link:hover {
	background: var(--ks-bg);
	color: var(--ks-heading);
}

.ks-nav__link:focus-visible {
	outline: 2px solid var(--ks-primary);
	outline-offset: -2px;
}

.ks-nav__item.is-active .ks-nav__link {
	background: rgba(110, 193, 228, 0.14);
	color: var(--ks-primary-dark);
	font-weight: 600;
}

.ks-nav__item.is-active .ks-nav__icon {
	color: var(--ks-primary-dark);
}

.ks-nav__item.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--ks-border);
}

/* Cards / generic content */

.ks-card {
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
	padding: clamp(20px, 3vw, 28px);
}

.ks-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.ks-card__title {
	font-family: Roboto, sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--ks-heading);
	margin: 0;
}

.ks-card__link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ks-primary-dark);
	text-decoration: none;
}

.ks-card__link:hover {
	text-decoration: underline;
}

.ks-back-link {
	display: inline-block;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--ks-primary-dark);
	text-decoration: none;
	margin-bottom: 16px;
}

.ks-back-link:hover {
	text-decoration: underline;
}

/* Status badges */

.ks-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	background: var(--ks-bg);
	color: var(--ks-secondary);
	border: 1px solid var(--ks-border);
}

.ks-badge--lg {
	padding: 7px 16px;
	font-size: 0.85rem;
}

.ks-badge--completed,
.ks-badge--processing {
	background: rgba(97, 206, 112, 0.14);
	color: #2F7A3B;
	border-color: rgba(97, 206, 112, 0.35);
}

.ks-badge--on-hold,
.ks-badge--pending {
	background: rgba(110, 193, 228, 0.14);
	color: var(--ks-primary-dark);
	border-color: rgba(110, 193, 228, 0.35);
}

.ks-badge--cancelled,
.ks-badge--failed,
.ks-badge--refunded {
	background: #FCEAE8;
	color: #A6362E;
	border-color: #F2C2BD;
}

/* Dashboard */

.ks-dash__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.ks-dash__grid .ks-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ks-dash__logout-note {
	margin-top: 20px;
	font-size: 0.85rem;
	color: var(--ks-text);
}

.ks-dash__logout-note a {
	color: var(--ks-primary-dark);
}

/* Order card (dashboard recent order) */

.ks-order-card {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 14px;
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius-sm);
	transition: border-color 0.15s ease;
}

.ks-order-card:hover {
	border-color: var(--ks-primary);
}

.ks-order-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.ks-order-card__number {
	font-weight: 600;
	color: var(--ks-heading);
}

.ks-order-card__date {
	display: block;
	font-size: 0.82rem;
	color: var(--ks-text);
	margin-bottom: 6px;
}

.ks-order-card__meta {
	font-size: 0.88rem;
	color: var(--ks-secondary);
	margin-bottom: 10px;
}

.ks-order-card__cta {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ks-primary-dark);
}

.ks-address-preview {
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--ks-secondary);
	font-style: normal;
}

/* Orders list */

.ks-orders-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ks-order-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
	padding: 18px 20px;
}

.ks-order-row__top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.ks-order-row__number {
	font-weight: 600;
	color: var(--ks-heading);
	text-decoration: none;
	font-size: 1.02rem;
}

.ks-order-row__number:hover {
	color: var(--ks-primary-dark);
}

.ks-order-row__date {
	display: block;
	font-size: 0.85rem;
	color: var(--ks-text);
	margin-bottom: 4px;
}

.ks-order-row__meta {
	font-size: 0.9rem;
	color: var(--ks-secondary);
}

.ks-order-row__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Buttons: auto width + ghost variant, for use outside the login form */

.ks-btn--auto {
	width: auto;
	min-height: 42px;
	padding: 0 18px;
	text-decoration: none;
}

.ks-btn--ghost {
	background: var(--ks-white);
	color: var(--ks-secondary);
	border: 1.5px solid var(--ks-border);
	box-shadow: none;
}

.ks-btn--ghost:hover {
	border-color: var(--ks-primary);
	color: var(--ks-primary-dark);
	transform: none;
	box-shadow: none;
}

.ks-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 18px;
}

/* Order details / view-order */

.ks-order-header {
	margin-bottom: 20px;
}

.ks-order-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
	padding: 20px 24px;
}

.ks-order-header__number {
	font-family: Roboto, sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--ks-heading);
	margin: 0 0 4px;
}

.ks-order-header__date {
	margin: 0;
	font-size: 0.88rem;
	color: var(--ks-text);
}

/* Order notes card sits above the order-details card on the same page,
   with no grid `gap` between them (unlike the dashboard/address cards) —
   needs its own spacing now that the generic .ks-card + .ks-card rule
   (which doubled up spacing wherever cards already had a grid gap) is
   gone. */
.ks-order-updates {
	margin-bottom: 20px;
}

/* Timeline (order notes) */

.ks-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ks-timeline__item {
	display: flex;
	gap: 14px;
	padding-bottom: 18px;
	position: relative;
}

.ks-timeline__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 16px;
	bottom: 0;
	width: 1px;
	background: var(--ks-border);
}

.ks-timeline__dot {
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ks-primary);
	margin-top: 4px;
}

.ks-timeline__date {
	margin: 0 0 4px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ks-secondary);
}

.ks-timeline__text {
	font-size: 0.9rem;
	color: var(--ks-text);
	line-height: 1.6;
}

.ks-timeline__text p {
	margin: 0 0 6px;
}

/* Restyle WC's own order-details / customer-details tables (not overridden as PHP) */

.ks-order-details .woocommerce-table,
.ks-order-details .shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
	font-size: 0.9rem;
}

.ks-order-details .woocommerce-table th,
.ks-order-details .shop_table th {
	text-align: left;
	padding: 10px 8px;
	border-bottom: 1.5px solid var(--ks-border);
	color: var(--ks-secondary);
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ks-order-details .woocommerce-table td,
.ks-order-details .shop_table td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--ks-border);
	color: var(--ks-heading);
}

.ks-order-details .woocommerce-table tfoot th,
.ks-order-details .woocommerce-table tfoot td {
	border-bottom: none;
}

.ks-order-details address {
	font-style: normal;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--ks-secondary);
}

.ks-order-details .woocommerce-customer-details,
.ks-order-details .woocommerce-column--billing-address,
.ks-order-details .woocommerce-column--shipping-address {
	margin-top: 8px;
}

.ks-order-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
}

/*
 * This element also carries WooCommerce's "col2-set" class, whose core CSS
 * gives it ::before/::after clearfix pseudo-elements (`content: " ";
 * display: table`) — a float-clearing trick from the pre-grid era. Once
 * the parent becomes a grid, generated content still participates as real
 * grid items, so those two empty pseudo-elements were silently occupying
 * 2 of the 4 grid cells and pushing Billing/Shipping into a diagonal
 * (upper-right, lower-left) instead of one row. Removing the generated
 * content entirely — a grid doesn't need a float clearfix anyway.
 */
.ks-order-details .woocommerce-columns--addresses::before,
.ks-order-details .woocommerce-columns--addresses::after {
	content: none !important;
	display: none !important;
}

/*
 * Same root cause as the form-row-first/last field bug: WooCommerce's own
 * woocommerce-layout.css has an unconditional
 * `.col2-set .col-1/.col-2 { float: left/right; width: 48%; }`. Inside a
 * CSS Grid, that 48% resolves against the item's own ~50% column, so each
 * address card rendered at roughly half its column's width instead of
 * filling it — the misaligned, oddly-narrow address boxes.
 */
.ks-order-details .woocommerce-columns--addresses .woocommerce-column {
	width: 100% !important;
	float: none !important;
}

.ks-order-details h2 {
	font-family: Roboto, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ks-heading);
	margin: 24px 0 12px;
}

/* Addresses */

.ks-addresses__intro {
	font-size: 0.92rem;
	color: var(--ks-text);
	margin: 0 0 18px;
}

.ks-address-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ks-address-card__body {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--ks-secondary);
	font-style: normal;
}

.ks-address-form-card {
	max-width: 720px;
}

.ks-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

/*
 * WooCommerce's own core woocommerce-layout.css ships an unconditional
 * `.form-row-first, .form-row-last { width: 47%; float: left/right; }`.
 * Inside a CSS Grid, percentage widths resolve against the item's own
 * grid column (already ~50% of the row), so 47% of that column rendered
 * as a ~23%-wide box instead of filling its column — hence the narrow
 * First/Last name fields. float has no effect on a grid item so that
 * part is harmless; only the width needs overriding.
 */
.ks-field-grid .form-row-first,
.ks-field-grid .form-row-last {
	width: 100% !important;
	float: none !important;
}

/* form-row-first / form-row-last are WooCommerce's convention for a
   half-width pair sitting side by side (e.g. First name | Last name) —
   only form-row-wide should take the full two columns. */
.ks-field-grid .form-row-wide {
	grid-column: span 2;
}

/* Account details / settings */

.ks-account-form-card {
	max-width: 720px;
}

.ks-settings-section {
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--ks-border);
}

.ks-settings-section:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.ks-settings-section__title {
	font-family: Roboto, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ks-heading);
	margin: 0 0 4px;
}

.ks-settings-section__hint {
	margin: 0 0 16px;
	font-size: 0.85rem;
	color: var(--ks-text);
}

.ks-field-hint {
	font-size: 0.8rem;
	color: var(--ks-text);
}

/* Empty states */

.ks-empty {
	text-align: center;
	padding: clamp(32px, 6vw, 56px) 20px;
}

.ks-empty--compact {
	padding: 12px 4px;
	text-align: left;
}

.ks-empty__icon {
	display: inline-flex;
	width: 44px;
	height: 44px;
	color: var(--ks-primary);
	margin-bottom: 12px;
}

.ks-empty__icon svg {
	width: 100%;
	height: 100%;
}

.ks-empty__title {
	font-weight: 600;
	font-size: 1rem;
	color: var(--ks-heading);
	margin: 0 0 6px;
}

.ks-empty__text {
	font-size: 0.9rem;
	color: var(--ks-text);
	margin: 0 0 16px;
	max-width: 360px;
}

.ks-empty--compact .ks-empty__text {
	max-width: none;
}

.ks-empty:not(.ks-empty--compact) .ks-empty__text {
	margin-left: auto;
	margin-right: auto;
}

/* Responsive: account app */

@media (max-width: 900px) {
	/*
	 * These !important rules deliberately override the inline `style`
	 * attributes on the same elements (author !important always wins over
	 * a plain inline style, regardless of media query) so the sidebar
	 * drops its fixed 240px width and becomes a full-width horizontal tab
	 * bar on tablet/mobile instead of staying pinned to a desktop width.
	 */
	.ks-account__nav {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.ks-nav__list {
		flex-direction: row !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px;
		gap: 4px;
		scrollbar-width: thin;
	}

	.ks-nav__item {
		flex: none;
		width: auto !important;
	}

	.ks-nav__item.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		border-left: 1px solid var(--ks-border);
		padding-left: 4px;
	}

	.ks-nav__link {
		white-space: nowrap;
	}

	.ks-dash__grid,
	.ks-address-grid,
	.ks-order-details .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.ks-field-grid {
		grid-template-columns: 1fr;
	}

	.ks-field-grid .form-row-first,
	.ks-field-grid .form-row-last,
	.ks-field-grid .form-row-wide {
		grid-column: span 1;
	}

	.ks-order-row {
		flex-direction: column;
		align-items: stretch;
	}

	.ks-order-row__actions {
		width: 100%;
	}

	.ks-order-row__actions .ks-btn {
		flex: 1;
	}

	.ks-order-header__row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Restyle WC's default tables for Downloads / Payment Methods (not overridden as PHP) */

.ks-account .shop_table_responsive,
.ks-account .woocommerce-orders-table,
.ks-account .woocommerce-MyAccount-paymentMethods {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px;
	font-size: 0.9rem;
}

.ks-account .shop_table_responsive thead,
.ks-account .woocommerce-MyAccount-paymentMethods thead {
	display: none;
}

.ks-account .shop_table_responsive tr,
.ks-account .woocommerce-MyAccount-paymentMethods tr {
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	box-shadow: var(--ks-shadow);
	border-radius: var(--ks-radius-sm);
}

.ks-account .shop_table_responsive td,
.ks-account .woocommerce-MyAccount-paymentMethods td {
	padding: 12px 16px;
	border: none;
}

.ks-account .shop_table_responsive td::before,
.ks-account .woocommerce-MyAccount-paymentMethods td::before {
	font-weight: 600;
	color: var(--ks-secondary);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-right: 6px;
}

.ks-account .shop_table_responsive .button,
.ks-account .woocommerce-MyAccount-paymentMethods .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 16px;
	border-radius: var(--ks-radius-sm);
	background: var(--ks-white);
	color: var(--ks-secondary);
	border: 1.5px solid var(--ks-border);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 2px 4px 2px 0;
}

.ks-account .shop_table_responsive .button:hover,
.ks-account .woocommerce-MyAccount-paymentMethods .button:hover {
	border-color: var(--ks-primary);
	color: var(--ks-primary-dark);
}

/* Standalone action links WC core prints straight into a tab's content
   (e.g. payment-methods.php's "Add payment method", outside any notice
   wrapper) — match this to the same ks-btn--primary treatment. */
.ks-account__content > a.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 46px;
	padding: 0 20px !important;
	border-radius: var(--ks-radius-sm) !important;
	background: var(--ks-cta) !important;
	color: #fff !important;
	border: none !important;
	text-decoration: none !important;
	font-weight: 600;
	margin-top: 16px;
}

.ks-account__content > a.button:hover {
	background: var(--ks-cta-hover) !important;
}