/**
 * Portal Header Styles
 *
 * @package BasketApiPro
 */

/* ===== Design Tokens ===== */
.bapro-portal-header {
	--bapro-grey: #f2f2f2;
	--bapro-black: #091f2c;
	--bapro-orange: #fa4616;
	--bapro-blue: #00a3e0;
	--bapro-text: #1a2a34;
	--bapro-border: #e6e6e6;
	--bapro-radius: 0;
	--bapro-shadow: 0;
}

.bapro-portal-header * {
	box-sizing: border-box;
}

.bapro-portal-header a {
	color: inherit;
	text-decoration: none;
}
.bapro-portal-header button {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	text-align: inherit;
	background: none;
	box-shadow: none;
	padding: 0;
	cursor: pointer;
	border: none;
	color: inherit;
	font: inherit;
  }

/* Container */
.bapro-portal-header .gc_container {
	/* width: min(1100px, 92vw); */
	margin-inline: auto;
	padding-inline: 20px;
}

/* Theme-safe page background only inside portal header area */
.bapro-portal-header {
	color: var(--bapro-text);
	background: var(--bapro-grey);
	margin-top: 1em;
}

/* Generic helpers */
.bapro-portal-header .gradient-grey {
	border-top: 3px solid var(--bapro-orange);
	border-bottom: 3px solid var(--bapro-blue);
	background: linear-gradient(#fff, #fff) padding-box,
		radial-gradient(1200px 120px at 50% -30%, var(--bapro-grey), transparent) border-box;
}
.bapro-portal-header .gradient-orange{
	background:linear-gradient(90deg,#f57c00 0%,#ef6c00 30%,#e65100 60%,#d84315 100%);
	padding:1rem;
  }

/* ===== Top bar ===== */
.bapro-portal-header .topbar {
	border-bottom: 3px solid var(--bapro-grey);
	background: #fff;
}

/* Admin bar spacing for topbar */
.admin-bar .bapro-portal-header .topbar {
	margin-top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .bapro-portal-header .topbar {
		margin-top: 46px;
	}
}

.bapro-portal-header .topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
}

.bapro-portal-header .topbar__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	color: var(--bapro-black);
}

.bapro-portal-header .topbar__brand img {
	height: 30px;
}

/* Burger */
.bapro-portal-header .burger {
	display: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--bapro-border);
	background: #fff;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.bapro-portal-header .burger__bar,
.bapro-portal-header .burger__bar::before,
.bapro-portal-header .burger__bar::after {
	content: "";
	display: block;
	width: 18px;
	height: 2px;
	background: var(--bapro-black);
	position: relative;
	transition: 0.25s ease;
}

.bapro-portal-header .burger__bar::before {
	position: absolute;
	top: -6px;
}

.bapro-portal-header .burger__bar::after {
	position: absolute;
	top: 6px;
}

.bapro-portal-header .burger.is-active .burger__bar {
	background: transparent;
}

.bapro-portal-header .burger.is-active .burger__bar::before {
	top: 0;
	transform: rotate(45deg);
}

.bapro-portal-header .burger.is-active .burger__bar::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Nav */
.bapro-portal-header .nav {
	display: flex;
}
.bapro-portal-header .nav, .bapro-portal-header .burger {
	display: none!important;
}


.bapro-portal-header .nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.bapro-portal-header .nav__link {
	display: inline-block;
	padding: 6px 2px;
	font-weight: 700;
	text-transform: capitalize;
	color: #4a5a65;
}

.bapro-portal-header .nav__link:hover {
	color: var(--bapro-black);
}

.bapro-portal-header .nav__link--active {
	color: var(--bapro-orange);
}

/* Drawer (mobile) */
.bapro-portal-header .nav__drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: 280px;
	max-width: 80vw;
	background: #fff;
	border-right: 1px solid var(--bapro-border);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 1000;
	padding: 20px;
}

/* Admin bar spacing for mobile drawer */
.admin-bar .bapro-portal-header .nav__drawer {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .bapro-portal-header .nav__drawer {
		top: 46px;
	}
}

.bapro-portal-header .nav__drawer .nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.bapro-portal-header .nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: 0.2s;
	z-index: 999;
}

/* Admin bar spacing for nav overlay */
.admin-bar .bapro-portal-header .nav-overlay {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .bapro-portal-header .nav-overlay {
		top: 46px;
	}
}

.bapro-portal-header .nav--open .nav__drawer {
	transform: translateX(0);
}

.bapro-portal-header .nav--open + .nav-overlay {
	opacity: 1;
	visibility: visible;
}

/* Hero */
.bapro-portal-header .hero__inner {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
}

.bapro-portal-header .hero__title {
	font-size: 34px;
	line-height: 1.1;
	font-weight: 800;
	color: var(--bapro-black);
	letter-spacing: 0.2px;
	margin: 0;
}

.bapro-portal-header .hero__powered {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #4b5b66;
	white-space: nowrap;
}

.bapro-portal-header .hero__powered img {
	max-height: 130px;
	display: block;
}

/* Responsive */
@media (max-width: 900px) {
	.bapro-portal-header .burger {
		display: flex;
	}

	.bapro-portal-header .nav {
		display: none;
	}

	.bapro-portal-header .nav--drawer {
		display: block;
	}
}

@media (max-width: 700px) {
	.bapro-portal-header .gradient-orange{
		padding:.5rem;
	  }
	.bapro-portal-header .hero__inner {
		justify-content: space-between;
		gap: 20px;
	}
	.bapro-portal-header .hero__title {
		font-size: 28px;
	}
	.bapro-portal-header .hero__powered img {
		max-height: 100px;
	}
}