/*
 * CoralBay Account Navigation
 * -----------------------------------------------------------------
 * The hex values below are a close approximation of the CoralBay blue
 * seen elsewhere on the site (the "UK Reef Market" / "Reef shops"
 * pills). Adjust --cban-blue / --cban-blue-dark to match your exact
 * brand colour if needed - everything else derives from these.
 *
 * --cban-sticky-top controls how far down the bar sticks from the top
 * of the viewport on desktop, so it sits just below your site's own
 * sticky header instead of under it. Set this to that header's height
 * (in px) - default 0 assumes nothing else is fixed/sticky above it.
 */

.cban-account-nav {
	--cban-blue: #1f8fce;
	--cban-blue-dark: #136896;
	--cban-pale: #eaf6fc;
	--cban-pale-hover: #d9eef8;
	--cban-navy: #163a52;
	--cban-red: #d9453d;
	--cban-red-bg: #fdeceb;
	--cban-radius: 12px;
	--cban-row-radius: 8px;
	--cban-sticky-top: 0px;

	width: 100%;
	font-size: 14px;
	position: relative;
}

.cban-account-nav ul,
.cban-account-nav li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

/* Some themes (Divi's WooCommerce integration included) lay the
   default My Account page out as a two-column layout - a narrower nav
   column beside a wider content column - built with float, flexbox,
   or CSS grid depending on the theme. Our nav no longer uses the
   .woocommerce-MyAccount-navigation element at all, so with a grid-
   based layout in particular, the content div can end up placed into
   just that leftover narrow column instead of spanning the row.
   Covering all three mechanisms here so content reliably takes the
   full width regardless of which one the theme actually used. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100% !important;
	float: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	flex: 1 1 100% !important;
	grid-column: 1 / -1 !important;
	clear: both;
}

/* ---------- the bar itself ---------- */

.cban-topbar {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	width: 100%;
	background: var(--cban-pale);
	border-radius: var(--cban-radius);
	padding: 4px;
	gap: 4px;
	position: sticky;
	top: var(--cban-sticky-top);
	z-index: 500;
}

/* ---------- shared row/button look ---------- */

.cban-main-btn,
.cban-flyout a,
.cban-user-toggle,
.cban-quick-logout {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	text-align: left;
	text-decoration: none;
	color: var(--cban-navy);
	font: inherit;
	cursor: pointer;
	padding: 10px 12px;
	border-radius: var(--cban-row-radius);
	transition: background-color 150ms ease, box-shadow 150ms ease;
	white-space: nowrap;
}

.cban-main-btn:hover,
.cban-flyout a:hover,
.cban-user-toggle:hover,
.cban-quick-logout:hover {
	background-color: var(--cban-pale-hover);
}

.cban-icon {
	flex: 0 0 auto;
	width: 1.2em;
	text-align: center;
	font-size: 1.05em;
}

.cban-label,
.cban-user-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cban-chevron {
	flex: 0 0 auto;
	opacity: 0.55;
	font-size: 0.8em;
}

/* Meaningless on desktop (the identity button isn't a toggle there) -
   shown only on mobile, see breakpoint below. */
.cban-user-chevron {
	display: none;
}

/* ---------- badges ---------- */

.cban-badge {
	flex: 0 0 auto;
	background: var(--cban-red);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 999px;
	min-width: 1.4em;
	text-align: center;
}

/* ---------- left zone: the 4 section buttons, ~2/3 of the bar ---------- */

.cban-main-list {
	display: flex;
	align-items: stretch;
	gap: 4px;
	flex: 2 1 0;
	min-width: 0;
}

.cban-main-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.cban-main-item .cban-main-btn {
	width: 100%;
	justify-content: center;
	padding: 10px 8px;
	font-weight: 600;
}

.cban-main-item .cban-icon {
	font-size: 1.15em;
}

/* Active section / current page */

.cban-main-item.is-current-section > .cban-main-btn,
.cban-flyout a.is-current {
	background: var(--cban-blue);
	color: #fff;
	box-shadow: 0 3px 8px rgba(31, 143, 206, 0.35);
}

.cban-main-item.is-current-section > .cban-main-btn:hover,
.cban-flyout a.is-current:hover {
	background: var(--cban-blue-dark);
}

/* Dropdown panel: opens BELOW its button, floats above all page content */

.cban-flyout {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
	min-width: 220px;
	background: #fff;
	border: 1px solid rgba(22, 58, 82, 0.08);
	border-radius: var(--cban-radius);
	box-shadow: 0 8px 24px rgba(22, 58, 82, 0.15);
	padding: 6px;
	z-index: 9999;
}

.cban-main-item.is-open > .cban-flyout {
	display: block;
}

.cban-main-item.is-open > .cban-main-btn {
	background: var(--cban-pale-hover);
}

/* ---------- right zone: identity + logout, ~1/3 of the bar ---------- */

.cban-user-cluster {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	padding-left: 14px;
	border-left: 1px solid rgba(22, 58, 82, 0.12);
}

.cban-user-toggle {
	flex: 0 1 auto;
	min-width: 0;
}

.cban-menu-suffix {
	display: none; /* shown on mobile only - see breakpoint below */
}

.cban-quick-logout {
	flex: 0 0 auto;
	color: var(--cban-red);
}

.cban-quick-logout:hover {
	background: var(--cban-red-bg);
}

/* ---------- mobile: single toggle + inline accordion drawer ---------- */

@media (max-width: 768px) {

	.cban-topbar {
		position: static; /* no room to spare for a sticky bar on small screens */
		flex-wrap: wrap;
	}

	.cban-menu-suffix {
		display: inline;
	}

	.cban-user-chevron {
		display: inline;
	}

	.cban-user-cluster {
		order: 1;
		flex: 1 1 100%;
		justify-content: space-between;
		padding-left: 0;
		border-left: none;
	}

	.cban-user-toggle {
		cursor: pointer;
		flex: 1 1 auto;
	}

	.cban-user-toggle .cban-user-label {
		white-space: nowrap;
	}

	.cban-main-list {
		order: 3;
		flex: 1 0 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		margin-top: 8px;
	}

	.cban-main-item .cban-main-btn {
		justify-content: flex-start;
	}

	.cban-topbar.is-drawer-open .cban-main-list {
		display: flex;
	}

	/* The dropdown becomes an inline expanding panel inside the
	   accordion, not an absolutely-positioned popover, so it never
	   gets clipped and never pushes content in a jarring way. */
	.cban-flyout {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		box-shadow: none;
		border: none;
		margin-top: 2px;
		padding: 2px 0 2px 8px;
	}

	.cban-main-btn,
	.cban-flyout a,
	.cban-user-toggle,
	.cban-quick-logout {
		padding: 12px; /* larger touch targets */
	}
}