/* from style.css */
:root {
	/* Colors: */

	--yellow: #f99d1c;

	--lightvarblack: #091821;
	--lightYellow: #ffda86;
	--lightBlue: #0e263e;
	--radicalRed: #ff3366;
	--charlestonGreen: #2c2c2c;
	--darkPink: #9e59fd;
	--black: #000000;
	--white: #ffffff;
	--yellow-fade: #fffaf0;
	--color-09182119: #09182119;
	--color-ffffff33: #ffffff33;
	--color-2C2C2C1A: #2c2c2c1a;
	--color-00000029: #00000029;
	--color-666666: #666666;
	--color-f2f2f2: #f2f2f2;
	--color-d4d4d4: #d4d4d4;
	--color-091821: #091821;
	--color-fffaf0: #fffaf0;
	--color-666: #666;
	--color-0918211A: #0918211a;
	--color-rgba00001: rgba(0, 0, 0, 0.1);
	--color999: #999;
	--color-faf9f8: #faf9f8;
	--color-ddd: #ddd;
	--color-7859A2: #7859a2;
	--color-999999: #999999;
	--color-f2f2f294: #f2f2f294;
	/* Font/Text values */
	--font-family-poppins: Poppins;
	--font-style-normal: normal;
	--font-weight-400: 400;
	--font-weight-600: 600;
	--font-weight-bold: bold;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-size-8: 8px;
	--font-size-9: 9px;
	--font-size-10: 10px;
	--font-size-12: 12px;
	--font-size-14: 14px;
	--font-size-16: 16px;
	--font-size-18: 18px;
	--font-size-20: 20px;
	--font-size-24: 24px;
	--font-size-32: 32px;
	--font-size-38: 32px;
}

.bidnow_welcome {
	position: sticky;
	border-bottom: 1px solid #f2f2f2;
	top: 0;
	padding-top: 16px;
	padding-bottom: 16px;
	z-index: 1001;
	background-color: var(--white);
}
.bidnow-overlay {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	min-height: 100vh;
	background-color: var(--white);
	opacity: 0;
	pointer-events: none !important;
}
.mobile-navbar .bidnow-overlay {
	opacity: 1;

	pointer-events: all !important;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--white);
	opacity: 0;
	pointer-events: none;
	transition: 0.4s all;
	z-index: 24;
	overflow: hidden !important;
}

.overlay-active .overlay {
	opacity: 1;
	overflow: hidden !important;
}

.account {
	display: none;
}

.overlay-active .account {
	display: block !important;
	z-index: 10000000;
	height: 32px !important;
	width: 32px !important;
}

.overlay-active #menu {
	display: none !important;
}

.account .one,
.account .two,
.account .three {
	width: 29px;
	height: 2px;
	background-color: var(--charlestonGreen);
	transition: 0.3s;
}

.account .three {
	width: 13.5px;
	height: 2px;
	background-color: var(--charlestonGreen);
	transition: 0.3s;
}

.account .two {
margin-bottom: 6px;
margin-top: 6px;
}

.overlay-active .account .three {
width: 0;
opacity: 0 !important;
}

.overlay-active .account .one {
transform-origin: center;
transform: translate(-2px, 10px) rotate(45deg);
}

.overlay-active .account .two {
transform: translate(-1px, 1px) rotate(-45deg);
transform-origin: center;
}

.overlay-active .overlay {
opacity: 1;
pointer-events: all;
}

.mobile-navbar .navbar-container {
flex-direction: column !important;
align-items: flex-start !important;
}

.overlay-content .or span {
width: 100%;
height: 1px;
display: inline-block;
background-color: var(--color-f2f2f2);
}

.overlay-content button {
border-radius: 5px;
background: var(--yellow);
border: none !important;
color: var(--white);
font-weight: var(--font-weight-bold);
}

#menu {
height: 32px !important;
width: 32px !important;
z-index: 1000;
}

.mobile-navbar .mobile-logo {
display: none !important;
}

.mobile-menu-list-items {
display: none !important;
}

.mobile-menu-list-items button:focus {
outline: none !important;
box-shadow: none;
}

.mobile-menu-list-items .card-header,
.mobile-menu-list-items .card-body {
padding-left: 0;
padding-right: 0;
}

.mobile-navbar .mobile-menu-list-items {
display: block !important;
}

.mobile-navbar .mobile-nav-button {
display: none !important;
}

.nav-button .dropdown button {
	font-size: 14px;
	font-weight: 500;
}
.nav-button a {
	padding: 10px !important;
}
.mobile-navbar .mobile-nav-button {
	display: none !important;
}
.mobile-menu-list-items {
	z-index: 4;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
}
.mobile-navbar .mobile-logo {
	display: none !important;
}
.mobile-menu-list-items {
	display: none !important;
}
.mobile-menu-list-items button:focus {
	outline: none !important;
	box-shadow: none;
}
.mobile-menu-list-items .card-header,
.mobile-menu-list-items .card-body {
	padding-left: 0;
	padding-right: 0;
}
.mobile-navbar .mobile-menu-list-items {
	display: block !important;
}
.mobile-navbar .mobile-nav-button {
	display: none !important;
}
.nav-button a {
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
}
.nav-hot-deals {
    background-color: rgb(255, 1, 0);
    color: var(--white);
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    font-size: 10px;
}

.card {
	background-color: transparent !important;
	border: none !important;
	position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

.card-header {
	background-color: transparent !important;
	border: none !important;
	padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.card-header button span {
	font-family: Poppins;
	font-weight: bold;
	font-size: var(--font-size-20);
	color: var(--lightBlue);
}

.menu-items-design {
	font-family: Poppins;
	font-weight: bold;
	font-size: var(--font-size-20);
	color: var(--lightBlue);
}

.card-body .dropdown-items {
	padding-left: 0 !important;
}

.items-box {
	background: var(--white) 0% 0% no-repeat padding-box;
	box-shadow: 0px 26px 41px var(--color-00000029);
	border-radius: 10px;
	opacity: 1;
}
.dropdown.show a.dropdown-toggle {
    color: var(--yellow) !important;
}
.bidnow-navbar a:not(.dropdown-item) {
    color: var(--lightBlue) !important;
}
.dropdown .dropdown-toggle:after {
	transition: 0.3s;
}

.dropdown.show a.dropdown-toggle {
	color: var(--yellow) !important;
}

.bidnow-navbar .dropdown.show .dropdown-menu {
	display: block !important;
}

.dropdown.show .dropdown-toggle:after {
	transform: rotate(180deg);
	transition: 0.3s;
	color: var(--yellow);
}
.dropdown-menu.show {
	display: block;
	border: none;
	box-shadow: 0px 10px 20px rgb(44 44 44 / 10%) !important;
}
.refer-friend {
	margin: 0;
}
.bidnow-navbar a:not(.dropdown-item) {
    color: var(--lightBlue) !important;
}
.nav-item a {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
}
a:hover {
    text-decoration: none !important;
    color: unset;
}
.dropdown-toggle {
    white-space: nowrap;
    padding: 0px;
}
.py-10px {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.dropdown .dropdown-toggle:after {
    transition: 0.3s;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    width: 9px;
    /* height: 2px; */
}
.dropdown-menu {
    border-radius: 10px !important;
}
.dropdown-menu {
    position: absolute !important;
    width: 100%;
    background-color: transparent;
    /* top: 10px !important; */
}
.dropdown-menu {
    padding-left: 10px;
    padding-right: 10px;
}
.bidnow-navbar {
    font-family: Poppins;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-18);
}
.dropdown-item:hover {
	background-color: var(--yellow);
	color: var(--white);
	border-radius: 5px;
}
.post-login-user-dropdown .copy-text {
	background-color: var(--yellow-fade);
}
.copy-text svg:hover {
	cursor: pointer;
}
.show button.dropdown-toggle {
    color: var(--yellow) !important;
    border: none !important;
}
.nav-item .dropdown-items a {
    padding: 6px 6px 6px 0px !important;
    font-family: poppins;
    color: var(--lightBlue);
    text-transform: uppercase;
    opacity: 1;
}
.nav-item .dropdown-items a:hover {
    color: var(--yellow) !important;
}
.overlay-content .dd-icon svg {
	width: 29px !important;
	height: 25px !important;
}
.overlay-content .dd-text {
	font-size: 18px !important;
}
.copy-text {
	background-color: var(--yellow-fade);
}
.card-header {
	background-color: transparent !important;
	border: none !important;
}

.card-header button span {
	font-family: Poppins;
	font-weight: bold;
	font-size: var(--font-size-20);
	color: var(--lightBlue);
}
/* DROPDOWN MENU STLES END */

.show button.dropdown-toggle {
  color: var(--yellow) !important;
  border: none !important;
}

.show button.dropdown-toggle .regular-profile-icon,
button.dropdown-toggle .hover-profile-icon {
  display: none;
}

.show button.dropdown-toggle .hover-profile-icon {
  display: inline;
}

.mobile-navbar .bidnow-overlay {
  opacity: 1;

  pointer-events: all !important;
}

.nav-item .dropdown-menu.show {
  box-shadow: 0px 0px 0px transparent !important;
}

.datepicker-auction .dropdown-menu.show {
  box-shadow: 0px 0px 0px transparent !important;
}

.nav-item .dropdown-items p {
  font: normal normal bold 16px/16px Poppins;
  letter-spacing: 0.6px;
  color: var(--lightBlue);
  text-transform: uppercase;
}

.nav-button a {
  padding: 10px !important;
}

.property-box .dropdown-menu {
  background-color: white !important;
}

.dropdown-menu-navbar {
  top: 34px !important;
  transform: none !important;
}

.dropdown-items {
  border-radius: 10px;
  opacity: 1;
}

#menu .one,
#menu .two,
#menu .three {
  width: 21.25px;
  height: 1.75px;
  background: var(--charlestonGreen);
  transition: 0.3s;
}

#menu .three {
  width: 10.63px;
  height: 1.75px;
  background: var(--charlestonGreen);
  transition: 0.3s;
}

#menu .two {
  margin-bottom: 6px;
  margin-top: 6px;
}

.mobile-navbar #menu .three {
  width: 0;
  opacity: 0 !important;
}

.mobile-navbar #menu .one {
  transform-origin: center;
  transform: translate(-1px, 9px) rotate(45deg);
  /* transform: translate(-2px, 10px) rotate(45deg); */
}

.mobile-navbar #menu .two {
  transform: translate(-1px, 1px) rotate(-45deg);
  transform-origin: center;
}
.overlay-active .overlay {
	opacity: 1;
	pointer-events: all;
}

.client img {
	height: 55px;
	max-height: 100%;
}
  
.width-100per {
	width: 100%;
}

.w-116 {
	width: 116px;
}

@media (max-width: 400px) {
	.w-116 {
		width: 75px;
	}

	.client img {
		height: 80px;
		max-height: 100%;
		width: 80px;
	}
}

@media (max-width: 320.98px) {
	.client img {
		height: 70px;
		max-height: 100%;
		width: 70px;
	}
}

@media (max-width: 400px) {
	.h-55px {
		height: 55px;
	}
}

@media (max-width: 320.98px) {
	.w-54-md {
		width: 52%;
	}
}

.mobile-menu-list-items {
    z-index: 4;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.mobile-navbar .mobile-menu-list-items {
    display: block !important;
}

.card-header button span {
	font-family: Poppins;
	font-weight: bold;
	font-size: var(--font-size-20);
	color: var(--lightBlue);
}

.w-100 {
    width: 100%!important;
}

@media (max-width: 991.98px) {
	.mobile-navbar .logo {
	  width: 100%;
	}
}

.card-header .btn{
	border: 0px;
}

/* 20-Jan-2022 Summit Dropdown Menu */
.refer-area .referral-link {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 10px;
}
  
.refer-area span {
	font-size: 12px;
	white-space: nowrap;
}

.dropdown-divider {
	width: 100%;
}

.refer-friend {
	padding: 0 10px;
	font-size: 12px;
	margin: 0;
	font-weight: 700;
}
  
.bidnow-navbar .post-login-user-dropdown .dd-icon {
	width: 20px;
	display: inline-block;
	text-align: center;
}

.dropdown-item:hover {
	color: #fff !important;
	border-radius: 5px;
}

.post-login-user-dropdown .dropdown-item:hover .dd-icon,
.post-login-user-dropdown .dropdown-item:hover .dd-icon path {
  fill: var(--white);
}
  
@media (max-width: 991px) {
.overlay.profile-overlay a {
	display: block;
}

.overlay.profile-overlay a:hover {
	border-radius: 5px;
}

.overlay.profile-overlay .overlay-content {
	margin: 70px 0 0;
	max-height: calc(100% - 70px);
	overflow: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.abc  {
	padding-bottom: 30px;
}
}
/* end of 20-Jan-2022 Summit Dropdown Menu */
/* end */
  
body {
	display: initial;
}
.bidnow_welcome .btn {
	text-transform: none;
	width: 150px;
}
.bidnow-navbar .dropdown.show .dropdown-menu {
	display: block !important;
}
.bidnow-navbar a {
	color: var(--lightBlue);
}
.bidnow-navbar .nav-button a:not(.dropdown-item) {
	padding: 0px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16px;
}
.bidnow-navbar .nav-button {
	display: flex;
	align-items: center;
	justify-content: center;
}
.bidnow-navbar .post-login-user-dropdown .dd-icon {
      width: 20px;
    display: inline-block;
    text-align: center;
}

.refer-friend {
	padding: 0px 10px;
	font-size: var(--font-size-12);
	margin-bottom: 0px;
	font-weight: bold;
}
.abc span {
	font-size: var(--font-size-12);
	white-space: nowrap;
}
.abc .referral-link {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 10px;
}

/* User Login Dropdown */
.bidnow-navbar .register:focus {
	box-shadow: none;
}
.bidnow-navbar .post-login-user-dropdown {
	width: 250px !important;
	right: 0px;
	top: 34px !important;
	left: inherit !important;
}
.bidnow-navbar .post-login-user-dropdown .dd-icon {
	width: 20px;
	display: inline-block;
	text-align: center;
}
.bidnow-navbar .nav-button a {
	/*display: inline;*/
}
.bidnow-navbar .nav-button .post-login-user-dropdown a {
	font-size: var(--font-size-12);
	/*padding: 0px !important;*/
}
.bidnow-navbar .dropdown-item:hover a {
	color: var(--white) !important;
}

.bidnow-navbar .navbar-profile-name {
	display: inline-block;
	max-width: 130px;
	overflow-y: clip;
	text-overflow: ellipsis;
	vertical-align: middle;
}

.dropdown-divider {
	width: 100%;
}

.navbar-profile-name {
	/* Unitless 1.5 scales with the navbar font-size and leaves room for
	   Poppins descenders, which 1.2rem clipped against overflow-y:clip. */
	line-height: 1.5;
}

.dropdown-register {
	width: 172px;
}

.dropdown-item {
	padding: 10px;
}

/* =============================================
   Top Utility Bar
   ============================================= */
.bidnow-top-utility-bar {
	border-bottom: 1px solid var(--color-f2f2f2);
	padding: 5px 0;
	font-size: 12px;
	font-family: Poppins;
	margin-bottom: 0;
	background-color: var(--white);
}

.bidnow-top-utility-bar a {
	color: var(--charlestonGreen) !important;
	font-size: 12px;
	font-weight: 400;
	text-decoration: none;
}

.bidnow-top-utility-bar a:hover {
	color: var(--yellow) !important;
}
/* Dropdown items inside the utility-bar dropdown must show white text on the
   yellow hover background. The rule above would otherwise paint them yellow-on-yellow.
   Specificity [0,3,0] beats .bidnow-top-utility-bar a:hover [0,2,1]. */
.bidnow-top-utility-bar .dropdown-item:hover {
	color: var(--white) !important;
}

.bidnow-top-utility-bar .top-utility-social span {
	font-size: 12px;
	color: var(--charlestonGreen);
}

/* Download hover QR panel */
.top-utility-download {
	cursor: pointer;
}

.top-utility-download-trigger {
	font-size: 12px;
	white-space: nowrap;
	gap: 3px;
}

.top-utility-qr-panel {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: var(--white);
	padding: 14px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	z-index: 1100;
	min-width: 200px;
	text-align: center;
}

.top-utility-download:hover .top-utility-qr-panel {
	display: block;
}

.top-utility-qr-panel::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 20px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--white);
}

.top-utility-qr-image {
	width: 160px;
	height: 160px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* Social icons in utility bar */
.top-utility-social a {
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* Social icons hover — <i> (icon-font) and direct <a> turn yellow; excludes X circle SVG */
.bidnow-top-utility-bar .top-utility-social a:hover,
.bidnow-top-utility-bar .top-utility-social a:hover i {
	color: var(--yellow) !important;
}

/* Icon font ::before pseudo-elements have hardcoded color: #ccc — must override directly */
.bidnow-top-utility-bar .top-utility-social a:hover i.icon-facebook::before,
.bidnow-top-utility-bar .top-utility-social a:hover i.icon-youtube::before {
	color: var(--yellow) !important;
}
.mobile-utility-section .mobile-social-link:hover .top-utility-x-circle {
	background-color: var(--yellow);
}

/* X icon circle — Task 1A: mid-grey (#888) matches Facebook/YouTube icon font visual weight */
.top-utility-x-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background-color: #ccc;
	border-radius: 50%;
	color: #fff;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
}

/* Task 1B: hover → yellow circle bg, X SVG stays white */
.bidnow-top-utility-bar .top-utility-social a:hover .top-utility-x-circle {
	background-color: var(--yellow) !important;
}
.bidnow-top-utility-bar .top-utility-social a:hover .top-utility-x-circle svg {
	color: #fff !important;
	fill: #fff !important;
}

/* ── Task 1C: Mobile — Download & Follow us in slide menu ── */
.mobile-utility-section {
	border-top: 1px solid var(--color-f2f2f2);
}

.mobile-utility-section .mobile-utility-social-row {
	display: flex;
	align-items: center;
	padding: 0.75rem 0;
	gap: 14px;
}

.mobile-utility-section .mobile-utility-social-row span {
	font-family: Poppins;
	font-weight: bold;
	font-size: 20px;
	color: var(--lightBlue);
	margin-right: 4px;
}

.mobile-utility-section .mobile-social-link {
	font-size: 20px;
	color: var(--charlestonGreen);
	display: inline-flex;
	align-items: center;
}

.mobile-utility-section .mobile-social-link .top-utility-x-circle {
	width: 20px;
	height: 20px;
}

.mobile-utility-section .mobile-social-link .top-utility-x-circle svg {
	width: 11px;
	height: 11px;
}

/* kw99 subdomain: mobile header shows plain "BidNow" text instead of logo image */
.mobile-bidnow-text {
	font-family: Poppins, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--lightBlue);
	text-decoration: none !important;
	line-height: 1;
}

/* Auth buttons in utility bar */
.top-utility-auth .top-utility-login {
	font-size: 12px;
	font-weight: 500;
	color: var(--charlestonGreen) !important;
}

.top-utility-auth .top-utility-register {
	font-size: 12px;
	font-weight: 500;
	background-color: var(--yellow);
	color: var(--white) !important;
	padding: 4px 14px;
	border-radius: 4px;
}

.top-utility-auth .top-utility-register:hover {
	background-color: #e08b10;
	color: var(--white) !important;
}

/* ── Task 1: Scope padding overrides to the main BidNow nav only.
   Uses a modifier class added in static_navbar.blade.php.
   Hartabina (hartabina/components/header/web.blade.php) does NOT have
   this class, so its bidnow_welcome layout is completely unaffected. ── */

/* Desktop: remove top padding (utility bar sits flush at top) */
.bidnow-welcome--with-utility-bar {
	padding-top: 0 !important;
}

/* Task 2B: tighten bottom padding below the BidNow logo row */
.bidnow-welcome--with-utility-bar {
	padding-bottom: 0 !important;
}

.bidnow-welcome--with-utility-bar .bidnow-navbar {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Mobile: restore original spacing (utility bar is hidden on mobile) */
@media (max-width: 991.98px) {
	.bidnow-welcome--with-utility-bar {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	.bidnow-welcome--with-utility-bar .bidnow-navbar {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* Widen the navbar container: Bootstrap's default .container gives 150px margins at
   1440px (max-width 1140px). 1240px keeps ~100px each side at 1440px and scales
   naturally at every other viewport width — no hardcoded side margins. */
@media (min-width: 1200px) {
	.bidnow-navbar > .container,
	.bidnow-top-utility-bar > .container {
		max-width: 1240px;
	}
}

/* Show user dropdown on hover in utility bar */
.top-utility-user-dropdown:hover > .post-login-user-dropdown {
	display: block !important;
}
/* Transparent bridge covers the gap so the hover doesn't break when moving into the menu */
.bidnow-top-utility-bar .post-login-user-dropdown::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}

/* User profile dropdown trigger in top utility bar — plain <a> so no Bootstrap btn height */
.top-utility-profile-trigger {
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	gap: 3px;
	text-decoration: none !important;
	color: var(--charlestonGreen) !important;
	cursor: pointer;
}
.top-utility-profile-trigger:hover,
.top-utility-user-dropdown:hover .top-utility-profile-trigger,
.top-utility-user-dropdown.show .top-utility-profile-trigger {
	color: var(--yellow) !important;
}
/* Bootstrap adds a ::after caret to .dropdown-toggle — hide it since we have no explicit caret */
.top-utility-profile-trigger.dropdown-toggle::after {
	display: none;
}
.top-utility-profile-name {
	font-size: 12px;
	/* Poppins has tall ascent/descent metrics; line-height:1 combined with
	   overflow:hidden clips descenders (e.g. the tail of "g"). 1.5 gives the
	   glyph box enough vertical room while keeping the horizontal ellipsis. */
	line-height: 1.5;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
}

/* Dropdown menu width and position in utility bar */
.bidnow-top-utility-bar .post-login-user-dropdown {
	width: 250px !important;
	right: 0;
	left: inherit !important;
	top: calc(100% + 5px) !important;
}

/* BID wallet balance pill in utility bar — pointer cursor signals it's hoverable */
#v4-navbar-bid-wallet-balance {
	cursor: pointer;
}

/* Align dropdown icons + text evenly (match .bidnow-navbar dropdown).
   The utility-bar dropdown sits outside .bidnow-navbar, so it does not
   inherit the .dd-icon sizing rule and renders icons at their intrinsic
   widths, producing uneven icon-to-text spacing. */
.bidnow-top-utility-bar .post-login-user-dropdown .dd-icon {
	width: 20px;
	display: inline-block;
	text-align: center;
}

/* =============================================
   Agent+ button — desktop navbar
   Uses inline-flex + align-self:center so the pill
   is vertically centred in the nav row regardless of
   how tall neighbouring flex children are.
   ============================================= */
.nav-item .agent-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	background-color: var(--yellow);
	color: #fff !important;
	border-radius: 20px;
	padding: 5px 14px !important;
	font-size: var(--font-size-14);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none !important;
}

.nav-item .agent-plus:hover {
	opacity: 0.85;
	color: #fff !important;
}

/* =============================================
   Mobile menu accordion — flip chevron up when expanded.
   Bootstrap drops the .collapsed class on the trigger button while its
   panel is open, so :not(.collapsed) targets the expanded state and points
   the arrow up (^). Covers Redeem, Auctioneer, Tools, Financials, Download.
   ============================================= */
.mobile-menu-list-items .card-header button[data-toggle="collapse"] svg {
	transition: transform 0.3s;
}
.mobile-menu-list-items .card-header button[data-toggle="collapse"]:not(.collapsed) svg {
	transform: rotate(180deg);
}

/* =============================================
   BID Token balance — SHARED by the desktop navbar (after Agent+) and the
   mobile profile overlay, so both views look identical: the round BID coin
   (bid-logo.jpeg), a bold navy "BID" prefix, the exact floored amount, and an
   eye toggle to hide/show it. Plain navy text on the white navbar/menu — mirrors
   prefer-bid-token-balance-design.jpeg.
   ============================================= */
.bid-token-balance {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #0b1c46; /* deep navy — harmonises with the BID coin */
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	white-space: nowrap;
}
.bid-token-prefix {
	font-weight: 700;
	letter-spacing: 0.2px;
}
.bid-token-balance img {
	width: 24px;
	height: 24px;
	border-radius: 50%; /* round border on the square coin */
	object-fit: cover;
	flex-shrink: 0;
}

/* eye toggle — bare button, navy stroke via currentColor; swaps open/off icon.
   Scoped under .bid-token-balance so it out-specifies ".overlay-content button"
   (0-1-1, a yellow chip) which otherwise styles the eye inside the mobile overlay. */
.bid-token-balance .bid-balance-eye,
.bid-token-balance .bid-balance-eye:hover,
.bid-token-balance .bid-balance-eye:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	box-shadow: none;
}
.bid-balance-eye .eye {
	width: 18px;
	height: 18px;
}
.bid-balance-eye .eye-off { display: none; }
.bid-balance-eye.is-hidden .eye-open { display: none; }
.bid-balance-eye.is-hidden .eye-off { display: inline-block; }

@keyframes bidTokenGradient {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Desktop nav-row placement: vertical centring + a gap from the Agent+ link.
   The element is un-hidden (d-inline-flex) by navbar_balance_script on load. */
.nav-item-bid-balance {
	align-self: center;
	margin-left: 0.5rem;
}

/* "Connect BID Wallet" CTA — shown when no wallet is linked (desktop opens the
   download modal, mobile links to downloads). Keeps the animated gradient pill
   with white text so it reads as a call-to-action, distinct from the plain
   balance above. The high-specificity selectors keep the label white against
   the gradient, beating ".bidnow-navbar a:not(.dropdown-item){color:var(--lightBlue)!important}". */
.bid-connect-cta {
	cursor: pointer;
	border-radius: 20px;
	padding: 4px 12px;
	color: #fff !important;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
	background: linear-gradient(45deg, #7b3ff2, #e0249a, #1ec8ff, #7b3ff2);
	background-size: 400% 400%;
	animation: bidTokenGradient 6s ease infinite;
}
.bid-connect-cta img {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff; /* white coin keeps the logo legible on the gradient */
	padding: 2px;
	box-sizing: content-box;
	object-fit: contain;
}
.bidnow-navbar a.bid-connect-cta,
.bidnow-navbar a.bid-connect-cta:hover,
.bidnow-navbar a.bid-connect-cta:focus {
	color: #fff !important;
	text-decoration: none !important;
}