/* Variables globals de disseny per DMS3 My Account */
:root {
	--dms3-color-bg: #ffffff;
	--dms3-color-bg-soft: #f9fafb;
	--dms3-color-bg-active: #f4f5f7;
	--dms3-color-border: #eef2f7;
	--dms3-color-input-border: #e5e7eb;

	--dms3-color-text-main: #111827;
	--dms3-color-text-muted: #6b7280;
	--dms3-color-text-soft: #9ca3af;
	--dms3-color-text-nav: #4b5563;

	--dms3-color-accent: #0f766e;
	--dms3-color-accent-light: #ecfdf5;

	--dms3-color-primary: #ff8a24;
	--dms3-color-primary-hover: #f97316;

	--dms3-color-danger: #ef4444;
	--dms3-color-danger-hover: #b91c1c;
	--dms3-color-danger-soft-bg: rgba(239, 68, 68, 0.06);

	--dms3-color-on-primary: #ffffff;

	--dms3-radius-lg: 16px;
	--dms3-radius-md: 12px;
	--dms3-radius-pill: 999px;

	--dms3-icon-size: 20px;

	--dms3-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
	--dms3-shadow-strong: 0 16px 40px rgba(15, 23, 42, 0.10);
	--dms3-shadow-button: 0 10px 24px rgba(248, 148, 52, 0.40);
	--dms3-shadow-focus-accent: 0 0 0 1px rgba(15, 118, 110, 0.25);
}

/* Targeta del lateral (nom + correu + menú) */
.dms3-myaccount-sidebar-card {
	background: var(--dms3-color-bg);
	border-radius: var(--dms3-radius-lg);
	padding: 20px 18px 18px;
	box-shadow: var(--dms3-shadow-strong);
	border: 1px solid var(--dms3-color-border);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* Bloc superior: nom i correu (sense imatge) */
.dms3-myaccount-user {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--dms3-color-border);
}

.dms3-myaccount-user-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dms3-myaccount-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--dms3-color-text-main);
}

.dms3-myaccount-email {
	font-size: 13px;
	color: var(--dms3-color-text-muted);
}

/* Menú de My Account dins la targeta */
.woocommerce-MyAccount-navigation {
	margin: 0;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0;
	padding: 8px 0 0 !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation a {
	display: inline-block;
	width: 100%;
	padding: 10px 16px 10px 48px;
	border-radius: 0 12px 12px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--dms3-color-text-nav);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	position: relative;
}

/* Icones del menú: utilitzem currentColor perquè heretin el color del text */
.woocommerce-MyAccount-navigation a::before {
	content: "";
	position: absolute;
	display: none; /* s'activa només als ítems que tenen icona */
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: var(--dms3-icon-size);
	height: var(--dms3-icon-size);
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
 
.woocommerce-MyAccount-navigation-link--contratar a::before {
	display: block;
	-webkit-mask-image: url('../icons/contratar-houzpop.svg');
	mask-image: url('../icons/contratar-houzpop.svg');
}

.woocommerce-MyAccount-navigation-link--upgrades a::before {
	display: block;
	-webkit-mask-image: url('../icons/upgrades-houzpop.svg');
	mask-image: url('../icons/upgrades-houzpop.svg');
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
	display: block;
	-webkit-mask-image: url('../icons/user-houzpop.svg');
	mask-image: url('../icons/user-houzpop.svg');
}

.woocommerce-MyAccount-navigation-link--houzcheck a::before {
	display: block;
	-webkit-mask-image: url('../icons/form-houzpop.svg');
	mask-image: url('../icons/form-houzpop.svg');
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	display: block;
	-webkit-mask-image: url('../icons/salir-houzpop.svg');
	mask-image: url('../icons/salir-houzpop.svg');
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--dms3-color-bg-soft);
	color: var(--dms3-color-text-main);
}

/* Enllaç actiu: gris clar amb barra taronja al lateral esquerre */
.woocommerce-MyAccount-navigation .is-active a {
	position: relative;
	background: var(--dms3-color-bg-active);
	color: var(--dms3-color-text-main);
	border-left: 4px solid var(--dms3-color-primary);
}

/* Enllaç de sortida en vermell amb separador superior */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 15px !important;
	padding-top: 15px;
	border-top: 1px solid var(--dms3-color-border);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--dms3-color-danger);
	font-weight: 600;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: var(--dms3-color-danger-soft-bg); 
	color: var(--dms3-color-danger-hover);
}

/* Columna dreta: contingut de My Account */
.woocommerce-MyAccount-content {
	flex: 1 1 auto;
	max-width: none;
	width: 100%;
}

/* Contingut principal: no forcem cap card global perquè no trenqui altres seccions */
.woocommerce-account .woocommerce-MyAccount-content > * {
	max-width: 100%;
}

/* Títols i subtítols */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	margin-top: 0;
	color: var(--dms3-color-text-main);
	font-weight: 700;
}

.dms3-myaccount-dashboard-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--dms3-color-text-main);
	margin-top: 0;
	margin-bottom: 10px;
}

.dms3-myaccount-dashboard-meta {
	font-size: 13px;
	color: var(--dms3-color-text-muted);
	margin-top: 0;
	margin-bottom: 18px;
}

.dms3-myaccount-dashboard-logout {
	color: var(--dms3-color-accent);
	font-weight: 500;
	margin-left: 4px;
	text-decoration: none;
}

.dms3-myaccount-dashboard-logout:hover {
	text-decoration: underline;
}

.dms3-myaccount-dashboard-text {
	color: var(--dms3-color-text-muted);
	font-size: 14px;
	margin-bottom: 10px;
	max-width: 680px;
}

.dms3-myaccount-dashboard-tagline {
	color: var(--dms3-color-text-main);
	font-size: 14px;
	font-weight: 600;
	margin-top: 16px;
}

.woocommerce-MyAccount-content p {
	color: var(--dms3-color-text-muted);
	font-size: 14px;
}

/* Formulari "Detalls del compte" (edit-account) */
.woocommerce-EditAccountForm fieldset {
	border: none;
	padding: 0;
	margin: 0 0 18px;
}

.woocommerce-EditAccountForm legend {
	font-size: 16px;
	font-weight: 600;
	color: var(--dms3-color-text-main);
	margin-bottom: 10px;
}

.woocommerce-EditAccountForm p {
	margin-bottom: 14px;
}

.woocommerce-EditAccountForm label {
	font-size: 13px;
	font-weight: 500;
	color: var(--dms3-color-text-nav);
	margin-bottom: 4px;
}

.woocommerce-EditAccountForm input.input-text {
	width: 100%;
	border-radius: var(--dms3-radius-md);
	border: 1px solid var(--dms3-color-input-border);
	padding: 9px 11px;
	font-size: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-EditAccountForm input.input-text:focus {
	border-color: var(--dms3-color-accent);
	box-shadow: var(--dms3-shadow-focus-accent);
	outline: none;
}

/* Botó guardar canvis */
.woocommerce-EditAccountForm button.button {
	border-radius: var(--dms3-radius-pill);
	background: var(--dms3-color-primary);
	border: none;
	padding: 10px 24px;
	font-weight: 600;
	color: var(--dms3-color-on-primary);
	box-shadow: var(--dms3-shadow-button);
	cursor: pointer;
}

.woocommerce-EditAccountForm button.button:hover {
	background: var(--dms3-color-primary-hover);
}

/* Responsiu per pantalles petites */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-content > * {
		padding: 18px 16px 22px;
	}
}