@charset "utf-8";
/* CSS Document */

/* Global background color - soft cream/yellow */
body {
	background-color: #fffaf6;
}

.bg-tertiary {
	background-color: #fffaf6 !important;
}

nav.navbar.bg-tertiary {
	background-color: #fffaf6 !important;
}

/* ============================================
   BGL Header - New Design
   ============================================ */
:root {
	/* Measured at runtime by the inline script in header.php; this is the
	   fallback used before JS runs and on no-JS. Drives how far the hero
	   banners slide up behind the floating header. */
	--bgl-header-h: 96px;

	/* Global button corner radius. Every button/CTA across the site reads
	   this token so the whole UI can be re-tuned from one place. 999px gives
	   the fully-rounded "pill" shape used by the header Join button. Square
	   icon-only buttons that read this token become circles. */
	--bgl-btn-radius: 999px;
}

/* All Bootstrap buttons inherit the pill radius via Bootstrap's own
   radius variables (no !important needed, no specificity fights). */
.btn {
	--bs-border-radius: var(--bgl-btn-radius);
	--bs-border-radius-sm: var(--bgl-btn-radius);
	--bs-border-radius-lg: var(--bgl-btn-radius);
}

/* Floating, sticky, rounded "pill" header. The <nav> itself is transparent
   and only provides the outer padding/sticky behaviour; the inner Bootstrap
   .container is the visible white pill. */
nav.navbar.bgl-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background-color: transparent !important;
	padding: 16px clamp(16px, 4vw, 48px);
}

nav.navbar.bgl-header > .container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px 18px 12px 28px;
	background-color: #ffffff;
	border-radius: 999px;
	box-shadow: 0 12px 32px rgba(0, 26, 31, 0.12), 0 2px 8px rgba(0, 26, 31, 0.06);
}

/* Main navigation with icons — centered between the brand and the auth area */
.bgl-main-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0 auto !important;
}

.bgl-main-nav .nav-item {
	display: flex;
	align-items: center;
}

.bgl-main-nav .nav-link {
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: #003038 !important;
	padding: 4px !important;
	transition: color 0.2s ease;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.bgl-main-nav .nav-link i {
	font-size: 24px;
	color: #ea9921;
}

/* Dropdown caret on the "Browse" item — sits after the label */
.bgl-main-nav .nav-link.dropdown-toggle::after {
	margin-left: 2px;
	border-top-color: currentColor;
	color: #003038;
	opacity: 0.7;
}

.bgl-main-nav .nav-link:hover,
.bgl-main-nav .nav-link:focus {
	color: #ea9921 !important;
	background: transparent !important;
}

.bgl-main-nav .nav-link:hover i {
	color: #ea9921;
}

.bgl-main-nav .nav-link.active {
	color: #003038 !important;
}

/* Hide old separators */
.nav-separator {
	display: none !important;
}

/* Secondary navigation */
.bgl-secondary-nav {
	display: flex;
	align-items: center;
	gap: 20px;
}

.bgl-secondary-nav .nav-link {
	font-family: 'Manrope', sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: rgba(0,48,56,0.7) !important;
	padding: 4px !important;
}

.bgl-secondary-nav .nav-link:hover,
.bgl-secondary-nav .nav-link:focus {
	color: #003038 !important;
	background: transparent !important;
}

/* Remove underline from secondary nav items */
.bgl-secondary-nav .nav-link::before {
	display: none !important;
}

/* Auth buttons — Login is plain text that becomes a soft pill on hover,
   Join is a solid orange pill. */
.bgl-nav-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 11px 22px;
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #003038;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.bgl-nav-login:hover,
.bgl-nav-login:focus {
	background: #f0e7dd;
	color: #003038;
	text-decoration: none;
}

.bgl-nav-join {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #d67e22;
	border: none;
	border-radius: 999px;
	padding: 11px 24px;
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.bgl-nav-join:hover,
.bgl-nav-join:focus {
	background: #c06d14;
	color: #fff;
	text-decoration: none;
}

.bgl-nav-join i {
	font-size: 20px;
}

.bgl-nav-auth {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 12px;
}

/* Hero banners slide up behind the floating header. The negative margin
   equals the header's rendered height (--bgl-header-h), so the banner art
   starts at the very top of the viewport and the white pill floats over it.
   Covers the shared hero_section.php wrappers plus page-specific hero
   wrappers (linkups, category/provider pages) that render their own banner. */
.page-hero-full-image,
.page-hero-card-overlay-wrapper,
.linkups-hero-wrapper {
	margin-top: calc(-1 * var(--bgl-header-h));
}

/* Info-page coloured hero (for-publishers / -retailers / -designers /
   -service-providers) runs up behind the floating header so its background
   reaches the very top of the page. The negative margin pulls the section up
   by the header height; the matching top padding (per breakpoint, overriding
   the page's inline padding shorthand) keeps the hero text in its original
   position below the white pill. */
.role-hero-section {
	margin-top: calc(-1 * var(--bgl-header-h));
	padding-top: calc(120px + var(--bgl-header-h)) !important;
}
@media (max-width: 992px) {
	.role-hero-section { padding-top: calc(80px + var(--bgl-header-h)) !important; }
}
@media (max-width: 768px) {
	.role-hero-section { padding-top: calc(60px + var(--bgl-header-h)) !important; }
}
@media (max-width: 480px) {
	.role-hero-section { padding-top: calc(48px + var(--bgl-header-h)) !important; }
}

/* ============================================
   Shared stacked-section component
   Full-width sections with rounded top corners that overlap the block
   above them, alternating between two warm tints — the "card stack" look
   from about.php. Add .bgl-stacked-section to each full-width content
   section, plus a tint modifier (--cream / --white) to alternate.
   Used on the public content & listing pages. NOT used on provider.php.
   ============================================ */
.bgl-stacked-section {
	position: relative;
	border-radius: 40px 40px 0 0;
	margin-top: -40px;
}

.bgl-stacked-section--cream { background-color: #f0e7db; }
.bgl-stacked-section--white { background-color: #ffffff; }

@media (max-width: 768px) {
	.bgl-stacked-section {
		border-radius: 28px 28px 0 0;
		margin-top: -28px;
	}
}

/* Keep user icon button for logged-in state */
.bgl-header .user-icon-btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ea9921;
	border-radius: 50%;
	color: #fff !important;
	margin-left: 0;
}

.bgl-header .user-icon-btn:hover {
	background: #d68a1a;
}

.bgl-header .user-icon-btn i {
	font-size: 0.9rem;
}

/* Keep user icon button styling on hover */
.bgl-secondary-nav .nav-link.user-icon-btn:hover,
.bgl-secondary-nav .nav-link.user-icon-btn:focus {
	color: #ffffff !important;
	background: #d68a1a !important;
}

/* Global header font */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Manrope', sans-serif;
}

a,
a:hover,
a:focus {
    text-decoration: none;
}
.btn-green {
  --bs-btn-color: #000;
  --bs-btn-bg: #1ec9c8;
  --bs-btn-border-color: #1ec9c8;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #1bb1b1;
  --bs-btn-hover-border-color: #179b9b;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #179b9b;
  --bs-btn-active-border-color: #179b9b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #1ec9c8;
  --bs-btn-disabled-border-color: #1ec9c8;
}
.btn-outline-green {
  --bs-btn-color: #1ec9c8;
  --bs-btn-border-color: #1ec9c8;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #1ec9c8;
  --bs-btn-hover-border-color: #1ec9c8;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #1ec9c8;
  --bs-btn-active-border-color: #1ec9c8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #1ec9c8;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #1ec9c8;
  --bs-gradient: none;
}
.btn-prisma {
	--bs-btn-color: #fff;
	--bs-btn-bg: #9933ff;
	--bs-btn-border-color: #9933ff;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #8000ff;
	--bs-btn-hover-border-color: #7300e6;
	--bs-btn-focus-shadow-rgb: 225, 83, 97;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #7300e6;
	--bs-btn-active-border-color: #6600cc;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #9933ff;
	--bs-btn-disabled-border-color: #9933ff
}
.btn-bgl {
    --bs-btn-color: #258e8e;
    --bs-btn-border-color: #1ecacb;
    --bs-btn-hover-color: #1ecacb;
    --bs-btn-hover-bg: #e8f9f9;
    --bs-btn-hover-border-color: #1ecacb;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e8f9f9;
    --bs-btn-active-border-color: #e8f9f9;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #1ecacb;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #1ecacb;
    --bs-gradient: none;
}

.btn-outline-bgl {
    --bs-btn-color: #258e8e;
    --bs-btn-border-color: #1ecacb;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #57a8bd;
    --bs-btn-hover-border-color: #57a8bd;
    --bs-btn-focus-shadow-rgb: 80, 196, 193;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #57a8bd;
    --bs-btn-active-border-color: #57a8bd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #1ecacb;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #1ecacb;
    --bs-gradient: none;
}
.text-bg-prisma {
	color: #fff !important;
	background-color: RGBA(153, 51, 255, var(--bs-bg-opacity, 1)) !important
}


.widgets-icons-2 {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ededed;
	font-size: 27px;
	border-radius: 10px;
}
.bg-gradient-scooter {
    background: #17ead9;
    background: -webkit-linear-gradient(45deg, #17ead9, #6078ea)!important;
    background: linear-gradient(45deg, #17ead9, #6078ea)!important;
}
.bg-gradient-blooker {
    background: #ffdf40;
    background: -webkit-linear-gradient(45deg, #ffdf40, #ff8359)!important;
    background: linear-gradient(45deg, #ffdf40, #ff8359)!important;
}
.bg-gradient-bloody {
    background: #f54ea2;
    background: -webkit-linear-gradient(45deg, #f54ea2, #ff7676)!important;
    background: linear-gradient(45deg, #f54ea2, #ff7676)!important;
}
.bg-gradient-ohhappiness {
    background: #00b09b;
    background: -webkit-linear-gradient(45deg, #00b09b, #96c93d)!important;
    background: linear-gradient(45deg, #00b09b, #96c93d)!important;
}	
.bg-gradient-greyscale {
    background: #5C5C5C;
    background: -webkit-linear-gradient(45deg, #5C5C5C, #E1DCDC)!important;
    background: linear-gradient(45deg, #5C5C5C, #E1DCDC)!important;
}

.bd-callout {
    --bs-link-color-rgb: var(--bd-callout-link);
    --bs-code-color: var(--bd-callout-code-color);
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300))
}

.bd-callout h4 {
    margin-bottom: .25rem
}

.bd-callout>:last-child {
    margin-bottom: 0
}

.bd-callout+.bd-callout {
    margin-top: -.25rem
}

.bd-callout .highlight {
    background-color: #0000000d
}

.bd-callout-info {
    --bd-callout-color: var(--bs-info-text-emphasis);
    --bd-callout-bg: var(--bs-info-bg-subtle);
    --bd-callout-border: var(--bs-info-border-subtle)
}

.bd-callout-warning {
    --bd-callout-color: var(--bs-warning-text-emphasis);
    --bd-callout-bg: var(--bs-warning-bg-subtle);
    --bd-callout-border: var(--bs-warning-border-subtle)
}

.bd-callout-danger {
    --bd-callout-color: var(--bs-danger-text-emphasis);
    --bd-callout-bg: var(--bs-danger-bg-subtle);
    --bd-callout-border: var(--bs-danger-border-subtle)
}


.card-hover {
transition: box-shadow 0.3s ease, border-color 0.3s ease;
/*border: 1px solid transparent;*/
}

.card-hover:hover {
border-color: #0d6efd; /* bootstrap primary blauw */
box-shadow: 0 0 20px rgba(13, 110, 253, 0.5);
cursor: pointer;
}

/* Badge styles */
.badge-bgl-premium,
.badge-bgl-premium-plus,
.badge-bgl-premium-unlimited {
	background: linear-gradient(135deg, #d4a853 0%, #b8942e 100%);
	color: #fff;
	border: none;
	width: auto;
	box-shadow: 0 2px 8px rgba(212, 168, 83, 0.3);
}

/* Fix checkbox shadow clipping in filter containers */
#categoryFilters,
#countryFilters {
	padding: 0.25rem 0.5rem 0.25rem 0.75rem;
}

/* Legacy category grid only (Bootstrap .card inside .provider-card). Do NOT match
   categories/index.php horizontal cards — those use .provider-card-thumb-link / .content-link
   and need their own display/flex; a global .provider-card a { display:block } breaks clicks/layout. */
.provider-card .card a {
	text-decoration: none;
	display: block;
}

.provider-card .card {
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
	cursor: pointer;
}

.provider-card .card:hover {
	border-color: #57a8bd;
	box-shadow: 0 0 20px rgba(80, 196, 193, 0.5),
	            inset 0 0 15px rgba(80, 196, 193, 0.2);
}

/* Header navigation styling */
nav.navbar {
	position: relative;
	padding-bottom: 0;
}

/* Navbar brand logo - centered vertically */
nav.navbar .navbar-brand {
	display: flex;
	align-items: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	margin-left: 12px;
}

nav.navbar .navbar-brand img {
	height: 54px;
}

/* Make navbar container stretch items to full height */
nav.navbar > .container {
	display: flex;
	align-items: stretch;
}

nav.navbar .navbar-collapse {
	align-items: stretch;
}

nav.navbar .navbar-nav {
	align-items: stretch;
}

nav.navbar .navbar-nav .nav-item {
	display: flex;
	align-items: stretch;
}

.navbar .navbar-nav .nav-item .nav-link {
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
}

/* Remove Bootstrap dropdown arrow underline */
.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle::after {
	border: none;
	content: '';
	display: inline-block;
	margin-left: 0.3rem;
	vertical-align: middle;
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-left: 0.3em solid transparent;
}

/* Custom underline for menu items - handled per nav type */


/* Prevent dropdown toggle from showing default styles */
.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle:hover,
.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle:focus {
	text-decoration: none;
}

/* User Account Icon Button */
.navbar .nav-item.dropdown:has(.user-icon-btn) {
	display: flex;
	align-items: center;
}

.navbar .user-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: #ea9921;
	border-radius: 50%;
	color: #ffffff !important;
	font-size: 1rem;
	padding: 0;
	margin-left: 0.5rem;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar .user-icon-btn:hover,
.navbar .user-icon-btn:focus {
	background: #d68a1a;
	color: #ffffff !important;
}

.navbar .user-icon-btn::before {
	display: none !important;
}

/* User Dropdown Menu */
.user-dropdown {
	min-width: 200px;
	padding: 0.5rem 0;
}

.user-dropdown.dropdown-menu .dropdown-item {
	padding: 0.6rem 1rem;
	color: #333;
	transition: all 0.2s ease;
	background-color: transparent;
}

.user-dropdown.dropdown-menu .dropdown-item:hover,
.user-dropdown.dropdown-menu .dropdown-item:focus {
	background-color: #a1c7d1 !important;
	color: #000000 !important;
}

.user-dropdown .dropdown-divider {
	margin: 0.25rem 0;
}

.user-dropdown.dropdown-menu .user-logout-btn {
	color: #333;
}

.user-dropdown.dropdown-menu .user-logout-btn:hover,
.user-dropdown.dropdown-menu .user-logout-btn:focus {
	background-color: #a1c7d1 !important;
	color: #000000 !important;
}

/* Login button in dropdown */
.user-dropdown-login {
	padding: 0.5rem 1rem;
}

.user-login-btn {
	display: block;
	width: 100%;
	padding: 0.5rem 1rem;
	background: #ffffff;
	border: 2px solid #22393a;
	color: #22393a;
	border-radius: var(--bgl-btn-radius);
	text-align: center;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
}

.user-login-btn:hover {
	background: #22393a;
	color: #ffffff;
}

/* Industry Mega Menu */
/* ============================================
   Industry Mega Menu - Figma Design
   ============================================ */
.industry-mega-menu {
	min-width: 280px;
	padding: 0 !important;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
	border: none;
}

.industry-menu-container {
	display: flex;
	gap: 0;
}

.industry-menu-categories {
	flex: 1;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.industry-mega-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 0.85rem;
	border-radius: 10px;
	color: #001a1f;
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	background: transparent;
	transition: background 0.18s ease, color 0.18s ease;
}

.industry-mega-menu .dropdown-item:hover,
.industry-mega-menu .dropdown-item:focus {
	background: #fdf1d6 !important;
	color: #001a1f !important;
}

.industry-mega-menu .dropdown-item i,
.industry-mega-menu .dropdown-item .ph {
	width: 20px;
	text-align: center;
	font-size: 1.3125rem;
	flex-shrink: 0;
}

/* Category-specific icon colors */
.industry-mega-menu .dropdown-item[href*="game-design"] i,
.industry-mega-menu .dropdown-item[href*="game-design"] .ph { color: #AF7BFF; }

.industry-mega-menu .dropdown-item[href*="publishing"] i,
.industry-mega-menu .dropdown-item[href*="publishing"] .ph { color: #4d9ceb; }

.industry-mega-menu .dropdown-item[href*="events"] i,
.industry-mega-menu .dropdown-item[href*="events"] .ph { color: #FF9626; }

.industry-mega-menu .dropdown-item[href*="production"] i,
.industry-mega-menu .dropdown-item[href*="production"] .ph { color: #2E3440; }

.industry-mega-menu .dropdown-item[href*="creatives"] i,
.industry-mega-menu .dropdown-item[href*="creatives"] .ph { color: #FA3983; }

.industry-mega-menu .dropdown-item[href*="translation-editorial"] i,
.industry-mega-menu .dropdown-item[href*="translation-editorial"] .ph { color: #0FA88D; }

.industry-mega-menu .dropdown-item[href*="designer-support"] i,
.industry-mega-menu .dropdown-item[href*="designer-support"] .ph { color: #25C9D6; }

.industry-mega-menu .dropdown-item[href*="marketing"] i,
.industry-mega-menu .dropdown-item[href*="marketing"] .ph { color: #F52A2A; }

.industry-mega-menu .dropdown-item[href*="distribution"] i,
.industry-mega-menu .dropdown-item[href*="distribution"] .ph { color: #4138c2; }

/* /categories/logistics is a 301 redirect to /categories/distribution
   since the Logistics & Fulfillment industry was retired (May 2026).
   The selector is kept so legacy links rendered before the redirect
   still pick up a sensible colour while the click is in flight. */
.industry-mega-menu .dropdown-item[href*="logistics"] i,
.industry-mega-menu .dropdown-item[href*="logistics"] .ph { color: #4138c2; }

.industry-mega-menu .dropdown-item[href*="retail"] i,
.industry-mega-menu .dropdown-item[href*="retail"] .ph { color: #C25D26; }

/* Dropdown menu styling */
nav.navbar .dropdown-menu {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 0.5rem 0;
}

nav.navbar .dropdown-item {
	padding: 0.5rem 1rem;
	color: #333;
	transition: all 0.2s ease;
}

nav.navbar .dropdown-item:hover,
nav.navbar .dropdown-item:focus {
	background-color: #a1c7d1;
	color: #000000 !important;
}

/* JOIN BGL / Log out button styling - match Search button */
nav.navbar .navbar-nav .nav-item .btn-outline-secondary,
nav.navbar .navbar-nav .nav-item a.btn-outline-secondary,
.navbar .btn-outline-secondary {
	background-color: #fff !important;
	border: 1px solid #57a8bd !important;
	color: #3a8a8a !important;
	font-weight: 600;
	border-radius: var(--bgl-btn-radius);
	padding: 0.5rem 1rem;
	transition: all 0.3s ease;
	
}

nav.navbar .navbar-nav .nav-item .btn-outline-secondary:hover,
nav.navbar .navbar-nav .nav-item .btn-outline-secondary:focus,
nav.navbar .navbar-nav .nav-item a.btn-outline-secondary:hover,
nav.navbar .navbar-nav .nav-item a.btn-outline-secondary:focus,
.navbar .btn-outline-secondary:hover,
.navbar .btn-outline-secondary:focus {
	background-color: #f0fafa !important;
	border-color: #57a8bd !important;
	color: #3a8a8a !important;
	box-shadow: none !important;
}

.checklist {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}

.checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2fb6ad;
  font-weight: 600;
}

/* ============================================
   FAVORITES BUTTON - Shared Styles
   Used on: provider.php, game.php, dashboard/workspace.php
   Note: Favorites are PRIVATE - not visible to other users
   Note: Favorites do NOT trigger notifications
   ============================================ */

.favorite-btn {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 2px solid #e0e0e0;
	border-radius: 50%;
	background: #fff;
	color: #ccc;
	font-size: 1.25rem;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.favorite-btn:hover {
	border-color: #e74c3c;
	color: #e74c3c;
	transform: scale(1.1);
}

.favorite-btn.is-favorited {
	border-color: #e74c3c;
	background: #e74c3c;
	color: #fff;
}

.favorite-btn.is-favorited:hover {
	background: #c0392b;
	border-color: #c0392b;
}

.favorite-btn.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

.favorite-btn.is-loading i {
	animation: favoritePulse 0.5s ease-in-out infinite;
}

@keyframes favoritePulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
}

/* Responsive sizing for mobile */
@media (max-width: 768px) {
	.favorite-btn {
		width: 38px;
		height: 38px;
		font-size: 1.1rem;
	}
}

/* ============================================
   LOGIN PROMPT MODAL - For logged-out favorites
   ============================================ */
.login-prompt-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 26, 31, 0.6);
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.login-prompt-overlay.active {
	display: flex;
}

.login-prompt-modal {
	background: #fff;
	border-radius: 20px;
	padding: 40px;
	max-width: 420px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	animation: loginModalSlide 0.3s ease;
	position: relative;
}

@keyframes loginModalSlide {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.login-prompt-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	background: #fef3e8;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-prompt-icon i {
	font-size: 28px;
	color: #ea9921;
}

.login-prompt-title {
	font-family: 'Crimson Pro', Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	color: #001a1f;
	margin: 0 0 12px;
}

.login-prompt-text {
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 16px;
	color: #001a1f;
	opacity: 0.7;
	line-height: 1.5;
	margin: 0 0 28px;
}

.login-prompt-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.login-prompt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: var(--bgl-btn-radius);
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	width: 100%;
}

.login-prompt-btn-primary {
	background: #E9A84A;
	border: 2px solid #E9A84A;
	color: #fff;
}

.login-prompt-btn-primary:hover {
	background: #D4963C;
	border-color: #D4963C;
	color: #fff;
	text-decoration: none;
}

.login-prompt-btn-secondary {
	background: transparent;
	border: 2px solid #428583;
	color: #428583;
}

.login-prompt-btn-secondary:hover {
	background: #428583;
	color: #fff;
	text-decoration: none;
}

/* Disabled "coming soon" CTA (e.g. Upgrade to Premium before launch). */
.login-prompt-btn-soon,
.login-prompt-btn-soon:hover {
	background: #d3c7b6;
	border-color: #d3c7b6;
	color: #fff;
	cursor: not-allowed;
	opacity: 0.9;
}
.login-prompt-soon-tag {
	margin-left: 8px;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.login-prompt-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: #001a1f;
	opacity: 0.5;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.login-prompt-close:hover {
	opacity: 1;
	background: rgba(0, 26, 31, 0.05);
}

@media (max-width: 480px) {
	.login-prompt-modal {
		padding: 30px 24px;
	}
	
	.login-prompt-title {
		font-size: 20px;
	}
	
	.login-prompt-text {
		font-size: 14px;
	}
}

/* ============================================
   NEW BADGE - For recently created items (< 7 days)
   ============================================ */
.badge-new {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 9px;
	background: #EA9921;
	border: 1px solid #EA9921;
	border-radius: 4px;
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	line-height: 1.5;
	white-space: nowrap;
}

.badge-new-topleft {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	border-radius: 0;
	border-top-left-radius: 20px;
}

/* ============================================
   GLOBAL BUTTON SYSTEM
   Primary: Teal (main CTAs)
   Secondary: Orange (actions like Join)
   Outlined: For smaller CTAs or multiple buttons
   ============================================ */

/* Base button styles */
.btn-bgl-primary,
.btn-bgl-secondary,
.btn-bgl-outline-primary,
.btn-bgl-outline-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--bgl-btn-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-bgl-primary i,
.btn-bgl-secondary i,
.btn-bgl-outline-primary i,
.btn-bgl-outline-secondary i {
	font-size: 18px;
}

/* Primary: Teal filled */
.btn-bgl-primary {
	background: #428583;
	border-color: #428583;
	color: #fff;
}

.btn-bgl-primary:hover {
	background: #357170;
	border-color: #357170;
	color: #fff;
	text-decoration: none;
}

/* Secondary: Orange filled */
.btn-bgl-secondary {
	background: #E9A84A;
	border-color: #E9A84A;
	color: #fff;
}

.btn-bgl-secondary:hover {
	background: #D4963C;
	border-color: #D4963C;
	color: #fff;
	text-decoration: none;
}

/* Outlined Primary: Teal border */
.btn-bgl-outline-primary {
	background: transparent;
	border-color: #428583;
	color: #428583;
}

.btn-bgl-outline-primary:hover {
	background: #428583;
	color: #fff;
	text-decoration: none;
}

/* Outlined Secondary: Orange border */
.btn-bgl-outline-secondary {
	background: transparent;
	border-color: #E9A84A;
	color: #E9A84A;
}

.btn-bgl-outline-secondary:hover {
	background: #E9A84A;
	color: #fff;
	text-decoration: none;
}

/* Button sizes */
.btn-bgl-sm {
	padding: 8px 16px;
	font-size: 14px;
}

.btn-bgl-sm i {
	font-size: 16px;
}

.btn-bgl-lg {
	padding: 16px 32px;
	font-size: 18px;
}

.btn-bgl-lg i {
	font-size: 20px;
}

/* Full width button */
.btn-bgl-block {
	width: 100%;
}

/* ============================================
   MOBILE NAVIGATION STYLES
   ============================================ */

/* Hamburger menu: geen rand, geen Bootstrap-focusring, geen browser-outline (ook bij klik/touch) */
nav.navbar.bgl-header .navbar-toggler {
	--bs-navbar-toggler-focus-width: 0;
	--bs-navbar-toggler-border-color: transparent;
	border: 0 !important;
	border-width: 0 !important;
	outline: none !important;
	outline-width: 0 !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

nav.navbar.bgl-header .navbar-toggler:hover,
nav.navbar.bgl-header .navbar-toggler:focus,
nav.navbar.bgl-header .navbar-toggler:focus-visible,
nav.navbar.bgl-header .navbar-toggler:focus-within,
nav.navbar.bgl-header .navbar-toggler:active {
	border: 0 !important;
	border-width: 0 !important;
	outline: none !important;
	outline-width: 0 !important;
	box-shadow: none !important;
}
nav.navbar.bgl-header .navbar-toggler:focus:not(:focus-visible) {
	background-color: transparent;
}

nav.navbar.bgl-header button.navbar-toggler::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Logged-in sidebar hamburger (header left) — loaded in <head> so the button
   never flashes browser-default focus/outline before these rules apply. */
.bgl-sidebar-hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 42px;
	height: 42px;
	margin-right: 6px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 10px;
	color: #001a1f;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.bgl-sidebar-hamburger i {
	font-size: 24px;
	line-height: 1;
}
.bgl-sidebar-hamburger:hover {
	background: rgba(66, 133, 131, 0.10);
	color: #428583;
}
.bgl-sidebar-hamburger:hover,
.bgl-sidebar-hamburger:focus,
.bgl-sidebar-hamburger:focus-visible,
.bgl-sidebar-hamburger:active {
	outline: none !important;
	box-shadow: none !important;
}
/* Suppress the brief focus ring Chrome shows when it restores focus on refresh. */
.bgl-sidebar-hamburger:focus:not(:focus-visible) {
	background: transparent;
	color: #001a1f;
}
.bgl-sidebar-hamburger:focus-visible {
	background: rgba(66, 133, 131, 0.10);
	color: #428583;
}
.bgl-sidebar-hamburger::-moz-focus-inner {
	border: 0;
	padding: 0;
}

@media (max-width: 991.98px) {
	/* Bell + hamburger on public header (logged in) */
	.bgl-header-mobile-trailing {
		flex-shrink: 0;
		align-items: center;
	}
	.bgl-header-mobile-trailing .navbar-toggler {
		margin-left: 0;
	}
	.bgl-header-mobile-bell {
		color: #003038 !important;
	}
	.bgl-header-mobile-trailing .bgl-notification-root {
		position: relative;
	}

	/* Public mobile header layout: hamburger (left) · logo (centred) · auth (right).
	   The collapse panel drops below as an absolute overlay (see rule further
	   down), so the first flex row is just these three items. */
	nav.navbar.bgl-header .navbar-brand.bgl-brand-public {
		margin-left: 4px;
		margin-right: auto;
	}
	/* Slightly smaller than the 54px desktop logo. */
	nav.navbar.bgl-header .navbar-brand.bgl-brand-public img {
		height: 40px;
	}
	.bgl-public-hamburger {
		flex-shrink: 0;
		padding-left: 0;
	}
	.bgl-public-hamburger .navbar-toggler-icon {
		width: 1.2em;
		height: 1.2em;
	}
	/* Compact Login/Join in the header trailing — override the full-width,
	   stacked in-menu auth styling that also targets these classes. */
	.bgl-header-mobile-auth {
		margin-left: 0;
		flex-shrink: 0;
	}
	.bgl-header-mobile-auth .bgl-nav-login,
	.bgl-header-mobile-auth .bgl-nav-join {
		width: auto;
		font-size: 14px;
	}
	.bgl-header-mobile-auth .bgl-nav-login {
		padding: 8px 8px;
	}
	.bgl-header-mobile-auth .bgl-nav-join {
		padding: 8px 14px;
	}
	.bgl-header-mobile-auth .bgl-nav-join i {
		font-size: 16px;
	}

	/* Mobile navbar container */
	nav.navbar.bgl-header {
		padding: 12px 16px;
	}
	
	nav.navbar.bgl-header > .container {
		padding: 8px 10px 8px 18px;
	}
	
	/* Mobile collapse menu — drops just below the floating pill */
	nav.navbar .navbar-collapse {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		background: #ffffff;
		border: 1px solid rgba(0, 48, 56, 0.08);
		border-radius: 20px;
		box-shadow: 0 12px 32px rgba(0, 26, 31, 0.14);
		padding: 16px 20px 24px;
		z-index: 1000;
	}
	
	/* Stack both navs vertically */
	nav.navbar .navbar-collapse .navbar-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	
	/* Main nav items. The mobile collapse panel is public-only (logged-in
	   mobile uses the account drawer instead), and Login/Join now live in the
	   header trailing rather than after this list, so no trailing divider. */
	.bgl-main-nav {
		margin-left: 0 !important;
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	
	.bgl-main-nav .nav-item {
		width: 100%;
	}
	
	.bgl-main-nav .nav-link {
		padding: 12px 0 !important;
		font-size: 19px;
		justify-content: flex-start;
	}
	
	.bgl-main-nav .nav-link i {
		font-size: 24px;
		width: 28px;
	}
	
	/* Secondary nav items - align with main nav */
	.bgl-secondary-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-bottom: 20px;
	}
	
	.bgl-secondary-nav .nav-item {
		width: 100%;
	}
	
	.bgl-secondary-nav .nav-link {
		padding: 10px 0 !important;
		font-size: 16px;
		color: #003038 !important;
	}
	
	/* Industries dropdown - Simple submenu for mobile */
	.bgl-main-nav .nav-item.dropdown {
		flex-direction: column;
	}
	
	/* Hide mega menu on mobile */
	.industry-mega-menu {
		position: static !important;
		min-width: 100% !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.industry-menu-container {
		flex-direction: column;
		gap: 0;
	}
	
	/* Hide the info section on mobile */
	.industry-menu-info {
		display: none;
	}
	
	/* Simple list for categories on mobile */
	.industry-menu-categories {
		padding: 8px 0 8px 36px;
		gap: 4px;
	}
	
	.industry-mega-menu .dropdown-item {
		padding: 8px 0 !important;
		font-size: 16px;
		font-weight: 500;
	}
	
	.industry-mega-menu .dropdown-item i,
	.industry-mega-menu .dropdown-item .ph {
		font-size: 19px;
		width: 24px;
	}
	
	/* Auth buttons on mobile */
	.bgl-nav-auth {
		flex-direction: column;
		gap: 10px;
		margin-left: 0;
		margin-top: 8px;
		padding-top: 16px;
		border-top: 1px solid rgba(0, 48, 56, 0.1);
	}
	
	.bgl-nav-login,
	.bgl-nav-join {
		width: 100%;
		justify-content: center;
		padding: 16px 22px;
		font-size: 17px;
	}
	
	/* Notification & user icons on mobile (dashboard collapse menu) */
	.bgl-secondary-nav .bgl-notification-root,
	.bgl-secondary-nav .nav-item.dropdown:has(.user-icon-btn) {
		position: static;
	}
	
	.bgl-secondary-nav .bgl-notification-root .nav-link,
	.bgl-secondary-nav .user-icon-btn {
		width: 100%;
		height: auto;
		border-radius: 8px;
		padding: 10px 16px !important;
		justify-content: flex-start;
		gap: 12px;
	}
	
	.bgl-secondary-nav .user-icon-btn {
		background: transparent;
		color: #003038 !important;
	}
	
	.bgl-secondary-nav .user-icon-btn::after {
		content: 'Account';
		font-family: 'Fustat', 'Manrope', sans-serif;
		font-size: 17px;
		font-weight: 500;
	}
	
	/* User dropdown on mobile */
	.user-dropdown {
		position: static !important;
		width: 100% !important;
		box-shadow: none !important;
		border: none !important;
		padding: 8px 0 8px 28px !important;
		background: transparent !important;
	}
	
	.user-dropdown .dropdown-item {
		padding: 10px 0 !important;
	}
	
	/* Notification dropdown position on mobile */
	.notification-dropdown {
		position: fixed !important;
		top: auto !important;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100% !important;
		max-height: 70vh;
		border-radius: 20px 20px 0 0;
		margin: 0;
	}
}

/* ========== BGL: Select panel (custom dropdown under native <select>) ==========
 * Script: /js/bgl-select-panel.js
 * Markup: JS wraps the select in .bgl-select-panel; PHP adds .bgl-panel-select where needed.
 * The visible field is still Bootstrap .form-select (or .join-form-control); only the
 * floating list + filter row are custom. Tokens here can be reused if we align other UI.
 */
.bgl-select-panel {
	--bgl-select-accent: #428583;
	--bgl-select-accent-rgb: 66, 133, 131;
	--bgl-select-panel-border: rgba(0, 0, 0, 0.1);
	--bgl-select-panel-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	--bgl-select-panel-radius: 8px;
	--bgl-select-separator: #e8e0d8;
	--bgl-select-text: #001a1f;
	position: relative;
}

.bgl-select-panel > select {
	position: relative;
}

.bgl-select-panel__dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	flex-direction: column;
	max-height: min(280px, 70vh);
	margin-top: 4px;
	background: #fff;
	border: 1px solid var(--bgl-select-panel-border);
	border-radius: var(--bgl-select-panel-radius);
	box-shadow: var(--bgl-select-panel-shadow);
	overflow: hidden;
}

.bgl-select-panel__dropdown.is-open {
	display: flex;
}

.bgl-select-panel__filter {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 12px;
	border: none;
	border-bottom: 1px solid var(--bgl-select-separator);
	border-radius: 0;
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--bgl-select-text);
}

.bgl-select-panel__filter:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(var(--bgl-select-accent-rgb), 0.35);
}

.bgl-select-panel__list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--bgl-select-accent-rgb), 0.3) transparent;
}

.bgl-select-panel__list::-webkit-scrollbar {
	width: 6px;
}

.bgl-select-panel__list::-webkit-scrollbar-track {
	background: transparent;
}

.bgl-select-panel__list::-webkit-scrollbar-thumb {
	background: rgba(var(--bgl-select-accent-rgb), 0.3);
	border-radius: 3px;
}

.bgl-select-panel__list::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--bgl-select-accent-rgb), 0.5);
}

/* Optgroup heading — native <optgroup> labels are mirrored in JS */
.bgl-select-panel__optgroup-label {
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 0.8125rem;
	color: var(--bgl-select-text);
	padding: 10px 14px 6px;
	pointer-events: none;
	user-select: none;
}

.bgl-select-panel__list > .bgl-select-panel__optgroup-label:not(:first-child) {
	margin-top: 4px;
	border-top: 1px solid var(--bgl-select-separator);
}

.bgl-select-panel__optgroup-label strong {
	font-weight: 700;
}

.bgl-select-panel__option {
	padding: 10px 14px;
	cursor: pointer;
	transition: background 0.15s;
	font-size: 14px;
	font-family: 'Fustat', 'Manrope', sans-serif;
	color: var(--bgl-select-text);
}

.bgl-select-panel__option:hover {
	background: rgba(var(--bgl-select-accent-rgb), 0.08);
}

.bgl-select-panel__option--selected {
	background: rgba(var(--bgl-select-accent-rgb), 0.1);
	font-weight: 600;
}

.bgl-select-panel__option--selected:hover {
	background: rgba(var(--bgl-select-accent-rgb), 0.12);
}

.bgl-select-panel__option--highlight {
	background: rgba(var(--bgl-select-accent-rgb), 0.15) !important;
}

.bgl-select-panel__empty {
	padding: 10px 14px;
	color: #999;
	font-size: 14px;
	font-family: 'Fustat', 'Manrope', sans-serif;
}

/* Premium badge on listing/overview cards (next to company name) */
.listing-premium-badge {
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	vertical-align: middle;
	background: linear-gradient(135deg, #ea9921 0%, #d68a1a 100%);
	color: #fff;
	line-height: 1;
	white-space: nowrap;
}
.listing-premium-badge i {
	font-size: 0.85em;
}

/* Bootstrap 5 tooltips: wrap long text and cap width on small viewports */
.tooltip .tooltip-inner {
	max-width: min(320px, calc(100vw - 1.5rem));
	text-align: left;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ── Role-based Opportunities Accordion (shared: game.php, provider.php) ── */
.opp-role-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.opp-role-acc-item {
	border: 1px solid rgba(0, 56, 66, 0.12);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}
.opp-role-acc-item[open] {
	box-shadow: 0 4px 24px rgba(0, 26, 31, 0.06);
}
.opp-role-acc-summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: 'Fustat', 'Manrope', sans-serif;
	background: rgba(248, 252, 252, 0.8);
	user-select: none;
}
.opp-role-acc-summary::-webkit-details-marker {
	display: none;
}
.opp-role-acc-summary::after {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid #003842;
	border-bottom: 2px solid #003842;
	transform: rotate(45deg);
	margin-left: auto;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.opp-role-acc-item[open] .opp-role-acc-summary::after {
	transform: rotate(-135deg);
}
.opp-role-acc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(66, 133, 131, 0.1);
	color: var(--opp-role-color, #428583);
	font-size: 1.1rem;
	flex-shrink: 0;
}
.opp-role-acc-title {
	font-weight: 700;
	font-size: 1.02rem;
	color: #001a1f;
}
.opp-role-acc-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	font-size: 0.72rem;
	font-weight: 700;
	background: rgba(0, 56, 66, 0.08);
	color: #3d5a62;
}
.opp-role-acc-body {
	padding: 0 1.25rem 1.25rem;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Role-based Opportunity Card ── */
.opp-role-card {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(0, 56, 66, 0.06);
}
/* game.php renders this card without a visual tile (no .opp-role-card-visual
   child) because the page is already about a single game. Drop the 56px
   leading column so .opp-role-card-main can actually breathe; otherwise
   every child is forced into the 56px column and content wraps a few
   characters per line. */
.opp-role-card--no-visual {
	grid-template-columns: minmax(0, 1fr) auto;
}
.opp-role-card:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.opp-role-card:first-child {
	padding-top: 1rem;
}
.opp-role-card-visual {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: #f6efe9;
	border: 1px solid rgba(0, 56, 66, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}
.opp-role-card-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.opp-role-card-visual-logo .bgl-company-avatar {
	width: 52px !important;
	height: 52px !important;
	box-shadow: none;
	border: none;
}

.opp-role-card-visual-logo {
	background: #fff !important;
}
.opp-role-card-visual-placeholder {
	color: #428583;
	font-size: 1.6rem;
}
.opp-role-card-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.opp-role-card-version {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #001a1f;
}
.opp-role-card-flag {
	height: 16px;
	width: auto;
	border-radius: 2px;
}
.opp-role-card-flag--worldwide {
	font-size: 16px;
	color: #428583;
	line-height: 1;
	width: auto;
	height: auto;
	border-radius: 0;
}
.opp-role-card-version--multi {
	gap: 0.35rem;
	color: #003842;
}
.opp-role-card-version--multi .ph {
	font-size: 1.05rem;
	color: #428583;
	flex-shrink: 0;
}
.opp-role-card-publisher {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	color: #5a7a80;
}
.opp-role-card-pub-avatar-slot {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-right: 2px;
}
.opp-role-card-pub-avatar-slot .bgl-company-avatar {
	width: 22px !important;
	height: 22px !important;
}
.opp-role-card-pub-name {
	font-weight: 600;
	color: #3d5a62;
	text-decoration: none;
}
a.opp-role-card-pub-name:hover {
	color: #001a1f;
	text-decoration: underline;
}
.opp-role-card-title {
	font-family: 'Crimson Pro', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: #001a1f;
	line-height: 1.35;
}
.opp-role-card-title-link {
	color: #001a1f !important;
	text-decoration: none !important;
}
.opp-role-card-title-link:hover {
	color: #428583 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
.opp-role-card-game {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.82rem;
	color: #5a7a80;
}
.opp-role-card-game-label {
	color: #8a9fa5;
}
.opp-role-card-game-thumb {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	object-fit: cover;
	background: #fffaf6;
	border: 1px solid rgba(0, 56, 66, 0.1);
}
.opp-role-card-game-name {
	font-weight: 600;
	color: #3d5a62;
	text-decoration: none;
}
a.opp-role-card-game-name:hover {
	color: #001a1f;
	text-decoration: underline;
}
.opp-role-card-action {
	flex-shrink: 0;
}
.opp-role-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.45rem 0.9rem;
	border-radius: var(--bgl-btn-radius);
	font-size: 0.82rem;
	font-weight: 600;
	color: #428583;
	background: rgba(66, 133, 131, 0.08);
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s ease;
}
.opp-role-card-btn:hover {
	background: rgba(66, 133, 131, 0.16);
	color: #2a6b6a;
}
.opp-role-card-btn i.ph {
	font-size: 0.9rem;
}

@media (max-width: 600px) {
	.opp-role-card {
		grid-template-columns: 52px minmax(0, 1fr);
		align-items: start;
		gap: 0.6rem;
	}
	.opp-role-card--no-visual {
		grid-template-columns: minmax(0, 1fr);
	}
	.opp-role-card-visual {
		width: 52px;
		height: 52px;
		border-radius: 9px;
	}
	.opp-role-card-action {
		grid-column: 2;
		align-self: flex-start;
	}
	.opp-role-card--no-visual .opp-role-card-action {
		grid-column: 1;
	}
}

/* ============================================
   Country flag images — global fallback shadow
   --------------------------------------------
   Flags from flagcdn.com often contain large white
   areas (e.g. Czech Republic, Japan, Poland) that
   blend into the cream page background. Provider,
   linkup and game pages each already define their
   own .country-flag-img / .linkup-posted-by-flag-img
   rule with a matching, slightly stronger shadow;
   this fallback covers any other page that surfaces
   flags without its own inline override so they
   remain visibly outlined site-wide.
   ============================================ */
.country-flag-img,
.linkup-posted-by-flag-img {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.22);
}

.country-flag-globe {
	font-size: 22px;
	color: #428583;
	line-height: 1;
	flex-shrink: 0;
}
.country-flags-list .country-flag-globe {
	font-size: 24px;
}
.country-flag-globe--inline {
	font-size: 18px;
}

/* Pitch video badge — designer games with a gallery video */
.bgl-pitch-video-badge,
.linkup-pitch-video-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: #ea9921;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.bgl-pitch-video-badge i,
.linkup-pitch-video-badge i {
	font-size: 0.85rem;
	color: inherit;
	width: auto;
}

/* Company cover banner — full-width hero strip shown on the public
   provider profile and on opportunity detail pages. Heights match the
   linkup.php banner so the two pages line up. Falls back to a solid
   role/category colour block when no image is set. */
.bgl-cover-banner {
	width: 100%;
	/* Fixed-height, full-bleed banner — same dimensions as the site heroes
	   (includes/hero_section.php FULL mode, e.g. join.php): 260 / 200 / 150. */
	height: 260px;
	/* Neutral fill behind the image (only visible if an image ever has gaps).
	   Never a dark colour, which would tint translucent uploads. */
	background-color: #e9eef0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

@media (max-width: 768px) {
	.bgl-cover-banner { height: 200px; }
}
@media (max-width: 480px) {
	.bgl-cover-banner { height: 150px; }
}

/* Admin "see all content" indicator. Shown only to logged-in BGL staff on
   sections that are normally role- or premium-gated, so they remember a
   regular visitor sees a locked/limited version here. See
   includes/bgl_viewer_access.php (bgl_admin_seeall_badge()). */
.bgl-admin-seeall-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-left: 0.6em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background-color: #f1e9ff;
	border: 1px solid #c9a8ff;
	color: #5b2b9e;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	vertical-align: middle;
	white-space: nowrap;
}
.bgl-admin-seeall-badge i {
	font-size: 0.9em;
}

/* Dashboard game card CTA — shown when a game has no opportunities yet, to
   make clear the game stays a draft until an opportunity is added. Used on
   dashboard/games.php and dashboard/_partials/games_hub_overview.php. */
.bgl-card-publish-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(234, 153, 33, 0.35);
	background: rgba(234, 153, 33, 0.08);
	border-radius: 10px;
	text-decoration: none;
	color: #6b4a16;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.bgl-card-publish-cta:hover,
.bgl-card-publish-cta:focus {
	background: rgba(234, 153, 33, 0.14);
	border-color: rgba(234, 153, 33, 0.55);
	text-decoration: none;
	color: #6b4a16;
}
.bgl-card-publish-cta-icon i {
	font-size: 22px;
	color: #d67e22;
}
.bgl-card-publish-cta-text {
	flex: 1;
	min-width: 0;
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 12.5px;
	line-height: 1.35;
}
.bgl-card-publish-cta-text strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #8a4b00;
}
.bgl-card-publish-cta-action {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: 'Fustat', 'Manrope', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	background: #d67e22;
	padding: 7px 12px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.bgl-card-publish-cta:hover .bgl-card-publish-cta-action,
.bgl-card-publish-cta:focus .bgl-card-publish-cta-action {
	background: #c06d14;
}
@media (max-width: 560px) {
	.bgl-card-publish-cta {
		flex-wrap: wrap;
	}
	.bgl-card-publish-cta-action {
		width: 100%;
		justify-content: center;
	}
}