/**
 * My Account — artifact-style redesign.
 * Scoped under body.woocommerce-account (WooCommerce core adds this class
 * automatically on account pages) so cart/checkout are never affected.
 */

/* =========================================================
   Layout
   ========================================================= */

.vp-account {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	align-items: flex-start;
}

@media (min-width: 900px) {
	.vp-account {
		flex-direction: row;
	}

	.vp-account__sidebar {
		flex: 0 0 17rem;
		width: 17rem;
		position: sticky;
		top: calc(5.5rem + var(--vp-admin-offset, 0px));
	}

	.vp-account__content {
		flex: 1 1 auto;
		min-width: 0;
	}
}

.vp-account__sidebar {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* =========================================================
   Profile card
   ========================================================= */

.vp-account__profile {
	background: #fff;
	border: 1px solid rgba(74, 59, 50, 0.08);
	border-radius: 1.5rem;
	padding: 1.5rem 1.25rem;
	box-shadow: 0 12px 28px rgba(90, 140, 61, 0.08);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.vp-account__avatar {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 0.5rem;
	border: 3px solid var(--vp-light);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.vp-account__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vp-account__profile-name {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--vp-dark);
}

.vp-account__profile-email {
	font-size: 0.78rem;
	color: #9ca3af;
	word-break: break-all;
}

/* =========================================================
   Navigation
   ========================================================= */

.vp-account__nav {
	background: #fff;
	border: 1px solid rgba(74, 59, 50, 0.08);
	border-radius: 1.5rem;
	padding: 0.65rem;
	box-shadow: 0 12px 28px rgba(90, 140, 61, 0.08);
}

.vp-account__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.vp-account__nav li a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.85rem;
	border-radius: 1rem;
	color: var(--vp-dark);
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.vp-account__nav li a:hover {
	background: var(--vp-light);
	color: var(--vp-orange);
}

.vp-account__nav li.is-active a {
	background: var(--vp-green);
	color: #fff;
	box-shadow: 0 8px 18px rgba(90, 140, 61, 0.3);
}

.vp-account__nav-icon {
	font-size: 1.05rem;
	flex-shrink: 0;
	line-height: 1;
}

.vp-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
	border-top: 1px dashed rgba(74, 59, 50, 0.12);
	margin-top: 0.35rem;
	padding-top: 0.35rem;
}

.vp-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #dc2626;
}

.vp-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: rgba(220, 38, 38, 0.08);
	color: #dc2626;
}

/* =========================================================
   Content card shell
   ========================================================= */

.vp-account__content {
	background: #fff;
	border: 1px solid rgba(74, 59, 50, 0.08);
	border-radius: 1.75rem;
	padding: 1.75rem;
	box-shadow: 0 16px 34px rgba(90, 140, 61, 0.08);
	min-height: 20rem;
}

@media (max-width: 640px) {
	.vp-account__content {
		padding: 1.25rem;
		border-radius: 1.35rem;
	}
}

.vp-account__content h2,
.vp-account__content h3 {
	color: var(--vp-dark);
}

.vp-account__content > p:first-child {
	margin-top: 0;
}

/* =========================================================
   Dashboard — welcome + quick links
   ========================================================= */

.vp-account__welcome {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px dashed rgba(74, 59, 50, 0.12);
}

.vp-account__welcome-title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.4rem, 3vw, 1.85rem);
	font-weight: 900;
}

.vp-account__welcome-title span {
	color: var(--vp-orange);
}

.vp-account__welcome-text {
	margin: 0;
	color: #6b7280;
	font-size: 0.9rem;
	line-height: 1.75;
}

.vp-account__quick-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 2rem;
}

@media (min-width: 560px) {
	.vp-account__quick-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.vp-account__quick-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.vp-account__quick-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 1.25rem;
	background: var(--vp-light);
	border: 1px solid transparent;
	border-radius: 1.35rem;
	text-decoration: none;
	color: var(--vp-dark);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.vp-account__quick-card:hover {
	transform: translateY(-4px);
	background: #fff;
	border-color: rgba(242, 140, 40, 0.3);
	box-shadow: 0 14px 30px rgba(90, 140, 61, 0.14);
}

.vp-account__quick-card strong {
	font-size: 1.15rem;
	font-weight: 900;
}

.vp-account__quick-card span:last-child {
	font-size: 0.78rem;
	color: #6b7280;
	line-height: 1.5;
}

.vp-account__quick-icon {
	font-size: 1.6rem;
	margin-bottom: 0.15rem;
}

.vp-account__quick-card--accent {
	background: var(--vp-green);
	color: #fff;
}

.vp-account__quick-card--accent span:last-child {
	color: rgba(255, 255, 255, 0.85);
}

.vp-account__quick-card--accent:hover {
	background: var(--vp-green-hover);
	border-color: transparent;
}

.vp-account__section-title {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	font-weight: 900;
}

.vp-account__see-all {
	margin: 1rem 0 0;
	text-align: left;
}

.vp-account__see-all a {
	color: var(--vp-green);
	font-weight: 700;
	text-decoration: none;
	font-size: 0.85rem;
}

.vp-account__see-all a:hover {
	color: var(--vp-orange);
}

.vp-account__empty {
	margin: 0;
}

/* =========================================================
   Notices
   ========================================================= */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.25rem;
	border-radius: 1.1rem;
	font-size: 0.88rem;
	font-weight: 600;
}

.woocommerce-account .woocommerce-message {
	background: rgba(90, 140, 61, 0.1);
	color: var(--vp-green-hover);
	border: 1px solid rgba(90, 140, 61, 0.25);
}

.woocommerce-account .woocommerce-message::before {
	content: '✅';
}

.woocommerce-account .woocommerce-error {
	background: rgba(220, 38, 38, 0.08);
	color: #b91c1c;
	border: 1px solid rgba(220, 38, 38, 0.25);
}

.woocommerce-account .woocommerce-error::before {
	content: '⚠️';
}

.woocommerce-account .woocommerce-info {
	background: rgba(242, 140, 40, 0.08);
	color: #9a5417;
	border: 1px solid rgba(242, 140, 40, 0.25);
}

.woocommerce-account .woocommerce-info::before {
	content: 'ℹ️';
}

.woocommerce-account .woocommerce-message a.button,
.woocommerce-account .woocommerce-error a.button,
.woocommerce-account .woocommerce-info a.button {
	margin-inline-start: auto;
	flex-shrink: 0;
}

/* =========================================================
   Buttons (generic .button / .woocommerce-Button)
   ========================================================= */

.woocommerce-account .button,
.woocommerce-account .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 1.35rem;
	border-radius: 999px;
	border: 0;
	background: var(--vp-green);
	color: #fff !important;
	font-weight: 800;
	font-size: 0.85rem;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: 0 8px 18px rgba(90, 140, 61, 0.25);
}

.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-Button:hover {
	background: var(--vp-green-hover);
	transform: translateY(-1px);
	color: #fff !important;
}

.woocommerce-account .button.cancel,
.woocommerce-account a.button.cancel {
	background: #fff;
	color: var(--vp-dark) !important;
	border: 1.5px solid rgba(74, 59, 50, 0.15);
	box-shadow: none;
}

.woocommerce-account .button.cancel:hover {
	border-color: #dc2626;
	color: #dc2626 !important;
	background: rgba(220, 38, 38, 0.06);
}

.woocommerce-account .button.pay,
.woocommerce-account a.button.pay {
	background: var(--vp-orange);
	box-shadow: 0 8px 18px rgba(242, 140, 40, 0.3);
}

.woocommerce-account .button.pay:hover {
	background: #d67a1f;
}

/* =========================================================
   Orders table (dashboard preview + orders.php)
   ========================================================= */

.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td,
.woocommerce-account table.woocommerce-orders-table th,
.woocommerce-account table.woocommerce-orders-table td,
.woocommerce-account table.woocommerce-table th,
.woocommerce-account table.woocommerce-table td {
	padding: 0.85rem 1rem;
	text-align: right;
	border-bottom: 1px solid rgba(74, 59, 50, 0.08);
}

.woocommerce-account table.shop_table thead th,
.woocommerce-account table.woocommerce-orders-table thead th,
.woocommerce-account table.woocommerce-table thead th {
	background: var(--vp-light);
	color: var(--vp-dark);
	font-weight: 800;
	font-size: 0.8rem;
}

.woocommerce-account table.shop_table thead tr:first-child th:first-child,
.woocommerce-account table.woocommerce-orders-table thead tr:first-child th:first-child {
	border-radius: 0.85rem 0 0 0;
}

.woocommerce-account table.shop_table thead tr:first-child th:last-child,
.woocommerce-account table.woocommerce-orders-table thead tr:first-child th:last-child {
	border-radius: 0 0.85rem 0 0;
}

.woocommerce-account table.shop_table tbody tr:hover,
.woocommerce-account table.woocommerce-orders-table tbody tr:hover {
	background: rgba(90, 140, 61, 0.04);
}

.woocommerce-account table.shop_table tbody tr:last-child td,
.woocommerce-account table.woocommerce-orders-table tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: flex-start;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	padding: 0.45rem 1rem;
	font-size: 0.75rem;
}

/* Order status pill */
.vp-order-status {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	background: var(--vp-light);
	color: var(--vp-dark);
}

.vp-order-status--completed {
	background: rgba(90, 140, 61, 0.14);
	color: var(--vp-green-hover);
}

.vp-order-status--processing {
	background: rgba(242, 140, 40, 0.14);
	color: #b45309;
}

.vp-order-status--on-hold {
	background: rgba(107, 114, 128, 0.14);
	color: #4b5563;
}

.vp-order-status--pending {
	background: rgba(252, 211, 77, 0.25);
	color: #92660a;
}

.vp-order-status--cancelled,
.vp-order-status--failed,
.vp-order-status--refunded {
	background: rgba(220, 38, 38, 0.1);
	color: #b91c1c;
}

/* Responsive stacked table (mirrors WooCommerce's own shop_table_responsive
 * behaviour, reimplemented here because default WC CSS is disabled) */
@media (max-width: 640px) {
	.woocommerce-account table.shop_table_responsive thead,
	.woocommerce-account table.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-account table.shop_table_responsive tr,
	.woocommerce-account table.woocommerce-orders-table tr {
		display: block;
		margin-bottom: 0.85rem;
		border: 1px solid rgba(74, 59, 50, 0.08);
		border-radius: 1rem;
		overflow: hidden;
	}

	.woocommerce-account table.shop_table_responsive td,
	.woocommerce-account table.woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		border-bottom: 1px solid rgba(74, 59, 50, 0.06);
		text-align: left;
	}

	.woocommerce-account table.shop_table_responsive td::before,
	.woocommerce-account table.woocommerce-orders-table td[data-title]::before {
		content: attr(data-title);
		font-weight: 800;
		color: #6b7280;
		font-size: 0.75rem;
		flex-shrink: 0;
	}

	.woocommerce-account table.shop_table_responsive td:last-child,
	.woocommerce-account table.woocommerce-orders-table td:last-child {
		border-bottom: 0;
	}

	.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
	}
}

/* =========================================================
   Single order view (view-order.php)
   ========================================================= */

.woocommerce-account .woocommerce-order {
	margin-top: 0;
}

.woocommerce-account .woocommerce-order > p:first-child {
	padding: 1rem 1.25rem;
	background: rgba(90, 140, 61, 0.08);
	border: 1px solid rgba(90, 140, 61, 0.2);
	border-radius: 1.1rem;
	color: var(--vp-green-hover);
	font-weight: 600;
}

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	margin: 1.5rem 0;
}

.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-order-downloads__title {
	font-size: 1.05rem;
	font-weight: 900;
	color: var(--vp-dark);
	margin: 0 0 1rem;
}

.woocommerce-account .woocommerce-table--order-details tfoot th,
.woocommerce-account .woocommerce-table--order-details tfoot td {
	font-weight: 800;
}

.woocommerce-account ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.woocommerce-account ul.woocommerce-order-overview li {
	flex: 1 1 8rem;
	padding: 1rem;
	background: var(--vp-light);
	border-radius: 1.1rem;
	font-size: 0.78rem;
	color: #6b7280;
	text-align: center;
}

.woocommerce-account ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.95rem;
	color: var(--vp-dark);
	font-weight: 800;
}

.woocommerce-account address {
	font-style: normal;
	line-height: 1.8;
	color: #4b5563;
}

.woocommerce-account .woocommerce-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 700px) {
	.woocommerce-account .woocommerce-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account .woocommerce-column {
	padding: 1.25rem;
	background: var(--vp-light);
	border-radius: 1.25rem;
}

/* =========================================================
   Addresses (addresses.php)
   ========================================================= */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 700px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account .woocommerce-Address {
	position: relative;
	padding: 1.5rem;
	background: var(--vp-light);
	border: 1px solid transparent;
	border-radius: 1.5rem;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.woocommerce-account .woocommerce-Address:hover {
	background: #fff;
	border-color: rgba(242, 140, 40, 0.28);
	box-shadow: 0 14px 28px rgba(90, 140, 61, 0.1);
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 900;
	color: var(--vp-dark);
}

.woocommerce-account .woocommerce-Address-title .edit {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--vp-green);
	text-decoration: none;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
	color: var(--vp-orange);
}

/* =========================================================
   Forms (edit-account.php, edit-address.php, checkout-style rows)
   ========================================================= */

.woocommerce-account form .form-row {
	margin: 0 0 1.1rem;
}

.woocommerce-account form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--vp-dark);
}

.woocommerce-account form label .required {
	color: var(--vp-orange);
	text-decoration: none;
}

.woocommerce-account form .input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form input[type="number"],
.woocommerce-account form select,
.woocommerce-account form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 1rem;
	border: 1.5px solid rgba(74, 59, 50, 0.12);
	border-radius: 0.9rem;
	background: var(--vp-light);
	font: inherit;
	font-size: 0.88rem;
	color: var(--vp-dark);
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account form .input-text:focus,
.woocommerce-account form input:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
	outline: none;
	border-color: var(--vp-green);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(90, 140, 61, 0.12);
}

.woocommerce-account form .select2-container .select2-selection--single {
	height: auto;
	padding: 0.55rem 1rem;
	border: 1.5px solid rgba(74, 59, 50, 0.12);
	border-radius: 0.9rem;
	background: var(--vp-light);
}

.woocommerce-account form fieldset {
	border: 1px dashed rgba(74, 59, 50, 0.15);
	border-radius: 1.1rem;
	padding: 1.25rem;
	margin: 0 0 1.25rem;
}

.woocommerce-account form fieldset legend {
	padding: 0 0.5rem;
	font-weight: 800;
	color: var(--vp-dark);
	font-size: 0.9rem;
}

.woocommerce-account form .clear {
	clear: both;
}

@media (min-width: 640px) {
	.woocommerce-account form.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-account form .woocommerce-address-fields .form-row-first,
	.woocommerce-account form.register .form-row-first {
		float: right;
		width: 48%;
	}

	.woocommerce-account form.woocommerce-EditAccountForm .form-row-last,
	.woocommerce-account form .woocommerce-address-fields .form-row-last,
	.woocommerce-account form.register .form-row-last {
		float: left;
		width: 48%;
	}
}

/* =========================================================
   Login / Register (form-login.php)
   ========================================================= */

.woocommerce-account .u-columns.woocommerce-Addresses,
.woocommerce-account .u-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 760px) {
	.woocommerce-account .u-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	background: var(--vp-light);
	border-radius: 1.5rem;
	padding: 1.75rem;
}

.woocommerce-account .woocommerce-form-login-toggle,
.woocommerce-account .woocommerce-form-register-toggle {
	margin-bottom: 1.25rem;
}

.woocommerce-account form.woocommerce-form-login .form-row,
.woocommerce-account form.woocommerce-form-register .form-row {
	margin-bottom: 1.1rem;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #6b7280;
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account button[name="save_account_details"],
.woocommerce-account button[name="save_address"] {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.85rem 1.5rem;
	font-size: 0.92rem;
}

.woocommerce-account .lost_password {
	margin-top: 0.85rem;
	font-size: 0.82rem;
}

.woocommerce-account .lost_password a {
	color: var(--vp-green);
	text-decoration: none;
	font-weight: 700;
}

.woocommerce-account .lost_password a:hover {
	color: var(--vp-orange);
}

/* =========================================================
   Downloads (downloads.php)
   ========================================================= */

.woocommerce-account .woocommerce-MyAccount-downloads-file {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--vp-green);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-downloads-file::before {
	content: '⬇️';
}

.woocommerce-account .woocommerce-MyAccount-downloads-file:hover {
	color: var(--vp-orange);
}

/* =========================================================
   Pagination
   ========================================================= */

.woocommerce-account .woocommerce-pagination {
	margin-top: 1.5rem;
}

.woocommerce-account .woocommerce-pagination .woocommerce-button {
	padding: 0.55rem 1.15rem;
	font-size: 0.8rem;
}