/* ========================================
   B2B My Account — Base
   Shared styles for every Mi Cuenta endpoint:
   layout, sidebar, shared keyframes, shared buttons/tables/forms/notices.
   Per-endpoint styles live in myaccount-{endpoint}.css and declare this file
   as a dependency so they cascade after.
   ======================================== */

/* --- Layout: sidebar + content side by side --- */
.woocommerce-account .woocommerce {
	display: flex;
	gap: 2rem;
	padding: 2rem;
	max-width: 100%;
}

/* --- Sidebar navigation --- */
.woocommerce-MyAccount-navigation {
	flex: 0 0 240px;
	min-width: 240px;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--b2b-gray-50);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--b2b-gray-100);
}

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

.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--b2b-gray-600);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: all 0.15s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--b2b-gold);
	background: var(--b2b-white);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	font-weight: 600;
	color: var(--b2b-navy);
	background: var(--b2b-white);
	border-left-color: var(--b2b-gold);
}

/* --- Content area --- */
.woocommerce-MyAccount-content {
	flex: 1;
	min-height: 300px;
	min-width: 0;
}

/* ========================================
   Shared keyframes
   Used by dashboard, orders, view-order and edit-account stylesheets.
   ======================================== */

@keyframes b2bDashboardFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes b2bDashboardFadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ========================================
   Shared — Buttons
   ======================================== */

.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content input[type="submit"] {
	background: var(--b2b-gold);
	color: #fff;
	border: none;
	padding: 0.6rem 1.25rem;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.15s;
}

.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
	background: var(--b2b-gold-light);
}

/* ========================================
   Shared — B2B Plugin Tables
   ======================================== */

.woocommerce-MyAccount-content table.b2b-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	box-shadow: 0 1px 3px rgba(27, 42, 74, 0.08);
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce-MyAccount-content table.b2b-table th {
	text-align: left;
	padding: 0.6rem 0.75rem;
	background: var(--b2b-navy);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce-MyAccount-content table.b2b-table td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--b2b-gray-100);
	vertical-align: middle;
}

.woocommerce-MyAccount-content table.b2b-table tbody tr:hover {
	background: var(--b2b-gray-50);
}

.woocommerce-MyAccount-content table.b2b-table td a,
.woocommerce-MyAccount-content .b2b-sl-items-table td a,
.woocommerce-MyAccount-content .b2b-sl-favorites-table td a {
	color: var(--b2b-navy) !important;
	text-decoration: none !important;
}

.woocommerce-MyAccount-content table.b2b-table td a:hover,
.woocommerce-MyAccount-content .b2b-sl-items-table td a:hover,
.woocommerce-MyAccount-content .b2b-sl-favorites-table td a:hover {
	color: var(--b2b-gold) !important;
}

/* ========================================
   Shared — Empty state
   ======================================== */

.b2b-empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--b2b-gray-600);
}

/* ========================================
   Shared — Form styles for custom tabs
   ======================================== */

.woocommerce-MyAccount-content .b2b-form-group {
	margin-bottom: 1rem;
}

.woocommerce-MyAccount-content .b2b-form-group label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--b2b-navy);
}

.woocommerce-MyAccount-content .b2b-form-group input,
.woocommerce-MyAccount-content .b2b-form-group textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--b2b-gray-200);
	border-radius: 4px;
	font-size: 0.9rem;
}

.woocommerce-MyAccount-content .b2b-form-group input:focus,
.woocommerce-MyAccount-content .b2b-form-group textarea:focus {
	outline: none;
	border-color: var(--b2b-gold);
	box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
}

/* ========================================
   WooCommerce notices in My Account
   ======================================== */

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
	position: relative;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--b2b-gold);
	background: #fdf8f0;
	border-radius: 4px;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.woocommerce-MyAccount-content .woocommerce-error {
	position: relative;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--b2b-danger);
	background: #fff5f5;
	border-radius: 4px;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-error::before {
	display: none;
}

/* ========================================
   Responsive — Layout + shared tables
   ======================================== */

@media (max-width: 768px) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
		padding: 1rem;
	}

	.woocommerce-MyAccount-navigation {
		flex: none;
		min-width: 100%;
	}

	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
	}

	.woocommerce-MyAccount-navigation ul li a {
		padding: 0.5rem 0.75rem;
		font-size: 0.8rem;
		border-left: none;
		border-bottom: 3px solid transparent;
	}

	.woocommerce-MyAccount-navigation ul li.is-active a {
		border-left-color: transparent;
		border-bottom-color: var(--b2b-gold);
	}

	.woocommerce-MyAccount-content table.b2b-table {
		font-size: 0.8125rem;
	}

	.woocommerce-MyAccount-content table.b2b-table th,
	.woocommerce-MyAccount-content table.b2b-table td {
		padding: 0.5rem;
	}
}