/* ==========================================================================
   PWD WooCommerce My Account Customizer — Frontend Styles
   Version: 1.0.14
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables — fallback defaults (overridden inline by wp_add_inline_style)
   -------------------------------------------------------------------------- */
:root {
	--pwd-sidebar-bg:          #f8f8f8;
	--pwd-sidebar-text:        #5b2fa2;
	--pwd-sidebar-active-bg:   #e8e0f5;
	--pwd-sidebar-active-text: #5b2fa2;
	--pwd-sidebar-hover-bg:    #ede6f8;
	--pwd-tile-bg:             #ffffff;
	--pwd-tile-border:         #e5e5e5;
	--pwd-tile-radius:         12px;
	--pwd-tile-icon:           #aaaaaa;
	--pwd-tile-text:           #222222;
	--pwd-tile-hover-bg:       #f3eefc;
	--pwd-tile-hover-border:   #5b2fa2;
	--pwd-tile-hover-icon:     #5b2fa2;
	--pwd-notice-bg:           #1a5276;
	--pwd-notice-text:         #ffffff;
	--pwd-font-size-nav:       14px;
	--pwd-font-size-tile:      13px;
}

/* --------------------------------------------------------------------------
   WooCommerce Notice Override
   -------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce .woocommerce-message {
	background-color: var(--pwd-notice-bg) !important;
	color: var(--pwd-notice-text) !important;
	border-top-color: rgba(255,255,255,.2) !important;
	border-radius: 8px;
	margin-bottom: 16px;
}
.woocommerce-MyAccount-content .woocommerce-message a,
.woocommerce .woocommerce-message a {
	color: var(--pwd-notice-text) !important;
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,.5);
}
.woocommerce-MyAccount-content .woocommerce-message a:hover {
	text-decoration-color: var(--pwd-notice-text);
}

/* --------------------------------------------------------------------------
   Sidebar Navigation
   !important used selectively to beat theme/WC global link and bg rules.
   -------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation {
	background: var(--pwd-sidebar-bg) !important;
	border-radius: 10px;
	overflow: hidden;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0 !important;
	padding: 8px 0 !important;
	list-style: none !important;
	background: transparent !important;
}

.woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
	display: block !important;
	padding: 10px 18px !important;
	color: var(--pwd-sidebar-text) !important;
	font-size: var(--pwd-font-size-nav) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	background: transparent !important;
	border-left: 3px solid transparent !important;
	transition: background .15s ease, color .15s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--pwd-sidebar-hover-bg) !important;
	color: var(--pwd-sidebar-text) !important;
	text-decoration: none !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
	background: var(--pwd-sidebar-active-bg) !important;
	color: var(--pwd-sidebar-active-text) !important;
	border-left-color: var(--pwd-sidebar-active-text) !important;
	font-weight: 600 !important;
}

/* Icons/SVG inside nav items some themes add */
.woocommerce-MyAccount-navigation ul li a svg,
.woocommerce-MyAccount-navigation ul li a i {
	color: var(--pwd-sidebar-text) !important;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Dashboard Grid
   -------------------------------------------------------------------------- */
.pwd-wcmac-grid {
	display: grid;
	gap: 16px;
	margin-bottom: 28px;
}

.pwd-wcmac-grid-cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.pwd-wcmac-grid-cols-3 { grid-template-columns: repeat( 3, 1fr ); }
.pwd-wcmac-grid-cols-4 { grid-template-columns: repeat( 4, 1fr ); }

/* --------------------------------------------------------------------------
   Tile
   Themes target <a> globally. We use !important on colour/decoration
   so our tiles are never hijacked by theme link rules.
   -------------------------------------------------------------------------- */
.pwd-wcmac-tile {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px;
	padding: 28px 16px;
	background: var(--pwd-tile-bg) !important;
	border: 1.5px solid var(--pwd-tile-border) !important;
	border-radius: var(--pwd-tile-radius) !important;
	text-decoration: none !important;
	color: var(--pwd-tile-text) !important;
	box-shadow: none;
	transition:
		background .2s ease,
		border-color .2s ease,
		box-shadow .2s ease,
		transform .15s ease;
}

.pwd-wcmac-tile:hover,
.pwd-wcmac-tile:focus {
	background: var(--pwd-tile-hover-bg) !important;
	border-color: var(--pwd-tile-hover-border) !important;
	box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
	transform: translateY(-2px);
	text-decoration: none !important;
	color: var(--pwd-tile-text) !important;
	outline: none;
}

/* --------------------------------------------------------------------------
   Tile Icon
   Explicit colour — cannot rely on inheritance through <a> because
   themes target a > svg, a:hover > svg etc. with their own colours.
   -------------------------------------------------------------------------- */
.pwd-wcmac-tile .pwd-wcmac-tile-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--pwd-tile-icon) !important;
	transition: color .2s ease;
}

.pwd-wcmac-tile:hover .pwd-wcmac-tile-icon,
.pwd-wcmac-tile:focus .pwd-wcmac-tile-icon {
	color: var(--pwd-tile-hover-icon) !important;
}

.pwd-wcmac-tile .pwd-wcmac-tile-icon svg {
	display: block !important;
	width: var( --pwd-tile-icon-size, 32px ) !important;
	height: var( --pwd-tile-icon-size, 32px ) !important;
	color: inherit !important;
	fill: none !important;
	stroke: currentColor !important;
}

/* --------------------------------------------------------------------------
   Tile Label
   Explicit colour — themes colouring child text nodes of <a> tags
   will override inherited colour, so we declare it directly.
   -------------------------------------------------------------------------- */
.pwd-wcmac-tile .pwd-wcmac-tile-label {
	font-size: var(--pwd-font-size-tile) !important;
	font-weight: 600 !important;
	text-align: center !important;
	line-height: 1.3;
	color: var(--pwd-tile-text) !important;
}

/* --------------------------------------------------------------------------
   Dashboard Welcome Text
   -------------------------------------------------------------------------- */
.pwd-wcmac-welcome {
	margin-bottom: 20px;
	line-height: 1.6;
}
.pwd-wcmac-welcome p {
	margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   Mobile Nav Collapse
   -------------------------------------------------------------------------- */
.pwd-nav-toggle {
	display: none;
}

@media ( max-width: 768px ) {
	.pwd-nav-toggle {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 12px 18px;
		background: transparent;
		border: none;
		cursor: pointer;
		font-size: var( --pwd-font-size-nav, 14px );
		font-weight: 600;
		color: var( --pwd-sidebar-text ) !important;
		text-align: left;
	}

	.pwd-nav-toggle svg {
		transition: transform .2s ease;
		flex-shrink: 0;
		color: var( --pwd-sidebar-text ) !important;
	}

	/* Collapsed state — list hidden, chevron points down */
	.woocommerce-MyAccount-navigation.pwd-nav-collapsed ul {
		display: none !important;
	}

	/* Expanded state — chevron flips up */
	.woocommerce-MyAccount-navigation:not(.pwd-nav-collapsed) .pwd-nav-toggle svg {
		transform: rotate( 180deg );
	}
}

/* --------------------------------------------------------------------------
   Custom Endpoint Content Area
   -------------------------------------------------------------------------- */
.pwd-wcmac-endpoint-content {
	padding: 8px 0;
}
.pwd-wcmac-endpoint-content.pwd-wcmac-empty {
	color: #888;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media ( max-width: 768px ) {
	.pwd-wcmac-grid-cols-3,
	.pwd-wcmac-grid-cols-4 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.pwd-wcmac-grid-cols-2,
	.pwd-wcmac-grid-cols-3,
	.pwd-wcmac-grid-cols-4 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.pwd-wcmac-tile {
		padding: 20px 12px;
	}
}