/* ==========================================================================
   ZORA ACCOUNT PORTAL — Phase 3
   Application-style My Account: charcoal header card, white sidebar with
   crimson active state, white content cards on a pale page background.
   Loaded on account pages only. Builds on zora-design-system.css tokens.
   ========================================================================== */

body.woocommerce-account .site-main,
body.woocommerce-account .entry-content { background: var(--zora-surface-light); }

.zora-account-wrapper { margin: 0 auto; max-width: var(--zora-container); padding: var(--zs-5) var(--zs-4) var(--zs-8); }

/* Portal header card */
.zora-portal-header {
	background:
		radial-gradient(440px 220px at 90% 0%, rgba(188, 19, 43, 0.25), transparent 60%),
		linear-gradient(160deg, var(--zora-charcoal), var(--zora-black));
	border: 1px solid rgba(188, 19, 43, 0.25);
	border-radius: var(--zr-lg);
	box-shadow: var(--zsh-md);
	color: var(--zora-text-on-dark);
	margin-bottom: var(--zs-5);
	padding: clamp(22px, 3.4vw, 40px);
}
.zora-portal-header h1 { color: var(--zora-white); font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 0 0 var(--zs-2); }
.zora-portal-header p { color: var(--zora-text-muted-on-dark); font-size: 14px; margin: 0; }
.zora-portal-header .zora-btn { margin-top: var(--zs-4); }

/* Two-column app layout */
body.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--zs-5);
	grid-template-columns: 250px minmax(0, 1fr);
}
body.woocommerce-account.woocommerce-checkout .woocommerce { display: block; }

/* Sidebar navigation */
.woocommerce-MyAccount-navigation {
	background: var(--zora-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-md);
	box-shadow: var(--zsh-sm);
	float: none !important;
	height: fit-content;
	padding: var(--zs-3);
	width: auto !important;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0 0 2px; }
.woocommerce-MyAccount-navigation li a {
	border-left: 3px solid transparent;
	border-radius: var(--zr-sm);
	color: var(--zora-text-muted);
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 14px;
	text-decoration: none;
	transition: background var(--zt-fast), color var(--zt-fast), border-color var(--zt-fast);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--zora-off-white); color: var(--zora-text); }
.woocommerce-MyAccount-navigation li.is-active a {
	background: rgba(188, 19, 43, 0.08);
	border-left-color: var(--zora-red);
	color: var(--zora-red);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--zora-text-muted); }

/* Content area */
.woocommerce-MyAccount-content {
	background: var(--zora-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-md);
	box-shadow: var(--zsh-sm);
	float: none !important;
	padding: clamp(18px, 3vw, 32px);
	width: auto !important;
}

/* Dashboard summary chips (plugin) */
.zora-portal-summary { display: grid; gap: var(--zs-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--zs-5); }
.zora-portal-chip {
	background: var(--zora-off-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-md);
	color: var(--zora-text);
	display: block;
	padding: var(--zs-4);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--zt-fast), transform var(--zt-fast);
}
.zora-portal-chip:hover { border-color: rgba(188, 19, 43, 0.4); transform: translateY(-2px); }
.zora-portal-chip-num { color: var(--zora-red); display: block; font-size: 22px; font-weight: 800; margin-bottom: 2px; }
.zora-portal-chip span:last-child { color: var(--zora-text-muted); font-size: 13px; font-weight: 600; }

/* Cards inside content */
.zora-dashboard-card, .zora-address-card { border-color: var(--zora-border); border-radius: var(--zr-md); box-shadow: var(--zsh-sm); }
.zora-dashboard-card h2, .zora-dashboard-card h3 { color: var(--zora-text); }

/* Track orders */
.zora-track-list { display: grid; gap: var(--zs-3); }
.zora-track-card-head { align-items: center; display: flex; gap: var(--zs-3); margin-bottom: var(--zs-2); }
.zora-track-meta { color: var(--zora-text-muted); font-size: 13px; margin: 0 0 var(--zs-2); }
.zora-track-note { color: var(--zora-warn-fg); font-size: 13px; font-weight: 600; }

/* Saved products */
.zora-saved-grid { display: grid; gap: var(--zs-3); }
.zora-saved-card { align-items: center; display: grid; gap: var(--zs-4); grid-template-columns: 64px minmax(0, 1fr) auto; }
.zora-saved-thumb img { border-radius: var(--zr-sm); display: block; height: 64px; object-fit: cover; width: 64px; }
.zora-saved-name { color: var(--zora-text); display: block; font-weight: 700; text-decoration: none; }
.zora-saved-name:hover { color: var(--zora-red); }
.zora-saved-price { color: var(--zora-text-muted); display: block; font-size: 13px; margin: 2px 0 6px; }
.zora-saved-actions { align-items: center; display: flex; gap: var(--zs-2); }
.zora-saved-remove { background: none; border: none; color: var(--zora-text-muted); cursor: pointer; font-size: 20px; padding: 6px; }
.zora-saved-remove:hover { color: var(--zora-err-fg); }

/* Waitlist / coupons / credit */
.zora-waitlist-card { align-items: center; display: flex; flex-wrap: wrap; gap: var(--zs-3); justify-content: space-between; }
.zora-coupon-grid { display: grid; gap: var(--zs-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.zora-coupon-amount { color: var(--zora-text); display: block; font-size: 20px; font-weight: 800; margin-bottom: var(--zs-2); }
.zora-coupon-code { font-family: var(--zf-mono); letter-spacing: 0.05em; }
.zora-credit-balance { color: var(--zora-text); font-size: 30px; font-weight: 800; margin: var(--zs-2) 0; }

/* Orders table alignment with tokens */
.woocommerce-account table.shop_table { border: 1px solid var(--zora-border); border-radius: var(--zr-md); }
.woocommerce-account table.shop_table th { background: var(--zora-surface-light); }
.woocommerce-account table.shop_table .button { background: var(--zora-charcoal); border-radius: var(--zr-pill); color: #fff; font-weight: 600; }
.woocommerce-account table.shop_table .button:hover { background: var(--zora-black); }

/* Mobile: stack + horizontal nav scroller (no horizontal page scroll) */
@media (max-width: 880px) {
	body.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-navigation { overflow-x: auto; padding: var(--zs-2); -webkit-overflow-scrolling: touch; }
	.woocommerce-MyAccount-navigation ul { display: flex; gap: var(--zs-1); }
	.woocommerce-MyAccount-navigation li { flex-shrink: 0; margin: 0; }
	.woocommerce-MyAccount-navigation li a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
	.woocommerce-MyAccount-navigation li.is-active a { border-bottom-color: var(--zora-red); }
	/* Orders table → cards */
	.woocommerce-account table.shop_table_responsive tr { background: var(--zora-white); border: 1px solid var(--zora-border); border-radius: var(--zr-md); display: block; margin-bottom: var(--zs-3); padding: var(--zs-3); }
	.zora-saved-card { grid-template-columns: 56px minmax(0, 1fr); }
	.zora-saved-actions { grid-column: 1 / -1; }
}