/* =========================================================
   MY ACCOUNT — login/register cards + sidebar/dashboard layout.
   Loaded only on is_account_page() / is_cart() / is_checkout()
   (see inc/enqueue.php); the cart/checkout pages only need the
   .wwp-page-content--cart/--checkout tweaks near the bottom.
   ========================================================= */

/* ---------- Login / Register split cards ---------- */
.wwp-auth-wrap { padding: 20px 0 60px; }
.wwp-auth-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	max-width: 1040px;
	margin: 0 auto;
}
.wwp-auth-grid--single { grid-template-columns: 1fr; max-width: 460px; }

.wwp-auth-card {
	background: var(--wwp-color-bg);
	border: 1px solid var(--wwp-color-border);
	border-radius: var(--wwp-radius-card);
	box-shadow: var(--wwp-shadow-soft);
	padding: 40px;
	text-align: center;
}
.wwp-auth-icon {
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(251, 178, 1, 0.12);
	color: var(--wwp-color-accent);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 18px;
}
.wwp-auth-icon svg { width: 26px; height: 26px; }
.wwp-auth-title { font-size: 24px; margin: 0 0 6px; }
.wwp-auth-subtitle { color: var(--wwp-color-text-muted); font-size: 14px; margin: 0 0 28px; }

.wwp-auth-form { text-align: left; }
.wwp-form-group { margin-bottom: 18px; }
.wwp-form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }

.wwp-input-icon { position: relative; display: flex; align-items: center; }
/* Direct-child selector — only the left icon (envelope/lock) is a direct
   child of .wwp-input-icon; WooCommerce's own JS wraps the <input> itself
   in <span class="password-input"> for every password field (see the note
   below), so this must not reach inside that span. z-index:1 keeps this
   icon painted above that span — .password-input is also `position:
   relative` (needed for ITS OWN show/hide button below), and being later
   in the DOM than this icon, it would otherwise paint on top and hide the
   icon behind the input's white background. */
.wwp-input-icon > svg {
	position: absolute; left: 14px; width: 18px; height: 18px;
	color: var(--wwp-color-text-muted); pointer-events: none;
	z-index: 1;
}
.wwp-input-icon input.woocommerce-Input {
	width: 100%; padding: 13px 14px 13px 42px !important;
	border: 1px solid var(--wwp-color-border) !important;
	border-radius: var(--wwp-radius-input) !important;
	font-size: 14px; background: var(--wwp-color-bg);
}
.wwp-input-icon input.woocommerce-Input:focus { border-color: var(--wwp-color-accent) !important; outline: none; }

/* ---------- WooCommerce's own native password show/hide toggle ----------
   WooCommerce's password-strength-meter script auto-wraps EVERY
   input[type=password] it finds — including ours on the login/register
   cards — in its own <span class="password-input"> + adds a
   <button class="show-password-input">, regardless of a page's custom
   markup. A separate custom .wwp-password-toggle button used to be added
   on top of this and collided with it (double toggle, broken click
   handling); removed from woocommerce/myaccount/form-login.php — this is
   now the ONLY password toggle anywhere on the account pages (login,
   register, and Account Details > Password change), styled with the
   theme's own eye icon since WC's core CSS (which normally styles this)
   is disabled site-wide (see
   add_filter('woocommerce_enqueue_styles','__return_empty_array') in
   inc/woocommerce.php). The password-strength meter bar itself is hidden
   (wasn't part of the requested design) but the toggle stays. */
.woocommerce-password-strength { display: none !important; }
.password-input { position: relative; display: block; width: 100%; }
.password-input input.input-text,
.password-input input.woocommerce-Input {
	width: 100% !important;
	padding-right: 44px !important;
}
.show-password-input {
	position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
	width: 20px; height: 20px; padding: 0; margin: 0; border: none; background: transparent;
	cursor: pointer; color: var(--wwp-color-text-muted);
}
.show-password-input::before {
	content: '';
	display: block; width: 20px; height: 20px;
	background-color: currentColor;
	-webkit-mask: 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'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	mask: 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'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.show-password-input:hover { color: var(--wwp-color-accent); }

.wwp-password-match-note { font-size: 12px; margin: 6px 2px 0; min-height: 1em; }
.wwp-password-match-note.is-match { color: var(--wwp-color-success); }
.wwp-password-match-note.is-mismatch { color: var(--wwp-color-error); }

.wwp-form-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 8px; }
.wwp-checkbox-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.wwp-checkbox-inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--wwp-color-accent); margin: 0; }
.wwp-checkbox-terms { align-items: flex-start; margin-bottom: 16px; line-height: 1.4; }
.wwp-checkbox-terms input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.wwp-checkbox-terms a { color: var(--wwp-color-accent); font-weight: 600; }
.wwp-checkbox-terms:last-of-type { margin-bottom: 22px; }
.wwp-auth-link { font-size: 13px; color: var(--wwp-color-accent); font-weight: 600; }

@media (max-width: 900px) {
	.wwp-auth-grid { grid-template-columns: 1fr; max-width: 460px; }
	.wwp-auth-card { padding: 30px 24px; }
}

/* ---------- Account layout (sidebar + content) ---------- */
.wwp-account-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
	padding: 10px 0 60px;
}

.wwp-account-nav {
	background: var(--wwp-color-bg);
	border: 1px solid var(--wwp-color-border);
	border-radius: var(--wwp-radius-card);
	overflow: hidden;
	position: sticky;
	/* Header is sticky too (.wwp-header.is-sticky, top:0, height:
	   var(--wwp-header-height)) — without this offset the sidebar would
	   scroll up underneath/behind it instead of stopping below it. */
	top: calc(var(--wwp-header-height) + 24px);
}
.wwp-account-nav ul { list-style: none; margin: 0; padding: 0; }
.wwp-account-nav li { border-bottom: 1px solid var(--wwp-color-border); }
.wwp-account-nav li:last-child { border-bottom: none; }
.wwp-account-nav li a {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 18px; font-size: 14px; font-weight: 600;
	color: var(--wwp-color-text); transition: background var(--wwp-transition), color var(--wwp-transition);
}
.wwp-account-nav-icon { display: flex; color: var(--wwp-color-text-muted); flex-shrink: 0; }
.wwp-account-nav-icon svg { width: 18px; height: 18px; }
.wwp-account-nav li a:hover { background: var(--wwp-color-bg-alt); }
.wwp-account-nav li.is-active a { background: var(--wwp-color-accent); color: var(--wwp-color-accent-text); }
.wwp-account-nav li.is-active a .wwp-account-nav-icon { color: var(--wwp-color-accent-text); }
.wwp-account-nav-label { flex: 1; }
.wwp-account-nav-badge {
	background: var(--wwp-color-accent); color: var(--wwp-color-accent-text);
	font-size: 11px; font-weight: 700; border-radius: 20px;
	min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.wwp-account-nav li.is-active a .wwp-account-nav-badge { background: var(--wwp-color-accent); color: var(--wwp-color-accent-text); }

.wwp-account-content { min-width: 0; }

/* ---------- Dashboard ---------- */
.wwp-dash-welcome {
	background: var(--wwp-color-bg-alt);
	border-radius: var(--wwp-radius-card);
	padding: 26px 28px;
	margin-bottom: 24px;
}
.wwp-dash-welcome h2 { font-size: 22px; margin: 0 0 6px; }
.wwp-dash-name { color: var(--wwp-color-accent); }
.wwp-dash-welcome p { margin: 0; color: var(--wwp-color-text-muted); font-size: 14px; }

.wwp-dash-stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px;
}
.wwp-dash-stat {
	background: var(--wwp-color-bg); border: 1px solid var(--wwp-color-border); border-radius: var(--wwp-radius-card);
	padding: 22px 18px; text-align: center; color: var(--wwp-color-text);
	transition: transform var(--wwp-transition), box-shadow var(--wwp-transition);
}
.wwp-dash-stat:hover { transform: translateY(-3px); box-shadow: var(--wwp-shadow-soft); }
.wwp-dash-stat-icon {
	width: 44px; height: 44px; border-radius: 50%; background: rgba(251, 178, 1, 0.12); color: var(--wwp-color-accent);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.wwp-dash-stat-icon svg { width: 20px; height: 20px; }
.wwp-dash-stat-number { display: block; font-size: 28px; font-weight: 800; font-family: var(--wwp-font-heading); }
.wwp-dash-stat-label { display: block; font-size: 13px; color: var(--wwp-color-text-muted); margin: 2px 0 8px; }
.wwp-dash-stat-link { display: block; font-size: 12px; font-weight: 700; color: var(--wwp-color-accent); }

.wwp-dash-orders {
	background: var(--wwp-color-bg); border: 1px solid var(--wwp-color-border); border-radius: var(--wwp-radius-card);
	padding: 24px;
}
.wwp-dash-orders-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.wwp-dash-orders-head h3 { font-size: 18px; margin: 0; }
.wwp-dash-viewall { font-size: 13px; font-weight: 700; color: var(--wwp-color-accent); }
.wwp-dash-orders-table-wrap { overflow-x: auto; }
.wwp-dash-orders-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wwp-dash-orders-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--wwp-color-text-muted); padding: 0 10px 10px 0; border-bottom: 1px solid var(--wwp-color-border); }
.wwp-dash-orders-table td { padding: 14px 10px 14px 0; border-bottom: 1px solid var(--wwp-color-border); white-space: nowrap; }
.wwp-order-status { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--wwp-color-bg-alt); }
.wwp-order-status--completed { background: rgba(30, 142, 62, 0.12); color: var(--wwp-color-success); }
.wwp-order-status--processing { background: rgba(251, 178, 1, 0.15); color: #96690a; }
.wwp-order-status--on-hold, .wwp-order-status--pending { background: rgba(92, 92, 92, 0.12); color: var(--wwp-color-text-muted); }
.wwp-order-status--cancelled, .wwp-order-status--failed, .wwp-order-status--refunded { background: rgba(217, 48, 37, 0.1); color: var(--wwp-color-error); }
.wwp-dash-empty { text-align: center; padding: 30px 0; color: var(--wwp-color-text-muted); }
.wwp-dash-empty a { color: var(--wwp-color-accent); font-weight: 700; }

/* ---------- Wishlist tab ---------- */
.wwp-wishlist-grid .wwp-wishlist-status { text-align: center; color: var(--wwp-color-text-muted); padding: 40px 0; }
.wwp-wishlist-empty { text-align: center; padding: 50px 20px; }
.wwp-wishlist-empty p { color: var(--wwp-color-text-muted); margin-bottom: 18px; }

/* ---------- Cart / Checkout hero pages ---------- */
.wwp-page-content--cart, .wwp-page-content--checkout { padding-top: 10px; }

@media (max-width: 992px) {
	.wwp-account-layout { grid-template-columns: 1fr; }
	.wwp-account-nav { position: static; }
	.wwp-account-nav ul {
		display: flex; flex-wrap: nowrap;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.wwp-account-nav li { border-bottom: none; border-right: 1px solid var(--wwp-color-border); flex: 0 0 auto; }
	.wwp-account-nav li a { justify-content: center; padding: 12px 16px; font-size: 13px; white-space: nowrap; }
	.wwp-account-nav-label { flex: none; }
	.wwp-dash-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.wwp-dash-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
	.wwp-dash-stat { padding: 16px 10px; }
	.wwp-dash-orders-head { flex-direction: column; align-items: flex-start; }
}